<template>
  <div class="app-container">
    <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']"
        />
      </el-form-item>
      <el-form-item label="场站名称">
        <el-select v-model="stationCode" placeholder="请选择">
          <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 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)"
            height="535">
            <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="t" title="温度(℃)" width="180px"></vxe-table-column>
            <vxe-table-column field="rh" title="湿度(%RH)" width="180px"></vxe-table-column>
            <vxe-table-column field="pa" title="气压(hPa)" width="180px"></vxe-table-column>
            <vxe-table-column field="wsHubHeight" title="轮毂风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wdHubHeight" title="轮毂风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws10" title="10米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd10" title="10米风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws30" title="30米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd30" title="30米风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws50" title="50米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd50" title="50米风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws60" title="60米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd60" title="60米风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws70" title="70米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd70" title="70米风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws80" title="80米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd80" title="80米风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws90" title="90米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd90" title="90米风向(°)" width="180px"></vxe-table-column>
            <vxe-table-column field="ws100" title="100米风速(m/s)" width="180px"></vxe-table-column>
            <vxe-table-column field="wd100" title="100米风向(°)" 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="wscharts"></div>
        </el-tab-pane>
        <el-tab-pane label="风向玫瑰图" name="three">
          <div id="roseChartsId" style="float:left;width: 95%;height: 550px"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

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

export default {
  name: 'inverterinfo',
  data() {
    return {
      wsChart: null,
      chart: null,
      charts: null,
      wsData: {
        wsCharts: {},
        times: {}
      },
      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
      itemStyle: [
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#4A99FF'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#4A99FF'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4BFFFC',
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: '#4BFFFC',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#4BFFFC'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#4BFFFC'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff654a',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#ff654a',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#ff654a'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#ff654a'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#edff4a',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#edff4a',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#edff4a'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#edff4a'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#65ff4a',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#65ff4a',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#65ff4a'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#65ff4a'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4affea',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4affea',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#4affea'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#4affea'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#894aff',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#894aff',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#894aff'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#894aff'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#d84aff',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#d84aff',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#d84aff'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#d84aff'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff4aae',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#ff4aae',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: { // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                  offset: 0,
                  color: '#ff4aae'
                }, {
                  offset: 0.5,
                  color: 'rgba(0,0,0,0)'
                }, {
                  offset: 1,
                  color: '#ff4aae'
                }],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },

      ],
      colorArr: [{
        start: "rgba(155, 101, 229,",
        end: "rgba(219,44,44,0.5)"
      },
        {
          start: "rgba(71, 173, 245,",
          end: "rgba(231,132,46,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(190,229,50,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(44,214,140,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(43,73,221,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(40,203,203,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(195,42,180,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(231,45,119,0.5)"
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(229,46,46,0.5)"
        },
      ],
      lineStyle: [
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219,50,51,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219,196,50,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,196,50)',
              borderColor: 'rgba(219,196,50,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(101,219,50,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(101,219,50)',
              borderColor: 'rgba(101,219,50,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(50,219,171,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(50,219,171)',
              borderColor: 'rgba(50,219,171,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(50,118,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(50,118,219)',
              borderColor: 'rgba(50,118,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(140,50,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(140,50,219)',
              borderColor: 'rgba(140,50,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(202,50,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(202,50,219)',
              borderColor: 'rgba(202,50,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(50,199,219,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(50,199,219)',
              borderColor: 'rgba(50,199,219,0.2)',
              borderWidth: 12
            }
          },
        },
        {
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219,143,50,0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,143,50)',
              borderColor: 'rgba(219,143,50,0.2)',
              borderWidth: 12
            }
          },
        }
      ],
      lineColor: '#3b3b3b',
    }
  },
  created(){
    this.getStationCode()
  },
  mounted() {

  },
  beforeDestroy() {
    if (!this.wsChart) {
      return
    }
    this.wsChart.dispose()
    this.wsChart = null
  },
  computed: {},
  methods: {
    tabClick(tab){
      if (this.activeName == 'second') {
        this.$nextTick(function() {
          this.wsChart.resize();
        })
      }
      // if (this.activeName == 'three') {
      //   this.$nextTick(function() {
      //     this.rosechart.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('/windtowerstatusdata/queryTableData', {params: queryParams}).then(response => {
        this.tableData = response.data.tableList
        this.total = response.data.tableList.length

        let wsMap = response.data.wsMap
        let wsTime = response.data.wsTime
        this.wsDraw(wsTime,wsMap)


        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()
        }
      })
    },



    wsDraw(wsTime,wsMap) {
      this.wsChart = echarts.init(document.getElementById('wscharts'))
      var option = {
        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,
          width: '70%',
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: this.lineColor
          },
          selected: {}
        },
        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: []
        }],
        yAxis: [{
          type: 'value',
          name: 'm/s',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: this.lineColor
            }
          },

          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: this.lineColor
            },
            formatter: '{value}',
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: []
      }
      option.xAxis[0].data = wsTime
      var index = 0;

      for (var key in wsMap) {
        // var keyName = '';
        // for (let thFormatKey in this.thFormat) {
        //   if (key == thFormatKey) {
        //     keyName = this.thFormat[thFormatKey];
        //   }
        // }
        option.legend.data.push(key)
        if (key=='轮毂风速') {
          option.legend.selected[key] = true
        } else {
          option.legend.selected[key] = false
        }
        var sValue = {
          name: '',
          type: 'line',
          smooth: false,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {},
          data: []
        }
        sValue.name = key
        sValue.data = wsMap[key]
        sValue.itemStyle = this.lineStyle[index].itemStyle
        sValue.connectNulls = true
        option.series.push(sValue)
        index++;
      }
      this.wsChart.setOption(option, true)
      var _this = this
      window.addEventListener("resize", function () {
        _this.wsChart.resize();
      });
    },

  },
}
</script>
