From f770b1930d9fe15f88250cc1539e9fe135b662a8 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Sat, 29 Jun 2024 17:21:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=91=E6=9F=A5=E8=AF=A2=E5=BC=B9=E7=AA=97de?=
 =?UTF-8?q?mo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/lang/zh-CN/routes/dashboard.json  |   2 +-
 src/router/routes/modules/dashboard.ts        |  18 +-
 .../test/ResourceMenu/Resource/index.vue      |  66 +++++++
 .../dashboard/test/ResourceMenu/index.vue     |  71 ++++++++
 .../test/SearchMenu/Camera/index.vue          |  27 +++
 .../CloudQueryModal/AdvancedQuery/index.vue   |  77 +++++++++
 .../CloudQueryModal/BasicFarmland/index.vue   |  71 ++++++++
 .../BasicQuery/ModalMap/index.vue             |  37 ++++
 .../CloudQueryModal/BasicQuery/index.vue      | 153 +++++++++++++++++
 .../CloudQueryModal/HistoryPhoto/index.vue    | 161 ++++++++++++++++++
 .../CloudQueryModal/HistoryYearNow/index.vue  |  71 ++++++++
 .../CloudQueryModal/MultiYearNow/index.vue    |  71 ++++++++
 .../MultiYearProject/index.vue                |  71 ++++++++
 .../CloudQueryModal/TimeImages/index.vue      |  71 ++++++++
 .../test/SearchMenu/CloudQueryModal/index.vue |  34 ++++
 .../test/SearchMenu/Satellite/index.vue       |  71 ++++++++
 .../test/SearchMenu/Search/index.vue          | 119 +++++++++++++
 src/views/dashboard/test/SearchMenu/index.vue | 138 +++++++++++++++
 .../test/components/ShowImage/index.vue       |  39 +++++
 .../test/components/ShowTableList/index.vue   |  43 +++++
 .../test/components/SubTitleSelect/index.vue  |  35 ++++
 src/views/dashboard/test/index.vue            |  44 +++++
 22 files changed, 1480 insertions(+), 10 deletions(-)
 create mode 100644 src/views/dashboard/test/ResourceMenu/Resource/index.vue
 create mode 100644 src/views/dashboard/test/ResourceMenu/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/Camera/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/AdvancedQuery/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicFarmland/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/ModalMap/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryPhoto/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryYearNow/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearNow/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearProject/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/TimeImages/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/CloudQueryModal/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/Satellite/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/Search/index.vue
 create mode 100644 src/views/dashboard/test/SearchMenu/index.vue
 create mode 100644 src/views/dashboard/test/components/ShowImage/index.vue
 create mode 100644 src/views/dashboard/test/components/ShowTableList/index.vue
 create mode 100644 src/views/dashboard/test/components/SubTitleSelect/index.vue
 create mode 100644 src/views/dashboard/test/index.vue

diff --git a/src/locales/lang/zh-CN/routes/dashboard.json b/src/locales/lang/zh-CN/routes/dashboard.json
index c5fabdb6..bac668ed 100644
--- a/src/locales/lang/zh-CN/routes/dashboard.json
+++ b/src/locales/lang/zh-CN/routes/dashboard.json
@@ -3,5 +3,5 @@
   "about": "关于",
   "workbench": "工作台",
   "analysis": "分析页",
-  "dataScreen": "数据大屏"
+  "test": "Test"
 }
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
index 3ed03717..de06478a 100644
--- a/src/router/routes/modules/dashboard.ts
+++ b/src/router/routes/modules/dashboard.ts
@@ -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',
diff --git a/src/views/dashboard/test/ResourceMenu/Resource/index.vue b/src/views/dashboard/test/ResourceMenu/Resource/index.vue
new file mode 100644
index 00000000..897bff8b
--- /dev/null
+++ b/src/views/dashboard/test/ResourceMenu/Resource/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/ResourceMenu/index.vue b/src/views/dashboard/test/ResourceMenu/index.vue
new file mode 100644
index 00000000..b8a77a75
--- /dev/null
+++ b/src/views/dashboard/test/ResourceMenu/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/Camera/index.vue b/src/views/dashboard/test/SearchMenu/Camera/index.vue
new file mode 100644
index 00000000..3e6a43a2
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/Camera/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/AdvancedQuery/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/AdvancedQuery/index.vue
new file mode 100644
index 00000000..c4c482ce
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/AdvancedQuery/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicFarmland/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicFarmland/index.vue
new file mode 100644
index 00000000..08004fb6
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicFarmland/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/ModalMap/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/ModalMap/index.vue
new file mode 100644
index 00000000..23eabb8d
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/ModalMap/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/index.vue
new file mode 100644
index 00000000..80886a9c
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/BasicQuery/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryPhoto/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryPhoto/index.vue
new file mode 100644
index 00000000..b63e3b36
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryPhoto/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryYearNow/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryYearNow/index.vue
new file mode 100644
index 00000000..08004fb6
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/HistoryYearNow/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearNow/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearNow/index.vue
new file mode 100644
index 00000000..08004fb6
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearNow/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearProject/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearProject/index.vue
new file mode 100644
index 00000000..08004fb6
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/MultiYearProject/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/TimeImages/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/TimeImages/index.vue
new file mode 100644
index 00000000..47abda2d
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/TimeImages/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/CloudQueryModal/index.vue b/src/views/dashboard/test/SearchMenu/CloudQueryModal/index.vue
new file mode 100644
index 00000000..4688e28c
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/CloudQueryModal/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/Satellite/index.vue b/src/views/dashboard/test/SearchMenu/Satellite/index.vue
new file mode 100644
index 00000000..edb2e87c
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/Satellite/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/Search/index.vue b/src/views/dashboard/test/SearchMenu/Search/index.vue
new file mode 100644
index 00000000..1e2baff8
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/Search/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/SearchMenu/index.vue b/src/views/dashboard/test/SearchMenu/index.vue
new file mode 100644
index 00000000..63b34622
--- /dev/null
+++ b/src/views/dashboard/test/SearchMenu/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/components/ShowImage/index.vue b/src/views/dashboard/test/components/ShowImage/index.vue
new file mode 100644
index 00000000..500661a9
--- /dev/null
+++ b/src/views/dashboard/test/components/ShowImage/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/components/ShowTableList/index.vue b/src/views/dashboard/test/components/ShowTableList/index.vue
new file mode 100644
index 00000000..943d1f4c
--- /dev/null
+++ b/src/views/dashboard/test/components/ShowTableList/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/components/SubTitleSelect/index.vue b/src/views/dashboard/test/components/SubTitleSelect/index.vue
new file mode 100644
index 00000000..dfb4b4ea
--- /dev/null
+++ b/src/views/dashboard/test/components/SubTitleSelect/index.vue
@@ -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>
diff --git a/src/views/dashboard/test/index.vue b/src/views/dashboard/test/index.vue
new file mode 100644
index 00000000..b299ee7d
--- /dev/null
+++ b/src/views/dashboard/test/index.vue
@@ -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>