<template>
  <div style="width: 100%;height: 100%">
    <div style="width: 100%;background-color: transparent;height: 2%">
      <div class="filter">
        <div class="startTime">
          <span class="timeText">起始时间</span>
          <el-date-picker
            v-model="startTime"
            :clearable="false"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="endTime">
          <span class="timeText">截止时间</span>
          <el-date-picker
            v-model="endTime"
            :clearable="false"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div>
          <el-select v-model="windTowerInfoId" placeholder="请选择">
            <el-option
              v-for="item in windTowerInfos"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="timeQuery">
          <el-button @click="queryData()" :loading="loading" size="small" >查询</el-button>
        </div>
        <div class="startTime">
          <span class="timeText"/>
          <span class="timeText"/>
          <span class="timeText">选择月份查询</span>
          <el-date-picker
            v-model="startMonthTime"
            :clearable="false"
            type="month"
            value-format="timestamp"
            placeholder="按月选择日期">
          </el-date-picker>
        </div>
        <div class="timeQuery">
          <el-button @click="queryMonthData()" :loading="loading" size="small" >月查询按钮</el-button>
        </div>
      </div>
    </div>
    <div class="flex-container">
      <div class="windTowerItem one" @click="clickChart('1')" style="transform: translate(-32.4%,-33.5%) scale(0.3)">
        <wdCharts :wdData = this.wdData :wd50=this.wd50 :wd70=this.wd70 :thFormat=this.thFormat></wdCharts>
      </div>
      <div class="windTowerItem two" @click="clickChart('2')" style="transform: translate(-32.4%,0.5%) scale(0.3)">
        <wfCharts :wfData = this.wfData :thFormat=this.thFormat></wfCharts>
      </div>
      <div class="windTowerItem three" @click="clickChart('3')" style="transform: translate(-32.4%,34.5%) scale(0.3)">
        <v-table :queryTime=this.queryTime :thFormat=this.thFormat @sendLoading="getLoadingFormTable"></v-table>
      </div>
      <div class="windTowerItem four active" @click="clickChart('4')" style="transform: translate(30%, 0) scale(0.98)">
        <wsCharts :wsData = this.wsData :thFormat=this.thFormat></wsCharts>
      </div>
    </div>
  </div>

</template>

