feat：修改样式 50%

nezha-fronted/src/components/common/language/cn.js

@@ -951,6 +951,7 @@ const cn = {
       selTwoNode:'请选择两个模块',
       save:'保存',
       cancel:'取消',
+      preview:'预览',
       addLine:'添加连线',
       editLine:'编辑连线',
       lineName:'连线名称',

nezha-fronted/src/components/common/language/en.js

@@ -957,6 +957,7 @@ const en = {
       selTwoNode:'Please select two module',
       save:'save',
       cancel:'cancel',
+      preview:'preview',
       addLine:'Add line',
       editLine:'Edit line',
       lineName:'Line Name',

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -107,22 +107,62 @@
           </span>
           </el-row>
           <!--value mapping-->
-          <el-row class="value-mapping-title">
+          <!--<el-row class="value-mapping-title">-->
-            <el-col>level</el-col>
+            <!--<el-col>level</el-col>-->
-            <el-col>color</el-col>
+            <!--<el-col>color</el-col>-->
-            <el-col>value</el-col>
+            <!--<el-col>value</el-col>-->
-            <el-col>animation</el-col>
+            <!--<el-col>animation</el-col>-->
-            <el-col></el-col>
+            <!--<el-col></el-col>-->
-          </el-row>
+          <!--</el-row>-->
-          <el-row class="value-mapping-content">
+          <!--<el-row class="value-mapping-content">-->
-            <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
+            <!--<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">-->
-              <el-col>level</el-col>
+              <!--<el-col>level</el-col>-->
-              <el-col>color</el-col>
+              <!--<el-col>color</el-col>-->
-              <el-col>value</el-col>
+              <!--<el-col>value</el-col>-->
-              <el-col>animation</el-col>
+              <!--<el-col>animation</el-col>-->
-              <el-col></el-col>
+              <!--<el-col></el-col>-->
-            </el-row>
+            <!--</el-row>-->
-          </el-row>
+          <!--</el-row>-->
+          <el-table v-model="selection.pen.data.valueMapping">
+            <el-table-column
+              prop="level"
+              :label="'level'"
+              >
+              <template slot-scope="scope">
+                {{scope.$index}}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="color"
+              :label="'color'"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="value"
+              :label="'value'"
+            >
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.value" @change="valueMappingValueChange(scope.$index, scope.row)"/>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="animation"
+              :label="'animation'"
+            >
+            </el-table-column>
+            <el-table-column>
+              <template slot="header" slot-scope="scope">
+
+              </template>
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="danger"
+                  @click="valueMappingDel(scope.$index, scope.row)">Delete</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div @click="valueMappingAdd()">add</div>
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="属性" name="4">
@@ -506,115 +546,112 @@
     </el-tabs>
 
 
-    <div v-if="selection.pens" class="">
+    <!--选择多个节点-->
-      <el-collapse v-model="activeNames">
+    <!--<div v-if="selection.pens" class="">-->
-        <!--对齐方式-->
+      <!--<el-collapse v-model="activeNames">-->
-        <el-collapse-item title="对齐" name="1" v-if="selection.pens">
+        <!--&lt;!&ndash;对齐方式&ndash;&gt;-->
-          <label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">
+        <!--<el-collapse-item title="对齐" name="1" v-if="selection.pens">-->
-            <i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
+          <!--<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">-->
-               @click="onNodesAlign(item.value)"></i>
+            <!--<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"-->
-          </label>
+               <!--@click="onNodesAlign(item.value)"></i>-->
-        </el-collapse-item>
+          <!--</label>-->
-        <!--排版-->
+        <!--</el-collapse-item>-->
-        <el-collapse-item title="排版" name="2" v-if="selection.pens">
+        <!--&lt;!&ndash;排版&ndash;&gt;-->
-          <div class="mt10">
+        <!--<el-collapse-item title="排版" name="2" v-if="selection.pens">-->
-            <div class="flex middle mb10">
+          <!--<div class="mt10">-->
-              <label>最大宽度：</label>
+            <!--<div class="flex middle mb10">-->
-              <div class="full pr10">
+              <!--<label>最大宽度：</label>-->
-                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+              <!--<div class="full pr10">-->
-                                 v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>
+                <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
-              </div>
+                                 <!--v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>-->
-            </div>
+              <!--</div>-->
-            <div class="flex middle mb10">
+            <!--</div>-->
-              <label>节点宽度：</label>
+            <!--<div class="flex middle mb10">-->
-              <div class="full pr10">
+              <!--<label>节点宽度：</label>-->
-                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+              <!--<div class="full pr10">-->
-                                 v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>
+                <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
-              </div>
+                                 <!--v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>-->
-            </div>
+              <!--</div>-->
-            <div class="flex middle mb10">
+            <!--</div>-->
-              <label>节点高度：</label>
+            <!--<div class="flex middle mb10">-->
-              <div class="full pr10">
+              <!--<label>节点高度：</label>-->
-                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+              <!--<div class="full pr10">-->
-                                 v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>
+                <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
-              </div>
+                                 <!--v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>-->
-            </div>
+              <!--</div>-->
-            <div class="flex middle mb10">
+            <!--</div>-->
-              <label>水平个数：</label>
+            <!--<div class="flex middle mb10">-->
-              <div class="full pr10">
+              <!--<label>水平个数：</label>-->
-                <el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"
+              <!--<div class="full pr10">-->
-                                 v-model.number="layout.maxCount"
+                <!--<el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"-->
-                                 title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>
+                                 <!--v-model.number="layout.maxCount"-->
-              </div>
+                                 <!--title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>-->
-            </div>
+              <!--</div>-->
-            <div class="flex middle mb10">
+            <!--</div>-->
-              <label>水平间距：</label>
+            <!--<div class="flex middle mb10">-->
-              <div class="full pr10">
+              <!--<label>水平间距：</label>-->
-                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+              <!--<div class="full pr10">-->
-                                 v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>
+                <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
-              </div>
+                                 <!--v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>-->
-            </div>
+              <!--</div>-->
-            <div class="flex middle mb10">
+            <!--</div>-->
-              <label>垂直间距：</label>
+            <!--<div class="flex middle mb10">-->
-              <div class="full pr10">
+              <!--<label>垂直间距：</label>-->
-                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+              <!--<div class="full pr10">-->
-                                 v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>
+                <!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
-              </div>
+                                 <!--v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>-->
-            </div>
+              <!--</div>-->
-            <div class="flex middle">
+            <!--</div>-->
-              <label></label>
+            <!--<div class="flex middle">-->
-              <div class="full pr10">
+              <!--<label></label>-->
-                <button class="button primary" @click="onLayout">开始排版</button>
+              <!--<div class="full pr10">-->
-              </div>
+                <!--<button class="button primary" @click="onLayout">开始排版</button>-->
-            </div>
+              <!--</div>-->
-          </div>
+            <!--</div>-->
-        </el-collapse-item>
+          <!--</div>-->
-      </el-collapse>
+        <!--</el-collapse-item>-->
-    </div>
+      <!--</el-collapse>-->
+    <!--</div>-->
     <!-- 选中为空 -->
     <div v-if="!selection.pen && !selection.pens">
-      <div class="mt10">
+      <div class="project-title">
-        <div class="flex middle mb10">
+        Project
-          <label>文件名称：</label>
+      </div>
+      <div class="project-content">
+        <div class="project-content-title">Title</div>
+
+        <div class="project-content-box" style="width: 100%">
+
+          <div class="project-content-item">
+            <label>Name：</label>
             <div class="full pr10">
-            <el-input class="input" size="small" v-model="topologyData.data.name" placeholder="topo名称"></el-input>
+              <el-input class="input" size="small" v-model="topologyData.data.name" placeholder="请输入名称"  @change="changeTopologyOpt"></el-input>
+            </div>
           </div>
         </div>
 
-        <div class="flex middle special-select mb10">
+        <div class="project-content-title">Appearance</div>
-          <label>默认线型：</label>
+
-          <div class="full pr10">
+        <div class="project-content-box" style="width: 100%">
-            <el-select v-model="topologyData.data.lineName" placeholder="请选择" size="small"
+          <div class="project-content-item half">
-                       :popper-append-to-body="false"
+            <label>Backgroud：</label>
-                       @change="changeTopologyOpt(topologyData.data.lineName,'lineName')">
+            <div class="full pr10 h32">
-              <div slot="prefix">
+              <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'bkColor')"
-                <div class="icon-item">
+                               v-model="topologyData.data.bkColor" size="mini"></el-color-picker>
-                  <svg>
-                    <g fill="none" stroke="black" stroke-width="1">
-                      <path
-                        :d="penLineType.find((item,i)=>item.name==topologyData.data.lineName).d"
-                      >
-                      </path>
-                    </g>
-                  </svg>
-                </div>
-              </div>
-              <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
-                <div class="icon-item">
-                  <svg>
-                    <g fill="none" :stroke="(topologyData.data.lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
-                      <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
-                    </g>
-                  </svg>
-                </div>
-              </el-option>
-            </el-select>
             </div>
           </div>
 
-        <div class="flex middle mb10">
+          <div class="project-content-item half">
+            <label>Image：</label>
+            <div class="full pr10 h32">
+              <!--暂时是input 输入网址-->
+              <el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
             <label>默认线宽：</label>
-          <div class="full pr10">
+            <div class="full pr10 h32">
               <el-input-number :precision="2"
                                controls-position="right"
                                size="small"
@@ -626,9 +663,63 @@
             </div>
           </div>
 
-        <div class="flex middle special-select mb10">
+          <div class="project-content-item half">
+            <label>背景网格：</label>
+            <div class="full pr10 h32">
+              <el-switch
+                v-model="topologyData.data.grid"
+                :active-value="true"
+                :inactive-value="false"
+                active-color="#ee9d3f"
+                @change="changeTopologyOpt(topologyData.data.grid,'grid')">
+              </el-switch>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
+            <label>网格大小：</label>
+            <div class="full pr10 h32">
+              <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
+                               v-model.number="topologyData.data.gridSize"
+                               :readonly="readonly" required
+                               @change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
+            <label>网格颜色：</label>
+            <div class="full pr10 h32">
+              <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'gridColor')"
+                               v-model="topologyData.data.gridColor" size="mini"
+                               popper-class="can-clear"></el-color-picker>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
+            <label>标尺：</label>
+            <div class="full pr10 h32">
+              <el-switch
+                v-model="topologyData.data.rule"
+                :active-value="true"
+                :inactive-value="false"
+                active-color="#ee9d3f"
+                @change="changeTopologyOpt(topologyData.data.rule,'rule')">
+              </el-switch>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
+            <label>标尺颜色：</label>
+            <div class="full pr10 h32">
+              <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'ruleColor')"
+                               v-model="topologyData.data.ruleColor" size="mini"
+                               popper-class="can-clear"></el-color-picker>
+            </div>
+          </div>
+
+          <div class="project-content-item half special-select">
             <label>默认开始箭头：</label>
