update
This commit is contained in:
parent
124f27fe5f
commit
6073b6d43b
423
src/components/Charts/MixChart.1.vue
Normal file
423
src/components/Charts/MixChart.1.vue
Normal 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>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:23:37
|
||||
* @LastEditTime: 2021-12-01 09:18:32
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -14,21 +14,6 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<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-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
@ -51,7 +36,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -665,13 +650,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -701,6 +688,7 @@ export default {
|
||||
handleNode (obj, node, e) {
|
||||
if (!(obj.children)) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:23:45
|
||||
* @LastEditTime: 2021-12-01 09:17:51
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -51,7 +51,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -665,13 +665,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -701,6 +703,7 @@ export default {
|
||||
handleNode (obj, node, e) {
|
||||
if (!(obj.children)) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:19:52
|
||||
* @LastEditTime: 2021-12-01 09:15:35
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -50,7 +50,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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 style="margin: 20px 0">
|
||||
<el-tabs type="border-card">
|
||||
@ -93,7 +93,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-tab-pane>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:04
|
||||
* @LastEditTime: 2021-12-01 09:16:16
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -57,7 +57,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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 style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
@ -80,7 +80,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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 style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
@ -103,7 +103,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -717,13 +717,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -756,6 +758,7 @@ export default {
|
||||
this.yaoluList.map((item, index) => {
|
||||
if (item.id === obj.id) {
|
||||
this.yaoluIndex = index
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:10
|
||||
* @LastEditTime: 2021-12-01 10:54:45
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -14,21 +14,6 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<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-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
@ -51,7 +36,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -60,7 +45,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from '@/components/Charts/MixChart'
|
||||
import Chart from '@/components/Charts/MixChart.1'
|
||||
import ringChart from '@/components/Charts/RingChart'
|
||||
import lineChart from '@/components/Charts/LineChart.1'
|
||||
|
||||
@ -645,7 +630,7 @@ const yaoluList = [
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'kiln-speed',
|
||||
name: 'sulfur-dioxide',
|
||||
components: { Chart, ringChart, lineChart },
|
||||
data () {
|
||||
return {
|
||||
@ -665,13 +650,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -701,6 +688,7 @@ export default {
|
||||
handleNode (obj, node, e) {
|
||||
if (!(obj.children)) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:16
|
||||
* @LastEditTime: 2021-12-01 09:17:20
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -51,7 +51,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -665,13 +665,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -701,6 +703,7 @@ export default {
|
||||
handleNode (obj, node, e) {
|
||||
if (!(obj.children)) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:22
|
||||
* @LastEditTime: 2021-12-01 09:18:17
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -14,21 +14,6 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<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-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
@ -51,7 +36,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -665,13 +650,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -701,6 +688,7 @@ export default {
|
||||
handleNode (obj, node, e) {
|
||||
if (!(obj.children)) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:28
|
||||
* @LastEditTime: 2021-12-01 09:17:03
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -51,7 +51,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -665,13 +665,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -701,6 +703,7 @@ export default {
|
||||
handleNode (obj, node, e) {
|
||||
if (!(obj.children)) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:34
|
||||
* @LastEditTime: 2021-12-01 09:18:38
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -14,21 +14,6 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<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-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
@ -51,7 +36,7 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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-row>
|
||||
</el-col>
|
||||
@ -665,13 +650,15 @@ export default {
|
||||
chartType: ['柱状'],
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0
|
||||
yaoluIndex: 0,
|
||||
yaoluName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@ -701,6 +688,7 @@ export default {
|
||||
handleNode (obj, node, e) {
|
||||
if (!(obj.children)) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user