!129 新增样式组件-流光直线

Merge pull request !129 from 陈旭光/dev

report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js

@@ -0,0 +1,89 @@
+/**
+ * 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'
+        },
+        {
+          type: 'el-input-number',
+          label: '旋转角度',
+          name: 'rotationAngle',
+          required: false,
+          placeholder: '',
+          value: '0'
+        },
+      ],
+      // 数据
+      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,
+        },
+      ],
+    }
+  }

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,

report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecorateFlowLine.vue

@@ -0,0 +1,136 @@
+<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',
+      rotationAngle: 0, // 旋转的角度
+    }
+  },
+  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', // 根据流光方向设置进度条的方向
+        transform: `rotate(${this.rotationAngle}deg)` // 添加旋转角度
+      }
+    },
+    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.rotationAngle = optionsSetup.rotationAngle;
+      this.containerWidth = optionsStyle.width;
+    },
+  }
+})
+</script>
+<style>
+.container {
+  height: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+}
+
+.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>

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,

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,