diff --git a/src/digital-flop/digital-flop.controller.ts b/src/digital-flop/digital-flop.controller.ts index a7340093d84ade9fca55c3067112935f9b749a07..94b972a6313f1458201eac9629d899d20bcc4ce8 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 6699fa4072948a32018104ee2d89530506230f92..8fac9659e832fdc3d9cc6e135cdfddbc916e1543 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 b51931dc8ab5857f32d24949560ceda85fb64805..e04984468a7fce7a4e028778e1b8a131ffea6fa8 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 348063a9b70f1c5fdfbe2d0a4c1f193ed2d8556e..3e68f9e900b8287c0198253bf7de4549a3224128 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 66bc0e95046f73133a7b3c39f44261f5914fa1a8..dd96ed419dc10064d27d10cd5aadd8eaf5de137a 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 7db0b932b5c76bd89b8a22490c3e45ae5c8fb0c9..fee187828ca34c6b4bd887dfad91d5ed1dd729de 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 add4a45054fdf7ef81b3c1e2035e58ea0e7eb2bd..224a7768ec3008bde14c8060f65fb7c2bde6a70c 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 4679ccc6d6b8ff00ff49fdb44e5b20aa9e6d7dd0..547e9c85c1f8f687e43b454995a99a4feb2812a5 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 9d59f968bd8162604dac3b05374476d92b330cef..7c42821494f3f867c801a8c830dfa6743d371092 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 ffcf3ce2c98ac43bd90860f096c60ff48e30e2a2..1814e71c54aeec561ac1c29d3dbfe84542f2dc23 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 4a461c80d52ac628f8fc5601355e69a2a7904331..fcfd0ef53d303fe74d6976316cee83612d25ed0a 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 7c293fa223537d8b9746156fc2ea598c928a7c09..a19b5f5ba1fa7c4206a339071abb143b716ddbd1 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 fb1cdb9763a16669e0fdc2b8dd65d0fee889aedd..d1f0308fbc218a4e7566a151e7a9651f395f00ca 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 5f2ec471463a9a1df82b958e089e7dcec4d6dcee..0e258411c02c9f2ebfbd6a0d2bae4c985697a01e 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 afd3da3a72e67c69ead7080b6a4c4c5d352672f4..6e5ccc6f41f8912a1e7bdc2d99755a82b7960405 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 20ed46bb06716bcf2f6a47ab8e77f8ab248b1c7e..115f56dae9d2c5c9ba1952af9e7603f78d85c72e 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 ac0c88b828d5d2b209c903b9b5776504c6afe8f2..b9e677839594d61c0a99f7af0006bc04a496e921 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 },