diff --git a/src/views/demo/system/achievement/Display/TimeLine.vue b/src/views/demo/system/achievement/Display/TimeLine.vue new file mode 100644 index 00000000..274a5862 --- /dev/null +++ b/src/views/demo/system/achievement/Display/TimeLine.vue @@ -0,0 +1,223 @@ + + + + diff --git a/src/views/demo/system/achievement/Display/index.vue b/src/views/demo/system/achievement/Display/index.vue index a54fb2bb..e79d5053 100644 --- a/src/views/demo/system/achievement/Display/index.vue +++ b/src/views/demo/system/achievement/Display/index.vue @@ -4,12 +4,18 @@
图层列表
+
+ +
([]); + const expandedKeys = ref(['1', '2', '3']); + const checkedKeys = ref([]); const treeData: any = ref(prepareTreeData); let tableData1: any = []; let tableData2: any = []; let tableData3: any = []; + let tableData3_id_list: any = []; let tableData3_tupian: any = []; + let startTime = dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'); + let endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'); + // 右边树的数据 function fetch() { // 矢量图层 @@ -108,6 +111,9 @@ pageSize: 100, }).then((res) => { tableData3 = res.items; + res.items.forEach((item) => { + tableData3_id_list.push(item.id); + }); tableData3_tupian = []; treeData.value[2].children = []; res.items.forEach((item1) => { @@ -162,88 +168,81 @@ // 地图ref const mapboxComponentRef = ref(); + let selectedKeys_now: any; + let info_now: any; // 树选中 const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => { - console.log(177, selectedKeys, info); - if (!['1', '2', '3'].includes(selectedKeys[selectedKeys.length - 1])) { - // 图层管理-图层 - if (info?.node?.parent?.key == '1') { - tableData1.forEach((data) => { - if (selectedKeys[0] == data.id) { - // // 获取图层中心 - // getGeomData({ dataTable: data.dataTable }).then((res) => { - // if (res == undefined) { - // createMessage.error('数据库不存在此图层的数据表'); - // } else { - // let st: any = res.slice(6, -1); - // st = st.split(' '); - mapboxComponentRef.value.GeoserverManagementRaster( - data, - [118.30207505530701, 35.30123435040745], - 7.848587811931849, - ); - // } - // }); - } - }); - } - // 影像管理-图层 - else if (info?.node?.parent?.key == '2') { - tableData2.forEach((data) => { - if (selectedKeys[0] == data.id) { - // let bbox = getBboxFromUrl(data.accessUrl); - // let lngLat = getCenterPoint(bbox); - mapboxComponentRef.value.GeoTiffManagerRaster( - data, - [118.30207505530701, 35.30123435040745], - 7.848587811931849, - ); - } - }); - } - // 航飞图片-图层 - else if (info?.node?.parent?.key == '3') { - // console.log('3', selectedKeys, info); - tableData3.forEach((data) => { - if (selectedKeys[0] == data.id) { - AchievementManageListDroneShpImageexif({ - pageIndex: 1, - pageSize: data.imageCount, - }).then((res) => { - if (res.items.length > 0) { - handlerUpdateTaskLayerData(res.items); + // console.log(177, selectedKeys, info); + selectedKeys_now = selectedKeys; + info_now = info; + let filter_hangfei = []; + selectedKeys.forEach((selectedKey) => { + if (!['1', '2', '3'].includes(selectedKey)) { + // 图层管理-图层 + if (info?.node?.parent?.key == '1') { + let tabledata = getDataByTypeAndTime(1); + tabledata.forEach((data) => { + if (selectedKey == data.id) { + mapboxComponentRef.value.GeoserverManagementRaster( + data, + [118.30207505530701, 35.30123435040745], + 7.848587811931849, + ); + } + }); + } + // 影像管理-图层 + else if (info?.node?.parent?.key == '2') { + let tabledata = getDataByTypeAndTime(2); + tabledata.forEach((data) => { + if (selectedKey == data.id) { + mapboxComponentRef.value.GeoTiffManagerRaster( + data, + [118.30207505530701, 35.30123435040745], + 7.848587811931849, + ); + } + }); + } + // 航飞图片-图层 + else if (tableData3_id_list.includes(selectedKey)) { + tableData3.forEach((data) => { + if (selectedKey == data.id) { + if (data.imageCount > 0) { + tableData3_tupian.forEach((tupian) => { + if (tupian.taskId == data.id) { + if ( + dayjs(startTime).isBefore(data.uploadTime) && + dayjs(endTime).isAfter(data.uploadTime) + ) { + filter_hangfei.push(tupian); + } + } + }); } else { createMessage.info('当前选中的任务并无航飞图片'); } - }); - } - }); - } - // 航飞图片-任务 - else { - let filter = tableData3_tupian.filter((item) => item.id == selectedKeys); - handlerUpdateTaskLayerData(filter); + } + }); + } + // 航飞图片-任务 + else { + let filter = tableData3_tupian.filter((item) => item.id == selectedKey); + filter?.forEach((f) => { + filter_hangfei.push(f); + }); + } } + }); + console.log(236, filter_hangfei); + // 航飞图片-图层、任务 + if (filter_hangfei.length > 0) { + handlerUpdateTaskLayerData(filter_hangfei); + } else { + mapboxComponentRef.value.clearTaskLayer('AchievementManageRaster'); } }; - // 影像管理-从参数中获取 bbox 的值 - function getBboxFromUrl(url) { - const urlObj = new URL(url); - const params = new URLSearchParams(urlObj.search); - const bbox = params.get('bbox'); - return bbox; - } - - // 影像管理-计算中心点 - function getCenterPoint(bbox) { - const coords = bbox.split(',').map((coord) => parseFloat(coord)); - const [minLon, minLat, maxLon, maxLat] = coords; - const centerLon = (minLon + maxLon) / 2; - const centerLat = (minLat + maxLat) / 2; - return [centerLon, centerLat]; - } - // 航飞图片-无人机图层 function handlerUpdateTaskLayerData(tasklist) { let taskLayerGeoJson = { @@ -272,8 +271,6 @@ taskLayerGeoJson.features.push(feature); }); - // 确定中心点和zoom等级 - // let result = calculateCenterAndZoom(lngList, latList); // 航飞图片-图层 mapboxComponentRef.value.AchievementManageRaster( taskLayerGeoJson, @@ -297,30 +294,41 @@ } } - // 航飞图片-确定中心点和zoom等级 - function calculateCenterAndZoom(lngList, latList) { - // 检查输入的有效性 - if (!lngList || !latList || lngList.length !== latList.length) { - throw new Error(''); + // 时间轴筛选数据 + function getDataByTypeAndTime(type): any { + let result: any = []; + switch (type) { + case 1: + tableData1.forEach((data) => { + if ( + dayjs(startTime).isBefore(data.createTime) && + dayjs(endTime).isAfter(data.createTime) + ) { + result.push(data); + } + }); + break; + case 2: + tableData2.forEach((data) => { + if ( + dayjs(startTime).isBefore(data.createTime) && + dayjs(endTime).isAfter(data.createTime) + ) { + result.push(data); + } + }); + break; } - // 计算中心点 - const centerLng = lngList.reduce((acc, lng) => acc + lng, 0) / lngList.length; - const centerLat = latList.reduce((acc, lat) => acc + lat, 0) / latList.length; - // 计算经纬度范围 - const minLng = Math.min(...lngList); - const maxLng = Math.max(...lngList); - const minLat = Math.min(...latList); - const maxLat = Math.max(...latList); - const deltaLng = maxLng - minLng; - const deltaLat = maxLat - minLat; - // 估算合适的缩放级别 - let zoom = 14 - Math.log2(Math.max(deltaLng, deltaLat)); // 直接使用最大偏移量 - zoom = Math.max(8, Math.min(15, zoom)); // 确保缩放级别在合理范围内 - return { - center: [centerLng, centerLat], - zoomLevel: zoom, - }; + return result; } + + // 时间轴发生改变返回值 + function handleNowValueChange(value) { + startTime = dayjs(value[0]).startOf('year').format('YYYY-MM-DD HH:mm:ss'); + endTime = dayjs(value[1]).format('YYYY-MM-DD HH:mm:ss'); + onSelect(selectedKeys_now, info_now); + } + onMounted(() => { fetch(); }); @@ -356,13 +364,13 @@ diff --git a/src/views/demo/system/achievement/index.vue b/src/views/demo/system/achievement/index.vue index a3360964..d7f13201 100644 --- a/src/views/demo/system/achievement/index.vue +++ b/src/views/demo/system/achievement/index.vue @@ -9,9 +9,6 @@ - - - diff --git a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue index 1236a826..9995a48c 100644 --- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue +++ b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue @@ -331,6 +331,7 @@ GeoTiffManagerRaster, AchievementManageRaster, resize, + clearTaskLayer, });