|
|
|
|
@ -0,0 +1,426 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="bs-container">
|
|
|
|
|
<div class="inner-container">
|
|
|
|
|
<el-form
|
|
|
|
|
:inline="true"
|
|
|
|
|
class="filter-container"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item class="filter-input filter-item">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="searchForm.searchKey"
|
|
|
|
|
class="bs-el-input"
|
|
|
|
|
clearable
|
|
|
|
|
maxlength="200"
|
|
|
|
|
placeholder="请输入地图名称或编码"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="filter-item">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="searchForm.level"
|
|
|
|
|
class="bs-el-select"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="请选择地图级别"
|
|
|
|
|
popper-class="bs-el-select"
|
|
|
|
|
@change="getDataList"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="level in levelList"
|
|
|
|
|
:key="level.value"
|
|
|
|
|
:label="level.label"
|
|
|
|
|
:value="level.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="filter-item">
|
|
|
|
|
<el-button
|
|
|
|
|
:loading="searchLoading"
|
|
|
|
|
icon="el-icon-search"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="getDataList"
|
|
|
|
|
>
|
|
|
|
|
查询
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="filter-item">
|
|
|
|
|
<el-button
|
|
|
|
|
class="bs-el-button-default"
|
|
|
|
|
@click="addMap"
|
|
|
|
|
>
|
|
|
|
|
新增
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div class="bs-table-box">
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="searchLoading"
|
|
|
|
|
ref="table"
|
|
|
|
|
v-table
|
|
|
|
|
:data="mapList"
|
|
|
|
|
:element-loading-text="loadingText"
|
|
|
|
|
:load="load"
|
|
|
|
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
|
|
class="bs-el-table bs-scrollbar"
|
|
|
|
|
height="0"
|
|
|
|
|
lazy
|
|
|
|
|
row-key="id"
|
|
|
|
|
>
|
|
|
|
|
<el-empty slot="empty"/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="left"
|
|
|
|
|
label="名称"
|
|
|
|
|
prop="name"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="编码"
|
|
|
|
|
prop="mapCode"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="级别"
|
|
|
|
|
prop="level"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span v-if="scope.row.level === 0">世界</span>
|
|
|
|
|
<span v-else-if="scope.row.level === 1">国家</span>
|
|
|
|
|
<span v-else-if="scope.row.level === 2">省份</span>
|
|
|
|
|
<span v-else-if="scope.row.level === 3">城市</span>
|
|
|
|
|
<span v-else-if="scope.row.level === 4">区县</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="开启下钻"
|
|
|
|
|
prop="enableDown"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span v-if="scope.row.enableDown === 1">是</span>
|
|
|
|
|
<span v-else>否</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="已上传配置JSON"
|
|
|
|
|
prop="uploadedGeoJson"
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span v-if="scope.row.uploadedGeoJson === 1">是</span>
|
|
|
|
|
<span v-else>否</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
label="操作"
|
|
|
|
|
width="200"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
class="bs-el-button-default"
|
|
|
|
|
@click="editMap(scope.row)"
|
|
|
|
|
>
|
|
|
|
|
编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
class="bs-el-button-default"
|
|
|
|
|
@click="deleteMap(scope.row)"
|
|
|
|
|
>
|
|
|
|
|
删除
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="scope.row.uploadedGeoJson === 1"
|
|
|
|
|
class="bs-el-button-default"
|
|
|
|
|
@click="addChild(scope.row)"
|
|
|
|
|
>
|
|
|
|
|
添加下级
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="scope.row.uploadedGeoJson === 0"
|
|
|
|
|
class="bs-el-button-default"
|
|
|
|
|
@click="uploadGeoJson(scope.row)"
|
|
|
|
|
>
|
|
|
|
|
上传配置
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<add-form
|
|
|
|
|
ref="addForm"
|
|
|
|
|
@refresh="getDataList"
|
|
|
|
|
/>
|
|
|
|
|
<edit-form
|
|
|
|
|
ref="editForm"
|
|
|
|
|
@refresh="getDataList"
|
|
|
|
|
/>
|
|
|
|
|
<el-dialog
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
:visible.sync="geoJsonVisible"
|
|
|
|
|
append-to-body
|
|
|
|
|
class="bs-dialog-wrap bs-el-dialog"
|
|
|
|
|
height="1000px"
|
|
|
|
|
title="geoJson数据"
|
|
|
|
|
width="1000px"
|
|
|
|
|
>
|
|
|
|
|
<vue-json-viewer
|
|
|
|
|
v-model="currentMapGeoJSon"
|
|
|
|
|
theme="dark"
|
|
|
|
|
:show-btns="false"
|
|
|
|
|
mode="code"
|
|
|
|
|
/>
|
|
|
|
|
<el-button
|
|
|
|
|
class="bs-el-button-default"
|
|
|
|
|
@click="upload()"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-upload2"></i>
|
|
|
|
|
上传
|
|
|
|
|
</el-button>
|
|
|
|
|
<span
|
|
|
|
|
slot="footer"
|
|
|
|
|
class="dialog-footer"
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
class="bs-el-button-default"
|
|
|
|
|
@click="submitUpload"
|
|
|
|
|
>提交</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<input
|
|
|
|
|
ref="geoJsonFileUpload"
|
|
|
|
|
accept=".json"
|
|
|
|
|
name="file"
|
|
|
|
|
style="display: none"
|
|
|
|
|
type="file"
|
|
|
|
|
@change="handleBatchUpload"
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import table from 'data-room-ui/js/utils/table.js'
|
|
|
|
|
import {mapList, mapDelete, uploadGeoJson, mapCascadeDelete} from 'data-room-ui/js/utils/mapDataService'
|
|
|
|
|
import AddForm from "./AddForm"
|
|
|
|
|
import EditForm from "./EditForm"
|
|
|
|
|
import vueJsonViewer from 'vue-json-viewer'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "MapManagement",
|
|
|
|
|
directives: {
|
|
|
|
|
table // 注册自定义指令
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
AddForm,
|
|
|
|
|
EditForm,
|
|
|
|
|
vueJsonViewer
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
currentMap: {}, // 当前操作的地图
|
|
|
|
|
currentMapGeoJSon: {}, // 当前操作的地图geoJson
|
|
|
|
|
loadingText: '',
|
|
|
|
|
searchLoading: false,
|
|
|
|
|
geoJsonVisible: false,
|
|
|
|
|
lazyResolveIds: [],
|
|
|
|
|
searchForm: {
|
|
|
|
|
searchKey: '',
|
|
|
|
|
level: null,
|
|
|
|
|
enableDown: null,
|
|
|
|
|
uploadedGeoJson: null,
|
|
|
|
|
parentCode: '0'
|
|
|
|
|
},
|
|
|
|
|
levelList: [
|
|
|
|
|
{
|
|
|
|
|
label: '世界',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '国家',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '省份',
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '城市',
|
|
|
|
|
value: 3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '区县',
|
|
|
|
|
value: 4
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
mapList: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.init()
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init() {
|
|
|
|
|
this.searchLoading = true
|
|
|
|
|
this.loadingText = '正在加载地图数据...'
|
|
|
|
|
mapList(this.searchForm).then(res => {
|
|
|
|
|
this.mapList = res
|
|
|
|
|
this.searchLoading = false
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
this.searchLoading = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getDataList() {
|
|
|
|
|
this.searchLoading = true
|
|
|
|
|
this.loadingText = '正在加载地图数据...'
|
|
|
|
|
mapList(this.searchForm).then(res => {
|
|
|
|
|
this.mapList = res
|
|
|
|
|
this.searchLoading = false
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
this.searchLoading = false
|
|
|
|
|
})
|
|
|
|
|
// 清除展开状态
|
|
|
|
|
for (let i = 0; i < this.lazyResolveIds.length; i++) {
|
|
|
|
|
this.$refs.table.store.states.treeData[this.lazyResolveIds[i]].loaded = false;
|
|
|
|
|
this.$refs.table.store.states.treeData[this.lazyResolveIds[i]].expanded = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
addMap() {
|
|
|
|
|
this.$refs.addForm.mapFormVisible = true
|
|
|
|
|
this.$refs.addForm.init()
|
|
|
|
|
},
|
|
|
|
|
load(data, treeNode, resolve) {
|
|
|
|
|
this.lazyResolveIds.push(data.id)
|
|
|
|
|
mapList({
|
|
|
|
|
parentCode: data.mapCode
|
|
|
|
|
}).then(res => {
|
|
|
|
|
resolve(res)
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
resolve([])
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
deleteMap(map) {
|
|
|
|
|
this.$confirm('确定删除该地图？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
customClass: 'bs-el-message-box'
|
|
|
|
|
}).then(async () => {
|
|
|
|
|
mapDelete(map.id).then(() => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '删除成功'
|
|
|
|
|
})
|
|
|
|
|
this.getDataList()
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.deleteMapCascade(map)
|
|
|
|
|
})
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
deleteMapCascade(map) {
|
|
|
|
|
this.$confirm('该地图存在子级，是否直接删除该地图以及其所有子级？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
customClass: 'bs-el-message-box'
|
|
|
|
|
}).then(async () => {
|
|
|
|
|
mapCascadeDelete(map.id).then(() => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '删除成功'
|
|
|
|
|
})
|
|
|
|
|
this.getDataList()
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
})
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
addChild(map) {
|
|
|
|
|
this.$refs.addForm.mapFormVisible = true
|
|
|
|
|
this.$refs.addForm.init(map)
|
|
|
|
|
},
|
|
|
|
|
editMap(map) {
|
|
|
|
|
this.$refs.editForm.mapFormVisible = true
|
|
|
|
|
this.$refs.editForm.init(map)
|
|
|
|
|
},
|
|
|
|
|
uploadGeoJson(map) {
|
|
|
|
|
this.currentMap = map
|
|
|
|
|
this.currentMapGeoJSon = {}
|
|
|
|
|
this.geoJsonVisible = true
|
|
|
|
|
},
|
|
|
|
|
upload() {
|
|
|
|
|
this.$refs.geoJsonFileUpload.click()
|
|
|
|
|
},
|
|
|
|
|
handleBatchUpload(source) {
|
|
|
|
|
this.uploadLoading = true
|
|
|
|
|
const file = source.target.files
|
|
|
|
|
const reader = new FileReader() // 新建一个FileReader
|
|
|
|
|
reader.readAsText(file[0], 'UTF-8') // 读取文件
|
|
|
|
|
|
|
|
|
|
reader.onload = (event) => {
|
|
|
|
|
let jsonStr = event.target.result
|
|
|
|
|
// 读取文件内容
|
|
|
|
|
try {
|
|
|
|
|
this.currentMapGeoJSon = JSON.parse(jsonStr)
|
|
|
|
|
} catch (e) {
|
|
|
|
|
this.uploadLoading = false
|
|
|
|
|
this.$message.error('JSON文件格式错误')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
this.uploadLoading = false
|
|
|
|
|
// input通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的，所以需要手动清空input的值
|
|
|
|
|
source.target.value = ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
submitUpload() {
|
|
|
|
|
// 先检查JSON是否合法
|
|
|
|
|
if (typeof this.currentMapGeoJSon === 'string') {
|
|
|
|
|
this.$message.error('JSON文件格式错误')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
if (this.currentMapGeoJSon === {}) {
|
|
|
|
|
this.$message.error('JSON数据不能为空')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
// 调接口保存
|
|
|
|
|
uploadGeoJson({
|
|
|
|
|
id: this.currentMap.id,
|
|
|
|
|
geoJson: JSON.stringify(this.currentMapGeoJSon)
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '上传成功'
|
|
|
|
|
})
|
|
|
|
|
this.geoJsonVisible = false
|
|
|
|
|
this.getDataList()
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'error',
|
|
|
|
|
message: '上传失败'
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
this.geoJsonVisible = false
|
|
|
|
|
},
|
|
|
|
|
isWhitespace(str) {
|
|
|
|
|
// 如果是null、undefined，返回true
|
|
|
|
|
if (str == null) {
|
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
return /^\s*$/.test(str);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import '../../assets/style/bsTheme.scss';
|
|
|
|
|
.jv-container.dark {
|
|
|
|
|
color: aliceblue;
|
|
|
|
|
background: #161A26;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
hong.yang
2 years ago