优化添加 和切换project的部分

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

@@ -2,38 +2,50 @@
   <div class="right-box right-box-edit-endpoint">
     <!-- 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 ">
+      <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
-        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <!--<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>-->
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+        <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
-      </button>
+      <!--</button>-->
     </div>
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + lineData.id}}</div>
+    <div class="right-box-title">Add Line</div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
       <el-form ref="form" :model="form" label-width="120px" :rules="rules">
-        <el-form-item label="Id">
+        <el-form-item label="Line Name" prop="lineName" class="line-name">
-          <el-input v-model="form.lineId"></el-input>
+          <el-input v-model="form.lineName"></el-input>
         </el-form-item>
-        <el-form-item label="箭头方向" prop="arrows">
+        <el-form-item label="箭头方向" prop="arrows" @change="iconChange" class="arrows">
-          <el-select v-model="form.arrows" placeholder="请选择活动区域">
+          <el-select v-model="form.arrows" placeholder="">
-            <el-option label="from" value="from"></el-option>
+            <div slot="prefix">
-            <el-option label="to" value="to"></el-option>
+              <img v-if="form.arrows=='from'" src="./leftArrow.png" />
-            <el-option label="from;to" value="from;to"></el-option>
+              <img v-if="form.arrows=='to'" src="./rightArrow.png" />
+              <img v-if="form.arrows=='from;to'" src="./LRArrow.png" />
+              <img v-if="form.arrows=='0'" src="./noArrow.png" />
+            </div>
+            <el-option label="from" value="from"><img src="./leftArrow.png" /></el-option>
+            <el-option label="to" value="to"><img src="./rightArrow.png" /></el-option>
+            <el-option label="from;to" value="from;to"><img src="./LRArrow.png" /></el-option>
+            <el-option label="" value="0"><img src="./noArrow.png" /></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="color">
+        <el-form-item label="color" class="color">
-          <el-color-picker
+          <div class="color-show" @click="colorPickerClick">
-            v-model="form.color"
+            <div class="color-show-left" :style="{background:form.color}"></div>
-            :predefine="predefineColors">
+            <span> {{form.color}}</span>
-          </el-color-picker>
+          </div>
-        </el-form-item>
+          <div class="color-content">
-        <el-form-item label="Label">
+            <el-color-picker
-          <el-input v-model="form.label"></el-input>
+              v-model="form.color"
+              :predefine="predefineColors"
+              ref="colorPicker"
+            >
+            </el-color-picker>
+          </div>
         </el-form-item>
       </el-form>
     </el-scrollbar>
@@ -63,7 +75,6 @@
         handler(n){
           this.form={
             arrows:n.arrows,
-            label:n.label,
             color:n.color,
             lineId:n.id,
           }
@@ -78,6 +89,7 @@
           arrows:'',
           label:'',
           color:'#1e90ff',
+          lineName:'',
           lineId:'',
         },
         predefineColors: [
@@ -91,15 +103,23 @@
         ],
         rules:{
           arrows: [
-            { required: true, message: '请输入活动名称', trigger: 'change' },
+            { required: true, message: '', trigger: 'change' },
+          ],
+          lineName: [
+            { required: true, message: '', trigger: 'change' },
           ],
         }
       }
     },
     methods:{
       onSubmit(){
-        let model=Object.assign({id:this.form.lineId},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
+
-        this.$emit('addLine',model)
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            let model=Object.assign({id:Math.random()*100},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
+            this.$emit('addLine',model);
+          }
+        });
       },
       /*关闭弹框*/
       esc(refresh) {
@@ -111,13 +131,76 @@
       del(){
         this.$emit('del');
         this.esc();
-      }
+      },
+      colorPickerClick(){
+        console.log(this.$refs['colorPicker']);
+        this.$refs['colorPicker'].showPicker=true;
+      },
+      iconChange (val) {
+        // el-select实际上是两层div包裹的input
+        this.addModel.icon = val;
+        // 获取当前el-select标签第一层div
+        const dom = this.$refs['select_icon'].$el;
+        // 创建需要添加到其中的标签 并填充内容
+        const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
+        svgDom.setAttribute('class', 'el-input__prefix');
+        svgDom.innerHTML = '<span class="el-input__prefix-inner"><i class="el-input__icon el-icon-search is-reverse"><img src="a.png" /></i></span>';
+        // 将创建的标签添加到父节点(第二层div)
+        dom.children[0].appendChild(svgDom);
+        // 得到el-select中的input标签
+        const inputDom = dom.children[0].children[0];
+        inputDom.setAttribute('style', 'padding-left: 30px;');
+        // 将添加的标签放到input前面
+        dom.children[0].insertBefore(svgDom, inputDom);
+      },
     },
 
   }
 </script>
 
 <style scoped>
