添加版权注释

dengjunjie

2025-06-17 fd073a00f6813eada92b08f1884b115295ac1177

 ÏîÄ¿´úÂë/WMS/WIDESEA_WMSClient/src/views/Home.vue

@@ -1,24 +1,337 @@
<template>
  <div class="title"></div>
  <div>
    <!-- height:40px -->
    <div class="title">库位平面图</div>

    <!-- <div>只显示一个区域的一个堆垛机对应的状态</div> -->
    <div class="main" :style="{ height: mian_height }">
      <!-- å¹³é¢å›¾æ˜¾ç¤ºåŒºåŸŸ -->
      <div class="right">
        <div v-for="layer in locationData" :key="layer.index">
          <div class="row_tip">第{{ layer.index }}层</div>
          <div class="row" v-for="row in layer.rows" :key="row.index">
            <el-tooltip
              v-for="col in row.cols"
              :key="col.column"
              effect="dark"
              placement="top"
              :show-after="200"
              :hide-after="0"
            >
              <template #content v-if="col.locationStatus == 99">
                <!-- <div>货位状态：{{ getStatusText(col.locationStatus) }}</div> -->
                <div>物料名称： {{ col.materielName }}</div>
                <!-- <div>物料编号： {{ col.materielCode }}</div> -->
                <div>数量：{{ col.quantity }}托</div>
                <!-- <div>托盘号：{{ col.palletCode }}</div> -->
              </template>
              <template #content v-else-if="col.locationStatus == 0">
                <div>空货位</div>
              </template>
              <template #content v-else>
                <div>
                  è´§ä½åç§°ï¼š{{
                    col.row + "排" + col.column + "列" + col.layer + "层"
                  }}
                </div>
                <div>货位状态：{{ getStatusText(col.locationStatus) }}</div>
                <div>物料名称： {{ col.materielName }}</div>
                <div>物料编号： {{ col.materielCode }}</div>
                <div>批号：{{ col.orderNo }}</div>
                <div>柜号：{{ col.batchNo }}</div>
                <div>数量：{{ col.quantity }}托</div>
                <!-- <div>托盘号：{{ col.palletCode }}</div> -->
                <div>入库时间：{{ col.inDate }}</div>
                <div>启用状态：{{ getEnableStatusText(col.enalbeStatus) }}</div>
              </template>
              <div
                class="item"
                :style="{ 'background-color': GetBgColor(col) }"
              >
                {{ row.index }}-{{ col.column }}-{{ layer.index }}
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>

      <!-- é€‰æ‹©æç¤ºåŒºåŸŸ -->
      <div class="left">
        <!-- <div>区域：</div>
        <el-select
          size="mini"
          filterable
          v-model="Area.shelf_code"
          placeholder="请选择"
        >
          <el-option
            v-for="item in slectData"
            :value="item.shelf_code"
            :label="item.house_name"
            :key="item.house_name"
          ></el-option>
        </el-select> -->
        <!-- <div class="tipText">堆垛机：</div>
        <el-select
          size="mini"
          clearable
          filterable
          @change="SCChange"
          v-model="Area.tunnel"
          placeholder="请选择"
        >
          <el-option
            v-for="item in scList"
            :value="item"
            :label="item"
            :key="item"
          ></el-option>
        </el-select> -->
        <!-- <div class="tipText">层：</div>
        <el-select
          size="mini"
          clearable
          filterable
          @change="SCChange"
          v-model="Area.layer"
          placeholder="请选择"
        >
          <el-option
            v-for="item in layers"
            :value="item"
            :label="item"
            :key="item"
          ></el-option>
        </el-select> -->
        <br />
        <ElButton type="success" class="btn" @click="GetViewData"
          >刷新</ElButton
        >

        <div style="margin-top: 80px">
          <!-- <div style="color: red">库位排序说明：排-列-层</div>
          <div style="color: red">1+2排为长货位,3排为短货位</div>
          <div style="color: red">1个格子=12个货位最多可放12托</div> -->
          <div>说明</div>
          <div v-for="item in infoMsg" :key="item.bgcolor">
            <div class="infoMsg" :style="{ 'background-color': item.bgcolor }">
              {{ item.msg }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElButton } from "element-plus";

