From ede56027e9a252ca1b1f9577a9f88a9d4fc375d6 Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Fri, 17 Jan 2025 11:51:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8D=AF=E6=88=BF=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../basic/workPlace/SysWorkplaceFreight.js    |   9 +
 src/views/basic/workplace/rackManage.vue      | 247 +++++++++++-------
 2 files changed, 156 insertions(+), 100 deletions(-)

diff --git a/src/api/basic/workPlace/SysWorkplaceFreight.js b/src/api/basic/workPlace/SysWorkplaceFreight.js
index 05e1c748..1ac6246e 100644
--- a/src/api/basic/workPlace/SysWorkplaceFreight.js
+++ b/src/api/basic/workPlace/SysWorkplaceFreight.js
@@ -18,6 +18,15 @@ export function getWorkplaceFreightList(query) {
 }
 
 
+export function getWorkplaceFreightViewList(query) {
+  return axios({
+    url: "/udiwms/WorkplaceFreight/getListView",
+    method: "get",
+    params: query
+  });
+}
+
+
 export function deleteFreight(query) {
   return axios({
     url: "/udiwms/WorkplaceFreight/deleteById",
diff --git a/src/views/basic/workplace/rackManage.vue b/src/views/basic/workplace/rackManage.vue
index 85462a9a..f8f19695 100644
--- a/src/views/basic/workplace/rackManage.vue
+++ b/src/views/basic/workplace/rackManage.vue
@@ -1,27 +1,38 @@
 <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/>
-    <el-row :gutter="8" style="height: 50%">
-      <el-col v-for="(info, index)  in freightList"  :key="index" :xs="12" :sm="8" :md="8" :lg="6">
-        <el-card :body-style="{margin:'20px'}"
-                 style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
-        >
-
-
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 20px; /* 约为 200px 的 1/3 */" >
-            <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">工位:{{ info.workPlaceName }}</p> <!-- 假设你的信息对象中包含一个title属性 -->
-          </div>
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 66px; /* 约为 200px 的 1/3 */" >
-            <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">编码:{{ info.code }}</p> <!-- 假设你的信息对象中包含一个title属性 -->
-          </div>
-          <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"  >
-            <p style="font-size: 14px;background-color: #e1f3fb;" >{{ info.remark }}</p>
-            <el-button type="primary" style="position: absolute; bottom: 6px; right: 20px;" icon="el-icon-thumb" @click="handleClick(info)">查看取货架</el-button>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
+
+
+    <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>-->
@@ -46,103 +57,56 @@
 
 <script>
 import ShelfDisplay from "@/components/ShelfDisplay";
-import { getWorkplaceFreightList } from '@/api/basic/workPlace/SysWorkplaceFreight'
+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:[
-        {
-          id: 1,
-          height: 50,
-          sysWorkplaceQueues: [
-            { id: 1, code: 'Item A1' ,red:0,green:0,blue:0,orange:1 },
-            { id: 2, code: 'Item A2' ,red:0,green:0,blue:0,orange:1 },
-            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
-          ]
-        },
-        {
-          row: 2,
-          height: 80,
-          sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
-            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
-            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-          ]
-        },
-        {
-          row: 3,
-          height: 80,
-          sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
-            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
-            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3',red:0,green:0,blue:0,orange:1 },
-          ]
-        },
-        {
-          row: 6,
-          height: 80,
-          sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
-            { id: 2, code: 'Item B2',red:0,green:0,blue:0,orange:1 },
-            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 4, code: 'Item 4' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-          ]
-        },
-        {
-          row: 5,
-          height: 200,
-          sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1',red:0,green:0,blue:0,orange:1  },
-            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3',red:0,green:0,blue:0,orange:1  },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-          ]
-        },
-        {
-          row: 4,
-          height: 80,
-          sysWorkplaceQueues: [
-            { id: 1, code: 'Item B1' ,red:0,green:0,blue:0,orange:1 },
-            { id: 2, code: 'Item B2' ,red:0,green:0,blue:0,orange:1 },
-            { id: 3, code: 'Item 3' ,red:0,green:0,blue:0,orange:1  },
-            { id: 4, code: 'Item 4',red:0,green:0,blue:0,orange:1 },
-            { id: 5, code: 'Item 3' ,red:0,green:0,blue:0,orange:1 },
-          ]
-        },
+
+      ],
+      freightList:[
+
       ],
       layerList:[],
+      list:[],
       freightQuery: {
-        page: 1,
-        limit: 10,
-        workPlaceIdFk: "",
+        // page: 1,
+        // limit: 10,
+        workPlaceIdFk: null,
         key: "",
         // code: null,
         // workplaceStatus: 1,
         // workPlaceClass: 2,
         // deptCode: this.$store.getters.locDeptCode
       },
-      freightList:[],
       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);
@@ -157,13 +121,20 @@ export default {
       })
     },
     getFreightList(){
-      getWorkplaceFreightList(this.freightQuery).then(res => {
+
+      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.list || []
+          this.freightList = res.data || []
         }else {
           this.freightList = []
         }
       })
+
     },
     handleClick(info){
       this.freightCode = info.code
@@ -171,12 +142,88 @@ export default {
       this.getFreights()
     },
   },
+  mounted() {
+  },
   created() {
-    this.getFreightList()
+    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>