离线地图页面改造完成、下一步完成在线地图页面的代码同步

src/App.vue

@@ -11,11 +11,11 @@
 <script setup lang="ts">
 import fullScreenContainer from '@/components/fullScreenContainer.vue'
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import { useLoadingStore } from '@/stores/modules/loadingStore'
+import {useLoadingStore} from '@/stores/modules/loadingStore'
-import { storeToRefs } from 'pinia'
+import {storeToRefs} from 'pinia'
 
 const loadingStore = useLoadingStore()
-const { loading, loadingMessage } = storeToRefs(loadingStore)
+const {loading, loadingMessage} = storeToRefs(loadingStore)
 </script>
 
 <style lang="scss">
@@ -126,6 +126,8 @@ body {
   bottom: 0;
   width: 40px;
   height: 40px;
+  // width: 50px;
+  // height: 50px;
 }
 
 .markerClass > div {

src/views/page/offLineMap.vue

@@ -137,7 +137,7 @@
           </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>
@@ -156,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>
@@ -175,7 +175,7 @@
           </ul>
           <ul class="dataList" v-show="isActive1 == '3'">
             <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>
@@ -195,8 +195,9 @@
         </div>
       </div>
     </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">
@@ -241,7 +242,8 @@
           </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>
 
@@ -409,7 +411,9 @@ 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)
 }
 interface anyType {
   [key: string]: any
@@ -421,6 +425,8 @@ const day = proxy.day
 const expandedKeys = ref([])
 const selectedKeys = ref([])
 const checkedKeys = ref([])
+// const dialogTableVisible = ref(true)
+// const visible = ref(true)
 const dialogTableVisible = ref(false)
 const visible = ref(false)
 const router = useRouter()
@@ -848,11 +854,13 @@ const getdayline = () => {
               // 将 marker 添加到地图
               marker.addTo(state.map)
             } else {
+              // <img style="width:30px;height:60px;left:9px;top:7px" src="${no}">
+              //  <img style="width:35px;height:35px;left:9px;top:7px" src="${no}">
               const marker = L.marker([lat, lng], {
                 icon: L.divIcon({
                   className: 'indexMarkerImg',
                   html: `<div class="indexMarkerImg">
-                      <img style="width:30px;height:60px;left:9px;top:7px" src="${no}">
+                     
                       <div class="markerClass">
                          <div></div>
                          <div></div>
@@ -963,7 +971,121 @@ const selectA = (selectedKeys: any, e: any) => {
     console.log('🚀 ~ selectA ~ error:', error)
   }
 }
+const getSubstanceInfoWindowContent = (obj: any, type: any) => {
+  // console.log('obj', obj, type)
 
+  if (type == '1' || type == '3') {
+    return `
+                  <p>
+                      <span>设备号：</span>
+                      <span>${obj['alarmSource'] == undefined || null ? '--' : obj['alarmSource']}</span>
+                      <span>名称：</span>
+                      <span>${obj['alarmTarget'] == undefined || null ? '--' : obj['alarmTarget']}</span>
+                  </p>
+                  <p>
+                      <span>联系人：</span>
+                      <span>${obj['user1Name'] == undefined || null ? '--' : obj['user1Name']}</span>
+                      <span>电话：</span>
+                      <span>${obj['user1Phone'] == undefined || null ? '--' : obj['user1Phone']}</span>
+                  </p>
+                  <p>
+                      <span>地址:</span>
+                      <span>${obj['address'] == undefined || null ? '--' : obj['address']}</span>
+                  </p>
+                  <p>
+                      <span>时间:</span>
+                      <span>${obj['timestamp'] == undefined || null ? '--' : obj['timestamp']}</span>
+                  </p>
+                  <p>
+                    <button onclick='cz2(${JSON.stringify(obj)},${JSON.stringify(upstatuslist)})' style="color='#fff'" type="button">处置</button>
+                  </p>
+              `
+  } else {
+    return `
+                  <div style="display:flex">
+                      <div style="width:50%;">
+                        <span>第一联系人：</span>
+                        <span>${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
+                      </div>
+                      <div style="width:50%;">
+                        <span>电话：</span>
+                        <span>${obj['userPhone'] == undefined || obj['userPhone'] == null || obj['userPhone'] == ' ' ? '--' : obj['userPhone']}</span>
+                      </div>
+                  </div>
+                  <div style="display:flex;margin-top:10px">
+                      <div style="width:50%;">
+                        <span>第二联系人：</span>
+                        <span>${obj['user2Name'] == undefined || obj['user2Name'] == null || obj['user2Name'] == ' ' ? '--' : obj['user2Name']}</span>
+                      </div>
+                      <div style="width:50%;">
+                        <span>电话：</span>
+                        <span>${obj['user2Phone'] == undefined || obj['user2Phone'] == null || obj['user2Phone'] == ' ' ? '--' : obj['user2Phone']}</span>
+                      </div>
+                  </div>
+                  <div style="display:flex;margin-top:10px">
+                      <div style="width:50%;">
+                        <span>第三联系人：</span>
+                        <span>${obj['user3Name'] == undefined || obj['user3Name'] == null || obj['user3Name'] == ' ' ? '--' : obj['user3Name']}</span>
+                      </div>
+                      <div style="width:50%;">
+                        <span>电话：</span>
+                        <span>${obj['user3Phone'] == undefined || obj['user3Phone'] == null || obj['user3Phone'] == ' ' ? '--' : obj['user3Phone']}</span>
+                      </div>
+                  </div>
+                  <div style="display:flex;margin-top:10px">
+                      <div style="width:50%;">
+                        <span>区域码:</span>
+                        <span>${obj['subCode'] == undefined || obj['subCode'] == null || obj['subCode'] == ' ' ? '--' : obj['subCode']}</span>
+                      </div>
+                  </div>
+              `
+  }
+}
+const getSubstanceInfoWindowContent2 = (obj: any, type: any) => {
+  console.log('🚀 ~ getSubstanceInfoWindowContent2 ~ obj, type:', obj, type)
+  if (obj.deviceType == '04' || obj.deviceType == '00') {
+    return `
+                  <p>
+                      <span>归属单位：</span>
+                      <span>${obj['dwmc'] == undefined || null ? '--' : obj['dwmc']}</span>
+                      <span>名称：</span>
+                      <span>${obj['title'] == undefined || null ? '--' : obj['title']}</span>
+                  </p>
+                  <p>
+                      <span>联系人：</span>
+                      <span>${obj['user2Name'] == undefined || null ? '--' : obj['user2Name']}</span>
+                      <span>电话：</span>
+                      <span>${obj['user2Phone'] == undefined || null ? '--' : obj['user2Phone']}</span>
+                  </p>
+                  <p>
+                      <span>地址:</span>
+                      <span>${obj['pointAddress'] == undefined || null ? '--' : obj['pointAddress']}</span>
+                  </p>
+                  <p>
+                    <button onclick='addrt(${JSON.stringify(obj)})' style="color='#fff'" type="button">播放视频</button>
+                  </p>
+              `
+  } else {
+    return `
+                  <p>
+                      <span>归属单位：</span>
+                      <span>${obj['dwmc'] == undefined || null ? '--' : obj['dwmc']}</span>
+                      <span>名称：</span>
+                      <span>${obj['title'] == undefined || null ? '--' : obj['title']}</span>
+                  </p>
+                  <p>
+                      <span>联系人：</span>
+                      <span>${obj['user2Name'] == undefined || null ? '--' : obj['user2Name']}</span>
+                      <span>电话：</span>
+                      <span>${obj['user2Phone'] == undefined || null ? '--' : obj['user2Phone']}</span>
+                  </p>
+                  <p>
+                      <span>地址:</span>
+                      <span>${obj['pointAddress'] == undefined || null ? '--' : obj['pointAddress']}</span>
+                  </p>
+              `
+  }
+}
 const createSubstanceInfowindow = (obj: any, type: any) => {
   //定义顶部标题
   var mdinfoTop = document.createElement('div')
@@ -1076,52 +1198,6 @@ const createSubstanceInfowindow2 = (obj: any, type: any) => {
   return mdinfoTop
 }
 
-const getSubstanceInfoWindowContent2 = (obj: any, type: any) => {
-  console.log('🚀 ~ getSubstanceInfoWindowContent2 ~ obj, type:', obj, type)
-  if (obj.deviceType == '04' || obj.deviceType == '00') {
-    return `
-                  <p>
-                      <span>归属单位：</span>
-                      <span>${obj['dwmc'] == undefined || null ? '--' : obj['dwmc']}</span>
-                      <span>名称：</span>
-                      <span>${obj['title'] == undefined || null ? '--' : obj['title']}</span>
-                  </p>
-                  <p>
-                      <span>联系人：</span>
-                      <span>${obj['user2Name'] == undefined || null ? '--' : obj['user2Name']}</span>
-                      <span>电话：</span>
-                      <span>${obj['user2Phone'] == undefined || null ? '--' : obj['user2Phone']}</span>
-                  </p>
-                  <p>
-                      <span>地址:</span>
-                      <span>${obj['pointAddress'] == undefined || null ? '--' : obj['pointAddress']}</span>
-                  </p>
-                  <p>
-                    <button onclick='addrt(${JSON.stringify(obj)})' style="color='#fff'" type="button">播放视频</button>
-                  </p>
-              `
-  } else {
-    return `
-                  <p>
-                      <span>归属单位：</span>
-                      <span>${obj['dwmc'] == undefined || null ? '--' : obj['dwmc']}</span>
-                      <span>名称：</span>
-                      <span>${obj['title'] == undefined || null ? '--' : obj['title']}</span>
-                  </p>
-                  <p>
-                      <span>联系人：</span>
-                      <span>${obj['user2Name'] == undefined || null ? '--' : obj['user2Name']}</span>
-                      <span>电话：</span>
-                      <span>${obj['user2Phone'] == undefined || null ? '--' : obj['user2Phone']}</span>
-                  </p>
-                  <p>
-                      <span>地址:</span>
-                      <span>${obj['pointAddress'] == undefined || null ? '--' : obj['pointAddress']}</span>
-                  </p>
-              `
-  }
-}
-
 ;(window as any).addrt = (a: any) => {
   console.log('播放_______________', a)
   if (a.deviceType == '00') {
@@ -1186,77 +1262,6 @@ const getSubstanceInfoWindowContent2 = (obj: any, type: any) => {
   }
 }
 
-const getSubstanceInfoWindowContent = (obj: any, type: any) => {
-  // console.log('obj', obj, type)
-
-  if (type == '1' || type == '3') {
-    return `
-                  <p>
-                      <span>设备号：</span>
-                      <span>${obj['alarmSource'] == undefined || null ? '--' : obj['alarmSource']}</span>
-                      <span>名称：</span>
-                      <span>${obj['alarmTarget'] == undefined || null ? '--' : obj['alarmTarget']}</span>
-                  </p>
-                  <p>
-                      <span>联系人：</span>
-                      <span>${obj['user1Name'] == undefined || null ? '--' : obj['user1Name']}</span>
-                      <span>电话：</span>
-                      <span>${obj['user1Phone'] == undefined || null ? '--' : obj['user1Phone']}</span>
-                  </p>
-                  <p>
-                      <span>地址:</span>
-                      <span>${obj['address'] == undefined || null ? '--' : obj['address']}</span>
-                  </p>
-                  <p>
-                      <span>时间:</span>
-                      <span>${obj['timestamp'] == undefined || null ? '--' : obj['timestamp']}</span>
-                  </p>
-                  <p>
-                    <button onclick='cz2(${JSON.stringify(obj)},${JSON.stringify(upstatuslist)})' style="color='#fff'" type="button">处置</button>
-                  </p>
-              `
-  } else {
-    return `
-                  <div style="display:flex">
-                      <div style="width:50%;">
-                        <span>第一联系人：</span>
-                        <span>${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
-                      </div>
-                      <div style="width:50%;">
-                        <span>电话：</span>
-                        <span>${obj['userPhone'] == undefined || obj['userPhone'] == null || obj['userPhone'] == ' ' ? '--' : obj['userPhone']}</span>
-                      </div>
-                  </div>
-                  <div style="display:flex;margin-top:10px">
-                      <div style="width:50%;">
-                        <span>第二联系人：</span>
-                        <span>${obj['user2Name'] == undefined || obj['user2Name'] == null || obj['user2Name'] == ' ' ? '--' : obj['user2Name']}</span>
-                      </div>
-                      <div style="width:50%;">
-                        <span>电话：</span>
-                        <span>${obj['user2Phone'] == undefined || obj['user2Phone'] == null || obj['user2Phone'] == ' ' ? '--' : obj['user2Phone']}</span>
-                      </div>
-                  </div>
-                  <div style="display:flex;margin-top:10px">
-                      <div style="width:50%;">
-                        <span>第三联系人：</span>
-                        <span>${obj['user3Name'] == undefined || obj['user3Name'] == null || obj['user3Name'] == ' ' ? '--' : obj['user3Name']}</span>
-                      </div>
-                      <div style="width:50%;">
-                        <span>电话：</span>
-                        <span>${obj['user3Phone'] == undefined || obj['user3Phone'] == null || obj['user3Phone'] == ' ' ? '--' : obj['user3Phone']}</span>
-                      </div>
-                  </div>
-                  <div style="display:flex;margin-top:10px">
-                      <div style="width:50%;">
-                        <span>区域码:</span>
-                        <span>${obj['subCode'] == undefined || obj['subCode'] == null || obj['subCode'] == ' ' ? '--' : obj['subCode']}</span>
-                      </div>
-                  </div>
-              `
-  }
-}
-
 //实时警情
 const listData = ref([])
 const getRealTimeAlarmSituation = () => {
@@ -1281,7 +1286,7 @@ const getRealTimeAlarmSituation = () => {
             icon: L.divIcon({
               className: 'indexMarkerImg',
               html: `<div class="indexMarkerImg">
-                      <img style="width:30px;height:60px;left:9px;top:7px" src="${image4}">
+                      <img style="width:35px;height:35px;left:9px;top:7px" src="${image4}">
                       <div class="markerClass">
                          <div></div>
                          <div></div>
@@ -1320,6 +1325,7 @@ const toinfo = (item: any, index: number) => {
   listindex.value = index
   // dialogTableVisible.value = false;
   nextTick(() => {
+    try {
       infoData.value = item
       if (item.state == 'new') {
         //新事件转成处理中/firectrl/client/sensor/alarm_event/changestate
@@ -1358,10 +1364,12 @@ const toinfo = (item: any, index: number) => {
       }
 
       //跳转地图marke
-    let targetLangLat = [item.longitude, item.latitude]
+      let targetLatLngt = [item.latitude, item.longitude]
-    state.map.panTo(targetLangLat)
+      state.map.setView(targetLatLngt, 15)
-    state.map.setZoomAndCenter(15, targetLangLat)
       dialogTableVisible.value = true
+    } catch (error) {
+      console.log('🚀 ~ toinfo ~ error:', error)
+    }
   })
 }
 //
@@ -2016,7 +2024,7 @@ iframe {
   top: 115px;
   right: 448px;
   background: rgb(21, 42, 95);
-  z-index: 99;
+  z-index: 999;
   width: 349px;
   padding: 10px;
   border-radius: 5px;