NEZ-2614 style： 样式修改

nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss

@@ -73,7 +73,7 @@
         text-align: center;
         font-size: 12px;
         display: block;
-        line-height: 28px;
+        line-height: 30px;
       }
 
       .scale-number-symbol {
@@ -86,7 +86,7 @@
         line-height: 16px;
         border-radius: 50%;
         text-align: center;
-        margin-top: 6px;
+        margin-top: 7px;
       }
     }
 

nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss

@@ -88,7 +88,15 @@
     border-radius: 2px;
     display: flex;
     justify-content: space-between;
-    padding: 3px 10px
+    padding: 3px 10px;
+    .hide-input {
+      .el-input__inner {
+        border-color: transparent;
+      }
+      .el-input__inner:focus {
+        border-color: $--border-color-base-focus;
+      }
+    }
   }
   .promqlInput .el-cascader-menu{
     width: 200px;

nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js

@@ -62,11 +62,12 @@ export default {
       /* 画布绑定事件 */
       meta2d.beforeAddPens = (pens) => { // 添加画笔前
         bus.$emit('changeDrawState')
+        const name = 'elements - ' + meta2d.store.data.pens.length
         if (pens.length === 1) {
           if (!pens[0].type) {
-            this.nodeInit(pens[0])
+            this.nodeInit(pens[0], name)
           } else {
-            this.lineInit(pens[0])
+            this.lineInit(pens[0], name)
           }
         }
         return true
@@ -99,7 +100,7 @@ export default {
         })
       })
     },
-    nodeInit (pen) { // 初始化节点参数
+    nodeInit (pen, name) { // 初始化节点参数
       if (pen.data && pen.data.params) {
         return
       }
@@ -132,6 +133,7 @@ export default {
           legends: [] // {legend: '' , alias}
         }
       }
+      pen.nzName = name
       pen.disableInput = pen.disableInput || true
       pen.background = pen.background || '#22222200'
       pen.textAlign = pen.textAlign || 'center'
@@ -157,7 +159,7 @@ export default {
       pen.locked = pen.locked || 0
       pen.isBottom = false
     },
-    lineInit (pen) { // 初始化连线参数
+    lineInit (pen, name) { // 初始化连线参数
       if (pen.data && pen.data.params) {
         return
       }
@@ -177,6 +179,7 @@ export default {
           tooltip: true
         }
       }
+      pen.nzName = name
       pen.disableInput = pen.disableInput || true
       pen.lineAnimateType = pen.lineAnimateType || 0
       pen.animateSpan = pen.animateSpan || 1

nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js

@@ -141,8 +141,10 @@ export default {
         }
         data.pens.forEach(pen => {
           pen.isBottom = false
+          if (!pen.nzName) {
+            pen.nzName = ''
+          }
           if (pen.isNz) {
-
             if (pen.data.legend && pen.data.enable.valueMapping) {
               const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)
               if (findItem) {

nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue

@@ -24,7 +24,6 @@
             {{$t('project.topology.image')}}
           </div>
           <div class="form-row-value">
-            <!--                <el-input  v-model="pen.image" size="small" @change="change('image')"/>-->
             <meta2dSelectImage :selectImage="bkImage" :imgId="bkImageId" @updateImage="updateImage"/>
           </div>
         </div>
@@ -50,11 +49,15 @@
             }">
             <div v-for="(item, index) in elements" :key="item.id" @click.stop="penActive(item)">
               <div class="pen-tools pen-item" style="">
-                <span>
-                  <i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" />
+                <span class="hide-input">
+                  <i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" style="margin-right: 3px"/>
                   <i v-else class="nz-icon nz-icon-xiantiao" />
-                  <span v-if="item.type !== 1" style="margin-left: 8px">element - {{index}}</span>
-                  <span v-else style="margin-left: 5px">element - {{index}}</span>
+                  <el-input
+                    :title="item.nzName"
+                    style="width: 120px"
+                    @focus="focusName"
+                    v-model="item.nzName"
+                    size="small"/>
                 </span>
                 <span>
                     <span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
@@ -109,11 +112,15 @@ export default {
     }
   },
   mounted () {
+    getTopology(this.meta2dId).store.data.pens.forEach((pen, index) => {
+      if (!pen.nzName) {
+        pen.nzName = 'element - ' + index
+      }
+    })
     this.elements = getTopology(this.meta2dId).store.data.pens
     this.background = getTopology(this.meta2dId).store.data.background || '#ffffff00'
     this.bkImage = getTopology(this.meta2dId).store.data.bkImage || ''
     this.bkImageId = this.params.bkImageId || ''
-    console.log(this.bkImageId)
     this.$refs.backgroundNezhaColor.colors = this.background
   },
   methods: {
@@ -187,6 +194,9 @@ export default {
       this.bkImage = image.image
       this.bkImageId = image.id
       getTopology(this.meta2dId).setBackgroundImage(image.image)
+    },
+    focusName (event) {
+      console.log(event)
     }
   }
 }