widgetSvg.vue
3.21 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
<!--
svg 图层
-->
<template>
<div id="formStr" :class="['div_Style']"
:style="styleColor" v-html="showText" v-if="isRouterAlive">
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "WidgetSvg",
components: {
},
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
options: {},
svgData:[],
optionsData: {},
optionsSetUp: {},
flagInter: null,
isRouterAlive:true,
showText:''
};
},
beforeDestroy() {
clearInterval(this.flagInter);
},
computed: {
...mapState('dataSource', ['staticData','staticRefreshTime']),
transStyle() {
return this.objToOne(this.options);
},
styleColor() {
const styleColor = {
position: this.ispreview ? "absolute" : "static",
width: this.transStyle.width + "px",
height: this.transStyle.height + "px",
left: this.transStyle.left + "px",
top: this.transStyle.top + "px",
right: this.transStyle.right + "px"
};
const svg=this.getShowText();
this.showText=svg;
return styleColor;
},
},
watch: {
value: {
handler(val) {
this.options = val;
this.optionsData = val.data;
this.optionsSetUp = val.setup;
this.initData();
},
deep: true,
},
},
mounted() {
this.options = this.value;
this.optionsData = this.value.data;
this.setSvgValue();
},
methods: {
initData() {
this.handlerSvgData();
},
// vue hack 之强制刷新组件
reload(){
this.isRouterAlive=false;
this.$nextTick(function(){
this.isRouterAlive=true;
})
},
handlerSvgData(){
const data = this.optionsSetUp.dynamicAddSvg;
this.svgData = data;
},
//初始化设置SVG值
setSvgValue(){
const {slectedDataType} = this.transStyle;
if(this.isNotBlank(slectedDataType)){
const refreshTime = this.staticRefreshTime || 300000;
this.dynamicDataFn(refreshTime);
}
},
dynamicDataFn(refreshTime) {
if (this.ispreview) {
this.flagInter = setInterval(() => {
this.getEchartData();
}, refreshTime);
} else {
this.getEchartData();
}
},
getEchartData() {
const svg = this.getShowText();
this.showText=svg;
this.reload();
},
getShowText() {
const {text, slectedDataType} = this.transStyle;
const key = this.staticData[slectedDataType] || text;
const dataSvg = this.value.setup.dynamicAddSvg;
for (let i = 0; i < dataSvg.length; i++) {
if(dataSvg[i].key==key){
/** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置 */
/** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
//设置svg 自适应 添加属性 viewBox="0,0,640,480"
let svg = dataSvg[i].value;
return svg;
}
}
return "";
},
}
};
</script>
<style scoped lang="scss">
.div_Style {
width: 100%;
height: 100%;
}
</style>