mes_mobile/pages/production/productionOrder.vue

136 lines
3.0 KiB
Vue

<template>
<!-- 生产工单 -->
<view class="pagepaddings">
<view v-for="(item,index) in list" :key="index" class="page_list contentboxsty font13">
<view @click="toDetail()">
<view class="list_top">
<view class="top_left">
工单号:{{item.name}}
</view>
<view class="top_right">
工单详情
</view>
<view class="iconfont icon-gengduo-1"></view>
</view>
<view class="list_centre">
<view class="centre_left">
<view class="">
算法出材率
</view>
<view class="percentage font24">
{{item.algorithm}}%
</view>
</view>
<view class="centre_left">
<view class="">
算法出材率
</view>
<view class="percentage font24">
{{item.reality}}%
</view>
</view>
</view>
<view class="list_below">
<view class="row">
<view class="row_left">
<text>状态:</text>
<text>{{item.state}}</text>
</view>
<view class="row_right">
<text>加工规格:</text>
<text>{{item.specs}}</text>
</view>
</view>
<view class="row">
<view class="row_left">
<text>生产开始:</text>
<text>{{item.time}}</text>
</view>
<view class="row_right">
<text>工单耗时:</text>
<text>{{item.timeConsuming}}</text>
</view>
</view>
<view class="row">
<view class="row_left">
<text>工单数量:</text>
<text>{{item.number}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[{
name:'SO202401111004',
algorithm:'81.5',
reality:'81.4',
state:'生产中',
specs:'4*9*3.66',
time:'jan-11 10:05',
timeConsuming:'3.5H',
number:'12.66m³'
},{
name:'SO202401111004',
algorithm:'81.5',
reality:'81.4',
state:'生产中',
specs:'4*9*3.66',
time:'jan-11 10:05',
timeConsuming:'3.5H',
number:'12.66m³'
},{
name:'SO202401111004',
algorithm:'81.5',
reality:'81.4',
state:'生产中',
specs:'4*9*3.66',
time:'jan-11 10:05',
timeConsuming:'3.5H',
number:'12.66m³'
},{
name:'SO202401111004',
algorithm:'81.5',
reality:'81.4',
state:'生产中',
specs:'4*9*3.66',
time:'jan-11 10:05',
timeConsuming:'3.5H',
number:'12.66m³'
}]
}
},
methods: {
//跳转工单详情
toDetail(){
uni.navigateTo({
url:'/pages/production/productionDetail'
})
},
}
}
</script>
<style lang="scss">
.page_list{
.list_top{display: flex;padding: 12px 0;border-bottom: 1px solid #2D3A6F;margin-bottom: 8px;
.top_left{flex: 1;}
}
.list_centre{display: flex;text-align: center;padding-bottom: 10px;
view{flex: 1;}
.percentage{color: #00B68D;}
}
.list_below{padding-bottom: 12px;
.row{display: flex;padding-top: 10px;
view{flex: 1;}
}
}
}
</style>