gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图照片历史路径独立，与后端api对应

main
滕嵩 2025-07-19 14:25:52 +08:00
parent fe28c83566
commit 84ec34c9fd
23 changed files with 1673 additions and 12140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/api/demo/mediaLibrary.ts
View File

@ -1,5 +1,18 @@
import { defHttp } from '@/utils/http/axios'; import { defHttp } from '@/utils/http/axios';
enum Api { enum Api {
GetWorkspaceList = '/api/Manage/GetWorkspaceList',
// 获取地图图片列表
GetMediaFile = '/api/AirportMaintenance/GetMediaFile',
// 更新地图图片
UpdatePicStatus = '/api/AirportMaintenance/UpdatePicStatus',
// 删除地图图片
deletepic = '/api/AirportMaintenance/deletepic',
// 修改地图图片名称
UpdatePicName = '/api/AirportMaintenance/UpdatePicName',
// 修改地图图片parentkey
UpdatePicParentKey = '/api/AirportMaintenance/UpdatePicParentKey',
// 获取地图标注列表 // 获取地图标注列表
GetAnnotationList = '/api/Manage/GetAnnotationList', GetAnnotationList = '/api/Manage/GetAnnotationList',
// 添加地图标注 // 添加地图标注
@ -19,6 +32,50 @@ enum Api {
DeleteWorkArea = '/api/Manage/DeleteWorkArea', DeleteWorkArea = '/api/Manage/DeleteWorkArea',
} }
// 获取项目列表
export function GetWorkspaceList(params?) {
return defHttp.get({
url: Api.GetWorkspaceList,
params,
});
}
// 获取地图图片列表
export function GetMediaFile(params) {
return defHttp.get({
url: Api.GetMediaFile,
params
});
}
// 更新地图图片
export function UpdatePicStatus(params) {
return defHttp.get({
url: Api.UpdatePicStatus,
params
});
}
// 删除地图图片
export function Deletepic(params) {
return defHttp.get({
url: Api.deletepic,
params
});
}
// 修改地图图片名称
export function UpdatePicName(params) {
return defHttp.get({
url: Api.UpdatePicName,
params
});
}
// 修改地图图片parentkey
export function UpdatePicParentKey(params) {
return defHttp.get({
url: Api.UpdatePicParentKey,
params
});
}
// 获取地图标注列表 // 获取地图标注列表
export function GetAnnotationList(params) { export function GetAnnotationList(params) {
return defHttp.get({ return defHttp.get({

1732
src/views/demo/system/mediaLibrary/data.json
View File

File diff suppressed because it is too large Load Diff

788
src/views/demo/system/mediaLibrary/index.vue
View File

@ -4,12 +4,16 @@
<div class="w-4/5 xl:w-5/6"> <div class="w-4/5 xl:w-5/6">
<BasicTable @register="registerTable" :searchInfo="searchInfo"> <BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar> <template #toolbar>
<span v-for="f in floders" :key="f" class="floderTitle"> <span v-for="(f, index) in floders" :key="f.id" class="floderTitle">
<span v-if="f != '全部文件'" style="margin-right: 10px"> / </span> <span v-if="f.name != '全部文件'" style="margin-right: 10px"> / </span>
<span @click="getChildrenByProp(tableData, f)"> {{ f }}</span> <a-tooltip placement="top">
<template #title>
<span>{{ f.name }}</span>
</template>
<span class="flodersname" @click="getChildrenByProp(f, index)"> {{ f.name }}</span>
</a-tooltip>
</span> </span>
<div class="floderOtherButton"> <div class="floderOtherButton">
<!-- <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn> -->
<a-button :icon="h(BorderHorizontalOutlined)" @click="openComparisonModal"> <a-button :icon="h(BorderHorizontalOutlined)" @click="openComparisonModal">
变化检测 变化检测
</a-button> </a-button>
@ -28,45 +32,19 @@
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<div v-if="tableType == 'table'"> <div v-if="tableType == 'table'">
<template v-if="column.key === 'name'"> <template v-if="column.key === 'name'">
<FolderOpenOutlined v-if="record.type == 'folder'" style="font-size: 20px" /> <FolderOpenOutlined v-if="!record.objectKey" style="font-size: 20px" />
<!-- <PlaySquareTwoTone v-if="record.type == 'video'" style="font-size: 20px" /> --> <FileOutlined
<img v-if="record.type == 'img'" :src="record.url" :width="30" :height="20" /> v-if="record.objectKey && !record.objectKey.includes('jpeg')"
style="font-size: 20px"
/>
<img <img
v-if="record.type == 'video'" v-if="record.objectKey && record.objectKey.includes('jpeg')"
:src="record.gifZoomImage" :src="getImgurl(record.objectKey)"
:width="30" :width="30"
:height="20" :height="20"
/> />
<FileOutlined v-if="record.type.includes('model')" style="font-size: 20px" />
<div
v-if="record.type.includes('2D')"
style="
position: absolute;
top: 20px;
left: 11px;
font-size: 10px;
color: #ffffff;
background: #000000;
pointer-events: none;
"
>
2D
</div>
<div
v-if="record.type.includes('3D')"
style="
position: absolute;
top: 20px;
left: 11px;
font-size: 10px;
color: #ffffff;
pointer-events: none;
background: #000000;
"
>
3D
</div>
<span <span
v-if="!record.objectKey || (record.objectKey && record.objectKey.includes('jpeg'))"
@click="lookRecord(record)" @click="lookRecord(record)"
@mouseover="record.isHovered = true" @mouseover="record.isHovered = true"
@mouseout="record.isHovered = false" @mouseout="record.isHovered = false"
@ -77,25 +55,51 @@
> >
{{ record.name }} {{ record.name }}
</span> </span>
<span
v-if="record.objectKey && !record.objectKey.includes('jpeg')"
:style="{
marginLeft: '5px',
}"
>
{{ record.name }}
</span>
</template> </template>
<template v-if="column.key === 'createtime'"> <template v-if="column.key === 'createTime'">
{{ record.createtime ? record.createtime : '-' }} <span
style="width: 100%; display: flex; align-items: center; justify-content: center"
>
{{ record.createTime ? record.createTime : '-' }}
</span>
</template> </template>
<template v-if="column.key === 'size'"> <template v-if="column.key === 'size'">
{{ record.size ? record.size : '-' }} <span
style="width: 100%; display: flex; align-items: center; justify-content: center"
>
{{ record.size ? record.size : '-' }}
</span>
</template> </template>
<template v-if="column.key === 'label'"> <template v-if="column.key === 'fileTags'">
<div v-if="record.label && record.label.length > 0"> <div v-if="record.fileTags && record.fileTags.length > 0">
<a-tag color="success" v-for="la in record.label" :key="la">{{ la }}</a-tag> <a-tag color="success" v-for="la in record.fileTags" :key="la">{{ la }}</a-tag>
</div> </div>
</template> </template>
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a-button type="text"> <a-tooltip placement="top">
<EditOutlined @click="renameRecord(record)" /> <template #title>
</a-button> <span>重命名</span>
<a-button type="text"> </template>
<BorderInnerOutlined @click="openPathModal(record)" /> <a-button type="text">
</a-button> <EditOutlined @click="renameRecord(record)" />
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>查看地图图片历史路径</span>
</template>
<a-button type="text" v-if="record.objectKey">
<BorderInnerOutlined @click="openPathModal(record)" />
</a-button>
</a-tooltip>
</template> </template>
</div> </div>
</template> </template>
@ -118,53 +122,17 @@
<a-checkbox v-model:checked="record.checked" @change="changeStore($event, record)" /> <a-checkbox v-model:checked="record.checked" @change="changeStore($event, record)" />
</div> </div>
<FolderOpenOutlined <FolderOpenOutlined
v-if="record.type == 'folder'" v-if="!record.objectKey"
style="font-size: 40px" style="font-size: 40px"
@click="lookRecord(record)" @click="lookRecord(record)"
/> />
<img <img
v-if="record.type == 'img'" v-if="record.objectKey"
:src="record.url" :src="getImgurl(record.objectKey)"
:width="60" :width="60"
:height="40" :height="40"
@click="lookRecord(record)" @click="lookRecord(record)"
/> />
<img v-if="record.type == 'video'" :src="record.gifZoomImage" :width="60" :height="40" />
<FileOutlined
v-if="record.type.includes('model')"
style="font-size: 40px"
@click="lookRecord(record)"
/>
<div
v-if="record.type.includes('2D')"
style="
position: absolute;
top: 52px;
left: 60px;
font-size: 20px;
color: #ffffff;
pointer-events: none;
background: #000000;
"
@click="lookRecord(record)"
>
2D
</div>
<div
v-if="record.type.includes('3D')"
style="
position: absolute;
top: 52px;
left: 60px;
font-size: 20px;
color: #ffffff;
pointer-events: none;
background: #000000;
"
@click="lookRecord(record)"
>
3D
</div>
<span <span
:style="{ :style="{
textDecoration: record.isHovered ? 'underline' : 'none', textDecoration: record.isHovered ? 'underline' : 'none',
@ -187,13 +155,13 @@
</div> </div>
<!-- 新建文件夹弹窗 --> <!-- 新建文件夹弹窗 -->
<AddFolderModal @register="addFolderModal" @success="handleSuccess" /> <AddFolderModal @register="addFolderModal" @handleSuccess="handleSuccess" />
<!-- 移动弹窗 --> <!-- 移动弹窗 -->
<MoveFileModal @register="moveFileModal" @success="handleSuccess" /> <MoveFileModal @register="moveFileModal" @handleSuccess="handleSuccess" />
<!-- 压缩弹窗 --> <!-- 压缩弹窗 -->
<CompressFileModal @register="compressFileModal" @success="handleSuccess" /> <CompressFileModal @register="compressFileModal" @handleSuccess="handleSuccess" />
<!-- 重命名弹窗 --> <!-- 重命名弹窗 -->
<RenameModal @register="renameModal" @success="handleSuccess" /> <RenameModal @register="renameModal" @handleSuccess="handleSuccess" />
<!-- 预览弹窗 --> <!-- 预览弹窗 -->
<a-modal <a-modal
v-model:open="open" v-model:open="open"
@ -208,12 +176,12 @@
:maskClosable="false" :maskClosable="false"
> >
<Preview <Preview
v-if="nowPreviewRecord.type == 'img' || nowPreviewRecord.type == 'video'" v-if="nowPreviewRecord.objectKey"
:nowPreviewRecord="nowPreviewRecord" :nowPreviewRecord="nowPreviewRecord"
:previewRecordList="previewRecordList" :previewRecordList="previewRecordList"
@chooseNowPreviewRecord="chooseNowPreviewRecord" @chooseNowPreviewRecord="chooseNowPreviewRecord"
@closeModal="closeModal" @closeModal="closeModal"
@reloadTable="reload" @handleSuccess="handleSuccess"
/> />
</a-modal> </a-modal>
<!-- 变化检测弹窗 --> <!-- 变化检测弹窗 -->
@ -244,14 +212,19 @@
:mask="false" :mask="false"
:maskClosable="false" :maskClosable="false"
> >
<Path :pathRecord="pathRecord" @closePathModal="closePathModal" /> <Path
:allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData"
:floderName="floderName"
@closePathModal="closePathModal"
@handleSuccessPath="handleSuccessPath"
/>
</a-modal> </a-modal>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, watch, h } from 'vue'; import { reactive, ref, watch, h } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getOrgList, deleteDept } from '@/api/demo/system';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
@ -271,6 +244,13 @@
FileOutlined, FileOutlined,
BorderInnerOutlined, BorderInnerOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import {
GetMediaFile,
UpdatePicStatus,
Deletepic,
UpdatePicName,
UpdatePicParentKey,
} from '@/api/demo/mediaLibrary';
import LeftTree from './LeftTree.vue'; import LeftTree from './LeftTree.vue';
import Preview from './preview/index.vue'; import Preview from './preview/index.vue';
import Comparison from './comparison/index.vue'; import Comparison from './comparison/index.vue';
@ -287,208 +267,8 @@
const { createConfirm, createMessage } = useMessage(); const { createConfirm, createMessage } = useMessage();
// 表格数据-------------------------------------------------------------------- // 表格数据--------------------------------------------------------------------
const tableData = ref([
{
id: '2',
name: '图片',
createtime: '2025-03-24 18:13:17',
type: 'folder',
children: [
{
id: '1-2',
name: '南山风景照.jpg',
createtime: '2020-10-22 17:33:22',
type: 'img',
url: 'https://img2.baidu.com/it/u=257681495,312745373&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
imgtype: '原片',
taskname: '佛山大火救援项目',
airlineName: '火灾救援勘查航线',
width: 889,
height: 500,
size: '6.2M',
photographFeiji: '救援机1007',
photographNumber: 'GD610',
photographMan: 'zachzhou',
photographTime: '2020-10-22 00:00:00',
label: ['人', '车'],
lat: 35.362625,
lng: 118.033886,
},
{
id: '1-3',
name: '风景图.jpg',
createtime: '2020-10-22 17:33:22',
type: 'img',
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
imgtype: '原片2',
taskname: '佛山大火救援项目2',
airlineName: '火灾救援勘查航线2',
width: 2000,
height: 1334,
size: '1.63M',
photographFeiji: '救援机1008',
photographNumber: 'GD610',
photographMan: 'zachzhou',
photographTime: '2020-10-22 00:00:00',
label: ['人', '车'],
lat: 35.362825,
lng: 118.033886,
},
{
id: '1-4',
name: '红外照片.jpg',
createtime: '2020-10-22 17:33:22',
type: 'img',
url: 'https://pic.rmb.bdstatic.com/bjh/gallery/8c885a0e3cf0647b60548535e2e9ca39.jpeg',
imgtype: '红外照片',
taskname: '佛山大火救援项目-红外照片',
airlineName: '火灾救援勘查航线',
width: 640,
height: 480,
size: '6.2M',
photographFeiji: '救援机1007',
photographNumber: 'GD610',
photographMan: 'zachzhou',
photographTime: '2020-10-22 00:00:00',
label: ['人', '车'],
lat: 35.362925,
lng: 118.033886,
},
{
id: '1-5',
name: '广角照片.jpg',
createtime: '2020-10-22 17:33:22',
type: 'img',
url: 'https://img2.baidu.com/it/u=2490853491,3226002419&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
imgtype: '广角照片',
taskname: '佛山大火救援项目-广角照片',
airlineName: '火灾救援勘查航线',
width: 749,
height: 500,
size: '6.2M',
photographFeiji: '救援机1007',
photographNumber: 'GD610',
photographMan: 'zachzhou',
photographTime: '2020-10-22 00:00:00',
label: ['人', '车'],
lat: 35.362625,
lng: 118.033286,
},
{
id: '1-6',
name: '变焦照片.jpg',
createtime: '2020-10-22 17:33:22',
type: 'img',
url: 'https://img2.baidu.com/it/u=3778652155,475195343&fm=253&fmt=auto&app=138&f=PNG?w=500&h=518',
imgtype: '变焦照片',
taskname: '佛山大火救援项目-变焦照片',
airlineName: '火灾救援勘查航线',
width: 500,
height: 518,
size: '6.2M',
photographFeiji: '救援机1007',
photographNumber: 'GD610',
photographMan: 'zachzhou',
photographTime: '2020-10-22 00:00:00',
label: ['人', '车'],
lat: 35.362725,
lng: 118.033086,
},
],
},
{
id: '3',
name: '视频',
createtime: '2025-03-24 18:13:17',
type: 'folder',
children: [
// {
// id: '3-4',
// name: 'XZD153狼窝沟西南',
// createtime: '',
// type: 'video',
// url: '74b95e6575d741489b9a9061bb646467',
// manufacturer: '海康',
// },
{
id: '3-5',
name: '费县马庄镇陈家鱼后村南斜坡后村',
createtime: '',
type: 'video',
url: 'http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv',
gifZoomImage: 'https://img.soogif.com/mrGHcO3xjFJnJ986TeL9oAr2BYfPIaM7.gif',
manufacturer: '腾讯',
},
{
id: '3-8',
name: 'movie',
createtime: '',
type: 'video',
url: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
gifZoomImage: 'https://img.soogif.com/mrGHcO3xjFJnJ986TeL9oAr2BYfPIaM7.gif',
manufacturer: '腾讯',
},
// {
// id: '3-6',
// name: '可落',
// createtime: '',
// type: 'video',
// url: '8H03AA1PAG8D9BF',
// manufacturer: '乐橙',
// },
// {
// id: '3-7',
// name: '费县薛庄镇东张林村村南可见光',
// createtime: '',
// type: 'video',
// url: '37130100181328000392',
// manufacturer: '青犀',
// },
],
},
// {
// id: '4',
// name: '模型',
// createtime: '2025-03-24 18:13:17',
// type: 'folder',
// children: [
// {
// id: '4-1',
// name: '天空之城 二维模型',
// createtime: '2025-03-24 18:13:17',
// type: 'model2D',
// url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
// boundary: {
// end_lat: 22.57965964566081,
// end_lng: 113.93899440765381,
// max_level: 23,
// min_level: 12,
// start_lat: 22.578193485606185,
// start_lng: 113.93697738647461,
// },
// },
// {
// id: '4-2',
// name: '天空之城 三维模型',
// createtime: '2025-03-24 18:13:17',
// type: 'model3D',
// url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
// boundary: {
// end_lat: 22.57965964566081,
// end_lng: 113.93899440765381,
// max_level: 23,
// min_level: 12,
// start_lat: 22.578193485606185,
// start_lng: 113.93697738647461,
// },
// },
// ],
// },
]);
// 展示数据 // 展示数据
const showTableData = ref(cloneDeep(tableData.value)); const showTableData = ref();
// 目录
const floders = ref(['全部文件']);
// 表格还是文件夹 // 表格还是文件夹
const tableType = ref('table'); const tableType = ref('table');
const tableHeight: any = ref(0); const tableHeight: any = ref(0);
@ -533,55 +313,12 @@
}); });
} else { } else {
// 表格 // 表格
// let showTableDataIds = showTableData.value.map((item) => item.id);
let selectRowsIdArray = showTableData.value.filter((item) => item.checked); let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
// selectRowsIdArray.forEach((item) => {
// if (showTableDataIds.includes(item.id)) {
// let filterTemp = showTableData.value.filter((f) => f.id == item.id);
// console.log(filterTemp);
// // filterTemp.forEach((temp) => {
// // if (temp.children) {
// // temp.children.forEach((t) => {
// // selectRowsIdArray.push(t);
// // });
// // }
// // });
// }
// });
setSelectedRows(selectRowsIdArray); setSelectedRows(selectRowsIdArray);
} }
}, },
); );
// 目录跳跃
function getChildrenByProp(children, name) {
if (name == '全部文件') {
showTableData.value = cloneDeep(tableData.value);
floders.value = ['全部文件'];
clearSelectedRowKeys();
return;
}
for (const node of children) {
if (node.name === name) {
showTableData.value = cloneDeep(node.children);
const index = floders.value.indexOf(name);
floders.value = index === -1 ? [] : floders.value.slice(0, index + 1);
clearSelectedRowKeys();
return node.children || [];
}
if (node.children && node.children.length > 0) {
const result = getChildrenByProp(node.children, node.name);
if (result) {
const index = floders.value.indexOf(name);
floders.value = index === -1 ? [] : floders.value.slice(0, index + 1);
clearSelectedRowKeys();
return result;
}
}
}
return null;
}
// 单选框选择 // 单选框选择
const checkNameChecked = ref(false); const checkNameChecked = ref(false);
// 表格or文件夹切换 // 表格or文件夹切换
@ -610,64 +347,132 @@
} }
// 表格 // 表格
// 目录
const floders = ref([
{
id: '0',
name: '全部文件',
},
]);
const nowParentKey = ref('0');
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const searchParams = ref(); const searchParams = ref();
const [registerTable, { reload, getSelectRows, setSelectedRows, clearSelectedRowKeys }] = const [
useTable({ registerTable,
// api: getOrgList, { reload, getDataSource, getSelectRows, setSelectedRows, clearSelectedRowKeys },
// title: '全部文件', ] = useTable({
dataSource: showTableData, api: GetMediaFile,
rowKey: 'id', rowKey: 'id',
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
}, },
rowSelection: { rowSelection: {
type: 'checkbox', type: 'checkbox',
}, },
isTreeTable: false, isTreeTable: false,
striped: false, striped: false,
bordered: false, bordered: false,
inset: false, inset: false,
tableSetting: { tableSetting: {
redo: false, redo: false,
size: false, size: false,
setting: false, setting: false,
}, },
useSearchForm: true, useSearchForm: true,
showIndexColumn: false, showIndexColumn: false,
showTableSetting: true, showTableSetting: true,
handleSearchInfoFn(info) { beforeFetch: (data) => {
console.log(info); // 接口请求前 参数处理
console.log(searchInfo.value); let temp = {
searchParams.value = info; ...data,
return info; parentKey: nowParentKey.value,
}, };
beforeFetch: (data) => { return temp;
// 接口请求前 参数处理 },
var temp = { handleSearchInfoFn(info) {
startTime: dayjs(data.startTime).startOf('month').format('YYYY-MM-DD'), if (info.startTime && info.endTime) {
endTime: dayjs(data.endTime).endOf('month').format('YYYY-MM-DD HH:mm:ss'), info = {
...info,
startTime: dayjs(info.startTime).format('YYYY-MM-DD') + ' 00:00:00',
endTime: dayjs(info.endTime).format('YYYY-MM-DD') + ' 23:59:59',
}; };
return temp; }
}, searchParams.value = info;
afterFetch: (res) => { return info;
console.log(res); },
}, afterFetch: (res) => {
}); res.forEach((arr) => {
if (arr.fileTags) {
arr.fileTags = JSON.parse(arr.fileTags);
} else {
arr.fileTags = [];
}
if (arr.graffitiJson) {
arr.graffitiJson = JSON.parse(arr.graffitiJson);
} else {
arr.graffitiJson = [];
}
});
return res;
},
});
// 目录跳跃
function getChildrenByProp(f, index) {
nowParentKey.value = f.id;
floders.value = floders.value.splice(0, index + 1);
clearSelectedRowKeys();
reload();
showTableData.value = getDataSource();
}
// 图片获取路径
function getImgurl(url) {
return 'http://175.27.168.120:6014/api/v1/buckets/test/objects/download?prefix=' + url;
}
// 弹窗---------------------------------------------------------------------- // 弹窗----------------------------------------------------------------------
// 左侧目录选择 // 左侧目录选择
function handleSelect(orgId = '') { function handleSelect(orgId = '') {
searchInfo.orgId = orgId; searchInfo.orgId = orgId;
reload(); reload();
} }
// 刷新表格
const childRef = ref<any>(); const childRef = ref<any>();
function handleSuccess() { function handleSuccess(record = null) {
clearSelectedRowKeys(); clearSelectedRowKeys();
childRef.value.fetch(); childRef.value.fetch();
reload(); reload();
setTimeout(() => {
if (record) {
// 删除后-刷新当前查看项
previewRecordList.value.forEach((item, index) => {
if (record.id == item.id) {
previewRecordList.value.splice(index, 1);
if (previewRecordList.value.length != 0) {
nowPreviewRecord.value = previewRecordList.value[index];
} else {
open.value = false;
}
}
});
} else {
// 刷新当前查看项
GetMediaFile({
...searchParams.value,
parentKey: nowParentKey.value,
page: 1,
limit: 100,
}).then((res) => {
previewRecordList.value = uniqueByKey(res.items, null);
getDataSource().forEach((item) => {
if (item.id == nowPreviewRecord.value.id) {
nowPreviewRecord.value = item;
}
});
});
}
}, 500);
} }
// 新建文件夹 // 新建文件夹
const [addFolderModal, { openModal: openAddFolderModal }] = useModal(); const [addFolderModal, { openModal: openAddFolderModal }] = useModal();
@ -680,62 +485,29 @@
// 新建文件夹 // 新建文件夹
function addFolder() { function addFolder() {
let rows = getSelectRows(); // openAddFolderModal(true, {
let record: any = null; // record,
if (rows.length == 1) { // });
if (rows[0].type == 'folder') {
record = rows[0];
} else {
record = findParentIdById(tableData.value, rows[0].id);
}
}
openAddFolderModal(true, {
record,
});
} }
// 移动文件 // 移动文件
function moveFolderOrFile() { function moveFolderOrFile() {
let rows = getSelectRows(); let rows = getSelectRows();
if (rows.length > 0) { if (rows.length > 0) {
const record = rows; const records = rows;
openMoveFileModal(true, { openMoveFileModal(true, {
tableData: tableData.value, records,
record,
}); });
} else { } else {
return createMessage.warn('请选择一个或者多个文件/文件夹进行移动'); return createMessage.warn('请选择一个或者多个文件/文件夹进行移动');
} }
} }
// 删除
async function deleteFolderOrFile() {
let rows = getSelectRows();
if (rows.length == 0) {
return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
}
const query = rows.map((item) => item.id);
createConfirm({
iconType: 'info',
title: '删除',
content: '确定要删除当前部门吗',
onOk: async () => {
// const data = await deleteDept(query);
const data = null;
if (data) {
handleSuccess();
createMessage.success('删除成功');
} else {
createMessage.error('删除失败');
}
},
});
}
// 压缩 // 压缩
function compressFolderOrFile() { function compressFolderOrFile() {
let rows = getSelectRows(); let rows = getSelectRows();
if (rows.length > 0) { if (rows.length > 0) {
const record = rows; const record = rows;
openCompressFileModal(true, { openCompressFileModal(true, {
tableData: tableData.value, tableData: getDataSource(),
record, record,
}); });
} else { } else {
@ -748,46 +520,107 @@
record, record,
}); });
} }
// 获取父元素 // 删除
function findParentIdById(tree, targetId) { async function deleteFolderOrFile() {
function recurse(nodes) { let rows = getSelectRows();
for (let node of nodes) { if (rows.length == 0) {
if (node.children) { return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
for (let child of node.children) {
if (child.id === targetId) {
return node;
}
const found = recurse([child]);
if (found) return found;
}
}
}
return null;
} }
return recurse(tree); createConfirm({
iconType: 'info',
title: '删除',
content: '确定要删除选择的文件/文件夹吗？',
onOk: async () => {
let ids = '';
rows.forEach((row) => {
if (!ids) {
ids = row.id;
} else {
ids = ids + ',' + row.id;
}
});
Deletepic({
ids: ids,
}).then((res) => {
handleSuccess();
createMessage.success(res);
});
},
});
} }
// 查看弹窗---------------------------------------------------------------------- // 查看弹窗----------------------------------------------------------------------------
const open = ref(false); const open = ref(false);
// 查看 // 目前展示图片
// 目前查看项
const nowPreviewRecord: any = ref(); const nowPreviewRecord: any = ref();
// 目前查看项的同级列表 // 目前展示图片的列表
const previewRecordList: any = ref([]); const previewRecordList: any = ref([]);
// 查看 // 查看-打开这个文件夹或者展示这个图片
function lookRecord(record) { async function lookRecord(record) {
if (record.type == 'folder') { if (!record.objectKey) {
showTableData.value = record.children; nowParentKey.value = record.id;
floders.value.push(record.name); floders.value.push({
id: nowParentKey.value,
name: record.name,
});
reload();
} else { } else {
open.value = true; GetMediaFile({
nowPreviewRecord.value = record; ...searchParams.value,
previewRecordList.value = findParentIdById(tableData.value, record.id)?.children; parentKey: nowParentKey.value,
if (!previewRecordList.value) { page: 1,
previewRecordList.value = tableData.value; limit: 100,
} }).then((res) => {
nowPreviewRecord.value = record;
previewRecordList.value = uniqueByKey(res.items, record);
open.value = true;
});
} }
} }
// 去重
function uniqueByKey(arrlist, record) {
let resultList: any = [];
arrlist.forEach((arr) => {
if (
arr.objectKey &&
!resultList.some((item) => item.objectKey === arr.objectKey) &&
arr.objectKey.includes('jpeg')
) {
// 保持顺序
if (record) {
if (
(arr.objectKey == record.objectKey && record.id == arr.id) ||
arr.objectKey != record.objectKey
) {
if (!arr.fileTags) {
arr.fileTags = [];
} else {
arr.fileTags = JSON.parse(arr.fileTags);
}
if (!arr.graffitiJson) {
arr.graffitiJson = [];
} else {
arr.graffitiJson = JSON.parse(arr.graffitiJson);
}
resultList.push(arr);
}
} else {
if (!arr.fileTags) {
arr.fileTags = [];
} else {
arr.fileTags = JSON.parse(arr.fileTags);
}
if (!arr.graffitiJson) {
arr.graffitiJson = [];
} else {
arr.graffitiJson = JSON.parse(arr.graffitiJson);
}
resultList.push(arr);
}
}
});
return resultList;
}
// 图片选择 // 图片选择
function chooseNowPreviewRecord(value) { function chooseNowPreviewRecord(value) {
nowPreviewRecord.value = value; nowPreviewRecord.value = value;
@ -812,17 +645,46 @@
// 路径地图弹窗---------------------------------------------------------------------- // 路径地图弹窗----------------------------------------------------------------------
const pathOpen = ref(false); const pathOpen = ref(false);
// 打开变化检测弹窗 // 打开变化检测弹窗
const pathRecord = ref({}); const floderName = ref('');
const nowShowImageData = ref({});
const allImageDataList: any = ref([]);
function openPathModal(record) { function openPathModal(record) {
console.log('pathRecord',record) GetMediaFile({
pathRecord.value = record; parentKey: record.parentKey,
pathOpen.value = true; page: 1,
limit: 1000,
}).then((res) => {
allImageDataList.value = res.items.filter(
(item) => item.objectKey && item.objectKey.includes('.jpeg'),
);
allImageDataList.value.forEach((arr) => {
if (arr.fileTags) {
arr.fileTags = JSON.parse(arr.fileTags);
} else {
arr.fileTags = [];
}
if (arr.graffitiJson) {
arr.graffitiJson = JSON.parse(arr.graffitiJson);
} else {
arr.graffitiJson = [];
}
});
nowShowImageData.value = allImageDataList.value.filter((item) => item.id == record.id)[0];
floderName.value = floders.value[floders.value.length - 1].name;
pathOpen.value = true;
});
} }
// 关闭变化检测弹窗 // 关闭变化检测弹窗
function closePathModal() { function closePathModal() {
pathRecord.value = {}; nowShowImageData.value = {};
pathOpen.value = false; pathOpen.value = false;
} }
// 刷新
function handleSuccessPath() {
setTimeout(() => {
openPathModal(nowShowImageData.value);
}, 500);
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.floderTitle { .floderTitle {
@ -845,6 +707,12 @@
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flodersname {
max-width: 120px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出显示省略号 */
}
::v-deep .floderTitle .ant-btn { ::v-deep .floderTitle .ant-btn {
padding-left: 0px !important; padding-left: 0px !important;

70
src/views/demo/system/mediaLibrary/modal.data.ts
View File

@ -8,30 +8,30 @@ export const columns: BasicColumn[] = [
title: '文件名称', title: '文件名称',
dataIndex: 'name', dataIndex: 'name',
align: 'left', align: 'left',
width: 200, width: 300,
}, },
{ {
title: '创建时间', title: '创建时间',
dataIndex: 'createtime', dataIndex: 'createTime',
align: 'left', align: 'center',
width: 150, width: 150,
}, },
{ {
title: '大小', title: '大小',
dataIndex: 'size', dataIndex: 'size',
align: 'left', align: 'center',
width: 75, width: 75,
}, },
{ {
title: '标签', title: '标签',
dataIndex: 'label', dataIndex: 'fileTags',
align: 'left', align: 'center',
width: 200, width: 200,
}, },
{ {
title: '设备名称', title: '设备名称',
dataIndex: 'equipmentName', dataIndex: 'equipmentName',
align: 'left', align: 'center',
width: 200, width: 200,
}, },
{ {
@ -43,23 +43,41 @@ export const columns: BasicColumn[] = [
]; ];
export const searchFormSchema: FormSchema[] = [ export const searchFormSchema: FormSchema[] = [
// {
// field: 'device',
// label: '标签',
// component: 'Select',
// colProps: { span: 6 },
// componentProps: {
// mode: 'multiple',
// options: [
// { label: '标签1', value: '标签1' },
// { label: '标签2', value: '标签2' },
// { label: '标签3', value: '标签3' },
// ],
// },
// },
// {
// field: 'device',
// label: '飞行器枚举',
// component: 'Select',
// colProps: { span: 6 },
// componentProps: {
// mode: 'multiple',
// options: [
// { label: '0-100-1', value: '0-100-1' },
// ],
// },
// },
// {
// field: 'picname',
// label: '设备名称',
// component: 'Input',
// colProps: { span: 6 },
// },
{ {
field: 'label', field: 'picname',
label: '标签', label: '文件名称',
component: 'Select',
colProps: { span: 6 },
componentProps: {
mode: 'multiple',
options: [
{ label: '标签1', value: '标签1' },
{ label: '标签2', value: '标签2' },
{ label: '标签3', value: '标签3' },
],
},
},
{
field: 'equipmentName',
label: '设备名称',
component: 'Input', component: 'Input',
colProps: { span: 6 }, colProps: { span: 6 },
}, },
@ -69,12 +87,6 @@ export const searchFormSchema: FormSchema[] = [
component: 'RangePicker', component: 'RangePicker',
colProps: { span: 6}, colProps: { span: 6},
}, },
{
field: 'name',
label: '文件名称',
component: 'Input',
colProps: { span: 6 },
},
]; ];
export const formGroupSchema: FormSchema[] = [ export const formGroupSchema: FormSchema[] = [
{ {

244
src/views/demo/system/mediaLibrary/modal/MoveFileModal.vue
View File

@ -1,98 +1,200 @@
<template> <template>
<BasicModal v-bind="$attrs" @register="registerModal" title="移动文件" @ok="handleSubmit"> <BasicModal v-bind="$attrs" @register="registerModal" title="移动文件" @ok="handleSubmit">
<a-tree <!-- <BasicTable @register="registerTable">
:tree-data="treeData" <template #toolbar>
:field-names="{ <span v-for="(f, index) in floders" :key="f.id" class="floderTitle">
key: 'id', <span v-if="f.name != '全部文件'" style="margin-right: 10px"> / </span>
title: 'name', <a-tooltip placement="top">
}" <template #title>
v-model:selectedKeys="selectedKeys" <span>{{ f.name }}</span>
default-expand-all </template>
:height="300" <span class="flodersname" @click="getChildrenByProp(f, index)"> {{ f.name }}</span>
:showIcon="true" </a-tooltip>
:autoExpandParent="true" </span>
:defaultExpandAll="true" </template>
> <template #bodyCell="{ column, record }">
<template #icon="{ children }"> <template v-if="column.key === 'name'">
<template v-if="children"> <FolderOpenOutlined v-if="!record.objectKey" style="font-size: 20px" />
<FolderOutlined /> <span
v-if="!record.objectKey || (record.objectKey && record.objectKey.includes('jpeg'))"
@click="lookRecord(record)"
@mouseover="record.isHovered = true"
@mouseout="record.isHovered = false"
:style="{
textDecoration: record.isHovered ? 'underline' : 'none',
marginLeft: '5px',
}"
>
{{ record.name }}
</span>
</template> </template>
</template> </template>
</a-tree> </BasicTable> -->
<a-tree v-model:selectedKeys="selectedKeys" show-line :tree-data="treeData"> </a-tree>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { FolderOutlined } from '@ant-design/icons-vue'; import { FolderOutlined, FolderOpenOutlined } from '@ant-design/icons-vue';
import { orgPosGroup } from '@/api/demo/system'; import { GetMediaFile, UpdatePicParentKey } from '@/api/demo/mediaLibrary';
import type { TreeProps } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const emit = defineEmits(['success']); const emit = defineEmits(['handleSuccess']);
// 上级文件夹的id // // 上级文件夹的id
const moveIds: any = ref([]); const moveDataList: any = ref([]);
const selectedKeys: any = ref<string[]>(); const selectedKeys: any = ref<string[]>();
const treeData = ref([]); const treeData: any = ref([
{
title: '全部文件',
key: '0',
children: [],
},
]);
function funGetMediaFile() {}
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
// 过滤掉非文件夹 moveDataList.value = data.records;
treeData.value = filterTreeByType(data.tableData);
moveIds.value = data.record.map((item) => item);
}); });
const floders = ref([
{
id: '0',
name: '全部文件',
},
]);
const nowParentKey = ref('0');
const [
registerTable,
{ reload, getDataSource, getSelectRows, setSelectedRows, clearSelectedRowKeys },
] = useTable({
api: GetMediaFile,
rowKey: 'id',
columns: [
{
title: '文件名称',
dataIndex: 'name',
align: 'left',
width: 200,
},
],
rowSelection: {
type: 'radio',
},
isTreeTable: false,
striped: false,
bordered: false,
inset: false,
useSearchForm: false,
showIndexColumn: false,
showTableSetting: false,
beforeFetch: (data) => {
// 接口请求前 参数处理
let temp = {
...data,
parentKey: nowParentKey.value,
};
return temp;
},
afterFetch: (res) => {
let result: any = [];
res.forEach((arr, index) => {
if (!arr.objectKey) {
result.push(arr);
}
});
return result;
},
});
// 目录跳跃
function getChildrenByProp(f, index) {
nowParentKey.value = f.id;
floders.value = floders.value.splice(0, index + 1);
clearSelectedRowKeys();
reload();
}
// 查看-打开这个文件夹
async function lookRecord(record) {
if (!record.objectKey) {
nowParentKey.value = record.id;
floders.value.push({
id: nowParentKey.value,
name: record.name,
});
reload();
}
}
// 提交 // 提交
async function handleSubmit() { async function handleSubmit() {
try { try {
let ids = moveIds.value.map((item) => item.id); let selectKeys = getSelectRows();
let key = selectedKeys.value[0]; moveDataList.value.forEach((movedata) => {
if (!ids.includes(key)) { UpdatePicParentKey({ id: movedata.id, ParentKey: selectKeys[0].id }).then((res) => {
let query = { console.log(res);
moveIds: ids, // return;
key: key, });
}; });
// 调用接口
const data = await orgPosGroup(query); // if (!ids.includes(key)) {
if (data) { // let query = {
setModalProps({ confirmLoading: true }); // moveIds: ids,
closeModal(); // key: key,
emit('success'); // };
return createMessage.success('成功'); // // 调用接口
} else { // const data = await orgPosGroup(query);
return createMessage.error('失败'); // if (data) {
} // setModalProps({ confirmLoading: true });
} else { // closeModal();
return createMessage.warn('目标目录不能包含选择目录'); // emit('handleSuccess');
} // return createMessage.success('成功');
// } else {
// return createMessage.error('失败');
// }
// } else {
// return createMessage.warn('目标目录不能包含选择目录');
// }
} finally { } finally {
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
} }
} }
// 过滤掉非文件夹
function filterTreeByType(tree) {
function recurse(nodes) {
const filteredNodes: any = [];
for (let node of nodes) {
// 如果当前节点是 folder 类型
if (node.type === 'folder') {
// 深拷贝原对象，避免修改原始数据
const newNode = { ...node };
// 如果有 children，则递归处理
if (node.children && node.children.length > 0) {
const children = recurse(node.children);
newNode.children = children;
} else {
newNode.children = []; // 没有 children 也保留为空数组
}
// 无论如何，只要是 folder 类型就 push 到结果里
filteredNodes.push(newNode);
}
}
return filteredNodes;
}
return recurse(tree);
}
</script> </script>
<style lang="less" scoped>
.floderTitle {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
cursor: pointer;
}
::v-deep .vben-basic-table-header__toolbar {
display: flex !important;
justify-content: flex-start !important;
}
.floderOtherButton {
position: absolute;
right: 0px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.flodersname {
max-width: 120px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出显示省略号 */
}
::v-deep .ant-table-row-expand-icon {
display: none !important;
}
::v-deep .ant-table-row-expand-icon-collapsed {
display: none !important;
}
</style>

25
src/views/demo/system/mediaLibrary/modal/RenameModal.vue
View File

@ -1,11 +1,5 @@
<template> <template>
<BasicModal <BasicModal v-bind="$attrs" @register="registerModal" title="重命名" @ok="handleSubmit">
v-bind="$attrs"
@register="registerModal"
title="重命名"
height="100"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</BasicModal> </BasicModal>
</template> </template>
@ -14,12 +8,11 @@
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { renameSchema } from '../modal.data'; import { renameSchema } from '../modal.data';
import { UpdatePicName } from '@/api/demo/mediaLibrary';
import { orgPosGroup } from '@/api/demo/system';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const emit = defineEmits(['success']); const emits = defineEmits(['handleSuccess']);
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100, labelWidth: 100,
@ -47,16 +40,12 @@
id: id.value, id: id.value,
name: values.name, name: values.name,
}; };
// 调用接口 UpdatePicName(query).then((res) => {
const data = await orgPosGroup(query); emits('handleSuccess');
if (data) {
setModalProps({ confirmLoading: true }); setModalProps({ confirmLoading: true });
createMessage.success(res);
closeModal(); closeModal();
emit('success'); });
return createMessage.success('重命名成功');
} else {
return createMessage.error('重命名失败');
}
} finally { } finally {
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
} }

