diff --git a/src/assets/images/greenOverview/blue_lb.png b/src/assets/images/greenOverview/blue_lb.png
new file mode 100644
index 00000000..87c1e586
Binary files /dev/null and b/src/assets/images/greenOverview/blue_lb.png differ
diff --git a/src/assets/images/greenOverview/orange_lb.png b/src/assets/images/greenOverview/orange_lb.png
new file mode 100644
index 00000000..8fab88d2
Binary files /dev/null and b/src/assets/images/greenOverview/orange_lb.png differ
diff --git a/src/assets/images/greenOverview/qy.png b/src/assets/images/greenOverview/qy.png
new file mode 100644
index 00000000..8981f87c
Binary files /dev/null and b/src/assets/images/greenOverview/qy.png differ
diff --git a/src/views/projectAdmin/zjsj/carbon/centerTop.vue b/src/views/projectAdmin/zjsj/carbon/centerTop.vue
index 22d7eab5..5fb48dec 100644
--- a/src/views/projectAdmin/zjsj/carbon/centerTop.vue
+++ b/src/views/projectAdmin/zjsj/carbon/centerTop.vue
@@ -1,14 +1,315 @@
 <template>
   <Card title="实时数据">
-    实时数据
+    <div class="containerBox">
+      <div class="dataBoardContent">
+        <el-popover style="margin-left:900px" placement="bottom" width="70" trigger="click">
+        <ul class="devList">
+          <li
+            v-for="(item, index) in devList"
+            :class="{ active: item.deviceId == currentDevDetail.deviceId }"
+            :key="index"
+            @click="realTimeMonitor(item)"
+          >{{ item.deviceName }}</li>
+        </ul>
+        <p class="greenBtn selectDev" slot="reference">
+          <img
+            v-for="item in 4"
+            :key="item"
+            :class="'arrow' + item"
+            class="arrow"
+            src="@/assets/images/greenOverview/arrow.png"
+          />
+          {{ currentDevDetail.deviceName }}
+          <i class="el-icon-arrow-down"></i>
+        </p>
+      </el-popover>
+    
+      
+
+      <!-- 下面的部分 -->
+      <div class="realTimeData">
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/PM2.5@1x.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>PM2.5</p>
+            <p>{{plantCap.pm25?plantCap.pm25:'--'}}μg/m3</p>
+            <!--   <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
+            <!--   v-if="plantCap.pm25AlarmType == 1"-->
+            <img
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            />
+          </div>
+        </div>
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/PM10@1x.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>PM10</p>
+            <p>{{plantCap.pm10?plantCap.pm10:'--'}}μg/m3</p>
+            <!-- <img src="@/assets/images/greenOverview/形状.gif" alt=""> -->
+            <!-- 显示条件 v-if="plantCap.pm10AlarmType == 1" -->
+            <img
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            />
+          </div>
+        </div>
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/qy.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>
+              <!-- 温度 -->
+              {{'气压'}}
+            </p>
+            <p>{{plantCap.temperature?plantCap.temperature:'--'}}℃</p>
+            <!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
+            <!-- v-if="plantCap.temperatureAlarmType == 1" -->
+            <img
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            />
+          </div>
+        </div>
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/温度@1x.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>
+              <!-- 温度 -->
+              {{$t('message.dataBoard.temperature')}}
+            </p>
+            <p>{{plantCap.temperature?plantCap.temperature:'--'}}℃</p>
+            <!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
+            <!-- v-if="plantCap.temperatureAlarmType == 1"-->
+            <img
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            />
+          </div>
+        </div>
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/湿度@1x.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>
+              <!-- 湿度 -->
+              {{$t('message.dataBoard.humidity')}}
+            </p>
+            <p>{{plantCap.humidity?plantCap.humidity:'--'}}%</p>
+            <!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
+            <!-- v-if="plantCap.humidityAlarmType == 1" -->
+            <img
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            />
+          </div>
+        </div>
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/编组 27.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>TSP</p>
+            <p>{{plantCap.tsp?plantCap.tsp:'--'}}μg/m3</p>
+            <img src="@/assets/images/greenOverview/blue_lb.png" alt="">
+            <!-- <img
+              v-if="plantCap.tspAlarmType == 1"
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            /> -->
+          </div>
+        </div>
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/噪声@1x.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>
+              <!-- 噪声 -->
+              {{$t('message.dataBoard.noise')}}
+            </p>
+            <p>{{plantCap.noise?plantCap.noise:'--'}}dB</p>
+            <!--              <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
+            <img
+              v-if="plantCap.noiseAlarmType == 1"
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            />
+          </div>
+        </div>
+        <div class="realTimeData_item">
+          <div class="realTimeData_item_img">
+            <img src="@/assets/images/greenOverview/风速@1x.png" alt />
+          </div>
+          <div class="realTimeData_item_text">
+            <p>
+              <!-- 风速 -->
+              {{$t('message.dataBoard.windSpeed')}}
+            </p>
+            <p>{{plantCap.windspeed?plantCap.windspeed:'--'}}m/s</p>
+            <!--              <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
+            <img
+              v-if="plantCap.windSpeedAlarmType == 1"
+              src="@/assets/images/greenOverview/形状备份-2.gif"
+              alt
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+      </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from "../components/Card";
+import echarts from "echarts4";
+import { environmentDevList } from "@/assets/js/api/environmentManage";
+import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
 export default {
-  components: { Card }
-}
+  components: { Card },
+  data() {
+    return {
+      devList: [],
+      currentDevDetail: {},
+      onlineDevNum: 0,
+      offlineDevNum: 0,
+      realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
+      plantCap: {
+        crc: "--",
+        humidity: "--",
+        noise: "--",
+        plateHumidity: "--",
+        plateTemperature: "--",
+        pm10: "--",
+        pm25: "--",
+        pressure: "--",
+        temperature: "--",
+        tsp: "--",
+        voltage: "--",
+        winddirectionName: "--",
+        windspeed: "--"
+      }
+    };
+  },
+  mounted() {
+    // this.createCenterChart();
+    this.$nextTick(() => {
+      this.getDevList();
+    });
+  },
+  methods: {
+    getDevList() {
+      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
+        result => {
+          console.log("列表", result);
+          this.devList = result.result;
+          console.log(this.devList);
+          if (result.result.length > 0) {
+            this.currentDevDetail = result.result[0];
+
+            this.$emit("custClick", this.currentDevDetail);
+
+            this.offlineDevNum = 0;
+            this.onlineDevNum = 0;
+            this.devList.forEach(element => {
+              if (element.isClosed == 2) {
+                this.offlineDevNum++;
+              } else {
+                this.onlineDevNum++;
+              }
+            });
+            this.getRealTimeDustNoiseData();
+            // this.realTimeDustNoiseDataTime = setInterval( () => {
+            //   this.getRealTimeDustNoiseData();
+            // },5000)
+            // this.selectDustNoiseData();  近24H
+          } else {
+            // this.createCenterChart();
+          }
+        }
+      );
+    },
+    //获取环境设备详情数据
+    getRealTimeDustNoiseData() {
+      let data = {
+        deviceId: this.currentDevDetail.deviceId,
+        projectSn: this.projectSn
+      };
+      console.log(data);
+      getRealTimeDustNoiseDataApi(data).then(res => {
+        console.log(res);
+        if (res.code == 200) {
+          console.log(res.result);
+          if (res.result) {
+            this.plantCap = res.result;
+          } else {
+            this.plantCap = {
+              crc: "--",
+              humidity: "--",
+              noise: "--",
+              plateHumidity: "--",
+              plateTemperature: "--",
+              pm10: "--",
+              pm25: "--",
+              pressure: "--",
+              temperature: "--",
+              tsp: "--",
+              voltage: "--",
+              winddirectionName: "--",
+              windspeed: "--"
+            };
+          }
+          // this.createCenterChart();
+        }
+      });
+    },
+    // // 切换设备
+    realTimeMonitor(value) {
+      if (this.realTimeDustNoiseDataTime) {
+        clearInterval(this.realTimeDustNoiseDataTime);
+      }
+      console.log("id换了吗", value);
+      this.currentDevDetail = value;
+      this.getRealTimeDustNoiseData();
+    }
+  }
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.containerBox {
+  width: 100%;
+  height: 100%;
+  margin-top: 3%;
+  .realTimeData {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    /*justify-content:space-between;*/
+    padding: 50px 100px;
+    .realTimeData_item {
+      box-sizing: border-box;
+      display: flex;
+      width: 280px;
+      height: 100px;
+      padding: 0px 50px;
+      margin-top: 40px;
+      .realTimeData_item_img {
+        box-sizing: border-box;
+        margin-right: 20px;
+      }
+    }
+    /*margin: auto;*/
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftBottom.vue b/src/views/projectAdmin/zjsj/carbon/leftBottom.vue
index 36501364..bd3c952c 100644
--- a/src/views/projectAdmin/zjsj/carbon/leftBottom.vue
+++ b/src/views/projectAdmin/zjsj/carbon/leftBottom.vue
@@ -1,14 +1,225 @@
 <template>
   <Card title="趋势图">
-    趋势图
+    <div class="contentBox">
+      <div class="dataBoardContent">
+        <span class="greenBtn" @click="switchingData(1)" :class="checked == 1 ? 'active' : ''">
+          <img
+            v-for="item in 4"
+            :key="item"
+            :class="'arrow' + item"
+            class="arrow"
+            src="@/assets/images/greenOverview/arrow.png"
+          />
+          {{ $t("message.environmentalOverview.e6SelectArr")[0].title }}
+        </span>
+        <span class="greenBtn" @click="switchingData(2)" :class="checked == 2 ? 'active' : ''">
+          <img
+            v-for="item in 4"
+            :key="item"
+            :class="'arrow' + item"
+            class="arrow"
+            src="@/assets/images/greenOverview/arrow.png"
+          />
+          {{ $t("message.environmentalOverview.e6SelectArr")[1].title }}
+        </span>
+        <span class="greenBtn" @click="switchingData(3)" :class="checked == 3 ? 'active' : ''">
+          <img
+            v-for="item in 4"
+            :key="item"
+            :class="'arrow' + item"
+            class="arrow"
+            src="@/assets/images/greenOverview/arrow.png"
+          />
+          {{ $t("message.environmentalOverview.e6SelectArr")[2].title }}
+        </span>
+        <span class="greenBtn" @click="switchingData(4)" :class="checked == 4 ? 'active' : ''">
+          <img
+            v-for="item in 4"
+            :key="item"
+            :class="'arrow' + item"
+            class="arrow"
+            src="@/assets/images/greenOverview/arrow.png"
+          />
+          {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
+        </span>
+
+
+        <div class="myChart" ref="myChart" />
+      </div>
+      
+    </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from "../components/Card.vue";
+import echarts from "echarts4";
+import {
+  getEnvironmentWarningInfo
+} from "@/assets/js/api/environmentManage";
 export default {
-  components: { Card }
-}
+   components: { Card },
+  data() {
+    return {
+      data : [90, 85, 100, 96, 100, 150, 190, 125 ],
+      checked:1,
+      dustData_24:[],
+    };
+  },
+  mounted() {
+    this.initMyChart();
+  },
+  methods: {
+    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 = {
+        grid: {
+        x: "10%",//x 偏移量
+        y: "5%", // y 偏移量
+        width: "85%", // 宽度
+        height: "78%"// 高度
+      },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "01:00",
+            "02:00",
+            "03:00",
+            "04:00",
+            "05:00",
+            "06:00",
+            "07:00",
+            "08:00"
+          ],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#9ea3ab"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          max: 300,
+          splitNumber: 4,
+          axisLabel: {
+            // y轴文字的配置
+            textStyle: {
+              color: "#92a1bc"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#777f8a"
+            }
+          }
+        },
+        series: [
+          {
+            itemStyle: {
+              normal: {
+                color: "#6ae6ef",
+                lineStyle: {
+                  color: "#6ae6ef"
+                }
+              }
+            },
+            data: this.data,
+            type: "line",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "rgba(53, 98, 111,0.5)" },
+                { offset: 1, color: "rgba(53, 98, 111,0.3)" }
+              ])
+            }
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.contentBox {
+  width: 100%;
+  height: 100%;
+  margin-top: 5%;
+
+  .titleTxt {
+    font-size: 18px;
+    color: #6ee4f0;
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+  .myChart {
+    margin-top: 5%;
+    width: 100%;
+    height: 90%;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftCenter.vue b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
index 23da58ae..3490849e 100644
--- a/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
+++ b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
@@ -88,7 +88,7 @@ export default {
       border-bottom: 1px solid rgba(31, 68, 86, 0.3);
     }
     td {
-      color: white;
+      color: #c5c7cc;
       line-height: 25px;
     }
   }