<!--在线统计-->
<template>
  <div class="iotHome-onlineStatistics">
    <div class="statistics-title-box">
      <p>设备在线/离线统计</p>
    </div>
    <div class="statistics-box">
      <div id="online-statistics-box" v-show="showType">

      </div>
      <p v-show="!showType" class="null-p">暂无数据</p>
    </div>
    <div class="position-item-box">
      <el-date-picker
        v-model="timeValue"
        @change="changeTime"
        type="date"
        style="width:140px;"
        clearable
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
  import { iotStatisticsDeviceOnline } from "@/api/iotDevice/index";
  export default {
    name: 'onlineStatistics',
    data(){
      return{
        showType:false,
        timeValue:null,
        timeList:[],
        onlineList:[],
        offList:[],
      }
    },
    created(){
    },
    mounted(){
      this.iotStatisticsDeviceOnline();
    },
    methods:{
      changeTime(val){
        this.iotStatisticsDeviceOnline(val)
      },
      iotStatisticsDeviceOnline(val){
        let obj = {};
        if(val){
          obj.endDate = this.timeValue;
        }
        iotStatisticsDeviceOnline(obj).then(response => {
          if(response.data[0]){
            this.$set(this,'showType',true);
            let timeList = [];
            let onlineList = [];
            let offList = [];
            for(let i=0;i<response.data.length;i++){
              timeList.push(response.data[i].checkDate)
              onlineList.push(response.data[i].onlineNum?response.data[i].onlineNum:0)
              offList.push(response.data[i].offlineNum?response.data[i].offlineNum:0)
            }
            this.$set(this,'timeList',timeList);
            this.$set(this,'onlineList',onlineList);
            this.$set(this,'offList',offList);
            this.$nextTick(()=>{
              this.eChartsDraw();
            })
          }else{
            this.$set(this,'showType',false);
          }
        });
      },
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('online-statistics-box'));
        let option = {
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "7%",
            right: "5%",
            top: "15%",
            bottom:"15%",
          },
          legend: {
            data: ["在线设备", "离线设备"],
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              boundaryGap: true,
              data: this.timeList,
            },
          ],
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "在线设备",
              type: "line",
              smooth: true,
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: '#7a7aff',
                  lineStyle: {
                    color: '#7a7aff',
                    width: 4,
                  },
                  areaStyle: {
                    color: 'rgba(255, 255, 255,0)',
                  },
                },
              },
              data: this.onlineList,
            },
            {
              name: "离线设备",
              type: "line",
              smooth: true,
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: '#00AEFF',
                  lineStyle: {
                    color: '#00AEFF',
                    width: 4,
                  },
                  areaStyle: {
                    color: 'rgba(255, 255, 255,0)',
                  },
                },
              },
              data: this.offList,
            },
          ],
        };
        myChart.setOption(option);
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHome-onlineStatistics{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    .statistics-title-box{
      display: flex;
      padding:20px;
      line-height:20px;
      font-size:16px;
      color:#333;
    }
    .statistics-box{
      #online-statistics-box{
        height:220px;
        width:1000px;
        overflow: hidden;
      }
      .null-p{
        text-align: center;
        color:#999;
        font-size:14px;
        line-height:150px;
      }
    }
    .position-item-box{
      position: absolute;
      top:20px;
      right:50px;
    }
  }
</style>
