<template>
|
<div>
|
|
<div class="demo-image" style="margin-top : 10px">
|
<div class="block" v-for="(item, index) in fits" :key="index">
|
<div style="text-align: center">
|
<el-avatar shape="square" :size="35" fit="cover" :src="item.src"></el-avatar>
|
</div>
|
<div style="width: 120px; text-align: center">
|
<span class="demonstration">{{ item.name }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div style="">
|
<el-tabs type="float:left;">
|
<div style="text-align: center; font-size: 16px;margin-top:-0px">第一排</div>
|
<div style="margin-left:-75px;margin-top:6px">
|
<div class="tag-group group-tag inline-block" style="left:0%">
|
|
<div v-for="layermodel in locationinfodata" :key="layermodel">
|
|
<el-popover v-for="(item, index) in layermodel" :key="index" placement="bottom"
|
width="200" :id="item.id" v-model:visible="visible">
|
<el-form ref="form" :model="item.form" label-width="90px" size="mini">
|
<el-form-item label="货位编号:">
|
{{ item.form!=null ? item.form.location_id :item.form2.location_id }}
|
</el-form-item>
|
<el-form-item label="货位状态:">
|
{{ item.form!=null ? item.form.location_state : item.form2.location_state }}
|
</el-form-item>
|
<el-form-item label="是否锁定:">
|
{{ item.form!=null ? item.form.location_islocked?"已锁定" : "未锁定" : item.form2.location_islocked?"已锁定" : "未锁定" }}
|
</el-form-item>
|
|
<el-form-item label="物料名称:">
|
{{item.form!=null ? item.form.materiel_name : "无物料"}}
|
</el-form-item>
|
<el-form-item label="重量(克):">
|
<label>{{
|
item.form!=null ? item.form.containerdtl_goodsWeight - item.form.containerhead_palletweight : "无"
|
}}</label>
|
</el-form-item>
|
</el-form>
|
|
<template #reference>
|
<el-tag class="box" :type="item.color"
|
@click="item.id != null ? btnclicktag1(item) : ''">
|
<el-avatar shape="square" :size="23"
|
:src="require('../../../assets/imgs/'+item.src)"></el-avatar>
|
<!-- <img src="../../../../static/ars_picture/none.png" /> -->
|
</el-tag>
|
<!-- <el-tag class="mx-1" size="large">Large</el-tag> -->
|
</template>
|
</el-popover>
|
</div>
|
|
<!-- 列序列 -->
|
<!-- <div style="position: absolute; top: 48px; left: 1%;">
|
<span>1</span>
|
</div>
|
<div style="position: absolute; top: 83px; left: 1%;">
|
<span>2</span>
|
</div>
|
<div style="position: absolute; top: 118px; left: 1%;">
|
<span>3</span>
|
</div>
|
<div style="position: absolute; top: 153px; left: 1%;">
|
<span>4</span>
|
</div>
|
<div style="position: absolute; top: 191px; left: 1%;">
|
<span>5</span>
|
</div>
|
<div style="position: absolute; top: 229px; left: 1%;">
|
<span>6</span>
|
</div>
|
<div style="position: absolute; top: 267px; left: 1%;">
|
<span>7</span>
|
</div>
|
<div style="position: absolute; top: 305px; left: 1%;">
|
<span>8</span>
|
</div> -->
|
|
</div>
|
|
<!-- class="inline-block" -->
|
<div style="margin-left:114px">
|
|
<div style="display: inline-block;"></div>
|
<div style="
|
width: 23px;
|
display: inline-block;
|
text-align: center;
|
margin-right: 2px;
|
" v-for="item in 52" :key="item">
|
<span>{{ item }}</span>
|
</div>
|
|
</div>
|
|
</div>
|
</el-tabs>
|
</div>
|
|
<div style="">
|
<el-tabs type="float:left;margin-top = -100px">
|
<div style="text-align: center; font-size: 16px;margin-top:-0px">第二排</div>
|
<div style="margin-left:-75px;margin-top:6px">
|
<div class="tag-group group-tag inline-block" style="left:0%">
|
|
<div v-for="layermodel in locationinfodata1" :key="layermodel">
|
|
<el-popover v-for="(item, index) in layermodel" :key="index" placement="top-start"
|
width="200" :id="item.id" v-model:visible="visible">
|
<el-form ref="form" :model="item.form" label-width="90px" size="mini">
|
<el-form-item label="货位编号:">
|
{{ item.form!=null ? item.form.location_id :item.form2.location_id }}
|
</el-form-item>
|
<el-form-item label="货位状态:">
|
{{ item.form!=null ? item.form.location_state : item.form2.location_state }}
|
</el-form-item>
|
<el-form-item label="是否锁定:">
|
{{ item.form!=null ? item.form.location_islocked?"已锁定" : "未锁定" : item.form2.location_islocked?"已锁定" : "未锁定" }}
|
</el-form-item>
|
|
<el-form-item label="物料名称:">
|
{{item.form!=null ? item.form.materiel_name : "无物料"}}
|
</el-form-item>
|
<el-form-item label="重量(克):">
|
<label>{{
|
item.form!=null ? item.form.containerdtl_goodsWeight - item.form.containerhead_palletweight : "无"
|
}}</label>
|
</el-form-item>
|
</el-form>
|
|
<template #reference>
|
<el-tag class="box" :type="item.color"
|
@click="item.id != null ? btnclicktag1(item) : ''">
|
<el-avatar shape="square" :size="23"
|
:src="require('../../../assets/imgs/'+item.src)"></el-avatar>
|
<!-- <img src="../../../../static/ars_picture/none.png" /> -->
|
</el-tag>
|
<!-- <el-tag class="mx-1" size="large">Large</el-tag> -->
|
</template>
|
</el-popover>
|
</div>
|
|
<!-- 列序列 -->
|
<!-- <div style="position: absolute; top: 48px; left: 1%;">
|
<span>1</span>
|
</div>
|
<div style="position: absolute; top: 83px; left: 1%;">
|
<span>2</span>
|
</div>
|
<div style="position: absolute; top: 118px; left: 1%;">
|
<span>3</span>
|
</div>
|
<div style="position: absolute; top: 153px; left: 1%;">
|
<span>4</span>
|
</div>
|
<div style="position: absolute; top: 191px; left: 1%;">
|
<span>5</span>
|
</div>
|
<div style="position: absolute; top: 229px; left: 1%;">
|
<span>6</span>
|
</div>
|
<div style="position: absolute; top: 267px; left: 1%;">
|
<span>7</span>
|
</div>
|
<div style="position: absolute; top: 305px; left: 1%;">
|
<span>8</span>
|
</div> -->
|
|
</div>
|
|
<!-- class="inline-block" -->
|
<div style="margin-left:114px">
|
|
<div style="display: inline-block;"></div>
|
<div style="
|
width: 23px;
|
display: inline-block;
|
text-align: center;
|
margin-right: 2px;
|
" v-for="item in 52" :key="item">
|
<span>{{ item }}</span>
|
</div>
|
|
</div>
|
|
</div>
|
</el-tabs>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import { ref } from 'vue';
|
|
const visible = ref(false);
|
// import screenfull from "screenfull";
|
export default {
|
data() {
|
return {
|
fits: [
|
{
|
name: '空货位',
|
src: require('../../../assets/imgs/NewEmpty.png'),
|
},
|
{
|
name: '空托盘',
|
src: require('../../../assets/imgs/EmptyPallet.png'),
|
},
|
{
|
name: '待测量',
|
src: require('../../../assets/imgs/WaitMeasure.png'),
|
},
|
{
|
name: '已测量',
|
src: require('../../../assets/imgs/HadMeasure.png'),
|
},
|
{
|
name: '入库中',
|
src: require('../../../assets/imgs/NewInbound.png'),
|
},
|
{
|
name: '测量中',
|
src: require('../../../assets/imgs/Measureing.png'),
|
},
|
{
|
name: '出库中',
|
src: require('../../../assets/imgs/NewOutbound.png'),
|
},
|
{
|
name: '异常',
|
src: require('../../../assets/imgs/NoNormal.png'),
|
},
|
{
|
name: '锁定',
|
src: require('../../../assets/imgs/NewLock.png'),
|
},
|
],
|
locationinfoInterval: '',
|
locationinfodata: [],
|
locationinfodata1: [],
|
};
|
},
|
beforeRouteEnter(to, form, next) {
|
next((vm) => {
|
vm.getlocationinfodata();
|
// vm.locationinfoInterval = setInterval(vm.getlocationinfodata, 50000);
|
});
|
},
|
beforeRouteLeave(to, form, next) {
|
// clearInterval(this.locationinfoInterval);
|
next();
|
},
|
created() {},
|
methods: {
|
getFullScreen() {
|
if (screenfull.isEnabled) {
|
screenfull.toggle();
|
let _this = this;
|
screenfull.on('change', () => {
|
if (screenfull.isFullscreen) {
|
console.log(this.$parent.$parent);
|
this.$parent.$parent.$refs.volAside.style.display = 'none';
|
this.$parent.$parent.$refs.volPath.style.display = 'none';
|
this.$parent.$parent.$refs.volheader.style.display = 'none';
|
this.$parent.$parent.$refs.volContainer.style.left = '90px';
|
} else {
|
this.$parent.$parent.$refs.volAside.style.display = 'block';
|
this.$parent.$parent.$refs.volPath.style.display = 'block';
|
this.$parent.$parent.$refs.volheader.style.display = 'block';
|
this.$parent.$parent.$refs.volContainer.style.left = '199px';
|
}
|
});
|
}
|
},
|
|
btnclicktag1(e) {
|
let jsondata = this.locationinfodata;
|
console.log(jsondata);
|
for (let index = 0; index < jsondata.length; index++) {
|
if (jsondata[index].location_id == '001-011-001') {
|
}
|
if (jsondata[index].location_id == e.id) {
|
this.popoverdisabled = false;
|
break;
|
}
|
}
|
},
|
|
getlocationinfodata() {
|
let param = {
|
MainData: { layer: '3' },
|
DetailData: null,
|
DelKeys: null,
|
};
|
|
this.http
|
.post('/api/VV_ContainerInfo/SelectContainerList', param, '数据获取中')
|
.then((x) => {
|
if (x.status) {
|
console.log(x);
|
this.locationinfodata = x.data[0];
|
this.locationinfodata1 = x.data[1];
|
} else {
|
this.$Message.error(x.message);
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.box {
|
width: 23px;
|
height: 23px;
|
margin-right: 2px;
|
margin-bottom: 4px;
|
padding: 0px;
|
line-height: 23px;
|
text-align: left;
|
}
|
.box img {
|
width: 23px;
|
}
|
.group-tag {
|
width: 1500px;
|
min-width: 800px;
|
}
|
.inline-block {
|
display: inline-block;
|
text-align: center;
|
margin-left: 1%;
|
}
|
.left-group {
|
margin-left: 100px;
|
display: inline-block;
|
width: 640px;
|
}
|
.right-group {
|
margin-left: 150px;
|
display: inline-block;
|
max-width: 640px;
|
}
|
.line-left {
|
margin-top: 50px;
|
}
|
.line-right {
|
margin-top: 50px;
|
}
|
.block {
|
display: inline-block;
|
}
|
.image {
|
max-width: 50px;
|
margin-left: auto;
|
margin-right: auto;
|
display: flex;
|
justify-content: center;
|
height: 50px;
|
}
|
.demo-image {
|
max-width: 1600px;
|
margin-left: auto;
|
margin-right: auto;
|
display: flex;
|
justify-content: center;
|
}
|
.el-tabs--border-card {
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
|
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
|
width: 1641px;
|
}
|
.el-card {
|
border: 1px solid #ebeef5;
|
background-color: #fff;
|
color: #303133;
|
-webkit-transition: 0.3s;
|
transition: 0.3s;
|
width: 1641px;
|
}
|
/* .devices {
|
border: 0px solid #ffffff;
|
background-color: white;
|
} */
|
.el-form-item--mini.el-form-item,
|
.el-form-item--small.el-form-item {
|
margin-bottom: 0px;
|
}
|
</style>
|
