新增nwp展示

.gitignore

@@ -4,3 +4,4 @@
 /analysis/
 /backend/src/main/resources/static/
 /backend/target/
+/ui/node/

backend/src/main/java/com/jiayue/ssi/controller/NwpController.java

@@ -0,0 +1,72 @@
+package com.jiayue.ssi.controller;
+
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.jiayue.ssi.constant.CustomException;
+import com.jiayue.ssi.entity.ForecastPowerShortTerm;
+import com.jiayue.ssi.entity.Nwp;
+import com.jiayue.ssi.service.ForecastPowerShortTermService;
+import com.jiayue.ssi.service.NwpService;
+import com.jiayue.ssi.util.ResponseVO;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * NWP接口
+ *
+ * @author xsl
+ * @since 2023/03/13
+ */
+@RestController
+@RequestMapping("/nwpController")
+@Slf4j
+public class NwpController {
+    @Autowired
+    NwpService nwpService;
+
+    /**
+     * 获取短期分页信息
+     *
+     * @return 用户信息
+     */
+    @GetMapping(value = "/getAll")
+    public ResponseVO getAll(Integer currentPage, Integer pageSize, String startTime, String endTime) throws CustomException {
+        try {
+            QueryWrapper<Nwp> wrapper = new QueryWrapper<>();
+            if (StringUtils.isNotEmpty(startTime)) {
+                wrapper.ge("pre_time", startTime);
+            }
+            if (StringUtils.isNotEmpty(endTime)) {
+                wrapper.le("pre_time", endTime);
+            }
+            wrapper.orderByAsc("pre_time");
+            Page<Nwp> result = nwpService.page(new Page<>(currentPage, pageSize), wrapper);
+            return ResponseVO.success(result);
+        } catch (Exception e) {
+            throw new CustomException("获取NWP列表异常", e);
+        }
+    }
+    /**
+     * 按时间查询实时预测短期
+     * @param startTime 开始时间
+     * @param endTime 结束时间
+     * @return 结果集
+     */
+    @GetMapping(value = "/getDraw")
+    public ResponseVO getDraw(String startTime, String endTime) throws CustomException{
+        Map<String,Object> map = new HashMap<>();
+        try{
+            map = nwpService.findByPreTimeBetween(Long.parseLong(startTime),Long.parseLong(endTime));
+            return ResponseVO.success(map);
+        } catch (Exception e) {
+            throw new CustomException("获取NWP图形数据异常", e);
+        }
+    }
+}

backend/src/main/java/com/jiayue/ssi/mapper/NwpMapper.java

@@ -3,14 +3,19 @@ package com.jiayue.ssi.mapper;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import com.jiayue.ssi.entity.Nwp;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Select;
+
+import java.util.List;
 
 /**
- *  NWPMapper
+ *  NwpMapper
  *
  * @author xsl
  * @since 2023-03-10
  */
 @Mapper
 public interface NwpMapper extends BaseMapper<Nwp> {
-
+    @Select("SELECT t.* FROM t_nwp t WHERE t.pre_time>= #{startTime} and t.pre_time<= #{endTime} order by t.pre_time")
+    public List<Nwp> findByPreTimeBetween(@Param("startTime") Long startTime, @Param("endTime") Long endTime);
 }

backend/src/main/java/com/jiayue/ssi/service/NwpService.java

@@ -4,6 +4,7 @@ import com.baomidou.mybatisplus.extension.service.IService;
 import com.jiayue.ssi.entity.Nwp;
 
 import java.util.List;
+import java.util.Map;
 
 
 /**
@@ -20,4 +21,12 @@ public interface NwpService extends IService<Nwp> {
      * @param listNwp
      */
     void deleteBetweenAndPreTime(Long startTime, Long endTime, List<Nwp> listNwp);
+    /**
+     * 按时间查询实时预测短期
+     *
+     * @param startTime 开始时间
+     * @param endTime   结束时间
+     * @return 结果集
+     */
+    Map<String, Object> findByPreTimeBetween(Long startTime, Long endTime);
 }

backend/src/main/java/com/jiayue/ssi/service/impl/NwpServiceImpl.java

@@ -2,15 +2,21 @@ package com.jiayue.ssi.service.impl;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.jiayue.ssi.entity.ElectricField;
 import com.jiayue.ssi.entity.Nwp;
 import com.jiayue.ssi.mapper.NwpMapper;
