HC_YFZX
/
CaiYuanYiTiHua
10
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-09-29 11:00:10 +08:00
parent dcf0bd39ec 59e95db7b3
commit bbf100e3bc
6 changed files with 115 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/demo/system/achievement/AchievementManage/index.vue
View File

@ -51,29 +51,24 @@
</a-col>
</a-row>
<!-- <a-modal :open="modalOpen" :title="modalTitle" :footer="null" @cancel="handleCancel">
<a-image style="height: 100%; width: 100%" :src="modalImage" />
</a-modal> -->
<a-image
:width="200"
:style="{ display: 'none' }"
:preview="{
visible,
onVisibleChange: setVisible,
}"
:src="modalImage"
<ImageModal
v-if="modalOpen"
:tableData3_tupian="tableData3_tupian"
:modalImage="modalImage"
@closeImageModal="closeImageModal"
/>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { ref, watch, onMounted, computed } from 'vue';
// vben
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form';
import { columns, searchFormSchema_map, searchFormSchema_table } from './util';
import { columns, columnsRender, searchFormSchema_map, searchFormSchema_table } from './util';
import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
import ImageModal from '@/views/demo/system/achievement/Display/ImageModal.vue';
// api
import {
AchievementManageAddImageexif,
@ -227,6 +222,8 @@
// 行选中后在地图上显示无人机图标------------------------------------------------------------
// 行选中
const mapboxComponentRef = ref();
const tableData3_tupian = ref([]);
function handRowClick(record) {
if (record && record.imageCount == 0) {
createMessage.warn('当前点击的任务无航飞图片');
@ -245,6 +242,7 @@
.then((res) => {
// console.log(res);
handlerUpdateTaskLayerData(res.items);
tableData3_tupian.value = res.items;
})
.catch((error) => {
console.log(error);
@ -290,7 +288,7 @@
if (res.items.length > 0) {
handlerUpdateTaskLayerData(res.items);
} else {
createMessage.info('当前时间段内并无航飞任务');
createMessage.info('当前查询时间段内并无航飞任务');
}
})
.catch((error) => {
@ -416,38 +414,21 @@
// 点击地图上的无人机图标后展示图片------------------------------------------------------------
// 窗口
// const modalOpen = ref(false);
const modalTitle = ref('');
const modalImage = ref('');
const visible = ref<boolean>(false);
const modalOpen = ref(false);
const modalImage: any = ref({});
const closeImageModal = () => {
modalOpen.value = false;
};
// 打开窗口
const handleOpenImage = (properties) => {
// modalOpen.value = true;
setVisible(true);
modalTitle.value = '';
modalOpen.value = true;
// 正则表达式验证函数
if (isValidUrl(properties.path)) {
modalImage.value = properties.path;
} else {
modalImage.value = VITE_GLOB_API_URL_VAR.value + properties.path;
}
modalImage.value = properties;
};
// 关闭窗口
const handleCancel = () => {
// modalOpen.value = false;
setVisible(false);
modalTitle.value = '';
modalImage.value = '';
const handleCancelImage = () => {
modalOpen.value = false;
};
const setVisible = (value): void => {
visible.value = value;
};
// 正则表达式验证函数
function isValidUrl(url: string): boolean {
const regex =
/^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
return regex.test(url);
}
onMounted(() => {
handleReset();

28
src/views/demo/system/achievement/AchievementManage/util.ts
View File

@ -39,6 +39,34 @@ export const columns = [
},
];
export const columnsRender = [
{
title: 'ID',
dataIndex: 'id',
ifShow: false,
},
{
title: '飞手',
dataIndex: 'flyer',
width: 80,
},
{
title: '飞行时间',
dataIndex: 'flyTime',
width: 150,
},
{
title: '工作地址',
dataIndex: 'workPosition',
width: 100,
},
{
title: '任务数量',
dataIndex: 'count',
width: 80,
},
];
export const searchFormSchema_table = [
{
field: 'taskName',

87
src/views/demo/system/achievement/Display/ImageModal.vue
View File

@ -1,11 +1,12 @@
<template>
<div @keydown="handleKeydown">
<div>
<div class="toper" :style="{ zIndex: 1082 }" v-if="visible">
<span class="info-item solo">任务名称：{{ modalImage.taskName }}</span>
<div class="info-row">
<span class="info-item">飞手名：{{ modalImage.flyer }}</span>
<span class="info-item">飞行时间：{{ modalImage.flyTime }}</span>
<span class="info-item">任务位置：{{ modalImage.workPosition }}</span>
<!-- <span class="info-item">任务位置：{{ modalImage.workPosition }}</span> -->
<span class="info-item">地理位置：{{ modalImage.geometry?.slice(6, -1) }}</span>
</div>
</div>
<div class="leftOutlined" :style="{ zIndex: 1082 }" v-if="visible && beforeImageVif">
@ -28,7 +29,7 @@
</template>
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
// 图片路径拼接
import { getAppEnvConfig } from '@/utils/env';
@ -69,7 +70,6 @@
} else {
modalImage.value.path = VITE_GLOB_API_URL_VAR.value + properties.path;
}
nowImgs = props.tableData3_tupian?.filter((f) => {
return f.taskId == modalImage.value.taskId;
});
@ -87,7 +87,6 @@
}
}
});
setVisible(true);
};
const beforeImageVif = ref(false);
@ -136,7 +135,6 @@
visible.value = value;
if (!value) {
emits('closeImageModal');
// removeGlobalListener();
}
};
// 正则表达式验证函数
@ -146,32 +144,36 @@
return regex.test(url);
}
// let cleanupFunction: (() => void) | undefined;
// const handleKeydown = (event: KeyboardEvent) => {
// if (event.key === 'ArrowLeft') {
// console.log('Left arrow key pressed');
// // 在这里处理逻辑...
// } else if (event.key === 'ArrowRight') {
// console.log('Right arrow key pressed');
// // 在这里处理逻辑...
// }
// };
// const addGlobalListener = () => {
// cleanupFunction = addEventListener(document, 'keydown', handleKeydown);
// };
// const removeGlobalListener = () => {
// if (cleanupFunction) {
// cleanupFunction();
// cleanupFunction = undefined;
// }
// };
// // 在组件挂载后添加全局监听器
// onMounted(() => {
// addGlobalListener();
// });
// 添加键盘事件监听器
const addEventListener = () => {
window.addEventListener('keydown', handleKeydown);
};
// 移除键盘事件监听器
const removeEventListener = () => {
window.removeEventListener('keydown', handleKeydown);
};
// 处理按键按下事件
const handleKeydown = (event: KeyboardEvent) => {
console.log(event.code, beforeImageVif, afterImageVif);
if (event.code == 'ArrowLeft') {
if (beforeImageVif.value) {
beforeImage();
}
}
if (event.code == 'ArrowRight') {
if (afterImageVif.value) {
afterImage();
}
}
};
// 在组件挂载时添加监听器
onMounted(() => {
addEventListener();
});
// 在组件卸载时移除监听器
onBeforeUnmount(() => {
removeEventListener();
});
</script>
<style type="less" scoped>
.toper {
@ -181,36 +183,31 @@
justify-content: flex-start;
z-index: 1082;
width: 50%;
font-size: 35px;
top: -10px;
font-size: 20px;
top: 0px;
height: auto; /* 自动高度，适应内容 */
/* background: rgba(0, 0, 0, 0.4); */
padding: 10px; /* 内边距，使文本不紧贴边框 */
opacity: 1;
}
.info-item {
color: #ffffff;
font-size: 30px; /* 后面三个项的字体大小 */
font-size: 20px; /* 后面三个项的字体大小 */
margin-right: 30px; /* 每个 span 之间的间距 */
opacity: 1;
}
.info-item.solo {
font-size: 40px; /* 第一个 span 的字体大小 */
margin-bottom: 10px; /* 第一个 span 的底部间距 */
opacity: 1;
font-size: 20px; /* 第一个 span 的字体大小 */
margin-bottom: 2px; /* 第一个 span 的底部间距 */
height: 23px;
}
.info-row {
display: flex; /* 使用 flex 布局使三个 span 排成一行 */
flex-wrap: nowrap; /* 不允许换行 */
opacity: 1;
}
.info-row .info-item:last-child {
margin-right: 0; /* 最后一个 span 不需要右边距 */
opacity: 1;
}
.leftOutlined {
@ -226,7 +223,6 @@
transition: background-color 0.3s ease; /* 平滑过渡 */
cursor: pointer; /* 鼠标指针变为手型 */
overflow: visible;
opacity: 1;
}
.rightOutlined {
@ -241,15 +237,12 @@
margin: 5px; /* 外边距 */
transition: background-color 0.3s ease; /* 平滑过渡 */
cursor: pointer; /* 鼠标指针变为手型 */
opacity: 1;
}
.leftOutlined:hover {
background-color: black; /* 鼠标悬停时背景颜色变为黑色 */
opacity: 1;
}
.rightOutlined:hover {
background-color: black; /* 鼠标悬停时背景颜色变为黑色 */
opacity: 1;
}
</style>

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

@ -40,21 +40,13 @@
@getDetailByFeature="getDetailByFeature"
/>
</div>
<!-- <a-modal
:open="modalOpen"
width="100%"
wrap-class-name="full-modal"
:footer="null"
@cancel="handleCancelImage"
>
</a-modal> -->
<div v-if="modalOpen" style="width=100%">
<ImageModal
:tableData3_tupian="tableData3_tupian"
:modalImage="modalImage"
@closeImageModal="closeImageModal"
/>
</div>
<ImageModal
v-if="modalOpen"
:tableData3_tupian="tableData3_tupian"
:modalImage="modalImage"
@closeImageModal="closeImageModal"
/>
<div class="attribute" v-if="showAttributeWindow">
<span class="span-title">详细信息</span>
@ -237,8 +229,10 @@
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
// console.log(selectedKeys, info);
if (!checkedKeys.value.includes(info.node.key)) {
checkedKeys.value.push(info.node.key);
onCheck(checkedKeys.value);
if (!['1', '2', '3'].includes(info.node.key)) {
checkedKeys.value.push(info.node.key);
onCheck(checkedKeys.value);
}
}
};
// 树复选框选中

