diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js index 3fa99555..f1fde1c5 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js @@ -27,6 +27,14 @@ export const widgetDecorateFlowLine = { placeholder: '', value: '' }, + { + type: 'vue-color', + label: '流光颜色', + name: 'lightColor', + required: false, + placeholder: '', + value: '#fff' + }, { type: 'el-select', label: '流动方向', @@ -39,6 +47,32 @@ export const widgetDecorateFlowLine = { ], value: 'left' }, + { + type: 'el-select', + label: '流动速度', + name: 'flowingLightSpeed', + required: false, + placeholder: '', + selectOptions: [ + { code: 'low', name: '低' }, + { code: 'medium', name: '中' }, + { code: 'high', name: '高' }, + ], + value: 'medium' + }, + { + type: 'el-select', + label: '旋转中心', + name: 'flowingLightRotationCenter', + required: false, + placeholder: '', + selectOptions: [ + { code: 'left', name: '左' }, + { code: 'center', name: '中' }, + { code: 'right', name: '右' }, + ], + value: 'center' + }, { type: 'el-input-number', label: '旋转角度', @@ -82,7 +116,7 @@ export const widgetDecorateFlowLine = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 300, + value: 4, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue index 55569cfb..14777a7b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue @@ -19,7 +19,11 @@ export default ({ direction: 'left', // 控制流光的方向,可选值: 'left' 和 'right' background: 'red', // 控制底色的值 containerWidth: '400px', + containerHeight: '4px', rotationAngle: 0, // 旋转的角度 + flowingLightColor: null, + flowingLightSpeed: 'medium', + flowingLightRotationCenter: 'center', } }, props: { @@ -64,20 +68,30 @@ export default ({ return { background: this.background, width: '100%', - height: '4px', + height: this.containerHeight + "px", position: 'relative', overflow: 'hidden', flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', // 根据流光方向设置进度条的方向 - transform: `rotate(${this.rotationAngle}deg)` // 添加旋转角度 + transform: `rotate(${this.rotationAngle}deg)`, // 添加旋转角度 + transformOrigin: this.flowingLightRotationCenter, // 设置旋转中心 } }, flowingLightStyle() { + let duration = 0; // 初始化动画持续时间 + + if (this.flowingLightSpeed === 'low') { + duration = 8; // 低速持续时间 + } else if (this.flowingLightSpeed === 'medium') { + duration = 4; // 中速持续时间 + } else if (this.flowingLightSpeed === 'high') { + duration = 2; // 高速持续时间 + } return { height: '4px', width: '80px', - background: 'linear-gradient(to right, transparent, #fff)', + background: 'linear-gradient(to right, transparent,' + this.flowingLightColor + ')', position: 'absolute', - animation: this.direction === 'left' ? 'right_to_left 4s 0s infinite' : 'left_to_right 4s 0s infinite' // 根据流光方向设置动画 + animation: this.direction === 'right' ? `right_to_left ${duration}s 0s infinite` : `left_to_right ${duration}s 0s infinite` // 根据流光方向设置动画 } }, }, @@ -89,13 +103,16 @@ export default ({ this.direction = optionsSetup.flowDirection; this.rotationAngle = optionsSetup.rotationAngle; this.containerWidth = optionsStyle.width; + this.containerHeight = optionsStyle.height; + this.flowingLightColor = optionsSetup.lightColor; + this.flowingLightSpeed = optionsSetup.flowingLightSpeed; + this.flowingLightRotationCenter = optionsSetup.flowingLightRotationCenter; }, } })