查看出省流量、硬盘设备监控、告警阈值配置

1、磁盘容量布局完成
2、查看出省流量页面搭建完成
3、硬盘设备监控列表搭建完成
4、告警日志的告警阈值配置页面搭建完成

src/components/table/index.vue

@@ -33,14 +33,14 @@
                       <div style="display: flex; align-items: center;">
                         <span>{{ column.label }}</span>
                         <template v-if="column.order === 'ascending'">
-                          <i class="el-icon-sort-down" style="margin-left: 2px;margin-top: -2px;font-weight: 700;color: #c0c4cc;"></i>
+                          <i class="el-icon-sort-down" style="margin-left: -2px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
                           <i class="el-icon-sort-up" style="color: #409EFF; margin-left: -8px;margin-top: 2px;font-weight: 700;"></i>
                         </template>
                         <template v-else-if="column.order === 'descending'">
                           <i class="el-icon-sort-down" style="color: #409EFF;margin-left: -2px;margin-top: 2px;font-weight: 700;"></i>
                           <i class="el-icon-sort-up" style="margin-left: -8px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
                         </template>
-                        <i v-else class="el-icon-sort" style="color: #C0C4CC;margin-left: 0;margin-top: 2px;font-weight: 700;"></i>
+                        <i v-else class="el-icon-sort" style="color: #C0C4CC;margin-top: 2px;font-weight: 700;"></i>
                       </div>
                     </template>
 
@@ -246,8 +246,12 @@
             buttonConfigs.forEach(config => {
               // 判断按钮是否显示
               if (this.isButtonVisible(config, row)) {
-                // 12是图标的宽度 8是按钮padding宽度
+                let iconWid = 0;
-                const btnWidth = this.calculateButtonWidth(config) + 14 + 8;
+                if (config.icon || config.more) {
+                  iconWid = 14;
+                }
+                // iconWid:是图标的宽度 8是按钮padding宽度
+                const btnWidth = this.calculateButtonWidth(config) + iconWid + 8;
                 currentLineWidth += btnWidth;
                 visibleButtonCount++;
               }

src/router/index.js

@@ -403,6 +403,20 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/resource/serverRegister/flowForm',
+    component: Layout,
+    hidden: true,
+    permissions: ['rocketmq:traffic'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/resource/serverRegister/flowForm'),
+        name: 'SerRegisterFlowForm',
+        meta: { title: '查看出省流量', activeMenu: '/resource/serverRegister' }
+      }
+    ]
+  },
   // 交换机管理
   {
     path: '/resource/switchRegister/edit',
@@ -739,7 +753,7 @@ export const dynamicRoutes = [
     ]
   },
   // 告警日志
