|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="line"> | 
|---|
|  |  |  | <div class="left"> | 
|---|
|  |  |  | <span class="primaryColor pointer" @click="isShowDetail = true" | 
|---|
|  |  |  | <span class="primaryColor pointer" @click="handleDetail" | 
|---|
|  |  |  | >运单详情</span | 
|---|
|  |  |  | > | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </el-dialog> | 
|---|
|  |  |  | <!-- 运单详情 --> | 
|---|
|  |  |  | <el-dialog | 
|---|
|  |  |  | title="运单详情" | 
|---|
|  |  |  | center | 
|---|
|  |  |  | :visible.sync="isShowDetail" | 
|---|
|  |  |  | width="420px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="detail_modal"> | 
|---|
|  |  |  | <div class="head"> | 
|---|
|  |  |  | <div class="plate">皖A12122</div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <span>运输单号:</span> | 
|---|
|  |  |  | <span>22222</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <span>总运输量:</span> | 
|---|
|  |  |  | <span>22222</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <span>驾驶员:</span> | 
|---|
|  |  |  | <span>22222</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="title">合同列表</div> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <div class="contract">合同号:1292992</div> | 
|---|
|  |  |  | <div class="placeholder6">收货地:address</div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="line"> | 
|---|
|  |  |  | <div class="left"><span>物料名称:</span><span>黄山</span></div> | 
|---|
|  |  |  | <div class="right"><span>数量:</span><span>100</span></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <span slot="footer" class="dialog-footer"> | 
|---|
|  |  |  | <el-button @click="isShowDetail = false">关闭</el-button> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </el-dialog> | 
|---|
|  |  |  | <!--  --> | 
|---|
|  |  |  | <el-drawer | 
|---|
|  |  |  | title="月台叫号-xx号月台" | 
|---|
|  |  |  | :visible.sync="isShowQueuing" | 
|---|
|  |  |  | size="720px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="queuing_modal"> | 
|---|
|  |  |  | <div class="df_ac mb20"> | 
|---|
|  |  |  | <span>搜索车辆:</span> | 
|---|
|  |  |  | <el-input | 
|---|
|  |  |  | class="flex1 mr20" | 
|---|
|  |  |  | v-model="queuingForm.aa" | 
|---|
|  |  |  | placeholder="请输入车牌号" | 
|---|
|  |  |  | ></el-input> | 
|---|
|  |  |  | <el-button type="primary">查找</el-button> | 
|---|
|  |  |  | <el-button>重置</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <div class="head df_sb"> | 
|---|
|  |  |  | <div class="plate">皖A12122</div> | 
|---|
|  |  |  | <div class="status">已签到</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="info"> | 
|---|
|  |  |  | <div class="ite"> | 
|---|
|  |  |  | <span>运输单号:</span> | 
|---|
|  |  |  | <span>12312</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="ite"> | 
|---|
|  |  |  | <span>驾驶员:</span> | 
|---|
|  |  |  | <span>12312</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="ite"> | 
|---|
|  |  |  | <span>手机号:</span> | 
|---|
|  |  |  | <span>12312</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="ite"> | 
|---|
|  |  |  | <span>总运输量:</span> | 
|---|
|  |  |  | <span>12312</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="ite" style="width: 66%"> | 
|---|
|  |  |  | <span>运输公司:</span> | 
|---|
|  |  |  | <span>12312</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="footer df_sb"> | 
|---|
|  |  |  | <div class="detail">运单详情</div> | 
|---|
|  |  |  | <el-button type="primary">叫号</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <el-button class="mt30" @click="isShowQueuing = false">关闭</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-drawer> | 
|---|
|  |  |  | <!-- 叫号 --> | 
|---|
|  |  |  | <PlatformQueuing ref="PlatformQueuingRef" v-if="isShowQueuing" @success="getList" @close="isShowQueuing = false" /> | 
|---|
|  |  |  | <WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import { getPlatform, getPlatformJob } from '@/api' | 
|---|
|  |  |  | import PlatformQueuing from './components/PlatformQueuing.vue' | 
|---|
|  |  |  | import WaybillDetail from './components/WaybillDetail.vue' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | components: { | 
|---|
|  |  |  | PlatformQueuing, | 
|---|
|  |  |  | WaybillDetail | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | platformId: '', | 
|---|
|  |  |  | 
|---|
|  |  |  | setParam: {}, | 
|---|
|  |  |  | isShowDetail: false, // 运单详情 | 
|---|
|  |  |  | detail: {}, | 
|---|
|  |  |  | isShowQueuing: false, | 
|---|
|  |  |  | queuingForm: {} | 
|---|
|  |  |  | isShowQueuing: false | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created () { | 
|---|
|  |  |  | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | handleQueuing (row) { | 
|---|
|  |  |  | this.isShowQueuing = true | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.$refs.PlatformQueuingRef.isShowModal = true | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleDetail () { | 
|---|
|  |  |  | this.isShowDetail = true | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.$refs.WaybillDetailRef.isShowModal = true | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getList () { | 
|---|
|  |  |  | const { platformId } = this | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /*  */ | 
|---|
|  |  |  | .detail_modal { | 
|---|
|  |  |  | font-size: 12px; | 
|---|
|  |  |  | color: #282828; | 
|---|
|  |  |  | .head { | 
|---|
|  |  |  | background: rgba(39, 155, 170, 0.05); | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | border: 1px solid #dfe2e8; | 
|---|
|  |  |  | padding: 16px; | 
|---|
|  |  |  | .plate { | 
|---|
|  |  |  | width: 90px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | font-size: 15px; | 
|---|
|  |  |  | color: #111111; | 
|---|
|  |  |  | padding: 4px 5px; | 
|---|
|  |  |  | font-weight: 700; | 
|---|
|  |  |  | border: 1px solid #279baa; | 
|---|
|  |  |  | background-color: #fff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | margin-top: 16px; | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | width: 50%; | 
|---|
|  |  |  | margin-bottom: 8px; | 
|---|
|  |  |  | span { | 
|---|
|  |  |  | &:nth-child(1) { | 
|---|
|  |  |  | color: #666666; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .title { | 
|---|
|  |  |  | margin: 16px 0; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | color: #222222; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .content { | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | border: 1px solid #dfe2e8; | 
|---|
|  |  |  | padding: 16px; | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | background: #f7f7f7; | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | padding: 12px 16px; | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .contract { | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | font-size: 15px; | 
|---|
|  |  |  | color: #279baa; | 
|---|
|  |  |  | margin-bottom: 4px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | margin-bottom: 8px; | 
|---|
|  |  |  | &:nth-last-child(1) { | 
|---|
|  |  |  | margin: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | div { | 
|---|
|  |  |  | span { | 
|---|
|  |  |  | &:nth-child(1) { | 
|---|
|  |  |  | color: #666666; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .left { | 
|---|
|  |  |  | flex: 6; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .right { | 
|---|
|  |  |  | flex: 4; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /*  */ | 
|---|
|  |  |  | .queuing_modal { | 
|---|
|  |  |  | padding: 10px 30px; | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | background: #f4fafb; | 
|---|
|  |  |  | border-radius: 2px; | 
|---|
|  |  |  | border: 1px solid #dfe2e8; | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | padding: 16px; | 
|---|
|  |  |  | .head { | 
|---|
|  |  |  | margin-bottom: 15px; | 
|---|
|  |  |  | .plate { | 
|---|
|  |  |  | width: 90px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | font-size: 15px; | 
|---|
|  |  |  | color: #111111; | 
|---|
|  |  |  | padding: 4px 5px; | 
|---|
|  |  |  | font-weight: 700; | 
|---|
|  |  |  | border: 1px solid #279baa; | 
|---|
|  |  |  | background-color: #fff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .status { | 
|---|
|  |  |  | color: $primaryColor; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .info { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | .ite { | 
|---|
|  |  |  | width: 33.3%; | 
|---|
|  |  |  | margin-bottom: 8px; | 
|---|
|  |  |  | span { | 
|---|
|  |  |  | &:nth-child(1) { | 
|---|
|  |  |  | color: #666666; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .footer { | 
|---|
|  |  |  | .detail { | 
|---|
|  |  |  | color: $primaryColor; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|