排版

src/assets/css/index.css

@@ -30,7 +30,8 @@ body {
     margin: 0;
     padding: 0;
     /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
-    background: url(../images/bg.png) no-repeat #000;
+    /* background: url(../images/bg.png) no-repeat #000; */
+    background-color: rgba(1, 33, 63, .9);
     background-size: cover;
     /* 行高是字体1.15倍 */
     line-height: 1.15;
@@ -218,7 +219,10 @@ header {
 
 .panel.deviceSum {
     height: 50%;
-    /* border: 1px solid red; */
+}
+
+.panel.deviceSum .filterSec {
+    top: .4rem
 }
 
 .panel.operStatus {
@@ -506,7 +510,9 @@ p {
 
 .num {
     font-size: .3rem;
-    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
+    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif */
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
 }
 
 .statisTop {
@@ -791,7 +797,8 @@ p {
 /* 时间选择器样式 start */
 
 .filterSec .el-date-editor .el-range-input {
-    color: #fff
+    color: #fff;
+    /* width: 42% */
 }
 
 .filterSec .el-input__inner {
@@ -805,7 +812,7 @@ p {
     color: #fff
 }
 
-.filterSec .el-range-input {
+.filterSec .el-date-editor .el-range-input {
     background-color: transparent;
     color: #fff;
     width: 55%;

src/views/home/components/lineChart.vue

@@ -49,7 +49,11 @@ export default {
       if (this.ftrendIcoCount[0].listDate.length) {
         timeLine = this.ftrendIcoCount[0].listDate;
       } else {
-        timeLine = [parseInt(timeall[0].split("-")[1])+"-"+parseInt(timeall[0].split("-")[2])];
+        timeLine = [
+          parseInt(timeall[0].split("-")[1]) +
+            "-" +
+            parseInt(timeall[0].split("-")[2]),
+        ];
         timeLine.map(() => {
           _this.ftrendIcoCount[0].list.push(0);
           _this.ftrendIcoCount[1].list.push(0);
@@ -58,7 +62,7 @@ export default {
       }
 
       option = {
-        color: ["#00F4FD", "#FD8F00"],
+        color: ["#00F4FD", "#2FA4EE"],
         tooltip: {
           trigger: "axis",
         },
@@ -71,13 +75,13 @@ export default {
             color: "#fff",
           },
 
-          left: "10%",
-          top: 0,
+          // left: "10%",
+          bottom: -5,
         },
         grid: {
           left: "0%",
           right: "0%",
-          bottom: "0%",
+          bottom: "12%",
           top: "20%",
           containLabel: true,
         },
@@ -127,7 +131,16 @@ export default {
             //   24, 40, 101, 134, 90, 230,
             // ],
             symbolSize: 6, //拐点圆的大小
-            // symbol: 'circle',
+            symbol: 'circle',
+            lineStyle: {
+              color: "#00F4FD",
+              width:1
+            },
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#00F4FD",
+              color: "#000",
+            },
           },
           {
             name: this.ftrendIcoCount[1].name,
@@ -139,8 +152,17 @@ export default {
             //   240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
             //   130, 30, 50, 110, 144, 110, 240, 228, 240,
             // ],
-            symbolSize: 6, //拐点圆的大小
-            // symbol: 'circle',
+            symbol: "circle",
+            symbolSize: 6,
+            lineStyle: {
+              color: "#2FA4EE",
+              width:1
+            },
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#2FA4EE",
+              color: "#000",
+            },
           },
         ],
       };

src/views/home/components/mapStaticTop.vue

@@ -2,24 +2,28 @@
   <div class="mapStaticTop">
     <ul>
       <li>
+        <img src="../../../assets/images/top1.png" alt="">
         <div>
           <p><span class="num static">{{fsiteCount.count}}</span></p>
           <p>站点总数</p>
         </div>
       </li>
       <li>
+        <img src="../../../assets/images/top2.png" alt="">
         <div>
           <p><span class="num offLine">{{fsiteCount.offLineCount}}</span></p>
           <p>离线站点</p>
         </div>
       </li>
       <li>
+        <img src="../../../assets/images/top3.png" alt="">
         <div>
           <p><span class="num error">{{fsiteCount.faultCount}}</span></p>
           <p>故障站点</p>
         </div>
       </li>
       <li>
+        <img src="../../../assets/images/top4.png" alt="">
         <div>
           <p><span class="num alarm">{{fsiteCount.deviceCount}}</span></p>
           <p>告警站点</p>
@@ -44,6 +48,7 @@ export default {
   top: 2px;
   left: 2px;
   z-index: 9;
+  width:99%;
   ul {
     display: flex;
     text-align: center;
@@ -51,19 +56,24 @@ export default {
     li {
       flex: 1;
       width: 1.5rem;
-      height: 0.8rem;
+      height: 1.4rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid #00f4fd;
+      // border: 1px solid #00f4fd;
       background: rgba(8,31,47,0.50);
+      img{
+        width:1.2rem;
+      }
       p{
-          font-size:.2rem
+          font-size:.2rem;
+           text-align:left
       }
       .num{
           margin-bottom:.0625rem;
           display:inline-block;
-          font-size:.3rem
+          font-size:.35rem;
+         
       }
     }
   }

src/views/home/components/pieChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="pieChart"
-    style="width: 100%; height: 100%;"
+    style="width: 100%; height: 100%;padding-top:10px"
   ></div>
 </template>
 <script>

src/views/home/index.vue

@@ -13,7 +13,7 @@
       </div>
       <div class="column mapBox" style="position:relative;">
         <map-static-top :fsiteCount="siteCount"></map-static-top> 
-        <div id="pickerBox">
+        <!-- <div id="pickerBox">
           <input
             id="pickerInput"
             placeholder="输入关键字选取站点"
@@ -25,8 +25,8 @@
             @click="siteList_api({ name: this.name })"
           ></i>
           <div id="poiInfo"></div>
-        </div>
-        <div class="panel-footer"></div> -->
+        </div> -->
+        <div class="panel-footer"></div> 
         <!-- <div
           class="map panel"
           id="mapF"