9 changed files with 527 additions and 28 deletions
-
20public/webA/index.js
-
BINsrc/assets/images/panel-n.png
-
BINsrc/assets/images/panel-y.png
-
30src/views/archivesManage/caseManage/caseList/index.vue
-
20src/views/storeManage/warehouse3D/archivesStorage/index.vue
-
247src/views/storeManage/warehouse3D/deseCabinet/data.json
-
228src/views/storeManage/warehouse3D/deseCabinet/index.vue
-
4src/views/storeManage/warehouse3D/index.vue
|
After Width: 165 | Height: 710 | Size: 23 KiB |
|
After Width: 165 | Height: 710 | Size: 24 KiB |
@ -0,0 +1,247 @@ |
|||
{ |
|||
"totalData": 36, |
|||
"leftData":[ |
|||
{ |
|||
"outNum": 1, |
|||
"inNum": 2 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 10 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 30, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
} |
|||
], |
|||
"rightData":[ |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 1, |
|||
"inNum": 2 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 15, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
}, |
|||
{ |
|||
"outNum": 0, |
|||
"inNum": 0 |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,228 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="cabinet-top"> |
|||
<p class="cabinet-info">密集架1号机 - 1区 - {{ cabinetNum }} 列</p> |
|||
<div class="cabinet-des"> |
|||
<p>档案总数：{{ total }}</p> |
|||
<span class="cabinet-on">在库</span> |
|||
<span class="cabinet-out">已借</span> |
|||
<el-button type="primary" class="return-btn" @click="backWarehouse">3D</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="cabinet-main"> |
|||
<ul class="cabinet-row"> |
|||
<li v-for="(item,index) in left" :key="index" class="cabinet-cell"> |
|||
<!-- 部分借出 --> |
|||
<div v-if="item.outNum !== 0 && item.inNum !== 0" class="out-part"> |
|||
<span>{{ item.outNum }}</span> |
|||
</div> |
|||
<!-- 部分在库 --> |
|||
<div v-if="item.outNum !== 0 && item.inNum !== 0" class="in-part"> |
|||
<span>{{ item.inNum }}</span> |
|||
</div> |
|||
<!-- 全部借出 --> |
|||
<div v-if="item.outNum !== 0 && item.inNum === 0" class="out-all"> |
|||
<span>{{ item.outNum }}</span> |
|||
</div> |
|||
<!-- 全部在库 --> |
|||
<div v-if="item.outNum === 0 && item.inNum !== 0" class="in-all"> |
|||
<span>{{ item.inNum }}</span> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
<div :class="['cabinet-panel', isFixed ? 'fixed-panel' : '']" /> |
|||
<ul class="cabinet-row"> |
|||
<li v-for="(item,index) in right" :key="index" class="cabinet-cell"> |
|||
<!-- 部分借出 --> |
|||
<div v-if="item.outNum !== 0 && item.inNum !== 0" class="out-part"> |
|||
<span>{{ item.outNum }}</span> |
|||
</div> |
|||
<!-- 部分在库 --> |
|||
<div v-if="item.outNum !== 0 && item.inNum !== 0" class="in-part"> |
|||
<span>{{ item.inNum }}</span> |
|||
</div> |
|||
<!-- 全部借出 --> |
|||
<div v-if="item.outNum !== 0 && item.inNum === 0" class="out-all"> |
|||
<span>{{ item.outNum }}</span> |
|||
</div> |
|||
<!-- 全部在库 --> |
|||
<div v-if="item.outNum === 0 && item.inNum !== 0" class="in-all"> |
|||
<span>{{ item.inNum }}</span> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="cabinet-bottom"> |
|||
<el-button type="primary" :disabled="isFixed">开架</el-button> |
|||
<el-button type="primary">合架</el-button> |
|||
<el-button type="primary">通风</el-button> |
|||
<el-button type="primary">停止</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import data from './data.json' |
|||
export default { |
|||
name: 'DeseCabinet', |
|||
data() { |
|||
return { |
|||
cabinetNum: null, // 当前列num |
|||
isFixed: false, // 是否是固定列 |
|||
total: null, // 档案总数 |
|||
left: [], // 左侧 |
|||
right: [] // 右侧 |
|||
} |
|||
}, |
|||
created() { |
|||
this.getData() |
|||
}, |
|||
mounted() { |
|||
if (parseInt(localStorage.getItem('cabinetNum'))) { |
|||
this.cabinetNum = parseInt(localStorage.getItem('cabinetNum')) |
|||
this.isFixed = this.cabinetNum === 10 |
|||
} else { |
|||
this.cabinetNum = 0 |
|||
} |
|||
}, |
|||
methods: { |
|||
getData() { |
|||
this.total = data.totalData |
|||
this.left = data.leftData |
|||
this.right = data.rightData |
|||
}, |
|||
// 返回3D库房 |
|||
backWarehouse() { |
|||
this.$router.push('/storeManage/warehouse3D') |
|||
localStorage.setItem('isDeseCabinetPage', true) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.cabinet-top{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: calc(100vw - 354px); |
|||
margin: 0 auto 20px auto; |
|||
font-size: 14px; |
|||
line-height: 36px; |
|||
color: #fff; |
|||
.cabinet-info{ |
|||
font-weight: bold; |
|||
} |
|||
.cabinet-des{ |
|||
display: flex; |
|||
p{ |
|||
margin-right: 40px; |
|||
} |
|||
span{ |
|||
position: relative; |
|||
padding-left: 20px; |
|||
margin-right: 40px; |
|||
&::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
width: 14px; |
|||
height: 14px; |
|||
border-radius: 50%; |
|||
margin-top: -7px; |
|||
} |
|||
} |
|||
.cabinet-on::before{ |
|||
background-color: #1AAE93; |
|||
} |
|||
.cabinet-out::before{ |
|||
background-color: #F65163; |
|||
} |
|||
} |
|||
} |
|||
.return-btn, |
|||
.cabinet-bottom .el-button{ |
|||
font-size: 16px; |
|||
height: 36px; |
|||
padding: 0 33px; |
|||
background-color: #339CFF; |
|||
} |
|||
.cabinet-main{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: calc(100vw - 344px); |
|||
height: calc(100vh - 322px); |
|||
margin: 0 auto; |
|||
overflow: hidden; |
|||
} |
|||
.cabinet-row{ |
|||
display: flex; |
|||
flex: 1; |
|||
flex-wrap: wrap; |
|||
color: #fff; |
|||
text-align: center; |
|||
.cabinet-cell{ |
|||
width: calc(100%/5 - 10px); |
|||
height: calc(100%/6 - 10px); |
|||
margin: 0 10px 10px 0; |
|||
font-size: 20px; |
|||
background-color: #02255F; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
&:nth-last-of-type(-n+5) { |
|||
margin-bottom: 0; |
|||
} |
|||
&:nth-child(5n){ |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
.in-all, .out-all, .out-part, .in-part{ |
|||
position: relative; |
|||
width: 100%; |
|||
span{ |
|||
display: block; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
z-index: 9; |
|||
} |
|||
} |
|||
.in-all, .out-all{ |
|||
height: 100%; |
|||
} |
|||
.out-part, .in-part{ |
|||
height: 50%; |
|||
} |
|||
.out-all, .out-part{ |
|||
background-color: #F65163; |
|||
} |
|||
.in-all, .in-part{ |
|||
background-color: #1AAE93; |
|||
} |
|||
} |
|||
.cabinet-panel{ |
|||
width: 140px; |
|||
margin-right: 10px; |
|||
background: url('~@/assets/images/panel-n.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.fixed-panel{ |
|||
background: url('~@/assets/images/panel-y.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.cabinet-bottom{ |
|||
text-align: center; |
|||
margin: 30px 0; |
|||
::v-deep .is-disabled{ |
|||
color: #13439E; |
|||
background-color: #02255F; |
|||
border-color: #02255F; |
|||
} |
|||
} |
|||
@media screen and (min-width:1200px) and (max-width:1536px){ |
|||
.cabinet-panel{ |
|||
width: 92px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue