|
|
|
@ -2,7 +2,9 @@ |
|
|
|
<el-dialog |
|
|
|
:title="dialogTitle" |
|
|
|
:visible.sync="dialogVisible" |
|
|
|
width="1100px" |
|
|
|
width="88%" |
|
|
|
top="4vh" |
|
|
|
custom-class="trajectory-dialog" |
|
|
|
append-to-body |
|
|
|
@open="handleOpen" |
|
|
|
@close="handleClose" |
|
|
|
@ -68,13 +70,25 @@ |
|
|
|
</el-radio-group> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="trajectory-map-shell" v-loading="loading || mapLoading"> |
|
|
|
<div |
|
|
|
class="trajectory-map-shell" |
|
|
|
v-loading="loading || mapLoading" |
|
|
|
:style="{ minHeight: mapPanelHeight + 'px' }" |
|
|
|
> |
|
|
|
<el-empty |
|
|
|
v-if="!loading && !mapLoading && !loadError && !trajectoryPoints.length" |
|
|
|
:description="$t('device.trajectory.empty')" |
|
|
|
:image-size="88" |
|
|
|
/> |
|
|
|
<div v-show="!loadError && trajectoryPoints.length" ref="map" class="trajectory-map"></div> |
|
|
|
<div |
|
|
|
v-show="!loadError && trajectoryPoints.length" |
|
|
|
ref="map" |
|
|
|
class="trajectory-map" |
|
|
|
:style="{ height: mapPanelHeight + 'px' }" |
|
|
|
></div> |
|
|
|
<div v-show="!loadError && trajectoryPoints.length" class="trajectory-map-disclaimer"> |
|
|
|
{{ $t("device.trajectory.message.disclaimer") || "Non-real-time location data, for reference only" }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
|
|
|
|
@ -84,7 +98,7 @@ |
|
|
|
:description="$t('device.trajectory.empty')" |
|
|
|
:image-size="88" |
|
|
|
/> |
|
|
|
<el-table v-else :data="trajectoryPoints" border size="mini" max-height="420" class="trajectory-table"> |
|
|
|
<el-table v-else :data="trajectoryPoints" border size="mini" :max-height="tableMaxHeight" class="trajectory-table"> |
|
|
|
<el-table-column label="#" type="index" width="60" align="center" /> |
|
|
|
<el-table-column :label="$t('device.trajectory.table.time')" min-width="100" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
@ -170,6 +184,7 @@ export default { |
|
|
|
mapsApi: null, |
|
|
|
mapConfig: null, |
|
|
|
locationTimeRange: [], |
|
|
|
viewportHeight: typeof window !== "undefined" ? window.innerHeight : 900, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -196,9 +211,16 @@ export default { |
|
|
|
hasMaptilerKey() { |
|
|
|
return !!(this.mapConfig && this.mapConfig.maptilerKey); |
|
|
|
}, |
|
|
|
mapPanelHeight() { |
|
|
|
return Math.min(460, Math.max(280, this.viewportHeight - 640)); |
|
|
|
}, |
|
|
|
tableMaxHeight() { |
|
|
|
return Math.min(420, Math.max(220, this.viewportHeight - 660)); |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async handleOpen() { |
|
|
|
this.bindViewportResize(); |
|
|
|
this.activePanel = "map"; |
|
|
|
this.initDefaultLocationTimeRange(); |
|
|
|
if (!this.device || !this.device.id) { |
|
|
|
@ -217,6 +239,7 @@ export default { |
|
|
|
await this.renderCurrentProviderMap(); |
|
|
|
}, |
|
|
|
handleClose() { |
|
|
|
this.unbindViewportResize(); |
|
|
|
this.destroyMap(true); |
|
|
|
this.activePanel = "map"; |
|
|
|
this.mapProvider = "amap"; |
|
|
|
@ -226,6 +249,29 @@ export default { |
|
|
|
this.mapConfig = null; |
|
|
|
this.locationTimeRange = []; |
|
|
|
}, |
|
|
|
bindViewportResize() { |
|
|
|
this.handleViewportResize(); |
|
|
|
if (typeof window !== "undefined") { |
|
|
|
window.addEventListener("resize", this.handleViewportResize); |
|
|
|
} |
|
|
|
}, |
|
|
|
unbindViewportResize() { |
|
|
|
if (typeof window !== "undefined") { |
|
|
|
window.removeEventListener("resize", this.handleViewportResize); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleViewportResize() { |
|
|
|
if (typeof window !== "undefined") { |
|
|
|
this.viewportHeight = window.innerHeight || 900; |
|
|
|
} |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.mapVendor === "leaflet" && this.map && typeof this.map.invalidateSize === "function") { |
|
|
|
this.map.invalidateSize(); |
|
|
|
} else if (this.mapVendor === "amap" && this.map && typeof this.map.resize === "function") { |
|
|
|
this.map.resize(); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
async handlePanelChange() { |
|
|
|
if (this.activePanel !== "map" || !this.trajectoryPoints.length) { |
|
|
|
return; |
|
|
|
@ -1102,7 +1148,7 @@ if (path.length > 1) { |
|
|
|
} |
|
|
|
|
|
|
|
.trajectory-tabs { |
|
|
|
margin-top: 12px; |
|
|
|
margin-top: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.trajectory-toolbar { |
|
|
|
@ -1114,7 +1160,8 @@ if (path.length > 1) { |
|
|
|
} |
|
|
|
|
|
|
|
.trajectory-map-shell { |
|
|
|
min-height: 420px; |
|
|
|
position: relative; |
|
|
|
min-height: 280px; |
|
|
|
border: 1px solid #ebeef5; |
|
|
|
border-radius: 8px; |
|
|
|
overflow: hidden; |
|
|
|
@ -1123,6 +1170,40 @@ if (path.length > 1) { |
|
|
|
|
|
|
|
.trajectory-map { |
|
|
|
width: 100%; |
|
|
|
height: 420px; |
|
|
|
height: 280px; |
|
|
|
} |
|
|
|
|
|
|
|
.trajectory-map-disclaimer { |
|
|
|
position: absolute; |
|
|
|
right: 12px; |
|
|
|
bottom: 10px; |
|
|
|
z-index: 6000; |
|
|
|
pointer-events: none; |
|
|
|
font-size: 12px; |
|
|
|
line-height: 1.3; |
|
|
|
color: #1f2d3d; |
|
|
|
background: rgba(255, 255, 255, 0.92); |
|
|
|
border: 1px solid #d7dee8; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 4px 10px; |
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .trajectory-dialog { |
|
|
|
margin-top: 4vh !important; |
|
|
|
margin-bottom: 4vh; |
|
|
|
max-height: 90vh; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .trajectory-dialog .el-dialog__body { |
|
|
|
max-height: calc(90vh - 120px); |
|
|
|
overflow: hidden; |
|
|
|
padding-top: 10px; |
|
|
|
padding-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .trajectory-dialog .el-dialog__footer { |
|
|
|
padding-top: 10px; |
|
|
|
padding-bottom: 14px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
