From 93f6c6d1a3383ff2e5e66a5aa13464b90634aa59 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Wed, 30 Apr 2025 16:20:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(ems):=20=E7=8E=AF=E5=A2=83=E7=9B=91?=
 =?UTF-8?q?=E6=B5=8B=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=A0=91=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加左侧设备树，支持按设备名称筛选
- 点击树节点时查询对应设备的环境监测记录
- 优化表格列显示，移除主键标识列，增加序号列
- 调整查询参数，支持同时按多个设备 ID 查询
---
 .../ems/record/recordIotenvInstant/index.vue  | 172 +++++++++++++++---
 1 file changed, 147 insertions(+), 25 deletions(-)

diff --git a/src/views/ems/record/recordIotenvInstant/index.vue b/src/views/ems/record/recordIotenvInstant/index.vue
index 4a2dd6d..69f8615 100644
--- a/src/views/ems/record/recordIotenvInstant/index.vue
+++ b/src/views/ems/record/recordIotenvInstant/index.vue
@@ -1,5 +1,32 @@
 <template>
     <div class="app-container">
+      <el-row :gutter="28">
+        <el-col :span="5" :xs="24">
+          <div class="head-container">
+            <el-input
+              v-model="workUnitName"
+              placeholder="请输入物联网设备名称"
+              clearable
+              size="small"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
+            />
+          </div>
+          <div class="head-container">
+            <el-tree
+              :data="monitorInfoOptions"
+              :props="monitorProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              @node-click="handleNodeClick"
+            />
+          </div>
+        </el-col>
+        <el-col :span="19" :xs="24">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
 <!--                        <el-form-item label="计量设备编号" prop="monitorId">
                             <el-input
@@ -81,14 +108,14 @@
                                     @keyup.enter.native="handleQuery"
                             />
                         </el-form-item>-->
-                        <el-form-item label="采集时间" prop="collectTime">
+<!--                        <el-form-item label="采集时间" prop="collectTime">
                             <el-date-picker clearable
                                             v-model="queryParams.collectTime"
                                             type="date"
                                             value-format="yyyy-MM-dd"
                                             placeholder="请选择采集时间">
                             </el-date-picker>
-                        </el-form-item>
+                        </el-form-item>-->
 <!--                        <el-form-item label="记录时间" prop="recodeTime">
                             <el-date-picker clearable
                                             v-model="queryParams.recodeTime"
@@ -162,7 +189,8 @@
 
         <el-table v-loading="loading" :data="recordIotenvInstantList" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" align="center" />
-                    <el-table-column label="主键标识" align="center" prop="objid" v-if="columns[0].visible"/>
+<!--                    <el-table-column label="主键标识" align="center" prop="objid" v-if="columns[0].visible"/>-->
+                    <el-table-column label="序号" type="index" width="55" align="center" v-if="columns[0].visible" />
                     <el-table-column label="计量设备编号" align="center" prop="monitorId" v-if="columns[1].visible">
 
                     </el-table-column>
@@ -219,6 +247,9 @@
             </el-table-column>
         </el-table>
 
+        </el-col>
+      </el-row>
+
         <pagination
                 v-show="total>0"
                 :total="total"
@@ -288,11 +319,25 @@
 <script>
     import { listRecordIotenvInstant, getRecordIotenvInstant, delRecordIotenvInstant, addRecordIotenvInstant, updateRecordIotenvInstant } from "@/api/ems/record/recordIotenvInstant";
     import {parseTime} from "@/utils/ruoyi";
