gx

queenwuli

2021-01-12 a6653e19d20a61e7b8f788037d2a4df3f93a4f32

 hive-app/pages/workbench/board.vue

@@ -3,14 +3,16 @@
   <view class="container">
      <view class="header">
         <text>预约时间</text>
         <text class="blue ml-10">{{time}}</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> -->
         <text class="item blue-bg">服务中</text>
         <text class="item yellow-bg">服务结束</text>
      </view>
      <view class="content">
         <view class="left">
@@ -23,7 +25,7 @@
            </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="op.workType==2?'green-bg':(op.workType==3)?'pink-bg':''" >
                  <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">
@@ -66,7 +68,16 @@
      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){
@@ -75,6 +86,21 @@
                  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'
            }
         }
      }
   }
@@ -93,11 +119,12 @@
      padding: 10px 10px;
   }
   .header{
      display: flex;
      font-size: 16px;
   }
   .box{
      display: flex;
      /* justify-content: space-between; */
      justify-content: space-between;
      margin-top: 15px;
   }
   .box .item{
@@ -107,7 +134,6 @@
      border: 1px solid #EDEAF4;
      border-radius: 4px;
      line-height: 24px;
      margin-right: 10px;
   }
   
   .white-bg{