hb_sis_zhfx/src/views/NewPages/forecast-system.vue

<template>
  <div class="forecast-system">
    <div class="action-bar mg-b-16">
      <div class="selections">
        <!-- <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">麻黄山</div>
        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">牛首山</div>
        <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">青山</div>
        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">石板泉</div>
        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">香山</div> -->
        <div class="item" v-for="(item) of wpList" :key="item" 
          @click="tabSelect(item)" :class="{ active: wpId == item.id }">{{item.name}}</div>
        
      </div>
    </div>
    <div class="page-body">
      <el-row class="mg-b-16">
        <el-col :span="5" class="fc-info">
          <div class="fc-item">
            <div class="title">{{wpName}}</div>
            <div class="tags">
              <div class="tag">
                <i class="svg-icon svg-icon-gray-l svg-icon-lg">
                  <svg-icon :svgid="'svg-' + weatherInfo.tqtp"/>
                </i>
              </div>
              <div class="tag">
                <div class="tag-title">风速</div>
                <div class="tag-value">{{weatherInfo.fs}}<span class="unit">m/s</span></div>
              </div>
              <div class="tag">
                <div class="tag-title">风向</div>
                <div class="tag-value">{{weatherInfo.fx}}<span class="unit"></span></div>
              </div>
              <div class="tag">
                <div class="tag-title">清晰度</div>
                <div class="tag-value">{{weatherInfo.qxd}}<span class="unit"></span></div>
              </div>
              <div class="tag">
                <div class="tag-title">温度</div>
                <div class="tag-value">{{weatherInfo.wd}}<span class="unit">℃</span></div>
              </div>
              <div class="tag">
                <div class="tag-title">大气压强</div>
                <div class="tag-value">{{weatherInfo.dqyl}}<span class="unit">hPa</span></div>
              </div>
              <div class="tag">
                <div class="tag-title">湿度</div>
                <div class="tag-value">{{weatherInfo.sd}}<span class="unit">%</span></div>
              </div>
              <div class="tag">
                <div class="tag-title">经度</div>
                <div class="tag-value">{{weatherInfo.jingdu}}<span class="unit"></span></div>
              </div>
              <div class="tag">
                <div class="tag-title">纬度</div>
                <div class="tag-value">{{weatherInfo.weidu}}<span class="unit"></span></div>
              </div>
              <div class="tag">
                <div class="tag-title">云量</div>
                <div class="tag-value">{{weatherInfo.yunliang}}<span class="unit"></span></div>
              </div>
              <div class="tag">
                <div class="tag-title">日出时间</div>
                <div class="tag-value">{{weatherInfo.richushijian}}<span class="unit"></span></div>
              </div>
              <div class="tag">
                <div class="tag-title">日落时间</div>
                <div class="tag-value">{{weatherInfo.riluoshijian}}<span class="unit"></span></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="19">
          <panel :title="'损失电量分析'">
            <multiple-bar-line-chart :height="'100%'" 
              :lineData="chart1Line" :barData="chart1Bar"
              :units="['功率（万kW）','电量（万kWh）']"/>
          </panel>
        </el-col>
      </el-row>
      <el-row class="bottom-charts">
        <el-col :span="12">
          <panel :title="'超短期风功率预测'">
            <arrow-line-chart :height="'100%'"  :list="chart2List" :units="['功率（万kW）','风速（m/s）']"/>
          </panel>
        </el-col>
        <el-col :span="12">
          <panel :title="'短期风功率预测'">
            <arrow-line-chart :height="'100%'"  :list="chart3List" :units="['功率（万kW）','风速（m/s）']"/>
          </panel>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
