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

1、监控看板功能优化 2、修改列表展示条数 3、优化并修改bug
2025-11-19 18:52:05 +08:00
parent f8864457e1
commit 550bcc4685
14 changed files with 341 additions and 187 deletions
@@ -36,7 +36,7 @@ export default {
    pageSizes: {
      type: Array,
      default() {
-        return [10, 20, 30, 50]
+        return [8, 10, 20, 30, 50]
      }
    },
    // 移动端页码按钮的数量端默认值5
@@ -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) {
@@ -17,7 +17,7 @@ const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
-  timeout: 10000
+  timeout: 30000
 })

 // request拦截器
@@ -97,7 +97,7 @@
        },
        queryParams: {
          pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
          total: 0,
        },
      }
@@ -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>
@@ -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>
            <!-- 编辑状态：显示输入框 -->
@@ -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>
@@ -209,7 +209,7 @@
        },
        queryParams: {
          pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
          total: 0,
          bandwidthType: undefined,
          hardwareSn: undefined,
@@ -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>
@@ -252,7 +252,7 @@
        },
        queryParams: {
          pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
          total: 0,
          uplinkSwitch:undefined,
          interfaceName:undefined,
@@ -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},
@@ -1,16 +1,19 @@
 <template>
  <div class="app-container">
-    <div class="w100" style="height: 60px;">
+    <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,51 +24,71 @@
              :value="item.value">
            </el-option>
          </el-select>
-          <el-button @click="viewMonitorChart">详情视图</el-button>
-        </div>
-    </div>
-    <div style="height: calc(100% - 60px);" class="w100">
-      <div class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
-        <div class="w100 h100" style="border: 1px solid #e8e8e8;display: flex;justify-content: center;align-items: center;flex-direction: column;">
-          <el-button type="primary" icon="el-icon-plus" plain circle @click="addMonitor"></el-button>
-          <div style="font-size: 1rem;margin-top: 5px;">新增监控配置</div>
+          <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 v-for="(chartItem, key, index) of lineDataParams" class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
-        <div class="w100 h100" style="border: 1px solid #e8e8e8; padding: 10px 10px 2px;">
-          <div class="w100" style="height: 20px">
-            <span>{{chartItem && chartItem.rmMonitorConfig && chartItem.rmMonitorConfig.configName}}</span>
-            <el-dropdown trigger="click" style="float: right;" @command="(command) => handleCommand(command, key, chartItem)">
+      <div style="height: calc(100% - 60px);" class="w100">
+        <div class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
+          <div class="w100 h100" style="border: 1px solid #e8e8e8;display: flex;justify-content: center;align-items: center;flex-direction: column;">
+            <el-button type="primary" icon="el-icon-plus" plain circle @click="addMonitor"></el-button>
+            <div style="font-size: 1rem;margin-top: 5px;">新增监控配置</div>
+          </div>
+        </div>
+        <div v-for="(chartItem, key, index) of lineDataParams" class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
+          <div class="w100 h100" style="border: 1px solid #e8e8e8; padding: 10px 10px 2px;">
+            <div class="w100" style="height: 20px">
+              <span>{{chartItem && chartItem.rmMonitorConfig && chartItem.rmMonitorConfig.configName}}</span>
+              <el-dropdown trigger="click" style="float: right;" @command="(command) => handleCommand(command, key, chartItem)">
              <span class="el-dropdown-link">
                <i class="el-icon-more" style="transform: rotate(90deg);"></i>
              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="item of btnList" :command="item" class="clearfix">
-                  {{item.title}}
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <div class="w100" style="height: calc(100% - 20px)">
-            <EchartsLine :lineData="chartItem && chartItem.echartList || {}" :title="chartItem && chartItem.echartList && chartItem.echartList.title || ''"  class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, key, unit)"></EchartsLine>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-for="item of btnList" :command="item" class="clearfix">
+                    {{item.title}}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="w100" style="height: calc(100% - 20px)">
+              <EchartsLine :lineData="chartItem && chartItem.echartList || {}" :title="chartItem && chartItem.echartList && chartItem.echartList.title || ''"  class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, key, unit)"></EchartsLine>
+            </div>
          </div>
        </div>
      </div>
-    </div>
-    <!--    弹窗  -->
-    <el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
-      <dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
-    </el-dialog>
+      <!--    弹窗  -->
+      <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",
-    components: {dialogMonitor, EchartsLine},
+    name: "monitor-board",
+    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.datetimeModel = [startData, endData];
+      this.currTimeList = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? {startTime: this.datetimeModelDefault[0], endTime: this.datetimeModelDefault[1]} : {startTime: startData, endTime: 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;
-        this.timeInterModel = setInterval(() => {
-          this.fnChartView();
-        }, Number(val));
+        if (val !== '0') {
+          this.timeInterModel = setInterval(() => {
+            this.fnChartView();
+          }, Number(val));
+        }
      },
      addMonitor() {
        this.open = true;
@@ -179,12 +218,18 @@
        }
        this.open = false;
      },
-      // 详细视图
-      viewMonitorChart() {
-        this.$router.push({
-          path: '/resource/monitorBoard/view',
-          query: {}
-        });
+      // 右上角点击详细视图
+      viewMonitorChart(val) {
+        this.activeType = val;
+        clearInterval(this.timeInterModel);
+        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) {
@@ -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.datetimeModel = [startData, endData];
-      this.lineDataParams['one'] = this.echartData;
+      this.currTimeList = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? {startTime: this.datetimeModelOne[0], endTime: this.datetimeModelOne[1]} : {startTime: startData, endTime: endData};
+      this.datetimeModel = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? this.datetimeModelOne : [startData, endData];
+      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 || [];
-            chart.dataList[1].data = item && item.yData  && item.yData.netOutSpeedData || [];
+            let netInSpeedData = [];
+            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;
-        this.timeInterModel = setInterval(() => {
-          this.fnChartView();
-        }, Number(val));
+        if (val !== '0') {
+          this.timeInterModel = setInterval(() => {
+            this.fnChartView();
+          }, Number(val));
+        }
      },
      // 按钮操作弹窗
      fnFormHandle(val) {
@@ -267,29 +314,44 @@
        this.fnChartView();
      },
      // 详细视图
-      viewMonitorChart() {
-        this.$router.push({
-          path: '/resource/monitorBoard',
-        });
+      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};
-        this.getList(paramsModel);
+        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) {
@@ -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;