<!--
  -    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="getWindtowerinfoByStationCode"
                   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 windtowerinfoData"
          :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="queryWindTowerStatusDataForCharts">查询</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="echarts"></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">-->
<!--        <div style="width: 100%; height: calc(80vh - 50px)" id="wfcharts"></div>-->
<!--      </el-tab-pane>-->
      <el-tab-pane label="表格" name="Firstly">
        <basic-container>
          <avue-crud ref="crud"
                     :page.sync="page"
                     :data="tableData"
                     :table-loading="tableLoading"
                     :option="tableOption"
                     @on-load="getWindtowerStatusData">
          </avue-crud>
        </basic-container>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getStation,
  queryCharts,
  getWindtowerinfoByStationCode,
  queryTableData

} from '@/api/windtowerstatusdata'
import {tableOption} from '@/const/crud/windtowerstatusdata'
import * as echarts from "echarts";

export default {
  name: 'windtowerstatusdata',
  data() {
    return {
      windtowerinfoData: [],
      equipmentId: '',
      searchForm: {},
      tableData: [],
      tableHeader: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      startTime: new Date(new Date().toLocaleDateString()).getTime(),
      endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
      stationCode: '',
      stationList: [],
      drawData: [],
      wsData: {
        wsCharts: {},
        times: {}
      },
      thFormat: [],
      wdData: {},
      wfData: {},
      activeName: 'first',
      loading: false,
      wd50: "无",
      wd70: "无",
      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)"
        },
      ],
      chart: null,
      charts: null,
      wsChart: null,
      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',
    }
  },
  mounted() {
    this.getStationCode();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    if (!this.charts) {
      return
    }
    this.charts.dispose()
    this.charts = null
    if (!this.wsChart) {
      return
    }
    this.wsChart.dispose()
    this.wsChart = null
  },
  methods: {
    wdDraw(wdData) {
      // console.log(wdData, this.thFormat)
      this.chart = echarts.init(document.getElementById('echarts'))
      const option = {
        backgroundColor: 'transparent',
        color: ['#4A99FF', '#4BFFFC', '#ff654a', '#edff4a', '#65ff4a', '#4affea', '#894aff', '#d84aff', '#ff4aae'],
        title: {
          top: 20,
          text: '测风塔信息-风向玫瑰图\n\n50米主风向：' + this.wd50 + '\n70米主风向：' + this.wd70,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#000'
          },
          left: '1%'
        },
        legend: {
          top: 20,
          width: 50,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // color: '#F1F1F3'
          },
          selected: {}
        },
        tooltip: {
          confine: true,
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        radar: [
          {
            name: {
              textStyle: {
                color: '#000',
                fontSize: 16
              },
            },
            splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: { // 分隔区域的样式设置。
                color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              }
            },
            axisLine: { //指向外圈文本的分隔线样式
              lineStyle: {
                color: '#000'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#000', // 分隔线颜色
                width: 1, // 分隔线线宽
              }
            },
            indicator: [
              {text: 'N', max: 1},
              {text: 'NNW', max: 1},
              {text: 'NW', max: 1},
              {text: 'WNW', max: 1},
              {text: 'W', max: 1},
              {text: 'WSW', max: 1},
              {text: 'SW', max: 1},
              {text: 'SSW', max: 1},
              {text: 'S', max: 1},
              {text: 'SSE', max: 1},
              {text: 'SE', max: 1},
              {text: 'ESE', max: 1},
              {text: 'E', max: 1},
              {text: 'ENE', max: 1},
              {text: 'NE', max: 1},
              {text: 'NNE', max: 1},
            ],
            center: ['50%', '50%'],
            radius: '70%'
          },
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item',
            },
            areaStyle: {},
            data: []
          }
        ],
        props: {
          wdData: {
            type: Object
          },
          wd70: {
            type: String
          },
          wd50: {
            type: String
          },
          thFormat: {
            type: Array
          }
        },
      }
      var index = 0;
      for (var key in wdData) {
        var keyName = '';
        for (let thFormatKey in this.thFormat) {
          if (key == thFormatKey) {
            keyName = this.thFormat[thFormatKey];
          }
        }
        option.legend.data.push(keyName)
        if (index > 3) {
          option.legend.selected[keyName] = false
        } else {
          option.legend.selected[keyName] = true
        }
        var wd = new Object
        wd.name = keyName
        wd.value = wdData[key]
        wd.connectNulls = true
        wd.itemStyle = this.itemStyle[index].itemStyle
        wd.areaStyle = this.itemStyle[index].areaStyle
        option.series[0].data.push(wd)
        index++;
      }
      console.log(option)
      this.chart.setOption(option, true)
      var _this = this
      window.addEventListener("resize", function () {
        _this.chart.resize();
      });
    },
    wfDraw(wfData) {

      // this.charts = echarts.init(document.getElementById('wfcharts'))
      // var option = {
      //   title: {
      //     top: 20,
      //     text: '测风塔信息-风速频率图',
      //     textStyle: {
      //       fontWeight: 'normal',
      //       fontSize: 16,
      //       color: this.lineColor
      //     },
      //     left: '1%'
      //   },
      //   tooltip: {
      //     trigger: 'axis'
      //   },
      //   grid: {
      //     top: 100,
      //     left: '2%',
      //     right: '2%',
      //     bottom: '10%',
      //     containLabel: true
      //   },
      //   legend: {
      //     top: 20,
      //     width: '70%',
      //     icon: 'rect',
      //     itemWidth: 14,
      //     itemHeight: 5,
      //     itemGap: 13,
      //     data: [],
      //     right: '4%',
      //     textStyle: {
      //       fontSize: 12,
      //       color: this.lineColor
      //     },
      //     selected: {}
      //   },
      //   calculable: true,
      //
      //   xAxis: [
      //     {
      //       type: 'category',
      //       axisLine: {
      //         lineStyle: {
      //           color: this.lineColor
      //         }
      //       },
      //       data: ['0-3m/s', '3-6m/s', '6-9m/s', '9-12m/s', '12-15m/s', '15-18m/s', '18-21m/s', '21-24m/s', '24-27m/s', '>27m/s']
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value',
      //       name: '%',
      //       axisTick: {
      //         show: false
      //       },
      //       axisLine: {
      //         lineStyle: {
      //           color: this.lineColor
      //         }
      //       },
      //
      //       axisLabel: {
      //         margin: 10,
      //         textStyle: {
      //           fontSize: 14,
      //           color: this.lineColor
      //         },
      //         formatter: '{value}',
      //       },
      //       splitLine: {
      //         lineStyle: {
      //           color: '#57617B'
      //         }
      //       }
      //     }
      //   ],
      //   series: []
      // };
      // var index = 0;
      //
      // for (var key in wfData) {
      //   var keyName = '';
      //   for (let thFormatKey in this.thFormat) {
      //     if (key == thFormatKey) {
      //       keyName = this.thFormat[thFormatKey];
      //     }
      //   }
      //   option.legend.data.push(keyName)
      //   if (index > 3) {
      //     option.legend.selected[keyName] = false
      //   } else {
      //     option.legend.selected[keyName] = true
      //   }
      //   var wf = new Object
      //   wf.name = keyName
      //   wf.type = 'bar'
      //   wf.data = wfData[key]
      //   wf.connectNulls = true
      //   wf.itemStyle = {
      //     normal: {
      //       color: {
      //         type: "linear",
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         colorStops: [{
      //           offset: 0,
      //           color: this.colorArr[index].start + "0.7)"
      //         },
      //           {
      //             offset: 0.5,
      //             color: this.colorArr[index].start + "0.3)"
      //           },
      //           {
      //             offset: 1,
      //             color: this.colorArr[index].end
      //           }
      //         ],
      //         globalCoord: false
      //       }
      //     }
      //   }
      //   option.series[index] = wf
      //   index++;
      // }
      // this.charts.setOption(option, true)
      // var _this = this
      // window.addEventListener("resize", function () {
      //   _this.charts.resize();
      // });
    },
    wsDraw(wsData) {

      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 = wsData.times
      var index = 0;
      for (var key in wsData.wsCharts) {
        var keyName = '';
        for (let thFormatKey in this.thFormat) {
          if (key == thFormatKey) {
            keyName = this.thFormat[thFormatKey];
          }
        }
        option.legend.data.push(keyName)
        if (index > 3) {
          option.legend.selected[keyName] = false
        } else {
          option.legend.selected[keyName] = true
        }
        var sValue = {
          name: '',
          type: 'line',
          smooth: false,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          // areaStyle: {},
          itemStyle: {},
          data: []
        }
        sValue.name = keyName
        sValue.data = wsData.wsCharts[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();
      });
    },
    queryWindTowerStatusDataForCharts() {
      const param = new URLSearchParams()
      param.append('stationCode', this.stationCode)
      param.append('startTime', this.startTime)
      param.append('endTime', this.endTime)
      param.append('equipmentId', this.equipmentId)
      if (this.equipmentId === '' || this.equipmentId == null) {
        return alert("请选择所属设备")
      }
      queryCharts(param).then((res) => {
        console.log(res.data.data)
        this.drawData = res.data.data
        this.wsData.wsCharts = this.drawData.ws
        this.wsData.times = this.drawData.times
        this.wdData = this.drawData.wd

        this.thFormat = this.drawData.equipmentType
        this.wfData = this.drawData.wf
        this.tableHeader = this.drawData.tableHead
        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
        }
        this.handleClick()
      }).catch((error) => {
        if (!this.tableLoading) {
          this.loading = false
        }
        this.$message.error('测风塔设备查询风速echarts出错' + error)
      })
      this.getWindtowerStatusData()
    },

    getWindtowerStatusData() {
      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.getWindtowerinfoByStationCode()
        this.tableLoading = false
      })
    },
    getWindtowerinfoByStationCode() {
      this.windtowerinfoData = []
      this.equipmentId = ''
      this.tableLoading = true
      const param = new URLSearchParams()
      param.append('stationCode', this.stationCode)
      getWindtowerinfoByStationCode(param).then(response => {
        this.windtowerinfoData = response.data.data
        if (this.windtowerinfoData.length > 0) {
          this.equipmentId = this.windtowerinfoData[0].value
        }
        this.tableLoading = false
      })
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange() {
      this.getList(this.page)
    },
    handleClick() {
      if (this.activeName === "first") {
        this.chart = null
        this.$nextTick(() => {
          this.wdDraw(this.wdData)
          this.chart.resize()
        })
      } else if (this.activeName === "second") {
        this.wsChart = null
        this.$nextTick(() => {
          this.wsDraw(this.wsData)
          this.wsChart.resize()
        })
      }
      // else if (this.activeName === "Third") {
      //   this.charts = null
      //   this.$nextTick(() => {
      //     this.wfDraw(this.wfData)
      //     this.charts.resize()
      //   })
      // }
    }
  }
}
</script>
