From a99094632a52e261d786a644dd26b507d8ef5efa Mon Sep 17 00:00:00 2001
From: yjl <1490736767@qq.com>
Date: Thu, 30 Mar 2023 13:40:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=91=E6=9E=97=E6=B9=BE=E5=A4=A7=E5=B1=8F-?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=9B=91=E6=B5=8B=E5=A2=9E=E5=8A=A0=E5=99=AA?=
 =?UTF-8?q?=E9=9F=B3=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../langs/cn/environmentalMonitor/overview.js |    8 +-
 .../langs/en/environmentalMonitor/overview.js |    9 +-
 .../jlw/envirManage/centerTop.vue             |  349 +++---
 .../jlw/envirManage/leftCenter.vue            |   73 +-
 .../environmentalMonitor/overview.vue         | 1025 +++++++++--------
 5 files changed, 786 insertions(+), 678 deletions(-)

diff --git a/src/assets/i18n/langs/cn/environmentalMonitor/overview.js b/src/assets/i18n/langs/cn/environmentalMonitor/overview.js
index 9e75d5d7..cfdb0eea 100644
--- a/src/assets/i18n/langs/cn/environmentalMonitor/overview.js
+++ b/src/assets/i18n/langs/cn/environmentalMonitor/overview.js
@@ -73,7 +73,13 @@ export default {
             value: "东",
             id:7,
             unit:'风'
-        }
+        },
+        {
+            name: "噪音",
+            value: "101",
+            id:9,
+            unit:'dB'
+        },
         // , {
         //     name: "气压",
         //     value: "101",
diff --git a/src/assets/i18n/langs/en/environmentalMonitor/overview.js b/src/assets/i18n/langs/en/environmentalMonitor/overview.js
index e9939b9b..6ee5466c 100644
--- a/src/assets/i18n/langs/en/environmentalMonitor/overview.js
+++ b/src/assets/i18n/langs/en/environmentalMonitor/overview.js
@@ -73,12 +73,19 @@ export default {
             value: "东",
             id:7,
             unit:'风'
-        }, {
+        }, 
+        {
             name: "气压",
             value: "101",
             id:8,
             unit:'kPa'
         },
+        {
+            name: "噪音",
+            value: "101",
+            id:9,
+            unit:'dB'
+        },
     ],
 
     //演示模拟数据
diff --git a/src/views/projectAdmin/jlw/envirManage/centerTop.vue b/src/views/projectAdmin/jlw/envirManage/centerTop.vue
index 1cbf9cbf..ec198b6e 100644
--- a/src/views/projectAdmin/jlw/envirManage/centerTop.vue
+++ b/src/views/projectAdmin/jlw/envirManage/centerTop.vue
@@ -2,14 +2,21 @@
   <!-- 实时数据 -->
   <Card :title="title" showRefresh @query="handleQuery">
     <div class="containerBox">
-      <el-popover style="margin-left:900px" placement="bottom" width="70" trigger="click">
+      <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>
+          >
+            {{ item.deviceName }}
+          </li>
         </ul>
         <p class="greenBtn selectDev" slot="reference">
           <img
@@ -29,16 +36,16 @@
 </template>
 
 <script>
-import Card from "../components/Card";
-import echarts from "echarts4";
-import { environmentDevList } from "@/assets/js/api/environmentManage";
-import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
+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 },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
@@ -49,50 +56,51 @@ export default {
       offlineDevNum: 0,
       realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
       plantCap: {
-        crc: "--",
-        humidity: "--",
-        noise: "--",
-        plateHumidity: "--",
-        plateTemperature: "--",
-        pm10: "--",
-        pm25: "--",
-        pressure: "--",
-        temperature: "--",
-        tsp: "--",
-        voltage: "--",
-        winddirectionName: "--",
-        windspeed: "--"
+        crc: '--',
+        humidity: '--',
+        noise: '--',
+        plateHumidity: '--',
+        plateTemperature: '--',
+        pm10: '--',
+        pm25: '--',
+        pressure: '--',
+        temperature: '--',
+        tsp: '--',
+        voltage: '--',
+        winddirectionName: '--',
+        windspeed: '--',
+        noise: '--'
       }
-    };
+    }
   },
   mounted() {
     // this.createCenterChart();
     this.$nextTick(() => {
-      this.getDevList();
-    });
+      this.getDevList()
+    })
   },
   methods: {
     getDevList() {
       environmentDevList({ projectSn: this.$store.state.projectSn }).then(
-        result => {
-          console.log("列表", result);
-          this.devList = result.result;
-          console.log(this.devList);
+        (result) => {
+          console.log('列表', result)
+          this.devList = result.result
+          console.log(this.devList)
           if (result.result.length > 0) {
-            this.currentDevDetail = result.result[0];
+            this.currentDevDetail = result.result[0]
 
-            this.$emit('custClick',this.currentDevDetail)
+            this.$emit('custClick', this.currentDevDetail)
 
-            this.offlineDevNum = 0;
-            this.onlineDevNum = 0;
-            this.devList.forEach(element => {
+            this.offlineDevNum = 0
+            this.onlineDevNum = 0
+            this.devList.forEach((element) => {
               if (element.isClosed == 2) {
-                this.offlineDevNum++;
+                this.offlineDevNum++
               } else {
-                this.onlineDevNum++;
+                this.onlineDevNum++
               }
-            });
-            this.getRealTimeDustNoiseData();
+            })
+            this.getRealTimeDustNoiseData()
             // this.realTimeDustNoiseDataTime = setInterval( () => {
             //   this.getRealTimeDustNoiseData();
             // },5000)
@@ -101,7 +109,7 @@ export default {
             // this.createCenterChart();
           }
         }
-      );
+      )
     },
     /** 查询 */
     handleQuery() {
@@ -112,12 +120,12 @@ export default {
     // // 切换设备
     realTimeMonitor(value) {
       if (this.realTimeDustNoiseDataTime) {
-        clearInterval(this.realTimeDustNoiseDataTime);
+        clearInterval(this.realTimeDustNoiseDataTime)
       }
-      console.log("id换了吗", value);
-      this.currentDevDetail = value;
+      console.log('id换了吗', value)
+      this.currentDevDetail = value
 
-      this.getRealTimeDustNoiseData();
+      this.getRealTimeDustNoiseData()
       // this.realTimeDustNoiseDataTime = setInterval( () => {
       //   this.getRealTimeDustNoiseData();
       // },5000)
@@ -130,179 +138,198 @@ export default {
       let data = {
         deviceId: this.currentDevDetail.deviceId,
         projectSn: this.$store.state.projectSn
-      };
-      console.log(data);
-      getRealTimeDustNoiseDataApi(data).then(res => {
+      }
+      console.log(data)
+      getRealTimeDustNoiseDataApi(data).then((res) => {
         if (res.code == 200) {
-          console.log(res.result);
+          console.log(res.result)
           if (res.result != null) {
-            this.plantCap = res.result;
+            this.plantCap = res.result
+            console.log('this.plantCap===========', this.plantCap)
           } else {
             this.plantCap = {
-              crc: "--",
-              humidity: "--",
-              noise: "--",
-              plateHumidity: "--",
-              plateTemperature: "--",
-              pm10: "--",
-              pm25: "--",
-              pressure: "--",
-              temperature: "--",
-              tsp: "--",
-              voltage: "--",
-              winddirectionName: "--",
-              windspeed: "--"
-            };
+              crc: '--',
+              humidity: '--',
+              noise: '--',
+              plateHumidity: '--',
+              plateTemperature: '--',
+              pm10: '--',
+              pm25: '--',
+              pressure: '--',
+              temperature: '--',
+              tsp: '--',
+              voltage: '--',
+              winddirectionName: '--',
+              windspeed: '--',
+              noise: '--'
+            }
           }
-          this.createCenterChart();
+          this.createCenterChart()
         }
-      });
+      })
     },
-    
+
     //环境监测实时数据--图表
     createCenterChart() {
-      let centerChart = echarts.init(this.$refs.centerChart);
-      console.log("this.$refs.centerChart");
-      console.log(this.$refs.centerChart.offsetHeight);
-      centerChart.clear();
-      let detailData = this.$t("message.environmentalOverview.plantCap");
+      let centerChart = echarts.init(this.$refs.centerChart)
+      console.log('this.$refs.centerChart')
+      console.log(this.$refs.centerChart.offsetHeight)
+      centerChart.clear()
+      let detailData = this.$t('message.environmentalOverview.plantCap')
       for (let i = 0; i < detailData.length; i++) {
         if (detailData[i].id == 1) {
-          detailData[i].value = this.plantCap.humidity; //湿度
+          detailData[i].value = this.plantCap.humidity //湿度
         } else if (detailData[i].id == 2) {
-          detailData[i].value = this.plantCap.pm25; //pm2.5
+          detailData[i].value = this.plantCap.pm25 //pm2.5
         } else if (detailData[i].id == 3) {
-          detailData[i].value = this.plantCap.temperature; //温度
+          detailData[i].value = this.plantCap.temperature //温度
         } else if (detailData[i].id == 4) {
-          detailData[i].value = this.plantCap.tsp; //tsp
+          detailData[i].value = this.plantCap.tsp //tsp
         } else if (detailData[i].id == 5) {
-          detailData[i].value = this.plantCap.windspeed; //风速
+          detailData[i].value = this.plantCap.windspeed //风速
         } else if (detailData[i].id == 6) {
-          detailData[i].value = this.plantCap.pm10; // pm10
+          detailData[i].value = this.plantCap.pm10 // pm10
         } else if (detailData[i].id == 7) {
-          detailData[i].value = this.plantCap.winddirectionName;
+          detailData[i].value = this.plantCap.winddirectionName
         } else if (detailData[i].id == 8) {
           detailData[i].value = this.plantCap.pressure
             ? this.plantCap.pressure
-            : "--";
+            : '--'
+        } else if (detailData[i].id == 9) {
+          detailData[i].value = this.plantCap.noise
         }
-        detailData[i].value += detailData[i].unit;
+        detailData[i].value += detailData[i].unit
       }
-      var 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],
+          offset: [60, 50],
           symbolSize: 70,
           opacity: 0.95,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#35d17e"
+              color: '#29c0fb'
             },
             {
               offset: 1,
-              color: "#49ddb2"
+              color: '#2dc5b9'
             }
           ])
         },
         {
-          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],
+          offset: [45, 80],
           symbolSize: 65,
           opacity: 0.95,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#e54948"
