春风项目四线(合箱线、总装线)
查看 | 历史 | 提交 | 提交对比
yyt
2024-01-24 87ebb286373e365b4bb427177b26cf00dda1e2f3
提交 | 用户 | 时间
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>
9ebb88 17         <div class="transition-box" style="background-color: cornflowerblue">
W 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>
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>
W 34         <div class="transition-box" style="background-color: green">
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: orange">
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>
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>