scd_tools_ui/src/pages/netStructPicture/components/dialogIndex.vue

<!-- 整个装置大的弹窗 -->
<template>
  <el-dialog
    @close="cancelClick"
    v-model="isOpen"
    width="93vw"
    append-to-body
    draggable
    top="5vh"
    style="height: 92vh"
  >
    <template #header>
      <div class="my-header">
        <div class="title" v-if="checkData">
          {{ `${checkData.desc}(${checkData.ied_name}) — 详细信息` }}
        </div>
      </div>
    </template>
    <div class="main">
      <div class="main-left">
        <el-input
          v-model="searchInput"
          class="w-50 m-2"
          size="large"
          placeholder="快捷搜索"
          :suffix-icon="Search"
          @change="searchClick"
          style="width: 90%; margin-left: 5%; margin-top: 10px"
        />
        <el-scrollbar height="72vh">
          <p
            v-for="(item, index) in iedRelation"
            :key="index"
            class="scrollbar-demo-item"
            @click="clickLeft(item, index)"
            :class="{ 'left-item-active': activeLeft == index }"
          >
            <span class="ied-name">{{ item.ied_name }}</span
            ><span class="desc">{{ item.desc }}</span>
          </p>
        </el-scrollbar>
      </div>
      <!-- 右侧版块 -->
      <div class="main-right">
        <div class="nav">
          <div
            v-for="(item, index) in navtopData"
            :key="index"
            :class="{ 'nav-item-active': activeNav == index }"
            @click="clickNav(index, item.code)"
            class="nav-item"
          >
            {{ item.name }}
          </div>
        </div>
        <div v-if="inoutName.__name == 'inoutControl'" class="nav">
          <div
            v-for="(item, index) in inoutNav"
            :key="index"
            @click="clickInoutNav(item, index)"
            class="inout"
          >
            <span
              class="inout-item"
              :class="{ 'inout-item-active': inoutItemNavIndex == index }"
              >{{ item.name }}</span
            >
          </div>
        </div>
        <div
          class="main-right-item"
          :class="{
            'inout-right-item': inoutName.__name == 'inoutControl',
            'soures': inoutName.__name == 'virtualRelation',
            'relatio': inoutName.__name == 'relationShip',
          }"
        >
          <!-- @result前的参数是装置关联关系的, -->
          <component
            :is="activeNavName"
            :checkData="checkData"
            :isOpen="isOpen"
            :iedRelation="iedRelation"
            @result="result"
            :isPhoto="isPhoto"
            :tabName="tabName"
            ref="getChild"
          ></component>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
  <script setup>
import {
  onMounted,
  watch,
  ref,
  computed,
  nextTick,
  shallowRef,
  defineEmits,
} from "vue";
import devicePng from "@/assets/image/instruct/device.png";
import { Search } from "@element-plus/icons-vue";
import relationShip from "./relationShip.vue";
import inoutControl from "./inoutControl.vue";
import virtualRelation from "./virtualRelation.vue";
import basicInfo from "./basicInfo.vue";
import fixedEntry from "./fixedEntry.vue";
import infoTable from "./infoTable.vue";
import soureFile from "./soureFile.vue";
const props = defineProps({
  openBig: {
    type: Boolean,
    default: false,
  },
  iedRelationData: {
    type: Object,
    default: () => {},
  },
  checkDialogData: {
    type: Object,
    default: () => {},
  },
});
const isOpen = ref(props.openBig);
const inoutNav = ref([
  { name: "关联图", code: "photo" },
  { name: "SV发送", code: "SVsend" },
  { name: "SV接收", code: "SVreceive" },
  { name: "GOOSE发送", code: "GOOSEsend" },
  { name: "GOOSE接收", code: "GOOSEreceive" },
]);
watch(
  () => props.openBig,
  (newValue) => {
    isOpen.value = newValue;
  }
);
const iedRelation = ref(null);
watch(
  () => props.iedRelationData,
  (newValue) => {
    iedRelation.value = newValue;
  }
);
const checkData = ref(null); //选中的数据
watch(
  () => props.checkDialogData,
  (newValue) => {
    checkData.value = newValue;
  }
);
const result = (newData) => {
  checkData.value = newData;
};
const searchInput = ref("");
//搜索ied编码或名称
const searchIedList = ref([]);
const searchClick = (value) => {
  if (value) {
    iedRelation.value = Object.values(iedRelation.value).filter((item) => {
      const lowercaseValue = value.toLowerCase(); //不区分大小写
      const iedNameLower = item.ied_name ? item.ied_name.toLowerCase() : null;
      const descLower = item.desc ? item.desc.toLowerCase() : null;
      return (
        (iedNameLower !== null && iedNameLower.includes(value)) ||
        (descLower !== null && descLower.includes(value))
      );
    });
  } else {
    iedRelation.value = props.iedRelationData;
  }
};

