@idmwx/idmui-mapbox3
Version:
idm mapbox 3
1,243 lines • 246 kB
JavaScript
import ie from "mapbox-gl";
import { MapboxHelper as Ms, MapboxGL as Os } from "@idmwx/idmui-gl3";
import { openBlock as h, createElementBlock as f, createElementVNode as l, resolveComponent as R, normalizeStyle as me, Fragment as B, renderList as j, toDisplayString as r, createCommentVNode as I, normalizeClass as V, createVNode as C, withCtx as z, createBlock as J, mergeProps as Y, createTextVNode as X, withModifiers as se, withDirectives as ye, vShow as ve, shallowRef as Ds } from "vue";
import { ElScrollbar as et, ElProgress as As } from "element-plus";
import E from "moment";
import { CompanyHelper as Es, VoyageHelper as Q, VoyageTagKey as Ye } from "@idm-plugin/tag";
import { CaretBottom as Is, CaretRight as Vs, Delete as Ns, Filter as Ws, AlarmClock as vs, Search as ys } from "@element-plus/icons-vue";
import q from "axios";
import { LngLatHelper as F, AisHelper as Hs, LaneHelper as le } from "@idm-plugin/geo";
import * as pe from "echarts";
import * as $ from "@turf/turf";
const K = (t, e) => {
const n = t.__vccOpts || t;
for (const [o, s] of e)
n[o] = s;
return n;
}, zs = {
name: "MapInitial",
props: {
center: {
type: Object,
default: () => ({})
},
token: {
type: String,
default: ""
}
},
emits: ["initialized"],
data() {
return {
helper: void 0,
map: void 0,
lngLat: void 0,
marker: void 0
};
},
watch: {
center: {
handler() {
this.$nextTick(() => {
var e, n, o, s, i;
((n = (e = this.center) == null ? void 0 : e.position) == null ? void 0 : n.length) === 2 && ((o = this.center) != null && o.flyTo) && ((i = this.map) == null || i.flyTo({ center: (s = this.center) == null ? void 0 : s.position }));
const t = document.getElementById("center-marker");
this.marker = new ie.Marker(t).setLngLat([this.center.position[0], this.center.position[1]]).addTo(this.map), this.marker._element.style.display = "block";
});
},
deep: !0
}
// token: {
// handler() {
// if (this.token) {
// this.initMap()
// }
// },
// },
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.helper = new Ms(this.token), ie.accessToken = "pk.eyJ1IjoibmVhdGNoZW5oZW5nIiwiYSI6ImNsdXM3cnBmODBsemgycW1vaXc1bjV6bXMifQ.w6fqHGRbhNhLvm0LnX4ZVw";
const t = new ie.Map({
container: "map",
// style: 'mapbox://styles/neatchenheng/clxwst0tq00wd01rn0usb2eer',
style: {
version: 8,
name: "idm-mapbox-gl3",
lights: [],
fog: {
color: "#ffffff",
range: [0.5, 10],
"high-color": "#245cdf",
"space-color": ["interpolate", ["linear"], ["zoom"], 4, "#010b19", 7, "#367ab9"],
"horizon-blend": ["interpolate", ["linear"], ["zoom"], 4, 0.2, 7, 0.1],
"star-intensity": ["interpolate", ["linear"], ["zoom"], 5, 0.35, 6, 0]
// 'vertical-range': [0, 0],
},
bearing: 0,
pitch: 1,
sprite: "https://fontnik.idmwx.com/sprite/sprite",
glyphs: "https://fontnik.idmwx.com/{fontstack}/{range}.pbf",
projection: {
name: "equirectangular"
},
sources: {
composite: this.helper.mapboxCustomer.source,
i4: this.helper.i4.source,
hi: this.helper.hi.source
},
layers: [
this.helper.mapboxCustomer.layers.water,
this.helper.mapboxCustomer.layers.waterDeplth,
this.helper.i4.layer,
this.helper.hi.layer,
this.helper.mapboxCustomer.layers.countryBoundary,
this.helper.mapboxCustomer.layers.countryAdmin0Boundary,
this.helper.mapboxCustomer.layers.countryAdmin0BoundaryDisputed,
this.helper.mapboxCustomer.layers.countryLabel,
this.helper.mapboxCustomer.layers.world12nm,
this.helper.mapboxCustomer.layers.worldMarineLine,
this.helper.mapboxCustomer.layers.worldMarineLabel,
this.helper.mapboxCustomer.layers.chinaRouteLine,
this.helper.mapboxCustomer.layers.chinaRouteFill,
this.helper.mapboxCustomer.layers.chinaRouteLabel
// this.helper.mapboxCustomer.layers.iceEdgeLine,
]
},
zoom: 2,
minZoom: 0,
maxZoom: 16,
center: [120, 30],
maxBounds: [
[-720, -85],
[720, 85]
],
preserveDrawingBuffer: !0,
projection: "mercator",
attributionControl: !1
});
t.on("load", () => {
this.map = t, this.$emit("initialized", this.map), this.initControl();
});
},
initControl() {
var e;
const t = new ie.ScaleControl({
maxWidth: 80,
unit: "imperial"
});
(e = this.map) == null || e.addControl(t), t.setUnit("metric");
},
handleAddMarker(t) {
t.addTo(this.map);
}
}
}, Fs = { class: "initial-map-box" };
function Ps(t, e, n, o, s, i) {
return h(), f("div", Fs, e[0] || (e[0] = [
l("div", { id: "map" }, null, -1),
l("div", { id: "center-marker" }, null, -1)
]));
}
const bs = /* @__PURE__ */ K(zs, [["render", Ps], ["__scopeId", "data-v-62e37626"]]), Bs = function(t) {
typeof t == "string" && (t = Number(t));
let e;
switch (t) {
case 7:
e = "Sun";
break;
case 1:
e = "Mon";
break;
case 2:
e = "Tue";
break;
case 3:
e = "Wed";
break;
case 4:
e = "Thu";
break;
case 5:
e = "Fri";
break;
case 6:
e = "Sat";
break;
default:
e = "-";
}
return e;
};
const Gs = {
name: "MapTimeline",
components: {
ElScrollbar: et
},
props: {
realTime: {
type: Object
},
startDate: {
type: Object,
default: () => E().add(-14, "day")
},
endDate: {
type: Object,
default: () => E().add(13, "day")
},
reset: {
type: Number,
default: 0
},
interval: {
type: Number,
default: 3
},
bottom: {
type: Number,
default: 0
},
top: {
type: Number,
default: void 0
}
},
emits: ["realTime", "dateChange", "timeZone", "startTs"],
data() {
return {
hours: 0,
paused: !0,
animation: void 0,
resetTime: !1,
startTime: 0,
progress: 0,
step: 0,
frequency: 1e3,
//ms
showTimezone: !1,
timeZone: 0,
hourOptions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
offsets: [-12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
};
},
computed: {
dates() {
const t = [];
if (this.startDate && this.endDate) {
const e = this.startDate.clone().utc().set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
for (; e.isSameOrBefore(this.endDate); )
t.push(e.clone()), e.add(1, "day");
}
return t;
},
computeTotalHours() {
var e;
return ((e = this.computeOffsetEndDate) == null ? void 0 : e.diff(this.computeOffsetStartDate, "h", !0)) + 24 || 1;
},
computeOffsetStartDate() {
return this.$emit("startTs", E(this.dates[0]).format()), this.dates[0];
},
computeOffsetEndDate() {
return this.dates[this.dates.length - 1];
},
computeDate() {
return function(t) {
return `${t == null ? void 0 : t.utc().format("MMM-DD")} ${Bs(t == null ? void 0 : t.utc().format("E"))}`;
};
},
totalDays() {
return Math.ceil(this.computeTotalHours / 24);
},
defaultDays() {
return this.totalDays < 7 ? this.totalDays : 7;
},
computedHourWidth() {
return Math.ceil((document.body.clientWidth - 220) / (this.defaultDays * 24));
},
computedLocalTime() {
return E(this.realTime).utc().add(this.timeZone, "h").format("yyyy-MM-DD/HHmm");
},
computedStep() {
return function(t) {
return t % this.interval === (this.timeZone + 12) % this.interval;
};
}
},
watch: {
hours: {
handler() {
var s, i, d, c, a;
const t = (s = this.computeOffsetStartDate) == null ? void 0 : s.clone().add(this.hours - this.timeZone, "h");
this.$emit("realTime", t);
const e = document.documentElement.clientWidth - ((i = document.getElementsByClassName("buttons")[0]) == null ? void 0 : i.clientWidth), n = (a = (c = (d = this.$refs.scrollBar) == null ? void 0 : d.$el) == null ? void 0 : c.firstChild) == null ? void 0 : a.scrollLeft, o = this.hours * this.computedHourWidth;
o < (e - 220) / 2 ? this.$refs.scrollBar.setScrollLeft(0) : o >= (e - 220) / 2 + n && this.$refs.scrollBar.setScrollLeft(n + this.computedHourWidth * this.interval);
}
},
step: {
handler() {
this.hours >= this.computeTotalHours ? this.pause() : this.step >= 0 && (this.hours += this.interval);
}
},
reset: {
handler() {
this.reset && this.handleReset();
}
}
},
mounted() {
this.timeZone = Number(localStorage.getItem("timeZone")) || 0, this.$emit("timeZone", this.timeZone), this.handleReset();
},
methods: {
pause() {
this.animation && cancelAnimationFrame(this.animation), this.paused = !0;
},
resume() {
this.resetTime = !0, this.paused = !1, this.animateSpeeds();
},
animateSpeeds(t) {
this.resetTime ? (this.startTime = performance.now() - this.progress, this.resetTime = !1) : this.progress = t - this.startTime, this.step = Math.floor(this.progress / this.frequency), this.animation = requestAnimationFrame(this.animateSpeeds);
},
handleJump(t, e) {
if (t > this.computeTotalHours)
return !1;
t = t < 0 ? 0 : t, e ? this.hours = t : this.hours = Math.ceil((t - (this.timeZone + 12) % this.interval) / this.interval) * this.interval + (this.timeZone + 12) % this.interval;
},
handleClickHourText(t) {
},
handleReset() {
this.pause(), this.resetTime = !0, this.startTime = 0, this.progress = 0, this.realTime ? this.hours = Math.ceil(this.realTime.diff(this.computeOffsetStartDate, "hour", !0) + this.timeZone) : this.hours = Math.ceil(E().diff(this.computeOffsetStartDate, "hour", !0) + this.timeZone), setTimeout(() => {
var e;
const t = Math.ceil(this.hours / 24) - Math.floor(this.defaultDays / 2);
(e = this.$refs.scrollBar) == null || e.setScrollLeft(this.computedHourWidth * 24 * t - this.computedHourWidth * (this.hours % 24));
}, 500);
},
setTimezone(t) {
this.timeZone = t, this.$emit("timeZone", this.timeZone), localStorage.setItem("timeZone", this.timeZone), this.showTimezone = !1, this.handleReset();
}
}
}, Us = { class: "timezone" }, Zs = {
key: 0,
class: "list"
}, $s = ["onClick"], js = {
class: "flex-start",
style: { "box-shadow": "0px 2px 12px 0px rgba(0, 0, 0, 0.5)" }
}, qs = { class: "flex-col-between-center" }, Js = { class: "buttons flex-row-end-center" }, Xs = { class: "timeline" }, Qs = {
key: 0,
class: "day"
}, Ks = { class: "date flex-row-center-end" }, Ys = { class: "hours flex-row-start-center" }, el = ["onClick"];
function tl(t, e, n, o, s, i) {
const d = R("ElScrollbar");
return h(), f("div", {
ref: "mapTimeline",
class: "map-timeline-container",
style: me({ bottom: n.bottom + "px" })
}, [
l("div", Us, [
s.showTimezone ? (h(), f("div", Zs, [
(h(!0), f(B, null, j(s.offsets, (c) => (h(), f("div", {
key: c,
class: "item",
onClick: (a) => i.setTimezone(c)
}, r(c < 0 ? c : "+" + c), 9, $s))), 128))
])) : I("", !0),
l("div", {
class: "btn",
onClick: e[0] || (e[0] = (c) => s.showTimezone = !s.showTimezone)
}, "UTC " + r(s.timeZone < 0 ? s.timeZone : "+" + s.timeZone), 1)
]),
l("div", js, [
l("div", qs, [
l("div", Js, [
l("div", {
class: V(s.hours - n.interval < 0 ? "iconfont button disable" : "iconfont button"),
style: { transform: "rotate(180deg)" },
onClick: e[1] || (e[1] = (c) => i.handleJump(s.hours - n.interval, !0))
}, " ", 2),
s.paused ? (h(), f("div", {
key: 0,
class: "iconfont button play",
onClick: e[2] || (e[2] = (...c) => i.resume && i.resume(...c))
}, "")) : (h(), f("div", {
key: 1,
class: "iconfont button play",
onClick: e[3] || (e[3] = (...c) => i.pause && i.pause(...c))
}, "")),
l("div", {
class: V(s.hours + n.interval > i.computeTotalHours ? "iconfont button disable" : "iconfont button"),
onClick: e[4] || (e[4] = (c) => i.handleJump(s.hours + n.interval, !0))
}, " ", 2)
])
]),
C(d, {
ref: "scrollBar",
class: "progress-box"
}, {
default: z(() => [
l("div", Xs, [
(h(!0), f(B, null, j(i.computeTotalHours, (c, a) => {
var p;
return h(), f(B, { key: c }, [
a % 24 === 0 ? (h(), f("div", Qs, [
l("div", Ks, r(i.computeDate((p = i.computeOffsetStartDate) == null ? void 0 : p.clone().add(c, "h"))), 1),
e[6] || (e[6] = l("div", { style: { width: "2px", height: "50px", "background-color": "var(--idm-black-1)", position: "relative", "margin-top": "-50px", left: "-1px", "z-index": "3" } }, null, -1)),
l("div", Ys, [
(h(!0), f(B, null, j(s.hourOptions, (m) => (h(), f("div", {
key: c + "-" + m,
class: V(c + m <= s.hours ? "hour-bg active" : "hour-bg"),
style: me({ width: i.computedHourWidth + "px" }),
onClick: (u) => i.handleJump(c + m)
}, [
l("div", {
class: V(["hour", c + m <= s.hours ? "active" : "", i.computedStep(m + 1) ? "step" : ""])
}, [
i.computedStep(m) ? (h(), f("span", {
key: 0,
class: "text",
style: me({ marginLeft: i.computedHourWidth * -1 + "px" }),
onClick: e[5] || (e[5] = (...u) => i.handleClickHourText && i.handleClickHourText(...u))
}, r(m < 10 ? "0" + m : m), 5)) : I("", !0)
], 2)
], 14, el))), 128))
])
])) : I("", !0)
], 64);
}), 128))
])
]),
_: 1
}, 512)
])
], 4);
}
const xs = /* @__PURE__ */ K(Gs, [["render", tl], ["__scopeId", "data-v-5edeeab1"]]);
const sl = {
name: "MapMeteo",
components: {
MapboxGL: Os
},
props: {
token: {
type: String,
default: ""
},
permission: {
type: Number,
default: 0
},
map: {
type: Object,
default: void 0
},
forecastModel: {
type: String
}
},
emits: ["measurable"],
data() {
return {
showPointRpt: !1,
pointQuery: {}
};
},
methods: {
handleMore(t) {
this.pointQuery = { ...t, d: 7, st: 6 };
},
handleMeasurableChange(t) {
this.$emit("measurable", t);
}
}
}, ll = { class: "meteo-gl" };
function il(t, e, n, o, s, i) {
const d = R("MapboxGL");
return h(), f("div", ll, [
n.map ? (h(), J(d, Y({
key: 0,
ref: "mapboxGl3",
map: n.map,
token: n.token,
permission: n.permission,
forecastModel: n.forecastModel
}, t.$attrs), null, 16, ["map", "token", "permission", "forecastModel"])) : I("", !0)
]);
}
const _s = /* @__PURE__ */ K(sl, [["render", il]]);
const nl = {
name: "VoyageFleet",
components: { ElScrollbar: et, CaretBottom: Is, CaretRight: Vs, Delete: Ns, ViewFilter: Ws },
props: {
permission: {
type: Number,
default: void 0
},
token: {
type: String
},
voyageId: {
type: String,
default: void 0
},
voyageVersion: {
type: Number,
default: 0
},
route: {
type: Object,
default: void 0
},
weights: {
type: Object,
default: void 0
},
voyageToggle: {
type: Boolean,
default: !1
},
toggleVersion: {
type: Number,
default: 0
},
isLogin: {
type: Boolean,
default: void 0
}
},
emits: ["login", "update", "select", "voyageToggle", "hide", "toggleVersion", "handlePort", "handleCoord", "handleOtherVessel", "handleCloseAll"],
data() {
return {
right: 10,
listQuery: {
vid: void 0,
id: void 0,
smp: !0,
pid: void 0,
pn: 1,
ps: 500
},
model: "inService",
activeStatus: "Underway",
filterVersion: 0,
voyageList: [],
followList: [],
filterList: [],
total: 0,
voyage: void 0,
hide: !1,
items: [],
placeholder: "Name/IMO",
keyword: void 0,
gateway: "https://cbe.idmwx.com",
CompanyHelper: Es,
showAlertCheckbox: !1,
alertTagList: [],
alertOption: {
weather: Q.WEATHER_TAG,
sailing: Q.SAILING_TAG
},
checkParams: {
weather: {
checkAll: !1,
isIndeterminate: !1
},
sailing: {
checkAll: !1,
isIndeterminate: !1
}
}
};
},
computed: {
computePosition() {
return function(t) {
return t ? F.lat2pretty(t == null ? void 0 : t.lat, 2).pretty + " / " + F.lng2pretty(t == null ? void 0 : t.lng, 2).pretty : "-";
};
}
},
watch: {
"route.query.vid": {
handler() {
var t, e;
(e = (t = this.route) == null ? void 0 : t.query) != null && e.vid ? this.handleVoyageIdChange() : (this.fetchMyActiveVoyage(), this.fetchMyFollows());
},
immediate: !0
},
voyageToggle: {
handler() {
this.voyageToggle && (this.model = "inService", this.fetchMyFollows());
}
},
filterVersion: {
handler() {
var t, e;
if (this.model === "inService") {
let n = [];
((t = this.alertTagList) == null ? void 0 : t.length) > 0 ? n = this.voyageList.filter((o, s) => this.alertTagList.some((i) => o.tag & i)) : n = this.voyageList, this.keyword ? this.filterList = n.filter((o, s) => {
var u, v, k, L, S, b, T, N, g, _, D, w, A, M, W, y, P;
const i = (u = this.keyword) == null ? void 0 : u.toLowerCase().replace(/\s/g, ""), d = (L = (k = (v = o == null ? void 0 : o.vessel) == null ? void 0 : v.name) == null ? void 0 : k.toLowerCase()) == null ? void 0 : L.replace(/\s/g, ""), c = (T = (b = (S = o.company) == null ? void 0 : S.name) == null ? void 0 : b.toLowerCase()) == null ? void 0 : T.replace(/\s/g, ""), a = (D = (_ = (g = (N = o == null ? void 0 : o.vessel) == null ? void 0 : N.imo) == null ? void 0 : g.toString()) == null ? void 0 : _.toLowerCase()) == null ? void 0 : D.replace(/\s/g, ""), p = (M = (A = (w = o == null ? void 0 : o.pic) == null ? void 0 : w.email) == null ? void 0 : A.toLowerCase()) == null ? void 0 : M.replace(/\s/g, ""), m = (P = (y = (W = o == null ? void 0 : o.pic2) == null ? void 0 : W.email) == null ? void 0 : y.toLowerCase()) == null ? void 0 : P.replace(/\s/g, "");
return this.permission & this.CompanyHelper.LEVEL.Prime ? (d == null ? void 0 : d.indexOf(i)) > -1 || (c == null ? void 0 : c.indexOf(i)) > -1 || (a == null ? void 0 : a.indexOf(i)) > -1 || (p == null ? void 0 : p.indexOf(i)) > -1 || (m == null ? void 0 : m.indexOf(i)) > -1 : (d == null ? void 0 : d.indexOf(i)) > -1 || (a == null ? void 0 : a.indexOf(i)) > -1;
}) : this.filterList = n, this.total = (e = this.voyageList) == null ? void 0 : e.length, this.$nextTick(() => {
this.filterList.some((o) => o.status === "Underway") ? this.activeStatus = "Underway" : this.filterList.some((o) => o.status === "Reached") ? this.activeStatus = "Reached" : this.filterList.some((o) => o.status === "Ready") ? this.activeStatus = "Ready" : this.activeStatus = "";
}), this.$emit("update", this.filterList);
} else
this.keyword ? this.filterList = this.followList.filter((n, o) => {
var u, v, k, L, S, b, T, N, g, _, D, w, A, M, W, y, P;
const s = (u = this.keyword) == null ? void 0 : u.toLowerCase().replace(/\s/g, ""), i = (L = (k = (v = n == null ? void 0 : n.vessel) == null ? void 0 : v.name) == null ? void 0 : k.toLowerCase()) == null ? void 0 : L.replace(/\s/g, ""), d = (N = (T = (b = (S = n == null ? void 0 : n.vessel) == null ? void 0 : S.imo) == null ? void 0 : b.toString()) == null ? void 0 : T.toLowerCase()) == null ? void 0 : N.replace(/\s/g, ""), c = this.voyageList.find((G) => {
var O;
return G.id === ((O = n.voyage) == null ? void 0 : O.id);
}), a = (D = (_ = (g = c == null ? void 0 : c.company) == null ? void 0 : g.name) == null ? void 0 : _.toLowerCase()) == null ? void 0 : D.replace(/\s/g, ""), p = (M = (A = (w = c == null ? void 0 : c.pic) == null ? void 0 : w.email) == null ? void 0 : A.toLowerCase()) == null ? void 0 : M.replace(/\s/g, ""), m = (P = (y = (W = c == null ? void 0 : c.pic2) == null ? void 0 : W.email) == null ? void 0 : y.toLowerCase()) == null ? void 0 : P.replace(/\s/g, "");
return this.permission & this.CompanyHelper.LEVEL.Prime ? (i == null ? void 0 : i.indexOf(s)) > -1 || (a == null ? void 0 : a.indexOf(s)) > -1 || (d == null ? void 0 : d.indexOf(s)) > -1 || (p == null ? void 0 : p.indexOf(s)) > -1 || (m == null ? void 0 : m.indexOf(s)) > -1 : (i == null ? void 0 : i.indexOf(s)) > -1 || (d == null ? void 0 : d.indexOf(s)) > -1;
}) : this.filterList = this.followList, this.total = this.followList.length, this.$emit("update", this.filterList);
},
immediate: !0
},
model: {
handler() {
this.filterVersion = Math.random(), this.model === "myFollows" && this.fetchMyFollows(), this.voyage = {}, this.$emit("select", this.voyage);
}
},
keyword: {
handler() {
this.filterVersion = Math.random();
},
immediate: !0
},
voyageVersion: {
handler() {
if (this.voyageId) {
let t = 0;
this.filterList.forEach((n, o) => {
n.id === this.voyageId && (this.voyage = n, t = o);
});
const e = document.getElementsByClassName("el-scrollbar")[0].firstChild;
e.scrollTop = (t - 10) * 42;
}
},
immediate: !0
},
toggleVersion: {
handler() {
this.$nextTick(() => {
var t;
this.right = (((t = document.getElementsByClassName("right-bar")[0]) == null ? void 0 : t.clientWidth) || 0) + 10;
});
},
deep: !0,
immediate: !0
},
hide: {
handler() {
this.hide || this.$emit("update", this.voyageList);
}
}
},
mounted() {
this.permission & this.CompanyHelper.LEVEL.Prime ? this.placeholder = "Name/IMO/Company/PIC" : this.placeholder = "Name/IMO";
},
methods: {
async handleVoyageIdChange() {
var n;
await this.fetchMyActiveVoyage(), this.$emit("voyageToggle", !1);
const t = this.voyageList.filter((o) => {
var s, i;
return o.id === ((i = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : i.vid);
})[0];
this.$emit("select", t);
const e = (n = t == null ? void 0 : t.vessel) == null ? void 0 : n.imo;
this.keyword = e + "";
},
async fetchMyActiveVoyage() {
var e, n, o, s;
const t = await q.get(`${this.gateway}/api/rsv/voyages/my/active`, {
headers: {
Authorization: this.token
},
params: this.listQuery
});
if (((e = t == null ? void 0 : t.data) == null ? void 0 : e.code) === 0) {
const i = Q.WEATHER_TAG, d = Q.SAILING_TAG;
this.voyageList = (s = (o = (n = t.data) == null ? void 0 : n.data) == null ? void 0 : o.rows) == null ? void 0 : s.map((c) => (c.weatherTag = i.some((a) => c.tag & a.weight), c.sailingTag = d.some((a) => c.tag & a.weight), c)), this.hide || this.$emit("update", this.voyageList), this.filterVersion = Math.random();
}
},
async fetchMyFollows() {
var e, n, o, s;
const t = await q.get(`${this.gateway}/api/rsv/follows`, {
headers: {
Authorization: this.token
},
params: { pn: 1, ps: 1e4, b: 1 }
});
if (((e = t == null ? void 0 : t.data) == null ? void 0 : e.code) === 0) {
const i = Q.WEATHER_TAG, d = Q.SAILING_TAG;
let c = 0;
this.followList = (s = (o = (n = t.data) == null ? void 0 : n.data) == null ? void 0 : o.rows) == null ? void 0 : s.map((a) => (a.weatherTag = i.some((p) => a.tag & p.weight), a.sailingTag = d.some((p) => a.tag & p.weight), a.watchedIndex = a.voyage ? void 0 : ++c, a.followed = !0, a)), this.filterVersion = Math.random();
}
},
handleFleetHide(t) {
this.hide = t, this.$emit("hide", t);
},
handleVoyageClick(t) {
this.$emit("handleCloseAll"), this.voyage = t, this.$emit("select", this.voyage);
},
handleRowClick(t) {
this.$emit("handleCloseAll"), t.voyage ? (this.voyage = this.voyageList.find((e) => {
var n;
return e.id === ((n = t.voyage) == null ? void 0 : n.id);
}), this.$emit("select", this.voyage)) : t.coordinate ? this.$emit("handleCoord", t.coordinate) : t.port ? this.$emit("handlePort", t.port) : t.vessel && this.$emit("handleOtherVessel", t.vessel);
},
handleToggleFollow(t) {
var e, n;
t.follow ? this.handleCancelFollow((n = t == null ? void 0 : t.follow) == null ? void 0 : n.id) : this.handleFollow((e = t == null ? void 0 : t.vessel) == null ? void 0 : e.id);
},
async handleFollow(t) {
await q.post(`${this.gateway}/api/rsv/follows`, { vesselId: t }, {
headers: {
Authorization: this.token
}
}).then((e) => {
var n, o, s, i, d;
((n = e.data) == null ? void 0 : n.code) === 0 && (this.fetchMyFollows(), this.voyageList.find((c) => {
var a;
return ((a = c == null ? void 0 : c.vessel) == null ? void 0 : a.id) === t;
}).follow = {
id: (o = e.data.data) == null ? void 0 : o.id,
voyageId: (s = e.data.data) == null ? void 0 : s.voyageId,
ownerId: (d = (i = e.data.data) == null ? void 0 : i.owner) == null ? void 0 : d.id
});
}), this.filterVersion = Math.random();
},
handleCancelFollow(t) {
q.delete(`${this.gateway}/api/rsv/follows/${t}`, {
headers: {
Authorization: this.token
}
}).then((e) => {
var n;
((n = e.data) == null ? void 0 : n.code) === 0 && (this.model === "inService" ? this.voyageList.find((o) => {
var s;
return ((s = o.follow) == null ? void 0 : s.id) === t;
}).follow = void 0 : (this.fetchMyActiveVoyage(), this.followList = this.followList.filter((o) => (o == null ? void 0 : o.id) !== t)), this.filterVersion = Math.random());
});
},
handleToggle() {
this.isLogin ? (this.$emit("voyageToggle", !this.voyageToggle), this.$emit("toggleVersion")) : this.$emit("login");
},
handleClose() {
this.$emit("voyageToggle", !1);
},
handleCheckAllChange(t, e) {
var n, o, s;
t ? ((o = (n = this.alertOption) == null ? void 0 : n[e]) == null || o.forEach((i) => {
this.alertTagList.push(i.weight);
}), this.alertTagList = [...new Set(this.alertTagList)]) : this.alertTagList = (s = this.alertTagList) == null ? void 0 : s.filter((i) => {
var d, c;
return !((c = (d = this.alertOption) == null ? void 0 : d[e]) != null && c.some((a) => i === a.weight));
}), this.checkParams[e].isIndeterminate = !1, this.filterVersion = Math.random();
},
handleCheckItemChange(t, e) {
var o, s, i;
const n = (o = t == null ? void 0 : t.filter((d) => this.alertOption[e].some((c) => d === c.weight))) == null ? void 0 : o.length;
this.checkParams[e].checkAll = n === ((s = this.alertOption[e]) == null ? void 0 : s.length), this.checkParams[e].isIndeterminate = n > 0 && n < ((i = this.alertOption[e]) == null ? void 0 : i.length), this.filterVersion = Math.random();
}
}
}, al = { class: "voyage-fleet-container" }, ol = { class: "header-box flex-space" }, rl = { style: { "font-size": "14px" } }, dl = { class: "switch-box flex-space" }, cl = { class: "search-box flex-between" }, hl = { class: "status-label flex-between" }, ul = { class: "flex-start" }, fl = ["onClick"], pl = { style: { "font-size": "14px", "font-weight": "400" } }, gl = {
key: 0,
class: "voyage-list"
}, ml = ["onClick"], yl = { class: "flex-start" }, vl = { class: "vessel-name" }, bl = {
key: 0,
class: "iconfont alert-icon"
}, xl = {
key: 1,
class: "iconfont alert-icon"
}, _l = ["onClick"], kl = {
key: 0,
class: "iconfont"
}, Ll = {
key: 1,
class: "iconfont"
}, wl = {
key: 1,
class: "voyage-list followed"
}, Cl = ["onClick"], Tl = {
key: 0,
class: "flex-space",
style: { height: "100%" }
}, Rl = { class: "flex-col-space-start" }, Sl = { class: "vessel-name" }, Ml = { class: "flex-start" }, Ol = {
key: 0,
class: "iconfont alert-icon"
}, Dl = {
key: 1,
class: "iconfont alert-icon"
}, Al = ["onClick"], El = {
key: 1,
class: "flex-space",
style: { height: "100%" }
}, Il = { class: "flex-col-space-start" }, Vl = { class: "vessel-name" }, Nl = ["onClick"], Wl = { class: "display-box" }, Hl = { style: { "pointer-events": "none" } }, zl = { class: "content-box" };
function Fl(t, e, n, o, s, i) {
var N;
const d = R("ElTooltip"), c = R("ElInput"), a = R("ViewFilter"), p = R("el-icon"), m = R("CaretBottom"), u = R("CaretRight"), v = R("ElScrollbar"), k = R("Delete"), L = R("el-checkbox"), S = R("el-checkbox-group"), b = R("ElDivider"), T = R("ElDialog");
return h(), f("div", al, [
l("div", {
class: "menu-bar-box",
style: me({ right: s.right + "px" })
}, [
C(d, {
placement: "left",
effect: "light",
content: "Fleet",
"show-after": 1e3
}, {
default: z(() => [
l("div", {
class: V(["toggle", n.voyageToggle ? "active" : ""]),
onClick: e[0] || (e[0] = (g) => i.handleToggle())
}, e[21] || (e[21] = [
l("i", { class: "iconfont" }, "", -1)
]), 2)
]),
_: 1
})
], 4),
l("div", {
class: "main-box flex-start",
style: me({ right: n.voyageToggle ? "0px" : "-290px" })
}, [
l("div", {
class: V(["active-voyages", n.voyageToggle ? "right-bar" : ""])
}, [
l("div", ol, [
l("label", null, [
e[22] || (e[22] = X("Fleets ")),
l("span", rl, " ( " + r(s.total) + " )", 1)
]),
l("div", {
class: "iconfont close-btn",
onClick: e[1] || (e[1] = (...g) => i.handleClose && i.handleClose(...g))
}, "")
]),
l("div", dl, [
l("div", {
class: V(s.model === "inService" ? "item active" : "item"),
onClick: e[2] || (e[2] = (g) => s.model = "inService")
}, "In Service", 2),
l("div", {
class: V(s.model === "myFollows" ? "item active" : "item"),
onClick: e[3] || (e[3] = (g) => s.model = "myFollows")
}, "My Follows", 2)
]),
l("div", cl, [
C(c, {
placeholder: s.placeholder,
modelValue: s.keyword,
"onUpdate:modelValue": e[4] || (e[4] = (g) => s.keyword = g),
class: "input",
style: { flex: "1" },
clearable: "",
onFocus: e[5] || (e[5] = (g) => s.placeholder = ""),
onBlur: e[6] || (e[6] = (g) => s.placeholder = "Name/IMO")
}, null, 8, ["placeholder", "modelValue"]),
s.model === "inService" ? (h(), J(p, {
key: 0,
onClick: e[7] || (e[7] = (g) => s.showAlertCheckbox = !0),
style: { width: "30px" },
color: (N = s.alertTagList) != null && N.length ? "var(--idm-primary-color)" : ""
}, {
default: z(() => [
C(a)
]),
_: 1
}, 8, ["color"])) : I("", !0)
]),
s.model === "inService" ? (h(), f(B, { key: 0 }, j(["Underway", "Reached", "Ready"], (g) => (h(), f(B, { key: g }, [
l("div", hl, [
l("div", ul, [
C(p, { class: "caret-btn" }, {
default: z(() => [
s.activeStatus === g ? (h(), J(m, {
key: 0,
onClick: e[8] || (e[8] = (_) => s.activeStatus = "")
})) : (h(), J(u, {
key: 1,
onClick: (_) => s.activeStatus = g
}, null, 8, ["onClick"]))
]),
_: 2
}, 1024),
l("label", {
onClick: (_) => s.activeStatus = s.activeStatus === "" ? g : ""
}, [
X(r(g) + " ", 1),
l("span", pl, " ( " + r(s.filterList.filter((_) => _.status === g).length) + " )", 1)
], 8, fl)
]),
g === "Underway" ? (h(), f("i", {
key: 0,
class: V(`iconfont icon ${g}`)
}, "", 2)) : I("", !0),
g === "Reached" ? (h(), f("i", {
key: 1,
class: V(`iconfont icon ${g}`)
}, "", 2)) : I("", !0),
g === "Ready" ? (h(), f("i", {
key: 2,
class: V(`iconfont icon ${g}`)
}, "", 2)) : I("", !0)
]),
s.activeStatus === g ? (h(), f("div", gl, [
C(v, null, {
default: z(() => [
(h(!0), f(B, null, j(s.filterList.filter((_) => _.status === g), (_) => {
var D, w;
return h(), f("div", {
key: _.id,
class: V(((D = s.voyage) == null ? void 0 : D.id) === _.id ? "flex-space voyage-item active" : "flex-space voyage-item"),
onClick: (A) => i.handleVoyageClick(_)
}, [
l("div", yl, [
l("span", vl, r((w = _.vessel) == null ? void 0 : w.name), 1),
_.weatherTag ? (h(), f("span", bl, "")) : I("", !0),
_.sailingTag ? (h(), f("span", xl, "")) : I("", !0)
]),
l("div", {
class: V(["follow-icons", _.follow ? "active" : ""]),
onClick: se((A) => i.handleToggleFollow(_), ["stop"])
}, [
_.follow ? (h(), f("span", kl, "")) : (h(), f("span", Ll, ""))
], 10, _l)
], 10, ml);
}), 128))
]),
_: 2
}, 1024)
])) : I("", !0)
], 64))), 64)) : (h(), f("div", wl, [
C(v, null, {
default: z(() => [
(h(!0), f(B, null, j(s.filterList, (g) => {
var _, D, w, A, M, W, y;
return h(), f("div", {
key: g.id || Math.random(),
class: V((_ = s.voyage) != null && _.id && ((D = s.voyage) == null ? void 0 : D.id) === ((w = g == null ? void 0 : g.voyage) == null ? void 0 : w.id) ? "voyage-item active" : "voyage-item"),
onClick: (P) => i.handleRowClick(g)
}, [
g.voyage ? (h(), f("div", Tl, [
l("div", Rl, [
l("div", Sl, r((A = g == null ? void 0 : g.vessel) == null ? void 0 : A.name), 1),
l("div", Ml, [
l("span", {
class: V(`status-tag ${(M = g == null ? void 0 : g.voyage) == null ? void 0 : M.status}`)
}, r((W = g == null ? void 0 : g.voyage) == null ? void 0 : W.status), 3),
g.weatherTag ? (h(), f("span", Ol, "")) : I("", !0),
g.sailingTag ? (h(), f("span", Dl, "")) : I("", !0)
])
]),
l("div", {
class: "follow-icons active",
onClick: se((P) => i.handleCancelFollow(g.id), ["stop"])
}, e[23] || (e[23] = [
l("span", { class: "iconfont" }, "", -1)
]), 8, Al)
])) : g != null && g.vessel ? (h(), f("div", El, [
l("div", Il, [
l("div", Vl, r((y = g == null ? void 0 : g.vessel) == null ? void 0 : y.name), 1),
e[24] || (e[24] = l("div", { class: "flex-start" }, [
l("span", { class: "status-tag vessel-tag" }, "Followed")
], -1))
]),
l("div", {
class: "delete-icons active",
onClick: se((P) => i.handleCancelFollow(g.id), ["stop"])
}, [
C(p, null, {
default: z(() => [
C(k)
]),
_: 1
})
], 8, Nl)
])) : I("", !0)
], 10, Cl);
}), 128))
]),
_: 1
})
])),
l("view", Wl, [
e[25] || (e[25] = l("span", { class: "text" }, "Display on the map", -1)),
s.hide ? (h(), f("span", {
key: 1,
class: "iconfont switch-off",
onClick: e[10] || (e[10] = (g) => i.handleFleetHide(!1))
}, "")) : (h(), f("span", {
key: 0,
class: "iconfont switch-on",
onClick: e[9] || (e[9] = (g) => i.handleFleetHide(!0))
}, ""))
])
], 2)
], 4),
l("div", Hl, [
C(T, {
modelValue: s.showAlertCheckbox,
"onUpdate:modelValue": e[20] || (e[20] = (g) => s.showAlertCheckbox = g),
title: "Vessel Under Alert",
width: "400",
class: "alert-checkbox-dialog",
draggable: !0,
"show-close": !1,
modal: !1,
"close-on-click-modal": !1
}, {
default: z(() => [
l("div", {
class: "iconfont close-btn",
onClick: e[11] || (e[11] = (g) => s.showAlertCheckbox = !1)
}, ""),
l("div", zl, [
C(L, {
modelValue: s.checkParams.weather.checkAll,
"onUpdate:modelValue": e[12] || (e[12] = (g) => s.checkParams.weather.checkAll = g),
indeterminate: s.checkParams.weather.isIndeterminate,
onChange: e[13] || (e[13] = (g) => i.handleCheckAllChange(g, "weather"))
}, {
default: z(() => e[26] || (e[26] = [
l("span", { class: "title" }, "Adverse Weather Alert", -1),
l("span", { class: "iconfont alert-icon" }, "", -1)
])),
_: 1,
__: [26]
}, 8, ["modelValue", "indeterminate"]),
C(S, {
modelValue: s.alertTagList,
"onUpdate:modelValue": e[14] || (e[14] = (g) => s.alertTagList = g),
onChange: e[15] || (e[15] = (g) => i.handleCheckItemChange(g, "weather"))
}, {
default: z(() => [
(h(!0), f(B, null, j(s.alertOption.weather, (g) => {
var _, D;
return h(), J(L, {
label: (D = (_ = g.name) == null ? void 0 : _.split(" ")) == null ? void 0 : D[2],
value: g.weight
}, null, 8, ["label", "value"]);
}), 256))
]),
_: 1
}, 8, ["modelValue"]),
C(b, { style: { margin: "5px 0", "border-top": "none" } }),
C(L, {
modelValue: s.checkParams.sailing.checkAll,
"onUpdate:modelValue": e[16] || (e[16] = (g) => s.checkParams.sailing.checkAll = g),
indeterminate: s.checkParams.sailing.isIndeterminate,
onChange: e[17] || (e[17] = (g) => i.handleCheckAllChange(g, "sailing"))
}, {
default: z(() => e[27] || (e[27] = [
l("span", { class: "title" }, "Sailing Alert", -1),
l("span", { class: "iconfont alert-icon" }, "", -1)
])),
_: 1,
__: [27]
}, 8, ["modelValue", "indeterminate"]),
C(S, {
modelValue: s.alertTagList,
"onUpdate:modelValue": e[18] || (e[18] = (g) => s.alertTagList = g),
onChange: e[19] || (e[19] = (g) => i.handleCheckItemChange(g, "sailing"))
}, {
default: z(() => [
(h(!0), f(B, null, j(s.alertOption.sailing, (g) => (h(), J(L, {
label: g.name,
value: g.weight
}, null, 8, ["label", "value"]))), 256))
]),
_: 1
}, 8, ["modelValue"])
])
]),
_: 1
}, 8, ["modelValue"])
])
]);
}
const ks = /* @__PURE__ */ K(nl, [["render", Fl], ["__scopeId", "data-v-3a33559e"]]);
const Pl = {
name: "VoyageSummary",
components: {
ElProgress: As,
ElScrollbar: et,
AlarmClock: vs
},
props: {
voyage: {
type: Object,
default: void 0
},
leg: {
type: Object,
default: void 0
},
bps: {
type: Object,
default: void 0
},
permission: {
type: Number
},
cpList: {
type: Array,
default: void 0
}
},
emits: ["center"],
data() {
return {
rank: 1
};
},
computed: {
currentLeg() {
var t, e;
return (e = (t = this.voyage) == null ? void 0 : t.legs) == null ? void 0 : e.find((n) => n.rank === this.rank);
},
computeLat() {
return function(t) {
return `${F.lat2pretty(t, 2).pretty}`;
};
},
computeLng() {
return function(t) {
return `${F.lng2pretty(t, 2).pretty}`;
};
},
computeWayport() {
return function(t) {
return t != null && t.name ? `[${t.rank}] ${t == null ? void 0 : t.name}` : `[${t.rank}] ${F.lat2pretty(t == null ? void 0 : t.lat, 2).pretty},${F.lng2pretty(t == null ? void 0 : t.lng, 2).pretty}`;
};
},
computeLegProgress() {
return function(t) {
return t ? (t == null ? void 0 : t.sailingDistance) / ((t == null ? void 0 : t.sailingDistance) + (t == null ? void 0 : t.remainDistance)) * 100 : 0;
};
},
computeLocalTime() {
return function(t, e, n = "MMM-DD,HHmm[LT]") {
if (t) {
const o = e != null && e.lng && (e != null && e.lat) ? F.guessTimeZoneOffset(e == null ? void 0 : e.lng, e == null ? void 0 : e.lat) : 0;
return E(t).utcOffset(o).format(n);
}
return "-";
};
},
computeUTCTime() {
return function(t, e = "MMM-DD,HHmm[Z]") {
return t ? E(t).utc().format(e) : "-";
};
},
computeUpdateTime() {
return function(t) {
return E.unix(t).fromNow();
};
},
computeTimeOffset() {
return function(t) {
const e = t != null && t.lng && (t != null && t.lat) ? F.guessTimeZoneOffset(t == null ? void 0 : t.lng, t == null ? void 0 : t.lat) : 0;
return F.prettyTimeZoneOffset(e);
};
},
computeCiiDiscountZ() {
return function(t) {
return F.roundPrecision(((t == null ? void 0 : t.ciiRef) - (t == null ? void 0 : t.discountCii)) / (t == null ? void 0 : t.ciiRef) * 100, 0);
};
},
computeRoundPrecision() {
return function(t, e = 4) {
return F.roundPrecision(t, e) || 0;
};
}
},
mounted() {
var t, e, n;
this.rank = ((n = (e = (t = this.voyage) == null ? void 0 : t.legs) == null ? void 0 : e[0]) == null ? void 0 : n.rank) || 1;
},
methods: {
handleCenter(t) {
this.$emit("center", t);
},
toggleLegRight() {
var t, e, n, o;
this.rank = this.rank + 1 > ((e = (t = this.voyage) == null ? void 0 : t.legs) == null ? void 0 : e.length) ? (o = (n = this.voyage) == null ? void 0 : n.legs) == null ? void 0 : o.length : this.rank + 1;
},
toggleLegLeft() {
this.rank = this.rank - 1 < 1 ? 1 : this.rank - 1;
}
}
}, Bl = { class: "summary-container" }, Gl = { class: "info-box-item" }, Ul = { class: "title-box flex-space" }, Zl = { class: "info" }, $l = { class: "card-box" }, jl = { class: "flex-space row-item" }, ql = { class: "flex-space row-item" }, Jl = { class: "flex-space" }, Xl = { class: "info-box-item" }, Ql = { class: "title-box flex-space" }, Kl = {
key: 0,
class: "info flex-end"
}, Yl = {
key: 0,
class: "card-box active-leg"
}, ei = { class: "flex-space" }, ti = { class: "port-name" }, si = { class: "port-name" }, li = { class: "flex-center line-grogress" }, ii = { class: "flex-space" }, ni = { class: "wayport sailing" }, ai = { class: "time flex-start" }, oi = {
key: 0,
style: { "margin-right": "0" }
}, ri = {
key: 1,
style: { "margin-right": "0" }
}, di = { style: { "margin-right": "0" } }, ci = { class: "time flex-start" }, hi = { key: 0 }, ui = { key: 1 }, fi = {
key: 0,
class: "distance flex-start info"
}, pi = { class: "wayport sailing" }, gi = { class: "time flex-end" }, mi = {
key: 0,
style: { "margin-right": "0" }
}, yi = {
key: 1,
style: { "margin-right": "0" }
}, vi = { style: { "margin-right": "0" } }, bi = { class: "time flex-end" }, xi = { key: 0 }, _i = { key: 1 }, ki = {
key: 0,
class: "distance flex-end info"
}, Li = {
key: 0,
class: "flex-center info",
style: { "font-size": "14px" }
}, wi = {
key: 1,
class: "card-box active-leg"
}, Ci = { class: "info-box-item" }, Ti = { class: "card-box realtime-ais" }, Ri = { class: "flex-space row-item" }, Si = { class: "flex-space row-item" }, Mi = { class: "flex-space row-item" }, Oi = { class: "cp" }, Di = { style: { flex: "1" } }, Ai = { style: { flex: "1" } }, Ei = { style: { flex: "1.4" } }, Ii = { style: { flex: "1.2" } }, Vi = { style: { flex: "1" } }, Ni = { class: "info-box-item segs" }, Wi = {
key: 0,
class: "title-box"
}, Hi = { key: 1 }, zi = { class: "flex-space" }, Fi = { style: { "font-weight": "bold", "font-size": "14px" } }, Pi = { class: "cp" }, Bi = { class: "flex-space" }, Gi = { class: "cp" }, Ui = { class: "flex-space" }, Zi = { class: "cii flex-center" }, $i = { class: "summary" }, ji = { class: "flex-space row" }, qi = { class: "flex" }, Ji = { class: "flex" }, Xi = { class: "flex" }, Qi = { class: "flex-space row" }, Ki = { class: "flex" }, Yi = { class: "flex" }, en = { class: "flex" }, tn = { class: "flex-space row" }, sn = { class: "flex" }, ln = { class: "flex" }, nn = { class: "flex" }, an = { class: "flex-space row" }, on = { class: "flex-space row bold" }, rn = { class: "summary" }, dn = { class: "flex-space row" }, cn = { class: "flex" }, hn = { class: "flex" }, un = { class: "flex" }, fn = { class: "flex-space row bold" }, pn = { class: "flex-space row" }, gn = { class: "flex" }, mn = { class: "flex" }, yn = { class: "flex" }, vn = { class: "flex-space row bold" }, bn = {
key: 2,
style: { color: "var(--idm-white-7)", "margin-top": "20px" }
};
function xn(t, e, n, o, s, i) {
const d = R("ElDivider"), c = R("ElProgress"), a = R("AlarmClock"), p = R("ElIcon"), m = R("ElScrollbar");
return h(), f("div", Bl, [
C(m, { style: { padding: "10px" } }, {
default: z(() => {
var u, v, k, L, S, b, T, N, g, _, D, w, A, M, W, y, P, G, O, Z, U, H, ee, ne, ae, be, xe, _e, ke, Le, we, Ce, Te, Re, Se, Me, Oe, De, Ae, Ee, Ie, Ve, Ne, We, He, ze, Fe, Pe, Be, Ge, Ue, Ze, $e, je, qe, Je, Xe, Qe, Ke, oe, re, de, ce, tt, st, lt, it, nt, at, ot, rt, dt, ct;
return [
l("div", Gl, [
l("div", Ul, [
e[4] || (e[4] = l("div", { class: "card-title" }, "AIS Info", -1)),
l("div", Zl, "Updated at " + r(i.computeUpdateTime((k = (v = (u = n.voyage) == null ? void 0 : u.vessel) == null ? void 0 : v.ais) == null ? void 0 : k.positionTime)), 1)
]),
l("div", $l, [
l("div", jl, [
l("div", null, [
e[5] || (e[5] = l("label", null, "Status", -1)),
l("span", null, r((b = (S = (L = n.voyage) == null ? void 0 : L.vessel) == null ? void 0 : S.ais) == null ? void 0 : b.labelEn), 1)
]),
l("div", null, [
e[6] || (e[6] = l("label", null, "Call Sign", -1)),
l("span", null, r(((N = (T = n.voyage) == null ? void 0 : T.vessel) == null ? void 0 : N.callSign) || "-"), 1)
])
]),
l("div", ql, [
l("div", null, [
e[7] || (e[7] = l("label", null, "Latitude", -1)),
l("span", null, r(i.computeLat((D = (_ = (g = n.voyage) == null ? void 0 : g.vessel) == null ? void 0 : _.ais) == null ? void 0 : D.lat) || "-"), 1)
]),
l("div", null, [
e[8] || (e[8] = l("label", null, "Longitude", -1)),
l("span", null, r(i.computeLng((M = (A = (w = n.voyage) == null ? void 0 : w.vessel) == null ? void 0 : A.ais) == nu