forked from github/dataease
Merge pull request #6435 from dataease/pr@dev-v2@feat_geometry_config
Pr@dev v2@feat geometry config
This commit is contained in:
fit2cloud-chenyw
GitHub
commit
86a1da3243
2
.gitignore
vendored
2
.gitignore
vendored
@ -48,3 +48,5 @@ core/core-frontend/src/assets/fsSvg.html
|
||||
/sdk/dataease-plugin-filter/
|
||||
/sdk/dataease-plugin-interface/
|
||||
/sdk/dataease-plugin-view/
|
||||
/extensions/
|
||||
.vite/
|
||||
|
||||
@ -40,7 +40,7 @@ const handleClick = (tab, event: Event) => {
|
||||
.sys-setting-p {
|
||||
width: 100%;
|
||||
background: var(--ContentBG, #ffffff);
|
||||
height: calc(100% - 95px);
|
||||
height: calc(100vh - 176px);
|
||||
box-sizing: border-box;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-container class="geometry-container">
|
||||
<el-aside width="200px" class="geonetry-aside">
|
||||
<el-aside class="geonetry-aside">
|
||||
<div class="geo-title">
|
||||
<span>{{ t('online_map.geometry') }}</span>
|
||||
<span class="add-icon-span">
|
||||
@ -10,7 +10,13 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="geo-search">
|
||||
<el-input class="m16 w100" v-model="keyword" clearable :placeholder="t('commons.search')">
|
||||
<el-input
|
||||
class="m16 w100"
|
||||
v-model="keyword"
|
||||
clearable
|
||||
:placeholder="t('commons.search')"
|
||||
@change="filterResource"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Icon name="icon_search-outline_outlined"></Icon>
|
||||
@ -19,90 +25,118 @@
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="map-tree-container">
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
|
||||
<el-scrollbar class="menu-tree">
|
||||
<el-tree
|
||||
menu
|
||||
ref="areaTreeRef"
|
||||
node-key="id"
|
||||
:data="treeData"
|
||||
@node-click="handleNodeClick"
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
:default-expand-all="false"
|
||||
:filter-node-method="filterResourceNode"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node" :class="{ 'is-disabled': node.disabled || data.root }">
|
||||
<span
|
||||
:title="data.name"
|
||||
v-html="data.colorName && keyword ? data.colorName : data.name"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main>地理信息内容区域</el-main>
|
||||
<el-main class="geometry-main">
|
||||
<div class="geo-content-container" v-if="!selectedData">
|
||||
<EmptyBackground img-type="noneWhite" description="请在左侧选择区域" />
|
||||
</div>
|
||||
<div v-else class="geo-content-container">
|
||||
<div class="geo-content-top">
|
||||
<span>{{ selectedData.name }}</span>
|
||||
</div>
|
||||
<div class="geo-content-middle">
|
||||
<div class="geo-area">
|
||||
<div class="area-label"><span>区域代码</span></div>
|
||||
<div class="area-content">
|
||||
<span>{{ selectedData.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="geo-area">
|
||||
<div class="area-label"><span>上级区域</span></div>
|
||||
<div class="area-content">
|
||||
<span>{{ selectedData.parentName }}</span>
|
||||
<span v-if="selectedData.pid" class="area-secondary">{{
|
||||
'(' + selectedData.pid + ')'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="geo-content-bottom">
|
||||
<div class="area-label"><span>坐标文件</span></div>
|
||||
<el-scrollbar class="area-content-geo">
|
||||
<span>{{ selectedData.geoJson }}</span>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { getWorldTree } from '@/api/map'
|
||||
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
|
||||
import { getGeoJsonFile } from '@/views/chart/components/js/util'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { setColorName } from '@/utils/utils'
|
||||
const { t } = useI18n()
|
||||
const keyword = ref('')
|
||||
|
||||
const treeData = ref([])
|
||||
interface Tree {
|
||||
label: string
|
||||
children?: Tree[]
|
||||
}
|
||||
const areaTreeRef = ref(null)
|
||||
|
||||
const handleNodeClick = (data: Tree) => {
|
||||
console.log(data)
|
||||
}
|
||||
const selectedData = ref(null)
|
||||
|
||||
const data: Tree[] = [
|
||||
{
|
||||
label: 'Level one 1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-1-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Level one 2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 2-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 2-1-1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Level two 2-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 2-2-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Level one 3',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 3-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 3-1-1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Level two 3-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 3-2-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
const handleNodeClick = async (data: Tree) => {
|
||||
selectedData.value = data
|
||||
const geoJson = cloneDeep(await getGeoJsonFile(data['id']))
|
||||
selectedData.value['geoJson'] = geoJson
|
||||
const pid = data['pid']
|
||||
if (pid) {
|
||||
const parent = areaTreeRef.value.getNode(pid)
|
||||
if (parent) {
|
||||
selectedData.value.parentName = parent.data.name
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
const filterResource = val => {
|
||||
areaTreeRef.value?.filter(val)
|
||||
}
|
||||
const filterResourceNode = (value: string, data) => {
|
||||
setColorName(data, value)
|
||||
if (!value) return true
|
||||
return data.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||
}
|
||||
|
||||
const loadTreeData = () => {
|
||||
getWorldTree()
|
||||
.then(res => {
|
||||
const root = res.data
|
||||
treeData.value = [root]
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e)
|
||||
})
|
||||
}
|
||||
|
||||
loadTreeData()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -112,6 +146,7 @@ const defaultProps = {
|
||||
width: 280px !important;
|
||||
border-right: 1px solid #1f232926;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
.geo-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -123,6 +158,7 @@ const defaultProps = {
|
||||
line-height: 24px;
|
||||
}
|
||||
.add-icon-span {
|
||||
display: none;
|
||||
color: #3370ff;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@ -140,6 +176,79 @@ const defaultProps = {
|
||||
.geo-search {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.map-tree-container {
|
||||
height: calc(100% - 96px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.geometry-main {
|
||||
padding: 16px !important;
|
||||
}
|
||||
}
|
||||
.geo-content-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.geo-content-top {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 16px;
|
||||
span {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #1f2329;
|
||||
}
|
||||
}
|
||||
.geo-content-middle {
|
||||
display: flex;
|
||||
.geo-area {
|
||||
height: 48px;
|
||||
width: 50%;
|
||||
}
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
:deep(.area-label) {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #646a73;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
:deep(.area-content) {
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #1f2329;
|
||||
font-weight: 400;
|
||||
}
|
||||
.area-secondary {
|
||||
color: #646a73;
|
||||
}
|
||||
}
|
||||
.geo-content-bottom {
|
||||
width: 100%;
|
||||
height: calc(100% - 110px);
|
||||
.area-content-geo {
|
||||
line-height: 22px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 30px);
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #1f2329;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: content-box;
|
||||
padding-right: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user