<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <div class="filter">
      <div class="startTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;起始时间:</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime" style="display: inline-block">
        <span class="timeText" style="font-weight: bold;font-size: 14px">&#12288;截止时间:</span>
        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div style="display: inline-block">
        <span style="font-weight: bold;font-size: 14px">&#12288;场站名称：</span>
        <el-select style="width:250px" v-model="stationCode" @change="getWeatherstationinfoByStationCode"
                   size="small">
          <el-option
            v-for="item in stationList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6;font-size: 13px">{{ item.value }}</span>
          </el-option>
        </el-select>
      </div>
      &nbsp;
      <span style="font-weight: bold;font-size: 14px">&#12288;所属设备：</span>
      <el-select style="width:250px" v-model="equipmentId" filterable size="small">
        <el-option
          v-for="item in weatherStationInfoData"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6;font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
      &nbsp;
      <div class="timeQuery" style="display: inline-block">
        <el-button size="small" :loading="loading" @click="queryWeatherStationStatusDataForCharts">查询</el-button>
      </div>
    </div>
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="辐射图" name="first">
        <div style="width: 100%; height: calc(80vh - 50px)" id="radiationCharts"></div>
      </el-tab-pane>
      <el-tab-pane label="风速风向图" name="second">
        <div style="width: 100%; height: calc(80vh - 50px)" id="wscharts"></div>
      </el-tab-pane>
      <el-tab-pane label="表格" name="Third">
        <basic-container>
          <avue-crud ref="crud"
                     :page.sync="page"
                     :data="tableData"
                     :table-loading="tableLoading"
                     :option="tableOption"
                     @on-load="getWeatherStationStatusData">
          </avue-crud>
        </basic-container>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getWeatherstationinfoByStationCode,
  getStation,
  queryCharts,
  queryTableData
} from '@/api/weatherstationstatusdata'
import {mapGetters} from 'vuex'
import {tableOption} from '@/const/crud/weatherstationstatusdata'
import * as echarts from "echarts";

export default {
  name: 'weatherstationstatusdata',
  data() {
    return {
      searchForm: {},
      tableData: [],
      tableHeader: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableOption: tableOption,
      tableLoading: false,
      stationCode: '',
      stationList: [],
      drawData: [],
      startTime: new Date(new Date().toLocaleDateString()).getTime(),
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
      loading: false,
      equipmentId: '',
      weatherStationInfoData: [],
      lineColor: '#3b3b3b',
      chart: null,
      wsChart: null,
      activeName: 'first',
      radiationData: {data: [], time: []},
      otherData: {data: [], time: []},
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  mounted() {
    this.getStationCode();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    if (!this.wsChart) {
      return
    }
    this.wsChart.dispose()
    this.wsChart = null
  },
  methods: {
    draw(timeaxis, radiationData) {
      var globalR = []
      var directR = []
      var diffuseR = []
      var obliqueR = []
      if (radiationData != null) {
        if (radiationData.globalRs != null) {
          globalR = radiationData.globalRs
        }
        if (radiationData.directRs != null) {
          directR = radiationData.directRs
        }
        if (radiationData.diffuseRs != null) {
          diffuseR = radiationData.diffuseRs
        }
        // if (radiationData.obliqueRs != null) {
        //   obliqueR = radiationData.obliqueRs
        // }
      }

      this.chart = echarts.init(document.getElementById('radiationCharts'))

      this.chart.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,
            // '斜辐射': false
          }
        },
        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
          },
          // {
          //   name: '斜辐射',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   showSymbol: false,
          //   connectNulls: true,
          //   lineStyle: {
          //     normal: {
          //       width: 2
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgb(122,27,189)',
          //       borderColor: 'rgba(74,2,189,0.27)',
          //       borderWidth: 12
          //
          //     }
          //   },
          //   data: obliqueR
          // },
        ]
      })
    },
    wsDraw(timeaxis, otherData) {
      var ws = []
      var wd = []
      if (otherData != null) {
        if (otherData.wss != null) {
          ws = otherData.wss
        }
        if (otherData.wds != null) {
          wd = otherData.wds
        }
      }
      this.wsChart = echarts.init(document.getElementById('wscharts'))

      this.wsChart.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: 'm/s',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: this.lineColor
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
          {
            type: 'value',
            name: '°',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            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(122,27,189)',
              borderColor: 'rgba(74,2,189,0.27)',
              borderWidth: 12

            }
          },
          data: ws
        },

          {
            name: '风向',
            type: 'line',
            yAxisIndex: 1,
            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: wd
          },
        ]
      })

    },
    //曲线图
    queryWeatherStationStatusDataForCharts() {
      if (this.equipmentId === '' || this.equipmentId == null) {
        return alert("请选择所属设备")
      }
      const param = new URLSearchParams()
      param.append('stationCode', this.stationCode)
      param.append('startTime', this.startTime)
      param.append('endTime', this.endTime)
      param.append('equipmentId', this.equipmentId)
      queryCharts(param).then((res) => {
        this.drawData = res.data.data
        this.radiationData.data = this.drawData.radiationMap
        this.radiationData.time = this.drawData.times
        this.otherData.data = this.drawData.otherMap
        this.otherData.time = this.drawData.times
        this.draw(this.radiationData.time, this.radiationData.data)
        this.wsDraw(this.otherData.time, this.otherData.data)
        if (!this.tableLoading) {
          this.loading = false
        }
      }).catch((error) => {
        if (!this.tableLoading) {
          this.loading = false
        }
        this.$message.error('气象数据查询echarts出错' + error)
      })
      this.getWeatherStationStatusData()
    },
    //根据场站编号获取气象站
    getWeatherstationinfoByStationCode() {
      this.weatherStationInfoData = []
      this.equipmentId = ''
      this.tableLoading = true
      const param = new URLSearchParams()
      param.append('stationCode', this.stationCode)
      getWeatherstationinfoByStationCode(param).then(response => {
        this.weatherStationInfoData = response.data.data
        if (this.weatherStationInfoData.length > 0) {
          this.equipmentId = this.weatherStationInfoData[0].value
        }
        this.tableLoading = false
      })
    },
    //表格数据
    getWeatherStationStatusData() {
      const param = new URLSearchParams()
      param.append('currentPage', this.page.currentPage)
      param.append('pageSize', this.page.pageSize)
      param.append('stationCode', this.stationCode)
      param.append('startTime', this.startTime)
      param.append('endTime', this.endTime)
      param.append('equipmentId', this.equipmentId)
      queryTableData(param).then((res) => {
        this.tableData = res.data.data.records

        this.page.pageSize = res.data.data.size
        this.page.total = res.data.data.total
      })
    },
    //获取所有场站
    getStationCode() {
      this.tableLoading = true
      getStation().then(response => {
        this.stationList = response.data.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
        }
        this.getWeatherstationinfoByStationCode()
        this.tableLoading = false
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      //this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      //this.getList();
    },
    handleClick() {
      if (this.activeName === "first") {
        this.chart = null
        this.$nextTick(() => {
          this.draw(this.radiationData.time, this.radiationData.data)
          this.chart.resize()
        })
      } else if (this.activeName === "second") {
        this.wsChart = null
        this.$nextTick(() => {
          this.wsDraw(this.otherData.time, this.otherData.data)
          this.wsChart.resize()
        })
      } else if (this.activeName === "Third") {
        this.$nextTick(() => {
          this.getWeatherStationStatusData()
        })
      }
    }
  }
}
</script>
