美的大屏
查看 | 历史 | 提交 | 提交对比
懒羊羊
2024-01-23 4f91e27a1a497b5ed9de6be2267a8a57085e7c82
提交 | 用户 | 时间
9715e8 1 <template>
懒 2   <div class="content-box2">
3     <dv-border-box-6>
4     <div>
4f91e2 5         <div class="top-top">工单编号</div>
9715e8 6 <!--        <div class="top-bottom">{{orderDetail.workOrderNo}}</div>-->
懒 7       <div class="top-bottom selectBottom">
8
9       <el-select class="mySelect" v-model="value" @change="handleSelectChange" placeholder="请选择">
10           <el-option
11               v-for="item in options"
12               :key="item.value"
13               :label="item.label"
14               :value="item.value">
15           </el-option>
16       </el-select>
17       </div>
18     </div>
19     </dv-border-box-6>
20     <dv-border-box-6>
21       <div>
22         <div class="top-top">产品名称</div>
23         <div style="font-size: 20px;margin-top: 75px;margin-left: 30px;color: #71CAFC">{{orderDetail.materialName}}</div>
24       </div>
25     </dv-border-box-6>
26     <dv-border-box-6>
27       <div>
28         <div class="top-top">计划数量</div>
29         <div class="top-bottom blue">{{orderDetail.planQty}}</div>
30       </div>
31     </dv-border-box-6>
32     <dv-border-box-6>
33       <div>
34         <div class="top-top">出料数量</div>
35         <div class="top-bottom blue">{{orderDetail.actualQty}}个</div>
36       </div>
37     </dv-border-box-6>
38     <dv-border-box-6>
39       <div>
40         <div class="top-top">NG数量</div>
41         <div class="top-bottom blue">{{orderDetail.NgNumber}}个</div>
42       </div>
43     </dv-border-box-6>
44     <dv-border-box-6>
45       <div>
46         <div class="top-top">合格率</div>
47         <div class="top-bottom orange">{{orderDetail.passRate}}%</div>
48       </div>
49     </dv-border-box-6>
50     <dv-border-box-6>
51       <div>
52         <div class="top-top">完成率</div>
53         <div class="top-bottom orange">{{orderDetail.completionRate}}%</div>
54       </div>
55     </dv-border-box-6>
56     <dv-border-box-6>
57       <div>
58         <div class="top-top">剩余时间(小时)</div>
59         <div class="top-bottom blue">{{orderDetail.remainder}}</div>
60       </div>
61     </dv-border-box-6>
62   </div>
63 </template>
64
65 <script>
66 export default {
67   name: "top",
68   data() {
69     return {
70       orderDetail: {
71         "materialName":"Ebike中置电机总成（MIGIC C1 36V）",
72         "planQty":30,
73         "completionRate":100,
74         "workOrderNo":"M202311220006",
75         "actualQty":30,
76         "remainder":0,
77         "NgNumber":0,
78         "passRate":100
79       },
80       options: [{
81         value: 'M202311220001',
82         label: 'M202311220001',
83       }, {
84         value: 'M202311220002',
85         label: 'M202311220002'
86       }, {
87         value: 'M202311220003',
88         label: 'M202311220003'
89       }, {
90         value: 'M202311220004',
91         label: 'M202311220004'
92       }, {
93         value: 'M202311220005',
94         label: 'M202311220005'
95       }],
96       value: ''
97     }
98   },
99   mounted() {
100     this.orderListInit();
101     this.tops();
102     this.changeTiming();
103     this.value = this.options[0].value; // 设置默认选中第一个选项
104   },
105   methods: {
106     // eslint-disable-next-line no-unused-vars
107     handleSelectChange(value) {
108       // 触发自定义事件
109       this.$bus.$emit('refresh-components', value)
110       this.tops();
111     },
112     tops(){
113       // this.orderListInit();
114       console.log(this.value);
115       this.$http.get('http://172.20.1.10:8080/productionOrdeInfo/topData?workOrderNo='+this.value)
116       // this.$http.get('http://127.0.0.1:8080/productionOrdeInfo/topData?workOrderNo='+this.value)
117           .then((response)=>{
118             this.orderDetail = response.data.data;
119             console.log(response.data.data);
120           })
121     },
122     orderListInit(){
123       this.$http.get('http://172.20.1.10:8080/productionOrdeInfo/orderDescListFive')
124       // this.$http.get('http://127.0.0.1:8080/productionOrdeInfo/orderDescListFive')
125           .then((response)=>{
126             this.options = response.data.data;
127             this.value = this.options[0].value; // 设置默认选中第一个选项
128
129           })
130     },
131     changeTiming() {
132       setInterval(() => {
133         this.tops();
134         this.orderListInit();
135       }, 300000)
136     },
137   }
138 }
139 </script>
140
141 <style scoped>
142   .content-box2{
143     height: 200px;
144     display: grid;
145     grid-template-columns: 3fr 3fr 3fr 3fr 3fr 3fr 3fr 3fr;
146   }
147   .top-top{
148     font-size: 25px;
149     text-align: center;
150     margin-top: 40px;
151   }
152   .top-bottom{
153     font-size: 30px;
154     text-align: center;
155     margin-top: 80px;
156   }
157   .adaptive-font-size {
158     font-size: calc(1vw + 1vh + 1vmin);
159   }
160    /deep/.el-input__inner {
161      background-color: #0f1325;
162      color: #71CAFC;
163      font-size: 20px;
164      border: 1px solid #0f1325;
165    }
166   .blue{
167     color: #71CAFC;
168   }
169   .orange{
170     color: #FB9D7E;
171   }
172   .red{
173     color: #FF0000;
174   }
175   .green{
176     color: #00FF00;
177   }
178   .content-box{
179     height: 200px;
180     display: grid;
181     grid-template-columns: 3fr 3fr 3fr 3fr 3fr 3fr 3fr 3fr;
182   }
183   .content-box1{
184   }
185   .el-select .el-input,
186   .el-select-dropdown .el-select-dropdown__item {
187     font-size: 16px;
188   }
189   .selectBottom{
190     width: 90%;
191     margin-left: 10px;
192     margin-top: 70px;
193   }
194   /*.mySelect{*/
195   /*  */
196   /*}*/
197 </style>