17
src/views/demo/system/geoservermanagement/clound/mapComponent.vue
View File

@ -248,7 +248,7 @@
// map.moveLayer('GeoserverManagementRaster', 'streetLayer');
// }
console.log(chooseRows);
// console.log(chooseRows);
if (isMove) {
handlerLocation(lngLat, zoom);
}
@ -264,16 +264,21 @@
minzoom: parseInt(1),
maxzoom: parseInt(18),
});
// console.log(chooseRow.style);
map.addLayer({
id: chooseRow.dataTable,
type: 'fill',
source: chooseRow.dataTable,
'source-layer': chooseRow.dataTable,
paint: {
'fill-opacity': 1,
'fill-color': 'red',
'fill-outline-color': 'green',
},
paint: chooseRow.style
? chooseRow.style
: {
'fill-opacity': 1,
'fill-color': 'red',
'fill-outline-color': 'green',
},
});
map.on('click', chooseRow.dataTable, function (e) {
// 显示弹窗

4
src/views/demo/system/geoservermanagement/index.vue
View File

@ -227,7 +227,9 @@
if (res == undefined) {
createMessage.error('数据库不存在此图层的数据表');
} else {
console.log(res);
getDataSource().forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.dataTable);
});
let st: any = res.slice(6, -1);
st = st.split(' ');
let chooseRows: any = [];