交换机监控策略、图形监控

src/views/resource/switchRegister/secondAutoFind.vue

@@ -1,15 +1,15 @@
 <template>
   <div style="padding: 8px 20px 20px;">
-    <el-collapse v-model="activeNames">
-      <el-collapse-item v-for="(val,key, index) of linuxSystem" :title="val.title" :name="index">
+    <el-collapse v-model="activeShowList" @change="collapseChange">
+      <el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val.title}】`" :name="val.title">
         <div class="mt10 w100">
           <div class="w100 plr-20" style="font-size: 14px">
-            <div v-for="(item,key,index) of val.formList" class="w50 disInlineBlock p10">
-              <span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val.formModel[key]}}</span>
+            <div v-for="(item,key,index) of val.formList" :key="`${key}-${index}`"  class="w50 disInlineBlock p10">
+              <span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val.formModel[key] || '-'}}</span>
             </div>
           </div>
-          <div v-for="item of val.echartList" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
-            <EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
+          <div v-for="item of val.echartList" :key="`div-${val.title}-${item.title}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
+            <EchartsLine class="w100 h100" :key="`chart-${val.title}-${item.title}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
           </div>
         </div>
       </el-collapse-item>
@@ -22,126 +22,75 @@
   export default {
     name: 'SecondAutoFind',
     components: {EchartsLine},
-    data() {
-      return {
-        activeNames: [0, 1,2,3,4],
-        echartData: {
-          title: 'GE1/0/1的丢包数',
-          dataVal: {
-            titleVal: {textAlign: 'left', left: '1%'},
-            gridTop: '35%',
-            legend: {top: '15%', left: '10%'},
-            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
-            dataList: [{
-              name: '入站丢包',
-              data: [120, 132, 101, 134, 90, 230, 210],
-            },{
-              name: '出站丢包',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            }]
-          }
-        },
-        linuxSystem: {
-          net: {
-            title: '网络端口GE1/0/1',
-            formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'},
-            formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'},
-            config: {labelWidth: '160px', buttonGroup: []},
-            echartFors: [
-              {title: 'GE1/0/1的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
-              {title: 'GE1/0/1的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
-              {title: 'GE1/0/1的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
-              {title: 'GE1/0/1的网络速率(bites/sec)', oneName: '端口实时接收速率(bites/sec)', twoName: '端口实时发送速率(bites/sec)'},
-            ],
-            echartList: []
-          },
-          light: {
-            title: '光模块sabc',
-            formList: {name: '光模块端口名称'},
-            formModel: {name: 'sabc'},
-            config: {buttonGroup: []},
-            echartFors: [
-              {title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
-              {title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
-            ],
-            echartList: []
-          },
-          mpu: {
-            title: 'MPU1',
-            formList: {name: 'MPU名称', system: 'MPU的操作系统'},
-            formModel: {name: 'MPU1', system: 'xxxx'},
-            config: {buttonGroup: []},
-            echartFors: [
-              {title: 'MPU1的CPU使用率(%)', oneName: 'CPU利用率'},
-              {title: 'MPU1的内存使用率(%)', oneName: '内存利用率'},
-              {title: 'MPU1的温度(°C)', oneName: '温度'},
-            ],
-            echartList: []
-          },
-          pw: {
-            title: '电源PW1',
-            formList: {name: '电源名称', status: '电源状态'},
-            formModel: {name: 'PW1', status: '正在供电'},
-            config: {buttonGroup: []},
-            echartFors: [
-              {title: '电源电流(mA)', oneName: '电源电流'},
-              {title: '电源电压(mV)', oneName: '电源电压'}
-            ],
-            echartList: []
-          },
-          fan: {
-            title: '风扇FAN1',
-            formList: {name: '风扇名称', status: '风扇状态'},
-            formModel: {name: 'FAN1', status: 'xxx'},
-            config: {buttonGroup: []},
-            echartFors: [],
-            echartList: []
-          }
-        },
+    props: {
+      secondChartList: {
+        type: Object,
+        default: () => {}
+      },
+      activeNames: {
+        type: Array,
+        default: () => []
+      },
+      defaultTimes: {
+        type: Array,
+        default: () => []
+      },
+      matchNum: {
+        type: Object,
+        default: () => {}
       }
     },
-    created() {
-      // this.$nextTick(() => {
-      this.secondList();
-      // });
+    watch: {
+      activeNames: {
+        handler(val) {
+          console.log('val==',val);
+          this.activeShowList = val;
+        },
+        deep: true,
+        // immediate: true
+      },
+      secondChartList: {
+        handler(val) {
+          console.log('val=000000=',val);
+        },
+        deep: true,
+        // immediate: true
+      },
+      matchNum: {
+        handler(val) {
+          // if (val && val.interfaceName) {
+          //   let newData = JSON.parse(JSON.stringify(this.secondChartList));
+          //   this.secondChartList[val.interfaceName].echartList = [];
+          //   setTimeout(() => {
+          //     // this.secondChartList[val.interfaceName].echartList = newData[val.interfaceName].echartList;
+          //   },1000);
+          //   console.log('val=matchNum=',val,'this.secondChartList=====',this.secondChartList);
+          // }
+        },
+        deep: true,
+        immediate: true
+      }
     },
+    data() {
+      return {
+        activeShowList: []
+      }
+    },
+    created() {},
     methods: {
-      deepClone(obj) {
-        return JSON.parse(JSON.stringify(obj))
+      collapseChange(val) {
+        this.activeShowList = this.activeNames;
+        this.$emit("collapseChangeData", val);
       },
-      // 第二节点 自动发现项
-      secondList(){
-        Object.keys(this.linuxSystem).forEach((key,index) => {
-          // 用可选链简化空值判断，避免报错
-          const targetModule = this.linuxSystem[key];
-          if (!targetModule?.echartFors?.length) return; // 无图表模板则跳过
-          targetModule.echartFors.forEach(item => {
-            // 深拷贝基础配置，确保每个图表配置独立
-            const chartData = this.deepClone(this.echartData);
-            // 3. 替换图表标题（模板有标题则用模板，无则保留基础配置的标题）
-            if (item.title) chartData.title = item.title;
-            if (item.twoName) {
-              chartData.dataVal.dataList[1].name = item.twoName;
-            } else {
-              chartData.dataVal.dataList.splice(1,1);
-            }
-            if (item.oneName) {
-              chartData.dataVal.dataList[0].name = item.oneName;
-            } else {
-              chartData.dataVal.dataList.splice(0,1);
-            }
-            this.linuxSystem[key].echartList.push(chartData);
-          });
-        });
-      },
-      chartDataEvent(valData, funcName) {
-        // 检查函数是否存在，避免报错
-        if (typeof this[funcName] === 'function') {
-          // 调用实际函数，并传递参数（如选中的值、当前项）
-          // this[funcName]({startTime: valData[0], endTime: valData[1]});
-        } else {
-          console.warn(`函数 ${funcName} 未定义`);
-        }
+      chartDataEvent(valData, funcName, tabName) {
+        this.$emit("chartFnEvent", valData, funcName, tabName);
+        // // 检查函数是否存在，避免报错
+        // if (typeof this[funcName] === 'function') {
+        //   // 调用实际函数，并传递参数（如选中的值、当前项）
+        //   // this[funcName]({startTime: valData[0], endTime: valData[1]});
+        // } else {
+        //   console.warn(`函数 ${funcName} 未定义`);
+        // }
       }
     }
   }