<template>
|
<div>
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<el-form :model="formModel" ref="queryForm" labelWidth="90">
|
<el-row>
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
|
<el-form-item label="关键字">
|
<el-input v-model="formModel.searchKey" clearable=""
|
placeholder="库位编号,容器编号" />
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
|
<el-form-item label="所在库区" prop="areaCode">
|
<el-select v-model="formModel.areaCode" placeholder="请选择所在库区">
|
<el-option v-for="(item,index) in arr1" :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
|
<el-form-item label="库位编号:">
|
<el-input v-model.trim="formModel.WareLocationCode" placeholder="请输入库位编号" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
|
<el-form-item label="容器编号:">
|
<el-input v-model.trim="formModel.WareContainerCode" placeholder="请输入容器编号" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
|
<el-form-item label="库位状态:">
|
<el-select v-model="formModel.inventoryType" clearable placeholder="请选择库位状态" style="width: 100%;">
|
<el-option v-for="item in storageStatusEnum" :key="item.value" :label="item.title"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
|
<!-- 隐藏的筛选条件 -->
|
<!-- <template>
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
|
<el-form-item label="锁定状态:">
|
<el-select v-model="formModel.isLocked" clearable placeholder="请选择锁定状态">
|
<el-option v-for="item in isAutoEnum" :key="item.value" :label="item.title" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
|
|
<el-form-item label="巷道:">
|
<el-select v-model="formModel.Lane" clearable placeholder="请选择巷道">
|
<el-option v-for="item in LangEnum" :key="item.value" :label="item.title" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
|
<el-form-item label="所属排:">
|
<el-select v-model="formModel.Row" clearable placeholder="请选择所属排">
|
<el-option v-for="(item, index) in strorageRowEnum" :key="item" :label="`第${index + 1}排`"
|
:value="index + 1" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</template> -->
|
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
|
<el-form-item label-width="20px">
|
<el-button type="primary" icon="el-icon-search" @click="getLocationPage(2)">查询</el-button>
|
<el-button icon="ele-Refresh" @click="() => formModel = {}"> 重置 </el-button>
|
</el-form-item>
|
</el-col> -->
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
|
<el-form-item>
|
<el-button-group style="display: flex; align-items: center">
|
<el-button type="primary" icon="ele-Search" @click="getLocationPage(2)">
|
查询
|
</el-button>
|
<el-button icon="ele-Refresh" @click="() => formModel = {}">
|
重置
|
</el-button>
|
<el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUIWmsStockQuan"
|
v-if="!showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px">
|
高级查询
|
</el-button>
|
<el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUIWmsStockQuan"
|
v-if="showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px">
|
隐藏
|
</el-button>
|
|
</el-button-group>
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
</el-card>
|
|
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
<div class="msi-content" style="height:calc(100vh - 200px)">
|
|
<div>
|
<p>1#立体库</p>
|
<div class="storage-grid">
|
<!-- 遍历每一排 -->
|
<div class="row" :class="'rowMy' + rowIndex" v-for="(row, rowIndex) in storageList" :key="rowIndex">
|
<!-- 遍历每一块 -->
|
<div class="cell " v-for="(cell, cellIndex) in row" :key="cellIndex">
|
{{ cell }} <!-- 显示每个库位的内容 -->
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
<!-- 统计区域 -->
|
<count-view :countData="countList"></count-view>
|
<!-- 库位展示 -->
|
<content-view :contentData="dataList"></content-view>
|
</div>
|
</el-card>
|
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { nextTick, onMounted, ref } from 'vue'
|
//import SearchBar from '@/components/SearchBar.vue'
|
import { getStorageView } from '/@/api/main/ReportCenter/storageView';
|
|
import CountView from './component/CountView.vue'
|
import ContentView from './component/ContentView.vue'
|
import { ElMessage } from 'element-plus';
|
import { handleSlectDataWmsArea } from '/@/utils/selectData';
|
|
const showAdvanceQueryUIWmsStockQuan = ref(false);
|
// 改变高级查询的控件显示状态
|
const changeAdvanceQueryUIWmsStockQuan = () => {
|
showAdvanceQueryUIWmsStockQuan.value = !showAdvanceQueryUIWmsStockQuan.value;
|
};
|
|
|
const LangEnum = ref([ // 所属巷道
|
{
|
value: '1',
|
title: '1巷道'
|
},
|
{
|
value: '2',
|
title: '2巷道'
|
},
|
{
|
value: '3',
|
title: '3巷道'
|
}
|
])
|
const isAutoEnum: any[] = [
|
{
|
title: '否',
|
value: 0
|
},
|
{
|
title: '是',
|
value: 1
|
}
|
]
|
|
|
//库位状态
|
const storageStatusEnum = ref([
|
{
|
value: '0',
|
title: '空库位'
|
},
|
{
|
value: '1',
|
title: '空容器库位'
|
},
|
{
|
value: '2',
|
title: '有货库位'
|
},
|
])
|
|
const strorageRowEnum = ref<any>([]) // 所属排
|
//列表请求数据
|
const formModel = ref({
|
Lane: '',
|
Row: '',
|
MaterialCode: '',
|
inventoryType: '',
|
ShelfCode: '',
|
Code: '',
|
ContainerCode: '',
|
Status: '',
|
isLocked: '',
|
areaCode:"A2",
|
PageNo: 1,
|
PageSize: 10000
|
})
|
|
//库位列表数据
|
const dataList = ref([]);
|
//统计的数据
|
const countList = ref([
|
{
|
type: 0,
|
title: '空库位:',
|
count: 0
|
},
|
{
|
type: 1,
|
title: '有货库位（空容器）:',
|
count: 0
|
},
|
{
|
type: 2,
|
title: '有货库位（物料）:',
|
count: 0
|
},
|
// {
|
// type: 3,
|
// title: '锁定库位:',
|
// count: 0
|
// },
|
// {
|
// type: 4,
|
// title: '禁用库位:',
|
// count: 0
|
// }
|
]);
|
|
// 按照行列相同进行分组
|
const sortClass = (sortData: any) => {
|
const groupBy = (array: any, f: any) => {
|
let groups = {};
|
array.forEach((o) => {
|
let group = JSON.stringify(f(o));
|
groups[group] = groups[group] || [];
|
groups[group].push(o);
|
});
|
return Object.keys(groups).map((group) => {
|
return groups[group];
|
});
|
};
|
const sorted = groupBy(sortData, (item) => {
|
return item.lane + '-' + item.column; // 返回需要分组的对象
|
});
|
return sorted;
|
};
|
|
// 分组前
|
// console.log(listData);
|
// 分组后
|
// console.log(sortClass(listData));
|
|
//库位图列表
|
const getLocationPage = async (param?: any) => {
|
if (param && param == 2) {
|
if (formModel.value.Lane == "" && formModel.value.Row != "") {
|
ElMessage.warning("请选择所属巷道！")
|
return
|
}
|
}
|
|
if(!formModel.value.areaCode){
|
ElMessage.warning("请选择所在库区！")
|
return
|
}
|
|
var res = await getStorageView(Object.assign(formModel.value, {}));
|
if (res.data.code == 200) {
|
const { data } = res;
|
const result = data.result;
|
strorageRowEnum.value = new Array(4).fill(0);
|
countList.value[0].count = result.emptyLocation || 0; //空库位
|
countList.value[1].count = result.emptyContainerLocation || 0; //空容器库位
|
countList.value[2].count = result.materialLocation || 0; //有货库位
|
// countList.value[3].count = result.lockedLocation || 0; //锁定库位
|
// countList.value[4].count = result.disableLocation || 0; //禁用库位
|
debugger
|
if (res.data.result.lanes) {
|
res.data.result.lanes.forEach((element: any) => {
|
element.rows.forEach((item: any) => {
|
item.rowLocations2 = sortClass(item.rowLocations)
|
})
|
});
|
}
|
dataList.value = res.data.result.lanes;
|
|
}
|
|
}
|
getLocationPage()
|
|
const resetFormModel = JSON.parse(JSON.stringify(formModel.value));
|
//重置搜索
|
const resetForm = () => {
|
formModel.value = JSON.parse(JSON.stringify(resetFormModel));
|
// getLocationPage()
|
};
|
|
let arr1:any =ref("") //下拉读取接口
|
// 页面加载时
|
onMounted(async () => {
|
nextTick(async () => {
|
arr1.value = await handleSlectDataWmsArea({
|
page: 1,
|
pageSize: 1000,
|
total: 0,
|
IsDisabled:false,
|
isVirtually:false,
|
areaType:1 //立体库
|
}); //下拉读取接口
|
});
|
});
|
|
|
|
|
|
|
|
//==================88888888888888======================
|
|
const storageList = ref([]); // 用于存放库位的数组
|
|
onMounted(() => {
|
initializeStorage(); // 在组件挂载后初始化库位数据
|
});
|
|
function initializeStorage() {
|
const rows = 3; // 总排数
|
const cellsPerRow = 20; // 每排的格子数
|
|
for (let i = 0; i < rows; i++) {
|
let row = []; // 每排的格子数组
|
for (let j = 1; j <= cellsPerRow; j++) {
|
// 根据行数和列数生成库位名称
|
row.push(` ${(i * cellsPerRow) + j}`);
|
}
|
storageList.value.push(row); // 将每排的库位数组推入总数组
|
}
|
}
|
|
|
|
</script>
|
<style lang="less" scoped>
|
.msi-content {
|
overflow: auto;
|
}
|
|
|
|
|
.storage-grid {
|
width: 48%;
|
display: flex;
|
flex-direction: column; /* 垂直排列每一排 */
|
}
|
|
.row {
|
display: flex; /* 水平排列每一行 */
|
}
|
|
.cell {
|
border: 1px solid black; /* 每个格子的黑线 */
|
flex: 1; /* 每个格子宽度相等 */
|
height: 50px; /* 每个格子的高度 */
|
display: flex;
|
justify-content: center;
|
align-items: center; /* 居中显示内容 */
|
}
|
|
|
.rowMy0 {
|
// background-color: #f9f9f9; /* 第一排的背景色 */
|
div{
|
height: 120px;
|
}
|
}
|
|
.rowMy1 {
|
// background-color: #eeeeee; /* 第二排的背景色 */
|
div{
|
height: 50px;
|
}
|
}
|
|
.rowMy2 {
|
// background-color: #dddddd; /* 第三排的背景色 */
|
div{
|
height: 80px;
|
}
|
}
|
</style>
|
