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

<template>
  <div class="btn-group-tabs">
    <BtnGroup2
      :btnGroups="btnGroupsss"
      :rowIndex="rowIndex"
      :index="selectIndex"
      @select="select"
    ></BtnGroup2>
  </div>
  <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"
      max="500"
    />
    <Panel class="panel-top" title="日资源玫瑰图" :bgBlur="true">
      <div class="direction-chart">
        <DirectionRadarChart width="100%" height="23vh" :value="rmgtmap" />
        <div class="legend">
          <span class="dot bg-purple"></span>
          <span>{{ rmgtTitle || "" }}</span>
        </div>
      </div>
    </Panel>
    <Panel class="panel-bottom" title="月资源玫瑰图" :bgBlur="true">
      <div class="direction-chart">
        <DirectionRadarChart width="100%" height="23vh" :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>
      </template> -->
      <!-- <template v-slot:default> -->
      <multiple-line-chart
        height="220px"
        :list="Powertrend"
        :units="['(MW)']"
        :showLegend="true"
        :hoverType="'axis'"
      />
      <!-- </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/normal-line-chart";
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";
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
export default {
  // 名称
  name: "Tower",
  // 使用组件
  components: {
    BtnGroup2,
    Wave,
    Windmill,
    ToolbarPanel,
    MultipleLineChart,
    WindTower,
    DashPieChart,
    Panel,
    DirectionRadarChart,
  },
  // 传入参数
  props: {},
  // 自定义事件
  emits: {},
  // 数据
  data() {
    return {
      btnGroupsss: [],
      rowIndex: 1,
      selectIndex: 1,
      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: "",
      DayPower: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      // 72小时功率趋势图
      Powertrend: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
    };
  },
  // 函数
  methods: {
    requestLine() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "genreset/findPowerInfo",
        timeout: 60000,
        data: {
          id: that.wpId,
        },
        success(res) {
          let rdlKey = ["value1", "value2", "value3", "speed"];
          let DayPower = {
            // 图表所用单位
            units: ["(万kWh)", "(m/s)"],
            value: [
              {
                title: "发电量",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "上网电量",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "购网电量",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "实时风速",
                yAxisIndex: 1,
                value: [],
              },
            ],
          };

          let glKey = [
            "value1",
            "value2",
            "value3",
            "value4",
            "value5",
            "value6",
            "value7",
          ];
          let Powertrend = [
            {
              title: "应发功率",
              smooth: true,
              value: [],
            },
            {
              title: "实发功率",
              smooth: true,
              value: [],
            },
            {
              title: "理论功率",
              smooth: true,
              value: [],
            },
            {
              title: "4小时预测功率",
              smooth: true,
              value: [],
            },
            {
              title: "保证功率",
              smooth: true,
              value: [],
            },
            {
              title: "平均风速",
              smooth: true,
              value: [],
            },
            {
              title: "24小时预测功率",
              smooth: true,
              value: [],
            },
          ];

          rdlKey.forEach((keyEle, keyIndex) => {
            res.data.rdlvos.forEach((cEle) => {
              DayPower.value[keyIndex].value.push({
                text: cEle.timestr,
                value: cEle[keyEle],
              });
            });
          });

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

          that.DayPower = DayPower;
          that.Powertrend = Powertrend;
        },
      });
    },
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "monitor/findCftInfo",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          that.cftmap = res.data.cftmap;
        },
      });
    },
    getWp() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success(res) {
          let btnGroups = [
            {
              icon: "svg-wind-site",
              btns: [],
            },
          ];

          res.data.forEach((ele, index) => {
            if (ele.id.indexOf("FDC") !== -1) {
              btnGroups[0].btns.push({
                text: ele.name,
                code: ele.id,
              });
            }
          });

          that.btnGroupsss = btnGroups;
          that.renderBtnActiveIndex();
        },
      });
    },
    renderBtnActiveIndex() {
      this.btnGroupsss.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
    },

    select(res) {
      this.$router.replace({
        path: `/monitor/windsite/tower/${res.code}`,
      });
      this.wpId = res.code;
      this.renderBtnActiveIndex();
      this.requestData(false);
      this.requestLine();
    },
  },

  created() {
    let that = this;
    if (that.$route.params.wpId.indexOf("GDC") !== -1) {
      that.$router.replace({
        path: `/monitor/windsite/tower/MHS_FDC`,
      });
    } else {
      that.$router.replace({
        path: `/monitor/windsite/tower/${that.$route.params.wpId}`,
      });
    }
    that.wpId = that.$route.params.wpId;
    that.getWp();
    that.$nextTick(() => {
      that.requestData(false);
      that.requestLine();
      that.timmer = setInterval(() => {
        that.requestData(false);
        that.requestLine();
      }, 60 * 1000);
    });
  },

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

      .legend-text {
        font-size: @fontsize-s;
        color: #909ba9;
      }
    }
  }

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

  .pie-left {
    left: 5vh;
  }

  .pie-right {
    left: 20vh;
  }

  .thermometer-left,
  .thermometer-right {
    position: fixed;
    top: 20vh;
  }

  .thermometer-left {
    left: 5vh;
  }

  .thermometer-right {
    left: 20vh;
  }

  .panel-top,
  .panel-bottom {
    position: fixed;
    right: 10vh;
    width: 350px;
    // height: 24.352vh;
  }

  .panel-top {
    top: 7vh;
  }

  .panel-bottom {
    top: 37vh;
  }

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