From 4f35a8b56c12315c82fd5bd136f32da2dcadc5e2 Mon Sep 17 00:00:00 2001 From: chenyabin <Chenab123!> Date: 星期二, 27 四月 2021 09:27:22 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/WasteWater/WasteWaterIndex.vue | 34 src/assets/css/map/map-panel-style.less | 57 + src/components/BaseNav/WasteGas/DayData.vue | 138 ++- src/components/LayerController/service/LayerFactory.js | 6 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 54 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js | 6 src/components/BaseNav/PublicChart.vue | 37 + src/Sgis.js | 14 src/components/BaseNav/WasteGas/HourData.vue | 103 +- /dev/null | 731 --------------------- src/components/BaseNav/WasteWater/WasteWaterRealChart.vue | 390 ++++------ src/components/BaseNav/WasteWater/WasteWaterDayChart.vue | 361 +++------- src/components/BaseNav/WasteGas/WasteGasRealChart.vue | 87 +- src/components/BaseNav/WasteGas/WasteGasIndex.vue | 6 14 files changed, 594 insertions(+), 1,430 deletions(-) diff --git a/src/Sgis.js b/src/Sgis.js index fda9cf2..d74d329 100644 --- a/src/Sgis.js +++ b/src/Sgis.js @@ -1,7 +1,7 @@ // 鍒濆鍖栨樉绀� -import MapConfig from '@/conf/MapConfig' +import MapConfig from './conf/MapConfig' import '@components/plugin/PathDashFlow' // 娴佸姩绾垮浘 -import DownLoad from '@components/plugin/DownLoad' +import DownLoad from './components/plugin/DownLoad' // 娴嬮噺 import '@components/plugin/leaflet-measure-path/leaflet-measure-path' @@ -14,11 +14,9 @@ import '@/components/plugin/magicMarker.css' import '@components/plugin/pulse/Pulse' // marker 澶栧湀娉� import '@components/plugin/pulse/Pulse.css' // marker 澶栧湀娉� css -import BasemapHelper from '@components/helpers/BasemapHelper' -import VectorLayerHelper from '@components/helpers/VectorLayerHelper' - -// import eventBus from '@/eventBus' -import eventBus from './eventBus' +import BasemapHelper from './components/helpers/BasemapHelper' +import VectorLayerHelper from './components/helpers/VectorLayerHelper' +// import eventBus from './eventBus' let map = null const L = window.L @@ -34,7 +32,7 @@ console.log(event, a, b) }) - eventBus.$emit('map-obj', map) + // eventBus.$emit('map-obj', map) window.map = map window.L = L diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 9a8ae8f..edb9f1c 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -731,3 +731,60 @@ background: @background-color;color:@color-highlight;border-color:@color-highlight } +/****************************搴熸按寮规鍏叡鏍峰紡***/ +.echarts-box { + .tab-scroll { + display: flex; + align-items: center; + justify-content: space-between; + + .time-select { + cursor: pointer; + padding: 5px; + border: 1px solid #2b87c8; + border-radius: 4px; + text-align: center; + color: #fff; + font-size: 11px; + width: 280px; + } + } + + .echarts-form { + height: 0.3rem; + line-height: 0.3rem; + + .demonstration { + color: #00fff6; + font-size: 12px; + margin-left: 10px; + } + + .el-input__inner { + height: 0.15rem; + background-color: #2e4967; + color: #fff; + font-size: 12px; + padding: 0; + border-color: #00fff6; + text-align: center; + } + + .el-button { + margin: 0 15px; + width: 0.3rem; + height: 0.15rem; + display: inline-block; + background-color: #2e4967; + color: #fff; + font-size: 12px; + padding: 0; + border-color: #00fff6; + text-align: center; + } + } + + .el-icon-time:before { + content: " "; + } +} \ No newline at end of file diff --git a/src/components/BaseNav/PublicChart.vue b/src/components/BaseNav/PublicChart.vue new file mode 100644 index 0000000..bc858e5 --- /dev/null +++ b/src/components/BaseNav/PublicChart.vue @@ -0,0 +1,37 @@ +<template> + <!-- <div class="public-chart">--> + <div style="width:800px;height:200px;" ref="publicChart"></div> + <!-- </div>--> +</template> + +<script> +export default { + name: 'PublicChart', + props: { + propsData: { + type: Object, + default: () => { + return {} + } + } + }, + data () { + return { + publicChart: null + } + }, + mounted () { + this.$nextTick(() => { + this.publicChart = this.$echarts.init(this.$refs.publicChart) + this.publicChart.clear() + this.publicChart.setOption(this.propsData) + window.onresize = this.publicChart.resize() + }) + }, + methods: {} +} +</script> + +<style lang="less" scoped> + +</style> diff --git a/src/components/BaseNav/WasteGas/DayData.vue b/src/components/BaseNav/WasteGas/DayData.vue index 74174c7..4c50dcb 100644 --- a/src/components/BaseNav/WasteGas/DayData.vue +++ b/src/components/BaseNav/WasteGas/DayData.vue @@ -218,14 +218,16 @@ for (var l = 0; l < nameList.length; l++) { var obj var iconurl - if (nameList[l] === 'COD') { + if (nameList[l] === '浜屾哀鍖栫~') { iconurl = 'image://../assets/imgs/legend/SO2.png' - } else if (nameList[l] === '姘ㄦ爱') { + } else if (nameList[l] === '姘哀鍖栫墿') { iconurl = 'image://../assets/imgs/legend/NOX.png' - } else if (nameList[l] === '鎬荤7') { + } else if (nameList[l] === '鐑熷皹') { iconurl = 'image://../assets/imgs/legend/YanChen.png' - } else if (nameList[l] === '鎬绘爱') { - iconurl = 'image://../assets/imgs/legend/zongdan.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' } @@ -267,21 +269,21 @@ for (let j = 0; j < nameList.length; j++) { var zdcbcolor, zxcolor - if (nameList[j] === 'COD') { + if (nameList[j] === '浜屾哀鍖栫~') { zdcbcolor = 'red' zxcolor = '#fff21c' - } else if (nameList[j] === '姘ㄦ爱') { + } else if (nameList[j] === '姘哀鍖栫墿') { zdcbcolor = 'red' zxcolor = '#00B0F0' } else if (nameList[j] === '鎬荤7') { zdcbcolor = 'red' zxcolor = '#f48183' - } else if (nameList[j] === '鎬绘爱') { + } else if (nameList[j] === '搴熸皵娴侀噺') { zdcbcolor = 'red' - zxcolor = '#d9f2f4' + zxcolor = '#70ff49' } else { zdcbcolor = 'red' - zxcolor = '#9ACD32' + zxcolor = '#d9f2f4' } let sdata = [] @@ -326,8 +328,10 @@ } } + const bzzList = this.bzzList + for (let i = 0; i < ydatas.length; i++) { - // const zdcbcolor = ydatas[i].zdcbcolor + const zdcbcolor = ydatas[i].zdcbcolor const bzz = ydatas[i].bzz let obj if (bzz == null) { @@ -337,31 +341,33 @@ symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� yAxisIndex: 1, - // 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 - // } - // } - // }, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + let biaozhuiz + for (let 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' + } else { + return '#33c95f' + } + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 5 + }, + borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + }, type: 'line', data: ydatas[i].data } @@ -371,33 +377,33 @@ symbol: 'circle', // 鎶樼偣褰㈢姸 symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� - // 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 - // } - // } - // }, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + let biaozhuiz + for (let 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' + } else { + return '#33c95f' + } + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 5 + }, + borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + }, type: 'line', data: ydatas[i].data, markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 @@ -471,8 +477,8 @@ 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>' + } else if (seriesName === '搴熸皵娴侀噺') { + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#70ff49;"></span>' } s += maker + seriesName + ':' + valueFliter + '<br />' } @@ -581,7 +587,7 @@ type: 'value', name: dataUnit, max: function (value) { - const ma = value.max > 120 ? value.max : 120 + const ma = value.max > 12 ? value.max : 120 return parseInt(ma) }, axisLabel: { diff --git a/src/components/BaseNav/WasteGas/HourData.vue b/src/components/BaseNav/WasteGas/HourData.vue index a50c62b..170357c 100644 --- a/src/components/BaseNav/WasteGas/HourData.vue +++ b/src/components/BaseNav/WasteGas/HourData.vue @@ -23,7 +23,7 @@ </div> <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div> </div> -<!-- 鏄庣粏寮规--> + <!-- 鏄庣粏寮规--> <el-dialog :visible.sync="showSchedule" :modal="false" v-dialogDrag @@ -276,7 +276,7 @@ iconurl = 'image://../assets/imgs/legend/grn.png' } else if (nameList[l] === '娓╁害') { iconurl = 'image://../assets/imgs/legend/WenDu.png' - } else { + } else if (nameList[l] === '搴熸皵娴侀噺') { iconurl = 'image://../assets/imgs/legend/VOCs.png' } @@ -314,18 +314,15 @@ if (nameList[j] === '浜屾哀鍖栫~') { zdcbcolor = 'red' zxcolor = '#fff21c' - } else if (nameList[j] === '姘ㄦ爱') { + } else if (nameList[j] === '姘哀鍖栫墿') { zdcbcolor = 'red' zxcolor = '#00B0F0' } else if (nameList[j] === '鐑熷皹') { zdcbcolor = 'red' zxcolor = '#f48183' - } else if (nameList[j] === '娓╁害') { + } else if (nameList[j] === '搴熸皵娴侀噺') { zdcbcolor = 'red' - zxcolor = '#F206FF' - } else { - zdcbcolor = 'red' - zxcolor = '#9ACD32' + zxcolor = '#8fdc6e' } const ydata = { name: nameList[j], @@ -358,6 +355,8 @@ dataUnit = '姘旈噺(m鲁/h)' } + const bzzList = this.exhbzzList + const serLists = [] for (let j = 0; j < ydatas.length; j++) { const len = ydatas[j].data.length @@ -369,7 +368,7 @@ } for (let i = 0; i < ydatas.length; i++) { - // const zdcbcolor = ydatas[i].zdcbcolor + const zdcbcolor = ydatas[i].zdcbcolor const bzz = ydatas[i].bzz let obj if (bzz == null) { @@ -379,31 +378,33 @@ symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� yAxisIndex: 1, - // 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 - // } - // } - // }, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + let biaozhuiz + for (let 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' + } else { + return '#33c95f' + } + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 5 + }, + borderColor: ydatas[i].zxcolor, // 鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + }, type: 'line', data: ydatas[i].data } @@ -415,21 +416,21 @@ smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� 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' - // } - // }, + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + let biaozhuiz + for (let 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' + } else { + return '#33c95f' + } + }, lineStyle: { // 鎶樼嚎鐨勯鑹� color: ydatas[i].zxcolor, width: 5 @@ -513,7 +514,7 @@ 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 { + } else if (seriesName === '搴熸皵娴侀噺') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' } s += maker + seriesName + ':' + valueFliter + '<br />' @@ -623,7 +624,7 @@ type: 'value', name: dataUnit, max: function (value) { - const ma = value.max > 120 ? value.max : 120 + const ma = value.max > 12 ? value.max : 12 return parseInt(ma) }, axisLabel: { diff --git a/src/components/BaseNav/WasteGas/WasteGasIndex.vue b/src/components/BaseNav/WasteGas/WasteGasIndex.vue index 21b5661..183cc28 100644 --- a/src/components/BaseNav/WasteGas/WasteGasIndex.vue +++ b/src/components/BaseNav/WasteGas/WasteGasIndex.vue @@ -16,13 +16,13 @@ <div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>鏃ユ暟鎹�</div> <div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>浜哄伐鐩戞祴鏁版嵁</div> </div> - <div class="navigation-right"> + <div class="navigation-right" v-if="active !== 3"> <p>姝e父</p> <i style=" background: #4ec99c;"></i> <p>棰勮</p> - <i style=" background: orange;"></i> + <i style=" background: #fc9303;"></i> <p>瓒呮爣</p> - <i style=" background: red;"></i> + <i style=" background: #fc1d04;"></i> </div> </div> <component :is="currentTab" ref="RealData"></component> diff --git a/src/components/BaseNav/WasteGas/WasteGasRealChart.vue b/src/components/BaseNav/WasteGas/WasteGasRealChart.vue index 8491fa3..de4951a 100644 --- a/src/components/BaseNav/WasteGas/WasteGasRealChart.vue +++ b/src/components/BaseNav/WasteGas/WasteGasRealChart.vue @@ -22,16 +22,16 @@ <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option> </el-select> <el-button @click="querySearch">鏌ヨ</el-button> - <el-button>鏄庣粏琛�</el-button> </div> <div class="echarts-chart"> <div style="width:5rem;height:1.5rem;" ref="echarts"></div> + <!-- <public-chart :propsData="propsData"></public-chart>--> </div> </div> </template> <script> - +// import PublicChart from '../PublicChart' import PublicDataStandard from '../PublicDataStandard' import mapApi from '../../../api/mapApi' import 'dayjs/locale/es' @@ -40,6 +40,7 @@ export default { name: 'WasteGasRealChart', components: { + // PublicChart, PublicDataStandard }, data () { @@ -86,6 +87,7 @@ val: null } }], + propsData: {}, // 寮�濮� /缁撴潫 鏃堕棿 鍜岄噰鏍风偣鍊肩殑缁戝畾鍊兼暟鎹� formData: { @@ -148,9 +150,9 @@ const nameListTemp = [ { 'TJIP45.y2h508CEMS01NOX': '姘哀鍖栫墿', - 'TJIP45.y2h508CEMS01SO2': '鐑熷皹', - 'TJIP45.y2h508CEMS01F': '浜屾哀鍖栫7', - 'TJIP45.y2h508CEMS01PM': 'ph' + 'TJIP45.y2h508CEMS01SO2': '姘у惈閲�', + 'TJIP45.y2h508CEMS01F': '娓╁害', + 'TJIP45.y2h508CEMS01PM': '搴熸皵娴侀噺' // 'TJIP45.lscl2tb552AI10710': '浜屾哀鍖栫⒊' } ] @@ -223,15 +225,15 @@ for (let l = 0; l < nameList.length; l++) { let obj let iconUrl - if (nameList[l] === 'ph') { + if (nameList[l] === '娓╁害') { 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] === '浜屾哀鍖栫⒊') { + } else if (nameList[l] === '姘у惈閲�') { + iconUrl = 'image://../assets/imgs/legend/VOCs.png' + } else if (nameList[l] === '搴熸皵娴侀噺') { iconUrl = 'image://../assets/imgs/legend/VOCs.png' } @@ -265,7 +267,7 @@ for (let j = 0; j < nameList.length; j++) { let zdcbcolor, zxcolor - if (nameList[j] === 'ph') { + if (nameList[j] === '娓╁害') { zdcbcolor = 'red' zxcolor = '#f206ff' } else if (nameList[j] === '鐑熷皹') { @@ -274,23 +276,21 @@ } else if (nameList[j] === '姘哀鍖栫墿') { zdcbcolor = 'red' zxcolor = '#00B0F0' - } else if (nameList[j] === '浜屾哀鍖栫⒊') { + } else if (nameList[j] === '搴熸皵娴侀噺') { zdcbcolor = 'red' zxcolor = '#9ACD32' - } else if (nameList[j] === '浜屾哀鍖栫7') { + } else if (nameList[j] === '姘у惈閲�') { zdcbcolor = 'red' - zxcolor = '#f48183' + zxcolor = '#008000' } let ydata // 涓存椂鏁版嵁 - const BBZMAPPING = [ - { - 姘哀鍖栫墿: 35, - 鐑熷皹: 9, - 浜屾哀鍖栫7: 15, - ph: 0.3 - } - ] + const BBZMAPPING = { + 姘哀鍖栫墿: 30, + 鐑熷皹: 9, + 浜屾哀鍖栫7: 15, + ph: 0.3 + } for (let m = 0; m < this.EXHRealTimeDataList.length; m++) { let stdValue = null if (this.EXHRealTimeDataList[m].name === nameList[j]) { @@ -298,9 +298,14 @@ // i++ // stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name] // } - BBZMAPPING.forEach(item => { + // BBZMAPPING.forEach(item => { + // stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name] + // }) + for (const p in BBZMAPPING) { + // console.log('p' + p) + this.a = p stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name] - }) + } ydata = { name: nameList[j], @@ -335,6 +340,9 @@ const zdcbcolor = ydatas[i].zdcbcolor const bz = ydatas[i].bzz let obj + let biaozhuiz + const exhbzzList = this.exhbzzList + // console.log(exhbzzList) if (bz) { obj = { name: ydatas[i].name, @@ -344,14 +352,14 @@ itemStyle: { normal: { color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - for (let i = 0; i < this.exhbzzList.length; i++) { - if (this.exhbzzList[i].name === c.seriesName) { - this.biaozhuiz = this.exhbzzList[i].bzhui + for (let i = 0; i < exhbzzList.length; i++) { + if (exhbzzList[i].name === c.seriesName) { + biaozhuiz = exhbzzList[i].bzhui } } - if (c.value[1] > this.biaozhuiz) { + if (c.value[1] > biaozhuiz) { return zdcbcolor - } else if (c.value[1] > this.biaozhuiz * 0.9) { + } else if (c.value[1] > biaozhuiz * 0.9) { return '#FFA500' } else { return '#33c95f' @@ -399,15 +407,14 @@ itemStyle: { normal: { color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // let biaozhuiz - // for (let i = 0; i < this.exhbzzList.length; i++) { - // if (this.exhbzzList[i].name === c.seriesName) { - // this.biaozhuiz = this.exhbzzList[i].bzhui - // } - // } - if (c.value[1] > 20) { + for (let 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] > 15 * 0.9) { + } else if (c.value[1] > biaozhuiz * 0.8) { return '#FFA500' } else { return '#33c95f' @@ -466,7 +473,7 @@ let maker = params[i].marker let colo = '' switch (seriesName) { - case 'ph': + case '娓╁害': colo = '#f206ff' break case '姘哀鍖栫墿': @@ -475,11 +482,11 @@ case '鐑熷皹': colo = '#e0ffff' break - case '浜屾哀鍖栫⒊': + case '搴熸皵娴侀噺': colo = '#9ACD32' break - case '浜屾哀鍖栫7': - colo = '#f48183' + case '姘у惈閲�': + colo = '#008000' break default: colo = '' diff --git a/src/components/BaseNav/WasteWater/HourData.vue b/src/components/BaseNav/WasteWater/HourData.vue deleted file mode 100644 index b48393f..0000000 --- a/src/components/BaseNav/WasteWater/HourData.vue +++ /dev/null @@ -1,731 +0,0 @@ -<template> - <div id="Tab"> - <div class="tab-scroll"> - <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> - <span class="time-select">{{ formInline.timeStart }}鏃垛�斺�攞{ formInline.timeEnd }}鏃�</span> - </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" value-format="yyyy-MM-dd HH" v-model="formInline.timeStart"> - </el-date-picker> - </span> - </div> - <div class="pickerData"> - <span>缁撴潫鏃堕棿:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" value-format="yyyy-MM-dd HH" v-model="formInline.timeEnd"> - </el-date-picker> - </span> - </div> - </div> - <div class="detailbtn">鏌ヨ</div> - <div class="detailbtn">鏄庣粏琛�</div> - </div> - <div class="boxChart"> - <div style="width: 5rem;height:1.5rem;" id="echarts" ref="echartsHour"></div> - </div> - </div> - </div> -</template> - -<script> -import PublicDataStandard from '../PublicDataStandard' -import dayjs from 'dayjs' -import mapApi from '@/api/mapApi' - -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 - } - }], - formInline: { - timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'), - timeEnd: dayjs().format('YYYY-MM-DD HH') - }, - // timeEnd: dayjs().format('YYYY-MM-DD HH'), - // timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'), - chart: null, - jcdID: 1, - dataType: 2, - bzz: null, - bzzList: [], - bz: '' - } - }, - mounted () { - this.draw24Chart() - }, - methods: { - async draw24Chart () { - // 鐢ㄤ簬鎺ュ彛鏁版嵁璇锋眰鐨勫弬鏁� 寮�濮�/缁撴潫鏃堕棿 || 鍙�夋嫨鏌ヨ鐨勫紑濮�/缁撴潫鏃堕棿 - // this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH') - // this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH') - const data = { - onLineMonEmissPointId: 23, - monItemId: 28, - beginTime: this.formInline.timeStart, - endTime: this.formInline.timeEnd, - dataType: this.dataType - } - const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo - this.get24HourDate(result) - }, - // 缁樺埗灏忔椂鏁版嵁 - get24HourDate (res) { - if (res.length > 0) { - const d = res - const nameList = [] // 瀛樻斁鍥句緥 - const dateList = [] // 瀛樻斁鏃堕棿 - let dataList = [] // 瀛樻斁鏁版嵁 - let data = [] - const bzh = [] - // wrwIDS = [] - for (let i = 0; i < d.length; i++) { - if (d[i].MonItemId === '29') { - continue - } - - const MonTimeStr = d[i].MonTimeStr - - // getWRW(d[i]) - - 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) + '鏃�' - } - } - } - - if (nameList.length === 0) { - nameList.push(d[i].PoltmtrlName.trim()) - dateList.push(strDate) - /* let data=new Array(); - data.push(d.MonQty); */ - 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) - } - // data.push() - 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 divid = 'mycharteff' - const title = name - - const lengList = [] - let objTemp - - for (let l = 0; l < nameList.length; l++) { - let obj - let 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) - - const legend = lengList - const xdata = dateList.reverse() - const ydatas = [] - - for (let j = 0; j < nameList.length; j++) { - let zdcbcolor, zxcolor - if (nameList[j] === 'COD') { - zdcbcolor = 'red' - zxcolor = '#fff21c' - } else if (nameList[j] === '姘ㄦ爱') { - zdcbcolor = 'red' - zxcolor = '#00B0F0' - } else if (nameList[j] === '鎬荤7') { - zdcbcolor = 'red' - zxcolor = '#f48183' - } else if (nameList[j] === '搴熸按娴侀噺') { - zdcbcolor = 'red' - zxcolor = '#9ACD32' - } else { - zdcbcolor = 'red' - zxcolor = '#d9f2f4' - } - const ydata = { - name: nameList[j], - data: dataList[j], - zdcbcolor: zdcbcolor, - zxcolor: zxcolor, - bzz: bzh[j] - } - - this.bzz = { - name: nameList[j], - bzhui: bzh[j] - } - this.bzzList.push(this.bzz) - ydatas.push(ydata) - } - console.log(ydatas) - - const yname = '娴撳害(mg/l)' - - this.effChartShow(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) - } - }, - effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) { - this.chart = this.$echarts.init(this.$refs.echartsHour) - console.log(ydatas) - // this.chart.clear() - let dataUnit = '' - if (datatype === 1) { - dataUnit = '娴侀噺(m鲁/d)' - } else { - dataUnit = '娴侀噺(m鲁/h)' - } - const serLists = [] - for (let i = 0; i < ydatas.length; i++) { - // let zdcbcolor = ydatas[i].zdcbcolor - const bz = ydatas[i].bzz - let obj - if (bz) { - obj = { - name: ydatas[i].name, - symbol: 'circle', // 鎶樼偣褰㈢姸 - symbolSize: 10, // 澶у皬 - smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� - itemStyle: { - normal: { - // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // // let biaozhuiz - // let bzlist = this.bzzList - // for (let i = 0; i < this.bzzList.length; i++) { - // if (this.bzzList[i].name === c.seriesName) { - // this.bz = this.bzzList[i].bzhui - // } - // } - // if (c.value > this.bz) { - // return zdcbcolor - // } else if (c.value > this.bz * 0.9) { - // return '#FFA500' - // } else { - // return '#33c95f' - // } - // }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: ydatas[i].zxcolor, - width: 5 - }, - 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: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� - yAxisIndex: 1, - // itemStyle: { - // normal: { - // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // // let biaozhuiz - // for (let i = 0; i < this.bzzList.length; i++) { - // if (this.bzzList[i].name === c.seriesName) { - // this.bz = this.bzzList[i].bzhui - // } - // } - // if (c.value > 9999999) { - // return zdcbcolor - // } else { - // return '#33c95f' - // } - // }, - // lineStyle: { // 鎶樼嚎鐨勯鑹� - // color: ydatas[i].zxcolor, - // width: 5 - // }, - // borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� - // label: { // 鏄剧ず鍊� - // show: false - // } - // } - // }, - type: 'line', - data: ydatas[i].data - } - } - 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 - - // let valueFliter = formatter(value) - const valueFliter = parseFloat(value).toFixed(2) - - let maker = params[i].marker - if (seriesName === 'COD') { - 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 === '鎬荤7') { - 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:#9ACD32;"></span>' - } else { - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>' - } - s += maker + seriesName + ':' + valueFliter + '<br />' - } - return s - } - }, - toolbox: { // 鎵撳嵃绛夊伐鍏� - show: false, - feature: { - saveAsImage: {} - } - }, - grid: { // 缃戞牸 - top: '20%' - // left: '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: 'category', - boundaryGap: false, - axisLabel: { // x杞村叏閮ㄦ樉绀� - // rotate: 20, - // 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) { - // let max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� - // if (bzzList && bzzList.length > 0) { - // $.each(bzzList, function (index, item) { - // max_val_list.push(item.bzhui) - // }) - // } - // max_val_list = max_val_list.sort(function (a, b) { - // return a - b - // }) // 鎺掑簭 - // let 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: { - 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.chart.setOption(option) - window.onresize = this.chart.resize - } - } -} -</script> - -<style scoped lang="less"> -.tab-scroll { - display: flex; - align-items: center; - justify-content: space-between; - - .time-select { - //margin: 0 10px; - cursor: pointer; - padding: 5px; - border: 1px solid #2b87c8; - border-radius: 4px; - text-align: center; - color: #fff; - font-size: 11px; - width: 280px; - } -} - -.grid-content { - font-size: 8px; - background-color: #2e4967; - text-align: center; - border-radius: 2px; - margin-right: 10px; - padding: 0 10px - //>i{ - // color: #f00; - // } -} - -.infomation { - padding: 5px 10px; -} - -.form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search { - display: flex; - padding: 15px 0; - - > div { - margin-left: 30px - } - - .pickerMon { - display: flex; - - > div:first-child { - margin-right: 10px; - } - - .pickerData { - flex: 1; - display: flex; - - > span { - line-height: 22px; - margin-right: 15px; - } - - .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; - 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; - 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 { - overflow: auto; - } - - #echarts { - margin: 0; - padding: 0; - } -} -</style> diff --git a/src/components/BaseNav/WasteWater/DayData.vue b/src/components/BaseNav/WasteWater/WasteWaterDayChart.vue similarity index 63% rename from src/components/BaseNav/WasteWater/DayData.vue rename to src/components/BaseNav/WasteWater/WasteWaterDayChart.vue index d087100..56bf366 100644 --- a/src/components/BaseNav/WasteWater/DayData.vue +++ b/src/components/BaseNav/WasteWater/WasteWaterDayChart.vue @@ -1,31 +1,31 @@ -<!-- 鏃ユ暟鎹� --> <template> - <div id="Tab"> + <div class="echarts-box"> <div class="tab-scroll"> <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> - <span class="time-select">{{ formInline.timeStart }}鏃モ�斺�攞{ formInline.timeEnd }}鏃�</span> + <span class="time-select">{{ formData.timeStart }}鏃モ�攞{ formData.timeEnd }}鏃�</span> </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" value-format="yyyy-MM-dd" v-model="formInline.timeStart"></el-date-picker> - </span> - </div> - <div class="pickerData"> - <span>缁撴潫鏃堕棿:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" value-format="yyyy-MM-dd" v-model="formInline.timeEnd"></el-date-picker> - </span> - </div> - </div> - <div class="detailbtn hover-bottom">鏌ヨ</div> - <div class="detailbtn hover-bottom">鏄庣粏琛�</div> - </div> - <div style="width:5rem;height:1.5rem;" id="echarts" ref="echartsday"> - </div> + <div class="echarts-form"> + <span class="demonstration">寮�濮嬫椂闂达細</span> + <el-date-picker + v-model="formData.timeStart" + value-format="yyyy-MM-dd" + type="datetime"> + </el-date-picker> + <span class="demonstration">缁撴潫鏃堕棿锛�</span> + <el-date-picker + v-model="formData.timeEnd" + value-format="yyyy-MM-dd" + type="datetime"> + </el-date-picker> + <span class="demonstration">閲囨牱鐐规暟锛�</span> + <el-select v-model="formData.region" placeholder="璇烽�夋嫨" style="width: 80px"> + <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option> + </el-select> + <el-button @click="querySearch()">鏌ヨ</el-button> + <el-button>鏄庣粏琛�</el-button> + </div> + <div class="echarts-chart"> + <div style="width:5rem;height:1.5rem;" ref="echartsDay"></div> </div> </div> </template> @@ -36,9 +36,8 @@ import mapApi from '@/api/mapApi' export default { - name: 'DayData', + name: 'WasteWaterDayChart', components: { - // PublicDetailedList PublicDataStandard }, data () { @@ -85,13 +84,12 @@ val: null } }], - formInline: { - region: '', + formData: { + region: '25', + regionList: [25, 50, 75, 100], timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'), timeEnd: dayjs().format('YYYY-MM-DD') }, - timeStart: '', - timeEnd: '', chart: null, dataType: 1, jcdID: 1, @@ -105,15 +103,15 @@ }) }, methods: { + querySearch () { + + }, async draw24Chart () { - // 鐢ㄤ簬鎺ュ彛鏁版嵁璇锋眰鐨勫弬鏁� 寮�濮�/缁撴潫鏃堕棿 || 鍙�夋嫨鏌ヨ鐨勫紑濮�/缁撴潫鏃堕棿 - this.formInline.timeEnd = dayjs().format('YYYY-MM-DD') - this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD') const data = { onLineMonEmissPointId: 23, monItemId: 28, - beginTime: this.formInline.timeStart, - endTime: this.formInline.timeEnd, + beginTime: this.formData.timeStart, + endTime: this.formData.timeEnd, dataType: this.dataType } const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo @@ -129,18 +127,14 @@ let data const bzh = [] - // 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 d2=d1[2].split(' '); let strDate if (d1[1] > 9) { // if(d2[0]>9){ @@ -178,7 +172,7 @@ if (dateList.indexOf(strDate) < 0) { dateList.push(strDate) } - for (var j = 0; j < dataList.length; j++) { + for (let j = 0; j < dataList.length; j++) { if (d[i].PoltmtrlName.trim() === dataList[j].name) { dataList[j].data.push(d[i].MonQty) } @@ -187,16 +181,12 @@ } // 澶勭悊鏁版嵁缁撴潫 - var divid = 'mychart1eff' + const lengList = [] + let objTemp - var title = name - - var lengList = [] - var objTemp - - for (var l = 0; l < nameList.length; l++) { - var obj - var iconurl + for (let l = 0; l < nameList.length; l++) { + let obj + let iconurl if (nameList[l] === 'COD') { iconurl = 'image://../assets/imgs/legend/SO2.png' } else if (nameList[l] === '姘ㄦ爱') { @@ -245,7 +235,7 @@ const ydatas = [] for (let j = 0; j < nameList.length; j++) { - var zdcbcolor, zxcolor + let zdcbcolor, zxcolor if (nameList[j] === 'COD') { zdcbcolor = 'red' zxcolor = '#fff21c' @@ -282,58 +272,59 @@ } const yname = '娴撳害(mg/l)' - this.effChartShow(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) + this.effChartShow(legend, xdata, ydatas, yname, this.jcdID, this.datatype) } }, - effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) { - this.chart = this.$echarts.init(this.$refs.echartsday) + effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) { + this.chart = this.$echarts.init(this.$refs.echartsDay) + this.chart.clear() // console.log(this.chart) this.chart.clear() - var dataUnit = '' + let dataUnit = '' if (datatype === 1) { dataUnit = '娴侀噺(m鲁/d)' } else { dataUnit = '娴侀噺(m鲁/h)' } - var serLists = [] - for (var i = 0; i < ydatas.length; i++) { - // var zdcbcolor = ydatas[i].zdcbcolor - var bz = ydatas[i].bzz - var obj + const bzzList = this.bzzList + const serLists = [] + for (let i = 0; i < ydatas.length; i++) { + const zdcbcolor = ydatas[i].zxcolor + const bz = ydatas[i].bzz + let obj if (bz) { obj = { name: ydatas[i].name, symbol: 'circle', // 鎶樼偣褰㈢姸 symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� - // itemStyle: { - // normal: { - // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // // var biaozhuiz - // let bzlist = this.bzzList - // for (let i = 0; i < this.bzzList.length; i++) { - // if (this.bzzList[i].name === c.seriesName) { - // this.bz = this.bzzList[i].bzhui - // } - // } - // if (c.value > this.bz) { - // return zdcbcolor - // } else if (c.value > this.bz * 0.9) { - // return '#FFA500' - // } else { - // return '#33c95f' - // } - // }, - // lineStyle: { // 鎶樼嚎鐨勯鑹� - // color: ydatas[i].zxcolor, - // width: 5 - // }, - // borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� - // label: { // 鏄剧ず鍊� - // show: false - // } - // } - // }, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + let biaozhuiz + for (let 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' + } else { + return '#33c95f' + } + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 5 + }, + borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + }, type: 'line', data: ydatas[i].data, markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 @@ -363,38 +354,40 @@ symbolSize: 10, // 澶у皬 smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� yAxisIndex: 1, - // itemStyle: { - // normal: { - // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // // var biaozhuiz - // for (let i = 0; i < this.bzzList.length; i++) { - // if (this.bzzList[i].name === c.seriesName) { - // this.bz = this.bzzList[i].bzhui - // } - // } - // if (c.value > 9999999) { - // return zdcbcolor - // } else { - // return '#33c95f' - // } - // }, - // lineStyle: { // 鎶樼嚎鐨勯鑹� - // color: ydatas[i].zxcolor, - // width: 5 - // }, - // borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� - // label: { // 鏄剧ず鍊� - // show: false - // } - // } - // }, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + let biaozhuiz + for (let 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' + } else { + return '#33c95f' + } + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 5 + }, + borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + }, type: 'line', data: ydatas[i].data } } serLists.push(obj) } - var option = { + const option = { /* title: { text: title, }, */ @@ -407,18 +400,18 @@ } }, formatter: function (params) { - var s = params[0].name + '<br />' - for (var i = 0; i < params.length; i++) { - // var name = params[i].name + let s = params[0].name + '<br />' + for (let i = 0; i < params.length; i++) { + // let name = params[i].name // 鍥捐〃title鍚嶇О - var seriesName = params[i].seriesName + const seriesName = params[i].seriesName // 鍊� - var value = params[i].value + const value = params[i].value - // var valueFliter = formatter(value) - var valueFliter = parseFloat(value).toFixed(2) + // let valueFliter = formatter(value) + const valueFliter = parseFloat(value).toFixed(2) - var maker = params[i].marker + let maker = params[i].marker if (seriesName === 'COD') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' } else if (seriesName === '姘ㄦ爱') { @@ -497,7 +490,7 @@ type: 'value', name: yname, // max: function (value) { - // var max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� + // let max_val_list = [] // 鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊� // if (bzzList && bzzList.length > 0) { // $.each(bzzList, function (index, item) { // max_val_list.push(item.bzhui) @@ -506,7 +499,7 @@ // 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] + // let 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: { @@ -563,124 +556,4 @@ <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 - } - } -} - -.tab-scroll { - display: flex; - align-items: center; - justify-content: space-between; - - .time-select { - cursor: pointer; - padding: 5px; - border: 1px solid #2b87c8; - border-radius: 4px; - text-align: center; - color: #fff; - font-size: 11px; - width: 280px; - } -} - -.form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search { - display: flex; - padding: 15px 0; - - > div { - margin-left: 10px - } - - .pickerMon { - display: flex; - - > div:first-child { - margin-right: 10px; - } - - .pickerData { - flex: 1; - display: flex; - - > span { - line-height: 22px; - margin-right: 15px; - } - - .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/WasteWater/WasteWaterIndex.vue b/src/components/BaseNav/WasteWater/WasteWaterIndex.vue index 852f050..f891ef9 100644 --- a/src/components/BaseNav/WasteWater/WasteWaterIndex.vue +++ b/src/components/BaseNav/WasteWater/WasteWaterIndex.vue @@ -9,20 +9,6 @@ <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 class="navigation"> <div class="navigation-left"> <div :class="active===0?'hover':''" class="uncheck" @click='tabTaggle("RealData",0)'>瀹炴椂鏁版嵁</div> @@ -30,13 +16,13 @@ <div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>鏃ユ暟鎹�</div> <div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>浜哄伐鐩戞祴鏁版嵁</div> </div> - <div class="navigation-right"> + <div class="navigation-right" v-if="active !== 3"> <p>姝e父</p> <i style=" background: #4ec99c;"></i> <p>棰勮</p> - <i style=" background: orange;"></i> + <i style=" background: #fc9303;"></i> <p>瓒呮爣</p> - <i style=" background: red;"></i> + <i style=" background: #fc1d04;"></i> </div> </div> <component :is="currentTab" ref="RealData"></component> @@ -55,8 +41,8 @@ import PublicSector from '../PublicSector' // 鍥捐〃缁勪欢 import RealData from './WasteWaterRealChart' -import HourData from './HourData' -import DayData from './DayData' +import HourData from './WasteWaterHoursChart' +import DayData from './WasteWaterDayChart' import Detail from './Detail' export default { @@ -117,23 +103,23 @@ .default-uncheck { background-color: #0e639e; - color: #fff; + color: #C0C0C0; cursor: pointer; } .hover { - background-color: #0e639e; - color: #fff; + background-color: #0e539e; + color: #ffffff; cursor: pointer; } .hover:hover { cursor: pointer; padding: 5px; - border: 1px solid #2b87c8; + border: 1px solid #5F9EA0; border-radius: 4px; text-align: center; - color: #fff; + color: #F0FFFF; } } diff --git a/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue b/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue index c73f030..8d6654b 100644 --- a/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue +++ b/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue @@ -18,11 +18,11 @@ type="datetime"> </el-date-picker> <span class="demonstration">閲囨牱鐐规暟锛�</span> - <el-select v-model="region" placeholder="璇烽�夋嫨" style="width: 80px"> - <el-option v-for="(item,index) in regionList" :key="index" :label="item" :value="item"></el-option> + <el-select v-model="formData.region" placeholder="璇烽�夋嫨" style="width: 80px"> + <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option> </el-select> <el-button @click="querySearch()">鏌ヨ</el-button> - <el-button>鏄庣粏琛�</el-button> + <!-- <el-button>鏄庣粏琛�</el-button>--> </div> <div class="echarts-chart"> <div style="width:5rem;height:1.5rem;" ref="echarts"></div> @@ -45,7 +45,6 @@ }, data () { return { - a: '', // tab鏍忎紶閫掓帴鏀舵暟鎹� dataStandard: [ { @@ -88,19 +87,22 @@ val: null } }], + // 琛ㄥ崟鏁版嵁缁戝畾鍊� formData: { + region: '25', + regionList: [25, 50, 75, 100], startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'), endTime: dayjs().format('YYYY-MM-DD HH:mm:ss') }, - region: '25', - regionList: [25, 50, 75, 100], - datatype: 1, + // 鏁版嵁鍒嗙被澶勭悊瀛樺偍鍒楄〃 RealTimeDataList: [], - bzz: null, - bzzList: [], + // 鐢ㄤ簬澶勭悊鏍囧噯鍊� + standardValues: null, + // 鏍囧噯鍊煎垪琛� + standardValuesList: [], + // 鐢ㄤ簬鍥捐〃灞曠ず璁剧疆鏁扮粍 nameList: [], - // legend绫诲埆鍥捐〃灞曠ず璁剧疆鏁扮粍 - lengList: [], + legendList: [], ydatas: [] } }, @@ -122,46 +124,47 @@ $endTime: this.formData.endTime, $step: 15 } - // console.log(data) const result = (await mapApi.getDataItems(data)).data // 鏁版嵁鎸夌被鍒垎缁� this.pointsSet(result) // 鍥炬爣瀛樺偍澶勭悊 this.legendSet() - // ydata鏁版嵁 + // y杞磀ata鏁版嵁 this.yDataSet() // 鏍规嵁宸叉湁鏁版嵁缁樺埗鍥捐〃 this.drawRealTimeDateChart() }, // 鎺ュ彛鏁版嵁鎸夌収 鏁版嵁鍐呭垎绫诲埆璁剧疆 pointsSet (d) { - let data = [] - let datalist = [] + // 鏁扮粍鏁版嵁缃┖ this.nameList = [] this.RealTimeDataList = [] + + let data = [] + let datalist = [] + for (let i = 0; i < d.length; i++) { - // this.RealTimeDataList = [] // 鍒ゆ柇鏄惁缁х画鎵ц if (d[i].ErrorMessage != null) { continue } + // temp 涓存椂鏁版嵁鍒ゆ柇鏂规硶 const tempList = [ { - 'TJIP45.lscl2tbAIA-10505-1': '姘哀鍖栫墿', - 'TJIP45.lscl2tbAIA-10505-2': '鐑熷皹', - 'TJIP45.lscl2tb552AISA11202A': '浜屾哀鍖栫7', - 'TJIP45.lscl2tb552AISA11201B': 'pH', - 'TJIP45.lscl2tb552AI10710': '浜屾哀鍖栫⒊' + 'TJIP45.lscl2tb552AISA11201B': 'COD', + 'TJIP45.lscl2tbAIA-10505-1': '姘ㄦ爱', + 'TJIP45.lscl2tbAIA-10505-2': '鎬荤7', + 'TJIP45.lscl2tb552AI10710': '鎬绘爱', + 'TJIP45.lscl2tb552AISA11202A': '搴熸按娴侀噺' } ] - // 鎸囨爣 + // 鎸囨爣 涓存椂鐢ㄤ簬鏁版嵁澶勭悊 const name = tempList[0][d[i].UnionTagCode] - // 鍒ゆ柇甯傚眬绫诲瀷杩涜鍒嗙粍 + + // 鍒ゆ柇甯傚眬绫诲瀷杩涜鍒嗙粍 =>鏁扮粍涓虹┖鏃� if (this.nameList.length === 0) { - // 鏁扮粍涓虹┖鏃� this.nameList.push(name) - // todo 鐢╠ayjs const newDate = new Date(d[i].ReadTime) data = { name: name, @@ -171,7 +174,6 @@ name: name, data: [data] } - // console.log('1111111') this.RealTimeDataList.push(datalist) } else if (this.nameList.indexOf(name) < 0) { // 娌℃湁鎸囨爣鏃� @@ -185,7 +187,6 @@ name: name, data: [data] } - // console.log('222222222') this.RealTimeDataList.push(datalist) } else if (i === d.length - 1) { // 寰幆鍒版渶鍚� @@ -200,7 +201,6 @@ name: name, data: [data] } - // console.log('3333333') this.RealTimeDataList.push(datalist) } else { const newDate = new Date(d[i].ReadTime) @@ -208,7 +208,6 @@ name: name, value: [newDate, d[i].TagValue] } - // console.log('444444') for (let k = 0; k < this.RealTimeDataList.length; k++) { if (this.RealTimeDataList[k].name === name) { this.RealTimeDataList[k].data.push(data) @@ -228,24 +227,23 @@ } } } - // console.log(this.RealTimeDataList) }, // legend绫诲埆鍥捐〃灞曠ず璁剧疆鏁扮粍 legendSet () { - this.lengList = [] + this.legendList = [] let objTemp for (let l = 0; l < this.nameList.length; l++) { let obj let IconUrl - if (this.nameList[l] === 'pH') { - IconUrl = 'image://../assets/imgs/legend/WenDu.png' - } else if (this.nameList[l] === '姘哀鍖栫墿') { + if (this.nameList[l] === 'COD') { + IconUrl = 'image://../assets/imgs/legend/SO2.png' + } else if (this.nameList[l] === '姘ㄦ爱') { IconUrl = 'image://../assets/imgs/legend/NOX.png' - } else if (this.nameList[l] === '鐑熷皹') { - IconUrl = 'image://../assets/imgs/legend/zongdan.png' - } else if (this.nameList[l] === '浜屾哀鍖栫⒊') { + } else if (this.nameList[l] === '鎬荤7') { IconUrl = 'image://../assets/imgs/legend/YanChen.png' - } else if (this.nameList[l] === '浜屾哀鍖栫7') { + } else if (this.nameList[l] === '鎬绘爱') { + IconUrl = 'image://../assets/imgs/legend/zongdan.png' + } else if (this.nameList[l] === '搴熸按娴侀噺') { IconUrl = 'image://../assets/imgs/legend/VOCs.png' } if (this.nameList[l] === '搴熸按' || this.nameList[l] === '搴熸按娴侀噺') { // 灏嗗簾姘存祦閲忔帓鍒版暟缁勬渶鍚� @@ -268,66 +266,60 @@ itemWidth: 20, itemHeight: 5 } - this.lengList.push(obj) + this.legendList.push(obj) } } - this.lengList.push(objTemp) + this.legendList.push(objTemp) }, // yDataSet 鏁版嵁澶勭悊 yDataSet () { - this.bzzList = [] + // 鏁扮粍娣诲姞鏁版嵁 缃┖ + this.standardValuesList = [] this.ydatas = [] for (let j = 0; j < this.nameList.length; j++) { - let zdcbcolor, zxcolor - if (this.nameList[j] === 'pH') { - zdcbcolor = 'red' - zxcolor = '#900090' + let pointColor, lineColor + if (this.nameList[j] === 'COD') { + pointColor = 'red' + lineColor = '#ffff00' } else if (this.nameList[j] === '姘ㄦ爱') { - zdcbcolor = 'red' - zxcolor = '#00B0F0' - } else if (this.nameList[j] === '鐑熷皹') { - zdcbcolor = 'red' - zxcolor = '#f48183' + pointColor = 'red' + lineColor = '#00B0F0' + } else if (this.nameList[j] === '鎬荤7') { + pointColor = 'red' + lineColor = '#f48183' } else if (this.nameList[j] === '鎬绘爱') { - zdcbcolor = 'red' - zxcolor = '#e0ffff' - } else { - zdcbcolor = 'red' - zxcolor = '#9ACD32' + pointColor = 'red' + lineColor = '#e0ffff' + } else if (this.nameList[j] === '搴熸按娴侀噺') { + pointColor = 'red' + lineColor = '#9ACD32' } - let ydata // 涓存椂鏁版嵁 const BBZMAPPING = { COD: 35, - pH: 9, - 鎬绘爱: 15, + 姘ㄦ爱: 30, 鎬荤7: 0.3, - 姘ㄦ爱: 3 + 鎬绘爱: 15, + 搴熸按娴侀噺: 3 } for (let m = 0; m < this.RealTimeDataList.length; m++) { let stdValue = null if (this.RealTimeDataList[m].name === this.nameList[j]) { - for (const p in BBZMAPPING) { - // console.log('p' + p) - this.a = p - stdValue = BBZMAPPING[this.RealTimeDataList[m].name] - } - // console.log(stdValue) - this.bzz = { + stdValue = BBZMAPPING[this.RealTimeDataList[m].name] + this.standardValues = { name: this.nameList[j], - bzhui: stdValue + standardValue: stdValue } - ydata = { + const yData = { name: this.nameList[j], data: this.RealTimeDataList[m].data, - zdcbcolor: zdcbcolor, - zxcolor: zxcolor, - bzz: stdValue + pointColor: pointColor, + lineColor: lineColor, + standardValue: stdValue } - // console.log(stdValue) - this.bzzList.push(this.bzz) - this.ydatas.push(ydata) + this.standardValuesList.push(this.standardValues) + this.ydatas.push(yData) } } } @@ -337,53 +329,58 @@ this.myChart = this.$echarts.init(this.$refs.echarts) this.myChart.clear() - const legend = this.lengList - const yname = '娴撳害(mg/m鲁)' - const bzzList = this.bzzList + // y杞翠晶杈规爣棰榥eme + const ySideName = '娴撳害(mg/m鲁)' + // 鏍囧噯鍊煎垪琛� + const standardValuesList = this.standardValuesList + // 搴旂敤浜庢暟鎹粨鏋滃垽鏂爣鍑嗗�� + let standardValue + + // series鏁版嵁瀛樺偍 const serLists = [] for (let i = 0; i < this.ydatas.length; i++) { - const zdcbcolor = this.ydatas[i].zdcbcolor - const bz = this.ydatas[i].bzz - // console.log(bz) - let obj + // 搴旂敤浜庢暟鎹鐞� + const pointColor = this.ydatas[i].pointColor + // 鏁版嵁鏍囧噯鍊� + const bz = this.ydatas[i].standardValue + let seriesObj + if (bz) { - obj = { + seriesObj = { name: this.ydatas[i].name, - // symbol:'circle', // 鎶樼偣褰㈢姸 - // symbolSize: 3, //澶у皬 - smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� + smooth: true, + type: 'line', + data: this.ydatas[i].data, + // borderColor: this.ydatas[i].pointColor, + borderColor: '#fff', itemStyle: { normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - let biaozhuiz - for (let i = 0; i < bzzList.length; i++) { - if (bzzList[i].name === c.seriesName) { - biaozhuiz = bzzList[i].bzhui + color: function (c) { + for (let i = 0; i < standardValuesList.length; i++) { + if (standardValuesList[i].name === c.seriesName) { + standardValue = standardValuesList[i].standardValue } } - if (c.value[1] > biaozhuiz) { - return zdcbcolor - } else if (c.value[1] > biaozhuiz * 0.9) { + if (c.value[1] > standardValue) { + return pointColor + } else if (c.value[1] > standardValue * 0.7) { return '#FFA500' } else { return '#33c95f' } }, - lineStyle: { // 鎶樼嚎鐨勯鑹� - color: this.ydatas[i].zxcolor, + lineStyle: { + color: this.ydatas[i].lineColor, width: 2 }, - // borderColor:'black', //鎶樼偣杈规鐨勯鑹� label: { // 鏄剧ず鍊� show: false } } }, - type: 'line', - data: this.ydatas[i].data, - markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 + markLine: { symbol: 'none', data: [{ label: { @@ -396,16 +393,15 @@ yAxis: bz, lineStyle: { normal: { - color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - let biaozhuiz - for (let i = 0; i < bzzList.length; i++) { - if (bzzList[i].name === c.seriesName) { - biaozhuiz = bzzList[i].bzhui + color: function (c) { + for (let i = 0; i < standardValuesList.length; i++) { + if (standardValuesList[i].name === c.seriesName) { + standardValue = standardValuesList[i].standardValue } } - if (c.value[1] > biaozhuiz) { - return zdcbcolor - } else if (c.value[1] > biaozhuiz * 0.9) { + if (c.value[1] > standardValue) { + return pointColor + } else if (c.value[1] > standardValue * 0.7) { return '#FFA500' } else { return '#33c95f' @@ -413,62 +409,55 @@ } } } - } - ] + }] } } } else { - obj = { + seriesObj = { name: this.ydatas[i].name, - symbol: 'circle', // 鎶樼偣褰㈢姸 - symbolSize: 10, // 澶у皬 - smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� + symbol: 'circle', + symbolSize: 10, + smooth: false, yAxisIndex: 1, - // itemStyle: { - // normal: { - // color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� - // for (let i = 0; i < this.bzzList.length; i++) { - // let biaozhuizs - // if (this.bzzList[i].name === c.seriesName) { - // biaozhuizs = this.bzzList[i].bzhui - // } - // console.log(biaozhuizs) - // } - // if (c.value[1] > 9) { - // return zdcbcolor - // } else { - // return '#33c95f' - // } - // }, - // lineStyle: { // 鎶樼嚎鐨勯鑹� - // color: this.ydatas[i].zxcolor, - // width: 5 - // }, - // borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� - // label: { // 鏄剧ず鍊� - // show: false - // } - // } - // }, + // borderColor:'black', type: 'line', - data: this.ydatas[i].data + data: this.ydatas[i].data, + itemStyle: { + normal: { + color: function (c) { + for (let i = 0; i < standardValuesList.length; i++) { + if (standardValuesList[i].name === c.seriesName) { + standardValue = standardValuesList[i].standardValue + } + } + if (c.value[1] > standardValue) { + return pointColor + } else if (c.value[1] > standardValue * 0.9) { + return '#FFA500' + } else { + return '#33c95f' + } + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: this.ydatas[i].lineColor, + width: 2 + }, + label: { // 鏄剧ず鍊� + show: false + } + } + } } } - if (this.ydatas[i].name === '搴熸皵娴侀噺' || this.ydatas[i].name === '搴熸皵') { - obj.yAxisIndex = 1 + if (this.ydatas[i].name === '搴熸按娴侀噺' || this.ydatas[i].name === '搴熸按') { + seriesObj.yAxisIndex = 1 } - serLists.push(obj) + serLists.push(seriesObj) } - // console.log(serLists) - let dataUnit = '' - if (this.datatype === 1) { - dataUnit = '娴侀噺(m鲁/d)' - } else { - dataUnit = '娴侀噺(m鲁/h)' - } + const dataUnit = '娴侀噺(m鲁/h)' // echarts鍥捐〃option鏁版嵁 const options = { - tooltip: { // 鎻愮ず妗� + tooltip: { trigger: 'axis', axisPointer: { type: 'cross', @@ -479,8 +468,6 @@ 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] @@ -491,19 +478,19 @@ let maker = params[i].marker let colo = '' switch (seriesName) { - case 'pH': - colo = '#900090' + case 'COD': + colo = '#ffff00' break - case '浜屾哀鍖栫⒊': + case '姘ㄦ爱': colo = '#00B0F0' break - case '鐑熷皹': + case '鎬绘爱': colo = '#e0ffff' break - case '姘哀鍖栫墿': + case '搴熸按娴侀噺': colo = '#9ACD32' break - case '浜屾哀鍖栫7': + case '鎬荤7': colo = '#f48183' break default: @@ -516,17 +503,18 @@ return s } }, - toolbox: { // 鎵撳嵃绛夊伐鍏� + toolbox: { show: false, feature: { saveAsImage: {} } }, - grid: { // 缃戞牸 - top: '20%' + grid: { + top: '20%', + left: '15%' }, legend: { - data: legend + data: this.legendList }, dataZoom: [{ type: 'inside', @@ -546,10 +534,10 @@ shadowOffsetY: 2 } }], - xAxis: { // x 杞磋缃� + xAxis: { type: 'time', boundaryGap: false, - axisLabel: { // x杞村叏閮ㄦ樉绀� + axisLabel: { // rotate: 30, margin: 6, interval: 0, @@ -557,7 +545,7 @@ color: '#fff' } }, - splitLine: { // 缃戞牸鍨傜洿绾夸负 铏氱嚎 + splitLine: { show: true, lineStyle: { type: 'dashed' @@ -569,16 +557,15 @@ axisLine: { lineStyle: { color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + width: 1 } } - // data: xdata }, yAxis: [{ type: 'value', - name: yname, + name: ySideName, max: function (value) { - return parseInt(value.max + 30) + return parseInt(value.max + 3) }, axisLabel: { formatter: '{value}', @@ -591,11 +578,11 @@ }, splitLine: { show: false - }, // y杞� 缃戞牸绾夸笉鏄剧ず, + }, axisLine: { lineStyle: { color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + width: 1 } } }, { @@ -612,14 +599,14 @@ }, splitLine: { show: false - }, // y杞� 缃戞牸绾夸笉鏄剧ず, + }, // inverse: true, // nameLocation: 'start', // max:500, axisLine: { lineStyle: { color: '#FFFFFF', - width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + width: 1 } } }], @@ -633,60 +620,5 @@ </script> <style scoped lang="less"> -.echarts-box { - .tab-scroll { - display: flex; - align-items: center; - justify-content: space-between; - .time-select { - cursor: pointer; - padding: 5px; - border: 1px solid #2b87c8; - border-radius: 4px; - text-align: center; - color: #fff; - font-size: 11px; - width: 280px; - } - } - - .echarts-form { - height: 0.3rem; - line-height: 0.3rem; - - .demonstration { - color: #00fff6; - font-size: 12px; - margin-left: 10px; - } - - /deep/ .el-input__inner { - height: 0.15rem; - background-color: #2e4967; - color: #fff; - font-size: 12px; - padding: 0; - border-color: #00fff6; - text-align: center; - } - - .el-button { - margin: 0 15px; - width: 0.3rem; - height: 0.15rem; - display: inline-block; - background-color: #2e4967; - color: #fff; - font-size: 12px; - padding: 0; - border-color: #00fff6; - text-align: center; - } - } - - /deep/ .el-icon-time:before { - content: " "; - } -} </style> diff --git a/src/components/LayerController/service/LayerFactory.js b/src/components/LayerController/service/LayerFactory.js index 909038e..2ab18e6 100644 --- a/src/components/LayerController/service/LayerFactory.js +++ b/src/components/LayerController/service/LayerFactory.js @@ -117,8 +117,8 @@ for (var j in configs) { const config = configs[j] const checked = config.checked - console.log(zoom) - console.log(k) + // console.log(zoom) + // console.log(k) if (checked && zoom > k) { this.show(config) } else if (checked && zoom < k) { @@ -196,7 +196,7 @@ this.findLayerById(layer.getLayers(), id) } else { layer.eachLayer(function (layer) { - console.log(layer) + // console.log(layer) }) } } diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js index be2a119..d74b3a5 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js @@ -1,5 +1,5 @@ import L from 'leaflet' -import eventBus from '@/eventBus' +import eventBus from '../../../../../eventBus' class DrawLine { constructor (map) { @@ -38,11 +38,11 @@ } dbClick = (e) => { - console.log('鍙屽嚮缁撴潫', e) + // console.log('鍙屽嚮缁撴潫', e) this.polyline.addTo(this.layers) // this.close(e.latlng); this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick) - console.log(this.points) + // console.log(this.points) eventBus.$emit('draw-hdm-line', this.points) } diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue index 9b4a92f..4b3d479 100644 --- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue +++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue @@ -17,8 +17,8 @@ title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎 </el-button> <el-scrollbar style="height:450px"> - <el-card shadow="hover"> <!-- style="height: 300px"--> - <span class="clearfixs">璧峰绠℃</span> + <el-card shadow="hover"> + <span class="fixed-style">璧峰绠℃</span> <el-table ref="singleTable" highlight-current-row @@ -62,7 +62,7 @@ </template> </el-table-column> </el-table> - <span class="clearfixs">缁撴潫绠℃</span> + <span class="fixed-style">缁撴潫绠℃</span> <el-table max-height="200" highlight-current-row @@ -105,7 +105,7 @@ </template> </el-table-column> </el-table> - <span class="clearfixs">鍒嗘瀽缁撴灉:<span style="color: red;">{{ currentLinkIsTrue }}</span></span> + <span class="fixed-style">鍒嗘瀽缁撴灉:<span style="color: red;">{{ currentLinkIsTrue }}</span></span> <el-table highlight-current-row max-height="200" @@ -160,7 +160,7 @@ <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="娓呴櫎缁樺埗">娓呴櫎 </el-button> <el-card shadow="hover"> - <span class="clearfixs">鍙戠敓鐖嗚鐨勭娈�</span> + <span class="fixed-style">鍙戠敓鐖嗚鐨勭娈�</span> <el-table ref="singleTable" highlight-current-row @@ -202,7 +202,7 @@ </template> </el-table-column> </el-table> - <span class="clearfixs">闇�瑕佸叧闂殑闃�闂�</span> + <span class="fixed-style">闇�瑕佸叧闂殑闃�闂�</span> <el-table highlight-current-row :data="bgFm" @@ -343,7 +343,7 @@ <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="娓呴櫎鎴柇闈㈠垎鏋愮粨鏋�">娓呴櫎 </el-button> <el-card class="box-card"> - <div slot="header" class="clearfixs"> + <div slot="header" class="fixed-style"> <span>绠$嚎鏌ヨ缁撴灉</span> </div> <el-table @@ -371,11 +371,11 @@ </el-table> </el-card> <el-card class="box-card"> - <div slot="header" class="clearfixs"> + <div slot="header" class="fixed-style"> <span>鏂潰鍥�</span> </div> <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">鏆傛棤鏁版嵁</span> - <div v-show="myChartShow" id="echarts_box" style="width: 600px;height:300px;"></div> + <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div> </el-card> </el-tab-pane> </el-tabs> @@ -388,8 +388,7 @@ import eventBus from '../../../../eventBus' import DrawLine from './AnalysisChoose/DrawLine' -// import main from "../leaflet/app/main" -import mapApi from '@/api/mapApi' +import mapApi from '../../../../api/mapApi' export default { name: 'SewersAnalysis', @@ -398,12 +397,13 @@ // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈� activeName: 'first', measure: null, - map: null, + map: window.map, myChart: null, myChartShow: false, flowPipeLine: null, + // 鐢ㄤ簬鍒ゆ柇 currentSelectStart: null, currentSelectEnd: null, currentSelectStartLine: null, @@ -443,12 +443,8 @@ } }, mounted () { - // this.myChart = this.$echarts.init(document.getElementById('echarts_box')) - // 鍏ㄥ眬map浼犻�� || this.map = window.map - this.map = window.map - eventBus.$on('map-obj', (mapObj) => { - this.map = mapObj - }) + // 鍒濆鍖杄charts鍥捐〃 + this.myChart = this.$echarts.init(this.$refs.myChart) // 浣跨敤 DrwLine鏂规硶 eventBus.$on('draw-hdm-line', (points) => { this.getHdmPoint(points) @@ -473,11 +469,11 @@ // 娴佸悜鍦板浘涓婄偣鍑� selectPipeLine () { - this.map.on('click', this.selectClick) + window.map.on('click', this.selectClick) }, // 鍦板浘涓婄偣鍑诲洖璋� selectClick (e) { - this.map.off('click', this.selectClick) + window.map.off('click', this.selectClick) const point = [e.latlng.lng, e.latlng.lat] console.log(point) this.getPipeLine(point) @@ -776,12 +772,12 @@ // 娴佸悜鏁版嵁璇锋眰 async getPipeLine (point) { - const param = { - x: point[0], - y: point[1], - radius: 3 - } - console.log(param) + // const param = { + // x: point[0], + // y: point[1], + // radius: 3 + // } + // console.log(param) // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁 // const res = await api.getPipeline(param) @@ -813,6 +809,7 @@ console.log('姝f祦鍚戞樉绀�') console.log(e) + // 娓呴櫎娴佸悜鏂规硶 this.clearLX() // const param = { // points: e.data, @@ -862,7 +859,8 @@ // 妯柇闈㈡暟鎹姹� async getHdmPoint (line) { console.log('妯柇闈㈢殑缁樺埗绾�') - console.table(line) + // console.table(line) + // 妯柇闈㈡暟鎹� this.hdmParam = { x1: line[0].lng, y1: line[0].lat, @@ -958,7 +956,7 @@ padding: 0; } -/deep/ .clearfixs { +/deep/ .fixed-style { display: inline-block; color: #ffffff; margin: 15px; -- Gitblit v1.8.0