|
|
@@ -0,0 +1,694 @@
|
|
|
+<template>
|
|
|
+ <div class="container-bg">
|
|
|
+ <el-container class="main-layout">
|
|
|
+ <el-container class="right-plate">
|
|
|
+ <el-main class="main-cont">
|
|
|
+ <div class="network-wrap">
|
|
|
+ <!-- 父网络列表 上方的大类图标及小竖线 -->
|
|
|
+ <section class="layout">
|
|
|
+ <div class="mainNetwork">
|
|
|
+ <div
|
|
|
+ class="networkItem"
|
|
|
+ v-for="(item, index) in nodeInfoData"
|
|
|
+ :key="index"
|
|
|
+ :class="{ active: current == index }"
|
|
|
+ @click="() => onChangeMain(index, item)"
|
|
|
+ >
|
|
|
+ <!-- 图片及图片上的名字 -->
|
|
|
+ <div class="topCont">
|
|
|
+ <div class="title">{{ item.attr_desc }}</div>
|
|
|
+ <span class="subtitle">{{ item.attr_name }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 小竖线 -->
|
|
|
+ <div class="lineWrap" v-if="current == index">
|
|
|
+ <div
|
|
|
+ class="line"
|
|
|
+ v-for="(item, index) in lineList"
|
|
|
+ :style="{
|
|
|
+ background: item.bgcolor,
|
|
|
+ left: 45 + index * 13 + '%',
|
|
|
+ height: 17 * index + 35 + 'px',
|
|
|
+ }"
|
|
|
+ :key="index"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <!-- 子网络列表 -->
|
|
|
+ <section class="layout">
|
|
|
+ <div class="subNetwork">
|
|
|
+ <div
|
|
|
+ class="subNetworkItem"
|
|
|
+ v-for="(item, index) in handleAllAp"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="subNetworkLine"
|
|
|
+ v-show="item.show"
|
|
|
+ :style="item.inlineStyle"
|
|
|
+ ></span>
|
|
|
+ <div class="subNetworkMask" v-show="!item.show"></div>
|
|
|
+ <div class="subNetworkInfo">
|
|
|
+ <div class="subNetworkImg">
|
|
|
+ <img :src="tupian" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="subNetworkName">{{ item.attr_ied_name }}</div>
|
|
|
+ <div
|
|
|
+ class="subNetworkID"
|
|
|
+ v-for="(value, key) in item"
|
|
|
+ :key="key"
|
|
|
+ >
|
|
|
+ <span v-if="key.startsWith('node_value')">{{
|
|
|
+ value
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 线条 -->
|
|
|
+ <div class="networkLine">
|
|
|
+ <div
|
|
|
+ class="mainLine"
|
|
|
+ v-for="(item, index) in lineList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="lineTag"
|
|
|
+ :style="{ background: item.bgcolor, color: item.txtcolor }"
|
|
|
+ @click="() => onChangeline(item.name)"
|
|
|
+ >{{ item.name }}</span
|
|
|
+ >
|
|
|
+ <p
|
|
|
+ class="line"
|
|
|
+ :style="{ background: item.bgcolor }"
|
|
|
+ @click="() => onChangeline(item.name)"
|
|
|
+ ></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+ <script setup>
|
|
|
+import { onMounted, reactive, ref } from "vue";
|
|
|
+import { nodeList, iedNetaddr } from "@/api/iedNetwork";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+const route = useRoute();
|
|
|
+const flog = ref(false);
|
|
|
+const current = ref(0);
|
|
|
+const currentCat = ref("");
|
|
|
+const arr = ref([
|
|
|
+ {
|
|
|
+ attr_desc: "110KV过程层SMV子网",
|
|
|
+ attr_name: "SMV",
|
|
|
+ attr_type: "SMV",
|
|
|
+ node_id: 84001387,
|
|
|
+ node_name: "SubNetwork",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84000135,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_desc: "MMS网",
|
|
|
+ attr_name: "MMS",
|
|
|
+ attr_type: "8-MMS",
|
|
|
+ node_id: 84001387,
|
|
|
+ node_name: "SubNetwork",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84000135,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_desc: "110KV过程层GOOSE子网",
|
|
|
+ attr_name: "GOOSE",
|
|
|
+ attr_type: "IECGOOSE",
|
|
|
+ node_id: 84003131,
|
|
|
+ node_name: "SubNetwork",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84000135,
|
|
|
+ },
|
|
|
+]); //父网络数据
|
|
|
+const nodeInfoData = ref(null);
|
|
|
+const arr2 = ref([
|
|
|
+ {
|
|
|
+ attr_ap_name: "S1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "IL1101",
|
|
|
+ node_id: 84003204,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "S1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "IL1301",
|
|
|
+ node_id: 8400204,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "S1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "IL4101",
|
|
|
+ node_id: 84002204,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "S1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "PL1131",
|
|
|
+ node_id: 84003264,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "IL11031",
|
|
|
+ node_id: 84007214,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "S1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "IL11011",
|
|
|
+ node_id: 84003304,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "S1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "IL13101",
|
|
|
+ node_id: 84003205,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84003131,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "K1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "K1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "K1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "K1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "G1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attr_ap_name: "K1",
|
|
|
+ attr_desc: "",
|
|
|
+ attr_ied_name: "CM13101",
|
|
|
+ node_id: 84003295,
|
|
|
+ node_name: "ConnectedAP",
|
|
|
+ node_value: "",
|
|
|
+ parent_node_id: 84001387,
|
|
|
+ },
|
|
|
+]);
|
|
|
+const lineList = ref([]);
|
|
|
+const listCat = ref([]);
|
|
|
+const colorList2 = ref([
|
|
|
+ {
|
|
|
+ S1: "#3BE078",
|
|
|
+ S2: "#3AAFF0",
|
|
|
+ S3: "#FF8531",
|
|
|
+ G1: "#3259E0",
|
|
|
+ G2: "#38FFFF",
|
|
|
+ G3: "#3FA3FF",
|
|
|
+ G4: "#7368F1",
|
|
|
+ G5: "#84D7FF",
|
|
|
+ M1: "#FB3E3E",
|
|
|
+ M2: "#FF039A",
|
|
|
+ M3: "#FF1BE8",
|
|
|
+ M4: "#FF929D",
|
|
|
+ M5: "#FF9AF5",
|
|
|
+ },
|
|
|
+]);
|
|
|
+const colorList = ["#3BE078", "#3AAFF0", "#4B6DE3", "#aa00ff"];
|
|
|
+const tupian = require("@/assets/image/instruct/network_slices.png");
|
|
|
+let nodeTreeInfo = null;
|
|
|
+let loading = false;
|
|
|
+//获取网络图的顶部列表
|
|
|
+const getNetWork = async () => {
|
|
|
+ loading = false;
|
|
|
+ const infoRes = await nodeList({
|
|
|
+ scd_id: 52000015,
|
|
|
+ pagesize: 10000,
|
|
|
+ name: "SubNetwork",
|
|
|
+ });
|
|
|
+ nodeInfoData.value = infoRes.data;
|
|
|
+ loading = true;
|
|
|
+};
|
|
|
+//获取SCD中配置的所有设备网络地址ConnectedAP
|
|
|
+const allNetaddrData = ref({});
|
|
|
+const allApData = ref({});
|
|
|
+const initLoad = async () => {
|
|
|
+ allApData.value = {};
|
|
|
+ getNetWork();
|
|
|
+ const allAP = await nodeList({
|
|
|
+ scd_id: 52000015,
|
|
|
+ pagesize: 10000,
|
|
|
+ name: "ConnectedAP",
|
|
|
+ });
|
|
|
+ if (allAP == null || allAP.data == null) {
|
|
|
+ //
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let tmp = {};
|
|
|
+ for (let i = 0; i < allAP.data.length; i++) {
|
|
|
+ let item = allAP.data[i];
|
|
|
+ const key = item.parent_node_id + "." + item.attr_ap_name;
|
|
|
+ if (allApData.value[key] == null) {
|
|
|
+ allApData.value[key] = {
|
|
|
+ node_type: "ap",
|
|
|
+ name: key,
|
|
|
+ list: [item],
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ allApData.value[key].list.push(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // allNetaddrData.value = allAP.data;
|
|
|
+ const allNetaddr2 = await iedNetaddr({ scd_id: 44000013 });
|
|
|
+ // processAllNetData(allNetaddr.data);
|
|
|
+ // allNetaddrData.value = allNetaddr.data;
|
|
|
+ getlist();
|
|
|
+};
|
|
|
+const processAllNetData = (arr) => {
|
|
|
+ const attrIedNamesMap = new Map();
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ const item = arr[i];
|
|
|
+ const attrIedName = item.attr_ied_name;
|
|
|
+ // 如果attr_ied_name已经存在于attrIedNamesMap中，则将node_value赋值给已存在的对象的新属性
|
|
|
+ if (attrIedNamesMap.has(attrIedName)) {
|
|
|
+ const existingItem = attrIedNamesMap.get(attrIedName);
|
|
|
+ const newNodeValueKey = `node_value${existingItem.count + 2}`;
|
|
|
+ // 设置新属性值
|
|
|
+ existingItem.item[newNodeValueKey] = item.node_value;
|
|
|
+ // 递增count，表示已处理的相同attr_ied_name的个数
|
|
|
+ existingItem.count++;
|
|
|
+ // 删除赋值的对象
|
|
|
+ arr.splice(i, 1);
|
|
|
+ // 因为删除了一个元素，所以需要更新索引
|
|
|
+ i--;
|
|
|
+ } else {
|
|
|
+ // 如果attr_ied_name不存在于attrIedNamesMap中，则将当前item加入attrIedNamesMap
|
|
|
+ attrIedNamesMap.set(attrIedName, {
|
|
|
+ item,
|
|
|
+ count: 0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+const handleAllAp = ref([]); //处理后后的单个network的子数据
|
|
|
+const clickAllAp = ref(null);
|
|
|
+const lineNum = ref([]);
|
|
|
+// const arrname = ref([]);
|
|
|
+const onChangeMain = (index, clickItem) => {
|
|
|
+ handleAllAp.value = [];
|
|
|
+ //
|
|
|
+ Object.keys(allApData.value).forEach((item) => {
|
|
|
+ if (item.includes(clickItem.node_id)) {
|
|
|
+ handleAllAp.value = [...handleAllAp.value, ...allApData.value[item].list];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 如果有重复的attr_ied_name删除
|
|
|
+ lineNum.value = Array.from(
|
|
|
+ new Set(handleAllAp.value.map((item) => item.attr_ap_name))
|
|
|
+ );
|
|
|
+
|
|
|
+ //去重
|
|
|
+ handleAllAp.value = handleAllAp.value.filter((item, index, self) => {
|
|
|
+ return (
|
|
|
+ index ===
|
|
|
+ self.findIndex((obj) => obj.attr_ied_name === item.attr_ied_name && obj.attr_ap_name === item.attr_ap_name || obj.attr_ied_name === item.attr_ied_name)
|
|
|
+ );
|
|
|
+ });
|
|
|
+
|
|
|
+ clickAllAp.value = clickItem;
|
|
|
+
|
|
|
+ current.value = index;
|
|
|
+ flog.value = true;
|
|
|
+ currentCat.value = "";
|
|
|
+ listCat.value = [];
|
|
|
+ lineNum.value =[]
|
|
|
+ lineList.value = [];
|
|
|
+ onChangeline("");
|
|
|
+ getlist();
|
|
|
+};
|
|
|
+const getClickList = (dataId) => {};
|
|
|
+const getlist = () => {
|
|
|
+ if (!clickAllAp.value) {
|
|
|
+ handleAllAp.value = [];
|
|
|
+ //匹配的所有数据的key值，进行筛选对应的数据
|
|
|
+ Object.keys(allApData.value).forEach((item) => {
|
|
|
+ if (item.includes(nodeInfoData.value[0].node_id)) {
|
|
|
+ //默认展示第一个
|
|
|
+ handleAllAp.value = [
|
|
|
+ ...handleAllAp.value,
|
|
|
+ ...allApData.value[item].list,
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handleAllAp.value = handleAllAp.value.filter((item, index, self) => {
|
|
|
+ return (
|
|
|
+ index ===
|
|
|
+ self.findIndex((obj) => obj.attr_ied_name === item.attr_ied_name && obj.attr_ap_name === item.attr_ap_name || obj.attr_ied_name === item.attr_ied_name)
|
|
|
+ );
|
|
|
+ });
|
|
|
+ var index = 0;
|
|
|
+ handleAllAp.value.forEach((item, subindex) => {
|
|
|
+ if (!listCat.value.includes(item.attr_ap_name)) {
|
|
|
+ listCat.value.push(item.attr_ap_name);
|
|
|
+ // let colorObj = "";
|
|
|
+ // colorList2.value.find((color) => {
|
|
|
+ // colorObj = color[item.attr_ap_name];
|
|
|
+ // });
|
|
|
+ lineList.value.push({
|
|
|
+ name: item.attr_ap_name,
|
|
|
+ bgcolor: colorList[index],
|
|
|
+ txtcolor: "#fff",
|
|
|
+ position: 70 + index * 10,
|
|
|
+ });
|
|
|
+ index++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setinlineStyle(handleAllAp.value, listCat.value);
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ initLoad();
|
|
|
+});
|
|
|
+
|
|
|
+const setinlineStyle = (data, dataCat) => {
|
|
|
+ let adjustment = 0; // 初始化调整值为0
|
|
|
+ const length = lineList.value.length; // 获取数组长度
|
|
|
+ // 根据数组长度动态计算调整值
|
|
|
+ if (length === 1) {
|
|
|
+ adjustment = 32; // 数组长度为1，则加32
|
|
|
+ } else if (length === 2) {
|
|
|
+ adjustment = 16; // 数组长度为2，则加16
|
|
|
+ } else if (length > 2) {
|
|
|
+ // 数组长度大于2，开始递减
|
|
|
+ adjustment = (length - 3) * 16; // 每增加一个元素，减16px
|
|
|
+ if (length > 3) adjustment = 0; // 当长度大于3时，不再递减，保持0
|
|
|
+ }
|
|
|
+ //data全部数组
|
|
|
+ // dataCat:{0: 'S1', 1: 'G1', 2: 'K1'}
|
|
|
+ let newData = [];
|
|
|
+ // 进行分组处理 都为浅拷贝 修改的源数据
|
|
|
+ for (var i = 0; i < data.length; i += 9) {
|
|
|
+ newData.push(data.slice(i, i + 9));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加行类样式属性
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ data[i]["inlineStyle"] = {};
|
|
|
+ for (let j = 0; j < dataCat.length; j++) {
|
|
|
+ if (data[i].attr_ap_name == dataCat[j]) {
|
|
|
+ data[i]["inlineStyle"]["borderColor"] = colorList[j];
|
|
|
+ data[i]["inlineStyle"]["left"] = j * 5 + "px";
|
|
|
+ data[i]["inlineStyle"]["zIndex"] = j;
|
|
|
+ data[i]["show"] = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 根据行数计算高度
|
|
|
+ newData.forEach((item, index) => {
|
|
|
+ for (let i = 0; i < item.length; i++) {
|
|
|
+ let num = listCat.value.indexOf(item[i].attr_ap_name) + 1;
|
|
|
+ item[i]["inlineStyle"]["height"] =
|
|
|
+ 120 * index +
|
|
|
+ 54 +
|
|
|
+ (listCat.value.length - num) * 17 +
|
|
|
+ adjustment +
|
|
|
+ "px";
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+//线条的点击事件
|
|
|
+const onChangeline = (val) => {
|
|
|
+ if (flog.value && val == currentCat.value) {
|
|
|
+ handleAllAp.value.forEach((item) => (item.show = true));
|
|
|
+ currentCat.value = "";
|
|
|
+ flog.value = false;
|
|
|
+ } else {
|
|
|
+ handleAllAp.value.forEach((item) => {
|
|
|
+ item.show = item.attr_ap_name == val ? true : false;
|
|
|
+ });
|
|
|
+ flog.value = true;
|
|
|
+ currentCat.value = val;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+ <style scoped lang="scss">
|
|
|
+@import "~@/styles/home.scss";
|
|
|
+@import "~@/styles/struct.scss";
|
|
|
+</style>
|
liyangzheng
