基础信息版块

src/api/iedNetwork/index.js

@@ -140,5 +140,21 @@ export function getSourcexml(query) {
   })
 }
 
+//基础信息头部数据
+export function getNodeList(query) {
+  return request({
+    url: 'screen/scd/node/list',
+    method: 'get',
+    params: query
+  })
+}
+//基础信息主体部分数据
+export function getNetworkInfo(query) {
+  return request({
+    url: 'screen/scd/ied/network/info',
+    method: 'get',
+    params: query
+  })
+}
 
 

src/pages/netStructPicture/components/basicInfo.vue

@@ -1,57 +1,470 @@
-<!-- 基础信息 -->
 <template>
-  <template>  
-  <div class="container">  
-    <div class="top-left">图片1</div>  
-    <div class="top-right">图片2</div>  
-    <div class="bottom-left">图片3</div>  
-    <div class="bottom-right">图片4</div>  
-    <div class="center">中间图片</div>  
-  </div>  
-</template>
+  <div id="treedom4">
+    <div style="position: relative">
+      <div class="nav" id="topLine">
+        <div class="nav-cont" v-for="(item, index) in navList" :key="index">
+          <img :src="cylinder" alt="" class="nav-img" />
+          <div>{{ item.attr_name }}</div>
+          <div class="describe-text">{{ `(${item.attr_desc})` }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="wrapper">
+      <div class="grid">
+        <div class="col fluid" style="margin-left: 20px" id="leftLine">
+          <div>
+            <div class="title">M1 (一)</div>
+            <div>
+              <span class="decrip">SDFDSF:</span
+              ><span class="decrip-item">SDFSFF</span>
+            </div>
+          </div>
+          <div class="child-item">
+            <div class="ldevice">LDevice</div>
+            <div>
+              <img :src="legislation" alt="" />
+              <div class="img-title">SVLD_PROT</div>
+              <div class="decrip-child">(录波LD)</div>
+            </div>
+            <div>
+              <img :src="legislation" alt="" />
+              <div class="img-title">SVLD_PROT</div>
+            </div>
+            <div>
+              <img :src="legislation" alt="" />
+              <div class="img-title">SVLD_PROT</div>
+            </div>
+          </div>
+        </div>
+        <div class="col main-middle" id="middleLine"></div>
+        <div class="col fluid" style="margin-right: 20px" id="rightLine">
+          <div>
+            <div class="title">M1 (一)</div>
+            <div>
+              <span class="decrip">SDFDSF:</span
+              ><span class="decrip-item">SDFSFF</span>
+            </div>
+          </div>
+          <div class="child-item">
+            <div class="ldevice">LDevice</div>
+            <div>
+              <img :src="legislation" alt="" />
+              <div class="img-title">SVLD_PROT</div>
+              <div class="decrip-child">(录波LD)</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="main-bottom" id="bottomLine">
+        <div v-if="titleName && titleName.length > 0">
+          <div class="title">
+            {{ `${titleName[0].name}(${titleName[0].desc})` }}
+          </div>
+          <div class="attr-desc">
+            <div>
+              <span class="decrip">MAC-Address:</span>
+              <span class="decrip-item" v-if="!moBottom.address">无</span>
+              <span v-else>{{ moBottom.address }}</span>
+            </div>
+            <div>
+              <span class="decrip">VLAN-PRIORITY:</span>
+              <span class="decrip-item" v-if="!moBottom.priority">无</span>
+              <span v-else>{{ moBottom.priority }}</span>
+            </div>
+            <div>
+              <span class="decrip">APPID:</span>
+              <span class="decrip-item" v-if="!moBottom.APPID">无</span>
+              <span v-else>{{ moBottom.APPID }}</span>
+            </div>
+            <div>
+              <span class="decrip">VLAN-ID:</span>
+              <span class="decrip-item" v-if="!moBottom.vlanId">无</span>
+              <span v-else>{{ moBottom.vlanId }}</span>
+            </div>
+          </div>
+          <div v-if="mainList" style="margin-bottom: 10px">
+            <span
+              v-for="(item, index) in mainList[titleName[0].name].list"
+              :key="index"
+              class="circel"
+              @click="clickCircel(item)"
+              >{{ index + 1 }}</span
+            >
+          </div>
+        </div>
+        <div class="child-item" v-if="titleName && titleName.length > 0">
+          <div class="ldevice">LDevice</div>
+          <div>
+            <img :src="legislation" alt="" />
+            <div class="img-title">SVLD_PROT</div>
+            <div class="decrip-child">(录波LD)</div>
+          </div>
+          <div>
+            <img :src="legislation" alt="" />
+            <div class="img-title">SVLD_PROT</div>
+          </div>
+          <div>
+            <img :src="legislation" alt="" />
+            <div class="img-title">SVLD_PROT</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="wrappers"></div>
+  </div>
 </template>
+
 <script setup>
-import { onMounted, watch, ref,nextTick,defineEmits } from "vue";
+import { defineProps, onMounted, ref, inject, nextTick, watch } from "vue";
+import legislation from "@/assets/image/instruct/legislation.png";
+import cylinder from "@/assets/image/instruct/cylinder.png";
+import { getNodeList, getNetworkInfo } from "@/api/iedNetwork";
+import LeaderLine from "../../../../public/leader-line.min.js";
+import AnimEvent from "../../../../public/anim-event.min.js";
+import { CloseBold } from "@element-plus/icons-vue";
 const props = defineProps({
-  checkDialogData: {
+  checkData: {
     type: Object,
     default: () => {},
   },
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
+});
+const scdIdValue = inject("scdId");
+const navList = ref(null); //最头部的数据
+const mainTitle = ref(null); //每个方框的标题
+const moBottom = ref(null); //底部方框所展示的MAC-Address等desc
+const moLeft = ref(null); //左侧方框所展示的MAC-Address等desc
+const moRight = ref(null); //右侧方框所展示的MAC-Address等desc
+const getNav = async () => {
+  const navRes = await getNodeList({
+    scd_id: scdIdValue,
+    pagesize: 10000,
+    ied_name: props.checkData.ied_name,
+    name: "DataSet",
+  });
+  navList.value = navRes.data;
+};
+const getMainTitle = async () => {
+  const mainRes = await getNodeList({
+    scd_id: scdIdValue,
+    pagesize: 10000,
+    ied_name: props.checkData.ied_name,
+    name: "AccessPoint",
+  });
+  mainTitle.value = mainRes.data;
+};
+const mainList = ref({});
+const titleName = ref([]);
+//几个方框的数据
+const getMainList = async () => {
+  mainList.value = {};
+  titleName.value = [];
+  const newarr = [];
+  const infoRes = await getNetworkInfo({
+    scd_id: scdIdValue,
+    ied_name: props.checkData.ied_name,
+  });
+  //处理分类数据
+  for (let i = 0; i < infoRes.data.length; i++) {
+    if (infoRes.data[i].address_json != "") {
+      infoRes.data[i].address_json.replace("MAC-Address", "address");
+      infoRes.data[i].address_json.replace("VLAN-PRIORITY", "priority");
+      infoRes.data[i].address_json.replace("VLAN-ID", "vlanId");
+      infoRes.data[i].address_json = JSON.parse(infoRes.data[i].address_json);
+    }
+    let item = infoRes.data[i];
+    const key = item.ap_name;
+    newarr.push(key);
+    if (mainList.value[key] == null) {
+      mainList.value[key] = {
+        name: key,
+        list: [item],
+      };
+    } else {
+      mainList.value[key].list.push(item);
+    }
+  }
+  const newarr2 = [...new Set(newarr)];
+  //处理表头描述
+  if (newarr2 && mainTitle.value) {
+    newarr2.map((item) => {
+      const descObj = mainTitle.value.find((key) => key.attr_name == item);
+      if (descObj) {
+        titleName.value.push({ name: item, desc: descObj.attr_desc });
+      }
+    });
+  }
+  if (titleName.value.length > 0 && mainList.value) {
+    moBottom.value =
+      mainList.value[titleName.value[0].name].list[0].address_json;
+    console.log("address_json", moBottom.value);
+    console.log("first", titleName.value, mainList.value);
+  }
+};
+//弹窗打开后使得线条在指定区域中
+const hiddenLine2 = () => {
+  const elmWrapper = document.getElementById("wrappers");
+  // 移动 line
+  document.body.querySelectorAll("body .leader-line").forEach((node) => {
+    elmWrapper.appendChild(node);
+  });
+  elmWrapper.style.transform = "none";
+  var rectWrapper = elmWrapper.getBoundingClientRect();
+  elmWrapper.style.transform = `translate(${
+    (rectWrapper.left + window.scrollY) * -1
+  }px, ${(rectWrapper.top + window.scrollX) * -1}px)`;
+};
+const leaderLines = ref([]); //控制线条显示
+//滚动时重定位线条
+const newPositionLine2 = () => {
+  document.getElementById("treedom4").addEventListener(
+    "scroll",
+    AnimEvent.add(() => {
+      leaderLines.value.forEach((line) => {
+        if (line) {
+          hiddenLine2();
+          line.position();
+          line.positionByWindowResize = false;
+        }
+      });
+      //中间展示图片的
+    }),
+    false
+  );
+};
+const getLine = () => {
+  const topDom = document.getElementById("topLine");
+  const leftDom = document.getElementById("leftLine");
+  const rightDom = document.getElementById("rightLine");
+  const bottomDom = document.getElementById("bottomLine");
+  const middlDom = document.getElementById("middleLine");
+  let lineStyle = {
+    color: "#134BEA",
+    size: 2,
+    path: "straight",
+    endPlug: "disc",
+    startPlug: "disc",
+    middleLabel: LeaderLine.captionLabel("AccessPoint", {
+      fontSize: 10,
+      color: "#7F8EB2",
+    }),
+  };
+  let lineStyleTop = {
+    ...lineStyle,
+    middleLabel: LeaderLine.captionLabel({
+      text: "DataSet",
+      fontSize: 10,
+      color: "#7F8EB2",
+    }),
+  };
+  let lineStyleright = {
+    ...lineStyle,
+    middleLabel: LeaderLine.captionLabel("AccessPoint", {
+      fontSize: 10,
+      color: "#7F8EB2",
+    }),
+  };
+  let lineStylebottom = {
+    ...lineStyle,
+    middleLabel: LeaderLine.captionLabel({
+      text: "AccessPoint",
+      fontSize: 10,
+      color: "#7F8EB2",
+    }),
+  };
+  leaderLines.value.push(new LeaderLine(middlDom, topDom, lineStyleTop)); //上面和中间连线
+  leaderLines.value.push(new LeaderLine(middlDom, rightDom, lineStyleright));
+  leaderLines.value.push(new LeaderLine(middlDom, bottomDom, lineStylebottom));
+  leaderLines.value.push(new LeaderLine(leftDom, middlDom, lineStyle));
+  newPositionLine2();
+  hiddenLine2();
+};
+//点击数字
+const clickCircel = (item) => {
+
+  const data = JSON.stringify(item.address_json);
+  // data.replace("MAC-Address", "address");
+  // data.replace("VLAN-PRIORITY", "priority");
+  // data.replace("VLAN-ID", "vlanId");
+  moBottom.value = JSON.parse(data);
+};
+onMounted(() => {
+  getNav();
+  getMainTitle();
+  getMainList();
+  nextTick(() => {
+    getLine();
+  });
 });
+watch(
+  () => props.isOpen,
+  (newValue) => {
+    nextTick(() => {
+      if (!newValue) {
+        removeLine2();
+        leaderLines.value = [];
+      } else {
+        getLine();
+      }
+    });
+  }
+);
+watch(
+  () => props.checkData,
+  (newValue) => {
+    getNav();
+    getMainTitle();
+    getMainList();
+    nextTick(() => {
+      getLine();
+    });
+  }
+);
+const removeLine2 = () => {
+  const elmWrapper = document.getElementById("wrappers");
+  document.body.querySelectorAll("body .leader-line").forEach((node) => {
+    elmWrapper.removeChild(node);
+  });
+};
 </script>
-<style scoped lang="scss">  
-.container {  
-  display: flex;  
-  justify-content: space-between;  
-  align-items: center;  
-  width: 100%;  
-  height: 100vh; // 或者其他你需要的高度值  
-}  
-  
-.top-left, .top-right, .bottom-left, .bottom-right {  
-  width: 50px; // 根据需要调整宽度和高度  
-  height: 50px; // 根据需要调整宽度和高度  
-}  
-  
-.top-left {  
-  background:url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
-}  
-  
-.top-right {  
-  background: url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
-}  
-  
-.bottom-left {  
-  background: url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
-}  
-  
-.bottom-right {  
-  background: url("~@/assets/image/instruct/navtop.png") no-repeat center center;  
-}  
-  
-.center {  
-  width: 100px; // 根据需要调整宽度和高度  
-  height: 100px; // 根据需要调整宽度和高度  
-  background: url('path/to/centerImage.jpg') no-repeat center center;  
-}  
+
+<style scoped lang="scss">
+#treedom4 {
+  height: 72vh;
+  overflow-y: auto;
+}
+.wrapper {
+  position: relative;
+}
+.nav {
+  height: 160px;
+  background: #f3f5fa;
+  overflow-y: auto;
+  border: 2px dashed #a3ade0;
+  display: flex;
+  justify-content: start;
+  flex-wrap: wrap;
+  position: relative;
+  margin: 16px;
+  .nav-img {
+    width: 30px;
+    height: 30px;
+  }
+  .nav-cont {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 8px 0;
+    flex-basis: 14%;
+    .describe-text {
+      color: #134bea;
+    }
+  }
+}
+.main-bottom,
+.fluid {
+  border: 2px dashed #a3ade0;
+  display: flex;
+  flex-direction: column;
+  max-width: 36%;
+  img {
+    width: 40px;
+    height: 40px;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 12px 0;
+    text-align: center;
+  }
+  .attr-desc {
+    margin: 10px;
+  }
+  .decrip {
+    color: #7484ab;
+    font-size: 14px;
+    margin-right: 15px;
+    width: 130px;
+    display: inline-block;
+  }
+  .decrip-child {
+    color: #7484ab;
+    font-size: 14px;
+  }
+  .decrip-item {
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .child-item {
+    display: flex;
+    margin: 12px;
+    flex-wrap: wrap;
+    border: 1px solid #5182ff;
+    position: relative;
+    & > div {
+      margin: 8px;
+    }
+    .ldevice {
+      position: absolute;
+      top: -20px;
+      left: -10px;
+      padding: 0 4px;
+      background: #5182ff;
+      color: white;
+      border-radius: 10px;
+    }
+  }
+  .img-title {
+    color: #134bea;
+  }
+}
+.circel {
+  color: #7c58a8;
+  padding: 0rem 0.4rem;
+  border: 1px solid #606c93;
+  border-radius: 1rem;
+  margin-left: 0.5rem;
+  cursor: pointer;
+}
+.Image {
+  width: 193px;
+  height: 150px;
+}
+/* 设置网格布局相关的样式 */
+.grid {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 50px;
+}
+
+.grid > .col {
+  box-sizing: border-box;
+  // padding: 10px;
+}
+
+/* 设置fixed2样式 */
+.main-middle {
+  width: 160px;
+  height: 160px;
+  background: #fff url("~@/assets/image/instruct/network_slices.png") no-repeat
+    center;
+  background-size: 160px;
+}
+
+/* 设置fluid样式 */
+.fluid {
+  flex-grow: 1;
+  background-color: #f7f8f8;
+}
+.main-bottom {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 40px;
+}
 </style>

src/pages/netStructPicture/components/inoutControl.vue

@@ -97,7 +97,6 @@
 </template>
 <script setup>
 import { onMounted, watch, ref, nextTick, defineEmits, inject  } from "vue";
-import devicePng from "@/assets/image/instruct/device.png";
 import LeaderLine from "../../../../public/leader-line.min.js";
 import AnimEvent from "../../../../public/anim-event.min.js";
 import inoutSendOrRv from "./inoutSendOrRv";

src/pages/netStructPicture/components/netWork.vue

@@ -151,7 +151,7 @@ const loading = ref(true);
 //获取网络图的顶部列表
 const getNetWork = async () => {
   const infoRes = await nodeList({
-    scd_id: 512000138,
+    scd_id: 568000158,
     pagesize: 10000,
     name: "SubNetwork",
   });
@@ -170,7 +170,7 @@ const allApData = ref({});
 const initLoad = async () => {
   allApData.value = {};
   const allAP = await nodeList({
-    scd_id: 512000138,
+    scd_id: 568000158,
     pagesize: 10000,
     name: "ConnectedAP",
   });
@@ -198,7 +198,7 @@ const initLoad = async () => {
 };
 //处理重复的ip
 const ipNetaddr = async () => {
-  const ipRes = await iedNetaddr({ scd_id: 512000138 });
+  const ipRes = await iedNetaddr({ scd_id: 568000158 });
   if (ipRes.code == 1) {
     return;
   }
@@ -500,11 +500,11 @@ const clickNetworkInfo = (value) => {
 
 const iedRelationData = ref([]);
 const iedRelation = async () => {
-  const iedRes = await scdIedRelation({ scd_id: 512000138 });
+  const iedRes = await scdIedRelation({ scd_id: 568000158 });
   iedRelationData.value = iedRes.data;
 };
 //弹窗=============
-provide('scdId',512000138)
+provide('scdId',568000158)
 </script>
   
 <style scoped lang="scss">