ll
liukangdong
2024-08-29 986118de12da6830ffb0c86af8e70567352c9bb9
h5/pages/driver/queueUpRecord.vue
@@ -1,147 +1,193 @@
<template>
  <view class="main_app">
    <view class="main_name">
      <text class="mr12">物流入库月台</text>
      <u-icon name="arrow-down" color="#777777"></u-icon>
    </view>
    <!--  -->
    <view class="main_list">
      <view class="item">
        <view class="status">作业中</view>
        <image
          class="avatar"
          src="@/static/driver/ic_truck@2x.png"
          mode=""
        ></image>
        <view class="content">
          <view class="id_card">皖A</view>
          <view class="line">
            <view class="address">4号月台</view>
            <view class="time">
              <u-icon class="mr6" name="clock" color="#4d98a8"></u-icon>
              <text>01:02:02</text>
            </view>
          </view>
        </view>
      </view>
      <view class="item active">
        <view class="status padding">作业中</view>
        <view class="me">我</view>
        <image
          class="avatar"
          src="@/static/driver/ic_truck@2x.png"
          mode=""
        ></image>
        <view class="content">
          <view class="id_card">皖A</view>
          <view class="line">
            <view class="address">4号月台</view>
            <view class="time">
              <u-icon class="mr6" name="clock" color="#4d98a8"></u-icon>
              <text>01:02:02</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
   <view class="main_app">
      <view class="main_name">
         <text class="mr12">{{ platformObj.name }}</text>
         <!-- <u-icon name="arrow-down" color="#777777"></u-icon> -->
      </view>
      <!--  -->
      <view class="main_list">
         <view class="item" :class="{ active: item.driverId == driverInfo.memberId }" v-for="item in dataList" :key="item.id">
            <view class="status padding" v-if="item.status == 2">排队中</view>
            <view class="status" v-else :class="{ padding: item.status != 5 }">{{ statusMap[item.status] }}</view>
            <view v-if="item.driverId == driverInfo.memberId" class="me">我</view>
            <image v-if="item.driverId == driverInfo.memberId" class="avatar" src="@/static/driver/ic_truck_mine@2x.png" mode=""></image>
            <image v-else class="avatar" src="@/static/driver/ic_truck@2x.png" mode=""></image>
            <view class="content">
               <view class="id_card" v-if="item.carCodeFront">{{ item.carCodeFront.slice(0, 4) }}**{{ item.carCodeFront.slice(6) }}</view>
               <view class="line">
                  <view class="address">{{ item.platformName || '等待分配月台' }}</view>
                  <view class="time" v-if="item.status == 5">
                     <u-icon class="mr6" name="clock" color="#4d98a8"></u-icon>
                     <text>{{item.callDateTemp}}</text>
                  </view>
               </view>
            </view>
         </view>
      </view>
   </view>
