更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 pda/pages/index/center.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1111 @@
<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.billCode">

               <text class="label">运输单号</text>

               <text class="value">{{ item.billCode }}</text>

               <text class="primaryColor" @click="handleDetail(item)">运单详情</text>

            </view>

            <view class="line" v-else>

               <text class="label">合同单号</text>

               <text class="value">{{ item.contractNum }}</text>

               <text class="primaryColor" @click="subDetail(item)">预约详情</text>

            </view>
            <view class="line line2" v-if="item.billCode && item.wmsContractNum">
               <text class="label">合同单号</text>
               <text class="value">{{ item.wmsContractNum }}</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 || item.ioQty}}万支</text>

            </view>

            <view class="line" v-if="item.carrierName">

               <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 v-if="platformCallList.length == 0" class="empty_wrap">
               <image src="@/static/default_nodata@2x.png" />
               <text>暂无排队车辆</text>
            </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.billCode">

                        <text class="label">运输单号</text>

                        <text class="value">{{ item.billCode }}</text>

                        <text class="primaryColor" @click="handleDetail(item)">运单详情</text>

                     </view>

                     <view class="line" v-else>

                        <text class="label">合同单号</text>

                        <text class="value">{{ item.contractNum }}</text>

                        <text class="primaryColor" @click="subDetail(item)">预约详情</text>

                     </view>
                     <view class="line line2" v-if="item.billCode && item.wmsContractNum">
                        <text class="label">合同单号</text>
                        <text class="value">{{ item.wmsContractNum }}</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 || item.ioQty }}万支</text>

                     </view>

                     <view class="line" v-if="item.carrierName">

                        <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" :round="10" :safeAreaInsetBottom="true" closeOnClickOverlay :closeable="true"

         mode="bottom" @close="showDetail = false">

         <view class="detail_modal">

            <view class="modal_title">运单详情</view>

            <view v-if="wmsInfo.plateNumber" class="id_card">

               <text>{{ wmsInfo.plateNumber.slice(0, 1) }}</text>

               <text>{{ wmsInfo.plateNumber.slice(1, 2) }}</text>

               <text>·</text>

               <text>{{ wmsInfo.plateNumber.slice(2) }}</text>

            </view>

            <!--  -->

            <view class="info">

               <view class="line">

                  <view class="label">运输单号</view>

                  <view class="value">{{ wmsInfo.carryBillCode }}</view>

               </view>

               <view class="line">

                  <view class="label">驾驶员</view>

                  <view class="value">{{ wmsInfo.driverName }} {{ wmsInfo.driverPhone }}</view>

               </view>

               <view class="line">

                  <view class="label">总运输量</view>

                  <view class="value">{{ wmsInfo.ioQty }}万支</view>

               </view>

               <view class="line">

                  <view class="label">运输公司</view>

                  <view class="value">{{ wmsInfo.carrierName }}</view>

               </view>

            </view>

            <view class="contract_wrap">

               <view class="contract_list" v-for="item in wmsInfo.wmsJobContractVOList">

                  <view class="title">合同号：{{ item.contractCode }}</view>

                  <view class="address">收货地：{{ item.address }}</view>

                  <view class="list">

                     <view class="item" v-for="line in item.platformWmsDetailList">

                        <view class="line">

                           <view class="label">物料：</view>

                           <view class="value">{{ line.materialName }}</view>

                        </view>

                        <view class="line">

                           <view class="label">数量：</view>

                           <view class="value">{{ line.ioQty }}万支</view>

                        </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 TransferList" :key="item.id">

                  <view class="name">{{ item.name  || item.platformName}}</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,

      wmsJobDetail

   } 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: 24,

            showPlatformCall: false, // æœˆå°å«å·

            showDetail: false,

            showTransform: false, // è½¬ç§»

            showPlatformgroup: false,



            platformGroupList: [],

            activePlatformGroup: {},

            platformTaskInfo: {},

            activePlatform: {},



            platformCallList: [], //叫号列表

            platformCallSearch: '',

            platformCallTotal: 0,

            platformCallPage: 1,

            callType: 1,



            transformPlatId: '', // è½¬ç§»è®°å½•æœˆå°id

            transformId: '', // è½¬ç§»è®°å½•ä»»åŠ¡id

            TransferList: [],

            wmsInfo: {},

            timer: null,
            timer1: null,

         }

      },

      onLoad() {

         this.getPlatformGroup()

      },
      onHide(){
         if(this.timer1){
            clearInterval(this.timer1)
         }
         if(this.timer){
            clearInterval(this.timer)
         }
      },
      onUnload(){
         if(this.timer1){
            clearInterval(this.timer1)
         }
         if(this.timer){
            clearInterval(this.timer)
         }
      },

      methods: {

         getTransferList() {

            getPlatformGroupList({

               queryData: 1,

               queryType: 1

            }).then(res => {

               const platformGroupList = res.data || []

               if (platformGroupList.length > 0) {

                  const {

                     activePlatformGroup

                  } = this

                  const temp = platformGroupList.find(i => i.id === activePlatformGroup.id)

                  this.TransferList = temp.platformList || []

               }

            })

         },

         getPlatformGroup() {

            getPlatformGroupList({

               queryData: 1,

               queryType: 1

            }).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()

                     this.timer = setInterval(() => {

                        this.getPlatformTask()

                     }, 120 * 1000)

                  }

               }

            })

         },

         getPlatformTask() {
            if(this.timer1){
               clearInterval(this.timer1)
            }

            getPlatformWorkData({

               platformId: this.activePlatform.id

            }).then(res => {

               this.platformTaskInfo = res.data
               this.currentDate = new Date(res.data.currentDate).getTime()

               this.circulInitTaskList()
               this.currentDate = this.currentDate + 1000

               this.timer1 = setInterval(() => {

                  this.circulInitTaskList()
                  this.currentDate = this.currentDate + 1000

               }, 1000)

            }, () => {})

         },

         circulInitTaskList() {
            let time = this.currentDate

            if (this.platformTaskInfo && this.platformTaskInfo.platformJobList && this.platformTaskInfo.platformJobList

               .length > 0) {

               this.platformTaskInfo.platformJobList.forEach(item => {
                  if(item.wmsContractNum){
                     item.wmsContractNum = item.wmsContractNum.split(',').join('，')
                  }

                  if (item.newCallDate) {
                     let timeNum = 0
                     if(time > new Date(item.newCallDate).getTime()){
                        timeNum = time - new Date(item.newCallDate).getTime()
                     }else{
                        timeNum = 0
                     }

                     if (timeNum > 3600000) {

                        item.callDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')

                     } else {

                        item.callDateTemp = dayjs.duration(timeNum).format('m分s秒')

                     }

                  }

                  if (item.newStartDate) {
                     let timeNum = 0
                     if(time > new Date(item.newStartDate).getTime()){
                        timeNum = time - new Date(item.newStartDate).getTime()
                     }else{
                        timeNum = 0
                     }

                     if (timeNum > 3600000) {

                        item.startDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')

                     } 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()

               clearInterval(this.timer)

               this.timer = setInterval(() => {

                  this.getPlatformTask()

               }, 60 * 1000)

            }

            this.showPlatformgroup = false

         },

         platformClick(item) {

            this.activePlatform = item

            this.getPlatformTask()

         },

         handleDetail(param) {

            wmsJobDetail({

               id: param.id

            }).then(res => {

               this.wmsInfo = res.data

               this.showDetail = true

            })

         },

         subDetail(item) {

            uni.navigateTo({

               url: `/pages/index/SubDetail?id=${item.bookId}`

            })

         },

         handleFinish(item) {

            finishWork({

               jobId: item.id

            }).then(res => {

                  if (res && res.code == 200) {

                     this.showToast('完成作业')

                     this.getPlatformTask()

                  }

            })

         },

         handleWork(item) { // å¼€å§‹ä½œä¸š

            beginWork({

               jobId: item.id

            }).then(res => {

               if (res && res.code == 200) {

                  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,

                  platformId: activePlatform.id

               }).then(res => {
                  if (res && res.code == 200) {
                     this.showToast('叫号成功')
                     this.getPlatformCallList()
                  }

						
               })

            } else { // æœˆå°å«å·

               platformCallNumber({

                  platformId: activePlatform.id,

                  jobId: item.id

               }).then(res => {
                  if (res && res.code == 200) {
                     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.platformCallList.forEach(item => {
                     if(item.wmsContractNum){
                        item.wmsContractNum = item.wmsContractNum.split(',').join('，')
                     }
                  })

                  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.getTransferList()

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

   page {

      background-color: #f1f2f2;

   }



   .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: 220rpx;

               height: 80rpx;

               line-height: 80rpx;

               text-align: center;

               background: #ffffff;

               border-radius: 8rpx;

               border: 1rpx solid #999999;

               font-size: 30rpx;

               color: #222222;

               margin-bottom: 15rpx;

               margin-right: 15rpx;

               white-space: nowrap;

               overflow: hidden;

               text-overflow: ellipsis;



               &: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 {

               font-weight: 600;

               height: 60rpx;

               display: flex;

               justify-content: center;

               align-items: center;

               font-size: 32rpx;

               color: #111111;

               border-radius: 8rpx;

               border: 1rpx solid #dfdede;



               text {

                  display: flex;

                  justify-content: center;

                  align-items: center;

                  height: 100%;



                  &: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: 132rpx;

               color: #666666;
               flex-shrink: 0;

            }



            .value {

               flex: 1;
               display: flex;
               flex-wrap: wrap;

            }

         }



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

            display: flex;

            justify-content: center;

            align-items: 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% - 160rpx);

         margin-top: 20rpx;



         .scroll_view {

            height: 100%;

         }



         .platform_ing {

            border-radius: 8rpx;

            border: 1rpx solid #dfe2e8;



            &:nth-of-type(1) {

               margin-top: 0;

            }

         }

      }



      .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;
                  flex-shrink: 0;

               }



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

            }

         }

      }

   }



   .detail_modal {

      height: 100vh;

      padding: 36rpx 30rpx;

      border-radius: 12rpx;

      box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.5);



      .modal_title {

         font-weight: 600;

         font-size: 32rpx;

         color: #222222;

         line-height: 44rpx;

         text-align: center;

         margin-bottom: 36rpx;

      }



      .contract_wrap {

         height: calc(100% - 400rpx);

         overflow-y: auto;

      }



      .contract_list {

         border-top: 1rpx solid #E5E5E5;

         margin-bottom: 30rpx;

         padding-top: 30rpx;



         &:nth-last-child(1) {

            margin-bottom: 0;

         }



         .list {

            background: #f7f7f7;

            border-radius: 8rpx;

            padding: 20rpx;



            .item {

               border-bottom: 1rpx solid #e5e5e5;

               padding-bottom: 20rpx;

               margin-bottom: 20rpx;



               &:nth-last-child(1) {

                  border: none;

                  padding-bottom: 0;

                  margin-bottom: 0;

               }

            }



            .line {

               display: flex;

               margin-bottom: 20rpx;



               &:nth-last-child(1) {

                  margin-bottom: 0rpx;

               }



               .label {

                  color: #666666;

                  width: 92rpx;

               }



               .value {

                  flex: 1;

                  color: #222222;

               }

            }

         }



         .title {

            font-weight: 600;

            font-size: 30rpx;

            color: $uni-color-primary;

            margin-bottom: 12rpx;

         }



         .address {

            font-size: 26rpx;

            color: #666666;

            margin-bottom: 20rpx;

         }

      }



      .info {

         .line {

            display: flex;

            margin-bottom: 20rpx;



            .label {

               font-size: 30rpx;

               color: #666666;

               width: 150rpx;

            }



            .value {

               flex: 1;

               font-size: 30rpx;

               color: #222222;

            }

         }

      }



      .separate {

         width: 750rpx;

         height: 2rpx;

         margin: 30rpx -30rpx;

         border: 1rpx solid #e5e5e5;

      }



      .id_card {

         display: flex;

         font-weight: 600;

         height: 60rpx;

         line-height: 60rpx;

         font-size: 32rpx;

         color: #111111;

         border-radius: 8rpx;

         border: 1rpx solid #dfdede;

         width: 220rpx;

         margin-bottom: 15rpx;



         text {

            &:nth-of-type(1) {

               background: #e9f5f6;

               padding: 0 12rpx;

            }



            &:nth-of-type(2) {

               padding-left: 10rpx;

            }



            &:nth-of-type(4) {

               padding-right: 6rpx;

            }

         }

      }

   }
   .line2{
      margin-right: -30rpx;
      padding-right: 0;
   }

</style>