| | |
| | | <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 class="mb20 main_header"> |
| | | <div class="platgroup_tabs"> |
| | | <div |
| | | class="tab" |
| | | :class="{ active: activeGroup.id === item.id }" |
| | | @click="platgroupClick(item)" |
| | | v-for="(item, i) in PlatGroupList" |
| | | :key="i" |
| | | > |
| | | {{ item.name }} |
| | | </div> |
| | | </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> |
| | | import { |
| | | getPlatformGroupList |
| | | } from '@/api' |
| | | export default { |
| | | data () { |
| | | return { |
| | | filters: {}, |
| | | platformList: [], |
| | | activeGroup: {}, |
| | | PlatGroupList: [], |
| | | |
| | | isShowSet: false, // 月台配置 |
| | | setParam: {}, |
| | |
| | | detail: {} |
| | | } |
| | | }, |
| | | created () { |
| | | this.getPlatGroupList() |
| | | }, |
| | | methods: { |
| | | getPlatGroupList () { |
| | | getPlatformGroupList({ |
| | | queryData: 1, |
| | | queryType: 1 |
| | | }).then(res => { |
| | | this.PlatGroupList = res || [] |
| | | if (this.activeGroup && this.activeGroup.id) { |
| | | this.activeGroup = res.find(item => item.id === this.activeGroup.id) |
| | | } else { |
| | | this.activeGroup = res[0] |
| | | } |
| | | }) |
| | | }, |
| | | platgroupClick (item) { |
| | | this.activeGroup = { ...item } |
| | | }, |
| | | 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 { |
| | | @import "@/assets/style/variables.scss"; |
| | | .main_header { |
| | | .platgroup_tabs { |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | .item { |
| | | border-bottom: 1px solid #dfe2e8; |
| | | .tab { |
| | | color: #666666; |
| | | margin-right: 40px; |
| | | 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; |
| | | padding-bottom: 18px; |
| | | border-bottom: 2px solid #fff; |
| | | } |
| | | .active { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #222222; |
| | | border-bottom: 2px solid $primary-color; |
| | | } |
| | | } |
| | | } |