267 lines
7.0 KiB
Vue
267 lines
7.0 KiB
Vue
<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> |