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

Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai

Browse Source
main
徐景良 2 months ago
parent 2a01d3cf5f b8477a2679
commit b220cc3f21
25 changed files with 727 additions and 1636 deletions
Show Stats Download Patch File Download Diff File

15
plugin/package.json
Unescape Escape View File

@ -2,11 +2,22 @@
"name": "@it/docklivestreamplugin",
"version": "1.0.0",
"description": "该插件js插件包。功能包含SDK初始化、设置视频直播画面控件、发起和结束直播、拍照、视频录制、资源释放。",
"main": "index.js",
"main": "@it/docklivestreamplugin.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
"license": "ISC",
"dependencies": {
"@vitejs/plugin-vue": "^6.0.0",
"ant-design-vue": "^4.0.0-rc.6",
"axios": "^1.10.0",
"lodash-es": "^4.17.21",
"mqtt": "^5.13.3",
"path": "^0.12.7",
"qs": "^6.14.0",
"tcplayer.js": "^5.3.4",
"vue": "^3.5.17"
}
}

11
src/api/demo/provincetasks.ts
Unescape Escape View File

@ -0,0 +1,11 @@
import { defHttp } from '@/utils/http/axios';
enum Api {
GetDataList = '/api/DroneDock/GetDroneDockInfos',
}
export function GetDataList(params) {
return defHttp.get({
url: Api.GetDataList,
params
});
}

14
src/api/workmanagement/droneDock.ts
Unescape Escape View File

