ll
liukangdong
2024-09-24 e1c24d5ac92e89b214efe5a313b31459ddab537f
pda/pages/index/center.vue
@@ -1,858 +1,851 @@
<template>
  <view class="main_app">
    <view class="main_content">
      <view class="title" @click="showPlatformgroup = true"
        >{{ activePlatformGroup.name
        }}<u-icon
          name="arrow-down"
          size="20"
          class="ml12"
          color="#999999"
        ></u-icon
      ></view>
      <view class="platform_list">
        <view
          class="item"
          :class="{ active: item.id === activePlatform.id }"
          v-for="(item, index) in activePlatformGroup.platformList"
          :key="index"
          @click="platformClick(item)"
          >{{ item.name }}</view
        >
      </view>
      <view class="status_wrap">
        <view class="status"
          >作业:<text>{{ platformTaskInfo.workNum }}</text></view
        >
        <view class="status"
          >已叫:<text>{{ platformTaskInfo.callNum }}</text></view
        >
        <view class="status"
          >等待:<text>{{ platformTaskInfo.waitNum }}</text></view
        >
        <view class="status"
          >异常:<text>{{ platformTaskInfo.exceptionNum }}</text></view
        >
      </view>
    </view>
    <!--  -->
    <view style="padding-bottom: 140rpx">
      <view
        v-for="item in platformTaskInfo.platformJobList"
        :key="item.id"
        class="platform_ing"
      >
        <view class="head">
          <view class="code">
            <text>{{ item.carCodeFront.slice(0, 1) }}</text>
            <text>{{ item.carCodeFront.slice(1, 2) }}</text>
            <text>·</text>
            <text>{{ item.carCodeFront.slice(2) }}</text>
          </view>
          <view
            class="status"
            v-if="item.status != 4 && item.status != 5"
            :class="{ red: item.status == 8 }"
            >{{ statusMap[item.status] }}</view
          >
          <view class="status" v-if="item.status == 4"
            >叫号中 {{ item.callDateTemp }}</view
          >
          <view class="status scs" v-if="item.status == 5"
            >已作业 {{ item.startDateTemp }}</view
          >
        </view>
        <view class="line" v-if="item.type == 4">
          <text class="label">合同单号</text>
          <text class="value">{{ item.contractNum }}</text>
        </view>
        <view class="line" v-else>
          <text class="label">运输单号</text>
          <text class="value">{{ item.code }}</text>
          <text class="primaryColor" @click="handleDetail()">运单详情</text>
        </view>
        <view class="line">
          <text class="label">驾驶员</text>
          <text class="value"
            >{{ item.driverName }} {{ item.drivierPhone }}</text
          >
        </view>
        <view class="line">
          <text class="label">总运输量</text>
          <text class="value">{{ item.totalNum }}万支</text>
        </view>
        <view class="line" v-if="item.type != 4">
          <text class="label">运输公司</text>
          <text class="value">{{ item.carrierName }}</text>
        </view>
        <view class="btns">
          <view v-if="item.status == 4" class="btn" @click="handlePass(item)"
            >过号</view
          >
          <view
            v-if="item.status == 4"
            class="btn active"
            @click="handleWork(item)"
            >开始作业</view
          >
          <view v-if="item.status == 5" class="btn" @click="handleErr(item)"
            >异常挂起</view
          >
          <view
            v-if="item.status == 5 || item.status == 8"
            class="btn"
            @click="handleTransform(item)"
            >转移月台</view
          >
          <view
            v-if="item.status == 5 || item.status == 8"
            class="btn active"
            @click="handleFinish(item)"
            >作业完成</view
          >
        </view>
      </view>
      <view v-if="!platformTaskInfo.platformJobList || platformTaskInfo.platformJobList.length == 0" class="empty_wrap">
        <image src="@/static/default_nodata@2x.png" />
        <text>暂无作业车辆</text>
      </view>
    </view>
    <!--  -->
    <view class="main_footer">
      <view class="btn" @click="PlatformCallClick(1)">入园叫号</view>
      <view class="btn active" @click="PlatformCallClick(2)">月台叫号</view>
    </view>
    <!-- 叫号 -->
    <u-popup
      :show="showPlatformCall"
      closeable
      safeAreaInsetTop
      round="10"
      @close="showPlatformCall = false"
    >
      <view
        class="PlatformCallModal"
        :style="{ height: 'calc(100vh - ' + windowTop + 'px)' }"
      >
        <view class="title" v-if="callType == 2"
          >月台叫号({{ activePlatform.name }})</view
        >
        <view class="title" v-else>入园叫号</view>
        <view class="input_wrap">
          <u-icon name="search" class="mr12" size="19" color="#999999" />
          <input
            v-model="platformCallSearch"
            type="text"
            placeholder="搜索车辆牌照"
            placeholder-class="placeholder9"
            @confirm="callQuery"
          />
        </view>
        <view class="order_list">
          <scroll-view scroll-y="true" @scrolltolower="callScrolltolower" class="scroll_view">
            <view
              class="platform_ing"
              v-for="item in platformCallList"
              :key="item.id"
            >
              <view class="head">
                <view v-if="item.carCodeFront" class="code">
                  <text>{{ item.carCodeFront.slice(0, 1) }}</text>
                  <text>{{ item.carCodeFront.slice(1, 2) }}</text>
                  <text>·</text>
                  <text>{{ item.carCodeFront.slice(2) }}</text>
                </view>
                <view class="status" :class="{ scs: item.status == 4 }">{{
                  statusMap[item.status]
                }}</view>
              </view>
              <view class="line" v-if="item.type == 4">
                <text class="label">合同单号</text>
                <text class="value">{{ item.contractNum }}</text>
              </view>
              <view class="line" v-else>
                <text class="label">运输单号</text>
                <text class="value">{{ item.code }}</text>
                <text class="primaryColor" @click="handleDetail()"
                  >运单详情</text
                >
              </view>
              <view class="line">
                <text class="label">驾驶员</text>
                <text class="value"
                  >{{ item.driverName }} {{ item.drivierPhone }}</text
                >
              </view>
              <view class="line">
                <text class="label">总运输量</text>
                <text class="value">{{ item.totalNum }}万支</text>
              </view>
              <view class="line" v-if="item.type != 4">
                <text class="label">运输公司</text>
                <text class="value">{{ item.carrierName }}</text>
              </view>
              <view class="btns">
                <view class="btn active" @click="handleCall(item)">叫号</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <!-- 运单详情 -->
    <u-popup
      :show="showDetail"
      closeable
      safeAreaInsetTop
      round="10"
      @close="showDetail = false"
    >
      <view
        class="PlatformCallModal"
        :style="{ height: 'calc(100vh - ' + windowTop + 'px)' }"
      >
        <view class="title">运单详情</view>
        <view class="platform_ing" style="padding: 0">
          <view class="head">
            <view class="code">
              <text>皖</text>
              <text>AD1212</text>
            </view>
          </view>
          <view class="line">
            <text class="label">运输单号</text>
            <text class="value">11111</text>
          </view>
          <view class="line">
            <text class="label">驾驶员</text>
            <text class="value">11111</text>
          </view>
          <view class="line">
            <text class="label">总运输量</text>
            <text class="value">11111</text>
          </view>
          <view class="line">
            <text class="label">运输公司</text>
            <text class="value">11111</text>
          </view>
        </view>
        <view class="detail_list">
          <view class="item">
            <view class="orderId">合同编号:{{ 111 }}</view>
            <view class="addr">收货地:{{ 111 }}</view>
            <view class="content">
              <view class="line"
                ><view class="label">物料:</view
                ><view class="value">黄山</view></view
              >
              <view class="line"
                ><view class="label">数量:</view
                ><view class="value">黄山</view></view
              >
              <view class="line"
                ><view class="label">物料:</view
                ><view class="value">黄山</view></view
              >
              <view class="line"
                ><view class="label">数量:</view
                ><view class="value">黄山</view></view
              >
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 转移月台 -->
    <u-popup
      :show="showTransform"
      closeable
      safeAreaInsetTop
      round="10"
      @close="showTransform = false"
    >
      <view class="TransformModal">
        <view class="title">转移月台</view>
        <view class="transform_list">
          <view
            class="line"
            @click="transformPlatClick(item)"
            v-for="item in activePlatformGroup.platformList"
            :key="item.id"
          >
            <view class="name">{{ item.name }}</view>
            <view class="status" :class="{ green: item.workStatus == 1 }"
              >({{ item.workStatus == 0 ? "空闲" : "作业中" }})</view
            >
            <image
              v-if="transformPlatId == item.id"
              src="@/static/ic_select@2x.png"
              class="checked"
            />
          </view>
        </view>
        <view class="btns">
          <view class="btn" @click="transformCancel">取消</view>
          <view class="btn active" @click="transformSub">确定</view>
        </view>
      </view>
    </u-popup>
    <!--  -->
    <u-picker
      :show="showPlatformgroup"
      keyName="name"
      :columns="[platformGroupList]"
      @cancel="showPlatformgroup = false"
      @confirm="platConfirm"
    ></u-picker>
  </view>
