From a6653e19d20a61e7b8f788037d2a4df3f93a4f32 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Tue, 12 Jan 2021 16:51:03 +0800
Subject: [PATCH] gx
---
hive-app/pages/workbench/board.vue | 243 ++++++++++++++++++++++++++++++++----------------
1 files changed, 163 insertions(+), 80 deletions(-)
diff --git a/hive-app/pages/workbench/board.vue b/hive-app/pages/workbench/board.vue
index 0ce4517..7b02c79 100644
--- a/hive-app/pages/workbench/board.vue
+++ b/hive-app/pages/workbench/board.vue
@@ -1,81 +1,53 @@
<template>
<!-- 看板 -->
- <view>
+ <view class="container">
+ <view class="header">
+ <text>预约时间</text>
+ <picker mode="date" @change="bindTimeChange" :end="endDate">
+ <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="content-time font-16 flex align-center">
- <text>预约时间</text>
- <text class="blue ml-10">2020-12-25</text>
+ <view class="left">
+ <view class="left-header font-bold">姓名</view>
+ <view class="left-row" v-for="item in list">{{item.userName}}</view>
</view>
- <view class="content-condition font-12 flex align-center justify-around mt-20">
- <view class="content-condition-item center item-white">
- <text>未上班</text>
+ <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="content-condition-item center item-green">
- <text>可预约</text>
- </view>
- <view class="content-condition-item center item-pink">
- <text>已预约</text>
- </view>
- <view class="content-condition-item center item-blue">
- <text>服务中</text>
- </view>
- <view class="content-condition-item center item-yellow">
- <text>服务结束</text>
- </view>
- </view>
- <view class="itme-box mt-20">
- <scroll-view scroll-x="true" class="h-table">
- <view class="h-tr h-thead">
- <view class="h-td center">姓名</view>
- <view class="h-td center">10:00</view>
- <view class="h-td center">10:30</view>
- <view class="h-td center">11:00</view>
- <view class="h-td center">11:30</view>
- <view class="h-td center">12:00</view>
- <view class="h-td center">12:30</view>
- <view class="h-td center">13:00</view>
- <view class="h-td center">13:30</view>
- </view>
- <view class="h-tr">
- <view class="h-td center">周晓</view>
- <view class="h-td font-12 flex flex-v item-yellow" style="min-width: 240px;">
- <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-center">
- <text class="iconfont iconnvshi mr-5"></text>
- <text>于倩</text>
+ <view class="flex align-left">
+ <image src="../../static/images/order-icon1.png" class="icon"></image>
+ <text class="ellipsis">{{op.vipName}}</text>
</view>
- <view class="flex align-center ml-10">
- <text class="iconfont iconzhong mr-5"></text>
- <text>90分钟</text>
- </view>
+ <text style="margin-left: 2px;">{{op.spanLength*2}}min</text>
</view>
- <view class="flex align-center mt-5">
- <text class="iconfont iconxiangmu mr-5"></text>
- <text>脸部抗衰护理</text>
+ <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-center mt-5">
- <text class="iconfont iconshafa mr-5"></text>
- <text>VIP-2 (星海店)</text>
+ <view class="flex align-left">
+ <image src="../../static/images/order-icon3.png" class="icon"></image>
+ <text class="ellipsis">{{op.bedName || '-'}}</text>
</view>
- </view>
+ </navigator>
</view>
- <view class="h-td"></view>
</view>
- <view class="h-tr">
- <view class="h-td">陈沾</view>
- <view class="h-td item-green"></view>
- </view>
- <view class="h-tr">
- <view class="h-td">古秋燕</view>
- <view class="h-td"></view>
- </view>
- <view class="h-tr">
- <view class="h-td">彭艳芳</view>
- <view class="h-td"></view>
- </view>
- </scroll-view>
- </view>
+ </view>
+ </scroll-view>
+
</view>
</view>
</template>
@@ -87,6 +59,48 @@
},
data(){
return{
+ time: this.$utils.formmatTime('YY-mm-dd'),
+ list: [],
+ timeList: [],
+ totalWidth: 750
+ }
+ },
+ onLoad() {
+ this.loadList()
+ },
+ computed:{
+ endDate(){
+ return this.$utils.formmatTime('YY-mm-dd')
+ }
+ },
+ 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'
+ }
}
}
}
@@ -96,42 +110,111 @@
page{
background: #F6F6F8;
}
- .content{
+ .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 0;
+ padding: 10px 10px;
}
- .content-time{
- padding: 0 10px;
+ .header{
+ display: flex;
+ font-size: 16px;
}
- .content-condition-item{
+ .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;
}
- .item-white{
+
+ .white-bg{
background: #fafafa;
}
- .item-green{
+ .green-bg{
background: #ECF7E6;
}
- .item-pink{
+ .pink-bg{
background: #FDEDF0;
}
- .item-blue{
+ .blue-bg{
background: #BAD8FD;
}
- .item-yellow{
+ .yellow-bg{
background: #F8ECDA;
}
-
-
- .itme-box{
- background: #FFFFFF;
+ .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;
+ }
+ .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;
}
/* 表格样式开始 */
--
Gitblit v1.9.1