+              color: '#35d17e'
             },
             {
               offset: 1,
-              color: "#f08456"
+              color: '#49ddb2'
+            }
+          ])
+        },
+        {
+          offset: [20, 35],
+          symbolSize: 65,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#e5d273'
+            },
+            {
+              offset: 1,
+              color: '#e4a37f'
+            }
+          ])
+        },
+        {
+          offset: [45, 20],
+          symbolSize: 65,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#277aec'
+            },
+            {
+              offset: 1,
+              color: '#57c5ec'
+            }
+          ])
+        },
+        {
+          offset: [95, 45],
+          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,
+          symbolSize: 65,
           opacity: 0.7,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#11c46e"
+              color: '#11c46e'
             },
             {
               offset: 1,
-              color: "#f08456"
+              color: '#f08456'
             }
           ])
         },
         {
-          offset: [68, 82],
+          offset: [78, 82],
           symbolSize: 65,
           opacity: 0.68,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#6367E0"
+              color: '#6367E0'
             },
             {
               offset: 1,
-              color: "#B667F0"
+              color: '#B667F0'
+            }
+          ])
+        },
+        {
+          offset: [25, 65],
+          symbolSize: 65,
+          opacity: 0.68,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#6367E0'
+            },
+            {
+              offset: 1,
+              color: '#fe6c7f'
             }
           ])
         }
-      ];
-      var datas = [];
+      ]
+      var datas = []
       for (var i = 0; i < plantCap.length; i++) {
-        var item = plantCap[i];
-        var itemToStyle = datalist[i];
+        var item = plantCap[i]
+        var itemToStyle = datalist[i]
         datas.push({
-          name: item.value + "\n" + item.name,
+          name: item.value + '\n' + item.name,
           value: itemToStyle.offset,
           symbolSize: itemToStyle.symbolSize,
           label: {
@@ -320,7 +347,7 @@ export default {
               opacity: itemToStyle.opacity
             }
           }
-        });
+        })
       }
       let option1 = {
         grid: {
@@ -331,11 +358,11 @@ export default {
         xAxis: [
           {
             gridIndex: 0,
-            type: "value",
+            type: 'value',
             show: false,
             min: 0,
             max: 100,
-            nameLocation: "middle",
+            nameLocation: 'middle',
             nameGap: 5
           }
         ],
@@ -345,13 +372,13 @@ export default {
             min: 0,
             show: false,
             max: 100,
-            nameLocation: "middle",
+            nameLocation: 'middle',
             nameGap: 30
           }
         ],
         series: [
           {
-            type: "effectScatter",
+            type: 'effectScatter',
             // symbol: 'circle',
             // symbolSize: 120,
 
@@ -359,36 +386,36 @@ export default {
             label: {
               normal: {
                 show: true,
-                formatter: "{b}",
-                color: "#fff",
+                formatter: '{b}',
+                color: '#fff',
                 textStyle: {
-                  fontSize: "20"
+                  fontSize: '20'
                 }
               }
             },
             itemStyle: {
               normal: {
-                color: "#00acea"
+                color: '#00acea'
               }
             },
             data: datas
           }
         ]
-      };
-      centerChart.setOption(option1);
-      window.onresize = centerChart.resize;
+      }
+      centerChart.setOption(option1)
+      window.onresize = centerChart.resize
     }
   },
