From 4ad85cab1355ef60e7e5f270eb2718ac45cd05f9 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 8 Mar 2024 13:19:00 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=AF=E5=A2=83=E8=B4=A8=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/enpComponents/cems.vue    |   2 +-
 .../bigScreen/enpComponents/envirmonitor.vue  | 147 +++++++-
 .../enpComponents/envirqualmonitor.vue        | 316 +++++++-----------
 3 files changed, 244 insertions(+), 221 deletions(-)

diff --git a/src/views/bigScreen/enpComponents/cems.vue b/src/views/bigScreen/enpComponents/cems.vue
index 3398b103..0ec9053f 100644
--- a/src/views/bigScreen/enpComponents/cems.vue
+++ b/src/views/bigScreen/enpComponents/cems.vue
@@ -68,7 +68,7 @@
             <el-container>
                 <el-main class="nopadding">
                     <el-container>
-                        <el-header>
+                        <el-header class="panel_title">
                             <div class="left-panel">
                                 CEMS监测详情
                             </div>
diff --git a/src/views/bigScreen/enpComponents/envirmonitor.vue b/src/views/bigScreen/enpComponents/envirmonitor.vue
index 5ca67b37..8ff9a10f 100644
--- a/src/views/bigScreen/enpComponents/envirmonitor.vue
+++ b/src/views/bigScreen/enpComponents/envirmonitor.vue
@@ -30,19 +30,43 @@
                             </div>
                         </el-header>
                         <el-main>
-                            <scTable :apiObj="apiObj" size="large" :params="params" :query="query">
+                            <scTable :apiObj="apiObj" size="large" :params="params" :query="query" @row-click="rowClick">
                                 <el-table-column type="index" width="50" />
                                 <el-table-column prop="number" label="设备编号"></el-table-column>
-                                <el-table-column prop="level" label="设备名称"></el-table-column>
-                                <el-table-column prop="type" label="设备类型"></el-table-column>
+                                <el-table-column prop="name" label="设备名称"></el-table-column>
+                                <el-table-column prop="cate_name" label="设备类型"></el-table-column>
                                 <el-table-column prop="mgroup_name" label="所属工序"></el-table-column>
                                 <el-table-column prop="running_state" label="运行状态"></el-table-column>
-                                <el-table-column prop="PM25" label="PM2.5实测值"></el-table-column>
-                                <el-table-column prop="PM10" label="PM10实测值"></el-table-column>
-                                <el-table-column prop="level" label="湿度"></el-table-column>
-                                <el-table-column prop="mgroup" label="温度"></el-table-column>
-                                <el-table-column prop="eqpment" label="大气压"></el-table-column>
-                                <el-table-column prop="mgroup" label="风向"></el-table-column>
+                                <el-table-column label="PM2.5实测值">
+                                    <template #default="scope">
+                                         {{ scope.row.envdata.pm25 ? scope.row.envdata.pm25 : '-' }}
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="PM10实测值">
+                                    <template #default="scope">
+                                        {{ scope.row.envdata.pm10 ? scope.row.envdata.pm10 : '-' }}
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="湿度">
+                                    <template #default="scope">
+                                        {{ scope.row.envdata.humidity ? scope.row.envdata.humidity : '-' }}
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="温度">
+                                    <template #default="scope">
+                                        {{ scope.row.envdata.temperature ? scope.row.envdata.temperature : '-'}}
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="大气压">
+                                    <template #default="scope">
+                                        {{ scope.row.envdata.pressure ? scope.row.envdata.pressure : '-' }}
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="风向">
+                                    <template #default="scope">
+                                        {{ scope.row.envdata.wind_direction ? scope.row.envdata.wind_direction : '-' }}
+                                    </template>
+                                </el-table-column>
                             </scTable>
                         </el-main>
                     </el-container>
@@ -56,10 +80,18 @@
                         空气质量微站实时监测详情
                     </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="nopadding">
-                    <div v-show="currentEquipmentId != ''" id="lineChart" style="width: 100%; height:100%;"></div>
+                    <div v-show="currentEquipmentId != ''" id="cChart" style="width: 100%; height:100%;"></div>
                 </el-main>
             </el-container>
         </el-main>
@@ -67,25 +99,84 @@
     </el-container>
 </template>
 <script>
+import * as echarts from "echarts";
 export default {
     data() {
         return {
-            params: {},
-            query: {},
-            apiObj: null,
+            params: { type: 20, cate__code: 'aqms', has_envdata: 'yes'  },
+            query: {
+                "end_time": "",
+                "start_time": "",
+                "time_bucket": "1 hour",
+                "equipment_id": ''
+            },
+            timeOptions: [
+                { label: '分钟', value: '1 minute' },
+                { label: '小时', value: '1 hour' },
+                { label: '天', value: '1 day' },
+            ],
+            timeRange: [],
+            apiObj: this.$API.em.equipment.list,
             processOptions: [],
             currentEquipmentId: '',
+            currentEquipmentName: '',
+            basicOption: {
+                title: {
+                    text: '设备名称'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    confine: true,
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+
+                    // itemStyle: {
+                    //     color: '#fff'
+                    // }
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {}
+                    }
+                },
+                dataset: {
+                    source: []
+                },
+                xAxis: { type: 'category' },
+                yAxis: {},
+                series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
+            },
         }
     },
+    mounted() {
+        this.initTimeRange()
+    },
     methods: {
-        handleQuery() {
-            this.$refs.table.queryData(this.query);
+        handleQuery() { },
+        initTimeRange() {
+            var now = new Date();
+            var start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+            this.timeRange = [start, now]
+        },
+         rowClick(row) {
+            this.currentEquipmentId = row.id;
+            this.currentEquipmentName = row.name;
+            this.query.equipment_id = row.id;
+            this.$nextTick(() => { this.handleQuery1() })
+
         },
         initChart() {
             var that = this;
-            var myChart = echarts.getInstanceByDom(document.getElementById('lineChart'));
+            var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
             if (myChart == undefined) {
-                myChart = echarts.init(document.getElementById('lineChart'), 'dark');
+                myChart = echarts.init(document.getElementById('cChart'), 'dark');
             }
             myChart.showLoading();
             this.$API.bi.dataset.exec.req('enp_edata2', {
@@ -109,6 +200,28 @@ export default {
             }).then(() => { myChart.hideLoading() })
 
         },
+        handleQuery1() {
+            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 = new Date(time2.getTime() + 1000 * 60);
+                formatstr = 'yyyy-MM-dd hh:mm:00'
+            }
+            else if (this.query.time_bucket == '1 hour') {
+                time2 = new Date(time2.getTime() + 1000 * 60 * 60);
+                formatstr = 'yyyy-MM-dd hh:00:00'
+            }
+            else if (this.query.time_bucket == '1 day') {
+                time2 = new Date(time2.getTime() + 1000 * 60 * 60 * 24);
+                formatstr = 'yyyy-MM-dd'
+            }
+            this.query.start_time = this.$TOOL.dateFormat(time1, formatstr)
+            this.query.end_time = this.$TOOL.dateFormat(time2, formatstr)
+            this.initChart()
+        }
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/bigScreen/enpComponents/envirqualmonitor.vue b/src/views/bigScreen/enpComponents/envirqualmonitor.vue
index ec1aa0b7..9e2b4645 100644
--- a/src/views/bigScreen/enpComponents/envirqualmonitor.vue
+++ b/src/views/bigScreen/enpComponents/envirqualmonitor.vue
@@ -1,236 +1,146 @@
 <template>
     <el-container>
-        <el-header style="height: 40%;padding: 0;">
+        <el-header class="panel_title">
+            <div class="left-panel">
+                环境空气质量监测实时数据
+            </div>
+            <div class="right-panel">
+                <div class="backMap" @click="backtoMap">
+                    切换地图
+                    <el-icon>
+                        <Switch />
+                    </el-icon>
+                </div>
+            </div>
+        </el-header>
+        <el-main class="nppadding">
             <el-container>
-                <el-header class="panel_title">
+                <el-header class="searchWrap">
                     <div class="left-panel">
-                        环境质量监测
                     </div>
                     <div class="right-panel">
-                        <div class="backMap" @click="backtoMap">
-                            切换地图
-                            <el-icon>
-                                <Switch />
-                            </el-icon>
-                        </div>
+                        <el-select v-model="time_bucket" placeholder="周期" style="margin-left:4px"
+                           >
+                            <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                        <el-select v-model="query.metric" placeholder="监测物" style="margin-left:4px"
+                           >
+                            <el-option v-for="item in metricOptions" :key="item.value" :label="item.label"
+                                :value="item.value"  />
+                        </el-select>
+                        <el-button @click="handleQuery">查询</el-button>
                     </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="监测达标率" />
+                <el-main>
+                    <scTable :data="tableData"  hideDo v-show="time_bucket=='minute'">
+                        <el-table-column type="index" />
+                        <el-table-column prop="equipment_name" label="站点名称" />
+                        <el-table-column prop="metric_0" label="0" />
+                        <el-table-column prop="metric_5" label="5" />
+                        <el-table-column prop="metric_10" label="10" />
+                        <el-table-column prop="metric_15" label="15" />
+                        <el-table-column prop="metric_20" label="20" />
+                        <el-table-column prop="metric_25" label="25" />
+                        <el-table-column prop="metric_30" label="30" />
+                        <el-table-column prop="metric_35" label="35" />
+                        <el-table-column prop="metric_40" label="40" />
+                        <el-table-column prop="metric_45" label="45" />
+                        <el-table-column prop="metric_50" label="50" />
+                        <el-table-column prop="metric_55" label="55" />
+                        <el-table-column prop="metric_hour" label="小时均值" />
+                    </scTable>
+                    <scTable :data="tableData"  hideDo v-show="time_bucket=='hour'">
+                        <el-table-column type="index" />
+                        <el-table-column prop="equipment_name" label="站点名称" />
+                        <el-table-column prop="val_1" label="1" />
+                        <el-table-column prop="val_2" label="2" />
+                        <el-table-column prop="val_3" label="3" />
+                        <el-table-column prop="val_4" label="4" />
+                        <el-table-column prop="val_5" label="5" />
+                        <el-table-column prop="val_6" label="6" />
+                        <el-table-column prop="val_7" label="7" />
+                        <el-table-column prop="val_8" label="8" />
+                        <el-table-column prop="val_9" label="9" />
+                        <el-table-column prop="val_10" label="10" />
+                        <el-table-column prop="val_11" label="11" />
+                        <el-table-column prop="val_12" label="12" />
+                        <el-table-column prop="val_13" label="13" />
+                        <el-table-column prop="val_14" label="14" />
+                        <el-table-column prop="val_15" label="15" />
+                        <el-table-column prop="val_16" label="16" />
+                        <el-table-column prop="val_17" label="17" />
+                        <el-table-column prop="val_18" label="18" />
+                        <el-table-column prop="val_19" label="19" />
+                        <el-table-column prop="val_20" label="20" />
+                        <el-table-column prop="val_21" label="21" />
+                        <el-table-column prop="val_22" label="22" />
+                        <el-table-column prop="val_23" label="23" />
+                        <el-table-column prop="val_24" label="24" />
+                        <el-table-column prop="val_day" label="日均值" />
                     </scTable>
-                </el-main>
-            </el-container>
-
-        </el-header>
-        <el-main class="nopadding">
-            <el-container>
-                <el-main class="nopadding">
-                    <el-container>
-                        <el-header class="panel_title">
-                            <div class="left-panel">
-                                环境空气质量监测实时数据
-                            </div>
-                            <div class="right-panel">
-                                <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>
-                                <el-select v-model="query.type" placeholder="污染源" style="margin-left:4px"
-                                    @change="handleQuery">
-                                    <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
-                                </el-select>
-                            </div>
-                        </el-header>
-                        <el-main class="nppadding">
-                            <scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id"
-                                :params="params" hideDo @row-click="rowClick">
-                                <el-table-column type="index" />
-                                <el-table-column label="站点名称" />
-                                <el-table-column label="0" />
-                                <el-table-column label="5" />
-                                <el-table-column label="10" />
-                                <el-table-column label="15" />
-                                <el-table-column label="20" />
-                                <el-table-column label="25" />
-                                <el-table-column label="30" />
-                                <el-table-column label="35" />
-                                <el-table-column label="40" />
-                                <el-table-column label="45" />
-                                <el-table-column label="50" />
-                                <el-table-column label="55" />
-                                <el-table-column label="小时均值" />
-                            </scTable>
-                        </el-main>
-                    </el-container>
                 </el-main>
             </el-container>
         </el-main>
     </el-container>
 </template>
 <script>
-import * as echarts from "echarts";
 export default {
     data() {
         return {
-            apiObj: this.$API.enp.drain_equip.list,
-            params: { drain__type: 10, equipment__type: 20, has_envdata: 'yes' },
-            currentEquipmentId: '',
-            currentEquipmentName: '',
-            typeOptions: ['PM2.5', 'PM10'],
-            timeOptions: [
-                { label: '分钟上报值', value: '1 minute' },
-                { label: '小时均值', value: '1 hour' },
-                { label: '日均值', value: '1 day' },
+            tableData:[],
+            metricOptions: [
+                { label: 'PM2.5', value: 'pm25' },
+                { label: 'PM10', value: 'pm10' },
             ],
-            basicOption: {
-                title: {
-                    text: '设备名称'
-                },
-                tooltip: {
-                    trigger: 'axis'
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                legend: {
-
-                    // itemStyle: {
-                    //     color: '#fff'
-                    // }
-                },
-                toolbox: {
-                    feature: {
-                        saveAsImage: {}
-                    }
-                },
-                dataset: {
-                    source: []
-                },
-                xAxis: { type: 'category' },
-                yAxis: {},
-                series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
-            },
+            timeOptions: [
+                { label: '分钟上报值', value: 'minute' },
+                { label: '小时均值', value: 'hour' },
+            ],
+            time_bucket:'minute',
             query: {
-                "end_time": "",
-                "start_time": "",
-                "time_bucket": "1 hour",
-                "equipment_id": ''
-            }
+                year: '',
+                month: '',
+                day: '',
+                hour: '',
+                metric: 'pm25',
+                ecate_code: "aqms",
+            },
         }
     },
     mounted() {
-        this.initTimeRange()
+        this.getTime();
     },
     methods: {
-        initTimeRange() {
+        getTime() {
             var now = new Date();
-            var start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
-            this.timeRange = [start, now]
-        },
-        rowClick(row) {
-            this.currentEquipmentId = row.equipment;
-            this.currentEquipmentName = row.equipment_name;
-            this.query.equipment_id = row.equipment;
-            this.$nextTick(() => { this.handleQuery() })
-
-        },
-        initChart() {
-            var that = this;
-            var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
-            if (myChart == undefined) {
-                myChart = echarts.init(document.getElementById('cChart'), 'dark');
-            }
-            myChart.showLoading();
-            this.$API.bi.dataset.exec.req('enp_edata2', {
-                query: this.query,
-                raise_exception: true
-            }).then(res => {
-                let newOption = Object.assign({}, this.basicOption);
-                let ds0 = res.data.ds0
-                ds0.pop()
-                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() })
-
+            this.query.year = now.getFullYear();
+            this.query.month = now.getMonth() + 1;
+            this.query.day = now.getDate();
+            this.query.hour = now.getHours();
+            this.handleQuery();
         },
         handleQuery() {
             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 = new Date(time2.getTime() + 1000 * 60);
-                formatstr = 'yyyy-MM-dd hh:mm:00'
+            console.log(that.query);
+            that.getTableData();
+        },
+        getTableData() { 
+            let that = this;
+            let exec_search = '';
+            if (that.time_bucket == 'minute') {
+                exec_search='enp_edata_metric_nodrain'
+            } else if (that.time_bucket == 'hour') {
+                exec_search = 'enp_edata_hour_nodrain';
             }
-            else if (this.query.time_bucket == '1 hour') {
-                time2 = new Date(time2.getTime() + 1000 * 60 * 60);
-                formatstr = 'yyyy-MM-dd hh:00:00'
-            }
-            else if (this.query.time_bucket == '1 day') {
-                time2 = new Date(time2.getTime() + 1000 * 60 * 60 * 24);
-                formatstr = 'yyyy-MM-dd'
-            }
-            this.query.start_time = this.$TOOL.dateFormat(time1, formatstr)
-            this.query.end_time = this.$TOOL.dateFormat(time2, formatstr)
-            // this.initChart()
-        }
+            that.$API.bi.dataset.exec.req(exec_search, {
+                query: that.query,
+                raise_exception: true
+            }).then(res => { 
+                console.log(res.data2.ds0);
+                this.tableData = res.data2.ds0;
+            })
+        },
     },
 
 }