新增样式组件-流光直线

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: [],

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 {