Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-V32-XuHaoJie

@@ -119,7 +119,6 @@ export default {
                     }
                     }
 
 
                     if(w < max){
                     if(w < max){
-                        console.log('%');
                         return max / w * width;
                         return max / w * width;
                     }
                     }
                 }
                 }

@@ -10,8 +10,36 @@ var global = {};
 global.layui = window.parent.layui;
 global.layui = window.parent.layui;
 
 
 global.common = {
 global.common = {
+
 };
 };
 
 
+global.message = {
+    types:{
+        // 数据重复添加
+        CODE_DD: `{1}已经存在，请勿重复添加！`,
+        CODE_MAX:`{1}数目已达上线，请取消部分类型，再进行提交`,
+        CODE_DELETE_CONFIRM:`删除{1}后不可恢复，请谨慎操作！`,
+        CODE_ADD:`添加成功`,
+        CODE_UPDATE:`修改成功`,
+        CODE_DELETE:`删除成功`
+    },
+    get: function (type, args ) {
+        let arr = [];
+        if(typeof(args) == 'string'){
+            arr.push(args);
+        }
+        let msg = global.message.types[type];
+        if(!msg){
+            console.error('请求类型：%s在列表中：%s，不存在，请确认',type,JSON.stringify(global.message.types))
+            return '';
+        }
+        for(let i = 0; i < arr.length; i++){
+            msg = msg.replace(new RegExp("\\{" + i + "\\}", "g"), arr[i]);
+        }
+        return msg;
+    }
+}
+
 global.showLoading = (callback) => {
 global.showLoading = (callback) => {
     const loading = ElementPlus.ElLoading.service({
     const loading = ElementPlus.ElLoading.service({
         lock: true,
         lock: true,

@@ -285,6 +285,7 @@
     color:#3B91FF;
     color:#3B91FF;
 
 
 }
 }
+
 .step-img{
 .step-img{
     background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-add.png");
     background-image: url("/vue3/src/assets/images/faultDiagnosis/icon-step-add.png");
     width: 50px;
     width: 50px;
@@ -464,10 +465,26 @@
 .max-width-134{
 .max-width-134{
     max-width: 134px;
     max-width: 134px;
 }
 }
-.position-absolute{
-
+.step-img-link{
+    width: 50px;
+    height: 50px;
+    background:#1ed76d;
+    border-radius: 50%;
+}
+.step-img-link.isActiveG{
+    background: #1ed76d;
 }
 }
-.btn-el-btn{
+.step-img-link.isActiveY{
+    background: #fea500;
 }
 }
-.btn-el-btn .el-button{
+.list-line-netLink{
+    border-top-color:#1ed76d;
 }
 }
+.list-line-netLink.isActiveY{
+    border-top-color:#ffa500;
+
+}
+.list-line-netLink.isActiveG{
+    border-top-color:#1ed76d;
+
+}

-<div>
-    <!--<el-steps :space="'20%'" :active="1" simple>
-        <el-step   title="数据库" v-for="i in 3">
-            <template #icon>
-                &lt;!&ndash;<img src="/src/style/img/restypeimg/DATABASE_REDIS.png" />&ndash;&gt;
-                <i class="iconfont icon-database" />
-            </template>
-        </el-step>
-    </el-steps>-->
+<el-row clas="netLink">
+    <el-col :span="3" v-for="(itemLink,index) in networkMonitorList" 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>
 
 
-    <el-steps :active="3" align-center>
-        <el-step title="Step 1" description="Some description" v-for="i in 3">
-            <template #icon>
-                <i class="iconfont icon-database" />
-                <!--<img src="/src/style/img/restypeimg/DATABASE_REDIS.png" style="background: black;border-radius: 5px;width: 80%;height: 80%;"/>-->
-            </template>
-        </el-step>
+                    <span  v-if="index+1<networkMonitorList.length" :class="['list-line','list-line-netLink',{'isActiveG':itemLink.value==0,'isActiveY':itemLink.value==1}]"></span>
 
 
-    </el-steps>
-</div>
+            </div>
+            <div class="list-step-name flex-div-start">
+                <span class="text-overflow width-100" :title="itemLink.linkName">
+                 {{itemLink.linkName}}
+                </span>
+                <span class="list-line-none"></span>
+            </div>
+
+        </div>
+    </el-col>
+</el-row>

-
 export default {
 export default {
-    name: 'netLinks',
+    name: 'diagnosisNet',
     template: '',
     template: '',
-    components: {
-
-    },
-    data() {
-        return {}
-    },
+    components: {},
     props: {
     props: {
-        faultType:{
+        faultNo: {
             type: String,
             type: String,
-            default:'NPM'
+            default: ''
         },
         },
-        faultNo:{
-            type: String,
-            default:''
+    },
+    data() {
+        return {
+
         }
         }
     },
     },
-    setup(props, {attrs, slots, emit}) {
-        let width = Vue.ref(window.innerWidth*0.8 - 190);
+    computed: {},
+    setup(props) {
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
-        let list = Vue.ref([
-            {
-                content: 'Custom icon',
-                timestamp: '2018-04-12 20:46',
-                size: 'large',
-                type: 'primary',
-            },
-            {
-                content: 'Custom color',
-                timestamp: '2018-04-03 20:46',
-                color: '#0bbd87',
-            },
-            {
-                content: 'Custom size',
-                timestamp: '2018-04-03 20:46',
-                size: 'large',
-            },
-            {
-                content: 'Custom hollow',
-                timestamp: '2018-04-03 20:46',
-                type: 'primary',
-                hollow: true,
-            },
-            {
-                content: 'Default node',
-                timestamp: '2018-04-03 20:46',
-            },
-        ]);
-
-
-        // 监听编辑状态
-        Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
+        let networkMonitorList=Vue.ref([]);
 
 
-        });
-
-        // 挂载完
         Vue.onMounted(() => {
         Vue.onMounted(() => {
+            proxy.getNetLinkList();
+
         })
         })
+        Vue.watch(props.targetId, (newVal) => {
+            console.log("new targetid",newVal)
+            proxy.getNetLinkList()
+        })
+        //根据targetId获取链路信息列表
+        let getNetLinkList=()=>{
+            let params={
+                // targetId:props.targetId,
+                faultNo:props.faultNo
+
+            }
+            //api-web/fault/result/findNetLinkResult
+            //api-web/fault/conf/netLink/getNetLinkList
+            proxy.$http.get('/api-web/fault/result/findNetLinkResult',params,function (res){
+                if(res && res.data){
+                    proxy.networkMonitorList=res.data;
 
 
+                }
+            })
+        }
         return {
         return {
-            width,
-            list
+            getNetLinkList,
+            networkMonitorList,
         }
         }
+
     }
     }
-}
+}

@@ -42,13 +42,13 @@ const faultDetail = () => {
             itemName: '检测指标',
             itemName: '检测指标',
             detail: true,
             detail: true,
             colType: 'flag'
             colType: 'flag'
-        }/*, {
+        }, {
             faultType: 'NETLINK',
             faultType: 'NETLINK',
             faultTypeName: '网络链路',
             faultTypeName: '网络链路',
             components: 'netLinks',
             components: 'netLinks',
             color: '#409EFF',
             color: '#409EFF',
             detail:true
             detail:true
-        }*/]
+        }]
     });
     });
 
 
     /**
     /**