<template>
  <div class="app-container">
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true">
        <el-form-item label="时间">
          <el-date-picker
            :clearable="false"
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:45:00']" popper-class="cpp-popper"
          />
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
            <el-option
              v-for="item in stationList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding-top: 10px">
      <el-tabs type="card" v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="列表" name="first">
          <vxe-table
            highlight-hover-row
            :keep-source="true"
            align="center"
            :loading="loading"
            ref="xTable"
            auto-resize
            highlight-current-row
            border
            resizable
            show-overflow
            :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)">
            <vxe-table-column field="stationCode" title="场站名称" :formatter="stationCodeFormat" width="200px"
                              fixed="left"></vxe-table-column>
            <vxe-table-column field="time" title="时间" width="180px" fixed="left"></vxe-table-column>
            <vxe-table-column field="globalR" title="总辐射(W/㎡)" width="180px"></vxe-table-column>
            <vxe-table-column field="directR" title="直接辐射(W/㎡)" width="180px"></vxe-table-column>
            <vxe-table-column field="diffuseR" title="散射辐射(W/㎡)" width="180px"></vxe-table-column>
            <vxe-table-column field="airT" title="温度(℃)" width="180px"></vxe-table-column>
            <vxe-table-column field="rh" title="湿度(%)" width="180px"></vxe-table-column>
            <vxe-table-column field="p" title="气压(kPa)" width="180px"></vxe-table-column>
            <vxe-table-column field="cellT" title="电池板温度(℃)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws" title="风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd" title="风向(°)" width="180px"></vxe-table-column>
          </vxe-table>
          <vxe-pager
            perfect
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :total="total"
            :page-sizes=[10,50,100]
            :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
            @page-change="handlePageChange"
          >
          </vxe-pager>
        </el-tab-pane>
        <el-tab-pane label="辐射图" name="second">
          <div style="float:left;width: 95%;height: 550px" id="fscharts"></div>
        </el-tab-pane>
        <el-tab-pane label="湿度、压强图" name="three">
          <div style="float:left;width: 95%;height: 550px" id="sdcharts"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'inverterinfo',
  data() {
    return {
      fsChart: null,
      sdChart: null,
      activeName: 'first',
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 5 * 1000 * 60],
      total: 0,
      sortOrder: 'asc',
      pageSize: 10,
      currentPage: 1,
      stationList: [],
      stationCode: [],
      searchForm: {},
      tableData: [],
      nameList: [],
      loading: false,
      modId: '',//备用id
      lineColor: '#3b3b3b',
    }
  },
  created() {
    this.getStationCode()
  },
  mounted() {

  },
  beforeDestroy() {
    if (!this.sdChart) {
      return
    }
    this.sdChart.dispose()
    this.sdChart = null
    if (!this.fsChart) {
      return
    }
    this.fsChart.dispose()
    this.fsChart = null
  },
  computed: {},
  methods: {
    tabClick(tab) {
      if (this.activeName == 'second') {
        this.$nextTick(function () {
          this.fsChart.resize();
        })
      }
      if (this.activeName == 'three') {
        this.$nextTick(function () {
          this.sdChart.resize();
        })
      }
    },
    nameFormat({cellValue, row, column}) {
      const item = this.nameList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    stationCodeFormat({cellValue, row, column}) {
      const item = this.stationList.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
    },
    async dataQuery() {
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (endTime <= startTime) {
        this.$message.error("开始时间不能大于结束时间")
        return
      }

      this.loading = true
      let queryParams = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
      }
      this.$axios.get('/weatherstationstatusdata/queryTableData', {params: queryParams}).then(response => {
        this.tableData = response.data.tableList
        this.total = response.data.tableList.length

        let radiationData = response.data.radiationData
        let timeList = response.data.timeList
        let sdData = response.data.sdData
        this.drawFs(timeList, radiationData)
        this.sddraw(timeList, sdData)

        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getStationCode() {
      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
          this.dataQuery()
        }
      })
    },

    drawFs(timeaxis, radiationData) {
      var globalR = []
      var directR = []
      var diffuseR = []
      if (radiationData != null) {
        if (radiationData.globalRs != null) {
          globalR = radiationData.globalRs
        }
        if (radiationData.directRs != null) {
          directR = radiationData.directRs
        }
        if (radiationData.diffuseRs != null) {
          diffuseR = radiationData.diffuseRs
        }
      }

      this.fsChart = echarts.init(document.getElementById('fscharts'),'dark')

      this.fsChart.setOption({
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '气象站辐射',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            // color: this.lineColor
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['总辐射', '直辐射', '散辐射'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // color: this.lineColor
          },
          selected: {
            '总辐射': true,
            '直辐射': true,
            '散辐射': true,
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          // textStyle: {
          //   color: this.lineColor
          // }
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          // axisLine: {
          //   lineStyle: {
          //     color: this.lineColor
          //   }
          // },
          data: timeaxis
        }],
        yAxis: [{
          type: 'value',
          name: '瓦/平方米',
          axisTick: {
            show: false
          },
          // axisLine: {
          //   lineStyle: {
          //     color: this.lineColor
          //   }
          // },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [{
          name: '总辐射',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          connectNulls: true,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
          data: globalR
        },
          {
            name: '直辐射',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            connectNulls: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: directR
          },
          {
            name: '散辐射',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            connectNulls: true,
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12
              }
            },
            data: diffuseR
          },
        ]
      })
    },
    sddraw(timeaxis, sdData) {
      var p = []
      var rh = []
      if(sdData!=null){
        if(sdData.ps !=null){
          p = sdData.ps
        }
        if(sdData.rhs !=null){
          rh = sdData.rhs
        }
      }
      this.sdChart = echarts.init(document.getElementById('sdcharts'),'dark')

      this.sdChart.setOption({
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '气象站湿度、压强',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            // color: this.lineColor
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['压强', '湿度'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // color: this.lineColor
          },
          selected:{
            '压强':true,
            '湿度':true
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          // textStyle: {
          //   color: this.lineColor
          // }
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          // axisLine: {
          //   lineStyle: {
          //     color: this.lineColor
          //   }
          // },
          data: timeaxis
        }],
        yAxis: [{
          type: 'value',
          name: 'kPa',
          axisTick: {
            show: false
          },
          // axisLine: {
          //   lineStyle: {
          //     color: this.lineColor
          //   }
          // },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
        },
          {
            type: 'value',
            name: '%',
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
          }
        ],
        series: [{
          name: '压强',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
          data: p
        },
          {
            name: '湿度',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: rh
          },
        ]
      })
    }
  },
}
</script>
