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

<template>
  <div class="syz-details">
    <!-- 头部按钮选项 -->
    <HeaderNav class="header" @firstRender="firstRender" :isAll="true" />
    <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 class="syzDetailsPaneItem">
      <div
        v-if="activeTab == -1"
        :style="allpageHeight"
        style="width: 100%; display: grid; overflow-y: auto"
        v-loading="loading"
        element-loading-background="rgba(4, 12, 11, 0.8)"
        element-loading-text="加载中..."
      >
        <!-- 小五台-->
        <div
          title="双击跳转详情"
          class="showAllSvgMsg"
          v-if="getStationName('XWT') != ''"
          :class="{ alarm: getAlarm('XWT') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('BHB') != ''"
          :class="{ alarm: getAlarm('BHB') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('YF') != ''"
          :class="{ alarm: getAlarm('YF') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('BHB3') != ''"
          :class="{ alarm: getAlarm('BHB3') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('PDL') != ''"
          :class="{ alarm: getAlarm('PDL') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('NJL') != ''"
          :class="{ alarm: getAlarm('NJL') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('DJY') != ''"
          :class="{ alarm: getAlarm('DJY') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('GJY') != ''"
          :class="{ alarm: getAlarm('GJY') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('PTZ') != ''"
          :class="{ alarm: getAlarm('PTZ') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('HSM') != ''"
          :class="{ alarm: getAlarm('HSM') }"
          :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"
          title="双击跳转详情"
          v-if="getStationName('ZK') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('ZK') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('YTY') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('YTY') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('YLZ') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('YLZ') }"
          @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"  title="双击跳转详情" v-if="getStationName('')!=''"
        :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"
        v-loading="loading"
        element-loading-background="rgba(4, 12, 11, 0.8)"
        style="width: 100%; display: grid; overflow-y: auto"
      >
        <!-- 右玉右卫 -->
        <div
          class="showAllSvgMsg"
          title="双击跳转详情"
          v-if="getStationName('YY') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('YY') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('PL') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('PL') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('YX') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('YX') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('TZ') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('TZ') }"
          @dblclick="handleClick('TZ')"
        >
          <GFtianzhenxusheng class="booster-station-body" />
          <div class="showAllSvgMsg_bot">
            <span>{{ getStationName("TZ") }}</span>
          </div>
        </div>
        <!-- 阳高蔚家堡 -->
        <div
          class="showAllSvgMsg"
          title="双击跳转详情"
          v-if="getStationName('YG') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('YG') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('FS') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('FS') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('SY') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('SY') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('HR') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('HR') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('TL') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('TL') }"
          @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"
          title="双击跳转详情"
          v-if="getStationName('JR') != ''"
          :style="getStyle(allHeight)"
          :class="{ alarm: getAlarm('JR') }"
          @dblclick="handleClick('JR')"
        >
          <div class="cover"></div>
          <GFfanshijunran class="booster-station-body" />
          <div class="showAllSvgMsg_bot">
            <span>{{ getStationName("JR") }}</span>
          </div>
        </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 HeaderNav from "@/components/headerNavSta/index.vue";
import { GetBoosterlist } 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 {
      loading: false,
      wpId: "",
      activeTab: -1,
      allHeight: "D", //图标选项
      stationList: [],
      stationListAll: [],
    };
  },
  created() {
    this.loading = true;
  },

  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;
    },
    boosterList() {
      return this.$store.state.boosterList;
    },
    alarmList() {
      return this.$store.state.alarmList;
    },
  },
  methods: {
    firstRender(activeTab) {
      this.activeTab = activeTab;
      this.stationList = this.filterBooster(activeTab);
      this.loading = false;
    },
    filterBooster(type) {
      return type == -1
        ? this.boosterList.filter((item) =>
            item.windpowerstationId.includes("FDC")
          )
        : this.boosterList.filter((item) =>
            item.windpowerstationId.includes("GDC")
          );
    },
    changeHeight(type) {
      this.allHeight = type;
    },
    getAlarm(key) {
      if (this.alarmList && this.alarmList.length) {
        // for (let a in this.alarmList) {
        //   if (a.includes(key)) return this.alarmList[a];
        // }
        let a = this.alarmList.find((item) => {
          for (let b in item) {
            if (b.includes(key)) return item;
          }
        });
        return a ? Object.values(a)[0] : false;
      }
    },
    getStationName(key, type = "") {
      if (this.boosterList.length) {
        let ele = this.boosterList.find((item) => {
          let arr = item.windpowerstationId.split("_");
          if (arr[2] == key) {
            return item;
          }
        });
        if (type && type.length) {
          return ele[type];
        }
        return ele?.name ? ele?.name : "";
      }
    },
    getStyle(type) {
      if (type === "D") {
        return {
          height: "400px",
        };
      } else if (type === "Z") {
        return {
          height: "285px",
        };
      } else {
        return {
          height: "245px",
        };
      }
    },
    // getStation() {
    //   GetBoosterlist().then((res) => {
    //     if (res.data && res.data.code == 200) {
    //       this.stationListAll = res.data.data;
    //       this.stationList = this.filterBooster(this.activeTab);
    //       this.loading = false;
    //     }
    //   });
    // },
    handleClick(key) {
      if (this.activeTab == -1) {
        this.$router.push({
          path: "/stateMonitor/factoryMonitor/windPowerPlant/boosterStation",
          query: {
            wpid: this.getStationName(key, "windpowerstationId"),
            bootid: 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, "windpowerstationId"),
            bootid: this.getStationName(key, "id"),
            wpname: this.getStationName(key),
          },
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.syz-details {
  height: 100%;
  padding-top: 16px;
  position: relative;
  .header {
    margin-top: 0px;
  }
  .buttonGroup {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;

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

      .showSty {
        border: 1px solid #3b6c53;
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
        outline: 0;
      }
    }
  }
}
.syzDetailsPaneItem {
  padding: 0 20px 10px 20px;
  height: calc(100% - 57px);

  .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;
    background: url("~@/assets/imgs/syz-bg.png") no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border-radius: 4px;
    margin-right: 15px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    &.alarm {
      background: fade(#3e0707, 50);
      border: 1px solid #3e0707;
      box-shadow: 0 0 2px rgba(#3e0707, 0.3);
      overflow: hidden;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-name: breathe;
      -webkit-animation-duration: 800ms;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;

      .showAllSvgMsg_bot {
        background: rgba(#87240f, 0.5);
        span {
          color: rgba(#fff, 0.5);
        }
      }

      &:hover {
        .showAllSvgMsg_bot {
          background: rgba(#87240f, 1);
          span {
            color: #fff;
          }
        }
      }
    }
    @-webkit-keyframes breathe {
      0% {
        // opacity: 0.4;
        box-shadow: 0 0 2px rgba(#3e0707, 0.4), 0 0 1px rgba(#3e0707, 0.1) inset;
      }

      100% {
        // opacity: 1;
        border: 1px solid rgba(206, 42, 17, 0.7);
        box-shadow: 0 0 30px #780707, 0 0 20px #780707 inset;
      }
    }

    &: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%;
      padding: 2px;
    }
    .showAllSvgMsg_bot {
      background: #0b2612;
      border-radius: 0 0 4px 4px;
      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>