From ac41da710d542993b9c9fd9c680cc310e8e61832 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期五, 09 四月 2021 17:54:48 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/assets/css/map/map-panel-style.less | 32 ++++- src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue | 86 +++++-------- src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue | 88 +++++-------- src/components/LayerController/logic/WasteWater.js | 19 +- src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue | 76 ++++++++---- src/components/BaseNav/PublicBounced/PublicBounced.vue | 15 + 6 files changed, 165 insertions(+), 151 deletions(-) diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 46bf141..5c5a3a9 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -333,12 +333,32 @@ } /*************** PublicTable 琛ㄦ牸鏍峰紡銆�*********************************/ -.cell { - padding: 0; + +.el-table{ + border-bottom: 1px solid #fff; + .el-table__body-wrapper::-webkit-scrollbar { + width: 0; + height: 0; + background: none; + } + .cell{ + padding: 0 3px !important; + i{ + display: block; + font-style: normal; + font-size: 10px; + line-height: 12px; + } + } } +.el-table--border th{ + border-right: none; + border-left: 1px solid #ddd; +} +.el-table--border th.gutter{border-left: none} .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell { - /* padding-left: 10px; */ + text-align: center; } .el-table th>.cell { @@ -351,9 +371,9 @@ height: 0; } .el-table td, .el-table th.is-leaf { - border: none; font-size: 0.08rem; } + .el-table .warning-row { background: #28304d; } @@ -367,10 +387,9 @@ //淇敼琛ㄦ牸楂樺害 .el-table td { padding: 0!important; - height: 30px; - line-height: 30px; font-size: 0.01rem !important; } + /***********************************************鍔ㄧ敾鏁堟灉************/ .transition{ transition: all .5s; @@ -420,3 +439,4 @@ .el-tabs__header .is-top { } + diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue index 712cff4..8130287 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue @@ -2,16 +2,11 @@ <template> <div id="Tab"> <div class="infomation"> - <!-- <el-tag>姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</el-tag>--> - <!-- <el-tag>浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</el-tag>--> - <!-- <el-tag>鐑熷皹 : 6.93 鏍囧噯 : 30</el-tag>--> - <!-- <el-tag>搴熸皵娴侀噺 : 120343.18</el-tag>--> <el-row> - <el-col :span="6"><div class="grid-content bg-purple">姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</div></el-col> - <el-col :span="6"><div class="grid-content bg-purple">浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</div></el-col> - <el-col :span="6"><div class="grid-content bg-purple">鐑熷皹 : 6.93 鏍囧噯 : 30</div></el-col> - <el-col :span="6"><div class="grid-content bg-purple">搴熸皵娴侀噺 : 120343.18</div></el-col> - <!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>--> + <el-col :span="6"><div class="grid-content bg-purple">姘哀鍖栫墿:29.93鏍囧噯:100</div></el-col> + <el-col :span="6"><div class="grid-content bg-purple">浜屾哀鍖栫~:17.34鏍囧噯:50</div></el-col> + <el-col :span="6"><div class="grid-content bg-purple">鐑熷皹:6.93 鏍囧噯:30</div></el-col> + <el-col :span="6"><div class="grid-content bg-purple">搴熸皵娴侀噺:120343.18</div></el-col> </el-row> </div> <div class="form-echrts"> @@ -59,7 +54,7 @@ center v-dialogDrag > - <div class="el-dialog-div" style="height: 500px"> + <div class="el-dialog-div"> <public-detailed-list v-bind="$attrs"></public-detailed-list> </div> </el-dialog> @@ -82,6 +77,8 @@ }, data () { return { + value1: '', + value2: '', watchData: [], dialogVisible: false, myChar: null, @@ -109,12 +106,12 @@ this.myChart.resize() } }, - initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) { + initOptions: function (dateDate, series) { var options = { title: { // text: '鎶樼嚎鍥惧爢鍙�' }, - color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], + color: ['#446cdc', '#c4c916', '#c1187e'], tooltip: { trigger: 'axis', axisPointer: { @@ -162,7 +159,6 @@ 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', @@ -175,8 +171,8 @@ // x杞寸殑璁剧疆 xAxis: { type: 'category', - boundaryGap: ['10%', '10%'], - data: dataDate, + boundaryGap: false, + data: dateDate, axisLabel: { // x杞村叏閮ㄦ樉绀� rotate: 20, interval: 0, @@ -248,29 +244,7 @@ } } }], - series: [ - { - name: 'COD', - type: 'line', - stack: '鎬婚噺', - data: dataValue1, - yAxisIndex: 0 - }, - { - name: '姘ㄦ爱', - type: 'line', - stack: '鎬婚噺', - data: dataValue2, - yAxisIndex: 0 - }, - { - name: '搴熸按娴侀噺', - type: 'line', - stack: '鎬婚噺', - data: dataValue3, - yAxisIndex: 1 - } - ] + series: series } return options } @@ -278,25 +252,33 @@ mounted () { this.$nextTick(() => { this.drawChart() - const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse() + const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse() console.log(dataWatch) - var dataValue1 = [] - var dataValue2 = [] - var dataValue3 = [] - var dataDate = [] - for (var i = 0; i < 24; i++) { - dataDate.push(dataWatch[i].MonTimeStr.substring(0, 8)) - } + var dateDate = [] + // {COD:[3,4,5]} + var data = {} for (var n = 0; n < dataWatch.length; n++) { - if (dataWatch[n].PoltmtrlName === 'COD') { - dataValue1.push(dataWatch[n].MonQty) - } else if (dataWatch[n].PoltmtrlName === '姘ㄦ爱') { - dataValue2.push(dataWatch[n].MonQty) - } else if (dataWatch[n].PoltmtrlName === '搴熸按娴侀噺') { - dataValue3.push(dataWatch[n].MonQty) + var d = dataWatch[n].MonTimeStr.substring(5, 9) + if (dateDate.indexOf(d) < 0) { + dateDate.push(d) + } + if (data[dataWatch[n].PoltmtrlName]) { + data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty) + } else { + data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty] } } - const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3) + var series = [] + for (var k in data) { + series.push({ + name: k, + type: 'line', + yAxisIndex: k === '搴熸按娴侀噺' ? 1 : 0, + data: data[k] + }) + } + console.log(series) + const opitons = this.initOptions(dateDate, series) this.myChart = this.$echarts.init(this.$refs.main) this.myChart.setOption(opitons) }) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue index 89a6cf8..e37dbec 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue @@ -2,17 +2,13 @@ <template> <div id="Tab"> <div class="infomation"> -<!-- <el-tag>姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</el-tag>--> -<!-- <el-tag>浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</el-tag>--> -<!-- <el-tag>鐑熷皹 : 6.93 鏍囧噯 : 30</el-tag>--> -<!-- <el-tag>搴熸皵娴侀噺 : 120343.18</el-tag>--> - <el-row> - <el-col :span="6"><div class="grid-content bg-purple">姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</div></el-col> - <el-col :span="6"><div class="grid-content bg-purple">浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</div></el-col> - <el-col :span="6"><div class="grid-content bg-purple">鐑熷皹 : 6.93 鏍囧噯 : 30</div></el-col> - <el-col :span="6"><div class="grid-content bg-purple">搴熸皵娴侀噺 : 120343.18</div></el-col> -<!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>--> - </el-row> + <el-row> + <el-col :span="6"><div class="grid-content bg-purple">姘哀鍖栫墿:29.93鏍囧噯:100</div></el-col> + <el-col :span="6"><div class="grid-content bg-purple">浜屾哀鍖栫~:17.34鏍囧噯:50</div></el-col> + <el-col :span="6"><div class="grid-content bg-purple">鐑熷皹:6.93 鏍囧噯:30</div></el-col> + <el-col :span="6"><div class="grid-content bg-purple">搴熸皵娴侀噺:120343.18</div></el-col> + <!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>--> + </el-row> </div> <div class="form-echrts"> <div class="from-search"> @@ -60,7 +56,7 @@ center v-dialogDrag > - <div class="el-dialog-div" style="height: 500px"> + <div class="el-dialog-div"> <public-detailed-list v-bind="$attrs"></public-detailed-list> </div> </el-dialog> @@ -106,12 +102,12 @@ this.myChart.resize() } }, - initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) { + initOptions: function (dataDate, series) { var options = { title: { // text: '鎶樼嚎鍥惧爢鍙�' }, - color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], + color: ['#002fb3', '#8ce55e', '#ff0087'], tooltip: { trigger: 'axis', axisPointer: { @@ -245,29 +241,7 @@ } } }], - series: [ - { - name: 'COD', - type: 'line', - stack: '鎬婚噺', - data: dataValue1, - yAxisIndex: 0 - }, - { - name: '姘ㄦ爱', - type: 'line', - stack: '鎬婚噺', - data: dataValue2, - yAxisIndex: 0 - }, - { - name: '搴熸按娴侀噺', - type: 'line', - stack: '鎬婚噺', - data: dataValue3, - yAxisIndex: 1 - } - ] + series: series } return options } @@ -275,25 +249,33 @@ mounted () { this.$nextTick(() => { this.drawChart() - const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse() + const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonHourData)).reverse() console.log(dataWatch) - var dataValue1 = [] - var dataValue2 = [] - var dataValue3 = [] - var dataDate = [] - for (var i = 0; i < 24; i++) { - dataDate.push(dataWatch[i].MonTimeStr.substring(9)) - } + var dateDate = [] + // {COD:[3,4,5]} + var data = {} for (var n = 0; n < dataWatch.length; n++) { - if (dataWatch[n].PoltmtrlName === 'COD') { - dataValue1.push(dataWatch[n].MonQty) - } else if (dataWatch[n].PoltmtrlName === '姘ㄦ爱') { - dataValue2.push(dataWatch[n].MonQty) - } else if (dataWatch[n].PoltmtrlName === '搴熸按娴侀噺') { - dataValue3.push(dataWatch[n].MonQty) + var d = dataWatch[n].MonTimeStr.substring(9) + if (dateDate.indexOf(d) < 0) { + dateDate.push(d) + } + if (data[dataWatch[n].PoltmtrlName]) { + data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty) + } else { + data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty] } } - const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3) + var series = [] + for (var k in data) { + series.push({ + name: k, + type: 'line', + yAxisIndex: k === '搴熸按娴侀噺' ? 1 : 0, + data: data[k] + }) + } + console.log(series) + const opitons = this.initOptions(dateDate, series) this.myChart = this.$echarts.init(this.$refs.main) this.myChart.setOption(opitons) }) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue index 0ca567b..077bf5f 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue @@ -1,31 +1,53 @@ <template> <div class="PublicDetailedList"> - <el-table :data="tableData" max-height="500px" border> - <el-scrollbar style="height: 50vh"> - <el-table-column prop="OnLineMonEmissPointName" label="鎺掓斁鐐�"></el-table-column> - <el-table-column prop="MonTimeStr" label="鐩戞祴鏃堕棿"></el-table-column> - <el-table-column label="姘哀鍖栫墿"> - <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> - </el-table-column> - <el-table-column label="浜屾哀鍖栫~"> - <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> - </el-table-column> - <el-table-column label="鐑熷皹"> - <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> - <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> - </el-table-column> - <el-table-column label="搴熸皵娴侀噺"> - <el-table-column prop="StdValue" label="姘旈噺"></el-table-column> - </el-table-column> - </el-scrollbar> + <el-table :data="tableData" max-height="600px" border > + <el-table-column prop="MonTimeStr" label="鐩戞祴鏃堕棿"></el-table-column> + <el-table-column label="姘哀鍖栫墿"> + <el-table-column prop="MonQty" width="70"> + <template slot="header">娴撳害 <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="OrglQty" width="70"> + <template slot="header">鎶樼畻鍊� <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="ConvertQty" width="70"> + <template slot="header">鏍囧噯鍊� <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="EmissQty" width="70"> + <template slot="header">鎺掓斁閲� <i>(kg/h)</i></template> + </el-table-column> + </el-table-column> + <el-table-column label="浜屾哀鍖栫~"> + <el-table-column prop="MonQty" width="60"> + <template slot="header">娴撳害 <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="OrglQty" width="60"> + <template slot="header">鎶樼畻鍊� <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="ConvertQty" width="60"> + <template slot="header">鏍囧噯鍊� <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="EmissQty" width="60"> + <template slot="header">鎺掓斁閲� <i>(kg/h)</i></template> + </el-table-column> + </el-table-column> + <el-table-column label="鐑熷皹"> + <el-table-column prop="MonQty" width="60"> + <template slot="header">娴撳害 <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="OrglQty" width="60"> + <template slot="header">鎶樼畻鍊� <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="ConvertQty" width="60"> + <template slot="header">鏍囧噯鍊� <i>(mg/m鲁)</i></template> + </el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�" width="60"> + <template slot="header">鎺掓斁閲� <i>(kg/h)</i></template> + </el-table-column> + </el-table-column> + <el-table-column label="搴熸皵娴侀噺" width="100"> + <el-table-column prop="StdValue" label="姘旈噺"></el-table-column> + </el-table-column> + <el-table-column prop="OnLineMonEmissPointName" label="鎺掓斁鐐�"></el-table-column> </el-table> </div> </template> @@ -55,5 +77,7 @@ <style scoped> .PublicDetailedList{ /*height: 100%*/ + .gutter{display: none !important;width: 0 !important} } + </style> diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index 5a43649..65dbf97 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -14,7 +14,8 @@ :displayContentTable="displayContentTable"></public-table> <public-chart v-else :getWasteGasDetails="getWasteGasDetails" :value="value" - :getQueryOnlineMonData="getQueryOnlineMonData" + :getQueryOnlineMonHourData="getQueryOnlineMonHourData" + :getQueryOnlineMonDateData="getQueryOnlineMonDateData" :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails"> </public-chart> </div> @@ -56,7 +57,8 @@ value: '', getWasteGasDetails: [], getWasteWaterMonitoringDetails: [], - getQueryOnlineMonData: [] + getQueryOnlineMonHourData: [], + getQueryOnlineMonDateData: [] } }, methods: { @@ -82,12 +84,15 @@ this.flag = true this.value = value }, - setWaterData (dataWater, dataDetail, hourData, value) { + setWaterData (dataWater, dataDetail, hourData, dateData, value) { this.setWasteWaterdata = dataWater // console.log(data) - this.getQueryOnlineMonData = hourData + this.getWasteWaterMonitoringDetails = dataDetail // 鏄庣粏琛ㄦ暟鎹� + // console.log(dataDetail) + this.getQueryOnlineMonHourData = hourData // 灏忔椂鏁版嵁 // console.log(drawData) - this.getWasteWaterMonitoringDetails = dataDetail + this.getQueryOnlineMonDateData = dateData // 鏃ユ暟鎹� + // console.log(dateData) this.displayContentTitle = dataWater.Name this.flag = true this.value = value diff --git a/src/components/LayerController/logic/WasteWater.js b/src/components/LayerController/logic/WasteWater.js index d8abe79..af239fe 100644 --- a/src/components/LayerController/logic/WasteWater.js +++ b/src/components/LayerController/logic/WasteWater.js @@ -62,21 +62,22 @@ endTime: '2020-04-07 15:13:20', dataType: '2' } - // const dateValue = { - // onLineMonEmissPointId: '23', - // monItemId: '28,31', - // beginTime: '2020-04-06 15:13:20', - // endTime: '2020-04-07', - // dataType: '1' - // } + const dateValue = { + onLineMonEmissPointId: '23', + monItemId: '28,31', + beginTime: '2020-04-06', + endTime: '2020-04-07', + dataType: '1' + } const hourData = await mapApi.getQueryOnlineMonData(hourValue) - // const dateData = await mapApi.getQueryOnlineMonData(dateValue) + const dateData = await mapApi.getQueryOnlineMonData(dateValue) + console.log(dateData) // const drawback = await mapApi.getWasteWaterMonitoring() // console.log(drawback) const result = await mapApi.getWasteWaterMonitoringDetails(dataValue) const PublicBounced = window.Vue.extend(publicBounced) const instance = new PublicBounced() - instance.setWaterData(e.layer.options.test, result.Result.DataInfo, hourData.Result.DataInfo, 'feishui') + instance.setWaterData(e.layer.options.test, result.Result.DataInfo, hourData.Result.DataInfo, dateData.Result.DataInfo, 'feishui') // console.log(e.layer.options.test) instance.$mount() document.body.appendChild(instance.$el) -- Gitblit v1.8.0