long
/
mes_mobile
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
mes_mobile/pages/schedul/list.vue

267 lines
7.0 KiB
Vue
Raw Normal View History

修改设备工单
2024-04-30 16:08:07 +08:00
<template>
<view class="page_padding columnFlex">
<view class="statistics" v-if="form.date == 'day'">
<view class="title font14">排程日统计</view>
<view class="boxView contentboxsty">
<view class="item">
<view class="name font13">待生产</view>
<view class="font_bold">32</view>
</view>
<view class="item">
<view class="name font13">生产中</view>
<view class="font_bold">12</view>
</view>
<view class="item">
<view class="name font13">生产完成</view>
<view class="font_bold">102</view>
</view>
</view>
</view>
<view class="comView font13" :class="form.date == 'day'?'padd12 contentboxsty':''">
<view class="dateView">
<view class="dateTitle">
<view class="title font14">排程视图 <text class="month">{{dateText}}</text></view>
<view class="dateSwitch">
<div class="item" :class="form.date == item.value?'dateActive':''" @click="form.date = item.value" v-for="(item,index) in dateList" :key="index">{{item.name}}</div>
</view>
</view>
<view :class="form.date !='day'?'contentboxsty mar_top12 mar_bot12 padd12':'calendarView'">
<calendar></calendar>
</view>
</view>
<view class="speedView contentboxsty" :class="form.date!='day'?'padd12':''">
<view class="left">
<view class="line"></view>
</view>
<view class="right detail_list">
<view class="boxItem padd12" v-for="(item,index) in list" :key="index">
<view class="time">{{item.time}}</view>
<view class="boxView card_right" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">
<view class="cardStatus" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">{{item.status}}</view>
<view class="row font_bold">
<view class="name">工单号：</view>
<view class="text">{{item.sn}}</view>
</view>
<view class="row">
<view class="name">规格：</view>
<view class="text">4*9*63</view>
</view>
<view class="row rowDate">
<view class="date">
<text class="name">开始时间：</text>
<text class="text color">00:00</text>
</view>
<view class="date">
<text class="name">剩余时间：</text>
<text class="text">00:30</text>
</view>
</view>
</view>
<view class="yieldView">
<view class="box">
<view class="num font18 font_bold">74.3<text class="symbol font12">%</text></view>
<view class="name">出材率</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
list:[
{name:'',sn:"SO20240426000001",num:20,status:'待生产',type:1,time:'00:00'},
{name:'',sn:"SO20240426000001",num:70,status:'生产中',type:2,time:'00:30'},
{name:'',sn:"SO20240426000001",num:90,status:'生产完成',type:3},
{name:'',sn:"SO20240422000002",num:20,status:'生产暂停',type:4,time:'01:00'},
{name:'',sn:"SO20240426000001",num:70,status:'待生产',type:1},
{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1,time:'03:00'},
{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1},
],
dateList:[
{name:'日',id:'',value:'day'},
{name:'周',id:'',value:'week'},
{name:'月',id:'',value:'month'},
],
dateText:'',
form:{
date:'day'
}
}
},
provide(){
return{
params:this.form,
changeDateText:this.changeDate
}
},
methods: {
changeDate(val){
this.dateText = val;
}
}
}
</script>
<style scoped lang="scss">
.statistics{
.boxView{
display: flex;flex-direction: row;align-items: center;margin-top: 12px;
.item{
flex: 1;display: flex;align-items: center;justify-content:center;flex-direction: column;padding: 12px 0;
.name{padding-bottom: 10px;}
}
}
}
.comView{margin-top: 12px;}
.dateView{width: 100%;}
.dateTitle{
width: 100%;display: flex;align-items: center;justify-content: space-between;
.dateSwitch{
display: flex;align-items: center;background: $uni-bg-color-whith;border-radius: 20px;padding: 2px 3px;
.item{
padding: 5px 18px;
color: $uni-text-color-default;
}
.dateActive{
border-radius: 20px;
background: $uni-color-primary;
color: $uni-text-color-inverse;
}
}
}
.calendarView{
margin: 20px 0;
}
.speedView{
width: 100%;display: flex;box-sizing: border-box;
.left{
flex-basis: 45px;
display: flex;align-items: flex-start;flex-direction: column;padding: 12px 0 12px 18px;box-sizing: border-box;
.line{
position: relative;width: 1px;height: 100%;background: $uni-text-color-info;
}
.line::after{
content: '';
position: absolute;
z-index: 20;
bottom: 0;
left: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: $uni-text-color-info;
}
}
.right{
flex: 1;margin: 0;
.boxItem:first-child{
margin-top: 6px;
}
.boxItem:last-child{
margin-bottom: 6px;
}
.boxItem{
background: $uni-bg-color-schedule;
margin: 12px 0;
padding-left: 20px;
border-radius: 8px;
position: relative;
z-index: 10;
.boxView{
display: block;
}
}
.time{
position: absolute;
left: -45px;
top: 0;
background: $uni-bg-color-primary;
padding: 4px 2px;
}
.yieldView{
position: absolute;
right: 12px;
top: 12px;
z-index: 20;
height: calc(100% - 30px);
display: flex;
align-items: center;
justify-content: center;
.box{
display: flex;flex-direction: column;align-items: center;
.num{color: $uni-text-color-warning;}
.name{color: $uni-text-color-warning;}
}
}
.cardStatus{
display: inline-block;
}
.row{
display: flex;align-items: center;
margin-top: 12px;
.date{
display: flex;align-items: center;
}
}
.rowDate{
justify-content: space-between;
.color{
color: $uni-text-color-primary;
}
}
.status::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 12px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: $uni-bg-color-success;
}
.success::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 12px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: $uni-bg-color-success;
}
.warning::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 12px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: $uni-bg-color-warning;
}
.error::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 12px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: $uni-bg-color-error;
}
}
}
</style>