+  .color-content{
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 140px;
+  }
+  .color{
+    position: relative;
+  }
+  .color-show{
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    width: calc(100% - 30px);
+  }
+  .color-show-left{
+    width: 18px;
+    height: 18px;
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    margin: 0 5px;
+  }
+  .line-name{
+    width: calc(100% - 30px);
+  }
+  .arrows{
+
+  }
+  .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
+    border: 1px solid #DCDFE6;
+    height: 41px;
+    width: calc(100% - 30px);
+  }
+  .arrows /deep/ .el-input__inner{
+    display: none;
+  }
+  /deep/ .el-select{
+    width: 262px;
+  }
   .nz-btn-edit-ok{
     position: absolute;
     bottom: 0;

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

@@ -18,7 +18,7 @@
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
-      <el-form ref="form" :model="form" label-width="160px" :rules="rules">
+      <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
         <el-form-item label="Module Name" prop="modelId">
           <el-select v-model="form.modelId" placeholder=""  popper-class="asset-dropdown">
             <el-option
@@ -37,10 +37,10 @@
               :key="item.id"
               :label="item.label"
               :value="item.id">
-              <span style="float: left">
+              <span style="float: left;width: 50%">
                 <img :src="item.image" />
               </span>
-              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
             </el-option>
           </el-select>
         </el-form-item>
@@ -175,12 +175,12 @@
           {id: 14, label: "model14",},
         ],
         iconArray:[
-          {id:1,image:a},
+          {id:1,image:a,imageName:"module1"},
-          {id:2,image:b},
+          {id:2,image:b,imageName:"module1"},
-          {id:3,image:c},
+          {id:3,image:c,imageName:"module1"},
-          {id:4,image:d},
+          {id:4,image:d,imageName:"module1"},
-          {id:5,image:e},
+          {id:5,image:e,imageName:"module1"},
-          {id:6,image:f},
+          {id:6,image:f,imageName:"module1"},
           // {id:7,img:'./a.png',label:'model',},
         ],
       }
@@ -412,10 +412,6 @@
   .z-top {
     z-index: 2900;
   }
-  .right-box-title{
-    font-weight: bold;
-    font-size: 24px;
-  }
 </style>
 
 <style lang="scss">

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

@@ -71,7 +71,7 @@
 
     </div>
     <transition name="right-box">
-      <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="allModuleInfos"></add-model>
+      <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="moduleDataS"></add-model>
     </transition>
     <transition name="right-box">
       <add-line  v-if="addLineShow" @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData" :isAdd="isLineAdd" @close="closeAddLine" @del="lineDel"></add-line>
@@ -132,13 +132,22 @@
         deep: true,
         handler(n){
           this.allModuleInfos={...n}
+          this.arrayDiff();
         },
