增加短期历史查询

cpp-admin/src/main/java/com/cpp/web/service/station/impl/PowerStationStatusDataServiceImpl.java

@@ -3,7 +3,9 @@ package com.cpp.web.service.station.impl;
 import cn.hutool.core.date.DateUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.cpp.system.service.ISysConfigService;
 import com.cpp.web.domain.station.ElectricField;
+import com.cpp.web.domain.station.ForecastPowerShortTermStation;
 import com.cpp.web.domain.station.PowerStationStatusData;
 import com.cpp.web.mapper.station.PowerStationStatusDataMapper;
 import com.cpp.web.service.cloud.ForecastPowerShortTermCloudService;
@@ -11,6 +13,7 @@ import com.cpp.web.service.cloud.ForecastPowerUltraShortTermCloudService;
 import com.cpp.web.service.cloud.NwpCloudService;
 import com.cpp.web.service.station.*;
 import lombok.RequiredArgsConstructor;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.math.BigDecimal;
@@ -42,6 +45,9 @@ public class PowerStationStatusDataServiceImpl extends ServiceImpl<PowerStationS
 
     private final NwpCloudService nwpCloudService;
 
+    @Autowired
+    private ISysConfigService configService;
+
 
     @Override
     public List<PowerStationStatusData> findByStationCodeAndStartTimeAndEndTime(String stationCode, Date startTime, Date endTime) {
@@ -110,7 +116,10 @@ public class PowerStationStatusDataServiceImpl extends ServiceImpl<PowerStationS
         llglHeadMap.put("field", "llgl");
         llglHeadMap.put("label", "理论功率");
         headList.add(llglHeadMap);
-
+        Map<String,String> dqysHeadMap = new HashMap<>();
+        dqysHeadMap.put("field", "dqys");
+        dqysHeadMap.put("label", "短期原始曲线");
+        headList.add(dqysHeadMap);
 
         Map<String,List> tempCdqMap = new HashMap<>();
         Map<String,List> tableCdqMap = new HashMap<>();
@@ -121,6 +130,7 @@ public class PowerStationStatusDataServiceImpl extends ServiceImpl<PowerStationS
         List<String> sjList = new ArrayList();
         List<String> kyList = new ArrayList();
         List<String> llList = new ArrayList();
+        List<String> dqysList = new ArrayList();
 
         // 获取实际功率
         Map<Long, PowerStationStatusData> sjMap = new HashMap<>();
@@ -128,6 +138,20 @@ public class PowerStationStatusDataServiceImpl extends ServiceImpl<PowerStationS
         for (PowerStationStatusData powerStationStatusData : powerStationStatusDataList) {
             sjMap.put(powerStationStatusData.getTime().getTime(), powerStationStatusData);
         }
+        // 获取短期原始曲线
+        Map<Long, ForecastPowerShortTermStation> dqysMap = new HashMap<>();
+        String dqHowLongAgo = configService.selectConfigByKey("dqHowLongAgo");
+        QueryWrapper dqysWrapper = new QueryWrapper<>();
+        dqysWrapper.eq("forecast_how_long_ago",Integer.parseInt(dqHowLongAgo));
+        dqysWrapper.eq("station_code",stationCode);
+        dqysWrapper.between("time", new Date(startTime), new Date(endTime));
+        List<ForecastPowerShortTermStation> forecastPowerShortTermStationList =forecastPowerShortTermStationService.list(dqysWrapper);
+        for (ForecastPowerShortTermStation forecastPowerShortTermStation : forecastPowerShortTermStationList) {
+            dqysMap.put(forecastPowerShortTermStation.getTime().getTime(), forecastPowerShortTermStation);
+        }
+
+
+
         List<Map<String,Object>> tableList = new ArrayList();
         SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
         int i=0;
@@ -170,6 +194,25 @@ public class PowerStationStatusDataServiceImpl extends ServiceImpl<PowerStationS
                 kyList.add(null);
                 llList.add(null);
             }
