From 1da76d05ebba28eeebef8af3832680143d5699c5 Mon Sep 17 00:00:00 2001
From: seatonwan9 <seatonwan9@163.com>
Date: 星期一, 31 五月 2021 17:12:37 +0800
Subject: [PATCH] 查询条件补充，治理设施优化
---
/dev/null | 643 -----------------------------
src/components/panel/topicSearch/EnvRiskSearch.vue | 31 +
src/components/LayerController/logic/GovernEquipment.js | 2
src/components/panel/topicSearch/PollutionSourceSearch.vue | 4
src/components/base-page/GovernEquipment/GovernEquipmentIndex.vue | 100 ++++
src/components/panel/topicSearch/WasteWaterSearch.vue | 34 +
src/components/base-page/GovernEquipment/PublicTable.vue | 262 +++++++++++
src/components/base-page/GovernEquipment/PublicTabs.vue | 151 +++---
src/components/panel/topicSearch/WasteGasSearch.vue | 34 +
9 files changed, 520 insertions(+), 741 deletions(-)
diff --git a/src/components/LayerController/logic/GovernEquipment.js b/src/components/LayerController/logic/GovernEquipment.js
index fc2b021..bb486ad 100644
--- a/src/components/LayerController/logic/GovernEquipment.js
+++ b/src/components/LayerController/logic/GovernEquipment.js
@@ -2,7 +2,7 @@
* 姹℃煋婧�
*/
// 淇℃伅缁勪欢
-const GovernEquipmentIndex = require('../../base-page/GovernEquipment/WasteWaterIndex').default
+const GovernEquipmentIndex = require('../../base-page/GovernEquipment/GovernEquipmentIndex').default
// 浣跨敤灏佽鏂规硶
const AnimalService = require('../service/AnimalService').default
// 璇锋眰鎺ュ彛鏁版嵁
diff --git a/src/components/base-page/GovernEquipment/Detail.vue b/src/components/base-page/GovernEquipment/Detail.vue
deleted file mode 100644
index 37e8999..0000000
--- a/src/components/base-page/GovernEquipment/Detail.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<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/GovernEquipmentIndex.vue b/src/components/base-page/GovernEquipment/GovernEquipmentIndex.vue
new file mode 100644
index 0000000..0303409
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/GovernEquipmentIndex.vue
@@ -0,0 +1,100 @@
+<template>
+ <public-sector>
+ <template v-slot:tabs>
+ <public-tabs ref='refsRiskTabsData'></public-tabs>
+ </template>
+ <template v-slot:publicPart>
+ <public-table ref="refsRiskTableData"></public-table>
+ </template>
+<!-- <template v-slot:video>-->
+<!-- <public-video></public-video>-->
+<!-- </template>-->
+ </public-sector>
+</template>
+
+<script>
+
+import PublicTabs from '@components/base-page/RiskSource/PublicTabs'
+import PublicTable from '@components/base-page/RiskSource/PublicTable'
+// import PublicVideo from '@components/base-page/PublicVideo'
+import PublicSector from '@components/base-page/PublicSector'
+
+export default {
+ name: 'RiskSourceIndex',
+ props: ['riskSourceId'],
+ components: {
+ PublicSector,
+ PublicTabs,
+ PublicTable
+ // PublicVideo
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.refsData()
+ })
+ },
+ data () {
+ return {}
+ },
+ methods: {
+ refsData () {
+ const param = {
+ riskSourceId: this.riskSourceId
+ }
+ this.$refs.refsRiskTabsData.refsRiskDataTabs(param)
+ this.$refs.refsRiskTableData.refsRiskDataTable(param)
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.public-bounced {
+ z-index: 2000;
+ position: absolute;
+ top: 35%;
+ left: 20%;
+
+ .public-bounced-title {
+ cursor: move;
+ height: 0.1rem;
+ padding: 10px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ span {
+ color: #f4f7ff;
+ margin: 0 15px;
+ font-size: 14px;
+ }
+
+ i {
+ color: #C0C4CC;
+ margin: 0 15px;
+ font-size: 22px;
+ cursor: pointer;
+ }
+
+ i:hover {
+ color: #00fff6;
+ }
+ }
+
+ .public-bounced-content {
+ //padding: 0.1rem;
+
+ //align-items: center;
+ //justify-content: space-around;
+
+ .public-bounced-content-left {
+ //width: 4.8rem;
+ }
+
+ .public-bounced-content-right {
+ //width: 3rem;
+ margin-left: 0.1rem;
+ }
+ }
+}
+</style>
diff --git a/src/components/base-page/GovernEquipment/PublicTable.vue b/src/components/base-page/GovernEquipment/PublicTable.vue
new file mode 100644
index 0000000..4a869d0
--- /dev/null
+++ b/src/components/base-page/GovernEquipment/PublicTable.vue
@@ -0,0 +1,262 @@
+<template>
+ <div class="slotChildTable">
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <div class="main-table">
+ <div class="">
+ <ul style="margin-bottom: .02rem">
+ <li><h3>椋庨櫓璇勪及杩囩▼</h3></li>
+ <li>鍒濆璇勪环缁撴灉锛歿{ riskSourceAssess }}</li>
+ </ul>
+ </div>
+ <div class="EvaluationTable">
+ <table border="1" style="border-color: rgba(118,132,189,0.77)" >
+ <tr>
+ <th colspan="2">椋庨櫓鎺у埗</th>
+ <th>璇勪及鎸囨爣</th>
+ <th>鍒嗗��</th>
+ </tr>
+ <tr>
+ <td rowspan="3" colspan="2">瀹夊叏绠＄悊锛�25鍒嗭級</td>
+ <td>閲嶅ぇ鎴栬緝澶х敓浜у畨鍏ㄤ簨鏁呴殣鎮ｆ湭瀹屾垚鏁存敼鐨勮25鍒嗐��</td>
+ <td rowspan="3">25</td>
+ </tr>
+ <tr>
+ <td>涓�鑸敓浜у畨鍏ㄤ簨鏁呴殣鎮ｆ湭瀹屾垚鏁存敼鐨勶紝姣忎竴椤硅10鍒嗭紝璁版弧25鍒嗕负姝€��</td>
+ </tr>
+ <tr>
+ <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+ </tr>
+ <tr>
+ <td rowspan="3" colspan="2">璁惧璐ㄩ噺绠＄悊锛�25鍒嗭級</td>
+ <td>瀛樺湪涓嬪垪浠绘剰涓�椤圭殑璁�25鍒嗭細
+ 锛�1锛夋湭鎸夎瀹氳繘琛岃澶囪鏂芥娴嬨�佹楠岀殑锛�
+ 锛�2锛夋娴嬬粨鏋滀笉鑳芥弧瓒宠澶囪鏂借川閲忚姹傜殑锛�
+ 锛�3锛夋湭鎸夎璁℃爣鍑嗗缓璁剧殑锛�
+ 锛�4锛変娇鐢ㄧ殑璁惧璁炬柦绛夌骇涓嶆弧瓒宠姹傜殑銆�
+ </td>
+ <td rowspan="3">10</td>
+ </tr>
+ <tr>
+ <td>瀛樺湪涓嬪垪鎯呭喌鐨勶紝姣忛」璁�10鍒嗭紝璁版弧25鍒嗕负姝細
+ 锛�1锛夎澶囪鏂借秴鏈熶娇鐢ㄤ笖鏈粡杩囪瘎浼扮殑锛�
+ 锛�2锛夎澶囪鏂介檷绛夌骇浣跨敤鏈粡璇勪及鐨勶紱
+ 锛�3锛夎璁″彉鏇存湭缁忎富绠￠儴闂ㄦ壒鍑嗙殑銆�
+ </td>
+ </tr>
+ <tr>
+ <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+ </tr>
+ <tr>
+ <td rowspan="9">鐜椋庨櫓闃叉帶鎺柦鏈夋晥鎬э紙50鍒嗭級</td>
+ <td rowspan="2">浜嬫晠绱ф�ュ叧鏂帾鏂斤紙15鍒嗭級</td>
+ <td>鐜椋庨櫓婧愪笉鍏峰鏈夋晥鐨勪簨鏁呯揣鎬ュ叧鏂帾鏂界殑锛堢鍚堢揣鎬ュ叧鏂椂鏁堣锛夎15鍒嗐��</td>
+ <td rowspan="2">15</td>
+ </tr>
+ <tr>
+ <td>鐜椋庨櫓婧愬叿澶囨湁鏁堢殑浜嬫晠绱ф�ュ叧鏂帾鏂界殑锛堢鍚堢揣鎬ュ叧鏂椂鏁堣姹傦級璁�0鍒嗐��</td>
+ </tr>
+ <tr>
+ <td rowspan="3">寤鸿椤圭洰鐜椋庨櫓闃叉帶瑕佹眰钀藉疄锛�10鍒嗭級</td>
+ <td>鏃犱簨鏁呴闄╃墿璐ㄥ缃帾鏂借15鍒嗐��</td>
+ <td rowspan="3">10</td>
+ </tr>
+ <tr>
+ <td>瀛樺湪浠ヤ笅鎯呭喌鐨勶紝姣忛」璁�5鍒嗭紝璁版弧15鍒嗕负姝細
+ 锛�1锛変簳鍦烘湭鎸夎姹傝鎺掓按鐩戞帶姹犵殑锛�
+ 锛�2锛変簳鍦烘湭鎸夎姹傝鍥村牥鐨勶紱
+ 锛�3锛夊瓨鍦ㄤ袱涓強浠ヤ笂闆ㄦ按鎺掓斁鍙ｇ殑銆�
+ </td>
+ </tr>
+ <tr>
+ <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+ </tr>
+ <tr>
+ <td rowspan="2">寤鸿椤圭洰鐜椋庨櫓闃叉帶瑕佹眰钀藉疄锛�10鍒嗭級</td>
+ <td>寤鸿椤圭洰鐜褰卞搷璇勪环鍙婂叾鎵瑰鎻愬嚭鐨勭幆澧冮闄╅槻鎺ф帾鏂戒笉钀藉疄鐨勮10鍒嗐��</td>
+ <td rowspan="2">0</td>
+ </tr>
+ <tr>
+ <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+ </tr>
+ <tr>
+ <td rowspan="2">鐜椋庨櫓婧愪簨鏁呯幇鍦哄缃柟妗堬紙10鍒嗭級</td>
+ <td>瀛樺湪浠ヤ笅鎯呭喌鐨勶紝姣忛」璁�5鍒嗭紝璁版弧10鍒嗕负姝細
+ 锛�1锛夋棤鐜椋庨櫓婧愪簨鏁呭缃柟妗堢殑鎴栫幆澧冮闄╂簮浜嬫晠澶勭疆鏂规鏃犵幆淇濆唴瀹圭殑锛�
+ 锛�2锛夋湭鎸夎姹傚紑灞曟紨缁冨苟璁板綍鐨勶紱
+ 锛�3锛夋湭鎸夎姹傝繘琛屽妗堢殑銆�
+ </td>
+ <td rowspan="2">5</td>
+ </tr>
+ <tr>
+ <td>涓嶅瓨鍦ㄤ笂杩伴棶棰樼殑璁�0鍒嗐��</td>
+ </tr>
+ </table>
+ </div>
+ <h3>鐜椋庨櫓璇勪及缁撴灉</h3>
+ <div class="pTable">
+ <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
+ <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
+ :label="item.label" :show-overflow-tooltip="true"></el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import mapApi from '@/api/mapApi'
+
+export default {
+ name: 'PublicTable',
+ data () {
+ return {
+ riskSourceDetail: [],
+ riskSourceAssess: '鏍规嵁椋庨櫓婧愬懆杈圭幆澧冮闄╁彈浣�3绉嶇被鍨嬶紝鎸夌収鐜椋庨櫓鐗╄川閲�(Q/R)銆佺幆澧冮闄╂帶鍒舵按骞�(M)鐭╅樀锛岀‘瀹氱幆澧冮闄╃瓑绾�',
+ listLabel: [
+ {
+ label: '搴忓彿',
+ prop: 'no'
+ },
+ {
+ label: '鍚嶇О',
+ prop: 'riskname'
+ },
+ {
+ label: '璇勪及绛夌骇',
+ prop: 'riskLevel'
+ },
+ {
+ label: '绛夌骇鐗瑰緛',
+ prop: 'after'
+ },
+ {
+ label: 'Q鍊�',
+ prop: 'riskLevel'
+ },
+ {
+ label: 'M鍊�',
+ prop: 'riskLevel'
+ },
+ {
+ label: 'E鍊�',
+ prop: 'riskLevel'
+ }
+ ]
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ })
+ },
+ methods: {
+ async refsRiskDataTable (param) {
+ // 姝ゅ鎺ュ彛涓烘牴鎹闄╂簮ID鑾峰彇椋庨櫓婧愯瘎浼版暟鎹紙鏆傛椂涓烘ā鎷熸暟鎹級
+ const result = await mapApi.getEnvironmentRiskPoint(param)
+ this.riskSourceDetail = result[param.riskSourceId]
+ },
+ // 闅旇棰滆壊璁剧疆
+ tableRowClassName ({
+ row,
+ rowIndex
+ }) {
+ if (rowIndex % 2 === 0) {
+ return 'warning-row'
+ } else if (rowIndex % 2 === 1) {
+ return 'success-row'
+ }
+ return ''
+ }
+ }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-table .warning-row{
+ background-color: rgba(0, 0, 0, 0) !important;
+}
+/deep/ .el-table .success-row{
+ background-color: rgba(48, 69, 95, .6) !important;
+}
+/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;
+}
+
+/deep/ .el-table .has-gutter tr th {
+ border: none;
+}
+
+/deep/ .el-table th.is-leaf {
+ border-bottom: none !important;
+}
+
+/deep/ .el-table td {
+ height: 30px !important;
+ line-height: 30px !important;
+}
+
+/deep/ .el-table tbody tr:hover > td {
+ background: none !important
+}
+.pTable{
+ box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
+ padding: 0.04rem;
+ margin-top: .06rem;
+}
+.slotChildTable {
+ position: relative;
+ background: rgba(0, 16, 30, 0.7);
+ box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
+ color: #00fff6;
+ padding: 0.04rem;
+ border: 1px solid #396d83;
+ .main-table {
+ max-height: 2rem;
+ overflow: hidden auto;
+ }
+}
+
+.slotChildTable span {
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+}
+
+.slotChildTable span:nth-child(1) {
+ position: absolute;
+ left: -1px;
+ top: -1px;
+ border-width: 1px 0 0 1px;
+}
+
+.slotChildTable span:nth-child(2) {
+ position: absolute;
+ right: -1px;
+ top: -1px;
+ border-width: 1px 1px 0 0;
+}
+
+.slotChildTable span:nth-child(3) {
+ position: absolute;
+ right: -1px;
+ bottom: -1px;
+ border-width: 0 1px 1px 0;
+}
+
+.slotChildTable span:nth-child(4) {
+ position: absolute;
+ left: -1px;
+ bottom: -1px;
+ border-width: 0 0 1px 1px;
+}
+
+</style>
diff --git a/src/components/base-page/GovernEquipment/PublicTabs.vue b/src/components/base-page/GovernEquipment/PublicTabs.vue
index 1f08bb6..b1ed89b 100644
--- a/src/components/base-page/GovernEquipment/PublicTabs.vue
+++ b/src/components/base-page/GovernEquipment/PublicTabs.vue
@@ -1,117 +1,130 @@
<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 class="slotChildTabs">
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <div class="tabs-content">
+ <ul>
+ <li>椋庨櫓鍚嶇О锛歿{ riskSourceBaseInfo.riskname }}</li>
+ <li :style="{boxShadow: riskLevel[riskSourceBaseInfo.riskLevel]}">椋庨櫓绾у埆锛歿{ riskSourceBaseInfo.riskLevel }}</li>
+ <li>椋庨櫓鎻忚堪锛歿{ riskSourceBaseInfo.depiction }}</li>
+ </ul>
</div>
</div>
</template>
<script>
-// import mapApi from '../../../api/mapApi'
+import mapApi from '@/api/mapApi'
export default {
- name: 'WaterTabs',
- props: ['storagePlaceId'],
+ name: 'PublicTabs',
data () {
- return {}
+ return {
+ riskSourceBaseInfo: [],
+ riskLevel: {
+ 1: '0 0 10px rgba(246,16,43,.7) inset',
+ 2: '0 0 10px rgba(244,142,88,.7) inset',
+ 3: '0 0 10px rgba(253,238,13,.7) inset',
+ 4: '0 0 10px rgba(38,144,2,.7) inset'
+ }
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ // this.refsDataTabs()
+ })
+ },
+ methods: {
+ async refsRiskDataTabs (param) {
+ // 姝ゅ鎺ュ彛涓烘牴鎹闄╂簮ID鑾峰彇椋庨櫓婧愬熀鏈俊鎭紙鏆傛椂涓烘ā鎷熸暟鎹級
+ const result = await mapApi.getEnvironmentRiskPoint(param)
+ this.riskSourceBaseInfo = result[param.riskSourceId][0]
+ }
}
}
</script>
<style scoped lang="less">
-.win {
+.slotChildTabs {
position: relative;
- margin-bottom: 0.04rem;
+ margin-bottom: 0.06rem;
background-color: @background-color;
-}
-.main {
-
- .main-matter {
+ .tabs-content {
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;
-
+ padding: 0 .03rem;
li {
margin-bottom: 0.04rem;
- min-width: 31%;
+ min-width: 30%;
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;
- }
+ padding: 0.05rem .8%;
}
-
+ li:nth-child(2){
+ margin-left: .03rem;
+ }
+ li:last-child {
+ text-align: left;
+ line-height: .12rem;
+ margin-bottom: 0;
+ }
+ .lastli {
+ visibility: hidden
+ }
}
}
}
-.border_corner {
- z-index: 999;
+.slotChildTabs span:nth-child(1) {
position: absolute;
- width: 10px;
- height: 10px;
- background: rgba(0, 0, 0, 0);
- border: 1px solid #47d5ea;
+ left: -1px;
+ top: -1px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 1px 0 0 1px;
}
-.border_corner_left_top {
- top: 0;
- left: 0;
- border-right: none;
- border-bottom: none;
+.slotChildTabs span:nth-child(2) {
+ position: absolute;
+ right: -1px;
+ top: -1px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 1px 1px 0 0;
}
-.border_corner_right_top {
- top: 0;
- right: 0;
- border-left: none;
- border-bottom: none;
+.slotChildTabs span:nth-child(3) {
+ position: absolute;
+ right: -1px;
+ bottom: -1px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 0 1px 1px 0;
}
-.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;
+.slotChildTabs span:nth-child(4) {
+ position: absolute;
+ left: -1px;
+ bottom: -1px;
+ padding: 6px;
+ border-style: solid;
+ border-color: #02a6b5;
+ border-width: 0 0 1px 1px;
}
</style>
diff --git a/src/components/base-page/GovernEquipment/WasteWaterDayChart.vue b/src/components/base-page/GovernEquipment/WasteWaterDayChart.vue
deleted file mode 100644
index dac9ad0..0000000
--- a/src/components/base-page/GovernEquipment/WasteWaterDayChart.vue
+++ /dev/null
@@ -1,718 +0,0 @@
-<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
deleted file mode 100644
index 3b8c74b..0000000
--- a/src/components/base-page/GovernEquipment/WasteWaterHoursChart.vue
+++ /dev/null
@@ -1,736 +0,0 @@
-<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
deleted file mode 100644
index 38dc2a7..0000000
--- a/src/components/base-page/GovernEquipment/WasteWaterIndex.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<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
deleted file mode 100644
index 670b975..0000000
--- a/src/components/base-page/GovernEquipment/WasteWaterRealChart.vue
+++ /dev/null
@@ -1,643 +0,0 @@
-<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/topicSearch/EnvRiskSearch.vue b/src/components/panel/topicSearch/EnvRiskSearch.vue
index 49e056f..fa3b96e 100644
--- a/src/components/panel/topicSearch/EnvRiskSearch.vue
+++ b/src/components/panel/topicSearch/EnvRiskSearch.vue
@@ -3,7 +3,7 @@
<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-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"
@@ -12,7 +12,17 @@
:value="item.value">
</el-option>
</el-select>
- </el-form-item>-->
+ </el-form-item>
+ <el-form-item label="鏉垮潡锛�" size="mini" class="search-panel-item">
+ <el-select style="width: 100%" v-model="form.plateVal" @change="plateType" :popper-class="'select-down'">
+ <el-option
+ v-for="item in plateTypeOptions"
+ :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
@@ -23,7 +33,7 @@
</el-option>
</el-select>
</el-form-item>
- <el-form-item label="鍗曚綅閮ㄩ棬锛�" size="mini">
+ <el-form-item label="浜岀骇鍗曚綅锛�" size="mini">
<el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType"
:popper-class="'select-down'">
<el-option
@@ -59,7 +69,7 @@
<img :src='iconUrl[item.riskLevel]' alt="" class="state"/>
<div>
<h3>{{ item.riskname }}</h3>
- <p>鎵�灞為儴闂細<span>{{ item.unitname }}</span></p>
+ <p>浜岀骇鍗曚綅锛�<span>{{ item.unitname }}</span></p>
</div>
</div>
</el-scrollbar>
@@ -98,11 +108,13 @@
gdVisible: true,
list: [],
total: 0,
- // inareaTypeOptions: [],
+ areaTypeOptions: [],
+ plateTypeOptions: [],
enterpriseTypeOptions: [],
enterpriseSubunitsTypeOptions: [],
form: {
areaVal: '',
+ plateVal: '',
enterpriseVal: '',
enterpriseSubunitsVal: '',
type: ''
@@ -117,7 +129,6 @@
{ name: '浜岀骇椋庨櫓', value: '3', color: 'yellow' },
{ name: '涓夌骇椋庨櫓', value: '4', color: 'green' }
],
- areaTypeOptions: [],
iconUrl: ['',
require('../../../../public/assets/images/map/environmentRisk/risk_red.png'),
require('../../../../public/assets/images/map/environmentRisk/risk_sandybrown.png'),
@@ -129,13 +140,17 @@
props: ['title'],
methods: {
// 鍖哄煙绛涢��
- /* areaType (val) {
+ areaType (val) {
this.pipelineTypeOptions.forEach((itm) => {
if (val === itm.value) {
}
})
- }, */
+ },
+ // 鏉垮潡绛涢��
+ plateType (val) {
+
+ },
// 浼佷笟绛涢��
enterpriseType (val) {
this.dataTypeOptions.forEach((itm) => {
diff --git a/src/components/panel/topicSearch/PollutionSourceSearch.vue b/src/components/panel/topicSearch/PollutionSourceSearch.vue
index 7281154..0c3e502 100644
--- a/src/components/panel/topicSearch/PollutionSourceSearch.vue
+++ b/src/components/panel/topicSearch/PollutionSourceSearch.vue
@@ -38,7 +38,7 @@
<img :src='iconUrl[1]' alt="" class="state"/>
<div>
<h3>{{ item.governName }}</h3>
- <p>鎵�灞為儴闂細<span>{{ item.unitName }}</span></p>
+ <p>浜岀骇鍗曚綅锛�<span>{{ item.unitName }}</span></p>
</div>
</div>
</el-scrollbar>
@@ -60,7 +60,7 @@
<script>
-import GovernEquipmentIndex from '@components/base-page/GovernEquipment/WasteWaterIndex'
+import GovernEquipmentIndex from '@components/base-page/GovernEquipment/GovernEquipmentIndex'
import { pulseEffect, setPanTo } from '@utils/utils'
const mapApi = require('../../../api/mapApi').default
diff --git a/src/components/panel/topicSearch/WasteGasSearch.vue b/src/components/panel/topicSearch/WasteGasSearch.vue
index 4ca1a8d..d9a6ac3 100644
--- a/src/components/panel/topicSearch/WasteGasSearch.vue
+++ b/src/components/panel/topicSearch/WasteGasSearch.vue
@@ -3,16 +3,26 @@
<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-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 inareaTypeOptions"
+ v-for="item in areaTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
- </el-form-item>-->
+ </el-form-item>
+ <el-form-item label="鏉垮潡锛�" size="mini" class="search-panel-item">
+ <el-select style="width: 100%" v-model="form.plateVal" @change="plateType" :popper-class="'select-down'">
+ <el-option
+ v-for="item in plateTypeOptions"
+ :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
@@ -23,7 +33,7 @@
</el-option>
</el-select>
</el-form-item>
- <el-form-item label="鍗曚綅閮ㄩ棬锛�" size="mini">
+ <el-form-item label="浜岀骇鍗曚綅锛�" size="mini">
<el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType"
:popper-class="'select-down'">
<el-option
@@ -45,7 +55,7 @@
</el-option>
</el-select>
</el-form-item>
-<!-- <el-form-item label="椋庨櫓绾у埆" size="mini"></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}}</span>
@@ -78,7 +88,7 @@
<img src="../../../../public/assets/images/map/exhaust/fq_green2.png" alt="" class="state"/>
<div>
<h3>{{ item.Name }}</h3>
- <p>鎵�灞為儴闂細<span>{{ item.DeptSname }}</span></p>
+ <p>浜岀骇鍗曚綅锛�<span>{{ item.DeptSname }}</span></p>
</div>
</div>
@@ -121,7 +131,8 @@
// 鍒嗛〉
pageSize: 10,
current: 1,
- inareaTypeOptions: [],
+ areaTypeOptions: [],
+ plateTypeOptions: [],
enterpriseTypeOptions: [],
enterpriseSubunitsTypeOptions: [],
enterpriseLevelTypeOptions: [
@@ -132,6 +143,7 @@
],
form: {
areaVal: '',
+ plateVal: '',
enterpriseVal: '',
enterpriseSubunitsVal: '',
enterpriseLevelVal: '',
@@ -155,13 +167,17 @@
this.handleSearch()
},
// 鍖哄煙绛涢��
- /* areaType (val) {
+ areaType (val) {
this.pipelineTypeOptions.forEach((itm) => {
if (val === itm.value) {
}
})
- }, */
+ },
+ // 鏉垮潡绛涢��
+ plateType (val) {
+
+ },
// 浼佷笟绛涢��
enterpriseType (val) {
this.dataTypeOptions.forEach((itm) => {
diff --git a/src/components/panel/topicSearch/WasteWaterSearch.vue b/src/components/panel/topicSearch/WasteWaterSearch.vue
index 7d0df00..476f829 100644
--- a/src/components/panel/topicSearch/WasteWaterSearch.vue
+++ b/src/components/panel/topicSearch/WasteWaterSearch.vue
@@ -3,17 +3,27 @@
<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-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 inareaTypeOptions"
+ v-for="item in areaTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
- </el-form-item>-->
+ </el-form-item>
+ <el-form-item label="鏉垮潡锛�" size="mini" class="search-panel-item">
+ <el-select style="width: 100%" v-model="form.plateVal" @change="plateType" :popper-class="'select-down'">
+ <el-option
+ v-for="item in plateTypeOptions"
+ :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'">
@@ -25,7 +35,7 @@
</el-option>
</el-select>
</el-form-item>
- <el-form-item label="鍗曚綅閮ㄩ棬锛�" size="mini">
+ <el-form-item label="浜岀骇鍗曚綅锛�" size="mini">
<el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType"
:popper-class="'select-down'">
<el-option
@@ -47,7 +57,7 @@
</el-option>
</el-select>
</el-form-item>
- <!-- <el-form-item label="椋庨櫓绾у埆" size="mini"></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}}</span></el-radio>
@@ -80,7 +90,7 @@
<img src="../../../../public/assets/images/map/wastewater/fs_bright_green.png" alt="" class="state"/>
<div>
<h3>{{ item.Name }}</h3>
- <p>鎵�灞為儴闂細<span>{{ item.DeptSname }}</span></p>
+ <p>浜岀骇鍗曚綅锛�<span>{{ item.DeptSname }}</span></p>
</div>
</div>
@@ -124,7 +134,8 @@
// 鍒嗛〉
pageSize: 10,
current: 1,
- inareaTypeOptions: [],
+ areaTypeOptions: [],
+ plateTypeOptions: [],
enterpriseTypeOptions: [],
enterpriseSubunitsTypeOptions: [],
enterpriseLevelTypeOptions: [
@@ -135,6 +146,7 @@
],
form: {
areaVal: '',
+ plateVal: '',
enterpriseVal: '',
enterpriseSubunitsVal: '',
enterpriseLevelVal: '',
@@ -160,13 +172,17 @@
this.handleSearch()
},
// 鍖哄煙绛涢��
- /* areaType (val) {
+ areaType (val) {
this.pipelineTypeOptions.forEach((itm) => {
if (val === itm.value) {
}
})
- }, */
+ },
+ // 鏉垮潡绛涢��
+ plateType (val) {
+
+ },
// 浼佷笟绛涢��
enterpriseType (val) {
this.dataTypeOptions.forEach((itm) => {
--
Gitblit v1.8.0