From 653b3c2cc304738be0aa6f341ac9338f421e9ee2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=B7=E5=86=89=E5=86=89?= <kangranran@dingxuantech.cn>
Date: Thu, 16 Oct 2025 19:08:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E6=8D=A2=E6=9C=BA=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E7=AD=96=E7=95=A5=E3=80=81=E5=9B=BE=E5=BD=A2=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/disRevenue/resource.js                |  58 +++
 src/components/echartsList/dateTimeSelect.vue |  71 ++-
 src/components/echartsList/line.vue           |  27 +-
 src/components/form/index.vue                 |   2 +-
 src/router/index.js                           |  15 +
 src/views/index.vue                           |  44 +-
 .../switchMonitorStrat/monitorStrategy.vue    | 298 +++++++++++++
 .../switchMonitorStrat/switchMonitorStrat.vue | 203 +++++++++
 .../resource/switchRegister/firstMonitor.vue  |  88 +---
 .../resource/switchRegister/monitorChart.vue  | 407 +++++++++++++++++-
 .../switchRegister/secondAutoFind.vue         | 191 +++-----
 src/views/resource/topology/details.vue       |   6 +-
 12 files changed, 1161 insertions(+), 249 deletions(-)
 create mode 100644 src/views/resource/switchMonitorStrat/monitorStrategy.vue
 create mode 100644 src/views/resource/switchMonitorStrat/switchMonitorStrat.vue

diff --git a/src/api/disRevenue/resource.js b/src/api/disRevenue/resource.js
index 3fd4ad5..a3a7cea 100644
--- a/src/api/disRevenue/resource.js
+++ b/src/api/disRevenue/resource.js
@@ -288,6 +288,24 @@ export function getResMonitorGroup() {
     method: 'get'
   })
 }
+/**   ----------------交换机监控策略------------    */
+// 新增
+export function addResourcePolicy(data) {
+  return request({
+    url: '/rocketmq/monitorPolicy/addResourcePolicy',
+    method: 'post',
+    data: data
+  })
+}
+// 修改
+export function updateResourcePolicy(data) {
+  return request({
+    url: '/rocketmq/monitorPolicy/updateResourcePolicy',
+    method: 'post',
+    data: data
+  })
+}
+
 /**   ----------------脚本服务器策略------------    */
 // 查询列表
 export function listPolicy(query) {
@@ -484,6 +502,46 @@ export function switchPowerData(data) {
     data: data
   })
 }
+// 图形监控-自动发现项-基础信息
+export function switchNetDetails(data) {
+  return request({
+    url: '/rocketmq/switchInfo/getSwitchNetDetailsMsg',
+    method: 'post',
+    data: data
+  })
+}
+// 图形监控-自动发现项-丢包
+export function switchNetDiscards(data) {
+  return request({
+    url: '/rocketmq/switchInfo/switchNetDiscardsEcharts',
+    method: 'post',
+    data: data
+  })
+}
+// 图形监控-自动发现项-总流量
+export function switchNeTotal(data) {
+  return request({
+    url: '/rocketmq/switchInfo/switchNetTotalEcharts',
+    method: 'post',
+    data: data
+  })
+}
+// 图形监控-自动发现项-错误丢包
+export function switchNetErrDiscard(data) {
+  return request({
+    url: '/rocketmq/switchInfo/switchNetErrDiscardsEcharts',
+    method: 'post',
+    data: data
+  })
+}
+// 图形监控-自动发现项-实时流量
+export function switchNetSpeed(data) {
+  return request({
+    url: '/rocketmq/switchInfo/switchNetSpeedEcharts',
+    method: 'post',
+    data: data
+  })
+}
 
 
 /**     --------------接口备注信息---------------     */
diff --git a/src/components/echartsList/dateTimeSelect.vue b/src/components/echartsList/dateTimeSelect.vue
index 8afd0cd..9131548 100644
--- a/src/components/echartsList/dateTimeSelect.vue
+++ b/src/components/echartsList/dateTimeSelect.vue
@@ -26,13 +26,15 @@
       </ul>
       <el-date-picker
               v-model="dateRange"
-              :type="dateShowType === 'month' ? 'monthrange' : 'daterange'"
+              :class="dateShowType === 'datetimerange' ? null : 'timeIconSty'"
+              :type="dateShowType === 'month' ? 'monthrange' : dateShowType === 'day' ? 'daterange' : dateShowType ? dateShowType : 'daterange'"
               :start-placeholder="dateShowType === 'month' ? '开始日期' : '开始时间'"
               :end-placeholder="dateShowType === 'month' ? '结束日期' : '结束时间'"
               range-separator="至"
-              :format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
-              :value-format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
-              style="display: inline-block!important;width: 45%!important;vertical-align: middle;float: right;margin-right: 10px;"
+              :format="dateShowType === 'month' ? 'yyyy-MM' : dateShowType === 'datetimerange' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd' "
+              :value-format="dateShowType === 'month' ? 'yyyy-MM' : dateShowType === 'datetimerange' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
+              :style="{display: 'inline-block!important', verticalAlign: 'middle', marginRight: '10px', float: 'right', width: dateShowType === 'datetimerange' ? '75%!important' : '45%!important'}"
+              :default-time="dateShowType === 'datetimerange' ? ['12:00:00', '12:00:00'] : null"
               @change="dateChange"/>
     </div>
 </template>