</template>
<script>
import { driverLineUpDetail } from '@/api';
import { statusMap } from '@/utils/config.js';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
export default {
  data() {
    return {
    }
  }
}
   data() {
      return {
         statusMap,
         platformId: '',
         type: '',
         dataList: [],
         platformObj: {},
         driverInfo: uni.getStorageSync('driverInfo')
      };
   },
   onLoad(option) {
      this.type = option.type;
      this.platformId = option.platformId;
      this.getData(option.jobId || '');
   },
   methods: {
      getData(jobId) {
         const { platformId, type } = this;
         driverLineUpDetail({
            mobile: jobId ? '' : uni.getStorageSync('driverInfo').mobile,
            queryType: jobId ? 1 : 0,
            jobId: jobId
         }).then(res => {
            this.platformGroupList = res.data.platformGroupList;
            if (res.data && res.data.platformGroupList && res.data.platformGroupList.length > 0) {
               res.data.platformGroupList.forEach(item => {
                  if (item.id == platformId) {
                     this.platformObj = { ...item };
                     if (type == 0) {
                        this.dataList = item.signJobList;
                     } else {
                        this.dataList = item.workJobList;
                     }
                     this.circulInitTaskList()
                     setInterval(() => {
                        this.circulInitTaskList()
                     }, 1000)
                  }
               });
            }
         });
      },
      circulInitTaskList() {
            let time = new Date();
            this.dataList.forEach(item => {
               if (item.callDate) {
                  let timeNum = time.getTime() - new Date(item.callDate).getTime();
                  if (timeNum > 3600000) {
                     item.callDateTemp = dayjs.duration(timeNum).format('HH:mm:ss');
                  } else {
                     item.callDateTemp = dayjs.duration(timeNum).format('mm:ss');
                  }
               }
               if (item.startDate) {
                  let timeNum = time.getTime() - new Date(item.startDate).getTime();
                  if (timeNum > 3600000) {
                     item.startDateTemp = dayjs.duration(timeNum).format('HH:mm:ss');
                  } else {
                     item.startDateTemp = dayjs.duration(timeNum).format('mm:ss');
                  }
               }
            });
            this.$forceUpdate();
      }
   }
};
</script>
<style lang="scss">
page {
  background-color: #f7f7f7;
   background-color: #f7f7f7;
}
.main_app {
  .main_name {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 104rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #111111;
    background-color: #fff;
    margin: 0 -30rpx 20rpx;
  }
  .main_list {
    .item {
      display: flex;
      align-items: center;
      position: relative;
      padding: 30rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      .status {
        position: absolute;
        top: 0;
        right: 0;
        height: 50rpx;
        line-height: 50rpx;
        padding: 0 20rpx;
        background: $uni-color-primary;
        color: #fff;
        font-size: 26rpx;
        border-radius: 0rpx 8rpx 0rpx 25rpx;
      }
      .me {
        position: absolute;
        top: 0;
        left: 0;
        background: #00ba67;
        border-radius: 8rpx 0rpx 8rpx 0rpx;
        height: 42rpx;
        line-height: 42rpx;
        width: 64rpx;
        text-align: center;
        color: #fff;
        font-size: 24rpx;
        z-index: 11;
      }
      .padding {
        background: #e9f5f6;
        color: $uni-color-primary;
      }
      .avatar {
        width: 84rpx;
        height: 84rpx;
        margin-right: 20rpx;
      }
      .content {
        flex: 1;
        .id_card {
          font-weight: 600;
          font-size: 30rpx;
          color: #111111;
        }
        .line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 26rpx;
          color: #999999;
          margin-top: 6rpx;
          .time {
            display: flex;
            align-items: center;
            color: $uni-color-primary;
          }
        }
      }
    }
    .active {
      background: linear-gradient(270deg, #ffffff 0%, #e1f7fe 100%);
    }
  }
   .main_name {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 104rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #111111;
      background-color: #fff;
      margin: 0 -30rpx 20rpx;
   }
   .main_list {
      .item {
         display: flex;
         align-items: center;
         position: relative;
         padding: 30rpx;
         background-color: #fff;
         margin-bottom: 20rpx;
         border-radius: 8rpx;
         .status {
            position: absolute;
            top: 0;
            right: 0;
            height: 50rpx;
            line-height: 50rpx;
            padding: 0 20rpx;
            background: $uni-color-primary;
            color: #fff;
            font-size: 26rpx;
            border-radius: 0rpx 8rpx 0rpx 25rpx;
         }
         .me {
            position: absolute;
            top: 0;
            left: 0;
            background: #00ba67;
            border-radius: 8rpx 0rpx 8rpx 0rpx;
            height: 42rpx;
            line-height: 42rpx;
            width: 64rpx;
            text-align: center;
            color: #fff;
            font-size: 24rpx;
            z-index: 11;
         }
         .padding {
            background: #e9f5f6;
            color: $uni-color-primary;
         }
         .avatar {
            width: 84rpx;
            height: 84rpx;
            margin-right: 20rpx;
            background-color: #fff;
         }
         .content {
            flex: 1;
            .id_card {
               font-weight: 500;
               font-size: 30rpx;
               color: #111111;
            }
            .line {
               display: flex;
               justify-content: space-between;
               align-items: center;
               font-size: 26rpx;
               color: #999999;
               margin-top: 6rpx;
               .time {
                  display: flex;
                  align-items: center;
                  color: $uni-color-primary;
               }
            }
         }
      }
      .active {
         background: linear-gradient(270deg, #ffffff 0%, #e1f7fe 100%);
      }
   }
}
</style>