修改

src/views/screen/index.vue

@@ -7,11 +7,14 @@
              <previewV1 
              :date='date'
              :nowWeek='nowWeek' 
-             :alarm_data='alarm_data' 
+             :workData='workData' 
              :alarmData='alarmData' 
              :deviceStatusData='deviceStatusData' 
+             :pieStateOptions='pieStateOptions'
+             :pieFaultOptions='pieFaultOptions'
+             :pieDeviceOptions='pieDeviceOptions'
              :pieOptions='pieOptions'
-             :barAreaOptions='barAreaOptions'
+             :barPlanOptions='barPlanOptions'
              :barOptions='barOptions'
              :lineOptions='lineOptions'
              :mapOptions='mapOptions'
@@ -25,7 +28,7 @@
              :alarmData='alarmData' 
              :deviceStatusData='deviceStatusData' 
              :netPieOptions='netPieOptions'
-             :barAreaOptions='barAreaOptions'
+             :barPlanOptions='barPlanOptions'
              :barOptions='barOptions'
              :lineOptions='lineOptions'
              :barRealtimeAlarmOptions='barRealtimeAlarmOptions'
@@ -57,11 +60,34 @@ export default {
       nowWeek:'',
   
       netPieData:[],
-      alarm_data:[],
+      workData:[
+        {
+          'number': 'A0001B',
+          'position': '固定轴—机座',
+          'user': '员工1'
+        },{
+          'number': 'A0001B',
+          'position': '固定轴—机座',
+          'user': '员工1'
+        },{
+          'number': 'A0001B',
+          'position': '固定轴—机座',
+          'user': '员工1'
+        },{
+          'number': 'A0001B',
+          'position': '固定轴—机座',
+          'user': '员工1'
+        },{
+          'number': 'A0001B',
+          'position': '固定轴—机座',
+          'user': '员工1'
+        },
+      ],
       mapData: [],//地图数据
+      mapData1: [],//地图数据
       alarmData: [],//实时告警数据
-      AreaBarxAxisData:['报警总数','待处理','已处理'],//频繁告警区域X轴
-      AreaBarData: [70,42,28],//频繁告警区域数据
+      PlanBarxAxisData:['液压泵','液压扳手','中空液压扳手'],//频繁告警区域X轴
+      PlanBarData: [70,42,28],//频繁告警区域数据
       // fengxAxisData:['总数','在线','异常'],//液压泵设备统计X轴
       fengTypeData:[
         {
@@ -72,14 +98,17 @@ export default {
           'name': '异常'
         },
       ],//井类型数据
-      barTypexAxisData:['设备总数','在线数','离线数','告警数'],//液压泵设备统计X轴
+      barTypexAxisData:['一季度','二季度','三季度','四季度'],//液压泵设备统计X轴
       barTypeData:[100,76,24,20],//井类型数据
       lineAlarmxAxisData:[],//月告警曲线图X轴
       lineAlarmData:[],//月告警曲线图数据
       deviceStatusData:[],//设备状态统计数据
       pieOptions: {},
+      pieStateOptions:{},
+      pieFaultOptions:{},
+      pieDeviceOptions:{},
       netPieOptions:{},
-      barAreaOptions: {},
+      barPlanOptions: {},
       RealAlarmBarData:[],
       RealAlarmBarxAxisData:[],
       barRealtimeAlarmOptions:{},//当前告警数统计 
@@ -150,40 +179,199 @@ export default {
         ]
       };
     },
+    getPieDeviceOptions(){
+      return {
+        title: {
+                text: "故障设备状态",
+                textStyle: {
+                  fontWeight: "600",
+                  fontSize: "18",
+                  color: "#3fd5f1"
+                }
+        },
+        color:['#FE7E00','#FEC400','#22DACE'],
+        tooltip: {},
+        legend: {
+            x : '50%',
+            y : '38%',
+            textStyle : {
+              color:'#FFF',
+            },
+            orient : 'vertical',
+            data:['液压泵','液压扳手','中空液压扳手'],
+            formatter: function(name) {
+                var index = 0;
+                var clientlabels =['液压泵','液压扳手','中空液压扳手']
+                var clientcounts = [400,300,200];
+                clientlabels.forEach(function(value,i){
+                  if(value == name){
+                        index = i;
+                  }
+                });
+                return name + "  " + clientcounts[index];
+            }
+        },
+    
+        calculable : false,
+        series: [{
+    
+            name: 'myCharts',
+            type: 'pie',
+            radius: ["35%", "60%"], // 内外半径
+            center: ['25%', '55%'],
+            startAngle:90,  //开始 的旋转角度
+    
+            itemStyle: {
+                normal: {
+                    label: {
+                        show: false,
+                        position: 'inner'
+    
+                    },
+                    labelLine: {
+                        show: false,
+                    }
+                }
+            },
+            data: [
+                {value:400, name:'液压泵'},
+                {value:300, name:'液压扳手'},
+                {value:200, name:'中空液压扳手'},
+ 
+            ]
+    
+        }
+        ]
+    
+      };
+    },
+    getPieFaultOptions(){
+      return {
+        title: {
+                text: "故障代码状态(TOP5)",
+                textStyle: {
+                  fontWeight: "600",
+                  fontSize: "18",
+                  color: "#3fd5f1"
+                }
+        },
+        
+        tooltip: {},
+        legend: {
+            x : '50%',
+            y : '28%',
+            textStyle : {
+              color:'#FFF',
+            },
+            orient : 'vertical',
+            data:['液压油偏低','扳手校验不合格','液压泵校验过期','扳手外观不合格','设备异常'],
+            formatter: function(name) {
+                var index = 0;
+                var clientlabels =['液压油偏低','扳手校验不合格','液压泵校验过期','扳手外观不合格','设备异常']
+                var clientcounts = [400,300,200,200,200];
+                clientlabels.forEach(function(value,i){
+                  if(value == name){
+                        index = i;
+                  }
+                });
+                return name + "  " + clientcounts[index];
+            }
+        },
+    
+        calculable : false,
+        series: [{
+    
+            name: 'myCharts',
+            type: 'pie',
+            radius: ["35%", "60%"], // 内外半径
+            center: ['25%', '55%'],
+            startAngle:90,  //开始 的旋转角度
+    
+            itemStyle: {
+                normal: {
+                    label: {
+                        show: false,
+                        position: 'inner'
+    
+                    },
+                    labelLine: {
+                        show: false,
+                    }
+                }
+            },
+            data: [
+                {value:400, name:'液压油偏低'},
+                {value:300, name:'扳手校验不合格'},
+                {value:200, name:'液压泵校验过期'},
+                {value:200, name:'扳手外观不合格'},
+                {value:200, name:'设备异常'},
+            ]
+    
+        }
+        ]
+    
+      };
+    },
+    getPieStateOptions(){
+      return  {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+          show:false
+          },
+          series: [
+            {
+              name: '校准状态',
+              type: 'pie',
+              radius: ['0', '80%'],
+              avoidLabelOverlap: false,
+              label: {
+                normal: {
+                  show: true,
+                  position: 'inner', // 数值显示在内部
+                  formatter: '{b}', // 格式化数值百分比输出
+                },
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 1048, name: '已校准' },
+                { value: 735, name: '过期' },
+                { value: 580, name: '待检' },
+              ]
+            }
+          ]
+        };
+    },
     getPieOptions() {
 
       return  {
               color: this.signalColor,
+              legend: {
+                show: false
+              },
               title: {
-                text: "风场设备统计",
+                text: "已服务区域螺栓数",
                 textStyle: {
                   fontWeight: "600",
                   fontSize: "18",
                   color: "#3fd5f1"
                 }
               },
-                tooltip: {
+              tooltip: {
                     trigger: 'item',
                     formatter: '{a} <br/>{b} : {c}（{d}%）'
-                },
-                legend: {
-                    type: 'scroll',
-                    icon: 'circle',
-                    bottom: '0',
-                  textStyle:{
-                           
-                            color: '#ffffff'//字体颜色
-                        },
-                    // orient: 'vertical',
-                    formatter: (name) => {
-                        var arr = this.fengTypeData.filter(function(item){
-                            return name == item.name;
-                        });
-                        if(arr.length){
-                            return  arr[0].name + ' ' + arr[0].value;
-                        }                        
-                    }
-                },
+              },
+                
                 graphic:{
                     type: "text",
                     left: "center",
@@ -196,33 +384,42 @@ export default {
                     }
                 },
                 series: [
-                    {
-                        name: '设备数量',
-                        type: 'pie',
-                        label: {            
+                  {
+                    name: '服务螺栓数',
+                    type: 'pie',
+                   
+                    radius: [0, '57%'],
+                    center: ['50%', '50%'],
+                    roseType: 'area',
+                    itemStyle: {
+                      borderRadius: 20
+                    },
+                     label: {            
                             // show: false,                
-                            formatter: '{b} : {c}（{d}%）',
+                            formatter: '{b} : {c}',
                             position: 'outer',
                             alignTo: 'labelLine',
                             bleedMargin: 5
                         },
-                        left: 20,
-                        right:20,
-                        radius: ['30%', '47%'], // 内外半径
-                        center: ['50%', '50%'],
-                        data: this.fengTypeData,
-                        animationEasing: 'cubicInOut',
-                        animationDuration: 2600,
-                        avoidLabelOverlap: false,
- 
-                    }
+                    data: [
+                      { value: 40, name: '华北大区' },
+                      { value: 38, name: '东北大区' },
+                      { value: 32, name: '西北大区' },
+                      { value: 30, name: '南部大区' },
+                      { value: 28, name: '中部大区' },
+                      { value: 26, name: '内蒙大区' },
+                      { value: 22, name: '江苏大区' }
+                     
+                    ]
+                  }
                 ]
+
             }
     },
     getBarOptions() {
       return {
         title: {
-          text: "液压泵设备统计",
+          text: "已服务螺栓数(按季度)",
           textStyle: {
             fontWeight: "600",
             fontSize: "18",
@@ -236,14 +433,14 @@ export default {
 
         grid: {
           left: "1%",
-          right: "13%",
+         
           bottom: "5%",
           containLabel: true
         },
         xAxis: [
           {
             type: "category",
-            name: "状态",
+          
             nameLocation: "end",
             data: this.barTypexAxisData,
             nameTextStyle: {
@@ -264,7 +461,7 @@ export default {
         yAxis: [
           {
             type: "value",
-            name: "设备数量",
+          
             nameTextStyle: {
               color: "#fff"
             },
@@ -286,8 +483,9 @@ export default {
             type: "bar",
             barWidth: "40%",
             data:this.barTypeData,
+            showBackground: true,
             itemStyle: {
-                   normal: {
+              normal: {
                        label: {
                            show: true,      //开启显示
                            position: 'top', //在上方显示
@@ -296,8 +494,12 @@ export default {
                                fontSize: 12
                            }
                        }
-                   }
-            }
+                   },
+              
+            },
+     
+             
+            
           }
         ]
       };
@@ -306,7 +508,7 @@ export default {
     getLineOptions() {
       return {
         title: {
-          text: "月告警曲线图",
+          text: "故障新增",
           textStyle: {
             fontWeight: "600",
             fontSize: "18",
@@ -347,7 +549,7 @@ export default {
           }
         },
         yAxis: {
-          name: "告警次数",
+          
           nameTextStyle: {
             color: "#fff"
           },
@@ -546,10 +748,10 @@ export default {
         ]
       };
     },
-    getAreaBarOptions() {
+    getPlanBarOptions() {
       return {
         title: {
-          text: "报警统计",
+          text: "校准计划",
           textStyle: {
             fontWeight: "600",
             fontSize: "18",
@@ -560,7 +762,9 @@ export default {
         tooltip: {
           trigger: "axis"
         },
-
+         legend: {
+                show: false
+              },
         grid: {
           left: "5%",
           right: "10%",
@@ -570,9 +774,9 @@ export default {
         xAxis: [
           {
             type: "category",
-            name: "类型",
+           
             nameLocation: "end",
-            data: this.AreaBarxAxisData,
+            data: this.PlanBarxAxisData,
             nameTextStyle: {
               color: "#fff"
             },
@@ -590,7 +794,6 @@ export default {
         yAxis: [
           {
             type: "value",
-            name: "告警数量",
             nameTextStyle: {
               color: "#fff"
             },
@@ -610,9 +813,27 @@ export default {
         series: [
           {
             type: "bar",
-
+            name:'实际校准',
+            barWidth: "20%",
+            data: this.PlanBarData,
+            itemStyle: {
+                   normal: {
+                       label: {
+                           show: true,      //开启显示
+                           position: 'top', //在上方显示
+                           textStyle: {     //数值样式
+                               color: "white",
+                               fontSize: 12
+                           }
+                       }
+                   }
+            }
+          },
+           {
+            type: "bar",
+            name:'计划校准',
             barWidth: "20%",
-            data: this.AreaBarData,
+            data: this.PlanBarData,
             itemStyle: {
                    normal: {
                        label: {
@@ -626,6 +847,7 @@ export default {
                    }
             }
           }
+          
         ]
       };
     },
@@ -639,6 +861,7 @@ export default {
         //     color: "#3fd5f1"
         //   }
         // },
+        color: ['#dd4444', '#fec42c', '#80F1BE'],
         geo: {
           // 这个是重点配置区
           map: "china",
@@ -691,7 +914,8 @@ export default {
             // res+=params['data'].name+'</br>';
             res+='风场名称' +' : '+params['name']+'</br>';			
             res+='风场位置' +' : '+params['data']['address']+'</br>';			
-            res+='设备数量' +' : '+params['data']['number']+'</br>';			
+            res+='液压泵数量' +' : '+params['data']['number']+'</br>';			
+            res+='液压扳手数量' +' : '+params['data']['number']+'</br>';			
             return res;
 				  }
         },
@@ -713,6 +937,24 @@ export default {
               }
             },
             data: this.mapData
+          },
+          {
+            name: "测试",
+            type: "scatter",
+            coordinateSystem: "geo",
+            zlevel: 2,
+
+            label: {
+              position: "right",
+              show: false
+            },
+            symbolSize: 10,
+            itemStyle: {
+              normal: {
+                color: "red"
+              }
+            },
+            data: this.mapData1
           }
         ]
       };
@@ -745,6 +987,9 @@ export default {
         //左上 设备信号统计
         // this.pieData=data.signalTotal
         this.pieOptions = this.getPieOptions();
+        this.pieStateOptions = this.getPieStateOptions();
+        this.pieFaultOptions=this.getPieFaultOptions();
+        this.pieDeviceOptions=this.getPieDeviceOptions()
           //左中 液压泵设备统计 
         // this.barTypeData =  data.typeTotal.yAxisData;
         // this.barTypexAxisData=data.typeTotal.xAxisData;
@@ -760,10 +1005,8 @@ export default {
         let data=response.data;
         //设备地址
         this.mapData  =data.addrList
+        this.mapData1  =data.addrList1
         this.mapOptions = this.getMapOptions();
-        // this.deviceTotal = data.total;
-      // }).then(function(val){ 
-      //     that.getAlldeviceListBatch(1,10000); 
 
       }) 
      
@@ -853,9 +1096,9 @@ export default {
         },
       ]
         //中下 频繁告警区域
-        // this.AreaBarData =data.areaData.yAxisData;
-        // this.AreaBarxAxisData=data.areaData.xAxisData;
-        this.barAreaOptions = this.getAreaBarOptions();
+        // this.PlanBarData =data.areaData.yAxisData;
+        // this.PlanBarxAxisData=data.areaData.xAxisData;
+        this.barPlanOptions = this.getPlanBarOptions();
       // })
 
     },
@@ -973,9 +1216,9 @@ export default {
 #content{
   width:100%;
   min-width: 1280px;
-  height: calc(100vh - 84px);
+  height: calc(60vw - 84px);
   /* height: 100vh; */
-  min-height: 728px;
+  min-height: calc(100vh - 84px);
   background-image: url("../../assets/screen/bg_body.png");
     background-position-x: initial;
     background-position-y: initial;

src/views/screen/index_v1.scss

@@ -4,6 +4,7 @@
   height:100%;
   
 }
+@font-face{font-family:electronicFont;src:url(../../assets/screen/font/DS-DIGIT.TTF)}
 #index {
   color: #d3d6dd;
   width: 100%;
@@ -15,8 +16,19 @@
 }
 .head-title{
   height: 8vh;
+  line-height:8vh;
   min-height: 48px;
 }
+.icon_shdq{
+  width:100px;
+
+  margin-left:0px;
+}
+.icon_lb{
+  width:60px;
+
+  margin-right:0px;
+}
 .el-row {
   &:last-child {
     margin-bottom: 0;
@@ -37,7 +49,7 @@
   overflow: hidden;
 
   // font-size: 36px;
-  font-size: 2vw;
+  font-size: 1.6vw;
   color: rgb(8, 240, 255);
   font-weight: bold;
   text-align: center;
@@ -53,7 +65,9 @@
   // background-image: url("../../assets/screen/ksh32.png");
   height: 4vh;
   min-height: 24px;
+ text-align: right;
   background-size: cover;
+  color:#fff;
   background-position: center center;
 }
 
@@ -98,12 +112,59 @@
 }
 /*表格栏*/
 .left-chart{
+  position: relative;
+  border: 1px solid rgba(25,186,139,.17);
   padding: 5px;
-  height:20vw;
-  min-height: 278px;
+  height:15vw;
+  min-height: 188px;
   background-color: #111d41;
   margin:5px;
 }
+.left-chart1-box{
+  width:50%;
+  height:100%;
+  float: left;
+  display: inline-block;
+}
+
+.left-chart1-box-contnet{
+  width:100%;
+  height: 20%;
+  font-size: 2vh;
+  text-align: center;
+  display: inline-block;
+
+}
+.box-number{
+ 
+  color: #ffeb7b;
+  padding: 0.05rem 0;
+  font-size:3.4vh;
+  font-family: electronicFont;
+  font-weight: bold;
+}
+.task-header{
+  font-weight: 600;
+  font-size: 18px;
+  color: #3fd5f1;
+  margin-bottom: 5px;
+  padding-left: 8px;
+
+}
+.task-table{
+  width:100%;
+  height:100%;
+}
+.table-index{
+  display:inline-block;
+  width:16px;
+  height:16px;
+  border-radius:8px;
+  background:#1296db;
+  color:#FFF;
+  text-align:center;
+  line-height:16px;
+}
 /*告警统计*/
 .alarm-title{
   font-weight: 600;
@@ -124,60 +185,144 @@
 }
 //右侧表格
 .right-chart{
+  position: relative;
+  border: 1px solid rgba(25,186,139,.17);
   padding: 5px;
-  height:19vw;
-  min-height: 259px;
+  height:15vw;
+  min-height: 188px;
   background-color: #111d41;
   margin:5px;
 }
-//右侧告警
-.right-alarm{
-  padding: 15px 5px;
-  height:21vw;
-  min-height: 300px;
-  margin:5px;
-  background-color: #111d41;
-}
+
 /*中间地图*/
-.center-box{
-  height:40.3vw;
-  min-height: 578px;
-  margin-top:5px;
-  padding: 5px;
-  background-color: #111d41;
-}
+
 .center-map{
+  background-color: #111d41;
+  margin:5px;
   position : relative;
   top:0;
   left:0;
-  height:27vw;
+  height:calc(30vw + 5px);
   min-height: 384px;
+  border: 1px solid rgba(25,186,139,.17);
+ 
+  z-index: 10;
 }
+.topL{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:0px;left:0px}
+.topR{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:0px;right:0px}
+.bottomL{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:0px;left:0px}
+.bottomR{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:0px;right:0px}
+
 .center-bottom{
-  height:12.5vw;
+  height:15vw;
+  position: relative;
+  border: 1px solid rgba(25,186,139,.17);
+  background-color: #111d41;
+  margin:5px;
   min-height: 179px;
 }
+.center-bottom-left{
+  width:80%;
+  height:100%;
+  padding: 5px;
+  display: inline-block;
+}
+.center-bottom-right{
+  width:20%;
+  height:100%;
+  display: inline-block;
+
+}
+.center-bottom-right-box{
+  width:90%;
+  margin-left: 5%;
+  height:50%;
+  display: inline-block;
+  text-align: center;
+  line-height: 50%;
+  position: relative;
+
+}
+
+.maindataeffect{ 
+  animation: scrolleffect 6.5s infinite linear;
+  width:6vw;
+  margin-top:15px;
+
+}
+
+@keyframes scrolleffect {
+  0%{transfrom: rotate(0deg);}
+  25%{transform: rotate(90deg);}
+  50%{transform: rotate(180deg);}
+  75%{transform: rotate(270deg);}
+  100%{transform: rotate(360deg);}
+}
+@keyframes maindataspecialeffect {
+  0%{transform: rotate(0deg);}
+  100%{transform: rotate(360deg);}
+}
+.maindataeffect-content{
+  width:100%;
+  height:50%;
+  position: absolute;
+  top: calc( 2.8vw + 10px);
+  text-align: center;
+  left: 0;
+  font-size: 3vh;
+}
 .bm-view {
   width: 100%;
   height:46vh;
 }
-.map-left-top{
-  width: 16.5vh;
-  height: 18vh;
+.map-left-bottom{
+  width: 11.5vh;
+  height: 4vh;
 
-  font-size: 2vh;
+  font-size: 1vh;
   position : absolute;
-  background-image: url("../../assets/screen/map_top_bg.png");
-  background-size: cover;
-  top:20px;
+
+  bottom:20px;
   left : 20px; 
   z-index: 999;
+}
+.map-left-bottom-head{
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+.map-left-bottom-title{
+  display: inline-block;
+  width:60%;
+}
+.map-left-bottom-color1{
+  display: inline-block;
+  width:20px;
+  height:8px;
+  background-color: yellow;
+}
+.map-left-bottom-color2{
+  display: inline-block;
+
+  width:20px;
+  height:8px;
+  background-color: red;
+}
+.map-right-bottom{
+  width: 11.5vh;
+  height: 16vh;
+  background:#245baf;
+  font-size: 1vh;
+  position : absolute;
+  border:1px solid #fff;
+  bottom:10px;
+  right : 10px; 
+  z-index: 999;
 
 }
 .center-alarm-label{
-  line-height: 3.5vh;
-  height:3.2vh;
-  width: 16.5vh;
+  line-height: 1.8vh;
+  height:2vh;
+  width:100%;
  
 }
 .center-alarm-total-label{
@@ -188,12 +333,12 @@
   color:yellow;
 }
 .alarm-label-title{
-  width:50%;
+  width:70%;
   text-align: center;
   display: inline-block;
 }
 .alarm-label-value{
-  width:50%;
+  width:30%;
   display: inline-block;
   text-align: center;
 }
@@ -204,7 +349,6 @@
   cursor: pointer;
   font-family: datavfont!important;
     font-style: normal;
-    font-size: 16px;
     font-weight: 400;
     font-variant: normal;
     text-transform: none;
@@ -225,182 +369,3 @@
 .back-btn:hover{
   color:#1bb0cc;
 }
-
-@media (min-width: 1560px){
-  
-  .grid-content {
-    border-radius: 4px;
-    min-height: 4vh;
-  }
-  /*标题*/
-  .title {
-    overflow: hidden;
-  
-    font-size: 36px;
-    // font-size: 2vw;
-    color: rgb(8, 240, 255);
-    font-weight: bold;
-    text-align: center;
-  }
-  .title_l {
-    // background-image: url("../../assets/screen/ksh31.png");
-    height: 4vh;
-    min-height: 24px;
-    background-size: cover;
-    background-position: center center;
-  }
-  .title_r{
-    // background-image: url("../../assets/screen/ksh32.png");
-    height: 4vh;
-    min-height: 24px;
-    background-size: cover;
-    background-position: center center;
-  }
-  
-  /*日期栏*/
-  .time-box-row{
-    height:4vh;
-    min-height: 24px;
-    // margin-top: 25px;
-  }
-  .time-box-left{
-    width:40%;
-    margin-left: 5px;
-    padding-left: 5px;
-    border-radius: 0px;
-    margin-top: 2px;
-    line-height: 3.5vh;
-    height:3.5vh;
-    min-height: 21px;
-    background-image: url("../../assets/screen/time_left.png");
-    background-size: cover;
-    background-position: center center;
-    display: inline-block;
-  }
-  .time-box-right{
-    text-align: right;
-    display: inline-block;
-    border-radius: 0px;
-    margin-top: 2px;
-    line-height: 3.5vh;
-    width:40%;
-    height:3.5vh;
-    min-height: 21px;
-    margin-right: 5px;
-    padding-right: 10px;
-    background-image: url("../../assets/screen/time_right.png");
-    background-size: cover;
-    background-position: center center;
-  }
-  .time-box{
-    font-weight: 600;
-    font-size: 1.7vh;
-  }
-  /*表格烂*/
-  .left-chart{
-    padding: 5px;
-    height:40.5vh;
-    min-height: 188px;
-    background-color: #111d41;
-    margin:5px;
-  }
-  /*告警统计*/
-  .alarm-title{
-    font-weight: 600;
-    font-size: 18px;
-    color: #3fd5f1;
-    margin-bottom:5px;
-    padding-left: 8px;
-  }
-  .alarm-total-box{
-    height:4vh;
-    min-height: 24px;
-    text-align: center;
-    line-height: 4vh;
-    font-weight: 500;
-    font-size: 1.8vh;
-    background-color:#15265f;
-    margin:5px 20px;
-  }
-  //右侧表格
-  .right-chart{
-    padding: 5px;
-    height:36.5vh;
-    min-height: 259px;
-    background-color: #111d41;
-    margin:5px;
-  }
-  //右侧告警
-  .right-alarm{
-    padding: 15px 5px;
-    height:45vh;
-    margin:5px;
-    min-height: 300px;
-    background-color: #111d41;
-  }
-  /*中间地图*/
-  .center-box{
-    height:82vh;
-    min-height: 578px;
-    margin-top:5px;
-    padding: 5px;
-    background-color: #111d41;
-  }
-  .center-map{
-    position : relative;
-    top:0;
-    left:0;
-    height:52vh;
-    min-height: 384px;
-  }
-  .center-bottom{
-    height:25vh;
-    min-height: 179px;
-  }
-  .bm-view {
-    width: 100%;
-    height:46vh;
-  }
-  .map-left-top{
-    width: 16.5vh;
-    height: 18vh;
-    font-size: 2vh;
-    position : absolute;
-    background-image: url("../../assets/screen/map_top_bg.png");
-    background-size: cover;
-    top:20px;
-    left : 20px; 
-    z-index: 999;
-  
-  }
-  .center-alarm-label{
-    line-height: 3.5vh;
-    height:3.2vh;
-    width: 16.5vh;
-   
-  }
-  .center-alarm-total-label{
-    line-height: 5.2vh;
-    height:5.2vh;
-    width: 16.5vh;
-    font-weight: bold;
-    color:yellow;
-  }
-  .alarm-label-title{
-    width:50%;
-    text-align: center;
-    display: inline-block;
-  }
-  .alarm-label-value{
-    width:50%;
-    display: inline-block;
-    text-align: center;
-  }
-  
-  ::v-deep .anchorBL{
-    display: none !important;
-  }
-  ::v-deep .BMap_cpyCtrl {
-    display: none !important;
-  }
-}

src/views/screen/preview_v1.vue

@@ -4,16 +4,20 @@
     <!--顶部标题-->
     <el-row class="head-title">
       <el-col :span="1">
-        <div class="grid-content"></div>
+        <div class="grid-content title_r"></div>
       </el-col>
       <el-col :span="9">
-        <div class="grid-content title_l"></div>
+        <div class="grid-content title_l">
+         <img class="icon_shdq"  src="../../assets/screen/icon_shdq.png">
+        </div>
       </el-col>
       <el-col :span="4">
-        <div class="grid-content title">智慧云数据大屏</div>
+        <div class="grid-content title">智能装备管理平台</div>
       </el-col>
       <el-col :span="9">
-        <div class="grid-content title_r"></div>
+        <div class="grid-content title_r">
+          <img class="icon_lb"  src="../../assets/screen/icon_lb.png">
+        </div>
       </el-col>
       <el-col :span="1">
         <div class="grid-content"></div>
@@ -48,18 +52,62 @@
         <div class="grid-content"></div>
       </el-col>
       <el-col :span="6">
-        <!--设备信号 左上-->
+        <!--服务螺栓 左上-->
+        <div class="grid-content left-chart">
+          <i class="topL"></i>
+          <i class="topR"></i>
+          <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"></div>
+
+          </div>
+          <div class="left-chart1-box">
+            <base-bar :options="barOptions" width="100%" height="100%" theme="shine" />
+          </div>
+            
+        </div>
+        <!--服务螺栓 左中-->
         <div class="grid-content left-chart">
+          <i class="topL"></i>
+          <i class="topR"></i>
+          <i class="bottomL"></i>
+          <i class="bottomR"></i>
           <base-pie :options="pieOptions" width="100%" theme="shine" />
+          
         </div>
-        <!--井类型统计 左中-->
+         <!--作业动态 左下-->
         <div class="grid-content left-chart">
-          <base-bar :options="barOptions" width="100%" height="100%" theme="shine" />
+          <i class="topL"></i>
+          <i class="topR"></i>
+          <i class="bottomL"></i>
+          <i class="bottomR"></i>
+          <table width="100%" border=0 class="task-table" style="border-collapse:collapse;border:none;">
+            <tr>
+                <th colspan="4" class="task-header">作业动态</th>
+            </tr>
+            <tr align="center">
+                <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>A0001B</td>
+              <td>固定轴—机座</td>
+              <td>员工1</td>
+            </tr>
+          </table>
         </div>
 
       </el-col>
       <el-col :span="10">
-        <div class="grid-content center-box">
+       
           <!--中间地图-->
        
               <!-- <baidu-map class="center-map" :center="center" :zoom="zoom" @ready="mapInit">
@@ -69,50 +117,105 @@
                 </bml-marker-clusterer>
               </baidu-map> -->
           
-          <div class="center-map">
-            <!--地图左上设备统计-->
-            <div class="map-left-top">
+          <div class="grid-content center-map">
+            <i class="topL"></i>
+            <i class="topR"></i>
+            <i class="bottomL"></i>
+            <i class="bottomR"></i>
+            <!--地图右下统计-->
+            <div class="map-right-bottom">
+              <div class="center-alarm-label">
+                <div class="alarm-label-title">区域</div>
+                <div class="alarm-label-value normal-value" >设备</div>
+              </div>
               <div class="center-alarm-label">
-                <div class="alarm-label-title">液压泵</div>
+                <div class="alarm-label-title">华北大区</div>
                 <div class="alarm-label-value normal-value" >21</div>
               </div>
               <div class="center-alarm-label">
-                <div class="alarm-label-title">扳手</div>
+                <div class="alarm-label-title">东北大区</div>
                 <div class="alarm-label-value alarm-value">24</div>
               </div>
               <div class="center-alarm-label">
-                <div class="alarm-label-title">风机</div>
+                <div class="alarm-label-title">西北大区</div>
                 <div class="alarm-label-value contact-value">24</div>
               </div>
               <div class="center-alarm-label">
-                <div class="alarm-label-title">其他</div>
-                <div class="alarm-label-value other-value">543</div>
+                <div class="alarm-label-title">南部大区</div>
+                <div class="alarm-label-value other-value">32</div>
               </div>
-              <div class="center-alarm-total-label">
-                <div class="alarm-label-title">合计</div>
-                <div class="alarm-label-value total-value">456</div>
+              <div class="center-alarm-label">
+                <div class="alarm-label-title">中部大区</div>
+                <div class="alarm-label-value other-value">321</div>
+              </div>
+              <div class="center-alarm-label">
+                <div class="alarm-label-title">内蒙大区</div>
+                <div class="alarm-label-value other-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>
+            </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-color2"></span></div>
             </div>
              <base-map width="100%"   :options="mapOptions" />
           </div>
            
       
 
-          <div class="center-bottom">
+          <div class="grid-content center-bottom">
+            <i class="topL"></i>
+            <i class="topR"></i>
+            <i class="bottomL"></i>
+            <i class="bottomR"></i>
             <!--地图下方频繁告警区域统计-->
-            <base-bar :options="barAreaOptions" width="100%" height="100%" theme="shine" />
+            <div class="center-bottom-left">
+              <base-bar :options="barPlanOptions" width="100%" height="100%" theme="shine" />
+            </div>
+            <div class="center-bottom-right">
+                <div class="center-bottom-right-box">
+                 
+                    
+                    <img class="maindataeffect" src="../../assets/screen/maindataeffect.png">
+                    <span class="maindataeffect-content">良好</span>
+                  
+                </div>
+                <div class="center-bottom-right-box">
+                    <base-pie :options="pieStateOptions" width="100%" theme="shine" />
+                </div>
+                 
+            </div>
+            
           </div>
-        </div>
+       
       </el-col>
       <el-col :span="6">
         <!--右边月告警曲线图-->
         <div class="grid-content right-chart">
+          <i class="topL"></i>
+          <i class="topR"></i>
+          <i class="bottomL"></i>
+          <i class="bottomR"></i>
           <base-line :options="lineOptions" width="100%" theme="shine" />
+        </div>  
+
+        <div class="grid-content right-chart">
+          <i class="topL"></i>
+          <i class="topR"></i>
+          <i class="bottomL"></i>
+          <i class="bottomR"></i>
+          <base-pie :options="pieFaultOptions" width="100%" theme="shine" />
         </div>
-        <!--右下方 实时告警信息-->
-        <div class="grid-content right-alarm">
-          <div class="grid-content alarm-title">实时告警信息</div>
-          <scroll :alarmData="alarmData" />
+        <div class="grid-content right-chart">
+          <i class="topL"></i>
+          <i class="topR"></i>
+          <i class="bottomL"></i>
+          <i class="bottomR"></i>
+          <base-pie :options="pieDeviceOptions" width="100%" theme="shine" />
         </div>
       </el-col>
       <el-col :span="1">
@@ -142,7 +245,7 @@ export default {
     scroll,
     BmlMarkerClusterer
   },
-  props:['date','nowWeek','alarm_data','alarmData','deviceStatusData','pieOptions','barAreaOptions','barOptions','lineOptions','mapOptions'],
+  props:['date','nowWeek','workData','deviceStatusData','pieOptions','pieStateOptions','pieFaultOptions','pieDeviceOptions','barPlanOptions','barOptions','lineOptions','mapOptions'],
   data() {
     
     return {