From bde09c027eee16a7b05b82e71dea4d3405d6d52d Mon Sep 17 00:00:00 2001
From: Admin <Admin@ADMIN>
Date: 星期四, 22 一月 2026 17:05:09 +0800
Subject: [PATCH] 前端页面优化，日志记录，日志展示
---
项目代码/WMS/WIDESEA_WMSClient/src/views/stock/stockView.vue | 1276 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 890 insertions(+), 386 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/stock/stockView.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/stock/stockView.vue"
index fc8b569..b8a864d 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/stock/stockView.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/stock/stockView.vue"
@@ -1,392 +1,896 @@
-
<template>
- <view-grid
- ref="grid"
- :columns="columns"
- :detail="detail"
- :editFormFields="editFormFields"
- :editFormOptions="editFormOptions"
- :searchFormFields="searchFormFields"
- :searchFormOptions="searchFormOptions"
- :table="table"
- :extend="extend"
- >
- </view-grid>
+ <div class="container">
+ <div class="content-wrapper">
+ <!-- 鎺у埗闈㈡澘鍖哄煙 -->
+ <div class="control-panel">
+ <div class="panel-header">
+ <h3>鎺у埗闈㈡澘</h3>
+ </div>
+
+ <div class="panel-body">
+ <div class="form-group">
+ <label class="form-label">浠撳簱锛�</label>
+ <el-select size="mini" filterable v-model="selectedWarehouse" placeholder="璇烽�夋嫨浠撳簱" class="full-width"
+ @change="handleWarehouseChange">
+ <el-option v-for="item in warehouseList" :key="item.warehouseId" :value="item.warehouseId"
+ :label="getWarehouseName(item.warehouseId)">
+ </el-option>
+ </el-select>
+ </div>
+
+ <div class="form-group">
+ <label class="form-label">宸烽亾锛�</label>
+ <el-select size="mini" clearable filterable v-model="selectedRoadwayNo" placeholder="璇烽�夋嫨宸烽亾" class="full-width"
+ @change="handleRoadwayNoChange">
+ <el-option v-for="item in roadwayNoList" :key="item" :value="item" :label="'宸烽亾 ' + item"></el-option>
+ </el-select>
+ </div>
+
+ <el-button type="success" class="refresh-btn" @click="fetchLocationStatus" :loading="loading">
+ 鍒锋柊
+ </el-button>
+
+ <div class="legend-section">
+ <div class="legend-header">
+ <h4>鍥句緥璇存槑</h4>
+ </div>
+ <div class="legend-list">
+ <div class="legend-item" v-for="(item, index) in infoMsg" :key="index">
+ <span class="color-box" :style="{ 'background-color': item.bgcolor }"></span>
+ <span class="legend-label">{{ item.msg }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 璐т綅灞曠ず鍖哄煙 -->
+ <div class="main-content">
+ <div v-if="loading" class="loading-container">
+ <el-skeleton :rows="6" animated />
+ </div>
+
+ <div v-else-if="locationData.length > 0" class="location-container">
+ <div class="location-header">
+ <div class="location-info">
+ <span>褰撳墠鏌ョ湅锛歿{ getWarehouseName(selectedWarehouse) }} - 宸烽亾 {{ selectedRoadwayNo }}</span>
+ <span class="total-count">鍏� {{ totalLocations }} 涓揣浣�</span>
+ </div>
+ </div>
+
+ <div class="layers-container">
+ <div class="layer-row" v-for="layer in sortedLayerData" :key="layer.layer">
+ <div class="layer-title-area">
+ <h3 class="layer-title">灞� {{ layer.layer }}</h3>
+ <span class="layer-count">{{ getLayerLocations(layer) }} 涓揣浣�</span>
+ </div>
+
+ <div class="layer-content-wrap">
+ <div class="layer-content">
+ <div class="location-column" v-for="column in sortedColumns(layer.columns)" :key="column.column">
+ <div class="column-label">鍒� {{ column.column }}</div>
+ <div class="locations-wrapper">
+ <div class="location-item" v-for="depth in sortedDepthsByRow(column.depths)" :key="depth.depth"
+ :class="getLocationStatusClass(depth)"
+ @mouseenter="showTooltip(depth, column.column, layer.layer, $event)" @mouseleave="hideTooltip"
+ @click="handleLocationClick(depth)">
+ <div class="location-code">
+ {{ depth.row || '?' }}鎺�-{{ column.column }}鍒�-{{ layer.layer }}灞�-{{ depth.depth == 1 ? '娴�' : '娣�' }}
+ </div>
+ <div class="location-status" v-if="depth.enableStatus !== 0">
+ 绂佺敤
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 鏃犳暟鎹彁绀� -->
+ <div v-else class="empty-container">
+ <el-empty description="鏆傛棤璐т綅鏁版嵁">
+ <template #description>
+ <p>璇烽�夋嫨浠撳簱鍜屽贩閬撴潵鏌ョ湅璐т綅淇℃伅</p>
+ </template>
+ </el-empty>
+ </div>
+
+ <!-- 鎮诞鎻愮ず妗� -->
+ <div v-if="showTooltipFlag" class="location-tooltip" :style="{
+ left: tooltipPosition.x + 'px',
+ top: tooltipPosition.y + 'px',
+ }">
+ <div class="tooltip-content">
+ <div class="tooltip-header">
+ <h4>璐т綅璇︽儏</h4>
+ </div>
+ <div class="tooltip-body">
+ <div class="tooltip-row">
+ <span class="tooltip-label">浣嶇疆锛�</span>
+ <span class="tooltip-value">{{ getLocationCode(currentLocation) }}</span>
+ </div>
+ <div class="tooltip-row">
+ <span class="tooltip-label">宸烽亾锛�</span>
+ <span class="tooltip-value">{{ selectedRoadwayNo }}</span>
+ </div>
+ <div class="tooltip-row">
+ <span class="tooltip-label">娣卞害锛�</span>
+ <span class="tooltip-value">{{ currentLocation.depth === 1 ? '娴�' : '娣�' }}</span>
+ </div>
+ <div class="tooltip-row">
+ <span class="tooltip-label">绫诲瀷锛�</span>
+ <span class="tooltip-value">{{ getLocationTypeText(currentLocation.locationType) }}</span>
+ </div>
+ <div class="tooltip-row">
+ <span class="tooltip-label">鐘舵�侊細</span>
+ <span class="tooltip-value" :class="getStatusClass(currentLocation.locationStatus)">
+ {{ getStatusText(currentLocation.locationStatus) }}
+ </span>
+ </div>
+ <div class="tooltip-row">
+ <span class="tooltip-label">鍚敤鐘舵�侊細</span>
+ <span class="tooltip-value" :class="{ 'status-disabled': currentLocation.enableStatus !== 0 }">
+ {{ getEnableStatusText(currentLocation.enableStatus) }}
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
- <script>
-import extend from "@/extension/stock/stockView.js";
-import { ref, defineComponent } from "vue";
-export default defineComponent({
- setup() {
- const table = ref({
- key: "stockId",
- footer: "Foots",
- cnName: "搴撳瓨瑙嗗浘",
- name: "stockView",
- url: "/stockView/",
- sortName: "stockId",
- });
- const editFormFields = ref({
- palletCode: "",
- locationCode: "",
- locationName: "",
- });
- const editFormOptions = ref([
-
- ]);
- const searchFormFields = ref({
- palletCode: "",
- // locationCode: "",
- materielCode:"",
- batchNo:""
- });
- const searchFormOptions = ref([
- [
- { title: "鎵樼洏缂栧彿", field: "palletCode",type: "like" },
- // { title: "璐т綅缂栧彿", field: "locationCode",type: "like" },
- { title: "璐т綅鐘舵��", field: "locationStatus" ,type: "selectList",dataKey: "locationStatusEnum",data: [],},
- { title: "搴撳瓨鐘舵��", field: "stockStatus",type: "selectList",dataKey: "stockStatusEmun",data: [],},
- ],
- [
- { title: "鐗╂枡缂栧彿", field: "materielCode",type: "like"},
- { title: "鎵规鍙�", field: "batchNo",type: "like"},
- { title: "鎵�灞炰粨搴�", field: "warehouseId",type: "selectList",dataKey: "warehouses",data: [],},
- ],
- ]);
- const columns = ref([
- {
- field: "stockId",
- title: "Id",
- type: "int",
- width: 90,
- hidden: true,
- readonly: true,
- require: true,
- align: "left",
- },
- {
- field: "palletCode",
- title: "鎵樼洏缂栧彿",
- type: "string",
- width: 150,
- link: true,
- align: "left",
- },
- {
- field: "locationCode",
- title: "璐т綅缂栧彿",
- type: "string",
- width: 200,
- align: "left",
- },
- {
- field: "locationName",
- title: "璐т綅鍚嶇О",
- type: "string",
- width: 270,
- align: "left",
- },
- {
- field: "warehouseId",
- title: "鎵�灞炰粨搴�",
- type: "string",
- width: 80,
- align: "left",
- bind: { key: "warehouses", data: [] },
- },
- {
- field: "roadwayNo",
- title: "宸烽亾缂栧彿",
- type: "decimal",
- width: 100,
- align: "left",
- hidden:true
- },
- {
- field: "materielCode",
- title: "鎵�鍚墿鏂欑紪鍙�",
- type: "string",
- width: 120,
- align: "left",
- },
- {
- field: "batchNo",
- title: "鎵�鍚墿鏂欐壒娆�",
- type: "string",
- width: 200,
- align: "left"
- },
- {
- field: "materielInfo",
- title: "鎵�鍚墿鏂欐渶鏃╀复鏈�",
- type: "string",
- width: 140,
- align: "left",
- },
- {
- field: "sumStock",
- title: "鎬诲簱瀛�",
- type: "string",
- width: 140,
- align: "left",
- },
- {
- field: "row",
- title: "璐т綅琛�",
- type: "string",
- width: 90,
- align: "left",
- hidden: true,
- },
- {
- field: "column",
- title: "璐т綅鍒�",
- type: "int",
- width: 120,
- align: "left",
- hidden: true,
- },
- {
- field: "layer",
- title: "璐т綅灞�",
- type: "string",
- width: 200,
- align: "left",
- hidden: true,
- },
- {
- field: "depth",
- title: "璐т綅娣卞害",
- type: "string",
- width: 180,
- align: "left",
- hidden: true,
- },
- {
- field: "stockStatus",
- title: "搴撳瓨鐘舵��",
- type: "string",
- width: 200,
- align: "left",
- bind: { key: "stockStatusEmun", data: [] },
- },
- {
- field: "locationType",
- title: "璐т綅绫诲瀷",
- type: "string",
- width: 100,
- align: "left",
- bind:{key: "locationTypeEnum", data: []}
- },
- {
- field: "locationStatus",
- title: "璐т綅鐘舵��",
- type: "string",
- width: 120,
- align: "left",
- bind: { key: "locationStatusEnum", data: [] },
- },
- {
- field: "enalbeStatus",
- title: "绂佺敤鐘舵��",
- type: "string",
- width: 80,
- align: "left",
- bind: { key: "enableStatusEnum", data: [] },
- },
- {
- field: "creater",
- title: "鍒涘缓浜�",
- type: "string",
- width: 90,
- align: "left",
- },
- {
- field: "createDate",
- title: "鍒涘缓鏃堕棿",
- type: "datetime",
- width: 160,
- align: "left",
- },
- {
- field: "modifier",
- title: "淇敼浜�",
- type: "string",
- width: 100,
- align: "left",
- },
- {
- field: "modifyDate",
- title: "淇敼鏃堕棿",
- type: "datetime",
- width: 160,
- align: "left",
- },
- {
- field: "remark",
- title: "澶囨敞",
- type: "string",
- width: 100,
- align: "left",
- hidden:true
- },
- ]);
- const detail = ref({
- cnName: "搴撳瓨鏄庣粏淇℃伅",
- table: "StockInfoDetail",
- columns: [
- {
- field: "id",
- title: "Id",
- type: "int",
- width: 90,
- hidden: true,
- readonly: true,
- require: true,
- align: "left",
- },
- {
- field: "stockId",
- title: "搴撳瓨淇℃伅涓婚敭",
- type: "string",
- width: 90,
- align: "left",
- hidden: true
- },
- {
- field: "materielCode",
- title: "鐗╂枡缂栧彿",
- type: "string",
- width: 110,
- align: "left",
- },
- {
- field: "materielName",
- title: "鐗╂枡鍚嶇О",
- type: "string",
- width: 130,
- align: "left",
- },
- {
- field: "orderNo",
- title: "鍗曟嵁缂栧彿",
- type: "decimal",
- width: 130,
- align: "left",
- },
- {
- field: "batchNo",
- title: "鎵规鍙�",
- type: "string",
- width: 180,
- align: "left",
- },
- {
- field: "serialNumber",
- title: "搴忓垪鍙�",
- type: "int",
- width: 120,
- align: "left",
- hidden: true,
- },
- {
- field: "stockQuantity",
- title: "搴撳瓨鏁伴噺",
- type: "string",
- width: 80,
- align: "left",
- },
- {
- field: "outboundQuantity",
- title: "鍑哄簱鏁伴噺",
- type: "string",
- width: 80,
- align: "left",
- },
- {
- field: "unit",
- title: "鍗曚綅",
- type: "string",
- width: 50,
- align: "left",
- },
- {
- field: "productionDate",
- title: "鐢熶骇鏃ユ湡",
- type: "string",
- width: 80,
- align: "left",
- },
- {
- field: "effectiveDate",
- title: "鏈夋晥鏃ユ湡",
- type: "string",
- width: 80,
- align: "left",
- },
- {
- field: "status",
- title: "搴撳瓨鏄庣粏鐘舵��",
- type: "string",
- width: 120,
- align: "left",
- bind: { key: "stockStatusEmun", data: [] }
- },
- {
- field: "creater",
- title: "鍒涘缓浜�",
- type: "string",
- width: 90,
- align: "left",
- hidden: true
- },
- {
- field: "createDate",
- title: "鍒涘缓鏃堕棿",
- type: "datetime",
- width: 160,
- align: "left",
- hidden: true
- },
- {
- field: "modifier",
- title: "淇敼浜�",
- type: "string",
- width: 100,
- align: "left",
- hidden: true
- },
- {
- field: "modifyDate",
- title: "淇敼鏃堕棿",
- type: "datetime",
- width: 160,
- align: "left",
- hidden: true
- },
- {
- field: "remark",
- title: "澶囨敞",
- type: "string",
- width: 100,
- align: "left",
- hidden: true
- },
- ],
- sortName: "id",
- key: "id",
- });
+
+<script>
+import { ElButton, ElMessage, ElSelect, ElOption, ElEmpty, ElSkeleton } from "element-plus";
+
+export default {
+ data() {
return {
- table,
- extend,
- editFormFields,
- editFormOptions,
- searchFormFields,
- searchFormOptions,
- columns,
- detail,
+ warehouseList: [],
+ roadwayNoList: [],
+ selectedWarehouse: null,
+ selectedRoadwayNo: null,
+ infoMsg: [
+ { bgcolor: "lightgreen", msg: "绌鸿揣浣�" },
+ { bgcolor: "orange", msg: "鏈夎揣" },
+ { bgcolor: "#2BB3D5", msg: "閿佸畾" },
+ { bgcolor: "#ccc", msg: "绂佺敤" },
+ { bgcolor: "#b7ba6b", msg: "鍏跺畠" },
+ ],
+ locationData: [],
+ showTooltipFlag: false,
+ currentLocation: null,
+ tooltipPosition: { x: 0, y: 0 },
+ currentColumn: null,
+ currentLayer: null,
+ loading: false
};
},
-});
+ computed: {
+ sortedLayerData() {
+ const layerMap = {};
+
+ this.locationData.forEach(layer => {
+ if (!layerMap[layer.layer]) {
+ layerMap[layer.layer] = {
+ layer: layer.layer,
+ columns: []
+ };
+ }
+
+ layer.columns?.forEach(column => {
+ layerMap[layer.layer].columns.push({
+ column: column.column,
+ depths: column.depths || []
+ });
+ });
+ });
+
+ return Object.values(layerMap).sort((a, b) => a.layer - b.layer);
+ },
+
+ totalLocations() {
+ let count = 0;
+ this.locationData.forEach(layer => {
+ layer.columns?.forEach(column => {
+ count += column.depths?.length || 0;
+ });
+ });
+ return count;
+ }
+ },
+ methods: {
+ sortedColumns(columns) {
+ // 鎸夊垪鍙锋帓搴�
+ return columns?.sort((a, b) => a.column - b.column) || [];
+ },
+
+ sortedDepthsByRow(depths) {
+ // 棣栧厛鎸夎(row)鎺掑簭锛岀劧鍚庢寜娣卞害(depth)鎺掑簭
+ return depths?.sort((a, b) => {
+ // 濡傛灉琛屽彿鐩稿悓锛屾寜娣卞害鎺掑簭
+ if (a.row === b.row) {
+ return a.depth - b.depth;
+ }
+ // 鎸夎鍙锋帓搴忥紙杩欓噷鍋囪琛屽彿鏄暟瀛楁垨鍙瘮杈冪殑瀛楃涓诧級
+ return this.compareRows(a.row, b.row);
+ }) || [];
+ },
+
+ // 姣旇緝琛屽彿鐨勮緟鍔╂柟娉�
+ compareRows(rowA, rowB) {
+ // 濡傛灉閮芥槸鏁板瓧锛屾寜鏁板瓧姣旇緝
+ if (!isNaN(rowA) && !isNaN(rowB)) {
+ return Number(rowA) - Number(rowB);
+ }
+ // 鍚﹀垯鎸夊瓧绗︿覆姣旇緝
+ return String(rowA).localeCompare(String(rowB));
+ },
+
+ async fetchWarehouseData() {
+ try {
+ this.loading = true;
+ const response = await this.http.get("/api/LocationInfo/GetArea");
+ this.warehouseList = response.data || [];
+
+ if (this.warehouseList.length > 0) {
+ this.selectedWarehouse = this.warehouseList[0].warehouseId;
+ this.roadwayNoList = this.warehouseList[0].roadwayNo || [];
+
+ if (this.roadwayNoList.length > 0) {
+ this.selectedRoadwayNo = this.roadwayNoList[0];
+ await this.fetchLocationStatus();
+ }
+ }
+ } catch (error) {
+ console.error("鑾峰彇浠撳簱鏁版嵁澶辫触:", error);
+ this.warehouseList = [];
+ this.roadwayNoList = [];
+ ElMessage.error("鑾峰彇浠撳簱鏁版嵁澶辫触锛岃绋嶅悗閲嶈瘯");
+ } finally {
+ this.loading = false;
+ }
+ },
+
+ async fetchLocationStatus() {
+ if (!this.selectedWarehouse || !this.selectedRoadwayNo) {
+ ElMessage.warning("璇烽�夋嫨浠撳簱鍜屽贩閬�");
+ return;
+ }
+
+ try {
+ this.loading = true;
+ const response = await this.http.get(
+ `/api/LocationInfo/GetLocationStatus?WarehouseId=${this.selectedWarehouse}&RoadwayNo=${this.selectedRoadwayNo}`
+ );
+
+ if (response.data && response.status) {
+ this.locationData = response.data || [];
+
+ // 楠岃瘉鏁版嵁涓槸鍚︽湁row瀛楁
+ console.log("璐т綅鏁版嵁绀轰緥:", this.locationData[0]);
+ if (this.locationData.length > 0 && this.locationData[0].columns) {
+ console.log("绗竴涓揣浣嶇殑row瀛楁:", this.locationData[0].columns[0]?.depths?.[0]?.row);
+ }
+
+ if (this.locationData.length === 0) {
+ ElMessage.info("璇ュ贩閬撴病鏈夎揣浣嶆暟鎹�");
+ }
+ } else {
+ this.locationData = [];
+ ElMessage.error(response.data?.message || "鑾峰彇璐т綅鐘舵�佸け璐�");
+ }
+ } catch (error) {
+ console.error("鑾峰彇璐т綅鐘舵�佸け璐�:", error);
+ this.locationData = [];
+ ElMessage.error("鑾峰彇璐т綅鐘舵�佸け璐ワ紝璇风◢鍚庨噸璇�");
+ } finally {
+ this.loading = false;
+ }
+ },
+
+ handleWarehouseChange() {
+ const selectedWarehouse = this.warehouseList.find(
+ w => w.warehouseId === this.selectedWarehouse
+ );
+ this.roadwayNoList = selectedWarehouse ? selectedWarehouse.roadwayNo : [];
+ this.selectedRoadwayNo = this.roadwayNoList.length > 0 ? this.roadwayNoList[0] : null;
+ this.fetchLocationStatus();
+ },
+
+ getWarehouseName(warehouseId) {
+ const warehouseMap = {
+ 1: '鍘熸潗鏂欎粨',
+ 2: '鎴愬搧浠�'
+ };
+ return warehouseMap[warehouseId] || `浠撳簱 ${warehouseId}`;
+ },
+
+ handleRoadwayNoChange() {
+ this.fetchLocationStatus();
+ },
+
+ getLocationStatusClass(depth) {
+ if (depth.enableStatus !== 0) {
+ return 'location-disabled';
+ }
+
+ switch (depth.locationStatus) {
+ case 0: return 'location-empty'; // 绌鸿揣浣�
+ case 1: return 'location-locked'; // 閿佸畾
+ case 100: return 'location-occupied'; // 鏈夎揣
+ default: return 'location-other'; // 鍏朵粬鐘舵��
+ }
+ },
+
+ getLayerLocations(layer) {
+ let count = 0;
+ layer.columns?.forEach(column => {
+ count += column.depths?.length || 0;
+ });
+ return count;
+ },
+
+ showTooltip(depth, column, layer, event) {
+ this.currentLocation = depth;
+ this.currentColumn = column;
+ this.currentLayer = layer;
+ this.showTooltipFlag = true;
+
+ const offsetX = 15;
+ const offsetY = 15;
+ this.tooltipPosition = {
+ x: event.clientX + offsetX,
+ y: event.clientY + offsetY,
+ };
+ },
+
+ hideTooltip() {
+ this.showTooltipFlag = false;
+ this.currentLocation = null;
+ this.currentColumn = null;
+ this.currentLayer = null;
+ },
+
+ handleLocationClick(depth) {
+ console.log('鐐瑰嚮璐т綅:', depth);
+ },
+
+ getLocationCode(location) {
+ if (!location) return '';
+ return `${location.row || '?'}鎺�-${this.currentColumn}鍒�-${this.currentLayer}灞�-${location.depth === 1 ? '娴�' : '娣�'}`;
+ },
+
+ getStatusText(status) {
+ const statusMap = {
+ 0: "绌鸿揣浣�",
+ 1: "閿佸畾",
+ 100: "鏈夎揣",
+ };
+ return statusMap[status] || "鏈煡鐘舵��";
+ },
+
+ getStatusClass(status) {
+ const classMap = {
+ 0: 'status-empty',
+ 1: 'status-locked',
+ 100: 'status-occupied'
+ };
+ return classMap[status] || '';
+ },
+
+ getLocationTypeText(type) {
+ const typeMap = {
+ 1: "甯冨嵎",
+ 2: "鏉惧竷鍗�",
+ 3: "鎴愬搧璐т綅"
+ };
+ return typeMap[type] || "鏈煡绫诲瀷";
+ },
+
+ getEnableStatusText(status) {
+ return status === 0 ? '鍚敤' : '绂佺敤';
+ }
+ },
+ mounted() {
+ this.fetchWarehouseData();
+ },
+ components: {
+ ElButton,
+ ElSelect,
+ ElOption,
+ ElEmpty,
+ ElSkeleton
+ },
+};
</script>
-
\ No newline at end of file
+
+<style scoped>
+/* 鏍峰紡閮ㄥ垎淇濇寔涓嶅彉锛屼笌涔嬪墠鐩稿悓 */
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ padding: 16px;
+ box-sizing: border-box;
+ background-color: #f0f2f5;
+}
+
+.header {
+ text-align: center;
+ margin-bottom: 20px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid #e8e8e8;
+}
+
+.title {
+ font-size: 22px;
+ font-weight: 600;
+ margin: 0;
+ color: #1890ff;
+}
+
+.content-wrapper {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+ gap: 16px;
+}
+
+.control-panel {
+ width: 260px;
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.panel-header {
+ padding: 16px;
+ border-bottom: 1px solid #e8e8e8;
+ background-color: #fafafa;
+}
+
+.panel-header h3 {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.panel-body {
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.form-group {
+ margin-bottom: 0;
+}
+
+.form-label {
+ display: block;
+ margin-bottom: 6px;
+ font-size: 14px;
+ color: #666;
+ font-weight: 500;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.refresh-btn {
+ margin-top: 8px;
+ width: 100%;
+ height: 32px;
+}
+
+.legend-section {
+ margin-top: 8px;
+ padding-top: 16px;
+ border-top: 1px solid #e8e8e8;
+}
+
+.legend-header h4 {
+ margin: 0 0 12px 0;
+ font-size: 15px;
+ font-weight: 600;
+ color: #333;
+}
+
+.legend-list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.color-box {
+ width: 20px;
+ height: 20px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ flex-shrink: 0;
+}
+
+.depth-shallow-legend {
+ background-color: rgba(255, 255, 255, 0.7);
+ border: 1px solid #2c3e50;
+}
+
+.depth-deep-legend {
+ background-color: rgba(0, 0, 0, 0.7);
+ border: 1px solid #000;
+}
+
+.legend-label {
+ font-size: 13px;
+ color: #666;
+}
+
+.main-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.loading-container {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: white;
+ border-radius: 8px;
+ padding: 24px;
+}
+
+.location-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ overflow: hidden;
+ min-height: 0;
+}
+
+.location-header {
+ padding: 16px 20px;
+ background: #fafafa;
+ border-bottom: 1px solid #e8e8e8;
+ flex-shrink: 0;
+}
+
+.location-info {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 14px;
+}
+
+.total-count {
+ font-weight: 600;
+ color: #1890ff;
+}
+
+.layers-container {
+ width: 100%;
+ height: 100%;
+ flex: 1;
+ overflow-y: auto;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.layer-row {
+ background: #f9f9f9;
+ border-radius: 8px;
+ border: 1px solid #e8e8e8;
+ display: flex;
+ flex-direction: column;
+ min-height: auto;
+}
+
+.layer-title-area {
+ padding: 12px 16px;
+ background: #f0f0f0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.layer-title {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.layer-count {
+ font-size: 12px;
+ color: #666;
+ background: white;
+ padding: 4px 10px;
+ border-radius: 12px;
+ border: 1px solid #ddd;
+}
+
+.layer-content-wrap {
+ width: 100%;
+ overflow: hidden;
+ flex: 1;
+}
+
+.layer-content {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+ padding: 16px;
+ min-width: 0;
+ box-sizing: border-box;
+}
+
+.location-column {
+ flex: 0 0 auto;
+ width: 140px;
+ min-height: 120px;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+}
+
+.column-label {
+ font-size: 13px;
+ font-weight: 600;
+ color: #666;
+ text-align: center;
+ margin-bottom: 8px;
+ padding-bottom: 4px;
+ border-bottom: 1px dashed #ddd;
+ flex-shrink: 0;
+}
+
+.locations-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ flex: 1;
+ min-height: 0;
+}
+
+.location-item {
+ min-height: 40px;
+ padding: 6px 4px;
+ border-radius: 4px;
+ text-align: center;
+ cursor: pointer;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ transition: all 0.2s;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+ flex: 1;
+}
+
+.location-item:hover {
+ transform: scale(1.05);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+ z-index: 10;
+}
+
+.location-code {
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 1.2;
+ word-break: break-all;
+}
+
+.depth-indicator {
+ font-size: 10px;
+ padding: 2px 4px;
+ border-radius: 3px;
+ margin-top: 2px;
+ font-weight: bold;
+ transition: all 0.2s;
+}
+
+.depth-shallow {
+ background-color: rgba(255, 255, 255, 0.7);
+ color: #2c3e50;
+}
+
+.depth-deep {
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+}
+
+.location-item:hover .depth-indicator {
+ transform: scale(1.1);
+}
+
+.location-status {
+ font-size: 10px;
+ padding: 1px 4px;
+ border-radius: 2px;
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.location-empty {
+ background-color: lightgreen;
+ color: #333;
+}
+
+.location-occupied {
+ background-color: orange;
+ color: white;
+}
+
+.location-locked {
+ background-color: #2BB3D5;
+ color: white;
+}
+
+.location-disabled {
+ background-color: #ccc;
+ color: #666;
+ cursor: not-allowed;
+}
+
+.location-other {
+ background-color: #b7ba6b;
+ color: white;
+}
+
+.empty-container {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: white;
+ border-radius: 8px;
+}
+
+.location-tooltip {
+ position: fixed;
+ z-index: 9999;
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ pointer-events: none;
+ min-width: 220px;
+ max-width: 300px;
+}
+
+.tooltip-content {
+ overflow: hidden;
+}
+
+.tooltip-header {
+ padding: 12px 16px;
+ background-color: #1890ff;
+ color: white;
+}
+
+.tooltip-header h4 {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.tooltip-body {
+ padding: 12px 16px;
+}
+
+.tooltip-row {
+ display: flex;
+ margin-bottom: 8px;
+ font-size: 13px;
+ line-height: 1.4;
+}
+
+.tooltip-row:last-child {
+ margin-bottom: 0;
+}
+
+.tooltip-label {
+ flex: 0 0 80px;
+ color: #666;
+ font-weight: 500;
+}
+
+.tooltip-value {
+ flex: 1;
+ color: #333;
+ word-break: break-all;
+}
+
+.status-disabled {
+ color: #f5222d;
+}
+
+@media (max-width: 1200px) {
+ .location-column {
+ width: 130px;
+ }
+}
+
+@media (max-width: 768px) {
+ .content-wrapper {
+ flex-direction: column;
+ }
+
+ .control-panel {
+ width: 100%;
+ }
+
+ .location-column {
+ width: 120px;
+ }
+
+ .layer-content {
+ gap: 12px;
+ }
+}
+
+@media (max-width: 480px) {
+ .location-column {
+ width: 110px;
+ }
+
+ .location-code {
+ font-size: 10px;
+ }
+
+ .layer-content {
+ gap: 10px;
+ padding: 12px;
+ }
+
+ @media (max-width: 380px) {
+ .location-column {
+ width: 100px;
+ }
+ }
+}
+
+.layers-container::-webkit-scrollbar {
+ width: 8px;
+}
+
+.layers-container::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 4px;
+}
+
+.layers-container::-webkit-scrollbar-thumb {
+ background: #c1c1c1;
+ border-radius: 4px;
+}
+
+.layers-container::-webkit-scrollbar-thumb:hover {
+ background: #a8a8a8;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3