widgetScrollRankingBoard.vue
4 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
<!--
排名轮播表
-->
<template>
<!-- <div id="widget-scroll-ranking-board" :style="styleObj">-->
<dv-scroll-ranking-board :config="options" :style="styleObj"/>
<!-- </div>-->
</template>
<script>
import Vue from "vue";
import scrollRankingBoard from "@jiaminghi/data-view/lib/components/scrollRankingBoard";
Vue.use(scrollRankingBoard)
export default {
name: "WidgetScrollRankingBoard",
props: {
value: Object,
ispreview: Boolean,
},
data() {
const {valueFormatter} = this;
return {
//返回图标数据
options: {
data:[],//表数据
rowNum:'5',//表行数(显示)
waitTime: 2000,//轮播时间间隔(ms)
carousel: 'single',//轮播方式 'single'|'page'
unit: '',//数值单位
sort: true,//自动排序
isValueFormatter: true,//数值格式化
valueFormatter: valueFormatter//数值格式化
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {}
};
},
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",
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.setOptionsData();
//配置修改
this.setOptionsConfig();
},
// 配置修改
setOptionsConfig() {
const optionsSetup = this.optionsSetup;
this.options.rowNum =optionsSetup.rowNum;
this.options.waitTime =optionsSetup.waitTime;
this.options.carousel =optionsSetup.carousel;
this.options.unit =optionsSetup.unit;
this.options.sort =optionsSetup.sort;
this.options.isValueFormatter =optionsSetup.isValueFormatter;
if(this.options.isValueFormatter){
this.options.valueFormatter= this.valueFormatter;
}else{
this.options.valueFormatter=undefined;
}
this.options={...this.options};
},
//数据类型
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
// console.log("设置静态数据",this.options)
const staticData = typeof val == "string" ? JSON.parse(val) : val;
this.options.data=staticData;
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
this.options.data=val;
},
valueFormatter ({ value }) {
// console.warn(arguments)
const reverseNumber = (value + '').split('').reverse()
let valueStr = ''
while (reverseNumber.length) {
const seg = reverseNumber.splice(0, 3).join('')
valueStr += seg
if (seg.length === 3) valueStr += ','
}
return valueStr.split('').reverse().join('')
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>