<template>
|
<div class="station-view-page">
|
<a-spin :spinning="loading">
|
<div class="top-blcok">
|
<search-form ref="search" :loading.sync="loading" @search="onSearch" />
|
</div>
|
<div class="containter-blcok">
|
<div class="example-tags">
|
<div class="tag tan-tag">空闲</div>
|
<div class="tag orange-tag">待入</div>
|
<div class="tag purple-tag">待出</div>
|
<div class="tag primary-tag">存货</div>
|
<div class="tag red-tag">停用</div>
|
</div>
|
<!-- 工位显示区域 start -->
|
<div class="stations-box">
|
<div class="station-item-group">
|
<div class="station-item" v-for="(item,index) in list" :key="'station-item-'+index" :class="[
|
(!item||item.status===undefined||item.status===null||item.status===2)?'died-item':(
|
item.status===1?'red-item':(
|
item.stataionStatus===2?'orange-item':(
|
item.stataionStatus===4?'purple-item':(
|
item.stataionStatus===1?'tan-item':(
|
item.stataionStatus===3?'primary-item':''
|
)
|
)
|
)
|
)
|
)
|
]" @click="openDetail(item)">
|
{{item?item.name:''}}
|
</div>
|
</div>
|
</div>
|
<!-- 库区显示区域 end -->
|
</div>
|
|
<detail-drawer :visible.sync="detailVisible" :row="detailRow" @callback="lockCallback" />
|
</a-spin>
|
</div>
|
</template>
|
|
<script>
|
import SearchForm from './SearchForm.vue'
|
import DetailDrawer from './DetailDrawer.vue'
|
import { GetStationList } from '@/api/modular/main/StationViewManage'
|
export default {
|
name:'stationViewPage',
|
components:{SearchForm,DetailDrawer},
|
data(){
|
return {
|
detailVisible:false,
|
detailRow:{},
|
loading:false,
|
countNum: {
|
empty: 0,
|
daiRu: 0,
|
daiChu: 0,
|
fill: 0,
|
lock: 0,
|
emptyContainer:0
|
},
|
list:[],
|
searchForm:{}
|
}
|
},
|
methods:{
|
openDetail(obj){
|
this.detailRow = obj
|
this.detailVisible = true;
|
},
|
getList(id,callback){
|
GetStationList(id).then((d)=>{
|
this.list = d.data || []
|
callback && callback(true)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
},
|
onSearch(valObj) {
|
this.loading = true
|
this.searchForm = valObj
|
this.getList(valObj,()=>{
|
this.loading = false
|
})
|
},
|
lockCallback(){
|
this.loading = true
|
this.getList(this.searchForm,()=>{
|
this.loading = false
|
})
|
},
|
init(){
|
this.loading = true
|
this.$refs.search.init((f,val)=>{
|
if (f) {
|
this.getList(val,()=>{
|
this.loading = false
|
})
|
} else {
|
this.loading = false
|
}
|
})
|
}
|
},
|
mounted(){
|
this.init()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.station-view-page{
|
overflow: hidden;
|
display: flex;
|
overflow: auto;
|
background-color: #fff;
|
border-radius: 10px;
|
flex-direction: column;
|
height: 100%;
|
|
.top-blcok {
|
flex-shrink: 0;
|
padding: 10px 16px 16px 16px;
|
}
|
|
.containter-blcok {
|
flex-grow: 1;
|
height: 1px;
|
display: flex;
|
flex-direction: column;
|
@gray-color: #808080;
|
@danger-color: #ff3333;
|
@primary-color: #ccffff;
|
@orange-color: #ffa500;
|
@purple-color: #800080;
|
@tan-color: #d2b48c;
|
@border-color-x: #c0c0c0;
|
|
.example-tags {
|
flex-shrink: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 16px 16px 16px;
|
|
.tag {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 30px;
|
width: 100px;
|
border: 1px solid @border-color-x;
|
border-radius: 4px;
|
cursor: default;
|
background-color: @gray-color;
|
|
&+.tag {
|
margin-left: 10px;
|
}
|
|
&.red-tag {
|
background-color: @danger-color;
|
}
|
|
&.primary-tag {
|
background-color: @primary-color;
|
}
|
|
&.orange-tag {
|
background-color: @orange-color;
|
}
|
|
&.purple-tag {
|
background-color: @purple-color;
|
}
|
|
&.tan-tag{
|
background-color: @tan-color;
|
}
|
|
&:not(.primary-tag) {
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
.stations-box {
|
@divider-size:8px;
|
flex-grow: 1;
|
height: 1px;
|
overflow: auto;
|
.station-item-group{
|
display: flex;
|
flex-wrap: wrap;
|
padding-left: @divider-size;
|
}
|
.station-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 150px;
|
height: 50px;
|
overflow: hidden;
|
white-space: nowrap;
|
margin-right: @divider-size;
|
margin-bottom: @divider-size;
|
border: 1px solid @border-color-x;
|
border-radius: 4px;
|
cursor: pointer;
|
flex-shrink: 0;
|
background-color: @gray-color;
|
|
&.active {
|
box-shadow: 0 0 4px #00ff00;
|
}
|
|
&.died-item {
|
background-color: #FFFFFF;
|
background-image: linear-gradient(
|
to top right,
|
rgba(192, 192, 192, 0) 0%,
|
rgba(192, 192, 192, 0) calc(50% - 1px),
|
rgba(192, 192, 192, 1) 50%,
|
rgba(192, 192, 192, 0) calc(50% + 1px),
|
rgba(192, 192, 192, 0) 100%
|
), linear-gradient(
|
to bottom right,
|
rgba(192, 192, 192, 0) 0%,
|
rgba(192, 192, 192, 0) calc(50% - 1px),
|
rgba(192, 192, 192, 1) 50%,
|
rgba(192, 192, 192, 0) calc(50% + 1px),
|
rgba(192, 192, 192, 0) 100%
|
);
|
cursor: not-allowed;
|
}
|
|
&.red-item {
|
background-color: @danger-color;
|
}
|
|
&.primary-item {
|
background-color: @primary-color;
|
}
|
|
&.orange-item {
|
background-color: @orange-color;
|
}
|
|
&.purple-item {
|
background-color: @purple-color;
|
}
|
|
&.tan-item{
|
background-color: @tan-color;
|
}
|
|
&:not(.primary-item,.died-item) {
|
color: #FFFFFF;
|
}
|
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="less">
|
.station-view-page{
|
.ant-spin-nested-loading,.ant-spin-container{
|
height:100%;
|
}
|
.ant-spin-container{
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
</style>
|