</template>
<script>
import {
  getPlatformGroupList,
  getPlatformWorkData,
  platformCallList,
  platformCallNumber,
  platformInPark,
  beginWork,
  finishWork,
  platformMove,
  platformErr,
  platformOverNumber
} 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,
      windowTop: 44,
      showPlatformCall: false, // 月台叫号
      showDetail: false,
      showTransform: false, // 转移
      showPlatformgroup: false,
      platformGroupList: [],
      activePlatformGroup: {},
      platformTaskInfo: {},
      activePlatform: {},
      platformCallList: [],//叫号列表
      platformCallSearch: '',
      platformCallTotal: 0,
      platformCallPage: 1,
      callType: 1,
      transformPlatId: '', // 转移记录月台id
      transformId: '', // 转移记录任务id
    }
  },
  onLoad() {
    this.getPlatformGroup()
    const res = uni.getWindowInfo()
    this.windowTop = res.windowTop
  },
  methods: {
    getPlatformGroup() {
      getPlatformGroupList({
        queryData: 1,
        queryType: 0
      }).then(res => {
        this.platformGroupList = res.data || []
        if (this.platformGroupList.length > 0) {
          this.activePlatformGroup = this.platformGroupList[0]
          if (this.activePlatformGroup.platformList && this.activePlatformGroup.platformList.length > 0) {
            this.activePlatform = this.activePlatformGroup.platformList[0]
            this.getPlatformTask()
          }
        }
      })
    },
    getPlatformTask() {
      getPlatformWorkData({ platformId: this.activePlatform.id }).then(res => {
        this.platformTaskInfo = res.data
        this.circulInitTaskList()
        setInterval(() => {
          this.circulInitTaskList()
        }, 1000)
      })
    },
    circulInitTaskList() {
      if (this.platformTaskInfo && this.platformTaskInfo.platformJobList && this.platformTaskInfo.platformJobList.length > 0) {
        let time = new Date()
        this.platformTaskInfo.platformJobList.forEach(item => {
          if (item.callDate) {
            let timeNum = time.getTime() - new Date(item.callDate).getTime()
            if (timeNum > 3600000) {
              item.callDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')
            } else {
              item.callDateTemp = dayjs.duration(timeNum).format('m分s秒')
            }
          }
          if (item.startDate) {
            let timeNum = time.getTime() - new Date(item.startDate).getTime()
            if (timeNum > 3600000) {
              item.startDateTemp = dayjs.duration(timeNum).format('H小时m分ss秒')
            } else {
              item.startDateTemp = dayjs.duration(timeNum).format('m分s秒')
            }
          }
        })
        this.$forceUpdate()
      }
    },
    platConfirm(e) {
      const index = e.indexs[0]
      this.activePlatformGroup = this.platformGroupList[index]
      if (this.activePlatformGroup.platformList && this.activePlatformGroup.platformList.length > 0) {
        this.activePlatform = this.activePlatformGroup.platformList[0]
        this.getPlatformTask()
      }
      this.showPlatformgroup = false
    },
    platformClick(item) {
      this.activePlatform = item
      this.getPlatformTask()
    },
    handleDetail() {
      this.showDetail = true
    },
    handleFinish(item) {
      finishWork({ jobId: item.id }).then(res => {
        this.showToast('完成作业')
        this.getPlatformTask()
      })
    },
    handleWork(item) { // 开始作业
      beginWork({ jobId: item.id }).then(res => {
        this.showToast('已开始作业')
        this.getPlatformTask()
      })
    },
    handlePass(item) {
      uni.showModal({
        content: '您确认要对该任务进行过号吗',
        success: (res) => {
          if (res.confirm) {
            platformOverNumber({ jobId: item.id, platformId: this.activePlatform.id }).then(res => {
              this.showToast('过号成功')
              this.getPlatformTask()
            })
          }
        }
      })
    },
    handleCall(item) {
      const { callType, activePlatform } = this
      this.platformCallList = []
      this.platformCallPage = 1
      if (callType == 1) { // 入园叫号
        platformInPark({ jobId: item.id }).then(res => {
          this.showToast('叫号成功')
          this.getPlatformCallList()
        })
      } else { // 月台叫号
        platformCallNumber({ platformId: activePlatform.id, jobId: item.id }).then(res => {
          this.showToast('叫号成功')
          this.getPlatformCallList()
          this.getPlatformTask()
        })
      }
    },
    PlatformCallClick(callType) {
      this.callType = callType
      this.showPlatformCall = true
      this.platformCallList = []
      this.platformCallPage = 1
      this.platformCallSearch = ''
      this.getPlatformCallList()
    },
    callQuery() {
      this.platformCallList = []
      this.platformCallPage = 1
      this.getPlatformCallList()
    },
    callScrolltolower() {
      const { platformCallTotal, platformCallList } = this
      if(platformCallTotal > platformCallList.length){
        this.getPlatformCallList()
      }
    },
    getPlatformCallList() {
      const { platformCallPage, callType, activePlatform, platformCallSearch } = this
      platformCallList({
        model: { callType, platformId: activePlatform.id, carCodeFront: platformCallSearch },
        capacity: 10,
        page: platformCallPage
      }).then(res => {
        if (res.data && res.data.records) {
          this.platformCallList = [ ...this.platformCallList, ...res.data.records]
          this.platformCallTotal = res.data.total
        }
      })
    },
    transformPlatClick(item) {
      this.transformPlatId = item.id
    },
    transformCancel() {
      this.transformPlatId = ''
      this.showTransform = false
    },
    transformSub() {
      const { transformPlatId, transformId } = this
      platformMove({ platformId: transformPlatId, jobId: transformId }).then(res => {
        this.showToast('转移月台成功')
        this.transformCancel()
        this.getPlatformTask()
      })
    },
    handleTransform(item) {
      let { activePlatform } = this
      this.transformId = item.id
      this.transformPlatId = activePlatform.id
      this.showTransform = true
    },
    handleErr(item) {
      uni.showModal({
        content: '您确认要对该任务进行异常挂起吗',
        success: (res) => {
          if (res.confirm) {
            platformErr({ jobId: item.id }).then(ress => {
              this.showToast('异常挂起成功')
              this.getPlatformTask()
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.main_app {
  padding: 0rpx;
  height: calc(100vh - 44px);
  font-size: 30rpx;
  color: #333333;
  background: url("@/static/bg_yuetai@2x.png") no-repeat;
  background-size: 100% 100%;
  .main_content {
    background-color: #fff;
    padding: 30rpx;
    .platform_list {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 210rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #ffffff;
        border-radius: 8rpx;
        border: 1rpx solid #999999;
        font-size: 30rpx;
        color: #222222;
        margin-bottom: 20rpx;
        margin-right: 30rpx;
        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
      .active {
        color: #fff;
        background-color: $uni-color-primary;
        border-color: $uni-color-primary;
      }
    }
    .status_wrap {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 690rpx;
      height: 76rpx;
      margin-top: 4rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.18);
      border-radius: 8rpx;
      .status {
        color: #666666;
        text {
          color: #111111;
        }
        &:nth-last-child(1) {
          text {
            color: #ed4545;
          }
        }
      }
    }
    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #111111;
      line-height: 44rpx;
      margin-bottom: 30rpx;
      display: flex;
      justify-content: center;
    }
  }
  .platform_ing {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      .code {
        display: flex;
        font-weight: 600;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 32rpx;
        color: #111111;
        border-radius: 8rpx;
        border: 1rpx solid #dfdede;
        text {
          &:nth-of-type(1) {
            background: #e9f5f6;
            padding: 0 12rpx;
          }
          &:nth-of-type(2) {
            padding-left: 4rpx;
          }
          &:nth-of-type(4) {
            padding-right: 6rpx;
          }
        }
      }
      .status {
        font-size: 30rpx;
        color: $uni-color-primary;
      }
      .scs {
        color: #00ba67;
      }
    }
    .line {
      display: flex;
      margin-bottom: 20rpx;
      .label {
        width: 144rpx;
        color: #666666;
      }
      .value {
        flex: 1;
      }
    }
    .btns {
      display: flex;
      justify-content: flex-end;
      .btn {
        width: 210rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
        background: #ffffff;
        border-radius: 40rpx;
        border: 1rpx solid #999999;
        margin-left: 20rpx;
      }
      .active {
        background-color: $uni-color-primary;
        color: #fff;
        border-color: $uni-color-primary;
      }
    }
  }
  .empty {
    width: 220rpx;
    margin: 160rpx auto;
  }
  .main_footer {
    width: 750rpx;
    height: 136rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 24rpx 30rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    background-color: #fff;
    .btn {
      width: 224rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: #ffffff;
      border-radius: 44rpx;
      color: $uni-color-primary;
      border: 1rpx solid $uni-color-primary;
    }
    .active {
      width: 436rpx;
      background-color: $uni-color-primary;
      color: #fff;
      border-color: $uni-color-primary;
    }
  }
}
.PlatformCallModal {
  height: calc(100vh - 44px);
  padding: 30rpx;
  .title {
    text-align: center;
    margin: 0 0 30rpx;
  }
  .input_wrap {
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 76rpx;
    background: #f7f7f7;
    border-radius: 38rpx;
    padding: 0 30rpx;
  }
  .order_list {
    height: calc(100% - 140rpx);
    .scroll_view {
      height: 100%;
    }
    .platform_ing {
      border-radius: 8rpx;
      border: 1rpx solid #dfe2e8;
    }
  }
  .detail_list {
    border-top: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .orderId {
      font-size: 30rpx;
      color: $uni-color-primary;
      margin-bottom: 14rpx;
    }
    .addr {
      font-size: 26rpx;
      color: #666666;
      margin-bottom: 20rpx;
    }
    .content {
      width: 100%;
      padding: 20rpx;
      background: #f7f7f7;
      border-radius: 8rpx;
      .line {
        display: flex;
        margin-bottom: 20rpx;
        &:nth-of-type(2n) {
          padding-bottom: 20rpx;
          border-bottom: 1rpx solid #e5e5e5;
        }
        &:last-child {
          padding-bottom: 0rpx;
          border-bottom: none;
        }
        .label {
          font-size: 28rpx;
          color: #666666;
          width: 88rpx;
        }
        .value {
          font-size: 28rpx;
          color: #222222;
        }
      }
    }
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      width: 336rpx;
      height: 88rpx;
      border-radius: 44rpx;
      border: 1rpx solid $uni-color-primary;
      color: $uni-color-primary;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: #fff;
      background-color: $uni-color-primary;
    }
  }
}
.TransformModal {
  height: 900rpx;
  padding: 30rpx;
  position: relative;
  .title {
    text-align: center;
    margin: 0 0 30rpx;
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 999;
    left: 30rpx;
    bottom: 30rpx;
    .btn {
      width: 336rpx;
      height: 88rpx;
      border-radius: 44rpx;
      border: 1rpx solid $uni-color-primary;
      color: $uni-color-primary;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: #fff;
      margin-left: 18rpx;
      background-color: $uni-color-primary;
    }
  }
  .transform_list {
    height: 660rpx;
    margin-bottom: 30rpx;
    overflow: auto;
    .line {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      .name {
        font-size: 32rpx;
        color: #111111;
      }
      .status {
        flex: 1;
        font-size: 28rpx;
        color: $uni-color-primary;
        margin-left: 12rpx;
      }
      .green {
        color: #00ba67;
      }
      .checked {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
<template>
   <view class="main_app">
      <view class="main_content">
         <view class="title" @click="showPlatformgroup = true">{{ activePlatformGroup.name
        }}<u-icon name="arrow-down" size="20" class="ml12" color="#999999"></u-icon></view>
         <view class="platform_list">
            <view class="item" :class="{ active: item.id === activePlatform.id }"
               v-for="(item, index) in activePlatformGroup.platformList" :key="index" @click="platformClick(item)">
               {{ item.name }}</view>
         </view>
         <view class="status_wrap">
            <view class="status">作业:<text>{{ platformTaskInfo.workNum }}</text></view>
            <view class="status">已叫:<text>{{ platformTaskInfo.callNum }}</text></view>
            <view class="status">等待:<text>{{ platformTaskInfo.waitNum }}</text></view>
            <view class="status">异常:<text>{{ platformTaskInfo.exceptionNum }}</text></view>
         </view>
      </view>
      <!--  -->
      <view style="padding-bottom: 140rpx">
         <view v-for="item in platformTaskInfo.platformJobList" :key="item.id" class="platform_ing">
            <view class="head">
               <view class="code">
                  <text>{{ item.carCodeFront.slice(0, 1) }}</text>
                  <text>{{ item.carCodeFront.slice(1, 2) }}</text>
                  <text>·</text>
                  <text>{{ item.carCodeFront.slice(2) }}</text>
               </view>
               <view class="status" v-if="item.status != 4 && item.status != 5" :class="{ red: item.status == 8 }">
                  {{ statusMap[item.status] }}</view>
               <view class="status" v-if="item.status == 4">叫号中 {{ item.callDateTemp }}</view>
               <view class="status scs" v-if="item.status == 5">已作业 {{ item.startDateTemp }}</view>
            </view>
            <view class="line" v-if="item.type == 4">
               <text class="label">合同单号</text>
               <text class="value">{{ item.contractNum }}</text>
            </view>
            <view class="line" v-else>
               <text class="label">运输单号</text>
               <text class="value">{{ item.code }}</text>
               <text class="primaryColor" @click="handleDetail()">运单详情</text>
            </view>
            <view class="line">
               <text class="label">驾驶员</text>
               <text class="value">{{ item.driverName }} {{ item.drivierPhone }}</text>
            </view>
            <view class="line">
               <text class="label">总运输量</text>
               <text class="value">{{ item.totalNum }}万支</text>
            </view>
            <view class="line" v-if="item.type != 4">
               <text class="label">运输公司</text>
               <text class="value">{{ item.carrierName }}</text>
            </view>
            <view class="btns">
               <view v-if="item.status == 4" class="btn" @click="handlePass(item)">过号</view>
               <view v-if="item.status == 4" class="btn active" @click="handleWork(item)">开始作业</view>
               <view v-if="item.status == 5" class="btn" @click="handleErr(item)">异常挂起</view>
               <view v-if="item.status == 5 || item.status == 8" class="btn" @click="handleTransform(item)">转移月台</view>
               <view v-if="item.status == 5 || item.status == 8" class="btn active" @click="handleFinish(item)">作业完成</view>
            </view>
         </view>
         <view v-if="!platformTaskInfo.platformJobList || platformTaskInfo.platformJobList.length == 0" class="empty_wrap">
            <image src="@/static/default_nodata@2x.png" />
            <text>暂无作业车辆</text>
         </view>
      </view>
      <!--  -->
      <view class="main_footer">
         <view class="btn" @click="PlatformCallClick(1)">入园叫号</view>
         <view class="btn active" @click="PlatformCallClick(2)">月台叫号</view>
      </view>
      <!-- 叫号 -->
      <u-popup :show="showPlatformCall" closeable safeAreaInsetTop round="10" @close="showPlatformCall = false">
         <view class="PlatformCallModal" :style="{ height: 'calc(100vh - ' + windowTop + 'px)' }">
            <view class="title" v-if="callType == 2">月台叫号({{ activePlatform.name }})</view>
            <view class="title" v-else>入园叫号</view>
            <view class="input_wrap">
               <u-icon name="search" class="mr12" size="19" color="#999999" />
               <input v-model="platformCallSearch" type="text" placeholder="搜索车辆牌照" placeholder-class="placeholder9"
                  @confirm="callQuery" />
            </view>
            <view class="order_list">
               <scroll-view scroll-y="true" @scrolltolower="callScrolltolower" class="scroll_view">
                  <view class="platform_ing" v-for="item in platformCallList" :key="item.id">
                     <view class="head">
                        <view v-if="item.carCodeFront" class="code">
                           <text>{{ item.carCodeFront.slice(0, 1) }}</text>
                           <text>{{ item.carCodeFront.slice(1, 2) }}</text>
                           <text>·</text>
                           <text>{{ item.carCodeFront.slice(2) }}</text>
                        </view>
                        <view class="status" :class="{ scs: item.status == 4 }">{{
                  statusMap[item.status]
                }}</view>
                     </view>
                     <view class="line" v-if="item.type == 4">
                        <text class="label">合同单号</text>
                        <text class="value">{{ item.contractNum }}</text>
                     </view>
                     <view class="line" v-else>
                        <text class="label">运输单号</text>
                        <text class="value">{{ item.code }}</text>
                        <text class="primaryColor" @click="handleDetail()">运单详情</text>
                     </view>
                     <view class="line">
                        <text class="label">驾驶员</text>
                        <text class="value">{{ item.driverName }} {{ item.drivierPhone }}</text>
                     </view>
                     <view class="line">
                        <text class="label">总运输量</text>
                        <text class="value">{{ item.totalNum }}万支</text>
                     </view>
                     <view class="line" v-if="item.type != 4">
                        <text class="label">运输公司</text>
                        <text class="value">{{ item.carrierName }}</text>
                     </view>
                     <view class="btns">
                        <view class="btn active" @click="handleCall(item)">叫号</view>
                     </view>
                  </view>
               </scroll-view>
            </view>
         </view>
      </u-popup>
      <!-- 运单详情 -->
      <u-popup :show="showDetail" closeable safeAreaInsetTop round="10" @close="showDetail = false">
         <view class="PlatformCallModal" :style="{ height: 'calc(100vh - ' + windowTop + 'px)' }">
            <view class="title">运单详情</view>
            <view class="platform_ing" style="padding: 0">
               <view class="head">
                  <view class="code">
                     <text>皖</text>
                     <text>AD1212</text>
                  </view>
               </view>
               <view class="line">
                  <text class="label">运输单号</text>
                  <text class="value">11111</text>
               </view>
               <view class="line">
                  <text class="label">驾驶员</text>
                  <text class="value">11111</text>
               </view>
               <view class="line">
                  <text class="label">总运输量</text>
                  <text class="value">11111</text>
               </view>
               <view class="line">
                  <text class="label">运输公司</text>
                  <text class="value">11111</text>
               </view>
            </view>
            <view class="detail_list">
               <view class="item">
                  <view class="orderId">合同编号:{{ 111 }}</view>
                  <view class="addr">收货地:{{ 111 }}</view>
                  <view class="content">
                     <view class="line">
                        <view class="label">物料:</view>
                        <view class="value">黄山</view>
                     </view>
                     <view class="line">
                        <view class="label">数量:</view>
                        <view class="value">黄山</view>
                     </view>
                     <view class="line">
                        <view class="label">物料:</view>
                        <view class="value">黄山</view>
                     </view>
                     <view class="line">
                        <view class="label">数量:</view>
                        <view class="value">黄山</view>
                     </view>
                  </view>
               </view>
            </view>
         </view>
      </u-popup>
      <!-- 转移月台 -->
      <u-popup :show="showTransform" closeable safeAreaInsetTop round="10" @close="showTransform = false">
         <view class="TransformModal">
            <view class="title">转移月台</view>
            <view class="transform_list">
               <view class="line" @click="transformPlatClick(item)" v-for="item in activePlatformGroup.platformList"
                  :key="item.id">
                  <view class="name">{{ item.name }}</view>
                  <view class="status" :class="{ green: item.workStatus == 1 }">({{ item.workStatus == 0 ? "空闲" : "作业中" }})
                  </view>
                  <image v-if="transformPlatId == item.id" src="@/static/ic_select@2x.png" class="checked" />
               </view>
            </view>
            <view class="btns">
               <view class="btn" @click="transformCancel">取消</view>
               <view class="btn active" @click="transformSub">确定</view>
            </view>
         </view>
      </u-popup>
      <!--  -->
      <u-picker :show="showPlatformgroup" keyName="name" :columns="[platformGroupList]"
         @cancel="showPlatformgroup = false" @confirm="platConfirm"></u-picker>
   </view>
</template>
<script>
   import {
      getPlatformGroupList,
      getPlatformWorkData,
      platformCallList,
      platformCallNumber,
      platformInPark,
      beginWork,
      finishWork,
      platformMove,
      platformErr,
      platformOverNumber
   } 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,
            windowTop: 44,
            showPlatformCall: false, // 月台叫号
            showDetail: false,
            showTransform: false, // 转移
            showPlatformgroup: false,
            platformGroupList: [],
            activePlatformGroup: {},
            platformTaskInfo: {},
            activePlatform: {},
            platformCallList: [], //叫号列表
            platformCallSearch: '',
            platformCallTotal: 0,
            platformCallPage: 1,
            callType: 1,
            transformPlatId: '', // 转移记录月台id
            transformId: '', // 转移记录任务id
         }
      },
      onLoad() {
         this.getPlatformGroup()
         const res = uni.getWindowInfo()
         this.windowTop = res.windowTop
      },
      methods: {
         getPlatformGroup() {
            getPlatformGroupList({
               queryData: 1,
               queryType: 0
            }).then(res => {
               this.platformGroupList = res.data || []
               if (this.platformGroupList.length > 0) {
                  this.activePlatformGroup = this.platformGroupList[0]
                  if (this.activePlatformGroup.platformList && this.activePlatformGroup.platformList.length > 0) {
                     this.activePlatform = this.activePlatformGroup.platformList[0]
                     this.getPlatformTask()
                  }
               }
            })
         },
         getPlatformTask() {
            getPlatformWorkData({
               platformId: this.activePlatform.id
            }).then(res => {
               this.platformTaskInfo = res.data
               this.circulInitTaskList()
               setInterval(() => {
                  this.circulInitTaskList()
               }, 1000)
            })
         },
         circulInitTaskList() {
            if (this.platformTaskInfo && this.platformTaskInfo.platformJobList && this.platformTaskInfo.platformJobList
               .length > 0) {
               let time = new Date()
               this.platformTaskInfo.platformJobList.forEach(item => {
                  if (item.callDate) {
                     let timeNum = time.getTime() - new Date(item.callDate).getTime()
                     if (timeNum > 3600000) {
                        item.callDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')
                     } else {
                        item.callDateTemp = dayjs.duration(timeNum).format('m分s秒')
                     }
                  }
                  if (item.startDate) {
                     let timeNum = time.getTime() - new Date(item.startDate).getTime()
                     if (timeNum > 3600000) {
                        item.startDateTemp = dayjs.duration(timeNum).format('H小时m分ss秒')
                     } else {
                        item.startDateTemp = dayjs.duration(timeNum).format('m分s秒')
                     }
                  }
               })
               this.$forceUpdate()
            }
         },
         platConfirm(e) {
            const index = e.indexs[0]
            this.activePlatformGroup = this.platformGroupList[index]
            if (this.activePlatformGroup.platformList && this.activePlatformGroup.platformList.length > 0) {
               this.activePlatform = this.activePlatformGroup.platformList[0]
               this.getPlatformTask()
            }
            this.showPlatformgroup = false
         },
         platformClick(item) {
            this.activePlatform = item
            this.getPlatformTask()
         },
         handleDetail() {
            this.showDetail = true
         },
         handleFinish(item) {
            finishWork({
               jobId: item.id
            }).then(res => {
               this.showToast('完成作业')
               this.getPlatformTask()
            })
         },
         handleWork(item) { // 开始作业
            beginWork({
               jobId: item.id
            }).then(res => {
               this.showToast('已开始作业')
               this.getPlatformTask()
            })
         },
         handlePass(item) {
            uni.showModal({
               content: `确认 ${item.carCodeFront}置为过号吗?过号后,需要重新签到才能进入园区`,
               success: (res) => {
                  if (res.confirm) {
                     platformOverNumber({
                        jobId: item.id,
                        platformId: this.activePlatform.id
                     }).then(res => {
                        this.showToast('过号成功')
                        this.getPlatformTask()
                     })
                  }
               }
            })
         },
         handleCall(item) {
            const {
               callType,
               activePlatform
            } = this
            this.platformCallList = []
            this.platformCallPage = 1
            if (callType == 1) { // 入园叫号
               platformInPark({
                  jobId: item.id
               }).then(res => {
                  this.showToast('叫号成功')
                  this.getPlatformCallList()
               })
            } else { // 月台叫号
               platformCallNumber({
                  platformId: activePlatform.id,
                  jobId: item.id
               }).then(res => {
                  this.showToast('叫号成功')
                  this.getPlatformCallList()
                  this.getPlatformTask()
               })
            }
         },
         PlatformCallClick(callType) {
            this.callType = callType
            this.showPlatformCall = true
            this.platformCallList = []
            this.platformCallPage = 1
            this.platformCallSearch = ''
            this.getPlatformCallList()
         },
         callQuery() {
            this.platformCallList = []
            this.platformCallPage = 1
            this.getPlatformCallList()
         },
         callScrolltolower() {
            const {
               platformCallTotal,
               platformCallList
            } = this
            if (platformCallTotal > platformCallList.length) {
               this.getPlatformCallList()
            }
         },
         getPlatformCallList() {
            const {
               platformCallPage,
               callType,
               activePlatform,
               platformCallSearch
            } = this
            platformCallList({
               model: {
                  callType,
                  platformId: activePlatform.id,
                  carCodeFront: platformCallSearch
               },
               capacity: 10,
               page: platformCallPage
            }).then(res => {
               if (res.data && res.data.records) {
                  this.platformCallList = [...this.platformCallList, ...res.data.records]
                  this.platformCallTotal = res.data.total
               }
            })
         },
         transformPlatClick(item) {
            this.transformPlatId = item.id
         },
         transformCancel() {
            this.transformPlatId = ''
            this.showTransform = false
         },
         transformSub() {
            const {
               transformPlatId,
               transformId
            } = this
            platformMove({
               platformId: transformPlatId,
               jobId: transformId
            }).then(res => {
               this.showToast('转移月台成功')
               this.transformCancel()
               this.getPlatformTask()
            })
         },
         handleTransform(item) {
            let {
               activePlatform
            } = this
            this.transformId = item.id
            this.transformPlatId = activePlatform.id
            this.showTransform = true
         },
         handleErr(item) {
            uni.showModal({
               content: '您确认要对该任务进行异常挂起吗',
               success: (res) => {
                  if (res.confirm) {
                     platformErr({
                        jobId: item.id
                     }).then(ress => {
                        this.showToast('异常挂起成功')
                        this.getPlatformTask()
                     })
                  }
               }
            })
         }
      }
   }
</script>
<style lang="scss">
   .main_app {
      padding: 0rpx;
      height: calc(100vh - 44px);
      font-size: 30rpx;
      color: #333333;
      background: url("@/static/bg_yuetai@2x.png") no-repeat;
      background-size: 100% 100%;
      .main_content {
         background-color: #fff;
         padding: 30rpx;
         .platform_list {
            display: flex;
            flex-wrap: wrap;
            .item {
               width: 210rpx;
               height: 80rpx;
               line-height: 80rpx;
               text-align: center;
               background: #ffffff;
               border-radius: 8rpx;
               border: 1rpx solid #999999;
               font-size: 30rpx;
               color: #222222;
               margin-bottom: 20rpx;
               margin-right: 30rpx;
               &:nth-of-type(3n) {
                  margin-right: 0;
               }
            }
            .active {
               color: #fff;
               background-color: $uni-color-primary;
               border-color: $uni-color-primary;
            }
         }
         .status_wrap {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 690rpx;
            height: 76rpx;
            margin-top: 4rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.18);
            border-radius: 8rpx;
            .status {
               color: #666666;
               text {
                  color: #111111;
               }
               &:nth-last-child(1) {
                  text {
                     color: #ed4545;
                  }
               }
            }
         }
         .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #111111;
            line-height: 44rpx;
            margin-bottom: 30rpx;
            display: flex;
            justify-content: center;
         }
      }
      .platform_ing {
         margin-top: 20rpx;
         padding: 30rpx;
         background-color: #fff;
         .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            .code {
               display: flex;
               font-weight: 600;
               height: 60rpx;
               line-height: 60rpx;
               font-size: 32rpx;
               color: #111111;
               border-radius: 8rpx;
               border: 1rpx solid #dfdede;
               text {
                  &:nth-of-type(1) {
                     background: #e9f5f6;
                     padding: 0 12rpx;
                  }
                  &:nth-of-type(2) {
                     padding-left: 4rpx;
                  }
                  &:nth-of-type(4) {
                     padding-right: 6rpx;
                  }
               }
            }
            .status {
               font-size: 30rpx;
               color: $uni-color-primary;
            }
            .scs {
               color: #00ba67;
            }
         }
         .line {
            display: flex;
            margin-bottom: 20rpx;
            .label {
               width: 144rpx;
               color: #666666;
            }
            .value {
               flex: 1;
            }
         }
         .btns {
            display: flex;
            justify-content: flex-end;
            .btn {
               width: 210rpx;
               height: 76rpx;
               line-height: 76rpx;
               text-align: center;
               background: #ffffff;
               border-radius: 40rpx;
               border: 1rpx solid #999999;
               margin-left: 20rpx;
            }
            .active {
               background-color: $uni-color-primary;
               color: #fff;
               border-color: $uni-color-primary;
            }
         }
      }
      .empty {
         width: 220rpx;
         margin: 160rpx auto;
      }
      .main_footer {
         width: 750rpx;
         height: 136rpx;
         position: fixed;
         bottom: 0;
         left: 0;
         padding: 24rpx 30rpx;
         display: flex;
         justify-content: space-between;
         font-size: 32rpx;
         background-color: #fff;
         .btn {
            width: 224rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #ffffff;
            border-radius: 44rpx;
            color: $uni-color-primary;
            border: 1rpx solid $uni-color-primary;
         }
         .active {
            width: 436rpx;
            background-color: $uni-color-primary;
            color: #fff;
            border-color: $uni-color-primary;
         }
      }
   }
   .PlatformCallModal {
      height: calc(100vh - 44px);
      padding: 30rpx;
      .title {
         text-align: center;
         margin: 0 0 30rpx;
      }
      .input_wrap {
         display: flex;
         align-items: center;
         width: 690rpx;
         height: 76rpx;
         background: #f7f7f7;
         border-radius: 38rpx;
         padding: 0 30rpx;
      }
      .order_list {
         height: calc(100% - 140rpx);
         .scroll_view {
            height: 100%;
         }
         .platform_ing {
            border-radius: 8rpx;
            border: 1rpx solid #dfe2e8;
         }
      }
      .detail_list {
         border-top: 1rpx solid #e5e5e5;
         padding: 30rpx 0;
         .orderId {
            font-size: 30rpx;
            color: $uni-color-primary;
            margin-bottom: 14rpx;
         }
         .addr {
            font-size: 26rpx;
            color: #666666;
            margin-bottom: 20rpx;
         }
         .content {
            width: 100%;
            padding: 20rpx;
            background: #f7f7f7;
            border-radius: 8rpx;
            .line {
               display: flex;
               margin-bottom: 20rpx;
               &:nth-of-type(2n) {
                  padding-bottom: 20rpx;
                  border-bottom: 1rpx solid #e5e5e5;
               }
               &:last-child {
                  padding-bottom: 0rpx;
                  border-bottom: none;
               }
               .label {
                  font-size: 28rpx;
                  color: #666666;
                  width: 88rpx;
               }
               .value {
                  font-size: 28rpx;
                  color: #222222;
               }
            }
         }
      }
      .btns {
         display: flex;
         align-items: center;
         justify-content: space-between;
         .btn {
            width: 336rpx;
            height: 88rpx;
            border-radius: 44rpx;
            border: 1rpx solid $uni-color-primary;
            color: $uni-color-primary;
            font-size: 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
         }
         .active {
            color: #fff;
            background-color: $uni-color-primary;
         }
      }
   }
   .TransformModal {
      height: 900rpx;
      padding: 30rpx;
      position: relative;
      .title {
         text-align: center;
         margin: 0 0 30rpx;
      }
      .btns {
         display: flex;
         align-items: center;
         justify-content: space-between;
         position: absolute;
         z-index: 999;
         left: 30rpx;
         bottom: 30rpx;
         .btn {
            width: 336rpx;
            height: 88rpx;
            border-radius: 44rpx;
            border: 1rpx solid $uni-color-primary;
            color: $uni-color-primary;
            font-size: 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
         }
         .active {
            color: #fff;
            margin-left: 18rpx;
            background-color: $uni-color-primary;
         }
      }
      .transform_list {
         height: 660rpx;
         margin-bottom: 30rpx;
         overflow: auto;
         .line {
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #e5e5e5;
            padding-bottom: 30rpx;
            margin-bottom: 30rpx;
            .name {
               font-size: 32rpx;
               color: #111111;
            }
            .status {
               flex: 1;
               font-size: 28rpx;
               color: $uni-color-primary;
               margin-left: 12rpx;
            }
            .green {
               color: #00ba67;
            }
            .checked {
               width: 40rpx;
               height: 40rpx;
            }
         }
      }
   }
</style>