From 271b3b25112a17ebc7ed0fbf84334c92a0867737 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 11:08:45 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=AE=A1=E7=90=86):=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E9=A2=84=E8=AD=A6=E7=BB=9F=E8=AE=A1=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/envirManage/rightCenter.vue       | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightCenter.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightCenter.vue
index 9e27b979..0be12628 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightCenter.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightCenter.vue
@@ -29,15 +29,16 @@ export default {
       const myChart = echarts.init(this.$refs.myChart);
       const option = {
         title: {
-          subtext: "报警数量",
           textAlign: 'center',
           x: '29%',
-          y: '43%',
+          y: '38%',
+          text:'27',
           textStyle: {
             fontSize: 20,
             fontWeight: 'normal',
             color: '#fff',
           },
+          subtext: "报警数量",
           subtextStyle: {
             fontSize: 16,
             fontWeight: 'normal',
@@ -50,7 +51,7 @@ export default {
         legend: {
           type: 'scroll',
           orient: 'vertical',
-          right: 50,
+          right: 30,
           top: 'center',
           itemWidth: 10, // 设置宽度
           itemHeight: 10, // 设置高度
@@ -90,8 +91,8 @@ export default {
               show: false,
             },
             data: [
-              { value: 13, name: "扬尘噪声报警" },
-              { value: 14, name: "PM2.5超标报警" },
+              { value: 13, name: "扬尘噪声报警 : 13" },
+              { value: 14, name: "PM2.5超标报警 : 14" },
             ],
           },
         ],

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 2/6] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=9B=91=E6=B5=8B)=EF=BC=9A=E7=A9=BA?=
 =?UTF-8?q?=E6=B0=94=E5=88=86=E6=9E=90=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E6=8E=A5=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>

From 84344eb00b331380e33688b800d1283823e94d15 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 14:33:21 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=AE=A1=E7=90=86):=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/envirManage/centerTop.vue | 300 +++++++++++++++++-
 1 file changed, 296 insertions(+), 4 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/centerTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/centerTop.vue
index 5e872495..3849fe69 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/centerTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/centerTop.vue
@@ -1,12 +1,13 @@
 <template>
 <!-- 实时数据 -->
-<div class="container">
+<div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
+     <div ref="centerChart" class="centerChart"></div>
 </div>
 </template>
 
 <script>
+import echarts from 'echarts4';
 export default {
 
   props: {
@@ -17,16 +18,303 @@ export default {
   },
   data() {
     return {
-
+      plantCap: [
+        {
+            name: "湿度",
+            values: "--",
+            id:1,
+            unit:'%RH'
+        },
+        {
+            name: "PM2.5",
+            values: "--",
+            id:2,
+            unit:'μg/m3'
+        },
+        {
+            name: "温度",
+            values: "30",
+            id:3,
+            unit:'°C'
+        },
+        {
+            name: "TSP",
+            values: "79",
+            id:4,
+            unit:'μg/m3'
+        },
+        {
+            name: "风速",
+            values: "--",
+            id:5,
+            unit:'m/s'
+        },
+        {
+            name: "PM10",
+            values: "30",
+            id:6,
+            unit:'μg/m3'
+        },
+        {
+            name: "风向",
+            values: "东",
+            id:7,
+            unit:'风'
+        }, 
+        {
+            name: "气压",
+            values: "101",
+            id:8,
+            unit:'kPa'
+        },
+    ],
     };
   },
+  mounted(){
+    this.createCenterChart();
+  },
+  methods:{
+     //环境监测实时数据--图表
+    createCenterChart() {
+      let centerChart = echarts.init(this.$refs.centerChart);
+      console.log('this.$refs.centerChart')
+      console.log(this.$refs.centerChart.offsetHeight)
+      centerChart.clear();
+      let detailData = this.plantCap;
+      console.log('---detailData',detailData)
+      for (let i = 0; i < detailData.length; i++) {
+        if (detailData[i].id == 1) {
+          detailData[i].value = this.plantCap.humidity;
+        } else if (detailData[i].id == 2) {
+          detailData[i].value = this.plantCap.pm25;
+        } else if (detailData[i].id == 3) {
+          detailData[i].value = this.plantCap.temperature;
+        } else if (detailData[i].id == 4) {
+          detailData[i].value = this.plantCap.tsp;
+        } else if (detailData[i].id == 5) {
+          detailData[i].value = this.plantCap.windspeed;
+        } else if (detailData[i].id == 6) {
+          detailData[i].value = this.plantCap.pm10;
+        } else if (detailData[i].id == 7) {
+          detailData[i].value = this.plantCap.winddirectionName;
+        } else if (detailData[i].id == 8) {
+          detailData[i].value = this.plantCap.pressure?this.plantCap.pressure:'--';
+        }
+        detailData[i].values+=detailData[i].unit
+        // console.log('plantCap',detailData)
+      }
+      var plantCap = detailData;
+      
+      var datalist = [
+        {
+          offset: [50, 55],
+          symbolSize: 100,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#29c0fb",
+            },
+            {
+              offset: 1,
+              color: "#2dc5b9",
+            },
+          ]),
+        },
+        {
+          offset: [30, 85],
+          symbolSize: 70,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#35d17e",
+            },
+            {
+              offset: 1,
+              color: "#49ddb2",
+            },
+          ]),
+        },
+        {
+          offset: [15, 50],
+          symbolSize: 80,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#e5d273",
+            },
+            {
+              offset: 1,
+              color: "#e4a37f",
+            },
+          ]),
+        },
+        {
+          offset: [40, 20],
+          symbolSize: 70,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#277aec",
+            },
+            {
+              offset: 1,
+              color: "#57c5ec",
+            },
+          ]),
+        },
+        {
+          offset: [85, 58],
+          symbolSize: 65,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#e54948",
+            },
+            {
+              offset: 1,
+              color: "#f08456",
+            },
+          ]),
+        },
+        {
+          offset: [76, 20],
+          symbolSize: 70,
+          opacity: 0.7,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#11c46e",
+            },
+            {
+              offset: 1,
+              color: "#f08456",
+            },
+          ]),
+        },
+        {
+          offset: [68, 82],
+          symbolSize: 65,
+          opacity: 0.68,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#6367E0",
+            },
+            {
+              offset: 1,
+              color: "#B667F0",
+            },
+          ]),
+        },
+        {
+          offset: [100, 35],
+          symbolSize: 50,
+          opacity: 0.68,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#ea5d5f",
+            },
+            {
+              offset: 1,
+              color: "#B667F0",
+            },
+          ]),
+        },
+      ];
+      var datas = [];
+      for (var i = 0; i < plantCap.length; i++) {
+        var item = plantCap[i];
+        var itemToStyle = datalist[i];
+        datas.push({
+          name: item.values  + "\n" + item.name,
+          value: itemToStyle.offset,
+          symbolSize: itemToStyle.symbolSize,
+          label: {
+            normal: {
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 800,
+                lineHeight: 22,
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: itemToStyle.color,
+              opacity: itemToStyle.opacity,
+            },
+          },
+        });
+      }
+      let option1 = {
+        grid: {
+          show: false,
+          top: 10,
+          bottom: 10,
+        },
+        xAxis: [
+          {
+            gridIndex: 0,
+            type: "value",
+            show: false,
+            min: 0,
+            max: 100,
+            nameLocation: "middle",
+            nameGap: 5,
+          },
+        ],
+        yAxis: [
+          {
+            gridIndex: 0,
+            min: 0,
+            show: false,
+            max: 100,
+            nameLocation: "middle",
+            nameGap: 30,
+          },
+        ],
+        series: [
+          {
+            type: "effectScatter",
+            // symbol: 'circle',
+            // symbolSize: 120,
 
+            hoverAnimation: true,
+            label: {
+              normal: {
+                show: true,
+                formatter: "{b}",
+                color: "#fff",
+                textStyle: {
+                  fontSize: "20",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#00acea",
+              },
+            },
+            data: datas,
+          },
+        ],
+      };
+      centerChart.setOption(option1);
+      window.onresize = centerChart.resize;
+    },
+  }
 
 }
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +325,10 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .centerChart{
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>
 

From 2874210f88b716908e9c402730732f735a835029 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 14:38:54 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=AE=A1=E7=90=86):=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E7=9B=91=E6=B5=8B=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectHuScreen/envirManage/leftTop.vue   | 251 +-----------------
 1 file changed, 6 insertions(+), 245 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue
index ffffac93..f863b797 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftTop.vue
@@ -2,7 +2,9 @@
   <!-- 环境监测 -->
   <div class="contentBox">
     <div class="titleTxt">{{ title }}</div>
-    <airQulityChart ></airQulityChart>  
+      <div class="air" >
+        <airQulityChart :show="true"></airQulityChart> 
+      </div>
     <!-- :show="true" -->
   </div>
 </template>
@@ -20,227 +22,8 @@ export default {
   },
   data() {
     return {
-      lineColor: "#1FCCC6",
-      todayAir: {
-        analysisData: "0",
-        analysisType: "优"
-      }
-    };
-  },
-  mounted() {
-    this.createdEcharts3();
-  },
-  methods: {
-    createdEcharts3() {
-      let that = this;
-      //项目进度
-      let monitor = echarts.init(this.$refs.monitor);
-      this.chart = monitor;
-      monitor.clear();
-      const option = {
-        title: {
-          show: true,
-          text: this.todayAir.analysisType,
-          x: "49%",
-          y: "55%",
-          z: 8,
-          textAlign: "center",
-          textStyle: {
-            color: " rgb(147,169,205) ",
-            fontSize: 12
-          }
-        },
-        series: [
-          {
-            type: "gauge",
-            radius: "62%",
-            splitNumber: 10,
-            axisLine: {
-              lineStyle: {
-                color: [
-                  [this.todayAir.analysisData / 100, this.lineColor],
-                  [1, "#111F42"]
-                ],
-                width: 6
-              }
-            },
-            axisLabel: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            },
-
-            pointer: {
-              show: false
-            }
-          },
-          {
-            type: "gauge",
-            //  center: ['20%', '50%'],
-            radius: "80%",
-            min: 0, //最小刻度
-            max: 100, //最大刻度
-            splitNumber: 10, //刻度数量
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 2,
-                color: [[1, "rgba(0,0,0,0)"]]
-              }
-            },
-            //仪表盘轴线
-            axisLabel: {
-              show: true,
-              color: "#4d5bd1"
-            }, //刻度标签。
-            axisTick: {
-              show: true,
-              splitNumber: 7,
-              lineStyle: {
-                color: "#468EFD",
-                width: 2
-              },
-              length: -4
-            }, //刻度样式
-            splitLine: {
-              show: true,
-              length: -10,
-              lineStyle: {
-                color: "#468EFD"
-              }
-            }, //分隔线样式
-            detail: {
-              show: false
-            },
-            pointer: {
-              show: false
-            }
-          },
-          /*内部*/
-          {
-            type: "pie",
-            radius: ["0", "35%"],
-            center: ["50%", "50%"],
-            z: 8,
-            hoverAnimation: false,
-            data: [
-              {
-                value: this.todayAir.analysisData,
-                itemStyle: {
-                  normal: {
-                    color: "#091F4B"
-                  }
-                },
-                label: {
-                  normal: {
-                    rich: {
-                      a: {
-                        color: this.lineColor,
-                        align: "center",
-                        fontSize: 31,
-                        fontWeight: "bold"
-                      }
-                    },
-                    formatter: function(params) {
-                      return "{a|" + params.value + "}";
-                    },
-                    position: "center",
-                    show: true
-                  }
-                },
-                labelLine: {
-                  show: false
-                }
-              }
-            ]
-          },
-          /*外一层*/
-          {
-            type: "pie",
-            radius: "40%",
-            startAngle: 220,
-            endAngle: -40,
-            hoverAnimation: false,
-            center: ["50%", "50%"],
-            avoidLabelOverlap: false,
-            label: {
-              show: false
-            },
-            labelLine: {
-              show: false
-            },
-            data: [
-              {
-                value: 1
-              }
-            ],
-            itemStyle: {
-              normal: {
-                color: "rgba(69, 161, 255,0.8)"
-              }
-            }
-          },
-          //外二层圈
-          {
-            type: "pie",
-            radius: "45%",
-            center: ["50%", "50%"],
-            avoidLabelOverlap: false,
-            z: 0,
-            hoverAnimation: false,
-            label: {
-              show: false
-            },
-            labelLine: {
-              show: false
-            },
-            data: [
-              {
-                value: 1
-              }
-            ],
-            itemStyle: {
-              normal: {
-                color: "rgba(69, 161, 255,0.5)"
-              }
-            }
-          },
-          //最外层圈
-          {
-            type: "pie",
-            radius: "50%",
-            center: ["50%", "50%"],
-            avoidLabelOverlap: false,
-            z: 0,
-            hoverAnimation: false,
-            label: {
-              show: false
-            },
-            labelLine: {
-              show: false
-            },
-            data: [
-              {
-                value: 1
-              }
-            ],
-            itemStyle: {
-              normal: {
-                color: "rgba(69, 161, 255,0.3)"
-              }
-            }
-          }
-        ]
-      };
-      monitor.setOption(this.option);
     }