-  watch:{
-      'plantCap':{
-        handler(newVal, oldVal) {
-          if (newVal != oldVal) {
-            this.createCenterChart();
-          }
+  watch: {
+    plantCap: {
+      handler(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.createCenterChart()
         }
       }
-    },
-};
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -410,7 +437,7 @@ export default {
   ::v-deep.el-popover {
     min-width: auto;
   }
-  
+
   .centerChart {
     width: 100%;
     height: calc(100% - 22px);
diff --git a/src/views/projectAdmin/jlw/envirManage/leftCenter.vue b/src/views/projectAdmin/jlw/envirManage/leftCenter.vue
index 3835693c..9468244c 100644
--- a/src/views/projectAdmin/jlw/envirManage/leftCenter.vue
+++ b/src/views/projectAdmin/jlw/envirManage/leftCenter.vue
@@ -8,36 +8,39 @@
             <div class="item">
               <img src="@/assets/images/dataBoard/online.jpg" alt />
               <div>
-                <p class="num" style="color:#5181F6">{{onlineDevNum}}</p>
+                <p class="num" style="color: #5181f6">{{ onlineDevNum }}</p>
                 <p>
                   <!-- 在线设备 -->
-                  {{$t('message.dataBoard.onlineDev')}}
+                  {{ $t('message.dataBoard.onlineDev') }}
                 </p>
               </div>
             </div>
             <div class="item">
-              <img src="@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-offline.png" alt />
+              <img
+                src="@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-offline.png"
+                alt
+              />
               <div>
-                <p class="num" style="color:#fe6c7f">{{offlineDevNum}}</p>
+                <p class="num" style="color: #fe6c7f">{{ offlineDevNum }}</p>
                 <p>
                   <!-- 离线设备 -->
-                  {{$t('message.dataBoard.notOnlineDev')}}
+                  {{ $t('message.dataBoard.notOnlineDev') }}
                 </p>
               </div>
             </div>
           </div>
-  
+
           <div class="devListBox">
             <ul>
-              <li v-for="(item,index) in devList" :key="index">
+              <li v-for="(item, index) in devList" :key="index">
                 <p>{{ item.deviceName }}</p>
-                <span class="offline" v-if="item.isClosed==2">
+                <span class="offline" v-if="item.isClosed == 2">
                   <!-- 离线 -->
-                  {{$t('message.dataBoard.notOnline')}}
+                  {{ $t('message.dataBoard.notOnline') }}
                 </span>
                 <span class="online" v-else>
                   <!-- 在线 -->
-                  {{$t('message.dataBoard.online')}}
+                  {{ $t('message.dataBoard.online') }}
                 </span>
               </li>
             </ul>
@@ -53,59 +56,59 @@
 </template>
 
 <script>
-import Card from "../components/Card";
+import Card from '../components/Card'
 
-import { environmentDevList } from "@/assets/js/api/environmentManage";
+import { environmentDevList } from '@/assets/js/api/environmentManage'
 export default {
   components: { Card },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
     return {
       devList: [],
       onlineDevNum: 0,
-      offlineDevNum: 0,
-    };
+      offlineDevNum: 0
+    }
   },
   mounted() {
-    this.getDevList();
+    this.getDevList()
   },
   methods: {
     //获取环境设备列表--环境监测实时数据--下拉
     getDevList() {
       environmentDevList({ projectSn: this.$store.state.projectSn }).then(
-        result => {
+        (result) => {
           // console.log('列表', result)
-          this.devList = result.result;
-          console.log(this.devList);
+          this.devList = result.result
+          console.log(this.devList)
           if (result.result.length > 0) {
-            this.currentDevDetail = result.result[0];
-            this.offlineDevNum = 0;
-            this.onlineDevNum = 0;
-            this.devList.forEach(element => {
+            this.currentDevDetail = result.result[0]
+            this.offlineDevNum = 0
+            this.onlineDevNum = 0
+            this.devList.forEach((element) => {
               if (element.isClosed == 2) {
-                this.offlineDevNum++;
+                this.offlineDevNum++
               } else {
-                this.onlineDevNum++;
+                this.onlineDevNum++
               }
-            });
-          } 
+            })
+          }
         }
-      );
+      )
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
 .containerBox {
   width: 100%;
   height: 100%;
-  overflow:auto;
+  overflow: auto;
 
   .devInfoBox {
     display: flex;
@@ -148,7 +151,7 @@ export default {
     p {
       font-size: 16px;
       opacity: 0.8;
-      padding-left: 32px;
+      padding-left: 10px;
     }
     .online {
       background-color: rgba(68, 215, 182, 0.54);
@@ -157,17 +160,17 @@ export default {
       background-color: #442b40;
     }
   }
-  .noData{
+  .noData {
     margin-top: 5%;
     margin-left: 35%;
-    p{
+    p {
       margin-left: 5%;
     }
   }
 }
 ::-webkit-scrollbar {
- width: 3px;
- color: #636364;
+  width: 3px;
+  color: #636364;
 }
 </style>
 
diff --git a/src/views/projectFront/environmentalMonitor/overview.vue b/src/views/projectFront/environmentalMonitor/overview.vue
index b4cf29c9..dfaed40f 100644
--- a/src/views/projectFront/environmentalMonitor/overview.vue
+++ b/src/views/projectFront/environmentalMonitor/overview.vue
@@ -3,7 +3,7 @@
     <div class="headerBox">
       <h1 class="title">
         {{ $store.state.currentProDetail.projectName }} -
-        {{ $t("message.environmentalOverview.title") }}
+        {{ $t('message.environmentalOverview.title') }}
       </h1>
       <closePage></closePage>
     </div>
@@ -15,7 +15,7 @@
         <div class="smallDiv smallDiv1 fullHeight">
           <div class="blockBox">
             <div class="title">
-              <p class="e1">{{ $t("message.environmentalOverview.e1") }}</p>
+              <p class="e1">{{ $t('message.environmentalOverview.e1') }}</p>
             </div>
             <div class="blockContent">
               <div class="fullHeight" ref="monitor"></div>
@@ -30,31 +30,31 @@
                     "
                   ></div>
                   <div class="size">
-                    {{ $t("message.projectSummary.actor") }}
+                    {{ $t('message.projectSummary.actor') }}
                   </div>
                 </div>
                 <div class="colour_content">
                   <div class="bg" style="background: #ffbb38"></div>
                   <div class="size">
-                    {{ $t("message.projectSummary.fine") }}
+                    {{ $t('message.projectSummary.fine') }}
                   </div>
                 </div>
                 <div class="colour_content">
                   <div class="bg" style="background: #fe7a18"></div>
                   <div class="size">
-                    {{ $t("message.projectSummary.mildContamination") }}
+                    {{ $t('message.projectSummary.mildContamination') }}
                   </div>
                 </div>
                 <div class="colour_content">
                   <div class="bg" style="background: #7718fe"></div>
                   <div class="size">
-                    {{ $t("message.projectSummary.middleLevelPollution") }}
+                    {{ $t('message.projectSummary.middleLevelPollution') }}
                   </div>
                 </div>
                 <div class="colour_content">
                   <div class="bg" style="background: #890ea1"></div>
                   <div class="size">
-                    {{ $t("message.projectSummary.actheavyPollutionor") }}
+                    {{ $t('message.projectSummary.actheavyPollutionor') }}
                   </div>
                 </div>
                 <div class="colour_content">
@@ -67,7 +67,7 @@
                     "
                   ></div>
                   <div class="size">
-                    {{ $t("message.projectSummary.severeContamination") }}
+                    {{ $t('message.projectSummary.severeContamination') }}
                   </div>
                 </div>
               </div>
@@ -75,7 +75,7 @@
           </div>
           <div class="blockBox">
             <div class="title">
-              <p class="e4">{{ $t("message.environmentalOverview.e4") }}</p>
+              <p class="e4">{{ $t('message.environmentalOverview.e4') }}</p>
             </div>
             <div class="blockContent">
               <vue-scroll>
@@ -83,27 +83,28 @@
                   <thead>
                     <tr>
                       <th>
-                        {{ $t("message.environmentalOverview.table.th1") }}
+                        {{ $t('message.environmentalOverview.table.th1') }}
                       </th>
                       <th>
-                        {{ $t("message.environmentalOverview.table.th2") }}
+                        {{ $t('message.environmentalOverview.table.th2') }}
                       </th>
                       <th>
-                        {{ $t("message.environmentalOverview.table.th3") }}
+                        {{ $t('message.environmentalOverview.table.th3') }}
                       </th>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr v-for="(item,index) in sprayDevList" :key="index">
-                      <td>{{ item.deviceName }}
-                      </td>
+                    <tr v-for="(item, index) in sprayDevList" :key="index">
+                      <td>{{ item.deviceName }}</td>
                       <td>{{ item.deviceId }}</td>
                       <td>
-                        <img @click="sprayOperate(item.deviceId,1)"
+                        <img
+                          @click="sprayOperate(item.deviceId, 1)"
                           v-if="item.switchStatus == 1"
                           src="@/assets/images/greenOverview/icon-switch.png"
                         />
-                        <img @click="sprayOperate(item.deviceId,2)"
+                        <img
+                          @click="sprayOperate(item.deviceId, 2)"
                           v-else
                           src="@/assets/images/greenOverview/icon-switch-green.png"
                         />
@@ -111,11 +112,14 @@
                     </tr>
                   </tbody>
                 </table>
-                <div class="placeholderBox placeholderBox2" v-if="sprayDevList.length==0">
-                  <img src="@/assets/images/noData3.png" alt="" srcset="">
+                <div
+                  class="placeholderBox placeholderBox2"
+                  v-if="sprayDevList.length == 0"
+                >
+                  <img src="@/assets/images/noData3.png" alt="" srcset="" />
                   <p>
                     <!-- 暂无数据 -->
-                    {{$t('message.projectInfo.noData')}}
+                    {{ $t('message.projectInfo.noData') }}
                   </p>
                 </div>
               </vue-scroll>
@@ -124,7 +128,7 @@
         </div>
         <div class="centerDiv fullHeight">
           <div class="title">
-            <p class="e2">{{ $t("message.environmentalOverview.e2") }}</p>
+            <p class="e2">{{ $t('message.environmentalOverview.e2') }}</p>
           </div>
           <el-popover placement="bottom" width="70" trigger="click">
             <ul class="devList">
@@ -154,7 +158,7 @@
         <div class="smallDiv fullHeight">
           <div class="blockBox">
             <div class="title">
-              <p class="e3">{{ $t("message.environmentalOverview.e3") }}</p>
+              <p class="e3">{{ $t('message.environmentalOverview.e3') }}</p>
             </div>
             <div class="blockContent alarmBlockContent">
               <vue-scroll>
@@ -162,18 +166,18 @@
                   <thead>
                     <tr>
                       <th>
-                        {{ $t("message.environmentalOverview.table2.th1") }}
+                        {{ $t('message.environmentalOverview.table2.th1') }}
                       </th>
                       <th>
-                        {{ $t("message.environmentalOverview.table2.th2") }}
+                        {{ $t('message.environmentalOverview.table2.th2') }}
                       </th>
                       <th>
-                        {{ $t("message.environmentalOverview.table2.th3") }}
+                        {{ $t('message.environmentalOverview.table2.th3') }}
                       </th>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr v-for="(item,index) in alarmList" :key="index">
+                    <tr v-for="(item, index) in alarmList" :key="index">
                       <td>
                         {{ item.deviceName }}
                       </td>
@@ -182,11 +186,14 @@
                     </tr>
                   </tbody>
                 </table>
-                <div class="placeholderBox placeholderBox2" v-if="alarmList.length==0">
-                  <img src="@/assets/images/noData3.png" alt="" srcset="">
+                <div
+                  class="placeholderBox placeholderBox2"
+                  v-if="alarmList.length == 0"
+                >
+                  <img src="@/assets/images/noData3.png" alt="" srcset="" />
                   <p>
-                     <!-- 暂无数据 -->
-                    {{$t('message.projectInfo.noData')}}
+                    <!-- 暂无数据 -->
+                    {{ $t('message.projectInfo.noData') }}
                   </p>
                 </div>
               </vue-scroll>
@@ -194,11 +201,18 @@
           </div>
           <div class="blockBox">
             <div class="title">
-              <p class="e5">{{ $t("message.environmentalOverview.e5") }}</p>
+              <p class="e5">{{ $t('message.environmentalOverview.e5') }}</p>
             </div>
             <div class="blockContent">
               <div class="operateBar">
-                <span class="greenBtn" :class="airType==1?'active':''" @click="airType=1; getAirQualityStatistics()">
+                <span
+                  class="greenBtn"
+                  :class="airType == 1 ? 'active' : ''"
+                  @click="
+                    airType = 1
+                    getAirQualityStatistics()
+                  "
+                >
                   <img
                     v-for="item in 4"
                     :key="item"
@@ -206,9 +220,16 @@
                     class="arrow"
                     src="@/assets/images/greenOverview/arrow.png"
                   />
-                  {{ $t("message.environmentalOverview.e5SelectArr")[0].title }}
+                  {{ $t('message.environmentalOverview.e5SelectArr')[0].title }}
                 </span>
-                <span class="greenBtn" :class="airType==2?'active':''" @click="airType=2; getAirQualityStatistics()">
+                <span
+                  class="greenBtn"
+                  :class="airType == 2 ? 'active' : ''"
+                  @click="
+                    airType = 2
+                    getAirQualityStatistics()
+                  "
+                >
                   <img
                     v-for="item in 4"
                     :key="item"
@@ -216,7 +237,7 @@
                     class="arrow"
                     src="@/assets/images/greenOverview/arrow.png"
                   />
-                  {{ $t("message.environmentalOverview.e5SelectArr")[1].title }}
+                  {{ $t('message.environmentalOverview.e5SelectArr')[1].title }}
                 </span>
               </div>
               <div class="progressBox">
@@ -226,84 +247,102 @@
                       <el-progress
                         :show-text="false"
                         :stroke-width="4"
-                        :percentage="airAnalysis.length>0?airAnalysis[0].num:0"
+                        :percentage="
+                          airAnalysis.length > 0 ? airAnalysis[0].num : 0
+                        "
                         :color="'#1FCCC6'"
                       ></el-progress>
                       <span class="type type1">{{
-                        $t("message.environmentalOverview.typeList")[0]
+                        $t('message.environmentalOverview.typeList')[0]
                       }}</span>
                       <span
-                        >{{airAnalysis.length>0?airAnalysis[0].num:0}}{{ $t("message.environmentalOverview.Days") }}</span
+                        >{{ airAnalysis.length > 0 ? airAnalysis[0].num : 0
+                        }}{{ $t('message.environmentalOverview.Days') }}</span
                       >
                     </li>
                     <li>
                       <el-progress
                         :show-text="false"
                         :stroke-width="4"
-                        :percentage="airAnalysis.length>0?airAnalysis[1].num:0"
+                        :percentage="
+                          airAnalysis.length > 0 ? airAnalysis[1].num : 0
+                        "
                         :color="'#FFBB38'"
                       ></el-progress>
                       <span class="type type2">{{
-                        $t("message.environmentalOverview.typeList")[1]
+                        $t('message.environmentalOverview.typeList')[1]
                       }}</span>
                       <span
-                        >{{airAnalysis.length>0?airAnalysis[1].num:0}}{{ $t("message.environmentalOverview.Days") }}</span
+                        >{{ airAnalysis.length > 0 ? airAnalysis[1].num : 0
+                        }}{{ $t('message.environmentalOverview.Days') }}</span
                       >
                     </li>
                     <li>
                       <el-progress
                         :show-text="false"
                         :stroke-width="4"
-                        :percentage="airAnalysis.length>0?airAnalysis[2].num:0"
+                        :percentage="
+                          airAnalysis.length > 0 ? airAnalysis[2].num : 0
+                        "
                         :color="'#FE7A18'"
                       ></el-progress>
                       <span class="type type3">{{
-                        $t("message.environmentalOverview.typeList")[2]
+                        $t('message.environmentalOverview.typeList')[2]
                       }}</span>
                       <span
-                        >{{airAnalysis.length>0?airAnalysis[2].num:0}}{{ $t("message.environmentalOverview.Days") }}</span
+                        >{{ airAnalysis.length > 0 ? airAnalysis[2].num : 0
+                        }}{{ $t('message.environmentalOverview.Days') }}</span
                       >
                     </li>
                     <li>
                       <el-progress
                         :show-text="false"
                         :stroke-width="4"
-                        :percentage="airAnalysis.length>0?airAnalysis[3].num:0"
+                        :percentage="
+                          airAnalysis.length > 0 ? airAnalysis[3].num : 0
+                        "
                         :color="'#7718FE'"
                       ></el-progress>
                       <span class="type type4">{{
-                        $t("message.environmentalOverview.typeList")[3]
+                        $t('message.environmentalOverview.typeList')[3]
                       }}</span>
                       <span
-                        >{{airAnalysis.length>0?airAnalysis[3].num:0}}{{ $t("message.environmentalOverview.Days") }}</span
+                        >{{ airAnalysis.length > 0 ? airAnalysis[3].num : 0
+                        }}{{ $t('message.environmentalOverview.Days') }}</span
                       >
                     </li>
                     <li>
                       <el-progress
                         :show-text="false"
                         :stroke-width="4"
-                        :percentage="airAnalysis.length>0?airAnalysis[4].num:0"
+                        :percentage="
+                          airAnalysis.length > 0 ? airAnalysis[4].num : 0
+                        "
                         :color="'#890EA1'"
                       ></el-progress>
                       <span class="type type5">{{
-                        $t("message.environmentalOverview.typeList")[4]
+                        $t('message.environmentalOverview.typeList')[4]
                       }}</span>
                       <span
-                        >{{airAnalysis.length>0?airAnalysis[4].num:0}}{{ $t("message.environmentalOverview.Days") }}</span
+                        >{{ airAnalysis.length > 0 ? airAnalysis[4].num : 0
+                        }}{{ $t('message.environmentalOverview.Days') }}</span
                       >
                     </li>
                     <li>
                       <el-progress
                         :show-text="false"
                         :stroke-width="4"
-                        :percentage="airAnalysis.length>0?airAnalysis[5].num:0"
+                        :percentage="
+                          airAnalysis.length > 0 ? airAnalysis[5].num : 0
+                        "
                         :color="'#970C0C'"
                       ></el-progress>
                       <span class="type type6">{{
-                        $t("message.environmentalOverview.typeList")[5]
+                        $t('message.environmentalOverview.typeList')[5]
                       }}</span>
                       <span
-                        >{{airAnalysis.length>0?airAnalysis[5].num:0}}{{ $t("message.environmentalOverview.Days") }}</span
+                        >{{ airAnalysis.length > 0 ? airAnalysis[5].num : 0
+                        }}{{ $t('message.environmentalOverview.Days') }}</span
                       >
                     </li>
                   </ul>
@@ -316,11 +355,15 @@
       <div class="bottom">
         <div class="blockBox fullHeight">
           <div class="title">
-            <p class="e6">{{ $t("message.environmentalOverview.e6") }}</p>
+            <p class="e6">{{ $t('message.environmentalOverview.e6') }}</p>
           </div>
           <div class="blockContent">
             <div class="operateBar">
-              <span class="greenBtn " @click="switchingData(1)" :class="checked==1?'active':''">
+              <span
+                class="greenBtn"
+                @click="switchingData(1)"
+                :class="checked == 1 ? 'active' : ''"
+              >
                 <img
                   v-for="item in 4"
                   :key="item"
@@ -328,9 +371,13 @@
                   class="arrow"
                   src="@/assets/images/greenOverview/arrow.png"
                 />
-                {{ $t("message.environmentalOverview.e6SelectArr")[0].title }}
+                {{ $t('message.environmentalOverview.e6SelectArr')[0].title }}
               </span>
-              <span class="greenBtn" @click="switchingData(2)" :class="checked==2?'active':''">
+              <span
+                class="greenBtn"
+                @click="switchingData(2)"
+                :class="checked == 2 ? 'active' : ''"
+              >
                 <img
                   v-for="item in 4"
                   :key="item"
@@ -338,9 +385,13 @@
                   class="arrow"
                   src="@/assets/images/greenOverview/arrow.png"
                 />
-                {{ $t("message.environmentalOverview.e6SelectArr")[1].title }}
+                {{ $t('message.environmentalOverview.e6SelectArr')[1].title }}
               </span>
-              <span class="greenBtn" @click="switchingData(3)" :class="checked==3?'active':''">
+              <span
+                class="greenBtn"
+                @click="switchingData(3)"
+                :class="checked == 3 ? 'active' : ''"
+              >
                 <img
                   v-for="item in 4"
                   :key="item"
@@ -348,9 +399,13 @@
                   class="arrow"
                   src="@/assets/images/greenOverview/arrow.png"
                 />
-                {{ $t("message.environmentalOverview.e6SelectArr")[2].title }}
+                {{ $t('message.environmentalOverview.e6SelectArr')[2].title }}
               </span>
-              <span class="greenBtn" @click="switchingData(4)" :class="checked==4?'active':''">
+              <span
+                class="greenBtn"
+                @click="switchingData(4)"
+                :class="checked == 4 ? 'active' : ''"
+              >
                 <img
                   v-for="item in 4"
                   :key="item"
@@ -358,22 +413,25 @@
                   class="arrow"
                   src="@/assets/images/greenOverview/arrow.png"
                 />
-                {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
+                {{ $t('message.environmentalOverview.e6SelectArr')[3].title }}
               </span>
             </div>
             <div class="near24hChart" ref="near24hChart"></div>
-            <div class="placeholderBox placeholderBox2" v-if="dustData_24.length==0">
-              <img src="@/assets/images/noData3.png" alt="" srcset="">
+            <div
+              class="placeholderBox placeholderBox2"
+              v-if="dustData_24.length == 0"
+            >
+              <img src="@/assets/images/noData3.png" alt="" srcset="" />
               <p>
                 <!-- 暂无数据 -->
-                    {{$t('message.projectInfo.noData')}}
+                {{ $t('message.projectInfo.noData') }}
               </p>
             </div>
           </div>
         </div>
         <div class="blockBox fullHeight">
           <div class="title">
-            <p class="e7">{{ $t("message.environmentalOverview.e7") }}</p>
+            <p class="e7">{{ $t('message.environmentalOverview.e7') }}</p>
           </div>
           <div class="blockContent weatherBox">
             <!-- {{weatherList}} -->
@@ -411,7 +469,7 @@
               <p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
               <div style="height: 6%"></div>
               <p>
-                {{ $t("message.environmentalOverview.wind_power") }}
+                {{ $t('message.environmentalOverview.wind_power') }}
                 {{ item.win_speed }}
               </p>
             </div>
@@ -422,120 +480,133 @@
   </div>
 </template>
 <script>
-import echarts from 'echarts4';;
+import echarts from 'echarts4'
 // import { loadWeather } from "@/assets/js/util";
-import closePage from "@/components/closePage"
+import closePage from '@/components/closePage'
 import {
   environmentDevList,
   selectNewEnvironmentAlarmListApi,
   getRealTimeDustNoiseDataApi,
-  getAirQualityStatisticsApi,sprayDevListApi,
-  selectDustNoiseDataApi,getWeatherDataApi,getCurrentDayAirQualityApi,
+  getAirQualityStatisticsApi,
+  sprayDevListApi,
+  selectDustNoiseDataApi,
+  getWeatherDataApi,
+  getCurrentDayAirQualityApi,
   sprayOperateDataApi
-} from "@/assets/js/api/environmentManage";
+} from '@/assets/js/api/environmentManage'
 export default {
-  components:{closePage},
+  components: { closePage },
   data() {
     return {
       devList: [],
       currentDevDetail: {},
-      projectSn: "",
+      projectSn: '',
       weatherInfo: {
-        data: [],
+        data: []
       },
       alarmList: [],
       plantCap: {
-                crc: '--',
-                humidity: '--',
-                noise: '--',
-                plateHumidity: '--',
-                plateTemperature: '--',
-                pm10: '--',
-                pm25: '--',
-                pressure: '--',
-                temperature: '--',
-                tsp: '--',
-                voltage: '--',
-                winddirectionName: '--',
-                windspeed: '--',
-              },
-      checked:1,
-      airType:1,
-      airAnalysis:[],
-      weatherList:[],
-      todayAir:{
-        analysisData:'0',
-        analysisType:'优'
+        crc: '--',
+        humidity: '--',
+        noise: '--',
+        plateHumidity: '--',
+        plateTemperature: '--',
+        pm10: '--',
+        pm25: '--',
+        pressure: '--',
+        temperature: '--',
+        tsp: '--',
+        voltage: '--',
+        winddirectionName: '--',
+        windspeed: '--',
+        noise: '--'
       },
-      sprayDevList:[],
-      dustData_24:[]
-    };
+      checked: 1,
+      airType: 1,
+      airAnalysis: [],
+      weatherList: [],
+      todayAir: {
+        analysisData: '0',
+        analysisType: '优'
+      },
+      sprayDevList: [],
+      dustData_24: []
+    }
   },
   created() {
-    this.projectSn = this.$store.state.projectSn;
+    this.projectSn = this.$store.state.projectSn
+    this.createCenterChart()
   },
   mounted() {
     this.loadWeather()
     this.getAirQualityToday()
-    this.getAlarmList();
-    this.getAirQualityStatistics();
-    this.$nextTick(()=>{
-      this.getDevList();
+    this.getAlarmList()
+    this.getAirQualityStatistics()
+    this.$nextTick(() => {
+      this.getDevList()
     })
     this.getSprayDevList()
   },
   methods: {
-    sprayOperate(deviceId,operateType){
-      sprayOperateDataApi({ projectSn: this.$store.state.projectSn,operateType:operateType,deviceId:deviceId }).then((res) => {
-        this.sprayDevList=res.result
-      });
+    sprayOperate(deviceId, operateType) {
+      sprayOperateDataApi({
+        projectSn: this.$store.state.projectSn,
+        operateType: operateType,
+        deviceId: deviceId
+      }).then((res) => {
+        this.sprayDevList = res.result
+      })
     },
-    getSprayDevList(){
-      sprayDevListApi({ projectSn: this.$store.state.projectSn }).then((res) => {
-        this.sprayDevList=res.result
-      });
+    getSprayDevList() {
+      sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(
+        (res) => {
+          this.sprayDevList = res.result
+        }
+      )
     },
-    loadWeather(){
-     var _this = this
-      getWeatherDataApi({cityid:''}).then((res) => {
-        var json = JSON.parse(res.result);
+    loadWeather() {
+      var _this = this
+      getWeatherDataApi({ cityid: '' }).then((res) => {
+        var json = JSON.parse(res.result)
         var list = json.data
-        // 
-        list.forEach((element,index) => {
+        //
+        list.forEach((element, index) => {
           // element.week=getWeek(element.date)
           // element.date = element.date.substring(5,element.date.length)
-          element.url = require('@/assets/images/weather/'+element.wea_img+'.png')
+          element.url = require('@/assets/images/weather/' +
+            element.wea_img +
+            '.png')
           this.weatherList.push(element)
-        });
-      });
+        })
+      })
     },
     //空气质量分析--当天
     getAirQualityToday() {
       let data = {
-        projectSn: this.projectSn,
-      };
+        projectSn: this.projectSn
+      }
       getCurrentDayAirQualityApi(data).then((res) => {
         console.log(res)
         if (res.code == 200) {
-          if(res.result){
-            this.todayAir = res.result;
+          if (res.result) {
+            this.todayAir = res.result
           }
         }
         this.createdEcharts3()
-      });
+      })
     },
     //空气质量分析--统计
     getAirQualityStatistics() {
       let data = {
-        type:this.airType,
-        projectSn: this.projectSn,
-      };
+        type: this.airType,
+        projectSn: this.projectSn
+      }
       getAirQualityStatisticsApi(data).then((res) => {
         console.log(res)
         if (res.code == 200) {
-          this.airAnalysis = res.result;
+          this.airAnalysis = res.result
         }
-      });
+      })
     },
 
     //获取环境设备列表--环境监测实时数据--下拉
@@ -543,300 +614,293 @@ export default {
       environmentDevList({ projectSn: this.$store.state.projectSn }).then(
         (result) => {
           // console.log('列表', result)
-          this.devList = result.result;
-          if(result.result.length>0){
-            this.currentDevDetail = result.result[0];
-            this.getRealTimeDustNoiseData();
-            this.selectDustNoiseData();
-          }else{
-            this.createCenterChart();
+          this.devList = result.result
+          if (result.result.length > 0) {
+            this.currentDevDetail = result.result[0]
+            this.getRealTimeDustNoiseData()
+            this.selectDustNoiseData()
+          } else {
+            this.createCenterChart()
           }
-
-
         }
-      );
+      )
     },
 
     //切换环境单位
     realTimeMonitor(value) {
-      this.currentDevDetail = value;
-      this.getRealTimeDustNoiseData();
-          this.selectDustNoiseData();
-
+      this.currentDevDetail = value
+      this.getRealTimeDustNoiseData()
+      this.selectDustNoiseData()
     },
 
     //获取环境设备详情数据
     getRealTimeDustNoiseData() {
       let data = {
         deviceId: this.currentDevDetail.deviceId,
-        projectSn: this.projectSn,
-      };
+        projectSn: this.projectSn
+      }
       getRealTimeDustNoiseDataApi(data).then((res) => {
         if (res.code == 200) {
-          if(res.result){
-            this.plantCap = res.result;
-          }else{
-            this.plantCap =  {
-                crc: '--',
-                humidity: '--',
-                noise: '--',
-                plateHumidity: '--',
-                plateTemperature: '--',
-                pm10: '--',
-                pm25: '--',
-                pressure: '--',
-                temperature: '--',
-                tsp: '--',
-                voltage: '--',
-                winddirectionName: '--',
-                windspeed: '--',
-              }
+          if (res.result) {
+            this.plantCap = res.result
+          } else {
+            this.plantCap = {
+              crc: '--',
+              humidity: '--',
+              noise: '--',
+              plateHumidity: '--',
+              plateTemperature: '--',
+              pm10: '--',
+              pm25: '--',
+              pressure: '--',
+              temperature: '--',
+              tsp: '--',
+              voltage: '--',
+              winddirectionName: '--',
+              windspeed: '--',
+              noise: '--'
+            }
           }
 
-          this.createCenterChart();
+          this.createCenterChart()
         }
-      });
+      })
     },
     //获取报警列表
     getAlarmList() {
       let data = {
-        projectSn: this.projectSn,
-      };
+        projectSn: this.projectSn
+      }
       selectNewEnvironmentAlarmListApi(data).then((res) => {
         if (res.code == 200) {
-          this.alarmList = res.result;
+          this.alarmList = res.result
         }
-      });
+      })
     },
     //近24小时数据
     selectDustNoiseData() {
-      var now = new Date();
-      var yy = now.getFullYear(); //年
-      var mm = now.getMonth() + 1; //月
-      var dd = now.getDate(); //日
-      var time = yy + "-";
-      if (mm < 10) time += "0";
-      time += mm + "-";
-      if (dd < 10) time += "0";
-      time += dd;
+      var now = new Date()
+      var yy = now.getFullYear() //年
+      var mm = now.getMonth() + 1 //月
+      var dd = now.getDate() //日
+      var time = yy + '-'
+      if (mm < 10) time += '0'
+      time += mm + '-'
+      if (dd < 10) time += '0'
+      time += dd
       let data = {
-        searchDate:time,
-        projectSn:this.projectSn,
-        deviceId: this.currentDevDetail.deviceId,
+        searchDate: time,
+        projectSn: this.projectSn,
+        deviceId: this.currentDevDetail.deviceId
       }
-      selectDustNoiseDataApi(data).then(res=>{
+      selectDustNoiseDataApi(data).then((res) => {
         // console.log(res)
-        this.dustData_24=res.result
-        this.createdEcharts2();
+        this.dustData_24 = res.result
+        this.createdEcharts2()
       })
     },
 
     //切换  24小时数据
-    switchingData(value){
-      this.checked=value;
-      this.createdEcharts2();
+    switchingData(value) {
+      this.checked = value
+      this.createdEcharts2()
     },
-
-
     //环境监测实时数据--图表
     createCenterChart() {
-      let centerChart = echarts.init(this.$refs.centerChart);
+      let centerChart = echarts.init(this.$refs.centerChart)
       console.log('this.$refs.centerChart')
       console.log(this.$refs.centerChart.offsetHeight)
-      centerChart.clear();
-      let detailData = this.$t("message.environmentalOverview.plantCap");
+      centerChart.clear()
+      let detailData = this.$t('message.environmentalOverview.plantCap')
       for (let i = 0; i < detailData.length; i++) {
         if (detailData[i].id == 1) {
-          detailData[i].value = this.plantCap.humidity;
+          detailData[i].value = this.plantCap.humidity //湿度
         } else if (detailData[i].id == 2) {
-          detailData[i].value = this.plantCap.pm25;
+          detailData[i].value = this.plantCap.pm25 //pm2.5
         } else if (detailData[i].id == 3) {
-          detailData[i].value = this.plantCap.temperature;
+          detailData[i].value = this.plantCap.temperature //温度
         } else if (detailData[i].id == 4) {
-          detailData[i].value = this.plantCap.tsp;
+          detailData[i].value = this.plantCap.tsp //tsp
         } else if (detailData[i].id == 5) {
-          detailData[i].value = this.plantCap.windspeed;
+          detailData[i].value = this.plantCap.windspeed //风速
         } else if (detailData[i].id == 6) {
-          detailData[i].value = this.plantCap.pm10;
+          detailData[i].value = this.plantCap.pm10 // pm10
         } else if (detailData[i].id == 7) {
-          detailData[i].value = this.plantCap.winddirectionName;
+          detailData[i].value = this.plantCap.winddirectionName
         } else if (detailData[i].id == 8) {
-          detailData[i].value = this.plantCap.pressure?this.plantCap.pressure:'--';
+          detailData[i].value = this.plantCap.pressure
+            ? this.plantCap.pressure
+            : '--'
+        } else if (detailData[i].id == 9) {
+          detailData[i].value = this.plantCap.noise
         }
-        detailData[i].value+=detailData[i].unit
+        detailData[i].value += detailData[i].unit
       }
-      var plantCap = detailData;
+      var plantCap = detailData
+
       var datalist = [
         {
-          offset: [50, 50],
-          symbolSize: 100,
-          opacity: 0.95,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "#29c0fb",
-            },
-            {
-              offset: 1,
-              color: "#2dc5b9",
-            },
-          ]),
-        },
-        {
-          offset: [30, 80],
-          symbolSize: 95,
-          opacity: 0.95,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "#35d17e",
-            },
-            {
-              offset: 1,
-              color: "#49ddb2",
-            },
-          ]),
-        },
-        {
-          offset: [15, 35],
-          symbolSize: 90,
-          opacity: 0.95,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "#e5d273",
-            },
-            {
-              offset: 1,
-              color: "#e4a37f",
-            },
-          ]),
-        },
-        {
-          offset: [44, 16],
+          offset: [60, 50],
           symbolSize: 70,
           opacity: 0.95,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#277aec",
+              color: '#29c0fb'
             },
             {
               offset: 1,
-              color: "#57c5ec",
-            },
-          ]),
+              color: '#2dc5b9'
+            }
+          ])
         },
         {
-          offset: [80, 58],
+          offset: [45, 80],
           symbolSize: 65,
           opacity: 0.95,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#e54948",
+              color: '#35d17e'
             },
             {
               offset: 1,
-              color: "#f08456",
+              color: '#49ddb2'
+            }
+          ])
+        },
+        {
+          offset: [20, 35],
+          symbolSize: 65,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#e5d273'
             },
