From 4c634ab06ab4f28b4ba5eae91820fa32c50c1216 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, 8 Dec 2025 19:21:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=81=E9=87=8F=E5=9B=BE=E5=BD=A2=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E5=8A=9F=E8=83=BD=E3=80=81=E6=9D=83=E9=99=90=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E8=AF=95=E8=B0=83=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1、服务器管理添加流量图形展示功能
2、agent更新模块表单修改更新方式为可编辑
3、权限控制试调测
4、优化并修改bug
---
 src/api/disRevenue/resource.js                |   8 +
 src/components/table/index.vue                |  25 ++-
 src/directive/permission/hasPermi.js          |  56 +++----
 src/router/index.js                           |  21 ++-
 .../busValueCount/busValueCount.vue           |  10 +-
 src/views/earnManage/server/serverTabs.vue    |   2 +-
 .../resource/agentUpdate/agentUpdateView.vue  |   4 +-
 src/views/resource/serverRegister/index.vue   |  48 +++++-
 .../resource/serverRegister/trafficChart.vue  | 145 ++++++++++++++++++
 9 files changed, 268 insertions(+), 51 deletions(-)
 create mode 100644 src/views/resource/serverRegister/trafficChart.vue

diff --git a/src/api/disRevenue/resource.js b/src/api/disRevenue/resource.js
index e9b2776..9ca8167 100644
--- a/src/api/disRevenue/resource.js
+++ b/src/api/disRevenue/resource.js
@@ -736,6 +736,14 @@ export function getRegistList(query) {
     data: query
   })
 }
