增加站端nwp查询展示

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

@@ -0,0 +1,212 @@
+package com.cpp.web.controller.stationDataQuery;
+
+import cn.hutool.core.collection.CollUtil;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.cpp.common.core.domain.R;
+import com.cpp.web.domain.station.ElectricField;
+import com.cpp.web.domain.station.NwpStation;
+import com.cpp.web.service.station.ElectricFieldService;
+import com.cpp.web.service.station.NwpStationService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import lombok.RequiredArgsConstructor;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.math.BigDecimal;
+import java.text.SimpleDateFormat;
+import java.util.*;
+
+
+/**
+ * idp_nwp
+ *
+ * @author whc
+ * @date 2022-03-18 15:49:17
+ */
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/nwp")
+@Api(value = "nwp", tags = "idp_nwp管理")
+public class NwpStationController {
+    @Autowired
+    NwpStationService nwpStationService;
+    @Autowired
+    ElectricFieldService electricFieldService;
+
+    @ApiOperation(value = "根据条件查询", notes = "分页查询")
+    @GetMapping("/queryTableData")
+    public R queryTableData(String stationCode, Long genDate) {
+        QueryWrapper<NwpStation> queryWrapper = new QueryWrapper<>();
+        queryWrapper.eq("gen_date", new Date(genDate));
+        queryWrapper.eq("station_code", stationCode);
+        List<NwpStation> talbeList = nwpStationService.list(queryWrapper);
+        talbeList.sort(Comparator.comparing(NwpStation::getTime));
+        Map<String, NwpStation> dataGroupMap = new HashMap<>();
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
+        for (NwpStation nwpStation : talbeList) {
+            dataGroupMap.put(sdf.format(nwpStation.getTime()), nwpStation);
+        }
+        Map<String, Object> returnMap = new HashMap<>();
+        returnMap.put("tableList", talbeList);
+        ElectricField electricField = electricFieldService.findByStationCode(stationCode);
+        returnMap.put("stationType", electricField.getElectricFieldTypeEnum());
+        if (CollUtil.isNotEmpty(talbeList)) {
+            List<String> timeList = new ArrayList<>();
+            if ("E1".equals(electricField.getElectricFieldTypeEnum())) {
+                // 光伏
+                List<BigDecimal> globalRList = new ArrayList<>();
+                List<BigDecimal> directRList = new ArrayList<>();
+                List<BigDecimal> diffuseRList = new ArrayList<>();
+                Long startTime = talbeList.get(0).getTime().getTime();
+                Long endTime = talbeList.get(talbeList.size() - 1).getTime().getTime();
+                Long momentTime = 15 * 60 * 1000L;
+                for (Long tempTime = startTime; tempTime <= endTime; tempTime = tempTime + momentTime) {
+                    // 设置时间
+                    String tempTimeStr = sdf.format(tempTime);
+                    timeList.add(tempTimeStr);
+                    if (dataGroupMap.get(tempTimeStr) != null) {
+                        NwpStation nwpStation = dataGroupMap.get(tempTimeStr);
+                        // 总辐射
+                        BigDecimal globalR = nwpStation.getGlobalRadiation();
+                        if (globalR.compareTo(new BigDecimal("-99")) == 0) {
+                            globalRList.add(null);
+                        } else {
+                            globalRList.add(globalR);
+                        }
+
+                        // 直接辐射
+                        BigDecimal directR = nwpStation.getDirectRadiation();
+                        if (directR.compareTo(new BigDecimal("-99")) == 0) {
+                            directRList.add(null);
+                        } else {
+                            directRList.add(directR);
+                        }
+
+                        // 散辐射
+                        BigDecimal diffuseR = nwpStation.getDiffuseRadiation();
+                        if (diffuseR.compareTo(new BigDecimal("-99")) == 0) {
+                            diffuseRList.add(null);
+                        } else {
+                            diffuseRList.add(diffuseR);
+                        }
+
+                    } else {
+                        globalRList.add(null);
+                        directRList.add(null);
+                        diffuseRList.add(null);
+                    }
+                }
+                Map<String, List<BigDecimal>> radiationDataMap = new HashMap<>();
+                radiationDataMap.put("globalRs", globalRList);
+                radiationDataMap.put("directRs", directRList);
+                radiationDataMap.put("diffuseRs", diffuseRList);
+                returnMap.put("radiationData", radiationDataMap);
+            } else {
+                // 风电
+                List<BigDecimal> ws10List = new ArrayList<>();
+                List<BigDecimal> ws30List = new ArrayList<>();
+                List<BigDecimal> ws50List = new ArrayList<>();
+                List<BigDecimal> ws70List = new ArrayList<>();
+                List<BigDecimal> ws80List = new ArrayList<>();
+                List<BigDecimal> ws90List = new ArrayList<>();
+                List<BigDecimal> ws100List = new ArrayList<>();
+
+                Long startTime = talbeList.get(0).getTime().getTime();
+                Long endTime = talbeList.get(talbeList.size() - 1).getTime().getTime();
+                Long momentTime = 15 * 60 * 1000L;
+                for (Long tempTime = startTime; tempTime <= endTime; tempTime = tempTime + momentTime) {
+                    // 设置时间
+                    // 设置时间
+                    String tempTimeStr = sdf.format(tempTime);
+                    timeList.add(tempTimeStr);
+                    if (dataGroupMap.get(tempTimeStr) != null) {
+                        NwpStation nwpStation = dataGroupMap.get(tempTimeStr);
+                        // ws10
+                        BigDecimal ws10 = nwpStation.getWs10();
+                        if (ws10.compareTo(new BigDecimal("-99")) == 0) {
+                            ws10List.add(null);
+                        } else {
+                            ws10List.add(ws10);
+                        }
+
+                        // ws30
+                        BigDecimal ws30 = nwpStation.getWs30();
+                        if (ws30.compareTo(new BigDecimal("-99")) == 0) {
+                            ws30List.add(null);
+                        } else {
+                            ws30List.add(ws30);
+                        }
+
+                        // ws50
+                        BigDecimal ws50 = nwpStation.getWs50();
+                        if (ws50.compareTo(new BigDecimal("-99")) == 0) {
+                            ws50List.add(null);
+                        } else {
+                            ws50List.add(ws50);
+                        }
+
+                        // ws70
+                        BigDecimal ws70 = nwpStation.getWs70();
+                        if (ws70.compareTo(new BigDecimal("-99")) == 0) {
+                            ws70List.add(null);
+                        } else {
+                            ws70List.add(ws70);
+                        }
+
+                        // ws80
+                        BigDecimal ws80 = nwpStation.getWs80();
+                        if (ws80.compareTo(new BigDecimal("-99")) == 0) {
+                            ws80List.add(null);
+                        } else {
+                            ws80List.add(ws80);
+                        }
+
+                        // ws90
+                        BigDecimal ws90 = nwpStation.getWs90();
+                        if (ws90.compareTo(new BigDecimal("-99")) == 0) {
+                            ws90List.add(null);
+                        } else {
+                            ws90List.add(ws90);
+                        }
+                        // ws100
+                        BigDecimal ws100 = nwpStation.getWs100();
+                        if (ws100.compareTo(new BigDecimal("-99")) == 0) {
+                            ws100List.add(null);
+                        } else {
+                            ws100List.add(ws100);
+                        }
+                    } else {
+                        // ws10
+                        ws10List.add(null);
+                        // ws30
+                        ws30List.add(null);
+                        // ws50
+                        ws50List.add(null);
+                        // ws70
+                        ws70List.add(null);
+                        // ws80
+                        ws80List.add(null);
+                        // ws90
+                        ws90List.add(null);
+                        // ws100
+                        ws100List.add(null);
+                    }
+                }
+                LinkedHashMap<String, List> wsMap = new LinkedHashMap<>();
+
+                wsMap.put("10米风速", ws10List);
+                wsMap.put("30米风速", ws30List);
+                wsMap.put("50米风速", ws50List);
+                wsMap.put("70米风速", ws70List);
+                wsMap.put("80米风速", ws80List);
+                wsMap.put("90米风速", ws90List);
+                wsMap.put("100米风速", ws100List);
+                returnMap.put("radiationData", wsMap);
+            }
+            returnMap.put("timeList", timeList);
+        }
+        return R.ok(returnMap);
+    }
+
+}

cpp-admin/src/main/java/com/cpp/web/domain/station/NwpStation.java

@@ -3,6 +3,7 @@ package com.cpp.web.domain.station;
 import com.baomidou.mybatisplus.annotation.TableName;
 
 import com.cpp.web.domain.BaseCppEntity;
+import com.fasterxml.jackson.annotation.JsonFormat;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
@@ -36,12 +37,14 @@ public class NwpStation extends BaseCppEntity {
      * 预测时间
      */
     @ApiModelProperty(value = "预测值时间")
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
     private Date time;
 
     /**
      * 生成日期
      */
     @ApiModelProperty(value = "生成日期")
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
     private Date genDate;
 
     /**

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

@@ -0,0 +1,1062 @@
+<template>
+  <div class="app-container">
+    <el-form ref="queryForm" size="small" :inline="true">
+      <el-form-item label="生成日期">
+        <el-date-picker
+          v-model="dateTime"
+          type="date"
+          placeholder="选择生成日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="场站名称">
+        <el-select v-model="stationCode" placeholder="请选择">
+          <el-option
+            v-for="item in stationList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">查询
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <div style="padding-top: 10px">
+      <el-tabs type="card" v-model="activeName" @tab-click="tabClick">
+        <el-tab-pane label="列表" name="first">
+          <vxe-table
+            highlight-hover-row
+            :keep-source="true"
+            align="center"
+            :loading="loading"
+            ref="xTable"
+            auto-resize
+            highlight-current-row
+            border
+            resizable
+            show-overflow
+            :data="tableData.slice((currentPage-1) * pageSize,currentPage * pageSize)"
+            height="535">
+            <vxe-table-column field="stationCode" title="场站名称" :formatter="stationCodeFormat" width="200px"
+                              fixed="left"></vxe-table-column>
+                          <vxe-table-column  field="time" title="预测时间" width="180" min-width="150" fixed="left"></vxe-table-column>
+                          <vxe-table-column field="t" title="温度" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="rh" title="湿度" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="globalRadiation" title="总辐射" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="directRadiation" title="直辐射" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="diffuseRadiation" title="散辐射" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="ws10" title="10米风速" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="ws30" title="30米风速" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="ws50" title="50米风速" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="ws70" title="70米风速" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="ws80" title="80米风速" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="ws90" title="90米风速" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="ws100" title="100米风速" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="wd10" title="10米风向" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="wd30" title="30米风向" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="wd50" title="50米风向" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="wd70" title="70米风向" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="wd80" title="80米风向" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="wd90" title="90米风向" min-width="90" ></vxe-table-column>
+                          <vxe-table-column field="wd100" title="100米风向" min-width="90" ></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="fscharts"></div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: 'inverterinfo',
+  data() {
+    return {
+      fsChart: null,
+      activeName: 'first',
+      dateTime: new Date(new Date().toLocaleDateString()).getTime(),
+      total: 0,
+      sortOrder: 'asc',
+      pageSize: 10,
+      currentPage: 1,
+      stationList: [],
+      stationCode: [],
+      searchForm: {},
+      tableData: [],
+      loading: false,
+      modId: '',//备用id
+      itemStyle: [
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#4A99FF',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#4A99FF',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#4A99FF'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#4A99FF'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#4BFFFC',
+                // shadowColor: '#4BFFFC',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#4BFFFC',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#4BFFFC'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#4BFFFC'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#ff654a',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#ff654a',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#ff654a'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#ff654a'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#edff4a',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#edff4a',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#edff4a'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#edff4a'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#65ff4a',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#65ff4a',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#65ff4a'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#65ff4a'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#4affea',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#4affea',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#4affea'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#4affea'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#894aff',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#894aff',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#894aff'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#894aff'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#d84aff',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#d84aff',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#d84aff'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#d84aff'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+        {
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                color: '#ff4aae',
+                // shadowColor: '#4A99FF',
+                // shadowBlur: 10,
+              },
+              shadowColor: '#ff4aae',
+              shadowBlur: 10,
+            },
+          },
+          areaStyle: {
+            normal: { // 单项区域填充样式
+              color: {
+                type: 'linear',
+                x: 0, //右
+                y: 0, //下
+                x2: 1, //左
+                y2: 1, //上
+                colorStops: [{
+                  offset: 0,
+                  color: '#ff4aae'
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                }, {
+                  offset: 1,
+                  color: '#ff4aae'
+                }],
+                globalCoord: false
+              },
+              opacity: 1 // 区域透明度
+            }
+          }
+        },
+
+      ],
+      colorArr: [{
+        start: "rgba(155, 101, 229,",
+        end: "rgba(219,44,44,0.5)"
+      },
+        {
+          start: "rgba(71, 173, 245,",
+          end: "rgba(231,132,46,0.5)"
+        },
+        {
+          start: "rgba(82, 249, 107,",
+          end: "rgba(190,229,50,0.5)"
+        },
+        {
+          start: "rgba(82, 249, 107,",
+          end: "rgba(44,214,140,0.5)"
+        },
+        {
+          start: "rgba(82, 249, 107,",
+          end: "rgba(43,73,221,0.5)"
+        },
+        {
+          start: "rgba(82, 249, 107,",
+          end: "rgba(40,203,203,0.5)"
+        },
+        {
+          start: "rgba(82, 249, 107,",
+          end: "rgba(195,42,180,0.5)"
+        },
+        {
+          start: "rgba(82, 249, 107,",
+          end: "rgba(231,45,119,0.5)"
+        },
+        {
+          start: "rgba(82, 249, 107,",
+          end: "rgba(229,46,46,0.5)"
+        },
+      ],
+      lineStyle: [
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219,50,51,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219,196,50,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,196,50)',
+              borderColor: 'rgba(219,196,50,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(101,219,50,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(101,219,50)',
+              borderColor: 'rgba(101,219,50,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(50,219,171,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(50,219,171)',
+              borderColor: 'rgba(50,219,171,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(50,118,219,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(50,118,219)',
+              borderColor: 'rgba(50,118,219,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(140,50,219,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(140,50,219)',
+              borderColor: 'rgba(140,50,219,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(202,50,219,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(202,50,219)',
+              borderColor: 'rgba(202,50,219,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(50,199,219,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(50,199,219)',
+              borderColor: 'rgba(50,199,219,0.2)',
+              borderWidth: 12
+            }
+          },
+        },
+        {
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219,143,50,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,143,50)',
+              borderColor: 'rgba(219,143,50,0.2)',
+              borderWidth: 12
+            }
+          },
+        }
+      ],
+      lineColor: '#3b3b3b',
+    }
+  },
+  created() {
+    this.getStationCode()
+  },
+  mounted() {
+
+  },
+  beforeDestroy() {
+    if (!this.fsChart) {
+      return
+    }
+    this.fsChart.dispose()
+    this.fsChart = null
+  },
+  computed: {},
+  methods: {
+    tabClick(tab) {
+      if (this.activeName == 'second') {
+        this.$nextTick(function () {
+          this.fsChart.resize();
+        })
+      }
+    },
+    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() {
+      if (this.dateTime==undefined){
+        this.$message.warning('请选择生成日期')
+        return
+      }
+      let genDate = Math.round(this.dateTime)
+
+      this.loading = true
+      let queryParams = {
+        "stationCode": this.stationCode,
+        "genDate": genDate,
+      }
+      this.$axios.get('/nwp/queryTableData', {params: queryParams}).then(response => {
+        this.tableData = response.data.tableList
+        this.total = response.data.tableList.length
+
+        let stationType = response.data.stationType
+        let timeList = response.data.timeList
+        let radiationData = response.data.radiationData
+
+        if (stationType=='E1'){
+          // 光伏
+          this.drawGf(timeList,radiationData)
+        }
+        else{
+          // 风电
+          this.drawFd(timeList,radiationData)
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    getStationCode() {
+      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
+        this.stationList = response.data
+        if (this.stationList.length > 0) {
+          this.stationCode = this.stationList[0].value
+          this.dataQuery()
+        }
+      })
+    },
+    // 画光伏场辐射图
+    drawGf(timeaxis, radiationData) {
+      var globalR = []
+      var directR = []
+      var diffuseR = []
+      if (radiationData != null) {
+        if (radiationData.globalRs != null) {
+          globalR = radiationData.globalRs
+        }
+        if (radiationData.directRs != null) {
+          directR = radiationData.directRs
+        }
+        if (radiationData.diffuseRs != null) {
+          diffuseR = radiationData.diffuseRs
+        }
+      }
+
+      this.fsChart = echarts.init(document.getElementById('fscharts'))
+      this.fsChart.setOption({}, true)
+
+      this.fsChart.setOption({
+        backgroundColor: 'transparent',
+        title: {
+          top: 20,
+          text: 'NWP辐照度',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: this.lineColor
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['总辐射', '直辐射', '散辐射'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: this.lineColor
+          },
+          selected: {
+            '总辐射': true,
+            '直辐射': true,
+            '散辐射': true,
+          }
+        },
+        dataZoom: [{
+          show: true,
+          realtime: true,
+          start: 0,
+          end: 100,
+          left: "15%",
+          right: "15%",
+          textStyle: {
+            color: this.lineColor
+          }
+        }, {
+          type: 'inside'
+        }],
+        grid: {
+          top: 100,
+          left: '2%',
+          right: '2%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: this.lineColor
+            }
+          },
+          data: timeaxis
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '瓦/平方米',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.lineColor
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        }],
+        series: [{
+          name: '总辐射',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          connectNulls: true,
+          lineStyle: {
+            normal: {
+              width: 2
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+          data: globalR
+        },
+          {
+            name: '直辐射',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            connectNulls: true,
+            lineStyle: {
+              normal: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(0,136,212)',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: directR
+          },
+          {
+            name: '散辐射',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            connectNulls: true,
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(137,189,27)',
+                borderColor: 'rgba(137,189,2,0.27)',
+                borderWidth: 12
+              }
+            },
+            data: diffuseR
+          },
+        ]
+      })
+
+    },
+    // 画风电场风速图
+    drawFd(timeaxis, radiationData) {
+      this.fsChart = echarts.init(document.getElementById('fscharts'))
+      this.fsChart.setOption({}, true)
+      let option = {
+        backgroundColor: 'transparent',
+        title: {
+          top: 20,
+          text: 'NWP风速',
+          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: timeaxis
+        }],
+        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: []
+      }
+
+      var index = 0;
+
+      for (var key in radiationData) {
+        for (let i=0;i<radiationData[key].length;i++){
+          radiationData[key][i] = radiationData[key][i]==-99?null:radiationData[key][i]
+        }
+        option.legend.data.push(key)
+
+        var sValue = {
+          name: '',
+          type: 'line',
+          smooth: false,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 2
+            }
+          },
+          itemStyle: {},
+          data: []
+        }
+        sValue.name = key
+        sValue.data = radiationData[key]
+        sValue.itemStyle = this.lineStyle[index].itemStyle
+        sValue.connectNulls = true
+        option.series.push(sValue)
+        index++;
+      }
+      this.fsChart.setOption(option, true)
+
+      var _this = this
+      window.addEventListener("resize", function () {
+        _this.fsChart.resize();
+      });
+    },
+  },
+}
+</script>

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

@@ -71,9 +71,9 @@
         <el-tab-pane label="辐射图" name="second">
           <div style="float:left;width: 95%;height: 550px" id="fscharts"></div>
         </el-tab-pane>
-<!--        <el-tab-pane label="风速风向图" name="three">-->
-<!--          <div style="float:left;width: 95%;height: 550px" id="wscharts"></div>-->
-<!--        </el-tab-pane>-->
+        <el-tab-pane label="湿度、压强图" name="three">
+          <div style="float:left;width: 95%;height: 550px" id="sdcharts"></div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -86,8 +86,8 @@ export default {
   name: 'inverterinfo',
   data() {
     return {
-      wsChart: null,
-      wdChart: null,
+      fsChart: null,
+      sdChart: null,
       activeName: 'first',
       dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 5 * 1000 * 60],
       total: 0,
@@ -111,11 +111,11 @@ export default {
 
   },
   beforeDestroy() {
-    // if (!this.wsChart) {
-    //   return
-    // }
-    // this.wsChart.dispose()
-    // this.wsChart = null
+    if (!this.sdChart) {
+      return
+    }
+    this.sdChart.dispose()
+    this.sdChart = null
     if (!this.fsChart) {
       return
     }
@@ -130,11 +130,11 @@ export default {
           this.fsChart.resize();
         })
       }
-      // if (this.activeName == 'three') {
-      //   this.$nextTick(function () {
-      //     this.wsChart.resize();
-      //   })
-      // }
+      if (this.activeName == 'three') {
+        this.$nextTick(function () {
+          this.sdChart.resize();
+        })
+      }
     },
     nameFormat({cellValue, row, column}) {
       const item = this.nameList.find(item => item.value === cellValue)
@@ -168,10 +168,9 @@ export default {
 
         let radiationData = response.data.radiationData
         let timeList = response.data.timeList
-        // let wdMap = response.data.wdMap
-        // this.wsDraw(wsTime,wsMap)
-        // this.wdDraw(wdMap);
+        let sdData = response.data.sdData
         this.drawFs(timeList, radiationData)
+        this.sddraw(timeList, sdData)
 
         this.loading = false
       }).catch(() => {
@@ -366,6 +365,179 @@ export default {
         ]
       })
     },
+    sddraw(timeaxis, sdData) {
+      var p = []
+      var rh = []
+      if(sdData!=null){
+        if(sdData.ps !=null){
+          p = sdData.ps
+        }
+        if(sdData.rhs !=null){
+          rh = sdData.rhs
+        }
+      }
+      this.sdChart = echarts.init(document.getElementById('sdcharts'))
+
+      this.sdChart.setOption({
+        backgroundColor: 'transparent',
+        title: {
+          top: 20,
+          text: '气象站湿度、压强',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: this.lineColor
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['压强', '湿度'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: this.lineColor
+          },
+          selected:{
+            '压强':true,
+            '湿度':true
+          }
+        },
+        dataZoom: [{
+          show: true,
+          realtime: true,
+          start: 0,
+          end: 100,
+          left: "15%",
+          right: "15%",
+          textStyle: {
+            color: this.lineColor
+          }
+        }, {
+          type: 'inside'
+        }],
+        grid: {
+          top: 100,
+          left: '2%',
+          right: '2%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: this.lineColor
+            }
+          },
+          data: timeaxis
+        }],
+        yAxis: [{
+          type: 'value',
+          name: 'kPa',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.lineColor
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+          {
+            type: 'value',
+            name: '%',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 14
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            }
+          }
+        ],
+        series: [{
+          name: '压强',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 2
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+          data: p
+        },
+          {
+            name: '湿度',
+            type: 'line',
+            yAxisIndex: 1,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 2
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(0,136,212)',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: rh
+          },
+        ]
+      })
+    }
   },
 }
 </script>