+            // 封装短期原始曲线list
+            if (dqysMap.get(tempDateTime) !=null){
+                // 实际功率
+                ForecastPowerShortTermStation forecastPowerShortTermStation = dqysMap.get(tempDateTime);
+                if (forecastPowerShortTermStation.getFpValue().compareTo(new BigDecimal("-99"))==0) {
+                    dqysList.add(null);
+                    map1.put("dqys",null);
+                }
+                else{
+                    dqysList.add(forecastPowerShortTermStation.getFpValue().toString());
+                    map1.put("dqys",forecastPowerShortTermStation.getFpValue().toString());
+                }
+            }
+            else {
+                dqysList.add(null);
+            }
+
+
+
 
             // 封装时间轴list
             String time = format.format(tempDateTime);

cpp-ui/src/views/stationDataQuery/historyforecastdata/index.vue

@@ -0,0 +1,996 @@
+<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
+            align="center"
+            :loading="loading"
+            ref="xTable"
+            auto-resize
+            border
+            resizable
+            highlight-current-row
+            show-overflow
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+          >
+            <vxe-table-column
+              v-for="(item, index) in fromHead"
+              :key="index"
+              align="center"
+              :title="item.label"
+              :field="item.field"
+            ></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-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: 'inverterinfo',
+  data() {
+    return {
+      fromHead: [],
+      wsChart: null,
+      wdChart: null,
+      activeName: 'first',
+      dateTime: [],
+      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.getQueryDays()
+    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();
+        })
+      }
+    },
+    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.warning("开始时间不能大于结束时间")
+        return
+      }
+      if (endTime - startTime > 60 * 60 * 24 * 1000 * 15) {
+        this.$message.warning("查询数据不能超过15天！")
+        return
+      }
+      let queryParams = {
+        "stationCode": this.stationCode,
+        "startTime": startTime,
+        "endTime": endTime,
+      }
+
+      this.loading = true
+      this.$axios.get('/powerstationstatusdata/getCompositeData', {params: queryParams}).then(response => {
+        this.fromHead = response.data.fromHead
+        this.tableData = response.data.tableList
+        this.total = response.data.tableList.length
+
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+
+    getQueryDays() {
+        // 获取查询D+N天参数值
+        this.$axios({url: '/powerstationstatusdata/queryDays', method: 'get'}).then(response => {
+          console.log(1)
+          let queryDays = response.data
+          this.dateTime = [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + (60 * 60 * 24 * 1000) + parseInt(queryDays) * 60 * 60 * 24 * 1000 - 1]
+        })
+
+    },
+    getStationCode() {
+      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
+        console.log(2)
+        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'))
+      let 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) {
+        for (let i = 0; i < wsMap[key].length; i++) {
+          wsMap[key][i] = wsMap[key][i] == -99 ? null : wsMap[key][i]
+        }
+        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();
+      });
+    },
+    wdDraw(wdMap) {
+      this.wdChart = echarts.init(document.getElementById('wdcharts'))
+      const option = {
+        backgroundColor: 'transparent',
+        color: ['#4A99FF', '#4BFFFC', '#ff654a', '#edff4a', '#65ff4a', '#4affea', '#894aff', '#d84aff', '#ff4aae'],
+        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: []
+          }
+        ],
+      }
+      var index = 0;
+      for (var key in wdMap) {
+        option.legend.data.push(key)
+        if (key == '轮毂风向') {
+          option.legend.selected[key] = true
+        } else {
+          option.legend.selected[key] = false
+        }
+        var wd = new Object
+        wd.name = key
+        wd.value = wdMap[key]
+        wd.connectNulls = true
+        wd.itemStyle = this.itemStyle[index].itemStyle
+        wd.areaStyle = this.itemStyle[index].areaStyle
+        option.series[0].data.push(wd)
+        index++;
+      }
+
+      this.wdChart.setOption(option, true)
+      var _this = this
+      window.addEventListener("resize", function () {
+        _this.wdChart.resize();
+      });
+    },
+  },
+}
+</script>