From 26b055ab6fc354646ec8cf9e6c12755933596e78 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Sun, 4 Feb 2024 14:16:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4cmes=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/enpComponents/cems.vue    | 165 ++++++++++--------
 .../bigScreen/enpComponents/pollutant.vue     |  11 +-
 2 files changed, 89 insertions(+), 87 deletions(-)

diff --git a/src/views/bigScreen/enpComponents/cems.vue b/src/views/bigScreen/enpComponents/cems.vue
index 81799288..6908d173 100644
--- a/src/views/bigScreen/enpComponents/cems.vue
+++ b/src/views/bigScreen/enpComponents/cems.vue
@@ -1,77 +1,86 @@
 <template>
-    <el-card class="enpelCard">
-        <template #header>
-            <div class="card-header">
-                <span>CEMS监测清单</span>
-            </div>
-        </template>
-        <div>
-            <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>
-        </div>
+    <el-container>
+        <el-header style="height: 40%">
+            <el-container>
+                <el-header>
+                    <div class="panel_title">CEMS监测清单</div>
+                </el-header>
+                <el-main class="nopadding">
+                    <scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id"
+                        :params="params" hidePagination hideDo @row-click="rowClick">
+                        <el-table-column type="index" width="50" />
+                        <el-table-column prop="equipment_number" label="设备编号" width="120" />
+                        <el-table-column prop="equipment_name" label="设备名称" width="180" />
+                        <el-table-column prop="name" label="监测状态" />
+                        <el-table-column label="颗粒物实测(mg/m3)" width="180">
+                            <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)" width="180">
+                            <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-main>
+            </el-container>
 
-    </el-card>
-    <div style="height: 8px;"></div>
-    <el-card style="width: 100%; " v-show="currentEquipmentId != ''" class="enpelCard">
-        <template #header>
-            <div class="card-header">
-                <span>CEMS监测详情</span>
-                <el-button @click="handleQuery">刷新</el-button>
-            </div>
-        </template>
-        <div style="display:flex">
-            <div style="width: 500px">
-                <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
-                    end-placeholder="结束时间" @change="handleQuery" style="width: 100%" />
-            </div>
-
-            <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; margin-top: 16px"></div>
-    </el-card>
+        </el-header>
+        <el-main class="nopadding">
+            <el-container>
+                <el-main class="nopadding">
+                    <el-container>
+                        <el-header>
+                            <div class="left-panel">
+                                <div class="panel_title">CEMS监测详情</div>
+                            </div>
+                            <div class="right-panel">
+                                <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
+                                    start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
+                                    style="width: 100%" />
+                                <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>
+                        </el-header>
+                        <el-main class="nppadding">
+                            <div v-show="currentEquipmentId != ''" id="cChart" style="width: 100%; height:100%;"></div>
+                        </el-main>
+                    </el-container>
+                </el-main>
+            </el-container>
+        </el-main>
+    </el-container>
 </template>
 <script>
 import * as echarts from "echarts";
@@ -173,19 +182,21 @@ export default {
 
         },
         handleQuery() {
-            let time1 = this.timeRange[0]
-            let time2 = this.timeRange[1]
+            let that = this;
+            let timeRange = Object.assign([], that.timeRange);;
+            let time1 = timeRange[0]
+            let time2 = timeRange[1];
             let formatstr = 'yyyy-MM-dd hh:mm:ss'
             if (this.query.time_bucket == '1 minute') {
-                time2.setTime(time2.getTime() + 1000 * 60);
+                time2 = new Date(time2.getTime() + 1000 * 60);
                 formatstr = 'yyyy-MM-dd hh:mm:00'
             }
             else if (this.query.time_bucket == '1 hour') {
-                time2.setTime(time2.getTime() + 1000 * 60 * 60);
+                time2 = new Date(time2.getTime() + 1000 * 60 * 60);
                 formatstr = 'yyyy-MM-dd hh:00:00'
             }
             else if (this.query.time_bucket == '1 day') {
-                time2.setTime(time2.getTime() + 1000 * 60 * 60 * 24);
+                time2 = new Date(time2.getTime() + 1000 * 60 * 60 * 24);
                 formatstr = 'yyyy-MM-dd'
             }
             this.query.start_time = this.$TOOL.dateFormat(time1, formatstr)
diff --git a/src/views/bigScreen/enpComponents/pollutant.vue b/src/views/bigScreen/enpComponents/pollutant.vue
index 8ad44956..97350f14 100644
--- a/src/views/bigScreen/enpComponents/pollutant.vue
+++ b/src/views/bigScreen/enpComponents/pollutant.vue
@@ -48,13 +48,4 @@ export default {
         }
     }
 }
-</script>
-<style scoped>
-.panel_title {
-    font-size: 22px;
-}
-
-el-header {
-    background: aqua;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file