Merge branch 'master' of http://222.71.245.114:9086/r/LA24030-LuLI_PackageLine

zongzhibin

2024-11-27 5e610f4c9d9870b393720bc5fcc856e97bc2ea4b

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

@@ -1,239 +1,259 @@
<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)">
            <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" 

            <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>
                  :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }"
                  >
                              <!-- {{ cell.laneNo }} -->
                              {{ 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) }">
                              <!-- {{ cell.laneNo }} -->
                              {{ 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) }">
                              <!-- {{ cell.laneNo }} -->
                              {{ cell.layerNo }}{{ cell.columnNo }}
                           </span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

          </el-row>
            <!-- <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> -->

        </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>
            <!-- 统计区域 -->
       <!-- <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 { 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 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;
   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;

const LangEnum = ref([  // 所属巷道
  {
    value: '1',
    title: '1巷道'
  },
  {
    value: '2',
    title: '2巷道'
  },
  {
    value: '3',
    title: '3巷道'
  }
])
      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
  }
]

   {
      title: '否',
      value: 0,
   },
   {
      title: '是',
      value: 1,
   },
];

//库位状态
const storageStatusEnum = ref([
  {
    value: '0',
    title: '空库位'
  },
  {
    value: '1',
    title: '空容器库位'
  },
  {
    value: '2',
    title: '有货库位'
  },
])
   {
      value: '0',
      title: '空库位',
   },
   {
      value: '1',
      title: '空容器库位',
   },
   {
      value: '2',
      title: '有货库位',
   },
]);

const strorageRowEnum = ref<any>([]) // 所属排
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
  // }
   {
      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;
   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;
};

// 分组前
@@ -243,69 +263,200 @@

//库位图列表
const getLocationPage = async (param?: any) => {
  if (param && param == 2) {
    if (formModel.value.Lane == "" && formModel.value.Row != "") {
      ElMessage.warning("请选择所属巷道！")
      return
    }
  }
   // if (param && param == 2) {
   //   if (formModel.value.Lane == "" && formModel.value.Row != "") {
   //     ElMessage.warning("请选择所属巷道！")
   //     return
   //   }
   // }

  if(!formModel.value.areaCode){
    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;

  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;
      // 假设 result 是一个包含多个对象的数组，每个对象都有 LaneNo 和 ColumnNo 属性
      const groupedResult = [];

  }
      // 按 LaneNo 分组  输出结构
      // {
      //   'laneNo':1,
      //   'data': [{ }, {}, {}]
      // }

}
getLocationPage()
      // 假设结果数据存储在 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()
   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); // 将每排的库位数组推入总数组
   }
}
console.log(66666666);

console.log(storageList.value);
</script>
<style lang="less" scoped>
.msi-content {
  overflow: auto;
   overflow: auto;
}
</style>

.storage-grid {
   display: flex;
   flex-direction: column; /* 垂直排列每一排 */
   width: 510px;
   // border: 1px solid red;
}

.row {
   display: block; /* 水平排列每一行 */
}

.cell {
   border: 1px solid gray; /* 每个格子的黑线 */
   height: 50px; /* 每个格子的高度 */
   display: inline-block;
   justify-content: center;
   align-items: center; /* 居中显示内容 */
   width: 25px;
}

.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;
}
.textK {
   display: flex; /* 使用 Flexbox 布局 */
   flex-direction: column;
   font-size: 12px;
   text-align: center;
  width: 100%;
  height: 100%; 
  color: white;
}
</style>