From f3a78b9ef7ec02b255dc52bf2b85f52c1cefa777 Mon Sep 17 00:00:00 2001 From: schangxiang@126.com <schangxiang@126.com> Date: 周六, 14 12月 2024 16:36:08 +0800 Subject: [PATCH] 222 --- LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue | 314 +++++++++++++++++----------------------------------- 1 files changed, 103 insertions(+), 211 deletions(-) diff --git a/LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue b/LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue index 4652b77..b497832 100644 --- a/LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue +++ b/LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue @@ -1,6 +1,6 @@ <template> <div> - <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> + <!-- <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"> @@ -36,39 +36,6 @@ </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-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"> @@ -81,145 +48,101 @@ </el-col> </el-row> </el-form> - </el-card> + </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> + <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) }" - > - {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }} + <!-- <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), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }"> - {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }} + <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"> - <span class="textK" :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }"> - {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }} + <!-- <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> - <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> </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 { 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; }; -//璁剧疆鑳屾櫙 姝e父 = 1, 灏佸瓨 = 2, 绂佸嚭 = 3, 绂佸叆 = 4, 閿佸畾 = 5 -const setBgColor = (type: number): string => { + + +// public enum StockStatusEnum +// { +// [Description("鍦ㄥ簱")] +// 鍦ㄥ簱 = 1, +// [Description("宸插喕缁�")] +// 宸插喕缁� = 2, + +// [Description("榻愬寘寰呭嚭搴�")] +// 榻愬寘寰呭嚭搴� = 3, + +// [Description("浜哄伐寮哄埗寰呭嚭搴�")] +// 浜哄伐寮哄埗寰呭嚭搴� = 4 +// } + + +const setBgColor = (type: number,upi:string): string => { let color = ''; + //debugger + if(upi!=null){ + color = '#2BA6FF'; //钃濊壊 鍦ㄥ簱 + return color; + } switch (type) { - case 1: - color = '#F18201'; //姗樿壊 姝e父 - break; - case 2: - color = '#2BA6FF'; //钃濊壊 灏佸瓨 - break; - case 3: - color = '#FFFF00'; //榛勮壊 绂佸嚭 - break; - - case 4: - color = '#A2A2A2'; //鐏拌壊 绂佸叆 - break; - case 5: - color = '#FF0000'; //绾㈣壊 閿佸畾 - break; + color = '#FF0000'; //绾㈣壊 宸插喕缁� + break; + default: + color = '#F6C285'; //姗樿壊 姝e父 + 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: '', @@ -239,27 +162,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: '绂佺敤搴撲綅:', @@ -267,49 +190,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.placeStatus == 5).length || 0, + }, + ]; // 鍋囪 result 鏄竴涓寘鍚涓璞$殑鏁扮粍锛屾瘡涓璞¢兘鏈� LaneNo 鍜� ColumnNo 灞炴�� const groupedResult = []; @@ -360,31 +271,6 @@ } dataList.value = groupedResult; // 濡傛灉瑕佸皢缁撴灉璧嬪�肩粰 dataList - - // const finalResult = []; - - // 鏈�缁堢粨鏋� - - // ColumnNo 60 - // result 鎸夌収LaneNo鍒嗙粍 - // 鍐嶆寜鐓olumnNo 鍒嗙粍 绗竴缁� 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(); @@ -421,9 +307,12 @@ storageList.value.push(row); // 灏嗘瘡鎺掔殑搴撲綅鏁扮粍鎺ㄥ叆鎬绘暟缁� } } -console.log(66666666); -console.log(storageList.value); +const dialogVisible = ref(false); // 寮规鍙鎬� + +const handleClick = (row: any) => { + proxy.$refs['propDetailRef'].openDialog(row); +}; </script> <style lang="less" scoped> .msi-content { @@ -433,8 +322,8 @@ .storage-grid { display: flex; flex-direction: column; /* 鍨傜洿鎺掑垪姣忎竴鎺� */ - width: 610px; - // border: 1px solid red; + width: 100%; + // border: 1px solid red; } .row { @@ -442,32 +331,32 @@ } .cell { - border: 1px solid gray; /* 姣忎釜鏍煎瓙鐨勯粦绾� */ + border: 1px solid #c1c1c1; /* 姣忎釜鏍煎瓙鐨勯粦绾� */ height: 50px; /* 姣忎釜鏍煎瓙鐨勯珮搴� */ display: inline-block; justify-content: center; align-items: center; /* 灞呬腑鏄剧ず鍐呭 */ - width: 30px; + 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; } } @@ -479,14 +368,17 @@ } .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; + width: 100%; + height: 100%; + color: white; + cursor: pointer; } </style> -- Gitblit v1.9.3