1.调仓页面。

src/api/storage/change.ts

@@ -0,0 +1,45 @@
+import request from "@/utils/request";
+
+export interface StacInfo {
+  houseName?: string;
+  houseNo?: string;
+  xNum?: number;
+  yNum?: number;
+}
+
+export interface StackObj {
+  area?: string;
+  coordinate?: string; //	储位坐标
+  currentLayer?: number; //当前使用层数
+  deptId?: string;
+  enable?: number;
+  houseName?: string;
+  houseNo?: string;
+  id?: string;
+  layer?: number; //	可使用层数
+  lineId?: string;
+  lineNo?: string;
+  locationNo?: string;
+  lockState?: number;
+  materialType?: string;
+  name?: string;
+  orgId?: string;
+  size?: string;
+  state?: number; //	储位状态；0-空闲；1-半载； 2-满载
+  type?: number; //	储位类型 1 线边仓 2 干燥柜 3 货架
+}
+
+export enum StackState {
+  NORMALE = 0, // 正常情况下
+  SELECT_OUT = 1, // 选择调出
+  SELECT_IN = 2, // 选择调入
+}
+
+// 线边仓配置查询
+export function getStackInfo(data?: any) {
+  return request({
+    url: "/api/v1/wms/position/lineStockInfo",
+    method: "get",
+    data,
+  });
+}

src/views/storage-change/car.vue

@@ -0,0 +1,29 @@
+<template>
+  <transition name="slide">
+    <div :style="{ top: boxTop, left: boxLeft }" class="car">车</div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+const responseData = ref({ x: 100, y: 0 });
+
+// 计算属性，根据返回的数据动态计算子盒子的位置
+const boxTop = computed(() => `${responseData.value.y}px`);
+const boxLeft = computed(() => `${responseData.value.x}px`);
+
+setInterval(() => {
+  responseData.value.x += 20;
+  // responseData.value.y += 5
+}, 500);
+</script>
+
+<style lang="scss" scoped>
+.car {
+  width: 95px;
+  height: 95px;
+  background-color: rgba(255, 55, 255, 0.5);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

src/views/storage-change/index.vue

@@ -1,7 +1,163 @@
 <template>
-  <div>src/views/storage-change /index</div>
+  <div class="stack-container">
+    <!--    左侧按钮-->
+    <el-button class="start-btn" type="primary" @click="handleStart"
+      >开始调仓
+    </el-button>
+    <!--    中间仓储变动图表-->
+    <div>
+      <div class="layout-top">
+        <div class="index-box">
+          <span class="x-label">x</span>
+          <span class="y-label">y</span>
+        </div>
+        <div
+          v-for="xIndex in stackInfo.xNum"
+          :key="xIndex + 'x'"
+          class="index-box"
+        >
+          <span class="x" v-text="xIndex"></span>
+        </div>
+      </div>
+      <div class="stack-center-layout">
+        <div class="layout-left">
+          <div
+            v-for="yIndex in stackInfo.yNum"
+            :key="yIndex + 'y'"
+            class="index-box"
+          >
+            <span class="y" v-text="yIndex"></span>
+          </div>
+        </div>
+        <div class="stack-list-layout">
+          <StackContainer
+            v-for="(stack, index) in dataList"
+            :key="index"
+            v-bind="stack"
+          />
+          <Car v-if="false" />
+        </div>
+      </div>
+    </div>
+    <!--    右侧调仓功能-->
+    <div>youce</div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { getStackInfo, StacInfo, StackState } from "@/api/storage/change.js";
+import StackContainer from "@/views/storage-change/stackContainer.vue";
+import Car from "@/views/storage-change/car.vue";
 
-<style lang="scss" scoped></style>
+const stackInfo = ref<StacInfo>({}); // 不包含list的仓储信息
+const dataList = ref<any[]>([]);
+
+const width = ref<string>(`0px`);
+const height = ref<string>(`0px`);
+
+onMounted(async () => {
+  const res: any = await getStackInfo();
+  dataList.value = res.data.positions;
+  Reflect.deleteProperty(res.data, "positions");
+  stackInfo.value = res.data as StacInfo;
+
+  // 用于动态设置grid的宽高
+  width.value = `${stackInfo.value.xNum! * 96}px`;
+  height.value = `${stackInfo.value.yNum! * 95}px`;
+});
+
+// ======================== 左侧按钮事件 ==========
+const changeState = ref<StackState>(StackState.NORMALE);
+const handleStart = () => {
+  console.log("开始调仓");
+  changeState.value = StackState.SELECT_OUT;
+  setTimeout(() => {
+    changeState.value = StackState.SELECT_IN;
+  }, 2000);
+};
+provide("changeState", changeState);
+// ========== 右侧调仓功能 ==========
+</script>
+
+<style lang="scss" scoped>
+.stack-container {
+  border: 1px solid #ccc;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.stack-center-layout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.layout-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.layout-top {
+  display: flex;
+  justify-content: end;
+  align-items: end;
+}
+
+.index-box {
+  width: 96px;
+  height: 95px;
+  font-weight: 500;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.2);
+  position: relative;
+
+  .y {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+
+  .x {
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+  }
+
+  .x-label {
+    position: absolute;
+    bottom: 19px;
+    right: 5px;
+  }
+
+  .y-label {
+    position: absolute;
+    right: 20px;
+    bottom: 5px;
+  }
+}
+
+.stack-list-layout {
+  width: v-bind("width");
+  height: v-bind("height");
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 95px);
+  grid-auto-rows: 95px;
+  grid-gap: 0; /* 设置元素之间的间距 */
+  position: relative;
+}
+
+.start-btn {
+  width: 292px;
+  height: 80px;
+  background: #0a59f7;
+  border-radius: 40px;
+
+  font-weight: 500;
+  font-size: 24px;
+  color: #ffffff;
+}
+</style>

