From 5e752e5ab9a4b18f594dd53cf68f7a99a1235123 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Fri, 25 Oct 2024 11:03:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=20=E7=A6=BB=E7=BA=BF?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=92=8C=E5=9C=A8=E7=BA=BF=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=20=E9=A1=B5=E9=9D=A2=E7=9A=84=E4=BB=A3=E7=A0=81=E3=80=81?=
 =?UTF-8?q?=E4=BF=9D=E6=8C=81=E9=A3=8E=E6=A0=BC=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/url.ts                    |   1 +
 src/utils/throttle.ts         |  19 +
 src/views/index.vue           |  25 +-
 src/views/login.vue           |  10 +-
 src/views/page/index.vue      | 681 +++++++++++++++++++++-------------
 src/views/page/indexMim.vue   |   9 +-
 src/views/page/offLineMap.vue | 130 +++----
 7 files changed, 502 insertions(+), 373 deletions(-)
 create mode 100644 src/url.ts
 create mode 100644 src/utils/throttle.ts

diff --git a/src/url.ts b/src/url.ts
new file mode 100644
index 00000000..03ed96bb
--- /dev/null
+++ b/src/url.ts
@@ -0,0 +1 @@
+export const reqUrl = ' https://www.hndyjqrh.cn'
\ No newline at end of file
diff --git a/src/utils/throttle.ts b/src/utils/throttle.ts
new file mode 100644
index 00000000..07b8d039
--- /dev/null
+++ b/src/utils/throttle.ts
@@ -0,0 +1,19 @@
+export const throttle = (func: (...args: any[]) => void, limit: number) => {
+  let lastFunc: ReturnType<typeof setTimeout>;
+  let lastRan: number | undefined;
+
+  return function (this: any, ...args: any[]) { // 为 this 添加类型注解
+    if (!lastRan) {
+      func.apply(this, args);
+      lastRan = Date.now();
+    } else {
+      clearTimeout(lastFunc);
+      lastFunc = setTimeout(() => {
+        if (Date.now() - (lastRan as number) >= limit) {
+          func.apply(this, args);
+          lastRan = Date.now();
+        }
+      }, limit - (Date.now() - (lastRan as number)));
+    }
+  };
+};
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 80c9956b..3419d989 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -11,7 +11,8 @@
           </li>
           <li>
             <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-            <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/offlinemap">安保力量</router-link>
+            <!-- <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/offlinemap">安保力量</router-link> -->
+            <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/index">安保力量</router-link>
           </li>
           <li>
             <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
@@ -58,12 +59,12 @@
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from '@/stores/modules/userStore'
-import { useWebSocket } from '@vueuse/core'
-import { wsUrl } from '@/utils/webSocket'
-import { ref, reactive, watch, onMounted } from 'vue'
+import {useUserStore} from '@/stores/modules/userStore'
+import {useWebSocket} from '@vueuse/core'
+import {wsUrl} from '@/utils/webSocket'
+import {ref, reactive, watch, onMounted} from 'vue'
 import api from '@/axios'
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
 const router = useRouter()
 const isshow = ref(true)
 const loginname = localStorage.getItem('loginname')
@@ -87,14 +88,14 @@ watch(
       isshow.value = false
     }
   },
-  { immediate: true }
+  {immediate: true}
 )
 let istab = ref('6')
 const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
   var getIot = {
     msgcode: 102,
     msgname: 'station-sensor-list',
-    message: stationTempArr,
+    message: stationTempArr
   }
   var msg = JSON.stringify(getIot)
   rollCall_websocket.send(msg)
@@ -102,20 +103,20 @@ const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
 const stationHashList = ref([])
 const stationWebsocket = () => {
   //心跳检测 建立链接 断开重连
-  const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), {
+  const {data, ws} = useWebSocket(wsUrl('/ClientWebSocket'), {
     heartbeat: {
       message: 'ping',
       interval: 1000 * 10,
-      pongTimeout: 1000 * 10,
+      pongTimeout: 1000 * 10
     },
-    autoReconnect: true,
+    autoReconnect: true
   })
   ws.value.onopen = () => {
     console.log('链接打开')
     var messageObj = {
       msgcode: 100,
       msgname: 'session',
-      message: useUserStore().getToken,
+      message: useUserStore().getToken
     }
     var msg = JSON.stringify(messageObj)
     ws.value.send(msg)
diff --git a/src/views/login.vue b/src/views/login.vue
index 1a7d5849..6bacba34 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -24,6 +24,7 @@
 </template>
 <!--  -->
 <script setup lang="ts">
+import {reqUrl} from '@/url'
 import {JsonResult} from '@/axios'
 import api from '@/axios'
 import {ElMessage} from 'element-plus'
@@ -105,10 +106,13 @@ const login = async () => {
         localStorage.setItem('totaldata', JSON.stringify(res.data))
       }
     })
