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

<template>
  <div class="general-appearance">
    <div class="btn-group-tabs">
      <BtnGroup2
        :btnGroups="btnGroups"
        :rowIndex="rowIndex"
        :index="selectIndex"
        @select="select"
      ></BtnGroup2>
    </div>
    <div class="panel-title">
      <div class="panel-title-name">
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/black.png" />
          <span class="sub-title gray">接入台数</span>
          <span class="sub-count font-num white">{{ wpnumMap.jrts }}</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/green.png" />
          <span class="sub-title green">待机台数</span>
          <span class="sub-count font-num green">{{ wpnumMap.djts }}</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/blue.png" />
          <span class="sub-title blue">并网台数</span>
          <span class="sub-count font-num blue">{{ wpnumMap.yxts }}</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/purple.png" />
          <span class="sub-title pink">限电台数</span>
          <span class="sub-count font-num pink">{{ wpnumMap.xdts }}</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/red.png" />
          <span class="sub-title red">故障台数</span>
          <span class="sub-count font-num red">{{ wpnumMap.gzts }}</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/orange.png" />
          <span class="sub-title orange">检修台数</span>
          <span class="sub-count font-num orange">{{ wpnumMap.whts }}</span>
        </div>
        <div class="sub-title-item">
          <img src="../../../assets/map/fan/black.png" />
          <span class="sub-title gray">离线台数</span>
          <span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
        </div>
      </div>
      <div
        class="query-actions btnR"
        v-if="wpId == 'PL01_GC' || wpId == 'PL02_GC'"
      >
        <button
          class="btn"
          :class="wpId == 'PL01_GC' ? 'green' : ''"
          @click="pl('PL01_GC')"
        >
          平罗一期
        </button>
        <button
          class="btn"
          :class="wpId == 'PL02_GC' ? 'green' : ''"
          @click="pl('PL02_GC')"
        >
          平罗二期
        </button>
      </div>
    </div>
    <div>
      <MHS
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'MHS_FDC'"
      />
      <NSS
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'NSS_FDC'"
      />
      <QS
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'QS_FDC'"
      />
      <SBQ
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'SBQ_FDC'"
      />
      <XS
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'XS_FDC'"
      />
      <XH
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'XH_GDC'"
      />
      <DWK
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'DWK_GDC'"
      />
      <PL1
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'PL_GDC'"
      />
      <PL2
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'PL2_GDC'"
      />
      <MCH
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'MCH_GDC'"
      />
      <HZJ
        class="general-appearance-body"
        :data="fjmap"
        :zmmap="zmmap"
        v-if="wpId === 'HZJ_GDC'"
      />
    </div>
  </div>
</template>

<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import MHS from "../components/generalappearance/mhs.vue";
import NSS from "../components/generalappearance/nss.vue";
import QS from "../components/generalappearance/qs.vue";
import SBQ from "../components/generalappearance/sbq.vue";
import XS from "../components/generalappearance/xs.vue";
import XH from "../components/generalappearance/xh.vue";
import DWK from "../components/generalappearance/dwk.vue";
import PL1 from "../components/generalappearance/pl1.vue";
import PL2 from "../components/generalappearance/pl2.vue";
import MCH from "../components/generalappearance/mch.vue";
import HZJ from "../components/generalappearance/hzj.vue";
import api from "@api/cockpit/matrix/index.js";
export default {
  // 名称
  name: "GeneralAppearance",
  // 使用组件
  components: {
    BtnGroup2,
    MHS,
    NSS,
    QS,
    SBQ,
    XS,
    XH,
    DWK,
    PL1,
    PL2,
    MCH,
    HZJ,
  },
  // 数据
  data() {
    return {
      timmer: undefined,
      wpId: undefined, //场站
      wpnumMap: {}, //风机监视数量
      fjmap: [], //场站风机详情
      zmmap: {},
      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();
      that.timmer = setInterval(() => {
        that.requestData();
      }, that.$store.state.websocketTimeSec);
    });
  },
  // 函数
  methods: {
    select(res) {
      this.$router.replace({
        path: `/monitor/windsite/generalappearance/${res.code}`,
      });
    },
    getWp() {
      api.powercompareWindfarmAllAjax().then((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,
            });
            // if(ele.id == 'PL_GDC'){
            // 	btnGroup[1].btns.push({
            // 	  text: '平罗二期光伏电站',
            // 	  code: 'PL2_GDC',
            // 	});
            // }
          }
        });

        this.btnGroups = btnGroup;
        this.renderBtnActiveIndex();
      });

      //   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,
      //           });
      //           // if(ele.id == 'PL_GDC'){
      //           // 	btnGroup[1].btns.push({
      //           // 	  text: '平罗二期光伏电站',
      //           // 	  code: 'PL2_GDC',
      //           // 	});
      //           // }
      //         }
      //       });

      //       that.btnGroups = btnGroup;
      //       that.renderBtnActiveIndex();
      //     },
      //   });
    },
    requestData() {


    api.monitorFindGeneralAppearance({
         wpId: this.wpId,
      }).then((res) => {
            if (res.code == 200) {
            this.wpnumMap = res.data.fczbmap.jczbmap;
            this.fjmap = res.data.fjmap[0];
            this.zmmap = res.data.zmmap;
          }
      });



    //   let that = this;
    //   that.API.requestData({
    //     method: "POST",
    //     subUrl: "monitor/findGeneralAppearance",
    //     data: {
    //       wpId: that.wpId,
    //     },
    //     success(res) {
    //       if (res.code == 200) {
    //         that.wpnumMap = res.data.fczbmap.jczbmap;
    //         that.fjmap = res.data.fjmap[0];
    //         that.zmmap = res.data.zmmap;
    //       }
    //     },
    //   });
    },
    renderBtnActiveIndex() {
      this.btnGroups.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
    },
    pl(a) {
      //单指平罗2个总貌
      this.$router.replace({
        path: `/monitor/windsite/generalappearance/${a}`,
      });
    },
  },
  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
  watch: {
    $route(res) {
      this.wpId = res.params.wpId;
      if (res.params.wpId) {
        this.requestData();
        this.renderBtnActiveIndex();
      }
    },
  },
};
</script>

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

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

  .btnR {
    flex: 1;
    text-align: end;
  }

  .general-appearance-body {
    flex-grow: 1;
  }

  .panel-title {
    width: 100%;
    background-color: fade(@darkgray, 40%);
    margin-top: 1.481vh;
    padding: 6px;
    display: flex;
    align-items: center;

    .panel-title-name {
      color: @green;
      display: flex;
      align-items: center;
      line-height: 0;
      font-size: 0;

      i,
      span {
        margin: 0 0 0 1.481vh;
        line-height: 0;
        font-size: 13px;
      }
    }

    .sub-title-item {
      display: flex;
      align-items: center;
      margin-left: 16px;

      .sub-title {
        font-size: 13px;
        margin-left: 6px;
      }

      .sub-count {
        font-size: 13px;
        font-weight: 500;
      }

      img {
        height: 31px;
      }
    }
  }
}
</style>