<template>
|
<div class="main_app">
|
<div class="mb20">
|
<el-select v-model="platformId" @change="getList()">
|
<el-option v-for="item in PlatformList" :key="item.id" :value="item.id" :label="item.name" />
|
</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="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="handleDetail"
|
>运单详情</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>
|
<!-- 运单详情 -->
|
<!-- -->
|
<!-- 叫号 -->
|
<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: '',
|
PlatformList: [],
|
dataList: [],
|
|
isShowSet: false, // 月台配置
|
setParam: {},
|
isShowDetail: false, // 运单详情
|
detail: {},
|
isShowQueuing: false
|
}
|
},
|
created () {
|
this.getPlatList()
|
this.getList()
|
},
|
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
|
getPlatformJob({
|
model: { platformId }
|
}).then(res => {
|
this.dataList = res.records
|
})
|
},
|
handleFinish (item) {
|
this.$confirm('高架库6号月台 皖A12345 作业结束', '温馨提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
},
|
getPlatList () {
|
getPlatform({
|
model: {}
|
}).then(res => {
|
this.PlatformList = res.records
|
})
|
},
|
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;
|
}
|
}
|
}
|
/* */
|
/* */
|
</style>
|