//头部
const navtopData = shallowRef([
  { name: "装置关联关系", code: relationShip },
  { name: "输入输出控制块", code: inoutControl },
  { name: "虚端子关系", code: virtualRelation },
  { name: "基础信息", code: basicInfo },
  { name: "定值条目", code: fixedEntry },
  { name: "信息点表", code: infoTable },
  { name: "源文件", code: soureFile },
]);
const emit = defineEmits(["done"]);
const cancelClick = () => {
  isOpen.value = false;
  activeLeft.value = null;
  checkData.value = null;
  emit("done", false);
};
const activeNav = ref(0);
const activeNavName = shallowRef(relationShip);
const inoutName = ref("");
const tabName = ref("relationShip");
const clickNav = (navIndex, name) => {
  //点击导航栏事件
  inoutName.value = name;
  console.log("name", name);
  activeNavName.value = name;
  tabName.value = name;
  activeNav.value = navIndex;
};
const activeLeft = ref(null);
const clickLeft = (item, navIndex) => {
  //点击侧边栏事件
  checkData.value = null;
  activeLeft.value = navIndex;
  checkData.value = item;
};
onMounted(() => {
  // const height = ref(0);
  // height.value = document.documentElement.clientHeight - 400 + "px;";
});
//点击头部
const inoutItemNavIndex = ref("");
const isPhoto = ref("photo");
const clickInoutNav = (item, index) => {
  isPhoto.value = item.code;
  inoutItemNavIndex.value = index;
};
const getChild = ref(null);
watch(
  () => tabName.value,
  (newValue) => {
    getChild.value.removeLine;
  }
);
</script>
  <style scoped lang="scss">
@mixin mid-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
$height: 40px;
:deep(.el-dialog__header) {
  border-bottom: 1px solid #a3ade0;
}
.my-header {
  border-bottom: 1px solid #a3ade0;
  font-size: 16px;
  color: #1a2447;
  .title {
    padding-bottom: 15px;
  }
}
.main {
  display: flex;
}
:deep(.el-scrollbar) {
  --el-scrollbar-bg-color: #7484ab;
}
.main-left {
  width: 23%;
  background-color: #f7f8fb;
  .scrollbar-demo-item {
    cursor: pointer;
    width: 90%;
    margin-left: 5%;
    display: flex;
    padding: 4px 0;
    .ied-name {
      width: 25%;
    }
  }
}
.main-right {
  width: 75%;
  display: flex;
  flex-direction: column;
}
.main-right-item {
  margin-top: 20px;
  height: 72vh;
  overflow-y: auto;
}
//设置导航栏样式
.nav {
  height: 40px;
  @include mid-center;
  .nav-item {
    width: 144px;
    height: $height;
    @include mid-center;
    margin-right: 8px;
    cursor: pointer;
    background: #fff url("~@/assets/image/instruct/navtop.png") no-repeat center;
    background-size: 144px $height;
  }
  .nav-item-active {
    background: #fff url("~@/assets/image/instruct/navtop_active.png") no-repeat
      center;
    color: #fff;
    background-size: 144px $height;
  }
}
.left-item-active {
  color: #255ce7;
}
.inout {
  padding: 0 16px;
  border-right: 1px solid #7484ab;
  margin-top: 24px;
}
.inout-item {
  display: inline-block;
  width: 92px;
  height: 26px;
  cursor: pointer;
  text-align: center;
  color: #000;
  line-height: 26px;
}
.inout-item-active {
  background: #f6f9ff;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  text-align: center;
  line-height: 26px;
  color: #255ce7;
  border: 1px solid #255ce7;
}
.inout-right-item,.soures,.relatio {
  margin-top: 27px;
  margin-left: 16px;
  height: 65vh;
}
.soures {
  height: 72vh;
}
.relatio{
  height: 65vh;
}
</style>