-          ]),
+            {
+              offset: 1,
+              color: '#e4a37f'
+            }
+          ])
+        },
+        {
+          offset: [45, 20],
+          symbolSize: 65,
+          opacity: 0.95,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#277aec'
+            },
+            {
+              offset: 1,
+              color: '#57c5ec'
+            }
+          ])
+        },
+        {
+          offset: [95, 45],
+          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: 80,
+          symbolSize: 65,
           opacity: 0.7,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#11c46e",
+              color: '#11c46e'
             },
             {
               offset: 1,
-              color: "#f08456",
-            },
-          ]),
+              color: '#f08456'
+            }
+          ])
         },
         {
-          offset: [64, 80],
+          offset: [78, 82],
           symbolSize: 65,
           opacity: 0.68,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            // {
-            //   offset: 0,
-            //   color: "#ff4141",
-            // },
-            // {
-            //   offset: 1,
-            //   color: "#ff8989",
-            // },
             {
               offset: 0,
-              color: "#6367E0",
+              color: '#6367E0'
             },
             {
               offset: 1,
-              color: "#B667F0",
-            },
-          ]),
+              color: '#B667F0'
+            }
+          ])
         },
-        // {
-        //   offset: [90, 75],
-        //   symbolSize: 50,
-        //   opacity: 0.68,
-        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //     {
-        //       offset: 0,
-        //       color: "#6367E0",
-        //     },
-        //     {
-        //       offset: 1,
-        //       color: "#B667F0",
-        //     },
-        //   ]),
-        // },
-      ];
-      var datas = [];
+        {
+          offset: [25, 65],
+          symbolSize: 65,
+          opacity: 0.68,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#6367E0'
+            },
+            {
+              offset: 1,
+              color: '#fe6c7f'
+            }
+          ])
+        }
+      ]
+      var datas = []
       for (var i = 0; i < plantCap.length; i++) {
-        var item = plantCap[i];
-        var itemToStyle = datalist[i];
+        var item = plantCap[i]
+        var itemToStyle = datalist[i]
         datas.push({
-          name: item.name + "\n" + item.value,
+          name: item.value + '\n' + item.name,
           value: itemToStyle.offset,
           symbolSize: itemToStyle.symbolSize,
           label: {
             normal: {
               textStyle: {
-                fontSize: 18,
+                fontSize: 16,
                 fontWeight: 800,
-                lineHeight: 22,
-              },
-            },
+                lineHeight: 22
+              }
+            }
           },
           itemStyle: {
             normal: {
               color: itemToStyle.color,
-              opacity: itemToStyle.opacity,
-            },
-          },
-        });
+              opacity: itemToStyle.opacity
+            }
+          }
+        })
       }
       let option1 = {
         grid: {
           show: false,
           top: 10,
-          bottom: 10,
+          bottom: 10
         },
         xAxis: [
           {
             gridIndex: 0,
-            type: "value",
+            type: 'value',
             show: false,
             min: 0,
             max: 100,
-            nameLocation: "middle",
-            nameGap: 5,
-          },
+            nameLocation: 'middle',
+            nameGap: 5
+          }
         ],
         yAxis: [
           {
@@ -844,13 +908,13 @@ export default {
             min: 0,
             show: false,
             max: 100,
-            nameLocation: "middle",
-            nameGap: 30,
-          },
+            nameLocation: 'middle',
+            nameGap: 30
+          }
         ],
         series: [
           {
-            type: "effectScatter",
+            type: 'effectScatter',
             // symbol: 'circle',
             // symbolSize: 120,
 
@@ -858,78 +922,78 @@ export default {
             label: {
               normal: {
                 show: true,
-                formatter: "{b}",
-                color: "#fff",
+                formatter: '{b}',
+                color: '#fff',
                 textStyle: {
-                  fontSize: "20",
-                },
-              },
+                  fontSize: '20'
+                }
+              }
             },
             itemStyle: {
               normal: {
-                color: "#00acea",
-              },
+                color: '#00acea'
+              }
             },
