fix： chart diagRam 细节 微调

nezha-fronted/src/components/charts/diagram-chart.vue

@@ -41,7 +41,7 @@
         </div>
         <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
           <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram"/>
+            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram" :chartInfo="chartData"/>
           </div>
         </div>
         <!--全屏-->
@@ -59,7 +59,7 @@
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true" :chartInfo="chartData"></span>
     </div>
   </div>
 </template>

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -320,8 +320,8 @@ import {
   imageTemp,
   myShape,
   myAnchors,
-  myIconRect,
-  myTextRect,
+  myIconRect2,
+  myTextRect2,
   onChangeAnimate,
   onChangeAnimateLine,
   myCubec,
@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
 import bus from '../../../libs/bus'
 import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
 // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+registerNode('rectangleImg', myShape, myAnchors, myIconRect2, null)
 registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
 const canvasOptions = {
@@ -506,6 +506,7 @@ export default {
 
     },
     topoData: {},
+    chartInfo: {},
     fromChartBox: {
       type: Boolean,
       default: false
@@ -636,8 +637,11 @@ export default {
             })
             getTopology(this.topologyIndex).resize()
             getTopology(this.topologyIndex).centerView()
-            if (this.fromChartBox || this.fromChart) {
+            if (this.fromChartBox || this.fromChart) { // 是否来自panel 和 chartBox
               getTopology(this.topologyIndex).fitView(20)
+              if (this.chartInfo && this.chartInfo.param && this.chartInfo.param.lock) { // 判断节点 以及画布 是否可以拖动
+                getTopology(this.topologyIndex).lock(2)
+              }
             }
             this.penToolTipScale = getTopology(this.topologyIndex).data.scale
             setTimeout(() => {

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

@@ -50,6 +50,7 @@
             </el-form-item>
           </el-row>
           <!--metric-->
+          <div v-show="selection.pen.data.valueMappingShow">
             <el-row :key="index" class="element-item form-row-item" style=""
                     v-for="(item,index) in selection.pen.data.expressArr">
               <promql-input
@@ -166,6 +167,7 @@
             <div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
               <i class="nz-icon nz-icon-plus"></i>
             </div>
+          </div>
 
           <!--tooltip-->
           <el-row class="form-row-title">
@@ -180,7 +182,7 @@
             </el-form-item>
           </el-row>
 
-          <div class="tooltip-box">
+          <div class="tooltip-box" v-show="selection.pen.data.tooltipShow">
             <!--title-->
             <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
               <el-input v-model="selection.pen.data.chartTitle" @change="changeTitle" class="input" size="small"></el-input>

nezha-fronted/src/components/common/project/L5/services/canvas.js

@@ -247,6 +247,19 @@ export function myTextRect (node) {
   )
   node.fullTextRect = node.rect
 }
+export function myIconRect2 (node) {
+  node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - (node.paddingTop + node.paddingBottom))
+  node.fullIconRect = node.rect
+}
+export function myTextRect2 (node) {
+  node.textRect = new Rect(
+    node.rect.x + node.paddingLeft,
+    node.rect.y + node.rect.height - 20 - node.paddingBottom,
+    0,
+    0
+  )
+  node.fullTextRect = node.rect
+}
 /* 自定义图片组件 */
 
 /* 自定义立方体 */