增加测风塔表格和风速10米层高图

cpp-admin/src/main/java/com/cpp/web/controller/stationDataQuery/WindTowerStatusDataController.java

@@ -1,5 +1,6 @@
 package com.cpp.web.controller.stationDataQuery;
 
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.OrderItem;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -14,7 +15,10 @@ import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.Date;
+import java.lang.reflect.Field;
+import java.math.BigDecimal;
+import java.text.SimpleDateFormat;
+import java.util.*;
 
 
 /**
@@ -55,10 +59,74 @@ public class WindTowerStatusDataController {
 
     @ApiOperation(value = "根据条件查询", notes = "分页查询")
     @GetMapping("/queryTableData")
-    public R queryTableData(Long currentPage, Long pageSize, String stationCode, Long startTime, Long endTime) {
-        Page page = new Page(currentPage, pageSize);
-        page.addOrder(OrderItem.asc("time"));
-        page.setMaxLimit((long) -1);
-        return R.ok(windTowerStatusDataService.page(page, windTowerStatusDataService.getByBetweenTimeAndStationCode(new Date(startTime), new Date(endTime), stationCode)));
+    public R queryTableData(String stationCode, Long startTime, Long endTime) {
+        QueryWrapper<WindTowerStatusData> queryWrapper = new QueryWrapper<>();
+        queryWrapper.between("time", new Date(startTime), new Date(endTime));
+        queryWrapper.eq("station_code", stationCode);
+        List<WindTowerStatusData> talbeList = windTowerStatusDataService.list(queryWrapper);
+        talbeList.sort(Comparator.comparing(WindTowerStatusData::getTime));
+
+        // 封装各层高风速
+        List<String> timeList = new ArrayList<>();
+        List<BigDecimal> wsHubHeightList = new ArrayList<>();
+        List<BigDecimal> ws10List = new ArrayList<>();
+        List<BigDecimal> ws30List = new ArrayList<>();
+        List<BigDecimal> ws50List = new ArrayList<>();
+        List<BigDecimal> ws60List = new ArrayList<>();
+        List<BigDecimal> ws70List = new ArrayList<>();
+        List<BigDecimal> ws80List = new ArrayList<>();
+        List<BigDecimal> ws90List = new ArrayList<>();
+        List<BigDecimal> ws100List = new ArrayList<>();
+        Map<String, List> wsMap = new HashMap<>();
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+        for (int i = 0; i < talbeList.size(); i++) {
+            WindTowerStatusData windTowerStatusData = talbeList.get(i);
+            timeList.add(sdf.format(windTowerStatusData.getTime()));
+            // 风速轮毂
+            BigDecimal wsHubHeight = windTowerStatusData.getWsHubHeight();
+            wsHubHeightList.add(wsHubHeight);
+            // ws10
+            BigDecimal ws10 = windTowerStatusData.getWs10();
+            ws10List.add(ws10);
+            // ws30
+            BigDecimal ws30 = windTowerStatusData.getWs30();
+            ws30List.add(ws30);
+            // ws50
+            BigDecimal ws50 = windTowerStatusData.getWs50();
+            ws50List.add(ws50);
+            // ws60
+            BigDecimal ws60 = windTowerStatusData.getWs60();
+            ws60List.add(ws60);
+            // ws70
+            BigDecimal ws70 = windTowerStatusData.getWs70();
+            ws70List.add(ws70);
+            // ws80
+            BigDecimal ws80 = windTowerStatusData.getWs80();
+            ws80List.add(ws80);
+            // ws90
+            BigDecimal ws90 = windTowerStatusData.getWs90();
+            ws90List.add(ws90);
+            // ws100
+            BigDecimal ws100 = windTowerStatusData.getWs100();
+            ws100List.add(ws100);
+        }
+        wsMap.put("timeList",timeList);
+        wsMap.put("wsHubHeightList", wsHubHeightList);
+        wsMap.put("ws10List", ws10List);
+        wsMap.put("ws30List", ws30List);
+        wsMap.put("ws50List", ws50List);
+        wsMap.put("ws60List", ws60List);
+        wsMap.put("ws70List", ws70List);
+        wsMap.put("ws80List", ws80List);
+        wsMap.put("ws90List", ws90List);
+        wsMap.put("ws100List", ws100List);
+
+
+        Map<String, Object> returnMap = new HashMap<>();
+        returnMap.put("tableList", talbeList);
+        returnMap.put("wsMap", wsMap);
+        return R.ok(returnMap);
+
+
     }
 }

cpp-ui/package.json

@@ -60,7 +60,8 @@
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "vxe-table": "^2.11.0",
-    "xe-utils": "^3.5.30"
+    "xe-utils": "^3.5.30",
+    "echarts": "^5.3.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

cpp-ui/src/main.js

@@ -53,7 +53,8 @@ Vue.prototype.$axios = request
 import 'xe-utils'
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
-
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

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

@@ -23,7 +23,7 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="beforeQuery">查询
+        <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">查询
         </el-button>
       </el-form-item>
     </el-form>
@@ -32,54 +32,55 @@
       <el-tabs type="card" v-model="activeName" @tab-click="tabClick">
         <el-tab-pane label="数据表格" name="first">
           <vxe-table
-            ref="xTable"
+            highlight-hover-row
+            :keep-source="true"
             align="center"
-            class="mytable-style"
+            :loading="loading"
+            ref="xTable"
             auto-resize
+            highlight-current-row
             border
             resizable
-            export-config
-            highlight-current-row
             show-overflow
-            height="528"
-            :data="tableData"
-            :radio-config="{trigger: 'row'}">
-            <vxe-table-column field="stationCode" title="场站名称" :formatter="stationCodeFormat"></vxe-table-column>
-            <vxe-table-column field="time" title="时间"></vxe-table-column>
-            <vxe-table-column field="t" title="温度(℃)"></vxe-table-column>
-            <vxe-table-column field="rh" title="湿度(%RH)"></vxe-table-column>
-            <vxe-table-column field="pa" title="气压(hPa)"></vxe-table-column>
-            <vxe-table-column field="wsHubHeight" title="轮毂风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wdHubHeight" title="轮毂风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws10" title="10米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd10" title="10米风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws30" title="30米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd30" title="30米风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws50" title="50米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd50" title="50米风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws60" title="60米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd60" title="60米风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws70" title="70米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd70" title="70米风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws80" title="80米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd80" title="80米风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws90" title="90米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd90" title="90米风向(°)"></vxe-table-column>
-            <vxe-table-column field="ws100" title="100米风速(m/s)"></vxe-table-column>
-            <vxe-table-column field="wd100" title="100米风向(°)"></vxe-table-column>
+            :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
-            background
-            :loading="loading"
-            :current-page="currentPage"
-            :page-size="pageSize"
-            :total="total"
-            @page-change="handlePageChange"
-            :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
+              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 id="wsChartsId" style="float:left;width: 95%;height: 550px"></div>
+          <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>
@@ -90,10 +91,19 @@
 </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,
@@ -107,27 +117,599 @@ export default {
       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() {
-    this.dataQuery()
+
+  },
+  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();
+          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)
@@ -140,14 +722,8 @@ export default {
     handlePageChange({currentPage, pageSize}) {
       this.currentPage = currentPage
       this.pageSize = pageSize
-      this.dataQuery();
     },
-    beforeQuery(){
-      this.currentPage = 1
-      this.pageSize = 10
-      this.dataQuery()
-    },
-    dataQuery() {
+      async dataQuery() {
       let startTime = Math.round(this.dateTime[0])
       let endTime = Math.round(this.dateTime[1])
       if (endTime <= startTime) {
@@ -157,16 +733,18 @@ export default {
 
       this.loading = true
       let queryParams = {
-        "currentPage": this.currentPage,
-        "pageSize": this.pageSize,
         "stationCode": this.stationCode,
         "startTime": startTime,
         "endTime": endTime,
       }
       this.$axios.get('/windtowerstatusdata/queryTableData', {params: queryParams}).then(response => {
-        console.log(response.data.records)
-        this.tableData = response.data.records
-        this.page.total = response.data.total
+        this.tableData = response.data.tableList
+        this.total = response.data.tableList.length
+
+        let wsMap = response.data.wsMap
+        this.wsDraw(wsMap)
+
+
         this.loading = false
       }).catch(() => {
         this.loading = false
@@ -177,10 +755,178 @@ export default {
         this.stationList = response.data
         if (this.stationList.length > 0) {
           this.stationCode = this.stationList[0].value
-          // this.stationChange()
+          this.dataQuery()
         }
       })
     },
-  }
+
+
+
+    wsDraw(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 = wsMap.timeList
+      var index = 0;
+
+      // for (var key in wsMap.wsCharts) {
+      //   var keyName = '';
+      //   for (let thFormatKey in this.thFormat) {
+      //     if (key == thFormatKey) {
+      //       keyName = this.thFormat[thFormatKey];
+      //     }
+      //   }
+      //   option.legend.data.push(keyName)
+      //   if (index > 4) {
+      //     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
+      //       }
+      //     },
+      //     itemStyle: {},
+      //     data: []
+      //   }
+      //   sValue.name = keyName
+      //   sValue.data = wsData.wsCharts[key]
+      //   sValue.itemStyle = this.lineStyle[index].itemStyle
+      //   sValue.connectNulls = true
+      //   option.series.push(sValue)
+      //   index++;
+      // }
+
+
+      var sValue = {
+        name: '',
+        type: 'line',
+        smooth: false,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        itemStyle: {},
+        data: []
+      }
+      sValue.name = '10米风速'
+      sValue.data = wsMap.ws10List
+      sValue.itemStyle = this.lineStyle[index].itemStyle
+      sValue.connectNulls = true
+      option.series.push(sValue)
+      option.legend.data.push('10米风速')
+
+
+      this.wsChart.setOption(option, true)
+      var _this = this
+      window.addEventListener("resize", function () {
+        _this.wsChart.resize();
+      });
+    },
+
+  },
 }
 </script>