hb_sis_zhfx/src/views/NewPages/power-forecast-1.vue

<template>
  <div class="power-forecast-1">
    <div class="left">
      <el-row class="mg-b-16">
        <el-col :span="4">
          <panel :title="'预测电量'">
            <list-bar-chart :list="listBarData1" :colors="listBarData1Color" :height="'15vh'" />
            <div class="dashboard">
              <dashboard-2 :height="'8vh'" :width="'115px'" :value="25" />
              <div class="lengends">
                <div class="item">
                  <span class="label">本日预测电量</span>
                  <span class="lengend gary"></span>
                  <span class="value">123</span>
                </div>
                <div class="item">
                  <span class="label">本日已发电量</span>
                  <span class="lengend green"></span>
                  <span class="value">123</span>
                </div>
              </div>
            </div>
            <div class="dashboard">
              <dashboard-2 :height="'8vh'" :width="'115px'" :value="34" />
              <div class="lengends">
                <div class="item">
                  <span class="label">本日预测电量</span>
                  <span class="lengend gary"></span>
                  <span class="value">123</span>
                </div>
                <div class="item">
                  <span class="label">本日已发电量</span>
                  <span class="lengend green"></span>
                  <span class="value">123</span>
                </div>
              </div>
            </div>
          </panel>
        </el-col>
        <el-col :span="20">
          <toolbar-panel :title="'预测电量'">
            <template v-slot:tools>
              <div class="tools">
                <div class="action" :class="{ active: ForecastPowerTab == 0 }" @click="ForecastPowerTabClick(0)">未来4小时</div>
                <div class="action" :class="{ active: ForecastPowerTab == 1 }" @click="ForecastPowerTabClick(1)">未来24小时</div>
                <div class="action" :class="{ active: ForecastPowerTab == 2 }" @click="ForecastPowerTabClick(2)">未来3天</div>
                <div class="action" :class="{ active: ForecastPowerTab == 3 }" @click="ForecastPowerTabClick(3)">未来1周</div>
              </div>
            </template>
            <normal-line-chart :height="'37.037vh'" :showLegend="true" />
          </toolbar-panel>
        </el-col>
      </el-row>
      <div>
        <panel :title="'月发电量指标对比'">
          <multiple-bar-line-chart :height="'44.4444vh'" :barData="barData" />
          <div class="pie-chart">
            <dual-pie-chart height="100%" :width="'100%'" :showLegend="false" />
          </div>
        </panel>
      </div>
    </div>
    <div class="right">
      <panel-3 class="right-panel">
        <div class="title">
          预测准确率
        </div>
        <div class="items">
          <div class="item" v-for="index in 6" :key="index">
            <percent-bar-2 width="100px" height="90px" :value="percent" :name="'牛首山'" :color="'purple'" />
          </div>
        </div>
      </panel-3>
    </div>
  </div>
</template>

<script>
import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
import PercentBar2 from "../../components/chart/bar/percent-bar-2.vue";
import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
import Dashboard2 from "../../components/chart/other/Dashboard2.vue";
import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
import Panel from "../../components/coms/panel/panel.vue";
import panel3 from "../../components/coms/panel/panel3.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
export default {
  components: { panel3, Panel, NormalLineChart, ListBarChart, Dashboard2, MultipleBarLineChart, ToolbarPanel, PercentBar2, DualPieChart },
  setup() {},
  data() {
    return {
      listBarData1: [
        { name: "未来 {c1|15分钟} 预测电量", value: 123.62 },
        { name: "未来 {c1|4小时} 预测电量", value: 123.62 },
      ],
      listBarData1Color: ["purple", "purple"],
      ForecastPowerTab: 0,
      barData: [
        {
          title: "日发电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 0,
            },
            {
              text: "5日",
              value: 0,
            },
            {
              text: "6日",
              value: 0,
            },
            {
              text: "7日",
              value: 0,
            },
          ],
        },
        {
          title: "上网电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 0,
            },
            {
              text: "5日",
              value: 0,
            },
            {
              text: "6日",
              value: 0,
            },
            {
              text: "7日",
              value: 0,
            },
          ],
        },
        {
          title: "购网电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 0,
            },
            {
              text: "5日",
              value: 0,
            },
            {
              text: "6日",
              value: 0,
            },
            {
              text: "7日",
              value: 0,
            },
          ],
        },
        {
          title: "风速",
          yAxisIndex: 1,
          value: [
            {
              text: "1日",
              value: 1,
            },
            {
              text: "2日",
              value: 2,
            },
            {
              text: "3日",
              value: 1,
            },
            {
              text: "4日",
              value: 0,
            },
            {
              text: "5日",
              value: 0,
            },
            {
              text: "6日",
              value: 0,
            },
            {
              text: "7日",
              value: 0,
            },
          ],
        },
      ],
    };
  },
  methods: {
    ForecastPowerTabClick(tab) {
      this.ForecastPowerTab = tab;
    },
  },
};
</script>

<style lang="less">
.power-forecast-1 {
  display: flex;

  .left {
    flex: 1 0 auto;
    margin-right: 16px;

    .tools {
      display: flex;
      .action {
        font-size: 12px;
        line-height: 20px;
        border-bottom: 1px solid transparent;
        margin-left: 8px;
        cursor: pointer;
        padding-top: 2px;

        &.active,
        &:hover {
          color: @green;
          border-bottom: 1px solid @green;
        }
      }
    }

    .dashboard {
      position: relative;
      display: flex;
      align-items: center;

      .lengends {
        font-size: 12px;
        line-height: 20px;
        padding-left: 12px;
        .item {
          display: flex;
          align-items: center;

          .label {
            margin-right: 8px;
            color: @gray;
          }

          .lengend {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: @gray;
            border-radius: 50%;
            margin-right: 8px;

            &.green {
              background: @green;
            }
          }
          .value {
            color: fade(@white, 75);
          }
        }
      }
    }

    .pie-chart {
      position: absolute;
      width: 350px;
      height: 150px;
      top: 40px;
      right: 16px;
    }
  }

  .right {
    flex: 0 0 145px;

    .right-panel {
      width: 100%;
      height: 100%;

      .title {
        font-size: 12px;
        text-align: center;
      }

      .items {
        position: relative;
        &::before {
          content: " ";

          position: absolute;
          left: 50%;
          height: 94%;
          border-left: 1px dashed fade(@gray, 40);
        }
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-evenly;

        .item {
          flex: 0 0 auto;
        }
      }
    }
  }
}
</style>