From 0d28d10afaa575546ad3235aac147b50ac8f8013 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期一, 19 四月 2021 17:43:09 +0800 Subject: [PATCH] 废水图表分化 --- /dev/null | 178 ------ src/components/BaseNav/WasteWater/RealData.vue | 942 ++++++++++++++++++++++++++++++++++ src/components/BaseNav/WasteWater/WasteWaterIndex.vue | 219 ++++++++ src/components/BaseNav/WasteWater/HourData.vue | 26 src/api/mapApi.js | 4 src/components/LayerController/logic/WasteWater.js | 89 ++- src/components/LayerController/logic/WasteSolid.js | 28 src/components/BaseNav/WasteWater/PublicTabs.vue | 51 + src/components/BaseNav/WasteWater/DayData.vue | 28 9 files changed, 1,296 insertions(+), 269 deletions(-) diff --git a/src/api/mapApi.js b/src/api/mapApi.js index 19a8423..515f8fb 100644 --- a/src/api/mapApi.js +++ b/src/api/mapApi.js @@ -48,10 +48,6 @@ getWasteWater (data) { return axios.get(mapUrl.getWasteWater, data) }, - // 搴熸按鐩戞祴鏁版嵁 - getWasteWaterMonitoring (data) { - return axios.get(mapUrl.getWasteWaterMonitoring, data) - }, // 搴熸按鐐规槑缁嗚〃 getWasteWaterMonitoringDetails (data) { return axios.get(mapUrl.getWasteWaterMonitoringDetails, data) diff --git a/src/components/BaseNav/WasteWater/DayData.vue b/src/components/BaseNav/WasteWater/DayData.vue index 2fe50e2..e497822 100644 --- a/src/components/BaseNav/WasteWater/DayData.vue +++ b/src/components/BaseNav/WasteWater/DayData.vue @@ -15,7 +15,7 @@ <div class="pickerData"> <span> 寮�濮嬫椂闂�:</span> <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeStart"> + <el-date-picker type="datetime" v-model="formInline.timeStart"> </el-date-picker> </span> </div> @@ -46,27 +46,27 @@ </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: 260px"> - <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: 260px">--> +<!-- <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' export default { name: 'DayData', components: { - PublicDetailedList + // PublicDetailedList }, data () { return { diff --git a/src/components/BaseNav/WasteWater/HourData.vue b/src/components/BaseNav/WasteWater/HourData.vue index 9baaa67..c5272eb 100644 --- a/src/components/BaseNav/WasteWater/HourData.vue +++ b/src/components/BaseNav/WasteWater/HourData.vue @@ -45,28 +45,28 @@ </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 dayjs from 'dayjs' export default { name: 'ECharts', components: { - PublicDetailedList + // PublicDetailedList }, data () { return { diff --git a/src/components/BaseNav/WasteWater/PublicTabs.vue b/src/components/BaseNav/WasteWater/PublicTabs.vue index a0df48a..fbf6c13 100644 --- a/src/components/BaseNav/WasteWater/PublicTabs.vue +++ b/src/components/BaseNav/WasteWater/PublicTabs.vue @@ -7,14 +7,13 @@ <div class="main"> <div class="main-matter"> <div> - <ul> - <!-- <li>鍦烘墍鍚嶇О:{{ setSolidWaste.StoragePlaceName }}</li>--> - <!-- <li>璐瓨鑳藉姏:{{ setSolidWaste.StorageQty }}(鍚�)</li>--> - <!-- <li>鍓╀綑璐瓨鑳藉姏:{{ setSolidWaste.SurplusFloorArea }}(鍚�)</li>--> - <!-- <li>鍗犲湴闈㈢Н(銕�):{{ setSolidWaste.DesignFloorArea }}(銕�)</li>--> - <!-- <li>鏈�杩戣串瀛樻棩鏈�:{{ setSolidWaste.StorageDate }}</li>--> - <!-- <li class="lastli"></li>--> - <li v-for="(item,index) in tabList" :key="index"></li> + <ul v-for="(item,index) in setWasteWater" :key="index"> + <li>鐩戞祴鐐瑰悕绉�:{{ item.Name }}</li> + <li>鐢熶骇鍗曚綅:{{ item.porltName }}</li> + <li>鎺掓斁绫诲瀷鍚嶇О:{{ item.MonTypeName }}</li> + <li>鎺掓斁鍘诲悜:{{ item.EmissDirecti }}</li> + <li>鎺у埗绾у埆鍚嶇О:{{ item.ContrLevelShowName }}</li> + <li>鍐�/澶栨帓鏀惧彛:{{ item.OrOutPortName }}</li> </ul> </div> </div> @@ -23,23 +22,34 @@ </template> <script> +import mapApi from '../../../api/mapApi' export default { - name: 'GasTable', - props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'], + name: 'WaterTabs', data () { return { - tabList: [] + setWasteWater: [] } }, + mounted () { + // this.$nextTick(() => { + // this.refsDataTabs() + // }) + }, methods: { - // async getTabsData () { - // // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟 - // const dataValue = { - // StoragePlaceId: e.layer.options.totransferData.StoragePlaceId - // } - // // 鍩烘湰淇℃伅 tabs - // const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) - // } + async refsDataTabs (data) { + // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟 + // const EpsGisMonPointId = { + // EpsGisMonPointId: data + // } + // 鍩烘湰淇℃伅 tabs + const result = await mapApi.getWasteWater() + // for (var i = 0; i < result.length; i++) { + // if (result[i].Name === data.title) { + // } + // } + this.setWasteWater = result.Result.DataInfo + // return result + } } } </script> @@ -81,9 +91,6 @@ padding: 0.03rem .5%; } - .lastli { - visibility: hidden - } } } } diff --git a/src/components/BaseNav/WasteWater/RealData.vue b/src/components/BaseNav/WasteWater/RealData.vue new file mode 100644 index 0000000..fffd525 --- /dev/null +++ b/src/components/BaseNav/WasteWater/RealData.vue @@ -0,0 +1,942 @@ +<!-- 搴熸按瀹炴椂鏁版嵁 --> +<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: 'ECharts', + 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/BaseNav/WasteWater/WasteWater.js b/src/components/BaseNav/WasteWater/WasteWater.js deleted file mode 100644 index 336d2eb..0000000 --- a/src/components/BaseNav/WasteWater/WasteWater.js +++ /dev/null @@ -1,178 +0,0 @@ -// 璇锋眰鏁版嵁 -import { requestWasteWater } from '@/api/request' -// 灞曠ず鍥剧墖 -// import defaultImg from '@assets/images/map-pages/basenav/Waste-water/fs_green.png' -// import Setting from '@assets/images/map-pages/basenav/Waste-water/fs_yellow.png' - -// 搴曞浘涓氬姟灞曠ず鐐� -class AddWasteWaterHelper { - constructor (options) { - this.map = options.map - this.L = window.L - this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map) - this.WasteWaterPopup = null - this.L.sgis = this.L.sgis || this.L - this.WasteWaterMarkersLabels = [] - this.pulseHeighLightMarker = null - } - - // 璇锋眰鏁版嵁 data 涓哄弬鏁帮紝 璇锋眰鍚庡彴鏁版嵁鏃� 鎼哄甫data鍙傛暟 - requestData (data) { - requestWasteWater(data).then(res => { - console.log(res) - this.DrawWasteWaterContent(res.Result.DataInfo) - // console.log(res) - }).catch(err => { - console.log(err) - }) - } - - // 鏍规嵁鑾峰彇鏁版嵁 鐢诲嚭 鍐呭 - DrawWasteWaterContent (data) { - // 鍥炬爣鏍峰紡鎵╁睍 - const WasteWaterIcon = this.WasteWaterIcon() - // //鍔犺浇鏁版嵁鍓嶅鏋滃瓨鍦ㄥ浘灞傜粍 閭d箞娓呴櫎鎺� - if (this.WasteWaterLayerGroup) { - this.WasteWaterLayerGroup.clearLayers() - } - for (let i = 0; i < data.length; i++) { - // 缁忕含搴� 浣嶇疆 - const positionX = data[i].Latitude - const positionY = data[i].Longitude - - // 鍒ゆ柇 缁忕含搴︿綅缃俊鎭槸鍚﹀瓨鍦� - // if (positionX != null && positionY != null) { - // 鐢ㄤ簬 鍒ゆ柇 => 鍒ゆ柇鏄惁灞曠ず鑴夊啿鏁堟灉 => temp(涓存椂) - const determineValueOne = data[i].LongDayWarning - const determineValueTwo = data[i].StorageQty - const positionArea = [positionX, positionY] - - // 鍥炬爣灞曠ず - const iconUrl = this.WasteWaterIconUrl(determineValueOne, determineValueTwo, positionArea) - const Icon = new WasteWaterIcon({ iconUrl: iconUrl }) - // let url = Icon.options.iconUrl - - // const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' }) // 甯︽樉绀哄姩鐢� - const marker = this.L.marker([positionX, positionY], { icon: Icon }) - - // marker.bindPopup(() => { - // return this.WasteWaterPopup.$el - // }, { - // className: 's-map-popup', - // minWidth: 1000, - // closeButton: true, - // autoClose: false - // }) - // 鍒掕繃鍑虹幇 灞曠ず鏁版嵁 - marker.bindTooltip(data[i].Name, { - permanent: true, - offset: [0, -16], - direction: 'top', - className: '' - }) - // 鐐瑰嚮浜嬩欢 - marker.on('click', (e) => { - try { - // console.log(e) - this.EffectOfPulse(e.target.getLatLng()) - this.WasteWaterPopup.setData(data[i]) - return this.WasteWaterPopup.$el - } catch (error) { - console.log(error) - } - }) - // 璁剧疆鍐呭娣诲姞鍒板浘灞� - this.WasteWaterLayerGroup.addLayer(marker) - // } - } - } - - // 搴熸按鎸夐挳鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃� - SetWasteWaterContent (config, containerPopup) { - this.WasteWaterPopup = containerPopup - } - - // 鍥炬爣鏍峰紡鎵╁睍 => 鍏夊湀 鍥炬爣鑴夊啿 - WasteWaterIcon () { - return this.L.Icon.extend({ - options: { - iconSize: [50, 50], - iconAnchor: [25, 25] - } - }) - } - - // 鏍规嵁绫诲瀷杩斿洖鍥剧墖鍔犺浇url - WasteWaterIconUrl (determineValueOne, determineValueTwo, position) { - let EffectOfChange - if (determineValueOne === 1 || determineValueTwo === 1) { - // EffectOfChange = defaultImg - this.EffectOfPulse(position, this.WasteWaterMarkersLabels, this.WasteWaterLayerGroup) - } else { - // EffectOfChange = Setting - } - return EffectOfChange - } - - // 鑴夊啿鏁堟灉璁剧疆瀹炵幇 - EffectOfPulse (position, markers, layerGroup) { - // // 鍖哄垎鐩存帴鎵ц 鍜屽垽鏂墽琛岀殑涓嶅悓鍖哄埆 - let differentColor = '' - if (markers) { - differentColor = '#ff0000' - } else { - differentColor = '#98FB98' - } - // 鍧愭爣鏁版嵁锛氭姤璀︿紶杩涙潵鐨勬槸鏁扮粍 / 鐐瑰嚮浼犺繘鏉ョ殑鏄痮bject - const FinalPosition = position instanceof Array ? { - lat: position[0], - lng: position[1] - } : position - // 鎻掍欢 鏁堟灉瀹炵幇 - const pulsingIcon = this.L.icon.pulse({ - iconSize: [20, 20], // 鎺у埗鍏夊湀澶у皬 - color: differentColor, - fillColor: ' ' - }) - if (markers) { - // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon })) - // this.L.layerGroup(markers).addLayer(layerGroup) - } else { - const picGroupMarker = new this.L.FeatureGroup() - this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker) - this.pulseHeighLightMarker = picGroupMarker.addTo(this.WasteWaterLayerGroup) - this.PulseCountSetting() - } - } - - // 瀵瑰浘鏍囪剦鍐� 杩涜set璁剧疆 // 楂樹寒鍥惧眰 - PulseCountSetting () { - const HeightLightTime = 5 - let PulseNumber = 5 - const pulseinterver = setInterval(() => { - if (PulseNumber > 0) { - PulseNumber-- - } else { - this.pulseClear(pulseinterver) - PulseNumber = HeightLightTime - } - }, 1000) - } - - // 鍦ㄦ墽琛屼笅涓墠娓呴櫎宸插瓨鍦ㄥ浘灞� - pulseClear (pulseinterver) { - clearInterval(pulseinterver) - pulseinterver = null - - if (this.WasteWaterLayerGroup) { - // this.WasteWaterLayerGroup.clearLayers() - } else { - this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map) - } - if ((this.pulseHeighLightMarker)) { - this.pulseHeighLightMarker.remove() - } - } -} - -export default AddWasteWaterHelper diff --git a/src/components/BaseNav/WasteWater/WasteWaterIndex.vue b/src/components/BaseNav/WasteWater/WasteWaterIndex.vue new file mode 100644 index 0000000..6140e1e --- /dev/null +++ b/src/components/BaseNav/WasteWater/WasteWaterIndex.vue @@ -0,0 +1,219 @@ +<template> + <public-sector> + <template v-slot:tabs> + <public-tabs ></public-tabs> + </template> + <template v-slot:table> + <div class="win"> + <div class="border_corner border_corner_left_top"></div> + <div class="border_corner border_corner_right_top"></div> + <div class="border_corner border_corner_left_bottom"></div> + <div class="border_corner border_corner_right_bottom"></div> + <ul class="tab"> + <li :class="active==0?'hover':''" @click='tabTaggle("RealData",0)'>瀹炴椂鏁版嵁</li> + <li :class="active==1?'hover':''" @click='tabTaggle("HourData",1)'>灏忔椂鏁版嵁</li> + <li :class="active==2?'hover':''" @click='tabTaggle("DayData",2)'>鏃ユ暟鎹�</li> + <li :class="active==3?'hover':''" @click='tabTaggle("Detail",3)'>浜哄伐鏁版嵁</li> + </ul> + <div class="legend" > + <span >姝e父</span> + <i style=" background: #4ec99c;"></i> + <span >棰勮</span> + <i style=" background: red;"></i> + <span >瓒呮爣</span> + <i style=" background: orange;"></i> + </div> + <component :is="currentTab" v-bind="$attrs" ref="Echats"></component> + </div> + </template> + <template v-slot:video> + <public-video></public-video> + </template> + </public-sector> +</template> + +<script> + +// import '@/utils/dragBoxes' +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: 'WasteWaterIndex', + props: ['EpsGisMonPointId'], + components: { + PublicSector, + PublicTabs, + PublicVideo, + RealData, + HourData, + DayData, + Detail + }, + mounted () { + this.$nextTick(() => { + this.refsData() + }) + }, + data () { + return { + currentTab: RealData, + active: '0', + displayContentTable: '', + flag: false, + tabTaggle (taggleMenu, num) { + this.currentTab = taggleMenu + this.active = num + } + } + }, + methods: { + refsData () { + // 璇锋眰鏁版嵁闇�瑕佹惡甯︾殑鍙傛暟 + // const data = this.EpsGisMonPointId + this.$refs.refsTabsData.refsDataTabs() + } + } +} +</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; + } + } +} +.win { + position: relative; + background:@background-color; + border: 0.8px solid #396d83; +} + +.border_corner { + z-index: 999; + position: absolute; + width: 10px; + height: 10px; + background: rgba(0, 0, 0, 0); + border: 1.5px solid #47d5ea; +} + +.border_corner_left_top { + top: 0; + left: 0; + border-right: none; + border-bottom: none; +} + +.border_corner_right_top { + top: 0; + right: 0; + border-left: none; + border-bottom: none; +} + +.border_corner_left_bottom { + bottom: 0; + left: 0; + border-right: none; + border-top: none; +} + +.border_corner_right_bottom { + bottom: 0; + right: 0; + border-left: none; + border-top: none; +} + +.tab { + display: flex; + border-bottom: 1px solid #396d83; + padding:0.02rem 0.04rem; +} + +.tab li { + background-color: #243a55; + line-height:0.15rem; + height: 0.15rem; + text-align: center; + border-radius: 5px; + margin-right: 0.04rem; + padding:0 0.04rem; +} +.tab li.hover, +.tab li:hover { + background-color: #0e639e; + color: #fff; + cursor: pointer; +} +.legend{ + position: absolute; + top:0.05rem; + right: 0; + display: flex; + justify-items: center; +} +.legend i { + display: block; + width: 0.2rem; + height: 0.09rem; + margin:0 0.1rem 0 0.05rem; + border-radius: 0.02rem; +} +.legend span{ + line-height: 0.09rem; + height: 0.09rem; + font-size: 0.06rem; +} + +</style> diff --git a/src/components/LayerController/logic/WasteSolid.js b/src/components/LayerController/logic/WasteSolid.js index 977eaac..3046b2d 100644 --- a/src/components/LayerController/logic/WasteSolid.js +++ b/src/components/LayerController/logic/WasteSolid.js @@ -11,6 +11,8 @@ // 浣跨敤灏佽鏂规硶 const AnimalService = require('../service/AnimalService').default +// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default + module.exports = function () { /** * 杩斿洖marker瀵硅薄鏁扮粍 @@ -32,7 +34,8 @@ // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁鐨勪笉鍚� 1.鎺ュ彛鎺ュ彛鏁版嵁鏉ヨ繘琛屾暟鎹殑鍒ゆ柇 2.鏍规嵁鏁版嵁绫诲瀷鐨勪笉鍚岋紝杩涜涓嶅悓绫诲瀷鐨勫浘鐗囨樉绀� const judgeValue = getSolidWasteData[i].StorageQty var iconUrl = this.differentTypes(judgeValue) - + // console.log(getSolidWasteData[i].Latitude, getSolidWasteData[i].Longitude) + // console.log(getSolidWasteData[i]) const marker = L.marker([positionX, positionY], { totransferData: getSolidWasteData[i], icon: L.icon({ @@ -41,6 +44,9 @@ iconAnchor: [15, 15] }) }) + // console.log(L.icon) + // console.log(iconUrl) + // console.log(marker) layer.addLayer(marker) } } @@ -69,17 +75,33 @@ // 鏍规嵁鐐瑰嚮涓嶅悓鏁版嵁 杩涜鎺ュ彛鐨勬暟鎹姹� this.requestSolidWasteData = async (e) => { + // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟 + // const dataValue = { + // StoragePlaceId: e.layer.options.totransferData.StoragePlaceId + // } + // console.log(e.layer.options.totransferData.Name) // 寮规鏍囬 const title = e.layer.options.totransferData.Name + // 鍩烘湰淇℃伅 tabs + // const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) + // 璇︾粏淇℃伅灞曠ず table + // const resultDetailed = await mapApi.getSolidWasteDetail(dataValue) + + // // 缁戝畾寮规瀹炰緥 + // const PublicBounced = window.Vue.extend(publicBounced) + // const instance = new PublicBounced().$mount() + // document.body.appendChild(instance.$el) + // // document.body.removeChild(instance.$el) + // // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹� + // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ this.setPanTo(e.latlng, 300) - - // console.log(e.layer.options.totransferData.StoragePlaceId) window.$layer.open({ content: { content: WasteSolidIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 + info: this.info, storagePlaceId: e.layer.options.totransferData.StoragePlaceId } }, diff --git a/src/components/LayerController/logic/WasteWater.js b/src/components/LayerController/logic/WasteWater.js index 2ed9ee0..2e1205e 100644 --- a/src/components/LayerController/logic/WasteWater.js +++ b/src/components/LayerController/logic/WasteWater.js @@ -1,10 +1,13 @@ /** * 搴熸按 */ +// import WasteWater from "../../table/components/WasteWater"; + const AnimalService = require('../service/AnimalService').default const mapApi = require('../../../api/mapApi').default // 寮圭獥鏁版嵁寮曡繘 -const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default +const WasteWaterIndex = require('@components/BaseNav/WasteWater/WasteWaterIndex').default +// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default const NormalImg = '/assets/images/map/wastewater/fs_bright_green.png' // 姝e父 const OffImg = '/assets/images/map/wastewater/fs_gray.png' // 鍋滆繍 @@ -34,11 +37,11 @@ const testValue = data[i].ContrLevel const iconUrl = this.differentTypes(testValue) const marker = L.marker([positionX, positionY], { - test: data[i], + totransferData: data[i], icon: L.icon({ iconUrl: iconUrl, iconSize: [35, 35], - iconAnchor: [18, 18] + iconAnchor: [15, 15] }) }) layer.addLayer(marker) @@ -46,42 +49,57 @@ } // 鍒嗗壊绾�------------------------------------------------------------------------------- - // this. this.bindTooltip = (layer) => { - return layer.options.test.Name + return layer.options.totransferData.Name } - this.clickListener = async (e) => { - // console.log(e) + this.clickListener = (e) => { + // 鐐瑰嚮marker鐨刾ulse()鍏夋尝 this.animalService.pulseEffect(e.latlng) - const dataValue = { - StoragePlaceId: e.layer.options.test.StoragePlaceId - } - const hourValue = { - onLineMonEmissPointId: '23', - monItemId: '28,31', - beginTime: '2020-04-06 15:13:20', - endTime: '2020-04-07 15:13:20', - dataType: '2' - } - const dateValue = { - onLineMonEmissPointId: '23', - monItemId: '28,31', - beginTime: '2020-04-06', - endTime: '2020-04-07', - dataType: '1' - } - const detailData = await mapApi.getWasteWaterMonitoringDetails(dataValue) // 鏄庣粏琛ㄨ繑鍥炴暟鎹� - const hourData = await mapApi.getQueryOnlineMonData(hourValue) // 灏忔椂鏁版嵁 - const dateData = await mapApi.getQueryOnlineMonData(dateValue) // 鏃ユ暟鎹� - // const drawback = await mapApi.getWasteWaterMonitoring() - const PublicBounced = window.Vue.extend(publicBounced) - const instance = new PublicBounced() - instance.setWaterData(e.layer.options.test, detailData.Result.DataInfo, hourData.Result.DataInfo, dateData.Result.DataInfo, 'feishui') - // console.log(e.layer.options.test) - instance.$mount() - document.body.appendChild(instance.$el) - this.setPanTo(e.latlng, 80) + /* 鐐瑰嚮鏁版嵁鐨勬帴鍙h姹� */ + this.requestWasteWaterData(e).then(e) + console.log() + } + this.requestWasteWaterData = async (e) => { + // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟 + // const dataValue = { + // StoragePlaceId: e.layer.options.test.StoragePlaceId + // } + // 寮规鏍囬 + const title = e.layer.options.totransferData.Name + console.log(e.layer.options) + // 鍩烘湰淇℃伅 tabs + // const resultBasic = await mapApi.getWasteWater(dataValue) + // 鍥捐〃淇℃伅灞曠ず echarts + // 瀹炴椂鏁版嵁 + // const resultReal = await mapApi.getDataItems(Value) + // 灏忔椂鏁版嵁 鍙� 鏄庣粏琛ㄦ暟鎹� + // const result = await mapApi.getQueryOnlineMonData(dataValue) + // 鏃ユ暟鎹� 鍙� 鏄庣粏琛ㄦ暟鎹� + // const result = await mapApi.getQueryOnlineMonData(dataValue) + // 浜哄伐鏁版嵁 + // const resultEchart = await mapApi.getQueryLabMonData(dataValue) + + // // 缁戝畾寮规瀹炰緥 + // const PublicBounced = window.Vue.extend(publicBounced) + // const instance = new PublicBounced().$mount() + // document.body.appendChild(instance.$el) + // // document.body.removeChild(instance.$el) + // // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹� + // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') + /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ + this.setPanTo(e.latlng, 150) + window.$layer.open({ + content: { + content: WasteWaterIndex, // 缁勪欢 + parent: this, // 鐖剁粍浠� + data: { // 浼犻�掔殑鍙傛暟 + info: this.info + // storagePlaceId: e.layer.options.totransferData.StoragePlaceId + } + }, + title: title // 鏍囬 + }) } // 鏍规嵁杩斿洖鍊肩殑涓嶅悓鏍囪涓嶅悓鍥剧墖 @@ -115,6 +133,7 @@ } return testChange } + // flayTo() 寮规鐨勫彲婊戝姩浜嬩欢 this.setPanTo = (pos, value) => { var position = pos position = window.map.latLngToLayerPoint(position) -- Gitblit v1.8.0