<template>
|
<div>
|
|
<div class="demo-image" style="margin-top:20px">
|
<div style="text-align: center">
|
<span style="font-size:35px" class="demonstration">自定义货架区域</span>
|
</div>
|
</div>
|
|
<div style="margin-top:20px">
|
<el-row>
|
<el-col :span="8">
|
<div class="grid-content bg-purple">
|
<div style="margin-left:50px;margin-right:50px;padding-top:10px;padding-bottom:10px">
|
<el-row>
|
<div>
|
<span style="font-size:15px" class="demonstration">区域名称：</span>
|
<el-input style="width:340px" v-model="input" placeholder="请输入内容"></el-input>
|
</div>
|
</el-row>
|
<el-row type="flex" justify="space-between">
|
<div>
|
<span style="font-size:15px" class="demonstration">区域起始行</span>
|
<el-select style="width:100px" v-model="startRow" placeholder="请选择">
|
<el-option
|
v-for="item in rowsList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div>
|
<span style="font-size:15px" class="demonstration">区域结束行</span>
|
<el-select style="width:100px" v-model="endRow" placeholder="请选择">
|
<el-option
|
v-for="item in rowsList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
</el-row>
|
<el-row type="flex" justify="space-between">
|
<div>
|
<span style="font-size:15px" class="demonstration">区域起始列</span>
|
<el-select style="width:100px" v-model="startColumn" placeholder="请选择">
|
<el-option
|
v-for="item in columnsList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div>
|
<span style="font-size:15px" class="demonstration">区域结束列</span>
|
<el-select style="width:100px" v-model="endColumn" placeholder="请选择">
|
<el-option
|
v-for="item in columnsList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
</el-row>
|
<el-row type="flex" justify="space-between">
|
<div>
|
<span style="font-size:15px" class="demonstration">区域起始层</span>
|
<el-select style="width:100px" v-model="startLayer" placeholder="请选择">
|
<el-option
|
v-for="item in layersList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div>
|
<span style="font-size:15px" class="demonstration">区域结束层</span>
|
<el-select style="width:100px" v-model="endLayer" placeholder="请选择">
|
<el-option
|
v-for="item in layersList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
</el-row>
|
|
<el-row type="flex" justify="space-around">
|
<el-button type="info">重置已选</el-button>
|
<el-button type="primary">保存提交</el-button>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content bg-purple-light">
|
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content bg-purple">
|
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
|
import { ref } from 'vue'
|
|
const visible = ref(false)
|
// import screenfull from "screenfull";
|
export default {
|
data() {
|
return {
|
username:"",
|
rowsList:[],
|
startRow:"",
|
endRow:"",
|
columnsList:[],
|
startColumn:"",
|
endColumn:"",
|
layersList:[],
|
startLayer:"",
|
endLayer:"",
|
};
|
},
|
beforeRouteEnter(to, form, next) {
|
next(vm => {
|
//vm.getlocationinfodata();
|
// vm.locationinfoInterval = setInterval(vm.getlocationinfodata, 50000);
|
});
|
},
|
beforeRouteLeave(to, form, next) {
|
|
},
|
created() {
|
for(let i=1;i<7;i++){
|
var obj = {"value": i, "label":"第"+i+"行"};
|
this.rowsList.push(obj);
|
}
|
for(let i=2;i<50;i++){
|
var obj = {"value": i, "label":"第"+i+"列"};
|
this.columnsList.push(obj);
|
}
|
for(let i=1;i<6;i++){
|
var obj = {"value": i, "label":"第"+i+"层"};
|
this.layersList.push(obj);
|
}
|
},
|
methods: {
|
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: 25px;
|
height: 25px;
|
margin-right: 4px;
|
margin-bottom: 4px;
|
padding: 0px;
|
line-height: 25px;
|
text-align: center;
|
}
|
.box img {
|
width: 25px;
|
}
|
.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;
|
}
|
|
.el-row {
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
.bg-purple-dark {
|
background: #f0f0f0;
|
}
|
.bg-purple {
|
background: #eeeeee;
|
}
|
.bg-purple-light {
|
background: #f0f0f0;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
</style>
|
