图形分析接收接口数据修改、资源监控开发、告警管理开发、首页图形拖拽

2025-09-10 18:12:14 +08:00
parent 9468268136
commit 30e80bb06c
15 changed files with 1101 additions and 151 deletions
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -141,6 +141,7 @@ aside {
 .app-container {
  height: calc(100vh - 132px);
  padding: 8px 20px 20px;
+  overflow: scroll;
 }
 .app-viewContent {
  height: calc(100vh - 85px);
--- a/src/components/echartsList/bar.vue
+++ b/src/components/echartsList/bar.vue
@@ -136,7 +136,7 @@
          // })
        },

-        dataChangeValue(val, days, timeArr) {
+        dataChangeValue(val, timeArr, iconVal) {
          if (timeArr) {
            this.chartData(timeArr);
          }
--- a/src/components/echartsList/dateTimeSelect.vue
+++ b/src/components/echartsList/dateTimeSelect.vue
@@ -1,5 +1,17 @@
 <template>
    <div class="ultabs" :style="{'margin-top': dateShowType && (dateShowType === 'day' ||  dateShowType === 'month') ? '35px' : '10px'}">
+      <div v-if="sideIcon" style="display: inline-block;padding-left: 1px;float: right;">
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link">
+            <i style="font-size: 1.5rem;margin-top: 5px;" class="el-icon-s-tools"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-for="item of sideIcon && sideIcon.iconName" class="clearfix">
+              <div @click="onChange(item)">{{item.name}}</div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
      <ul style="display: inline-block;padding-left: 1px;vertical-align: middle;margin:0;float: right;">
        <template v-if="dateShowType === 'day'">
          <li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
@@ -32,6 +44,10 @@
        dateShowType: {
          type: String,
          default: null
+        },
+        sideIcon: {
+          type: Object,
+          default: () => {}
        }
      },
      data() {
@@ -63,7 +79,7 @@
        },
        // 时间选择器
        dateChange() {
-          this.$emit("dataChange", this.isActive, [], this.dateRange);
+          this.$emit("dataChange", this.isActive, this.dateRange);
          // this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
        },
        // 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
@@ -83,7 +99,7 @@
            dayList.push(`${year}-${month}-${day}`);
          }
          let timeArr = [dayList[0], dayList[dayList.length - 1]];
-          this.$emit("dataChange", this.isActive, [], timeArr);
+          this.$emit("dataChange", this.isActive, timeArr);
          // this.$emit("dataChange", this.isActive, dayList);
        },
        // 获取前一个月的所有日期
@@ -123,7 +139,7 @@
            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);
          // this.$emit("dataChange", this.isActive, oneMonthDays);
        },
        // 获取前三个月的月
@@ -147,9 +163,12 @@
            threeMonths.unshift(`${targetYear}-${monthStr}`);
          }
          let timeArr = [threeMonths[0], threeMonths[threeMonths.length - 1]];
-          this.$emit("dataChange", this.isActive, [], timeArr);
+          this.$emit("dataChange", this.isActive, timeArr);
          // this.$emit("dataChange", this.isActive, threeMonths);
        },
+        onChange(val){
+          this.$emit("dataChange", null, null, val);
+        },
      }
    }
 </script>
--- a/src/components/echartsList/line.vue
+++ b/src/components/echartsList/line.vue
@@ -1,6 +1,6 @@
 <template>
    <div>
-        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
+        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
        <div :id="`lineChart` + num" style="width:100%;height: 100%;" />
    </div>
 </template>
@@ -28,6 +28,10 @@
          type: Function,
          default: () => {
          }
+        },
+        sideIcon: {
+          type: Object,
+          default: () => {}
        }
      },
      watch: {
@@ -58,7 +62,7 @@
      methods: {
        getList(title, dataXY) {
          const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num));
-          let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center'};
+          let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center',textStyle: {fontSize: 16}};
          if (dataXY && dataXY.titleVal) {
            titleList = Object.assign({},titleList, dataXY.titleVal);
          }
@@ -125,11 +129,14 @@
          //   lineDataListIntance.resize()
          // })
        },
-        dataChangeValue(val, days, timeArr) {
+        dataChangeValue(val, timeArr, iconVal) {
          // 调用父级页面传过来的事件，在父级中处理该方法的逻辑--
          if (timeArr) {
            this.chartData(timeArr);
          }
+          if (iconVal) {
+            this.chartData({iconVal: iconVal})
+          }
          // let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
          // this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
        }
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -380,7 +380,50 @@ export const dynamicRoutes = [
        path: 'index/:id?',
        component: () => import('@/views/disRevenue/resource/resMonitor/details'),
        name: 'resMonitorEdit',
-        meta: { title: '资源监控策略信息', activeMenu: '/disRevenue/resource/resMonitor' }
+        meta: { title: '资源监控信息', activeMenu: '/disRevenue/resource/resMonitor' }
+      }
+    ]
+  },
+  {
+    path: '/disRevenue/resource/resMonitor/digitalSuper',
+    component: Layout,
+    hidden: true,
+    permissions: ['disRevenue:resource:resMonitor:digitalSuper'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/disRevenue/resource/resMonitor/digitalSuper'),
+        name: 'resMonitorDigitalSuper',
+        meta: { title: '数字监控项信息', activeMenu: '/disRevenue/resource/resMonitor' }
+      }
+    ]
+  },
+  {
+    path: '/disRevenue/resource/resMonitor/digitalAutoFind',
+    component: Layout,
+    hidden: true,
+    permissions: ['disRevenue:resource:resMonitor:digitalAutoFind'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/disRevenue/resource/resMonitor/digitalAutoFind'),
+        name: 'resMonitorDigitalAutoFind',
+        meta: { title: '数字监控项信息', activeMenu: '/disRevenue/resource/resMonitor' }
+      }
+    ]
+  },
+  // 告警管理
+  {
+    path: '/disRevenue/resource/alarmManage/details',
+    component: Layout,
+    hidden: true,
+    permissions: ['disRevenue:resource:alarmManage:details'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/disRevenue/resource/alarmManage/alarmManageDetails'),
+        name: 'alarmManageDetails',
+        meta: { title: '告警管理信息', activeMenu: '/disRevenue/resource/alarmManage' }
      }
    ]
  },
