From 57d2eeccee5017d0145a4cd4b7b7818db3ac4e8f 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: Thu, 30 Jun 2022 17:43:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css                      | 19 +++++
 src/views/NewMainPage.vue                     |  7 +-
 .../NewMainPageComponents/LeftCenter.vue      | 63 ++++++++++-----
 src/views/NewMainPageComponents/LeftTop.vue   | 38 ++++++++-
 src/views/NewMainPageComponents/LowerLeft.vue | 13 ++-
 .../NewMainPageComponents/RightBottom.vue     | 36 ++++++---
 .../NewMainPageComponents/RightMiddle.vue     | 81 ++++++++++---------
 src/views/NewMainPageComponents/RightTop.vue  | 35 ++++++--
 8 files changed, 206 insertions(+), 86 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index fe31471..308a9ac 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -710,3 +710,22 @@ body {
   z-index: 1;
   background: rgba(15, 31, 33, 0.8);
 }
+/*表格透明*/
+  .table-wrapper .el-table .el-table__cell {
+    padding: 2px!important;
+  }
+  .table-wrapper .el-table .cell {
+    white-space: nowrap!important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 5px!important;
+}
+  .table-wrapper .el-table tr:hover {
+    background-color: #20a0ff;
+  }
+  .table-wrapper .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
+    border-bottom: 0 solid!important;
+  }
+  .table-wrapper .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+    background-color: rgba(30, 144, 255, 0.26) !important;
+  }
diff --git a/src/views/NewMainPage.vue b/src/views/NewMainPage.vue
index 18d396f..1e266ef 100644
--- a/src/views/NewMainPage.vue
+++ b/src/views/NewMainPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-container class="container-box">
+  <el-container id="new-main-page-box" class="container-box">
     <!-- 头部 -->
     <el-header id="new-mainpage-header">
       <div style="height: 30px" />
@@ -27,7 +27,7 @@
     <el-main>
       <div class="left-box">
         <div class="left-top">
-          1
+          <LeftTop />
         </div>
         <div class="left-center">
           <LeftCenter />
@@ -67,9 +67,10 @@ import LeftCenter from './NewMainPageComponents/LeftCenter'
 import LowerLeft from './NewMainPageComponents/LowerLeft'
 import RightTop from './NewMainPageComponents/RightTop'
 import RightBottom from './NewMainPageComponents/RightBottom'
