From 10c4dd9ef0830a228e7f2bd27d9455691adad267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=B7=E5=86=89=E5=86=89?= <kangranran@dingxuantech.cn>
Date: Mon, 17 Nov 2025 18:35:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E5=B9=B6=E8=81=94=E8=B0=83?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/disRevenue/resource.js                |  32 +-
 src/router/index.js                           |  15 +
 .../resource/monitorBoard/dialogMonitor.vue   |  77 +++--
 .../resource/monitorBoard/monitorBoard.vue    | 122 ++++++--
 .../monitorBoard/monitorBoardView.vue         | 274 ++++++++++++++++++
 5 files changed, 476 insertions(+), 44 deletions(-)
 create mode 100644 src/views/resource/monitorBoard/monitorBoardView.vue

diff --git a/src/api/disRevenue/resource.js b/src/api/disRevenue/resource.js
index 35e7f7b..c149699 100644
--- a/src/api/disRevenue/resource.js
+++ b/src/api/disRevenue/resource.js
@@ -1045,6 +1045,13 @@ export function updateMonitorConfig(data) {
     data: data
   })
 }
+// 删除
+export function delMonitorConfig(Ids) {
+  return request({
+    url: '/system/monitorConfig/' + Ids,
+    method: 'delete'
+  })
+}
 // 配置下拉
 export function monitorConfigList(data) {
   return request({
@@ -1053,4 +1060,27 @@ export function monitorConfigList(data) {
     data: data
   })
 }
-
+// 监控看板流量图
+export function monitorViewChart(data) {
+  return request({
+    url: '/system/monitorConfigDetails/getTrafficByMonitorView',
+    method: 'post',
+    data: data
+  })
+}
+// 95带宽值列表
+export function getBandWidthList(data) {
+  return request({
+    url: '/system/bandwidth/getListByMonitorView',
+    method: 'post',
+    data: data
+  })
+}
+// 交换机流量出入列表
+export function getSwitchInfoList(data) {
+  return request({
+    url: '/system/switchInfoDetails/geSwitchListByMonitorView',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index ffd4d0c..0c8241b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -424,6 +424,21 @@ export const dynamicRoutes = [
       }
     ]
   },
+  // 监控看板
+  {
+    path: '/resource/monitorBoard/view',
+    component: Layout,
+    hidden: true,
+    permissions: ['resource:monitorBoard:view'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/resource/monitorBoard/monitorBoardView'),
+        name: 'MonitorBoardView',
+        meta: { title: '监控看板详情视图', activeMenu: '/resource/monitorBoard' }
+      }
+    ]
+  },
   // 资源拓扑
   {
     path: '/resource/topology/edit',
diff --git a/src/views/resource/monitorBoard/dialogMonitor.vue b/src/views/resource/monitorBoard/dialogMonitor.vue
index 6402e05..e913e69 100644
--- a/src/views/resource/monitorBoard/dialogMonitor.vue
+++ b/src/views/resource/monitorBoard/dialogMonitor.vue
@@ -7,54 +7,87 @@
 <script>
   import Form from '@/components/form/index.vue';
   import {switchNameTree, listAllBusinessList} from "@/api/disRevenue/earnManage";
-  import {addMonitorConfig} from "@/api/disRevenue/resource";
+  import {addMonitorConfig, updateMonitorConfig} from "@/api/disRevenue/resource";
   export default {
     name: "dialogMonitor",
     components: {Form},
     dicts: ['resource_type'],
+    props: {
+      formModel: {
+        type: Object,
+        default: () => {}
+      }
+    },
+    watch: {
+      formModel: {
+        handler(val) {
+          if (val && val.resourceType === '2') {
+            val.deployDeviceSwitch = [];
+            let newData = val && val.deployDevice ? val.deployDevice.split(',') : val.deployDevice;
+            newData.forEach(item => {
+              let lastVal = item.split(';');
+              val.deployDeviceSwitch.push([Number(lastVal[lastVal.length - 1]), item]);
+            });
+            this.includeDataList();
+          } else if (val && val.resourceType === '3') {
+            this.businessList();
+          }
+          this.ruleFormData = val;
+          this.fnFormList();
+        }
+      },
+      deep: true,
+      immediate: true
+    },
     data() {
         return {
           ruleFormData: {},
           formList: [],
           busNameList: {},
+          switchNameList: {},
         }
     },
     created() {
-      this.fnFormList();
-      this.includeDataList();
-      this.businessList();
     },
     methods: {
       // formList集合
-      fnFormList(objVal) {
+      fnFormList() {
         this.formList = [{
           config: {colSpan: 'disBlock'},
           controls: {
             id: {label: 'ID',hidden: true},
             configName: {label: '配置名称', span: 18, type: 'input', required: true},
-            monitorStartTime: {label: '监控数据开始时间', span: 18, type: 'datetime', required: true},
-            resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', options: this.dict.type.resource_type},
+            monitorStartTime: {label: '监控数据开始时间', span: 18, type: 'datetime', disabled: this.ruleFormData && this.ruleFormData.id ? true : false, required: true},
+            resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', options: this.dict.type.resource_type, disabled: this.ruleFormData && this.ruleFormData.id ? true : false},
             deployDevice: {label: '包含资源', span: 18, type: 'textarea', rows: 10, required: true, hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '1' ? false : true},
             deployDeviceSwitch: {label: '包含资源', span: 18, type: 'cascader', options: [], hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '2' ? false : true},
-            businessName: {label: '包含业务', span: 18, type: 'select', options: [], hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '3' ? false : true},
+            businessName: {label: '包含业务', span: 18, type: 'select', options: [], disabled: this.ruleFormData && this.ruleFormData.id ? true : false, hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '3' ? false : true},
           }
         }];
       },
       // 包含资源
       includeDataList(num) {
-        switchNameTree().then(val => {
-          this.switchNameList = val && val;
-          this.formList[0].controls.deployDeviceSwitch['options'] = val && val.data;
-        });
+        this.$modal.loading();
+        // if (this.switchNameList && Object.keys(this.switchNameList).length <= 0) {
+          switchNameTree().then(val => {
+            this.switchNameList = val && val;
+            this.formList[0].controls.deployDeviceSwitch['options'] = val && val.data;
+            this.$modal.closeLoading();
+          }).catch(() => {
+            this.$modal.closeLoading();
+          });
+        // }
       },
       // 业务名称
       businessList() {
-        listAllBusinessList().then(val => {
-          this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
-            this.busNameList[item.businessName] = item;
-            return Object.assign({label: item.businessName, value: item.businessName});
+        // if (this.busNameList && Object.keys(this.busNameList).length <= 0) {
+          listAllBusinessList().then(val => {
+            this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
+              this.busNameList[item.businessName] = item;
+              return Object.assign({label: item.businessName, value: item.businessName});
+            });
           });
-        });
+        // }
       },
       // 监听事件
       callback(result, dataVal, formVal) {
@@ -70,10 +103,12 @@
                   this.formList[0].controls.deployDevice['hidden'] = true;
                   this.formList[0].controls.deployDeviceSwitch['hidden'] = false;
                   this.formList[0].controls.businessName['hidden'] = true;
+                  this.includeDataList();
                 } else if (dataVal === '3') {
                   this.formList[0].controls.deployDevice['hidden'] = true;
                   this.formList[0].controls.deployDeviceSwitch['hidden'] = true;
                   this.formList[0].controls.businessName['hidden'] = false;
+                  this.businessList();
                 }
               } else {
                 this.formList[0].controls.deployDevice['hidden'] = true;
@@ -93,8 +128,12 @@
                 dataVal.deployDevice = newArr.toString();
                 delete dataVal.deployDeviceSwitch;
               }
-              addMonitorConfig(dataVal).then(res => {
-                this.$emit("dialogResult", {open: false});
+              let fnName = addMonitorConfig;
+              if (dataVal && dataVal.id) {
+                fnName = updateMonitorConfig;
+              }
+              fnName(dataVal).then(res => {
+                this.$emit("dialogResult", {open: false, type: 'submit'});
               });
               break;
             case 'cancel':
diff --git a/src/views/resource/monitorBoard/monitorBoard.vue b/src/views/resource/monitorBoard/monitorBoard.vue
index d5f20c7..da3f0eb 100644
--- a/src/views/resource/monitorBoard/monitorBoard.vue
+++ b/src/views/resource/monitorBoard/monitorBoard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="w100" style="height: 60px;">
-        <div class="w50 fr" style="text-align: right;">
+        <div class="fr" style="text-align: right;">
           <el-date-picker
             v-model="datetimeModel"
             style="width: 360px!important;margin-right: 10px;"
@@ -10,7 +10,8 @@
             value-format="yyyy-MM-dd HH:mm:ss"
             range-separator="至"
             start-placeholder="开始日期时间"
-            end-placeholder="结束日期时间">
+            end-placeholder="结束日期时间"
+            @change="dateChange">
           </el-date-picker>
           <el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;">
             <el-option
@@ -20,40 +21,40 @@
               :value="item.value">
             </el-option>
           </el-select>
-          <el-button>详情视图</el-button>
+          <el-button @click="viewMonitorChart">详情视图</el-button>
         </div>
     </div>
     <div style="height: calc(100% - 60px);" class="w100">
-      <div class="w50 disInlineBlock plr-10" style="height: 200px;vertical-align: middle;">
+      <div class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
         <div class="w100 h100" style="border: 1px solid #e8e8e8;display: flex;justify-content: center;align-items: center;flex-direction: column;">
           <el-button type="primary" icon="el-icon-plus" plain circle @click="addMonitor"></el-button>
           <div style="font-size: 1rem;margin-top: 5px;">新增监控配置</div>
         </div>
       </div>
-      <div v-for="charItem of lineDataParams" class="w50 disInlineBlock plr-10" style="height: 200px;vertical-align: middle;">
+      <div v-for="(chartItem, key, index) of lineDataParams" class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
         <div class="w100 h100" style="border: 1px solid #e8e8e8; padding: 10px 10px 2px;">
           <div class="w100" style="height: 20px">
-            <span>配置名称1</span>
-            <el-dropdown trigger="click" style="float: right;">
+            <span>{{chartItem && chartItem.rmMonitorConfig && chartItem.rmMonitorConfig.configName}}</span>
+            <el-dropdown trigger="click" style="float: right;" @command="(command) => handleCommand(command, key, chartItem)">
               <span class="el-dropdown-link">
                 <i class="el-icon-more" style="transform: rotate(90deg);"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="item of btnList" class="clearfix" @click="fnBtnSide(item)">
+                <el-dropdown-item v-for="item of btnList" :command="item" class="clearfix">
                   {{item.title}}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
           <div class="w100" style="height: calc(100% - 20px)">
-            <EchartsLine :lineData="charItem || {}" :title="charItem && charItem.title || ''"  class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, unit)"></EchartsLine>
+            <EchartsLine :lineData="chartItem && chartItem.echartList || {}" :title="chartItem && chartItem.echartList && chartItem.echartList.title || ''"  class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, key, unit)"></EchartsLine>
           </div>
         </div>
       </div>
     </div>
     <!--    弹窗  -->
     <el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
-      <dialogMonitor @dialogResult="fnDialogResult"></dialogMonitor>
+      <dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
     </el-dialog>
   </div>
 </template>
@@ -61,11 +62,14 @@
 <script>
   import dialogMonitor from './dialogMonitor';
   import EchartsLine from "@/components/echartsList/line.vue";
+  import {monitorViewChart, delMonitorConfig} from "@/api/disRevenue/resource";
   export default {
     name: "monitorBoard",
     components: {dialogMonitor, EchartsLine},
     data() {
         return {
+          formModel: {},
+          currTimeList: {},
           datetimeModel: [],
           timeModel: '30000',
           open: false,
@@ -78,7 +82,6 @@
             title: ' ',
             yAxisName: ' ',
             unitModel: 'Kb',
-            unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
             legend: {bottom: '0%'},
             gridTop: '40px',
             gridBotm: '15%',
@@ -89,7 +92,7 @@
               {name: '出方向总流量', data: []}
             ]
           },
-          lineDataParams: [],
+          lineDataParams: {},
           btnList: [{title: '详情', value: 'view'}, {title: '修改', value: 'edit'}, {title: '删除', value: 'del'}],
         }
     },
@@ -102,28 +105,99 @@
       const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
       startData = `${year}-${month}-${prevDay} 00:00:00`;
       endData = `${year}-${month}-${day} 23:59:59`;
+      this.currTimeList = {startTime: startData, endTime: endData};
       this.datetimeModel = [startData, endData];
-      this.lineDataParams.push(this.echartData);
+      // 循环定时查询
+      // setInterval(() => {
+      //   console.log('vvv====',Number(this.timeModel));
+      // }, Number(this.timeModel));
+      this.fnChartView({});
     },
     methods: {
+      // 查询流量图
+      fnChartView(unitVal,keyName) {
+        monitorViewChart(Object.assign({}, this.currTimeList, unitVal)).then(res => {
+          let dataList = {};
+          res && res.data.forEach(item => {
+            let chart = JSON.parse(JSON.stringify(this.echartData));
+            let modelVal = item.rmMonitorConfig;
+            dataList[modelVal.configName + '_' + modelVal.id] = item;
+            if (item && item.unit) {
+              chart.unitModel = item.unit;
+              chart.unitSelList = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
+            }
+            chart.lineXData = item && item.xData || [];
+            chart.dataList[0].data = item && item.yData  && item.yData.netInSpeedData || [];
+            chart.dataList[1].data = item && item.yData  && item.yData.netOutSpeedData || [];
+            dataList[modelVal.configName + '_' + modelVal.id]['echartList'] = chart;
+          });
+          if (keyName) {
+            this.$set(this.lineDataParams, keyName, dataList[keyName]);
+          } else {
+            if (dataList && Object.keys(dataList).length > 0) {
+              this.lineDataParams = {...dataList};
+            } else {
+              this.lineDataParams['one'] = {
+                echartList: this.echartData
+              };
+            }
+          }
+        });
+      },
+      // 时间选择器
+      dateChange() {
+        this.currTimeList = {startTime: this.datetimeModel[0], endTime: this.datetimeModel[1]};
+        this.fnChartView({});
+      },
       addMonitor() {
         this.open = true;
+        // 使用$nextTick确保DOM更新完成后再初始化子组件
+        this.$nextTick(() => {
+          // 强制更新formModel，确保子组件能接收到
+          this.formModel = {};
+        });
       },
+      // 弹窗关闭
       fnDialogResult(res){
+        // 新增或编辑操作时
+        if (res && res.type === 'submit') {
+          this.fnChartView({});
+        }
         this.open = false;
       },
-      // 右侧点击下拉按钮
-      fnBtnSide(val) {
-
+      // 详细视图
+      viewMonitorChart() {
+        this.$router.push({
+          path: '/resource/monitorBoard/view',
+          query: {}
+        });
       },
-      chartDataEvent(valData, unit) {
-        // // 检查函数是否存在，避免报错
-        // if (typeof this[funcName] === 'function') {
-        //   // 调用实际函数，并传递参数（如选中的值、当前项）
-        //   // this[funcName]({startTime: valData[0], endTime: valData[1]});
-        // } else {
-        //   console.warn(`函数 ${funcName} 未定义`);
-        // }
+      // 右侧点击下拉按钮
+      handleCommand(val, chartKey, chartVal) {
+        this.formModel = {};
+        if (val && val.value === 'del') {
+          delMonitorConfig(chartVal.rmMonitorConfig.id).then(res => {
+            this.fnChartView({});
+          });
+        } else if (val && val.value === 'edit') {
+          this.open = true;
+          // 使用$nextTick确保DOM更新完成后再初始化子组件
+          this.$nextTick(() => {
+            // 强制更新formModel，确保子组件能接收到
+            this.formModel = chartVal && chartVal.rmMonitorConfig;
+          });
+        } else if (val && val.value === 'view') {
+          this.$router.push({
+            path: '/resource/monitorBoard/view',
+            query: {id: chartVal.rmMonitorConfig.id}
+          });
+        }
+      },
+      chartDataEvent(valData, keyName, unit) {
+        if (unit) {
+          let params = {unit: unit, monitorId: this.lineDataParams[keyName].rmMonitorConfig.id};
+          this.fnChartView(params,keyName);
+        }
       }
     }
   }
diff --git a/src/views/resource/monitorBoard/monitorBoardView.vue b/src/views/resource/monitorBoard/monitorBoardView.vue
new file mode 100644
index 0000000..e9b2bbe
--- /dev/null
+++ b/src/views/resource/monitorBoard/monitorBoardView.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="app-container">
+    <div class="w100" style="height: 60px;">
+      <div class="fl" style="text-align: left;">
+        <el-select v-model="configModel" placeholder="请选择配置" style="margin-right: 10px;" @change="selectValChange">
+          <el-option
+            v-for="item in configNameList"
+            :key="item.id"
+            :label="item.configName"
+            :value="item.id">
+          </el-option>
+        </el-select>
+        <el-button type="primary" @click="fnFormHandle('add')">添加配置</el-button>
+        <el-button @click="fnFormHandle('edit')">修改配置</el-button>
+        <el-button @click="fnFormHandle('del')">删除配置</el-button>
+      </div>
+      <div class="fr" style="text-align: right;">
+        <el-date-picker
+          v-model="datetimeModel"
+          style="width: 360px!important;margin-right: 10px;"
+          type="datetimerange"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+          @change="dateChange">
+        </el-date-picker>
+        <el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;">
+          <el-option
+            v-for="item in timeModelOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-button @click="viewMonitorChart">概览视图</el-button>
+      </div>
+    </div>
+    <div style="height: calc(100% - 60px);" class="w100">
+      <div v-for="(chartItem, key, index) of lineDataParams" class="h40 w100" style="min-height: 300px;">
+        <div class="w100 h100" style="border: 1px solid #e8e8e8;">
+          <EchartsLine :lineData="chartItem || {}" :title="chartItem && chartItem.title || ''"  class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, unit)"></EchartsLine>
+        </div>
+      </div>
+    </div>
+<!--    <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList"></TableList>-->
+    <!--    弹窗  -->
+    <el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
+      <dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import dialogMonitor from './dialogMonitor';
+  import EchartsLine from "@/components/echartsList/line.vue";
+  import TableList from '@/components/table/index.vue';
+  import {monitorViewChart, monitorConfigList, delMonitorConfig, getBandWidthList, getSwitchInfoList} from "@/api/disRevenue/resource";
+  export default {
+    name: "monitorBoardView",
+    components: {dialogMonitor, EchartsLine, TableList},
+    data() {
+      return {
+        paramsData: {},
+        configModel: '',
+        configNameList: [],
+        formModel: {},
+        reserveForm: {},
+        datetimeModel: [],
+        timeModel: '30000',
+        open: false,
+        timeModelOptions: [
+          {value: '30000', label: '30s刷新'},
+          {value: '10000', label: '10s刷新'},
+          {value: '0', label: '不刷新'},
+        ],
+        echartData: {
+          title: ' ',
+          yAxisName: ' ',
+          unitModel: 'Kb',
+          unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
+          legend: {bottom: '0%'},
+          gridTop: '40px',
+          gridBotm: '15%',
+          hiddenTime: true,
+          lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa', 'Sun'],
+          dataList: [
+            {name: '入方向总流量', data: []},
+            {name: '出方向总流量', data: []}
+          ]
+        },
+        lineDataParams: {},
+        btnList: [{title: '详情', value: 'view'}, {title: '修改', value: 'edit'}, {title: '删除', value: 'del'}],
+        // 列显隐信息
+        columns: {
+          id: { label: `ID`,width: '50'},
+          clientId: { label: `ClientID`, visible: true, minWidth: '120'},
+          businessName: {label: `业务名称`, minWidth: '150', visible: true},
+          bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
+        },
+        config: {
+          tableButton: {
+            line: [
+              {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:monitorBoardView:details'},
+            ]
+          }
+        },
+        roleList: [],
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          total: 0
+        }
+      }
+    },
+    created() {
+      this.paramsData = this.$route && this.$route.query;
+      this.configModel = this.paramsData && this.paramsData.id ? Number(this.paramsData.id) : '';
+      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} 23:59:59`;
+      this.currTimeList = {startTime: startData, endTime: endData};
+      this.datetimeModel = [startData, endData];
+      this.lineDataParams['one'] = this.echartData;
+      // 循环定时查询
+      // setInterval(() => {
+      //   console.log('vvv====',Number(this.timeModel));
+      // }, Number(this.timeModel));
+      this.fnConfigName();
+      if (this.configModel) {
+        this.fnChartView();
+      }
+    },
+    methods: {
+      getList() {
+        if (this.reserveForm.resourceType === '1') {
+          getBandWidthList(this.queryParams).then(response => {
+            this.roleList = response.rows;
+            this.queryParams.total = response.total;
+            this.loading = false;
+          });
+        } else if (this.reserveForm.resourceType === '2') {
+          getSwitchInfoList(this.queryParams).then(response => {
+            this.roleList = response.rows;
+            this.queryParams.total = response.total;
+            this.loading = false;
+          })
+        }
+      },
+      // 查询流量图
+      fnChartView(unitData) {
+        this.lineDataParams = {};
+        monitorViewChart(Object.assign(unitData || {},this.currTimeList, {monitorId: this.configModel})).then(res => {
+          let dataList = {};
+          res && res.data.forEach(item => {
+            let chart = JSON.parse(JSON.stringify(this.echartData));
+            let modelVal = item && item.rmMonitorConfig || {id: 'one', configName: 'one'};
+            this.reserveForm = modelVal;
+            dataList[modelVal && modelVal.configName + '_' + modelVal.id] = {};
+            if (item && item.unit) {
+              chart.unitModel = item.unit;
+              chart.unitSelList = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
+            }
+            chart.lineXData = item && item.xData || [];
+            chart.dataList[0].data = item && item.yData  && item.yData.netInSpeedData || [];
+            chart.dataList[1].data = item && item.yData  && item.yData.netOutSpeedData || [];
+            dataList[modelVal.configName + '_' + modelVal.id] = chart;
+          });
+          if (dataList && Object.keys(dataList).length > 0) {
+            this.lineDataParams = {...dataList};
+          } else {
+            this.lineDataParams['one'] = this.echartData;
+          }
+        });
+      },
+      // 下拉
+      fnConfigName() {
+        monitorConfigList({}).then(res => {
+          if (res && res.data && res.data.length > 0) {
+            this.configNameList = res && res.data;
+            let index = 0;
+            res && res.data.forEach(item => {
+              if (item.id === this.configModel) {
+                index = 1;
+              }
+            });
+            if (index === 0) {
+              this.configModel = this.configNameList[0].id;
+              this.fnChartView();
+            }
+          }
+        });
+      },
+      // 按钮操作弹窗
+      fnFormHandle(val) {
+        if (val === 'add') {
+          this.open = true;
+          // 使用$nextTick确保DOM更新完成后再初始化子组件
+          this.$nextTick(() => {
+            // 强制更新formModel，确保子组件能接收到
+            this.formModel = {};
+          });
+        } else if (val === 'edit') {
+          this.open = true;
+          // 使用$nextTick确保DOM更新完成后再初始化子组件
+          this.$nextTick(() => {
+            // 强制更新formModel，确保子组件能接收到
+            this.formModel = this.reserveForm;
+          });
+        } else if (val === 'del') {
+          let content = '<p style="font-size: 1rem;font-weight: 600;">确认删除 ' + this.reserveForm.configName + '</p>' +
+            '<p style="height: 0px;margin-bottom: 50px;">删除 ' + this.reserveForm.configName + ' 配置后，相应的服务器/交换机集合的总流量的相关数据都将删除</p>';
+          this.$modal.confirm(content).then(() => {
+            delMonitorConfig(this.reserveForm.id).then(res => {
+              this.fnConfigName();
+            });
+          }).catch(() => {});
+        }
+      },
+      // 时间选择器
+      dateChange() {
+        this.currTimeList = {startTime: this.datetimeModel[0], endTime: this.datetimeModel[1]};
+        this.fnChartView({});
+      },
+      // 下拉值变化事件
+      selectValChange(val) {
+        this.fnChartView();
+      },
+      addMonitor() {
+        this.open = true;
+      },
+      fnDialogResult(res){
+        this.open = false;
+        this.fnConfigName();
+        this.fnChartView();
+      },
+      // 详细视图
+      viewMonitorChart() {
+        this.$router.push({
+          path: '/resource/monitorBoard',
+        });
+      },
+      chartDataEvent(valData, unit) {
+        if (unit) {
+          let unitData = {unit: unit};
+          this.fnChartView(unitData);
+        }
+      },
+      callback(){
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'details':
+              // this.$router.push({
+              //   path:'/resource/serverRegister/edit',
+              //   query: {id: rowData.id, readonly: true}
+              // });
+              break;
+            default:
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>