From 4af913e89b28f32a1ea168866f8dd38e2c6411fb Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期三, 21 四月 2021 16:58:25 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/WasteGas/Detail.vue | 147 +- src/components/LayerController/logic/WasteGas.js | 34 src/components/BaseNav/WasteWater/RealData.vue | 14 src/components/BaseNav/WasteGas/DayData.vue | 967 ++++++------- src/api/mapUrl.js | 2 src/components/BaseNav/WasteGas/HourData.vue | 892 +++++++----- src/components/BaseNav/WasteWater/DayData.vue | 4 /dev/null | 942 ------------- src/components/BaseNav/WasteWater/Detail.vue | 368 +--- src/components/BaseNav/WasteGas/RealData.vue | 737 ++++++++++ src/components/BaseNav/WasteGas/Scheduleof.vue | 46 src/components/BaseNav/WasteWater/HourData.vue | 4 src/components/BaseNav/WasteGas/WasteGasIndex.vue | 155 + 13 files changed, 2,018 insertions(+), 2,294 deletions(-) diff --git a/src/api/mapUrl.js b/src/api/mapUrl.js index 79ab3ec..e34d1ad 100644 --- a/src/api/mapUrl.js +++ b/src/api/mapUrl.js @@ -12,7 +12,7 @@ export const getWasteGas = $HOST + '/wasteGas/getWasteGas' export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails' -export const DataItems = $HOST + '/wasteWater/RTDB/DataItems' +export const DataItems = $HOST + '/wasteGas/RTDB/DataItems' // 搴熸皵瀹炴椂鏁版嵁 export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData' export const getWasteGasManualData = $HOST + '/wasteGas/QueryLabMonData' diff --git a/src/components/BaseNav/WasteGas/DayData.vue b/src/components/BaseNav/WasteGas/DayData.vue index ee1def1..74174c7 100644 --- a/src/components/BaseNav/WasteGas/DayData.vue +++ b/src/components/BaseNav/WasteGas/DayData.vue @@ -1,184 +1,335 @@ <!-- 鏃ユ暟鎹� --> <template> <div id="Tab"> - <div class="animation"> - <div class="infomation"> - <span class="grid-content">姘哀鍖栫墿 :<i style="color: #e8ee0b">29.93</i> 鏍囧噯 : <i style="color: #e8ee0b">100</i> </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">120343.18</i></span> - </div> - </div> + <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> <div class="form-echrts"> <div class="from-search"> <div class="pickerMon"> <div class="pickerData"> <span> 寮�濮嬫椂闂�:</span> <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> + <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> </span> </div> <div class="pickerData"> - <span >缁撴潫鏃堕棿:</span> + <span>缁撴潫鏃堕棿:</span> <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> + <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> </span> </div> </div> -<!-- <div>--> -<!-- 閲囨牱鐐规暟:--> -<!-- <el-select v-model="formInline.region" placeholder="50">--> -<!-- <el-option label="0" value="0"></el-option>--> -<!-- <el-option label="25" value="25"></el-option>--> -<!-- <el-option label="50" value="50"></el-option>--> -<!-- <el-option label="75" value="75"></el-option>--> -<!-- <el-option label="100" value="100"></el-option>--> -<!-- </el-select>--> -<!-- </div>--> - <div class="detailbtn hover-bottom" @click="onSubmit">鏌ヨ</div> - <div class="detailbtn hover-bottom" @click="dialogVisible = true" >鏄庣粏琛�</div> + <!-- <div>--> + <!-- 閲囨牱鐐规暟:--> + <!-- <el-select v-model="formInline.region" placeholder="50">--> + <!-- <el-option label="0" value="0"></el-option>--> + <!-- <el-option label="25" value="25"></el-option>--> + <!-- <el-option label="50" value="50"></el-option>--> + <!-- <el-option label="75" value="75"></el-option>--> + <!-- <el-option label="100" value="100"></el-option>--> + <!-- </el-select>--> + <!-- </div>--> + <div class="detailbtn hover-bottom">鏌ヨ</div> + <div class="detailbtn hover-bottom">鏄庣粏琛�</div> </div> - <div style="width:5rem;height:1.5rem;" id="echarts" ref="main"> + <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegasday"> </div> </div> - <!-- 鏄庣粏寮规 --> - <el-dialog :visible.sync="dialogVisible" - :append-to-body="true" - :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName" - width="68%" - center - v-dialogDrag - > - <div class="el-dialog-div" style="height: 500px"> - <public-detailed-list v-bind="$attrs"></public-detailed-list> - </div> - </el-dialog> + <!-- <!– 鏄庣粏寮规 –>--> + <!-- <el-dialog :visible.sync="dialogVisible"--> + <!-- :append-to-body="true"--> + <!-- :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"--> + <!-- width="68%"--> + <!-- center--> + <!-- v-dialogDrag--> + <!-- >--> + <!-- <div class="el-dialog-div" style="height: 500px">--> + <!-- <public-detailed-list v-bind="$attrs"></public-detailed-list>--> + <!-- </div>--> + <!-- </el-dialog>--> </div> </template> <script> -import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' +// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' +import PublicDataStandard from '../PublicDataStandard' +import 'dayjs/locale/es' import dayjs from 'dayjs' +import mapApi from '@/api/mapApi' export default { name: 'DayData', components: { - PublicDetailedList + // PublicDetailedList + PublicDataStandard }, data () { return { - watchData: [], - dialogVisible: false, - myChar: null, - value: '', - formInline: { - region: '', - timeStart: '', - timeEnd: '' - }, - info: this.series, - JsonDayCharts: { - id: 'mychartsDay', - title: '鍔犵儹鐐夌儫姘�', - legend: [ - { - icon: 'image://../assets/imgs/legend/NOX.png', - itemHeight: 5, - itemWidth: 20, - textStyle: { - color: '#CCC' - }, - name: '姘哀鍖栫墿' + // tab鏍忎紶閫掓帴鏀舵暟鎹� + dataStandard: [ + { + current: { + name: '姘哀鍖栫墿', + val: 29.93 }, - { - icon: 'image://../assets/imgs/legend/SO2.png', - itemHeight: 5, - itemWidth: 20, - name: '浜屾哀鍖栫~', - textStyle: { - color: '#CCC' - } - }, - { - icon: 'image://../assets/imgs/legend/YanChen.png', - itemHeight: 5, - itemWidth: 20, - name: '鐑熷皹', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/WenDu.png', - itemHeight: 5, - itemWidth: 20, - name: '娓╁害', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/VOCs.png', - itemHeight: 5, - itemWidth: 20, - name: '搴熸皵娴侀噺', - textStyle: { color: '#ccc' } + standard: { + name: '鏍囧噯', + val: 100 } - ], - xdata: ['1鏃�', '2鏃�', '3鏃�', '4鏃�', '5鏃�', '6鏃�', '7鏃�', '8鏃�', '9鏃�', '10鏃�', '11鏃�', '12鏃�', '13鏃�', '14鏃�', '15鏃�', '16鏃�', '17鏃�', '18鏃�', '19鏃�', '20鏃�', '21鏃�', '22鏃�', '23鏃�', '24鏃�', '25鏃�', '26鏃�', '27鏃�', '28鏃�', '29鏃�', '30鏃�', '31鏃�'], - ydatas: [ - { name: '姘哀鍖栫墿', data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 100 }, - { name: '浜屾哀鍖栫~', data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 }, - { - name: '搴熸皵娴侀噺', - data: ['2827518.25', '2763525.75', '2776435.50', '2742003.50', '2856001.75', '2890287.00', '2832898.25', '2803715.50', '2513925.75', '2753303.50', '2749836.00', '2786188.50', '2738838.00', '2733660.25', '2815521.25', '2830217.25', '2798918.00', '2803543.50', '2770175.25', '2823321.25', '2856329.25', '2801588.00', '2798103.50', '2766343.00', '2750489.50', '2697786.25', '2796775.50', '2808028.50', '2813561.75', '2757129.25', '2720755.50'], - zdcbcolor: 'red', - zxcolor: '#9ACD32', - bzz: null + }, + { + current: { + name: '浜屾哀鍖栫~', + val: 17.34 }, - { name: '鐑熷皹', data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 30 } - ], - yname: ' 娴撳害(mg/m鲁)', - // id:'mychartDay', - datatype: 1 - } + standard: { + name: '鏍囧噯', + val: 50 + } + }, + { + current: { + name: '鐑熷皹', + val: 6.93 + }, + standard: { + name: '鏍囧噯', + val: 30 + } + }, + { + current: { + name: '搴熸皵娴侀噺', + val: 120 + }, + standard: { + name: '', + val: null + } + }], + formInline: { + timeStart: null, + timeEnd: null + }, + dataType: 1, + myChart: null, + exhbzz: null, + jcdID: 1, + exhbzzList: [], + bzz: null, + bzzList: [] } }, mounted () { - this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') - this.formInline.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss') - this.onSubmit() - // this.CreateChart(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype) - }, - updated () { - this.onSubmit() + this.$nextTick(() => { + this.initnData() + }) }, methods: { - onSubmit () { - console.log('submit!') - this.CreateCharts(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype) + async initnData () { + // 鐢ㄤ簬鎺ュ彛鏁版嵁璇锋眰鐨勫弬鏁� 寮�濮�/缁撴潫鏃堕棿 || 鍙�夋嫨鏌ヨ鐨勫紑濮�/缁撴潫鏃堕棿 + this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') + this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss') + const data = { + onLineMonEmissPointId: 23, + monItemId: 28, + beginTime: this.formInline.timeStart, + endTime: this.formInline.timeEnd, + dataType: this.dataType + } + const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo + // console.log(result) + this.get24HourDate(result) }, + get24HourDate (res) { + if (res.length > 0) { + // 澶勭悊鏁版嵁寮�濮� + const d = res + const nameList = [] // 瀛樻斁鍥句緥 + const dateList = [] // 瀛樻斁鏃堕棿 + const dataList = [] // 瀛樻斁鏁版嵁 + let data + const bzh = [] - CreateCharts: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { - this.mychartDay = this.$echarts.init(this.$refs.main) - this.mychartDay.clear() - var dataUnit = '' + // wrwIDS = [] + + for (let i = 0; i < d.length; i++) { + if (d[i].MonItemId === '29') { + continue + } + // 20190430 add 鑾峰彇鐩戞祴鐐筰d 姹℃煋鐗﹊d 妫�娴嬮」id + // getWRW(d[i]) + const MonTimeStr = d[i].MonTimeStr + + const d1 = MonTimeStr.split('/') + // var d2=d1[2].split(' '); + let strDate + if (d1[1] > 9) { + // if(d2[0]>9){ + strDate = MonTimeStr.substring(8, 10) + '鏃�' + // }else { + // strDate=MonTimeStr.substring(8,9)+"鏃�"; + // } + } else { + // if(d2[0]>9){ + strDate = MonTimeStr.substring(7, 9) + '鏃�' + // }else { + // strDate=MonTimeStr.substring(7,8)+"鏃�"; + // } + } + + if (nameList.length === 0) { + nameList.push(d[i].PoltmtrlName.trim()) + dateList.push(strDate) + + bzh.push(d[i].StdValue) + data = { + name: d[i].PoltmtrlName.trim(), + data: [d[i].MonQty] + } + dataList.push(data) + } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) { + nameList.push(d[i].PoltmtrlName) + bzh.push(d[i].StdValue) + data = { + name: d[i].PoltmtrlName.trim(), + data: [d[i].MonQty] + } + dataList.push(data) + } else { + if (dateList.indexOf(strDate) < 0) { + dateList.push(strDate) + } + for (var j = 0; j < dataList.length; j++) { + if (d[i].PoltmtrlName.trim() === dataList[j].name) { + dataList[j].data.push(d[i].MonQty) + } + } + } + } + // 澶勭悊鏁版嵁缁撴潫 + + var divid = 'mychart1eff' + + var title = name + + var lengList = [] + var objTemp + + for (var l = 0; l < nameList.length; l++) { + var obj + var iconurl + if (nameList[l] === 'COD') { + iconurl = 'image://../assets/imgs/legend/SO2.png' + } else if (nameList[l] === '姘ㄦ爱') { + iconurl = 'image://../assets/imgs/legend/NOX.png' + } else if (nameList[l] === '鎬荤7') { + iconurl = 'image://../assets/imgs/legend/YanChen.png' + } else if (nameList[l] === '鎬绘爱') { + iconurl = 'image://../assets/imgs/legend/zongdan.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) + } + + this.bzz = { + name: nameList[l], + bzhui: bzh[l] + } + this.bzzList.push(this.bzz) + } + lengList.push(objTemp) + + const legend = lengList + const xdata = dateList.reverse() + const ydatas = [] + + for (let j = 0; j < nameList.length; j++) { + var zdcbcolor, zxcolor + if (nameList[j] === 'COD') { + zdcbcolor = 'red' + zxcolor = '#fff21c' + } else if (nameList[j] === '姘ㄦ爱') { + zdcbcolor = 'red' + zxcolor = '#00B0F0' + } else if (nameList[j] === '鎬荤7') { + zdcbcolor = 'red' + zxcolor = '#f48183' + } else if (nameList[j] === '鎬绘爱') { + zdcbcolor = 'red' + zxcolor = '#d9f2f4' + } else { + zdcbcolor = 'red' + zxcolor = '#9ACD32' + } + + let sdata = [] + + for (let k = 0; k < dataList.length; k++) { + if (nameList[j].trim() === dataList[k].name.trim()) { + sdata = dataList[k].data.reverse() + } + } + + const ydata = { + name: nameList[j], + data: sdata, + zdcbcolor: zdcbcolor, + zxcolor: zxcolor, + bzz: bzh[j] + } + ydatas.push(ydata) + } + + const yname = '娴撳害(mg/l)' + this.CreateChart(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) + } + }, + CreateChart (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { + this.myChart = this.$echarts.init(this.$refs.wastegasday) + this.myChart.clear() + let dataUnit = '' if (datatype === 1) { - dataUnit = '搴熸皵姘旈噺(m鲁/d)' + dataUnit = '姘旈噺(m鲁/d)' } else { - dataUnit = '搴熸皵姘旈噺(m鲁/h)' + dataUnit = '姘旈噺(m鲁/h)' } - var serLists = [] - for (var j = 0; j < ydatas.length; j++) { - var len = ydatas[j].data.length - for (var k = 0; k < len; k++) { - var it = ydatas[j].data[k] - var it2 = parseFloat(it).toFixed(2) + const serLists = [] + for (let j = 0; j < ydatas.length; j++) { + const len = ydatas[j].data.length + for (let k = 0; k < len; k++) { + const it = ydatas[j].data[k] + const it2 = parseFloat(it).toFixed(2) ydatas[j].data[k] = it2 } } - for (var i = 0; i < ydatas.length; i++) { - // var zdcbcolor = ydatas[i].zdcbcolor - var bzz = ydatas[i].bzz - var obj + for (let i = 0; i < ydatas.length; i++) { + // const zdcbcolor = ydatas[i].zdcbcolor + const bzz = ydatas[i].bzz + let obj if (bzz == null) { obj = { name: ydatas[i].name, @@ -186,31 +337,31 @@ symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� yAxisIndex: 1, - itemStyle: { - normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // var biaozhuiz - // for (var i = 0; i < exhbzzList.length; i++) { - // if (exhbzzList[i].name == c.seriesName) { - // biaozhuiz = exhbzzList[i].bzhui - // } - // } - // if (c.value > 999999999999) { - // return zdcbcolor - // } else { - // return '#33c95f' - // } - }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 5 - }, - borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� - label: { // 鏄剧ず鍊� - show: false - } - } - }, + // itemStyle: { + // normal: { + // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + // let biaozhuiz + // for (let i = 0; i < exhbzzList.length; i++) { + // if (exhbzzList[i].name === c.seriesName) { + // biaozhuiz = exhbzzList[i].bzhui + // } + // } + // if (c.value > 999999999999) { + // return zdcbcolor + // } else { + // return '#33c95f' + // } + // }, + // lineStyle: { // 鎶樼嚎鐨勯鑹� + // color: ydatas[i].zxcolor, + // width: 5 + // }, + // borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� + // label: { // 鏄剧ず鍊� + // show: false + // } + // } + // }, type: 'line', data: ydatas[i].data } @@ -220,52 +371,52 @@ symbol: 'circle', // 鎶樼偣褰㈢姸 symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� - itemStyle: { - normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // var biaozhuiz - // for (var i = 0; i < exhbzzList.length; i++) { - // if (exhbzzList[i].name == c.seriesName) { - // biaozhuiz = exhbzzList[i].bzhui - // } - // } - // if (c.value > biaozhuiz) { - // return zdcbcolor - // } else if (c.value > biaozhuiz * 0.9) { - // return '#FFA500' - // } else { - // return '#33c95f' - // } - }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 5 - }, - borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� - label: { // 鏄剧ず鍊� - show: false - } - } - }, + // itemStyle: { + // normal: { + // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + // let biaozhuiz + // for (let i = 0; i < exhbzzList.length; i++) { + // if (exhbzzList[i].name == c.seriesName) { + // biaozhuiz = exhbzzList[i].bzhui + // } + // } + // if (c.value > biaozhuiz) { + // return zdcbcolor + // } else if (c.value > biaozhuiz * 0.9) { + // return '#FFA500' + // } else { + // return '#33c95f' + // } + // }, + // lineStyle: { // 鎶樼嚎鐨勯鑹� + // color: ydatas[i].zxcolor, + // width: 5 + // }, + // borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� + // label: { // 鏄剧ず鍊� + // show: false + // } + // } + // }, type: 'line', data: ydatas[i].data, markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 symbol: 'none', data: [ /* { - type: 'average', - name: '鏃ュ钩鍧囧��', - label: { - normal: { - position: 'end', //鏄剧ず浣嶇疆 - formatter: ydatas[i].name+'\n鏃ュ钩鍧囧��'+'{c}' //鏄剧ず鏍峰紡 + type: 'average', + name: '鏃ュ钩鍧囧��', + label: { + normal: { + position: 'end', //鏄剧ず浣嶇疆 + formatter: ydatas[i].name+'\n鏃ュ钩鍧囧��'+'{c}' //鏄剧ず鏍峰紡 + } + }, + lineStyle:{ // 棰滆壊 + color: 'yellow', + type:'solid' } - }, - lineStyle:{ // 棰滆壊 - color: 'yellow', - type:'solid' - } - }, */ { + }, */ { label: { normal: { position: 'end', @@ -287,7 +438,7 @@ serLists.push(obj) } - var option = { + const option = { tooltip: { // 鎻愮ず妗� trigger: 'axis', axisPointer: { @@ -297,20 +448,21 @@ } }, formatter: function (params) { - var s = params[0].name + '<br/>' - for (var i = 0; i < params.length; i++) { + let s = params[0].name + '<br/>' + for (let i = 0; i < params.length; i++) { // const name = params[i].name // 鍥捐〃title鍚嶇О - var seriesName = params[i].seriesName + const seriesName = params[i].seriesName // 鍊� - var value = params[i].value - // var valueFliter - // if (value === 'NaN') { - // valueFliter = '' - // } else { - // valueFliter = this.formatter(value) - // } - var maker = params[i].marker + const value = params[i].value + let valueFliter + if (value === 'NaN') { + valueFliter = '' + } else { + // valueFliter = formatter(value) + valueFliter = value + } + let maker = params[i].marker if (seriesName === '浜屾哀鍖栫~') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' } else if (seriesName === '姘哀鍖栫墿') { @@ -322,7 +474,7 @@ } else { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' } - s += maker + seriesName + ':' + value + '<br />' + s += maker + seriesName + ':' + valueFliter + '<br />' } return s } @@ -335,8 +487,7 @@ }, grid: { // 缃戞牸 top: '20%', - left: '12%', - bottom: '15%' + left: '5%' // containLabel: true }, legend: { // 鍥句緥 @@ -364,8 +515,8 @@ type: 'category', boundaryGap: false, axisLabel: { // x杞村叏閮ㄦ樉绀� - rotate: 20, - interval: 0, + // rotate: 20, + // interval: 0, textStyle: { color: '#fff' } @@ -391,7 +542,7 @@ type: 'value', name: yname, // max: function (value) { - // var max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� + // let max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� // if (exhbzzList && exhbzzList.length > 0) { // if (value.max != '-Infinity') { // 鑾峰彇鎵�鏈夌洃娴嬫寚鏍囩殑max鍊� 2020/12/31 // valMax = parseInt(value.max + 5) @@ -402,8 +553,10 @@ // } // }) // } - // max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 鎺掑簭 - // var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1] + // max_val_list = max_val_list.sort(function (a, b) { + // return a - b + // }) // 鎺掑簭 + // const ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1] // return parseInt(ma) // }, axisLabel: { @@ -428,7 +581,7 @@ type: 'value', name: dataUnit, max: function (value) { - var ma = value.max > 120 ? value.max : 120 + const ma = value.max > 120 ? value.max : 120 return parseInt(ma) }, axisLabel: { @@ -452,232 +605,8 @@ }], series: serLists } - this.mychartDay.setOption(option) - - // this.mychartDay.on('legendselectchanged', function (params) { - // var StdVal = null - // var op = { yAxis: {} } - // var max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� - // if (exhbzzList && exhbzzList.length > 0) { - // max_val_list.push(valMax) // 灏嗙洃娴嬫寚鏍囩殑max鍊间篃鏀惧叆鏁扮粍 2020/12/31 - // $.each(exhbzzList, function (index, item) { - // params.selected[item.name] ? max_val_list.push(item.bzhui) : '' - // if (item.name == params.name) { - // item.name == 'VOCs' ? StdVal = 20 : StdVal = item.bzhui - // } - // }) - // } - // max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 鎺掑簭 - // op.yAxis.max = function (value) { - // var ma = value.max < StdVal ? StdVal : Math.ceil(value.max) - // max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 閫夋嫨鏈�澶у�� - // return ma - // } - // this.mychartDay.setOption(op) - // }) - - /** - * 瑙e喅mychartDay.on('click',function(){...})浜嬩欢閲嶅瑙﹀彂鐨勯棶棰� - * Date: 20200720 - */ - this.mychartDay.off('click') - - /** - * 鍥炬爣鐐瑰嚮浜嬩欢 - * 20190426 add - * */ - // this.mychartDay.on('click', function (params) { - // // 鑾峰彇褰撳墠鏃堕棿锛屽皬鏃� - // var nowHours = new Date().Format('hh') - // // 鐐瑰嚮鎶樼嚎鍥炬姌鐐瑰搴旂殑鏃堕棿 - // // 闇�瑕佷紶鐨勬椂闂翠负 - // var _date = null - // if (params.name.indexOf('鏃�') !== -1) { - // var hours = params.name.substring(0, params.name.indexOf('鏃�')) - // if (parseInt(hours) < parseInt(nowHours)) { - // _date = new Date().Format('yyyy-MM-dd') + ' ' + hours + ':00:00' - // } else { - // var currentDate = new Date() - // // 24灏忔椂涔嬪墠鏃堕棿 - // var stringDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd') - // _date = stringDate + ' ' + hours + ':00:00' - // } - // } else if (params.name.indexOf('鏃�') !== -1) { - // var day = params.name.substring(0, params.name.indexOf('鏃�') - 1) - // _date = new Date().Format('yyyy-MM') + '-' + day.trim() - // } - - // todo 璋冩帴鍙� 鏌ュ嚟璇� - // if (params.color != 'red') { - // var poltMtrlId - // var monItemId = 28 - // for (var i = 0; i < wrwIDS.length; i++) { - // if (params.seriesName == wrwIDS[i].name) { - // poltMtrlId = wrwIDS[i].id - // } - // } - // getCBMX(jcdID, poltMtrlId, monItemId, _date, function (res) { - // createDivByMouse(res, params.event) - // }) - // } - // createDivByMouse("s",params.event); - // }) - }, - drawChart: function () { - window.onresize = function () { - var h1 = document.documentElement.clientHeight// 鑾峰彇灞忓箷鐨勯珮搴� - if (h1 > 700) { - this.mychartDay.getDom().style.height = 3 + 'rem' - this.mychartDay.getDom().style.width = 6 + 'rem' - } else { - this.mychartDay.getDom().style.height = 3 + 'rem' - this.mychartDay.getDom().style.width = 6 + 'rem' - } - this.mychartDay.resize() - } + this.myChart.setOption(option) } - // initOptions: function (dateDate, series) { - // var options = { - // title: { - // // text: '鎶樼嚎鍥惧爢鍙�' - // }, - // color: ['#446cdc', '#c4c916', '#c1187e'], - // tooltip: { - // trigger: 'axis', - // axisPointer: { - // type: 'cross', - // label: { - // color: '#1a4245' - // } - // } - // }, - // legend: { - // x: '200px', - // y: '30px', - // data: [{ - // name: 'COD', - // textStyle: { - // color: '#00d0f9' - // } - // }, - // { - // name: '姘ㄦ爱', - // textStyle: { - // color: '#00d0f9' - // } - // }, - // { - // name: '搴熸按娴侀噺', - // textStyle: { - // color: '#00d0f9' - // } - // }] - // }, - // grid: { - // left: '3%', - // right: '3%', - // bottom: '3%', - // containLabel: true - // }, - // toolbox: {}, - // // 鍥炬爣缂╂斁璁剧疆 - // dataZoom: [{ - // type: 'inside', - // start: 0, - // end: 100 - // }, { - // start: 0, - // end: 100, - // show: false, - // handleSize: '80%', - // handleStyle: { - // color: '#fff', - // shadowBlur: 3, - // shadowColor: 'rgba(0, 0, 0, 0.6)', - // shadowOffsetX: 2, - // shadowOffsetY: 2 - // } - // }], - // // x杞寸殑璁剧疆 - // xAxis: { - // type: 'category', - // boundaryGap: false, - // data: dateDate, - // axisLabel: { // x杞村叏閮ㄦ樉绀� - // rotate: 20, - // interval: 0, - // textStyle: { - // color: '#fff', - // fontSize: 10 - // } - // }, - // splitLine: { // 缃戞牸鍨傜洿绾夸负铏氱嚎 - // show: true, - // lineStyle: { - // type: 'dashed' - // } - // }, - // axisTick: { // x 杞村埢搴︽樉绀� - // show: false - // }, - // axisLine: { - // lineStyle: { - // color: '#FFFFFF', - // width: 1 // 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - // } - // } - // }, - // // Y 杞寸殑璁剧疆 - // yAxis: [{ - // type: 'value', - // position: 'left', // 澶� Y 杞翠娇鐢� - // name: '娴撳害(mg/m鲁)', - // axisLabel: { - // formatter: '{value}', - // textStyle: { - // color: '#fff' // 鍧愭爣鐨勫瓧浣撻鑹� - // } - // }, - // axisPointer: { - // snap: true // 鑷姩鍚搁檮鏈�杩戠殑鐐� - // }, - // splitLine: { - // show: false // y杞� 缃戞牸绾夸笉鏄剧ず - // }, - // axisLine: { - // lineStyle: { - // color: '#ffffff', // 鍧愭爣杞寸殑棰滆壊 - // width: 1 - // } - // } - // }, - // { - // type: 'value', - // position: 'right', // 澶� Y 杞翠娇鐢� - // name: '娴侀噺(m鲁/h鲁)', - // axisLabel: { - // formatter: '{value}', - // textStyle: { - // color: '#fff' // 鍧愭爣鐨勫瓧浣撻鑹� - // } - // }, - // axisPointer: { - // snap: true // 鑷姩鍚搁檮鏈�杩戠殑鐐� - // }, - // splitLine: { - // show: false // y杞� 缃戞牸绾夸笉鏄剧ず - // }, - // axisLine: { - // lineStyle: { - // color: '#ffffff', // 鍧愭爣杞寸殑棰滆壊 - // width: 1 - // } - // } - // }], - // series: series - // } - // return options - // } } } </script> @@ -687,6 +616,7 @@ .animation { .infomation { padding: 0.02rem 0.04rem; + .grid-content { font-size: 0.08rem; background-color: #2e4967; @@ -695,77 +625,94 @@ height: 0.15rem; line-height: 0.15rem; margin-right: 0.04rem; - padding:0 0.04rem + padding: 0 0.04rem } } } - .form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search{ - display: flex; - padding:0.02rem; - >div{margin-left: 10px} - .pickerMon{ - display: flex; - >div:first-child { - margin-right: 10px; - } - .pickerData{ - flex: 1; - display: flex; - >span{line-height: 22px} - .pickerTable { - margin-left: 3px; - } - } - } - /deep/.el-date-editor--datetime{ - width: 100%; - } - /deep/.el-input__inner{ - position: relative; - width:1rem; - background-color: #2e4967; - color: #fff; - font-size: 0.08rem; - height: 0.15rem; - padding: 0; - border:none; - text-align: center; - z-index: 9999; - //padding-left:20px ; - //padding: 0!important; - } - /deep/.el-input__icon{ - display: block; - width:1rem; - height: 0.15rem; - line-height: 0.15rem; - cursor: pointer; - font-size: 0; - } - input::-webkit-calendar-picker-indicator { - opacity: 100; - } - .detailbtn{ - background-color:#2e4967; - text-align: center; - padding: 0 7px; - height: 0.15rem; - line-height: 0.15rem; - border-radius: 4px; - margin-right: 6px; - } - } - .el-dialog-div { - overflow: auto; - } - #echarts { - margin: 0; - padding: 0; - } +.form-echrts { + width: 100%; + border-top: 1px solid #396d83; + //margin: 10px 10px 10px 10px; + .from-search { + display: flex; + padding: 0.02rem; + + > div { + margin-left: 10px } + + .pickerMon { + display: flex; + + > div:first-child { + margin-right: 10px; + } + + .pickerData { + flex: 1; + display: flex; + + > span { + line-height: 22px + } + + .pickerTable { + margin-left: 3px; + } + } + } + + /deep/ .el-date-editor--datetime { + width: 100%; + } + + /deep/ .el-input__inner { + position: relative; + width: 1rem; + background-color: #2e4967; + color: #fff; + font-size: 0.08rem; + height: 0.15rem; + padding: 0; + border: none; + text-align: center; + z-index: 9999; + //padding-left:20px ; + //padding: 0!important; + } + + /deep/ .el-input__icon { + display: block; + width: 1rem; + height: 0.15rem; + line-height: 0.15rem; + cursor: pointer; + font-size: 0; + } + + input::-webkit-calendar-picker-indicator { + opacity: 100; + } + + .detailbtn { + background-color: #2e4967; + text-align: center; + padding: 0 7px; + height: 0.15rem; + line-height: 0.15rem; + border-radius: 4px; + margin-right: 6px; + } + } + + .el-dialog-div { + overflow: auto; + } + + #echarts { + margin: 0; + padding: 0; + } +} </style> diff --git a/src/components/BaseNav/WasteGas/Detail.vue b/src/components/BaseNav/WasteGas/Detail.vue index 8bee0af..4ba715c 100644 --- a/src/components/BaseNav/WasteGas/Detail.vue +++ b/src/components/BaseNav/WasteGas/Detail.vue @@ -1,85 +1,88 @@ <template> - <el-table - :data="tableData" - style="width: 100%;height: 100%"> - <el-table-column - prop="LabMonTime" - label="妫�娴嬫椂闂�"> - </el-table-column> - <el-table-column - label="姘哀鍖栫墿"> - <el-table-column - prop="NOMonTime" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="NOEndTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="浜屾哀鍖栫~"> - <el-table-column - prop="SOMontime" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="SoEndTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="鐑熷皹"> - <el-table-column - prop="MonItemId" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="EndMonTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="闈炵敳鐑锋�荤儍"> - <el-table-column - prop="MonItemId" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="MonItemId" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - </el-table> + <div class="wastegas" style="width: 5rem;height: 1.5rem"> + <el-table + :data="tableData" + style="width: 100%;height: 100%"> + <el-table-column + prop="LabMonTime" + label="妫�娴嬫椂闂�"> + </el-table-column> + <el-table-column + label="姘哀鍖栫墿"> + <el-table-column + prop="NOMonTime" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="NOEndTime" + label="鏍囧噯鍊�"> + </el-table-column> + </el-table-column> + <el-table-column + label="浜屾哀鍖栫~"> + <el-table-column + prop="SOMontime" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="SoEndTime" + label="鏍囧噯鍊�"> + </el-table-column> + </el-table-column> + <el-table-column + label="鐑熷皹"> + <el-table-column + prop="MonItemId" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="EndMonTime" + label="鏍囧噯鍊�"> + </el-table-column> + </el-table-column> + <el-table-column + label="闈炵敳鐑锋�荤儍"> + <el-table-column + prop="MonItemId" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="MonItemId" + label="鏍囧噯鍊�"> + </el-table-column> + </el-table-column> + </el-table> + </div> </template> <script> +import dayjs from 'dayjs' +import mapApi from '@/api/mapApi' + export default { name: 'Detail', data () { return { - tableData: [{ - LabMonTime: '2021-02-05 09:54', - MonItemId: '---', - EndMonTime: '30', - NOMonTime: '44', - NOEndTime: '100', - SOMontime: '9', - SoEndTime: '50' - }, { - LabMonTime: '2021-01-14 10:15', - MonItemId: '---', - EndMonTime: '30', - NOMonTime: '70', - NOEndTime: '100', - SOMontime: '---', - SoEndTime: '50' - }] + tableData: [] } }, - created () { - // this.tableData = [...this.$attrs.ManualData] - // console.log(this.tableData) + mounted () { + this.initdetail() + }, + methods: { + async initdetail () { + const timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') + const timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss') + const data = { + companyId: 3900100145, + labMonPointId: 219, + beginTime: timeStart, + endTime: timeEnd + } + const result = (await mapApi.getWasteGasManualData(data)).Result.DataInfo + // console.log(result) + this.tableData = result + } } } diff --git a/src/components/BaseNav/WasteGas/HourData.vue b/src/components/BaseNav/WasteGas/HourData.vue index 14a2b5b..832658b 100644 --- a/src/components/BaseNav/WasteGas/HourData.vue +++ b/src/components/BaseNav/WasteGas/HourData.vue @@ -1,175 +1,377 @@ <!-- 灏忔椂鏁版嵁 --> <template> - <div id="Tab"> - <div class="infomation"> - <div> - <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">120343.18</i></span> + <div id="Tab"> + <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> + <div class="form-echrts"> + <div class="from-search"> + <div class="pickerMon"> + <div class="pickerData"> + <span> 寮�濮嬫椂闂�:</span> + <span class="pickerTable"> + <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> + </span> + </div> + <div class="pickerData"> + <span>缁撴潫鏃堕棿:</span> + <span class="pickerTable"> + <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> + </span> </div> </div> - <div class="form-echrts"> - <div class="from-search"> - <div class="pickerMon"> - <div class="pickerData"> - <span> 寮�濮嬫椂闂�:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeStart" @click="pickerBtn"></el-date-picker> - </span> - </div> - <div class="pickerData"> - <span >缁撴潫鏃堕棿:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeEnd" ></el-date-picker> - </span> - </div> - </div> - <div class="detailbtn" @click="onSubmit">鏌ヨ</div> - <div class="detailbtn" @click="dialogVisible = true" >鏄庣粏琛�</div> - </div> - <div style="width:5rem;height:1.5rem;" id="echarts" ref="main"></div> - </div> - <!-- 鏄庣粏寮规 --> - <el-dialog :visible.sync="dialogVisible" - :append-to-body="true" - width="68%" - center - v-dialogDrag - > - <div class="el-dialog-div" style="height: 500px"> - <public-detailed-list v-bind="$attrs"></public-detailed-list> - </div> - </el-dialog> + <div class="detailbtn">鏌ヨ</div> + <div class="detailbtn" @click="ScheduleShow">鏄庣粏琛�</div> + </div> + <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div> </div> +<!-- 鏄庣粏寮规--> + <el-dialog :visible.sync="showSchedule" + :modal="false" + v-dialogDrag + > + <div class="el-dialog-div" style="height: 200px"> + <Scheduleof></Scheduleof> + </div> + </el-dialog> + </div> </template> <script> -import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' +// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' +import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof' +import PublicDataStandard from '../PublicDataStandard' + import dayjs from 'dayjs' +import mapApi from '@/api/mapApi' + export default { name: 'HourData', components: { - PublicDetailedList + // PublicDetailedList + PublicDataStandard, + Scheduleof }, data () { return { - watchData: [], - dialogVisible: false, - myChar: null, - value: '', + // tab鏍忎紶閫掓帴鏀舵暟鎹� + dataStandard: [ + { + current: { + name: '姘哀鍖栫墿', + 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: 120 + }, + standard: { + name: '', + val: null + } + }], formInline: { timeStart: null, timeEnd: null }, + showSchedule: false, + dataType: 2, myChart: null, - JsonCtarts: { - id: 'mychart', - title: '鍔犵儹鐐夌儫姘�', - legend: [ - { - icon: 'image://../assets/imgs/legend/NOX.png', - itemHeight: 5, - itemWidth: 20, - textStyle: { - color: '#CCC' - }, - name: '姘哀鍖栫墿' - }, - { - icon: 'image://../assets/imgs/legend/SO2.png', - itemHeight: 5, - itemWidth: 20, - name: '浜屾哀鍖栫~', - textStyle: { - color: '#CCC' - } - }, - { - icon: 'image://../assets/imgs/legend/YanChen.png', - itemHeight: 5, - itemWidth: 20, - name: '鐑熷皹', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/WenDu.png', - itemHeight: 5, - itemWidth: 20, - name: '娓╁害', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/VOCs.png', - itemHeight: 5, - itemWidth: 20, - name: '搴熸皵娴侀噺', - textStyle: { color: '#ccc' } - } - ], - xdata: ['0鏃�', '1鏃�', '2鏃�', '3鏃�', '4鏃�', '5鏃�', '6鏃�', '7鏃�', '8鏃�', '9鏃�', '10鏃�', '11鏃�', '12鏃�', '13鏃�', '14鏃�', '15鏃�', '16鏃�'], - ydatas: [ - { name: '姘哀鍖栫墿', data: ['34.44', '36.91', '37.65', '37.16', '38.03', '38.23', '37.21', '37.67', '37.97', '37.58', '36.61', '37.76', '37.27', '37.24', '35.86', '36.61', '37.21'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 50 }, - { name: '浜屾哀鍖栫~', data: ['4.98', '4.57', '4.19', '3.14', '3.80', '3.62', '3.33', '2.80', '3.13', '2.54', '3.08', '2.48', '1.97', '1.76', '0.82', '1.01', '1.5'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 35 }, - { name: '搴熸皵娴侀噺', data: ['381907.22', '376474.19', '378572.31', '379369.44', '385225.72', '388657.56', '330667.31', '26560.98', '0.00', '0.00', '49567.43', '357837.31', '376972.66', '379693.50', '379982.22', '379693.50', '379982.22'], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, - { name: '鐑熷皹', data: ['4.02', '4.17', '4.31', '4.00', '4.45', '4.40', '4.40', '4.25', '4.26', '4.18', '4.58', '4.21', '3.96', '3.83', '3.78', '3.83', '3.78'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 10 }, - { name: '娓╁害', data: ['46.55', '46.70', '46.47', '46.56', '46.57', '46.58', '46.56', '46.58', '46.69', '46.47', '46.58', '46.60', '46.54', '46.55', '46.60', '46.55', '46.60'], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: null } - ], - yname: ' 娴撳害(mg/m鲁)', - // id:'mychart', - datatype: 2 - } + exhbzz: null, + jcdID: 1, + exhbzzList: [] } }, - created () { - }, mounted () { - this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') - this.formInline.timeStart = dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss') - this.onSubmit() + this.$nextTick(() => { + this.initnData() + }) }, methods: { - pickerBtn () { - this.formInline.timeEnd = '' - this.formInline.timeStart = '' - console.log(1) + ScheduleShow () { + this.showSchedule = !this.showSchedule }, - onSubmit () { - this.CreateChart() + async initnData () { + // 鐢ㄤ簬鎺ュ彛鏁版嵁璇锋眰鐨勫弬鏁� 寮�濮�/缁撴潫鏃堕棿 || 鍙�夋嫨鏌ヨ鐨勫紑濮�/缁撴潫鏃堕棿 + this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') + this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss') + const data = { + onLineMonEmissPointId: 23, + monItemId: 28, + beginTime: this.formInline.timeStart, + endTime: this.formInline.timeEnd, + dataType: this.dataType + } + const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo + // console.log(result) + this.get24HourDate(result) }, - CreateChart () { - // var id = this.JsonCtarts.id - // var title = this.JsonCtarts.title - var legend = this.JsonCtarts.legend - var xdata = this.JsonCtarts.xdata - var ydatas = this.JsonCtarts.ydatas - var yname = this.JsonCtarts.yname - // var jcdId = this.JsonCtarts.jcdID - var datatype = this.JsonCtarts.datatype + get24HourDate (res) { + if (res.length > 0) { + // 澶勭悊鏁版嵁寮�濮� + const d = res + const nameList = [] // 瀛樻斁鍥句緥 + const dateList = [] // 瀛樻斁鏃堕棿 + let dataList = [] // 瀛樻斁鏁版嵁 + const bzh = [] // 鏍囧噯鍊� + let data = [] + // wrwIDS = [] + for (let i = 0; i < d.length; i++) { + const MonTimeStr = d[i].MonTimeStr - this.myChart = this.$echarts.init(this.$refs.main) - this.myChart.clear() - var dataUnit = '' + // 20190430 add 鑾峰彇鐩戞祴鐐筰d 姹℃煋鐗﹊d 妫�娴嬮」id + // getWRW(d[i]) + /* if(i==0){ + let wrw ={ + name: d[0].PoltmtrlName, + id:d[0].PoltmtrlId + } + wrwIDS.push(wrw); + }else { + let flag=true; + wrwIDS.forEach(item=>{ + if(d[i].PoltmtrlId==item.id){ + flag=false; + } + }) + + if(flag){ + let wrw ={ + name: d[i].PoltmtrlName, + id:d[i].PoltmtrlId + } + wrwIDS.push(wrw); + } + } +*/ + + let strDate + const d1 = MonTimeStr.split('/') + const d2 = d1[2].split(' ') + const t = MonTimeStr.split(' ') + const hlist = t[1].split(':') + const h = hlist[0] + if (d1[1] > 9) { + // strDate=MonTimeStr.substring(8,10)+"鏃�"; + if (d2[0] > 9) { + strDate = '' + if (h > 9) { + strDate += MonTimeStr.substring(11, 13) + '鏃�' + } else { + strDate += MonTimeStr.substring(11, 12) + '鏃�' + } + } else { + strDate = '' + if (h > 9) { + strDate += MonTimeStr.substring(10, 12) + '鏃�' + } else { + strDate += MonTimeStr.substring(10, 11) + '鏃�' + } + } + } else { + if (d2[0] > 9) { + strDate = '' + if (h > 9) { + strDate += MonTimeStr.substring(10, 12) + '鏃�' + } else { + strDate += MonTimeStr.substring(10, 11) + '鏃�' + } + } else { + strDate = '' + if (h > 9) { + strDate += MonTimeStr.substring(9, 11) + '鏃�' + } else { + strDate += MonTimeStr.substring(9, 10) + '鏃�' + } + } + } + + // console.log("鏃堕棿",strDate); + + if (nameList.length === 0) { + nameList.push(d[i].PoltmtrlName.trim()) + dateList.push(strDate) + if ((d[i].PoltmtrlName === '搴熸皵娴侀噺' || d[i].PoltmtrlName === '搴熸皵') && d[i].MonQty < 0) { + d[i].MonQty = 0 + } + data.push(d[i].MonQty) + bzh.push(d[i].StdValue) + } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) { + nameList.push(d[i].PoltmtrlName) + bzh.push(d[i].StdValue) + dataList.push(data) + data = [] + if ((d[i].PoltmtrlName === '搴熸皵娴侀噺' || d[i].PoltmtrlName === '搴熸皵') && d[i].MonQty < 0) { + d[i].MonQty = 0 + } + data.push(d[i].MonQty) + } else if (i === d.length - 1) { + if ((d[i].PoltmtrlName === '搴熸皵娴侀噺' || d[i].PoltmtrlName === '搴熸皵') && d[i].MonQty < 0) { + d[i].MonQty = 0 + } + data.push(d[i].MonQty) + dataList.push(data) + } else { + if (dateList.indexOf(strDate) < 0) { + dateList.push(strDate) + } + if ((d[i].PoltmtrlName === '搴熸皵娴侀噺' || d[i].PoltmtrlName === '搴熸皵') && d[i].MonQty < 0) { + d[i].MonQty = 0 + } + data.push(d[i].MonQty) + } + } + // 澶勭悊鏁版嵁缁撴潫 + + // dateList=get24DateTime(); + + const newList = [] + + for (let i = 0; i < dataList.length; i++) { + const list = dataList[i].reverse() + newList.push(list) + } + dataList = newList + + const id = 'containerDomId' || 'mychart' + const title = '鍔犵儹鐐夌儫姘�' + + const lengList = [] + let objTemp + + for (let l = 0; l < nameList.length; l++) { + let obj + let 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) + + const legend = lengList + const xdata = dateList.reverse() + const ydatas = [] + + for (let j = 0; j < nameList.length; j++) { + let zdcbcolor, zxcolor + if (nameList[j] === '浜屾哀鍖栫~') { + 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 = '#F206FF' + } else { + zdcbcolor = 'red' + zxcolor = '#9ACD32' + } + const ydata = { + name: nameList[j], + data: dataList[j], + zdcbcolor: zdcbcolor, + zxcolor: zxcolor, + bzz: bzh[j] + } + this.exhbzz = { + name: nameList[j], + bzhui: bzh[j] + } + this.exhbzzList.push(this.exhbzz) + + ydatas.push(ydata) + } + + const yname = '娴撳害(mg/m鲁)' + + this.CreateChart(id, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) + } + }, + CreateChart (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { + this.myChart = this.$echarts.init(this.$refs.wastegashour) + // this.myChart .clear() + let dataUnit = '' if (datatype === 1) { - dataUnit = '搴熸皵姘旈噺(m鲁/d)' + dataUnit = '姘旈噺(m鲁/d)' } else { - dataUnit = '搴熸皵姘旈噺(m鲁/h)' + dataUnit = '姘旈噺(m鲁/h)' } - var serLists = [] - for (var j = 0; j < ydatas.length; j++) { - var len = ydatas[j].data.length - for (var k = 0; k < len; k++) { - var it = ydatas[j].data[k] - var it2 = parseFloat(it).toFixed(2) + const serLists = [] + for (let j = 0; j < ydatas.length; j++) { + const len = ydatas[j].data.length + for (let k = 0; k < len; k++) { + const it = ydatas[j].data[k] + const it2 = parseFloat(it).toFixed(2) ydatas[j].data[k] = it2 } } - for (var i = 0; i < ydatas.length; i++) { - // var zdcbcolor = ydatas[i].zdcbcolor - var bzz = ydatas[i].bzz - var obj + for (let i = 0; i < ydatas.length; i++) { + // const zdcbcolor = ydatas[i].zdcbcolor + const bzz = ydatas[i].bzz + let obj if (bzz == null) { obj = { name: ydatas[i].name, @@ -177,31 +379,31 @@ symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� yAxisIndex: 1, - itemStyle: { - normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - /* var biaozhuiz - for (var i = 0; i < exhbzzList.length; i++) { - if (exhbzzList[i].name == c.seriesName) { - biaozhuiz = exhbzzList[i].bzhui - } - } - if (c.value > 999999999999) { - return zdcbcolor - } else { - return '#33c95f' - } */ - }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 5 - }, - borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� - label: { // 鏄剧ず鍊� - show: false - } - } - }, + // itemStyle: { + // normal: { + // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + // let biaozhuiz + // for (let i = 0; i < exhbzzList.length; i++) { + // if (exhbzzList[i].name === c.seriesName) { + // biaozhuiz = exhbzzList[i].bzhui + // } + // } + // if (c.value > 999999999999) { + // return zdcbcolor + // } else { + // return '#33c95f' + // } + // }, + // lineStyle: { // 鎶樼嚎鐨勯鑹� + // color: ydatas[i].zxcolor, + // width: 5 + // }, + // borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� + // label: { // 鏄剧ず鍊� + // show: false + // } + // } + // }, type: 'line', data: ydatas[i].data } @@ -213,22 +415,21 @@ smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� itemStyle: { normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - /* var biaozhuiz - for (var i = 0; i < exhbzzList.length; i++) { - if (exhbzzList[i].name == c.seriesName) { - biaozhuiz = exhbzzList[i].bzhui - } - } - if (c.value > biaozhuiz) { - return zdcbcolor - } else if (c.value > biaozhuiz * 0.9) { - return '#FFA500' - } else { - return '#33c95f' - } - */ - }, + // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + // let biaozhuiz + // for (let i = 0; i < exhbzzList.length; i++) { + // if (exhbzzList[i].name == c.seriesName) { + // biaozhuiz = exhbzzList[i].bzhui + // } + // } + // if (c.value > biaozhuiz) { + // return zdcbcolor + // } else if (c.value > biaozhuiz * 0.9) { + // return '#FFA500' + // } else { + // return '#33c95f' + // } + // }, lineStyle: { // 鎶樼嚎鐨勯鑹� color: ydatas[i].zxcolor, width: 5 @@ -279,7 +480,7 @@ serLists.push(obj) } - var option = { + const option = { tooltip: { // 鎻愮ず妗� trigger: 'axis', axisPointer: { @@ -289,20 +490,21 @@ } }, formatter: function (params) { - var s = params[0].name + '<br/>' - for (var i = 0; i < params.length; i++) { + let s = params[0].name + '<br/>' + for (let i = 0; i < params.length; i++) { // const name = params[i].name // 鍥捐〃title鍚嶇О - var seriesName = params[i].seriesName + const seriesName = params[i].seriesName // 鍊� - var value = params[i].value - // var valueFliter - // if (value === 'NaN') { - // valueFliter = '' - // } else { - // valueFliter = this.formatter(value) - // } - var maker = params[i].marker + const value = params[i].value + let valueFliter + if (value === 'NaN') { + valueFliter = '' + } else { + // valueFliter = formatter(value) + valueFliter = value + } + let maker = params[i].marker if (seriesName === '浜屾哀鍖栫~') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' } else if (seriesName === '姘哀鍖栫墿') { @@ -314,7 +516,7 @@ } else { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' } - s += maker + seriesName + ':' + value + '<br />' + s += maker + seriesName + ':' + valueFliter + '<br />' } return s } @@ -327,8 +529,7 @@ }, grid: { // 缃戞牸 top: '20%', - left: '6%', - bottom: '15%' + left: '5%' // containLabel: true }, legend: { // 鍥句緥 @@ -356,8 +557,8 @@ type: 'category', boundaryGap: false, axisLabel: { // x杞村叏閮ㄦ樉绀� - rotate: 20, - interval: 0, + // rotate: 20, + // interval: 0, textStyle: { color: '#fff' } @@ -382,22 +583,24 @@ yAxis: [{ type: 'value', name: yname, - /* max: function (value) { - var max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� - // if(exhbzzList && exhbzzList.length>0){ - // if (value.max != "-Infinity") { // 鑾峰彇鎵�鏈夌洃娴嬫寚鏍囩殑max鍊� 2020/12/31 - // valMax = parseInt(value.max + 5); - // } - // $.each(exhbzzList, function (index, item) { - // if (item.bzhui != null) { - // max_val_list.push(item.bzhui); - // } - // }); - // } - max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 鎺掑簭 - var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1] - return parseInt(ma) - }, */ + // max: function (value) { + // let max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� + // if (exhbzzList && exhbzzList.length > 0) { + // if (value.max != '-Infinity') { // 鑾峰彇鎵�鏈夌洃娴嬫寚鏍囩殑max鍊� 2020/12/31 + // valMax = parseInt(value.max + 5) + // } + // $.each(exhbzzList, function (index, item) { + // if (item.bzhui != null) { + // max_val_list.push(item.bzhui) + // } + // }) + // } + // max_val_list = max_val_list.sort(function (a, b) { + // return a - b + // }) // 鎺掑簭 + // const ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1] + // return parseInt(ma) + // }, axisLabel: { formatter: '{value}', textStyle: { @@ -420,7 +623,7 @@ type: 'value', name: dataUnit, max: function (value) { - var ma = value.max > 120 ? value.max : 120 + const ma = value.max > 120 ? value.max : 120 return parseInt(ma) }, axisLabel: { @@ -444,180 +647,113 @@ }], series: serLists } - // console.log(option) this.myChart.setOption(option) - /* - this.myChart.on('legendselectchanged', function (params) { - var StdVal = null - var op = { yAxis: {} } - const max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� - if (exhbzzList && exhbzzList.length > 0) { - max_val_list.push(valMax) // 灏嗙洃娴嬫寚鏍囩殑max鍊间篃鏀惧叆鏁扮粍 2020/12/31 - $.each(exhbzzList, function (index, item) { - params.selected[item.name] ? max_val_list.push(item.bzhui) : '' - if (item.name == params.name) { - item.name == 'VOCs' ? StdVal = 20 : StdVal = item.bzhui - } - }) - } - max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 鎺掑簭 - op.yAxis.max = function (value) { - var ma = value.max < StdVal ? StdVal : Math.ceil(value.max) - max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 閫夋嫨鏈�澶у�� - return ma - } - this.myChart.setOption(op) - }) - */ - - /** - * 瑙e喅myChart.on('click',function(){...})浜嬩欢閲嶅瑙﹀彂鐨勯棶棰� - * Date: 20200720 - */ - this.myChart.off('click') - - /** - * 鍥炬爣鐐瑰嚮浜嬩欢 - * 20190426 add - * */ - /* this.myChart.on('click', function (params) { - // 鑾峰彇褰撳墠鏃堕棿锛屽皬鏃� - var nowHours = new Date().Format('hh') - // 鐐瑰嚮鎶樼嚎鍥炬姌鐐瑰搴旂殑鏃堕棿 - // 闇�瑕佷紶鐨勬椂闂翠负 - const dates = null - if (params.name.indexOf('鏃�') !== -1) { - var hours = params.name.substring(0, params.name.indexOf('鏃�')) - if (parseInt(hours) < parseInt(nowHours)) { - dates = new Date().Format('yyyy-MM-dd') + ' ' + hours + ':00:00' - } else { - var currentDate = new Date() - // 24灏忔椂涔嬪墠鏃堕棿 - var stringDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd') - dates = stringDate + ' ' + hours + ':00:00' - } - } else if (params.name.indexOf('鏃�') !== -1) { - var day = params.name.substring(0, params.name.indexOf('鏃�') - 1) - dates = new Date().Format('yyyy-MM') + '-' + day.trim() - } - - // todo 璋冩帴鍙� 鏌ュ嚟璇� - if (params.color != 'red') { - var poltMtrlId - var monItemId = 28 - for (var i = 0; i < wrwIDS.length; i++) { - if (params.seriesName == wrwIDS[i].name) { - poltMtrlId = wrwIDS[i].id - } - } - getCBMX(jcdID, poltMtrlId, monItemId, _date, function (res) { - createDivByMouse(res, params.event) - }) - } - // createDivByMouse("s",params.event); - }) */ } - // drawChart: function () { - // window.onresize = function () { - // var h1 = document.documentElement.clientHeight// 鑾峰彇灞忓箷鐨勯珮搴� - // if (h1 > 700) { - // this.myChart.getDom().style.height = 3 + 'rem' - // this.myChart.getDom().style.width = 6 + 'rem' - // } else { - // this.myChart.getDom().style.height = 3 + 'rem' - // this.myChart.getDom().style.width = 6 + 'rem' - // } - // this.myChart.resize() - // } - // } } - } </script> <style scoped lang="less"> - .animation { - .infomation { - padding: 0.02rem 0.04rem; - .grid-content { - font-size: 0.08rem; - background-color: #2e4967; - text-align: center; - border-radius: 0.01rem; - height: 0.15rem; - line-height: 0.15rem; - margin-right: 0.04rem; - padding:0 0.04rem - } - } - } - .form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search{ - display: flex; - padding:0.02rem; - >div{margin-left: 10px} - .pickerMon{ - display: flex; - >div:first-child { - margin-right: 10px; - } - .pickerData{ - flex: 1; - display: flex; - >span{line-height: 22px} - .pickerTable { - margin-left: 3px; - } - } - } - /deep/.el-date-editor--datetime{ - width: 100%; - } - /deep/.el-input__inner{ - position: relative; - width:1rem; - background-color: #2e4967; - color: #fff; - font-size: 0.08rem; - height: 0.15rem; - padding: 0; - border:none; - z-index: 9999; - text-align: center; - //padding-left:20px ; - //padding: 0!important; - } - /deep/.el-input__icon{ - display: block; - width:1rem; - height: 0.15rem; - line-height: 0.15rem; - cursor: pointer; - font-size: 0; - } +.animation { + .infomation { + padding: 0.02rem 0.04rem; - input::-webkit-calendar-picker-indicator { - opacity: 100; - } - .detailbtn{ - background-color:#2e4967; - text-align: center; - padding: 0 7px; - height: 0.15rem; - line-height: 0.15rem; - border-radius: 4px; - margin-right: 6px; - } - } - .el-dialog-div { - overflow: auto; - } - #echarts { - margin: 0; - padding: 0; - } + .grid-content { + font-size: 0.08rem; + background-color: #2e4967; + text-align: center; + border-radius: 0.01rem; + height: 0.15rem; + line-height: 0.15rem; + margin-right: 0.04rem; + padding: 0 0.04rem } + } +} + +.form-echrts { + width: 100%; + border-top: 1px solid #396d83; + //margin: 10px 10px 10px 10px; + .from-search { + display: flex; + padding: 0.02rem; + + > div { + margin-left: 10px + } + + .pickerMon { + display: flex; + + > div:first-child { + margin-right: 10px; + } + + .pickerData { + flex: 1; + display: flex; + + > span { + line-height: 22px + } + + .pickerTable { + margin-left: 3px; + } + } + } + + /deep/ .el-date-editor--datetime { + width: 100%; + } + + /deep/ .el-input__inner { + position: relative; + width: 1rem; + background-color: #2e4967; + color: #fff; + font-size: 0.08rem; + height: 0.15rem; + padding: 0; + border: none; + z-index: 9999; + text-align: center; + //padding-left:20px ; + //padding: 0!important; + } + + /deep/ .el-input__icon { + display: block; + width: 1rem; + height: 0.15rem; + line-height: 0.15rem; + cursor: pointer; + font-size: 0; + } + + input::-webkit-calendar-picker-indicator { + opacity: 100; + } + + .detailbtn { + background-color: #2e4967; + text-align: center; + padding: 0 7px; + height: 0.15rem; + line-height: 0.15rem; + border-radius: 4px; + margin-right: 6px; + } + } + + .el-dialog-div { + overflow: auto; + } + + #echarts { + margin: 0; + padding: 0; + } +} </style> diff --git a/src/components/BaseNav/WasteGas/RealData.vue b/src/components/BaseNav/WasteGas/RealData.vue new file mode 100644 index 0000000..b440dda --- /dev/null +++ b/src/components/BaseNav/WasteGas/RealData.vue @@ -0,0 +1,737 @@ +<template> + <div id="Tab"> + <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> + <div class="form-echrts"> + <div class="from-search"> + <div class="pickerMon"> + <div class="pickerData"> + <span> 寮�濮嬫椂闂�:</span> + <span class="pickerTable"> + <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> + </span> + </div> + <div class="pickerData"> + <span>缁撴潫鏃堕棿:</span> + <span class="pickerTable"> + <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> + </span> + </div> + </div> + <div> + <span>閲囨牱鐐规暟:</span> + <el-select v-model="formInline.region" placeholder="50"> + <el-option label="0" value="0"></el-option> + <el-option label="25" value="25"></el-option> + <el-option label="50" value="50"></el-option> + <el-option label="75" value="75"></el-option> + <el-option label="100" value="100"></el-option> + </el-select> + </div> + <div class="detailbtn" @click="querySearch">鏌ヨ</div> + </div> + <div style="width:5rem;height:1.5rem;" ref="echarts"></div> + </div> + </div> +</template> + +<script> + +import PublicDataStandard from '@/components/BaseNav/PublicDataStandard' +import mapApi from '@/api/mapApi' +import 'dayjs/locale/es' +import dayjs from 'dayjs' + +export default { + name: 'ECharts', + components: { + PublicDataStandard + }, + data () { + return { + // tab鏍忎紶閫掓帴鏀舵暟鎹� + dataStandard: [ + { + current: { + name: '姘哀鍖栫墿', + 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: 120 + }, + standard: { + name: '', + val: null + } + }], + + // echarts鐨勬暟鎹缃� + myChart: null, + + // 寮�濮� /缁撴潫 鏃堕棿 鍜岄噰鏍风偣鍊肩殑缁戝畾鍊兼暟鎹� + formInline: { + region: '', + timeEnd: '', + timeStart: '' + }, + + // 瀹炴椂鏁版嵁鍒楄〃 + EXHRealTimeDataList: [], + bzz: null, + exhbzz: [], + exhbzzList: [] + } + }, + mounted () { + this.$nextTick(() => { + this.initEchartsData() + }) + }, + methods: { + // 鐐瑰嚮鏌ヨ鎸夐挳鍔熻兘 + querySearch () { + // 鐢ㄤ簬鎺ュ彛鏁版嵁璇锋眰鐨勫弬鏁� 寮�濮�/缁撴潫鏃堕棿 || 鍙�夋嫨鏌ヨ鐨勫紑濮�/缁撴潫鏃堕棿 + this.formInline.timeEnd = dayjs().format('YYYYMMDD HHmmss') + this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss') + this.initEchartsData() + }, + // 鍒濆鍖栨暟鎹幏鍙杄charts鐨刼ptions鏁版嵁 + async initEchartsData () { + const data = { + $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM', + $startTime: this.formInline.timeEnd, + $endTime: this.formInline.timeStart, + $step: 15 + } + const result = (await mapApi.DataItems(data)).data + console.log(result) + this.getRtdb15s(result) + }, + // echarts鏁版嵁澶勭悊 + getRtdb15s (res) { + if (res.length > 0) { + // 澶勭悊鏁版嵁寮�濮� + const d = res + const nameList = [] // 瀛樻斁鍥句緥 + + let data // 鏁版嵁绫诲瀷// let data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} + let datalist // 瀛樻斁data鐨勬暟缁� + // let bzh = [] + for (let i = 0; i < d.length; i++) { + if (d[i].ErrorMessage != null) { + continue + } + // const name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName + // 涓存椂name鏁版嵁 + const nameListTemp = [ + { + 'TJIP45.y2h508CEMS01NOX': '姘哀鍖栫墿', + 'TJIP45.y2h508CEMS01SO2': '鐑熷皹', + 'TJIP45.y2h508CEMS01F': '浜屾哀鍖栫7', + 'TJIP45.y2h508CEMS01PM': 'ph' + // 'TJIP45.lscl2tb552AI10710': '浜屾哀鍖栫⒊' + } + ] + const name = nameListTemp[0][d[i].UnionTagCode] + + if (nameList.length === 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.EXHRealTimeDataList.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.EXHRealTimeDataList.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.EXHRealTimeDataList.push(datalist) + } 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) + } + } + } + } 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) + } + } + } + } + // console.log(this.EXHRealTimeDataList) + + const divid = 'mychart_ss' + const title = name + 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] === '浜屾哀鍖栫7') { + iconurl = 'image://../assets/imgs/legend/YanChen.png' + } else if (nameList[l] === '浜屾哀鍖栫⒊') { + 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) + + const legend = lengList + const ydatas = [] + + for (let j = 0; j < nameList.length; j++) { + let zdcbcolor, zxcolor + if (nameList[j] === 'ph') { + zdcbcolor = 'red' + zxcolor = '#f206ff' + } else if (nameList[j] === '鐑熷皹') { + zdcbcolor = 'red' + zxcolor = '#e0ffff' + } else if (nameList[j] === '姘哀鍖栫墿') { + zdcbcolor = 'red' + zxcolor = '#00B0F0' + } else if (nameList[j] === '浜屾哀鍖栫⒊') { + zdcbcolor = 'red' + zxcolor = '#9ACD32' + } else if (nameList[j] === '浜屾哀鍖栫7') { + zdcbcolor = 'red' + zxcolor = '#f48183' + } + let ydata + // 涓存椂鏁版嵁 + const BBZMAPPING = [ + { + COD: 35, + ph: 9, + 鎬绘爱: 15, + 鎬荤7: 0.3, + 姘ㄦ爱: 3 + } + ] + for (let m = 0; m < this.EXHRealTimeDataList.length; m++) { + let stdValue = null + if (this.EXHRealTimeDataList[m].name === nameList[j]) { + for (const i in this.BBZMAPPING) { + console.log(i) + stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name] + } + + ydata = { + name: nameList[j], + data: this.EXHRealTimeDataList[m].data, + zdcbcolor: zdcbcolor, + zxcolor: zxcolor, + bzz: stdValue + } + this.exhbzz = { + name: nameList[j], + bzhui: stdValue + } + this.exhbzzList.push(this.exhbzz) + ydatas.push(ydata) + } + } + } + + const yname = '娴撳害(mg/m鲁)' + + this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname) + } + }, + // 鑾峰彇鏁版嵁鐢ㄤ簬echarts鍥捐〃缁樺埗 + DrawRealTimeDateChart (id, title, legend, ydatas, yname) { + // console.log(ydatas) + this.myChart = this.$echarts.init(this.$refs.echarts) + const serLists = [] + let dataUnit + for (let i = 0; i < ydatas.length; i++) { + const zdcbcolor = ydatas[i].zdcbcolor + const bz = ydatas[i].bzz + let obj + if (bz) { + obj = { + name: ydatas[i].name, + // symbol:'circle', // 鎶樼偣褰㈢姸 + // symbolSize: 3, //澶у皬 + smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + let biaozhuiz + for (let i = 0; i < this.bzzList.length; i++) { + if (this.bzzList[i].name === c.seriesName) { + biaozhuiz = this.bzzList[i].bzhui + } + } + if (c.value[1] > biaozhuiz) { + return zdcbcolor + } else if (c.value[1] > biaozhuiz * 0.9) { + return '#FFA500' + } else { + return '#33c95f' + } + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 2 + }, + // borderColor:'black', //鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + + }, + type: 'line', + data: ydatas[i].data, + markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 + symbol: 'none', + data: [{ + label: { + normal: { + position: 'end', + formatter: ''// ydatas[i].name+'鏍囧噯鍊�' //+'{c}' + } + }, + name: '鏍囧噯鍊�', + yAxis: bz, + lineStyle: { + color: ydatas[i].zxcolor, + type: 'dashed', + width: 2 + } + } + ] + } + } + } else { + obj = { + name: ydatas[i].name, + // symbol:'circle', // 鎶樼偣褰㈢姸 + // symbolSize: 3, //澶у皬 + smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� + yAxisIndex: 1, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + return '#33c95f' + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 2 + }, + // borderColor:'black', //鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + + }, + type: 'line', + data: ydatas[i].data + } + } + + if (ydatas[i].name === '搴熸皵娴侀噺' || ydatas[i].name === '搴熸皵') { + obj.yAxisIndex = 1 + } + // 涓存椂 + const datatype = 1 + if (datatype === 1) { + dataUnit = '娴侀噺(m鲁/d)' + } else { + dataUnit = '娴侀噺(m鲁/h)' + } + serLists.push(obj) + } + const option = { + /* title: { + text: title, + }, */ + tooltip: { // 鎻愮ず妗� + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + color: '#1a4245' + } + }, + formatter: function (params) { + let s = params[0].name + '<br />' + for (let i = 0; i < params.length; i++) { + // let name = params[i].name + // 鍥捐〃title鍚嶇О + const seriesName = params[i].seriesName + // 鍊� + const value = params[i].value[1] + + // let valueFliter = formatter(value) + const valueFliter = parseFloat(value).toFixed(2) + + let maker = params[i].marker + let colo = '' + switch (seriesName) { + case 'ph': + colo = '#f206ff' + break + case '姘哀鍖栫墿': + colo = '#00B0F0' + break + case '鐑熷皹': + colo = '#e0ffff' + break + case '浜屾哀鍖栫⒊': + colo = '#9ACD32' + break + case '浜屾哀鍖栫7': + colo = '#f48183' + break + default: + colo = '' + break + } + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>' + s += maker + seriesName + ':' + valueFliter + '<br />' + } + return s + } + }, + toolbox: { + show: false, + feature: { + saveAsImage: {} + } + }, + grid: { + top: '20%', + bottom: '15%' + }, + legend: { + data: legend + }, + dataZoom: [{ + type: 'inside', + start: 0, + end: 100 + }, { + start: 0, + end: 100, + show: false, + handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', + handleSize: '80%', + handleStyle: { + color: '#fff', + shadowBlur: 3, + shadowColor: 'rgba(0, 0, 0, 0.6)', + shadowOffsetX: 2, + shadowOffsetY: 2 + } + }], + xAxis: { // x 杞磋缃� + type: 'time', + boundaryGap: false, + axisLabel: { // x杞村叏閮ㄦ樉绀� + // rotate: 30, + margin: 6, + interval: 0, + textStyle: { + color: '#fff' + } + }, + splitLine: { // 缃戞牸鍨傜洿绾夸负 铏氱嚎 + show: true, + lineStyle: { + type: 'dashed' + } + }, + axisTick: { // x 杞村埢搴︽樉绀� + show: false + }, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + // data: xdata + }, + yAxis: [{ + type: 'value', + name: yname, + max: function (value) { + return parseInt(value.max + 30) + }, + axisLabel: { + formatter: '{value}', + textStyle: { + color: '#fff' + } + }, + axisPointer: { + snap: true + }, + splitLine: { + show: false + }, // y杞� 缃戞牸绾夸笉鏄剧ず, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + }, { + type: 'value', + name: dataUnit, + axisLabel: { + formatter: '{value}', + textStyle: { + color: '#fff' + } + }, + axisPointer: { + snap: true + }, + splitLine: { + show: false + }, // y杞� 缃戞牸绾夸笉鏄剧ず, + // inverse: true, + // nameLocation: 'start', + // max:500, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + }], + series: serLists + } + this.myChart.setOption(option) + }, + // 瀹氭椂鍣� 鏍规嵁鏃堕棿闂撮殧璇锋眰鏁版嵁 + IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) { + // const interValHander = setInterval(function () { + // this.initEchartsData() + // console.log('闂撮殧璇锋眰鏁版嵁') + // }, 1500) + // console.log(interValHander) + } + } +} +</script> + +<style scoped lang="less"> +.grid-content { + font-size: 8px; + background-color: #2e4967; + text-align: center; + border-radius: 2px; + margin-right: 10px; + padding: 0 10px; + + > i { + color: #ffffff; + } +} + +.animation { + //width: 600px; + //height: 0.06rem; + .infomation { + padding: 5px 10px; + } +} + +.form-echrts { + width: 100%; + border-top: 1px solid #396d83; + //margin: 10px 10px 10px 10px; + .from-search { + display: flex; + padding: 5px; + + > div { + margin-left: 10px + } + + .pickerMon { + display: flex; + + > div:first-child { + margin-right: 10px; + } + + .pickerData { + flex: 1; + display: flex; + + > span { + line-height: 22px + } + + .pickerTable { + margin-left: 3px; + } + } + } + + /deep/ .el-date-editor--datetime { + width: 100%; + } + + /deep/ .el-input__inner { + position: relative; + width: 140px; + background-color: #2e4967; + color: #fff; + font-size: 12px; + height: 24px; + padding: 0; + border-color: #00fff6; + text-align: center; + z-index: 9999; + //padding-left:20px ; + //padding: 0!important; + } + + /deep/ .el-input__icon { + display: block; + width: 140px; + height: 22px; + line-height: 22px; + cursor: pointer; + font-size: 0; + } + + .echatsInput { + color: #00ffff; + background-color: #2e4967; + border: none; + border-radius: 6px; + width: 80px; + height: 22px; + } + + input::-webkit-calendar-picker-indicator { + opacity: 100; + } + + .detailbtn { + background-color: #2e4967; + text-align: center; + padding: 0 7px; + line-height: 20px; + border-radius: 4px; + margin-right: 6px; + } + + } + + .el-dialog-div { + //height: 50vh!important; + overflow: auto; + //overflow: hidden; + } + + #echarts { + margin: 0; + padding: 0; + //height: 3rem; + //border: 1px solid #396d83; + //margin: 10px 10px 10px 10px; + } +} +</style> diff --git a/src/components/BaseNav/WasteGas/RealTimeEcharts.vue b/src/components/BaseNav/WasteGas/RealTimeEcharts.vue deleted file mode 100644 index af14caa..0000000 --- a/src/components/BaseNav/WasteGas/RealTimeEcharts.vue +++ /dev/null @@ -1,1116 +0,0 @@ -<template> - <div id="Tab"> - <div class="animation"> - <div class="infomation"> - <span class="grid-content">姘哀鍖栫墿 : <i style="color: #e8ee0b">29.93</i> 鏍囧噯 : <i style="color: #fff">100</i></span> - <span class="grid-content">浜屾哀鍖栫~ : <i style="color: #e8ee0b">17.34s</i> 鏍囧噯 : <i style="color: #fff">50</i></span> - <span class="grid-content">鐑熷皹 : <i style="color: #e8ee0b">6.93</i> 鏍囧噯 : <i style="color: #fff">30</i></span> - <span class="grid-content">搴熸皵娴侀噺 : <i style="color: #e8ee0b">5.23</i></span> - </div> - </div> - <div class="form-echrts"> - <div class="from-search"> - <div class="pickerMon"> - <div class="pickerData"> - <span> 寮�濮嬫椂闂�:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> - </span> - </div> - <div class="pickerData"> - <span >缁撴潫鏃堕棿:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> - </span> - </div> - </div> - <div> - 閲囨牱鐐规暟: - <el-select v-model="formInline.region" placeholder="50"> - <el-option label="0" value="0"></el-option> - <el-option label="25" value="25"></el-option> - <el-option label="50" value="50"></el-option> - <el-option label="75" value="75"></el-option> - <el-option label="100" value="100"></el-option> - </el-select> - </div> - <div class="detailbtn" @click="onSubmit">鏌ヨ</div> - </div> - <div style="width:5rem;height:1.5rem;" ref="echarts"> </div> - </div> - </div> -</template> - -<script> - -// import mapApi from '@/api/mapApi' -import 'dayjs/locale/es' -import dayjs from 'dayjs' - -export default { - name: 'RealTimeECharts', - data () { - return { - days: dayjs(new Date()).format('YYYYMMDDHHmmss'), - watchData: [], - dialogVisible: false, - myChar: null, - value: '', - formInline: { - region: '', - timeStart: '', - timeEnd: '' - }, - RealTimeChart: null, - JsonTimeCtarts: { - id: 'mychart_ss ', - title: '鐑熷皹', - legend: [ - { - name: '姘哀鍖栫墿', - icon: 'image://../assets/imgs/legend/NOX.png', - textStyle: { color: '#ccc' }, - itemWidth: 20, - itemHeight: 5 - }, - { - icon: 'image://../assets/imgs/legend/SO2.png', - itemHeight: 5, - itemWidth: 20, - name: '浜屾哀鍖栫~', - textStyle: { - color: '#CCC' - } - }, - { - icon: 'image://../assets/imgs/legend/YanChen.png', - itemHeight: 5, - itemWidth: 20, - name: '鐑熷皹', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/VOCs.png', - itemHeight: 5, - itemWidth: 20, - name: '搴熸皵娴侀噺', - textStyle: { color: '#ccc' } - } - ], - ydatas: [ - { - name: '姘哀鍖栫墿', - data: [{ - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:18:19', 39.51431] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:18:34', 38.76508] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:18:49', 37.57471] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:19:04', 36.3796] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:19:19', 36.10718] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:19:34', 35.81126] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:19:49', 35.9184] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:20:04', 36.08839] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:20:19', 36.3718] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:20:34', 36.8966] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:20:49', 37.3998] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:21:04', 37.11937] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:21:19', 36.12424] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:21:34', 34.99567] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:21:49', 34.48063] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:22:04', 34.62222] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:22:19', 34.84583] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:22:34', 35.80923] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:22:49', 35.93465] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:23:04', 35.78891] - }, - { - name: '姘哀鍖栫墿', - value: ['2021/04/13 09:23:19', 35.54268] - }], - zdcbcolor: 'red', - zxcolor: '#00B0F0', - bzz: 50 - }, - { - name: '浜屾哀鍖栫~', - data: [{ - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:18:19', 5.112573] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:18:34', 4.578955] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:18:49', 4.869465] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:19:04', 5.270735] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:19:19', 5.355475] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:19:34', 5.242907] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:19:49', 5.230558] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:20:04', 5.262951] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:20:19', 5.268744] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:20:34', 5.159671] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:20:49', 4.955352] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:21:04', 5.110546] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:21:19', 5.235723] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:21:34', 5.443502] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:21:49', 5.708939] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:22:04', 5.882327] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:22:19', 6.017494] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:22:34', 5.410021] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:22:49', 5.379694] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:23:04', 5.551433] - }, - { - name: '浜屾哀鍖栫~', - value: ['2021/04/13 09:23:19', 5.819743] - }], - zdcbcolor: 'red', - zxcolor: '#fff21c', - bzz: 50 - }, - { - name: '搴熸皵娴侀噺', - data: [{ - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:18:19', 5.012617] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:18:34', 4.992213] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:18:49', 5.026886] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:19:04', 5.052861] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:19:19', 5.038826] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:19:34', 5.062339] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:19:49', 5.071915] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:20:04', 5.053693] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:20:19', 5.03562] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:20:34', 5.043983] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:20:49', 5.059231] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:21:04', 5.042176] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:21:19', 5.028253] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:21:34', 5.024891] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:21:49', 5.01542] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:22:04', 5.025787] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:22:19', 5.038269] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:22:34', 5.01441] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:22:49', 5.010105] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:23:04', 5.012341] - }, - { - name: '搴熸皵娴侀噺', - value: ['2021/04/13 09:23:19', 4.996146] - }], - zdcbcolor: 'red', - zxcolor: '#9ACD32', - bzz: null - }, - { - name: '鐑熷皹', - data: [{ - name: '鐑熷皹', - value: [['2021/04/13 09:18:19', 0.8297127]] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:18:34', 0.8347292] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:18:49', 0.9218481] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:19:04', 0.913429] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:19:19', 0.9026684] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:19:34', 0.8060119] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:19:49', 0.781314] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:20:04', 0.8958074] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:20:19', 0.9093901] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:20:34', 0.8743498] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:20:49', 0.9024854] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:21:04', 0.9456897] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:21:19', 0.9747347] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:21:34', 0.9200308] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:21:49', 0.8987293] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:22:04', 0.8613345] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:22:19', 0.8747463] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:22:34', 0.8883187] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:22:49', 0.881333] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:23:04', 0.9142911] - }, - { - name: '鐑熷皹', - value: ['2021/04/13 09:23:19', 0.9569058] - }], - zdcbcolor: 'red', - zxcolor: '#f48183', - bzz: 10 - }], - yname: ' 娴撳害(mg/m鲁)' - }, - JSONTimeData: { - id: 21, - unionTagCodeList: ['TJIP45.rl3AT25035', 'TJIP45.rl3AT25033', 'TJIP45.rl3FT35032', 'TJIP45.rl3AT25034'] - // BBZMAPPING: { - // 姘哀鍖栫墿: 50, - // 浜屾哀鍖栫~: 50, - // 搴熸皵娴侀噺: null, - // 鐑熷皹: 10 - // } - }, - res: [{ UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.02153, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.7473, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.56014, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.59335, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.49617, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.33835, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.93116, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.831, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.67476, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.04687, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.78848, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.03456, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.81089, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.28693, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.79956, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.11547, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.72007, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.11903, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 44.28426, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 45.07601, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.81406, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.312585, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.507234, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.383248, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.385284, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.719143, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.730373, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.602137, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.459584, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.313675, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.305554, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.911544, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.744454, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.267665, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.606314, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.599967, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.939136, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.03244, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.183742, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.323384, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.403428, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.347282, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.018858, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020605, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.047671, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020306, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.054744, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.027292, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.026794, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.03381, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.041131, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.02754, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.998859, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.014368, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.019042, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.046045, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.024141, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.016951, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.01229, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.00666, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.005168, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.99309, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.983859, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.128864, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.096089, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.13711, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.191255, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.159299, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.089755, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.098142, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.084317, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.040828, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.066903, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.12027, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.075927, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.062984, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.190477, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.192902, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.061741, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 0.991724, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.006655, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.044971, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.077099, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.131417, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }], - startTime: '', - endTime: '', - step: '' - } - }, - updated () { - this.DrawEXHRealTimeDateChart() - }, - mounted () { - this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') - this.formInline.timeStart = dayjs().subtract(1, 'minute').format('YYYY-MM-DD HH:mm:ss') - // this.IntervalEXHRealTimeDate(this.JSONTimeData.id, this.JSONTimeData.unionTagCodeList, this.JSONTimeData.BBZMAPPING) - }, - methods: { - onSubmit () { - this.DrawEXHRealTimeDateChart() - }, - /** - * RTDB 鏍煎紡杞崲 - * @param res - * @returns {[]} - */ - // getRtdbFormat (res) { - // var data = res.collection.items - // var dataArray = [] - // for (var i = 0; i < data.length; i++) { - // var dataFormat = { - // UnionTagCode: data[i].data[0].value, - // TagValue: parseFloat(data[i].data[1].value), - // ReadTime: data[i].data[3].value, - // ErrorMessage: data[i].data[5].value - // } - // dataArray.push(dataFormat) - // } - // return dataArray - // }, - // 1.鍧愭爣杞村疄鐜�,鐢诲疄鏃舵暟鎹� - DrawEXHRealTimeDateChart () { - // var id = this.JsonTimeCtarts.id - // var title = this.JsonTimeCtarts.title - var legend = this.JsonTimeCtarts.legend - var ydatas = this.JsonTimeCtarts.ydatas - var yname = this.JsonTimeCtarts.yname - this.RealTimeChart = this.$echarts.init(this.$refs.echarts) - // this.myChart.clear() - var serLists = [] - for (var i = 0; i < ydatas.length; i++) { - // var zdcbcolor = ydatas[i].zdcbcolor - var bz = ydatas[i].bzz - var obj - if (bz) { - obj = { - name: ydatas[i].name, - // symbol:'circle', // 鎶樼偣褰㈢姸 - // symbolSize: 10, //澶у皬 - smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� - itemStyle: { - normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // var biaozhuiz - // for (var i = 0; i < exhbzzList.length; i++) { - // if (exhbzzList[i].name == c.seriesName) { - // biaozhuiz = exhbzzList[i].bzhui - // } - // } - // if (c.value[1] > biaozhuiz) { - // return zdcbcolor - // } else if (c.value[1] > biaozhuiz * 0.9) { - // return '#FFA500' - // } else { - // return '#33c95f' - // } - }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 2 - }, - // borderColor:'black', //鎶樼偣杈规鐨勯鑹� - label: { // 鏄剧ず鍊� - show: false - } - } - }, - type: 'line', - data: ydatas[i].data, - markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 - symbol: 'none', - data: [{ - label: { - normal: { - position: 'end', - formatter: ''// ydatas[i].name+'鏍囧噯鍊�' //+'{c}' - } - }, - name: '鏍囧噯鍊�', - yAxis: bz, - lineStyle: { - color: ydatas[i].zxcolor, - type: 'dashed', - width: 2 - } - }] - } - } - } else { - obj = { - name: ydatas[i].name, - // symbol:'circle', // 鎶樼偣褰㈢姸 - // symbolSize: 10, //澶у皬 - smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� - itemStyle: { - normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - return '#33c95f' - }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 2 - }, - // borderColor:'black', //鎶樼偣杈规鐨勯鑹� - label: { // 鏄剧ず鍊� - show: false - } - } - }, - type: 'line', - data: ydatas[i].data - } - } - if (ydatas[i].name === '搴熸皵娴侀噺' || ydatas[i].name === '搴熸皵') { - obj.yAxisIndex = 1 - } - serLists.push(obj) - } - var option = { - /* title: { - text: title, - }, */ - tooltip: { // 鎻愮ず妗� - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - color: '#1a4245' - } - }, - formatter: function (params) { - var s = params[0].name + '<br />' - for (var i = 0; i < params.length; i++) { - // var name = params[i].name - // 鍥捐〃title鍚嶇О - var seriesName = params[i].seriesName - // 鍊� - var value = params[i].value[1] - // var valueFliter = this.formatter(value) - var maker = params[i].marker - if (seriesName === '浜屾哀鍖栫~') { - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' - } else if (seriesName === '姘哀鍖栫墿') { - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>' - } else if (seriesName === '鐑熷皹') { - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>' - } else if (seriesName === '娓╁害') { - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>' - } else { - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' - } - s += maker + seriesName + ':' + value + '<br />' - } - return s - } - }, - toolbox: { // 鎵撳嵃绛夊伐鍏� - show: false, - feature: { - saveAsImage: {} - } - }, - grid: { // 缃戞牸 - top: '20%' - }, - legend: { - data: legend - }, - dataZoom: [{ - type: 'inside', - start: 0, - end: 100 - }, { - start: 0, - end: 100, - show: false, - handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', - handleSize: '80%', - handleStyle: { - color: '#fff', - shadowBlur: 3, - shadowColor: 'rgba(0, 0, 0, 0.6)', - shadowOffsetX: 2, - shadowOffsetY: 2 - } - }], - xAxis: { // x 杞磋缃� - type: 'time', - boundaryGap: false, - axisLabel: { // x杞村叏閮ㄦ樉绀� - // rotate: 20, - margin: 6, - interval: 0, - textStyle: { - color: '#fff' - } - }, - splitLine: { // 缃戞牸鍨傜洿绾夸负 铏氱嚎 - show: true, - lineStyle: { - type: 'dashed' - } - }, - axisTick: { // x 杞村埢搴︽樉绀� - show: false - }, - axisLine: { - lineStyle: { - color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - } - } - // data: xdata - }, - yAxis: [{ - type: 'value', - name: yname, - max: function (value) { - var ma = value.max > 100 ? value.max : 100 - return parseInt(ma) - }, - axisLabel: { - formatter: '{value}', - textStyle: { - color: '#fff' - } - }, - axisPointer: { - snap: true - }, - splitLine: { - show: false - }, // y杞� 缃戞牸绾夸笉鏄剧ず, - axisLine: { - lineStyle: { - color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - } - } - }, { // 娴侀噺杞� - type: 'value', - name: '搴熸皵娴侀噺(m3/h)', - axisLabel: { - formatter: '{value}', - textStyle: { - color: '#fff' - } - }, - axisPointer: { - snap: true - }, - splitLine: { - show: false - }, // y杞� 缃戞牸绾夸笉鏄剧ず, - axisLine: { - lineStyle: { - color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - } - } - }], - series: serLists - } - console.log(option) - this.RealTimeChart.setOption(option) - - // this.RealTimeChart.on('legendselectchanged', function (params) { - // var StdVal = null - // var op = { yAxis: {} } - // var max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� - // if (exhbzzList && exhbzzList.length > 0) { - // $.each(exhbzzList, function (index, item) { - // params.selected[item.name] ? max_val_list.push(item.bzhui) : '' - // if (item.name === params.name) { - // item.name === 'VOCs' ? StdVal = 20 : StdVal = item.bzhui - // } - // }) - // } - // max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 鎺掑簭 - // op.yAxis.max = function (value) { - // var ma = value.max < StdVal ? StdVal : Math.ceil(value.max) - // max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 閫夋嫨鏈�澶у�� - // return ma - // } - // RealTimeChart.setOption(op) - // }) - // RealTimeChart.on('click', function (params) { - // 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) - } - }, - // 閽╁瓙璋冪敤瀹炴椂 - IntervalEXHRealTimeDate (id, unionTagCodeList, BBZMAPPING) { - // 瀹氭椂鍣ㄥ嚱鏁� - this.interValHander = 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) - }, 15000) - } - } -} -</script> - -<style scoped lang="less"> -.grid-content { - font-size: 8px; - background-color: #2e4967; - text-align: center; - border-radius: 2px; - margin-right: 10px; - padding:0 10px - >i{ - color: #ffffff; - } -} -.animation { - //width: 600px; - //height: 0.06rem; - .infomation { - padding: 5px 10px; - } -} -.form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search{ - display: flex; - padding:5px; - >div{margin-left: 10px} - .pickerMon{ - display: flex; - >div:first-child { - margin-right: 10px; - } - .pickerData{ - flex: 1; - display: flex; - >span{line-height: 22px} - .pickerTable { - margin-left: 3px; - } - } - } - /deep/.el-date-editor--datetime{ - width: 100%; - } - /deep/.el-input__inner{ - position: relative; - width:140px; - background-color: #2e4967; - color: #fff; - font-size: 12px; - height: 24px; - padding: 0; - border-color:#00fff6; - text-align: center; - z-index: 9999; - //padding-left:20px ; - //padding: 0!important; - } - /deep/.el-input__icon{ - display: block; - width: 140px; - height: 22px; - line-height: 22px; - cursor: pointer; - font-size: 0; - } - .echatsInput{ - color: #00ffff; - background-color: #2e4967; - border: none; - border-radius: 6px; - width: 80px; - height: 22px; - } - input::-webkit-calendar-picker-indicator { - opacity: 100; - } - .detailbtn{ - background-color:#2e4967; - text-align: center; - padding: 0 7px; - line-height: 20px; - border-radius: 4px; - margin-right: 6px; - } - } - .el-dialog-div { - //height: 50vh!important; - overflow: auto; - //overflow: hidden; - } - - #echarts { - margin: 0; - padding: 0; - //height: 3rem; - //border: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - } -} -</style> diff --git a/src/components/BaseNav/WasteGas/Scheduleof.vue b/src/components/BaseNav/WasteGas/Scheduleof.vue new file mode 100644 index 0000000..c41d4ac --- /dev/null +++ b/src/components/BaseNav/WasteGas/Scheduleof.vue @@ -0,0 +1,46 @@ +<template> + <div class="public-schedule"> + <el-table :data="tableData" max-height="500px" border> + <el-scrollbar style="height: 50vh"> + <el-table-column prop="OnLineMonEmissPointName" label="鎺掓斁鐐�"></el-table-column> + <el-table-column prop="MonTimeStr" label="鐩戞祴鏃堕棿"></el-table-column> + <el-table-column label="姘哀鍖栫墿"> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> + </el-table-column> + <el-table-column label="浜屾哀鍖栫~"> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> + </el-table-column> + <el-table-column label="鐑熷皹"> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> + </el-table-column> + <el-table-column label="搴熸皵娴侀噺"> + <el-table-column prop="StdValue" label="姘旈噺"></el-table-column> + </el-table-column> + </el-scrollbar> + </el-table> + </div> +</template> + +<script> +export default { + name: 'Scheduleof', + data () { + return { + tableData: [] + } + } +} +</script> + +<style lang="less" scoped> + +</style> diff --git a/src/components/BaseNav/WasteGas/WasteGasIndex.vue b/src/components/BaseNav/WasteGas/WasteGasIndex.vue index 0fb7f62..ff50e1f 100644 --- a/src/components/BaseNav/WasteGas/WasteGasIndex.vue +++ b/src/components/BaseNav/WasteGas/WasteGasIndex.vue @@ -4,7 +4,26 @@ <public-tabs :storagePlaceId="storagePlaceId"></public-tabs> </template> <template v-slot:publicPart> - <public-echarts></public-echarts> + <div class="public-part"> + <span></span> + <span></span> + <span></span> + <span></span> + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane label="瀹炴椂鏁版嵁" name="first"> + <RealData></RealData> + </el-tab-pane> + <el-tab-pane label="灏忔椂鏁板眳" name="second"> + <HourData></HourData> + </el-tab-pane> + <el-tab-pane label="鏃ユ暟鎹�" name="third"> + <DayData></DayData> + </el-tab-pane> + <el-tab-pane label="浜哄伐鐩戞祴鏁版嵁" name="fourth"> + <Detail></Detail> + </el-tab-pane> + </el-tabs> + </div> </template> <template v-slot:video> <public-video></public-video> @@ -14,86 +33,90 @@ <script> -import PublicTabs from '@components/BaseNav/WasteGas/PublicTabs' -import PublicEcharts from '@components/BaseNav/PublicBounced/common/PublicChart' -import PublicVideo from '@components/BaseNav/PublicVideo' -import PublicSector from '@components/BaseNav/PublicSector' +import PublicTabs from './PublicTabs' +import PublicVideo from '../PublicVideo' +import PublicSector from '../PublicSector' +// 鍥捐〃缁勪欢 +import RealData from './RealData' +import HourData from './HourData' +import DayData from './DayData' +import Detail from './Detail' export default { - name: 'WasteGasIndex', + name: 'WasteWaterIndex', props: ['storagePlaceId'], components: { PublicSector, PublicTabs, - PublicEcharts, - PublicVideo - }, - mounted () { - console.log(this.storagePlaceId) - this.$nextTick(() => { - // this.refsData() - }) + PublicVideo, + RealData, + HourData, + DayData, + Detail }, data () { - return {} + return { + activeName: 'first' + } }, methods: { - // refsData () { - // const data = this.storagePlaceId - // this.$refs.refsTabsData.refsDataTabs(data) - // this.$refs.refsTableData.refsDataTable(data) - // } + handleClick (tab, event) { + console.log(tab, event) + } } } </script> <style lang="less" scoped> -.public-bounced { - z-index: 2000; - position: absolute; - top: 35%; - left: 20%; - .public-bounced-title { - cursor: move; - height: 0.1rem; - padding: 10px 0; - display: flex; - align-items: center; - justify-content: space-between; - - span { - color: #f4f7ff; - margin: 0 15px; - font-size: 14px; - } - - i { - color: #C0C4CC; - margin: 0 15px; - font-size: 22px; - cursor: pointer; - } - - i:hover { - color: #00fff6; - } - } - - .public-bounced-content { - //padding: 0.1rem; - display: flex; - //align-items: center; - //justify-content: space-around; - - .public-bounced-content-left { - //width: 4.8rem; - } - - .public-bounced-content-right { - //width: 3rem; - margin-left: 0.1rem; - } - } +.public-part { + position: relative; + margin-bottom: 0.1rem; + background-color: @background-color; + font-size: 0.06rem; + font-weight: normal; + padding: 0.04rem 0; + border: 1px solid #396d83; } + +.public-part span:nth-child(1) { + position: absolute; + left: -2px; + top: -2px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 2px 0 0 2px; +} + +.public-part span:nth-child(2) { + position: absolute; + right: -2px; + top: -2px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 2px 2px 0 0; +} + +.public-part span:nth-child(3) { + position: absolute; + right: -2px; + bottom: -2px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 2px 2px 0; +} + +.public-part span:nth-child(4) { + position: absolute; + left: -2px; + bottom: -2px; + padding: 6px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 0 2px 2px; +} + </style> diff --git a/src/components/BaseNav/WasteWater/DayData.vue b/src/components/BaseNav/WasteWater/DayData.vue index a5f0006..110baea 100644 --- a/src/components/BaseNav/WasteWater/DayData.vue +++ b/src/components/BaseNav/WasteWater/DayData.vue @@ -31,7 +31,7 @@ <div class="detailbtn hover-bottom">鏌ヨ</div> <div class="detailbtn hover-bottom">鏄庣粏琛�</div> </div> - <div style="width:5rem;height:2rem;" id="echarts" ref="echartsday"> + <div style="width:5rem;height:1.5rem;" id="echarts" ref="echartsday"> </div> </div> <!-- <!– 鏄庣粏寮规 –>--> @@ -306,7 +306,7 @@ }, effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) { this.chart = this.$echarts.init(this.$refs.echartsday) - console.log(this.chart) + // console.log(this.chart) this.chart.clear() var dataUnit = '' if (datatype === 1) { diff --git a/src/components/BaseNav/WasteWater/Detail.vue b/src/components/BaseNav/WasteWater/Detail.vue index 1374053..29c7a3b 100644 --- a/src/components/BaseNav/WasteWater/Detail.vue +++ b/src/components/BaseNav/WasteWater/Detail.vue @@ -1,311 +1,117 @@ <template> -<!-- <el-table :data="tableData" style="width:730px" height="200px">--> -<!-- <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop"--> -<!-- :label="item.label">--> -<!-- <el-table-column v-for="(item1, index1) in item.label" :key="index1" :prop="item1.prop" :label="item1.label">--> -<!-- </el-table-column>--> -<!-- </el-table-column>--> -<!-- </el-table>--> - <div style="width: 5.9rem"> - <el-table - :data="tableData" - max-height="255px" - style="width: 100%;height: 100%"> - <el-table-column - prop="date" - width="130" - label="妫�娴嬫椂闂�"> - </el-table-column> - <el-table-column - label="BOD5"> + <div class="detail" style="width: 5rem"> + <el-table + :data="tableData" + style="width: 100%;" + height="200px" + > <el-table-column - prop="codWatch" - label="鐩戞祴鍊�"> + prop="LabMonTime" + label="妫�娴嬫椂闂�"> </el-table-column> <el-table-column - prop="codTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="COD"> - <el-table-column - prop="phWatch" - label="鐩戞祴鍊�"> + label="COD"> + <el-table-column + prop="LabMonValue" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="StdValue" + label="鏍囧噯鍊�"> + </el-table-column> </el-table-column> <el-table-column - prop="codTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="PH"> - <el-table-column - prop="bod5Watch" - label="鐩戞祴鍊�"> + label="姘ㄦ爱"> + <el-table-column + prop="LabMonValue" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="StdValue" + label="鏍囧噯鍊�"> + </el-table-column> </el-table-column> <el-table-column - prop="bod5Time" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="姘ㄦ爱"> - <el-table-column - prop="adWatch" - label="鐩戞祴鍊�"> + label="鎬荤7"> + <el-table-column + prop="LabMonValue" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="StdValue" + label="鏍囧噯鍊�"> + </el-table-column> </el-table-column> <el-table-column - prop="adTime" - label="鏍囧噯鍊�"> + label="鎬绘爱"> + <el-table-column + prop="LabMonValue" + label="鐩戞祴鍊�"> + </el-table-column> + <el-table-column + prop="StdValue" + label="鏍囧噯鍊�"> + </el-table-column> </el-table-column> - </el-table-column> - <el-table-column - label="鎸ュ彂閰�"> - <el-table-column - prop="adWatch" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="adTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="姘熺瀛�"> - <el-table-column - prop="adWatch" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="adTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="纭寲鐗�"> - <el-table-column - prop="adWatch" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="adTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="鐭虫补绫�"> - <el-table-column - prop="adWatch" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="adTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - <el-table-column - label="鎮诞鐗�"> - <el-table-column - prop="adWatch" - label="鐩戞祴鍊�"> - </el-table-column> - <el-table-column - prop="adTime" - label="鏍囧噯鍊�"> - </el-table-column> - </el-table-column> - </el-table> + <!-- <el-table-column--> + <!-- fixed="right"--> + <!-- label="鑻�">--> + <!-- <el-table-column--> + <!-- fixed="right"--> + <!-- prop="LabMonValue"--> + <!-- label="鐩戞祴鍊�">--> + <!-- </el-table-column>--> + <!-- <el-table-column--> + <!-- fixed="right"--> + <!-- prop="StdValue"--> + <!-- label="鏍囧噯鍊�">--> + <!-- </el-table-column>--> + <!-- </el-table-column>--> + </el-table> </div> </template> <script> + +import mapApi from '@/api/mapApi' +import 'dayjs/locale/es' +import dayjs from 'dayjs' + export default { name: 'Detail', data () { return { - tableData: [{ - date: '2016-05-03 12:00:00', - codWatch: '7.23', - codTime: '-', - phWatch: '0.43', - phTime: '9.21', - bod5Watch: '7.12', - bod5Time: '-', - adWatch: '0.23', - adTime: '-' - }, - { - date: '2016-05-03 12:00:15', - codWatch: '-', - codTime: '5.32', - phWatch: '-', - phTime: '0.23', - bod5Watch: '1', - bod5Time: '9.88', - adWatch: '1.76', - adTime: '-' - }, - { - date: '2016-05-03 12:00:30', - codWatch: '-', - codTime: '0.92', - phWatch: '-', - phTime: '8.71', - bod5Watch: '0.72', - bod5Time: '-', - adWatch: '6.23', - adTime: '0.86' - }, - { - date: '2016-05-03 12:01:15', - codWatch: '10.22', - codTime: '-', - phWatch: '-', - phTime: '0.92', - bod5Watch: '0.82', - bod5Time: '-', - adWatch: '23.82', - adTime: '-' - }, - { - date: '2016-05-03 12:01:30', - codWatch: '0.31', - codTime: '-', - phWatch: '-', - phTime: '6.12', - bod5Watch: '0.31', - bod5Time: '-', - adWatch: '0.21', - adTime: '-' - }, - { - date: '2016-05-03 12:02:15', - codWatch: '9.22', - codTime: '-', - phWatch: '-', - phTime: '-', - bod5Watch: '-', - bod5Time: '0.72', - adWatch: '-', - adTime: '17.23' - }, - { - date: '2016-05-03 12:02:30', - codWatch: '-', - codTime: '-', - phWatch: '0.83', - phTime: '-', - bod5Watch: '23.22', - bod5Time: '-', - adWatch: '-', - adTime: '-' - }, - { - date: '2016-05-03 12:03:15', - codWatch: '8.74', - codTime: '-', - phWatch: '-', - phTime: '13.22', - bod5Watch: '-', - bod5Time: '0.23', - adWatch: '-', - adTime: '-' - }, - { - date: '2016-05-03 12:03:30', - codWatch: '0.82', - codTime: '-', - phWatch: '-', - phTime: '-', - bod5Watch: '-', - bod5Time: '32.42', - adWatch: '-', - adTime: '0.88' - }, - { - date: '2016-05-03 12:04:15', - codWatch: '-', - codTime: '-', - phWatch: '0.71', - phTime: '-', - bod5Watch: '-', - bod5Time: '15.83', - adWatch: '-', - adTime: '24.82' - }, - { - date: '2016-05-03 12:04:30', - codWatch: '-', - codTime: '19.65', - phWatch: '29.22', - phTime: '-', - bod5Watch: '0.98', - bod5Time: '-', - adWatch: '-', - adTime: '-' - }, - { - date: '2016-05-03 12:05:15', - codWatch: '19.32', - codTime: '-', - phWatch: '-', - phTime: '-', - bod5Watch: '-', - bod5Time: '12.21', - adWatch: '-', - adTime: '-' - }, - { - date: '2016-05-03 12:05:30', - codWatch: '10.53', - codTime: '-', - phWatch: '-', - phTime: '-', - bod5Watch: '-', - bod5Time: '23.71', - adWatch: '-', - adTime: '10.55' - }, - { - date: '2016-05-03 12:06:15', - codWatch: '31.63', - codTime: '-', - phWatch: '-', - phTime: '-', - bod5Watch: '-', - bod5Time: '0.56', - adWatch: '-', - adTime: '-' - }, - { - date: '2016-05-03 12:06:30', - codWatch: '19.53', - codTime: '-', - phWatch: '-', - phTime: '-', - bod5Watch: '-', - bod5Time: '0.28', - adWatch: '-', - adTime: '0.75' - }] + tableData: [] } }, - created () { - // this.$nextTick(() => { - // this.$attrs.ManualData.forEach(item => { - // this.tableData = [...item] - // }) - // this.tableData.LabMonTime = 100 - // console.log(this.tableData) - // }) + mounted () { + this.initdetail() + }, + methods: { + async initdetail () { + const timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') + const timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss') + const data = { + companyId: 3900100145, + labMonPointId: 219, + beginTime: timeStart, + endTime: timeEnd + } + const result = (await mapApi.getQueryLabMonData(data)).Result.DataInfo + // console.log(result) + this.tableData = result + } } } </script> <style scoped> -.el-table--border::after, .el-table--group::after, .el-table::before{ +/deep/ .el-table--border::after, .el-table--group::after, .el-table::before { background: none; } + +/*/deep/ .el-table {*/ +/* border: none !important;*/ +/*}*/ </style> diff --git a/src/components/BaseNav/WasteWater/HourData.vue b/src/components/BaseNav/WasteWater/HourData.vue index c9419d1..20031db 100644 --- a/src/components/BaseNav/WasteWater/HourData.vue +++ b/src/components/BaseNav/WasteWater/HourData.vue @@ -23,7 +23,7 @@ <div class="detailbtn">鏄庣粏琛�</div> </div> <div class="boxChart"> - <div style="width: 5rem;height:2rem;" id="echarts" ref="echartsHour"></div> + <div style="width: 5rem;height:1.5rem;" id="echarts" ref="echartsHour"></div> </div> </div> </div> @@ -312,7 +312,7 @@ }, effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) { this.chart = this.$echarts.init(this.$refs.echartsHour) - console.log(this.chart) + // console.log(this.chart) this.chart.clear() var dataUnit = '' if (datatype === 1) { diff --git a/src/components/BaseNav/WasteWater/PublicBorder.vue b/src/components/BaseNav/WasteWater/PublicBorder.vue deleted file mode 100644 index 404833d..0000000 --- a/src/components/BaseNav/WasteWater/PublicBorder.vue +++ /dev/null @@ -1,62 +0,0 @@ -<template> - <div class="public-border"> - <span></span> - <span></span> - <span></span> - <span></span> - </div> -</template> - -<script> -export default { - name: 'PublicBorder' -} -</script> - -<style lang="less" scoped> -.public-border { - position: relative; - background-color: @background-color; - border: 1px solid #396d83; -} - -.public-border span:nth-child(1) { - position: absolute; - left: -1px; - top: -1px; - padding: 6px; - border-style: solid; - border-color: #02a6b5; - border-width: 1px 0 0 1px; -} - -.public-border span:nth-child(2) { - position: absolute; - right: -1px; - top: -1px; - padding: 6px; - border-style: solid; - border-color: #02a6b5; - border-width: 1px 1px 0 0; -} - -.public-border span:nth-child(3) { - position: absolute; - right: -1px; - bottom: -1px; - padding: 6px; - border-style: solid; - border-color: #02a6b5; - border-width: 0 1px 1px 0; -} - -.public-border span:nth-child(4) { - position: absolute; - left: -1px; - bottom: -1px; - padding: 6px; - border-style: solid; - border-color: #02a6b5; - border-width: 0 0 1px 1px; -} -</style> diff --git a/src/components/BaseNav/WasteWater/PublicForm.vue b/src/components/BaseNav/WasteWater/PublicForm.vue deleted file mode 100644 index d1df7dd..0000000 --- a/src/components/BaseNav/WasteWater/PublicForm.vue +++ /dev/null @@ -1,144 +0,0 @@ -<template> - <div class="public-form"> - <div class="from-search"> - <div class="pickerMon"> - <div class="pickerData"> - <span> 寮�濮嬫椂闂�:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> - </span> - </div> - <div class="pickerData"> - <span>缁撴潫鏃堕棿:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> - </span> - </div> - </div> - <div> - <span>閲囨牱鐐规暟:</span> - <el-select v-model="formInline.region" placeholder="50"> - <el-option label="0" value="0"></el-option> - <el-option label="25" value="25"></el-option> - <el-option label="50" value="50"></el-option> - <el-option label="75" value="75"></el-option> - <el-option label="100" value="100"></el-option> - </el-select> - </div> - <div class="detailbtn" @click="onSubmit">鏌ヨ</div> - </div> - </div> -</template> - -<script> -export default { - name: 'PublicForm', - data () { - return { - formInline: { - timeStart: '', - timeEnd: '' - } - } - }, - methods: { - onSubmit () { - console.log('onsubmit') - } - } -} -</script> - -<style lang="less" scoped> -.public-form { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search { - display: flex; - padding: 5px; - - > div { - margin-left: 10px - } - - .pickerMon { - display: flex; - - > div:first-child { - margin-right: 10px; - } - - .pickerData { - flex: 1; - display: flex; - - > span { - line-height: 22px - } - - .pickerTable { - margin-left: 3px; - } - } - } - - /deep/ .el-date-editor--datetime { - width: 100%; - } - - /deep/ .el-input__inner { - position: relative; - width: 140px; - background-color: #2e4967; - color: #fff; - font-size: 12px; - height: 24px; - padding: 0; - border-color: #00fff6; - text-align: center; - z-index: 9999; - //padding-left:20px ; - //padding: 0!important; - } - - /deep/ .el-input__icon { - display: block; - width: 140px; - height: 22px; - line-height: 22px; - cursor: pointer; - font-size: 0; - } - - .echatsInput { - color: #00ffff; - background-color: #2e4967; - border: none; - border-radius: 6px; - width: 80px; - height: 22px; - } - - input::-webkit-calendar-picker-indicator { - opacity: 100; - } - - .detailbtn { - background-color: #2e4967; - text-align: center; - padding: 0 7px; - line-height: 20px; - border-radius: 4px; - margin-right: 6px; - } - - } - - .el-dialog-div { - //height: 50vh!important; - overflow: auto; - //overflow: hidden; - } -} -</style> diff --git a/src/components/BaseNav/WasteWater/RealData.vue b/src/components/BaseNav/WasteWater/RealData.vue index 2cf6000..affcae3 100644 --- a/src/components/BaseNav/WasteWater/RealData.vue +++ b/src/components/BaseNav/WasteWater/RealData.vue @@ -29,7 +29,7 @@ </div> <div class="detailbtn" @click="onSubmit">鏌ヨ</div> </div> - <div style="width:5rem;height:2rem;" ref="echarts"></div> + <div style="width:5rem;height:1.5rem;" ref="echarts"></div> </div> </div> </template> @@ -135,7 +135,7 @@ $endTime: this.formInline.timeStart, $step: 15 } - const result = (await mapApi.DataItems(data)).data + const result = (await mapApi.getDataItems(data)).data this.getRtdb15s(result) }, // echarts鏁版嵁澶勭悊 @@ -180,7 +180,7 @@ } this.RealTimeDataList.push(datalist) - console.log(this.RealTimeDataList) + // console.log(this.RealTimeDataList) // bzh.push(d[i].StdValue); } else if (nameList.indexOf(name) < 0) { @@ -243,7 +243,7 @@ const lengList = [] let objTemp = [] - console.log(objTemp) + // console.log(objTemp) for (let l = 0; l < nameList.length; l++) { let obj @@ -314,10 +314,10 @@ const BBZMAPPING = [ { COD: 35, - 搴熸按娴侀噺: null, + ph: 9, 鎬绘爱: 15, 鎬荤7: 0.3, - 榛贰: 3 + 姘ㄦ爱: 3 } ] for (let m = 0; m < this.RealTimeDataList.length; m++) { @@ -625,7 +625,7 @@ IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) { // const interValHander = setInterval(function () { // this.initEchartsData() - console.log('闂撮殧璇锋眰鏁版嵁') + // console.log('闂撮殧璇锋眰鏁版嵁') // }, 1500) // console.log(interValHander) } diff --git a/src/components/BaseNav/WasteWater/RealTimeEcharts.vue b/src/components/BaseNav/WasteWater/RealTimeEcharts.vue deleted file mode 100644 index d5fa28d..0000000 --- a/src/components/BaseNav/WasteWater/RealTimeEcharts.vue +++ /dev/null @@ -1,942 +0,0 @@ -<!-- 搴熸按瀹炴椂鏁版嵁 --> -<template> - <div id="Tab"> - <div class="animation"> - <div class="infomation"> - <span class="grid-content">COD : <i style="color: #e8ee0b">11.24385</i> 鏍囧噯 : <i style="color: #fff">50</i></span> - <span class="grid-content">姘哀 :<i style="color: #e8ee0b">0.1889014</i> 鏍囧噯 : <i style="color: #fff">30</i></span> - <span class="grid-content">鎬荤7 : <i style="color: #e8ee0b">0.03812287</i> 鏍囧噯 : <i style="color: #fff">5</i></span> - <span class="grid-content">搴熸按娴侀噺 : <i style="color: #e8ee0b">32.16287</i></span> - </div> - </div> - <div class="form-echrts"> - <div class="from-search"> - <div class="pickerMon"> - <div class="pickerData"> - <span> 寮�濮嬫椂闂�:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeStart"> - </el-date-picker> - </span> - </div> - <div class="pickerData"> - <span >缁撴潫鏃堕棿:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeEnd"> - </el-date-picker> - </span> - </div> - </div> - <div> - 閲囨牱鐐规暟: - <el-select v-model="formInline.region" placeholder="50"> - <el-option label="0" value="0"></el-option> - <el-option label="25" value="25"></el-option> - <el-option label="50" value="50"></el-option> - <el-option label="75" value="75"></el-option> - <el-option label="100" value="100"></el-option> - </el-select> - </div> - <div class="detailbtn" @click="onSubmit">鏌ヨ</div> - </div> - <div class="boxChart"> - <div style="width: 5rem;height: 1.5rem;" id="popChart" ref="main"></div> - </div> - </div> - </div> -</template> - -<script> -import 'dayjs/locale/es' -import dayjs from 'dayjs' - -export default { - name: 'RealTimeEcharts', - data () { - return { - value1: '', - value2: '', - watchData: [], - dialogVisible: false, - myChar: null, - RealTimeChart: null, - value: '', - days: dayjs(new Date()).format('YYYYMMDDHHmmss'), - formInline: { - region: '', - timeStart: '2021-04-13 12:47:18', - timeEnd: '2021-04-13 12:52:18' - }, - JsonRealWasteWater: { - id: 'mycharteff_second ', - title: 'COD', - legend: [ - { - icon: 'image://../assets/imgs/legend/NOX.png', - itemHeight: 5, - itemWidth: 20, - name: '姘ㄦ爱', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/YanChen.png', - itemHeight: 5, - itemWidth: 20, - name: '鎬荤7', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/SO2.png', - itemHeight: 5, - itemWidth: 20, - name: '鎬绘爱', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/NOX.png', - itemHeight: 5, - itemWidth: 20, - name: 'COD', - textStyle: { color: '#ccc' } - }, - { - icon: 'image://../assets/imgs/legend/VOCs.png', - itemHeight: 5, - itemWidth: 20, - name: '搴熸按娴侀噺', - textStyle: { color: '#ccc' } - } - ], - ydatas: [ - { - name: '姘哀', - data: [{ name: '姘哀', value: ['2021/04/13 12:47:18', 0.1900156] }, - { name: '姘哀', value: ['2021/04/13 12:47:33', 0.1902795] }, - { name: '姘哀', value: ['2021/04/13 12:47:48', 0.1892689] }, - { name: '姘哀', value: ['2021/04/13 12:48:03', 0.1882582] }, - { name: '姘哀', value: ['2021/04/13 12:48:18', 0.1882284] }, - { name: '姘哀', value: ['2021/04/13 12:48:33', 0.1886617] }, - { name: '姘哀', value: ['2021/04/13 12:48:48', 0.1873395] }, - { name: '姘哀', value: ['2021/04/13 12:49:03', 0.1866319] }, - { name: '姘哀', value: ['2021/04/13 12:49:18', 0.1895212] }, - { name: '姘哀', value: ['2021/04/13 12:49:33', 0.1898232] }, - { name: '姘哀', value: ['2021/04/13 12:49:48', 0.1880916] }, - { name: '姘哀', value: ['2021/04/13 12:50:03', 0.1883546] }, - { name: '姘哀', value: ['2021/04/13 12:50:18', 0.1907846] }, - { name: '姘哀', value: ['2021/04/13 12:50:33', 0.1887416] }, - { name: '姘哀', value: ['2021/04/13 12:50:48', 0.1873472] }, - { name: '姘哀', value: ['2021/04/13 12:51:03', 0.1886214] }, - { name: '姘哀', value: ['2021/04/13 12:51:18', 0.1891896] }, - { name: '姘哀', value: ['2021/04/13 12:51:33', 0.1891176] }, - { name: '姘哀', value: ['2021/04/13 12:51:48', 0.1890455] }, - { name: '姘哀', value: ['2021/04/13 12:52:03', 0.1889734] }, - { name: '姘哀', value: ['2021/04/13 12:52:18', 0.1889014] }], - zdcbcolor: 'red', - zxcolor: '#00B0F0', - bzz: 3 - }, - { - name: '鎬荤7', - data: [{ name: '鎬荤7', value: ['2021/04/13 12:47:18', 0.03813388] }, - { name: '鎬荤7', value: ['2021/04/13 12:47:33', 0.03813333] }, - { name: '鎬荤7', value: ['2021/04/13 12:47:48', 0.03813278] }, - { name: '鎬荤7', value: ['2021/04/13 12:48:03', 0.03813223] }, - { name: '鎬荤7', value: ['2021/04/13 12:48:18', 0.03813168] }, - { name: '鎬荤7', value: ['2021/04/13 12:48:33', 0.03813113] }, - { name: '鎬荤7', value: ['2021/04/13 12:48:48', 0.03813057] }, - { name: '鎬荤7', value: ['2021/04/13 12:49:03', 0.03813003] }, - { name: '鎬荤7', value: ['2021/04/13 12:49:18', 0.03812947] }, - { name: '鎬荤7', value: ['2021/04/13 12:49:33', 0.03812892] }, - { name: '鎬荤7', value: ['2021/04/13 12:49:48', 0.03812837] }, - { name: '鎬荤7', value: ['2021/04/13 12:50:03', 0.03812782] }, - { name: '鎬荤7', value: ['2021/04/13 12:50:18', 0.03812727] }, - { name: '鎬荤7', value: ['2021/04/13 12:50:33', 0.03812672] }, - { name: '鎬荤7', value: ['2021/04/13 12:50:48', 0.03812617] }, - { name: '鎬荤7', value: ['2021/04/13 12:51:03', 0.03812562] }, - { name: '鎬荤7', value: ['2021/04/13 12:51:18', 0.03812507] }, - { name: '鎬荤7', value: ['2021/04/13 12:51:33', 0.03812452] }, - { name: '鎬荤7', value: ['2021/04/13 12:51:48', 0.03812397] }, - { name: '鎬荤7', value: ['2021/04/13 12:52:03', 0.03812342] }, - { name: '鎬荤7', value: ['2021/04/13 12:52:18', 0.03812287] }], - zdcbcolor: 'red', - zxcolor: '#f48183', - bzz: 0.3 - }, - { - name: '鎬绘爱', - data: [{ name: '鎬绘爱', value: ['2021/04/13 12:47:18', 2.779342] }, - { name: '鎬绘爱', value: ['2021/04/13 12:47:33', 2.779337] }, - { name: '鎬绘爱', value: ['2021/04/13 12:47:48', 2.779331] }, - { name: '鎬绘爱', value: ['2021/04/13 12:48:03', 2.779823] }, - { name: '鎬绘爱', value: ['2021/04/13 12:48:18', 2.779321] }, - { name: '鎬绘爱', value: ['2021/04/13 12:48:33', 2.779344] }, - { name: '鎬绘爱', value: ['2021/04/13 12:48:48', 2.779452] }, - { name: '鎬绘爱', value: ['2021/04/13 12:49:03', 2.779224] }, - { name: '鎬绘爱', value: ['2021/04/13 12:49:18', 2.779133] }, - { name: '鎬绘爱', value: ['2021/04/13 12:49:33', 2.779445] }, - { name: '鎬绘爱', value: ['2021/04/13 12:49:48', 2.779743] }, - { name: '鎬绘爱', value: ['2021/04/13 12:50:03', 2.779332] }, - { name: '鎬绘爱', value: ['2021/04/13 12:50:18', 2.779562] }, - { name: '鎬绘爱', value: ['2021/04/13 12:50:33', 2.779560] }, - { name: '鎬绘爱', value: ['2021/04/13 12:50:48', 2.779534] }, - { name: '鎬绘爱', value: ['2021/04/13 12:51:03', 2.779412] }, - { name: '鎬绘爱', value: ['2021/04/13 12:51:18', 2.779673] }, - { name: '鎬绘爱', value: ['2021/04/13 12:51:33', 2.779452] }, - { name: '鎬绘爱', value: ['2021/04/13 12:51:48', 2.779397] }, - { name: '鎬绘爱', value: ['2021/04/13 12:52:03', 2.779342] }, - { name: '鎬绘爱', value: ['2021/04/13 12:52:18', 2.779287] }], - zdcbcolor: 'red', - zxcolor: '#e0ffff', - bzz: 15 - }, - { - name: '搴熸按娴侀噺', - data: [{ name: '搴熸按娴侀噺', value: ['2021/04/13 12:47:18', 31.63029] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:47:33', 31.9791] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:47:48', 31.92095] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:48:03', 32.05784] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:48:18', 32.01669] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:48:33', 32.39344] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:48:48', 32.66452] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:49:03', 32.45224] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:49:18', 32.42133] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:49:33', 32.88445] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:49:48', 32.36743] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:50:03', 32.83332] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:50:18', 32.15562] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:50:33', 32.61560] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:50:48', 32.89534] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:51:03', 32.72412] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:51:18', 32.48673] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:51:33', 32.03452] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:51:48', 32.93397] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:52:03', 32.84342] }, - { name: '搴熸按娴侀噺', value: ['2021/04/13 12:52:18', 32.16287] }], - zdcbcolor: 'red', - zxcolor: '#9ACD32', - bzz: null - }, - { - name: 'COD', - data: [{ name: 'COD', value: ['2021/04/13 12:47:18', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:47:33', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:47:48', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:48:03', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:48:18', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:48:33', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:48:48', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:49:03', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:49:18', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:49:33', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:49:48', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:50:03', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:50:18', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:50:33', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:50:48', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:51:03', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:51:18', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:51:33', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:51:48', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:52:03', 11.24385] }, - { name: 'COD', value: ['2021/04/13 12:52:18', 11.24385] }], - zdcbcolor: 'red', - zxcolor: '#fff21c', - bzz: 35 - } - ], - yname: ' 娴撳害(mg/l)' - }, - JSONTimeData: { - id: 21, - unionTagCodeList: ['TJIP45.rl3AT25035', 'TJIP45.rl3AT25033', 'TJIP45.rl3FT35032', 'TJIP45.rl3AT25034'] - }, - res: [{ UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.02153, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.7473, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.56014, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.59335, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.49617, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.33835, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.93116, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.831, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.67476, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.04687, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.78848, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.03456, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.81089, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.28693, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.79956, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.11547, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.72007, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.11903, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 44.28426, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 45.07601, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.81406, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.312585, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.507234, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.383248, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.385284, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.719143, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.730373, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.602137, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.459584, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.313675, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.305554, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.911544, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.744454, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.267665, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.606314, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.599967, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.939136, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.03244, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.183742, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.323384, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.403428, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.347282, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.018858, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020605, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.047671, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020306, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.054744, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.027292, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.026794, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.03381, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.041131, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.02754, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.998859, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.014368, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.019042, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.046045, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.024141, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.016951, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.01229, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.00666, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.005168, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.99309, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.983859, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.128864, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.096089, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.13711, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.191255, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.159299, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.089755, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.098142, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.084317, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.040828, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.066903, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.12027, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.075927, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.062984, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.190477, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.192902, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.061741, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 0.991724, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.006655, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.044971, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.077099, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, - { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.131417, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }], - startTime: '', - endTime: '', - step: '' - } - }, - mounted () { - this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') - this.formInline.timeStart = dayjs().subtract(1, 'minute').format('YYYY-MM-DD HH:mm:ss') - // console.log(this.formInline.timeStart) - // console.log(this.JsonRealWasteWater.ydatas[0].data[0].value[0]) - }, - updated () { - this.DrawRealTimeDateChart() - }, - methods: { - onSubmit () { - this.DrawRealTimeDateChart() - }, - // 鐢诲簾姘存姌绾垮浘--瀹炴椂鏁版嵁 - DrawRealTimeDateChart () { - var legend = this.JsonRealWasteWater.legend - var ydatas = this.JsonRealWasteWater.ydatas - var yname = this.JsonRealWasteWater.yname - this.RealTimeChart = this.$echarts.init(this.$refs.main) - var serLists = [] - for (var i = 0; i < ydatas.length; i++) { - // var zdcbcolor = ydatas[i].zdcbcolor - var bz = ydatas[i].bzz - var obj - if (bz) { - obj = { - name: ydatas[i].name, - // symbol:'circle', // 鎶樼偣褰㈢姸 - // symbolSize: 3, //澶у皬 - smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� - itemStyle: { - normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // var biaozhuiz - // for (var i = 0; i < bzzList.length; i++) { - // if (bzzList[i].name == c.seriesName) { - // biaozhuiz = bzzList[i].bzhui - // } - // } - // if (c.value[1] > biaozhuiz) { - // return zdcbcolor - // } else if (c.value[1] > biaozhuiz * 0.9) { - // return '#FFA500' - // } - // { - // return '#33c95f' - // } - }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 2 - }, - // borderColor:'black', //鎶樼偣杈规鐨勯鑹� - label: { // 鏄剧ず鍊� - show: false - } - } - - }, - type: 'line', - data: ydatas[i].data, - markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 - symbol: 'none', - data: [{ - label: { - normal: { - position: 'end', - formatter: ''// ydatas[i].name+'鏍囧噯鍊�' //+'{c}' - } - }, - name: '鏍囧噯鍊�', - yAxis: bz, - lineStyle: { - color: ydatas[i].zxcolor, - type: 'dashed', - width: 2 - } - } - ] - } - } - } else { - obj = { - name: ydatas[i].name, - // symbol:'circle', // 鎶樼偣褰㈢姸 - // symbolSize: 3, //澶у皬 - smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� - yAxisIndex: 1, - itemStyle: { - normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - return '#33c95f' - }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 2 - }, - // borderColor:'black', //鎶樼偣杈规鐨勯鑹� - label: { // 鏄剧ず鍊� - show: false - } - } - - }, - type: 'line', - data: ydatas[i].data - } - } - - if (ydatas[i].name === '搴熸皵娴侀噺' || ydatas[i].name === '搴熸皵') { - obj.yAxisIndex = 1 - } - serLists.push(obj) - } - - var option = { - /* title: { - text: title, - }, */ - tooltip: { // 鎻愮ず妗� - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - color: '#1a4245' - } - }, - formatter: function (params) { - var s = params[0].name + '<br />' - for (var i = 0; i < params.length; i++) { - // var name = params[i].name - // 鍥捐〃title鍚嶇О - var seriesName = params[i].seriesName - // 鍊� - var value = params[i].value[1] - // var valueFliter = this.formatter(value) - var maker = params[i].marker - var colo = '' - switch (seriesName) { - case 'COD': - colo = '#fff21c' - break - case '姘ㄦ爱': - colo = '#00B0F0' - break - case '鎬荤7': - colo = '#f48183' - break - case '鎬绘爱': - colo = '#e0ffff' - break - default: - colo = '#9ACD32' - break - } - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>' - s += maker + seriesName + ':' + value + '<br />' - } - return s - } - }, - toolbox: { // 鎵撳嵃绛夊伐鍏� - show: false, - feature: { - saveAsImage: {} - } - }, - grid: { // 缃戞牸 - top: '20%', - left: '7%', - bottom: '15%', - right: '5%' - }, - legend: { - data: legend - }, - dataZoom: [{ - type: 'inside', - start: 0, - end: 100 - }, { - start: 0, - end: 100, - show: false, - handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', - handleSize: '80%', - handleStyle: { - color: '#fff', - shadowBlur: 3, - shadowColor: 'rgba(0, 0, 0, 0.6)', - shadowOffsetX: 2, - shadowOffsetY: 2 - } - }], - xAxis: { // x 杞磋缃� - type: 'time', - boundaryGap: false, - axisLabel: { // x杞村叏閮ㄦ樉绀� - // rotate: 30, - margin: 6, - interval: 0, - textStyle: { - color: '#fff' - } - }, - splitLine: { // 缃戞牸鍨傜洿绾夸负 铏氱嚎 - show: true, - lineStyle: { - type: 'dashed' - } - }, - axisTick: { // x 杞村埢搴︽樉绀� - show: false - }, - axisLine: { - lineStyle: { - color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - } - } - // data: xdata - }, - yAxis: [{ - type: 'value', - name: yname, - max: function (value) { - return parseInt(value.max + 30) - }, - axisLabel: { - formatter: '{value}', - textStyle: { - color: '#fff' - } - }, - axisPointer: { - snap: true - }, - splitLine: { - show: false - }, // y杞� 缃戞牸绾夸笉鏄剧ず, - axisLine: { - lineStyle: { - color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - } - } - }, { - type: 'value', - name: '娴侀噺(m鲁/d)', - axisLabel: { - formatter: '{value}', - textStyle: { - color: '#fff' - } - }, - axisPointer: { - snap: true - }, - splitLine: { - show: false - }, // y杞� 缃戞牸绾夸笉鏄剧ず, - // inverse: true, - // nameLocation: 'start', - // max:500, - axisLine: { - lineStyle: { - color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - } - } - }], - series: serLists - } - this.RealTimeChart.setOption(option) - /* RealTimeChart.on('legendselectchanged', function (params) { - // console.log(params); - var StdVal = null - var op = { yAxis: {} } - if (params.selected.COD) { - if (bzzList && bzzList.length > 0) { - for (let i = 0; i < bzzList.length; i++) { - if (bzzList[i].name == 'COD') { - StdVal = bzzList[i].bzhui - } - } - } - - op.yAxis.max = function (value) { - var ma - if (value.max < StdVal) { - ma = StdVal - } else { - ma = Math.ceil(value.max) - } - return ma - } - } else if (params.selected['鎬绘爱']) { - if (bzzList && bzzList.length > 0) { - for (let i = 0; i < bzzList.length; i++) { - if (bzzList[i].name == '鎬绘爱') { - StdVal = bzzList[i].bzhui - } - } - } - op.yAxis.max = function (value) { - var ma - if (value.max < StdVal) { - ma = StdVal - } else { - ma = Math.ceil(value.max) - } - return ma - } - } else if (params.selected['姘ㄦ爱']) { - if (bzzList && bzzList.length > 0) { - for (let i = 0; i < bzzList.length; i++) { - if (bzzList[i].name == '姘ㄦ爱') { - StdVal = bzzList[i].bzhui - } - } - } - op.yAxis.max = function (value) { - var ma - if (value.max < StdVal) { - ma = StdVal - } else { - ma = Math.ceil(value.max) - } - return ma - } - } else if (params.selected['鎬荤7']) { - if (bzzList && bzzList.length > 0) { - for (let i = 0; i < bzzList.length; i++) { - if (bzzList[i].name == '鎬荤7') { - StdVal = bzzList[i].bzhui - } - } - } - op.yAxis.max = function (value) { - var ma - if (value.max < StdVal) { - ma = StdVal - } else { - ma = Math.ceil(value.max) - } - return ma - } - } - RealTimeChart.setOption(op) - }) */ - }, - getRtdb15s (unionTagCodeList, startTime, endTime, step, res) { - if (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(d[i].ReadTime) - data = { - name: name, - value: [newdate, d[i].TagValue] - } - - datalist = { - name: name, - data: [data] - } - - this.RealTimeDataList.push(datalist) - } else if (nameList.indexOf(name) < 0) { - nameList.push(name) - // bzh.push(d[i].StdValue); - - // var 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) - // bzh.push(d[i].StdValue); - - // var newdate = new Date(d[i].ReadTime) - - data = { - name: name, - value: [newdate, d[i].TagValue] - } - datalist = { - name: name, - data: [data] - } - // RealTimeDataList.push(datalist) - } else { - // var newdate = new Date(d[i].ReadTime) - data = { - name: name, - value: [newdate, d[i].TagValue] - } - for (var 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) - 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) - } - } - } - } - - // var divid = 'mycharteff_second' - // var title = name - var lengList = [] - var objTemp - - for (var l = 0; l < nameList.length; l++) { - var obj - var iconurl - if (nameList[l] === 'COD') { - iconurl = 'image://../assets/imgs/legend/SO2.png' - } else if (nameList[l] === '姘ㄦ爱') { - iconurl = 'image://../assets/imgs/legend/NOX.png' - } else if (nameList[l] === '鎬荤7') { - iconurl = 'image://../assets/imgs/legend/YanChen.png' - } else if (nameList[l] === '鎬绘爱') { - iconurl = 'image://../assets/imgs/legend/zongdan.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.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) - } - }, - // 瀹炴椂鏁版嵁璋冪敤閽╁瓙鍑芥暟 - IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) { - // 瀹氭椂鍣ㄥ嚱鏁� - this.interValHander = 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.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) - this.IntervalRealTimeDate(this.JSONTimeData.id, this.JSONTimeData.unionTagCodeList, this.BBZMAPPING) - }, 15000) - } - } -} -</script> - -<style scoped lang="less"> -.grid-content{ - font-size: 8px; - background-color: #2e4967; - text-align: center; - border-radius: 2px; - margin-right: 10px; - padding:0 10px -} -.infomation { - padding: 5px 10px; -} - -.form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search{ - display: flex; - padding:5px; - >div{margin-left: 10px} - .pickerMon{ - display: flex; - >div:first-child { - margin-right: 10px; - } - .pickerData{ - flex: 1; - display: flex; - >span{line-height: 22px} - .pickerTable { - margin-left: 3px; - } - } - } - /deep/.el-date-editor--datetime{ - width: 100%; - } - /deep/.el-input__inner{ - position: relative; - width:140px; - background-color: #2e4967; - color: #ffffff; - font-size: 12px; - height: 24px; - padding: 0; - border-color:#00fff6; - text-align: center; - //padding-left:20px ; - //padding: 0!important; - } - /deep/.el-input__icon{ - display: block; - width: 140px; - height: 22px; - line-height: 22px; - cursor: pointer; - font-size: 0; - } - .echatsInput{ - color: #00ffff; - background-color: #2e4967; - border: none; - border-radius: 6px; - width: 80px; - height: 22px; - text-align: center; - } - input::-webkit-calendar-picker-indicator { - opacity: 100; - } - .detailbtn{ - background-color:#2e4967; - text-align: center; - padding: 0 7px; - line-height: 24px; - border-radius: 4px; - margin-right: 6px; - } - .detailbtn:hover{ - box-shadow: 0 0 0.03rem #fff700 !important; - color:#fff700 !important; - cursor: pointer; - } - } - .el-dialog-div { - //height: 50vh!important; - overflow: auto; - //overflow: hidden; - } - - #echarts { - margin: 0; - padding: 0; - } -} -</style> diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js index 549d885..889bcc5 100644 --- a/src/components/LayerController/logic/WasteGas.js +++ b/src/components/LayerController/logic/WasteGas.js @@ -57,40 +57,10 @@ } this.clickListener = async (e) => { - // console.log(e) + console.log(e) this.animalService.pulseEffect(e.latlng) - // const dataValue = { - // StoragePlaceId: e.layer.options.test.StoragePlaceId - // } - // console.log(e.layer.options.test.EpsGisMonPointId) const title = e.layer.options.test.Name const res = e.layer.options.test - console.log(res) - // const GasOnlinedata = { - // onLineMonEmissPointId: '23', - // monItemId: '28,31', - // beginTime: '2020-04-06 15:13:20', - // endTime: '2020-04-07 15:13:20', - // dataType: '1' - // } - // const GasManualData = { - // companyId: '3900100145', - // labMonPointId: '219', - // beginTime: '2020-04-06 15:13:20', - // endTime: ' 2020-04-07 15:13:20' - // } - // const ManualData = await mapApi.getWasteGasManualData(GasManualData) - // console.log(ManualData) - // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata) - // // console.log(Mondata) - // const result = await mapApi.getWasteGasDetails(dataValue) - // console.log(result.Result.DataInfo) - // const PublicBounced = window.Vue.extend(publicBounced) - // const instance = new PublicBounced() - // // console.log(e.layer.options.test) - // instance.$mount() - // document.body.appendChild(instance.$el) - // instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi') window.$layer.open({ content: { content: WasteGasIndex, // 缁勪欢 @@ -101,9 +71,7 @@ }, title: title // 鏍囬 }) - // console.log(e.layer.options.totransferData.EpsGisMonPointId) this.setPanTo(e.latlng, 150) - // console.log(e.latlng) } // 涓嶅悓绫诲瀷鍥剧墖鍔犺浇 this.differentTypes = (ContrLevel) => { -- Gitblit v1.8.0