+import LeftTop from './NewMainPageComponents/LeftTop'
 export default {
   name: 'NewMainPage',
-  components: { RightBottom, RightTop, LowerLeft, LeftCenter, RightMiddle },
+  components: { LeftTop, RightBottom, RightTop, LowerLeft, LeftCenter, RightMiddle },
   data() {
     return {
 
diff --git a/src/views/NewMainPageComponents/LeftCenter.vue b/src/views/NewMainPageComponents/LeftCenter.vue
index b95a5f2..21dc881 100644
--- a/src/views/NewMainPageComponents/LeftCenter.vue
+++ b/src/views/NewMainPageComponents/LeftCenter.vue
@@ -1,23 +1,28 @@
 <template>
-  <div class="infinite-list-wrapper" style="overflow:auto;width:24%;height: 23%;position: absolute;left: 20px;top: 43%;">
-    <div class="table-wrapper">
-      <el-table
-        id="playList"
-        :data="tableData"
-        style="width: 100%;color: rgb(160, 165, 178);"
-        :show-header="true"
-        :row-class-name="tableRowClassName"
-      >
-        <el-table-column prop="index" label="序号" min-width="10px" />
-        <el-table-column prop="name" label="区域" min-width="20px" />
-        <el-table-column prop="address" label="日期" min-width="20px" />
-        <p v-if="loading">
-          加载中...
-        </p>
-        <p v-if="noMore">
-          没有更多了
-        </p>
-      </el-table>
+  <div style="width:25%;height: 26%;position: absolute;left: 8px;top: 40%;">
+    <div style="height: 30px;font-size: 18px;color: white;line-height: 30px">
+      报警Top10
+    </div>
+    <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 100%">
+      <div class="table-wrapper">
+        <el-table
+          id="playList"
+          :data="tableData"
+          style="width: 100%;color: rgb(160, 165, 178);"
+          :show-header="true"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column prop="index" label="序号" min-width="10px" />
+          <el-table-column prop="name" label="区域" min-width="20px" />
+          <el-table-column prop="address" label="日期" min-width="20px" />
+          <p v-if="loading">
+            加载中...
+          </p>
+          <p v-if="noMore">
+            没有更多了
+          </p>
+        </el-table>
+      </div>
     </div>
   </div>
 </template>
@@ -82,5 +87,23 @@ export default {
 ::-webkit-scrollbar {
   width: 0px !important;height: 5px;
 }
-
+/*表格透明*/
+.table-wrapper .el-table .el-table__cell {
+  padding: 2px!important;
+}
+.table-wrapper .el-table .cell {
+  white-space: nowrap!important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 5px!important;
+}
+.table-wrapper .el-table tr:hover {
+  background-color: #20a0ff;
+}
+.table-wrapper .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
+  border-bottom: 0 solid!important;
+}
+.table-wrapper .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+  background-color: rgba(30, 144, 255, 0.26) !important;
+}
 </style>
diff --git a/src/views/NewMainPageComponents/LeftTop.vue b/src/views/NewMainPageComponents/LeftTop.vue
index ed20de5..2bb7a7a 100644
--- a/src/views/NewMainPageComponents/LeftTop.vue
+++ b/src/views/NewMainPageComponents/LeftTop.vue
@@ -1,5 +1,32 @@
 <template>
-<div>111</div>
+  <div style="width:25%;height: 28%;position: absolute;left: 8px;top:11%;">
+    <div style="height: 30px;font-size: 18px;color: white;line-height: 30px">
+      设备概况
+    </div>
+    <div style="height: 65px" />
+    <div class="num" style="width: 5%;" />
+    <div class="num" style="width: 23%;">
+      100
+    </div>
+    <div class="num" style="width: 33%;">
+      1
+    </div>
+    <div class="num" style="width: 35%;">
+      1
+    </div>
+    <div class="num" style="height: 88px" />
+
+    <div class="num" style="width: 5%;" />
+    <div class="num" style="width: 21%;">
+      100
+    </div>
+    <div class="num" style="width: 35%;">
+      1
+    </div>
+    <div class="num" style="width: 35%;">
+      1
+    </div>
+  </div>
 </template>
 
 <script>
@@ -9,5 +36,12 @@ export default {
 </script>
 
 <style scoped>
-
+.num {
+  display: inline-block;
+ /* border: 1px solid #ffffff;*/
+  height: 20px;
+  font-size: 12px;
+  color: #099acd;
+  vertical-align: top;text-align: center;
+}
 </style>
diff --git a/src/views/NewMainPageComponents/LowerLeft.vue b/src/views/NewMainPageComponents/LowerLeft.vue
index 6ba9bd0..569d017 100644
--- a/src/views/NewMainPageComponents/LowerLeft.vue
+++ b/src/views/NewMainPageComponents/LowerLeft.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--左下-->
-    <div id="lowerLeft" class="lowerLeft_echarts" style="overflow:auto;width:24%;height: 30%;position: absolute;left: 10px;top: 68%" />
+    <div id="lowerLeft" class="lowerLeft_echarts" style="width:24%;height: 30%;position: absolute;left: 8px;top: 68%" />
   </div>
 </template>
 
@@ -32,7 +32,10 @@ export default {
             type: 'shadow'
           }
         },
-        legend: {},
+        legend: {
+          textStyle: { color: '#a9ddee' },
+          x: 'right'
+        },
         grid: {
           top: '12%',
           left: '3%',
@@ -45,6 +48,12 @@ export default {
           splitLine: {
             show: false // 不显示网格线
           },
+          axisLine: {
+            show: true // 显示坐标轴线
+          },
+          axisTick: {
+            show: true // 显示坐标轴刻度线
+          },
           type: 'value',
           boundaryGap: [0, 0.01]
 
diff --git a/src/views/NewMainPageComponents/RightBottom.vue b/src/views/NewMainPageComponents/RightBottom.vue
index ffc404a..d3ca313 100644
--- a/src/views/NewMainPageComponents/RightBottom.vue
+++ b/src/views/NewMainPageComponents/RightBottom.vue
@@ -1,17 +1,23 @@
 <template>
-  <div style="display: flex;justify-content: space-between;width:100%;height: 100%;border: 1px solid #ffffff;">
-    <div style="width: 50%;height: 100%;border: 1px solid #ffffff;">
-      <div style="height: 35px;border: 1px solid #ffffff;" />
+  <div style="display: flex;justify-content: space-between;width:100%;height: 100%;">
+    <div style="width: 50%;height: 100%">
+      <div style="height: 30px;font-size: 18px;color: white;line-height: 35px">
+        异常提醒
+      </div>
+      <div style="height: 10px" />
+      <div style="height: 20px;font-size: 14px;color:#976c27;text-align: center">
+        报警率超阈值
+      </div>
       <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 60%;">
         <div class="table-wrapper">
           <el-table
             id="playList"
             :data="tableData"
-            style="width: 100%;color: rgb(160, 165, 178);"
+            style="width: 100%;color: rgb(160, 165, 178);font-size: 12px"
             :show-header="true"
             :row-class-name="tableRowClassName"
           >
-            <el-table-column prop="index" label="序号" min-width="10px" />
+            <el-table-column prop="index" label="序号" min-width="20px" />
             <el-table-column prop="name" label="区域" min-width="20px" />
             <el-table-column prop="address" label="编号" min-width="20px" />
             <p v-if="loading">
@@ -24,8 +30,12 @@
         </div>
       </div>
     </div>
-    <div style="width: 50%;height: 100%;border: 1px solid #ffffff;">
-      <div style="height: 35px;border: 1px solid #ffffff;" />
+    <div style="width: 50%;height: 100%;">
+      <div style="height: 30px" />
+      <div style="height: 10px" />
+      <div style="height: 20px;font-size: 14px;color:#976c27;text-align: center">
+        离线天数超阈值
+      </div>
       <div class="infinite-list-wrapper" style="overflow:auto;width:100%;height: 60%;">
         <div class="table-wrapper">
           <el-table
@@ -35,7 +45,7 @@
             :show-header="true"
             :row-class-name="tableRowClassName"
           >
-            <el-table-column prop="index" label="序号" min-width="10px" />
+            <el-table-column prop="index" label="序号" min-width="20px" />
             <el-table-column prop="name" label="区域" min-width="20px" />
             <el-table-column prop="address" label="编号" min-width="20px" />
             <p v-if="loading">
@@ -57,21 +67,21 @@ export default {
   data() {
     return {
       tableData: [{
-        date: '2',
+        index: '2',
         name: '王小虎',
         address: '上海'
       }, {
-        date: '2',
+        index: '2',
         name: '王小虎',
         address: '上海'
       }, {
-        date: '2',
+        index: '2',
         name: '王小虎',
         address: '上海'
       }, {
-        date: '2',
+        index: '2',
         name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
+        address: '上海'
       }]
     }
   }
diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index 3bab75f..f095101 100644
--- a/src/views/NewMainPageComponents/RightMiddle.vue
+++ b/src/views/NewMainPageComponents/RightMiddle.vue
@@ -1,41 +1,46 @@
 <template>
   <!--右中-->
-  <div style="display: flex;justify-content: space-between;width:100%;height: 100%;border: 1px solid #ffffff;">
-    <div style="width: 50%;height: 100%">
-      <div id="rightMiddle1" class="rightMiddle_echarts" style="width: 100%;height: 70%;" />
-      <div
-        class="right-center-btn"
-        style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:72px;width: 95px;height: 30px"
-      >
-        报警率
-      </div>
-      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 60px;width: 130px">
-        <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
-          <span>本周期</span><br>
-          <span style="font-size: 15px">56%</span>
+  <div style="width:100%;height: 100%;">
+    <div style="height: 35px;font-size: 18px;color: white;line-height: 35px">
+      数据环比
+    </div>
+    <div style="display: flex;justify-content: space-between;width:100%;height: 80%;">
+      <div style="width: 50%;height: 100%">
+        <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:65px;width: 95px;height: 30px"
+        >
+          报警率
         </div>
-        <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center">
-          <span>上周期</span><br>
-          <span style="font-size: 15px">56%</span>
+        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 50px;width: 130px">
+          <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
+            <span>本周期</span><br>
+            <span style="font-size: 15px">56%</span>
+          </div>
+          <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center">
+            <span>上周期</span><br>
+            <span style="font-size: 15px">56%</span>
+          </div>
         </div>
       </div>
-    </div>
-    <div style="width: 50%;height: 100%">
-      <div id="rightMiddle2" class="rightMiddle_echarts" style="width: 100%;height:70%" />
-      <div
-        class="right-center-btn"
-        style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:72px;width: 95px;height: 30px"
-      >
-        离线率
-      </div>
-      <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 60px;width: 130px">
-        <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
-          <span>本周期</span><br>
-          <span style="font-size: 15px">56%</span>
+      <div style="width: 50%;height: 100%">
+        <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:65px;width: 95px;height: 30px"
+        >
+          离线率
         </div>
-        <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center">
-          <span>上周期</span><br>
-          <span style="font-size: 15px">56%</span>
+        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 50px;width: 130px">
+          <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
+            <span>本周期</span><br>
+            <span style="font-size: 15px">56%</span>
+          </div>
+          <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center">
+            <span>上周期</span><br>
+            <span style="font-size: 15px">56%</span>
+          </div>
         </div>
       </div>
     </div>
@@ -58,7 +63,7 @@ export default {
         series: [
           {
             type: 'gauge',
-            center: ['50%', '75%'],
+            center: ['50%', '65%'],
             startAngle: 220,
             endAngle: -40,
             min: 0,
@@ -105,7 +110,7 @@ export default {
               }
             },
             title: {
-              offsetCenter: [0, '60%'],
+              offsetCenter: [0, '80%'],
               fontSize: 15,
               color: '#ffffff'
             },
@@ -121,7 +126,7 @@ export default {
               lineHeight: 40,
               borderRadius: 8,
               offsetCenter: [0, '10%'],
-              fontSize: 25,
+              fontSize: 20,
               fontWeight: 'bolder',
               formatter: '{value}%',
               color: '#21ee8b'
@@ -160,7 +165,7 @@ export default {
         series: [
           {
             type: 'gauge',
-            center: ['50%', '75%'],
+            center: ['50%', '65%'],
             startAngle: 220,
             endAngle: -40,
             min: 0,
@@ -207,7 +212,7 @@ export default {
               }
             },
             title: {
-              offsetCenter: [0, '60%'],
+              offsetCenter: [0, '80%'],
               fontSize: 15,
               color: '#fff'
             },
@@ -217,7 +222,7 @@ export default {
               lineHeight: 40,
               borderRadius: 8,
               offsetCenter: [0, '10%'],
-              fontSize: 25,
+              fontSize: 20,
               fontWeight: 'bolder',
               formatter: '{value}%',
               color: '#f70b0b'
diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue
index 17aee09..530d8e7 100644
--- a/src/views/NewMainPageComponents/RightTop.vue
+++ b/src/views/NewMainPageComponents/RightTop.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <!--右上-->
-    <div id="rightTop" class="rightTop_echarts" style="width:26%;height: 28%;position: absolute;right: 20px;top:14%;" />
+    <div style="height: 30px;font-size: 18px;color: white;line-height: 30px">
+      数据统计
+    </div>
+    <div id="rightTop" class="rightTop_echarts" style="width:26%;height: 30%;position: absolute;right: 20px;top:12%;" />
   </div>
 </template>
 
@@ -39,10 +42,20 @@ export default {
           }
         },
         legend: {
-          data: ['通行人次', '报警人次', '报警率']
+          data: ['通行人次', '报警人次', '报警率'],
+          textStyle: { color: '#a9ddee' },
+          x: 'center',
+          y: 'bottom',
+          padding: 17
         },
         xAxis: [
           {
+            splitLine: {
+              show: false // 不显示网格线
+            },
+            lineStyle: {
+              type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+            },
             type: 'category',
             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
             axisPointer: {
@@ -55,6 +68,9 @@ export default {
             splitLine: {
               show: false // 不显示网格线
             },
+            lineStyle: {
+              type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+            },
             type: 'value',
             name: '数据统计',
             axisLabel: {
@@ -64,6 +80,9 @@ export default {
           {
             type: 'value',
             name: '报警率',
+            splitLine: {
+              show: false // 不显示网格线
+            },
             interval: 5,
             axisLabel: {
               formatter: '{value} %'
@@ -73,7 +92,7 @@ export default {
         series: [
           {
             name: '通行人次',
-            color: '#1ec3ea',
+            color: 'rgb(85, 160, 161)',
             type: 'bar',
             tooltip: {
               valueFormatter: function(value) {
@@ -86,7 +105,7 @@ export default {
           },
           {
             name: '报警人次',
-            color: '#ff9d1f',
+            color: 'rgb(207, 200, 68)',
             type: 'bar',
             tooltip: {
               valueFormatter: function(value) {
@@ -119,14 +138,14 @@ export default {
             borderColor: 'rgb(19, 63, 100)', // 边框颜色
             showDetail: false, // 是否显示detail，即拖拽时候显示详细数值信息
             startValue: 0,
-            endValue: 5,
+            endValue: 14,
             filterMode: 'empty',
-            width: '50%', // 滚动条高度
-            height: 10, // 滚动条显示位置
+            width: '90%', // 滚动条高度
+            height: 2, // 滚动条显示位置
             left: 'center',
             zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
             handleSize: 0, // 控制手柄的尺寸
-            bottom: 40 // dataZoom-slider组件离容器下侧的距离
+            bottom: 45 // dataZoom-slider组件离容器下侧的距离
           },
           {
             // 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
-- 
Gitee