Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
26ee0ea60b
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
|
|
||||||
const options = ref([
|
const options = ref([
|
||||||
{
|
{
|
||||||
name: '天',
|
name: '周',
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
value: 2,
|
value: 2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '整改后剩余违法',
|
label: '整改后剩余新增违法',
|
||||||
value: 3,
|
value: 3,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue