修改

src/views/screen/index.vue

@@ -15,6 +15,7 @@
              :pieDeviceOptions='pieDeviceOptions'
              :pieOptions='pieOptions'
              :pieRightOptions='pieRightOptions'
+             :pieCenterOptions='pieCenterOptions'
              :barPlanOptions='barPlanOptions'
              :barOptions='barOptions'
              :lineOptions='lineOptions'
@@ -108,6 +109,7 @@ export default {
       pieStateOptions:{},
       pieFaultOptions:{},
       pieRightOptions:{},
+      pieCenterOptions:{},
       pieDeviceOptions:{},
       netPieOptions:{},
       barPlanOptions: {},
@@ -328,6 +330,87 @@ export default {
         ]
       };
     },
+    getpieCenterOptions(){
+      return  {
+        tooltip: {
+          show: false,
+          trigger: 'item',
+          formatter: "{a} : {c} ({d}%)"
+        },
+        legend: {
+          show:false
+        },
+        //  color: ['#546570', '#c4ccd3'],
+        // color: ['rgb(255,159,127)', 'rgb(50,197,233)'],
+        // legend: {
+        //   orient: 'vertical',
+        //   x: '35%',
+        //   top: '27%',
+        //   itemHeight: 10,//图例的高度
+        //   itemGap: 8,//图例之间的间距
+        //   data: ['通过率' + pass_rate + '%', '平均值' + average + '%']
+        //   //图例的名字需要和饼图的name一致，才会显示图例
+        // },
+        title: {
+          text: 70+ '%',  //图形标题，配置在中间对应效果图的80%
+          left: "center",
+          top: "50%",
+          textStyle: {
+            color: "green",
+            fontSize: 16,
+            align: "center"
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['70%', '90%'],  //设置内外环半径,两者差值越大，环越粗
+            hoverAnimation: false,　 //移入图形是否放大
+            label: {     //对应效果图中的Angular显示与否以及设置样式
+              // show: true,
+              // position: 'center',
+              normal: {
+                show: true,
+                position: 'center',
+                padding: [0, 0, 20, 0],  //设置字angular的边距
+                fontSize: 16,
+              }
+            },
+            labelLine: {
+              normal: {  //label线不显示
+                show: false
+              }
+            },
+            // emphasis: { //鼠标移入时效果
+            //   label: {
+            //     show: false,
+            //     fontSize: '20',
+            //     fontWeight: 'bold'
+            //   }
+            // },
+            data: [
+              {                  
+                name: '良好',   //数据，name对应Angular
+                value: 70,  //对应显示的部分数据即80%
+                itemStyle: {
+                  normal: {
+                    color: 'green',
+                  }
+                }
+              },
+              {
+                value: 30,
+                itemStyle: {
+                  normal: {
+                    color: 'transparent'
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      };
+    },
     getPieFaultOptions(){
       return {
         title: {
@@ -1073,6 +1156,7 @@ export default {
         this.pieOptions = this.getPieOptions();
         this.pieStateOptions = this.getPieStateOptions();
         this.pieFaultOptions=this.getPieFaultOptions();
+        this.pieCenterOptions=this.getpieCenterOptions()
         this.pieRightOptions=this.getpieRightOptions()
         this.pieDeviceOptions=this.getPieDeviceOptions()
           //左中 液压泵设备统计 

src/views/screen/index_v1.scss

@@ -275,7 +275,7 @@
   position: absolute;
   top: 0px;
   text-align: center;
-  padding-top: 45%;
+  padding-top: 50%;
   left: 0;
   font-size: 3vh;
 }
@@ -291,7 +291,8 @@
   height:46vh;
 }
 .map-left-bottom{
-  width: 100px;
+  width: 5vw;
+  min-width: 100px;
   height: 4vh;
 
   font-size: 1vh;
@@ -323,7 +324,8 @@
   background-color: red;
 }
 .map-right-bottom{
-  width: 100px;
+  width: 5vw;
+  min-width: 100px;
   height: 17.5vh;
   background:#245baf;
   font-size: 1vh;

src/views/screen/preview_v1.vue

@@ -178,8 +178,7 @@
             </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>
+                   <base-pie :options="pieCenterOptions" width="100%" theme="shine" />
                 </div>
                 <div class="center-bottom-right-box">
                     <base-pie :options="pieStateOptions" width="100%" theme="shine" />
@@ -252,7 +251,7 @@ export default {
     scroll,
     BmlMarkerClusterer
   },
-  props:['date','nowWeek','workData','deviceStatusData','pieOptions','pieRightOptions','alarmData','pieStateOptions','pieFaultOptions','pieDeviceOptions','barPlanOptions','barOptions','lineOptions','mapOptions'],
+  props:['date','nowWeek','workData','deviceStatusData','pieCenterOptions','pieOptions','pieRightOptions','alarmData','pieStateOptions','pieFaultOptions','pieDeviceOptions','barPlanOptions','barOptions','lineOptions','mapOptions'],
   data() {
     
     return {