feat:修复业务组件和系统组件主题设置的问题

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

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

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

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

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

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()

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>

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')