feat:合并代码

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/constant/PageDesignConstant.java

@@ -137,6 +137,11 @@ public interface PageDesignConstant {
              */
             String THEME_SWITCHER = "themeSwitcher";
 
+            /**
+             * 主题选择器
+             */
+            String THEME_SELECT = "themeSelect";
+
             /**
              * 跑马灯
              */

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSelectChart.java

@@ -0,0 +1,41 @@
+package com.gccloud.dataroom.core.module.chart.components;
+
+import com.gccloud.dataroom.core.constant.PageDesignConstant;
+import com.gccloud.dataroom.core.module.chart.bean.Chart;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+/**
+ * 主题选择器
+ * @author hongyang
+ * @version 1.0
+ * @date 2023/8/24 17:03
+ */
+@Data
+public class ThemeSelectChart extends Chart{
+
+
+    @ApiModelProperty(notes = "类型")
+    private String type = PageDesignConstant.BigScreen.Type.THEME_SELECT;
+
+    @ApiModelProperty(notes = "个性化")
+    private Customize customize = new Customize();
+
+    @Data
+    public static class Customize {
+
+        @ApiModelProperty(notes = "标题")
+        private String title;
+
+        @ApiModelProperty(notes = "字体大小")
+        private Integer fontSize = 20;
+
+        @ApiModelProperty(notes = "字体权重")
+        private Integer fontWeight = 700;
+
+        @ApiModelProperty(notes = "字体颜色")
+        private String color;
+
+    }
+
+}

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ThemeSwitcherChart.java

@@ -35,6 +35,12 @@ public class ThemeSwitcherChart extends Chart{
         @ApiModelProperty(notes = "字体颜色")
         private String color;
 
+        @ApiModelProperty(notes = "单选框字体激活状态")
+        private String activeColor;
+
+        @ApiModelProperty(notes = "单选框字体非激活状态")
+        private String inactiveColor;
+
     }
 
 }

data-room-ui/packages/BasicComponents/Marquee/index.vue

@@ -182,7 +182,6 @@ export default {
   watch: {
     speechText (val) {
       if (!this.isPreview && this.config.customize.voiceBroadcast && !this.isInit && !this.firstSpeech) {
-        console.log(4)
         this.speechBroadcast(val)
       } else {
         if (this.speech) {
@@ -242,7 +241,6 @@ export default {
           this.audio.play()
         } else {
           this.speech = null
-          console.log(1)
           this.speechBroadcast(this.config.customize.title)
           this.isInit = false
         }
@@ -279,7 +277,6 @@ export default {
       }
       // 清除上一个visibilitychange监听，重新开始监听
       if (this.voiceSwitchValue && !this.visibilityState && this.isInit) {
-        console.log(6)
         this.voiceBroadcast(config)
       }
       return config
@@ -302,7 +299,6 @@ export default {
           } else if (config.customize.title) {
             //  页面初始化不执行
             if (!this.isInit) {
-              console.log(2)
               this.speechBroadcast(config.customize.title)
             }
           }
@@ -337,7 +333,6 @@ export default {
       config = { ...this.config, ...config }
       if (config.customize.voiceBroadcast && this.isInit && !config?.option?.data?.[this.config?.dataSource?.metricField]) {
         this.isInit = false
-        console.log(3)
         this.speechBroadcast(config.customize.title)
         this.$nextTick(() => {
           this.firstSpeech = false

data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue

@@ -3,9 +3,9 @@
     class="bs-design-wrap theme-switcher-wrap"
     :class="`bs-theme-switcher-${customTheme}`"
   >
-    <div class="label-box">
-      切换主题
-    </div>
+    <!--    <div class="label-box">-->
+    <!--      切换主题-->
+    <!--    </div>-->
     <el-radio-group
       v-model="pageInfo.pageConfig.customTheme"
       size="medium "
@@ -13,14 +13,15 @@
       @change="handleChange"
     >
       <el-radio
-        border
         label="light"
+        style="color: red!important;"
+        :style="{color:config.customize.inactiveColor}"
       >
         明亮
       </el-radio>
       <el-radio
-        border
         label="dark"
+        :style="{color:config.customize.inactiveColor}"
       >
         暗黑
       </el-radio>
@@ -31,11 +32,12 @@
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import { themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
 import { mapMutations, mapState } from 'vuex'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 
 export default {
   name: 'ThemeSwitcher',
   components: {},
-  mixins: [paramsMixins],
+  mixins: [paramsMixins, refreshComponentMixin],
   props: {
     // 卡片的属性
     config: {
@@ -56,16 +58,20 @@ export default {
     }
   },
   watch: {
+    'config.customize.activeColor': {
+      handler (val) {
+        document.documentElement.style.setProperty('--radio-label-color', val)
+      },
+      immediate: true
+    }
   },
   mounted () {
+    document.documentElement.style.setProperty('--radio-label-color', this.config.customize.activeColor)
   },
   methods: {
     ...mapMutations({
       changePageInfo: 'bigScreen/changePageInfo'
     }),
-    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
-    changeStyle (config) {
-    },
     // 点击切换主题
     handleChange (val) {
       const pageInfo = this.pageInfo
@@ -97,6 +103,7 @@ export default {
     width: 100%;;
     display: flex;
     align-items: center;
+    justify-content: center;
     flex-wrap: nowrap;
     color: #fff;
     .label-box{
@@ -104,13 +111,21 @@ export default {
       margin-right: 10px;
       font-size: 14px;
     }
-    .el-radio.is-checked {
-      color: #00a0e9; /* 修改激活状态下的字体颜色 */
+    //.el-radio.is-checked {
+    //  color: red; /* 修改激活状态下的字体颜色 */
+    //}
+    //
+    ///* 修改未激活状态下的字体颜色 */
+    //.el-radio:not(.is-checked) {
+    //  color: #fff; /* 修改未激活状态下的字体颜色 */
+    //}
+    /deep/ .el-radio__input.is-checked+.el-radio__label {
+      /* 使用 CSS 变量来设置字体颜色 */
+      color: var(--radio-label-color);
     }
-
-    /* 修改未激活状态下的字体颜色 */
-    .el-radio:not(.is-checked) {
-      color: #fff; /* 修改未激活状态下的字体颜色 */
+    /deep/ .el-radio__input.is-checked .el-radio__inner{
+      background: var(--radio-label-color);
+      border-color: var(--radio-label-color);
     }
   }
 </style>

data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue

@@ -13,35 +13,42 @@
       :rules="rules"
       class="bs-el-form"
     >
-      <SettingTitle>标题</SettingTitle>
-      <div class="bs-setting-wrap">
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting :config="config" />
+      </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
         <el-form-item
-          label="标题"
+          label="激活颜色"
           label-width="100px"
-          prop="title"
         >
-          <el-input
-            v-model="config.customize.title"
-            placeholder="请输入标题"
-            clearable
+          <el-color-picker
+            v-model="config.customize.activeColor"
+            popper-class="bs-el-color-picker"
+            class="bs-el-color-picker"
+          />
+        </el-form-item>
+        <el-form-item
+          label="非激活颜色"
+          label-width="100px"
+        >
+          <el-color-picker
+            v-model="config.customize.inactiveColor"
+            popper-class="bs-el-color-picker"
+            class="bs-el-color-picker"
           />
         </el-form-item>
-      </div>
-      <SettingTitle>位置</SettingTitle>
-      <div class="lc-field-body">
-        <PosWhSetting :config="config" />
       </div>
     </el-form>
   </div>
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
-import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {
   name: 'ThemeSwitcherSetting',
   components: {
-    TextGradient,
     PosWhSetting,
     SettingTitle
   },

data-room-ui/packages/BasicComponents/ThemeSwitcher/settingConfig.js

@@ -21,10 +21,8 @@ const customConfig = {
     version: '2023071001'
   },
   customize: {
-    title: '主题切换',
-    fontSize: 20,
-    fontWeight: 700,
-    color: 'left,#ffffff,#ffffff'
+    activeColor: '#007aff', // 单选框字体激活状态
+    inactiveColor: '#bcc9d4'// 单选框字体非激活状态
   }
 
 }

data-room-ui/packages/BigScreenComponentMag/SideMenu.vue

@@ -35,15 +35,21 @@ export default {
       activeType: 'component'
     }
   },
-  created () {
-    const { globalData } = this.$router.app.$options
-    if (globalData?.componentsManagementType) {
-      this.activeType = globalData.componentsManagementType
-      this.$emit('getPageInfo', globalData.componentsManagementType)
-      // 清除this.$router.app.$options.globalData.componentsManagementType
-      delete globalData.componentsManagementType
+  watch: {
+    $route: {
+      handler (val) {
+        const { globalData } = this.$router.app.$options
+        if (globalData?.componentsManagementType) {
+          this.activeType = globalData.componentsManagementType
+          this.$emit('getPageInfo', globalData.componentsManagementType)
+          // 清除this.$router.app.$options.globalData.componentsManagementType
+          delete globalData.componentsManagementType
+        }
+      },
+      immediate: true
     }
   },
+  created () { },
   methods: {
     // 点击左侧组件
     componentHandle (com) {

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -19,7 +19,7 @@
         label="描述文字"
         @change="changeZoom"
       />
-       <CusBtn
+      <CusBtn
         :loading="saveAndPreviewLoading"
         @click.native="changeZoom('auto')"
       >
@@ -144,7 +144,7 @@ export default {
     ChooseTemplateDialog,
     AssignDialog,
     CusBtn,
-    HistoryList,
+    HistoryList
   },
   props: {
     code: {
@@ -338,14 +338,14 @@ export default {
       }
     },
     goBackManage () {
-       this.$confirm('确定返回主页面吗？未保存的配置将会丢失。', '提示', {
+      this.$confirm('确定返回主页面吗？未保存的配置将会丢失。', '提示', {
         distinguishCancelAndClose: true,
         confirmButtonText: '保存后离开页面',
         cancelButtonText: '离开页面',
         cancelButtonClass: 'cancel-btn',
         type: 'warning',
         customClass: 'bs-el-message-box'
-      }).then( async() => {
+      }).then(async () => {
         await this.save()
         await this.backManagement()
       }).catch((action) => {
@@ -355,9 +355,9 @@ export default {
       })
     },
     backManagement () {
-      this.$router.push({ path: this.pageInfo.type === 'component' ? (window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components') : (window.BS_CONFIG?.routers?.pageManagementUrl || '/home') })
       const data = { componentsManagementType: 'component' }
       this.$router.app.$options.globalData = data // 将数据存储在全局变量中
+      this.$router.push({ path: this.pageInfo.type === 'component' ? (window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components') : (window.BS_CONFIG?.routers?.pageManagementUrl || '/home') })
     },
     undo (isUndo) {
       this.undoTimeLine(isUndo)

data-room-ui/packages/BizComponent/index.vue

@@ -373,9 +373,9 @@ export default {
         })
     },
     pageJump () {
-      this.$router.push({ path: window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components' })
       const data = { componentsManagementType: 'bizComponent' }
       this.$router.app.$options.globalData = data // 将数据存储在全局变量中
+      this.$router.push({ path: window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components' })
     }
   }
 }