From 83719d9ea9001ad260ec845cdc2b193607031961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com>
Date: Tue, 9 Aug 2022 17:49:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9E=E6=97=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=95=8C=E9=9D=A2=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/DeviceManagementApi.js              |  10 +
 src/utils/config.js                           |   2 +-
 .../FacilityManagement/FacilityLists.vue      |  12 +-
 .../FacilityManagement/OperationLogs.vue      |  72 ++++++--
 src/views/FacilityManagement/RealTimeDate.vue | 171 +++++++++++++-----
 .../FacilityManagement/RealTimeEcharts.vue    |  77 ++++++--
 src/views/NewMainPage.vue                     |  34 +++-
 .../NewMainPageComponents/LeftCenter.vue      |   6 +-
 src/views/NewMainPageComponents/LowerLeft.vue |  54 ++++++
 .../NewMainPageComponents/RightBottom.vue     |  10 +-
 src/views/NewMainPageComponents/RightTop.vue  |   6 +-
 11 files changed, 358 insertions(+), 96 deletions(-)

diff --git a/src/utils/DeviceManagementApi.js b/src/utils/DeviceManagementApi.js
index ef09c76..dc9d380 100644
--- a/src/utils/DeviceManagementApi.js
+++ b/src/utils/DeviceManagementApi.js
@@ -40,6 +40,16 @@ export function getRemindInformation() {
   return getRequest('api/api/configure/get/remind')
 }
 
+// 获取设备状态总览信息
+export function getServerState() {
+  return getRequest('api/api/server/get/server')
+}
+
+// 修改设备状态总览信息
+export function updateServerState(query) {
+  return postRequest('api/api/server/update', query)
+}
+
 export function updateRemind(query) {
   return postRequest('api/api/configure/update/remind', query)
 }
diff --git a/src/utils/config.js b/src/utils/config.js
index 6a81261..fdc599f 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -4,5 +4,5 @@ module.exports = {
   // baseUrl: '120.25.106.20:2011'
   // baseUrl: '120.25.106.20:2011'
   // baseUrl: 'localhost:40000'
-  baseUrl: '192.168.0.100:2011'
+  baseUrl: '192.168.0.105:2011'
 }
diff --git a/src/views/FacilityManagement/FacilityLists.vue b/src/views/FacilityManagement/FacilityLists.vue
index 4f5d3af..063c2c3 100644
--- a/src/views/FacilityManagement/FacilityLists.vue
+++ b/src/views/FacilityManagement/FacilityLists.vue
@@ -49,8 +49,8 @@
         </div>
 
         <!-- 数据表格模块 -->
-        <div v-loading="loading" style="height: 470px">
-          <el-table :data="tableData" stripe size="mini" style="width: 100%" @selection-change="handleSelectionChange">
+        <div v-loading="loading" style="height: 680px">
+          <el-table :data="tableData" stripe size="mini" style="width: 100%;height: 90%" @selection-change="handleSelectionChange">
             <el-table-column
               type="selection"
               width="55"
@@ -67,7 +67,7 @@
               label="状态"
               :filters="filterData"
               :filter-method="filterHandler"
-              width="80"
+              width="100"
             >
               <template slot-scope="scope">
                 <div>
@@ -92,7 +92,7 @@
                 <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="操作" width="400">
+            <el-table-column label="操作" width="640">
               <template slot-scope="scope">
                 <el-button
                   size="mini"
@@ -1246,5 +1246,9 @@ export default {
     background-color: #4a74ff; /*滚动条的背景颜色*/
   }
 }
+/deep/ .el-table__body-wrapper .cell {
+  height: 4.5vh;
+  line-height:4.5vh;
+}
 </style>
 
diff --git a/src/views/FacilityManagement/OperationLogs.vue b/src/views/FacilityManagement/OperationLogs.vue
index 5c2ac91..6746fed 100644
--- a/src/views/FacilityManagement/OperationLogs.vue
+++ b/src/views/FacilityManagement/OperationLogs.vue
@@ -7,8 +7,8 @@
         <el-row :gutter="20">
           <el-col :span="10">
             <!-- 查询模块 -->
