feat： 新增 添加时 计算最后元素的位置

nezha-fronted/src/components/chart/chart/tools.js

@@ -134,8 +134,8 @@ export function getLayoutPosition (arr) {
     })
     let maxX = 0
     lastItem.forEach(last => {
-      if (maxX < last.x) {
-        maxX = last.x
+      if (maxX < last.x + last.span) {
+        maxX = last.x + last.span
       }
     })
     return {

nezha-fronted/src/components/chart/chartList.vue

@@ -86,7 +86,7 @@
 <script>
 import VueGridLayout from 'vue-grid-layout'
 import { fromRoute } from '@/components/common/js/constants'
-import { getGroupHeight } from './chart/tools'
+import { getGroupHeight, getLayoutPosition } from './chart/tools'
 import panelChart from '@/components/chart/panelChart'
 import bus from '@/libs/bus'
 import groupData from '@/components/chart/tempGroup'
@@ -264,8 +264,11 @@ export default {
           charts: charts
         }
         // console.log(this.copyDataList)
-        this.$put('/visual/panel/chart/weights', params)
-      }, 200)
+        this.$put('/visual/panel/chart/weights', params).then(() => {
+          const position = getLayoutPosition(this.copyDataList)
+          this.$store.commit('setChartLastPosition', position)
+        })
+      }, 300)
     }
   },
   created () {
@@ -286,6 +289,8 @@ export default {
         this.firstInit = true
         this.gridLayoutLoading = true
         this.noData = !n || n.length < 1
+        const position = getLayoutPosition(n)
+        this.$store.commit('setChartLastPosition', position)
         const tempList = n.map(item => {
           let param = ''
           let height = ''

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -468,7 +468,7 @@
                 <div class='mapping-display'>Title</div>
               </div>
               <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
-                <el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
+                <el-input size="small" v-model="item.title" @change="change"></el-input>
               </el-form-item>
               <div>
                 <div class='mapping-display'>Unit</div>

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -126,6 +126,11 @@ export default {
     systemChartConfig,
     otherChartConfig
   },
+  computed: {
+    chartLastPosition () {
+      return this.$store.getters.getChartLastPosition
+    }
+  },
   data () {
     return {
       fromRoute,
@@ -169,6 +174,10 @@ export default {
         if (!params.groupId) {
           params.groupId = 0
         }
+        if (!params.x || !params.y) {
+          params.x = this.chartLastPosition.x + params.span > 12 ? 0 : this.chartLastPosition.x
+          params.y = this.chartLastPosition.y + 12
+        }
         delete params.panel
         if (params.type === 'table') {
           delete params.param.tags

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -247,7 +247,7 @@
                 <div class='mapping-display'>Title</div>
               </div>
               <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
-                <el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
+                <el-input size="small" v-model="item.title" @change="change"></el-input>
               </el-form-item>
               <div>
                 <div class='mapping-display'>Unit</div>

nezha-fronted/src/store/panel.js

@@ -10,7 +10,11 @@ const panel = {
     headerH: 0.5,
     headerHPadding: 0.5,
     rowHeight: 150,
-    chartListId: ''
+    chartListId: '',
+    chartLastPosition: {
+      x: 0,
+      y: 0
+    }
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -34,6 +38,9 @@ const panel = {
     setPanelNowTimeType (state, nowTimeType) {
       state.nowTimeType = nowTimeType
     },
+    setChartLastPosition (state, position) {
+      state.chartLastPosition = position
+    },
     setHeaderH (state, h) {
       state.headerH = h.headerH
       state.headerHPadding = h.headerHPadding
@@ -81,6 +88,9 @@ const panel = {
     getRowHeight (state) {
       return state.rowHeight
     },
+    getChartLastPosition (state, position) {
+      return state.chartLastPosition
+    },
     getChartListId (state, id) {
       return state.chartListId
     }