<template>
|
<div class="main_app">
|
<div class="df_ac mb20">
|
<el-select v-model="filters.currentPlatform" class="w300">
|
<el-option v-for="item in platformList" :key="item.id"></el-option>
|
</el-select>
|
<el-input v-model="filters.id" placeholder="车牌号" class="ml20 w200" />
|
<el-button type="primary" class="ml20" @click="getList()">查询</el-button>
|
<el-button class="ml20" @click="clear">重置</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">运单详情</span>
|
</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">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="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>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
filters: {},
|
platformList: [],
|
|
isShowSet: false, // 月台配置
|
setParam: {},
|
isShowDetail: false, // 运单详情
|
detail: {}
|
}
|
},
|
methods: {
|
getList () { },
|
clear () { }
|
}
|
}
|
</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;
|
}
|
}
|
}
|
</style>
|
