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

<template>
  <!-- 趋势图 -->
  <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="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,
  selectDustNoiseDataApi
} from "@/assets/js/api/environmentManage";
export default {
  props: {
    title: {
      type: String,
      default: "default title"
    }
  },
  data() {
    return {
      checked: 1,
      dustData_24: [],
      currentDevDetail: {},
      pm10Warning:'',
      pm25Warning:'',
      noiseWarning:'',
      windSpeedWarning:''
    };
  },
  mounted() {
    this.initMyChart();
    this.selectDustNoiseData();
  },
  methods: {
    getEnvironmentWarningInfoApi() {
      // console.log('执行');
      getEnvironmentWarningInfo({
        deviceId: this.currentDevDetail.deviceId,
        projectSn: this.projectSn,
        warningType: 1
      }).then(res => {
        // 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);
      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: 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轴文字的配置
            textStyle: {
              color: "#92a1bc"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#777f8a"
            }
          }
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: "#6ae6ef",
                lineStyle: {
                  color: "#6ae6ef"
                }
              }
            },
            showSymbol: false,
            data: ydata,
            type: "line",
            smooth: true,
            areaStyle: {
              color: "#1d4254"
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.contentBox {
  width: 100%;
  height: 100%;
  border: 1px solid #0081c3;

  .titleTxt {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 5px;
  }
  .myChart {
    width: 100%;
    height: 90%;
  }
  .operateBar {
    margin: 20px 0px 0px 20px;
  }
  .noData{
    margin-left: 40%;
    margin-top: 10%;
    p{
      margin-left: 5%;
    }
  }
}
</style>