@@ -48,6 +50,21 @@
         sideIcon: {
           type: Object,
           default: () => {}
+        },
+        dateDataTrans: {
+          type: Object,
+          default: () => {}
+        }
+      },
+      watch: {
+        dateDataTrans: {
+          handler(val) {
+            if (val && val.dateRange) {
+              this.dateRange = val.dateRange;
+            }
+          },
+          deep: true,
+          immediate: true
         }
       },
       data() {
@@ -80,9 +97,12 @@
         },
         // 时间选择器
         dateChange() {
-          this.$emit("dataChange", this.isActive, this.dateRange);
-          this.isActive = '';
-          // this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
+          if (this.dateDataTrans && this.dateDataTrans.transList) {
+            this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
+          } else {
+            this.$emit("dataChange", this.isActive, this.dateRange);
+            this.isActive = '';
+          }
         },
         // 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
         getLastDays(num) {
@@ -107,15 +127,29 @@
         // 获取前一个月的所有日期
         getDaysOfPreviousMonth(star, end) {
           // 1. 获取当前日期（终点日期）
-          const currentDate = new Date();
+          let currentDate = new Date();
+          if (end) {
+            currentDate = new Date(end);
+          }
           const endYear = currentDate.getFullYear();
           const endMonth = currentDate.getMonth(); // 0=1月，11=12月
           const endDay = currentDate.getDate();     // 当前日（如8）
 
           // 2. 计算起点日期（当前日期的“上月同日”，处理边界：如3月31日→2月28/29日）
-          const startDate = new Date(endYear, endMonth, endDay);
-          // 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题）
-          startDate.setMonth(startDate.getMonth() - 1);
+          let startDate = new Date(endYear, endMonth, endDay);
+          if (star) {
+            startDate = new Date(star);
+          } else {
+            // 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题）
+            startDate.setMonth(startDate.getMonth() - 1);
+          }
+          // 日期后面的时间
+          let timeStar = '';
+          let timeEnd = '';
+          if (this.dateShowType === 'datetimerange') {
+            timeStar = String(new Date(startDate).getHours()).padStart(2, '0') + ':' + String(new Date(startDate).getMinutes()).padStart(2, '0') + ':' + String(new Date(startDate).getSeconds()).padStart(2, '0');
+            timeEnd = String(new Date(currentDate).getHours()).padStart(2, '0') + ':' + String(new Date(currentDate).getMinutes()).padStart(2, '0') + ':' + String(new Date(currentDate).getSeconds()).padStart(2, '0');
+          }
 
           // 3. 提取起点日期的年、月、日（用于循环判断）
           const startYear = startDate.getFullYear();
@@ -133,15 +167,20 @@
             const year = tempDate.getFullYear();
             const month = String(tempDate.getMonth() + 1).padStart(2, '0');
             const day = String(tempDate.getDate()).padStart(2, '0');
-            const formattedDate = `${year}-${month}-${day}`;
-
+            let formattedDate = `${year}-${month}-${day}`;
+            if (this.dateShowType === 'datetimerange') {
+              if (dateCollection && dateCollection.length <= 0) {
+                formattedDate = formattedDate + ' ' + timeStar;
+              } else {
+                formattedDate = formattedDate + ' ' + timeEnd;
+              }
+            }
             dateCollection.push(formattedDate);
-
             // 临时日期加1天（进入下一天）
             tempDate.setDate(tempDate.getDate() + 1);
           }
           let timeArr = [dateCollection[0], dateCollection[dateCollection.length - 1]];
-          this.$emit("dataChange", this.isActive, timeArr);
+          this.$emit("dataChange", this.isActive, {timeArr: timeArr, timeList: dateCollection});
           // this.$emit("dataChange", this.isActive, oneMonthDays);
         },
         // 获取前三个月的月
@@ -181,7 +220,7 @@
   ::v-deep .el-date-editor .el-range-separator {
     vertical-align: super!important;
   }
-  ::v-deep .el-date-editor .el-range__close-icon {
+  ::v-deep .timeIconSty .el-range__close-icon {
     margin-top: -38px;
     margin-right: -14px;
   }
diff --git a/src/components/echartsList/line.vue b/src/components/echartsList/line.vue
index 0406f7d..a39c188 100644
--- a/src/components/echartsList/line.vue
+++ b/src/components/echartsList/line.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
+        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateDataTrans="dateDataTrans" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
         <div :id="`lineChart` + num" style="width:100%;height: 100%;" />
     </div>
 </template>
@@ -24,6 +24,10 @@
           type: String,
           default: null
         },
+        dateDataTrans: {
+          type: Object,
+          default: () => ({})
+        },
         chartData: {
           type: Function,
           default: () => {
@@ -114,11 +118,30 @@
               axisTick: {
                 show: false
               },
+              axisLabel: {
+                formatter: function(value) {
+                  // 每4个字符换一行（根据实际文本长度调整）
+                  const maxLength = 11;
+                  let result = '';
+                  let count = 0;
+                  for (let i = 0; i < value.length; i++) {
+                    count++;
+                    result += value[i];
+                    if (count % maxLength === 0 && i !== value.length - 1) {
+                      result += '\n'; // 换行
+                    }
+                  }
+                  return result;
+                },
+                // lineHeight: 10, // 行高（确保换行后不重叠）
+              },
               data: dataXY.lineXData
             },
             yAxis: {
               type: 'value',
-              name: '单位Mbps',
+              name: dataXY?.yAxisName || '单位Mbps',
+              min: 0,    // 自定义最小刻度（根据业务需求调整，如 0）
+              max: dataXY && dataXY.data && dataXY.data.length > 0 ? null : dataXY.dataList && dataXY.dataList[0] && dataXY.dataList[0].data.length > 0 ? null : 100,
               splitLine: {
                 show: true,
               },
diff --git a/src/components/form/index.vue b/src/components/form/index.vue
index 191f583..c9e7155 100644
--- a/src/components/form/index.vue
+++ b/src/components/form/index.vue
@@ -42,7 +42,7 @@
                     :multiple="formVal.multiple"
                     :collapse-tags="formVal.collapseTags"
                     :disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
-                    :placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请输入${formVal.label}`"
+                    :placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请选择${formVal.label}`"
                     :clearable="formVal.clearable !== false"
                     @[formVal.eventName]="(val) => handleChange(key,val,formVal)">
                     <el-option
diff --git a/src/router/index.js b/src/router/index.js
index da7d51c..bbb85a6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -400,6 +400,21 @@ export const dynamicRoutes = [
       }
     ]
   },
