| | |
| | | <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> |