index.vue
3.98 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
<!--
* @Descripttion: 大屏设计器 -- 预览
!-->
<template>
<div class="layout">
<div :style="bigScreenStyle">
<widget
v-for="(widget, index) in widgets"
:key="index"
v-model="widget.value"
:index="index"
:type="widget.type"
/>
</div>
</div>
</template>
<script>
import widget from "../designer/widget/temp";
import { detailDashboard } from "@/api/bigscreen";
import { mapMutations } from 'vuex';
import loadingViewerVue from 'loading-view-vue'
import Vue from "vue";
Vue.use(loadingViewerVue,{mode:"5"});
export default {
name: "Login",
components: {
widget
},
data() {
return {
bigScreenStyle: {},
widgets: [],
masterData:{}
};
},
mounted() {
this.getData();
},
methods: {
...mapMutations('dataSource', ['SET_STATIC_DATA','SET_REFRESHTIME']),
async getData() {
const reportCode = this.$route.query;
this.$showLoading();
const { code, data } = await detailDashboard(reportCode);
this.$hideLoading();
if (code != 200) return;
const equipment = document.body.clientWidth;
const ratioEquipment = equipment / data.dashboard.width;
this.bigScreenStyle = {
width: data.dashboard.width + "px",
height: data.dashboard.height + "px",
"background-color": data.dashboard.backgroundColor,
"background-image": "url(" + data.dashboard.backgroundImage + ")",
"background-position": "0% 0%",
"background-size": "100% 100%",
"background-repeat": "initial",
"background-attachment": "initial",
"background-origin": "initial",
"background-clip": "initial",
transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
"transform-origin": "0 0"
};
// 赋值到全局变量
this.setMasterData(data.dashboard);
data.dashboard.widgets.forEach((item, index) => {
item.value.widgetId = item.value.setup.widgetId
item.value.widgetCode = item.value.setup.widgetCode
if (item.value.setup.componentLinkage && item.value.setup.componentLinkage.length) {
this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
index,
widgetId: item.value.widgetId,
linkageArr: item.value.setup.componentLinkage
})
}
})
this.widgets = data.dashboard.widgets;
},
// 数据处理
setMasterData(screenData){
// 数据类型 静态 or 动态
const screenD = screenData.data;
const refreshTime = screenD["refreshTime"]||60000*30;
this.SET_REFRESHTIME(refreshTime);
screenD.dataType == "staticData"
? this.staticDataFn(screenD.staticData)
: this.dynamicDataFn(screenD.dynamicData, refreshTime);
},
staticDataFn(val) {
//获取静态数据
this.masterData=val;
this.SET_STATIC_DATA(this.masterData);
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
//第一次赋值
this.getEchartData(val);
//定时赋值
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
if(this.isNotBlankArray(val)){
for (let i = 0; i < val.length; i++) {
const one = val[i];
const sValue = (this.isBlankObject(one)|| this.isBlank(one['sValue']))?"":one['sValue'];
if(this.isNotBlankObj(one) && this.isNotBlank(one['sName'])){
const sName = one['sName'];
this.masterData[sName]=sValue;
}
}
}
// console.log("著数据源。。。。",this.masterData)
this.SET_STATIC_DATA(this.masterData);
},
},
};
</script>
<style scoped lang="scss">
.layout {
width: 100%;
height: 100%;
text-align: center;
}
.bottom-text {
width: 100%;
color: #a0a0a0;
position: fixed;
bottom: 16px;
z-index: 9999;
}
</style>