From c85bb6d8ab3c5d72dae16f4cb3684a54415f523e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Fri, 29 Nov 2024 17:03:43 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=88=90=E6=9E=9C-=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=BD=B1=E5=83=8F=E7=9A=84=E7=AC=AC=E4=B8=89?= =?UTF-8?q?=E5=B1=82=E3=80=81=E5=BD=B1=E5=83=8F=E7=AE=A1=E7=90=86-?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BC=A9=E7=95=A5=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../achievement/Display/PopoverContent.vue | 18 +- .../demo/system/achievement/Display/index.vue | 170 +++++++++--------- .../achievement/GeoTiffManager/index.vue | 88 ++++++++- .../system/achievement/GeoTiffManager/util.ts | 11 +- 4 files changed, 183 insertions(+), 104 deletions(-) diff --git a/src/views/demo/system/achievement/Display/PopoverContent.vue b/src/views/demo/system/achievement/Display/PopoverContent.vue index c4c33538..f48a44d6 100644 --- a/src/views/demo/system/achievement/Display/PopoverContent.vue +++ b/src/views/demo/system/achievement/Display/PopoverContent.vue @@ -21,13 +21,13 @@

-

+

历史影像透明度： import { ref, watch } from 'vue'; // emit - const emit = defineEmits(['changeFillLayerOpacity_tuceng', 'changeFillLayerOpacity_yingxiang', 'changeYingxiangTreeMenu']); + const emit = defineEmits([ + 'changeFillLayerOpacity_tuceng', + 'changeFillLayerOpacity_yingxiang', + 'changeYingxiangTreeMenu', + ]); // 点击树选项功能------------------------------------------------------- const treeRadio = ref(true); // 历史影像树层级分类------------------------------------------------------- const yingxiangTreeMenu = ref('0'); watch( - ()=> yingxiangTreeMenu.value, - ()=> { + () => yingxiangTreeMenu.value, + () => { emit('changeYingxiangTreeMenu'); - }, + }, { deep: true, - } + }, ); // 抛出函数 diff --git a/src/views/demo/system/achievement/Display/index.vue b/src/views/demo/system/achievement/Display/index.vue index 2b128213..29432dbc 100644 --- a/src/views/demo/system/achievement/Display/index.vue +++ b/src/views/demo/system/achievement/Display/index.vue @@ -239,95 +239,95 @@ treeData.value[1].children = []; // 历史影像-第二层 - if ( - popoverContentRef.value == undefined || - popoverContentRef.value.yingxiangTreeMenu == '0' - ) { - // 按照时间分类 - let dateDirArray: any = []; - res.items.forEach((item) => { - dateDirArray.push({ - key: item.dateDir, - }); + // if ( + // popoverContentRef.value == undefined || + // popoverContentRef.value.yingxiangTreeMenu == '0' + // ) { + // 按照时间分类 + let dateDirArray: any = []; + res.items.forEach((item) => { + dateDirArray.push({ + key: item.dateDir, }); - // 不重复的时间 - yingxiang_uniqueKeysArray = Array.from(new Set(dateDirArray.map((item) => item.key))).sort( - (a, b) => dayjs(b) - dayjs(a), - ); - // 转换时间数组(年份-周数) - yingxiang_uniqueKeysArray = yingxiang_uniqueKeysArray.map(convertToYearWeek); - yingxiang_uniqueKeysArray = [...new Set(yingxiang_uniqueKeysArray)]; + }); + // 不重复的时间 + yingxiang_uniqueKeysArray = Array.from(new Set(dateDirArray.map((item) => item.key))).sort( + (a, b) => dayjs(b) - dayjs(a), + ); + // 转换时间数组(年份-周数) + yingxiang_uniqueKeysArray = yingxiang_uniqueKeysArray.map(convertToYearWeek); + yingxiang_uniqueKeysArray = [...new Set(yingxiang_uniqueKeysArray)]; - yingxiang_uniqueKeysArray.forEach((array) => { - // 分解 - const [year, week] = array.split('-').map(Number); - // 获取输入年周的起始和最后时间 - const weekRange = getWeekRange(year, week); - treeData.value[1].children.push({ - key: array, - title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end, - children: [], - }); - searchKeyVlaue.push({ - title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end, - key: treeData.value[1].key, - }); + yingxiang_uniqueKeysArray.forEach((array) => { + // 分解 + const [year, week] = array.split('-').map(Number); + // 获取输入年周的起始和最后时间 + const weekRange = getWeekRange(year, week); + treeData.value[1].children.push({ + key: array, + title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end, + children: [], }); - // 历史影像-第三层 - res.items.forEach((item1) => { - treeData.value[1].children.forEach((item2) => { - if (convertToYearWeek(item1.dateDir) === item2.key) { - item2.children.push({ - key: item1.id, - title: item1.layerName, - }); - searchKeyVlaue.push({ title: item1.layerName, key: item2.key }); - } - }); + searchKeyVlaue.push({ + title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end, + key: treeData.value[1].key, }); - } else { - let countrynameArray: any = []; - // 按照区县分类 - res.items.forEach((item) => { - // 分割路径 - let parts = item.tiffPath.split('\\'); - if (parts.length <= 1) { - parts = item.tiffPath.split('/'); - } - // 提取区县名称 - const countryname = parts[parts.length - 2]; - countrynameArray.push({ - key: countryname, - }); - }); - yingxiang_uniqueKeysArray = Array.from(new Set(countrynameArray.map((item) => item.key))); - yingxiang_uniqueKeysArray.forEach((array) => { - treeData.value[1].children.push({ - key: array, - title: array, - children: [], - }); - searchKeyVlaue.push({ title: array, key: treeData.value[1].key }); - }); - // 历史影像-第三层 - res.items.forEach((item1) => { - treeData.value[1].children.forEach((item2) => { - let parts = item1.tiffPath.split('\\'); - if (parts.length <= 1) { - parts = item1.tiffPath.split('/'); - } - // 提取区县名称 - const countryname = parts[parts.length - 2]; - if (countryname === item2.key) { - item2.children.push({ - key: item1.id, - title: item1.layerName, - }); - searchKeyVlaue.push({ title: item1.layerName, key: item2.key }); - } - }); - }); - } + }); + // 历史影像-第三层 + // res.items.forEach((item1) => { + // treeData.value[1].children.forEach((item2) => { + // if (convertToYearWeek(item1.dateDir) === item2.key) { + // item2.children.push({ + // key: item1.id, + // title: item1.layerName, + // }); + // searchKeyVlaue.push({ title: item1.layerName, key: item2.key }); + // } + // }); + // }); + // } else { + // let countrynameArray: any = []; + // // 按照区县分类 + // res.items.forEach((item) => { + // // 分割路径 + // let parts = item.tiffPath.split('\\'); + // if (parts.length <= 1) { + // parts = item.tiffPath.split('/'); + // } + // // 提取区县名称 + // const countryname = parts[parts.length - 2]; + // countrynameArray.push({ + // key: countryname, + // }); + // }); + // yingxiang_uniqueKeysArray = Array.from(new Set(countrynameArray.map((item) => item.key))); + // yingxiang_uniqueKeysArray.forEach((array) => { + // treeData.value[1].children.push({ + // key: array, + // title: array, + // children: [], + // }); + // searchKeyVlaue.push({ title: array, key: treeData.value[1].key }); + // }); + // // 历史影像-第三层 + // res.items.forEach((item1) => { + // treeData.value[1].children.forEach((item2) => { + // let parts = item1.tiffPath.split('\\'); + // if (parts.length <= 1) { + // parts = item1.tiffPath.split('/'); + // } + // // 提取区县名称 + // const countryname = parts[parts.length - 2]; + // if (countryname === item2.key) { + // item2.children.push({ + // key: item1.id, + // title: item1.layerName, + // }); + // searchKeyVlaue.push({ title: item1.layerName, key: item2.key }); + // } + // }); + // }); + // } }); // 航飞图片 diff --git a/src/views/demo/system/achievement/GeoTiffManager/index.vue b/src/views/demo/system/achievement/GeoTiffManager/index.vue index 4ee1618a..c3c08c78 100644 --- a/src/views/demo/system/achievement/GeoTiffManager/index.vue +++ b/src/views/demo/system/achievement/GeoTiffManager/index.vue @@ -6,6 +6,31 @@ + @@ -31,6 +56,8 @@ import { ref, watch, onMounted } from 'vue'; // vben import { useMessage } from '@/hooks/web/useMessage'; + import proj4 from 'proj4'; + import { getAppEnvConfig } from '@/utils/env'; import { BasicTable, useTable } from '@/components/Table'; import { columns, searchFormSchema } from './util'; import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue'; @@ -40,27 +67,29 @@ GeoTiffManagerLoadPage, GeoTiffManagerGet, } from '@/api/demo/system'; - import proj4 from 'proj4'; + + // 图片路径拼接 + const { VITE_GLOB_API_URL } = getAppEnvConfig(); + const VITE_GLOB_API_URL_VAR = ref(VITE_GLOB_API_URL + '/'); + + const { createMessage } = useMessage(); proj4.defs( 'EPSG:4548', '+proj=tmerc +lat_0=37.56666666666666 +lon_0=126.93333333333333 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +towgs84=-119.819,-78.445,-112.283,0,0,0,0 +units=m +no_defs', ); - const { createMessage } = useMessage(); - // 影像管理 const [registerTable, { reload, getSelectRows }] = useTable({ title: '影像管理', api: GeoTiffManagerLoadPage, columns: columns, + useSearchForm: true, formConfig: { labelWidth: 120, schemas: searchFormSchema, }, showIndexColumn: true, - useSearchForm: true, - ellipsis: false, bordered: true, showTableSetting: true, handleSearchInfoFn(info) { @@ -73,6 +102,7 @@ const updateGeoTiff = () => { GeoTiffManagerUpdateGeoTiff() .then((res) => { + console.log(res); if (res) { reload(); } @@ -90,7 +120,6 @@ }); let bbox = getBboxFromUrl(record.accessUrl); let lngLat = getCenterPoint(bbox); - console.log(lngLat); // 检测坐标系 const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1])); if (result) { @@ -156,9 +185,56 @@ }); } + // 缩略图的预览不使用 + const visible = ref(false); + const setVisible = (value): void => { + visible.value = false; + }; + + // 从geoserver获取缩略图 + function getUrl(record) { + let bbox: any = getBboxFromUrl(record.accessUrl); + const coords = bbox.split(',').map((coord) => parseFloat(coord)); + let r1 = proj4('EPSG:4326', 'EPSG:3857', [coords[0], coords[1]]); + let r2 = proj4('EPSG:4326', 'EPSG:3857', [coords[2], coords[3]]); + let titeUrl: any = null; + if (new URL(VITE_GLOB_API_URL).hostname == 'localhost') { + titeUrl = + 'http://localhost:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:'; + } else { + titeUrl = + 'http://192.168.10.141:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:'; + } + let url = + titeUrl + + record.layerName + + '&styles=&bbox=' + + r1[0] + + ',' + + r1[1] + + ',' + + r2[0] + + ',' + + r2[1] + + '&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'; + return url; + } + onMounted(() => { reload(); // 用于去除分页后地图还有前一页的图层 forClearMap(); }); + diff --git a/src/views/demo/system/achievement/GeoTiffManager/util.ts b/src/views/demo/system/achievement/GeoTiffManager/util.ts index a07f17e0..a7721372 100644 --- a/src/views/demo/system/achievement/GeoTiffManager/util.ts +++ b/src/views/demo/system/achievement/GeoTiffManager/util.ts @@ -16,17 +16,16 @@ export const columns = [ dataIndex: 'dataTable', width: 100, }, + { + title: '缩略图', + dataIndex: 'accessUrl', + width: 100, + }, { title: '时间', dataIndex: 'dateDir', width: 80, }, - { - title: 'accessUrl', - dataIndex: 'accessUrl', - ifShow: false, - width: 300, - }, { title: 'shpPath', dataIndex: 'shpPath', From 0cb7b9ed6cfe3f8d216515f46fabc6fc1d83eeaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Sat, 30 Nov 2024 11:25:38 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=A4=B1=E8=B4=A5?= =?UTF-8?q?=E7=9A=84=E5=BD=B1=E5=83=8F=E6=98=BE=E7=A4=BA=E6=88=90=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E8=A1=A8=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GeoTiffManager/failYingxiang.vue | 61 +++++++++++++++++++ .../achievement/GeoTiffManager/index.vue | 51 +++++++++++++++- .../system/achievement/GeoTiffManager/util.ts | 26 ++++++-- 3 files changed, 132 insertions(+), 6 deletions(-) create mode 100644 src/views/demo/system/achievement/GeoTiffManager/failYingxiang.vue diff --git a/src/views/demo/system/achievement/GeoTiffManager/failYingxiang.vue b/src/views/demo/system/achievement/GeoTiffManager/failYingxiang.vue new file mode 100644 index 00000000..cf02645c --- /dev/null +++ b/src/views/demo/system/achievement/GeoTiffManager/failYingxiang.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/views/demo/system/achievement/GeoTiffManager/index.vue b/src/views/demo/system/achievement/GeoTiffManager/index.vue index c3c08c78..fb319f84 100644 --- a/src/views/demo/system/achievement/GeoTiffManager/index.vue +++ b/src/views/demo/system/achievement/GeoTiffManager/index.vue @@ -19,9 +19,16 @@ + + @@ -61,6 +79,7 @@ import { BasicTable, useTable } from '@/components/Table'; import { columns, searchFormSchema } from './util'; import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue'; + import FailYingxiang from './failYingxiang.vue'; // api import { GeoTiffManagerUpdateGeoTiff, @@ -98,12 +117,25 @@ immediate: false, }); + // 更新失败的影像 + const failOpen = ref(false); + const failYingxiangData: any = ref(); + // 更新失败的影像弹窗关闭 + function failOpenClose() { + failOpen.value = false; + } + // 更新tiff影像 const updateGeoTiff = () => { GeoTiffManagerUpdateGeoTiff() .then((res) => { - console.log(res); - if (res) { + // console.log(res); + if (res.lenght == 0) { + reload(); + } else { + failYingxiangData.value = getFailYingxiangData(res); + console.log(failYingxiangData.value); + failOpen.value = true; reload(); } }) @@ -112,6 +144,21 @@ }); }; + // 切割路径 + function getFailYingxiangData(table) { + let result: any = []; + table.forEach((fullPath) => { + const lastSlashIndex = fullPath.lastIndexOf('/'); + if (lastSlashIndex != -1) { + result.push({ + fileName: fullPath.substring(lastSlashIndex + 1), + filePath: fullPath.substring(0, lastSlashIndex + 1), + }); + } + }); + return result; + } + // 行选中 const mapboxComponentRef = ref(); function handRowClick(record) { diff --git a/src/views/demo/system/achievement/GeoTiffManager/util.ts b/src/views/demo/system/achievement/GeoTiffManager/util.ts index a7721372..b4671e17 100644 --- a/src/views/demo/system/achievement/GeoTiffManager/util.ts +++ b/src/views/demo/system/achievement/GeoTiffManager/util.ts @@ -19,7 +19,7 @@ export const columns = [ { title: '缩略图', dataIndex: 'accessUrl', - width: 100, + width: 130, }, { title: '时间', @@ -39,12 +39,12 @@ export const columns = [ { title: '创建时间', dataIndex: 'createTime', - width: 120, + width: 90, }, { title: '修改时间', dataIndex: 'updateTime', - width: 120, + width: 90, }, ]; @@ -55,4 +55,22 @@ export const searchFormSchema = [ component: 'Input', colProps: { span: 12 }, }, -]; \ No newline at end of file +]; + +export const failColumns = [ + { + title: '文件名称', + dataIndex: 'fileName', + width: 200, + }, + { + title: '文件路径', + dataIndex: 'filePath', + width: 350, + }, + { + title: '操作', + dataIndex: 'action', + width: 100, + } +]; \ No newline at end of file