shanxi_control/src/components/focus/focusArea.vue

<template>
  <!-- <div class="body">
    <img class="logo" src="../../assets/img/logo.png" alt="" />
    <div class="title">关注区</div>
    <div class="agc" @click="showAGC">AGC监控</div>
    <div class="booster" @click="showBooster">升压站监控</div>
    <div style="margin-top: 50px; margin-left: 10px; height: 24vh">
      <el-scrollbar>
        <div class="scoll" style="margin-left: 5px">
          <FocusCard></FocusCard>
        </div>
      </el-scrollbar>
    </div>
    <AGCDetails v-model="display"></AGCDetails>
    <StationSvgDetailPages v-model="displayBooster" @close="close">
    </StationSvgDetailPages>
  </div> -->
  <div class="body">
    <img class="logo" src="../../assets/img/logo.png" alt="" />
    <div class="title">关注区</div>
    <!-- <div class="agc" @click="showAGC">AGC监控</div>
    <el-tooltip
      v-if="$store.state.syzBtnFlicker"
      class="box-item"
      effect="light"
      :content="`您有${$store.state.syzAlarmArray.length}条报警未处理`"
      placement="left"
    >
      <div
        class="syz"
        :class="$store.state.syzBtnFlicker ? 'flicker' : ''"
        @click="showSYZ"
      >
        升压站
      </div>
    </el-tooltip> -->
    <!-- <div v-else class="syz" @click="showSYZ">升压站</div> -->
    <div style="margin-top: 50px; margin-left: 10px; height: 24vh">
      <el-scrollbar>
        <div class="scoll" style="margin-left: 5px">
          <FocusCard></FocusCard>
        </div>
      </el-scrollbar>
    </div>
    <!-- <AGCDetails v-model="display"></AGCDetails>
    <SYZDetails v-model="$store.state.syzDialogShow"></SYZDetails> -->
  </div>
</template>
<script>
import FocusCard from "./focusCard.vue";
// import AGCDetails from "./agcDetails.vue";
// import StationSvgDetailPages from "../stationSvgDetailPages.vue";
// import SYZDetails from "./syzDetails.vue";
export default {
  data() {
    return {
      display: false,
      displayBooster: false,
    };
  },
  components: {
    FocusCard,
    // AGCDetails,
    // StationSvgDetailPages,
    // SYZDetails,
  },
  methods: {
    // showAGC() {
    //   this.display = true;
    // },
    // showBooster() {
    //   this.displayBooster = true;
    // },
    // close() {
    //   this.displayBooster = false;
    // },
    // showSYZ() {
    //   this.$store.commit("syzDialogShow", true);
    // },
  },
};
</script>
<style scoped>
/* .box {
  width: 100px;
  height: 20px;

  margin-top: 30px;
}
.body {
  border: 1px solid #373737;
  width: 100%;
  margin-left: 15px;
  margin-top: 10px;
  height: 30.5vh;
}

.body .scoll {
  height: 91%;
}

.title {
  color: #ffffff;
  font-size: 14px;
  margin-left: 32px;
  margin-bottom: 10px;
  width: 29vw;
  height: 50px;
  display: flex;
  align-items: center;
  position: absolute;
  background-color: #000000;
}

.title::before {
  z-index: 1;
  content: "";
  position: absolute;
  left: -18px !important;
  width: 5px;
  height: 5px;
  background-color: rgba(230, 191, 65, 1);
  border-radius: 50%;
}

.logo {
  position: absolute;
  top: 2px;
  left: 12px;
}

.agc {
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  right: 0;
  top: 23px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(37, 116, 219, 1);
}
.booster {
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  right: 100px;
  top: 23px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(37, 116, 219, 1);
} */
.body {
  border: 1px solid #373737;
  width: 100%;
  margin-left: 15px;
  margin-top: 10px;
  height: 30.5vh;
}

.body .scoll {
  height: 91%;
}

.title {
  color: #ffffff;
  font-size: 14px;
  margin-left: 32px;
  /* margin-top: 12px; */
  margin-bottom: 10px;
  /* width: 570px; */
  width: 27vw;
  height: 50px;
  display: flex;
  align-items: center;
  position: absolute;
  background-color: #000000;
}

.title::before {
  z-index: 1;
  content: "";
  position: absolute;
  left: -18px !important;
  /* top: 30px !important; */
  width: 5px;
  height: 5px;
  background-color: rgba(230, 191, 65, 1);
  border-radius: 50%;
}

.logo {
  position: absolute;
  top: 2px;
  left: 12px;
}

.agc,
.syz {
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  right: 0;
  top: 23px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(37, 116, 219, 1);
  cursor: pointer;
}

.syz {
  right: 90px;
  transition: 0.2s;
}

.syz.flicker {
  right: 90px;
  animation: flicker 0.8s infinite;
}

@keyframes flicker {
  0% {
    background: rgba(37, 116, 219);
  }
  50% {
    background: orangered;
  }
  100% {
    background: rgba(37, 116, 219);
  }
}
</style>