20 changed files with 948 additions and 1009 deletions
-
12src/api/shelf/index.js
-
58src/api/stockTask/index.js
-
14src/assets/iconfonts/light/iconfont.css
-
2src/assets/iconfonts/light/iconfont.js
-
14src/assets/iconfonts/light/iconfont.json
-
BINsrc/assets/iconfonts/light/iconfont.ttf
-
BINsrc/assets/iconfonts/light/iconfont.woff
-
BINsrc/assets/iconfonts/light/iconfont.woff2
-
9src/utils/request.js
-
56src/views/components/bookSwiper.vue
-
45src/views/components/canvasPreview.vue
-
130src/views/home.vue
-
321src/views/visualCheck/checkManage/dataScreening/girdList.vue
-
155src/views/visualCheck/checkManage/dataScreening/index.vue
-
70src/views/visualCheck/checkManage/dataScreening/regionsList.vue
-
686src/views/visualCheck/checkManage/dataScreening/shelfList copy.vue
-
148src/views/visualCheck/checkManage/dataScreening/shelfList.vue
-
179src/views/visualCheck/checkManage/paramSetting/index.vue
-
37src/views/visualCheck/mixins/index.js
-
21src/views/visualCheck/venueDevice/bookshelf/index.vue
2
src/assets/iconfonts/light/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,686 +0,0 @@ |
|||||
<template> |
|
||||
<div class="app-container"> |
|
||||
<div class="venue-header"> |
|
||||
<h4 @click="handleToGrids"><i class="iconfont icon-shuju" />书架总览</h4> |
|
||||
<span class="bookshelf-area">{{ floorName }} - {{ regionName }}</span> |
|
||||
<p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p> |
|
||||
</div> |
|
||||
<div class="venue-content"> |
|
||||
<crudOperation :permission="permission"> |
|
||||
<template v-slot:middle> |
|
||||
<el-select v-model="layerVal" clearable size="small" placeholder="楼层" class="filter-item" style="width: 100px; margin-right: 20px;"> |
|
||||
<el-option v-for="item in layerOptions" :key="item.id" :label="item.name" :value="item.id" /> |
|
||||
</el-select> |
|
||||
<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" /> |
|
||||
|
|
||||
<!-- <div style="display: flex;justify-content: flex-start; align-items: center;"> --> |
|
||||
<swiper |
|
||||
ref="swiperTitle" |
|
||||
class="swiper-title" |
|
||||
:options="swiperOptionTitle" |
|
||||
:auto-update="true" |
|
||||
:auto-destroy="true" |
|
||||
:delete-instance-on-destroy="true" |
|
||||
:cleanup-styles-on-destroy="true" |
|
||||
> |
|
||||
<swiper-slide |
|
||||
v-for="(item, index) of tabListData" |
|
||||
ref="swiperSlideItem" |
|
||||
:key="'name' + index" |
|
||||
:iname="item.name" |
|
||||
class="swiper-slide-title" |
|
||||
> |
|
||||
<div |
|
||||
class="tab-name" |
|
||||
:class="{ active: index === swiperActiveIndex }" |
|
||||
@click="handleSlidClickFun(index)" |
|
||||
> |
|
||||
{{ item.name }} |
|
||||
</div> |
|
||||
</swiper-slide> |
|
||||
</swiper> |
|
||||
<div class="tag-info"> |
|
||||
<p>错序：1</p> |
|
||||
<p>错架：1</p> |
|
||||
<p>在架：20</p> |
|
||||
</div> |
|
||||
<!-- </div> --> |
|
||||
<swiper |
|
||||
ref="swiperContent" |
|
||||
class="swiper-content" |
|
||||
:options="swiperOptionContent" |
|
||||
:auto-update="true" |
|
||||
:auto-destroy="true" |
|
||||
:delete-instance-on-destroy="true" |
|
||||
:cleanup-styles-on-destroy="true" |
|
||||
> |
|
||||
<swiper-slide |
|
||||
v-for="(item, index) of tabListData" |
|
||||
:key="'content' + index" |
|
||||
class="swiper-slide-content" |
|
||||
> |
|
||||
|
|
||||
<ul class="cabinet-row"> |
|
||||
<li |
|
||||
v-for="(cell,i) in booShelfGrid" |
|
||||
:key="i" |
|
||||
class="cabinet-cell" |
|
||||
:style="cellStyle" |
|
||||
:class="{ active: i === cellIndex }" |
|
||||
@click="handleCellCurrent(cell,i)" |
|
||||
@mouseenter="showPopover(i)" |
|
||||
@mouseleave="hidePopover" |
|
||||
> |
|
||||
<span class="cell-name">{{ removeAreaPrefix(cell.gridName) }}</span> |
|
||||
<!-- v-if="popoverIndex === i" --> |
|
||||
<el-popover |
|
||||
v-if="popoverIndex === i" |
|
||||
ref="popover" |
|
||||
:visible="popoverVisible[i]" |
|
||||
width="400" |
|
||||
:style="popoverStyles[i]" |
|
||||
trigger="manual" |
|
||||
> |
|
||||
<div slot="reference" class="popover-content"> |
|
||||
<div class="tooltip-top"> |
|
||||
<h4>层位概况</h4> |
|
||||
<i class="update-time">2024-11-28 09:46</i> |
|
||||
</div> |
|
||||
<ul> |
|
||||
<li><p>层位</p><em class="percentage"><i style="color: #fff;">{{ removeAreaPrefix(cell.gridName) }}</i></em></li> |
|
||||
<li><p>在架</p><em><i>15000</i>册</em></li> |
|
||||
<li><p>错架</p><em><i>300</i>层</em> <em class="percentage">（2.00%）</em></li> |
|
||||
<li><p>错序</p><em><i>0</i>层</em><em class="percentage">（0.00%）</em></li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</el-popover> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</swiper-slide> |
|
||||
</swiper> |
|
||||
</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>001排</i></span></li> |
|
||||
<li><p>规则</p><span><i>双面 6 x 5</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> |
|
||||
</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 { FetchInitShelfGridByShelfId, FetchBookShelfDetails } from '@/api/shelf/index' |
|
||||
import crudRegion from '@/api/area/index' |
|
||||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
||||
import crudOperation from '@crud/CRUD.operation' |
|
||||
import { mapGetters } from 'vuex' |
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|
||||
import 'swiper/dist/css/swiper.css' |
|
||||
|
|
||||
const defaultForm = { id: null, taskType: null, taskName: null, location: null, number: null, remark: null } |
|
||||
export default { |
|
||||
name: 'DataScreening', |
|
||||
components: { swiper, swiperSlide, crudOperation }, |
|
||||
cruds() { |
|
||||
return CRUD({ title: '架位总览', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: { |
|
||||
add: false, |
|
||||
edit: false, |
|
||||
del: false, |
|
||||
download: false, |
|
||||
group: false, |
|
||||
reset: false |
|
||||
}, |
|
||||
queryOnPresenterCreated: false |
|
||||
}) |
|
||||
}, |
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
||||
data() { |
|
||||
const _this = this |
|
||||
return { |
|
||||
floorName: null, |
|
||||
regionName: null, |
|
||||
bookShelfDetails: null, |
|
||||
booShelfGrid: null, |
|
||||
cellInfo: { |
|
||||
gridName: null, |
|
||||
startSortmark: null, |
|
||||
endSortmark: null, |
|
||||
cameraId: null |
|
||||
}, |
|
||||
callNumVisible: false, |
|
||||
layerNum: 0, |
|
||||
rackNum: 0, |
|
||||
swiperActiveIndex: 0, |
|
||||
cellIndex: null, |
|
||||
swiperOptionContent: { |
|
||||
slidesPerView: 'auto', |
|
||||
on: { |
|
||||
slideChangeTransitionStart: function() { |
|
||||
_this.cellIndex = null |
|
||||
_this.swiperActiveIndex = this.activeIndex |
|
||||
console.log('activeIndexffff', this.swiperActiveIndex) |
|
||||
_this.swiperTitle.slideTo(this.activeIndex, 500, false) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
swiperOptionTitle: { |
|
||||
slidesPerView: 'auto', |
|
||||
freeMode: true |
|
||||
}, |
|
||||
layerVal: '001排', |
|
||||
layerOptions: [{ id: 1, name: '001排' }], |
|
||||
tabListData: [], |
|
||||
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' } |
|
||||
] |
|
||||
}, |
|
||||
popoverIndex: 1, |
|
||||
popoverVisible: [], |
|
||||
popoverStyles: [] |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapGetters([ |
|
||||
'user', |
|
||||
'baseApi' |
|
||||
]), |
|
||||
swiperContent() { |
|
||||
return this.$refs.swiperContent.$el.swiper |
|
||||
}, |
|
||||
swiperTitle() { |
|
||||
return this.$refs.swiperTitle.$el.swiper |
|
||||
}, |
|
||||
cellStyle: function() { |
|
||||
// const h = '100%/' + this.layerNum |
|
||||
// const w = '100%/' + this.rackNum |
|
||||
const h = '70px' |
|
||||
const w = '100%/' + this.rackNum |
|
||||
return { width: `calc(${w} - 4px )`, height: `calc(${h} - 2px)` } |
|
||||
} |
|
||||
}, |
|
||||
async created() { |
|
||||
if (localStorage.getItem('dataScreenRegion')) { |
|
||||
const dataScreenRegion = JSON.parse(localStorage.getItem('dataScreenRegion')) |
|
||||
this.floorName = dataScreenRegion.floorName |
|
||||
this.regionName = dataScreenRegion.regionName |
|
||||
// 单面/双面 |
|
||||
this.tabListData = dataScreenRegion.rowType === 1 |
|
||||
? dataScreenRegion.toward === 1 |
|
||||
? [{ name: 'A面' }] |
|
||||
: [{ name: 'B面' }] |
|
||||
: [{ name: 'A面' }, { name: 'B面' }] |
|
||||
|
|
||||
FetchBookShelfDetails({ 'shelfId': dataScreenRegion.id }).then(res => { |
|
||||
this.layerNum = res.shelfFloor |
|
||||
this.rackNum = res.shelfShelf |
|
||||
this.bookShelfDetails = res |
|
||||
this.getInitShelfGridByShelfId(this.bookShelfDetails.toward) |
|
||||
}).catch(() => { |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
handleToGrids() { |
|
||||
this.$router.push({ path: '/dataScreening/gird', query: { }}) |
|
||||
}, |
|
||||
[CRUD.HOOK.beforeRefresh]() { |
|
||||
}, |
|
||||
[CRUD.HOOK.afterRefresh](crud) { |
|
||||
}, |
|
||||
// 提交前的验证 |
|
||||
[CRUD.HOOK.afterValidateCU](crud) { |
|
||||
return true |
|
||||
}, |
|
||||
removeAreaPrefix(gridNames) { |
|
||||
const index = gridNames.indexOf('区') |
|
||||
if (index !== -1) { |
|
||||
return gridNames.substring(index + 1) |
|
||||
} |
|
||||
return gridNames |
|
||||
}, |
|
||||
getInitShelfGridByShelfId(toward) { |
|
||||
// rowType 1 单 2 双 |
|
||||
// toward 1 A面 2 B面 |
|
||||
// shelfType 1 '始终最左边为第1架（S型排架）' |
|
||||
// shelfType 2 'A面最左为第1架（B面最左为最后1架）' |
|
||||
// shelfType 3 'B面最左为第1架（A面最左为最后1架）' |
|
||||
// floorType 1 '最顶层为第一层（从上至下）' |
|
||||
// floorType 2 '最底层为第一层（从下至上）' |
|
||||
FetchInitShelfGridByShelfId({ 'shelfId': this.bookShelfDetails.id, 'toward': toward }).then(res => { |
|
||||
const sortFunction = toward === 1 ? { |
|
||||
1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
|
||||
2: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
|
||||
3: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' } |
|
||||
} : { |
|
||||
1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
|
||||
2: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' }, |
|
||||
3: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' } |
|
||||
} |
|
||||
const shelfType = this.bookShelfDetails.shelfType |
|
||||
const floorType = this.bookShelfDetails.floorType |
|
||||
const sortMethod = sortFunction[shelfType][floorType] |
|
||||
this.booShelfGrid = this[sortMethod](res) |
|
||||
|
|
||||
this.popoverVisible = Array(this.booShelfGrid.length).fill(false) |
|
||||
// this.popoverStyles = new Array(this.booShelfGrid.length).fill({ position: 'absolute', left: '20%', top: '48px' }) |
|
||||
}).catch(() => { |
|
||||
}) |
|
||||
}, |
|
||||
// 最左为第一架, 最顶层为第一层 从上往下 |
|
||||
sortBookshelvesLeftTop(data) { |
|
||||
const sortedData = [] |
|
||||
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
|
||||
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1)))) |
|
||||
|
|
||||
for (let i = 1; i <= maxFloor; i++) { |
|
||||
for (let j = 1; j <= maxShelf; j++) { |
|
||||
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j) |
|
||||
if (currentShelf) { |
|
||||
sortedData.push(currentShelf) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
return sortedData |
|
||||
}, |
|
||||
// 最右为第一架,最左为最后一架, 最顶层为第一层 从上往下 |
|
||||
sortBookshelvesRightTop(data) { |
|
||||
const sortedData = [] |
|
||||
// 获取最大的楼层数 |
|
||||
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
|
||||
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0]))) |
|
||||
for (let i = 1; i <= maxFloor; i++) { |
|
||||
// 从最大的书架层数开始，向下排序 |
|
||||
for (let j = maxShelf; j >= 1; j--) { |
|
||||
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j) |
|
||||
if (currentShelf) { |
|
||||
sortedData.push(currentShelf) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
return sortedData |
|
||||
}, |
|
||||
// 最左为第一架, 最底层为第一层 从下往上 |
|
||||
sortBookshelvesLeftBottom(data) { |
|
||||
const sortedData = [] |
|
||||
// 获取最大的楼层数 |
|
||||
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
|
||||
// 获取最大的书架层数 |
|
||||
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1)))) |
|
||||
for (let i = maxFloor; i >= 1; i--) { |
|
||||
for (let j = 1; j <= maxShelf; j++) { |
|
||||
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j) |
|
||||
if (currentShelf) { |
|
||||
sortedData.push(currentShelf) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
return sortedData |
|
||||
}, |
|
||||
// 最左为最后一架, 最底层为第一层 从下往上 |
|
||||
sortBookshelvesRightBottom(data) { |
|
||||
const sortedData = [] |
|
||||
// 获取最大的楼层数 |
|
||||
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
|
||||
const maxShelfPerFloor = data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0])) |
|
||||
.reduce((acc, curr, index, arr) => { |
|
||||
const floor = parseInt(data[index].gridFloor) |
|
||||
if (!acc[floor]) acc[floor] = 1 |
|
||||
if (acc[floor] < curr) acc[floor] = curr |
|
||||
return acc |
|
||||
}, {}) |
|
||||
// 从最大的楼层开始向下遍历 |
|
||||
for (let i = maxFloor; i >= 1; i--) { |
|
||||
// 从最大的书架编号开始向左遍历 |
|
||||
for (let j = maxShelfPerFloor[i] || 1; j >= 1; j--) { |
|
||||
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j) |
|
||||
if (currentShelf) { |
|
||||
sortedData.push(currentShelf) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
return sortedData |
|
||||
}, |
|
||||
handleSlidClickFun(index) { |
|
||||
this.cellIndex = null |
|
||||
this.handleSlideToFun(index) |
|
||||
if (localStorage.getItem('bookShelfDetails')) { |
|
||||
this.getInitShelfGridByShelfId(index + 1) |
|
||||
} |
|
||||
}, |
|
||||
handleSlideToFun(index) { |
|
||||
this.swiperActiveIndex = index |
|
||||
this.swiperContent.slideTo(index, 500, false) |
|
||||
this.swiperTitle.slideTo(index, 500, false) |
|
||||
}, |
|
||||
handleCellCurrent(item, index) { |
|
||||
console.log('index', index) |
|
||||
this.cellIndex = index |
|
||||
this.cellInfo = { |
|
||||
id: item.id, |
|
||||
gridName: item.gridName, |
|
||||
startSortmark: item.startSortmark, |
|
||||
endSortmark: item.endSortmark, |
|
||||
cameraId: item.cameraId, |
|
||||
check: item.isCheck, |
|
||||
order: item.isOrder |
|
||||
} |
|
||||
}, |
|
||||
showPopover(index) { |
|
||||
this.popoverIndex = index |
|
||||
// 显示对应的 popover |
|
||||
if (!this.popoverVisible[index]) { |
|
||||
this.$set(this.popoverVisible, index, true) |
|
||||
} |
|
||||
|
|
||||
const lastColumnIndexes = [] |
|
||||
const secondLastColumnIndexes = [] |
|
||||
|
|
||||
for (let i = 0; i < this.booShelfGrid.length; i++) { |
|
||||
// 计算当前数据项的列索引 |
|
||||
const columnIndex = i % this.rackNum |
|
||||
// 如果是最后一列（第5列） |
|
||||
if (columnIndex === this.rackNum - 1) { |
|
||||
lastColumnIndexes.push(i) |
|
||||
// 更新最后一列的样式 |
|
||||
this.$set(this.popoverStyles, i, { position: 'absolute', left: '-140px', top: '48px' }) |
|
||||
} |
|
||||
// 如果是倒数第二列（第4列） |
|
||||
if (columnIndex === this.rackNum - 2) { |
|
||||
secondLastColumnIndexes.push(i) |
|
||||
// 更新倒数第二列的样式 |
|
||||
this.$set(this.popoverStyles, i, { position: 'absolute', left: '-20px', top: '48px' }) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
hidePopover() { |
|
||||
this.popoverIndex = null |
|
||||
// 隐藏所有的popover |
|
||||
this.popoverVisible.forEach((isVisible, index) => { |
|
||||
if (isVisible) { |
|
||||
this.$set(this.popoverVisible, index, 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-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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.swiper-title{ |
|
||||
::v-deep .swiper-wrapper{ |
|
||||
margin: 10px 0; |
|
||||
border-bottom: 1px solid #EDEFF3; |
|
||||
} |
|
||||
} |
|
||||
.swiper-slide-title { |
|
||||
width: auto !important; |
|
||||
margin-right: 20px; |
|
||||
cursor: pointer; |
|
||||
.tab-name { |
|
||||
padding: 10px; |
|
||||
&.active { |
|
||||
color: #0348F3; |
|
||||
border-bottom: 3px solid #0348F3; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.swiper-content{ |
|
||||
height: 610px; |
|
||||
} |
|
||||
.tag-info{ |
|
||||
position: absolute; |
|
||||
right: 20px; |
|
||||
top: 34px; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
padding-left: 100px; |
|
||||
p{ |
|
||||
margin-left: 20px; |
|
||||
margin-top: -4px; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
.cabinet-row .cabinet-cell{ |
|
||||
background: url('~@/assets/images/shelf02.png') repeat-x left top; |
|
||||
background-size: 100% 100%; |
|
||||
border: none; |
|
||||
overflow: inherit; |
|
||||
cursor: pointer; |
|
||||
&::before{ |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
width: 6px; |
|
||||
height: 68px; |
|
||||
background: url('~@/assets/images/shelf01.png') no-repeat left top; |
|
||||
background-size: 100% 100%; |
|
||||
} |
|
||||
&::after{ |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
right: -4px; |
|
||||
top: 0; |
|
||||
width: 6px; |
|
||||
height: 68px; |
|
||||
background: url('~@/assets/images/shelf01.png') no-repeat left top; |
|
||||
background-size: 100% 100%; |
|
||||
} |
|
||||
span.cell-name{ |
|
||||
position: initial !important; |
|
||||
transform: none; |
|
||||
line-height: 68px; |
|
||||
} |
|
||||
} |
|
||||
::v-deep .cabinet-row .cabinet-cell span.el-popover__reference-wrapper{ |
|
||||
position: absolute !important; |
|
||||
left: 50% !important; |
|
||||
top: 20px !important; |
|
||||
transform: none; |
|
||||
width: 300px; |
|
||||
height: 210px; |
|
||||
background:rgba(0,0,0,.8); |
|
||||
color: #fff; |
|
||||
border-radius: 6px; |
|
||||
z-index: 99999999; |
|
||||
|
|
||||
.popover-content{ |
|
||||
.tooltip-top{ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
padding: 0 10px; |
|
||||
border-bottom: 1px solid #fff; |
|
||||
} |
|
||||
.tooltip-top i{ |
|
||||
font-style: normal; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
ul{ |
|
||||
padding: 10px; |
|
||||
} |
|
||||
ul li{ |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
line-height: 36px; |
|
||||
font-style: normal; |
|
||||
} |
|
||||
|
|
||||
ul li p{ |
|
||||
width: 80px; |
|
||||
font-weight: bold; |
|
||||
text-align: right; |
|
||||
} |
|
||||
ul li em{ |
|
||||
width: 100px; |
|
||||
display: block; |
|
||||
text-align: right; |
|
||||
font-style: normal; |
|
||||
} |
|
||||
ul li i{ |
|
||||
font-style: normal; |
|
||||
font-weight: bold; |
|
||||
padding: 0 10px; |
|
||||
color: #0348f3; |
|
||||
} |
|
||||
ul li em.percentage{ |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,37 @@ |
|||||
|
import { FetchInitHomeInfo, FetchInitStockInfo } from '@/api/stockTask/index' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
export const dataScreeningCrud = { |
||||
|
mixins: [], |
||||
|
// 组件共用属性
|
||||
|
data() { |
||||
|
return { |
||||
|
baseData: {}, |
||||
|
baseStockData: {} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'user', |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
// 组件挂载时的共用方法
|
||||
|
mounted() { |
||||
|
this.handleInitHomeInfo() |
||||
|
}, |
||||
|
// 组件共用方法
|
||||
|
methods: { |
||||
|
handleInitHomeInfo() { |
||||
|
FetchInitHomeInfo().then(res => { |
||||
|
this.baseData = res |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
handleInitStockInfo(params) { |
||||
|
FetchInitStockInfo(params).then(res => { |
||||
|
this.baseStockData = res |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue