Browse Source

fix: 解决锁定时,修改模块隐藏展示,标尺不会自适应的问题

奔跑的面条 3 năm trước cách đây
mục cha
commit
86c206c3c6

+ 2 - 2
src/views/chart/ContentConfigurations/index.vue

@@ -14,7 +14,7 @@
       @collapse="collapsedHandle"
       @expand="expandHandle"
     >
-      <content-box class="go-content-layers go-boderbox" :show-top="false" :depth="2">
+      <content-box class="go-content-configurations go-boderbox" :show-top="false" :depth="2">
         <!-- 页面配置 -->
         <n-tabs v-if="!selectTarget" class="tabs-box" size="small" type="segment">
           <n-tab-pane
@@ -160,7 +160,7 @@ const chartsTabList = [
 </script>
 
 <style lang="scss" scoped>
-@include go(content-layers) {
+@include go(content-configurations) {
   overflow: hidden;
   .tabs-box {
     padding: 10px;

+ 37 - 11
src/views/chart/ContentEdit/components/EditRule/index.vue

@@ -12,14 +12,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed, watch } from 'vue'
+import { ref, toRefs, computed, watch, nextTick, onBeforeUnmount } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 
 const chartEditStore = useChartEditStore()
+const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()
 
 const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+const { scale, lockScale } = toRefs(chartEditStore.getEditCanvas)
+const { getLayers, getCharts, getDetails } = toRefs(chartLayoutStore)
 
 const configShow = ref(true)
 
@@ -49,25 +53,47 @@ const canvasBox = () => {
   }
 }
 
-const scale = computed(() => {
-  return chartEditStore.getEditCanvas.scale
-})
-
 // 颜色
 const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
 // 处理标尺重制大小
-watch(
-  () => scale.value,
-  () => {
-    configShow.value = false
+const ruleChangeHandle = () => {
+  configShow.value = false
+  setTimeout(() => {
+    configShow.value = true
+  })
+}
+
+const ruleChangeHandleTimeOut = () => {
+  if (lockScale.value) {
     setTimeout(() => {
-      configShow.value = true
-    })
+      ruleChangeHandle()
+    }, 500)
   }
+}
+
+watch(
+  () => scale.value,
+  () => ruleChangeHandle()
 )
+
+watch(
+  () => getLayers.value,
+  () => ruleChangeHandleTimeOut()
+)
+
+watch(
+  () => getCharts.value,
+  () => ruleChangeHandleTimeOut()
+)
+
+watch(
+  () => getDetails.value,
+  () => ruleChangeHandleTimeOut()
+)
+
 </script>
 
 <style>