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

merge

main
徐景良 2025-08-25 08:49:59 +08:00
parent b3d7070aa4 9416112d23
commit f6f330c0b6
11 changed files with 696 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -35,13 +35,13 @@
<!--播放器脚本文件--> <!--播放器脚本文件-->
<script src="https://tcsdk.com/player/tcplayer/release/v5.3.2/tcplayer.v5.3.2.min.js"></script> <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/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/css/layui.css">
<link rel="stylesheet" href="./public/smartJs/theme.css"> <link rel="stylesheet" href="./public/smartJs/theme.css">

20
src/views/demo/system/mediaLibrary/comparison/data.json
View File

@ -17,13 +17,13 @@
"size1": "8M", "size1": "8M",
"width1": 1024, "width1": 1024,
"height1": 576, "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", "title2": "DJL_20240925170915_0003_W_广角1",
"time2": "2024-09-25 17:22:56", "time2": "2024-09-25 17:22:56",
"size2": "8M", "size2": "8M",
"width2": 1024, "width2": 1024,
"height2": 576, "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": [] "imageJson": []
}, },
{ {
@ -33,13 +33,13 @@
"size1": "8M", "size1": "8M",
"width1": 1024, "width1": 1024,
"height1": 576, "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", "title2": "DJL_20240925170915_0003_W_广角1",
"time2": "2024-09-25 17:22:56", "time2": "2024-09-25 17:22:56",
"size2": "8M", "size2": "8M",
"width2": 1024, "width2": 1024,
"height2": 576, "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": [] "imageJson": []
}, },
{ {
@ -49,13 +49,13 @@
"size1": "8M", "size1": "8M",
"width1": 1024, "width1": 1024,
"height1": 576, "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", "title2": "DJL_20240925170915_0003_W_广角1",
"time2": "2024-09-25 17:22:56", "time2": "2024-09-25 17:22:56",
"size2": "8M", "size2": "8M",
"width2": 1024, "width2": 1024,
"height2": 576, "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": [] "imageJson": []
} }
] ]
@ -75,13 +75,13 @@
"size1": "8M", "size1": "8M",
"width1": 1024, "width1": 1024,
"height1": 576, "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", "title2": "DJL_20240925170915_0003_W_广角1",
"time2": "2024-09-25 17:22:56", "time2": "2024-09-25 17:22:56",
"size2": "8M", "size2": "8M",
"width2": 1024, "width2": 1024,
"height2": 576, "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": [] "imageJson": []
} }
] ]
@ -101,13 +101,13 @@
"size1": "8M", "size1": "8M",
"width1": 1024, "width1": 1024,
"height1": 576, "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", "title2": "DJL_20240925170915_0003_W_广角1",
"time2": "2024-09-25 17:22:56", "time2": "2024-09-25 17:22:56",
"size2": "8M", "size2": "8M",
"width2": 1024, "width2": 1024,
"height2": 576, "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": [] "imageJson": []
} }
] ]

399
src/views/demo/system/mediaLibrary/comparison/imageContrast.vue
View File

@ -7,14 +7,14 @@
ref="mouseCanvasRef_1" ref="mouseCanvasRef_1"
class="dragModal_1" class="dragModal_1"
@wheel="onWheel" @wheel="onWheel"
@mousedown="onMouseDown($event, '1')" @mousedown="onMouseDown($event, 1)"
:style="{ :style="{
position: 'relative', position: 'relative',
transform: `scale(${scale}) rotate(${rotationAngle}deg)`, transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
transition: 'transform 0.2s', transition: 'transform 0.2s',
width: `100%`, width: `100%`,
height: `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', backgroundSize: 'contain',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }"
@ -34,7 +34,7 @@
> >
<!-- 文字标签 --> <!-- 文字标签 -->
<div <div
v-if="nowGraffiti == index || rect.text" v-if="nowGraffiti == index || (rect.text && rect.type == 'hand')"
:style="{ :style="{
position: 'absolute', position: 'absolute',
left: '0px', left: '0px',
@ -128,6 +128,20 @@
{{ rect.text }} {{ rect.text }}
</div> </div>
</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 <div
:style="{ :style="{
@ -136,13 +150,13 @@
top: '0px', top: '0px',
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`, width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
height: '4px', height: '4px',
background: `${rect.color}`, background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
outline: rect.status != 'success' ? `2px solid #ffffff` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'top')" @mouseenter="mouseenter(rect, 'top')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'top')" @mousedown="funMouseDownEdit($event, index, 'top', 1)"
/> />
<!-- 下 --> <!-- 下 -->
<div <div
@ -152,13 +166,13 @@
bottom: `0px`, bottom: `0px`,
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`, width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
height: '4px', height: '4px',
background: `${rect.color}`, background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
outline: rect.status != 'success' ? `2px solid #ffffff` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'bottom')" @mouseenter="mouseenter(rect, 'bottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'bottom')" @mousedown="funMouseDownEdit($event, index, 'bottom', 1)"
/> />
<!-- 右 --> <!-- 右 -->
<div <div
@ -168,13 +182,13 @@
top: rect.status == 'edit' ? '6px' : '0px', top: rect.status == 'edit' ? '6px' : '0px',
width: '4px', width: '4px',
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`, 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` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'right')" @mouseenter="mouseenter(rect, 'right')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'right')" @mousedown="funMouseDownEdit($event, index, 'right', 1)"
/> />
<!-- 左 --> <!-- 左 -->
<div <div
@ -184,13 +198,13 @@
top: rect.status == 'edit' ? '6px' : '0px', top: rect.status == 'edit' ? '6px' : '0px',
width: '4px', width: '4px',
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`, 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` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'left')" @mouseenter="mouseenter(rect, 'left')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'left')" @mousedown="funMouseDownEdit($event, index, 'left', 1)"
/> />
<!-- 左上 --> <!-- 左上 -->
<div <div
@ -205,7 +219,7 @@
}" }"
@mouseenter="mouseenter(rect, 'leftTop')" @mouseenter="mouseenter(rect, 'leftTop')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'leftTop')" @mousedown="funMouseDownEdit($event, index, 'leftTop', 1)"
/> />
<!-- 右下 --> <!-- 右下 -->
<div <div
@ -220,7 +234,7 @@
}" }"
@mouseenter="mouseenter(rect, 'rightBottom')" @mouseenter="mouseenter(rect, 'rightBottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'rightBottom')" @mousedown="funMouseDownEdit($event, index, 'rightBottom', 1)"
/> />
<!-- 右上 --> <!-- 右上 -->
<div <div
@ -235,7 +249,7 @@
}" }"
@mouseenter="mouseenter(rect, 'rightTop')" @mouseenter="mouseenter(rect, 'rightTop')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'rightTop')" @mousedown="funMouseDownEdit($event, index, 'rightTop', 1)"
/> />
<!-- 左下 --> <!-- 左下 -->
<div <div
@ -250,7 +264,7 @@
}" }"
@mouseenter="mouseenter(rect, 'leftBottom')" @mouseenter="mouseenter(rect, 'leftBottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'leftBottom')" @mousedown="funMouseDownEdit($event, index, 'leftBottom', 1)"
/> />
</div> </div>
</div> </div>
@ -262,14 +276,14 @@
ref="mouseCanvasRef_2" ref="mouseCanvasRef_2"
class="dragModal_2" class="dragModal_2"
@wheel="onWheel" @wheel="onWheel"
@mousedown="onMouseDown($event, '2')" @mousedown="onMouseDown($event, 2)"
:style="{ :style="{
position: 'relative', position: 'relative',
transform: `scale(${scale}) rotate(${rotationAngle}deg)`, transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
transition: 'transform 0.2s', transition: 'transform 0.2s',
width: `100%`, width: `100%`,
height: `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', backgroundSize: 'contain',
backgroundPosition: 'center', backgroundPosition: 'center',
}" }"
@ -391,13 +405,13 @@
top: '0px', top: '0px',
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`, width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
height: '4px', height: '4px',
background: `${rect.color}`, background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
outline: rect.status != 'success' ? `2px solid #ffffff` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'top')" @mouseenter="mouseenter(rect, 'top')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'top')" @mousedown="funMouseDownEdit($event, index, 'top', 2)"
/> />
<!-- 下 --> <!-- 下 -->
<div <div
@ -407,13 +421,13 @@
bottom: `0px`, bottom: `0px`,
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`, width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
height: '4px', height: '4px',
background: `${rect.color}`, background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
outline: rect.status != 'success' ? `2px solid #ffffff` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'bottom')" @mouseenter="mouseenter(rect, 'bottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'bottom')" @mousedown="funMouseDownEdit($event, index, 'bottom', 2)"
/> />
<!-- 右 --> <!-- 右 -->
<div <div
@ -423,13 +437,13 @@
top: rect.status == 'edit' ? '6px' : '0px', top: rect.status == 'edit' ? '6px' : '0px',
width: '4px', width: '4px',
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`, 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` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'right')" @mouseenter="mouseenter(rect, 'right')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'right')" @mousedown="funMouseDownEdit($event, index, 'right', 2)"
/> />
<!-- 左 --> <!-- 左 -->
<div <div
@ -439,13 +453,13 @@
top: rect.status == 'edit' ? '6px' : '0px', top: rect.status == 'edit' ? '6px' : '0px',
width: '4px', width: '4px',
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`, 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` : '', outline: rect.status != 'success' ? `2px solid #ffffff` : '',
}" }"
@mouseenter="mouseenter(rect, 'left')" @mouseenter="mouseenter(rect, 'left')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''" @click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'left')" @mousedown="funMouseDownEdit($event, index, 'left', 2)"
/> />
<!-- 左上 --> <!-- 左上 -->
<div <div
@ -460,7 +474,7 @@
}" }"
@mouseenter="mouseenter(rect, 'leftTop')" @mouseenter="mouseenter(rect, 'leftTop')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'leftTop')" @mousedown="funMouseDownEdit($event, index, 'leftTop', 2)"
/> />
<!-- 右下 --> <!-- 右下 -->
<div <div
@ -475,7 +489,7 @@
}" }"
@mouseenter="mouseenter(rect, 'rightBottom')" @mouseenter="mouseenter(rect, 'rightBottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'rightBottom')" @mousedown="funMouseDownEdit($event, index, 'rightBottom', 2)"
/> />
<!-- 右上 --> <!-- 右上 -->
<div <div
@ -490,7 +504,7 @@
}" }"
@mouseenter="mouseenter(rect, 'rightTop')" @mouseenter="mouseenter(rect, 'rightTop')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'rightTop')" @mousedown="funMouseDownEdit($event, index, 'rightTop', 2)"
/> />
<!-- 左下 --> <!-- 左下 -->
<div <div
@ -505,7 +519,7 @@
}" }"
@mouseenter="mouseenter(rect, 'leftBottom')" @mouseenter="mouseenter(rect, 'leftBottom')"
@mouseleave="mouseleave(rect)" @mouseleave="mouseleave(rect)"
@mousedown="funMouseDownEdit($event, index, 'leftBottom')" @mousedown="funMouseDownEdit($event, index, 'leftBottom', 2)"
/> />
</div> </div>
</div> </div>
@ -521,10 +535,20 @@
<LeftOutlined @click="clickLeftOrRightButton('left')" /> <LeftOutlined @click="clickLeftOrRightButton('left')" />
</a-tooltip> </a-tooltip>
</div> </div>
<div class="button"> <div :class="inputFlag ? 'buttonInput' : 'button'">
<span v-if="!inputFlag" style="width: 100px" @click="focusInput">
{{ nowImageGroupIndex }} {{ 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>
<!-- 下一个 --> <!-- 下一个 -->
<div class="button"> <div class="button">
@ -581,36 +605,24 @@
<RedoOutlined @click="refresh" /> <RedoOutlined @click="refresh" />
</a-tooltip> </a-tooltip>
</div> </div>
<!-- 锁定 --> <span style="color: gray; margin-left: 5px; margin-right: 5px" v-if="props.isEdit">|</span>
<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>
<!-- 涂鸦标记 --> <!-- 涂鸦标记 -->
<div class="button"> <div class="button" v-if="props.isEdit">
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title> <template #title>
<span>涂鸦标记</span> <span> {{ graffitiFlag ? '关闭手动涂鸦标记' : '开启手动涂鸦标记' }}</span>
</template> </template>
<EditOutlined @click="setGraffiti" /> <EditOutlined @click="setGraffiti" />
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
</div> </div>
<!-- 退出涂鸦 -->
<div class="escTip" v-if="graffitiFlag">
<div class="whiteEsc">Esc</div>
<div class="blackTip">退出涂鸦</div>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -624,8 +636,6 @@
EditOutlined, EditOutlined,
FontColorsOutlined, FontColorsOutlined,
RedoOutlined, RedoOutlined,
LockOutlined,
UnlockOutlined,
CloseOutlined, CloseOutlined,
ExportOutlined, ExportOutlined,
DownloadOutlined, DownloadOutlined,
@ -638,11 +648,40 @@
ExpandOutlined, ExpandOutlined,
CompressOutlined, CompressOutlined,
} from '@ant-design/icons-vue'; } 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 { cloneDeep } from 'lodash-es';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
const props = defineProps(['recordList', 'nowRecord']); const props = defineProps(['recordList', 'nowRecord', 'groupIndex', 'isEdit', 'graffitiColor']);
const emit = defineEmits(['']); 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(); const nowImageGroup: any = ref();
@ -657,20 +696,25 @@
if (direction == 'left') { if (direction == 'left') {
if (index == 0) { if (index == 0) {
nowImageGroup.value = imageGroupList[imageGroupList.length - 1]; nowImageGroup.value = imageGroupList[imageGroupList.length - 1];
chooseNowImageGroup(imageGroupList.length);
} else { } else {
nowImageGroup.value = imageGroupList[index - 1]; nowImageGroup.value = imageGroupList[index - 1];
chooseNowImageGroup(index);
} }
} }
if (direction == 'right') { if (direction == 'right') {
if (index == imageGroupList.length - 1) { if (index == imageGroupList.length - 1) {
nowImageGroup.value = imageGroupList[0]; nowImageGroup.value = imageGroupList[0];
chooseNowImageGroup(1);
} else { } else {
nowImageGroup.value = imageGroupList[index + 1]; nowImageGroup.value = imageGroupList[index + 1];
chooseNowImageGroup(index + 2);
}
}
} }
} }
getNowImageGroup(); getNowImageGroup();
} refresh();
}
} }
// 当前图片组的索引 // 当前图片组的索引
function getNowImageGroup() { function getNowImageGroup() {
@ -692,7 +736,34 @@
deep: true, 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 scale = ref(1);
const rotationAngle = ref(0); const rotationAngle = ref(0);
@ -737,7 +808,6 @@
// 设置画笔--------------------------------------------------------------- // 设置画笔---------------------------------------------------------------
const graffitiFlag = ref(false); const graffitiFlag = ref(false);
const graffitiColor = ref('#E23C39');
const nowGraffiti = ref(-1); const nowGraffiti = ref(-1);
const nowMouseGraffiti = ref(0); const nowMouseGraffiti = ref(0);
// 设置鼠标格式 // 设置鼠标格式
@ -769,7 +839,7 @@
// 所有已创建的矩形 // 所有已创建的矩形
const graffitis: any = ref([]); const graffitis: any = ref([]);
const graffitisClone: any = ref([]); const graffitisClone: any = ref([]);
let comparisoNnum = ''; let comparisoNnum = 0;
const mouseCanvasRef_1 = ref(); const mouseCanvasRef_1 = ref();
const mouseCanvasRef_2 = ref(); const mouseCanvasRef_2 = ref();
@ -785,7 +855,7 @@
comparisoNnum = num; comparisoNnum = num;
// 获取相对于容器的坐标 // 获取相对于容器的坐标
const rect = const rect =
comparisoNnum == '1' comparisoNnum == 1
? mouseCanvasRef_1.value.getBoundingClientRect() ? mouseCanvasRef_1.value.getBoundingClientRect()
: mouseCanvasRef_2.value.getBoundingClientRect(); : mouseCanvasRef_2.value.getBoundingClientRect();
startX = event.x - rect.x; startX = event.x - rect.x;
@ -797,7 +867,7 @@
y: startY, y: startY,
width: 0, width: 0,
height: 0, height: 0,
color: graffitiColor.value, color: props.graffitiColor != '#ffffff' ? props.graffitiColor : '#E23C39',
text: '', text: '',
status: 'edit', status: 'edit',
type: 'hand', type: 'hand',
@ -828,7 +898,7 @@
function onMouseMoveGraffit(event) { function onMouseMoveGraffit(event) {
// 涂鸦 // 涂鸦
const rect = const rect =
comparisoNnum == '1' comparisoNnum == 1
? mouseCanvasRef_1.value.getBoundingClientRect() ? mouseCanvasRef_1.value.getBoundingClientRect()
: mouseCanvasRef_2.value.getBoundingClientRect(); : mouseCanvasRef_2.value.getBoundingClientRect();
if (!isDragging.value) return; if (!isDragging.value) return;
@ -845,7 +915,7 @@
// 涂鸦 // 涂鸦
if (!isDragging.value) return; if (!isDragging.value) return;
const rect = const rect =
comparisoNnum == '1' comparisoNnum == 1
? mouseCanvasRef_1.value.getBoundingClientRect() ? mouseCanvasRef_1.value.getBoundingClientRect()
: mouseCanvasRef_2.value.getBoundingClientRect(); : mouseCanvasRef_2.value.getBoundingClientRect();
endX = event.x - rect.x; endX = event.x - rect.x;
@ -900,6 +970,18 @@
graffitis.value[graffitis.value.length - 1].height = Math.abs(endY - startY); 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) { function deleteGraffiti(index = undefined, value = undefined) {
graffitis.value.splice(index, 1); graffitis.value.splice(index, 1);
@ -917,6 +999,151 @@
scale.value -= 0.1; 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.imageDiv_ { .imageDiv_ {
@ -1005,6 +1232,12 @@
color: #ffffff; color: #ffffff;
font-size: 22px; font-size: 22px;
} }
.buttonInput {
position: relative;
color: #ffffff;
font-size: 22px;
}
} }
} }
@ -1016,4 +1249,38 @@
justify-content: center; justify-content: center;
border-radius: 3px; 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> </style>

42
src/views/demo/system/mediaLibrary/comparison/index.vue
View File

@ -33,6 +33,9 @@
<RecordListEditInfo <RecordListEditInfo
v-if="status == 2" v-if="status == 2"
:nowRecord="nowRecord" :nowRecord="nowRecord"
:groupIndex="groupIndex"
@chooseNowImageGroup="chooseNowImageGroup"
@chooseGraffitiColor="chooseGraffitiColor"
@restoreListStatus="restoreListStatus" @restoreListStatus="restoreListStatus"
/> />
</div> </div>
@ -43,14 +46,21 @@
width: typeOpen ? 'calc(100% - 360px)' : '100%', 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> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref, onMounted } from 'vue';
import { LeftOutlined, CaretUpOutlined } from '@ant-design/icons-vue'; import { LeftOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import { RecordList, RecordNewBuild, RecordListEditInfo, ImageContrast } from './comparison'; import { RecordList, RecordNewBuild, RecordListEditInfo, ImageContrast } from './comparison';
import datajson from './data.json'; import datajson from './data.json';
@ -69,6 +79,21 @@
} }
const recordList = ref(datajson); 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]); const nowRecord = ref(recordList.value[0]);
// 0：列表、1：新建、2：编辑 // 0：列表、1：新建、2：编辑
const status = ref(0); const status = ref(0);
@ -95,6 +120,17 @@
status.value = 0; status.value = 0;
isEdit.value = false; isEdit.value = false;
} }
// 当前图片组的索引
const groupIndex = ref(1);
function chooseNowImageGroup(index) {
groupIndex.value = index;
}
// 颜色
const graffitiColor = ref('');
function chooseGraffitiColor(color) {
graffitiColor.value = color;
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.comparisonModal { .comparisonModal {

42
src/views/demo/system/mediaLibrary/comparison/recordListEditInfo.vue
View File

@ -75,7 +75,7 @@
background: color, background: color,
border: `1px solid #000000`, border: `1px solid #000000`,
}" }"
@click="graffitiColor = color" @click="chooseGraffitiColor(color)"
> >
<CheckOutlined v-if="graffitiColor == color" style="color: white" /> <CheckOutlined v-if="graffitiColor == color" style="color: white" />
</div> </div>
@ -115,12 +115,33 @@
:scroll="{ y: 400 }" :scroll="{ y: 400 }"
> >
<template #headerCell="{ column }"> <template #headerCell="{ column }">
<div
:style="{
height: '40px',
display: 'flex',
'align-items': 'center',
'justify-content': 'center',
}"
>
<template v-if="column.key === 'handNum'"> <template v-if="column.key === 'handNum'">
<span> {{ column.title }} <InfoCircleOutlined /> </span> <span> {{ column.title }} <InfoCircleOutlined /> </span>
</template> </template>
<template v-if="column.key !== 'handNum'">
<span> {{ column.title }} </span>
</template>
</div>
</template> </template>
<template #bodyCell="{ column, record }"> <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'"> <template v-if="column.key === 'index'">
<span> {{ record.index }}</span> <span> {{ record.index }}</span>
</template> </template>
@ -162,18 +183,20 @@
RightOutlined, RightOutlined,
BgColorsOutlined, BgColorsOutlined,
InfoCircleOutlined, InfoCircleOutlined,
CheckOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
const props = defineProps(['nowRecord']); const props = defineProps(['nowRecord', 'groupIndex']);
const emits = defineEmits(['restoreListStatus', 'chooseGraffitiColor', 'chooseRecord']); const emits = defineEmits(['restoreListStatus', 'chooseGraffitiColor', 'chooseNowImageGroup']);
const graffitiColor = ref('#ffffff'); const graffitiColor = ref('#ffffff');
function chooseGraffitiColor() { function chooseGraffitiColor(color) {
graffitiColor.value = color;
emits('chooseGraffitiColor', graffitiColor.value); emits('chooseGraffitiColor', graffitiColor.value);
} }
function chooseRecord(record) { function chooseNowImageGroup(nowImageGroup) {
emits('chooseRecord', record); emits('chooseNowImageGroup', nowImageGroup.index);
} }
// 关闭 // 关闭
@ -402,4 +425,9 @@
background: #3c3c3c !important; background: #3c3c3c !important;
color: #ffffff !important; color: #ffffff !important;
} }
::v-deep .ant-table-cell {
padding: 0px !important;
// height: 48px !important;
}
</style> </style>

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

