图形监控添加IPv4和IPv6的流量图、服务器管理列表和表单添加新字段、列表字段直接修改功能

1、服务器管理列表和表单添加新字段、列表字段直接修改功能 2、服务器管理列表添加默认选中且不可修改字段、列表增加排序功能 3、图形监控添加IPv4和IPv6的流量图 4、交换机管理和服务器管理列表设置不刷新缓存
2025-12-05 18:45:26 +08:00
parent c949b89aa8
commit 17d61dbe43
11 changed files with 257 additions and 45 deletions
@@ -743,6 +743,14 @@ export function bindBusByClient(query) {
    data: query
  })
 }
+// 上报带宽值修改
+export function repBandwidthSubmit(query) {
+  return request({
+    url: '/system/registration/addReportedBandwidth',
+    method: 'post',
+    data: query
+  })
+}
 export function networkList(query) {
  return request({
    url: '/rocketmq/networkInterface/list',
@@ -878,6 +886,22 @@ export function trafficEcharts(data) {
    data: data
  })
 }
+// 图形监控-自动发现项-网络接口的-IPv4流量
+export function trafficIPv4Echarts(data) {
+  return request({
+    url: '/rocketmq/traffic/netInterfaceIpv4TrafficEcharts',
+    method: 'post',
+    data: data
+  })
+}
+// 图形监控-自动发现项-网络接口的-IPv6流量
+export function trafficIPv6Echarts(data) {
+  return request({
+    url: '/rocketmq/traffic/netInterfaceIpv6TrafficEcharts',
+    method: 'post',
+    data: data
+  })
+}
 // 图形监控-自动发现项-网络接口的-丢数
 export function droppedEcharts(data) {
  return request({
@@ -19,7 +19,7 @@
            <div class="check-line"></div>
            <template v-for="(item, key) in columns">
              <el-dropdown-item :key="key">
-                <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :label="item.label" />
+                <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :disabled="item.disabled" :label="item.label" />
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
@@ -176,7 +176,10 @@ export default {
        this.columns.forEach((col) => (col.visible = newValue))
      } else {
        Object.keys(newBackup).forEach(col => {
-          newBackup[col].visible = newValue;
+          // 不修改禁用的按钮
+          if (!newBackup[col].disabled) {
+            newBackup[col].visible = newValue;
+          }
          this.$set(this.columns, col, newBackup[col]);
        });
        // Object.values(this.columns).forEach((col) => (col.visible = newValue))
@@ -224,7 +227,7 @@ export default {
          let indexNum = 0;
          if (newData && Object.keys(newData).length > 0) {
            Object.keys(newCol).forEach(keyName => {
-              if (newData[keyName]) {
+              if (newData[keyName] || (newCol[keyName].disabled && newCol[keyName].visible)) {
                indexNum++;
                newCol[keyName].visible = true;
              } else {
@@ -1,5 +1,5 @@
 <template>
-    <div class="ultabs" :style="{'margin-top': dateShowType && (dateShowType === 'day' ||  dateShowType === 'month') ? '35px' : '10px'}">
+    <div class="ultabs" :style="{'margin-top': dateDataTrans.MarUltabsTop ? dateDataTrans.MarUltabsTop : 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">
@@ -10,7 +10,7 @@
            <right-toolbar v-if="!(config && config.colTopHiddenIcon)" :modelIdent="this.modelIdent" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
        </el-row>
        <!-- 表格数据 -->
-        <el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" :highlight-current-row="config && config.currentSel || false" @current-change="(val) => handleClick({fnCode: 'currentData'},val)" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange">
+        <el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" :highlight-current-row="config && config.currentSel || false" @current-change="(val) => handleClick({fnCode: 'currentData'},val)" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange" @sort-change="handleSortChange">
 <!--          :selectable="() => config && config.selectable ? false : true"  -->
            <el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" :selectable="() => config && config.selectable ? false : true" align="center" />
            <!--      展开列内容        -->
@@ -27,7 +27,7 @@
            <template v-for="(column, key, index) of columns">
                <!--      customTooltip:true 走  自定义tooltip 展示    -->
                <template v-if="column.customTooltip">
-                  <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
+                  <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :render-header="renderHeader" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
                    <template #default="scope">
                      <el-tooltip
                        :disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
@@ -44,7 +44,7 @@
                </template>
              <!--        原tooltip展示逻辑     -->
              <template v-else>
-                <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
+                <el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :render-header="renderHeader" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
                  <!--  插槽 自定义列表表头数据格式  -->
                  <template #header v-if="column && column.slotHeaderName">
                    <span>{{column.label}}</span>
@@ -419,6 +419,52 @@
          }
          this.tableKey++;
        },
+        // 排序发生变化时
+        handleSortChange({column, prop, order}) {
+          let sortType = 3;
+          if (order === 'ascending') {
+            sortType = 1;
+          } else if (order === 'descending') {
+            sortType = 2;
+          }
+          this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType});
+        },
+        // 排序图标替换
+        renderHeader(h, { column, $index }) {
+          if (column && column.sortable) {
+            if (column.order === 'ascending') {
+              // 升序图标
+              return (
+                <div style="display: flex; align-items: center;">
+                <span>{column.label}</span>
+                <i class="el-icon-sort-down" style="margin-left: 2px;font-weight: 700;color: #c0c4cc;"></i>
+                <i class="el-icon-sort-up" style="color: #409EFF; margin-left: -8px;font-weight: 700;"></i>
+                </div>
+              );
+            } else if (column.order === 'descending') {
+              // 降序图标
+              return (
+                <div style="display: flex; align-items: center;">
+                <span>{column.label}</span>
+                <i class="el-icon-sort-down" style="color: #409EFF; margin-left: 2px;font-weight: 700;"></i>
+                <i class="el-icon-sort-up" style="margin-left: -8px;font-weight: 700;color: #c0c4cc;"></i>
+                </div>
+              );
+            } else {
+              // 默认状态（无序）
+              return (
+                <div style="display: flex; align-items: center;">
+                <span>{column.label}</span>
+                <i class="el-icon-sort" style="color: #C0C4CC; margin-left: 4px;font-weight: 700;"></i>
+                </div>
+              );
+            }
+          }
+          return h('div', [
+            h('span', column.label), // 标题文本
+            // h('i', { class: iconClass }) // 排序图标
+          ]);
+        },
      }
    }
 </script>
@@ -438,6 +484,9 @@
    white-space: normal; /* 允许自动换行 */
    line-height: 1.6; /* 调整行高，提升可读性 */
  }
+  ::v-deep .caret-wrapper {
+    display: none !important;
+  }
 </style>
 <style>
  .my-custom-tooltip {
@@ -41,8 +41,8 @@
                <el-input
                  v-model="row.maxSpeed"
                  size="mini"
-                  @keyup.enter="callback({fnCode: 'edit'}, row)"
-                  @blur="callback({fnCode: 'edit'}, row)"
+                  @keyup.enter.native="$event.target.blur"
+                  @blur="callback({fnCode: 'submit'}, row)"
                ></el-input>
              </el-col>
              <el-col :span="8">
@@ -31,8 +31,8 @@
             <el-input
               v-model="row.businessName"
               size="mini"
-               @keyup.enter="callback({fnCode: 'edit'}, row)"
-               @blur="callback({fnCode: 'edit'}, row)"
+               @keyup.enter.native="$event.target.blur"
+               @blur="callback({fnCode: 'submit'}, row)"
             ></el-input>
           </el-col>
           <el-col :span="8">
@@ -31,8 +31,8 @@
              <el-input
                v-model="row.businessName"
                size="mini"
-                @keyup.enter="callback({fnCode: 'edit'}, row)"
-                @blur="callback({fnCode: 'edit'}, row)"
+                @keyup.enter.native="$event.target.blur"
+                @blur="callback({fnCode: 'submit'}, row)"
              ></el-input>
            </el-col>
            <el-col :span="8">
@@ -67,6 +67,7 @@
              ip1InterfaceType: {label: 'IP1-接口类型', span: 12, type: 'input'},
              ip1Ipv4Address: {label: 'IP1-IPv4地址', span: 12, type: 'input'},
              ip1Gateway: {label: 'IP1-网关', span: 12, type: 'input'},
+              ip1Ipv6Address: { label: `IP1-IPv6全球单播地址`, span: 12, type: 'input'},
              ip2Isp: {label: 'IP2-运营商', span: 12, type: 'input'},
              ip2Province: {label: 'IP2-省', span: 12, type: 'input'},
              ip2City: {label: 'IP2-市', span: 12, type: 'input'},
@@ -76,6 +77,7 @@
              ip2InterfaceType: {label: 'IP2-接口类型', span: 12, type: 'input'},
              ip2Ipv4Address: {label: 'IP2-IPv4地址', span: 12, type: 'input'},
              ip2Gateway: {label: 'IP2-网关', span: 12, type: 'input'},
+              ip2Ipv6Address: { label: `IP2-IPv6全球单播地址`, span: 12, type: 'input'},
              ip3Isp: {label: 'IP3-运营商', span: 12, type: 'input'},
              ip3Province: {label: 'IP3-省', span: 12, type: 'input'},
              ip3City: {label: 'IP3-市', span: 12, type: 'input'},
@@ -85,6 +87,7 @@
              ip3InterfaceType: {label: 'IP3-接口类型', span: 12, type: 'input'},
              ip3Ipv4Address: {label: 'IP3-IPv4地址', span: 12, type: 'input'},
              ip3Gateway: {label: 'IP3-网关', span: 12, type: 'input'},
+              ip3Ipv6Address: { label: `IP3-IPv6全球单播地址`, span: 12, type: 'input'},
              mgmtIsp: {label: '管理网-运营商', span: 12, type: 'input'},
              mgmtProvince: {label: '管理网-省', span: 12, type: 'input'},
              mgmtCity: {label: '管理网-市', span: 12, type: 'input'},
@@ -94,9 +97,13 @@
              mgmtInterfaceType: {label: '管理网-接口类型', span: 12, type: 'input'},
              mgmtIpv4Address: {label: '管理网-IPv4地址', span: 12, type: 'input'},
              mgmtGateway: {label: '管理网-网关', span: 12, type: 'input'},
+              mgmtIpv6Address: { label: `管理网-IPv6全球单播地址`, span: 12, type: 'input'},
              heartbeatInterval: {label: '心跳时间间隔', span: 12, type: 'input'},
              heartbeatCount: {label: '心跳次数', span: 12, type: 'input'},
              businessName: {label: '业务名称', span: 12, type: 'input'},
+              bandwidthResult: { label: `昨日95值(Mbit)`, span: 12, type: 'input'},
+              bandwidthRate: { label: `日95带宽值利用率`, span: 12, type: 'input'},
+              reportedBandwidth: { label: `上报带宽值(Mbit)`, span: 12, type: 'input'},
              logicalNodeId: {label: '逻辑节点标识', span: 12, type: 'input'},
              onlineStatus: {label: '在线状态', span: 12, type: 'select', options: this.dict.type.rm_register_online_state},
              registrationStatus: {label: '注册状态', span: 12, type: 'select', options: this.dict.type.rm_register_status},
@@ -111,6 +111,30 @@
            <el-tag v-for="(item, index) of row.remark.split(',')" :style="{marginLeft: index !== 0 ? '5px' : null}">{{item}}</el-tag>
          </template>
        </template>
+        <template #tempHandle="{ row, column }">
+          <div class="w100">
+            <!-- 非编辑状态：显示文本 -->
+            <template v-if="!row.editStatus">
+              <span>{{ row.reportedBandwidth || '-'}}</span>
+              <el-button icon="el-icon-edit" style="padding: 0px;" type="text" @click="rowDataChange(row, true)"></el-button>
+            </template>
+            <template v-else>
+              <!-- 编辑状态：显示输入框 -->
+              <el-col :span="12">
+                <el-input
+                  v-model="row.reportedBandwidth"
+                  size="mini"
+                  @keyup.enter.native="$event.target.blur"
+                  @blur="handleSubmit(row)"
+                ></el-input>
+              </el-col>
+              <el-col :span="12">
+                <el-button size="mini" style="padding: 6px 5px;margin-left: 5px;" type="primary" @click="handleSubmit(row)">确定</el-button>
+                <el-button size="mini" style="padding: 6px 5px;margin-left: 5px;" @click="rowDataChange(row, false)">取消</el-button>
+              </el-col>
+            </template>
+          </div>
+        </template>
      </TableList>
      <!--    查看执行结果弹窗    -->
      <el-dialog title="命令执行结果" :visible.sync="open" width="800px" height="300px" append-to-body>
@@ -163,7 +187,7 @@

 <script setup name="Register">
    import Form from '@/components/form/index.vue';
-    import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark} from '@/api/disRevenue/resource';
+    import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit} from '@/api/disRevenue/resource';
    import {listAllBusinessList} from "@/api/disRevenue/earnManage"
    import TableList from '@/components/table/index.vue';
    import MonitorStrategy from '../serverMonitorStrat/monitorStrategy';
@@ -188,17 +212,23 @@
          // 列显隐信息
          columns: {
            id: { label: `ID`,width: '50'},
-            clientId: { label: `clientID`, minWidth: '320', slotName: 'tempCopy'},
+            clientId: { label: `clientID`, minWidth: '320', slotName: 'tempCopy',visible: true, disabled: true},
+            ip1Isp: { label: `IP1-运营商`, minWidth: '85',visible: true, disabled: true},
+            ip1Province: { label: `IP1-省`, minWidth: '60',visible: true,  disabled: true},
+            ip1PublicIp:{ label: `IP1-业务公网`,minWidth: '120',visible: true, disabled: true},
+            businessName: { label: `业务名称`, minWidth: '100', visible: true, disabled: true},
+            bandwidthResult: { label: `昨日95值(Mbit)`, minWidth: '150', visible: true, disabled: true, sortable: 'custom'},
+            bandwidthRate: { label: `日95带宽值利用率`, minWidth: '130', visible: true, disabled: true},
+            reportedBandwidth: { label: `上报带宽值(Mbit)`, minWidth: '180', slotName: 'tempHandle', visible: true, disabled: true},
+            onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '100', visible: true, disabled: true},
            hardwareSn: { label: `设备SN`,minWidth: '120'},
-            ip1Isp: { label: `IP1-运营商`, visible: true, minWidth: '85'},
-            ip1Province: { label: `IP1-省`, visible: true, minWidth: '60'},
            ip1City: { label: `IP1-市`, minWidth: '80'},
-            ip1PublicIp:{ label: `IP1-业务公网`,visible: true,minWidth: '120'},
            ip1InterfaceName: { label: `IP1-接口名称`, minWidth: '100'},
            ip1MacAddress: { label: `IP1-mac地址`, minWidth: '120'},
            ip1InterfaceType: { label: `IP1-接口类型`, minWidth: '100'},
            ip1Ipv4Address: { label: `IP1-IPv4地址`, minWidth: '120'},
            ip1Gateway: { label: `IP1-网关`, minWidth: '120'},
+            ip1Ipv6Address: { label: `IP1-IPv6全球单播地址`, minWidth: '150'},
            ip2Isp: { label: `IP2-运营商`, minWidth: '90'},
            ip2Province: { label: `IP2-省`,minWidth: '60'},
            ip2City: { label: `IP2-市`, minWidth: '60'},
@@ -208,6 +238,7 @@
            ip2InterfaceType: { label: `IP2-接口类型`, minWidth: '100'},
            ip2Ipv4Address: { label: `IP2-IPv4地址`, minWidth: '120'},
            ip2Gateway: { label: `IP2-网关`, minWidth: '120'},
+            ip2Ipv6Address: { label: `IP2-IPv6全球单播地址`, minWidth: '150'},
            ip3Isp: { label: `IP3-运营商`, minWidth: '90'},
            ip3Province: { label: `IP3-省`, minWidth: '60'},
            ip3City: { label: `IP3-市`, minWidth: '60'},
@@ -217,6 +248,7 @@
            ip3InterfaceType: { label: `IP3-接口类型`, minWidth: '100'},
            ip3Ipv4Address: { label: `IP3-IPv4地址`, minWidth: '120'},
            ip3Gateway: { label: `IP3-网关`, minWidth: '120'},
+            ip3Ipv6Address: { label: `IP3-IPv6全球单播地址`, minWidth: '150'},
            mgmtIsp: { label: `管理网-运营商`, minWidth: '110'},
            mgmtProvince: { label: `管理网-省`,minWidth: '80'},
            mgmtCity: { label: `管理网-市`, minWidth: '80'},
@@ -226,14 +258,12 @@
            mgmtInterfaceType: { label: `管理网-接口类型`, minWidth: '120'},
            mgmtIpv4Address: { label: `管理网-IPv4地址`, minWidth: '120'},
            mgmtGateway: { label: `管理网-网关`, minWidth: '120'},
+            mgmtIpv6Address: { label: `管理网-IPv6全球单播地址`, minWidth: '170'},
            remark: { label: `标签`, minWidth: '150', slotName: 'tempRemark'},
            heartbeatInterval: { label: `心跳时间间隔`, minWidth: '100'},
            heartbeatCount: { label: `心跳次数`, minWidth: '80'},
-            registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true },
-            businessName: { label: `业务名称`, minWidth: '100', visible: true},
-            bandwidthResult: { label: `昨日95值(Mbit)`, minWidth: '120', visible: true},
+            registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true},
            logicalNodeId: { label: `逻辑节点标识`, minWidth: '120', visible: true},
-            onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '100', visible: true },
            multiPublicIpStatus: { label: `多公网IP状态`, slotName: 'tempMultipubStatus', minWidth: '120', visible: true },
            createTime:{ label: `注册时间`,minWidth: '160'},
            onboardTime:{ label: `上机时间`,minWidth: '160'},
