|
|
|
@ -79,8 +79,13 @@ |
|
|
|
<div class="resi-cell-label">房屋用途</div> |
|
|
|
<div class="resi-cell-value"> |
|
|
|
|
|
|
|
<el-select v-model="purpose" placeholder="房屋用途" clearable> |
|
|
|
<el-option v-for="item in purposeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"> |
|
|
|
<el-select v-model="purpose" |
|
|
|
placeholder="房屋用途" |
|
|
|
clearable> |
|
|
|
<el-option v-for="item in purposeArr" |
|
|
|
:key="item.dictValue" |
|
|
|
:label="item.dictName" |
|
|
|
:value="item.dictValue"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
@ -99,7 +104,6 @@ |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-button style="margin-left:10px" |
|
|
|
class="diy-button--search" |
|
|
|
size="small" |
|
|
|
@ -120,6 +124,8 @@ |
|
|
|
:ownerName="ownerName" |
|
|
|
:ownerPhone="ownerPhone" |
|
|
|
:rentFlag="rentFlag" |
|
|
|
:purpose="purpose" |
|
|
|
:remark="remark" |
|
|
|
@toNextLevel="toNextLevel" |
|
|
|
@refreshTree="refreshTree"></build-table> |
|
|
|
|
|
|
|
@ -129,6 +135,8 @@ |
|
|
|
:ownerName="ownerName" |
|
|
|
:ownerPhone="ownerPhone" |
|
|
|
:rentFlag="rentFlag" |
|
|
|
:purpose="purpose" |
|
|
|
:remark="remark" |
|
|
|
ref="ref_buildingTable" |
|
|
|
@refreshTree="refreshTree"></room-table> |
|
|
|
|
|
|
|
@ -138,6 +146,8 @@ |
|
|
|
:ownerName="ownerName" |
|
|
|
:ownerPhone="ownerPhone" |
|
|
|
:rentFlag="rentFlag" |
|
|
|
:purpose="purpose" |
|
|
|
:remark="remark" |
|
|
|
ref="ref_communityTable" |
|
|
|
@refreshTree="refreshTree"></community-table> |
|
|
|
|
|
|
|
@ -147,391 +157,391 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import CDialog from '@c/CDialog' |
|
|
|
import communityTable from './communityTable' |
|
|
|
import buildTable from './buildTable' |
|
|
|
import roomTable from './roomTable' |
|
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { Loading } from 'element-ui' // 引入Loading服务 |
|
|
|
|
|
|
|
let loading // 加载动画 |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
filterText: '', |
|
|
|
treeLoading: true, |
|
|
|
treeData: [], |
|
|
|
openNodes: [], |
|
|
|
defaultProps: { |
|
|
|
children: 'children', |
|
|
|
label: 'showName' |
|
|
|
}, |
|
|
|
|
|
|
|
selTreeObj: {}, |
|
|
|
|
|
|
|
centerPoint: [], |
|
|
|
staffAgencyId: localStorage.getItem("agencyId"), |
|
|
|
showImportBtn: false, |
|
|
|
|
|
|
|
rentList: [ |
|
|
|
{ |
|
|
|
value: '1', |
|
|
|
label: '出租' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '2', |
|
|
|
label: '闲置' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '0', |
|
|
|
label: '自住' |
|
|
|
}, |
|
|
|
], |
|
|
|
ownerName: '', |
|
|
|
ownerPhone: '', |
|
|
|
rentFlag: '', |
|
|
|
purpose: '', |
|
|
|
remark: '', |
|
|
|
showRoomTable: false, |
|
|
|
selObj: {}, |
|
|
|
purposeArr: [ |
|
|
|
{ dictValue: '1', dictName: '住宅' }, |
|
|
|
{ dictValue: '2', dictName: '商业' }, |
|
|
|
{ dictValue: '3', dictName: '办公' }, |
|
|
|
{ dictValue: '4', dictName: '工业' }, |
|
|
|
{ dictValue: '5', dictName: '仓储' }, |
|
|
|
{ dictValue: '6', dictName: '商住混用' }, |
|
|
|
{ dictValue: '7', dictName: '其他' } |
|
|
|
] |
|
|
|
} |
|
|
|
import CDialog from '@c/CDialog' |
|
|
|
import communityTable from './communityTable' |
|
|
|
import buildTable from './buildTable' |
|
|
|
import roomTable from './roomTable' |
|
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { Loading } from 'element-ui' // 引入Loading服务 |
|
|
|
|
|
|
|
let loading // 加载动画 |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
filterText: '', |
|
|
|
treeLoading: true, |
|
|
|
treeData: [], |
|
|
|
openNodes: [], |
|
|
|
defaultProps: { |
|
|
|
children: 'children', |
|
|
|
label: 'showName' |
|
|
|
}, |
|
|
|
|
|
|
|
selTreeObj: {}, |
|
|
|
|
|
|
|
centerPoint: [], |
|
|
|
staffAgencyId: localStorage.getItem("agencyId"), |
|
|
|
showImportBtn: false, |
|
|
|
|
|
|
|
rentList: [ |
|
|
|
{ |
|
|
|
value: '1', |
|
|
|
label: '出租' |
|
|
|
}, |
|
|
|
components: { |
|
|
|
CDialog |
|
|
|
{ |
|
|
|
value: '2', |
|
|
|
label: '闲置' |
|
|
|
}, |
|
|
|
async mounted () { |
|
|
|
this.treeLoading = true |
|
|
|
|
|
|
|
await this.loadOrgData() |
|
|
|
await this.loadTree() |
|
|
|
await this.loadOpenNode() |
|
|
|
|
|
|
|
await this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|
|
|
if (this.treeData.length > 0) { |
|
|
|
this.$nextTick(() => { |
|
|
|
// ref_tree 元素的ref value 绑定的node-key |
|
|
|
this.$refs.ref_tree.setCurrentKey(this.treeData[0].id); |
|
|
|
}); |
|
|
|
} |
|
|
|
this.treeLoading = false |
|
|
|
|
|
|
|
{ |
|
|
|
value: '0', |
|
|
|
label: '自住' |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
rowHeight () { |
|
|
|
], |
|
|
|
ownerName: '', |
|
|
|
ownerPhone: '', |
|
|
|
rentFlag: '', |
|
|
|
purpose: '', |
|
|
|
remark: '', |
|
|
|
showRoomTable: false, |
|
|
|
selObj: {}, |
|
|
|
purposeArr: [ |
|
|
|
{ dictValue: '1', dictName: '住宅' }, |
|
|
|
{ dictValue: '2', dictName: '商业' }, |
|
|
|
{ dictValue: '3', dictName: '办公' }, |
|
|
|
{ dictValue: '4', dictName: '工业' }, |
|
|
|
{ dictValue: '5', dictName: '仓储' }, |
|
|
|
{ dictValue: '6', dictName: '商住混用' }, |
|
|
|
{ dictValue: '7', dictName: '其他' } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
CDialog |
|
|
|
}, |
|
|
|
async mounted () { |
|
|
|
this.treeLoading = true |
|
|
|
|
|
|
|
await this.loadOrgData() |
|
|
|
await this.loadTree() |
|
|
|
await this.loadOpenNode() |
|
|
|
|
|
|
|
await this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|
|
|
if (this.treeData.length > 0) { |
|
|
|
this.$nextTick(() => { |
|
|
|
// ref_tree 元素的ref value 绑定的node-key |
|
|
|
this.$refs.ref_tree.setCurrentKey(this.treeData[0].id); |
|
|
|
}); |
|
|
|
} |
|
|
|
this.treeLoading = false |
|
|
|
|
|
|
|
return this.$store.state.inIframe ? this.clientHeight - 140 + this.iframeHeight + 'px' : this.clientHeight - 140 + 'px' |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
rowHeight () { |
|
|
|
|
|
|
|
}, |
|
|
|
treeHeight () { |
|
|
|
return this.$store.state.inIframe ? this.clientHeight - 200 + this.iframeHeight + 'px' : this.clientHeight - 200 + 'px' |
|
|
|
return this.$store.state.inIframe ? this.clientHeight - 140 + this.iframeHeight + 'px' : this.clientHeight - 140 + 'px' |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
treeHeight () { |
|
|
|
return this.$store.state.inIframe ? this.clientHeight - 200 + this.iframeHeight + 'px' : this.clientHeight - 200 + 'px' |
|
|
|
|
|
|
|
...mapGetters(['clientHeight', 'iframeHeight']) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
}, |
|
|
|
|
|
|
|
handleSearch () { |
|
|
|
if (this.ownerName || this.ownerPhone || this.rentFlag || this.purpose || this.remark) { |
|
|
|
this.showRoomTable = true |
|
|
|
...mapGetters(['clientHeight', 'iframeHeight']) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs['ref_buildingTable'].loadTable('search', this.selTreeObj) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$message.warning('请输入查询条件') |
|
|
|
} |
|
|
|
handleSearch () { |
|
|
|
if (this.ownerName || this.ownerPhone || this.rentFlag || this.purpose || this.remark) { |
|
|
|
this.showRoomTable = true |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs['ref_buildingTable'].loadTable('search', this.selTreeObj) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$message.warning('请输入查询条件') |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//重置搜索条件 |
|
|
|
resetSearch () { |
|
|
|
this.ownerName = '' |
|
|
|
this.ownerPhone = '' |
|
|
|
this.rentFlag = '' |
|
|
|
this.purpose = '' |
|
|
|
this.remark = '' |
|
|
|
|
|
|
|
this.pageSize = 10 |
|
|
|
this.pageNo = 1 |
|
|
|
this.handleNodeClick(this.selObj) |
|
|
|
// this.loadTable() |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
async loadOpenNode () { |
|
|
|
const url = "/gov/org/building/tree-ids" |
|
|
|
let params = {} |
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
|
|
|
|
if (code === 0) { |
|
|
|
this.openNodes = data |
|
|
|
//重置搜索条件 |
|
|
|
resetSearch () { |
|
|
|
this.ownerName = '' |
|
|
|
this.ownerPhone = '' |
|
|
|
this.rentFlag = '' |
|
|
|
this.purpose = '' |
|
|
|
this.remark = '' |
|
|
|
|
|
|
|
this.pageSize = 10 |
|
|
|
this.pageNo = 1 |
|
|
|
this.handleNodeClick(this.selObj) |
|
|
|
// this.loadTable() |
|
|
|
}, |
|
|
|
|
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
async loadTree (isRefresh) { |
|
|
|
const url = "/gov/org/building/treelist" |
|
|
|
let params = {} |
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
|
|
|
|
if (code === 0) { |
|
|
|
|
|
|
|
this.treeData = data |
|
|
|
if (!isRefresh && data.length > 0) { |
|
|
|
|
|
|
|
this.selTreeObj = data[0] |
|
|
|
if (!this.selTreeObj.latitude) { |
|
|
|
this.selTreeObj.latitude = this.centerPoint[0] |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.selTreeObj.longitude) { |
|
|
|
this.selTreeObj.longitude = this.centerPoint[1] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//加载组织数据 |
|
|
|
async loadOrgData () { |
|
|
|
const url = "/gov/org/agency/maporg" |
|
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg" |
|
|
|
let params = {} |
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
|
|
|
|
if (code === 0) { |
|
|
|
this.centerPoint = [] |
|
|
|
|
|
|
|
this.centerPoint.push(data.latitude) |
|
|
|
this.centerPoint.push(data.longitude) |
|
|
|
|
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
handleNodeClick (obj) { |
|
|
|
this.ownerName = '' |
|
|
|
this.ownerPhone = '' |
|
|
|
this.rentFlag = '' |
|
|
|
this.purpose = '' |
|
|
|
this.remark = '' |
|
|
|
this.showRoomTable = false |
|
|
|
|
|
|
|
this.selObj = JSON.parse(JSON.stringify(obj)) |
|
|
|
this.getTreeObj(obj) |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
if (obj.level === 'building') {//点击楼栋 |
|
|
|
this.$refs['ref_buildingTable'].loadTable('tree', this.selTreeObj) |
|
|
|
|
|
|
|
} else if (obj.level === 'neighborHood') {//点击小区 |
|
|
|
this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj) |
|
|
|
|
|
|
|
} else { |
|
|
|
this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//添加小区结束 |
|
|
|
async refreshTree () { |
|
|
|
this.treeLoading = true |
|
|
|
await this.loadTree(this.selTreeObj.id) |
|
|
|
this.$nextTick(() => { |
|
|
|
// ref_tree 元素的ref value 绑定的node-key |
|
|
|
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|
|
|
}); |
|
|
|
this.treeLoading = false |
|
|
|
}, |
|
|
|
|
|
|
|
//进入下一级 |
|
|
|
toNextLevel (row, level) { |
|
|
|
|
|
|
|
if (level === 'community') { |
|
|
|
this.selTreeObj = this.$refs.ref_tree.getNode(row.neighborHoodId).data |
|
|
|
this.openNodes.push(this.selTreeObj.id) |
|
|
|
} else { |
|
|
|
this.selTreeObj = this.$refs.ref_tree.getNode(row.buildingId).data |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.handleNodeClick(this.selTreeObj) |
|
|
|
this.$nextTick(() => { |
|
|
|
// ref_tree 元素的ref value 绑定的node-key |
|
|
|
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|
|
|
}); |
|
|
|
|
|
|
|
const node = document.getElementById(this.selTreeObj.id) // 通过Id获取到对应的dom元素 |
|
|
|
setTimeout(() => { |
|
|
|
if (node) { |
|
|
|
this.$nextTick(() => { |
|
|
|
node.scrollIntoView({ block: 'center' }) // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示 |
|
|
|
}) |
|
|
|
} |
|
|
|
}, 100) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//解析树数据 |
|
|
|
getTreeObj (obj) { |
|
|
|
// 树接口： |
|
|
|
// 组织：组织id、组织名称、type、经度、纬度 |
|
|
|
// 小区：小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度 |
|
|
|
// 楼：楼id、楼名称、type、所属小区id、所属小区名称 |
|
|
|
if (obj.level === 'building') {//点击楼栋 |
|
|
|
let neighborHoodNode = this.$refs.ref_tree.getNode(obj.pid)//所属小区 |
|
|
|
|
|
|
|
let gridNode = this.$refs.ref_tree.getNode(neighborHoodNode.data.pid)//所属网格 |
|
|
|
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid)//所属社区 |
|
|
|
obj.agencyId = agencyNode.data.id |
|
|
|
obj.agencyName = agencyNode.data.label |
|
|
|
obj.gridId = gridNode.data.id |
|
|
|
obj.gridName = gridNode.data.label |
|
|
|
obj.neighborHoodId = neighborHoodNode.data.id |
|
|
|
obj.neighborHoodName = neighborHoodNode.data.label |
|
|
|
if (obj.agencyId === this.staffAgencyId) { |
|
|
|
this.showImportBtn = true |
|
|
|
} else { |
|
|
|
this.showImportBtn = false |
|
|
|
} |
|
|
|
|
|
|
|
} else if (obj.level === 'neighborHood') {//点击小区 |
|
|
|
let gridNode = this.$refs.ref_tree.getNode(obj.pid) |
|
|
|
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid) |
|
|
|
obj.gridId = gridNode.data.id |
|
|
|
obj.gridName = gridNode.data.label |
|
|
|
obj.agencyId = agencyNode.data.id |
|
|
|
obj.agencyName = agencyNode.data.label |
|
|
|
if (obj.agencyId === this.staffAgencyId) { |
|
|
|
this.showImportBtn = true |
|
|
|
} else { |
|
|
|
this.showImportBtn = false |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (!obj.latitude) { |
|
|
|
obj.latitude = this.centerPoint[0] |
|
|
|
} |
|
|
|
|
|
|
|
if (!obj.longitude) { |
|
|
|
obj.longitude = this.centerPoint[1] |
|
|
|
} |
|
|
|
this.selTreeObj = obj |
|
|
|
console.log(this.selTreeObj) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
filterNode (value, data) { |
|
|
|
if (!value) return true; |
|
|
|
return data.label.indexOf(value) !== -1; |
|
|
|
}, |
|
|
|
|
|
|
|
// 开启加载动画 |
|
|
|
startLoading () { |
|
|
|
loading = Loading.service({ |
|
|
|
lock: true, // 是否锁定 |
|
|
|
text: '正在加载……', // 加载中需要显示的文字 |
|
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 结束加载动画 |
|
|
|
endLoading () { |
|
|
|
// clearTimeout(timer); |
|
|
|
if (loading) { |
|
|
|
loading.close() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
filterText (val) { |
|
|
|
this.$refs.ref_tree.filter(val); |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
communityTable, buildTable, roomTable |
|
|
|
async loadOpenNode () { |
|
|
|
const url = "/gov/org/building/tree-ids" |
|
|
|
let params = {} |
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
|
|
|
|
if (code === 0) { |
|
|
|
this.openNodes = data |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
async loadTree (isRefresh) { |
|
|
|
const url = "/gov/org/building/treelist" |
|
|
|
let params = {} |
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
|
|
|
|
if (code === 0) { |
|
|
|
|
|
|
|
this.treeData = data |
|
|
|
if (!isRefresh && data.length > 0) { |
|
|
|
|
|
|
|
this.selTreeObj = data[0] |
|
|
|
if (!this.selTreeObj.latitude) { |
|
|
|
this.selTreeObj.latitude = this.centerPoint[0] |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.selTreeObj.longitude) { |
|
|
|
this.selTreeObj.longitude = this.centerPoint[1] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped > |
|
|
|
.div_main { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.scrollar { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.div_tree { |
|
|
|
flex: 0 0 280px; |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 5px; |
|
|
|
padding: 10px; |
|
|
|
overflow-y: hidden; |
|
|
|
} |
|
|
|
.filter_tree { |
|
|
|
overflow-x: auto; |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
.div_table { |
|
|
|
margin-left: 15px; |
|
|
|
// flex: 1; |
|
|
|
width: calc(100% - 300px); |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 5px; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
//加载组织数据 |
|
|
|
async loadOrgData () { |
|
|
|
const url = "/gov/org/agency/maporg" |
|
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg" |
|
|
|
let params = {} |
|
|
|
|
|
|
|
.div_btn { |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
|
|
|
|
if (code === 0) { |
|
|
|
this.centerPoint = [] |
|
|
|
|
|
|
|
this.centerPoint.push(data.latitude) |
|
|
|
this.centerPoint.push(data.longitude) |
|
|
|
|
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
|
|
|
|
.row { |
|
|
|
padding: 10px; |
|
|
|
}, |
|
|
|
|
|
|
|
handleNodeClick (obj) { |
|
|
|
this.ownerName = '' |
|
|
|
this.ownerPhone = '' |
|
|
|
this.rentFlag = '' |
|
|
|
this.purpose = '' |
|
|
|
this.remark = '' |
|
|
|
this.showRoomTable = false |
|
|
|
|
|
|
|
this.selObj = JSON.parse(JSON.stringify(obj)) |
|
|
|
this.getTreeObj(obj) |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
if (obj.level === 'building') {//点击楼栋 |
|
|
|
this.$refs['ref_buildingTable'].loadTable('tree', this.selTreeObj) |
|
|
|
|
|
|
|
} else if (obj.level === 'neighborHood') {//点击小区 |
|
|
|
this.$refs['ref_neighTable'].loadTable(true, this.selTreeObj) |
|
|
|
|
|
|
|
} else { |
|
|
|
this.$refs['ref_communityTable'].loadTable(true, this.selTreeObj) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//添加小区结束 |
|
|
|
async refreshTree () { |
|
|
|
this.treeLoading = true |
|
|
|
await this.loadTree(this.selTreeObj.id) |
|
|
|
this.$nextTick(() => { |
|
|
|
// ref_tree 元素的ref value 绑定的node-key |
|
|
|
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|
|
|
}); |
|
|
|
this.treeLoading = false |
|
|
|
}, |
|
|
|
|
|
|
|
//进入下一级 |
|
|
|
toNextLevel (row, level) { |
|
|
|
|
|
|
|
if (level === 'community') { |
|
|
|
this.selTreeObj = this.$refs.ref_tree.getNode(row.neighborHoodId).data |
|
|
|
this.openNodes.push(this.selTreeObj.id) |
|
|
|
} else { |
|
|
|
this.selTreeObj = this.$refs.ref_tree.getNode(row.buildingId).data |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.handleNodeClick(this.selTreeObj) |
|
|
|
this.$nextTick(() => { |
|
|
|
// ref_tree 元素的ref value 绑定的node-key |
|
|
|
this.$refs.ref_tree.setCurrentKey(this.selTreeObj.id); |
|
|
|
}); |
|
|
|
|
|
|
|
const node = document.getElementById(this.selTreeObj.id) // 通过Id获取到对应的dom元素 |
|
|
|
setTimeout(() => { |
|
|
|
if (node) { |
|
|
|
this.$nextTick(() => { |
|
|
|
node.scrollIntoView({ block: 'center' }) // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示 |
|
|
|
}) |
|
|
|
} |
|
|
|
}, 100) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//解析树数据 |
|
|
|
getTreeObj (obj) { |
|
|
|
// 树接口： |
|
|
|
// 组织：组织id、组织名称、type、经度、纬度 |
|
|
|
// 小区：小区id、小区名称、type、所属网格id、所属网格名称、所属组织id、所属组织名称、经度、纬度 |
|
|
|
// 楼：楼id、楼名称、type、所属小区id、所属小区名称 |
|
|
|
if (obj.level === 'building') {//点击楼栋 |
|
|
|
let neighborHoodNode = this.$refs.ref_tree.getNode(obj.pid)//所属小区 |
|
|
|
|
|
|
|
let gridNode = this.$refs.ref_tree.getNode(neighborHoodNode.data.pid)//所属网格 |
|
|
|
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid)//所属社区 |
|
|
|
obj.agencyId = agencyNode.data.id |
|
|
|
obj.agencyName = agencyNode.data.label |
|
|
|
obj.gridId = gridNode.data.id |
|
|
|
obj.gridName = gridNode.data.label |
|
|
|
obj.neighborHoodId = neighborHoodNode.data.id |
|
|
|
obj.neighborHoodName = neighborHoodNode.data.label |
|
|
|
if (obj.agencyId === this.staffAgencyId) { |
|
|
|
this.showImportBtn = true |
|
|
|
} else { |
|
|
|
this.showImportBtn = false |
|
|
|
} |
|
|
|
|
|
|
|
} else if (obj.level === 'neighborHood') {//点击小区 |
|
|
|
let gridNode = this.$refs.ref_tree.getNode(obj.pid) |
|
|
|
let agencyNode = this.$refs.ref_tree.getNode(gridNode.data.pid) |
|
|
|
obj.gridId = gridNode.data.id |
|
|
|
obj.gridName = gridNode.data.label |
|
|
|
obj.agencyId = agencyNode.data.id |
|
|
|
obj.agencyName = agencyNode.data.label |
|
|
|
if (obj.agencyId === this.staffAgencyId) { |
|
|
|
this.showImportBtn = true |
|
|
|
} else { |
|
|
|
this.showImportBtn = false |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (!obj.latitude) { |
|
|
|
obj.latitude = this.centerPoint[0] |
|
|
|
} |
|
|
|
|
|
|
|
if (!obj.longitude) { |
|
|
|
obj.longitude = this.centerPoint[1] |
|
|
|
} |
|
|
|
this.selTreeObj = obj |
|
|
|
console.log(this.selTreeObj) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
filterNode (value, data) { |
|
|
|
if (!value) return true; |
|
|
|
return data.label.indexOf(value) !== -1; |
|
|
|
}, |
|
|
|
|
|
|
|
// 开启加载动画 |
|
|
|
startLoading () { |
|
|
|
loading = Loading.service({ |
|
|
|
lock: true, // 是否锁定 |
|
|
|
text: '正在加载……', // 加载中需要显示的文字 |
|
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 结束加载动画 |
|
|
|
endLoading () { |
|
|
|
// clearTimeout(timer); |
|
|
|
if (loading) { |
|
|
|
loading.close() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
filterText (val) { |
|
|
|
this.$refs.ref_tree.filter(val); |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
communityTable, buildTable, roomTable |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped > |
|
|
|
.div_main { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.scrollar { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.div_tree { |
|
|
|
flex: 0 0 280px; |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 5px; |
|
|
|
padding: 10px; |
|
|
|
overflow-y: hidden; |
|
|
|
} |
|
|
|
.filter_tree { |
|
|
|
overflow-x: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.div_table { |
|
|
|
margin-left: 15px; |
|
|
|
// flex: 1; |
|
|
|
width: calc(100% - 300px); |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 5px; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.div_btn { |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.row { |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style> |
|
|
|
/* .aui-content > .el-tabs > .el-tabs__content { |
|
|
|
/* .aui-content > .el-tabs > .el-tabs__content { |
|
|
|
padding: 0px; |
|
|
|
} */ |
|
|
|
|
|
|
|
.el-tree-node:focus > .el-tree-node__content { |
|
|
|
/* background-color: #ccc !important; */ |
|
|
|
color: #2195fe; |
|
|
|
} |
|
|
|
.el-tree-node:focus > .el-tree-node__content { |
|
|
|
/* background-color: #ccc !important; */ |
|
|
|
color: #2195fe; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.div_tree { |
|
|
|
/deep/ .el-scrollbar__wrap { |
|
|
|
overflow-x: hidden !important; |
|
|
|
} |
|
|
|
.div_tree { |
|
|
|
/deep/ .el-scrollbar__wrap { |
|
|
|
overflow-x: hidden !important; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style lang="scss" scoped > |
|
|
|
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|
|
|
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|
|
|
</style> |
|
|
|
|
jiangyy
4 years ago
