fix: 优化组态在编辑页可以放大缩小

2025-06-30 00:29:16 +08:00 · 2024-03-07 11:04:31 +08:00 · 2024-03-07 11:04:31 +08:00 · 302da03590
commit 302da03590
parent 4b7b18e5eb
8 changed files with 75 additions and 34 deletions
--- a/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.ts
+++ b/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.ts
@ -15,6 +15,8 @@ export const option = {
  scale: 1,
  // 展示标题
  isThereATitleComponet: false,
+  // 控制内层 使外层选中失效
+  enableInner: false
 }

 export default class Config extends PublicConfigClass implements CreateComponentType
--- a/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.vue
+++ b/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/config.vue
@ -1,5 +1,10 @@
 <template>
  <CollapseItem name="组态" :expanded="true">
+    <SettingItemBox name="移动组态" :alone="true">
+      <n-space justify="start">
+        <n-switch v-model:value="optionData.enableInner" size="small"></n-switch>
+      </n-space>
+    </SettingItemBox>
    <SettingItemBox name="标题">
      <SettingItem name="如果有标题将展示">
        <n-space justify="start">
@ -41,7 +46,7 @@
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="提示" :alone="true">
-      <n-text>在预览页可以使用 alt+'+' 或 alt+'-' 进行缩放</n-text>
+      <n-text>可以使用 alt+'+' 或 alt+'-' 进行缩放</n-text>
    </SettingItemBox>
  </CollapseItem>
 </template>
--- a/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.vue
+++ b/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.vue
@ -1,7 +1,7 @@
 <template>
  <div v-if="chartConfig.customData.mapId" :style="{width: w, height: h}">
 <!--    :style="{transform: handleScale}"-->
-    <iframe ref="iframe" :src="url" :width="w" :height="h" style="transform-origin: left top" frameborder="no" scrolling="no"></iframe>
+    <iframe ref="iframe" :src="url" :width="w" :height="h" :style="{pointerEvents: !isPreview() && option.enableInner ? 'auto' : ''}" style="transform-origin: left top" frameborder="no" scrolling="no"></iframe>
  </div>
  <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;" v-else>
    <img src="@/assets/images/exception/nodata.svg" style="width: 100%;height: 30%" alt="">
@ -13,7 +13,7 @@
 import { computed, PropType, toRefs, onMounted, onUnmounted, ref, watch, defineEmits } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useOriginStore } from '@/store/modules/originStore/originStore'
