Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Libt:ca538842ddd812e96ebb026c93d88bd1a955177c
Branches Tags
Libt:main
...
compare: Libt:0645598eb3305fdf97d103360d6b1c4203f6bae8
Branches Tags
Libt:main

2 Commits
ca538842dd ... 0645598eb3

Author SHA1 Message Date
TimSpan 0645598eb3 离线地图页面改造完成、下一步完成在线地图页面的代码同步 2024-10-17 14:40:04 +08:00
TimSpan 26780c7f06 离线地图页面改造完成、下一步完成在线地图页面的代码同步 2024-10-17 14:39:51 +08:00
2 changed files with 179 additions and 169 deletions
Show Stats Expand all files Collapse all files

2
src/App.vue
View File

@ -126,6 +126,8 @@ body {
bottom: 0; bottom: 0;
width: 40px; width: 40px;
height: 40px; height: 40px;
// width: 50px;
// height: 50px;
} }
.markerClass > div { .markerClass > div {

264
src/views/page/offLineMap.vue
View File

@ -137,7 +137,7 @@
</div> </div>
<ul class="dataList" v-show="isActive1 == '1'"> <ul class="dataList" v-show="isActive1 == '1'">
<div v-if="jinbao.length > 0"> <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> <p>
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
</p> </p>
@ -156,7 +156,7 @@
</ul> </ul>
<ul class="dataList" v-show="isActive1 == '2'"> <ul class="dataList" v-show="isActive1 == '2'">
<div v-if="jinqing.length > 0"> <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> <p>
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
</p> </p>
@ -175,7 +175,7 @@
</ul> </ul>
<ul class="dataList" v-show="isActive1 == '3'"> <ul class="dataList" v-show="isActive1 == '3'">
<div v-if="AIyujing.length > 0"> <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> <p>
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
</p> </p>
@ -195,8 +195,9 @@
</div> </div>
</div> </div>
</a-layout-sider> </a-layout-sider>
<!-- 浮窗模块 --> <!-- 固定弹窗 -->
<div v-show="dialogTableVisible" class="dialogTableVisibleClass"> <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'}"> <el-popover :visible="visible" :show-arrow="false" placement="left" :width="400" :popper-style="{background: '#06325F', border: '1px solid #60626654'}">
<template #reference> <template #reference>
<el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC"> <el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC">
@ -241,7 +242,8 @@
</ul> </ul>
</div> </div>
</el-popover> </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 /> <close-bold />
</el-icon> </el-icon>
@ -409,7 +411,9 @@ const filter: ShowSearchType['filter'] = (inputValue, path) => {
return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1) return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
} }
const cascaderChange = (value: any, selectedOptions: any): void => { const cascaderChange = (value: any, selectedOptions: any): void => {
let title = selectedOptions.slice(-1)[0]?.title
expandedKeys.value = value expandedKeys.value = value
scrollToMatchedNode(title)
} }
interface anyType { interface anyType {
[key: string]: any [key: string]: any
@ -421,6 +425,8 @@ const day = proxy.day
const expandedKeys = ref([]) const expandedKeys = ref([])
const selectedKeys = ref([]) const selectedKeys = ref([])
const checkedKeys = ref([]) const checkedKeys = ref([])
// const dialogTableVisible = ref(true)
// const visible = ref(true)
const dialogTableVisible = ref(false) const dialogTableVisible = ref(false)
const visible = ref(false) const visible = ref(false)
const router = useRouter() const router = useRouter()
@ -848,11 +854,13 @@ const getdayline = () => {
// 将 marker 添加到地图 // 将 marker 添加到地图
marker.addTo(state.map) marker.addTo(state.map)
} else { } 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], { const marker = L.marker([lat, lng], {
icon: L.divIcon({ icon: L.divIcon({
className: 'indexMarkerImg', className: 'indexMarkerImg',
html: `<div class="indexMarkerImg"> html: `<div class="indexMarkerImg">
<img style="width:30px;height:60px;left:9px;top:7px" src="${no}">
<div class="markerClass"> <div class="markerClass">
<div></div> <div></div>
<div></div> <div></div>
@ -963,7 +971,121 @@ const selectA = (selectedKeys: any, e: any) => {
console.log('🚀 ~ selectA ~ error:', error) 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) => { const createSubstanceInfowindow = (obj: any, type: any) => {
//定义顶部标题 //定义顶部标题
var mdinfoTop = document.createElement('div') var mdinfoTop = document.createElement('div')
@ -1076,52 +1198,6 @@ const createSubstanceInfowindow2 = (obj: any, type: any) => {
return mdinfoTop 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) => { ;(window as any).addrt = (a: any) => {
console.log('播放_______________', a) console.log('播放_______________', a)
if (a.deviceType == '00') { 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 listData = ref([])
const getRealTimeAlarmSituation = () => { const getRealTimeAlarmSituation = () => {
@ -1281,7 +1286,7 @@ const getRealTimeAlarmSituation = () => {
icon: L.divIcon({ icon: L.divIcon({
className: 'indexMarkerImg', className: 'indexMarkerImg',
html: `<div class="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 class="markerClass">
<div></div> <div></div>
<div></div> <div></div>
@ -1320,6 +1325,7 @@ const toinfo = (item: any, index: number) => {
listindex.value = index listindex.value = index
// dialogTableVisible.value = false; // dialogTableVisible.value = false;
nextTick(() => { nextTick(() => {
try {
infoData.value = item infoData.value = item
if (item.state == 'new') { if (item.state == 'new') {
//新事件转成处理中/firectrl/client/sensor/alarm_event/changestate //新事件转成处理中/firectrl/client/sensor/alarm_event/changestate
@ -1358,10 +1364,12 @@ const toinfo = (item: any, index: number) => {
} }
//跳转地图marke //跳转地图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 dialogTableVisible.value = true
} catch (error) {
console.log('🚀 ~ toinfo ~ error:', error)
}
}) })
} }
// //
@ -2016,7 +2024,7 @@ iframe {
top: 115px; top: 115px;
right: 448px; right: 448px;
background: rgb(21, 42, 95); background: rgb(21, 42, 95);
z-index: 99; z-index: 999;
width: 349px; width: 349px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;