Browse Source

地图优化

master
xh 24 hours ago
parent
commit
e99e18245b
  1. 9
      web/src/views/HandDevice/Home/components/OpenLayerMap.vue
  2. 16
      web/src/views/HandDevice/Home/components/services/fence.service.ts
  3. 14
      web/src/views/HandDevice/Home/components/utils/map.utils.ts
  4. 4
      web/src/views/HandDevice/Home/index.vue

9
web/src/views/HandDevice/Home/components/OpenLayerMap.vue

@ -253,10 +253,11 @@ const handleFenceDrawComplete = (coordinates: [number, number][]) => {
// //
const fitToMarkers = () => { const fitToMarkers = () => {
if (isMapInitialized && props.markers && props.markers.length > 0) { if (isMapInitialized && props.markers && props.markers.length > 0) {
const markerCoords = props.markers.map((marker) => [
marker.longitude || 0,
marker.latitude || 0
])
const markerCoords = props.markers
.filter((marker) => {
return marker.longitude && marker.latitude
})
.map((marker) => [marker.longitude||0, marker.latitude||0])
services.mapService?.fitToMarkers(markerCoords) services.mapService?.fitToMarkers(markerCoords)
} }
} }

16
web/src/views/HandDevice/Home/components/services/fence.service.ts

@ -76,7 +76,7 @@ export class FenceService {
*/ */
private createFenceStyle(fence: FenceData): Style { private createFenceStyle(fence: FenceData): Style {
let strokeColor = '#1890ff' let strokeColor = '#1890ff'
let fillColor = 'rgba(24, 144, 255, 0.1)'
// let fillColor = 'rgba(24, 144, 255, 0.1)'
let strokeWidth = 2 let strokeWidth = 2
// 根据围栏状态设置样式 // 根据围栏状态设置样式
@ -84,16 +84,16 @@ export class FenceService {
switch (fence.status) { switch (fence.status) {
case FENCE_STATUS.DISABLED: case FENCE_STATUS.DISABLED:
strokeColor = '#67c23a' strokeColor = '#67c23a'
fillColor = 'rgba(103, 194, 58, 0.1)'
// fillColor = 'rgba(103, 194, 58, 0.1)'
break break
case FENCE_STATUS.ENABLED: case FENCE_STATUS.ENABLED:
strokeColor = '#e6a23c' strokeColor = '#e6a23c'
fillColor = 'rgba(230, 162, 60, 0.15)'
// fillColor = 'rgba(230, 162, 60, 0.15)'
strokeWidth = 3 strokeWidth = 3
break break
case FENCE_STATUS.ALARM: // 告警状态 case FENCE_STATUS.ALARM: // 告警状态
strokeColor = '#f56c6c' strokeColor = '#f56c6c'
fillColor = 'rgba(245, 108, 108, 0.2)'
// fillColor = 'rgba(245, 108, 108, 0.2)'
strokeWidth = 4 strokeWidth = 4
break break
} }
@ -108,11 +108,11 @@ export class FenceService {
width: strokeWidth, width: strokeWidth,
lineDash: lineDash lineDash: lineDash
}), }),
fill: new Fill({
color: fillColor,
// opacity: 0.5
// fill: new Fill({
// color: fillColor,
// // opacity: 0.5
})
// })
}) })
} }

14
web/src/views/HandDevice/Home/components/utils/map.utils.ts

@ -13,7 +13,7 @@ export const findStatusInfo = (
dict: (typeof STATUS_DICT)[keyof typeof STATUS_DICT], dict: (typeof STATUS_DICT)[keyof typeof STATUS_DICT],
value: string value: string
) => { ) => {
return dict.find((item) => item.value === value)
return dict?.find((item) => item.value === value)
} }
/** /**
@ -39,22 +39,22 @@ export const getHighestPriorityStatus = (markerData: {
const statuses: string[] = [] const statuses: string[] = []
// 收集非正常状态 // 收集非正常状态
if (markerData.gasStatus !== 0) {
if (markerData.gasStatus === 1) {
const gasStatusStr = getStatusMapping('gasStatus', String(markerData.gasStatus)) const gasStatusStr = getStatusMapping('gasStatus', String(markerData.gasStatus))
gasStatusStr && statuses.push(gasStatusStr) gasStatusStr && statuses.push(gasStatusStr)
} }
if (markerData.batteryStatus !== 0) {
if (markerData.batteryStatus === 1) {
const batteryStatusStr = getStatusMapping('batteryStatus', String(markerData.batteryStatus)) const batteryStatusStr = getStatusMapping('batteryStatus', String(markerData.batteryStatus))
statuses.push(batteryStatusStr) statuses.push(batteryStatusStr)
} }
if (markerData.fenceStatus !== 0) {
if (markerData.fenceStatus === 1) {
const fenceStatusStr = getStatusMapping('fenceStatus', String(markerData.fenceStatus)) const fenceStatusStr = getStatusMapping('fenceStatus', String(markerData.fenceStatus))
fenceStatusStr && statuses.push(fenceStatusStr) fenceStatusStr && statuses.push(fenceStatusStr)
} }
// 检查各种状态 // 检查各种状态
const onlineStatus = String(markerData.onlineStatus) === '0' ? 'offline' : null
const onlineStatus = String(markerData.onlineStatus) !== '1' ? 'offline' : null
if (onlineStatus) { if (onlineStatus) {
statuses.push(onlineStatus) statuses.push(onlineStatus)
} }
@ -75,6 +75,8 @@ export const getHighestPriorityStatus = (markerData: {
export const getStatusColor = (status: string | keyof typeof STATUS_PRIORITY): string => { export const getStatusColor = (status: string | keyof typeof STATUS_PRIORITY): string => {
if (status === 'normal') return '#67c23a' if (status === 'normal') return '#67c23a'
if (status === 'offline') return STATUS_DICT.onlineStatus[0].cssClass if (status === 'offline') return STATUS_DICT.onlineStatus[0].cssClass
// 安全校验,确保状态字符串格式正确
if (!status.includes('_')) return ''
const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string] const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string]
const info = findStatusInfo(STATUS_DICT[type], value) const info = findStatusInfo(STATUS_DICT[type], value)
@ -87,6 +89,8 @@ export const getStatusColor = (status: string | keyof typeof STATUS_PRIORITY): s
export const getStatusLabel = (status: string | keyof typeof STATUS_PRIORITY): string => { export const getStatusLabel = (status: string | keyof typeof STATUS_PRIORITY): string => {
if (status === 'normal') return '正常' if (status === 'normal') return '正常'
if (status === 'offline') return STATUS_DICT.onlineStatus[0].label if (status === 'offline') return STATUS_DICT.onlineStatus[0].label
// 安全校验,确保状态字符串格式正确
if (!status.includes('_')) return ''
const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string] const [type, value] = status.split('_') as [keyof typeof STATUS_DICT, string]
const info = findStatusInfo(STATUS_DICT[type], value) const info = findStatusInfo(STATUS_DICT[type], value)

4
web/src/views/HandDevice/Home/index.vue

@ -56,11 +56,11 @@
<el-button <el-button
type="success" type="success"
size="small" size="small"
v-if="item.latitude && item.longitude"
v-show="item.latitude && item.longitude"
@click="setCenter(item)" @click="setCenter(item)"
>定位</el-button >定位</el-button
> >
<el-button v-hasPermi="['gas:hand-td:HistoricalSn']" type="success" size="small" @click="onClickTrajectory(item)"
<el-button v-show="item.latitude && item.longitude" v-hasPermi="['gas:hand-td:HistoricalSn']" type="success" size="small" @click="onClickTrajectory(item)"
>轨迹</el-button >轨迹</el-button
> >
</div> </div>

Loading…
Cancel
Save