From 19b73a554f3babcd7bd4fbbc0c3e7cf2e21c5a9f Mon Sep 17 00:00:00 2001
From: helloxujingliang <3225043@qq.com>
Date: Wed, 31 Jul 2024 10:27:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=B1=87=E8=81=9A=E3=80=81?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/routes/index.ts                    |   9 +
 .../MapList/ShowInfoModal/index.vue           |   3 +-
 .../demo/tiankongdi/mapaggregation/index.vue  |   4 +-
 src/views/sys/exception/Converge.vue          | 217 +++++++++
 src/views/sys/exception/Converge/config.ts    |  63 +++
 src/views/sys/exception/Converge/index.vue    | 450 ++++++++++++++++++
 src/views/sys/exception/Exception.vue         |   4 +-
 .../sys/exception/LargeScreenMap/index.vue    |  17 +-
 ....timestamp-1722387150017-c3991c9d1cc1f.mjs |  66 +++
 9 files changed, 815 insertions(+), 18 deletions(-)
 create mode 100644 src/views/sys/exception/Converge.vue
 create mode 100644 src/views/sys/exception/Converge/config.ts
 create mode 100644 src/views/sys/exception/Converge/index.vue
 create mode 100644 vite.config.ts.timestamp-1722387150017-c3991c9d1cc1f.mjs

diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index cfca4418..cc088241 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -90,6 +90,14 @@ export const SubjectRoute: AppRouteRecordRaw = {
     title: '主题',
   },
 };
