修改

src/views/core/base/product/add-or-updata.vue

@@ -71,10 +71,11 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="	产品工艺" prop="processType">
+              <el-form-item label="	产品工艺" prop="processTypes">
-                <el-select multiple v-model="dataForm.processType" clearable style="width: 100%" :disabled="isdetail"
+                <el-select :disabled="isdetail" collapse-tags multiple v-model="dataForm.processTypes" clearable
-                  placeholder="请选择产品工艺">
+                  style="width: 100%" placeholder="请选择产品工艺">
-                  <el-option v-for="dict in processTypeList" :key="dict.id" :label="dict.label" :value="dict.id" />
+                  <el-option v-for="dict in processTypeList" :key="dict.value" :label="dict.label"
+                    :value="dict.value" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -190,7 +191,7 @@ export default {
 				unitDictValue: '', // 单位id
 				originalSpecifications: '', // 原片规格
         originalArea: 0, // 原片单位平方数
-        processType:undefined,
+        processTypes: [],
 			},
 			listQuery: {
 				pageSize: 10,
@@ -199,18 +200,18 @@ export default {
       },
       processTypeList: [
         {
-          id: '0',
+          value: '1',
           label:'压花丝印'
         },
         {
-          id: '1',
+          value: '2',
           label: '无印打孔'
         },
         {
-          id: '2',
+          value: '3',
           label: '单层镀膜'
         }, {
-          id: '3',
+          value: '4',
           label: '双层镀膜'
         }
       ],
@@ -275,7 +276,8 @@ export default {
 		init(id, isdetail) {
 			this.initData();
 			this.isdetail = isdetail || false;
-			this.dataForm.id = id || null;
+      this.dataForm.id = id || null;
+      // this.dataForm.processTypes = [] // 清空工艺选择
 			this.visible = true;
 
 			this.$nextTick(() => {
@@ -283,9 +285,26 @@ export default {
 
 				if (this.dataForm.id) {
 					// 获取产品详情
-					getProduct(id).then((response) => {
+          getProduct(id).then((res) => {
-						this.dataForm = response.data;
+            const resData = res.data || {};
-					});
+            // 逐个字段赋值（保留响应式）
+            this.dataForm.name = resData.name || '';
+            this.dataForm.code = resData.code || '';
+            this.dataForm.area = resData.area || 0;
+            this.dataForm.typeDictValue = resData.typeDictValue || null;
+            this.dataForm.processTime = resData.processTime || null;
+            this.dataForm.specifications = resData.specifications || '';
+            this.dataForm.unitDictValue = resData.unitDictValue || '';
+            this.dataForm.originalSpecifications = resData.originalSpecifications || '';
+            this.dataForm.originalArea = resData.originalArea || 0;
+
+            // 处理工艺列表：确保是数组，过滤空值
+            this.dataForm.processTypes = resData.processType
+              ? resData.processType.split(',').filter(Boolean)
+              : [];
+
+            console.log('工艺列表（编辑时）：', this.dataForm.processTypes); // 验证是否为 ["1","2"] 格式
+          });
 					// 获取产品的属性列表
 					this.getList();
 				} else {
@@ -341,7 +360,7 @@ export default {
 		// 表单提交
 		dataFormSubmit() {
 			this.$refs['dataForm'].validate((valid) => {
-				if (valid) {
+        if (valid) {
 					// 修改的提交
 					if (this.dataForm.id) {
 						updateProduct(this.dataForm).then((response) => {

src/views/equipment/equipmentOverview/add-or-updata.vue

@@ -63,9 +63,9 @@ export default {
     init(data) {
       console.log(data.paramMonitors,'data');
 
-      this.dataForm.equipmentId = data.equipmentId || undefined;
+      this.dataForm.equipmentId = data.equipmentId || '';
-      this.dataForm.equipmentName = data.equipmentName || undefined;
+      this.dataForm.equipmentName = data.equipmentName || '';
-      this.dataForm.lineId = data.lineId || undefined;
+      this.dataForm.lineId = data.lineId || '';
 
 
 			this.visible = true;

src/views/equipment/equipmentOverview/alarm-or-updata.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible.sync="visible" width="40%" @close="destroyAllCharts" title-class="dialog-title">
+  <el-dialog :visible.sync="visible" width="80%" @close="handleClose" title-class="dialog-title">
     <small-title slot="title" :no-padding="true">
       {{ dataForm.lineId + '·' + dataForm.equipmentName }}
     </small-title>
@@ -10,13 +10,11 @@
     </el-tabs>
     <div class="content">
       <div class="visual-part">
-        <!-- 报警时长-柱状图 -->
+        <div v-if="hasData" style="display: flex; justify-content: space-around; gap: 20px; padding: 10px 0;">
-        <div v-if="hasData">
+          <!-- 移除 v-if，始终渲染两个图表容器 -->
-          <div v-show="activeLabel === 'duration'" id="barChart" style="width: 100%; height: 400px;"></div>
+          <div id="barChart" style="width: 48%; height: 400px;"></div>
-          <!-- 报警次数-饼图 -->
+          <div id="pieChart" style="width: 48%; height: 400px;"></div>
-          <div v-show="activeLabel === 'times'" id="pieChart" style="width: 100%; height: 400px;"></div>
         </div>
-        <!-- 无数据提示 -->
         <div v-if="!hasData" class="no-data">
           <el-empty description="暂无相关报警数据"></el-empty>
         </div>
@@ -29,22 +27,15 @@
 import { getAlarmDet } from '@/api/base/equipment';
 import * as echarts from 'echarts';
 import SmallTitle from './SmallTitle';
-// import { ElEmpty } from 'element-plus';
 
-// 图表颜色配置（统一风格）
 const CHART_CONFIG = {
-  // 柱状图颜色
   barColor: '#288AFF',
-  // 饼图颜色（渐变色系，避免刺眼）
   pieColors: [
     '#288AFF', '#4096FF', '#69B1FF', '#91CFFF', '#B8E0FF',
     '#E0F2FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C'
   ],
-  // 字体颜色
   fontColor: '#333',
-  // 浅色字体
   lightFontColor: '#666',
-  // 边框圆角
   borderRadius: 4
 };
 
@@ -53,7 +44,7 @@ export default {
   data() {
     return {
       visible: false,
-      hasData: true, // 是否有数据标识
+      hasData: false,
       listQuery: {
         pageNo: 1,
         pageSize: 100,
@@ -82,40 +73,58 @@ export default {
           color: 'primary'
         }
       ],
-      activeLabel: 'duration', // 默认激活时长tab
+      activeLabel: 'duration', // 默认选中「报警时长」
       dataForm: {
         equipmentId: undefined,
         equipmentName: undefined,
         lineId: undefined
       },
-      // 存储图表实例，用于销毁
       chartInstances: {
         bar: null,
         pie: null
-      }
+      },
+      isDomReady: false,
+      originData: null // 存储原始数据
     };
   },
   mounted() {
-    // 初始化默认日期（当天）
+    this.$nextTick(() => {
-    this.initDefaultDate();
+      this.isDomReady = true;
+      if (this.listQuery.equipmentId) {
+        this.getDataList();
+      }
+    });
+  },
+  watch: {
+    // Tab 切换时自动刷新图表（无需额外操作，依赖 handleTabClick 触发查询）
+    activeLabel() {
+      if (this.isDomReady && this.originData) {
+        this.$nextTick(() => {
+          this.renderBothCharts(); // 切换 Tab 后重新渲染两个图表
+        });
+      }
+    }
   },
   methods: {
-    // 初始化默认日期（当天零点到23:59:59）
     initDefaultDate() {
       const today = new Date();
-      const start = new Date(today.setHours(0, 0, 0, 0)).getTime();
+      const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0).getTime();
-      const end = new Date(today.setHours(23, 59, 59, 999)).getTime();
+      const end = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 0).getTime();
+
       this.formConfig[0].defaultSelect = [start, end];
       this.listQuery.startTime = start;
       this.listQuery.endTime = end;
+
+      if (this.$refs.searchBarForm) {
+        this.$refs.searchBarForm.form.timeVal = [start, end];
+      }
     },
 
-    // 切换Tab时加载对应图表
     handleTabClick() {
+      // 切换 Tab 时重新查询数据（或直接复用已有数据渲染）
       this.getDataList();
     },
 
-    // 搜索按钮点击事件
     buttonClick(val) {
       switch (val.btnName) {
         case 'search':
@@ -123,43 +132,34 @@ export default {
           this.listQuery.endTime = val.timeVal?.[1];
           this.getDataList();
           break;
-        case 'link':
-          this.disabled = true;
-          this.connectSSEBatch(this.listQuery.equipmentIds);
-          break;
         default:
       }
     },
 
-    // 获取数据并渲染对应图表
     async getDataList() {
       try {
-        // 校验必要参数
         if (!this.listQuery.equipmentId) {
           console.warn('设备ID不能为空');
           this.hasData = false;
           return;
         }
 
-        // 构造请求参数（移除硬编码，使用动态参数）
         const queryParams = {
           equipmentId: this.listQuery.equipmentId,
           startTime: this.listQuery.startTime,
           endTime: this.listQuery.endTime,
         };
 
-        const res = await getAlarmDet(queryParams)
+        const res = await getAlarmDet(queryParams);
         const originData = res.data || [];
-
+        this.originData = originData;
         this.hasData = originData.length > 0;
 
-        if (this.hasData) {
+        if (this.hasData && this.isDomReady) {
-          // 根据当前Tab渲染对应图表
+          this.$nextTick(() => {
-          this.activeLabel === 'duration'
+            this.renderBothCharts(); // 数据查询成功后，同时渲染两个图表
-            ? this.renderBarChart(originData)
+          });
-            : this.renderPieChart(originData);
         } else {
-          // 无数据时销毁已有图表
           this.destroyAllCharts();
         }
       } catch (error) {
@@ -169,213 +169,251 @@ export default {
       }
     },
 
-    // 渲染报警时长-柱状图
+    // 核心方法：同时渲染柱状图和饼图（根据当前 Tab 类型）
-    renderBarChart(originData) {
+    renderBothCharts() {
-      // 先销毁原有图表
+      if (this.activeLabel === 'duration') {
-      this.destroyChart('chart');
+        // 报警时长：柱状图（时长排序）+ 饼图（时长占比）
-
+        this.renderBarChart('duration');
-      // 按报警时长降序排序
+        this.renderPieChart('duration');
-      const sortedData = [...originData].sort((a, b) => b.alarmDuration - a.alarmDuration);
+      } else {
-
+        // 报警次数：柱状图（次数排序）+ 饼图（次数占比）
-      // 处理图表数据
+        this.renderBarChart('times');
-      const xData = sortedData.map(item => this.truncateText(item.alarmContent, 8)); // 文本截断（最多8字）
+        this.renderPieChart('times');
-      const seriesData = sortedData.map(item => item.alarmDuration);
+      }
-
-      const chartDom = document.getElementById('barChart');
-      this.chartInstances.bar = echarts.init(chartDom);
-
-      const option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          padding: 10,
-          textStyle: { fontSize: 11 },
-          // 自定义提示框内容
-          formatter: (params) => {
-            const index = params[0].dataIndex;
-            const item = sortedData[index];
-            return `
-              <div style="text-align: left;">
-                <div>${item.alarmContent}</div>
-                <div>报警时长：${item.alarmDuration}</div>
-                <div>占比：${item.alarmDurationRatio.toFixed(2)}%</div>
-              </div>
-            `;
-          }
-        },
-        grid: {
-          left: '5%',
-          right: '5%',
-          bottom: '18%', // 底部留足空间显示x轴标签
-          top: '10%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: xData,
-            axisTick: { alignWithLabel: true },
-            axisLabel: {
-              interval: 0,
-              // rotate: 35, // 标签旋转
-              fontSize: 12,
-              color: CHART_CONFIG.lightFontColor
-            },
-            axisLine: { lineStyle: { color: '#e8e8e8' } }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLabel: {
-              fontSize: 11,
-              color: CHART_CONFIG.lightFontColor,
-              // formatter: '{value}s' // 显示单位
-            },
-            axisLine: { lineStyle: { color: '#e8e8e8' } },
-            splitLine: { lineStyle: { color: '#f5f5f5' } },
-            // 扩展y轴最大值，避免label超出
-            max: (value) => value.max * 1.2
-          }
-        ],
-        series: [
-          {
-            name: '报警时长',
-            type: 'bar',
-            itemStyle: {
-              color: CHART_CONFIG.barColor,
-              borderRadius: [CHART_CONFIG.borderRadius, CHART_CONFIG.borderRadius, 0, 0],
-              shadowBlur: 3,
-              shadowColor: 'rgba(40, 138, 255, 0.2)',
-              shadowOffsetY: 2
-            },
-            barWidth: '16', // 柱子宽度（百分比适配）
-            data: seriesData,
-            label: {
-              show: true,
-              position: 'top',
-              distance: 6,
-              fontSize: 11,
-              color: CHART_CONFIG.fontColor,
-              formatter: (params) => `${params.value}` // 显示单位
-            }
-          }
-        ]
-      };
-
-      this.chartInstances.bar.setOption(option);
-      // 监听窗口 resize
-      this.addResizeListener('bar');
     },
 
-    // 渲染报警次数-饼图
+    // 渲染柱状图（支持两种数据类型）
-    renderPieChart(originData) {
+    renderBarChart(type) {
-      // 先销毁原有图表
+      this.destroyChart('bar');
-      this.destroyChart('pie');
+      const chartDom = document.getElementById('barChart');
+      if (!chartDom || !this.originData.length) return;
 
-      // 按报警次数降序排序
+      // 根据类型排序和提取数据
-      const sortedData = [...originData].sort((a, b) => b.alarmCount - a.alarmCount);
+      let sortedData, xData, seriesData, yAxisName;
+      if (type === 'duration') {
+        // 报警时长：按时长降序
+        sortedData = [...this.originData].sort((a, b) => b.alarmDuration - a.alarmDuration);
+        seriesData = sortedData.map(item => item.alarmDuration);
+        yAxisName = '报警时长';
+      } else {
+        // 报警次数：按次数降序
+        sortedData = [...this.originData].sort((a, b) => b.alarmCount - a.alarmCount);
+        seriesData = sortedData.map(item => item.alarmCount);
+        yAxisName = '报警次数';
+      }
 
-      // 处理图表数据（合并占比过小的项为"其他"）
+      xData = sortedData.map(item => this.truncateText(item.alarmContent, 8));
-      const pieData = this.handlePieData(sortedData);
 
-      const chartDom = document.getElementById('pieChart');
+      try {
-      this.chartInstances.pie = echarts.init(chartDom);
+        this.chartInstances.bar = echarts.init(chartDom);
-
+        const option = {
-      const option = {
+          title: {
-        tooltip: {
+            text: `${yAxisName}统计（柱状图）`,
-          trigger: 'item',
+            left: 'center',
-          padding: 10,
+            textStyle: { fontSize: 14, color: CHART_CONFIG.fontColor }
-          textStyle: { fontSize: 11 },
+          },
-          formatter: (params) => {
+          tooltip: {
-            return `
+            trigger: 'axis',
-          <div style="text-align: left;">
+            axisPointer: { type: 'shadow' },
-            <div>${params.name}</div>
+            padding: 10,
-            <div>报警次数：${params.value} 次</div>
+            textStyle: { fontSize: 11 },
-            <div>占比：${params.percent.toFixed(2)}%</div>
+            formatter: (params) => {
-          </div>
+              const index = params[0].dataIndex;
-        `;
+              const item = sortedData[index];
-          }
+              return `
-        },
+                <div style="text-align: left;">
-        series: [
+                  <div>${item.alarmContent}</div>
-          {
+                  <div>${yAxisName}：${type === 'duration' ? item.alarmDuration : item.alarmCount}</div>
-            name: '报警次数',
+                  <div>占比：${type === 'duration' ? item.alarmDurationRatio.toFixed(2) : item.alarmCountRatio.toFixed(2)}%</div>
-            type: 'pie',
+                </div>
-            radius: ['50%', '70%'], // 环形饼图
+              `;
-            center: ['50%', '50%'], // 饼图居中显示
+            }
-            color: CHART_CONFIG.pieColors,
+          },
-            // 关键：添加外部标签和指示线
+          grid: {
-            label: {
+            left: '5%',
-              show: true, // 显示标签
+            right: '5%',
-              position: 'outside', // 标签位置：饼图外部
+            bottom: '18%',
-              distance: 15, // 标签与饼图的距离
+            top: '15%',
-              fontSize: 11,
+            containLabel: true
-              color: CHART_CONFIG.lightFontColor,
+          },
-              formatter: (params) => {
+          xAxis: [
-                // 标签内容：报警内容（截断）+ 次数 + 占比
+            {
-                const truncatedName = this.truncateText(params.name, 8); // 最多8字
+              type: 'category',
-                return `${truncatedName}(${params.value}次, ${params.percent.toFixed(1)}%)`;
+              data: xData,
+              axisTick: { alignWithLabel: true },
+              axisLabel: {
+                interval: 0,
+                fontSize: 12,
+                color: CHART_CONFIG.lightFontColor
               },
-              align: 'center',
+              axisLine: { lineStyle: { color: '#e8e8e8' } }
-              baseline: 'middle'
+            }
-            },
+          ],
-            // 指示线配置
+          yAxis: [
-            labelLine: {
+            {
-              show: true, // 显示指示线
+              type: 'value',
-              length: 15, // 第一段线长度（从饼图到转折点）
+              name: yAxisName,
-              length2: 20, // 第二段线长度（从转折点到标签）
+              nameTextStyle: { fontSize: 11, color: CHART_CONFIG.lightFontColor },
-              lineStyle: {
+              axisLabel: {
-                color: '#ccc', // 指示线颜色
+                fontSize: 11,
-                width: 1, // 线宽
+                color: CHART_CONFIG.lightFontColor,
-                type: 'solid' // 实线
               },
-              smooth: 0.2 // 指示线轻微弯曲，更美观
+              axisLine: { lineStyle: { color: '#e8e8e8' } },
-            },
+              splitLine: { lineStyle: { color: '#f5f5f5' } },
-            data: pieData,
+              max: (value) => value.max * 1.2
-            // 高亮样式（hover时）
+            }
-            emphasis: {
+          ],
+          series: [
+            {
+              name: yAxisName,
+              type: 'bar',
               itemStyle: {
-                shadowBlur: 10,
+                color: CHART_CONFIG.barColor,
-                shadowColor: 'rgba(0, 0, 0, 0.1)'
+                borderRadius: [CHART_CONFIG.borderRadius, CHART_CONFIG.borderRadius, 0, 0],
+                shadowBlur: 3,
+                shadowColor: 'rgba(40, 138, 255, 0.2)',
+                shadowOffsetY: 2
               },
+              barWidth: '16',
+              data: seriesData,
               label: {
-                color: CHART_CONFIG.fontColor, // 高亮时标签颜色加深
+                show: true,
-                fontSize: 12, // 标签放大
+                position: 'top',
-                fontWeight: 500
+                distance: 6,
+                fontSize: 11,
+                color: CHART_CONFIG.fontColor,
+                formatter: (params) => `${params.value}`
+              }
+            }
+          ]
+        };
+
+        this.chartInstances.bar.setOption(option);
+        this.addResizeListener('bar');
+      } catch (error) {
+        console.error(`${yAxisName}柱状图初始化失败：`, error);
+        setTimeout(() => this.renderBarChart(type), 200);
+      }
+    },
+
+    // 渲染饼图（支持两种数据类型）
+    renderPieChart(type) {
+      this.destroyChart('pie');
+      const chartDom = document.getElementById('pieChart');
+      if (!chartDom || !this.originData.length) return;
+
+      // 根据类型处理饼图数据
+      let pieData, seriesName;
+      if (type === 'duration') {
+        // 报警时长：按时长占比处理
+        seriesName = '报警时长';
+        pieData = this.handlePieData(this.originData, 'alarmDuration', 'alarmDurationRatio');
+      } else {
+        // 报警次数：按次数占比处理
+        seriesName = '报警次数';
+        pieData = this.handlePieData(this.originData, 'alarmCount', 'alarmCountRatio');
+      }
+
+      try {
+        this.chartInstances.pie = echarts.init(chartDom);
+        const option = {
+          title: {
+            text: `${seriesName}统计（饼图）`,
+            left: 'center',
+            textStyle: { fontSize: 14, color: CHART_CONFIG.fontColor }
+          },
+          tooltip: {
+            trigger: 'item',
+            padding: 10,
+            textStyle: { fontSize: 11 },
+            formatter: (params) => {
+              return `
+                <div style="text-align: left;">
+                  <div>${params.name}</div>
+                  <div>${seriesName}：${params.value}${type === 'duration' ? '' : '次'}</div>
+                  <div>占比：${params.percent.toFixed(2)}%</div>
+                </div>
+              `;
+            }
+          },
+          series: [
+            {
+              name: seriesName,
+              type: 'pie',
+              radius: ['50%', '70%'],
+              center: ['50%', '55%'],
+              color: CHART_CONFIG.pieColors,
+              label: {
+                show: true,
+                position: 'outside',
+                distance: 15,
+                fontSize: 11,
+                color: CHART_CONFIG.lightFontColor,
+                formatter: (params) => {
+                  const truncatedName = this.truncateText(params.name, 8);
+                  return `${truncatedName}(${params.value}${type === 'duration' ? '' : '次'}, ${params.percent.toFixed(1)}%)`;
+                },
+                align: 'center',
+                baseline: 'middle'
               },
               labelLine: {
+                show: true,
+                length: 15,
+                length2: 20,
                 lineStyle: {
-                  color: CHART_CONFIG.barColor, // 高亮时指示线颜色变为主色
+                  color: '#ccc',
-                  width: 1.5
+                  width: 1,
+                  type: 'solid'
+                },
+                smooth: 0.2
+              },
+              data: pieData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                label: {
+                  color: CHART_CONFIG.fontColor,
+                  fontSize: 12,
+                  fontWeight: 500
+                },
+                labelLine: {
+                  lineStyle: {
+                    color: CHART_CONFIG.barColor,
+                    width: 1.5
+                  }
                 }
               }
             }
-          }
+          ]
-        ]
+        };
-      };
 
-      this.chartInstances.pie.setOption(option);
+        this.chartInstances.pie.setOption(option);
-      // 监听窗口 resize
+        this.addResizeListener('pie');
-      this.addResizeListener('pie');
+      } catch (error) {
+        console.error(`${seriesName}饼图初始化失败：`, error);
+        setTimeout(() => this.renderPieChart(type), 200);
+      }
     },
-    // 处理饼图数据（合并占比<5%的项）
+
-    handlePieData(data) {
+    // 通用饼图数据处理（支持动态字段）
-      const threshold = 5; // 阈值：5%
+    handlePieData(data, valueKey, ratioKey) {
+      const threshold = 5; // 占比低于5%合并为「其他」
       let otherCount = 0;
       const mainData = data.filter(item => {
-        if (item.alarmCountRatio >= threshold) {
+        if (item[ratioKey] >= threshold) {
           return true;
         } else {
-          otherCount += item.alarmCount;
+          otherCount += item[valueKey];
           return false;
         }
       }).map(item => ({
         name: item.alarmContent,
-        value: item.alarmCount,
+        value: item[valueKey],
-        ratio: item.alarmCountRatio
+        ratio: item[ratioKey]
       }));
 
-      // 如果有"其他"项，添加到数据中
       if (otherCount > 0) {
         mainData.push({
           name: '其他',
@@ -387,57 +425,70 @@ export default {
       return mainData;
     },
 
-    // 文本截断（超出长度显示省略号）
     truncateText(text, maxLength) {
       if (!text) return '';
       return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
     },
 
-    // 添加窗口resize监听
     addResizeListener(type) {
       const chart = this.chartInstances[type];
       if (chart) {
         const resizeHandler = () => chart.resize();
         window.addEventListener('resize', resizeHandler);
-        // 存储resize处理器，用于后续移除
         chart.resizeHandler = resizeHandler;
       }
     },
 
-    // 销毁单个图表
     destroyChart(type) {
       const chart = this.chartInstances[type];
       if (chart) {
-        // 移除resize监听
         window.removeEventListener('resize', chart.resizeHandler);
         chart.dispose();
         this.chartInstances[type] = null;
       }
     },
 
-    // 销毁所有图表
     destroyAllCharts() {
       Object.keys(this.chartInstances).forEach(type => {
         this.destroyChart(type);
       });
     },
 
-    // 初始化弹窗数据
+    handleClose() {
+      this.destroyAllCharts();
+      this.formConfig[0].defaultSelect = [];
+      this.listQuery.startTime = undefined;
+      this.listQuery.endTime = undefined;
+      this.originData = null;
+      this.hasData = true;
+      if (this.$refs.searchBarForm) {
+        this.$refs.searchBarForm.form.timeVal = [];
+      }
+    },
+
     init(data) {
       this.dataForm = {
-        equipmentId: data.equipmentId || undefined,
+        equipmentId: data.equipmentId || '',
-        equipmentName: data.equipmentName || '未知设备',
+        equipmentName: data.equipmentName || '',
-        lineId: data.lineId || '未知产线'
+        lineId: data.lineId || ''
       };
+      this.activeLabel = 'duration'
       this.listQuery.equipmentId = data.equipmentId || undefined;
       this.visible = true;
+      this.originData = null;
+      this.hasData = false;
+
+      this.initDefaultDate();
+
       this.$nextTick(() => {
-        this.getDataList();
+        this.$nextTick(() => {
+          this.isDomReady = true;
+          this.getDataList();
+        });
       });
     }
   },
 
-  // 组件销毁时清理资源
   beforeDestroy() {
     this.destroyAllCharts();
   }
@@ -445,6 +496,7 @@ export default {
 </script>
 
 <style scoped>
+/* 保持原有样式，优化图表容器布局 */
 .drawer>>>.el-drawer {
   border-radius: 8px 0 0 8px;
   display: flex;
@@ -473,16 +525,27 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  /* height: 100%; */
 }
 
 .drawer>>>.visual-part {
   flex: 1 auto;
   max-height: 76vh;
   overflow: hidden;
-  overflow-y: scroll;
+  padding: 10px 0;
-  padding-right: 10px;
+}
-  /* 调整滚动条样式 */
+
+/* 优化图表容器响应式布局 */
+@media (max-width: 1200px) {
+  .visual-part>div {
+    flex-direction: column;
+  }
+
+  #barChart,
+  #pieChart {
+    width: 100% !important;
+    height: 350px !important;
+    margin-bottom: 20px;
+  }
 }
 
 .drawer>>>.el-form,

src/views/equipment/equipmentOverview/index.vue

@@ -15,7 +15,7 @@
         <div class="equipment-info">
           <div class="info">
             <div class="num equipment">
-              {{ countEq ? countEq : 0 }}
+              {{ globalCount.total ? globalCount.total : 0 }}
             </div>
             <div class="title">
               设备数量
@@ -28,7 +28,7 @@
         <div class="equipment-info">
           <div class="info">
             <div class="num run">
-              {{ countRun ? countRun : 0 }}
+              {{ globalCount.run ? globalCount.run : 0 }}
             </div>
             <div class="title">
               运行数量
@@ -41,7 +41,7 @@
         <div class="equipment-info">
           <div class="info">
             <div class="num stop">
-              {{ countStop ? countStop : 0 }}
+              {{ globalCount.stop ? globalCount.stop : 0 }}
             </div>
             <div class="title">
               停机数量
@@ -75,7 +75,7 @@
         </div>
         <div class="eqRun">
           <!-- 循环渲染设备列表：key绑定唯一equipmentId -->
-          <div v-for="item in list" :key="item.equipmentId" class="eqItem" :class="{
+          <div v-for="item in filteredList" :key="item.equipmentId" class="eqItem" :class="{
             'eq-item-disabled-false': !disabled,
             'eq-item-disabled-true': disabled
           }">
@@ -166,13 +166,25 @@
             </div>
 
             <div class="progress-text">
-              <!-- 运行百分比：显示item.run的值 -->
+              <!-- 运行百分比：显示item.run的值（增加值存在性判断） -->
               <div class="run" :style="!disabled ? { color: 'rgba(180, 180, 180, 1)' } : {}">
-                运行 {{ !disabled ? '—' : `${item.run.toFixed(1)}%` }}
+                运行 {{
+                  !disabled
+                    ? '—'
+                    : (item.run !== undefined && item.run !== null && !isNaN(item.run))
+                      ? `${item.run.toFixed(1) }%`
+                : '—'
+                }}
               </div>
-              <!-- 停机百分比：显示item.stop的值 -->
+              <!-- 停机百分比：显示item.stop的值（增加值存在性判断） -->
               <div class="stop" :style="!disabled ? { color: 'rgba(180, 180, 180, 1)' } : {}">
-                停机 {{ !disabled ? '—' : `${item.stop.toFixed(1)}%` }}
+                停机 {{
+                  !disabled
+                    ? '—'
+                    : (item.stop !== undefined && item.stop !== null && !isNaN(item.stop))
+                      ? `${item.stop.toFixed(1) }%`
+                : '—'
+                }}
               </div>
             </div>
 
@@ -247,7 +259,7 @@ export default {
           type: 'select',
           label: '设备类型',
           selectOptions: [],
-          param: 'equipmentType',
+          param: 'equipmentTypeId',
           // labelField: 'label',
           // valueField: 'label',
         },
@@ -256,6 +268,7 @@ export default {
           label: '设备名称',
           selectOptions: [],
           param: 'equipmentIds',
+          showAllLevels: false,
           clearable: false,
           cascaderProps: {
             multiple: true,
@@ -299,6 +312,33 @@ export default {
     this.getLineData()
     this.getDataList()
   },
+  computed: {
+    // 筛选后的列表（按 status 变化，不影响统计）
+    filteredList() {
+      if (this.status === undefined) {
+        return this.list; // 全部数据
+      }
+      // 只筛选列表，不改变统计
+      return this.list.filter(item => item.status === this.status);
+    },
+    // 全局统计（基于原始 list，不随 status 变化）
+    globalCount() {
+      // 优先使用接口返回的统计数据（如果接口提供）
+      if (this.countEq > 0 || this.countRun > 0 || this.countStop > 0) {
+        return {
+          total: this.countEq,
+          run: this.countRun,
+          stop: this.countStop
+        };
+      }
+      // 接口未提供时，基于原始 list 计算（兜底方案）
+      return {
+        total: this.list.length,
+        run: this.list.filter(item => item.status === 0).length,
+        stop: this.list.filter(item => item.status === 1).length
+      };
+    }
+  },
   methods: {
     formatTime(time) {
       // 处理时间戳：10位秒级转13位毫秒级
@@ -399,9 +439,10 @@ export default {
       //   this.formConfig[2].selectOptions = res.data.list || [];
       // })
       const { data } = await this.$axios('/base/factory/getTree');
-      this.formConfig[2].selectOptions = this.transformAndRemoveLastChildren(data)
+      this.formConfig[2].selectOptions = data
-      console.log('this.removeLastLevelChildren(data)', this.transformAndRemoveLastChildren(data))
+      // console.log('this.removeLastLevelChildren(data)', this.transformAndRemoveLastChildren(data))
     },
+
     // 切换按产线/按产品监控
 
     // 搜索/导出按钮点击
@@ -417,20 +458,35 @@ export default {
           break;
         case 'link':
           this.disabled = true;
-          this.connectSSEBatch(this.listQuery.equipmentIds);
+          let equipmentIds = []
+          let arr = []
+          this.list.forEach(ele => {
+            console.log('ele',ele);
+
+            arr.push(ele.equipmentId)
+          });
+          console.log('arr', arr);
+
+          equipmentIds = arr
+          this.connectSSEBatch(this.listQuery.equipmentIds.length > 0 ? this.listQuery.equipmentIds : equipmentIds);
           break;
         default:
       }
     },
 
     getDataList() {
+      if (this.disabled === true) {
+        this.closeAllSSE(); // 直接调用批量关闭方法
+        this.disabled = false;
+        this.isSSEConnected = false; // 重置连接状态
+      }
       this.dataListLoading = true;
       this.listQuery.equipmentIds =  this.searchBarData.equipmentIds || [];
       // this.listQuery.equipmentIds = [200301, 200302, 200303];
 
       this.listQuery.lineId = this.searchBarData.lineId ? this.searchBarData.lineId : undefined;
       this.listQuery.equipmentTypeId = this.searchBarData.equipmentTypeId ? this.searchBarData.equipmentTypeId : undefined
-      this.listQuery.status = this.status ? this.status : undefined
+      // this.listQuery.status = this.status ? this.status : undefined
       this.urlOptions.getDataListURL(this.listQuery).then(res => {
         this.list = res.data.dets
         this.countEq = res.data.countEq
@@ -460,8 +516,6 @@ export default {
       } else{
         this.status = undefined
       }
-      // this.listQuery.status = this.status ? this.status : undefined
-      this.getDataList()
     },
     closeSSE() {
       this.isDestroyed = true;
@@ -473,6 +527,8 @@ export default {
     },
     // 方案1：箭头函数绑定 this（推荐）
     connectSSEBatch(equipmentIds) {
+      console.log('equipmentIds'.equipmentIds);
+
       this.closeAllSSE(); // 此时 this 指向组件实例
 
       if (!equipmentIds || equipmentIds.length === 0) {