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

<script setup>
import { ref, defineEmits, watch, onMounted } from "vue";
import CidTree from "./CidTree.vue";
import Gsix from "./Gsix.vue";
import virtualnformation from "./virtualnformation.vue"; //虚端
import { useRoute } from "vue-router";
let route = useRoute();
const props = defineProps({
  openScl: {
    type: Boolean,
    default: false,
  },
  iedRelationData: {
    type: Object,
    default: () => {},
  },
  clickRowData: {
    type: Object,
    default: () => {},
  },
  checkDialogData: {
    type: Object,
    default: () => {},
  },
});
const UPdate = ref("update");
const newChicken = route.query.stationName;
const OpensclTrue = ref(false);
const emit = defineEmits(["doneScl"]);
const iedRelation = ref(null);
//装置列表数据
watch(
  () => props.iedRelationData,
  (newValue) => {
    console.log("iedRelationscllll", newValue);
    iedRelation.value = newValue;
    //如果没有点击装置列表直接点击了code的默认装置第一个装置列表的数据
    clickList.value = Object.values(props.iedRelationData)[0];
  }
);
//打开文件
watch(
  () => props.openScl,
  (newValue) => {
    if (newValue) {
      OpensclTrue.value = newValue;
    }
  }
);
//所点击对比的数据
const clickRowDatas = ref(null);
watch(
  () => props.clickRowData,
  (newValue) => {
    console.log("newValue", newValue);
    if (newValue) {
      clickRowDatas.value = newValue;
    }
  }
);
const checkData = ref(props.checkDialogData);
watch(
  () => props.checkDialogData,
  (newValue, oldValue) => {
    console.log("props.checkDialogData", newValue, oldValue);
    checkData.value = newValue;
  }
);
const cancelClick = () => {
  OpensclTrue.value = false;
  clickCodeValue.value = "";
  emit("doneScl");
};
const clickList = ref(null);
const treeBack = (data, val) => {
  clickList.value = data;
  console.log("data====", data);
};
const treeBackDefalut = (data) => {
  // clickList.value = data;
};
const clickCodeValue = ref(null);
const clickCode = (code) => {
  clickCodeValue.value = code;
};
const result = (newData) => {
  checkData.value = newData;
};
const virtualScd = ref(true); //是scd对比的虚回路信息
onMounted(() => {});
</script>

<template>
  <div>
    <el-dialog
      @close="cancelClick"
      v-model="OpensclTrue"
      width="93vw"
      append-to-body
      draggable
      top="5vh"
      style="height: 92vh"
    >
      <template #header>
        <div class="my-header">
          <div class="title">一致性对比结果</div>
        </div>
      </template>
      <div class="right-main">
        <CidTree
          :UPdate="UPdate"
          @treeBack="treeBack"
          @treeBackDefalut="treeBackDefalut"
          @clickCode="clickCode"
          :OpensclTrue="OpensclTrue"
          :iedRelation="iedRelation"
        ></CidTree>
        <div class="right-title">
          <div class="abBox">
            <div>
              <span style="border-right: 1px solid #516380; padding-right: 30px"
                >基准文件:{{ checkDialogData }}
                <span style="color: #09162c">{{ newChicken }}</span></span
              >
            </div>
            <div style="padding-left: 30px">
              <span
                >对比文件:<span style="color: #09162">{{
                  clickRowDatas.target_name
                }}</span></span
              >
            </div>
          </div>
          <Gsix
            v-if="clickCodeValue != 'scd.ied.Relation'"
            :clickRowDatas="clickRowDatas"
            :iedRelation="iedRelation"
            :clickList="clickList"
            :clickCodeValue="clickCodeValue"
          ></Gsix>
          <!-- 
              :isOpen="isOpen"
              @result = "result"
              -->
          <div
            v-else-if="clickCodeValue == 'scd.ied.Relation'"
            style="height: 67vh; overflow-y: auto"
          >
            <virtualnformation
              :virtualScd="virtualScd"
              :clickRowDatas="clickRowDatas"
              :clickList="clickList"
              :clickCodeValue="clickCodeValue"
              :checkData="checkData"
              :OpensclTrue="OpensclTrue"
              @result="result"
            ></virtualnformation>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.my-header {
  border-bottom: 1px solid #a3ade0;
  font-size: 16px;
  color: #1a2447;

  .title {
    padding-bottom: 15px;
  }
}
.right-main {
  display: flex;
  .right-title {
    width: 85%;
    margin: 20px 0 0 16px;

    background: #f7f8fb;
  }
  .abBox {
    width: 95%;
    height: 40px;
    position: relative;
    margin: 10px auto;
    display: flex;
    font-size: 14px;
    background: #fff;
    justify-content: center;
    align-items: center;
    color: #516380;
  }
}
</style>