|
|
@@ -7,13 +7,8 @@
|
|
|
<!-- 父网络列表 上方的大类图标及小竖线 -->
|
|
|
<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="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>
|
|
|
@@ -21,16 +16,11 @@
|
|
|
</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 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>
|
|
|
@@ -38,27 +28,15 @@
|
|
|
<!-- 子网络列表 -->
|
|
|
<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="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"
|
|
|
- >
|
|
|
+ <div class="subNetworkID" v-for="(value, key) in item" :key="key">
|
|
|
<span v-if="key.startsWith('node_value')">{{
|
|
|
value
|
|
|
}}</span>
|
|
|
@@ -70,22 +48,10 @@
|
|
|
|
|
|
<!-- 线条 -->
|
|
|
<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 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>
|
|
|
@@ -96,7 +62,7 @@
|
|
|
</template>
|
|
|
|
|
|
|
|
|
- <script setup>
|
|
|
+<script setup>
|
|
|
import { onMounted, reactive, ref } from "vue";
|
|
|
import { nodeList, iedNetaddr } from "@/api/iedNetwork";
|
|
|
import { useRoute } from "vue-router";
|
|
|
@@ -558,13 +524,13 @@ const onChangeMain = (index, clickItem) => {
|
|
|
handleAllAp.value = [...handleAllAp.value, ...allApData.value[item].list];
|
|
|
}
|
|
|
});
|
|
|
- // 如果有重复的attr_ied_name删除
|
|
|
+ // 如果有重复的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) => {
|
|
|
+ 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)
|
|
|
@@ -577,12 +543,12 @@ const onChangeMain = (index, clickItem) => {
|
|
|
flog.value = true;
|
|
|
currentCat.value = "";
|
|
|
listCat.value = [];
|
|
|
- lineNum.value =[]
|
|
|
+ lineNum.value = []
|
|
|
lineList.value = [];
|
|
|
onChangeline("");
|
|
|
getlist();
|
|
|
};
|
|
|
-const getClickList = (dataId) => {};
|
|
|
+const getClickList = (dataId) => { };
|
|
|
const getlist = () => {
|
|
|
if (!clickAllAp.value) {
|
|
|
handleAllAp.value = [];
|
|
|
@@ -597,7 +563,7 @@ const getlist = () => {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- handleAllAp.value = handleAllAp.value.filter((item, index, self) => {
|
|
|
+ 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)
|
|
|
@@ -688,7 +654,7 @@ const onChangeline = (val) => {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
- <style scoped lang="scss">
|
|
|
+<style scoped lang="scss">
|
|
|
@import "~@/styles/home.scss";
|
|
|
@import "~@/styles/struct.scss";
|
|
|
</style>
|
liyangzheng