|
|
<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 style="font-size: 12px;fontWeight: bold">{{ slot.name }}</p>
|
|
|
<div
|
|
|
v-for="(row, rowIndex) in slot.sysWorkplaceQueueList"
|
|
|
:key="rowIndex"
|
|
|
:style="{ display: 'flex', flexWrap: 'nowrap', height: `10px`,marginTop: `2px` }"
|
|
|
>
|
|
|
<div
|
|
|
v-for="(slot, slotIndex) in row.sysWorkplaceQueues"
|
|
|
:key="slot.id"
|
|
|
class="shelf-slot-Queue"
|
|
|
:style="{ width: `${180 / row.sysWorkplaceQueues.length}%` , height: `10px`, backgroundColor: slot.reCount <= 0? 'red': slot.reCount <= slot.remindCount?'orange':'green' }"
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <span :style="{-->
|
|
|
<!-- color: slot.reCount <= 0 ?'orange':'green' ,-->
|
|
|
<!-- fontSize: '12px',-->
|
|
|
<!-- fontWeight: 'bold',-->
|
|
|
<!-- position: 'absolute',-->
|
|
|
<!-- bottom: 0,-->
|
|
|
<!-- right: 0,-->
|
|
|
<!-- margin: '10px'-->
|
|
|
<!-- }">{{ slot.reCount <= 0 ?'低库存':'正常' }}-->
|
|
|
<!-- </span>-->
|
|
|
</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=this.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"
|
|
|
:freightName="freightName"
|
|
|
>
|
|
|
</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:[],
|
|
|
title:"",
|
|
|
freightQuery: {
|
|
|
// page: 1,
|
|
|
// limit: 10,
|
|
|
workPlaceIdFk: null,
|
|
|
key: "",
|
|
|
// code: null,
|
|
|
// workplaceStatus: 1,
|
|
|
// workPlaceClass: 2,
|
|
|
// deptCode: this.$store.getters.locDeptCode
|
|
|
},
|
|
|
freightCode: '',
|
|
|
freightName: '',
|
|
|
}
|
|
|
},
|
|
|
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.title = info.name
|
|
|
this.freightCode = info.code
|
|
|
this.freightName = info.name
|
|
|
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: 200px; /* 固定槽位宽度 */
|
|
|
height: 200px; /* 固定槽位高度 */
|
|
|
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-Queue {
|
|
|
margin: 2px;
|
|
|
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: 66;
|
|
|
}
|
|
|
|
|
|
.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); /* 可选：为卡片添加阴影，增加立体感 */
|
|
|
position: relative; /* 为了让内部的绝对定位元素相对于卡片定位 */
|
|
|
}
|
|
|
</style>
|