-  // 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=430000.geojson'
-  const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + resp.data.geoCode + '.geojson'
+
+  const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${resp.data.geoCode}.geojson`
+
   fetch(url)
     .then((response) => {
+      console.log(response)
+
       var status = response['status']
       if (status == 500) {
         return new Promise((resovle) => {
@@ -120,6 +124,8 @@ const login = async () => {
       }
     })
     .then((data: any) => {
+      console.log(data)
+
       localStorage.setItem('mapdata', data)
       router.push('/index/indexmin').then(() => {
         notification.success({
diff --git a/src/views/page/index.vue b/src/views/page/index.vue
index 43aed5f2..96bb2956 100644
--- a/src/views/page/index.vue
+++ b/src/views/page/index.vue
@@ -1,15 +1,8 @@
 <template>
-  <div class="indexx" :id="state.id">
-    <Transition name="slide-fade">
-      <div class="left-cont" :style="{width: show3 ? '412px' : '0px', border: show3 ? '10px solid #f2f3f5' : '0px'}">
-        <el-button @click="show3 = !show3" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
-          <el-icon v-if="show3">
-            <d-arrow-left />
-          </el-icon>
-          <el-icon v-else>
-            <d-arrow-right />
-          </el-icon>
-        </el-button>
+  <a-layout class="layout">
+    <!-- 左侧区域 -->
+    <a-layout-sider :collapsed="collapsed.left" width="22%">
+      <div class="left-cont">
         <h2 class="title" v-show="show3">资源数量</h2>
         <div class="elBtns" v-show="show3">
           <div @click="qhzty('6')" :class="{active: isActive == '6'}">全部</div>
@@ -68,18 +61,37 @@
           </a-tree>
         </div>
       </div>
-    </Transition>
-
-    <Transition name="slide-fade1">
-      <div class="right-cont" :style="{width: show4 ? '412px' : '0px', border: show4 ? '10px solid #f2f3f5' : '0px'}">
-        <el-button @click="show4 = !show4" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar1" type="info" circle>
-          <el-icon v-if="show4">
-            <d-arrow-right />
-          </el-icon>
-          <el-icon v-else>
-            <d-arrow-left />
-          </el-icon>
-        </el-button>
+    </a-layout-sider>
+    <!-- 中间地图区域 -->
+    <a-layout-content>
+      <div :id="state.id" class="indexx">
+        <!-- 左边缩进按钮 -->
+        <div class="left-close-icon">
+          <el-button @click="collapsed.left = !collapsed.left" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
+            <el-icon v-if="!collapsed.left">
+              <d-arrow-left />
+            </el-icon>
+            <el-icon v-else>
+              <d-arrow-right />
+            </el-icon>
+          </el-button>
+        </div>
+        <!-- 右边缩进按钮 -->
+        <div class="right-close-icon">
+          <el-button @click="collapsed.right = !collapsed.right" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar" type="info" circle>
+            <el-icon v-if="!collapsed.right">
+              <d-arrow-right />
+            </el-icon>
+            <el-icon v-else>
+              <d-arrow-left />
+            </el-icon>
+          </el-button>
+        </div>
+      </div>
+    </a-layout-content>
+    <!-- 右侧区域 -->
+    <a-layout-sider :collapsed="collapsed.right" width="22%">
+      <div class="right-cont">
         <h2 class="title">系统数据</h2>
         <div class="panelBox">
           <div>
@@ -120,12 +132,12 @@
               <span>警情【{{ jinqing.length }}】</span>
             </div>
             <div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}">
-              <span>AI预警【{{ AIyujing.length }}】</span>
+              <span>AI预警【{{ aiCount }}】</span>
             </div>
           </div>
           <ul class="dataList" v-show="isActive1 == '1'">
             <div v-if="jinbao.length > 0">
-              <li v-for="(item, index) in jinbao" :key="index" @click="toinfo(item, index)">
+              <li style="cursor: pointer" v-for="(item, index) in jinbao" :key="index" @click="toinfo(item, index)">
                 <p>
                   <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
                 </p>
@@ -144,7 +156,7 @@
           </ul>
           <ul class="dataList" v-show="isActive1 == '2'">
             <div v-if="jinqing.length > 0">
-              <li v-for="(item, index) in jinqing" :key="index" @click="toinfo(item, index)">
+              <li style="cursor: pointer" v-for="(item, index) in jinqing" :key="index" @click="toinfo(item, index)">
                 <p>
                   <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
                 </p>
@@ -161,9 +173,9 @@
 
             <el-empty v-else description="暂无数据"></el-empty>
           </ul>
-          <ul class="dataList" v-show="isActive1 == '3'">
+          <ul class="dataList" v-show="isActive1 == '3'" @scroll="handleScroll">
             <div v-if="AIyujing.length > 0">
-              <li v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
+              <li style="cursor: pointer" v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
                 <p>
                   <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
                 </p>
@@ -179,12 +191,14 @@
             </div>
 
             <el-empty v-else description="暂无数据"></el-empty>
+            <a-spin v-show="showLoading" :indicator="indicator" />
           </ul>
         </div>
       </div>
-    </Transition>
-
+    </a-layout-sider>
+    <!-- 固定弹窗 -->
     <div v-show="dialogTableVisible" class="dialogTableVisibleClass">
+      <!-- 浮窗模块 -->
       <el-popover :visible="visible" :show-arrow="false" placement="left" :width="400" :popper-style="{background: '#06325F', border: '1px solid #60626654'}">
         <template #reference>
           <el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC">
@@ -229,110 +243,111 @@
           </ul>
         </div>
       </el-popover>
-      <el-icon @click="closee" style="position: absolute; left: 327px; top: 4px" size="23">
+      <!-- 关闭固定弹窗按钮 -->
+      <el-icon color="#fff" @click="closee" style="position: absolute; left: 327px; top: 4px" size="23">
         <close-bold />
       </el-icon>
 
       <ul>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 事件类型: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 事件类型: </span>
+          <span id="" class="p10c">
             {{ infoData.alarmCode }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 上报时间: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 上报时间: </span>
+          <span id="" class="p10c">
             {{ infoData.timestamp }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 上报地点: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 上报地点: </span>
+          <span id="" class="p10c">
             {{ infoData.address }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 上报来源: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 上报来源: </span>
+          <span id="" class="p10c">
             {{ infoData.alarmSource }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 核验状态: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 核验状态: </span>
+          <span id="" class="p10c">
             {{ totypecn(infoData.fakeState) }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 转发模式: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 转发模式: </span>
+          <span id="" class="p10c">
             {{ infoData.reportMode == '1' ? '自动转发' : infoData.reportMode == '2' ? '核验转发' : '' }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 描述信息: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 描述信息: </span>
+          <span id="" class="p10c">
             {{ infoData.description }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 设备类型: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 设备类型: </span>
+          <span id="" class="p10c">
             {{ infoData.deviceType }}
           </span>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 警报类型: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 警报类型: </span>
+          <span id="" class="p10c">
             {{ infoData.alarmCode }}
           </span>
         </li>
         <li style="margin-bottom: 20px; display: flex">
           <div style="flex: 1">
-            <span id="" style="color: #b3c2d0"> 联系人1: </span>
-            <span id="" style="color: #01d8e2; margin-left: 10px">
+            <span id="" class="c_b3c2d0"> 联系人1: </span>
+            <span id="" class="p10c">
               {{ infoData.user1Name }}
             </span>
           </div>
           <div style="flex: 1">
             <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
-            <span id="" style="color: #01d8e2; margin-left: 10px">
+            <span id="" class="p10c">
               {{ infoData.user1Phone }}
             </span>
           </div>
         </li>
         <li style="margin-bottom: 20px; display: flex">
           <div style="flex: 1">
-            <span id="" style="color: #b3c2d0"> 联系人2: </span>
-            <span id="" style="color: #01d8e2; margin-left: 10px">
+            <span id="" class="c_b3c2d0"> 联系人2: </span>
+            <span id="" class="p10c">
               {{ infoData.user2Name }}
             </span>
           </div>
           <div style="flex: 1">
             <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
-            <span id="" style="color: #01d8e2; margin-left: 10px">
+            <span id="" class="p10c">
               {{ infoData.user2Phone }}
             </span>
           </div>
         </li>
         <li style="margin-bottom: 20px; display: flex">
           <div style="flex: 1">
-            <span id="" style="color: #b3c2d0"> 联系人3: </span>
-            <span id="" style="color: #01d8e2; margin-left: 10px">
+            <span id="" class="c_b3c2d0"> 联系人3: </span>
+            <span id="" class="p10c">
               {{ infoData.user3Name }}
             </span>
           </div>
           <div style="flex: 1">
             <span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
-            <span id="" style="color: #01d8e2; margin-left: 10px">
+            <span id="" class="p10c">
               {{ infoData.user3Phone }}
             </span>
           </div>
         </li>
         <li style="margin-bottom: 20px">
-          <span id="" style="color: #b3c2d0"> 处置状态: </span>
-          <span id="" style="color: #01d8e2; margin-left: 10px">
+          <span id="" class="c_b3c2d0"> 处置状态: </span>
+          <span id="" class="p10c">
             {{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }}
           </span>
         </li>
@@ -367,16 +382,17 @@
     <div v-if="showIframe" class="iframe-container">
       <iframe :src="videoUrl" frameborder="0"></iframe>
     </div>
-  </div>
+  </a-layout>
 </template>
 <script lang="ts" setup>
 import {JsonResult} from '@/axios'
-import {cloneDeep} from 'lodash'
+// import {cloneDeep} from 'lodash'
 import type {TreeProps} from 'ant-design-vue'
-import {Search} from '@element-plus/icons-vue'
-import {createMqttData} from '@/utils/createMqttData'
-import {sendMqtt} from '@/utils/sendMqtt'
-import {wsUrl} from '@/utils/webSocket'
+// import {Search} from '@element-plus/icons-vue'
+// import {createMqttData} from '@/utils/createMqttData'
+// import {sendMqtt} from '@/utils/sendMqtt'
+// import {wsUrl} from '@/utils/webSocket'
+// import type {CascaderProps} from 'ant-design-vue'
 import * as _ from 'lodash'
 import api from '@/axios'
 import {useUserStore} from '@/stores/modules/userStore'
@@ -388,53 +404,47 @@ import image2 from './imag/anbao.png'
 import image3 from './imag/she.png'
 import image4 from './imag/dsds.png'
 import closeimag from './imag/infoClose.png'
-import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue'
-import type {CascaderProps} from 'ant-design-vue'
+import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick, h} from 'vue'
+
 import type {ShowSearchType} from 'ant-design-vue/es/cascader'
 const value = ref<string[]>([])
 const options = ref<any[]>([])
+
+import {LoadingOutlined} from '@ant-design/icons-vue'
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '24px'
+  },
+  spin: true
+})
+const collapsed = ref({
+  left: false,
+  right: false
+})
 const filter: ShowSearchType['filter'] = (inputValue, path) => {
   return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
 }
 const cascaderChange = (value: any, selectedOptions: any): void => {
   let title = selectedOptions.slice(-1)[0]?.title
   expandedKeys.value = value
-  // scrollToMatchedNode(title) //此功能还有bug：滑动会带着父元素一起滑动
+  scrollToMatchedNode(title)
 }
 interface anyType {
   [key: string]: any
 }
 const showIframe = ref(false)
 const videoUrl = ref('')
-
 const {proxy} = getCurrentInstance() as any
 const day = proxy.day
-const size = ref('')
-const lodash = proxy.lodash
-
-const zoom = ref('12')
-const center = ref([121.59996, 31.197646])
-let map: any
 const expandedKeys = ref([])
 const selectedKeys = ref([])
 const checkedKeys = ref([])
-
 const dialogTableVisible = ref(false)
-
 const visible = ref(false)
-const visibleb = ref(false)
 import {useRouter} from 'vue-router'
-
-const activeName = ref('first')
 const router = useRouter()
-const env = ref(import.meta.env.VITE_APP_BASE_API)
-const handleClick = () => {}
 const show3 = ref(true)
-const show4 = ref(true)
-const gbht = () => {
-  visible.value = false
-}
-
 const isActive1 = ref('1')
 const qhzty2 = (data: any) => {
   isActive1.value = data
@@ -565,9 +575,7 @@ const qhzty = (data: any) => {
       break
   }
 }
-const fieldNames: TreeProps['fieldNames'] = {
-  key: 'code'
-}
+
 const loading = ref(false)
 //四级组织树获取
 const scrollContainer = ref()
@@ -585,8 +593,7 @@ const scrollToMatchedNode = (searchValue: string) => {
           matchedNode.push(element)
         }
       })
-      // const parent = matchedNode[0].parentElement
-      // parent.style.overflow = 'hidden'
+
       if (matchedNode.length === 1) {
         matchedNode[0].scrollIntoView({behavior: 'smooth', block: 'center'})
       }
@@ -607,67 +614,67 @@ const checkKeyExists = (nodes: any, key: string): boolean => {
   })
 }
 // 展开指定 树节点
-const scrollToKey = (key: string) => {
-  console.log('scrollToKey', key)
-  const exists = checkKeyExists(treedataall.value, key)
-  if (!exists) {
-    console.error(`Key ${key} not found in the tree.`)
-    return
-  }
-  // 调用 scrollTo 方法
-  nextTick(() => {
-    treeRef.value.scrollTo({
-      key,
-      align: 'top', // 可选 top, bottom, auto
-      offset: 0 // 可选偏移量
-    })
-  })
-}
+// const scrollToKey = (key: string) => {
+//   console.log('scrollToKey', key)
+//   const exists = checkKeyExists(treedataall.value, key)
+//   if (!exists) {
+//     console.error(`Key ${key} not found in the tree.`)
+//     return
+//   }
+//   // 调用 scrollTo 方法
+//   nextTick(() => {
+//     treeRef.value.scrollTo({
+//       key,
+//       align: 'top', // 可选 top, bottom, auto
+//       offset: 0 // 可选偏移量
+//     })
+//   })
+// }
 // 搜索 树结构
-const onSearch = () => {
-  let keysToExpand: any[]
-  keysToExpand = []
-  let keysToSelect: any[]
-  keysToSelect = []
+// const onSearch = () => {
+//   let keysToExpand: any[]
+//   keysToExpand = []
+//   let keysToSelect: any[]
+//   keysToSelect = []
 
-  const findKeys = (nodes: any, parentKeyPath: any[]) => {
-    nodes.forEach((node: any) => {
-      const nodeId = node.code
-      const currentPath = [...parentKeyPath, nodeId]
+//   const findKeys = (nodes: any, parentKeyPath: any[]) => {
+//     nodes.forEach((node: any) => {
+//       const nodeId = node.code
+//       const currentPath = [...parentKeyPath, nodeId]
 
-      if (node.title.includes(searchValue.value)) {
-        console.log('node______', node)
+//       if (node.title.includes(searchValue.value)) {
+//         console.log('node______', node)
 
-        keysToSelect.push(nodeId)
-        currentPath.forEach((key) => keysToExpand.push(key))
-      }
+//         keysToSelect.push(nodeId)
+//         currentPath.forEach((key) => keysToExpand.push(key))
+//       }
 
-      if (node.children && node.children.length > 0) {
-        findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
-      }
-    })
-  }
+//       if (node.children && node.children.length > 0) {
+//         findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
+//       }
+//     })
+//   }
 
-  findKeys(treedataall.value, [])
+//   findKeys(treedataall.value, [])
 
-  console.log('Expanded Keys:', Array.from(keysToExpand))
-  console.log('Selected Keys:', keysToSelect)
-  if (keysToSelect.length === 0) {
-    ElMessage.warning(`未搜索到${searchValue.value}`)
-  }
+//   console.log('Expanded Keys:', Array.from(keysToExpand))
+//   console.log('Selected Keys:', keysToSelect)
+//   if (keysToSelect.length === 0) {
+//     ElMessage.warning(`未搜索到${searchValue.value}`)
+//   }
 
-  expandedKeys.value = [...new Set(keysToExpand)]
-  selectedKeys.value = keysToSelect
-  if (selectedKeys.value.length > 0) {
-    console.log('selectedKeys.value', selectedKeys.value)
+//   expandedKeys.value = [...new Set(keysToExpand)]
+//   selectedKeys.value = keysToSelect
+//   if (selectedKeys.value.length > 0) {
+//     console.log('selectedKeys.value', selectedKeys.value)
 
-    scrollToMatchedNode(searchValue.value)
-    // scrollToKey(selectedKeys.value[0])
-  }
-}
-const refreshTreeData = () => {
-  treedataall.value = [...treedataall.value]
-}
+//     scrollToMatchedNode(searchValue.value)
+//     // scrollToKey(selectedKeys.value[0])
+//   }
+// }
+// const refreshTreeData = () => {
+//   treedataall.value = [...treedataall.value]
+// }
 const gettree4 = (data: any) => {
   loading.value = true
   api
@@ -701,22 +708,7 @@ const gettree4 = (data: any) => {
       }
     })
 }
-const onLoadData: TreeProps['loadData'] = (treeNode) => {
-  return new Promise<void>((resolve) => {
-    if (treeNode.dataRef.children) {
-      resolve()
-      return
-    }
-    setTimeout(() => {
-      treeNode.dataRef.children = [
-        {title: 'Child Node', key: `${treeNode.eventKey}-0`},
-        {title: 'Child Node', key: `${treeNode.eventKey}-1`}
-      ]
-      treedataall.value = [...treedataall.value]
-      resolve()
-    }, 1000)
-  })
-}
+
 //关闭
 const close = (info: any) => {
   api
@@ -731,37 +723,12 @@ const close = (info: any) => {
         })
         getdayline()
         dialogTableVisible.value = false
-        //删除此条数据
-        // listData
-        // getRealTimeAlarmSituation()
       } else {
         ElMessage.error('关闭失败')
       }
     })
 }
 
-const gridData = [
-  {
-    date: '2016-05-02',
-    name: 'Jack',
-    address: 'New York City'
-  },
-  {
-    date: '2016-05-04',
-    name: 'Jack',
-    address: 'New York City'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Jack',
-    address: 'New York City'
-  },
-  {
-    date: '2016-05-03',
-    name: 'Jack',
-    address: 'New York City'
-  }
-]
 const totypecn = (data: any) => {
   if (data == '0') {
     return '未核验'
@@ -792,10 +759,7 @@ const toCn = (data: any) => {
     return '修改状态'
   }
 }
-const num = ref(100)
-const handleChange = (value: number) => {
-  // console.log(value)
-}
+
 const cz = (infoData: any, upstatuslist: any) => {
   let routeData = router.resolve({path: '/index/communitymanage', query: {multiAlarmId: infoData.multiAlarmId, data: JSON.stringify(infoData), upstatuslist: JSON.stringify(upstatuslist)}})
   window.open(routeData.href, '_blank')
@@ -804,15 +768,7 @@ const cz = (infoData: any, upstatuslist: any) => {
   let routeData = router.resolve({path: '/index/communitymanage', query: {multiAlarmId: infoData.multiAlarmId, data: JSON.stringify(infoData), upstatuslist: JSON.stringify(upstatuslist)}})
   window.open(routeData.href, '_blank')
 }
-const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
-  var getIot = {
-    msgcode: 102,
-    msgname: 'station-sensor-list',
-    message: stationTempArr
-  }
-  var msg = JSON.stringify(getIot)
-  rollCall_websocket.send(msg)
-}
+
 const ingrssddata = ref()
 const clickKz = (dat2a: any) => {
   api
@@ -830,7 +786,7 @@ const clickKz = (dat2a: any) => {
 }
 
 onMounted(() => {
-  // await nextTick()
+  getAiCount()
   gettotal()
   initMap()
   gettree4('')
@@ -999,23 +955,54 @@ const getjingqing = () => {
       }
     })
 }
+
+const showLoading = ref<boolean>(false)
 //获取当日ai预警
 const AIyujing = ref<any[]>([])
-const getAi = () => {
-  let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
-  api
-    .post('/multialarm/ai/alarm/getlist/today', {
-      name: localStorage.getItem('loginname'),
-      city: city == '湖南省' ? null : city
-    })
-    .then((res) => {
-      if (res.code == 0) {
-        // console.log('查询当日预警', res)
-        AIyujing.value = res.data as any[]
-      } else {
-      }
-    })
+const aiCount = ref<number>(0)
+const getAiCount = () => {
+  api.post('/multialarm/ai/alarm/count/today').then((res: JsonResult<any>) => {
+    if (res.code == 0) {
+      aiCount.value = res.data.count
+    }
+  })
 }
+let pageIndex = ref<number>(0)
+const getAi = async () => {
+  let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
+  const res: JsonResult<any> = await api.post('/multialarm/ai/alarm/getlist/today', {
+    name: localStorage.getItem('loginname'),
+    city: city == '湖南省' ? null : city,
+    pagesize: 10,
+    pageindex: pageIndex.value
+  })
+  if (res.code == 0) {
+    AIyujing.value = [...AIyujing.value, ...res.data]
+    showLoading.value = false
+  }
+}
+
+import {throttle} from '@/utils/throttle'
+
+let lastScrollTop = 0
+
+const handleScroll = throttle(async (event: any) => {
+  const {scrollTop, scrollHeight, clientHeight} = event.target
+  if (scrollTop > lastScrollTop) {
+    if (scrollTop + clientHeight >= scrollHeight - 10) {
+      if (aiCount.value > AIyujing.value.length) {
+        showLoading.value = true
+        pageIndex.value++
+        await getAi()
+        // console.log(aiCount.value, AIyujing.value.length)
+      }
+      if (aiCount.value === AIyujing.value.length) return
+    }
+  }
+
+  lastScrollTop = scrollTop // 更新最后的滚动位置
+}, 200)
+
 //获取一个city极其下属区县的报警数量统计
 const total = ref<anyType>({})
 const gettotal = () => {
@@ -1191,8 +1178,6 @@ const getSubstanceInfoWindowContent2 = (obj: any, type: any) => {
 			`
   }
 }
