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>
|