gx

queenwuli

2021-01-12 a6653e19d20a61e7b8f788037d2a4df3f93a4f32

 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;
   }
   /* 表格样式开始 */
   
@@ -144,10 +227,13 @@
      border-color: #EDEAF4;
      border-style: solid;
      border-width: 0;
      border-top-width: 1px;
      /* border-top-width: 1px; */
      border-left-width: 1px;
      border-bottom-width: 1px;
      /* border-bottom-width: 1px; */
      color: #111111;
   }
   .h-tr:nth-last-child(1){
      border-bottom-width: 1px;
   }
   /* 单元格 */
   .h-td{
@@ -157,7 +243,9 @@
      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;