@kq_npm/client3d_webgl_vue 4.5.29-beta → 4.5.30

package/typhoontrac/index.js

@@ -2,11 +2,11 @@
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("vue"), require("@kq_npm/client_common_vue/_utils/gis-utils"), require("@kq_npm/client_common_vue/init.js"), require("@kq_npm/client_common_vue/_utils/util"));
 	else if(typeof define === 'function' && define.amd)
-		define(["vue", "@kq_npm/client_common_vue/_utils/gis-utils", "@kq_npm/client_common_vue/init.js", "@kq_npm/client_common_vue/_utils/util"], factory);
-	else {
-		var a = typeof exports === 'object' ? factory(require("vue"), require("@kq_npm/client_common_vue/_utils/gis-utils"), require("@kq_npm/client_common_vue/init.js"), require("@kq_npm/client_common_vue/_utils/util")) : factory(root["Vue"], root["@kq_npm/client_common_vue/_utils/gis-utils"], root["@kq_npm/client_common_vue/init.js"], root["@kq_npm/client_common_vue/_utils/util"]);
-		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
-	}
+		define("@kq_npm/client3d_webgl_vue", ["vue", "@kq_npm/client_common_vue/_utils/gis-utils", "@kq_npm/client_common_vue/init.js", "@kq_npm/client_common_vue/_utils/util"], factory);
+	else if(typeof exports === 'object')
+		exports["@kq_npm/client3d_webgl_vue"] = factory(require("vue"), require("@kq_npm/client_common_vue/_utils/gis-utils"), require("@kq_npm/client_common_vue/init.js"), require("@kq_npm/client_common_vue/_utils/util"));
+	else
+		root["@kq_npm/client3d_webgl_vue"] = factory(root["Vue"], root["@kq_npm/client_common_vue/_utils/gis-utils"], root["@kq_npm/client_common_vue/init.js"], root["@kq_npm/client_common_vue/_utils/util"]);
 })(this, function(__WEBPACK_EXTERNAL_MODULE__1895__, __WEBPACK_EXTERNAL_MODULE__7135__, __WEBPACK_EXTERNAL_MODULE__7997__, __WEBPACK_EXTERNAL_MODULE__3458__) {
 return /******/ (function() { // webpackBootstrap
 /******/ 	"use strict";
@@ -25,10 +25,12 @@ return /******/ (function() { // webpackBootstrap
  */
 
 
+
 element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage.install = (Vue, opts) => {
   _init__WEBPACK_IMPORTED_MODULE_1___default()(Vue, opts);
   Vue.component("KqMessage", element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage);
 };
+
 /* unused harmony default export */ var __WEBPACK_DEFAULT_EXPORT__ = ((/* unused pure expression or super */ null && (KqMessage)));
 
 /***/ }),
@@ -40,27 +42,6 @@ module.exports = require("@kq_npm/client_icons_vue");
 
 /***/ }),
 
-/***/ 4360:
-/***/ (function(module) {
-
-module.exports = require("core-js/modules/web.url-search-params.delete.js");
-
-/***/ }),
-
-/***/ 8824:
-/***/ (function(module) {
-
-module.exports = require("core-js/modules/web.url-search-params.has.js");
-
-/***/ }),
-
-/***/ 2936:
-/***/ (function(module) {
-
-module.exports = require("core-js/modules/web.url-search-params.size.js");
-
-/***/ }),
-
 /***/ 9389:
 /***/ (function(module) {
 
@@ -103,59 +84,27 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__1895__;
 
 /***/ }),
 
-/***/ 5301:
+/***/ 8270:
 /***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "Z": function() { return /* binding */ _defineProperty; }
-});
-
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPrimitive.js
-
-function toPrimitive(t, r) {
-  if ("object" != _typeof(t) || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != _typeof(i)) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": function() { return /* binding */ _defineProperty; }
+/* harmony export */ });
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
-  return ("string" === r ? String : Number)(t);
-}
-
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
-
-
-function toPropertyKey(t) {
-  var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : i + "";
-}
-
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
 
-function _defineProperty(e, r, t) {
-  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
+  return obj;
 }
 
-
 /***/ })
 
 /******/ 	});
@@ -238,22 +187,17 @@ __webpack_require__.d(__webpack_exports__, {
   "default": function() { return /* reexport */ TyphoonTrac; }
 });
 
-// EXTERNAL MODULE: external "core-js/modules/web.url-search-params.delete.js"
-var web_url_search_params_delete_js_ = __webpack_require__(4360);
-// EXTERNAL MODULE: external "core-js/modules/web.url-search-params.has.js"
-var web_url_search_params_has_js_ = __webpack_require__(8824);
-// EXTERNAL MODULE: external "core-js/modules/web.url-search-params.size.js"
-var web_url_search_params_size_js_ = __webpack_require__(2936);
 // EXTERNAL MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
 var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(1895);
 // EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/gis-utils"
 var gis_utils_ = __webpack_require__(7135);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js + 3 modules
-var defineProperty = __webpack_require__(5301);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
+var defineProperty = __webpack_require__(8270);
 // EXTERNAL MODULE: ./src/common/_ui/message/index.js
 var message = __webpack_require__(1349);
 ;// CONCATENATED MODULE: ./src/webgl/typhoontrac/TyphoonTracViewModel.js
 
+
 /*
  * Copyright (C) 2019 KQ GEO Technologies Co., Ltd.
  * All rights reserved.
@@ -261,16 +205,397 @@ var message = __webpack_require__(1349);
 
 class TyphoonTracViewModel {
   // 三维viewer对象
-  constructor(scenceView, option) {
+  constructor(scenceView) {
     (0,defineProperty/* default */.Z)(this, "_viewer", null);
+
+    (0,defineProperty/* default */.Z)(this, "_language", null);
+
+    (0,defineProperty/* default */.Z)(this, "_curTyphoon", []);
+
+    (0,defineProperty/* default */.Z)(this, "currentRow", null);
+
+    (0,defineProperty/* default */.Z)(this, "divPoint", null);
+
+    (0,defineProperty/* default */.Z)(this, "warningLine_24", null);
+
+    (0,defineProperty/* default */.Z)(this, "warningLine_48", null);
+
+    (0,defineProperty/* default */.Z)(this, "eventListener", null);
+
+    (0,defineProperty/* default */.Z)(this, "eventListener2", null);
+
     this._viewer = scenceView._viewer;
+    this._language = scenceView._language;
+    this._viewer.postProcessStages.fxaa.enabled = true; // 开启深度检测
+
+    this._viewer.scene.globe.depthTestAgainstTerrain = true;
+  } // 更新语言
+
+
+  changeLanguage(val) {
+    this._language = val;
+  } // 控制台风显示
+
+
+  createTyphoonPath(row, play = false) {
+    let that = this;
+
+    if (this._curTyphoon[row.tfid]) {
+      this._curTyphoon[row.tfid].setVisible(row.show);
+
+      row.show && this._curTyphoon[row.tfid].flyTo();
+    } else {
+      let res = Object.assign({}, row);
+      this._curTyphoon[row.tfid] = new Cesium.Kq3dTyphoon(this._viewer, {
+        data: res
+      });
+
+      this._curTyphoon[row.tfid].flyTo();
+
+      this.eventListener = function (res) {
+        if (res && res.data) {
+          if (that._curTyphoon[row.tfid].divPoint) {
+            that._curTyphoon[row.tfid].divPoint.destroy();
+
+            that._curTyphoon[row.tfid].divPoint = null;
+          }
+
+          that.createInfoDivPoint(that.getDivPointData(res.data));
+        } else {
+          //清除信息
+          if (that.divPoint) {
+            that.divPoint.destroy();
+            that.divPoint = null;
+          }
+        }
+      };
+
+      this.eventListener2 = function (res) {
+        if (res && res.data) {
+          if (that._curTyphoon[row.tfid] && !that._curTyphoon[row.tfid].isPlaying) {
+            that.createInfoPlayDivPoint(that.getDivPointData(res.data));
+            row.showPlayVis = false;
+          } else {
+            if (that._curTyphoon[row.tfid].divPoint) {
+              that._curTyphoon[row.tfid].divPoint.destroy();
+
+              that._curTyphoon[row.tfid].divPoint = null;
+            }
+          }
+        }
+      };
+
+      let hoverEvent = this._curTyphoon[row.tfid].getHoverEvent();
+
+      let playEvent = this._curTyphoon[row.tfid].getPlayEvent();
+
+      if (hoverEvent) {
+        hoverEvent.addEventListener(this.eventListener);
+      }
+
+      if (playEvent) {
+        playEvent.addEventListener(this.eventListener2);
+      }
+    }
+
+    if (row.show) {
+      if (play) {
+        if (this.currentRow && this.currentRow.tfid && this._curTyphoon[this.currentRow.tfid] && this._curTyphoon[this.currentRow.tfid].stop) {
+          this._curTyphoon[this.currentRow.tfid].stop();
+        }
+
+        this._curTyphoon[row.tfid].start();
+      }
+    }
+
+    this.currentRow = row;
+  } // 获取
+
+
+  getDivPointData(pointInfo) {
+    if (pointInfo.radius7) pointInfo.radius7Arr = pointInfo.radius7.split('|');
+    if (pointInfo.radius10) pointInfo.radius10Arr = pointInfo.radius10.split('|');
+    if (pointInfo.radius12) pointInfo.radius12Arr = pointInfo.radius12.split('|');
+    return pointInfo;
+  }
+
+  // 创建台风属性弹框
+  createInfoPlayDivPoint(data) {
+    data = Object.assign(data, this.currentRow);
+
+    if (this._curTyphoon[data.tfid].divPoint) {
+      this._curTyphoon[data.tfid].divPoint.destroy();
+
+      this._curTyphoon[data.tfid].divPoint = null;
+    }
+
+    let htmlObj = this.createHtml(data);
+    this._curTyphoon[data.tfid].divPoint = new Cesium.Kq3dHtmlTag(this._viewer, {
+      html: htmlObj.html,
+      position: Cesium.Cartesian3.fromDegrees(Number(data.fLongitude), Number(data.fLatitude)),
+      anchor: [-140, htmlObj.anchorY],
+      noEvent: false
+    });
+  }
+
+  //点击展示详细信息
+  rowClickPath(index, row) {
+    if (!this._curTyphoon[row.tfid]) {
+      row.show = true;
+      this.createTyphoonPath(row);
+    }
+
+    setTimeout(() => {
+      this._curTyphoon[row.tfid].showPoint(index);
+
+      this._curTyphoon[row.tfid].flyToPoint(index);
+
+      this.createInfoDivPoint(this.getDivPointData(this._curTyphoon[row.tfid].positions[index]));
+    }, 500);
+  }
+
+  // 创建浮动弹框属性
+  createInfoDivPoint(data) {
+    if (this.divPoint) {
+      this.divPoint.destroy();
+      this.divPoint = null;
+    }
+
+    this._curTyphoon.forEach(element => {
+      if (element._data && data.name === element._data.name) {
+        data = Object.assign(data, {
+          tfid: element._data.tfid
+        });
+        return;
+      }
+    });
+
+    if (!data.fLongitude || !data.fLatitude) return;
+    let htmlObj = this.createHtml(data);
+    this.divPoint = new Cesium.Kq3dHtmlTag(this._viewer, {
+      html: htmlObj.html,
+      position: Cesium.Cartesian3.fromDegrees(Number(data.fLongitude), Number(data.fLatitude)),
+      anchor: [-140, htmlObj.anchorY]
+    });
+  }
+
+  // 创建html弹框内容
+  createHtml(data) {
+    let anchorY = -215;
+    let html = `<div class='kq3d-typhoon-trac-Info'>
+      <div style='background-color:var(--kq-bg-color); border-radius: 8px;'>
+      <div class='Info-title'>
+        <span class='Info-title-text'>${data.tfid + data.name}(${data.enname})</span>
+      </div>
+      <a class='infoClose' href='javascript:void(0)' onclick='document.getElementsByClassName("kq3d-typhoon-trac-Info")[0].style.display="none"'><span>×</span></a>
+      </div><ul>
+    <li><span>${this._language.centralPosition}</span><span>${data.fLongitude}°&nbsp;/&nbsp;${data.fLatitude}°</span></li>
+    <li><span>${this._language.windSpeedLabel}</span><span>${data.speed || '-'}&nbsp;${this._language.windSpeedUnit},</span><span class='strong'>${data.power + this._language.windForceUnit}(${data.strong})</span></li>
+    <li><span>${this._language.centralPressure}</span><span>${data.pressure}&nbsp;${this._language.atmosphericPressureUnit}</span></li>
+    <li><span>${this._language.movementSpeedTowards}</span><span>${(data.movespeed || '-') + this._language.movingDirectionUnit}，${data.movedirection || '-'}</span></li>
+    <li><span>${this._language.currentTime}</span><span>${this.formatDate(data.time)}</span></li>
+    <table><tr>
+    <th class='head'>${this._language['windRadius']}</th>
+      <th class='head'>${this._language.northeast}</th>
+      <th class='head'>${this._language.southeast}</th>
+      <th class='head'>${this._language.southwest}</th>
+      <th class='head'>${this._language.northwest}</th>
+  </tr>`;
+
+    if (data.radius7Arr) {
+      html += `<tr>
+          <th>${this._language.sevenLevels}</th>
+          <th class='flnumber'>${data.radius7Arr[0]}</th>
+          <th class='flnumber'>${data.radius7Arr[1]}</th>
+          <th class='flnumber'>${data.radius7Arr[2]}</th>
+          <th class='flnumber'>${data.radius7Arr[3]}</th>
+          </tr>`;
+      anchorY -= 23;
+    }
+
+    if (data.radius10Arr) {
+      html += `<tr>
+          <th>${this._language.tenLevels}</th>
+          <th class='flnumber'>${data.radius10Arr[0]}</th>
+          <th class='flnumber'>${data.radius10Arr[1]}</th>
+          <th class='flnumber'>${data.radius10Arr[2]}</th>
+          <th class='flnumber'>${data.radius10Arr[3]}</th>
+          </tr>`;
+      anchorY -= 23;
+    }
+
+    if (data.radius12Arr) {
+      html += `<tr>
+          <th>${this._language.twelveLevels}</th>
+          <th class='flnumber'>${data.radius12Arr[0]}</th>
+          <th class='flnumber'>${data.radius12Arr[1]}</th>
+          <th class='flnumber'>${data.radius12Arr[2]}</th>
+          <th class='flnumber'>${data.radius12Arr[3]}</th>
+          </tr>`;
+      anchorY -= 32;
+    }
+
+    html += `</table></ul><div class='triangle'><div></div></div></div>`;
+    return {
+      html: this.sanitize(html),
+      anchorY: anchorY
+    };
+  } // 动态插入时进行字符过滤
+
+
+  sanitize(text) {
+    return text.replace(/[\u200B-\u200D\uFEFF]/g, "") // 清除零宽字符
+    .replace(/[“”]/g, ""); // 主动过滤引号
+  } // 日期矫正
+
+
+  formatDate(date = new Date(), format = 'datetime', isPad = true) {
+    if (!(date instanceof Date)) {
+      date = new Date(date);
+    }
+
+    if (format === 'date') {
+      format = 'YYYY-MM-DD';
+    } else if (format === 'datetime') {
+      format = 'YYYY-MM-DD hh:mm:ss';
+    }
+
+    const weeks = ['日', '一', '二', '三', '四', '五', '六'];
+    const dateFormats = {
+      YYYY: date.getFullYear(),
+      MM: (date.getMonth() + 1).toString().padStart(isPad && 2, '0'),
+      DD: date.getDate().toString().padStart(isPad && 2, '0'),
+      hh: date.getHours().toString().padStart(isPad && 2, '0'),
+      mm: date.getMinutes().toString().padStart(isPad && 2, '0'),
+      ss: date.getSeconds().toString().padStart(isPad && 2, '0'),
+      W: weeks[date.getDay()]
+    };
+    return Object.keys(dateFormats).reduce((result, item) => result.replaceAll(item, dateFormats[item]), format);
+  }
+
+  // 停止播放
+  stopPlayTyphoonTrac(row) {
+    if (this._curTyphoon[row.tfid]) this._curTyphoon[row.tfid].stop();
+  } // 暂停播放
+
+
+  pausePlayTyphoonTrac(val) {
+    if (this._curTyphoon[this.currentRow.tfid]) this._curTyphoon[this.currentRow.tfid].flyTo();
+
+    if (val) {
+      this._viewer.clock.shouldAnimate = true;
+    } else {
+      this._viewer.clock.shouldAnimate = false;
+    }
+  } // 设置时间流速
+
+
+  setMultiplier(val) {
+    window.viewer.clock.multiplier = val || 1;
+  } //警戒线
+
+
+  createWarningLine() {
+    //24小时警戒线
+    this.warningLine_24 = this._viewer.entities.add({
+      position: Cesium.Cartesian3.fromDegrees(127, 34),
+      polyline: {
+        positions: Cesium.Cartesian3.fromDegreesArray([127, 34, 127, 22, 119, 18, 119, 11, 113, 4.5, 105, 0]),
+        width: 2,
+        material: Cesium.Color.fromCssColorString('#828314'),
+        clampToGround: true
+      },
+      label: {
+        text: '24小时警戒线',
+        color: Cesium.Color.fromCssColorString('#828314'),
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.TOP,
+        scaleByDistance: new Cesium.NearFarScalar(0, 1, 12000, 1),
+        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000),
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY
+      }
+    }); // 48小时警戒线
+
+    this.warningLine_48 = this._viewer.entities.add({
+      polyline: {
+        positions: Cesium.Cartesian3.fromDegreesArray([132, 34, 132, 22, 119, 0, 105, 0]),
+        width: 2,
+        material: new Cesium.PolylineDashMaterialProperty({
+          color: new Cesium.Color(0, 0, 0, 0),
+          gapColor: Cesium.Color.fromCssColorString('#4dba3d'),
+          dashLength: 16,
+          dashPattern: 255
+        }),
+        clampToGround: true
+      }
+    });
+  }
+
+  remove(tfid) {
+    if (this._curTyphoon[tfid] && this._curTyphoon[tfid].getHoverEvent) {
+      let hishoverEvent = this._curTyphoon[tfid].getHoverEvent();
+
+      hishoverEvent && hishoverEvent.removeEventListener(this.eventListener);
+    }
+
+    if (this._curTyphoon[tfid] && this._curTyphoon[tfid].getPlayEvent) {
+      let hisplayEvent = this._curTyphoon[tfid].getPlayEvent();
+
+      hisplayEvent && hisplayEvent.removeEventListener(this.eventListener2);
+    }
+
+    if (this._curTyphoon[tfid] && this._curTyphoon[tfid].divPoint) {
+      this._curTyphoon[tfid].divPoint.destroy();
+
+      this._curTyphoon[tfid].divPoint = null;
+    }
+
+    if (this._curTyphoon[tfid] && this._curTyphoon[tfid].stop) {
+      this._curTyphoon[tfid].stop();
+    }
+
+    if (this._curTyphoon[tfid] && this._curTyphoon[tfid].destroy) {
+      this._curTyphoon[tfid].destroy();
+    }
+
+    this._curTyphoon[tfid] = null;
+  }
+
+  clearDivPoint(tfid) {
+    if (this._curTyphoon[tfid] && this._curTyphoon[tfid].divPoint) {
+      this._curTyphoon[tfid].divPoint.destroy();
+
+      this._curTyphoon[tfid].divPoint = null;
+    }
+
+    if (this.divPoint) {
+      this.divPoint.destroy();
+      this.divPoint = null;
+    }
+  } //清除
+
+
+  clear() {
+    if (this.divPoint) {
+      this.divPoint.destroy();
+      this.divPoint = null;
+    }
+
+    for (let tfid in this._curTyphoon) {
+      this.remove(tfid);
+    }
+  } //销毁
+
+
+  destroy() {
+    this._viewer.entities.remove(this.warningLine_48);
+
+    this._viewer.entities.remove(this.warningLine_24);
+
+    this.clear();
   }
