From afb91ec928b3e9f222e57fcda8eb77f1b3270a6d Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 9 Jun 2023 17:35:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20chartDiagram=20=E7=BB=86=E8=8A=82?=
 =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/project/meta2dMain.scss |   2 +-
 .../components/chart/chart/chartDiagram.vue   |   1 +
 .../project/meta2d/js/meta2dMainCalc.js       |   6 +
 .../common/project/meta2d/meta2dElement.vue   | 104 +++++++++++++-----
 .../rightBox/chart/otherChartConfig.vue       |   2 +-
 5 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss b/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
index 77c893a22..dcebc8a43 100644
--- a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
@@ -19,7 +19,7 @@
 .meta2d-project{
   height: calc(100% - 78px);
   border: 1px solid;
-  border-color: $--border-color-light;
+  border-color: $--border-color-light !important;
 }
 .meta2d-chart {
   //border: 1px solid;
diff --git a/nezha-fronted/src/components/chart/chart/chartDiagram.vue b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
index c31a2e5f0..e7b1ebcad 100644
--- a/nezha-fronted/src/components/chart/chart/chartDiagram.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
@@ -28,6 +28,7 @@ export default {
   },
   data () {
     return {
+      isChart: true,
       isPreview: {
         show: false,
         topoData: {},
diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
index 2e9d2a978..bad91d891 100644
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
@@ -426,6 +426,12 @@ export default {
         obj.name = 'rectangle'
         obj.image = ''
       }
+      if (key === 'paddingTop') {
+        obj.paddingTop = pen.paddingTop
+        obj.paddingBottom = pen.paddingBottom
+        obj.paddingLeft = pen.paddingLeft
+        obj.paddingRight = pen.paddingRight
+      }
       getTopology(this.meta2dId).setValue(obj) // 更新pen
       if (key === 'lineAnimateType') {
         if (!pen[key]) {
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
index 3040951a9..857d0af2e 100644
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -124,6 +124,25 @@
                   @change="change('height')"></el-input-number>
               </div>
             </div>
+            <div class="form-row-item">
+              <div class="form-row-key">
+                <div>{{ $t('project.topology.padding') }}</div>
+              </div>
+              <div class="form-row-value">
+                <el-input-number
+                  @focus="inputFocus"
+                  @blur="inputBlur"
+                  :step="1"
+                  :precision="2"
+                  controls-position="right"
+                  size="small"
+                  name="globalAlpha"
+                  class="input"
+                  v-model.number="pen.paddingTop"
+                  required
+                  @change="change('paddingTop')"></el-input-number>
+              </div>
+            </div>
             <div class="form-row-item">
               <div class="form-row-key">
                 {{$t('project.topology.lockRatio')}}
@@ -808,7 +827,8 @@
               <el-row class="el-form">
                 <draggable
                   v-model="pen.data.valueMapping"
-                  @end="change"
+                  @start="start"
+                  @end="end"
                   :scroll-sensitivity="150"
                   :options="{
                     dragClass:'drag-valueMapping-class',
@@ -945,30 +965,6 @@
                             @change="change('valueMapping', index)"
                           ></el-input>
                         </div>
-                      </el-row>
-                      <el-row v-show="item.show" :key="2" class="thresholds-item">
-                        <div>
-                          <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>
-                        </div>
-                        <div :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                          <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
-                            <!--                              <el-dropdown trigger="click" slot="prefix" placement="top-start">-->
-                            <!--                                <div class="el-dropdown-link">-->
-                            <!--                                  <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>-->
-                            <!--                                  <div v-else class="mapping-iconSelect" :title="$t('tip.add')">-->
-                            <!--                                    <i class="nz-icon nz-icon-create-square"></i>-->
-                            <!--                                  </div>-->
-                            <!--                                </div>-->
-                            <!--                                <el-dropdown-menu slot="dropdown" class="mapping-iconPop">-->
-                            <!--                                  <ul class="mapping-iconList">-->
-                            <!--                                    <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">-->
-                            <!--                                      <i :class="subItem.value"></i>-->
-                            <!--                                    </li>-->
-                            <!--                                  </ul>-->
-                            <!--                                </el-dropdown-menu>-->
-                            <!--                              </el-dropdown>-->
-                          </el-input>
-                        </div>
                         <nezhaColor
                           :color-val="item.color"
                           :single="false"
@@ -976,6 +972,36 @@
                           @colorChange="(val,key)=>{valueMappingColorChange(val, key, index)}"
                         />
                       </el-row>
+<!--                      <el-row v-show="item.show" :key="2" class="thresholds-item">-->
+<!--                        <div>-->
+<!--                          <div class='mapping-display'>{{$t('config.assetLabel.display')}}</div>-->
+<!--                        </div>-->
+<!--                        <div :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">-->
+<!--                          <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">-->
+<!--                            &lt;!&ndash;                              <el-dropdown trigger="click" slot="prefix" placement="top-start">&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                <div class="el-dropdown-link">&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                  <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                  <div v-else class="mapping-iconSelect" :title="$t('tip.add')">&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                    <i class="nz-icon nz-icon-create-square"></i>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                  </div>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                </div>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                <el-dropdown-menu slot="dropdown" class="mapping-iconPop">&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                  <ul class="mapping-iconList">&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                    <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                      <i :class="subItem.value"></i>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                    </li>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                  </ul>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                                </el-dropdown-menu>&ndash;&gt;-->
+<!--                            &lt;!&ndash;                              </el-dropdown>&ndash;&gt;-->
+<!--                          </el-input>-->
+<!--                        </div>-->
+<!--                        <nezhaColor-->
+<!--                          :color-val="item.color"-->
+<!--                          :single="false"-->
+<!--                          :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'},{name:'border',value:item.color.icon,key:'icon'}]"-->
+<!--                          @colorChange="(val,key)=>{valueMappingColorChange(val, key, index)}"-->
+<!--                        />-->
+<!--                      </el-row>-->
                     </transition-group>
                   </div>
                 </draggable>
@@ -1041,12 +1067,12 @@
             {{$t('project.topology.legends')}}
           </div>
           <div class="form-row-value" style="margin-bottom: 10px;display: flex;justify-content: space-between" v-for="(legend, index) in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
-            <div style="display: inline-block;width: calc(20% - 10px)">
+            <div style="display: inline-block;width: calc(30% - 10px)">
               <el-select v-model="legend.parent" size="small" style="width: 100%" clearable @change="legendParentChange(legend)">
-                <el-option class="text-ellipsis" v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name' :title='item.name' style="width: 60px"></el-option>
+                <el-option class="text-ellipsis" v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name' :title='item.name' style="width: 300px"></el-option>
               </el-select>
             </div>
-            <div style="display: inline-block;width: calc(40% - 10px)">
+            <div style="display: inline-block;width: calc(30% - 10px)">
               <el-select v-model="legend.legend" size="small" style="width: 100%" clearable>
                 <el-option class="text-ellipsis" v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'  :title='item.name' style="width: 170px"></el-option>
               </el-select>
@@ -1226,6 +1252,13 @@ export default {
   mounted () {
   },
   methods: {
+    start () {
+      document.body.classList.add('isDrag')
+    },
+    end () {
+      this.change()
+      document.body.classList.remove('isDrag')
+    },
     change (key) {
       if (key === 'lineDash') {
         const val = this.pen.borderType
@@ -1246,6 +1279,11 @@ export default {
       if (key === 'lineAnimateType') {
         this.pen.autoPlay = false
       }
+      if (key === 'paddingTop') {
+        this.pen.paddingBottom = this.pen.paddingTop
+        this.pen.paddingLeft = this.pen.paddingTop
+        this.pen.paddingRight = this.pen.paddingTop
+      }
       this.$emit('change', key)
       this.$forceUpdate()
     },
@@ -1296,8 +1334,14 @@ export default {
       this.elements[key] = !this.elements[key]
     },
     inputFocus (e) {
-      e.path[2].children[0].setAttribute('tabindex', '-10')
-      e.path[2].children[1].setAttribute('tabindex', '-11')
+      const decrease = document.getElementsByClassName('el-input-number__decrease')
+      decrease.forEach(item => {
+        item.setAttribute('tabindex', '-10')
+      })
+      const increase = document.getElementsByClassName('el-input-number__increase')
+      increase.forEach(item => {
+        item.setAttribute('tabindex', '-11')
+      })
     },
     inputBlur (e) {
     },
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 1b9501606..7e18e993b 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -505,7 +505,7 @@ export default {
       if (flag) {
         setTimeout(() => {
           this.$refs.rightBoxChartEdit.$refs.header.editMeta2d()
-        }, 200)
+        }, 500)
       }
       if (data) {
         this.chartConfig.param.topo = data