From 681d093f9ea16ab2d480d77e6b04b197e506ff60 Mon Sep 17 00:00:00 2001
From: dengjunjie <dengjunjie@hnkhzn.com>
Date: 星期四, 19 六月 2025 01:29:12 +0800
Subject: [PATCH] 1
---
代码管理/WMS/WIDESEA_WMSClient/src/views/Home.vue | 369 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 359 insertions(+), 10 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/Home.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/Home.vue"
index 820437a..e94242b 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/Home.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/Home.vue"
@@ -1,24 +1,373 @@
<template>
- <div class="title"></div>
+ <div class="container">
+ <div class="header">
+ <h2 class="title">璐т綅鎺掑浘</h2>
+ </div>
+
+ <div class="content-wrapper">
+ <!-- 鎺у埗闈㈡澘鍖哄煙 -->
+ <div class="control-panel">
+ <div class="form-group">
+ <label>鍖哄煙锛�</label>
+ <el-select
+ size="mini"
+ filterable
+ v-model="Area.shelf_code"
+ placeholder="璇烽�夋嫨"
+ class="full-width"
+ >
+ <el-option
+ v-for="item in slectData"
+ :value="item.shelf_code"
+ :label="item.house_name"
+ :key="item.house_name"
+ ></el-option>
+ </el-select>
+ </div>
+
+ <div class="form-group">
+ <label>鎺掞細</label>
+ <el-select
+ size="mini"
+ clearable
+ filterable
+ @change="SCChange"
+ v-model="Area.tunnel"
+ placeholder="璇烽�夋嫨"
+ class="full-width"
+ >
+ <el-option
+ v-for="item in scList"
+ :value="item"
+ :label="item"
+ :key="item"
+ ></el-option>
+ </el-select>
+ </div>
+
+ <el-button type="success" class="refresh-btn" @click="GetViewData">
+ 鍒锋柊
+ </el-button>
+
+ <div class="legend-section">
+ <h4>璇存槑</h4>
+ <div class="legend-grid">
+ <div
+ class="legend-item"
+ v-for="item in infoMsg"
+ :key="item.bgcolor"
+ >
+ <span
+ class="color-box"
+ :style="{ 'background-color': item.bgcolor }"
+ ></span>
+ <span class="legend-label">{{ item.msg }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 璐т綅灞曠ず鍖哄煙 -->
+ <div class="location-view">
+ <div
+ class="layer-container"
+ v-for="layer in locationData"
+ :key="layer.index"
+ >
+ <h3 class="layer-title">绗瑊{ layer.index }}灞�</h3>
+ <div class="row" v-for="row in layer.rows" :key="row.index">
+ <div
+ class="location-cell"
+ :style="{ 'background-color': GetBgColor(col) }"
+ v-for="col in row.cols"
+ :key="col.index"
+ @mouseenter="showTooltip(col, $event)"
+ @mouseleave="hideTooltip"
+ >
+ {{ row.index }}-{{ col.index }}-{{ layer.index }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 鎮诞鎻愮ず妗� -->
+ <div
+ v-if="showTooltipFlag"
+ class="location-tooltip"
+ :style="{
+ left: tooltipPosition.x + 'px',
+ top: tooltipPosition.y + 'px',
+ }"
+ >
+ <div v-if="currentLocation">
+ <p><strong>璐т綅鍙�:</strong>{{ currentLocation.locationCode }}</p>
+ <p>
+ <strong>璐т綅鎺掑垪灞�:</strong> {{ currentLocation.row }}鎺抺{
+ currentLocation.layer
+ }}鍒梴{ currentLocation.index }}灞�
+ </p>
+ <p><strong>鐘舵��:</strong> {{ getStatusText(currentLocation) }}</p>
+ <p>
+ <strong>绂佺敤:</strong>
+ {{ currentLocation.location_lock == 3 ? "鏄�" : "鍚�" }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import { ref, reactive } from 'vue'
+import { ElButton } from "element-plus";
export default {
- setup() {
+ data() {
return {
+ slectData: [],
+ scList: [],
+ Area: { house_name: "", tunnel: "", shelf_code: "" },
+ mian_height: "",
+ infoMsg: [
+ { bgcolor: "orange", msg: "绌鸿揣浣�", state: 0 },
+ { bgcolor: "lightgreen", msg: "鏈夎揣", state: 2 },
+ { bgcolor: "#2BB3D5", msg: "閿佸畾", state: "InAssigned" },
+ { bgcolor: "#ccc", msg: "绂佺敤", state: 3 },
+ { bgcolor: "#b7ba6b", msg: "鍏跺畠", state: "else" },
+ ],
+ locationData: [],
+ showTooltipFlag: false,
+ currentLocation: null,
+ tooltipPosition: { x: 0, y: 0 },
+ };
+ },
+ computed: {
+ GetBgColor() {
+ return (col) => {
+ var bgColor = "#b7ba6b";
+ //浼樺厛鏄剧ず绂佺敤鐘舵��
+ if (col.location_lock == 3) {
+ this.infoMsg.forEach((el) => {
+ if (el.state == col.location_lock) {
+ bgColor = el.bgcolor;
+ }
+ });
+ } else {
+ this.infoMsg.forEach((el) => {
+ if (col.location_state == 1 || col.location_state == 98) {
+ if (el.state == "InAssigned") {
+ bgColor = el.bgcolor;
+ }
+ } else if (el.state == col.location_state) {
+ bgColor = el.bgcolor;
+ }
+ });
+ }
+ return bgColor;
+ };
+ },
+ },
+ watch: {
+ //鍒囨崲搴撳尯
+ "Area.shelf_code"(newValue, oldValue) {
+ this.scList = [];
+ this.slectData.forEach((e) => {
+ if (e.shelf_code == newValue) {
+ this.Area.tunnel = e.tunnel[0];
+ this.scList = e.tunnel;
+ }
+ });
+ this.GetViewData();
+ },
+ },
+ methods: {
+ GetViewData() {
+ var _this = this;
+ this.http
+ .post("/api/LocationInfoRow/GetLocationStatu", _this.Area, "鏌ヨ涓�")
+ .then((x) => {
+ _this.locationData = x;
+ console.log("鍚庣杩斿洖:", x);
+ });
+ },
+ // 鍒囨崲鎺�
+ SCChange() {
+ this.GetViewData();
+ },
+ showTooltip(location, event) {
+ this.currentLocation = location;
+ this.showTooltipFlag = true;
- }
- }
-}
+ // 璁剧疆鎻愮ず妗嗕綅缃紝绋嶅井鍋忕Щ閬垮厤閬尅榧犳爣
+ this.tooltipPosition = {
+ x: event.clientX + 10,
+ y: event.clientY + 10,
+ };
+ },
+
+ hideTooltip() {
+ this.showTooltipFlag = false;
+ this.currentLocation = null;
+ },
+
+ getStatusText(location) {
+ if (location.location_state === 0) return "绌鸿揣浣�";
+ if (location.location_state === 1) return "閿佸畾";
+ if (location.location_state === 2) return "鏈夎揣";
+ if (location.location_state === 98) return "绌烘墭閿佸畾";
+ if (location.location_state === 99) return "绌烘墭鐩�";
+ return "鍏朵粬";
+ },
+ },
+ mounted() {
+ var mainHeight = document.getElementById("vol-main");
+ this.mian_height = mainHeight.offsetHeight - 40 + "px";
+ var _this = this;
+ //鍔犺浇涓嬫媺閫夐」
+ this.http.get("/api/LocationInfoRow/GetArea", {}, "鏌ヨ涓�").then((x) => {
+ _this.slectData = x;
+ //鍔犺浇绗竴涓尯鍩燂紝绗竴鎺�
+ _this.Area.shelf_code = _this.slectData[0].shelf_code;
+ _this.scList = _this.slectData[0].tunnel;
+ });
+ },
+ components: { ElButton },
+};
</script>
<style scoped>
-.title {
- line-height: 70vh;
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 10px;
+}
+
+.header {
text-align: center;
- font-size: 28px;
- color: orange;
+ margin-bottom: 20px;
+}
+
+.title {
+ font-size: 20px;
+ font-weight: bold;
+ margin: 0;
+}
+
+.content-wrapper {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+}
+
+.control-panel {
+ width: 220px;
+ padding: 15px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
+ margin-right: 15px;
+ display: flex;
+ flex-direction: column;
+}
+
+.form-group {
+ margin-bottom: 15px;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.refresh-btn {
+ margin-top: 10px;
+ width: 100%;
+}
+
+.legend-section {
+ margin-top: 30px;
+}
+
+.legend-section h4 {
+ margin-bottom: 10px;
+}
+
+.legend-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 8px;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+}
+
+.color-box {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin-right: 8px;
+ border-radius: 3px;
+}
+
+.legend-label {
+ font-size: 13px;
+}
+
+.location-view {
+ flex: 1;
+ overflow: auto;
+ padding: 10px;
+ background-color: white;
+ border-radius: 4px;
+}
+
+.layer-container {
+ margin-bottom: 25px;
+}
+
+.layer-title {
+ margin: 0 0 10px 0;
+ font-size: 16px;
+ color: #333;
+}
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 8px;
+}
+
+.location-cell {
+ width: 66px;
+ height: 38px;
+ margin: 3px;
+ text-align: center;
+ font-size: 14px;
+ border-radius: 3px;
+ line-height: 38px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.location-tooltip {
+ position: fixed;
+ z-index: 9999;
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 10px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ pointer-events: none;
+ max-width: 250px;
+}
+
+.location-tooltip p {
+ margin: 5px 0;
+ font-size: 13px;
+ line-height: 1.4;
+}
+
+.location-tooltip strong {
+ display: inline-block;
+ width: 70px;
+ color: #666;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3