-            data: datas,
-          },
-        ],
-      };
-      centerChart.setOption(option1);
-      window.onresize = centerChart.resize;
+            data: datas
+          }
+        ]
+      }
+      centerChart.setOption(option1)
+      window.onresize = centerChart.resize
     },
     //创建图表 --- 环境监测
     createdEcharts3() {
-      let that = this;
+      let that = this
       //项目进度
-      let monitor = echarts.init(this.$refs.monitor);
-      monitor.clear();
+      let monitor = echarts.init(this.$refs.monitor)
+      monitor.clear()
       // this.$t("message.projectSummary.actor")
-      var text;
+      var text
       var option = {
         title: {
           show: true,
           text: this.todayAir.analysisType,
-          x: "49%",
-          y: "55%",
+          x: '49%',
+          y: '55%',
           z: 8,
-          textAlign: "center",
+          textAlign: 'center',
           textStyle: {
-            color: " rgb(147,169,205) ",
-            fontSize: 12,
-          },
+            color: ' rgb(147,169,205) ',
+            fontSize: 12
+          }
         },
         series: [
           {
-            type: "gauge",
-            radius: "62%",
+            type: 'gauge',
+            radius: '62%',
             splitNumber: 50,
             axisLine: {
               lineStyle: {
                 color: [
-                  [this.todayAir.analysisData / 500, "#1FCCC6"],
-                  [1, "#111F42"],
+                  [this.todayAir.analysisData / 500, '#1FCCC6'],
+                  [1, '#111F42']
                 ],
-                width: 6,
-              },
+                width: 6
+              }
             },
             axisLabel: {
-              show: false,
+              show: false
             },
             axisTick: {
-              show: false,
+              show: false
             },
             splitLine: {
-              show: false,
+              show: false
             },
 
             pointer: {
-              show: false,
-            },
+              show: false
+            }
           },
           {
-            type: "gauge",
+            type: 'gauge',
             //  center: ['20%', '50%'],
-            radius: "80%",
+            radius: '80%',
             min: 0, //最小刻度
             max: 500, //最大刻度
             splitNumber: 50, //刻度数量
@@ -939,69 +1003,69 @@ export default {
               show: true,
               lineStyle: {
                 width: 2,
-                color: [[1, "rgba(0,0,0,0)"]],
-              },
+                color: [[1, 'rgba(0,0,0,0)']]
+              }
             },
             //仪表盘轴线
             axisLabel: {
               show: true,
-              color: "#4d5bd1",
+              color: '#4d5bd1',
               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";
+                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: 50,
               lineStyle: {
-                color: "#386EC1",
-                width: 2,
+                color: '#386EC1',
+                width: 2
               },
-              length: -4,
+              length: -4
             }, //刻度样式
             splitLine: {
               show: true,
               length: -10,
               lineStyle: {
-                color: "#386EC1",
-              },
+                color: '#386EC1'
+              }
             }, //分隔线样式
             detail: {
-              show: false,
+              show: false
             },
             pointer: {
-              show: false,
-            },
+              show: false
+            }
           },
           /*内部*/
           {
-            type: "pie",
-            radius: ["0", "35%"],
-            center: ["50%", "50%"],
+            type: 'pie',
+            radius: ['0', '35%'],
+            center: ['50%', '50%'],
             z: 8,
             hoverAnimation: false,
             data: [
@@ -1009,135 +1073,136 @@ export default {
                 value: this.todayAir.analysisData,
                 itemStyle: {
                   normal: {
-                    color: "#141920",
-                  },
+                    color: '#141920'
+                  }
                 },
                 label: {
                   normal: {
                     rich: {
                       a: {
-                        color: "#41BAE2",
-                        align: "center",
+                        color: '#41BAE2',
+                        align: 'center',
                         fontSize: 31,
-                        fontWeight: "bold",
-                      },
+                        fontWeight: 'bold'
+                      }
                     },
                     formatter: function (params) {
-                      return "{a|" + params.value + "}";
+                      return '{a|' + params.value + '}'
                     },
-                    position: "center",
-                    show: true,
-                  },
+                    position: 'center',
+                    show: true
+                  }
                 },
                 labelLine: {
-                  show: false,
-                },
-              },
-            ],
+                  show: false
+                }
+              }
+            ]
           },
           /*外一层*/
           {
-            type: "pie",
-            radius: "40%",
+            type: 'pie',
+            radius: '40%',
             startAngle: 220,
             endAngle: -40,
             hoverAnimation: false,
-            center: ["50%", "50%"],
+            center: ['50%', '50%'],
             avoidLabelOverlap: false,
             label: {
-              show: false,
+              show: false
             },
             labelLine: {
-              show: false,
+              show: false
             },
             data: [
               {
-                value: 1,
-              },
+                value: 1
+              }
             ],
             itemStyle: {
               normal: {
-                color: "rgba(69, 161, 255,0.8)",
-              },
-            },
+                color: 'rgba(69, 161, 255,0.8)'
+              }
+            }
           },
           //外二层圈
           {
-            type: "pie",
-            radius: "45%",
-            center: ["50%", "50%"],
+            type: 'pie',
+            radius: '45%',
+            center: ['50%', '50%'],
             avoidLabelOverlap: false,
             z: 0,
             hoverAnimation: false,
             label: {
-              show: false,
+              show: false
             },
             labelLine: {
-              show: false,
+              show: false
             },
             data: [
               {
-                value: 1,
-              },
+                value: 1
+              }
             ],
             itemStyle: {
               normal: {
-                color: "rgba(69, 161, 255,0.5)",
-              },
-            },
+                color: 'rgba(69, 161, 255,0.5)'
+              }
+            }
           },
           //最外层圈
           {
-            type: "pie",
-            radius: "50%",
-            center: ["50%", "50%"],
+            type: 'pie',
+            radius: '50%',
+            center: ['50%', '50%'],
             avoidLabelOverlap: false,
             z: 0,
             hoverAnimation: false,
             label: {
-              show: false,
+              show: false
             },
             labelLine: {
-              show: false,
+              show: false
             },
             data: [
               {
-                value: 1,
-              },
+                value: 1
+              }
             ],
             itemStyle: {
               normal: {
-                color: "rgba(69, 161, 255,0.3)",
-              },
-            },
-          },
-        ],
-      };
-      monitor.setOption(option);
+                color: 'rgba(69, 161, 255,0.3)'
+              }
+            }
+          }
+        ]
+      }
+      monitor.setOption(option)
     },
     //创建图表 --- 近24小时数据
     createdEcharts2() {
-      var xdata=[],ydata=[]
-      let monitor = echarts.init(this.$refs.near24hChart);
-      monitor.clear();
-      this.dustData_24.forEach(element => {
-        // 
+      var xdata = [],
+        ydata = []
+      let monitor = echarts.init(this.$refs.near24hChart)
+      monitor.clear()
+      this.dustData_24.forEach((element) => {
+        //
         xdata.push(element.uploadDate.split(' ')[1])
         switch (this.checked) {
           case 1:
             ydata.push(element.pm25)
-            break;
+            break
           case 2:
             ydata.push(element.pm10)
-            break;
+            break
           case 3:
             ydata.push(element.windspeed)
-            break;
+            break
           case 4:
             ydata.push(element.noise)
-            break;
+            break
         }
-      });
+      })
       // [
       //       "00:00",
       //       "01:00",
@@ -1195,78 +1260,78 @@ export default {
           top: 20,
           left: 50,
           bottom: 20,
-          right: 20,
+          right: 20
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
             lineStyle: {
-              color: "rgba(255,255,255,0.1)",
-            },
-          },
+              color: 'rgba(255,255,255,0.1)'
+            }
+          }
         },
