From 570046df69aeffbffb3efe8ddecaf523ca492a46 Mon Sep 17 00:00:00 2001
From: zongzhibin <zongzhibin@weben-smart.com>
Date: 周二, 26 11月 2024 09:15:39 +0800
Subject: [PATCH] Merge branch 'master' of http://222.71.245.114:9086/r/LA24030-LuLI_PackageLine
---
LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue | 605 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 393 insertions(+), 212 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 154e743..4652b77 100644
--- a/LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue
+++ b/LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue
@@ -1,45 +1,43 @@
<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.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>
+
+ <!-- 闅愯棌鐨勭瓫閫夋潯浠� -->
+ <!-- <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="璇烽�夋嫨閿佸畾鐘舵��">
@@ -64,176 +62,228 @@
</el-form-item>
</el-col>
</template> -->
- <!-- <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-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-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-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-row>
+ :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-form>
- </el-card>
+ <!-- <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-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 = '#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 +293,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鍒嗙粍
+ // 鍐嶆寜鐓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();
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>
\ No newline at end of file
+
+.storage-grid {
+ display: flex;
+ flex-direction: column; /* 鍨傜洿鎺掑垪姣忎竴鎺� */
+ width: 610px;
+ // border: 1px solid red;
+}
+
+.row {
+ display: block; /* 姘村钩鎺掑垪姣忎竴琛� */
+}
+
+.cell {
+ border: 1px solid gray; /* 姣忎釜鏍煎瓙鐨勯粦绾� */
+ height: 50px; /* 姣忎釜鏍煎瓙鐨勯珮搴� */
+ display: inline-block;
+ justify-content: center;
+ align-items: center; /* 灞呬腑鏄剧ず鍐呭 */
+ width: 30px;
+}
+
+.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;
+}
+.textK {
+ display: flex; /* 浣跨敤 Flexbox 甯冨眬 */
+ flex-direction: column;
+ font-size: 12px;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ color: white;
+}
+</style>
--
Gitblit v1.9.3