feat：调用查询接口 查询topo 以及处理get请求的文件流为base64，删除console

nezha-fronted/src/components/common/project/addLine.vue

@@ -16,13 +16,13 @@
 
       <!-- begin--表单-->
       <el-scrollbar class="right-box-form-box">
-        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+        <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
           <el-form-item label="Line Name" prop="lineName" class="line-name">
-            <el-input v-model="form.lineName" type="small"></el-input>
+            <el-input v-model="form.lineName"  size="small"></el-input>
           </el-form-item>
           <el-row class="form-title">Option</el-row>
           <el-form-item label="width" prop="width" class="line-name">
-            <el-input v-model="form.width" type="small"></el-input>
+            <el-input v-model="form.width"  size="small"></el-input>
           </el-form-item>
           <!--<el-form-item label="roundness"  class="line-name">-->
             <!--<el-input v-model="form.roundness"></el-input>-->
@@ -42,7 +42,7 @@
             <!--</el-select>-->
           <!--</el-form-item>-->
           <el-form-item label="箭头方向" prop="arrows" class="arrows">
-            <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" type="small">
+            <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false"  size="small">
               <div slot="prefix">
                 <img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
                 <img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
@@ -216,7 +216,7 @@
       }
     },
     mounted(){
-      this.addExpression();
+      // this.addExpression();
     },
     methods:{
       onSubmit(){
@@ -225,8 +225,8 @@
             let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
             model.width = parseInt(model.width) || 4;
             model.smooth={
-              roundness:model.roundness,
+              roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
-              type:model.type ,
+              type:'curvedCW',
             };
             model.expressions=[];
             this.promqlKeys.forEach((item,index)=>{
@@ -254,7 +254,7 @@
         this.promqlCount++;
       },
       removeExpression(index) {
-        if (this.promqlCount > 1) {
+        if (this.promqlCount >= 1) {
           this.expressions.splice(index, 1);
           this.legends.splice(index, 1);
           this.name.splice(index, 1);
@@ -328,6 +328,7 @@
     display: flex;
     align-items: center;
     width: calc(100% - 30px);
+    height: 30px;
   }
   .color-show-left{
     width: 18px;
@@ -352,15 +353,26 @@
   }
   .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
     border: 1px solid #DCDFE6;
-    height: 41px;
+    height: 28px;
     width: calc(100% - 30px);
   }
   .arrows /deep/ .el-input__inner{
     display: none;
   }
+  .arrows /deep/ .el-input__prefix{
+    height: 28px;
+    line-height: 28px;
+  }
   /deep/ .el-select{
     width: 262px;
   }
+  .el-row {
+    margin-bottom: 20px;
+    line-height: 32px;
+  }
+  .el-row:last-child  {
+    margin-bottom: 0;
+  }
   .nz-btn-edit-ok{
     position: absolute;
     bottom: 0;
@@ -480,66 +492,3 @@
   /* end--table*/
 </style>
 
-<style lang="scss">
-  .right-box-edit-endpoint .el-pagination__total {
-    float: left;
-  }
-  right-box-edit-endpoint .pagination {
-    padding-top: 12px;
-    text-align: center;
-  }
-
-  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
-    font-size: 13px;
-    min-width: 20px !important;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    text-align: center;
-    border: 1px solid rgba(154,154,154,0.20);
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
-    color: white !important;
-  }
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
-    color: #666;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pager li.number{
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pager li.number.active{
-    font-family: NotoSansSC-Regular;
-    color: #FFFFFF;
-    letter-spacing: 0;
-  }
-
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: $global-text-color-active;
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
-    height: 20px;
-    border-color: rgba(154,154,154,0.20);
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
-    border-color: rgba(154,154,154,0.20);
-  }
-</style>
-

nezha-fronted/src/components/common/project/addNode.vue

@@ -32,13 +32,17 @@
 
         <el-form-item label="Icon" prop="iconId" class="icon">
           <el-select v-model="form.iconId" placeholder=""  popper-class="asset-dropdown" size="small">
+            <div slot="prefix" class="sel-image">
+              <img v-if="form.iconId" :src="selImage.image" style="height: 28px"/>
+              <span v-if="form.iconId" class="sel-image-name">{{selImage.imageName}}</span>
+            </div>
             <el-option
               v-for="item in iconArray"
               :key="item.id"
               :label="item.label"
               :value="item.id">
               <span style="float: left;width: 50%">
-                <img :src="item.image" />
+                <img :src="item.image" style="width: 24px;height: 32px"/>
               </span>
               <span style="float: right; color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
             </el-option>
@@ -49,7 +53,7 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
-            @change="onChange"
+            :auto-upload="true"
           >
            上传文件
           </el-upload>
@@ -129,12 +133,6 @@
   import promqlInput from "@/components/page/dashboard/explore/promqlInput";
   import chartDataFormat from "@/components/charts/chartDataFormat";
   import {getUUID,resetZIndex} from "@/components/common/js/common";
-  import  a from './image/a.png'
-  import  b from './image/b.png'
-  import  c from './image/c.png'
-  import  d from './image/d.png'
-  import  e from './image/e.png'
-  import  f from './image/f.png'
   var rz = {
     methods: {
       rz(e) {
@@ -149,7 +147,7 @@
     },
     props:{
       nodeData:{},
-      moduleDataS:{}
+      moduleDataS:{},
     },
     mixins: [rz],
     watch:{
@@ -165,7 +163,16 @@
       },
       moduleDataS:{
         handler(n){
-          console.log(n)
+          // console.log(n)
+        },
+        immediate: true,
+        deep: true,
+      },
+      'form.iconId':{
+        handler(n){
+          if(n){
+            this.selImage=this.iconArray.find(item=>item.id===n)
+          }
         },
         immediate: true,
         deep: true,
@@ -177,6 +184,9 @@
           moduleId:'',
           iconId:'',
         },
+        selImage:'',
+        file:'',
+        uploadFileList:[],
         unitOptions: chartDataFormat.unitOptions(),
         promqlKeys:[],
         expressions: [],
@@ -193,21 +203,50 @@
             { required: true, message: '请选择icon', trigger: 'blur' },
           ],
         },
-        iconArray:[
+        iconArray:[],
-          {id:1,image:a,imageName:"module1"},
-          {id:2,image:b,imageName:"module1"},
-          {id:3,image:c,imageName:"module1"},
-          {id:4,image:d,imageName:"module1"},
-          {id:5,image:e,imageName:"module1"},
-          {id:6,image:f,imageName:"module1"},
-          // {id:7,img:'./a.png',label:'model',},
-        ],
       }
     },
     mounted(){
-      this.addExpression()
+      // this.addExpression();
+      this.addNodeInit()
     },
     methods:{
+      addNodeInit(){
+        this.$get('/project/topo/icon').then(res=>{
+          this.iconArray=res.data.list;
+          this.iconArray.forEach((item,index)=>{
+            item.imageName=item.name;
+            delete item.name;
+            this.dealImg(`/project/topo/icon/${item.id}`).then((data)=>{
+              item.image=data;
+              if(index===this.iconArray.length-1){
+                setTimeout(()=>{
+                  this.iconArray=[...this.iconArray];
+                })
+              }
+            })
+          });
+        })
+      },
+      dealImg(url) {
+        // 处理后端传过来的图片流乱码问题
+        if (url) {
+          return new Promise((resolve,reject)=>{
+            this.$axios
+              .get(url, {
+                responseType: "arraybuffer"
+              })
+              .then(res => {
+                return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
+              })
+              .then(data => {
+                resolve(data)
+              })
+              .catch(err => {
+              });
+          })
+        }
+      },
       onSubmit(){
         this.$refs['form'].validate((valid) => {
           if (valid) {
@@ -215,7 +254,6 @@
             let img=this.iconArray.find(item=>item.id===this.form.iconId);
             let model=Object.assign({...this.form},{...module},{...img},{id:this.form.moduleId,shape:'image',shapeProperties:{useImageSize:false}},);
             model.label=model.name;
-            console.log(this.promqlKeys,this.expressions,this.promqlCount,this.legends,this.name,this.unit);
             model.expressions=[];
             this.promqlKeys.forEach((item,index)=>{
               model.expressions.push({
@@ -243,7 +281,7 @@
         this.promqlCount++;
       },
       removeExpression(index) {
-        if (this.promqlCount > 1) {
+        if (this.promqlCount >= 1) {
           this.expressions.splice(index, 1);
           this.legends.splice(index, 1);
           this.name.splice(index, 1);
@@ -272,58 +310,38 @@
         this.esc();
       },
       beforeAvatarUpload(file){
-        const isJPG = file.type === 'image/jpeg';
+        let isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
 
         const isLt2M = file.size / 1024 / 1024 < 2;
 
         if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
+          this.$message.error('上传图片只能是 JPG/png 格式!');
         }
         if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
+          this.$message.error('上传图片大小不能超过 2MB!');
-        }
-        console.log(file);
-        if(isJPG && isLt2M){
-          this.getBase64(file).then(res => {
-            const params = res.split(',')
-            console.log(params, 'params')
-            if (params.length > 0) {
-              this.strimagebase64 = params[1]
-              console.log(this.strimagebase64);
-            }
-          });
         }
+        this.file=file;
+        this.upload();
         return false;
       },
-      handleAvatarSuccess(file){
+      handleAvatarSuccess(file,res){
-
+        console.log(res);
       },
-      onChange(file,fileList){
+      upload() {
-        this.getBase64(file.raw).then(res => {
+        let form = new FormData();
-          const params = res.split(',')
+        form.append("file",this.file);
-          console.log(params, 'params')
+        let fileName=this.file.name;
-          if (params.length > 0) {
+        form.append("name", fileName.substring(0, fileName.lastIndexOf(".")));
-            this.strimagebase64 = params[1]
+        this.$post('/project/topo/icon',form,{'Content-Type': 'multipart/form-data'}).then(res => {
-          }
+          if(res.code ==  200 ){
-        });
+            this.form.iconId=res.data.id;
-      },
+            this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-      getBase64(file) {
+            this.addNodeInit();
-
+          }else{
-        return new Promise(function(resolve, reject) {
+            this.$message.error(res.msg);
-          const reader = new FileReader()
-          let imgResult = ''
-          reader.readAsDataURL(file)
-          reader.onload = function() {
-            imgResult = reader.result
-          }
-          reader.onerror = function(error) {
-            reject(error)
-          }
-          reader.onloadend = function() {
-            resolve(imgResult)
           }
         })
-      }
+      },
     },
 
 	}
@@ -341,6 +359,19 @@
     vertical-align: middle;
     margin-left: 5px;
   }
+  .sel-image{
+    height: 28px;
+    line-height: 28px;
+    width: 300px;
+    text-align: left;
+  }
+  .sel-image-name{
+    float: right;
+    display: inline-block;
+    height: 28px;
+    line-height: 28px;
+    color: #333333;
+  }
   .nz-btn-edit-ok{
     position: absolute;
     bottom: 0;
@@ -351,7 +382,18 @@
     bottom: 0;
     left:0;
   }
-
+  .icon /deep/ .el-input.el-input--prefix.el-input--suffix{
+    border: 1px solid #DCDFE6;
+    height: 28px;
+    width: calc(100% - 30px);
+  }
+  .icon /deep/ .el-input__inner{
+    display: none;
+  }
+  .icon /deep/ .el-input__prefix{
+    height: 28px;
+    line-height: 28px;
+  }
   /* begin--搜索框*/
   .endpoint-asset-search {
     display: inline-block;
@@ -462,6 +504,7 @@
 
   .el-row {
     margin-bottom: 20px;
+    line-height: 32px;
   }
   .el-row:last-child  {
     margin-bottom: 0;
@@ -513,66 +556,3 @@
     z-index: 2900;
   }
 </style>
-
-<style lang="scss">
-  .right-box-edit-endpoint .el-pagination__total {
-    float: left;
-  }
-  right-box-edit-endpoint .pagination {
-    padding-top: 12px;
-    text-align: center;
-  }
-
-  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
-    font-size: 13px;
-    min-width: 20px !important;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    text-align: center;
-    border: 1px solid rgba(154,154,154,0.20);
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
-    color: white !important;
-  }
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
-    color: #666;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
-    line-height: 20px;
-  }
-  .right-box-edit-endpoint .el-pager li.number{
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pager li.number.active{
-    font-family: NotoSansSC-Regular;
-    color: #FFFFFF;
-    letter-spacing: 0;
-  }
-
-  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: $global-text-color-active;
-    border-radius: 2px;
-    border-radius: 2px;
-  }
-  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
-    font-family: NotoSansSC-Regular;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight:normal;
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
-    height: 20px;
-    border-color: rgba(154,154,154,0.20);
-  }
-  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
-    border-color: rgba(154,154,154,0.20);
-  }
-</style>

nezha-fronted/src/components/common/project/popData/alertTable.vue

@@ -1,6 +1,6 @@
 <template>
-  <!--<div class="mc" @click.self="clickOutside">-->
+  <div class="mc" @click.self="clickOutside">
-    <div class="right-box right-box-project-alert" v-clickoutside="clickOutside">
+    <div class="right-box right-box-project-alert">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
@@ -147,7 +147,7 @@
         <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
     </div>
-  <!--</div>-->
+  </div>
 </template>
 
 <script>

nezha-fronted/src/components/common/project/popData/lineChart.vue

@@ -708,7 +708,6 @@
                 let chartUnit=chartInfo.unit;
                 chartUnit=chartUnit?chartUnit:2;
                 let unit=chartDataFormat.getUnit(chartUnit);
-                //console.info(value, chartUnit, unit.compute(value,index))
                 return unit.compute(value,index);
               },
             },
@@ -858,7 +857,6 @@
             let divHeight = legendDiv.offsetHeight;
             let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
             let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-            //console.log("11____00",sumHeight,divHeight,legendDiv)
             self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
             self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
             setTimeout(function () {
@@ -882,10 +880,8 @@
                 let divHeight = legendDiv.offsetHeight;
                 let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
                 let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-                //console.log("11____00",sumHeight,divHeight,legendDiv)
                 self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
                 self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-                console.log(self.seriesItemScreen,self.seriesItemArrScreen);
                 self.echartModalStore.off('finished');
               })
             }, 100);
@@ -1185,7 +1181,6 @@
           }
           let step = bus.getStep(startTime,endTime);
           if (type === 'list') { // 普通模式,主控台使用
-            console.info(this.data);
             axiosArr = this.data.elements.map((ele) => {
               const filterItem = ele;
               let query = encodeURIComponent(filterItem.expression);
@@ -1438,7 +1433,6 @@
           let divHeight = legendDiv.offsetHeight;
           let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
           let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-          //console.log("11____00",sumHeight,divHeight,legendDiv)
           this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`;
           this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度
         })

nezha-fronted/src/components/common/project/popData/totalChart.vue

@@ -703,7 +703,6 @@
       },
       // 关闭loading状态
       loadingFalse(item){
-        console.log(item);
         this.$set(this.dataList[item.id],'loading',false);
       },
     },

nezha-fronted/src/components/common/project/topology.vue

@@ -87,6 +87,7 @@
         @del="nodeDel"
         :isAdd="isNodeAdd"
         :moduleDataS="moduleDataS"
+        :projectName="allModuleInfo.basic"
       ></add-model>
     </transition>
     <transition name="right-box">
@@ -258,8 +259,19 @@
       saveTopology(){
         let nodes=this.formatNodes([...this.nodesArray]);
         let edges=this.formatEdges([...this.edgesArray]);
-        console.log(nodes,edges,this.nodesArray,this.edgesArray);
+        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges}),projectId:this.allModuleInfo.basic.id}).then(res=>{
-        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges}),projectId:this.allModuleInfo.basic.id});
+          if(res.code==200){
+            this.$message({
+              message: this.$t("tip.saveSuccess"),
+              type: 'success'
+            });
+          }
+        }).catch(res=>{
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          });
+        });
         this.$emit('editVisNetworkChange',false);
       },
       formatNodes(arr){
@@ -398,6 +410,8 @@
         });
         this.$nextTick(()=>{
           this_.modelTopUpdate();
+          this_.arrayDiff();
+          this_.popDataShowUpdate();
         })
       },
       addModel(model){ // 添加model

nezha-fronted/src/components/common/project/visNetwork.vue

@@ -24,7 +24,7 @@
                 <!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon&#45;&#45;right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
               </span>
               <span>
-                <i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(!editVisNetwork)"></i>
+                <i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(true)"></i>
                 <!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
                 <!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
               </span>
@@ -44,14 +44,14 @@
               <div>
                 <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
               </div>
-              <div>
+              <!--<div>-->
-            <!--<span>-->
+                <!--<span>-->
-              <!--<span class="label">Alert state :</span>-->
+                  <!--<span class="label">Alert state :</span>-->
-              <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
+                  <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
-              <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
+                  <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
-              <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
+                  <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
-            <!--</span>-->
+                <!--</span>-->
-              </div>
+              <!--</div>-->
               <div>
                 <span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
               </div>
@@ -172,7 +172,9 @@
         //其他
         isError:false,
         nodesArray:[],
+        nodesArrayOther:[],
         edgesArray:[],
+        edgesArrayOther:[],
         dragTitleShow:false,
         dropdownMenuShow:false,
         editVisNetwork:false,
@@ -190,38 +192,43 @@
       },
       getNetworkData(n){
         this.topologyLoading=true;
-        console.log(n);
+        this.editVisNetwork=false;
         this.$get('/project/topo',{projectId:n.id}).then(res=>{
-          console.log(res);
           if(res.data.topo){
-            this.nodesArray=this.formatNodesArr(res.data.topo.nodes);
+            this.nodesArray=[];
-            this.edgesArray=this.formatEdgesArr(res.data.topo.lines);
+            this.edgesArray=[];
-            console.log(this.nodesArray,this.edgesArray)
+            this.nodesArrayOther=this.formatNodesArr(res.data.topo.nodes);
+            this.edgesArrayOther=this.formatEdgesArr(res.data.topo.lines);
           }else{
             this.nodesArray=[];
             this.edgesArray=[];
+            setTimeout(()=>{
+              this.topologyLoading=false;
+              this.$refs['topology'].setData();
+            },500)
           }
-          setTimeout(()=>{
+          this.$refs['topology'].viewsCenter={x:0,y:0};
-            this.topologyLoading=false;
-            this.$refs['topology'].setData();
-          },500)
         })
       },
       formatNodesArr(arr){
         let arr1=[];
         if(!arr){return arr1}
-        arr.forEach((item)=>{
+        arr.forEach((item,index)=>{
           item.shape='image';
           item.id=item.moduleId;
-          switch(item.iconId){
+          this.dealImg(`/project/topo/icon/${item.iconId}`).then((data)=>{
-            case 1: item.image=a;break;
+            item.image=data;
-            case 2: item.image=b;break;
+            if(index===arr.length-1){
-            case 3: item.image=c;break;
+              setTimeout(()=>{
-            case 4: item.image=d;break;
+                this.nodesArray=[...this.nodesArrayOther];
-            case 5: item.image=e;break;
+                this.edgesArray=[...this.edgesArrayOther];
-            case 6: item.image=f;break;
+                setTimeout(()=>{
-            default: item.image=a;
+                  this.topologyLoading=false;
-          }
+                  this.$refs['topology'].setData();
+                },500)
+              })
+            }
+          })
         });
         return arr
       },
@@ -232,10 +239,28 @@
           item.dashes=[15,15];
           item.from=item.source;
           item.to=item.target;
-
         });
         return arr
       },
+      dealImg(url) {
+        // 处理后端传过来的图片流乱码问题
+        if (url) {
+          return new Promise((resolve,reject)=>{
+            this.$axios
+              .get(url, {
+                responseType: "arraybuffer"
+              })
+              .then(res => {
+                return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
+              })
+              .then(data => {
+                resolve(data)
+              })
+              .catch(err => {
+              });
+          })
+        }
+      },
       editVisNetworkChange(flag){
         this.editVisNetwork=flag;
         if(flag){