<template>
|
<!-- 看板 -->
|
<view class="container">
|
<view class="header">
|
<text>预约时间</text>
|
<picker mode="date" @change="bindTimeChange">
|
<text class="blue ml-10">{{time}}</text>
|
</picker>
|
</view>
|
<view class="box">
|
<text class="item white-bg">未上班</text>
|
<text class="item green-bg">可预约</text>
|
<text class="item pink-bg">已预约</text>
|
<text class="item blue-bg">服务中</text>
|
<text class="item yellow-bg">服务结束</text>
|
</view>
|
<view class="content">
|
<view class="left">
|
<view class="left-header font-bold">姓名</view>
|
<view class="left-row" v-for="item in list">{{item.userName}}</view>
|
</view>
|
<scroll-view scroll-x="true" class="right">
|
<view class="right-header" :style="{width: totalWidth+'px'}">
|
<view class="right-row" v-for="item in timeList">{{item}}</view>
|
</view>
|
<view class="right-content" :style="{width: totalWidth+'px'}" v-for="item in list">
|
<view class="right-row" v-for="op in item.items">
|
<view :style="{width: op.spanLength*2+'px'}" class="right-row-con" :class="caculateBg(op)" >
|
<navigator v-if="op.workType==3" :url="'./serviceOrderDetail?id='+op.serviceId" hover-class="none">
|
<view class="flex">
|
<view class="flex align-left">
|
<image src="../../static/images/order-icon1.png" class="icon"></image>
|
<text class="ellipsis">{{op.vipName}}</text>
|
</view>
|
<text style="margin-left: 2px;">{{op.spanLength*2}}min</text>
|
</view>
|
<view class="flex align-left">
|
<image src="../../static/images/order-icon2.png" class="icon"></image>
|
<text class="ellipsis">{{op.projName}}</text>
|
</view>
|
<view class="flex align-left">
|
<image src="../../static/images/order-icon3.png" class="icon"></image>
|
<text class="ellipsis">{{op.bedName || '-'}}</text>
|
</view>
|
</navigator>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
components: {
|
|
},
|
data(){
|
return{
|
time: this.$utils.formmatTime('YY-mm-dd'),
|
list: [],
|
timeList: [],
|
totalWidth: 750
|
}
|
},
|
onLoad() {
|
this.loadList()
|
},
|
methods:{
|
bindTimeChange(e){
|
this.time = e.detail.value;
|
this.loadList();
|
},
|
loadList(){
|
this.$httpUtils.request('/api/occupancy/getKanban/'+this.time).then((res) => {
|
if(res.status == 200){
|
this.timeList = res.mapInfo.tableHead;
|
this.list = res.rows;
|
this.totalWidth = res.mapInfo.timeSpan * 2;
|
}
|
})
|
},
|
caculateBg(op){
|
if(op.workType==1){
|
return ''
|
}else if(op.workType==2){
|
return 'green-bg'
|
}else{
|
if(op.serviceState === '服务中'){
|
return 'blue-bg'
|
}
|
if(op.serviceState === '服务结束'){
|
return 'yellow-bg'
|
}
|
return 'pink-bg'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.container{
|
background: #FFFFFF;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
margin: 10px;
|
padding: 10px 10px;
|
}
|
.header{
|
display: flex;
|
font-size: 16px;
|
}
|
.box{
|
display: flex;
|
justify-content: space-between;
|
margin-top: 15px;
|
}
|
.box .item{
|
width: 60px;
|
text-align: center;
|
font-size: 12px;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
line-height: 24px;
|
}
|
|
.white-bg{
|
background: #fafafa;
|
}
|
.green-bg{
|
background: #ECF7E6;
|
}
|
.pink-bg{
|
background: #FDEDF0;
|
}
|
.blue-bg{
|
background: #BAD8FD;
|
}
|
.yellow-bg{
|
background: #F8ECDA;
|
}
|
.content{
|
display: flex;
|
border: 1px solid #EDEAF4;
|
margin-top: 14px;
|
}
|
.content .left{
|
width: 60px;
|
flex: 0 0 60px;
|
border-right: 1px solid #EDEAF4;
|
font-size: 14px;
|
}
|
.left-header,.right-header{
|
height: 36px;
|
line-height: 36px;
|
text-align: center;
|
font-size: 14px;
|
width: 100%;
|
}
|
.left-row{
|
text-align: center;
|
line-height: 80px;
|
border-top: 1px solid #EDEAF4;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
white-space:nowrap;
|
|
}
|
.content .right{
|
flex: 1;
|
overflow: hidden;
|
font-size: 12px;
|
}
|
.right-header{
|
display: flex;
|
flex-wrap: nowrap;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.right-content{
|
display: flex;
|
align-items: center;
|
height: 80px;
|
border-bottom: 1px solid #EDEAF4;
|
background: #fafafa;
|
}
|
.right-content:nth-last-of-type(1){
|
border-bottom: 0;
|
}
|
.right-header .right-row{
|
flex: 1;
|
}
|
.right-row-con{
|
font-size: 10px;
|
height: 80px;
|
text-align: left;
|
padding: 5px;
|
box-sizing: border-box;
|
}
|
.icon{
|
width: 12px;
|
height: 12px;
|
flex: 0 0 12px;
|
margin-right: 5px;
|
}
|
.ellipsis{
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
/* 表格样式开始 */
|
|
/* 行 */
|
.h-tr{
|
box-sizing: border-box;
|
display: flex;
|
/* align-items: stretch; */
|
align-content: center;
|
border-color: #EDEAF4;
|
border-style: solid;
|
border-width: 0;
|
/* border-top-width: 1px; */
|
border-left-width: 1px;
|
/* border-bottom-width: 1px; */
|
color: #111111;
|
}
|
.h-tr:nth-last-child(1){
|
border-bottom-width: 1px;
|
}
|
/* 单元格 */
|
.h-td{
|
min-width: 80px;
|
box-sizing: border-box;
|
padding: 3px;
|
border-color: #EDEAF4;
|
border-style: solid;
|
border-width: 0;
|
border-top-width: 1px;
|
border-right-width: 1px;
|
/* border-bottom-width: 1px; */
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
/* 表头 */
|
.h-thead{
|
background-color: #FFFFFF;
|
}
|
</style>
|
