媒体库-历史路径展示-第一版
parent
ca57e58fab
commit
5a7ac9539c
Binary file not shown.
|
After Width: | Height: | Size: 863 B |
Binary file not shown.
|
After Width: | Height: | Size: 172 B |
@ -1,2 +1,4 @@
|
||||
// export { default as PreviewImage } from './previewImage.vue';
|
||||
// export { default as PreviewVideo } from './previewVideo.vue';
|
||||
export { default as RecordList } from './recordList.vue';
|
||||
export { default as RecordNewBuild } from './recordNewBuild.vue';
|
||||
export { default as ModalChooseObject } from './modalChooseObject.vue';
|
||||
export { default as ImageContrast } from './imageContrast.vue';
|
||||
@ -1,269 +0,0 @@
|
||||
<template>
|
||||
<div class="comparisonModal">
|
||||
<div class="closeButton">
|
||||
<LeftOutlined style="color: white; font-size: 20px; margin-right: 10px" />
|
||||
<div
|
||||
class="changeButton"
|
||||
:style="{
|
||||
background: typeOpen ? '#2A7DC9' : '#5D5F61',
|
||||
}"
|
||||
@click="typeOpen = !typeOpen"
|
||||
>
|
||||
变化检测
|
||||
<CaretUpOutlined v-if="typeOpen" />
|
||||
<CaretDownOutlined v-if="!typeOpen" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="topDiv"> 照片 AI 变化检测 Beta</div>
|
||||
<div class="bodyDiv">
|
||||
<div v-if="typeOpen" class="jiancejiluDiv">
|
||||
<div class="jiancejiluDiv_title">
|
||||
<span style="margin-left: 15px; font-size: 16px; font-weight: bold">检测记录</span>
|
||||
</div>
|
||||
<div class="jiancejiluDiv_filter">
|
||||
<div class="jiancejiluDiv_filter_row1">
|
||||
<a-range-picker v-model:value="value1" />
|
||||
<SearchOutlined
|
||||
class="SearchOutlined"
|
||||
:style="{
|
||||
color: showSearch ? '#2D8CF0' : '#ffffff',
|
||||
}"
|
||||
@click="showSearch = !showSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="jiancejiluDiv_filter_row2" v-if="showSearch">
|
||||
<a-input
|
||||
v-model:value="value2"
|
||||
placeholder="按检测名称搜索"
|
||||
style="width: 90%"
|
||||
></a-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jiancejiluDiv_dropdown">
|
||||
<a-dropdown>
|
||||
<a class="jiancejiluDiv_dropdown_showtitle" @click.prevent>
|
||||
{{ dropdownSelect }}
|
||||
<CaretDownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a @click="dropdownSelect = '所有航点航线'">所有航点航线</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="dropdownSelect = '巡检航点航线'">巡检航点航线</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="imageDiv"
|
||||
:style="{
|
||||
width: typeOpen ? 'calc(100% - 360px)' : '100%',
|
||||
}"
|
||||
>
|
||||
<div class="imageDiv_Comparison">
|
||||
<div class="imageDiv_Comparison_title">视窗1</div>
|
||||
<div class="imageDiv_Comparison_1">1</div>
|
||||
</div>
|
||||
<div class="imageDiv_Comparison">
|
||||
<div class="imageDiv_Comparison_title">视窗2</div>
|
||||
<div class="imageDiv_Comparison_2">2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
LeftOutlined,
|
||||
CaretDownOutlined,
|
||||
CaretUpOutlined,
|
||||
SearchOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
|
||||
const emit = defineEmits(['closeComparisonModal']);
|
||||
|
||||
const typeOpen = ref(true);
|
||||
const showSearch = ref(false);
|
||||
const dropdownSelect = ref('所有航点航线');
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.comparisonModal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 920px;
|
||||
background: #000000;
|
||||
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
// 关闭按钮
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.changeButton {
|
||||
height: 30px;
|
||||
width: 120px;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 标题
|
||||
.topDiv {
|
||||
background: #101010;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 内容
|
||||
.bodyDiv {
|
||||
background: #000000;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: calc(100% - 60px);
|
||||
|
||||
// 检测记录
|
||||
.jiancejiluDiv {
|
||||
position: relative;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
|
||||
// 标题
|
||||
.jiancejiluDiv_title {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
color: #ffffff;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ffffff55;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
// 查询
|
||||
.jiancejiluDiv_filter {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
|
||||
.jiancejiluDiv_filter_row1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.SearchOutlined {
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.jiancejiluDiv_filter_row2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉框
|
||||
.jiancejiluDiv_dropdown {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
.jiancejiluDiv_dropdown_showtitle {
|
||||
color: #ffffff;
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.imageDiv {
|
||||
position: relative;
|
||||
display: flex;
|
||||
// width: 100%;
|
||||
width: calc(100% - 360px);
|
||||
gap: 5px;
|
||||
|
||||
.imageDiv_Comparison {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
.imageDiv_Comparison_title {
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
margin-left: 35px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.imageDiv_Comparison_1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 30px;
|
||||
background: #2773c3;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.imageDiv_Comparison_2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
background: #cb8824;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
|
||||
.imageDiv_Comparison_2 {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="imageDiv_">
|
||||
<div class="imageDiv_Comparison">
|
||||
<div class="imageDiv_Comparison_title">视窗1</div>
|
||||
<div class="imageDiv_Comparison_1">1</div>
|
||||
<div
|
||||
ref="mouseCanvasRef"
|
||||
@mousedown="onMouseDown"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
||||
transition: 'transform 0.2s',
|
||||
width: `100%`,
|
||||
height: `100%`,
|
||||
background: `url(${nowImageGroup?.show1?.url}) no-repeat`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="imageDiv_Comparison">
|
||||
<div class="imageDiv_Comparison_title">视窗2</div>
|
||||
<div class="imageDiv_Comparison_2">2</div>
|
||||
<div
|
||||
ref="mouseCanvasRef"
|
||||
@mousedown="onMouseDown"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
||||
transition: 'transform 0.2s',
|
||||
width: `100%`,
|
||||
height: `100%`,
|
||||
background: `url(${nowImageGroup?.show2?.url}) no-repeat`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="imageDiv_BottomButton">
|
||||
<div class="bottomButtonList">
|
||||
<!-- 上一个 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>上一个</span>
|
||||
</template>
|
||||
<LeftOutlined @click="clickLeftOrRightButton('left')" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="button">
|
||||
{{ nowImageGroupIndex }}
|
||||
/
|
||||
{{ nowRecord.imageGroup.length }}
|
||||
</div>
|
||||
<!-- 下一个 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>下一个</span>
|
||||
</template>
|
||||
<RightOutlined @click="clickLeftOrRightButton('right')" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<span style="color: gray; margin-left: 5px; margin-right: 5px">|</span>
|
||||
<!-- 放大 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>放大</span>
|
||||
</template>
|
||||
<ZoomInOutlined @click="zoomIn" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 缩小 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>缩小</span>
|
||||
</template>
|
||||
<ZoomOutOutlined @click="zoomOut" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 顺时针旋转 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>顺时针旋转</span>
|
||||
</template>
|
||||
<RotateRightOutlined @click="rotateClockwise" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 逆时针旋转 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>逆时针旋转</span>
|
||||
</template>
|
||||
<RotateLeftOutlined @click="rotateCounterClockwise" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 刷新 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>刷新</span>
|
||||
</template>
|
||||
<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>
|
||||
<!-- 涂鸦标记 -->
|
||||
<div class="button">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>涂鸦标记</span>
|
||||
</template>
|
||||
<EditOutlined @click="unlockOut" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
RightOutlined,
|
||||
LeftOutlined,
|
||||
ZoomOutOutlined,
|
||||
ZoomInOutlined,
|
||||
RotateLeftOutlined,
|
||||
RotateRightOutlined,
|
||||
EditOutlined,
|
||||
FontColorsOutlined,
|
||||
RedoOutlined,
|
||||
LockOutlined,
|
||||
UnlockOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const props = defineProps(['recordList', 'nowRecord']);
|
||||
const emit = defineEmits(['']);
|
||||
|
||||
// 当前图片组-----------------------------------
|
||||
const nowImageGroup: any = ref();
|
||||
const nowImageGroupIndex = ref(1);
|
||||
|
||||
// 上一个、下一个图片对比组
|
||||
function clickLeftOrRightButton(direction) {
|
||||
const imageGroupList = props.nowRecord.imageGroup;
|
||||
const nowImageListId = cloneDeep(nowImageGroup.value.id);
|
||||
for (let index = 0; index < imageGroupList.length; index++) {
|
||||
if (imageGroupList[index].id == nowImageListId) {
|
||||
if (direction == 'left') {
|
||||
if (index == 0) {
|
||||
nowImageGroup.value = imageGroupList[imageGroupList.length - 1];
|
||||
} else {
|
||||
nowImageGroup.value = imageGroupList[index - 1];
|
||||
}
|
||||
}
|
||||
if (direction == 'right') {
|
||||
if (index == imageGroupList.length - 1) {
|
||||
nowImageGroup.value = imageGroupList[0];
|
||||
} else {
|
||||
nowImageGroup.value = imageGroupList[index + 1];
|
||||
}
|
||||
}
|
||||
getNowImageGroup();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 当前图片组的索引
|
||||
function getNowImageGroup() {
|
||||
const nowRecordImageGroupList = props.nowRecord.imageGroup.map((item) => item.id);
|
||||
nowImageGroupIndex.value = nowRecordImageGroupList.indexOf(nowImageGroup.value.id) + 1;
|
||||
}
|
||||
|
||||
// 初始化、变更后----------------------------------
|
||||
onMounted(() => {
|
||||
nowImageGroup.value = props.nowRecord.imageGroup[0];
|
||||
console.log(nowImageGroup.value);
|
||||
|
||||
getNowImageGroup();
|
||||
});
|
||||
watch(
|
||||
() => props.nowRecord,
|
||||
() => {
|
||||
nowImageGroup.value = props.nowRecord.imageGroup[0];
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
// 宽高
|
||||
const getImageWidthAndHeight = computed(() => {
|
||||
let width = 1300;
|
||||
let height = 800;
|
||||
if (props.nowRecord.imageGroup.width > 1300 || props.nowRecord.height > 800) {
|
||||
if (props.nowRecord.width / 1300 > props.nowRecord.height / 800) {
|
||||
width = 1300;
|
||||
height = (props.nowRecord.height / props.nowRecord.width) * 1300;
|
||||
} else {
|
||||
height = 800;
|
||||
width = (props.nowRecord.width / props.nowRecord.height) * 800;
|
||||
}
|
||||
} else {
|
||||
width = props.nowRecord.width;
|
||||
height = props.nowRecord.height;
|
||||
}
|
||||
return [width, height];
|
||||
});
|
||||
|
||||
// 缩放比例、旋转-----------------------------------
|
||||
const scale = ref(1);
|
||||
const rotationAngle = ref(0);
|
||||
// 放大函数
|
||||
function zoomIn() {
|
||||
if (scale.value < 3) {
|
||||
// 设置最大缩放倍数为3倍
|
||||
scale.value += 0.1;
|
||||
}
|
||||
}
|
||||
// 缩小函数
|
||||
function zoomOut() {
|
||||
if (scale.value > 0.5) {
|
||||
// 设置最小缩放倍数为0.5倍
|
||||
scale.value -= 0.1;
|
||||
}
|
||||
}
|
||||
// 顺时针旋转函数
|
||||
function rotateClockwise() {
|
||||
rotationAngle.value += 90; // 每次旋转90度
|
||||
}
|
||||
// 逆时针旋转
|
||||
function rotateCounterClockwise() {
|
||||
rotationAngle.value -= 90; // 每次旋转-90度
|
||||
}
|
||||
// 刷新
|
||||
function refresh() {
|
||||
scale.value = 1;
|
||||
rotationAngle.value = 0;
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.imageDiv_ {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// gap: 4px;
|
||||
}
|
||||
|
||||
.imageDiv_Comparison {
|
||||
position: relative;
|
||||
width: calc(50% - 5px);
|
||||
height: 92%;
|
||||
outline: 1px solid #ffffff55;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.imageDiv_Comparison_title {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 35px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
z-index: 200;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.imageDiv_Comparison_1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 30px;
|
||||
background: #2773c3;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.imageDiv_Comparison_2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
background: #cb8824;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.imageDiv_BottomButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #101010;
|
||||
// background: red;
|
||||
height: calc(8% - 5px);
|
||||
width: 100%;
|
||||
|
||||
.bottomButtonList {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="comparisonModal">
|
||||
<div class="closeButton">
|
||||
<LeftOutlined
|
||||
style="color: white; font-size: 20px; margin-right: 10px"
|
||||
@click="closeComparisonModal"
|
||||
/>
|
||||
<div
|
||||
class="changeButton"
|
||||
:style="{
|
||||
background: typeOpen ? '#2A7DC9' : '#5D5F61',
|
||||
}"
|
||||
@click="changeTypeOpen"
|
||||
>
|
||||
变化检测
|
||||
<CaretUpOutlined v-if="typeOpen" />
|
||||
<CaretDownOutlined v-if="!typeOpen" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="topDiv"> 照片 AI 变化检测 Beta</div>
|
||||
<div class="bodyDiv">
|
||||
<!-- 检测记录 -->
|
||||
<div v-if="typeOpen" class="jiancejiluDiv">
|
||||
<RecordList
|
||||
v-if="!isNewBuildStatus"
|
||||
:recordList="recordList"
|
||||
:nowRecord="nowRecord"
|
||||
@chooseNowRecord="chooseNowRecord"
|
||||
@openIsNewBuildStatus="openIsNewBuildStatus"
|
||||
/>
|
||||
<RecordNewBuild v-if="isNewBuildStatus" @closeIsNewBuildStatus="closeIsNewBuildStatus" />
|
||||
</div>
|
||||
<!-- 对比部分 -->
|
||||
<div
|
||||
class="imageDiv"
|
||||
:style="{
|
||||
width: typeOpen ? 'calc(100% - 360px)' : '100%',
|
||||
}"
|
||||
>
|
||||
<ImageContrast :recordList="recordList" :nowRecord="nowRecord" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { LeftOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
|
||||
import { RecordList, RecordNewBuild, ImageContrast } from './comparison';
|
||||
|
||||
const props = defineProps(['']);
|
||||
const emit = defineEmits(['closeComparisonModal']);
|
||||
|
||||
// 右侧窗口是否展示
|
||||
const typeOpen = ref(true);
|
||||
function changeTypeOpen() {
|
||||
typeOpen.value = !typeOpen.value;
|
||||
}
|
||||
|
||||
const recordList = ref([
|
||||
{
|
||||
id: '0',
|
||||
name: '变化检测_2024-05-15 17:13:27',
|
||||
time: '2024-05-15 17:13:27',
|
||||
createtime1: '2023-08-15 17:13:27',
|
||||
createtime2: '2024-05-15 17:13:27',
|
||||
changeRegion: '47',
|
||||
imageGroup: [
|
||||
{
|
||||
id: '01',
|
||||
show1: {
|
||||
title: 'DJL_20230825170915_0003_W_广角1',
|
||||
time: '2023-08-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
show2: {
|
||||
title: 'DJL_20240925170915_0003_W_广角1',
|
||||
time: '2024-09-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
show1: {
|
||||
title: 'DJL_20230825170915_0003_W_广角2',
|
||||
time: '2023-08-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
show2: {
|
||||
title: 'DJL_20240925170915_0003_W_广角2',
|
||||
time: '2024-09-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
show1: {
|
||||
title: 'DJL_20230825170915_0003_W_广角3',
|
||||
time: '2023-08-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
show2: {
|
||||
title: 'DJL_20240925170915_0003_W_广角3',
|
||||
time: '2024-09-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: '变化检测_2024-05-25 17:13:27',
|
||||
time: '2024-05-25 17:13:27',
|
||||
createtime1: '2024-05-25 17:13:27',
|
||||
createtime2: '2024-05-25 17:13:27',
|
||||
changeRegion: '47',
|
||||
imageGroup: [
|
||||
{
|
||||
id: '11',
|
||||
show1: {
|
||||
title: 'DJL_20230825170915_0003_W_广角1',
|
||||
time: '2023-08-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
show2: {
|
||||
title: 'DJL_20240925170915_0003_W_广角1',
|
||||
time: '2024-09-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '变化检测_2024-06-05 17:13:27',
|
||||
time: '2024-06-05 17:13:27',
|
||||
createtime1: '2024-06-05 17:13:27',
|
||||
createtime2: '2024-06-05 17:13:27',
|
||||
changeRegion: '47',
|
||||
imageGroup: [
|
||||
{
|
||||
id: '21',
|
||||
show1: {
|
||||
title: 'DJL_20230825170915_0003_W_广角1',
|
||||
time: '2023-08-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
show2: {
|
||||
title: 'DJL_20240925170915_0003_W_广角1',
|
||||
time: '2024-09-25 17:22:56',
|
||||
size: '8M',
|
||||
width: 1024,
|
||||
height: 576,
|
||||
url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
|
||||
imageJson: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '变化检测_2024-06-25 17:13:27',
|
||||
time: '2024-06-25 17:13:27',
|
||||
createtime1: '2024-06-25 17:13:27',
|
||||
createtime2: '2024-06-25 17:13:27',
|
||||
changeRegion: '47',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '变化检测_2024-06-25 17:13:27',
|
||||
time: '2024-06-25 17:13:27',
|
||||
createtime1: '2024-06-25 17:13:27',
|
||||
createtime2: '2024-06-25 17:13:27',
|
||||
changeRegion: '47',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '变化检测_2024-06-25 17:13:27',
|
||||
time: '2024-06-25 17:13:27',
|
||||
createtime1: '2024-06-25 17:13:27',
|
||||
createtime2: '2024-06-25 17:13:27',
|
||||
changeRegion: '47',
|
||||
},
|
||||
]);
|
||||
const nowRecord = ref(recordList.value[0]);
|
||||
// 选择当前记录
|
||||
function chooseNowRecord(value) {
|
||||
nowRecord.value = value;
|
||||
}
|
||||
// 关闭窗口
|
||||
function closeComparisonModal() {
|
||||
emit('closeComparisonModal');
|
||||
}
|
||||
|
||||
// 是否展示新建检测
|
||||
const isNewBuildStatus = ref(false);
|
||||
// 开启
|
||||
function openIsNewBuildStatus() {
|
||||
isNewBuildStatus.value = true;
|
||||
}
|
||||
// 关闭
|
||||
function closeIsNewBuildStatus() {
|
||||
isNewBuildStatus.value = false;
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.comparisonModal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 920px;
|
||||
background: #000000;
|
||||
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
// 关闭按钮
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.changeButton {
|
||||
height: 30px;
|
||||
width: 120px;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 标题
|
||||
.topDiv {
|
||||
background: #101010;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 内容
|
||||
.bodyDiv {
|
||||
background: #000000;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: calc(100% - 60px);
|
||||
|
||||
// 检测记录
|
||||
.jiancejiluDiv {
|
||||
position: relative;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.imageDiv {
|
||||
position: relative;
|
||||
width: calc(100% - 360px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="recordList_title">
|
||||
<span style="margin-left: 15px; font-size: 16px; font-weight: bold">检测记录</span>
|
||||
<a-button type="primary" style="margin-right: 15px" @click="openIsNewBuildStatus">
|
||||
<PlusOutlined />新建检测
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="recordList_filter">
|
||||
<div class="recordList_filter_row1">
|
||||
<a-range-picker v-model:value="rangePickerValue" />
|
||||
<SearchOutlined
|
||||
class="SearchOutlined"
|
||||
:style="{
|
||||
color: showSearch ? '#2D8CF0' : '#ffffff',
|
||||
}"
|
||||
@click="inputSearchValue ? '' : (showSearch = !showSearch)"
|
||||
/>
|
||||
</div>
|
||||
<div class="recordList_filter_row2" v-if="showSearch">
|
||||
<a-input
|
||||
v-model:value="inputSearchValue"
|
||||
allow-clear
|
||||
placeholder="按检测名称搜索"
|
||||
style="width: 90%"
|
||||
>
|
||||
<template #suffix>
|
||||
<SearchOutlined class="SearchOutlined" @click="searchFilter" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recordList_dropdown">
|
||||
<a-dropdown>
|
||||
<a class="recordList_dropdown_showtitle" @click.prevent>
|
||||
{{ dropdownSelect }}
|
||||
<CaretDownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a @click="dropdownSelect = '所有航点航线'">所有航点航线</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a @click="dropdownSelect = '巡检航点航线'">巡检航点航线</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<div class="recordList_list" :style="{ height: showSearch ? '688px' : '720px' }">
|
||||
<div
|
||||
v-for="record in props.recordList"
|
||||
:key="record.id"
|
||||
class="record"
|
||||
:style="{
|
||||
outline: record.id == props.nowRecord.id ? '2px solid #2773c3' : '',
|
||||
}"
|
||||
>
|
||||
<div class="record_title">
|
||||
<div>{{ record.name }}</div>
|
||||
<div>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>查看</span>
|
||||
</template>
|
||||
<RightSquareOutlined
|
||||
style="font-size: 16px; margin-right: 10px"
|
||||
@click="chooseNowRecord(record)"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>编辑</span>
|
||||
</template>
|
||||
<DashOutlined style="font-size: 16px" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record_tag">
|
||||
<a-tag color="gray">变化区域{{ record.changeRegion }}</a-tag>
|
||||
</div>
|
||||
<div class="record_duibi">
|
||||
<div class="point" style="background: #2773c3" />{{ record.createtime1 }}
|
||||
</div>
|
||||
<div class="record_duibi">
|
||||
<div class="point" style="background: #cb8824" />{{ record.createtime2 }}
|
||||
</div>
|
||||
<div class="record_time">
|
||||
<ClockCircleOutlined style="margin-right: 5px" />{{ record.time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
CaretDownOutlined,
|
||||
RightSquareOutlined,
|
||||
DashOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps(['recordList', 'nowRecord']);
|
||||
const emit = defineEmits(['chooseNowRecord', 'openIsNewBuildStatus']);
|
||||
|
||||
const showSearch = ref(false);
|
||||
const dropdownSelect = ref('所有航点航线');
|
||||
|
||||
// 日期范围
|
||||
const rangePickerValue = ref([]);
|
||||
// 查询框
|
||||
const inputSearchValue = ref('');
|
||||
function searchFilter() {
|
||||
console.log(123);
|
||||
}
|
||||
|
||||
// 选择当前记录
|
||||
function chooseNowRecord(value) {
|
||||
emit('chooseNowRecord', value);
|
||||
}
|
||||
// 新建新的检测记录
|
||||
function openIsNewBuildStatus() {
|
||||
emit('openIsNewBuildStatus');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 标题
|
||||
.recordList_title {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
color: #ffffff;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ffffff55;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// 查询
|
||||
.recordList_filter {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
|
||||
.recordList_filter_row1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.SearchOutlined {
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.recordList_filter_row2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// 下拉框
|
||||
.recordList_dropdown {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
.recordList_dropdown_showtitle {
|
||||
color: #ffffff;
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
// 列表
|
||||
.recordList_list {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
// height: 705px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
gap: 5px;
|
||||
|
||||
.record {
|
||||
position: relative;
|
||||
background: #3c3c3c;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
margin: 10px 20px 10px 20px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
|
||||
.record_title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.record_tag {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.record_duibi {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: gray;
|
||||
// height: 15px;
|
||||
width: 90%;
|
||||
|
||||
.point {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.record_time {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 滑动条隐藏
|
||||
.recordList_list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.recordList_list {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="pathModal">
|
||||
<div
|
||||
class="leftMenuDiv"
|
||||
:style="{
|
||||
width: leftMenuShow ? '300px' : '40px',
|
||||
}"
|
||||
>
|
||||
<PathLeftMenu
|
||||
:leftMenuShow="leftMenuShow"
|
||||
:allImageDataList="dataJson"
|
||||
:nowShowImageData="nowShowImageData"
|
||||
@changeLeftMenuShow="changeLeftMenuShow"
|
||||
@closePathModal="closePathModal"
|
||||
/>
|
||||
</div>
|
||||
<div class="mapDiv" :style="{ width: dynamicWidth }">
|
||||
<PathMap
|
||||
ref="pathMapRef"
|
||||
:allImageDataList="dataJson"
|
||||
:nowShowImageData="nowShowImageData"
|
||||
@setNowShowImageData="setNowShowImageData"
|
||||
@closePathImage="closePathImage"
|
||||
/>
|
||||
</div>
|
||||
<div class="imageShowDiv" v-if="pathImageShow">
|
||||
<PathImageShow
|
||||
:allImageDataList="dataJson"
|
||||
:nowShowImageData="nowShowImageData"
|
||||
@setNowShowImageData="setNowShowImageData"
|
||||
@closePathImage="closePathImage"
|
||||
@handlerLocation="handlerLocation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { PathLeftMenu, PathMap, PathImageShow } from './path';
|
||||
import dataJson from './data.json';
|
||||
|
||||
const props = defineProps(['']);
|
||||
const emits = defineEmits(['closePathModal']);
|
||||
// 地图宽度
|
||||
const dynamicWidth = computed(() => {
|
||||
if (leftMenuShow.value) {
|
||||
return pathImageShow.value ? 'calc(100% - 1020px)' : 'calc(100% - 300px)';
|
||||
} else {
|
||||
return pathImageShow.value ? 'calc(100% - 760px)' : 'calc(100% - 40px)';
|
||||
}
|
||||
});
|
||||
|
||||
// 当前展示的图片
|
||||
const nowShowImageData = ref();
|
||||
const pathMapRef = ref();
|
||||
// 设置当前展示的图片
|
||||
function setNowShowImageData(value) {
|
||||
if (value) {
|
||||
pathImageShow.value = true;
|
||||
} else {
|
||||
pathImageShow.value = false;
|
||||
}
|
||||
nowShowImageData.value = value;
|
||||
pathMapRef.value.setNowShowImageByRight();
|
||||
}
|
||||
|
||||
// 左侧目录是否显示
|
||||
const leftMenuShow = ref(false);
|
||||
function changeLeftMenuShow() {
|
||||
leftMenuShow.value = !leftMenuShow.value;
|
||||
}
|
||||
// 右侧图片是否显示
|
||||
const pathImageShow = ref(false);
|
||||
// 关闭右侧图片
|
||||
function closePathImage() {
|
||||
pathImageShow.value = false;
|
||||
}
|
||||
// 关闭弹窗
|
||||
function closePathModal() {
|
||||
emits('closePathModal');
|
||||
}
|
||||
// 移动位置
|
||||
function handlerLocation(position) {
|
||||
pathMapRef.value.handlerLocation([position.lng, position.lat]);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.pathModal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.leftMenuDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.mapDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: auto;
|
||||
}
|
||||
|
||||
.imageShowDiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: 37%;
|
||||
width: 720px;
|
||||
// min-width: 720px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
export { default as PathLeftMenu } from './pathLeftMenu.vue';
|
||||
export { default as PathImageShow } from './pathImageShow.vue';
|
||||
export { default as PathMap } from './pathMap.vue';
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="leftMenu">
|
||||
<div>
|
||||
<CloseOutlined style="font-size: 24px; margin: 8px; color: white" @click="closePathModal" />
|
||||
</div>
|
||||
<div class="suojinButton" @click="changeLeftMenuShow">
|
||||
<DoubleLeftOutlined v-if="leftMenuShow" style="font-size: 16px" />
|
||||
<DoubleRightOutlined v-if="!leftMenuShow" style="font-size: 16px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { CloseOutlined, DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||||
const props = defineProps(['leftMenuShow', 'allImageDataList', 'nowShowImageData']);
|
||||
const emits = defineEmits(['changeLeftMenuShow', 'closePathModal']);
|
||||
|
||||
// 隐藏或者显示
|
||||
function changeLeftMenuShow() {
|
||||
emits('changeLeftMenuShow');
|
||||
}
|
||||
// 关闭弹窗
|
||||
function closePathModal() {
|
||||
emits('closePathModal');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.leftMenu {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #232323;
|
||||
}
|
||||
|
||||
.suojinButton {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
right: -18px;
|
||||
height: 90px;
|
||||
width: 18px;
|
||||
background: #ffffff;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div ref="vChartRef" id="mars3d-container" class="mars3d-container">
|
||||
<div class="mapInfo">
|
||||
<span> {{ props.nowPreviewRecord.lat }}°N</span>
|
||||
<span> {{ props.nowPreviewRecord.lng }}°E</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineEmits } from 'vue';
|
||||
|
||||
import * as mars3d from 'mars3d';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
|
||||
const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
|
||||
const emits = defineEmits(['chooseNowPreviewRecord', 'reloadTable', 'mapOnLoad']);
|
||||
|
||||
let map: mars3d.Map; // 地图对象
|
||||
let graphicData: any = [];
|
||||
let graphicLayers = new mars3d.layer.GraphicLayer();
|
||||
|
||||
const vChartRef: any = ref<HTMLElement>();
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
addImage();
|
||||
});
|
||||
|
||||
const initMap = () => {
|
||||
map = new mars3d.Map(vChartRef.value, {
|
||||
scene: {
|
||||
center: {
|
||||
lat: parseFloat(props.nowPreviewRecord.lat),
|
||||
lng: parseFloat(props.nowPreviewRecord.lng),
|
||||
alt: 8306.3,
|
||||
heading: 360,
|
||||
pitch: -45,
|
||||
},
|
||||
scene3DOnly: false,
|
||||
shadows: false,
|
||||
removeDblClick: true,
|
||||
sceneMode: 3,
|
||||
showSun: true,
|
||||
showMoon: true,
|
||||
showSkyBox: true,
|
||||
showSkyAtmosphere: true,
|
||||
fog: true,
|
||||
fxaa: true,
|
||||
requestRenderMode: true,
|
||||
contextOptions: {
|
||||
requestWebgl1: false,
|
||||
webgl: {
|
||||
preserveDrawingBuffer: true,
|
||||
alpha: false,
|
||||
stencil: true,
|
||||
powerPreference: 'high-performance',
|
||||
},
|
||||
},
|
||||
globe: {
|
||||
depthTestAgainstTerrain: false,
|
||||
baseColor: '#546a53',
|
||||
showGroundAtmosphere: true,
|
||||
enableLighting: false,
|
||||
},
|
||||
cameraController: {
|
||||
zoomFactor: 3,
|
||||
minimumZoomDistance: 1,
|
||||
maximumZoomDistance: 50000000,
|
||||
enableRotate: true,
|
||||
enableTranslate: true,
|
||||
enableTilt: true,
|
||||
enableZoom: true,
|
||||
enableCollisionDetection: true,
|
||||
minimumCollisionTerrainHeight: 15000,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
homeButton: true,
|
||||
baseLayerPicker: false,
|
||||
sceneModePicker: false,
|
||||
vrButton: false,
|
||||
fullscreenButton: false,
|
||||
navigationHelpButton: false,
|
||||
animation: false,
|
||||
timeline: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
selectionIndicator: false,
|
||||
showRenderLoopErrors: false,
|
||||
contextmenu: {
|
||||
hasDefault: false,
|
||||
},
|
||||
mouseDownView: false,
|
||||
zoom: false,
|
||||
compass: false,
|
||||
distanceLegend: false,
|
||||
},
|
||||
method: {
|
||||
templateValues: {
|
||||
dataServer: '//data.mars3d.cn',
|
||||
gltfServerUrl: '//data.mars3d.cn/gltf',
|
||||
},
|
||||
},
|
||||
terrain: {
|
||||
url: '//data.mars3d.cn/terrain',
|
||||
show: true,
|
||||
clip: true,
|
||||
},
|
||||
basemaps: [
|
||||
{
|
||||
id: 10,
|
||||
name: '地图底图',
|
||||
type: 'group',
|
||||
opacity: 1,
|
||||
},
|
||||
{
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 1,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 2,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
layers: [],
|
||||
});
|
||||
emits('mapOnLoad', map);
|
||||
};
|
||||
|
||||
const addImage = () => {
|
||||
// 删除旧数据
|
||||
graphicData?.forEach((graphicLayer) => {
|
||||
graphicLayers.removeGraphic(graphicLayer);
|
||||
});
|
||||
// 图层
|
||||
map.addLayer(graphicLayers);
|
||||
// 图层数据
|
||||
graphicData = [];
|
||||
props.previewRecordList.forEach((item) => {
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id: item.id,
|
||||
position: [parseFloat(item.lng), parseFloat(item.lat)],
|
||||
style: {
|
||||
// image: '@/assets/images/point.png',
|
||||
image: '../point.png',
|
||||
clampToGround: true,
|
||||
scale: 1,
|
||||
label: {
|
||||
text: item.name,
|
||||
font_size: 12,
|
||||
color: '#ffffff',
|
||||
pixelOffsetY: -30,
|
||||
pixelOffsetX: 0,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 6000,
|
||||
distanceDisplayCondition_near: 0,
|
||||
},
|
||||
},
|
||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
|
||||
<div style="postion: relative; padding: 60px; max-width: 500px; overflow: hidden;">
|
||||
|
||||
</div>
|
||||
<div style="position: absolute; bottom: 0; left: 0; width: 85px; height: 2px; transform: rotate(-45deg) translate(15px, -25px); background-color: #15babc;" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: 0,
|
||||
offsetX: 0,
|
||||
template: '{content}',
|
||||
horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
|
||||
verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
|
||||
},
|
||||
pointerEvents: true,
|
||||
});
|
||||
// 将新图形添加到图层中
|
||||
graphicLayers.addGraphic(graphic);
|
||||
graphicData.push(graphic);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mars3d-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mapInfo {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: #3d3f3aaa;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
span {
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box-container">
|
||||
<div :id="'root' + props.timestamp"></div>
|
||||
</div>
|
||||
<div class="box-controls">
|
||||
<div class="left-controls">
|
||||
<div>
|
||||
<n-button quaternary @click="playOrPauseClick">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Pause
|
||||
v-if="control_playOrPause"
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
color: '#ffffff',
|
||||
}"
|
||||
/>
|
||||
<CaretForward
|
||||
v-if="!control_playOrPause"
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
color: '#ffffff',
|
||||
}"
|
||||
/>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
<div>
|
||||
<n-button quaternary @click="volumeClick">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<VolumeHigh
|
||||
v-if="!control_volume"
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
color: '#ffffff',
|
||||
}"
|
||||
/>
|
||||
<VolumeMute
|
||||
v-if="control_volume"
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
color: '#ffffff',
|
||||
}"
|
||||
/>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-controls">
|
||||
<n-button quaternary @click="fullScreenClick">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<ExpandOutlined
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
color: '#ffffff',
|
||||
}"
|
||||
/>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, watch, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { ExpandOutlined } from '@ant-design/icons-vue';
|
||||
import { Pause, CaretForward, VolumeHigh, VolumeMute } from '@vicons/ionicons5';
|
||||
|
||||
let BASE_URL = 'http://111.17.207.220:9001/api';
|
||||
|
||||
const props = defineProps([
|
||||
'deviceId',
|
||||
'channelId',
|
||||
'width',
|
||||
'height',
|
||||
'timestamp',
|
||||
'videoMuted',
|
||||
]);
|
||||
let clPlayer: any = null;
|
||||
|
||||
// 开始播放/暂停播放
|
||||
const control_playOrPause = ref(true);
|
||||
// 音量:true为静音
|
||||
const control_volume = ref(true);
|
||||
// 全屏
|
||||
const control_fullScreen = ref(false);
|
||||
|
||||
// 开始播放/暂停播放方法
|
||||
function playOrPauseClick() {
|
||||
control_playOrPause.value = !control_playOrPause.value;
|
||||
if (control_playOrPause.value) {
|
||||
clPlayer.play();
|
||||
} else {
|
||||
clPlayer.pause();
|
||||
}
|
||||
}
|
||||
|
||||
// 音量
|
||||
function volumeClick() {
|
||||
control_volume.value = !control_volume.value;
|
||||
if (control_volume.value) {
|
||||
clPlayer.volume(0);
|
||||
} else {
|
||||
clPlayer.volume(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 全屏
|
||||
function fullScreenClick() {
|
||||
clPlayer.fullScreen();
|
||||
}
|
||||
|
||||
// 获取kitToken
|
||||
function getKitToken(deviceId, channelId) {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: BASE_URL + '/Camera/getKitToken?deviceId=' + deviceId + '&channelId=0' + '&type=0',
|
||||
}).then((res) => {
|
||||
let kitToken = res.data.result.data.kitToken;
|
||||
loadMonitorVideo(deviceId, kitToken, channelId);
|
||||
});
|
||||
}
|
||||
|
||||
// 开始
|
||||
function loadMonitorVideo(deviceId, kitToken, channelId) {
|
||||
// 结束上一个
|
||||
closeMonitorVideo();
|
||||
|
||||
clPlayer = new imouPlayer({
|
||||
id: 'root' + props.timestamp,
|
||||
width: props.width,
|
||||
height: props.height - 35,
|
||||
deviceId: deviceId,
|
||||
token: kitToken,
|
||||
channelId: channelId,
|
||||
type: 1,
|
||||
streamId: 0,
|
||||
recordType: 'cloud',
|
||||
code: '',
|
||||
controls: true,
|
||||
});
|
||||
clPlayer.volume(0);
|
||||
}
|
||||
|
||||
// 结束
|
||||
function closeMonitorVideo() {
|
||||
if (clPlayer != null) {
|
||||
clPlayer.destroy();
|
||||
clPlayer = null;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.deviceId,
|
||||
() => {
|
||||
getKitToken(props.deviceId, props.channelId);
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getKitToken(props.deviceId, props.channelId);
|
||||
control_volume.value = props.videoMuted;
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
closeMonitorVideo();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
width: v-bind('`${props.width}px`');
|
||||
height: v-bind('`${props.height}px`');
|
||||
z-index: 99;
|
||||
}
|
||||
.box-container {
|
||||
width: v-bind('`${props.width}px`');
|
||||
height: v-bind('`${props.height-35}px`');
|
||||
}
|
||||
|
||||
.box-controls {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
background: #000000;
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.left-controls {
|
||||
display: flex;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.right-controls {
|
||||
justify-self: end;
|
||||
}
|
||||
</style>
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<easy-player
|
||||
:video-url="getUrl(props.serialNumberValue)"
|
||||
live
|
||||
autoplay
|
||||
fluent="true"
|
||||
:style="{ width: props.width + 'px', height: props.height + 'px' }"
|
||||
:stretch="props.videoFit"
|
||||
:muted="props.videoMuted"
|
||||
:loop="props.videoLoop"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps([
|
||||
'serialNumberValue',
|
||||
'width',
|
||||
'height',
|
||||
'videoMuted',
|
||||
'videoLoop',
|
||||
'videoFit',
|
||||
]);
|
||||
|
||||
function getUrl(value) {
|
||||
return 'http://221.2.83.254:7012/live/' + value + '.m3u8';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: v-bind('`${props.width}px`');
|
||||
height: v-bind('`${props.height}px`');
|
||||
z-index: 99;
|
||||
}
|
||||
::v-deep .vjs-bitrate-control {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<video
|
||||
:id="'TCPlayerVideo'"
|
||||
class="TCPlayer-video-container"
|
||||
preload="auto"
|
||||
crossOrigin="anonymous"
|
||||
playsinline
|
||||
autoplay
|
||||
:loop="false"
|
||||
:muted="true"
|
||||
:style="{
|
||||
width: props.width + 'px',
|
||||
height: props.height + 'px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
|
||||
|
||||
const props = defineProps(['serialNumberValue', 'width', 'height']);
|
||||
|
||||
// 视频控件初始化
|
||||
let player: any = null;
|
||||
|
||||
function handlerPlayVideo() {
|
||||
nextTick(() => {
|
||||
if (player) {
|
||||
player.src(props.serialNumberValue);
|
||||
} else {
|
||||
player = TCPlayer('TCPlayerVideo', {});
|
||||
player.src(props.serialNumberValue);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closePlayerVideo() {
|
||||
if (player) {
|
||||
player.dispose();
|
||||
player = null;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.serialNumberValue,
|
||||
() => {
|
||||
handlerPlayVideo();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
handlerPlayVideo();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
closePlayerVideo();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
handlerPlayVideo,
|
||||
closePlayerVideo,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
video {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
::v-deep .vjs-live-control .vjs-live-display {
|
||||
width: 100px !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,263 +0,0 @@
|
||||
<template>
|
||||
<div class="modelDiv">
|
||||
<div class="title">
|
||||
<div class="title-1">{{ props.nowPreviewRecord.name }}</div>
|
||||
<div class="title-2">
|
||||
{{ props.nowPreviewRecord.createTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="closeButton">
|
||||
<CloseOutlined @click="closeModal" style="font-size: 25px; color: white" />
|
||||
</div>
|
||||
|
||||
<div class="modelDiv_2D3D">
|
||||
<PreviewModel2D
|
||||
v-if="props.nowPreviewRecord.type.includes('2D')"
|
||||
:nowPreviewRecord="nowPreviewRecord"
|
||||
/>
|
||||
<PreviewModel3D
|
||||
v-if="props.nowPreviewRecord.type.includes('3D')"
|
||||
:nowPreviewRecord="nowPreviewRecord"
|
||||
/>
|
||||
</div>
|
||||
<div class="modelDiv_bottom">
|
||||
<div class="buttonList">
|
||||
<!-- 下载 -->
|
||||
<div class="button">
|
||||
<DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.url)" />
|
||||
</div>
|
||||
<!-- 删除 -->
|
||||
<div class="button"> <DeleteOutlined @click="deleteCanvas" /> </div>
|
||||
</div>
|
||||
<div class="imageList">
|
||||
<div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
|
||||
<div
|
||||
v-if="li.type.includes('model')"
|
||||
:class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
|
||||
>
|
||||
<FileOutlined style="font-size: 60px; color: white" />
|
||||
<div
|
||||
v-if="li.type.includes('2D')"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 35px;
|
||||
font-size: 25px;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
2D
|
||||
</div>
|
||||
<div
|
||||
v-if="li.type.includes('3D')"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 35px;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
color: #ffffff;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
3D
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上一张、下一张图片 -->
|
||||
<div class="leftButton" @click="clickLeftOrRightButton('left')">
|
||||
<LeftOutlined style="color: #ffffff; font-size: 30px" />
|
||||
</div>
|
||||
<div class="rightButton" @click="clickLeftOrRightButton('right')">
|
||||
<RightOutlined style="color: #ffffff; font-size: 30px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, watch, computed } from 'vue';
|
||||
import {
|
||||
CloseOutlined,
|
||||
RightOutlined,
|
||||
LeftOutlined,
|
||||
DownloadOutlined,
|
||||
DeleteOutlined,
|
||||
FileOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { PreviewModel2D, PreviewModel3D } from './priview2D3D';
|
||||
|
||||
const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
|
||||
const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']);
|
||||
|
||||
// 上一张、下一张图片
|
||||
function clickLeftOrRightButton(direction) {
|
||||
const list = props.previewRecordList.filter((item) => item.type.includes('model'));
|
||||
for (let index = 0; index < list.length; index++) {
|
||||
if (list[index].id == props.nowPreviewRecord.id) {
|
||||
if (direction == 'left') {
|
||||
if (index == 0) {
|
||||
chooseNowPreviewRecord(list[list.length - 1]);
|
||||
} else {
|
||||
chooseNowPreviewRecord(list[index - 1]);
|
||||
}
|
||||
}
|
||||
if (direction == 'right') {
|
||||
if (index == list.length - 1) {
|
||||
chooseNowPreviewRecord(list[0]);
|
||||
} else {
|
||||
chooseNowPreviewRecord(list[index + 1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择
|
||||
function chooseNowPreviewRecord(value) {
|
||||
emit('chooseNowPreviewRecord', value);
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
emit('closeModal');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.modelDiv {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 920px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
z-index: 100;
|
||||
|
||||
.title-1 {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.title-2 {
|
||||
font-size: 16px;
|
||||
color: #f0f3f3;
|
||||
}
|
||||
}
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.modelDiv_2D3D {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
background: #000000;
|
||||
}
|
||||
.modelDiv_bottom {
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
background: #1c1c1c;
|
||||
display: block;
|
||||
|
||||
.buttonList {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.imageList {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
.bottom_div {
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px;
|
||||
background: #282828;
|
||||
}
|
||||
|
||||
.bottom_div_choose {
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
outline: 3px solid #1088f2;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px;
|
||||
background: #282828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 上一张、下一张
|
||||
.leftButton {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 40%;
|
||||
z-index: 200;
|
||||
background: #9c9c9c;
|
||||
border-radius: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.rightButton {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 40%;
|
||||
z-index: 200;
|
||||
background: #9c9c9c;
|
||||
border-radius: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as PreviewModel2D } from './model2D.vue';
|
||||
export { default as PreviewModel3D } from './model3D.vue';
|
||||
Loading…
Reference in New Issue