-  start() {}
-  //清除
-  clear() {}
 
-  //销毁
-  destroy() {}
 }
 // EXTERNAL MODULE: external "@kq_npm/client_icons_vue"
 var client_icons_vue_ = __webpack_require__(348);
@@ -278,16 +603,16 @@ var client_icons_vue_ = __webpack_require__(348);
 var util_ = __webpack_require__(3458);
 // EXTERNAL MODULE: external "vue-i18n/dist/vue-i18n.cjs.js"
 var vue_i18n_cjs_js_ = __webpack_require__(7080);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/webgl/typhoontrac/TyphoonTrac.vue?vue&type=script&setup=true&lang=js
-
-
-
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/webgl/typhoontrac/TyphoonTrac.vue?vue&type=script&setup=true&lang=js
 
 const _hoisted_1 = {
   class: "kq3d-typhoon-trac-box"
 };
 const _hoisted_2 = {
-  class: "kq3d-typhoon-trac-span"
+  class: "flex"
+};
+const _hoisted_3 = {
+  class: "flex"
 };
 
 
@@ -306,11 +631,20 @@ const __default__ = {
       control: "object",
       description: "设置参数"
     },
+    // 外部接口获取台风轨迹列表
+    getTyphoonTracListByApi: {
+      type: Function
+    },
+    // 外部接口获取台风轨迹详情
+    getDataInfoByApi: {
+      type: Function
+    },
     // 是否显示阴影效果
     showShadow: {
       type: Boolean,
       default: true
     },
+
     /**
      * 例："center","topLeft","topRight","bottomLeft","bottomRight", "topCenter", "bottomCenter" {top:'16px',left:'16px'}, {top:16,left:16}
      */
@@ -332,7 +666,7 @@ const __default__ = {
     // HeaderTemp图标
     headerTempIcon: {
       type: [Object, String],
-      default: client_icons_vue_.IconProfileAnalysis
+      default: client_icons_vue_.IconTyphoonTrack
     },
     // HeaderTemp Title&Icon的位置
     isRight: {
@@ -340,30 +674,34 @@ const __default__ = {
       default: true
     }
   },
+
   setup(__props, {
     expose: __expose
   }) {
     const props = __props;
     const {
       proxy
-    } = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.getCurrentInstance)();
-    //语言
+    } = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.getCurrentInstance)(); //语言
+
     let language = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(proxy.$i18n.global.messages[proxy.$i18n.global.locale]["webgl"]);
     let currentLang = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)("");
     let viewModel = null;
     let ref_box = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
-
-    // 获取组件传参
-
+    let currentRow = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)({});
+    let currentPlay = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)({});
+    let showInfo = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(false);
+    let loading = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(false); // 获取组件传参
     // 组件容器Ref
-    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null);
 
-    // 生成组件默认header
+    let boxRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(null); // 生成组件默认header
+
     let headerTemp = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
