云查询弹窗demo
Zhufu
parent
e24e0436ff
commit
f770b1930d
|
|
@ -3,5 +3,5 @@
|
||||||
"about": "关于",
|
"about": "关于",
|
||||||
"workbench": "工作台",
|
"workbench": "工作台",
|
||||||
"analysis": "分析页",
|
"analysis": "分析页",
|
||||||
"dataScreen": "数据大屏"
|
"test": "Test"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,15 +23,15 @@ const dashboard: AppRouteModule = {
|
||||||
title: t('routes.dashboard.analysis'),
|
title: t('routes.dashboard.analysis'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// path: '/dashboard/dataScreen',
|
path: '/dashboard/test',
|
||||||
// name: 'DataScreen',
|
name: 'test',
|
||||||
// component: () => import('@/views/dashboard/dataScreen/index.vue'),
|
component: () => import('@/views/dashboard/test/index.vue'),
|
||||||
// meta: {
|
meta: {
|
||||||
// // affix: true,
|
// affix: true,
|
||||||
// title: t('routes.dashboard.dataScreen'),
|
title: t('routes.dashboard.test'),
|
||||||
// },
|
},
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
path: '/formCallPage',
|
path: '/formCallPage',
|
||||||
name: 'formCallPage',
|
name: 'formCallPage',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<SubTitleSelect
|
||||||
|
:data="[
|
||||||
|
{title:'卫星影像', value: 0},
|
||||||
|
{title:'无人机', value: 1},
|
||||||
|
{title:'摄像头', value: 2}]"
|
||||||
|
:select="select"
|
||||||
|
@changeSelect="changeSelect"/>
|
||||||
|
<div class="content">
|
||||||
|
<div class="resource-div">
|
||||||
|
<div class="resource-icon"><Icon style="font-size: 55px;" icon="gis:pyramid" /></div>
|
||||||
|
<div class="resource-value"><span>卫星影像<br/>数据年份<span class="stress">1970年 - 2023年</span></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<Icon style="color: #6b93c4;" icon="bi:info-circle-fill" />
|
||||||
|
<div style="margin-left: 5px;">
|
||||||
|
<div style="margin-bottom: 3px">使用搜索功能，在地图上绘制范围，查看区域地类变化</div>
|
||||||
|
<div style="color: #2a7dc9; cursor: pointer; user-select: none;">搜索影像 >></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import SubTitleSelect from '../../components/SubTitleSelect/index.vue'
|
||||||
|
import Icon from '@/components/Icon/Icon.vue';
|
||||||
|
const select = ref(0)
|
||||||
|
const changeSelect = (value) => {
|
||||||
|
select.value = value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
padding-top: 20px;
|
||||||
|
.resource-div{
|
||||||
|
display: flex;
|
||||||
|
height: 60px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.resource-icon {
|
||||||
|
width: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.resource-value {
|
||||||
|
flex: 1;
|
||||||
|
background: #f0f0f0;
|
||||||
|
padding: 10px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 23px;
|
||||||
|
.stress{
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 30px;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div class="resource-menu">
|
||||||
|
<div :class="`menu-item ${select === 1? 'active': ''}`" @click="changeSelect(1)">
|
||||||
|
<div class="item-icon"><LineChartOutlined /></div>
|
||||||
|
<div class="item-text">资源</div>
|
||||||
|
</div>
|
||||||
|
<div :class="`menu-item ${select === 2? 'active': ''}`" @click="changeSelect(2)">
|
||||||
|
<div class="item-icon"><HddOutlined /></div>
|
||||||
|
<div class="item-text">任务</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="resource-content" v-if="[1,2].includes(select)">
|
||||||
|
<Resource v-if="select === 1"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import { LineChartOutlined, HddOutlined } from "@ant-design/icons-vue"
|
||||||
|
import Resource from './Resource/index.vue'
|
||||||
|
const select = ref(0)
|
||||||
|
const changeSelect = (value) => {
|
||||||
|
if(select.value == value){
|
||||||
|
select.value = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
select.value = value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.active{
|
||||||
|
background: repeating-linear-gradient(to left,rgb(38, 51, 231),rgb(20, 118, 230)) !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.resource-menu{
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
right: 20px;
|
||||||
|
height: 165px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.menu-item{
|
||||||
|
background: #fff;
|
||||||
|
width: 50px;
|
||||||
|
height: 75px;
|
||||||
|
border-radius: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.item-icon{
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.item-text{
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.resource-content{
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
right: 90px;
|
||||||
|
width: 500px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<SubTitleSelect :data="[{title:'绘制范围', value: 0}, {title:'行政区划', value: 1}]" :select="select" @changeSelect="changeSelect"/>
|
||||||
|
<div class="search-draw-map">
|
||||||
|
<a-radio-group v-model:value="drawMapType" v-if="select === 0">
|
||||||
|
<a-radio-button value="rectangle">矩形</a-radio-button>
|
||||||
|
<a-radio-button value="polygon">多边形</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<div style="height: 32px;" v-if="select === 1"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import SubTitleSelect from '../../components/SubTitleSelect/index.vue'
|
||||||
|
const select = ref(0)
|
||||||
|
const changeSelect = (value) => {
|
||||||
|
select.value = value
|
||||||
|
}
|
||||||
|
const drawMapType = ref('rectangle')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-draw-map{
|
||||||
|
background-color: #efefef;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<template>
|
||||||
|
<ShowImage :data="data" :haveFooter="false" />
|
||||||
|
<a-tabs v-model:activeKey="type">
|
||||||
|
<a-tab-pane key="1" tab="审批备案">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="aloneLayerColumns"
|
||||||
|
:data="dataSource"
|
||||||
|
:title="'审批备案查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2" tab="单独图层">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="aloneLayerColumns"
|
||||||
|
:data="dataSource"
|
||||||
|
:title="'三调单独图层查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="3" tab="耕地坡度">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="aloneLayerColumns"
|
||||||
|
:data="dataSource"
|
||||||
|
:title="'耕地坡度查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="4" tab="保护区(国情)">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="aloneLayerColumns"
|
||||||
|
:data="dataSource"
|
||||||
|
:title="'保护区(国情)查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="5" tab="自然保护地">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="aloneLayerColumns"
|
||||||
|
:data="dataSource"
|
||||||
|
:title="'自然保护地查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="6" tab="保护地(备案)">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="aloneLayerColumns"
|
||||||
|
:data="dataSource"
|
||||||
|
:title="'保护地(备案)查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
<div style="margin-top:5px; opacity: 0.6;user-select: none;">数据来源：中国国土勘测规划院</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
|
||||||
|
import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue'
|
||||||
|
import { ref } from "vue"
|
||||||
|
const type = ref('1')
|
||||||
|
const data = ref({
|
||||||
|
specialUrl: 'https://aliyuncdn.antdv.com/vue.png',
|
||||||
|
screenshotUrl: 'https://aliyuncdn.antdv.com/logo.png',
|
||||||
|
})
|
||||||
|
const aloneLayerColumns = [
|
||||||
|
{
|
||||||
|
title: '数据名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
sorter:(a,b) => a.name - b.name,
|
||||||
|
sortDirections: ['descend', 'ascend'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '面积(亩)',
|
||||||
|
dataIndex: 'area',
|
||||||
|
key: 'area',
|
||||||
|
sorter:(a,b) => a.area - b.area,
|
||||||
|
sortDirections: ['descend', 'ascend'],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const dataSource = [
|
||||||
|
{
|
||||||
|
name: '推土区',
|
||||||
|
area: 3.05,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div class="show-image-div">
|
||||||
|
<div class="show-image-item" v-for="(item, index) in data" :key="index">
|
||||||
|
<ShowImage :data="item" :haveFooter="true">
|
||||||
|
<template #footer>
|
||||||
|
<div class="footer-div">
|
||||||
|
<a-button size="small">展示统计表</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ShowImage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
time: '20210111',
|
||||||
|
specialText: '卫星：GF2',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图1',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210112',
|
||||||
|
specialText: '卫星：GF3',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图2',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210113',
|
||||||
|
specialText: '卫星：GF4',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图34',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210114',
|
||||||
|
specialText: '卫星：GF5',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图4',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.footer-div{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
.show-image-div{
|
||||||
|
max-height: 690px;
|
||||||
|
overflow: auto;
|
||||||
|
.show-image-item{
|
||||||
|
width: 470px;
|
||||||
|
height: 470px;
|
||||||
|
background: cadetblue;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div :id="mapId" :style="`width: ${width}; height: ${height}`"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { defineProps, ref, onMounted, onUnmounted } from "vue"
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
import mapboxgl, { Map, } from 'mapbox-gl';
|
||||||
|
import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts'
|
||||||
|
|
||||||
|
const props = defineProps(["width", "height"])
|
||||||
|
const { width, height } = props
|
||||||
|
const mapId = `map-${uuidv4()}`
|
||||||
|
let map: Map;
|
||||||
|
onMounted(() => {
|
||||||
|
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||||
|
map = initMap();
|
||||||
|
})
|
||||||
|
const initMap = () => {
|
||||||
|
return new mapboxgl.Map({
|
||||||
|
container: mapId,
|
||||||
|
language: 'zh-cmn',
|
||||||
|
projection: 'equirectangular', // wgs84参考系
|
||||||
|
style: MapboxDefaultStyle,
|
||||||
|
maxZoom: 22,
|
||||||
|
minZoom: 6,
|
||||||
|
zoom:10,
|
||||||
|
// ...props.mapOptions,
|
||||||
|
center:[117.984425,35.270654],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// onUnmounted(() => {
|
||||||
|
// map && map.remove();
|
||||||
|
// })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
<template>
|
||||||
|
<div class="show-map-div">
|
||||||
|
<div class="select-menu">
|
||||||
|
<div class="add-on-map" v-if="selectType !== 2"><a-checkbox v-model:checked="addOnMap">叠加到地图</a-checkbox></div>
|
||||||
|
<a-radio-group v-model:value="selectType" button-style="solid" size="small">
|
||||||
|
<a-radio-button :value="0">专题图</a-radio-button>
|
||||||
|
<a-radio-button :value="1">截图</a-radio-button>
|
||||||
|
<a-radio-button :value="2">天地图</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
<template v-if="selectType === 0">
|
||||||
|
<a-image
|
||||||
|
:width="470"
|
||||||
|
:height="470"
|
||||||
|
:preview="false"
|
||||||
|
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-if="selectType === 1"></template>
|
||||||
|
<template v-if="selectType === 2">
|
||||||
|
<ModalMap :width="'470px'" :height="'470px'"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<a-tabs v-model:activeKey="type">
|
||||||
|
<a-tab-pane key="1" tab="土地分类">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="landClassificationColumns"
|
||||||
|
:data="landClassificationData"
|
||||||
|
:title="'土地利用现状查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2" tab="城镇村等用地">Content of tab </a-tab-pane>
|
||||||
|
<a-tab-pane key="3" tab="土地坐落">Content of tab </a-tab-pane>
|
||||||
|
<a-tab-pane key="4" tab="基本农田">Content of tab </a-tab-pane>
|
||||||
|
<a-tab-pane key="5" tab="土地规划">
|
||||||
|
<ShowTableList
|
||||||
|
:columns="landPlanningColumns"
|
||||||
|
:data="landClassificationData"
|
||||||
|
:title="'土地规划查询结果'"/>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue'
|
||||||
|
import ModalMap from './ModalMap/index.vue'
|
||||||
|
const type = ref('1')
|
||||||
|
const addOnMap = ref(false)
|
||||||
|
const selectType = ref(0)
|
||||||
|
const landClassificationColumns = [
|
||||||
|
{
|
||||||
|
title: '地类名称',
|
||||||
|
dataIndex: 'landName',
|
||||||
|
key: 'landName',
|
||||||
|
sorter:(a,b) => a.landName - b.landName,
|
||||||
|
sortDirections: ['descend', 'ascend'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '联合属性',
|
||||||
|
dataIndex: 'stats',
|
||||||
|
key: 'stats',
|
||||||
|
sorter:(a,b) => a.stats.length - b.stats.length,
|
||||||
|
sortDirections: ['descend', 'ascend'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '面积（亩）',
|
||||||
|
dataIndex: 'area',
|
||||||
|
key: 'area',
|
||||||
|
sorter:(a,b) => a.area - b.area,
|
||||||
|
sortDirections: ['descend', 'ascend'],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const landPlanningColumns = [
|
||||||
|
{
|
||||||
|
title: '类型',
|
||||||
|
dataIndex: 'type',
|
||||||
|
key: 'type',
|
||||||
|
sorter:(a,b) => a.type.length - b.type.length,
|
||||||
|
sortDirections: ['descend', 'ascend'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '面积（亩）',
|
||||||
|
dataIndex: 'area',
|
||||||
|
key: 'area',
|
||||||
|
sorter:(a,b) => a.area - b.area,
|
||||||
|
sortDirections: ['descend', 'ascend'],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const landClassificationData = [
|
||||||
|
{
|
||||||
|
landName: '乔木林地-0331',
|
||||||
|
type: '限制建设区(030)',
|
||||||
|
stats: '-',
|
||||||
|
area: 3.05,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
landName: '乔木林地-0332',
|
||||||
|
type: '限制建设区(031)',
|
||||||
|
stats: '-',
|
||||||
|
area: 4.05,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
landName: '乔木林地-0331',
|
||||||
|
type: '建设区(030)',
|
||||||
|
stats: '-',
|
||||||
|
area: 3.05,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
landName: '乔木林地-0332',
|
||||||
|
type: '建设区(031)',
|
||||||
|
stats: '-',
|
||||||
|
area: 4.05,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
landName: '乔木林地-0331',
|
||||||
|
type: '限制(030)',
|
||||||
|
stats: '-',
|
||||||
|
area: 3.05,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
landName: '乔木林地-0332',
|
||||||
|
type: '限制(031)',
|
||||||
|
stats: '-',
|
||||||
|
area: 4.05,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.select-menu{
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 100;
|
||||||
|
.add-on-map{
|
||||||
|
width: 110px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.show-map-div{
|
||||||
|
width: 470px;
|
||||||
|
height: 470px;
|
||||||
|
background: burlywood;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
<template>
|
||||||
|
<a-carousel arrows style="margin-bottom: 20px;">
|
||||||
|
<template #prevArrow>
|
||||||
|
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
|
||||||
|
<left-circle-outlined />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #nextArrow>
|
||||||
|
<div class="custom-slick-arrow" style="right: 10px">
|
||||||
|
<right-circle-outlined />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-for="(image, index) in showData.images" :key="index" >
|
||||||
|
<div style="position: relative;">
|
||||||
|
<a-image
|
||||||
|
:height="300"
|
||||||
|
:src="image.url"
|
||||||
|
/>
|
||||||
|
<div class="showImageInfo">
|
||||||
|
<div>任务名称：{{ image.title }}</div>
|
||||||
|
<div style="display:flex">
|
||||||
|
<div style="flex: 1;">拍摄时间：{{ image.time }}</div>
|
||||||
|
<div style="flex: 1;">拍摄角度：{{ image.angle }}</div>
|
||||||
|
<div style="flex: 1;">拍摄人员：{{ image.user }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-carousel>
|
||||||
|
<a-steps
|
||||||
|
v-model:current="current"
|
||||||
|
:progressDot="true"
|
||||||
|
:items="items"
|
||||||
|
@change="changeTime"
|
||||||
|
>
|
||||||
|
</a-steps>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { LeftCircleOutlined, RightCircleOutlined } from "@ant-design/icons-vue"
|
||||||
|
import { computed, ref } from "vue"
|
||||||
|
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
time: '202301',
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
time: '2023-01-11',
|
||||||
|
title: '2022年全国国土变更调查举证模块',
|
||||||
|
angle: '北偏东',
|
||||||
|
user: '孙宗翠',
|
||||||
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2023-01-12',
|
||||||
|
title: '2022年全国国土变更调查举证模块',
|
||||||
|
angle: '北偏东',
|
||||||
|
user: '孙宗翠',
|
||||||
|
url: 'https://aliyuncdn.antdv.com/vue.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2023-01-14',
|
||||||
|
title: '2022年全国国土变更调查举证模块',
|
||||||
|
angle: '北偏东',
|
||||||
|
user: '孙宗翠',
|
||||||
|
url: 'https://aliyuncdn.antdv.com/logo.png',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '202302',
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
time: '2023-02-11',
|
||||||
|
title: '2022年全国国土变更调查举证模块',
|
||||||
|
angle: '北偏东',
|
||||||
|
user: '孙宗翠',
|
||||||
|
url: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2023-02-12',
|
||||||
|
title: '2022年全国国土变更调查举证模块',
|
||||||
|
angle: '北偏东',
|
||||||
|
user: '孙宗翠',
|
||||||
|
url: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2023-02-13',
|
||||||
|
title: '2022年全国国土变更调查举证模块',
|
||||||
|
angle: '北偏东',
|
||||||
|
user: '孙宗翠',
|
||||||
|
url: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
])
|
||||||
|
const showData = ref(data.value[0])
|
||||||
|
const current = ref<number>(0);
|
||||||
|
const items = computed(() => {
|
||||||
|
let result: any[] = []
|
||||||
|
data.value.forEach(item => {
|
||||||
|
result.push({
|
||||||
|
title: item.time,
|
||||||
|
description: `(${item.images.length})`
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return result
|
||||||
|
})
|
||||||
|
const changeTime = (value) => {
|
||||||
|
console.log('value',value)
|
||||||
|
showData.value = data.value[value]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.showImageInfo{
|
||||||
|
position:absolute;
|
||||||
|
top:250px;
|
||||||
|
width: 100%;
|
||||||
|
height:50px;
|
||||||
|
line-height: 25px;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
:deep(.ant-steps-item-active) {
|
||||||
|
.ant-steps-icon-dot{
|
||||||
|
background: #faa !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.slick-slide) {
|
||||||
|
text-align: center;
|
||||||
|
height: 300px;
|
||||||
|
line-height: 160px;
|
||||||
|
background: #364d79;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.slick-arrow.custom-slick-arrow) {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
font-size: 25px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(31, 45, 61, 0.11);
|
||||||
|
transition: ease all 0.3s;
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: 1;
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
:deep(.slick-arrow.custom-slick-arrow:before) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:deep(.slick-arrow.custom-slick-arrow:hover) {
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.slick-slide h3) {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div class="show-image-div">
|
||||||
|
<div class="show-image-item" v-for="(item, index) in data" :key="index">
|
||||||
|
<ShowImage :data="item" :haveFooter="true">
|
||||||
|
<template #footer>
|
||||||
|
<div class="footer-div">
|
||||||
|
<a-button size="small">展示统计表</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ShowImage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
time: '20210111',
|
||||||
|
specialText: '卫星：GF2',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图1',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210112',
|
||||||
|
specialText: '卫星：GF3',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图2',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210113',
|
||||||
|
specialText: '卫星：GF4',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图34',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210114',
|
||||||
|
specialText: '卫星：GF5',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图4',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.footer-div{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
.show-image-div{
|
||||||
|
max-height: 690px;
|
||||||
|
overflow: auto;
|
||||||
|
.show-image-item{
|
||||||
|
width: 470px;
|
||||||
|
height: 470px;
|
||||||
|
background: cadetblue;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div class="show-image-div">
|
||||||
|
<div class="show-image-item" v-for="(item, index) in data" :key="index">
|
||||||
|
<ShowImage :data="item" :haveFooter="true">
|
||||||
|
<template #footer>
|
||||||
|
<div class="footer-div">
|
||||||
|
<a-button size="small">展示统计表</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ShowImage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
time: '20210111',
|
||||||
|
specialText: '卫星：GF2',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图1',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210112',
|
||||||
|
specialText: '卫星：GF3',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图2',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210113',
|
||||||
|
specialText: '卫星：GF4',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图34',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210114',
|
||||||
|
specialText: '卫星：GF5',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图4',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.footer-div{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
.show-image-div{
|
||||||
|
max-height: 690px;
|
||||||
|
overflow: auto;
|
||||||
|
.show-image-item{
|
||||||
|
width: 470px;
|
||||||
|
height: 470px;
|
||||||
|
background: cadetblue;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div class="show-image-div">
|
||||||
|
<div class="show-image-item" v-for="(item, index) in data" :key="index">
|
||||||
|
<ShowImage :data="item" :haveFooter="true">
|
||||||
|
<template #footer>
|
||||||
|
<div class="footer-div">
|
||||||
|
<a-button size="small">展示统计表</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ShowImage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
time: '20210111',
|
||||||
|
specialText: '卫星：GF2',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图1',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210112',
|
||||||
|
specialText: '卫星：GF3',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图2',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210113',
|
||||||
|
specialText: '卫星：GF4',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图34',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210114',
|
||||||
|
specialText: '卫星：GF5',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图4',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.footer-div{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
.show-image-div{
|
||||||
|
max-height: 690px;
|
||||||
|
overflow: auto;
|
||||||
|
.show-image-item{
|
||||||
|
width: 470px;
|
||||||
|
height: 470px;
|
||||||
|
background: cadetblue;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div class="show-image-div">
|
||||||
|
<div class="show-image-item" v-for="(item, index) in 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.time }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ShowImage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
time: '20210111',
|
||||||
|
specialText: '卫星：GF2',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图1',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210112',
|
||||||
|
specialText: '卫星：GF3',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图2',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210113',
|
||||||
|
specialText: '卫星：GF4',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图34',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '20210114',
|
||||||
|
specialText: '卫星：GF5',
|
||||||
|
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||||||
|
screenshotText: '截图4',
|
||||||
|
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.footer-div{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.show-image-div{
|
||||||
|
max-height: 690px;
|
||||||
|
overflow: auto;
|
||||||
|
.show-image-item{
|
||||||
|
width: 470px;
|
||||||
|
height: 470px;
|
||||||
|
background: cadetblue;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<a-tabs
|
||||||
|
style="width: 100%;"
|
||||||
|
v-model:activeKey="activeKey"
|
||||||
|
>
|
||||||
|
<a-tab-pane key="1" tab="基础查询"><BasicQuery /></a-tab-pane>
|
||||||
|
<a-tab-pane key="2" tab="多年现状"><MultiYearNow /></a-tab-pane>
|
||||||
|
<a-tab-pane key="3" tab="高级查询"><AdvancedQuery /> </a-tab-pane>
|
||||||
|
<a-tab-pane key="4" tab="历年现状"><HistoryYearNow /> </a-tab-pane>
|
||||||
|
<a-tab-pane key="5" tab="多年规划"><MultiYearProject /> </a-tab-pane>
|
||||||
|
<a-tab-pane key="6" tab="多年基本农田"><BasicFarmland /> </a-tab-pane>
|
||||||
|
<a-tab-pane key="7" tab="时序影像"><TimeImages /> </a-tab-pane>
|
||||||
|
<a-tab-pane key="8" tab="历史照片"><HistoryPhoto /></a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import BasicQuery from './BasicQuery/index.vue'
|
||||||
|
import HistoryPhoto from './HistoryPhoto/index.vue'
|
||||||
|
import TimeImages from './TimeImages/index.vue'
|
||||||
|
import MultiYearNow from './MultiYearNow/index.vue'
|
||||||
|
import HistoryYearNow from './HistoryYearNow/index.vue'
|
||||||
|
import MultiYearProject from './MultiYearProject/index.vue'
|
||||||
|
import BasicFarmland from './BasicFarmland/index.vue'
|
||||||
|
import AdvancedQuery from './AdvancedQuery/index.vue'
|
||||||
|
const activeKey = ref('1')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.ant-tabs-nav){
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<a-input placeholder="请输入目标位置、图斑编号" style="margin-bottom: 10px;">
|
||||||
|
<template #suffix>
|
||||||
|
<SearchOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<SubTitleSelect :data="[{title:'绘制范围', value: 0}, {title:'行政区划', value: 1}]" :select="select" @changeSelect="changeSelect"/>
|
||||||
|
<div class="search-draw-map">
|
||||||
|
<a-radio-group v-model:value="drawMapType" v-if="select === 0">
|
||||||
|
<a-radio-button value="rectangle">矩形</a-radio-button>
|
||||||
|
<a-radio-button value="polygon">多边形</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<div style="height: 32px;" v-if="select === 1"></div>
|
||||||
|
</div>
|
||||||
|
<a-divider class="divider" dashed />
|
||||||
|
<div class="title">时间段</div>
|
||||||
|
<a-range-picker class="time-select" v-model:value="time"/>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-button-div">
|
||||||
|
<a-button class="search-button" type="primary">查询</a-button>
|
||||||
|
<a-button class="reset-button" type="dashed">重置</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import { SearchOutlined } from '@ant-design/icons-vue'
|
||||||
|
import SubTitleSelect from '../../components/SubTitleSelect/index.vue'
|
||||||
|
|
||||||
|
const select = ref(0)
|
||||||
|
const drawMapType = ref('rectangle')
|
||||||
|
const time = ref()
|
||||||
|
const changeSelect = (value) => {
|
||||||
|
select.value = value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-draw-map{
|
||||||
|
background-color: #efefef;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.divider{
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background: #ececec;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.time-select{
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.footer-button-div{
|
||||||
|
display: flex;
|
||||||
|
.reset-button{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.search-button{
|
||||||
|
background: linear-gradient(rgb(38, 51, 231), rgb(20, 118, 230))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
<template>
|
||||||
|
<SubTitleSelect :data="[{title:'绘制范围', value: 0}, {title:'图斑搜索', value: 1}]" :select="select" @changeSelect="changeSelect"/>
|
||||||
|
<div class="search-draw-map" v-if="select === 0">
|
||||||
|
<a-radio-group v-model:value="drawMapType">
|
||||||
|
<a-radio-button value="rectangle">矩形</a-radio-button>
|
||||||
|
<a-radio-button value="polygon">多边形</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
<div class="search-content" v-if="select === 1">
|
||||||
|
<a-input placeholder="请输入目标位置、图斑编号">
|
||||||
|
<template #suffix>
|
||||||
|
<SearchOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" :scroll="{ y: 200 }"></a-table>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-button-div">
|
||||||
|
<a-button class="search-button" type="primary">查询</a-button>
|
||||||
|
<a-button class="reset-button" type="dashed">重置</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue"
|
||||||
|
import SubTitleSelect from '../../components/SubTitleSelect/index.vue'
|
||||||
|
import { SearchOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { title } from "process";
|
||||||
|
|
||||||
|
const select = ref(0)
|
||||||
|
const drawMapType = ref()
|
||||||
|
const columns = ref([
|
||||||
|
{
|
||||||
|
title: '图斑编号',
|
||||||
|
dataIndex: 'id',
|
||||||
|
key: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '行政区',
|
||||||
|
dataIndex: 'region',
|
||||||
|
key: 'region',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'control',
|
||||||
|
key: 'control',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
const dataSource = ref([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
region: '北京市',
|
||||||
|
control: '查看',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
region: '北京市',
|
||||||
|
control: '查看',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
region: '北京市',
|
||||||
|
control: '查看',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
region: '北京市',
|
||||||
|
control: '查看',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
region: '北京市',
|
||||||
|
control: '查看',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
region: '北京市',
|
||||||
|
control: '查看',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '7',
|
||||||
|
region: '北京市',
|
||||||
|
control: '查看',
|
||||||
|
},
|
||||||
|
|
||||||
|
])
|
||||||
|
|
||||||
|
const changeSelect = (value: number) => {
|
||||||
|
select.value = value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-draw-map{
|
||||||
|
background-color: #efefef;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.search-content{
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer{
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
margin-top: 15px;
|
||||||
|
.footer-button-div{
|
||||||
|
display: flex;
|
||||||
|
.reset-button{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.search-button{
|
||||||
|
background: linear-gradient(rgb(38, 51, 231), rgb(20, 118, 230))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<template>
|
||||||
|
<div class="search-menu">
|
||||||
|
<div class="menu-item" @click="changeSelect(1)">
|
||||||
|
<div :class="`item-icon ${select == 1 ? 'active' : ''}`"><FileSearchOutlined /></div>
|
||||||
|
<div class="item-text">搜索</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item" @click="changeSelect(2)">
|
||||||
|
<div :class="`item-icon ${select == 2 ? 'active' : ''}`"><Icon style="font-size: 20px;" icon="gis:satellite" /></div>
|
||||||
|
<div class="item-text">卫星</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item" @click="changeSelect(3)">
|
||||||
|
<div :class="`item-icon ${select == 3 ? 'active' : ''}`"><Icon style="font-size: 20px;" icon="cbi:reolink-811" /></div>
|
||||||
|
<div class="item-text">摄像头</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item" @click="changeSelect(4)">
|
||||||
|
<div :class="`item-icon ${select == 4 ? 'active' : ''}`"><Icon style="font-size: 20px;" icon="gis:drone" /></div>
|
||||||
|
<div class="item-text">无人机</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item" @click="open = true">
|
||||||
|
<div :class="`item-icon ${select == 5 ? 'active' : ''}`"><StarFilled /></div>
|
||||||
|
<div class="item-text">收藏</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-content" v-if="[1,2,3].includes(select)">
|
||||||
|
<Search v-if="select == 1"/>
|
||||||
|
<Satellite v-if="select == 2" />
|
||||||
|
<Camera v-if="select == 3" />
|
||||||
|
</div>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<a-modal v-model:open="open" :footer="false" @cancel="open = false" :width="compare? '1020px': '510px'" style="top: 20px;">
|
||||||
|
<div class="modal-content-div">
|
||||||
|
<div class="title-text">
|
||||||
|
{{ compare? '国家云查询结果(对比模式)': '国家云查询结果'}}
|
||||||
|
<Icon class="split-button" style="font-size: 20px;" icon="bi:layout-split" @click="changeCompare"/>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; width: 100%;">
|
||||||
|
<div :style="`display: block; width: ${compare? '50%': '100%'};`">
|
||||||
|
<CloudQueryModal />
|
||||||
|
</div>
|
||||||
|
<div style="display: block;width: 50%; margin-left: 20px;" v-if="compare">
|
||||||
|
<CloudQueryModal />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { FileSearchOutlined, StarFilled } from "@ant-design/icons-vue";
|
||||||
|
import Search from './Search/index.vue'
|
||||||
|
import Satellite from './Satellite/index.vue'
|
||||||
|
import Camera from './Camera/index.vue'
|
||||||
|
import Icon from '@/components/Icon/Icon.vue';
|
||||||
|
import { ref } from "vue"
|
||||||
|
import CloudQueryModal from './CloudQueryModal/index.vue'
|
||||||
|
const select = ref(0)
|
||||||
|
const open = ref(false)
|
||||||
|
const compare = ref(false)
|
||||||
|
const changeSelect = (value) => {
|
||||||
|
if(select.value == value){
|
||||||
|
select.value = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
select.value = value
|
||||||
|
}
|
||||||
|
const changeCompare = () => {
|
||||||
|
compare.value = !compare.value
|
||||||
|
console.log('compare.value',compare.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.modal-content-div{
|
||||||
|
padding: 53px 20px 10px 20px;
|
||||||
|
width: 100%;
|
||||||
|
.title-text{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #2f83d9;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-weight: 600;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.split-button{
|
||||||
|
font-size: 20px;
|
||||||
|
display: inline-flex;
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 2px;
|
||||||
|
color: #000000a3;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search-menu{
|
||||||
|
width: 50px;
|
||||||
|
height: 355px;
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding-top: 19px;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background: repeating-linear-gradient(to left,rgb(38, 51, 231),rgb(20, 118, 230));
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
.item-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.item-text{
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-content {
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 70px;
|
||||||
|
width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<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="470"
|
||||||
|
:height="470"
|
||||||
|
:src="select === 0? specialUrl: screenshotUrl"
|
||||||
|
/>
|
||||||
|
<div class="footer" v-if="haveFooter">
|
||||||
|
<slot name="footer" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, defineProps } from "vue"
|
||||||
|
const select = ref(0)
|
||||||
|
const props = defineProps(["data", "haveFooter"])
|
||||||
|
const { data:{ specialUrl, screenshotUrl }, haveFooter=false } = props
|
||||||
|
</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);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<div class="title">{{ title }}</div>
|
||||||
|
<a-table :columns="columns" :data-source="data" :pagination="false" size="small" :scroll="{y: 100}">
|
||||||
|
<template #summary>
|
||||||
|
<a-table-summary fixed>
|
||||||
|
<a-table-summary-row>
|
||||||
|
<a-table-summary-cell>合计</a-table-summary-cell>
|
||||||
|
<a-table-summary-cell v-for="col in columns.length-2">
|
||||||
|
<a-typography-text></a-typography-text>
|
||||||
|
</a-table-summary-cell>
|
||||||
|
<a-table-summary-cell>
|
||||||
|
<a-typography-text>{{ result }}</a-typography-text>
|
||||||
|
</a-table-summary-cell>
|
||||||
|
</a-table-summary-row>
|
||||||
|
</a-table-summary>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { defineProps, computed } from "vue"
|
||||||
|
const props = defineProps(["columns", "data", "title"])
|
||||||
|
const { columns=[], data=[], title="" } = props
|
||||||
|
const result = computed(() => {
|
||||||
|
let sum = 0
|
||||||
|
data.forEach(item => {
|
||||||
|
sum += item.area
|
||||||
|
})
|
||||||
|
return sum
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
:deep(.ant-table-summary){
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div class="title-select">
|
||||||
|
<template v-for="(item, index) in props.data" :key="index">
|
||||||
|
<div :class="`button ${props.select === item.value ? 'active' : ''}`" @click="emits('changeSelect', item.value)">{{ item.title }}</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { defineProps, ref, defineEmits } from "vue"
|
||||||
|
const props = defineProps(["select","data"])
|
||||||
|
const emits = defineEmits(["changeSelect"])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.active{
|
||||||
|
background: linear-gradient(rgb(38, 51, 231), rgb(20, 118, 230)) !important;
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
.title-select {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
.button{
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(rgb(20, 118, 230), #fff);
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="mapContainer" id="showMapContainer"></div>
|
||||||
|
<SearchMenu></SearchMenu>
|
||||||
|
<ResourceMenu></ResourceMenu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted } from "vue"
|
||||||
|
import mapboxgl, { Map, Popup } from 'mapbox-gl';
|
||||||
|
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from '@/components/MapboxMaps/src/config.ts'
|
||||||
|
import SearchMenu from './SearchMenu/index.vue'
|
||||||
|
import ResourceMenu from './ResourceMenu/index.vue'
|
||||||
|
let map: Map;
|
||||||
|
onMounted(() => {
|
||||||
|
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||||
|
map = initMap();
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
map && map.remove();
|
||||||
|
})
|
||||||
|
const initMap = () => {
|
||||||
|
return new mapboxgl.Map({
|
||||||
|
container: 'showMapContainer',
|
||||||
|
language: 'zh-cmn',
|
||||||
|
projection: 'equirectangular', // wgs84参考系
|
||||||
|
style: MapboxDefaultStyle,
|
||||||
|
maxZoom: 22,
|
||||||
|
minZoom: 6,
|
||||||
|
zoom:10,
|
||||||
|
// ...props.mapOptions,
|
||||||
|
center:[117.984425,35.270654],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mapContainer{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
:deep(.mapboxgl-control-container){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue