HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

dianlixunjian
徐景良 2024-12-02 14:20:56 +08:00
parent 468dc0599a 0cb7b9ed6c
commit a1f2e14efa
5 changed files with 313 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/demo/system/achievement/Display/PopoverContent.vue
View File

@ -21,13 +21,13 @@
</template>
</a-slider>
</p>
<p>
<!-- <p>
历史影像树层级分类：
<a-radio-group v-model:value="yingxiangTreeMenu" button-style="solid">
<a-radio-button value="0">时间</a-radio-button>
<a-radio-button value="1">区县</a-radio-button>
</a-radio-group>
</p>
</p> -->
<p>
历史影像透明度：
<a-slider
@ -50,20 +50,24 @@
<script lang="ts" setup>
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,
}
},
);
// 抛出函数

170
src/views/demo/system/achievement/Display/index.vue
View File

@ -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 });
// }
// });
// });
// }
});
// 航飞图片

61
src/views/demo/system/achievement/GeoTiffManager/failYingxiang.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div>
<BasicTable @register="failYingxiangRegisterTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fileName'">
<span class="content-full">{{ record.fileName }}</span>
</template>
<template v-if="column.key === 'filePath'">
<span class="content-full">{{ record.filePath }}</span>
</template>
<template v-if="column.key === 'action'">
<span class="content-full">
<a-button type="link" @click="copyToClipboard(record.fileName)">复制文件名</a-button>
<a-button type="link" @click="copyToClipboard(record.filePath)">复制路径</a-button>
</span>
</template>
</template>
</BasicTable>
</div>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { useMessage } from '@/hooks/web/useMessage';
import { failColumns } from './util';
const { createMessage } = useMessage();
const props = defineProps(['failYingxiangData']);
// 更新失败的影像
const [failYingxiangRegisterTable, { reload, getSelectRows }] = useTable({
columns: failColumns,
dataSource: props.failYingxiangData,
showIndexColumn: true,
canResize: true,
useSearchForm: false,
showTableSetting: false,
bordered: true,
immediate: false,
});
// 复制到剪贴板
const copyToClipboard = async (value) => {
try {
await navigator.clipboard.writeText(value);
createMessage.success('复制成功');
} catch (err) {
createMessage.error('复制失败');
}
};
</script>
<style lang="less">
.content-full {
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
max-width: 100%;
display: block;
}
</style>

137
src/views/demo/system/achievement/GeoTiffManager/index.vue
View File

@ -6,6 +6,38 @@
<template #toolbar>
<a-button type="primary" @click="updateGeoTiff">更新最新影像</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'layerName'">
<span class="content-full">{{ record.layerName }}</span>
</template>
<template v-if="column.key === 'dataTable'">
<span class="content-full">{{ record.dataTable }}</span>
</template>
<template v-if="column.key === 'shpPath'">
<span class="content-full">{{ record.shpPath }}</span>
</template>
<template v-if="column.key === 'tiffPath'">
<span class="content-full">{{ record.tiffPath }}</span>
</template>
<template v-if="column.key === 'createTime'">
<span class="content-full">{{ record.createTime }}</span>
</template>
<template v-if="column.key === 'updateTime'">
<span class="content-full">{{ record.updateTime }}</span>
</template>
<template v-if="column.key === 'accessUrl'">
<a-image
:src="getUrl(record)"
:style="{ marginRight: '10px' }"
:width="100"
:height="100"
:preview="{
visible,
onVisibleChange: setVisible,
}"
/>
</template>
</template>
</BasicTable>
</a-col>
<a-col :span="12">
@ -24,6 +56,17 @@
</div>
</a-col>
</a-row>
<a-modal
title="更新失败的影像"
:open="failOpen"
:maskClosable="false"
:footer="null"
:width="1000"
@cancel="failOpenClose"
>
<FailYingxiang :failYingxiangData="failYingxiangData" />
</a-modal>
</div>
</template>
@ -31,36 +74,41 @@
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';
import FailYingxiang from './failYingxiang.vue';
// api
import {
GeoTiffManagerUpdateGeoTiff,
GeoTiffManagerLoadPage,
GeoTiffManagerGet,
} from '@/api/demo/system';
import proj4 from 'proj4';
// 图片路径拼接
const { VITE_GLOB_API_URL } = getAppEnvConfig();
const VITE_GLOB_API_URL_VAR = ref<String>(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) {
@ -69,11 +117,25 @@
immediate: false,
});
// 更新失败的影像
const failOpen = ref(false);
const failYingxiangData: any = ref();
// 更新失败的影像弹窗关闭
function failOpenClose() {
failOpen.value = false;
}
// 更新tiff影像
const updateGeoTiff = () => {
GeoTiffManagerUpdateGeoTiff()
.then((res) => {
if (res) {
// console.log(res);
if (res.lenght == 0) {
reload();
} else {
failYingxiangData.value = getFailYingxiangData(res);
console.log(failYingxiangData.value);
failOpen.value = true;
reload();
}
})
@ -82,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) {
@ -90,7 +167,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 +232,56 @@
});
}
// 缩略图的预览不使用
const visible = ref<boolean>(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();
});
</script>
<style lang="less" scoped>
.content-full {
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
max-width: 100%;
display: block;
}
::v-deep .ant-image-mask {
display: none !important;
}
</style>

35
src/views/demo/system/achievement/GeoTiffManager/util.ts
View File

@ -16,17 +16,16 @@ export const columns = [
dataIndex: 'dataTable',
width: 100,
},
{
title: '缩略图',
dataIndex: 'accessUrl',
width: 130,
},
{
title: '时间',
dataIndex: 'dateDir',
width: 80,
},
{
title: 'accessUrl',
dataIndex: 'accessUrl',
ifShow: false,
width: 300,
},
{
title: 'shpPath',
dataIndex: 'shpPath',
@ -40,12 +39,12 @@ export const columns = [
{
title: '创建时间',
dataIndex: 'createTime',
width: 120,
width: 90,
},
{
title: '修改时间',
dataIndex: 'updateTime',
width: 120,
width: 90,
},
];
@ -56,4 +55,22 @@ export const searchFormSchema = [
component: 'Input',
colProps: { span: 12 },
},
];
];
export const failColumns = [
{
title: '文件名称',
dataIndex: 'fileName',
width: 200,
},
{
title: '文件路径',
dataIndex: 'filePath',
width: 350,
},
{
title: '操作',
dataIndex: 'action',
width: 100,
}
];