-          <div class="full pr10">
+            <div class="full pr10 h32">
               <el-select v-model="topologyData.data.fromArrow" placeholder="请选择" size="small"
                          :popper-append-to-body="false"
                          @change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
@@ -676,9 +767,9 @@
             </div>
           </div>
 
-        <div class="flex middle special-select mb10">
+          <div class="project-content-item half special-select">
             <label>默认结束箭头：</label>
-          <div class="full pr10">
+            <div class="full pr10 h32">
               <el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small" :popper-append-to-body="false"
                          @change="changeTopologyOpt('toArrow')">
                 <div slot="prefix">
@@ -724,74 +815,51 @@
             </div>
           </div>
 
-        <div class="flex middle mb10">
-          <label>背景颜色：</label>
-          <div class="full pr10">
-            <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'bkColor')"
-                             v-model="topologyData.data.bkColor" size="mini" popper-class="can-clear"></el-color-picker>
-          </div>
         </div>
 
-        <div class="flex middle mb10">
+        <div class="project-content-title">Appearance</div>
-          <label>背景图片：</label>
-          <div class="full pr10">
-            <!--暂时是input 输入网址-->
-            <el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
-          </div>
-        </div>
 
-        <div class="flex middle mb10">
+        <div class="project-content-box" style="width: 100%">
-          <label>背景网格：</label>
+
-          <div class="full pr10">
+          <div class="project-content-item half">
+            <label>Project Info：</label>
+            <div class="full pr10 h32">
               <el-switch
-              v-model="topologyData.data.grid"
+                v-model="topologyData.data.projectInfo"
                 :active-value="true"
                 :inactive-value="false"
                 active-color="#ee9d3f"
-              @change="changeTopologyOpt(topologyData.data.grid,'grid')">
+                @change="changeTopologyOpt(topologyData.data.projectInfo,'projectInfo')">
               </el-switch>
             </div>
           </div>
 
-        <div class="flex middle mb10">
+          <div class="project-content-item half">
-          <label>网格颜色：</label>
+            <label>Alert Info：</label>
-          <div class="full pr10">
+            <div class="full pr10 h32">
-            <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'gridColor')"
-                             v-model="topologyData.data.gridColor" size="mini"
-                             popper-class="can-clear"></el-color-picker>
-          </div>
-        </div>
-
-        <div class="flex middle mb10">
-          <label>网格大小：</label>
-          <div class="full pr10">
-            <el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
-                             v-model.number="topologyData.data.gridSize"
-                             :readonly="readonly" required
-                             @change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
-          </div>
-        </div>
-
-        <div class="flex middle mb10">
-          <label>标尺：</label>
-          <div class="full pr10">
               <el-switch
