jiangping
2024-09-02 843d0abd014ec20424844546fc57a9f976f366ba
h5/pages/driver/queueUpRecord.vue
@@ -1,44 +1,24 @@
<template>
  <view class="main_app">
    <view class="main_name">
      <text class="mr12">物流入库月台</text>
      <u-icon name="arrow-down" color="#777777"></u-icon>
         <text class="mr12">{{ platformObj.name }}</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="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">皖A</view>
               <view class="id_card" v-if="item.carCodeFront">{{ item.carCodeFront.slice(0, 4) }}**{{ item.carCodeFront.slice(6) }}</view>
          <view class="line">
            <view class="address">4号月台</view>
            <view class="time">
                  <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>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>
                     <text>{{item.callDateTemp}}</text>
            </view>
          </view>
        </view>
@@ -48,13 +28,78 @@
</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 {
         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">
@@ -116,11 +161,12 @@
        width: 84rpx;
        height: 84rpx;
        margin-right: 20rpx;
            background-color: #fff;
      }
      .content {
        flex: 1;
        .id_card {
          font-weight: 600;
               font-weight: 500;
          font-size: 30rpx;
          color: #111111;
        }