From 8bb5942235c86ea771c4215a77c46b1245c30a93 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 12 四月 2021 11:31:58 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/LayerController/logic/WasteGas.js | 21 +- src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 18 +- src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue | 110 +++++++------ src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue | 220 ++++++++++++++------------ src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue | 76 +++------ src/components/BaseNav/PublicBounced/PublicBounced.vue | 16 - 6 files changed, 230 insertions(+), 231 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue index 492d4f2..8e0f659 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue @@ -1,73 +1,65 @@ <!-- 鏃ユ暟鎹� --> <template> - <div id="Tab"> - <div class="infomation"> - <ul> - <li></li> - </ul> - <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-row> - </div> - <div class="form-echrts"> - <div class="from-search"> - <el-row type="flex"> - <el-col :span="14"> - <div class="pickerMon"> - <div class="pickerData"> - <span> 寮�濮嬫椂闂�:</span> - <span class="pickerTable"><el-date-picker - type="datetime" - v-model="value1"> - </el-date-picker></span> - </div> - <div class="pickerData"> - <span >缁撴潫鏃堕棿:</span> - <span class="pickerTable"> + <div id="Tab"> + <div class="animation"> + <div class="infomation"> + <span class="grid-content">姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</span> + <span class="grid-content">浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</span> + <span class="grid-content">鐑熷皹 : 6.93 鏍囧噯 : 30</span> + <span class="grid-content">搴熸皵娴侀噺 : 120343.18</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="value1"> + </el-date-picker> + </span> + </div> + <div class="pickerData"> + <span >缁撴潫鏃堕棿:</span> + <span class="pickerTable"> <el-date-picker - type="datetime" - v-model="value2" + type="datetime" + v-model="value2" > </el-date-picker> </span> - </div> - </div> - </el-col> - <el-col :span="5"> - 閲囨牱鐐规暟: - <input list="source" id="ipt" class="echatsInput"> - <datalist id="source"> - <option value="0" /> - <option value="25" /> - <option value="50" /> - <option value="75" /> - <option value="100" /> - </datalist> - </el-col> - <el-col class="detailbtn" :span="2" @click="onSubmit">鏌ヨ</el-col> - <el-col :span="3"> - <div class="detailbtn" @click="dialogVisible = true" >鏄庣粏琛�</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"> - <public-detailed-list v-bind="$attrs"></public-detailed-list> - </div> - </el-dialog> - </el-col> - </el-row> - </div> - <div style="width:5rem;height:2rem;" id="echarts" ref="main"> - </div> + </div> </div> + <div> + 閲囨牱鐐规暟: + <input list="source" id="ipt" class="echatsInput" @change="datalistBtn"> + <datalist id="source" @click="datalistBtn"> + <option value="0" /> + <option value="25" /> + <option value="50" /> + <option value="75" /> + <option value="100" /> + </datalist> + </div> + <div class="detailbtn" @click="onSubmit">鏌ヨ</div> + <div class="detailbtn" @click="dialogVisible = true" >鏄庣粏琛�</div> + </div> + <div style="width:5rem;height:2rem;" id="echarts" ref="main"> + </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> + </div> </template> <script> @@ -282,12 +274,7 @@ data: data[k] }) } - // -------------------------- - var arr = [] - for (var x = 0; x < dataWatch.length; x++) { - arr.push(dataWatch[x].MonTimeStr) - } - console.log(arr) + console.log(series) const opitons = this.initOptions(dateDate, series) this.myChart = this.$echarts.init(this.$refs.main) this.myChart.setOption(opitons) @@ -297,46 +284,70 @@ </script> <style scoped lang="less"> - .grid-content{ - font-size: 8px!important; - background-color:#2e4967; - text-align: center; - margin: 0 2px 4px 2px; - border-radius: 2px; - } - .Infomation { - margin-left: 10px; - } - - .el-tag { - height: 25px; - width: 140px; - line-height: 25px; - margin-right: 10px; - font-size: 10px; - background-color: rgba(0, 255, 246, 0.14); - color: #00d0f9; - border: none; - padding: 0 15px; - } - +//.animation{ +// padding: 0 1rem; +// overflow: hidden; +// //width: 1rem; +// .infomation{ +// display: flex; +// //margin: 0 1rem; +// overflow: hidden; +// animation: move 1s linear 0s infinite; +// @keyframes move { +// 0% { +// } +// 100% { +// transform: translateX(-10%); +// } +// } +// /* 榧犳爣缁忚繃marquee 灏卞仠姝㈠姩鐢� */ +// &:hover { +// //z-index: 9999999; +// animation-play-state: paused; +// } +// } +//} + .grid-content { + font-size: 8px !important; + background-color: #2e4967; + text-align: center; + margin: 0 2px 4px 2px; + border-radius: 2px; + } +.animation { + //width: 600px; + //height: 0.06rem; + .Infomation { + margin-left: 10px; + } +} .form-echrts { width: 100%; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; .from-search{ - margin-top: 6px; + display: flex; + padding:5px; + >div{margin-left: 10px} .pickerMon{ - display: flex; + display: flex; + >div:first-child { + margin-right: 10px; + } .pickerData{ flex: 1; display: flex; + >span{line-height: 22px} .pickerTable{ margin-left: 6px; - width: 40px; - + /deep/.el-input{ + font-size: 0px; + .el-input__prefix{ + width: 100%; + } + } /deep/.el-input__icon { - width: 0.9rem; + width: 100%; font-size: 0; } } @@ -351,18 +362,23 @@ height: 0.125rem!important; background-color: #2e4967; color: #ffffff; - font-size: 8px; + font-size: 12px; + height: 24px; padding: 0; //padding-left:20px ; //padding: 0!important; } .echatsInput{ - color: #00ffff; - background-color: #2e4967; - border: none; - border-radius: 6px; - width: 40px; + color: #00ffff; + background-color: #2e4967; + border: none; + border-radius: 6px; + width: 80px; + height: 22px; } + input::-webkit-calendar-picker-indicator { + opacity: 100; + } .detailbtn{ background-color:#2e4967; text-align: center; diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue index e37dbec..981b512 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue @@ -2,13 +2,12 @@ <template> <div id="Tab"> <div class="infomation"> - <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> + <span class="grid-content">姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</span> + <span class="grid-content">浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</span> + <span class="grid-content">鐑熷皹 : 6.93 鏍囧噯 : 30</span> + <span class="grid-content">搴熸皵娴侀噺 : 120343.18</span> + </div> </div> <div class="form-echrts"> <div class="from-search"> @@ -33,8 +32,8 @@ </div> <div> 閲囨牱鐐规暟: - <input list="source" id="ipt" class="echatsInput"> - <datalist id="source"> + <input list="source" id="ipt" class="echatsInput" value="50"> + <datalist id="source" > <option value="0" /> <option value="25" /> <option value="50" /> @@ -56,7 +55,7 @@ center v-dialogDrag > - <div class="el-dialog-div"> + <div class="el-dialog-div" style="height: 500px"> <public-detailed-list v-bind="$attrs"></public-detailed-list> </div> </el-dialog> @@ -102,12 +101,12 @@ this.myChart.resize() } }, - initOptions: function (dataDate, series) { + initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) { var options = { title: { // text: '鎶樼嚎鍥惧爢鍙�' }, - color: ['#002fb3', '#8ce55e', '#ff0087'], + color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], tooltip: { trigger: 'axis', axisPointer: { @@ -241,7 +240,29 @@ } } }], - series: series + 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 + } + ] } return options } @@ -249,33 +270,25 @@ mounted () { this.$nextTick(() => { this.drawChart() - const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonHourData)).reverse() + const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse() console.log(dataWatch) - var dateDate = [] - // {COD:[3,4,5]} - var data = {} + var dataValue1 = [] + var dataValue2 = [] + var dataValue3 = [] + var dataDate = [] + for (var i = 0; i < 24; i++) { + dataDate.push(dataWatch[i].MonTimeStr.substring(9)) + } for (var n = 0; n < dataWatch.length; n++) { - 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] + 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 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) + const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3) this.myChart = this.$echarts.init(this.$refs.main) this.myChart.setOption(opitons) }) @@ -293,18 +306,6 @@ } .Infomation { margin-left: 10px; -} - -.el-tag { - height: 25px; - width: 140px; - line-height: 25px; - margin-right: 10px; - font-size: 10px; - background-color: rgba(0, 255, 246, 0.14); - color: #00d0f9; - border: none; - padding: 0 15px; } .form-echrts { @@ -326,10 +327,14 @@ >span{line-height: 22px} .pickerTable{ margin-left: 6px; - /deep/.el-input__prefix{ + /deep/.el-input{ + font-size: 0px; + .el-input__prefix{ + width: 100%; + } } /deep/.el-input__icon { - font-size: 0; + //font-size: 0; width: 100%; } } @@ -340,6 +345,8 @@ } /deep/.el-input__inner{ position: relative; + width: 0.9rem!important; + height: 0.125rem!important; background-color: #2e4967; color: #ffffff; font-size: 12px; @@ -356,6 +363,9 @@ width: 80px; height: 22px; } + input::-webkit-calendar-picker-indicator { + opacity: 100; + } .detailbtn{ background-color:#2e4967; text-align: center; diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue index 1d29ec7..dc6ab00 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue @@ -9,16 +9,16 @@ <li @click='tabTaggle("EChartsHour")'>灏忔椂鏁版嵁</li> <li @click='tabTaggle("EChartsDate")'>鏃ユ暟鎹�</li> <li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li> + <div id="title" > + <span><strong> </strong></span> + <span >姝e父</span> + <span ></span> + <span >棰勮</span> + <span ></span> + <span >瓒呮爣</span> + <span ></span> + </div> </ul> - <div id="title" > - <span><strong> </strong></span> - <span >姝e父</span> - <span ></span> - <span >棰勮</span> - <span ></span> - <span >瓒呮爣</span> - <span ></span> - </div> <component :is="currentTab" v-bind="$attrs"></component> </div> </template> diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue index 077bf5f..0ca567b 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue @@ -1,53 +1,31 @@ <template> <div class="PublicDetailedList"> - <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 :data="tableData" max-height="500px" border> + <el-scrollbar style="height: 50vh"> + <el-table-column prop="OnLineMonEmissPointName" label="鎺掓斁鐐�"></el-table-column> + <el-table-column prop="MonTimeStr" label="鐩戞祴鏃堕棿"></el-table-column> + <el-table-column label="姘哀鍖栫墿"> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> + </el-table-column> + <el-table-column label="浜屾哀鍖栫~"> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> + </el-table-column> + <el-table-column label="鐑熷皹"> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> + </el-table-column> + <el-table-column label="搴熸皵娴侀噺"> + <el-table-column prop="StdValue" label="姘旈噺"></el-table-column> + </el-table-column> + </el-scrollbar> </el-table> </div> </template> @@ -77,7 +55,5 @@ <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 32b73d1..9d03215 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -56,8 +56,8 @@ value: '', getWasteGasDetails: [], getWasteWaterMonitoringDetails: [], - getQueryOnlineMonHourData: [], - getQueryOnlineMonDateData: [] + getQueryOnlineMonData: [] + // getGasQueryOnlineMonData: [] } }, methods: { @@ -75,10 +75,11 @@ this.flag = true this.value = value }, - setGasData (data, dataDetails, value) { + setGasData (data, dataDetails, GasHourData, value) { this.setWasteGasdata = data this.getWasteGasDetails = dataDetails - // console.log(dataDetails) + this.getQueryOnlineMonData = GasHourData + console.log(this.getQueryOnlineMonData) this.displayContentTitle = data.Name this.flag = true this.value = value @@ -86,12 +87,9 @@ setWaterData (dataWater, dataDetail, hourData, dateData, value) { this.setWasteWaterdata = dataWater // console.log(data) - this.getWasteWaterMonitoringDetails = dataDetail // 鏄庣粏琛ㄦ暟鎹� - // console.log(dataDetail) - this.getQueryOnlineMonHourData = hourData // 灏忔椂鏁版嵁 + this.getQueryOnlineMonData = hourData // console.log(drawData) - this.getQueryOnlineMonDateData = dateData // 鏃ユ暟鎹� - // console.log(dateData) + this.getWasteWaterMonitoringDetails = dataDetail this.displayContentTitle = dataWater.Name this.flag = true this.value = value diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js index 7db2156..2b74c7b 100644 --- a/src/components/LayerController/logic/WasteGas.js +++ b/src/components/LayerController/logic/WasteGas.js @@ -59,21 +59,20 @@ const dataValue = { StoragePlaceId: e.layer.options.test.StoragePlaceId } - // const GasOnlinedata = { - // onLineMonEmissPointId: 23, - // monItemId: 28, - // emissTypeld: 2, - // beginTime: 2020/0o4/0o6 15:13:20, - // endTime=2020/0o4/0o7;15:13:20, - // dataType:1 - // } - // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata) - // console.log(Mondata) + const GasOnlinedata = { + onLineMonEmissPointId: '23', + monItemId: '28,31', + beginTime: '2020-04-06 15:13:20', + endTime: '2020-04-07 15:13:20', + dataType: '1' + } + const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata) + console.log(Mondata) const result = await mapApi.getWasteGasDetails(dataValue) // console.log(result.Result.DataInfo) const PublicBounced = window.Vue.extend(publicBounced) const instance = new PublicBounced() - instance.setGasData(e.layer.options.test, result.Result.DataInfo, 'feiqi') + instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, 'feiqi') // console.log(e.layer.options.test) instance.$mount() document.body.appendChild(instance.$el) -- Gitblit v1.8.0