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

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

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>

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);
 })

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 []

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

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -32,19 +32,22 @@
           ...useComponentStyle(item.attr, groupIndex)
         }"
       >
-        <component
+        <template #default="{enableOuter}">
-          class="edit-content-chart"
+          <component
-          :class="animationsClass(item.styles.animations)"
+            class="edit-content-chart"
-          :is="item.chartConfig.chartKey"
+            :class="animationsClass(item.styles.animations)"
-          :chartConfig="item"
+            :is="item.chartConfig.chartKey"
-          :themeSetting="themeSetting"
+            :chartConfig="item"
-          :themeColor="themeColor"
+            :themeSetting="themeSetting"
-          :style="{
+            :themeColor="themeColor"
-            ...useSizeStyle(item.attr),
+            :style="{
-            ...getFilterStyle(item.styles),
+              ...useSizeStyle(item.attr),
-            ...getTransformStyle(item.styles)
+              ...getFilterStyle(item.styles),
-          }"
+              ...getTransformStyle(item.styles)
-        ></component>
+            }"
+            @enableOuter="enableOuter"
+          ></component>
+        </template>
       </edit-shape-box>
     </edit-shape-box>
   </div>

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="go-shape-box" :class="{ lock, hide }">
+  <div class="go-shape-box" :style="{pointerEvents}" :class="{ lock, hide }">
-    <slot></slot>
+    <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>

src/views/chart/ContentEdit/index.vue

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