zhgdyun/src/views/projectAdmin/fourEngin/carbon/centerTop.vue

<template>
  <div class="containerBox">
    <div class="right1">
      <span @click="change(0)" :class="number == 0 ?  'newStyle':'btn_anniu'">实时数据</span>
      <span @click="change(1)" :class="number == 1 ?  'newStyle':'btn_anniu'">零碳展厅</span>
    </div>
    <div class="right3">
      <div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div> 
      <div class="right4" v-show="1 === number">
        <!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> -->
         <videoPhoto class="video"></videoPhoto>
        </div> 

    </div>
  </div>
</template>

<script>
import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
// import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
import { environmentDevList } from "@/assets/js/api/environmentManage";
import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
import echarts from "echarts4";
export default {
  components:{
  videoPhoto
  },
  data() {
    return {
      number: 0,
      devList: [],
      currentDevDetail: {},
      onlineDevNum: 0,
      offlineDevNum: 0,
      realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
      plantCap: {
        crc: "--",
        humidity: "--",
        noise: "--",
        plateHumidity: "--",
        plateTemperature: "--",
        pm10: "--",
        pm25: "--",
        pressure: "--",
        temperature: "--",
        tsp: "--",
        voltage: "--",
        winddirectionName: "--",
        windspeed: "--"
      }
    }
  },
    mounted() {
    this.createCenterChart();
    // this.$nextTick(() => {
    //   this.getDevList();
    // });
  },
  methods: {
    getDevList() {
      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
        result => {
          console.log("列表", result);
          this.devList = result.result;
          console.log(this.devList);
          if (result.result.length > 0) {
            this.currentDevDetail = result.result[0];

            this.$emit('custClick',this.currentDevDetail)

            this.offlineDevNum = 0;
            this.onlineDevNum = 0;
            this.devList.forEach(element => {
              if (element.isClosed == 2) {
                this.offlineDevNum++;
              } else {
                this.onlineDevNum++;
              }
            });
            this.getRealTimeDustNoiseData();
            // this.realTimeDustNoiseDataTime = setInterval( () => {
            //   this.getRealTimeDustNoiseData();
            // },5000)
            // this.selectDustNoiseData();  近24H
          } else {
            // this.createCenterChart();
          }
        }
      );
    },
    /** 查询 */
    handleQuery() {
      this.$nextTick(() => {
        this.getDevList()
      })
    },
    // // 切换设备
    realTimeMonitor(value) {
      if (this.realTimeDustNoiseDataTime) {
        clearInterval(this.realTimeDustNoiseDataTime);
      }
      console.log("id换了吗", value);
      this.currentDevDetail = value;

      this.getRealTimeDustNoiseData();
      // this.realTimeDustNoiseDataTime = setInterval( () => {
      //   this.getRealTimeDustNoiseData();
      // },5000)
      // this.getRealTimeDustNoiseData();

      // this.selectDustNoiseData();  近24H
    },
    //获取环境设备详情数据
    getRealTimeDustNoiseData() {
      let data = {
        deviceId: this.currentDevDetail.deviceId,
        projectSn: this.$store.state.projectSn
      };
      console.log(data);
      getRealTimeDustNoiseDataApi(data).then(res => {
        if (res.code == 200) {
          console.log(res.result);
          if (res.result != null) {
            this.plantCap = res.result;
          } else {
            this.plantCap = {
              crc: "--",
              humidity: "--",
              noise: "--",
              plateHumidity: "--",
              plateTemperature: "--",
              pm10: "--",
              pm25: "--",
              pressure: "--",
              temperature: "--",
              tsp: "--",
              voltage: "--",
              winddirectionName: "--",
              windspeed: "--"
            };
          }
          this.createCenterChart();
        }
      });
    },
    //展示数据/视频播放切换
     change: function(index) {
      console.log(111);
      this.number = index 
    },
    
    //环境监测实时数据--图表
    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");
      for (let i = 0; i < detailData.length; i++) {
        if (detailData[i].id == 1) {
          detailData[i].value = this.plantCap.humidity; //湿度
        } else if (detailData[i].id == 2) {
          detailData[i].value = this.plantCap.pm25; //pm2.5
        } else if (detailData[i].id == 3) {
          detailData[i].value = this.plantCap.temperature; //温度
        } else if (detailData[i].id == 4) {
          detailData[i].value = this.plantCap.tsp; //tsp
        } else if (detailData[i].id == 5) {
          detailData[i].value = this.plantCap.windspeed; //风速
        } else if (detailData[i].id == 6) {
          detailData[i].value = this.plantCap.pm10; // pm10
        } else if (detailData[i].id == 7) {
          detailData[i].value = this.plantCap.winddirectionName;
        } else if (detailData[i].id == 8) {
          detailData[i].value = this.plantCap.pressure
            ? this.plantCap.pressure
            : "--";
        }
        detailData[i].value += detailData[i].unit;
      }
      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],
          symbolSize: 70,
          opacity: 0.95,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#35d17e"
            },
            {
              offset: 1,
              color: "#49ddb2"
            }
          ])
        },
        {
          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],
          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,
          opacity: 0.7,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#11c46e"
            },
            {
              offset: 1,
              color: "#f08456"
            }
          ])
        },
        {
          offset: [68, 82],
          symbolSize: 65,
          opacity: 0.68,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#6367E0"
            },
            {
              offset: 1,
              color: "#B667F0"
            }
          ])
        }
      ];
      var datas = [];
      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
          name: item.value + "\n" + item.name,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize,
          label: {
            normal: {
              textStyle: {
                fontSize: 16,
                fontWeight: 800,
                lineHeight: 22
              }
            }
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity
            }
          }
        });
      }
      let option1 = {
        grid: {
          show: false,
          top: 10,
          bottom: 10
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "value",
            show: false,
            min: 0,
            max: 100,
            nameLocation: "middle",
            nameGap: 5
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: "middle",
            nameGap: 30
          }
        ],
        series: [
          {
            type: "effectScatter",
            // symbol: 'circle',
            // symbolSize: 120,

            hoverAnimation: true,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20"
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#00acea"
              }
            },
            data: datas
          }
        ]
      };
      centerChart.setOption(option1);
      window.onresize = centerChart.resize;
    }
  },
  watch:{
      'plantCap':{
        handler(newVal, oldVal) {
          if (newVal != oldVal) {
            this.createCenterChart();
          }
        }
      }
    },
  
}
</script>