+// 通过clientId查询流量图
+export function getNetTraffic(query) {
+  return request({
+    url: '/rocketmq/traffic/netBatchTrafficEcharts',
+    method: 'post',
+    data: query
+  })
+}
 export function bindBusByClient(query) {
   return request({
     url: 'system/registration/bindBusinessByClientIds',
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index cdc0399..edef2ef 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -4,7 +4,8 @@
         <el-row :gutter="10" style="margin: 0 0 8px 0;">
             <template v-if="config && config.tableButton && config.tableButton.top">
               <el-col :span="1.5" v-for="item of config.tableButton.top">
-                <el-button :type="item.type" plain size="mini" :icon="item.icon" @click="handleClick(item,{})" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
+<!--                <el-button :type="item.type" plain size="mini" :icon="item.icon" @click="handleClick(item,{})" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>-->
+                <el-button :type="item.type" plain size="mini" :icon="item.icon" @click="handleClick(item,{})" v-if="checkPermi([item.hasPermi])">{{item.content}}</el-button>
               </el-col>
             </template>
             <right-toolbar v-if="!(config && config.colTopHiddenIcon)" :modelIdent="this.modelIdent" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
@@ -76,13 +77,17 @@
                       <el-dropdown size="mini" trigger="click" @command="(command) => handleClick({fnCode: command}, scope.row)">
                         <el-button size="mini" type="text" icon="el-icon-d-arrow-right"><span style="margin-left: -5px;">{{item && item.title ? item.title : '更多'}}</span></el-button>
                         <el-dropdown-menu slot="dropdown">
-                          <el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon" :hasPermi="[dropBut.hasPermi]">{{dropBut.content}}</el-dropdown-item>
+<!--                          <el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon" :hasPermi="[dropBut.hasPermi]">{{dropBut.content}}</el-dropdown-item>-->
+                          <el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon"  v-if="checkPermi([dropBut.hasPermi])">{{dropBut.content}}</el-dropdown-item>
                         </el-dropdown-menu>
                       </el-dropdown>
                     </template>
                     <template v-else>
                       <!--                    <el-tooltip v-if="item && item.content" :content="item.content" placement="top">-->
-                      <el-button v-if="item && item.content" size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
+                      <template v-if="item && item.content">
+                        <el-button size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" v-if="checkPermi([item.hasPermi])">{{item.content}}</el-button>
+                      </template>
+<!--                      <el-button v-if="item && item.content" size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>-->
                       <!--                    </el-tooltip>-->
                     </template>
                   </template>
@@ -106,7 +111,8 @@
 </template>
 
 <script setup>
-    export default {
+  import { checkPermi } from "@/utils/permission";
+  export default {
       name: 'table-list',
       props: {
         modelIdent: {
@@ -157,6 +163,16 @@
           handler(val) {
             this.$emit('value-change', val)
           }
+        },
+        queryParams: {
+          handler(val) {
+            // 重置后，重新渲染组件，起到排序图标重置功能
+            if (val && val.resetVal) {
+              this.tableKey++;
+            }
+          },
+          deep: true,
+          immediate: true
         }
       },
       created() {
@@ -165,6 +181,7 @@
         }
       },
       methods: {
+        checkPermi,
         // 1. 格式化单元格内容：将\n替换为<br>，支持HTML渲染
         formatCellContent(content) {
           if (!content) return '';
diff --git a/src/directive/permission/hasPermi.js b/src/directive/permission/hasPermi.js
index 6d5409e..15ca851 100644
--- a/src/directive/permission/hasPermi.js
+++ b/src/directive/permission/hasPermi.js
@@ -1,28 +1,28 @@
- /**
- * v-hasPermi 操作权限处理
- * Copyright (c) 2019 ruoyi
- */
-
-import store from '@/store'
-
-export default {
-  inserted(el, binding, vnode) {
-    const { value } = binding
-    const all_permission = "*:*:*"
-    const permissions = store.getters && store.getters.permissions
-
-    if (value && value instanceof Array && value.length > 0) {
-      const permissionFlag = value
-
-      const hasPermissions = permissions.some(permission => {
-        return all_permission === permission || permissionFlag.includes(permission)
-      })
-
-      if (!hasPermissions) {
-        el.parentNode && el.parentNode.removeChild(el)
-      }
-    } else {
-      throw new Error(`请设置操作权限标签值`)
-    }
-  }
-}
+ /**
+ * v-hasPermi 操作权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+
+import store from '@/store'
+
+export default {
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const all_permission = "*:*:*"
+    const permissions = store.getters && store.getters.permissions
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionFlag = value
+
+      const hasPermissions = permissions.some(permission => {
+        return all_permission === permission || permissionFlag.includes(permission)
+      })
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`)
+    }
+  }
+}
diff --git a/src/router/index.js b/src/router/index.js
index f688bef..0c2711a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 import DialogView from '@/views/earnManage/server/dialogView.vue'
+import TrafficChart from '@/views/resource/serverRegister/trafficChart.vue'
 import Welcome from '@/views/welcome.vue'
 
 /**
@@ -88,6 +89,12 @@ export const constantRoutes = [
     component: DialogView,
     hidden: true,
     name: 'DialogView'
+  },
+  {
+    path: '/traffic-chart',
+    component: TrafficChart,
+    hidden: true,
+    name: 'TrafficChart'
   }
 ]
 
@@ -181,7 +188,7 @@ export const dynamicRoutes = [
     path: '/earnManage/busValueCount/edit',
     component: Layout,
     hidden: true,
-    permissions: ['earnManage:busValueCount:edit'],
+    permissions: ['earnManage:busValueCount:add'],
     children: [
       {
         path: 'index/:id?',
@@ -195,7 +202,7 @@ export const dynamicRoutes = [
     path: '/earnManage/busValueCount/list',
     component: Layout,
     hidden: true,
-    permissions: ['earnManage:busValueCount:list'],
+    permissions: ['earnManage:busValueCount:relevantData'],
     children: [
       {
         path: 'index/:id?',
@@ -209,7 +216,7 @@ export const dynamicRoutes = [
     path: '/earnManage/busValueCount/chart',
     component: Layout,
     hidden: true,
-    permissions: ['earnManage:busValueCount:chart'],
+    permissions: ['earnManage:busValueCount:graphicAnalysis'],
     children: [
       {
         path: 'index/:id?',
@@ -224,7 +231,7 @@ export const dynamicRoutes = [
     path: '/earnManage/server/list',
     component: Layout,
     hidden: true,
-    permissions: ['earnManage:server:list'],
+    permissions: ['earnManage:server:relevantData'],
     children: [
       {
         path: 'index/:serverId?',
@@ -238,7 +245,7 @@ export const dynamicRoutes = [
     path: '/earnManage/server/edit',
     component: Layout,
     hidden: true,
-    permissions: ['earnManage:server:edit'],
+    permissions: ['rocketmq:traffic'],
     children: [
       {
         path: 'index/:serverId?',
@@ -371,7 +378,7 @@ export const dynamicRoutes = [
     path: '/resource/serverRegister/monitorChart',
     component: Layout,
     hidden: true,
-    permissions: ['resource:serverRegister:echartView'],
+    permissions: ['rocketmq:traffic'],
     children: [
       {
         path: ':id?',
@@ -414,7 +421,7 @@ export const dynamicRoutes = [
     path: '/resource/switchRegister/monitorChart',
     component: Layout,
     hidden: true,
-    permissions: ['resource:switchRegister:echartView'],
+    permissions: ['resource:switchRegister:graphicAnalysis'],
     children: [
       {
         path: ':id?',
diff --git a/src/views/earnManage/busValueCount/busValueCount.vue b/src/views/earnManage/busValueCount/busValueCount.vue
index 9e19e65..9f97074 100644
--- a/src/views/earnManage/busValueCount/busValueCount.vue
+++ b/src/views/earnManage/busValueCount/busValueCount.vue
@@ -84,13 +84,13 @@
         config: {
           tableButton: {
             top: [
-              {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:monitorStategy:add'},
-              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'earnManage:server:export'},
+              {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'earnManage:busValueCount:add'},
+              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'earnManage:busValueCount:export'},
             ],
             line: [
-              {content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
-              {content: '重新计算', fnCode: 'calculate', type: 'text', icon: 'el-icon-brush', hasPermi: 'earnManage:server:calculate'},
-              {content: '图形查看', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'earnManage:server:graphicAnalysis'},
+              {content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:busValueCount:relevantData'},
+              {content: '重新计算', fnCode: 'calculate', type: 'text', icon: 'el-icon-brush', hasPermi: 'earnManage:busValueCount:calculate'},
+              {content: '图形查看', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'earnManage:busValueCount:graphicAnalysis'},
               {},{}
             ]
           }
diff --git a/src/views/earnManage/server/serverTabs.vue b/src/views/earnManage/server/serverTabs.vue
index 267d01b..b7b541f 100644
--- a/src/views/earnManage/server/serverTabs.vue
+++ b/src/views/earnManage/server/serverTabs.vue
@@ -197,7 +197,7 @@
           tableButton: {
             top: [
               {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'earnManage:server:export'},
-              {content: '图形分析', fnCode: 'echartView', type: 'success', icon: 'el-icon-data-analysis', hasPermi: 'earnManage:server:graphicAnalysis'},
+              {content: '图形分析', fnCode: 'echartView', type: 'success', icon: 'el-icon-data-analysis', hasPermi: 'rocketmq:traffic'},
               // {content: '生成月均日95值', fnCode: 'createData', type: 'success', icon: 'el-icon-data-analysis', hasPermi: 'earnManage:server:add'},
             ],
             line: [
diff --git a/src/views/resource/agentUpdate/agentUpdateView.vue b/src/views/resource/agentUpdate/agentUpdateView.vue
index 2bf3ff4..ecd99ad 100644
--- a/src/views/resource/agentUpdate/agentUpdateView.vue
+++ b/src/views/resource/agentUpdate/agentUpdateView.vue
@@ -50,8 +50,8 @@
             managePublicIp: {label: '管理网-公网IP', span: 18, type: 'input', disabled: true, hidden: this.paramsData && this.paramsData.readonly ? false : true},
             status: {label: '状态', span: 18, type: 'select', options: this.dict.type.rm_register_online_state, disabled: true, hidden: this.paramsData && this.paramsData.readonly ? false : true},
             agentVersion: {label: 'AGENT版本', span: 18, type: 'input', disabled: true, hidden: this.paramsData && this.paramsData.readonly ? false : true},
-            method: {label: '更新方式', span: 18, type: 'select', options: this.dict.type.policy_method, eventName: 'change', required: true, disabled: this.paramsData && this.paramsData.id ? true : false,},
-            scheduledUpdateTime: {label: '定时执行时间', span: 18, type: 'datetime', required: true, hidden: objVal && objVal.method === '1' ? false: true, disabled: this.paramsData && this.paramsData.id ? true : false,},
+            method: {label: '更新方式', span: 18, type: 'select', options: this.dict.type.policy_method, eventName: 'change', required: true},
+            scheduledUpdateTime: {label: '定时执行时间', span: 18, type: 'datetime', required: true, hidden: objVal && objVal.method === '1' ? false: true},
             // fileUrlType: {label: '文件格式', span: 18, type: 'radio', required: true,options: [{label: '外网HTTP(S)',value: '1'}], warningTitle: '注意：当文件大小超过100M时，请选择【外网HTTP(S)】地址格式'},
             fileUrl: {label: '文件地址', span: 18, type: 'input', required: true, placeholder: '请输入外网地址', warningTitle: '如：http://www.tr.com/server-1.1.1.jar'},
             fileMd5: {label: '文件MD5', span: 18, type: 'input', required: true},
diff --git a/src/views/resource/serverRegister/index.vue b/src/views/resource/serverRegister/index.vue
index 965732c..68311e8 100644
--- a/src/views/resource/serverRegister/index.vue
+++ b/src/views/resource/serverRegister/index.vue
@@ -108,7 +108,9 @@
         <!--    标签    -->
         <template #tempRemark="{ row, column }">
           <template v-if="row.remark">
-            <el-tag v-for="(item, index) of row.remark.split(',')" :style="{marginLeft: index !== 0 ? '5px' : null}">{{item}}</el-tag>
+            <el-tag v-for="(item, index) of row.remark.split(',')" :style="{marginLeft: index !== 0 ? '5px' : null}">
+              {{item}}<span v-if="index+1 !== row.remark.split(',').length" style="color: transparent;">,</span>
+            </el-tag>
           </template>
         </template>
         <template #tempHandle="{ row, column }">
@@ -204,7 +206,7 @@
           stratOpen: false,
           roleList: [],
           busNameList: [],
-          loading: true,
+          loading: false,
           showSearch: true,
           ids: [],
           single: true,
@@ -276,11 +278,12 @@
                 {content: '添加金山machineCode', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:serverRegister:add'},
                 {content: '修改业务名称', fnCode: 'edit', type: 'success', icon: 'el-icon-edit', hasPermi: 'resource:serverRegister:edit'},
                 {content: '批量增加标签', fnCode: 'tagRemark', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:serverRegister:tagRemark'},
+                {content: '流量图形展示', fnCode: 'trafficChart', type: 'primary', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:trafficChart'},
                 {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:serverRegister:export'},
               ],
               line: [
                 {content: '选择业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', showName: 'multiPublicIpStatus', showVal: '0', hasPermi: 'resource:serverRegister:pubilcNet'},
-                {content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:graphicAnalysis'},
+                {content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'rocketmq:traffic'},
                 {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:serverRegister:details'},
                 {title: '更多', more: [
                     {content: '下发业务', fnCode: 'issueBusiness', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:serverRegister:issueBusiness'},
@@ -380,6 +383,7 @@
           this.$modal.loading();
           listHandle(this.addDateRange(params)).then(response => {
             this.roleList = response.rows;
+            delete this.queryParams.resetVal;
             this.queryParams.total = response.total;
             this.$modal.closeLoading();
           }).catch(() => {
@@ -396,7 +400,7 @@
         /** 重置按钮操作 */
         resetQuery() {
           this.$refs['queryRef'].resetFields();
-          this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
+          this.queryParams = {pageNum: 1, pageSize: 10,total: 0, resetVal: true};
           // this.resetForm("queryRef");
           this.handleQuery();
         },
@@ -436,6 +440,21 @@
             this.loading = false;
           });
         },
+        /** 图形分析 */
+        graphicTraffic(list) {
+          // 生成唯一 key（避免数据冲突）
+          const storageKey = `temp_data_${Date.now()}`;
+          // 1. 将数据存入 localStorage（需序列化）
+          localStorage.setItem(storageKey, JSON.stringify({clientIdList: list}));
+          // 1. 用 Vue Router 解析目标路由的完整 URL
+          const routeLocation = this.$router.resolve({
+            name: 'TrafficChart',
+            query: { storageKey }
+          });
+          // 2. 打开新窗口（routeLocation.href 是完整路径）
+          window.open(routeLocation.href, '_blank');
+          // _blank：新标签页；_self：当前窗口（默认）
+        },
         callback(result, rowData, selectChange, selectList) {
           this.dialogRowData = {};
           if (result && result.fnCode) {
@@ -467,6 +486,27 @@
                   query: {clientId: rowData.clientId}
                 });
                 break;
+              case 'trafficChart':
+                if (selectList && selectList.length <= 0) {
+                  this.$modal.msgWarning("请选择数据！");
+                  return;
+                }
+                let clientIdData = {};
+                selectList.forEach(item => {
+                  let interFaceList = [];
+                  if (item && item.ip1InterfaceName) {
+                    interFaceList.push(item.ip1InterfaceName);
+                  }
+                  if (item && item.ip2InterfaceName) {
+                    interFaceList.push(item.ip2InterfaceName);
+                  }
+                  if (item && item.ip3InterfaceName) {
+                    interFaceList.push(item.ip3InterfaceName);
+                  }
+                  clientIdData[item.clientId] = interFaceList;
+                });
+                this.graphicTraffic(clientIdData);
+                break;
               case 'mtrChartVew':
                 this.mtrChartOpen = true;
                 this.dialogRowData = rowData;
diff --git a/src/views/resource/serverRegister/trafficChart.vue b/src/views/resource/serverRegister/trafficChart.vue
new file mode 100644
index 0000000..dbb7dfb
--- /dev/null
+++ b/src/views/resource/serverRegister/trafficChart.vue
@@ -0,0 +1,145 @@
+<template>
+  <div style="height: calc(100vh)!important; padding: 10px;">
+    <div class="w100 h100">
+      <div class="w100" style="text-align: right;">
+        <el-date-picker
+          v-model="timeList"
+          :style="{width: '360px!important', marginRight: '10px'}"
+          type="datetimerange"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          range-separator="至"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          @change="(val) => dateChange(val)"/>
+      </div>
+      <template v-for="(item,key, index) of echartListData">
+        <EchartsLine :lineData="item.dataVal" :title="item.title" class="w100 mt20 mb20" style="border: 1.5px solid #878787;height:200px;" :chartData="(valData, unit) => chartDataEvent(item, unit, key)"></EchartsLine>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {getNetTraffic, trafficEcharts} from "@/api/disRevenue/resource"
+  import EchartsLine from "@/components/echartsList/line.vue";
+  export default {
+    name: "trafficChart",
+    components: {EchartsLine},
+    data() {
+        return {
+          timeList: [],
+          paramsData: {},
+          currTimeList: {},
+          echartListData: {},
+          echartData: {
+            title: 'GE1/0/1的丢包数',
+            dataVal: {
+              titleVal: {textAlign: 'center'},
+              yAxisName: ' ',
+              gridTop: '30%',
+              legend: {top: '12%', left: '10%'},
+              hiddenTime: true,
+              lineXData: [],
+              unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
+              dataList: [{
+                name: '出战流量',
+                data: [],
+              },{
+                name: '入站流量',
+                data: []
+              }]
+            }
+          },
+        }
+    },
+    created() {
+      const now = new Date();
+      // 获取当前时间
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const day = String(now.getDate()).padStart(2, '0');
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const seconds = String(now.getSeconds()).padStart(2, '0');
+      // 正确计算前一天（处理跨月情况）
+      const prevDate = new Date(now);
+      prevDate.setDate(now.getDate() - 1);
+      const prevYear = prevDate.getFullYear();
+      const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0');
+      const prevDay = String(prevDate.getDate()).padStart(2, '0');
+      // 构建时间字符串
+      const timeString = `${hours}:${minutes}:${seconds}`;
+      const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`;
+      const endData = `${year}-${month}-${day} ${timeString}`;
+
+      this.currTimeList = {startTime: startData, endTime: endData};
+      this.timeList = [startData, endData];
+      this.initData();
+    },
+    methods: {
+      // 时间变化时
+      dateChange(val){
+        this.currTimeList = {startTime: val[0], endTime: val[1]};
+        this.getNetTraffic(this.paramsData.clientIdList);
+      },
+      initData(){
+        this.storageKey = this.$route.query && this.$route.query['storageKey'];
+        if (this.storageKey) {
+          this.paramsData = JSON.parse(localStorage.getItem(this.storageKey));
+          this.getNetTraffic(this.paramsData.clientIdList);
+        }
+      },
+      // 总流量图查询
+      getNetTraffic(val) {
+        getNetTraffic(Object.assign({},{clientInterfaces: val}, this.currTimeList)).then(res => {
+          if (res && res.data && res.data.length > 0) {
+            res.data.forEach(item => {
+              let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+              netEcharts.title = `【${item && item.clientId}】${item && item.interfaceName}`;
+              netEcharts.interfaceName = item && item.interfaceName;
+              netEcharts.dataVal.yAxisName = item && item.unit ? '单位' + item.unit : ' ';
+              netEcharts.dataVal.lineXData = item && item.xData.length > 0 ? item.xData : [];
+              netEcharts.dataVal['unitModel'] = item && item.unit || '';
+              netEcharts.dataVal.dataList[0].data = item && item.yData['netOutSpeedData'] || [];
+              netEcharts.dataVal.dataList[1].data = item && item.yData['netInSpeedData'] || [];
+              this.$set(this.echartListData, item.clientId, netEcharts);
+            });
+          }
+        });
+      },
+      // 单位查询
+      getTrafficChartData(clientIdTitle, titleName, unitData) {
+        return trafficEcharts(Object.assign(unitData || {}, {name : titleName,clientId: clientIdTitle}, this.currTimeList)).then(res => {
+          if (res && res.data) {
+            let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+            netEcharts.title = `【${clientIdTitle}】${titleName}`;
+            netEcharts.interfaceName = titleName;
+            netEcharts.dataVal.yAxisName = res.data && res.data.unit ? '单位' + res.data.unit : ' ';
+            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : [];
+            netEcharts.dataVal['unitModel'] = res.data && res.data.unit || '';
+            netEcharts.dataVal.dataList[0].data = res.data && res.data.yData['netOutSpeedData'] || [];
+            netEcharts.dataVal.dataList[1].data = res.data && res.data.yData['netInSpeedData'] || [];
+            this.$set(this.echartListData, clientIdTitle, netEcharts);
+          }
+          return true;
+        }).catch(() => {
+          return true;
+        });
+      },
+      async chartDataEvent(valData, unit, clientIdTitle) {
+        if (unit) {
+          await Promise.all([
+            this.$modal.loading(),
+            this.getTrafficChartData(clientIdTitle, valData.interfaceName,{unit: unit}),
+          ]);
+          this.$modal.closeLoading();
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>