春风项目四线（CVT线）
查看 | 历史 | 提交 | 提交对比
yyt
2024-06-26 572f63fab7f868f3fc5037c4dc7c46e397511597
提交 | 用户 | 时间
0cceb6 1 <template>
Y 2   <el-row :gutter="40" class="panel-group">
3     <el-card class="bottom-card">
4       <div slot="header" class="clearfix">
5         <span style="font-size: 20px;font-weight: bold">单日累计产量</span>
6       </div>
7
8       <div style="display: flex; margin-top: 20px; height: 80px;">
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>
15           </div>
16         </div>
17         <div class="transition-box" style="background-color: orange">
18           <i class="el-icon-setting"></i>
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>
23           </div>
24
25         </div>
26         <div class="transition-box" style="background-color: mediumpurple">
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>
32           </div>
33         </div>
34         <div class="transition-box" style="background-color: cornflowerblue">
35           <i class="el-icon-cpu"></i>
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>
42         <div class="transition-box" style="background-color: green">
43           <i class="el-icon-upload2"></i>
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>
57         </div>
58       </div>
59
60
61     </el-card>
62   </el-row>
63
64 </template>
65
66 <script>
67 import CountTo from 'vue-count-to'
68 import { getProduceNumToday } from '@/api/main/da/passingStationCollection/passingStationCollection'
69
70 export default {
71   components: {
72     CountTo
73   },
74   data(){
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   },
90   methods: {
91     handleSetLineChartData(type) {
92       this.$emit('handleSetLineChartData', type)
93     },
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       });
123     }
124   },
125   mounted() {
126     this.getData1(),
127     this.getData2(),
128     this.getData3(),
129     this.getData4(),
130     this.getData5(),
131     this.getData6()
132   }
133 }
134 </script>
135
136 <style lang="scss" scoped>
137
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
152 .bottom-card{
153   padding: 0px 10px 20px 10px;
154   height: auto;
155   width: 1292px;
156   margin-left: 20px;
157   justify-content: center;
158   column-width: max-content;
159 }
160 .el-icon-notebook-1{
161   font-size: 40px;
162   display: flex;
163   justify-content: left;
164 }
165 .el-icon-setting{
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;
198   margin-left: 20px;
199 }
200
201
202 </style>