<style lang="less" scoped>
.containerBox {
  width: 100%;
  height: 100%;
  margin-top: 3%;

  .right1 {
    width: 100%;
    height: 10%;
    display: flex;
    margin-left: 35%;
    
   
    .btn_anniu {
      display: inline-block;
      // margin-top: 5px;
      // padding-top: 15px;
      width: 140px;
      height: 60px;
      text-align: center;
      background-image: url(../assets/images/common/bg_water.png);
      background-repeat: no-repeat;
      background-size: 100%;
      font-size: 16px;
      line-height: 60px;
      margin: 0 10px 0 0;
      color: #fff;
      font-size: 24px;

    }

    .newStyle {
      display: inline-block;
      // margin-top: 5px;
      // padding-top: 15px; num_bg.png
      width: 140px;
      height: 60px;
      text-align: center;
      background-image: url(../assets/images/common/num_bg.png);
      background-repeat: no-repeat;
      background-size: 100%;
      font-size: 24px;
      line-height: 60px;
      margin: 0 10px 0 0;
      color: #5ce2f6;
    }
  }
  .right3 {
     width: 100%;
    height: 80%;
    margin-top: 25px;
     .centerChart {
    width: 100%;
    height: calc(100% - 22px);
    }
   
    #right2{
       width: 100%;
    height: 100%;
    
  }
  .right4{
    width: 100%;
    height: 100%;
    .video{
      margin-bottom: -50px;
    display: inline-block;
    margin-left: 25px;    
    width: 850px;
      height: 550px;
    }
  }
    }
    

}
</style>