From 60e6e154f7fd7ced0cf427c2d0412daea9549d78 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Wed, 31 Jan 2024 13:20:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0cems=E7=9B=91?=
 =?UTF-8?q?=E6=B5=8B=E6=B8=85=E5=8D=95=E9=A1=B5=E5=8F=8A=E7=9B=B8=E5=BA=94?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                |   6 +
 src/api/model/enp.js                       |   4 +-
 src/views/bigScreen/enpComponents/cems.vue | 176 +++++++++++++++++++++
 src/views/bigScreen/index_enp_blue.vue     |  32 ++--
 4 files changed, 196 insertions(+), 22 deletions(-)
 create mode 100644 src/views/bigScreen/enpComponents/cems.vue

diff --git a/src/App.vue b/src/App.vue
index a83ffeab..5a32661e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,6 +43,12 @@ export default {
 <style lang="scss">
 @import '@/style/style.scss';
 
+.card-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .headerSearch {
 	width: 120px !important;
 	margin-right: 5px;
diff --git a/src/api/model/enp.js b/src/api/model/enp.js
index 2e490031..0ee57605 100644
--- a/src/api/model/enp.js
+++ b/src/api/model/enp.js
@@ -51,7 +51,7 @@ export default {
 			name: "排口/设备关系",
 			req: async function(data){
 				return await http.get(
-					`${config.API_URL}/enp/drain_equips/`,
+					`${config.API_URL}/enp/drain_equip/`,
 					data
 				);
 			}
@@ -60,7 +60,7 @@ export default {
 			name: "创建",
 			req: async function(data){
 				return await http.post(
-					`${config.API_URL}/enp/drain_equips/`,
+					`${config.API_URL}/enp/drain_equip/`,
 					data);
 			}
 		}
diff --git a/src/views/bigScreen/enpComponents/cems.vue b/src/views/bigScreen/enpComponents/cems.vue
new file mode 100644
index 00000000..2a5c4109
--- /dev/null
+++ b/src/views/bigScreen/enpComponents/cems.vue
@@ -0,0 +1,176 @@
+<template>
+    <el-card>
+        <template #header>
+            <div class="card-header">
+                <span>CEMS监测清单</span>
+            </div>
+        </template>
+        <scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id" :params="params"
+            hidePagination @row-click="rowClick">
+            <el-table-column type="index" width="50" />
+            <el-table-column prop="equipment_number" label="设备编号" width="180" />
+            <el-table-column prop="equipment_name" label="设备名称" />
+            <el-table-column prop="name" label="监测状态" />
+            <el-table-column label="颗粒物实测(mg/m3)">
+                <template #default="scope">
+                    {{ scope.row.equipment_envdata.dust_rtd ? scope.row.equipment_envdata.dust_rtd : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="颗粒物折算(mg/m3)">
+                <template #default="scope">
+                    {{ scope.row.equipment_envdata.dust_zs ? scope.row.equipment_envdata.dust_zs : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="温度(℃)">
+                <template #default="scope">
+                    {{ scope.row.equipment_envdata.temperature ? scope.row.equipment_envdata.temperature : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="压力(KPa)">
+                <template #default="scope">
+                    {{ scope.row.equipment_envdata.pressure ? scope.row.equipment_envdata.pressure : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="流速(m/s)">
+                <template #default="scope">
+                    {{ scope.row.equipment_envdata.speed ? scope.row.equipment_envdata.speed : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="湿度(%)">
+                <template #default="scope">
+                    {{ scope.row.equipment_envdata.humidity ? scope.row.equipment_envdata.humidity : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="流量(m3/h)">
+                <template #default="scope">
+                    {{ scope.row.equipment_envdata.flux ? scope.row.equipment_envdata.flux : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="监测达标率" />
+        </scTable>
+    </el-card>
+    <div style="height: 8px;"></div>
+    <el-card style="width: 100%; " v-show="currentEquipmentId != ''">
+        <template #header>
+            <div class="card-header">
+                <span>CEMS监测详情</span>
+                <el-button @click="handleQuery">刷新</el-button>
+            </div>
+        </template>
+        <div style="display:flex">
+            <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
+                end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" @change="handleQuery" style="width: 200px" />
+
+            <el-select v-model="query.time_bucket" placeholder="周期" style="margin-left:4px" @change="handleQuery">
+                <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
+        <div id="cChart" style="width: 100%; height:400px"></div>
+    </el-card>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+    data() {
+        return {
+            apiObj: this.$API.enp.drain_equip.list,
+            params: { drain__type: 10, equipment_type: 30, has_envdata: 'yes' },
+            currentEquipmentId: '',
+            currentEquipmentName: '',
+            timeRange: [],
+            timeOptions: [
+                { label: '分钟', value: '1 minute' },
+                { label: '小时', value: '1 hour' },
+                { label: '天', value: '1 day' },
+            ],
+            basicOption: {
+                title: {
+                    text: '设备名称'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {},
+                toolbox: {
+                    feature: {
+                        saveAsImage: {}
+                    }
+                },
+                dataset: {
+                    source: []
+                },
+                xAxis: { type: 'category' },
+                yAxis: {},
+                series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
+            },
+            query: {
+                "end_time": "",
+                "start_time": "",
+                "time_bucket": "1 hour",
+                "equipment_id": ''
+            }
+        }
+    },
+    mounted() {
+        this.initTimeRange()
+    },
+    methods: {
+        initTimeRange() {
+            var now = new Date();
+            var start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+            let start_ = this.$TOOL.dateFormat(start)
+            let now_ = this.$TOOL.dateFormat(now)
+            this.timeRange = [start_, now_]
+        },
+        rowClick(row) {
+            this.currentEquipmentId = row.equipment;
+            this.currentEquipmentName = row.equipment_name;
+            this.query.equipment_id = row.equipment;
+            this.query.start_time = this.timeRange[0];
+            this.query.end_time = this.timeRange[1];
+            this.$nextTick(() => { this.initChart() })
+
+        },
+        initChart() {
+            var that = this;
+            var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
+            if (myChart == undefined) {
+                myChart = echarts.init(document.getElementById('cChart'));
+            }
+            myChart.showLoading();
+            this.$API.bi.dataset.exec.req('enp_edata', {
+                query: this.query,
+                raise_exception: true
+            }).then(res => {
+                let newOption = Object.assign({}, this.basicOption);
+                let ds0 = res.data.ds0
+                let series = []
+                if (ds0) {
+                    let ds00 = ds0[0]
+                    for (var x = 1, y = ds00.length; x < y; x++) {
+                        series.push({ type: 'line' })
+                    }
+                }
+                newOption.dataset.source = res.data.ds0;
+                newOption.series = series;
+                newOption.title.text = this.currentEquipmentName;
+                myChart.setOption(newOption);
+            }).then(() => { myChart.hideLoading() })
+
+        },
+        handleQuery() {
+            this.query.start_time = this.timeRange[0]
+            this.query.end_time = this.timeRange[1]
+            this.initChart()
+        }
+    },
+
+}
+</script>
\ No newline at end of file
diff --git a/src/views/bigScreen/index_enp_blue.vue b/src/views/bigScreen/index_enp_blue.vue
index 001b3ceb..6d745726 100644
--- a/src/views/bigScreen/index_enp_blue.vue
+++ b/src/views/bigScreen/index_enp_blue.vue
@@ -20,7 +20,7 @@
                 <template #dropdown>
                   <el-dropdown-menu>
                     <el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
-                    <el-dropdown-item command="CEMS">CEMS监测清单</el-dropdown-item>
+                    <el-dropdown-item command="cems">CEMS监测清单</el-dropdown-item>
                     <el-dropdown-item>CEMS监测预警</el-dropdown-item>
                     <el-dropdown-item>CEMS报表导出</el-dropdown-item>
                   </el-dropdown-menu>
@@ -281,7 +281,8 @@
         <el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
           direction="ltr" :show-close="false" id="enpElDrawer">
           <!-- <div class="sysName">智能环保一体化管控平台</div> -->
-          <org-dialog @close="closeDialog"></org-dialog>
+          <org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog>
+          <cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer>
         </el-drawer>
       </div>
     </el-main>
@@ -294,11 +295,13 @@ import * as BABYLON_GUI from "babylonjs-gui"
 import * as BABYLON_GRID from "@/utils/gridMaterial"
 import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
 import orgDialog from "./enpComponents/orgwryList"
+import cemsDrawer from './enpComponents/cems.vue'
 import 'babylonjs-loaders';
 import 'animate.css';
 export default {
   components: {
-    orgDialog
+    orgDialog,
+    cemsDrawer
   },
   data() {
     return {
@@ -327,7 +330,7 @@ export default {
       showKgcet: true,
       currentLightMesh: null,
       activeBtns: 0,
-      activePage: 0,
+      activeDrawerName: '',
       activeIndex: 0,
       activeSection: 2,
       activeSectionName: '回转窑',
@@ -528,28 +531,17 @@ export default {
     handleClick(command) {
       this.activeIndex = 1;
       this.elDrawer = true;
-      if (command == "paikou") {
-        this.activePage = 1;
-      } else if (command == "CEMS") {
-        this.activePage = 2;
-      }
+      this.activeDrawerName = command;
     },
     handleClick2(command) {
       this.activeIndex = 2;
-      if (command == "wuran") {
-        this.activePage = 3;
-      }
+      this.elDrawer = true;
+      this.activeDrawerName = command;
     },
     handleClick3(command) {
       this.activeIndex = 3;
-      if (command == "changwai") {
-        this.activePage = 5;
-      } else if (command == 'inner') {
-        this.activePage = 4;
-      }
-    },
-    pageClick(page) {
-      this.activePage = page;
+      this.elDrawer = true;
+      this.activeDrawerName = command;
     },
     getMessage(msg) {
       console.log(msg);