@ -20,23 +20,22 @@
<a-button :icon="h(PlusOutlined)" @click="addFolder"> 新建文件夹 </a-button> <a-button :icon="h(PlusOutlined)" @click="addFolder"> 新建文件夹 </a-button>
<a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button> <a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
<a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </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"> <a-popover trigger="hover">
<template #content> <template #content>
<div v-if="!downloadZipLoading"> <div v-if="!downloadZipLoading">
选择下载的文件/文件夹，压缩下载成一个压缩包文件 单个下载：单独下载非文件夹的文件<br />
批量下载：选择下载文件/文件夹，压缩后下载
</div> </div>
<div v-if="downloadZipLoading"> <div v-if="downloadZipLoading">
<a-progress <a-progress
type="circle" type="circle"
:percent="downloadZipPercent" :percent="downloadZipPercent"
:format="(downloadZipPercent) => `下载中\n${downloadZipPercent}%`" :format="
(downloadZipPercent) =>
downloadZipPercent == 100
? `下载完成\n${downloadZipPercent}%`
: `压缩中\n${downloadZipPercent}%`
"
/> />
</div> </div>
</template> </template>
@ -45,7 +44,7 @@
:loading="downloadZipLoading" :loading="downloadZipLoading"
@click="downloadZipOpenMoadl" @click="downloadZipOpenMoadl"
> >
批量下载 下载
</a-button> </a-button>
</a-popover> </a-popover>
<a-radio-group v-model:value="tableType"> <a-radio-group v-model:value="tableType">
@ -836,22 +835,29 @@
}); });
} }
// 单独下载 // 压缩窗口
const downloadAloneLoading = ref(false); const downloadZipOpen = ref(false);
async function downloadAloneFile() { const downloadZipLoading = ref(false);
const downloadZipPercent = ref(0);
// 压缩文件名
let downloadRows: any = [];
const zipFileName = ref('');
// 批量下载-窗口
async function downloadZipOpenMoadl() {
// 获得所选 // 获得所选
let rows = getSelectRows(); let rows = getSelectRows();
if (tableType.value == 'store') { if (tableType.value == 'store') {
rows = showTableData.value.filter((item) => item.checked); rows = showTableData.value.filter((item) => item.checked);
} }
if (rows.length != 1) { if (rows.length == 0) {
return createMessage.warn('请选择一个文件进行下载'); return createMessage.warn('请选择一个或者多个文件/文件夹进行下载');
}
if (!rows[0].objectKey) {
return createMessage.warn('单独下载只能下载非文件夹的文件');
} }
if (rows.length == 1 && rows[0].objectKey) {
// 单个文件下载
try { try {
downloadAloneLoading.value = true; downloadZipLoading.value = true;
downloadZipPercent.value = 0;
const response = await fetch(VITE_GLOB_MEDIALIBRARY_IMAGE_URL + rows[0].objectKey, { const response = await fetch(VITE_GLOB_MEDIALIBRARY_IMAGE_URL + rows[0].objectKey, {
mode: 'cors', mode: 'cors',
}); });
@ -870,28 +876,11 @@
} catch (error) { } catch (error) {
console.error('Error downloading image:', error); console.error('Error downloading image:', error);
} finally { } finally {
downloadAloneLoading.value = false; downloadZipLoading.value = false;
} downloadZipPercent.value = 100;
}
// 压缩窗口
const downloadZipOpen = ref(false);
const downloadZipLoading = ref(false);
const downloadZipPercent = ref(0);
// 压缩文件名
let downloadRows: any = [];
const zipFileName = ref('');
// 批量下载-窗口
function downloadZipOpenMoadl() {
// 获得所选
let rows = getSelectRows();
if (tableType.value == 'store') {
rows = showTableData.value.filter((item) => item.checked);
}
if (rows.length == 0) {
return createMessage.warn('请选择一个或者多个文件/文件夹进行下载');
} }
} else {
// 多个文件or文件夹下载
zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss'); zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss');
if (floders.value.length > 1) { if (floders.value.length > 1) {
zipFileName.value = floders.value[floders.value.length - 1].name; zipFileName.value = floders.value[floders.value.length - 1].name;
@ -902,6 +891,7 @@
downloadRows = rows; downloadRows = rows;
downloadZipOpen.value = true; downloadZipOpen.value = true;
} }
}
// 批量下载-下载 // 批量下载-下载
async function downloadZipFile() { async function downloadZipFile() {
if (!zipFileName.value) { if (!zipFileName.value) {
@ -909,6 +899,7 @@
} }
downloadZipOpen.value = false; downloadZipOpen.value = false;
downloadZipLoading.value = true; downloadZipLoading.value = true;
downloadZipPercent.value = 0;
getFileList(downloadRows).then(async (res) => { getFileList(downloadRows).then(async (res) => {
let filelist: any = res; let filelist: any = res;
const token = localStorage.getItem('X-Token'); const token = localStorage.getItem('X-Token');

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

@ -1554,7 +1554,7 @@
.escTip { .escTip {
position: absolute; position: absolute;
left: 0%; left: 0%;
bottom: 120px; bottom: 0px;
width: 120px; width: 120px;
height: 40px; height: 40px;
background: #9c9c9c77; background: #9c9c9c77;

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

@ -193,7 +193,7 @@
const imageOptions: any = ref([ const imageOptions: any = ref([
{ {
value: 1, value: 1,
label: '可见光照片', label: '可见光',
}, },
{ {
value: 2, value: 2,

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

@ -275,7 +275,7 @@
let imageType = ''; let imageType = '';
switch (type) { switch (type) {
case 1: case 1:
imageType = '可见光照片'; imageType = '可见光';
break; break;
case 2: case 2:
imageType = '红外照片'; imageType = '红外照片';

2
src/views/demo/workmanagement/flightoperation/src/Report.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="shade-container"></div> <div class="shade-container"></div>
<div class="patrol-map" v-if="step == 1"> <div class="patrol-map" v-if="step == 1">
<div class="title">绘制范围</div> <div class="title">绘制事件区域</div>
<div class="map-container"> <div class="map-container">
<div class="map-container-content"> <div class="map-container-content">
<Map :drawArea="drawarea" @areaData="getAreaData" /> <Map :drawArea="drawarea" @areaData="getAreaData" />

251
src/views/demo/workmanagement/workplan/components/map.vue
View File

@ -2,7 +2,11 @@
<!-- 地图 --> <!-- 地图 -->
<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 <airPoint
:airInfo="lineInfo" :airInfo="lineInfo"
:editModel="props.editMode" :editModel="props.editMode"
@ -76,10 +80,15 @@
<div>关闭</div> <div>关闭</div>
</div> </div>
</div> </div>
<!-- 面绘制 -->
<div class="draw-polygon-patrol" title="绘制面区域" v-if="props.drawArea" @click="handlerDrawPolygonPatrol">
<EditOutlined />
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <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 { message } from 'ant-design-vue';
import { CloseOutlined } from '@ant-design/icons-vue'; import { CloseOutlined } from '@ant-design/icons-vue';
import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
@ -88,9 +97,9 @@
import * as mars3d from 'mars3d'; import * as mars3d from 'mars3d';
import { EventBus } from '@/utils/eventBus'; import { EventBus } from '@/utils/eventBus';
import { airPortStore } from '@/store/modules/airport'; import { airPortStore } from '@/store/modules/airport';
import { airPointActions } from '../waylineConfig/actionConfig' import { airPointActions } from '../waylineConfig/actionConfig';
import 'mars3d-space'; import 'mars3d-space';
import { EditOutlined } from '@ant-design/icons-vue';
import * as Cesium from 'mars3d-cesium'; import * as Cesium from 'mars3d-cesium';
// import * as turf from '@turf/turf'; // import * as turf from '@turf/turf';
import airPolygon from './airPolygon.vue'; import airPolygon from './airPolygon.vue';
@ -264,6 +273,11 @@
type: Object, type: Object,
}, },
}); });
const centerObj = reactive({
lat: 260.9,
heading: 357.9,
pitch: -32,
});
watch( watch(
() => props.editMode, () => props.editMode,
@ -275,8 +289,10 @@
handlerEditPolygonAirLine(); handlerEditPolygonAirLine();
} }
} }
}, }
); )
watch( watch(
() => props.polygonArea, () => props.polygonArea,
(newVal, oldVal) => { (newVal, oldVal) => {
@ -471,10 +487,8 @@
let graphic = null; let graphic = null;
// // 清空所有数据 // // 清空所有数据
const exitDraw = () => { const exitDraw = () => {
graphicLayer ? graphicLayer.clear() : null; graphicLayer ? graphicLayer.clear() : null;
takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null; takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
@ -529,6 +543,11 @@
const vChartRef = ref<HTMLElement>(); const vChartRef = ref<HTMLElement>();
onMounted(() => { onMounted(() => {
if (props.drawArea) {
centerObj.lat = 835.9;
centerObj.heading = 2;
centerObj.pitch = -86;
}
initMap(); initMap();
EventBus.on('closeTranslation', (val: any) => { 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 = () => { const initMap = () => {
map = new mars3d.Map('mars3d-container_' + mapId.value, { map = new mars3d.Map('mars3d-container_' + mapId.value, {
scene: { 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, scene3DOnly: false,
shadows: false, shadows: false,
removeDblClick: true, removeDblClick: true,
@ -716,7 +742,6 @@
map.addLayer(graphicLayer); map.addLayer(graphicLayer);
// 参考起飞点图层 // 参考起飞点图层
takeOffPointGraphicLayer = new mars3d.layer.GraphicLayer({ takeOffPointGraphicLayer = new mars3d.layer.GraphicLayer({
isAutoEditing: true, isAutoEditing: true,
@ -798,11 +823,11 @@
// loadChangGuangLayer(); // loadChangGuangLayer();
// 图层回显 // 图层回显
if(props.editMode == 'edit' || props.editMode == 'detail'){ if (props.editMode == 'edit' || props.editMode == 'detail') {
// 判断航线类型进行加载编辑 // 判断航线类型进行加载编辑
if(props.airLineForm.airLineType == 'waypoint'){ if (props.airLineForm.airLineType == 'waypoint') {
handlerEditWaypointAirLine(); handlerEditWaypointAirLine();
}else if(props.airLineForm.airLineType == 'mapping2d'){ } else if (props.airLineForm.airLineType == 'mapping2d') {
handlerEditPolygonAirLine(); handlerEditPolygonAirLine();
} }
} }
@ -813,7 +838,6 @@
} }
emits('mapOnLoad', map); emits('mapOnLoad', map);
}); });
}; };
@ -874,17 +898,17 @@
}, },
]; ];
} }
if (props.drawArea) { // if (props.drawArea) {
mapContextmenuItems = [ // mapContextmenuItems = [
{ // {
text: '添加面区域', // text: '添加面区域',
icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标 // icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
callback: (e) => { // callback: (e) => {
handlerDrawPolygonPatrol(); // handlerDrawPolygonPatrol();
}, // },
}, // },
]; // ];
} // }
map.bindContextMenu(mapContextmenuItems); map.bindContextMenu(mapContextmenuItems);
}; };
@ -1432,6 +1456,17 @@
return edgeLengths; return edgeLengths;
}; };
// 绘制文本标注
const handlerLoadtextLabelGraphicLayer = (info) => {
if (textLabelGraphicLayer == null) {
textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
isAutoEditing: false,
});
map.addLayer(textLabelGraphicLayer);
} else {
textLabelGraphicLayer.clear();
}
// 绘制文本标注 // 绘制文本标注
const handlerLoadtextLabelGraphicLayer = (info) => { const handlerLoadtextLabelGraphicLayer = (info) => {
@ -1468,6 +1503,7 @@
}) })
} }
}
// 编辑回显面状航线 // 编辑回显面状航线
// 编辑回显航线 // 编辑回显航线
@ -1596,7 +1632,6 @@
// handlerDrawPolygonLine(line); // handlerDrawPolygonLine(line);
}; };
// 监测区域面图层回显 // 监测区域面图层回显
const handlerReportPolygonAirLine = () => { const handlerReportPolygonAirLine = () => {
let geometry = { let geometry = {
@ -1740,7 +1775,7 @@
} }
// 设置航线默认高度 // 设置航线默认高度
let position = mars3d.LngLatPoint.fromCartesian(e.position); 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; let globalHeight = props.templateKmlConfig.Folder.globalHeight;
@ -2009,65 +2044,61 @@
const paramChagne = (info) => { const paramChagne = (info) => {
console.log('info1232', info); console.log('info1232', info);
// 判断事件类型 // 判断事件类型
if(info.value == 'rotateYaw'){ // 飞行器偏航角 if (info.value == 'rotateYaw') {
// 飞行器偏航角
// 设置参数 // 设置参数
currentAirPoint.value.aircraftHorizontalAngle = info.config.actionActuatorFuncParam.aircraftHeading; currentAirPoint.value.aircraftHorizontalAngle =
info.config.actionActuatorFuncParam.aircraftHeading;
// 更新镜头 // 更新镜头
handlerDrawCamera(currentAirPoint.value); handlerDrawCamera(currentAirPoint.value);
// 更新航点 // 更新航点
updateAirPoint(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); handlerDrawCamera(currentAirPoint.value);
} }
if (info.value == 'position') {
// 坐标高度改变
if(info.value == 'position'){ // 坐标高度改变
} }
};
// 航点位置参数改变
} const positionChange = () => {
// 航点位置参数改变
const positionChange = () => {
// 更新航点 // 更新航点
updateAirPoint(currentAirPoint.value); updateAirPoint(currentAirPoint.value);
// 更新镜头 // 更新镜头
handlerDrawCamera(currentAirPoint.value); handlerDrawCamera(currentAirPoint.value);
} };
// 切换航点 // 切换航点
const pointChange = (id,type) => { const pointChange = (id, type) => {
if (type == 'next') {
if(type == "next"){ if (id == airPoints.value.length) {
if(id == airPoints.value.length){
currentAirPoint.value = airPoints.value[0]; currentAirPoint.value = airPoints.value[0];
}else{ } else {
currentAirPoint.value = airPoints.value[id]; currentAirPoint.value = airPoints.value[id];
} }
}else if(type == "last"){ } else if (type == 'last') {
if(id == 1){ if (id == 1) {
currentAirPoint.value = airPoints.value[airPoints.value.length - 1]; currentAirPoint.value = airPoints.value[airPoints.value.length - 1];
}else{ } else {
currentAirPoint.value = airPoints.value[id - 2]; currentAirPoint.value = airPoints.value[id - 2];
} }
} }
// 更新镜头 // 更新镜头
handlerDrawCamera(currentAirPoint.value); handlerDrawCamera(currentAirPoint.value);
} };
// 删除航点 // 删除航点
const deleteAirPoint = (e) => { const deleteAirPoint = (e) => {
@ -2108,16 +2139,23 @@ const pointChange = (id,type) => {
handlerDrawLine(); handlerDrawLine();
}; };
// 编辑回显航点航线 // 编辑回显航点航线
const handlerEditWaypointAirLine =async () => { const handlerEditWaypointAirLine = async () => {
// 解析和设置参考起飞点 // 解析和设置参考起飞点
let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(","); let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(',');
takeOffPointPosition.value = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])] takeOffPointPosition.value = [
polygonAirForm.value.startingPoint = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])]; 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; takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
let startFlyGraphic = new mars3d.graphic.BillboardEntity({ let startFlyGraphic = new mars3d.graphic.BillboardEntity({
position:takeOffPointPosition.value, position: takeOffPointPosition.value,
style: { style: {
image: '/map/start.png', image: '/map/start.png',
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
@ -2132,16 +2170,16 @@ const handlerEditWaypointAirLine =async () => {
}, },
clampToGround: true, clampToGround: true,
}, },
}) });
takeOffPointGraphicLayer.addGraphic(startFlyGraphic); takeOffPointGraphicLayer.addGraphic(startFlyGraphic);
// 处理和加载航点 // 处理和加载航点
if(props.waylineWpmlConfig.Folder.Placemark.length > 0){ if (props.waylineWpmlConfig.Folder.Placemark.length > 0) {
props.waylineWpmlConfig.Folder.Placemark?.forEach((item, index) => { props.waylineWpmlConfig.Folder.Placemark?.forEach((item, index) => {
let coordinate = item.Point.coordinates.split(','); let coordinate = item.Point.coordinates.split(',');
// 处理航点 // 处理航点
let airPointInfo = { let airPointInfo = {
id: item.index+1, id: item.index + 1,
lng: coordinate[0], lng: coordinate[0],
lat: coordinate[1], lat: coordinate[1],
alt: item.executeHeight, alt: item.executeHeight,
@ -2149,26 +2187,27 @@ const handlerEditWaypointAirLine =async () => {
cameraHorizontalAngle: 0, cameraHorizontalAngle: 0,
cameraVerticalAngle: 0, cameraVerticalAngle: 0,
focalLength: 24, focalLength: 24,
actions:[] actions: [],
}; };
// 处理动作 // 处理动作
item.actionGroup.action?.forEach((action,idx)=>{ item.actionGroup.action?.forEach((action, idx) => {
let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc])) let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc]));
actionConfig.config = JSON.parse(JSON.stringify(action)); actionConfig.config = JSON.parse(JSON.stringify(action));
console.log("123",action); console.log('123', action);
// 处理航偏角和俯仰角 // 处理航偏角和俯仰角
if(action.actionActuatorFunc == 'rotateYaw'){ if (action.actionActuatorFunc == 'rotateYaw') {
airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading;
} }
if(action.actionActuatorFunc == 'gimbalRotate'){ if (action.actionActuatorFunc == 'gimbalRotate') {
airPointInfo.cameraVerticalAngle = action.actionActuatorFuncParam.gimbalPitchRotateAngle airPointInfo.cameraVerticalAngle =
action.actionActuatorFuncParam.gimbalPitchRotateAngle;
} }
airPointInfo.actions.push(actionConfig); airPointInfo.actions.push(actionConfig);
}) });
airPoints.value?.push(airPointInfo); airPoints.value?.push(airPointInfo);
// 回显航点 // 回显航点
displayWaypointAirLine(airPointInfo); displayWaypointAirLine(airPointInfo);
@ -2176,37 +2215,35 @@ const handlerEditWaypointAirLine =async () => {
// 更新航线 // 更新航线
handlerDrawLine(); handlerDrawLine();
} }
};
} // 回显航点航线信息
const displayWaypointAirLine = (position) => {
// 回显航点航线信息 console.log('position123', position);
const displayWaypointAirLine = (position)=>{
console.log("position123",position);
// 设置航线默认高度 // 设置航线默认高度
let uuid = buildUUID(); let uuid = buildUUID();
// 获取默认航线高度 // 获取默认航线高度
// 航点三维模型 // 航点三维模型
let uavAngleGraphic = new mars3d.graphic.ModelEntity({ let uavAngleGraphic = new mars3d.graphic.ModelEntity({
id:position.id, id: position.id,
name: "航向", name: '航向',
position: [position.lng, position.lat, position.alt], position: [position.lng, position.lat, position.alt],
style: { style: {
url: "/map/uav-angle.gltf", url: '/map/uav-angle.gltf',
scale: 0.1, scale: 0.1,
heading: position.aircraftHorizontalAngle + 90, heading: position.aircraftHorizontalAngle + 90,
distanceDisplayCondition: true, distanceDisplayCondition: true,
distanceDisplayCondition_near: 0, distanceDisplayCondition_near: 0,
distanceDisplayPoint: { distanceDisplayPoint: {
color: "#00ff00", color: '#00ff00',
pixelSize: 8 pixelSize: 8,
} },
} },
}) });
graphicLayer.addGraphic(uavAngleGraphic) graphicLayer.addGraphic(uavAngleGraphic);
// 地面投影点 // 地面投影点
let stickGraphic = new mars3d.graphic.PointEntity({ let stickGraphic = new mars3d.graphic.PointEntity({
@ -2227,7 +2264,7 @@ const displayWaypointAirLine = (position)=>{
let lineGraphic = new mars3d.graphic.PolylineEntity({ let lineGraphic = new mars3d.graphic.PolylineEntity({
id: 'line' + position.id, id: 'line' + position.id,
positions: [ positions: [
[position.lng, position.lat,position.alt], [position.lng, position.lat, position.alt],
[position.lng, position.lat, 0], [position.lng, position.lat, 0],
], ],
style: { style: {
@ -2236,13 +2273,9 @@ const displayWaypointAirLine = (position)=>{
}, },
}); });
lineGroundPointLayer.addGraphic(lineGraphic); lineGroundPointLayer.addGraphic(lineGraphic);
};
let stickGraphicLayer: mars3d.layer.GraphicLayer;
}
let stickGraphicLayer: mars3d.layer.GraphicLayer;
// 飞行到此处 // 飞行到此处
const flyToThere = (e) => { const flyToThere = (e) => {
@ -2749,7 +2782,6 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
}; };
// 设置无人机轨迹 // 设置无人机轨迹
const setUAVPosition = () => { const setUAVPosition = () => {
let point = graphicLayer.getGraphicById('set-uav'); let point = graphicLayer.getGraphicById('set-uav');
const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height]; const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height];
// 更新航点 // 更新航点
@ -2874,7 +2906,7 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
style: { style: {
angle1: 10, angle1: 10,
angle2: 10, angle2: 10,
length: 50, length: 10,
rayEllipsoid: true, rayEllipsoid: true,
color: 'rgba(0,255,255,0.3)', color: 'rgba(0,255,255,0.3)',
outline: true, outline: true,
@ -2913,16 +2945,13 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
/////////////////////////////////动作处理////////////////////////////////////// /////////////////////////////////动作处理//////////////////////////////////////
const addAction = (action) => { 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(airPointActions['focus'])));
} }
// 当前航点添加动作 // 当前航点添加动作
currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(action))); currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(action)));
}; };
</script> </script>
@ -2965,7 +2994,25 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
z-index: 999; 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; width:500px;
background:rgba(0,0,0,0.6); background:rgba(0,0,0,0.6);
position: absolute; position: absolute;