From 8a484723d5e896866823ce59d5dd3fe1285c3ae8 Mon Sep 17 00:00:00 2001
From: chenxg <chenxg>
Date: Thu, 24 Aug 2023 14:36:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6-=E6=B5=81=E5=85=89=E7=9B=B4=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styleWidget/widget-decorate-flow-line.js  |  81 +++++++++++
 .../bigscreenDesigner/designer/tools/main.js  |   2 +
 .../styleWidget/widgetDecorateFlowLine.vue    | 133 ++++++++++++++++++
 .../designer/widget/temp.vue                  |   2 +
 .../designer/widget/widget.vue                |   2 +
 5 files changed, 220 insertions(+)
 create mode 100644 report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js
 create mode 100644 report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue

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
new file mode 100644
index 00000000..c1952297
--- /dev/null
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js
@@ -0,0 +1,81 @@
+/**
+ * author:chenxg
+ * date:2023-08-24
+ */
+export const widgetDecorateFlowLine =  {
+    code: 'widget-decorate-flow-line',
+    type: 'border',
+    tabName: '样式组件',
+    label: '流光直线',
+    icon: 'icontupian1',
+    options: {
+      // 配置
+      setup: [
+        {
+          type: 'el-input-text',
+          label: '图层名称',
+          name: 'layerName',
+          required: false,
+          placeholder: '',
+          value: '流光直线',
+        },
+        {
+          type: 'vue-color',
+          label: '背景颜色',
+          name: 'background',
+          required: false,
+          placeholder: '',
+          value: ''
+        },
+        {
+          type: 'el-select',
+          label: '流动方向',
+          name: 'flowDirection',
+          required: false,
+          placeholder: '',
+          selectOptions: [
+            { code: 'left', name: '自左向右' },
+            { code: 'right', name: '自右向左' },
+          ],
+          value: 'left'
+        },
+      ],
+      // 数据
+      data: [],
+      // 坐标
+      position: [
+        {
+          type: 'el-input-number',
+          label: '左边距',
+          name: 'left',
+          required: false,
+          placeholder: '',
+          value: 0,
+        },
+        {
+          type: 'el-input-number',
+          label: '上边距',
+          name: 'top',
+          required: false,
+          placeholder: '',
+          value: 0,
+        },
+        {
+          type: 'el-input-number',
+          label: '宽度',
+          name: 'width',
+          required: false,
+          placeholder: '该容器在1920px大屏中的宽度',
+          value: 400,
+        },
+        {
+          type: 'el-input-number',
+          label: '高度',
+          name: 'height',
+          required: false,
+          placeholder: '该容器在1080px大屏中的高度',
+          value: 300,
+        },
+      ],
+    }
+  }
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
index 53f1c773..952635c1 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
@@ -45,12 +45,14 @@ import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertic
 import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal"
 import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
 import {widgetBorder} from "./configure/styleWidget/widget-border";
+import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line";
 import {widgetDecoration} from "./configure/styleWidget/widget-decoration";
 
 export const widgetTool = [
   // type=html类型的组件
   widgetText,
   widgetBorder,
+  widgetDecorateFlowLine,
   widgetDecoration,
   widgetMarquee,
   widgetHref,
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue
new file mode 100644
index 00000000..e9834fa9
--- /dev/null
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue
@@ -0,0 +1,133 @@
+<template>
+  <div :style="styleObj">
+    <div :style="containerStyle" class="container">
+      <div :style="progressBarStyle" class="progress-bar">
+        <div :style="flowingLightStyle" class="flowing-light"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default ({
+  name: "widgetFlowLine",
+  components: {},
+  data() {
+    return {
+      optionsStyle: {}, // 样式
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
+      direction: 'left', // 控制流光的方向，可选值: 'left' 和 'right'
+      background: 'red', // 控制底色的值
+      containerWidth: '400px'
+    }
+  },
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+      };
+    },
+    containerStyle() {
+      return {
+        width: this.containerWidth + "px",
+      }
+    },
+    progressBarStyle() {
+      return {
+        background: this.background,
+        width: '100%',
+        height: '4px',
+        position: 'relative',
+        overflow: 'hidden',
+        flexDirection: this.direction === 'left' ? 'row-reverse' : 'row' // 根据流光方向设置进度条的方向
+      }
+    },
+    flowingLightStyle() {
+      return {
+        height: '4px',
+        width: '80px',
+        background: 'linear-gradient(to right, transparent, #fff)',
+        position: 'absolute',
+        animation: this.direction === 'left' ? 'right_to_left 4s 0s infinite' : 'left_to_right 4s 0s infinite' // 根据流光方向设置动画
+      }
+    },
+  },
+  methods: {
+    editorOptions() {
+      const optionsSetup = this.optionsSetup;
+      const optionsStyle = this.optionsStyle;
+      this.background = optionsSetup.background;
+      this.direction = optionsSetup.flowDirection;
+      this.containerWidth = optionsStyle.width;
+    },
+  }
+})
+</script>
+<style>
+.container {
+  height: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #282c34;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 100%;
+}
+
+.flowling-light {
+  height: 4px;
+  width: 80px;
+  background: linear-gradient(to right, transparent, #fff);
+  position: absolute;
+}
+
+@keyframes left_to_right {
+  0% {
+    left: -80px;
+  }
+
+  100% {
+    left: calc(100% + 80px);
+  }
+}
+
+@keyframes right_to_left {
+  0% {
+    right: -80px;
+  }
+
+  100% {
+    right: calc(100% + 80px);
+  }
+}
+</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
index df892766..b4688145 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -46,6 +46,7 @@ import widgetFormTime from "./form/widgetFormTime.vue";
 import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
 import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
 import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
+import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
 import widgetBorder from "./styleWidget/widgetBorder.vue";
 import widgetDecoration from "./styleWidget/widgetDecoration.vue";
 
@@ -55,6 +56,7 @@ export default {
     widgetHref,
     widgetText,
     widgetBorder,
+    widgetDecorateFlowLine,
     widgetDecoration,
     WidgetMarquee,
     widgetTime,
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
index dd2bf6d9..ead97485 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -54,6 +54,7 @@ import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
 import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
 import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
 import widgetBorder from "./styleWidget/widgetBorder.vue";
+import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
 import widgetDecoration from "./styleWidget/widgetDecoration.vue";
 
 export default {
@@ -62,6 +63,7 @@ export default {
     widgetHref,
     widgetText,
     widgetBorder,
+    widgetDecorateFlowLine,
     widgetDecoration,
     WidgetMarquee,
     widgetTime,

From 93c578139721d9b1176d3a53e869ae2761b1c9d8 Mon Sep 17 00:00:00 2001
From: chenxg <chenxg>
Date: Thu, 24 Aug 2023 15:36:04 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6-=E6=B5=81=E5=85=89=E7=9B=B4=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../configure/styleWidget/widget-decorate-flow-line.js   | 8 ++++++++
 .../widget/styleWidget/widgetDecorateFlowLine.vue        | 9 ++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

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 {