新增样式组件-流光直线

chenxg 1 year ago
parent 4c4588b58a
commit 8a484723d5

@ -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,
},
],
}
}

@ -45,12 +45,14 @@ import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertic
import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal" import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal"
import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart"; import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
import {widgetBorder} from "./configure/styleWidget/widget-border"; import {widgetBorder} from "./configure/styleWidget/widget-border";
import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line";
import {widgetDecoration} from "./configure/styleWidget/widget-decoration"; import {widgetDecoration} from "./configure/styleWidget/widget-decoration";
export const widgetTool = [ export const widgetTool = [
// type=html类型的组件 // type=html类型的组件
widgetText, widgetText,
widgetBorder, widgetBorder,
widgetDecorateFlowLine,
widgetDecoration, widgetDecoration,
widgetMarquee, widgetMarquee,
widgetHref, widgetHref,

@ -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>

@ -46,6 +46,7 @@ import widgetFormTime from "./form/widgetFormTime.vue";
import widgetScaleVertical from "./scale/widgetScaleVertical.vue"; import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue";
import widgetDecoration from "./styleWidget/widgetDecoration.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue";
@ -55,6 +56,7 @@ export default {
widgetHref, widgetHref,
widgetText, widgetText,
widgetBorder, widgetBorder,
widgetDecorateFlowLine,
widgetDecoration, widgetDecoration,
WidgetMarquee, WidgetMarquee,
widgetTime, widgetTime,

@ -54,6 +54,7 @@ import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue";
import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
import widgetDecoration from "./styleWidget/widgetDecoration.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue";
export default { export default {
@ -62,6 +63,7 @@ export default {
widgetHref, widgetHref,
widgetText, widgetText,
widgetBorder, widgetBorder,
widgetDecorateFlowLine,
widgetDecoration, widgetDecoration,
WidgetMarquee, WidgetMarquee,
widgetTime, widgetTime,

Loading…
Cancel
Save