湖里大屏(环境管理):趋势图模块 接口对接

src/views/projectAdmin/jlw/envirManage/leftBottom.vue

@@ -3,11 +3,7 @@
   <div class="contentBox">
     <div class="titleTxt">{{ title }}</div>
     <div class="operateBar">
-            <span
+      <span class="greenBtn" @click="switchingData(1)" :class="checked == 1 ? 'active' : ''">
-              class="greenBtn"
-              @click="switchingData(1)"
-              :class="checked == 1 ? 'active' : ''"
-            >
         <img
           v-for="item in 4"
           :key="item"
@@ -17,11 +13,7 @@
         />
         {{ $t("message.environmentalOverview.e6SelectArr")[0].title }}
       </span>
-            <span
+      <span class="greenBtn" @click="switchingData(2)" :class="checked == 2 ? 'active' : ''">
-              class="greenBtn"
-              @click="switchingData(2)"
-              :class="checked == 2 ? 'active' : ''"
-            >
         <img
           v-for="item in 4"
           :key="item"
@@ -31,11 +23,7 @@
         />
         {{ $t("message.environmentalOverview.e6SelectArr")[1].title }}
       </span>
-            <span
+      <span class="greenBtn" @click="switchingData(3)" :class="checked == 3 ? 'active' : ''">
-              class="greenBtn"
-              @click="switchingData(3)"
-              :class="checked == 3 ? 'active' : ''"
-            >
         <img
           v-for="item in 4"
           :key="item"
@@ -45,11 +33,7 @@
         />
         {{ $t("message.environmentalOverview.e6SelectArr")[2].title }}
       </span>
-            <span
+      <span class="greenBtn" @click="switchingData(4)" :class="checked == 4 ? 'active' : ''">
-              class="greenBtn"
-              @click="switchingData(4)"
-              :class="checked == 4 ? 'active' : ''"
-            >
         <img
           v-for="item in 4"
           :key="item"
@@ -60,14 +44,23 @@
         {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
       </span>
     </div>
-    <div class="myChart" ref="myChart" />
+    
+    <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,13 +71,18 @@ export default {
   },
   data() {
     return {
-      data : [90, 85, 100, 96, 100, 150, 190, 125 ],
       checked: 1,
       dustData_24: [],
+      currentDevDetail: {},
+      pm10Warning:'',
+      pm25Warning:'',
+      noiseWarning:'',
+      windSpeedWarning:''
     };
   },
   mounted() {
     this.initMyChart();
+    this.selectDustNoiseData();
   },
   methods: {
     getEnvironmentWarningInfoApi() {
@@ -94,79 +92,140 @@ export default {
         projectSn: this.projectSn,
         warningType: 1
       }).then(res => {
-        console.log(res.result);
+        // console.log('---打印看一下',res.result);
-        this.pm10Warning = res.result.pm10Warning
+        if (res.result != null) {
-        this.pm25Warning = res.result.pm25Warning
+          this.pm10Warning = res.result.pm10Warning;
-        this.noiseWarning = res.result.noiseWarning
+          this.pm25Warning = res.result.pm25Warning;
-        this.windSpeedWarning = res.result.windSpeed
+          this.noiseWarning = res.result.noiseWarning;
-        this.createdEcharts2();
+          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) => {
+      let Alert;
-      //   // 
+      let AlertNumber;
-      //   xdata.push(element.uploadDate.split(" ")[1]);
+      myChart.clear();
-      //   switch (this.checked) {
+      this.dustData_24.forEach(element => {
-      //     case 1:
+          xdata.push(element.uploadDate.split(" ")[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 ]
+              ydata.push(element.pm25);
+              Alert =
+                "pm25" +
+                this.$t("message.dataBoard.guard") +
+                "(" +
+                this.pm25Warning +
+                ")";
+              AlertNumber = this.pm25Warning;
               break;
             case 2:
-         this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
+              ydata.push(element.pm10);
+              Alert =
+                "pm10" +
+                this.$t("message.dataBoard.guard") +
+                "(" +
+                this.pm10Warning +
+                ")";
+              AlertNumber = this.pm10Warning;
               break;
             case 3:
-         this.data = [100, 96, 100, 150,90, 85,  190, 125 ]
+              ydata.push(element.windspeed);
+              Alert =
+                this.$t("message.dataBoard.windSpeed") +
+                this.$t("message.dataBoard.guard") +
+                "(" +
+                this.windSpeedWarning +
+                ")";
+              AlertNumber = this.windSpeedWarning;
               break;
             case 4:
-         this.data = [90,  96, 100, 85, 100,150, 190, 125 ]
+              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: [
+          // data: [
-            "01:00",
+          //   "01:00",
-            "02:00",
+          //   "02:00",
-            "03:00",
+          //   "03:00",
-            "04:00",
+          //   "04:00",
-            "05:00",
+          //   "05:00",
-            "06:00",
+          //   "06:00",
-            "07:00",
+          //   "07:00",
-            "08: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轴文字的配置
@@ -193,7 +252,7 @@ export default {
               }
             },
             showSymbol: false,
-            data: this.data,
+            data: ydata,
             type: "line",
             smooth: true,
             areaStyle: {
@@ -227,6 +286,13 @@ export default {
   .operateBar {
     margin: 20px 0px 0px 20px;
   }
+  .noData{
+    margin-left: 40%;
+    margin-top: 10%;
+    p{
+      margin-left: 5%;
+    }
+  }
 }
 </style>