<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 >
         <el-option
       v-for="(item,index) in devList"
       :key="index"
       @click="realTimeMonitor(item)">
    </el-option>
  </el-select> -->
    <el-popover placement="bottom" width="70" trigger="click">
            <ul class="devList">
              <li
                :class="{ active: item.deviceId == currentDevDetail.deviceId }"
                v-for="(item, index) in devList"
                :key="index"
                @click="realTimeMonitor(item)"
              >
                {{ item.deviceName }}
              </li>
            </ul>
            <p class="greenBtn selectDev" slot="reference">
              <img
                v-for="item in 4"
                :key="item"
                :class="'arrow' + item"
                class="arrow"
              />
              {{ currentDevDetail.deviceName }}
              <i class="el-icon-arrow-down"></i>
            </p>
          </el-popover>
      </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,
  selectNewEnvironmentAlarmListApi,
  getRealTimeDustNoiseDataApi,
  getAirQualityStatisticsApi,sprayDevListApi,
  selectDustNoiseDataApi,getWeatherDataApi,getCurrentDayAirQualityApi,
  sprayOperateDataApi
} from "@/assets/js/api/environmentManage";
import echarts from 'echarts4'
export default {
  components: {
    videoPhoto
  },
  data() {
    return {

      number: 0,
      devList: [],
      currentDevDetail: {},
      sprayDevList:[],
       alarmList: [],
      onlineDevNum: 0,
      offlineDevNum: 0,
      realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
      plantCap: {
        crc: '--',
        humidity: '--',
        noise: '--',
        plateHumidity: '--',
        plateTemperature: '--',
        pm10: '--',
        pm25: '--',
        pressure: '--',
        temperature: '--',
        tsp: '--',
        voltage: '--',
        winddirectionName: '--',
        windspeed: '--'
      }
    }
  },
  created(){
   this.getDevList()
  },

  mounted() {
    this.createCenterChart()
    this.getRealTimeDustNoiseData()
    this.realTimeMonitor()
    // this.getDevList()
    // this.$nextTick(() => {
    //   this.getDevList();
    // });
  },
  methods: {
   
  //获取环境设备列表--环境监测实时数据--下拉
    getDevList() {
      console.log('环境下拉列表进来了吗--------');
      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          console.log('环境监测下拉列表', result)
          this.devList = result.result;
          if(result.result.length>0){
            this.currentDevDetail = result.result[0];
            // this.getRealTimeDustNoiseData();
            // this.selectDustNoiseData();
          }else{
            // this.createCenterChart();
          }


        }
      );
    },

      //近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)
        this.dustData_24=res.result
        this.createdEcharts2();
      })
    },
      //获取报警列表
    getAlarmList() {
      let data = {
        projectSn: this.projectSn,
      };
      selectNewEnvironmentAlarmListApi(data).then((res) => {
        if (res.code == 200) {
          this.alarmList = res.result;
        }
      });
    },
     sprayOperate(deviceId,operateType){
      sprayOperateDataApi({ projectSn: this.$store.state.projectSn,operateType:operateType,deviceId:deviceId }).then((res) => {
        this.sprayDevList=res.result
      });
    },
     getSprayDevList(){
      sprayDevListApi({ projectSn: this.$store.state.projectSn }).then((res) => {
        this.sprayDevList=res.result
      });
    },
    /** 查询 */
    handleQuery() {
      this.$nextTick(() => {
        this.getDevList()
      })
    },
    // // 切换设备
    realTimeMonitor(value) {
       this.currentDevDetail = value;
      this.getRealTimeDustNoiseData();
          this.selectDustNoiseData();
      // 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
    },
     //近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)
        this.dustData_24=res.result
        this.createdEcharts2();
      })
    },
    //获取环境设备详情数据
    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%;
    font-size: 16px;

    .btn_anniu {
      cursor: pointer;
      display: inline-block;
      // margin-top: 5px;
      // padding-top: 15px;
      width: 120px;
      height: 55px;
      text-align: center;
      background-image: url(../assets/images/carbon/border1.png);
      background-repeat: no-repeat;
      background-size: 100%;
      font-size: 16px;
      line-height: 55px;
      margin: 0 10px 0 0;
      color: #fff;
      // font-size: 24px;
    }

    .newStyle {
      display: inline-block;
      // margin-top: 5px;
      // padding-top: 15px; num_bg.png
      width: 120px;
      height: 55px;
      text-align: center;
      background-image: url(../assets/images/carbon/border2.png);
      background-repeat: no-repeat;
      background-size: 100%;
      font-size: 16px;
      line-height: 55px;
      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: 30px;
      line-height: 30px;
      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;
    //  }
    }
    .devList {
       width: 100px;
      height: 20px;
  li {
     width: 100px;
      height: 20px;
    cursor: pointer;
    text-align: center;
    line-height: 22px;
    &.active,
    &:hover {
      color: rgba(6, 248, 179, 0.8);
    }
  }
}
  }
}
</style>
