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" :style="{ minHeight: checkData ? 'auto' : '36px' }">
        <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" v-if="!isScdView">{{ item.desc }}</span>
            <span class="desc" v-else>{{ item.ied_desc }}</span>
          </p>
        </el-scrollbar>
      </div>
      <!-- 右侧版块 -->
      <div class="main-right" v-loading="loading">
        <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',
        }">
          <!-- isPhoto是输入输出控制块的, -->
          <component :is="activeNavName" :checkData="checkData" :isOpen="isOpen" :iedRelation="iedRelation"
            @result="result" :isPhoto="isPhoto" :delScdId="delScdId"></component>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import {
  onMounted,
  watch,
  ref,
  computed,
  nextTick,
  shallowRef,
  defineEmits,
  provide,
} 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";
import { scdIedRelation } from "@/api/iedNetwork";
import { useRoute } from "vue-router";
const props = defineProps({
  openBig: {
    type: Boolean,
    default: false,
  },
  iedRelationData: {
    type: Object,
    default: () => { },
  },
  checkDialogData: {
    type: Object,
    default: () => { },
  },
  scdView: {
    type: Boolean,
    default: false,
  },
  delScdId: {
    type: String,
    default: '',
  }
});
const isOpen = ref(props.openBig);
const route = useRoute();
const inoutNav = ref([
  { name: "关联图", code: "photo" },
  { name: "SV发送", code: "SVsend" },
  { name: "SV接收", code: "SVreceive" },
  { name: "GOOSE发送", code: "GOOSEsend" },
  { name: "GOOSE接收", code: "GOOSEreceive" },
]);
const isScdView = ref(false);
let loading = ref(false)
watch(
  () => props.scdView,
  (newValue) => {
    isScdView.value = newValue;
  }
);
const delScdIds = ref('');
watch(() => props.delScdId, (newValue) => {
  if (newValue) {
    delScdIds.value = newValue
  }
})
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) => {
    console.log("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) {
    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 if (!value) {
    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;
  isScdView.value = false;
  emit("done", false);
};
const activeNav = ref(0);
const activeNavName = shallowRef(relationShip);
const inoutName = ref("");
const clickNav = (navIndex, name) => {
  //点击导航栏事件
  inoutName.value = name;
  activeNavName.value = name;
  activeNav.value = navIndex;
};
const activeLeft = ref(null);
const clickLeft = async (item, navIndex) => {
  //点击侧边栏事件
  checkData.value = null;
  activeLeft.value = navIndex;
  loading.value = true
  if (!isScdView.value) {
    checkData.value = item;
    loading.value = false
  } else {
    let id = '';
    if (delScdIds.value) {
      id = delScdIds.value
    } else {
      id = route.query.id
    }
    const iedRes = await scdIedRelation({
      scd_id: id,
      ied_name: item.ied_name,
      reset: 1,
    });
    loading.value = false
    checkData.value = iedRes.data[item.ied_name];
  }
};
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;
};
</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>