jn_sis_zhfx/src/views/stateMonitor/focus/syzDetails.vue

<template>
  <!-- 头部按钮选项 -->
  <HeaderNav @firstRender="firstRender" :isAll="true" />
  <!-- <BSHeaderButton :type="stationType" @renderData="renderData"/> -->
  <div class="syzDetailsPaneItem">
    <div class="buttonGroup">
      <el-button-group>
        <el-button
          size="small"
          @click="changeHeight('D')"
          :class="allHeight === 'D' ? 'showSty' : ''"
          >大图标
        </el-button>
        <el-button
          size="small"
          @click="changeHeight('Z')"
          :class="allHeight === 'Z' ? 'showSty' : ''"
          >中图标
        </el-button>
        <el-button
          size="small"
          @click="changeHeight('X')"
          :class="allHeight === 'X' ? 'showSty' : ''"
          >小图标
        </el-button>
      </el-button-group>
    </div>
    <div
      v-if="activeTab == -1"
      :style="allpageHeight"
      style="width: 100%; display: grid; overflow-y: auto"
    >
      <!-- 小五台-->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('XWT')"
      >
        <div class="cover"></div>
        <XWT class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("XWT") }}</span>
        </div>
      </div>
      <!-- 败虎堡 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('BHB')"
      >
        <div class="cover"></div>
        <BHB class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("BHB") }}</span>
        </div>
      </div>
      <!-- 禹丰 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('YF')"
      >
        <div class="cover"></div>
        <YF class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("YF") }}</span>
        </div>
      </div>
      <!-- 败虎堡三期 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('BHB3')"
      >
        <div class="cover"></div>
        <BHBSQ class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("BHB3") }}</span>
        </div>
      </div>
      <!-- 盘道梁 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('PDL')"
      >
        <div class="cover"></div>
        <PDL class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("PDL") }}</span>
        </div>
      </div>
      <!-- 牛家岭 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('NJL')"
      >
        <div class="cover"></div>
        <NJL class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("NJL") }}</span>
        </div>
      </div>

      <!-- 丁家窑 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('DJY')"
      >
        <div class="cover"></div>
        <DJY class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("DJY") }}</span>
        </div>
      </div>
      <!-- 高家堰 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('GJY')"
      >
        <div class="cover"></div>
        <GJY class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("GJY") }}</span>
        </div>
      </div>

      <!-- 平头镇 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('PTZ')"
      >
        <div class="cover"></div>
        <PTZ class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("PTZ") }}</span>
        </div>
      </div>

      <!-- 红石峁 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('HSM')"
      >
        <div class="cover"></div>
        <HSM class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("HSM") }}</span>
        </div>
      </div>

      <!-- 朱坑 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('ZK')"
      >
        <div class="cover"></div>
        <ZK class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("ZK") }}</span>
        </div>
      </div>
      <!-- 羊头崖 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('YTY')"
      >
        <div class="cover"></div>
        <YTY class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("YTY") }}</span>
        </div>
      </div>
      <!-- 尹灵芝 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('YLZ')"
      >
        <div class="cover"></div>
        <YLZ class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("YLZ") }}</span>
        </div>
      </div>

      <!-- 米粮局 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('MLJ')"
      >
        <div class="cover"></div>
        <MLJ class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("MLJ") }}</span>
        </div>
      </div>
    </div>
    <!-- 风场 *************** -->

    <!-- 光伏 *************** -->
    <div
      v-if="activeTab == -2"
      :style="allpageHeight"
      style="width: 100%; display: grid; overflow-y: auto"
    >
      <!-- 右玉右卫 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('YY')"
      >
        <div class="cover"></div>
        <GFyouyuyouwei class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("YY") }}</span>
        </div>
      </div>

      <!-- 平鲁阻虎 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('PL')"
      >
        <div class="cover"></div>
        <GFpingluzuhu class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("PL") }}</span>
        </div>
      </div>
      <!-- 应县晶辉 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('YX')"
      >
        <div class="cover"></div>
        <GFyingxianjinghui class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("YX") }}</span>
        </div>
      </div>
      <!-- 天镇旭升 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('TZ')"
      >
        <GFtianzhenxusheng class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("TZ") }}</span>
        </div>
      </div>
      <!-- 阳高蔚家堡 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('YG')"
      >
        <div class="cover"></div>
        <GFyanggaoweijiabao class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("YG") }}</span>
        </div>
      </div>
      <!-- 方山孙家山 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('FS')"
      >
        <div class="cover"></div>
        <GFfangshansunjiashan class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("FS") }}</span>
        </div>
      </div>

      <!-- 山阴荣新 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('SY')"
      >
        <div class="cover"></div>
        <GFshanyinrongxin class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("SY") }}</span>
        </div>
      </div>

      <!-- 怀仁初晨 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('HR')"
      >
        <div class="cover"></div>
        <GFhuairenchuchen class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("HR") }}</span>
        </div>
      </div>
      <!-- 屯留吾元 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('TL')"
      >
        <div class="cover"></div>
        <GFtunliuwuyuan class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("TL") }}</span>
        </div>
      </div>

      <!-- 繁峙均然 -->
      <div
        class="showAllSvgMsg"
        :style="getStyle(allHeight)"
        @dblclick="handleClick('JR')"
      >
        <div class="cover"></div>
        <GFfanshijunran class="booster-station-body" />
        <div class="showAllSvgMsg_bot">
          <span>{{ getStationName("JR") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BSHeaderButton from "../factoryMonitor/components/BSHeaderButton.vue";

// 风场
import GJY from "../factoryMonitor/windPowerPlant/boosterStation/components/GJY.vue";
import BHB from "../factoryMonitor/windPowerPlant/boosterStation/components/BHB.vue";
import BHBSQ from "../factoryMonitor/windPowerPlant/boosterStation/components/BHBSQ.vue";
import DJY from "../factoryMonitor/windPowerPlant/boosterStation/components/DJY.vue";
import HSM from "../factoryMonitor/windPowerPlant/boosterStation/components/HSM.vue";
import NJL from "../factoryMonitor/windPowerPlant/boosterStation/components/NJL.vue";
import PDL from "../factoryMonitor/windPowerPlant/boosterStation/components/PDL.vue";
import PTZ from "../factoryMonitor/windPowerPlant/boosterStation/components/PTZ.vue";
import XWT from "../factoryMonitor/windPowerPlant/boosterStation/components/XWT.vue";
import YTY from "../factoryMonitor/windPowerPlant/boosterStation/components/YTY.vue";
import YLZ from "../factoryMonitor/windPowerPlant/boosterStation/components/YLZ.vue";
import YF from "../factoryMonitor/windPowerPlant/boosterStation/components/YF.vue";
import ZK from "../factoryMonitor/windPowerPlant/boosterStation/components/ZK.vue";
import MLJ from "../factoryMonitor/windPowerPlant/boosterStation/components/MLJ.vue";
import GFshanyinrongxin from "../factoryMonitor/photovoltaic/lightBoosterStation/components/shanyinrongxin.vue";
import GFfangshansunjiashan from "../factoryMonitor/photovoltaic/lightBoosterStation/components/fangshansunjiashan.vue";
import GFfanshijunran from "../factoryMonitor/photovoltaic/lightBoosterStation/components/fanshijunran.vue";
import GFhuairenchuchen from "../factoryMonitor/photovoltaic/lightBoosterStation/components/huairenchuchen.vue";
import GFpingluzuhu from "../factoryMonitor/photovoltaic/lightBoosterStation/components/pingluzuhu.vue";
import GFtianzhenxusheng from "../factoryMonitor/photovoltaic/lightBoosterStation/components/tianzhenxusheng.vue";
import GFtunliuwuyuan from "../factoryMonitor/photovoltaic/lightBoosterStation/components/tunliuwuyuan.vue";
import GFyanggaoweijiabao from "../factoryMonitor/photovoltaic/lightBoosterStation/components/yanggaoweijiabao.vue";
import GFyingxianjinghui from "../factoryMonitor/photovoltaic/lightBoosterStation/components/yingxianjinghui.vue";
import GFyouyuyouwei from "../factoryMonitor/photovoltaic/lightBoosterStation/components/youyuyouwei.vue";
import ABS from "./allBoosterStation";
import HeaderNav from "@/components/headerNavSta/index.vue";
import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
export default {
  name: "boosterStation",
  components: {
    HeaderNav,
    // BSHeaderButton,
    GJY,
    BHB,
    BHBSQ,
    MLJ,
    PDL,
    PTZ,
    XWT,
    YTY,
    YLZ,
    YF,
    ZK,
    NJL,
    HSM,
    DJY,
    GFshanyinrongxin,
    GFfangshansunjiashan,
    GFfanshijunran,
    GFhuairenchuchen,
    GFpingluzuhu,
    GFtianzhenxusheng,
    GFtunliuwuyuan,
    GFyanggaoweijiabao,
    GFyingxianjinghui,
    GFyouyuyouwei,
    // ABS,
  },
  data() {
    return {
      stationType: "-1",
      wpId: "",
      activeTab: -1,
      allHeight: "D",
      stationList: [],
    };
  },
  created() {
    this.getStation();
  },
  computed: {
    allpageHeight() {
      let obj = {
        height: "calc(100% - 34px)",
        gridGap: "15px",
      };
      if (this.allHeight == "D") {
        obj.gridTemplateColumns = "auto auto auto";
      } else if (this.allHeight == "Z") {
        obj.gridTemplateColumns = "auto auto auto auto";
      } else if (this.allHeight == "X") {
        obj.gridTemplateColumns = "auto auto auto auto auto";
        obj.gridAutoRows = "245px";
      }
      return obj;
    },
  },
  methods: {
    firstRender(activeTab) {
      this.activeTab = activeTab;
      this.getStation();
    },
    changeHeight(type) {
      this.allHeight = type;
    },
    getStationName(key, type = "") {
      if (this.stationList.length) {
        let ele = this.stationList.find((item) => {
          let arr = item.id.split("_");
          if (arr[2] == key) {
            return item;
          }
        });
        if (type && type.length) {
          return ele?.id;
        }
        return ele?.name;
      }
    },
    getStyle(type) {
      if (type === "D") {
        return {
          height: "400px",
        };
      } else if (type === "Z") {
        return {
          height: "300px",
        };
      } else {
        return {
          height: "245px",
        };
      }
    },
    getStation() {
      GetStationByCompany({
        companyids: "KGDL_FGS",
        type: this.activeTab,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.stationList = res.data.data;
        }
      });
    },
    handleClick(key) {
      console.log(key);
      if (this.activeTab == -1) {
        this.$router.push({
          path: "/stateMonitor/factoryMonitor/windPowerPlant/boosterStation",
          query: {
            wpid: this.getStationName(key, "id"),
            wpname: this.getStationName(key),
          },
        });
      } else if (this.activeTab == -2) {
        this.$router.push({
          path: "/stateMonitor/factoryMonitor/photovoltaic/lightBoosterStation",
          query: {
            wpid: this.getStationName(key, "id"),
            wpname: this.getStationName(key),
          },
        });
      }
    },
    handleDbclick(key) {
      console.log(key);
    },
    renderData(company, wpId) {
      this.wpId = wpId;
    },
    refData(wpId) {
      this.wpId = wpId;
    },
  },
};
</script>
<style lang="less" scoped>
.syzDetailsPaneItem {
  position: relative;
  padding: 0 20px 10px 20px;
  height: calc(100% - 57px);
  .buttonGroup {
    margin-bottom: 10px;
    display: flex;
    // justify-content: end;
    float: right;

    .el-button-group {
      .el-button {
        min-height: 30px !important;
        background-color: rgba(5, 187, 76, 0.2);
        border: 1px solid #3b6c53;
        color: #b3b3b3;
      }

      .showSty {
        // color: #409eff;
        // border-color: #c6e2ff;
        // background-color: #ecf5ff;
        border: 1px solid #3b6c53;
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
        outline: 0;
      }
    }
  }

  .warningMaskNew {
    background-color: rgba(186, 50, 55, 0.5);
    animation: fade 2000ms infinite;
    -webkit-animation: fade 2000ms infinite;
  }

  @keyframes fade {
    from {
      opacity: 0.7;
    }

    50% {
      opacity: 0.3;
    }

    to {
      opacity: 0.7;
    }
  }

  @-webkit-keyframes fade {
    from {
      opacity: 0.7;
    }

    50% {
      opacity: 0.3;
    }

    to {
      opacity: 0.7;
    }
  }

  .showAllSvgMsg {
    border: 3px solid #646464;
    border-radius: 10px;
    margin-right: 15px;
    margin-bottom: 15px;
    position: relative;
    &:hover {
      .showAllSvgMsg_bot {
        background: #1f5533;
        span {
          color: #fff;
        }
      }
    }
    .cover {
      position: absolute;
      background: transparent;
      height: calc(100% - 40px);
      width: 100%;
      z-index: 99;
    }
    .booster-station-body {
      height: calc(100% - 40px);
      width: 100%;
    }
    .showAllSvgMsg_bot {
      background: #3a3a3a;
      border-radius: 0 0 8px 8px;
      height: 40px;
      text-align: center;

      span {
        position: relative;
        top: 10px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }

  .alarmIconBox {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;

    i {
      font-size: 20px;
    }
  }
}
</style>