+export const LargeScreenRoute: AppRouteRecordRaw = {
+  path: '/largeScreen',
+  name: 'largeScreen',
+  component: () => import('@/views/sys/exception/Exception.vue'),
+  meta: {
+    title: '大屏',
+  },
+};
 export const FORMCALLPAGE_ROUTE: AppRouteRecordRaw = {
   path: '/formCallPageParent',
   component: LAYOUT,
@@ -126,4 +134,5 @@ export const basicRoutes = [
   SchemeRoute,
   SubjectRoute,
   FORMCALLPAGE_ROUTE,
+  LargeScreenRoute,
 ];
diff --git a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
index 3af16178..103046e7 100644
--- a/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
+++ b/src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
@@ -54,7 +54,7 @@
               </div>
             </a-descriptions-item>
             <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
-            <a-descriptions-item label="接收时间">{{ jieshou_time.split('.')[0] }}</a-descriptions-item>
+            <a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item>
           </a-descriptions>
         </a-tab-pane>
         <a-tab-pane key="2" v-if="!['建设用地','推堆土'].includes(typename)" tab="线索填报" force-render>
@@ -261,7 +261,6 @@
   const mapConfig = ref({});
   getConfig({ code: 'mapsetting' }).then((res) => {
     mapConfig.value = JSON.parse(res.codeValue);
-    console.log('resresres', mapConfig.value);
   });
 
   const props = defineProps(['showInfoData']);
diff --git a/src/views/demo/tiankongdi/mapaggregation/index.vue b/src/views/demo/tiankongdi/mapaggregation/index.vue
index 5ea45646..0270fbab 100644
--- a/src/views/demo/tiankongdi/mapaggregation/index.vue
+++ b/src/views/demo/tiankongdi/mapaggregation/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <Exception />
+  <Converge />
 </template>
 <script lang="ts" setup>
-  import Exception from '@/views/sys/exception/Exception.vue';
+  import Converge from '@/views/sys/exception/Converge.vue';
 </script>
diff --git a/src/views/sys/exception/Converge.vue b/src/views/sys/exception/Converge.vue
new file mode 100644
index 00000000..46723c04
--- /dev/null
+++ b/src/views/sys/exception/Converge.vue
@@ -0,0 +1,217 @@
+  <template>
+    <div class="statistical" id="bg-pan">
+      
+      <Map @onload="handlerOnMapLoad" @handlerGetDetails="handlerGetDetails" style="position: absolute; top: 0px; left: 0px;height: calc( 100vh - 80px);width:100%;z-index:0;" ref="MapboxComponent"></Map>
+  
+      <div class="legend">
+        <div class="legend-item" v-for="(item,index) in legends" :key="index">
+           <div class="legend-dot" :style="{background:item.color}"></div>
+           <div class="legend-label">{{item.label}}</div>
+        </div>
+      </div>
+      
+      <a-modal
+        style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+        wrap-class-name="full-modal"
+        v-model:open="showInfoOpen"
+        title="详情"
+        :footer="null"
+        :maskClosable="true"
+        :destroyOnClose="true"
+        @cancel="showInfoOpen = false"
+        >
+        <div class="modal-content">
+          <ShowInfoModal v-if="showInfoOpen" :showInfoData="showInfoData" />
+        </div>
+      </a-modal>
+  
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+    import { ref, onMounted, onUnmounted, computed } from 'vue';
+    import Map from './Converge/index.vue';
+    import layerButton from './mapComponent/left_layerButton.vue';
+    import statisticalType from './mapComponent/left_statisticalType.vue';
+    import county from './mapComponent/left_county.vue';
+    import DataScreen from './dataScreen/index.vue'
+    import Header from './mapComponent/top_title.vue'
+    import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
+    import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
+    // details
+    const showInfoOpen = ref<Boolean>(false);
+    const showInfoData = ref();
+  
+    const getInfoList = (id) => {
+      getCaseInfoById({id:id}).then(res => {
+        if(res){
+          showInfoData.value = res
+          showInfoOpen.value = true;
+        }else{
+          
+        }
+      })
+    };
+  
+    const MapboxComponent = ref();
+    const countyId = ref();
+  
+    const legends = ref([
+      {
+        label:"违法",
+        color:"rgb(253, 161, 161)",
+      },{
+        label:"合法",
+        color:"rgb(255, 236, 185)",
+      },{
+        label:"其他",
+        color:"rgb(199, 255, 188)",
+      },{
+        label:"补办手续",
+        color:"rgb(171, 252, 255)",
+      },{
+        label:"拆除复耕",
+        color:"rgb(194, 179, 251)",
+      },
+    ])
+  
+    function handlerOnMapLoad(){
+        
+    }
+  
+    function handlerGetDetails(e){
+      getInfoList(e.Id);
+    }
+  
+    // 选择区县
+    const currentCounty = ref({ name: '', code: '' });
+    function countyClick(data) {
+      countyId.value = data.id;
+      currentCounty.value = { name: data['name'], code: data['id'] };
+      MapboxComponent.value.handlerChangeCounty(currentCounty.value);
+    }
+  
+    // 图例点击
+    function handlerChangePolygonType(data) {
+      MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
+    }
+  
+  
+    // 切换图斑类型
+    function changeLandType(type):void{
+      MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], "",type);
+    }
+  
+  </script>
+  
+  <style lang="less" scoped>
+    .statistical {
+      // position: relative;
+      // 页面不能被选中
+      -webkit-user-select: none; /* Safari */
+      -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* IE/Edge */
+      user-select: none;
+    }
+  
+    #bg-pan{
+  
+    }
+  #alertOverlay::before,#alertOverlay::after {
+    content: "";
+    position: absolute;
+    width: 50px;
+    height: 100%;
+  }
+  
+  #alertOverlay  div::before,#alertOverlay  div::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 50px;
+  }
+  
+  #alertOverlay::before {
+    background: linear-gradient(to right, rgba(0, 0, 0,0.8), transparent);
+    top: 0;
+    left: 0;
+    transform: rotate(0deg);
+  }
+  
+  #alertOverlay::after {
+    background: linear-gradient(to left, rgba(0, 0, 0,0.8), transparent);
+    top: 0%;
+    left: 100%;
+    transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
+  }
+  
+  #alertOverlay div::before {
+    background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
+    top: 0;
+    left: 0;
+    transform: rotate(180deg);
+  }
+  
+  #alertOverlay div::after {
+    background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
+    top: 100%;
+    left: 0;
+    transform: rotate(0deg) translate(0px, calc(-1 * 50px));
+  }
+  
+  #alertOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    opacity: 1;
+    transition: opacity 0.5s;
+    pointer-events: none;
+    z-index: 1;
+  }
+  
+  .alert-active{
+    animation: blink 0s infinite;
+  }
+  
+  @keyframes blink {
+    0% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  
+  .legend{
+    width:120px;
+    padding:10px;
+    position:absolute;
+    bottom:20px;
+    right:20px;
+    background:#fff;
+    border-radius: 8px;
+    .legend-item{
+      padding:5px 0px;
+      font-size:14px;
+      color:#666666;
+      display:flex;
+      .legend-dot{
+        width:14px;
+        height:14px;
+        border-radius: 50%;
+      }
+      .legend-label{
+        margin-left:12px;
+      }
+    }
+  }
+  
+  </style>
+  
+  
\ No newline at end of file
diff --git a/src/views/sys/exception/Converge/config.ts b/src/views/sys/exception/Converge/config.ts
new file mode 100644
index 00000000..7d006c87
--- /dev/null
+++ b/src/views/sys/exception/Converge/config.ts
@@ -0,0 +1,63 @@
+export const MAPBOX_TOKEN = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
+
+export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
+
+export const MAP_VIEWER = {
+    "兰山区":{
+        center:{lng: 118.35182370979693, lat: 35.183090621691385},
+        zoom:10.048587811931847
+    },
+    "河东区":{
+        center:{lng: 118.59697279346507, lat: 35.18490235060048},
+        zoom:10,
+    },
+    "罗庄区":{
+        center:{lng: 118.32214269732968, lat: 34.88793861991461},
+        zoom:10.348587811931848,
+    },
+    "高新区":{
+        center:{lng: 118.22321338283429, lat: 35.02848900013085},
+        zoom:11.197175623863698,
+    },
+    "沂河新区":{
+        center:{lng: 118.56406202558459, lat: 35.02402208121399},
+        zoom:9.848587811931848,
+    },
+    "费县":{
+        center:{lng: 118.07423584053117, lat: 35.25200708547465},
+        zoom:9.700000000000005,
+    },
+    "平邑县":{
+        center:{lng: 117.7943998613617, lat: 35.397797381650626},
+        zoom:9.5,
+    },
+    "蒙阴县":{
+        center:{lng: 118.16071230795704, lat: 35.706258658571166},
+        zoom:9.500000000000002,
+    },
+    "沂水县":{
+        center:{lng: 118.7262955596875, lat: 35.875369642007094},
+        zoom:9.500000000000002,
+    },
+    "沂南县":{
+        center:{lng: 118.45908849919756, lat: 35.49273684421736},
+        zoom:9.748587811931854,
+    },
+    "兰陵县":{
+        center:{lng: 118.10841982910361, lat: 34.81986176408728},
+        zoom:9.597175623863698,
+    },
+    "郯城县":{
+        center:{lng: 118.32120708234048, lat: 34.635986538650336},
+        zoom:9.7,
+    },
+    "临沭县":{
+        center:{lng: 118.74187031029359, lat: 34.850952753798644},
+        zoom:9.848587811931848,
+    },
+    "莒南县":{
+        center:{lng: 118.96807389575793, lat: 35.186365164136504},
+        zoom:9.848587811931848,
+    }
+}
+
diff --git a/src/views/sys/exception/Converge/index.vue b/src/views/sys/exception/Converge/index.vue
new file mode 100644
index 00000000..6a93f97d
--- /dev/null
+++ b/src/views/sys/exception/Converge/index.vue
@@ -0,0 +1,450 @@
+<template>
+    <div :id="mapContainerName" class="map-container">
+
+    </div>
+</template>
+<script lang="ts" setup>
+import {ref,onMounted,defineExpose,defineEmits} from "vue";
+import { generateUUID} from '@/components/MapboxMaps/src/tool'
+import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
+import  mapboxgl,{ Map, Popup } from 'mapbox-gl';
+import {MAPBOX_TOKEN,TINADITU_TOKEN,MAP_VIEWER} from './config.ts'
+import heatGeoJson from './data.json'
+import {getPolygonCenter} from '@/api/tiankongdi'
+import axios from 'axios'
+
+import { getAppEnvConfig } from '@/utils/env';
+const { VITE_GLOB_API_URL } = getAppEnvConfig();
+const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
+
+const mapContainerName = ref<String>()
+mapContainerName.value = "mapContainer-"+generateUUID();
+// 
+
+const emits = defineEmits(["onload","handlerGetDetails"])
+
+let map:Map;
+
+// init map
+const initMap = () => {
+    return new mapboxgl.Map({
+        container:mapContainerName.value,
+        language: 'zh-cmn',
+        projection: 'equirectangular', // wgs84参考系
+        style: {
+            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+            version: 8,
+            sources: {
+                'raster-tiles': {
+                type: 'raster',
+                tiles: [
+                    `https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
+                ],
+                tileSize: 256,
+                },
+            },
+            layers: [
+                {
+                id: 'tdt-img-tiles',
+                type: 'raster',
+                source: 'raster-tiles',
+                minzoom: 0,
+                maxzoom: 18,
+                },
+            ],
+        },
+        maxZoom:18,
+        minZoom:1,
+        zoom: 10,
+        pitch:0,
+        center: [117.984425,35.270654],
+    });
+};
+
+// 获取图斑面数据
+const polygonVisibility = ref<String>("visible");
+
+function handlerLoadPolygon(code="",filter="",type=""){
+    let sql_filter;
+    if(code){
+        sql_filter = "&filter=\"countyid\"=\'"+code+"\'";
+    }else{
+        sql_filter=""
+    }
+    let map_filter;
+    switch(filter){
+        case "合法":
+            map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
+            break;
+        case "违法":
+            map_filter = ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]];
+            break;
+        case "其他":
+            map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
+            break;
+        case "补办手续":
+            map_filter = ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]];
+            break;
+        case "拆除复耕":
+            map_filter = ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]];
+            break;
+        default:
+            map_filter = ["!=", ["get", "gid"], 0];
+    }
+    let type_filter;
+    switch(type){
+        case "农用地":
+            type_filter = ["==", ["get", "typename"], "农用地"];
+            break;
+        case "建设用地":
+            type_filter = ["==", ["get", "typename"], "建设用地"];
+            break;
+        case "推堆土":
+            type_filter = ["==", ["get", "typename"], "推堆土"];
+            break;
+    }
+    if(filter && type){
+        map_filter.push(type_filter);
+    }else if(!filter && type){
+        map_filter = ["all",["!=", ["get", "gid"], 0],type_filter];
+    }
+    if(map.getSource("historyLayerLine")){
+        polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
+        map.removeLayer("historyLayerLine")
+        map.removeLayer("historyLayerFill")
+        map.removeSource("historyLayerLine")
+        map.removeSource("historyLayerFill");
+    }
+    map.addLayer(
+        {
+          'id': 'historyLayerLine',
+          'type': 'line',
+          'source': {
+            type: 'vector',
+            tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data&'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",'],
+            minzoom: 1,
+            maxzoom: 20
+          },
+          "source-layer": "view_drone_shp_data",
+          'layout': {
+            'line-join': 'round',
+            'line-cap': 'round',
+            'visibility':polygonVisibility.value,
+          },
+          'filter':map_filter,
+          'paint': {
+            'line-color': [
+              "case",
+              ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]],  //合法
+              "#FFECB9",
+              ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
+              "#FDA1A1",
+              ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
+              "#C7FFBC",
+              ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
+              "#ABFCFF",
+              ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
+              "#C2B3FB",
+              // 默认
+              "#FDA1A1",
+            ],
+            'line-width': 4
+          }
+        }
+    )
+    map.addLayer({
+          'id': 'historyLayerFill',
+          'type': 'fill',
+          'source': {
+            type: 'vector',
+            tiles: [VITE_GLOB_API_URL_VAR.value+'/api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data'+sql_filter+'&field=\"gid\",\"handle_status_id\",\"is_illegal\",\"measure_name\",\"typename\",\"Id\",'],
+            // 
+            minzoom: 1,
+            maxzoom: 20
+          },
+          "source-layer": "view_drone_shp_data",
+          'filter':map_filter,
+          'layout':{
+            'visibility':polygonVisibility.value,
+          },
+          'paint': {
+            'fill-color': [
+                "case",
+                ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]],  //合法
+                "#FFECB9",
+                ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
+                "#FDA1A1",
+                ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
+                "#C7FFBC",
+                ["all",["==", ["get", "measure_name"], 0],["==", ["get", "handle_status_id"], 5]], //补办手续
+                "#ABFCFF",
+                ["all",["==", ["get", "measure_name"], 1],["==", ["get", "handle_status_id"], 5]], //拆除复耕
+                "#C2B3FB",
+                // 默认
+                "#FDA1A1",
+            ],
+            'fill-opacity': 0.3
+          }
+    })
+    emits("onload");
+
+    map.on("click","historyLayerFill",(e)=>{
+       emits("handlerGetDetails",e.features[0].properties);
+    })
+}
+
+// 获取和处理图斑点数据
+const currentCode = ref("")
+async function handlerDealPoint(code=""){
+    let sql_filter;
+    if(code){
+        sql_filter = "\"countyid\"=\'"+code+"\'";
+    }else{
+        sql_filter=""
+    }
+    let points = await getPolygonCenter({tablename:"view_drone_shp_data",filter:sql_filter})
+    
+    let heatdata = {
+        type: "FeatureCollection",
+        features:[]
+    }
+    points?.forEach((item,index)=>{
+        let geometry = WktToGeojson(item['centroid_point']);
+        let feature = {
+            geometry:geometry,
+            properties:{
+                mag:1
+            }
+        }
+        heatdata.features.push(feature);
+    })
+
+    handlerLoadHeatLayer(heatdata);
+
+    if(map.getLayer('clusters')){
+        map.moveLayer("clusters","heatLayer");
+        map.moveLayer("cluster-count","heatLayer")
+        map.moveLayer("unclustered-point","heatLayer")
+    }
+
+}
+
+// 加载热力图图斑数据
+function handlerLoadHeatLayer(heatdata){
+    if(map.getSource("heatSource")){
+        map.getSource("heatSource").setData(heatdata);
+    }else{
+        map.addSource('heatSource', {
+            'type': 'geojson',
+            'data': heatdata
+        });
+        map.addLayer(
+            {
+                'id': 'heatLayer',
+                'type': 'heatmap',
+                'source': 'heatSource',
+                'maxzoom': 13,
+                'minzoom':7,
+                'layout':{
+                    "visibility":"none"
+                },
+                'paint': {
+                    'heatmap-weight': [
+                        'interpolate',
+                        ['linear'],
+                        ['get', 'mag'],
+                        0,
+                        1,
+                        7,
+                        0
+                    ],
+                    'heatmap-intensity': [
+                        'interpolate',
+                        ['linear'],
+                        ['zoom'],
+                        0,
+                        1,
+                        9,
+                        3
+                    ],
+                    'heatmap-color': [
+                        'interpolate',
+                        ['linear'],
+                        ['heatmap-density'],
+                        0,
+                        'rgba(33,102,172,0)',
+                        0.2,
+                        'rgba(103,169,207,0.8)',
+                        0.4,
+                        'rgba(209,229,240,0.8)',
+                        0.6,
+                        'rgba(253,219,199,0.8)',
+                        0.8,
+                        'rgba(239,138,98,0.8)',
+                        1,
+                        'rgba(178,24,43,0.8)'
+                    ],
+                    'heatmap-radius': [
+                        'interpolate',['linear'],['zoom'],
+                        4,
+                        7,
+                        11,
+                        20
+                    ],
+                    'heatmap-opacity': [
+                        'interpolate',
+                        ['linear'],
+                        ['zoom'],
+                        7,
+                        0,
+                        8,
+                        1
+                    ]
+                }
+            }
+        );
+    }
+
+
+
+    if(map.getLayer('heatLayer')){
+        map.moveLayer('heatLayer', 'historyLayerLine');
+        map.moveLayer('heatLayer', 'historyLayerFill');
+        if(map.getLayer('clusters')){
+            map.moveLayer("clusters","heatLayer");
+            map.moveLayer("cluster-count","heatLayer")
+            map.moveLayer("unclustered-point","heatLayer")
+        }
+    }
+
+    
+}
+
+// 地图定位
+function handlerLocation(lngLat,zoom){
+    map.flyTo({
+    center: lngLat,
+        zoom: zoom,
+        bearing: 0,
+        speed: 1, // 飞行速度
+        curve: 2, // 飞行曲线
+        essential: true,
+        easing(t) {
+            // 飞行动画函数
+            return t;
+        },
+    });
+};
+
+// 获取县区边界数据
+const handlerDealCountry = (countyName:String = "临沂市"):void=>{
+    let center = {};
+    let zoom;
+    let filterName = "";
+    if(countyName == '临沂市'){
+        center ={lng: 118.72504868812163, lat: 35.180072027132915}
+        zoom = 7.848587811931849;
+        handlerLocation([center['lng'],center['lat']],zoom);
+    }else if(countyName){
+        center = MAP_VIEWER[countyName].center;
+        zoom = MAP_VIEWER[countyName].zoom;
+        handlerLocation([center['lng'],center['lat']],zoom);
+        filterName=countyName;
+    } 
+
+    axios({
+        method:"get",
+        url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
+    }).then(res=>{
+        handlerLoadCountyLayer(res.data);
+    })
+
+}
+
+
+// 渲染边界数据
+const handlerLoadCountyLayer = (geojson)=>{
+    // 绘制线
+    if(map.getSource("countySource")){
+        map.getSource("countySource").setData(geojson);
+      }else{
+        map.addSource("countySource",{
+          type:"geojson",
+          data:geojson
+        })
+        map.addLayer(
+          {
+            "id": "countyLayer",
+            "type": "line",
+            "source": "countySource",
+            "paint": {
+              'line-color': '#408eff', // 设置线的颜色
+              'line-width': 2 // 设置线的宽度
+            }
+          }
+        )
+      }
+}
+
+// 控制图层显示隐层
+/**
+ * 热力图：heatLayer
+ * 
+ * 图斑线：historyLayerLine
+ * 
+ * 图斑面：historyLayerFill
+ * 
+ * 行政区划：countyLayer
+ * 
+ * */ 
+function handlerChangeLayerVisible(layerName,checked){
+    if (checked) {
+        map.setLayoutProperty(layerName, 'visibility', 'visible');
+    } else {
+        map.setLayoutProperty(layerName, 'visibility', 'none');
+    }
+}
+
+// 切换县区
+function handlerChangeCounty(county,type=""){
+    handlerDealCountry(county.name);
+    handlerLoadPolygon(county.code,type);
+    handlerDealPoint(county.code);
+}
+
+
+
+// 
+onMounted(()=>{
+    mapboxgl.accessToken = MAPBOX_TOKEN;
+    map = initMap();
+    map.on("load",()=>{
+        handlerDealCountry();
+        handlerLoadPolygon();
+        map.on("click",(e)=>{
+            var center = map.getCenter(); // 获取当前视图中心点
+            var zoom = map.getZoom(); // 获取当前视图缩放级别
+            console.log(zoom);
+            console.log(center);
+        })
+    })
+})
+
+
+// 抛出函数
+defineExpose({
+    handlerChangeCounty,   // 切换县区
+    handlerChangeLayerVisible, // 控制图层显示隐藏
+    handlerLoadPolygon,
+});
+
+</script>
+<style type="less" scoped>
+.map-container{
+    width:100%;
+    height:100%;
+}
+::v-deep .mapboxgl-ctrl-logo{
+    display: none!important;
+}
+</style>
diff --git a/src/views/sys/exception/Exception.vue b/src/views/sys/exception/Exception.vue
index b1ebcd70..d9f9dbc2 100644
--- a/src/views/sys/exception/Exception.vue
+++ b/src/views/sys/exception/Exception.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="statistical" id="bg-pan">
-    <Header v-if="false"></Header>
+    <Header v-if="true"></Header>
     <div id="alertOverlay" class="alert-active" ref="alertOverlay" >
       <div></div>
     </div>
@@ -234,4 +234,4 @@
 }
 
 
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/sys/exception/LargeScreenMap/index.vue b/src/views/sys/exception/LargeScreenMap/index.vue
index 26a184a0..0e7cb0ae 100644
--- a/src/views/sys/exception/LargeScreenMap/index.vue
+++ b/src/views/sys/exception/LargeScreenMap/index.vue
@@ -4,7 +4,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import {ref,onMounted,defineExpose} from "vue";
+import {ref,onMounted,defineExpose,defineEmits} from "vue";
 import { generateUUID} from '@/components/MapboxMaps/src/tool'
 import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
 import  mapboxgl,{ Map, Popup } from 'mapbox-gl';
@@ -21,6 +21,8 @@ const mapContainerName = ref<String>()
 mapContainerName.value = "mapContainer-"+generateUUID();
 // 
 
+const emits = defineEmits(["onload","handlerGetDetails"])
+
 let map:Map;
 
 // init map
@@ -69,9 +71,7 @@ function handlerLoadPolygon(code="",filter="",type=""){
     }else{
         sql_filter=""
     }
-
     let map_filter;
-
     switch(filter){
         case "合法":
             map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
@@ -91,9 +91,7 @@ function handlerLoadPolygon(code="",filter="",type=""){
         default:
             map_filter = ["!=", ["get", "gid"], 0];
     }
-
     let type_filter;
-
     switch(type){
         case "农用地":
             type_filter = ["==", ["get", "typename"], "农用地"];
@@ -105,16 +103,11 @@ function handlerLoadPolygon(code="",filter="",type=""){
             type_filter = ["==", ["get", "typename"], "推堆土"];
             break;
     }
-    console.log("type_filter",type_filter);
-
     if(filter && type){
         map_filter.push(type_filter);
     }else if(!filter && type){
         map_filter = ["all",["!=", ["get", "gid"], 0],type_filter];
     }
-    console.log("map_filter",type_filter,"\n",map_filter);
-
-
     if(map.getSource("historyLayerLine")){
         polygonVisibility.value = map.getLayoutProperty('historyLayerLine', 'visibility');
         map.removeLayer("historyLayerLine")
@@ -122,7 +115,6 @@ function handlerLoadPolygon(code="",filter="",type=""){
         map.removeSource("historyLayerLine")
         map.removeSource("historyLayerFill");
     }
-
     map.addLayer(
         {
           'id': 'historyLayerLine',
@@ -194,9 +186,10 @@ function handlerLoadPolygon(code="",filter="",type=""){
             'fill-opacity': 0.3
           }
     })
+    emits("onload");
 
     map.on("click","historyLayerFill",(e)=>{
-       
+       emits("handlerGetDetails",e.features[0].properties);
     })
 }
 
diff --git a/vite.config.ts.timestamp-1722387150017-c3991c9d1cc1f.mjs b/vite.config.ts.timestamp-1722387150017-c3991c9d1cc1f.mjs
new file mode 100644
index 00000000..04f530db
--- /dev/null
+++ b/vite.config.ts.timestamp-1722387150017-c3991c9d1cc1f.mjs
@@ -0,0 +1,66 @@
+// vite.config.ts
+import { defineApplicationConfig } from "file:///E:/projects/%E8%B4%A2%E6%BA%90%E7%B3%BB%E7%BB%9F/CaiYuanYiTiHua/internal/vite-config/dist/index.mjs";
+var vite_config_default = defineApplicationConfig({
+  overrides: {
+    optimizeDeps: {
+      include: [
+        "echarts/core",
+        "echarts/charts",
+        "echarts/components",
+        "echarts/renderers",
+        "qrcode",
+        "@iconify/iconify",
+        "ant-design-vue/es/locale/zh_CN",
+        "ant-design-vue/es/locale/en_US",
+        "@/../lib/vform/designer.umd.js"
+      ]
+    },
+    build: {
+      /* 其他build生产打包配置省略 */
+      //...
+      target: "esnext",
+      commonjsOptions: {
+        include: /node_modules|lib/
+        //这里记得把lib目录加进来，否则生产打包会报错！！
+      }
+    },
+    server: {
+      proxy: {
+        "/basic-api": {
+          target: "http://localhost:3000",
+          changeOrigin: true,
+          ws: true,
+          rewrite: (path) => path.replace(new RegExp(`^/basic-api`), "")
+          // only https
+          // secure: false
+        },
+        "/upload": {
+          target: "http://localhost:3300/upload",
+          changeOrigin: true,
+          ws: true,
+          rewrite: (path) => path.replace(new RegExp(`^/upload`), "")
+        }
+      },
+      warmup: {
+        clientFiles: ["./index.html", "./src/{views,components}/*"]
+      }
+    },
+    define: {
+      "process.env": {
+        BASE_URL: "/"
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true
+        }
+      }
+    },
+    plugins: []
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJFOlxcXFxwcm9qZWN0c1xcXFxcdThEMjJcdTZFOTBcdTdDRkJcdTdFREZcXFxcQ2FpWXVhbllpVGlIdWFcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkU6XFxcXHByb2plY3RzXFxcXFx1OEQyMlx1NkU5MFx1N0NGQlx1N0VERlxcXFxDYWlZdWFuWWlUaUh1YVxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRTovcHJvamVjdHMvJUU4JUI0JUEyJUU2JUJBJTkwJUU3JUIzJUJCJUU3JUJCJTlGL0NhaVl1YW5ZaVRpSHVhL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQXBwbGljYXRpb25Db25maWcgfSBmcm9tICdAdmJlbi92aXRlLWNvbmZpZyc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUFwcGxpY2F0aW9uQ29uZmlnKHtcbiAgb3ZlcnJpZGVzOiB7XG4gICAgb3B0aW1pemVEZXBzOiB7XG4gICAgICBpbmNsdWRlOiBbXG4gICAgICAgICdlY2hhcnRzL2NvcmUnLFxuICAgICAgICAnZWNoYXJ0cy9jaGFydHMnLFxuICAgICAgICAnZWNoYXJ0cy9jb21wb25lbnRzJyxcbiAgICAgICAgJ2VjaGFydHMvcmVuZGVyZXJzJyxcbiAgICAgICAgJ3FyY29kZScsXG4gICAgICAgICdAaWNvbmlmeS9pY29uaWZ5JyxcbiAgICAgICAgJ2FudC1kZXNpZ24tdnVlL2VzL2xvY2FsZS96aF9DTicsXG4gICAgICAgICdhbnQtZGVzaWduLXZ1ZS9lcy9sb2NhbGUvZW5fVVMnLFxuICAgICAgICAnQC8uLi9saWIvdmZvcm0vZGVzaWduZXIudW1kLmpzJyxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgLyogXHU1MTc2XHU0RUQ2YnVpbGRcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTkxNERcdTdGNkVcdTc3MDFcdTc1NjUgKi9cbiAgICAgIC8vLi4uXG4gICAgICB0YXJnZXQ6ICdlc25leHQnLFxuICAgICAgY29tbW9uanNPcHRpb25zOiB7XG4gICAgICAgIGluY2x1ZGU6IC9ub2RlX21vZHVsZXN8bGliLywgLy9cdThGRDlcdTkxQ0NcdThCQjBcdTVGOTdcdTYyOEFsaWJcdTc2RUVcdTVGNTVcdTUyQTBcdThGREJcdTY3NjVcdUZGMENcdTU0MjZcdTUyMTlcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTRGMUFcdTYyQTVcdTk1MTlcdUZGMDFcdUZGMDFcbiAgICAgIH0sXG4gICAgfSxcbiAgICBzZXJ2ZXI6IHtcbiAgICAgIHByb3h5OiB7XG4gICAgICAgICcvYmFzaWMtYXBpJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzAwMCcsXG4gICAgICAgICAgY2hhbmdlT3JpZ2luOiB0cnVlLFxuICAgICAgICAgIHdzOiB0cnVlLFxuICAgICAgICAgIHJld3JpdGU6IChwYXRoKSA9PiBwYXRoLnJlcGxhY2UobmV3IFJlZ0V4cChgXi9iYXNpYy1hcGlgKSwgJycpLFxuICAgICAgICAgIC8vIG9ubHkgaHR0cHNcbiAgICAgICAgICAvLyBzZWN1cmU6IGZhbHNlXG4gICAgICAgIH0sXG4gICAgICAgICcvdXBsb2FkJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzMwMC91cGxvYWQnLFxuICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICB3czogdHJ1ZSxcbiAgICAgICAgICByZXdyaXRlOiAocGF0aCkgPT4gcGF0aC5yZXBsYWNlKG5ldyBSZWdFeHAoYF4vdXBsb2FkYCksICcnKSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICB3YXJtdXA6IHtcbiAgICAgICAgY2xpZW50RmlsZXM6IFsnLi9pbmRleC5odG1sJywgJy4vc3JjL3t2aWV3cyxjb21wb25lbnRzfS8qJ10sXG4gICAgICB9LFxuICAgIH0sXG4gICAgZGVmaW5lOiB7XG4gICAgICAncHJvY2Vzcy5lbnYnOiB7XG4gICAgICAgIEJBU0VfVVJMOiAnLycsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY3NzOiB7XG4gICAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XG4gICAgICAgIGxlc3M6IHtcbiAgICAgICAgICBqYXZhc2NyaXB0RW5hYmxlZDogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXSxcbiAgfSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF1VCxTQUFTLCtCQUErQjtBQUUvVixJQUFPLHNCQUFRLHdCQUF3QjtBQUFBLEVBQ3JDLFdBQVc7QUFBQSxJQUNULGNBQWM7QUFBQSxNQUNaLFNBQVM7QUFBQSxRQUNQO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsT0FBTztBQUFBO0FBQUE7QUFBQSxNQUdMLFFBQVE7QUFBQSxNQUNSLGlCQUFpQjtBQUFBLFFBQ2YsU0FBUztBQUFBO0FBQUEsTUFDWDtBQUFBLElBQ0Y7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLE9BQU87QUFBQSxRQUNMLGNBQWM7QUFBQSxVQUNaLFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sYUFBYSxHQUFHLEVBQUU7QUFBQTtBQUFBO0FBQUEsUUFHL0Q7QUFBQSxRQUNBLFdBQVc7QUFBQSxVQUNULFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sVUFBVSxHQUFHLEVBQUU7QUFBQSxRQUM1RDtBQUFBLE1BQ0Y7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLGFBQWEsQ0FBQyxnQkFBZ0IsNEJBQTRCO0FBQUEsTUFDNUQ7QUFBQSxJQUNGO0FBQUEsSUFDQSxRQUFRO0FBQUEsTUFDTixlQUFlO0FBQUEsUUFDYixVQUFVO0FBQUEsTUFDWjtBQUFBLElBQ0Y7QUFBQSxJQUNBLEtBQUs7QUFBQSxNQUNILHFCQUFxQjtBQUFBLFFBQ25CLE1BQU07QUFBQSxVQUNKLG1CQUFtQjtBQUFBLFFBQ3JCO0FBQUEsTUFDRjtBQUFBLElBQ0Y7QUFBQSxJQUNBLFNBQVMsQ0FBQztBQUFBLEVBQ1o7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=