<template>
|
<div class="main_app">
|
<div class="df_ac mb20">
|
<el-select v-model="currentPlatform" class="w300">
|
<el-option v-for="item in platformList" :key="item.id"></el-option>
|
</el-select>
|
<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="name">6号月台</div>
|
<div class="status">
|
<span class="green">作业中</span>
|
<span class="">作业：1</span>
|
<span>叫号：1</span>
|
<span>等待：1</span>
|
<span class="red">异常：1</span>
|
</div>
|
<el-button type="primary">叫号</el-button>
|
</div>
|
<div class="info" v-for="j in 3">
|
<div class="line">
|
<div class="left">
|
<span class="plate mr20">皖A12122</span>
|
<span class="placeholder9">驾驶员</span>
|
<span>王某某</span>
|
<span>18888888888</span>
|
</div>
|
<div class="right">
|
<span class="green">作业中</span>
|
<span class="placeholder9 ml20">作业时长：23分钟26秒</span>
|
</div>
|
</div>
|
<div class="line">
|
<div class="left">
|
<div>
|
<span>运输单号</span
|
><span class="ml10 placeholder9">1231231</span>
|
</div>
|
<div>
|
<span>总运输量</span
|
><span class="ml10 placeholder9">3000万支</span
|
><span class="primaryColor ml10 pointer" @click="isShowDetail = true">运单详情</span>
|
</div>
|
</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>
|
<!-- 配置显示月台 -->
|
<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">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="运单详情"
|
:visible.sync="isShowDetail"
|
width="420px"
|
>
|
<div class="detail_modal">
|
<div class="head">
|
<div class="line">
|
<span class="ccc">运输单号</span>
|
<span>28282</span>
|
</div>
|
<div class="line">
|
<span class="ccc">运输车辆</span>
|
<span>皖A12122</span>
|
</div>
|
<div class="line">
|
<span class="ccc">驾驶员</span>
|
<span>王德发</span>
|
<span>1888888</span>
|
</div>
|
<div class="line">
|
<span class="ccc">总运输量</span>
|
<span>28282万支</span>
|
</div>
|
</div>
|
<div class="content">
|
<div class="item">
|
<div class="line">
|
<div>合同号：1292992</div>
|
<div class="address">收货地：address</div>
|
</div>
|
<div class="line">
|
<div>物料名称：黄山</div>
|
<div>数量：700</div>
|
</div>
|
<div class="line">
|
<div>物料名称：黄山</div>
|
<div>数量：200</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowDetail = false">关闭</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentPlatform: '',
|
platformList: [],
|
|
isShowSet: false, // 月台配置
|
setParam: {},
|
isShowDetail: false, // 运单详情
|
detail: {}
|
}
|
},
|
methods: {
|
handleFinish(item) {
|
this.$confirm('高架库6号月台 皖A12345 作业结束', '温馨提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
},
|
handleSet() {
|
this.isShowSet = true
|
},
|
setReset() { },
|
setSub() { }
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.platform_list {
|
.item {
|
padding: 16px 24px;
|
border-radius: 2px;
|
border: 2px solid #cccccc;
|
margin-bottom: 12px;
|
.head {
|
display: flex;
|
justify-content: space-between;
|
.name {
|
font-size: 16px;
|
}
|
.status {
|
flex: 1;
|
margin-left: 50px;
|
span {
|
margin-right: 30px;
|
}
|
}
|
}
|
.info {
|
margin-top: 10px;
|
border: 1px solid #999999;
|
padding: 6px 8px;
|
border-radius: 2px;
|
margin-bottom: 10px;
|
.line {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 6px;
|
.left {
|
.plate {
|
border: 1px solid #4969f6;
|
border-radius: 2px;
|
padding: 0 5px;
|
}
|
}
|
.right {
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
}
|
}
|
|
/* */
|
.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;
|
background-color: #d9d9d9;
|
border: 1px solid #4d99a7;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 6px;
|
margin-bottom: 12px;
|
}
|
}
|
}
|
/* */
|
.detail_modal {
|
font-size: 12px;
|
.head {
|
border-bottom: 1px solid #999999;
|
}
|
.item {
|
border-bottom: 1px solid #999999;
|
}
|
.line {
|
display: flex;
|
justify-content: space-between;
|
.ccc{
|
color: #999999;
|
}
|
.address {
|
margin-right: 30px;
|
}
|
}
|
}
|
</style>
|
