From ffafeb1548168dd8ee9526030e0ec3a7e7c7089a Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期五, 23 四月 2021 13:46:23 +0800
Subject: [PATCH] 废水实时数据弹框相关修改
---
src/components/BaseNav/WasteWater/RealData.vue | 452 +++++++++++++++++++++++++++-----------------------------
1 files changed, 219 insertions(+), 233 deletions(-)
diff --git a/src/components/BaseNav/WasteWater/RealData.vue b/src/components/BaseNav/WasteWater/RealData.vue
index 60554f9..c11e43f 100644
--- a/src/components/BaseNav/WasteWater/RealData.vue
+++ b/src/components/BaseNav/WasteWater/RealData.vue
@@ -2,17 +2,19 @@
<div class="echarts-box">
<div class="tab-scroll">
<PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
- <span class="time-select">{{ startTime }}鈥攞{ endTime }}</span>
+ <span class="time-select">{{ formData.startTime }}鈥攞{ formData.endTime }}</span>
</div>
<div class="echarts-form">
<span class="demonstration">寮�濮嬫椂闂达細</span>
<el-date-picker
- v-model="startTime"
+ v-model="formData.startTime"
+ value-format="yyyy-MM-dd HH:mm:ss"
type="datetime">
</el-date-picker>
<span class="demonstration">缁撴潫鏃堕棿锛�</span>
<el-date-picker
- v-model="endTime"
+ v-model="formData.endTime"
+ value-format="yyyy-MM-dd HH:mm:ss"
type="datetime">
</el-date-picker>
<span class="demonstration">閲囨牱鐐规暟锛�</span>
@@ -87,260 +89,260 @@
}
}],
formData: {
- startTime: '',
- endTime: ''
+ startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
+ endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
},
- startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
- endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
region: '25',
regionList: [25, 50, 75, 100],
datatype: 1,
RealTimeDataList: [],
bzz: null,
- bzzList: []
+ bzzList: [],
+ nameList: [],
+ // legend绫诲埆鍥捐〃灞曠ず璁剧疆鏁扮粍
+ lengList: [],
+ ydatas: []
}
},
mounted () {
this.$nextTick(() => {
- this.myChart = this.$echarts.init(this.$refs.echarts)
this.initEchartsData()
})
},
methods: {
// 鏌ヨ鎼滅储鍔熻兘
- async querySearch () {
+ querySearch () {
+ this.initEchartsData()
+ },
+ async initEchartsData () {
const data = {
$tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
$startTime: this.formData.startTime,
$endTime: this.formData.endTime,
$step: 15
}
- // console.log(data)
const result = (await mapApi.getDataItems(data)).data
- // console.log(result)
- this.dealWithData(result)
+ this.pointsSet(result)
+ this.legendSet()
+ this.yDataSet()
+ this.drawRealTimeDateChart()
},
- async initEchartsData () {
- const data = {
- $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
- $startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
- $endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
- $step: 15
- }
- const result = (await mapApi.getDataItems(data)).data
- // this.result = result
- this.dealWithData(result)
- },
- // 鏁版嵁澶勭悊
- dealWithData (result) {
- // 鎺ユ敹鏁版嵁姝ｇ‘ 杩涜鏁版嵁澶勭悊
- if (result.length > 0) {
- // 澶勭悊鏁版嵁寮�濮�
- const d = result
- const nameList = []
-
- let data
- let datalist
-
- // 鏁版嵁鍒ゆ柇
- for (let i = 0; i < d.length; i++) {
- if (d[i].ErrorMessage != null) {
- continue
+ // 鎺ュ彛鏁版嵁鎸夌収 鏁版嵁鍐呭垎绫诲埆璁剧疆
+ pointsSet (d) {
+ let data = []
+ let datalist = []
+ for (let i = 0; i < d.length; i++) {
+ // this.RealTimeDataList = []
+ // 鍒ゆ柇鏄惁缁х画鎵ц
+ if (d[i].ErrorMessage != null) {
+ continue
+ }
+ // temp 涓存椂鏁版嵁鍒ゆ柇鏂规硶
+ const tempList = [
+ {
+ 'TJIP45.lscl2tbAIA-10505-1': '姘哀鍖栫墿',
+ 'TJIP45.lscl2tbAIA-10505-2': '鐑熷皹',
+ 'TJIP45.lscl2tb552AISA11202A': '浜屾哀鍖栫７',
+ 'TJIP45.lscl2tb552AISA11201B': 'pH',
+ 'TJIP45.lscl2tb552AI10710': '浜屾哀鍖栫⒊'
}
-
- // temp 涓存椂鏁版嵁鍒ゆ柇鏂规硶
- const tempList = [
- {
- 'TJIP45.lscl2tbAIA-10505-1': '姘哀鍖栫墿',
- 'TJIP45.lscl2tbAIA-10505-2': '鐑熷皹',
- 'TJIP45.lscl2tb552AISA11202A': '浜屾哀鍖栫７',
- 'TJIP45.lscl2tb552AISA11201B': 'pH',
- 'TJIP45.lscl2tb552AI10710': '浜屾哀鍖栫⒊'
- }
- ]
- const name = tempList[0][d[i].UnionTagCode]
-
- if (nameList.length === 0) {
- nameList.push(name)
- const newdate = new Date(d[i].ReadTime)
+ ]
+ // 鎸囨爣
+ const name = tempList[0][d[i].UnionTagCode]
+ // 鍒ゆ柇甯傚眬绫诲瀷杩涜鍒嗙粍
+ if (this.nameList.length === 0) {
+ // 鏁扮粍涓虹┖鏃�
+ this.nameList.push(name)
+ // todo 鐢╠ayjs
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
+ }
+ datalist = {
+ name: name,
+ data: [data]
+ }
+ // console.log('1111111')
+ this.RealTimeDataList.push(datalist)
+ } else if (this.nameList.indexOf(name) < 0) {
+ // 娌℃湁鎸囨爣鏃�
+ this.nameList.push(name)
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
+ }
+ datalist = {
+ name: name,
+ data: [data]
+ }
+ // console.log('222222222')
+ this.RealTimeDataList.push(datalist)
+ } else if (i === d.length - 1) {
+ // 寰幆鍒版渶鍚�
+ if (this.nameList.indexOf(name) < 0) {
+ this.nameList.push(name)
+ const newDate = new Date(d[i].ReadTime)
data = {
name: name,
- value: [newdate, d[i].TagValue]
+ value: [newDate, d[i].TagValue]
}
datalist = {
name: name,
data: [data]
}
+ // console.log('3333333')
this.RealTimeDataList.push(datalist)
- } else if (nameList.indexOf(name) < 0) {
- nameList.push(name)
- const newdate = new Date(d[i].ReadTime)
- data = {
- name: name,
- value: [newdate, d[i].TagValue]
- }
- datalist = {
- name: name,
- data: [data]
- }
- this.RealTimeDataList.push(datalist)
- } else if (i === d.length - 1) {
- if (nameList.indexOf(name) < 0) {
- nameList.push(name)
- const newdate = new Date(d[i].ReadTime)
- data = {
- name: name,
- value: [newdate, d[i].TagValue]
- }
- datalist = {
- name: name,
- data: [data]
- }
- this.RealTimeDataList.push(datalist)
- } else {
- const newdate = new Date(d[i].ReadTime)
- data = {
- name: name,
- value: [newdate, d[i].TagValue]
- }
- for (let k = 0; k < this.RealTimeDataList.length; k++) {
- if (this.RealTimeDataList[k].name === name) {
- this.RealTimeDataList[k].data.push(data)
- }
- }
- }
} else {
- const newdate = new Date(d[i].ReadTime)
+ const newDate = new Date(d[i].ReadTime)
data = {
name: name,
- value: [newdate, d[i].TagValue]
+ value: [newDate, d[i].TagValue]
}
+ // console.log('444444')
for (let k = 0; k < this.RealTimeDataList.length; k++) {
if (this.RealTimeDataList[k].name === name) {
this.RealTimeDataList[k].data.push(data)
}
}
}
- }
- const lengList = []
- let objTemp
-
- for (let l = 0; l < nameList.length; l++) {
- let obj
- let IconUrl
- if (nameList[l] === 'pH') {
- IconUrl = 'image://../assets/imgs/legend/WenDu.png'
- } else if (nameList[l] === '姘哀鍖栫墿') {
- IconUrl = 'image://../assets/imgs/legend/NOX.png'
- } else if (nameList[l] === '鐑熷皹') {
- IconUrl = 'image://../assets/imgs/legend/zongdan.png'
- } else if (nameList[l] === '浜屾哀鍖栫７') {
- IconUrl = 'image://../assets/imgs/legend/YanChen.png'
- } else if (nameList[l] === '浜屾哀鍖栫⒊') {
- IconUrl = 'image://../assets/imgs/legend/VOCs.png'
+ } else {
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
}
-
- if (nameList[l] === '搴熸按' || nameList[l] === '搴熸按娴侀噺') { // 灏嗗簾姘存祦閲忔帓鍒版暟缁勬渶鍚�
- objTemp = {
- name: nameList[l],
- icon: IconUrl,
- textStyle: {
- color: '#ccc'
- },
- itemWidth: 20,
- itemHeight: 5
- }
- } else {
- obj = {
- name: nameList[l],
- icon: IconUrl,
- textStyle: {
- color: '#ccc'
- },
- itemWidth: 20,
- itemHeight: 5
- }
- lengList.push(obj)
- }
- }
- lengList.push(objTemp)
-
- const legend = lengList
- const ydatas = []
-
- // console.log(nameList)
- for (let j = 0; j < nameList.length; j++) {
- let zdcbcolor, zxcolor
- if (nameList[j] === 'COD') {
- zdcbcolor = 'red'
- zxcolor = '#fff21c'
- } else if (nameList[j] === '姘ㄦ爱') {
- zdcbcolor = 'red'
- zxcolor = '#00B0F0'
- } else if (nameList[j] === '鎬荤７') {
- zdcbcolor = 'red'
- zxcolor = '#f48183'
- } else if (nameList[j] === '鎬绘爱') {
- zdcbcolor = 'red'
- zxcolor = '#e0ffff'
- } else {
- zdcbcolor = 'red'
- zxcolor = '#9ACD32'
- }
- let ydata
-
- // 涓存椂鏁版嵁
- const BBZMAPPING = {
- COD: 35,
- pH: 9,
- 鎬绘爱: 15,
- 鎬荤７: 0.3,
- 姘ㄦ爱: 3
- }
- for (let m = 0; m < this.RealTimeDataList.length; m++) {
- let stdValue = null
- if (this.RealTimeDataList[m].name === nameList[j]) {
- for (const p in BBZMAPPING) {
- // console.log('p' + p)
- this.a = p
- stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
- }
- // console.log(stdValue)
- this.bzz = {
- name: nameList[j],
- bzhui: stdValue
- }
- ydata = {
- name: nameList[j],
- data: this.RealTimeDataList[m].data,
- zdcbcolor: zdcbcolor,
- zxcolor: zxcolor,
- bzz: stdValue
- }
- // console.log(stdValue)
- this.bzzList.push(this.bzz)
- ydatas.push(ydata)
+ for (let k = 0; k < this.RealTimeDataList.length; k++) {
+ if (this.RealTimeDataList[k].name === name) {
+ this.RealTimeDataList[k].data.push(data)
}
}
}
- const yname = '娴撳害(mg/l)'
- this.DrawRealTimeDateChart(legend, ydatas, yname)
+ }
+ console.log(this.RealTimeDataList)
+ },
+ // legend绫诲埆鍥捐〃灞曠ず璁剧疆鏁扮粍
+ legendSet () {
+ this.lengList = []
+ let objTemp
+ for (let l = 0; l < this.nameList.length; l++) {
+ let obj
+ let IconUrl
+ if (this.nameList[l] === 'pH') {
+ IconUrl = 'image://../assets/imgs/legend/WenDu.png'
+ } else if (this.nameList[l] === '姘哀鍖栫墿') {
+ IconUrl = 'image://../assets/imgs/legend/NOX.png'
+ } else if (this.nameList[l] === '鐑熷皹') {
+ IconUrl = 'image://../assets/imgs/legend/zongdan.png'
+ } else if (this.nameList[l] === '浜屾哀鍖栫⒊') {
+ IconUrl = 'image://../assets/imgs/legend/YanChen.png'
+ } else if (this.nameList[l] === '浜屾哀鍖栫７') {
+ IconUrl = 'image://../assets/imgs/legend/VOCs.png'
+ }
+ if (this.nameList[l] === '搴熸按' || this.nameList[l] === '搴熸按娴侀噺') { // 灏嗗簾姘存祦閲忔帓鍒版暟缁勬渶鍚�
+ objTemp = {
+ name: this.nameList[l],
+ icon: IconUrl,
+ textStyle: {
+ color: '#ccc'
+ },
+ itemWidth: 20,
+ itemHeight: 5
+ }
+ } else {
+ obj = {
+ name: this.nameList[l],
+ icon: IconUrl,
+ textStyle: {
+ color: '#ccc'
+ },
+ itemWidth: 20,
+ itemHeight: 5
+ }
+ this.lengList.push(obj)
+ }
+ }
+ this.lengList.push(objTemp)
+ },
+ // yDataSet 鏁版嵁澶勭悊
+ yDataSet () {
+ this.bzzList = []
+ this.ydatas = []
+ for (let j = 0; j < this.nameList.length; j++) {
+ let zdcbcolor, zxcolor
+ if (this.nameList[j] === 'pH') {
+ zdcbcolor = 'red'
+ zxcolor = '#900090'
+ } else if (this.nameList[j] === '姘ㄦ爱') {
+ zdcbcolor = 'red'
+ zxcolor = '#00B0F0'
+ } else if (this.nameList[j] === '鐑熷皹') {
+ zdcbcolor = 'red'
+ zxcolor = '#f48183'
+ } else if (this.nameList[j] === '鎬绘爱') {
+ zdcbcolor = 'red'
+ zxcolor = '#e0ffff'
+ } else {
+ zdcbcolor = 'red'
+ zxcolor = '#9ACD32'
+ }
+ let ydata
+
+ // 涓存椂鏁版嵁
+ const BBZMAPPING = {
+ COD: 35,
+ pH: 9,
+ 鎬绘爱: 15,
+ 鎬荤７: 0.3,
+ 姘ㄦ爱: 3
+ }
+ for (let m = 0; m < this.RealTimeDataList.length; m++) {
+ let stdValue = null
+ if (this.RealTimeDataList[m].name === this.nameList[j]) {
+ for (const p in BBZMAPPING) {
+ // console.log('p' + p)
+ this.a = p
+ stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
+ }
+ // console.log(stdValue)
+ this.bzz = {
+ name: this.nameList[j],
+ bzhui: stdValue
+ }
+ ydata = {
+ name: this.nameList[j],
+ data: this.RealTimeDataList[m].data,
+ zdcbcolor: zdcbcolor,
+ zxcolor: zxcolor,
+ bzz: stdValue
+ }
+ // console.log(stdValue)
+ this.bzzList.push(this.bzz)
+ this.ydatas.push(ydata)
+ }
+ }
}
},
+ // 鏍规嵁澶勭悊濂界殑鏁扮粍杩涜echarts鍥炬爣鐨勬覆鏌�
+ drawRealTimeDateChart () {
+ this.myChart = this.$echarts.init(this.$refs.echarts)
+ this.myChart.clear()
- // 鎸囨爣鏍规嵁鏍囧噯鍊煎垽鏂紝濡傛灉澶т簬鏍囧噯鍊兼槸绾㈣壊
- // 鏍囧噯绾跨粯鍒�
- DrawRealTimeDateChart (legend, ydatas, yname) {
- const serLists = []
+ const legend = this.lengList
+ const yname = '娴撳害(mg/m鲁)'
const bzzList = this.bzzList
- for (let i = 0; i < ydatas.length; i++) {
- const zdcbcolor = ydatas[i].zdcbcolor
- const bz = ydatas[i].bzz
+
+ const serLists = []
+
+ for (let i = 0; i < this.ydatas.length; i++) {
+ const zdcbcolor = this.ydatas[i].zdcbcolor
+ const bz = this.ydatas[i].bzz
// console.log(bz)
let obj
if (bz) {
obj = {
- name: ydatas[i].name,
+ name: this.ydatas[i].name,
// symbol:'circle', // 鎶樼偣褰㈢姸
// symbolSize: 3, //澶у皬
smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾�
@@ -362,7 +364,7 @@
}
},
lineStyle: { // 鎶樼嚎鐨勯鑹�
- color: ydatas[i].zxcolor,
+ color: this.ydatas[i].zxcolor,
width: 2
},
// borderColor:'black', //鎶樼偣杈规鐨勯鑹�
@@ -372,7 +374,7 @@
}
},
type: 'line',
- data: ydatas[i].data,
+ data: this.ydatas[i].data,
markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺
symbol: 'none',
data: [{
@@ -386,12 +388,7 @@
yAxis: bz,
lineStyle: {
normal: {
- type: 'dashed',
- width: 2,
- // color: ydatas[i].zxcolor,
- // color: '#4ec99c',
- color: function (c) {
- console.log(c)
+ color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
let biaozhuiz
for (let i = 0; i < bzzList.length; i++) {
if (bzzList[i].name === c.seriesName) {
@@ -414,7 +411,7 @@
}
} else {
obj = {
- name: ydatas[i].name,
+ name: this.ydatas[i].name,
symbol: 'circle', // 鎶樼偣褰㈢姸
symbolSize: 10, // 澶у皬
smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾�
@@ -436,7 +433,7 @@
// }
// },
// lineStyle: { // 鎶樼嚎鐨勯鑹�
- // color: ydatas[i].zxcolor,
+ // color: this.ydatas[i].zxcolor,
// width: 5
// },
// borderColor: 'black', // 鎶樼偣杈规鐨勯鑹�
@@ -446,27 +443,23 @@
// }
// },
type: 'line',
- data: ydatas[i].data
+ data: this.ydatas[i].data
}
}
-
- if (ydatas[i].name === '搴熸皵娴侀噺' || ydatas[i].name === '搴熸皵') {
+ if (this.ydatas[i].name === '搴熸皵娴侀噺' || this.ydatas[i].name === '搴熸皵') {
obj.yAxisIndex = 1
}
serLists.push(obj)
}
-
+ // console.log(serLists)
let dataUnit = ''
if (this.datatype === 1) {
dataUnit = '娴侀噺(m鲁/d)'
} else {
dataUnit = '娴侀噺(m鲁/h)'
}
-
+ // echarts鍥捐〃option鏁版嵁
const options = {
- /* title: {
- text: title,
- }, */
tooltip: { // 鎻愮ず妗�
trigger: 'axis',
axisPointer: {
@@ -491,15 +484,15 @@
let colo = ''
switch (seriesName) {
case 'pH':
- colo = '#f206ff'
+ colo = '#900090'
break
- case '姘哀鍖栫墿':
+ case '浜屾哀鍖栫⒊':
colo = '#00B0F0'
break
case '鐑熷皹':
colo = '#e0ffff'
break
- case '浜屾哀鍖栫⒊':
+ case '姘哀鍖栫墿':
colo = '#9ACD32'
break
case '浜屾哀鍖栫７':
@@ -624,16 +617,9 @@
}],
series: serLists
}
- this.myChart.setOption(options)
+ this.myChart.setOption(options, true)
+ console.log(options)
window.onresize = this.myChart.resize
- },
- // 瀹氭椂鍣� 鏍规嵁鏃堕棿闂撮殧璇锋眰鏁版嵁
- IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
- // const interValHander = setInterval(function () {
- // this.initEchartsData()
- // console.log('闂撮殧璇锋眰鏁版嵁')
- // }, 1500)
- // console.log(interValHander)
}
}
}
--
Gitblit v1.8.0