table列表操作处按钮添加按钮样式效果、服务器管理详情

1、table列表操作处按钮添加按钮样式效果 2、服务器管理图形监控和详情按钮权限修改 3、服务器管理详情网卡信息和虚拟网卡信息的form表单改为table列表 4、服务器管理详情流量图切换单双列优化、添加定时刷新功能
2026-01-08 18:23:46 +08:00
parent 6f96bdc406
commit c6eced0841
42 changed files with 405 additions and 226 deletions
@@ -1,19 +1,23 @@
 <template>
  <div class="w100 h100">
-    <div>
+    <div v-if="activeName === '收益查看'">
      <span style="display: inline-block;font-size: 14px;font-weight: 600;">计算方式：</span>
      <el-select v-model="typeNum" @change="handleSelect">
        <el-option key="1000" :value="'1000'" :label="'1000'">1000计算方式</el-option>
        <el-option key="1024" :value="'1024'" :label="'1024'">1024计算方式</el-option>
      </el-select>
    </div>
-    <TableList class="w100 h100" :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnRenderList="fnRenderList" @fnClick="callback">
+    <TableList ref="tabref" class="w100 h100" :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnRenderList="fnRenderList" @fnClick="callback">
      <template #tempDay="{ valueKey, row, column }">
        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime}}</span>
      </template>
      <template #tempMonth="{ valueKey, row, column }">
        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime.slice(0, 7)}}</span>
      </template>
+      <template #tempStatus="{ valueKey, row, column }">
+        <span v-if="row[valueKey] === '0'">未连通</span>
+        <span v-if="row[valueKey] === '1'">已连通</span>
+      </template>
    </TableList>
    <el-dialog title="相关数据" :visible.sync="listOpen" width="900px" append-to-body style="padding-bottom: 20px;">
      <relevantData :rowDataList="rowDataList" @closeDialog="closeDialog"></relevantData>
@@ -38,6 +42,17 @@
      }
    },
    watch: {
+      activeName: {
+        handler(newVal, oldVal) {
+          if (newVal && newVal !== oldVal) {
+            this.$nextTick(() => {
+              this.columnsList();
+            });
+          }
+        },
+        deep: true,
+        immediate: true
+      },
      modelVal: {
        handler(newVal) {
          if (newVal && newVal.length > 0) {
@@ -53,22 +68,8 @@
      return {
        typeNum: '1000',
        // 列显隐信息
-        columns: {
-          id: {label: `ID`, width: '50'},
-          clientId: {label: `ClientID`, minWidth: '280', visible: true},
-          businessName: {label: `业务名称`, minWidth: '150', visible: true},
-          bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
-          bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '150', slotName: 'tempMonth',visible: true},
-          avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '150',slotName: 'tempDay',visible: true},
-        },
-        config: {
-          colHiddenCheck: true, colTopHiddenIcon: true,
-          tableButton: {
-            line: [
-              {content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
-            ]
-          }
-        },
+        columns: {},
+        config: {},
        tableList: [],
        queryParams: {
          pageNum: 1,
@@ -91,6 +92,74 @@
      closeDialog() {
        this.listOpen = false;
      },
+      columnsList() {
+        this.columns = {};
+        this.config = {};
+        if (this.activeName === '收益查看') {
+          // 列显隐信息
+          this.columns = {
+            id: {label: `ID`, width: '50'},
+            clientId: {label: `ClientID`, minWidth: '280', visible: true},
+            businessName: {label: `业务名称`, minWidth: '150', visible: true},
+            bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
+            bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '150', slotName: 'tempMonth',visible: true},
+            avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '150',slotName: 'tempDay',visible: true},
+          };
+          this.config = {
+            colHiddenCheck: true,
+            colTopHiddenIcon: true,
+            tableButton: {
+              line: [
+                {content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
+              ]
+            }
+          };
+        } else if (this.activeName === '虚拟网卡信息') {
+          // 列显隐信息
+          this.columns = {
+            id: {label: `ID`, width: '50'},
+            clientId: {label: `clientID`, minWidth: '280'},
+            isp: {label: `运营商`, minWidth: '60', visible: true},
+            province: {label: `省`, minWidth: '60', visible: true},
+            city: {label: `市`, minWidth: '80',visible: true},
+            publicIp: {label: `公网地址`, minWidth: '100',visible: true},
+            ipv4Address: {label: `IPv4`, minWidth: '120',visible: true},
+            gateway: {label: `网关`, minWidth: '120',visible: true},
+            interfaceName: {label: `接口名称`, minWidth: '100',visible: true},
+            interfaceType: {label: `接口类型`, minWidth: '80',visible: true},
+            macAddress: {label: `MAC地址`, minWidth: '150',visible: true},
+            ipv6Address: {label: `IPv6`, minWidth: '100',visible: true},
+            status: {label: `连通状态`, minWidth: '100', slotName: 'tempStatus', visible: true},
+          };
+          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: '60', visible: true},
+            province: {label: `省`, minWidth: '60', visible: true},
+            city: {label: `市`, minWidth: '80',visible: true},
+            publicIp: {label: `公网地址`, minWidth: '100',visible: true},
+            ipv4Address: {label: `IPv4`, minWidth: '120',visible: true},
+            gateway: {label: `网关`, minWidth: '150',visible: true},
+            interfaceName: {label: `接口名称`, minWidth: '100',visible: true},
+            interfaceType: {label: `接口类型`, minWidth: '100',visible: true},
+            macAddress: {label: `MAC地址`, minWidth: '150',visible: true},
+            ipv6Address: {label: `IPv6`, minWidth: '120',visible: true},
+          };
+          this.config = {
+            colHiddenCheck: true, colTopHiddenIcon: true,
+          };
+        }
+        this.$nextTick(() => {
+          if (this.$refs.tabref) {
+            this.$refs.tabref.tableKey++;
+          }
+        });
+      },
      callback(result, rowData, selectChange, selectList) {
        if (result && result.fnCode) {
          switch (result.fnCode) {