-            <div style="height: 200px;display: inline-block;">
-              <div style="height: 100px;width: 100%" />
+            <div style="height: 220px;display: inline-block;">
+              <div style="height: 130px;width: 100%" />
               <el-form
                 :inline="true"
                 :model="realTime"
@@ -17,19 +17,24 @@
                 @submit.native.prevent
               >
                 <el-form-item>
-                  <el-input
+                  <!--                  <el-input
                     v-model="realTime.equipmentId"
                     placeholder="请输入设备ID"
                     clearable
+                  />-->
+                  <el-input
+                    v-model="search1"
+                    placeholder="请输入设备ID搜索"
+                    clearable
                   />
                 </el-form-item>
                 <el-form-item>
-                  <el-select v-model="realTime.areaId" clearable placeholder="请选择设备区域">
+                  <el-select v-model="search2" clearable placeholder="请选择设备区域">
                     <el-option
-                      v-for="item in realTime"
-                      :key="item.areaId"
-                      :label="item.areaId"
-                      :value="item.areaId"
+                      v-for="item in getAreaIdForm"
+                      :key="item"
+                      :label="item"
+                      :value="item"
                     />
                   </el-select>
                 </el-form-item>
@@ -44,8 +49,8 @@
           </el-col>
           <el-col :span="12">
             <!--    仪表盘    -->
-            <div style="height: 200px;display: inline-block">
-              <div style="height: 30px" />
+            <div style="height: 220px;display: inline-block">
+              <div style="height: 20px" />
               <RealTimeEcharts
                 :passed="theRealTime.thePassedNumber"
                 :police="theRealTime.thePoliceNumber"
@@ -62,10 +67,11 @@
         <!-- 数据表格模块 -->
         <div v-loading="loading" style="height: 470px;padding-left: 50px">
           <el-table
-            :data="realTime"
+            :data="isSearch()"
             stripe
+            height="550px"
             size="mini"
-            style="width: 100%"
+            style="width: 100%;height: 550px;overflow-y: scroll;overflow-x: hidden"
             tooltip-effect="dark"
           >
             <el-table-column prop="equipmentId" label="设备ID" width="250" />
@@ -73,27 +79,27 @@
               prop="areaId"
               show-overflow-tooltip
               label="设备区域"
-              width="250"
+              width="270"
             />
             <el-table-column
               prop="passedNumber"
               show-overflow-tooltip
               label="通过人数"
-              width="250"
+              width="270"
             />
             <el-table-column
               prop="policeNumber"
               label="报警人数"
               sortable
-              width="250"
+              width="270"
             />
             <el-table-column
               prop="policeRate"
               label="报警率"
               sortable
-              width="250"
+              width="270"
             />
-            <el-table-column label="操作" align="center" prop="auditStatus" width="180" fixed="right">
+            <el-table-column label="操作" align="left" prop="auditStatus" sortable width="250">
               <template slot-scope="scope">
                 <el-button type="text" size="large" @click="audit(scope.row)">
                   操作
@@ -105,7 +111,7 @@
         <!-- 数据表格模块 -->
 
         <!-- 分页 -->
-        <!--        <div
+        <div
           v-if="pager.totalPage > 10"
           style="
             text-align: center;
@@ -122,7 +128,7 @@
             :current-page.sync="pager.currentPage"
             @current-change="change"
           />
-        </div>-->
+        </div>
         <!-- 分页 /-->
       </div>
     </EmptyCard>
