提交 | 用户 | 时间
|
fd2207
|
1 |
<template> |
懒 |
2 |
<el-row :gutter="40" class="panel-group"> |
8adcec
|
3 |
<el-card class="bottom-card"> |
J |
4 |
<div slot="header" class="clearfix"> |
9ebb88
|
5 |
<span style="font-size: 20px;font-weight: bold">单日累计产量</span> |
8adcec
|
6 |
</div> |
J |
7 |
|
9ebb88
|
8 |
<div style="display: flex; margin-top: 20px; height: 80px;"> |
W |
9 |
<div class="transition-box" style="background-color: limegreen"> |
|
10 |
<i class="el-icon-notebook-1"></i> |
|
11 |
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider> |
|
12 |
<div> |
|
13 |
<span style="margin-left: 20px" class="nextLine">合箱上线</span> |
|
14 |
<span class="nextLine">{{data1}}</span> |
fd2207
|
15 |
</div> |
懒 |
16 |
</div> |
2720ac
|
17 |
<div class="transition-box" style="background-color: orange"> |
9ebb88
|
18 |
<i class="el-icon-setting"></i> |
W |
19 |
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider> |
|
20 |
<div> |
|
21 |
<span style="margin-left: 20px" class="nextLine">合箱下线</span> |
|
22 |
<span class="nextLine">{{data2}}</span> |
fd2207
|
23 |
</div> |
fbed8e
|
24 |
|
J |
25 |
</div> |
9ebb88
|
26 |
<div class="transition-box" style="background-color: mediumpurple"> |
W |
27 |
<i class="el-icon-s-unfold"></i> |
|
28 |
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider> |
|
29 |
<div> |
|
30 |
<span style="margin-left: 20px">总装上线</span> |
|
31 |
<span class="nextLine">{{data3}}</span> |
fbed8e
|
32 |
</div> |
9ebb88
|
33 |
</div> |
2720ac
|
34 |
<div class="transition-box" style="background-color: cornflowerblue"> |
9ebb88
|
35 |
<i class="el-icon-cpu"></i> |
W |
36 |
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider> |
|
37 |
<div> |
|
38 |
<span style="margin-left: 20px">总装下线</span> |
|
39 |
<span class="nextLine">{{data4}}</span> |
|
40 |
</div> |
|
41 |
</div> |
2720ac
|
42 |
<div class="transition-box" style="background-color: green"> |
9ebb88
|
43 |
<i class="el-icon-upload2"></i> |
W |
44 |
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider> |
|
45 |
<div> |
|
46 |
<span style="margin-left: 20px">CVT上线</span> |
|
47 |
<span class="nextLine">{{data5}}</span> |
|
48 |
</div> |
|
49 |
</div> |
|
50 |
<div class="transition-box" style="background-color: darkslategray"> |
|
51 |
<i class="el-icon-finished"></i> |
|
52 |
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider> |
|
53 |
<div> |
|
54 |
<span style="margin-left: 20px">CVT下线</span> |
|
55 |
<span class="nextLine">{{data6}}</span> |
|
56 |
</div> |
fbed8e
|
57 |
</div> |
J |
58 |
</div> |
|
59 |
|
|
60 |
|
8adcec
|
61 |
</el-card> |
fd2207
|
62 |
</el-row> |
fbed8e
|
63 |
|
fd2207
|
64 |
</template> |
懒 |
65 |
|
|
66 |
<script> |
|
67 |
import CountTo from 'vue-count-to' |
9ebb88
|
68 |
import { getProduceNumToday } from '@/api/main/da/passingStationCollection/passingStationCollection' |
fd2207
|
69 |
|
懒 |
70 |
export default { |
|
71 |
components: { |
|
72 |
CountTo |
|
73 |
}, |
9ebb88
|
74 |
data(){ |
W |
75 |
return{ |
|
76 |
query1:'box_closing_online_time', |
|
77 |
data1:'', |
|
78 |
query2:'closing_box_offline_time', |
|
79 |
data2:'', |
|
80 |
query3:'final_assembly_launch_time', |
|
81 |
data3:'', |
|
82 |
query4:'final_assembly_offline_time', |
|
83 |
data4:'', |
|
84 |
query5:'cvt_launch_time', |
|
85 |
data5:'', |
|
86 |
query6:'cvt_offline_time', |
|
87 |
data6:'', |
|
88 |
} |
|
89 |
}, |
fd2207
|
90 |
methods: { |
懒 |
91 |
handleSetLineChartData(type) { |
|
92 |
this.$emit('handleSetLineChartData', type) |
9ebb88
|
93 |
}, |
W |
94 |
getData1(){ |
|
95 |
getProduceNumToday({fieldName:this.query1}).then(response => { |
|
96 |
this.data1 = response.data; |
|
97 |
}); |
|
98 |
}, |
|
99 |
getData2(){ |
|
100 |
getProduceNumToday({fieldName:this.query2}).then(response => { |
|
101 |
this.data2 = response.data; |
|
102 |
}); |
|
103 |
}, |
|
104 |
getData3(){ |
|
105 |
getProduceNumToday({fieldName:this.query3}).then(response => { |
|
106 |
this.data3 = response.data; |
|
107 |
}); |
|
108 |
}, |
|
109 |
getData4(){ |
|
110 |
getProduceNumToday({fieldName:this.query4}).then(response => { |
|
111 |
this.data4 = response.data; |
|
112 |
}); |
|
113 |
}, |
|
114 |
getData5(){ |
|
115 |
getProduceNumToday({fieldName:this.query5}).then(response => { |
|
116 |
this.data5 = response.data; |
|
117 |
}); |
|
118 |
}, |
|
119 |
getData6(){ |
|
120 |
getProduceNumToday({fieldName:this.query6}).then(response => { |
|
121 |
this.data6 = response.data; |
|
122 |
}); |
fd2207
|
123 |
} |
9ebb88
|
124 |
}, |
W |
125 |
mounted() { |
|
126 |
this.getData1(), |
|
127 |
this.getData2(), |
|
128 |
this.getData3(), |
|
129 |
this.getData4(), |
|
130 |
this.getData5(), |
|
131 |
this.getData6() |
fd2207
|
132 |
} |
懒 |
133 |
} |
|
134 |
</script> |
|
135 |
|
|
136 |
<style lang="scss" scoped> |
9ebb88
|
137 |
|
W |
138 |
.transition-box { |
|
139 |
display: flex; |
|
140 |
align-items: center; |
|
141 |
margin-bottom: 10px; |
|
142 |
width: 200px; |
|
143 |
height: 80px; |
|
144 |
border-radius: 4px; |
|
145 |
text-align: center; |
|
146 |
color: #fff; |
|
147 |
padding: 40px 20px; |
|
148 |
box-sizing: border-box; |
|
149 |
margin-right: 10px; |
|
150 |
} |
|
151 |
|
8adcec
|
152 |
.bottom-card{ |
9ebb88
|
153 |
padding: 0px 10px 20px 10px; |
8adcec
|
154 |
height: auto; |
9ebb88
|
155 |
width: 1292px; |
8adcec
|
156 |
margin-left: 20px; |
J |
157 |
justify-content: center; |
|
158 |
column-width: max-content; |
|
159 |
} |
9ebb88
|
160 |
.el-icon-notebook-1{ |
W |
161 |
font-size: 40px; |
|
162 |
display: flex; |
|
163 |
justify-content: left; |
fbed8e
|
164 |
} |
9ebb88
|
165 |
.el-icon-setting{ |
W |
166 |
font-size: 40px; |
|
167 |
display: flex; |
|
168 |
justify-content: left; |
|
169 |
} |
|
170 |
.el-icon-s-unfold{ |
|
171 |
font-size: 40px; |
|
172 |
display: flex; |
|
173 |
justify-content: left; |
|
174 |
} |
|
175 |
.el-icon-cpu{ |
|
176 |
font-size: 40px; |
|
177 |
display: flex; |
|
178 |
justify-content: left; |
|
179 |
} |
|
180 |
.el-icon-upload2 { |
|
181 |
font-size: 40px; |
|
182 |
display: flex; |
|
183 |
justify-content: left; |
|
184 |
} |
|
185 |
.el-icon-finished{ |
|
186 |
font-size: 40px; |
|
187 |
display: flex; |
|
188 |
justify-content: left; |
|
189 |
} |
|
190 |
.el-divider--vertical{ |
|
191 |
width:2px; |
|
192 |
height:40px; //更改竖向分割线长度 |
|
193 |
vertical-align:middle; |
|
194 |
position:relative; |
|
195 |
} |
|
196 |
.nextLine{ |
|
197 |
display: block; |
8adcec
|
198 |
margin-left: 20px; |
fd2207
|
199 |
} |
懒 |
200 |
|
|
201 |
|
|
202 |
</style> |