mt-ck/mt-qj-wms-ui
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
gtz217 2021-12-01 14:53:42 +08:00
parent 124f27fe5f
commit 6073b6d43b
10 changed files with 478 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

423
src/components/Charts/MixChart.1.vue Normal file
View File

@ -0,0 +1,423 @@
<template>
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: Number,
default: 0
},
showId: {
type: Number,
default: 0
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
},
title: {
type: String,
default: 'Mix-Chart'
},
titleFooter: {
type: String,
default: ''
},
titleHeader: {
type: String,
default: ''
},
dataList: {
type: Array,
default: () => {
return []
}
},
lastDataList: {
type: Array,
default: () => {
return []
}
},
chartType: {
type: Array,
default: () => {
return []
}
}
},
data () {
return {
chart: null,
series: []
}
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
watch: {
dataList: {
handler (val) {
if (val) {
this.series = []
if (this.chartType.indexOf('柱状') >= 0) {
this.series.push({
name: '后室风扇1运行速度',
type: 'bar',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.dataList.map(item => {
return item.value
})
})
this.series.push({
name: '后室风扇2运行速度',
type: 'bar',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.lastDataList.map(item => {
return item.value
})
})
}
if (this.chartType.indexOf('折线') >= 0) {
this.series.push({
name: '后室风扇1运行速度',
type: 'line',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.dataList.map(item => {
return item.value
})
})
this.series.push({
name: '后室风扇2运行速度',
type: 'line',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.lastDataList.map(item => {
return item.value
})
})
}
this.initChart()
}
},
deep: true
},
showId: {
handler () {
this.initChart()
}
},
chartType: {
handler (val) {
console.log(val)
if (val.length) {
this.series = []
if (val.indexOf('柱状') >= 0) {
this.series.push({
name: '后室风扇1运行速度',
type: 'bar',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.dataList.map(item => {
return item.value
})
})
this.series.push({
name: '后室风扇2运行速度',
type: 'bar',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.lastDataList.map(item => {
return item.value
})
})
}
if (val.indexOf('折线') >= 0) {
this.series.push({
name: '后室风扇1运行速度',
type: 'line',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.dataList.map(item => {
return item.value
})
})
this.series.push({
name: '后室风扇2运行速度',
type: 'line',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter (p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: this.lastDataList.map(item => {
return item.value
})
})
}
this.initChart()
}
},
deep: true
}
},
methods: {
initChart () {
if (this.chart) {
this.chart.dispose()
}
this.chart = echarts.init(document.getElementById(this.id))
const xData = this.dataList.map(item => {
return item.time
})
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
x: '20',
top: '20',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff'
}
}
},
grid: {
left: '5%',
right: '5%',
borderWidth: 0,
top: 150,
bottom: 95,
textStyle: {
color: '#fff'
}
},
legend: {
x: '5%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: this.series.map(item => {
return item.name
})
},
calculable: true,
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: xData
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}
],
dataZoom: [
{
show: true,
height: 30,
xAxisIndex: [0],
bottom: 30,
start: 0,
end: 100,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff'
},
borderColor: '#90979c'
},
{
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}
],
series: this.series
})
}
}
}
</script>

24
src/views/energy/ammonia-analysis.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:23:37 * @LastEditTime: 2021-12-01 09:18:32
* @Description: * @Description:
--> -->
<template> <template>
@ -14,21 +14,6 @@
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col>
<h3>氨气流量分析</h3>
</el-col>
</el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 400px">
<el-card>
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日氨气流量(立方米)：1145</p>
</el-card>
</el-col>
</el-row>
</el-row>
<el-row style="margin: 20px 0" :gutter="20"> <el-row style="margin: 20px 0" :gutter="20">
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group :min="1" v-model="chartType" style="float: left">
@ -51,7 +36,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="氮气用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -665,13 +650,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -701,6 +688,7 @@ export default {
handleNode (obj, node, e) { handleNode (obj, node, e) {
if (!(obj.children)) { if (!(obj.children)) {
this.showId = obj.id this.showId = obj.id
this.yaoluName = obj.label
} }
} }
} }

9
src/views/energy/ammonia.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:23:45 * @LastEditTime: 2021-12-01 09:17:51
* @Description: * @Description:
--> -->
<template> <template>
@ -51,7 +51,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="氨气使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -665,13 +665,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -701,6 +703,7 @@ export default {
handleNode (obj, node, e) { handleNode (obj, node, e) {
if (!(obj.children)) { if (!(obj.children)) {
this.showId = obj.id this.showId = obj.id
this.yaoluName = obj.label
} }
} }
} }

6
src/views/energy/electric.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:19:52 * @LastEditTime: 2021-12-01 09:15:35
* @Description: * @Description:
--> -->
<template> <template>
@ -50,7 +50,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" titleFooter="用电量（W）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-tabs type="border-card"> <el-tabs type="border-card">
@ -93,7 +93,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :id="item.id" :showId="showId" :title="eleType" :titleHeader="item.name" titleFooter="用电量（W）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :id="item.id" :showId="showId" :title="eleType" :titleHeader="item.name" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>

