库位视图

liuying

2024-12-08 0e0ff265a99bae19dbf6194483704cfdb7223375

库位视图

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/component/CountView.vue

@@ -16,28 +16,41 @@
    },
});
const countList: Record<any, any> = computed(() => props.countData);
//设置背景    正常 = 1,  封存 = 2,   禁出 = 3,    禁入 = 4,    锁定 = 5
const setBgColor = (type: number): string => {
    let color = '';
    switch (type) {
        case 1:
            color = '#F18201'; //橘色  正常
            break;
        case 2:
            color = '#2BA6FF'; //蓝色 封存
            break;
        case 3:
            color = '#FFFF00'; //黄色 禁出
            break;
    if (type) {
        switch (type) {
            case 1:
                color = '#2BA6FF'; //蓝色  在库
                break;

        case 4:
            color = '#A2A2A2'; //灰色 禁入
            break;
            case 2:
                color = '#FF0000'; //红色  已冻结
                break;
            default:
                color = '#F6C285'; //橘色  正常
                break;

        case 5:
            color = '#FF0000'; //红色  锁定
            break;
            // case 1:
            //     color = '#F18201'; //橘色  正常
            //     break;
            // case 2:
            //     color = '#2BA6FF'; //蓝色 封存
            //     break;
            // case 3:
            //     color = '#FFFF00'; //黄色 禁出
            //     break;

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

            // case 5:
            //     color = '#FF0000'; //红色  锁定
            //     break;
        }
    }

    return color;
};
</script>

 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>