+    import {getMonitorInfoTree, listBaseMonitorInfo} from "@/api/ems/base/baseMonitorInfo";
 
     export default {
         name: "RecordIotenvInstant",
         data() {
             return {
+
+              workUnitName:null,
+              //下拉树List
+              baseMonitorInfoOptions: [],
+              //左侧树结构List
+              monitorInfoOptions: [],
+              //能原类型信息
+              baseMonitorInfoList: [],
+              monitorProps: {
+                children: 'children',
+                label: 'label'
+              },
+
               // 记录时间时间范围
               daterangeRecordTime: [],
 
@@ -319,19 +364,19 @@
                   params:{},
                     pageNum: 1,
                     pageSize: 10,
-                                monitorId: null,
-                                temperature: null,
-                                humidity: null,
-                                illuminance: null,
-                                noise: null,
-                                concentration: null,
-                                vibrationSpeed: null,
-                                vibrationDisplacement: null,
-                                vibrationAcceleration: null,
-                                vibrationTemp: null,
-                                collectTime: null,
-                                recodeTime: null,
-
+                    monitorId: null,
+                    temperature: null,
+                    humidity: null,
+                    illuminance: null,
+                    noise: null,
+                    concentration: null,
+                    vibrationSpeed: null,
+                    vibrationDisplacement: null,
+                    vibrationAcceleration: null,
+                    vibrationTemp: null,
+                    collectTime: null,
+                    recodeTime: null,
+                  monitorIds: [],
                 },
                 // 表单参数
                 form: {},
@@ -339,7 +384,7 @@
                 rules: {
                 },
                 columns: [
-                        { key: 0, label: `主键标识`, visible: true },
+                        { key: 0, label: `标识`, visible: true },
                         { key: 1, label: `计量设备编号`, visible: true },
                         { key: 2, label: `温度`, visible: true },
                         { key: 3, label: `湿度`, visible: true },
@@ -350,7 +395,7 @@
                         { key: 8, label: `振动-位移(um)`, visible: true },
                         { key: 9, label: `振动-加速度(g)`, visible: true },
                         { key: 10, label: `振动-温度(℃)`, visible: true },
-                        { key: 11, label: `采集时间`, visible: true },
+                        { key: 11, label: `采集时间`, visible: false },
                         { key: 12, label: `记录时间`, visible: true },
                 ]
             };
@@ -365,9 +410,72 @@
           this.daterangeRecordTime[1] = today + ' 08:00:00'
 
 
-            this.getList();
+          this.getTreeMonitorInfo()
+          this.getTreeselect()
+          this.getList();
+
         },
+
+      watch: {
+        // 根据名称筛选计量设备树
+        workUnitName(val) {
+          this.$refs.tree.filter(val)
+        }
+      },
+
         methods: {
+
+          /** 转换计量设备信息数据结构 */
+          normalizer(node) {
+            if (node.children && !node.children.length) {
+              delete node.children
+            }
+            return {
+              id: node.monitorId,
+              label: node.monitorName,
+              children: node.children
+            }
+          },
+          /** 查询计量设备信息下拉树结构   新增用*/
+          getTreeMonitorInfo() {
+            listBaseMonitorInfo({ monitorTypeList: [5,6,7,8,9] }).then(response => {
+              this.baseMonitorInfoOptions = []
+              const data = { objId: 0, monitorName: '顶级节点', children: [] }
+              data.children = this.handleTree(response.data, 'objId', 'parentId')
+              this.baseMonitorInfoOptions.push(data)
+            })
+          },
+
+                      // 递归获取树中所有节点的monitorId
+                      getAllMonitorIds(nodes) {
+                        let ids = [];
+                        if (!nodes || nodes.length === 0) return ids;
+
+                        nodes.forEach(node => {
+                          if (node.id) {
+                            ids.push(node.id);
+                          }
+                          if (node.children && node.children.length > 0) {
+                            ids = ids.concat(this.getAllMonitorIds(node.children));
+                          }
+                        });
+                        console.log(ids)
+                        return ids;
+                      },
+
+          // 筛选节点
+          filterNode(value, data) {
+            if (!value) return true
+            return data.label.indexOf(value) !== -1
+          },
+          // 节点单击事件
+          handleNodeClick(data) {
+            // 点击节点时清空monitorIds，只使用选中的monitorId
+            this.queryParams.monitorIds = [];
+            this.queryParams.monitorId = data.code
+            this.handleQuery()
+          },
+
             /** 查询物联网数据列表 */
             getList() {
                 this.loading = true;
@@ -382,6 +490,13 @@
                 this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1]
               }
 
+
+              // 如果没有选中节点，则获取所有设备ID
+              if (!this.queryParams.monitorId) {
+                this.queryParams.monitorIds = this.getAllMonitorIds(this.monitorInfoOptions);
+              }
+              console.log(this.queryParams.monitorIds)
+
                 listRecordIotenvInstant(this.queryParams).then(response => {
                     this.recordIotenvInstantList = response.rows;
                     this.total = response.total;
@@ -477,12 +592,19 @@
                     this.$modal.msgSuccess("删除成功");
                 }).catch(() => {});
             },
-    /** 导出按钮操作 */
-    handleExport() {
-        this.download('ems/record/recordIotenvInstant/export', {
-            ...this.queryParams
-        }, `recordIotenvInstant_${new Date().getTime()}.xlsx`)
-    }
+            /** 导出按钮操作 */
+            handleExport() {
+                this.download('ems/record/recordIotenvInstant/export', {
+                    ...this.queryParams
+                }, `recordIotenvInstant_${new Date().getTime()}.xlsx`)
+            },
+
+          getTreeselect() {
+            getMonitorInfoTree({ monitorTypeList: [5,6,7,8,9]}).then(response => {
+              this.monitorInfoOptions = response.data
+            })
+          },
+
     }
     };
 </script>