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

<template>
  <div>
    <div class="bigBox" :class="{'bigBoxUp':isUPdate=='update'}">
      <div>
        <div class="titles">
          <img
            style="width: 20px; height: 20px"
            src="../../../assets/icon/HardDrives.png"
            alt=""
          />
          <div>装置列表</div>
        </div>
      </div>
      <div class="tagBox">
        <div
          class="cont-line tagP"
          :class="{ 'clicktag': tagChoose == index }"
          v-for="(item, index) in tagList"
          :key="index"
          @click="tagClick(item, index)"
        >
          <span v-if="!OpensclTrue">{{
            `(${item.ied_name})${item.desc}`
          }}</span>
          <span v-else>{{ `(${item.ied_name})${item.ied_desc}` }}</span>
        </div>
      </div>
      <div class="setting">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          highlight-current
          @node-click="handleNodeClick"
        >
          <template #default="{ node }">
            <span class="label" :class="{ 'tree-label': node.expanded }">{{
              node.label
            }}</span>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs, watch } from "vue";
import cid from "@/api/cid/cid";
import scdCheck from "@/api/scdCheck/scdCheck";
import { compIedstatType } from "@/api/scdCheck/scdCheck2";
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
  OpensclTrue: {
    type: Boolean,
    default: false,
  },
  iedRelation: {
    type: Object,
    default: () => {},
  },
  UPdate: {
    //判断是否是点击更改 进入的界面
    type: String,
    default: "",
  },
  clickRowDatas: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["treeBack", "clickCode","treeBackDefalut"]);
let tagList = ref(props.iedRelation);
let tagChoose = ref('');
let treeData = ref([
{
  label: "装置信息",
  itemcode: "ied",
  num:0,
  children: [
    {
      label: "基本信息",
      itemcode: "scd.ied",
      num:0
    },
  ],
},
{
  label: "通信参数",
  itemcode: "Communication",
  num:0,
  children: [
    {
      label: "通信接入点",
      itemcode: "scd.ied.Communication",
      num:0,
    },
    {
      label: "站控层通信参数",
      itemcode: "scd.ied.Communication.S1",
      num:0,
    },
    {
      label: "GOOSE 通信参数",
      itemcode: "scd.ied.Communication.GSE",
      num:0,
    },
    {
      label: "SV 通信参数",
      itemcode: 'scd.ied.Communication.SMV',
      num:0,
    },
  ],
},
  {
    label: "测点信息",
    itemcode: "Point",
    children: [
      {
        label: "遥信",
        itemcode: "scd.ied.YX",
        num:0,
      },
      {
        label: "遥控",
        itemcode: "scd.ied.YK",
        num:0,
      },
      {
        label: "遥测",
        itemcode: "scd.ied.YC",
        num:0,
      },
      {
        label: "遥脉",
        num: 0,
        itemcode: "scd.ied.YM",
      },
      {
        label: "定值",
        itemcode: "scd.ied.DZ",
        num:0,
      },
    ],
  },
  {
    label: "回路配置",
    itemcode: "config",
    num:0,
    children: [
      {
        label: "发布虚端子",
        itemcode: "scd.ied.FCDA",
        num:0,
      },
      {
        label: "定阅虚端子",
        itemcode: "scd.ied.ExtRef",
        num:0,
      },
      {
        label: "虚回路信息",
        itemcode: "scd.ied.Relation",
        num:0,
      },
    ],
  },
  {
    label: "建模信息",
    itemcode: "model",
    num:0,
    children: [
      {
        label: "数据集",
        itemcode: "scd.ied.DatSet",
        num:0,
      },
      {
        label: "数据集成员",
        itemcode: "scd.ied.DatSetMeber",
        num:0,
      },
      {
        label: "GOOSE控制块",
        itemcode: "scd.ied.GSEControl",
        num:0,
      },
      {
        label: "SV控制块",
        itemcode: "scd.ied.SampledValueControl",
        num:0,
      },
      {
        label: "报告控制块",
        itemcode: "scd.ied.ReportControl",
        num:0,
      },
      {
        label: "日志控制块",
        itemcode: "scd.ied.LogControl",
        num:0,
      },
    ],
  },
]);

