fd_dwgz_zhyw_nx/src/views/WindSite/pages/Map2.vue

<template>
  <div>
    <div class="btn-group-tabs">
      <BtnGroup2
        :gsGroups="gsGroups"
        :selectValue="gsselectValue"
        :btnGroups="btnGroups"
        :rowIndex="rowIndex"
        :index="selectIndex"
        @select="select"
        @selectChange="selectChange"
        :wpId="wpId"
      ></BtnGroup2>
    </div>
    <div class="period">
      期次：
      <div
        class="period-item"
        :class="{ active: periodIndex == val.id }"
        v-for="(val, index) in btnGroups[rowIndex]?.btns[selectIndex]?.pjls"
        :key="index"
        @click="handleChange(val)"
      >
        {{ val.name }}
      </div>
    </div>
    <!-- 羊头崖 -->
    <ytyMap v-if="periodIndex === 'YTY01_GC'" ref="maps"></ytyMap>
    <!-- 败虎堡三期 -->
    <bhb3Map v-if="periodIndex === 'BHB301_GC'" ref="maps"></bhb3Map>
    <!-- 高家堰 -->
    <gjyMap v-if="periodIndex === 'GJY01_GC'" ref="maps"></gjyMap>
    <gjyMap2 v-if="periodIndex === 'GJY02_GC'" ref="maps"></gjyMap2>
    <!-- 红石峁 -->
    <hsmMap v-if="periodIndex === 'HSM01_GC'" ref="maps"></hsmMap>
    <!-- 尹灵芝 -->
    <ylzMap v-if="periodIndex === 'YLZ01_GC'" ref="maps"></ylzMap>
    <!-- 丁家窑 -->
    <djyMap v-if="periodIndex === 'DJY01_GC'" ref="maps"></djyMap>
    <djyMap2 v-if="periodIndex === 'DJY02_GC'" ref="maps"></djyMap2>
    <!-- 牛家岭 -->
    <njlMap v-if="periodIndex === 'NJL01_GC'" ref="maps"></njlMap>
    <njlMap2 v-if="periodIndex === 'NJL02_GC'" ref="maps"></njlMap2>
    <!-- 盘道梁 -->
    <pdlMap v-if="periodIndex === 'PDL01_GC'" ref="maps"></pdlMap>
    <!-- 小五台 -->
    <xwtMap v-if="periodIndex === 'XWT01_GC'" ref="maps"></xwtMap>
    <!-- 败虎堡  一期 -->
    <bhbMap v-if="periodIndex === 'BHB01_GC'" ref="maps"></bhbMap>
    <!-- 平头镇 -->
    <ptzMap v-if="periodIndex === 'PTZ01_GC'" ref="maps"></ptzMap>
    <ptzMap2 v-if="periodIndex === 'PTZ02_GC'" ref="maps"></ptzMap2>
    <!-- 禹风 败虎堡 -->
    <bhbMap2 v-if="periodIndex === 'YF01_GC'" ref="maps"></bhbMap2>
    <yfMap2 v-if="periodIndex === 'YF02_GC'" ref="maps"></yfMap2>
    <!-- 平鲁大河堡 -->
    <pldhbMap v-if="periodIndex === 'GJY03_GC'" ref="maps"></pldhbMap>
    <!-- 朱坑一期 -->
    <zkyqMap v-if="periodIndex === 'ZK01_GC'" ref="maps"></zkyqMap>
    <!-- 米梁局 -->
    <mljMap v-if="periodIndex === 'MLJ01_GC'" ref="maps"></mljMap>

    <syMap2 v-if="periodIndex === 'SY02_GC'" ref="maps"></syMap2>
    <syMap v-if="periodIndex === 'SY01_GC'" ref="maps"></syMap>
  </div>
