From 81946b468aff97b96fe50186246d3a853ce79b1b Mon Sep 17 00:00:00 2001
From: liulijun <liulijun@hnkhzn.com>
Date: 星期五, 06 三月 2026 11:38:48 +0800
Subject: [PATCH] 增加已有任务超时提示在任务完成后自动清除
---
项目代码/WMS/WMSClient/src/views/Home.vue | 467 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 455 insertions(+), 12 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue"
index 820437a..ce24a69 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue"
@@ -1,24 +1,467 @@
-<template>
- <div class="title"></div>
-</template>
+ <template>
+ <div class="container">
+ <div class="content-wrapper">
+ <!-- 鎺у埗闈㈡澘鍖哄煙 -->
+ <!-- <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">
+ <div style="display:flex;flex-direction: column;">
+ <h4>浠撳簱</h4>
+ <el-select size="mini" @change="onWarehouseChange" v-model="Area.warehouse" placeholder="璇烽�夋嫨浠撳簱"
+ class="full-width">
+ <el-option v-for="item in warehouseList" :value="item" :label="item" :key="item"></el-option>
+ </el-select>
+ <h4>璐т綅鎺�</h4>
+ <el-select size="mini" @change="SCChange" v-model="Area.row" placeholder="璇烽�夋嫨鎺�" class="full-width">
+ <el-option v-for="item in scList" :value="item" :label="'绗�' + item + '鎺�'" :key="item"></el-option>
+ </el-select>
+ <el-button type="success" class="refresh-btn" @click="GetViewData">
+ 鍒锋柊
+ </el-button>
+ </div>
+
+ <div class="legend-section" style="margin-left: 20px;">
+ <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>
+
+ <!-- 璐т綅灞曠ず鍖哄煙 -->
+ <div v-if="loading" class="loading-container">
+ <el-icon class="is-loading">
+ <Loading />
+ </el-icon>
+ <span>鍔犺浇涓�...</span>
+ </div>
+
+ <div v-else-if="locationData.length === 0" class="empty-container">
+ <el-empty description="鏆傛棤鏁版嵁" />
+ </div>
+
+ <div v-else>
+ <div class="location-view">
+ <div class="layer-container" v-for="(item, index) in locationData" :key="index">
+ <h3 class="layer-title">绗瑊{ item.layer }}灞�</h3>
+ <div class="row">
+ <div class="location-cell" :style="{ 'background-color': GetBgColor(column) }"
+ v-for="(column, index) in item.locationObj" :key="index" @mouseenter="showTooltip(column, $event)"
+ @mouseleave="hideTooltip">
+ {{ column.row }}-{{ column.column }}-{{ column.layer }}
+ </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>{{ Area.warehouse || "鏈�夋嫨" }}</p>
+ <p><strong>璐т綅鍙�:</strong>{{ currentLocation.locationCode }}</p>
+ <!-- <p><strong>鏂欑鍙�:</strong>{{ currentLocation.barCode ? currentLocation.barCode : "鏃犳枡绠�" }}</p> -->
+ <!-- 鏍规嵁浠撳簱绫诲瀷鏄剧ず涓嶅悓鐨勬爣绛惧拰鍐呭 -->
+ <p v-if="Area.warehouse === '鍘熸枡搴�'">
+ <strong>RFID:</strong>{{ this.rfidData[currentLocation.locationCode] || "鏃�" }}
+ </p>
+ <p v-else-if="Area.warehouse === '鎴愬搧搴�'">
+ <strong>鎵樼洏鍙�:</strong>{{ this.rfidData[currentLocation.locationCode] || "鏃�" }}
+ </p>
+ <p v-else>
+ <strong>鏍囪瘑:</strong>{{ this.rfidData[currentLocation.locationCode] || "鏃�" }}
+ </p>
+ <p>
+ <strong>鎺掑垪灞�:</strong> {{ currentLocation.row }}鎺抺{
+ currentLocation.column
+ }}鍒梴{ currentLocation.layer }}灞�
+ </p>
+ <p><strong>鐘舵��:</strong> {{ getStatusText(currentLocation) }}</p>
+ <!-- <p>
+ <strong>绂佺敤:</strong>
+ {{ currentLocation.location_lock == 3 ? "鏄�" : "鍚�" }}
+ </p> -->
+ <!-- <p v-if="currentLocation.location_state > 0">
+ <strong>鐗╂枡缂栫爜:</strong>
+ {{ currentLocation.material_code || "鏃�" }}
+ </p>
+ <p v-if="currentLocation.location_state > 0">
+ <strong>鏁伴噺:</strong> {{ currentLocation.quantity || "鏃�" }}
+ </p> -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
<script>
-import { ref, reactive } from 'vue'
+import { ElButton, Loading } from "element-plus";
export default {
- setup() {
- return {
+ data() {
+ return {
+ slectData: [],
+ scList: [],
+ warehouseList: ["鍘熸枡搴�", "鎴愬搧搴�"],
+ warehouseMap: {
+ "鍘熸枡搴�": 1,
+ "鎴愬搧搴�": 2
+ },
+ Area: {
+ warehouse: "鍘熸枡搴�",
+ row: "",
+ shelf_code: ""
+ },
+ mian_height: "",
+ loading: false,
+ infoMsg: [
+ { bgcolor: "lightgreen", msg: "绌洪棽", state: 0 },
+ { bgcolor: "orange", msg: "鏈夎揣", state: 100 },
+ { bgcolor: "#2BB3D5", msg: "閿佸畾", state: 1 },
+ { bgcolor: "yellow", msg: "绌洪棽閿佸畾", state: 20 },
+ { bgcolor: "purple", msg: "鏈夎揣閿佸畾", state: 10 },
+ ],
+ locationData: [],
+ showTooltipFlag: false,
+ currentLocation: null,
+ tooltipPosition: { x: 0, y: 0 },
+ rfidData: {}, // 瀛樺偍璐т綅缂栧彿涓嶳FID鐨勬槧灏勫叧绯�
+ };
+ },
+ computed: {
+ GetBgColor() {
+ return (col) => {
+ var bgColor = "";
+ //浼樺厛鏄剧ず绂佺敤鐘舵��
+ if (col.location_lock > 0) {
+ this.infoMsg.forEach((el) => {
+ if (el.state === col.location_lock) {
+ bgColor = el.bgcolor;
+ }
+ });
+ }
+ else {
+ return "lightgreen";
+ }
+ return bgColor;
+ };
+ },
+ },
+ methods: {
+ // 鑾峰彇RFID淇℃伅
+ getRfidInfo(locationCodes, warehouseId) {
+ if (!locationCodes || locationCodes.length === 0) {
+ console.log("娌℃湁璐т綅缂栧彿锛岃烦杩嘡FID鏌ヨ");
+ return;
+ }
+ console.log("璋冪敤RFID鏌ヨAPI:", {
+ locationCodes: locationCodes,
+ warehouseId: warehouseId
+ });
+
+ this.http
+ .post(`/api/LocationInfo/GetRfid`, { locationCodes, warehouseId }, "鏌ヨRFID涓�")
+ .then((response) => {
+ console.log("RFID鏌ヨAPI杩斿洖缁撴灉:", response);
+ if (response.status && response.data) {
+ console.log(`鎴愬姛鑾峰彇${response.data.length}鏉FID璁板綍`);
+ // 鏇存柊rfidData鏄犲皠
+ response.data.forEach((item, index) => {
+ try {
+ // 妫�鏌ュ瓧娈靛悕锛屾敮鎸佸ぇ灏忓啓涓ょ鏍煎紡
+ const locationCode = item.LocationCode || item.locationCode;
+ const rfidCode = item.RfidCode || item.rfidCode;
+
+ if (item && locationCode !== undefined) {
+ console.log(`鏇存柊RFID鏁版嵁: ${locationCode} -> ${rfidCode}`);
+ this.rfidData[locationCode] = rfidCode;
+ } else {
+ console.warn(`璺宠繃鏃犳晥鐨凴FID鏁版嵁椤�(${index}):`, item);
+ }
+ } catch (error) {
+ console.error(`澶勭悊RFID鏁版嵁椤�(${index})鏃跺嚭閿�:`, error, item);
+ }
+ });
+ console.log("鏇存柊鍚庣殑rfidData:", this.rfidData);
+ } else {
+ console.log("RFID鏌ヨAPI杩斿洖鐘舵�佸け璐ユ垨鏁版嵁涓虹┖");
+ }
+ })
+ .catch((error) => {
+ console.error("鑾峰彇RFID淇℃伅澶辫触:", error);
+ });
+ },
+
+ GetViewData() {
+ var _this = this;
+
+ this.loading = true;
+ this.rfidData = {}; // 娓呯┖涔嬪墠鐨凴FID鏁版嵁
+
+ let warehouseId = 0;
+ if (this.Area.warehouse) {
+ warehouseId = this.warehouseMap[this.Area.warehouse] || 1;
+ console.log(`褰撳墠閫夋嫨鐨勪粨搴�: ${this.Area.warehouse}, 瀵瑰簲鐨剋arehouseId: ${warehouseId}`);
+ }
+
+ console.log(`璋冪敤GetLocationStatus API: row=${_this.Area.row}, warehouseId=${warehouseId}`);
+
+ this.http
+ .post(`/api/LocationInfo/GetLocationStatus?row=${_this.Area.row}&warehouseId=${warehouseId}`, {}, "鏌ヨ涓�")
+ .then((x) => {
+ console.log("GetLocationStatus API杩斿洖缁撴灉:", x);
+ this.locationData = x.data || [];
+
+ // 鎻愬彇鎵�鏈夎揣浣嶇紪鍙�
+ let locationCodes = [];
+ this.locationData.forEach(layer => {
+ layer.locationObj.forEach(location => {
+ locationCodes.push(location.locationCode);
+ });
+ });
+
+ console.log(`浠庤揣浣嶆暟鎹腑鎻愬彇鍒�${locationCodes.length}涓揣浣嶇紪鍙穈);
+ console.log("鎻愬彇鐨勮揣浣嶇紪鍙�:", locationCodes);
+
+ // 璋冪敤API鑾峰彇RFID淇℃伅
+ this.getRfidInfo(locationCodes, warehouseId);
+ })
+ .catch((error) => {
+ this.$message.error("鑾峰彇鏁版嵁澶辫触锛岃閲嶈瘯");
+ console.error("鑾峰彇璐т綅鐘舵�佸け璐�:", error);
+ })
+ .finally(() => {
+ this.loading = false;
+ });
+ },
+
+ // 鍒囨崲鎺�
+ SCChange() {
+ this.GetViewData();
+ },
+ // 鍒囨崲浠撳簱
+ onWarehouseChange() {
+ // 鍒囨崲浠撳簱鏃堕噸缃帓閫夋嫨
+ 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_lock === 3) return "绂佺敤";
+ if (location.location_lock === 0) return "绌洪棽";
+ if (location.location_lock === 1) return "閿佸畾";
+ if (location.location_lock === 100) return "鏈夎揣";
+ if (location.location_lock === 20) return "绌洪棽閿佸畾";
+ if (location.location_lock === 10) return "鏈夎揣閿佸畾";
+ // if (location.location_state > 0 && location.location_state < 100)
+ // return "閿佸畾";
+ return "鍏朵粬";
+ },
+ getWarehouseName(location) {
+ if (location.warehouseId === 1) return "鍘熸枡搴�";
+ if (location.warehouseId === 2) return "鎴愬搧搴�";
+ return "鏈煡浠撳簱";
+ },
+ },
+ mounted() {
+ var mainHeight = document.getElementById("vol-main");
+ if (mainHeight) {
+ this.mian_height = mainHeight.offsetHeight - 40 + "px";
}
- }
-}
+ var _this = this;
+ //鍔犺浇涓嬫媺閫夐」
+ this.http.post("/api/LocationInfo/GetRow", {}, "鏌ヨ涓�").then((x) => {
+ //鍔犺浇绗竴涓尯鍩燂紝绗竴鎺�
+ // _this.Area.shelf_code = _this.slectData[0].shelf_code;
+ _this.scList = x.data;
+ if (_this.scList.length > 0) {
+ _this.Area.row = _this.scList[0];
+ }
+ _this.GetViewData();
+ });
+ },
+ components: { ElButton, Loading },
+};
</script>
<style scoped>
-.title {
- line-height: 70vh;
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 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;
+ padding: 10px;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.refresh-btn {
+ margin-top: 10px;
+ width: 35%;
+}
+
+.legend-section h4 {
+ margin-bottom: 10px;
+}
+
+.legend-grid {
+ display: flex;
+ flex-direction: column;
+ 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;
+ width: 100%;
+ max-width: 100%;
+ 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;
+ cursor: pointer;
+}
+
+.location-cell {
+ width: 85px;
+ 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;
+}
+
+.form-group {
+ display: flex;
+}
+
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 200px;
+ font-size: 16px;
+}
+
+.empty-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 200px;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3