From dd087d8c1b1406d8438d80e02a71cc77595e7e10 Mon Sep 17 00:00:00 2001
From: seatonwan9 <seatonwan9@163.com>
Date: 星期一, 31 五月 2021 13:34:26 +0800
Subject: [PATCH] 治理设施查询
---
src/components/base-page/GovernEquipment/WasteWaterRealChart.vue | 643 +++++++++++++
src/components/panel/RightSearchPanel.vue | 6
src/components/LayerController/logic/GovernEquipment.js | 4
src/conf/Topic.js | 2
src/components/base-page/GovernEquipment/WasteWaterIndex.vue | 208 ++++
src/components/base-page/GovernEquipment/WasteWaterHoursChart.vue | 736 +++++++++++++++
/dev/null | 233 ----
src/components/panel/topicSearch/EnvRiskSearch.vue | 10
src/components/panel/topicSearch/PollutionSourceSearch.vue | 130 ++
src/components/base-page/GovernEquipment/Detail.vue | 113 ++
src/components/base-page/GovernEquipment/WasteWaterDayChart.vue | 718 ++++++++++++++
src/components/base-page/GovernEquipment/PublicTabs.vue | 117 ++
public/assets/governEquipment.json | 2
13 files changed, 2,678 insertions(+), 244 deletions(-)
diff --git a/public/assets/governEquipment.json b/public/assets/governEquipment.json
index 7e47157..8d4c015 100644
--- a/public/assets/governEquipment.json
+++ b/public/assets/governEquipment.json
@@ -20,7 +20,7 @@
"status": 1
},
{
- "no": 1,
+ "no": 2,
"company": "澶╂触鐭冲寲",
"plate": "鐐兼补鏉垮潡",
"unitName": "鍖栧伐閮�",
diff --git a/src/components/LayerController/logic/GovernEquipment.js b/src/components/LayerController/logic/GovernEquipment.js
index 87e7223..fc2b021 100644
--- a/src/components/LayerController/logic/GovernEquipment.js
+++ b/src/components/LayerController/logic/GovernEquipment.js
@@ -2,7 +2,7 @@
* 姹℃煋婧�
*/
// 淇℃伅缁勪欢
-const GovernEquipmentIndex = require('../../base-page/RiskSource/RiskSourceIndex.vue').default
+const GovernEquipmentIndex = require('../../base-page/GovernEquipment/WasteWaterIndex').default
// 浣跨敤灏佽鏂规硶
const AnimalService = require('../service/AnimalService').default
// 璇锋眰鎺ュ彛鏁版嵁
@@ -63,7 +63,7 @@
comp: GovernEquipmentIndex, // 缁勪欢
parent: this, // 鐖剁粍浠�
data: { // 浼犻�掔殑鍙傛暟
- riskSourceId: e.layer.options.totransferData.no
+ governId: e.layer.options.totransferData.no
}
},
title: title // 鏍囬
diff --git a/src/components/base-page/GovernEquipment/Detail.vue b/src/components/base-page/GovernEquipment/Detail.vue
new file mode 100644
index 0000000..37e8999
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/Detail.vue
@@ -0,0 +1,113 @@
+<template>
+ <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">
+ <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="80"></el-table-column>
+ <el-table-column prop="LabMonValue" label="鏍囧噯鍊�" width="80"></el-table-column>
+ </el-table-column>
+ <el-table-column label="姘ㄦ爱">
+ <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="80"></el-table-column>
+ <el-table-column prop="LabMonValue" label="鏍囧噯鍊�" width="80"></el-table-column>
+ </el-table-column>
+ <el-table-column label="鎬荤７">
+ <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="80"></el-table-column>
+ <el-table-column prop="LabMonValue" label="鏍囧噯鍊�" width="80"></el-table-column>
+ </el-table-column>
+ <el-table-column label="鎬绘爱">
+ <el-table-column prop="LabMonValue" label="鐩戞祴鍊�" width="80"></el-table-column>
+ <el-table-column prop="LabMonValue" label="鏍囧噯鍊�" width="80"></el-table-column>
+ </el-table-column>
+ <!-- <el-table-column-->
+ <!-- fixed="right"-->
+ <!-- label="鑻�">-->
+ <!-- <el-table-column-->
+ <!-- fixed="right"-->
+ <!-- prop="LabMonValue"-->
+ <!-- label="鐩戞祴鍊�">-->
+ <!-- </el-table-column>-->
+ <!-- <el-table-column-->
+ <!-- fixed="right"-->
+ <!-- prop="StdValue"-->
+ <!-- label="鏍囧噯鍊�">-->
+ <!-- </el-table-column>-->
+ <!-- </el-table-column>-->
+ </el-table>
+ </div>
+</template>
+
+<script>
+
+// import PublicDataStandard from '../PublicDataStandard'
+// import mapApi from '@/api/mapApi'
+import mapApi from '../../../api/mapApi'
+import 'dayjs/locale/es'
+import dayjs from 'dayjs'
+
+export default {
+ name: 'Detail',
+ components: {
+ // PublicDataStandard
+ },
+ data () {
+ return {
+ tableData: [],
+ timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+ timeStart: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss')
+ }
+ },
+ props: {
+ LabMonPointId: {
+ type: Number
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.initdetail()
+ })
+ },
+ methods: {
+ async initdetail () {
+ const timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
+ var timeStart = null
+ var oDate = new Date()
+ var year = oDate.getFullYear()
+ if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { // 鍒ゆ柇鏄钩骞磋繕鏄棸骞�
+ timeStart = dayjs().subtract(366, 'day').format('YYYY-MM-DD HH:mm:ss')
+ } else {
+ timeStart = dayjs().subtract(365, 'day').format('YYYY-MM-DD HH:mm:ss')
+ }
+ const data = {
+ companyId: 3900100145,
+ companyCode: '',
+ poltSourceId: '',
+ labMonPointId: this.LabMonPointId ? this.LabMonPointId : '',
+ poltMtrlId: '',
+ monItemId: '28,31,35',
+ emissTypeId: '',
+ beginTime: timeStart,
+ endTime: timeEnd
+ }
+ const result = (await mapApi.getQueryLabMonData(data)).Result.DataInfo
+ // console.log(result)
+ this.tableData = result
+ for (let i = 0; i < result.length; i++) {
+ if (result[i].LabMonValue === '0') {
+ return '-'
+ }
+ }
+ }
+ }
+}
+
+</script>
+
+<style scoped>
+/deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
+ background: none;
+}
+
+/*/deep/ .el-table {*/
+/* border: none !important;*/
+/*}*/
+</style>
diff --git a/src/components/base-page/GovernEquipment/PublicTabs.vue b/src/components/base-page/GovernEquipment/PublicTabs.vue
new file mode 100644
index 0000000..1f08bb6
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/PublicTabs.vue
@@ -0,0 +1,117 @@
+<template>
+ <div class="win">
+ <div class="border_corner border_corner_left_top"></div>
+ <div class="border_corner border_corner_right_top"></div>
+ <div class="border_corner border_corner_left_bottom"></div>
+ <div class="border_corner border_corner_right_bottom"></div>
+ <div class="main">
+ <div class="main-matter">
+ <div>
+ <ul>
+ <li><span class="namer">鐩戞祴鐐瑰悕绉帮細</span>{{ storagePlaceId.Name }}</li>
+ <li><span class="namer">鐢熶骇鍗曚綅锛�</span>{{ storagePlaceId.porltName }}</li>
+ <li><span class="namer">鎺掓斁绫诲瀷鍚嶇О锛�</span>{{ storagePlaceId.MonTypeName }}</li>
+ <li><span class="namer">鎺掓斁鍘诲悜锛�</span>{{ storagePlaceId.EmissDirecti }}</li>
+ <li><span class="namer">鎺у埗绾у埆鍚嶇О锛�</span>{{ storagePlaceId.ContrLevelShowName }}</li>
+ <li><span class="namer">鍐�/澶栨帓鏀惧彛锛�</span>{{ storagePlaceId.OrOutPortName }}</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+// import mapApi from '../../../api/mapApi'
+
+export default {
+ name: 'WaterTabs',
+ props: ['storagePlaceId'],
+ data () {
+ return {}
+ }
+}
+</script>
+
+<style scoped lang="less">
+
+.win {
+ position: relative;
+ margin-bottom: 0.04rem;
+ background-color: @background-color;
+}
+
+.main {
+
+ .main-matter {
+ font-size: 0.06rem;
+ font-weight: normal;
+ padding: 0.04rem 0;
+ border: 1px solid #396d83;
+
+ ul {
+ //width: 100%;
+ //height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ margin-bottom: -0.04rem;
+
+ li {
+ margin-bottom: 0.04rem;
+ min-width: 31%;
+ 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%;
+ .namer{
+ display: inline-block;
+ width: .6rem;
+ text-align: right;
+ }
+ }
+
+ }
+ }
+}
+
+.border_corner {
+ z-index: 999;
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background: rgba(0, 0, 0, 0);
+ border: 1px solid #47d5ea;
+}
+
+.border_corner_left_top {
+ top: 0;
+ left: 0;
+ border-right: none;
+ border-bottom: none;
+}
+
+.border_corner_right_top {
+ top: 0;
+ right: 0;
+ border-left: none;
+ border-bottom: none;
+}
+
+.border_corner_left_bottom {
+ bottom: 0;
+ left: 0;
+ border-right: none;
+ border-top: none;
+}
+
+.border_corner_right_bottom {
+ bottom: 0;
+ right: 0;
+ border-left: none;
+ border-top: none;
+}
+</style>
diff --git a/src/components/base-page/GovernEquipment/WasteWaterDayChart.vue b/src/components/base-page/GovernEquipment/WasteWaterDayChart.vue
new file mode 100644
index 0000000..dac9ad0
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/WasteWaterDayChart.vue
@@ -0,0 +1,718 @@
+<template>
+ <div id="wasteWaterDayChartBox" class="echarts-box">
+ <div class="tab-scroll">
+ <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
+ </div>
+ <div class="echarts-form">
+ <span class="demonstration">寮�濮嬫椂闂达細</span>
+ <el-date-picker v-model="formData.timeStart" value-format="yyyy-MM-dd" type="datetime" size="mini"></el-date-picker>
+ <span class="demonstration">缁撴潫鏃堕棿锛�</span>
+ <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd" type="datetime" size="mini"></el-date-picker>
+ <span class="demonstration">閲囨牱鐐规暟锛�</span>
+ <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-popover
+ placement="top"
+ width="100%"
+ popper-class="popoverBoxStyle"
+ trigger="click">
+ <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
+ <el-button slot="reference" id="mingxiBtn">鏄庣粏琛�</el-button>
+ </el-popover>
+ </div>
+ <div class="echarts-chart">
+ <div ref="echartsDay"></div>
+ </div>
+ <span class="time-select">{{ formData.timeStart }}鏃モ�攞{ formData.timeEnd }}鏃�</span>
+ </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import PublicDataStandard from '../PublicDataStandard'
+import mapApi from '@/api/mapApi'
+import DynamicTable from '../../../views/popup/DynamicHeader/DynamicTable' // 澶氱骇琛ㄥご
+
+export default {
+ name: 'WasteWaterDayChart',
+ components: {
+ PublicDataStandard,
+ DynamicTable
+ },
+ data () {
+ return {
+ // tab鏍忎紶閫掓帴鏀舵暟鎹�
+ dataStandard: [],
+ tableData: null,
+ formData: {
+ region: '25',
+ regionList: [25, 50, 75, 100],
+ timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
+ timeEnd: dayjs().format('YYYY-MM-DD')
+ },
+ chart: null,
+ dataType: 1,
+ jcdID: 1,
+ bzz: null,
+ bzzList: [],
+ // 琛ㄥご鏁版嵁
+ tableConfig: [
+ {
+ id: 100,
+ label: '鎺掓斁鐐�',
+ prop: 'OnLineMonEmissPointName'
+ },
+ {
+ id: 200,
+ label: '鐩戞祴鏃堕棿',
+ prop: 'MonTimeStr'
+ },
+ {
+ id: 300,
+ label: 'COD',
+ prop: 'PoltmtrlName',
+ children: [
+ {
+ id: 310,
+ label: '瀹炴祴鎺掓斁閲忥紙kg/h锛�',
+ prop: 'COD_EmissQty'
+ },
+ {
+ id: 320,
+ label: '瀹炴祴娴撳害锛坢g/l锛�',
+ prop: 'COD_MonQty'
+ },
+ {
+ id: 330,
+ label: '鏍囧噯鍊硷紙mg/l锛�',
+ prop: 'COD_StdValue'
+ }
+ ]
+ },
+ {
+ id: 400,
+ label: '姘ㄦ爱',
+ prop: 'PoltmtrlName',
+ children: [
+ {
+ id: 410,
+ label: '瀹炴祴鎺掓斁閲忥紙kg/h锛�',
+ prop: '姘ㄦ爱_EmissQty'
+ },
+ {
+ id: 420,
+ label: '瀹炴祴娴撳害锛坢g/l锛�',
+ prop: '姘ㄦ爱_MonQty'
+ },
+ {
+ id: 430,
+ label: '鏍囧噯鍊硷紙mg/l锛�',
+ prop: '姘ㄦ爱_StdValue'
+ }
+ ]
+ },
+ {
+ id: 500,
+ label: 'PH',
+ prop: 'PoltmtrlName',
+ children: [
+ {
+ id: 510,
+ label: '瀹炴祴鎺掓斁閲忥紙kg/h锛�',
+ prop: 'pH_EmissQty'
+ },
+ {
+ id: 520,
+ label: '瀹炴祴娴撳害锛坢g/l锛�',
+ prop: 'pH_MonQty'
+ },
+ {
+ id: 530,
+ label: '鏍囧噯鍊硷紙mg/l锛�',
+ prop: 'pH_StdValue'
+ }
+ ]
+ },
+ {
+ id: 600,
+ label: '搴熸按娴侀噺',
+ prop: '',
+ children: [
+ {
+ id: 610,
+ label: '瀹炴祴娴侀噺锛坢鲁/h锛�',
+ prop: '搴熸按娴侀噺_MonQty'
+ }
+ ]
+ }
+ ]
+ }
+ },
+ props: {
+ OnlineMonEmissPointId: {
+ type: Number
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.draw24Chart()
+ })
+ },
+ methods: {
+ querySearch () {
+ this.draw24Chart()
+ },
+ async draw24Chart () {
+ const data = {
+ poltSourceId: '',
+ poltMtrlId: '',
+ emissTypeId: '',
+ onLineMonEmissPointId: 23,
+ monItemId: '28,31,35', // 鐩戞祴椤� COD銆佹皑姘�丳H
+ beginTime: this.formData.timeStart,
+ endTime: this.formData.timeEnd,
+ dataType: this.dataType
+ }
+ const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
+ this.get24HourDate(result)
+ },
+ get24HourDate (res) {
+ if (res.length > 0) {
+ this.dataStandard = []
+ this.tableData = this.analysisResult(res) // 灏忔椂鏄庣粏琛ㄨВ鏋愮粨鏋�
+ // 澶勭悊鏁版嵁寮�濮�
+ const d = res
+ const nameList = [] // 瀛樻斁鍥句緥
+ const dateList = [] // 瀛樻斁鏃堕棿
+ const dataList = [] // 瀛樻斁鏁版嵁
+ let data
+ const bzh = []
+
+ for (let i = 0; i < d.length; i++) {
+ if (d[i].MonItemId === '29') {
+ continue
+ }
+ const MonTimeStr = d[i].MonTimeStr
+
+ const d1 = MonTimeStr.split('/')
+ // let d2=d1[2].split(' ');
+ let strDate
+ if (d1[1] > 9) {
+ // if(d2[0]>9){
+ strDate = MonTimeStr.substring(8, 10) + '鏃�'
+ // }else {
+ // strDate=MonTimeStr.substring(8,9)+"鏃�";
+ // }
+ } else {
+ // if(d2[0]>9){
+ strDate = MonTimeStr.substring(7, 9) + '鏃�'
+ // }else {
+ // strDate=MonTimeStr.substring(7,8)+"鏃�";
+ // }
+ }
+
+ if (nameList.length === 0) {
+ nameList.push(d[i].PoltmtrlName.trim())
+ dateList.push(strDate)
+ 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: []
+ }
+ 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)
+ bzh.push(d[i].StdValue)
+ this.dataStandard.push({
+ current: {
+ name: d[i].PoltmtrlName.trim(),
+ val: ''
+ },
+ standard: {
+ name: '鏍囧噯',
+ val: ''
+ }
+ })
+ data = {
+ name: d[i].PoltmtrlName.trim(),
+ data: []
+ }
+ if (d[i].MonQty !== null) {
+ data.data.push(d[i].MonQty)
+ }
+ dataList.push(data)
+ } else {
+ if (dateList.indexOf(strDate) < 0) {
+ dateList.push(strDate)
+ }
+ for (let j = 0; j < dataList.length; j++) {
+ if (d[i].PoltmtrlName.trim() === dataList[j].name) {
+ if (d[i].MonQty !== null)dataList[j].data.push(d[i].MonQty)
+ }
+ }
+ }
+ }
+ // 澶勭悊鏁版嵁缁撴潫
+
+ 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)
+ }
+
+ this.bzz = {
+ name: nameList[l],
+ bzhui: bzh[l]
+ }
+ this.bzzList.push(this.bzz)
+ }
+ 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 = '#f48183'
+ } else if (nameList[j] === '鎬绘爱') {
+ zdcbcolor = 'red'
+ zxcolor = '#d9f2f4'
+ } else {
+ zdcbcolor = 'red'
+ zxcolor = '#9ACD32'
+ }
+
+ let sdata = []
+
+ for (let k = 0; k < dataList.length; k++) {
+ if (nameList[j].trim() === dataList[k].name.trim()) {
+ sdata = dataList[k].data.reverse()
+ }
+ }
+
+ const ydata = {
+ name: nameList[j],
+ data: sdata,
+ zdcbcolor: zdcbcolor,
+ zxcolor: zxcolor,
+ bzz: bzh[j]
+ }
+ ydatas.push(ydata)
+ }
+ 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
+ }
+ const yname = '娴撳害(mg/l)'
+ this.effChartShow(legend, xdata, ydatas, yname, this.jcdID, this.datatype)
+ }
+ },
+ effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
+ this.chart = this.$echarts.init(this.$refs.echartsDay)
+ this.chart.clear()
+ this.chart.clear()
+ 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) {
+ 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: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺
+ 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 = {
+ /* 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 === '鎬荤７') {
+ 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:#d9f2f4;"></span>'
+ } else {
+ maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>'
+ }
+ s += maker + seriesName + ':' + valueFliter + '<br />'
+ }
+ return s
+ }
+ },
+ toolbox: { // 鎵撳嵃绛夊伐鍏�
+ show: false,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁＄畻
+ top: '20%',
+ left: '6%',
+ right: '6%',
+ bottom: '12%'
+ },
+ 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
+ },
+ 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 + '_EmissQty'] = rgdata.EmissQty ? rgdata.EmissQty.toFixed(2) : '--'
+ el[rgdata.PoltmtrlName + '_MonQty'] = rgdata.MonQty ? rgdata.MonQty.toFixed(2) : '--'
+ el[rgdata.PoltmtrlName + '_StdValue'] = rgdata.StdValue ? rgdata.StdValue.toFixed(2) : '--'
+ }
+ let FSLLtemp = null
+ for (var key in json) {
+ if (key === '搴熸按娴侀噺' || key === '搴熸按') {
+ FSLLtemp = key
+ } else {
+ arr.push(key)
+ }
+ }
+ if (FSLLtemp != null) {
+ arr.push(FSLLtemp)
+ }
+ for (var p in dataMap) {
+ bodyDataList.push(dataMap[p])
+ }
+ return bodyDataList
+ }
+ }
+}
+</script>
+
+<style lang="less">
+#wasteWaterDayChartBox .echarts-form .el-input__inner {
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+ border-color: #336fa4;
+}
+#wasteWaterDayChartBox .echarts-form{
+ margin-top: 1px
+}
+#wasteWaterDayChartBox .echarts-form .el-input__icon{
+ height: .13rem;
+ top: -.02rem;
+ right: -0.03rem;
+ position: absolute;
+ color: #00d0f9;
+}
+#wasteWaterDayChartBox .echarts-form .selectBox .el-input__icon:last-child{
+ top: .02rem;
+}
+#wasteWaterDayChartBox .echarts-form .selectBox .is-reverse{
+ top: -.02rem !important;
+}
+#wasteWaterDayChartBox .echarts-form .el-button{
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+}
+#mingxiBtn{
+ margin-left: -.02rem;
+}
+</style>
diff --git a/src/components/base-page/GovernEquipment/WasteWaterHoursChart.vue b/src/components/base-page/GovernEquipment/WasteWaterHoursChart.vue
new file mode 100644
index 0000000..3b8c74b
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/WasteWaterHoursChart.vue
@@ -0,0 +1,736 @@
+<template>
+ <div id="wasteWaterHoursChartBox" class="echarts-box">
+ <div class="tab-scroll">
+ <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
+ </div>
+ <div class="echarts-form">
+ <span class="demonstration">寮�濮嬫椂闂达細</span>
+ <el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd HH" type="datetime" size="mini"></el-date-picker>
+ <span class="demonstration">缁撴潫鏃堕棿锛�</span>
+ <el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH" type="datetime" size="mini"></el-date-picker>
+ <span class="demonstration">閲囨牱鐐规暟锛�</span>
+ <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-popover
+ placement="top"
+ width="100%"
+ popper-class="popoverBoxStyle"
+ trigger="click">
+ <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
+ <el-button slot="reference" id="mingxiBtn">鏄庣粏琛�</el-button>
+ </el-popover>
+ </div>
+ <div class="echarts-chart">
+ <div ref="echartsHour"></div>
+ </div>
+ <span class="time-select">{{ formData.startTime }}鏃垛�攞{ formData.endTime }}鏃�</span>
+ </div>
+</template>
+
+<script>
+import PublicDataStandard from '../PublicDataStandard'
+import dayjs from 'dayjs'
+import mapApi from '../../../api/mapApi'
+import DynamicTable from '../../../views/popup/DynamicHeader/DynamicTable' // 澶氱骇琛ㄥご
+
+export default {
+ name: 'WasteWaterHoursChart',
+ components: {
+ PublicDataStandard,
+ DynamicTable
+ },
+ data () {
+ return {
+ // tab鏍忎紶閫掓帴鏀舵暟鎹�
+ dataStandard: [],
+ popUpName: '',
+ tableData: null,
+ mingxiBoxHtml: '',
+ formData: {
+ region: '25',
+ regionList: [25, 50, 75, 100],
+ startTime: dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss'),
+ endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
+ },
+ chart: null,
+ jcdID: 1,
+ dataType: 2,
+ bzz: null,
+ bzzList: [],
+ bz: '',
+ // 琛ㄥご鏁版嵁
+ tableConfig: [
+ {
+ id: 100,
+ label: '鎺掓斁鐐�',
+ prop: 'OnLineMonEmissPointName'
+ },
+ {
+ id: 200,
+ label: '鐩戞祴鏃堕棿',
+ prop: 'MonTimeStr'
+ },
+ {
+ id: 300,
+ label: 'COD',
+ prop: 'PoltmtrlName',
+ children: [
+ {
+ id: 310,
+ label: '瀹炴祴鎺掓斁閲忥紙kg/h锛�',
+ prop: 'COD_EmissQty'
+ },
+ {
+ id: 320,
+ label: '瀹炴祴娴撳害锛坢g/l锛�',
+ prop: 'COD_MonQty'
+ },
+ {
+ id: 330,
+ label: '鏍囧噯鍊硷紙mg/l锛�',
+ prop: 'COD_StdValue'
+ }
+ ]
+ },
+ {
+ id: 400,
+ label: '姘ㄦ爱',
+ prop: 'PoltmtrlName',
+ children: [
+ {
+ id: 410,
+ label: '瀹炴祴鎺掓斁閲忥紙kg/h锛�',
+ prop: '姘ㄦ爱_EmissQty'
+ },
+ {
+ id: 420,
+ label: '瀹炴祴娴撳害锛坢g/l锛�',
+ prop: '姘ㄦ爱_MonQty'
+ },
+ {
+ id: 430,
+ label: '鏍囧噯鍊硷紙mg/l锛�',
+ prop: '姘ㄦ爱_StdValue'
+ }
+ ]
+ },
+ {
+ id: 500,
+ label: 'PH',
+ prop: 'PoltmtrlName',
+ children: [
+ {
+ id: 510,
+ label: '瀹炴祴鎺掓斁閲忥紙kg/h锛�',
+ prop: 'pH_EmissQty'
+ },
+ {
+ id: 520,
+ label: '瀹炴祴娴撳害锛坢g/l锛�',
+ prop: 'pH_MonQty'
+ },
+ {
+ id: 530,
+ label: '鏍囧噯鍊硷紙mg/l锛�',
+ prop: 'pH_StdValue'
+ }
+ ]
+ },
+ {
+ id: 600,
+ label: '搴熸按娴侀噺',
+ prop: '',
+ children: [
+ {
+ id: 610,
+ label: '瀹炴祴娴侀噺锛坢鲁/h锛�',
+ prop: '搴熸按娴侀噺_MonQty'
+ }
+ ]
+ }
+ ]
+ }
+ },
+ props: {
+ OnlineMonEmissPointId: {
+ type: Number
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.draw24Chart()
+ })
+ },
+ methods: {
+ // 鐐瑰嚮鏌ヨ鍔熻兘
+ querySearch () {
+ this.draw24Chart()
+ },
+ // 鍒濆鍖栨暟鎹姹�
+ async draw24Chart () {
+ const data = {
+ poltSourceId: '',
+ poltMtrlId: '',
+ emissTypeId: '',
+ onLineMonEmissPointId: 23,
+ monItemId: '28,31,35', // 鐩戞祴椤� COD銆佹皑姘�丳H
+ beginTime: this.formData.startTime,
+ endTime: this.formData.endTime,
+ dataType: this.dataType
+ }
+ const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
+ this.popUpName = result[0].OnLineMonEmissPointName
+ this.get24HourDate(result)
+ },
+ // 缁樺埗灏忔椂鏁版嵁鎶樼嚎鍥�
+ get24HourDate (result) {
+ if (result.length > 0) {
+ this.dataStandard = []
+ this.tableData = this.analysisResult(result) // 灏忔椂鏄庣粏琛ㄨВ鏋愮粨鏋�
+ 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())
+ 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
+ }
+ 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
+ }
+ 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
+ }
+ 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
+ }
+ if (d[i].MonQty !== null)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)'
+ 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.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) {
+ 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: {}
+ }
+ },
+ legend: {
+ data: legend
+ },
+ grid: {
+ // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁＄畻
+ top: '20%',
+ left: '6%',
+ right: '6%',
+ bottom: '12%'
+ },
+ 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
+ },
+ 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 + '_EmissQty'] = rgdata.EmissQty ? rgdata.EmissQty.toFixed(2) : '--'
+ el[rgdata.PoltmtrlName + '_MonQty'] = rgdata.MonQty ? rgdata.MonQty.toFixed(2) : '--'
+ el[rgdata.PoltmtrlName + '_StdValue'] = rgdata.StdValue ? rgdata.StdValue.toFixed(2) : '--'
+ }
+ let FSLLtemp = null
+ for (var key in json) {
+ if (key === '搴熸按娴侀噺' || key === '搴熸按') {
+ FSLLtemp = key
+ } else {
+ arr.push(key)
+ }
+ }
+ if (FSLLtemp != null) {
+ arr.push(FSLLtemp)
+ }
+ for (var p in dataMap) {
+ bodyDataList.push(dataMap[p])
+ }
+ return bodyDataList
+ }
+ }
+}
+</script>
+<style>
+#wasteWaterHoursChartBox .echarts-form .el-input__inner {
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+ border-color: #336fa4;
+}
+#wasteWaterHoursChartBox .echarts-form .el-input__icon{
+ height: .13rem;
+ top: -.02rem;
+ right: -0.03rem;
+ position: absolute;
+ color: #00d0f9;
+}
+#wasteWaterHoursChartBox .echarts-form .selectBox .el-input__icon:last-child{
+ top: .02rem;
+}
+#wasteWaterHoursChartBox .echarts-form .selectBox .is-reverse{
+ top: -.02rem !important;
+}
+#wasteWaterHoursChartBox .echarts-form .el-button{
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+}
+#mingxiBtn{
+ margin-left: -.02rem;
+}
+</style>
diff --git a/src/components/base-page/GovernEquipment/WasteWaterIndex.vue b/src/components/base-page/GovernEquipment/WasteWaterIndex.vue
new file mode 100644
index 0000000..38dc2a7
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/WasteWaterIndex.vue
@@ -0,0 +1,208 @@
+<template>
+ <public-sector>
+ <template v-slot:tabs>
+ <public-tabs :storagePlaceId="storagePlaceId"></public-tabs>
+ </template>
+ <template v-slot:publicPart>
+ <div class="public-part">
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <div class="navigation">
+ <div class="navigation-left">
+ <div :class="active===0?'hover':''" class="uncheck" @click='tabTaggle("RealData",0)'>瀹炴椂鏁版嵁</div>
+ <div :class="active===1?'hover':''" class="uncheck" @click='tabTaggle("HourData",1)'>灏忔椂鏁版嵁</div>
+ <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" v-if="active !== 3">
+ <p>姝ｅ父</p>
+ <i style=" background: #4ec99c;"></i>
+ <p>棰勮</p>
+ <i style=" background: #fc9303;"></i>
+ <p>瓒呮爣</p>
+ <i style=" background: #fc1d04;"></i>
+ </div>
+ </div>
+ <component :is="currentTab" :OnlineMonEmissPointId="OnlineMonEmissPointId" :LabMonPointId='LabMonPointId' ref="RealData"></component>
+ </div>
+ </template>
+<!-- <template v-slot:video>
+ <public-video></public-video>
+ </template>-->
+ </public-sector>
+</template>
+
+<script>
+
+import PublicTabs from './PublicTabs'
+import PublicVideo from '../PublicVideo'
+import PublicSector from '../PublicSector'
+// 鍥捐〃缁勪欢
+import RealData from './WasteWaterRealChart'
+import HourData from './WasteWaterHoursChart'
+import DayData from './WasteWaterDayChart'
+import Detail from './Detail'
+
+export default {
+ name: 'WasteWaterIndex',
+ props: {
+ storagePlaceId: {
+ type: Object
+ },
+ OnlineMonEmissPointId: {
+ type: Number
+ },
+ LabMonPointId: {
+ type: Number
+ }
+ },
+ components: {
+ PublicSector,
+ PublicTabs,
+ PublicVideo,
+ RealData,
+ HourData,
+ DayData,
+ Detail
+ },
+ data () {
+ return {
+ activeName: 'first',
+ currentTab: RealData,
+ active: 0
+ }
+ },
+ methods: {
+ tabTaggle (taggleMenu, num) {
+ this.currentTab = taggleMenu
+ this.active = num
+ },
+ current (currentTab) {
+ currentTab = RealData
+ },
+ handleClick (tab, event) {
+ console.log(tab, event)
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.navigation {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: 0.07rem;
+ border-bottom: 1px #243a55 solid;
+ .navigation-left {
+ display: flex;
+ align-items: center;
+
+ .uncheck {
+ cursor: pointer;
+ 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;
+ }
+
+ .default-uncheck {
+ background-color: #0e639e;
+ color: #C0C0C0;
+ cursor: pointer;
+ }
+
+ .hover {
+ background-image: url("../../../../public/assets/images/map-pages/title_bg2.png");
+ color: #ffffff;
+ cursor: pointer;
+ }
+
+ .hover:hover {
+ cursor: pointer;
+ border-radius: 4px;
+ text-align: center;
+ color: #F0FFFF;
+ }
+ }
+
+ .navigation-left :hover {
+ color: #fff;
+ cursor: pointer;
+ }
+
+ .navigation-right {
+ display: flex;
+ align-items: center;
+
+ i {
+ display: block;
+ width: 0.1rem;
+ height: 0.1rem;
+ margin: 0 0.1rem 0 0.05rem;
+ border-radius: 50%;
+ border: 2px #ffffff solid;
+ }
+ }
+}
+
+.public-part {
+ position: relative;
+ background-color: @background-color;
+ font-size: 0.06rem;
+ font-weight: normal;
+ padding: 0.04rem 0;
+ border: 1px solid #396d83;
+}
+
+.public-part span:nth-child(1) {
+ position: absolute;
+ left: -2px;
+ top: -2px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 2px 0 0 2px;
+}
+
+.public-part span:nth-child(2) {
+ position: absolute;
+ right: -2px;
+ top: -2px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 2px 2px 0 0;
+}
+
+.public-part span:nth-child(3) {
+ position: absolute;
+ right: -2px;
+ bottom: -2px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 0 2px 2px 0;
+}
+
+.public-part span:nth-child(4) {
+ position: absolute;
+ left: -2px;
+ bottom: -2px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 0 0 2px 2px;
+}
+
+</style>
diff --git a/src/components/base-page/GovernEquipment/WasteWaterRealChart.vue b/src/components/base-page/GovernEquipment/WasteWaterRealChart.vue
new file mode 100644
index 0000000..670b975
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/WasteWaterRealChart.vue
@@ -0,0 +1,643 @@
+<template>
+ <div id="wasteWaterRealChartBox" class="echarts-box">
+ <div class="tab-scroll">
+ <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
+ </div>
+ <div class="echarts-form">
+ <span class="demonstration">寮�濮嬫椂闂达細</span>
+ <el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
+ <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 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>-->
+ </div>
+ <div class="echarts-chart">
+ <div ref="echarts"></div>
+ </div>
+ <span class="time-select">{{ formData.startTime }}鈥攞{ formData.endTime }}</span>
+ </div>
+</template>
+
+<script>
+
+import 'dayjs/locale/es'
+import dayjs from 'dayjs'
+
+import mapApi from '../../../api/mapApi'
+import PublicDataStandard from '../PublicDataStandard'
+
+export default {
+ name: 'WasteWaterRealChart',
+ 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(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
+ endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
+ },
+ // 鏁版嵁鍒嗙被澶勭悊瀛樺偍鍒楄〃
+ RealTimeDataList: [],
+ // 鐢ㄤ簬澶勭悊鏍囧噯鍊�
+ standardValues: null,
+ // 鏍囧噯鍊煎垪琛�
+ standardValuesList: [],
+ // 鐢ㄤ簬鍥捐〃灞曠ず璁剧疆鏁扮粍
+ nameList: [],
+ legendList: [],
+ ydatas: []
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.initEchartsData()
+ })
+ },
+ methods: {
+ // 鏌ヨ鎼滅储鍔熻兘
+ querySearch () {
+ this.initEchartsData()
+ },
+ // 鍒濆鍖栨暟鎹姹�
+ async initEchartsData () {
+ const data = {
+ $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
+ $startTime: this.formData.startTime,
+ $endTime: this.formData.endTime,
+ $step: 15
+ }
+ const result = (await mapApi.getDataItems(data)).data
+ // 鏁版嵁鎸夌被鍒垎缁�
+ this.pointsSet(result)
+ // 鍥炬爣瀛樺偍澶勭悊
+ this.legendSet()
+ // y杞磀ata鏁版嵁
+ this.yDataSet()
+ // 鏍规嵁宸叉湁鏁版嵁缁樺埗鍥捐〃
+ this.drawRealTimeDateChart()
+ },
+ // 鎺ュ彛鏁版嵁鎸夌収 鏁版嵁鍐呭垎绫诲埆璁剧疆
+ pointsSet (d) {
+ // 鏁扮粍鏁版嵁缃┖
+ this.nameList = []
+ this.RealTimeDataList = []
+
+ let data = []
+ let datalist = []
+
+ for (let i = 0; i < d.length; i++) {
+ // 鍒ゆ柇鏄惁缁х画鎵ц
+ if (d[i].ErrorMessage != null) {
+ continue
+ }
+
+ // temp 涓存椂鏁版嵁鍒ゆ柇鏂规硶
+ const tempList = [
+ {
+ 'TJIP45.lscl2tb552AISA11201B': 'COD',
+ 'TJIP45.lscl2tbAIA-10505-1': '姘ㄦ爱',
+ 'TJIP45.lscl2tbAIA-10505-2': '鎬荤７',
+ 'TJIP45.lscl2tb552AI10710': '鎬绘爱',
+ 'TJIP45.lscl2tb552AISA11202A': '搴熸按娴侀噺'
+ }
+ ]
+ // 鎸囨爣 涓存椂鐢ㄤ簬鏁版嵁澶勭悊
+ const name = tempList[0][d[i].UnionTagCode]
+
+ // 鍒ゆ柇甯傚眬绫诲瀷杩涜鍒嗙粍 =>鏁扮粍涓虹┖鏃�
+ if (this.nameList.length === 0) {
+ this.nameList.push(name)
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
+ }
+ datalist = {
+ name: name,
+ data: [data]
+ }
+ this.RealTimeDataList.push(datalist)
+ } else if (this.nameList.indexOf(name) < 0) {
+ // 娌℃湁鎸囨爣鏃�
+ this.nameList.push(name)
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
+ }
+ datalist = {
+ name: name,
+ data: [data]
+ }
+ this.RealTimeDataList.push(datalist)
+ } else if (i === d.length - 1) {
+ // 寰幆鍒版渶鍚�
+ if (this.nameList.indexOf(name) < 0) {
+ this.nameList.push(name)
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
+ }
+ datalist = {
+ name: name,
+ data: [data]
+ }
+ this.RealTimeDataList.push(datalist)
+ } else {
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
+ }
+ for (let k = 0; k < this.RealTimeDataList.length; k++) {
+ if (this.RealTimeDataList[k].name === name) {
+ this.RealTimeDataList[k].data.push(data)
+ }
+ }
+ }
+ } else {
+ const newDate = new Date(d[i].ReadTime)
+ data = {
+ name: name,
+ value: [newDate, d[i].TagValue]
+ }
+ for (let k = 0; k < this.RealTimeDataList.length; k++) {
+ if (this.RealTimeDataList[k].name === name) {
+ this.RealTimeDataList[k].data.push(data)
+ }
+ }
+ }
+ }
+ },
+ // legend绫诲埆鍥捐〃灞曠ず璁剧疆鏁扮粍
+ legendSet () {
+ this.legendList = []
+ let objTemp
+ for (let l = 0; l < this.nameList.length; l++) {
+ let obj
+ let IconUrl
+ 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/YanChen.png'
+ } 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] === '搴熸按娴侀噺') { // 灏嗗簾姘存祦閲忔帓鍒版暟缁勬渶鍚�
+ objTemp = {
+ name: this.nameList[l],
+ icon: IconUrl,
+ textStyle: {
+ color: '#ccc'
+ },
+ itemWidth: 20,
+ itemHeight: 5
+ }
+ } else {
+ obj = {
+ name: this.nameList[l],
+ icon: IconUrl,
+ textStyle: {
+ color: '#ccc'
+ },
+ itemWidth: 20,
+ itemHeight: 5
+ }
+ this.legendList.push(obj)
+ }
+ }
+ this.legendList.push(objTemp)
+ },
+ // yDataSet 鏁版嵁澶勭悊
+ yDataSet () {
+ // 鏁扮粍娣诲姞鏁版嵁 缃┖
+ this.standardValuesList = []
+ this.ydatas = []
+ for (let j = 0; j < this.nameList.length; j++) {
+ let pointColor, lineColor
+ if (this.nameList[j] === 'COD') {
+ pointColor = 'red'
+ lineColor = '#ffff00'
+ } else if (this.nameList[j] === '姘ㄦ爱') {
+ pointColor = 'red'
+ lineColor = '#00B0F0'
+ } else if (this.nameList[j] === '鎬荤７') {
+ pointColor = 'red'
+ lineColor = '#f48183'
+ } else if (this.nameList[j] === '鎬绘爱') {
+ pointColor = 'red'
+ lineColor = '#e0ffff'
+ } else if (this.nameList[j] === '搴熸按娴侀噺') {
+ pointColor = 'red'
+ lineColor = '#9ACD32'
+ }
+
+ // 涓存椂鏁版嵁
+ const BBZMAPPING = {
+ COD: 35,
+ 姘ㄦ爱: 30,
+ 鎬荤７: 0.3,
+ 鎬绘爱: 15,
+ 搴熸按娴侀噺: 3
+ }
+ for (let m = 0; m < this.RealTimeDataList.length; m++) {
+ let stdValue = null
+ if (this.RealTimeDataList[m].name === this.nameList[j]) {
+ stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
+ this.standardValues = {
+ name: this.nameList[j],
+ standardValue: stdValue
+ }
+ const yData = {
+ name: this.nameList[j],
+ data: this.RealTimeDataList[m].data,
+ pointColor: pointColor,
+ lineColor: lineColor,
+ standardValue: stdValue
+ }
+ this.standardValuesList.push(this.standardValues)
+ this.ydatas.push(yData)
+ }
+ }
+ }
+ },
+ // 鏍规嵁澶勭悊濂界殑鏁扮粍杩涜echarts鍥炬爣鐨勬覆鏌�
+ drawRealTimeDateChart () {
+ this.myChart = this.$echarts.init(this.$refs.echarts)
+ this.myChart.clear()
+
+ // 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 pointColor = this.ydatas[i].pointColor
+ // 鏁版嵁鏍囧噯鍊�
+ const bz = this.ydatas[i].standardValue
+ let seriesObj
+
+ if (bz) {
+ seriesObj = {
+ name: this.ydatas[i].name,
+ smooth: true,
+ type: 'line',
+ data: this.ydatas[i].data,
+ // borderColor: this.ydatas[i].pointColor,
+ borderColor: '#fff',
+ 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.7) {
+ return '#FFA500'
+ } else {
+ return '#33c95f'
+ }
+ },
+ lineStyle: {
+ color: this.ydatas[i].lineColor,
+ width: 2
+ },
+ label: { // 鏄剧ず鍊�
+ show: false
+ }
+ }
+ },
+ markLine: {
+ symbol: 'none',
+ data: [{
+ label: {
+ normal: {
+ position: 'end',
+ formatter: bz
+ }
+ },
+ name: '鏍囧噯鍊�',
+ yAxis: bz,
+ lineStyle: {
+ 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.7) {
+ return '#FFA500'
+ } else {
+ return '#33c95f'
+ }
+ }
+ }
+ }
+ }]
+ }
+ }
+ } else {
+ seriesObj = {
+ name: this.ydatas[i].name,
+ symbol: 'circle',
+ symbolSize: 10,
+ smooth: false,
+ yAxisIndex: 1,
+ // borderColor:'black',
+ type: 'line',
+ 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 === '搴熸按') {
+ seriesObj.yAxisIndex = 1
+ }
+ serLists.push(seriesObj)
+ }
+ const dataUnit = '娴侀噺(m鲁/h)'
+ // echarts鍥捐〃option鏁版嵁
+ const options = {
+ 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++) {
+ const seriesName = params[i].seriesName
+ // 鍊�
+ const value = params[i].value[1]
+
+ // const valueFliter = formatter(value)
+ const valueFliter = parseFloat(value).toFixed(2)
+
+ let maker = params[i].marker
+ let colo = ''
+ switch (seriesName) {
+ case 'COD':
+ colo = '#ffff00'
+ break
+ case '姘ㄦ爱':
+ colo = '#00B0F0'
+ break
+ case '鎬绘爱':
+ colo = '#e0ffff'
+ break
+ case '搴熸按娴侀噺':
+ colo = '#9ACD32'
+ break
+ case '鎬荤７':
+ colo = '#f48183'
+ break
+ default:
+ colo = ''
+ break
+ }
+ maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
+ s += maker + seriesName + ':' + valueFliter + '<br />'
+ }
+ return s
+ }
+ },
+ toolbox: {
+ show: false,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁＄畻
+ top: '20%',
+ left: '6%',
+ right: '6%',
+ bottom: '12%'
+ },
+ legend: {
+ data: this.legendList
+ },
+ 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: {
+ type: 'time',
+ boundaryGap: false,
+ axisLabel: {
+ // rotate: 30,
+ margin: 6,
+ interval: 0,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ axisTick: { // x 杞村埢搴︽樉绀�
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ }
+ },
+ yAxis: [{
+ type: 'value',
+ name: ySideName,
+ max: function (value) {
+ return parseInt(value.max + 3)
+ },
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ axisPointer: {
+ snap: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ }
+ }, {
+ type: 'value',
+ name: dataUnit,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ axisPointer: {
+ snap: true
+ },
+ splitLine: {
+ show: false
+ },
+ // inverse: true,
+ // nameLocation: 'start',
+ // max:500,
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ }
+ }],
+ series: serLists
+ }
+ this.myChart.setOption(options)
+ window.onresize = this.myChart.resize
+ }
+ }
+}
+</script>
+
+<style lang="less">
+#wasteWaterRealChartBox .echarts-form .el-input__inner {
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+ border-color: #336fa4;
+}
+#wasteWaterRealChartBox .echarts-form{
+ margin-top: 1px
+}
+#wasteWaterRealChartBox .echarts-form .el-input__icon{
+ height: .13rem;
+ top: -.02rem;
+ right: -0.03rem;
+ position: absolute;
+ color: #00d0f9;
+}
+#wasteWaterRealChartBox .echarts-form .selectBox .el-input__icon:last-child{
+ top: .02rem;
+}
+#wasteWaterRealChartBox .echarts-form .selectBox .is-reverse{
+ top: -.02rem !important;
+}
+#wasteWaterRealChartBox .echarts-form .el-button{
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+}
+</style>
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 2283ad0..dea96f0 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -50,7 +50,7 @@
<script>
import EnvRiskSearch from './topicSearch/EnvRiskSearch'
-import DischargeSearch from './topicSearch/DischargeSearch'
+import PollutionSourceSearch from './topicSearch/PollutionSourceSearch'
import { topicList } from '../../conf/Topic'
import WasteGasSearch from '@components/panel/topicSearch/WasteGasSearch'
@@ -69,7 +69,7 @@
WasteWaterSearch,
SolidWasteSearch,
EnvRiskSearch,
- DischargeSearch,
+ PollutionSourceSearch,
EnterpriseEmergencySearch
},
data () {
@@ -150,7 +150,7 @@
this.title = val.name
switch (val.name) {
case '姹℃煋婧�':
- this.gcComp = DischargeSearch
+ this.gcComp = PollutionSourceSearch
break
case '搴熸按':
this.gcComp = WasteWaterSearch
diff --git a/src/components/panel/topicSearch/DischargeSearch.vue b/src/components/panel/topicSearch/DischargeSearch.vue
deleted file mode 100644
index a1e7bc8..0000000
--- a/src/components/panel/topicSearch/DischargeSearch.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
- <div class="sewers-search" v-if="gdVisible">
- <div class="panel-title">{{title}}</div>
- <div class="search-panel ">
- <el-form ref="form" :model="form" label-width="90px" class="search-form">
- <el-form-item label="鍖哄煙锛�" size="mini" class="search-panel-item">
- <el-select style="width: 100%" v-model="form.areaVal" @change="areaType"
- :popper-class="'select-down'">
- <el-option
- v-for="item in areaTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <!-- <el-form-item label="浼佷笟鍚嶇О" size="mini">
- <el-select style="width: 100%" v-model="form.enterpriseVal" @change="enterpriseType" :popper-class="'select-down'">
- <el-option
- v-for="item in enterpriseTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="浜岀骇鍗曚綅" size="mini">
- <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'">
- <el-option
- v-for="item in enterpriseSubunitsTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item> -->
- <!-- <el-form-item label="椋庨櫓绾у埆" size="mini"></el-form-item>
- <el-radio-group v-model="form.type" class="levelOfRisk">
- <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
- </el-radio-group> -->
- <!-- <el-form-item >-->
- <div class="page_total">
- <p>鍏辫
- <span>{{total}}</span>
- 鏉¤褰�
- </p>
- </div>
- <div class="rightButtonSearch">
- <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input>
- <el-button class="el-icon-search" @click="handleSearch"></el-button>
- </div>
- </el-form>
- </div>
- <el-scrollbar style="height:416.44px">
- <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3 @click="flyto">###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
- <i class="state"></i>
- <div>
- <h3>###鐐煎寲閮�</h3>
- <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p>
- <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
- </div>
- </div>
- </el-scrollbar>
- <!-- <span class="location-btn" @click="handleLocation(item)">588</span> -->
- <el-card class="footer-page" v-if="total > 10">
- <el-pagination
- small
- @current-change="handlePage"
- :page-size=pageSize
- layout="prev, pager, next"
- :total=total
- :current-page=current
- class="warnPagination"
- >
- </el-pagination>
- </el-card>
- </div>
- <!-- <div class="monitor2" v-if="hbVisible">-->
- <!-- <env-protect-search></env-protect-search>-->
- <!-- </div>-->
- <!-- <div class="monitor2" v-if="pkVisible">-->
- <!-- <discharge-search></discharge-search>-->
- <!-- </div>-->
-</template>
-
-<script>
-import WfsHelper from '@components/helpers/WfsHelper'
-import AjaxUtils from '@utils/AjaxUtils'
-
-export default {
- name: 'DischargeSearch',
- data () {
- return {
- gdVisible: true,
- list: [],
- total: 0,
- pageSize: 10,
- inareaTypeOptions: [],
- enterpriseTypeOptions: [],
- enterpriseSubunitsTypeOptions: [],
- form: {
- areaVal: '',
- enterpriseVal: '',
- enterpriseSubunitsVal: '',
- type: ''
- },
- // pageSize: 10,
- // current: 1,
- isWaybillHover: true,
- isRouteHover: false,
- levelOfRisk: [
- {
- name: '閲嶅ぇ椋庨櫓',
- value: '1',
- color: 'red'
- },
- {
- name: '涓�绾ч闄�',
- value: '2',
- color: 'sandybrown'
- },
- {
- name: '浜岀骇椋庨櫓',
- value: '3',
- color: 'yellow'
- },
- {
- name: '涓夌骇椋庨櫓',
- value: '4',
- color: 'green'
- }
- ],
- areaTypeOptions: []
- }
- },
- props: ['title'],
- methods: {
- handlePage () {
-
- },
- flyto () {
- const pos = [39.90751504898071, 116.38927817344666]
- window.map.setView(pos, 15)
- },
- // 鍖哄煙绛涢��
- areaType (val) {
- this.pipelineTypeOptions.forEach((itm) => {
- if (val === itm.value) {
-
- }
- })
- },
- // 浼佷笟绛涢��
- enterpriseType (val) {
- this.dataTypeOptions.forEach((itm) => {
- if (val === itm.value) {
-
- }
- })
- },
- // 浜岀骇鍗曚綅绛涢��
- enterpriseSubunitsType (val) {
-
- },
- async handleSearch () {
- const param = {
- pipelineType: this.form.pipelineType,
- dataType: this.form.dataType
- }
- console.log(param)
- var wfsHelper = new WfsHelper()
- wfsHelper.addTypeName(this.form.query.layerName)
- wfsHelper.addLike(this.form.query.key, this.form.keyword)
- // const _this = this
- const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
- if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
- this.list = res.data.features
- }
- },
- handleLocation (val) {
- console.log(val)
- const bound = this.L.geoJSON([val], {}).getBounds()
- var layer = window.serviceLayerHelper.getByLayerId(val.id)
- layer && layer.openPopup()
- this.$store.state.map.map.flyToBounds(bound)
- }
- }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/components/panel/topicSearch/EnvRiskSearch.vue b/src/components/panel/topicSearch/EnvRiskSearch.vue
index ae56021..49e056f 100644
--- a/src/components/panel/topicSearch/EnvRiskSearch.vue
+++ b/src/components/panel/topicSearch/EnvRiskSearch.vue
@@ -24,7 +24,8 @@
</el-select>
</el-form-item>
<el-form-item label="鍗曚綅閮ㄩ棬锛�" size="mini">
- <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'">
+ <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType"
+ :popper-class="'select-down'">
<el-option
v-for="item in enterpriseSubunitsTypeOptions"
:key="item.value"
@@ -35,7 +36,9 @@
</el-form-item>
<el-form-item label="椋庨櫓绾у埆锛�" size="mini"></el-form-item>
<el-radio-group v-model="form.type" class="levelOfRisk">
- <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
+ <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index">
+ <span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span>
+ </el-radio>
</el-radio-group>
<div class="page_total">
<p>鍏辫
@@ -155,14 +158,13 @@
handleLocation (val) {
const pos = [val.Latitude, val.Longitude]
- debugger
window.map.setView(pos, 15)
window.$layer.open({
content: {
comp: RiskSourceIndex, // 缁勪欢
parent: this, // 鐖剁粍浠�
data: { // 浼犻�掔殑鍙傛暟
- storagePlaceId: val.no
+ riskSourceId: val.no
}
},
title: '澶╂触鐭冲寲' + val.riskname
diff --git a/src/components/panel/topicSearch/PollutionSourceSearch.vue b/src/components/panel/topicSearch/PollutionSourceSearch.vue
new file mode 100644
index 0000000..7281154
--- /dev/null
+++ b/src/components/panel/topicSearch/PollutionSourceSearch.vue
@@ -0,0 +1,130 @@
+<template>
+ <div class="sewers-search" v-if="gdVisible">
+ <div class="panel-title">{{title}}</div>
+ <div class="search-panel ">
+ <el-form ref="form" :model="form" label-width="90px" class="search-form">
+ <el-form-item label="浜岀骇鍗曚綅锛�" size="mini">
+ <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType"
+ :popper-class="'select-down'">
+ <el-option
+ v-for="item in enterpriseSubunitsTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="杩愯鐘舵�侊細" size="mini"></el-form-item>
+ <el-radio-group v-model="form.type" class="levelOfRisk">
+ <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index">
+ <span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span>
+ </el-radio>
+ </el-radio-group>
+ <div class="page_total">
+ <p>鍏辫
+ <span>{{total}}</span>
+ 鏉¤褰�
+ </p>
+ </div>
+ <div class="rightButtonSearch">
+ <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input>
+ <el-button class="el-icon-search" @click="handleSearch"></el-button>
+ </div>
+ </el-form>
+ </div>
+ <el-scrollbar style="height:416.44px">
+ <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
+ @click="handleLocation(item)">
+ <img :src='iconUrl[1]' alt="" class="state"/>
+ <div>
+ <h3>{{ item.governName }}</h3>
+ <p>鎵�灞為儴闂細<span>{{ item.unitName }}</span></p>
+ </div>
+ </div>
+ </el-scrollbar>
+ <!-- <span class="location-btn" @click="handleLocation(item)">588</span> -->
+ <el-card class="footer-page" v-if="total > 10">
+ <el-pagination
+ small
+ @current-change="handlePage"
+ :page-size=pageSize
+ layout="prev, pager, next"
+ :total=total
+ :current-page=current
+ class="warnPagination"
+ >
+ </el-pagination>
+ </el-card>
+ </div>
+</template>
+
+<script>
+
+import GovernEquipmentIndex from '@components/base-page/GovernEquipment/WasteWaterIndex'
+import { pulseEffect, setPanTo } from '@utils/utils'
+const mapApi = require('../../../api/mapApi').default
+
+export default {
+ name: 'PollutionSource',
+ data () {
+ return {
+ gdVisible: true,
+ list: [],
+ total: 0,
+ pageSize: 10,
+ current: 1,
+ enterpriseSubunitsTypeOptions: [],
+ form: {
+ enterpriseSubunitsVal: '',
+ type: ''
+ },
+ isWaybillHover: true,
+ isRouteHover: false,
+ levelOfRisk: [
+ { name: '姝ｅ父', value: '1', color: 'green' },
+ { name: '鍋滆繍', value: '2', color: 'grey' }
+ ],
+ iconUrl: ['',
+ require('../../../../public/assets/images/map/governEquipment/govern_green.png')
+ ]
+ }
+ },
+ props: ['title'],
+ methods: {
+ handlePage () {
+
+ },
+ // 浜岀骇鍗曚綅绛涢��
+ enterpriseSubunitsType (val) {
+
+ },
+ async handleSearch () {
+ const param = {
+ }
+ const res = await mapApi.getGovernEquipment(param)
+ this.list = res // 涓存椂鏁版嵁
+ },
+
+ handleLocation (val) {
+ const pos = [val.Latitude, val.Longitude]
+ window.map.setView(pos, 15)
+ window.$layer.open({
+ content: {
+ comp: GovernEquipmentIndex, // 缁勪欢
+ parent: this, // 鐖剁粍浠�
+ data: { // 浼犻�掔殑鍙傛暟
+ governId: val.no
+ }
+ },
+ title: '澶╂触鐭冲寲' + val.governName
+ })
+ pulseEffect([val.Latitude, val.Longitude])
+ setPanTo(pos, 250)
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/conf/Topic.js b/src/conf/Topic.js
index 7f566af..e722922 100644
--- a/src/conf/Topic.js
+++ b/src/conf/Topic.js
@@ -5,7 +5,7 @@
}
export const TopicComp = {
- dischargeSearch: () => import('@components/panel/topicSearch/DischargeSearch'),
+ pollutionSourceSearch: () => import('@components/panel/topicSearch/PollutionSourceSearch'),
envProtectSearch: () => import('@components/panel/topicSearch/EnvRiskSearch'),
soilGroundWaterSearch: () => import('@components/panel/topicSearch/SoilGroundWaterSearch'),
sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue'),
--
Gitblit v1.8.0