监控看板功能优化、优化并修改bug

1、监控看板功能优化
2、修改列表展示条数
3、优化并修改bug

src/components/Pagination/index.vue

@@ -36,7 +36,7 @@ export default {
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50]
+        return [8, 10, 20, 30, 50]
       }
     },
     // 移动端页码按钮的数量端默认值5

src/components/echartsList/line.vue

@@ -191,9 +191,27 @@
                 show: true,
               },
             },
+            // 配置高亮状态下的样式
+            emphasis: dataXY && dataXY.highlight ? {
+              itemStyle: {
+                borderWidth: 2,      // 边框加粗
+                shadowBlur: 5,      // 添加阴影光晕
+              },
+              label: {
+                show: false,          // 高亮时显示标签
+              }
+            } : {},
             series: series
           };
           lineDataListIntance.setOption(option);
+          if (dataXY && dataXY.highlight) {
+            // 然后高亮当前点击的数据点
+            lineDataListIntance.dispatchAction({
+              type: 'highlight', // 高亮类型
+              seriesIndex: 0, // 系列索引，从点击事件参数中获取
+              dataIndex: 0 // 数据索引，从点击事件参数中获取
+            });
+          }
           if (dataXY && dataXY.unitSelList && dataXY.unitSelList.length > 0) {
             // 初始化图表后，调用方法定位下拉框
             this.positionYAxisSelector(lineDataListIntance);
@@ -207,6 +225,31 @@
           lineDataListIntance.off('click');
           lineDataListIntance.on("click", function(params) {
             that.$emit("chartClickModel", {params: params});
+            if (dataXY && dataXY.highlight) {
+              // 首先取消之前可能存在的高亮状态
+              lineDataListIntance.dispatchAction({
+                type: 'downplay' // 取消所有数据点的高亮
+              });
+
+              // 然后高亮当前点击的数据点
+              setTimeout(() => {
+                lineDataListIntance.dispatchAction({
+                  type: 'highlight', // 高亮类型
+                  seriesIndex: params.seriesIndex, // 系列索引，从点击事件参数中获取
+                  dataIndex: params.dataIndex // 数据索引，从点击事件参数中获取
+                });
+              },1000);
+            }
+          });
+          // 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮）
+          lineDataListIntance.on('mouseover', (params) => {
+            // 这个函数体为空，或者只包含一些不涉及downplay的逻辑
+            // 这样就阻止了鼠标移出时高亮自动消失
+          });
+        // 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮）
+          lineDataListIntance.on('mouseout', (params) => {
+            // 这个函数体为空，或者只包含一些不涉及downplay的逻辑
+            // 这样就阻止了鼠标移出时高亮自动消失
           });
         },
         positionYAxisSelector(chartInstance) {

src/utils/request.js

@@ -17,7 +17,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 30000
 })
 
 // request拦截器

src/views/earnManage/busValueCount/busValueCount.vue

@@ -97,7 +97,7 @@
         },
         queryParams: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
           total: 0,
         },
       }

src/views/earnManage/busValueCount/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" style="height: calc(100vh - 85px);">
-    <el-tabs class="h100" v-model="activeName">
+    <el-tabs style="height: calc(100% - 35px);" v-model="activeName">
       <el-tab-pane label="1000计算方式" name="1000">
         <busValueCount v-if="activeName === '1000'" :activeName="activeName"></busValueCount>
       </el-tab-pane>
@@ -37,6 +37,6 @@
   ::v-deep .el-tabs__content{
     height: 100%;
     overflow: auto;
-    padding-bottom: 40px;
+    padding-bottom: 10px;
   }
 </style>

src/views/earnManage/businessIdent/businessIdent.vue

@@ -23,7 +23,7 @@
           <!-- 非编辑状态：显示文本 -->
           <template v-if="!row.editStatus">
             <span>{{ row.businessName }}</span>
-            <el-button icon="el-icon-edit" type="text" @click="rowDataChange(row)"></el-button>
+            <el-button icon="el-icon-edit" style="padding: 0px;" type="text" @click="rowDataChange(row)"></el-button>
           </template>
           <template v-else>
             <!-- 编辑状态：显示输入框 -->

src/views/earnManage/server/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" style="height: calc(100vh - 85px);">
-    <el-tabs class="h100" v-model="activeName">
+    <el-tabs style="height: calc(100% - 35px);" v-model="activeName">
       <el-tab-pane label="1000计算方式" name="1000">
         <ServerTabs v-if="activeName === '1000'" :activeName="activeName"></ServerTabs>
       </el-tab-pane>
@@ -37,6 +37,6 @@
   ::v-deep .el-tabs__content{
     height: 100%;
     overflow: auto;
-    padding-bottom: 40px;
+    padding-bottom: 10px;
   }
 </style>

src/views/earnManage/server/serverTabs.vue

@@ -209,7 +209,7 @@
         },
         queryParams: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
           total: 0,
           bandwidthType: undefined,
           hardwareSn: undefined,

src/views/earnManage/switch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" style="height: calc(100vh - 85px);">
-    <el-tabs class="h100" v-model="activeName">
+    <el-tabs style="height: calc(100% - 35px);" v-model="activeName">
       <el-tab-pane label="1000计算方式" name="1000">
         <SwitchTabs v-if="activeName === '1000'" :activeName="activeName"></SwitchTabs>
       </el-tab-pane>
@@ -37,6 +37,6 @@
   ::v-deep .el-tabs__content{
     height: 100%;
     overflow: auto;
-    padding-bottom: 40px;
+    padding-bottom: 10px;
   }
 </style>

src/views/earnManage/switch/switchTabs.vue

@@ -252,7 +252,7 @@
         },
         queryParams: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
           total: 0,
           uplinkSwitch:undefined,
           interfaceName:undefined,

src/views/resource/monitorBoard/dialogMonitor.vue

@@ -58,7 +58,7 @@
             id: {label: 'ID',hidden: true},
             configName: {label: '配置名称', span: 18, type: 'input', required: true},
             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},
+            resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', required: true, 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: [], disabled: this.ruleFormData && this.ruleFormData.id ? true : false, hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '3' ? false : true},

src/views/resource/monitorBoard/monitorBoard.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="app-container">
+    <template v-if="activeType === '1'">
       <div class="w100" style="height: 60px;">
         <div class="fr" style="text-align: right;">
           <el-date-picker
             v-model="datetimeModel"
             style="width: 360px!important;margin-right: 10px;"
             type="datetimerange"
+            unlink-panels
             format="yyyy-MM-dd HH:mm:ss"
             value-format="yyyy-MM-dd HH:mm:ss"
             range-separator="至"
             start-placeholder="开始日期时间"
             end-placeholder="结束日期时间"
+            :default-time="['00:00:00', '23:59:59']"
             @change="dateChange">
           </el-date-picker>
           <el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;" @change="fnTimeInter">
@@ -21,7 +24,8 @@
               :value="item.value">
             </el-option>
           </el-select>
-          <el-button @click="viewMonitorChart">详情视图</el-button>
+          <el-button :type="activeType === '1' ? 'primary' : ''" @click="viewMonitorChart('1')">概览视图</el-button>
+          <el-button :type="activeType === '2' ? 'primary' : ''" @click="viewMonitorChart('2')">详情视图</el-button>
         </div>
       </div>
       <div style="height: calc(100% - 60px);" class="w100">
@@ -56,16 +60,35 @@
       <el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
         <dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
       </el-dialog>
+    </template>
+    <template v-else>
+      <monitorBoardView :timeModelOne="timeModel" :datetimeModelOne="datetimeModel" :activeType="activeType" @activeTypeChange="fnActiveTypeChange"></monitorBoardView>
+    </template>
   </div>
 </template>
 
 <script>
   import dialogMonitor from './dialogMonitor';
