From 2e426e6523d65ec3f3739fdfd777659e50dbbcb2 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: Mon, 1 Aug 2022 15:56:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E6=80=A72?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/NewMainPage.vue                     | 22 ++++++----
 .../NewMainPageComponents/LeftCenter.vue      | 19 ++++----
 src/views/NewMainPageComponents/LeftTop.vue   |  6 +--
 src/views/NewMainPageComponents/LowerLeft.vue |  5 ++-
 .../NewMainPageComponents/RightBottom.vue     | 15 ++++---
 .../NewMainPageComponents/RightMiddle.vue     | 44 +++++++++++++------
 src/views/NewMainPageComponents/RightTop.vue  | 14 +++---
 7 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/src/views/NewMainPage.vue b/src/views/NewMainPage.vue
index ac3ebe3..26e6ba9 100644
--- a/src/views/NewMainPage.vue
+++ b/src/views/NewMainPage.vue
@@ -1,7 +1,7 @@
 <template>
   <el-container id="new-main-page-box" class="container-box">
     <!-- 头部 -->
-    <el-header id="new-mainpage-header">
+    <el-header id="new-mainpage-header" style="z-index: 999">
       <div style="height: 30px" />
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-left" />
       <div class="btn btn-one btn-one-left" :style="{color: leftBtnColor[0]}" @click="changeLeftBtnStyle(0)">