--- a/src/views/disRevenue/earnManage/server/dialogView.vue
+++ b/src/views/disRevenue/earnManage/server/dialogView.vue
@@ -169,10 +169,12 @@
      // 95带宽值Mbps/日---图表
      graDailyList(timeArr){
        graDaily(Object.assign({} ,this.paramsVal, timeArr)).then(res => {
-          if (res && res.data && res.data.resultData) {
-            let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graDailyList'},res.data, this.typeObj[1]);
-            this.$set(this.echartListData, 0, dataList);
-            this.$set(this.disabledList, 0, dataList);
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach((item, index) => {
+              let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graDailyList'},item, this.typeObj[1]);
+              this.$set(this.echartListData, index * 7, dataList);
+              this.$set(this.disabledList, index * 7, dataList);
+            });
            this.disabledList[1] = {disabled: false};
          } else {
            this.disabledList[1] = {disabled: true};
@@ -183,9 +185,13 @@
      // 95带宽值Mbps/月---图表
      graMonthlyList(timeArr){
        graMonthly(Object.assign({resourceType: 1, bandwidthType: 2}, this.paramsVal, timeArr)).then(res => {
-          if (res && res.data && res.data.resultData) {
-            let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graMonthlyList'},res.data, this.typeObj[2]);
-            this.$set(this.echartListData, 1, dataList);
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach((item, index) => {
+              let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graMonthlyList'},item, this.typeObj[2]);
+              this.$set(this.echartListData, index * 7 + 1, dataList);
+            });
+            // let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graMonthlyList'},res.data, this.typeObj[2]);
+            // this.$set(this.echartListData, 1, dataList);
          } else {
            this.$set(this.echartListData, 1, {});
          }
@@ -194,9 +200,13 @@
      // 包端图表
      graPackageList(timeArr){
        graPackage(Object.assign({resourceType: 1, bandwidthType: 3}, this.paramsVal, timeArr)).then(res => {
-          if (res && res.data && res.data.resultData) {
-            let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graPackageList'},res.data, this.typeObj[3]);
-            this.$set(this.echartListData, 2, dataList);
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach((item, index) => {
+              let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graPackageList'}, item, this.typeObj[3]);
+              this.$set(this.echartListData, index * 7 + 2, dataList);
+            });
+            // let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graPackageList'},res.data, this.typeObj[3]);
+            // this.$set(this.echartListData, 2, dataList);
          } else {
            this.$set(this.echartListData, 2, {});
          }
@@ -205,9 +215,13 @@
      // 月均日95值Mbps---图表
      graAvgMonthlyList(timeArr){
        graAvgMonthly(Object.assign({}, this.paramsVal, timeArr)).then(res => {
-          if (res && res.data && res.data.resultData) {
-            let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graAvgMonthlyList'},res.data, this.typeObj[4]);
-            this.$set(this.echartListData, 3, dataList);
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach((item, index) => {
+              let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graAvgMonthlyList'}, item, this.typeObj[4]);
+              this.$set(this.echartListData, index * 7 + 3, dataList);
+            });
+            // let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graAvgMonthlyList'},res.data, this.typeObj[4]);
+            // this.$set(this.echartListData, 3, dataList);
          } else {
            this.$set(this.echartListData, 3, {});
          }
@@ -216,9 +230,13 @@
      // 有效-95带宽值Mbps/日---图表
      graEffectiveDailyList(timeArr){
        graEffectiveDaily(Object.assign({}, this.paramsVal, timeArr)).then(res => {
-          if (res && res.data && res.data.resultData) {
-            let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graEffectiveDailyList'},res.data, this.typeObj[5]);
-            this.$set(this.echartListData, 4, dataList);
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach((item, index) => {
+              let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graEffectiveDailyList'}, item, this.typeObj[5]);
+              this.$set(this.echartListData, index * 7 + 4, dataList);
+            });
+            // let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graEffectiveDailyList'},res.data, this.typeObj[5]);
+            // this.$set(this.echartListData, 4, dataList);
          } else {
            this.$set(this.echartListData, 4, {});
          }
@@ -227,9 +245,13 @@
      // 有效-95带宽值Mbps/月----图表
      graEffectiveMonthlyList(timeArr){
        graEffectiveMonthly(Object.assign({}, this.paramsVal, timeArr)).then(res => {
-          if (res && res.data && res.data.resultData) {
-            let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graEffectiveMonthlyList'},res.data, this.typeObj[6]);
-            this.$set(this.echartListData, 5, dataList);
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach((item, index) => {
+              let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graEffectiveMonthlyList'}, item, this.typeObj[6]);
+              this.$set(this.echartListData, index * 7 + 5, dataList);
+            });
+            // let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graEffectiveMonthlyList'},res.data, this.typeObj[6]);
+            // this.$set(this.echartListData, 5, dataList);
          } else {
            this.$set(this.echartListData, 5, {});
          }
@@ -238,9 +260,13 @@
      // 有效-月均日95值Mbps----图表
      graEffectiveAvgMonthlyList(timeArr){
        graEffectiveAvgMonthly(Object.assign({}, this.paramsVal, timeArr)).then(res => {
-          if (res && res.data && res.data.resultData) {
-            let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graEffectiveAvgMonthlyList'},res.data, this.typeObj[7]);
-            this.$set(this.echartListData, 6, dataList);
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach((item, index) => {
+              let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graEffectiveAvgMonthlyList'}, item, this.typeObj[7]);
+              this.$set(this.echartListData, index * 7 + 6, dataList);
+            });
+            // let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graEffectiveAvgMonthlyList'},res.data, this.typeObj[7]);
+            // this.$set(this.echartListData, 6, dataList);
          } else {
            this.$set(this.echartListData, 6, {});
          }
--- a/src/views/disRevenue/earnManage/switch/index.vue
+++ b/src/views/disRevenue/earnManage/switch/index.vue
@@ -202,11 +202,11 @@
              slotHeaderName: '不同的类型统计方式不一样，当类型是服务器时，使用的是接口的接收流量，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的接收流量；当类型是机房出口的时候，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的发送流量', visible: true },
            businessId: {label: `业务代码`,minWidth: '150'},
            businessName: {label: `业务名称`,minWidth: '100'},
-            bandwidth95Daily: { label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
-            bandwidth95Monthly: { label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true },
            nodeName: { label: `服务器节点名称`, minWidth: '200'},
+            bandwidth95Daily: { label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
+            effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
+            bandwidth95Monthly: { label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true },
            avgMonthlyBandwidth95: {label: `月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
-            effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay'},
            effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth',},
            effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
            createTime: { label: `创建时间`, minWidth: '160'},
--- a/src/views/disRevenue/resource/alarmLog/alarmLog.vue
+++ b/src/views/disRevenue/resource/alarmLog/alarmLog.vue
@@ -0,0 +1,170 @@
+<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="switchName">
+          <el-input
+            v-model="queryParams.switchName"
+            placeholder="请输入告警关键字"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="资源名称" prop="bandwidthType">
+          <el-select
+            v-model="queryParams.bandwidthType"
+            placeholder="请选择资源名称"
+            clearable>
+            <el-option
+              v-for="dict in dict.type.eps_bandwidth_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="状态" prop="type">
+          <el-select
+            v-model="queryParams.bandwidthType"
+            placeholder="请选择状态"
+            clearable>
+            <el-option
+              v-for="dict in dict.type.eps_bandwidth_type"
+              :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.rm_topology_type" :value="row.connectedDeviceType"/>
+      </template>
+    </TableList>
+  </div>
+</template>
+
+<script setup>
+  import TableList from "@/components/table/index.vue"
+  import {listMonitorTemp, delMonitorTemp} from "@/api/disRevenue/resource"
+  export default {
+    name: 'AlarmLog',
+    components: {TableList},
+    dicts: ['rm_topology_type','eps_bandwidth_type'],
+    data() {
+      return {
+        loading: true,
+        showSearch: true,
+        tableList: [],
+        queryParams: {
+          total: 0,
+          pageNum: 1,
+          pageSize: 10
+        },
+        // 列显隐信息
+        columns: {
+          id: { label: `ID`,width: '50'},
+          switchName: { label: `资源名称`, minWidth: '250', visible: true },
+          switchSn: { label: `源IP`,minWidth: '200',visible: false},
+          createTime: { label: `发生时间`,minWidth: '160'},
+          interfaceName: { label: `内容`,minWidth: '250', visible: true },
+          serverName: { label: `状态`,minWidth: '100',visible: true },
+        },
+        config: {
+          tableButton: {
+            top: [
+              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:alarmManage:export'},
+            ],
+            line: [
+              {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:alarmManage:details'},
+              {content: '处理', fnCode: 'handle', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:alarmManage:handle'},
+            ]
+          }
+        }
+      }
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询列表 */
+      getList() {
+        this.loading = true;
+        listMonitorTemp(this.queryParams).then(response => {
+          this.tableList = response.rows;
+          this.queryParams.total = response.total;
+          this.loading = false;
+        })
+      },
+      // 处理子组件传递的新值
+      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) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'details':
+              // this.$router.push({
+              //   path:'/disRevenue/resource/alarmManage/details',
+              //   query:{
+              //     id: rowData.id
+              //   }
+              // });
+              break;
+            case 'handle':
+              break;
+            case 'delete':
+              this.$modal.confirm('是否确认删除数据项？').then(function() {
+                return delMonitorTemp(selectChange)
+              }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功")
+              }).catch(() => {});
+              break;
+            case 'export':
+              // let dataList = [];
+              // Object.keys(this.columns).forEach(item => {
+              //   if (item.visible) {
+              //     dataList.push(item.prop);
+              //   }
+              // });
+              // this.download("/system/alarmManage/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
+              let paramsList = Object.assign({}, this.queryParams,rowData);
+              this.download("system/alarmManage/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>
--- a/src/views/disRevenue/resource/alarmManage/alarmManage.vue
+++ b/src/views/disRevenue/resource/alarmManage/alarmManage.vue
@@ -0,0 +1,178 @@
+<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="switchName">
+          <el-input
+            v-model="queryParams.switchName"
+            placeholder="请输入模版名称/资源组名/监控模版名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="策略状态" prop="bandwidthType">
+          <el-select
+            v-model="queryParams.bandwidthType"
+            placeholder="请选择策略状态"
+            clearable>
+            <el-option
+              v-for="dict in dict.type.eps_bandwidth_type"
+              :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.rm_topology_type" :value="row.connectedDeviceType"/>
+      </template>
+    </TableList>
+  </div>
+</template>
+
+<script setup>
+  import TableList from "@/components/table/index.vue"
+  import {listMonitorTemp, delMonitorTemp} from "@/api/disRevenue/resource"
+  export default {
+    name: 'AlarmManage',
+    components: {TableList},
+    dicts: ['rm_topology_type','eps_bandwidth_type'],
+    data() {
+      return {
+        loading: true,
+        showSearch: true,
+        tableList: [],
+        queryParams: {
+          total: 0,
+          pageNum: 1,
+          pageSize: 10
+        },
+        // 列显隐信息
+        columns: {
+          id: { label: `ID`,width: '50'},
+          switchName: { label: `策略名称`, minWidth: '250', visible: true },
+          switchSn: { label: `描述`,minWidth: '200',visible: false},
+          interfaceName: { label: `监关联资源组控项`,minWidth: '150', visible: true },
+          serverName: { label: `包含设备`,minWidth: '200'},
+          connectedDeviceType: { label: `关联监控模版`,minWidth: '150', visible: true },
+          connected: { label: `策略内容`,minWidth: '200'},
+          type: { label: `策略状态`, minWidth: '100', visible: true },
+          conType: { label: `下发策略时间`,minWidth: '160'},
+          createTime: { label: `创建时间`,minWidth: '160'},
+          updateTime:{ label: `修改时间`,minWidth: '160'}
+        },
+        config: {
+          searcherForm: [
+            {label: '模版名称', prop: 'roleName', type: 'selset', options: []}
+          ],
+          tableButton: {
+            top: [
+              {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'disRevenue:resource:alarmManage:add'},
+              {content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'disRevenue:resource:alarmManage:detele'},
+              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:alarmManage:export'},
+            ],
+            line: [
+              {content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'disRevenue:resource:alarmManage:edit'},
+              {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:alarmManage:details'},
+              {content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:alarmManage:copy'},
+              {content: '下发策略', fnCode: 'strategy', type: 'text', icon: 'el-icon-sort-down', hasPermi: 'disRevenue:resource:alarmManage:strategy'},
+            ]
+          }
+        }
+      }
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询列表 */
+      getList() {
+        this.loading = true;
+        listMonitorTemp(this.queryParams).then(response => {
+          this.tableList = response.rows;
+          this.queryParams.total = response.total;
+          this.loading = false;
+        })
+      },
+      // 处理子组件传递的新值
+      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) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'add':
+              this.$router.push({
+                path:'/disRevenue/resource/alarmManage/details'});
+              break;
+            case 'edit':
+              this.$router.push({
+                path:'/disRevenue/resource/alarmManage/details',
+                query:{
+                  id: rowData.id
+                }
+              });
+              break;
+            case 'details':
+              // this.$router.push({
+              //   path:'/disRevenue/resource/alarmManage/view/index',
+              //   query:{
+              //     id: rowData.id
+              //   }
+              // });
+              break;
+            case 'delete':
+              this.$modal.confirm('是否确认删除数据项？').then(function() {
+                return delMonitorTemp(selectChange)
+              }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功")
+              }).catch(() => {});
+              break;
+            case 'export':
+              // let dataList = [];
+              // Object.keys(this.columns).forEach(item => {
+              //   if (item.visible) {
+              //     dataList.push(item.prop);
+              //   }
+              // });
+              // this.download("/system/alarmManage/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
+              let paramsList = Object.assign({}, this.queryParams,rowData);
+              this.download("system/alarmManage/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>
--- a/src/views/disRevenue/resource/alarmManage/alarmManageDetails.vue
+++ b/src/views/disRevenue/resource/alarmManage/alarmManageDetails.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="app-container">
+    <div>
+      <el-steps :active="active" finish-status="success">
+        <el-step title="基本信息"></el-step>
+        <el-step title="监控信息"></el-step>
+        <el-step title="信息确认"></el-step>
+      </el-steps>
+      <!--    内容区   -->
+      <div style="margin-top: 30px;">
+        <!--    active:0    -->
+        <div v-show="active === 0">
+          <Form ref="formRef" style="text-align: center;" :formList="formList" :ruleFormData="ruleFormData" :config="config" @fnClick="callback"></Form>
+        </div>
+        <!--    active:2    -->
+        <div v-show="active === 1">
+          <el-tabs type="border-card">
+            <!--    2-1    -->
+            <el-tab-pane v-if="ruleFormData.monitorTemp === 1" label="Linux系统">
+              <el-tabs v-model="linuxActiveName">
+                <!--    2-1-1    -->
+                <el-tab-pane label="监控项" name="first">
+                  <el-collapse v-model="activeNames">
+                    <el-collapse-item v-for="(item,index) of linuxSystem.monitorList" :title="item.title" :name="index">
+                      <template v-if="item.modelName === 'other'">
+                        <div class="plr-50">
+                          <div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
+                            <div class="disInlineBlock w45">
+                              <span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
+                              <span>{{city.towName}}</span>
+                            </div>
+                            <div class="disInlineBlock" style="color: #606266">
+                              采集周期：<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
+                              <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
+                            </el-select>
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <template slot="title">
+                          {{item.title}}
+                          <div style="font-size: 13px;margin-left: 15%;">
+                            采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
+                            <el-option v-for="val in option" :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="w45 mt10 mb10 disInlineBlock fontSize15">
+                            <span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
+                            <span>{{city.towName}}</span>
+                          </div>
+                        </div>
+                      </template>
+                    </el-collapse-item>
+                  </el-collapse>
+                </el-tab-pane>
+                <!--    2-1-2    -->
+                <el-tab-pane label="自动发现项" name="second">
+                  <el-collapse v-model="activeNames">
+                    <el-collapse-item v-for="(item,index) of linuxSystem.autoFindList" :title="item.title" :name="index">
+                      <template slot="title">
+                        {{item.title}}
+                        <div style="font-size: 13px;margin-left: 15%;">
+                          采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
+                          <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
+                        </el-select>
+                        </div>
+                      </template>
+                      <div style="display: flex;justify-content: center;">
+                        <div class="plr-50">
+                          <div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
+                            <span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
+                            <span>{{city.towName}}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </el-collapse-item>
+                  </el-collapse>
+                </el-tab-pane>
+              </el-tabs>
+            </el-tab-pane>
+            <!--    2-2    -->
+            <el-tab-pane v-if="ruleFormData.monitorTemp === 2" label="华为交换机">
+              <span slot="label">
+                华为交换机
+                <el-tooltip trigger="click" effect="dark" placement="top">
+                  <template #content>针对CloudEngine 58&68&78&88&98系列</template>
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </span>
+              <el-tabs v-model="hwActiveName">
+                <!--    2-2-1    -->
+                <el-tab-pane label="监控项" name="first">
+                  <template v-for="(item,index) of monitorTable['nodeOne']">
+                    <div class="plr-50">
+                      <div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
+                        <div class="disInlineBlock w45">
+                          <span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
+                          <span>{{city.towName}}</span>
+                        </div>
+                        <div class="disInlineBlock" style="color: #606266">
+                          采集周期：<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
+                          <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
+                        </el-select>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </el-tab-pane>
+                <!--    2-2-2    -->
+                <el-tab-pane label="自动发现项" name="second">
+                  <el-collapse v-model="activeNames">
+                    <el-collapse-item v-for="(item,index) of monitorTable['nodeTow']" :title="item.title" :name="index">
+                      <template slot="title">
+                        {{item.title}}
+                        <div style="font-size: 13px;margin-left: 15%;">
+                          采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
+                          <el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
+                        </el-select>
+                        </div>
+                      </template>
+                      <div style="display: flex;justify-content: center;">
+                        <div class="plr-50">
+                          <div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
+                            <span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
+                            <span>{{city.towName}}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </el-collapse-item>
+                  </el-collapse>
+                </el-tab-pane>
+              </el-tabs>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <!--    active:3    -->
+        <div v-show="active === 2">
+<!--          <MonitorStategyView :ruleForm="ruleFormData" :otherList="synthesisList"></MonitorStategyView>-->
+        </div>
+      </div>
+    </div>
+    <el-button type="primary" v-show="active > 1" style="float: right;margin-top: 12px;margin-left: 10px;" @click="submit">提交</el-button>
+    <el-button type="primary" v-show="active < 2" style="float: right;margin-top: 12px;" @click="next('1')">下一步</el-button>
+    <el-button type="primary" v-show="active > 0" style="float: right;margin-top: 12px;" @click="next('-1')">上一步</el-button>
+    <el-button type="primary" style="float: right;margin-top: 12px;" @click="goBack">返回</el-button>
+  </div>
+</template>
+
+<script setup>
+  import Form from '@/components/form/index.vue';
+  import TableList from "@/components/table/index.vue"
+  // import MonitorStategyView from './view'
+  export default {
+    name: 'AlarmManageDetails',
+    components: {Form, TableList},
+    data() {
+      return {
+        active: 0,
+        activeNames: [0, 1],
+        linuxActiveName: 'first',
+        hwActiveName: 'first',
+        checkAllParams: {},
+        checkParams: {week: '',cpu: [], other: [], mount: [], netPort:[]},
+        allSelectedData: {},
+        synthesisList: {},
+        // 第一节点
+        ruleFormData: {
+          monitorTemp: 2,
+        },
+        config: {
+          buttonGroup: []
+        },
+        formList: [{
+          config: {title: ''},
+          controls: {
+            id: {label: 'ID',hidden: true},
+            switchName: {label: '策略名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
+            serverPort: {label: '描述', span: 12, type: 'textarea', style: 'display: block;margin: 0 auto;'},
+            // monitorTemp: {label: '关联监控模版', span: 12, type: 'select', style: 'display: block;margin: 0 auto;'},
+            resourceGroup: {label: '关联资源组', span: 12, type: 'select'}
+          }
+        }],
+        // 第二节点 1栏
+        option: [{label: '60min', value: '60'},{label: '15min', value: '15'}],
+        linuxSystem: {
+          monitorList: [{
+            firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '',
+            checkList: [
+              {id: '1', name: 'system.cpu.load.avg1', towName: 'CPU的1分钟负载'},
+              {id: '2', name: 'system.cpu.util.normal', towName: 'CPU正常运行时间'},
+              {id: '3', name: 'system.cpu.load.avg5', towName: 'CPU的5分钟负载'},
+              {id: '4', name: 'system.cpu.utilee.idle', towName: 'CPU空闲时间'},
+              {id: '5', name: 'system.cpu.load.avg15', towName: 'CPU的15分钟负载'},
+            ]
+          },{
+            firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other',
+            checkList: [
+              {id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间（字节）',time: ''},
+              {id: '7', name: 'proc.num.run', towName: '正在运行的进程数',time: ''},
+              {id: '8', name: 'memory.utilization', towName: '内存利用率',time: ''},
+              {id: '9', name: 'system.users.num', towName: '登录用户数',time: ''},
+              {id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比',time: ''},
+            ]
+          }],
+          autoFindList: [{
+            firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现挂载文件系统', modelName: 'mount', time: '',
+            checkList: [
+              {id: '1', name: 'vfs.fs.type', towName: '某个挂载点（如/）的文件系统类型'},
+              {id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点（如/）的可用空间'},
+              {id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点（如/）的总空间'},
+              {id: '4', name: 'vfs.fs.util', towName: '某个挂载点（如/）的空间利用率'},
+            ]},{
+            firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现网络接口', modelName: 'netPort', time: '',
+            checkList: [
+              {id: '1', name: 'net.if.in.dropped', towName: '某个网络接口（如interface eth0）的入站丢包'},
+              {id: '2', name: 'net.if.out.dropped', towName: '某个网络接口（如interface eth0）的出站丢包'},
+              {id: '3', name: 'net.if.out', towName: '某个网络接口（如interface eth0）的发送流量'},
+              {id: '4', name: 'net.if.out.type', towName: '某个网络接口（如interface eth0）的接口类型'},
+              {id: '5', name: 'net.if.in', towName: '某个网络接口（如interface eth0）的接收流量'}
+            ]
+          }],
+        },
+        // 第二节点 2栏 列显隐信息
+        monitorTable: {
+          nodeOne: [{
+            firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'other',
+            checkList: [
+              {id: '1', name: 'net.if.in.dropped', towName: '某个网络接口（如interface eth0）的入站丢包',time: ''},
+              {id: '2', name: 'net.if.out.dropped', towName: '某个网络接口（如interface eth0）的出站丢包',time: ''},
+              {id: '3', name: 'net.if.out', towName: '某个网络接口（如interface eth0）的发送流量',time: ''},
+              {id: '4', name: 'net.if.out.type', towName: '某个网络接口（如interface eth0）的接口类型',time: ''},
+              {id: '5', name: 'net.if.in', towName: '某个网络接口（如interface eth0）的接收流量',time: ''}
+            ]
+          }],
+          nodeTow: [
+            {
+              firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', modelName: 'server', time: '',
+              checkList: [
+                {id: '1', name: 'vfs.fs.type', towName: '某个挂载点（如/）的文件系统类型'},
+                {id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点（如/）的可用空间'},
+                {id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点（如/）的总空间'},
+                {id: '4', name: 'vfs.fs.util', towName: '某个挂载点（如/）的空间利用率'},
+              ]
+            },
+            {
+              firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现', modelName: 'light', time: '',
+              checkList: [
+                {id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间（字节）'},
+                {id: '7', name: 'proc.num.run', towName: '正在运行的进程数'},
+                {id: '8', name: 'memory.utilization', towName: '内存利用率'},
+                {id: '9', name: 'system.users.num', towName: '登录用户数'},
+                {id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比'},
+              ]
+            },
+          ]},
+      }
+    },
+    created() {},
+    methods: {
+      async next(num) {
+        if (num === '-1') {
+          this.active--;
+        } else {
+          if (this.active === 0) {
+            if (!await this.fnFormValid()) {
+              return;
+            } else {
+              this.dataProcess();
+            }
+          }
+          if (this.active === 1) {
+            this.selectAllChange();
+          }
+          this.active++;
+        }
+      },
+      // 数据处理
+      dataProcess() {
+        let typeVal = {};
+        if (this.ruleFormData && this.ruleFormData['monitorTemp'] === 1) {
+          typeVal = this.linuxSystem;
+        } else {
+          typeVal = this.monitorTable;
+        }
+        Object.keys(typeVal).forEach(res => {
+          typeVal[res].forEach(item => {
+            this.checkParams[item.modelName] = [];
+            this.checkAllParams[item.modelName] = {
+              firstTitle: item.firstTitle,
+              secondTitle: item.secondTitle,
+              lastTitle: item.title,
+              data: []
+            };
+          });
+        })
+      },
+      // 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);
+            }
+          });
+        });
+      },
+      // 点击下一步，获取多个table列表中所选中的行数据
+      selectAllChange () {
+        // this.allSelectedData = {};
+        // Object.keys(this.monitorTable).forEach(res => {
+        //   this.monitorTable[res].forEach(item => {
+        //     // 获取子组件的ref（格式：tableRef_${tableKey}）
+        //     const tableRef = this.$refs[`tableRef_${item.config.tableKey}`];
+        //     if (tableRef && tableRef.length && tableRef[0].ids.length) {
+        //       // 调用子组件的方法获取选中数据
+        //       const selectedData = tableRef[0].getSelectedData();
+        //       // firstTitle: '华为交换机', secondTitle: '监控项',
+        //       selectedData['firstTitle'] = item.firstTitle;
+        //       selectedData['secondTitle'] = item.secondTitle;
+        //       selectedData['lastTitle'] = item.title;
+        //       this.allSelectedData[selectedData.tableKey] = selectedData;
+        //     }
+        //   });
+        // });
+        this.lastStepView();
+      },
+      // 最后一步展示
+      lastStepView() {
+        this.synthesisList = Object.assign({}, this.checkAllParams);
+      },
+      // 单个选择按钮
+      handleCheckedCitiesChange(changeVal,iteListAll) {
+        if (iteListAll && iteListAll.time) {
+          this.checkAllParams[iteListAll.modelName].time = iteListAll && iteListAll.time;
+        }
+        this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'];
+      },
+      // 提交
+      submit() {
+        console.log('ruleFormData==',this.ruleFormData);
+        console.log('synthesisList==',this.synthesisList);
+      },
+      // 返回
+      goBack() {
+        this.$router.push({path:'/resource/monitorStategy'});
+      },
+      // 监听事件
+      callback(result, dataVal, formVal) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'submit':
+              console.log('dataVal===',dataVal);
+              break;
+            default:
+          }
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
+</style>
--- a/src/views/disRevenue/resource/resMonitor/details.vue
+++ b/src/views/disRevenue/resource/resMonitor/details.vue
@@ -6,16 +6,7 @@
        <ResMonitorDigitalSuper></ResMonitorDigitalSuper>
      </el-tab-pane>
      <el-tab-pane label="自动发现项" name="second">
-        <el-collapse v-model="activeNames">
-          <el-collapse-item v-for="(val,index) of linuxSystem" :title="val.title" :name="index">
-            <div class="mt10 w100">
-              <Form :formList="val.formList" :ruleFormData="val.formModel" :config="val.config" @fnClick="callback"></Form>
-              <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"></EchartsLine>
-              </div>
-            </div>
-          </el-collapse-item>
-        </el-collapse>
+        <ResMonitorDigitalAutoFind v-if="activeName === 'second'"></ResMonitorDigitalAutoFind>
      </el-tab-pane>
      <el-tab-pane label="告警信息" name="third">
        <TableList style="height: 500px" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="columns" :queryParams="queryParams" :tableList="tableList" @fnRenderList="getList"></TableList>
@@ -31,9 +22,10 @@
  import {listAllResourList, listTopology} from "@/api/disRevenue/resource"
  import EchartsLine from "@/components/echartsList/line.vue";
  import ResMonitorDigitalSuper from "./digitalSuper";
+  import ResMonitorDigitalAutoFind from "./digitalAutoFind";
  export default {
    name: 'ResMonitorDetails',
-    components: {Form, TableList, EchartsLine, ResMonitorDigitalSuper},
+    components: {Form, TableList, EchartsLine, ResMonitorDigitalSuper, ResMonitorDigitalAutoFind},
    dicts: ['rm_topology_type', 'rm_register_online_state', 'rm_register_resource_type'],
    data() {
      return {
@@ -43,7 +35,6 @@
        formListTow: [],
        paramsData: {},
        activeName: 'first',
-        activeNames: [0, 1],
        linuxSystem: [],
        columns: {
          id: { label: `ID`, width: '50', visible: false },
@@ -68,7 +59,7 @@
    methods: {
      handleClick(tab, event) {
        if (tab && tab.index === '1') {
-          this.secondList();
+          // this.secondList();
        } else if (tab && tab.index === '2') {
          this.getList();
        }
@@ -137,89 +128,6 @@
          });
        });
      },
-      // 第二节点 自动发现项
-      secondList(){
-        this.linuxSystem = [{
-          title: '网络端口GE1/0/1',
-          formList: [{
-            controls: {
-              id: {label: 'ID',hidden: true},
-              hardwareSn: {label: '端口名称', span: 12, type: 'input',disabled: true},
-              resourceType: {label: '端口类型', span: 12, type: 'input',disabled: true},
-              resourceName: {label: '端口状态', span: 12, type: 'input', disabled: true},
-              ipAddress: {label: '端口适配速率(Mbps)', span: 12, type: 'input',disabled: true}
-            }
-          }],
-          formModel: {},
-          config: {labelWidth: '160px', buttonGroup: []},
-          echartList: [{
-            title: '设备CPU使用率(%)',
-            dataVal: {
-              titleVal: {textAlign: 'left', left: '1%'},
-              gridTop: '30%',
-              legend: {top: '5%', left: 'center'},
-              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: '30%',
-              legend: {top: '5%', left: 'center'},
-              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: '光模块sabc',
-          formList: [{
-            controls: {
-              id: {label: 'ID',hidden: true},
-              hardwareSn: {label: '光模块端口名称', span: 12, type: 'input',disabled: true}
-            }
-          }],
-          formModel: {},
-          config: {buttonGroup: []},
-          echartList: [{
-            title: '设备CPU使用率(%)',
-            dataVal: {
-              titleVal: {textAlign: 'left', left: '1%'},
-              gridTop: '30%',
-              legend: {top: '5%', left: 'center'},
-              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: '30%',
-              legend: {top: '5%', left: 'center'},
-              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]
-              }]
-            }
-          }]
-        }];
-      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
@@ -263,11 +171,3 @@
    }
  }
 </script>
-<style scoped>
-  ::v-deep .el-collapse-item__header {
-    background-color: #d4e3fc!important;
-    /*color: #fff!important;*/
-    padding-left: 20px;
-    font-size: 1rem;
-  }
-</style>
--- a/src/views/disRevenue/resource/resMonitor/digitalAutoFind.vue
+++ b/src/views/disRevenue/resource/resMonitor/digitalAutoFind.vue
@@ -0,0 +1,126 @@
+<template>
+  <div style="padding: 8px 20px 20px;">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item v-for="(val,index) of linuxSystem" :title="val.title" :name="index">
+        <div class="mt10 w100">
+<!--          <Form :formList="val.formList" :ruleFormData="val.formModel" :config="val.config" @fnClick="callback"></Form>-->
+          <div class="w100 plr-20" style="font-size: 14px">
+            <div v-for="item of val.formList" class="w50 disInlineBlock p10">
+              <span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</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" :sideIcon="{iconName: [{name: '添加到首页',type: 'add'}]}" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item)"></EchartsLine>
+          </div>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup>
+  import EchartsLine from "@/components/echartsList/line.vue";
+  export default {
+    name: 'ResMonitorDigitalAutoFind',
+    components: {EchartsLine},
+    data() {
+      return {
+        activeNames: [0, 1],
+        linuxSystem: [],
+      }
+    },
+    created() {
+      // this.$nextTick(() => {
+        this.secondList();
+      // });
+    },
+    methods: {
+      // 第二节点 自动发现项
+      secondList(){
+        this.linuxSystem = [{
+          title: '网络端口GE1/0/1',
+          formList: [
+            {name: '端口名称', value: 'aaa'},
+            {name: '端口类型', value: 'aaa'},
+            {name: '端口状态', value: 'aaa'},
+            {name: '端口适配速率(Mbps)', value: 'aaa'},
+          ],
+          formModel: {},
+          config: {labelWidth: '160px', buttonGroup: []},
+          echartList: [{
+            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: '光模块sabc',
+          formList: [{name: '光模块端口名称', value: 'aaa'}],
+          formModel: {},
+          config: {buttonGroup: []},
+          echartList: [{
+            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]
+              }]
+            }
+          }]
+        }];
+      },
+      chartDataEvent(val, itemVal) {
+        console.log('val===',val);
+      }
+    }
+  }
+</script>
+<style scoped>
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
+</style>
--- a/src/views/disRevenue/resource/resMonitor/digitalSuper.vue
+++ b/src/views/disRevenue/resource/resMonitor/digitalSuper.vue
@@ -1,12 +1,12 @@
 <template>
-    <div>
+    <div style="padding: 8px 20px 20px;">
      <div class="w100 plr-20" style="font-size: 14px">
        <div v-for="item of formListTow" class="w50 disInlineBlock p10">
          <span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</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"></EchartsLine>
+        <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '添加到首页',type: 'add'}]}" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item)"></EchartsLine>
      </div>
    </div>
 </template>
@@ -24,8 +24,8 @@
          title: '设备CPU使用率(%)',
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
-            gridTop: '30%',
-            legend: {top: '5%', left: 'center'},
+            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使用率',
@@ -36,8 +36,8 @@
          title: '设备内存使用率(%)',
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
-            gridTop: '30%',
-            legend: {top: '5%', left: 'center'},
+            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: '设备内存使用率',
@@ -83,6 +83,9 @@
        ];
        this.formListTow = num && num === '1' ? formFirst : formSecond;
      },
+      chartDataEvent(val, itemVal) {
+        console.log('val===1111',val);
+      }
    }
  }
 </script>
--- a/src/views/disRevenue/resource/resMonitor/index.vue
+++ b/src/views/disRevenue/resource/resMonitor/index.vue
@@ -79,7 +79,14 @@
          </el-form>
          <TableList style="height: calc(100vh - 302px);" :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
            <template #tempType="{ row, column }">
-              <dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
+              <div @click="fnDetails(row, '1')">
+                <a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.connectedDeviceType}}</a>
+              </div>
+            </template>
+            <template #tempAuto="{ row, column }">
+              <div @click="fnDetails(row)">
+                <a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.connectedDeviceType}}</a>
+              </div>
            </template>
          </TableList>
        </pane>
@@ -125,7 +132,7 @@
          switchName: { label: `资源名称`, minWidth: '250', visible: true },
          interfaceName: { label: `ip地址`, minWidth: '100', visible: true },
          connectedDeviceType: { label: `监控项`, minWidth: '100', slotName: 'tempType', visible: true },
-          serverName: { label: `自动发现项`, minWidth: '120', visible: true},
+          serverName: { label: `自动发现项`, minWidth: '120', slotName: 'tempAuto', visible: true},
          serverSn: { label: `CPU使用率%`, minWidth: '120', visible: true},
          serverPort: { label: `内存使用率`,minWidth: '120', visible: true }
        },
@@ -213,6 +220,23 @@
          this.loading = false;
        })
      },
+      fnDetails(row,type) {
+        if (type && type === '1') {
+          this.$router.push({
+            path:'/disRevenue/resource/resMonitor/digitalSuper',
+            query:{
+              id: row.id
+            }
+          });
+        } else {
+          this.$router.push({
+            path:'/disRevenue/resource/resMonitor/digitalAutoFind',
+            query:{
+              id: row.id
+            }
+          });
+        }
+      },
      // 处理子组件传递的新值
      handleValueChange(newValue) {
        // 父组件更新自身数据，实现同步
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;">
+  <div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;overflow: scroll;">
    <!--    header -->
    <div class="w100" style="height: 17%;min-height: 110px;">
      <div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"
           style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">
        <div style="font-size: 14px;">{{item.title}}</div>
        <div style="margin: 15px 0 10px;">
-          <div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span>{{item.unit}}</span></div>
+          <div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span style="display: inline-block;margin-left: 5px">{{item.unit}}</span></div>
          <img v-if="item && item.type === 'switch'" src="@/assets/images/switch.png" class="fr" width="100" height="35px" alt="">
          <img v-else src="@/assets/images/line.png" class="fr" width="100"  alt="">
        </div>
@@ -46,10 +46,31 @@
        </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>
 </template>

 <script>
+  import draggable from 'vuedraggable'
  import EchartsPie from "@/components/echartsList/pie.vue"
  import EchartsLine from "@/components/echartsList/line.vue"
  import EchartsBar from "@/components/echartsList/bar.vue"
@@ -59,7 +80,7 @@
  import {countBusiness, sumTrafficByServer, sumTrafficBySwitch, countSwitchNum, serverOnlineRate, countDeviceNumTop5} from "@/api/homeIndex";
 export default {
  name: "Index",
-  components: {EchartsPie, EchartsLine, EchartsBar, TableList},
+  components: {draggable, EchartsPie, EchartsLine, EchartsBar, TableList},
  data() {
    return {
      // 版本号
@@ -132,7 +153,38 @@ export default {
        pageSize: 6,
        total: 0,
        layout: 'pager'
+      },
+      // 拖拽列
+      activeNames: ['1'],
+      dragStatus: '',
+      echartList: [{
+        title: '设备CPU使用率(%)',
+        dataVal: {
+          titleVal: {textAlign: 'left', left: '1%'},
+          gridTop: '30%',
+          legend: {top: '5%', 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: '30%',
+          legend: {top: '5%', 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]
+          }]
+        }
+      }],
    }
  },
  created() {
@@ -183,7 +235,6 @@ export default {
    },
    getCountDeviceNumTop5(){
      countDeviceNumTop5().then(res => {
-        console.log('4444===',res);
        let lineXData = [];
        let dataList = [];
        res && res.data.forEach(item => {
@@ -214,6 +265,19 @@ export default {
      if (num === 2) {
        this.$router.push({path:'/resource/resMonitor'});
      }
+    },
+    // 拖拽开始
+    onDragStart(evt){
+      this.dragStatus = `开始拖拽：从位置 ${evt.oldIndex + 1}`;
+    },
+    // 拖拽结束（获取最新顺序）
+    onDragEnd (evt) {
+      this.dragStatus = `拖拽结束：从位置 ${evt.oldIndex + 1} → 位置 ${evt.newIndex + 1}`;
+      // 此时 items 已自动更新顺序，可直接使用
+      console.log('更新后的列表：', this.items);
+    },
+    chartDataEvent(val, itemVal) {
+      console.log('val===',val);
    }
  }
 }
@@ -228,5 +292,17 @@ export default {
  /*  height: 190px;*/
  /*  overflow-y: scroll;*/
  /*}*/
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
+  ::v-deep .el-collapse-item__wrap {
+    height: 85%;
+  }
+  ::v-deep .el-collapse-item__content {
+    height: 100%;
+  }
 </style>