hb_sis_zhfx/src/views/WindSite/pages/Tower.vue

<template>
  <div class="tower">
    <Wave></Wave>
    <Windmill class="windmill-1"></Windmill>
    <Windmill class="windmill-2"></Windmill>
    <Windmill class="windmill-3"></Windmill>
    <Windmill class="windmill-4"></Windmill>
    <Windmill class="windmill-5"></Windmill>
    <WindTower></WindTower>
    <toolbar-panel class="rose-chart" title="日发电量">
      <template v-slot:tools>
        <div class="tools">
          <div class="tool-block">
            <div class="legend bg-green"></div>
            <div class="legend-text">风速</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-purple"></div>
            <div class="legend-text">实际功率</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-orange"></div>
            <div class="legend-text">理论功率</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-yellow"></div>
            <div class="legend-text">保证功率</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-blue"></div>
            <div class="legend-text">预测功率4小时</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-pink"></div>
            <div class="legend-text">预测功率72小时</div>
          </div>
        </div>
      </template>
      <template v-slot:default>
        <!-- 日发电量 -->
        <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="28vh" />
      </template>
    </toolbar-panel>
  </div>
</template>

<script>
import Wave from "@com/three/wave.vue";
import Windmill from "../components/Windmill.vue";
import ToolbarPanel from "@com/coms/panel/toolbar-panel.vue";
import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
import WindTower from "./Tower/WindTower.vue";
export default {
  // 名称
  name: "Tower",
  // 使用组件
  components: {
    Wave,
    Windmill,
    ToolbarPanel,
    MultipleLineChart,
    WindTower,
  },
  // 传入参数
  props: {},
  // 自定义事件
  emits: {},
  // 数据
  data() {
    return {
      // 日发电量
      Powertrend: {
        // 图表所用单位
        units: ["(风速)", "(万KWh)", "(万KWh)", "(万KWh)", "(万KWh)", "(万KWh)"],
        value: [
          {
            title: "风速",
            yAxisIndex: 0, // 使用单位
            value: [
              {
                text: "1日",
                value: 1,
              },
              {
                text: "2日",
                value: 10,
              },
              {
                text: "3日",
                value: 60,
              },
              {
                text: "4日",
                value: 50,
              },
              {
                text: "5日",
                value: 55,
              },
              {
                text: "6日",
                value: 40,
              },
              {
                text: "7日",
                value: 20,
              },
            ],
          },
          {
            title: "实际功率",
            yAxisIndex: 0,
            value: [
              {
                text: "1日",
                value: 2,
              },
              {
                text: "2日",
                value: 22,
              },
              {
                text: "3日",
                value: 32,
              },
              {
                text: "4日",
                value: 24,
              },
              {
                text: "5日",
                value: 56,
              },
              {
                text: "6日",
                value: 70,
              },
              {
                text: "7日",
                value: 65,
              },
            ],
          },
          {
            title: "理论功率",
            yAxisIndex: 0,
            value: [
              {
                text: "1日",
                value: 3,
              },
              {
                text: "2日",
                value: 33,
              },
              {
                text: "3日",
                value: 23,
              },
              {
                text: "4日",
                value: 56,
              },
              {
                text: "5日",
                value: 43,
              },
              {
                text: "6日",
                value: 25,
              },
              {
                text: "7日",
                value: 30,
              },
            ],
          },
          {
            title: "保证功率",
            yAxisIndex: 1,
            value: [
              {
                text: "1日",
                value: 43,
              },
              {
                text: "2日",
                value: 14,
              },
              {
                text: "3日",
                value: 24,
              },
              {
                text: "4日",
                value: 44,
              },
              {
                text: "5日",
                value: 34,
              },
              {
                text: "6日",
                value: 64,
              },
              {
                text: "7日",
                value: 54,
              },
            ],
          },
          {
            title: "预测功率4小时",
            yAxisIndex: 1,
            value: [
              {
                text: "1日",
                value: 45,
              },
              {
                text: "2日",
                value: 55,
              },
              {
                text: "3日",
                value: 64,
              },
              {
                text: "4日",
                value: 24,
              },
              {
                text: "5日",
                value: 34,
              },
              {
                text: "6日",
                value: 42,
              },
              {
                text: "7日",
                value: 14,
              },
            ],
          },
          {
            title: "预测功率72小时",
            yAxisIndex: 1,
            value: [
              {
                text: "1日",
                value: 46,
              },
              {
                text: "2日",
                value: 64,
              },
              {
                text: "3日",
                value: 44,
              },
              {
                text: "4日",
                value: 24,
              },
              {
                text: "5日",
                value: 54,
              },
              {
                text: "6日",
                value: 14,
              },
              {
                text: "7日",
                value: 34,
              },
            ],
          },
        ],
      },
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less">
.tower {
  position: relative;
  width: 100%;
  height: 100%;

  .windmill-1,
  .windmill-2,
  .windmill-3,
  .windmill-4,
  .windmill-5 {
    position: absolute;
  }

  .windmill-1 {
    top: 23.148vh;
    left: 28.333vh;
    width: 4.167vh;
  }
  .windmill-2 {
    top: 8.333vh;
    left: 11.111vh;
    width: 3.426vh;
  }
  .windmill-3 {
    top: 4.63vh;
    left: 38.889vh;
    width: 2.593vh;
  }
  .windmill-4 {
    top: 21.296vh;
    left: 122.87vh;
    width: 3.426vh;
  }
  .windmill-5 {
    top: 5.556vh;
    left: 121.296vh;
    width: 2.407vh;
  }

  .rose-chart {
    position: absolute;
    left: 0;
    bottom: 1.852vh;
    height: 31.481vh;
    width: 100%;
  }

  .tools {
    display: flex;

    .tool-block {
      display: flex;
      align-items: center;
      margin-left: 0.741vh;

      .legend {
        flex: auto;
        width: 0.741vh;
        height: 0.741vh;
        margin-right: 0.741vh;

        &.long {
          width: 2.963vh;
          height: 0.37vh;
        }
      }

      .legend-text {
        color: #ffffff4d;
      }
    }
  }
}
</style>