@idmui/spot 0.0.2

package/dist/index.js

@@ -0,0 +1,1388 @@
+import U from "moment";
+import q from "moment-timezone";
+import { Search as ge } from "@element-plus/icons-vue";
+import { LngLatHelper as se } from "@idm-plugin/geo";
+import * as re from "echarts";
+import { markRaw as ve, resolveComponent as ae, openBlock as o, createElementBlock as n, createElementVNode as i, createVNode as le, withCtx as he, Fragment as x, renderList as _, createBlock as ye, toDisplayString as y, createCommentVNode as ie, normalizeClass as b, createTextVNode as D, normalizeStyle as $ } from "vue";
+import de from "axios";
+class ce {
+  static pickHourly(t, e) {
+    var h, s, u, C, W, P, N, I, H, v, S, a, l, R, T, E, G, A, F, V, O, B, J, w, k, M, Z, K, j, L, f, p, g, m;
+    const X = typeof e == "string" ? U(e) : e, Q = t.weather, pe = t.marine, oe = U(Q[0].hourly.date).utc(), ee = oe.clone().add(Q[0].hourly.time.at(0), "h"), ue = oe.clone().add(Q[0].hourly.time.at(-1), "h"), ne = [];
+    if (X.isBetween(ee, ue, "millisecond", "[]")) {
+      const d = X.utc().diff(ee, "h", !1);
+      let Y, z;
+      for (const te of Q) {
+        const c = te.hourly;
+        Y = {
+          temp: (h = c.temperature_2m) == null ? void 0 : h.at(d),
+          apparentTemp: (s = c.apparent_temperature) == null ? void 0 : s.at(d),
+          rh: (u = c.relative_humidity_2m) == null ? void 0 : u.at(d),
+          dp: (C = c.dew_point_2m) == null ? void 0 : C.at(d),
+          precip: {
+            probability: (W = c.precipitation_probability) == null ? void 0 : W.at(d),
+            sum: (P = c.precipitation) == null ? void 0 : P.at(d)
+          },
+          code: (N = c.weather_code) == null ? void 0 : N.at(d),
+          visibility: this.m2nm((I = c.visibility) == null ? void 0 : I.at(d)),
+          wind: {
+            speed: (H = c.wind_speed_10m) == null ? void 0 : H.at(d),
+            kts: (v = c.wind_speed_10m) == null ? void 0 : v.at(d),
+            degree: (S = c.wind_direction_10m) == null ? void 0 : S.at(d),
+            bearing: (((a = c.wind_direction_10m) == null ? void 0 : a.at(d)) + 180) % 360,
+            gusts: (l = c.wind_gusts_10m) == null ? void 0 : l.at(d)
+          },
+          isDay: (R = c.is_day) == null ? void 0 : R.at(d)
+        };
+        const { name: me, url: we } = this.parseWeatherCode(Y.code, Y.isDay);
+        Y.name = me, Y.url = we, Y.wind.scale = this.beaufort(this.kts2ms(Y.wind.kts)), Y.wind.direction = this.degree2Direction(Y.wind.degree);
+      }
+      for (const te of pe) {
+        const c = te.hourly;
+        z = {
+          wave: {
+            sig: {
+              height: (T = c.wave_height) == null ? void 0 : T.at(d),
+              degree: (E = c.wave_direction) == null ? void 0 : E.at(d),
+              bearing: (((G = c.wave_direction) == null ? void 0 : G.at(d)) + 180) % 360,
+              period: (A = c.wave_period) == null ? void 0 : A.at(d)
+            },
+            swell: {
+              height: (F = c.swell_wave_height) == null ? void 0 : F.at(d),
+              degree: (V = c.swell_wave_direction) == null ? void 0 : V.at(d),
+              bearing: (((O = c.swell_wave_direction) == null ? void 0 : O.at(d)) + 180) % 360,
+              period: (B = c.swell_wave_period) == null ? void 0 : B.at(d),
+              peakPeriod: (J = c.swell_wave_peak_period) == null ? void 0 : J.at(d)
+            },
+            wd: {
+              height: (w = c.wind_wave_height) == null ? void 0 : w.at(d),
+              degree: (k = c.wind_wave_direction) == null ? void 0 : k.at(d),
+              bearing: (((M = c.wind_wave_direction) == null ? void 0 : M.at(d)) + 180) % 360,
+              period: (Z = c.wind_wave_period) == null ? void 0 : Z.at(d),
+              peakPeriod: (K = c.wind_wave_peak_period) == null ? void 0 : K.at(d)
+            }
+          },
+          current: {
+            speed: (j = c.ocean_current_velocity) == null ? void 0 : j.at(d),
+            kts: (L = c.ocean_current_velocity) == null ? void 0 : L.at(d),
+            degree: (f = c.ocean_current_direction) == null ? void 0 : f.at(d),
+            bearing: (p = c.ocean_current_direction) == null ? void 0 : p.at(d)
+          },
+          sst: (g = c.sea_surface_temperature) == null ? void 0 : g.at(d),
+          height: (m = c.sea_level_height_msl) == null ? void 0 : m.at(d)
+        }, z.wave.sig.direction = this.degree2Direction(z.wave.sig.degree), z.wave.swell.direction = this.degree2Direction(z.wave.swell.degree), z.wave.wd.direction = this.degree2Direction(z.wave.wd.degree), z.wave.sig.scale = this.douglas(z.wave.sig.height), z.wave.swell.scale = this.douglas(z.wave.swell.height), z.wave.wd.scale = this.douglas(z.wave.wd.height), z.current.direction = this.degree2Direction(z.current.degree);
+      }
+      ne.push({
+        utc: ee.add(d, "h").format(),
+        weather: { ...Y },
+        ...z
+      });
+    }
+    return ne;
+  }
+  static pickDaily(t, e) {
+    var h, s, u, C, W, P, N, I, H, v, S, a, l, R, T, E, G, A, F, V, O, B, J;
+    const w = typeof e == "string" ? U(e) : e, k = t.weather, M = t.marine, Z = U(k[0].daily.time.at(0)), K = U(k[0].daily.time.at(-1)), j = [];
+    if (w.isBetween(Z, K, "millisecond", "[]")) {
+      let L, f;
+      const p = w.diff(Z, "d", !1);
+      for (const g of k) {
+        const m = g.daily;
+        L = {
+          code: (h = m.weather_code) == null ? void 0 : h.at(p),
+          temp: {
+            max: (s = m.temperature_2m_max) == null ? void 0 : s.at(p),
+            min: (u = m.temperature_2m_min) == null ? void 0 : u.at(p)
+          },
+          apparentTemp: {
+            max: (C = m.apparent_temperature_max) == null ? void 0 : C.at(p),
+            min: (W = m.apparent_temperature_min) == null ? void 0 : W.at(p)
+          },
+          precip: {
+            sum: (P = m.precipitation_sum) == null ? void 0 : P.at(p),
+            hours: (N = m.precipitation_hours) == null ? void 0 : N.at(p),
+            probability: (I = m.precipitation_probability_max) == null ? void 0 : I.at(p)
+          },
+          wind: {
+            speed: (H = m.wind_speed_10m_max) == null ? void 0 : H.at(p),
+            kts: (v = m.wind_speed_10m_max) == null ? void 0 : v.at(p),
+            degree: (S = m.wind_direction_10m_dominant) == null ? void 0 : S.at(p),
+            gusts: (a = m.wind_gusts_10m_max) == null ? void 0 : a.at(p)
+          }
+        };
+        const { name: X, url: Q } = this.parseWeatherCode(L.code, !0);
+        L.name = X, L.url = Q, L.wind.scale = this.beaufort(this.kts2ms(L.wind.kts)), L.wind.direction = this.degree2Direction(L.wind.degree);
+      }
+      for (const g of M) {
+        const m = g.daily;
+        f = {
+          wave: {
+            sig: {
+              height: (l = m.wave_height_max) == null ? void 0 : l.at(p),
+              degree: (R = m.wave_direction_dominant) == null ? void 0 : R.at(p),
+              period: (T = m.wave_period_max) == null ? void 0 : T.at(p)
+            },
+            swell: {
+              height: (E = m.swell_wave_height_max) == null ? void 0 : E.at(p),
+              degree: (G = m.wave_direction_dominant) == null ? void 0 : G.at(p),
+              period: (A = m.swell_wave_period_max) == null ? void 0 : A.at(p),
+              peakPeriod: (F = m.swell_wave_peak_period_max) == null ? void 0 : F.at(p)
+            },
+            wd: {
+              height: (V = m.wind_wave_height_max) == null ? void 0 : V.at(p),
+              degree: (O = m.wind_wave_direction_dominant) == null ? void 0 : O.at(p),
+              period: (B = m.wind_wave_period_max) == null ? void 0 : B.at(p),
+              peakPeriod: (J = m.wind_wave_peak_period_max) == null ? void 0 : J.at(p)
+            }
+          }
+        }, f.wave.sig.direction = this.degree2Direction(f.wave.sig.degree), f.wave.swell.direction = this.degree2Direction(f.wave.swell.degree), f.wave.wd.direction = this.degree2Direction(f.wave.wd.degree), f.wave.sig.scale = this.douglas(f.wave.sig.height), f.wave.swell.scale = this.douglas(f.wave.swell.height), f.wave.wd.scale = this.douglas(f.wave.wd.height);
+      }
+      j.push({
+        utc: Z.add(p, "d").utc().format(),
+        weather: { ...L },
+        ...f
+      });
+    }
+    return j;
+  }
+  static parseWeatherCode(t, e) {
+    const h = this.weatherCode(t);
+    return e ? h.day : h.night;
+  }
+  static weatherCode(t) {
+    const e = {
+      code: t
+    };
+    switch (t) {
+      case 0:
+        e.day = {
+          name: "Sunny",
+          url: "https://osshz.idmwx.com/asset/weather/01d.svg"
+        }, e.night = {
+          name: "Clear",
+          url: "https://osshz.idmwx.com/asset/weather/01n.svg"
+        };
+        break;
+      case 1:
+        e.day = {
+          name: "Mainly Sunny",
+          url: "https://osshz.idmwx.com/asset/weather/01d.svg"
+        }, e.night = {
+          name: "Mainly Clear",
+          url: "https://osshz.idmwx.com/asset/weather/01n.svg"
+        };
+        break;
+      case 2:
+        e.day = {
+          name: "Partly Cloudy",
+          url: "https://osshz.idmwx.com/asset/weather/02d.svg"
+        }, e.night = {
+          name: "Partly Cloudy",
+          url: "https://osshz.idmwx.com/asset/weather/02n.svg"
+        };
+        break;
+      case 3:
+        e.day = {
+          name: "Cloudy",
+          url: "https://osshz.idmwx.com/asset/weather/03d.svg"
+        }, e.night = {
+          name: "Cloudy",
+          url: "https://osshz.idmwx.com/asset/weather/03n.svg"
+        };
+        break;
+      case 45:
+        e.day = {
+          name: "Foggy",
+          url: "https://osshz.idmwx.com/asset/weather/50d.svg"
+        }, e.night = {
+          name: "Foggy",
+          url: "https://osshz.idmwx.com/asset/weather/50n.svg"
+        };
+        break;
+      case 48:
+        e.day = {
+          name: "Rime Fog",
+          url: "https://osshz.idmwx.com/asset/weather/50d.svg"
+        }, e.night = {
+          name: "Rime Fog",
+          url: "https://osshz.idmwx.com/asset/weather/50n.svg"
+        };
+        break;
+      case 51:
+        e.day = {
+          name: "Light Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Light Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 53:
+        e.day = {
+          name: "Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 55:
+        e.day = {
+          name: "Heavy Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Heavy Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 56:
+        e.day = {
+          name: "Light Freezing Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Light Freezing Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 57:
+        e.day = {
+          name: "Freezing Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Freezing Drizzle",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 61:
+        e.day = {
+          name: "Light Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10d.svg"
+        }, e.night = {
+          name: "Light Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10n.svg"
+        };
+        break;
+      case 63:
+        e.day = {
+          name: "Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10d.svg"
+        }, e.night = {
+          name: "Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10n.svg"
+        };
+        break;
+      case 65:
+        e.day = {
+          name: "Heavy Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10d.svg"
+        }, e.night = {
+          name: "Heavy Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10n.svg"
+        };
+        break;
+      case 66:
+        e.day = {
+          name: "Light Freezing Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10d.svg"
+        }, e.night = {
+          name: "Light Freezing Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10n.svg"
+        };
+        break;
+      case 67:
+        e.day = {
+          name: "Freezing Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10d.svg"
+        }, e.night = {
+          name: "Freezing Rain",
+          url: "https://osshz.idmwx.com/asset/weather/10n.svg"
+        };
+        break;
+      case 71:
+        e.day = {
+          name: "Light Snow",
+          url: "https://osshz.idmwx.com/asset/weather/13d.svg"
+        }, e.night = {
+          name: "Light Snow",
+          url: "https://osshz.idmwx.com/asset/weather/13n.svg"
+        };
+        break;
+      case 73:
+        e.day = {
+          name: "Snow",
+          url: "https://osshz.idmwx.com/asset/weather/13d.svg"
+        }, e.night = {
+          name: "Snow",
+          url: "https://osshz.idmwx.com/asset/weather/13n.svg"
+        };
+        break;
+      case 75:
+        e.day = {
+          name: "Heavy Snow",
+          url: "https://osshz.idmwx.com/asset/weather/13d.svg"
+        }, e.night = {
+          name: "Heavy Snow",
+          url: "https://osshz.idmwx.com/asset/weather/13n.svg"
+        };
+        break;
+      case 77:
+        e.day = {
+          name: "Snow Grains",
+          url: "https://osshz.idmwx.com/asset/weather/13d.svg"
+        }, e.night = {
+          name: "Snow Grains",
+          url: "https://osshz.idmwx.com/asset/weather/13n.svg"
+        };
+        break;
+      case 80:
+        e.day = {
+          name: "Light Showers",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Light Showers",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 81:
+        e.day = {
+          name: "Showers",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Showers",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 82:
+        e.day = {
+          name: "Heavy Showers",
+          url: "https://osshz.idmwx.com/asset/weather/09d.svg"
+        }, e.night = {
+          name: "Heavy Showers",
+          url: "https://osshz.idmwx.com/asset/weather/09n.svg"
+        };
+        break;
+      case 85:
+        e.day = {
+          name: "Light Snow Showers",
+          url: "https://osshz.idmwx.com/asset/weather/13d.svg"
+        }, e.night = {
+          name: "Light Snow Showers",
+          url: "https://osshz.idmwx.com/asset/weather/13n.svg"
+        };
+        break;
+      case 86:
+        e.day = {
+          name: "Snow Showers",
+          url: "https://osshz.idmwx.com/asset/weather/13d.svg"
+        }, e.night = {
+          name: "Snow Showers",
+          url: "https://osshz.idmwx.com/asset/weather/13n.svg"
+        };
+        break;
+      case 95:
+        e.day = {
+          name: "Thunderstorm",
+          url: "https://osshz.idmwx.com/asset/weather/11d.svg"
+        }, e.night = {
+          name: "Thunderstorm",
+          url: "https://osshz.idmwx.com/asset/weather/11n.svg"
+        };
+        break;
+      case 96:
+        e.day = {
+          name: "Light Thunderstorms With Hail",
+          url: "https://osshz.idmwx.com/asset/weather/11d.svg"
+        }, e.night = {
+          name: "Light Thunderstorms With Hail",
+          url: "https://osshz.idmwx.com/asset/weather/11n.svg"
+        };
+        break;
+      case 99:
+        e.day = {
+          name: "Thunderstorms With Hail",
+          url: "https://osshz.idmwx.com/asset/weather/11d.svg"
+        }, e.night = {
+          name: "Thunderstorms With Hail",
+          url: "https://osshz.idmwx.com/asset/weather/11n.svg"
+        };
+        break;
+    }
+    return e;
+  }
+  static kts2ms(t) {
+    return Number.isNaN(t) ? t : Math.round(t * 1852 / 3600 * 1e4) / 1e4;
+  }
+  static kts2kmh(t) {
+    return Number.isNaN(t) ? t : t * 1.852;
+  }
+  static m2nm(t) {
+    return Number.isNaN(t) ? t : Math.round(t / 1e3 / 1.852 * 1e4) / 1e4;
+  }
+  static kmh2kts(t) {
+    return Number.isNaN(t) ? t : this.ms2kts(t * 1e3 / 3600);
+  }
+  static ms2kts(t) {
+    return Number.isNaN(t) ? t : Math.round(t * 3600 / 1852 * 1e4) / 1e4;
+  }
+  /**
+   * 角度转为弧度
+   * @param degree
+   */
+  static degree2Radian(t) {
+    if (Number.isNaN(t))
+      return t;
+    let e = t % 360 / 360 * 2 * Math.PI;
+    return e = e < 0 ? e + 2 * Math.PI : e, e;
+  }
+  /**
+   * 将方位角转换为方向
+   * @param degree 角度[-360,360]
+   * @return {string}
+   */
+  static degree2Direction(t) {
+    const e = this.degree2Radian(t);
+    let h = "N/A";
+    const s = Math.PI / 16;
+    return e < s ? h = "N" : e >= s && e < 3 * s ? h = "NNE" : e >= 3 * s && e < 5 * s ? h = "NE" : e >= 5 * s && e < 7 * s ? h = "ENE" : e >= 7 * s && e < 9 * s ? h = "E" : e >= 9 * s && e < 11 * s ? h = "ESE" : e >= 11 * s && e < 13 * s ? h = "SE" : e >= 13 * s && e < 15 * s ? h = "SSE" : e >= 15 * s && e < 17 * s ? h = "S" : e >= 17 * s && e < 19 * s ? h = "SSW" : e >= 19 * s && e < 21 * s ? h = "SW" : e >= 21 * s && e < 23 * s ? h = "WSW" : e >= 23 * s && e < 25 * s ? h = "W" : e >= 25 * s && e < 27 * s ? h = "WNW" : e >= 27 * s && e < 29 * s ? h = "NW" : e >= 29 * s && e < 31 * s ? h = "NNW" : e >= 31 * s && e < 32 * s && (h = "N"), h;
+  }
+  /**
+   * 计算风力蒲福等级
+   * @param speed m/s
+   * @returns {number}
+   */
+  static beaufort(t) {
+    let e = 0;
+    return isNaN(t) || (t = Math.round(t * 10) / 10, t <= 0.2 ? e = 0 : t <= 1.5 ? e = 1 : t <= 3.3 ? e = 2 : t <= 5.4 ? e = 3 : t <= 7.9 ? e = 4 : t <= 10.7 ? e = 5 : t <= 13.8 ? e = 6 : t <= 17.1 ? e = 7 : t <= 20.7 ? e = 8 : t <= 22.4 ? e = 9 : t <= 28.4 ? e = 10 : t <= 32.6 ? e = 11 : t > 32.6 && (e = 12)), e;
+  }
+  /**
+   * 计算海浪等级
+   * @param height 高度 m
+   */
+  static douglas(t) {
+    let e = "Calm";
+    return isNaN(t) || t <= 0.1 ? e = "Calm" : t <= 0.5 ? e = "Smooth" : t <= 1.25 ? e = "Slight" : t <= 2.5 ? e = "Moderate" : t <= 4 ? e = "Rough" : t <= 6 ? e = "VeryRough" : t <= 9 ? e = "High" : t <= 14 ? e = "VeryHigh" : e = "Precipitous", e;
+  }
+}
+const fe = (r, t) => {
+  const e = r.__vccOpts || r;
+  for (const [h, s] of t)
+    e[h] = s;
+  return e;
+}, xe = {
+  name: "SpotReport",
+  // components: { Search }, //Download
+  props: {
+    token: {
+      type: String,
+      default: ""
+    },
+    ts: {
+      type: String,
+      default: U().utc().format()
+    },
+    timeZone: {
+      type: Number,
+      default: 8
+    },
+    report: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      placeholder: "search for port name or coordinates",
+      searchName: void 0,
+      rawSearchIcon: ve(ge),
+      positionGmt: void 0,
+      localDate: void 0,
+      meteoData: {},
+      a: void 0,
+      positionList: [],
+      position: void 0,
+      loading: !0,
+      activeIndex: void 0,
+      tableData: {},
+      pickedDate: void 0,
+      collectList: [],
+      isCollected: !1
+    };
+  },
+  computed: {
+    computeHourL() {
+      return function(r) {
+        return r ? `${q(r).tz(this.positionGmt).format("HH")}` : "-";
+      };
+    },
+    computeHourZ() {
+      return function(r) {
+        return r ? `${U(r).utc().format("HH")}Z` : "-";
+      };
+    },
+    computeWeek() {
+      return function(r) {
+        return r ? `${q(r).tz(this.positionGmt).format("dddd")}` : "-";
+      };
+    },
+    computeMMMDD() {
+      return function(r) {
+        return r ? `${q(r).tz(this.positionGmt).format("MMM-DD")}` : "-";
+      };
+    },
+    computeLat() {
+      return function(r, t = 4) {
+        return se.lat2pretty(r, t).pretty;
+      };
+    },
+    computeLng() {
+      return function(r, t = 4) {
+        return se.lng2pretty(r, t).pretty;
+      };
+    },
+    roundPrecision() {
+      return function(r, t = 4) {
+        return isNaN(r) ? "-" : se.roundPrecision(r, t);
+      };
+    }
+  },
+  watch: {
+    report: {
+      handler() {
+        var r, t;
+        this.report && (this.meteoData = this.report, this.position = {
+          id: this.report.portId,
+          lat: (r = this.report) == null ? void 0 : r.lat,
+          lng: (t = this.report) == null ? void 0 : t.lng,
+          name: this.computeLat(this.report.lat) + "," + this.computeLng(this.report.lng)
+        }, this.handleRender());
+      }
+    }
+  },
+  methods: {
+    handleRender() {
+      var r, t;
+      this.loading = !1, this.positionGmt = (t = (r = this.meteoData.weather) == null ? void 0 : r[0]) == null ? void 0 : t.timezone, this.localDate = q(this.ts).tz(this.positionGmt).format("MMM-DD/HHmm, YYYY [LT]"), this.activeIndex = q(this.ts).tz(this.positionGmt).hour(), this.pickedDate = q(this.ts).tz(this.positionGmt).set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).format(), this.$nextTick(() => {
+        this.initInfo(), this.initTableData(), this.initEchart();
+      });
+    },
+    initInfo() {
+      this.collectList = JSON.parse(localStorage.getItem("idmCollectList") || "[]"), this.positionList = JSON.parse(JSON.stringify(this.collectList)), this.isCollected = this.collectList.some((r) => {
+        var t;
+        return r.name === ((t = this.position) == null ? void 0 : t.name);
+      });
+    },
+    initTableData() {
+      var r, t, e, h, s, u, C, W, P, N, I, H, v, S, a, l, R, T, E, G, A, F, V, O, B, J, w, k, M, Z, K, j, L;
+      this.tableData = {
+        hours: [],
+        utcHours: [],
+        weatherUrls: [],
+        temp: [],
+        precipProbability: [],
+        precip1h: [],
+        visibility: [],
+        humidity: [],
+        windSpeed: [],
+        windDir: [],
+        windGust: [],
+        sigwaveHeight: [],
+        sigwaveDir: [],
+        windwaveHeight: [],
+        windwaveDir: [],
+        windwavePeriod: [],
+        swellHeight: [],
+        swellDir: [],
+        swellPeriod: [],
+        currentSpeed: [],
+        currentDir: []
+      };
+      for (let f = 0; f < 24; f++) {
+        const p = U(this.pickedDate).clone().add(f, "h").format();
+        this.tableData.hours.push(p);
+        const g = ((r = ce.pickHourly(this.meteoData, p)) == null ? void 0 : r[0]) || {};
+        this.tableData.weatherUrls.push((t = g.weather) == null ? void 0 : t.url), this.tableData.temp.push(this.roundPrecision((e = g.weather) == null ? void 0 : e.temp, 0) ?? "-"), this.tableData.precipProbability.push(this.roundPrecision((s = (h = g.weather) == null ? void 0 : h.precip) == null ? void 0 : s.probability, 0) ?? "-"), this.tableData.precip1h.push(this.roundPrecision((C = (u = g.weather) == null ? void 0 : u.precip) == null ? void 0 : C.sum, 0) ?? "-"), this.tableData.visibility.push(this.roundPrecision((W = g.weather) == null ? void 0 : W.visibility, 0) ?? "-"), this.tableData.humidity.push(this.roundPrecision((P = g.weather) == null ? void 0 : P.rh, 0) ?? "-"), this.tableData.windSpeed.push(this.roundPrecision((I = (N = g.weather) == null ? void 0 : N.wind) == null ? void 0 : I.kts, 1)), this.tableData.windDir.push((v = (H = g.weather) == null ? void 0 : H.wind) == null ? void 0 : v.bearing), this.tableData.windGust.push(this.roundPrecision((a = (S = g.weather) == null ? void 0 : S.wind) == null ? void 0 : a.gusts, 1) ?? "-"), this.tableData.sigwaveHeight.push(this.roundPrecision((R = (l = g.wave) == null ? void 0 : l.sig) == null ? void 0 : R.height, 1) ?? "-"), this.tableData.sigwaveDir.push((E = (T = g.wave) == null ? void 0 : T.sig) == null ? void 0 : E.bearing), this.tableData.windwaveHeight.push(this.roundPrecision((A = (G = g.wave) == null ? void 0 : G.wd) == null ? void 0 : A.height, 1) ?? "-"), this.tableData.windwaveDir.push((V = (F = g.wave) == null ? void 0 : F.wd) == null ? void 0 : V.bearing), this.tableData.windwavePeriod.push(this.roundPrecision((B = (O = g.wave) == null ? void 0 : O.wd) == null ? void 0 : B.period, 1) ?? "-"), this.tableData.swellHeight.push(this.roundPrecision((w = (J = g.wave) == null ? void 0 : J.swell) == null ? void 0 : w.height, 1) ?? "-"), this.tableData.swellDir.push((M = (k = g.wave) == null ? void 0 : k.swell) == null ? void 0 : M.bearing), this.tableData.swellPeriod.push(this.roundPrecision((K = (Z = g.wave) == null ? void 0 : Z.swell) == null ? void 0 : K.period, 1) ?? "-"), this.tableData.currentSpeed.push(this.roundPrecision((j = g.current) == null ? void 0 : j.speed, 1) ?? "-"), this.tableData.currentDir.push((L = g.current) == null ? void 0 : L.bearing);
+      }
+    },
+    initEchart() {
+      var l, R, T, E, G, A, F, V, O, B, J;
+      const r = [], t = [], e = [], h = [], s = [], u = [], C = [], W = [], P = [];
+      for (let w = 0; w < 7; w++) {
+        const k = U(this.pickedDate).clone().add(w, "d");
+        r.push(q(k).tz(this.positionGmt).format("yyyy-MM-DD")), t.push(this.computeMMMDD(k)), e.push(this.computeWeek(k));
+        const M = ((l = ce.pickDaily(this.meteoData, k)) == null ? void 0 : l[0]) || {};
+        h.push(this.roundPrecision((T = (R = M.weather) == null ? void 0 : R.temp) == null ? void 0 : T.min, 0)), s.push(this.roundPrecision((G = (E = M.weather) == null ? void 0 : E.temp) == null ? void 0 : G.max, 0)), C.push(this.roundPrecision((F = (A = M.weather) == null ? void 0 : A.wind) == null ? void 0 : F.kts, 1) + " kts"), P.push(this.roundPrecision((O = (V = M.weather) == null ? void 0 : V.precip) == null ? void 0 : O.sum, 0) + " mm"), u.push({ symbol: "image://" + ((B = M.weather) == null ? void 0 : B.url) }), W.push({ symbol: "image://" + ((J = M.weather) == null ? void 0 : J.url) });
+      }
+      const N = Math.max(...s.filter((w) => typeof w == "number" && !isNaN(w))) - Math.min(...h.filter((w) => typeof w == "number" && !isNaN(w))), I = Math.min(...h.filter((w) => typeof w == "number" && !isNaN(w))) - 1.5 * N, H = Math.max(...s.filter((w) => typeof w == "number" && !isNaN(w))) + 2 * N, v = 4 + 0.5 / r.length * 92 + "%", S = re.init(document.getElementById("weather-chart")), a = {
+        grid: {
+          bottom: 0,
+          top: 0,
+          left: "4%",
+          right: "4%"
+        },
+        tooltip: {
+          trigger: "none",
+          show: !1
+        },
+        legend: {
+          show: !1
+        },
+        xAxis: {
+          left: 0,
+          right: 0,
+          top: "50%",
+          height: "50%",
+          type: "category",
+          data: r,
+          show: !1
+        },
+        singleAxis: [
+          {
+            left: v,
+            right: v,
+            type: "category",
+            show: !1,
+            axisLine: {
+              show: !1
+              // 隐藏轴线
+            },
+            axisTick: {
+              show: !1
+              // 隐藏刻度
+            },
+            axisLabel: {
+              show: !1
+              // 隐藏刻度标签
+            },
+            splitLine: {
+              show: !1
+              // 隐藏分割线
+            },
+            boundaryGap: !1,
+            data: r,
+            top: "5%",
+            height: "2%"
+          },
+          {
+            left: v,
+            right: v,
+            type: "category",
+            show: !1,
+            axisLine: {
+              show: !1
+              // 隐藏轴线
+            },
+            axisTick: {
+              show: !1
+              // 隐藏刻度
+            },
+            axisLabel: {
+              show: !1
+              // 隐藏刻度标签
+            },
+            splitLine: {
+              show: !1
+              // 隐藏分割线
+            },
+            boundaryGap: !1,
+            data: r,
+            top: "14%",
+            height: "2%"
+          },
+          {
+            left: v,
+            right: v,
+            type: "category",
+            show: !1,
+            axisLine: {
+              show: !1
+              // 隐藏轴线
+            },
+            axisTick: {
+              show: !1
+              // 隐藏刻度
+            },
+            axisLabel: {
+              show: !1
+              // 隐藏刻度标签
+            },
+            splitLine: {
+              show: !1
+              // 隐藏分割线
+            },
+            boundaryGap: !1,
+            data: r,
+            top: "27%",
+            height: "2%"
+          },
+          {
+            left: v,
+            right: v,
+            type: "category",
+            show: !1,
+            axisLine: {
+              show: !1
+              // 隐藏轴线
+            },
+            axisTick: {
+              show: !1
+              // 隐藏刻度
+            },
+            axisLabel: {
+              show: !1
+              // 隐藏刻度标签
+            },
+            splitLine: {
+              show: !1
+              // 隐藏分割线
+            },
+            boundaryGap: !1,
+            data: r,
+            top: "84%",
+            height: "2%"
+          },
+          {
+            left: v,
+            right: v,
+            type: "category",
+            show: !1,
+            axisLine: {
+              show: !1
+              // 隐藏轴线
+            },
+            axisTick: {
+              show: !1
+              // 隐藏刻度
+            },
+            axisLabel: {
+              show: !1
+              // 隐藏刻度标签
+            },
+            splitLine: {
+              show: !1
+              // 隐藏分割线
+            },
+            boundaryGap: !1,
+            data: r,
+            top: "93%",
+            height: "2%"
+          }
+        ],
+        yAxis: {
+          type: "value",
+          name: "温度（℃）",
+          show: !1,
+          min: I,
+          max: H,
+          axisLabel: {
+            formatter: "{value} °C"
+          }
+        },
+        series: [
+          {
+            singleAxisIndex: 0,
+            coordinateSystem: "singleAxis",
+            type: "scatter",
+            data: e,
+            label: {
+              show: !0,
+              color: "#000",
+              formatter: "{c}"
+            },
+            symbolSize: 0
+          },
+          {
+            singleAxisIndex: 1,
+            coordinateSystem: "singleAxis",
+            type: "scatter",
+            data: t,
+            label: {
+              show: !0,
+              color: "#000",
+              formatter: "{c}"
+            },
+            symbolSize: 0
+          },
+          {
+            singleAxisIndex: 2,
+            coordinateSystem: "singleAxis",
+            type: "scatter",
+            data: u,
+            symbolSize: 36
+          },
+          {
+            name: "温度（℃）",
+            type: "line",
+            data: h,
+            smooth: !0,
+            itemStyle: {
+              color: "#2a57b7"
+            },
+            label: {
+              show: !0,
+              position: [-10, 12],
+              formatter: "{c} °C",
+              fontSize: 10
+            },
+            markArea: {
+              itemStyle: {
+                color: "#e1f7ff"
+              },
+              data: [
+                [
+                  {
+                    x: "4%"
+                  },
+                  {
+                    x: 4 + 1 / r.length * 92 + "%"
+                  }
+                ]
+              ]
+            }
+          },
+          {
+            name: "温度（℃）",
+            type: "line",
+            data: s,
+            smooth: !0,
+            itemStyle: {
+              color: "#a7c4ff"
+            },
+            label: {
+              show: !0,
+              position: [-10, -12],
+              formatter: "{c} °C",
+              fontSize: 10
+            }
+          },
+          {
+            singleAxisIndex: 3,
+            coordinateSystem: "singleAxis",
+            type: "scatter",
+            data: C,
+            label: {
+              show: !0,
+              color: "#000",
+              formatter: "{c}"
+            },
+            symbolSize: 0
+          },
+          {
+            singleAxisIndex: 4,
+            coordinateSystem: "singleAxis",
+            type: "scatter",
+            data: P,
+            label: {
+              show: !0,
+              color: "#000",
+              formatter: "{c}"
+            },
+            symbolSize: 0
+          }
+        ]
+      };
+      S.setOption(a), S.on("click", (w) => {
+        const k = w.dataIndex;
+        this.pickedDate = q(r[k]).tz(this.positionGmt).set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).format(), this.initTableData(), a.series[3].markArea = {
+          itemStyle: {
+            color: "#e1f7ff"
+          },
+          data: [
+            [
+              {
+                x: 4 + k / r.length * 92 + "%"
+              },
+              {
+                x: 4 + (k + 1) / r.length * 92 + "%"
+              }
+            ]
+          ]
+        }, S.setOption(a);
+      });
+    },
+    handleCollect() {
+      this.isCollected = !this.isCollected, this.isCollected ? this.collectList.push({ name: this.position.name, lat: this.position.lat, lng: this.position.lng }) : this.collectList = this.collectList.filter((r) => r.name !== this.position.name), localStorage.setItem("idmCollectList", JSON.stringify(this.collectList));
+    },
+    async fetchSuggestPosition(r) {
+      var h;
+      const t = r.replaceAll("，", ",");
+      if (!t)
+        return this.positionList = this.collectList, !1;
+      const e = await de.get(`https://cbe.idmwx.com/api/arc/ports/suggest?n=${t}`, {
+        headers: {
+          Authorization: this.token
+        }
+      });
+      (e == null ? void 0 : e.data.code) === 0 && (this.positionList = (h = e == null ? void 0 : e.data.data) == null ? void 0 : h.map((s) => (s.name = s.id ? s.name : this.computeLat(s.lat) + ", " + this.computeLng(s.lng), s)));
+    },
+    async handleFetchMeteo() {
+      var e, h, s;
+      if (!this.searchName)
+        return !1;
+      this.position = {
+        portId: (e = this.positionList.find((u) => u.name === this.searchName)) == null ? void 0 : e.id,
+        lat: (h = this.positionList.find((u) => u.name === this.searchName)) == null ? void 0 : h.lat,
+        lng: (s = this.positionList.find((u) => u.name === this.searchName)) == null ? void 0 : s.lng,
+        name: this.searchName
+      }, this.handleClear();
+      const r = {
+        lat: this.position.lat,
+        lng: this.position.lng,
+        datetime: this.ts ? U(this.ts).utc().add(-1, "d").format() : U().add(-1, "d").utc().format(),
+        forecastDays: 8,
+        selfHosted: !1
+      }, t = await de.post("https://cbe.idmwx.com/api/arc/meteo2/spot/forecast", r, {
+        headers: {
+          Authorization: this.token
+        }
+      });
+      (t == null ? void 0 : t.data.code) === 0 && (this.meteoData = {
+        ...t == null ? void 0 : t.data.data
+      }), this.handleRender();
+    },
+    handleClear() {
+      this.loading = !0, this.meteoData = {}, this.isCollected = !1, re.dispose(document.getElementById("weather-chart"));
+    }
+  }
+}, _e = { class: "spot-report" }, be = { class: "header-box flex-between" }, ke = { class: "bg" }, De = { class: "search-box flex-start" }, ze = { class: "content-box" }, Se = { class: "title-box flex-between" }, Le = { class: "main-title" }, Ne = { class: "sub-title" }, Me = { class: "flex-end" }, Ce = {
+  key: 0,
+  id: "weather-chart"
+}, Pe = {
+  key: 1,
+  class: "weather-chart flex-center"
+}, Ie = {
+  key: 2,
+  class: "weather-chart flex-center"
+}, He = {
+  key: 3,
+  class: "card-box"
+}, We = { class: "date" }, Re = { class: "basic-table" }, Te = { class: "day" }, Ee = {
+  rowspan: "1",
+  colspan: "1",
+  class: "tr-title"
+}, Ge = { class: "hour" }, Ae = { class: "icon" }, Fe = ["src"], Ve = { class: "text" }, Oe = { class: "text" }, Be = { class: "text" }, Je = { class: "text" }, Ue = { class: "text" }, Ye = { class: "text" }, Ze = { key: 1 }, je = { class: "text" }, qe = { class: "text" }, Ke = { class: "wave-current-table" }, Qe = { class: "text" }, Xe = { class: "text" }, $e = { key: 1 }, et = { class: "text" }, tt = { class: "text" }, st = { class: "text" }, at = { key: 1 }, it = { class: "text" }, ot = { class: "text" }, nt = { class: "text" }, rt = { key: 1 }, lt = { class: "text" }, ht = {
+  key: 4,
+  class: "card-box flex-center"
+}, dt = {
+  key: 5,
+  class: "card-box flex-center"
+};
+function ct(r, t, e, h, s, u) {
+  var N, I, H, v, S;
+  const C = ae("ElOption"), W = ae("ElSelect"), P = ae("ElTooltip");
+  return o(), n("div", _e, [
+    i("div", be, [
+      i("div", ke, [
+        i("div", De, [
+          le(W, {
+            modelValue: s.searchName,
+            "onUpdate:modelValue": t[0] || (t[0] = (a) => s.searchName = a),
+            filterable: "",
+            class: "input",
+            clearable: "",
+            remote: "",
+            placeholder: s.placeholder,
+            autocomplete: "",
+            "remote-show-suffix": "",
+            onFocus: t[1] || (t[1] = (a) => s.placeholder = ""),
+            onBlur: t[2] || (t[2] = (a) => s.placeholder = "search for port name or coordinates"),
+            "remote-method": u.fetchSuggestPosition,
+            onChange: u.handleFetchMeteo
+          }, {
+            default: he(() => [
+              (o(!0), n(x, null, _(s.positionList, (a) => (o(), ye(C, {
+                key: a.name,
+                label: a.name,
+                value: a.name
+              }, null, 8, ["label", "value"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder", "remote-method", "onChange"])
+        ])
+      ])
+    ]),
+    i("div", ze, [
+      i("div", Se, [
+        i("div", null, [
+          i("div", Le, "Weather forecast for " + y(((N = s.position) == null ? void 0 : N.name) || "-") + " ( " + y(s.positionGmt) + " )", 1),
+          i("div", Ne, "At " + y((I = s.position) != null && I.portId ? "port" : "coordinates") + ", issued " + y(s.localDate), 1)
+        ]),
+        i("div", Me, [
+          le(P, {
+            placement: "left",
+            effect: "light",
+            content: s.isCollected ? "remove the port/coordinate from the search list" : "add the port/coordinate to the search list",
+            "show-after": 1e3
+          }, {
+            default: he(() => [
+              s.isCollected ? (o(), n("span", {
+                key: 0,
+                class: "iconfont icon active",
+                onClick: t[3] || (t[3] = (...a) => u.handleCollect && u.handleCollect(...a))
+              }, "")) : (o(), n("span", {
+                key: 1,
+                class: "iconfont icon",
+                onClick: t[4] || (t[4] = (...a) => u.handleCollect && u.handleCollect(...a))
+              }, ""))
+            ]),
+            _: 1
+          }, 8, ["content"])
+        ])
+      ]),
+      (H = s.position) != null && H.name && !s.loading ? (o(), n("div", Ce)) : s.loading ? (o(), n("div", Pe, "Loading....")) : s.position.name ? ie("", !0) : (o(), n("div", Ie, "No Data")),
+      (v = s.position) != null && v.name && !s.loading ? (o(), n("div", He, [
+        i("div", We, y(u.computeWeek(s.pickedDate)) + " " + y(u.computeMMMDD(s.pickedDate)), 1),
+        i("table", Re, [
+          i("tr", Te, [
+            i("th", Ee, "Local time (" + y(s.positionGmt) + ")", 1),
+            (o(!0), n(x, null, _(s.tableData.hours, (a, l) => (o(), n("th", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + "local"
+            }, y(u.computeHourL(a)), 3))), 128))
+          ]),
+          i("tr", Ge, [
+            t[5] || (t[5] = i("th", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, null, -1)),
+            (o(!0), n(x, null, _(s.tableData.hours, (a, l) => (o(), n("th", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + "z"
+            }, y(u.computeHourZ(a)), 3))), 128))
+          ]),
+          i("tr", Ae, [
+            t[6] || (t[6] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, "Weather", -1)),
+            (o(!0), n(x, null, _(s.tableData.weatherUrls, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + "url"
+            }, [
+              a ? (o(), n("img", {
+                key: 0,
+                class: "iconfont weather-icon",
+                src: a
+              }, null, 8, Fe)) : ie("", !0)
+            ], 2))), 128))
+          ]),
+          i("tr", Ve, [
+            t[7] || (t[7] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Temperature"),
+              i("span", { class: "unit" }, "°C")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.temp, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", Oe, [
+            t[8] || (t[8] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Precipitation Probability"),
+              i("span", { class: "unit" }, "%")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.precipProbability, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", Be, [
+            t[9] || (t[9] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Precipitation 1h"),
+              i("span", { class: "unit" }, "mm")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.precip1h, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", Je, [
+            t[10] || (t[10] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Visibility"),
+              i("span", { class: "unit" }, "nm")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.visibility, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", Ue, [
+            t[11] || (t[11] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Relative Humidity"),
+              i("span", { class: "unit" }, "%")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.humidity, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", Ye, [
+            t[12] || (t[12] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Wind direction"),
+              i("span", { class: "unit" })
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.windDir, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, [
+              a ? (o(), n("span", {
+                key: 0,
+                class: "iconfont icon",
+                style: $({ display: "inline-block", transform: `rotate(${a}deg)` })
+              }, "", 4)) : (o(), n("span", Ze, "-"))
+            ], 2))), 128))
+          ]),
+          i("tr", je, [
+            t[13] || (t[13] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Wind speed"),
+              i("span", { class: "unit" }, "kts")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.windSpeed, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", qe, [
+            t[14] || (t[14] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Wind gust"),
+              i("span", { class: "unit" }, "kts")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.windGust, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ])
+        ]),
+        t[24] || (t[24] = i("div", { style: { "text-align": "center", padding: "3px 0 3px 200px" } }, "Wave & Current", -1)),
+        i("table", Ke, [
+          i("tr", Qe, [
+            t[15] || (t[15] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Wind wave height"),
+              i("span", { class: "unit" }, "m")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.windwaveHeight, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", Xe, [
+            t[16] || (t[16] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Wind wave direction"),
+              i("span", { class: "unit" })
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.windwaveDir, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, [
+              a ? (o(), n("span", {
+                key: 0,
+                class: "iconfont icon",
+                style: $({ display: "inline-block", transform: `rotate(${a}deg)` })
+              }, "", 4)) : (o(), n("span", $e, "-"))
+            ], 2))), 128))
+          ]),
+          i("tr", et, [
+            t[17] || (t[17] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Wind wave period"),
+              i("span", { class: "unit" }, "s")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.windwavePeriod, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", tt, [
+            t[18] || (t[18] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Swell height"),
+              i("span", { class: "unit" }, "m")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.swellHeight, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", st, [
+            t[19] || (t[19] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Swell direction"),
+              i("span", { class: "unit" })
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.swellDir, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, [
+              a ? (o(), n("span", {
+                key: 0,
+                class: "iconfont icon",
+                style: $({ display: "inline-block", transform: `rotate(${a}deg)` })
+              }, "", 4)) : (o(), n("span", at, "-"))
+            ], 2))), 128))
+          ]),
+          i("tr", it, [
+            t[20] || (t[20] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Swell period"),
+              i("span", { class: "unit" }, "s")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.swellPeriod, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", ot, [
+            t[21] || (t[21] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Sig wave height"),
+              i("span", { class: "unit" }, "m")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.sigwaveHeight, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ]),
+          i("tr", nt, [
+            t[22] || (t[22] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Current direction"),
+              i("span", { class: "unit" })
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.currentDir, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, [
+              a ? (o(), n("span", {
+                key: 0,
+                class: "iconfont icon",
+                style: $({ display: "inline-block", transform: `rotate(${a}deg)` })
+              }, "", 4)) : (o(), n("span", rt, "-"))
+            ], 2))), 128))
+          ]),
+          i("tr", lt, [
+            t[23] || (t[23] = i("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: "tr-title"
+            }, [
+              D("Current speed"),
+              i("span", { class: "unit" }, "kts")
+            ], -1)),
+            (o(!0), n(x, null, _(s.tableData.currentSpeed, (a, l) => (o(), n("td", {
+              rowspan: "1",
+              colspan: "1",
+              class: b(s.activeIndex === l ? "active" : ""),
+              key: Math.random() + a
+            }, y(a), 3))), 128))
+          ])
+        ])
+      ])) : s.loading ? (o(), n("div", ht, "Loading....")) : (S = s.position) != null && S.name ? ie("", !0) : (o(), n("div", dt, "No Data"))
+    ])
+  ]);
+}
+const pt = /* @__PURE__ */ fe(xe, [["render", ct], ["__scopeId", "data-v-a8325fc3"]]), ft = {
+  install(r) {
+    r.component("SpotReport", pt);
+  }
+};
+export {
+  pt as SpotReport,
+  ft as SpotReportPlugin
+};