|
|
|
@ -30,10 +30,7 @@ |
|
|
|
<template #header="{ item }"> |
|
|
|
<div class="marker-item"> |
|
|
|
<div class="flex-1 text-13px"> {{ item.name }}</div> |
|
|
|
<div |
|
|
|
class="text-12px pr-1" |
|
|
|
:style="{ color: item.statusColor }" |
|
|
|
> |
|
|
|
<div class="text-12px pr-1" :style="{ color: item.statusColor }"> |
|
|
|
{{ item.statusLabel }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -113,7 +110,7 @@ import { MarkerData, FenceData } from './components/types/map.types' |
|
|
|
|
|
|
|
import { useHandDetectorStore } from '@/store/modules/handDetector' |
|
|
|
import { ElMessage, ElScrollbar } from 'element-plus' |
|
|
|
import dayjs, { Dayjs } from 'dayjs' |
|
|
|
import dayjs from 'dayjs' |
|
|
|
import { getDistance } from 'ol/sphere' |
|
|
|
import { shallowRef } from 'vue' |
|
|
|
const componentsIsActive = ref(false) |
|
|
|
@ -152,7 +149,6 @@ const filterMarkers = computed(() => { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (selectStatus.value.length !== 0) { |
|
|
|
arr = arr.filter((item) => { |
|
|
|
// console.log('selectStatus', selectStatus.value,item.statusStr); |
|
|
|
@ -162,13 +158,11 @@ const filterMarkers = computed(() => { |
|
|
|
if (item.statusStr == 'gasStatus_2' || item.statusStr == 'gasStatus_1') { |
|
|
|
return selectStatus.value.includes('alarm') |
|
|
|
} |
|
|
|
// if (item.statusStr == 'fenceStatus_1') { |
|
|
|
// return selectStatus.value.includes('fenceStatus_1') |
|
|
|
// } |
|
|
|
|
|
|
|
return selectStatus.value.includes(item.statusStr) |
|
|
|
}) |
|
|
|
} |
|
|
|
// console.log('markers.value', markers.value) |
|
|
|
|
|
|
|
|
|
|
|
return arr |
|
|
|
}) |
|
|
|
@ -176,9 +170,9 @@ const filterMarkers = computed(() => { |
|
|
|
const filterMarkers2 = function getFilterMarkers2() { |
|
|
|
var arr: MarkerData[] = [] |
|
|
|
var nowTime = dayjs().format('YYYY-MM-DD HH:mm:ss') |
|
|
|
for (let i = 0; i < 10000; i++) { |
|
|
|
const lon= 80+Math.random()*20 |
|
|
|
const lat= 30+Math.random()*20 |
|
|
|
for (let i = 0; i < 50000; i++) { |
|
|
|
const lon = 100 + Math.random() * 2 |
|
|
|
const lat = 30 + Math.random() * 2 |
|
|
|
arr.push({ |
|
|
|
id: i + 1, |
|
|
|
sn: '867989072728120', |
|
|
|
@ -227,12 +221,9 @@ const filterMarkers2 = function getFilterMarkers2() { |
|
|
|
const getMarkers = async () => { |
|
|
|
console.log('getMarkers') |
|
|
|
return await getLastDetectorData().then((res: HandDetectorData[]) => { |
|
|
|
console.time('getLastDetectorData'); |
|
|
|
|
|
|
|
res = res.filter((i) => i.enableStatus === 1) |
|
|
|
var res2 = res |
|
|
|
.map((i) => { |
|
|
|
// console.log([i.longitude, i.latitude]) |
|
|
|
let statusStr = getHighestPriorityStatus({ |
|
|
|
gasStatus: i.gasStatus, //气体报警状态 |
|
|
|
batteryStatus: i.batteryStatus, //电池报警状态 |
|
|
|
@ -252,13 +243,13 @@ const getMarkers = async () => { |
|
|
|
} |
|
|
|
}) |
|
|
|
.sort((a, b) => a.statusPriority - b.statusPriority) |
|
|
|
console.timeEnd('getLastDetectorData'); |
|
|
|
|
|
|
|
markers.value = res2 |
|
|
|
}) |
|
|
|
} |
|
|
|
const getFences = async () => { |
|
|
|
return await handDetectorStore.getAllFences().then((res) => { |
|
|
|
// console.log('getFences', res) |
|
|
|
|
|
|
|
let fencesData = res |
|
|
|
.map((i) => { |
|
|
|
return { |
|
|
|
@ -272,7 +263,6 @@ const getFences = async () => { |
|
|
|
} |
|
|
|
// 定位到手持设备 |
|
|
|
function setCenter(item: MarkerData) { |
|
|
|
console.log('setCenter', item) |
|
|
|
if (item.longitude && item.latitude) { |
|
|
|
mapRef.value?.setCenter([item.longitude || 0, item.latitude || 0]) |
|
|
|
} |
|
|
|
@ -396,13 +386,11 @@ async function showTrajectory(item: MarkerData) { |
|
|
|
const historicalCurveRef = ref<InstanceType<typeof HistoricalCurve>>() |
|
|
|
// 点击历史曲线 |
|
|
|
function onClickHistoricalCurve(item: MarkerData) { |
|
|
|
// console.log('onClickHistoricalCurve', item) |
|
|
|
historicalCurveRef.value?.openDrawer(toRaw(item)) |
|
|
|
} |
|
|
|
|
|
|
|
// 点击轨迹 |
|
|
|
function onClickTrajectory(item: MarkerData) { |
|
|
|
console.log('onClickTrajectory', item) |
|
|
|
trajectoryTimeRange.value = [dayjs().subtract(1, 'hour').valueOf(), dayjs().valueOf()] |
|
|
|
showTrajectory(item) |
|
|
|
} |
|
|
|
@ -410,15 +398,13 @@ function onClickTrajectory(item: MarkerData) { |
|
|
|
const scrollbarRef = useTemplateRef<InstanceType<typeof VirtualCollapsePanel>>('scrollbarRef') |
|
|
|
// 点击手持设备 |
|
|
|
function onClickMarker(markerItem: MarkerData) { |
|
|
|
console.log('onClickMarker', markerItem) |
|
|
|
|
|
|
|
var findIndex = filterMarkers.value.findIndex((item) => item.id === markerItem.id) |
|
|
|
if (findIndex === -1) { |
|
|
|
return |
|
|
|
} |
|
|
|
setTimeout(() => { |
|
|
|
// console.log('findIndex', findIndex, filterMarkers.value[findIndex]) |
|
|
|
|
|
|
|
scrollbarRef.value?.scrollToIndex(findIndex) |
|
|
|
}, 300) |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
xh