From 5e53e0d7ec34a6ce8889dc79d65e8996a46c0f72 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Tue, 27 May 2025 13:59:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(ems):=20=E4=B8=BA=E8=AE=A1=E9=87=8F?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=98=88=E5=80=BC=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在设备列表中增加"阈值"操作按钮
- 实现阈值管理对话框，包括设备信息展示和阈值规则列表- 添加新增、编辑和删除阈值规则的功能
- 优化表单验证和数据加载逻辑
- 增加相关样式和布局调整
---
 .../base/baseMonitorInfoIOTDevice/index.vue   | 297 +++++++++++++++++-
 1 file changed, 293 insertions(+), 4 deletions(-)

diff --git a/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue b/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
index 25d200d..b5a31b4 100644
--- a/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
+++ b/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
@@ -94,12 +94,14 @@
       </el-table-column>
       <el-table-column label="公摊表类型" align="center" prop="publicShareType" v-if="columns[21].visible" />
       <el-table-column label="表具层级" align="center" prop="monitorHierarchy" v-if="columns[22].visible" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
             v-hasPermi="['ems/base:baseMonitorInfo:edit']">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
             v-hasPermi="['ems/base:baseMonitorInfo:add']">新增</el-button>
+          <el-button size="mini" type="text" icon="el-icon-setting" @click="handleThreshold(scope.row)"
+            v-hasPermi="['ems/record:recordAlarmRule:list']">阈值</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
             v-hasPermi="['ems/base:baseMonitorInfo:remove']">删除</el-button>
         </template>