-              v-model="topologyData.data.rule"
+                v-model="topologyData.data.alertInfo"
                 :active-value="true"
                 :inactive-value="false"
                 active-color="#ee9d3f"
-              @change="changeTopologyOpt(topologyData.data.rule,'rule')">
+                @change="changeTopologyOpt(topologyData.data.alertInfo,'alertInfo')">
               </el-switch>
             </div>
           </div>
 
-        <div class="flex middle mb10">
-          <label>标尺颜色：</label>
-          <div class="full pr10">
-            <el-color-picker @active-change="(val)=>changeTopologyOpt(val,'ruleColor')"
-                             v-model="topologyData.data.ruleColor" size="mini"
-                             popper-class="can-clear"></el-color-picker>
         </div>
+
+        <div class="project-content-title">Link</div>
+
+        <div class="project-content-box" style="width: 100%">
+
+          <div class="project-content-item">
+            <label>Url：</label>
+            <div class="full pr10">
+              <el-input class="input" size="small" v-model="topologyData.data.url" placeholder="请输入名称"  @change="changeTopologyOpt"></el-input>
+            </div>
+          </div>
+
         </div>
 
       </div>
@@ -878,7 +946,7 @@
         topologyData:{
           data:{
             name:'',
-            bkColor:undefined,
+            bkColor:'#FFFFFF',
             bkImage:'',
             grid:false,
             gridSize:'',
@@ -889,6 +957,9 @@
             lineWidth:1,
             fromArrow:'',
             toArrow:'triangleSolid',
+            projectInfo:true,
+            alertInfo:true,
+            url:'',
           }
         },
         pen:{
@@ -997,28 +1068,35 @@
         deep:true,
         immediate:true,
       },
-      'topologyData.data':{
+      // 'topologyData.data':{
-        handler(n){
+      //   handler(n){
-          setTimeout(()=>{
+      //     setTimeout(()=>{
-            let data=getTopology(this.index).data;
+      //       let dataOption=getTopology(this.index).data;
-            Object.keys(this.topologyData.data).forEach((key)=>{
+      //       Object.keys(this.topologyData.data).forEach((key)=>{
-              data[key]=this.topologyData.data[key];
+      //         dataOption[key]=this.topologyData.data[key];
-            });
+      //       });
-            getTopology(this.index).render();
+      //       getTopology(this.index).render();
-          })
+      //     })
+      //   },
+      //   deep:true,
+      //   immediate:false,
+      // }
     },
-        deep:true,
+    created(){
-        immediate:true,
+      let dataOption=getTopology(this.index).data;
-      }
+      console.log(dataOption);
+      Object.keys(this.topologyData.data).forEach((key)=>{
+        console.log()
+        this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
+      });
     },
     mounted(){
       this.queryMetrics();
-      let dataOption=getTopology(this.index).data;
+      // this.topologyData.data.grid= !!dataOption.grid;
-      Object.keys(this.topologyData.data).forEach((key)=>{
+      // this.topologyData.data.rule= !!dataOption.rule;
-        this.topologyData.data[key]=dataOption[key]?dataOption[key]:this.topologyData.data[key]
+      // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
-      });
+      // this.topologyData.data.alertInfo= !!dataOption.alertInfo;
-      this.topologyData.data.grid= !!getTopology(this.index).data.grid;
+      console.log(this.topologyData);
-      this.topologyData.data.rule= !!getTopology(this.index).data.rule;
     },
     updated(){
       if(!this.selection.pen){//没选中node line返回
@@ -1158,11 +1236,19 @@
         this.onChange();
       },
       changeTopologyOpt(val,key){
-        this.topologyData.data[key]=this.colorRGBtoHex(val);
+        // this.topologyData.data[key]=this.colorRGBtoHex(val);
         // getTopology(this.index).data[key]=val;
         // getTopology(this.index).render();
+        this.topologyData.data[key]=val;
+        Object.keys(this.topologyData.data).forEach((key1)=>{
+          getTopology(this.index).data[key1]=this.topologyData.data[key1];
+        });
+        // console.log(dataOption[key]);
+        getTopology(this.index).render();
+        console.log(123213123);
       },
       colorRGBtoHex(color){//获取颜色16进制数
+        return color;
         if(!color){
           return ""
         }
@@ -1217,6 +1303,23 @@
           });
         }
       },
+      valueMappingAdd(){
+        this.selection.pen.data.valueMapping.push({
+          color:{
+            border:'#000',
+            bac:'#fff',
+            text:'#000',
+          },
+          animation:'upDown',
+          value:'',
+        });
+      },
+      valueMappingValueChange(index,row){
+        console.log(index,row)
+      },
+      valueMappingDel(index,row){
+        console.log(index,row)
+      },
     }
   }
 </script>
@@ -1243,6 +1346,51 @@
   }
 </style>
 <style lang="scss" scoped>