-    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)();
-    // 属性值
-    let tableData = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)([]);
-    // 表格头样式
+    let headerTempRef = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(); // 属性值
+
+    let tableData = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)([]); // 路径信息
+
+    let typhoonTracData = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)([]); // 表格头样式
+
     let headClass = args => {
       return {
         "background-color": "var(--kq-fill-color-light)",
@@ -371,11 +709,53 @@ const __default__ = {
         "font-size": "14px"
       };
     };
+
     let formItem = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.reactive)({
-      typhoonTracPath: props.settingParams && props.settingParams.typhoonTracPath || ""
+      collapseValue: props.settingParams?.collapseValue ?? "list",
+      // 折叠组件是否折叠，list：台风列表
+      showUpload: props.settingParams?.showUpload ?? true,
+      // 是否显示离线数据功能
+      typhoonTracPath: props.settingParams?.typhoonTracPath ?? "",
+      // 离线数据文件路径
+      showWarningLine: props.settingParams?.showWarningLine ?? true //
+
     });
+    const strongType = [{
+      name: language.value.tropicalPressure,
+      color: "#08F6A0, #00CF63"
+    }, {
+      name: language.value.tropicalStorm,
+      color: "#30AEFF, #007AEC"
+    }, {
+      name: language.value.severeTropicalStorm,
+      color: "#F3F81E, #E8CC00 "
+    }, {
+      name: language.value.typhoonName,
+      color: "#FFBE00, #FC8C00"
+    }, {
+      name: language.value.severeTyphoon,
+      color: "#FF84F9, #FF3EFF"
+    }, {
+      name: language.value.superTyphoon,
+      color: "#FF636F, #FF0016"
+    }];
+    const lineList = [{
+      name: language.value.chinaTitle,
+      color: "#ff3c4e"
+    }, {
+      name: language.value.chinaHKTitle,
+      color: "#febd00"
+    }, {
+      name: language.value.chinaTaiwanTitle,
+      color: "#ff00fe"
+    }, {
+      name: language.value.americaTtile,
+      color: "#04faf7"
+    }, {
+      name: language.value.japanTitle,
+      color: "#24bc00"
+    }]; // 国际化
 
-    // 国际化
     let {
       locale,
       messages
@@ -400,68 +780,254 @@ const __default__ = {
       });
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
       //父组件ScenceView初始化完成后执行
-      gis_utils_.utils.getWebMap(null, scenceView => {
-        if (scenceView) {
-          viewModel = new TyphoonTracViewModel(scenceView);
-          viewModel._language = language.value;
-        }
+
+      (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.nextTick)(() => {
+        gis_utils_.utils.getWebMap(props.mapTarget, scenceView => {
+          if (scenceView) {
+            viewModel = new TyphoonTracViewModel(scenceView);
+            viewModel._language = language.value;
+            formItem.showWarningLine && viewModel && viewModel.createWarningLine();
+            formItem.typhoonTracPath && getDataByPath();
+
+            if (props.getTyphoonTracListByApi) {
+              loading.value = true;
+              props.getTyphoonTracListByApi(data => {
+                loading.value = false;
+                clear();
+                tableData.value = data;
+              });
+            }
+          }
+        });
       });
     });
-
     /**
      * @description 监听header生成
      */
+
     const watchCreateHeaderTemp = () => {
       if (props.showHeaderTemp) {
         // 生成headerTemp
         headerTemp.value = (0,util_.createHeaderTemp)(boxRef.value, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toRefs)(props), headerTempRef, headerTempTitle);
       }