@@ -118,8 +118,6 @@ export default {
      *
      */
     window.onresize = () => location.reload()
-    this.getWebSocket()
-    this.changeLeftBtnStyle()
   },
   beforeDestroy() {
     this.$Socket.close()
@@ -142,8 +140,11 @@ export default {
   padding: 0;
 }
 .container-box {
+  //width: 100%;
+  //height: 100%;
+  min-width: 1920px;
   width: 100%;
-  height: 100%;
+  height: 980px;
 }
 #new-mainpage-header {
   width: 100%;
@@ -153,7 +154,6 @@ export default {
   background-size:100% 100% ;
   .btn {
     display: inline-block;
-    color: rgb(0, 240, 255);
     font-size: 18px;
     text-align: center;
     line-height: 34px;
@@ -165,16 +165,18 @@ export default {
     background-size:100% 100% ;
   }
   .btn:hover {
-    color: #ffde00;
+    color: #ffde00!important;
   }
   .btn-one-left {
     float: left;
   }
   .btn-one-right {
     float: right;
+    color: rgb(0, 240, 255);
   }
 }
 .el-main {
+  overflow: visible;
   font-size: 0px;
   vertical-align: top;
   width: 100%;
@@ -249,19 +251,21 @@ export default {
     background-size: 100% 100%;
 
     .right-top{
+      position: relative;
       height: 34%;
-      //border: 1px solid #000000;
+      //border: 1px solid #ccbdbd;
     }
 
     .right-center {
       position: relative;
       height: 36%;
-      //border: 1px solid #000000;
+      //border: 1px solid #eed6d6;
     }
 
     .right-bottom {
+      position: relative;
       height: 30%;
-      //border: 1px solid #000000;
+      //border: 1px solid #e0cbcb;
     }
   }
 }
diff --git a/src/views/NewMainPageComponents/LeftCenter.vue b/src/views/NewMainPageComponents/LeftCenter.vue
index e82d8b5..c740f23 100644
--- a/src/views/NewMainPageComponents/LeftCenter.vue
+++ b/src/views/NewMainPageComponents/LeftCenter.vue
@@ -1,17 +1,18 @@
 <template>
   <div style="width:100%;height: 100%;">
     <!--    style="width:25%;height: 27%;position: absolute;left: 10px;top: 39%;border: 1px solid #ffffff"-->
-    <div style="height: 30px;font-size: 16px;color: white;line-height: 30px;padding-left: 15px;padding-bottom: 2px">
+    <div style="height: 40px;font-size: 16px;color: white;line-height: 40px;padding-left: 15px;padding-bottom: 8px">
       报警Top10
     </div>
-    <div class="infinite-list-wrapper">
+    <div class="infinite-list-wrapper" style="padding-left: 10px;width: 92%;">
       <div class="table-wrapper">
         <el-table
           id="playList"
           :data="leftCenterVO"
-          style="width: 100%;color: rgb(160, 165, 178);font-size: 12px;text-align: center;margin-left: 10px"
+          style="width: 100%;color: rgb(160, 165, 178);font-size: 16px;text-align: right;margin-left: 0px"
           :show-header="true"
         >
+          <el-table-column min-width="3px" />
           <el-table-column prop="index" label="序号" min-width="15px" />
           <el-table-column prop="areaId" label="区域" min-width="15px" />
           <el-table-column prop="deviceId" label="编号" min-width="15px" />
@@ -794,7 +795,9 @@ export default {
 /deep/ .el-table__header {
   border: 0;
 }
-
+.infinite-list-wrapper {
+  height: cale(100%-45px);
+}
 /* 表格表头字体颜色 */
 /deep/.el-table thead {
   color: #00fff6;
@@ -826,7 +829,7 @@ export default {
   background-color: rgba(30, 144, 255, 0.26) !important;
 }
 /deep/ .cell {
-  height: 17px;
+  height: 21px;
 }
 /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
   border: 0px solid #ffffff;
@@ -834,12 +837,6 @@ export default {
 /deep/ .el-table__cell {
   border: 0px solid #ffffff;
 }
-.infinite-list-wrapper {
-  width:90%;
-  height: cale(100%-30px);
-  padding-left: 10px;
-  // border: 1px solid #883535;
-}
 // 去掉所有的横线
 /deep/.el-table__row>td{ border: none!important; }
 /deep/.el-table::before { height: 0px!important; }
diff --git a/src/views/NewMainPageComponents/LeftTop.vue b/src/views/NewMainPageComponents/LeftTop.vue
index 3c71415..c0ce7cd 100644
--- a/src/views/NewMainPageComponents/LeftTop.vue
+++ b/src/views/NewMainPageComponents/LeftTop.vue
@@ -1,9 +1,9 @@
 <template>
   <div style="width:100%;height: 100%;">
-    <div style="height: 28px;font-size: 16px;color: white;line-height: 28px;padding-left: 15px">
+    <div style="height: 40px;font-size: 16px;color: white;line-height: 40px;padding-left: 15px">
       设备概况
     </div>
-    <div style="height: 65px" />
+    <div style="height: 82px" />
     <div class="num" style="width: 5%;" />
     <div class="num" style="width: 23%;">
       {{ leftTopVO.equipmentNumber }}
@@ -14,7 +14,7 @@
     <div class="num" style="width: 30%;">
       {{ leftTopVO.offLineNumber }}
     </div>
-    <div class="num" style="height: 85px" />
+    <div class="num" style="height: 102px" />
 
     <div class="num" style="width: 10%;" />
     <div class="num" style="width: 14%;">
diff --git a/src/views/NewMainPageComponents/LowerLeft.vue b/src/views/NewMainPageComponents/LowerLeft.vue
index 47b5a45..7ca5c0e 100644
--- a/src/views/NewMainPageComponents/LowerLeft.vue
+++ b/src/views/NewMainPageComponents/LowerLeft.vue
@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div style="height: 100%;width: 94%;">
     <!--左下-->
-    <div id="lowerLeft" class="lowerLeft_echarts" style="width:24%;height: 30%;position: absolute;left: 20px;top: 68%" />
+    <div style="height: 10px" />
+    <div id="lowerLeft" class="lowerLeft_echarts" style="width:97%;height: 97%;padding-left: 10px;" />
   </div>
 </template>
 
diff --git a/src/views/NewMainPageComponents/RightBottom.vue b/src/views/NewMainPageComponents/RightBottom.vue
index a339ad5..75c3ecc 100644
--- a/src/views/NewMainPageComponents/RightBottom.vue
+++ b/src/views/NewMainPageComponents/RightBottom.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex;justify-content: space-between;width:100%;height: 100%;">
-    <div style="width: 46%;height: 100%">
+    <div style="width: 48%;height: 100%">
       <div style="height: 40px;font-size: 16px;color: white;line-height: 40px;padding-left: 15px">
         异常提醒
       </div>
@@ -8,14 +8,15 @@
       <div style="height: 20px;font-size: 14px;color:#976c27;text-align: center">
         报警率超阈值
       </div>
-      <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 70%;">
+      <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 73%;">
         <div class="table-wrapper">
           <el-table
             id="playList"
             :data="policeThreshold"
-            style="width: 100%;color: rgb(160, 165, 178);font-size: 12px;margin-left: 10px"
+            style="width: 100%;color: rgb(160, 165, 178);margin-left: 0px"
             :show-header="true"
           >
+            <el-table-column min-width="5px" />
             <el-table-column prop="index" label="序号" min-width="20px" />
             <el-table-column prop="areaId" label="区域" min-width="20px" />
             <el-table-column prop="deviceId" label="编号" min-width="20px" />
@@ -31,19 +32,19 @@
     </div>
     <div style="width: 20px" />
     <div style="width: 45%;height: 100%;">
-      <div style="height: 30px" />
-      <div style="height: 10px" />
+      <div style="height: 50px" />
       <div style="height: 20px;font-size: 14px;color:#976c27;text-align: center">
         不活跃度超阈值
       </div>
-      <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 70%;">
+      <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 73%;">
         <div class="table-wrapper">
           <el-table
             id="playList"
             :data="policeInactivity"
-            style="width: 100%;color: rgb(160, 165, 178);;margin-left: 8px"
+            style="width: 100%;color: rgb(160, 165, 178);;margin-left: 0px"
             :show-header="true"
           >
+            <el-table-column min-width="5px" />
             <el-table-column prop="index" label="序号" min-width="20px" />
             <el-table-column prop="areaId" label="区域" min-width="20px" />
             <el-table-column prop="deviceId" label="编号" min-width="20px" />
diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index 640edc0..247a77d 100644
--- a/src/views/NewMainPageComponents/RightMiddle.vue
+++ b/src/views/NewMainPageComponents/RightMiddle.vue
@@ -1,16 +1,16 @@
 <template>
   <!--右中-->
   <div style="width:100%;height: 100%;">
-    <div style="height: 30px;font-size: 16px;color: white;line-height: 30px;padding-left: 15px;position: relative;">
+    <div style="height: 40px;font-size: 16px;color: white;line-height: 40px;padding-left: 15px;position: relative">
       数据环比
-      <div style="position: absolute;width: 150px;height: 20px;border: 1px solid #ffffff;right: 10px;bottom: -28px;font-size: 0">
-        <div class="btn" style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
-          以日
-        </div>
-        <div class="btn" style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
+      <div style="position: absolute;width: 150px;height: 25px;line-height: 25px;border: 1px solid rgb(0, 240, 255);right: 10px;bottom: -25px;z-index: 999">
+        <div class="btnone btn" :style="{color: leftBtnColor[0]}" @click="changeLeftBtnStyle(0)">
           以周
         </div>
-        <div class="btn" style="display: inline-block;height: 19px;width: 49px;font-size: 8px;text-align: center;line-height: 19px">
+        <div class="btnone btn" :style="{color: leftBtnColor[1]}" @click="changeLeftBtnStyle(1)">
+          以月
+        </div>
+        <div class="btn" :style="{color: leftBtnColor[2]}" @click="changeLeftBtnStyle(2)">
           指定
         </div>
       </div>
@@ -20,11 +20,11 @@
         <div id="rightMiddle1" class="rightMiddle_echarts" style="width: 100%;height:75%;" />
         <div
           class="right-center-btn"
-          style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:58px;width: 95px;height: 30px"
+          style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:78px;width: 95px;height: 30px"
         >
           报警率
         </div>
-        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 50px;width: 130px;height: 32px">
+        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 67px;width: 130px;height: 32px">
           <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
             <span style="font-size: 8px">本周期</span><br>
             <span style="font-size: 10px">{{ currentCycle }}</span>
@@ -39,11 +39,11 @@
         <div id="rightMiddle2" class="rightMiddle_echarts" style="width: 100%;height:75%" />
         <div
           class="right-center-btn"
-          style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:58px;width: 95px;height: 30px"
+          style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:78px;width: 95px;height: 30px"
         >
           不活跃度
         </div>
-        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 50px;width: 130px;height: 32px">
+        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 67px;width: 130px;height: 32px">
           <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center;">
             <span style="font-size: 8px">本周期</span><br>
             <span style="font-size: 10px">{{ currentCycleInactivity }}</span>
@@ -67,7 +67,8 @@ export default {
       currentCycle: 0,
       lastCycle: 0,
       currentCycleInactivity: 0,
-      lastCycleInactivity: 0
+      lastCycleInactivity: 0,
+      leftBtnColor: ['#ffde00', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)']
     }
   },
   computed: {
@@ -115,6 +116,10 @@ export default {
     this.initCharts2(this.inactivityRing)
   },
   methods: {
+    changeLeftBtnStyle(a) {
+      this.leftBtnColor = ['rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)']
+      this.leftBtnColor[a] = '#ffde00'
+    },
     initCharts1(policeRing) {
       const chartDom = document.getElementById('rightMiddle1')
       const myChart = echarts.init(chartDom)
@@ -323,7 +328,20 @@ export default {
   background-repeat: no-repeat;
   background-size:100% 100% ;
 }
+
+.btnone{
+  border-right: 1px solid rgb(0, 240, 255)
+}
 .btn:hover {
-  color: #20a0ff!important;
+  color: #ffde00!important;
+}
+.btn {
+  display: inline-block;
+  height: 24px;
+  width: 49px;
+  font-size: 8px;
+  text-align: center;
+  line-height: 24px
 }
+
 </style>
diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue
index b6d86a5..842eab4 100644
--- a/src/views/NewMainPageComponents/RightTop.vue
+++ b/src/views/NewMainPageComponents/RightTop.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div style="width: 100%;height: 100%;">
     <!--右上-->
-    <div style="height: 30px;font-size: 16px;line-height: 30px;padding-left: 15px;position: relative">
+    <div style="height: 40px;font-size: 16px;line-height: 40px;padding-left: 15px;position: relative;color: #ffffff;">
       数据统计
-      <div style="position: absolute;width: 150px;height: 20px;border: 1px solid rgb(0, 240, 255);right: 10px;bottom: -28px;font-size: 0">
+      <div style="position: absolute;width: 150px;height: 25px;line-height: 25px;border: 1px solid rgb(0, 240, 255);right: 10px;bottom: -25px;z-index: 999">
         <div class="btnone btn" :style="{color: leftBtnColor[0]}" @click="changeLeftBtnStyle(0)">
           以周
         </div>
@@ -15,7 +15,7 @@
         </div>
       </div>
     </div>
-    <div id="rightTop" class="rightTop_echarts" style="width:26%;height: 30%;position: absolute;right: 20px;top:12%;" />
+    <div id="rightTop" class="rightTop_echarts" style="width:97%;height: 90%;position: absolute;right: 20px;top:12%;" />
   </div>
 </template>
 
@@ -210,12 +210,12 @@ export default {
   border-right: 1px solid rgb(0, 240, 255)
 }
 .btn:hover {
-  color: #ffde00;
+  color: #ffde00!important;
 }
 .btn{
   display: inline-block
 ;
-  height: 19px
+  height: 24px
 ;
   width: 49px
 ;
@@ -223,6 +223,6 @@ export default {
 ;
   text-align: center
 ;
-  line-height: 19px
+  line-height: 24px
 }
 </style>
-- 
Gitee