<script>
    import table from './table'
    import wfCharts from './wfCharts'
    import wsCharts from './wsCharts'
    import wdCharts from './wdCharts'
    import resize from '../../../components/Charts/mixins/resize'
    export default {
      mixins: [resize],
      data() {
        return {
          items: [],
          queryStartTime:"",
          queryEndTime:"",
          startMonthTime:'',
          startTime: new Date(new Date().toLocaleDateString()).getTime(),
          endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
          queryTime:'',
          windTowerInfos: [],
          windTowerInfoId: '',
          windTowerInfoName: '',
          drawData: [],
          times:[],
          wsData:{
            wsCharts:{},
            times:{}
          },
          wdData:{},
          wfData:{},
          wd50:"无",
          wd70:"无",
          attr:{},
          thFormat:[/*
            {key:"tInst",value:"温度瞬时值（℃）"},{key:"tMax",value:"温度最大值（℃）"},{key:"tMin",value:"温度最小值（℃）"},{key:"tAve",value:"温度平均值（℃）"},{key:"tSta",value:"温度标准差（℃）"},
            {key:"rhInst",value:"湿度瞬时值（%）"},{key:"rhMax",value:"湿度最大值（%）"},{key:"rhMin",value:"湿度最小值（%）"},{key:"rhAve",value:"湿度平均值（%）"},{key:"rhSta",value:"湿度标准差（%）"},
            {key:"paInst",value:"气压瞬时值（KPa）"},{key:"paMax",value:"气压最大值（KPa）"},{key:"paMin",value:"气压最小值（KPa）"},{key:"paAve",value:"气压平均值（KPa）"},{key:"paSta",value:"气压标准差（KPa）"},
            {key:"wsInst10",value:"10米风速瞬时值（m/s）"},{key:"wsMax10",value:"10米风速最大值（m/s）"},{key:"wsMin10",value:"10米风速最小值（m/s）"},{key:"wsAve10",value:"10米风速平均值（m/s）"},{key:"wsSta10",value:"10米风速标准差（m/s）"},
            {key:"wdInst10",value:"10米风向瞬时值（°）"},{key:"wdMax10",value:"10米风向最大值（°）"},{key:"wdMin10",value:"10米风向最小值（°）"},{key:"wdAve10",value:"10米风向平均值（°）"},{key:"wdSta10",value:"10米风向标准差（°）"},
            {key:"wsInst30",value:"30米风速瞬时值（m/s）"},{key:"wsMax30",value:"30米风速最大值（m/s）"},{key:"wsMin30",value:"30米风速最小值（m/s）"},{key:"wsAve30",value:"30米风速平均值（m/s）"},{key:"wsSta30",value:"30米风速标准差（m/s）"},
            {key:"wdInst30",value:"30米风向瞬时值（°）"},{key:"wdMax30",value:"30米风向最大值（°）"},{key:"wdMin30",value:"30米风向最小值（°）"},{key:"wdAve30",value:"30米风向平均值（°）"},{key:"wdSta30",value:"30米风向标准差（°）"},
            {key:"wsInst40",value:"40米风速瞬时值（m/s）"},{key:"wsMax40",value:"40米风速最大值（m/s）"},{key:"wsMin40",value:"30米风速最小值（m/s）"},{key:"wsAve40",value:"40米风速平均值（m/s）"},{key:"wsSta40",value:"40米风速标准差（m/s）"},
            {key:"wdInst40",value:"40米风向瞬时值（°）"},{key:"wdMax40",value:"40米风向最大值（°）"},{key:"wdMin40",value:"30米风向最小值（°）"},{key:"wdAve40",value:"40米风向平均值（°）"},{key:"wdSta40",value:"40米风向标准差（°）"},
            {key:"wsInst50",value:"50米风速瞬时值（m/s）"},{key:"wsMax50",value:"50米风速最大值（m/s）"},{key:"wsMin50",value:"50米风速最小值（m/s）"},{key:"wsAve50",value:"50米风速平均值（m/s）"},{key:"wsSta50",value:"50米风速标准差（m/s）"},
            {key:"wdInst50",value:"50米风向瞬时值（°）"},{key:"wdMax50",value:"50米风向最大值（°）"},{key:"wdMin50",value:"50米风向最小值（°）"},{key:"wdAve50",value:"50米风向平均值（°）"},{key:"wdSta50",value:"50米风向标准差（°）"},
            {key:"wsInst60",value:"60米风速瞬时值（m/s）"},{key:"wsMax60",value:"60米风速最大值（m/s）"},{key:"wsMin60",value:"60米风速最小值（m/s）"},{key:"wsAve60",value:"60米风速平均值（m/s）"},{key:"wsSta60",value:"60米风速标准差（m/s）"},
            {key:"wdInst60",value:"60米风向瞬时值（°）"},{key:"wdMax60",value:"60米风向最大值（°）"},{key:"wdMin60",value:"60米风向最小值（°）"},{key:"wdAve60",value:"60米风向平均值（°）"},{key:"wdSta60",value:"60米风向标准差（°）"},
            {key:"wsInst70",value:"70米风速瞬时值（m/s）"},{key:"wsMax70",value:"70米风速最大值（m/s）"},{key:"wsMin70",value:"70米风速最小值（m/s）"},{key:"wsAve70",value:"70米风速平均值（m/s）"},{key:"wsSta70",value:"70米风速标准差（m/s）"},
            {key:"wdInst70",value:"70米风向瞬时值（°）"},{key:"wdMax70",value:"70米风向最大值（°）"},{key:"wdMin70",value:"70米风向最小值（°）"},{key:"wdAve70",value:"70米风向平均值（°）"},{key:"wdSta70",value:"70米风向标准差（°）"},
            {key:"wsInst80",value:"80米风速瞬时值（m/s）"},{key:"wsMax80",value:"80米风速最大值（m/s）"},{key:"wsMin80",value:"80米风速最小值（m/s）"},{key:"wsAve80",value:"80米风速平均值（m/s）"},{key:"wsSta80",value:"80米风速标准差（m/s）"},
            {key:"wdInst80",value:"80米风向瞬时值（°）"},{key:"wdMax80",value:"80米风向最大值（°）"},{key:"wdMin80",value:"80米风向最小值（°）"},{key:"wdAve80",value:"80米风向平均值（°）"},{key:"wdSta80",value:"80米风向标准差（°）"},
            {key:"wsInst90",value:"90米风速瞬时值（m/s）"},{key:"wsMax90",value:"90米风速最大值（m/s）"},{key:"wsMin90",value:"90米风速最小值（m/s）"},{key:"wsAve90",value:"90米风速平均值（m/s）"},{key:"wsSta90",value:"90米风速标准差（m/s）"},
            {key:"wdInst90",value:"90米风向瞬时值（°）"},{key:"wdMax90",value:"90米风向最大值（°）"},{key:"wdMin90",value:"90米风向最小值（°）"},{key:"wdAve90",value:"90米风向平均值（°）"},{key:"wdSta90",value:"90米风向标准差（°）"},
            {key:"wsInst100",value:"100米风速瞬时值（m/s）"},{key:"wsMax100",value:"100米风速最大值（m/s）"},{key:"wsMin100",value:"100米风速最小值（m/s）"},{key:"wsAve100",value:"100米风速平均值（m/s）"},{key:"wsSta100",value:"100米风速标准差（m/s）"},
            {key:"wdInst100",value:"100米风向瞬时值（°）"},{key:"wdMax100",value:"100米风向最大值（°）"},{key:"wdMin100",value:"100米风向最小值（°）"},{key:"wdAve100",value:"100米风向平均值（°）"},{key:"wdSta100",value:"100米风向标准差（°）"},
            {key:"wsInst110",value:"110米风速瞬时值（m/s）"},{key:"wsMax110",value:"110米风速最大值（m/s）"},{key:"wsMin110",value:"110米风速最小值（m/s）"},{key:"wsAve110",value:"110米风速平均值（m/s）"},{key:"wsSta110",value:"110米风速标准差（m/s）"},
            {key:"wdInst110",value:"110米风向瞬时值（°）"},{key:"wdMax110",value:"110米风向最大值（°）"},{key:"wdMin110",value:"110米风向最小值（°）"},{key:"wdAve110",value:"110米风向平均值（°）"},{key:"wdSta110",value:"110米风向标准差（°）"},
            {key:"wsInst120",value:"120米风速瞬时值（m/s）"},{key:"wsMax120",value:"120米风速最大值（m/s）"},{key:"wsMin120",value:"120米风速最小值（m/s）"},{key:"wsAve120",value:"120米风速平均值（m/s）"},{key:"wsSta120",value:"120米风速标准差（m/s）"},
            {key:"wdInst120",value:"120米风向瞬时值（°）"},{key:"wdMax120",value:"120米风向最大值（°）"},{key:"wdMin120",value:"120米风向最小值（°）"},{key:"wdAve120",value:"120米风向平均值（°）"},{key:"wdSta120",value:"120米风向标准差（°）"},
            {key:"wsInstHubHeight",value:"风机轮毂高度风速瞬时值"},{key:"wsMaxHubHeight",value:"风机轮毂高度风速最大值（m/s）"},{key:"wsMinHubHeight",value:"风机轮毂高度风速最小值（m/s）"},{key:"wsAveHubHeight",value:"风机轮毂高度风速平均值（m/s）"},{key:"wsStaHubHeight",value:"风机轮毂高度风速标准差（m/s）"},
            {key:"wdInstHubHeight",value:"风机轮毂高度风向瞬时值（°）"},{key:"wdMaxHubHeight",value:"风机轮毂高度风向最大值（°）"},{key:"wdMinHubHeight",value:"风机轮毂高度风向最小值（°）"},{key:"wdAveHubHeight",value:"风机轮毂高度风向平均值（°）"},{key:"wdStaHubHeight",value:"风机轮毂高度风向标准差（°）"},
*/

          ],
          loading:false,
          tableLoading:true,

        }
      },
      mounted() {
        this.init();
      },
    methods:{
      init() {
        this.items = document.querySelectorAll('.flex-container .windTowerItem')
        for (let i = 0; i < this.items.length; i++) {
          this.items[i].dataset.order = i + 1;
        }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.queryAttribute()
      },
      queryAttribute(){
        this.$axios.get('/EquipmentAttribute/findWindtower').then((res) => {
          this.attr = res.data
          for(var key in this.attr){
            this.thFormat.push({key:key,value:this.attr[key]})
          }
          this.queryWindTowerInfo()
        }).catch((error) => {
          this.loading = false
          this.$message.error('查询测风塔设备信息出错' + error)
        })
    },
      queryWindTowerInfo() {
        this.loading = true
        this.$axios.get('/windTowerInfos').then((res) => {
          if (res.data != null && res.data.length > 0) {
            this.windTowerInfos = res.data
            this.windTowerInfoId = this.windTowerInfos[0].id
            this.windTowerInfoName = this.windTowerInfos[0].name
            this.queryTime= this.queryStartTime+','+this.queryEndTime+','+this.windTowerInfoId+','+this.windTowerInfoName+','+Math.ceil(Math.random()*10)
            this.queryWindTowerStatusDataForCharts(this.queryStartTime,this.queryEndTime,this.windTowerInfoId)
          } else {
            this.loading = false
            this.$message.warning("没有测风塔设备信息")
          }
        }).catch((error) => {
          this.loading = false
          this.$message.error('查询测风塔设备信息出错' + error)
        })
      },
      queryWindTowerStatusDataForCharts(startTime, endTime, no) {
        this.$axios.get('/windTowerStatusData/' + startTime + '/' + endTime + '/' + no).then((res) => {
          this.drawData = res.data
          this.wsData.wsCharts = this.drawData.ws
          this.wsData.times=this.drawData.times
          this.wdData = this.drawData.wd
          this.wfData = this.drawData.wf
          if(this.drawData.wdInst50 != undefined){
            this.wd50 = this.drawData.wdInst50
          }
          if(this.drawData.wdInst70 != undefined){
            this.wd70 = this.drawData.wdInst70
          }


          if(!this.tableLoading){
            this.loading = false
          }
        }).catch((error) => {
          if(!this.tableLoading){
            this.loading = false
          }
          this.$message.error('测风塔设备查询风速echarts出错' + error)
        })
      },
      queryMonthData(){
          if(this.startMonthTime == ''){
            this.$message.error("请选择日期再查询！！！")
          }else {
            this.startTime = this.startMonthTime
            var date = new Date(this.startMonthTime);
            date.setMonth(date.getMonth() + 1)
            date.setDate(1);
            date.setHours(0);
            date.setSeconds(0);
            date.setMinutes(0);
            this.endTime = date.getTime()-1

          this.queryData()
          }
      },
      queryData(){
        this.loading = true
        if(this.endTime<=this.startTime){
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.$message.error("开始时间不能大于结束时间")
          this.loading = false
          return
        }
        if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*31){
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.$message.error("只能最多查询31天的数据哦")
          this.loading = false
          return
        }
        for(var i = 0;i<this.windTowerInfos.length;i++){
          if(this.windTowerInfoId == this.windTowerInfos[i].id){
            this.windTowerInfoName = this.windTowerInfos[i].name
          }
        }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.queryTime =this.queryStartTime+','+this.queryEndTime+','+this.windTowerInfoId+','+this.windTowerInfoName+','+Math.ceil(Math.random()*10)
        this.queryWindTowerStatusDataForCharts(this.queryStartTime,this.queryEndTime,this.windTowerInfoId)
      },
      getLoadingFormTable(data){
        this.tableLoading = data
        this.loading= this.tableLoading
      },
      clickChart(clickIndex) {
        let activeItem = document.querySelector('.flex-container .active')
        let activeIndex = activeItem.dataset.order
        let clickItem = this.items[clickIndex - 1]
        if (activeIndex === clickIndex) {
          return
        }
        activeItem.classList.remove('active')
        clickItem.classList.add('active')
        this.setStyle(clickItem, activeItem)
      },
      setStyle(el1, el2) {
        let transform1 = el1.style.transform
        let transform2 = el2.style.transform
        el1.style.transform = transform2
        el2.style.transform = transform1
      },
    },
            components: {
              'v-table':table,
              wsCharts,
              wdCharts,
              wfCharts
            }
    }