let needName = ref("");
//得到差异项code的数字数据
const codeStaticList = ref(null);
const codeStatic = async () => {
  const ids = clickRow.value ? clickRow.value.id : "";
  const names = clickTage.value ? clickTage.value.ied_name :"";
  const res = await compIedstatType({
    comp_id: ids,
    ied_name: names,
    comptype: "u",
  });
  codeStaticList.value = res.data;
  updateNum(treeData.value, codeStaticList.value);  
  console.log('treeData.value', treeData.value)
};
const updateNum = (treeNode, data) => {
  for (let node of treeNode) {  
    // 检查当前节点的 itemcode 是否在 data 中  
    if (data.hasOwnProperty(node.itemcode)) {  
      node.num = parseInt(data[node.itemcode], 10);  
    }  
  
    // 如果当前节点有子节点，递归处理子节点  
    if (node.children) {  
      updateNum(node.children, data);  
    }  
  }  
}
let defaultProps = ref({
  label: "label",
  children: "children",
});
const isUPdate = ref(props.UPdate);
watch(
  () => props.UPdate,
  (newValue) => {
    isUPdate.value = newValue;
  }
);
watch(
  () => props.iedRelation,
  (newValue) => {
    if (newValue) {
      tagList.value = newValue;
      console.log('firsttagList.value', tagList.value)

    }
  }
);
const reload = () => {
  if (!props.OpensclTrue) {
    cid.getAll({ scd_id: route.query.id, ied_name: "" }).then((res) => {
      tagList.value = res.data;
    });
  }
};
const clickTage =ref(null);
const tagClick = (row, num) => {
  tagChoose.value = num;
  clickTage.value = row;
  cid
    .findFile({
      scd_id: route.query.id,
      ied_name: row.desc,
      pageno: 1,
      pagesize: 10,
      station_id: route.query.stationId,
    })
    .then((res) => {});
  scdCheck
    .lookCheck({
      pageindex: 1,
      pagesize: 10,
      station_id: route.query.stationId,
      scd_id: route.query.id,
      is_checkin: 2,
      ied_name: row.ied_name,
    })
    .then((res) => {
      let fileInfo;
      if (res.data) {
        fileInfo = res.data.filter((item) => item.scd_id == route.query.id);
        console.log("res", fileInfo);
        if (fileInfo.length > 0) {
          emit("treeBack", row, fileInfo[0]);
        }
      }
      //   let a = res.data.filter((item) => item.type_name == "CID");
      //   if (a.length > 0) {
      //     needName.value = a[0].file_name;
      //     emit("treeBack", needName.value, a[0].id);
      //   }
    });
    codeStatic()
};
const clickRow = ref(props.clickRowDatas);
//对比文件：头部对比的单个数据
watch(
  () => props.clickRowDatas,
  (newValue) => {
    if (newValue) {
      clickRow.value = newValue;
    }
  }
);
const handleNodeClick = (e) => {
  emit("clickCode", e.itemcode);
};
onMounted(() => {
  tagChoose.value = props.iedRelation?Object.keys(props.iedRelation)[0]:'';
  clickTage.value = props.iedRelation?Object.values(props.iedRelation)[0]:'';
  emit("treeBackDefalut",clickTage.value);
  reload();
  codeStatic()
});
</script>

<style scoped lang="scss">
p,
h3 {
  margin: 0;
  padding: 0;
}

.bigBox {
  width: 100%;
  height: calc(100vh - 280px);
  margin-top: 20px;
  border: 1px solid #a3ade0;
  border-radius: 2px;
  cursor: pointer;
  background: #f7f8fb;
  & > div:first-child {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #1a2447;
    margin: 16px 0 0 16px;
  }
}
.bigBoxUp{
  height: calc(100vh - 230px) !important;
}
:deep(.el-tree) {
  --el-fill-color-blank: #f7f8fb;
}
.tagBox {
  width: 92%;
  height: 45%;
  overflow-y: auto;
  margin: 8px 16px 0px 16px;
}

.tagP {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
  font-size: 16px;
}
.setting {
  width: 92%;
  height: 45%;
  overflow-y: auto;
  border-top: 1px solid #a3ade0;
  margin: 2px auto;
  .label {
    padding: 5px 8px;
  }
  :deep(.el-tree--highlight-current .el-tree-node) {
    margin: 5px 0;
    color: #1a2447;
  }
  :deep(
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content
    ) {
    background: transparent;
  }
  :deep(
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content
        .label
    ) {
    color: #134bea;
    border: 1px solid #255ce7;
    background: #f6f9ff;
  }
}
.titles {
  display: flex;
  align-items: center;
  & > div {
    font-size: 16px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: bold;
  }
}
.cont-line,
:deep(.el-tree-node__label) {
  color: #1a2447;
  font-size: 14px;
}
.clicktag {
  color: #255ce7;
}
.tree-label {
  color: #134bea;
}
</style>