From 4e725a04dbe02d7c631a82da0526c5ef5defa15c Mon Sep 17 00:00:00 2001
From: ChenZeping <chenzeping123>
Date: 星期二, 27 四月 2021 11:19:49 +0800
Subject: [PATCH] 弹框废水固废问题修改
---
src/components/BaseNav/WasteWater/WasteWaterRealChart.vue | 3
package.json | 2
src/components/BaseNav/WasteSolid/PublicTable.vue | 19 +
src/components/BaseNav/WasteWater/WasteWaterHoursChart.vue | 583 +++++++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 600 insertions(+), 7 deletions(-)
diff --git a/package.json b/package.json
index 10c11c1..49b8c35 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
},
"dependencies": {
"@jiaminghi/data-view": "^2.10.0",
+ "audit": "0.0.6",
"axios": "^0.21.1",
"babel-polyfill": "^6.26.0",
"core-js": "^3.6.5",
@@ -20,6 +21,7 @@
"echarts": "^4.2.1",
"element-ui": "^2.14.1",
"esri-leaflet": "^3.0.1",
+ "fix": "0.0.6",
"fullscreen": "^1.1.1",
"jquery": "^3.5.1",
"js-cookie": "^2.2.0",
diff --git a/src/components/BaseNav/WasteSolid/PublicTable.vue b/src/components/BaseNav/WasteSolid/PublicTable.vue
index 4df793c..a293589 100644
--- a/src/components/BaseNav/WasteSolid/PublicTable.vue
+++ b/src/components/BaseNav/WasteSolid/PublicTable.vue
@@ -54,11 +54,11 @@
]
}
},
- mounted () {
- this.$nextTick(() => {
- // this.listData.push(this.listData2, {}, {}, {}, {}, {})
- })
- },
+ // mounted () {
+ // this.$nextTick(() => {
+ //
+ // })
+ // },
methods: {
async refsDataTable (data) {
const StoragePlaceId = {
@@ -66,6 +66,8 @@
}
const result = await mapApi.getSolidWasteDetail(StoragePlaceId)
this.listData = result.Result.DataInfo[0]
+ this.listData.push({}, {}, {}, {}, {})
+ // console.log(this.listData)
},
// 闅旇棰滆壊璁剧疆
tableRowClassName ({
@@ -85,6 +87,13 @@
<style lang="less" scoped>
+/deep/ .el-table thead tr {
+ color: #02a6b5 !important;
+ //.el-table .has-gutter tr th .cell {
+ // //color: #fff; 435
+ //}
+}
+
/deep/ .el-table td {
border-bottom: none !important;
}
diff --git a/src/components/BaseNav/WasteWater/WasteWaterHoursChart.vue b/src/components/BaseNav/WasteWater/WasteWaterHoursChart.vue
new file mode 100644
index 0000000..8334982
--- /dev/null
+++ b/src/components/BaseNav/WasteWater/WasteWaterHoursChart.vue
@@ -0,0 +1,583 @@
+<template>
+ <div class="echarts-box">
+ <div class="tab-scroll">
+ <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
+ <span class="time-select">{{ formData.startTime }}鏃垛�攞{ formData.endTime }}鏃�</span>
+ </div>
+ <div class="echarts-form">
+ <span class="demonstration">寮�濮嬫椂闂达細</span>
+ <el-date-picker
+ v-model="formData.startTime"
+ value-format="yyyy-MM-dd HH"
+ type="datetime">
+ </el-date-picker>
+ <span class="demonstration">缁撴潫鏃堕棿锛�</span>
+ <el-date-picker
+ v-model="formData.endTime"
+ value-format="yyyy-MM-dd HH"
+ 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="echartsHour"></div>
+ </div>
+ </div>
+</template>
+
+<script>
+import PublicDataStandard from '../PublicDataStandard'
+import dayjs from 'dayjs'
+import mapApi from '../../../api/mapApi'
+
+export default {
+ name: 'WasteWaterHoursChart',
+ 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
+ }
+ }],
+ formData: {
+ region: '25',
+ regionList: [25, 50, 75, 100],
+ startTime: dayjs().subtract(16, 'hour').format('YYYY-MM-DD HH'),
+ endTime: dayjs().format('YYYY-MM-DD HH')
+ },
+ chart: null,
+ jcdID: 1,
+ dataType: 2,
+ bzz: null,
+ bzzList: [],
+ bz: ''
+ }
+ },
+ mounted () {
+ this.draw24Chart()
+ },
+ methods: {
+ // 鐐瑰嚮鏌ヨ鍔熻兘
+ querySearch () {
+
+ },
+ // 鍒濆鍖栨暟鎹姹�
+ async draw24Chart () {
+ const data = {
+ onLineMonEmissPointId: 23,
+ monItemId: 28,
+ beginTime: this.formData.startTime,
+ endTime: this.formData.endTime,
+ dataType: this.dataType
+ }
+ const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
+ // console.log(result)
+ this.get24HourDate(result)
+ },
+ // 缁樺埗灏忔椂鏁版嵁鎶樼嚎鍥�
+ get24HourDate (result) {
+ if (result.length > 0) {
+ const d = result
+ const nameList = [] // 瀛樻斁鍥句緥
+ const dateList = [] // 瀛樻斁鏃堕棿
+ let dataList = [] // 瀛樻斁鏁版嵁
+ let data = []
+ const bzh = []
+ for (let i = 0; i < d.length; i++) {
+ if (d[i].MonItemId === '29') {
+ continue
+ }
+
+ const MonTimeStr = d[i].MonTimeStr
+
+ 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)
+ 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)
+ }
+ }
+
+ const newList = []
+
+ for (let i = 0; i < dataList.length; i++) {
+ const list = dataList[i].reverse()
+ newList.push(list)
+ }
+ dataList = newList
+
+ 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] === '鎬荤７') {
+ 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] === '搴熸按娴侀噺') {
+ zdcbcolor = 'red'
+ zxcolor = '#8fdc6e'
+ }
+ 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(legend, xdata, ydatas, yname, this.jcdID, this.datatype)
+ }
+ },
+ effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
+ // console.log(ydatas)
+ // 鍒濆鍖栧浘鏍�
+ this.chart = this.$echarts.init(this.$refs.echartsHour)
+ this.chart.clear()
+ // const bzlist = this.bzzList
+ // const bzz = this.bz
+
+ let dataUnit = ''
+ if (datatype === 1) {
+ dataUnit = '娴侀噺(m鲁/d)'
+ } else {
+ dataUnit = '娴侀噺(m鲁/h)'
+ }
+ 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 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
+ 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: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺
+ 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 < 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)
+ }
+ const option = {
+ 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 === '鎬荤７') {
+ 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">
+
+</style>
diff --git a/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue b/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue
index 8d6654b..b5be07f 100644
--- a/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue
+++ b/src/components/BaseNav/WasteWater/WasteWaterRealChart.vue
@@ -510,8 +510,7 @@
}
},
grid: {
- top: '20%',
- left: '15%'
+ top: '20%'
},
legend: {
data: this.legendList
--
Gitblit v1.8.0