From 5aa28ad9088eb2684b1302bfcf76f787d47f3c73 Mon Sep 17 00:00:00 2001
From: huanghao1412 <huanghao1412@163.com>
Date: Tue, 27 Feb 2024 10:19:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E7=BB=84=E6=80=81mask?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                       |  2 +-
 .../CustomComponents/EngineeringConfig/index.vue  |  8 +++++++-
 .../Informations/Mores/Video/config.vue           | 10 +++++-----
 .../components/Informations/Mores/Video/index.ts  |  2 +-
 .../components/PreviewRenderGroup/index.vue       | 15 +++++++++++++--
 .../components/PreviewRenderList/index.vue        | 14 ++++++++++++--
 src/views/preview/hooks/useComInstall.hook.ts     |  2 +-
 7 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ac035805..a2037c3e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,7 +25,7 @@ import { useGetMessageByParent } from '@/utils/utils'
 
 const {getMessageByParent} = useGetMessageByParent()
 
-console.log(window.location.origin)
+// console.log(window.location.origin)
 const routerStore = useRouterStore()
 getMessageByParent('setCallByParent', (e) => {
   if(e.data.type === 'setCallByParent' && e.data.page === 'customLargeScreen') {
diff --git a/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.vue b/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.vue
index 12a4d276..3a89556a 100644
--- a/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.vue
+++ b/src/packages/components/CustomComponents/CustomComponents/EngineeringConfig/index.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, toRefs, onMounted, onUnmounted, ref, watch } from 'vue'
+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'
@@ -39,6 +39,9 @@ const iframe = ref()
 const option = computed(() => {
   return props.chartConfig.option
 })
+
+const emit = defineEmits(['changeZIndex'])
+
 const handleMsg = (event: any) => {
   let origin = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://192.168.0.42:9528'
   if (event.origin === origin) {
@@ -73,6 +76,9 @@ const handleMsg = (event: any) => {
         isThereATitleComponet: option.value.isThereATitleComponet
       })
     }
+    else if(obj.type === 'setZIndex') {
+      emit('changeZIndex', obj.zIndex)
+    }
   }
 }
 
diff --git a/src/packages/components/Informations/Mores/Video/config.vue b/src/packages/components/Informations/Mores/Video/config.vue
index 1bf730bd..b3af2581 100644
--- a/src/packages/components/Informations/Mores/Video/config.vue
+++ b/src/packages/components/Informations/Mores/Video/config.vue
@@ -12,11 +12,11 @@
         <n-input v-model:value="optionData.datasetCustom" size="small"></n-input>
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="混合模式" alone>
-      <setting-item name="使用滤色选项可以去除黑色背景">
-        <n-select v-model:value="chartStyles.blendMode" :options="BlendModeEnumList" size="small"></n-select>
-      </setting-item>
-    </setting-item-box>
+<!--    <setting-item-box name="混合模式" alone>-->
+<!--      <setting-item name="使用滤色选项可以去除黑色背景">-->
+<!--        <n-select v-model:value="chartStyles.blendMode" :options="BlendModeEnumList" size="small"></n-select>-->
+<!--      </setting-item>-->
+<!--    </setting-item-box>-->
     <setting-item-box name="控制">
       <setting-item>
         <n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox>
diff --git a/src/packages/components/Informations/Mores/Video/index.ts b/src/packages/components/Informations/Mores/Video/index.ts
index 769cfc50..8392e7b4 100644
--- a/src/packages/components/Informations/Mores/Video/index.ts
+++ b/src/packages/components/Informations/Mores/Video/index.ts
@@ -9,6 +9,6 @@ export const VideoConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.COMMON,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'video.png'
 }
diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
index 19507fb7..37c8350f 100644
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@@ -15,7 +15,8 @@
       ...getComponentAttrStyle(item.attr, groupIndex),
       ...getStatusStyle(item.status),
       ...getPreviewConfigStyle(item.preview),
-      ...getBlendModeStyle(item.styles) as any
+      ...getBlendModeStyle(item.styles) as any,
+      zIndex: zIndexMap[item.id] ? zIndexMap[item.id] : ''
     }"
     >
       <component
@@ -30,13 +31,14 @@
           ...getTransformStyle(item.styles)
         }"
         v-on="useLifeHandler(item)"
+        @changeZIndex="z => changeZIndex(item.id, z)"
       ></component>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import {PropType, ref, Ref} from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
@@ -60,6 +62,15 @@ const props = defineProps({
     required: true
   }
 })
+
+const emit = defineEmits(['changeZIndex'])
+// 设置zindex
+const zIndexMap: Ref<{ [k: string] : number | string | undefined }> = ref({})
+
+const changeZIndex = (id: string, z: number | string | undefined) => {
+  zIndexMap.value[id] = z
+  emit('changeZIndex', z)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index 7193d99f..48205edc 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -10,7 +10,8 @@
       ...getStatusStyle(item.status),
       ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any,
-      ...getSizeStyle(item.attr)
+      ...getSizeStyle(item.attr),
+      zIndex: zIndexMap[item.id] ? zIndexMap[item.id] : ''
     }"
   >
     <!-- 分组 -->
@@ -20,6 +21,7 @@
       :groupIndex="index"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
+      @changeZIndex="z => changeZIndex(item.id, z)"
     ></preview-render-group>
 
     <!-- 单组件 -->
@@ -35,13 +37,15 @@
         ...getFilterStyle(item.styles)
       }"
       v-on="bindEvent(item)"
+      @changeZIndex="z => changeZIndex(item.id, z)"
     ></component>
 <!--    v-on="useLifeHandler(item)"-->
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, onMounted } from 'vue'
+import { PropType, computed, onMounted, ref } from 'vue'
+import type { Ref } from 'vue'
 import { useChartDataPondFetch } from '@/hooks'
 import { ChartEditStorageType } from '../../index.d'
 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
@@ -76,6 +80,12 @@ const themeColor = computed(() => {
   return colorCustomMergeData[chartEditStore.editCanvasConfig.chartThemeColor]
 })
 
+// 设置zindex
+const zIndexMap: Ref<{ [k: string] : number | string | undefined }> = ref({})
+const changeZIndex = (id: string, z: number | string | undefined) => {
+  zIndexMap.value[id] = z
+}
+
 // 组件渲染结束初始化数据池
 clearMittDataPondMap()
 onMounted(() => {
diff --git a/src/views/preview/hooks/useComInstall.hook.ts b/src/views/preview/hooks/useComInstall.hook.ts
index a11e8bf8..9c897031 100644
--- a/src/views/preview/hooks/useComInstall.hook.ts
+++ b/src/views/preview/hooks/useComInstall.hook.ts
@@ -28,7 +28,7 @@ export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
       })
       show.value = true
     }
-  }, 200)
+  }, 50)
 
   return {
     show