派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/common/echarts/Echarts.vue
@@ -1,13 +1,6 @@ <template> <div id="Tab"> <div class="animation"> <div class="infomation"> <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i> 标准 : 100</span> <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span> <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span> <span class="grid-content">废气流量 : <i style="color: #e8ee0b">5.23</i></span> </div> </div> <public-data-standard :dataStandard = "dataStandard"></public-data-standard> <div class="form-echrts"> <div class="from-search"> <div class="pickerMon"> @@ -26,7 +19,7 @@ </div> <div> 采样点数: <el-select v-model="formInline.region" placeholder="50"> <el-select v-model="formInline.region" placeholder="50" class=""> <el-option label="0" value="0"></el-option> <el-option label="25" value="25"></el-option> <el-option label="50" value="50"></el-option> @@ -46,9 +39,13 @@ // import mapApi from '@/api/mapApi' import 'dayjs/locale/es' import dayjs from 'dayjs' import PublicDataStandard from '@components/BaseNav/PublicBounced/common/PublicDataStandard' export default { name: 'ECharts', components: { PublicDataStandard }, data () { return { days: dayjs(new Date()).format('YYYYMMDDHHmmss'), @@ -62,6 +59,23 @@ timeEnd: '' }, RealTimeChart: null, dataStandard: [{ current: { name: '氮氧化物1', val: 29.93 }, standard: { name: '标准', val: 100 } }, { current: { name: '二氧化硫', val: 17.34 }, standard: { name: '标准', val: 50 } }, { current: { name: '烟尘', val: 6.93 }, standard: { name: '标准', val: 30 } }, { current: { name: '废气流量', val: 120343.18 }, standard: { name: '', val: null } } ], JsonTimeCtarts: { id: 'mychart_ss ', title: '烟尘', @@ -835,6 +849,7 @@ } console.log(option) this.RealTimeChart.setOption(option) // this.IntervalEXHRealTimeDate() // this.RealTimeChart.on('legendselectchanged', function (params) { // var StdVal = null @@ -860,153 +875,153 @@ // var nowDate = new Date().Format() // }) }, getRtdb15s (unionTagCodeList, startTime, endTime, step, res) { if (this.res.length > 0) { // 处理数据开始 var d = res var nameList = [] // 存放图例 var data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} var datalist // 存放data的数组 // var bzh = [] for (var i = 0; i < d.length; i++) { if (d[i].ErrorMessage != null) { continue } // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName if (nameList.length === 0) { nameList.push(name) var newdate = new Date(this.res.ReadTime) data = { name: name, value: [newdate, this.res.TagValue] } datalist = { name: name, data: [data] } this.EXHRealTimeDataList.push(datalist) } else if (nameList.indexOf(name) < 0) { nameList.push(name) // var newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } datalist = { name: name, data: [data] } this.EXHRealTimeDataList.push(datalist) } else if (i === d.length - 1) { if (nameList.indexOf(name) < 0) { nameList.push(name) // var newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } datalist = { name: name, data: [data] } // EXHRealTimeDataList.push(datalist) } else { // var newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } for (var k = 0; k < this.EXHRealTimeDataList.length; k++) { if (this.EXHRealTimeDataList[k].name === name) { this.EXHRealTimeDataList[k].data.push(data) } } } } else { const newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } for (let k = 0; k < this.EXHRealTimeDataList.length; k++) { if (this.EXHRealTimeDataList[k].name === name) { this.EXHRealTimeDataList[k].data.push(data) } } } } // var divid = 'mychart_ss' // var title = name var lengList = [] var objTemp for (var l = 0; l < nameList.length; l++) { var obj var iconurl if (nameList[l] === '二氧化硫') { iconurl = 'image://../assets/imgs/legend/SO2.png' } else if (nameList[l] === '氮氧化物') { iconurl = 'image://../assets/imgs/legend/NOX.png' } else if (nameList[l] === '烟尘') { iconurl = 'image://../assets/imgs/legend/YanChen.png' } else if (nameList[l] === '非甲烷总烃') { iconurl = 'image://../assets/imgs/legend/grn.png' } else if (nameList[l] === '温度') { iconurl = 'image://../assets/imgs/legend/WenDu.png' } else { iconurl = 'image://../assets/imgs/legend/VOCs.png' } 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) this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname) } }, // getRtdb15s (unionTagCodeList, startTime, endTime, step, res) { // if (this.res.length > 0) { // // 处理数据开始 // var d = res // var nameList = [] // 存放图例 // // var data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} // var datalist // 存放data的数组 // // var bzh = [] // for (var i = 0; i < d.length; i++) { // if (d[i].ErrorMessage != null) { // continue // } // // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName // // if (nameList.length === 0) { // nameList.push(name) // // var newdate = new Date(this.res.ReadTime) // data = { // name: name, // value: [newdate, this.res.TagValue] // } // // datalist = { // name: name, // data: [data] // } // // this.EXHRealTimeDataList.push(datalist) // } else if (nameList.indexOf(name) < 0) { // nameList.push(name) // // // var newdate = new Date(d[i].ReadTime) // // data = { // name: name, // value: [newdate, d[i].TagValue] // } // datalist = { // name: name, // data: [data] // } // this.EXHRealTimeDataList.push(datalist) // } else if (i === d.length - 1) { // if (nameList.indexOf(name) < 0) { // nameList.push(name) // // // var newdate = new Date(d[i].ReadTime) // // data = { // name: name, // value: [newdate, d[i].TagValue] // } // datalist = { // name: name, // data: [data] // } // // EXHRealTimeDataList.push(datalist) // } else { // // var newdate = new Date(d[i].ReadTime) // data = { // name: name, // value: [newdate, d[i].TagValue] // } // for (var k = 0; k < this.EXHRealTimeDataList.length; k++) { // if (this.EXHRealTimeDataList[k].name === name) { // this.EXHRealTimeDataList[k].data.push(data) // } // } // } // } else { // const newdate = new Date(d[i].ReadTime) // data = { // name: name, // value: [newdate, d[i].TagValue] // } // for (let k = 0; k < this.EXHRealTimeDataList.length; k++) { // if (this.EXHRealTimeDataList[k].name === name) { // this.EXHRealTimeDataList[k].data.push(data) // } // } // } // } // // // var divid = 'mychart_ss' // // var title = name // var lengList = [] // var objTemp // // for (var l = 0; l < nameList.length; l++) { // var obj // var iconurl // if (nameList[l] === '二氧化硫') { // iconurl = 'image://../assets/imgs/legend/SO2.png' // } else if (nameList[l] === '氮氧化物') { // iconurl = 'image://../assets/imgs/legend/NOX.png' // } else if (nameList[l] === '烟尘') { // iconurl = 'image://../assets/imgs/legend/YanChen.png' // } else if (nameList[l] === '非甲烷总烃') { // iconurl = 'image://../assets/imgs/legend/grn.png' // } else if (nameList[l] === '温度') { // iconurl = 'image://../assets/imgs/legend/WenDu.png' // } else { // iconurl = 'image://../assets/imgs/legend/VOCs.png' // } // // 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) // // this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname) // } // }, // 钩子调用实时 IntervalEXHRealTimeDate (id, unionTagCodeList, BBZMAPPING) { IntervalEXHRealTimeDate () { // 定时器函数 this.interValHander = setInterval(function () { this.DrawEXHRealTimeDateChart() setInterval(function () { // $('.RealTime').empty() this.startTime = dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss') this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss') this.step = '15' // this.getRtdb15s(this.unionTagCodeList, this.startTime, this.endTime, this.step, this.res) // PreQueryTime=endTime; this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname) this.IntervalEXHRealTimeDate(this.JSONTimeData.id, this.JSONTimeData.unionTagCodeList, this.BBZMAPPING) this.IntervalEXHRealTimeDate() }, 15000) } } @@ -1023,13 +1038,6 @@ padding:0 10px >i{ color: #ffffff; } } .animation { //width: 600px; //height: 0.06rem; .infomation { padding: 5px 10px; } } .form-echrts { @@ -1059,7 +1067,7 @@ } /deep/.el-input__inner{ position: relative; width:140px; //width:140px; background-color: #2e4967; color: #fff; font-size: 12px;