+import com.jiayue.ssi.service.ElectricFieldService;
 import com.jiayue.ssi.service.NwpService;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
-import java.util.List;
+
+import java.math.BigDecimal;
+import java.text.SimpleDateFormat;
+import java.util.*;
+import java.util.stream.Collectors;
 
 
 @Service
@@ -18,6 +24,8 @@ import java.util.List;
 public class NwpServiceImpl extends ServiceImpl<NwpMapper, Nwp> implements NwpService {
   @Autowired
   NwpMapper nwpMapper;
+  @Autowired
+  ElectricFieldService electricFieldService;
 
   /**
    * 按时间段删除数据
@@ -36,5 +44,177 @@ public class NwpServiceImpl extends ServiceImpl<NwpMapper, Nwp> implements NwpSe
     //保存NWP数据
     this.saveBatch(listNwp);
   }
+  /**
+   * 按时间查询实时预测短期
+   *
+   * @param startTime 开始时间
+   * @param endTime   结束时间
+   * @return 结果集
+   */
+  @Override
+  public Map<String, Object> findByPreTimeBetween(Long startTime, Long endTime) {
+    Map<String,Object> map = new HashMap<>();
+    List<Nwp> list = new ArrayList<>();
+    List<Nwp> checkList = new ArrayList<>();
+    Map<String,Object> datas = new LinkedHashMap<>();
+    list = nwpMapper.findByPreTimeBetween(startTime, endTime);
+    list.sort(Comparator.comparing(Nwp::getPreTime));
+
+    long startTimeLong  = startTime;
+    long endTimeLong  = endTime;
+    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+    long timeStep = 900000L;
+    if(startTimeLong%timeStep !=0){
+      startTimeLong = startTimeLong -(startTimeLong%timeStep);
+    }
+    List<String> times = new ArrayList<>();
+
+    for(long i = startTimeLong;i<endTimeLong;i=i+timeStep){
+      long finalI = i;
+      List<Nwp> p = list.stream().filter(t -> t.getPreTime() == finalI).collect(Collectors.toList());
+      if (p != null && p.size() > 0) {
+        checkList.add(p.get(0));
+      }else{
+        checkList.add(new Nwp());
+      }
+      String timeFormat = sdf.format(new Date(i));
+      times.add(timeFormat);
+    }
+    this.defaultReplace(checkList);
+    ElectricField electricField = electricFieldService.getOne(null);
+    List<BigDecimal> ws10Collect = new ArrayList<>();
+    List<BigDecimal> ws30Collect= new ArrayList<>();
+    List<BigDecimal> ws50Collect= new ArrayList<>();
+    List<BigDecimal> ws70Collect= new ArrayList<>();
+    List<BigDecimal> ws80Collect= new ArrayList<>();
+    List<BigDecimal> ws90Collect= new ArrayList<>();
+    List<BigDecimal> ws100Collect= new ArrayList<>();
+    List<BigDecimal> ws170Collect= new ArrayList<>();
+    List<BigDecimal> swrCollect= new ArrayList<>();
+    List<BigDecimal> diffuseRadiationCollect= new ArrayList<>();
+    List<BigDecimal> directRadiationCollect= new ArrayList<>();
+    Map<String,String> map1 = new HashMap<>();
+    if("0".equals(electricField.getFieldType())){
+      swrCollect = checkList.stream().map(Nwp::getSwr).collect(Collectors.toList());
+      diffuseRadiationCollect = checkList.stream().map(Nwp::getDiffuseRadiation).collect(Collectors.toList());
+      directRadiationCollect = checkList.stream().map(Nwp::getDirectRadiation).collect(Collectors.toList());
+      datas.put("swr",swrCollect);
+      datas.put("diffuseRadiation",diffuseRadiationCollect);
+      datas.put("directRadiation",directRadiationCollect);
+    }else{
+      ws10Collect = checkList.stream().map(Nwp::getWs10).collect(Collectors.toList());
+      ws30Collect = checkList.stream().map(Nwp::getWs30).collect(Collectors.toList());
+      ws50Collect = checkList.stream().map(Nwp::getWs50).collect(Collectors.toList());
+      ws70Collect = checkList.stream().map(Nwp::getWs70).collect(Collectors.toList());
+      ws80Collect = checkList.stream().map(Nwp::getWs80).collect(Collectors.toList());
+      ws90Collect = checkList.stream().map(Nwp::getWs90).collect(Collectors.toList());
+      ws100Collect = checkList.stream().map(Nwp::getWs100).collect(Collectors.toList());
+      ws170Collect = checkList.stream().map(Nwp::getWs170).collect(Collectors.toList());
+      datas.put("ws10",ws10Collect);
+      datas.put("ws30",ws30Collect);
+      datas.put("ws50",ws50Collect);
+      datas.put("ws70",ws70Collect);
+      datas.put("ws80",ws80Collect);
+      datas.put("ws90",ws90Collect);
+      datas.put("ws100",ws100Collect);
+      datas.put("ws170",ws170Collect);
+
+      map1.put("ws10","10米风速");
+      map1.put("ws30","30米风速");
+      map1.put("ws50","50米风速");
+      map1.put("ws70","70米风速");
+      map1.put("ws80","80米风速");
+      map1.put("ws90","90米风速");
+      map1.put("ws100","100米风速");
+      map1.put("ws170","170米风速");
+    }
+
+    map.put("cName",map1);
+    map.put("times",times);
+    map.put("datas",datas);
+    return map;
+  }
+  /**
+   *  对集合进行 -99替换null操作，主要用于图标展示空值
+   *
+   * @param datas  需要替换集合
+   */
+  public void defaultReplace(List<Nwp> datas){
+    BigDecimal nullBig =  new BigDecimal(-99);
+    for(Nwp i :datas){
 
+
+      if(i.getT().compareTo(nullBig)==0){
+        i.setT(null);
+      }
+      if(i.getRh().compareTo(nullBig)==0){
+        i.setRh(null);
+      }
+      if(i.getPressure().compareTo(nullBig)==0){
+        i.setPressure(null);
+      }
+      if(i.getSwr().compareTo(nullBig)==0){
+        i.setSwr(null);
+      }
+      if(i.getDirectRadiation().compareTo(nullBig)==0){
+        i.setDirectRadiation(null);
+      }
+      if(i.getDiffuseRadiation().compareTo(nullBig)==0){
+        i.setDiffuseRadiation(null);
+      }
+      if(i.getSenf().compareTo(nullBig)==0){
+        i.setSenf(null);
+      }
+      if(i.getWs10().compareTo(nullBig)==0){
+        i.setWs10(null);
+      }
+      if(i.getWs30().compareTo(nullBig)==0){
+        i.setWs30(null);
+      }
+      if(i.getWs50().compareTo(nullBig)==0){
+        i.setWs50(null);
+      }
+      if(i.getWs70().compareTo(nullBig)==0){
+        i.setWs70(null);
+      }
+      if(i.getWs80().compareTo(nullBig)==0){
+        i.setWs80(null);
+      }
+      if(i.getWs90().compareTo(nullBig)==0){
+        i.setWs90(null);
+      }
+      if(i.getWs100().compareTo(nullBig)==0){
+        i.setWs100(null);
+      }
+      if(i.getWs170().compareTo(nullBig)==0){
+        i.setWs170(null);
+      }
+      if(i.getWd10().compareTo(nullBig)==0){
+        i.setWd10(null);
+      }
+      if(i.getWd30().compareTo(nullBig)==0){
+        i.setWd30(null);
+      }
+      if(i.getWd50().compareTo(nullBig)==0){
+        i.setWd50(null);
+      }
+      if(i.getWd70().compareTo(nullBig)==0){
+        i.setWd70(null);
+      }
+      if(i.getWd80().compareTo(nullBig)==0){
+        i.setWd80(null);
+      }
+      if(i.getWd90().compareTo(nullBig)==0){
+        i.setWd90(null);
+      }
+      if(i.getWd100().compareTo(nullBig)==0){
+        i.setWd100(null);
+      }
+      if(i.getWd170().compareTo(nullBig)==0){
+        i.setWd170(null);
+      }
+
+    }
+
+  }
 }

