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 :data="cftmap"></WindTower>
    <dash-pie-chart class="pie-left" title="空气密度" :value="cftmap.KQMD || 0" height="9.722vh" width="9.722vh" />
    <dash-pie-chart class="pie-right" title="压强" :value="cftmap.FCCFTYQ || 0" height="9.722vh" width="9.722vh" />
    <Panel class="panel-top" title="日资源玫瑰图">
      <div class="direction-chart">
        <DirectionRadarChart width="70%" height="152px" :value="rmgtmap" />
        <div class="legend">
          <span class="dot bg-purple"></span>
          <span>{{ rmgtTitle || "" }}</span>
        </div>
      </div>
    </Panel>
    <Panel class="panel-bottom" title="月资源玫瑰图">
      <div class="direction-chart">
        <DirectionRadarChart width="70%" height="152px" :value="ymgtmap" />
        <div class="legend">
          <span class="dot bg-purple"></span>
          <span>{{ ymgtTitle || "" }}</span>
        </div>
      </div>
    </Panel>
    <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">预测功率4小时</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-blue"></div>
            <div class="legend-text">保证功率</div>
          </div>
          <div class="tool-block">
            <div class="legend bg-pink"></div>
            <div class="legend-text">风速</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 Panel from "@com/coms/panel/panel.vue";
import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
import WindTower from "./Tower/WindTower.vue";
import DashPieChart from "@com/chart/pie/dash-pie-chart.vue";
import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
export default {
  // 名称
  name: "Tower",
  // 使用组件
  components: {
    Wave,
    Windmill,
    ToolbarPanel,
    MultipleLineChart,
    WindTower,
    DashPieChart,
    Panel,
    DirectionRadarChart,
  },
  // 传入参数
  props: {},
  // 自定义事件
  emits: {},
  // 数据
  data() {
    return {
      timmer: null, // 计时器
      cftmap: {},
      glvos: [],
      rmgtmap: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [
          {
            value: [44200, 14200, 20000, 35000, 50000, 38000],
            name: "",
          },
        ],
      },
      rmgtTitle: "",
      ymgtmap: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [
          {
            value: [44200, 14200, 20000, 35000, 50000, 38000],
            name: "",
          },
        ],
      },
      ymgtTitle: "",
      // 日发电量
      Powertrend: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
    };
  },
  // 函数
  methods: {
    // 请求服务
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "monitor/findCftInfo",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          let rmgtmap = {
            indicator: [],
            data: [
              {
                value: [],
                name: "",
              },
            ],
          };

          let ymgtmap = {
            indicator: [],
            data: [
              {
                value: [],
                name: "",
              },
            ],
          };

          res.data.rmgtmap.data.forEach((ele) => {
            rmgtmap.indicator.push(ele.name);
            rmgtmap.data[0].value.push(ele.data1);
          });

          res.data.ymgtmap.data.forEach((ele) => {
            ymgtmap.indicator.push(ele.name);
            ymgtmap.data[0].value.push(ele.data1);
          });

          that.rmgtmap = rmgtmap;
          that.rmgtTitle = res.data.rmgtmap.jfpl;

          that.ymgtmap = ymgtmap;
          that.ymgtTitle = res.data.ymgtmap.jfpl;

          let units = ["(万kw)", "(米/s)"];
          let keyArray = ["value1", "value2", "value3", "value4", "value5", "value6"];

          let Powertrend = {
            units,
            value: [
              {
                title: "应发功率",
                yAxisIndex: 0, // 使用单位
                value: [],
              },
              {
                title: "实发功率",
                yAxisIndex: 0, // 使用单位
                value: [],
              },
              {
                title: "理论功率",
                yAxisIndex: 0, // 使用单位
                value: [],
              },
              {
                title: "预测功率",
                yAxisIndex: 0, // 使用单位
                value: [],
              },
              {
                title: "保证功率",
                yAxisIndex: 0, // 使用单位
                value: [],
              },
              {
                title: "保证功率",
                yAxisIndex: 0, // 使用单位
                value: [],
              },
              {
                title: "平均风速",
                yAxisIndex: 1, // 使用单位
                value: [],
              },
            ],
          };

          keyArray.forEach((key, keyIndex) => {
            res.data.glvos.forEach((ele) => {
              Powertrend.value[keyIndex].value.push({
                text: new Date(ele.time).formatDate("hh:mm"),
                value: ele[key],
              });
            });
          });

          that.cftmap = res.data.cftmap;
          that.Powertrend = Powertrend;
        },
      });
    },
  },

  created() {
    let that = this;
    that.wpId = that.$route.params.wpId;
    that.$nextTick(() => {
      that.requestData(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
    });
  },

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</script>

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

  .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;
  }

  .direction-chart {
    .legend {
      display: flex;
      align-items: center;
      justify-content: center;

      .dot {
        width: 7px;
        height: 7px;
        display: inline-block;
        margin-right: 8px;
      }
    }
  }

  .pie-left,
  .pie-right {
    position: fixed;
    top: 8vh;
  }

  .pie-left {
    left: 5vh;
  }

  .pie-right {
    left: 20vh;
  }

  .panel-top,
  .panel-bottom {
    position: fixed;
    right: 10vh;
    width: 36vh;
    height: 24vh;
  }

  .panel-top {
    top: 7vh;
  }

  .panel-bottom {
    top: 35vh;
  }

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