11-mes-new/src/views/orderManage/orderManagerCockpit/components/workOrder.vue
2022-11-28 15:02:51 +08:00

111 lines
2.8 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%;
height: 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>