widgetDigitalFlop.vue
4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!--
数字翻牌器
-->
<template>
<!-- <div id="widget-digital-flop" :style="styleObj">-->
<dv-digital-flop :config="options" :style="styleObj"/>
<!-- </div>-->
</template>
<script>
import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";
import {mapState} from "vuex";
import Vue from "vue";
Vue.use(digitalFlop);
export default {
name: "WidgetDigitalFlop",
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
//返回图标数据
options: {
number:[],//数字数值
content:'数字{nt}',//number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：实际显示效果：'数字1,数字2,数字3,数字4'
toFixed: 0,//小数位数
textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
rowGap: 0,//行间距 当使用\n进行换行的时候，rowGap可以控制行间距
style: {
fontSize: 30,
fill: '#3de7c9'
},//可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小
//formatter:this.formatterNum,//格式化数字 类型： Function,
animationCurve: 'easeOutCubic', //动效曲线
animationFrame:50
},
config:{},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {}
};
},
computed: {
...mapState('dataSource', ['staticData']),
styleObj() {
/*数字初始化*/
const {slectedDataType,numberText} = this.optionsSetup;
let datav = this.staticData[slectedDataType] || numberText;
let dataArray = datav.toString().split(",");
const numArray=[];
if(this.isNotBlankArray(dataArray)){
dataArray.forEach(num=>{
numArray.push(parseInt(num));
});
}
this.options.number = numArray;
this.options={...this.options};
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",
background: this.optionsSetup.background
};
},
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// 修改图标options属性
editorOptions() {
//显示内容
this.showText();
//数据修改
this.setOptionsData();
//字体样式
this.setFontStyle();
},
//显示的内容
showText() {
const {slectedDataType,numberText} = this.optionsSetup;
let datav = this.staticData[slectedDataType] || numberText;
let dataArray = datav.toString().split(",");
const numArray=[];
if(this.isNotBlankArray(dataArray)){
dataArray.forEach(num=>{
numArray.push(parseInt(num));
});
}
this.options.number = numArray;
},
//字体修改
setFontStyle() {
const optionsSetup = this.optionsSetup;
const fontStyle = {};
fontStyle.fill=optionsSetup.fill;
fontStyle.fontSize=optionsSetup.fontSize;
fontStyle.fontWeight=optionsSetup.fontWeight;
this.options.style = fontStyle;
},
//千为分隔符
formatterNum (number) {
const numbers = number.toString().split('').reverse();
const segs = [];
while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
return segs.join(',').split('').reverse().join('');
},
// 数据修改
setOptionsData() {
const optionsSetup = this.optionsSetup;
if(optionsSetup.isFormatterNum){
this.options.formatter=this.formatterNum;
}else{
this.options.formatter=undefined;
}
this.options.isFormatterNum=optionsSetup.isFormatterNum;//千分位显示
this.options.content=optionsSetup.content;
this.options.toFixed=optionsSetup.toFixed;
this.options.textAlign=optionsSetup.textAlign;
this.options.animationFrame=optionsSetup.animationFrame;
// const optionsDeep =this.deepClone(this.options);
// console.log("返回数据options",optionsDeep);
this.options={...this.options};
// this.options=optionsDeep;
},
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>