-        color: ["rgba(6,248,179,0.8)"],
+        color: ['rgba(6,248,179,0.8)'],
         xAxis: {
-          type: "category",
+          type: 'category',
           data: xdata,
           boundaryGap: false,
           axisTick: {
-            show: false,
+            show: false
           },
           axisLine: {
-            show: false,
+            show: false
           },
           axisLabel: {
-            color: "rgba(255,255,255,0.3)",
-          },
+            color: 'rgba(255,255,255,0.3)'
+          }
         },
         yAxis: {
-          type: "value",
+          type: 'value',
           axisTick: {
-            show: false,
+            show: false
           },
           axisLine: {
-            show: false,
+            show: false
           },
           splitLine: {
             lineStyle: {
-              type: "dashed",
-              color: "rgba(255,255,255,0.1)",
-            },
+              type: 'dashed',
+              color: 'rgba(255,255,255,0.1)'
+            }
           },
           axisLabel: {
-            color: "rgba(255,255,255,0.3)",
-          },
+            color: 'rgba(255,255,255,0.3)'
+          }
         },
         series: [
           {
             data: ydata,
-            type: "line",
+            type: 'line',
             smooth: true,
             lineStyle: {
-              width: 2,
+              width: 2
             },
-            symbol: "none",
+            symbol: 'none',
             areaStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: "rgba(42,137,96,0.7)",
+                  color: 'rgba(42,137,96,0.7)'
                 },
                 {
                   offset: 1,
-                  color: "#13151C",
-                },
-              ]),
-            },
-          },
-        ],
-      };
-      monitor.setOption(option);
-    },
-  },
-};
+                  color: '#13151C'
+                }
+              ])
+            }
+          }
+        ]
+      }
+      monitor.setOption(option)
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
-@import url("./style.less");
+@import url('./style.less');
 </style>