@@ -144,6 +150,8 @@ export default {
   },
   data() {
     return {
+      search1: '',
+      search2: '',
       theRealTime: {
         theEquipmentId: '',
         thePassedNumber: '',
@@ -179,15 +187,41 @@ export default {
   computed: {
     realTime() {
       return this.$store.state.dataPageData.realTime
+    },
+    getAreaIdForm() {
+      const areaIdForm = []
+      const newAreaIdForm = []
+      for (let i = 0; i < this.$store.state.dataPageData.realTime.length; i++) {
+        areaIdForm.push(this.$store.state.dataPageData.realTime[i].areaId)
+      }
+      areaIdForm.forEach(item => {
+        if (!newAreaIdForm.includes(item)) {
+          newAreaIdForm.push(item)
+        }
+      })
+      return newAreaIdForm // 返回一个新数组
     }
   },
   watch: {},
   created() {
+    console.log('###################qqq' + this.search1)
+    console.log('###################www' + this.search2)
   },
   mounted() {
     this.getWebSocket()
   },
   methods: {
+    isSearch() {
+      if (this.search1 === '' && this.search2 === '') {
+        return this.$store.state.dataPageData.realTime
+      } else if (this.search1 !== '' && this.search2 === '') {
+        return this.$store.state.dataPageData.realTime.filter(data => !this.search1 || data.equipmentId.toLowerCase().includes(this.search1.toLowerCase()))
+      } else if (this.search1 === '' && this.search2 !== '') {
+        return this.$store.state.dataPageData.realTime.filter(data => !this.search2 || data.areaId.toLowerCase().includes(this.search2.toLowerCase()))
+      } else if (this.search1 !== '' && this.search2 !== '') {
+        return this.$store.state.dataPageData.realTime.filter(data => (!this.search1 || (data.equipmentId.toLowerCase().includes(this.search1.toLowerCase())) && (!this.search2 || data.areaId.toLowerCase().includes(this.search2.toLowerCase()))))
+      }
+    },
     audit(row) {
       this.theRealTime.theEquipmentId = row.equipmentId
       this.theRealTime.thePassedNumber = row.passedNumber
diff --git a/src/views/FacilityManagement/RealTimeDate.vue b/src/views/FacilityManagement/RealTimeDate.vue
index 8aa02aa..5781a02 100644
--- a/src/views/FacilityManagement/RealTimeDate.vue
+++ b/src/views/FacilityManagement/RealTimeDate.vue
@@ -5,7 +5,7 @@
     <EmptyCard>
       <div slot="EmptyCard">
         <el-row :gutter="20">
-          <el-col :span="8">
+          <!--          <el-col :span="8">
             <el-card style="height: 270px;width: 100%;display: inline-block;float: left">
               <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                 <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">服务器信息</span>
@@ -18,44 +18,96 @@
                 </el-form-item>
               </el-form>
             </el-card>
-          </el-col>
+          </el-col>-->
           <el-col :span="8">
-            <el-card style="height: 270px;width: 100%;display: inline-block;float: left">
-              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+            <el-card style="height: 310px;width: 100%;display: inline-block;float: left">
+              <el-form ref="switchForm" :label-position="labelPosition" label-width="80px" :model="switchForm">
                 <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">主交换机信息</span>
                 <div style="height: 15px" />
-                <el-form-item label="型号">
-                  <el-input v-model="formLabelAlign.name" />
+                <el-form-item
+                  label="型号"
+                  prop="model"
+                  :rules="{
+                    required: true, message: '型号不能为空', trigger: 'blur'
+                  }"
+                >
+                  <el-input v-model="switchForm.model" />
                 </el-form-item>
-                <el-form-item label="端口号">
-                  <el-input v-model="formLabelAlign.region" />
+                <el-form-item
+                  label="端口号"
+                  prop="portNumber"
+                  :rules="{
+                    required: true, message: '端口号不能为空', trigger: 'blur'
+                  }"
+                >
+                  <el-input v-model="switchForm.portNumber" />
                 </el-form-item>
-                <el-form-item label="数量">
-                  <el-input v-model="formLabelAlign.region" />
+                <el-form-item
+                  label="数量"
+                  prop="quantity"
+                  :rules="{
+                    required: true, message: '数量不能为空', trigger: 'blur'
+                  }"
+                >
+                  <el-input v-model="switchForm.quantity" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('switchForm')">
+                    保存
+                  </el-button>
+                  <el-button @click="resetForm('switchForm')">
+                    重置
+                  </el-button>
                 </el-form-item>
               </el-form>
             </el-card>
           </el-col>
           <el-col :span="8">
-            <el-card style="height: 270px;width: 100%;display: inline-block;float: left">
-              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+            <el-card style="height: 310px;width: 100%;display: inline-block;float: left">
+              <el-form ref="routerForm" :label-position="labelPosition" label-width="80px" :model="routerForm">
                 <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">无线路由器信息</span>
                 <div style="height: 15px" />
-                <el-form-item label="型号">
-                  <el-input v-model="formLabelAlign.name" />
+                <el-form-item
+                  label="型号"
+                  prop="model"
+                  :rules="{
+                    required: true, message: '型号不能为空', trigger: 'blur'
+                  }"
+                >
+                  <el-input v-model="routerForm.model" />
                 </el-form-item>
-                <el-form-item label="端口号">
-                  <el-input v-model="formLabelAlign.region" />
+                <el-form-item
+                  label="端口号"
+                  prop="portNumber"
+                  :rules="{
+                    required: true, message: '端口号不能为空', trigger: 'blur'
+                  }"
+                >
+                  <el-input v-model="routerForm.portNumber" />
                 </el-form-item>
-                <el-form-item label="数量">
-                  <el-input v-model="formLabelAlign.region" />
+                <el-form-item
+                  label="数量"
+                  prop="quantity"
+                  :rules="{
+                    required: true, message: '数量不能为空', trigger: 'blur'
+                  }"
+                >
+                  <el-input v-model="routerForm.quantity" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('routerForm')">
+                    保存
+                  </el-button>
+                  <el-button @click="resetForm('routerForm')">
+                    重置
+                  </el-button>
                 </el-form-item>
               </el-form>
             </el-card>
           </el-col>
         </el-row>
         <el-row :gutter="20" style="padding-top: 20px">
