From 82732610befafe88ae9512c9ac37e6a4bcf291c7 Mon Sep 17 00:00:00 2001 From: XingChuan <m17600301067@163.com> Date: 星期日, 30 五月 2021 22:59:44 +0800 Subject: [PATCH] 废气小时数据、日数据、人工数据接口替换;增加点位id、检测项id查询;无数据提示;UI优化。 --- src/components/base-page/WasteGas/HourData.vue | 312 +++++++++++++++++--- src/components/LayerController/logic/WasteGas.js | 4 src/components/base-page/WasteGas/PublicTabs.vue | 30 + src/api/mapApi.js | 4 src/components/base-page/WasteWater/Detail.vue | 23 + src/components/base-page/WasteGas/DayData.vue | 319 +++++++++++++++++--- src/api/mapUrl.js | 4 src/components/base-page/WasteWater/WasteWaterHoursChart.vue | 9 src/components/base-page/WasteWater/WasteWaterIndex.vue | 14 src/components/base-page/WasteGas/WasteGasRealChart.vue | 40 ++ src/components/LayerController/logic/WasteWater.js | 4 src/components/base-page/PublicDataStandard.vue | 2 src/components/base-page/WasteGas/Detail.vue | 40 +- src/components/base-page/WasteGas/WasteGasIndex.vue | 46 +- src/components/base-page/WasteWater/WasteWaterDayChart.vue | 5 15 files changed, 671 insertions(+), 185 deletions(-) diff --git a/src/api/mapApi.js b/src/api/mapApi.js index 6689828..652772f 100644 --- a/src/api/mapApi.js +++ b/src/api/mapApi.js @@ -39,11 +39,11 @@ }, // 搴熸皵鐐瑰皬鏃舵棩鏁版嵁 getWasteGasMonData (data) { - return axios.get(mapUrl.getWasteGasMonData, data) + return axios.post(mapUrl.getWasteGasMonData, qs.stringify(data), { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }) }, // 搴熸皵浜哄伐鏁版嵁 getWasteGasManualData (data) { - return axios.get(mapUrl.getWasteGasManualData, data) + return axios.post(mapUrl.getWasteGasManualData, qs.stringify(data), { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }) }, // 搴熸按鐐� getWasteWater (data) { diff --git a/src/api/mapUrl.js b/src/api/mapUrl.js index 9c8905f..0c246ad 100644 --- a/src/api/mapUrl.js +++ b/src/api/mapUrl.js @@ -15,8 +15,8 @@ export const getWasteGas = $HOSTII + '/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo' export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails' export const DataItems = $HOST + '/wasteGas/RTDB/DataItems' // 搴熸皵瀹炴椂鏁版嵁 -export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData' -export const getWasteGasManualData = $HOST + '/wasteGas/QueryLabMonData' +export const getWasteGasMonData = $HOSTII + '/EPInterface/DataService/EPMapService.asmx/QueryOnlineMonData' +export const getWasteGasManualData = $HOSTII + '/EPInterface/DataService/EPMapService.asmx/QueryLabMonData' // 搴熸按 export const getWasteWater = $HOSTII + '/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo' // 搴熸按鐐逛俊鎭� diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js index 8a2fa53..77fba5d 100644 --- a/src/components/LayerController/logic/WasteGas.js +++ b/src/components/LayerController/logic/WasteGas.js @@ -77,7 +77,9 @@ comp: WasteGasIndex, // 缁勪欢 parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 - storagePlaceId: res + storagePlaceId: res, + OnlineMonEmissPointId: e.layer.options.test.OnlineMonEmissPointId, + LabMonPointId: e.layer.options.test.LabMonPointId } }, title: '澶╂触鐭冲寲' + title // 鏍囬 diff --git a/src/components/LayerController/logic/WasteWater.js b/src/components/LayerController/logic/WasteWater.js index 01cd150..c8b0ff8 100644 --- a/src/components/LayerController/logic/WasteWater.js +++ b/src/components/LayerController/logic/WasteWater.js @@ -79,7 +79,9 @@ parent: this, // 鐖剁粍浠� data: { // 浼犻�掔殑鍙傛暟 // info: this.info - storagePlaceId: res + storagePlaceId: res, + OnlineMonEmissPointId: e.layer.options.totransferData.OnlineMonEmissPointId, + LabMonPointId: res.LabMonPointId } }, title: '澶╂触鐭冲寲' + title // 鏍囬 diff --git a/src/components/base-page/PublicDataStandard.vue b/src/components/base-page/PublicDataStandard.vue index 164801f..bcb8dfb 100644 --- a/src/components/base-page/PublicDataStandard.vue +++ b/src/components/base-page/PublicDataStandard.vue @@ -7,7 +7,7 @@ <!-- <span class="grid-content">搴熸皵娴侀噺 : <i style="color: #e8ee0b">120343.18</i></span>--> <span class="grid-content" v-for="item in dataStandard" :key="item.current.name">{{ item.current.name }} : <i style="color: #e8ee0b">{{ item.current.val }}</i> {{ - item.standard.name && item.current.name.indexOf('娴侀噺') === -1 ? item.standard.name + ':' : '' + item.standard.name && item.current.name.indexOf('娴侀噺') === -1 && item.current.name.indexOf('娓╁害') === -1 ? item.standard.name + ':' : '' }} <i style="color: #fff">{{ item.standard.val }}</i></span> </div> </div> diff --git a/src/components/base-page/WasteGas/DayData.vue b/src/components/base-page/WasteGas/DayData.vue index d51e218..3920eae 100644 --- a/src/components/base-page/WasteGas/DayData.vue +++ b/src/components/base-page/WasteGas/DayData.vue @@ -1,5 +1,5 @@ <template> - <div class="echarts-box"> + <div class="waste-gas-day-chart-box echarts-box"> <div class="tab-scroll"> <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> </div> @@ -9,11 +9,18 @@ <span class="demonstration">缁撴潫鏃堕棿锛�</span> <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker> <span class="demonstration">閲囨牱鐐规暟锛�</span> - <el-select v-model="formData.region" placeholder="璇烽�夋嫨" size="mini"> + <el-select class="selectBox" v-model="formData.region" placeholder="璇烽�夋嫨" size="mini"> <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-popover + placement="top" + width="100%" + popper-class="popoverBoxStyle" + trigger="click"> + <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table> + <el-button class="mingxiBtn" slot="reference" id="mingxiBtn">鏄庣粏琛�</el-button> + </el-popover> </div> <div class="echarts-chart"> <div ref="wastegasday"></div> @@ -28,61 +35,29 @@ import 'dayjs/locale/es' import dayjs from 'dayjs' import mapApi from '@/api/mapApi' +import DynamicTable from '../../../views/popup/DynamicHeader/DynamicTable' // 澶氱骇琛ㄥご琛ㄦ牸 export default { name: 'DayData', components: { - PublicDataStandard + PublicDataStandard, + DynamicTable + }, + props: { + OnlineMonEmissPointId: { + type: Number + } }, 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 - } - }], + dataStandard: [], + tableData: [], formData: { region: '25', regionList: [25, 50, 75, 100], - timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'), - timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss') + timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'), + timeEnd: dayjs().format('YYYY-MM-DD') }, dataType: 1, myChart: null, @@ -90,12 +65,125 @@ jcdID: 1, exhbzzList: [], bzz: null, - bzzList: [] + bzzList: [], + // 閰嶇疆鏄庣粏琛ㄨ〃澶� + tableConfig: [ + { + id: 100, + label: '鎺掓斁鐐�', + prop: 'OnLineMonEmissPointName' + }, + { + id: 200, + label: '鐩戞祴鏃堕棿', + prop: 'MonTimeStr' + }, + { + id: 300, + label: '姘哀鍖栫墿', + prop: 'PoltmtrlName', + children: [ + { + id: 310, + label: '娴撳害锛坢g/m鲁锛�', + prop: '姘哀鍖栫墿_OrglQty' + }, + { + id: 320, + label: '鎶樼畻鍊硷紙mg/m鲁锛夛級', + prop: '姘哀鍖栫墿_ConvertQty' + }, + { + id: 330, + label: '鏍囧噯鍊硷紙mg/m鲁锛�', + prop: '姘哀鍖栫墿_StdValue' + }, + { + id: 340, + label: '鎺掓斁閲忥紙kg/h锛�', + prop: '姘哀鍖栫墿_EmissQty' + } + ] + }, + { + id: 400, + label: '浜屾哀鍖栫~', + prop: 'PoltmtrlName', + children: [ + { + id: 410, + label: '娴撳害锛坢g/m鲁锛�', + prop: '姘哀鍖栫墿_OrglQty' + }, + { + id: 420, + label: '鎶樼畻鍊硷紙mg/m鲁锛夛級', + prop: '姘哀鍖栫墿_ConvertQty' + }, + { + id: 430, + label: '鏍囧噯鍊硷紙mg/m鲁锛�', + prop: '姘哀鍖栫墿_StdValue' + }, + { + id: 440, + label: '鎺掓斁閲忥紙kg/h锛�', + prop: '姘哀鍖栫墿_EmissQty' + } + ] + }, + { + id: 500, + label: '鐑熷皹', + prop: 'PoltmtrlName', + children: [ + { + id: 510, + label: '娴撳害锛坢g/m鲁锛�', + prop: '姘哀鍖栫墿_OrglQty' + }, + { + id: 520, + label: '鎶樼畻鍊硷紙mg/m鲁锛夛級', + prop: '姘哀鍖栫墿_ConvertQty' + }, + { + id: 530, + label: '鏍囧噯鍊硷紙mg/m鲁锛�', + prop: '姘哀鍖栫墿_StdValue' + }, + { + id: 540, + label: '鎺掓斁閲忥紙kg/h锛�', + prop: '姘哀鍖栫墿_EmissQty' + } + ] + }, + { + id: 600, + label: '搴熸皵娴侀噺', + prop: '', + children: [ + { + id: 610, + label: '姘旈噺锛坢鲁/h锛�', + prop: '搴熸皵娴侀噺_MonQty' + } + ] + } + ] } }, mounted () { this.$nextTick(() => { - this.initnData() + if (!this.OnlineMonEmissPointId) { + document.querySelector('.waste-gas-day-chart-box').innerHTML = '娌℃湁鏌ヨ鍒版暟鎹紒' + document.querySelector('.waste-gas-day-chart-box').style.textAlign = 'center' + document.querySelector('.waste-gas-day-chart-box').style.height = '2.02rem' + document.querySelector('.waste-gas-day-chart-box').style.lineHeight = '1rem' + } else { + this.initnData() + } }) }, methods: { @@ -104,8 +192,11 @@ }, async initnData () { const data = { - onLineMonEmissPointId: 23, - monItemId: 28, + poltSourceId: '', + poltMtrlId: '', + emissTypeId: '', + onLineMonEmissPointId: this.OnlineMonEmissPointId, + monItemId: '28,31,226', beginTime: this.formData.timeStart, endTime: this.formData.timeEnd, dataType: this.dataType @@ -116,6 +207,8 @@ }, get24HourDate (res) { if (res.length > 0) { + this.dataStandard = [] + this.tableData = this.analysisResult(res) // 灏忔椂鏄庣粏琛ㄨВ鏋愮粨鏋� // 澶勭悊鏁版嵁寮�濮� const d = res const nameList = [] // 瀛樻斁鍥句緥 @@ -153,20 +246,46 @@ if (nameList.length === 0) { nameList.push(d[i].PoltmtrlName.trim()) + this.dataStandard.push({ + current: { + name: d[i].PoltmtrlName.trim(), + val: '' + }, + standard: { + name: '鏍囧噯', + val: '' + } + }) dateList.push(strDate) bzh.push(d[i].StdValue) data = { name: d[i].PoltmtrlName.trim(), - data: [d[i].MonQty] + data: [] + } + if (d[i].MonQty !== null) { + data.data.push(d[i].MonQty) } dataList.push(data) } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) { nameList.push(d[i].PoltmtrlName) + this.dataStandard.push({ + current: { + name: d[i].PoltmtrlName.trim(), + val: '' + }, + standard: { + name: '鏍囧噯', + val: '' + } + }) bzh.push(d[i].StdValue) data = { name: d[i].PoltmtrlName.trim(), - data: [d[i].MonQty] + data: [] + } + if (d[i].MonQty !== null) { + data.data.push(d[i].MonQty) } dataList.push(data) } else { @@ -279,6 +398,10 @@ } const yname = '娴撳害(mg/l)' + for (var t = 0; t < this.dataStandard.length; t++) { + this.dataStandard[t].current.val = ydatas[t].data[ydatas[t].data.length - 1].toFixed(2) + this.dataStandard[t].standard.val = ydatas[t].bzz + } this.CreateChart(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) } }, @@ -465,10 +588,12 @@ saveAsImage: {} } }, - grid: { // 缃戞牸 + grid: { + // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁$畻 top: '20%', - left: '15%' - // containLabel: true + left: '6%', + right: '8%', + bottom: '12%' }, legend: { // 鍥句緥 data: legend @@ -586,10 +711,90 @@ series: serLists } this.myChart.setOption(option) + }, + analysisResult (result) { + // 澶勭悊琛ㄦ牸澶� + const json = {} + const arr = [] + // 澶勭悊琛ㄦ牸鍐呭 + const bodyDataList = [] + const dataMap = {} + for (let i = 0; i < result.length; i++) { + json[result[i].PoltmtrlName] = result[i].PoltmtrlName + const rgdata = result[i] + const timeTag = rgdata.MonTimeStr + if (!dataMap[timeTag]) { + dataMap[timeTag] = { MonTimeStr: '' + rgdata.MonTimeStr } + } + + // 寰�鏁版嵁涓坊鍔犲睘鎬ф暟鎹� + const el = dataMap[timeTag] + el.OnLineMonEmissPointName = rgdata.OnLineMonEmissPointName + el[rgdata.PoltmtrlName + '_OrglQty'] = rgdata.OrglQty ? rgdata.OrglQty.toFixed(2) : '--' // 鍘熷鍊� + el[rgdata.PoltmtrlName + '_ConvertQty'] = rgdata.ConvertQty ? rgdata.ConvertQty.toFixed(2) : '--' // 鎶樻爣閲� + el[rgdata.PoltmtrlName + '_StdValue'] = rgdata.StdValue ? rgdata.StdValue.toFixed(2) : '--' // 鏍囧噯鍊� + el[rgdata.PoltmtrlName + '_EmissQty'] = rgdata.EmissQty ? rgdata.EmissQty.toFixed(2) : '--' // 鎺掓斁閲� + el[rgdata.PoltmtrlName + '_MonQty'] = rgdata.MonQty ? rgdata.MonQty.toFixed(2) : '--' // 鐩戞祴閲� + } + let FQLLtemp = '' + let FQWDtemp = '' + let FQYHLtemp = '' + for (var key in json) { + if (key === '搴熸皵娴侀噺' || key === '搴熸皵') { + FQLLtemp = key + } else if (key === '娓╁害') { + FQWDtemp = key + } else if (key === '姘у惈閲�') { + FQYHLtemp = key + } else { + arr.push(key) + } + } + if (FQLLtemp != null) { + arr.push(FQLLtemp) + } + if (FQWDtemp != null) { + arr.push(FQWDtemp) + } + if (FQYHLtemp != null) { + arr.push(FQYHLtemp) + } + for (var p in dataMap) { + bodyDataList.push(dataMap[p]) + } + return bodyDataList } } } </script> -<style scoped lang="less"> +<style lang="less"> +.waste-gas-day-chart-box .echarts-form .el-input__inner { + background-color: rgba(0, 0, 0, 0); + height: .13rem; + border-color: #336fa4; +} +.waste-gas-day-chart-box .echarts-form{ + margin-top: 1px +} +.waste-gas-day-chart-box .echarts-form .el-input__icon{ + height: .13rem; + top: -.02rem; + right: -0.03rem; + position: absolute; + color: #00d0f9; +} +.waste-gas-day-chart-box .echarts-form .selectBox .el-input__icon:last-child{ + top: .02rem; +} +.waste-gas-day-chart-box .echarts-form .selectBox .is-reverse{ + top: -.02rem !important; +} +.waste-gas-day-chart-box .echarts-form .el-button{ + background-color: rgba(0, 0, 0, 0); + height: .13rem; +} +.waste-gas-day-chart-box .echarts-form .mingxiBtn{ + margin-left: -.02rem; +} </style> diff --git a/src/components/base-page/WasteGas/Detail.vue b/src/components/base-page/WasteGas/Detail.vue index a89c99c..d65eb35 100644 --- a/src/components/base-page/WasteGas/Detail.vue +++ b/src/components/base-page/WasteGas/Detail.vue @@ -5,20 +5,20 @@ style="width: 100%;height: 100%"> <el-table-column prop="LabMonTime" label="妫�娴嬫椂闂�"></el-table-column> <el-table-column label="姘哀鍖栫墿"> - <el-table-column prop="NOMonTime" label="鐩戞祴鍊�" width="70"></el-table-column> - <el-table-column prop="NOEndTime" label="鏍囧噯鍊�" width="70"></el-table-column> + <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="70"></el-table-column> + <el-table-column prop="StdValue" label="鏍囧噯鍊�" width="70"></el-table-column> </el-table-column> <el-table-column label="浜屾哀鍖栫~"> - <el-table-column prop="SOMontime" label="鐩戞祴鍊�" width="70"></el-table-column> - <el-table-column prop="SoEndTime" label="鏍囧噯鍊�" width="70"></el-table-column> + <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="70"></el-table-column> + <el-table-column prop="StdValue" label="鏍囧噯鍊�" width="70"></el-table-column> </el-table-column> <el-table-column label="鐑熷皹"> - <el-table-column prop="MonItemId" label="鐩戞祴鍊�" width="70"></el-table-column> - <el-table-column prop="EndMonTime" label="鏍囧噯鍊�" width="70"></el-table-column> + <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="70"></el-table-column> + <el-table-column prop="StdValue" label="鏍囧噯鍊�" width="70"></el-table-column> </el-table-column> <el-table-column label="闈炵敳鐑锋�荤儍"> - <el-table-column prop="MonItemId" label="鐩戞祴鍊�" width="70"></el-table-column> - <el-table-column prop="MonItemId" label="鏍囧噯鍊�" width="70"></el-table-column> + <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="70"></el-table-column> + <el-table-column prop="StdValue" label="鏍囧噯鍊�" width="70"></el-table-column> </el-table-column> </el-table> </div> @@ -35,22 +35,32 @@ tableData: [] } }, + props: { + LabMonPointId: { + type: Number + } + }, mounted () { - this.initdetail() + this.$nextTick(() => { + this.initdetail() + }) }, methods: { async initdetail () { - const timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') - const timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss') + const timeEnd = dayjs().format('YYYY-MM-DD') + const timeStart = dayjs().subtract(1, 'year').format('YYYY-MM-DD') const data = { companyId: 3900100145, - labMonPointId: 219, + companyCode: '', + poltSourceId: '', + labMonPointId: this.LabMonPointId ? this.LabMonPointId : '', + poltMtrlId: '', + monItemId: '28,31', + emissTypeId: '', beginTime: timeStart, endTime: timeEnd } - const result = (await mapApi.getWasteGasManualData(data)).Result.DataInfo - // console.log(result) - this.tableData = result + this.tableData = (await mapApi.getWasteGasManualData(data)).Result.DataInfo } } } diff --git a/src/components/base-page/WasteGas/HourData.vue b/src/components/base-page/WasteGas/HourData.vue index 52ab5e3..6590b1e 100644 --- a/src/components/base-page/WasteGas/HourData.vue +++ b/src/components/base-page/WasteGas/HourData.vue @@ -1,5 +1,5 @@ <template> - <div class="echarts-box"> + <div id="waste-gas-hours-chart-box" class="waste-gas-hours-chart-box echarts-box"> <div class="tab-scroll"> <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> </div> @@ -9,11 +9,18 @@ <span class="demonstration">缁撴潫鏃堕棿锛�</span> <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker> <span class="demonstration">閲囨牱鐐规暟锛�</span> - <el-select v-model="formData.region" placeholder="璇烽�夋嫨" size="mini" > + <el-select class="selectBox" v-model="formData.region" placeholder="璇烽�夋嫨" size="mini" > <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 @click="ScheduleShow">鏄庣粏琛�</el-button> + <el-popover + placement="top" + width="100%" + popper-class="popoverBoxStyle" + trigger="click"> + <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table> + <el-button class="mingxiBtn" slot="reference" id="mingxiBtn">鏄庣粏琛�</el-button> + </el-popover> </div> <div class="echarts-chart"> <div ref="wastegashour"></div> @@ -31,6 +38,7 @@ <script> import Scheduleof from '@components/base-page/WasteGas/Scheduleof' import PublicDataStandard from '../PublicDataStandard' +import DynamicTable from '../../../views/popup/DynamicHeader/DynamicTable' // 澶氱骇琛ㄥご琛ㄦ牸 import 'dayjs/locale/es' import dayjs from 'dayjs' @@ -41,69 +49,149 @@ components: { // PublicDetailedList PublicDataStandard, - Scheduleof + Scheduleof, + DynamicTable + }, + props: { + OnlineMonEmissPointId: { + type: Number + } }, 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 - } - }], + dataStandard: [], formData: { region: '25', regionList: [25, 50, 75, 100], timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'), timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss') }, + tableData: [], showSchedule: false, dataType: 2, myChart: null, exhbzz: null, jcdID: 1, - exhbzzList: [] + exhbzzList: [], + // 閰嶇疆鏄庣粏琛ㄨ〃澶� + tableConfig: [ + { + id: 100, + label: '鎺掓斁鐐�', + prop: 'OnLineMonEmissPointName' + }, + { + id: 200, + label: '鐩戞祴鏃堕棿', + prop: 'MonTimeStr' + }, + { + id: 300, + label: '姘哀鍖栫墿', + prop: 'PoltmtrlName', + children: [ + { + id: 310, + label: '娴撳害锛坢g/m鲁锛�', + prop: '姘哀鍖栫墿_OrglQty' + }, + { + id: 320, + label: '鎶樼畻鍊硷紙mg/m鲁锛夛級', + prop: '姘哀鍖栫墿_ConvertQty' + }, + { + id: 330, + label: '鏍囧噯鍊硷紙mg/m鲁锛�', + prop: '姘哀鍖栫墿_StdValue' + }, + { + id: 340, + label: '鎺掓斁閲忥紙kg/h锛�', + prop: '姘哀鍖栫墿_EmissQty' + } + ] + }, + { + id: 400, + label: '浜屾哀鍖栫~', + prop: 'PoltmtrlName', + children: [ + { + id: 410, + label: '娴撳害锛坢g/m鲁锛�', + prop: '姘哀鍖栫墿_OrglQty' + }, + { + id: 420, + label: '鎶樼畻鍊硷紙mg/m鲁锛夛級', + prop: '姘哀鍖栫墿_ConvertQty' + }, + { + id: 430, + label: '鏍囧噯鍊硷紙mg/m鲁锛�', + prop: '姘哀鍖栫墿_StdValue' + }, + { + id: 440, + label: '鎺掓斁閲忥紙kg/h锛�', + prop: '姘哀鍖栫墿_EmissQty' + } + ] + }, + { + id: 500, + label: '鐑熷皹', + prop: 'PoltmtrlName', + children: [ + { + id: 510, + label: '娴撳害锛坢g/m鲁锛�', + prop: '姘哀鍖栫墿_OrglQty' + }, + { + id: 520, + label: '鎶樼畻鍊硷紙mg/m鲁锛夛級', + prop: '姘哀鍖栫墿_ConvertQty' + }, + { + id: 530, + label: '鏍囧噯鍊硷紙mg/m鲁锛�', + prop: '姘哀鍖栫墿_StdValue' + }, + { + id: 540, + label: '鎺掓斁閲忥紙kg/h锛�', + prop: '姘哀鍖栫墿_EmissQty' + } + ] + }, + { + id: 600, + label: '搴熸皵娴侀噺', + prop: '', + children: [ + { + id: 610, + label: '姘旈噺锛坢鲁/h锛�', + prop: '搴熸皵娴侀噺_MonQty' + } + ] + } + ] } }, mounted () { this.$nextTick(() => { - this.initnData() + if (!this.OnlineMonEmissPointId) { + document.querySelector('#waste-gas-hours-chart-box').innerHTML = '娌℃湁鏌ヨ鍒版暟鎹紒' + document.querySelector('#waste-gas-hours-chart-box').style.textAlign = 'center' + document.querySelector('#waste-gas-hours-chart-box').style.height = '2.02rem' + document.querySelector('#waste-gas-hours-chart-box').style.lineHeight = '1rem' + } else { + this.initnData() + } }) }, methods: { @@ -116,8 +204,11 @@ }, async initnData () { const data = { - onLineMonEmissPointId: 23, - monItemId: 28, + poltSourceId: '', + poltMtrlId: '', + emissTypeId: '', + onLineMonEmissPointId: this.OnlineMonEmissPointId, + monItemId: '28,31,226', beginTime: this.formData.timeStart, endTime: this.formData.timeEnd, dataType: this.dataType @@ -128,6 +219,8 @@ }, get24HourDate (res) { if (res.length > 0) { + this.dataStandard = [] + this.tableData = this.analysisResult(res) // 灏忔椂鏄庣粏琛ㄨВ鏋愮粨鏋� // 澶勭悊鏁版嵁寮�濮� const d = res const nameList = [] // 瀛樻斁鍥句緥 @@ -210,21 +303,41 @@ if (nameList.length === 0) { nameList.push(d[i].PoltmtrlName.trim()) + this.dataStandard.push({ + current: { + name: d[i].PoltmtrlName.trim(), + val: 29.93 + }, + standard: { + name: '鏍囧噯', + val: 100 + } + }) dateList.push(strDate) if ((d[i].PoltmtrlName === '搴熸皵娴侀噺' || d[i].PoltmtrlName === '搴熸皵') && d[i].MonQty < 0) { d[i].MonQty = 0 } - data.push(d[i].MonQty) + if (d[i].MonQty !== null)data.push(d[i].MonQty) bzh.push(d[i].StdValue) } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) { nameList.push(d[i].PoltmtrlName) + this.dataStandard.push({ + current: { + name: d[i].PoltmtrlName.trim(), + val: 29.93 + }, + standard: { + name: '鏍囧噯', + val: 100 + } + }) 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) + if (d[i].MonQty !== null)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 @@ -238,7 +351,7 @@ if ((d[i].PoltmtrlName === '搴熸皵娴侀噺' || d[i].PoltmtrlName === '搴熸皵') && d[i].MonQty < 0) { d[i].MonQty = 0 } - data.push(d[i].MonQty) + if (d[i].MonQty !== null)data.push(d[i].MonQty) } } // 澶勭悊鏁版嵁缁撴潫 @@ -337,7 +450,10 @@ } const yname = '娴撳害(mg/m鲁)' - + for (var t = 0; t < this.dataStandard.length; t++) { + this.dataStandard[t].current.val = ydatas[t].data[ydatas[t].data.length - 1].toFixed(2) + this.dataStandard[t].standard.val = ydatas[t].bzz + } this.CreateChart(id, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) } }, @@ -525,10 +641,12 @@ saveAsImage: {} } }, - grid: { // 缃戞牸 + grid: { + // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁$畻 top: '20%', - left: '15%' - // containLabel: true + left: '6%', + right: '8%', + bottom: '12%' }, legend: { // 鍥句緥 data: legend @@ -646,10 +764,90 @@ series: serLists } this.myChart.setOption(option) + }, + analysisResult (result) { + // 澶勭悊琛ㄦ牸澶� + const json = {} + const arr = [] + // 澶勭悊琛ㄦ牸鍐呭 + const bodyDataList = [] + const dataMap = {} + for (let i = 0; i < result.length; i++) { + json[result[i].PoltmtrlName] = result[i].PoltmtrlName + const rgdata = result[i] + const timeTag = rgdata.MonTimeStr + if (!dataMap[timeTag]) { + dataMap[timeTag] = { MonTimeStr: '' + rgdata.MonTimeStr } + } + + // 寰�鏁版嵁涓坊鍔犲睘鎬ф暟鎹� + const el = dataMap[timeTag] + el.OnLineMonEmissPointName = rgdata.OnLineMonEmissPointName + el[rgdata.PoltmtrlName + '_OrglQty'] = rgdata.OrglQty ? rgdata.OrglQty.toFixed(2) : '--' // 鍘熷鍊� + el[rgdata.PoltmtrlName + '_ConvertQty'] = rgdata.ConvertQty ? rgdata.ConvertQty.toFixed(2) : '--' // 鎶樻爣閲� + el[rgdata.PoltmtrlName + '_StdValue'] = rgdata.StdValue ? rgdata.StdValue.toFixed(2) : '--' // 鏍囧噯鍊� + el[rgdata.PoltmtrlName + '_EmissQty'] = rgdata.EmissQty ? rgdata.EmissQty.toFixed(2) : '--' // 鎺掓斁閲� + el[rgdata.PoltmtrlName + '_MonQty'] = rgdata.MonQty ? rgdata.MonQty.toFixed(2) : '--' // 鐩戞祴閲� + } + let FQLLtemp = '' + let FQWDtemp = '' + let FQYHLtemp = '' + for (var key in json) { + if (key === '搴熸皵娴侀噺' || key === '搴熸皵') { + FQLLtemp = key + } else if (key === '娓╁害') { + FQWDtemp = key + } else if (key === '姘у惈閲�') { + FQYHLtemp = key + } else { + arr.push(key) + } + } + if (FQLLtemp != null) { + arr.push(FQLLtemp) + } + if (FQWDtemp != null) { + arr.push(FQWDtemp) + } + if (FQYHLtemp != null) { + arr.push(FQYHLtemp) + } + for (var p in dataMap) { + bodyDataList.push(dataMap[p]) + } + return bodyDataList } } } </script> -<style scoped lang="less"> +<style lang="less"> +.waste-gas-hours-chart-box .echarts-form .el-input__inner { + background-color: rgba(0, 0, 0, 0); + height: .13rem; + border-color: #336fa4; +} +.waste-gas-hours-chart-box .echarts-form{ + margin-top: 1px +} +.waste-gas-hours-chart-box .echarts-form .el-input__icon{ + height: .13rem; + top: -.02rem; + right: -0.03rem; + position: absolute; + color: #00d0f9; +} +.waste-gas-hours-chart-box .echarts-form .selectBox .el-input__icon:last-child{ + top: .02rem; +} +.waste-gas-hours-chart-box .echarts-form .selectBox .is-reverse{ + top: -.02rem !important; +} +.waste-gas-hours-chart-box .echarts-form .el-button{ + background-color: rgba(0, 0, 0, 0); + height: .13rem; +} +.waste-gas-hours-chart-box .echarts-form .mingxiBtn{ + margin-left: -.02rem; +} </style> diff --git a/src/components/base-page/WasteGas/PublicTabs.vue b/src/components/base-page/WasteGas/PublicTabs.vue index 3cc3718..40937d8 100644 --- a/src/components/base-page/WasteGas/PublicTabs.vue +++ b/src/components/base-page/WasteGas/PublicTabs.vue @@ -7,12 +7,12 @@ <div class="main"> <div class="main-matter"> <ul> - <li>鐩戞祴鐐瑰悕绉�:{{ storagePlaceId.Name }}</li> - <li>鐢熶骇鍗曚綅:{{ storagePlaceId.porltName }}</li> - <li>鎺掓斁绫诲瀷鍚嶇О:{{ storagePlaceId.MonTypeName }}</li> - <li>鎺掓斁鍘诲悜:{{ storagePlaceId.EmissDirecti }}</li> - <li>鎺у埗绾у埆鍚嶇О:{{ storagePlaceId.ContrLevelShowName }}</li> - <li>鍐�/澶栨帓鍙�:{{ storagePlaceId.OrOutPortName }}</li> + <li :title="storagePlaceId.Name"><span class="namer">鐩戞祴鐐瑰悕绉帮細</span>{{ storagePlaceId.Name }}</li> + <li :title="storagePlaceId.porltName"><span class="namer">鐢熶骇鍗曚綅锛�</span>{{ storagePlaceId.porltName }}</li> + <li :title="storagePlaceId.MonTypeName"><span class="namer">鎺掓斁绫诲瀷鍚嶇О锛�</span>{{ storagePlaceId.MonTypeName }}</li> + <li :title="storagePlaceId.EmissDirecti"><span class="namer">鎺掓斁鍘诲悜锛�</span>{{ storagePlaceId.EmissDirecti }}</li> + <li :title="storagePlaceId.ContrLevelShowName"><span class="namer">鎺у埗绾у埆鍚嶇О锛�</span>{{ storagePlaceId.ContrLevelShowName }}</li> + <li :title="storagePlaceId.OrOutPortName"><span class="namer">鍐�/澶栨帓鍙o細</span>{{ storagePlaceId.OrOutPortName }}</li> </ul> </div> </div> @@ -70,20 +70,26 @@ //height: 100%; display: flex; align-items: center; - justify-content: space-around; flex-wrap: wrap; - margin-bottom: -0.04rem; li { - margin-bottom: 0.04rem; - text-align: center; + margin: 0.02rem 0.03rem; min-width: 31%; - background-color: #243a55; - color: #00d0f9; + box-shadow: 0 0 10px rgba(129,211,248,.35) inset; + color: #00fff6; border-radius: 0.02rem; font-size: 0.08rem; line-height: 0.09rem; padding: 0.03rem .5%; + max-width: 1.2rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + .namer{ + display: inline-block; + width: .6rem; + text-align: right; + } } .lastli { diff --git a/src/components/base-page/WasteGas/WasteGasIndex.vue b/src/components/base-page/WasteGas/WasteGasIndex.vue index 4903bd3..4f9467b 100644 --- a/src/components/base-page/WasteGas/WasteGasIndex.vue +++ b/src/components/base-page/WasteGas/WasteGasIndex.vue @@ -25,12 +25,12 @@ <i style=" background: #fc1d04;"></i> </div> </div> - <component :is="currentTab" ref="RealData"></component> + <component :is="currentTab" :OnlineMonEmissPointId="OnlineMonEmissPointId" :LabMonPointId="LabMonPointId" ref="RealData"></component> </div> </template> - <template v-slot:video> +<!-- <template v-slot:video> <public-video></public-video> - </template> + </template>--> </public-sector> </template> @@ -47,7 +47,17 @@ export default { name: 'WasteGasIndex', - props: ['storagePlaceId'], + props: { + storagePlaceId: { + type: Object + }, + OnlineMonEmissPointId: { + type: Number + }, + LabMonPointId: { + type: Number + } + }, components: { PublicSector, PublicTabs, @@ -84,52 +94,49 @@ display: flex; align-items: center; justify-content: space-between; - padding: 5px 0; + padding-left: 0.07rem; border-bottom: 1px #243a55 solid; - .navigation-left { display: flex; align-items: center; .uncheck { - margin: 0 10px; cursor: pointer; - padding: 5px; + margin-left: -0.05rem; + width: .8rem; + padding: 6px 0; /*border: 1px solid #2b87c8;*/ /*border-radius: 4px;*/ + background-position: 0 0; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("../../../../public/assets/images/map-pages/title_bg.png"); text-align: center; vertical-align: middle !important; color: #fff; - -webkit-transform: skew(30deg); - -moz-transform: skew(30deg); - -o-transform: skew(30deg); - transform: skew(15deg); } .default-uncheck { background-color: #0e639e; - color: #fff; + color: #C0C0C0; cursor: pointer; } .hover { - background-color: #0e639e; - color: #fff; + background-image: url("../../../../public/assets/images/map-pages/title_bg2.png"); + color: #ffffff; cursor: pointer; } .hover:hover { cursor: pointer; - padding: 5px; - border: 1px solid #2b87c8; border-radius: 4px; text-align: center; - color: #fff; + color: #F0FFFF; } } .navigation-left :hover { - background-color: #0e639e; color: #fff; cursor: pointer; } @@ -151,7 +158,6 @@ .public-part { position: relative; - background-color: @background-color; font-size: 0.06rem; font-weight: normal; diff --git a/src/components/base-page/WasteGas/WasteGasRealChart.vue b/src/components/base-page/WasteGas/WasteGasRealChart.vue index d8de3cf..5cb6fc1 100644 --- a/src/components/base-page/WasteGas/WasteGasRealChart.vue +++ b/src/components/base-page/WasteGas/WasteGasRealChart.vue @@ -1,5 +1,5 @@ <template> - <div class="echarts-box"> + <div id="wasteGasRealChartBox" class="echarts-box"> <div class="tab-scroll"> <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> </div> @@ -9,7 +9,7 @@ <span class="demonstration">缁撴潫鏃堕棿锛�</span> <el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker> <span class="demonstration">閲囨牱鐐规暟锛�</span> - <el-select v-model="formData.region" placeholder="璇烽�夋嫨" size="mini"> + <el-select class="selectBox" v-model="formData.region" placeholder="璇烽�夋嫨" size="mini"> <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> @@ -497,8 +497,11 @@ } }, grid: { - top: '40px', - bottom: '30px' + // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁$畻 + top: '20%', + left: '6%', + right: '6%', + bottom: '12%' }, legend: { data: legend @@ -602,8 +605,8 @@ } </script> -<style scoped lang="less"> -.echarts-box { +<style lang="less"> +#wasteGasRealChartBox { .echarts-form { .demonstration { color: #00fff6; @@ -639,4 +642,29 @@ content: " "; } } +#wasteGasRealChartBox .echarts-form .el-input__inner { + background-color: rgba(0, 0, 0, 0); + height: .13rem; + border-color: #336fa4; +} +#wasteGasRealChartBox .echarts-form{ + margin-top: 1px +} +#wasteGasRealChartBox .echarts-form .el-input__icon{ + height: .13rem; + top: -.02rem; + right: -0.03rem; + position: absolute; + color: #00d0f9; +} +#wasteGasRealChartBox .echarts-form .selectBox .el-input__icon:last-child{ + top: .02rem; +} +#wasteGasRealChartBox .echarts-form .selectBox .is-reverse{ + top: -.02rem !important; +} +#wasteGasRealChartBox .echarts-form .el-button{ + background-color: rgba(0, 0, 0, 0); + height: .13rem; +} </style> diff --git a/src/components/base-page/WasteWater/Detail.vue b/src/components/base-page/WasteWater/Detail.vue index 91a92be..37e8999 100644 --- a/src/components/base-page/WasteWater/Detail.vue +++ b/src/components/base-page/WasteWater/Detail.vue @@ -1,5 +1,5 @@ <template> - <div class="detail" style="width: 5rem"> + <div id="wasteWaterDetailBox" class="detail" style="width: 5rem"> <el-table :data="tableData" style="width: 100%;" height="2.07rem"> <el-table-column prop="LabMonTime" label="妫�娴嬫椂闂�"></el-table-column> <el-table-column label="COD"> @@ -56,8 +56,15 @@ timeStart: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss') } }, + props: { + LabMonPointId: { + type: Number + } + }, mounted () { - this.initdetail() + this.$nextTick(() => { + this.initdetail() + }) }, methods: { async initdetail () { @@ -71,13 +78,13 @@ timeStart = dayjs().subtract(365, 'day').format('YYYY-MM-DD HH:mm:ss') } const data = { - poltSourceId: '', - poltMtrlId: '', - companyCode: '', - emissTypeId: '', - monItemId: 28, companyId: 3900100145, - labMonPointId: 219, + companyCode: '', + poltSourceId: '', + labMonPointId: this.LabMonPointId ? this.LabMonPointId : '', + poltMtrlId: '', + monItemId: '28,31,35', + emissTypeId: '', beginTime: timeStart, endTime: timeEnd } diff --git a/src/components/base-page/WasteWater/WasteWaterDayChart.vue b/src/components/base-page/WasteWater/WasteWaterDayChart.vue index 808879d..dac9ad0 100644 --- a/src/components/base-page/WasteWater/WasteWaterDayChart.vue +++ b/src/components/base-page/WasteWater/WasteWaterDayChart.vue @@ -150,6 +150,11 @@ ] } }, + props: { + OnlineMonEmissPointId: { + type: Number + } + }, mounted () { this.$nextTick(() => { this.draw24Chart() diff --git a/src/components/base-page/WasteWater/WasteWaterHoursChart.vue b/src/components/base-page/WasteWater/WasteWaterHoursChart.vue index a4b7d6c..3b8c74b 100644 --- a/src/components/base-page/WasteWater/WasteWaterHoursChart.vue +++ b/src/components/base-page/WasteWater/WasteWaterHoursChart.vue @@ -153,8 +153,15 @@ ] } }, + props: { + OnlineMonEmissPointId: { + type: Number + } + }, mounted () { - this.draw24Chart() + this.$nextTick(() => { + this.draw24Chart() + }) }, methods: { // 鐐瑰嚮鏌ヨ鍔熻兘 diff --git a/src/components/base-page/WasteWater/WasteWaterIndex.vue b/src/components/base-page/WasteWater/WasteWaterIndex.vue index b8e3f42..38dc2a7 100644 --- a/src/components/base-page/WasteWater/WasteWaterIndex.vue +++ b/src/components/base-page/WasteWater/WasteWaterIndex.vue @@ -25,7 +25,7 @@ <i style=" background: #fc1d04;"></i> </div> </div> - <component :is="currentTab" ref="RealData"></component> + <component :is="currentTab" :OnlineMonEmissPointId="OnlineMonEmissPointId" :LabMonPointId='LabMonPointId' ref="RealData"></component> </div> </template> <!-- <template v-slot:video> @@ -47,7 +47,17 @@ export default { name: 'WasteWaterIndex', - props: ['storagePlaceId'], + props: { + storagePlaceId: { + type: Object + }, + OnlineMonEmissPointId: { + type: Number + }, + LabMonPointId: { + type: Number + } + }, components: { PublicSector, PublicTabs, -- Gitblit v1.8.0