<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>
|
|
<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 class="box100">
|
<div v-for="(item, index) in dataList" :key="index" class="box100Inner">
|
<p class="t1">{{ item.laneNo }}#立体库</p>
|
<div class="storage-grid">
|
<div class="row rowMy0">
|
<div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex < 20">
|
<span class="textK" :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }" @click="handleClick(cell)">
|
<!-- {{ cell.laneNo }} -->
|
<!-- PlaceCode: -->
|
{{ cell.placeCode }}
|
<!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
|
</span>
|
</div>
|
</div>
|
<div class="row rowMy1">
|
<div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex >= 20 && cellIndex < 40">
|
<span class="textK" :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }" @click="handleClick(cell)">
|
<!-- {{ cell.laneNo }} -->
|
{{ cell.placeCode }}
|
<!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
|
</span>
|
</div>
|
</div>
|
<div class="row rowMy2">
|
<div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex >= 40 && cellIndex <= 60">
|
<span class="textK" :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }" @click="handleClick(cell)">
|
<!-- {{ cell.laneNo }} -->
|
{{ cell.placeCode }}
|
<!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- <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>
|
|
<!-- 详情弹框 -->
|
<prop-detail ref="propDetailRef"></prop-detail>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { getCurrentInstance, 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';
|
import PropDetail from './component/propDetail.vue';
|
const { proxy} :any = getCurrentInstance();// 访问实例上下文 proxy同时支持开发 线上环境
|
|
const showAdvanceQueryUIWmsStockQuan = ref(false);
|
// 改变高级查询的控件显示状态
|
const changeAdvanceQueryUIWmsStockQuan = () => {
|
showAdvanceQueryUIWmsStockQuan.value = !showAdvanceQueryUIWmsStockQuan.value;
|
};
|
//设置背景 正常 = 1, 封存 = 2, 禁出 = 3, 禁入 = 4, 锁定 = 5
|
const setBgColor = (type: number): string => {
|
let color = '';
|
switch (type) {
|
case 1:
|
color = '#F6C285'; //橘色 正常#F18201
|
break;
|
case 2:
|
color = '#2BA6FF'; //蓝色 封存
|
break;
|
case 3:
|
color = '#FFFF00'; //黄色 禁出
|
break;
|
|
case 4:
|
color = '#A2A2A2'; //灰色 禁入
|
break;
|
|
case 5:
|
color = '#FF0000'; //红色 锁定
|
break;
|
}
|
return color;
|
};
|
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;
|
|
// 假设 result 是一个包含多个对象的数组，每个对象都有 LaneNo 和 ColumnNo 属性
|
const groupedResult = [];
|
|
// 按 LaneNo 分组 输出结构
|
// {
|
// 'laneNo':1,
|
// 'data': [{ }, {}, {}]
|
// }
|
|
// 假设结果数据存储在 result 数组中
|
|
// 按 laneNo 分组
|
result.forEach((item) => {
|
const laneNo = item.laneNo;
|
|
// 查找是否已经有该 laneNo 的对象
|
let laneGroup = groupedResult.find((group) => group.laneNo == laneNo);
|
|
// 如果没有，创建一个新的分组
|
if (!laneGroup) {
|
laneGroup = { laneNo: laneNo, data: [] };
|
groupedResult.push(laneGroup);
|
}
|
|
// 将当前项添加到对应的分组的 data 数组中
|
laneGroup.data.push(item);
|
});
|
|
// 最终输出结构
|
console.log(8888888);
|
console.log(groupedResult);
|
|
// groupedResult 分组按 data中的columnNo 再组 将每组20 个元素
|
|
function initializeStorage3() {
|
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); // 将每排的库位数组推入总数组
|
}
|
}
|
|
dataList.value = groupedResult; // 如果要将结果赋值给 dataList
|
|
// const finalResult = [];
|
|
// 最终结果
|
|
// ColumnNo 60
|
// result 按照LaneNo分组
|
// 再按照ColumnNo 分组 第一组 20个 第二组 20个 第三组 20个
|
|
// dataList.value = 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; //禁用库位
|
// 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;
|
}
|
};
|
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 () => {});
|
|
//==================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); // 将每排的库位数组推入总数组
|
}
|
}
|
console.log(66666666);
|
|
console.log(storageList.value);
|
|
const dialogVisible = ref(false); // 弹框可见性
|
|
const handleClick = (row: any) => {
|
proxy.$refs['propDetailRef'].openDialog(row);
|
};
|
|
const openDialog = () => {
|
dialogVisible.value = true; // 打开弹框
|
};
|
|
const handleClose = () => {
|
dialogVisible.value = false; // 关闭弹框
|
};
|
</script>
|
<style lang="less" scoped>
|
.msi-content {
|
overflow: auto;
|
}
|
|
.storage-grid {
|
display: flex;
|
flex-direction: column; /* 垂直排列每一排 */
|
width: 510px;
|
// border: 1px solid red;
|
}
|
|
.row {
|
display: block; /* 水平排列每一行 */
|
}
|
|
.cell {
|
border: 1px solid #c1c1c1; /* 每个格子的黑线 */
|
height: 50px; /* 每个格子的高度 */
|
display: inline-block;
|
justify-content: center;
|
align-items: center; /* 居中显示内容 */
|
width: 49px;
|
}
|
|
.rowMy0 {
|
// background-color: #f9f9f9; /* 第一排的背景色 */
|
div {
|
height: 120px;
|
}
|
}
|
|
.rowMy1 {
|
// background-color: #eeeeee; /* 第二排的背景色 */
|
div {
|
height: 50px;
|
}
|
}
|
|
.rowMy2 {
|
// background-color: #dddddd; /* 第三排的背景色 */
|
div {
|
height: 80px;
|
}
|
}
|
|
.box100 {
|
.box100Inner {
|
display: inline-block;
|
// width: 50%;
|
}
|
}
|
.t1 {
|
margin: 10px 0 2px 0;
|
font-size: 16px !important;
|
padding-bottom: 10px;
|
}
|
.textK {
|
display: flex; /* 使用 Flexbox 布局 */
|
flex-direction: column;
|
font-size: 12px;
|
text-align: center;
|
width: 100%;
|
height: 100%;
|
color: white;
|
}
|
</style>
|
