222

schangxiang@126.com

2024-12-14 f3a78b9ef7ec02b255dc52bf2b85f52c1cefa777

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue

@@ -1,311 +1,384 @@
<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>
   <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-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-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>
               <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="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>

            <!-- 隐藏的筛选条件 -->
            <!-- <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-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-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)">
            <!-- 统计区域 -->
            <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"> -->
                           <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,cell.upi), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus,cell.upi) }" @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.placeStatus,cell.upi), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus,cell.upi) }" @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"> -->
                           <div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex < 20">
                           <span class="textK" :style="{ background: setBgColor(cell.placeStatus,cell.upi), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus,cell.upi) }" @click="handleClick(cell)">
                              <!-- {{ cell.laneNo }} -->
                              {{ cell.placeCode }} 
                              <!-- {{ cell.layerNo }}{{ cell.columnNo }} -->
                           </span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </el-card>

            <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>
      <!-- 库位展示 -->
      <content-view :contentData="dataList"></content-view>
    </div>
</el-card>
   
  </div>
      <!-- 详情弹框 -->
      <prop-detail ref="propDetailRef"></prop-detail>
   </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
//import SearchBar from '@/components/SearchBar.vue'
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 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;
   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
  }
]
// public enum StockStatusEnum
// {
//     [Description("在库")]
//     在库 = 1,
//     [Description("已冻结")]
//     已冻结 = 2,

//     [Description("齐包待出库")]
//     齐包待出库 = 3,

//     [Description("人工强制待出库")]
//     人工强制待出库 = 4
// }


//库位状态
const storageStatusEnum = ref([
  {
    value: '0',
    title: '空库位'
  },
  {
    value: '1',
    title: '空容器库位'
  },
  {
    value: '2',
    title: '有货库位'
  },
])
const setBgColor = (type: number,upi:string): string => {
   let color = '';
   //debugger
   if(upi!=null){
      color = '#2BA6FF'; //蓝色  在库
      return color;
   }
   switch (type) {
      case 5:
      color = '#FF0000'; //红色  已冻结
      break;
        default:
      color = '#F6C285'; //橘色  正常
      break;
   }
   return color;
};

const strorageRowEnum = ref<any>([]) // 所属排
//列表请求数据
const formModel = ref({
  Lane: '',
  Row: '',
  MaterialCode: '',
  inventoryType: '',
  ShelfCode: '',
  Code: '',
  ContainerCode: '',
  Status: '',
  isLocked: '',
  areaCode:"A2",
  PageNo: 1,
  PageSize: 10000
})
   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
  // }
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 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
    }
  }
   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.placeStatus == 5).length || 0,
         },
      ];

  if(!formModel.value.areaCode){
    ElMessage.warning("请选择所在库区！")
    return
  }
      // 假设 result 是一个包含多个对象的数组，每个对象都有 LaneNo 和 ColumnNo 属性
      const groupedResult = [];

  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;
      // 按 LaneNo 分组  输出结构
      // {
      //   'laneNo':1,
      //   'data': [{ }, {}, {}]
      // }

  }
      // 假设结果数据存储在 result 数组中

}
getLocationPage()
      // 按 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()
   formModel.value = JSON.parse(JSON.stringify(resetFormModel));
   // getLocationPage()
};

let arr1:any =ref("") //下拉读取接口
let arr1: any = ref(''); //下拉读取接口
// 页面加载时
onMounted(async () => {
  nextTick(async () => {
    arr1.value = await handleSlectDataWmsArea({
      page: 1,
         pageSize: 1000,
         total: 0,
         IsDisabled:false,
      isVirtually:false,
      areaType:1 //立体库
    }); //下拉读取接口
  });
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;
   overflow: auto;
}
</style>

.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>