-

src/assets/css/index.css

@@ -66,9 +66,9 @@ textarea:-ms-input-placeholder {
 header {
     position: relative;
     /* height: 1.25rem; */
-    height: 1.125rem;
+    height: .9625rem;
     background: url(../images/head_bg.png) no-repeat;
-    background-position: 20% 0;
+    background-position: center 0;
     background-size: cover;
     min-width: 1024px;
     /* max-width: 1920px; */
@@ -78,7 +78,7 @@ header {
     min-width: 1024px;
     /* max-width: 1920px; */
     padding: 0.125rem 0.125rem 0;
-    height: calc(100% - 1.125rem);
+    height: calc(100% - .9625rem);
     color: #fff;
     min-height: 650px;
     /* min-height: 750px */
@@ -133,19 +133,19 @@ header {
     background-image: url(../images/statisTop-bg.png);
     position: relative;
     height: 3.875rem;
-    /* border: 1px solid #0065C7; */
+    border: 1px solid #0065C7;
     /* background: rgba(9, 9, 27, 0.8); */
     /* border: 1px solid rgba(25, 186, 139, 0.17); */
     /* background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png); */
     padding: 0 .275rem 0.2rem;
     margin-bottom: .225rem;
-    padding-top: .825rem;
+    padding-top: .725rem;
     background-size: cover;
     background-repeat: no-repeat;
 }
 
 .panel.statisTop {
-    height: 60%;
+    height: 50%;
     /* border: 1px solid red */
 }
 
@@ -212,7 +212,7 @@ header {
 /* el-select 下拉框 样式 */
 
 .panel.statisBottom {
-    height: calc(100% - 60% - 0.225rem);
+    height: calc(100% - 50% - 0.225rem);
     /* border: 1px solid red */
 }
 
@@ -302,11 +302,11 @@ header {
 .panel h2:after {
     position: absolute;
     display: inline-block;
-    height: 14px;
+    height: .2375rem;
     vertical-align: middle;
     border-right: 3px solid #fff;
-    top: 10px;
-    left: -10px;
+    top: .17rem;
+    left: -0.17rem;
     content: '';
 }
 
@@ -448,6 +448,10 @@ p {
     color: #0DF4FE
 }
 
+.text-dBlue {
+    color: #2FA4EE
+}
+
 .text-yellow {
     color: #FEB70D
 }
@@ -466,7 +470,7 @@ p {
 
 .alarm,
 .text-red {
-    color: #FF0000
+    color: #F66167
 }
 
 .statisSec ul {
@@ -480,7 +484,7 @@ p {
 }
 
 .statisSec .statisTop ul {
-    height: 29%;
+    height: 27%;
 }
 
 .statisSec ul li {
@@ -495,8 +499,13 @@ p {
     margin-bottom: .06rem
 }
 
+.statisSec ul li img {
+    width: .45rem;
+    margin-bottom: .08rem
+}
+
 .num {
-    font-size: .35rem;
+    font-size: .3rem;
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
 }
 
@@ -573,7 +582,7 @@ p {
 
 .filterSec {
     position: absolute;
-    top: .62rem;
+    top: .1rem;
     right: 10px;
     z-index: 11;
     text-align: right;
@@ -581,16 +590,16 @@ p {
 
 .filterSec select,
 .filterSec option {
-    border: 1px solid #036B77;
+    border: 1px solid #0081FF;
     min-width: 2.05rem;
     font-size: .15rem;
-    height: .27rem;
-    color: #036B77;
+    height: .45rem;
+    color: #fff;
     line-height: 0.45rem;
     /* background: rgba(0, 0, 0, 0); */
     outline: none;
     padding-left: 0.1rem;
-    background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
+    /* background-image: -webkit-linear-gradient(bottom, #0081FF, #fff); */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

src/views/home/components/barChart.vue

@@ -14,11 +14,11 @@ export default {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: "#00A7FD",
+                color: "#31E9FF",
               },
               {
                 offset: 1,
-                color: "#00A7FD",
+                color: "#31E9FF",
               },
             ]),
           },
@@ -28,11 +28,11 @@ export default {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: "#FD8F00",
+                color: "#2FA4EE",
               },
               {
                 offset: 1,
-                color: "#FD8F00",
+                color: "#2FA4EE",
               },
             ]),
           },
@@ -108,14 +108,14 @@ export default {
         grid: {
           left: "0%",
           right: "0%",
-          bottom: "0%",
-          top: "22%",
+          bottom: "15%",
+          top: "10%",
           containLabel: true,
         },
         legend: {
           itemGap: 30,
           left: "30%",
-          top: 0,
+          bottom: -5,
           textStyle: {
             color: "#fff",
           },

src/views/home/components/pieChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="pieChart"
-    style="width: 100%; height: 100%; padding-top: 0.375rem"
+    style="width: 100%; height: 100%;"
   ></div>
 </template>
 <script>
@@ -75,7 +75,7 @@ export default {
             textStyle: {
               rich: {
                 name: {
-                  fontSize: 30,
+                  fontSize: 28,
                   fontWeight: "normal",
                   color: "#FFFFFF",
                   fontFamily: "impact",

src/views/home/components/statisTop.vue

@@ -4,29 +4,42 @@
     <ul class="one">
       <li>
         <div>
-          <p><span class="num text-orange">{{falarmCount.count}}</span> 条</p>
-          <p>告警总数</p>
+          <img src="../../../assets/images/alarmingIcon.png" alt="">
+          <p>告警</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num text-orange">{{falarmCount.unCount}}</span> 条</p>
-          <p>未处理告警数</p>
+          <img src="../../../assets/images/stationIcon.png" alt="">
+          <p>总站</p>
         </div>
       </li>
+      <li>
+        <div>
+          <img src="../../../assets/images/memberIcon.png" alt="">
+          <p>人员</p>
+        </div>
+      </li>
+      
+      
     </ul>
-
     <ul class="two">
+      <li>
+        <div>
+          <p><span class="num text-red">{{falarmCount.count}}</span> 条</p>
+          <p>告警总数(条)</p>
+        </div>
+      </li>
       <li>
         <div>
           <p><span class="num text-blue">{{fsiteCount.count}}</span> 个</p>
-          <p>总站点数</p>
+          <p>总站点数(个)</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num text-blue">{{fepLoad}}</span> kW</p>
-          <p>总实时负荷</p>
+          <p><span class="num text-dBlue">{{fpersonalCount.maintain}}</span> 名</p>
+          <p>运维人员(名)</p>
         </div>
       </li>
     </ul>
@@ -34,18 +47,27 @@
     <ul class="three">
       <li>
         <div>
-          <p><span class="num text-yellow">{{fpersonalCount.maintain}}</span> 名</p>
-          <p>运维人员</p>
+          <p><span class="num text-red">{{falarmCount.unCount}}</span> 条</p>
+          <p>未处理告警数(条)</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num text-yellow">{{fpersonalCount.power}}</span> 名</p>
-          <p>电力人员</p>
+          <p><span class="num text-blue">{{fepLoad}}</span> kW</p>
+          <p>总实时负荷(个)</p>
         </div>
       </li>
+      <li>
+        <div>
+          <p><span class="num text-dBlue">{{fpersonalCount.power}}</span> 名</p>
+          <p>电力人员(名)</p>
+        </div>
+      </li>
+      
     </ul>
 
+    
+
     <div class="panel-footer">
       
     </div>

src/views/home/index.vue

@@ -2,7 +2,7 @@
   <section class="mainbox">
     <!-- topBox start -->
     <div class="topBox">
-      <div class="column statisSec">
+      <div class="column statisSec" style="position:relative;z-index:1">
         <statis-top
           :falarmCount="alarmCount"
           :fpersonalCount="personalCount"
@@ -11,8 +11,8 @@
         ></statis-top>
         <statis-bottom :fhtAnalogData="htAnalogData"></statis-bottom>
       </div>
-      <div class="column mapBox" style="position: relative">
-        <!-- <map-static-top :fsiteCount="siteCount"></map-static-top>
+      <div class="column mapBox" style="position:relative;">
+        <map-static-top :fsiteCount="siteCount"></map-static-top> 
         <div id="pickerBox">
           <input
             id="pickerInput"
@@ -32,11 +32,19 @@
           id="mapF"
           style="height: 100%; z-index: 1; width: 100%"
         ></div> -->
+
+        <div
+          class="map"
+          id="mapF"
+          style="height: 100%; z-index: 0; position:fixed;top:0;left:0;width:100%"
+        ></div>
+
+
       </div>
       <div class="column">
         <div class="panel deviceSum">
           <h2>设备运行状态</h2>
-          <div class="filterSec" style="top: 0.7rem">
+          <div class="filterSec" >
             <el-date-picker
               v-model="dDefaultTime"
               type="datetimerange"
@@ -108,11 +116,7 @@
     </div>
     <!-- bottomBox end -->
 
-    <div
-          class="map panel"
-          id="mapF"
-          style="height: 100%; z-index: -1; width: 100%;position:fixed;top:0;"
-        ></div>
+    
 
   </section>
 </template>
@@ -382,7 +386,7 @@ export default {
 
       this.addMarker(dataList, "water");
 
-      this.drawBounds();
+      // this.drawBounds();
     },
 
     addMarker(lnglats) {
@@ -445,32 +449,35 @@ export default {
       this.map.add(new AMap.OverlayGroup(markers));
       this.map.setFitView(); // 根据所有点自适应
 
-      this.mapPolList = mapData.map((val, ind) => {
-        // console.log(val)
-        let color =
-          this.colorList[
-            this.colorIndList.findIndex(
-              (value, index) =>
-                value <= ind && ind < this.colorIndList[index + 1]
-            )
-          ];
-        return [
-          new AMap.Polygon({
-            map: this.map,
-            fillOpacity: 0.5,
-            path: val[3],
-            fillColor: color[0],
-            strokeColor: color[1],
-          }),
-          new AMap.Polygon({
-            map: this.map,
-            fillOpacity: 0.5,
-            path: val[3],
-            fillColor: color[1],
-            strokeColor: color[0],
-          }),
-        ];
-      });
+      // 屈行政区 start
+      // this.mapPolList = mapData.map((val, ind) => {
+      //   // console.log(val)
+      //   let color =
+      //     this.colorList[
+      //       this.colorIndList.findIndex(
+      //         (value, index) =>
+      //           value <= ind && ind < this.colorIndList[index + 1]
+      //       )
+      //     ];
+      //   return [
+      //     new AMap.Polygon({
+      //       map: this.map,
+      //       fillOpacity: 0.5,
+      //       path: val[3],
+      //       fillColor: color[0],
+      //       strokeColor: color[1],
+      //     }),
+      //     new AMap.Polygon({
+      //       map: this.map,
+      //       fillOpacity: 0.5,
+      //       path: val[3],
+      //       fillColor: color[1],
+      //       strokeColor: color[0],
+      //     }),
+      //   ];
+      // });
+      // 屈行政区 end
+
       this.map.on("mousemove", (e) => {
         var point = [e.lnglat.getLng(), e.lnglat.getLat()];
         var pointList = mapData.map((val) => {

src/views/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <header>
-    <div id="header">
+  <header style="position:relative;z-index:1">
+    <div id="header" >
       <!-- 主页路由菜单 开始 -->
-      <div class="router-index" v-if="!home">
+      <div class="router-index"  v-if="!home">
         <!-- <router-link
           class="router-left"
           :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
@@ -305,11 +305,11 @@ export default {
     }
   }
   .title {
-    font-size: 0.5rem;
+    font-size: .375rem;
     color: #fff;
     font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
     font-weight: 600;
-    letter-spacing: 3px;
+    letter-spacing: 1px;
     text-align: center;
     line-height: 1rem;
     margin: 0 auto;