import ArrowLineChart from "../../components/chart/line/arrow-line-chart.vue";
import svgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
export default {
  components: { svgIcon, MultipleBarLineChart, Panel, ArrowLineChart },
  setup() {},
  data() {
    return {
      wpList:[],
      wpId:"MHS_FDC",
      wpName:"麻黄山风电场",
      weatherInfo:{},
      chart1Bar:[],
      chart1Line:[],
      chart2List:[],
      chart3List:[],
      timer:null,
    };
  },
  methods: {
    tabSelect(item) {
      this.wpId = item["id"];
      this.wpName = item["name"];
      {
        this.getData();
        this.getChart1();
        this.getChart3();
      }
    },
    async getWp() {
      const res = await this.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax"
      });
      if(res) {
        this.wpList = res.data.data.filter(ele=>{
          return ele.id.indexOf("_FDC")>-1;
        });
      }
    },
    async getData() {
      const res = await this.API.requestData({
        method: "POST",
        subUrl: "weather/weatherInfo",
        data:{wpId:this.wpId}
      });
      if(res) {
        this.weatherInfo = res.data.data;
      }
    },
    async getChart1() {
      const res = await this.API.requestData({
        method: "POST",
        subUrl: "weather/powerChart",
        data:{wpId:this.wpId}
      });
      if(res) {
        const fdlValue = {title:"电量",yAxisIndex:0,value:[]};
        const glValue = {title:"功率",yAxisIndex:1,value:[]};
        const fsValue = {name:"风速",unit:"m/s",data:[]};
        res.data.data.forEach(e => {
          if(fdlValue.value.length == 0){
            fdlValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: 0});
          }else{
            fdlValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value1});
          }
          glValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value2});
          fsValue.data.push(e.value3);
        });
        this.chart1Bar = [fdlValue,glValue];
        this.chart1Line = fsValue;
      }
    },
    async getChart3() {
      const res = await this.API.requestData({
        method: "POST",
        subUrl: "weather/weatherChart",
        data:{wpId:this.wpId}
      });
      if(res) {
        // 短期预测功率
        {
          const ycglValue = {title:"预测功率",yAxisIndex:0,value:[]};
          const sjglValue = {title:"实际功率",yAxisIndex:0,value:[]};
          const fsValue = {title:"风速",yAxisIndex:1,value:[]};
          let hour = new Date().getHours();
          res.data.data.forEach(e => {
            if(ycglValue.value.length<=(24+hour)) {
              ycglValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value7});
              sjglValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value2});
              fsValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value6});
            }
          });
          this.chart3List = [ycglValue,sjglValue,fsValue];
        }
        // 超短期预测功率
        const cdqGlValue = {title:"预测功率",yAxisIndex:0,value:[]};
        const sjglValue = {title:"实际功率",yAxisIndex:0,value:[]};
        const fsValue = {title:"风速",yAxisIndex:1,value:[]};
        let hour = new Date().getHours();
        res.data.data.forEach(e => {
          if(cdqGlValue.value.length<=(4+hour)) {
            cdqGlValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value4});
            sjglValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value2});
            fsValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value6});
          }
        });
        this.chart2List = [cdqGlValue,sjglValue,fsValue];
      }
    },
  },
  created() {
    this.getWp();
    let that = this;
    that.$nextTick(() => {
      that.getData();
      that.getChart1()
      that.getChart3();
      that.timer = setInterval(() => {
        that.getData();
        that.getChart1()
        that.getChart3();
      }, 60000);
    });
  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less">
.forecast-system {
  .com-panel{
    .panel-body{
      height: 43vh;
    }
  }
  .bottom-charts{
    .panel-body{
      height: 35vh;
    }
  }
  .action-bar {
    .selections {
      flex: 1 0 auto;
      display: flex;

      .item {
        flex: 0 0 94px;
        text-align: center;
        height: 33px;
        line-height: 33px;
        margin-right: 8px;
        color: @font-color;
        font-size: @fontsize-s;
        background: fade(@gray, 20);
        border: 1px solid fade(@gray, 20);

        &:hover,
        &.active {
          background: fade(@green, 20);
          border: 1px solid @green;
          color: @green;
          cursor: pointer;
        }
      }
    }
  }

  // 风场信息
  .fc-info {
    .fc-item {
      & > .title {
        background: fade(@gray, 20);
        padding: 0 1.4815vh;
        line-height: 27px;
        color: fade(@white, 75);
        font-size: @fontsize-s;
        margin-bottom: 0.7407vh;
      }

      & + .fc-item {
        margin-left: 8px;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;

        .tag {
          flex: 1 0 calc(100% / 3 - 8px);
          background: fade(@gray, 20);
          margin-bottom: 8px;
          height: 10vh;
          .tag-title {
            font-size: 12px;
            color: @gray-l;
            line-height: 24px;
            background: fade(@gray, 40);
            text-align: center;
          }

          .tag-value {
            position: relative;
            font-size: 20px;
            color: @green;
            text-align: center;
            padding: 3vh 0;
            .unit {
              position: absolute;
              color: @gray;
              font-size: 12px;
              bottom: 8px;
              right: 8px;
              top: 40%;
            }
          }

          & + .tag {
            margin-left: 8px;
          }

          &:nth-child(1) {
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              width: 56px;
              height: 56px;
              svg {
                width: 56px;
                height: 56px;
              }
            }
          }

          &:nth-child(3n + 1) {
            margin-left: 0px;
          }
        }
      }
    }
  }
}
</style>