refactor(数据大屏、仪表板): 图表编辑区域样式优化

core/core-frontend/src/custom-component/common/CarouselSetting.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
-import { computed, toRefs } from 'vue'
+import { computed, nextTick, toRefs } from 'vue'
 import { ElFormItem, ElIcon, ElInputNumber } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
 import Icon from '../../components/icon-custom/src/Icon.vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const snapshotStore = snapshotStoreWithOut()
 
@@ -28,6 +29,13 @@ const onSettingChange = () => {
   if (!carouselInfo.value.time || carouselInfo.value.time < 1) {
     carouselInfo.value.time = 1
   }
+  if (carouselInfo.value.enable) {
+    useEmitt().emitter.emit('carouselValueChange')
+  }
+
+  nextTick(() => {
+    useEmitt().emitter.emit('calcData-' + element.value.id)
+  })
   snapshotStore.recordSnapshotCache('renderChart')
 }
 

core/core-frontend/src/custom-component/picture-group/Attr.vue

@@ -43,6 +43,7 @@ const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
       <template v-slot:threshold>
         <picture-group-threshold
           :themes="themes"
+          :element="curComponent"
           :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
         >
           <template v-slot:dataset>

core/core-frontend/src/custom-component/picture-group/PictureGroupThreshold.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { nextTick, onMounted, PropType, toRefs } from 'vue'
 import { BASE_VIEW_CONFIG } from '@/views/chart/components/editor/util/chart'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import Threshold from '@/views/chart/components/editor/editor-senior/components/Threshold.vue'
 import { CollapseSwitchItem } from '@/components/collapse-switch-item'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useEmitt } from '@/hooks/web/useEmitt'
 const snapshotStore = snapshotStoreWithOut()
 const { t } = useI18n()
 
@@ -13,6 +14,16 @@ const props = defineProps({
     type: String as PropType<EditorTheme>,
     default: 'dark'
   },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: {
+          urlList: []
+        }
+      }
+    }
+  },
   view: {
     type: Object as PropType<ChartObj>,
     required: false,
@@ -21,13 +32,29 @@ const props = defineProps({
     }
   }
 })
-const { view } = toRefs(props)
+const { view, element } = toRefs(props)
 
 const onThresholdChange = val => {
   // do
   view.value.senior.threshold = val
+  if (val.enable) {
+    element.value.carousel.enable = false
+  }
+  nextTick(() => {
+    useEmitt().emitter.emit('calcData-' + element.value.id)
+  })
   snapshotStore.recordSnapshotCache('calcData', view.value.id)
 }
+
+const closeThreshold = () => {
+  view.value.senior.threshold.enable = false
+}
+onMounted(() => {
+  useEmitt({
+    name: 'carouselValueChange',
+    callback: () => closeThreshold()
+  })
+})
 </script>
 
 <template>