merge

2024-08-01 17:41:41 +08:00 · 2024-08-01 17:41:41 +08:00 · 1e7d3b1090
parent 3e9e67f4f4 14368d4300
commit 1e7d3b1090
16 changed files with 706 additions and 258 deletions
--- a/src/api/demo/cloudQuery.ts
+++ b/src/api/demo/cloudQuery.ts
@ -0,0 +1,21 @@
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  // 添加云查询任务
+  AddDroneTask = '/api/DroneCloudQuery/AddDroneTask',
+  // 根据云查询ID获取查询结果
+  LoadCloudQueryById = '/api/DroneCloudQuery/LoadCloudQueryById'
+}
+
+export function AddDroneTask(params: { geomid: string }) {
+  return defHttp.post({
+    url: Api.AddDroneTask,
+    params,
+  });
+}
+export function LoadCloudQueryById(params: { id: string }) {
+  return defHttp.get({
+    url: Api.LoadCloudQueryById,
+    params,
+  });
+}
--- a/src/components/CloudQueryContent/CloudQueryModal/BasicQuery/ModalMap/index.vue
+++ b/src/components/CloudQueryContent/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 = `modal-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>
--- a/src/components/CloudQueryContent/CloudQueryModal/BasicQuery/index.vue
+++ b/src/components/CloudQueryContent/CloudQueryModal/BasicQuery/index.vue
@ -0,0 +1,126 @@
+<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"
+          :src="showData.image"
+        />
+    </template>
+    <template v-if="selectType === 1">
+      <a-image
+        :width="470"
+        :height="470"
+        :src="showData.screenshotImage"
+      />
+    </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="props.data?.landClassify.list"
+        :title="'土地利用现状查询结果'"/>
+    </a-tab-pane>
+    <a-tab-pane key="2" tab="耕地占用">
+      <ShowTableList 
+        :columns="landPlanningColumns" 
+        :data="props.data?.plowLandOccupy.list"
+        :title="'土地规划查询结果'"/>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, computed } from "vue"
+import ShowTableList from '@/views/dashboard/test/components/ShowTableList/index.vue'
+import ModalMap from './ModalMap/index.vue'
+
+const props = defineProps(['data'])
+const type = ref('1')
+const showData = computed(() => {
+  switch(type.value){
+    case '1':
+      return props.data?.landClassify || {image:'',screenshotImage:'',list:[]}
+    case '2':
+      return props.data?.plowLandOccupy || {image:'',screenshotImage:'',list:[]}
+  }
+})
+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'],
+  },
+]
+</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;
+  position: relative;
+}
+</style>
--- a/src/components/CloudQueryContent/CloudQueryModal/TimeImages/index.vue
+++ b/src/components/CloudQueryContent/CloudQueryModal/TimeImages/index.vue
@ -0,0 +1,41 @@
+<template>
+  <div class="show-image-div">
+    <div class="show-image-item" v-for="(item, index) in props.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, defineProps } from "vue"
+import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
+const props = defineProps(['data'])
+</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;
+    margin-bottom: 5px;
+    position: relative;
+  }
+}
+</style>
--- a/src/components/CloudQueryContent/CloudQueryModal/index.vue
+++ b/src/components/CloudQueryContent/CloudQueryModal/index.vue
@ -0,0 +1,24 @@
+<template>
+  <a-tabs
+  style="width: 100%;"
+    v-model:activeKey="activeKey"
+  >
+    <a-tab-pane key="1" tab="基础查询"><BasicQuery :data="props.info?.basicQuery"/></a-tab-pane>
+    <a-tab-pane key="2" tab="时序影像"><TimeImages :data="props.info?.timeImages"/> </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps } from "vue"
+import BasicQuery from './BasicQuery/index.vue'
+import TimeImages from './TimeImages/index.vue'
+
+const props = defineProps(['info'])
+const activeKey = ref('1')
+</script>
+
+<style lang="scss" scoped>
+:deep(.ant-tabs-nav){
+  margin-bottom: 0px;
+}
+</style>
--- a/src/components/CloudQueryContent/index.vue
+++ b/src/components/CloudQueryContent/index.vue
@ -0,0 +1,127 @@
+<template>
+  <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 :info="info"/>
+      </div>
+      <div style="display: block; width: 50%; margin-left: 20px" v-if="compare">
+        <CloudQueryModal :info="info"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits } from "vue"
+import Icon from '@/components/Icon/Icon.vue';
+import CloudQueryModal from './CloudQueryModal/index.vue';
+import { useCloudQueryStore } from '@/store/modules/cloudquery';
+import { LoadCloudQueryById } from '@/api/demo/cloudQuery'
+
+const useCloudQuery = useCloudQueryStore();
+const emits = defineEmits(['changeCompare'])
+const compare = ref(false);
+const info = ref()
+const changeCompare = () => {
+  compare.value = !compare.value;
+  console.log('compare.value', compare.value);
+  emits('changeCompare', compare.value)
+};
+onMounted(() => {
+  let id = useCloudQuery.getCloudQueryInfo.id
+  LoadCloudQueryById({id}).then(res => {
+    info.value = {
+      basicQuery:{
+        landClassify:{
+          image:'http://60.213.14.14:8060/geoserver/feixian/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&LAYERS=feixian%3Ayingxiang&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4527&STYLES=&WIDTH=1024&HEIGHT=1024&BBOX=39591762.54875996%2C3908085.3169043385%2C39592654.90645946%2C3909001.5344353705',
+          screenshotImage:'https://t0.tianditu.gov.cn/DataServer?T=img_w&x=216982&y=103419&l=18&tk=b6585bc41ee16251dbe6b1af64f375d9',
+          list:[
+            {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,}
+          ]
+        },
+        plowLandOccupy:{
+          image:'https://t0.tianditu.gov.cn/DataServer?T=img_w&x=217550&y=104260&l=18&tk=b6585bc41ee16251dbe6b1af64f375d9',
+          screenshotImage: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x=108774&y=52128&l=17&tk=b6585bc41ee16251dbe6b1af64f375d9',
+          list:[
+            {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,}
+          ]
+        },
+      },
+      timeImages:[
+        {
+          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>
+.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;
+  }
+}
+</style>
--- a/src/components/MapboxMaps/MapComponent.vue
+++ b/src/components/MapboxMaps/MapComponent.vue
@ -139,6 +139,7 @@

    import { message, Modal } from 'ant-design-vue'
    import { useCloudQueryStore } from '@/store/modules/cloudquery';
+    import { AddDroneTask } from '@/api/demo/cloudQuery.ts'

    const useCloudQuery = useCloudQueryStore();

@ -1240,9 +1241,11 @@
      if(useCloudQuery.getIdentification){
        message.warning('已有云查询运行，不能再次提交')
      }else{
-        // TODO 发起云查询
-        console.log('aaa props.geomsList',props.geomsList)
-        useCloudQuery.setIdentification(true);
+        let geomidStr = props.geomsList.map(item => item.key).join(',')
+        AddDroneTask({geomid:geomidStr}).then(res => {
+          message.success('成功提交云查询')
+          useCloudQuery.setIdentification(true);
+        })
      }
    }

--- a/src/layouts/default/header/components/notify/index.vue
+++ b/src/layouts/default/header/components/notify/index.vue
@ -59,26 +59,9 @@
      @cancel="open = false"
      :width="compare ? '1020px' : '510px'"
      style="top: 20px"
+      :destroyOnClose="true"
    >
-      <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>
+      <CloudQueryContent @changeCompare="changeCompare"/>
    </a-modal>
  </div>
 </template>
@ -103,7 +86,7 @@
  import { getDetail } from '@/api/sys/WFSchemeInfo';
  import { flowStore } from '@/store/modules/flow';
  import DetailModal from '@/views/demo/message/msg/DetailModal.vue';
-  import CloudQueryModal from '@/views/dashboard/test/SearchMenu/CloudQueryModal/index.vue';
+  import CloudQueryContent from '@/components/CloudQueryContent/index.vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { useCloudQueryStore } from '@/store/modules/cloudquery';

@ -214,18 +197,23 @@
  //接口推送
  signal.on('RevMsg', (user, message, time, id, issystem) => {
    console.log('报警', user, message, time, id, issystem); //拿到后台推送的数据
-    notification.info({
-      message: '您有一条新消息',
-      description: () => {
-        const res = message + '\n' + time;
-        return h('pre', {}, res);
-      },
-      duration: 3,
-    });
-    showCloudQuery({
-      id,
-    });
-    getList();
+    // ChaoShi 超时报警
+    // CloudQuery 云查询
+    if (user == 'CloudQuery') {
+      showCloudQuery({
+        id: message,
+      });
+    } else {
+      notification.info({
+        message: '您有一条新消息',
+        description: () => {
+          const res = message + '\n' + time;
+          return h('pre', {}, res);
+        },
+        duration: 3,
+      });
+      getList();
+    }
  });
  onMounted(() => {
    getList();
@ -247,8 +235,8 @@
  function closeCloudQuery() {
    cloudQueryVisible.value = false;
  }
-  const changeCompare = () => {
-    compare.value = !compare.value;
+  const changeCompare = (value) => {
+    compare.value = value;
    console.log('compare.value', compare.value);
  };
 </script>
@ -354,28 +342,6 @@
  }
 </style>
 <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;
--- a/src/store/modules/cloudquery.ts
+++ b/src/store/modules/cloudquery.ts
@ -7,6 +7,14 @@ export const useCloudQueryStore = defineStore({
    identification: false,
    // 云查询信息
    cloudqueryInfo: {},
+    // 云查询结果展示
+    cloudQueryModalInfo: {
+      basicQuery:{
+        landClassify:{},
+        plowLandOccupy:{},
+      },
+      timeImages:{},
+    },
  }),
  getters: {
    getCloudQueryInfo: (state) => {
@ -15,6 +23,9 @@ export const useCloudQueryStore = defineStore({
    getIdentification: (state) => {
      return state.identification;
    },
+    getCloudQueryModalInfo: (state) => {
+      return state.cloudQueryModalInfo;
+    }
  },
  actions: {
    setCloudQueryInfo(info: any) {
@ -23,5 +34,8 @@ export const useCloudQueryStore = defineStore({
    setIdentification(state: boolean) {
      this.identification = state;
    },
+    setCloudQueryModalInfo(data: any){
+      this.cloudQueryModalInfo = data;
+    }
  },
 });
--- a/src/views/dashboard/test/components/ShowImage/index.vue
+++ b/src/views/dashboard/test/components/ShowImage/index.vue
@ -8,7 +8,7 @@
  <a-image
    :width="470"
    :height="470"
-    :src="select === 0? image1: image2"
+    :src="select === 0? specialUrl: screenshotUrl"
  />
  <div class="footer" v-if="haveFooter">
    <slot name="footer" />
@ -17,8 +17,6 @@

 <script setup lang="ts">
 import { ref, defineProps } from "vue"
-import image1 from '@/views/dashboard/test/SearchMenu/CloudQueryModal/01B759D0-567B-4794-9386-645E7DC93C5F.png'
-import image2 from '@/views/dashboard/test/SearchMenu/CloudQueryModal/53E2647B-EF88-4793-9BFE-281F3EDD2BC7.png'
 const select = ref(0)
 const props = defineProps(["data", "haveFooter"])
 const { data:{ specialUrl, screenshotUrl }, haveFooter=false } = props
--- a/src/views/dashboard/test/components/ShowTableList/index.vue
+++ b/src/views/dashboard/test/components/ShowTableList/index.vue
@ -1,6 +1,6 @@
 <template>
  <div class="title">{{ title }}</div>
-  <a-table :columns="columns" :data-source="data" :pagination="false" size="small" :scroll="{y: 100}">
+  <a-table :columns="columns" :data-source="props.data" :pagination="false" size="small" :scroll="{y: 100}">
    <template #summary>
      <a-table-summary fixed>
        <a-table-summary-row>
@ -20,10 +20,10 @@
 <script setup lang="ts">
 import { defineProps, computed } from "vue"
 const props = defineProps(["columns", "data", "title"])
-const { columns=[], data=[], title="" } = props
+const { columns=[], title="" } = props
 const result = computed(() => {
  let sum = 0
-  data.forEach(item => {
+  props.data?.forEach(item => {
    sum += item.area
  })
  return sum
--- a/src/views/demo/system/account/account.data.ts
+++ b/src/views/demo/system/account/account.data.ts
@ -43,7 +43,7 @@ export const columns: BasicColumn[] = [
  },
  {
    title: '创建时间',
-    dataIndex: 'createTime',
+    dataIndex: 'createtime',
    width: 180,
  },
 ];
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
@ -541,12 +541,22 @@
      position: absolute;
    }
    :deep(.ant-image-preview-operations-wrapper) {
+      height: 100%;
      position: absolute;
-    }
-    :deep(.ant-image-preview-operations) {
-      position: absolute;
-      top: 0;
-      width: 100%;
+      .ant-image-preview-operations {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        .ant-image-preview-operations-operation{
+          flex:1;
+        }
+      }
+      .ant-image-preview-operations-operation:nth-last-child(1){
+        display: none;
+      }    
+      .ant-image-preview-operations-operation:nth-last-child(2){
+        display: none;
+      }
    }
  }
  ::v-deep .ant-tabs .ant-tabs-content-holder {
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
+++ b/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
@ -901,12 +901,22 @@
          position: absolute;
        }
        :deep(.ant-image-preview-operations-wrapper) {
+          height: 100%;
          position: absolute;
-        }
-        :deep(.ant-image-preview-operations) {
-          position: absolute;
-          top: 0;
-          width: 100%;
+          .ant-image-preview-operations {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            .ant-image-preview-operations-operation{
+              flex:1;
+            }
+          }
+          .ant-image-preview-operations-operation:nth-last-child(1){
+            display: none;
+          }    
+          .ant-image-preview-operations-operation:nth-last-child(2){
+            display: none;
+          }
        }
      }
    }
--- a/src/views/sys/exception/dataScreen/index.vue
+++ b/src/views/sys/exception/dataScreen/index.vue
@ -6,8 +6,12 @@
      </div>
      <TitleSelect :landType="landType" @changeLandType="changeLandType"/>
      <template v-if="firstPage">
-        <TopSelect :landType="landType" :countyId="props.countyId"/>
-        <DataStatistics :landType="landType" :countyId="props.countyId"/>
+        <div class="top-select">
+          <TopSelect :landType="landType" :countyId="props.countyId"/>
+        </div>
+        <div class="data-statistics">
+          <DataStatistics :landType="landType" :countyId="props.countyId"/>
+        </div>
        <div class="trend-statistics">
          <TrendStatistics :landType="landType" :countyId="props.countyId"/>
        </div>
@ -68,8 +72,14 @@ const changeLandType = (value) => {
      margin-bottom:20px;
      font-weight: bold;
    }
+    .top-select{
+      height:16%;
+    }
+    .data-statistics{
+      height:38%;
+    }
    .trend-statistics{
-      height: calc( 100% - 600px);
+      height: calc( 44% - 120px);
    }
    .patch-sumary{
      height: calc( 100% - 140px);
--- a/src/views/sys/exception/mapComponent/top_title.vue
+++ b/src/views/sys/exception/mapComponent/top_title.vue
@ -1,18 +1,17 @@
 <template>
    <div class="screen-header-container">
-        <div class="screen-title">
-
-          <img src="/public/statistical/logo.png" alt="" > {{t("sys.subject.header_title")}}</div>
-          <span class="screen-currentTime"> 
+        <div class="screen-title"><img src="/public/statistical/logo.png" alt="" > {{t("sys.subject.header_title")}}</div>
+        <span class="screen-currentTime"> 
            <span class="time">{{ currentTime }}</span>
-              <span class="separator"></span>
-                <span class="weather">{{ Weather }}</span>
-                </span>
+            <span class="separator"></span>
+            <span class="weather">{{ Weather }}</span>
+        </span>
         <div class="left-category-container" v-if="false">
            <div class="category-item" v-for="(item,index) in left_categorys"
                :style="{left:-index*26+'px'}"
                @click="getHome(item)"
-            >{{item.title}}</div>
+                >{{item.title}}
+            </div>
        </div>
        <div class="right_category-container" v-if="false">
            <div class="category-item" v-for="(item,index) in right_categorys"
@ -26,77 +25,138 @@
            <span style="color:#ddd" @click="logout">退出</span>
        </div>
    </div>
-  </template>
-  <script lang="ts" setup>
+    <div class="right_category-container">
+      <div
+        v-for="(item, index) in right_categorys"
+        :key="item.id"
+        class="category-item"
+        :style="{
+          left: `${-(index * 26)}px`,
+          'background-image': item.hovered
+            ? `url(/public/statistical/category-right-active.png)`
+            : `url(/public/statistical/category-right.png)`,
+        }"
+        @click="getHome(item)"
+        @mouseover="handleMouseOver('right', item)"
+        @mouseout="handleMouseOut('right', item)"
+      >
+        {{ item.title }}
+      </div>
+    </div>
+    <div class="user-info">
+      <span style="color: #325e95">{{ fireUserLoginName }}</span>
+      &nbsp;&nbsp;&nbsp;
+      <span style="color: #ddd" @click="logout">退出</span>
+    </div>
+  
+</template>
+<script lang="ts" setup>
+  import { ref, defineEmits, onMounted, onUnmounted, watchEffect, h } from 'vue';
+  import axios from 'axios';
+  import dayjs from 'dayjs';
+  import { useI18n } from '@/hooks/web/useI18n';
+  const { t } = useI18n();
+  import { message } from 'ant-design-vue';
+  import { getSpecialData } from '@/api/demo/system';
+  import { useRouter } from 'vue-router';
+  import { PageEnum } from '@/enums/pageEnum';
+  import { useUserStore } from '@/store/modules/user';
+  const userStore = useUserStore();
+  const router = useRouter();
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useMultipleTabStore } from '@/store/modules/multipleTab';
+  const { createConfirm } = useMessage();

-    import { ref, defineEmits, onMounted, onUnmounted, watchEffect,h } from 'vue';
-    import axios from 'axios';
-    import dayjs from 'dayjs';
+  // 上方菜单
+  const left_categorys = ref([]);
+  const right_categorys = ref([]);

-    import { useI18n } from '@/hooks/web/useI18n';
-    const { t } = useI18n();
-    import {message} from 'ant-design-vue'
-    import { getSpecialData } from '@/api/demo/system';
-    import { useRouter } from 'vue-router';
-    import { PageEnum } from '@/enums/pageEnum';
-    import { useUserStore } from '@/store/modules/user';
-    const userStore = useUserStore();
-    const router = useRouter();
-    import { useMessage } from '@/hooks/web/useMessage';
-    import { useMultipleTabStore } from '@/store/modules/multipleTab';
-    const { createConfirm } = useMessage();
-    const fireUserLoginName = ref<string>("");
+  async function getMenu() {
+    const res: any = await getSpecialData();
+    console.log('res123', res);
+    res?.forEach((item, index) => {
+      if (index < 4) {
+        item.hovered = false;
+        left_categorys.value?.push(item);
+      } else {
+        item.hovered = false;
+        right_categorys.value?.push(item);
+      }
+    });
+  }

-    fireUserLoginName.value = localStorage.getItem("fireUserLoginName")?localStorage.getItem("fireUserLoginName"):'';
-    // emit
-    const left_categorys = ref([])
-    const right_categorys = ref([])
-
-    async function getMenu(){
-        const res: any = await getSpecialData();
-        console.log("res123",res);
-        res?.forEach((item,index)=>{
-            if(index<4){
-                left_categorys.value?.push(item)
-            }else{
-                right_categorys.value?.push(item);
-            }
-        })
-    }
-
-    const tabStore = useMultipleTabStore();
-
-    function logout(){
-        createConfirm({
-        iconType: 'warning',
-        title: () => h('span', t('sys.navigation.logoutTip')),
-        content: () => h('span', t('sys.navigation.logoutMessage')),
-        onOk: async () => {
-            tabStore.resetState();
-            await router.replace(PageEnum.SUBJECT_HOME);
-        },
-        });
-    }
-    async function getHome(item) {
-        console.log(window.innerWidth);
-        if (!item.isDevelop) {
-            message.warn(item.title + '系统暂未开放！');
-            return;
-        }
-        if (item.isExternal) {
-            if (item.linkOrApi) {
-                window.location.href = item.linkOrApi;
-            } else {
-                message.warn('系统外部链接未配置！');
-                return;
-            }
+  function handleMouseOver(type, record) {
+    if (type == 'left') {
+      left_categorys.value.forEach((item: any) => {
+        if (item.id == record.id) {
+          item.hovered = true;
        } else {
-            if (!item.linkOrApi) {
-                item.linkOrApi = PageEnum.WELCOME_HOME;
-            }
-            userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
+          item.hovered = false;
        }
+      });
+    } else {
+      right_categorys.value.forEach((item: any) => {
+        if (item.id == record.id) {
+          item.hovered = true;
+        } else {
+          item.hovered = false;
+        }
+      });
    }
+  }
+  function handleMouseOut(type, record) {
+    if (type == 'left') {
+      left_categorys.value.forEach((item: any) => {
+        item.hovered = false;
+      });
+    } else {
+      right_categorys.value.forEach((item: any) => {
+        item.hovered = false;
+      });
+    }
+  }
+
+  // 登陆用户
+  const fireUserLoginName = ref(localStorage.getItem('fireUserLoginName'));
+  function getFireUserLoginName() {
+    fireUserLoginName.value = localStorage.getItem('fireUserLoginName')
+      ? localStorage.getItem('fireUserLoginName')
+      : '';
+  }
+
+  const tabStore = useMultipleTabStore();
+
+  function logout() {
+    createConfirm({
+      iconType: 'warning',
+      title: () => h('span', t('sys.navigation.logoutTip')),
+      content: () => h('span', t('sys.navigation.logoutMessage')),
+      onOk: async () => {
+        tabStore.resetState();
+        await router.replace(PageEnum.SUBJECT_HOME);
+      },
+    });
+  }
+  async function getHome(item) {
+    console.log(window.innerWidth);
+    if (!item.isDevelop) {
+      message.warn(item.title + '系统暂未开放！');
+      return;
+    }
+    if (item.isExternal) {
+      if (item.linkOrApi) {
+        window.location.href = item.linkOrApi;
+      } else {
+        message.warn('系统外部链接未配置！');
+        return;
+      }
+    } else {
+      if (!item.linkOrApi) {
+        item.linkOrApi = PageEnum.WELCOME_HOME;
+      }
+      userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
+    }
+  }

  // 时间和天气
  const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
@ -129,112 +189,113 @@
  onMounted(() => {
    getWeather();
    getMenu();
-  })
-  </script>
-  
-  <style lang="less" scoped>
-    .screen-header-container{
-        width:100%;
-        height:96px;
-        background-image:url("/public/statistical/header.png");
-        background-size:100% 96px;
-        position:absolute;
-        top:0px;
-        left:0px;
-        z-index:2;
-        .screen-title{
-            width: 682px;
-            height: 96px;
-            line-height:90px;
-            font-family: Alibaba PuHuiTi;
-            font-weight: bold;
-            font-size: 45px;
-            color: #8BE5EE;
-            background: linear-gradient(0deg, #C6F3FF 0%, #F3FEFF 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin:0px auto;
-            text-align: center;
-            img{
-                position:relative;
-                top:-5px;
-            }
-        }
+    getFireUserLoginName();
+  });
+</script>

-        .screen-currentTime {
-          position: relative;
-          left: 50px;
-          top: -60px;

-          width: 344px;
-          height: 14px;
-          font-family: DengXian;
-          font-weight: 400;
-          font-size: 14px;
-          color: #8BD8FF;
-          line-height: 3px;
-          font-style: italic;
-          display: flex;
-          align-items: center;
-        }
-        .time,
-        .weather {
-          display: inline-block;
-        }
-        .separator {
-          margin: 0 50px;
-        }
-        .left-category-container{
-            position:absolute;
-            top:50px;
-            left:50%;
-            transform: translate( calc( -50% - 570px),0);
-            .category-item{
-                float:left;
-                width:138px;
-                height:32px;
-                font-size:14px;
-                line-height:32px;
-                text-align: center;
-                background-image:url("/public/statistical/category-left.png");
-                background-size:138px 32px;
-                color:#fff;
-                position:relative;
-                cursor:pointer;
-            }
-        }
-        .right_category-container{
-            position:absolute;
-            top:50px;
-            right:50%;
-            transform: translate( calc( 50% + 570px),0);
-            .category-item{
-                float:left;
-                width:138px;
-                height:32px;
-                font-size:14px;
-                line-height:32px;
-                text-align: center;
-                background-image:url("/public/statistical/category-right.png");
-                background-size:138px 32px;
-                color:#fff;
-                cursor:pointer;
-                position:relative;
-            }
-        }
-
-        .user-info{
-            width:120px;
-            color:#e1e1e1;
-            position:absolute;
-            top:48px;
-            right:20px;
-            font-size:14px;
-            &:hover{
-                cursor:pointer;
-                color:#8BE5EE;
-            }
-        }
+<style lang="less" scoped>
+  .screen-header-container {
+    width: 100%;
+    height: 96px;
+    background-image: url('/public/statistical/header.png');
+    background-size: 100% 96px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 2;
+    .screen-title {
+      width: 682px;
+      height: 96px;
+      line-height: 90px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: bold;
+      font-size: 45px;
+      color: #8be5ee;
+      background: linear-gradient(0deg, #c6f3ff 0%, #f3feff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin: 0px auto;
+      text-align: center;
+      img {
+        position: relative;
+        top: -5px;
+      }
    }
-  </style>
-  
+
+    .screen-currentTime {
+        position: relative;
+        left: 50px;
+        top: -60px;
+
+        width: 344px;
+        height: 14px;
+        font-family: DengXian;
+        font-weight: 400;
+        font-size: 14px;
+        color: #8BD8FF;
+        line-height: 3px;
+        font-style: italic;
+        display: flex;
+        align-items: center;
+      }
+      .time,
+      .weather {
+        display: inline-block;
+      }
+      .separator {
+        margin: 0 50px;
+      }
+      .left-category-container{
+          position:absolute;
+          top:50px;
+          left:50%;
+          transform: translate( calc( -50% - 570px),0);
+          .category-item{
+              float:left;
+              width:138px;
+              height:32px;
+              font-size:14px;
+              line-height:32px;
+              text-align: center;
+              background-image:url("/public/statistical/category-left.png");
+              background-size:138px 32px;
+              color:#fff;
+              position:relative;
+              cursor:pointer;
+          }
+      }
+      .right_category-container{
+          position:absolute;
+          top:50px;
+          right:50%;
+          transform: translate( calc( 50% + 570px),0);
+          .category-item{
+              float:left;
+              width:138px;
+              height:32px;
+              font-size:14px;
+              line-height:32px;
+              text-align: center;
+              background-image:url("/public/statistical/category-right.png");
+              background-size:138px 32px;
+              color:#fff;
+              cursor:pointer;
+              position:relative;
+          }
+      }
+
+      .user-info{
+          width:120px;
+          color:#e1e1e1;
+          position:absolute;
+          top:48px;
+          right:20px;
+          font-size:14px;
+          &:hover{
+              cursor:pointer;
+              color:#8BE5EE;
+          }
+      }
+  }
+</style>