添加货位排图功能

dengjunjie

2025-05-26 d845312bb27972771b566054a906cc25af83e209

添加货位排图功能

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSClient/src/router/viewGird.js

@@ -42,6 +42,10 @@
    name: 'locationInfo',
    component: () => import('@/views/basic/locationInfo.vue')
  }, {
    path: '/locationInfoRow',
    name: 'locationInfoRow',
    component: () => import('@/views/basic/locationInfoRow.vue')
  }, {
    path: '/materielInfo',
    name: 'materielInfo',
    component: () => import('@/views/basic/materielInfo.vue')

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSClient/src/views/basic/locationInfoRow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,385 @@
<template>
  <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>
          <!-- <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 { ElButton } from "element-plus";

export default {
  data() {
    return {
      slectData: [],
      scList: [],
      Area: { house_name: "", tunnel: "", shelf_code: "" },
      mian_height: "",
      infoMsg: [
        { bgcolor: "lightgreen", msg: "空货位", state: 0 },
        { bgcolor: "orange", msg: "有货", state: 100 },
        { bgcolor: "#2BB3D5", msg: "锁定", state: "InAssigned" },
        { bgcolor: "#ccc", msg: "禁用", state: 3 },
        // { bgcolor: "red", 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 > 0 && col.location_state < 100) {
              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_lock === 3) return "禁用";
      if (location.location_state === 0) return "空货位";
      if (location.location_state === 1) return "锁定";
      if (location.location_state === 10) return "有货锁定";
      if (location.location_state === 20) return "空闲锁定";
      if (location.location_state === 99) return "大托盘锁定";
      if (location.location_state === 100) return "有货";
      // if (location.location_state > 0 && location.location_state < 100)
      //   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>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.header {
  text-align: center;
  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>

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/0e979b6f-9ff2-47ad-99d3-7cc8a7e6a04e.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/19d5ae45-3a83-4410-845f-c9171efb0b93.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/5c317bcb-c94b-4bed-9f83-e46eb803dadb.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/64543623-d20f-4ad8-bb49-9a281bd1f5fd.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/652a771c-a3ae-42e9-830b-5ed6ccfb1711.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/75693363-5582-43f5-be32-c05f8e59864c.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/9528bf53-2d7f-4000-b6f7-8c81cee17136.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/98f0b9d5-ff15-4c89-a627-e626a260486c.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/d49d81fa-65e0-4032-aa26-ddf7a5143c09.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/d85656c6-7405-43eb-91ab-044d483b115b.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/dd599f2b-2dfa-4770-8051-fa2d6b46372d.vsidx

Binary files differ

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/.vs/WIDESEA_WMSServer/FileContentIndex/read.lock

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/WIDESEA_DTO/Basic/LocationArea.cs

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,60 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WIDESEA_DTO.Basic
{
    public class LocationArea
    {
        /// <summary>
        /// åº“区名称
        /// </summary>
        public string house_name { get; set; }

        /// <summary>
        /// åº“区编号
        /// </summary>
        public int shelf_code { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public int tunnel { get; set; }
    }


    public class LocationLayer
    {
        public int index { get; set; }
        public List<LocationRow> rows { get; set; }
    }
    public class LocationRow
    {
        public int index { get; set; }
        public List<LocationCol> cols { get; set; }
    }

    public class LocationCol
    {
        public string locationCode { get; set; }
        public int row { get; set; }
        public int layer { get; set; }

        public int index { get; set; }
        /// <summary>
        /// æ£€æµ‹æŸœçŠ¶æ€
        /// </summary>
        public string remark { get; set; }
        /// <summary>
        /// è´§ä½çŠ¶æ€
        /// </summary>
        public int location_state { get; set; }
        /// <summary>
        /// é”å®šçŠ¶æ€
        /// </summary>
        public int location_lock { get; set; }
    }

}

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/WIDESEA_WMSServer/Controllers/Basic/LocationInfoRowController.cs

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,111 @@
using HslCommunication.WebSocket;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using WIDESEA_Common.CommonEnum;
using WIDESEA_Common.LocationEnum;
using WIDESEA_Core;
using WIDESEA_Core.BaseController;
using WIDESEA_Core.Enums;
using WIDESEA_DTO.Basic;
using WIDESEA_IBasicRepository;
using WIDESEA_IBasicService;
using WIDESEA_ISystemRepository;
using WIDESEA_Model.Models;

namespace WIDESEA_WMSServer.Controllers.Basic
{
    /// <summary>
    /// è´§ä½
    /// </summary>
    [Route("api/LocationInfoRow")]
    [ApiController]
    public class LocationInfoRowController : ApiBaseController<ILocationInfoService, Dt_LocationInfo>
    {
        private readonly ILocationInfoRepository _repository;
        private readonly ISys_RoleDataPermissionRepository _permissionRepository;
        private readonly ILocationInfoRepository _locationInfoRepository;
        public LocationInfoRowController(ILocationInfoService service, ILocationInfoRepository repository, ISys_RoleDataPermissionRepository permissionRepository, ILocationInfoRepository locationInfoRepository) : base(service)
        {
            _repository = repository;
            _permissionRepository = permissionRepository;
            _locationInfoRepository = locationInfoRepository;
        }
        /// <summary>
        /// èŽ·å–库区权限
        /// </summary>
        /// <returns></returns>
        [HttpGet, HttpPost, Route("GetArea"), AllowAnonymous]
        public object GetArea()
        {
            List<object> list = new List<object>();
            List<Dt_LocationInfo>? locations = null;
            List<Sys_RoleDataPermission> permissions = _permissionRepository.QueryData(x => x.RoleId == App.User.RoleId);
            if (permissions.Count > 0)
                locations = _locationInfoRepository.QueryData(x => permissions.Select(k => k.WarehouseId).ToList().Contains(x.WarehouseId));
            foreach (var permission in permissions)
            {
                var Rows = locations.Where(x => x.WarehouseId == permission.WarehouseId).GroupBy(x => x.Row).Select(x => x.Key).OrderBy(x => x).ToList();
                var obj = new
                {
                    house_name = permission.WarehouseName,
                    shelf_code = permission.WarehouseId,
                    tunnel = Rows
                };
                list.Add(obj);
            }
            return list;
        }
        /// <summary>
        /// èŽ·å–货位信息
        /// </summary>
        /// <param name="area"></param>
        /// <returns></returns>
        [HttpPost, Route("GetLocationStatu"), AllowAnonymous]
        public object GetLocationStatu([FromBody] LocationArea area)
        {
            List<LocationLayer> layers = new List<LocationLayer>();
            var data = _locationInfoRepository.QueryData(x => x.WarehouseId == area.shelf_code && x.Row == area.tunnel);
            foreach (var layer in data.GroupBy(t => t.Layer))
            {
                var rows = new List<LocationRow>();
                var data_rows = layer.GroupBy(t => t.Row);
                foreach (var data_row in data_rows)
                {
                    var cols = new List<LocationCol>();
                    foreach (var data_col in data_row)
                    {
                        cols.Add(new LocationCol()
                        {
                            //列
                            row = data_col.Row,
                            layer = data_col.Layer,
                            index = data_col.Column,
                            locationCode = data_col.LocationCode,
                            location_state = data_col.LocationStatus,
                            location_lock = data_col.EnableStatus,
                            remark = data_col.Remark
                        });
                    }
                    cols = cols.OrderBy(t => t.index).ToList();
                    rows.Add(new LocationRow()
                    {
                        //行
                        index = data_row.Key,
                        cols = cols
                    });
                }
                rows = rows.OrderBy(t => t.index).ToList();
                layers.Add(new LocationLayer()
                {
                    //层
                    index = layer.Key,
                    rows = rows
                });
            }
            layers = layers.OrderBy(t => t.index).ToList();
            return layers;
        }
    }
}

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSServer/WIDESEA_WMSServer/appsettings.json

@@ -13,7 +13,7 @@
  //连接字符串
  //"ConnectionString": "HTI6FB1H05Krd07mNm9yBCNhofW6edA5zLs9TY~MNthRYW3kn0qKbMIsGp~3yyPDF1YZUCPBQx8U0Jfk4PH~ajNFXVIwlH85M3F~v_qKYQ3CeAz3q1mLVDn8O5uWt1~3Ut2V3KRkEwYHvW2oMDN~QIDXPxDgXN0R2oTIhc9dNu7QNaLEknblqmHhjaNSSpERdDVZIgHnMKejU_SL49tralBkZmDNi0hmkbL~837j1NWe37u9fJKmv91QPb~16JsuI9uu0EvNZ06g6PuZfOSAeFH9GMMIZiketdcJG3tHelo=",
  //"ConnectionString": "Data Source=.;Initial Catalog=WIDESEAWMS_HUAIAN;User ID=sa;Password=P@ssw0rd;Integrated Security=False;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False",
  "ConnectionString": "Data Source=.;Initial Catalog=WIDESEAWMS_HUAIAN;User ID=sa;Password=123456;Integrated Security=False;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False",
  "ConnectionString": "Data Source=.;Initial Catalog=WIDESEAWMS_HUAIAN;User ID=sa;Password=P@ssw0rd;Integrated Security=False;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False",
  //"ConnectionString": "Data Source=10.30.4.92;Initial Catalog=WMS_TC;User ID=sa;Password=duo123456;Integrated Security=False;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False",
  //旧WMS数据库连接
  //"TeConnectionString": "Data Source=10.30.4.92;Initial Catalog=TeChuang;User ID=sa;Password=duo123456;Integrated Security=False;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False",