开发交换机注册模块

src/views/resource/switchRegister/secondAutoFind.vue

@@ -0,0 +1,156 @@
+<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">
+        <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>
+          </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>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup>
+  import EchartsLine from "@/components/echartsList/line.vue";
+  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: []
+          }
+        },
+      }
+    },
+    created() {
+      // this.$nextTick(() => {
+      this.secondList();
+      // });
+    },
+    methods: {
+      deepClone(obj) {
+        return JSON.parse(JSON.stringify(obj))
+      },
+      // 第二节点 自动发现项
+      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} 未定义`);
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
+</style>