@@ -315,11 +345,11 @@
        this.fnBusNameList();
        this.fnLogicalNode();
      },
-      activated() {
-        this.$nextTick(() => {
-          this.getList();
-        });
-      },
+      // activated() {
+      //   this.$nextTick(() => {
+      //     this.getList();
+      //   });
+      // },
      methods: {
        fnBusNameList() {
          listAllBusinessList().then(val => {
@@ -347,12 +377,14 @@
          if (params && !params.queryParam) {
            params.queryParam = null;
          }
-          this.loading = true;
+          this.$modal.loading();
          listHandle(this.addDateRange(params)).then(response => {
            this.roleList = response.rows;
            this.queryParams.total = response.total;
-            this.loading = false;
-          })
+            this.$modal.closeLoading();
+          }).catch(() => {
+            this.$modal.closeLoading();
+          });
        },

        /** 搜索按钮操作 */
@@ -385,6 +417,25 @@
          this.scriptOpen = false;
          this.mtrChartOpen = false;
        },
+        // 是否进入可编辑状态
+        rowDataChange(row, bool) {
+          this.$set(row, 'editStatus', bool);
+        },
+        // 提交编辑值
+        handleSubmit(rowData) {
+          // 控制单点，防止多次点击
+          if (this.loading) return;
+          this.loading = true;
+          repBandwidthSubmit(rowData).then(response => {
+            this.$set(rowData, 'editStatus', false);
+            this.getList();
+            this.$modal.msgSuccess(response.msg);
+            this.loading = false;
+          }).catch(() => {
+            this.$modal.msgError("操作失败");
+            this.loading = false;
+          });
+        },
        callback(result, rowData, selectChange, selectList) {
          this.dialogRowData = {};
          if (result && result.fnCode) {
@@ -533,7 +584,11 @@
                this.stratOpen = true;
                this.dialogRowData = rowData;
                break;
-              case 'submit':
+              case 'sortTable':
+                if (rowData && rowData.sortType) {
+                  this.queryParams['bandwidthResultSort'] = rowData.sortType;
+                  this.getList();
+                }
                break;
              case 'cancel':
                this.issueOpen = false;
@@ -23,7 +23,7 @@
  import SecondAutoFind from "./secondAutoFind";
  import {serverMonitorData, cpuLoadData, cpuTimeData, procNum, serverUserNum, swapSizeFree, memoryUtilization, swapSizePercent,
    memorySizeAvailable, memorySizePercent, mountNameList, pointDetails, spaceEcharts, spaceRate, postInterFaceName,
-    netDetails, trafficEcharts, droppedEcharts, diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts,
+    netDetails, trafficEcharts, trafficIPv4Echarts, trafficIPv6Echarts, droppedEcharts, diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts,
    dockerAllNames, dockerDetails, cpuUtilEcharts, dockerMemEcharts, dockerSpeedEcharts} from "@/api/disRevenue/resource"
  export default {
    name: "serverMonitorChart",
@@ -191,11 +191,11 @@
        echartData: {
          title: 'GE1/0/1的丢包数',
          dateShowType: 'datetimerange',
-          dateDataTrans: {transList: true},
+          dateDataTrans: {transList: true, MarUltabsTop: '30px'},
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            yAxisName: ' ',
-            gridTop: '35%',
+            gridTop: '40%',
            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: [{
@@ -226,6 +226,8 @@
            formModel: {},
            echartFors: [
              {title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
+              {title: '的IPv4流量', oneName: 'IPv4出站流量', twoName: 'IPv4入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
+              {title: '的IPv6流量', oneName: 'IPv6出站流量', twoName: 'IPv6入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
              {title: '的丢包数(个)', oneName: '出站丢包', twoName: '入站丢包'},
            ],
            echartList: []
@@ -610,11 +612,19 @@
        netDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          if (await this.getNetEcharts(times, titleName)) {
-            this.getNetDropped(times ,titleName);
+            if (await this.getNetIPv4Echarts(times, titleName)) {
+              if (await this.getNetIPv6Echarts(times, titleName)) {
+                this.getNetDropped(times ,titleName);
+              }
+            }
          }
        }).catch(async () => {
          if (await this.getNetEcharts(times, titleName)) {
-            this.getNetDropped(times ,titleName);
+            if (await this.getNetIPv4Echarts(times, titleName)) {
+              if (await this.getNetIPv6Echarts(times, titleName)) {
+                this.getNetDropped(times ,titleName);
+              }
+            }
          }
        });
      },
@@ -650,6 +660,70 @@
          return true;
        });
      },
+      // IPv4流量
+      getNetIPv4Echarts(times, titleName, unitData) {
+        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
+        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
+        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
+        netEcharts.fnEvent = 'getNetIPv4Echarts';
+        return trafficIPv4Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
+          if (res && res.data) {
+            netEcharts.title = titleName + content.echartFors[1].title;
+            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
+            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
+            netEcharts.dataVal.dataList[0] = {
+              name: content.echartFors[1].oneName,
+              data: res.data && res.data.yData['netOutSpeedData'] || []
+            };
+            if (content.echartFors[1].unitSel) {
+              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
+              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
+            }
+            netEcharts.dataVal.dataList[1] = {
+              name: content.echartFors[1].twoName,
+              data: res.data && res.data.yData['netInSpeedData'] || []
+            };
+            mountCollect['echartList'][1] = netEcharts;
+            this.$set(this.secondChartList, titleName, mountCollect);
+          }
+          return true;
+        }).catch(() => {
+          return true;
+        });
+      },
+      // IPv6流量
+      getNetIPv6Echarts(times, titleName, unitData) {
+        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
+        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
+        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
+        netEcharts.fnEvent = 'getNetIPv6Echarts';
+        return trafficIPv6Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
+          if (res && res.data) {
+            netEcharts.title = titleName + content.echartFors[2].title;
+            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
+            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
+            netEcharts.dataVal.dataList[0] = {
+              name: content.echartFors[2].oneName,
+              data: res.data && res.data.yData['netOutSpeedData'] || []
+            };
+            if (content.echartFors[2].unitSel) {
+              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
+              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
+            }
+            netEcharts.dataVal.dataList[1] = {
+              name: content.echartFors[2].twoName,
+              data: res.data && res.data.yData['netInSpeedData'] || []
+            };
+            mountCollect['echartList'][2] = netEcharts;
+            this.$set(this.secondChartList, titleName, mountCollect);
+          }
+          return true;
+        }).catch(() => {
+          return true;
+        });
+      },
      // 丢包数
      getNetDropped(times, titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
@@ -659,18 +733,18 @@
        netEcharts.fnEvent = 'getNetDropped';
        return droppedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
-            netEcharts.title = titleName + content.echartFors[1].title;
+            netEcharts.title = titleName + content.echartFors[3].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
-              name: content.echartFors[1].oneName,
+              name: content.echartFors[3].oneName,
              data: res.data && res.data.yData['outDroppedData'] || []
            };
            netEcharts.dataVal.dataList[1] = {
-              name: content.echartFors[1].twoName,
+              name: content.echartFors[3].twoName,
              data: res.data && res.data.yData['inDroppedData'] || []
            };
-            mountCollect['echartList'][1] = netEcharts;
+            mountCollect['echartList'][3] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          this.$modal.closeLoading();
@@ -143,11 +143,11 @@
      created() {
        this.getList();
      },
-      activated() {
-        this.$nextTick(() => {
-          this.getList();
-        });
-      },
+      // activated() {
+      //   this.$nextTick(() => {
+      //     this.getList();
+      //   });
+      // },
      methods: {
        // 处理子组件传递的新值
        handleValueChange(newValue) {