13
src/views/energy/kiln-electric.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:24:04 * @LastEditTime: 2021-12-01 09:16:16
* @Description: * @Description:
--> -->
<template> <template>
@ -57,7 +57,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" titleFooter="用电量（W）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group :min="1" v-model="chartType" style="float: left">
@ -80,7 +80,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :id="1" :title="eleType" titleFooter="电流趋势（A）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :id="1" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电流趋势（A）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group :min="1" v-model="chartType" style="float: left">
@ -103,7 +103,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :id="2" :title="eleType" titleFooter="电压趋势（V）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :id="2" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电压趋势（V）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -717,13 +717,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -756,6 +758,7 @@ export default {
this.yaoluList.map((item, index) => { this.yaoluList.map((item, index) => {
if (item.id === obj.id) { if (item.id === obj.id) {
this.yaoluIndex = index this.yaoluIndex = index
this.yaoluName = obj.label
} }
}) })
} }

28
src/views/energy/kiln-speed.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:24:10 * @LastEditTime: 2021-12-01 10:54:45
* @Description: * @Description:
--> -->
<template> <template>
@ -14,21 +14,6 @@
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col>
<h3>氨气流量分析</h3>
</el-col>
</el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 400px">
<el-card>
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日氨气流量(立方米)：1145</p>
</el-card>
</el-col>
</el-row>
</el-row>
<el-row style="margin: 20px 0" :gutter="20"> <el-row style="margin: 20px 0" :gutter="20">
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group :min="1" v-model="chartType" style="float: left">
@ -51,7 +36,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="速度参数（转/s）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -60,7 +45,7 @@
</template> </template>
<script> <script>
import Chart from '@/components/Charts/MixChart' import Chart from '@/components/Charts/MixChart.1'
import ringChart from '@/components/Charts/RingChart' import ringChart from '@/components/Charts/RingChart'
import lineChart from '@/components/Charts/LineChart.1' import lineChart from '@/components/Charts/LineChart.1'
@ -645,7 +630,7 @@ const yaoluList = [
] ]
export default { export default {
name: 'kiln-speed', name: 'sulfur-dioxide',
components: { Chart, ringChart, lineChart }, components: { Chart, ringChart, lineChart },
data () { data () {
return { return {
@ -665,13 +650,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -701,6 +688,7 @@ export default {
handleNode (obj, node, e) { handleNode (obj, node, e) {
if (!(obj.children)) { if (!(obj.children)) {
this.showId = obj.id this.showId = obj.id
this.yaoluName = obj.label
} }
} }
} }

9
src/views/energy/nitrogen.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:24:16 * @LastEditTime: 2021-12-01 09:17:20
* @Description: * @Description:
--> -->
<template> <template>
@ -51,7 +51,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :showId="showId" :title="eleType" titleFooter="氮气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="氮气使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -665,13 +665,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -701,6 +703,7 @@ export default {
handleNode (obj, node, e) { handleNode (obj, node, e) {
if (!(obj.children)) { if (!(obj.children)) {
this.showId = obj.id this.showId = obj.id
this.yaoluName = obj.label
} }
} }
} }

24
src/views/energy/process-temperature.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:24:22 * @LastEditTime: 2021-12-01 09:18:17
* @Description: * @Description:
--> -->
<template> <template>
@ -14,21 +14,6 @@
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col>
<h3>氨气流量分析</h3>
</el-col>
</el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 400px">
<el-card>
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日氨气流量(立方米)：1145</p>
</el-card>
</el-col>
</el-row>
</el-row>
<el-row style="margin: 20px 0" :gutter="20"> <el-row style="margin: 20px 0" :gutter="20">
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group :min="1" v-model="chartType" style="float: left">
@ -51,7 +36,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="加工温度（℃）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -665,13 +650,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -701,6 +688,7 @@ export default {
handleNode (obj, node, e) { handleNode (obj, node, e) {
if (!(obj.children)) { if (!(obj.children)) {
this.showId = obj.id this.showId = obj.id
this.yaoluName = obj.label
} }
} }
} }

9
src/views/energy/sulfur-dioxide.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:24:28 * @LastEditTime: 2021-12-01 09:17:03
* @Description: * @Description:
--> -->
<template> <template>
@ -51,7 +51,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :showId="showId" :title="eleType" titleFooter="二氧化硫使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="二氧化硫使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -665,13 +665,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -701,6 +703,7 @@ export default {
handleNode (obj, node, e) { handleNode (obj, node, e) {
if (!(obj.children)) { if (!(obj.children)) {
this.showId = obj.id this.showId = obj.id
this.yaoluName = obj.label
} }
} }
} }

24
src/views/energy/sump-temperature.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:24:34 * @LastEditTime: 2021-12-01 09:18:38
* @Description: * @Description:
--> -->
<template> <template>
@ -14,21 +14,6 @@
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col>
<h3>氨气流量分析</h3>
</el-col>
</el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 400px">
<el-card>
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日氨气流量(立方米)：1145</p>
</el-card>
</el-col>
</el-row>
</el-row>
<el-row style="margin: 20px 0" :gutter="20"> <el-row style="margin: 20px 0" :gutter="20">
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group :min="1" v-model="chartType" style="float: left">
@ -51,7 +36,7 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="油槽温度（℃）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
@ -665,13 +650,15 @@ export default {
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年', eleType: '年',
showId: 0, showId: 0,
yaoluIndex: 0 yaoluIndex: 0,
yaoluName: ''
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id this.showId = this.yaoluList[0].id
this.yaoluName = this.yaoluList[0].label
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -701,6 +688,7 @@ export default {
handleNode (obj, node, e) { handleNode (obj, node, e) {
if (!(obj.children)) { if (!(obj.children)) {
this.showId = obj.id this.showId = obj.id
this.yaoluName = obj.label
} }
} }
} }