湖里大屏(环境监测)：空气分析样式更改接口对接

src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue

@@ -2,14 +2,6 @@
   <!-- 空气分析 -->
   <div class="contentBox">
     <div class="titleTxt">{{ title }}</div>
-    <!-- <div>
-      <el-progress :percentage="50" :color="customColor1"> 优</el-progress>
-      <el-progress :percentage="55" :color="customColor2"> 良</el-progress>
-      <el-progress :percentage="35" :color="customColor3">轻度污染</el-progress>
-      <el-progress :percentage="35" :color="customColor4">中度污染</el-progress>
-      <el-progress :percentage="30" :color="customColor5">重度污染</el-progress>
-      <el-progress :percentage="5" :color="customColor6">严重污染</el-progress>
-    </div> -->
     <div class="blockContent">
           <div class="operateBar">
             <span
@@ -52,6 +44,7 @@
               <ul>
                 <li>
                   <el-progress
+                  class="progressleft"
                     :show-text="false"
                     :stroke-width="4"
                     :percentage="
@@ -59,16 +52,18 @@
                     "
                     :color="'#1FCCC6'"
                   ></el-progress>
-                  <span class="type type1">{{
+                    <div class="point" style="background-color: #1FCCC6;"></div>
+                  <span class="types">{{
                     $t("message.environmentalOverview.typeList")[0]
                   }}</span>
-                  <span
+                  <span class="day"
                     >{{ airAnalysis.length > 0 ? airAnalysis[0].num : 0
                     }}{{ $t("message.environmentalOverview.Days") }}</span
                   >
                 </li>
                 <li>
                   <el-progress
+                  class="progressleft"
                     :show-text="false"
                     :stroke-width="4"
                     :percentage="
@@ -76,10 +71,11 @@
                     "
                     :color="'#FFBB38'"
                   ></el-progress>
-                  <span class="type type2">{{
+                  <div class="point" style="background-color: #FFBB38;"></div>
+                  <span class="types">{{
                     $t("message.environmentalOverview.typeList")[1]
                   }}</span>
-                  <span
+                  <span class="day"
                     >{{ airAnalysis.length > 0 ? airAnalysis[1].num : 0
                     }}{{ $t("message.environmentalOverview.Days") }}</span
                   >
@@ -87,16 +83,18 @@
                 <li>
                   <el-progress
                     :show-text="false"
+                    class="progressleft"
                     :stroke-width="4"
                     :percentage="
                       airAnalysis.length > 0 ? airAnalysis[2].num : 0
                     "
                     :color="'#FE7A18'"
                   ></el-progress>
-                  <span class="type type3">{{
+                  <div class="point" style="background-color: #FE7A18;"></div>
+                  <span class="types">{{
                     $t("message.environmentalOverview.typeList")[2]
                   }}</span>
-                  <span
+                  <span class="day"
                     >{{ airAnalysis.length > 0 ? airAnalysis[2].num : 0
                     }}{{ $t("message.environmentalOverview.Days") }}</span
                   >
@@ -104,22 +102,25 @@
                 <li>
                   <el-progress
                     :show-text="false"
+                    class="progressleft"
                     :stroke-width="4"
                     :percentage="
                       airAnalysis.length > 0 ? airAnalysis[3].num : 0
                     "
                     :color="'#7718FE'"
                   ></el-progress>
-                  <span class="type type4">{{
+                  <div class="point" style="background-color: #7718FE;"></div>
+                  <span class="types">{{
                     $t("message.environmentalOverview.typeList")[3]
                   }}</span>
-                  <span
+                  <span class="day"
                     >{{ airAnalysis.length > 0 ? airAnalysis[3].num : 0
                     }}{{ $t("message.environmentalOverview.Days") }}</span
                   >
                 </li>
                 <li>
                   <el-progress
+                  class="progressleft"
                     :show-text="false"
                     :stroke-width="4"
                     :percentage="
@@ -127,16 +128,18 @@
                     "
                     :color="'#890EA1'"
                   ></el-progress>
-                  <span class="type type5">{{
+                  <div class="point" style="background-color: #890EA1;"></div>
+                  <span class="types">{{
                     $t("message.environmentalOverview.typeList")[4]
                   }}</span>
-                  <span
+                  <span class="day"
                     >{{ airAnalysis.length > 0 ? airAnalysis[4].num : 0
                     }}{{ $t("message.environmentalOverview.Days") }}</span
                   >
                 </li>
                 <li>
                   <el-progress
+                  class="progressleft"
                     :show-text="false"
                     :stroke-width="4"
                     :percentage="
@@ -144,10 +147,11 @@
                     "
                     :color="'#970C0C'"
                   ></el-progress>
-                  <span class="type type6">{{
+                  <div class="point" style="background-color: #970C0C;"></div>
+                  <span class="types">{{
                     $t("message.environmentalOverview.typeList")[5]
                   }}</span>
-                  <span
+                  <span class="day"
                     >{{ airAnalysis.length > 0 ? airAnalysis[5].num : 0
                     }}{{ $t("message.environmentalOverview.Days") }}</span
                   >
@@ -172,21 +176,12 @@ export default {
     return {
       airType: 1,
       airAnalysis: [],
-      // customColor1:"#36cd81",
-      // customColor2:'#e2cd72',
-      // customColor3:'#cf8755',
-      // customColor4:'#6d70fb',
-      // customColor5:'#e5524a',
-      // customColor6:'#f84848'
     };
   },
   mounted(){
     this.getAirQualityStatistics();
   },
   methods: {
-    // format(percentage) {
-    //   return percentage === 100 ? "满" : `${percentage}%`;
-    // }
     //空气质量分析--统计
     getAirQualityStatistics() {
       let data = {
@@ -221,7 +216,33 @@ export default {
   }
 
   .progressBox{
-    margin-top: 20px;
+    margin-top: 10px;
+    margin-left: 20px;
+    // width: 60%;
+    font-size: 12px;
+    .progressleft{
+      display: inline-block;
+      height: 10px;
+      width:60%;
+    }
+    li{
+      margin: 10px;
+    }
+    .point{
+      display: inline-block;
+      width: 5px;
+      height: 5px;
+      margin-left: 10px;
+      border-radius: 50%;
+      background-color: #fff;
+    }
+    .types{
+      margin-left: 15px;
+      width: 120px;
+    }
+    .day{
+      margin-left: 30px;
+    }
   }
 }
 </style>