JG-CLIENT-TEMP/src/views/storage-change/index.vue

<template>
  <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>
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";

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>