徐景良 2024-11-25 17:05:30 +08:00
commit 26ee0ea60b
5 changed files with 74 additions and 24 deletions

View File

@ -1,30 +1,63 @@
<template> <template>
<div class="show-image-div" ref="contentArea"> <div class="show-image-div">
<div class="show-image-item" v-for="(item, index) in props.data" :key="index"> <div>
<ShowImage :data="item" :haveFooter="true"> <a-image-preview-group>
<template #footer> <div class="show-image-item" v-for="(item, index) in props.data" :key="index">
<div class="footer-div"> <!-- <div class="control-show">
<span style="margin-left: 35px">{{ item.specialText }}</span> <a-radio-group v-model:value="select" button-style="solid" size="small">
<span style="margin-right: 40px">拍摄时间{{ item.shijian }}</span> <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> </div>
</template> </div>
</ShowImage> </a-image-preview-group>
</div>
<div class="show-image-item" v-if="props.data.length == 0">
暂无影像数据展示
</div> </div>
<div class="show-image-item" v-if="props.data.length == 0"> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, defineProps } from 'vue'; import { ref, defineProps } from 'vue';
import { ArrowUpOutlined } from '@ant-design/icons-vue'; //
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'; import { getAppEnvConfig } from '@/utils/env';
const props = defineProps(['data']); const { VITE_GLOB_API_URL } = getAppEnvConfig();
const contentArea = ref<HTMLElement | null>(null); const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
</script>
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> <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 { .footer-div {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -37,8 +70,8 @@
max-height: 690px; max-height: 690px;
overflow: auto; overflow: auto;
.show-image-item { .show-image-item {
width: 470px; width: 460px;
height: 470px; height: 460px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
} }
@ -59,4 +92,7 @@
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
::v-deep .ant-image-mask {
display: none !important;
}
</style> </style>

View File

@ -70,7 +70,7 @@
</div> </div>
<div class="charts-container" style="height:31%"> <div class="charts-container" style="height:31%">
<div class="echarts-title"> <div class="echarts-title">
<span>整改后新增违法耕地</span> <span>整改后剩余新增违法耕地</span>
<div class="month"> <div class="month">
<div class="filter-container"> <div class="filter-container">
<div class="filter-name" @click="handlerChangeFilterOptions('rectification')">{{ currentFilterName['rectification'] }}</div> <div class="filter-name" @click="handlerChangeFilterOptions('rectification')">{{ currentFilterName['rectification'] }}</div>

View File

@ -54,13 +54,15 @@
wrap-class-name="full-modal" wrap-class-name="full-modal"
v-model:open="showInfoOpen" v-model:open="showInfoOpen"
:footer="null" :footer="null"
:maskClosable="true" :maskClosable="false"
:destroyOnClose="true" :destroyOnClose="true"
@cancel="closeModal" @cancel="closeModal"
ref="modalRef" ref="modalRef"
:mask="false"
:getContainer="getContainer"
> >
<template #title> <template #title>
<div ref="modalTitleRef" style="width: 100%; cursor: move">详情</div> <div ref="modalTitleRef" style="width: 100%; cursor: move; user-select: none;padding: 16px;">详情</div>
</template> </template>
<template template #modalRender="{ originVNode }"> <template template #modalRender="{ originVNode }">
<div :style="transformStyle"> <div :style="transformStyle">
@ -436,9 +438,21 @@ watchEffect(() => {
transformX.value = 0 transformX.value = 0
transformY.value = 0 transformY.value = 0
} }
const getContainer = () => {
return document.getElementById('bg-pan')
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.statistical{
:deep(.ant-modal-header){
padding: 0px;
}
:deep(.ant-modal-wrap){
overflow: hidden;
pointer-events:none;
}
}
.button-item { .button-item {
width: 96px; width: 96px;
height: 32px; height: 32px;

View File

@ -44,7 +44,7 @@
const options = ref([ const options = ref([
{ {
name: '', name: '',
value: 0, value: 0,
}, },
{ {

View File

@ -43,7 +43,7 @@
value: 2, value: 2,
}, },
{ {
label: '整改后剩余违法', label: '整改后剩余新增违法',
value: 3, value: 3,
}, },
]); ]);