ui/src/views/bizManager/forecastPowerShortTerm/charts/index.vue

@@ -110,7 +110,8 @@ export default {
             name: '实时短期预测',
             data: realpower,
             type: 'line',
-            smooth: true
+            smooth: true,
+            showSymbol: false
           }
         ]
       }

ui/src/views/bizManager/nwp/charts/index.vue

@@ -0,0 +1,418 @@
+<template>
+  <div style="width: 100%;height: 100%" >
+    <div id="nwpcharts"></div>
+  </div>
+</template>
+
+<script>
+  import resize from '../../../../components/Charts/mixins/resize'
+  import * as echarts from 'echarts';
+  import cc from '../../../curvecolors'
+  export default {
+    mixins: [resize],
+    watch: {
+      drawData:{
+        handler(newValue, oldValue) {
+          this.cName = newValue.cName
+          if(newValue.cName.ws10==undefined){
+            this.company = 'W/㎡'
+            this.thFormat = [
+              {key:"directRadiation",value:'直辐射'},
+              {key:"diffuseRadiation",value:'散辐射'},
+              {key:"swr",value:'总辐射'}
+              ]
+          }else {
+            this.thFormat = [{key:"ws10",value:this.cName.ws10},
+              {key:"ws30",value:this.cName.ws30},
+              {key:"ws50",value:this.cName.ws50},
+              {key:"ws70",value:this.cName.ws70}]
+          }
+
+          this.draw(newValue.times, newValue.datas)
+
+        },
+        deep: true
+      },
+      resizeKey:function(newQuestion, oldQuestion){
+        if(this.chart !=null){
+          this.chart.resize();
+        }
+      }
+    },
+    props: {
+      drawData:{
+        type:Object,
+      },
+      resizeKey:{
+        type:Number
+      }
+    },
+    data() {
+      return {
+        lineColor:'',
+        cName:{},
+        chart: null,
+        thFormat:[],
+        company:'m/s',
+        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: {
+                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: cc.ws30,
+                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: cc.ws50,
+                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: cc.ws70,
+                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: cc.ws80,
+                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: cc.ws90,
+                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: cc.ws100,
+                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: cc.ws110,
+                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: cc.ws120,
+                borderColor: 'rgba(219,143,50,0.2)',
+                borderWidth: 12
+              }
+            },
+          }
+        ]
+      }
+    },
+    mounted() {
+      if(sessionStorage.getItem('styleSwitch') === 'blue'){
+        this.lineColor = 'white'
+      }else{
+        this.lineColor = '#3b3b3b'
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      draw(timeaxis,datas) {
+        this.chart = echarts.init(document.getElementById('nwpcharts'))
+        var 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:[]
+          }],
+          yAxis: [{
+            type: 'value',
+            name: this.company,
+            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 = timeaxis
+        var index = 0;
+        for(var key in datas){
+          var keyName='';
+          for(var i = 0 ;i<this.thFormat.length;i++){
+            if(key ==this.thFormat[i].key ){
+              keyName =this.thFormat[i].value;
+            }
+          }
+          option.legend.data.push(keyName)
+          if(index>5){
+            option.legend.selected[keyName] = false
+          }else{
+            option.legend.selected[keyName] = true
+          }
+          var sValue = {
+            name: '',
+            type: 'line',
+            smooth: false,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 2
+              }
+            },
+            // areaStyle: {},
+            itemStyle: {},
+            data: []
+          }
+          sValue.name = keyName
+          sValue.data = datas[key]
+          // sValue.areaStyle = this.lineStyle[index].areaStyle
+          sValue.itemStyle = this.lineStyle[index].itemStyle
+          option.series.push(sValue)
+          index++;
+        }
+        this.chart.setOption(option,true)
+      },
+
+    }
+  }
+</script>
+<style scoped>
+  #nwpcharts{
+    width: 100%;
+    height:calc(80vh - 50px);
+  }
+</style>

