@idmwx/idmui-gl4
Version:
idm webgl4
1,450 lines (1,449 loc) • 1.8 MB
JavaScript
var vr = Object.defineProperty;
var kr = (t, e, a) => e in t ? vr(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
var ve = (t, e, a) => (kr(t, typeof e != "symbol" ? e + "" : e, a), a);
import Ie from "axios";
import { useTheme as Fe } from "vuetify";
import { openBlock as k, createElementBlock as I, resolveComponent as P, createBlock as W, normalizeClass as ge, withCtx as x, createVNode as b, withModifiers as Le, createElementVNode as n, createCommentVNode as N, toDisplayString as y, createTextVNode as Z, Fragment as Te, renderList as De, withDirectives as et, vShow as tt, mergeProps as $, normalizeStyle as he } from "vue";
import be from "mapbox-gl";
import R from "moment";
import { LngLatHelper as j, TropicalHelper as Di, LaneHelper as je, GeoJsonHelper as Ue } from "@idm-plugin/geo";
import { Meteo2Assist as Va, TidesAssist as er } from "@idm-plugin/meteo";
import * as Ka from "echarts";
import * as B from "@turf/turf";
import { LayerHelper as ja, CompanyHelper as _r } from "@idm-plugin/tag2";
import Lr from "@mapbox/sphericalmercator";
import { LayerHelper as zr } from "@idm-plugin/tag";
import Cr from "shpjs";
import Mr from "gif.js";
import { AliOssSTSClient as Pr } from "@idm-plugin/aliclient";
const ie = (t, e) => {
const a = t.__vccOpts || t;
for (const [i, o] of e)
a[i] = o;
return a;
}, Sr = {
name: "IdmWarZone",
props: {
map: {
type: Object
},
zone: {
type: Object
},
beforeLayer: {
type: String
}
},
setup() {
return { Theme: Fe() };
},
data() {
return {
source: "war-zone-source",
zoneLayer: "war-zone-layer",
zoneLabelLayer: "war-zone-label-layer"
};
},
watch: {
zone: {
handler() {
this.handleRender();
},
immediate: !0
}
},
methods: {
handleRender() {
this.handleClear(), this.zone && (this.map.addSource(this.source, {
type: "geojson",
data: this.zone
}), this.map.addLayer(
{
id: this.zoneLayer,
type: "fill",
source: this.source,
filter: ["==", "$type", "Polygon"],
paint: {
"fill-color": this.Theme.current.value.colors["map-red"],
"fill-opacity": 0.4
// 'fill-color': ['match', ['get', 'val'], 'PiracyArea', '#DF2CF3', 'ConvoyArea', '#FFFF00', 'JWCriskArea', '#DF2CF3', '#ffffff'],
}
},
this.beforeLayer
), this.map.addLayer(
{
id: this.zoneLayer + "-border",
type: "line",
source: this.source,
filter: ["==", "$type", "Polygon"],
paint: {
"line-width": 1,
"line-opacity": 0.7,
"line-color": this.Theme.current.value.colors["map-red"]
// 'line-color': ['match', ['get', 'val'], 'PiracyArea', '#DF2CF3', 'ConvoyArea', '#FFFF00', 'JWCriskArea', '#DF2CF3', '#ffffff'],
}
},
this.beforeLayer
), this.map.addLayer(
{
id: this.zoneLabelLayer,
type: "symbol",
source: this.source,
filter: ["==", "$type", "Point"],
layout: {
"symbol-placement": "point",
"icon-size": 0.7,
"icon-image": "identify",
"text-anchor": "top",
"text-field": "{lbl}",
"text-rotation-alignment": "viewport",
"text-size": 10,
"text-offset": [0, 1],
"text-font": ["DIN Pro Regular", "Arial Unicode MS Regular"]
},
paint: {
"text-color": this.Theme.current.value.colors["on-surface"]
// 'text-halo-color': '#fff',
// 'text-halo-width': 1,
}
},
this.beforeLayer
));
},
handleClear() {
this.map.getLayer(this.zoneLayer) && this.map.removeLayer(this.zoneLayer), this.map.getLayer(this.zoneLayer + "-border") && this.map.removeLayer(this.zoneLayer + "-border"), this.map.getLayer(this.zoneLabelLayer) && this.map.removeLayer(this.zoneLabelLayer), this.map.getSource(this.source) && this.map.removeSource(this.source);
}
}
};
function Tr(t, e, a, i, o, r) {
return k(), I("div");
}
const Rr = /* @__PURE__ */ ie(Sr, [["render", Tr]]), Dr = {
name: "IdmGmdssArea",
props: {
map: {
type: Object
},
area: {
type: Object
},
beforeLayer: {
type: String
}
},
setup() {
return { Theme: Fe() };
},
data() {
return {
source: "gmdss-area-source",
areaLayer: "gmdss-area-layer",
areaLabelLayer: "gmdss-area-label-layer"
};
},
watch: {
area: {
handler() {
this.handleRender();
},
immediate: !0
}
},
methods: {
handleRender() {
this.handleClear(), this.area && (this.map.addSource(this.source, {
type: "geojson",
data: this.area
}), console.log(this.beforeLayer), this.map.addLayer(
{
id: this.areaLayer,
type: "fill",
source: this.source,
filter: ["==", "$type", "Polygon"],
paint: {
"fill-outline-color": "rgba(255,255,255,0.3)",
"fill-opacity": 0.4,
"fill-color": [
"match",
["get", "val"],
"AreaI",
"#EB8996",
"AreaII",
"#6F448B",
"AreaIII",
"#3E8BD3",
"AreaIV",
"#5EBCC4",
"AreaV",
"#00AAE7",
"AreaVI",
"#9CCE6D",
"AreaVII",
"#F4AE00",
"AreaVIII",
"#EF9A85",
"AreaIX",
"#00AAA7",
"AreaX",
"#7AC49F",
"AreaXI",
"#DFDFDF",
"AreaXII",
"#FFF974",
"AreaXIII",
"#EF9A85",
"AreaXIV",
"#86A2D1",
"AreaXV",
"#EC8972",
"AreaXVI",
"#EAC2DA",
"AreaXVII",
"#B9C8E7",
"AreaXVIII",
"#BBA1C8",
"AreaXIX",
"#FAE0BD",
"AreaXX",
"#DBECC8",
"AreaXXI",
"#D496AF",
"#ffffff"
]
}
},
this.beforeLayer
), this.map.addLayer(
{
id: this.areaLabelLayer,
type: "symbol",
source: this.source,
filter: ["==", "$type", "Point"],
layout: {
"symbol-placement": "point",
"icon-size": 0.7,
"icon-image": "identify",
"text-anchor": "top",
"text-field": "{lbl}",
"text-rotation-alignment": "viewport",
"text-size": 12,
"text-offset": [0, 1],
"text-font": ["DIN Pro Regular", "Arial Unicode MS Regular"]
},
paint: {
"text-color": this.Theme.current.value.colors["on-surface"]
}
},
this.beforeLayer
));
},
handleClear() {
this.map.getLayer(this.areaLayer) && this.map.removeLayer(this.areaLayer), this.map.getLayer(this.areaLabelLayer) && this.map.removeLayer(this.areaLabelLayer), this.map.getSource(this.source) && this.map.removeSource(this.source);
}
}
};
function Ir(t, e, a, i, o, r) {
return k(), I("div");
}
const Ar = /* @__PURE__ */ ie(Dr, [["render", Ir]]), Gr = {
name: "IdmEcaZone",
props: {
map: {
type: Object
},
zone: {
type: Object
},
beforeLayer: {
type: String
}
},
setup() {
return { Theme: Fe() };
},
data() {
return {
source: "eca-zone-source",
zoneLayer: "eca-zone-layer",
zoneLabelLayer: "eca-zone-label-layer"
};
},
watch: {
zone: {
handler() {
this.zone ? this.handleRender() : this.handleClear();
},
immediate: !0
}
},
methods: {
handleRender() {
var t;
this.handleClear(), this.zone && (this.map.getSource(this.source) ? (t = this.map) == null || t.getSource(this.source).setData(this.zone) : (this.map.addSource(this.source, {
type: "geojson",
data: this.zone
}), this.map.addLayer(
{
id: this.zoneLayer,
type: "fill",
source: this.source,
filter: ["all", ["==", "$type", "Polygon"], ["!=", "disabled", !0]],
paint: {
"fill-opacity": 0.3,
"fill-color": "#05f324"
}
},
this.beforeLayer
), this.map.addLayer(
{
id: this.zoneLayer + "-border",
type: "line",
source: this.source,
filter: ["all", ["==", "$type", "Polygon"], ["!=", "disabled", !0]],
paint: {
"line-color": "#05f324",
"line-width": 1,
"line-opacity": 1
}
},
this.beforeLayer
), this.map.addLayer(
{
id: this.zoneLabelLayer,
type: "symbol",
source: this.source,
filter: ["all", ["==", "$type", "Point"], ["!=", "disabled", !0]],
layout: {
"symbol-placement": "point",
"icon-size": 0.7,
"icon-image": "identify",
"text-max-width": 16,
"text-justify": "left",
"text-anchor": "top",
"text-field": "{lbl}",
"text-rotation-alignment": "viewport",
"text-size": 10,
"text-offset": [0, 1],
"text-font": ["DIN Pro Regular", "Arial Unicode MS Regular"]
},
paint: {
"text-color": this.Theme.current.value.colors["on-surface"]
}
},
this.beforeLayer
)));
},
handleClear() {
this.map.getLayer(this.zoneLayer) && this.map.removeLayer(this.zoneLayer), this.map.getLayer(this.zoneLayer + "-border") && this.map.removeLayer(this.zoneLayer + "-border"), this.map.getLayer(this.zoneLabelLayer) && this.map.removeLayer(this.zoneLabelLayer), this.map.getSource(this.source) && this.map.removeSource(this.source);
}
}
};
function Fr(t, e, a, i, o, r) {
return k(), I("div");
}
const Nr = /* @__PURE__ */ ie(Gr, [["render", Fr]]);
const Wr = {
name: "IdmAlertZone",
props: {
simple: {
type: Boolean,
default: !1
},
map: {
type: Object
},
zone: {
type: Object
},
beforeLayer: {
type: String
}
},
setup() {
return { Theme: Fe() };
},
data() {
return {
source: "alert-zone-source",
polygonLayer: "alert-zone-polygon-layer",
polygonLabelLayer: "alert-zone-polygon-label-layer",
lineLayer: "alert-zone-line-layer",
lineLabelLayer: "alert-zone-line-label-layer",
pointLayer: "alert-zone-point-layer",
showMakerInfo: !1,
form: {},
marker: null
};
},
watch: {
zone: {
handler() {
var t, e, a, i, o, r;
this.zone ? (this.handleRender(), (t = this.map) == null || t.on("click", [this.polygonLabelLayer, this.lineLabelLayer, this.pointLayer], this.handleClick), (e = this.map) == null || e.on("mousemove", [this.polygonLabelLayer, this.lineLabelLayer, this.pointLayer], this.handleHover), (a = this.map) == null || a.on("mouseleave", [this.polygonLabelLayer, this.lineLabelLayer, this.pointLayer], this.handleLeave)) : (this.handleClear(), (i = this.map) == null || i.off("click", [this.polygonLabelLayer, this.lineLabelLayer, this.pointLayer], this.handleClick), (o = this.map) == null || o.off("mousemove", [this.polygonLabelLayer, this.lineLabelLayer, this.pointLayer], this.handleHover), (r = this.map) == null || r.off("mouseleave", [this.polygonLabelLayer, this.lineLabelLayer, this.pointLayer], this.handleLeave));
},
immediate: !0
}
},
methods: {
handleRender() {
var t;
this.handleClear(), this.zone && (this.map.getSource(this.source) ? (t = this.map) == null || t.getSource(this.source).setData(this.zone) : (this.map.addSource(this.source, {
type: "geojson",
data: this.zone
}), this.map.addLayer({
id: this.polygonLayer,
type: "fill",
source: this.source,
filter: ["all", ["==", "$type", "Polygon"], ["!=", "disabled", !0]],
paint: {
"fill-outline-color": this.Theme.current.value.colors["map-red"],
"fill-opacity": 0.4,
"fill-color": this.Theme.current.value.colors["map-red"]
}
}, this.beforeLayer), this.map.addLayer({
id: this.polygonLayer + "-border",
type: "line",
source: this.source,
filter: ["all", ["==", "$type", "Polygon"], ["!=", "disabled", !0]],
paint: {
"line-width": 1,
"line-color": this.Theme.current.value.colors["map-red"]
}
}, this.beforeLayer), this.map.addLayer({
id: this.lineLayer,
type: "line",
source: this.source,
filter: ["all", ["==", "$type", "LineString"], ["!=", "disabled", !0]],
paint: {
"line-color": this.Theme.current.value.colors["map-red"],
"line-width": 2
}
}, this.beforeLayer), this.map.addLayer({
id: this.polygonLabelLayer,
type: "symbol",
source: this.source,
filter: ["all", ["==", "$type", "Polygon"], ["!=", "disabled", !0]],
layout: {
"symbol-placement": "point",
"icon-image": "warning",
"icon-size": 1,
"icon-offset": [0, -13],
"icon-allow-overlap": !0,
"icon-rotation-alignment": "viewport"
},
paint: {
"icon-opacity": 0.8
}
}, this.beforeLayer), this.map.addLayer({
id: this.lineLabelLayer,
type: "symbol",
source: this.source,
filter: ["all", ["==", "$type", "LineString"], ["!=", "disabled", !0]],
layout: {
"symbol-placement": "line-center",
"icon-image": "warning",
"icon-size": 1,
"icon-offset": [0, -15],
"icon-allow-overlap": !0,
"icon-rotation-alignment": "viewport"
},
paint: {
"icon-opacity": 0.8
}
}, this.beforeLayer), this.map.addLayer({
id: this.pointLayer,
type: "symbol",
source: this.source,
filter: ["all", ["==", "$type", "Point"], ["!=", "disabled", !0]],
layout: {
"symbol-placement": "point",
"icon-image": "warning",
"icon-offset": [0, -15],
"icon-size": 1
},
paint: {
"icon-opacity": 0.8
}
}, this.beforeLayer)));
},
handleClear() {
this.map.getLayer(this.polygonLayer) && this.map.removeLayer(this.polygonLayer), this.map.getLayer(this.polygonLayer + "-border") && this.map.removeLayer(this.polygonLayer + "-border"), this.map.getLayer(this.polygonLabelLayer) && this.map.removeLayer(this.polygonLabelLayer), this.map.getLayer(this.lineLayer) && this.map.removeLayer(this.lineLayer), this.map.getLayer(this.lineLabelLayer) && this.map.removeLayer(this.lineLabelLayer), this.map.getLayer(this.pointLayer) && this.map.removeLayer(this.pointLayer), this.map.getSource(this.source) && this.map.removeSource(this.source);
},
handleHover() {
this.map.getCanvas().style.cursor = "pointer";
},
handleLeave() {
this.map.getCanvas().style.cursor = "grab";
},
handleClick(t) {
var i, o;
const e = t.features[0], a = (o = (i = this.zone) == null ? void 0 : i.features) == null ? void 0 : o.filter((r) => {
var l, c;
return ((l = r.properties) == null ? void 0 : l.id) === ((c = e == null ? void 0 : e.properties) == null ? void 0 : c.id);
})[0];
a && (this.showMakerInfo = !0, this.form = { ...a.properties }, this.simple || this.drawMarker([t.lngLat.lng, t.lngLat.lat]));
},
drawMarker(t) {
var e;
(e = this.marker) == null || e.remove(), this.$nextTick(() => {
var o, r;
const a = (o = document.getElementById("idm-gl4-zone-info")) == null ? void 0 : o.cloneNode(!0), i = (r = a == null ? void 0 : a.children[1]) == null ? void 0 : r.children[0];
i && (i.onclick = () => {
this.handleRemoveMarker();
}), this.marker = new be.Marker(a).setLngLat(t).setOffset([230, 0]).addTo(this.map);
});
},
handleRemoveMarker() {
var t;
this.showMakerInfo = !1, (t = this.marker) == null || t.remove();
}
}
}, Er = ["innerHTML"];
function Br(t, e, a, i, o, r) {
const l = P("VBtn"), c = P("v-card-text"), s = P("v-card");
return o.showMakerInfo ? (k(), W(s, {
key: 0,
class: ge(["idm-gl4-zone-info overflow-auto scroll", a.simple ? "page" : "dialog"]),
id: "idm-gl4-zone-info"
}, {
default: x(() => [
b(c, null, {
default: x(() => {
var d;
return [
b(l, {
icon: "",
density: "compact",
variant: "plain",
class: "close",
onClick: Le(r.handleRemoveMarker, ["stop"])
}, {
default: x(() => e[0] || (e[0] = [
n("i", { class: "iconfont icon-close text-h4" }, null, -1)
])),
_: 1,
__: [0]
}, 8, ["onClick"]),
n("div", {
class: "rich-context",
innerHTML: (d = o.form) == null ? void 0 : d.name
}, null, 8, Er)
];
}),
_: 1
})
]),
_: 1
}, 8, ["class"])) : N("", !0);
}
const Zr = /* @__PURE__ */ ie(Wr, [["render", Br]]);
const Or = {
name: "PortDetail",
props: {
simple: {
type: Boolean,
default: !1
},
portId: {
type: String
},
port: {
type: Object
},
token: {
type: String
},
defaultMeteoToken: {
type: String
},
gateway: {
type: String
},
followList: {
type: Array
// default: () => {
// return [
// {
// id: 'cm8ntkge601bn23o84p2e4pkf',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: {
// id: 'cm4s8gvu700kp0mqtdfkebp0s',
// name: 'HG BREMEN',
// imo: 9955002,
// mmsi: 636023376,
// callSign: '5LNK4',
// ais: {
// cog: 253.2,
// eta: '2025-09-29T06:00:00Z',
// hdg: 251,
// imo: '9955002',
// lat: -26.914428,
// lng: 42.621778,
// rot: -4,
// sog: 14,
// utc: '2025-09-15T02:16:17Z',
// eta1: '2025-09-29T06:00:00Z',
// mmsi: 636023376,
// factor: {
// eta: '2025-09-15T02:16:17Z',
// etd: '2025-09-15T02:16:17Z',
// lat: -26.914428,
// lng: 42.621778,
// meteo: {
// sst: 23.299999,
// url: 'https://osshz.idmwx.com/asset/weather/01n.svg',
// utc: '2025-09-15T02:00:00Z',
// code: 0,
// name: 'Clear',
// temp: 22.65,
// wave: {
// wd: {
// scale: 'Moderate',
// degree: 92,
// height: 1.36,
// period: 8,
// bearing: 272,
// direction: 'E',
// peakPeriod: null,
// },
// sig: {
// scale: 'Moderate',
// degree: 207,
// height: 2.42,
// period: 16.450001,
// bearing: 27,
// direction: 'SSW',
// },
// swell: {
// scale: 'Moderate',
// degree: 211,
// height: 1.62,
// period: 14.2,
// bearing: 31,
// direction: 'SSW',
// peakPeriod: null,
// },
// },
// wind: {
// kts: 13.834078,
// gusts: 16.328255,
// scale: 4,
// speed: 13.834078,
// degree: 109.708076,
// bearing: 289.708076,
// direction: 'ESE',
// },
// gusts: {
// kts: 16.328255,
// },
// height: 0.22,
// precip: {
// sum: 0,
// sum3Hours: 0,
// sum6Hours: 0,
// probability: null,
// },
// source: 'gfs_seamless',
// current: {
// kts: 2.192751,
// speed: 2.192751,
// degree: 257.19574,
// bearing: 257.19574,
// direction: 'WSW',
// },
// visibility: 13.0346,
// },
// speed: 15.77,
// cFactor: 2.18,
// wxFactor: -0.41,
// },
// method: 'position',
// status: 0,
// vendor: 'myVessel',
// deleted: false,
// draught: 12.3,
// labelCn: '在航（主机推动）',
// labelEn: 'Underway Using Engine',
// syncTime: '2025-09-15T02:30:32Z',
// destination: 'ABIDJAN',
// meteoVendor: 'GFS',
// positionTime: 1757902577,
// },
// },
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-03-25T01:30:54.079Z',
// remark: null,
// voyage: {
// id: 'cmcyl9fkz01bj0nnxd9gzc62e',
// number: '20250711016',
// status: 'Underway',
// loadCondition: 'Laden',
// companyId: 'cltzog33o000nxglt3afwd7b3',
// vesselId: 'cm4s8gvu700kp0mqtdfkebp0s',
// },
// },
// {
// id: 'cm8ntkh1x03qj0nnt6tal6c1u',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: {
// id: 'clyfa7be905to3wqk7xhdg1gp',
// name: 'APRIL',
// imo: 9384916,
// mmsi: 352003739,
// callSign: '3E5840',
// ais: {
// cog: 323,
// eta: '2025-09-22T14:00:00Z',
// hdg: 324,
// imo: '9384916',
// lat: 11.68535,
// lng: 74.573017,
// rot: 0,
// sog: 10.6,
// utc: '2025-09-15T02:05:10Z',
// eta1: '2025-09-22T14:00:00Z',
// mmsi: 352003739,
// factor: {
// eta: '2025-09-15T02:05:10Z',
// etd: '2025-09-15T02:05:10Z',
// lat: 11.68535,
// lng: 74.573017,
// meteo: {
// sst: 27.950001,
// url: 'https://osshz.idmwx.com/asset/weather/09d.svg',
// utc: '2025-09-15T02:00:00Z',
// code: 80,
// name: 'Light Showers',
// temp: 26.9,
// wave: {
// wd: {
// scale: 'Smooth',
// degree: 305,
// height: 0.24,
// period: 2.35,
// bearing: 125,
// direction: 'NW',
// peakPeriod: null,
// },
// sig: {
// scale: 'Moderate',
// degree: 232,
// height: 1.26,
// period: 9.65,
// bearing: 52,
// direction: 'SW',
// },
// swell: {
// scale: 'Slight',
// degree: 272,
// height: 0.88,
// period: 6.45,
// bearing: 92,
// direction: 'W',
// peakPeriod: null,
// },
// },
// wind: {
// kts: 9.052954,
// gusts: 12.829344,
// scale: 3,
// speed: 9.052954,
// degree: 284.931458,
// bearing: 104.93145800000002,
// direction: 'WNW',
// },
// gusts: {
// kts: 12.829344,
// },
// height: 0.59,
// precip: {
// sum: 0.2,
// sum3Hours: 0.2,
// sum6Hours: 0.2,
// probability: 25,
// },
// source: 'best_match',
// current: {
// kts: 0.307348,
// speed: 0.307348,
// degree: 161.564941,
// bearing: 161.564941,
// direction: 'SSE',
// },
// visibility: 6.5119,
// },
// speed: 10.08,
// cFactor: -0.29,
// wxFactor: -0.23,
// },
// method: 'position',
// status: 0,
// vendor: 'myVessel',
// deleted: false,
// draught: 10.9,
// labelCn: '在航（主机推动）',
// labelEn: 'Underway Using Engine',
// syncTime: '2025-09-15T02:13:47Z',
// destination: 'BH AHD',
// positionTime: 1757901910,
// },
// },
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-03-25T01:30:54.935Z',
// remark: null,
// },
// {
// id: 'cm8y716xs02rm0mo1e8lt3tfw',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhyi0x601wcwzpi8xx3xlo5',
// name: 'Shanghai',
// loCode: 'CNSHA',
// abcAlias: null,
// abcCode: 'CN0116',
// abcLoCode: 'CNSHA',
// city: 'Shanghai',
// cntLoCode: 'CN',
// continent: 'ASIA',
// country: 'China',
// lat: 31.25833320617676,
// lng: 121.5433349609375,
// status: 1,
// timezone: {
// RawOffset: 8,
// TimezoneId: 'Asia/Shanghai',
// DisplayName: '(UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi',
// UtcCurrentOffset: 8,
// },
// zoneId: 'zk3c0bcq',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-04-01T07:45:31.745Z',
// remark: '',
// },
// {
// id: 'cmag92m9s00vl0nmc7ksveh0v',
// platId: 'gd0mt1d',
// coordinate: {
// lat: 34.15792410669758,
// lng: 127.81907847477157,
// },
// vessel: null,
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-05-09T03:42:11.009Z',
// remark: '',
// },
// {
// id: 'cmag93pmq00wd0nmc1qgp9qsa',
// platId: 'gd0mt1d',
// coordinate: {
// lat: -37.63432796286481,
// lng: 52.32165422235994,
// },
// vessel: null,
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-05-09T03:43:02.019Z',
// remark: '',
// },
// {
// id: 'cmd2jse3e0dvb0nnx21ga822x',
// platId: 'gd0mt1d',
// coordinate: {
// lat: 10,
// lng: -14,
// },
// vessel: null,
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-07-14T03:32:30.171Z',
// remark: '',
// },
// {
// id: 'cmd2jx5ym0e840mpj80n60187',
// platId: 'gd0mt1d',
// coordinate: {
// lat: 10,
// lng: -16,
// },
// vessel: null,
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-07-14T03:36:12.911Z',
// remark: '',
// },
// {
// id: 'cmfdgil9a01i10lqacxdz27pc',
// platId: 'gd0mt1d',
// coordinate: {
// lat: -1.3101652000000001,
// lng: 55.488281,
// },
// vessel: null,
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-10T04:05:46.656Z',
// remark: null,
// },
// {
// id: 'cmfdlcx6r01y60lqab6q885ev',
// platId: 'gd0mt1d',
// coordinate: {
// lat: 0.99837475,
// lng: -104.59375,
// },
// vessel: null,
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-10T06:21:20.262Z',
// remark: null,
// },
// {
// id: 'cmfdo9ksp06gl0msh8kanel7s',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: {
// id: 'clcbmc4m3000h6ngq461sabxx',
// name: 'ZHONG DA 88',
// imo: 9957191,
// mmsi: 413294670,
// callSign: 'BOSV9',
// ais: {
// cog: 160.7,
// hdg: 158,
// imo: '9957191',
// lat: 22.11045,
// lng: 113.44941,
// rot: 0,
// sog: 10,
// utc: '2024-03-27T14:00:07Z',
// mmsi: 413294670,
// method: 'position',
// status: 0,
// vendor: 'myship',
// draught: 4.1,
// syncTime: '2024-03-27T14:00:18Z',
// positionTime: 1711548007,
// },
// },
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-10T07:42:43.082Z',
// remark: null,
// },
// {
// id: 'cmfermo1i02y70mqydv673mgu',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: {
// id: 'clcbmc4ag000c6ngq7p1n1nhv',
// name: 'EKMEN STAR',
// imo: 9218193,
// mmsi: 314525000,
// callSign: '8PAX6',
// ais: {
// cog: 82,
// eta: '2025-09-22T05:00:00Z',
// hdg: 84,
// imo: '9218193',
// lat: 36.0301,
// lng: -4.723353,
// rot: 0,
// sog: 11.9,
// utc: '2025-09-14T11:28:29Z',
// eta1: '2025-09-22T05:00:00Z',
// mmsi: 314525000,
// factor: {
// eta: '2025-09-14T11:28:29Z',
// etd: '2025-09-14T11:28:29Z',
// lat: 36.0301,
// lng: -4.723353,
// meteo: {
// sst: 22.15,
// url: 'https://osshz.idmwx.com/asset/weather/01d.svg',
// utc: '2025-09-14T11:00:00Z',
// code: 0,
// name: 'Sunny',
// temp: 22.65,
// wave: {
// wd: {
// scale: 'Smooth',
// degree: 286,
// height: 0.28,
// period: 2.35,
// bearing: 106,
// direction: 'WNW',
// peakPeriod: 1,
// },
// sig: {
// scale: 'Slight',
// degree: 286,
// height: 0.58,
// period: 3.85,
// bearing: 106,
// direction: 'WNW',
// },
// swell: {
// scale: 'Smooth',
// degree: 285,
// height: 0.36,
// period: 3.5,
// bearing: 105,
// direction: 'WNW',
// peakPeriod: 5.2,
// },
// },
// wind: {
// kts: 4.587627,
// gusts: 7.77536,
// scale: 2,
// speed: 4.587627,
// degree: 306.38446,
// bearing: 126.38446,
// direction: 'NW',
// },
// gusts: {
// kts: 7.77536,
// },
// height: -0.39,
// precip: {
// sum: 0,
// sum3Hours: 0,
// sum6Hours: 0,
// probability: 0,
// },
// source: 'best_match',
// current: {
// kts: 0.307348,
// speed: 0.307348,
// degree: 71.564941,
// bearing: 71.564941,
// direction: 'ENE',
// },
// visibility: 23.4341,
// },
// speed: 12.13,
// cFactor: 0.3,
// wxFactor: -0.07,
// },
// method: 'position',
// status: 0,
// vendor: 'myVessel',
// deleted: false,
// draught: 7.4,
// labelCn: '在航（主机推动）',
// labelEn: 'Underway Using Engine',
// syncTime: '2025-09-14T11:30:04Z',
// destination: 'ILHFA',
// positionTime: 1757849309,
// },
// },
// port: null,
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-11T02:04:38.839Z',
// remark: null,
// },
// {
// id: 'cmfgjlseq0a080lqk0wd1c0ez',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhyg0e80018wzpivgy9ronc',
// name: 'Akrotiri',
// loCode: 'CYAKT',
// abcAlias: null,
// abcCode: 'CY0001',
// abcLoCode: 'CYAKT',
// city: 'Bucharest',
// cntLoCode: 'CY',
// continent: 'EUROPE',
// country: 'Cyprus',
// lat: 34.57192611694336,
// lng: 33.03478240966797,
// status: 1,
// timezone: {
// RawOffset: 2,
// TimezoneId: 'Europe/Bucharest',
// DisplayName: '(UTC+02:00) Athens, Bucharest',
// UtcCurrentOffset: 3,
// },
// zoneId: '0a3i0buw',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-12T07:55:33.268Z',
// remark: null,
// },
// {
// id: 'cmfkf050h09i20mpbbtp20lxv',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhygf8600gewzpii4d8p5ao',
// name: 'Dandong',
// loCode: 'CNDDG',
// abcAlias: ['Dadong'],
// abcCode: 'CN0028',
// abcLoCode: 'CNDDG',
// city: 'Pyongyang',
// cntLoCode: 'CN',
// continent: 'ASIA',
// country: 'China',
// lat: 39.81999969482422,
// lng: 124.1575012207031,
// status: 1,
// timezone: {
// RawOffset: 9,
// TimezoneId: 'Asia/Pyongyang',
// DisplayName: '(UTC+09:00) Pyongyang',
// UtcCurrentOffset: 9,
// },
// zoneId: 'zk3c0bcq',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-15T00:57:49.411Z',
// remark: null,
// },
// {
// id: 'cmfkf2lif09ts0lqn1nfmd4ev',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhygu5h00vkwzpi429ib4tx',
// name: 'Kakinada',
// loCode: 'INKAK',
// abcAlias: null,
// abcCode: 'IN0057',
// abcLoCode: 'INKAK',
// city: 'Kolkata',
// cntLoCode: 'IN',
// continent: 'ASIA',
// country: 'India',
// lat: 16.97333335876465,
// lng: 82.28500366210938,
// status: 1,
// timezone: {
// RawOffset: 5.5,
// TimezoneId: 'Asia/Kolkata',
// DisplayName: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi',
// UtcCurrentOffset: 5.5,
// },
// zoneId: 'zy3f0b05',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-15T00:59:44.104Z',
// remark: null,
// },
// {
// id: 'cmfkf40mg08qo0mmlbzsic9ou',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhyhdn9019qwzpi6dzvqfci',
// name: 'Mormugao',
// loCode: 'INMRM',
// abcAlias: null,
// abcCode: 'IN0090',
// abcLoCode: 'INMRM',
// city: 'Kolkata',
// cntLoCode: 'IN',
// continent: 'ASIA',
// country: 'India',
// lat: 15.41249942779541,
// lng: 73.80166625976562,
// status: 1,
// timezone: {
// RawOffset: 5.5,
// TimezoneId: 'Asia/Kolkata',
// DisplayName: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi',
// UtcCurrentOffset: 5.5,
// },
// zoneId: 'zy3f0b05',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-15T01:00:50.345Z',
// remark: null,
// },
// {
// id: 'cmfkf905108xf0mml26eb6uke',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhyj9w802z2wzpih82qku6a',
// name: 'Diego Garcia',
// loCode: 'IODGA',
// abcAlias: null,
// abcCode: 'IO0002',
// abcLoCode: 'IODGA',
// city: 'Almaty',
// cntLoCode: 'IO',
// continent: 'ASIA',
// country: 'British Indian Ocean Territory (the)',
// lat: -7.288332939147949,
// lng: 72.3949966430664,
// status: 1,
// timezone: {
// RawOffset: 6,
// TimezoneId: 'Asia/Almaty',
// DisplayName: '(UTC+06:00) Astana',
// UtcCurrentOffset: 6,
// },
// zoneId: 'zy3f0b05',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-15T01:04:42.998Z',
// remark: null,
// },
// {
// id: 'cmfkffoen0a500mpb83ks9naq',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhyhp6u01kiwzpi7pkd9ibw',
// name: 'Port Louis',
// loCode: 'MUPLU',
// abcAlias: null,
// abcCode: 'MU0004',
// abcLoCode: 'MUPLU',
// city: 'Mauritius',
// cntLoCode: 'MU',
// continent: 'INDIAN',
// country: 'Mauritius',
// lat: -20.15397071838379,
// lng: 57.4934196472168,
// status: 1,
// timezone: {
// RawOffset: 4,
// TimezoneId: 'Indian/Mauritius',
// DisplayName: '(UTC+04:00) Port Louis',
// UtcCurrentOffset: 4,
// },
// zoneId: 'zy3f0b05',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-15T01:09:54.385Z',
// remark: null,
// },
// {
// id: 'cmfkfsabx09lx0mmldli44j5v',
// platId: 'gd0mt1d',
// coordinate: null,
// vessel: null,
// port: {
// id: 'clbhyhwtq01ruwzpicgc3otck',
// name: 'Saipan',
// loCode: 'MPSPN',
// abcAlias: null,
// abcCode: 'MP0009',
// abcLoCode: 'MPSPN',
// city: 'Port_Moresby',
// cntLoCode: 'MP',
// continent: 'PACIFIC',
// country: 'Northern Mariana Islands (the)',
// lat: 15.28999996185303,
// lng: 145.7050018310547,
// status: 1,
// timezone: {
// RawOffset: 10,
// TimezoneId: 'Pacific/Port_Moresby',
// DisplayName: '(UTC+10:00) Guam, Port Moresby',
// UtcCurrentOffset: 10,
// },
// zoneId: '0r3n0b5e',
// },
// ownerId: 'cm0vw720z004wayoc8awvaug6',
// owner: {
// id: 'cm0vw720z004wayoc8awvaug6',
// email: 'monica@ormwx.com',
// },
// createdAt: '2025-09-15T01:19:42.671Z',
// remark: null,
// },
// ]
// },
},
theme: {
type: String,
default: "dark"
},
realTime: {
type: String
},
forecastModel: {
type: String
}
},
emits: ["follow", "cancelFollow", "meteoMore", "close", "closeAllDetail"],
setup() {
return {
Theme: Fe()
};
},
data() {
return {
meteoData: {},
tableData: [
{ label: "Hours", key: "time.hours", unit: "LT" },
{ label: "Weather", key: "weather.weather", img: !0, unit: "" },
{ label: "Temp", key: "weather.temp", unit: "℃" },
{ label: "Precip", key: "weather.precip", unit: "mm" },
{ label: "Visibility", key: "weather.visibility", unit: "nm" },
{ label: "Wind", key: "weather.wind", unit: "kts" },
{ label: "Sig wave", key: "weather.sigWave", unit: "m" },
{ label: "Swell", key: "weather.swell", unit: "m" },
{ label: "Current", key: "weather.current", unit: "kts" }
],
currentIndex: 0,
loading: !1,
interval: 6,
showTideDetail: !1,
tideData: {},
tideTableData: [],
xDate: [],
echartData: null
};
},
computed: {
dateList() {
var a, i, o, r;
const t = [], e = (a = this.port) != null && a.lng && ((i = this.port) != null && i.lat) ? j.guessTimeZoneOffset((o = this.port) == null ? void 0 : o.lng, (r = this.port) == null ? void 0 : r.lat) : 0;
for (let l = 0; l < 4; l++) {
let c = {
index: l,
dateTimeList: [],
label: R().utcOffset(e).add(l, "days").format("MM-DD ddd"),
startTime: R().utcOffset(e).add(l, "days").set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).format(),
dateTime: R().utcOffset(e).add(l, "days").format()
};
for (let s = 0; s < 4; s++)
c.dateTimeList.push(
R(c.startTime).utcOffset(e).add(s * this.interval, "hours").utc().format()
);
t.push(c);
}
return t;
},
computeLocalTime() {
return function(t, e, a = "yyyy-MM-DD HH:mm") {
if (!t || !e || e.lng === null || e.lng === void 0 || isNaN(e.lng) || e.lat === null || e.lat === void 0 || isNaN(e.lat))
return "-";
const i = e != null && e.lng && (e != null && e.lat) ? j.guessTimeZoneOffset(e == null ? void 0 : e.lng, e == null ? void 0 : e.lat) : 0;
return R(t).utcOffset(i).format(a);
};
},
computeTimeOffset() {
return function(t) {
if (!t || t.lng === null || t.lng === void 0 || isNaN(t.lng) || t.lat === null || t.lat === void 0 || isNaN(t.lat))
return "-";
const e = j.guessTimeZoneOffset(t == null ? void 0 : t.lng, t == null ? void 0 : t.lat);
return "( UTC " + (e >= 0 ? "+" : "") + e + " )";
};
},
computePosition() {
return function(t) {
return !t || t.lng === null || t.lng === void 0 || isNaN(t.lng) || t.lat === null || t.lat === void 0 || isNaN(t.lat) ? "-" : j.lat2pretty(t == null ? void 0 : t.lat, 2).pretty + " / " + j.lng2pretty(t == null ? void 0 : t.lng, 2).pretty;
};
},
computeRoundPrecision() {
return function(t, e = 4) {
return t == null || isNaN(t) || isNaN(e) ? "-" : j.roundPrecision(t, e);
};
}
},
watch: {
portId: {
handler() {
var t, e, a;
this.portId && (this.$emit("closeAllDetail"), (a = (e = (t = this.$parent) == null ? void 0 : t.$parent) == null ? void 0 : e.$refs.idmIideStation) == null || a.handleCloseDetail(), this.fetchForecastData());
},
immediate: !0
},
currentIndex: {
handler() {
this.initTableData(this.meteoData), this.showTideDetail && this.initTideTableData(this.tideData);
}
},
theme: {
handler() {
this.$nextTick(() => {
this.initEchart();