export default {
  setup() {
  data() {
    return {

    }
  }
}
      slectData: [],
      scList: [],
      layers: [],
      Area: { house_name: "", tunnel: "", shelf_code: "" },
      mian_height: "",
      infoMsg: [
        { bgcolor: "lightgreen", msg: "空货位", state: 0 },
        { bgcolor: "orange", msg: "有货", state: "Stored" },
        { bgcolor: "#2BB3D5", msg: "执行中", state: "InAssigned" },
        { bgcolor: "#ccc", msg: "禁用", state: "Lock" },
        { bgcolor: "red", msg: "异常", state: "error" },
        { bgcolor: "#b7ba6b", msg: "空托", state: 99 },
      ],
      locationData: [],
    };
  },
  computed: {
    GetBgColor() {
      return (col) => {
        var bgColor = "#b7ba6b";
        //优先显示禁用状态
        if (col.enalbeStatus == 3) {
          this.infoMsg.forEach((el) => {
            if (el.state == "Lock") {
              bgColor = el.bgcolor;
            }
          });
        } else {
          this.infoMsg.forEach((el) => {
            if (
              col.locationStatus == 4 ||
              col.locationStatus == 6 ||
              col.locationStatus == 7
            ) {
              if (el.state == "InAssigned") {
                bgColor = el.bgcolor;
              }
            } else if (col.locationStatus == 2 || col.locationStatus == 3) {
              if (el.state == "Stored") {
                bgColor = el.bgcolor;
              }
            } else if (el.state == col.locationStatus) {
              bgColor = el.bgcolor;
            }
          });
        }
        return bgColor;
      };
    },
  },
  watch: {
    //切换库区
    "Area.shelf_code"(newValue, oldValue) {
      this.scList = [];
      this.layers = [];
      this.slectData.forEach((e) => {
        if (e.areaName == newValue) {
          this.Area.tunnel = e.tunnel[0];
          this.scList = e.tunnel;
          this.Area.layer = "第" + e.layers[0] + "层";
          this.layers = e.layers;
        }
      });
      this.GetViewData();
    },
  },
  methods: {
    getTooltipContent(col) {
      return `状态: ${this.getStatusText(col.locationStatus)}
              å¯ç”¨çŠ¶æ€: ${this.getEnableStatusText(col.enalbeStatus)}
              æ‰˜ç›˜å·: ${col.palletNo || "无"}`;
    },
    getStatusText(status) {
      const statusMap = {
        0: "空闲",
        1: "指定入库",
        2: "有货",
        3: "满货",
        4: "入库中",
        5: "指定出库",
        6: "出库中",
        7: "移库中",
        99: "空托盘",
      };
      return statusMap[status] || "未知状态";
    },
    getEnableStatusText(status) {
      const enableMap = {
        0: "正常",
        1: "只入",
        2: "只出",
        3: "禁用",
      };
      return enableMap[status] || "未知";
    },
    GetViewData() {
      var _this = this;
      this.http
        .post("/api/StockView/GetLocationStockView", {}, "查询中")
        .then((x) => {
          _this.locationData = x.data;
          // console.log("后端返回:", x.data);
          // console.log("返回数据:", _this.locationData);
        });
    },
    // åˆ‡æ¢å †åž›æœº
    SCChange() {
      this.GetViewData();
    },
  },
  mounted() {
    var mainHeight = document.getElementById("vol-main");
    this.mian_height = mainHeight.offsetHeight - 40 + "px";
    var _this = this;
    //加载下拉选项
    this.http
      .get("/api/LocationInfo/GetLocationLayer", {}, "查询中")
      .then((x) => {
        _this.slectData = x;
        //加载第一个区域，第一个堆垛机
        _this.Area.shelf_code = _this.slectData[0].areaName;
        _this.scList = _this.slectData[0].tunnel;
        _this.layers = _this.slectData[0].layers;
      });
    this.GetViewData();
  },
  components: { ElButton },
};
</script>

<style scoped>
.left {
  height: 100%;
  float: left;
  width: 18%;
  /* background: lightblue; */
  padding-top: 20px;
  padding-left: 20px;
}

.right {
  padding: 9px;
  height: 98%;
  overflow-y: auto;
  overflow-x: auto;
  float: left;
  width: 82%;
  padding-top: 5px;
}

.title {
  line-height: 70vh;
  text-align: center;
  font-size: 28px;
  color: orange;
  padding: 5px 0px;
  font-size: 20px;
  font-weight: bold;
  width: 82%;
}

.row_tip {
  font-size: 16px;
  padding-left: 5px;
}

.row {
  overflow: auto;
  margin-bottom: 11px;
}

.item {
  float: left;
  width: 66px;
  height: 38px;
  margin: 3px;
  background-color: lightblue;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
  line-height: 38px;
}

.tipText {
  margin-top: 10px;
}

.btn {
  margin-top: 15px;
}

.infoMsg {
  float: left;
  width: 63px;
  height: 35px;
  margin: 3px;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
  line-height: 38px;
}
</style>

<style>
.el-input {
  width: 180px;
}
</style>