HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

云查询-时序影像预览可以所有切换图片

dianlixunjian
滕嵩 2024-11-25 14:23:37 +08:00
parent aa6cd4e130
commit 49ec747c6c
1 changed files with 55 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/CloudQueryContent/CloudQueryModal/TimeImages/index.vue
View File

@ -1,30 +1,63 @@
<template>
<div class="show-image-div" ref="contentArea">
<div class="show-image-item" v-for="(item, index) in props.data" :key="index">
<ShowImage :data="item" :haveFooter="true">
<template #footer>
<div class="footer-div">
<span style="margin-left: 35px">{{ item.specialText }}</span>
<span style="margin-right: 40px">拍摄时间：{{ item.shijian }}</span>
<div class="show-image-div">
<div>
<a-image-preview-group>
<div class="show-image-item" v-for="(item, index) in props.data" :key="index">
<!-- <div class="control-show">
<a-radio-group v-model:value="select" button-style="solid" size="small">
<a-radio-button :value="0">专题图</a-radio-button>
<a-radio-button :value="1">截图</a-radio-button>
</a-radio-group>
</div> -->
<a-image :width="460" :height="460" :src="get(item.url)" />
<div class="footer">
<div class="footer-div">
<span style="margin-left: 35px">{{ item.specialText }}</span>
<span style="margin-right: 40px">拍摄时间：{{ item.shijian }}</span>
</div>
</div>
</template>
</ShowImage>
</div>
<div class="show-image-item" v-if="props.data.length == 0">
暂无影像数据展示
</div>
</a-image-preview-group>
</div>
<div class="show-image-item" v-if="props.data.length == 0"> 暂无影像数据展示 </div>
</div>
</template>
<script setup lang="ts">
import { ref, defineProps } from 'vue';
import { ArrowUpOutlined } from '@ant-design/icons-vue';
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue';
const props = defineProps(['data']);
const contentArea = ref<HTMLElement | null>(null);
</script>
// 图片路径拼接
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL } = getAppEnvConfig();
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
const props = defineProps(['data']);
// 正则表达式验证URL
function isValidUrl(url: string): boolean {
const regex =
/^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
return regex.test(url);
}
function get(url) {
return (url = isValidUrl(url) ? url : VITE_GLOB_API_URL_VAR.value + url);
}
</script>
<style lang="scss" scoped>
.control-show {
position: absolute;
top: 10px;
right: 15px;
z-index: 100;
}
.footer {
position: absolute;
width: 100%;
bottom: 0px;
height: 50px;
background: rgba(0, 0, 0, 0.4);
}
.footer-div {
width: 100%;
height: 100%;
@ -37,8 +70,8 @@
max-height: 690px;
overflow: auto;
.show-image-item {
width: 470px;
height: 470px;
width: 460px;
height: 460px;
margin-bottom: 5px;
position: relative;
}
@ -59,4 +92,7 @@
flex-direction: column;
text-align: center;
}
::v-deep .ant-image-mask {
display: none !important;
}
</style>