-import { postMessageToParent } from '@/utils'
+import { postMessageToParent, isPreview } from '@/utils'

 const props = defineProps({
  chartConfig: {
@ -40,7 +40,7 @@ const option = computed(() => {
  return props.chartConfig.option
 })

-const emit = defineEmits(['changeZIndex'])
+const emit = defineEmits(['changeZIndex', 'enableOuter'])

 const handleMsg = (event: any) => {
  let origin = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://192.168.0.42:9528'
@ -80,6 +80,18 @@ const handleMsg = (event: any) => {
    else if(obj.type === 'setZIndex') {
      emit('changeZIndex', obj.zIndex)
    }
+    else if(obj.type === 'setOption') {
+      if(obj.top) option.value.top = obj.top
+      if(obj.left) option.value.left = obj.left
+      if(obj.scale) option.value.scale = obj.scale
+      postMsgToChild({
+        type: 'setTop&Left&Scale',
+        top: option.value.top,
+        left: option.value.left,
+        scale: option.value.scale,
+        isThereATitleComponet: option.value.isThereATitleComponet
+      })
+    }
  }
 }

@ -117,6 +129,14 @@ const handleScale = computed(() => {
  return str
 })

+watch(() => option.value.enableInner, (v) => {
+  if(!isPreview()) {
+    emit('enableOuter', !v)
+  }
+}, {
+  immediate: true
+})
+
 onMounted(() => {
  window.addEventListener('message', handleMsg);
 })
--- a/src/packages/components/Informations/Mores/index.ts
+++ b/src/packages/components/Informations/Mores/index.ts
@ -4,4 +4,5 @@ import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'

-export default [VideoConfig]
+// export default [VideoConfig]
+export default []
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
@ -128,6 +128,7 @@ const dblclickHandle = async (item: ConfigType) => {
      newComponent.chartConfig.title = item.title
      newComponent.chartConfig.chartFrame = item.chartFrame
    }
+    // 组件置底插入
    let isHead = false
    let isHeadList = ['EngineeringConfig']
    if(isHeadList.includes(newComponent.chartConfig.key)) isHead = true
--- a/src/views/chart/ContentEdit/components/EditGroup/index.vue
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue
@ -32,19 +32,22 @@
          ...useComponentStyle(item.attr, groupIndex)
        }"
      >
-        <component
-          class="edit-content-chart"
-          :class="animationsClass(item.styles.animations)"
-          :is="item.chartConfig.chartKey"
-          :chartConfig="item"
-          :themeSetting="themeSetting"
-          :themeColor="themeColor"
-          :style="{
-            ...useSizeStyle(item.attr),
-            ...getFilterStyle(item.styles),
-            ...getTransformStyle(item.styles)
-          }"
-        ></component>
+        <template #default="{enableOuter}">
+          <component
+            class="edit-content-chart"
+            :class="animationsClass(item.styles.animations)"
+            :is="item.chartConfig.chartKey"
+            :chartConfig="item"
+            :themeSetting="themeSetting"
+            :themeColor="themeColor"
+            :style="{
+              ...useSizeStyle(item.attr),
+              ...getFilterStyle(item.styles),
+              ...getTransformStyle(item.styles)
+            }"
+            @enableOuter="enableOuter"
+          ></component>
+        </template>
      </edit-shape-box>
    </edit-shape-box>
  </div>
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@ -1,6 +1,6 @@
 <template>
-  <div class="go-shape-box" :class="{ lock, hide }">
-    <slot></slot>
+  <div class="go-shape-box" :style="{pointerEvents}" :class="{ lock, hide }">
+    <slot :enableOuter="enableOuter"></slot>
    <!-- 锚点 -->
    <template v-if="!hiddenPoint">
      <div
@ -21,7 +21,7 @@
 </template>

 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, ref } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'

@ -80,6 +80,12 @@ const lock = computed(() => {
 const hide = computed(() => {
  return props.item.status.hide
 })
+
+let pointerEvents = ref('auto')
+// 设置忽略事件
+const enableOuter = (flag: boolean) => {
+  pointerEvents.value = flag ? 'auto' : 'none'
+}
 </script>

 <style lang="scss" scoped>
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@ -50,19 +50,22 @@
                @mouseleave="mouseleaveHandle($event, item)"
                @contextmenu="handleContextMenu($event, item, optionsHandle)"
              >
-                <component
-                  class="edit-content-chart"
-                  :class="animationsClass(item.styles.animations)"
-                  :is="item.chartConfig.chartKey"
-                  :chartConfig="item"
-                  :themeSetting="themeSetting"
-                  :themeColor="themeColor"
-                  :style="{
-                    ...useSizeStyle(item.attr),
-                    ...getFilterStyle(item.styles),
-                    ...getTransformStyle(item.styles)
-                  }"
-                ></component>
+                <template #default="{enableOuter}">
+                  <component
+                    class="edit-content-chart"
+                    :class="animationsClass(item.styles.animations)"
+                    :is="item.chartConfig.chartKey"
+                    :chartConfig="item"
+                    :themeSetting="themeSetting"
+                    :themeColor="themeColor"
+                    :style="{
+                      ...useSizeStyle(item.attr),
+                      ...getFilterStyle(item.styles),
+                      ...getTransformStyle(item.styles)
+                    }"
+                    @enableOuter="enableOuter"
+                  ></component>
+                </template>
              </edit-shape-box>
            </div>
          </div>