<template>
|
<div class="main_app">
|
<div class="main_head mb20">
|
<el-tabs v-model="currentPlatform" class="tabs">
|
<!-- <el-tab-pane label="用户管理" name="first" v-for="item in platformList" :key="item.id"></el-tab-pane> -->
|
<el-tab-pane label="用户管理" name="first"></el-tab-pane>
|
</el-tabs>
|
<el-button type="primary" class="ml20" @click="handleSet"
|
>配置月台</el-button
|
>
|
</div>
|
<!-- -->
|
<div class="platform_list">
|
<div class="item" v-for="i in 2">
|
<div class="head">
|
<div class="left">
|
<div class="status mr10">作业中</div>
|
<div class="name">6号月台</div>
|
<div class="ite">
|
<span class="placeholder9">作业：</span><span>1</span>
|
</div>
|
<div class="ite">
|
<span class="placeholder9">作业：</span><span>1</span>
|
</div>
|
<div class="ite">
|
<span class="placeholder9">作业：</span><span class="red">1</span>
|
</div>
|
</div>
|
<el-button type="primary" @click="handleQueuing()">叫号</el-button>
|
</div>
|
<div class="list">
|
<div class="info" v-for="j in 3">
|
<div class="line">
|
<div class="left">
|
<span class="plate">皖A12122</span>
|
</div>
|
<div class="right">
|
<span class="green">作业中</span>
|
<span class="green ml20">23分钟26秒</span>
|
</div>
|
</div>
|
<div class="line">
|
<div class="ite">
|
<span>运输单号：</span>
|
<span>202020</span>
|
</div>
|
<div class="ite">
|
<span>驾驶员：</span>
|
<span>202020</span>
|
</div>
|
<div class="ite">
|
<span>手机号：</span>
|
<span>202020</span>
|
</div>
|
<div class="ite">
|
<span>总运输量：</span>
|
<span>202020</span>
|
</div>
|
<div class="ite" style="width: 66.6%">
|
<span>运输公司：</span>
|
<span>20202dasd玩儿玩儿玩儿额外 额外0</span>
|
</div>
|
<div class="ite"></div>
|
</div>
|
<div class="line">
|
<div class="left">
|
<span class="primaryColor pointer" @click="isShowDetail = true"
|
>运单详情</span
|
>
|
</div>
|
<div class="right">
|
<el-button type="primary" @click="handleFinish()"
|
>作业完成</el-button
|
>
|
<el-button plain>转移月台</el-button>
|
<el-button plain>异常挂起</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 配置显示月台 -->
|
<el-dialog
|
title="配置显示月台"
|
:visible.sync="isShowSet"
|
center
|
width="420px"
|
>
|
<div class="set_modal">
|
<div class="mb20">
|
<div class="title">入库月台组</div>
|
<div class="list">
|
<div class="item active">1号月台</div>
|
<div class="item">2号月台</div>
|
<div class="item">1号月台</div>
|
<div class="item">2号月台</div>
|
</div>
|
</div>
|
<div>
|
<div class="title">入库月台组</div>
|
<div class="list">
|
<div class="item">1号月台</div>
|
<div class="item">2号月台</div>
|
<div class="item">1号月台</div>
|
<div class="item">2号月台</div>
|
</div>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="setReset">重置</el-button>
|
<el-button type="primary" @click="setSub">确定</el-button>
|
</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>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentPlatform: '',
|
platformList: [],
|
|
isShowSet: false, // 月台配置
|
setParam: {},
|
isShowDetail: false, // 运单详情
|
detail: {},
|
isShowQueuing: false,
|
queuingForm: {}
|
}
|
},
|
methods: {
|
handleQueuing(row) {
|
this.isShowQueuing = true
|
},
|
handleFinish(item) {
|
this.$confirm('高架库6号月台 皖A12345 作业结束', '温馨提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
},
|
handleSet() {
|
this.isShowSet = true
|
},
|
setReset() { },
|
setSub() { }
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
.platform_list {
|
.item {
|
/* padding: 16px 24px; */
|
background: #ffffff;
|
border-radius: 2px;
|
border: 1px solid #dfe2e8;
|
margin-bottom: 12px;
|
.head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%);
|
border-radius: 2px 2px 0px 0px;
|
padding: 0 28px;
|
.left {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.name {
|
font-size: 16px;
|
margin-right: 50px;
|
}
|
.status {
|
line-height: 25px;
|
height: 25px;
|
padding: 0 4px;
|
background: #00ba67;
|
border-radius: 2px;
|
color: #ffffff;
|
}
|
.ite {
|
margin-right: 30px;
|
}
|
}
|
}
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
margin-top: 10px;
|
padding: 16px;
|
.info {
|
background: #effbf5;
|
border-radius: 2px;
|
border: 1px solid #dfe2e8;
|
padding: 16px;
|
border-radius: 2px;
|
margin-bottom: 10px;
|
width: 30%;
|
.line {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
margin-bottom: 6px;
|
span {
|
&:nth-child(1) {
|
color: #999999;
|
}
|
}
|
.ite {
|
width: 33.3%;
|
margin-top: 8px;
|
}
|
.left {
|
.plate {
|
font-size: 15px;
|
color: #111111;
|
padding: 4px 5px;
|
font-weight: 700;
|
border: 1px solid #279baa;
|
background-color: #fff;
|
}
|
}
|
.right {
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.main_head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.tabs {
|
flex: 1;
|
}
|
}
|
/* */
|
.set_modal {
|
.title {
|
font-size: 16px;
|
font-weight: 600;
|
margin-bottom: 16px;
|
}
|
.list {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.item {
|
cursor: pointer;
|
width: 30%;
|
height: 32px;
|
border: 1px solid #dfe2e8;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 2px;
|
margin-bottom: 12px;
|
}
|
.active {
|
background: rgba(39, 155, 170, 0.06);
|
border: 1px solid #279baa;
|
color: #279baa;
|
}
|
}
|
}
|
/* */
|
.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>
|
