From 4b031c0d39360c2d6b4c808994236bff15c864ec Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Fri, 1 Sep 2023 09:36:07 +0800 Subject: [PATCH 1/9] =?UTF-8?q?feat:=E4=BF=AE=E5=A4=8D=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E6=97=A7=E6=95=B0=E6=8D=AE=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data-room-ui/packages/js/store/actions.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/data-room-ui/packages/js/store/actions.js b/data-room-ui/packages/js/store/actions.js index 4c7c2686..8bd975d7 100644 --- a/data-room-ui/packages/js/store/actions.js +++ b/data-room-ui/packages/js/store/actions.js @@ -51,7 +51,13 @@ export default { export function handleResData (data) { let pageInfo = {} if (data.pageConfig) { - pageInfo = data + pageInfo = { + ...data, + pageConfig: { + ...data.pageConfig, + lightBgColor: data.pageConfig.lightBgColor || '#151a26' + } + } } else { pageInfo = { ...data, From 33e08eeb7ac61f5fb9cc16c54d812c3e972c5945 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Fri, 1 Sep 2023 10:26:06 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=E5=88=A0=E9=99=A4=E4=B8=BB=E9=A2=98mo?= =?UTF-8?q?ck=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BigScreenDesign/OverallSetting/index.vue | 37 ++----------------- .../packages/BigScreenDesign/index.vue | 18 +-------- data-room-ui/packages/BigScreenRun/index.vue | 18 +-------- data-room-ui/packages/js/api/bigScreenApi.js | 4 -- 4 files changed, 6 insertions(+), 71 deletions(-) diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue index cdcdd2bf..c94db75d 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', @@ -378,6 +374,9 @@ export default { const pageInfo = this.pageInfo pageInfo.chartList = themeToSetting(pageInfo.chartList, theme) this.changePageInfo(pageInfo) + pageInfo.chartList.forEach(chart => { + // if (chart.type === 'remoteComponent') + }) }, init () { if (!this.pageInfo.pageConfig.refreshConfig) { @@ -432,36 +431,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 () { diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue index 308d0950..9118a393 100644 --- a/data-room-ui/packages/BigScreenDesign/index.vue +++ b/data-room-ui/packages/BigScreenDesign/index.vue @@ -127,9 +127,8 @@ import PageTopSetting from './PageDesignTop.vue' import Render from '../Render' import { mapActions, mapMutations, mapState } from 'vuex' import SketchDesignRuler from 'data-room-ui/BigScreenDesign/RulerTool/SketchRuler.vue' -import { G2 } from '@antv/g2plot' import multipleSelectMixin from 'data-room-ui/js/mixins/multipleSelectMixin' -import { getThemeConfig, getScreenInfo } from 'data-room-ui/js/api/bigScreenApi' +import { getScreenInfo } from 'data-room-ui/js/api/bigScreenApi' import MouseSelect from './MouseSelect/index.vue' import cloneDeep from 'lodash/cloneDeep' import { randomString } from '../js/utils' @@ -367,20 +366,7 @@ export default { this.changePageLoading(true) this.initLayout(this.pageCode) .then(() => { - const themeName = this.pageConfig.customTheme - if (!['dark', 'light', 'auto'].includes(themeName)) { - getThemeConfig().then((res) => { - // 初始化时如果就是自定义主题则统一注册 - const { registerTheme } = G2 - registerTheme(themeName, { ...res.chart }) - const pageConfig = this.pageConfig - pageConfig.themeJson = res - this.changePageConfig(pageConfig) - this.changePageLoading(false) - }) - } else { - this.changePageLoading(false) - } + this.changePageLoading(false) }) .finally(() => { setTimeout(() => { diff --git a/data-room-ui/packages/BigScreenRun/index.vue b/data-room-ui/packages/BigScreenRun/index.vue index 9bc0302e..7f117c1d 100644 --- a/data-room-ui/packages/BigScreenRun/index.vue +++ b/data-room-ui/packages/BigScreenRun/index.vue @@ -36,9 +36,7 @@ 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 @@ @@ -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') From 6e28e876ef7d3e6b836a964e52acbc8ab2cafb8d Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Fri, 1 Sep 2023 15:02:34 +0800 Subject: [PATCH 7/9] =?UTF-8?q?feat:=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E6=97=B6=E6=B7=BB=E5=8A=A0=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BasicComponents/ThemeSwitcher/index.vue | 16 +++++++++- .../BigScreenDesign/OverallSetting/index.vue | 30 +++++++++++++++++++ .../packages/assets/style/dist/bsTheme.css | 2 +- 3 files changed, 46 insertions(+), 2 deletions(-) diff --git a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue index ecda5352..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 { @@ -73,6 +76,17 @@ export default { 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/index.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue index 7f5ec81a..16b1eac1 100644 --- a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue +++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue @@ -313,6 +313,9 @@ 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' @@ -379,6 +382,17 @@ export default { 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) { @@ -657,4 +671,20 @@ export default { height: calc(100% - 50px); overflow-y: auto; } + + + diff --git a/data-room-ui/packages/assets/style/dist/bsTheme.css b/data-room-ui/packages/assets/style/dist/bsTheme.css index 6ce768d5..806a04b8 100644 --- a/data-room-ui/packages/assets/style/dist/bsTheme.css +++ b/data-room-ui/packages/assets/style/dist/bsTheme.css @@ -413,4 +413,4 @@ .bs-context-menu-class .menu_item__available:hover { background: var(--bs-el-background-3) !important; color: var(--bs-el-hover) !important; -} \ No newline at end of file +} From d9369ce1ec134aec9d35106eae6942fe901d95af Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Fri, 1 Sep 2023 15:08:28 +0800 Subject: [PATCH 8/9] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BigScreenDesign/OverallSetting/BgImgDialog.vue | 2 +- .../packages/BigScreenDesign/OverallSetting/index.vue | 4 ++-- data-room-ui/packages/BigScreenRun/index.vue | 8 ++++---- data-room-ui/packages/Render/index.vue | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) 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 16b1eac1..629367e5 100644 --- a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue +++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue @@ -318,10 +318,10 @@ export default { }, // 根据主题色来决定背景色和背景图绑定什么变量 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 => ({ diff --git a/data-room-ui/packages/BigScreenRun/index.vue b/data-room-ui/packages/BigScreenRun/index.vue index c36b8afc..0b61dc5b 100644 --- a/data-room-ui/packages/BigScreenRun/index.vue +++ b/data-room-ui/packages/BigScreenRun/index.vue @@ -94,8 +94,8 @@ export default { previewWrapStyle () { const bg = this.fitMode !== 'none' ? { - backgroundColor: this.fitPageConfig.customTheme === 'dark' ? this.fitPageConfig.bgColor : this.fitPageConfig.lightBgColor, - backgroundImage: this.fitPageConfig.customTheme === 'dark' ? `url(${this.fitPageConfig.bg})` : `url(${this.fitPageConfig.lightBg})`, + backgroundColor: this.fitPageConfig.customTheme === 'light' ? this.fitPageConfig.lightBgColor : this.fitPageConfig.bgColor, + backgroundImage: this.fitPageConfig.customTheme === 'light' ? `url(${this.fitPageConfig.lightBg})` : `url(${this.fitPageConfig.bg})`, backgroundSize: 'cover' } : {} @@ -116,8 +116,8 @@ export default { const bg = this.fitMode === 'none' ? { - backgroundColor: this.fitPageConfig.customTheme === 'dark' ? this.fitPageConfig.bgColor : this.fitPageConfig.lightBgColor, - backgroundImage: this.fitPageConfig.customTheme === 'dark' ? `url(${this.fitPageConfig.bg})` : `url(${this.fitPageConfig.lightBg})`, + backgroundColor: this.fitPageConfig.customTheme === 'light' ? this.fitPageConfig.lightBgColor : this.fitPageConfig.bgColor, + backgroundImage: this.fitPageConfig.customTheme === 'light' ? `url(${this.fitPageConfig.lightBg})` : `url(${this.fitPageConfig.bg})`, backgroundSize: 'cover' } : {} diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue index 9b2fc31c..66dc14cb 100644 --- a/data-room-ui/packages/Render/index.vue +++ b/data-room-ui/packages/Render/index.vue @@ -6,8 +6,8 @@ :style="{ width: pageInfo.pageConfig.w + 'px', height: pageInfo.pageConfig.h + 'px', - backgroundColor:pageInfo.pageConfig.customTheme ==='dark' ? pageInfo.pageConfig.bgColor : pageInfo.pageConfig.lightBgColor, - backgroundImage:pageInfo.pageConfig.customTheme ==='dark' ? `url(${pageInfo.pageConfig.bg})`:`url(${pageInfo.pageConfig.lightBg})` + backgroundColor:pageInfo.pageConfig.customTheme ==='light' ? pageInfo.pageConfig.lightBgColor:pageInfo.pageConfig.bgColor , + backgroundImage:pageInfo.pageConfig.customTheme ==='light' ? `url(${pageInfo.pageConfig.lightBg})`:`url(${pageInfo.pageConfig.bg})` }" @drop="drop($event)" @dragover.prevent From 21dce32b30dc3fbb4adf2517a8eaa260e3749fa3 Mon Sep 17 00:00:00 2001 From: "wu.jian2" Date: Fri, 1 Sep 2023 16:16:52 +0800 Subject: [PATCH 9/9] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=B7=91?= =?UTF-8?q?=E9=A9=AC=E7=81=AF=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=B4=E6=8D=A2?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=9B=BE=E6=A0=87=E8=B5=84=E6=BA=90=EF=BC=8C?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=AD=E9=9F=B3=E6=9A=82=E5=81=9C=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=88=A0=E9=99=A4=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=90=8E=EF=BC=8C=E8=AF=AD=E9=9F=B3=E6=9C=AA=E5=85=B3?= =?UTF-8?q?=E9=97=AD=E7=9A=84=E6=83=85=E5=86=B5=EF=BC=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE=E5=AE=9A=E6=97=B6=E5=99=A8?= =?UTF-8?q?=E5=90=8E=EF=BC=8C=E7=A6=BB=E5=BC=80=E5=BD=93=E5=89=8D=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E8=AF=AD=E9=9F=B3=E4=BB=8D=E5=9C=A8=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data-room-ui/package-lock.json | 89 ++++--- data-room-ui/package.json | 1 + .../BasicComponents/Marquee/index.vue | 252 ++++++++++++++---- .../BasicComponents/Marquee/setting.vue | 83 +++++- .../BigScreenDesign/OverallSetting/index.vue | 2 +- .../BigScreenDesign/PageDesignTop.vue | 1 - .../Layout/BigScreenHomeLayout/index.vue | 11 +- data-room-ui/packages/SvgIcon/index.vue | 5 +- .../images/alignIcon/svg/broadcast-1.svg | 1 + .../images/alignIcon/svg/broadcast-10.svg | 1 + .../images/alignIcon/svg/broadcast-11.svg | 1 + .../images/alignIcon/svg/broadcast-2.svg | 1 + .../images/alignIcon/svg/broadcast-3.svg | 1 + .../images/alignIcon/svg/broadcast-4.svg | 1 + .../images/alignIcon/svg/broadcast-5.svg | 1 + .../images/alignIcon/svg/broadcast-6.svg | 1 + .../images/alignIcon/svg/broadcast-7.svg | 1 + .../images/alignIcon/svg/broadcast-8.svg | 1 + .../images/alignIcon/svg/broadcast-9.svg | 1 + .../packages/js/mixins/commonMixins.js | 8 +- data-room-ui/packages/js/store/mutations.js | 12 +- 21 files changed, 360 insertions(+), 115 deletions(-) create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-1.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-10.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-11.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-2.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-3.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-4.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-5.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-6.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-7.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-8.svg create mode 100644 data-room-ui/packages/assets/images/alignIcon/svg/broadcast-9.svg 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/BigScreenDesign/OverallSetting/index.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue index 629367e5..24d8535a 100644 --- a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue +++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue @@ -473,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') } } } diff --git a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue index a384925b..6a68a8ba 100644 --- a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue +++ b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue @@ -238,7 +238,6 @@ export default { }), changeZoom (val) { this.$emit('changeZoom', val) - // console.log(val) }, setAlign (command) { const pageInfo = cloneDeep(this.pageInfo) diff --git a/data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue b/data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue index bebe420a..1acf78af 100644 --- a/data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue +++ b/data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue @@ -16,12 +16,13 @@ /> Fork me on Gitee @@ -45,6 +46,8 @@ export default { data () { return { // 和此处路由保持一致，将会激活tab，请按需更改 + giteeHref: '', + giteeSvg: '' } }, computed: { @@ -115,6 +118,10 @@ export default { } }, created () {}, + mounted () { + this.giteeHref = 'https://gitee.com/gcpaas/DataRoom' + this.giteeSvg = 'https://gitee.com/gcpaas/DataRoom/widgets/widget_1.svg?color=007bff' + }, methods: { changeTab (tab) { if (this.$route.query.edit) { diff --git a/data-room-ui/packages/SvgIcon/index.vue b/data-room-ui/packages/SvgIcon/index.vue index cf0664e7..e30d5a07 100644 --- a/data-room-ui/packages/SvgIcon/index.vue +++ b/data-room-ui/packages/SvgIcon/index.vue @@ -1,9 +1,12 @@ diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-1.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-1.svg new file mode 100644 index 00000000..62c2e852 --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-10.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-10.svg new file mode 100644 index 00000000..83ba3fc3 --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-11.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-11.svg new file mode 100644 index 00000000..f40f81ea --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-11.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-2.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-2.svg new file mode 100644 index 00000000..088faa58 --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-3.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-3.svg new file mode 100644 index 00000000..d8012771 --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-4.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-4.svg new file mode 100644 index 00000000..0578b192 --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-5.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-5.svg new file mode 100644 index 00000000..b6179166 --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-6.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-6.svg new file mode 100644 index 00000000..6f92485c --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-7.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-7.svg new file mode 100644 index 00000000..01d732ea --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-8.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-8.svg new file mode 100644 index 00000000..0a312acf --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-9.svg b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-9.svg new file mode 100644 index 00000000..d69542b9 --- /dev/null +++ b/data-room-ui/packages/assets/images/alignIcon/svg/broadcast-9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data-room-ui/packages/js/mixins/commonMixins.js b/data-room-ui/packages/js/mixins/commonMixins.js index 8a87e7ec..1bb745ca 100644 --- a/data-room-ui/packages/js/mixins/commonMixins.js +++ b/data-room-ui/packages/js/mixins/commonMixins.js @@ -117,12 +117,12 @@ export default { * @description: 更新chart * @param {Object} config */ - changeData(config, filterList) { + changeData (config, filterList) { const list = config?.paramsList?.map((item) => { if (item.value === '${level}') { - return {...item,value:config.customize.level} + return { ...item, value: config.customize.level } } else if (item.value === '${name}') { - return {...item,value:config.customize.scope} + return { ...item, value: config.customize.scope } } else { return item } @@ -130,7 +130,7 @@ export default { const params = { chart: { ...config, - paramsList:list?[...list]:[], + paramsList: list ? [...list] : [], option: undefined }, current: 1, diff --git a/data-room-ui/packages/js/store/mutations.js b/data-room-ui/packages/js/store/mutations.js index 60f7aeea..4c807f1e 100644 --- a/data-room-ui/packages/js/store/mutations.js +++ b/data-room-ui/packages/js/store/mutations.js @@ -66,7 +66,7 @@ export default { state.pageLoading = booleanValue }, // 改变当前组件配置 - changeChartConfig(state, itemConfig) { + changeChartConfig (state, itemConfig) { const index = state.pageInfo.chartList.findIndex( item => item.code === itemConfig.code ) @@ -92,7 +92,7 @@ export default { { type: 'v', site: x || 0 } ] }, - changeActiveItemConfig(state, config) { + changeActiveItemConfig (state, config) { state.activeItemConfig = cloneDeep(config) }, // 新增一个组件 @@ -105,8 +105,16 @@ export default { // 删除组件/批量删除组件 delItem (state, codes) { if (Array.isArray(codes)) { + const delCharts = state.pageInfo.chartList.filter(chart => codes.includes(chart.code)) + // 如果删除的组件中有跑马灯，需要删除将跑马灯组件的音频实例销毁 + delCharts.some(item => { item.type === 'marquee' && EventBus.$emit('deleteComponent', item.code) }) state.pageInfo.chartList = state.pageInfo.chartList.filter(chart => !codes.includes(chart.code)) } else { + // 如果删除的组件是跑马灯，需要删除将跑马灯组件的音频实例销毁 + const delChart = state.pageInfo.chartList.find(chart => codes === chart.code) + if (delChart && delChart.type === 'marquee') { + EventBus.$emit('deleteComponent', codes) + } state.pageInfo.chartList = state.pageInfo.chartList.filter(chart => codes !== chart.code) } // 存储删除后的状态