NEZ-2614 fix： 样式修改

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

@@ -82,7 +82,8 @@
     padding-top: 0;
   }
   .pen-tools{
-    background: $--background-color-1;
+    background: $--background-color-empty;
+    border: 1px solid $--border-color-light;
     margin-bottom: 10px;
     border-radius: 2px;
     display: flex;
@@ -178,4 +179,20 @@
       font-size: 14px;
     }
   }
+  .image-input {
+    width: 100%;
+    height: 32px;
+    box-sizing: border-box;
+    padding: 0 10px;
+    line-height: 28px;
+    border: 1px solid $--border-color-light;
+    .nz-icon-close {
+      display: none;
+    }
+  }
+  .image-input:hover {
+    .nz-icon-close {
+      display: inline-block;
+    }
+  }
 }

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "34318397",
+      "name": "矩形",
+      "font_class": "juxing",
+      "unicode": "e7d2",
+      "unicode_decimal": 59346
+    },
+    {
+      "icon_id": "34318411",
+      "name": "线条",
+      "font_class": "xiantiao",
+      "unicode": "e7d3",
+      "unicode_decimal": 59347
+    },
     {
       "icon_id": "34168331",
       "name": "Integration",

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

@@ -155,7 +155,7 @@ export default {
       pen.visible = pen.visible || true
       pen.isNz = true
       pen.locked = pen.locked || 0
-      pen.isBottom = true
+      pen.isBottom = false
     },
     lineInit (pen) { // 初始化连线参数
       if (pen.data && pen.data.params) {
@@ -178,7 +178,7 @@ export default {
         }
       }
       pen.disableInput = pen.disableInput || true
-      pen.lineAnimateType = pen.lineAnimateType || undefined
+      pen.lineAnimateType = pen.lineAnimateType || 0
       pen.animateSpan = pen.animateSpan || 1
       pen.animateReverse = pen.animateReverse || false
       pen.fromArrow = pen.fromArrow || ''
@@ -193,8 +193,8 @@ export default {
       pen.isNz = pen.isNz || true
       pen.visible = pen.visible || true
       pen.locked = pen.locked || 0
-      pen.isBottom = true
+      pen.isBottom = false
-      pen.autoPlay = true
+      pen.autoPlay = false
     },
     pensActive (pens, e) { // 选中节点
       this.selectPens = pens

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

@@ -142,6 +142,7 @@ export default {
         data.pens.forEach(pen => {
           pen.isBottom = false
           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

@@ -25,7 +25,7 @@
           </div>
           <div class="form-row-value">
             <!--                <el-input  v-model="pen.image" size="small" @change="change('image')"/>-->
-            <meta2dSelectImage :selectImage="bkImage" @updateImage="updateImage"/>
+            <meta2dSelectImage :selectImage="bkImage" :imgId="bkImageId" @updateImage="updateImage"/>
           </div>
         </div>
       </div>
@@ -48,17 +48,13 @@
               animation: 150,
               handle: '.drag-sort'
             }">
-            <div v-for="item in elements" :key="item.id" @click.stop="penActive(item)">
+            <div v-for="(item, index) in elements" :key="item.id" @click.stop="penActive(item)">
-              <div class="pen-tools" style="">
+              <div class="pen-tools pen-item" style="">
                 <span>
-                  <i v-if="item.type !== 1" class="nz-icon nz-icon-zhengfangxing" />
+                  <i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" />
-                  <i v-else class="nz-icon nz-icon-compare" />
+                  <i v-else class="nz-icon nz-icon-xiantiao" />
-                  <span v-if="item.data.source!=='legend'" style="margin-left: 5px">
+                  <span v-if="item.type !== 1" style="margin-left: 8px">element - {{index}}</span>
-                     {{item.name}}
+                  <span v-else style="margin-left: 5px">element - {{index}}</span>
-                  </span>
-                  <span v-else style="margin-left: 5px">
-                     {{item.name}}
-                  </span>
                 </span>
                 <span>
                     <span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
@@ -75,9 +71,6 @@
                   <span @click.stop="delPen(item)" class="pen-tools-item" :title="$t('overall.delete')">
                     <i  class="nz-icon nz-icon-minus"/>
                   </span>
-                  <span style="cursor: grab;" class="drag-sort pen-tools-item" :title="$t('dashboard.panel.chartForm.sort')">
-                    <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
-                  </span>
                 </span>
               </div>
           </div>
@@ -99,7 +92,8 @@ export default {
   name: 'meta2dCanvas',
   props: {
     canvasProps: {},
-    meta2dId: {}
+    meta2dId: {},
+    params: {}
   },
   components: {
     draggable,
@@ -118,6 +112,8 @@ export default {
     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: {

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

@@ -259,7 +259,7 @@
               </div>
               <div class="form-row-value">
 <!--                <el-input  v-model="pen.image" size="small" @change="change('image')"/>-->
-                <meta2dSelectImage :selectImage="pen.image" @updateImage="updateImage"/>
+                <meta2dSelectImage :selectImage="pen.image" :imgId="pen.imageId" @updateImage="updateImage"/>
               </div>
             </div>
             <div class="form-row-item">

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

@@ -119,12 +119,14 @@ export default {
       const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
       const unit = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataUnit
       const statistic = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataStatistic
+      const bkImageId = this.$parent.$refs.meta2dProps.$refs.meta2dCanvas.bkImageId
       const params = {
         topo: getTopology(this.meta2dId).data(),
         elements: elements,
         timeType: timeType || 1,
         unit: unit || 1,
         statistic: statistic || 'last',
+        bkImageId: bkImageId || ''
       }
 
       this.$put('monitor/project/topo', { topo: JSON.stringify(params), projectId: this.project.id }).then(res => {

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

@@ -5,7 +5,7 @@
         <meta2dElement :selectPens.sync="selectPens" @change="change" :elements="elements"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('project.topology.canvas')" name="canvas">
-        <meta2dCanvas :canvasProps="canvasProps" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
+        <meta2dCanvas :canvasProps="canvasProps"  :params.sync="params" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
       </el-tab-pane>
       <el-tab-pane :label="$t('project.topology.data')" name="data">
         <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData"/>

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

@@ -1,11 +1,10 @@
 <template>
   <div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
     <div @click="selectBoxShow = !selectBoxShow" style="position: relative">
-      <div v-if="selectImage" class="image-box">
+      <div class="image-input">
-        <img :src="selectImage"  class="image-box">
+        <span v-if="imageName">{{unit}} / {{imageName}}</span>
+        <i class="nz-icon nz-icon-circle-close" style="position: absolute;top: 2px;right: 10px;font-size: 8px" @click.stop="selectImageChange({image: '', id: ''})"/>
       </div>
-      <div v-else class="image-box image-box-null" />
-      <i class="nz-icon nz-icon-close" style="position: absolute;top: -7px;left: 25px;font-size: 10px" @click.stop="selectImageChange({image: '', id: ''})"/>
     </div>
     <div class="image-select-box" v-if="selectBoxShow">
 <!--      <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">-->
@@ -111,7 +110,8 @@ import { imageTemp } from '@/components/common/project/L5/services/canvas'
 export default {
   name: 'meta2dSelectImage',
   props: {
-    selectImage: {}
+    selectImage: {},
+    imgId: {}
   },
   data () {
     return {
@@ -129,6 +129,8 @@ export default {
         name: '',
         unit: ''
       },
+      unit: '',
+      imageName: ''
     }
   },
   mounted () {
@@ -151,6 +153,13 @@ export default {
           this.iconArray = [...res.data.list]
           this.iconArray.forEach((item, index) => {
             item.image = res2[index].data
+            if (this.imgId == item.id) {
+              this.unit = item.unit
+              this.imageName = item.imageName
+            } else if (this.selectImage === item.image) {
+              this.unit = item.unit
+              this.imageName = item.imageName
+            }
             const group = this.tools.find(tool => tool.group === item.unit)
             if (group) {
               group.children.push({
@@ -187,6 +196,8 @@ export default {
       this.selectBoxShow = false
     },
     selectImageChange (item) {
+      this.unit = item.unit
+      this.imageName = item.imageName
       this.$emit('updateImage', item)
     },
     tooltipDelete (item) {

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

@@ -9,7 +9,7 @@
          @dragstart.stop="onDragstart($event)">
       <div
       >
-        <i class="nz-icon nz-icon-zhengfangxing" />
+        <i class="nz-icon nz-icon-juxing" />
       </div>
     </div>
     <div id="tools-left-draw"
@@ -17,7 +17,7 @@
          :class="drawLineFlag ? 'is-active-meta2d' : ''"
          @click="changeState('drawLineFlag')"
          :title="$t('project.topology.addLine')">
-      <i  class="nz-icon nz-icon-compare" />
+      <i  class="nz-icon nz-icon-xiantiao" />
     </div>
     <div id="undo"
          class="top-tool-item"