110 lines
2.7 KiB
Vue
110 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 ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
|
|
+ 'px'}"
|
|
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: 15px">
|
|
<span>产品名称：<span class="light-color">{{ item.name }}</span></span>
|
|
<span class="fr">
|
|
产线：
|
|
<span class="light-color" :style="{marginRight: 25 * beilv + 'px'}">{{ item.line }}</span>
|
|
</span>
|
|
</p>
|
|
<p style="paddingLeft: 15px">
|
|
<span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
|
|
</p>
|
|
<div style="paddingLeft: 15px">
|
|
<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: 1;
|
|
height: 100%;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
.box {
|
|
width: 49.5%;
|
|
margin-bottom: 8px;
|
|
background-image: url('../../../../assets/img/cockpit/module-back.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: auto;
|
|
.light-color {
|
|
opacity: 0.5;
|
|
}
|
|
.blue-color {
|
|
color: #3E6AE9;
|
|
}
|
|
.line1::before {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 4px;
|
|
height: calc(14px * var(--beilv));
|
|
border-radius: 2px;
|
|
margin-right: 8px;
|
|
vertical-align: top;
|
|
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>
|