7 changed files with 630 additions and 51 deletions
-
29src/api/map/index.js
-
10src/assets/styles/yxk-admin.scss
-
224src/views/deviceManage/area/areaClassifyRelated.vue
-
174src/views/deviceManage/floor/index.vue
-
37src/views/deviceManage/map3d/index.vue
-
33src/views/deviceManage/map3d/map.vue
-
174src/views/deviceManage/map3d/mapRight.vue
@ -0,0 +1,224 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="venue-header"> |
|||
<h4><i class="iconfont icon-hangzhengquyuguanli" />区域列表</h4> |
|||
<p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p> |
|||
</div> |
|||
<div class="venue-content"> |
|||
<div class="venue-left"> |
|||
<div class="head-container"> |
|||
<div class="head-search"> |
|||
<!-- 搜索 --> |
|||
<el-select v-model="query.floorId" clearable size="small" placeholder="楼层" class="filter-item" style="width: 80px" @change="changeInitFloorValue($event)"> |
|||
<el-option v-for="item in floorOptions" :key="item.id" :label="item.floorName" :value="item.id" /> |
|||
</el-select> |
|||
<el-input v-model="query.search" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" /> |
|||
<rrOperation /> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
:data="crud.data" |
|||
style="width: 100%;" |
|||
height="506" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column type="index" label="排序" /> |
|||
<el-table-column prop="regionName" label="区域名称" /> |
|||
<el-table-column prop="regionCode" label="区域编码" /> |
|||
<el-table-column prop="floorName" label="所在楼层" /> |
|||
<el-table-column prop="booksheflCount" label="书架" /> |
|||
<el-table-column prop="signPoint" label="关联分类" /> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="crud.data.length!==0" /> |
|||
</div> |
|||
</div> |
|||
<div class="venue-right"> |
|||
<div class="container-right tab-content"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<ul class="tab-nav"> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">关联列表<i /></li> |
|||
<!-- 最右侧装饰img --> |
|||
<span class="tab-right-img" /> |
|||
<el-button size="mini" class="venue-mark"> |
|||
<i class="iconfont icon-bendiguajie" /> |
|||
关联设置 |
|||
</el-button> |
|||
</ul> |
|||
<div v-if="activeIndex == 0" class="venue-preview"> |
|||
111 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- form --> |
|||
<el-dialog :close-on-click-modal="false" :append-to-body="true" title="关联图书分类" :visible.sync="relatedVisible"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<el-table :data="relatedTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id"> |
|||
<el-table-column type="index" label="序号" width="100" align="center" /> |
|||
<el-table-column prop="regionName" label="图书分类"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.regionName +' [ '+ scope.row.floorName+' ] ' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="handleCloseDialog">取消</el-button> |
|||
<el-button type="primary" @click="crud.submitCU">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchLibraryFloorListAll } from '@/api/floor/index' |
|||
import crudRegion from '@/api/area/index' |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
import rrOperation from '@crud/RR.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
const defaultForm = { id: null } |
|||
export default { |
|||
name: 'Bookshelf', |
|||
components: { rrOperation, pagination }, |
|||
cruds() { |
|||
return CRUD({ title: '区域', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: { |
|||
add: true, |
|||
edit: true, |
|||
del: false, |
|||
download: false, |
|||
group: false, |
|||
reset: false |
|||
}}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
data() { |
|||
return { |
|||
floorOptions: [], |
|||
permission: { |
|||
add: ['admin', 'floor:add'], |
|||
edit: ['admin', 'floor:edit'], |
|||
del: ['admin', 'floor:del'] |
|||
}, |
|||
activeIndex: 0, |
|||
relatedTableData: [], // 排序data |
|||
relatedVisible: false, // 排序dialog |
|||
currentData: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'user', |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
watch: { |
|||
}, |
|||
beforeDestroy() { |
|||
window.removeEventListener('beforeunload', this.clearLocalStorage) |
|||
}, |
|||
methods: { |
|||
clearLocalStorage() { |
|||
const key = 'formFloor' |
|||
if (localStorage.getItem(key)) { |
|||
localStorage.removeItem(key) |
|||
} |
|||
}, |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
this.getLibraryFloorListAll() |
|||
if (this.$route.query.formFloor) { |
|||
const formFloor = JSON.parse(localStorage.getItem('formFloor')) |
|||
if (formFloor) { |
|||
this.crud.query.floorId = formFloor.id |
|||
} |
|||
} |
|||
}, |
|||
[CRUD.HOOK.afterRefresh](crud) { |
|||
console.log('crud.data', crud.data) |
|||
if (crud.data.length !== 0) { |
|||
this.clickRowHandler(crud.data[0]) |
|||
this.activeIndex = 0 |
|||
} |
|||
}, |
|||
|
|||
// 提交前的验证 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
this.$refs.uploadCoverRefs.fileNames = '' |
|||
return true |
|||
}, |
|||
// 获取楼层数据 |
|||
getLibraryFloorListAll() { |
|||
FetchLibraryFloorListAll().then(res => { |
|||
this.floorOptions = res |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
changeInitFloorValue(value) { |
|||
if (this.$route.query.formFloor) { |
|||
localStorage.removeItem('formFloor') |
|||
} |
|||
|
|||
this.crud.query.floorId = value |
|||
this.crud.toQuery() |
|||
console.log('value', value) |
|||
}, |
|||
clickRowHandler(row) { |
|||
this.$refs.table.clearSelection() |
|||
this.$refs.table.toggleRowSelection(row) |
|||
this.currentData = row |
|||
if (this.activeIndex === 0) { |
|||
console.log('列表数据', row) |
|||
} |
|||
}, |
|||
changeActiveTab(data) { |
|||
this.activeIndex = data |
|||
}, |
|||
toDelete(datas) { |
|||
this.$confirm('此操作将删除当前所选区域<span>你是否还要继续？</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
this.crud.delAllLoading = true |
|||
const ids = [] |
|||
datas.forEach(val => { |
|||
ids.push(val.id) |
|||
}) |
|||
console.log(ids) |
|||
crudRegion.del(ids).then(res => { |
|||
console.log(res) |
|||
this.$message({ message: res, type: 'success', offset: 8 }) |
|||
this.crud.delAllLoading = false |
|||
this.crud.refresh() |
|||
}).catch(err => { |
|||
this.crud.delAllLoading = false |
|||
console.log(err) |
|||
}) |
|||
}).catch(() => { |
|||
this.crud.delAllLoading = false |
|||
}) |
|||
}, |
|||
handleCloseDialog() { |
|||
this.relatedVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tab-content{ |
|||
min-height: calc(100vh - 232px) !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<div :style="{position: 'relative', width: '100%', height: '640px'}"> |
|||
<div id="fengmapRight" /> |
|||
<div class="rightMask" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import fengmap from '@/assets/fengmap/fengmap.map.min' |
|||
import { FMControlPosition, FMToolbar, FMScaleBar } from '@/assets/fengmap/fengmap.plugin.ui.min.js' |
|||
|
|||
export default { |
|||
name: 'FengMap', |
|||
props: { |
|||
mapData: { |
|||
type: Object, |
|||
require: true, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
map: null, |
|||
level: null, |
|||
levelName: null, |
|||
levels: null, |
|||
marker: null, |
|||
scrollFloorControl: null, |
|||
scaleBar: null |
|||
} |
|||
}, |
|||
watch: { |
|||
mapData: { |
|||
handler(newVal, oldVal) { |
|||
if (!newVal) { |
|||
console.log('newVal-null') |
|||
return |
|||
} |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log('mapData', this.mapData) |
|||
}, |
|||
methods: { |
|||
dispose() { |
|||
if (this.scrollFloorControl) { |
|||
this.scrollFloorControl.remove() |
|||
} |
|||
if (this.map) { |
|||
this.map.dispose() |
|||
this.map = null |
|||
} |
|||
}, |
|||
initMap() { |
|||
window.vueInstance = null |
|||
try { |
|||
console.log('this.level', this.level) |
|||
console.log('开始初始化地图') |
|||
const options = { |
|||
container: document.getElementById('fengmapRight'), |
|||
appName: this.mapData && this.mapData.appName, |
|||
key: this.mapData && this.mapData.mapKey, |
|||
mapID: this.mapData && this.mapData.appId, |
|||
// mapURL: '/fengmap/data/', |
|||
// themeID: '1574346301450625025', |
|||
// themeURL: '/fengmap/data/theme/', |
|||
level: this.level, |
|||
mapZoom: 19.5, |
|||
backgroundColor: '#fff' |
|||
} |
|||
console.log('地图配置:', options) |
|||
|
|||
this.map = new fengmap.FMMap(options) |
|||
console.log('地图实例已创建') |
|||
|
|||
// this.map.on('loadingProcess', (event) => { |
|||
// console.log('加载进度:', event.progress) |
|||
// this.debugInfo = `加载进度: ${event.progress}%` |
|||
// }) |
|||
|
|||
this.map.on('loaded', () => { |
|||
console.log('地图加载完成') |
|||
this.map.setViewMode(fengmap.FMViewMode.MODE_3D) |
|||
|
|||
// 楼层控件 |
|||
const scrollFloorCtlOpt = { |
|||
position: FMControlPosition.RIGHT_TOP, |
|||
floorButtonCount: 5, |
|||
offset: { |
|||
x: -20, |
|||
y: 150 |
|||
}, |
|||
viewModeControl: true, |
|||
floorModeControl: true, |
|||
needAllLayerBtn: true |
|||
} |
|||
this.scrollFloorControl = new FMToolbar(scrollFloorCtlOpt) |
|||
this.scrollFloorControl.addTo(this.map) |
|||
|
|||
// 比例尺控件 |
|||
const scrollScaleBarCtlOpt = { |
|||
fontSize: 18, |
|||
height: 30, |
|||
position: FMControlPosition.LEFT_BOTTOM, |
|||
offset: { |
|||
x: 20, |
|||
y: -20 |
|||
} |
|||
} |
|||
this.scaleBar = new FMScaleBar(scrollScaleBarCtlOpt) |
|||
this.scaleBar.addTo(this.map) |
|||
window.vueInstance = this |
|||
console.log('Vue实例已全局挂载：', window.vueInstance) |
|||
}, { passive: true }) |
|||
|
|||
this.map.on('click', (e) => { |
|||
this.marker && this.marker.remove() |
|||
this.marker = null |
|||
}, { passive: true }) |
|||
|
|||
this.map.on('mapInitError', (err) => { |
|||
console.error('地图初始化错误:', err) |
|||
this.debugInfo = `地图初始化错误: ${err.message}` |
|||
}) |
|||
|
|||
this.map.on('levelChanged', function(event) { |
|||
console.log('levelChanged:', event) |
|||
console.log('当前楼层:', event.level) |
|||
console.log('楼层name2', window.vueInstance.map.getFloor(event.level).name) |
|||
}) |
|||
} catch (error) { |
|||
console.error('初始化地图失败:', error) |
|||
this.debugInfo = `初始化失败: ${error.message}` |
|||
} |
|||
}, |
|||
getCurrentLevel() { |
|||
this.level = this.map.getLevel() |
|||
this.levelName = this.map.getFloor(this.level).name |
|||
// floorID level name |
|||
console.log('楼层info', this.map.getFloor(this.level)) |
|||
console.log('楼层name1', this.map.getFloor(this.level).name) |
|||
// 所有 |
|||
console.log('getFloorInfos', this.map.getFloorInfos()) |
|||
window.vueInstance.$emit('refreshLevel', this.level, this.levelName) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "~@/assets/fengmap/toolBarStyle.css"; |
|||
|
|||
#fengmapRight { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #f5f5f5; |
|||
} |
|||
.rightMask{ |
|||
width: 162px; |
|||
height: 42px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue