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 c1952297..3fa99555 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 @@ -39,6 +39,14 @@ export const widgetDecorateFlowLine = { ], value: 'left' }, + { + type: 'el-input-number', + label: '旋转角度', + name: 'rotationAngle', + required: false, + placeholder: '', + value: '0' + }, ], // 数据 data: [], 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 e9834fa9..55569cfb 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue @@ -18,7 +18,8 @@ export default ({ optionsSetup: {}, direction: 'left', // 控制流光的方向,可选值: 'left' 和 'right' background: 'red', // 控制底色的值 - containerWidth: '400px' + containerWidth: '400px', + rotationAngle: 0, // 旋转的角度 } }, props: { @@ -66,7 +67,8 @@ export default ({ height: '4px', position: 'relative', overflow: 'hidden', - flexDirection: this.direction === 'left' ? 'row-reverse' : 'row' // 根据流光方向设置进度条的方向 + flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', // 根据流光方向设置进度条的方向 + transform: `rotate(${this.rotationAngle}deg)` // 添加旋转角度 } }, flowingLightStyle() { @@ -85,6 +87,7 @@ export default ({ const optionsStyle = this.optionsStyle; this.background = optionsSetup.background; this.direction = optionsSetup.flowDirection; + this.rotationAngle = optionsSetup.rotationAngle; this.containerWidth = optionsStyle.width; }, } @@ -96,7 +99,7 @@ export default ({ display: flex; justify-content: center; align-items: center; - background: #282c34; + background: transparent; } .progress-bar {