-    };
-    // 开始分析
-    function startAnalysis() {
-      viewModel && viewModel.start();
-    }
-    // 输入地址
+    }; // 输入地址
+
+
     function selectTyphoonTracPath() {
-      viewModel && viewModel.selectTyphoonTracPath(formItem.typhoonTracPath);
-    }
-    // 选择文件
+      getDataByPath();
+    } // 选择文件
+
+
     function selectData(file) {
       let url = URL.createObjectURL(file.raw);
       formItem.typhoonTracPath = url;
-      viewModel && viewModel.selectTyphoonTracPath(formItem.typhoonTracPath);
+      getDataByPath();
+      currentRow.value = {};
+      currentPlay.value = {};
+      formItem.collapseValue = "list";
+    }
+
+    function formatterFun(row) {
+      return formatDate(row.time);
+    } // 显示台风
+
+
+    async function showTyphoon(index, row) {
+      try {
+        await getDataInfoByApi(row); // 等待回调完成
+
+        row.show = !row.show;
+
+        if (!row.show) {
+          viewModel && viewModel.clearDivPoint(row.tfid);
+          setTracStop(index, row);
+        }
+
+        viewModel && viewModel.createTyphoonPath(row, false);
+      } catch (error) {
+        console.log("Failed to set data info:", error); // 可以添加错误处理逻辑，例如显示错误提示
+      }
+    }
+
+    async function setDatainfo(index, row) {
+      try {
+        await getDataInfoByApi(row);
+        row.showInfo = true;
+        formItem.collapseValue = "info";
+        currentRow.value = row;
+        typhoonTracData.value = row.points || [];
+      } catch (error) {
+        console.log("Failed to set data info:", error); // 可以添加错误处理逻辑，例如显示错误提示
+      }
+    }
+
+    async function getDataInfoByApi(row) {
+      // 条件判断提前返回
+      if (!props.getDataInfoByApi || row.getInfoVis) {
+        return;
+      }
+
+      loading.value = true;
+
+      try {
+        // 将回调函数转换为 Promise
+        await new Promise((resolve, reject) => {
+          props.getDataInfoByApi(row, data => {
+            try {
+              Object.assign(row, data);
+              row.getInfoVis = true;
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          });
+        });
+      } finally {
+        loading.value = false;
+      }
     }
-    // 定位
-    function location(index, row) {}
-    // 查看详情
-    function getDatainfo(index, row) {}
-    // 播放
-    function setTracPlay(index, row) {}
-    // 停止播放
-    function setTracStop(index, row) {}
-    // 清除
+    /**
+     * 日期格式化
+     * @param {Date | string | number} date 日期
+     * @param {string | 'date' | 'datetime'} format 格式（YYYY-MM-DD hh:mm:ss）
+     * @param {boolean} isPad 是否填补 0
+     * @example
+     */
+
+
+    function formatDate(date = new Date(), format = "datetime", isPad = true) {
+      if (!(date instanceof Date)) {
+        date = new Date(date);
+      }
+
+      if (format === "date") {
+        format = "YYYY-MM-DD";
+      } else if (format === "datetime") {
+        format = "YYYY-MM-DD hh:mm:ss";
+      }
+
+      const dateFormats = {
+        MM: (date.getMonth() + 1).toString().padStart(isPad && 2, "0"),
+        DD: date.getDate().toString().padStart(isPad && 2, "0"),
+        hh: date.getHours().toString().padStart(isPad && 2, "0"),
+        mm: date.getMinutes().toString().padStart(isPad && 2, "0"),
+        ss: date.getSeconds().toString().padStart(isPad && 2, "0")
+      };
+      return dateFormats.MM + "-" + dateFormats.DD + " " + dateFormats.hh + "时";
+    }
+
+    function tableCellClassName({
+      row,
+      column,
+      rowIndex,
+      columnIndex
+    }) {
+      //注意这里是解构
+      //利用单元格的 className 的回调方法，给行列索引赋值
+      row.index = rowIndex;
+      column.index = columnIndex;
+    }
+
+    function rowClickPath(row) {
+      viewModel && viewModel.clearDivPoint(currentRow.value.tfid);
+      if (!currentRow.value.show) currentRow.value.show = true;
+      if (currentRow.value.showPlayVis) setTracStop(row.index, currentRow.value);
+      viewModel && viewModel.rowClickPath(row.index, currentRow.value);
+    } // 播放
+
+
+    async function setTracPlay(index, row) {
+      try {
+        await getDataInfoByApi(row); // 等待回调完成
+
+        row.showPlayVis = true;
+        row.show = true;
+        currentPlay.value = row;
+        viewModel && viewModel.createTyphoonPath(row, true);
+      } catch (error) {
+        console.log("Failed to set data info:", error); // 可以添加错误处理逻辑，例如显示错误提示
+      }
+    } // 停止播放
+
+
+    function setTracStop(index, row) {
+      row.showPlayVis = false;
+      viewModel && viewModel.stopPlayTyphoonTrac(row);
+    } // 获取路径数据
+
+
+    function getDataByPath() {
+      if (formItem && formItem.typhoonTracPath) {
+        Cesium.Resource.fetchJson(formItem.typhoonTracPath).then(res => {
+          if (res) {
+            if (res.length === 0) {
+              KqMessage({
+                message: "features " + language.value.noDataMessage + "!",
+                type: "warning",
+                duration: 2000
+              });
+              return;
+            }
+
+            tableData.value = res;
+            clear();
+          }
+        });
+      } else {
+        KqMessage({
+          message: language.value.fileTypeMessage + "!",
+          type: "warning",
+          duration: 2000
+        });
+        return;
+      }
+    } // 更新台风数据
+
+
+    function setTyphoonTracData(data) {
+      if (data && data.length && data.length > 0) {
+        clear();
+        tableData.value = data;
+      }
+    }
+
     function clear() {
       viewModel && viewModel.clear();
-    }
+    } // 销毁
+
 
-    // 销毁
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
       viewModel && viewModel.destroy();
     });
+
     __expose({
-      startAnalysis,
-      clear
+      getDataByPath,
+      setTyphoonTracData
     });
+
     return (_ctx, _cache) => {
-      const _component_kq_col = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-col");
-      const _component_IconFolder2 = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("IconFolder2");
       const _component_kq_icon = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-icon");
+
       const _component_kq_button = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-button");
+
       const _component_kq_upload = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-upload");
+
       const _component_kq_input = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-input");
+
       const _component_kq_row = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-row");
+
+      const _component_kq_form_item = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-form-item");
+
+      const _component_kq_form = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-form");
+
       const _component_kq_table_column = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-table-column");
+
       const _component_kq_table = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-table");
+
+      const _component_kq_collapse_item = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-collapse-item");
+
+      const _component_kq_collapse = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-collapse");
+
       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)("section", {
         class: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeClass)(["kq3d-typhoon-trac", {
           'kq-box-shadow': __props.showShadow
@@ -472,136 +1038,304 @@ const __default__ = {
         key: 0,
         ref_key: "headerTempRef",
         ref: headerTempRef
-      }, null, 512 /* NEED_PATCH */)) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
-        class: "rowClass"
+      }, null, 512
+      /* NEED_PATCH */
+      )) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", _hoisted_1, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).showUpload ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_row, {
+        key: 0
       }, {
-        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
-          span: 7,
-          class: "colClass"
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form, {
+          "label-width": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentLang) === '100px',
+          "label-position": "left"
         }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", _hoisted_2, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).dataPath), 1 /* TEXT */)]),
