hb-neic-project/src/components/stationSvgDetailPages.vue

<template>
  <el-dialog
    width="85%"
    @opened="opened()"
    @closed="closed()"
    :show-close="false"
    class="my-info-dialog"
  >
    <template #title>
      <!-- <div style="margin-top:-10px;color: #FFFFFF;">{{stationName}}</div> -->
      <div class="titleList">
        <div v-for="(item, index) in stationList" :key="index">
          <div
            v-if="item?.id !== currentStation"
            :class="
              index === 0
                ? 'controlTypesLeft'
                : index === stationList.length - 1
                ? 'controlTypesRight'
                : 'controlTypes'
            "
            @click="handleTypeChange(item)"
          >
            {{ item.stationName ||  item.name }}
          </div>
          <div
            v-else
            :class="
              index === 0
                ? 'onControlTypesLeft'
                : index === stationList.length - 1
                ? 'onControlTypesRight'
                : 'onControlTypes'
            "
            @click="handleTypeChange(item)"
          >
            {{ item.stationName ||  item.name  }}
          </div>
        </div>
      </div>
    </template>
    <div>
      <Cl
        ref="svgRef"
        v-if="currentStation == 'CL_FDC' || currentStation == 'CL_SYZ'"
      />
      <KB
        ref="svgRef"
        v-if="currentStation == 'KB_FDC' || currentStation == 'KB_SYZ'"
      />
      <DX
        ref="svgRef"
        v-if="currentStation == 'DX_FDC' || currentStation == 'DX_SYZ'"
      />
      <SY
        ref="svgRef"
        v-if="currentStation == 'SY_FDC' || currentStation == 'SY_SYZ'"
      />
    </div>
  </el-dialog>
</template>

<script>
import Cl from "./BoosterStation/cl.vue";
import KB from "./BoosterStation/kb.vue";
import DX from "./BoosterStation/dx.vue";
import SY from "./BoosterStation/sy.vue";
export default {
  components: {
    Cl,
    KB,
    DX,
    SY,
  },
  props: {
    svgWeb: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      BasicInfo: {},
      line: "",
      currentStation: "",
      alarmTime: "",
      alarmContent: "",
      alarms: [],
      count: false,
      stationList: [],
      types: null,
    };
  },
  created() {},

  methods: {
    closed() {
      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
      this.$refs.svgRef.closed();
      // this.$refs.BasicInfo.end();
      // this.$refs.BasicInfo.labelChange();
      this.$emit("close");
      //clearInterval(this.refreshTimer);
    },
    opened() {
      this.currentStation = this.svgWeb?this.svgWeb:this.$store.state.stationList[0].id;
      this.stationList = this.$store.state.stationList;
	  this.$nextTick(() => {
           this.$refs.svgRef.opened();
        });
    },
    dbClicks(value) {
      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
    },
    handleTypeChange(val) {
      this.currentStation = val.id;
	  this.$nextTick(() => {
           this.$refs.svgRef.opened();
        });
    },
  },
};
</script>
<style scoped>
.my-info-dialog {
  box-shadow: 0px 0px 10px #05bb4c;
}

.body {
  background-color: black;
  margin-top: -30px;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -30px;
  border-bottom: 20px solid rgb(36, 36, 36);
}

.chunkdiv {
  display: flex;
  /* justify-content: center; */
  background-color: #363636;
  margin: 1px;
  padding: 4px 2px;
  font-size: 12px;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 32px;
}

.title {
  font-size: 12px;
  color: #b3b3b3;
}

.titleList {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: -10px;
  color: #ffffff;
}

table {
  margin-left: 2px;
  margin-right: 2px;
}

td {
  width: 20%;
}

el-tabs {
  background-color: black;
}

.svg {
  height: 67vh;
}

.controlTypes {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
}
.controlTypesLeft {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.controlTypesRight {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.onControlTypes {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  background-color: rgba(37, 116, 219, 1);
}
.onControlTypesLeft {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid rgba(37, 116, 219, 1); */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}
.onControlTypesRight {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid rgba(37, 116, 219, 1); */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}
</style>