diff --git a/src/views/projectAdmin/dataBoard/environment.vue b/src/views/projectAdmin/dataBoard/environment.vue
index ad4629ac..63593696 100644
--- a/src/views/projectAdmin/dataBoard/environment.vue
+++ b/src/views/projectAdmin/dataBoard/environment.vue
@@ -7,7 +7,7 @@
         {{$t('message.dataBoard.environmentMonitor')}}
         </div>
         <div class="blockContent">
-          <airQulityChart :show='true' :size='small'></airQulityChart>
+          <airQulityChart :show='true'></airQulityChart>
         </div>
       </div>
       <div class="blockBox">
@@ -488,31 +488,7 @@
           {{$t('message.dataBoard.todayAlarmStatistics')}}
         </div>
         <div class="blockContent">
-          <div class="safeChart" ref="safeChart"></div>
-                    <div class="descBox fullHeight">
-                        <div>
-                            <div class="descItem descItem1">
-                                <p class="text"><i class="dot purple"></i>
-                                <!-- 噪声报警 -->
-                                {{$t('message.dataBoard.noiseAlarm')}}
-                                </p>
-                                <p class="num">{{alarmData.noiseNum}}</p>
-                            </div>
-                          <div class="descItem descItem1">
-                            <p class="text"><i style="background: #ffbb38;" class="dot"></i>{{'TSP'+$t('message.dataBoard.alarm')}}</p>
-                            <p class="num">{{alarmData.tspNum}}</p>
-                          </div>
-                            <div class="descItem descItem1">
-                                <p class="text"><i style="background: #fe6c7f;" class="dot"></i>{{'PM2.5'+$t('message.dataBoard.excessiveAlarm')}}</p>
-                                <p class="num">{{alarmData.pm25Num}}</p>
-                            </div>
-                            <div class="descItem">
-                                <p class="text"><i class="dot green"></i>{{'PM10'+$t('message.dataBoard.excessiveAlarm')}}</p>
-                                <p class="num">{{alarmData.pm10Num}}</p>
-                            </div>
-                        </div>
-
-                    </div>
+          <todayAlarm></todayAlarm>
         </div>
       </div>
       <div class="blockBox">
@@ -563,7 +539,8 @@
   </div>
 </template>
 <script>
-import echarts from 'echarts4';;
+import echarts from 'echarts4';
+import todayAlarm from "./greenConstruct/todayAlarm"
 import airQulityChart from "@/components/chart/airQulityChart";
 import {
   environmentDevList,
@@ -576,9 +553,10 @@ import {
   sprayOperateDataApi,
   getEnvironmentWarningInfo
 } from "@/assets/js/api/environmentManage";
-import {selectEnvironmentAlarmCountTotalApi} from "@/assets/js/api/dataBoard"
+import {selectEnvironmentAlarmCountTotalApi} from "@/assets/js/api/dataBoard";
+
 export default {
-  components: { airQulityChart },
+  components: { airQulityChart,todayAlarm },
   data() {
     return {
       devList: [],
diff --git a/src/views/projectAdmin/dataBoard/greenConstruct/todayAlarm.vue b/src/views/projectAdmin/dataBoard/greenConstruct/todayAlarm.vue
new file mode 100644
index 00000000..4c35d9b7
--- /dev/null
+++ b/src/views/projectAdmin/dataBoard/greenConstruct/todayAlarm.vue
@@ -0,0 +1,64 @@
+<!-- 今日报警统计 -->
+<template>
+  <div class="todayAlarm">
+    <div class="alarmChart" ref="alarmChart" />
+  </div>
+</template>
+
+<script>
+import { createPieChart } from '../homePage/index'
+import {selectEnvironmentAlarmCountTotalApi} from "@/assets/js/api/dataBoard"
+export default {
+  data() {
+    return {
+      alarmData:{
+        humidityNum: 0,
+        noiseNum: 0,
+        pm10Num: 2,
+        pm25Num: 2,
+        temperatureNum: 0,
+        totalAlarm: 4,
+        tspNum: 0,
+        windspeedNum: 0
+      },
+    };
+  },
+  mounted() {
+    this.selectEnvironmentAlarmCountTotal();
+    this.createPieChart()
+  },
+  methods: {
+    selectEnvironmentAlarmCountTotal(){
+      selectEnvironmentAlarmCountTotalApi({
+        sn: this.$store.state.projectSn,
+        selectType: 1
+      }).then((res) => {
+        this.alarmData=res.result
+        console.log(res.result);
+        createPieChart(
+        [
+            { value: this.alarmData.noiseNum, name: `噪声报警 : ${this.alarmData.noiseNum}` },
+            { value: this.alarmData.pm25Num, name: `PM2.5超标报警 : ${this.alarmData.pm25Num}` },
+            { value: this.alarmData.pm10Num, name: `PM10超标报警 : ${this.alarmData.pm10Num}` },
+            { value: this.alarmData.tspNum, name: `TSP报警 : ${this.alarmData.tspNum}` },
+        ],
+        this.$refs.alarmChart,
+        ["rgba(120, 111, 240, 1)","#fe6c7f","rgba(92, 226, 246, 1)","#ffbb38"],
+        '报警总数'
+        );
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.todayAlarm{
+    width: 375px;
+    height: 180px;
+    .alarmChart{
+    width: 370px;
+    height: 150px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/homePage/environmentWatch.vue b/src/views/projectAdmin/dataBoard/homePage/environmentWatch.vue
index a0ac718f..21cfe96e 100644
--- a/src/views/projectAdmin/dataBoard/homePage/environmentWatch.vue
+++ b/src/views/projectAdmin/dataBoard/homePage/environmentWatch.vue
@@ -1,15 +1,595 @@
 <template>
-  <div class="environmentWatch">
-environmentWatch
+  <div style="width: 100%; height: 100%; position: relative">
+    <div ref="monitor" style="width: 100%; height: 100%"></div>
+    <div class="colour flex5" v-show = this.$props.show>
+
+      <div class="colour_content">
+        <div
+          class="bg"
+          style="
+            background: #1fccc6;
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+          "
+        ></div>
+        <div class="size">{{ $t("message.projectSummary.actor") }}</div>
+      </div>
+      <div class="colour_content">
+        <div class="bg" style="background: #FFBB38"></div>
+        <div class="size">{{ $t("message.projectSummary.fine") }}</div>
+      </div>
+      <div class="colour_content">
+        <div class="bg" style="background: #fe7a18"></div>
+        <div class="size">
+          {{ $t("message.projectSummary.mildContamination") }}
+        </div>
+      </div>
+      <div class="colour_content">
+        <div class="bg" style="background: #7718fe"></div>
+        <div class="size">
+          {{ $t("message.projectSummary.middleLevelPollution") }}
+        </div>
+      </div>
+      <div class="colour_content">
+        <div class="bg" style="background: #890ea1"></div>
+        <div class="size">
+          {{ $t("message.projectSummary.actheavyPollutionor") }}
+        </div>
+      </div>
+      <div class="colour_content">
+        <div
+          class="bg"
+          style="
+            background: #970c0c;
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+          "
+        ></div>
+        <div class="size">
+          {{ $t("message.projectSummary.severeContamination") }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-
 <script>
+import echarts from 'echarts4';
+import {
+  getCurrentDayAirQualityApi
+} from "@/assets/js/api/environmentManage";
 export default {
+  props:["show"], // 控制空气质量条是否显示
+  data() {
+    return {
+      option: null,
+      chart: Object,
+      lineColor: "#1FCCC6",
+      todayAir:{
+                analysisData:'0',
+                analysisType:'优'
+            }
+    };
+  },
+  mounted() {
+    this.getAirQualityToday()
+  },
+  methods: {
+    //空气质量分析--当天
+    getAirQualityToday() {
+      let data = {
+        projectSn: this.$store.state.projectSn,
+      };
+      getCurrentDayAirQualityApi(data).then((res) => {
+        console.log(res)
+        if (res.code == 200) {
+          if(res.result){
+            this.todayAir = res.result;
+            this.getColor();
+            this.createdEcharts3();
+          }
+        }
+      });
+    },
+    getColor() {
+      switch (this.todayAir.analysisType) {
+        case "优":
+          this.lineColor = "#6ce9f0";
+          break;
+        case "良":
+          this.lineColor = "#468EFD";
+          break;
+        case "轻度污染":
+          this.lineColor = "#FE7A18";
+          break;
+        case "中度污染":
+          this.lineColor = "#7718FE";
+          break;
+        case "重度污染":
+          this.lineColor = "#890EA1";
+          break;
+        case "严重污染":
+          this.lineColor = "#970C0C";
+          break;
+      }
+    },
+    createdEcharts3() {
+      let that = this;
+      //项目进度
+      let monitor = echarts.init(this.$refs.monitor);
+      this.chart = monitor;
+      monitor.clear();
 
-}
+      var text;
+      if(this.$props.show) {
+        this.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)",
+                },
+              },
+            },
+          ],
+        };
+      }else { // 项目级看板配置
+        this.option = {
+          title: {
+            show: true,
+            text: this.todayAir.analysisType,
+            x: "49%",
+            y: "54%",
+            z: 8,
+            textAlign: "center",
+            textStyle: {
+              color: this.lineColor,
+              fontSize: 12,
+            },
+          },
+          series: [
+            {
+              type: "gauge",
+              radius: "43%",
+              splitNumber: 10,
+              data: [
+                {
+                  value: 1,
+                },
+              ],
+              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: "55%",
+              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: "rgba(77, 91, 209,0.5)",
+                textStyle: {
+                  fontSize:12,
+                }
+                // rgba(77, 91, 209, 0.5)
+                // distance: 14,
+                // formatter: function (v) {
+                //   switch (v + "") {
+                //     case "0":
+                //       return "0";
+                //     case "50":
+                //       return "50";
+                //     case "100":
+                //       return "100";
+                //     case "150":
+                //       return "150";
+                //     case "200":
+                //       return "200";
+                //     case "250":
+                //       return "250";
+                //     case "300":
+                //       return "300";
+                //     case "350":
+                //       return "350";
+                //     case "400":
+                //       return "400";
+                //     case "450":
+                //       return "450";
+                //     case "500":
+                //       return "500";
+                //   }
+                // },
+              }, //刻度标签。
+              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", "20%"],
+              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: 28,
+                          fontWeight: "bold",
+                        },
+                      },
+                      formatter: function (params) {
+                        return "{a|" + params.value + "}";
+                      },
+                      position: "center",
+                      show: true,
+                    },
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                },
+              ],
+            },
+            /*外一层*/
+            {
+              type: "pie",
+              radius: "25%",
+              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: "30%",
+              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: "35%",
+              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>
-
 <style lang="less" scoped>
+.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;
+    }
+  }
+}
+</style>
 
-</style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/homePage/personOverview.vue b/src/views/projectAdmin/dataBoard/homePage/personOverview.vue
index 100bd503..e522d949 100644
--- a/src/views/projectAdmin/dataBoard/homePage/personOverview.vue
+++ b/src/views/projectAdmin/dataBoard/homePage/personOverview.vue
@@ -113,7 +113,8 @@ export default {
     }
     .manager {
       .manager-title {
-        margin-bottom: 15px;
+        margin-top: 6px;
+        margin-bottom: 8px;
         display: flex;
         align-items: center;
         &::before {
@@ -127,10 +128,12 @@ export default {
       }
       .manager-persons {
         display: flex;
+        margin-left: 20px;
         .person {
           position: relative;
           width: 86px;
           height: 86px;
+          margin-right: 25px;
           background: url(~@/assets/images/dataBoard/fc857081d1aded7077e783a698bd1d6.png);
           &:nth-child(2) {
             background: url(~@/assets/images/dataBoard/9f4e0bd5a0baebf3e96d512b208527b.png);
diff --git a/src/views/projectAdmin/dataBoard/homePage/qualityManage.vue b/src/views/projectAdmin/dataBoard/homePage/qualityManage.vue
index e2082d55..6b979d11 100644
--- a/src/views/projectAdmin/dataBoard/homePage/qualityManage.vue
+++ b/src/views/projectAdmin/dataBoard/homePage/qualityManage.vue
@@ -44,65 +44,6 @@ export default {
         }
       });
     },
-    createPieChart(data,color, title) {
-    let that = this;
-    let myChart = echarts.init(this.$refs.safeChart);
-    var option = {
-      color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
-      title: {
-        show: true,
-        text: data[0].value + data[1].value,
-        x: "23%",
-        y: "32%",
-        z: 5,
-        textAlign: "center",
-        textStyle: {
-          color: "rgba(255, 255, 255, 1)",
-          fontSize: 20
-        },
-        subtext: title,
-        subtextStyle: {
-          color: "rgba(255, 255, 255, 0.8)",
-          fontSize: 14
-        }
-      },
-      grid: {
-        right: 0
-      },
-      legend: {
-        type: 'scroll',
-          orient: 'vertical',
-          right: '50',
-          top: 'center',
-          itemWidth: 8, // 设置宽度
-          itemHeight: 8, // 设置高度
-          selectedMode: true,
-          icon: 'circle',
-          textStyle: {
-            color: '#c7c7a7',
-            fontSize: 14,
-          }
-      },
-      series: [
-        {
-          name: "",
-          type: "pie",
-          radius: ["60%", "80%"],
-          center: ['25%', '50%'],
-          avoidLabelOverlap: false,
-          label: {
-            show: false,
-            position: "center"
-          },
-          labelLine: {
-            show: false
-          },
-          data: data
-        }
-      ]
-    };
-    myChart.setOption(option);
-  }
   }
 };
 </script>
diff --git a/src/views/projectAdmin/dataBoard/homePage/safeManage.vue b/src/views/projectAdmin/dataBoard/homePage/safeManage.vue
index be32c408..e0d03136 100644
--- a/src/views/projectAdmin/dataBoard/homePage/safeManage.vue
+++ b/src/views/projectAdmin/dataBoard/homePage/safeManage.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script>
-// import {createPieChart} from "./index"
-import echarts from "echarts4";
+import {createPieChart} from "./index"
 import { selectSecurityManageStatisticsApi } from "@/assets/js/api/dataBoard";
 export default {
   data() {
@@ -32,76 +31,17 @@ export default {
         let total = res.result.total;
         this.secureData.rectificationNum = total.rectificationNum;
         this.secureData.completeNum = total.totalNum - total.rectificationNum;
-        this.createPieChart(
+        createPieChart(
           [
             { value: total.totalNum - total.rectificationNum, name: `已整改安全问题 : ${total.totalNum - total.rectificationNum}` },
             { value: total.rectificationNum, name: `未整改安全问题 : ${ total.rectificationNum}` }
           ],
+          this.$refs.safeChart,
           ["rgba(120, 111, 240, 1)", "rgba(254, 108, 127, 1)"],
           this.$t("message.companyDiagram.safeQuestion")
         );
       });
     },
-
-    createPieChart(data,color, title) {
-    let that = this;
-    let myChart = echarts.init(this.$refs.safeChart);
-    var option = {
-      color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
-      title: {
-        show: true,
-        text: data[0].value + data[1].value,
-        x: "23%",
-        y: "32%",
-        z: 5,
-        textAlign: "center",
-        textStyle: {
-          color: "rgba(255, 255, 255, 1)",
-          fontSize: 20
-        },
-        subtext: title,
-        subtextStyle: {
-          color: "rgba(255, 255, 255, 0.8)",
-          fontSize: 14
-        }
-      },
-      grid: {
-        right: 0
-      },
-      legend: {
-        type: 'scroll',
-          orient: 'vertical',
-          right: '50',
-          top: 'center',
-          itemWidth: 8, // 设置宽度
-          itemHeight: 8, // 设置高度
-          selectedMode: true,
-          icon: 'circle',
-          textStyle: {
-            color: '#c7c7a7',
-            fontSize: 14,
-          }
-      },
-      series: [
-        {
-          name: "",
-          type: "pie",
-          radius: ["60%", "80%"],
-          center: ['25%', '50%'],
-          avoidLabelOverlap: false,
-          label: {
-            show: false,
-            position: "center"
-          },
-          labelLine: {
-            show: false
-          },
-          data: data
-        }
-      ]
-    };
-    myChart.setOption(option);
-  }
   }
 };
 </script>
diff --git a/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue b/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue
index 7808b482..a33db8c7 100644
--- a/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue
+++ b/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue
@@ -1,15 +1,327 @@
+
 <template>
-  <div class="smartDevices">
-smartDevices
-  </div>
+  <div ref="device1" class="device1"></div>
 </template>
-
 <script>
+import echarts from 'echarts4';;
 export default {
+  props: ["title", "num", "totalDevNum"],
+  data() {
+    return {
+      timer: null,
+      option:null,
+      chart:Object
+    };
+  },
+  watch: {
+    //监听value的变化，进行相应的操作即可
+    num: function (a, b) {
+      console.log('设备数量',a)
+      this.option.title.text="{a|" + this.num + "}\n{c| " + this.title + " }"
+      this.option.series[6].data[0].value=this.num
+      this.option.series[6].data[1].value=this.totalDevNum - this.num
+      this.chart.setOption(this.option, true);
+    },
+  },
+  mounted() {
+    this.createdEchart();
+  },
+  beforeDestroy(){
+      clearInterval(this.timer)
+  },
+  methods: {
+    createdEchart() {
+      let that = this;
+      //设备统计 -- 塔吊设备数
+      let tower = echarts.init(this.$refs.device1);
+      this.chart=tower
+      tower.clear();
+      let angle = 0; //角度，用来做简单的动画效果的
+      //   let totalDevNum = this.statisticsCount.devcount.ufaceDevNum+
+      //   this.statisticsCount.devcount.videoNum+
+      //   +this.statisticsCount.devcount.environmentDevNum;
 
-}
+      this.option = {
+        title: {
+          text: "{a|" + this.num + "}\n{c| " + this.title + " }",
+          x: "center",
+          y: "center",
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 24,
+                color: "#29EEF3",
+              },
+
+              c: {
+                fontSize: 12,
+                lineHeight: 20,
+                color: "rgba(255, 255, 254, 0.8)",
+                // padding: [5,0]
+              },
+            },
+          },
+        },
+
+        series: [
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
+                  startAngle: ((0 + angle) * Math.PI) / 180,
+                  endAngle: ((90 + angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
+                  startAngle: ((180 + angle) * Math.PI) / 180,
+                  endAngle: ((270 + angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CC1CD",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
+                  startAngle: ((270 + -angle) * Math.PI) / 180,
+                  endAngle: ((40 + -angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CC1CD",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
+                  startAngle: ((90 + -angle) * Math.PI) / 180,
+                  endAngle: ((220 + -angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CC1CD",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
+              let point = that.getCirlPoint(x0, y0, r, 90 + -angle);
+              return {
+                type: "circle",
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4,
+                },
+                style: {
+                  stroke: "#0CC1CD", //粉
+                  fill: "#0CD3DB",
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5", //绿点
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
+              let point = that.getCirlPoint(x0, y0, r, 270 + -angle);
+              return {
+                type: "circle",
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4,
+                },
+                style: {
+                  stroke: "#0CC1CD", //绿
+                  fill: "#0CD3DB",
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            type: "pie",
+            radius: ["72%", "58%"],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            data: [
+              {
+                value: this.num,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    color: {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#4FADFD", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#28E8FA", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+              {
+                value: this.totalDevNum - this.num,
+                name: "",
+                label: {
+                  normal: {
+                    show: false,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164",
+                  },
+                },
+              },
+            ],
+          },
+          //划块线
+          {
+            name: "",
+            type: "gauge",
+            radius: "72%",
+            center: ["50%", "50%"],
+            startAngle: 0,
+            endAngle: 359.9,
+            splitNumber: 8,
+            hoverAnimation: true,
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              length: 20,
+              lineStyle: {
+                width: 2,
+                color: "#061740",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                opacity: 0,
+              },
+            },
+            detail: {
+              show: false,
+            },
+            data: [
+              {
+                value: 0,
+                name: "",
+              },
+            ],
+          },
+        ],
+      };
+
+      this.timer=setInterval(() => {
+        //用setInterval做动画感觉有问题
+        angle = angle + 3;
+        tower.setOption(this.option, true);
+      }, 100);
+    },
+    getCirlPoint(x0, y0, r, angle) {
+      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+      return {
+        x: x1,
+        y: y1,
+      };
+    },
+  },
+};
 </script>
-
 <style lang="less" scoped>
 
 </style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/index.vue b/src/views/projectAdmin/dataBoard/index.vue
index 0bdc72dc..6cb4cf24 100644
--- a/src/views/projectAdmin/dataBoard/index.vue
+++ b/src/views/projectAdmin/dataBoard/index.vue
@@ -22,30 +22,30 @@
             ref="echart2"
           ></div>
           <vue-scroll v-else :ops="ops">
-            <devNumChart
-              style="width: 50%; height: 100%; float: left"
+            <smartDevices
+            style="width: 50%; height: 100%; float: left"
               :title="$t('message.projectSummary.ufaceDevNum')"
               :num="statisticsCount.devcount.ufaceDevNum"
               :totalDevNum="totalDevNum"
-            ></devNumChart>
-            <devNumChart
-              style="width: 50%; height: 100%; float: left"
+              ></smartDevices>
+            <smartDevices 
+            style="width: 50%; height: 100%; float: left"
               :title="$t('message.projectSummary.environmentDevNum')"
               :num="statisticsCount.devcount.environmentDevNum"
               :totalDevNum="totalDevNum"
-            ></devNumChart>
-            <devNumChart
-              style="width: 50%; height: 100%; float: left"
+              ></smartDevices>
+            <smartDevices 
+            style="width: 50%; height: 100%; float: left"
               :title="$t('message.companyDiagram.videoDevNum')"
               :num="statisticsCount.devcount.videoNum"
               :totalDevNum="totalDevNum"
-            ></devNumChart>
-            <devNumChart
-              style="width: 50%; height: 100%; float: left"
+              ></smartDevices>
+            <smartDevices 
+            style="width: 50%; height: 100%; float: left"
               :title="$t('message.companyDiagram.towerDevNum')"
               :num="statisticsCount.devcount.towerDevNum"
               :totalDevNum="totalDevNum"
-            ></devNumChart>
+              ></smartDevices>
           </vue-scroll>
         </div>
       </div>
@@ -63,6 +63,7 @@
                 item.index == optionListIndex && enabledProjectV2 == 4
             }"
             v-for="(item, index) in $t('message.companyDiagram.optionList')"
+            :key="index"
           >
             {{ item.name }}
           </div>
@@ -434,8 +435,7 @@
           class="blockContent"
         >
         <!-- 环境监测 -->
-          <airQulity :show='true' :size='small'></airQulity>
-          
+          <environmentWatch :show='true' :size='small'></environmentWatch>
         </div>
         <div v-else class="blockContent alarmBlockContent">
           <vue-scroll>
@@ -498,6 +498,8 @@ const echarts5 = require("echarts");
 import safeManage from "./homePage/safeManage"
 import qualityManage from "./homePage/qualityManage"
 import airQulity from "./components/airQulity"
+import smartDevices from "./homePage/smartDevices"
+import environmentWatch from "./homePage/environmentWatch.vue"
 import devNumChart from "@/components/chart/devNumChart";
 import airQulityChart from "@/components/chart/airQulityChart";
 import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
@@ -526,7 +528,7 @@ import ProjectInfo from './homePage/projectInfo'
 import PersonOverview from './homePage/personOverview'
 
 export default {
-  components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview ,safeManage , qualityManage ,airQulity},
+  components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview ,safeManage , qualityManage ,airQulity,smartDevices ,environmentWatch},
   data() {
     return {
       COMPANY: '',
@@ -682,8 +684,6 @@ export default {
     this.enabledProjectV2 = enabledProjectV2
 
     this.getWorkerStatisticsCount(1)
-    // this.getSecureData()
-    this.getQualityData()
     this.loadWeather()
     this.getAlarmList()
     this.getAlarmInfor()
@@ -932,51 +932,6 @@ export default {
         }
       })
     },
-
-    //获取安全管理数据
-    // getSecureData() {
-    //   let data = {
-    //     projectSn: this.$store.state.projectSn,
-    //   };
-    //   selectSecurityManageStatisticsApi(data).then((res) => {
-    //     let total = res.result.total;
-    //     this.secureData.rectificationNum = total.rectificationNum;
-    //     this.secureData.completeNum = total.totalNum - total.rectificationNum;
-    //     this.createPieChart(
-    //       [
-    //         { value: total.totalNum - total.rectificationNum, name: "" },
-    //         { value: total.rectificationNum, name: "" },
-    //       ],
-    //       this.$refs.safeChart,
-    //       ["rgba(120, 111, 240, 1)", "rgba(254, 108, 127, 1)"],
-    //       this.$t("message.companyDiagram.safeQuestion")
-    //       // "安全问题数"
-    //     );
-    //   });
-    // },
-    //获取质量管理数据
-    getQualityData() {
-      let data = {
-        projectSn: this.$store.state.projectSn
-      }
-      selectQualityStatisticsApi(data).then((res) => {
-        let total = res.result.total
-        this.qualityData.rectificationNum = total.rectificationNum
-        this.qualityData.completeNum = total.totalNum - total.rectificationNum
-        if (COMPANY != 'longguang') {
-          this.createPieChart(
-            [
-              { value: total.totalNum - total.rectificationNum, name: '' },
-              { value: total.rectificationNum, name: '' }
-            ],
-            this.$refs.qulityChart,
-            ['rgba(81, 129, 246, 1)', 'rgba(92, 226, 246, 1)'],
-            this.$t('message.companyDiagram.qualityQuestion')
-            // "质量问题数"
-          )
-        }
-      })
-    },
     //获取项目详情
     getDataDateils() {
       let data = {
@@ -1002,6 +957,7 @@ export default {
         (res) => {
           console.log(res)
           this.statisticsCount = res.result
+          console.log('----------------',this.statisticsCount)
           this.totalDevNum =
             this.statisticsCount.devcount.ufaceDevNum +
             this.statisticsCount.devcount.videoNum +