-const dialogVisible = ref(false)
-const pointCode = ref()
 
 ;(window as any).addrt = (a: any) => {
   console.log('播放_______________', a)
@@ -1453,8 +1438,41 @@ const initMap = () => {
 </script>
 
 <style scoped lang="scss">
+:where(.css-dev-only-do-not-override-19iuou).ant-layout {
+  color: white;
+}
+.indexx {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .left-close-icon {
+    z-index: 9999;
+    position: absolute;
+    margin-top: 10px;
+    left: 10px;
+  }
+
+  .right-close-icon {
+    z-index: 9999;
+    position: absolute;
+    margin-top: 10px;
+    right: 0;
+  }
+}
+
+.layout {
+  height: 100%;
+}
+.c_b3c2d0 {
+  color: #b3c2d0;
+}
+.p10c {
+  color: #01d8e2;
+  margin-left: 10px;
+}
 .scrollContainer {
-  margin: 10px 20px;
+  margin-top: 10px;
   height: 70%;
   overflow: auto;
   // position: absolute;
@@ -1649,7 +1667,7 @@ const initMap = () => {
   box-sizing: border-box;
   width: 420px;
   height: 91%;
-  overflow: auto;
+  overflow-y: scroll;
   margin: 0 auto;
   padding: 0 15px;
 }
@@ -1734,58 +1752,43 @@ const initMap = () => {
   font-weight: 600;
 }
 
-.indexx {
+// overflow: hidden;
+// position: absolute !important;
+
+.left-cont {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  z-index: 999;
+  overflow: hidden;
+
+  .titleLeftBg {
+    width: 100%;
+    line-height: 32px;
+    color: #fff;
+    text-indent: 30px;
+    font-size: 16px;
+    font-family: ysbth;
+    font-weight: 600;
+  }
+}
+
+.right-cont {
   width: 100%;
   height: 100%;
-  overflow: hidden;
-  // position: absolute !important;
+  background-color: #fff;
+  z-index: 999;
+  // border: 10px solid #f2f3f5;
 
-  .left-cont {
-    box-sizing: border-box;
-    // width: 412px;
-    height: 100%;
-    // background-color: rgb(9 45 84 / 80%);
-    background-color: #fff;
-    z-index: 999;
-    // border: 10px solid #f2f3f5;
-    // border-top: 12px solid #f2f3f5;
-    // border-right: 12px solid #f2f3f5;
-    position: absolute;
-    // top: 0;
-    // left: 0;
-    overflow: hidden;
-
-    .titleLeftBg {
-      width: 100%;
-      line-height: 32px;
-      color: #fff;
-      text-indent: 30px;
-      font-size: 16px;
-      font-family: ysbth;
-      font-weight: 600;
-    }
-  }
-
-  .right-cont {
-    width: 412px;
-    height: 100%;
-    background-color: #fff;
-    z-index: 999;
-    position: absolute;
-    right: 0;
-    border: 10px solid #f2f3f5;
-    // border-top: 12px solid #f2f3f5;
-    // border-left: 12px solid #f2f3f5;
-
-    .titleLeftBg {
-      width: 100%;
-      line-height: 32px;
-      color: #616161;
-      text-indent: 30px;
-      font-size: 16px;
-      font-family: ysbth;
-      font-weight: 600;
-    }
+  .titleLeftBg {
+    width: 100%;
+    line-height: 32px;
+    color: #616161;
+    text-indent: 30px;
+    font-size: 16px;
+    font-family: ysbth;
+    font-weight: 600;
   }
 
   .gttex {
@@ -1990,6 +1993,7 @@ const initMap = () => {
 
 .mapPopInfo {
   width: 450px;
+  // color: white !important;
 }
 
 .mapPopInfo-top {
@@ -2057,10 +2061,151 @@ iframe {
   top: 115px;
   right: 448px;
   background: rgb(21, 42, 95);
-  z-index: 99;
+  z-index: 999;
   width: 349px;
   padding: 10px;
   border-radius: 5px;
   // padding-top: 20px;
 }
+
+// 弹窗样式修改
+:deep(.leaflet-popup-content-wrapper) {
+  // background: #07315e !important;
+  background: none;
+  box-shadow: none;
+  width: 500px;
+  color: #fff !important;
+  font-size: 14px;
+  padding: none;
+}
+
+:deep(.leaflet-popup-content) {
+  width: calc(100% - 40px) !important;
+}
+
+:deep(.leaflet-popup-content > div) {
+  width: 100%;
+}
+
+:deep(.leaflet-popup-content .sb_bInfo) {
+  width: 100%;
+}
+
+:deep(.leaflet-popup-content p) {
+  margin: 10px 0 !important;
+}
+
+:deep(.sb_grade > div > div) {
+  float: left;
+  width: 16%;
+  margin-top: 3px;
+}
+
+:deep(.sb_grade > div > div > p) {
+  line-height: 20px;
+}
+
+:deep(.schoolWindowInfo .sb_grade) {
+  margin-top: 10px;
+}
+
+:deep(.leaflet-popup-content-wrapper),
+:deep(.leaflet-popup-tip) {
+  background: none !important;
+}
+
+:deep(.leaflet-popup-close-button) {
+  color: #fff !important;
+  width: 30px !important;
+  height: 30px !important;
+  font-size: 30px !important;
+}
+
+:deep(.warnEventInfoWindow) {
+  overflow: hidden;
+}
+
+:deep(.warnEventInfoWindow > p) {
+  float: left;
+  width: 120px;
+}
+
+:deep(.warnEventInfoWindow > div) {
+  float: left;
+  width: calc(100% - 130px);
+  margin-left: 10px;
+}
+
+:deep(.warnEventInfoWindow > p > img) {
+  width: 100%;
+}
+// 弹窗样式修改
+
+// :deep(.leaflet-popup-content-wrapper) {
+//   background: #07315e !important;
+//   width: 500px;
+//   color: #fff !important;
+//   font-size: 14px;
+// }
+
+// :deep(.leaflet-popup-content) {
+//   width: calc(100% - 40px) !important;
+// }
+
+// :deep(.leaflet-popup-content > div) {
+//   width: 100%;
+// }
+
+// :deep(.leaflet-popup-content .sb_bInfo) {
+//   width: 100%;
+// }
+
+// :deep(.leaflet-popup-content p) {
+//   margin: 10px 0 !important;
+// }
+
+// :deep(.sb_grade > div > div) {
+//   float: left;
+//   width: 16%;
+//   margin-top: 3px;
+// }
+
+// :deep(.sb_grade > div > div > p) {
+//   line-height: 20px;
+// }
+
+// :deep(.schoolWindowInfo .sb_grade) {
+//   margin-top: 10px;
+// }
+
+// :deep(.leaflet-popup-content-wrapper),
+// :deep(.leaflet-popup-tip) {
+//   background: #07315e !important;
+// }
+
+// :deep(.leaflet-popup-close-button) {
+//   color: #fff !important;
+//   width: 30px !important;
+//   height: 30px !important;
+//   font-size: 30px !important;
+// }
+
+// :deep(.warnEventInfoWindow) {
+//   overflow: hidden;
+// }
+
+// :deep(.warnEventInfoWindow > p) {
+//   float: left;
+//   width: 120px;
+// }
+
+// :deep(.warnEventInfoWindow > div) {
+//   float: left;
+//   width: calc(100% - 130px);
+//   margin-left: 10px;
+// }
+
+// :deep(.warnEventInfoWindow > p > img) {
+//   width: 100%;
+// }
 </style>
diff --git a/src/views/page/indexMim.vue b/src/views/page/indexMim.vue
index 84d27c90..9b538002 100644
--- a/src/views/page/indexMim.vue
+++ b/src/views/page/indexMim.vue
@@ -177,6 +177,7 @@
 </template>
 
 <script lang="ts" setup>
+import {reqUrl} from '@/url'
 import effectScatterData from '@/utils/effectScatterData'
 import linesData from '@/utils/linesData'
 import 'echarts-gl'
@@ -267,8 +268,8 @@ const hy = () => {
       maskColor: 'rgba(255, 255, 255, 0.2)',
       zlevel: 0
     })
-    // const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
-    const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
+    const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${fhcode}.geojson`
+
     fetch(url)
       .then((response) => {
         var status = response['status']
@@ -887,9 +888,7 @@ const initMapdt = (data: any, podat: any, name: any) => {
             getaiyuji(x.name, '', '')
             getdayline(x.name, '', '')
             getAi(x.name, '', '')
-            //item.code
-            // const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
-            const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
+            const url = `${reqUrl}/api/multialarm/pic/download?creator=geo&file=${item.code}.geojson`
             fetch(url)
               .then((response) => {
                 var status = response['status']
diff --git a/src/views/page/offLineMap.vue b/src/views/page/offLineMap.vue
index e8724da7..f04a46d1 100644
--- a/src/views/page/offLineMap.vue
+++ b/src/views/page/offLineMap.vue
@@ -132,7 +132,7 @@
               <span>警情【{{ jinqing.length }}】</span>
             </div>
             <div @click="qhzty2('3')" :class="{active1: isActive1 == '3'}">
-              <span>AI预警【{{ AIyujing.length }}】</span>
+              <span>AI预警【{{ aiCount }}】</span>
             </div>
           </div>
           <ul class="dataList" v-show="isActive1 == '1'">
@@ -173,7 +173,7 @@
 
             <el-empty v-else description="暂无数据"></el-empty>
           </ul>
-          <ul class="dataList" v-show="isActive1 == '3'">
+          <ul @scroll="handleScroll" class="dataList" v-show="isActive1 == '3'">
             <div v-if="AIyujing.length > 0">
               <li style="cursor: pointer" v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
                 <p>
@@ -714,6 +714,7 @@ onMounted(() => {
   gettree4('')
   getAi()
   getjingqing()
+  getAiCount()
 })
 let deviceInfoWindow = ref<any>(null)
 const treedata = () => {
@@ -913,22 +914,48 @@ const getjingqing = () => {
     })
 }
 //获取当日ai预警
-const AIyujing = ref<any[]>([])
-const getAi = () => {
-  let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
-  api
-    .post('/multialarm/ai/alarm/getlist/today', {
-      name: localStorage.getItem('loginname'),
-      city: city == '湖南省' ? null : city
-    })
-    .then((res) => {
-      if (res.code == 0) {
-        // console.log('查询当日预警', res)
-        AIyujing.value = res.data as any[]
-      } else {
-      }
-    })
+const aiCount = ref<number>(0)
+const getAiCount = () => {
+  api.post('/multialarm/ai/alarm/count/today').then((res: JsonResult<any>) => {
+    if (res.code == 0) {
+      aiCount.value = res.data.count
+    }
+  })
 }
+let pageIndex = ref<number>(0)
+const AIyujing = ref<any[]>([])
+const getAi = async () => {
+  let city = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']
+  const res: JsonResult<any> = await api.post('/multialarm/ai/alarm/getlist/today', {
+    name: localStorage.getItem('loginname'),
+    city: city == '湖南省' ? null : city,
+    pagesize: 10,
+    pageindex: pageIndex.value
+  })
+  if (res.code == 0) {
+    AIyujing.value = [...AIyujing.value, ...res.data]
+  }
+}
+
+import {throttle} from '@/utils/throttle'
+
+let lastScrollTop = 0
+
+const handleScroll = throttle(async (event: any) => {
+  const {scrollTop, scrollHeight, clientHeight} = event.target
+  if (scrollTop > lastScrollTop) {
+    if (scrollTop + clientHeight >= scrollHeight - 10) {
+      if (aiCount.value > AIyujing.value.length) {
+        pageIndex.value++
+        await getAi()
+      }
+      if (aiCount.value === AIyujing.value.length) return
+    }
+  }
+
+  lastScrollTop = scrollTop // 更新最后的滚动位置
+}, 200)
+
 //获取一个city极其下属区县的报警数量统计
 const total = ref<anyType>({})
 const gettotal = () => {
@@ -2102,73 +2129,4 @@ iframe {
 :deep(.warnEventInfoWindow > p > img) {
   width: 100%;
 }
-// 弹窗样式修改
-
-// :deep(.leaflet-popup-content-wrapper) {
-//   background: #07315e !important;
-//   width: 500px;
-//   color: #fff !important;
-//   font-size: 14px;
-// }
-
-// :deep(.leaflet-popup-content) {
-//   width: calc(100% - 40px) !important;
-// }
-
-// :deep(.leaflet-popup-content > div) {
-//   width: 100%;
-// }
-
-// :deep(.leaflet-popup-content .sb_bInfo) {
-//   width: 100%;
-// }
-
-// :deep(.leaflet-popup-content p) {
-//   margin: 10px 0 !important;
-// }
-
-// :deep(.sb_grade > div > div) {
-//   float: left;
-//   width: 16%;
-//   margin-top: 3px;
-// }
-
-// :deep(.sb_grade > div > div > p) {
-//   line-height: 20px;
-// }
-
-// :deep(.schoolWindowInfo .sb_grade) {
-//   margin-top: 10px;
-// }
-
-// :deep(.leaflet-popup-content-wrapper),
-// :deep(.leaflet-popup-tip) {
-//   background: #07315e !important;
-// }
-
-// :deep(.leaflet-popup-close-button) {
-//   color: #fff !important;
-//   width: 30px !important;
-//   height: 30px !important;
-//   font-size: 30px !important;
-// }
-
-// :deep(.warnEventInfoWindow) {
-//   overflow: hidden;
-// }
-
-// :deep(.warnEventInfoWindow > p) {
-//   float: left;
-//   width: 120px;
-// }
-
-// :deep(.warnEventInfoWindow > div) {
-//   float: left;
-//   width: calc(100% - 130px);
-//   margin-left: 10px;
-// }
-
-// :deep(.warnEventInfoWindow > p > img) {
-//   width: 100%;
-// }
 </style>