From 0b7a2c7e809ccabd7c8b98648346c32d1c281e17 Mon Sep 17 00:00:00 2001
From: yjl <1490736767@qq.com>
Date: Thu, 20 Oct 2022 13:59:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=AD=E5=BB=BA=E5=9B=9B?=
 =?UTF-8?q?=E5=B1=80=E9=A1=B5=E9=9D=A2=EF=BC=88=E5=8F=8C=E7=A2=B3=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=EF=BC=89=E7=BB=86=E8=8A=82=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fourEngin/assets/images/common/bg_sby.png | Bin 0 -> 380 bytes
 .../fourEngin/carbon/centerBottom.vue         |   9 +-
 .../fourEngin/carbon/centerTop.vue            | 343 ++++++++++--------
 .../fourEngin/carbon/leftBottom.vue           |  11 +-
 .../fourEngin/carbon/leftCenter.vue           |   4 +-
 .../projectAdmin/fourEngin/carbon/leftTop.vue |   3 +-
 .../fourEngin/carbon/rightBottom.vue          |   2 +-
 .../fourEngin/carbon/rightCenter.vue          |   2 +-
 .../components/environmentWatchTwo.vue        |  30 +-
 9 files changed, 218 insertions(+), 186 deletions(-)
 create mode 100644 src/views/projectAdmin/fourEngin/assets/images/common/bg_sby.png

diff --git a/src/views/projectAdmin/fourEngin/assets/images/common/bg_sby.png b/src/views/projectAdmin/fourEngin/assets/images/common/bg_sby.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e968d5dec7d44befb9cbe39d3bd8dfd6e8513af
GIT binary patch
literal 380
zcmV-?0fYXDP)<h;3K|Lk000e1NJLTq001`t000sQ1^@s6|GGxQ00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0TD?=K~#7F?U%bs
z13?sq|CwDE;wXp`K^HHLWl#_;C545Rg;sVxf#g|y0=xJCwt^^L8bPqM&_W9hq>#jw
z-DD@{4|$0*><7bKm|{LS1Lrq|_e~2lA;^4TjQN04y!Y!RaLTpJH!;Qfr9bKn%Gdi|
zzSH{rU4l|ByIHzBlWf#u+i=z(<{`z-JAduTodqc6DI5IDXrI-m;gSfJrTEa#uMiNo
zz2cf)mVfLyAATbsUb5ncUKRmU$!VpM(@G_$l}b)4mYwuwlB5WTG%`-S<}4$^o{J6;
z5XbYiL-A^j%aRd6I_Z<G+SDQx(~$SmgFf8H40X&tj0m$Xx_f-@enBbw+skV!z^W|Y
a=rsaGY*MP<L10w?0000<MNUMnLSTXb(Vg!A

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/fourEngin/carbon/centerBottom.vue b/src/views/projectAdmin/fourEngin/carbon/centerBottom.vue
index 088eb687..52d6e59d 100644
--- a/src/views/projectAdmin/fourEngin/carbon/centerBottom.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/centerBottom.vue
@@ -49,7 +49,14 @@ export default {
             // 默认为直线，可选为：'line' | 'shadow'
           }
         },
-        
+         grid: {
+          // 图表距离边框的距离，可用百分比和数字（px）配置
+          top: '15%',
+          left: '2%',
+          right: '4%',
+          bottom: '17%',
+          containLabel: true
+        },
 
         xAxis: {
          boundaryGap: false,
diff --git a/src/views/projectAdmin/fourEngin/carbon/centerTop.vue b/src/views/projectAdmin/fourEngin/carbon/centerTop.vue
index 3b1e0dcc..6c9a69ee 100644
--- a/src/views/projectAdmin/fourEngin/carbon/centerTop.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/centerTop.vue
@@ -1,16 +1,27 @@
 <template>
   <div class="containerBox">
     <div class="right1">
-      <span @click="change(0)" :class="number == 0 ?  'newStyle':'btn_anniu'">实时数据</span>
-      <span @click="change(1)" :class="number == 1 ?  'newStyle':'btn_anniu'">零碳展厅</span>
+      <span @click="change(0)" :class="number == 0 ? 'newStyle' : 'btn_anniu'">实时数据</span>
+      <span @click="change(1)" :class="number == 1 ? 'newStyle' : 'btn_anniu'">零碳展厅</span>
     </div>
     <div class="right3">
-      <div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div> 
+      <div class="dropDown" v-show="0 === number">
+        <el-dropdown>
+          <span class="el-dropdown-link"> 设备一<i class="el-icon-arrow-down el-icon--right"></i> </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>设备二</el-dropdown-item>
+            <el-dropdown-item>设备三</el-dropdown-item>
+            
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div>
       <div class="right4" v-show="1 === number">
         <!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> -->
-         <videoPhoto class="video"></videoPhoto>
-        </div> 
+        <videoPhoto class="video"></videoPhoto>
+      </div>
 
+      
     </div>
   </div>
 </template>
@@ -18,12 +29,12 @@
 <script>
 import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
 // import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
-import { environmentDevList } from "@/assets/js/api/environmentManage";
-import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
-import echarts from "echarts4";
+import { environmentDevList } from '@/assets/js/api/environmentManage'
+import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
+import echarts from 'echarts4'
 export default {
-  components:{
-  videoPhoto
+  components: {
+    videoPhoto
   },
   data() {
     return {
@@ -34,59 +45,57 @@ export default {
       offlineDevNum: 0,
       realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
       plantCap: {
-        crc: "--",
-        humidity: "--",
-        noise: "--",
-        plateHumidity: "--",
-        plateTemperature: "--",
-        pm10: "--",
-        pm25: "--",
-        pressure: "--",
-        temperature: "--",
-        tsp: "--",
-        voltage: "--",
-        winddirectionName: "--",
-        windspeed: "--"
+        crc: '--',
+        humidity: '--',
+        noise: '--',
+        plateHumidity: '--',
+        plateTemperature: '--',
+        pm10: '--',
+        pm25: '--',
+        pressure: '--',
+        temperature: '--',
+        tsp: '--',
+        voltage: '--',
+        winddirectionName: '--',
+        windspeed: '--'
       }
     }
   },
-    mounted() {
-    this.createCenterChart();
+  mounted() {
+    this.createCenterChart()
     // this.$nextTick(() => {
     //   this.getDevList();
     // });
   },
   methods: {
     getDevList() {
-      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
-        result => {
-          console.log("列表", result);
-          this.devList = result.result;
-          console.log(this.devList);
-          if (result.result.length > 0) {
-            this.currentDevDetail = result.result[0];
+      environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
+        console.log('列表', result)
+        this.devList = result.result
+        console.log(this.devList)
+        if (result.result.length > 0) {
+          this.currentDevDetail = result.result[0]
 
-            this.$emit('custClick',this.currentDevDetail)
+          this.$emit('custClick', this.currentDevDetail)
 
-            this.offlineDevNum = 0;
-            this.onlineDevNum = 0;
-            this.devList.forEach(element => {
-              if (element.isClosed == 2) {
-                this.offlineDevNum++;
-              } else {
-                this.onlineDevNum++;
-              }
-            });
-            this.getRealTimeDustNoiseData();
-            // this.realTimeDustNoiseDataTime = setInterval( () => {
-            //   this.getRealTimeDustNoiseData();
-            // },5000)
-            // this.selectDustNoiseData();  近24H
-          } else {
-            // this.createCenterChart();
-          }
+          this.offlineDevNum = 0
+          this.onlineDevNum = 0
+          this.devList.forEach(element => {
+            if (element.isClosed == 2) {
+              this.offlineDevNum++
+            } else {
+              this.onlineDevNum++
+            }
+          })
+          this.getRealTimeDustNoiseData()
+          // this.realTimeDustNoiseDataTime = setInterval( () => {
+          //   this.getRealTimeDustNoiseData();
+          // },5000)
+          // this.selectDustNoiseData();  近24H
+        } else {
+          // this.createCenterChart();
         }
-      );
+      })
     },
     /** 查询 */
     handleQuery() {
@@ -97,12 +106,12 @@ export default {
     // // 切换设备
     realTimeMonitor(value) {
       if (this.realTimeDustNoiseDataTime) {
-        clearInterval(this.realTimeDustNoiseDataTime);
+        clearInterval(this.realTimeDustNoiseDataTime)
       }
-      console.log("id换了吗", value);
-      this.currentDevDetail = value;
+      console.log('id换了吗', value)
+      this.currentDevDetail = value
 
-      this.getRealTimeDustNoiseData();
+      this.getRealTimeDustNoiseData()
       // this.realTimeDustNoiseDataTime = setInterval( () => {
       //   this.getRealTimeDustNoiseData();
       // },5000)
@@ -115,70 +124,68 @@ export default {
       let data = {
         deviceId: this.currentDevDetail.deviceId,
         projectSn: this.$store.state.projectSn
-      };
-      console.log(data);
+      }
+      console.log(data)
       getRealTimeDustNoiseDataApi(data).then(res => {
         if (res.code == 200) {
-          console.log(res.result);
+          console.log(res.result)
           if (res.result != null) {
-            this.plantCap = res.result;
+            this.plantCap = res.result
           } else {
             this.plantCap = {
-              crc: "--",
-              humidity: "--",
-              noise: "--",
-              plateHumidity: "--",
-              plateTemperature: "--",
-              pm10: "--",
-              pm25: "--",
-              pressure: "--",
-              temperature: "--",
-              tsp: "--",
-              voltage: "--",
-              winddirectionName: "--",
-              windspeed: "--"
-            };
+              crc: '--',
+              humidity: '--',
+              noise: '--',
+              plateHumidity: '--',
+              plateTemperature: '--',
+              pm10: '--',
+              pm25: '--',
+              pressure: '--',
+              temperature: '--',
+              tsp: '--',
+              voltage: '--',
+              winddirectionName: '--',
+              windspeed: '--'
+            }
           }
-          this.createCenterChart();
+          this.createCenterChart()
         }
-      });
+      })
     },
     //展示数据/视频播放切换
-     change: function(index) {
-      console.log(111);
-      this.number = index 
+    change: function(index) {
+      console.log(111)
+      this.number = index
     },
-    
+
     //环境监测实时数据--图表
     createCenterChart() {
-      let centerChart = echarts.init(this.$refs.centerChart);
-      console.log("this.$refs.centerChart");
-      console.log(this.$refs.centerChart.offsetHeight);
-      centerChart.clear();
-      let detailData = this.$t("message.environmentalOverview.plantCap");
+      let centerChart = echarts.init(this.$refs.centerChart)
+      console.log('this.$refs.centerChart')
+      console.log(this.$refs.centerChart.offsetHeight)
+      centerChart.clear()
+      let detailData = this.$t('message.environmentalOverview.plantCap')
       for (let i = 0; i < detailData.length; i++) {
         if (detailData[i].id == 1) {
-          detailData[i].value = this.plantCap.humidity; //湿度
+          detailData[i].value = this.plantCap.humidity //湿度
         } else if (detailData[i].id == 2) {
-          detailData[i].value = this.plantCap.pm25; //pm2.5
+          detailData[i].value = this.plantCap.pm25 //pm2.5
         } else if (detailData[i].id == 3) {
-          detailData[i].value = this.plantCap.temperature; //温度
+          detailData[i].value = this.plantCap.temperature //温度
         } else if (detailData[i].id == 4) {
-          detailData[i].value = this.plantCap.tsp; //tsp
+          detailData[i].value = this.plantCap.tsp //tsp
         } else if (detailData[i].id == 5) {
-          detailData[i].value = this.plantCap.windspeed; //风速
+          detailData[i].value = this.plantCap.windspeed //风速
         } else if (detailData[i].id == 6) {
-          detailData[i].value = this.plantCap.pm10; // pm10
+          detailData[i].value = this.plantCap.pm10 // pm10
         } else if (detailData[i].id == 7) {
-          detailData[i].value = this.plantCap.winddirectionName;
+          detailData[i].value = this.plantCap.winddirectionName
         } else if (detailData[i].id == 8) {
-          detailData[i].value = this.plantCap.pressure
-            ? this.plantCap.pressure
-            : "--";
+          detailData[i].value = this.plantCap.pressure ? this.plantCap.pressure : '--'
         }
-        detailData[i].value += detailData[i].unit;
+        detailData[i].value += detailData[i].unit
       }
-      var plantCap = detailData;
+      var plantCap = detailData
 
       var datalist = [
         {
@@ -188,11 +195,11 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#29c0fb"
+              color: '#29c0fb'
             },
             {
               offset: 1,
-              color: "#2dc5b9"
+              color: '#2dc5b9'
             }
           ])
         },
@@ -203,11 +210,11 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#35d17e"
+              color: '#35d17e'
             },
             {
               offset: 1,
-              color: "#49ddb2"
+              color: '#49ddb2'
             }
           ])
         },
@@ -218,11 +225,11 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#e5d273"
+              color: '#e5d273'
             },
             {
               offset: 1,
-              color: "#e4a37f"
+              color: '#e4a37f'
             }
           ])
         },
@@ -233,11 +240,11 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#277aec"
+              color: '#277aec'
             },
             {
               offset: 1,
-              color: "#57c5ec"
+              color: '#57c5ec'
             }
           ])
         },
@@ -248,11 +255,11 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#e54948"
+              color: '#e54948'
             },
             {
               offset: 1,
-              color: "#f08456"
+              color: '#f08456'
             }
           ])
         },
@@ -263,11 +270,11 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#11c46e"
+              color: '#11c46e'
             },
             {
               offset: 1,
-              color: "#f08456"
+              color: '#f08456'
             }
           ])
         },
@@ -278,21 +285,21 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#6367E0"
+              color: '#6367E0'
             },
             {
               offset: 1,
-              color: "#B667F0"
+              color: '#B667F0'
             }
           ])
         }
-      ];
-      var datas = [];
+      ]
+      var datas = []
       for (var i = 0; i < plantCap.length; i++) {
-        var item = plantCap[i];
-        var itemToStyle = datalist[i];
+        var item = plantCap[i]
+        var itemToStyle = datalist[i]
         datas.push({
-          name: item.value + "\n" + item.name,
+          name: item.value + '\n' + item.name,
           value: itemToStyle.offset,
           symbolSize: itemToStyle.symbolSize,
           label: {
@@ -310,7 +317,7 @@ export default {
               opacity: itemToStyle.opacity
             }
           }
-        });
+        })
       }
       let option1 = {
         grid: {
@@ -321,11 +328,11 @@ export default {
         xAxis: [
           {
             gridIndex: 0,
-            type: "value",
+            type: 'value',
             show: false,
             min: 0,
             max: 100,
-            nameLocation: "middle",
+            nameLocation: 'middle',
             nameGap: 5
           }
         ],
@@ -335,13 +342,13 @@ export default {
             min: 0,
             show: false,
             max: 100,
-            nameLocation: "middle",
+            nameLocation: 'middle',
             nameGap: 30
           }
         ],
         series: [
           {
-            type: "effectScatter",
+            type: 'effectScatter',
             // symbol: 'circle',
             // symbolSize: 120,
 
@@ -349,36 +356,35 @@ export default {
             label: {
               normal: {
                 show: true,
-                formatter: "{b}",
-                color: "#fff",
+                formatter: '{b}',
+                color: '#fff',
                 textStyle: {
-                  fontSize: "20"
+                  fontSize: '20'
                 }
               }
             },
             itemStyle: {
               normal: {
-                color: "#00acea"
+                color: '#00acea'
               }
             },
             data: datas
           }
         ]
-      };
-      centerChart.setOption(option1);
-      window.onresize = centerChart.resize;
+      }
+      centerChart.setOption(option1)
+      window.onresize = centerChart.resize
     }
   },
-  watch:{
-      'plantCap':{
-        handler(newVal, oldVal) {
-          if (newVal != oldVal) {
-            this.createCenterChart();
-          }
+  watch: {
+    plantCap: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createCenterChart()
         }
       }
-    },
-  
+    }
+  }
 }
 </script>
 
@@ -393,8 +399,7 @@ export default {
     height: 10%;
     display: flex;
     margin-left: 35%;
-    
-   
+
     .btn_anniu {
       display: inline-block;
       // margin-top: 5px;
@@ -410,7 +415,6 @@ export default {
       margin: 0 10px 0 0;
       color: #fff;
       font-size: 24px;
-
     }
 
     .newStyle {
@@ -430,32 +434,49 @@ export default {
     }
   }
   .right3 {
-     width: 100%;
+    width: 100%;
     height: 80%;
     margin-top: 25px;
-     .centerChart {
-    width: 100%;
-    height: calc(100% - 22px);
+    .centerChart {
+      width: 100%;
+      height: calc(100% - 22px);
     }
-   
-    #right2{
-       width: 100%;
-    height: 100%;
-    
-  }
-  .right4{
-    width: 100%;
-    height: 100%;
-    .video{
-      margin-bottom: -50px;
-    display: inline-block;
-    margin-left: 25px;    
-    width: 850px;
-      height: 550px;
-    }
-  }
-    }
-    
 
+    #right2 {
+      width: 100%;
+      height: 100%;
+    }
+    .right4 {
+      width: 100%;
+      height: 100%;
+      .video {
+        margin-bottom: -50px;
+        display: inline-block;
+        margin-left: 25px;
+        width: 850px;
+        height: 550px;
+      }
+    }
+    .dropDown {
+      float: right;
+      text-align: center;
+      margin-right: 40px;
+      margin-top: -20px;
+      width: 100px;
+      height: 30px;
+      line-height: 30px;
+      background-color: #305c6d;
+      background-image: url(../assets/images/common/bg_sby.png);
+      background-repeat: no-repeat;
+      background-size: 100%;
+      font-size: 8px;
+     .el-dropdown-link {
+      color: #Fff;
+     }
+     .el-icon-arrow-down{
+      margin-left: 15px;
+     }
+    }
+  }
 }
 </style>
diff --git a/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue b/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue
index 7a68dc99..f8670a1a 100644
--- a/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue
@@ -3,7 +3,9 @@
    <div class="electricityBox">
     <div class="electricityTop">
      <span class="text1">今日发电</span>
-    <span class="numTop" ><span class="numText">10</span></span>
+    <span class="numTop" >
+      <span class="numText">10</span>
+      </span>
     <span class="texts">度</span>
    </div>
     <div class="electricityBottom">
@@ -180,7 +182,7 @@ export default {
   span{
    color: #6EE4F0 ;
     font-size: 24px;
-    opacity: 0.7;
+   // opacity: 0.7;
   }
   .numTop{
      display: inline-block;
@@ -193,13 +195,14 @@ export default {
       background-size: 80%;
       //font-size: 40px;
       line-height: 60px;
-      color: #fff !important;
+      // color: #fff !important;
       margin-bottom: 10px;
       margin-right: -15px;
+      
   }
   .numText{
     font-size: 40px;
-    color: #fff;
+    color: #fff !important;
     margin-right: 25px;
   }
   .text1{
diff --git a/src/views/projectAdmin/fourEngin/carbon/leftCenter.vue b/src/views/projectAdmin/fourEngin/carbon/leftCenter.vue
index bb2d0d78..47d06dfa 100644
--- a/src/views/projectAdmin/fourEngin/carbon/leftCenter.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/leftCenter.vue
@@ -91,10 +91,10 @@ export default {
       color:#72bdc9;
       border-bottom: 1px solid rgba(31, 68, 86, 0.3);
       line-height: 35px;
-      opacity: 0.8;
+      //opacity: 0.8;
     }
     td {
-      color: #c5c7cc;
+      color: #FFF;
       line-height: 35px;
     }
   }
diff --git a/src/views/projectAdmin/fourEngin/carbon/leftTop.vue b/src/views/projectAdmin/fourEngin/carbon/leftTop.vue
index 8f8ead08..90c14de6 100644
--- a/src/views/projectAdmin/fourEngin/carbon/leftTop.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/leftTop.vue
@@ -52,11 +52,12 @@ export default {
     position: relative;
     color: #c5c7cc;
     .air {
+      margin-top: 25px;
       width: 100%;
       height: 80%;
     }   
     .text {
-     margin-top: 10px;
+     margin-top: -20px;
       width: 100%;
       height: 20%;
       text-align: center;
diff --git a/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue b/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue
index d224b5f0..d7df33e1 100644
--- a/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/rightBottom.vue
@@ -71,7 +71,7 @@ export default {
         grid: {
           // 图表距离边框的距离，可用百分比和数字（px）配置
           top: '5%',
-          left: '0%',
+          left: '4%',
           right: '4%',
           bottom: '25%',
           containLabel: true
diff --git a/src/views/projectAdmin/fourEngin/carbon/rightCenter.vue b/src/views/projectAdmin/fourEngin/carbon/rightCenter.vue
index 253faf90..ea5d4f51 100644
--- a/src/views/projectAdmin/fourEngin/carbon/rightCenter.vue
+++ b/src/views/projectAdmin/fourEngin/carbon/rightCenter.vue
@@ -283,7 +283,7 @@ export default {
         }
         span {
           color: #6ee4f0;
-          opacity: 0.8;
+          
           font-size: 12px;
         }
         .span1{
diff --git a/src/views/projectAdmin/fourEngin/components/environmentWatchTwo.vue b/src/views/projectAdmin/fourEngin/components/environmentWatchTwo.vue
index 9517cfdc..74d890a2 100644
--- a/src/views/projectAdmin/fourEngin/components/environmentWatchTwo.vue
+++ b/src/views/projectAdmin/fourEngin/components/environmentWatchTwo.vue
@@ -75,7 +75,7 @@ export default {
 var dataArr = 80;
 
 var option = {
-   // backgroundColor: "#FFFFFF",
+  // backgroundColor: "#162235",
     title: {
         show: true,
         text: '优',
@@ -84,8 +84,8 @@ var option = {
         z: 8,
         textAlign: 'center',
         textStyle: {
-            color: '#458efd',
-            fontSize: 20,
+            color: '#42A6DD ',
+            fontSize: 15,
             fontWeight: 'normal'
         },
 
@@ -94,15 +94,15 @@ var option = {
             name: "内部（环形）进度条",
             type: "gauge",
             // center: ['30%', '40%'],
-            radius: '50%',
+            radius: '60%',
             splitNumber: 20,
             axisLine: {
                 lineStyle: {
                     color: [
-                        [dataArr / 80, '#6acdc9'],
+                        [dataArr / 100, '#6acdc9'],
                         [1]
                     ],
-                    width: 5
+                    width: 3.5
                 }
             },
             axisLabel: {
@@ -123,7 +123,7 @@ var option = {
             name: '外部刻度',
             type: 'gauge',
             //  center: ['20%', '50%'],
-            radius: '62%',
+            radius: '70%',
             min: 0, //最小刻度
             max: 100, //最大刻度
             splitNumber: 10, //刻度数量
@@ -133,7 +133,7 @@ var option = {
                 show: true,
                 // 仪表盘刻度线
                 lineStyle: {
-                    width: 1,
+                    width: 0.5,
                     color: [
                          [1]
                     ]
@@ -141,7 +141,7 @@ var option = {
             },
             //仪表盘文字
             axisLabel: {
-                show: true,
+                show: false,
                 color: '#7abec4',
                 distance: 8,
                 fontSize:8,
@@ -179,11 +179,11 @@ var option = {
                     color: '#7abec4', //用颜色渐变函数不起作用
                     width: 1,
                 },
-                length: -5
+                length: -3
             }, //刻度样式
             splitLine: {
                 show: true,
-                length: -8,
+                length: -5,
                 lineStyle: {
                     color: '#7abec4', //用颜色渐变函数不起作用
                       width: 1,
@@ -199,7 +199,7 @@ var option = {
         /*内部*/
         {
             type: 'pie',
-         radius: ['37%', '33%'],
+         radius: ["35%",'36'],
             center: ['50%', '50%'],
             z: 8,
             hoverAnimation: false,
@@ -223,7 +223,7 @@ var option = {
                         formatter: function(params) {
                             return params.value ;
                         },
-                        color: '#458efd',
+                        color: '#42A6DD ',
                         fontSize: 30,
                         fontWeight: "bold",
                         position: 'center',
@@ -238,7 +238,7 @@ var option = {
         /*外一层*/
         {
             type: "pie",
-            radius: ['39%', '35%'],
+            radius:  ['43%','36'],
             startAngle: 220,
             endAngle: -40,
             hoverAnimation: false,
@@ -262,7 +262,7 @@ var option = {
         //外二层圈
         {
             type: "pie",
-            radius: ['41%', '38%'],
+            radius: ["48%",'36%'],
             center: ["50%", "50%"],
             avoidLabelOverlap: false,
             z: 0,