From c791908236068d201b732f8ba07aba04659f5f94 Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Thu, 8 Aug 2024 14:57:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8F=90=E4=BA=A4=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=97=B6=E9=97=B4,=E5=8D=95=E9=80=89?= =?UTF-8?q?=E5=BE=AA=E7=8E=AF=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.ts | 2 + src/screen-dashboard/screen-dashboard.scss | 1 + .../screen-radio-list.controller.ts | 29 +++++++++- src/screen-radio-list/screen-radio-list.scss | 23 ++------ src/screen-radio-list/screen-radio-list.tsx | 8 ++- src/screen-real-time/index.ts | 16 ++++++ .../screen-real-time.controller.ts | 56 +++++++++++++++++++ .../screen-real-time.provider.ts | 27 +++++++++ src/screen-real-time/screen-real-time.scss | 18 ++++++ src/screen-real-time/screen-real-time.tsx | 52 +++++++++++++++++ 10 files changed, 209 insertions(+), 23 deletions(-) create mode 100644 src/screen-real-time/index.ts create mode 100644 src/screen-real-time/screen-real-time.controller.ts create mode 100644 src/screen-real-time/screen-real-time.provider.ts create mode 100644 src/screen-real-time/screen-real-time.scss create mode 100644 src/screen-real-time/screen-real-time.tsx diff --git a/src/index.ts b/src/index.ts index b7b1dfb..df4e87d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,6 +3,7 @@ import { IBizDigitalFlop } from './digital-flop/index'; import { IBizScreenDashboard } from './screen-dashboard/index'; import { IBizScreenPortlet } from './screen-portlet/index'; import { IBizScreenRadioList } from './screen-radio-list/index'; +import { IBizScreenRealTime } from './screen-real-time/index'; // 注入组件 export default { @@ -11,5 +12,6 @@ export default { _app.use(IBizScreenDashboard); _app.use(IBizScreenPortlet); _app.use(IBizScreenRadioList); + _app.use(IBizScreenRealTime); }, }; diff --git a/src/screen-dashboard/screen-dashboard.scss b/src/screen-dashboard/screen-dashboard.scss index e2c2c94..f9d0dcf 100644 --- a/src/screen-dashboard/screen-dashboard.scss +++ b/src/screen-dashboard/screen-dashboard.scss @@ -4,6 +4,7 @@ $screen-dashboard: ( 'primary-color': #144082, 'primary-text-color': #409df1, 'light-text-color': transparent, + 'primary-active-color': #559dff, 'border-color': #18a9d9, 'border-radius': 0, ); diff --git a/src/screen-radio-list/screen-radio-list.controller.ts b/src/screen-radio-list/screen-radio-list.controller.ts index 86db68c..9d59f96 100644 --- a/src/screen-radio-list/screen-radio-list.controller.ts +++ b/src/screen-radio-list/screen-radio-list.controller.ts @@ -16,10 +16,35 @@ export class ScreenRadioListEditorController extends CodeListEditorController { super.onInit(); - if (this.editorParams?.rowNumber) { - this.rowNumber = Number(this.editorParams.rowNumber); + const { ENABLECIRCULATE, INTERVALTIME, rowNumber } = this.editorParams; + if (rowNumber) { + this.rowNumber = rowNumber; + } + if (INTERVALTIME) { + this.intervaltime = Number(INTERVALTIME); + } + if (ENABLECIRCULATE) { + this.enablecirculate = JSON.parse(ENABLECIRCULATE); } } } diff --git a/src/screen-radio-list/screen-radio-list.scss b/src/screen-radio-list/screen-radio-list.scss index c394891..f7b36cc 100644 --- a/src/screen-radio-list/screen-radio-list.scss +++ b/src/screen-radio-list/screen-radio-list.scss @@ -2,15 +2,7 @@ $screen-radio-list: ( group-row-number: 0, 'radio-input-display': none, 'radio-padding': 0 5px, - 'radio-color': #17aaf0, - 'radio-background-image': - url('../../public/assets/img/month-train-default.png'), - 'radio-background-repeat': no-repeat, - 'radio-background-size': 100% 32px, 'radio-checked-font-weight': 600, - 'radio-checked-color': white, - 'radio-checked-background-image': - url('../../public/assets/img/month-train-select.png'), 'radio-label-padding-left': 0, ); /* stylelint-disable no-descending-specificity */ @@ -28,19 +20,14 @@ $screen-radio-list: ( .el-radio { width: max-content; padding: getCssVar(screen-radio-list, radio-padding); - color: getCssVar(screen-radio-list, radio-color); + color: getCssVar(screen-dashboard, light-text-color); text-align: center; - background-image: getCssVar(screen-radio-list, radio-background-image); - background-repeat: getCssVar(screen-radio-list, radio-background-repeat); - background-size: getCssVar(screen-radio-list, radio-background-size); &.is-checked { - font-weight: getCssVar(screen-radio-list, radio-checked-font-weight); - color: getCssVar(screen-radio-list, radio-checked-color); - background-image: getCssVar( - screen-radio-list, - radio-checked-background-image - ); + .#{bem('screen-radio-list','text')} { + font-weight: getCssVar(screen-radio-list, radio-checked-font-weight); + color: getCssVar(screen-dashboard, primary-active-color); + } } .el-radio__label { diff --git a/src/screen-radio-list/screen-radio-list.tsx b/src/screen-radio-list/screen-radio-list.tsx index 2bdd85f..4a461c8 100644 --- a/src/screen-radio-list/screen-radio-list.tsx +++ b/src/screen-radio-list/screen-radio-list.tsx @@ -74,9 +74,11 @@ export const ScreenRadioList = defineComponent({ }; onMounted(() => { - timer = setInterval(() => { - loopselect(); - }, 3000); + if (c.enablecirculate) { + timer = setInterval(() => { + loopselect(); + }, c.intervaltime); + } }); onBeforeMount(() => { diff --git a/src/screen-real-time/index.ts b/src/screen-real-time/index.ts new file mode 100644 index 0000000..059c800 --- /dev/null +++ b/src/screen-real-time/index.ts @@ -0,0 +1,16 @@ +import { withInstall } from '@ibiz-template/vue3-util'; +import { App } from 'vue'; +import { registerEditorProvider } from '@ibiz-template/runtime'; +import { ScreenRealTime } from './screen-real-time'; +import { ScreenRealTimeProvider } from './screen-real-time.provider'; + +export const IBizScreenRealTime = withInstall( + ScreenRealTime, + function (v: App) { + v.component(ScreenRealTime.name, ScreenRealTime); + registerEditorProvider( + 'SPAN_SCREEN_REAL_TIME', + () => new ScreenRealTimeProvider(), + ); + }, +); diff --git a/src/screen-real-time/screen-real-time.controller.ts b/src/screen-real-time/screen-real-time.controller.ts new file mode 100644 index 0000000..2f02419 --- /dev/null +++ b/src/screen-real-time/screen-real-time.controller.ts @@ -0,0 +1,56 @@ +import { ISpan } from '@ibiz/model-core'; +import { EditorController } from '@ibiz-template/runtime'; + +/** + * @description 实时时间 + * @export + * @class DigitalFlopController + * @extends {EditorController} + */ +export class ScreenRealTimeController extends EditorController { + /** + * 左侧时间 + * + * @author fangZhiHao + * @date 2024-08-08 13:08:33 + * @type {string} + */ + public leftTime: string = 'YYYY-MM-DD'; + + /** + * 星期 + * + * @author fangZhiHao + * @date 2024-08-08 13:08:17 + * @type {string} + */ + public showWeek: boolean = true; + + /** + * 右侧时间 + * + * @author fangZhiHao + * @date 2024-08-08 13:08:33 + * @type {string} + */ + public rightTime: string = 'HH:mm:ss'; + + /** + * 初始化 + */ + protected async onInit(): Promise { + super.onInit(); + if (this.model.editorParams) { + const { SHOWWEEK, LEFTTIME, RIGHTTIME } = this.model.editorParams; + if (SHOWWEEK) { + this.showWeek = JSON.parse(SHOWWEEK); + } + if (LEFTTIME) { + this.leftTime = LEFTTIME; + } + if (RIGHTTIME) { + this.rightTime = RIGHTTIME; + } + } + } +} diff --git a/src/screen-real-time/screen-real-time.provider.ts b/src/screen-real-time/screen-real-time.provider.ts new file mode 100644 index 0000000..9771ae0 --- /dev/null +++ b/src/screen-real-time/screen-real-time.provider.ts @@ -0,0 +1,27 @@ +import { ISpan } from '@ibiz/model-core'; +import { + IEditorContainerController, + IEditorProvider, +} from '@ibiz-template/runtime'; +import { ScreenRealTimeController } from './screen-real-time.controller'; + +/** + * @description 实时时间 + * @export + * @class DigitalFlopProvider + * @implements {IEditorProvider} + */ +export class ScreenRealTimeProvider implements IEditorProvider { + formEditor: string = 'ScreenRealTime'; + + gridEditor: string = 'ScreenRealTime'; + + async createController( + editorModel: ISpan, + parentController: IEditorContainerController, + ): Promise { + const c = new ScreenRealTimeController(editorModel, parentController); + await c.init(); + return c; + } +} diff --git a/src/screen-real-time/screen-real-time.scss b/src/screen-real-time/screen-real-time.scss new file mode 100644 index 0000000..daa2b44 --- /dev/null +++ b/src/screen-real-time/screen-real-time.scss @@ -0,0 +1,18 @@ +$screen-real-time: ( + 'font-size': 18px, + 'padding-left': 10%, + 'white-space': nowrap, + 'height': 100%, + 'align-items': center, +); + +@include b(screen-real-time) { + @include set-component-css-var('screen-real-time', $screen-real-time); + + align-items: getCssVar('screen-real-time', 'align-items'); + height: getCssVar('screen-real-time', 'height'); + padding-left: getCssVar('screen-real-time', 'padding-left'); + font-size: getCssVar('screen-real-time', 'font-size'); + color: getCssVar('screen-dashboard', 'primary-text-color'); + white-space: getCssVar('screen-real-time', 'white-space'); +} diff --git a/src/screen-real-time/screen-real-time.tsx b/src/screen-real-time/screen-real-time.tsx new file mode 100644 index 0000000..5836cc3 --- /dev/null +++ b/src/screen-real-time/screen-real-time.tsx @@ -0,0 +1,52 @@ +import { defineComponent, onBeforeUnmount, onMounted, Ref, ref } from 'vue'; +import { getSpanProps, useNamespace } from '@ibiz-template/vue3-util'; +import day from 'dayjs'; +import { ScreenRealTimeController } from './screen-real-time.controller'; +import './screen-real-time.scss'; + +export const ScreenRealTime = defineComponent({ + name: 'ScreenRealTime', + props: getSpanProps(), + setup(props) { + const ns = useNamespace('screen-real-time'); + + const c = props.controller; + + let timerId: NodeJS.Timeout | null = null; + + const text: Ref = ref(''); + + const weekDays = ['日', '一', '二', '三', '四', '五', '六']; + + onMounted(() => { + timerId = setInterval(() => { + const now = day(); + + const leftText = c.leftTime ? `${now.format(c.leftTime)} ` : ''; + const week = c.showWeek ? `星期${weekDays[now.day()]} ` : ''; + const rightText = c.rightTime ? now.format(c.rightTime) : ''; + + text.value = `${leftText}${week}${rightText}`; + }, 1000); + }); + + onBeforeUnmount(() => { + if (timerId) { + clearInterval(timerId); + } + }); + + return { + ns, + c, + text, + }; + }, + render() { + return ( +
+ {this.text} +
+ ); + }, +}); -- Gitee