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
              :width="'100%'"
              :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 MultipleBarLineChart from "./multiple-bar-line-chart1.vue";
// import ArrowLineChart from "../../components/chart/line/arrow-line-chart.vue";
import ArrowLineChart from "./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 api.powercompareWindfarmAllAjax2({});

      // 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 api.weatherWeatherInfo({
        wpId: this.wpId,
      });

      // this.API.requestData({
      //   method: "POST",
      //   subUrl: "weather/weatherInfo",
      //   data: {
      //      wpId: this.wpId
      //      },
      // });
      if (res) {
        console.log("resWeather:", 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 api.benchmarkingLineList({
        wpId: this.wpId,
      });

      // 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>