湖里大屏(环境管理):趋势图切换

src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/leftBottom.vue

@@ -2,7 +2,7 @@
   <!-- 趋势图 -->
   <div class="contentBox">
     <div class="titleTxt">{{ title }}</div>
-    <!-- <div class="operateBar">
+    <div class="operateBar">
             <span
               class="greenBtn"
               @click="switchingData(1)"
@@ -59,13 +59,16 @@
               />
               {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
             </span>
-          </div> -->
+          </div>
     <div class="myChart" ref="myChart" />
   </div>
 </template>
 
 <script>
 import echarts from "echarts4";
+import {
+  getEnvironmentWarningInfo
+} from "@/assets/js/api/environmentManage";
 export default {
   props: {
     title: {
@@ -75,26 +78,77 @@ export default {
   },
   data() {
     return {
-      data : [90, 85, 100, 96, 100, 150, 190, 125 ] 
+      data : [90, 85, 100, 96, 100, 150, 190, 125 ],
+      checked:1,
+      dustData_24:[],
     };
   },
   mounted() {
     this.initMyChart();
   },
   methods: {
-    changeData(type){
-      if(type == 1){
-        this.data =  [110, 65, 210, 96, 100, 160, 130, 220]
-      }else if(type == 2){
-       this.data =  [90, 85, 100, 96, 100, 150, 190, 125]
-      }else if(type == 3 ){
-        this.data =  [100, 160, 130, 220, 90, 85, 100, 96,]
-      }else{
-        this.data =  [130, 220, 90, 85, 100, 65, 210, 96]
-      }
+    getEnvironmentWarningInfoApi(){
+      // console.log('执行');
+      getEnvironmentWarningInfo({
+        deviceId: this.currentDevDetail.deviceId,
+        projectSn: this.projectSn,
+        warningType: 1
+      }).then(res => {
+        console.log(res.result);
+        this.pm10Warning = res.result.pm10Warning
+        this.pm25Warning = res.result.pm25Warning
+        this.noiseWarning = res.result.noiseWarning
+        this.windSpeedWarning = res.result.windSpeed
+        this.createdEcharts2();
+      })
+    },
+    //切换  24小时数据
+    switchingData(value) {
+      this.checked = value;
+      this.initMyChart();
     },
     initMyChart() {
       const myChart = echarts.init(this.$refs.myChart);
+      // this.dustData_24.forEach((element) => {
+      //   // 
+      //   xdata.push(element.uploadDate.split(" ")[1]);
+      //   switch (this.checked) {
+      //     case 1:
+      //       ydata.push(element.pm25);
+      //       Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')'
+      //       AlertNumber = this.pm25Warning
+      //       break;
+      //     case 2:
+      //       ydata.push(element.pm10);
+      //       Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')'
+      //       AlertNumber = this.pm10Warning
+      //       break;
+      //     case 3:
+      //       ydata.push(element.windspeed);
+      //       Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')'
+      //       AlertNumber = this.windSpeedWarning
+      //       break;
+      //     case 4:
+      //       ydata.push(element.noise);
+      //       Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')'
+      //       AlertNumber = this.noiseWarning
+      //       break;
+      //   }
+      // });
+      switch (this.checked) {
+         case 1:
+         this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
+         break;
+         case 2:
+         this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
+         break;
+         case 3:
+         this.data = [100, 96, 100, 150,90, 85,  190, 125 ]
+         break;
+         case 4:
+         this.data = [90,  96, 100, 85, 100,150, 190, 125 ]
+         break;
+      }
       const option = {
         xAxis: {
           type: "category",
@@ -167,7 +221,10 @@ export default {
   }
   .myChart {
     width: 100%;
-    height: 100%;
+    height: 90%;
+  }
+  .operateBar{
+    margin: 20px 0px 0px 20px;
   }
 }
 </style>