Merge branch 'master-v32-lushangqing' into 'master'

故障联调 链路节点组件更改



See merge request !293

-<el-row clas="netLink">
-    <el-col :span="3" v-for="(itemLink,index) in networkMonitorList" class="max-width-134">
+<el-row class="netLink margin-bottom-10" v-for="(itemLink,index) in networkMonitorList">
+    <el-col :span="24" class="flex-div-start margin-bottom-10">{{itemLink.linkName}}</el-col>
+
+    <el-col :span="3" v-for="(itemNode,indexNode) in itemLink.nodeData" class="max-width-134">
         <div class="list-step flex-div-start">
             <div class="list-step-top flex-div">
-                    <div  :class="['step-img-link','flex-div-center',{'isActiveG':itemLink.value==0,'isActiveY':itemLink.value==1}]" style="cursor: default">
-                        <i class="icon-step flex-div-center"><img :src="'/vue3/src/assets/images/faultDiagnosis/netLink-icon.png'" alt=""></i>
+                    <div  :class="['step-img-link','flex-div-center',{'isActiveG':itemNode[0].state==0,'isActiveY':itemNode[0].state==1}]" style="cursor: default">
+                        <i class="icon-step flex-div-center">
+                            <img v-if="!itemNode[0].resType" :src="'/vue3/src/assets/images/faultDiagnosis/netLink-icon.png'" alt="">
+                            <img v-if="itemNode[0].resType"  :src="'/src/style/img/fault/'+itemNode[0].resType+'.png'" alt="">
+                        </i>
                     </div>
-                    <span  v-if="index+1<networkMonitorList.length" :class="['list-line','list-line-netLink',{'isActiveG':itemLink.value==0,'isActiveY':itemLink.value==1}]"></span>
+                    <span  v-if="itemNode[1] && indexNode+1<itemLink.nodeList.length" :class="['list-line','list-line-netLink',{'isActiveG':itemNode[1].state==0,'isActiveY':itemNode[1].state==1}]"></span>
             </div>
             <div class="list-step-name flex-div-start">
-                <span class="text-overflow width-100" :title="itemLink.linkName">
-                 {{itemLink.linkName}}
+                <span class="text-overflow width-100" :title="itemNode[0].nodeName">
+                 {{itemNode[0].nodeName}}
                 </span>
                 <span class="list-line-none"></span>
             </div>

@@ -20,39 +20,61 @@ export default {
             linkName:'链路1',
             linkDesc:'测试链路1',
             nodeList:[{
-                name:'节点1',
+                nodeName:'节点1',
                 desc:'xxx',
+                nodeType: "point",
+                resType:'ALI_CLOUD_ECS',
                 state:0
             },{
-                name:'节点2',
                 desc:'xxx',
+                nodeType: "line",
+                resType:'ALI_CLOUD_ECS',
                 state:0
             },{
-                name:'节点3',
+                nodeName:'节点3',
                 desc:'xxx',
+                nodeType: "point",
+                resType:'ALI_CLOUD_ECS',
+                state:1
+            },{
+                desc:'xxx',
+                nodeType: "line",
+                resType:'ALI_CLOUD_ECS',
+                state:1
+            },{
+                nodeName:'节点4',
+                desc:'xxx',
+                nodeType: "point",
+                resType:'ALI_CLOUD_ECS',
                 state:0
             }]
         },{
             linkName:'链路2',
             linkDesc:'测试链路2',
             nodeList:[{
-                name:'节点1',
+                nodeName:'节点1',
                 desc:'xxx',
-                state:0
+                nodeType: "point",
+                resType:'ALI_CLOUD_ECS',
+                state:1
             },{
-                name:'节点2',
                 desc:'xxx',
-                state:0
+                nodeType: "line",
+                resType:'ALI_CLOUD_ECS',
+                state:1
             },{
-                name:'节点3',
+                nodeName:'节点3',
                 desc:'xxx',
+                nodeType: "point",
+                resType:'ALI_CLOUD_ECS',
                 state:0
             }]
         }]);
 
-        // Vue.onMounted(() => {
-        //     getNetLinkList();
-        // })
+        Vue.onMounted(() => {
+            // getNetLinkList();
+            reNodeData();
+        })
         // Vue.watch(props.itemInfo, (newVal) => {
         //     getNetLinkList()
         // })
@@ -74,10 +96,28 @@ export default {
                 }
             })
         }
+        /**
+         * 将节点数据结构重新组合成二维数组
+         * <p>
+         * 作者： LSQ
+         * 时间：2021/12/27 17:10
+         * 获取到链路节点数据之后调用
+         */
+        let reNodeData=()=>{
+            networkMonitorList.value.map((item,index)=>{
+                let arr=[];
+
+                for(let i=0;i<item.nodeList.length;i+=2){
+                    arr.push(item.nodeList.slice(i,i+2))
+                }
+                item.nodeData=arr;
+            })
+        }
 
         return {
             getNetLinkList,
             networkMonitorList,
+            reNodeData
         }
 
     }