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

<template>
  <div class="booster-station">
    <div class="btn-group-tabs">
      <BtnGroup2
        :btnGroups="btnGroups"
        :rowIndex="rowIndex"
        :index="selectIndex"
        @select="select"
      ></BtnGroup2>
    </div>
    <!-- 麻黄山 -->
    <MHS class="booster-station-body" v-if="wpId === 'MHS_FDC'" />

    <!-- 牛首山 -->
    <NSS class="booster-station-body" v-if="wpId === 'NSS_FDC'" />

    <!-- 青山 -->
    <QS class="booster-station-body" v-if="wpId === 'QS_FDC'" />

    <!-- 石板泉 -->
    <SBQ class="booster-station-body" v-if="wpId === 'SBQ_FDC'" />

    <!-- 香山 -->
    <XS class="booster-station-body" v-if="wpId === 'XS_FDC'" />

    <!-- 大武口 -->
    <DWK class="booster-station-body" v-if="wpId === 'DWK_GDC'" />

    <!-- 平罗一期 -->
    <PL1 class="booster-station-body" v-if="wpId === 'PL_GDC'" />

    <!-- 平罗二期 -->
    <PL2 class="booster-station-body" v-if="wpId === 'PL_GDC'" />

    <!-- 宣和 -->
    <XH class="booster-station-body" v-if="wpId === 'XH_GDC'" />

    <!-- 马场湖 -->
    <MCH class="booster-station-body" v-if="wpId === 'MCH_GDC'" />
  </div>
</template>

<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
// import bsx6 from "../components/bsx6.vue";
import MHS from "../components/boosterstation/mhs.vue";
import NSS from "../components/boosterstation/nss.vue";
import QS from "../components/boosterstation/qs.vue";
import SBQ from "../components/boosterstation/sbq.vue";
// import SBDL from "../components/boosterstation/sbdl.vue";
import XS from "../components/boosterstation/xs.vue";
import DWK from "../components/boosterstation/dwk.vue";
import PL1 from "../components/boosterstation/pl1.vue";
import PL2 from "../components/boosterstation/pl2.vue";
import XH from "../components/boosterstation/pl2.vue";
import MCH from "../components/boosterstation/mch.vue";

export default {
  // 名称
  name: "BoosterStation",
  // 使用组件
  components: {
    // bsx6,
    BtnGroup2,
    MHS,
    NSS,
    QS,
    SBQ,
    // SBDL,
    XS,
    DWK,
    PL1,
    PL2,
    XH,
    MCH,
  },
  // 数据
  data() {
    return {
      wpId: undefined,
      selectIndex: 0,
      rowIndex: 0,
      btnGroups: [
        {
          icon: "svg-wind-site",
          btns: [],
        },
        {
          icon: "svg-photovoltaic",
          btns: [],
        },
      ],
    };
  },
  created() {
    let that = this;
    that.wpId = that.$route.params.wpId;
    that.$nextTick(() => {
      that.getWp();
    });
  },
  // 函数
  methods: {
    select(res) {
      console.log(2333, res.code);
      this.$router.replace({
        path: `/monitor/windsite/boosterstation/${res.code}`,
      });
    },
    getWp() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success(res) {
          let btnGroup = [
            {
              icon: "svg-wind-site",
              btns: [],
            },
            {
              icon: "svg-photovoltaic",
              btns: [],
            },
          ];

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

          that.btnGroups = btnGroup;
          that.renderBtnActiveIndex();
        },
      });
    },
    renderBtnActiveIndex() {
      this.btnGroups.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
  watch: {
    $route(res) {
      this.wpId = res.params.wpId;
      if (res.params.wpId) {
        this.renderBtnActiveIndex();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.booster-station {
  width: 100%;
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;
  }

  .booster-station-body {
    flex-grow: 1;
    margin-top: 20px;
  }
}
</style>