You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
11 KiB
351 lines
11 KiB
<template>
|
|
<div class="app-container">
|
|
<div class="venue-header">
|
|
<h4 @click="handleToRegions"><i class="iconfont icon-shuju" />数据总览</h4>
|
|
<p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p>
|
|
</div>
|
|
<div class="venue-content">
|
|
<crudOperation :permission="permission">
|
|
<template v-slot:middle>
|
|
<el-button v-permission="permission.add" size="mini" @click="crud.toAdd">
|
|
<i class="iconfont icon-shengchengpandiandan" />
|
|
全量盘点
|
|
</el-button>
|
|
</template>
|
|
<template v-slot:right>
|
|
<el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)">
|
|
<i class="iconfont icon-daochu" />
|
|
导出
|
|
</el-button>
|
|
</template>
|
|
</crudOperation>
|
|
<div class="venue-left">
|
|
<div class="container-right tab-content">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<ul class="tab-nav">
|
|
<li v-for="(item,index) in floorOptions" :key="index" :class="{ 'active-tab-nav': tabIndex == index }" @click="changeActiveTab(index)">{{ item.floorName }}<i /></li>
|
|
<!-- 最右侧装饰img -->
|
|
<span class="tab-right-img" />
|
|
</ul>
|
|
<div class="total-data">
|
|
<span>楼层概况</span>
|
|
<p>区域：1</p>
|
|
<p>书架：4</p>
|
|
<p>摄像头：12</p>
|
|
</div>
|
|
<CanvasPreview ref="previewRefs" page-preview="floor" :current-mark-data="currentMarkData" :image-url="imageUrl" />
|
|
</div>
|
|
</div>
|
|
<div class="venue-right">
|
|
<div class="lib-right-item lib-info">
|
|
<h4>场馆概况</h4>
|
|
<ul class="data-right-list">
|
|
<li><p>楼层</p><span><i>5</i>层</span></li>
|
|
<li><p>区域</p><span><i>25</i>层</span></li>
|
|
<li><p>书架</p><span><i>100</i>层</span></li>
|
|
<li><p>摄像头</p><span><i>300</i>层</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="lib-right-item">
|
|
<h4>盘点概况</h4>
|
|
<div class="refresh-date">2024-11-28 09:46</div>
|
|
<ul class="data-right-list">
|
|
<li><p>在架</p><span><i>15000</i>册</span></li>
|
|
<li><p>错架</p><span><i>300</i>层</span> <span class="percentage">（2.00%）</span></li>
|
|
<li><p>错序</p><span><i>0</i>层</span><span class="percentage">（0.00%）</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="lib-right-item">
|
|
<h4>流通统计</h4>
|
|
<div class="refresh-date">2024-11-28 09:46</div>
|
|
<bookSwiper />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- form -->
|
|
<el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
|
|
<el-form-item label="盘点单号" prop="taskName">
|
|
<el-input v-model="form.taskName" />
|
|
</el-form-item>
|
|
<el-form-item label="盘点类型" prop="taskType">
|
|
<el-input v-model="form.taskType" />
|
|
</el-form-item>
|
|
<el-form-item label="目标位置" prop="location">
|
|
<el-input v-model="form.location" />
|
|
</el-form-item>
|
|
<el-form-item label="目标数量" prop="number">
|
|
<el-input v-model="form.number" />
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="form.remark" type="textarea" style="width: 572px;" :rows="4" />
|
|
</el-form-item>
|
|
</el-row>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchInitLibraryRegionList } from '@/api/area/index'
|
|
import crudFloor from '@/api/floor/index'
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
|
import crudOperation from '@crud/CRUD.operation'
|
|
import { mapGetters } from 'vuex'
|
|
import defaultImg from '@/assets/images/system/default-img.jpg'
|
|
import bookSwiper from '@/views/components/bookSwiper.vue'
|
|
import CanvasPreview from '@/views/components/canvasPreview.vue'
|
|
|
|
const defaultForm = { id: null, taskType: null, taskName: null, location: null, number: null, remark: null }
|
|
export default {
|
|
name: 'DataScreening',
|
|
components: { crudOperation, bookSwiper, CanvasPreview },
|
|
cruds() {
|
|
return CRUD({ title: '数据总览', url: 'api/libraryFloor/initLibraryFloorList', crudMethod: { ...crudFloor }, sort: [], optShow: {
|
|
add: false,
|
|
edit: false,
|
|
del: false,
|
|
download: false,
|
|
group: false,
|
|
reset: false
|
|
}})
|
|
},
|
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
|
data() {
|
|
const _this = this
|
|
return {
|
|
floorOptions: [],
|
|
tabIndex: 0,
|
|
defaultImg: defaultImg,
|
|
imageUrl: defaultImg,
|
|
imageRegionUrl: defaultImg,
|
|
currentMarkData: null,
|
|
allCoverData: [],
|
|
swiperActiveIndex: 0,
|
|
rightDataIndex: null,
|
|
swiperOptionContent: {
|
|
slidesPerView: 'auto',
|
|
on: {
|
|
slideChangeTransitionStart: function() {
|
|
_this.rightDataIndex = null
|
|
_this.swiperActiveIndex = this.activeIndex
|
|
_this.swiperTitle.slideTo(this.activeIndex, 500, false)
|
|
}
|
|
}
|
|
},
|
|
swiperOptionTitle: {
|
|
slidesPerView: 'auto',
|
|
freeMode: true
|
|
},
|
|
tabListData: [{ name: '热门图书' }, { name: '热门架位' }, { name: '冷面图书' }],
|
|
permission: {
|
|
add: ['admin', 'floor:add'],
|
|
edit: ['admin', 'floor:edit'],
|
|
del: ['admin', 'floor:del']
|
|
},
|
|
rules: {
|
|
taskName: [
|
|
{ required: true, message: '请输入盘点单号', trigger: 'blur' }
|
|
],
|
|
taskType: [
|
|
{ required: true, message: '请输入盘点类型', trigger: 'blur' }
|
|
],
|
|
location: [
|
|
{ required: true, message: '请输入目标位置', trigger: 'blur' }
|
|
],
|
|
number: [
|
|
{ required: true, message: '请输入目标数量', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user',
|
|
'baseApi'
|
|
]),
|
|
swiperContent() {
|
|
return this.$refs.swiperContent.$el.swiper
|
|
}
|
|
},
|
|
methods: {
|
|
[CRUD.HOOK.beforeRefresh]() {
|
|
},
|
|
[CRUD.HOOK.afterRefresh](crud) {
|
|
this.floorOptions = crud.data
|
|
this.changeActiveTab(this.tabIndex)
|
|
},
|
|
// 提交前的验证
|
|
[CRUD.HOOK.afterValidateCU](crud) {
|
|
return true
|
|
},
|
|
changeActiveTab(index) {
|
|
if (this.$refs.previewRefs.canvasPreview.lowerCanvasEl) {
|
|
this.$refs.previewRefs.canvasPreview.clear()
|
|
this.$refs.previewRefs.canvasPreview.dispose()
|
|
}
|
|
this.allCoverData = []
|
|
this.tabIndex = index
|
|
const params = {
|
|
'floorId': this.floorOptions[index].id
|
|
}
|
|
FetchInitLibraryRegionList(params).then(res => {
|
|
console.log(res)
|
|
this.allCoverData = res.content
|
|
if (this.floorOptions[index].floorMap) {
|
|
this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgId=' + this.floorOptions[index].floorMap
|
|
} else {
|
|
this.imageUrl = this.defaultImg
|
|
}
|
|
|
|
if (this.allCoverData.length !== 0) {
|
|
this.currentMarkData = this.allCoverData[0]
|
|
const parsedSignPoints = this.allCoverData.map(item => {
|
|
const signPoint = JSON.parse(item.signPoint)
|
|
return {
|
|
id: item.id,
|
|
name: item.regionName,
|
|
floorName: item.floorName,
|
|
floorId: item.floorId,
|
|
pointInfo: signPoint.pointInfo[0].pointInfo
|
|
}
|
|
})
|
|
const imgInfo = JSON.parse(this.allCoverData[0].signPoint).imgInfo
|
|
|
|
const result = {
|
|
pointInfo: parsedSignPoints,
|
|
imgInfo: imgInfo
|
|
}
|
|
console.log('result', result)
|
|
this.$nextTick(() => {
|
|
console.log('this.$refs.previewRefs', this.$refs.previewRefs)
|
|
this.$refs.previewRefs.initCanvasPreview(result)
|
|
})
|
|
} else {
|
|
this.currentMarkData = {}
|
|
}
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
handleToRegions() {
|
|
this.$router.push({ path: '/dataScreening/regions', query: { }})
|
|
},
|
|
handleSlidClickFun(index) {
|
|
this.rightDataIndex = null
|
|
this.handleSlideToFun(index)
|
|
},
|
|
handleSlideToFun(index) {
|
|
this.swiperActiveIndex = index
|
|
this.swiperContent.slideTo(index, 500, false)
|
|
this.swiperTitle.slideTo(index, 500, false)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container-right{
|
|
min-height: calc(100vh - 232px) !important;
|
|
}
|
|
.venue-content{
|
|
position: relative;
|
|
}
|
|
.crud-opts{
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 10px;
|
|
}
|
|
.venue-left{
|
|
flex: 1;
|
|
margin-right: 0 !important;
|
|
.venue-preview{
|
|
height: 633px !important;
|
|
}
|
|
}
|
|
.venue-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 400px;
|
|
padding: 50px 10px 20px 10px !important;
|
|
.lib-right-item{
|
|
position: relative;
|
|
// padding: 10px;
|
|
// height: calc(100% / 3);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #E8F2FF;
|
|
border-radius: 4px;
|
|
h4{
|
|
padding: 6px 10px;
|
|
background-color: #E8F2FF;
|
|
color: #000;
|
|
line-height: 30px;
|
|
border-bottom: 1px solid #edeff3;
|
|
}
|
|
.refresh-date{
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 10px;
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.data-right-list {
|
|
padding-top: 10px;
|
|
li{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
line-height: 36px;
|
|
|
|
p{
|
|
width: 80px;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
span{
|
|
width: 140px;
|
|
display: block;
|
|
text-align: right;
|
|
i{
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
padding: 0 10px;
|
|
color: #0348f3;
|
|
}
|
|
&.percentage{
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.total-data{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 60px;
|
|
font-size: 14px;
|
|
padding: 4px 6px;
|
|
color: #fff;
|
|
background-color: rgba(0,0,0,.5);
|
|
border-radius: 4px;
|
|
p{
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|