服装智能制造软件平台V3.0
http://182.92.169.222/hhxy/#/user/login
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
7.4 KiB
208 lines
7.4 KiB
<template> |
|
<div> |
|
<a-modal |
|
title="详情" |
|
:visible="visible" |
|
:confirm-loading="confirmLoading" |
|
:width='1500' |
|
@ok="handleOk" |
|
@cancel="handleCancel" |
|
style="display:flex;" |
|
> |
|
<div class="diaogua"> |
|
<div class="top"> |
|
<h1>黄淮服装智能制造实训平台人机排位图</h1><span class="number">编号：{{number}}</span> |
|
<div class="d-flex"> |
|
<p class="group">组别:{{group}}</p> |
|
</div> |
|
</div> |
|
<div class="main"> |
|
<el-descriptions border :column='4'> |
|
<el-descriptions-item label="日期 ">{{data.date}}</el-descriptions-item> |
|
<el-descriptions-item label="出库地点 ">{{data.retrievalLocation}}</el-descriptions-item> |
|
<el-descriptions-item label="接收人 ">{{data.receiver}}</el-descriptions-item> |
|
<el-descriptions-item label="运送人 ">{{data.carrier}}</el-descriptions-item> |
|
<el-descriptions-item label="订单号 ">{{data.orderCode}}</el-descriptions-item> |
|
<el-descriptions-item label="工单号">{{data.workOrderCode}}</el-descriptions-item> |
|
<el-descriptions-item label="物品编号 ">{{data.serialNumber}}</el-descriptions-item> |
|
<el-descriptions-item label="物品名称">{{data.itemName}}</el-descriptions-item> |
|
</el-descriptions> |
|
<table border="1" cellspacing="0" class="table" > |
|
<!-- 表头 --> |
|
<tr> |
|
<th>站位</th> |
|
<th>车间物流</th> |
|
<th>站位</th> |
|
</tr> |
|
<tr> |
|
<td style="width: 20%;"> |
|
<ul class="one"> |
|
<li style="height:33px;"></li> |
|
<li v-for="(num1,index) in list1" :key="index" ref="listnum1">{{num1}}</li> |
|
</ul> |
|
</td> |
|
<td rowspan="16" class="two" style="width: 60%;"> |
|
<div> |
|
<img src="@/assets/row1.jpg" alt="" class="img1"> |
|
<img src="@/assets/row2.jpg" alt="" class="img2"> |
|
</div> |
|
</td> |
|
<td style="width: 20%;"> |
|
<ul class="three"> |
|
<li v-for="(num2,index) in list2" :key="index" ref="listnum2">{{num2}}</li> |
|
<li style="height:33px;"></li> |
|
</ul> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td>成品框</td> |
|
<td>操作台</td> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
</a-modal> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'diaogua', |
|
components: { |
|
}, |
|
data(){ |
|
return{ |
|
ModalText: 'Content of the modal', |
|
selectId:'2', |
|
data:{}, |
|
headStyle:{ |
|
height:'10px' |
|
}, |
|
visible: false, |
|
confirmLoading: false, |
|
// 编号 |
|
number:'SRS-05', |
|
// 组别 |
|
group:2, |
|
list1:[16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,], |
|
list2:[15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,], |
|
tableData1: [ |
|
{date: '16'}, |
|
{date: '17'}, |
|
{date: '18'}, |
|
{date: '19'}, |
|
{date: '20'}, |
|
{date: '21'}, |
|
{date: '22'}, |
|
{date: '23'}, |
|
{date: '24'}, |
|
{date: '25'}, |
|
{date: '26'}, |
|
{date: '27'}, |
|
{date: '28'}, |
|
{date: '29'}, |
|
{date: '30'}, |
|
], |
|
tableData2: [ |
|
{date: '15'}, |
|
{date: '14'}, |
|
{date: '13'}, |
|
{date: '12'}, |
|
{date: '11'}, |
|
{date: '10'}, |
|
{date: '9'}, |
|
{date: '8'}, |
|
{date: '7'}, |
|
{date: '6'}, |
|
{date: '5'}, |
|
{date: '4'}, |
|
{date: '3'}, |
|
{date: '2'}, |
|
{date: '1'}, |
|
] |
|
} |
|
}, |
|
methods: { |
|
showModal(id) { |
|
// console.log(this.selectId) |
|
this.visible = true; |
|
this.$http.get('/logisticsplanning/logisticsPlanning/selectById?id='+id).then( |
|
res=>{ |
|
this.data = res.result; |
|
console.log(this.data); |
|
this.initStyle(); |
|
} |
|
) |
|
}, |
|
handleOk(e) { |
|
this.ModalText = 'The modal will be closed after two seconds'; |
|
this.confirmLoading = true; |
|
console.log(this.data); |
|
setTimeout(() => { |
|
this.visible = false; |
|
this.confirmLoading = false; |
|
}, 1); |
|
}, |
|
handleCancel(e) { |
|
console.log('Clicked cancel button'); |
|
this.visible = false; |
|
}, |
|
initStyle(){ |
|
/* this.$refs.listnum1[0].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[1].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[2].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[3].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[4].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[5].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[6].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[7].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[8].style.backgroundColor="#f5222d";*/ |
|
this.$refs.listnum1[9].style.backgroundColor="#f5222d"; |
|
/* this.$refs.listnum1[10].style.backgroundColor="#f5222d";*/ |
|
this.$refs.listnum1[11].style.backgroundColor="#f5222d"; |
|
/* this.$refs.listnum1[12].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[13].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum1[14].style.backgroundColor="#f5222d";*/ |
|
|
|
/* this.$refs.listnum2[0].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[1].style.backgroundColor="#f5222d";*/ |
|
this.$refs.listnum2[2].style.backgroundColor="#f5222d"; |
|
/* this.$refs.listnum2[3].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[4].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[5].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[6].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[7].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[8].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[9].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[10].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[11].style.backgroundColor="#f5222d"; |
|
this.$refs.listnum2[12].style.backgroundColor="#f5222d";*/ |
|
this.$refs.listnum2[13].style.backgroundColor="#f5222d"; |
|
/* this.$refs.listnum2[14].style.backgroundColor="#f5222d";*/ |
|
} |
|
} |
|
|
|
} |
|
</script> |
|
|
|
<style scoped> |
|
*{margin: 0;padding: 0;} |
|
ul,li{list-style: none;} |
|
html{font-size: 62.5%;} |
|
.d-flex{display: flex;justify-content: space-between;} |
|
.diaogua{width: 100%;margin: 0 auto;background-color: #fff;} |
|
.top{width: 100%;height: 10rem;position: relative;} |
|
.top h1{width: 100%;height: 6rem;line-height: 6rem;text-align: center;} |
|
.top .number{position: absolute;right: 2rem;top: 3rem;} |
|
.top>div{width: 100%;height:4rem;} |
|
.top .group{text-align: right;width: 100%;margin-right: 2rem;} |
|
.main .table{border-color:'#EBEEF5';width: 16%;margin: 0 auto;} |
|
.table tr th, .table tr td { border-color:#EBEEF5;text-align: center; } |
|
.main .table tr{width: 100%!important;} |
|
|
|
.main .table tr .two>div{width:90%;margin: 0 auto;height: 35rem;border: 1rem solid #002060;border-radius:7rem;display: flex;justify-content: space-between;align-items: center;} |
|
.main .table tr .two>div img{width: 32.5px;height: 165px;} |
|
.main ul li{width: 100%;height: 6.25%;border: 0.1rem solid #000;border-bottom: none;box-sizing: border-box;background-color: #FFCC99;font-size: 1.4rem;font-weight: bold;} |
|
.main ul li:last-child{border-bottom:0.1rem solid #000;} |
|
|
|
</style>
|
|
|