src/views/storage-change/stackBorder.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="border-box">
+    <div class="top"></div>
+    <div class="right"></div>
+    <div class="bottom"></div>
+    <div class="left"></div>
+    <div class="center">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.border-box {
+  width: 95px;
+  height: 95px;
+  position: relative;
+
+  padding: 4px;
+}
+
+.top {
+  position: absolute;
+  top: 0;
+  left: 4px;
+  width: 87px;
+  height: 1px;
+  background-color: #7dc8ea;
+}
+
+.right {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 1px;
+  height: 87px;
+  background-color: #7dc8ea;
+}
+
+.bottom {
+  position: absolute;
+  bottom: 0;
+  left: 4px;
+  width: 87px;
+  height: 1px;
+
+  background-color: #7dc8ea;
+}
+
+.left {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  width: 1px;
+  height: 87px;
+  background-color: #7dc8ea;
+}
+
+.center {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 87px;
+  height: 87px;
+  border: 1px solid #7dc8ea;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+  font-size: 38px;
+  color: rgba(0, 0, 0, 0.9);
+}
+</style>

src/views/storage-change/stackContainer.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <StackBorder>
+      <!--      如果调出有值-->
+      <svg-icon
+        v-if="test === '1'"
+        class="svgStyle"
+        icon-class="ESOP"
+        size="85"
+      />
+      <!--      如果调入有值-->
+      <svg-icon
+        v-else-if="test === '2'"
+        class="svgStyle"
+        icon-class="jiaoliao"
+        size="85"
+      />
+      <div v-else :class="['count', getClassByState()]">
+        {{ currentLayer === 0 ? "" : currentLayer }}
+      </div>
+    </StackBorder>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import StackBorder from "./stackBorder.vue";
+import { StackObj, StackState } from "@/api/storage/change";
+
+const props = defineProps<StackObj>();
+
+const state = inject("changeState");
+
+let dic = document.getElementById("dic");
+
+const test = ref("3"); //todu: 待删除,
+
+const getClassByState = () => {
+  // 如果正在选择调出，currentLayer大于0的显示为enable，否则显示为disable
+  // 如果正在选择调入，layer为0的显示为disable，否则显示为enable
+  if (state.value === StackState.SELECT_OUT) {
+    return props?.currentLayer > 0 ? "enable" : "disable";
+  } else if (state.value === StackState.SELECT_IN) {
+    return props?.layer === 0 ? "disable" : "enable";
+  }
+  return "normal";
+};
+</script>
+
+<style lang="scss" scoped>
+.count {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.normal {
+  background-color: #f5f5f5;
+}
+
+.enable {
+  background-color: #64bb5c;
+}
+
+.disable {
+  background-color: #d9dbdd;
+}
+</style>