</template>
<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import api from "@api/cockpit/matrix/index.js";
import gjyMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/gjy-map.vue";
import gjyMap2 from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/gjy-map2.vue";
import hsmMap from "./components/hsm-map.vue";
import ylzMap from "./components/ylz-map.vue";
import ytyMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/yty-map.vue";
import bhb3Map from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/bhb3-map.vue";
import djyMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/djy-map.vue";
import djyMap2 from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/djy-map2.vue";
import njlMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/njl-map.vue";
import njlMap2 from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/njl-map2.vue";
import pdlMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/pdl-map.vue";
import ptzMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/ptz-map.vue";
import ptzMap2 from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/ptz2-map.vue";
import xwtMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/xwt-map.vue";
import yfMap2 from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/yf2-map.vue";
import bhbMap2 from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/bhb2-map.vue";
import bhbMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/bhb-map.vue";
import pldhbMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/pldhb-map.vue";
import zkyqMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/zkyq-map.vue";
import mljMap from "../../stateMonitor/factoryMonitor/windPowerPlant/geomorphologicMap/components/mlj-map.vue";
import syMap2 from "../../stateMonitor/factoryMonitor/photovoltaic/lightGeomorphologicMap/components/sy2-map.vue";
import syMap from "../../stateMonitor/factoryMonitor/photovoltaic/lightGeomorphologicMap/components/sy-map.vue";

export default {
  components: {
    mljMap,
    zkyqMap,
    pldhbMap,
    BtnGroup2,
    gjyMap,
    gjyMap2,
    hsmMap,
    ylzMap,
    ytyMap,
    bhb3Map,
    djyMap,
    djyMap2,
    njlMap,
    njlMap2,
    pdlMap,
    ptzMap,
    ptzMap2,
    xwtMap,
    yfMap2,
    bhbMap,
    bhbMap2,
    syMap2,
    syMap,
  },
  data() {
    return {
      // 定时器
      timer: "",
      gsGroups: [],
      gsselectValue: "",
      selectIndex: 0,
      rowIndex: 0,
      periodIndex: "",
      windturbineList: [],
      btnGroups: [
        {
          icon: "svg-wind-site",
          btns: [],
        },
        {
          icon: "svg-photovoltaic",
          btns: [],
        },
      ],
    };
  },
  created() {
    this.wpId = this.$route.params.wpId;
    this.$nextTick(() => {
      this.getGS();
      this.timer = setInterval(() => {
        this.getWinds();
      }, 3000);
    });
  },
  methods: {
    getGS() {
      api.companysAjax().then((res) => {
        if (res.data) {
          this.gsselectValue = res.data[0].id;
          this.gsGroups = res.data;
          this.getWp();
        }
      });
    },
    selectChange(val) {
      this.gsselectValue = val;
      this.getWp();
    },
    getWp() {
      api
        .windfarmByCmAjax({
          cmId: this.gsselectValue,
        })
        .then((res) => {
          let btnGroups = [
            {
              icon: "svg-wind-site",
              btns: [],
            },
            {
              icon: "svg-photovoltaic",
              btns: [],
            },
          ];

          res.data.forEach((ele, index) => {
            if (ele.id.indexOf("FDC") !== -1) {
              btnGroups[0].btns.push({
                text: ele.name,
                code: ele.id,
                pjls: ele.pjls,
              });
            } else {
              btnGroups[1].btns.push({
                text: ele.name,
                code: ele.id,
                pjls: ele.pjls,
              });
            }
          });
          this.btnGroups = btnGroups;
          this.renderBtnActiveIndex();
        });
    },
    getWinds() {
      api
        .windturbineByPjIdAjax({
          pjId: this.periodIndex,
        })
        .then((res) => {
          if (res.data.length > 0 && this.$refs.maps) {
            this.$refs.maps.dayaDeal(res.data);
          }
        });
    },
    renderBtnActiveIndex() {
      this.btnGroups.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
      this.periodIndex =
        this.btnGroups[this.rowIndex]?.btns[this.selectIndex]?.pjls[0].id;
      this.getWinds();
    },
    handleChange(val) {
      this.periodIndex = val.id;
      this.getWinds();
    },
    select(res) {
      this.$router.replace({
        path: `/monitor/windsite/map2/${res.code}`,
      });
    },
  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },
  watch: {
    $route(res) {
      this.wpId = res.params.wpId;
      if (res.params.wpId) {
        this.getWp();
      }
      this.renderBtnActiveIndex();
    },
  },
};
</script>
<style lang="less" scoped>
.period {
  display: flex;
  flex-direction: row;

  .period-item {
    line-height: 23px;
    font-size: 12px;
    text-align: center;
    margin-right: 4px;
    border: 1px solid #606769;
    border-radius: 2px;
    padding: 0px 5px;
    margin-bottom: 10px;

    &.active {
      color: #ffffff;
      background-color: rgba(75, 85, 174, 0.6);
      border-color: rgba(75, 85, 174, 0.6);
    }
  }
}
</style>