-  {
+   {
     path: '/resource/alarmLog/details',
     component: Layout,
     hidden: true,
@@ -754,6 +768,20 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/resource/alarmLog/add',
+    component: Layout,
+    hidden: true,
+    permissions: ['resource:alarmLog:details'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/resource/alarmLog/alarmLogDetails'),
+        name: 'alarmLogAdd',
+        meta: { title: '告警阈值配置', activeMenu: '/resource/alarmLog' }
+      }
+    ]
+  },
   // 文件管理
   {
     path: '/resource/fileManage/view',

src/views/resource/alarmLog/alarmLog.vue

@@ -74,6 +74,7 @@
         config: {
           tableButton: {
             top: [
+              {content: '告警阈值配置', fnCode: 'add', type: 'primary', icon: 'el-icon-add', hasPermi: 'resource:alarmLog:add'},
               {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:alarmLog:export'},
             ],
             line: [
@@ -122,6 +123,12 @@
       callback(result, rowData, selectChange) {
         if (result && result.fnCode) {
           switch (result.fnCode) {
+            case 'add':
+              this.$router.push({
+                path: '/resource/alarmLog/add',
+                query: {id: rowData.clientId}
+              });
+              break;
             case 'details':
               // this.$router.push({
               //   path:'/resource/alarmLog/details',
@@ -151,13 +158,6 @@
               // }
               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("rocketmq/alarmLog/export", paramsList, `告警日志 _${new Date().getTime()}.xlsx`, null, 'json');
               break;

src/views/resource/alarmLog/alarmLogDetails.vue

@@ -1,23 +1,42 @@
 <template>
   <div class="app-container">
-    <Form :formList="formList" :ruleFormData="ruleForm" :config="config" @fnClick="callback"></Form>
+    <Form :formList="formList" :ruleFormData="ruleForm" :config="config" @fnClick="callback">
+      <template #tempConfigVal="{field, model, formModel}">
+        <div style="margin-left: -120px">
+          <TableList id="tabHeadCenter" ref="tabRef" :columns="columns" :config="tableConfig" :queryParams="{total: 0}" :tableList="roleList"  @fnClick="callback">
+            <template #tempEditModel="{ row, valueKey, column }">
+              <el-input-number v-if="column.type === 'number'" v-model="row[valueKey]" style="width: 90%;" :min="column.min || undefined" :max="column.max || undefined" />
+              <el-select style="width: 90%;" v-else v-model="row[valueKey]" clearable @change="callback({fnCode: valueKey}, column, row)">
+                <el-option v-for="item in column.options" :key="item.value" :label="item.label" :value="item.value"/>
+              </el-select>
+              <div style="position: absolute;text-align: left;margin-left: 15px;font-size: 11px;color: #f00;bottom: -4px;" v-if="row.ruleErrType === valueKey">
+                {{column.ruleErrTitle}}
+              </div>
+            </template>
+          </TableList>
+        </div>
+      </template>
+    </Form>
   </div>
 </template>
 
 <script setup name="Handle">
   import Form from '@/components/form/index.vue';
   import {getAlarmLog} from "@/api/disRevenue/resource"
+  import TableList from '@/components/table/index.vue';
   export default {
     name: 'AlarmLogDetails',
-    components: {Form},
+    components: {Form, TableList},
+    dicts: ['alarm_type'],
     data() {
       return {
         ruleForm: {},
         formList: [],
-        config: {
+        config: {},
-          buttonGroup: [{title: '返回', fnCode: 'goBack'}]
+        paramsData: {},
-        },
+        roleList: [{alarmType: '', conditionEntry: '', operator: '', valueNum: ''}],
-        paramsData: {}
+        columns: {},
+        tableConfig: {},
       }
     },
     created() {
@@ -30,18 +49,45 @@
     methods: {
       // formList集合
       fnFormList(objVal) {
-        this.formList = [{
+        if (this.paramsData.readonly) {
-          config: {title: '基本信息',readonly: true},
+          this.formList = [{
-          controls: {
+            config: {title: '基本信息',readonly: true},
-            id: {label: 'ID',hidden: true},
+            controls: {
-            groupName: {label: '资源名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
+              id: {label: 'ID',hidden: true},
-            ip: {label: '源IP', span: 24, type: 'input'},
+              groupName: {label: '资源名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
-            time: {label: '发生时间', span: 24, type: 'date'},
+              ip: {label: '源IP', span: 24, type: 'input'},
-            num: {label: '重复次数', span: 24, type: 'input'},
+              time: {label: '发生时间', span: 24, type: 'date'},
-            type: {label: '状态', span: 24, type: 'input'},
+              num: {label: '重复次数', span: 24, type: 'input'},
-            description: {label: '内容', span: 24, type: 'textarea'}
+              type: {label: '状态', span: 24, type: 'input'},
-          }
+              description: {label: '内容', span: 24, type: 'textarea'}
-        }];
+            }
+          }];
+          this.config = {buttonGroup: [{title: '返回', fnCode: 'goBack'}]};
+        } else {
+          this.formList = [{
+            config: {title: '基本信息'},
+            controls: {
+              id: {label: 'ID',hidden: true},
+              configVal: {label: '', span: 24, slotName: 'tempConfigVal'},
+            }
+          }];
+          this.columns = {
+            id: { label: `ID`,width: '50'},
+            alarmType: { label: `告警类别`, minWidth: '100',type: 'select', options: this.dict.type.alarm_type, slotName: 'tempEditModel', ruleErrTitle: '不能与条件项重复', visible: true},
+            conditionEntry: { label: `条件项`, minWidth: '100',type: 'select', options: this.dict.type.alarm_type, slotName: 'tempEditModel', ruleErrTitle: '不能与告警类别重复', visible: true},
+            operator: { label: `运算符`, minWidth: '100',visible: true, type: 'select', options: [], slotName: 'tempEditModel'},
+            valueNum: { label: `值`, minWidth: '100',visible: true, type: 'number', min: 0, options: [], slotName: 'tempEditModel'},
+          };
+          this.tableConfig = {
+            colHiddenCheck: true, colTopHiddenIcon: true,
+            tableButton: {
+              line: [
+                {content: ' ', fnCode: 'add', icon: 'el-icon-plus', type: 'primary'},
+                {content: ' ', fnCode: 'delete', icon: 'el-icon-minus', type: 'danger', showName: 'showNum', showVal: '1'},
+              ]
+            }
+          };
+        }
       },
       // 获取详情
       getFormDataList(id) {
@@ -57,6 +103,29 @@
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
           switch (result.fnCode) {
+            case 'add':
+              this.roleList.push({targetIndexNum: this.roleList.length + 1, showNum: '1', alarmType: '', conditionEntry: '', operator: '', valueNum: ''});
+              break;
+            case 'delete':
+              this.roleList.splice(this.roleList.findIndex(item => item.targetIndexNum === dataVal.targetIndexNum), 1);
+              break;
+            case 'alarmType':
+              if (formVal.conditionEntry === formVal.alarmType) {
+                formVal.ruleErrType = 'alarmType';
+              } else {
+                formVal.ruleErrType = null;
+              }
+              break;
+            case 'conditionEntry':
+              if (formVal.conditionEntry === formVal.alarmType) {
+                formVal.ruleErrType = 'conditionEntry';
+              } else {
+                formVal.ruleErrType = null;
+              }
+              break;
+            case 'submit':
+              console.log('roleList===',this.roleList);
+              break;
             case 'cancel':
               this.$router.push("/resource/alarmLog");
               break;
@@ -67,5 +136,12 @@
     }
   }
 </script>
-<style>
+<style scoped>
+  ::v-deep .el-table--medium .el-table__cell {
+    text-align: center!important;
+    /*vertical-align: top;*/
+  }
+  ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
+    padding: 10px 0 15px 0!important;
+  }
 </style>

src/views/resource/serverRegister/details.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container" style="padding: 8px 10px 20px;">
     <!--  header box  -->
-    <div class="plr-10">
+    <div>
-      <div v-for="item of headerList" class="headerBox">
+      <div v-for="item of headerList" class="headerBox" :style="`width: ${100/headerList.length}%`">
         <div class="boxChild w100 h100">
           <div class="disInlineBlock w80" style="padding-left: 10px;">
             <div>{{item.name}}</div>
@@ -10,7 +10,7 @@
             <div v-else style="margin-top: 40px;font-size: 14px;color: #f00;">暂无数据</div>
           </div>
           <div class="disInlineBlock w20 " style="vertical-align: top;">
-            <img width="50" :src="item.imgUrl" alt="">
+            <img class="w100" :src="item.imgUrl" alt="">
           </div>
         </div>
       </div>
@@ -21,10 +21,13 @@
         <!--   SN     -->
         <template #tempClient="{field, model, formModel}">
           {{model}}
-          <div class="disInlineBlock" style="margin: 0 20px;">
+          <div class="disInlineBlock" style="margin: 0 10px;">
             <dict-tag class="disInlineBlock ml10 mr10" :options="dict.type.rm_register_status" :value="formModel.registrationStatus"/>
             <dict-tag class="disInlineBlock" :options="dict.type.rm_register_online_state" :value="formModel.onlineStatus"/>
           </div>
+          <div class="disInlineBlock"  style="margin: 0 10px;">
+            <el-button style="background-color: #169bd5;border-color: #169bd5;" type="primary" size="mini" @click="outProvinceFlow(formModel)">查看出省流量</el-button>
+          </div>
           <el-tag class="disInlineBlock dynamic-tag ml5" v-for="(tag, tagIndex) in formModel.remark" :closable="false" :disable-transitions="false">
             {{ tag }}
           </el-tag>
@@ -59,14 +62,14 @@
         <el-tab-pane label="网卡流量监控" name="网卡流量监控">
           <serRegisTabsChart ref="layoutChart" v-if="activeName === '网卡流量监控'" :key="activeName" :interCartList="interCartList" :activeName="activeName" :modelVal="systemModel" :chartModelList="mapDataList['网卡流量监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
         </el-tab-pane>
+        <!--    硬盘设备监控     -->
+        <el-tab-pane label="硬盘设备监控" name="硬盘设备监控">
+          <serRegisTable v-if="activeName === '硬盘设备监控'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['硬盘设备监控']"></serRegisTable>
+        </el-tab-pane>
         <!--    挂载文件系统监控     -->
         <el-tab-pane label="挂载文件系统监控" name="挂载文件系统监控">
           <serRegisTabsChart v-if="activeName === '挂载文件系统监控'" :key="activeName" :activeName="activeName" :chartModelList="mapDataList['挂载文件系统监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
         </el-tab-pane>
-        <!--    硬盘设备监控     -->
-        <el-tab-pane label="硬盘设备监控" name="硬盘设备监控">
-          <serRegisTabsChart v-if="activeName === '硬盘设备监控'" :key="activeName" :activeName="activeName" :chartModelList="mapDataList['硬盘设备监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
-        </el-tab-pane>
         <!--    网卡信息     -->
         <el-tab-pane label="网卡信息" name="网卡信息">
           <serRegisTable v-if="activeName === '网卡信息'" :key="activeName" :activeName="activeName" :modelVal="mapDataList['网卡信息']"></serRegisTable>
@@ -98,6 +101,7 @@
   import bandWImg from '@/assets/images/bandwidth.svg';
   import cpuImg from '@/assets/images/cpu.svg';
   import memoryImg from '@/assets/images/memory.svg';
+  import diskSizeImg from '@/assets/images/diskSize.png';
   import {getHandle, trafficSerDetails, agentIsNew, virNetInterfaceChild, frpMsgByClient, getPppoeConfig, updateAgentManage, postInterFaceName,
     mountNameList, diskAllNames, trafficEcharts, spaceRate, speedEcharts, trafficIPv4Echarts, trafficIPv6Echarts,
     cpuLoadData, memoryUtilization, serverMonitorData, networkList} from "@/api/disRevenue/resource";
@@ -122,6 +126,7 @@
           {name: '带宽', num: 0, unit: 'Mbps', imgUrl: bandWImg},
           {name: 'CPU', num: 0, unit: '核', imgUrl: cpuImg},
           {name: '内存', num: 0, unit: 'G', imgUrl: memoryImg},
+          {name: '磁盘容量', num: 0, unit: 'GB', imgUrl: diskSizeImg},
         ],
         activeName: '网卡流量监控',
         echartList: {},
@@ -330,6 +335,13 @@
           return res && res.data;
         });
       },
+      // 查看出省流量
+      outProvinceFlow() {
+        this.$router.push({
+          path:'/resource/serverRegister/flowForm',
+          query: {clientId: this.paramsData.clientId, id: this.paramsData.id}
+        });
+      },
       // tab栏点击事件
       handleClick() {
         if (this.activeName === '网卡流量监控') {
@@ -469,19 +481,24 @@
       },
       // 硬盘设备
       fnDiskNames(keyName) {
-        diskAllNames({clientId: this.paramsData.clientId}).then(res => {
+        let newList = [
-          if (res && res.data.length > 0) {
+          {isp: 'sda', province: 'xxx', city: '312', publicIp: 'HDD', ipv4Address: '127', gateway: 'xxx', interfaceName: 'xxx', interfaceType: 'xxx', macAddress: 'xxx', status: '0', ipv6Address: '未执行'},
-            let tabNameList = {};
+          {isp: 'sda', province: 'xxx', city: '312', publicIp: 'HDD', ipv4Address: '127', gateway: 'xxx', interfaceName: 'xxx', interfaceType: 'xxx', macAddress: 'xxx', status: '1', ipv6Address: '未执行'},
-            res && res.data.forEach(async(item,index) => {
+        ];
-              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
+        this.$set(this.mapDataList, keyName, [{tableList: newList, queryParams: {total: newList.length}}]);
-              oneData.title = item && item.name;
+        // diskAllNames({clientId: this.paramsData.clientId}).then(res => {
-              oneData.toTitle = '硬盘设备';
+        //   if (res && res.data.length > 0) {
-              oneData.clientId = this.paramsData.clientId;
+        //     let tabNameList = {};
-              tabNameList[item.name] = oneData;
+        //     res && res.data.forEach(async(item,index) => {
-            });
+        //       let oneData = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
-            this.$set(this.mapDataList, keyName, tabNameList);
+        //       oneData.title = item && item.name;
-          }
+        //       oneData.toTitle = '硬盘设备';
-        });
+        //       oneData.clientId = this.paramsData.clientId;
+        //       tabNameList[item.name] = oneData;
+        //     });
+        //     this.$set(this.mapDataList, keyName, tabNameList);
+        //   }
+        // });
       },
       // 回调
       fnTimeChangeData(val) {
@@ -489,9 +506,10 @@
           this.fnNetChartList('网卡流量监控', val.currTimeList, val.interCardName, val.onlyInterCard);
         } else if (this.activeName && this.activeName === '挂载文件系统监控' && this.mapDataList[this.activeName]) {
           this.fnMountCharList('挂载文件系统监控', val.currTimeList);
-        } else if (this.activeName && this.activeName === '硬盘设备监控' && this.mapDataList[this.activeName]) {
-          this.fnDiskCharList('硬盘设备监控', val.currTimeList);
         }
+        // else if (this.activeName && this.activeName === '硬盘设备监控' && this.mapDataList[this.activeName]) {
+        //   this.fnDiskCharList('硬盘设备监控', val.currTimeList);
+        // }
       },
       // 网卡流量监控
       async fnNetChartList(keyVal, time, interCardName, onlyInterCard) {
@@ -780,13 +798,12 @@
 <style scoped>
   .headerBox {
     display: inline-block;
-    width: 25%;
     height: 120px;
     padding: 0 10px;
     vertical-align: top;
   }
   .boxChild {
     border: 1px solid #ddd;
-    padding: 15px;
+    padding: 15px 5px 15px 15px;
   }
 </style>

src/views/resource/serverRegister/flowForm.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="app-container">
+    <el-button type="primary" style="position: absolute;right: 100px;z-index: 9999;top: 45px;" @click="formSubmit()">{{readonly ? '编辑' : '保存'}}</el-button>
+    <el-button v-if="!readonly" style="position: absolute;right: 20px;z-index: 9999;top: 45px;" @click="formSubmit('-1')">取消</el-button>
+    <Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px', buttonGroup: []}" @fnClick="callback">
+      <template #tempTimeList="{field, model, formModel }">
+        <el-tag
+          :key="tagIndex"
+          v-for="(tag,tagIndex) in formModel[field.key]"
+          :closable="!readonly"
+          :disable-transitions="false"
+          @close="handleClose(field.key, tagIndex)">
+          {{tag}}
+        </el-tag>
+        <template v-if="!readonly">
+          <el-time-picker
+            style="width: 120px!important;"
+            class="input-new-tag"
+            v-if="inputVisible"
+            v-model="inputValue"
+            ref="saveTagInput"
+            size="small"
+            :format="'HH:mm:ss'"
+            @blur="handleInputConfirm(field.key)">
+          </el-time-picker>
+          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+        </template>
+      </template>
+    </Form>
+    <div>
+      <div class="mt20 mb20" style="margin-left: 40px;">出省流量统计</div>
+      <el-timeline :reverse="false">
+        <el-timeline-item v-for="item of timelineList" :timestamp="item.createTime" placement="top">
+          <pre>{{item.content}}</pre>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+    <div style="text-align: right;" class="mt20 mb20 mr20">
+      <el-button @click="callback({fnCode: 'cancel'})">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Form from '@/components/form/index.vue';
+  export default {
+    name: "flowForm",
+    dicts: ['pppoe_enabled', 'pppoe_config_mode'],
+    components: {Form},
+    data() {
+      return {
+        formList: [],
+        readonly: true,
+        paramsData: {},
+        ruleForm: {
+          pppoeConfigMode: '每天',
+          pppoeInterface: []
+        },
+        inputVisible: false,
+        inputValue: '',
+        timelineList: [
+          {content: '【服务器节点名称1】执行脚本命令', createTime: '2025-12-12 12:12:12'},
+          {content: '【服务器节点名称1】执行脚本命令', createTime: '2025-12-11 12:12:12'},
+          {content: '【服务器节点名称1】执行脚本命令', createTime: '2025-12-10 12:12:12'}
+        ],
+      }
+    },
+    created() {
+      this.paramsData = this.$route && this.$route.query;
+      this.fnFormList(this.readonly);
+    },
+    methods: {
+      handleClose(tagKey, targetIndex) {
+        this.ruleForm[tagKey].splice(targetIndex, 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        // this.$nextTick(_ => {
+        //   this.$refs.saveTagInput.$refs.input.focus();
+        // });
+      },
+
+      handleInputConfirm(tagKey) {
+        let inputValue = new Date(this.inputValue).toLocaleTimeString();
+        if (inputValue) {
+          this.ruleForm[tagKey].push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      },
+      // formList集合
+      fnFormList(readonly) {
+        this.formList = [{
+          config: {title: 'tcpdump探测策略', labelWidth: '140px', colSpan: 'disBlock', readonly: readonly},
+          controls: {
+            id: {label: 'ID', hidden: true},
+            clientId: {label: 'clientId', hidden: true},
+            pppoeEnabled: {label: '开启探测', span: 12, type: 'radio', options: this.dict.type.pppoe_enabled, required: true},
+            pppoeConfigMode: {label: '频率', span: 12, type: 'input', disabled: true},
+            pppoeInterface: {label: '时间', span: 24, slotName: 'tempTimeList'},
+          }
+        }];
+      },
+      formSubmit(num) {
+        if (num === '-1') {
+          this.ruleForm = Object.assign({}, this.ruleForm, {typeName: 111});
+          this.readonly = true;
+          this.fnFormList(this.readonly);
+        } else {
+          if (!this.readonly) {
+            let paramsForm = Object.assign({}, this.ruleForm, this.$refs.formRef.$refs.ruleForm.model);
+          } else {
+            this.ruleForm = Object.assign({}, this.ruleForm, {typeName: 111});
+            this.readonly = !this.readonly;
+            this.fnFormList(this.readonly);
+          }
+        }
+      },
+      // 监听事件
+      callback(result, dataVal, formVal) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'submit':
+              break;
+            case 'cancel':
+              this.$router.push({
+                path:'/resource/serverRegister/details',
+                query: {id: this.paramsData.id, readonly: true, clientId: this.paramsData.clientId}
+              });
+              break;
+            default:
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+  ::v-deep .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
+    display: block!important;
+  }
+</style>

src/views/resource/serverRegister/table.vue

@@ -153,6 +153,33 @@
           this.config = {
             colHiddenCheck: true, colTopHiddenIcon: true,
           };
+        } else if (this.activeName === '硬盘设备监控') {
+          // 列显隐信息
+          this.columns = {
+            id: {label: `ID`, width: '50'},
+            clientId: {label: `clientID`, minWidth: '280'},
+            isp: {label: `磁盘名称`, minWidth: '80', visible: true},
+            province: {label: `系列号`, minWidth: '60', visible: true},
+            city: {label: `总大小(GB)`, minWidth: '80',visible: true},
+            publicIp: {label: `类型`, minWidth: '80',visible: true},
+            ipv4Address: {label: `已用空间(GB)`, minWidth: '100',visible: true},
+            gateway: {label: `读速率(KB/s)`, minWidth: '90',visible: true},
+            interfaceName: {label: `写速率(KB/s)`, minWidth: '90',visible: true},
+            interfaceType: {label: `读IOPS`, minWidth: '70',visible: true},
+            macAddress: {label: `写IOPS`, minWidth: '70',visible: true},
+            status: {label: `状态`, minWidth: '70',visible: true},
+            ipv6Address: {label: `执行卸载`, minWidth: '80',visible: true},
+          };
+          this.config = {
+            colHiddenCheck: true, colTopHiddenIcon: true,
+            tableButton: {
+              line: [
+                {content: '测试磁盘IOOS', fnCode: 'testIoos', type: 'primary', showName: 'status', showVal: '1'},
+                {content: '卸载', fnCode: 'uninstall', type: 'danger', showName: 'status', showVal: '0'},
+                {content: '删除记录', fnCode: 'delete', type: 'danger', showName: 'status', showVal: '0'},
+              ]
+            }
+          };
         }
         this.$nextTick(() => {
           if (this.$refs.tabref) {
@@ -167,6 +194,12 @@
               this.listOpen = true;
               this.rowDataList = rowData;
               break;
+            case 'testIoos':
+              break;
+            case 'uninstall':
+              break;
+            case 'delete':
+              break;
             default:
           }
         }