udiwms-vue-frame/src/views/basic/workplace/rackManage.vue

<template>
<div>
  <div style="padding: 20px">
    <!-- 下拉框 -->
    <el-select v-model="freightQuery.workPlaceIdFk" @change="handleSelectChange" placeholder="请选择工位" >
      <el-option
        v-for="item in options"
        :key="item.workplaceName"
        :label="item.workplaceName"
        :value="item.workplaceId">
        <span style="float: left">{{ item.workplaceName }}</span>
      </el-option>
    </el-select>

    <el-divider/>


    <div class="shelf-container">
      <div class="shelf">
        <div v-for="(row, rowIndex) in freightList" :key="rowIndex" class="shelf-row">
            <div
              v-for="(slot, slotIndex) in row.sysWorkplaceFreightList"
              :key="slot.id"
              class="shelf-slot"
              @click="handleClick(slot)"
            >
              <el-card class="slot-card">
                <p>{{ slot.name }}</p>
              </el-card>
            </div>

        </div>
      </div>
    </div>

  </div>
  <!--<el-button-group style="display: flex;margin: 0px 0 10px 90%; ">-->
  <!--  <el-button type="primary" @click.native="saveTest()">测试货架组件</el-button>-->
  <!--</el-button-group>-->
  <el-dialog
    title="查看取货架"
    :visible.sync="ShelfDisplayFlag"
    width="75%"
    v-if="ShelfDisplayFlag"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <ShelfDisplay
      :shelfData="this.layerList"
      @slot-click="handleSlotClick"
      :freightCode="freightCode"
    >
    </ShelfDisplay>
  </el-dialog>
</div>
</template>

<script>
import ShelfDisplay from "@/components/ShelfDisplay";
import { getWorkplaceFreightViewList } from '@/api/basic/workPlace/SysWorkplaceFreight'
import { getListByFreightCodeView } from '@/api/basic/workPlace/SysWorkplaceLayer'
import {listPage } from '@/api/basic/workPlace/sysWorkplaceManage'
export default {
  components:{ShelfDisplay},
  data() {
    return {
      query: {
        workplaceStatus: 1,
        workPlaceClass: 2,
        deptCode: this.$store.getters.locDeptCode
      },
      options: [
      ],
      ShelfDisplayFlag: false,
      shelfData:[

      ],
      freightList:[

      ],
      layerList:[],
      list:[],
      freightQuery: {
        // page: 1,
        // limit: 10,
        workPlaceIdFk: null,
        key: "",
        // code: null,
        // workplaceStatus: 1,
        // workPlaceClass: 2,
        // deptCode: this.$store.getters.locDeptCode
      },
      freightCode: '',
    }
  },
  methods: {
    getList() {
      listPage(this.query).then(res => {
        if (res.code != 20000) {
          return this.$message.error(res.message)
        }
        this.options = res.data.list || []
        this.getFreightList()
      })
    },
    handleSelectChange(event) {
      // 调用方法获列表
      this.getFreightList();
    },
    handleSlotClick(slot) {
      // 在这里处理被点击的货位信息
      console.log('被点击的货位:', slot);
      // 你可以根据需要执行其他操作，例如更新父组件的状态或导航到另一个
    },
    getFreights(){
      let query = {
        freightCode:  this.freightCode
      }
      getListByFreightCodeView(query).then(res => {
        this.layerList = res.data
      })
    },
    getFreightList(){

      if(this.freightQuery.workPlaceIdFk == null){
        if (this.options.length > 0){
          this.freightQuery.workPlaceIdFk = this.options[0].workplaceId
        }else return;
      }
      getWorkplaceFreightViewList(this.freightQuery).then(res => {
        if (res.code == 20000){
          this.freightList = res.data || []
        }else {
          this.freightList = []
        }
      })

    },
    handleClick(info){
      this.freightCode = info.code
      this.ShelfDisplayFlag = true
      this.getFreights()
    },
  },
  mounted() {
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.shelf-container {
  width: 100%;
  margin: auto;
}

.shelf {
  perspective: 1000px; /* 添加透视效果 */
}

.shelf-row {
  display: flex;
  flex-wrap: wrap; /* 允许行内元素在必要时换行 */
  margin-bottom: 40px; /* 增加行与行之间的间距 */
  padding: 10px; /* 为行内容增加内边距 */
  /* 使用线性渐变创建从白色到蓝色的背景 */
  background: linear-gradient(to bottom, #e6f7ff, #d1e8fd);
  border: 1px solid #ccc; /* 可选：为行添加边框 */
  border-radius: 5px; /* 可选：为行的角落添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：为行添加阴影效果以增强立体感 */
}
.shelf-row > div:first-child {

}


.shelf-row .left-div {
  flex-basis: 5%; /* 或者使用 width: 5%;，但 flex-basis 在 Flexbox 中更常用 */
  display: flex; /* 如果需要垂直居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如果需要的话 */
  /* 其他样式，如内边距、边框等 */
  color: red;
  font-weight: bold;
  width: 150px; /* 设置一个具体的宽度 */
  margin-right: 20px; /* 添加右边距 */
}

.shelf-row .right-div {
  flex-grow: 1; /* 占据剩余的空间 */
  /* 其他样式，如背景、内边距、边框等 */
  display: flex; /* 如果内部有子元素需要 Flexbox 布局 */
  flex-direction: column; /* 如果内部子元素需要垂直排列 */
  /* 根据需要添加更多样式 */
}


.shelf-slot {
  margin-right: 10px; /* 增加槽位之间的间距 */
  margin-bottom: 10px; /* 增加槽位之间的间距 */
  width: 150px; /* 固定槽位宽度 */
  height: 100px; /* 固定槽位高度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 水平居中 */
  transition: transform 0.3s ease; /* 平滑的过渡效果 */
  transform-style: preserve-3d; /* 保持3D变换的子元素在3D空间中 */
  perspective: 800px; /* 设置透视效果，模拟3D深度 */
  z-index: 10;
}

.shelf-slot:hover {
  z-index: 25;
  transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1.1); /* 悬停时应用3D变换和放大效果 */
}
.slot-card {
  width: 100%; /* 确保卡片宽度与槽位一致 */
  height: 100%; /* 确保卡片高度与槽位一致 */
  box-sizing: border-box; /* 确保宽度和高度包含内边距和边框 */
  /* 应用从白色到淡淡绿色的线性渐变背景 */
  background: linear-gradient(to bottom, white, #d4edda);
  /* #d4edda 是一个浅绿色，接近于 Bootstrap 中的成功提示背景色 */
  border-radius: 4px; /* 可选：为卡片添加圆角，使其看起来更柔和 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：为卡片添加阴影，增加立体感 */
}

</style>