276
src/views/demo/system/mediaLibrary/path/index.vue
View File

@ -4,71 +4,29 @@
<div <div
class="leftMenuDiv" class="leftMenuDiv"
:style="{ :style="{
width: leftMenuShow ? '340px' : '64px', width: leftMenuShow ? '340px' : '0px',
}" }"
> >
<PathLeftMenu <PathLeftMenu
ref="pathLeftMenuRef"
:pathRecord="props.pathRecord"
:leftMenuShow="leftMenuShow" :leftMenuShow="leftMenuShow"
:allAnnotationDataList="allAnnotationDataList" :floderName="floderName"
:nowShowAnnotationData="nowShowAnnotationData"
:allAreaDataList="allAreaDataList"
:nowShowAreaData="nowShowAreaData"
:allImageDataList="allImageDataList" :allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData" :nowShowImageData="nowShowImageData"
@changeLeftMenuShow="changeLeftMenuShow" @changeLeftMenuShow="changeLeftMenuShow"
@handlerLocation="handlerLocation" @handlerLocation="handlerLocation"
@closePathModal="closePathModal" @closePathModal="closePathModal"
@changeAnnotationInfoShow="changeAnnotationInfoShow"
@setNowShowAnnotationData="setNowShowAnnotationData"
@setNowShowImageData="setNowShowImageData" @setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData" @handleSuccessPath="handleSuccessPath"
@setAllAnnotationData="setAllAnnotationData"
@setAllAreaData="setAllAreaData"
@deleteAnnotation="deleteAnnotation"
@deleteArea="deleteArea"
/> />
</div> </div>
<!-- 地图 --> <!-- 地图 -->
<div class="mapDiv" :style="{ width: dynamicWidth }"> <div class="mapDiv" :style="{ width: dynamicWidth }">
<PathMap <PathMap
ref="pathMapRef" ref="pathMapRef"
:allAnnotationDataList="allAnnotationDataList"
:nowShowAnnotationData="nowShowAnnotationData"
:allAreaDataList="allAreaDataList"
:nowShowAreaData="nowShowAreaData"
:allImageDataList="allImageDataList" :allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData" :nowShowImageData="nowShowImageData"
@setNowShowAnnotationData="setNowShowAnnotationData"
@setNowShowImageData="setNowShowImageData" @setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData"
@setAllAnnotationData="setAllAnnotationData"
@setAllImageData="setAllImageData" @setAllImageData="setAllImageData"
@setAllAreaData="setAllAreaData"
@closePathImageInfo="closePathImageInfo"
/>
</div>
<!-- 地图标注 -->
<div class="annotationInfoDiv" v-if="annotationInfoShow">
<PathAnnotationInfo
:allAnnotationDataList="allAnnotationDataList"
:nowShowAnnotationData="nowShowAnnotationData"
@setNowShowAnnotationData="setNowShowAnnotationData"
@closePathAnnotationInfo="closePathAnnotationInfo"
@handlerLocation="handlerLocation"
@deleteAnnotation="deleteAnnotation"
/>
</div>
<!-- 地图作业区域 -->
<div class="areaInfoDiv" v-if="areaInfoShow">
<PathAreaInfo
:allAreaDataList="allAreaDataList"
:nowShowAreaData="nowShowAreaData"
@setNowShowAreaData="setNowShowAreaData"
@closePathAreaInfo="closePathAreaInfo"
@handlerLocation="handlerLocation"
@deleteArea="deleteArea"
/> />
</div> </div>
<!-- 地图照片 --> <!-- 地图照片 -->
@ -77,45 +35,27 @@
:allImageDataList="allImageDataList" :allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData" :nowShowImageData="nowShowImageData"
@setNowShowImageData="setNowShowImageData" @setNowShowImageData="setNowShowImageData"
@closePathImageInfo="closePathImageInfo"
@handlerLocation="handlerLocation" @handlerLocation="handlerLocation"
@handleSuccessPath="handleSuccessPath"
/> />
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'; import { ref, watch, computed, onMounted } from 'vue';
import { PathLeftMenu, PathMap, PathAnnotationInfo, PathAreaInfo, PathImageInfo } from './path'; import { PathLeftMenu, PathMap, PathImageInfo } from './path';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import imageJson from './json/image.json';
import {
GetAnnotationList,
DeleteAnnotation,
GetWorkAreaList,
DeleteWorkArea,
} from '@/api/demo/mediaLibrary';
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const props = defineProps(['pathRecord']); const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName']);
const emits = defineEmits(['closePathModal']); const emits = defineEmits(['closePathModal', 'handleSuccessPath']);
// 地图宽度 // 地图宽度
const dynamicWidth = computed(() => { const dynamicWidth = computed(() => {
let width = 0; let width = 0;
// 左侧目录 // 左侧目录
if (leftMenuShow.value) { if (leftMenuShow.value) {
width += 340; width += 340;
} else {
width += 64;
}
// 地图标注
if (annotationInfoShow.value) {
width += 320;
}
// 地图作业区域
if (areaInfoShow.value) {
width += 320;
} }
// 地图照片 // 地图照片
if (imageInfoShow.value) { if (imageInfoShow.value) {
@ -128,161 +68,37 @@
const pathMapRef = ref(); const pathMapRef = ref();
// 左侧目录是否显示---------------------------------------------------- // 左侧目录是否显示----------------------------------------------------
const pathLeftMenuRef = ref(); const leftMenuShow = ref(false);
const leftMenuShow = ref(true);
function changeLeftMenuShow() { function changeLeftMenuShow() {
leftMenuShow.value = !leftMenuShow.value; leftMenuShow.value = !leftMenuShow.value;
} }
// 右侧标注信息是否显示----------------------------------------------------
const annotationInfoShow = ref(false);
function changeAnnotationInfoShow() {
annotationInfoShow.value = !annotationInfoShow.value;
}
// 关闭右侧标注
function closePathAnnotationInfo() {
annotationInfoShow.value = false;
nowShowAnnotationData.value = {};
pathMapRef.value.annotationRestoreDefault();
}
// 当前展示的标注信息
const nowShowAnnotationData = ref();
const allAnnotationDataList: any = ref([]);
// 设置当前展示的标注信息
function setNowShowAnnotationData(value, restore = true) {
if (value.id) {
annotationInfoShow.value = true;
} else {
annotationInfoShow.value = false;
}
if (restore) {
pathMapRef.value.annotationRestoreDefault();
}
nowShowAnnotationData.value = value;
}
// 刷新区域信息
function setAllAnnotationData() {
// 查询地图工作区域
getAnnotationList();
}
// 查询地图标注
async function getAnnotationList(showThis = true) {
allAnnotationDataList.value = await GetAnnotationList({ workspaceid: 1 });
if (allAnnotationDataList.value.length > 0) {
allAnnotationDataList.value.forEach((annotation, index) => {
let geomjson = WktToGeojson(annotation.geom);
annotation = {
...annotation,
properties: JSON.parse(annotation.properties),
geomtype: getGeomType(annotation),
coordinates: geomjson.coordinates,
};
allAnnotationDataList.value[index] = annotation;
});
}
if (showThis) {
setTimeout(() => {
pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
}, 50);
}
}
// 删除标注
function deleteAnnotation(value) {
if (nowShowAnnotationData.value && nowShowAnnotationData.value.id == value.id) {
annotationInfoShow.value = false;
nowShowAnnotationData.value = {};
}
DeleteAnnotation({
id: value.id,
}).then((result) => {
if (result) {
// 刷新
getAnnotationList();
createMessage.success('删除成功');
}
});
}
// 右侧区域信息是否显示----------------------------------------------------
const areaInfoShow = ref(false);
function changeAreaInfoShow() {
areaInfoShow.value = !areaInfoShow.value;
}
// 关闭右侧标注
function closePathAreaInfo() {
areaInfoShow.value = false;
nowShowAreaData.value = {};
pathMapRef.value.areaRestoreDefault();
}
// 当前展示的区域信息
const nowShowAreaData = ref();
const allAreaDataList: any = ref([]);
// 设置当前展示的区域信息
function setNowShowAreaData(value, restore = true) {
if (value.id) {
areaInfoShow.value = true;
} else {
areaInfoShow.value = false;
}
if (restore) {
pathMapRef.value.areaRestoreDefault();
}
nowShowAreaData.value = value;
}
// 刷新区域信息
function setAllAreaData() {
// 查询地图工作区域
getWorkAreaList();
}
// 查询地图工作区域
async function getWorkAreaList(showThis = true) {
allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
if (allAreaDataList.value.length > 0) {
allAreaDataList.value.forEach((area, index) => {
let geomjson = WktToGeojson(area.geom);
area = {
...area,
properties: JSON.parse(area.properties),
geomtype: getGeomType(area),
coordinates: geomjson.coordinates,
};
allAreaDataList.value[index] = area;
});
}
if (showThis) {
setTimeout(() => {
pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
}, 50);
}
}
// 删除区域
async function deleteArea(value) {
if (nowShowAreaData.value && nowShowAreaData.value.id == value.id) {
areaInfoShow.value = false;
nowShowAreaData.value = {};
}
DeleteWorkArea({
id: value.id,
}).then((result) => {
if (result) {
// 刷新
getWorkAreaList();
createMessage.success('删除成功');
}
});
}
// 右侧图片是否显示---------------------------------------------------- // 右侧图片是否显示----------------------------------------------------
const imageInfoShow = ref(false); const imageInfoShow = ref(false);
// 关闭右侧图片
function closePathImageInfo() {
imageInfoShow.value = false;
}
// 当前展示的图片 // 当前展示的图片
const nowShowImageData = ref(); const nowShowImageData = ref();
const allImageDataList = ref(imageJson); const allImageDataList = ref();
watch(
() => props.nowShowImageData,
() => {
nowShowImageData.value = props.nowShowImageData;
},
{
deep: true,
immediate: true,
},
);
watch(
() => props.allImageDataList,
() => {
allImageDataList.value = props.allImageDataList;
},
{
deep: true,
immediate: true,
},
);
// 设置当前展示的图片 // 设置当前展示的图片
function setNowShowImageData(value) { function setNowShowImageData(value) {
@ -305,34 +121,10 @@
function handlerLocation(position) { function handlerLocation(position) {
pathMapRef.value.handlerLocation([position.lng, position.lat]); pathMapRef.value.handlerLocation([position.lng, position.lat]);
} }
// 刷新列表和当前值
// 获取WKT类型 function handleSuccessPath() {
function getGeomType(area) { emits('handleSuccessPath');
let geom = area.geom;
let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
// 点
if (geom.indexOf('POINT') > -1 && !radiusFlag) {
return 'Point';
}
// 线
if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
return 'Polyline';
}
// 多边形
if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
return 'Polygon';
}
// 圈
if (geom.indexOf('POLYGON') > -1 && radiusFlag) {
return 'Circle';
}
} }
onMounted(() => {
// 查询地图工作区域
getWorkAreaList(false);
getAnnotationList();
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.pathModal { .pathModal {

1536
src/views/demo/system/mediaLibrary/path/json/image.json
View File

File diff suppressed because it is too large Load Diff

1
src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
View File

@ -144,7 +144,6 @@
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const props = defineProps(['allAreaDataList', 'nowShowAreaData']); const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
console.log('nowShowAreaData',props.nowShowAreaData)
const emits = defineEmits([ const emits = defineEmits([
'setNowShowAreaData', 'setNowShowAreaData',
'closePathAreaInfo', 'closePathAreaInfo',

378
src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
View File

@ -25,30 +25,32 @@
<div class="titleTime"> <div class="titleTime">
<ClockCircleOutlined /> <ClockCircleOutlined />
{{ {{
dayjs(props.nowShowImageData.create_at).format('YYYY-MM-DD HH:mm:ss (UTCZ)') + dayjs(props.nowShowImageData.createTime).format('YYYY-MM-DD HH:mm:ss (UTCZ)') +
'&nbsp;&nbsp;&nbsp;' + '&nbsp;&nbsp;&nbsp;' +
(props.nowShowImageData.size / 1024 / 1024).toFixed(2) + (props.nowShowImageData.size / 1024 / 1024).toFixed(2) +
'M' + 'M' +
'&nbsp;&nbsp;&nbsp;' + '&nbsp;&nbsp;&nbsp;' +
'4032 x 3024' props.nowShowImageData.width +
' x ' +
props.nowShowImageData.height
}} }}
</div> </div>
<div class="titleCoordinate"> <div class="titleCoordinate">
{{ {{
props.nowShowImageData.photo_position.lng + props.nowShowImageData.lng +
'° N' + '° N' +
'&nbsp;&nbsp;&nbsp;&nbsp;' + '&nbsp;&nbsp;&nbsp;&nbsp;' +
props.nowShowImageData.photo_position.lat + props.nowShowImageData.lat +
'° E' '° E'
}} }}
</div> </div>
</div> </div>
<!-- 标签 --> <!-- 标签 -->
<div class="tags"> <div class="tags">
<a-tag color="success" v-for="tag in props.nowShowImageData.file_tags" :key="tag"> <a-tag color="success" v-for="tag in props.nowShowImageData.fileTags" :key="tag">
{{ tag }} {{ tag }}
</a-tag> </a-tag>
<PlusSquareOutlined style="font-size: 20px; color: #07aaed" @click="addLabelChange" /> <PlusSquareOutlined style="font-size: 20px; color: #07aaed" @click="addFileTagsChange" />
</div> </div>
<!-- 关闭按钮 --> <!-- 关闭按钮 -->
<div class="closeButton"> <div class="closeButton">
@ -124,7 +126,9 @@
transition: 'transform 0.2s', transition: 'transform 0.2s',
width: `${imageWidth}px`, width: `${imageWidth}px`,
height: `${imageHeight}px`, height: `${imageHeight}px`,
background: `url(${props.nowShowImageData.original_url ? 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871' : props.nowShowImageData.original_url}) no-repeat`, background: `url(${getImgurl(props.nowShowImageData.objectKey)}) no-repeat center center`,
backgroundSize: 'contain',
backgroundPosition: 'center',
}" }"
> >
<!-- 创建的矩形 --> <!-- 创建的矩形 -->
@ -426,7 +430,7 @@
<div class="button"> <div class="button">
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title> <template #title>
<span>刷新</span> <span>复位刷新</span>
</template> </template>
<RedoOutlined @click="refresh" /> <RedoOutlined @click="refresh" />
</a-tooltip> </a-tooltip>
@ -441,15 +445,15 @@
</a-tooltip> </a-tooltip>
</div> </div>
<!-- 加载到地图上 --> <!-- 加载到地图上 -->
<div class="button2" @click="funAddOrRemoveToMap"> <div class="button2" @click="funShowOnMap">
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title> <template #title>
<span> <span>
{{ props.nowShowImageData.show_on_map ? '在地图上取消加载' : '在地图上加载' }} {{ props.nowShowImageData.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
</span> </span>
</template> </template>
<svg <svg
v-if="props.nowShowImageData.show_on_map" v-if="props.nowShowImageData.showOnMap == 1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -462,7 +466,7 @@
></path> ></path>
</svg> </svg>
<svg <svg
v-if="!props.nowShowImageData.show_on_map" v-if="props.nowShowImageData.showOnMap != 1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -483,8 +487,8 @@
<img <img
:src=" :src="
li.preview_url li.preview_url
? 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871' ? li.preview_url
: li.preview_url : 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
" "
width="75" width="75"
height="50" height="50"
@ -497,7 +501,7 @@
<!-- 标签弹窗 --> <!-- 标签弹窗 -->
<a-modal <a-modal
title="标签设置" title="标签设置"
:open="addLabelFlag" :open="addFileTagsFlag"
:mask="false" :mask="false"
:maskClosable="false" :maskClosable="false"
:closable="false" :closable="false"
@ -506,21 +510,24 @@
<div style="display: block"> <div style="display: block">
<div <div
style="display: flex; flex-wrap: wrap; gap: 5px; width: 96%; margin: 10px" style="display: flex; flex-wrap: wrap; gap: 5px; width: 96%; margin: 10px"
v-if="props.nowShowImageData.file_tags.length > 0" v-if="props.nowShowImageData.fileTags && props.nowShowImageData.fileTags.length > 0"
> >
已添加的标签： 已添加的标签：
<div <div
v-for="la in props.nowShowImageData.file_tags" v-for="la in props.nowShowImageData.fileTags"
:key="la" :key="la"
style="border: 1px solid #595959; border-radius: 3px" style="border: 1px solid #595959; border-radius: 3px"
> >
<span style="margin-left: 5px">{{ la }}</span> <span style="margin-left: 5px">{{ la }}</span>
<CloseOutlined style="margin-left: 5px; margin-right: 5px" @click="deleteLabel(la)" /> <CloseOutlined
style="margin-left: 5px; margin-right: 5px"
@click="deleteFileTags(la)"
/>
</div> </div>
</div> </div>
<div style="display: inline-flex; gap: 5px; width: 96%; margin: 10px"> <div style="display: inline-flex; gap: 5px; width: 96%; margin: 10px">
<a-input v-model:value="newLabelName" size="small" placeholder="请输入标签" /> <a-input v-model:value="newFileTagsName" size="small" placeholder="请输入标签" />
<a-button type="primary" @click="pressEnterLabelFunction">添加</a-button> <a-button type="primary" @click="pressEnterFileTagsFunction">添加</a-button>
</div> </div>
<div <div
style=" style="
@ -533,8 +540,8 @@
> >
<a-button <a-button
@click=" @click="
addLabelFlag = false; addFileTagsFlag = false;
newLabelName = ''; newFileTagsName = '';
" "
> >
关闭 关闭
@ -569,16 +576,32 @@
PlusSquareOutlined, PlusSquareOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import {
UpdatePicStatus,
Deletepic,
UpdatePicName,
UpdatePicParentKey,
} from '@/api/demo/mediaLibrary';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const props = defineProps(['nowShowImageData', 'allImageDataList']); const props = defineProps(['nowShowImageData', 'allImageDataList']);
const emits = defineEmits(['setNowShowImageData', 'closePathImageInfo', 'handlerLocation']); const emits = defineEmits([
'setNowShowImageData',
'closePathImageInfo',
'handleSuccessPath',
'handlerLocation',
]);
// 图片获取路径
function getImgurl(url) {
return 'http://175.27.168.120:6014/api/v1/buckets/test/objects/download?prefix=' + url;
}
// 修改名称-------------------------------- // 修改名称--------------------------------
const editNameFlag = ref(true);
const focusInputRef = ref(); const focusInputRef = ref();
const editNameFlag = ref(true);
const editName = ref(props.nowShowImageData.name.split('.').slice(0, -1).join('.')); const editName = ref(props.nowShowImageData.name.split('.').slice(0, -1).join('.'));
function editNameChange() { function editNameChange() {
if (props.nowShowImageData.name.split('.').length <= 1) { if (props.nowShowImageData.name.split('.').length <= 1) {
@ -601,95 +624,23 @@
} }
let query = { let query = {
id: props.nowShowImageData.id, id: props.nowShowImageData.id,
newName: newName, name: newName,
}; };
props.nowShowImageData.name = newName; UpdatePicName(query).then((res) => {
editNameFlag.value = true; props.nowShowImageData.name = newName;
// emits('reloadTable'); editNameFlag.value = true;
return; createMessage.success(res);
// // 调用接口 emits('handleSuccessPath');
// const data = await orgPosGroup(query); });
// if (data) {
// editNameFlag.value = true;
// emit('reloadTable');
// return createMessage.success('修改名称成功');
// } else {
// return createMessage.error('修改名称失败');
// }
} }
function editNameBlur() { function editNameBlur() {
editNameFlag.value = true; editNameFlag.value = true;
editName.value = props.nowShowImageData.name.split('.').slice(0, -1).join('.'); editName.value = props.nowShowImageData.name.split('.').slice(0, -1).join('.');
} }
// 标签---------------------------------------------------------------------
const addLabelFlag = ref(false);
const newLabelName = ref('');
function addLabelChange() {
addLabelFlag.value = true;
}
// 添加标签方法
async function pressEnterLabelFunction() {
if (!newLabelName.value) {
return;
}
if (!props.nowShowImageData.file_tags.includes(newLabelName.value)) {
props.nowShowImageData.file_tags.push(newLabelName.value);
let query = {
id: props.nowShowImageData.id,
newLabel: props.nowShowImageData.file_tags,
};
addLabelFlag.value = true;
// choosenowShowImageData({
// ...props.nowShowImageData,
// label: props.nowShowImageData.file_tags,
// });
// emits('reloadTable');
newLabelName.value = '';
return;
// // 调用接口
// const data = await orgPosGroup(query);
// if (data) {
// addLabelFlag.value = true;
// emit('reloadTable');
// return createMessage.success('修改名称成功');
// } else {
// return createMessage.error('修改名称失败');
// }
} else {
return createMessage.error('此标签已存在！');
}
}
// 删除标签
function deleteLabel(value) {
createConfirm({
iconType: 'info',
title: '提醒',
content: '删除标签【' + value + '】，同标签名的涂鸦标记都会被删除！',
onOk: () => {
props.nowShowImageData.file_tags = props.nowShowImageData.file_tags.filter(
(item) => item !== value,
);
let json = JSON.parse(props.nowShowImageData.graffitiJson);
if (json.some((item) => item.text == value)) {
json = json.filter((item) => item.text !== value);
props.nowShowImageData.graffitiJson = JSON.stringify(json);
graffitis.value = JSON.parse(JSON.stringify(json));
}
// choosenowShowImageData({
// ...props.nowShowImageData,
// label: props.nowShowImageData.file_tags,
// graffitiJson: JSON.stringify(json),
// });
// emits('reloadTable');
},
onCancel: () => {},
});
}
// 关闭图片抽屉-------------------------------------------------------------- // 关闭图片抽屉--------------------------------------------------------------
function closePathImageInfo() { function closePathImageInfo() {
emits('closePathImageInfo'); emits('setNowShowImageData', {});
} }
// 上一张、下一张图片-------------------------------------------------------------- // 上一张、下一张图片--------------------------------------------------------------
@ -732,7 +683,6 @@
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
// 缩放比例 // 缩放比例
const scale = ref(1); const scale = ref(1);
// 放大函数 // 放大函数
function zoomIn() { function zoomIn() {
if (scale.value < 3) { if (scale.value < 3) {
@ -747,13 +697,6 @@
scale.value -= 0.1; scale.value -= 0.1;
} }
} }
const imageWidth = ref(720);
const imageHeight = ref(540);
// 100%比例
function setProportion() {
imageWidth.value = 1440;
imageHeight.value = 1080;
}
// 旋转 // 旋转
const rotationAngle = ref(0); const rotationAngle = ref(0);
// 顺时针旋转函数 // 顺时针旋转函数
@ -764,13 +707,50 @@
function rotateCounterClockwise() { function rotateCounterClockwise() {
rotationAngle.value -= 90; // 每次旋转-90度 rotationAngle.value -= 90; // 每次旋转-90度
} }
// 宽高
const imageWidth = ref(720);
const imageHeight = ref(553);
// 设置高度和宽度
function getImageWidthAndHeight() {
if (
props.nowShowImageData.width &&
props.nowShowImageData.height &&
props.nowShowImageData.width > 720 &&
props.nowShowImageData.height > 553
) {
imageWidth.value = 720;
imageHeight.value = (720 / props.nowShowImageData.width) * props.nowShowImageData.height;
} else {
imageHeight.value = 553;
imageWidth.value = 720;
}
}
onMounted(() => {
getImageWidthAndHeight();
});
// 100%比例
function setProportion() {
if (
props.nowShowImageData.width &&
props.nowShowImageData.height &&
props.nowShowImageData.width > 720 &&
props.nowShowImageData.height > 553
) {
imageWidth.value = props.nowShowImageData.width;
imageHeight.value = props.nowShowImageData.height;
} else {
imageWidth.value = 1440;
imageHeight.value = 1106;
}
}
// 刷新 // 刷新
function refresh() { function refresh() {
scale.value = 1; scale.value = 1;
rotationAngle.value = 0; rotationAngle.value = 0;
graffitiFlag.value = false; graffitiFlag.value = false;
imageWidth.value = 720; getImageWidthAndHeight();
imageHeight.value = 540;
// 复位 // 复位
const dragDocument: any = document.querySelector('.dragModal'); const dragDocument: any = document.querySelector('.dragModal');
if (dragDocument) { if (dragDocument) {
@ -780,16 +760,29 @@
} }
// 移动到中心位置 // 移动到中心位置
function handlerLocation() { function handlerLocation() {
emits('handlerLocation', props.nowShowImageData.photo_position); emits('handlerLocation', props.nowShowImageData);
} }
// 加载到地图上 // 加载到地图上
function funAddOrRemoveToMap() { function funShowOnMap() {
props.nowShowImageData.show_on_map = !props.nowShowImageData.show_on_map; if (props.nowShowImageData.showOnMap == 1) {
if (props.nowShowImageData.show_on_map) { props.nowShowImageData.showOnMap = 0;
createMessage.success('在地图上加载成功');
} else { } else {
createMessage.success('在地图上取消加载成功'); props.nowShowImageData.showOnMap = 1;
} }
UpdatePicStatus({
id: props.nowShowImageData.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowShowImageData.display,
showOnMap: props.nowShowImageData.showOnMap,
}).then((res) => {
if (props.nowShowImageData.showOnMap == 1) {
createMessage.success('在地图上加载成功');
} else {
createMessage.success('在地图上取消加载成功');
}
emits('handleSuccessPath');
});
} }
// 选择当前展示图片----------------------------------------------- // 选择当前展示图片-----------------------------------------------
@ -810,36 +803,123 @@
} }
} }
// 标签--------------------------------
const addFileTagsFlag = ref(false);
const newFileTagsName = ref('');
const fileTags: any = ref([]);
// 所有已创建的矩形
const graffitis: any = ref([]);
const graffitisClone: any = ref([]);
watch(
() => props.nowShowImageData,
() => {
graffitis.value = props.nowShowImageData.graffitiJson
? props.nowShowImageData.graffitiJson
: [];
fileTags.value = props.nowShowImageData.fileTags ? props.nowShowImageData.fileTags : [];
},
{
deep: true,
immediate: true,
},
);
// 打开标签弹窗
function addFileTagsChange() {
addFileTagsFlag.value = true;
}
// 添加标签方法
async function pressEnterFileTagsFunction() {
if (!newFileTagsName.value) {
return;
}
if (!fileTags.value.includes(newFileTagsName.value)) {
fileTags.value.push(newFileTagsName.value);
UpdatePicStatus({
id: props.nowShowImageData.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowShowImageData.display ? 1 : 0,
showOnMap: props.nowShowImageData.showOnMap ? 1 : 0,
}).then((res) => {
addFileTagsFlag.value = true;
newFileTagsName.value = '';
emits('handleSuccessPath');
});
} else {
return createMessage.error('此标签已存在！');
}
}
// 删除标签
function deleteFileTags(value) {
createConfirm({
iconType: 'info',
title: '提醒',
content: '删除标签【' + value + '】，同标签名的涂鸦标记都会被删除！',
onOk: () => {
fileTags.value = fileTags.value.filter((item) => item !== value);
let json = graffitis.value;
if (json.some((item) => item.text == value)) {
json = json.filter((item) => item.text !== value);
graffitis.value = json;
}
UpdatePicStatus({
id: props.nowShowImageData.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowShowImageData.display,
showOnMap: props.nowShowImageData.showOnMap,
}).then((res) => {
emits('handleSuccessPath');
});
},
onCancel: () => {},
});
}
// 涂鸦 // 涂鸦
// ref // ref
const mouseCanvasRef = ref(); const mouseCanvasRef = ref();
const graffitiColor = ref('#E23C39'); const graffitiColor = ref('#E23C39');
const nowGraffiti = ref(-1); const nowGraffiti = ref(-1);
// 所有已创建的矩形
const graffitis: any = ref([]);
const graffitisClone: any = ref([]);
// 添加 // 添加
function addGraffiti() { function addGraffiti() {
props.nowShowImageData.graffitiJson = JSON.stringify(graffitis.value);
graffitis.value.forEach((item) => { graffitis.value.forEach((item) => {
if (!props.nowShowImageData.file_tags.includes(item.text)) { if (item.text && !fileTags.value.includes(item.text)) {
if (item.text) { if (item.text) {
props.nowShowImageData.file_tags.push(item.text); fileTags.value.push(item.text);
} }
} }
}); });
UpdatePicStatus({
id: props.nowShowImageData.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowShowImageData.display,
showOnMap: props.nowShowImageData.showOnMap,
}).then((res) => {
emits('handleSuccessPath');
});
} }
// 删除 // 删除
function deleteGraffiti(index = undefined, value = undefined) { function deleteGraffiti(index = undefined, value = undefined) {
graffitis.value.splice(index, 1); graffitis.value.splice(index, 1);
// 刷新or删除标签 // 刷新or删除标签
props.nowShowImageData.graffitiJson = JSON.stringify(graffitis.value);
if (!graffitis.value.some((item) => item.text == value)) { if (!graffitis.value.some((item) => item.text == value)) {
props.nowShowImageData.file_tags = props.nowShowImageData.file_tags.filter( fileTags.value = fileTags.value.filter((la) => la != value);
(la) => la != value,
);
} }
UpdatePicStatus({
id: props.nowShowImageData.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowShowImageData.display,
showOnMap: props.nowShowImageData.showOnMap,
}).then((res) => {
emits('handleSuccessPath');
});
} }
//------------------------------------------------------------------------ //------------------------------------------------------------------------
@ -858,7 +938,7 @@
// 鼠标按下 // 鼠标按下
function onMouseDown(event) { function onMouseDown(event) {
if (graffitiFlag.value) { if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
// 涂鸦 // 涂鸦
if (nowGraffiti.value != -1) return; if (nowGraffiti.value != -1) return;
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return; if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@ -895,7 +975,7 @@
} }
// 鼠标移动 // 鼠标移动
function onMouseMove(event) { function onMouseMove(event) {
if (graffitiFlag.value) { if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
// 涂鸦 // 涂鸦
const rect = mouseCanvasRef.value.getBoundingClientRect(); const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return; if (!isDragging.value) return;
@ -919,7 +999,7 @@
} }
// 鼠标松开 // 鼠标松开
function onMouseUp(event) { function onMouseUp(event) {
if (graffitiFlag.value) { if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
// 涂鸦 // 涂鸦
if (!isDragging.value) return; if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect(); const rect = mouseCanvasRef.value.getBoundingClientRect();
@ -1014,15 +1094,15 @@
const mouseEditType = ref(''); const mouseEditType = ref('');
function funMouseDownEdit(e, index, type) { function funMouseDownEdit(e, index, type) {
// 获取相对于容器的坐标 // 获取相对于容器的坐标
graffitisClone.value = cloneDeep(graffitis.value); // graffitisClone.value = cloneDeep(graffitis.value);
const rect = mouseCanvasRef.value.getBoundingClientRect(); // const rect = mouseCanvasRef.value.getBoundingClientRect();
startX = e.x - rect.x; // startX = e.x - rect.x;
startY = e.y - rect.y; // startY = e.y - rect.y;
isDragging.value = true; // isDragging.value = true;
nowGraffiti.value = index; // nowGraffiti.value = index;
mouseEditType.value = type; // mouseEditType.value = type;
window.addEventListener('mousemove', funMouseMoveEdit); // window.addEventListener('mousemove', funMouseMoveEdit);
window.addEventListener('mouseup', funMouseUpEdit); // window.addEventListener('mouseup', funMouseUpEdit);
} }
// 编辑状态下的鼠标移动 // 编辑状态下的鼠标移动
function funMouseMoveEdit(e) { function funMouseMoveEdit(e) {
@ -1090,20 +1170,6 @@
} }
}; };
watch(
() => props.nowShowImageData.id,
() => {
if (props.nowShowImageData.graffitiJson) {
graffitis.value = JSON.parse(props.nowShowImageData.graffitiJson);
} else {
graffitis.value = [];
}
},
{
deep: true,
immediate: true,
},
);
// 在组件挂载时添加监听器 // 在组件挂载时添加监听器
onMounted(() => { onMounted(() => {
addEventListener(); addEventListener();

973
src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
View File

File diff suppressed because it is too large Load Diff

1777
src/views/demo/system/mediaLibrary/path/pathMap.vue
View File

File diff suppressed because it is too large Load Diff

37
src/views/demo/system/mediaLibrary/path/svg.ts
View File

@ -232,3 +232,40 @@ viewBox="0 0 512 512">
<path d="M464 464H48a16 16 0 0 1-14.07-23.62l208-384a16 16 0 0 1 28.14 0l208 384A16 16 0 0 1 464 464z" fill="#000000"> <path d="M464 464H48a16 16 0 0 1-14.07-23.62l208-384a16 16 0 0 1 28.14 0l208 384A16 16 0 0 1 464 464z" fill="#000000">
</path> </path>
</svg>`; </svg>`;
export const defaultIcon = `<svg width="15px" height="21.25px" viewBox="0 0 20 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="林业防火-智览-物资点图层-2.0" transform="translate(-880, -469)" fill="currentColor">
<g id="菱形" transform="translate(880, 469)">
<path d="M9.90588766,0 L20,13.1685517 L12.4843534,23.5505302 L12.4843534,28.0455285 L7.51106516,28.0455285 L7.51106516,23.5505302 L0,13.1685517 L9.90588766,0 Z M9.90588766,6 L5,13.1685517 L9.90588766,20.3166169 L15,13.1685517 L9.90588766,6 Z" id="形状结合"></path>
</g>
</g>
</g>
</svg>`;
export const locateBack = `<svg width="24px" height="28px" viewBox="0 0 24 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
<g id="林业防火-智览-物资点图层-2.0" transform="translate(-914, -469)" fill-rule="nonzero" stroke-width="2.75">
<g id="定位" transform="translate(916, 471)">
<path d="M10,23.8461538 C10,23.8461538 20,17.3107692 20,9.75523077 C20,4.36756923 15.5228462,0 10,0 C4.47715385,0 0,4.36756923 0,9.75523077 C0,17.3107692 10,23.8461538 10,23.8461538 Z" id="路径" stroke="currentColor" fill="currentColor"></path>
<path d="M10,16 C13.31368,16 16,13.31368 16,10 C16,6.68632 13.31368,4 10,4 C6.68632,4 4,6.68632 4,10 C4,13.31368 6.68632,16 10,16 Z" id="路径" stroke="#ffffff" fill="#ffffff"></path>
</g>
</g>
</g>
</svg>`;
export const fireIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M19.48 12.35c-1.57-4.08-7.16-4.3-5.81-10.23c.1-.44-.37-.78-.75-.55C9.29 3.71 6.68 8 8.87 13.62c.18.46-.36.89-.75.59c-1.81-1.37-2-3.34-1.84-4.75c.06-.52-.62-.77-.91-.34C4.69 10.16 4 11.84 4 14.37c.38 5.6 5.11 7.32 6.81 7.54c2.43.31 5.06-.14 6.95-1.87c2.08-1.93 2.84-5.01 1.72-7.69zm-9.28 5.03c1.44-.35 2.18-1.39 2.38-2.31c.33-1.43-.96-2.83-.09-5.09c.33 1.87 3.27 3.04 3.27 5.08c.08 2.53-2.66 4.7-5.56 2.32z" fill="currentColor">
</path></svg>`;
export const peopleIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<circle cx="12" cy="4" r="2" fill="currentColor"></circle><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54C8.24 6.99 6 4.75 6 2H4c0 3.16 2.11 5.84 5 6.71V22h2v-6h2v6h2V10.05L18.95 14l1.41-1.41l-4.47-4.48z" fill="currentColor">
</path></svg>`;
export const warnIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12"><g fill="none"><path d="M5.214 1.459a.903.903 0 0 1 1.572 0l4.092 7.169c.348.61-.089 1.372-.787 1.372H1.91c-.698 0-1.135-.762-.787-1.372l4.092-7.17zM5.5 4.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-1 0zM6 6.75a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5z" fill="currentColor">
</path></g></svg>`;
export const carIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path d="M447.68 220.78a16 16 0 0 0-1-3.08l-37.78-88.16C400.19 109.17 379 96 354.89 96H157.11c-24.09 0-45.3 13.17-54 33.54L65.29 217.7A15.72 15.72 0 0 0 64 224v176a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-16h256v16a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V224a16.15 16.15 0 0 0-.32-3.22zM144 320a32 32 0 1 1 32-32a32 32 0 0 1-32 32zm224 0a32 32 0 1 1 32-32a32 32 0 0 1-32 32zM104.26 208l28.23-65.85C136.11 133.69 146 128 157.11 128h197.78c11.1 0 21 5.69 24.62 14.15L407.74 208z" fill="currentColor">
</path></svg>`;
export const checkIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
</path></svg>`;
export const closeIcon = `<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor">
</path></svg>`;

20
src/views/demo/system/mediaLibrary/preview/index.vue
View File

@ -4,7 +4,7 @@
<div class="title-1">{{ props.nowPreviewRecord.name }}</div> <div class="title-1">{{ props.nowPreviewRecord.name }}</div>
<div class="title-2"> <div class="title-2">
{{ {{
props.nowPreviewRecord.createtime + props.nowPreviewRecord.createTime +
' ' + ' ' +
props.nowPreviewRecord.size + props.nowPreviewRecord.size +
' ' + ' ' +
@ -18,12 +18,12 @@
<div class="mainBody"> <div class="mainBody">
<div class="imgOrVideo"> <div class="imgOrVideo">
<!-- 图片 --> <!-- 图片 -->
<div class="imageDiv" v-if="props.nowPreviewRecord.type == 'img'"> <div class="imageDiv" v-if="props.nowPreviewRecord.objectKey">
<PreviewImage <PreviewImage
:nowPreviewRecord="props.nowPreviewRecord" :nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList" :previewRecordList="props.previewRecordList"
@chooseNowPreviewRecord="chooseNowPreviewRecord" @chooseNowPreviewRecord="chooseNowPreviewRecord"
@reloadTable="reloadTable" @handleSuccess="handleSuccess"
@setHideOrShowTextboxFlag="setHideOrShowTextboxFlag" @setHideOrShowTextboxFlag="setHideOrShowTextboxFlag"
/> />
</div> </div>
@ -33,17 +33,17 @@
:nowPreviewRecord="props.nowPreviewRecord" :nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList" :previewRecordList="props.previewRecordList"
@chooseNowPreviewRecord="chooseNowPreviewRecord" @chooseNowPreviewRecord="chooseNowPreviewRecord"
@reloadTable="reloadTable" @handleSuccess="handleSuccess"
/> />
</div> </div>
</div> </div>
<div class="information"> <div class="information">
<PreviewImageInformation <PreviewImageInformation
v-if="props.nowPreviewRecord.type == 'img'" v-if="props.nowPreviewRecord.objectKey"
:nowPreviewRecord="props.nowPreviewRecord" :nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList" :previewRecordList="props.previewRecordList"
@chooseNowPreviewRecord="chooseNowPreviewRecord" @chooseNowPreviewRecord="chooseNowPreviewRecord"
@reloadTable="reloadTable" @handleSuccess="handleSuccess"
:hideOrShowTextboxFlag="hideOrShowTextboxFlag" :hideOrShowTextboxFlag="hideOrShowTextboxFlag"
/> />
<PreviewVideoInformation <PreviewVideoInformation
@ -51,7 +51,7 @@
:nowPreviewRecord="props.nowPreviewRecord" :nowPreviewRecord="props.nowPreviewRecord"
:previewRecordList="props.previewRecordList" :previewRecordList="props.previewRecordList"
@chooseNowPreviewRecord="chooseNowPreviewRecord" @chooseNowPreviewRecord="chooseNowPreviewRecord"
@reloadTable="reloadTable" @handleSuccess="handleSuccess"
/> />
</div> </div>
</div> </div>
@ -68,7 +68,7 @@
} from './preview'; } from './preview';
const props = defineProps(['nowPreviewRecord', 'previewRecordList']); const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']); const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'handleSuccess']);
const hideOrShowTextboxFlag = ref(true); const hideOrShowTextboxFlag = ref(true);
function setHideOrShowTextboxFlag(value) { function setHideOrShowTextboxFlag(value) {
@ -80,8 +80,8 @@
emit('chooseNowPreviewRecord', value); emit('chooseNowPreviewRecord', value);
} }
// 刷新表格 // 刷新表格
function reloadTable() { function handleSuccess(record = null) {
emit('reloadTable'); emit('handleSuccess', record);
} }
// 关闭弹窗 // 关闭弹窗
function closeModal() { function closeModal() {

451
src/views/demo/system/mediaLibrary/preview/previewImage.vue
View File

@ -3,14 +3,18 @@
<div id="imageDiv" class="imageDiv" style="overflow: hidden"> <div id="imageDiv" class="imageDiv" style="overflow: hidden">
<div <div
ref="mouseCanvasRef" ref="mouseCanvasRef"
class="dragModal"
@mousedown="onMouseDown" @mousedown="onMouseDown"
@wheel="onWheel"
:style="{ :style="{
position: 'relative', position: 'relative',
transform: `scale(${scale}) rotate(${rotationAngle}deg)`, transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
transition: 'transform 0.2s', transition: 'transform 0.2s',
width: `${getImageWidthAndHeight[0]}px`, width: `${imageWidth}px`,
height: `${getImageWidthAndHeight[1]}px`, height: `${imageHeight}px`,
background: `url(${props.nowPreviewRecord.url}) no-repeat`, background: `url(${getImgurl(props.nowPreviewRecord.objectKey)}) no-repeat center center`,
backgroundSize: 'contain',
backgroundPosition: 'center',
}" }"
> >
<!-- 创建的矩形 --> <!-- 创建的矩形 -->
@ -34,7 +38,7 @@
position: 'absolute', position: 'absolute',
left: '0px', left: '0px',
top: rect.height + 'px', top: rect.height + 'px',
width: '220px', width: '235px',
height: 30 + 'px', height: 30 + 'px',
background: nowGraffiti == index ? '#ffffff' : '#ffffff00', background: nowGraffiti == index ? '#ffffff' : '#ffffff00',
}" }"
@ -50,7 +54,7 @@
" "
/> />
<CheckOutlined <CheckOutlined
style="margin-right: 10px; color: green" style="margin-right: 10px; padding: 3px; color: green"
@click=" @click="
nowGraffiti = -1; nowGraffiti = -1;
rect.status = 'success'; rect.status = 'success';
@ -58,7 +62,7 @@
" "
/> />
<CloseOutlined <CloseOutlined
style="margin-right: 10px; color: red" style="margin-right: 10px; padding: 3px; color: red"
@click=" @click="
rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = ''); rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
nowGraffiti = -1; nowGraffiti = -1;
@ -66,7 +70,7 @@
" "
/> />
<DeleteOutlined <DeleteOutlined
style="margin-right: 10px" style="margin-right: 10px; padding: 3px"
@click=" @click="
deleteGraffiti(index, rect.text); deleteGraffiti(index, rect.text);
nowGraffiti = -1; nowGraffiti = -1;
@ -74,7 +78,7 @@
/> />
<a-popover placement="top"> <a-popover placement="top">
<template #content> <template #content>
<div style="display: flex; gap: 5px"> <div style="display: flex; gap: 3px">
<div <div
class="popoverClass" class="popoverClass"
v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']" v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
@ -82,7 +86,10 @@
:style="{ background: color }" :style="{ background: color }"
@click="rect.color = color" @click="rect.color = color"
> >
<CheckOutlined v-if="rect.color == color" style="color: white" /> <CheckOutlined
v-if="rect.color == color"
style="color: white; padding: 3px"
/>
</div> </div>
</div> </div>
</template> </template>
@ -94,7 +101,7 @@
style=" style="
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
-webkit-text-stroke: 1px white; -webkit-text-stroke: 0.1px white;
width: fit-content; width: fit-content;
" "
:style="{ :style="{
@ -294,18 +301,25 @@
<RotateLeftOutlined @click="rotateCounterClockwise" /> <RotateLeftOutlined @click="rotateCounterClockwise" />
</a-tooltip> </a-tooltip>
</div> </div>
<!-- 100%比例 -->
<div class="button">
<a-tooltip placement="top">
<template #title>
<span>100%比例</span>
</template>
<OneToOneOutlined @click="setProportion" />
</a-tooltip>
</div>
<!-- 刷新 --> <!-- 刷新 -->
<div class="button"> <div class="button">
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title> <template #title>
<span>刷新</span> <span>复位刷新</span>
</template> </template>
<RedoOutlined @click="refresh" /> <RedoOutlined @click="refresh" />
</a-tooltip> </a-tooltip>
</div> </div>
<span style="color: #ffffff; margin-left: 5px; margin-right: 5px">|</span> <span style="color: #ffffff; margin-left: 5px; margin-right: 5px">|</span>
<!-- 全屏 -->
<!-- <div class="button"> <RedoOutlined @click="refresh" /> </div> -->
<!-- 对比 --> <!-- 对比 -->
<div class="button"> <div class="button">
<a-tooltip placement="top"> <a-tooltip placement="top">
@ -316,15 +330,15 @@
</a-tooltip> </a-tooltip>
</div> </div>
<!-- 加载到地图上 --> <!-- 加载到地图上 -->
<div class="button2" @click="funAddOrRemoveToMap"> <div class="button2" @click="funShowOnMap">
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title> <template #title>
<span> <span>
{{ props.nowPreviewRecord.addOrRemoveToMap ? '在地图上取消加载' : '在地图上加载' }} {{ props.nowPreviewRecord.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
</span> </span>
</template> </template>
<svg <svg
v-if="props.nowPreviewRecord.addOrRemoveToMap" v-if="props.nowPreviewRecord.showOnMap == 1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -337,7 +351,7 @@
></path> ></path>
</svg> </svg>
<svg <svg
v-if="!props.nowPreviewRecord.addOrRemoveToMap" v-if="props.nowPreviewRecord.showOnMap != 1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -357,7 +371,7 @@
<template #title> <template #title>
<span>图片链接复制到剪贴板</span> <span>图片链接复制到剪贴板</span>
</template> </template>
<ExportOutlined @click="copyToClipboard(props.nowPreviewRecord.url)" /> <ExportOutlined @click="copyToClipboard(props.nowPreviewRecord.objectKey)" />
</a-tooltip> </a-tooltip>
</div> </div>
<!-- 下载 --> <!-- 下载 -->
@ -366,7 +380,7 @@
<template #title> <template #title>
<span>下载</span> <span>下载</span>
</template> </template>
<DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.url)" /> <DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.objectKey)" />
</a-tooltip> </a-tooltip>
</div> </div>
<!-- 删除 --> <!-- 删除 -->
@ -382,10 +396,10 @@
<div class="imageList"> <div class="imageList">
<div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)"> <div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
<div <div
v-if="li.objectKey"
:class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'" :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
v-if="li.type == 'img'"
> >
<img :src="li.url" :width="60" :height="40" /> <img :src="getImgurl(li.objectKey)" loading="lazy" :width="60" :height="40" />
</div> </div>
</div> </div>
</div> </div>
@ -501,41 +515,38 @@
EditOutlined, EditOutlined,
FontColorsOutlined, FontColorsOutlined,
RedoOutlined, RedoOutlined,
OneToOneOutlined,
FileImageOutlined, FileImageOutlined,
BorderHorizontalOutlined, BorderHorizontalOutlined,
ExpandOutlined, ExpandOutlined,
CompressOutlined, CompressOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import {
UpdatePicStatus,
Deletepic,
UpdatePicName,
UpdatePicParentKey,
} from '@/api/demo/mediaLibrary';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
const { createConfirm, createMessage } = useMessage(); const { createConfirm, createMessage } = useMessage();
const props = defineProps(['nowPreviewRecord', 'previewRecordList']); const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable', 'setHideOrShowTextboxFlag']); const emits = defineEmits([
'chooseNowPreviewRecord',
'handleSuccess',
'setHideOrShowTextboxFlag',
]);
// 宽高 // 图片获取路径
const getImageWidthAndHeight = computed(() => { function getImgurl(url) {
let width = 1300; return 'http://175.27.168.120:6014/api/v1/buckets/test/objects/download?prefix=' + url;
let height = 800; }
if (props.nowPreviewRecord.width > 1300 || props.nowPreviewRecord.height > 800) {
if (props.nowPreviewRecord.width / 1300 > props.nowPreviewRecord.height / 800) {
width = 1300;
height = (props.nowPreviewRecord.height / props.nowPreviewRecord.width) * 1300;
} else {
height = 800;
width = (props.nowPreviewRecord.width / props.nowPreviewRecord.height) * 800;
}
} else {
width = props.nowPreviewRecord.width;
height = props.nowPreviewRecord.height;
}
return [width, height];
});
// 上一张、下一张图片 // 上一张、下一张图片
function clickLeftOrRightButton(direction) { function clickLeftOrRightButton(direction) {
const list = props.previewRecordList.filter((item) => item.type == 'img'); const list = props.previewRecordList.filter((item) => item.objectKey);
graffitiFlag.value = false; graffitiFlag.value = false;
for (let index = 0; index < list.length; index++) { for (let index = 0; index < list.length; index++) {
if (list[index].id == props.nowPreviewRecord.id) { if (list[index].id == props.nowPreviewRecord.id) {
@ -559,35 +570,28 @@
// 选择 // 选择
function chooseNowPreviewRecord(value) { function chooseNowPreviewRecord(value) {
emit('chooseNowPreviewRecord', value); emits('chooseNowPreviewRecord', value);
// 初始化 refresh();
scale.value = 1;
rotationAngle.value = 0;
} }
// 刷新表格 // 刷新表格
function reloadTable() { function handleSuccess(record = null) {
emit('reloadTable'); emits('handleSuccess', record);
} }
// 缩放比例
// 缩放比例-----------------------------------
const scale = ref(1); const scale = ref(1);
// 放大函数 // 放大函数
function zoomIn() { function zoomIn() {
if (scale.value < 3) { if (scale.value < 3) {
// 设置最大缩放倍数为3倍
scale.value += 0.1; scale.value += 0.1;
} }
} }
// 缩小函数 // 缩小函数
function zoomOut() { function zoomOut() {
if (scale.value > 0.5) { if (scale.value > 0.5) {
// 设置最小缩放倍数为0.5倍
scale.value -= 0.1; scale.value -= 0.1;
} }
} }
// 旋转
// 旋转-----------------------------------
const rotationAngle = ref(0); const rotationAngle = ref(0);
// 顺时针旋转函数 // 顺时针旋转函数
function rotateClockwise() { function rotateClockwise() {
@ -598,20 +602,85 @@
rotationAngle.value -= 90; // 每次旋转-90度 rotationAngle.value -= 90; // 每次旋转-90度
} }
// 宽高
const imageWidth = ref(1040);
const imageHeight = ref(800);
// 设置高度和宽度
function getImageWidthAndHeight() {
if (
props.nowPreviewRecord.width &&
props.nowPreviewRecord.height &&
props.nowPreviewRecord.width > 1040 &&
props.nowPreviewRecord.height > 800
) {
imageHeight.value = 800;
imageWidth.value = (800 / props.nowPreviewRecord.height) * props.nowPreviewRecord.width;
} else {
imageHeight.value = 800;
imageWidth.value = 1040;
}
}
onMounted(() => {
getImageWidthAndHeight();
});
// 100%比例
function setProportion() {
if (
props.nowPreviewRecord.width &&
props.nowPreviewRecord.height &&
props.nowPreviewRecord.width > 1040 &&
props.nowPreviewRecord.height > 800
) {
imageWidth.value = props.nowPreviewRecord.width;
imageHeight.value = props.nowPreviewRecord.height;
} else {
imageWidth.value = 2080;
imageHeight.value = 1600;
}
}
// 刷新 // 刷新
function refresh() { function refresh() {
scale.value = 1; scale.value = 1;
rotationAngle.value = 0; rotationAngle.value = 0;
graffitiFlag.value = false; graffitiFlag.value = false;
getImageWidthAndHeight();
// 复位
const dragDocument: any = document.querySelector('.dragModal');
if (dragDocument) {
dragDocument.style.left = 0 + 'px';
dragDocument.style.top = 0 + 'px';
}
} }
// 删除 // 删除
function deleteImage() {} function deleteImage() {
let content = '确定要删除选择的文件/文件夹吗？';
if (props.previewRecordList.length == 1) {
content = '下列图片只有一个，删除此图片后将会关闭此弹窗，确定要删除选择的文件吗？';
}
createConfirm({
iconType: 'info',
title: '删除',
content: content,
onOk: async () => {
let ids = props.nowPreviewRecord.id;
Deletepic({
ids: ids,
}).then((res) => {
handleSuccess(props.nowPreviewRecord);
createMessage.success(res);
});
},
});
}
// 复制到剪贴板----------------------------------- // 复制到剪贴板
const copyToClipboard = async (url) => { const copyToClipboard = async (url) => {
try { try {
await navigator.clipboard.writeText(url); await navigator.clipboard.writeText(getImgurl(url));
createMessage.success('图片链接已复制到剪贴板'); createMessage.success('图片链接已复制到剪贴板');
} catch (err) { } catch (err) {
createMessage.error('无法复制图片链接'); createMessage.error('无法复制图片链接');
@ -619,19 +688,32 @@
}; };
// 加载到地图上 // 加载到地图上
function funAddOrRemoveToMap() { function funShowOnMap() {
props.nowPreviewRecord.addOrRemoveToMap = !props.nowPreviewRecord.addOrRemoveToMap; if (props.nowPreviewRecord.showOnMap == 1) {
if (props.nowPreviewRecord.addOrRemoveToMap) { props.nowPreviewRecord.showOnMap = 0;
createMessage.success('在地图上加载成功');
} else { } else {
createMessage.success('在地图上取消加载成功'); props.nowPreviewRecord.showOnMap = 1;
} }
UpdatePicStatus({
id: props.nowPreviewRecord.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowPreviewRecord.display,
showOnMap: props.nowPreviewRecord.showOnMap,
}).then((res) => {
if (props.nowPreviewRecord.showOnMap == 1) {
createMessage.success('在地图上加载成功');
} else {
createMessage.success('在地图上取消加载成功');
}
emits('handleSuccess');
});
} }
// 下载 // 下载
async function fetchAndDownloadImage(url) { async function fetchAndDownloadImage(url) {
try { try {
const response = await fetch(url, { const response = await fetch(getImgurl(url), {
mode: 'cors', mode: 'cors',
}); });
if (!response.ok) { if (!response.ok) {
@ -641,7 +723,7 @@
const urlObject = window.URL.createObjectURL(blob); const urlObject = window.URL.createObjectURL(blob);
const link = document.createElement('a'); const link = document.createElement('a');
link.href = urlObject; link.href = urlObject;
link.download = props.nowPreviewRecord.name; link.download = props.nowPreviewRecord.name || 'download';
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
@ -661,7 +743,7 @@
const hideOrShowTextboxFlag = ref(true); const hideOrShowTextboxFlag = ref(true);
function hideOrShowTextbox(value) { function hideOrShowTextbox(value) {
hideOrShowTextboxFlag.value = value; hideOrShowTextboxFlag.value = value;
emit('setHideOrShowTextboxFlag', value); emits('setHideOrShowTextboxFlag', value);
} }
// 设置画笔--------------------------------------------------------------- // 设置画笔---------------------------------------------------------------
@ -685,110 +767,172 @@
let startY = 0; let startY = 0;
let endX = 0; let endX = 0;
let endY = 0; let endY = 0;
// 拖动
let initialMouseX;
let initialMouseY;
let initialDocumentX;
let initialDocumentY;
// 所有已创建的矩形 // 所有已创建的矩形
const graffitis: any = ref([]); const graffitis: any = ref([]);
const graffitisClone: any = ref([]); const graffitisClone: any = ref([]);
const fileTags: any = ref([]);
watch( watch(
() => props.nowPreviewRecord.id, () => props.nowPreviewRecord,
() => { () => {
graffitis.value = props.nowPreviewRecord.graffitiJson graffitis.value = props.nowPreviewRecord.graffitiJson
? JSON.parse(props.nowPreviewRecord.graffitiJson) ? props.nowPreviewRecord.graffitiJson
: []; : [];
fileTags.value = props.nowPreviewRecord.fileTags ? props.nowPreviewRecord.fileTags : [];
}, },
{ {
deep: true, deep: true,
immediate: true, immediate: true,
}, },
); );
watch(
() => graffitis.value,
() => {},
{
deep: true,
},
);
// 添加 // 添加标签
function addGraffiti() { function addGraffiti() {
props.nowPreviewRecord.graffitiJson = JSON.stringify(graffitis.value);
graffitis.value.forEach((item) => { graffitis.value.forEach((item) => {
if (!props.nowPreviewRecord.label.includes(item.text)) { if (item.text && !fileTags.value.includes(item.text)) {
if (item.text) { if (item.text) {
props.nowPreviewRecord.label.push(item.text); fileTags.value.push(item.text);
} }
} }
}); });
UpdatePicStatus({
id: props.nowPreviewRecord.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowPreviewRecord.display0,
showOnMap: props.nowPreviewRecord.showOnMap,
}).then((res) => {
emits('handleSuccess');
});
} }
// 删除 // 删除标签
function deleteGraffiti(index = undefined, value = undefined) { function deleteGraffiti(index = undefined, value = undefined) {
graffitis.value.splice(index, 1); graffitis.value.splice(index, 1);
// 刷新or删除标签 // 刷新or删除标签
props.nowPreviewRecord.graffitiJson = JSON.stringify(graffitis.value);
if (!graffitis.value.some((item) => item.text == value)) { if (!graffitis.value.some((item) => item.text == value)) {
props.nowPreviewRecord.label = props.nowPreviewRecord.label.filter((la) => la != value); fileTags.value = fileTags.value.filter((la) => la != value);
} }
UpdatePicStatus({
id: props.nowPreviewRecord.id,
fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(graffitis.value),
display: props.nowPreviewRecord.display,
showOnMap: props.nowPreviewRecord.showOnMap,
}).then((res) => {
emits('handleSuccess');
});
} }
const mouseCanvasRef = ref(); const mouseCanvasRef = ref();
// 鼠标按下 // 鼠标按下
function onMouseDown(e) { function onMouseDown(event) {
if (!graffitiFlag.value) return; if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
if (nowGraffiti.value != -1) return; // 涂鸦
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return; if (nowGraffiti.value != -1) return;
// 获取相对于容器的坐标 if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
const rect = mouseCanvasRef.value.getBoundingClientRect(); // 获取相对于容器的坐标
startX = e.x - rect.x; const rect = mouseCanvasRef.value.getBoundingClientRect();
startY = e.y - rect.y; startX = event.x - rect.x;
isDragging.value = true; startY = event.y - rect.y;
isDragging.value = true;
// 添加矩形到数组中 // 添加矩形到数组中
graffitis.value.push({ graffitis.value.push({
x: startX, x: startX,
y: startY, y: startY,
width: 0, width: 0,
height: 0, height: 0,
color: graffitiColor.value, color: graffitiColor.value,
text: '', text: '',
status: 'edit', status: 'edit',
}); });
graffitisClone.value = cloneDeep(graffitis.value); graffitisClone.value = cloneDeep(graffitis.value);
window.addEventListener('mousemove', onMouseMove); window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp); window.addEventListener('mouseup', onMouseUp);
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = true;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
initialDocumentX = dragDocument.offsetLeft;
initialDocumentY = dragDocument.offsetTop;
dragDocument.style.cursor = 'grabbing';
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
}
} }
// 鼠标移动 // 鼠标移动
function onMouseMove(e) { function onMouseMove(event) {
const rect = mouseCanvasRef.value.getBoundingClientRect(); if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
if (!isDragging.value) return; // 涂鸦
endX = e.x - rect.x; const rect = mouseCanvasRef.value.getBoundingClientRect();
endY = e.y - rect.y; if (!isDragging.value) return;
if (endX < 0 && endY < 0) { endX = event.x - rect.x;
endX = startX; endY = event.y - rect.y;
endY = startY; if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
setMouseData();
} else {
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
if (isDragging.value) {
const deltaX = event.clientX - initialMouseX;
const deltaY = event.clientY - initialMouseY;
dragDocument.style.left = initialDocumentX + deltaX + 'px';
dragDocument.style.top = initialDocumentY + deltaY + 'px';
}
} }
setMouseData();
} }
// 鼠标松开 // 鼠标松开
function onMouseUp(e) { function onMouseUp(event) {
if (!isDragging.value) return; if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
const rect = mouseCanvasRef.value.getBoundingClientRect(); // 涂鸦
endX = e.x - rect.x; if (!isDragging.value) return;
endY = e.y - rect.y; const rect = mouseCanvasRef.value.getBoundingClientRect();
if (endX < 0 && endY < 0) { endX = event.x - rect.x;
endX = startX; endY = event.y - rect.y;
endY = startY; if (endX < 0 && endY < 0) {
} endX = startX;
isDragging.value = false; endY = startY;
if (e.x > rect.right || e.y > rect.bottom) { }
graffitis.value.splice(graffitis.value.length - 1, 1); isDragging.value = false;
nowGraffiti.value = -1; if (event.x > rect.right || event.y > rect.bottom) {
graffitis.value.splice(graffitis.value.length - 1, 1);
nowGraffiti.value = -1;
} else {
setMouseData();
nowGraffiti.value = graffitis.value.length - 1;
}
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
} else { } else {
setMouseData(); // 拖动
nowGraffiti.value = graffitis.value.length - 1; const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false;
dragDocument.style.cursor = 'default';
}
}
// 鼠标滚轮
function onWheel(event) {
if (!graffitiFlag.value) {
const delta = event.deltaY || event.detail || event.wheelDelta;
// 根据滚轮方向调整缩放比例
if (delta < 0) {
// 向上滚动，放大
scale.value += 0.1;
} else if (scale.value > 0.5) {
// 向下滚动，缩小
scale.value -= 0.1;
}
} }
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
} }
// 设置鼠标涂鸦绘画出的数据 // 设置鼠标涂鸦绘画出的数据
@ -838,15 +982,15 @@
const mouseEditType = ref(''); const mouseEditType = ref('');
function funMouseDownEdit(e, index, type) { function funMouseDownEdit(e, index, type) {
// 获取相对于容器的坐标 // 获取相对于容器的坐标
graffitisClone.value = cloneDeep(graffitis.value); // graffitisClone.value = cloneDeep(graffitis.value);
const rect = mouseCanvasRef.value.getBoundingClientRect(); // const rect = mouseCanvasRef.value.getBoundingClientRect();
startX = e.x - rect.x; // startX = e.x - rect.x;
startY = e.y - rect.y; // startY = e.y - rect.y;
isDragging.value = true; // isDragging.value = true;
nowGraffiti.value = index; // nowGraffiti.value = index;
mouseEditType.value = type; // mouseEditType.value = type;
window.addEventListener('mousemove', funMouseMoveEdit); // window.addEventListener('mousemove', funMouseMoveEdit);
window.addEventListener('mouseup', funMouseUpEdit); // window.addEventListener('mouseup', funMouseUpEdit);
} }
// 编辑状态下的鼠标移动 // 编辑状态下的鼠标移动
function funMouseMoveEdit(e) { function funMouseMoveEdit(e) {
@ -963,7 +1107,10 @@
width: 100%; width: 100%;
height: 100px; height: 100px;
background: #1c1c1c; background: #1c1c1c;
display: block; display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.buttonList { .buttonList {
position: relative; position: relative;
@ -971,7 +1118,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 40px; height: 35px;
.button { .button {
position: relative; position: relative;
@ -997,10 +1144,13 @@
.imageList { .imageList {
display: inline-flex; display: inline-flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
width: 100%; width: 900px;
height: 60px; height: 65px;
overflow-x: auto;
white-space: nowrap;
position: relative;
.bottom_div { .bottom_div {
padding: 5px; padding: 5px;
@ -1015,6 +1165,15 @@
margin-right: 5px; margin-right: 5px;
} }
} }
.imageList::-webkit-scrollbar {
display: block;
height: 2px;
}
.imageList {
scrollbar-width: auto;
scrollbar-color: #888 #f1f1f100;
}
} }
// 上一张、下一张 // 上一张、下一张

162
src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
View File

@ -13,11 +13,8 @@
</span> </span>
<span class="infovalue_name" v-if="!editNameFlag"> <span class="infovalue_name" v-if="!editNameFlag">
<a-input v-model:value="editName" size="small" /> <a-input v-model:value="editName" size="small" />
<CheckOutlined <CheckOutlined style="margin-left: 5px; color: green" @click="pressEnterNameFunction" />
style="margin-left: 10px; color: green" <CloseOutlined style="margin-left: 5px; color: red" @click="editNameBlur" />
@click="pressEnterNameFunction"
/>
<CloseOutlined style="margin-left: 10px; color: red" @click="editNameBlur" />
</span> </span>
</a-col> </a-col>
<a-col :span="7"> <a-col :span="7">
@ -43,14 +40,20 @@
</a-col> </a-col>
<a-col :span="17"> <a-col :span="17">
<span class="infovalue"> <span class="infovalue">
{{ props.nowPreviewRecord.width + '*' + props.nowPreviewRecord.height }} {{ props.nowPreviewRecord.width + ' x ' + props.nowPreviewRecord.height }}
</span> </span>
</a-col> </a-col>
<a-col :span="7"> <a-col :span="7">
<span class="infotitle">照片大小</span> <span class="infotitle">照片大小</span>
</a-col> </a-col>
<a-col :span="17"> <a-col :span="17">
<span class="infovalue">{{ props.nowPreviewRecord.size }} </span> <span class="infovalue">
{{
props.nowPreviewRecord.size
? (props.nowPreviewRecord.size / 1024 / 1024).toFixed(2) + 'M'
: 0
}}
</span>
</a-col> </a-col>
<a-col :span="7"> <a-col :span="7">
<span class="infotitle">拍摄飞机</span> <span class="infotitle">拍摄飞机</span>
@ -74,21 +77,24 @@
<span class="infotitle">拍摄时间</span> <span class="infotitle">拍摄时间</span>
</a-col> </a-col>
<a-col :span="17"> <a-col :span="17">
<span class="infovalue">{{ props.nowPreviewRecord.photographTime }} </span> <span class="infovalue">{{ props.nowPreviewRecord.createTime }} </span>
</a-col> </a-col>
<a-col :span="7"> <a-col :span="7">
<span class="infotitle">标签</span> <span class="infotitle">标签</span>
</a-col> </a-col>
<a-col :span="17"> <a-col :span="17">
<span class="infovalue_graffitiNum"> <span class="infovalue_graffitiNum">
<a-tag color="success" v-for="la in props.nowPreviewRecord.label" :key="la"> <a-tag color="success" v-for="la in props.nowPreviewRecord.fileTags" :key="la">
{{ la }} {{ la }}
</a-tag> </a-tag>
<PlusSquareOutlined style="font-size: 20px; color: #07aaed" @click="addLabelChange" /> <PlusSquareOutlined
style="font-size: 20px; color: #07aaed"
@click="addFileTagsChange"
/>
</span> </span>
<a-modal <a-modal
title="标签设置" title="标签设置"
:open="addLabelFlag" :open="addFileTagsFlag"
:mask="false" :mask="false"
:maskClosable="false" :maskClosable="false"
:closable="false" :closable="false"
@ -97,24 +103,24 @@
<div style="display: block"> <div style="display: block">
<div <div
style="display: flex; flex-wrap: wrap; gap: 5px; width: 96%; margin: 10px" style="display: flex; flex-wrap: wrap; gap: 5px; width: 96%; margin: 10px"
v-if="props.nowPreviewRecord.label.length > 0" v-if="props.nowPreviewRecord.fileTags.length > 0"
> >
已添加的标签： 已添加的标签：
<div <div
v-for="la in props.nowPreviewRecord.label" v-for="la in props.nowPreviewRecord.fileTags"
:key="la" :key="la"
style="border: 1px solid #595959; border-radius: 3px" style="border: 1px solid #595959; border-radius: 3px"
> >
<span style="margin-left: 5px">{{ la }}</span> <span style="margin-left: 5px">{{ la }}</span>
<CloseOutlined <CloseOutlined
style="margin-left: 5px; margin-right: 5px" style="margin-left: 5px; margin-right: 5px"
@click="deleteLabel(la)" @click="deleteFileTags(la)"
/> />
</div> </div>
</div> </div>
<div style="display: inline-flex; gap: 5px; width: 96%; margin: 10px"> <div style="display: inline-flex; gap: 5px; width: 96%; margin: 10px">
<a-input v-model:value="newLabelName" size="small" placeholder="请输入标签" /> <a-input v-model:value="newFileTagsName" size="small" placeholder="请输入标签" />
<a-button type="primary" @click="pressEnterLabelFunction">添加</a-button> <a-button type="primary" @click="pressEnterFileTagsFunction">添加</a-button>
</div> </div>
<div <div
style=" style="
@ -127,8 +133,8 @@
> >
<a-button <a-button
@click=" @click="
addLabelFlag = false; addFileTagsFlag = false;
newLabelName = ''; newFileTagsName = '';
" "
> >
关闭 关闭
@ -155,9 +161,7 @@
<EditOutlined style="color: #ffffff" /> <EditOutlined style="color: #ffffff" />
<span> <span>
{{ {{
props.nowPreviewRecord.graffitiJson props.nowPreviewRecord.graffitiJson ? props.nowPreviewRecord.graffitiJson.length : 0
? JSON.parse(props.nowPreviewRecord.graffitiJson).length
: 0
}} }}
</span> </span>
</div> </div>
@ -186,7 +190,7 @@
<a-col :span="17"> <a-col :span="17">
<span class="infobutton"> <span class="infobutton">
<EnvironmentOutlined <EnvironmentOutlined
v-if="props.nowPreviewRecord.addOrRemoveToMap" v-if="props.nowPreviewRecord.showOnMap == 1"
style="font-size: 20px; color: #07aaed" style="font-size: 20px; color: #07aaed"
@click="flyPoint" @click="flyPoint"
/> />
@ -208,7 +212,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed } from 'vue'; import { ref, watch, computed } from 'vue';
import { import {
EditOutlined, EditOutlined,
PlusSquareOutlined, PlusSquareOutlined,
@ -216,13 +220,18 @@
CheckOutlined, CheckOutlined,
CloseOutlined, CloseOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import { orgPosGroup } from '@/api/demo/system'; import {
UpdatePicStatus,
Deletepic,
UpdatePicName,
UpdatePicParentKey,
} from '@/api/demo/mediaLibrary';
import { Map } from './preview'; import { Map } from './preview';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']); const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
const emit = defineEmits(['chooseNowPreviewRecord', 'reloadTable']); const emits = defineEmits(['chooseNowPreviewRecord', 'handleSuccess']);
// 修改名称-------------------------------- // 修改名称--------------------------------
const editNameFlag = ref(true); const editNameFlag = ref(true);
@ -243,21 +252,14 @@
} }
let query = { let query = {
id: props.nowPreviewRecord.id, id: props.nowPreviewRecord.id,
newName: newName, name: newName,
}; };
props.nowPreviewRecord.name = newName; UpdatePicName(query).then((res) => {
editNameFlag.value = true; props.nowPreviewRecord.name = newName;
emit('reloadTable');
return;
// 调用接口
const data = await orgPosGroup(query);
if (data) {
editNameFlag.value = true; editNameFlag.value = true;
emit('reloadTable'); createMessage.success(res);
return createMessage.success('修改名称成功'); emits('handleSuccess');
} else { });
return createMessage.error('修改名称失败');
}
} }
function editNameBlur() { function editNameBlur() {
editNameFlag.value = true; editNameFlag.value = true;
@ -265,66 +267,68 @@
} }
// 标签-------------------------------- // 标签--------------------------------
const addLabelFlag = ref(false); const addFileTagsFlag = ref(false);
const newLabelName = ref(''); const newFileTagsName = ref('');
function addLabelChange() { const graffitiJson: any = ref([]);
addLabelFlag.value = true; const fileTags: any = ref([]);
watch(
() => props.nowPreviewRecord,
() => {
graffitiJson.value = props.nowPreviewRecord.graffitiJson
? props.nowPreviewRecord.graffitiJson
: [];
fileTags.value = props.nowPreviewRecord.fileTags ? props.nowPreviewRecord.fileTags : [];
},
{
deep: true,
immediate: true,
},
);
function addFileTagsChange() {
addFileTagsFlag.value = true;
} }
// 添加标签方法 // 添加标签方法
async function pressEnterLabelFunction() { async function pressEnterFileTagsFunction() {
if (!newLabelName.value) { if (!newFileTagsName.value) {
return; return;
} }
if (!props.nowPreviewRecord.label.includes(newLabelName.value)) { if (!fileTags.value.includes(newFileTagsName.value)) {
props.nowPreviewRecord.label.push(newLabelName.value); fileTags.value.push(newFileTagsName.value);
let query = { UpdatePicStatus({
id: props.nowPreviewRecord.id, id: props.nowPreviewRecord.id,
newLabel: props.nowPreviewRecord.label, fileTags: JSON.stringify(fileTags.value),
}; graffitiJson: JSON.stringify(graffitiJson.value),
addLabelFlag.value = true; }).then((res) => {
chooseNowPreviewRecord({ addFileTagsFlag.value = true;
...props.nowPreviewRecord, newFileTagsName.value = '';
label: props.nowPreviewRecord.label, emits('handleSuccess');
}); });
emit('reloadTable');
newLabelName.value = '';
return;
// 调用接口
const data = await orgPosGroup(query);
if (data) {
addLabelFlag.value = true;
emit('reloadTable');
return createMessage.success('修改名称成功');
} else {
return createMessage.error('修改名称失败');
}
} else { } else {
return createMessage.error('此标签已存在！'); return createMessage.error('此标签已存在！');
} }
} }
// 删除标签 // 删除标签
function deleteLabel(value) { function deleteFileTags(value) {
createConfirm({ createConfirm({
iconType: 'info', iconType: 'info',
title: '提醒', title: '提醒',
content: '删除标签【' + value + '】，同标签名的涂鸦标记都会被删除！', content: '删除标签【' + value + '】，同标签名的涂鸦标记都会被删除！',
onOk: () => { onOk: () => {
props.nowPreviewRecord.label = props.nowPreviewRecord.label.filter( fileTags.value = fileTags.value.filter((item) => item !== value);
(item) => item !== value, let json = graffitiJson.value;
);
let json = JSON.parse(props.nowPreviewRecord.graffitiJson);
if (json.some((item) => item.text == value)) { if (json.some((item) => item.text == value)) {
json = json.filter((item) => item.text !== value); json = json.filter((item) => item.text !== value);
props.nowPreviewRecord.graffitiJson = JSON.stringify(json); graffitiJson.value = json;
} }
chooseNowPreviewRecord({ UpdatePicStatus({
...props.nowPreviewRecord, id: props.nowPreviewRecord.id,
label: props.nowPreviewRecord.label, fileTags: JSON.stringify(fileTags.value),
graffitiJson: JSON.stringify(json), graffitiJson: JSON.stringify(graffitiJson.value),
}).then((res) => {
emits('handleSuccess');
}); });
emit('reloadTable');
}, },
onCancel: () => {}, onCancel: () => {},
}); });
@ -335,7 +339,7 @@
if (props.nowPreviewRecord.graffitiJson) { if (props.nowPreviewRecord.graffitiJson) {
const map = {}; const map = {};
// 遍历数组，统计每个 text 出现的次数 // 遍历数组，统计每个 text 出现的次数
JSON.parse(props.nowPreviewRecord.graffitiJson).forEach((item) => { props.nowPreviewRecord.graffitiJson.forEach((item) => {
const key = item.text; const key = item.text;
if (map[key]) { if (map[key]) {
map[key].num += 1; map[key].num += 1;
@ -352,7 +356,7 @@
// 选择 // 选择
function chooseNowPreviewRecord(value) { function chooseNowPreviewRecord(value) {
emit('chooseNowPreviewRecord', value); emits('chooseNowPreviewRecord', value);
} }
// 地图-------------------------------- // 地图--------------------------------

204
src/views/demo/workmanagement/flightannotation/index.vue
View File

@ -9,25 +9,15 @@
> >
<PathLeftMenu <PathLeftMenu
ref="pathLeftMenuRef" ref="pathLeftMenuRef"
:pathRecord="props.pathRecord"
:leftMenuShow="leftMenuShow" :leftMenuShow="leftMenuShow"
:allWorkspaceDataList="allWorkspaceDataList"
:allAnnotationDataList="allAnnotationDataList" :allAnnotationDataList="allAnnotationDataList"
:nowShowAnnotationData="nowShowAnnotationData" :nowShowAnnotationData="nowShowAnnotationData"
:allAreaDataList="allAreaDataList"
:nowShowAreaData="nowShowAreaData"
:allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData"
@changeLeftMenuShow="changeLeftMenuShow" @changeLeftMenuShow="changeLeftMenuShow"
@handlerLocation="handlerLocation" @handlerLocation="handlerLocation"
@closePathModal="closePathModal"
@changeAnnotationInfoShow="changeAnnotationInfoShow"
@setNowShowAnnotationData="setNowShowAnnotationData" @setNowShowAnnotationData="setNowShowAnnotationData"
@setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData"
@setAllAnnotationData="setAllAnnotationData" @setAllAnnotationData="setAllAnnotationData"
@setAllAreaData="setAllAreaData"
@deleteAnnotation="deleteAnnotation" @deleteAnnotation="deleteAnnotation"
@deleteArea="deleteArea"
/> />
</div> </div>
<!-- 地图 --> <!-- 地图 -->
@ -36,17 +26,8 @@
ref="pathMapRef" ref="pathMapRef"
:allAnnotationDataList="allAnnotationDataList" :allAnnotationDataList="allAnnotationDataList"
:nowShowAnnotationData="nowShowAnnotationData" :nowShowAnnotationData="nowShowAnnotationData"
:allAreaDataList="allAreaDataList"
:nowShowAreaData="nowShowAreaData"
:allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData"
@setNowShowAnnotationData="setNowShowAnnotationData" @setNowShowAnnotationData="setNowShowAnnotationData"
@setNowShowImageData="setNowShowImageData"
@setNowShowAreaData="setNowShowAreaData"
@setAllAnnotationData="setAllAnnotationData" @setAllAnnotationData="setAllAnnotationData"
@setAllImageData="setAllImageData"
@setAllAreaData="setAllAreaData"
@closePathImageInfo="closePathImageInfo"
/> />
</div> </div>
<!-- 地图标注 --> <!-- 地图标注 -->
@ -60,46 +41,19 @@
@deleteAnnotation="deleteAnnotation" @deleteAnnotation="deleteAnnotation"
/> />
</div> </div>
<!-- 地图作业区域 -->
<!-- <div class="areaInfoDiv" v-if="areaInfoShow">
<PathAreaInfo
:allAreaDataList="allAreaDataList"
:nowShowAreaData="nowShowAreaData"
@setNowShowAreaData="setNowShowAreaData"
@closePathAreaInfo="closePathAreaInfo"
@handlerLocation="handlerLocation"
@deleteArea="deleteArea"
/>
</div> -->
<!-- 地图照片 -->
<!-- <div class="imageInfoDiv" v-if="imageInfoShow">
<PathImageInfo
:allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData"
@setNowShowImageData="setNowShowImageData"
@closePathImageInfo="closePathImageInfo"
@handlerLocation="handlerLocation"
/>
</div> -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { PathLeftMenu, PathMap, PathAnnotationInfo, PathAreaInfo, PathImageInfo } from './path'; import { PathLeftMenu, PathMap, PathAnnotationInfo } from './path';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import imageJson from './json/image.json'; import imageJson from './json/image.json';
import { import { GetWorkspaceList, GetAnnotationList, DeleteAnnotation } from '@/api/demo/mediaLibrary';
GetAnnotationList,
DeleteAnnotation,
GetWorkAreaList,
DeleteWorkArea,
} from '@/api/demo/mediaLibrary';
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const props = defineProps(['pathRecord']); const props = defineProps(['pathRecord']);
const emits = defineEmits(['closePathModal']);
// 地图宽度 // 地图宽度
const dynamicWidth = computed(() => { const dynamicWidth = computed(() => {
let width = 0; let width = 0;
@ -113,14 +67,6 @@
if (annotationInfoShow.value) { if (annotationInfoShow.value) {
width += 320; width += 320;
} }
// // 地图作业区域
// if (areaInfoShow.value) {
// width += 320;
// }
// // 地图照片
// if (imageInfoShow.value) {
// width += 720;
// }
return 'calc(100% - ' + width + 'px)'; return 'calc(100% - ' + width + 'px)';
}); });
@ -136,9 +82,6 @@
// 右侧标注信息是否显示---------------------------------------------------- // 右侧标注信息是否显示----------------------------------------------------
const annotationInfoShow = ref(false); const annotationInfoShow = ref(false);
function changeAnnotationInfoShow() {
annotationInfoShow.value = !annotationInfoShow.value;
}
// 关闭右侧标注 // 关闭右侧标注
function closePathAnnotationInfo() { function closePathAnnotationInfo() {
annotationInfoShow.value = false; annotationInfoShow.value = false;
@ -148,6 +91,7 @@
// 当前展示的标注信息 // 当前展示的标注信息
const nowShowAnnotationData = ref(); const nowShowAnnotationData = ref();
const allAnnotationDataList: any = ref([]); const allAnnotationDataList: any = ref([]);
const allWorkspaceDataList: any = ref([]);
// 设置当前展示的标注信息 // 设置当前展示的标注信息
function setNowShowAnnotationData(value, restore = true) { function setNowShowAnnotationData(value, restore = true) {
if (value.id) { if (value.id) {
@ -166,25 +110,30 @@
getAnnotationList(); getAnnotationList();
} }
// 查询地图标注 // 查询地图标注
async function getAnnotationList(showThis = true) { function getAnnotationList(showThis = true) {
allAnnotationDataList.value = await GetAnnotationList({ workspaceid: 1 }); GetWorkspaceList().then((result1) => {
if (allAnnotationDataList.value.length > 0) { GetAnnotationList({}).then((result2) => {
allAnnotationDataList.value.forEach((annotation, index) => { allWorkspaceDataList.value = result1;
let geomjson = WktToGeojson(annotation.geom); allAnnotationDataList.value = result2;
annotation = { if (allAnnotationDataList.value.length > 0) {
...annotation, allAnnotationDataList.value.forEach((annotation, index) => {
properties: JSON.parse(annotation.properties), let geomjson = WktToGeojson(annotation.geom);
geomtype: getGeomType(annotation), annotation = {
coordinates: geomjson.coordinates, ...annotation,
}; properties: JSON.parse(annotation.properties),
allAnnotationDataList.value[index] = annotation; geomtype: getGeomType(annotation),
coordinates: geomjson.coordinates,
};
allAnnotationDataList.value[index] = annotation;
});
}
if (showThis) {
setTimeout(() => {
pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
}, 50);
}
}); });
} });
if (showThis) {
setTimeout(() => {
pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
}, 50);
}
} }
// 删除标注 // 删除标注
@ -204,103 +153,6 @@
}); });
} }
// 右侧区域信息是否显示----------------------------------------------------
const areaInfoShow = ref(false);
function changeAreaInfoShow() {
areaInfoShow.value = !areaInfoShow.value;
}
// 关闭右侧标注
function closePathAreaInfo() {
areaInfoShow.value = false;
nowShowAreaData.value = {};
pathMapRef.value.areaRestoreDefault();
}
// 当前展示的区域信息
const nowShowAreaData = ref();
const allAreaDataList: any = ref([]);
// 设置当前展示的区域信息
function setNowShowAreaData(value, restore = true) {
if (value.id) {
areaInfoShow.value = true;
} else {
areaInfoShow.value = false;
}
if (restore) {
pathMapRef.value.areaRestoreDefault();
}
nowShowAreaData.value = value;
}
// 刷新区域信息
function setAllAreaData() {
// 查询地图工作区域
getWorkAreaList();
}
// 查询地图工作区域
async function getWorkAreaList(showThis = true) {
allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
if (allAreaDataList.value.length > 0) {
allAreaDataList.value.forEach((area, index) => {
let geomjson = WktToGeojson(area.geom);
area = {
...area,
properties: JSON.parse(area.properties),
geomtype: getGeomType(area),
coordinates: geomjson.coordinates,
};
allAreaDataList.value[index] = area;
});
}
if (showThis) {
setTimeout(() => {
pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
}, 50);
}
}
// 删除区域
async function deleteArea(value) {
if (nowShowAreaData.value && nowShowAreaData.value.id == value.id) {
areaInfoShow.value = false;
nowShowAreaData.value = {};
}
DeleteWorkArea({
id: value.id,
}).then((result) => {
if (result) {
// 刷新
getWorkAreaList();
createMessage.success('删除成功');
}
});
}
// 右侧图片是否显示----------------------------------------------------
const imageInfoShow = ref(false);
// 关闭右侧图片
function closePathImageInfo() {
imageInfoShow.value = false;
}
// 当前展示的图片
const nowShowImageData = ref();
const allImageDataList = ref(imageJson);
// 设置当前展示的图片
function setNowShowImageData(value) {
if (value.id) {
imageInfoShow.value = true;
} else {
imageInfoShow.value = false;
}
nowShowImageData.value = value;
pathMapRef.value.setNowShowImageByRight();
}
// 其他方法-----------------------------------------------------------------
// 关闭弹窗
function closePathModal() {
emits('closePathModal');
}
// 移动位置 // 移动位置
function handlerLocation(position) { function handlerLocation(position) {
pathMapRef.value.handlerLocation([position.lng, position.lat]); pathMapRef.value.handlerLocation([position.lng, position.lat]);
@ -329,8 +181,6 @@
} }
onMounted(() => { onMounted(() => {
// 查询地图工作区域
getWorkAreaList(false);
getAnnotationList(); getAnnotationList();
}); });
</script> </script>

1536
src/views/demo/workmanagement/flightannotation/json/image.json
View File

File diff suppressed because it is too large Load Diff

2
src/views/demo/workmanagement/flightannotation/path.ts
View File

@ -1,5 +1,3 @@
export { default as PathLeftMenu } from './pathLeftMenu.vue'; export { default as PathLeftMenu } from './pathLeftMenu.vue';
export { default as PathMap } from './pathMap.vue'; export { default as PathMap } from './pathMap.vue';
export { default as PathImageInfo } from './pathImageInfo.vue';
export { default as PathAnnotationInfo } from './pathAnnotationInfo.vue'; export { default as PathAnnotationInfo } from './pathAnnotationInfo.vue';
export { default as PathAreaInfo } from './pathAreaInfo.vue';

373
src/views/demo/workmanagement/flightannotation/pathAreaInfo.vue
View File

@ -1,373 +0,0 @@
<template>
<div class="areaInfo">
<a-row>
<a-col :span="24">
<div class="annotationTitle"> 自定义飞行区 </div>
</a-col>
<a-col :span="24">
<div class="annotationTitle">
<!-- 自定义禁降区 -->
<div
v-if="props.nowShowAreaData.type == 'noland'"
:style="{
width: '15px',
height: '15px',
outline: `2px solid #FF9900`,
'margin-left': '2px',
'margin-right': '12px',
}"
/>
<!-- 自定义作业区 -->
<div
v-if="props.nowShowAreaData.type == 'dfence'"
:style="{
width: '13px',
height: '13px',
outline: `2px solid #00FF00`,
'margin-left': '2px',
'margin-right': '12px',
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<!-- 自定义限飞区 -->
<div
v-if="props.nowShowAreaData.type == 'nfz'"
:style="{
width: '13px',
height: '13px',
outline: `2px solid #FF0000`,
background: `#FF000055`,
'margin-left': '2px',
'margin-right': '12px',
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
<div class="annotationTitleButton" @click="handlerLocation">
<AimOutlined />
</div>
<div class="annotationTitleButton" @click="deleteArea">
<DeleteOutlined />
</div>
</div>
</a-col>
<a-col :span="24">
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'noland'">
自定义作业区绘制后，飞行器只能在该区域内飞行
</div>
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'dfence'">
自定义禁降区绘制后，飞行器不能在绘制区域内自动降落
</div>
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'nfz'">
自定义作业区绘制后，飞行器只能在该区域内飞行
</div>
</a-col>
<a-col :span="24">
<div class="annotationTitle"> 更多信息 </div>
</a-col>
<!-- 启用状态 -->
<a-col :span="6">
<div class="annotationTitle">启用状态</div>
</a-col>
<a-col :span="18">
<div class="annotationContent">
{{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
</div>
</a-col>
<!-- 水平周长 -->
<a-col :span="6">
<div class="annotationTitle">水平周长</div>
</a-col>
<a-col :span="18">
<div class="annotationContent"> {{ length.toFixed(2) }}m</div>
</a-col>
<!-- 水平面积 -->
<a-col :span="6">
<div class="annotationTitle">水平面积</div>
</a-col>
<a-col :span="18">
<div class="annotationContent"> {{ area.toFixed(2) }}㎡</div>
</a-col>
<!-- 半径 -->
<a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
<div class="annotationTitle">半径</div>
</a-col>
<a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
<div class="annotationContent">
<a-input v-model:value="nowAreaData.properties.radius" style="width: 100%" size="small">
<template #addonAfter> <span style="color: white">m</span> </template>
</a-input>
</div>
</a-col>
<!-- 绘制者 -->
<a-col :span="6">
<div class="annotationTitle">绘制者</div>
</a-col>
<a-col :span="18">
<div class="annotationContent"> {{ props.nowShowAreaData.createdUser }}</div>
</a-col>
<a-col :span="24">
<div class="area_buttons">
<div class="cancelDiv" @click="closePathAreaInfo">取消</div>
<div class="startDiv" :class="{ disabled: props.nowShowAreaData }">确认</div>
</div>
</a-col>
</a-row>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import * as mars3d from 'mars3d';
import * as Cesium from 'mars3d-cesium';
import {
CloseOutlined,
DeleteOutlined,
CheckOutlined,
AimOutlined,
AlignLeftOutlined,
InfoCircleOutlined,
AntDesignOutlined,
ExpandAltOutlined,
BorderOutlined,
LogoutOutlined,
MinusOutlined,
PlusOutlined,
} from '@ant-design/icons-vue';
import {
GetWorkAreaList,
AddWorkArea,
UpdateWorkArea,
DeleteWorkArea,
} from '@/api/demo/mediaLibrary';
import { cloneDeep } from 'lodash-es';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
const emits = defineEmits([
'setNowShowAreaData',
'closePathAreaInfo',
'handlerLocation',
'deleteArea',
]);
const nowAreaData: any = ref(props.nowShowAreaData);
// 关闭
function closePathAreaInfo() {
emits('closePathAreaInfo');
}
// 移动到中心位置
function handlerLocation() {
emits('handlerLocation', {
lng: props.nowShowAreaData.properties.centerPoint[0],
lat: props.nowShowAreaData.properties.centerPoint[1],
});
}
// 删除此区域
function deleteArea() {
createConfirm({
iconType: 'info',
title: '提示',
content: '将会影响到项目内设备的作业范围，是否删除该区域？',
onOk: async () => {
emits('deleteArea', props.nowShowAreaData);
},
});
}
// 水平周长和水平面积
const length: any = ref();
const area: any = ref();
watch(
() => nowAreaData.value,
() => {
emits('setNowShowAreaData', nowAreaData.value, false);
},
{
deep: true,
},
);
watch(
() => props.nowShowAreaData,
() => {
nowAreaData.value = props.nowShowAreaData;
if (props.nowShowAreaData.geomtype == 'Polygon') {
// 水平距离
length.value = mars3d.MeasureUtil.getDistance(nowAreaData.value.coordinates[0]);
// 水平面积
area.value = mars3d.MeasureUtil.getArea(nowAreaData.value.coordinates[0]);
}
if (props.nowShowAreaData.geomtype == 'Circle') {
// 水平距离
length.value = 2 * Math.PI * parseFloat(nowAreaData.value.properties.radius);
// 水平面积
area.value =
Math.PI *
parseFloat(nowAreaData.value.properties.radius) *
parseFloat(nowAreaData.value.properties.radius);
}
},
{
deep: true,
immediate: true,
},
);
</script>
<style lang="less" scoped>
.areaInfo {
// 页面不能被选中
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
position: relative;
width: 100%;
height: 100%;
background: #232323;
padding: 15px;
}
.annotationTitle {
display: flex;
align-items: center;
justify-content: flex-start;
color: #ffffff;
font-size: 14px;
min-height: 45px;
height: auto;
width: 100%;
flex-wrap: wrap;
.annotationTitleButton_right {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 18px;
}
.annotationTitleButton {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 12px;
font-size: 18px;
}
}
.annotationContent {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 45px;
height: auto;
width: 100%;
flex-wrap: wrap;
color: #ffffff;
}
.annotationButton {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 45px;
height: auto;
width: 100%;
flex-wrap: wrap;
}
.annotationPrompt {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 45px;
height: auto;
width: 100%;
flex-wrap: wrap;
color: #ffffff55;
}
.button {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
background: #3c3c3c;
border-radius: 2px;
&:hover {
background: #5d5f61;
}
}
.button.disabled {
cursor: not-allowed;
opacity: 0.5;
background-color: #ccc;
}
.numDiv {
width: calc(80% - 70px);
display: flex;
align-items: center;
justify-content: center;
.numSpan {
color: #2d8cf0;
font-size: 26px;
font-weight: bold;
&:hover {
text-decoration: underline;
text-decoration-color: #2d8cf0;
}
}
}
// 取消和开始检测按钮
.area_buttons {
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #ffffff55;
width: 100%;
height: 68px;
gap: 20px;
.cancelDiv {
display: flex;
align-items: center;
justify-content: center;
background: #3c3c3c;
color: #ffffff;
width: 40%;
height: 32px;
border-radius: 5px;
&:hover {
background: #5d5f61;
}
}
.startDiv {
display: flex;
align-items: center;
justify-content: center;
background: #0960bd;
color: #ffffff;
width: 40%;
height: 32px;
border-radius: 5px;
&:hover {
background: #2a7dc9;
}
}
}
</style>

1417
src/views/demo/workmanagement/flightannotation/pathImageInfo.vue
View File

File diff suppressed because it is too large Load Diff

435
src/views/demo/workmanagement/flightannotation/pathLeftMenu.vue
View File

@ -1,93 +1,11 @@
<template> <template>
<div class="leftMenu"> <div class="leftMenu">
<div class="leftMenuContent"> <div class="leftMenuContent">
<!-- <div class="leftMenuContent_1">
<div class="leftMenu_closeButton">
<a-tooltip placement="right">
<template #title> 关闭弹窗 </template>
<CloseOutlined
style="font-size: 24px; margin: 8px; color: white"
@click="closePathModal"
/>
</a-tooltip>
</div>
<div class="leftMenu_buttonList">
<div
class="leftMenu_buttonList_annotation"
:style="{
background: showMenuInfoName == '地图标注' ? '#2D8CF0' : '#1a375a',
}"
@click="
showMenuInfoName = '地图标注';
updateShowMenuInfoList(showMenuInfoName);
showMenuInfoList = filterAfterAnnotationDataList;
"
>
<a-tooltip placement="right">
<template #title> 地图标注 </template>
<AntDesignOutlined style="font-size: 24px; margin: 8px; color: white" />
</a-tooltip>
</div>
<div
class="leftMenu_buttonList_image"
:style="{
background: showMenuInfoName == '地图照片' ? '#2D8CF0' : '#1a375a',
}"
@click="
showMenuInfoName = '地图照片';
updateShowMenuInfoList(showMenuInfoName);
"
>
<a-tooltip placement="right">
<template #title> 地图照片 </template>
<EnvironmentOutlined style="font-size: 24px; margin: 8px; color: white" />
</a-tooltip>
</div>
<div
class="leftMenu_buttonList_area"
:style="{
background: showMenuInfoName == '地图作业区域' ? '#2D8CF0' : '#1a375a',
}"
@click="
showMenuInfoName = '地图作业区域';
updateShowMenuInfoList(showMenuInfoName);
showMenuInfoList = filterAfterAreaDataList;
"
>
<a-tooltip placement="right">
<template #title> 地图作业区域 </template>
<CodeSandboxOutlined style="font-size: 24px; margin: 8px; color: white" />
</a-tooltip>
</div>
</div>
</div> -->
<div class="leftMenuContent_2" v-if="leftMenuShow"> <div class="leftMenuContent_2" v-if="leftMenuShow">
<div class="leftMenuContent_title"> <div class="leftMenuContent_title">
{{ showMenuInfoName }} {{ showMenuInfoName }}
</div> </div>
<div class="leftMenuContent_list"> <div class="leftMenuContent_list">
<!-- 地图作业区域 -->
<!-- <div v-if="showMenuInfoName == '地图作业区域'" style="margin: 10px">
<a-select
v-model:value="areatype"
style="width: 120px; margin-right: 15px"
@change="handleChangeAreaSelect"
>
<a-select-option value="all">全部类型</a-select-option>
<a-select-option value="dfence">全部作业区</a-select-option>
<a-select-option value="nfz">全部限飞区</a-select-option>
<a-select-option value="noland">全部禁降区</a-select-option>
</a-select>
<a-select
v-model:value="areastate"
style="width: 120px"
@change="handleChangeAreaSelect"
>
<a-select-option value="all">全部状态</a-select-option>
<a-select-option value="0">已启用</a-select-option>
<a-select-option value="1">已禁用</a-select-option>
</a-select>
</div> -->
<!-- 列表 --> <!-- 列表 -->
<div v-for="show in showMenuInfoList" :key="show.id"> <div v-for="show in showMenuInfoList" :key="show.id">
<!-- 地图标注 --> <!-- 地图标注 -->
@ -154,217 +72,6 @@
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
<!-- 地图照片 -->
<!-- <div
class="showMenuInfo_image"
v-if="showMenuInfoName == '地图照片'"
:style="{
background:
props.nowShowImageData && props.nowShowImageData.id == show.id
? '#274D75'
: show.mouse
? '#393939'
: '',
}"
>
<FileImageOutlined />
<div
class="eye"
@click="show.is_displayed = !show.is_displayed"
:style="{ background: show.is_displayed ? '#2d8cf0' : '#000000' }"
>
<EyeOutlined v-if="show.is_displayed" style="color: #ffffff; font-size: 16px" />
<EyeInvisibleOutlined
v-if="!show.is_displayed"
style="color: #ffffff; font-size: 16px"
/>
</div>
<a-tooltip placement="top">
<template #title>
<span> {{ show.name }}</span>
</template>
<div
:style="{
width: show.mouse ? '160px' : '210px',
'white-space': 'nowrap',
overflow: 'hidden',
'text-overflow': 'ellipsis',
}"
@click="setNowShowImageData(show)"
>
{{ show.name }}
</div>
</a-tooltip>
<div class="buttonRight2" v-if="show.mouse">
<a-tooltip placement="top">
<template #title>
<span>回中</span>
</template>
<AimOutlined @click="handlerLocation(show)" />
</a-tooltip>
</div>
<div class="buttonRight1" v-if="show.mouse">
<a-tooltip placement="top">
<template #title>
<span>
{{ show.show_on_map ? '在地图上取消加载' : '在地图上加载' }}
</span>
</template>
<div style="display: flex; align-items: center">
<svg
v-if="show.show_on_map"
@click="funAddOrRemoveToMap(show)"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="18"
height="18"
>
<path
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
fill="#ffffff"
></path>
</svg>
<svg
v-if="!show.show_on_map"
@click="funAddOrRemoveToMap(show)"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="18"
height="18"
>
<path
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
fill="#ffffff"
></path>
</svg>
</div>
</a-tooltip>
</div>
</div> -->
<!-- 地图作业区域 -->
<!-- <div
v-if="showMenuInfoName == '地图作业区域'"
class="showMenuInfo_area"
:style="{
outline:
props.nowShowAreaData && props.nowShowAreaData.id == show.id
? '2px solid #2D8CF0'
: '',
background: props.nowShowAreaData && show.state == 0 ? '#3c3c3c' : '#3c3c3c55',
}"
>
<a-tooltip placement="right">
<template #title> {{ show.name }} </template>
<div
class="name"
@click="setNowShowAreaData(show)"
:style="{
color: show.state == 0 ? '#ffffff' : '#ffffff55',
}"
>
{{ show.name }}
</div>
</a-tooltip>
<div
class="type"
@click="setNowShowAreaData(show)"
:style="{
color: show.state == 0 ? '#ffffff' : '#ffffff55',
}"
>
<div
v-if="show.type == 'noland'"
:style="{
width: '13px',
height: '13px',
outline: `2px solid #FF9900`,
'margin-right': '6px',
}"
/>
<div
v-if="show.type == 'dfence'"
:style="{
width: '13px',
height: '13px',
outline: `2px solid #00FF00`,
'margin-right': '6px',
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<div
v-if="show.type == 'nfz'"
:style="{
width: '13px',
height: '13px',
outline: `2px solid #FF0000`,
background: `#FF000055`,
'margin-right': '6px',
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
}"
/>
<span>{{ getType(show.type) }}</span>
</div>
<div class="buttonlist">
<div class="button" v-if="show.state == 1">
<a-popconfirm
title="将会影响到项目内设备的作业范围，是否启用该区域？"
ok-text="启用"
cancel-text="取消"
placement="right"
@confirm="enableThisArea(show)"
>
<a-tooltip placement="top">
<template #title>
<span>可点击启用该区域</span>
</template>
<CheckCircleOutlined />
</a-tooltip>
</a-popconfirm>
</div>
<div class="button" v-if="show.state == 0">
<a-popconfirm
title="将会影响到项目内设备的作业范围，是否禁用该区域？"
ok-text="禁用"
cancel-text="取消"
placement="right"
@confirm="disableThisArea(show)"
>
<a-tooltip placement="top">
<template #title>
<span>可点击禁用该区域</span>
</template>
<StopOutlined />
</a-tooltip>
</a-popconfirm>
</div>
<div class="button">
<a-tooltip placement="top">
<template #title>
<span>回中</span>
</template>
<AimOutlined @click="handlerLocation(show)" />
</a-tooltip>
</div>
<div class="button">
<a-popconfirm
title="将会影响到项目内设备的作业范围，是否删除该区域？"
ok-text="删除"
cancel-text="取消"
placement="right"
@confirm="deleteArea(show)"
>
<a-tooltip placement="top">
<template #title>
<span>删除</span>
</template>
<DeleteOutlined />
</a-tooltip>
</a-popconfirm>
</div>
</div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -379,12 +86,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { import {
CloseOutlined,
AntDesignOutlined, AntDesignOutlined,
DoubleLeftOutlined, DoubleLeftOutlined,
DoubleRightOutlined, DoubleRightOutlined,
EnvironmentOutlined,
CodeSandboxOutlined,
ExpandAltOutlined, ExpandAltOutlined,
BorderOutlined, BorderOutlined,
LogoutOutlined, LogoutOutlined,
@ -392,9 +96,6 @@
EyeInvisibleOutlined, EyeInvisibleOutlined,
AimOutlined, AimOutlined,
DeleteOutlined, DeleteOutlined,
FileImageOutlined,
CheckCircleOutlined,
StopOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import { UpdateWorkArea, UpdateAnnotation } from '@/api/demo/mediaLibrary'; import { UpdateWorkArea, UpdateAnnotation } from '@/api/demo/mediaLibrary';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@ -402,27 +103,17 @@
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
const props = defineProps([ const props = defineProps([
'pathRecord',
'leftMenuShow', 'leftMenuShow',
'allWorkspaceList',
'allAnnotationDataList', 'allAnnotationDataList',
'nowShowAnnotationData', 'nowShowAnnotationData',
'allImageDataList',
'nowShowImageData',
'allAreaDataList',
'nowShowAreaData',
]); ]);
const emits = defineEmits([ const emits = defineEmits([
'changeLeftMenuShow', 'changeLeftMenuShow',
'handlerLocation', 'handlerLocation',
'closePathModal',
'changeAnnotationInfoShow',
'setNowShowAnnotationData', 'setNowShowAnnotationData',
'setNowShowImageData',
'setNowShowAreaData',
'setAllAreaData',
'setAllAnnotationData', 'setAllAnnotationData',
'deleteAnnotation', 'deleteAnnotation',
'deleteArea',
]); ]);
const showMenuInfoList = ref(props.allAnnotationDataList); const showMenuInfoList = ref(props.allAnnotationDataList);
const showMenuInfoName = ref('地图标注'); const showMenuInfoName = ref('地图标注');
@ -430,22 +121,13 @@
if (type == '地图标注') { if (type == '地图标注') {
handleChangeAnnotationSearch(); handleChangeAnnotationSearch();
} }
if (type == '地图照片') {
showMenuInfoList.value = props.allImageDataList;
}
if (type == '地图作业区域') {
handleChangeAreaSelect();
}
} }
// 目录-隐藏或者显示 // 目录-隐藏或者显示
function changeLeftMenuShow() { function changeLeftMenuShow() {
emits('changeLeftMenuShow'); emits('changeLeftMenuShow');
} }
// 弹窗-关闭弹窗
function closePathModal() {
emits('closePathModal');
}
// 地图图片-加载到地图上 // 地图图片-加载到地图上
function funAddOrRemoveToMap(show) { function funAddOrRemoveToMap(show) {
show.show_on_map = !show.show_on_map; show.show_on_map = !show.show_on_map;
@ -503,125 +185,14 @@
}); });
} }
// 地图作业区域-------------------------------------------------
// 地图作业区域-单选
const areatype = ref('all');
const areastate = ref('all');
// 地图作业区域-获取类别区分
function getType(type) {
let name = '';
switch (type) {
case 'nfz':
name = '自定义限飞区';
break;
case 'dfence':
name = '自定义作业区';
break;
case 'noland':
name = '自定义禁降区';
break;
}
return name;
}
// 地图作业区域-下拉框
const filterAfterAreaDataList = ref(props.allAreaDataList);
function handleChangeAreaSelect() {
let filterAreaData = props.allAreaDataList;
if (areatype.value !== 'all') {
filterAreaData = filterAreaData.filter((item) => item.type == areatype.value);
}
if (areastate.value !== 'all') {
filterAreaData = filterAreaData.filter((item) => item.state == areastate.value);
}
filterAfterAreaDataList.value = filterAreaData;
showMenuInfoList.value = filterAfterAreaDataList.value;
}
// 地图作业区域-启用该区域
function enableThisArea(value) {
setNowShowAreaData({
...value,
state: 0,
});
UpdateWorkArea({
...value,
properties: JSON.stringify(value.properties),
state: 0,
}).then((res) => {
emits('setAllAreaData');
});
}
// 地图作业区域-禁用该区域
function disableThisArea(value) {
setNowShowAreaData({
...value,
state: 1,
});
UpdateWorkArea({
...value,
properties: JSON.stringify(value.properties),
state: 1,
}).then((res) => {
emits('setAllAreaData');
});
}
// 地图作业区域-删除此区域
function deleteArea(show) {
emits('deleteArea', show);
}
// 设定当前标记 // 设定当前标记
function setNowShowAnnotationData(value) { function setNowShowAnnotationData(value) {
emits('setNowShowAnnotationData', value); emits('setNowShowAnnotationData', value);
} }
// 设定当前图片
function setNowShowImageData(value) {
emits('setNowShowImageData', value);
}
// 设定当前区域
function setNowShowAreaData(value) {
emits('setNowShowAreaData', value);
}
// ------------------------------------------------------------------
// 移动到中心位置 // 移动到中心位置
function handlerLocation(position) { function handlerLocation(position) {
// if (showMenuInfoName.value == '地图标注') { if (showMenuInfoName.value == '地图标注') {
// let coordinates = position.coordinates;
// switch (position.type) {
// case 0:
// emits('handlerLocation', {
// lng: coordinates[0],
// lat: coordinates[1],
// });
// break;
// case 1:
// emits('handlerLocation', {
// lng: coordinates[0][0],
// lat: coordinates[0][1],
// });
// break;
// case 2:
// emits('handlerLocation', {
// lng: coordinates[0][0][0],
// lat: coordinates[0][0][1],
// });
// break;
// case 3:
// emits('handlerLocation', {
// lng: coordinates[0],
// lat: coordinates[1],
// });
// break;
// }
// }
// if (showMenuInfoName.value == '地图照片') {
// emits('handlerLocation', {
// lng: position.photo_position.lng,
// lat: position.photo_position.lat,
// });
// }
if (showMenuInfoName.value == '地图作业区域') {
if (position.geomtype == 'Circle') { if (position.geomtype == 'Circle') {
emits('handlerLocation', { emits('handlerLocation', {
lng: position.properties.centerPoint[0], lng: position.properties.centerPoint[0],

1319
src/views/demo/workmanagement/flightannotation/pathMap.vue
View File

File diff suppressed because it is too large Load Diff