@ -3,6 +3,8 @@ import { defHttp } from '@/utils/http/axios';
enum Api {
VerifyToken = '/api/DroneDock/VerifyToken',
GetDroneDockflightInfos = '/api/DroneDock/GetDroneDockflightInfos',
GetTaskPicList = '/api/Manage/GetTaskPicList',
GetTaskVideoList = '/api/Manage/GetTaskVideoList',
}
export function getVerifyToken(token) {
@ -12,3 +14,15 @@ export function getVerifyToken(token) {
export function getDroneDockflightInfos(id) {
return defHttp.get({ url: Api.GetDroneDockflightInfos + '?taskid=' + id });
}
export function getTaskPicList(params) {
return defHttp.get({
url: Api.GetTaskPicList + '?flightId=' + params.flightId + '&timestamp=' + params.timestamp,
});
}
export function getTaskVideoList(params) {
return defHttp.get({
url: Api.GetTaskVideoList + '?flightId=' + params.flightId + '&timestamp=' + params.timestamp,
});
}

170
src/plugin/video/index.ts
Unescape Escape View File

@ -1,13 +1,22 @@
import { createConnection, client, servicesTopic, destroyConnection } from './src/mqtt';
import { airport, uav, liveInfo, buildGUID } from './src/config';
import { airport, uav, liveInfo, buildGUID, base64ByURL } from './src/config';
import { GetUavPageByDocksn } from '@/api/demo/projecthome';
import { getVerifyToken, getDroneDockflightInfos } from '@/api/workmanagement/droneDock';
import {
getVerifyToken,
getDroneDockflightInfos,
getTaskPicList,
getTaskVideoList,
} from '@/api/workmanagement/droneDock';
import TCPlayer from 'tcplayer.js';
import { useMessage } from '@/hooks/web/useMessage';
import { errorName } from '@/utils/debugging/remote';
const { createMessage } = useMessage();
const bid = buildGUID();
let video_id;
let sn;
let live_url;
let video_time;
class LiveStreamPlugin {
constructor() {
@ -52,13 +61,11 @@ class LiveStreamPlugin {
console.log('LiveStreamPlugin startLiveStreamCall', serialNum, deviceType);
sn = serialNum;
createConnection('mqtt_' + serialNum);
video_id =
deviceType == 1
? serialNum + '/' + airport.camera_index + '/' + airport.video_index
: serialNum + '/' + uav.camera_index + '/' + uav.video_index;
// const liveUrl = liveInfo.rtmp + serialNum;
let querys;
if (deviceType == 1) {
video_id = serialNum + '/' + airport.camera_index + '/' + airport.video_index;
querys = {
bid: bid,
method: 'live_start_push',
@ -82,6 +89,7 @@ class LiveStreamPlugin {
await GetUavPageByDocksn(params).then((res) => {
console.log('GetUavPageByDocksn', res);
if (res.items.length > 0) {
video_id = res.items[0].sn + '/' + uav.camera_index + '/' + uav.video_index;
querys = {
bid: bid,
method: 'live_start_push',
@ -106,8 +114,28 @@ class LiveStreamPlugin {
client.on('message', (topic, message) => {
const rs = JSON.parse(message);
if (rs.bid == bid) {
console.log(rs);
console.log('LiveStreamPlugin liveStartPush', rs);
if (rs.method == 'camera_recording_start') {
if (rs.data.result == 0) {
createMessage.success('开始录像成功');
} else {
createMessage.error('开始录像失败，' + errorName(rs.data.result));
}
}
if (rs.method == 'live_start_push') {
if (rs.data.result == 0) {
createMessage.success('发起视频直播成功');
} else {
createMessage.error('发起视频直播失败，' + errorName(rs.data.result));
}
}
if (rs.method == 'live_stop_push') {
if (rs.data.result == 0) {
createMessage.success('结束视频直播成功');
} else {
createMessage.error('结束视频直播失败，' + errorName(rs.data.result));
}
}
}
});
}
@ -138,19 +166,70 @@ class LiveStreamPlugin {
* zpkzxx：照片扩展信息
*/
console.log('LiveStreamPlugin takePicture', callback);
const querys = {
servicesTopic(sn, {
bid: bid,
method: 'camera_photo_take',
method: 'camera_mode_switch',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {
camera_mode: 0,
payload_index: uav.camera_index,
},
};
console.log(querys);
servicesTopic(sn, querys);
const data = {};
callback(data);
});
const time = new Date().getTime();
setTimeout(() => {
const querys = {
bid: bid,
method: 'camera_photo_take',
tid: buildGUID(),
timestamp: time,
data: {
payload_index: uav.camera_index,
},
};
console.log(querys);
servicesTopic(sn, querys);
client.subscribe('thing/product/' + sn + '/events', { qos: 2 }, () => {});
}, 1000);
// 接收消息
let id = '';
return new Promise((resolve, reject) => {
client.on('message', async (topic, message) => {
const rs = JSON.parse(message);
if (rs.method == 'camera_photo_take') {
if (rs.data.result == 0) {
createMessage.success('拍照成功');
} else {
createMessage.error('拍照失败，' + errorName(rs.data.result));
}
}
if (
rs.method == 'flighttask_progress' &&
rs.data.output.status == 'in_progress' &&
id == ''
) {
id = rs.data.output.ext.flight_id;
createMessage.info('正在获取数据，预计需要一分钟，请稍后');
setTimeout(() => {
getTaskPicList({
flightId: id,
timestamp: time,
}).then(async (res) => {
if (res) {
await base64ByURL(res.pictureLink).then((urlres) => {
let { blob } = urlres;
res.imgBlob = blob;
});
createMessage.success('获取数据成功');
} else {
createMessage.error('获取数据失败，请稍后重试');
}
resolve(callback(res));
});
}, 50000);
}
});
});
}
startVideoRecording() {
/**
@ -168,13 +247,26 @@ class LiveStreamPlugin {
});
servicesTopic(sn, {
bid: bid,
method: 'camera_recording_start',
method: 'camera_mode_switch',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {
camera_mode: 1,
payload_index: uav.camera_index,
},
});
setTimeout(() => {
video_time = new Date().getTime();
servicesTopic(sn, {
bid: bid,
method: 'camera_recording_start',
tid: buildGUID(),
timestamp: video_time,
data: {
payload_index: uav.camera_index,
},
});
}, 1000);
}
endVideoRecording(callback: Function) {
/**
@ -184,17 +276,59 @@ class LiveStreamPlugin {
* true/false；
*/
console.log('LiveStreamPlugin endVideoRecording', callback);
const time = new Date().getTime();
servicesTopic(sn, {
bid: bid,
method: 'camera_recording_stop',
tid: buildGUID(),
timestamp: new Date().getTime(),
timestamp: time,
data: {
payload_index: uav.camera_index,
},
});
const data = {};
callback(data);
client.subscribe('thing/product/' + sn + '/events', { qos: 2 }, () => {});
// 接收消息
let id = '';
return new Promise((resolve, reject) => {
client.on('message', async (topic, message) => {
const rs = JSON.parse(message);
if (rs.method == 'camera_recording_stop') {
if (rs.data.result == 0) {
createMessage.success('结束录像成功');
} else {
createMessage.error('结束录像失败，' + errorName(rs.data.result));
}
}
if (
rs.method == 'flighttask_progress' &&
rs.data.output.status == 'in_progress' &&
id == ''
) {
id = rs.data.output.ext.flight_id;
createMessage.info('正在获取数据,预计需要五分钟，请稍后');
setTimeout(() => {
getTaskVideoList({
flightId: id,
timestamp: video_time,
}).then(async (res) => {
if (res) {
await base64ByURL(res.videoLink).then((urlres) => {
let { blob } = urlres;
console.log(blob);
res.videoBlob = blob;
console.log(res);
});
createMessage.success('获取数据成功');
} else {
createMessage.error('获取数据失败，请稍后重试');
}
resolve(callback(res));
});
}, 300000);
}
});
});
}
disposeSDK() {
/**

21
src/plugin/video/src/config.ts
Unescape Escape View File

@ -29,3 +29,24 @@ export function buildGUID(): string {
}
return guid;
}
// 图片地址 转为 blob 、base64格式 imgUrl类型为字符串string
export function base64ByURL(imgUrl) {
// 两大重点 Promise XMLHttpRequest
return new Promise((resolve) => {
var xhr = new XMLHttpRequest();
xhr.open('get', imgUrl, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (this.status == 200) {
let blob = this.response;
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
resolve({ blob, base64: e.target.result });
};
oFileReader.readAsDataURL(blob);
}
};
xhr.send();
});
}

49
src/views/demo/provincetasks/index.vue
Unescape Escape View File

@ -0,0 +1,49 @@
<template>
<BasicTable @register="registerTable">
<template #toolbar>
<!-- <a-button type="primary" @click=""></a-button> -->
</template>
</BasicTable>
</template>
<script setup lang="ts">
import { ref, defineProps, onMounted, watch, nextTick } from "vue"
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns, searchFormSchema } from './utils'
import { GetDataList } from '@/api/demo/provincetasks'
const [registerTable, { reload, expandAll, getForm,getDataSource,setTableData }] = useTable({
title: '任务列表',
api: GetDataList,
columns,
rowKey: 'id',
formConfig: {
labelWidth: 100,
schemas: searchFormSchema,
},
striped: false,
// 序号列
showIndexColumn: false,
// 使用搜索表单
useSearchForm: true,
// 显示表格设置工具
showTableSetting: true,
bordered: false,
beforeFetch(data) {
return data
},
afterFetch(data) {
return data.map(item => {
return {...item, children: item.tasklist}
})
},
handleSearchInfoFn(info) {
return info;
},
});
</script>
<style lang="scss" scoped>
</style>

40
src/views/demo/provincetasks/utils.ts
Unescape Escape View File

@ -0,0 +1,40 @@
import { BasicColumn, FormSchema } from '@/components/Table';
export const columns = [
{
title: '业务类型',
dataIndex: 'bizidname',
},
{
title: '下发任务名称',
dataIndex: 'taskname',
},
{
title: '数据类型',
dataIndex: 'datacode',
},
{
title: '地块编号',
dataIndex: 'dkbh',
},
{
title: '地块名称',
dataIndex: 'dkmc',
},
{
title: '地块面积',
dataIndex: 'dkmc',
},
{
title: '备注',
dataIndex: 'bz',
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'keyWord',
label: '名称',
component: 'Input',
colProps: { span: 6 },
},
];

101
src/views/demo/system/mediaLibrary/index.vue
Unescape Escape View File

@ -84,22 +84,50 @@
</div>
</template>
<template v-if="column.key === 'action'">
<a-tooltip placement="top">
<template #title>
<span>重命名</span>
</template>
<a-button type="text">
<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>
<div class="svg-container">
<a-tooltip placement="top">
<template #title>
<span>重命名</span>
</template>
<a-button type="text">
<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 && record.objectKey.includes('.jpeg')"
>
<BorderInnerOutlined @click="openPathModal(record)" />
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>
{{ record.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
</span>
</template>
<a-button
type="text"
v-if="record.objectKey && record.objectKey.includes('.jpeg')"
@click="funShowOnMap(record)"
>
<div
v-if="record.showOnMap == 1"
class="svg-container"
v-html="svg_showOnMap_1"
/>
<div
v-if="record.showOnMap != 1"
class="svg-container"
v-html="svg_showOnMap_0"
/>
</a-button>
</a-tooltip>
</div>
</template>
</div>
</template>
@ -255,12 +283,9 @@
import Preview from './preview/index.vue';
import Comparison from './comparison/index.vue';
import Path from './path/index.vue';
import { AddFolderModal } from './modal/modal';
import { MoveFileModal } from './modal/modal';
import { CompressFileModal } from './modal/modal';
import { RenameModal } from './modal/modal';
import { AddFolderModal, MoveFileModal, CompressFileModal, RenameModal } from './modal/modal';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { columns, searchFormSchema } from './modal.data';
import { columns, searchFormSchema, svg_showOnMap_0, svg_showOnMap_1 } from './modal.data';
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash-es';
@ -275,6 +300,7 @@
watch(
() => tableType.value,
(newval) => {
showTableData.value = getDataSource();
// 表格
const containers = document.querySelectorAll('.ant-table-container');
if (newval) {
@ -424,8 +450,9 @@
nowParentKey.value = f.id;
floders.value = floders.value.splice(0, index + 1);
clearSelectedRowKeys();
reload();
showTableData.value = getDataSource();
reload().then((res) => {
showTableData.value = res;
});
}
// 图片获取路径
function getImgurl(url) {
@ -549,6 +576,23 @@
});
}
// 加载到地图上
function funShowOnMap(record) {
UpdatePicStatus({
id: record.id,
fileTags: record.fileTags,
graffitiJson: record.graffitis,
display: record.display,
showOnMap: record.showOnMap == 1 ? 0 : 1,
}).then((res) => {
if (record.showOnMap == 1) {
createMessage.success('在地图上取消加载成功');
} else {
createMessage.success('在地图上加载成功');
}
reload();
});
}
// 查看弹窗----------------------------------------------------------------------------
const open = ref(false);
// 目前展示图片
@ -563,7 +607,9 @@
id: nowParentKey.value,
name: record.name,
});
reload();
reload().then((res) => {
showTableData.value = res;
});
} else {
GetMediaFile({
...searchParams.value,
@ -683,6 +729,7 @@
function handleSuccessPath() {
setTimeout(() => {
openPathModal(nowShowImageData.value);
reload();
}, 500);
}
</script>
@ -763,6 +810,12 @@
}
}
.svg-container {
display: flex;
align-items: center;
justify-content: center;
}
::v-deep .vben-basic-table {
height: fit-content !important;
}

28
src/views/demo/system/mediaLibrary/modal.data.ts
Unescape Escape View File

@ -201,4 +201,30 @@ export const renameSchema: FormSchema[] = [
label: '新名称',
required: true,
}
];
];
export const svg_showOnMap_1 = `<svg
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="#000000"
></path>
</svg>`;
export const svg_showOnMap_0 = `<svg
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="#000000"
></path>
</svg>`;

15
src/views/demo/system/mediaLibrary/modal/RenameModal.vue
Unescape Escape View File

@ -22,13 +22,16 @@
});
// 上级文件夹的id
let id = ref();
const id = ref();
const recordData: any = ref({});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
recordData.value = data.record;
id.value = data.record?.id;
let editName: any = recordData.value.name.split('.').slice(0, -1).join('.');
setFieldsValue({
...data.record,
name: editName,
});
});
@ -36,9 +39,15 @@
async function handleSubmit() {
try {
const values = await validate();
let newName = '';
if (recordData.value.name.split('.').length <= 1) {
newName = values.name;
} else {
newName = values.name + '.' + recordData.value.name.split('.').pop();
}
let query = {
id: id.value,
name: values.name,
name: newName,
};
UpdatePicName(query).then((res) => {
emits('handleSuccess');

8
src/views/demo/system/mediaLibrary/path/index.vue
Unescape Escape View File

@ -17,6 +17,7 @@
@closePathModal="closePathModal"
@setNowShowImageData="setNowShowImageData"
@handleSuccessPath="handleSuccessPath"
@funUpdateDisplayOrShowOnMapData="funUpdateDisplayOrShowOnMapData"
/>
</div>
<!-- 地图 -->
@ -27,6 +28,7 @@
:nowShowImageData="nowShowImageData"
@setNowShowImageData="setNowShowImageData"
@setAllImageData="setAllImageData"
:updateDisplayOrShowOnMapData="updateDisplayOrShowOnMapData"
/>
</div>
<!-- 地图照片 -->
@ -37,6 +39,7 @@
@setNowShowImageData="setNowShowImageData"
@handlerLocation="handlerLocation"
@handleSuccessPath="handleSuccessPath"
@funUpdateDisplayOrShowOnMapData="funUpdateDisplayOrShowOnMapData"
/>
</div>
</div>
@ -78,6 +81,11 @@
// 当前展示的图片
const nowShowImageData = ref();
const allImageDataList = ref();
// 修改display或者showOnMap
const updateDisplayOrShowOnMapData = ref();
function funUpdateDisplayOrShowOnMapData(value) {
updateDisplayOrShowOnMapData.value = value;
}
watch(
() => props.nowShowImageData,

2
src/views/demo/system/mediaLibrary/path/path.ts
Unescape Escape View File

@ -1,5 +1,3 @@
export { default as PathLeftMenu } from './pathLeftMenu.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 PathAreaInfo } from './pathAreaInfo.vue';

678
src/views/demo/system/mediaLibrary/path/pathAnnotationInfo.vue
Unescape Escape View File

@ -1,678 +0,0 @@
<template>
<div class="annotationInfo">
<!-- 关闭按钮 -->
<div class="closeButton">
<CloseOutlined @click="closePathAnnotationInfo" style="font-size: 20px; color: white" />
</div>
<div class="annotationInfo_biaozhu_1">
<a-row>
<a-col :span="24">
<div class="annotationTitle">标注信息</div>
</a-col>
<!-- 标题名：点、线、形、圈 -->
<a-col :span="24">
<div class="annotationTitle">
<div class="annotationTitleButton_right">
<AntDesignOutlined
v-if="nowAnnotationData.type == 0"
:style="{ color: nowAnnotationData.properties.color }"
/>
<ExpandAltOutlined
v-if="nowAnnotationData.type == 1"
:style="{ color: nowAnnotationData.properties.color }"
/>
<BorderOutlined
v-if="nowAnnotationData.type == 2"
:style="{ color: nowAnnotationData.properties.color }"
/>
<LogoutOutlined
v-if="nowAnnotationData.type == 3"
:style="{ color: nowAnnotationData.properties.color }"
/>
</div>
<a-input
v-model:value="nowAnnotationData.name"
style="width: 60%"
size="small"
></a-input>
<div class="annotationTitleButton" @click="handlerLocation">
<AimOutlined />
</div>
<div class="annotationTitleButton" @click="deleteAnnotation">
<DeleteOutlined />
</div>
</div>
</a-col>
<!-- 颜色：点、线、形、圈 -->
<a-col :span="6">
<div class="annotationTitle">颜色</div>
</a-col>
<a-col :span="18">
<div class="annotationContent">
<div
class="popoverClass"
v-for="color in ['#2D8CF0', '#19BE6B', '#FF9900', '#E23C39', '#B620E0']"
:key="color"
:style="{ background: color }"
@click="nowAnnotationData.properties.color = color"
>
<CheckOutlined
v-if="nowAnnotationData.properties.color == color"
style="color: white"
/>
</div>
</div>
</a-col>
<!-- 形态：线 -->
<a-col :span="6" v-if="nowAnnotationData.type == 1">
<div class="annotationTitle">形态</div>
</a-col>
<a-col :span="18" v-if="nowAnnotationData.type == 1">
<div class="annotationContent" style="gap: 5%">
<a-tooltip placement="top">
<template #title> 线宽度 </template>
<a-input
v-model:value="nowAnnotationData.properties.line_width"
style="width: 30%"
@change="
nowAnnotationData.properties.line_width = parseFloat(
nowAnnotationData.properties.line_width.toString().replace(/[^-0-9]/g, ''),
)
"
>
<template #prefix><AlignLeftOutlined /></template>
</a-input>
</a-tooltip>
<a-tooltip placement="top">
<template #title> 线头部样式 </template>
<a-select
v-model:value="nowAnnotationData.properties.line_start_cap"
style="width: 30%"
option-label-prop="children"
>
<a-select-option :value="0">
<div class="svg-container" v-html="line_start_cap_0"></div>
</a-select-option>
<a-select-option :value="1">
<div class="svg-container" v-html="line_start_cap_1"></div>
</a-select-option>
<a-select-option :value="2">
<div class="svg-container" v-html="line_start_cap_2"></div>
</a-select-option>
<a-select-option :value="3">
<div class="svg-container" v-html="line_start_cap_3"></div>
</a-select-option>
</a-select>
</a-tooltip>
<a-tooltip placement="top">
<template #title> 线尾部样式 </template>
<a-select
v-model:value="nowAnnotationData.properties.line_end_cap"
style="width: 30%"
option-label-prop="children"
>
<a-select-option :value="0">
<div class="svg-container" v-html="line_end_cap_0"></div>
</a-select-option>
<a-select-option :value="1">
<div class="svg-container" v-html="line_end_cap_1"></div>
</a-select-option>
<a-select-option :value="2">
<div class="svg-container" v-html="line_end_cap_2"></div>
</a-select-option>
<a-select-option :value="3">
<div class="svg-container" v-html="line_end_cap_3"></div>
</a-select-option>
</a-select>
</a-tooltip>
</div>
</a-col>
<!-- 图标：点 -->
<a-col :span="6" v-if="nowAnnotationData.type == 0">
<div class="annotationTitle">图标</div>
</a-col>
<a-col :span="18" v-if="nowAnnotationData.type == 0">
<div class="annotationContent"></div>
</a-col>
<!-- 字体：点、线、形、圈 -->
<a-col :span="6">
<div class="annotationTitle">字体</div>
</a-col>
<a-col :span="18">
<div class="annotationContent">
<a-radio-group
v-model:value="nowAnnotationData.properties.font_size"
button-style="solid"
size="small"
>
<a-radio-button :value="16">小</a-radio-button>
<a-radio-button :value="24">中</a-radio-button>
<a-radio-button :value="32">大</a-radio-button>
</a-radio-group>
</div>
</a-col>
</a-row>
</div>
<div style="border-bottom: 1px solid #ffffff55; margin-left: 15px; margin-right: 15px"></div>
<div class="annotationInfo_biaozhu_2">
<a-row>
<a-col :span="24">
<div class="annotationTitle">
测量数据
<a-tooltip placement="top">
<template #title> 只能测量出当前视窗范围内的数据 </template>
<InfoCircleOutlined style="margin-left: 10px" />
</a-tooltip>
</div>
</a-col>
<!-- 经纬模式：点、圈 -->
<a-col :span="6" v-if="[0, 3].includes(nowAnnotationData.type)">
<div class="annotationTitle">经纬模式</div>
</a-col>
<a-col :span="18" v-if="[0, 3].includes(nowAnnotationData.type)">
<div class="annotationContent">
<a-radio-group v-model:value="modalType">
<a-radio :value="0"><span style="color: white">十进制</span></a-radio>
<a-radio :value="1"><span style="color: white">度分秒</span></a-radio>
</a-radio-group>
</div>
</a-col>
<!-- 经度：点 -->
<a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
<div class="annotationTitle">经度</div>
</a-col>
<a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
<div class="annotationContent">
<!-- 十进制 -->
<a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[0]">
<template #addonAfter>
<span style="color: white">°</span>
</template>
</a-input>
<!-- 度分秒 -->
<a-input
v-if="modalType == 1"
v-model:value="decimalToDMS_0.degrees"
style="max-width: 32px"
@change="
decimalToDMS_0.degrees = parseFloat(
decimalToDMS_0.degrees.toString().replace(/[^-0-9]/g, ''),
)
"
/>
<span v-if="modalType == 1" style="margin: 2px; color: white">°</span>
<a-input
v-if="modalType == 1"
v-model:value="decimalToDMS_0.minutes"
style="max-width: 30px"
@change="
decimalToDMS_0.minutes = parseFloat(
decimalToDMS_0.minutes.toString().replace(/[^-0-9]/g, ''),
)
"
/>
<span v-if="modalType == 1" style="margin: 2px; color: white">′</span>
<a-input
v-if="modalType == 1"
v-model:value="decimalToDMS_0.seconds"
style="width: 120px"
@change="
decimalToDMS_0.seconds = parseFloat(
decimalToDMS_0.seconds.toString().replace(/[^-0-9]/g, ''),
)
"
/>
<span v-if="modalType == 1" style="margin: 2px; color: white">″</span>
</div>
</a-col>
<!-- 纬度：点 -->
<a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
<div class="annotationTitle">纬度</div>
</a-col>
<a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
<div class="annotationContent">
<!-- 十进制 -->
<a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[1]">
<template #addonAfter>
<span style="color: white">°</span>
</template>
</a-input>
<!-- 度分秒 -->
<a-input
v-if="modalType == 1"
v-model:value="decimalToDMS_1.degrees"
style="max-width: 32px"
@change="
decimalToDMS_1.degrees = parseFloat(
decimalToDMS_1.degrees.toString().replace(/[^-0-9]/g, ''),
)
"
/>
<span v-if="modalType == 1" style="margin: 2px; color: white">°</span>
<a-input
v-if="modalType == 1"
v-model:value="decimalToDMS_1.minutes"
style="max-width: 30px"
@change="
decimalToDMS_1.minutes = parseFloat(
decimalToDMS_1.minutes.toString().replace(/[^-0-9]/g, ''),
)
"
/>
<span v-if="modalType == 1" style="margin: 2px; color: white">′</span>
<a-input
v-if="modalType == 1"
v-model:value="decimalToDMS_1.seconds"
style="width: 120px"
@change="
decimalToDMS_1.seconds = parseFloat(
decimalToDMS_1.seconds.toString().replace(/[^-0-9]/g, ''),
)
"
/>
<span v-if="modalType == 1" style="margin: 2px; color: white">″</span>
</div>
</a-col>
<!-- 高度：点 -->
<a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
<div class="annotationTitle">高度</div>
</a-col>
<a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
<div class="annotationContent">
<a-input v-model:value="nowAnnotationData.coordinates[2]">
<template #addonAfter> <span style="color: white">m</span> </template>
</a-input>
</div>
</a-col>
<!-- 圆心经度：圈 -->
<a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
<div class="annotationTitle">圆心经度</div>
</a-col>
<a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
<div class="annotationContent">
<a-input v-model:value="nowAnnotationData.properties.centerPoint[0]">
<template #addonAfter> <span style="color: white">°</span> </template>
</a-input>
</div>
</a-col>
<!-- 圆心纬度：圈 -->
<a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
<div class="annotationTitle">圆心纬度</div>
</a-col>
<a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
<div class="annotationContent">
<a-input v-model:value="nowAnnotationData.properties.centerPoint[1]">
<template #addonAfter> <span style="color: white">°</span> </template>
</a-input>
</div>
</a-col>
<!-- 水平半径：圈 -->
<a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
<div class="annotationTitle">水平半径</div>
</a-col>
<a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
<div class="annotationContent">
<a-input v-model:value="nowAnnotationData.properties.radius">
<template #addonAfter> <span style="color: white">m</span> </template>
</a-input>
</div>
</a-col>
<!-- 水平面积：形状、圈 -->
<a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
<div class="annotationTitle">水平面积</div>
</a-col>
<a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
<div class="annotationContent">
<span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
{{ horizontalArea }}㎡
</span>
<span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
{{
(
Math.PI *
nowAnnotationData.properties.radius *
nowAnnotationData.properties.radius
).toFixed(2)
}}㎡
</span>
</div>
</a-col>
<!-- 水平周长：形状、圈 -->
<a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
<div class="annotationTitle">水平周长</div>
</a-col>
<a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
<div class="annotationContent">
<span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
{{ horizontalPerimeter }}m
</span>
<span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
{{ (2 * Math.PI * nowAnnotationData.properties.radius).toFixed(1) }}
m
</span>
</div>
</a-col>
<!-- 水平距离：线 -->
<a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
<div class="annotationTitle">水平距离</div>
</a-col>
<a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
<div class="annotationContent">
<span style="color: white; gap: 10px"> {{ horizontalDistance }}m </span>
</div>
</a-col>
<!-- 直线距离：线 -->
<a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
<div class="annotationTitle">直线距离</div>
</a-col>
<a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
<div class="annotationContent">
<span style="color: white; gap: 10px"> {{ linearDistance }}m </span>
</div>
</a-col>
<!-- 高度差：线、形 -->
<a-col :span="6" v-if="[1, 2].includes(nowAnnotationData.type)">
<div class="annotationTitle">高度差</div>
</a-col>
<a-col :span="18" v-if="[1, 2].includes(nowAnnotationData.type)">
<div class="annotationContent">
<span style="color: white; gap: 10px" v-if="[1, 2].includes(nowAnnotationData.type)">
{{ heightDiff }}m
</span>
</div>
</a-col>
<!-- 简介：点、线、形、圈 -->
<a-col :span="6">
<div class="annotationTitle">简介</div>
</a-col>
<a-col :span="18">
<div class="annotationContent">
<a-textarea
v-model:value="nowAnnotationData.remark"
:rows="4"
:maxlength="10"
placeholder="请输入"
allow-clear
/>
</div>
</a-col>
<!-- 绘制者：点、线、形、圈 -->
<a-col :span="6">
<div class="annotationTitle">绘制者</div>
</a-col>
<a-col :span="18">
<div class="annotationContent">
<span style="color: white">{{ nowAnnotationData.createUserName }}</span>
</div>
</a-col>
</a-row>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, computed, onMounted } from 'vue';
import * as mars3d from 'mars3d';
import * as Cesium from 'mars3d-cesium';
import {
line_start_cap_0,
line_start_cap_1,
line_start_cap_2,
line_start_cap_3,
line_end_cap_0,
line_end_cap_1,
line_end_cap_2,
line_end_cap_3,
} from './svg';
import {
CloseOutlined,
DeleteOutlined,
CheckOutlined,
AimOutlined,
AlignLeftOutlined,
InfoCircleOutlined,
AntDesignOutlined,
ExpandAltOutlined,
BorderOutlined,
LogoutOutlined,
} from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash-es';
let map: mars3d.Map;
const props = defineProps(['allAnnotationDataList', 'nowShowAnnotationData']);
const emits = defineEmits([
'setNowShowAnnotationData',
'closePathAnnotationInfo',
'handlerLocation',
'deleteAnnotation',
]);
const nowAnnotationData: any = ref(props.nowShowAnnotationData);
// 经纬模式
const modalType = ref<number>(0);
// 度分秒-经度
const decimalToDMS_0 = ref({
degrees: 0,
minutes: 0,
seconds: 0,
});
// 度分秒-纬度
const decimalToDMS_1 = ref({
degrees: 0,
minutes: 0,
seconds: 0,
});
watch(
() => modalType.value,
(newValue) => {
if (newValue == 0) {
// 度分秒-经度 → 十进制-经度
let { degrees, minutes, seconds } = decimalToDMS_0.value;
let decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
nowAnnotationData.value.coordinates[0] = decimal;
// 度分秒-纬度 → 十进制-纬度
degrees = decimalToDMS_1.value.degrees;
minutes = decimalToDMS_1.value.minutes;
seconds = decimalToDMS_1.value.seconds;
decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
nowAnnotationData.value.coordinates[1] = decimal;
}
if (newValue == 1) {
// 十进制-经度 → 度分秒-经度
const decimal1 = nowAnnotationData.value.coordinates[0];
const degrees1 = Math.floor(decimal1);
const minutesFull1 = (decimal1 - degrees1) * 60;
const minutes1 = Math.floor(minutesFull1);
const seconds1 = parseFloat((minutesFull1 - minutes1) * 60);
decimalToDMS_0.value = {
degrees: degrees1,
minutes: minutes1,
seconds: seconds1,
};
// 十进制-纬度 → 度分秒-纬度
const decimal2 = nowAnnotationData.value.coordinates[1];
const degrees2 = Math.floor(decimal2);
const minutesFull2 = (decimal2 - degrees2) * 60;
const minutes2 = Math.floor(minutesFull2);
const seconds2 = parseFloat((minutesFull2 - minutes2) * 60);
decimalToDMS_1.value = {
degrees: degrees2,
minutes: minutes2,
seconds: seconds2,
};
}
},
);
// 关闭
function closePathAnnotationInfo() {
emits('closePathAnnotationInfo');
}
// 移动到中心位置
function handlerLocation() {
emits('handlerLocation', {
lng: props.nowShowAnnotationData.properties.centerPoint[0],
lat: props.nowShowAnnotationData.properties.centerPoint[1],
});
}
// 删除此标注
function deleteAnnotation() {
emits('deleteAnnotation', props.nowShowAnnotationData);
}
// 线-直线距离
const linearDistance: any = ref();
// 线-水平距离
const horizontalDistance: any = ref();
// 圆-水平面积
const horizontalArea: any = ref();
// 圆-水平周长
const horizontalPerimeter: any = ref();
// 高度差
const heightDiff: any = ref();
watch(
() => nowAnnotationData.value,
() => {
emits('setNowShowAnnotationData', nowAnnotationData.value, false);
},
{
deep: true,
},
);
watch(
() => props.nowShowAnnotationData,
() => {
nowAnnotationData.value = props.nowShowAnnotationData;
// 线
if (nowAnnotationData.value.type == 1) {
// 直线距离
linearDistance.value = mars3d.MeasureUtil.getDistance(
nowAnnotationData.value.coordinates,
).toFixed(2);
// 水平距离
horizontalDistance.value = mars3d.MeasureUtil.getSurfaceDistance(
nowAnnotationData.value.coordinates,
).toFixed(2);
// 高度差
let heightlist: any = [];
nowAnnotationData.value.coordinates.forEach((item) => {
heightlist.push(item[2]);
});
heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
}
// 多边形
if (nowAnnotationData.value.type == 2) {
// 水平面积
horizontalArea.value = mars3d.MeasureUtil.getSurfaceArea(
nowAnnotationData.value.coordinates[0],
).toFixed(2);
// 水平周长
horizontalPerimeter.value = mars3d.MeasureUtil.getSurfaceDistance(
nowAnnotationData.value.coordinates[0],
).toFixed(2);
// 高度差
let heightlist: any = [];
nowAnnotationData.value.coordinates[0].forEach((item) => {
heightlist.push(item[2]);
});
heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
}
},
{
deep: true,
immediate: true,
},
);
onMounted(() => {});
</script>
<style lang="less" scoped>
.annotationInfo {
// 页面不能被选中
-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;
.annotationInfo_biaozhu_1 {
padding: 15px;
}
.annotationInfo_biaozhu_2 {
padding: 15px;
overflow-y: auto;
height: 650px;
}
}
// 关闭按钮
.closeButton {
position: absolute;
top: 30px;
right: 20px;
z-index: 200;
}
.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;
}
.popoverClass {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
margin-right: 5px;
}
.svg-container {
display: block;
}
::v-deep .annotationContent .ant-input {
padding: 0px !important;
}
::v-deep .annotationContent .ant-select-selection-item {
height: 20px !important;
}
</style>

373
src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
Unescape Escape 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>

141
src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
Unescape Escape View File

@ -445,46 +445,55 @@
</a-tooltip>
</div>
<!-- 加载到地图上 -->
<div class="button2" @click="funShowOnMap">
<a-tooltip placement="top">
<template #title>
<span>
{{ props.nowShowImageData.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
</span>
</template>
<svg
v-if="props.nowShowImageData.showOnMap == 1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="25"
height="25"
>
<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="props.nowShowImageData.showOnMap != 1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="25"
height="25"
>
<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>
</a-tooltip>
<div class="button2">
<a-popconfirm
placement="top"
title="您是否将该照片在地图上取消加载？取消后照片将不在地图上显示。"
ok-text="确认"
cancel-text="取消"
@confirm="funShowOnMap"
>
<a-tooltip placement="top">
<template #title>
<span>
{{ props.nowShowImageData.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
</span>
</template>
<svg
v-if="props.nowShowImageData.showOnMap == 1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="25"
height="25"
>
<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="props.nowShowImageData.showOnMap != 1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="25"
height="25"
>
<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>
</a-tooltip>
</a-popconfirm>
</div>
</div>
<div class="imageChooseList">
<div v-for="li in props.allImageDataList" :key="li.id" @click="setNowShowImageData(li)">
<div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
<img
v-if="li.display == 1 && li.showOnMap == 1"
:src="
li.preview_url
? li.preview_url
@ -497,7 +506,6 @@
</div>
</div>
</div>
<!-- 标签弹窗 -->
<a-modal
title="标签设置"
@ -592,6 +600,7 @@
'closePathImageInfo',
'handleSuccessPath',
'handlerLocation',
'funUpdateDisplayOrShowOnMapData',
]);
// 图片获取路径
@ -630,6 +639,7 @@
props.nowShowImageData.name = newName;
editNameFlag.value = true;
createMessage.success(res);
emits('funUpdateDisplayOrShowOnMapData', props.nowShowImageData);
emits('handleSuccessPath');
});
}
@ -645,7 +655,7 @@
// 上一张、下一张图片--------------------------------------------------------------
function clickLeftOrRightButton(direction) {
const list = props.allImageDataList;
const list = props.allImageDataList.filter((item) => item.display == 1 && item.showOnMap == 1);
for (let index = 0; index < list.length; index++) {
if (list[index].id == props.nowShowImageData.id) {
if (direction == 'left') {
@ -781,6 +791,7 @@
} else {
createMessage.success('在地图上取消加载成功');
}
emits('funUpdateDisplayOrShowOnMapData', props.nowShowImageData);
emits('handleSuccessPath');
});
}
@ -1058,37 +1069,37 @@
//------------------------------------------------------------------------
// 鼠标聚焦
function mouseenter(rect, type) {
if (rect.status != 'edit') {
rect.status = 'mouse';
document.body.style.cursor = 'pointer';
}
if (rect.status == 'edit') {
if (type == 'top' || type == 'bottom') {
document.body.style.cursor = 'ns-resize';
}
if (type == 'left' || type == 'right') {
document.body.style.cursor = 'ew-resize';
}
if (type == 'leftTop' || type == 'rightBottom') {
document.body.style.cursor = 'nwse-resize';
}
if (type == 'leftBottom' || type == 'rightTop') {
document.body.style.cursor = 'nesw-resize';
}
}
// if (rect.status != 'edit') {
// rect.status = 'mouse';
// document.body.style.cursor = 'pointer';
// }
// if (rect.status == 'edit') {
// if (type == 'top' || type == 'bottom') {
// document.body.style.cursor = 'ns-resize';
// }
// if (type == 'left' || type == 'right') {
// document.body.style.cursor = 'ew-resize';
// }
// if (type == 'leftTop' || type == 'rightBottom') {
// document.body.style.cursor = 'nwse-resize';
// }
// if (type == 'leftBottom' || type == 'rightTop') {
// document.body.style.cursor = 'nesw-resize';
// }
// }
}
// 鼠标离开
function mouseleave(rect) {
if (rect.status == 'mouse' || rect.status == 'edit') {
if (rect.status == 'mouse') {
rect.status = 'success';
}
if (graffitiFlag.value) {
document.body.style.cursor = 'crosshair';
} else {
document.body.style.cursor = 'pointer';
}
}
// if (rect.status == 'mouse' || rect.status == 'edit') {
// if (rect.status == 'mouse') {
// rect.status = 'success';
// }
// if (graffitiFlag.value) {
// document.body.style.cursor = 'crosshair';
// } else {
// document.body.style.cursor = 'pointer';
// }
// }
}
// 编辑状态下的鼠标按下
const mouseEditType = ref('');
@ -1264,7 +1275,7 @@
.imageChooseList {
display: inline-flex;
align-items: center;
justify-content: center;
// justify-content: center;
overflow-x: auto;
white-space: nowrap;
width: 80%;

127
src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
Unescape Escape View File

@ -105,43 +105,25 @@
</template>
<AimOutlined @click="handlerLocation(show)" />
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>
{{ show.showOnMap ? '在地图上取消加载' : '在地图上加载' }}
</span>
</template>
<div style="display: flex; align-items: center">
<svg
v-if="show.showOnMap == 1"
@click="funShowOnMapOrDisplay(show, 'showOnMap')"
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.showOnMap != 1"
@click="funShowOnMapOrDisplay(show, 'showOnMap')"
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>
<a-popconfirm
placement="right"
title="您是否将该照片在地图上取消加载？取消后照片将不在地图上显示。"
ok-text="确认"
cancel-text="取消"
@confirm="funShowOnMapOrDisplay(show, 'showOnMap')"
>
<a-tooltip placement="top">
<template #title>
<span>
{{ show.showOnMap ? '在地图上取消加载' : '在地图上加载' }}
</span>
</template>
<div style="display: flex; align-items: center">
<div v-if="show.showOnMap == 1" class="svg-container" v-html="showOnMap_1" />
<div v-if="show.showOnMap != 1" class="svg-container" v-html="showOnMap_0" />
</div>
</a-tooltip>
</a-popconfirm>
</div>
</div>
</div>
@ -181,6 +163,7 @@
CheckCircleOutlined,
StopOutlined,
} from '@ant-design/icons-vue';
import { showOnMap_1, showOnMap_0 } from './svg';
import {
UpdatePicStatus,
Deletepic,
@ -198,6 +181,7 @@
'closePathModal',
'setNowShowImageData',
'handleSuccessPath',
'funUpdateDisplayOrShowOnMapData',
]);
const showMenuInfoList = ref(props.allImageDataList);
const showMenuInfoName = ref('地图照片');
@ -227,35 +211,6 @@
const tagSelect = ref([]);
const tagOptions: any = ref([]);
watch(
() => props.allImageDataList,
() => {
filterAfterImageDataList.value = props.allImageDataList;
// 标签选项
let tagList: any = [];
tagOptions.value = [];
props.allImageDataList.forEach((item) => {
if (item.fileTags && item.fileTags.length > 0) {
item.fileTags.forEach((tag) => {
if (!tagList.includes(tag)) {
tagList.push(tag);
}
});
}
});
tagList.forEach((tag) => {
tagOptions.value.push({
value: tag,
label: tag,
});
});
},
{
deep: true,
immediate: true,
},
);
// 图片类型
const imageTypeSelect = ref([]);
const imageOptions: any = ref([
@ -283,7 +238,8 @@
// 按照媒体名称搜索
const searchValue = ref('');
function handleChangeImageSearch() {
let filterImageData = props.allImageDataList;
// let filterImageData = props.allImageDataList;
let filterImageData = props.allImageDataList.filter((item) => item.showOnMap == 1);
// 标签筛选
if (tagSelect.value.length > 0) {
tagSelect.value.forEach((tag) => {
@ -304,9 +260,38 @@
showMenuInfoList.value = filterAfterImageDataList.value;
}
watch(
() => props.allImageDataList,
() => {
filterAfterImageDataList.value = props.allImageDataList;
// 标签选项
let tagList: any = [];
tagOptions.value = [];
props.allImageDataList.forEach((item) => {
if (item.fileTags && item.fileTags.length > 0) {
item.fileTags.forEach((tag) => {
if (!tagList.includes(tag)) {
tagList.push(tag);
}
});
}
});
tagList.forEach((tag) => {
tagOptions.value.push({
value: tag,
label: tag,
});
});
handleChangeImageSearch();
},
{
deep: true,
immediate: true,
},
);
// 加载到地图上
function funShowOnMapOrDisplay(show, type) {
console.log(show.showOnMap);
if (type == 'showOnMap') {
if (show.showOnMap == 1) {
show.showOnMap = 0;
@ -336,6 +321,7 @@
}
}
emits('handleSuccessPath');
emits('funUpdateDisplayOrShowOnMapData', show);
});
}
@ -475,4 +461,9 @@
justify-content: center;
border-radius: 5px;
}
.svg-container {
display: flex;
align-items: center;
justify-content: center;
}
</style>

260
src/views/demo/system/mediaLibrary/path/pathMap.vue
Unescape Escape View File

@ -9,7 +9,6 @@
import { ref, watch, onMounted, defineEmits } from 'vue';
import * as mars3d from 'mars3d';
import * as Cesium from 'mars3d-cesium';
import { circle, rect, triangle } from './svg';
import {
CheckOutlined,
AntDesignOutlined,
@ -23,36 +22,16 @@
AddWorkArea,
UpdateWorkArea,
} from '@/api/demo/mediaLibrary';
import {
locateBack,
defaultIcon,
fireIcon,
peopleIcon,
warnIcon,
carIcon,
checkIcon,
closeIcon,
} from './svg';
import * as turf from '@turf/turf';
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import dayjs from 'dayjs';
const props = defineProps([
'allAnnotationDataList',
'nowShowAnnotationData',
'allImageDataList',
'nowShowImageData',
'allAreaDataList',
'nowShowAreaData',
]);
const emits = defineEmits([
'setNowShowAnnotationData',
'setNowShowImageData',
'setNowShowAreaData',
'setAllAnnotationData',
'setAllImageData',
'setAllAreaData',
'updateDisplayOrShowOnMapData',
]);
const emits = defineEmits(['setNowShowImageData', 'setAllImageData']);
const vChartRef: any = ref<HTMLElement>();
let map: mars3d.Map; // 地图对象
@ -61,13 +40,13 @@
});
// 地图照片
// 地图照片-地面点
let image_bottomPointGraphicData: any = [];
let bottomPointGraphicData: any = [];
// 地图照片-飞行点
let image_flightointGraphicData: any = [];
let flightointGraphicData: any = [];
// 地图照片-地面点到展示图片的线
let image_bottomImagePolylineGraphicData: any = [];
let bottomImagePolylineGraphicData: any = [];
// 地图照片-展示图片
let image_imageGraphicData: any = [];
let imageGraphicData: any = [];
onMounted(() => {
initMap();
@ -306,32 +285,129 @@
}
};
watch(
() => props.updateDisplayOrShowOnMapData,
(newValue) => {
if (newValue) {
// 地图照片-地面点
bottomPointGraphicData.forEach((graphicLayer) => {
if (graphicLayer.options.id == newValue.id + '_bottom') {
if (newValue.showOnMap == 1) {
graphicLayer.show = newValue.display == 1 ? true : false;
} else {
graphicLayers.removeGraphic(graphicLayer);
}
}
});
// 地图照片-飞行点
flightointGraphicData.forEach((graphicLayer) => {
if (graphicLayer.options.id == newValue.id + '_flight') {
if (newValue.showOnMap == 1) {
if (newValue.id == props.nowShowImageData.id) {
graphicLayer.show = newValue.display == 1 ? true : false;
}
} else {
graphicLayers.removeGraphic(graphicLayer);
}
}
});
// 地图照片-地面点到展示图片的线
bottomImagePolylineGraphicData.forEach((graphicLayer) => {
if (graphicLayer.options.id == newValue.id + '_polyline') {
if (newValue.showOnMap == 1) {
graphicLayer.show = newValue.display == 1 ? true : false;
} else {
graphicLayers.removeGraphic(graphicLayer);
}
}
});
// 地图照片-展示图片
imageGraphicData.forEach((graphicLayer) => {
if (graphicLayer.options.id == newValue.id + '_image') {
if (newValue.showOnMap == 1) {
graphicLayer.show = newValue.display == 1 ? true : false;
graphicLayer.setStyle({
label: {
text: `${newValue.name}`,
},
});
} else {
graphicLayers.removeGraphic(graphicLayer);
}
}
});
}
},
{
deep: true,
},
);
// watch(
// () => props.nowShowImageData,
// (newValue) => {
// if (newValue) {
// // 地图照片-地面点
// bottomPointGraphicData.forEach((graphicLayer) => {
// if (graphicLayer.options.id == newValue.id + '_bottom') {
// graphicLayer.show = newValue.display == 1 ? true : false;
// }
// });
// // 地图照片-飞行点
// // flightointGraphicData.forEach((graphicLayer) => {
// // if (graphicLayer.options.id == newValue.id + '_flight') {
// // }
// // });
// // 地图照片-地面点到展示图片的线
// bottomImagePolylineGraphicData.forEach((graphicLayer) => {
// if (graphicLayer.options.id == newValue.id + '_polyline') {
// graphicLayer.show = newValue.display == 1 ? true : false;
// }
// });
// // 地图照片-展示图片
// imageGraphicData.forEach((graphicLayer) => {
// if (graphicLayer.options.id == newValue.id + '_image') {
// graphicLayer.show = newValue.display == 1 ? true : false;
// graphicLayer.setStyle({
// label: {
// text: `${newValue.name}`,
// },
// });
// }
// });
// }
// },
// {
// deep: true,
// },
// );
// 地图照片--------------------------------------------------------------------
// 地图照片-初始化-遍历展示
const showAllImageDataList = async () => {
// 删除旧数据
image_bottomPointGraphicData?.forEach((graphicLayer) => {
bottomPointGraphicData?.forEach((graphicLayer) => {
graphicLayers.removeGraphic(graphicLayer);
});
image_flightointGraphicData?.forEach((graphicLayer) => {
flightointGraphicData?.forEach((graphicLayer) => {
graphicLayers.removeGraphic(graphicLayer);
});
image_bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
graphicLayers.removeGraphic(graphicLayer);
});
image_imageGraphicData?.forEach((graphicLayer) => {
imageGraphicData?.forEach((graphicLayer) => {
graphicLayers.removeGraphic(graphicLayer);
});
// 图层数据
image_bottomPointGraphicData = [];
image_flightointGraphicData = [];
image_bottomImagePolylineGraphicData = [];
image_imageGraphicData = [];
bottomPointGraphicData = [];
flightointGraphicData = [];
bottomImagePolylineGraphicData = [];
imageGraphicData = [];
// 地图照片-遍历
let rotation = 0;
props.allImageDataList.forEach((item, index) => {
if (item.lng && item.lat && item.absoluteAltitude) {
if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) {
const image = new Image();
image.crossOrigin = 'Anonymous';
// image.src = item.preview_url;
@ -384,6 +460,7 @@
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
hasEdit: false,
show: item.display == 1 ? true : false,
});
if (index + 1 < props.allImageDataList.length) {
const afterItem = props.allImageDataList[index + 1];
@ -420,6 +497,7 @@
clampToGround: false,
},
hasEdit: false,
show: item.display == 1 ? true : false,
// 用于恢复默认
defaultPosition: position,
// 地形高度
@ -447,6 +525,7 @@
},
},
hasEdit: false,
show: item.display == 1 ? true : false,
// 用于恢复默认
defaultImage: dataURL1,
// 用于外侧修改图片
@ -520,10 +599,10 @@
// 展示图片 添加到图层中
graphicLayers.addGraphic(imageGraphic);
// 数据
image_bottomPointGraphicData.push(bottomPointGraphic);
image_flightointGraphicData.push(flightointGraphic);
image_bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
image_imageGraphicData.push(imageGraphic);
bottomPointGraphicData.push(bottomPointGraphic);
flightointGraphicData.push(flightointGraphic);
bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
imageGraphicData.push(imageGraphic);
});
};
}
@ -536,13 +615,13 @@
// 地图照片-恢复默认
function imageRestoreDefault() {
// 飞行点
for (let i = 0; i < image_flightointGraphicData.length; i++) {
let flightointGraphic = image_flightointGraphicData[i];
for (let i = 0; i < flightointGraphicData.length; i++) {
let flightointGraphic = flightointGraphicData[i];
flightointGraphic.show = false;
}
// 地面点到展示图片的线
for (let i = 0; i < image_bottomImagePolylineGraphicData.length; i++) {
let bottomImagePolylineGraphic = image_bottomImagePolylineGraphicData[i];
for (let i = 0; i < bottomImagePolylineGraphicData.length; i++) {
let bottomImagePolylineGraphic = bottomImagePolylineGraphicData[i];
let defaultPosition = bottomImagePolylineGraphic.options.defaultPosition;
let surfaceHeight = bottomImagePolylineGraphic.options.surfaceHeight;
bottomImagePolylineGraphic.setStyle({
@ -554,8 +633,8 @@
];
}
// 展示图片
for (let i = 0; i < image_imageGraphicData.length; i++) {
let imageGraphic = image_imageGraphicData[i];
for (let i = 0; i < imageGraphicData.length; i++) {
let imageGraphic = imageGraphicData[i];
let defaultImage = imageGraphic.options.defaultImage;
imageGraphic.setStyle({
image: defaultImage,
@ -572,18 +651,16 @@
// 全部恢复默认
imageRestoreDefault();
// 飞行点
for (let i = 0; i < image_flightointGraphicData.length; i++) {
if (image_flightointGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
let flightointGraphic = image_flightointGraphicData[i];
for (let i = 0; i < flightointGraphicData.length; i++) {
if (flightointGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
let flightointGraphic = flightointGraphicData[i];
flightointGraphic.show = true;
}
}
// 地面点到展示图片的线
for (let i = 0; i < image_bottomImagePolylineGraphicData.length; i++) {
if (
image_bottomImagePolylineGraphicData[i].options.id.includes(props.nowShowImageData.id)
) {
let bottomImagePolylineGraphic = image_bottomImagePolylineGraphicData[i];
for (let i = 0; i < bottomImagePolylineGraphicData.length; i++) {
if (bottomImagePolylineGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
let bottomImagePolylineGraphic = bottomImagePolylineGraphicData[i];
let defaultPosition = bottomImagePolylineGraphic.options.defaultPosition;
let surfaceHeight = bottomImagePolylineGraphic.options.surfaceHeight;
bottomImagePolylineGraphic.setStyle({
@ -600,9 +677,9 @@
}
}
// 展示图片
for (let i = 0; i < image_imageGraphicData.length; i++) {
if (image_imageGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
let imageGraphic = image_imageGraphicData[i];
for (let i = 0; i < imageGraphicData.length; i++) {
if (imageGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
let imageGraphic = imageGraphicData[i];
let chooseImage = imageGraphic.options.chooseImage;
imageGraphic.setStyle({
image: chooseImage,
@ -652,73 +729,4 @@
width: 100%;
height: 100%;
}
.annotationButtons {
position: absolute;
display: flex;
flex-wrap: wrap;
top: 10%;
right: 1%;
width: 30px;
height: 123px;
gap: 1px;
}
.button_nochoose {
background: #ffffff;
z-index: 200;
width: 30px;
height: 30px;
// border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
border: 2px solid #2b85e4;
outline: 1px solid #2b85e4;
}
}
.button_choose {
background: linear-gradient(to bottom left, #2b85e4 10px, transparent 1px), #ffffff;
background-size:
100% 100%,
auto;
z-index: 200;
width: 30px;
height: 30px;
// border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
outline: 2px solid #2b85e4;
}
.popoverAnnotation {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.areaButtons {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 30%;
right: 1%;
width: 30px;
height: 30px;
}
.popoverArea {
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: 170px;
height: 35px;
}
</style>

280
src/views/demo/system/mediaLibrary/path/svg.ts
Unescape Escape View File

@ -1,271 +1,25 @@
export const line_start_cap_0 = `<svg
export const showOnMap_1 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
viewBox="0 0 24 24"
width="18"
height="18"
>
<g>
<g>
<path
d="M44,9L4,9L4,7L44,7L44,9Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
</g>
<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>`;
export const line_start_cap_1 = `<svg
export const showOnMap_0 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
viewBox="0 0 24 24"
width="18"
height="18"
>
<g>
<g>
<path
d="M14.0459,2.2L4,8L14.0459,13.8L14.0459,9L44,9L44,7L14.0459,7L14.0459,2.2Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
</g>
</svg>`;
export const line_start_cap_2 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
>
<g>
<g>
<g>
<path
d="M44,9L4,9L4,7L44,7L44,9Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
<g>
<rect
x="4"
y="4"
width="2"
height="8"
rx="0"
fill="#000000"
fill-opacity="1"
/>
</g>
</g>
</g>
</svg>`;
export const line_start_cap_3 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
>
<g>
<g>
<g>
<path
d="M44,9L5.5,9L5.5,7L44,7L44,9Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
<g>
<ellipse cx="7" cy="8" rx="3" ry="3" fill="#000000" fill-opacity="1" />
</g>
</g>
</g>
</svg>`;
export const line_end_cap_0 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
>
<g>
<g>
<path
d="M44,9L4,9L4,7L44,7L44,9Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
</g>
</svg>`;
export const line_end_cap_1 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
>
<g>
<g>
<path
d="M33.9541,13.8L44,8L33.9541,2.2L33.9541,7L4,7L4,9L33.9541,9L33.9541,13.8Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
</g>
</svg>`;
export const line_end_cap_2 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
>
<g>
<g>
<g>
<path
d="M44,9L4,9L4,7L44,7L44,9Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
<g>
<rect
x="42"
y="4"
width="2"
height="8"
rx="0"
fill="#000000"
fill-opacity="1"
/>
</g>
</g>
</g>
</svg>`;
export const line_end_cap_3 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="36"
height="12"
viewBox="0 0 48 16"
>
<g>
<g>
<g>
<path
d="M43.5,9L4,9L4,7L43.5,7L43.5,9Z"
fill-rule="evenodd"
fill="#000000"
fill-opacity="1"
/>
</g>
<g>
<ellipse cx="41" cy="8" rx="3" ry="3" fill="#000000" fill-opacity="1" />
</g>
</g>
</g>
</svg>`;
export const circle = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="48"
height="48"
viewBox="0 0 512 512"
>
<path d="M256 8C119 8 8 119 8 256s111 248 248 248s248-111 248-248S393 8 256 8z" fill="#000000">
</path>
</svg>`;
export const rect = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="48"
height="48"
viewBox="0 0 512 512">
<path d="M2 4h20v16H2z" fill="#000000">
</path>
</svg>`;
export const triangle = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="48"
height="48"
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>
</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>`;
<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>`;

2
src/views/demo/system/mediaLibrary/preview/previewImage.vue
Unescape Escape View File

@ -1144,7 +1144,7 @@
.imageList {
display: inline-flex;
// align-items: center;
align-items: center;
// justify-content: center;
width: 900px;
height: 65px;

8
src/views/demo/workmanagement/ceshi/index.vue
Unescape Escape View File

@ -6,7 +6,8 @@
<a-button @click="endRecording">结束录像</a-button>
<a-button @click="liveStreamPlugin.disposeSDK">释放资源</a-button>
<a-button @click="getTask">获取航线任务</a-button>
<a-button @click="viewLive">展示视频直播</a-button>
<a-button @click="viewLive">展示机场直播</a-button>
<a-button @click="uavLive">展示无人机直播</a-button>
<a-button @click="takePhoto">拍照</a-button>
<div id="live-div"> </div>
</div>
@ -20,7 +21,7 @@
liveStreamPlugin.startLiveStreamCall('8UUXN5400A079H', 1);
};
const startUAV = () => {
liveStreamPlugin.startLiveStreamCall('1581F8HGX254V00A0BUY', 0);
liveStreamPlugin.startLiveStreamCall('8UUXN5400A079H', 0);
};
const startRecording = () => {
liveStreamPlugin.startVideoRecording();
@ -39,6 +40,9 @@
console.log(document.getElementById('live-div'));
liveStreamPlugin.setLiveStreamControl(document.getElementById('live-div'), '1');
};
const uavLive = () => {
liveStreamPlugin.setLiveStreamControl(document.getElementById('live-div'), '0');
};
const takePhoto = () => {
liveStreamPlugin.takePicture((res) => {
console.log(res);

2
src/views/demo/workmanagement/device/Aerocraft/index.vue
Unescape Escape View File

@ -134,7 +134,7 @@ const delDate = (record) => {
const exportDevice = () => {
ExportDevice().then(res => {
const elink = document.createElement('a');
elink.download = '飞行器信息.xlsx';
elink.download = '飞行器信息.txt';
elink.style.display = 'none';
elink.href = URL.createObjectURL(res);
document.body.appendChild(elink);

9
src/views/demo/workmanagement/device/Airport/DeviceWarning/index.vue
Unescape Escape View File

@ -49,8 +49,13 @@ const [registerTable, { reload, expandAll, getForm}] = useTable({
// 显示表格设置工具
showTableSetting: true,
bordered: true,
beforeFetch(data) {
return data
beforeFetch(params) {
if(params.time){
params.startTime = params.time[0]
params.endTime = params.time[1]
}
params.time = null
return params
},
afterFetch(data) {
},

1
src/views/demo/workmanagement/flightannotation/pathMap.vue
Unescape Escape View File

@ -116,7 +116,6 @@
import { ref, watch, onMounted, defineEmits } from 'vue';
import * as mars3d from 'mars3d';
import * as Cesium from 'mars3d-cesium';
import { circle, rect, triangle } from './svg';
import {
CheckOutlined,
AntDesignOutlined,

6
src/views/demo/workmanagement/flightoperation/src/AirportLive.vue
Unescape Escape View File

@ -120,11 +120,7 @@
// tid: buildGUID(),
// timestamp: new Date().getTime(),
// data: {
// air_transfer_enable: 1,
// cameras: {
// zoom_factor: 2,
// ir_zoom_factor: 2,
// },
// air_transfer_enable: true,
// },
// };
// console.log(querys);

2
src/views/demo/workmanagement/flightoperation/src/FlightControl.vue
Unescape Escape View File

@ -550,7 +550,7 @@
}
} else {
drc_eart_beat();
createMessage.error('DRC连接失败，' + errorName(rs.data.result));
createMessage.error('DRC连接中断，' + errorName(rs.data.result) + ',正在重新连接');
}
}
// 指点飞行

Write Preview
Loading…
Cancel
Save