+  import monitorBoardView from './monitorBoardView';
   import EchartsLine from "@/components/echartsList/line.vue";
   import {monitorViewChart, delMonitorConfig} from "@/api/disRevenue/resource";
   export default {
-    name: "monitorBoard",
+    name: "monitor-board",
-    components: {dialogMonitor, EchartsLine},
+    components: {dialogMonitor,monitorBoardView, EchartsLine},
+    props: {
+      timeModelDefault: {
+        type: String,
+        default: '30000'
+      },
+      datetimeModelDefault: {
+        type: Array,
+        default: () => []
+      },
+      activeTypeDefault: {
+        type: String,
+        default: '1'
+      }
+    },
     data() {
         return {
           formModel: {},
@@ -74,6 +97,7 @@
           timeModel: '30000',
           timeInterModel: null,
           open: false,
+          activeType: '1',
           timeModelOptions: [
             {value: '30000', label: '30s刷新'},
             {value: '10000', label: '10s刷新'},
@@ -106,8 +130,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.currTimeList = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? {startTime: this.datetimeModelDefault[0], endTime: this.datetimeModelDefault[1]} : {startTime: startData, endTime: endData};
-      this.datetimeModel = [startData, endData];
+      this.datetimeModel = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? this.datetimeModelDefault : [startData, endData];
       this.fnChartView({});
     },
     beforeDestroy() {
@@ -117,6 +141,7 @@
     methods: {
       // 查询流量图
       fnChartView(unitVal,keyName) {
+        this.$modal.loading();
         monitorViewChart(Object.assign({}, this.currTimeList, unitVal)).then(res => {
           let dataList = {};
           res && res.data.forEach(item => {
@@ -128,6 +153,16 @@
               chart.unitSelList = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
             }
             chart.lineXData = item && item.xData || [];
+            if (item && item.yData && item.yData.netInSpeedData) {
+              if (!item.yData.netInSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
+                item.yData.netInSpeedData[0] = '0';
+              }
+            }
+            if (item && item.yData && item.yData.netOutSpeedData) {
+              if (!item.yData.netOutSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
+                item.yData.netOutSpeedData[0] = '0';
+              }
+            }
             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;
@@ -143,9 +178,11 @@
               };
             }
           }
+          this.$modal.closeLoading();
           // 循环定时查询
           this.fnTimeInter(this.timeModel);
         }).catch(() => {
+          this.$modal.closeLoading();
           // 循环定时查询
           this.fnTimeInter(this.timeModel);
         });
@@ -159,9 +196,11 @@
       fnTimeInter(val) {
         clearInterval(this.timeInterModel);
         this.timeInterModel = null;
+        if (val !== '0') {
           this.timeInterModel = setInterval(() => {
             this.fnChartView();
           }, Number(val));
+        }
       },
       addMonitor() {
         this.open = true;
@@ -179,12 +218,18 @@
         }
         this.open = false;
       },
-      // 详细视图
+      // 右上角点击详细视图
-      viewMonitorChart() {
+      viewMonitorChart(val) {
-        this.$router.push({
+        this.activeType = val;
-          path: '/resource/monitorBoard/view',
+        clearInterval(this.timeInterModel);
-          query: {}
+        this.timeInterModel = null;
-        });
+      },
+      // 子页面点击切换返回该页面
+      fnActiveTypeChange(val) {
+        this.timeModel = val && val.timeModel;
+        this.activeType = val && val.activeType;
+        this.datetimeModel = val && val.datetimeModel;
+        this.fnChartView({});
       },
       // 右侧点击下拉按钮
       handleCommand(val, chartKey, chartVal) {

src/views/resource/monitorBoard/monitorBoardView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div :class="datetimeModelOne && datetimeModelOne.length > 0 ? 'h100' : '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">
@@ -19,11 +19,13 @@
           v-model="datetimeModel"
           style="width: 360px!important;margin-right: 10px;"
           type="datetimerange"
+          unlink-panels
           format="yyyy-MM-dd HH:mm:ss"
           value-format="yyyy-MM-dd HH:mm:ss"
           range-separator="至"
           start-placeholder="开始日期时间"
           end-placeholder="结束日期时间"
+          :default-time="['00:00:00', '23:59:59']"
           @change="dateChange">
         </el-date-picker>
         <el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;" @change="fnTimeInter">
@@ -34,7 +36,8 @@
             :value="item.value">
           </el-option>
         </el-select>
-        <el-button @click="viewMonitorChart">概览视图</el-button>
+        <el-button :type="activeType === '1' ? 'primary' : ''" @click="viewMonitorChart('1')">概览视图</el-button>
+        <el-button :type="activeType === '2' ? 'primary' : ''" @click="viewMonitorChart('2')">详情视图</el-button>
       </div>
     </div>
     <div style="height: calc(100% - 60px);" class="w100">
@@ -66,6 +69,20 @@
   export default {
     name: "monitorBoardView",
     components: {dialogMonitor, EchartsLine, TableList},
+    props: {
+      timeModelOne: {
+        type: String,
+        default: '30000'
+      },
+      datetimeModelOne: {
+        type: Array,
+        default: () => []
+      },
+      activeTypeOne: {
+        type: String,
+        default: '2'
+      }
+    },
     data() {
       return {
         paramsData: {},
@@ -76,6 +93,7 @@
         datetimeModel: [],
         timeModel: '30000',
         timeInterModel: null,
+        activeType: '2',
         open: false,
         timeModelOptions: [
           {value: '30000', label: '30s刷新'},
@@ -86,6 +104,7 @@
           title: ' ',
           yAxisName: ' ',
           unitModel: 'Kb',
+          highlight: true,
           unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
           legend: {bottom: '0%'},
           gridTop: '40px',
@@ -111,6 +130,7 @@
       }
     },
     created() {
+      this.activeType = this.activeTypeOne;
       this.paramsData = this.$route && this.$route.query;
       this.configModel = this.paramsData && this.paramsData.id ? Number(this.paramsData.id) : '';
       let startData = '';
@@ -121,9 +141,9 @@
       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.currTimeList = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? {startTime: this.datetimeModelOne[0], endTime: this.datetimeModelOne[1]} : {startTime: startData, endTime: endData};
-      this.datetimeModel = [startData, endData];
+      this.datetimeModel = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? this.datetimeModelOne : [startData, endData];
-      this.lineDataParams['one'] = this.echartData;
+      this.timeModel = this.timeModelOne;
       this.fnConfigName();
       if (this.configModel) {
         this.fnChartView();
@@ -139,10 +159,10 @@
         this.lineDataParams = {};
         monitorViewChart(Object.assign(unitData || {},this.currTimeList, {monitorId: this.configModel})).then(res => {
           let dataList = {};
+          let searchListData = {};
           res && res.data.forEach(item => {
             let chart = JSON.parse(JSON.stringify(this.echartData));
             let modelVal = item && item.rmMonitorConfig || {id: 'one', configName: 'one'};
-            modelVal['deployDevice'] = modelVal.resourceType === '3' ? [] : item && item.yData  && item.yData.deployDevice || [];
             this.reserveForm = modelVal;
             this.columns = {};
             this.config = {};
@@ -153,8 +173,29 @@
               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 || [];
+            let netInSpeedData = [];
-            chart.dataList[1].data = item && item.yData  && item.yData.netOutSpeedData || [];
+            let netOutSpeedData = [];
+            if (item && item.yData && item.yData.netInSpeedData) {
+              if (!item.yData.netInSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
+                item.yData.netInSpeedData[0] = '0';
+              }
+            }
+            if (item && item.yData && item.yData.netOutSpeedData) {
+              if (!item.yData.netOutSpeedData.some(item => item && typeof Number(item) === 'number' && !isNaN(item))) {
+                item.yData.netOutSpeedData[0] = '0';
+              }
+            }
+            if (item && item.yData && item.yData.deployDevice && item.yData.deployDevice.length > 0) {
+              item && item.yData && item.yData.netInSpeedData.map((valData,index) => {
+                netInSpeedData.push({value: valData, clientId: item.yData['deployDevice'][index] || null});
+              });
+              item && item.yData  && item.yData.netOutSpeedData.map((valData,index) => {
+                netOutSpeedData.push({value: valData, clientId: item.yData['deployDevice'][index] || null});
+              });
+            }
+            searchListData = {content: netInSpeedData && netInSpeedData[0], name: item && item.xData[0]};
+            chart.dataList[0].data = netInSpeedData || [];
+            chart.dataList[1].data = netOutSpeedData || [];
             dataList[modelVal.configName + '_' + modelVal.id] = chart;
           });
           if (dataList && Object.keys(dataList).length > 0) {
@@ -162,6 +203,10 @@
           } else {
             this.lineDataParams['one'] = this.echartData;
           }
+          this.roleList = [];
+          this.queryParams.total = 0;
+          // // 默认展示第一个点的数据
+          this.chartClickModel({params: {value: searchListData.content.value, name: searchListData.name, data: {clientId: searchListData.content.clientId}}});
           // 循环定时查询
           this.fnTimeInter(this.timeModel);
         }).catch(() => {
@@ -219,9 +264,11 @@
       fnTimeInter(val) {
         clearInterval(this.timeInterModel);
         this.timeInterModel = null;
+        if (val !== '0') {
           this.timeInterModel = setInterval(() => {
             this.fnChartView();
           }, Number(val));
+        }
       },
       // 按钮操作弹窗
       fnFormHandle(val) {
@@ -267,29 +314,44 @@
         this.fnChartView();
       },
       // 详细视图
-      viewMonitorChart() {
+      viewMonitorChart(val) {
+        this.activeType = val;
+        if (val && val === '1') {
+          if (this.paramsData && this.paramsData.id) {
             this.$router.push({
               path: '/resource/monitorBoard',
             });
+          } else {
+            this.$emit("activeTypeChange", {activeType: val, timeModel: this.timeModel, datetimeModel: this.datetimeModel});
+          }
+        }
       },
       // 点击图表
       chartClickModel(chart) {
-        let paramsModel = {clientIds: this.reserveForm.deployDevice.toString(), startTime: chart.params.name, endTime: chart.params.name};
+        if (Number(chart.params.value) !== 0) {
+          let paramsModel = {clientIds: chart.params.data.clientId, startTime: chart.params.name, endTime: chart.params.name};
           this.getList(paramsModel);
+        }
       },
       getList(val) {
         if (this.reserveForm && (this.reserveForm.resourceType === '1' || this.reserveForm.resourceType === '3')) {
+          this.$modal.loading();
           getBandWidthList(Object.assign({}, this.queryParams, val)).then(response => {
             this.roleList = response.rows;
             this.queryParams.total = response.total;
-            this.loading = false;
+            this.$modal.closeLoading();
+          }).catch(() => {
+            this.$modal.closeLoading();
           });
         } else if (this.reserveForm.resourceType === '2') {
+          this.$modal.loading();
           getSwitchInfoList(Object.assign({}, this.queryParams, val)).then(response => {
             this.roleList = response.rows;
             this.queryParams.total = response.total;
-            this.loading = false;
+            this.$modal.closeLoading();
-          })
+          }).catch(() => {
+            this.$modal.closeLoading();
+          });
         }
       },
       chartDataEvent(valData, unit) {

src/views/resource/serverRegister/index.vue

@@ -307,8 +307,12 @@
         },
         /** 查询角色列表 */
         getList() {
+          let params = JSON.parse(JSON.stringify(this.queryParams));
+          if (params && !params.queryParam) {
+            params.queryParam = null;
+          }
           this.loading = true;
-          listHandle(this.addDateRange(this.queryParams)).then(response => {
+          listHandle(this.addDateRange(params)).then(response => {
             this.roleList = response.rows;
             this.queryParams.total = response.total;
             this.loading = false;