merge
commit
f6f330c0b6
|
|
@ -35,13 +35,13 @@
|
|||
<!--播放器脚本文件-->
|
||||
<script src="https://tcsdk.com/player/tcplayer/release/v5.3.2/tcplayer.v5.3.2.min.js"></script>
|
||||
<!-- 引入海康插件内容 -->
|
||||
<script type="text/javascript" src="./public/monitor/monitorHK/jquery-1.12.4.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="./public/monitor/monitorHK/jquery-1.12.4.min.js"></script>
|
||||
<script type="text/javascript" src="./public/monitor/monitorHK/jsencrypt.min.js"></script>
|
||||
<script type="text/javascript" src="./public/monitor/monitorHK/jsWebControl-1.0.0.min.js"></script>
|
||||
<script type="text/javascript" src="./public/monitor/monitorHK/jsWebControl-1.0.0.min.js"></script> -->
|
||||
<!-- 引入乐橙插件内容 -->
|
||||
<script type="text/javascript" src="./public/monitor/monitorLC/imouPlayer.js"></script>
|
||||
<!-- <script type="text/javascript" src="./public/monitor/monitorLC/imouPlayer.js"></script> -->
|
||||
<!-- 引入青犀插件内容 -->
|
||||
<script type="text/javascript" src="./public/monitor/monitorQX/EasyPlayer-element.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="./public/monitor/monitorQX/EasyPlayer-element.min.js"></script> -->
|
||||
<!-- 引入大华算法 -->
|
||||
<link rel="stylesheet" href="./public/smartJs/css/layui.css">
|
||||
<link rel="stylesheet" href="./public/smartJs/theme.css">
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@
|
|||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url1": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103334_0034_V.jpeg",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url2": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103332_0033_V.jpeg",
|
||||
"imageJson": []
|
||||
},
|
||||
{
|
||||
|
|
@ -33,13 +33,13 @@
|
|||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url1": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103329_0032_V.jpeg",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url2": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103328_0031_V.jpeg",
|
||||
"imageJson": []
|
||||
},
|
||||
{
|
||||
|
|
@ -49,13 +49,13 @@
|
|||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url1": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103327_0029_V.jpeg",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url2": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103327_0030_V.jpeg",
|
||||
"imageJson": []
|
||||
}
|
||||
]
|
||||
|
|
@ -75,13 +75,13 @@
|
|||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url1": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103321_0028_V.jpeg",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url2": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103318_0027_V.jpeg",
|
||||
"imageJson": []
|
||||
}
|
||||
]
|
||||
|
|
@ -101,13 +101,13 @@
|
|||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url1": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103327_0029_V.jpeg",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"url2": "9767119c-db8b-44c0-9b3b-b6606993a2c7/d6357171-fe12-410f-8f19-3f84e719503a/DJI_202508151031_002_d6357171-fe12-410f-8f19-3f84e719503a/DJI_20250815103327_0030_V.jpeg",
|
||||
"imageJson": []
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
ref="mouseCanvasRef_1"
|
||||
class="dragModal_1"
|
||||
@wheel="onWheel"
|
||||
@mousedown="onMouseDown($event, '1')"
|
||||
@mousedown="onMouseDown($event, 1)"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
||||
transition: 'transform 0.2s',
|
||||
width: `100%`,
|
||||
height: `100%`,
|
||||
background: `url(${nowImageGroup?.url1}) no-repeat center center`,
|
||||
background: `url(${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + nowImageGroup?.url1}) no-repeat center center`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
>
|
||||
<!-- 文字标签 -->
|
||||
<div
|
||||
v-if="nowGraffiti == index || rect.text"
|
||||
v-if="nowGraffiti == index || (rect.text && rect.type == 'hand')"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: '0px',
|
||||
|
|
@ -128,6 +128,20 @@
|
|||
{{ rect.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="rect.text && rect.type == 'ai'"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: '0px',
|
||||
top: '-20px',
|
||||
width: '50px',
|
||||
height: 30 + 'px',
|
||||
background: '#ffffff00',
|
||||
color: rect.color,
|
||||
}"
|
||||
>
|
||||
{{ rect.text }}
|
||||
</div>
|
||||
<!-- 上 -->
|
||||
<div
|
||||
:style="{
|
||||
|
|
@ -136,13 +150,13 @@
|
|||
top: '0px',
|
||||
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
||||
height: '4px',
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'top')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'top')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'top', 1)"
|
||||
/>
|
||||
<!-- 下 -->
|
||||
<div
|
||||
|
|
@ -152,13 +166,13 @@
|
|||
bottom: `0px`,
|
||||
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
||||
height: '4px',
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'bottom')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'bottom')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'bottom', 1)"
|
||||
/>
|
||||
<!-- 右 -->
|
||||
<div
|
||||
|
|
@ -168,13 +182,13 @@
|
|||
top: rect.status == 'edit' ? '6px' : '0px',
|
||||
width: '4px',
|
||||
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'right')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'right')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'right', 1)"
|
||||
/>
|
||||
<!-- 左 -->
|
||||
<div
|
||||
|
|
@ -184,13 +198,13 @@
|
|||
top: rect.status == 'edit' ? '6px' : '0px',
|
||||
width: '4px',
|
||||
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'left')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'left')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'left', 1)"
|
||||
/>
|
||||
<!-- 左上 -->
|
||||
<div
|
||||
|
|
@ -205,7 +219,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'leftTop')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftTop')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftTop', 1)"
|
||||
/>
|
||||
<!-- 右下 -->
|
||||
<div
|
||||
|
|
@ -220,7 +234,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'rightBottom')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightBottom')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightBottom', 1)"
|
||||
/>
|
||||
<!-- 右上 -->
|
||||
<div
|
||||
|
|
@ -235,7 +249,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'rightTop')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightTop')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightTop', 1)"
|
||||
/>
|
||||
<!-- 左下 -->
|
||||
<div
|
||||
|
|
@ -250,7 +264,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'leftBottom')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftBottom')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftBottom', 1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -262,14 +276,14 @@
|
|||
ref="mouseCanvasRef_2"
|
||||
class="dragModal_2"
|
||||
@wheel="onWheel"
|
||||
@mousedown="onMouseDown($event, '2')"
|
||||
@mousedown="onMouseDown($event, 2)"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
||||
transition: 'transform 0.2s',
|
||||
width: `100%`,
|
||||
height: `100%`,
|
||||
background: `url(${nowImageGroup?.url2}) no-repeat center center`,
|
||||
background: `url(${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + nowImageGroup?.url2}) no-repeat center center`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
|
|
@ -391,13 +405,13 @@
|
|||
top: '0px',
|
||||
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
||||
height: '4px',
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'top')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'top')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'top', 2)"
|
||||
/>
|
||||
<!-- 下 -->
|
||||
<div
|
||||
|
|
@ -407,13 +421,13 @@
|
|||
bottom: `0px`,
|
||||
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
||||
height: '4px',
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'bottom')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'bottom')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'bottom', 2)"
|
||||
/>
|
||||
<!-- 右 -->
|
||||
<div
|
||||
|
|
@ -423,13 +437,13 @@
|
|||
top: rect.status == 'edit' ? '6px' : '0px',
|
||||
width: '4px',
|
||||
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'right')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'right')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'right', 2)"
|
||||
/>
|
||||
<!-- 左 -->
|
||||
<div
|
||||
|
|
@ -439,13 +453,13 @@
|
|||
top: rect.status == 'edit' ? '6px' : '0px',
|
||||
width: '4px',
|
||||
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
||||
background: `${rect.color}`,
|
||||
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
||||
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
||||
}"
|
||||
@mouseenter="mouseenter(rect, 'left')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
||||
@mousedown="funMouseDownEdit($event, index, 'left')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'left', 2)"
|
||||
/>
|
||||
<!-- 左上 -->
|
||||
<div
|
||||
|
|
@ -460,7 +474,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'leftTop')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftTop')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftTop', 2)"
|
||||
/>
|
||||
<!-- 右下 -->
|
||||
<div
|
||||
|
|
@ -475,7 +489,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'rightBottom')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightBottom')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightBottom', 2)"
|
||||
/>
|
||||
<!-- 右上 -->
|
||||
<div
|
||||
|
|
@ -490,7 +504,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'rightTop')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightTop')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'rightTop', 2)"
|
||||
/>
|
||||
<!-- 左下 -->
|
||||
<div
|
||||
|
|
@ -505,7 +519,7 @@
|
|||
}"
|
||||
@mouseenter="mouseenter(rect, 'leftBottom')"
|
||||
@mouseleave="mouseleave(rect)"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftBottom')"
|
||||
@mousedown="funMouseDownEdit($event, index, 'leftBottom', 2)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -521,10 +535,20 @@
|
|||
<LeftOutlined @click="clickLeftOrRightButton('left')" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="button">
|
||||
{{ nowImageGroupIndex }}
|
||||
<div :class="inputFlag ? 'buttonInput' : 'button'">
|
||||
<span v-if="!inputFlag" style="width: 100px" @click="focusInput">
|
||||
{{ nowImageGroupIndex }}
|
||||
</span>
|
||||
<a-input
|
||||
ref="inputRef"
|
||||
v-if="inputFlag"
|
||||
v-model:value="nowImageGroupIndex"
|
||||
style="width: 46px"
|
||||
@blur="blurInput"
|
||||
@keypress.enter="blurInput"
|
||||
/>
|
||||
/
|
||||
{{ nowRecord.imageGroup.length }}
|
||||
{{ props.nowRecord.imageGroup.length }}
|
||||
</div>
|
||||
<!-- 下一个 -->
|
||||
<div class="button">
|
||||
|
|
@ -581,36 +605,24 @@
|
|||
<RedoOutlined @click="refresh" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 锁定 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>锁定</span>
|
||||
</template>
|
||||
<LockOutlined @click="lockOut" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 解锁 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>解锁</span>
|
||||
</template>
|
||||
<UnlockOutlined @click="unlockOut" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<span style="color: gray; margin-left: 5px; margin-right: 5px">|</span>
|
||||
<span style="color: gray; margin-left: 5px; margin-right: 5px" v-if="props.isEdit">|</span>
|
||||
<!-- 涂鸦标记 -->
|
||||
<div class="button">
|
||||
<div class="button" v-if="props.isEdit">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>涂鸦标记</span>
|
||||
<span> {{ graffitiFlag ? '关闭手动涂鸦标记' : '开启手动涂鸦标记' }}</span>
|
||||
</template>
|
||||
<EditOutlined @click="setGraffiti" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出涂鸦 -->
|
||||
<div class="escTip" v-if="graffitiFlag">
|
||||
<div class="whiteEsc">Esc</div>
|
||||
<div class="blackTip">退出涂鸦</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -624,8 +636,6 @@
|
|||
EditOutlined,
|
||||
FontColorsOutlined,
|
||||
RedoOutlined,
|
||||
LockOutlined,
|
||||
UnlockOutlined,
|
||||
CloseOutlined,
|
||||
ExportOutlined,
|
||||
DownloadOutlined,
|
||||
|
|
@ -638,11 +648,40 @@
|
|||
ExpandOutlined,
|
||||
CompressOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
|
||||
|
||||
const props = defineProps(['recordList', 'nowRecord']);
|
||||
const emit = defineEmits(['']);
|
||||
const props = defineProps(['recordList', 'nowRecord', 'groupIndex', 'isEdit', 'graffitiColor']);
|
||||
const emits = defineEmits(['chooseNowImageGroup']);
|
||||
|
||||
watch(
|
||||
() => props.isEdit,
|
||||
() => {
|
||||
if (!props.isEdit) {
|
||||
refresh();
|
||||
graffitiFlag.value = false;
|
||||
document.body.style.cursor = 'pointer';
|
||||
}
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => props.groupIndex,
|
||||
() => {
|
||||
refresh();
|
||||
nowImageGroupIndex.value = props.groupIndex;
|
||||
nowImageGroup.value = props.nowRecord.imageGroup[props.groupIndex - 1];
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => props.graffitiColor,
|
||||
() => {},
|
||||
);
|
||||
|
||||
function chooseNowImageGroup(index) {
|
||||
emits('chooseNowImageGroup', index);
|
||||
}
|
||||
|
||||
// 当前图片组-----------------------------------
|
||||
const nowImageGroup: any = ref();
|
||||
|
|
@ -657,20 +696,25 @@
|
|||
if (direction == 'left') {
|
||||
if (index == 0) {
|
||||
nowImageGroup.value = imageGroupList[imageGroupList.length - 1];
|
||||
chooseNowImageGroup(imageGroupList.length);
|
||||
} else {
|
||||
nowImageGroup.value = imageGroupList[index - 1];
|
||||
chooseNowImageGroup(index);
|
||||
}
|
||||
}
|
||||
if (direction == 'right') {
|
||||
if (index == imageGroupList.length - 1) {
|
||||
nowImageGroup.value = imageGroupList[0];
|
||||
chooseNowImageGroup(1);
|
||||
} else {
|
||||
nowImageGroup.value = imageGroupList[index + 1];
|
||||
chooseNowImageGroup(index + 2);
|
||||
}
|
||||
}
|
||||
getNowImageGroup();
|
||||
}
|
||||
}
|
||||
getNowImageGroup();
|
||||
refresh();
|
||||
}
|
||||
// 当前图片组的索引
|
||||
function getNowImageGroup() {
|
||||
|
|
@ -692,7 +736,34 @@
|
|||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
// -----------------------------------------------
|
||||
const inputFlag = ref(false);
|
||||
const inputRef = ref();
|
||||
// input鼠标聚焦
|
||||
function focusInput() {
|
||||
inputFlag.value = true;
|
||||
nextTick(() => {
|
||||
if (inputRef.value && inputRef.value.focus) {
|
||||
inputRef.value.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
// input鼠标聚焦后离开or点击Enter
|
||||
function blurInput() {
|
||||
inputFlag.value = false;
|
||||
// 检测是否是数字
|
||||
if (/^-?\d+(\.\d+)?$/.test(nowImageGroupIndex.value.toString())) {
|
||||
if (parseInt(nowImageGroupIndex.value) > props.nowRecord.imageGroup.length) {
|
||||
nowImageGroupIndex.value = props.nowRecord.imageGroup.length;
|
||||
} else if (parseInt(nowImageGroupIndex.value) < 1) {
|
||||
nowImageGroupIndex.value = 1;
|
||||
}
|
||||
} else {
|
||||
nowImageGroupIndex.value = 1;
|
||||
}
|
||||
nowImageGroup.value = props.nowRecord.imageGroup[nowImageGroupIndex.value - 1];
|
||||
chooseNowImageGroup(nowImageGroupIndex.value);
|
||||
}
|
||||
// 缩放比例、旋转-----------------------------------
|
||||
const scale = ref(1);
|
||||
const rotationAngle = ref(0);
|
||||
|
|
@ -737,7 +808,6 @@
|
|||
|
||||
// 设置画笔---------------------------------------------------------------
|
||||
const graffitiFlag = ref(false);
|
||||
const graffitiColor = ref('#E23C39');
|
||||
const nowGraffiti = ref(-1);
|
||||
const nowMouseGraffiti = ref(0);
|
||||
// 设置鼠标格式
|
||||
|
|
@ -769,7 +839,7 @@
|
|||
// 所有已创建的矩形
|
||||
const graffitis: any = ref([]);
|
||||
const graffitisClone: any = ref([]);
|
||||
let comparisoNnum = '';
|
||||
let comparisoNnum = 0;
|
||||
const mouseCanvasRef_1 = ref();
|
||||
const mouseCanvasRef_2 = ref();
|
||||
|
||||
|
|
@ -785,7 +855,7 @@
|
|||
comparisoNnum = num;
|
||||
// 获取相对于容器的坐标
|
||||
const rect =
|
||||
comparisoNnum == '1'
|
||||
comparisoNnum == 1
|
||||
? mouseCanvasRef_1.value.getBoundingClientRect()
|
||||
: mouseCanvasRef_2.value.getBoundingClientRect();
|
||||
startX = event.x - rect.x;
|
||||
|
|
@ -797,7 +867,7 @@
|
|||
y: startY,
|
||||
width: 0,
|
||||
height: 0,
|
||||
color: graffitiColor.value,
|
||||
color: props.graffitiColor != '#ffffff' ? props.graffitiColor : '#E23C39',
|
||||
text: '',
|
||||
status: 'edit',
|
||||
type: 'hand',
|
||||
|
|
@ -828,7 +898,7 @@
|
|||
function onMouseMoveGraffit(event) {
|
||||
// 涂鸦
|
||||
const rect =
|
||||
comparisoNnum == '1'
|
||||
comparisoNnum == 1
|
||||
? mouseCanvasRef_1.value.getBoundingClientRect()
|
||||
: mouseCanvasRef_2.value.getBoundingClientRect();
|
||||
if (!isDragging.value) return;
|
||||
|
|
@ -845,7 +915,7 @@
|
|||
// 涂鸦
|
||||
if (!isDragging.value) return;
|
||||
const rect =
|
||||
comparisoNnum == '1'
|
||||
comparisoNnum == 1
|
||||
? mouseCanvasRef_1.value.getBoundingClientRect()
|
||||
: mouseCanvasRef_2.value.getBoundingClientRect();
|
||||
endX = event.x - rect.x;
|
||||
|
|
@ -900,6 +970,18 @@
|
|||
graffitis.value[graffitis.value.length - 1].height = Math.abs(endY - startY);
|
||||
}
|
||||
|
||||
// 添加保存涂鸦
|
||||
function addGraffiti() {
|
||||
// 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('handleSuccessPreview');
|
||||
// });
|
||||
}
|
||||
// 删除鼠标涂鸦
|
||||
function deleteGraffiti(index = undefined, value = undefined) {
|
||||
graffitis.value.splice(index, 1);
|
||||
|
|
@ -917,6 +999,151 @@
|
|||
scale.value -= 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------
|
||||
// 鼠标聚焦
|
||||
function mouseenter(rect, type) {
|
||||
if (graffitiFlag.value) {
|
||||
// 鼠标聚焦状态
|
||||
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 (graffitiFlag.value) {
|
||||
if (rect.status == 'mouse' || rect.status == 'edit') {
|
||||
if (rect.status == 'mouse') {
|
||||
rect.status = 'success';
|
||||
}
|
||||
if (rect.status == 'edit') {
|
||||
document.body.style.cursor = 'crosshair';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 编辑状态下的鼠标按下
|
||||
const mouseEditType = ref('');
|
||||
function funMouseDownEdit(e, index, type, num) {
|
||||
if (graffitiFlag.value) {
|
||||
// 获取相对于容器的坐标
|
||||
graffitisClone.value = cloneDeep(graffitis.value);
|
||||
comparisoNnum = num;
|
||||
// 获取相对于容器的坐标
|
||||
const rect =
|
||||
comparisoNnum == 1
|
||||
? mouseCanvasRef_1.value.getBoundingClientRect()
|
||||
: mouseCanvasRef_2.value.getBoundingClientRect();
|
||||
startX = e.x - rect.x;
|
||||
startY = e.y - rect.y;
|
||||
isDragging.value = true;
|
||||
nowGraffiti.value = index;
|
||||
mouseEditType.value = type;
|
||||
window.addEventListener('mousemove', funMouseMoveEdit);
|
||||
window.addEventListener('mouseup', funMouseUpEdit);
|
||||
}
|
||||
}
|
||||
// 编辑状态下的鼠标移动
|
||||
function funMouseMoveEdit(e) {
|
||||
if (graffitiFlag.value) {
|
||||
const rect =
|
||||
comparisoNnum == 1
|
||||
? mouseCanvasRef_1.value.getBoundingClientRect()
|
||||
: mouseCanvasRef_2.value.getBoundingClientRect();
|
||||
if (!isDragging.value) return;
|
||||
endX = e.x - rect.x;
|
||||
endY = e.y - rect.y;
|
||||
if (endX < 0 && endY < 0) {
|
||||
endX = startX;
|
||||
endY = startY;
|
||||
}
|
||||
funSetMouseDataEdit();
|
||||
}
|
||||
}
|
||||
// 编辑状态下的鼠标松开
|
||||
function funMouseUpEdit(e) {
|
||||
if (graffitiFlag.value) {
|
||||
if (!isDragging.value) return;
|
||||
const rect =
|
||||
comparisoNnum == 1
|
||||
? mouseCanvasRef_1.value.getBoundingClientRect()
|
||||
: mouseCanvasRef_2.value.getBoundingClientRect();
|
||||
endX = e.x - rect.x;
|
||||
endY = e.y - rect.y;
|
||||
if (endX < 0 && endY < 0) {
|
||||
endX = startX;
|
||||
endY = startY;
|
||||
}
|
||||
isDragging.value = false;
|
||||
if (e.x > rect.right || e.y > rect.bottom) {
|
||||
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
|
||||
} else {
|
||||
funSetMouseDataEdit();
|
||||
}
|
||||
window.removeEventListener('mousemove', funMouseMoveEdit);
|
||||
window.removeEventListener('mouseup', funMouseUpEdit);
|
||||
}
|
||||
}
|
||||
// 编辑状态下的数据
|
||||
function funSetMouseDataEdit() {
|
||||
if (['top', 'leftTop', 'rightTop'].includes(mouseEditType.value)) {
|
||||
graffitis.value[nowGraffiti.value].height =
|
||||
graffitis.value[nowGraffiti.value].height + graffitis.value[nowGraffiti.value].y - endY;
|
||||
graffitis.value[nowGraffiti.value].y = endY;
|
||||
}
|
||||
if (['bottom', 'leftBottom', 'rightBottom'].includes(mouseEditType.value)) {
|
||||
graffitis.value[nowGraffiti.value].height = endY - graffitis.value[nowGraffiti.value].y;
|
||||
}
|
||||
if (['left', 'leftTop', 'leftBottom'].includes(mouseEditType.value)) {
|
||||
graffitis.value[nowGraffiti.value].width =
|
||||
graffitis.value[nowGraffiti.value].width + graffitis.value[nowGraffiti.value].x - endX;
|
||||
graffitis.value[nowGraffiti.value].x = endX;
|
||||
}
|
||||
if (['right', 'rightTop', 'rightBottom'].includes(mouseEditType.value)) {
|
||||
graffitis.value[nowGraffiti.value].width = endX - graffitis.value[nowGraffiti.value].x;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加键盘事件监听器
|
||||
const addEventListener = () => {
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
};
|
||||
// 移除键盘事件监听器
|
||||
const removeEventListener = () => {
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
};
|
||||
// 处理按键按下事件
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (event.code === 'Escape' && graffitiFlag.value) {
|
||||
setGraffiti();
|
||||
}
|
||||
};
|
||||
|
||||
// 在组件挂载时添加监听器
|
||||
onMounted(() => {
|
||||
addEventListener();
|
||||
});
|
||||
// 在组件卸载时移除监听器
|
||||
onBeforeUnmount(() => {
|
||||
removeEventListener();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.imageDiv_ {
|
||||
|
|
@ -1005,6 +1232,12 @@
|
|||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.buttonInput {
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1016,4 +1249,38 @@
|
|||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
// 退出涂鸦
|
||||
.escTip {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
bottom: 120px;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background: #9c9c9c77;
|
||||
border-radius: 5px;
|
||||
z-index: 1001;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.whiteEsc {
|
||||
height: 30px;
|
||||
background: #ffffff;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blackTip {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,9 @@
|
|||
<RecordListEditInfo
|
||||
v-if="status == 2"
|
||||
:nowRecord="nowRecord"
|
||||
:groupIndex="groupIndex"
|
||||
@chooseNowImageGroup="chooseNowImageGroup"
|
||||
@chooseGraffitiColor="chooseGraffitiColor"
|
||||
@restoreListStatus="restoreListStatus"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -43,14 +46,21 @@
|
|||
width: typeOpen ? 'calc(100% - 360px)' : '100%',
|
||||
}"
|
||||
>
|
||||
<ImageContrast :recordList="recordList" :nowRecord="nowRecord" :isEdit="isEdit" />
|
||||
<ImageContrast
|
||||
:recordList="recordList"
|
||||
:nowRecord="nowRecord"
|
||||
:groupIndex="groupIndex"
|
||||
:graffitiColor="graffitiColor"
|
||||
:isEdit="isEdit"
|
||||
@chooseNowImageGroup="chooseNowImageGroup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { LeftOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { LeftOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
|
||||
import { RecordList, RecordNewBuild, RecordListEditInfo, ImageContrast } from './comparison';
|
||||
import datajson from './data.json';
|
||||
|
||||
|
|
@ -69,6 +79,21 @@
|
|||
}
|
||||
|
||||
const recordList = ref(datajson);
|
||||
onMounted(() => {
|
||||
recordList.value = datajson;
|
||||
// datajson.forEach(item => {
|
||||
// let templist: any;
|
||||
// if(item.imageGroup && item.imageGroup.length > 0){
|
||||
// let temp: any;
|
||||
// item.imageGroup.forEach(g => {
|
||||
// temp = {
|
||||
// ...g,
|
||||
// imageJson: JSON.parse(g.imageJson),
|
||||
// };
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
});
|
||||
const nowRecord = ref(recordList.value[0]);
|
||||
// 0：列表、1：新建、2：编辑
|
||||
const status = ref(0);
|
||||
|
|
@ -95,6 +120,17 @@
|
|||
status.value = 0;
|
||||
isEdit.value = false;
|
||||
}
|
||||
|
||||
// 当前图片组的索引
|
||||
const groupIndex = ref(1);
|
||||
function chooseNowImageGroup(index) {
|
||||
groupIndex.value = index;
|
||||
}
|
||||
// 颜色
|
||||
const graffitiColor = ref('');
|
||||
function chooseGraffitiColor(color) {
|
||||
graffitiColor.value = color;
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.comparisonModal {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
background: color,
|
||||
border: `1px solid #000000`,
|
||||
}"
|
||||
@click="graffitiColor = color"
|
||||
@click="chooseGraffitiColor(color)"
|
||||
>
|
||||
<CheckOutlined v-if="graffitiColor == color" style="color: white" />
|
||||
</div>
|
||||
|
|
@ -115,12 +115,33 @@
|
|||
:scroll="{ y: 400 }"
|
||||
>
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'handNum'">
|
||||
<span> {{ column.title }} <InfoCircleOutlined /> </span>
|
||||
</template>
|
||||
<div
|
||||
:style="{
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
'align-items': 'center',
|
||||
'justify-content': 'center',
|
||||
}"
|
||||
>
|
||||
<template v-if="column.key === 'handNum'">
|
||||
<span> {{ column.title }} <InfoCircleOutlined /> </span>
|
||||
</template>
|
||||
<template v-if="column.key !== 'handNum'">
|
||||
<span> {{ column.title }} </span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<div @click="chooseRecord(record)">
|
||||
<div
|
||||
@click="chooseNowImageGroup(record)"
|
||||
:style="{
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
'align-items': 'center',
|
||||
'justify-content': 'center',
|
||||
background: props.groupIndex == record.index ? '#0F5EA1' : '',
|
||||
}"
|
||||
>
|
||||
<template v-if="column.key === 'index'">
|
||||
<span> {{ record.index }}</span>
|
||||
</template>
|
||||
|
|
@ -162,18 +183,20 @@
|
|||
RightOutlined,
|
||||
BgColorsOutlined,
|
||||
InfoCircleOutlined,
|
||||
CheckOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
const props = defineProps(['nowRecord']);
|
||||
const emits = defineEmits(['restoreListStatus', 'chooseGraffitiColor', 'chooseRecord']);
|
||||
const props = defineProps(['nowRecord', 'groupIndex']);
|
||||
const emits = defineEmits(['restoreListStatus', 'chooseGraffitiColor', 'chooseNowImageGroup']);
|
||||
|
||||
const graffitiColor = ref('#ffffff');
|
||||
|
||||
function chooseGraffitiColor() {
|
||||
function chooseGraffitiColor(color) {
|
||||
graffitiColor.value = color;
|
||||
emits('chooseGraffitiColor', graffitiColor.value);
|
||||
}
|
||||
|
||||
function chooseRecord(record) {
|
||||
emits('chooseRecord', record);
|
||||
function chooseNowImageGroup(nowImageGroup) {
|
||||
emits('chooseNowImageGroup', nowImageGroup.index);
|
||||
}
|
||||
|
||||
// 关闭
|
||||
|
|
@ -402,4 +425,9 @@
|
|||
background: #3c3c3c !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
::v-deep .ant-table-cell {
|
||||
padding: 0px !important;
|
||||
// height: 48px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,23 +20,22 @@
|
|||
<a-button :icon="h(PlusOutlined)" @click="addFolder"> 新建文件夹 </a-button>
|
||||
<a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
|
||||
<a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
|
||||
<a-button
|
||||
:icon="h(DownloadOutlined)"
|
||||
:loading="downloadAloneLoading"
|
||||
@click="downloadAloneFile"
|
||||
>
|
||||
单独下载
|
||||
</a-button>
|
||||
<a-popover trigger="hover">
|
||||
<template #content>
|
||||
<div v-if="!downloadZipLoading">
|
||||
选择下载的文件/文件夹，压缩下载成一个压缩包文件
|
||||
单个下载：单独下载非文件夹的文件<br />
|
||||
批量下载：选择下载文件/文件夹，压缩后下载
|
||||
</div>
|
||||
<div v-if="downloadZipLoading">
|
||||
<a-progress
|
||||
type="circle"
|
||||
:percent="downloadZipPercent"
|
||||
:format="(downloadZipPercent) => `下载中\n${downloadZipPercent}%`"
|
||||
:format="
|
||||
(downloadZipPercent) =>
|
||||
downloadZipPercent == 100
|
||||
? `下载完成\n${downloadZipPercent}%`
|
||||
: `压缩中\n${downloadZipPercent}%`
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -45,7 +44,7 @@
|
|||
:loading="downloadZipLoading"
|
||||
@click="downloadZipOpenMoadl"
|
||||
>
|
||||
批量下载
|
||||
下载
|
||||
</a-button>
|
||||
</a-popover>
|
||||
<a-radio-group v-model:value="tableType">
|
||||
|
|
@ -836,44 +835,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
// 单独下载
|
||||
const downloadAloneLoading = ref(false);
|
||||
async function downloadAloneFile() {
|
||||
// 获得所选
|
||||
let rows = getSelectRows();
|
||||
if (tableType.value == 'store') {
|
||||
rows = showTableData.value.filter((item) => item.checked);
|
||||
}
|
||||
if (rows.length != 1) {
|
||||
return createMessage.warn('请选择一个文件进行下载');
|
||||
}
|
||||
if (!rows[0].objectKey) {
|
||||
return createMessage.warn('单独下载只能下载非文件夹的文件');
|
||||
}
|
||||
try {
|
||||
downloadAloneLoading.value = true;
|
||||
const response = await fetch(VITE_GLOB_MEDIALIBRARY_IMAGE_URL + rows[0].objectKey, {
|
||||
mode: 'cors',
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const blob = await response.blob();
|
||||
const urlObject = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = urlObject;
|
||||
link.download = rows[0].name || 'download';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(urlObject);
|
||||
} catch (error) {
|
||||
console.error('Error downloading image:', error);
|
||||
} finally {
|
||||
downloadAloneLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 压缩窗口
|
||||
const downloadZipOpen = ref(false);
|
||||
const downloadZipLoading = ref(false);
|
||||
|
|
@ -883,7 +844,7 @@
|
|||
let downloadRows: any = [];
|
||||
const zipFileName = ref('');
|
||||
// 批量下载-窗口
|
||||
function downloadZipOpenMoadl() {
|
||||
async function downloadZipOpenMoadl() {
|
||||
// 获得所选
|
||||
let rows = getSelectRows();
|
||||
if (tableType.value == 'store') {
|
||||
|
|
@ -892,15 +853,44 @@
|
|||
if (rows.length == 0) {
|
||||
return createMessage.warn('请选择一个或者多个文件/文件夹进行下载');
|
||||
}
|
||||
zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
if (floders.value.length > 1) {
|
||||
zipFileName.value = floders.value[floders.value.length - 1].name;
|
||||
if (rows.length == 1 && rows[0].objectKey) {
|
||||
// 单个文件下载
|
||||
try {
|
||||
downloadZipLoading.value = true;
|
||||
downloadZipPercent.value = 0;
|
||||
const response = await fetch(VITE_GLOB_MEDIALIBRARY_IMAGE_URL + rows[0].objectKey, {
|
||||
mode: 'cors',
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const blob = await response.blob();
|
||||
const urlObject = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = urlObject;
|
||||
link.download = rows[0].name || 'download';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(urlObject);
|
||||
} catch (error) {
|
||||
console.error('Error downloading image:', error);
|
||||
} finally {
|
||||
downloadZipLoading.value = false;
|
||||
downloadZipPercent.value = 100;
|
||||
}
|
||||
} else {
|
||||
// 多个文件or文件夹下载
|
||||
zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
if (floders.value.length > 1) {
|
||||
zipFileName.value = floders.value[floders.value.length - 1].name;
|
||||
}
|
||||
if (rows.length == 1 && !rows[0].objectKey) {
|
||||
zipFileName.value = rows[0].name;
|
||||
}
|
||||
downloadRows = rows;
|
||||
downloadZipOpen.value = true;
|
||||
}
|
||||
if (rows.length == 1 && !rows[0].objectKey) {
|
||||
zipFileName.value = rows[0].name;
|
||||
}
|
||||
downloadRows = rows;
|
||||
downloadZipOpen.value = true;
|
||||
}
|
||||
// 批量下载-下载
|
||||
async function downloadZipFile() {
|
||||
|
|
@ -909,6 +899,7 @@
|
|||
}
|
||||
downloadZipOpen.value = false;
|
||||
downloadZipLoading.value = true;
|
||||
downloadZipPercent.value = 0;
|
||||
getFileList(downloadRows).then(async (res) => {
|
||||
let filelist: any = res;
|
||||
const token = localStorage.getItem('X-Token');
|
||||
|
|
|
|||
|
|
@ -1554,7 +1554,7 @@
|
|||
.escTip {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
bottom: 120px;
|
||||
bottom: 0px;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background: #9c9c9c77;
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@
|
|||
const imageOptions: any = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '可见光照片',
|
||||
label: '可见光',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@
|
|||
let imageType = '';
|
||||
switch (type) {
|
||||
case 1:
|
||||
imageType = '可见光照片';
|
||||
imageType = '可见光';
|
||||
break;
|
||||
case 2:
|
||||
imageType = '红外照片';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<div class="shade-container"></div>
|
||||
<div class="patrol-map" v-if="step == 1">
|
||||
<div class="title">绘制范围</div>
|
||||
<div class="title">绘制事件区域</div>
|
||||
<div class="map-container">
|
||||
<div class="map-container-content">
|
||||
<Map :drawArea="drawarea" @areaData="getAreaData" />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<!-- 地图 -->
|
||||
<div ref="vChartRef " :id="'mars3d-container_' + mapId" class="mars3d-container">
|
||||
<div ref="vChartRef " :id="'mars3d-container_' + mapId" class="mars3d-container">
|
||||
<!-- 航点航线 -->
|
||||
<div v-if="props.airLineForm.airLineType == 'waypoint'" v-show="props.editMode != 'detail'" class="air-container">
|
||||
<div
|
||||
v-if="props.airLineForm.airLineType == 'waypoint'"
|
||||
v-show="props.editMode != 'detail'"
|
||||
class="air-container"
|
||||
>
|
||||
<airPoint
|
||||
:airInfo="lineInfo"
|
||||
:editModel="props.editMode"
|
||||
|
|
@ -58,8 +62,8 @@
|
|||
<div class="info-item">
|
||||
<div class="info-value">46461m²</div>
|
||||
<div class="info-label">航线长度</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-value">34分钟</div>
|
||||
<div class="info-label">预计时间</div>
|
||||
</div>
|
||||
|
|
@ -76,10 +80,15 @@
|
|||
<div>关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 面绘制 -->
|
||||
<div class="draw-polygon-patrol" title="绘制面区域" v-if="props.drawArea" @click="handlerDrawPolygonPatrol">
|
||||
<EditOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineProps, watch, defineEmits } from 'vue';
|
||||
import { ref, onMounted, defineProps, watch, defineEmits, reactive } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||
import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||||
|
|
@ -88,9 +97,9 @@
|
|||
import * as mars3d from 'mars3d';
|
||||
import { EventBus } from '@/utils/eventBus';
|
||||
import { airPortStore } from '@/store/modules/airport';
|
||||
import { airPointActions } from '../waylineConfig/actionConfig'
|
||||
import { airPointActions } from '../waylineConfig/actionConfig';
|
||||
import 'mars3d-space';
|
||||
|
||||
import { EditOutlined } from '@ant-design/icons-vue';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
// import * as turf from '@turf/turf';
|
||||
import airPolygon from './airPolygon.vue';
|
||||
|
|
@ -264,6 +273,11 @@
|
|||
type: Object,
|
||||
},
|
||||
});
|
||||
const centerObj = reactive({
|
||||
lat: 260.9,
|
||||
heading: 357.9,
|
||||
pitch: -32,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.editMode,
|
||||
|
|
@ -275,8 +289,10 @@
|
|||
handlerEditPolygonAirLine();
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
watch(
|
||||
() => props.polygonArea,
|
||||
(newVal, oldVal) => {
|
||||
|
|
@ -471,10 +487,8 @@
|
|||
|
||||
let graphic = null;
|
||||
|
||||
|
||||
// // 清空所有数据
|
||||
const exitDraw = () => {
|
||||
|
||||
graphicLayer ? graphicLayer.clear() : null;
|
||||
|
||||
takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
|
||||
|
|
@ -529,6 +543,11 @@
|
|||
const vChartRef = ref<HTMLElement>();
|
||||
|
||||
onMounted(() => {
|
||||
if (props.drawArea) {
|
||||
centerObj.lat = 835.9;
|
||||
centerObj.heading = 2;
|
||||
centerObj.pitch = -86;
|
||||
}
|
||||
initMap();
|
||||
|
||||
EventBus.on('closeTranslation', (val: any) => {
|
||||
|
|
@ -538,12 +557,19 @@
|
|||
}
|
||||
});
|
||||
});
|
||||
// center: { lat: 35.132103, lng: 118.296315, alt: 260.9, heading: 357.9, pitch: -32 },
|
||||
|
||||
// 初始化地图
|
||||
const initMap = () => {
|
||||
map = new mars3d.Map('mars3d-container_' + mapId.value, {
|
||||
scene: {
|
||||
center: { lat: 35.132103, lng: 118.296315, alt: 260.9, heading: 357.9, pitch: -32 },
|
||||
center: {
|
||||
lat: 35.132103,
|
||||
lng: 118.296315,
|
||||
alt: centerObj.lat,
|
||||
heading: centerObj.heading,
|
||||
pitch: centerObj.pitch,
|
||||
},
|
||||
scene3DOnly: false,
|
||||
shadows: false,
|
||||
removeDblClick: true,
|
||||
|
|
@ -716,7 +742,6 @@
|
|||
|
||||
map.addLayer(graphicLayer);
|
||||
|
||||
|
||||
// 参考起飞点图层
|
||||
takeOffPointGraphicLayer = new mars3d.layer.GraphicLayer({
|
||||
isAutoEditing: true,
|
||||
|
|
@ -798,13 +823,13 @@
|
|||
// loadChangGuangLayer();
|
||||
|
||||
// 图层回显
|
||||
if(props.editMode == 'edit' || props.editMode == 'detail'){
|
||||
// 判断航线类型进行加载编辑
|
||||
if(props.airLineForm.airLineType == 'waypoint'){
|
||||
handlerEditWaypointAirLine();
|
||||
}else if(props.airLineForm.airLineType == 'mapping2d'){
|
||||
handlerEditPolygonAirLine();
|
||||
}
|
||||
if (props.editMode == 'edit' || props.editMode == 'detail') {
|
||||
// 判断航线类型进行加载编辑
|
||||
if (props.airLineForm.airLineType == 'waypoint') {
|
||||
handlerEditWaypointAirLine();
|
||||
} else if (props.airLineForm.airLineType == 'mapping2d') {
|
||||
handlerEditPolygonAirLine();
|
||||
}
|
||||
}
|
||||
|
||||
// 监测面区域回显
|
||||
|
|
@ -813,7 +838,6 @@
|
|||
}
|
||||
|
||||
emits('mapOnLoad', map);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -874,17 +898,17 @@
|
|||
},
|
||||
];
|
||||
}
|
||||
if (props.drawArea) {
|
||||
mapContextmenuItems = [
|
||||
{
|
||||
text: '添加面区域',
|
||||
icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
|
||||
callback: (e) => {
|
||||
handlerDrawPolygonPatrol();
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
// if (props.drawArea) {
|
||||
// mapContextmenuItems = [
|
||||
// {
|
||||
// text: '添加面区域',
|
||||
// icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
|
||||
// callback: (e) => {
|
||||
// handlerDrawPolygonPatrol();
|
||||
// },
|
||||
// },
|
||||
// ];
|
||||
// }
|
||||
|
||||
map.bindContextMenu(mapContextmenuItems);
|
||||
};
|
||||
|
|
@ -1432,6 +1456,17 @@
|
|||
return edgeLengths;
|
||||
};
|
||||
|
||||
// 绘制文本标注
|
||||
const handlerLoadtextLabelGraphicLayer = (info) => {
|
||||
if (textLabelGraphicLayer == null) {
|
||||
textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
|
||||
isAutoEditing: false,
|
||||
});
|
||||
map.addLayer(textLabelGraphicLayer);
|
||||
} else {
|
||||
textLabelGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
// 绘制文本标注
|
||||
const handlerLoadtextLabelGraphicLayer = (info) => {
|
||||
|
|
@ -1468,6 +1503,7 @@
|
|||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 编辑回显面状航线
|
||||
// 编辑回显航线
|
||||
|
|
@ -1596,7 +1632,6 @@
|
|||
// handlerDrawPolygonLine(line);
|
||||
};
|
||||
|
||||
|
||||
// 监测区域面图层回显
|
||||
const handlerReportPolygonAirLine = () => {
|
||||
let geometry = {
|
||||
|
|
@ -1740,7 +1775,7 @@
|
|||
}
|
||||
// 设置航线默认高度
|
||||
let position = mars3d.LngLatPoint.fromCartesian(e.position);
|
||||
let uuid = airPoints.value.length+1;
|
||||
let uuid = airPoints.value.length + 1;
|
||||
|
||||
// 获取默认航线高度
|
||||
let globalHeight = props.templateKmlConfig.Folder.globalHeight;
|
||||
|
|
@ -2009,65 +2044,61 @@
|
|||
const paramChagne = (info) => {
|
||||
console.log('info1232', info);
|
||||
|
||||
|
||||
// 判断事件类型
|
||||
|
||||
if(info.value == 'rotateYaw'){ // 飞行器偏航角
|
||||
// 设置参数
|
||||
currentAirPoint.value.aircraftHorizontalAngle = info.config.actionActuatorFuncParam.aircraftHeading;
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
// 更新航点
|
||||
updateAirPoint(currentAirPoint.value);
|
||||
if (info.value == 'rotateYaw') {
|
||||
// 飞行器偏航角
|
||||
// 设置参数
|
||||
currentAirPoint.value.aircraftHorizontalAngle =
|
||||
info.config.actionActuatorFuncParam.aircraftHeading;
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
// 更新航点
|
||||
updateAirPoint(currentAirPoint.value);
|
||||
}
|
||||
|
||||
if(info.value == "gimbalRotate"){ // 云台俯仰角
|
||||
if (info.value == 'gimbalRotate') {
|
||||
// 云台俯仰角
|
||||
// 设置参数
|
||||
currentAirPoint.value.cameraVerticalAngle =info.config.actionActuatorFuncParam.gimbalPitchRotateAngle;
|
||||
currentAirPoint.value.cameraVerticalAngle =
|
||||
info.config.actionActuatorFuncParam.gimbalPitchRotateAngle;
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
}
|
||||
|
||||
if (info.value == 'position') {
|
||||
// 坐标高度改变
|
||||
}
|
||||
};
|
||||
|
||||
// 航点位置参数改变
|
||||
const positionChange = () => {
|
||||
// 更新航点
|
||||
updateAirPoint(currentAirPoint.value);
|
||||
|
||||
if(info.value == 'position'){ // 坐标高度改变
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
};
|
||||
|
||||
// 切换航点
|
||||
const pointChange = (id, type) => {
|
||||
if (type == 'next') {
|
||||
if (id == airPoints.value.length) {
|
||||
currentAirPoint.value = airPoints.value[0];
|
||||
} else {
|
||||
currentAirPoint.value = airPoints.value[id];
|
||||
}
|
||||
} else if (type == 'last') {
|
||||
if (id == 1) {
|
||||
currentAirPoint.value = airPoints.value[airPoints.value.length - 1];
|
||||
} else {
|
||||
currentAirPoint.value = airPoints.value[id - 2];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 航点位置参数改变
|
||||
const positionChange = () => {
|
||||
|
||||
// 更新航点
|
||||
updateAirPoint(currentAirPoint.value);
|
||||
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
}
|
||||
|
||||
// 切换航点
|
||||
const pointChange = (id,type) => {
|
||||
|
||||
if(type == "next"){
|
||||
if(id == airPoints.value.length){
|
||||
currentAirPoint.value = airPoints.value[0];
|
||||
}else{
|
||||
currentAirPoint.value = airPoints.value[id];
|
||||
}
|
||||
}else if(type == "last"){
|
||||
if(id == 1){
|
||||
currentAirPoint.value = airPoints.value[airPoints.value.length - 1];
|
||||
}else{
|
||||
currentAirPoint.value = airPoints.value[id - 2];
|
||||
}
|
||||
}
|
||||
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
}
|
||||
|
||||
// 更新镜头
|
||||
handlerDrawCamera(currentAirPoint.value);
|
||||
};
|
||||
|
||||
// 删除航点
|
||||
const deleteAirPoint = (e) => {
|
||||
|
|
@ -2108,16 +2139,23 @@ const pointChange = (id,type) => {
|
|||
handlerDrawLine();
|
||||
};
|
||||
|
||||
// 编辑回显航点航线
|
||||
const handlerEditWaypointAirLine =async () => {
|
||||
|
||||
// 编辑回显航点航线
|
||||
const handlerEditWaypointAirLine = async () => {
|
||||
// 解析和设置参考起飞点
|
||||
let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(",");
|
||||
takeOffPointPosition.value = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])]
|
||||
polygonAirForm.value.startingPoint = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])];
|
||||
let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(',');
|
||||
takeOffPointPosition.value = [
|
||||
parseFloat(takeoffArray[1]),
|
||||
parseFloat(takeoffArray[0]),
|
||||
parseFloat(takeoffArray[2]),
|
||||
];
|
||||
polygonAirForm.value.startingPoint = [
|
||||
parseFloat(takeoffArray[1]),
|
||||
parseFloat(takeoffArray[0]),
|
||||
parseFloat(takeoffArray[2]),
|
||||
];
|
||||
takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
|
||||
let startFlyGraphic = new mars3d.graphic.BillboardEntity({
|
||||
position:takeOffPointPosition.value,
|
||||
position: takeOffPointPosition.value,
|
||||
style: {
|
||||
image: '/map/start.png',
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
|
|
@ -2132,117 +2170,112 @@ const handlerEditWaypointAirLine =async () => {
|
|||
},
|
||||
clampToGround: true,
|
||||
},
|
||||
})
|
||||
});
|
||||
takeOffPointGraphicLayer.addGraphic(startFlyGraphic);
|
||||
|
||||
// 处理和加载航点
|
||||
if(props.waylineWpmlConfig.Folder.Placemark.length > 0){
|
||||
props.waylineWpmlConfig.Folder.Placemark?.forEach((item, index) => {
|
||||
let coordinate = item.Point.coordinates.split(',');
|
||||
// 处理航点
|
||||
let airPointInfo = {
|
||||
id: item.index+1,
|
||||
lng: coordinate[0],
|
||||
lat: coordinate[1],
|
||||
alt: item.executeHeight,
|
||||
aircraftHorizontalAngle: 0,
|
||||
cameraHorizontalAngle: 0,
|
||||
cameraVerticalAngle: 0,
|
||||
focalLength: 24,
|
||||
actions:[]
|
||||
};
|
||||
// 处理动作
|
||||
item.actionGroup.action?.forEach((action,idx)=>{
|
||||
let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc]))
|
||||
actionConfig.config = JSON.parse(JSON.stringify(action));
|
||||
if (props.waylineWpmlConfig.Folder.Placemark.length > 0) {
|
||||
props.waylineWpmlConfig.Folder.Placemark?.forEach((item, index) => {
|
||||
let coordinate = item.Point.coordinates.split(',');
|
||||
// 处理航点
|
||||
let airPointInfo = {
|
||||
id: item.index + 1,
|
||||
lng: coordinate[0],
|
||||
lat: coordinate[1],
|
||||
alt: item.executeHeight,
|
||||
aircraftHorizontalAngle: 0,
|
||||
cameraHorizontalAngle: 0,
|
||||
cameraVerticalAngle: 0,
|
||||
focalLength: 24,
|
||||
actions: [],
|
||||
};
|
||||
// 处理动作
|
||||
item.actionGroup.action?.forEach((action, idx) => {
|
||||
let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc]));
|
||||
actionConfig.config = JSON.parse(JSON.stringify(action));
|
||||
|
||||
console.log("123",action);
|
||||
console.log('123', action);
|
||||
|
||||
// 处理航偏角和俯仰角
|
||||
if(action.actionActuatorFunc == 'rotateYaw'){
|
||||
airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading
|
||||
}
|
||||
// 处理航偏角和俯仰角
|
||||
if (action.actionActuatorFunc == 'rotateYaw') {
|
||||
airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading;
|
||||
}
|
||||
|
||||
if(action.actionActuatorFunc == 'gimbalRotate'){
|
||||
airPointInfo.cameraVerticalAngle = action.actionActuatorFuncParam.gimbalPitchRotateAngle
|
||||
}
|
||||
if (action.actionActuatorFunc == 'gimbalRotate') {
|
||||
airPointInfo.cameraVerticalAngle =
|
||||
action.actionActuatorFuncParam.gimbalPitchRotateAngle;
|
||||
}
|
||||
|
||||
airPointInfo.actions.push(actionConfig);
|
||||
})
|
||||
airPoints.value?.push(airPointInfo);
|
||||
// 回显航点
|
||||
displayWaypointAirLine(airPointInfo);
|
||||
airPointInfo.actions.push(actionConfig);
|
||||
});
|
||||
// 更新航线
|
||||
handlerDrawLine();
|
||||
airPoints.value?.push(airPointInfo);
|
||||
// 回显航点
|
||||
displayWaypointAirLine(airPointInfo);
|
||||
});
|
||||
// 更新航线
|
||||
handlerDrawLine();
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// 回显航点航线信息
|
||||
const displayWaypointAirLine = (position)=>{
|
||||
console.log("position123",position);
|
||||
// 回显航点航线信息
|
||||
const displayWaypointAirLine = (position) => {
|
||||
console.log('position123', position);
|
||||
|
||||
// 设置航线默认高度
|
||||
let uuid = buildUUID();
|
||||
|
||||
// 获取默认航线高度
|
||||
|
||||
|
||||
// 航点三维模型
|
||||
let uavAngleGraphic = new mars3d.graphic.ModelEntity({
|
||||
id:position.id,
|
||||
name: "航向",
|
||||
position: [position.lng, position.lat, position.alt],
|
||||
style: {
|
||||
url: "/map/uav-angle.gltf",
|
||||
scale: 0.1,
|
||||
heading: position.aircraftHorizontalAngle + 90,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_near: 0,
|
||||
distanceDisplayPoint: {
|
||||
color: "#00ff00",
|
||||
pixelSize: 8
|
||||
}
|
||||
}
|
||||
})
|
||||
graphicLayer.addGraphic(uavAngleGraphic)
|
||||
id: position.id,
|
||||
name: '航向',
|
||||
position: [position.lng, position.lat, position.alt],
|
||||
style: {
|
||||
url: '/map/uav-angle.gltf',
|
||||
scale: 0.1,
|
||||
heading: position.aircraftHorizontalAngle + 90,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_near: 0,
|
||||
distanceDisplayPoint: {
|
||||
color: '#00ff00',
|
||||
pixelSize: 8,
|
||||
},
|
||||
},
|
||||
});
|
||||
graphicLayer.addGraphic(uavAngleGraphic);
|
||||
|
||||
// 地面投影点
|
||||
let stickGraphic = new mars3d.graphic.PointEntity({
|
||||
id: 'stick' + position.id,
|
||||
position: [position.lng, position.lat],
|
||||
style: {
|
||||
id: 'stick' + position.id,
|
||||
position: [position.lng, position.lat],
|
||||
style: {
|
||||
color: '#f5f5f5',
|
||||
pixelSize: 8,
|
||||
outline: true,
|
||||
outlineColor: '#f5f5f5',
|
||||
outlineWidth: 1,
|
||||
clampToGround: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
stickGroundPointLayer.addGraphic(stickGraphic);
|
||||
|
||||
// 航点 投影点连接线
|
||||
let lineGraphic = new mars3d.graphic.PolylineEntity({
|
||||
id: 'line' + position.id,
|
||||
positions: [
|
||||
[position.lng, position.lat,position.alt],
|
||||
[position.lng, position.lat, 0],
|
||||
],
|
||||
style: {
|
||||
id: 'line' + position.id,
|
||||
positions: [
|
||||
[position.lng, position.lat, position.alt],
|
||||
[position.lng, position.lat, 0],
|
||||
],
|
||||
style: {
|
||||
color: '#f5f5f5',
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
lineGroundPointLayer.addGraphic(lineGraphic);
|
||||
};
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
||||
|
||||
let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
||||
|
||||
// 飞行到此处
|
||||
const flyToThere = (e) => {
|
||||
|
|
@ -2749,7 +2782,6 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
|||
};
|
||||
// 设置无人机轨迹
|
||||
const setUAVPosition = () => {
|
||||
|
||||
let point = graphicLayer.getGraphicById('set-uav');
|
||||
const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height];
|
||||
// 更新航点
|
||||
|
|
@ -2874,7 +2906,7 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
|||
style: {
|
||||
angle1: 10,
|
||||
angle2: 10,
|
||||
length: 50,
|
||||
length: 10,
|
||||
rayEllipsoid: true,
|
||||
color: 'rgba(0,255,255,0.3)',
|
||||
outline: true,
|
||||
|
|
@ -2913,16 +2945,13 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
|||
|
||||
/////////////////////////////////动作处理//////////////////////////////////////
|
||||
const addAction = (action) => {
|
||||
|
||||
// 需要特殊处理拍照动作
|
||||
if(action.value == "takePhoto"){
|
||||
if (action.value == 'takePhoto') {
|
||||
currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(airPointActions['focus'])));
|
||||
}
|
||||
|
||||
// 当前航点添加动作
|
||||
currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(action)));
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -2965,7 +2994,25 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
|
|||
z-index: 999;
|
||||
}
|
||||
|
||||
.airline-preview-container{
|
||||
.draw-polygon-patrol {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, rgba(13, 25, 45, 0.87) 0%, #25436c 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
|
||||
border-radius: 10px;
|
||||
border-image: linear-gradient(180deg, #3661a4, rgba(61, 109, 171, 0.68)) 1 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.airline-preview-container{
|
||||
width:500px;
|
||||
background:rgba(0,0,0,0.6);
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in New Issue