diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/controller/ChartDataController.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/controller/ChartDataController.java index 1b2207c2..e18735d6 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/controller/ChartDataController.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/controller/ChartDataController.java @@ -3,6 +3,7 @@ package com.gccloud.dataroom.core.module.chart.controller; import com.gccloud.dataroom.core.module.basic.dto.BasePageDTO; import com.gccloud.dataroom.core.module.basic.entity.PageEntity; import com.gccloud.dataroom.core.module.chart.bean.Chart; +import com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart; import com.gccloud.dataroom.core.module.chart.dto.ChartDataSearchDTO; import com.gccloud.dataroom.core.module.chart.service.BaseChartDataService; import com.gccloud.dataroom.core.module.chart.service.ChartMockData; @@ -83,7 +84,13 @@ public class ChartDataController { try { ChartDataVO chartDataVO = baseChartDataService.dataQuery(chart, chartDataSearchDTO); if (chartDataVO == null) { - chartDataVO = ChartMockData.getMockData(chartDataSearchDTO.getType()); + String type = chartDataSearchDTO.getType(); + if (chart instanceof ScreenFlyMapChart) { + ScreenFlyMapChart screenFlyMapChart = (ScreenFlyMapChart) chart; + ScreenFlyMapChart.Customize customize = screenFlyMapChart.getCustomize(); + type += "-" + customize.getLevel(); + } + chartDataVO = ChartMockData.getMockData(type); } return R.success(chartDataVO); } catch (Exception e) { diff --git a/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-country.json b/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-country.json new file mode 100644 index 00000000..b8aa705b --- /dev/null +++ b/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-country.json @@ -0,0 +1,121 @@ +{ + "success": false, + "data": [ + { + "from": "青海", + "lat1": 95.2402, + "lat2": 115.4004, + "lng1": 35.4199, + "lng2": 39.4688, + "to": "河北", + "type": "move_in", + "value": 90 + }, + { + "from": "安徽省", + "lat1": 117.2461, + "lat2": 115.4004, + "lng1": 32.0361, + "lng2": 39.4688, + "to": "河北省", + "type": "move_in", + "value": 10 + }, + { + "from": "新疆", + "lat1": 87.9688, + "lat2": 115.4004, + "lng1": 39.7467, + "lng2": 39.4688, + "to": "河北", + "type": "move_in", + "value": 10 + }, + { + "from": "云南", + "lat1": 101.8652, + "lat2": 115.4004, + "lng1": 25.1807, + "lng2": 39.4688, + "to": "河北", + "type": "move_in", + "value": 10 + }, + { + "from": "黑龙江", + "lat1": 128.1445, + "lat2": 115.4004, + "lng1": 48.5156, + "lng2": 39.4688, + "to": "河北", + "type": "move_in", + "value": 10 + } + ], + "columnData": { + "from": { + "type": "varchar", + "tableName": "", + "originalColumn": "from", + "aggregate": "", + "alias": "from", + "remark": "起点" + }, + "lat1": { + "type": "double", + "tableName": "", + "originalColumn": "lat1", + "aggregate": "", + "alias": "lat1", + "remark": "起点纬度" + }, + "lat2": { + "type": "double", + "tableName": "", + "originalColumn": "lat2", + "aggregate": "", + "alias": "lat2", + "remark": "终点纬度" + }, + "lng1": { + "type": "double", + "tableName": "", + "originalColumn": "lng1", + "aggregate": "", + "alias": "lng1", + "remark": "起点经度" + }, + "lng2": { + "type": "double", + "tableName": "", + "originalColumn": "lng2", + "aggregate": "", + "alias": "lng2", + "remark": "终点经度" + }, + "to": { + "type": "varchar", + "tableName": "", + "originalColumn": "to", + "aggregate": "", + "alias": "to", + "remark": "终点" + }, + "type": { + "type": "varchar", + "tableName": "", + "originalColumn": "type", + "aggregate": "", + "alias": "type", + "remark": "类型" + }, + "value": { + "type": "int", + "tableName": "", + "originalColumn": "value", + "aggregate": "", + "alias": "value", + "remark": "值" + } + } +} diff --git a/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-province.json b/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-province.json new file mode 100644 index 00000000..be149737 --- /dev/null +++ b/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-province.json @@ -0,0 +1,70 @@ +{ + "success": false, + "data": [], + "columnData": { + "from": { + "type": "varchar", + "tableName": "", + "originalColumn": "from", + "aggregate": "", + "alias": "from", + "remark": "起点" + }, + "lat1": { + "type": "double", + "tableName": "", + "originalColumn": "lat1", + "aggregate": "", + "alias": "lat1", + "remark": "起点纬度" + }, + "lat2": { + "type": "double", + "tableName": "", + "originalColumn": "lat2", + "aggregate": "", + "alias": "lat2", + "remark": "终点纬度" + }, + "lng1": { + "type": "double", + "tableName": "", + "originalColumn": "lng1", + "aggregate": "", + "alias": "lng1", + "remark": "起点经度" + }, + "lng2": { + "type": "double", + "tableName": "", + "originalColumn": "lng2", + "aggregate": "", + "alias": "lng2", + "remark": "终点经度" + }, + "to": { + "type": "varchar", + "tableName": "", + "originalColumn": "to", + "aggregate": "", + "alias": "to", + "remark": "终点" + }, + "type": { + "type": "varchar", + "tableName": "", + "originalColumn": "type", + "aggregate": "", + "alias": "type", + "remark": "类型" + }, + "value": { + "type": "int", + "tableName": "", + "originalColumn": "value", + "aggregate": "", + "alias": "value", + "remark": "值" + } + } +} diff --git a/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-world.json b/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-world.json new file mode 100644 index 00000000..d1a2f94f --- /dev/null +++ b/DataRoom/dataroom-core/src/main/resources/chart/mock/flyMap-world.json @@ -0,0 +1,111 @@ +{ + "success": false, + "data": [ + { + "from": "加拿大", + "lat1": -95.7129, + "lat2": 29.80475, + "lng1": 56.1304, + "lng2": 50.0577, + "to": "乌克兰", + "type": "move_in", + "value": 10 + }, + { + "from": "中非", + "lat1": 20.6796, + "lng1": 6.3646, + "lat2": 29.80475, + "lng2": 50.0577, + "to": "乌克兰", + "type": "move_in", + "value": 10 + }, + { + "from": "巴西", + "lat1": -53.6453, + "lng1": -10.8921, + "lat2": 29.80475, + "lng2": 50.0577, + "to": "乌克兰", + "type": "move_in", + "value": 10 + }, + { + "from": "俄罗斯", + "lat1": 85.7325, + "lng1": 67.4894, + "lat2": 29.80475, + "lng2": 50.0577, + "to": "乌克兰", + "type": "move_in", + "value": 10 + } + ], + "columnData": { + "from": { + "type": "varchar", + "tableName": "", + "originalColumn": "from", + "aggregate": "", + "alias": "from", + "remark": "起点" + }, + "lat1": { + "type": "double", + "tableName": "", + "originalColumn": "lat1", + "aggregate": "", + "alias": "lat1", + "remark": "起点纬度" + }, + "lat2": { + "type": "double", + "tableName": "", + "originalColumn": "lat2", + "aggregate": "", + "alias": "lat2", + "remark": "终点纬度" + }, + "lng1": { + "type": "double", + "tableName": "", + "originalColumn": "lng1", + "aggregate": "", + "alias": "lng1", + "remark": "起点经度" + }, + "lng2": { + "type": "double", + "tableName": "", + "originalColumn": "lng2", + "aggregate": "", + "alias": "lng2", + "remark": "终点经度" + }, + "to": { + "type": "varchar", + "tableName": "", + "originalColumn": "to", + "aggregate": "", + "alias": "to", + "remark": "终点" + }, + "type": { + "type": "varchar", + "tableName": "", + "originalColumn": "type", + "aggregate": "", + "alias": "type", + "remark": "类型" + }, + "value": { + "type": "int", + "tableName": "", + "originalColumn": "value", + "aggregate": "", + "alias": "value", + "remark": "值" + } + } +} diff --git a/data-room-ui/package-lock.json b/data-room-ui/package-lock.json index c742673e..a4a5f4d1 100644 --- a/data-room-ui/package-lock.json +++ b/data-room-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "@gcpaas/data-room-ui", - "version": "1.0.1-2023082902-Alpha", + "version": "1.0.1-2023083002-Alpha", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3397,6 +3397,27 @@ "whatwg-fetch": "^3.6.2" }, "dependencies": { + "@vue/vue-loader-v15": { + "version": "npm:vue-loader@15.10.2", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz", + "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==", + "dev": true, + "requires": { + "@vue/component-compiler-utils": "^3.1.0", + "hash-sum": "^1.0.2", + "loader-utils": "^1.1.0", + "vue-hot-reload-api": "^2.3.0", + "vue-style-loader": "^4.1.0" + }, + "dependencies": { + "hash-sum": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", + "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", + "dev": true + } + } + }, "acorn-walk": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", @@ -3468,6 +3489,26 @@ "tapable": "^2.0.0" } }, + "json5": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", + "dev": true, + "requires": { + "minimist": "^1.2.0" + } + }, + "loader-utils": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", + "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" + } + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -3685,47 +3726,6 @@ "lodash": "^4.17.4" } }, - "@vue/vue-loader-v15": { - "version": "npm:vue-loader@15.10.2", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz", - "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==", - "dev": true, - "requires": { - "@vue/component-compiler-utils": "^3.1.0", - "hash-sum": "^1.0.2", - "loader-utils": "^1.1.0", - "vue-hot-reload-api": "^2.3.0", - "vue-style-loader": "^4.1.0" - }, - "dependencies": { - "hash-sum": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", - "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", - "dev": true - }, - "json5": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", - "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", - "dev": true, - "requires": { - "minimist": "^1.2.0" - } - }, - "loader-utils": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", - "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", - "dev": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - } - } - } - }, "@vue/vue2-jest": { "version": "27.0.0", "resolved": "https://registry.npmjs.org/@vue/vue2-jest/-/vue2-jest-27.0.0.tgz", @@ -19988,6 +19988,11 @@ } } }, + "vue-player-audio": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/vue-player-audio/-/vue-player-audio-1.0.2.tgz", + "integrity": "sha512-1HH5+C7t5pKBoH5mrSQxLIxm/TLjD+GAuaJHzfGE2NehalMUFB5dLHM3k6l9xlJQQLWpgdFsMQP4sNqHy6Fl4g==" + }, "vue-router": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz", diff --git a/data-room-ui/package.json b/data-room-ui/package.json index a5dc9a74..9db5c9f4 100644 --- a/data-room-ui/package.json +++ b/data-room-ui/package.json @@ -77,6 +77,7 @@ "vue-draggable-resizable-gorkys": "^2.4.8", "vue-json-editor": "^1.4.3", "vue-json-viewer": "^2.2.22", + "vue-player-audio": "^1.0.2", "vue-router": "3.0.6", "vue-sketch-ruler": "^1.0.3", "vue-video-player": "^5.0.1", diff --git a/data-room-ui/packages/BasicComponents/Marquee/index.vue b/data-room-ui/packages/BasicComponents/Marquee/index.vue index 92ea186f..52fd18ea 100644 --- a/data-room-ui/packages/BasicComponents/Marquee/index.vue +++ b/data-room-ui/packages/BasicComponents/Marquee/index.vue @@ -1,24 +1,34 @@ @@ -87,9 +108,12 @@ import Speech from 'speak-tts' import { EventBus } from 'data-room-ui/js/utils/eventBus' import commonMixins from 'data-room-ui/js/mixins/commonMixins' import paramsMixins from 'data-room-ui/js/mixins/paramsMixins' +import linkageMixins from 'data-room-ui/js/mixins/linkageMixins' import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting' import cloneDeep from 'lodash/cloneDeep' +import IconSvg from 'data-room-ui/SvgIcon' export default { + name: 'Marquee', props: { // 卡片的属性 config: { @@ -97,8 +121,13 @@ export default { default: () => ({}) } }, + components: { + IconSvg + }, data () { return { + showVoiceSwitch: false, + voiceSwitchValue: true, customClass: {}, attributeName: { right: 'x', @@ -125,16 +154,52 @@ export default { innerData: null, // 音频播放 audio: null, + // 音频地址 + isPlayAudio: null, // 语音播报 speech: null, - // 语音播报定时器 - speechTimer: null + isInit: false, + numberBroadcasts: 0 } }, computed: { - + // speechText + speechText () { + return this.config.customize.title || '' + }, + isPreview () { + return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview') + }, + audioSrc () { + return this.config?.option?.data?.[this.config?.dataSource?.metricField] || '' + } }, - mixins: [paramsMixins, commonMixins], + watch: { + speechText (val) { + if (!this.isPreview && this.config.customize.voiceBroadcast && !this.isInit) { + this.speechBroadcast(val) + } else { + if (this.speech) { + this.speech = null + } + } + }, + deep: true, + audioSrc (val) { + if (this.config.customize.voiceBroadcast) { + if (this.audio) { + this.audio.src = val + this.audio.play() + } + } else { + if (this.aduio) { + this.aduio.pause() + this.aduio = null + } + } + } + }, + mixins: [paramsMixins, commonMixins, linkageMixins], mounted () { this.chartInit() // 如果点击了生成图片，则先关闭动画 @@ -145,15 +210,43 @@ export default { EventBus.$on('startMarquee', () => { this.isAnimate = true }) + // 如果删除了组件 + EventBus.$on('deleteComponent', (codes) => { + if (codes.includes(this.config.code)) { + if (this.audio) { + this.audio.pause() + this.audio = null + } + if (this.speech) { + this.speech = null + } + } + }) + this.speech = null + this.isInit = true + // 如果是预览模式的话，则弹出对话框，当前大屏存在语音播报，是否开启语音播报 + if (this.isPreview && this.config.customize.voiceBroadcast) { + this.$confirm('当前大屏存在语音播报，是否开启语音播报？若开启请点击确认或者回车', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + customClass: 'bs-el-message-box' + }).then(() => { + if (this.audioSrc) { + this.audio.play() + } else { + this.speech = null + this.speechBroadcast(this.config.customize.title) + this.isInit = false + } + }).catch(() => { }) + } document.addEventListener('visibilitychange', this.handleVisibilityChange) }, beforeDestroy () { EventBus.$off('stopMarquee') EventBus.$off('startMarquee') - // 销毁语音播报定时器 - if (this.speechTimer) { - clearInterval(this.speechTimer) - } + EventBus.$off('deleteComponent') }, methods: { dataFormatting (config, data) { @@ -166,7 +259,7 @@ export default { // 此处函数处理data eval(config.dataHandler) } catch (e) { - console.error(e) + console.info(e) } } config.option.data = data @@ -177,55 +270,53 @@ export default { // 数据返回失败则赋前端的模拟数据 config.option.data = [] } + // 清除上一个visibilitychange监听，重新开始监听 + if (this.voiceSwitchValue) { + this.voiceBroadcast(config) + } return config }, // 语音播报 voiceBroadcast (config) { - if (this.innerData) { + const innerData = this.innerData || config + if (innerData) { if (config.customize.voiceBroadcast) { - if (this.innerData.dataSource.businessKey && this.innerData.option.data[this.innerData.dataSource.metricField]) { - // 如果audio存在，先销毁这个实例，或者替换它的URL - if (this.audio) { - this.audio.pause() - this.audio = null + if (innerData?.dataSource?.businessKey && innerData?.option?.data[this.innerData.dataSource.metricField]) { + // 如果aduio存在，先销毁这个实例，或者替换它的URL + if (this.aduio) { + this.aduio.pause() + this.aduio = null } - this.audio = new Audio() - this.audio.src = this.innerData.option.data[this.innerData.dataSource.metricField] + // 获取音频元素 + this.audio = this.$refs[`audioPlayer${config.code}`] + this.audio.src = innerData.option.data[this.innerData.dataSource.metricField] this.audio.play() } else if (config.customize.title) { - this.speechBroadcast(config.customize.title) - // 根据配置的时间，定时播报，第一次播报后，再定时播报 - this.speechBroadcast(config.customize.title) - if (config.customize.dur) { - this.speechTimer = setInterval(() => { - this.speechBroadcast(config.customize.title) - }, config.customize.dur * 1000) + // 页面初始化不执行 + if (!this.isInit) { + this.speechBroadcast(config.customize.title) } } } else { - if (this.audio) { - this.audio.pause() - this.audio = null - } - } - } else { - if (config.customize.voiceBroadcast) { - this.speech = new Speech() - if (config.customize.dur) { - this.speechBroadcast(config.customize.title) - this.speechTimer = setInterval(() => { - this.speechBroadcast(config.customize.title) - }, config.customize.dur * 1000) + if (this.aduio) { + this.aduio.pause() + this.aduio = null } } } }, // 语音播报 speechBroadcast (text) { + this.numberBroadcasts = 0 + this.speech = new Speech() + this.speech.setLanguage('zh-CN') + this.speech.pitch = 1 + this.speech.init() if (this.speech.hasBrowserSupport()) { - this.speech.setLanguage('zh-CN') - this.speech.init() - this.speech.speak({ text: text }) + if (this.numberBroadcasts < 1) { + this.speech.speak({ text: text }) + this.numberBroadcasts += 1 + } } else { this.$message({ message: '您的浏览器不支持语音播报', @@ -235,7 +326,10 @@ export default { }, changeStyle (config) { config = { ...this.config, ...config } - this.voiceBroadcast(config) + if (config.customize.voiceBroadcast && this.isInit && !this.audioSrc) { + this.isInit = false + this.speechBroadcast(config.customize.title) + } // 样式改变时更新主题配置 config.theme = settingToTheme(cloneDeep(config), this.customTheme) this.changeChartConfig(config) @@ -250,7 +344,7 @@ export default { this.audio.pause() } if (this.speech) { - this.speech.pause() + this.speech = null } } else { if (this.audio) { @@ -260,6 +354,38 @@ export default { this.speech.resume() } } + }, + voiceSwitch () { + this.voiceSwitchValue = !this.voiceSwitchValue + if (this.voiceSwitchValue) { + if (this.audio) { + try { + this.audio.play() + } catch (e) { + console.info(e) + } + } + if (this.speech) { + this.speech.resume() + } + } else { + if (this.audio) { + try { + this.audio.pause() + } catch (e) { + console.info(e) + } + } + if (this.speech) { + this.speech.pause() + } + } + }, + mouseenter () { + this.showVoiceSwitch = true + }, + mouseleave () { + this.showVoiceSwitch = false } } } @@ -269,8 +395,10 @@ export default { .marquee-box { width: 100%; height: 100%; + user-select: none; white-space: nowrap; overflow: hidden; + position: relative; .scroll-area { width: 100%; @@ -287,10 +415,18 @@ export default { } } } + .icon { position: relative; top: 0; // 清除浮动 } } +.voice-switch{ + position: absolute; + cursor: pointer; + bottom: 5px; + color: #fff; +} + diff --git a/data-room-ui/packages/BasicComponents/Marquee/setting.vue b/data-room-ui/packages/BasicComponents/Marquee/setting.vue index a6362d55..f16d62b1 100644 --- a/data-room-ui/packages/BasicComponents/Marquee/setting.vue +++ b/data-room-ui/packages/BasicComponents/Marquee/setting.vue @@ -66,6 +66,8 @@ v-model="config.customize.direction" class="bs-el-select" popper-class="bs-el-select" + filterable + clearable > - + + + + + {{ icbroadcaston.label }} + + import SettingTitle from 'data-room-ui/SettingTitle/index.vue' import ColorPicker from 'data-room-ui/ColorPicker/index.vue' -import IconPicker from 'data-room-ui/IconPicker/index.vue' import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue' +import IconSvg from 'data-room-ui/SvgIcon' export default { name: 'TextSetting', components: { PosWhSetting, ColorPicker, SettingTitle, - IconPicker + IconSvg }, data () { return { @@ -352,6 +381,52 @@ export default { value: 'right' } ], + broadcastList: [ + { + label: '广播1', + value: 'broadcast-1' + }, + { + label: '广播2', + value: 'broadcast-2' + }, + { + label: '广播3', + value: 'broadcast-3' + }, + { + label: '广播4', + value: 'broadcast-4' + }, + { + label: '广播5', + value: 'broadcast-5' + }, + { + label: '广播6', + value: 'broadcast-6' + }, + { + label: '广播7', + value: 'broadcast-7' + }, + { + label: '广播8', + value: 'broadcast-8' + }, + { + label: '广播9', + value: 'broadcast-9' + }, + { + label: '广播10', + value: 'broadcast-10' + }, + { + label: '广播11', + value: 'broadcast-11' + } + ], rules: { title: [ { required: true, message: '请输入标题', trigger: 'blur' } @@ -383,7 +458,7 @@ export default { @import '../../assets/style/bsTheme.scss'; .bs-setting-wrap { - padding:12px 16px; + padding: 12px 16px; } .lc-field-body { diff --git a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue index 94504571..f4e2c8a3 100644 --- a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue +++ b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue @@ -46,7 +46,10 @@ export default { computed: { ...mapState({ pageInfo: (state) => state.bigScreen.pageInfo - }) + }), + isPreview () { + return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview') + } }, data () { return { @@ -68,6 +71,22 @@ 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) + } + }) + if (!this.isPreview) { + const themeLabel = val === 'light' ? '明亮' : '暗黑' + const htmlStr = `当前已切换到${themeLabel}主题，颜色设置针对当前主题生效` + this.$notify({ + title: '注意', + dangerouslyUseHTMLString: true, + message: htmlStr, + customClass: 'ds-el-notify', + type: 'warning' + }) + } } } } diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue index 64836437..8c52919f 100644 --- a/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue +++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue @@ -113,7 +113,7 @@ export default { methods: { init () { this.dialogVisible = true - this.imgUrl = this.form.customTheme === 'dark' ? this.form.bg : this.form.lightBg + this.imgUrl = this.form.customTheme === 'light' ? this.form.bg : this.form.lightBg this.fileList = this.imgUrl ? [{ name: '背景图', diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue index cdcdd2bf..24d8535a 100644 --- a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue +++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue @@ -188,10 +188,6 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue' import ColorPicker from 'data-room-ui/ColorPicker/index.vue' import BgImg from './BgImgDialog.vue' import { mapState, mapMutations } from 'vuex' -import { getThemeConfig } from 'data-room-ui/js/api/bigScreenApi' -// import _ from 'lodash' -import cloneDeep from 'lodash/cloneDeep' -import { G2 } from '@antv/g2plot' import { themeToSetting } from 'data-room-ui/js/utils/themeFormatting' export default { name: 'OverallSetting', @@ -288,7 +284,7 @@ export default { bg: '', bgColor: '#151a26', // 背景色 lightBg: '', - lightBgColor: '#151a26', + lightBgColor: '#f5f7fa', opacity: 100, customTheme: 'dark', themeJson: {}, @@ -317,12 +313,15 @@ export default { pageInfo: state => state.bigScreen.pageInfo, config: state => state.bigScreen.activeItemConfig }), + isPreview () { + return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview') + }, // 根据主题色来决定背景色和背景图绑定什么变量 currentBgColor () { - return this.form.customTheme === 'dark' ? 'bgColor' : 'lightBgColor' + return this.form.customTheme === 'light' ? 'lightBgColor' : 'bgColor' }, currentBg () { - return this.form.customTheme === 'dark' ? 'bg' : 'lightBgColor' + return this.form.customTheme === 'light' ? 'lightBgColor' : 'bg' }, dsValue () { return this.form.cacheDataSets?.map(dSet => ({ @@ -378,6 +377,22 @@ export default { const pageInfo = this.pageInfo pageInfo.chartList = themeToSetting(pageInfo.chartList, theme) this.changePageInfo(pageInfo) + pageInfo.chartList.forEach(chart => { + if (chart.type === 'remoteComponent') { + this.$emit('styleHandler', chart) + } + }) + if (!this.isPreview) { + const themeLabel = theme === 'light' ? '明亮' : '暗黑' + const htmlStr = `当前已切换到${themeLabel}主题，颜色设置针对当前主题生效` + this.$notify({ + title: '注意', + dangerouslyUseHTMLString: true, + message: htmlStr, + customClass: 'ds-el-notify', + type: 'warning' + }) + } }, init () { if (!this.pageInfo.pageConfig.refreshConfig) { @@ -432,36 +447,6 @@ export default { initResolution () { this.resolutionRatioValue = this.pageInfo.pageConfig.w + '*' + this.pageInfo.pageConfig.h }, - getThemeConfig (themeName) { - // this.changePageLoading(true) - if (!['dark', 'light', 'auto'].includes(themeName)) { - getThemeConfig().then(res => { - this.form.themeJson = res - this.changePageConfig(cloneDeep(this.form)) - // 统一注册主题 - const { registerTheme } = G2 - registerTheme(themeName, { ...res.chart }) - this.changeChart(themeName) - }) - } else { - this.form.themeJson = {} - this.changePageConfig(this.form) - this.changeChart(themeName) - } - }, - // 改变 - // changeChart (themeName) { - // // 统一改变组件的主题 - // const newChartList = cloneDeep(this.pageInfo.chartList) - // const chartList = newChartList.map(chart => { - // chart.option.theme = themeName - // chart.key = new Date().getTime() - // // this.changeChartKey(chart.code) - // return chart - // }) - // // 可能需要强制性更新chartList - // this.changeLayout(chartList) - // }, // 新增数据集 addCacheDataSet () { @@ -488,7 +473,7 @@ export default { this.$emit('close') }, timerEmptyState () { - return this.pageInfo.chartList.every(chart => chart.dataSource?.businessKey === '') + return this.pageInfo.chartList.every(chart => chart.dataSource?.businessKey === '' && chart.type !== 'marquee') } } } @@ -686,4 +671,20 @@ export default { height: calc(100% - 50px); overflow-y: auto; } + + + 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" /> @@ -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 308d0950..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" >