From 2c0873c6b5f6503fd39a32ed615ed0d8f9129ab2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Wed, 10 Aug 2022 16:51:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=E7=AE=A1=E7=90=86):=E8=B6=8B=E5=8A=BF=E5=9B=BE?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=20=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/envirManage/leftBottom.vue            | 312 +++++++++++-------
 1 file changed, 189 insertions(+), 123 deletions(-)

diff --git a/src/views/projectAdmin/jlw/envirManage/leftBottom.vue b/src/views/projectAdmin/jlw/envirManage/leftBottom.vue
index 855e5b28..7d480969 100644
--- a/src/views/projectAdmin/jlw/envirManage/leftBottom.vue
+++ b/src/views/projectAdmin/jlw/envirManage/leftBottom.vue
@@ -3,71 +3,64 @@
   <div class="contentBox">
     <div class="titleTxt">{{ title }}</div>
     <div class="operateBar">
-            <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>
-    <div class="myChart" ref="myChart" />
+      <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>
+    
+    <div class="noData" v-if="dustData_24.length == 0">
+      <img src="@/assets/images/noData3.png" alt srcset />
+      <p>
+        <!-- 暂无数据 -->
+        {{$t('message.dataBoard.nodata')}}
+      </p>
+    </div>
+    <!-- <div class="myChart" ref="myChart" /> -->
   </div>
 </template>
 
 <script>
 import echarts from "echarts4";
 import {
-  getEnvironmentWarningInfo
+  getEnvironmentWarningInfo,
+  selectDustNoiseDataApi
 } from "@/assets/js/api/environmentManage";
 export default {
   props: {
@@ -78,95 +71,161 @@ export default {
   },
   data() {
     return {
-      data : [90, 85, 100, 96, 100, 150, 190, 125 ],
-      checked:1,
-      dustData_24:[],
+      checked: 1,
+      dustData_24: [],
+      currentDevDetail: {},
+      pm10Warning:'',
+      pm25Warning:'',
+      noiseWarning:'',
+      windSpeedWarning:''
     };
   },
   mounted() {
     this.initMyChart();
+    this.selectDustNoiseData();
   },
   methods: {
-    getEnvironmentWarningInfoApi(){
+    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();
-      })
+        // console.log('---打印看一下',res.result);
+        if (res.result != null) {
+          this.pm10Warning = res.result.pm10Warning;
+          this.pm25Warning = res.result.pm25Warning;
+          this.noiseWarning = res.result.noiseWarning;
+          this.windSpeedWarning = res.result.windSpeed;
+          this.initMyChart();
+        }
+      });
     },
+
+    //近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;
+      let data = {
+        searchDate: time,
+        projectSn: this.projectSn,
+        deviceId: this.currentDevDetail.deviceId
+      };
+      selectDustNoiseDataApi(data).then(res => {
+        console.log(res.result);
+        this.getEnvironmentWarningInfoApi();
+        console.log("最近24小时", res);
+        this.dustData_24 = res.result;
+      });
+    },
+
     //切换  24小时数据
     switchingData(value) {
       this.checked = value;
+      this.selectDustNoiseData();
       this.initMyChart();
     },
     initMyChart() {
+      var xdata = [],
+        ydata = [];
       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;
-      }
+      let Alert;
+      let AlertNumber;
+      myChart.clear();
+      this.dustData_24.forEach(element => {
+          xdata.push(element.uploadDate.split(" ")[1]);
+          switch (this.checked) {
+            case 1:
+              ydata.push(element.pm25);
+              Alert =
+                "pm25" +
+                this.$t("message.dataBoard.guard") +
+                "(" +
+                this.pm25Warning +
+                ")";
+              AlertNumber = this.pm25Warning;
+              break;
+            case 2:
+              ydata.push(element.pm10);
+              Alert =
+                "pm10" +
+                this.$t("message.dataBoard.guard") +
+                "(" +
+                this.pm10Warning +
+                ")";
+              AlertNumber = this.pm10Warning;
+              break;
+            case 3:
+              ydata.push(element.windspeed);
+              Alert =
+                this.$t("message.dataBoard.windSpeed") +
+                this.$t("message.dataBoard.guard") +
+                "(" +
+                this.windSpeedWarning +
+                ")";
+              AlertNumber = this.windSpeedWarning;
+              break;
+            case 4:
+              ydata.push(element.noise);
+              Alert =
+                this.$t("message.dataBoard.noise") +
+                this.$t("message.dataBoard.guard") +
+                "(" +
+                this.noiseWarning +
+                ")";
+              AlertNumber = this.noiseWarning;
+              break;
+          }
+      });
+      
+      // switch (this.checked) {
+      //    case 1:
+      //    this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
+      //    break;
+      //    case 2:
+      //    this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
+      //    break;
+      //    case 3:
+      //    this.data = [100, 96, 100, 150,90, 85,  190, 125 ]
+      //    break;
+      //    case 4:
+      //    this.data = [90,  96, 100, 85, 100,150, 190, 125 ]
+      //    break;
+      // }
       const option = {
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: [
-            "01:00",
-            "02:00",
-            "03:00",
-            "04:00",
-            "05:00",
-            "06:00",
-            "07:00",
-            "08:00"
-          ]
+          // data: [
+          //   "01:00",
+          //   "02:00",
+          //   "03:00",
+          //   "04:00",
+          //   "05:00",
+          //   "06:00",
+          //   "07:00",
+          //   "08:00"
+          // ]
+          data: xdata
         },
         yAxis: {
           type: "value",
           max: 300,
+          // max: function() {
+          //   let maxArr = ydata;
+          //   let maxNum = Math.max.apply(null, maxArr);
+          //   if (AlertNumber > maxNum) {
+          //     return AlertNumber;
+          //   }
+          // },
           splitNumber: 4,
           axisLabel: {
             // y轴文字的配置
@@ -192,8 +251,8 @@ export default {
                 }
               }
             },
-            showSymbol:false,
-            data: this.data,
+            showSymbol: false,
+            data: ydata,
             type: "line",
             smooth: true,
             areaStyle: {
@@ -224,9 +283,16 @@ export default {
     width: 100%;
     height: 90%;
   }
-  .operateBar{
+  .operateBar {
     margin: 20px 0px 0px 20px;
   }
+  .noData{
+    margin-left: 40%;
+    margin-top: 10%;
+    p{
+      margin-left: 5%;
+    }
+  }
 }
 </style>