|
|
|
@ -26,34 +26,43 @@ |
|
|
|
<div class="flex-1 text-left font-500"> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
<div class="text-gray-500 font-400 text-12px"> |
|
|
|
{{ item.onlineStatus === 1 ? '在线' : '在线' }} |
|
|
|
<div class="text-gray-500 font-400 text-12px" :style="{ color: item.statusColor }"> |
|
|
|
{{ item.statusLabel }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div class="markerList-content"> |
|
|
|
<div> <span>SN：</span>{{ item.sn }}</div> |
|
|
|
<div> <span>类型：</span>{{ item.gasChemical }}</div> |
|
|
|
<hr /> |
|
|
|
<div> <span>气体状态：</span>{{ item.gasStatus }}</div> |
|
|
|
<div> <span>电池告警状态：</span>{{ item.batteryStatus }}</div> |
|
|
|
|
|
|
|
<div> <span>围栏状态：</span>{{ item.fenceStatus }}</div> |
|
|
|
<div> <span>在线状态：</span>{{ item.onlineStatus }}</div> |
|
|
|
<div> <span>启用状态：</span>{{ item.enableStatus === 1 ? '启用' : '备用' }}</div> |
|
|
|
<hr /> |
|
|
|
<div> <span>电量：</span>{{ item.battery }}</div> |
|
|
|
<div> <span>数值：</span>{{ item.value }} {{ item.unit }}</div> |
|
|
|
<div> <span>时间：</span>{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}</div> |
|
|
|
<div> |
|
|
|
<div><span>SN：</span>{{ item.sn }}</div> |
|
|
|
<div><span>类型：</span>{{ item.gasChemical }}</div> |
|
|
|
<!-- <hr /> --> |
|
|
|
<div |
|
|
|
><span>气体状态：</span |
|
|
|
>{{ getLabelWithTypeValue('gasStatus', item.gasStatus) }}</div |
|
|
|
> |
|
|
|
<div |
|
|
|
><span>围栏状态：</span |
|
|
|
>{{ getLabelWithTypeValue('fenceStatus', item.fenceStatus) }}</div |
|
|
|
> |
|
|
|
<div |
|
|
|
><span>电池状态：</span |
|
|
|
>{{ getLabelWithTypeValue('batteryStatus', item.batteryStatus) }}</div |
|
|
|
> |
|
|
|
|
|
|
|
<!-- <div><span>启用状态：</span>{{ item.enableStatus === 1 ? '启用' : '备用' }}</div> --> |
|
|
|
<!-- <hr /> --> |
|
|
|
<div><span>电量：</span>{{ item.battery }}</div> |
|
|
|
<div><span>数值：</span>{{ item.value }} {{ item.unit }}</div> |
|
|
|
<div><span>时间：</span>{{ item.timeStr }}</div> |
|
|
|
|
|
|
|
<div style="margin-top: 10px"> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
type="success" |
|
|
|
size="small" |
|
|
|
v-if="item.latitude && item.longitude" |
|
|
|
@click="setCenter(item)" |
|
|
|
>定位</el-button |
|
|
|
> |
|
|
|
<el-button type="primary" size="small" @click="onClickTrajectory(item)" |
|
|
|
<el-button type="success" size="small" @click="onClickTrajectory(item)" |
|
|
|
>轨迹</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
@ -77,11 +86,14 @@ import { getLastDetectorData } from '@/api/gas' |
|
|
|
import { HandDetectorData } from '@/api/gas/handdetector' |
|
|
|
import { tdengineApi, tdStruct, tdQuery } from '@/api/gas/tdengine/index' |
|
|
|
|
|
|
|
import { getLabelWithTypeValue, getHighestPriorityStatus,getStatusLabel,getStatusColor } from './components/utils/map.utils' |
|
|
|
|
|
|
|
import { MarkerData, FenceData } from './components/types/map.types' |
|
|
|
|
|
|
|
import { useHandDetectorStore } from '@/store/modules/handDetector' |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
import dayjs from 'dayjs' |
|
|
|
import { getDistance } from 'ol/sphere' |
|
|
|
|
|
|
|
const handDetectorStore = useHandDetectorStore() // 手持探测器 store |
|
|
|
|
|
|
|
@ -107,7 +119,7 @@ const onlineCount = computed(() => markers.value.filter((item) => item.onlineSta |
|
|
|
const filterMarkers = computed(() => { |
|
|
|
if (search.value) { |
|
|
|
return markers.value.filter((item) => { |
|
|
|
var isName = item.name.includes(search.value) |
|
|
|
var isName = item?.name?.includes(search.value) |
|
|
|
var isSn = item.sn?.includes(search.value) |
|
|
|
var isGasChemical = item.gasChemical?.includes(search.value) |
|
|
|
|
|
|
|
@ -123,22 +135,30 @@ const getMarkers = async () => { |
|
|
|
res = res.filter((i) => i.enableStatus === 1) |
|
|
|
var res2 = res.map((i) => { |
|
|
|
// console.log([i.longitude, i.latitude]) |
|
|
|
|
|
|
|
return { |
|
|
|
...i, |
|
|
|
coordinates: [i.longitude, i.latitude], |
|
|
|
data: [], |
|
|
|
time: i.time ? dayjs(i.time).format('YYYY-MM-DD HH:mm:ss') : '', |
|
|
|
value: i.value, |
|
|
|
unit: i.unit, |
|
|
|
let statusStr = getHighestPriorityStatus({ |
|
|
|
gasStatus: i.gasStatus, //气体报警状态 |
|
|
|
batteryStatus: i.batteryStatus, //电池报警状态 |
|
|
|
fenceStatus: i.fenceStatus, //电子围栏报警状态 |
|
|
|
onlineStatus: i.onlineStatus, //在线状态 |
|
|
|
enableStatus: i.enableStatus //启用状态 |
|
|
|
}) //状态字符串 |
|
|
|
return { |
|
|
|
...i, |
|
|
|
coordinates: [i.longitude || 0, i.latitude || 0] as [number,number], |
|
|
|
// data: [], |
|
|
|
timeStr: i.time ? dayjs(i.time).format('YYYY-MM-DD HH:mm:ss') : '', |
|
|
|
// value: i.value, |
|
|
|
// unit: i.unit, |
|
|
|
// gasStatus: i.gasStatus, //气体报警状态 |
|
|
|
// batteryStatus: i.batteryStatus, //电池报警状态 |
|
|
|
// fenceStatus: i.fenceStatus, //电子围栏报警状态 |
|
|
|
// onlineStatus: i.onlineStatus, //在线状态 |
|
|
|
// enableStatus: i.enableStatus, //启用状态 |
|
|
|
statusStr:statusStr, //状态字符串 |
|
|
|
statusColor: getStatusColor(statusStr), //状态颜色 |
|
|
|
statusLabel: getStatusLabel(statusStr), //状态标签 |
|
|
|
} |
|
|
|
}) |
|
|
|
markers.value = res2 as unknown as any[] |
|
|
|
markers.value = res2 |
|
|
|
}) |
|
|
|
} |
|
|
|
const getFences = async () => { |
|
|
|
@ -168,7 +188,7 @@ var trajectoryTimeRange = ref([dayjs().subtract(1, 'hour').valueOf(), dayjs().va |
|
|
|
// 时间范围改变 |
|
|
|
function timeRangeChange(range: { startTime: number; endTime: number }) { |
|
|
|
console.log('timeRangeChange', range) |
|
|
|
trajectoryTimeRange.value = [range.startTime,range.endTime] |
|
|
|
trajectoryTimeRange.value = [range.startTime, range.endTime] |
|
|
|
if (currentMarker) { |
|
|
|
showTrajectory(currentMarker) |
|
|
|
} |
|
|
|
@ -189,9 +209,67 @@ async function showTrajectory(item: MarkerData) { |
|
|
|
|
|
|
|
// sn: '867989072729904' |
|
|
|
}) |
|
|
|
// 过滤前 |
|
|
|
console.log('过滤前', data.length) |
|
|
|
// 过滤掉重复点位和无效点位 |
|
|
|
var newData = data.filter((item, index, arr) => { |
|
|
|
if (!item.longitude || !item.latitude) { |
|
|
|
return false |
|
|
|
} |
|
|
|
if (index === 0) { |
|
|
|
return true |
|
|
|
} |
|
|
|
// 过滤掉前后点位一样的 |
|
|
|
return ( |
|
|
|
item.longitude !== arr[index - 1]?.longitude || item.latitude !== arr[index - 1]?.latitude |
|
|
|
) |
|
|
|
}) |
|
|
|
// 过滤后 |
|
|
|
console.log('过滤后', newData.length) |
|
|
|
|
|
|
|
item.data = newData |
|
|
|
.filter((item, index, arr) => { |
|
|
|
if (index === 0) { |
|
|
|
return true |
|
|
|
} |
|
|
|
if (index == arr.length - 2) { |
|
|
|
return true |
|
|
|
} |
|
|
|
|
|
|
|
// 过滤掉前后点位相差超过100m的 |
|
|
|
let before = arr[index - 1] |
|
|
|
let after = arr[index + 1] |
|
|
|
|
|
|
|
let beforeDistance = getDistance( |
|
|
|
[before.longitude, before.latitude], |
|
|
|
[item.longitude, item.latitude] |
|
|
|
) |
|
|
|
console.log('beforeDistance', beforeDistance) |
|
|
|
|
|
|
|
if (beforeDistance < 40) { |
|
|
|
return true |
|
|
|
} |
|
|
|
let afterDistance = getDistance( |
|
|
|
[after.longitude, after.latitude], |
|
|
|
[item.longitude, item.latitude] |
|
|
|
) |
|
|
|
console.log('afterDistance', afterDistance) |
|
|
|
|
|
|
|
item.data = data |
|
|
|
.filter((i) => i.longitude && i.latitude) |
|
|
|
if (afterDistance < 40) { |
|
|
|
return true |
|
|
|
} |
|
|
|
let before_after_distance = getDistance( |
|
|
|
[after.longitude, after.latitude], |
|
|
|
[before.longitude, before.latitude] |
|
|
|
) |
|
|
|
console.log('before_after_distance', before_after_distance) |
|
|
|
|
|
|
|
if (before_after_distance < 20) { |
|
|
|
return true |
|
|
|
} |
|
|
|
|
|
|
|
return false |
|
|
|
}) |
|
|
|
.map((j) => { |
|
|
|
return { |
|
|
|
...j, |
|
|
|
@ -201,6 +279,8 @@ async function showTrajectory(item: MarkerData) { |
|
|
|
timeStr: dayjs(j.ts).format('YYYY-MM-DD HH:mm:ss') |
|
|
|
} |
|
|
|
}) |
|
|
|
console.log('item.data', item.data) |
|
|
|
|
|
|
|
mapRef.value?.showTrajectory(trajectoryTimeRange.value[0], trajectoryTimeRange.value[1], [item]) |
|
|
|
} finally { |
|
|
|
} |
|
|
|
|
