From 550bcc468527acdd7e6d0b0c3e4c424f02b4953c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=B7=E5=86=89=E5=86=89?= <kangranran@dingxuantech.cn>
Date: Wed, 19 Nov 2025 18:52:05 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7=E7=9C=8B=E6=9D=BF=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E4=BC=98=E5=8C=96=E3=80=81=E4=BC=98=E5=8C=96=E5=B9=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1、监控看板功能优化
2、修改列表展示条数
3、优化并修改bug
---
 src/components/Pagination/index.vue           | 226 +++++++++---------
 src/components/echartsList/line.vue           |  43 ++++
 src/utils/request.js                          |   2 +-
 .../busValueCount/busValueCount.vue           |   2 +-
 src/views/earnManage/busValueCount/index.vue  |   4 +-
 .../businessIdent/businessIdent.vue           |   2 +-
 src/views/earnManage/server/index.vue         |   4 +-
 src/views/earnManage/server/serverTabs.vue    |   2 +-
 src/views/earnManage/switch/index.vue         |   4 +-
 src/views/earnManage/switch/switchTabs.vue    |   2 +-
 .../resource/monitorBoard/dialogMonitor.vue   |   2 +-
 .../resource/monitorBoard/monitorBoard.vue    | 127 ++++++----
 .../monitorBoard/monitorBoardView.vue         | 102 ++++++--
 src/views/resource/serverRegister/index.vue   |   6 +-
 14 files changed, 341 insertions(+), 187 deletions(-)

diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 53c72b4..63d837f 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,113 +1,113 @@
-<template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :pager-count="pagerCount"
-      :total="total"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
-</template>
-
-<script>
-import { scrollTo } from '@/utils/scroll-to'
-
-export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    // 移动端页码按钮的数量端默认值5
-    pagerCount: {
-      type: Number,
-      default: document.body.clientWidth < 992 ? 5 : 7
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
-      },
-      set(val) {
-        this.$emit('update:page', val)
-      }
-    },
-    pageSize: {
-      get() {
-        return this.limit
-      },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
-  },
-  methods: {
-    handleSizeChange(val) {
-      if (this.currentPage * val > this.total) {
-        this.currentPage = 1
-      }
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pagination-container {
-  background: #fff;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [8, 10, 20, 30, 50]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
diff --git a/src/components/echartsList/line.vue b/src/components/echartsList/line.vue
index 01f61d3..43119fd 100644
--- a/src/components/echartsList/line.vue
+++ b/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) {
diff --git a/src/utils/request.js b/src/utils/request.js
index 8266971..06a9aa7 100644
--- a/src/utils/request.js
+++ b/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拦截器
diff --git a/src/views/earnManage/busValueCount/busValueCount.vue b/src/views/earnManage/busValueCount/busValueCount.vue
index 1da40cf..fc2ce71 100644
--- a/src/views/earnManage/busValueCount/busValueCount.vue
+++ b/src/views/earnManage/busValueCount/busValueCount.vue
@@ -97,7 +97,7 @@
         },
         queryParams: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
           total: 0,
         },
       }
diff --git a/src/views/earnManage/busValueCount/index.vue b/src/views/earnManage/busValueCount/index.vue
index e591c0a..96c1d41 100644
--- a/src/views/earnManage/busValueCount/index.vue
+++ b/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>
diff --git a/src/views/earnManage/businessIdent/businessIdent.vue b/src/views/earnManage/businessIdent/businessIdent.vue
index ff1695d..c614cdc 100644
--- a/src/views/earnManage/businessIdent/businessIdent.vue
+++ b/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>
             <!-- 编辑状态：显示输入框 -->
diff --git a/src/views/earnManage/server/index.vue b/src/views/earnManage/server/index.vue
index b0d0f18..960e0a1 100644
--- a/src/views/earnManage/server/index.vue
+++ b/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>
diff --git a/src/views/earnManage/server/serverTabs.vue b/src/views/earnManage/server/serverTabs.vue
index f274871..267d01b 100644
--- a/src/views/earnManage/server/serverTabs.vue
+++ b/src/views/earnManage/server/serverTabs.vue
@@ -209,7 +209,7 @@
         },
         queryParams: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
           total: 0,
           bandwidthType: undefined,
           hardwareSn: undefined,
diff --git a/src/views/earnManage/switch/index.vue b/src/views/earnManage/switch/index.vue
index cf25069..f513aa8 100644
--- a/src/views/earnManage/switch/index.vue
+++ b/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>
diff --git a/src/views/earnManage/switch/switchTabs.vue b/src/views/earnManage/switch/switchTabs.vue
index f4a3154..9346a10 100644
--- a/src/views/earnManage/switch/switchTabs.vue
+++ b/src/views/earnManage/switch/switchTabs.vue
@@ -252,7 +252,7 @@
         },
         queryParams: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 8,
           total: 0,
           uplinkSwitch:undefined,
           interfaceName:undefined,
diff --git a/src/views/resource/monitorBoard/dialogMonitor.vue b/src/views/resource/monitorBoard/dialogMonitor.vue
index e913e69..8c6252b 100644
--- a/src/views/resource/monitorBoard/dialogMonitor.vue
+++ b/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},
diff --git a/src/views/resource/monitorBoard/monitorBoard.vue b/src/views/resource/monitorBoard/monitorBoard.vue
index 4d04712..cf47aef 100644
--- a/src/views/resource/monitorBoard/monitorBoard.vue
+++ b/src/views/resource/monitorBoard/monitorBoard.vue
@@ -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) {
diff --git a/src/views/resource/monitorBoard/monitorBoardView.vue b/src/views/resource/monitorBoard/monitorBoardView.vue
index 7333535..9ebd1f5 100644
--- a/src/views/resource/monitorBoard/monitorBoardView.vue
+++ b/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.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) {
diff --git a/src/views/resource/serverRegister/index.vue b/src/views/resource/serverRegister/index.vue
index 2774a72..fb640fb 100644
--- a/src/views/resource/serverRegister/index.vue
+++ b/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;