+  .project-title{
+    background: #eeeeee;
+    height: 36px;
+    line-height: 36px;
+    border-radius:10px 0 0 0;
+    padding-left: 10px;
+  }
+  .project-content{
+    margin: 10px;
+    .project-content-title{
+      background: #F6F6F6;
+      padding-left: 10px;
+      font-size: 14px;
+      color: #333333;
+      letter-spacing: 0;
+      font-weight: 400;
+      height: 32px;
+      line-height: 31px;
+      margin-bottom: 5px;
+    }
+    .project-content-box{
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 15px;
+    }
+    .half.project-content-item{
+      width: calc(50% - 15px);
+      height: 64px;
+    }
+    .project-content-item{
+      padding-left: 10px;
+      display: inline-block;
+      width: 100%;
+      label{
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #666666;
+        letter-spacing: 0;
+        font-weight: 400;
+      }
+      .h32{
+        height: 32px;
+      }
+    }
+  }
   /deep/ .el-tabs.el-tabs--card {
     height: 100%;
 
@@ -1281,7 +1429,6 @@
   .pl0 {
     padding-left: 0;
   }
-
   .special-select .el-select.el-select--small {
     width: 100%;
   }
@@ -1310,9 +1457,9 @@
   .props-box {
     position: relative;
     width: calc(100% - 20px);
-    height: calc(100% - 35px);
+    height: calc(100% - 20px);
-    padding-left: 10px;
+    overflow-y: scroll;
-
+    padding-bottom: 20px;
     .iconfont {
       cursor: pointer;
     }

nezha-fronted/src/components/common/project/L5/topologyTopTool.vue

@@ -1,15 +1,28 @@
 <template>
-  <div class="tool-top">
+  <div class="tool-top" id="tool-top">
-    <div class="top-tool-item"  @click="undo"> 撤销 </div>
+    <div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']"  @click="undo"> <i class="nz-icon nz-icon-jiantou-left" /> </div>
-    <div class="top-tool-item" @click="redo"> 重做 </div>
+    <div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-jiantou-right" /> </div>
-    <div class="top-tool-item" @click="centerView"> 居中</div>
+    <!--<div class="top-tool-item" @click="centerView"> 居中</div>-->
-    <div class="top-tool-item" @click="fitView"> 自适应</div>
+    <!--<div class="top-tool-item" @click="fitView"> 自适应</div>-->
-    <div class="top-tool-item"> 缩放大小 <el-input-number size="mini" v-model="option.scale" @change="scale" :min="0.25" :max="5" :step="0.2" :precision="2"></el-input-number> </div>
+    <!--<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>-->
-    <div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>
+    <!--<div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>-->
-    <div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>
     <!--<div> 保存为图片 </div>-->
-    <div class="top-tool-item" @click="del"> 删除 </div>
+    <div class="top-tool-item" @click="del">  <i class="nz-icon nz-icon-delete"/> </div>
-    <div class="top-tool-item" @click="clear"> 清空画布 </div>
+    <div class="top-tool-item top-tool-item-scale">
+      <el-input-number
+        size="mini"
+        v-model="scaleNum"
+        :max="500"
+        :min="25"
+        :step="20"
+        :precision="0"
+        id="scaleNum"
+        @change="scale">
+      </el-input-number>
+      <span class="percent">%</span>
+    </div>
+    <!--<div class="top-tool-item" @click="clear"> 清空画布 </div>-->
+
   </div>
 </template>
 
@@ -25,8 +38,9 @@
           lineWidth:1,
           fromArrow:'',
           toArrow:'triangleSolid',
-          scale:1,
+          scale:100,
         },
+        scaleNum:100,
         penLineType:[
           {d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'},
           {d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
@@ -40,6 +54,7 @@
           {d:'M5 14 l85 0',fill:'#000000', stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
           {d:'M5 14 l85 0',fill:'#ffffff', stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
         ],
+        redoFlag:false,
       }
     },
     props:{
@@ -54,12 +69,20 @@
       toolShow:{
         type:Object,
         require:true
+      },
+      cachesIndex:{
+        type:Number,
+        require:true,
       }
     },
     mounted(){
       let dataOption=getTopology(this.index).data;
       Object.keys(this.option).forEach(key=>{
+        if(key==='scale'){
+          this.scaleNum=(JSON.stringify(dataOption[key])?dataOption[key]*100:this.scaleNum)
+        }else{
           this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]);
+        }
       })
     },
     methods:{
@@ -69,6 +92,9 @@
       },
       undo(){//撤销
         getTopology(this.index).undo();
+        setTimeout(()=>{
+          this.redoFlag=true;
+        },200)
       },
       redo(){//重做
         getTopology(this.index).redo();
@@ -79,8 +105,8 @@
       fitView(){//自适应画布大小
         getTopology(this.index).fitView();
       },
-      scale(){
+      scale(val){
-        getTopology(this.index).scaleTo(this.option.scale);
+        getTopology(this.index).scaleTo(val/100);
       },
       del(){
         let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
@@ -99,20 +125,60 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .tool-top {
-    border: 1px solid #1a1a1a;
     border-radius: 2px;
     display: inline-flex;
+    .nz-icon{
+      font-size: 14px;
+      color: #666666;
     }
-  .tool-top > div{
-    padding: 3px 5px;
-  }
-  .tool-top > div:not(:last-child){
-    border-right: 1px solid #1a1a1a ;
   }
   .top-tool-item{
     cursor: pointer;
+    background: #FFFFFF;
+    border: 1px solid #DEDEDE;
+    border-radius: 2px;
+    padding: 8px 11px;
+    line-height: 14px;
+    margin-right: 10px;
+  }
+  .top-tool-item-scale{
+    margin-left: 40px;
+    padding: 0;
+    position: relative;
+    .percent{
+      position: absolute;
+      top: 7px;
+      left: 68px;
+      font-size:12px ;
+    }
+    /deep/ .el-input--mini{
+      input{
+        border: none;
+      }
+    }
+    /deep/ .el-input-number--mini {
+      width: 111px;
+    }
+    /deep/ .el-input-number__decrease,/deep/ .el-input-number__increase{
+        border: none;
+        border-radius: 100%;
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        margin-top: 6px;
+      }
+    /deep/ .el-input-number__decrease{
+        margin-left: 5px;
+      }
+    /deep/ .el-input-number__increase{
+        margin-right: 5px;
+      }
+  }
+  .top-tool-item-disabled{
+    color: #CECECE;
+    opacity: 0.3;
   }
   .tool-item-active{
     background: #1a1a1a;

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

@@ -8,51 +8,12 @@
       <div v-show="editTopologyFlag" class="edit-topologyLine">
         <!--工具栏-->
         <span class="project-topology-tool">
-          <topology-top-tool v-if="editTopologyFlag" :selection.sync="props" @del="delPen" :index="topologyIndex"
+          <el-dropdown trigger="click" size="small" placement="bottom-start">
-                             ref="topTool" @toolShowChange="toolShowChange" :toolShow="toolShow">
+            <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i class="nz-icon nz-icon-arrow-down"></i></span>
-
+            <el-dropdown-menu slot="dropdown" @click="dropdownClick">
-          </topology-top-tool>
+              <div style="height: 450px">
-        </span>
+                <el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto" class="project-topology-add-node">
-        <span>
+                <!--<div class="drag-header">——</div>-->
-           <button @click="saveTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new"
-                   v-has="'project_topo_save'" :disabled="prevent_opt.save"
-                   :class="{'nz-btn-disabled':prevent_opt.save}">
-             {{$t('project.topology.save')}}
-           </button>
-           <button @click="cancelTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new">
-             {{$t('project.topology.cancel')}}
-           </button>
-         </span>
-      </div>
-      <span class="edit-topologyLine" v-show="!editTopologyFlag">
-        <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
-        >
-                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
-        </button>
-                <pick-time v-show="!editTopologyFlag" :showTimePicker="false" class="float-right pickTime"
-                           :refresh-data-func="refreshTopology" v-model="searchTime" :use-chart-unit="false"
-                           ref="pickTime"></pick-time>
-      </span>
-    </div>
-    <div class="page">
-      <!--拖拽节点-->
-      <VueDraggableResizable
-        v-show="editTopologyFlag&&toolShow.node"
-        class="tools"
-        :parent="true"
-        :resizable="true"
-        :draggable="dragFlag"
-        :x="toolShow.nodeCord[0]"
-        :y="toolShow.nodeCord[1]"
-        :min-width="250"
-        :min-height="200"
-        :w="250"
-        :h="toolShow.height-100"
-        drag-handle=".drag-header"
-      >
-        <el-card shadow="hover" style="height:100%;width: 100%;overflow-y: auto">
-          <div class="drag-header">——</div>
                 <el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index">
                   <el-collapse-item :title="item.group" :name="item.group">
                     <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
@@ -70,7 +31,9 @@
                       </a>
                       <span v-if="item.group==='自定义图片'" class="delIcon" @click="delImg(btn)">x</span>
                     </div>
-              <div v-if="item.group==='自定义图片'" class="buttons">
+                  </el-collapse-item>
+                </el-collapse>
+              </el-card>
                 <el-upload
                 class="avatar-uploader"
                 action=" "
@@ -79,52 +42,110 @@
                 :before-upload="beforeAvatarUpload"
                 :auto-upload="true"
                 list-type="picture-card"
-                  style="width: 50px;height: 50px"
+                style="width: 284px;height: 30px"
               >
-                  <div class="upload-icon-box">
                   <i class="el-icon-plus"></i>
-                    <span style="font-size: 12px">{{$t('project.topology.upload')}}</span>
+                  <span>
-                  </div>
+                     Upload custom picture
-
+                  </span>
                 </el-upload>
               </div>
-            </el-collapse-item>
+            </el-dropdown-menu>
-          </el-collapse>
+          </el-dropdown>
-        </el-card>
+
-      </VueDraggableResizable>
+          <div class="flex middle special-select mb10" style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px">
-      <!--画布部分-->
+            <div class="full pr10">
-      <div id="topology-canvas" class="full"></div>
+              <el-select v-model="lineName" placeholder="请选择" size="small"
-      <!--设置属性-->
+              :popper-append-to-body="false"
-      <VueDraggableResizable
+              @change="changeTopologyOpt(lineName,'lineName')">
-        v-if="editTopologyFlag"
+               <div slot="prefix">
-        v-show="toolShow.attr"
+                <div class="icon-item">
-        class="props"
+                  <svg>
-        :parent="true"
+                    <g fill="none" stroke="black" stroke-width="1">
-        :resizable="true"
+                      <path
-        :draggable="dragFlag"
+                        :d="penLineType.find((item,i)=>item.name==lineName).d"
-        :x="toolShow.attrCord[0]"
-        :y="toolShow.attrCord[1]"
-        :min-width="340"
-        :max-width="340"
-        :min-height="200"
-        :w="340"
-        :h="toolShow.height-100"
-        drag-handle=".drag-header"
-        :handles="['tm','bm']"
                       >
-        <el-card shadow="hover" style="height: 100%;width: 325px;overflow-y: auto;padding: 0 0 0 0">
+                      </path>
-          <div class="drag-header">——</div>
+                    </g>
-          <CanvasProps :selection.sync="props" @change="onUpdateProps" @animate="animateCanvas"
+                  </svg>
-                       :index="topologyIndex" @del="delPen" :modules="modules" ref="CanvasProps"></CanvasProps>
+                </div>
-        </el-card>
+              </div>
-      </VueDraggableResizable>
+                <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
+                  <div class="icon-item">
+                    <svg>
+                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
+                    <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
+                    </g>
+                    </svg>
+                  </div>
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+
+
+          <topology-top-tool
+            v-if="editTopologyFlag"
+            :selection.sync="props"
+            @del="delPen"
+            :index="topologyIndex"
+            ref="topTool"
+            @toolShowChange="toolShowChange"
+            :cachesIndex="cachesIndex"
+            :toolShow="toolShow">
+          </topology-top-tool>
+
+        </span>
+        <span class="float-right">
+          <button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+                  v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                  :class="{'nz-btn-disabled':prevent_opt.save}">
+             {{$t('project.topology.preview')}}
+           </button>
+           <button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+                   v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                   :class="{'nz-btn-disabled':prevent_opt.save}">
+             {{$t('project.topology.save')}}
+           </button>
+           <button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+             {{$t('project.topology.cancel')}}
+           </button>
+         </span>
+      </div>
+      <span class="edit-topologyLine float-right" style="padding-top: 5px" v-show="!editTopologyFlag">
+        <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
+        >
+                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
+        </button>
+                <pick-time v-show="!editTopologyFlag" :showTimePicker="false" class="float-right pickTime"
+                           :refresh-data-func="refreshTopology" v-model="searchTime" :use-chart-unit="false"
+                           ref="pickTime"></pick-time>
+      </span>
+    </div>
+    <div class="page">
+      <!--画布部分-->
+      <div id="topology-canvas" class="full" ref="topology-canvas"></div>
+      <!--设置属性-->
+      <div class="props" v-if="editTopologyFlag&&toolShow.attr">
+        <CanvasProps :selection.sync="props"
+                     @change="onUpdateProps"
+                     @animate="animateCanvas"
+                     :index="topologyIndex"
+                     @del="delPen"
+                     :modules="modules"
+                     ref="CanvasProps">
+        </CanvasProps>
+      </div>
       <!--所有节点上的小图标-->
       <div v-for="(item,index) in nodesArr"
-           :style="{position: 'absolute',top:item.rect.y - 48+'px',left:item.rect.center.x - 24 +'px'}" v-if="!editTopologyFlag"
+           :style="{position: 'absolute',top:item.rect.y - 48+'px',left:item.rect.center.x - 24 +'px'}"
+           v-if="!editTopologyFlag"
            class="network-pop"
       >
 
-        <i :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.error&&!item.data.show,'model-error-active':item.data.error&&item.data.show}"
+        <i
+          :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.error&&!item.data.show,'model-error-active':item.data.error&&item.data.show}"
           :ref="'modelTopId'+index"
           @click="showNodeTools(index)"
         >
@@ -150,18 +171,18 @@
            v-if="tooltipPosition.show&&!editTopologyFlag"
            @mouseover="tooltipOver"
            @mouseout="tooltipOut">
-        <topoTooltip :chartDataParent="chartData" />
+        <topoTooltip :chartDataParent="chartData"/>
       </div>
     </div>
-    <div class="left-bottom" v-if="editTopologyFlag">
+    <!--<div class="left-bottom" v-if="editTopologyFlag">-->
-      <div class="title">小提示</div>
+      <!--<div class="title">小提示</div>-->
-      <ul class="group">
+      <!--<ul class="group">-->
-        <li>编辑时：</li>
+        <!--<li>编辑时：</li>-->
-        <li>1.Ctrl + 鼠标移动：移动整个画布</li>
+        <!--<li>1.Ctrl + 鼠标移动：移动整个画布</li>-->
-        <li>2.Ctrl + 鼠标滚轮：缩放</li>
+        <!--<li>2.Ctrl + 鼠标滚轮：缩放</li>-->
-        <li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>
+        <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
-      </ul>
+      <!--</ul>-->
-    </div>
+    <!--</div>-->
     <!--悬浮network部分-->
     <div class="network-info">
       <div v-if="popDataShow.main">
@@ -198,10 +219,23 @@
 <script>
   import {Topology,Node,Line,registerNode} from '@topology/core';
   import * as FileSaver from 'file-saver';
-  import {Tools,canvasRegister,imageTemp,myShape,myAnchors,myIconRect,myTextRect,onChangeAnimate,onChangeAnimateLine,changeImage,myCubec,myCubeAnchors} from './L5/services/canvas.js';
+  import {
+    Tools,
+    canvasRegister,
+    imageTemp,
+    myShape,
+    myAnchors,
+    myIconRect,
+    myTextRect,
+    onChangeAnimate,
+    onChangeAnimateLine,
+    changeImage,
+    myCubec,
+    myCubeAnchors
+  } from './L5/services/canvas.js';
   // 注册到画布
-  registerNode('rectangleImg',myShape,myAnchors,myIconRect, myTextRect);
+  registerNode('rectangleImg',myShape,myAnchors,myIconRect,myTextRect);
-  registerNode('myCube',myCubec,myCubeAnchors,null, null);
+  registerNode('myCube',myCubec,myCubeAnchors,null,null);
   import {getTopology,setTopology} from "../js/common";
   import CanvasProps from './L5/CanvasProps';
   import CanvasContextMenu from './L5//CanvasContextMenu';
@@ -218,6 +252,7 @@
   import topoTooltip from "./L5/topoTooltip";
   import bus from "../../../libs/bus";
   import axios from 'axios';
+
   const canvasOptions={
     rotateCursor:'/img/rotate.cur',
     translateKey:'None',
@@ -237,7 +272,7 @@
           top:null,
           bottom:null
         },
-        filterTime: [
+        filterTime:[
           bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
           bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
         ],
@@ -272,12 +307,18 @@
         timer3:null,//处理tooltip的显示定时器
         nodesArr:[],
         popData:[
-          {top:'-40px', left:'-21px',className:'nz-icon-endpoint',id:'endpoint',title:this.$t('project.topology.endpoint')},
+          {
-          {top:'-40px', left:'19px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
+            top:'-40px',
-          {top:'-4px',  left:'40px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
+            left:'-21px',
-          {top:'30px', left:'19px',className:'',id:'other',title:''},
+            className:'nz-icon-endpoint',
-          {top:'30px', left:'-21px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
+            id:'endpoint',
-          {top:'-4px', left:'-40px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')},
+            title:this.$t('project.topology.endpoint')
+          },
+          {top:'-40px',left:'19px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
+          {top:'-4px',left:'40px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
+          {top:'30px',left:'19px',className:'',id:'other',title:''},
+          {top:'30px',left:'-21px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
+          {top:'-4px',left:'-40px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')},
         ],
         popDataShow:{
           endpoint:false,
@@ -296,6 +337,14 @@
         },
         chartData:{},
         chartGetData:[],
+        penLineType:[
+          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:'curve'},
+          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:'polyline'},
+          {d:'M5 14 l40 0',"stroke-dasharray":"",name:'line'},
+          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+        ],
+        lineName:'curve',
+        cachesIndex:0,
       };
     },
     components:{
@@ -377,18 +426,19 @@
           this.openTopologyData(data).then(()=>{
             //获取对应的值 给节点 连线添加对应动画
             console.log(data);
+            this.lineName=data.lineName?data.lineName:this.lineName;
             this.chartGetData=[];
             let axiosArr=[];
             let endTime=this.filterTime[1];
             let startTime=this.filterTime[0];
-            let step = bus.getStep(startTime, endTime);
+            let step=bus.getStep(startTime,endTime);
-            data.pens.forEach(item=>{
+            data.pens&&data.pens.forEach(item=>{
               console.log(item.id);
               this.chartGetData.push({id:item.id,res:[]});
-              let arr=item.data.expressArr.map((ele) => {
+              let arr=item.data.expressArr.map((ele)=>{
-                let query = encodeURIComponent(ele);
+                let query=encodeURIComponent(ele);
                 query+='&nullType='+'connected';
-                return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
               });
               axiosArr.push({item,arr});
             });
@@ -396,11 +446,11 @@
             axios.all(axiosArr).then(all=>{
               all.forEach((obj,index)=>{
                 this.chartGetData[index].res=obj.arr;
-                if(obj.item.type===0){
+                if(obj.item.type===0){// 判断valueMapping 给相应的状态
-                  obj.item.animateType='warning';
+                  // obj.item.animateType='warning';
-                  onChangeAnimate(obj.item,'warning')
+                  // onChangeAnimate(obj.item,'warning')
-                } else if(obj.item.type===1){
+                }else if(obj.item.type===1){// 判断valueMapping 给相应的状态
-                  onChangeAnimateLine(obj.item,'beads')
+                  // onChangeAnimateLine(obj.item,'beads')
                 }
               })
             }).then(()=>{
@@ -439,7 +489,7 @@
       getTopologyData(){
         return new Promise(resolve=>{
           let data=localStorage.getItem('data');
-          data=data?JSON.parse(data):{};
+          data=data?JSON.parse(data):{bkColor:'#FFFFFF'};
           this.saveData={...data};
           resolve(data);
         });
@@ -541,7 +591,7 @@
           this.moduleId='';
           this.showNodeTools('');
         }
-        if(key==='asset' || key==='alert' || key==='endpoint'){
+        if(key==='asset'||key==='alert'||key==='endpoint'){
           this.showNodeTools('');
         }
       },
@@ -555,17 +605,31 @@
         event.dataTransfer.setData('Text',JSON.stringify(node.data));
       },
       dragFlagChange(node){
-        getTopology(this.topologyIndex).addNode(node.data)
+        getTopology(this.topologyIndex).addNode(
+          {
+            ...node.data,
+            rect:{
+              ...node.data.rect,
+              x:this.$refs['topology-canvas'].offsetWidth/2-50,
+              y:this.$refs['topology-canvas'].offsetHeight/2-50
+            }
+          });
         setTimeout(()=>{
           this.dragFlag=true;
         },100);
       },
 
       onMessage(event,data){
-        // console.log('onMessage',event,data);
+        console.log('onMessage',event,data);
-
+        console.log(getTopology(this.topologyIndex))
+        if(getTopology(this.topologyIndex)){
+          this.cachesIndex=getTopology(this.topologyIndex).caches.index;
+          if(this.$refs.topTool){
+            this.$refs.topTool.redoFlag=false
+          };
+        }
         if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
-          if(data.type===0&&!data.data){
+          if(data.type===0&& !data.data){
             data.data={
               moduleId:'',
               moduleName:'',
@@ -587,8 +651,9 @@
               displayChart:true,
               aggregation:'last',
             }
-          }else if(data.type==1&&!data.data){
+          }else if(data.type==1&& !data.data){
-            data.manualCps=true;
+            //连线是否自动计算锚点
+            // data.manualCps=true;
             data.data={
               animatePlay:data.animatePlay,
               strokeStyle:data.strokeStyle,
@@ -609,7 +674,7 @@
               aggregation:'last',
             }
           }
-          if(data.type===0 || data.type===1){
+          if(data.type===0||data.type===1){
             data.lineWidth=data.data.lineWidth;
           }
         }
@@ -1011,11 +1076,24 @@
         // canvas.open()
       },
 
+      dropdownClick(){
+
+      },
+
+      changeTopologyOpt(val,key){
+        // this.topologyData.data[key]=this.colorRGBtoHex(val);
+        // getTopology(this.index).data[key]=val;
+        // getTopology(this.index).render();
+        let dataOption=getTopology(this.topologyIndex).data;
+        dataOption[key]=this.lineName;
+        getTopology(this.topologyIndex).render();
+      },
+      //保存
       saveTopology(){
         let topologyData=getTopology(this.topologyIndex).data;
         let flag=true;
         topologyData.pens.forEach(item=>{
-          if(item.type===0&&((flag&&!item.data) || (flag&&item.data&&!item.data.moduleId))){
+          if(item.type===0&&((flag&& !item.data)||(flag&&item.data&& !item.data.moduleId))){
             flag=false;
           }
         });
@@ -1032,13 +1110,13 @@
           this.getNodesArr();
         }else{
           this.$message({
-            showClose: true,
+            showClose:true,
-            message: '请个所有节点绑定module',
+            message:'请个所有节点绑定module',
-            type: 'warning'
+            type:'warning'
           })
         }
       },
-
+      //取消
       cancelTopology(){
         this.editTopologyFlag=false;
         this.$nextTick(()=>{
@@ -1049,6 +1127,10 @@
           getTopology(this.topologyIndex).canvasPos=domRect;
         });
         this.reload();
+      },
+      //预览
+      previewTopology(){
+
       },
       /*tools 方法*/
 
@@ -1060,7 +1142,9 @@
         getTopology(this.topologyIndex).centerView();
       },
       canvasMove(e){// 画布上的移动 确定tooltip的位置
-        if(!this.tooltipPosition.show || this.timer3){return}
+        if(!this.tooltipPosition.show||this.timer3){
+          return
+        }
         this.tooltipPosition.top=e.offsetY;
         this.tooltipPosition.left=e.offsetX+20;
       },
@@ -1083,39 +1167,141 @@
     }
   }
 </script>
-<style scoped>
+<style lang="scss">
-  /deep/ .el-collapse-item__header {
+  .el-dropdown-menu{
+    .project-topology-add-node{
+      .el-collapse-item__header {
         padding: 0 10px;
-    background-color: #F9F9F9;
+        background-color: #ffffff;
+      }
+      .el-collapse-item__header.is-active{
+        background: #F6F6F6;
+        ont-family: Roboto-Bold;
+        font-size: 14px;
+        color: #FA901C;
+        font-weight: 700;
+        el-collapse-item__arrow{
+          color: #666;
+        }
+      }
+      .el-collapse-item__wrap {
+        padding: 0 10px;
+        background-color: #ffffff;
       }
 
-  /deep/ .el-collapse-item__wrap {
+      .el-collapse-item__content {
-    padding: 0 10px;
-    background-color: #F9F9F9;
-  }
-
-  /deep/ .el-collapse-item__content {
         padding: 12px 0px;
         display: flex;
         flex-wrap: wrap;
-    justify-content: space-around;
+        /*justify-content: space-around;*/
       }
 
-  /deep/ .el-upload--picture-card {
+      .el-card__body {
-    width: 100%;
-    height: 100%;
-    line-height: 0;
-  }
-  /deep/ .el-card__body{
         padding: 0;
         height: 100%;
       }
-  /deep/ .handle {
+
+      .handle {
         position: absolute;
         z-index: 2;
       }
+      .buttons {
+        padding: 12px;
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+        width:26px;
 
-  @keyframes model-error-animation{
+        .delIcon {
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          border-radius: 10px;
+          font-size: 12px;
+          line-height: 16px;
+          text-align: center;
+          background: red;
+          right: -8px;
+          top: -8px;
+          color: #fff;
+          display: none;
+          cursor: pointer;
+        }
+
+        a {
+          display: inline-block;
+          color: #314659;
+          width: 26px;
+          height: 26px;
+          text-align: center;
+          text-decoration: none !important;
+          cursor: pointer;
+          line-height: 26px;
+
+          .iconfont {
+            font-size: 24px;
+          }
+
+          img {
+            max-width: 26px;
+            max-height: 26px;
+          }
+
+          &:hover {
+            color: #1890ff;
+          }
+        }
+
+        .upload-icon-box {
+          .el-icon-plus {
+            font-size: 14px;
+            margin-bottom: 10px;
+          }
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .buttons:hover {
+        .delIcon {
+          /*display: inline-block;*/
+        }
+      }
+    }
+    .avatar-uploader{
+      line-height: 30px;
+      .el-icon-plus{
+        font-size: 12px;
+        color: #FA901C;
+        margin: 0 8px 0 15px;
+      }
+      .el-upload--picture-card{
+        width: 100%;
+        height: 100%;
+        border: none;
+        color: #666;
+        font-size: 14px;
+        line-height: 30px;
+        text-align: left;
+      }
+      .el-upload--picture-card:hover, .el-upload:focus{
+        color: #666;
+      }
+    }
+    .avatar-uploader:active el-upload--picture-card{
+      color: #DB8B8B;
+    }
+    .avatar-uploader:active .el-upload--picture-card:hover,.avatar-uploader:active .el-upload:focus{
+      color: #DB8B8B;
+    }
+  }
+</style>
+<style scoped>
+  @keyframes model-error-animation {
     0% {
       transform: scale(0.7);
     }
@@ -1126,7 +1312,8 @@
       transform: scale(0.7);
     }
   }
-  @keyframes model-icon-animation{
+
+  @keyframes model-icon-animation {
     0% {
       transform: scale(1.2) translateX(1px);
     }
@@ -1137,24 +1324,28 @@
       transform: scale(1.2) translateX(1px);
     }
   }
-  .nz-icon-shuidi{
+
+  .nz-icon-shuidi {
     position: absolute;
     font-size: 48px;
-    color: rgba(190,233,222,0.45);
+    color: rgba(190, 233, 222, 0.45);
     border-radius: 50%;
     height: 48px;
     width: 48px;
     line-height: 48px;
   }
-  .model-error.nz-icon-shuidi{
+
-    color: #FADED7 ;
+  .model-error.nz-icon-shuidi {
+    color: #FADED7;
     animation: model-error-animation .6s infinite ease-in-out;
-    animation-direction:normal;
+    animation-direction: normal;
   }
-  .model-error-active.nz-icon-shuidi{
+
-    color: #FADED7 ;
+  .model-error-active.nz-icon-shuidi {
+    color: #FADED7;
   }
-  .nz-icon-model{
+
+  .nz-icon-model {
     color: #23BF9A;
     position: absolute;
     top: -4px;
@@ -1162,28 +1353,34 @@
     font-size: 18px;
     line-height: 48px;
   }
-  .model-error .nz-icon-model{
+
+  .model-error .nz-icon-model {
     color: #EC7F66;
     animation: model-icon-animation .6s infinite ease-in-out;
-    animation-direction:normal;
+    animation-direction: normal;
   }
-  .model-error-active .nz-icon-model{
+
+  .model-error-active .nz-icon-model {
     color: #EC7F66;
   }
+
   .scaleTool-enter-active {
     animation: scaleTool-in .15s;
   }
+
   .scaleTool-leave-active {
     animation: scaleTool-in .15s reverse;
   }
+
   @keyframes scaleTool-in {
-    from{
+    from {
-      top:0px;
+      top: 0px;
       left: 0px;
       transform: scale(0.5);
     }
   }
-  .network-pop .nz-icon-hexagonBorder{
+
+  .network-pop .nz-icon-hexagonBorder {
     position: absolute;
     font-size: 48px;
     color: #84d5c2;
@@ -1191,18 +1388,22 @@
     width: 48px;
     line-height: 48px;
   }
-  .network-pop .nz-icon-hexagonBorder:hover{
+
+  .network-pop .nz-icon-hexagonBorder:hover {
     transform: scale(1.1);
     color: #4BB49B;
   }
-  .network-pop .nz-icon-hexagonBorder.error-model-stat{
+
+  .network-pop .nz-icon-hexagonBorder.error-model-stat {
     color: #F5BAAC;
   }
-  .network-pop .nz-icon-hexagonBorder.error-model-stat:hover{
+
+  .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
     color: #EC7F66;
   }
-  .network-pop  .nz-icon-liubianxing{
+
-    color:#e2f3ef;
+  .network-pop .nz-icon-liubianxing {
+    color: #e2f3ef;
     font-size: 44px;
     position: absolute;
     top: 1px;
@@ -1210,34 +1411,57 @@
     transform: scale(0.9);
     z-index: 0;
   }
-  .network-pop .error-model-stat .nz-icon-liubianxing{
+
-    color: #FADED7 ;
+  .network-pop .error-model-stat .nz-icon-liubianxing {
+    color: #FADED7;
   }
-  .network-pop .nz-icon.noMove{
+
+  .network-pop .nz-icon.noMove {
     position: absolute;
     left: 14px;
     font-size: 20px;
     color: #27c09c;
   }
-  .network-pop .error-model-stat .nz-icon.noMove{
+
+  .network-pop .error-model-stat .nz-icon.noMove {
     color: #EC7F66;
   }
-  .network-pop .no-selPop{
+
+  .network-pop .no-selPop {
     color: #999;
   }
-  .network-pop .no-selPop .nz-icon-liubianxing{
+
-    color: rgb(218,218,218);
+  .network-pop .no-selPop .nz-icon-liubianxing {
+    color: rgb(218, 218, 218);
   }
-  .network-pop .no-selPop .nz-icon-chart{
+
+  .network-pop .no-selPop .nz-icon-chart {
     color: #999;
   }
-  .network-info{
+
+  .network-info {
     position: absolute;
     right: 0;
     top: 50px;
   }
 </style>
 <style lang="scss" scoped>
+  .project-topology-tool{
+    display: inline-flex;
+    height: 30px;
+  }
+  .el-dropdown-title{
+    background: #FFFFFF;
+    border: 1px solid #DEDEDE;
+    border-radius: 2px;
+    width: 66px;
+    height: 28px;
+    display: inline-block;
+    line-height: 28px;
+    .icon-cube{
+      margin-left: 15px;
+    }
+  }
   .project-box {
     width: 100%;
     height: 100%;
@@ -1279,75 +1503,6 @@
       .title {
         float: left;
       }
-
-      .buttons {
-        margin-top: 15px;
-        padding-bottom: 10px;
-        display: inline-block;
-        position: relative;
-        vertical-align: middle;
-
-        .delIcon {
-          position: absolute;
-          width: 16px;
-          height: 16px;
-          border-radius: 10px;
-          font-size: 12px;
-          line-height: 16px;
-          text-align: center;
-          background: red;
-          right: -8px;
-          top: -8px;
-          color: #fff;
-          display: none;
-          cursor: pointer;
-        }
-
-        a {
-          display: inline-block;
-          color: #314659;
-          width: 50px;
-          height: 50px;
-          margin: 0 3px;
-          text-align: center;
-          text-decoration: none !important;
-          cursor: pointer;
-          line-height: 50px;
-
-          .iconfont {
-            font-size: 48px;
-          }
-
-          img {
-            max-width: 50px;
-            max-height: 50px;
-          }
-
-          &:hover {
-            color: #1890ff;
-          }
-        }
-
-        .upload-icon-box {
-          .el-icon-plus {
-            font-size: 14px;
-            margin-bottom: 10px;
-          }
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .buttons:hover {
-        .delIcon {
-          /*display: inline-block;*/
-        }
-      }
     }
 
     .full {
@@ -1356,12 +1511,50 @@
     }
 
     .props {
-      width: 300px;
+      width: 400px;
       height: 100%;
       border: none;
       position: absolute;
       z-index: 1 !important;
-      background-color: #f9f9f9;
+      right: 0;
+      top: 0;
+      background: #FFFFFF;
+      box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
+      border-radius: 10px;
     }
   }
+  .special-select svg{
+    width: 75px;
+    height: 30px;
+  }
+
+  .special-select .el-select.el-select--small {
+    width: 100%;
+  }
+  .special-select /deep/ .el-select-dropdown{
+    width: 75px!important;
+    .el-select-dropdown__item{
+      padding: 0 0 0 10px;
+    }
+  }
+  .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
+    border: 1px solid #DCDFE6;
+    height: 28px;
+  }
+
+  .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
+    display: none;
+  }
+
+  .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
+    height: 28px;
+    line-height: 28px;
+    color: #899FB7;
+    width: 100%;
+  }
+
+  .special-select /deep/ .el-input__prefix > div {
+    width: 100%;
+    height: 100%;
+  }
 </style>