-  }
+  },
 };
 </script>
 
@@ -256,31 +39,9 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
-  .monitor {
+  .air{
     width: 100%;
-    height: 100%;
-  }
-}
-.colour {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  font-size: 10px;
-  left: 2%;
-  .colour_content {
-    width: 16%;
-    text-align: center;
-    float: left;
-    .bg {
-      width: 100%;
-      height: 5px;
-    }
-    .size {
-      width: 100%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+    height: 85%;
   }
 }
 </style>

From 41e92e7735e5987fa44af52ac3a76d8b2472ea4c 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 15:21:22 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=AE=A1=E7=90=86):=E8=B6=8B=E5=8A=BF?=
 =?UTF-8?q?=E5=9B=BE=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../envirManage/leftBottom.vue                | 85 ++++++++++++++++---
 1 file changed, 71 insertions(+), 14 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftBottom.vue
index 7f14d3e4..b9e1bc5b 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftBottom.vue
@@ -2,7 +2,7 @@
   <!-- 趋势图 -->
   <div class="contentBox">
     <div class="titleTxt">{{ title }}</div>
-    <!-- <div class="operateBar">
+    <div class="operateBar">
             <span
               class="greenBtn"
               @click="switchingData(1)"
@@ -59,13 +59,16 @@
               />
               {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
             </span>
-          </div> -->
+          </div>
     <div class="myChart" ref="myChart" />
   </div>
 </template>
 
 <script>
 import echarts from "echarts4";
+import {
+  getEnvironmentWarningInfo
+} from "@/assets/js/api/environmentManage";
 export default {
   props: {
     title: {
@@ -75,26 +78,77 @@ export default {
   },
   data() {
     return {
-      data : [90, 85, 100, 96, 100, 150, 190, 125 ] 
+      data : [90, 85, 100, 96, 100, 150, 190, 125 ],
+      checked:1,
+      dustData_24:[],
     };
   },
   mounted() {
     this.initMyChart();
   },
   methods: {
-    changeData(type){
-      if(type == 1){
-        this.data =  [110, 65, 210, 96, 100, 160, 130, 220]
-      }else if(type == 2){
-       this.data =  [90, 85, 100, 96, 100, 150, 190, 125]
-      }else if(type == 3 ){
-        this.data =  [100, 160, 130, 220, 90, 85, 100, 96,]
-      }else{
-        this.data =  [130, 220, 90, 85, 100, 65, 210, 96]
-      }
+    getEnvironmentWarningInfoApi(){
+      // console.log('执行');
+      getEnvironmentWarningInfo({
+        deviceId: this.currentDevDetail.deviceId,
+        projectSn: this.projectSn,
+        warningType: 1
+      }).then(res => {
+        console.log(res.result);
+        this.pm10Warning = res.result.pm10Warning
+        this.pm25Warning = res.result.pm25Warning
+        this.noiseWarning = res.result.noiseWarning
+        this.windSpeedWarning = res.result.windSpeed
+        this.createdEcharts2();
+      })
+    },
+    //切换  24小时数据
+    switchingData(value) {
+      this.checked = value;
+      this.initMyChart();
     },
     initMyChart() {
       const myChart = echarts.init(this.$refs.myChart);
+      // this.dustData_24.forEach((element) => {
+      //   // 
+      //   xdata.push(element.uploadDate.split(" ")[1]);
+      //   switch (this.checked) {
+      //     case 1:
+      //       ydata.push(element.pm25);
+      //       Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')'
+      //       AlertNumber = this.pm25Warning
+      //       break;
+      //     case 2:
+      //       ydata.push(element.pm10);
+      //       Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')'
+      //       AlertNumber = this.pm10Warning
+      //       break;
+      //     case 3:
+      //       ydata.push(element.windspeed);
+      //       Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')'
+      //       AlertNumber = this.windSpeedWarning
+      //       break;
+      //     case 4:
+      //       ydata.push(element.noise);
+      //       Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')'
+      //       AlertNumber = this.noiseWarning
+      //       break;
+      //   }
+      // });
+      switch (this.checked) {
+         case 1:
+         this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
+         break;
+         case 2:
+         this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
+         break;
+         case 3:
+         this.data = [100, 96, 100, 150,90, 85,  190, 125 ]
+         break;
+         case 4:
+         this.data = [90,  96, 100, 85, 100,150, 190, 125 ]
+         break;
+      }
       const option = {
         xAxis: {
           type: "category",
@@ -167,7 +221,10 @@ export default {
   }
   .myChart {
     width: 100%;
-    height: 100%;
+    height: 90%;
+  }
+  .operateBar{
+    margin: 20px 0px 0px 20px;
   }
 }
 </style>

From 2cdc3bc5120c4cbc06a1bbcef8ae6b9329726e98 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 17:08:14 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92):=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=80=BB=E8=A7=88=20=E6=96=BD=E5=B7=A5=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/projectImg/numBgc.png       | Bin 0 -> 2858 bytes
 .../projectHuScreen/envirManage/rightTop.vue  |   3 +
 .../projectHuScreen/jChart/pie/progress.vue   | 106 ++++++++++++++++++
 .../planProgress/centerBottom.vue             |   9 +-
 .../projectHuScreen/planProgress/index.vue    |   2 +-
 .../projectHuScreen/planProgress/leftTop.vue  |  73 +++++++++++-
 .../projectHuli/constructProgress.vue         |  36 ++----
 7 files changed, 193 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/images/projectImg/numBgc.png
 create mode 100644 src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue

diff --git a/src/assets/images/projectImg/numBgc.png b/src/assets/images/projectImg/numBgc.png
new file mode 100644
index 0000000000000000000000000000000000000000..faa68f5c34d07b11b2f52080fb1eb4285881fefa
GIT binary patch
literal 2858
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
W4P{L51zVk5TfpoZ$_Q`h9``@GuVaw_

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
index 8f976a4a..504e760e 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
@@ -211,6 +211,9 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .operateBar{
+    margin-left: 20px;
+  }
   .operateBar{
       margin-top: 20px;
   }
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue
new file mode 100644
index 00000000..8c620b1b
--- /dev/null
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue
@@ -0,0 +1,106 @@
+<template>
+<!-- 施工进度 -->
+  <div class="construct">
+    <div class="flex">
+      <div class="box">
+        <p class="title">基础工程</p>
+        <div class="imgStyle">
+          <img src="@/assets/images/projectImg/proGreen.png" />
+        </div>
+        <p class="timeText">开始时间：2022-01-01</p>
+        <p class="timeText">结束时间：2022-02-01</p>
+      </div>
+      <div class="box">
+         <p class="title">主体结构施工</p>
+         <div class="imgStyle">
+          <img src="@/assets/images/projectImg/proGreen.png" />
+        </div>
+        <p class="timeText">开始时间：2022-02-15</p>
+        <p class="timeText">结束时间：2022-04-23</p>
+      </div>
+     <div class="box">
+      <p class="title">屋面工程</p>
+      <div class="imgStyle">
+          <img src="@/assets/images/projectImg/proGreen.png" />
+        </div>
+        <p class="timeText">开始时间：2022-03-01</p>
+        <p class="timeText">结束时间：2022-05-20</p>
+     </div>
+     <div class="box">
+        <p class="title">机械设备安拆工程</p>
+        <div class="imgStyle">
+          <img src="@/assets/images/projectImg/proYellow.png" />
+        </div>
+        <p class="timeText">开始时间：2022-05-24</p>
+        <p class="timeText">结束时间：2022-06-30</p>
+      </div>
+      <div class="box">
+        <p>室内装饰装修工程</p>
+        <div class="imgStyle">
+          <img src="@/assets/images/projectImg/proGray.png" />
+        </div>
+        <p class="timeText">开始时间：2022-05-24</p>
+        <p class="timeText">结束时间：2022-06-30</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    };
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.construct {
+  width: 100%;
+  height: 100%;
+  
+  .titleTxt {
+    font-size: 18px;
+    color: #6ee4f0;
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+  .flex{
+    display: flex;
+    margin-top: 3%;
+    justify-content: center;
+    align-items: center;
+    .box{
+      text-align: center;
+      margin-right: 5.5%;
+    }
+    .title{
+      font-size: 14px;
+      position: relative;
+    }
+    .title::before{
+      content:'- - - - - - ';
+      position: absolute;
+      left: 120px;
+      width: 80px;
+      color: #465161;
+    }
+    .imgStyle{
+      margin: 20px;
+      width: 100px;
+      height: 70px;
+      // width: 20%;
+      // height:20%;
+      img{
+        margin-top: 20px;
+      }
+    }
+    .timeText{
+      font-size: 12px;
+      color: #465161;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
index 5e134137..040961fa 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
@@ -1,14 +1,15 @@
 <template>
 <!-- 施工进度 -->
-<div class="container">
+<div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
+    <conProgress></conProgress>
 </div>
 </template>
 
 <script>
+import conProgress from '../jChart/pie/progress.vue'
 export default {
-
+  components:{conProgress},
   props: {
     title: {
       type: String,
@@ -26,7 +27,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue
index 3a730752..970bf171 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue
@@ -17,7 +17,7 @@
            <centerTop title="甘特图" />
       </div>
       <div class="centerBottom">
-           <centerTop title="施工进度" />
+           <centerBottom title="施工进度" />
       </div>
     </div>
   </div>
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue
index a4c6efb4..ba43f57c 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue
@@ -1,13 +1,51 @@
 <template>
 <!-- 进度总览 -->
-<div class="container">
+<div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
+    <div class="content">
+      <div class="num">
+        679
+        <p>完成任务数</p>
+      </div>
+      <div class="num">
+        67%
+        <p>完成率</p>
+      </div>
+      <div class="num">
+        45
+        <p>延期天数</p>
+      </div>
+    </div>
+    <div class="charts">
+      <div class="chart">
+        <JRingChart title="89%" subTitle="总进度" :color="['#547ced','#162a51']" 
+        :data="[
+            { value: 7, name: '' },
+            { value: 3, name: '' }
+          ]"/>
+      </div>
+      <div class="chart">
+        <JRingChart title="89%" subTitle="总进度" :color="['#5be1f5','#193f54']" 
+        :data="[
+            { value: 3, name: '' },
+            { value: 5, name: '' }
+          ]"/>
+      </div>
+      <div class="chart">
+        <JRingChart title="89%" subTitle="总进度" :color="['#fe6b7e','#39273d']" 
+        :data="[
+            { value: 4, name: '' },
+            { value: 6, name: '' }
+          ]"/>
+      </div>
+    </div>
 </div>
 </template>
 
 <script>
+import JRingChart from '../jChart/pie/JRingChart.vue'
 export default {
+  components: { JRingChart },
 
   props: {
     title: {
@@ -26,7 +64,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +75,35 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .content{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top:20px;
+    margin-left: 30px;
+  }
+  .num{
+    width: 88px;
+    line-height: 38px;
+    height: 38px;
+    text-align: center;
+    margin-right: 35px;
+    color: #47b1c4;
+    background-image: url(~@/assets/images/projectImg/numBgc.png);
+    p{
+      color: #d3d5d9;
+      font-size: 14px;
+    }
+  }
+  .charts {
+    padding: 10px 30px 0;
+    display: flex;
+    justify-content: space-around;
+  .chart {
+      width: 200px;
+      height: 200px;
+    }
+  }
 }
 </style>
 
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
index 66e8f88a..83610f0e 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
@@ -2,7 +2,8 @@
 <!-- 施工进度 -->
   <div class="constructProgress">
     <div class="titleTxt">{{ title }}</div>
-    <div class="flex">
+    <conProgress></conProgress>
+    <!-- <div class="flex">
       <div class="box">
         <p class="title">基础工程</p>
         <div class="imgStyle">
@@ -12,7 +13,7 @@
         <p class="timeText">结束时间：2022-02-01</p>
       </div>
       <div class="box">
-         <p>主体结构施工</p>
+         <p class="title">主体结构施工</p>
          <div class="imgStyle">
           <img src="@/assets/images/projectImg/proGreen.png" />
         </div>
@@ -20,7 +21,7 @@
         <p class="timeText">结束时间：2022-04-23</p>
       </div>
      <div class="box">
-      <p>屋面工程</p>
+      <p class="title">屋面工程</p>
       <div class="imgStyle">
           <img src="@/assets/images/projectImg/proGreen.png" />
         </div>
@@ -28,7 +29,7 @@
         <p class="timeText">结束时间：2022-05-20</p>
      </div>
      <div class="box">
-        <p>机械设备安拆工程</p>
+        <p class="title">机械设备安拆工程</p>
         <div class="imgStyle">
           <img src="@/assets/images/projectImg/proYellow.png" />
         </div>
@@ -43,12 +44,14 @@
         <p class="timeText">开始时间：2022-05-24</p>
         <p class="timeText">结束时间：2022-06-30</p>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+import conProgress from '../jChart/pie/progress.vue'
 export default {
+  components:{conProgress},
   data() {
     return {
 
@@ -75,28 +78,5 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
-  .flex{
-    display: flex;
-    margin-top: 50px;
-    .box{
-      text-align: center;
-      margin-left: 40px;
-    }
-    .title{
-      font-size: 14px;
-    }
-    .imgStyle{
-      margin: 20px;
-      width: 100px;
-      height: 70px;
-      img{
-        margin-top: 20px;
-      }
-    }
-    .timeText{
-      font-size: 12px;
-      color: #465161;
-    }
-  }
 }
 </style>
\ No newline at end of file