102 lines
2.7 KiB
Vue
102 lines
2.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="order-box" :style="{ padding: '0 ' + 16 * beilv + 'px', fontSize: 14 * beilv + 'px'}">
|
|||
|
|
<!-- 小块 -->
|
|||
|
|
<div v-for="(item,index) in orderMsg" :key="index" :style="{ padding: 10 * beilv + 'px' + ' 20px ' + 16 * beilv + 'px' + ' 16px'}" class="box">
|
|||
|
|
<p class="line1">
|
|||
|
|
<span>工单编号：<span class="light-color">{{ item.code }}</span></span>
|
|||
|
|
<span class="fr">
|
|||
|
|
状态：
|
|||
|
|
<span class="state">{{ item.state }}</span>
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p :style="{ paddingLeft: 15 * beilv + 'px'}">
|
|||
|
|
<span>产品名称：<span class="light-color">{{ item.name }}</span></span>
|
|||
|
|
<span class="fr">
|
|||
|
|
产线：
|
|||
|
|
<span class="light-color" style="margin-right: 25px">{{ item.line }}</span>
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p :style="{ paddingLeft: 15 * beilv + 'px'}">
|
|||
|
|
<span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
|
|||
|
|
</p>
|
|||
|
|
<div :style="{ paddingLeft: 15 * beilv + 'px'}">
|
|||
|
|
<span v-if="item.percentage === '100%'" class="blue-color">√ 订单进度</span>
|
|||
|
|
<span v-else class="light-color">订单进度</span>
|
|||
|
|
<span class="light-color fr">{{ item.percentage }}</span>
|
|||
|
|
<div class="progress-box">
|
|||
|
|
<div
|
|||
|
|
class="progress"
|
|||
|
|
:style="{height: 8 * beilv + 'px', width: item.percentage}"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'WorkOrder',
|
|||
|
|
props: {
|
|||
|
|
orderMsg: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
beilv: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang='scss' scoped>
|
|||
|
|
.order-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.box {
|
|||
|
|
width: 49.5%;
|
|||
|
|
height: 49.5%;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
background-image: url('../../../../assets/img/cockpit/module-back.png');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
.light-color {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
.blue-color {
|
|||
|
|
color: #3E6AE9;
|
|||
|
|
}
|
|||
|
|
.line1::before {
|
|||
|
|
display: inline-block;
|
|||
|
|
content: "";
|
|||
|
|
width: 4px;
|
|||
|
|
height: 14px;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
background-color: #4BFFC8;
|
|||
|
|
}
|
|||
|
|
.state {
|
|||
|
|
display: inline-block;
|
|||
|
|
color: #70F97F;
|
|||
|
|
padding: 2px 4px;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
background: #366F5D;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.progress-box {
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background: #1E2D45;
|
|||
|
|
.progress {
|
|||
|
|
text-align: right;
|
|||
|
|
line-height: 18px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
padding-right: 5px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
background: linear-gradient(270deg, #47F8DC 0%, #4573FE 100%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|