From 36f4db56f3a485ed3b367d1a25883bcd4b91f246 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Tue, 4 Nov 2025 15:54:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ems):=E4=BC=98=E5=8C=96=E8=AE=A1?=
 =?UTF-8?q?=E9=87=8F=E8=AE=BE=E5=A4=87=E7=9B=91=E6=8E=A7=E4=B8=8E=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一使用 el-date-picker 替换第三方日期选择器组件
- 修复日期时间范围选择器的初始化赋值问题
- 调整表单引用名称以符合最新规范
- 移除未使用的异常类型筛选表单项
- 恢复并优化报警规则的增删改功能按钮
-图表 改进蒸汽曲线的 Y 轴标签-格式化显示 增强图表数据加载逻辑，避免重复提交和渲染错误
-修正树形结构下拉选项的数据绑定问题
- 更新样式穿透写法以适配新版 Element Plus
- 引入缺失的 Treeselect 样式文件
- 优化无数据时的图表处理逻辑，提升用户体验
---
 .../base/baseMonitorInfoIOTDevice/index.vue   |  5 +-
 .../ems/record/recordAlarmData/index.vue      |  4 +-
 .../ems/record/recordAlarmRule/index.vue      | 71 +++++++-------
 .../ems/report/currentSteamCurve/index.vue    | 97 ++++++++++++-------
 .../ems/report/pointSteamCurve/index.vue      | 30 ++----
 .../ems/report/reportPointSteam/index.vue     | 28 +++---
 6 files changed, 120 insertions(+), 115 deletions(-)

diff --git a/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue b/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
index a6fc38b..de33535 100644
--- a/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
+++ b/src/views/ems/base/baseMonitorInfoIOTDevice/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-2">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="100px">
       <el-form-item label="计量设备编号" prop="monitorCode">
         <el-input v-model="queryParams.monitorCode" placeholder="请输入计量设备编号" clearable
           @keyup.enter="handleQuery" />
@@ -111,7 +111,7 @@
 
     <!-- 添加或修改计量设备信息对话框 -->
     <el-dialog :title="dialogTitle" v-model="dialogOpen" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="父级编号" prop="parentId">
           <treeselect v-model="form.parentId" :options="baseMonitorInfoOptions" :normalizer="normalizer"
             placeholder="请选择父级编号" />
@@ -183,6 +183,7 @@ import { ref, reactive, getCurrentInstance, ComponentInternalInstance, toRefs, o
 import type { FormInstance } from 'element-plus';
 import { listBaseMonitorInfo, getBaseMonitorInfo, delBaseMonitorInfo, addBaseMonitorInfo, updateBaseMonitorInfo } from "@/api/ems/base/baseMonitorInfo";
 import Treeselect from 'vue3-treeselect';
+import 'vue3-treeselect/dist/vue3-treeselect.css';
 import { getBaseEnergyTypeList } from '@/api/ems/base/baseEnergyType'
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
diff --git a/src/views/ems/record/recordAlarmData/index.vue b/src/views/ems/record/recordAlarmData/index.vue
index 4aa3867..c6140f1 100644
--- a/src/views/ems/record/recordAlarmData/index.vue
+++ b/src/views/ems/record/recordAlarmData/index.vue
@@ -26,7 +26,7 @@
       <!--        >-->
       <!--        </el-date-picker>-->
       <!--      </el-form-item>-->
-      <el-form-item label="异常类型" prop="alarmType">
+<!--      <el-form-item label="异常类型" prop="alarmType">
         <el-select v-model="queryParams.alarmType" placeholder="请选择异常类型" clearable>
           <el-option
             v-for="dict in  alarm_type"
@@ -35,7 +35,7 @@
             :value="dict.value"
           />
         </el-select>
-      </el-form-item>
+      </el-form-item>-->
       <el-form-item label="异常状态" prop="alarmStatus">
         <el-select v-model="queryParams.alarmStatus" placeholder="请选择异常状态" clearable>
           <el-option
diff --git a/src/views/ems/record/recordAlarmRule/index.vue b/src/views/ems/record/recordAlarmRule/index.vue
index 143a2b8..95e383c 100644
--- a/src/views/ems/record/recordAlarmRule/index.vue
+++ b/src/views/ems/record/recordAlarmRule/index.vue
@@ -34,41 +34,38 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="primary"-->
-<!--          plain-->
-<!--          icon="Plus"-->
-<!--         -->
-<!--          @click="handleAdd"-->
-<!--          v-hasPermi="['ems:record:recordAlarmRule:add']"-->
-<!--        >新增-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="success"-->
-<!--          plain-->
-<!--          icon="Edit"-->
-<!--         -->
-<!--          :disabled="single"-->
-<!--          @click="handleUpdate"-->
-<!--          v-hasPermi="['ems:record:recordAlarmRule:edit']"-->
-<!--        >修改-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="danger"-->
-<!--          plain-->
-<!--          icon="Delete"-->
-<!--         -->
-<!--          :disabled="multiple"-->
-<!--          @click="handleDelete"-->
-<!--          v-hasPermi="['ems:record:recordAlarmRule:remove']"-->
-<!--        >删除-->
-<!--        </el-button>-->
-<!--      </el-col>-->
+     <el-col :span="1.5">
+       <el-button
+         type="primary"
+         plain
+         icon="Plus"
+         @click="handleAdd"
+
+        >新增
+        </el-button>
+      </el-col>
+     <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+
+        >修改
+        </el-button>
+      </el-col>
+     <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+
+        >删除
+        </el-button>
+      </el-col>
 <!--      <el-col :span="1.5">
         <el-button
           type="warning"
@@ -139,7 +136,7 @@
     <el-dialog :title="dialogTitle" v-model="dialogOpen" width="500px" append-to-body>
       <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
         <el-form-item label="规则编号" prop="ruleId">
-          <el-input v-model="form.ruleId" placeholder="请输入规则编号" disabled/>
+          <el-input v-model="form.ruleId" placeholder="请输入规则编号" />
         </el-form-item>
         <el-form-item label="规则名称" prop="ruleName">
           <el-input v-model="form.ruleName" placeholder="请输入规则名称"/>
@@ -160,7 +157,7 @@
 <!--          <el-input v-model="form.energyType" placeholder="请输入能源类型"/>-->
 <!--        </el-form-item>-->
         <el-form-item label="触发规则" prop="triggerRule">
-          <el-radio-group v-model="form.triggerRule" disabled>
+          <el-radio-group v-model="form.triggerRule">
             <el-radio
               v-for="dict in trigger_rule"
               :key="dict.value"
diff --git a/src/views/ems/report/currentSteamCurve/index.vue b/src/views/ems/report/currentSteamCurve/index.vue
index 54e67bd..ce0357a 100644
--- a/src/views/ems/report/currentSteamCurve/index.vue
+++ b/src/views/ems/report/currentSteamCurve/index.vue
@@ -32,16 +32,16 @@
                  label-width="100px"
         >
           <el-form-item label="记录时间">
-            <date-picker
+            <el-date-picker
               v-model="daterangeRecordTime"
-              range
-              type="datetime"
+              type="datetimerange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
               format="YYYY-MM-DD HH:mm:ss"
-              value-type="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              :lang="lang"
-              style="width: 340px"
-            ></date-picker>
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 400px"
+            />
           </el-form-item>
 
           <el-form-item>
@@ -97,8 +97,6 @@ import Chart from '@/components/chart.vue'
 import * as echarts from 'echarts'
 import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
 import {listRecordSteamInstant,  steamInstantList} from "@/api/ems/record/recordSteamInstant";
-import DatePicker from 'vue-datepicker-next';
-import 'vue-datepicker-next/index.css';
 
 export default {
   name: 'currentSteamCurve',
@@ -110,13 +108,10 @@ export default {
   },
   components: {
     Chart,
-    Treeselect,
-    DatePicker
+    Treeselect
   },
   data() {
     return {
-      //下拉树List
-      baseMonitorInfoOptions: [],
       //左侧树结构List
       monitorInfoOptions: [],
       workUnitName: undefined,
@@ -194,12 +189,6 @@ export default {
         { key: 11, label: `记录时间`, visible: true },
         { key: 12, label: `计量设备名称`, visible: true }
       ],
-      lang: {
-        formatLocale: {
-          firstDayOfWeek: 1
-        },
-        monthBeforeYear: false
-      },
       // 停电统计信息
       powerOutageSummary: {
         count: 0,
@@ -222,14 +211,17 @@ export default {
     const yesterday = parseTime(lastDate, '{y}-{m}-{d}')
 
     console.log(today,yesterday)
-    this.daterangeRecordTime[0] =  yesterday+ ' 08:00:00'
-    this.daterangeRecordTime[1] = today + ' 08:00:00'
+    // 正确的数组赋值方式
+    this.daterangeRecordTime = [yesterday + ' 08:00:00', today + ' 08:00:00']
 
     // 初始化图表基础配置
     this.initBaseChartOptions()
-    this.getTreeselect()
+    // 先加载树结构，再加载图表数据
     this.getTreeMonitorInfo()
-    this.getList()
+    // 延迟加载图表数据，避免重复提交
+    setTimeout(() => {
+      this.getList()
+    }, 100)
   },
   watch: {
     // 根据名称筛选计量设备树
@@ -243,7 +235,7 @@ export default {
       this.baseChartOptions = {
         grid: {
           top: '40',
-          bottom: '10%',
+          bottom: '20%',
           left: '10%',
           right: '3%'
         },
@@ -415,13 +407,6 @@ export default {
       URL.revokeObjectURL(link.href);
     },
 
-    /** 查询计量设备信息下拉树结构 */
-    getTreeselect() {
-      getMonitorInfoTree({ monitorType: 4 }).then(response => {
-        this.monitorInfoOptions = response.data
-      })
-    },
-
     /** 筛选节点 */
     filterNode(value, data) {
       if (!value) return true
@@ -668,6 +653,29 @@ export default {
         color: '#000000'
       };
 
+      const formatYAxisLabel = (value) => {
+        const num = Number(value);
+        if (!Number.isFinite(num)) {
+          return value;
+        }
+        if (Math.abs(num) >= 10000) {
+          return (num / 1000).toFixed(1) + 'k';
+        }
+        if (Math.abs(num) >= 1) {
+          return num.toFixed(1);
+        }
+        return num.toFixed(3);
+      };
+
+      option.yAxis.axisLabel = {
+        ...(option.yAxis.axisLabel || {}),
+        formatter: formatYAxisLabel,
+        margin: 14
+      };
+
+      option.yAxis.splitNumber = option.yAxis.splitNumber || 5;
+      option.yAxis.axisLabel.showMaxLabel = true;
+
       // 针对特定字段，如果业务上它们不应为负，则强制Y轴从0开始
       if (name === '瞬时流量' || name === '压力' || name === '温度') {
         option.yAxis.min = 0;
@@ -759,10 +767,7 @@ export default {
         this.hasChartData = data && data.length > 0;
 
         if (!this.hasChartData) {
-          // 如果没有数据，清空图表并返回
-          this.$refs.Chart1.setData({});
-          this.$refs.Chart2.setData({});
-          this.$refs.Chart3.setData({});
+          // 如果没有数据，直接返回，让模板显示空状态
           return;
         }
 
@@ -798,10 +803,28 @@ export default {
           '#fac858'
         );
 
+        // 等待 DOM 更新后再访问图表组件
+        await this.$nextTick()
+
+        // 确保图表组件已渲染
+        if (!this.$refs.Chart1 || !this.$refs.Chart2 || !this.$refs.Chart3) {
+          console.error('图表组件未渲染')
+          return
+        }
+
         this.$refs.Chart1.setData(option1)
         this.$refs.Chart2.setData(option2)
         this.$refs.Chart3.setData(option3)
 
+        // 再次等待，确保图表内部 chart 属性已初始化
+        await this.$nextTick()
+
+        // 检查图表实例是否已创建
+        if (!this.$refs.Chart1.chart || !this.$refs.Chart2.chart || !this.$refs.Chart3.chart) {
+          console.error('图表实例未初始化')
+          return
+        }
+
         echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart3.chart)
 
         // 同步缩放
@@ -842,7 +865,7 @@ export default {
     /** 查询树形结构 */
     getTreeMonitorInfo() {
       getMonitorInfoTree({ monitorType: 4 }).then(response => {
-        this.baseMonitorInfoOptions = this.handleTree(response.data, "id", "parentId")
+        this.monitorInfoOptions = this.handleTree(response.data, "id", "parentId")
       })
     }
   }
diff --git a/src/views/ems/report/pointSteamCurve/index.vue b/src/views/ems/report/pointSteamCurve/index.vue
index 359ca80..359a77a 100644
--- a/src/views/ems/report/pointSteamCurve/index.vue
+++ b/src/views/ems/report/pointSteamCurve/index.vue
@@ -39,16 +39,16 @@
             />
           </el-form-item>-->
           <el-form-item label="记录时间">
-            <date-picker
+            <el-date-picker
               v-model="daterangeRecordTime"
-              range
-              type="datetime"
+              type="datetimerange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
               format="YYYY-MM-DD HH:mm:ss"
-              value-type="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              :lang="lang"
-              style="width: 340px"
-            ></date-picker>
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 400px"
+            />
           </el-form-item>
 
 <!--          <el-form-item label="采集日期范围">
@@ -102,8 +102,6 @@ import { parseTime } from '@/utils/ruoyi'
 import Chart from '@/components/chart.vue'
 import * as echarts from 'echarts'
 import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
-import DatePicker from 'vue-datepicker-next';
-import 'vue-datepicker-next/index.css';
 
 export default {
   name: 'currentSteamCurve',
@@ -116,7 +114,6 @@ export default {
   components: {
     Chart,
     Treeselect,
-    DatePicker
   },
   data() {
     return {
@@ -191,12 +188,6 @@ export default {
         { key: 11, label: `更新时间`, visible: false },
         { key: 12, label: `计量设备名称`, visible: true }
       ],
-      lang: {
-        formatLocale: {
-          firstDayOfWeek: 1
-        },
-        monthBeforeYear: false
-      },
       hasChartData: false,
     }
   },
@@ -209,8 +200,7 @@ export default {
     const yesterday = parseTime(lastDate, '{y}-{m}-{d}')
 
     console.log(today,yesterday)
-    this.daterangeRecordTime[0] =  yesterday+ ' 08:00:00'
-    this.daterangeRecordTime[1] = today + ' 08:00:00'
+    this.daterangeRecordTime = [yesterday + ' 08:00:00', today + ' 08:00:00']
 
 /*    this.daterangeCollectTime[0] = parseTime(yesterday, '{y}-{m}-{d}') ;
     this.daterangeCollectTime[1] = parseTime(today, '{y}-{m}-{d}') ;*/
@@ -251,7 +241,7 @@ export default {
         this.queryParams.params['beginRecordTime'] = this.daterangeCollectTime[0] + ' ' + this.timerangeRecordTime[0];
         this.queryParams.params['endRecordTime'] = this.daterangeCollectTime[1] + ' ' + this.timerangeRecordTime[1];
       }*/
-      if (null != this.daterangeRecordTime && '' != this.daterangeRecordTime) {
+      if (Array.isArray(this.daterangeRecordTime) && this.daterangeRecordTime.length === 2) {
         this.queryParams.params['beginRecordTime'] = this.daterangeRecordTime[0] ;
         this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1] ;
       }
diff --git a/src/views/ems/report/reportPointSteam/index.vue b/src/views/ems/report/reportPointSteam/index.vue
index 35b2c80..0e673b4 100644
--- a/src/views/ems/report/reportPointSteam/index.vue
+++ b/src/views/ems/report/reportPointSteam/index.vue
@@ -39,16 +39,16 @@
           <!--        />-->
           <!--      </el-form-item>-->
           <el-form-item label="开始时间">
-            <date-picker
+            <el-date-picker
               v-model="daterangeBeginTime"
-              range
-              type="datetime"
+              type="datetimerange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
               format="YYYY-MM-DD HH:mm:ss"
-              value-type="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              :lang="lang"
-              style="width: 340px"
-            ></date-picker>
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 400px"
+            />
           </el-form-item>
 <!--          <el-form-item label="采集日期范围">
             <el-date-picker
@@ -350,12 +350,6 @@ const columns = ref([
   { key: 12, label: `计量设备名称`, visible: true }
 ]);
 
-const lang = {
-  formatLocale: {
-    firstDayOfWeek: 1
-  },
-  monthBeforeYear: false
-};
 
 // 监听筛选框
 watch(filterBoxName, (val) => {
@@ -503,8 +497,8 @@ onMounted(() => {
   lastDate.setDate(nowDate.getDate() - 1);
   const yesterday = parseTime(lastDate, '{y}-{m}-{d}');
 
-  daterangeBeginTime.value[0] = yesterday + ' 08:00:00';
-  daterangeBeginTime.value[1] = today + ' 08:00:00';
+  // 正确的数组赋值方式
+  daterangeBeginTime.value = [yesterday + ' 08:00:00', today + ' 08:00:00'];
 
   getTreeselect();
   getList();
@@ -513,7 +507,7 @@ onMounted(() => {
 
 <style scoped>
 /* 选中节点的样式 */
-/deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
+:deep(.el-tree .el-tree-node.is-current > .el-tree-node__content) {
   background-color: #67C23A !important; /* 选中节点的背景色 */
   color: #303133 !important; /* 选中节点的文字颜色 */
   padding: 0; /* 清除内边距 */