From 48fac7a94ca89158e7271896bacae4466bf7a1ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Wed, 3 Aug 2022 12:10:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=E7=9B=91=E6=B5=8B)=EF=BC=9A=E7=A9=BA=E6=B0=94?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/envirManage/rightTop.vue  | 81 ++++++++++++-------
 1 file changed, 51 insertions(+), 30 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
index 162c1866..8f976a4a 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
+++ b/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>