From ca1db64aeb0219c01f2e06c3e522165281d4137a Mon Sep 17 00:00:00 2001 From: Cano1997 <1978141412@qq.com> Date: Wed, 10 Sep 2025 10:18:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/digital-flop/digital-flop.controller.ts | 27 ++++++++- src/digital-flop/digital-flop.scss | 19 ++++--- src/digital-flop/digital-flop.tsx | 11 +++- src/percent-pond/index.ts | 2 +- src/percent-pond/percent-pond.scss | 11 ++-- src/percent-pond/percent-pond.tsx | 28 ++++----- .../screen-portlet-real-time.controller.ts | 39 ++++--------- src/screen-portlet/screen-portlet.scss | 50 +++------------- src/screen-portlet/screen-portlet.tsx | 2 +- .../screen-radio-list.controller.ts | 41 +++++-------- src/screen-radio-list/screen-radio-list.scss | 54 +----------------- src/screen-radio-list/screen-radio-list.tsx | 57 +++++-------------- .../screen-real-time.controller.ts | 55 +++++++----------- src/tagged-wall/tag.tsx | 8 +-- src/tagged-wall/tagged-wall.scss | 9 +-- .../water-level-pond.controller.ts | 19 ++++--- src/water-level-pond/water-level-pond.scss | 2 +- src/water-level-pond/water-level-pond.tsx | 15 ++--- 18 files changed, 164 insertions(+), 285 deletions(-) diff --git a/src/digital-flop/digital-flop.controller.ts b/src/digital-flop/digital-flop.controller.ts index a734009..94b972a 100644 --- a/src/digital-flop/digital-flop.controller.ts +++ b/src/digital-flop/digital-flop.controller.ts @@ -7,4 +7,29 @@ import { EditorController } from '@ibiz-template/runtime'; * @class DigitalFlopController * @extends {EditorController} */ -export class DigitalFlopController extends EditorController {} +export class DigitalFlopController extends EditorController { + /** + * @description 卡片大小 + * @type {number} + * @memberof DigitalFlopController + */ + size: number = 32; + + /** + * @description 字体大小 + * @type {number} + * @memberof DigitalFlopController + */ + fontSize: number = 16; + + protected async onInit(): Promise { + super.onInit(); + const { size, fontSize } = this.editorParams; + if (size) { + this.size = Number(size); + } + if (fontSize) { + this.fontSize = Number(fontSize); + } + } +} diff --git a/src/digital-flop/digital-flop.scss b/src/digital-flop/digital-flop.scss index 6699fa4..8fac965 100644 --- a/src/digital-flop/digital-flop.scss +++ b/src/digital-flop/digital-flop.scss @@ -1,12 +1,12 @@ $digital-flop: ( - 'text-color': getCssVar(screen-dashboard, text-color), + 'text-color': getCssVar(color, primary, text), 'font-weight': 700, - 'text-align': 'center', - 'item-bg': getCssVar(screen-dashboard, primary-color), + 'font-size': getCssVar(font-size, regular), + 'item-bg': getCssVar(color, primary), 'item-gap': 8px, 'item-text-align': 'center', - 'item-height': 32px, - 'item-width': 32px, + 'height': 32px, + 'width': 32px, 'item-border-radius': 4px, ); @@ -20,14 +20,15 @@ $digital-flop: ( width: 100%; height: 100%; @include e(item) { + display: flex; flex: none; - width: getCssVar('digital-flop', 'item-width'); - height: getCssVar('digital-flop', 'item-height'); + align-items: center; + justify-content: center; + width: getCssVar('digital-flop', 'width'); + height: getCssVar('digital-flop', 'height'); font-size: getCssVar('digital-flop', 'font-size'); font-weight: getCssVar('digital-flop', 'font-weight'); - line-height: getCssVar('digital-flop', 'item-height'); color: getCssVar('digital-flop', 'text-color'); - text-align: getCssVar('digital-flop', 'item-text-align'); background-color: getCssVar('digital-flop', 'item-bg'); border-radius: getCssVar('digital-flop', 'item-border-radius'); diff --git a/src/digital-flop/digital-flop.tsx b/src/digital-flop/digital-flop.tsx index b51931d..e049844 100644 --- a/src/digital-flop/digital-flop.tsx +++ b/src/digital-flop/digital-flop.tsx @@ -18,15 +18,24 @@ export const DigitalFlop = defineComponent({ return ''; }); + const styles = computed(() => { + return { + [ns.cssVarBlockName('font-size')]: `${c.fontSize}px`, + [ns.cssVarBlockName('width')]: `${c.size}px`, + [ns.cssVarBlockName('height')]: `${c.size}px`, + }; + }); + return { ns, c, curValue, + styles, }; }, render() { return ( -
+
{this.curValue.split('').map((value: string) => { return (
new PercentPondProvider(), ); }); diff --git a/src/percent-pond/percent-pond.scss b/src/percent-pond/percent-pond.scss index 348063a..3e68f9e 100644 --- a/src/percent-pond/percent-pond.scss +++ b/src/percent-pond/percent-pond.scss @@ -10,7 +10,7 @@ width: 100%; height: 1px; overflow: visible; - background-color: gray; + background-color: getCssVar(color, border); opacity: 0.6; &::before { @@ -20,7 +20,7 @@ width: 4px; height: 4px; content: ""; - background-color: getCssVar(screen-dashboard, primary-color); + background-color: getCssVar(color, primary); } &::after { @@ -30,7 +30,7 @@ width: 4px; height: 4px; content: ""; - background-color: getCssVar(screen-dashboard, primary-color); + background-color: getCssVar(color, primary); } } @include m('cover-slider'){ @@ -39,21 +39,20 @@ height: 5px; margin-top: 16px; background-color: getCssVar(color,fill,0); - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT4AAAAGCAYAAABaZvJEAAAA20lEQVRYhe3YvyrGcRQG8A+9G4MdxawMb8kV2Bis/sRiklyDa2BSeheTxSiTiYhJJhvlzw2w6dGvvjfxvp3p1OnznPnpjCXZwTqucIsPzGAL0zjBN96xXbZs2bLDbsexj0k84wVz2MMKPnHfwhtly5YtOwq2h1+c4RV97GIZdzhvR9ZwiJ+yZcuWHXbbNb7TVgtnG1rCYwt31XEVB/grW7Zs2ZGwSSaSdPMoyUOS4yT9tltIcpPkKclm2bJly46C7bWH3zymcI1LvLV6uIgvDHDRXNmyZcsOr2XwD/WvZ19mO61bAAAAAElFTkSuQmCC"); } @include m('use-cover'){ position: absolute; left: 0; width: 0; height: 100%; - background-color: getCssVar(screen-dashboard, primary-color); + background-color: getCssVar(color, primary); opacity: 0.5; } @include m('slider-arrow'){ position: absolute; top: -28px; left: 0; - color: getCssVar(screen-dashboard, primary-color); + color: getCssVar(color, primary); opacity: 0.5; } } diff --git a/src/percent-pond/percent-pond.tsx b/src/percent-pond/percent-pond.tsx index 66bc0e9..dd96ed4 100644 --- a/src/percent-pond/percent-pond.tsx +++ b/src/percent-pond/percent-pond.tsx @@ -9,26 +9,26 @@ export const PercentPond = defineComponent({ setup(props) { const ns = useNamespace('percent-pond'); const c = props.controller; - const total = ref(0); + const total = ref(100); const useCover = () => { const tempValue = Number(props.value) || 0; return `${total.value === 0 ? 0 : Math.round((tempValue / total.value) * 100) || 0}%`; }; - watch( - () => props.data[c.totalField], - newVal => { - if (newVal || newVal === 0) { - total.value = newVal; - } else { - total.value = 0; - } - }, - { - immediate: true, - }, - ); + if (c.totalField) { + watch( + () => props.data[c.totalField], + newVal => { + if (newVal || newVal === 0) { + total.value = newVal; + } + }, + { + immediate: true, + }, + ); + } return { ns, useCover, total }; }, diff --git a/src/screen-portlet-real-time/screen-portlet-real-time.controller.ts b/src/screen-portlet-real-time/screen-portlet-real-time.controller.ts index 7db0b93..fee1878 100644 --- a/src/screen-portlet-real-time/screen-portlet-real-time.controller.ts +++ b/src/screen-portlet-real-time/screen-portlet-real-time.controller.ts @@ -44,39 +44,22 @@ export class ScreenPortletRealTimeController extends PortletPartController w === 'week'); // 找到week + // 安全检查：确保至少有一个元素 + if (arr.length === 0) { + return; + } + + const index = arr.indexOf('week'); - if (index > -1) { + if (index !== -1) { this.showWeek = true; - if (index === 0) { - // 左侧没配 0 1 - this.leftTime = ''; - this.rightTime = arr[1]; - } - if (index === 1) { - // 左侧配了 0 1 ， 0 1 2 - arr.splice(index, 1); - arr.forEach((str: string, i: number) => { - if (i === 0) { - this.leftTime = str; - } - if (i === 1) { - this.rightTime = str; - } - }); - } + arr.splice(index, 1); } else { this.showWeek = false; - // 按顺序赋值 0 2 - arr.forEach((str: string, i: number) => { - if (i === 0) { - this.leftTime = str; - } - if (i === 1) { - this.rightTime = str; - } - }); } + // 按顺序赋值 + this.leftTime = arr[0] ?? ''; + this.rightTime = arr[1] ?? ''; } } } diff --git a/src/screen-portlet/screen-portlet.scss b/src/screen-portlet/screen-portlet.scss index add4a45..224a776 100644 --- a/src/screen-portlet/screen-portlet.scss +++ b/src/screen-portlet/screen-portlet.scss @@ -7,6 +7,9 @@ .#{bem(portlet-layout-header)} { position: relative; } + .#{bem(portlet-layout-content)} { + padding-top: getCssVar(spacing, tight); + } .#{bem(portlet-layout-header, left)} { position: unset; @@ -62,6 +65,9 @@ width: 100%; height: calc(100% - 50px); } + > .#{bem(portlet-container)} > .#{bem(portlet-layout-content)} > .#{bem(row)} { + height: 100%; + } } @include b('custom-border') { @@ -70,48 +76,10 @@ width: 100%; height: 100%; } - @include when(full-border) { - > svg { - transform: translateY(50px); - } - - &.is-style-1 { - .#{bem(custom-border,left-top)} { - transform: translateY(50px); - } - - .#{bem(custom-border,right-top)} { - transform: translateY(50px) rotateY(180deg); - } - - .#{bem(custom-border,left-bottom)} { - transform: translateY(50px) rotateX(180deg); - } - .#{bem(custom-border,right-bottom)} { - transform: translateY(50px) rotateX(180deg) rotateY(180deg); - } - } - - &.is-style-10 { - .#{bem(custom-border,wrapper)} { - transform: translateY(50px); - } - .#{bem(custom-border,mask)} { - transform: translateY(50px); - } - } - - &.is-style-11 { - > svg { - transform: translateY(0); - } - .#{bem(portlet-layout-header,left)} { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } + @include when(full-border) { + .#{bem(custom-border, wrapper)} { + bottom: 0; } } } diff --git a/src/screen-portlet/screen-portlet.tsx b/src/screen-portlet/screen-portlet.tsx index 4679ccc..547e9c8 100644 --- a/src/screen-portlet/screen-portlet.tsx +++ b/src/screen-portlet/screen-portlet.tsx @@ -58,7 +58,7 @@ export const ScreenPortlet = defineComponent({ const borderDiv = resolveComponent(this.c.borderStyle); let offsetY = 0; if (this.c.model.showTitleBar && this.c.borderMode === 'body') { - offsetY = 50; + offsetY = 58; } return h( borderDiv, diff --git a/src/screen-radio-list/screen-radio-list.controller.ts b/src/screen-radio-list/screen-radio-list.controller.ts index 9d59f96..7c42821 100644 --- a/src/screen-radio-list/screen-radio-list.controller.ts +++ b/src/screen-radio-list/screen-radio-list.controller.ts @@ -9,42 +9,27 @@ import { IRadioButtonList } from '@ibiz/model-core'; */ export class ScreenRadioListEditorController extends CodeListEditorController { /** - * 单选一行展示几个 - * @author fangZhiHao - * @date 2024-07-17 10:07:40 - * @type {(number | undefined)} + * @description 循环速度,单位毫秒 + * @type {number} + * @memberof ScreenRadioListEditorController */ - rowNumber: number | undefined = undefined; + speed: number = 3000; /** - * 是否开启循环 - * - * @author fangZhiHao - * @date 2024-08-08 14:08:13 - * @type {boolean} + * @description 绘制模式(button: 按钮模式, radio: 单选框模式) + * @type {('button' | 'radio')} + * @memberof ScreenRadioListEditorController */ - enablecirculate: boolean = true; - - /** - * 循环间隔 - * - * @author fangZhiHao - * @date 2024-08-08 14:08:13 - * @type {boolean} - */ - intervaltime: number = 3000; + renderMode: 'button' | 'radio' = 'button'; protected async onInit(): Promise { super.onInit(); - const { ENABLECIRCULATE, INTERVALTIME, rowNumber } = this.editorParams; - if (rowNumber) { - this.rowNumber = rowNumber; - } - if (INTERVALTIME) { - this.intervaltime = Number(INTERVALTIME); + const { speed, renderMode } = this.editorParams; + if (speed) { + this.speed = Number(speed); } - if (ENABLECIRCULATE) { - this.enablecirculate = JSON.parse(ENABLECIRCULATE); + if (renderMode) { + this.renderMode = renderMode; } } } diff --git a/src/screen-radio-list/screen-radio-list.scss b/src/screen-radio-list/screen-radio-list.scss index ffcf3ce..1814e71 100644 --- a/src/screen-radio-list/screen-radio-list.scss +++ b/src/screen-radio-list/screen-radio-list.scss @@ -1,5 +1,5 @@ +/* stylelint-disable selector-class-pattern */ $screen-radio-list: ( - group-row-number: 0, 'radio-input-display': none, 'radio-padding': 0 5px, 'radio-border': 1px solid getCssVar(screen-dashboard, border-color), @@ -47,58 +47,6 @@ $screen-radio-list: ( line-height: getCssVar(editor, default, line-height); color: getCssVar(form-item, readonly-color); } - - @include e(button) { - @include m(round-corner) { - margin-right: getCssVar(spacing, base-loose); - - &.el-radio-button.is-active { - .el-radio-button__inner { - color: getCssVar(color, primary); - background-color: getCssVar(color, secondary, light, default); - border-color: getCssVar(color, secondary, light, default); - } - - .el-radio-button__original-radio:checked + .el-radio-button__inner { - box-shadow: none; - } - } - - &.el-radio-button .el-radio-button__inner { - padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base'); - background-color: getCssVar(color, tertiary, light, hover); - border-color: getCssVar(color, tertiary, light, hover); - border-radius: getCssVar(height-control, default); - - &:nth-last-child(1) { - margin: 0; - } - } - - &.el-radio-button.is-disabled { - &.is-active .el-radio-button__inner { - border: getCssVar('border-thickness', 'control') solid - getCssVar(color, disabled, text); - } - - .el-radio-button__inner { - color: getCssVar(color, disabled, text); - background: getCssVar(color, disabled, bg); - border-color: getCssVar(color, disabled, border); - } - } - } - } - - @include when(grid-layout) { - .el-radio-group { - display: grid; - grid-template-columns: repeat( - getCssVar(screen-radio-list, group-row-number), - 1fr - ); - } - } } @include b(form-item) { diff --git a/src/screen-radio-list/screen-radio-list.tsx b/src/screen-radio-list/screen-radio-list.tsx index 4a461c8..fcfd0ef 100644 --- a/src/screen-radio-list/screen-radio-list.tsx +++ b/src/screen-radio-list/screen-radio-list.tsx @@ -32,21 +32,6 @@ export const ScreenRadioList = defineComponent({ let timer: NodeJS.Timeout | null = null; - // 绘制模式 - let renderMode = 'radio'; - // 按钮圆角显示 - let isBtnRoundCorner = false; - if (editorModel.editorParams) { - if (editorModel.editorParams.renderMode) { - renderMode = editorModel.editorParams.renderMode; - } - if (editorModel.editorParams.isBtnRoundCorner) { - isBtnRoundCorner = c.toBoolean( - editorModel.editorParams.isBtnRoundCorner, - ); - } - } - const { useInFocusAndBlur, useInValueChange } = useAutoFocusBlur( props, emit, @@ -60,7 +45,7 @@ export const ScreenRadioList = defineComponent({ // 代码表 const items = ref([]); - const loopselect = () => { + const loopSelect = () => { const index = items.value.findIndex((item: IData) => { return item.value === props.value; }); @@ -74,11 +59,9 @@ export const ScreenRadioList = defineComponent({ }; onMounted(() => { - if (c.enablecirculate) { - timer = setInterval(() => { - loopselect(); - }, c.intervaltime); - } + timer = setInterval(() => { + loopSelect(); + }, c.speed); }); onBeforeMount(() => { @@ -149,8 +132,6 @@ export const ScreenRadioList = defineComponent({ valueText, onSelectValueChange, editorRef, - renderMode, - isBtnRoundCorner, showFormDefaultContent, }; }, @@ -162,13 +143,7 @@ export const ScreenRadioList = defineComponent({ this.disabled ? this.ns.m('disabled') : '', this.readonly ? this.ns.m('readonly') : '', this.ns.is('show-default', this.showFormDefaultContent), - this.ns.is('grid-layout', !!this.controller.rowNumber), ]} - style={ - this.controller.rowNumber - ? `--ibiz-radio-group-row-number:${this.controller.rowNumber}` - : '' - } ref='editorRef' > {this.readonly ? ( @@ -180,28 +155,24 @@ export const ScreenRadioList = defineComponent({ onChange={this.onSelectValueChange} {...this.$attrs} > - {this.items.map((_item, index: number) => - this.renderMode === 'radio' ? ( + {this.items.map((item, index: number) => + this.controller.renderMode === 'radio' ? ( - {_item.text} + {item.text} ) : ( - {_item.text} + {item.text} ), )} diff --git a/src/screen-real-time/screen-real-time.controller.ts b/src/screen-real-time/screen-real-time.controller.ts index 7c293fa..a19b5f5 100644 --- a/src/screen-real-time/screen-real-time.controller.ts +++ b/src/screen-real-time/screen-real-time.controller.ts @@ -40,41 +40,28 @@ export class ScreenRealTimeController extends EditorController { */ protected async onInit(): Promise { super.onInit(); - if (this.parent.valueFormat) { - const arr = this.parent.valueFormat.split(','); - const index = arr.findIndex(w => w === 'week'); // 找到week - if (index > -1) { - this.showWeek = true; - if (index === 0) { - // 左侧没配 0 1 - this.leftTime = ''; - this.rightTime = arr[1]; - } - if (index === 1) { - // 左侧配了 0 1 ， 0 1 2 - arr.splice(index, 1); - arr.forEach((str, i) => { - if (i === 0) { - this.leftTime = str; - } - if (i === 1) { - this.rightTime = str; - } - }); - } - } else { - this.showWeek = false; - // 按顺序赋值 0 2 - arr.forEach((str, i) => { - if (i === 0) { - this.leftTime = str; - } - if (i === 1) { - this.rightTime = str; - } - }); - } + if (!this.parent.valueFormat) { + return; } + + const arr = this.parent.valueFormat.split(','); + + // 安全检查：确保至少有一个元素 + if (arr.length === 0) { + return; + } + + const index = arr.indexOf('week'); + + if (index !== -1) { + this.showWeek = true; + arr.splice(index, 1); + } else { + this.showWeek = false; + } + // 按顺序赋值 + this.leftTime = arr[0] ?? ''; + this.rightTime = arr[1] ?? ''; } } diff --git a/src/tagged-wall/tag.tsx b/src/tagged-wall/tag.tsx index fb1cdb9..d1f0308 100644 --- a/src/tagged-wall/tag.tsx +++ b/src/tagged-wall/tag.tsx @@ -1,8 +1,8 @@ import { computed, defineComponent, PropType } from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; -import { $RandomColor, $Normal, getRandomColorFromArray } from '../util'; -import './tags.scss'; +import { $RandomColor, getRandomColorFromArray } from '../util'; import { TaggedWallController } from './tagged-wall.controller'; +import './tags.scss'; export const CustomTag = defineComponent({ name: 'CustomTag', @@ -24,13 +24,13 @@ export const CustomTag = defineComponent({ } return $RandomColor(); }); - const normalSize = computed(() => { if (props.controller.enableFontSizeRandom) { - return `${$Normal(props.controller.maxFontSize, props.controller.minFontSize)}px`; + return `${Math.random() * (props.controller.maxFontSize - props.controller.minFontSize) + props.controller.minFontSize}px`; } return `${props.controller.defaultFontSize}px`; }); + console.log(props.controller, normalSize.value, 444); return { ns, diff --git a/src/tagged-wall/tagged-wall.scss b/src/tagged-wall/tagged-wall.scss index 5f2ec47..0e25841 100644 --- a/src/tagged-wall/tagged-wall.scss +++ b/src/tagged-wall/tagged-wall.scss @@ -1,4 +1,7 @@ @include b(tagged-wall) { + display: flex; + align-items: center; + height: 100%; @include e(content) { margin: 0 auto; text-align: center; @@ -10,15 +13,13 @@ margin: auto; } - @include e(tag-body-tags){ + @include e(tag-body-tags) { text-align: center; word-break: break-word; - } - @include e(tag-body-tags-li){ + @include e(tag-body-tags-li) { min-height: 30px; text-align: center; } - } diff --git a/src/water-level-pond/water-level-pond.controller.ts b/src/water-level-pond/water-level-pond.controller.ts index afd3da3..6e5ccc6 100644 --- a/src/water-level-pond/water-level-pond.controller.ts +++ b/src/water-level-pond/water-level-pond.controller.ts @@ -2,6 +2,7 @@ import { EditorController } from '@ibiz-template/runtime'; import { ISlider } from '@ibiz/model-core'; import { toNumber } from 'lodash-es'; +import { useNamespace } from '@ibiz-template/vue3-util'; import Wave from './wave'; import { fade } from '../util'; @@ -111,6 +112,12 @@ export class WaterLevelPondController extends EditorController { */ public maxItem: string = ''; + /** + * @description 样式名 + * @memberof WaterLevelPondController + */ + public ns = useNamespace('water-level-pond'); + protected async onInit(): Promise { super.onInit(); if (this.model.precision) { @@ -162,9 +169,7 @@ export class WaterLevelPondController extends EditorController { // 高清适配 this.calcScale(canvas); this.nowRange = 0; - const primaryColor = this.getThemeVar( - '--ibiz-screen-dashboard-primary-color', - ); + const primaryColor = this.getThemeVar(this.ns.cssVarName('color-primary')); const color = fade(primaryColor, this.waveOpacity); this.wave = new Wave({ canvasWidth: this.canvasWidth, // 轴长 @@ -247,9 +252,7 @@ export class WaterLevelPondController extends EditorController { const r = size / 2; const lineWidth = 4; const cR = r - lineWidth; - const borderColor = this.getThemeVar( - '--ibiz-screen-dashboard-border-color', - ); + const borderColor = this.getThemeVar(this.ns.cssVarName('color-border')); ctx.lineWidth = lineWidth; ctx.beginPath(); ctx.arc(this.canvasWidth / 2, this.canvasHeight / 2, cR, 0, 2 * Math.PI); @@ -272,9 +275,7 @@ export class WaterLevelPondController extends EditorController { this.canvasWidth - 2 * padding, this.canvasHeight - 2 * padding, ); - const borderColor = this.getThemeVar( - '--ibiz-screen-dashboard-border-color', - ); + const borderColor = this.getThemeVar(this.ns.cssVarName('color-border')); ctx.strokeStyle = borderColor; ctx.lineWidth = 2; ctx.closePath(); diff --git a/src/water-level-pond/water-level-pond.scss b/src/water-level-pond/water-level-pond.scss index 20ed46b..115f56d 100644 --- a/src/water-level-pond/water-level-pond.scss +++ b/src/water-level-pond/water-level-pond.scss @@ -13,7 +13,7 @@ top: 50%; left: 50%; font-size: 24px; - color: getCssVar(screen-dashboard, text-color); + color: getCssVar(color, text); transform: translate(-50%, -50%);; } } \ No newline at end of file diff --git a/src/water-level-pond/water-level-pond.tsx b/src/water-level-pond/water-level-pond.tsx index ac0c88b..b9e6778 100644 --- a/src/water-level-pond/water-level-pond.tsx +++ b/src/water-level-pond/water-level-pond.tsx @@ -28,11 +28,15 @@ export const WaterLevelPond = defineComponent({ const canvas = ref(null); - const curValue = computed(() => { - let value: number = Number(props.value); + const maxValue = computed(() => { if (c.maxItem) { - value /= Number(props.data[c.maxItem]); + return props.data[c.maxItem]; } + return 100; + }); + + const curValue = computed(() => { + const value: number = Number(props.value) / Number(maxValue.value); if (c.valueFormat) { return ibiz.util.text.format(value.toString(), c.valueFormat); } @@ -42,10 +46,7 @@ export const WaterLevelPond = defineComponent({ watch( () => props.value, () => { - let value: number = Number(props.value); - if (c.maxItem) { - value /= Number(props.data[c.maxItem]); - } + const value: number = Number(props.value) / Number(maxValue.value); c.setDate(value); }, { immediate: true }, -- Gitee