You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<template>
|
|
<div class="curb-spot-city">
|
|
<div class="show-list">
|
|
<a-spin :spinning="spinning">
|
|
<MapList
|
|
@changeLoading="changeLoading"
|
|
@changeTask="changeTask"/>
|
|
</a-spin>
|
|
</div>
|
|
<MapboxMap
|
|
:mapConfig="mapConfig"
|
|
@mapOnLoad="onMapboxLoad"
|
|
ref="MapboxComponent"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, defineAsyncComponent, onMounted } from "vue"
|
|
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
|
import { getGeom, getConfig } from '@/api/sys/layerManagement';
|
|
import { message } from 'ant-design-vue'
|
|
import MapList from './MapList/index.vue'
|
|
|
|
const spinning = ref(false)
|
|
const mapConfig = ref({ isShowMap: false });
|
|
const MapboxComponent = ref();
|
|
|
|
const changeLoading = (value: boolean) => {
|
|
spinning.value = value
|
|
}
|
|
function onMapboxLoad(): void {
|
|
getConfig({ code: 'mapsetting' }).then((res) => {
|
|
mapConfig.value = JSON.parse(res.codeValue);
|
|
});
|
|
}
|
|
function changeTask(val) {
|
|
let getGeomPrams = {
|
|
TableName: 'drone_shp_data ',
|
|
FieldName: 'gid',
|
|
FieldValue: val?.split(','),
|
|
page: 1,
|
|
limit: 999,
|
|
key: null,
|
|
};
|
|
if (val) {
|
|
getGeom(getGeomPrams).then((res) => {
|
|
let geoms:any[] = [];
|
|
if (res) {
|
|
if (res.items?.length > 0) {
|
|
res.items.forEach((item, index) => {
|
|
let geom = {
|
|
key: item.gid,
|
|
mapgeom: item.geometry,
|
|
};
|
|
geoms.push(geom);
|
|
});
|
|
}
|
|
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
|
} else {
|
|
message.error('当前数据没有线索！');
|
|
}
|
|
});
|
|
} else {
|
|
message.error('当前数据没有线索！');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.curb-spot-city {
|
|
height: 100%;
|
|
display: flex;
|
|
.show-list {
|
|
width: 590px;
|
|
background: #efefef;
|
|
:deep(.ant-spin-nested-loading) {
|
|
height: 100%;
|
|
width: 590px;
|
|
}
|
|
:deep(.ant-spin-container) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|