Merge pull request 'projects/line-new-zhp' (#458) from projects/line-new-zhp into projects/line-new

Reviewed-on: #458
2025-12-09 17:03:35 +08:00
parent c203f1e1dd 1e12b653d6
commit f80644e07c
5 changed files with 405 additions and 267 deletions
--- a/dist.zip
+++ b/dist.zip
--- a/src/views/core/base/product/add-or-updata.vue
+++ b/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-select multiple v-model="dataForm.processType" clearable style="width: 100%" :disabled="isdetail"
-                  placeholder="请选择产品工艺">
-                  <el-option v-for="dict in processTypeList" :key="dict.id" :label="dict.label" :value="dict.id" />
+              <el-form-item label="	产品工艺" prop="processTypes">
+                <el-select :disabled="isdetail" collapse-tags multiple v-model="dataForm.processTypes" clearable
+                  style="width: 100%" placeholder="请选择产品工艺">
+                  <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) => {
-						this.dataForm = response.data;
-					});
+          getProduct(id).then((res) => {
+            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) => {
--- a/src/views/equipment/equipmentOverview/add-or-updata.vue
+++ b/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.equipmentName = data.equipmentName || undefined;
-      this.dataForm.lineId = data.lineId || undefined;
+      this.dataForm.equipmentId = data.equipmentId || '';
+      this.dataForm.equipmentName = data.equipmentName || '';
+      this.dataForm.lineId = data.lineId || '';


 			this.visible = true;
--- a/src/views/equipment/equipmentOverview/alarm-or-updata.vue
+++ b/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">
-          <div v-show="activeLabel === 'duration'" id="barChart" style="width: 100%; height: 400px;"></div>
-          <!-- 报警次数-饼图 -->
-          <div v-show="activeLabel === 'times'" id="pieChart" style="width: 100%; height: 400px;"></div>
+        <div v-if="hasData" style="display: flex; justify-content: space-around; gap: 20px; padding: 10px 0;">
+          <!-- 移除 v-if，始终渲染两个图表容器 -->
+          <div id="barChart" style="width: 48%; height: 400px;"></div>
+          <div id="pieChart" style="width: 48%; 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.initDefaultDate();
+    this.$nextTick(() => {
+      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 end = new Date(today.setHours(23, 59, 59, 999)).getTime();
+      const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0).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) {
-          // 根据当前Tab渲染对应图表
-          this.activeLabel === 'duration'
-            ? this.renderBarChart(originData)
-            : this.renderPieChart(originData);
+        if (this.hasData && this.isDomReady) {
+          this.$nextTick(() => {
+            this.renderBothCharts(); // 数据查询成功后，同时渲染两个图表
+          });
        } else {
-          // 无数据时销毁已有图表
          this.destroyAllCharts();
        }
      } catch (error) {
@@ -169,213 +169,251 @@ export default {
      }
    },

-    // 渲染报警时长-柱状图
-    renderBarChart(originData) {
-      // 先销毁原有图表
-      this.destroyChart('chart');
-
-      // 按报警时长降序排序
-      const sortedData = [...originData].sort((a, b) => b.alarmDuration - a.alarmDuration);
-
-      // 处理图表数据
-      const xData = sortedData.map(item => this.truncateText(item.alarmContent, 8)); // 文本截断（最多8字）
-      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');
+    // 核心方法：同时渲染柱状图和饼图（根据当前 Tab 类型）
+    renderBothCharts() {
+      if (this.activeLabel === 'duration') {
+        // 报警时长：柱状图（时长排序）+ 饼图（时长占比）
+        this.renderBarChart('duration');
+        this.renderPieChart('duration');
+      } else {
+        // 报警次数：柱状图（次数排序）+ 饼图（次数占比）
+        this.renderBarChart('times');
+        this.renderPieChart('times');
+      }
    },

-    // 渲染报警次数-饼图
-    renderPieChart(originData) {
-      // 先销毁原有图表
-      this.destroyChart('pie');
+    // 渲染柱状图（支持两种数据类型）
+    renderBarChart(type) {
+      this.destroyChart('bar');
+      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 = '报警次数';
+      }

-      // 处理图表数据（合并占比过小的项为"其他"）
-      const pieData = this.handlePieData(sortedData);
+      xData = sortedData.map(item => this.truncateText(item.alarmContent, 8));

-      const chartDom = document.getElementById('pieChart');
-      this.chartInstances.pie = echarts.init(chartDom);
-
-      const option = {
-        tooltip: {
-          trigger: 'item',
-          padding: 10,
-          textStyle: { fontSize: 11 },
-          formatter: (params) => {
-            return `
-          <div style="text-align: left;">
-            <div>${params.name}</div>
-            <div>报警次数：${params.value} 次</div>
-            <div>占比：${params.percent.toFixed(2)}%</div>
-          </div>
-        `;
-          }
-        },
-        series: [
-          {
-            name: '报警次数',
-            type: 'pie',
-            radius: ['50%', '70%'], // 环形饼图
-            center: ['50%', '50%'], // 饼图居中显示
-            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); // 最多8字
-                return `${truncatedName}(${params.value}次, ${params.percent.toFixed(1)}%)`;
+      try {
+        this.chartInstances.bar = echarts.init(chartDom);
+        const option = {
+          title: {
+            text: `${yAxisName}统计（柱状图）`,
+            left: 'center',
+            textStyle: { fontSize: 14, color: CHART_CONFIG.fontColor }
+          },
+          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>${yAxisName}：${type === 'duration' ? item.alarmDuration : item.alarmCount}</div>
+                  <div>占比：${type === 'duration' ? item.alarmDurationRatio.toFixed(2) : item.alarmCountRatio.toFixed(2)}%</div>
+                </div>
+              `;
+            }
+          },
+          grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '18%',
+            top: '15%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: xData,
+              axisTick: { alignWithLabel: true },
+              axisLabel: {
+                interval: 0,
+                fontSize: 12,
+                color: CHART_CONFIG.lightFontColor
              },
-              align: 'center',
-              baseline: 'middle'
-            },
-            // 指示线配置
-            labelLine: {
-              show: true, // 显示指示线
-              length: 15, // 第一段线长度（从饼图到转折点）
-              length2: 20, // 第二段线长度（从转折点到标签）
-              lineStyle: {
-                color: '#ccc', // 指示线颜色
-                width: 1, // 线宽
-                type: 'solid' // 实线
+              axisLine: { lineStyle: { color: '#e8e8e8' } }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: yAxisName,
+              nameTextStyle: { fontSize: 11, color: CHART_CONFIG.lightFontColor },
+              axisLabel: {
+                fontSize: 11,
+                color: CHART_CONFIG.lightFontColor,
              },
-              smooth: 0.2 // 指示线轻微弯曲，更美观
-            },
-            data: pieData,
-            // 高亮样式（hover时）
-            emphasis: {
+              axisLine: { lineStyle: { color: '#e8e8e8' } },
+              splitLine: { lineStyle: { color: '#f5f5f5' } },
+              max: (value) => value.max * 1.2
+            }
+          ],
+          series: [
+            {
+              name: yAxisName,
+              type: 'bar',
              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.1)'
+                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: {
-                color: CHART_CONFIG.fontColor, // 高亮时标签颜色加深
-                fontSize: 12, // 标签放大
-                fontWeight: 500
+                show: true,
+                position: 'top',
+                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, // 高亮时指示线颜色变为主色
-                  width: 1.5
+                  color: '#ccc',
+                  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);
-      // 监听窗口 resize
-      this.addResizeListener('pie');
+        this.chartInstances.pie.setOption(option);
+        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,
-        ratio: item.alarmCountRatio
+        value: item[valueKey],
+        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,
-        equipmentName: data.equipmentName || '未知设备',
-        lineId: data.lineId || '未知产线'
+        equipmentId: data.equipmentId || '',
+        equipmentName: data.equipmentName || '',
+        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-right: 10px;
-  /* 调整滚动条样式 */
+  padding: 10px 0;
+}
+
+/* 优化图表容器响应式布局 */
+@media (max-width: 1200px) {
+  .visual-part>div {
+    flex-direction: column;
+  }
+
+  #barChart,
+  #pieChart {
+    width: 100% !important;
+    height: 350px !important;
+    margin-bottom: 20px;
+  }
 }

 .drawer>>>.el-form,
--- a/src/views/equipment/equipmentOverview/index.vue
+++ b/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)
-      console.log('this.removeLastLevelChildren(data)', this.transformAndRemoveLastChildren(data))
+      this.formConfig[2].selectOptions = 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) {