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

<!-- 整个弹窗 -->
<template>
  <div>
    <el-dialog
      @close="cancelClick"
      v-model="isOpen"
      width="70vw"
      append-to-body
      draggable
    >
      <template #header>
        <div class="my-header">
          <div class="title">{{ props.checkLabel }}</div>
        </div>
      </template>
      <el-scrollbar height="470px">
        <div class="container">
          <div
            class="cont-item"
            v-for="(item, index) in props.dialogData"
            :key="index"
            @click="clickIed(item)"
          >
            <img :src="devicePng" alt="" />
            <div class="name">{{ item.ied_name }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
    <dialog-index
      :openBig="openBig"
      @done="done"
      :checkDialogData="checkDialogData"
      :iedRelationData="iedRelationData"
    ></dialog-index>
  </div>
</template>
<script setup>
import { watch, ref, inject, onMounted } from "vue";
import { defineEmits } from "vue";
import { scdIedRelation } from "@/api/iedNetwork";
import devicePng from "@/assets/image/instruct/device.png";
import dialogIndex from "./dialogIndex.vue";
const scdIdValue = inject("scdId");
const openBig = ref(false);
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  dialogData: {
    type: Object,
    default: () => {},
  },
  checkLabel: {
    type: String,
    default: "",
  },
  iedRelationData:{
    type: Object,
    default: () => {},
  }
});
const isOpen = ref(props.open);
watch(
  () => props.open,
  (newValue) => {
    isOpen.value = newValue;
  }
);
//弹窗=============
const emit = defineEmits(["done", "update:visible"]);
const cancelClick = () => {
  isOpen.value = false;
  emit("done", false);
};
const checkDialogData = ref(null);
onMounted(() => {
});

const clickIed = (value) => {
  openBig.value = true;
  Object.values(props.iedRelationData).find((item) => {
    if (item.ied_name == value.ied_name) {
      checkDialogData.value = item;
    }
  });
};
const done = (emits) => {
  openBig.value = emits;
  checkDialogData.value = null;
};
// emit('done', data.id);
// emit('update:visible', value);
</script>
<style scoped lang="scss">
: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;
  }
}
.container {
  display: flex;
  flex-wrap: wrap;
  .cont-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    flex-basis: 20%;
    margin-bottom: 15px;
    cursor: pointer;
  }
  img {
    widows: 65px;
    height: 65px;
  }
  .desc {
    color: #255ce7;
  }
}
</style>