+  //  交换机监控策略
+  {
+    path: '/resource/switchMonitorStrat/details',
+    component: Layout,
+    hidden: true,
+    permissions: ['resource:switchMonitorStrat:edit'],
+    children: [
+      {
+        path: 'index/:id?',
+        component: () => import('@/views/resource/switchMonitorStrat/monitorStrategy'),
+        name: 'switchMonitorStatEdit',
+        meta: { title: '交换机监控策略信息', activeMenu: '/resource/switchMonitorStrat' }
+      }
+    ]
+  },
 //  监控模版
   {
     path: '/resource/monitorTemp/details',
diff --git a/src/views/index.vue b/src/views/index.vue
index a6c6129..2e74678 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -32,7 +32,7 @@
           <span>服务器带宽收益</span>
           <span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
         </div>
-        <div style="height: 93%;overflow: scroll;" class="newSty">
+        <div style="height: 93%;overflow: scroll;" class="newSty w100">
           <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList" @fnRenderList="serverTableList"></TableList>
         </div>
       </div>
@@ -41,31 +41,31 @@
           <span>资源监控</span>
           <span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
         </div>
-        <div style="height: 93%;overflow: scroll;" class="newSty">
+        <div style="height: 93%;overflow: scroll;" class="newSty w100">
           <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList" @fnRenderList="resMonitorTableList"></TableList>
         </div>
       </div>
     </div>
-    <div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">
-      <!-- 拖拽容器 -->
-      <draggable
-        class="w100 h100"
-        v-model="echartList"
-        :animation="150"
-        :handle="'.el-collapse-item__header'"
-        :ghost-class="'ghost-item'"
-        :chosen-class="'chosen-item'"
-        @start="onDragStart"
-        @end="onDragEnd">
-        <template v-for="(val,index) of echartList">
-          <el-collapse v-model="activeNames" class="w100 h100">
-            <el-collapse-item :title="val.title" name="1"  class="w100 h100">
-              <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>
-            </el-collapse-item>
-          </el-collapse>
-        </template>
-      </draggable>
-    </div>
+<!--    <div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">-->
+<!--      &lt;!&ndash; 拖拽容器 &ndash;&gt;-->
+<!--      <draggable-->
+<!--        class="w100 h100"-->
+<!--        v-model="echartList"-->
+<!--        :animation="150"-->
+<!--        :handle="'.el-collapse-item__header'"-->
+<!--        :ghost-class="'ghost-item'"-->
+<!--        :chosen-class="'chosen-item'"-->
+<!--        @start="onDragStart"-->
+<!--        @end="onDragEnd">-->
+<!--        <template v-for="(val,index) of echartList">-->
+<!--          <el-collapse v-model="activeNames" class="w100 h100">-->
+<!--            <el-collapse-item :title="val.title" name="1"  class="w100 h100">-->
+<!--              <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>-->
+<!--            </el-collapse-item>-->
+<!--          </el-collapse>-->
+<!--        </template>-->
+<!--      </draggable>-->
+<!--    </div>-->
   </div>
 </template>
 
diff --git a/src/views/resource/switchMonitorStrat/monitorStrategy.vue b/src/views/resource/switchMonitorStrat/monitorStrategy.vue
new file mode 100644
index 0000000..4920549
--- /dev/null
+++ b/src/views/resource/switchMonitorStrat/monitorStrategy.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="app-container">
+    <div style="display: flex; justify-content: center;">
+      <div class="w100">
+        <Form ref="formRef" :formList="formList" :config="{labelWidth: '140px',buttonGroup: []}" :ruleFormData="ruleFormData" @fnClick="callback"></Form>
+      </div>
+    </div>
+    <div>
+      <h3 style="background: #d4e3fc;padding: 15px 10px;">策略内容</h3>
+      <el-tabs v-model="activeName" class="plr-20">
+        <el-tab-pane label="监控项" name="first">
+          <div v-for="item of firstData">
+            <div class="plr-50">
+              <div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
+                <div class="disInlineBlock w50">
+                  <span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
+                  <span>{{city.metricName}}</span>
+                </div>
+                <div class="disInlineBlock" style="color: #606266">
+                  采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable>
+                  <el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
+                </el-select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="自动发现项" name="second">
+          <el-collapse v-model="activeTwoName">
+            <el-collapse-item v-for="(item,key,index) of secondData" :title="item.title" :name="index">
+              <template slot="title">
+                <span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
+                <div style="font-size: 13px;margin-left: 10%;">
+                  采集周期：<el-select v-model="item['time']" id="selDisabled" :disabled="key === 'switchNet' ? true : false" clearable placeholder="请选择">
+                  <el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
+                </el-select>
+                </div>
+              </template>
+              <div class="plr-50">
+                <div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
+                  <span style="width: 300px" class="disInlineBlock">{{city.metricKey}}</span>
+                  <span>{{city.metricName}}</span>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <el-button style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
+    <el-button type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</el-button>
+  </div>
+</template>
+
+<script>
+  import Form from '@/components/form/index.vue';
+  import {addResourcePolicy, updateResourcePolicy,getMonitorTempList, getMonitorPolicy, getMonitorPolicyTemp, getResMonitorGroup} from "@/api/disRevenue/resource"
+  export default {
+    name: "MonitorStrategy",
+    components: {Form},
+    dicts: ['rm_register_resource_type', 'collection_cycle', 'switch_type', 'policy_status'],
+    // props: {
+    //   open: {
+    //     type: Boolean,
+    //     default: false
+    //   }
+    // },
+    // watch: {
+    //   open: {
+    //     handler(val) {
+    //       if (!val) {
+    //         // 清空form
+    //         this.$refs['formRef'].$refs.ruleForm.resetFields();
+    //       }
+    //     },
+    //     deep: true,
+    //     immediate: true
+    //   },
+    // },
+    data() {
+      return {
+        activeName: 'first',
+        activeTwoName: [0,1,2,3,4],
+        timeOptions: [],
+        ruleFormData: {},
+        formList: [],
+        firstData: [
+          {checkList: []}
+        ],
+        tempContent: {},
+        secondData: {
+          switchNet: {title: '网络端口发现', time: '300',
+            checkList: []
+          },
+          switchModule: {title: '光模块发现', time: '',
+            checkList: []
+          },
+          switchMpu: {title: 'MPU发现', time: '',
+            checkList: []
+          },
+          switchPwr: {title: '电源发现', time: '',
+            checkList: []
+          },
+          switchFan: {title: '风扇发现', time: '',
+            checkList: []
+          },
+        }
+      }
+    },
+    created() {
+      this.timeOptions = this.dict.type.collection_cycle;
+      this.paramsData = this.$route && this.$route.query;
+      // console.log('paramsData===',this.paramsData);
+      if (this.paramsData && this.paramsData.id) {
+        this.getFormDataList(this.paramsData.id);
+      } else {
+        this.getDataList();
+      }
+      this.fnFormList();
+    },
+    methods: {
+      // formList集合
+      fnFormList(objVal) {
+        this.formList = [{
+          config: {readonly: this.paramsData && this.paramsData.readonly, colSpan: this.paramsData && this.paramsData.readonly ? '' : 'disBlock'},
+          controls: {
+            id: {label: 'ID',hidden: true},
+            policyName: {label: '策略名称', span: 12, type: 'input', required: true},
+            description: {label: '描述', span: 12, type: 'textarea'},
+            priority: {label: '优先级', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            status: {label: '策略状态', span: 12, type: 'select',options: this.dict.type.dicpolicy_status, hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            deployTime: {label: '下发策略时间', span: 12, type: 'textarea', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            createTime: {label: '创建时间', span: 12, type: 'textarea', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            switchType: {label: '交换机类型', span: 12, type: 'select', required: true, options: this.dict.type.switch_type},
+            deployDevice: {label: '部署设备', span: 12, type: 'textarea', rows: 15,required: true},
+            createBy: {label: '创建人', span: 12, type: 'input',hidden: this.paramsData && this.paramsData.readonly ? false : true},
+          }
+        }];
+      },
+      // 获取详情
+      getFormDataList(id) {
+        this.tempContent = {};
+        getMonitorPolicy(id).then(val => {
+          if (val && val.data) {
+            this.ruleFormData = val.data?.policy;
+            this.tempContent = val.data['switch'];
+            console.log('val====',this.tempContent);
+
+          }
+          this.getDataList();
+        }).catch(() => {
+          this.getDataList();
+          // this.$modal.msgError("操作失败")
+        });
+      },
+      getDataList() {
+        let itemTypeList = ['monitorItem', 'autodiscoverItem'];
+        itemTypeList.forEach(item => {
+          let params = {resourceType: 'switch', itemType: item};
+          this.fnGetMonitorTempList(params);
+        });
+      },
+      // 通过监控模版选项 查询监控策略展示项
+      fnGetMonitorTempList(params) {
+        getMonitorTempList(params).then(res => {
+          if (res && res.data) {
+            if (params.itemType === 'monitorItem') {
+              let otherData = res.data?.switchOther || [];
+              if (this.tempContent?.switchOther) {
+                this.tempContent['switchOther'].forEach(item => {
+                  otherData.some(val => {
+                    if (item.metricKey === val.metricKey) {
+                      val['time'] = item.collectionCycle.toString();
+                      return true;
+                    }
+                  })
+                });
+              }
+              this.firstData[0].checkList = otherData;
+            }
+            if (params.itemType === 'autodiscoverItem') {
+              if (this.tempContent?.switchNet && this.tempContent?.switchNet.length > 0) {
+                this.secondData['switchNet'].time = this.tempContent.switchNet[0].collectionCycle.toString();
+              }
+              this.secondData['switchNet'].checkList = res.data?.switchNet || [];
+
+              if (this.tempContent?.switchModule && this.tempContent?.switchModule.length > 0) {
+                this.secondData['switchModule'].time = this.tempContent.switchModule[0].collectionCycle.toString();
+              }
+              this.secondData['switchModule'].checkList = res.data?.switchModule || [];
+
+              if (this.tempContent?.switchMpu && this.tempContent?.switchMpu.length > 0) {
+                this.secondData['switchMpu'].time = this.tempContent.switchMpu[0].collectionCycle.toString();
+              }
+              this.secondData['switchMpu'].checkList = res.data?.switchMpu || [];
+
+              if (this.tempContent?.switchPwr && this.tempContent?.switchPwr.length > 0) {
+                this.secondData['switchPwr'].time = this.tempContent.switchPwr[0].collectionCycle.toString();
+              }
+              this.secondData['switchPwr'].checkList = res.data?.switchPwr || [];
+
+              if (this.tempContent?.switchFan && this.tempContent?.switchFan.length > 0) {
+                this.secondData['switchFan'].time = this.tempContent.switchFan[0].collectionCycle.toString();
+              }
+              this.secondData['switchFan'].checkList = res.data?.switchFan || [];
+            }
+          }
+        })
+      },
+      // form验证
+      fnFormValid() {
+        return new Promise((resolve) => {
+          this.ruleFormData = {};
+          const formValid = this.$refs.formRef.$refs.ruleForm;
+          // 3. 操作form（如验证）
+          formValid.validate((valid) => {
+            if (valid) {
+              this.ruleFormData = formValid.model;
+              resolve(true);
+            } else {
+              resolve(false);
+            }
+          });
+        });
+      },
+      async submit() {
+        if (!await this.fnFormValid()) return;
+        // 监控项
+        let idsList = [];
+        this.firstData.forEach(item => {
+          item && item.checkList.forEach(ids => {
+            if (ids && ids.time) {
+              idsList.push({id: ids.id, collectionCycle: ids.time});
+            }
+          });
+        });
+        // 自动发现项
+        let autoIds = [];
+        Object.keys(this.secondData).forEach(key => {
+          if (this.secondData[key].time) {
+            this.secondData[key] && this.secondData[key].checkList.forEach(ids => {
+              autoIds.push({id: ids.id, collectionCycle: this.secondData[key].time});
+            });
+          }
+        });
+        // console.log('ruleFormData===',this.ruleFormData);
+        // console.log('idsList===',idsList);
+        // console.log('autoIds===',autoIds);
+        // this.$emit("dialogResult", {open: false});
+
+        let paramsList = idsList.concat(autoIds);
+        let params = Object.assign(this.ruleFormData, {resourceType: 'switch'},{collectionAndIdList: paramsList});
+        let fnType = addResourcePolicy;
+        if (this.paramsData && this.paramsData.id) {
+          fnType = updateResourcePolicy;
+        }
+        this.$modal.loading();
+        fnType(params).then(response => {
+          this.$modal.msgSuccess(response.msg);
+          this.$router.push("/resource/switchMonitorStrat");
+          this.$modal.closeLoading();
+        }).catch(error => {
+          this.$modal.closeLoading();
+        });
+      },
+      cancel() {
+        this.$router.push("/resource/switchMonitorStrat");
+        // this.$emit("dialogResult", {open: false});
+      },
+      // 监听事件
+      callback(result, dataVal, formVal) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'submit':
+              break;
+            case 'cancel':
+              this.$router.push("/resource/switchRegister");
+              break;
+            default:
+
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  ::v-deep #selDisabled{
+    color: #303133!important;
+  }
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
+</style>
diff --git a/src/views/resource/switchMonitorStrat/switchMonitorStrat.vue b/src/views/resource/switchMonitorStrat/switchMonitorStrat.vue
new file mode 100644
index 0000000..815ff97
--- /dev/null
+++ b/src/views/resource/switchMonitorStrat/switchMonitorStrat.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="app-container pageTopForm">
+    <el-form :model="queryParams" ref="queryRef" size="small" v-show="showSearch" label-width="auto">
+      <el-col :span="8">
+        <el-form-item label="搜索" prop="queryName">
+          <el-input
+            v-model="queryParams.queryName"
+            placeholder="请输入策略名称/部署设备"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="策略状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择策略状态"
+            clearable>
+            <el-option
+              v-for="dict in dict.type.policy_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item class="lastBtnSty">
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-form>
+    <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
+      <template #tempType="{ row, column }">
+        <dict-tag :options="dict.type.switch_type" :value="row.switchType"/>
+      </template>
+      <template #tempStatus="{ row, column }">
+        <dict-tag :options="dict.type.policy_status" :value="row.status"/>
+      </template>
+    </TableList>
+  </div>
+</template>
+
+<script setup>
+  import TableList from "@/components/table/index.vue"
+  import {listMonitorPolicy, delMonitorPolicy, getMonitorPolicyList} from "@/api/disRevenue/resource"
+  export default {
+    name: 'switchMonitorStrat',
+    components: {TableList},
+    dicts: ['switch_type','eps_bandwidth_type', 'policy_status'],
+    data() {
+      return {
+        loading: true,
+        showSearch: true,
+        tableList: [],
+        queryParams: {
+          total: 0,
+          pageNum: 1,
+          pageSize: 10
+        },
+        // 列显隐信息
+        columns: {
+          id: { label: `ID`,width: '50'},
+          policyName: { label: `策略名称`, minWidth: '250', visible: true },
+          description: { label: `描述`,minWidth: '200',visible: true},
+          deployDevice: { label: `部署设备`,minWidth: '200',visible: true},
+          switchType: { label: `交换机类型`,minWidth: '150', slotName: 'tempType', visible: true },
+          priority: { label: `优先级`,minWidth: '150', visible: true },
+          connected: { label: `策略内容`,minWidth: '200'},
+          status: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
+          deployTime: { label: `下发策略时间`,minWidth: '160'},
+          updateTime:{ label: `创建人`,minWidth: '160'},
+          createTime: { label: `创建时间`,minWidth: '160'},
+        },
+        config: {
+          tableButton: {
+            top: [
+              {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:monitorStategy:add'},
+              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:monitorStategy:export'},
+            ],
+            line: [
+              {content: '修改', fnCode: 'edit', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-edit', hasPermi: 'resource:monitorStategy:edit'},
+              {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:monitorStategy:details'},
+              {content: '删除', fnCode: 'delete', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-delete', hasPermi: 'resource:monitorStategy:detele'},
+              // {content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:monitorStategy:copy'},
+              // {content: '下发策略', fnCode: 'strategy', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-sort-down', hasPermi: 'resource:monitorStategy:strategy'},
+              {}
+            ]
+          }
+        }
+      }
+    },
+    created() {
+      this.getList();
+    },
+    activated() {
+      this.$nextTick(() => {
+        this.getList();
+      });
+    },
+    methods: {
+      /** 查询列表 */
+      getList() {
+        // this.$modal.loading();
+        listMonitorPolicy(this.queryParams).then(response => {
+          this.tableList = response.rows;
+          this.queryParams.total = response.total;
+          // this.$modal.closeLoading();
+        }).catch(err => {
+          // this.$modal.closeLoading();
+        })
+      },
+      // 处理子组件传递的新值
+      handleValueChange(newValue) {
+        // 父组件更新自身数据，实现同步
+        this.showSearch = newValue;
+        // console.log('父组件拿到新值:', newValue);
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryRef");
+        this.handleQuery();
+      },
+
+      callback(result, rowData, selectChange, selectList) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'add':
+              this.$router.push({
+                path:'/resource/switchMonitorStrat/details/index'});
+              break;
+            case 'edit':
+              this.$router.push({
+                path:'/resource/switchMonitorStrat/details/index',
+                query:{
+                  id: rowData.id
+                }
+              });
+              break;
+            case 'details':
+              this.$router.push({
+                path:'/resource/switchMonitorStrat/details/index',
+                query:{
+                  id: rowData.id,
+                  readonly: true
+                }
+              });
+              break;
+            case 'delete':
+              if (selectList && selectList.length <= 0) {
+                this.$modal.msgWarning("请选择数据！");
+                return;
+              }
+              this.$modal.confirm('是否确认删除数据项？').then(function() {
+                return delMonitorPolicy(selectChange)
+              }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功")
+              }).catch(() => {});
+              break;
+            case 'strategy':
+              this.$modal.confirm('是否确认下发策略？').then(() => {
+                this.$modal.loading();
+                getMonitorPolicyList(rowData.id).then(res => {
+                  this.getList();
+                  this.$modal.msgSuccess(res.msg);
+                  this.$modal.closeLoading();
+                }).catch(error => {
+                  this.$modal.closeLoading();
+                });
+              }).catch(() => {});
+              break;
+            case 'export':
+              // let dataList = [];
+              // Object.keys(this.columns).forEach(item => {
+              //   if (item.visible) {
+              //     dataList.push(item.prop);
+              //   }
+              // });
+              // this.download("/system/monitorStategy/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
+              let paramsList = Object.assign({}, this.queryParams,rowData);
+              this.download("rocketmq/monitorPolicy/export", paramsList, `资源监控策略_${new Date().getTime()}.xlsx`, null, 'json');
+              break;
+            default:
+          }
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  ::v-deep .lastBtnSty .el-form-item__content{
+    margin-left: 10px!important;
+  }
+</style>
diff --git a/src/views/resource/switchRegister/firstMonitor.vue b/src/views/resource/switchRegister/firstMonitor.vue
index 27f1b6f..287967c 100644
--- a/src/views/resource/switchRegister/firstMonitor.vue
+++ b/src/views/resource/switchRegister/firstMonitor.vue
@@ -1,12 +1,12 @@
 <template>
   <div style="padding: 8px 20px 20px;">
     <div class="w100 plr-20" style="font-size: 14px">
-      <div v-for="(item, key, index) of formListTow" class="w50 disInlineBlock p10">
-        <span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{formValue[key]}}</span>
+      <div v-for="(item, key, index) of formData['formFirst']" class="w50 disInlineBlock p10">
+        <span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{formData['formValue'] && formData['formValue'][key]}}</span>
       </div>
     </div>
-    <div v-for="item of resultData" 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 chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5">
+      <EchartsLine class="w100 h100" :lineData="item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
     </div>
   </div>
 </template>
@@ -16,79 +16,23 @@
   export default {
     name: 'FirstMonitor',
     components: {EchartsLine},
-    data() {
-      return {
-        formListTow: [],
-        formValue: {remarks: 'aaa', address: 'aaa', objId: 'aaa', macAddress: 'aaa',
-          time: 'aaa', sbName: 'aaa', msg: 'aaa', versions: 'aaa', sysName: 'aaa'},
-        paramsData: {},
-        resultData: [{
-          title: '设备CPU使用率(%)',
-          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: '设备CPU使用率',
-              data: [120, 132, 101, 134, 90, 230, 210],
-            }]
-          }
-        },{
-          title: '设备内存使用率(%)',
-          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: 'CPU运行用户进程所花费的时间',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            }]
-          }
-        },{
-          title: '功率',
-          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: '系统平均功率(mW)',
-              data: [120, 132, 101, 134, 90, 230, 210],
-            },{
-              name: '系统实时功率(mW)',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            }]
-          }
-        }],
+    props: {
+      chartList: {
+        type: Array,
+        default: () => []
+      },
+      formData: {
+        type: Object,
+        default: () => {}
       }
     },
-    created() {
-      // this.paramsData = this.$route && this.$route.query;
-      this.fnFormList();
-      // this.switchList();
+    data() {
+      return {}
     },
+    created() {},
     methods: {
-      // formList集合
-      fnFormList() {
-        let formFirst = {
-          remarks: '系统描述', address: '系统位置', objId: '系统Object ID', macAddress: '系统MAC地址',
-          time: '系统运行时间', sbName: '设备名称', msg: '系统联系信息', versions: '设备软件版本', sysName: '系统名称'
-        };
-        this.formListTow = {...formFirst};
-      },
       chartDataEvent(valData, funcName) {
-        // 检查函数是否存在，避免报错
-        if (typeof this[funcName] === 'function') {
-          // 调用实际函数，并传递参数（如选中的值、当前项）
-          // this[funcName]({startTime: valData[0], endTime: valData[1]});
-        } else {
-          console.warn(`函数 ${funcName} 未定义`);
-        }
+        this.$emit("chartFnEvent", valData, funcName);
       },
     }
   }
diff --git a/src/views/resource/switchRegister/monitorChart.vue b/src/views/resource/switchRegister/monitorChart.vue
index aaa169b..076a942 100644
--- a/src/views/resource/switchRegister/monitorChart.vue
+++ b/src/views/resource/switchRegister/monitorChart.vue
@@ -2,11 +2,13 @@
   <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="监控项" name="first">
-        <FirstMonitor></FirstMonitor>
+        <template v-if="activeName === 'first'">
+          <FirstMonitor v-if="loading" :formData="formData" :chartList="firstChartList" @chartFnEvent="chartFnEvent"></FirstMonitor>
+        </template>
       </el-tab-pane>
       <el-tab-pane label="自动发现项" name="second">
         <template v-if="activeName === 'second'">
-          <SecondAutoFind></SecondAutoFind>
+          <SecondAutoFind v-if="loading" :defaultTimes="defaultTimes" :matchNum="matchNum" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
         </template>
       </el-tab-pane>
     </el-tabs>
@@ -19,21 +21,402 @@
 <script>
   import FirstMonitor from "./firstMonitor";
   import SecondAutoFind from "./secondAutoFind";
-    export default {
-      name: "MonitorChart",
-      components: {FirstMonitor, SecondAutoFind},
-      data() {
-        return {
-          activeName: 'first',
+  import {switchMonitorData, switchCpuData, switchMemData,switchPowerData, postInterFaceName, switchNetDetails,switchNetDiscards,switchNeTotal,switchNetErrDiscard, switchNetSpeed} from "@/api/disRevenue/resource"
+  export default {
+    name: "MonitorChart",
+    components: {FirstMonitor, SecondAutoFind},
+    data() {
+      return {
+        loading: false,
+        currTimeList: {},
+        defaultTimes: [],
+        activeName: 'second',
+        paramsData: {},
+        // 第一栏
+        firstChartTrans: {},
+        formFirst: {
+          sysDescr: '系统描述', sysLocation: '系统位置', sysObjectID: '系统Object ID', hwStackSystemMac: '系统MAC地址',
+          sysUpTime: '系统运行时间', entPhysicalName: '设备名称', sysContact: '系统联系信息', entPhysicalSoftwareRev: '设备软件版本', sysName: '系统名称'
+        },
+        formData: {},
+        firstChartList: [],
+        resultData: [
+          {
+            title: '设备CPU使用率(%)',
+            dateShowType: 'datetimerange',
+            dateDataTrans: {transList: true},
+            dataVal: {
+              titleVal: {textAlign: 'left', left: '1%'},
+              yAxisName: ' ',
+              gridTop: '35%',
+              legend: {top: '15%', left: '10%'},
+              lineXData: [],
+              dataList: [{
+                name: '设备CPU使用率',
+                data: [],
+              }]
+            }
+          },{
+            title: '设备内存使用率(%)',
+            dateShowType: 'datetimerange',
+            dateDataTrans: {transList: true},
+            dataVal: {
+              titleVal: {textAlign: 'left', left: '1%'},
+              yAxisName: ' ',
+              gridTop: '35%',
+              legend: {top: '15%', left: '10%'},
+              lineXData: [],
+              dataList: [{
+                name: '设备内存使用率',
+                data: [],
+              }]
+            }
+          },{
+            title: '功率',
+            dateShowType: 'datetimerange',
+            dateDataTrans: {transList: true},
+            dataVal: {
+              titleVal: {textAlign: 'left', left: '1%'},
+              yAxisName: ' ',
+              gridTop: '35%',
+              legend: {top: '15%', left: '10%'},
+              lineXData: [],
+              dataList: [{
+                name: '系统平均功率(mW)',
+                data: [],
+              },{
+                name: '系统实时功率(mW)',
+                data: []
+              }]
+            }
+          }
+        ],
+        //  第二栏
+        activeNames: [],
+        matchNum: {num: ''},
+        secondChartList: {},
+        eventDataMap: {},
+        echartData: {
+          title: 'GE1/0/1的丢包数',
+          dateShowType: 'datetimerange',
+          dateDataTrans: {transList: true},
+          dataVal: {
+            titleVal: {textAlign: 'left', left: '1%'},
+            yAxisName: ' ',
+            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'},
+            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'},
+            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'},
+            echartFors: [
+              {title: 'MPU1的CPU使用率(%)', oneName: 'CPU利用率'},
+              {title: 'MPU1的内存使用率(%)', oneName: '内存利用率'},
+              {title: 'MPU1的温度(°C)', oneName: '温度'},
+            ],
+            echartList: []
+          },
+          pw: {
+            title: '电源PW1',
+            formList: {name: '电源名称', status: '电源状态'},
+            formModel: {name: 'PW1', status: '正在供电'},
+            echartFors: [
+              {title: '电源电流(mA)', oneName: '电源电流'},
+              {title: '电源电压(mV)', oneName: '电源电压'}
+            ],
+            echartList: []
+          },
+          fan: {
+            title: '风扇FAN1',
+            formList: {name: '风扇名称', status: '风扇状态'},
+            formModel: {name: 'FAN1', status: 'xxx'},
+            echartFors: [],
+            echartList: []
+          }
+        },
+      }
+    },
+    created() {
+      let startData = '';
+      let endData = '';
+      const year = new Date().getFullYear();
+      const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月
+      const day = String(new Date().getDate()).padStart(2, '0');     // 当前日（如8）
+      const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
+      startData = `${year}-${month}-${prevDay} 00:00:00`;
+      endData = `${year}-${month}-${day} 00:00:00`;
+      this.currTimeList = {startTime: startData, endTime: endData};
+      this.defaultTimes = [startData, endData];
+      this.paramsData = this.$route && this.$route.query;
+      this.handleClick();
+    },
+    methods: {
+      async handleClick(tab, event) {
+        this.loading = false;
+        if (this.activeName === 'first') {
+          await Promise.all([
+            this.getMonitorData(),
+            this.getCpuData(),
+            this.getMemData(),
+            this.getPowerData()
+          ]);
+          this.loading = true;
+        } else {
+          await this.fnInterFaceNameList();
+          this.loading = true;
         }
       },
-      methods: {
-        handleClick(tab, event) {},
-        goBack() {
-          this.$router.push("/resource/switchRegister");
+      getMonitorData() {
+        this.formData = {formFirst: this.formFirst};
+        switchMonitorData({clientId: this.paramsData.clientId}).then(res => {
+          if (res && res.data) {
+            this.formData['formValue'] = res.data;
+          }
+        });
+      },
+      getCpuData(val) {
+        let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
+        switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
+          cpuData['fnEvent'] = 'getCpuData';
+          if (res && res.data) {
+            cpuData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
+              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
+            cpuData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchCpuUse'] && res.data['yData']['switchCpuUse'].length > 0 ? res.data['yData']['switchCpuUse'] : [];
+          }
+          // this.firstChartList[0] = cpuData;
+          this.$set(this.firstChartList, 0, cpuData);
+        }).catch(() => {
+          this.firstChartList[0] = cpuData;
+        });
+      },
+      getMemData(val) {
+        let memData = JSON.parse(JSON.stringify(this.resultData[1]));
+        switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
+          memData['fnEvent'] = 'getMemData';
+          if (res && res.data) {
+            memData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
+              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
+            memData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
+          }
+          // this.firstChartList[1] = memData;
+          this.$set(this.firstChartList, 1, memData);
+        }).catch(() => {
+          this.firstChartList[1] = memData;
+        });
+      },
+      getPowerData(val) {
+        let powerData = JSON.parse(JSON.stringify(this.resultData[2]));
+        switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
+          powerData['fnEvent'] = 'getPowerData';
+          if (res && res.data) {
+            powerData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
+              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
+            powerData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchAvgPower'] && res.data['yData']['switchAvgPower'].length > 0 ? res.data['yData']['switchAvgPower'] : [];
+            powerData.dataVal.dataList[1].data = res.data && res.data['yData'] && res.data['yData']['switchcurrentPower'] && res.data['yData']['switchcurrentPower'].length > 0 ? res.data['yData']['switchcurrentPower'] : [];
+          }
+          // this.firstChartList[2] = powerData;
+          this.$set(this.firstChartList, 2, powerData);
+        }).catch(() => {
+          this.firstChartList[2] = powerData;
+        });
+      },
+      // two
+      // 接口名称
+      async fnInterFaceNameList(val) {
+        this.activeNames = [];
+        try {
+          const res = await postInterFaceName({clientId: this.paramsData.clientId});
+            // .then(res => {
+            res && res.forEach(async(item,index) => {
+              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
+              oneData.title = item && item.interfaceName;
+              this.secondChartList[item.interfaceName] = oneData;
+              if (index === 0) {
+                this.$modal.loading();
+                await Promise.all([
+                  this.getNetDiscards(this.currTimeList, item),
+                  this.getNetTotal(this.currTimeList, item),
+                  this.getNetErrDisc(this.currTimeList, item),
+                  this.getNetSpeed(this.currTimeList, item)
+                ]);
+                setTimeout(() => {
+                  if (!this.activeNames.includes(item.interfaceName)) this.activeNames.push(item.interfaceName);
+                  this.$modal.closeLoading();
+                },2000);
+              }
+            });
+          // });
+        } catch (error) {
+          this.$modal.closeLoading();
+          console.error('获取接口名称列表失败：', error);
+          // 可添加错误提示，如this.$message.error('数据加载失败')
         }
+      },
+      // 基本信息
+      getNetData() {
+        switchNetDetails({clientId: this.paramsData.clientId}).then(res => {
+          if (res && res.data) {
+            this.formData['formValue'] = res.data;
+          }
+        });
+      },
+      // 丢包
+      getNetDiscards(times,val) {
+        const interfaceName = val.interfaceName;
+        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+        if (netEcharts && netEcharts.dateDataTrans) {
+          netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
+        }
+        netEcharts.fnEvent = 'getNetDiscards';
+        switchNetDiscards(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
+          this.$set(this.secondChartList[interfaceName].echartList, 0, []);
+          if (res && res.data) {
+            this.eventDataMap['interfaceName'] = false;
+            netEcharts.title = `${interfaceName}的丢包数`;
+            console.log('');
+            netEcharts.dataVal.lineXData = res.data?.xData.length > 0 ? res.data.xData : this.firstChartTrans?.timeList || [];
+            // 入
+            netEcharts.dataVal.dataList[0] = {
+              name: this.secondChartList[interfaceName].echartFors[0].oneName,
+              data: res.data.yData?.netInDiscardsData || []
+            };
+            // 出
+            netEcharts.dataVal.dataList[1] = {
+              name: this.secondChartList[interfaceName].echartFors[0].twoName,
+              data: res.data.yData?.netOutDiscardsData || []
+            };
+            this.$set(this.secondChartList[interfaceName].echartList, 0, netEcharts);
+            this.$set(this.eventDataMap, interfaceName, true);
+            if (this.firstChartTrans?.timeList) {
+              this.matchNum['interfaceName'] = val.interfaceName;
+              this.$set(this.matchNum, 'num', Math.floor(Math.random() * 9000));
+            }
+          }
+        });
+      },
+      // 总数
+      getNetTotal(times,val) {
+        const interfaceName = val.interfaceName;
+        // let netData = JSON.parse(JSON.stringify(this.secondChartList[interfaceName]));
+        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
+        netEcharts.fnEvent = 'getNetTotal';
+        switchNeTotal(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
+          if (res && res.data) {
+            netEcharts.title = `${interfaceName}的Bites总数`;
+            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+            // 入
+            netEcharts.dataVal.dataList[0] = {
+              name: this.secondChartList[interfaceName].echartFors[1].oneName,
+              data: res.data.yData?.netInTotalData || []
+            };
+            // 出
+            netEcharts.dataVal.dataList[1] = {
+              name: this.secondChartList[interfaceName].echartFors[1].twoName,
+              data: res.data.yData?.netOutTotalData || []
+            };
+            this.$set(this.secondChartList[interfaceName].echartList, 1, netEcharts);
+          }
+        });
+      },
+      // 错误丢包
+      getNetErrDisc(times, val) {
+        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
+        netEcharts.fnEvent = 'getNetErrDisc';
+        switchNetErrDiscard(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
+          if (res && res.data) {
+            netEcharts.title = `${val.interfaceName}的错误包数量`;
+            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+            netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[2].oneName;
+            netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInErrDiscardsData || [];
+            netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[2].twoName;
+            netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutErrDiscardsData || [];
+            this.$set(this.secondChartList[val.interfaceName].echartList, 2, netEcharts);
+          }
+        });
+      },
+      // 实时流量
+      getNetSpeed(times, val) {
+        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
+        netEcharts.fnEvent = 'getNetSpeed';
+        switchNetSpeed(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
+          if (res && res.data) {
+            netEcharts.title = `${val.interfaceName}的网络速率(bites/sec)`;
+            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+            netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[3].oneName;
+            netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
+            netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
+            netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
+            this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
+        }
+        });
+      },
+      collapseChangeData(valList) {
+        valList && valList.forEach(item => {
+          if (!this.eventDataMap[item]) {
+            this.$modal.loading();
+            this.getNetDiscards(this.currTimeList, {interfaceName: item});
+            this.getNetTotal(this.currTimeList, {interfaceName: item});
+            this.getNetErrDisc(this.currTimeList, {interfaceName: item});
+            this.getNetSpeed(this.currTimeList, {interfaceName: item});
+            setTimeout(() => {
+              if (!this.activeNames.includes(item)) this.activeNames.push(item);
+              this.$modal.closeLoading();
+            },2500);
+          }
+        });
+      },
+      chartFnEvent(valData, fnName, tabName) {
+        console.log('ccccc===',fnName,'vvv==', typeof this[fnName] === 'function');
+        this.firstChartTrans = valData;
+        // 检查函数是否存在，避免报错
+        if (typeof this[fnName] === 'function') {
+          // 调用实际函数，并传递参数（如选中的值、当前项）
+          this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, {interfaceName: tabName});
+        } else {
+          console.warn(`函数 ${fnName} 未定义`);
+        }
+      },
+      goBack() {
+        this.$router.push("/resource/switchRegister");
       }
     }
