<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)">
|
<!-- 统计区域 -->
|
<count-view :countData="countList"></count-view>
|
<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.stockStatus), boxShadow: '0 1px 1px' + setBgColor(cell.stockStatus) }" @click="handleClick(cell)">
|
{{ cell.placeCode }}
|
</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.stockStatus), boxShadow: '0 1px 1px' + setBgColor(cell.stockStatus) }" @click="handleClick(cell)">
|
{{ cell.placeCode }}
|
</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.stockStatus), boxShadow: '0 1px 1px' + setBgColor(cell.stockStatus) }" @click="handleClick(cell)">
|
<!-- {{ cell.laneNo }} -->
|
{{ cell.placeCode }}
|
<!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
<!-- 详情弹框 -->
|
<prop-detail ref="propDetailRef"></prop-detail>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { getCurrentInstance, nextTick, onMounted, ref } from '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;
|
};
|
|
|
// public enum StockStatusEnum
|
// {
|
// [Description("在库")]
|
// 在库 = 1,
|
// [Description("已冻结")]
|
// 已冻结 = 2,
|
|
// [Description("齐包待出库")]
|
// 齐包待出库 = 3,
|
|
// [Description("人工强制待出库")]
|
// 人工强制待出库 = 4
|
// }
|
|
|
const setBgColor = (type: number): string => {
|
let color = '';
|
switch (type) {
|
|
case 1:
|
color = '#2BA6FF'; //蓝色 在库
|
break;
|
|
case 2:
|
color = '#FF0000'; //红色 已冻结
|
break;
|
default:
|
color = '#F6C285'; //橘色 正常
|
break;
|
// case 3:
|
// color = '#FFFF00'; //黄色 禁出
|
// break;
|
|
|
// case 1:
|
// color = '#F6C285'; //橘色 正常#F18201
|
// break;
|
// case 2:
|
// color = '#FF0000'; //红色 锁定
|
// break;
|
// // case 2:
|
// // color = '#2BA6FF'; //蓝色 封存
|
// break;
|
// case 3:
|
// color = '#FFFF00'; //黄色 禁出
|
// break;
|
|
// // case 4:
|
// // color = '#A2A2A2'; //灰色 禁入
|
// // break;
|
|
|
}
|
return color;
|
};
|
|
//列表请求数据
|
const formModel = ref({
|
Lane: '',
|
Row: '',
|
MaterialCode: '',
|
inventoryType: '',
|
ShelfCode: '',
|
Code: '',
|
ContainerCode: '',
|
Status: '',
|
isLocked: '',
|
areaCode: 'A2',
|
PageNo: 1,
|
PageSize: 10000,
|
});
|
|
//库位列表数据
|
const dataList = ref([]);
|
//统计的数据
|
let 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 getLocationPage = async (param?: any) => {
|
var res = await getStorageView(Object.assign(formModel.value, {}));
|
if (res.data.code == 200) {
|
const { data } = res;
|
const result = data.result;
|
// 统计
|
var hasMaterialCount = result.filter((item: any) => item.stockStatus == 1).length || 0;
|
var noMaterialCount = result.length - hasMaterialCount;
|
countList.value = [
|
{
|
type: '',
|
title: '总库位:',
|
count: result.length || 0,
|
},
|
{
|
type: 1,
|
title: '有货库位:',
|
count: hasMaterialCount || 0,
|
},
|
{
|
type: 18,
|
title: '无货库位:',
|
count: noMaterialCount || 0,
|
},
|
{
|
type: 2,
|
title: '锁定库位:',
|
count: result.filter((item: any) => item.stockStatus == 2).length || 0,
|
},
|
];
|
|
// 假设 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
|
}
|
};
|
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); // 将每排的库位数组推入总数组
|
}
|
}
|
|
const dialogVisible = ref(false); // 弹框可见性
|
|
const handleClick = (row: any) => {
|
proxy.$refs['propDetailRef'].openDialog(row);
|
};
|
</script>
|
<style lang="less" scoped>
|
.msi-content {
|
overflow: auto;
|
}
|
|
.storage-grid {
|
display: flex;
|
flex-direction: column; /* 垂直排列每一排 */
|
width: 100%;
|
// border: 1px solid red;
|
}
|
|
.row {
|
display: block; /* 水平排列每一行 */
|
}
|
|
.cell {
|
border: 1px solid #c1c1c1; /* 每个格子的黑线 */
|
height: 50px; /* 每个格子的高度 */
|
display: inline-block;
|
justify-content: center;
|
align-items: center; /* 居中显示内容 */
|
width: 50px;
|
}
|
|
.rowMy0 {
|
// background-color: #f9f9f9; /* 第一排的背景色 */
|
div {
|
height: 80px;
|
}
|
}
|
|
.rowMy1 {
|
// background-color: #eeeeee; /* 第二排的背景色 */
|
div {
|
height: 30px;
|
}
|
}
|
|
.rowMy2 {
|
// background-color: #dddddd; /* 第三排的背景色 */
|
div {
|
height: 50px;
|
}
|
}
|
|
.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;
|
cursor: pointer;
|
}
|
</style>
|
