云查询弹窗demo
Zhufu
parent
e24e0436ff
commit
f770b1930d
|
|
@ -3,5 +3,5 @@
|
|||
"about": "关于",
|
||||
"workbench": "工作台",
|
||||
"analysis": "分析页",
|
||||
"dataScreen": "数据大屏"
|
||||
"test": "Test"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,15 +23,15 @@ const dashboard: AppRouteModule = {
|
|||
title: t('routes.dashboard.analysis'),
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '/dashboard/dataScreen',
|
||||
// name: 'DataScreen',
|
||||
// component: () => import('@/views/dashboard/dataScreen/index.vue'),
|
||||
// meta: {
|
||||
// // affix: true,
|
||||
// title: t('routes.dashboard.dataScreen'),
|
||||
// },
|
||||
// },
|
||||
{
|
||||
path: '/dashboard/test',
|
||||
name: 'test',
|
||||
component: () => import('@/views/dashboard/test/index.vue'),
|
||||
meta: {
|
||||
// affix: true,
|
||||
title: t('routes.dashboard.test'),
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/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