ui/src/views/bizManager/nwp/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="24">
+      <!--用户数据-->
+      <el-col :span="24" :xs="24">
+        <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
+          <el-form-item label="起始时间" prop="startTime">
+            <el-date-picker
+              v-model="startTime"
+              :clearable="false"
+              type="datetime"
+              value-format="timestamp"
+              placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="截止时间" prop="endTime">
+            <el-date-picker
+              v-model="endTime"
+              :clearable="false"
+              type="datetime"
+              value-format="timestamp"
+              placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="dateQuery">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+
+    <div class="content">
+      <el-tabs type="card" v-model="activeName" @tab-click="Byresize">
+        <el-tab-pane label="图表" name="first">
+          <chart :drawData = this.drawData :resizeKey=this.resizeKey  />
+        </el-tab-pane>
+        <el-tab-pane label="表格" name="second">
+          <div class="tableContent">
+            <vxe-table
+              id="fstTable"
+              ref="fstRef"
+              border
+              export-config
+              beforeExportMethod=""
+              :auto-resize="true"
+              highlight-hover-row
+              max-height="90%"
+              align="center"
+              :data="tableData">
+              <vxe-table-column  field="preTime" title="预测时间" :formatter="dateFormat" width="180" sortable min-width="150"></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="swr" 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="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>
+            <vxe-pager
+              v-show="showTable"
+              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>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from './charts'
+import resize from '../../../components/Charts/mixins/resize'
+import moment from "moment";
+export default {
+  name: 'nwp',
+  components: { Chart},
+  mixins: [resize],
+  data(){
+    return{
+      showTable: true,
+      chart: null,
+      queryStartTime:'',
+      queryEndTime:'',
+      startTime:new Date(new Date().toLocaleDateString()).getTime()+ 60 * 60 * 24 * 1000,
+      endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000*4-1,
+      loading:false,
+      drawLoading:true,
+      tableLoading:true,
+      resizeKey:1,
+      activeName: 'first',
+      drawData:{datas:[],times:[]},
+      tableData:[],
+      total:0,
+      sortOrder:'asc',
+      pageSize: 10,
+      currentPage: 1,
+      showToolBar:false,
+    }
+  },
+  created () {
+  },
+  mounted() {
+    this.queryStartTime = this.startTime
+    this.queryEndTime = this.endTime
+    this.getDraw()
+    this.getTable()
+
+  },
+  methods:{
+    getDraw(){
+      this.drawLoading = true
+      var searchParams = {
+        startTime: this.queryStartTime,
+        endTime: this.queryEndTime
+      }
+      this.$axios.get('/nwpController/getDraw',{params: searchParams}).then((res) => {
+        this.drawData = res.data
+      }).catch((error) => {
+        this.$message.error('查询实时Nwp echarts出错' + error)
+      })
+    },
+    getTable(){
+      var searchParams = {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        startTime: this.queryStartTime,
+        endTime: this.queryEndTime
+      }
+      this.$axios.get('/nwpController/getAll',
+        {params: searchParams}).then((res) => {
+        this.tableData = res.data.records
+        this.total = res.data.total
+      }).catch((error) => {
+        // this.$message.error(error)
+      })
+    },
+    handlePageChange ({ currentPage, pageSize }) {
+      this.currentPage = currentPage
+      this.pageSize = pageSize
+      this.startTime = this.queryStartTime
+      this.endTime = this.queryEndTime
+      this.loading = true
+      this.getTable();
+    },
+    dateFormat({ cellValue, row, column }) {
+      return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
+    },
+    enumToWord({ cellValue, row, column }) {
+      if(cellValue == "E1"){
+        return "云端模型"
+      }
+      if(cellValue == 'E2'){
+        return "物理模型"
+      }
+      if(cellValue == 'E3'){
+        return "统计模型"
+      }
+      if(cellValue == 'E4'){
+        return "补录数据"
+      }
+      if(cellValue == 'E5'){
+        return "差值模型"
+      }
+    },
+    dateMoment({ cellValue, row, column }) {
+      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
+    },
+    sortChangeEvent ({ column, property, order }) {
+      if(order == null){
+        order = 'asc'
+      }
+      this.currentPage = 1
+      this.sortOrder = order
+      this.loading = true
+      this.getTable()
+    },
+
+    checkColumnMethod ({ column }) {
+      if (column.property === 'preTime') {
+        return false
+      }
+      return true
+    },
+    dateQuery(){
+      this.loading = true
+      if(this.endTime<=this.startTime){
+        this.$message.error("开始时间不能大于结束时间")
+        // this.startTime = this.queryStartTime
+        // this.endTime = this.queryEndTime
+        this.loading = false
+        return
+      }
+      if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*3){
+        // this.startTime = this.queryStartTime
+        // this.endTime = this.queryEndTime
+        this.$message.error("只能最多查询3天的数据哦")
+        this.loading = false
+        return
+      }
+      this.queryStartTime = this.startTime
+      this.queryEndTime = this.endTime
+      this.getDraw(this.queryStartTime,this.queryEndTime)
+      this.getTable()
+    },
+    Byresize(tab){
+      if(tab.name =='first'){
+        this.resizeKey++
+        this.showToolBar = false
+      }else{
+        this.showToolBar = true
+      }
+
+    },
+  }
+}
+</script>
+
+<style scoped>
+.chart-container{
+  position:relative;
+  width:100%;
+  height:calc(100vh - 50px);
+}
+
+.filter{
+  position:relative;
+  display:flex;
+  padding:20px 0 10px 15px;
+  font-size:12px;
+  line-height:11px;
+  color:white;
+}
+
+input{
+  background:transparent;
+  border:none;
+  color:white;
+}
+
+.timeText{
+  opacity:0.69;
+  padding-right:7px;
+  font-size:14px;
+}
+
+.startTime{
+  display:inline-block;
+}
+
+.endTime{
+  display:inline-block;
+  padding-left:42px;
+}
+
+
+.timeQuery{
+  background:transparent;
+}
+
+.filter{
+  width: 100%;background-color: transparent;height: 10%
+}
+.filter >>> input{
+  background:transparent;
+  border:none;
+  color:white;
+}
+.content{
+  width: 100%;
+  background-color: transparent;
+  height: 90%;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+
+
+.tableContent{
+  width: 100%;
+  height:calc(80vh - 50px);
+}
+.tableContent >>> td{
+  border:1px solid #ffffff;
+}
+
+.rtPageturning >>> button,
+.rtPageturning >>> span,
+.rtPageturning >>> input,
+.rtPageturning >>> .vxe-pager--btn-wrapper li{
+  background-color: transparent !important;
+  color: #ffffff !important;
+  border: 1px solid #ffffff;
+}
+.rtPageturning >>> span{
+  border:none
+}
+.rtPageturning >>> .vxe-pager--wrapper .vxe-pager--btn-wrapper li:not(.disabled).is--active {
+  background-color: #9f9fa0 !important;
+}
+.toolbar{
+  position:absolute;right:0px;
+}
+.toolbar >>> .vxe-button.type--button.is--circle {
+  padding: 0 .5em;
+  min-width: 34px;
+  border-radius: 10%;
+  border: none;
+  background: transparent;
+  color: white;
+}
+
+
+</style>
+

ui/src/views/curvecolors.js

@@ -0,0 +1,76 @@
+export default {
+  //实际功率
+  sj: '#FF4136',
+  //短期
+  dq: '#0066CC',
+  //超短期
+  cdq: '#FFD700',
+  //可用功率
+  kygl: '#2ECC40',
+  //理论功率
+  llgl: '#F012BE',
+  //测风测光法理论
+  cfgf: '#85144b',
+  //样板机法理论
+  ybjf: '#39CCCC',
+  //测风测光法可用
+  kycfgf: '#921AFF',
+  //样板机法可用
+  kyybjf: '#cf20e2',
+  //机头风速理论
+  lljtfsf: '#4F9D9D',
+  //机头风速可用
+  kyjtfsf: '#B87070',
+  //总辐射
+  zfs: '#8A2BE2',
+  //散辐射
+  sfs: '#FF8C00',
+  //直辐射
+  zhfs: '#0000E3',
+  //斜辐射
+  xfs: '#73BF00',
+  // nwp辐射
+  nwpfs: '#FF6666',
+  // nwp直辐射
+  nwpzhfs: '#6699FF',
+  // nwp散辐射
+  nwpsfs: '#FF95CA',
+  // 轮毂高度风速
+  lggdfs: '#FF95CA',
+  ws10: '#8A2BE2',
+  ws30: '#FF8C00',
+  ws50: '#0000E3',
+  ws60: '#85144b',
+  ws70: '#A8FF24',
+  ws80: '#FF6666',
+  ws90: '#6699FF',
+  ws100: '#FF95CA',
+  ws110: '#FFBB77',
+  ws120: '#98FB98',
+  wsHubHeight: '#0066CC',
+  nwp10: '#00FFFF',
+  nwp30: '#2894FF',
+  nwp50: '#9393FF',
+  nwp70: '#FF44FF',
+  nwp80: '#f1d4d4',
+  nwp90: '#C07AB8',
+  nwp100: '#4F9D9D',
+  nwp170: '#B87070',
+
+  line1: "#FFD700",
+  line2: "#2ECC40",
+  line3: "#F012BE",
+  line4: "#85144b",
+  line5: "#39CCCC",
+  line6: "#8A2BE2",
+  line7: "#FF8C00",
+  line8: "#0000E3",
+  line9: "#73BF00",
+  line10: "#FF6666",
+  line11: "#6699FF",
+  line12: "#FF95CA",
+  line13: "#98FB98",
+  line14: "#0066CC",
+  line15: "#FFBB77",
+  line16: "#921AFF",
+}