@@ -170,18 +172,123 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 阈值管理对话框 -->
+    <el-dialog :title="thresholdTitle" :visible.sync="thresholdOpen" width="1200px" append-to-body>
+      <div class="threshold-container">
+        <!-- 设备信息展示 -->
+        <el-card class="device-info-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <span>设备信息</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">设备编号：</span>
+                <span class="value">{{ currentDevice.monitorCode }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">设备名称：</span>
+                <span class="value">{{ currentDevice.monitorName }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">能源类型：</span>
+                <span class="value">{{ getMonitorTypeLabel(currentDevice.monitorType) }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <!-- 阈值规则管理 -->
+        <el-card class="threshold-rules-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <span>阈值规则管理</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="handleAddThreshold">
+              <i class="el-icon-plus"></i> 新增规则
+            </el-button>
+          </div>
+
+          <!-- 规则列表 -->
+          <el-table v-loading="thresholdLoading" :data="thresholdRuleList" size="small">
+            <el-table-column label="规则名称" align="center" prop="ruleName" />
+            <el-table-column label="触发规则" align="center" prop="triggerRule">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.trigger_rule" :value="scope.row.triggerRule" />
+              </template>
+            </el-table-column>
+            <el-table-column label="监测字段" align="center" prop="monitorField" v-if="showMonitorField">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.monitor_field" :value="scope.row.monitorField" />
+              </template>
+            </el-table-column>
+            <el-table-column label="触发阈值量" align="center" prop="triggerValue" />
+            <el-table-column label="备注" align="center" prop="cause" show-overflow-tooltip />
+            <el-table-column label="操作" align="center" width="120">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditThreshold(scope.row)">
+                  修改
+                </el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteThreshold(scope.row)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="thresholdOpen = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 阈值规则编辑对话框 -->
+    <el-dialog :title="thresholdFormTitle" :visible.sync="thresholdFormOpen" width="500px" append-to-body>
+      <el-form ref="thresholdForm" :model="thresholdForm" :rules="thresholdRules" label-width="120px">
+        <el-form-item label="规则名称" prop="ruleName">
+          <el-input v-model="thresholdForm.ruleName" placeholder="请输入规则名称" />
+        </el-form-item>
+        <el-form-item label="触发规则" prop="triggerRule">
+          <el-radio-group v-model="thresholdForm.triggerRule">
+            <el-radio v-for="dict in dict.type.trigger_rule" :key="dict.value"
+              :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="监测字段" prop="monitorField" v-if="showMonitorFieldInForm">
+          <el-select v-model="thresholdForm.monitorField" placeholder="请选择监测字段">
+            <el-option v-for="dict in dict.type.monitor_field" :key="dict.value"
+              :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="触发阈值量" prop="triggerValue">
+          <el-input-number v-model="thresholdForm.triggerValue" placeholder="请输入触发阈值量" :precision="2" />
+        </el-form-item>
+        <el-form-item label="备注" prop="cause">
+          <el-input v-model="thresholdForm.cause" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitThresholdForm">确 定</el-button>
+        <el-button @click="thresholdFormOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listBaseMonitorInfo, getBaseMonitorInfo, delBaseMonitorInfo, addBaseMonitorInfo, updateBaseMonitorInfo } from "@/api/ems/base/baseMonitorInfo";
+import { listRecordAlarmRule, getRecordAlarmRule, delRecordAlarmRule, addRecordAlarmRule, updateRecordAlarmRule } from '@/api/ems/record/recordAlarmRule';
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { getBaseEnergyTypeList } from '@/api/ems/base/baseEnergyType'
 
 export default {
   name: "BaseMonitorInfo",
-  dicts: ['is_ammeter', 'monitor_status', 'monitor_type'],
+  dicts: ['is_ammeter', 'monitor_status', 'monitor_type', 'trigger_rule', 'monitor_field'],
   components: {
     Treeselect
   },
@@ -273,9 +380,41 @@ export default {
         { key: 22, label: `表具层级`, visible: false },
       ],
       //能源类型选项
-      energyTypeList: []
+      energyTypeList: [],
+      // 阈值管理相关数据
+      thresholdOpen: false,
+      thresholdTitle: "",
+      thresholdLoading: false,
+      thresholdRuleList: [],
+      currentDevice: {},
+
+      // 阈值规则表单相关
+      thresholdFormOpen: false,
+      thresholdFormTitle: "",
+      thresholdForm: {},
+      thresholdRules: {
+        ruleName: [
+          { required: true, message: "规则名称不能为空", trigger: "blur" }
+        ],
+        triggerRule: [
+          { required: true, message: "触发规则不能为空", trigger: "change" }
+        ],
+        triggerValue: [
+          { required: true, message: "触发阈值量不能为空", trigger: "blur" }
+        ]
+      },
     };
   },
+  computed: {
+    // 是否显示监测字段列（仅温湿度设备和振动设备显示）
+    showMonitorField() {
+      return this.currentDevice.monitorType === 6 || this.currentDevice.monitorType === 10;
+    },
+    // 表单中是否显示监测字段
+    showMonitorFieldInForm() {
+      return this.currentDevice.monitorType === 6 || this.currentDevice.monitorType === 10;
+    }
+  },
   created() {
     getBaseEnergyTypeList({}).then(response => {
       this.energyTypeList = response.data
@@ -283,6 +422,16 @@ export default {
     this.getList()
   },
   methods: {
+
+        /** 获取能源类型标签 - 增加容错处理 */
+        getMonitorTypeLabel(monitorType) {
+      if (!monitorType || !this.dict.type.monitor_type) {
+        return '未设置';
+      }
+      const typeItem = this.dict.type.monitor_type.find(e => e.value == monitorType);
+      return typeItem ? typeItem.label : '未知类型';
+    },
+
     /** 查询计量设备信息列表 */
     getList() {
       this.loading = true;
@@ -417,7 +566,147 @@ export default {
         this.getList();
         this.$modal.msgSuccess("删除成功");
       }).catch(() => { });
-    }
+    },
+    /** 阈值管理按钮操作 */
+    handleThreshold(row) {
+      this.currentDevice = { ...row };
+      this.thresholdTitle = `设备阈值管理 - ${row.monitorName}`;
+      this.thresholdOpen = true;
+      this.getThresholdRuleList();
+    },
+
+    /** 获取设备的阈值规则列表 */
+    getThresholdRuleList() {
+      this.thresholdLoading = true;
+      const queryParams = {
+        monitorId: this.currentDevice.monitorCode,
+        pageNum: 1,
+        pageSize: 1000
+      };
+      listRecordAlarmRule(queryParams).then(response => {
+        this.thresholdRuleList = response.rows || [];
+        this.thresholdLoading = false;
+      }).catch(() => {
+        this.thresholdLoading = false;
+      });
+    },
+
+    /** 新增阈值规则 */
+    handleAddThreshold() {
+      this.resetThresholdForm();
+      this.thresholdForm.monitorId = this.currentDevice.monitorCode;
+      this.thresholdFormTitle = "新增阈值规则";
+      this.thresholdFormOpen = true;
+    },
+
+    /** 编辑阈值规则 */
+    handleEditThreshold(row) {
+      this.resetThresholdForm();
+      getRecordAlarmRule(row.objId).then(response => {
+        this.thresholdForm = { ...response.data };
+        this.thresholdFormTitle = "修改阈值规则";
+        this.thresholdFormOpen = true;
+      });
+    },
+
+    /** 删除阈值规则 */
+    handleDeleteThreshold(row) {
+      this.$modal.confirm(`是否确认删除规则"${row.ruleName}"？`).then(() => {
+        return delRecordAlarmRule(row.objId);
+      }).then(() => {
+        this.getThresholdRuleList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+
+    /** 提交阈值规则表单 */
+    submitThresholdForm() {
+      this.$refs["thresholdForm"].validate(valid => {
+        if (valid) {
+          // 确保设备编号正确设置
+          this.thresholdForm.monitorId = this.currentDevice.monitorCode;
+
+          if (this.thresholdForm.objId != null) {
+            updateRecordAlarmRule(this.thresholdForm).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.thresholdFormOpen = false;
+              this.getThresholdRuleList();
+            });
+          } else {
+            addRecordAlarmRule(this.thresholdForm).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.thresholdFormOpen = false;
+              this.getThresholdRuleList();
+            });
+          }
+        }
+      });
+    },
+
+    /** 重置阈值规则表单 */
+    resetThresholdForm() {
+      this.thresholdForm = {
+        objId: null,
+        ruleId: null,
+        ruleName: null,
+        monitorId: null,
+        collectTime: null,
+        energyType: null,
+        triggerRule: null,
+        monitorField: null,
+        timeRange: null,
+        triggerValue: null,
+        notifyUser: null,
+        cause: null
+      };
+      this.$nextTick(() => {
+        if (this.$refs.thresholdForm) {
+          this.$refs.thresholdForm.clearValidate();
+        }
+      });
+    },
   }
 };
 </script>
+
+<style scoped>
+.threshold-container {
+  padding: 0;
+}
+
+.device-info-card {
+  margin-bottom: 20px;
+}
+
+.device-info-card .el-card__body {
+  padding: 15px;
+}
+
+.threshold-rules-card .el-card__body {
+  padding: 15px;
+}
+
+.info-item {
+  margin-bottom: 10px;
+}
+
+.info-item .label {
+  font-weight: bold;
+  color: #606266;
+}
+
+.info-item .value {
+  color: #303133;
+  margin-left: 5px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+</style>