-      }
+      },
+      // nodesArray:{
+      //   immediate: true,
+      //   deep: true,
+      //   handler(n){
+      //    this.setNetworkData(n,this.edgesArray);
+      //   },
+      // },
     },
     data(){
 		  return {
         allModuleInfos:[],
         relativeModelTop:{},
+        moduleDataS:[],
         index:'',
         zoom:1,
         domScale:1,
@@ -309,6 +318,7 @@
         nodesArray.push(model);
         this.$emit("setTopologyData",nodesArray,this.edgesArray);
         this.setNetworkData(nodesArray,this.edgesArray);
+        this.arrayDiff();
       },
       addModelShow(){ // 显示添加节点弹窗
         this.addNodeShow=true;
@@ -459,6 +469,14 @@
         this.index=index;
         this.selNodeId=item.id;
         this.setPopPosition(this.selNodeId);
+      },
+      // 数组取差集
+      arrayDiff(){
+        // this.moduleDataS=this.allModuleInfos-this.nodesArray
+        this.moduleDataS=this.allModuleInfos;
+        this.nodesArray.forEach((item)=>{
+          this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
+        })
       }
     },
     mounted(){

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

@@ -39,6 +39,7 @@
             :isFullScreen="false"
             ref="topology"
             :allModuleInfo="allModuleInfo"
+            v-loading="topologyLoading"
           >
 
           </topology>
@@ -50,15 +51,6 @@
 </template>
 
 <script>
-  import  a from './a.png'
-  import  b from './b.png'
-  import  c from './c.png'
-  import  d from './d.png'
-  import  e from './e.png'
-  import  f from './f.png'
-  import bus from '@/libs/bus';
-  import {Loading} from 'element-ui';
-  import chartDataFormat from '@/components/charts/chartDataFormat'
   import loading from "@/components/common/loading";
   import timePicker from '@/components/common/timePicker';
   import topology from './topology'
@@ -79,38 +71,25 @@
       },
       allModuleInfo:{}
     },
+    watch:{
+      allModuleInfo:{
+        immediate: true,
+        deep: true,
+        handler(n){
+          this.getNetworkData(n);
+        },
+      }
+    },
     data () {
       return {
         //其他
         isError:false,
-        // nodesArray:[
-        //   { id: 1, label: "model",
-        //     image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
-        //     shape:'image',shapeProperties:{useImageSize:false},
-        //     x:1,y:-63,
-        //     imgId:0,
-        //     scaling:{min:0.5,max:10,}
-        //   },
-        //   {id: 2, imgId:1, scaling:{min:0.5,max:10,}, label: "model", x:-236,y:-163, image: a, shape:'image',shapeProperties:{useImageSize:false}},
-        //   {id: 3, imgId:2, scaling:{min:0.5,max:10,}, label: "model", x:-346,y:-155, image: b, shape:'image',shapeProperties:{useImageSize:false}},
-        //   {id: 4, imgId:3, scaling:{min:0.5,max:10,}, label: "model", x:-129,y:169, image: c, shape:'image',shapeProperties:{useImageSize:false}},
-        //   {id: 5, imgId:4, scaling:{min:0.5,max:10,}, label: "model", x:-388,y:35, image: d, shape:'image',shapeProperties:{useImageSize:false}},
-        //   {id: 6, imgId:5, scaling:{min:0.5,max:10,}, label: "model", x:-345,y:-53, image: e, shape:'image',shapeProperties:{useImageSize:false}},
-        //   {id: 7, imgId:6, scaling:{min:0.5,max:10,}, label: "model", x:316,y:22, image: f, shape:'image',shapeProperties:{useImageSize:false}},
-        // ],
-        // edgesArray:[
-        //   {id: 0,from: 2, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
-        //   {id: 1,from: 3, to: 1, dashes:[15,15],label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-        //   {id: 2,from: 5, to: 4, dashes:[15,15],label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-        //   {id: 3,from: 4, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-        //   {id: 4,from: 4, to: 6, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-        //   {id: 5,from: 1, to: 7, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-        // ],
         nodesArray:[],
         edgesArray:[],
         dragTitleShow:false,
         dropdownMenuShow:false,
         editVisNetwork:false,
+        topologyLoading:false,
       }
 
     },
@@ -121,6 +100,17 @@
         this.nodesArray=nodesArr;
         this.edgesArray=edgesArr;
       },
+      getNetworkData(n){
+        this.topologyLoading=true;
+        setTimeout(()=>{
+          this.edgesArray=[];
+          this.nodesArray=[];
+          setTimeout(()=>{
+            this.topologyLoading=false;
+            this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
+          },1000)
+        },500)
+      }
     },
 
     mounted(){