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 class="dropDown" v-show="0 === number">
         <el-select v-model="Equipment" >
         <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </div>
      <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 {
       options: 
       [
        {
          value: '设备一',
          label: '设备一'
        }, 
        {
          value: '设备二',
          label: '设备二'
        }, 
        {
          value: '设备三',
          label: '设备三'
        }, 
       
        ],
        Equipment: '设备一',
      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;
      }
    }
    .dropDown {
      float: right;
      text-align: center;
      margin-right: 40px;
      margin-top: -20px;
      width: 100px;
      height: 20px;
      line-height: 20px;
      background-color: #305c6d;
      background-image: url(../assets/images/common/bg_sby.png);
      background-repeat: no-repeat;
      background-size: 100%;
      font-size: 8px;
     ::v-deep .el-select{
        width: 100px;
        height: 20px;
      }
     ::v-deep .el-input__inner {
      background-color: #3e7c86;
      color: #fff;
      }
     ::v-deep .el-select__caret {
       color: #fff;
     }
    }
  }
}
</style>