From 847f9d21b7f2d8114a795c6d8d700642589c9d51 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Fri, 1 Sep 2023 14:03:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E5=A4=8D=E4=B8=9A=E5=8A=A1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=92=8C=E7=B3=BB=E7=BB=9F=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=AE=BE=E7=BD=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/ThemeSwitcher/index.vue      |  5 +++++
 .../BigScreenDesign/OverallSetting/index.vue     |  2 +-
 .../packages/BigScreenDesign/SettingPanel.vue    |  4 ++++
 data-room-ui/packages/BigScreenDesign/index.vue  | 11 ++++++++++-
 data-room-ui/packages/BigScreenRun/index.vue     | 10 ++++++++++
 data-room-ui/packages/RemoteComponents/index.vue | 16 ----------------
 data-room-ui/packages/Render/RenderCard.vue      |  9 ++++++++-
 data-room-ui/packages/Render/index.vue           |  9 +++++++++
 8 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue
index 94504571..ecda5352 100644
--- a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue
+++ b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue
@@ -68,6 +68,11 @@ export default {
       const pageInfo = this.pageInfo
       pageInfo.chartList = themeToSetting(pageInfo.chartList, val)
       this.changePageInfo(pageInfo)
+      pageInfo.chartList.forEach(chart => {
+        if (chart.type === 'remoteComponent') {
+          this.$emit('styleHandler', chart)
+        }
+      })
     }
   }
 }
diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue
index 6c8c4035..7f5ec81a 100644
--- a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue
@@ -376,7 +376,7 @@ export default {
       this.changePageInfo(pageInfo)
       pageInfo.chartList.forEach(chart => {
         if (chart.type === 'remoteComponent') {
-          // this.$refs['remoteComponent' + chart.code]?.changeStyle(chart)
+          this.$emit('styleHandler', chart)
         }
       })
     },
diff --git a/data-room-ui/packages/BigScreenDesign/SettingPanel.vue b/data-room-ui/packages/BigScreenDesign/SettingPanel.vue
index e4c82b24..f10d5c65 100644
--- a/data-room-ui/packages/BigScreenDesign/SettingPanel.vue
+++ b/data-room-ui/packages/BigScreenDesign/SettingPanel.vue
@@ -25,6 +25,7 @@
         v-if="!chartSettingShow"
         ref="OverallSetting"
         @close="close"
+        @styleHandler="styleHandler"
       />
     </div>
   </div>
@@ -78,6 +79,9 @@ export default {
   },
   mounted () { },
   methods: {
+    styleHandler (config) {
+      this.$emit('styleHandler', config)
+    },
     toggleShow () {
       this.$emit('update:rightVisiable', !this.rightVisiable)
     },
diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue
index 9118a393..44e556aa 100644
--- a/data-room-ui/packages/BigScreenDesign/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/index.vue
@@ -87,6 +87,7 @@
         @updateSetting="updateSetting"
         @updateDataSetting="updateDataSetting"
         @updatePage="updatePage"
+        @styleHandler="styleHandler"
       >
         <template #dataSetSelect="{ value }">
           <slot
@@ -396,9 +397,17 @@ export default {
         })
         .catch(() => {})
     },