</script>

<style  scoped>
    /*.windTowerItem{*/
        /*width: 68%;*/
        /*height: 90%;*/
        /*position:absolute;*/
        /*transition:all 0.8s;*/
        /*background:rgba(32, 32, 35, 0.5)*/
    /*}*/
    /*.flex-container{*/
        /*height: 90%;*/
        /*width: 100%;*/
        /*overflow: hidden;*/
        /*margin-top: 30px;*/
        /*margin-right:  50px;*/
    /*}*/
    /*.active{*/
        /*height:90%;*/
        /*width: 77%;*/
    /*}*/
    /*.filter{*/
      /*position:relative;*/
      /*display:flex;*/
      /*padding:5px 0 0 35px;*/
      /*font-size:12px;*/
      /*line-height:6px;*/
      /*color:white;*/
    /*}*/
    /*.filter >>> input{*/
      /*background:transparent;*/
      /*border:none;*/
      /*color:white;*/
    /*}*/
    /*.timeText{*/
      /*opacity:0.69;*/
      /*padding-right:7px;*/
      /*font-size:14px;*/
    /*}*/

    /*.startTime{*/
      /*display:inline-block;*/
    /*}*/

    /*.endTime{*/
      /*display:inline-block;*/
      /*padding-left:42px;*/
    /*}*/
    /*.el-button{*/
      /*background:transparent;*/
      /*color:white;*/
    /*}*/

    /*.timeQuery{*/
      /*margin-left: 2%;*/
      /*background:transparent;*/
    /*}*/

</style>