-          <el-col :span="8">
+          <!--          <el-col :span="8">
             <el-card style="height: 270px;width: 100%;display: inline-block;float: left;">
               <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                 <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">02区</span>
@@ -68,7 +120,7 @@
                 </el-form-item>
               </el-form>
             </el-card>
-          </el-col>
+          </el-col>-->
         </el-row>
       </div>
     </EmptyCard>
@@ -78,7 +130,7 @@
 <script>
 import EmptyCard from '@/components/EmptyCard'
 import BreadCrumb from '@/components/BreadCrumb'
-import { getOperationLogs } from '@/utils/DeviceManagementApi'
+import { getServerState, updateServerState } from '../../utils/DeviceManagementApi'
 
 export default {
   components: {
@@ -87,6 +139,18 @@ export default {
   },
   data() {
     return {
+      switchForm: {
+        serverName: 'switch',
+        model: '',
+        portNumber: '',
+        quantity: ''
+      },
+      routerForm: {
+        serverName: 'router',
+        model: '',
+        portNumber: '',
+        quantity: ''
+      },
       labelPosition: 'left',
       formLabelAlign: {
         name: '',
@@ -134,29 +198,50 @@ export default {
   },
   methods: {
     async getData() {
-      this.loading = true
-      if (this.searchFrom.endTime === null) {
-        this.searchFrom.endTime = ''
-      }
-      if (this.searchFrom.startTime === null) {
-        this.searchFrom.startTime = ''
-      }
-      const { currentPage, pageSize } = this.pager
-      const query = {
-        pager: { currentPage, pageSize },
-        searchObject: this.searchFrom
-      }
-      try {
-        const res = await getOperationLogs(query)
-        console.log(res, 'res')
-        if (res.code === 200) {
-          this.pager.totalPage = res.data.result.totalPage * 10
-          this.tableData = res.data.result.tableData
+      await getServerState().then(resp => {
+        if (resp !== undefined && resp !== null) {
+          this.routerForm = resp.router
+          this.switchForm = resp.switch
+        }
+      })
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (formName === 'switchForm') {
+            const query = {
+              serverName: 'switch',
+              model: this.switchForm.model,
+              portNumber: this.switchForm.portNumber,
+              quantity: this.switchForm.quantity
+            }
+            // 修改
+            updateServerState(query).then()
+          } else if (formName === 'routerForm') {
+            const query = {
+              serverName: 'router',
+              model: this.routerForm.model,
+              portNumber: this.routerForm.portNumber,
+              quantity: this.routerForm.quantity
+            }
+            // 修改
+            updateServerState(query).then()
+          }
+        }
+      })
+    },
+    resetForm(formName) {
+      if (formName === 'switchForm') {
+        this.switchForm = {
+          time: '',
+          emails: ['']
+        }
+      } else if (formName === 'routerForm') {
+        this.routerForm = {
+          emails: [''],
+          police: '',
+          interval: ''
         }
-      } catch (err) {
-        this.$message.error(err.message)
-      } finally {
-        this.loading = false
       }
     },
     // 输入框清空回调
diff --git a/src/views/FacilityManagement/RealTimeEcharts.vue b/src/views/FacilityManagement/RealTimeEcharts.vue
index 5bff75c..3a8a434 100644
--- a/src/views/FacilityManagement/RealTimeEcharts.vue
+++ b/src/views/FacilityManagement/RealTimeEcharts.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div id="NumberCharts1" style="width: 150px;height: 170px;display: inline-block;padding-right: 40px" />
-    <div id="NumberCharts2" style="width: 150px;height: 170px;display: inline-block;padding-right: 40px" />
-    <div id="NumberCharts3" style="width: 150px;height: 170px;display: inline-block" />
+    <div id="NumberCharts1" style="width: 200px;height: 200px;display: inline-block;padding-right: 40px" />
+    <div id="NumberCharts2" style="width: 200px;height: 200px;display: inline-block;padding-right: 40px" />
+    <div id="NumberCharts3" style="width: 200px;height: 200px;display: inline-block" />
   </div>
 </template>
 
@@ -23,13 +23,13 @@ export default {
   },
   computed: {
     passe() {
-      return this.$store.state.dataPageData.realTime[0].passedNumber | 0
+      return this.$store.state.dataPageData.realTime === undefined ? 0 : this.$store.state.dataPageData.realTime[0].passedNumber
     },
     polic() {
-      return this.$store.state.dataPageData.realTime[0].policeNumber | 0
+      return this.$store.state.dataPageData.realTime === undefined ? 0 : this.$store.state.dataPageData.realTime[0].policeNumber
     },
     rat() {
-      return this.$store.state.dataPageData.realTime[0].policeRate | 0
+      return this.$store.state.dataPageData.realTime === undefined ? 0 : this.$store.state.dataPageData.realTime[0].policeRate
     }
   },
   watch: {
@@ -53,12 +53,12 @@ export default {
       handler(newVal, oldVal) {
         if (this.myChart) {
           if (newVal) {
-            this.byTheNumber2(this.police)
+            this.byTheNumber2(this.police, this.passed)
           } else {
-            this.byTheNumber2(this.police)
+            this.byTheNumber2(this.police, this.passed)
           }
         } else {
-          this.byTheNumber2(this.police)
+          this.byTheNumber2(this.police, this.passed)
         }
       },
       deep: true
@@ -77,15 +77,61 @@ export default {
         }
       },
       deep: true
+    },
+    passe: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (this.myChart) {
+          if (newVal) {
+            this.byTheNumber1(this.passe)
+          } else {
+            this.byTheNumber1(this.passe)
+          }
+        } else {
+          this.byTheNumber1(this.passe)
+        }
+      },
+      deep: true
+    },
+    polic: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (this.myChart) {
+          if (newVal) {
+            this.byTheNumber2(this.polic, this.passe)
+          } else {
+            this.byTheNumber2(this.polic, this.passe)
+          }
+        } else {
+          this.byTheNumber2(this.polic, this.passe)
+        }
+      },
+      deep: true
+    },
+    rat: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (this.myChart) {
+          if (newVal) {
+            this.byTheNumber3(this.rat)
+          } else {
+            this.byTheNumber3(this.rat)
+          }
+        } else {
+          this.byTheNumber3(this.rat)
+        }
+      },
+      deep: true
     }
   },
   mounted() {
     this.byTheNumber1(this.passe)
-    this.byTheNumber2(this.polic)
+    this.byTheNumber2(this.polic, this.passe)
     this.byTheNumber3(this.rat)
   },
   methods: {
     byTheNumber1(passed) {
+      console.log(passed)
       var chartDom = document.getElementById('NumberCharts1')
       var myChart = echarts.init(chartDom)
       var option
@@ -101,6 +147,8 @@ export default {
               color: '#40b4fc'
             },
             type: 'gauge',
+            min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
+            max: passed,
             progress: {
               show: true,
               width: 18
@@ -155,7 +203,7 @@ export default {
 
       option && myChart.setOption(option)
     },
-    byTheNumber2(police) {
+    byTheNumber2(police, passed) {
       var chartDom = document.getElementById('NumberCharts2')
       var myChart = echarts.init(chartDom)
       var option
@@ -171,6 +219,8 @@ export default {
               color: '#f54030'
             },
             type: 'gauge',
+            min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
+            max: passed,
             progress: {
               show: true,
               width: 18
@@ -241,6 +291,8 @@ export default {
               color: '#f0a732'
             },
             type: 'gauge',
+            min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
+            max: 100,
             progress: {
               show: true,
               width: 18
@@ -282,7 +334,8 @@ export default {
             detail: {
               valueAnimation: true,
               fontSize: 25,
-              offsetCenter: [0, '70%']
+              offsetCenter: [0, '70%'],
+              formatter: '{value}%'
             },
             data: [
               {
diff --git a/src/views/NewMainPage.vue b/src/views/NewMainPage.vue
index 0f29439..ee92dfd 100644
--- a/src/views/NewMainPage.vue
+++ b/src/views/NewMainPage.vue
@@ -77,13 +77,13 @@
               主交换机
             </h5>
             <span>
-              型号:RG-S2628G
+              型号:{{ switchForm.model }}
             </span><br>
             <span>
-              端口号:8
+              端口号:{{ switchForm.portNumber }}
             </span><br>
             <span>
-              数量:1
+              数量:{{ switchForm.quantity }}
             </span>
           </div>
           <!--     服务器文字     -->
@@ -97,13 +97,13 @@
               无线路由器
             </h5>
             <span>
-              型号:RG-S2628G
+              型号:{{ routerForm.model }}
             </span><br>
             <span>
-              端口号:8
+              端口号:{{ routerForm.portNumber }}
             </span><br>
             <span>
-              数量:1
+              数量:{{ routerForm.quantity }}
             </span>
           </div>
           <!--     服务器文字     -->
@@ -267,11 +267,24 @@ import RightTop from './NewMainPageComponents/RightTop'
 import RightBottom from './NewMainPageComponents/RightBottom'
 import LeftTop from './NewMainPageComponents/LeftTop'
 import { getWebSocket } from '@/utils/api'
+import { getServerState } from '../utils/DeviceManagementApi'
 export default {
   name: 'NewMainPage',
   components: { LeftTop, RightBottom, RightTop, LowerLeft, LeftCenter, RightMiddle },
   data() {
     return {
+      switchForm: {
+        serverName: 'switch',
+        model: '',
+        portNumber: '',
+        quantity: ''
+      },
+      routerForm: {
+        serverName: 'router',
+        model: '',
+        portNumber: '',
+        quantity: ''
+      },
       leftBtnColor: ['#ffde00', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)'],
       dataList: [
         {
@@ -347,6 +360,7 @@ export default {
     })
   },
   async mounted() {
+    await this.getData()
     this.$Socket.connect()
     this.getWebSocket()
     // 自适应宽度处理
@@ -382,6 +396,14 @@ export default {
     getWebSocket() {
       getWebSocket().then()
     },
+    async getData() {
+      await getServerState().then(resp => {
+        if (resp !== undefined && resp !== null) {
+          this.routerForm = resp.router
+          this.switchForm = resp.switch
+        }
+      })
+    },
     changeLeftBtnStyle(a) {
       this.leftBtnColor = ['rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)']
       this.leftBtnColor[a] = '#ffde00'
diff --git a/src/views/NewMainPageComponents/LeftCenter.vue b/src/views/NewMainPageComponents/LeftCenter.vue
index 661ff48..21021fc 100644
--- a/src/views/NewMainPageComponents/LeftCenter.vue
+++ b/src/views/NewMainPageComponents/LeftCenter.vue
@@ -12,16 +12,16 @@
         <el-table
           id="playList"
           :data="leftCenterVO"
-          style="width: 100%;color: rgb(160, 165, 178);font-size: 16px;text-align: right;margin-left: 0px"
+          style="width: 100%;color: rgb(160, 165, 178);font-size: 16px;text-align: right;margin-left: 0px;height: 24vh;overflow-y: scroll;overflow-x: hidden"
           :show-header="true"
         >
           <el-table-column prop="index" label="序号" min-width="25px" align="center" />
           <el-table-column prop="areaId" label="区域" min-width="25px" align="center" />
           <el-table-column prop="deviceId" label="编号" min-width="25px" align="center" />
           <el-table-column prop="policeRate" label="报警率" min-width="25px" align="center" />
-          <el-table-column label="操作" min-width="17px">
+          <el-table-column label="操作" min-width="17px" style="position: relative">
             <template slot-scope="scope">
-              <el-button style="margin-top: 0" type="text" size="mini" @click="editOperation(scope.row)">
+              <el-button style="position: absolute;top: -3px" type="text" size="mini" @click="editOperation(scope.row)">
                 查看
               </el-button>
             </template>
diff --git a/src/views/NewMainPageComponents/LowerLeft.vue b/src/views/NewMainPageComponents/LowerLeft.vue
index aa069fb..1684bbe 100644
--- a/src/views/NewMainPageComponents/LowerLeft.vue
+++ b/src/views/NewMainPageComponents/LowerLeft.vue
@@ -148,6 +148,33 @@ export default {
             type: 'bar',
             data: policeNumber
           }
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            maxValueSpan: 9, // 显示数据的条数(默认显示10个)
+            show: false,
+            yAxisIndex: [0],
+            left: '93%', // 滑动条位置
+            // start: 0, // 默认为0
+            // end: 10000, // 默认为100
+            orient: 'vertical',
+            filterMode: 'empty',
+            zoomLock: true,
+            handleSize: 70, // 控制手柄的尺寸
+            startValue: yData.length > 10 ? yData.length - 9 : 0,
+            endValue: yData.length
+          },
+          {
+            type: 'inside', // 内置滑动，随鼠标滚轮展示
+            yAxisIndex: [0],
+            start: 0, // 初始化时，滑动条宽度开始标度
+            end: yData.length, // 初始化时，滑动条宽度结束标度
+            zoomOnMouseWheel: false, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true, // 鼠标滚轮实现移动
+            handleSize: 70 // 控制手柄的尺寸
+          }
         ]
       }
       option && myChart.setOption(option)
@@ -209,6 +236,33 @@ export default {
             type: 'bar',
             data: policeNumber
           }
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            maxValueSpan: 14, // 显示数据的条数(默认显示10个)
+            show: false,
+            yAxisIndex: [0],
+            left: '93%', // 滑动条位置
+            // start: 0, // 默认为0
+            // end: 10000, // 默认为100
+            orient: 'vertical',
+            filterMode: 'empty',
+            zoomLock: true,
+            handleSize: 70, // 控制手柄的尺寸
+            startValue: yData.length > 15 ? yData.length - 14 : 0,
+            endValue: yData.length
+          },
+          {
+            type: 'inside', // 内置滑动，随鼠标滚轮展示
+            yAxisIndex: [0],
+            start: 0, // 初始化时，滑动条宽度开始标度
+            end: yData.length, // 初始化时，滑动条宽度结束标度
+            zoomOnMouseWheel: false, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true, // 鼠标滚轮实现移动
+            handleSize: 70 // 控制手柄的尺寸
+          }
         ]
       }
       option && myChart.setOption(option)
diff --git a/src/views/NewMainPageComponents/RightBottom.vue b/src/views/NewMainPageComponents/RightBottom.vue
index 62be9c5..8f23747 100644
--- a/src/views/NewMainPageComponents/RightBottom.vue
+++ b/src/views/NewMainPageComponents/RightBottom.vue
@@ -71,7 +71,7 @@
       <template #title>
         <span style="color: white">异常提醒</span>
       </template>
-      <div style="width: 48%;height: 800px;display: inline-block;vertical-align: top;border: 1px solid rgba(0,255,246,0.66)">
+      <div style="width: 48%;height: 795px;display: inline-block;vertical-align: top;border: 1px solid rgba(0,255,246,0.66)">
         <div style="height: 10px" />
         <div style="height: 40px;font-size: 25px;color:#976c27;text-align: center">
           报警率超阈值
@@ -81,7 +81,7 @@
             <el-table
               id="playList"
               :data="policeThreshold"
-              style="width: 100%;color: rgb(160, 165, 178);margin-left: 0px;font-size: 20px"
+              style="width: 100%;color: rgb(160, 165, 178);margin-left: 0px;font-size: 20px;height: 18vh;overflow-x: hidden;overflow-y: scroll"
               :show-header="true"
             >
               <el-table-column prop="index" label="序号" min-width="20px" align="center" />
@@ -98,17 +98,17 @@
         </div>
       </div>
       <div style="width: 40px;display: inline-block" />
-      <div style="width: 48%;height: 800px;display: inline-block;vertical-align: top;border: 1px solid rgba(0,255,246,0.75)">
+      <div style="width: 48%;height: 795px;display: inline-block;vertical-align: top;border: 1px solid rgba(0,255,246,0.75)">
         <div style="height: 10px" />
         <div style="height: 40px;font-size: 25px;color:#976c27;text-align: center">
           不活跃度超阈值
         </div>
-        <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 73%;">
+        <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 18vh;">
           <div class="table-wrapper">
             <el-table
               id="playList"
               :data="policeInactivity"
-              style="width: 100%;color: rgb(160, 165, 178);;margin-left: 0px;font-size: 20px;"
+              style="width: 100%;color: rgb(160, 165, 178);margin-left: 0px;font-size: 20px;height: 18vh;overflow-x: hidden;overflow-y: scroll"
               :show-header="true"
             >
               <el-table-column prop="index" label="序号" min-width="20px" align="center" />
diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue
index 9174dca..98c53d7 100644
--- a/src/views/NewMainPageComponents/RightTop.vue
+++ b/src/views/NewMainPageComponents/RightTop.vue
@@ -229,9 +229,9 @@ export default {
           {
             type: 'slider', // 隐藏或显示（true）组件
             show: true,
-            backgroundColor: 'rgb(19, 63, 100)', // 组件的背景颜色。
-            fillerColor: 'rgb(16, 171, 198)', // 选中范围的填充颜色。
-            borderColor: 'rgb(19, 63, 100)', // 边框颜色
+            backgroundColor: 'rgba(19, 63, 100,0)', // 组件的背景颜色。
+            fillerColor: 'rgba(16, 171, 198,0)', // 选中范围的填充颜色。
+            borderColor: 'rgba(19, 63, 100,0)', // 边框颜色
             showDetail: false, // 是否显示detail，即拖拽时候显示详细数值信息
             startValue: rightTop.yData.length > 7 ? rightTop.yData.length - 6 : 0,
             endValue: rightTop.yData.length,
-- 
Gitee