+    // 切换主题时针对远程组件触发样式修改的方法
+    styleHandler (config) {
+      this.$nextTick(() => {
+        this.$refs.Render?.$refs['RenderCard' + config.code][0]?.$refs[
+          config.code
+        ]?.changeStyle(cloneDeep(config), true)
+      })
+    },
     // 自定义属性更新
     updateSetting (config) {
-      if (config.type === 'map' || config.type === 'video' ||config.type === 'flyMap') {
+      if (config.type === 'map' || config.type === 'video' || config.type === 'flyMap') {
         config.key = new Date().getTime()
       }
       this.changeChartConfig(cloneDeep(config))
diff --git a/data-room-ui/packages/BigScreenRun/index.vue b/data-room-ui/packages/BigScreenRun/index.vue
index 7f117c1d..c36b8afc 100644
--- a/data-room-ui/packages/BigScreenRun/index.vue
+++ b/data-room-ui/packages/BigScreenRun/index.vue
@@ -26,6 +26,7 @@
             ref="RenderCardRef"
             :key="chart.key"
             :config="chart"
+            @styleHandler="styleHandler"
           />
         </div>
       </div>
@@ -38,6 +39,7 @@ import RenderCard from 'data-room-ui/Render/RenderCard.vue'
 import { mapActions, mapMutations, mapState } from 'vuex'
 import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'
 import NotPermission from 'data-room-ui/NotPermission'
+import cloneDeep from 'lodash/cloneDeep'
 export default {
   name: 'BigScreenRun',
   components: {
@@ -168,6 +170,14 @@ export default {
       'changePageConfig',
       'changeChartConfig'
     ]),
+    // 切换主题时针对远程组件触发样式修改的方法
+    styleHandler (config) {
+      this.chartList.forEach((chart, index) => {
+        if (chart.code === config.code) {
+          this.$refs.RenderCardRef[index].$refs[chart.code].changeStyle(config)
+        }
+      })
+    },
     permission () {
       this.$dataRoomAxios.get(`/bigScreen/permission/check/${this.pageCode}`).then(res => {
         this.hasPermission = res
diff --git a/data-room-ui/packages/RemoteComponents/index.vue b/data-room-ui/packages/RemoteComponents/index.vue
index f24580f8..dffecb5c 100644
--- a/data-room-ui/packages/RemoteComponents/index.vue
+++ b/data-room-ui/packages/RemoteComponents/index.vue
@@ -47,22 +47,6 @@ export default {
     }
   },
   watch: {
-    // 监听主题变化手动触发组件配置更新
-    'config.option.theme': {
-      handler (val) {
-        if (val) {
-          this.changeStyle(this.config, true)
-        }
-      }
-    }
-    // customTheme: {
-    //   handler (val) {
-    //     if (val) {
-    //       this.changeStyle(this.config, true)
-    //     }
-    //   },
-    //   deep: true
-    // }
   },
   created () {
     this.getRemoteComponent()
diff --git a/data-room-ui/packages/Render/RenderCard.vue b/data-room-ui/packages/Render/RenderCard.vue
index 8fd9ce72..c10e9c31 100644
--- a/data-room-ui/packages/Render/RenderCard.vue
+++ b/data-room-ui/packages/Render/RenderCard.vue
@@ -12,6 +12,7 @@
       :ref="config.code"
       :key="config.key"
       :config="config"
+      @styleHandler="styleHandler"
     />
   </div>
 </template>
@@ -24,6 +25,7 @@ import { dataInit, destroyedEvent } from 'data-room-ui/js/utils/eventBus'
 import CustomComponent from '../PlotRender/index.vue'
 import Svgs from '../Svgs/index.vue'
 import RemoteComponent from 'data-room-ui/RemoteComponents/index.vue'
+import cloneDeep from 'lodash/cloneDeep'
 const components = {}
 for (const key in pcComponent) {
   if (Object.hasOwnProperty.call(pcComponent, key)) {
@@ -55,6 +57,7 @@ export default {
   },
   computed: {},
   mounted () {
+    console.log(this.$refs)
     // 调用初始化方法
     dataInit(this)
   },
@@ -65,7 +68,11 @@ export default {
     ...mapMutations('bigScreen', [
       'changeChartConfig'
     ]),
-    resolveComponentType
+    resolveComponentType,
+    // 切换主题时针对远程组件触发样式修改的方法
+    styleHandler (config) {
+      this.$emit('styleHandler', config)
+    }
   }
 }
 </script>
diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue
index c42d95c6..9b2fc31c 100644
--- a/data-room-ui/packages/Render/index.vue
+++ b/data-room-ui/packages/Render/index.vue
@@ -54,6 +54,7 @@
         <RenderCard
           :ref="'RenderCard' + chart.code"
           :config="chart"
+          @styleHandler="styleHandler"
         />
       </Configuration>
     </vdr>
@@ -165,6 +166,14 @@ export default {
       'setPresetLine',
       'saveTimeLine'
     ]),
+    // 切换主题时针对远程组件触发样式修改的方法
+    styleHandler (config) {
+      this.$nextTick(() => {
+        this.$refs['RenderCard' + config.code][0]?.$refs[
+          config.code
+        ]?.changeStyle(cloneDeep(config), true)
+      })
+    },
     // 获取到后端传来的主题样式并进行修改
     styleSet () {
       const style = document.createElement('style')