diff --git a/src/assets/images/projectImg/numBgc.png b/src/assets/images/projectImg/numBgc.png
new file mode 100644
index 00000000..faa68f5c
Binary files /dev/null and b/src/assets/images/projectImg/numBgc.png differ
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>
 
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>
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>
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" },
             ],
           },
         ],
diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
index 162c1866..504e760e 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 = {
@@ -216,12 +211,41 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .operateBar{
+    margin-left: 20px;
+  }
   .operateBar{
       margin-top: 20px;
   }
 
   .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>
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