库位视图

liuying

2024-12-08 0e0ff265a99bae19dbf6194483704cfdb7223375

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

@@ -52,32 +52,29 @@

      <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.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }" @click="handleClick(cell)">
                              <!-- {{ cell.laneNo }} -->
                              <!-- PlaceCode: -->
                           <span class="textK" :style="{ background: setBgColor(cell.stockStatus), boxShadow: '0 1px 1px' + setBgColor(cell.stockStatus) }" @click="handleClick(cell)">
                              {{ 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 }} -->
                           <span class="textK" :style="{ background: setBgColor(cell.stockStatus), boxShadow: '0 1px 1px' + setBgColor(cell.stockStatus) }" @click="handleClick(cell)">
                              {{ 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)">
                           <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 }} -->
@@ -87,115 +84,86 @@
                  </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>
      <!-- 详情弹框 -->
      <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 { proxy }: any = getCurrentInstance(); // 访问实例上下文 proxy同时支持开发 线上环境

const showAdvanceQueryUIWmsStockQuan = ref(false);
// 改变高级查询的控件显示状态
const changeAdvanceQueryUIWmsStockQuan = () => {
   showAdvanceQueryUIWmsStockQuan.value = !showAdvanceQueryUIWmsStockQuan.value;
};
//设置背景    正常 = 1,  封存 = 2,   禁出 = 3,    禁入 = 4,    锁定 = 5


// public enum StockStatusEnum
// {
//     [Description("在库")]
//     在库 = 1,
//     [Description("已冻结")]
//     已冻结 = 2,

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

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


const setBgColor = (type: number): string => {
   let color = '';
   switch (type) {

      case 1:
         color = '#F6C285'; //橘色  正常#F18201
         break;
      color = '#2BA6FF'; //蓝色  在库
      break;

      case 2:
         color = '#2BA6FF'; //蓝色 封存
         break;
      case 3:
         color = '#FFFF00'; //黄色 禁出
         break;
      color = '#FF0000'; //红色  已冻结
      break;
default:
      color = '#F6C285'; //橘色  正常
      break;
      // case 3:
      // color = '#FFFF00'; //黄色 禁出
      // break;

      case 4:
         color = '#A2A2A2'; //灰色 禁入
         break;

      case 5:
         color = '#FF0000'; //红色  锁定
         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 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: '',
@@ -215,27 +183,27 @@
//库位列表数据
const dataList = ref([]);
//统计的数据
const countList = ref([
let countList = ref([
   {
      type: 0,
      title: '空库位:',
      title: '总库位:',
      count: 0,
   },
   {
      type: 1,
      title: '有货库位（空容器）:',
      title: '有货库位:',
      count: 0,
   },
   {
      type: 2,
      title: '有货库位（物料）:',
      title: '无货库位:',
      count: 0,
   },
   // {
   //   type: 3,
   //   title: '锁定库位:',
   //   count: 0
   // },
   {
      type: 3,
      title: '锁定库位:',
      count: 0,
   },
   // {
   //   type: 4,
   //   title: '禁用库位:',
@@ -243,49 +211,37 @@
   // }
]);

// 按照行列相同进行分组
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;
      // 统计
      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 = [];
@@ -336,31 +292,6 @@
      }

      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();
@@ -397,22 +328,11 @@
      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>
@@ -423,8 +343,8 @@
.storage-grid {
   display: flex;
   flex-direction: column; /* 垂直排列每一排 */
   width: 510px;
   // border: 1px solid red;
   width: 100%;
   //  border: 1px solid red;
}

.row {
@@ -437,27 +357,27 @@
   display: inline-block;
   justify-content: center;
   align-items: center; /* 居中显示内容 */
   width: 49px;
   width: 50px;
}

.rowMy0 {
   // background-color: #f9f9f9; /* 第一排的背景色 */
   div {
      height: 120px;
      height: 80px;
   }
}

.rowMy1 {
   // background-color: #eeeeee; /* 第二排的背景色 */
   div {
      height: 50px;
      height: 30px;
   }
}

.rowMy2 {
   // background-color: #dddddd; /* 第三排的背景色 */
   div {
      height: 80px;
      height: 50px;
   }
}

@@ -480,5 +400,6 @@
   width: 100%;
   height: 100%;
   color: white;
   cursor: pointer;
}
</style>