修改

src/styles/index.scss

@@ -398,4 +398,10 @@ aside {
 }
 #route-container{
   background-color: #172434 !important;
+}
+.el-icon-d-arrow-left:before{
+  color:#bbb;
+}
+.el-icon-d-arrow-right:before{
+  color:#bbb;
 }

src/views/screen/index.vue

@@ -87,9 +87,10 @@ export default {
       ],
       mapData: [],//地图数据
       mapData1: [],//地图数据
+      mapData2: [],//地图数据
       alarmData: [],//实时告警数据
-      PlanBarxAxisData:['液压泵','液压扳手','中空液压扳手'],//频繁告警区域X轴
-      PlanBarData: [70,42,28],//频繁告警区域数据
+      PlanBarxAxisData:['1月','2月','3月','4月','5月','6月','7月'],//频繁告警区域X轴
+      PlanBarData: [70,42,28,23,45,23,52],//频繁告警区域数据
       // fengxAxisData:['总数','在线','异常'],//液压泵设备统计X轴
       fengTypeData:[
         {
@@ -480,6 +481,7 @@ export default {
     },
     getPieStateOptions(){
       return  {
+        color: ['green','red','yellow'],
           tooltip: {
             trigger: 'item'
           },
@@ -496,7 +498,7 @@ export default {
                 normal: {
                   show: true,
                   position: 'inner', // 数值显示在内部
-                 
+                  color:'#32c5e9',
                   formatter: '{b}', // 格式化数值百分比输出
                 },
               },
@@ -527,7 +529,7 @@ export default {
                 show: false
               },
               title: {
-                text: "已服务区域螺栓数",
+                text: "服务螺栓区域分布(单位:根)",
                 textStyle: {
                   fontWeight: "600",
                   fontSize: "18",
@@ -586,7 +588,7 @@ export default {
     getBarOptions() {
       return {
         title: {
-          text: "已服务螺栓数(按季度)",
+          text: "已服务螺栓数(季度)",
           textStyle: {
             fontWeight: "600",
             fontSize: "18",
@@ -986,7 +988,7 @@ export default {
             itemStyle: {
                    normal: {
                        label: {
-                           show: true,      //开启显示
+                           show: false,      //开启显示
                            position: 'top', //在上方显示
                            textStyle: {     //数值样式
                                color: "white",
@@ -1004,7 +1006,7 @@ export default {
             itemStyle: {
                    normal: {
                        label: {
-                           show: true,      //开启显示
+                           show: false,      //开启显示
                            position: 'top', //在上方显示
                            textStyle: {     //数值样式
                                color: "white",
@@ -1088,7 +1090,7 @@ export default {
         },
         series: [
           {
-            name: "地区",
+            name: "三天内使用",
             type: "scatter",
             coordinateSystem: "geo",
             zlevel: 2,
@@ -1100,13 +1102,13 @@ export default {
             symbolSize: 10,
             itemStyle: {
               normal: {
-                color: "#ddb926"
+                color: "yellow"
               }
             },
             data: this.mapData
           },
           {
-            name: "测试",
+            name: "静止状态",
             type: "scatter",
             coordinateSystem: "geo",
             zlevel: 2,
@@ -1122,6 +1124,24 @@ export default {
               }
             },
             data: this.mapData1
+          },
+          {
+            name: "当天使用",
+            type: "scatter",
+            coordinateSystem: "geo",
+            zlevel: 2,
+
+            label: {
+              position: "right",
+              show: false
+            },
+            symbolSize: 10,
+            itemStyle: {
+              normal: {
+                color: "green"
+              }
+            },
+            data: this.mapData2
           }
         ]
       };
@@ -1175,6 +1195,8 @@ export default {
         //设备地址
         this.mapData  =data.addrList
         this.mapData1  =data.addrList1
+        this.mapData2  =data.addrList2
+
         this.mapOptions = this.getMapOptions();
 
       }) 

src/views/screen/index_v1.scss

@@ -216,6 +216,7 @@
 /*中间地图*/
 
 .center-map{
+  width:calc( 100% - 10px);
   background-color: #111d41;
   margin:5px;
   position : relative;
@@ -290,14 +291,26 @@
   width: 100%;
   height:46vh;
 }
+.map-center-top{
+  width: 14vw;
+  min-width: 300px;
+  // background-color:green;
+  text-align: center;
+  height: 5vh;
+  font-size: 2.6vh;
+  font-weight: bold;
+  position : absolute;
+  top:20px;
+  left : 21%; 
+  margin:0 auto;
+  z-index: 999;
+}
 .map-left-bottom{
   width: 5vw;
   min-width: 100px;
-  height: 4vh;
-
+  height: 5vh;
   font-size: 1vh;
   position : absolute;
-
   bottom:20px;
   left : 20px; 
   z-index: 999;
@@ -310,6 +323,12 @@
   display: inline-block;
   width:60%;
 }
+.map-left-bottom-color0{
+  display: inline-block;
+  width:20px;
+  height:8px;
+  background-color: green;
+}
 .map-left-bottom-color1{
   display: inline-block;
   width:20px;
@@ -334,14 +353,23 @@
   bottom:10px;
   right : 10px; 
   z-index: 999;
-  padding:5px;
+ 
 }
 .center-alarm-label{
+  padding-top: 1px;
   line-height: 1.8vh;
   height:2vh;
   width:100%;
  
 }
+.center-alarm-label1{
+  padding-top: 1px;
+  line-height: 1.8vh;
+  height:2vh;
+  width:100%;
+  background:#1262dd;
+ 
+}
 .center-alarm-total-label{
   line-height: 5.2vh;
   height:5.2vh;
@@ -350,15 +378,22 @@
   color:yellow;
 }
 .alarm-label-title{
-  width:70%;
+  width:65%;
+  height: 100%;
   text-align: center;
   display: inline-block;
 }
 .alarm-label-value{
-  width:30%;
+  width:35%;
+  height: 100%;
+
   display: inline-block;
   text-align: center;
 }
+.normal-value{
+  color:yellow;
+  
+}
 .back-btn{
   position: fixed;
   top:10px;
@@ -386,3 +421,6 @@
 .back-btn:hover{
   color:#1bb0cc;
 }
+.el-date-editor{
+  width:100%;
+}

src/views/screen/preview_v1.vue

@@ -59,10 +59,17 @@
           <i class="bottomL"></i>
           <i class="bottomR"></i>
           <div class="left-chart1-box">
-            <div class="left-chart1-box-contnet"></div>
-            <div class="left-chart1-box-contnet">服务螺栓:<i class="box-number">501</i></div>
-            <div class="left-chart1-box-contnet">服务风机:<i class="box-number">1545</i></div>
-            <div class="left-chart1-box-contnet">服务风场:<i class="box-number">501</i></div>
+            <div class="left-chart1-box-contnet">
+              <el-date-picker
+                v-model="value3"
+                type="year"
+                popper-class="select-box"
+                placeholder="选择年">
+              </el-date-picker>
+            </div>
+            <div class="left-chart1-box-contnet">服务螺栓:<i class="box-number">501</i>根</div>
+            <div class="left-chart1-box-contnet">服务风机:<i class="box-number">1545</i>台</div>
+            <div class="left-chart1-box-contnet">服务风场:<i class="box-number">501</i>个</div>
             <div class="left-chart1-box-contnet"></div>
 
           </div>
@@ -92,12 +99,14 @@
             </tr>
             <tr align="center">
                 <th></th>
+                <th>风场名称</th>
                 <th>机位号</th>
                 <th>工作位置</th>
                 <th>操作人</th>
             </tr>
             <tr align="center" v-for="(item,index) in workData" :key="index">
               <td><span class="table-index">{{index+1}}</span></td>
+              <td>测试风场1</td>
               <td>A0001B</td>
               <td>固定轴—机座</td>
               <td>员工1</td>
@@ -123,43 +132,45 @@
             <i class="bottomL"></i>
             <i class="bottomR"></i>
             <!--地图右下统计-->
+            <div class="map-center-top">设备总数：<i class="box-number">999</i>件</div>
             <div class="map-right-bottom">
-              <div class="center-alarm-label">
+              <div class="center-alarm-label1" style="font-family:bold;margin-bottom:3px;padding-top:2px;">
                 <div class="alarm-label-title">区域</div>
-                <div class="alarm-label-value normal-value" >设备</div>
+                <div class="alarm-label-value " >设备</div>
               </div>
               <div class="center-alarm-label">
                 <div class="alarm-label-title">华北大区</div>
                 <div class="alarm-label-value normal-value" >21</div>
               </div>
-              <div class="center-alarm-label">
+              <div class="center-alarm-label1">
                 <div class="alarm-label-title">东北大区</div>
-                <div class="alarm-label-value alarm-value">24</div>
+                <div class="alarm-label-value normal-value">24</div>
               </div>
               <div class="center-alarm-label">
                 <div class="alarm-label-title">西北大区</div>
-                <div class="alarm-label-value contact-value">24</div>
+                <div class="alarm-label-value normal-value">24</div>
               </div>
-              <div class="center-alarm-label">
+              <div class="center-alarm-label1">
                 <div class="alarm-label-title">南部大区</div>
-                <div class="alarm-label-value other-value">32</div>
+                <div class="alarm-label-value normal-value">32</div>
               </div>
               <div class="center-alarm-label">
                 <div class="alarm-label-title">中部大区</div>
-                <div class="alarm-label-value other-value">321</div>
+                <div class="alarm-label-value normal-value">321</div>
               </div>
-              <div class="center-alarm-label">
+              <div class="center-alarm-label1">
                 <div class="alarm-label-title">内蒙大区</div>
-                <div class="alarm-label-value other-value">14</div>
+                <div class="alarm-label-value normal-value">14</div>
               </div>
               <div class="center-alarm-label">
                 <div class="alarm-label-title">江苏大区</div>
-                <div class="alarm-label-value other-value">234</div>
+                <div class="alarm-label-value normal-value">234</div>
               </div>
             </div>
              <div class="map-left-bottom">
                <div class="map-left-bottom-head">设备状态颜色</div>
-               <div>  <span class="map-left-bottom-title">3天内使用</span> <span class="map-left-bottom-color1"></span></div>
+               <div>  <span class="map-left-bottom-title">当天使用</span> <span class="map-left-bottom-color0"></span></div>
+               <div> <span class="map-left-bottom-title">3天内使用</span> <span class="map-left-bottom-color1"></span></div>
                <div> <span class="map-left-bottom-title">静止状态</span> <span class="map-left-bottom-color2"></span></div>
             </div>
              <base-map width="100%"   :options="mapOptions" />
@@ -261,6 +272,7 @@ export default {
       isFullFlag:false,
       screen_title:'全屏',
       windMarkers:[],
+      value3: new Date(new Date().toLocaleDateString()),
     }
   },
    methods: {