1

dengjunjie

3 天以前 681d093f9ea16ab2d480d77e6b04b197e506ff60

 ´úÂë¹ÜÀí/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>