+  }
 </script>
 
 <style scoped>
diff --git a/src/views/resource/switchRegister/secondAutoFind.vue b/src/views/resource/switchRegister/secondAutoFind.vue
index ffdccc6..f55de58 100644
--- a/src/views/resource/switchRegister/secondAutoFind.vue
+++ b/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} 未定义`);
+        // }
       }
     }
   }
diff --git a/src/views/resource/topology/details.vue b/src/views/resource/topology/details.vue
index 19b5531..297c6ac 100644
--- a/src/views/resource/topology/details.vue
+++ b/src/views/resource/topology/details.vue
@@ -41,9 +41,9 @@
           config: {title: '基本信息',labelWidth: '140px'},
           controls: {
             id: {label: 'ID',hidden: true},
-            switchName: {label: '交换机名称', span: 12, type: 'select', eventName: 'change', options:[], rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
-            interfaceName: {label: '接口名称', span: 12, type: 'select', options:[]},
-            connectedDeviceType: {label: '接口连接设备类型', span: 12, type: 'radio', options:this.dict.type.rm_topology_type},
+            switchName: {label: '交换机名称', span: 12, type: 'select', eventName: 'change', options:[], required: true},
+            interfaceName: {label: '接口名称', span: 12, type: 'select', options:[],required: true},
+            connectedDeviceType: {label: '接口连接设备类型', span: 12, type: 'radio', options:this.dict.type.rm_topology_type, required: true},
             serverClientId: {label: '服务器ClientID', span: 12, eventName: 'change', options:[], type: 'select'},
             serverPort: {label: '服务器网口', span: 12, options:[], type: 'select'},
           }