refactor: 画板优化

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -15,10 +15,10 @@
         <i v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)" class="icon iconfont icon-edit" @click.stop="edit" />
       </span>
       <span :title="$t('panel.matrix')">
-        <i v-if="activeModel==='edit'&&auxiliaryMatrix" class="icon iconfont icon-shujujuzhen" @click.stop="auxiliaryMatrixChange" />
+        <i v-if="activeModel==='edit'&&curComponent.auxiliaryMatrix" class="icon iconfont icon-shujujuzhen" @click.stop="auxiliaryMatrixChange" />
       </span>
       <span :title="$t('panel.suspension')">
-        <i v-if="activeModel==='edit'&&!auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
+        <i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
       </span>
       <span :title="$t('panel.details')">
         <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
@@ -61,13 +61,16 @@ export default {
     return {
       componentType: null,
       linkageActiveStatus: false,
-      auxiliaryMatrix: false,
       editFilter: [
         'view',
         'custom'
-      ]
+      ],
+      timer: null
     }
   },
+  mounted() {
+    this.createTimer()
+  },
   computed: {
     existLinkage() {
       let linkageFiltersCount = 0
@@ -85,9 +88,6 @@ export default {
     linkageInfo() {
       return this.targetLinkageInfo[this.element.propValue.viewId]
     },
-    mounted() {
-      this.auxiliaryMatrix = this.$store.state.curComponent.auxiliaryMatrix
-    },
     ...mapState([
       'menuTop',
       'menuLeft',
@@ -101,7 +101,23 @@ export default {
       'curCanvasScale'
     ])
   },
+  beforeDestroy() {
+    this.destroyTimer()
+  },
   methods: {
+    createTimer() {
+      if (!this.timer) {
+        this.timer = setInterval(() => {
+          console.log('t=' + this.curComponent.auxiliaryMatrix)
+        }, 5000)
+      }
+    },
+    destroyTimer() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     showViewDetails() {
       this.$emit('showViewDetails')
     },
@@ -112,14 +128,12 @@ export default {
         this.curComponent.style.width = this.curComponent.sizex * this.curCanvasScale.matrixStyleOriginWidth
         this.curComponent.style.height = this.curComponent.sizey * this.curCanvasScale.matrixStyleOriginHeight
         this.curComponent.auxiliaryMatrix = false
-        this.auxiliaryMatrix = false
       } else {
         this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1
         this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
         this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
         this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
         this.curComponent.auxiliaryMatrix = true
-        this.auxiliaryMatrix = true
       }
       this.$store.state.styleChangeTimes++
       bus.$emit('auxiliaryMatrixChange')

frontend/src/components/canvas/components/Editor/PGrid.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="grid">
     <!--    positionBox:{{ positionBox.length }}-->
-<!--    <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
+    <!--    <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
     <div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
-      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ">
+      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">
         {{ xItem.el?1:0 }}
       </div>
     </div>

frontend/src/components/canvas/components/Editor/index.vue

@@ -13,9 +13,9 @@
     @scroll="canvasScroll"
   >
     <!-- 网格线 -->
-    <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
+<!--        <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
     <!--    positionBox:{{positionBoxInfo}}-->
-    <!--    <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />-->
+<!--        <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />-->
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -1043,7 +1043,7 @@ export default {
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     setInterval(() => {
       _this.positionBoxInfoArray = positionBox
-    }, 0)
+    }, 500)
   },
   created() {
     // this.$store.dispatch('conditions/clear')

frontend/src/store/index.js

@@ -94,13 +94,11 @@ const data = {
           dragging: false,
           resizing: false
         }
-        if (!component.auxiliaryMatrix) {
-          component['auxiliaryMatrix'] = false
-        }
       }
       state.styleChangeTimes = 0
       state.curComponent = component
       state.curComponentIndex = index
+      console.log('setCurComponent:' + JSON.stringify(component))
     },
 
     setCurCanvasScale(state, curCanvasScale) {

frontend/src/views/panel/edit/index.vue

@@ -386,6 +386,7 @@ export default {
         componentDatas.forEach(item => {
           item.filters = (item.filters || [])
           item.linkageFilters = (item.linkageFilters || [])
+          item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
         })
         this.$store.commit('setComponentData', this.resetID(componentDatas))
         // this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
@@ -399,6 +400,7 @@ export default {
           componentDatas.forEach(item => {
             item.filters = (item.filters || [])
             item.linkageFilters = (item.linkageFilters || [])
+            item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
           })
           this.$store.commit('setComponentData', this.resetID(componentDatas))
           //   this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))

frontend/src/views/panel/list/PanelList.vue

@@ -621,6 +621,7 @@ export default {
           componentDatas.forEach(item => {
             item.filters = (item.filters || [])
             item.linkageFilters = (item.linkageFilters || [])
+            item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
           })
           this.$store.commit('setComponentData', this.resetID(componentDatas))
           //   this.$store.commit('setComponentData', sourceInfo.type === 'custom' ? sourceInfo : this.resetID(sourceInfo))