-          _: 1 /* STABLE */
-        }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, {
-          span: 17
-        }, {
-          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input, {
-            modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).typhoonTracPath,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).typhoonTracPath = $event),
-            onChange: _cache[1] || (_cache[1] = $event => selectTyphoonTracPath()),
-            placeholder: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).videoPathPlace
-          }, {
-            append: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_upload, {
-              "on-change": selectData,
-              "auto-upload": false,
-              "show-file-list": false,
-              accept: ".json"
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_form_item, {
+              label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).dataPath
             }, {
-              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, null, {
-                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-                  size: 16
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
+                style: {
+                  "display": "flex"
+                }
+              }, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_input, {
+                  modelValue: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).typhoonTracPath,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).typhoonTracPath = $event),
+                  onChange: _cache[1] || (_cache[1] = $event => selectTyphoonTracPath()),
+                  placeholder: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).videoPathPlace
                 }, {
-                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_IconFolder2)]),
-                  _: 1 /* STABLE */
-                })]),
-                _: 1 /* STABLE */
+                  append: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_upload, {
+                    "on-change": selectData,
+                    "auto-upload": false,
+                    "show-file-list": false,
+                    accept: ".json"
+                  }, {
+                    default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, null, {
+                      default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
+                        size: 16
+                      }, {
+                        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconFolder2))]),
+                        _: 1
+                        /* STABLE */
+
+                      })]),
+                      _: 1
+                      /* STABLE */
+
+                    })]),
+                    _: 1
+                    /* STABLE */
+
+                  })]),
+                  _: 1
+                  /* STABLE */
+
+                }, 8
+                /* PROPS */
+                , ["modelValue", "placeholder"])]),
+                _: 1
+                /* STABLE */
+
               })]),
-              _: 1 /* STABLE */
-            })]),
-            _: 1 /* STABLE */
-          }, 8 /* PROPS */, ["modelValue", "placeholder"])]),
-          _: 1 /* STABLE */
-        })]),
-        _: 1 /* STABLE */
-      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
-        class: "rowClass"
+              _: 1
+              /* STABLE */
+
+            }, 8
+            /* PROPS */
+            , ["label"])]),
+            _: 1
+            /* STABLE */
+
+          })]),
+          _: 1
+          /* STABLE */
+
+        }, 8
+        /* PROPS */
+        , ["label-width"])]),
+        _: 1
+        /* STABLE */
+
+      })) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse, {
+        "model-value": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(formItem).collapseValue
       }, {
-        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_col, null, {
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_collapse_item, {
+          title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).typhoonList,
+          name: "list"
+        }, {
           default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table, {
             border: "",
             stripe: "",
+            class: "listTable",
             data: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(tableData),
-            style: {
-              "width": "100%",
-              "height": "100%"
-            },
-            "cell-style": {
-              padding: '8px 0'
-            },
+            style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)([{
+              "width": "100%"
+            }, `height: ${(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(tableData).length === 0 ? 120 : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(tableData).length < 4 ? 40 + (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(tableData).length * 40 : 200}px`]),
             "header-cell-style": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headClass)
           }, {
             default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
               label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).typhoonNumber,
               prop: "tfid",
               align: "center"
-            }, null, 8 /* PROPS */, ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+            }, null, 8
+            /* PROPS */
+            , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
               label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).typhoonNameZh,
               prop: "name",
               align: "center"
-            }, null, 8 /* PROPS */, ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+            }, null, 8
+            /* PROPS */
+            , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
               label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).typhoonNameEn,
               prop: "enname",
               align: "center"
-            }, null, 8 /* PROPS */, ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+            }, null, 8
+            /* PROPS */
+            , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
               label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).operation,
               align: "center"
             }, {
-              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(scope => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
-                onClick: $event => location(scope.$index, scope.row),
-                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).location
+              default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(scope => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
+                size: 16,
+                onClick: $event => showTyphoon(scope.$index, scope.row),
+                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).location,
+                style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)(scope.row.show ? 'color:var(--kq-color-primary)' : ''),
+                class: "iconClass",
+                loading: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(loading)
               }, {
-                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-                  size: 16
-                }, {
-                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconLocation))]),
-                  _: 1 /* STABLE */
-                })]),
-                _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
-                onClick: $event => getDatainfo(scope.$index, scope.row),
-                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).typhoonDetails
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconLocation))]),
+                _: 2
+                /* DYNAMIC */
+
+              }, 1032
+              /* PROPS, DYNAMIC_SLOTS */
+              , ["onClick", "title", "style", "loading"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
+                size: 16,
+                onClick: $event => setDatainfo(scope.$index, scope.row),
+                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).typhoonDetails,
+                style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)(scope.row.tfid === (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentRow).tfid ? 'color:var(--kq-color-primary)' : ''),
+                class: "iconClass",
+                loading: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(loading)
               }, {
-                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-                  size: 16
-                }, {
-                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconDetails))]),
-                  _: 1 /* STABLE */
-                })]),
-                _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconDetails))]),
+                _: 2
+                /* DYNAMIC */
+
+              }, 1032
+              /* PROPS, DYNAMIC_SLOTS */
+              , ["onClick", "title", "style", "loading"]), !(scope.row.tfid === (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentPlay).tfid && scope.row.showPlayVis) ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_icon, {
+                key: 0,
+                size: 16,
                 onClick: $event => setTracPlay(scope.$index, scope.row),
-                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).play
+                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).play,
+                class: "iconClass",
+                loading: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(loading)
               }, {
-                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-                  size: 16
-                }, {
-                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconVideoPlay))]),
-                  _: 1 /* STABLE */
-                })]),
-                _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_button, {
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconVideoPlay))]),
+                _: 2
+                /* DYNAMIC */
+
+              }, 1032
+              /* PROPS, DYNAMIC_SLOTS */
+              , ["onClick", "title", "loading"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true), scope.row.tfid === (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentPlay).tfid && scope.row.showPlayVis ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_icon, {
+                key: 1,
+                size: 16,
                 onClick: $event => setTracStop(scope.$index, scope.row),
-                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).stop
+                title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).stop,
+                style: {
+                  "color": "var(--kq-color-primary)"
+                },
+                class: "iconClass"
               }, {
-                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_icon, {
-                  size: 16
-                }, {
-                  default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconVideoPlay))]),
-                  _: 1 /* STABLE */
-                })]),
-                _: 2 /* DYNAMIC */
-              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "title"])]),
-              _: 1 /* STABLE */
-            }, 8 /* PROPS */, ["label"])]),
-            _: 1 /* STABLE */
-          }, 8 /* PROPS */, ["data", "header-cell-style"])]),
-          _: 1 /* STABLE */
-        })]),
-        _: 1 /* STABLE */
-      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, {
-        class: "rowClass"
-      })])], 2 /* CLASS */);
+                default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(client_icons_vue_.IconVideoPause))]),
+                _: 2
+                /* DYNAMIC */
+
+              }, 1032
+              /* PROPS, DYNAMIC_SLOTS */
+              , ["onClick", "title"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)]),
+              _: 1
+              /* STABLE */
+
+            }, 8
+            /* PROPS */
+            , ["label"])]),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["data", "style", "header-cell-style"])]),
+          _: 1
+          /* STABLE */
+
+        }, 8
+        /* PROPS */
+        , ["title"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentRow).showInfo ? ((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createBlock)(_component_kq_collapse_item, {
+          key: 0,
+          title: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentRow).tfid + (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(currentRow).name + (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).typhoonPath,
+          name: "info",
+          style: {
+            "margin-top": "8px"
+          }
+        }, {
+          default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table, {
+            border: "",
+            stripe: "",
+            class: "listTablePath",
+            data: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(typhoonTracData),
+            style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)([{
+              "width": "100%"
+            }, `height: ${(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(typhoonTracData).length === 0 ? 120 : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(typhoonTracData).length < 4 ? 40 + (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(typhoonTracData).length * 40 : 200}px`]),
+            onRowClick: rowClickPath,
+            "cell-class-name": tableCellClassName,
+            "header-cell-style": (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(headClass)
+          }, {
+            default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+              label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).time,
+              prop: "time",
+              align: "center",
+              formatter: formatterFun
+            }, null, 8
+            /* PROPS */
+            , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+              label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).windSpeed,
+              prop: "speed",
+              align: "center"
+            }, null, 8
+            /* PROPS */
+            , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+              label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).movingDirection,
+              prop: "movedirection",
+              align: "center"
+            }, null, 8
+            /* PROPS */
+            , ["label"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_table_column, {
+              label: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(language).strength,
+              prop: "strong",
+              align: "center"
+            }, null, 8
+            /* PROPS */
+            , ["label"])]),
+            _: 1
+            /* STABLE */
+
+          }, 8
+          /* PROPS */
+          , ["data", "style", "header-cell-style"])]),
+          _: 1
+          /* STABLE */
+
+        }, 8
+        /* PROPS */
+        , ["title"])) : (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createCommentVNode)("v-if", true)]),
+        _: 1
+        /* STABLE */
+
+      }, 8
+      /* PROPS */
+      , ["model-value"]), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("ul", _hoisted_2, [((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.Fragment, null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.renderList)(lineList, item => {
+          return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("li", {
+            key: item.name,
+            class: "flex items-center mr-2"
+          }, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
+            class: "card mr-1",
+            style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)(`border-top: 2px dashed ${item.color}`)
+          }, null, 4
+          /* STYLE */
+          ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)(item.name), 1
+          /* TEXT */
+          )]);
+        }), 64
+        /* STABLE_FRAGMENT */
+        ))])]),
+        _: 1
+        /* STABLE */
+
+      }), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(_component_kq_row, null, {
+        default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("ul", _hoisted_3, [((0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.openBlock)(), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementBlock)(external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.Fragment, null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.renderList)(strongType, item => {
+          return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("li", {
+            key: item.name,
+            class: "flex items-center mr-3"
+          }, [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("div", {
+            class: "circle mr-1",
+            style: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.normalizeStyle)(`background: linear-gradient(180deg, ${item.color})`)
+          }, null, 4
+          /* STYLE */
+          ), (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createElementVNode)("span", null, (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.toDisplayString)(item.name), 1
+          /* TEXT */
+          )]);
+        }), 64
+        /* STABLE_FRAGMENT */
+        ))])]),
+        _: 1
+        /* STABLE */
+
+      })])], 2
+      /* CLASS */
+      );
     };
   }
+
 }));
 ;// CONCATENATED MODULE: ./src/webgl/typhoontrac/TyphoonTrac.vue?vue&type=script&setup=true&lang=js
  
@@ -623,11 +1357,13 @@ var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
 
 
 
+
 TyphoonTrac.install = (Vue, opts) => {
   init_js_default()(Vue, opts);
   Vue.component(TyphoonTrac.name, TyphoonTrac);
 };
 
+
 }();
 /******/ 	return __webpack_exports__;
 /******/ })()