删除无用代码

package.json

@@ -18,7 +18,6 @@
     "echarts": "^5.4.3",
     "element-plus": "^2.5.1",
     "fast-glob": "^3.3.0",
-    "mapbox-gl": "^1.13.3",
     "ol": "^6.5.0",
     "sass": "^1.60.0",
     "uuid": "^9.0.0",

src/components/easyMapGL/gl-map.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="easy-map-gl">
-    <div class="map" id="easyMapGL"/>
-  </div>
-</template>
-
-<script lang="ts">
-  import {
-    defineComponent,
-    onMounted,
-    ref,
-    toRefs,
-    reactive,
-    watch,
-    getCurrentInstance,
-    ComponentInternalInstance,
-    computed,
-    nextTick, onActivated,
-  } from "vue";
-  import { useStore } from "vuex";
-  import InitMapInfoClass from "./initMapInfo";
-  import mapboxgl from "mapbox-gl";
-
-  export default defineComponent({
-    name: "",
-    components: {
-    },
-    props: {
-    },
-    setup(props, { emit }) {
-      const store = useStore();
-      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
-      const state = reactive({
-        map: <any>null
-      });
-      const initMap = () => {
-        const style: any = {
-          version: 8,
-          sources: {
-            basic: {
-              type: 'raster',
-              tiles: [
-                'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' // 替换为您的XYZ瓦片服务URL
-              ],
-              tileSize: 256
-            }
-          },
-          layers: [
-            {
-              id: 'basic',
-              type: 'raster',
-              source: 'basic',
-              minzoom: 0,
-              maxzoom: 22
-            }
-          ],
-          glyphs: '/font-api/font/{fontstack}/{range}.pbf'
-        }
-        state.map = new mapboxgl.Map({
-          container: 'easyMapGL', // container ID
-          center: <any>InitMapInfoClass.baseMapInfo.center, // starting position [lng, lat]
-          zoom: InitMapInfoClass.baseMapInfo.zoom, // starting zoom
-          style: style
-        });
-        state.map.on('load', () => {
-          emit('glMapLoad', state.map)
-        })
-      }
-      onMounted(() => {
-        nextTick(() => {
-          initMap()
-        })
-      })
-      return {
-        ...toRefs(state),
-      }
-    },
-  });
-</script>
-<style scoped lang="scss">
-.easy-map-gl {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  .map {
-    width: 100%;
-    height: 100%;
-    background-color: #bfdbf3;
-  }
-}
-</style>

src/components/easyMapGL/index.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="easy-map" v-bind="$attrs">
-    <GLMap
-      @glMapLoad="glMapLoad"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  onMounted,
-  ref,
-  toRefs,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  computed,
-  nextTick,
-} from "vue";
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import GLMap from "./gl-map.vue";
-import InitMapInfoClass from "./initMapInfo";
-import {ElMessage, ElMessageBox} from "element-plus";
-
-export default defineComponent({
-  name: "EasyMapGL",
-  components: {
-    GLMap,
-  },
-  props: {
-    baseMapLayers: {},
-    baseMapView: {},
-    layout: {}
-  },
-  emits: ['easyMapGLLoad'],
-  setup(props, { emit }) {
-    const store = useStore();
-    const router = useRouter();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
-    const state = reactive({
-      map: <any>null
-    });
-    const glMapLoad = (map) => {
-      state.map = map
-      emit("easyMapGLLoad", map, {
-        getBBOX,
-        addImg
-      })
-    }
-    const getBBOX = () => {
-      const bounds = state.map.getBounds();
-      // 获取边界框的西南角和东北角坐标
-      const sw = bounds.getSouthWest();
-      const ne = bounds.getNorthEast();
-      const BBOX = [sw.lng, sw.lat, ne.lng, ne.lat]
-      return BBOX
-    };
-    const addImg = async (name, url) => {
-      const loadImage = (url) => {
-        return new Promise((resolve, reject) => {
-          const img = new Image();
-          img.src = url;
-          img.onload = () => {
-            resolve(img);
-            img.onerror = reject;
-          };
-        });
-      }
-      const img = await loadImage(url);
-      state.map.addImage(name, img, {sdf: true});
-    }
-    const addCss = () => {}
-    onMounted(() => {
-    });
-    return {
-      ...toRefs(state),
-      glMapLoad
-    };
-  },
-});
-</script>
-<style scoped lang="scss">
-@import "./popup-style-global.scss";
-.easy-map {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-</style>

src/components/easyMapGL/initMapInfo.ts

@@ -1,14 +0,0 @@
-import store from '@/store/index'
-
-const isInternet = window.location.origin.includes('74.10') ? false : true
-
-const baseMapInfo = {
-  center: [109.6915958479584, 19.111636735969318],
-  projection: "EPSG:4326",
-  zoom: 7
-  // extent: [120.8953306326286,31.3667480047968,121.37735577911297,31.692561298253832]
-}
-export default {
-  baseMapInfo,
-  isInternet
-}

src/components/easyMapGL/popup-style-global.scss

@@ -1 +0,0 @@
-@import '@/views/ship-test/business/v2/popup-style.scss';

src/plugins/initComponent.ts

@@ -1,6 +1,5 @@
 import { App, Component } from 'vue'
 import EasyMapComponent from '@/components/easyMap/index.vue'
-import EasyMapGLComponent from '@/components/easyMapGL/index.vue'
 interface FileType {
   [key: string]: Component
 }
@@ -21,5 +20,4 @@ export default (app: App): void => {
   })
 
   app.component('EasyMapComponent', EasyMapComponent)
-  app.component('EasyMapGLComponent', EasyMapGLComponent)
 }

src/router/index.ts

@@ -6,27 +6,11 @@ const routes = [
         component: () => import('@/views/index.vue'),
     },
     {
-        path: '/mock-track',
-        component: () => import('@/views/init-speed-track/index.vue'),
-    },
-    {
-        path: '/track-status',
-        component: () => import('@/views/track-status/index.vue'),
-    },
-    {
         path: '/auth',
         name: 'auth',
         component: () => import('@/views/auth.vue')
     },
     ...shipTestRouter,
-    {
-        path: '/ship-playback',
-        component: () => import('@/views/ship-playback/index.vue'),
-    },
-    {
-        path: '/element',
-        component: () => import('@/views/element/index.vue'),
-    },
 ]
 
 const router = createRouter({

src/views/element/index.vue

@@ -1,198 +0,0 @@
-<template>
-  <div class="main">
-    <div class="tree">
-      <div class="buttons">
-        <el-button type="primary" @click="setSourceData">上图</el-button>
-      </div>
-      <el-tree-v2
-        :data="treeData"
-        :props="{
-          value: 'mapId',
-          label: 'mapLabel',
-          children: 'children'
-        }"
-        :height="800"
-      />
-    </div>
-    <div class="map">
-      <EasyMapGLComponent
-        @easyMapGLLoad="mapGLLoad"/>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-import {ElMessage, ElMessageBox} from "element-plus";
-import xqysJson from './xqys.json'
-import * as format from "ol/format";
-
-export default defineComponent({
-  name: '',
-  components: {},
-  props: {},
-  setup(props, {emit}) {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-      map: <any>null,
-      mapFunc: <any>null,
-      treeData: <any>[],
-      sourceElement: 'source_element'
-    })
-    const mapGLLoad = (map, func) => {
-      state.map = map
-      state.mapFunc = func
-      initMap()
-      initTree()
-    }
-    const initTree = () => {
-      state.treeData = []
-      const formatData = (key, pName, idKey = 'id', labelKey = 'name') => {
-        const obj = {
-          mapId: key,
-          mapLabel: pName,
-          children: []
-        }
-        xqysJson.data[key].forEach(v => {
-          v.mapId = key + '_' + v.id
-          v.mapLabel = v.name
-          obj.children.push(v)
-        })
-        state.treeData.push(obj)
-      }
-      formatData('axAreaList', '岸线-预警区')
-      formatData('axBayonetList', '岸线-卡口')
-      formatData('axCoastlineList', '岸线-海岸线')
-      formatData('axSiteList', '岸线-行业场所')
-      formatData('deptInfo', '部门详情', 'deptId', 'deptName')
-      formatData('districtList', '警务区')
-      formatData('governmentalList', '政府机构')
-      formatData('islandList', '岛屿')
-      formatData('monitoringList', '视频监控')
-      formatData('portList', '港区列表')
-      formatData('radarList', '雷达')
-      formatData('seaList', '水域-海域')
-      formatData('terminalList', '自助报备终端')
-      formatData('waterAreaList', '水域-警务区')
-      formatData('waterBasedFacilitiesList', '水域-水上设施')
-    }
-    const initMap = () => {
-      state.map.addSource(state.sourceElement, {
-        type: 'geojson',
-        data: {
-          type: 'FeatureCollection',
-          features: []
-        }
-      })
-      state.map.addLayer({
-        id: 'layer_element-line',
-        type: "line",
-        source: state.sourceElement,
-        layout: {
-        },
-        paint: {
-          'line-color': ['get', 'lineColor'],
-          'line-width': ['get', 'lineWidth'],
-          // 'line-dasharray': ['get', 'lineDasharray']
-        }
-      })
-      state.map.addLayer({
-        id: 'layer_element-polygon',
-        type: "fill",
-        source: state.sourceElement,
-        paint: {
-          'fill-color': ['get', 'fillColor']
-        }
-      })
-    }
-    const globalLineDash = [
-      [0, 0], //实线
-      [15, 15], //长虚线
-      [5, 5] //虚线
-    ]
-    const setSourceData = () => {
-      const arr: any = []
-      state.treeData.forEach(p => {
-        p.children.forEach(v => {
-          try {
-            const geometry: any = new format.WKT().readFeature(v.location).getGeometry()
-            const obj = {
-              type: 'Feature',
-              geometry: {
-                type: geometry.getType(),
-                coordinates: geometry.getCoordinates()
-              },
-              properties: v
-            }
-            let fillColor = 'rgba(20, 129, 241, 0.3)'
-            let lineColor = '#2860F1'
-            let lineWidth = 1
-            let lineDasharray = globalLineDash[0]
-            if (v.regionalColor) {
-              fillColor = v.regionalColor
-            }
-            if (v.segmentColor) {
-              lineColor = v.segmentColor
-            }
-            if (v.segmentWidth) {
-              lineWidth = v.segmentWidth
-            }
-            if (v.segmentType) {
-              lineDasharray = globalLineDash[Number(v.segmentType)]
-            }
-            obj.properties.fillColor = fillColor
-            obj.properties.lineColor = lineColor
-            obj.properties.lineWidth = lineWidth
-            obj.properties.lineDasharray = lineDasharray
-            arr.push(obj)
-          } catch (e) {
-          }
-        })
-      })
-      state.map.getSource(state.sourceElement).setData({
-        type: 'FeatureCollection',
-        features: arr
-      })
-    }
-    onMounted(() => {
-      console.log(xqysJson)
-    })
-    return {
-      ...toRefs(state),
-      mapGLLoad,
-      setSourceData
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.main {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  .tree {
-    width: 400px;
-    height: 100%;
-  }
-  .map {
-    flex: 1;
-  }
-}
-</style>

src/views/index.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <el-button @click="$router.push('/mock-track')">模拟轨迹</el-button>
-    <el-button @click="$router.push('/track-status')">船舶轨迹状态查询</el-button>
     <el-button @click="$router.push('/ship-test')">船舶测试</el-button>
-    <el-button @click="$router.push('/ship-playback')">船舶回放</el-button>
-    <el-button @click="$router.push('/element')">辖区要素</el-button>
   </div>
 </template>
 

src/views/init-speed-track/drawTrack.ts

@@ -1,256 +0,0 @@
-import * as ol from 'ol'
-import * as style from 'ol/style'
-import * as layer from 'ol/layer'
-import * as source from 'ol/source'
-import * as geom from 'ol/geom'
-import * as proj from 'ol/proj'
-import * as interaction from 'ol/interaction'
-import * as coordinate from 'ol/coordinate'
-import * as control from 'ol/control'
-import * as sphere from 'ol/sphere'
-import { unByKey } from 'ol/Observable'
-import './measure.scss'
-import {createBox} from "ol/interaction/Draw";
-import {Circle, LineString, Polygon} from "ol/geom";
-
-const layerFlag = ['layerName', 'measureLayer']
-let measureTooltipElement;
-let helpTooltipElement;
-/**
- *
- * @param map
- * @param typeSelect    line线，rectangle矩形，polygon多边形，circle圆形
- */
-export default function Measure (map, typeSelect) {
-    let _source = null
-    const realLayer = map.getLayers().getArray().filter(v => v.get(layerFlag[0]) === layerFlag[1])
-    if (realLayer[0]) {
-        _source = realLayer[0].getSource()
-    } else {
-        _source = new source.Vector(); //图层数据源
-        const _vector = new layer.Vector({
-            zIndex: 9999,
-            source: _source,
-            style: new style.Style({ //图层样式
-                fill: new style.Fill({
-                    color: 'rgba(255, 255, 255, 0.2)' //填充颜色
-                }),
-                stroke: new style.Stroke({
-                    color: '#f31a4a',  //边框颜色
-                    width: 2   // 边框宽度
-                }),
-                image: new style.Circle({
-                    radius: 7,
-                    fill: new style.Fill({
-                        color: '#ffcc33'
-                    })
-                })
-            })
-        });
-        _vector.set(layerFlag[0], layerFlag[1])
-        map.addLayer(_vector);
-    }
-    let sketch;
-    let helpTooltip;
-    let measureTooltip;
-    let continueMsg = '双击结束测量';
-    const geodesicCheckbox = true;//测地学方式对象
-    const createMeasureTooltip = () => {
-        const id = 'measureTooltipElementId'
-        if (measureTooltipElement) {
-            map.removeOverlay(map.getOverlayById(id))
-            measureTooltipElement.parentNode.removeChild(measureTooltipElement);
-        }
-        measureTooltipElement = document.createElement('div');
-        measureTooltipElement.className = 'tooltip tooltip-measure';
-        measureTooltip = new ol.Overlay({
-            id,
-            element: measureTooltipElement,
-            offset: [0, -15],
-            positioning: 'bottom-center'
-        });
-        map.addOverlay(measureTooltip);
-    }
-    const createHelpTooltip = () => {
-        const id = 'helpTooltipElementId'
-        if (helpTooltipElement) {
-            map.removeOverlay(map.getOverlayById(id))
-            helpTooltipElement.parentNode.removeChild(helpTooltipElement);
-        }
-        helpTooltipElement = document.createElement('div');
-        helpTooltipElement.className = 'tooltip hidden';
-        helpTooltip = new ol.Overlay({
-            id,
-            element: helpTooltipElement,
-            offset: [15, 0],
-            positioning: 'center-left'
-        });
-        map.addOverlay(helpTooltip);
-    }
-    const formatLength = (line) => {
-        // 获取投影坐标系
-        const sourceProj = map.getView().getProjection();
-        // ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
-        const length = sphere.getLength(line, {projection: sourceProj});
-        // const length = getLength(line);
-        let output;
-        if (length > 100) {
-            const km = Math.round((length / 1000) * 100) / 100;
-            output = `${km} 千米 <br>${parseFloat(String(km * 0.53995)).toFixed(2)} 海里`;
-        } else {
-            output = `${Math.round(length * 100) / 100} m`;
-        }
-        return output;
-    };
-    //获取圆的面积
-    const getCircleArea = (circle, projection) => {
-        const P = 3.14
-        const radius = getCircleRadius(circle, projection)
-        return P * radius * radius
-    }
-//获取圆的半径
-    const getCircleRadius = (circle, projection) => {
-        return circle.getRadius() * projection.getMetersPerUnit()
-    }
-    const formatArea = (polygon, type= 'polygon') => {
-        let area
-        const sourceProj = map.getView().getProjection();
-        // 获取投影坐标系
-        if (type === 'polygon') {
-            area = sphere.getArea(polygon, {
-                projection: sourceProj,
-            });
-        } else if (type === 'circle') {
-            area = getCircleArea(polygon, sourceProj)
-        }
-        let output;
-        if (area > 10000) {
-            const km = Math.round((area / 1000000) * 100) / 100;
-            output = `${km} 平方公里<br>${parseFloat(String(km * 0.38610)).toFixed(
-                2
-            )} 平方英里`;
-        } else {
-            output = `${Math.round(area * 100) / 100} ` + " m<sup>2</sup>";
-        }
-        return output;
-    };
-    const addInteraction = () => {
-        const id = 'drawName'
-        const draw = new interaction.Draw({
-            source: _source,//测量绘制层数据源
-            type: 'LineString',  //几何图形类型
-            geometryFunction: typeSelect === 'rectangle' ? createBox() : null,
-            style: new style.Style({
-                fill: new style.Fill({
-                    color: "rgba(255, 255, 255, 0.2)",
-                }),
-                stroke: new style.Stroke({
-                    color: "#f3584a",
-                    width: 2,
-                }),
-                image: new style.Circle({
-                    radius: 5,
-                    stroke: new style.Stroke({
-                        color: "rgba(0, 0, 0, 0.7)",
-                    }),
-                    fill: new style.Fill({
-                        color: "rgba(255, 255, 255, 0.2)",
-                    }),
-                }),
-            }),
-        });
-        draw.set(id, id)
-        createMeasureTooltip(); //创建测量工具提示框
-        createHelpTooltip(); //创建帮助提示框
-        map.addInteraction(draw);
-        let listener;
-        //绑定交互绘制工具开始绘制的事件
-        const drawstartHandle = (evt) => {
-            sketch = evt.feature; //绘制的要素
-            let tooltipCoord = evt.coordinate;// 绘制的坐标
-            //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
-            listener = sketch.getGeometry().on('change', function (evt) {
-                const geom = evt.target
-                let output;
-                if (geom.getType() === 'LineString') {
-                    output = formatLength(geom);//长度值
-                    tooltipCoord = geom.getLastCoordinate();//坐标
-                } else if (geom.getType() === 'Polygon') {
-                    output = formatArea(geom);//面积值
-                    tooltipCoord = geom.getInteriorPoint().getCoordinates();//坐标
-                } else if (geom.getType() === 'Circle') {
-                    output = formatArea(geom, 'circle');//面积值
-                    tooltipCoord = geom.getCenter()
-                }
-                measureTooltipElement.innerHTML = output;//将测量值设置到测量工具提示框中显示
-                measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
-            });
-        }
-        draw.on('drawstart', drawstartHandle);
-        //绑定交互绘制工具结束绘制的事件
-        const copy = (value) => {
-            const str = document.createElement('input')
-            str.setAttribute('value', value)
-            document.body.appendChild(str)
-            str.select()
-            document.execCommand('copy')
-            document.body.removeChild(str)
-        }
-        const drawendHandle = (evt) => {
-            map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
-            const del = document.createElement("div");
-            del.className = "lineDel";
-            measureTooltipElement.append(del);
-            del.onclick = () => {
-                _source.removeFeature(evt.feature)
-                const b = del.parentElement.parentElement
-                b.parentElement.removeChild(b);
-                const g = evt.feature.getGeometry()
-                if (g.getType() === 'LineString') {
-                    const w = `LINESTRING(${g.getCoordinates().map(v => v[0] + ' ' + v[1]).join(',')})`
-                    copy(w)
-                } else if (g.getType() === 'Polygon') {
-                    const w = `POLYGON(${g.getCoordinates().map(v => '(' + v.map(c => c[0] + ' ' + c[1]) + ')').join(',')})`
-                    copy(w)
-                }
-            };
-            measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
-            measureTooltip.setOffset([0, -7]);
-            sketch = null; //置空当前绘制的要素对象
-            measureTooltipElement = null; //置空测量工具提示框对象
-            helpTooltipElement.parentNode.removeChild(helpTooltipElement);
-            helpTooltipElement = null; //置空测量工具提示框对象
-            unByKey(listener);
-            draw.un('drawstart', drawstartHandle);
-            draw.un('drawend', drawendHandle);
-            map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
-            map.un('pointermove', pointerMoveHandler)
-        }
-        draw.on('drawend', drawendHandle);
-    }
-    addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
-    const pointerMoveHandler = (evt) => {
-        if (evt.dragging) {
-            return;
-        }
-        let helpMsg = '单击开始测量';//当前默认提示信息
-        //判断绘制几何类型设置相应的帮助提示信息
-        if (sketch) {
-            const geom = sketch.getGeometry()
-            helpMsg = continueMsg;
-            // if (geom.getType() === 'Polygon') {
-            //     helpMsg = continueMsg; //绘制多边形时提示相应内容
-            // } else if (geom.getType() === 'LineString') {
-            //     helpMsg = continueMsg; //绘制线时提示相应内容
-            // }
-        }
-        helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
-        helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
-        helpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
-    };
-    map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
-    //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
-    map.getViewport().on('mouseout', () => {
-        helpTooltipElement.addClass('hidden');
-    });
-}

src/views/init-speed-track/index.vue

@@ -1,636 +0,0 @@
-<template>
-  <div class="init-speed-track" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
-    <EasyMapComponent
-        class="map"
-        layout="info"
-        @easyMapLoad="mapLoad"
-    />
-    <div class="track">
-      <el-card shadow="always">
-        <template #header>
-          <div class="card-header">
-            <span>轨迹列表</span>
-            <el-button-group>
-              <template v-for="[key, value] in SourceMap">
-                <el-button :color="value.color" size="small" @click="drawTrack(key)" style="color: white">{{value.label}}</el-button>
-              </template>
-            </el-button-group>
-          </div>
-        </template>
-        <div class="track-line">
-          <el-button v-if="trackList.length > 0" type="primary" size="small" @click="onSubmit" style="color: white">保存</el-button>
-          <template v-for="(item, index) in trackList">
-            <div class="line">
-              <div class="label" :style="`color: ${SourceMap.get(item.type).color};`">{{item.ID}}、{{SourceMap.get(item.type).label}}</div>
-              <el-tooltip :enterable="false" placement="top" content="隐藏" v-if="item.show">
-                <img class="__hover" src="./ship-track-visible.svg" @click="handleShow(false, item)"/>
-              </el-tooltip>
-              <el-tooltip :enterable="false" placement="top" content="显示" v-else>
-                <img class="__hover" src="./ship-track-invisible.svg" @click="handleShow(true, item)"/>
-              </el-tooltip>
-              <el-tooltip :enterable="false" placement="top" content="编辑">
-                <img class="__hover" src="./edit.png" @click="handleEdit(item)"/>
-              </el-tooltip>
-              <el-tooltip :enterable="false" placement="top" content="删除">
-                <img class="__hover" src="./button-del.png" @click="handleDelete(item, index)"/>
-              </el-tooltip>
-            </div>
-          </template>
-        </div>
-      </el-card>
-      <el-card shadow="always" v-if="isForm">
-        <template #header>
-          <div class="card-header">
-            <span>轨迹点列表</span>
-            <el-button v-if="trackPointList.length > 0" type="primary" size="small" @click="onTemp" style="color: white">暂存</el-button>
-          </div>
-        </template>
-        <div class="track-point">
-          <div v-if="form.ID" class="label" :style="`color: ${SourceMap.get(form.type).color};`">{{form.ID}}、{{SourceMap.get(form.type).label}}</div>
-          <template v-for="item in formParams">
-            <div class="item">
-              <span>{{item.label}}：</span><el-input v-model="form[item.value]" clearable/>
-            </div>
-          </template>
-          <template v-for="(item, index) in trackPointList">
-            <div class="point">
-              <div class="position">
-                <span>{{item.position[0]}}</span><br/>
-                <span>{{item.position[1]}}</span>
-              </div>
-              <div class="speed">
-                <el-input-number v-model="item.speed" :precision="2" :step="0.1" :max="100" :min="0" @focus="onPointFocus(trackPointList[index - 1], item, trackPointList[index + 1])"/>
-              </div>
-            </div>
-          </template>
-        </div>
-      </el-card>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  nextTick,
-  onMounted,
-  watch,
-  computed,
-  ComponentInternalInstance,
-  reactive,
-  toRefs,
-  getCurrentInstance
-} from 'vue'
-import {useStore} from 'vuex'
-import * as source from "ol/source";
-import * as layer from "ol/layer";
-import * as style from "ol/style";
-import * as ol from "ol";
-import * as sphere from "ol/sphere";
-import * as interaction from "ol/interaction";
-import {createBox} from "ol/interaction/Draw";
-import {unByKey} from "ol/Observable";
-import { Geometry } from 'ol/geom';
-import { EventsKey } from 'ol/events';
-import { Coordinate } from 'ol/coordinate';
-import TrackStyle from './track-style'
-import axios from "axios";
-import {ElMessage, ElMessageBox} from "element-plus";
-
-export default defineComponent({
-  name: 'App',
-  components: {},
-  setup() {
-    const store = useStore()
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const SourceMap = new Map(window.cusConfig.trackSource)
-    const formParams = window.cusConfig.trackParams
-    const state = reactive({
-      map: <any>null,
-      mapFunc: null,
-      trackPointList: [],
-      trackList: <any>[],
-      formTrackPointStartCount: 0,
-      formTrackPointEndCount: 0,
-      formTrackPointList: [],
-      initTrackPointStartCount: 0,
-      initTrackPointEndCount: 0,
-      initTrackPointList: [],
-      loading: false,
-      form: <any>{},
-      idNum: 1,
-      isForm: false
-    });
-    formParams.forEach((v: { value: string | number; init: any; }) => {
-      state.form[v.value] = v.init
-    })
-    const mapLoad = (map: null, func: null) => {
-      state.map = map
-      state.mapFunc = func
-    }
-    const startDraw = (cb: { (evt: any): void; (arg0: { feature: { getGeometry: () => any; }; }): void; }) => {
-      let measureTooltipElement: HTMLDivElement | null;
-      let helpTooltipElement: HTMLDivElement | null;
-      const realLayer = state.map.getLayers().getArray().filter((v: { get: (arg0: string) => string; }) => v.get('layerName') === 'measureLayer')
-      let sketch: { getGeometry: () => { (): any; new(): any; on: { (arg0: string, arg1: (evt: any) => void): any; new(): any; }; }; } | null;
-      let helpTooltip: ol.Overlay;
-      let measureTooltip: ol.Overlay;
-      let continueMsg = '双击结束标绘';
-      const createMeasureTooltip = () => {
-        const id = 'measureTooltipElementId'
-        if (measureTooltipElement) {
-          state.map.removeOverlay(state.map.getOverlayById(id))
-          measureTooltipElement.parentNode?.removeChild(measureTooltipElement);
-        }
-        measureTooltipElement = document.createElement('div');
-        measureTooltipElement.className = 'tooltip tooltip-measure';
-        measureTooltip = new ol.Overlay({
-          id,
-          element: measureTooltipElement,
-          offset: [0, -15],
-          positioning: 'bottom-center'
-        });
-        state.map.addOverlay(measureTooltip);
-      }
-      const createHelpTooltip = () => {
-        const id = 'helpTooltipElementId'
-        if (helpTooltipElement) {
-          state.map.removeOverlay(state.map.getOverlayById(id))
-          helpTooltipElement.parentNode?.removeChild(helpTooltipElement);
-        }
-        helpTooltipElement = document.createElement('div');
-        helpTooltipElement.className = 'tooltip hidden';
-        helpTooltip = new ol.Overlay({
-          id,
-          element: helpTooltipElement,
-          offset: [15, 0],
-          positioning: 'center-left'
-        });
-        state.map.addOverlay(helpTooltip);
-      }
-      const formatLength = (line: Geometry) => {
-        // 获取投影坐标系
-        const sourceProj = state.map.getView().getProjection();
-        // ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
-        const length = sphere.getLength(line, {projection: sourceProj});
-        // const length = getLength(line);
-        let output;
-        if (length > 100) {
-          const km = Math.round((length / 1000) * 100) / 100;
-          output = `${km} 千米 <br>${parseFloat(String(km * 0.53995)).toFixed(2)} 海里`;
-        } else {
-          output = `${Math.round(length * 100) / 100} m`;
-        }
-        return output;
-      };
-      const addInteraction = () => {
-        const id = 'drawName'
-        const draw = new interaction.Draw({
-          type: 'LineString',  //几何图形类型
-          style: new style.Style({
-            fill: new style.Fill({
-              color: "rgba(255, 255, 255, 0.2)",
-            }),
-            stroke: new style.Stroke({
-              color: "#f3584a",
-              width: 2,
-            }),
-            image: new style.Circle({
-              radius: 5,
-              stroke: new style.Stroke({
-                color: "rgba(0, 0, 0, 0.7)",
-              }),
-              fill: new style.Fill({
-                color: "rgba(255, 255, 255, 0.2)",
-              }),
-            }),
-          }),
-        });
-        draw.set(id, id)
-        createMeasureTooltip(); //创建测量工具提示框
-        createHelpTooltip(); //创建帮助提示框
-        state.map.addInteraction(draw);
-        let listener: EventsKey | EventsKey[];
-        //绑定交互绘制工具开始绘制的事件
-        const drawstartHandle = (evt: { feature: { getGeometry: () => { (): any; new(): any; on: { (arg0: string, arg1: (evt: any) => void): any; new(): any; }; }; } | null; coordinate: any; }) => {
-          sketch = evt.feature; //绘制的要素
-          let tooltipCoord = evt.coordinate;// 绘制的坐标
-          //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
-          listener = sketch?.getGeometry().on('change', function (evt) {
-            const geom = evt.target
-            let output;
-            output = formatLength(geom);//长度值
-            tooltipCoord = geom.getLastCoordinate();//坐标
-            if (measureTooltipElement) measureTooltipElement.innerHTML = output;//将测量值设置到测量工具提示框中显示
-            measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
-          });
-        }
-        draw.on('drawstart', drawstartHandle);
-        //绑定交互绘制工具结束绘制的事件
-        const copy = (value: string) => {
-          const str = document.createElement('input')
-          str.setAttribute('value', value)
-          document.body.appendChild(str)
-          str.select()
-          document.execCommand('copy')
-          document.body.removeChild(str)
-        }
-        const drawendHandle = (evt: { feature: { getGeometry: () => any; }; }) => {
-          state.map.removeInteraction(state.map.getInteractions().getArray().filter((v: { get: (arg0: string) => string; }) => v.get(id) === id)[0]);
-          sketch = null; //置空当前绘制的要素对象
-          measureTooltipElement?.parentNode?.removeChild(measureTooltipElement);
-          measureTooltipElement = null; //置空测量工具提示框对象
-          helpTooltipElement?.parentNode?.removeChild(helpTooltipElement);
-          helpTooltipElement = null; //置空测量工具提示框对象
-          unByKey(listener);
-          draw.un('drawstart', drawstartHandle);
-          draw.un('drawend', drawendHandle);
-          state.map.removeInteraction(state.map.getInteractions().getArray().filter((v: { get: (arg0: string) => string; }) => v.get(id) === id)[0]);
-          state.map.un('pointermove', pointerMoveHandler)
-          cb(evt)
-        }
-        draw.on('drawend', drawendHandle);
-      }
-      addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
-      const pointerMoveHandler = (evt: { dragging: any; coordinate: Coordinate | undefined; }) => {
-        if (evt.dragging) {
-          return;
-        }
-        let helpMsg = '单击开始标绘';//当前默认提示信息
-        //判断绘制几何类型设置相应的帮助提示信息
-        if (sketch) {
-          const geom = sketch.getGeometry()
-          helpMsg = continueMsg;
-          // if (geom.getType() === 'Polygon') {
-          //     helpMsg = continueMsg; //绘制多边形时提示相应内容
-          // } else if (geom.getType() === 'LineString') {
-          //     helpMsg = continueMsg; //绘制线时提示相应内容
-          // }
-        }
-        if (helpTooltipElement)helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
-        helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
-        helpTooltipElement?.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
-      };
-      state.map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
-      //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
-      // state.map.getViewport().on('mouseout', () => {
-      //   helpTooltipElement?.addClass('hidden');
-      // });
-    }
-    const initDraw = (pMap, type) => {
-      that.$easyMap.initShape({
-        map: state.map,
-        layerName: "form-track-point-line",
-        layerZIndex: 9,
-        list: [
-          {
-            easyMapParams: {
-              id: new Date().getTime(),
-              position: that.$easyMap.formatPosition.wptTwl(state.trackPointList.map(v => that.$easyMap.formatPosition.cptTwpt(v.position))),
-              normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(type)?.color, pMap, (s, p) => {
-                state.formTrackPointStartCount++
-                setTimeout(() => {
-                  state.formTrackPointEndCount++
-                  state.formTrackPointList.push(...p)
-                  if (state.formTrackPointStartCount === state.formTrackPointEndCount) {
-                    that.$easyMap.initShape({
-                      map: state.map,
-                      layerName: 'form-track-point',
-                      layerZIndex: 10,
-                      list: state.formTrackPointList.map((v, i) => {
-                        return {
-                          easyMapParams: {
-                            id: `form-track-point-${i}`,
-                            position: that.$easyMap.formatPosition.cptTwpt(v.current.position),
-                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(v.current.source).color, v.current, v.next)
-                          }
-                        }
-                      })
-                    })
-                    state.formTrackPointStartCount = 0
-                    state.formTrackPointEndCount = 0
-                    state.formTrackPointList = []
-                  }
-                }, 10)
-                return s
-              }),
-            }
-          }
-        ]
-      });
-    }
-    const drawTrack = (trackSource: string) => {
-      state.isForm = false
-      state.form = {}
-      formParams.forEach((v: { value: string | number; init: any; }) => {
-        state.form[v.value] = v.init
-      })
-      startDraw((evt) => {
-        const geom = evt.feature.getGeometry()
-        const pMap = new Map()
-        state.trackPointList = geom.getCoordinates().map((v: any) => {
-          const obj = {
-            source: trackSource,
-            position: v,
-            speed: 0
-          }
-          pMap.set(`${v[0]}-${v[1]}`, obj)
-          return obj
-        })
-        initDraw(pMap, trackSource)
-        state.isForm = true
-      })
-    }
-    const onPointFocus = (p1: any, p2: any, p3: any) => {
-      that.$easyMap.getShapeView(state.map, [p1?.position, p2.position, p3?.position].filter(v => v))
-      const radius = 25
-      const longRadius = radius * Math.SQRT2
-      that.$easyMap.initShape({
-        map: state.map,
-        layerName: "focus",
-        layerZIndex: 20,
-        list: [
-          {
-            easyMapParams: {
-              id: 'focus',
-              position: that.$easyMap.formatPosition.cptTwpt(p2.position),
-              normalStyle: [new style.Style({ //图层样式
-                image: new style.RegularShape({
-                  stroke: new style.Stroke({
-                    color: '#9F2EFF',
-                    width: 2,
-                    lineDash: [
-                      (longRadius * 3) / 10,
-                      (longRadius * 4) / 10,
-                      (longRadius * 3) / 10,
-                      0
-                    ]
-                  }),
-                  radius1: radius,
-                  rotation: Math.PI / (180 / 45),
-                  points: 4
-                })
-              })]
-            }
-          }
-        ]
-      });
-    }
-    const onTemp = () => {
-      let index = 0
-      if (state.trackList.some((v: { ID: any; }, i: number) => {
-        index = i
-        return v.ID === state.form.ID
-      })) {
-        state.trackList[index] = Object.assign(state.form, {show: true, lines: state.trackPointList.map(v => {
-            return {
-              lon: v.position[0],
-              lat: v.position[1],
-              speed: v.speed
-            }
-          })})
-      } else {
-        const obj = {
-          type: state.trackPointList[0].source,
-          lines: state.trackPointList.map(v => {
-            return {
-              lon: v.position[0],
-              lat: v.position[1],
-              speed: v.speed
-            }
-          })
-        }
-        Object.assign(obj, state.form)
-        const result = JSON.parse(JSON.stringify(obj))
-        state.trackList.push(Object.assign(result, {show: true, ID: state.idNum.toString()}))
-      }
-      state.idNum++
-      state.trackPointList = []
-      that.$easyMap.initShape({
-        map: state.map,
-        layerName: "form-track-point-line",
-        layerZIndex: 9,
-        list: []
-      });
-      that.$easyMap.initShape({
-        map: state.map,
-        layerName: "form-track-point",
-        layerZIndex: 10,
-        list: []
-      });
-      initTrack()
-      state.isForm = false
-    }
-    const trackShowListCom = computed(() => {
-      return state.trackList.filter((v: { show: any; }) => v.show)
-    })
-    const initTrack = () => {
-      that.$easyMap.initShape({
-        map: state.map,
-        layerName: "track-point-line",
-        layerZIndex: 7,
-        list: []
-      });
-      that.$easyMap.initShape({
-        map: state.map,
-        layerName: "track-point",
-        layerZIndex: 8,
-        list: []
-      });
-      that.$easyMap.initShape({
-        map: state.map,
-        layerName: "track-point-line",
-        layerZIndex: 7,
-        list: trackShowListCom.value.map((v: any) => {
-          const pMap = new Map()
-          v.lines.forEach((p: {
-              speed: any; type: any; lon: any; lat: any;
-          }) => {
-            const obj = {
-              source: v.type,
-              position: [p.lon, p.lat],
-              speed: p.speed
-            }
-            pMap.set(`${p.lon}-${p.lat}`, obj)
-          })
-          return {
-            easyMapParams: {
-              id: v.ID,
-              position: that.$easyMap.formatPosition.wptTwl(v.lines.map((c: { lon: any; lat: any; }) => that.$easyMap.formatPosition.cptTwpt([c.lon, c.lat]))),
-              normalStyle: (f: any, r: any) => TrackStyle.trackLineStyle(f, r, state.map, SourceMap.get(v.type)?.color, pMap, (s, p) => {
-                state.initTrackPointStartCount++
-                setTimeout(() => {
-                  state.initTrackPointEndCount++
-                  state.initTrackPointList.push(...p)
-                  if (state.initTrackPointStartCount === state.initTrackPointEndCount) {
-                    that.$easyMap.initShape({
-                      map: state.map,
-                      layerName: 'track-point',
-                      layerZIndex: 8,
-                      list: state.initTrackPointList.map((c, i) => {
-                        return {
-                          easyMapParams: {
-                            id: `init-track-point-${v.ID}-${i}`,
-                            position: that.$easyMap.formatPosition.cptTwpt(c.current.position),
-                            normalStyle: TrackStyle.trackPointStyle(SourceMap.get(c.current.source).color, c.current, c.next)
-                          }
-                        }
-                      })
-                    })
-                    state.initTrackPointStartCount = 0
-                    state.initTrackPointEndCount = 0
-                    state.initTrackPointList = []
-                  }
-                }, 10)
-                return s
-              }),
-            }
-          }
-        })
-      });
-    }
-    const handleShow = (show: any, item: any) => {
-      item.show = show
-      initTrack()
-    }
-    const handleEdit = (item: any) => {
-      item.show = false
-      state.form = item
-      const pMap = new Map()
-      state.trackPointList = state.form.lines.map((v: { speed: any; lon: any; lat: any; }) => {
-        const obj = {
-          source: state.form.type,
-          position: [v.lon, v.lat],
-          speed: v.speed
-        }
-        pMap.set(`${v.lon}-${v.lat}`, obj)
-        return obj
-      })
-      initDraw(pMap, state.form.type)
-      state.isForm = true
-      initTrack()
-    }
-    const handleDelete = (item: any, index) => {
-      ElMessageBox.confirm(`是否删除：${item.ID}、${SourceMap.get(item.type).label}？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        if (state.form.ID === item.ID) {
-          state.isForm = false
-          state.form = {}
-          formParams.forEach((v: { value: string | number; init: any; }) => {
-            state.form[v.value] = v.init
-          })
-          state.trackPointList = []
-          that.$easyMap.initShape({
-            map: state.map,
-            layerName: "form-track-point-line",
-            layerZIndex: 9,
-            list: []
-          });
-          that.$easyMap.initShape({
-            map: state.map,
-            layerName: "form-track-point",
-            layerZIndex: 10,
-            list: []
-          });
-        }
-        state.trackList.splice(index, 1)
-        initTrack()
-      }).catch(() => {})
-    }
-    const onSubmit = () => {
-      ElMessageBox.confirm(`是否保存？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "success",
-      }).then(() => {
-        state.loading = true
-        const result = JSON.parse(JSON.stringify(state.trackList)).map(v => {
-          delete v.ID
-          delete v.show
-          return v
-        })
-        axios.post("/init-speed-track-api/hujie-track-server/mock", result, {
-          contentType: "application/json"
-        }).then(res => {
-          if (res.status === 200 && res.data) {
-            ElMessage.success('保存成功！')
-          } else {
-            ElMessage.error('保存失败！')
-          }
-          state.loading = false
-        })
-      }).catch(() => {})
-    }
-    return {
-      ...toRefs(state),
-      mapLoad,
-      drawTrack,
-      onPointFocus,
-      SourceMap,
-      onTemp,
-      handleShow,
-      formParams,
-      handleEdit,
-      handleDelete,
-      onSubmit
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.init-speed-track {
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  .map {
-    width: 100%;
-    height: 100vh;
-  }
-  .track {
-    position: absolute;
-    z-index: 20;
-    top: 0;
-    left: 0;
-    .track-line {
-      overflow-y: auto;
-      max-height: 180px;
-      .line {
-        height: 22px;
-        display: flex;
-        align-items: center;
-        .label {
-          width: 160px;
-          white-space: nowrap;
-        }
-        img {
-          width: 16px;
-          height: 16px;
-          cursor: pointer;
-          margin-left: 6px;
-        }
-      }
-    }
-    .track-point {
-      overflow-y: auto;
-      max-height: 600px;
-      .item {
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-      }
-      .point {
-        display: flex;
-        .position {
-          font-size: 12px;
-        }
-        border-bottom: 1px solid black;
-      }
-    }
-  }
-}
-</style>

src/views/init-speed-track/track-style.ts

@@ -1,162 +0,0 @@
-import * as ol from 'ol'
-import * as style from 'ol/style'
-import * as layer from 'ol/layer'
-import * as source from 'ol/source'
-import * as geom from 'ol/geom'
-import * as proj from 'ol/proj'
-import * as interaction from 'ol/interaction'
-import * as extent from "ol/extent";
-import * as format from "ol/format";
-import { Coordinate } from 'ol/coordinate'
-import * as turf from '@turf/turf'
-const trackLineStyle = (feature: any, resolution: any, map: any, color: any, pMap: { get: (arg0: string) => any }, callback: (arg0: style.Style[], arg1: any[]) => void) => {
-    const _style = []
-    _style.push(new style.Style({
-        stroke: new style.Stroke({
-            color: color,
-            width: 2
-        })
-    }))
-    const geometry = feature.getGeometry();
-    const length = geometry.getLength();//获取线段长度
-    const radio = (200 * resolution) / length;
-    const dradio = 1;//投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
-    const radius = 10
-    const longRadius = radius * Math.SQRT2;
-    const judgeIs = (p1: any[], p2: any[], p3: any[]) => {
-        const E = 0.00000001
-        const k1 = (ps: any[], pe: number[]) => {
-            return (pe[1] - ps[1]) / (pe[0] - ps[0])
-        }
-        const k2 = (ps: any[], pe: number[]) => {
-            return (pe[0] - ps[0]) / (pe[1] - ps[0])
-        }
-        const a = (ps: any[], pe: any[]) => {
-            return Math.abs(k1(p1, ps) - k1(p1, pe)) <= E && Math.abs(k1(p1, ps) - k1(p1, pe)) >= -E
-        }
-        const d = (ps: any[], pe: any[]) => {
-            return Math.abs(k2(p1, ps) - k2(p1, pe)) <= E && Math.abs(k2(p1, ps) - k2(p1, pe)) >= -E
-        }
-        const s = (p: any[]) => {
-            return p3[0] === p[0] && p3[1] === p[1]
-        }
-        return s(p1) || s(p2) || a(p2, p3) || d(p2, p3)
-    }
-    for (let i = 0; i <= 1; i += radio) {
-        const arrowLocation = geometry.getCoordinateAt(i);
-        if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), arrowLocation)) {
-            geometry.forEachSegment((start: any[], end: any[]) => {
-                if (!judgeIs(start, end, arrowLocation)) {
-                    return
-                }
-                let rotation = 0;
-                const dx = end[0] - start[0];
-                const dy = end[1] - start[1];
-                rotation = Math.atan2(dy, dx);
-                const pushStyle = (position: Coordinate) => {
-                    _style.push(new style.Style({
-                        geometry: new geom.Point(position),
-                        image: new style.RegularShape({
-                            stroke: new style.Stroke({
-                                color,
-                                width: 2,
-                                lineDash: [
-                                    longRadius - (4 * (radius / 10)),
-                                    longRadius + (5.5 * (radius / 10)),
-                                    longRadius,
-                                    0
-                                ]
-                            }),
-                            radius: radius / Math.SQRT2,
-                            rotation: -rotation,
-                            angle: Math.PI / (180 / 90),
-                            points: 4
-                        })
-                    }));
-                }
-                if (map.getView().getZoom() < map.getView().getMaxZoom()) {
-                    const dx1 = end[0] - arrowLocation[0];
-                    const dy1 = end[1] - arrowLocation[1];
-                    const dx2 = arrowLocation[0] - start[0];
-                    const dy2 = arrowLocation[1] - start[1];
-                    if (dx1 != dx2 && dy1 != dy2) {
-                        if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
-                            pushStyle(arrowLocation)
-                        }
-                    }
-                } else {
-                    if (Math.sqrt(Math.pow(start[0] - end[0], 2) + Math.pow(start[1] - end[1], 2)) > resolution * 100) {
-                        pushStyle([(start[0] + end[0]) / 2, (start[1] + end[1]) / 2])
-                    }
-                }
-            });
-        }
-    }
-    const pList = []
-    let lC = 0
-    // pList.push(pMap.get(geometry.getFirstCoordinate().join('-')))
-    if (map.getView().getZoom() < map.getView().getMaxZoom()) {
-        geometry.forEachSegment((start: number | Coordinate, end: number | any[]) => {
-            // @ts-ignore
-            const l = new geom.LineString([start, end])
-            lC += l.getLength()
-            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>start) && lC > 200 * resolution) {
-                // @ts-ignore
-                const current = pMap.get(`${start[0]}-${start[1]}`)
-                // @ts-ignore
-                const next = pMap.get(`${end[0]}-${end[1]}`)
-                pList.push({current, next})
-                lC = 0
-            }
-        });
-    } else {
-        geometry.forEachSegment((start: number | Coordinate, end: number | any[]) => {
-            // @ts-ignore
-            const l = new geom.LineString([start, end])
-            if (extent.containsCoordinate(map.getView().calculateExtent(map.getSize()), <any>start)) {
-                // @ts-ignore
-                const current = pMap.get(`${start[0]}-${start[1]}`)
-                // @ts-ignore
-                const next = pMap.get(`${end[0]}-${end[1]}`)
-                pList.push({current, next})
-            }
-        });
-    }
-    pList.push({
-        current: pMap.get(geometry.getLastCoordinate().join('-')),
-        next: null
-    })
-    callback(_style, pList)
-    return _style
-}
-
-const trackPointStyle = (color: any, current: any, next: any) => {
-    const _style = []
-    let _text = String(current.speed) + '节'
-    if (next) {
-        const dis = turf.distance(turf.point(current.position), turf.point(next.position), {units: 'meters'})
-        _text += dis > 1000 ? `\n${(dis / 1000).toFixed(1)}千米` : `\n${dis.toFixed(0)}米`
-        _text += `\n${(dis / 0.51444444).toFixed(0)}秒`
-    }
-    _style.push(new style.Style({
-        image: new style.Circle({
-            radius: 10,
-            fill: new style.Fill({
-                color: color,
-            }),
-        }),
-        text: new style.Text({
-            text: _text,
-            font: "12px Microsoft YaHei", // 设置字体大小
-            fill: new style.Fill({
-                // 设置字体颜色
-                color: "#000",
-            }),
-        })
-    }),)
-    return _style
-}
-export default {
-    trackLineStyle,
-    trackPointStyle
-}

src/views/ship-playback/AIS.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="21px" viewBox="0 0 14 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>融合船舶-AIS</title>
-    <g id="船舶状态2备份-2"
-       transform="translate(-48.000000, -1054.000000)"
-       style="fill: #fff;"
-       stroke="#000000"
-    >
-        <polygon id="融合船舶-AIS-"
-                 transform="translate(55.000000, 1064.000000) scale(-1, 1) translate(-55.000000, -1064.000000) "
-                 points="55 1054 61 1074 49 1074"></polygon>
-    </g>
-</svg>

src/views/ship-playback/index.vue

@@ -1,276 +0,0 @@
-<template>
-  <div class="main">
-    <div id="map" class="map"/>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-import {ElMessage, ElMessageBox} from "element-plus";
-import mapboxgl from 'mapbox-gl'
-
-export default defineComponent({
-  name: '',
-  components: {},
-  props: {},
-  setup(props, {emit}) {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-      map: <any>null,
-      popupHover: <any>null
-    })
-    const initMap = () => {
-      const style: any = {
-        version: 8,
-        sources: {
-          basic: {
-            type: 'raster',
-            tiles: [
-              'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' // 替换为您的XYZ瓦片服务URL
-            ],
-            tileSize: 256
-          }
-        },
-        layers: [
-          {
-            id: 'basic',
-            type: 'raster',
-            source: 'basic',
-            minzoom: 0,
-            maxzoom: 22
-          }
-        ],
-        glyphs: '/font-api/font/{fontstack}/{range}.pbf'
-      }
-      const accessToken = "pk.eyJ1IjoibHVrYXNtYXJ0aW5lbGxpIiwiYSI6ImNpem85dmhwazAyajIyd284dGxhN2VxYnYifQ.HQCmyhEXZUTz3S98FMrVAQ";
-      // mapboxgl.accessToken = accessToken;
-      state.map = new mapboxgl.Map({
-        container: 'map', // container ID
-        center: [109.6915958479584, 19.111636735969318], // starting position [lng, lat]
-        zoom: 7, // starting zoom
-        style: style
-      });
-      state.map.on('load', () => {
-        // initShip()
-        initAISjiete()
-      })
-    }
-    const initShip = () => {
-      state.map.addSource('maine', {
-        type: 'geojson',
-        data: {
-          type: 'FeatureCollection',
-          features: []
-        }
-      })
-      // state.map.addLayer({
-      //   id: '1',
-      //   type: 'fill',
-      //   source: 'maine',
-      //   layout: {},
-      //   paint: {
-      //     'fill-color': 'red'
-      //   }
-      // })
-      state.map.addLayer({
-        id: '2',
-        type: 'circle',
-        source: 'maine',
-        layout: {},
-        paint: {
-          'circle-color': 'red',
-          'circle-radius': 10,
-        }
-      })
-      state.map.addLayer({
-        "id": '3',
-        "type": "symbol",
-        "source": 'maine',
-        'layout': {
-          'text-field': ['get', 'title'],
-          "text-font": ["cus"],
-        }
-      });
-      // state.map.on('click', '2', (e) => {
-      //   const features = state.map.queryRenderedFeatures(e.point);
-      //   if (!features.length) {
-      //     return;
-      //   }
-      //   const properties: any = features[0].properties;
-      //   console.log(e)
-      //   console.log(features)
-      //   new mapboxgl.Popup()
-      //   .setLngLat(e.lngLat)
-      //   .setHTML(properties.title)
-      //   .addTo(state.map);
-      // });
-      state.map.on('mousemove', '2', (e) => {
-        const features = state.map.queryRenderedFeatures(e.point);
-        if (!features.length) {
-          return;
-        }
-        const properties: any = features[0].properties;
-        if (state.popupHover) {
-          state.popupHover.setLngLat(e.lngLat).setHTML(properties.title)
-        } else {
-          state.popupHover = new mapboxgl.Popup().setLngLat(e.lngLat).setHTML(properties.title).addTo(state.map);
-          state.popupHover.on('close', () => {
-            state.popupHover = null
-          })
-        }
-      });
-      state.map.on('mouseenter', '2', () => {
-        state.map.getCanvas().style.cursor = 'pointer';
-      });
-      state.map.on('mouseleave', '2', () => {
-        state.map.getCanvas().style.cursor = '';
-      });
-      const ws = new WebSocket(`ws://${location.host}/${store.state.app.apiProxy.shipPlaybackWSApi}`)
-      ws.onopen = (e) => {
-        const str = {
-          title: 'ssds'
-        }
-        ws.send(JSON.stringify(str))
-      }
-      ws.onmessage = (e) => {
-        try {
-          const json = JSON.parse(e.data)
-          state.map.getSource('maine')?.setData({
-            type: 'FeatureCollection',
-            features: json
-          })
-        } catch (e) {
-        }
-      }
-    }
-    const getBBOX = () => {
-      // 获取当前地图视窗的边界框
-      const bounds = state.map.getBounds();
-      // 获取边界框的西南角和东北角坐标
-      const sw = bounds.getSouthWest();
-      const ne = bounds.getNorthEast();
-      const BBOX = `BBOX(location,${sw.lng},${sw.lat},${ne.lng},${ne.lat})`
-      return BBOX
-    }
-    const initAISjiete = () => {
-      const sourceId = 'source_aisJiete'
-      state.map.addSource(sourceId, {
-        type: 'geojson',
-        data: {
-          type: 'FeatureCollection',
-          features: []
-        }
-      })
-      const ws = new WebSocket('ws://218.77.183.103:7001/webSocket')
-      ws.onopen = (e) => {
-        state.map.on('moveend', () => {
-          const str = {
-            cql: getBBOX()
-          }
-          ws.send(JSON.stringify(str))
-        })
-        const str = {
-          cql: getBBOX()
-        }
-        ws.send(JSON.stringify(str))
-      }
-      ws.onmessage = (e) => {
-        try {
-          const json = JSON.parse(e.data)
-          const formatData = (arr) => {
-            return arr.map(v => {
-              const obj = {
-                type: 'Feature',
-                geometry: {
-                  type: 'Point',
-                  coordinates: [v.longitude, v.latitude]
-                },
-                properties: v
-              }
-              return obj
-            })
-          }
-          state.map.getSource(sourceId)?.setData({
-            type: 'FeatureCollection',
-            features: formatData(json.data)
-          })
-        } catch (e) {
-        }
-      }
-      state.map.addLayer({
-        id: 'ais-jiete-1',
-        type: 'circle',
-        source: sourceId,
-        layout: {},
-        paint: {
-          'circle-color': 'red',
-          'circle-radius': 10,
-        }
-      })
-      state.map.addLayer({
-        "id": 'ais-jiete',
-        "type": "symbol",
-        "source": sourceId,
-        'layout': {
-          'text-field': '{gisId}',
-          "text-font": ["cus"],
-        }
-      });
-      state.map.on('mousemove', 'ais-jiete-1', (e) => {
-        const features = state.map.queryRenderedFeatures(e.point);
-        if (!features.length) {
-          return;
-        }
-        const properties: any = features[0].properties;
-        if (state.popupHover) {
-          state.popupHover.setLngLat(e.lngLat).setHTML(properties.gisId)
-        } else {
-          state.popupHover = new mapboxgl.Popup().setLngLat(e.lngLat).setHTML(properties.gisId).addTo(state.map);
-          state.popupHover.on('close', () => {
-            state.popupHover = null
-          })
-        }
-      });
-      state.map.on('mouseenter', 'ais-jiete-1', () => {
-        state.map.getCanvas().style.cursor = 'pointer';
-      });
-      state.map.on('mouseleave', 'ais-jiete-1', () => {
-        state.map.getCanvas().style.cursor = '';
-      });
-    }
-    onMounted(() => {
-      initMap()
-    })
-    return {
-      ...toRefs(state),
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.main {
-  width: 100%;
-  height: 100vh;
-  .map {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/ship-test/business/v2/index.vue

@@ -1,620 +0,0 @@
-<template>
-  <div class="business">
-    <ShipFilterCom class="ship-filter" :map="map" :mapFunc="mapFunc" @getShipFilter="handleShipFilter"/>
-    <div class="track-list">
-      <div class="track-item track-item-head">
-        <div class="source">目标来源</div>
-        <div class="key">轨迹标识</div>
-        <div class="time">轨迹持续时间</div>
-        <div class="do">操作</div>
-      </div>
-      <div class="track-item-body">
-        <template v-for="([key, item], index) in trackMap">
-          <div class="track-item">
-            <div class="source" :style="`color: ${item.config?.name};`">{{item.config?.name}}</div>
-            <div class="key" :style="`color: ${item.color};background: #ffffff;`">
-              <CusEllipsis :value="key"/>
-            </div>
-            <div class="time">{{item.trackTime}}</div>
-            <div class="do">
-<!--              <el-tooltip :enterable="false" placement="top" content="隐藏" v-if="item.show">-->
-<!--                <img class="__hover" src="@/assets/images/ship-test/ship-track-visible.svg" @click="handleTrackHide(key)"/>-->
-<!--              </el-tooltip>-->
-<!--              <el-tooltip :enterable="false" placement="top" content="显示" v-else>-->
-<!--                <img class="__hover" src="@/assets/images/ship-test/ship-track-invisible.svg" @click="handleTrackShow(key)"/>-->
-<!--              </el-tooltip>-->
-<!--              <el-tooltip :enterable="false" placement="top" content="定位">-->
-<!--                <img class="__hover" src="@/assets/images/ship-test/tools-location.svg" @click="handleTrackLocation(key)"/>-->
-<!--              </el-tooltip>-->
-<!--              <el-tooltip :enterable="false" placement="top" content="调色盘">-->
-<!--                <div class="color">-->
-<!--                  <img class="__hover" src="@/assets/images/ship-test/ship-track-speed.svg"/>-->
-<!--                  <el-color-picker v-model="item.color" @change="color => handleTrackColor(key, color)"/>-->
-<!--                </div>-->
-<!--              </el-tooltip>-->
-<!--              <el-tooltip :enterable="false" placement="top" content="删除">-->
-<!--                <img class="__hover" src="@/assets/images/ship-test/ship-track-delete.svg" @click="handleTrackDel(key)"/>-->
-<!--              </el-tooltip>-->
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  createApp,
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick, onUnmounted
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-import {ElMessage, ElMessageBox} from "element-plus";
-import ShipFilterCom from "../ship-filter.vue";
-import AisImg from '../AIS.svg'
-import mapboxgl from "mapbox-gl";
-import ShipHover from "./ship-hover.vue";
-
-export default defineComponent({
-  name: '',
-  components: {
-    ShipFilterCom,
-  },
-  props: {
-    map: <any>{},
-    mapFunc: <any>{},
-  },
-  setup(props, {emit}) {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-      shipFilter: {
-        cql: null,
-        config: <any>{}
-      },
-      currentWS: <any>null,
-      trackMap: new Map(),
-      hoverShip: {
-        popup: <any>null
-      },
-      mapIds: {
-        current: {
-          source: {
-            ship: 'source-current_ship'
-          },
-          layer: {
-            ship: 'layer-current_ship'
-          }
-        }
-      },
-      shipHoverInfo: {
-        data: {},
-        config: {},
-        isHistory: false
-      },
-      staticList: []
-    })
-    const ref_shipHover = ref()
-    const handleShipFilter = ({cql, shipParams}) => {
-      state.currentWS?.close()
-      state.currentWS = null
-
-      state.shipFilter.cql = cql
-      state.shipFilter.config = shipParams
-      console.log(state.shipFilter.config)
-      refreshMap()
-    }
-    const getKeyData = (DATA, key) => {
-      if (state.shipFilter.config.track[key]) {
-        return eval(state.shipFilter.config.track[key])
-      } else {
-        return null
-      }
-    }
-    const initMap = () => {
-      // 船舶图片
-      props.mapFunc.addImg('ais', AisImg)
-      // 船舶source
-      props.map.addSource(state.mapIds.current.source.ship, {
-        type: 'geojson',
-        data: {
-          type: 'FeatureCollection',
-          features: []
-        }
-      })
-      // 船舶layer
-      props.map?.addLayer({
-        id: state.mapIds.current.layer.ship,
-        type: "symbol",
-        source: state.mapIds.current.source.ship,
-        layout: {
-          'icon-allow-overlap': true,
-          'icon-ignore-placement': true,
-          // 'text-field': '{gisId}',
-          // "text-font": ["cus"],
-          'icon-image': [
-            'match',
-            ['get', 'type'], // 根据属性值'type'来匹配
-            'A', 'icon-A', // 当属性值为'A'时应用'icon-A'图片样式
-            'B', 'icon-B', // 当属性值为'B'时应用'icon-B'图片样式
-            'ais' // 默认样式
-          ],
-          "symbol-spacing": 1,
-          "icon-rotate": ["get", "_course"]
-        },
-        paint: {
-          'icon-color': '#000000',
-          'icon-halo-color': '#000000',
-          'icon-halo-width': 4,
-        }
-      })
-      props.map.on('mousemove', state.mapIds.current.layer.ship, (e) => {
-        const features = props.map.queryRenderedFeatures(e.point);
-        if (!features.length) {
-          return;
-        }
-        const properties: any = features[0].properties;
-        state.shipHoverInfo = {
-          data: properties,
-          config: state.shipFilter.config,
-          isHistory: false
-        }
-        state.hoverShip.popup?.remove()
-        const com = createApp(ShipHover, {
-          that: that,
-          info: state.shipHoverInfo,
-          staticList: state.staticList
-        })
-        // 将 Vue 实例挂载到一个新的 DOM 元素上
-        const vm = com.mount(document.createElement('div'));
-        // 获取包含 Vue 模板的 DOM 元素
-        const contentElement = vm.$el;
-        state.hoverShip.popup = new mapboxgl.Popup({
-          className: 'cus',
-          maxWidth: 'none',
-          closeButton: false,
-          closeOnClick: true,
-          offset: 15
-        }).setLngLat(e.lngLat).setDOMContent(contentElement).addTo(props.map);
-      });
-      props.map.on('mouseenter', state.mapIds.current.layer.ship, () => {
-        props.map.getCanvas().style.cursor = 'pointer';
-      });
-      props.map.on('mouseleave', state.mapIds.current.layer.ship, () => {
-        props.map.getCanvas().style.cursor = '';
-      });
-      props.map.on('click', state.mapIds.current.layer.ship, (e) => {
-        const features = props.map.queryRenderedFeatures(e.point);
-        if (!features.length) {
-          return;
-        }
-        const DATA: any = features[0].properties;
-        console.log(getKeyData(DATA, 'trackKey'))
-        const trackId = getKeyData(DATA, 'trackKey')
-        if (trackId && !state.trackMap.has(trackId)) {
-          handleShipClick(DATA)
-        }
-      });
-    }
-    const refreshMap = () => {
-      if (state.shipFilter.config) {
-        initWebSocketShip()
-      }
-    }
-    const initWebSocketShip = () => {
-      const str = {
-        cql: `(BBOX(location, ${props.mapFunc.getBBOX().join(',')})`,
-      }
-      if (state.shipFilter.cql) {
-        str.cql += ` and ${state.shipFilter.cql}`
-      }
-      str.cql += ')'
-      let ids: any = []
-      state.trackMap.forEach((value, key) => {
-        if (value.sourceId === state.shipFilter.config.id) {
-          ids.push(`'${key}'`)
-        }
-      })
-      if (ids.length > 0) {
-        str.cql += ` and (${state.shipFilter.config.track.trackKey.split('DATA.')[1]} not in (${ids.join(',')}))`
-      }
-      if (state.currentWS) {
-        if (state.currentWS.readyState === 1) {
-          state.currentWS.send(JSON.stringify(str))
-        }
-      } else {
-        const ws = new WebSocket(state.shipFilter.config.wsUrl)
-        state.currentWS = ws
-        ws.onopen = (e) => {
-          ws.send(JSON.stringify(str))
-        }
-        ws.onmessage = (e) => {
-          try {
-            const json = JSON.parse(e.data)
-            const s = 'json' + state.shipFilter.config.wsDataFlag
-            const data = eval(s)
-            initShip(data)
-          } catch (e) {
-          }
-        }
-      }
-    }
-    const initShip = (data) => {
-      const formatData = (arr) => {
-        return arr.map(DATA => {
-          const obj = {
-            type: 'Feature',
-            geometry: {
-              type: 'Point',
-              coordinates: that.$easyMap.formatPosition.wptTcpt(getKeyData(DATA, 'trackWktKey'))
-            },
-            properties: JSON.parse(JSON.stringify(DATA))
-          }
-          obj.properties.isHistory = false
-          obj.properties.ID = getKeyData(DATA, 'trackPointKey')
-          obj.properties._trackId = getKeyData(DATA, 'trackKey')
-          obj.properties._trackKey = state.shipFilter.config.track.trackKey.split('DATA.')[1]
-          obj.properties._course = getKeyData(DATA, 'trackCourseKey')
-          obj.properties._speed = getKeyData(DATA, 'trackSpeedKey')
-          obj.properties._head = getKeyData(DATA, 'trackDeadKey')
-          obj.properties._wsDataFlag = state.shipFilter.config.wsDataFlag
-          obj.properties._wsUrl = state.shipFilter.config.wsUrl
-          obj.properties._sourceId = state.shipFilter.config.id
-          obj.properties._historyWsUrl = state.shipFilter.config.historyWsUrl
-          obj.properties._historyWsDataFlag = state.shipFilter.config.historyWsDataFlag
-          obj.properties._historyWsOtherParams = JSON.parse(state.shipFilter.config.historyWsOtherParams)
-          obj.properties._config = state.shipFilter.config
-          obj.properties._hover = {
-            data: DATA,
-            config: state.shipFilter.config,
-            isHistory: false
-          }
-          return obj
-        })
-      }
-      props.map.getSource(state.mapIds.current.source.ship).setData({
-        type: 'FeatureCollection',
-        features: formatData(data)
-      })
-      props.map.setPaintProperty(state.mapIds.current.layer.ship, 'icon-color', state.shipFilter.config.color)
-    }
-    const handleShipClick = (DATA) => {
-      console.log(DATA)
-      const color = `rgb(${that.$util.randomNum(0, 255)}, ${that.$util.randomNum(0, 255)}, ${that.$util.randomNum(0, 255)})`
-      // const trackLayer: any = new layer.Vector({
-      //   zIndex: 10
-      // })
-      // props.map.addLayer(trackLayer)
-      const trackId = DATA._trackId
-      const rWs = new WebSocket(DATA._wsUrl)
-      state.trackMap.set(trackId, {
-        color: color,
-        webSocket: rWs,
-        glSourceIds: [],
-        glLayerIds: [],
-        historyData: [],
-        realData: [],
-        sourceId: DATA._sourceId,
-        config: DATA._config,
-        show: true,
-        trackTime: '?'
-      })
-      const updateTrackMapByKey = (key, data) => {
-        state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {key: data}))
-      }
-      // initWebSocketShip()
-      // if (clickFeat.get('_historyWsUrl')) {
-      //   const hWs = new WebSocket(clickFeat.get('_historyWsUrl'))
-      //   hWs.onopen = (e) => {
-      //     const str = {
-      //       ...clickFeat.get('_historyWsOtherParams'),
-      //       endTime: that.$util.YMDHms(new Date().getTime() + 1000 * 60 * 10),
-      //       shipId: trackId,
-      //       startTime: that.$util.YMDHms(new Date().getTime() - 1000 * 60 * 60 * 4)
-      //     }
-      //     hWs.send(JSON.stringify(str))
-      //   }
-      //   hWs.onmessage = (e) => {
-      //     try {
-      //       const json = JSON.parse(e.data)
-      //       const s = 'json' + clickFeat.get('_historyWsDataFlag')
-      //       const data = eval(s)
-      //       const _historyData = [...state.trackMap.get(trackId).historyData, ...data]
-      //       state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {historyData: _historyData}))
-      //       draw()
-      //     } catch (e) {
-      //     }
-      //   }
-      // }
-      // rWs.onopen = (e) => {
-      //   const str = {
-      //     cql: `${clickFeat.get('_trackKey')} = '${trackId}'`
-      //   }
-      //   rWs.send(JSON.stringify(str))
-      // }
-      // rWs.onmessage = (e) => {
-      //   try {
-      //     const json = JSON.parse(e.data)
-      //     const s = 'json' + clickFeat.get('_wsDataFlag')
-      //     const data = eval(s)
-      //     // 实时船舶
-      //     const DATA = data?.[0]
-      //     const getKeyData = (key) => {
-      //       if (clickFeat.get(key)) {
-      //         return eval(clickFeat.get(key))
-      //       } else {
-      //         return null
-      //       }
-      //     }
-      //     if (DATA) {
-      //       if (state.trackMap.get(trackId).realData.length === 0 || state.trackMap.get(trackId).realData[state.trackMap.get(trackId).realData.length - 1]._trackPointId != getKeyData('trackPointKey')) {
-      //         DATA._trackPointId = getKeyData('trackPointKey')
-      //         state.trackMap.get(trackId).realData.push(DATA)
-      //         if (state.currentTime != state.trackMap.get(trackId).currentTime) {
-      //           draw()
-      //         }
-      //       }
-      //     }
-      //   } catch (e) {
-      //   }
-      // }
-      // const draw = () => {
-      //   const timeArr: any = []
-      //   state.trackMap.get(trackId).currentTime = JSON.parse(JSON.stringify(state.currentTime))
-      //   const features: any = []
-      //   // 轨迹线
-      //   const lineArr: any = []
-      //   state.trackMap.get(trackId).historyData.forEach((DATA, i) => {
-      //     DATA.isHistory = true
-      //     const getKeyData = (key) => {
-      //       if (clickFeat.get(key)) {
-      //         return eval(clickFeat.get(key))
-      //       } else {
-      //         return null
-      //       }
-      //     }
-      //     lineArr.push(getKeyData('historyTrackWktKey'))
-      //     if (i === 0 || i === state.trackMap.get(trackId).historyData.length - 1) {
-      //       timeArr.push(getKeyData('historyTrackTimeKey'))
-      //     }
-      //   })
-      //   state.trackMap.get(trackId).realData.forEach((DATA, i) => {
-      //     DATA.isHistory = false
-      //     const getKeyData = (key) => {
-      //       if (clickFeat.get(key)) {
-      //         return eval(clickFeat.get(key))
-      //       } else {
-      //         return null
-      //       }
-      //     }
-      //     lineArr.push(getKeyData('trackWktKey'))
-      //     if (i === 0 || i === state.trackMap.get(trackId).realData.length - 1) {
-      //       timeArr.push(getKeyData('trackTimeKey'))
-      //     }
-      //   })
-      //   if (lineArr.length > 0) {
-      //     const lineWkt = that.$easyMap.formatPosition.wptTwl(lineArr)
-      //     const feat: any = new format.WKT().readFeature(lineWkt)
-      //     feat.set('trackPointList', [...state.trackMap.get(trackId).historyData, ...state.trackMap.get(trackId).realData])
-      //     feat.set('featureType', 'shipTrack')
-      //     feat.setStyle((f, r) => ShipStyle.trackStyle(f, r, props.map, state.trackMap.get(trackId).color, (s, pointList) => {
-      //       const pointFeatures: any = []
-      //       pointList.forEach(DATA => {
-      //         try {
-      //           const getKeyData = (key) => {
-      //             if (clickFeat.get(key)) {
-      //               return eval(clickFeat.get(key))
-      //             } else {
-      //               return null
-      //             }
-      //           }
-      //           const feat: any = new format.WKT().readFeature(DATA.isHistory ? getKeyData('historyTrackWktKey') : getKeyData('trackWktKey'))
-      //           feat.set('featureType', 'shipPoint')
-      //           feat.set('_hover', {
-      //             data: DATA,
-      //             config: clickFeat.get('_config'),
-      //             isHistory: DATA.isHistory
-      //           })
-      //           feat.setStyle(ShipStyle.trackPointNormalStyle(state.trackMap.get(trackId).color))
-      //           pointFeatures.push(feat)
-      //         } catch (e) {
-      //           console.log(e)
-      //         }
-      //       })
-      //       trackLayer.getSource().addFeatures(pointFeatures)
-      //       return s
-      //     }))
-      //     features.push(feat)
-      //   }
-      //   // 船舶
-      //   if (state.trackMap.get(trackId).realData.length > 0) {
-      //     try {
-      //       const DATA = state.trackMap.get(trackId).realData[state.trackMap.get(trackId).realData.length - 1]
-      //       const getKeyData = (key) => {
-      //         if (clickFeat.get(key)) {
-      //           return eval(clickFeat.get(key))
-      //         } else {
-      //           return null
-      //         }
-      //       }
-      //       const feat: any = new format.WKT().readFeature(getKeyData('trackWktKey'))
-      //       feat.set('featureType', 'ship')
-      //       feat.setId(getKeyData('trackPointKey'))
-      //       feat.set('_hover', {
-      //         data: DATA,
-      //         config: clickFeat.get('_config'),
-      //         isHistory: false
-      //       })
-      //       feat.setStyle(ShipStyle.ShipNormalStyle({
-      //         course: clickFeat.get('_course'),
-      //         speed: clickFeat.get('_speed'),
-      //         head: clickFeat.get('_head'),
-      //         color: state.trackMap.get(trackId).color
-      //       }))
-      //       features.push(feat)
-      //     } catch (e) {
-      //       console.log(e)
-      //     }
-      //   }
-      //   const vectorSource = new source.Vector({
-      //     features: features,
-      //     wrapX: false
-      //   });
-      //   trackLayer.setSource(vectorSource)
-      //   if (timeArr.length > 1) {
-      //     state.trackMap.set(trackId, Object.assign(state.trackMap.get(trackId), {trackTime: that.$util.comTimeByArea(timeArr[0], timeArr[timeArr.length - 1], true)}))
-      //   }
-      // }
-    }
-    const initStatic = () => {
-      state.staticList = []
-      that.$api.shipTestStaticList().then(res => {
-        if (res.code === 200) {
-          state.staticList = res.data
-          const sId = 'source-static-point'
-          props.map.addSource(sId, {
-            type: 'geojson',
-            data: {
-              type: 'FeatureCollection',
-              features: state.staticList.map(v => {
-                return {
-                  type: 'Feature',
-                  geometry: {
-                    type: 'Point',
-                    coordinates: that.$easyMap.formatPosition.wptTcpt(v.wkt)
-                  },
-                  properties: {
-                    color: v.color,
-                    name: v.name
-                  }
-                }
-              })
-            }
-          })
-          props.map?.addLayer({
-            id: 'layer-static-point-circle',
-            type: "circle",
-            source: sId,
-            paint: {
-              'circle-color': ['get', 'color'],
-              'circle-radius': 10,
-            }
-          })
-          props.map?.addLayer({
-            id: 'layer-static-point-text',
-            type: "symbol",
-            source: sId,
-            layout: {
-              'text-allow-overlap': true,
-              'text-field': '{name}',
-              "text-font": ["cus"],
-              'text-offset': [0, -1.5],
-            },
-            paint: {
-              'text-color': '#ffffff',
-              'text-halo-color': '#D26CDB',
-              'text-halo-width': 1
-            }
-          })
-        }
-      })
-    }
-    onMounted(() => {
-      initMap()
-      initStatic()
-    })
-    onUnmounted(() => {
-    })
-    return {
-      ...toRefs(state),
-      handleShipFilter,
-      ref_shipHover,
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.business {
-  .ship-filter {
-    position: fixed;
-    top: 0;
-    left: 0;
-  }
-  .track-list {
-    position: fixed;
-    top: 0;
-    right: 0;
-    max-height: 600px;
-    background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
-    padding: 10px 0;
-    color: #FFFFFF;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    .track-item-head {
-      padding: 0 20px;
-      text-align: left;
-    }
-    .track-item-body {
-      padding: 0 20px;
-      flex: 1;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-    }
-    .track-item {
-      display: flex;
-      font-size: 14px;
-      .key {
-        width: 200px;
-      }
-      .source {
-        width: 100px;
-      }
-      .time {
-        width: 100px;
-      }
-      .do {
-        display: flex;
-        >* {
-          width: 20px;
-          height: 20px;
-        }
-        .color {
-          position: relative;
-          width: 16px;
-          height: 16px;
-          display: flex;
-          >img {
-            width: 100%;
-            height: 100%;
-          }
-          :deep(.el-color-picker) {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            opacity: 0;
-            .el-color-picker__trigger {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/ship-test/business/v2/popup-style.scss

@@ -1,65 +0,0 @@
-:deep(.hover-info) {
-  $footH: 10px;
-  width: 300px;
-  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
-  border-radius: 0px 4px 4px 4px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: -$footH;
-    border-top: $footH solid #0043C4;
-    border-left: $footH solid transparent;
-    border-right: $footH solid transparent;
-  }
-  .hover-info-head {
-    padding: 0 4px;
-    height: 18px;
-    position: absolute;
-    top: -18px;
-    left: 0;
-    font-size: 12px;
-    font-family: PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    display: flex;
-    align-items: center;
-    line-height: 8px;
-    background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
-    border-radius: 2px 2px 0 0;/* 设置圆角 */
-    >img {
-      margin: 0 4px 0 6px;
-    }
-  }
-  .hover-info-close {
-    position: absolute;
-    right: 0;
-    top: -16px;
-  }
-  .hover-main {
-    width: 100%;
-    height: auto;
-    padding: 10px;
-    .hover-item {
-      display: flex;
-      .hover-item-label {
-        min-width: 42px;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 600;
-        color: #08FFFF;
-        line-height: 20px;
-      }
-      .hover-item-value {
-        flex: 1;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #FFFFFF;
-        line-height: 20px;
-      }
-    }
-  }
-}

src/views/ship-test/business/v2/ship-hover.vue

@@ -1,176 +0,0 @@
-<template>
-  <div class="hover-info" id="ID_shipHover" ref="ref_shipHover">
-    <div class="hover-info-head">
-      <span>{{info?.config?.name}}_{{ info?.isHistory ? '历史' : '实时'}}</span>
-    </div>
-    <div class="hover-info-close __hover" @click="null">
-      <img src="@/components/easyMap/images/close.png" alt=""/>
-    </div>
-    <div class="hover-main" v-if="info?.data">
-      <template v-for="item in shipHoverInfoCpt">
-        <div class="hover-item">
-          <div class="hover-item-label">{{item.label}}：</div>
-          <div class="hover-item-value">{{item.value}}</div>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import * as turf from "@turf/turf";
-
-export default defineComponent({
-  name: '',
-  components: {},
-  props: {
-    that: <any>{},
-    info: <any>{},
-    staticList: {
-      default: () => []
-    }
-  },
-  setup(props, {emit}) {
-    const state = reactive({})
-    const STATIC = (id) => {
-      if (id) {
-        return props.staticList.filter(v => id == v.id)?.[0].wkt
-      }
-      return null
-    }
-    const DISTANCE = (p1, p2) => {
-      if (p1 && p2) {
-        return turf.distance(props.that.$easyMap.formatPosition.wptTcpt(p1), props.that.$easyMap.formatPosition.wptTcpt(p2), {units: 'kilometers'}).toFixed(2) + 'km'
-      }
-      return null
-    }
-    const shipHoverInfoCpt = computed(() => {
-      const arr: any = []
-      const DATA = props.info.data
-      if (DATA.isHistory) {
-        props.info?.config?.hover?.forEach(h => {
-          if (h.historyValue) {
-            let value = eval(h.historyValue)
-            h.options?.forEach(v => {
-              if (String(value) == v.value) {
-                value = v.label
-              }
-            })
-            arr.push({
-              label: h.name,
-              value: value
-            })
-          }
-        })
-      } else {
-        props.info?.config?.hover?.forEach(h => {
-          let value = eval(h.value)
-          h.options?.forEach(v => {
-            if (String(value) == v.value) {
-              value = v.label
-            }
-          })
-          arr.push({
-            label: h.name,
-            value: value
-          })
-        })
-      }
-      return arr
-    })
-    watch(() => props.info, () => {
-      console.log(123)
-    })
-    onMounted(() => {
-      // eval注册函数动态方法，不调用一下的话打包不包含
-      DISTANCE(null, null)
-      STATIC(null)
-    })
-    return {
-      ...toRefs(state),
-      shipHoverInfoCpt
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.hover-info {
-  $footH: 10px;
-  width: 300px;
-  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
-  border-radius: 0px 4px 4px 4px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: -$footH;
-    border-top: $footH solid #0043C4;
-    border-left: $footH solid transparent;
-    border-right: $footH solid transparent;
-  }
-  .hover-info-head {
-    padding: 0 4px;
-    height: 18px;
-    position: absolute;
-    top: -18px;
-    left: 0;
-    font-size: 12px;
-    font-family: PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    display: flex;
-    align-items: center;
-    line-height: 8px;
-    background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
-    border-radius: 2px 2px 0 0;/* 设置圆角 */
-    >img {
-      margin: 0 4px 0 6px;
-    }
-  }
-  .hover-info-close {
-    position: absolute;
-    right: 0;
-    top: -16px;
-  }
-  .hover-main {
-    width: 100%;
-    height: auto;
-    padding: 10px;
-    .hover-item {
-      display: flex;
-      .hover-item-label {
-        min-width: 42px;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 600;
-        color: #08FFFF;
-        line-height: 20px;
-      }
-      .hover-item-value {
-        flex: 1;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #FFFFFF;
-        line-height: 20px;
-      }
-    }
-  }
-}
-
-</style>

src/views/ship-test/index.vue

@@ -1,23 +1,13 @@
 <template>
   <div class="main">
-    <template v-if="version === 'v1'">
-      <EasyMapComponent
-        class="map"
-        layout="info"
-        @easyMapLoad="mapLoad"
-      />
-      <BusinessCom v-if="map" :map="map" :mapFunc="mapFunc"/>
-    </template>
-    <template v-if="version === 'v2'">
-      <EasyMapGLComponent
-        class="map"
-        @easyMapGLLoad="mapGLLoad"/>
-      <BusinessV2Com v-if="map" :map="map" :mapFunc="mapFunc"/>
-    </template>
+    <EasyMapComponent
+      class="map"
+      layout="info"
+      @easyMapLoad="mapLoad"
+    />
+    <BusinessCom v-if="map" :map="map" :mapFunc="mapFunc"/>
     <div class="buttons">
       <el-button type="primary" @click="$router.push({name: '666089c1-0eac-4058-9b82-157cb4b9c277'})">配置管理</el-button>
-      <el-button v-if="version !== 'v1'" type="primary" @click="switchMapVersion('v1')">v1</el-button>
-      <el-button v-if="version !== 'v2'" type="primary" @click="switchMapVersion('v2')">v2</el-button>
     </div>
   </div>
 </template>
@@ -39,12 +29,11 @@ import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
 import BusinessCom from "@/views/ship-test/business/index.vue";
-import BusinessV2Com from "@/views/ship-test/business/v2/index.vue";
 
 export default defineComponent({
   name: '',
   components: {
-    BusinessCom, BusinessV2Com
+    BusinessCom
   },
   props: {},
   setup(props, {emit}) {
@@ -61,10 +50,6 @@ export default defineComponent({
       state.map = map
       state.mapFunc = func
     }
-    const mapGLLoad = (map, func) => {
-      state.map = map
-      state.mapFunc = func
-    }
     const switchMapVersion = (version) => {
       const loading = ElLoading.service({
         lock: true,
@@ -95,7 +80,6 @@ export default defineComponent({
     return {
       ...toRefs(state),
       mapLoad,
-      mapGLLoad,
       switchMapVersion
     }
   },

src/views/track-status/heart-line.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="chart-main" ref="ref_main">
-    <div class="chart-ref" ref="ref_chart"/>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-import {ElMessage, ElMessageBox} from "element-plus";
-import * as echarts from 'echarts'
-
-export default defineComponent({
-  name: '',
-  components: {},
-  props: {
-    data: {}
-  },
-  setup(props, {emit}) {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-      resizeObserver: <any>null,
-      chart: <any>null,
-    })
-    const ref_main =ref()
-    const ref_chart =ref()
-    const initChart = () => {
-      const chart = state.chart || echarts.init(ref_chart.value)
-      const option = {
-        grid: {
-          top: 20,
-          left: 40,
-          bottom: 20,
-          right: 20
-        },
-        xAxis: {
-          type: 'category',
-          show: false,
-          data: props.data?.map((v, i) => i) || []
-        },
-        yAxis: {
-          type: 'value',
-          splitNumber: 1,
-          max: 1,
-          min: 0,
-          axisLabel: {
-            formatter: (v) => {
-              if (v === 1) {
-                return '在线'
-              } else if (v === 0) {
-                return '离线'
-              }
-            }
-          }
-        },
-        // visualMap: {
-        //   show: false,
-        //   type: 'piecewise',
-        //   dimension: 0,
-        //   pieces: [
-        //     {gte: 0, lt: 1, color: 'red'},
-        //     {gte: 1, lt: 2,color: 'green'},
-        //   ]
-        // },
-        series: [
-          {
-            type: 'line',
-            data: props.data?.map(v => {
-              if (v.location) {
-                return {
-                  value: 1,
-                  itemStyle: {
-                    color: 'green'
-                  }
-                }
-              } else {
-                return {
-                  value: 0,
-                  itemStyle: {
-                    color: 'red'
-                  }
-                }
-              }
-            }) || []
-          }
-        ]
-      }
-      chart.setOption(option)
-      state.resizeObserver = new ResizeObserver(entries => {
-        for (const entry of entries) {
-          chart && chart.resize()
-        }
-      })
-      state.resizeObserver.observe(ref_main.value)
-      return chart
-    }
-    watch(() => props.data, () => {
-      state.chart = initChart()
-    })
-    onMounted(() => {
-      nextTick(() => {
-        state.chart = initChart()
-      })
-      return () => {
-        state.resizeObserver?.unobserve(ref_main?.value)
-        state.resizeObserver?.disconnect()
-      }
-    })
-    return {
-      ...toRefs(state),
-      ref_main,
-      ref_chart
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.chart-main {
-  width: 100%;
-  height: 100%;
-  .chart-ref {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/track-status/index.vue

@@ -1,439 +0,0 @@
-<template>
-  <div class="main">
-    <div class="main-head">
-      <el-button type="primary" @click="onAddGroup">新增分组</el-button>
-      显示心跳：<el-switch v-model="showAllChart"/>
-      显示地图：<el-switch v-model="showAllMap"/>
-    </div>
-    <div class="main-content">
-      <template v-for="item in group">
-        <el-card>
-          <el-button type="primary" @click="onAddKey(item)">新增KEY</el-button>
-          <template v-if="item.keyList?.length > 0">
-            <el-button v-if="!item.isStart" type="success" @click="onStartKey(item)">开始</el-button>
-            <el-button v-else type="danger" @click="onStopKey(item)">暂停</el-button>
-            <el-button v-if="!item.isStart" type="warning" @click="onEditGroup(item)">编辑分组</el-button>
-            <el-button v-if="!item.isStart" type="danger" @click="onDelGroup(item)">删除分组</el-button>
-          </template>
-          <div>{{item.name}}（{{item.second}}秒）</div>
-          <div>{{item.cql}}</div>
-          <el-divider />
-          <div>
-            <template v-for="(key, keyIndex) in item.keyList">
-              <div :style="`color: ${key.online ? '' : 'red'}`">
-                {{keyIndex + 1}}、{{key.key}}<el-button v-if="!item.isStart" type="danger" size="small" @click="onDelKey(item, key)">删除</el-button>
-                <template v-if="item.isStart && (showAllMap || showAllChart)">
-                  <div class="key-content">
-                    <div class="key-position" v-if="showAllMap">
-                      <EasyMapComponent
-                          v-if="key.online"
-                          class="map"
-                          @easyMapLoad="(map, func) => initKeyMap(map, key)"
-                      />
-                      <div v-else>无信号</div>
-                    </div>
-                    <div class="key-heart" v-if="showAllChart">
-                      <HeartLineChart :data="key.apiData"/>
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </template>
-          </div>
-        </el-card>
-      </template>
-    </div>
-    <CusDialog
-        title="新增分组"
-        v-model:show="showGroupDialog"
-        @submit="onSaveGroup"
-        height="auto"
-    >
-      <div style="padding: 20px;">
-        <CusForm ref="ref_groupForm" @handleEnter="onSaveGroup">
-          <CusFormColumn
-            label="分组名称"
-            required
-            :span="24"
-            v-model:param="groupForm.name"
-          />
-          <CusFormColumn
-            label="心跳频率"
-            required
-            link="number"
-            unit="秒"
-            :span="24"
-            v-model:param="groupForm.second"
-          />
-          <CusFormColumn
-              label="cql——{KEY}"
-              required
-              type="textarea"
-              :span="24"
-              :rows="8"
-              v-model:param="groupForm.cql"
-          />
-        </CusForm>
-      </div>
-    </CusDialog>
-    <CusDialog
-        title="新增KEY"
-        v-model:show="showKeyDialog"
-        @submit="onSaveKey"
-        height="auto"
-    >
-      <div style="padding: 20px;">
-        <CusForm ref="ref_keyForm" @handleEnter="onSaveKey">
-          <CusFormColumn
-              label="KEY"
-              required
-              :span="24"
-              v-model:param="keyForm.key"
-          />
-        </CusForm>
-      </div>
-    </CusDialog>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-import {ElMessage, ElMessageBox} from "element-plus";
-import axios from "axios";
-import * as style from 'ol/style'
-import HeartLineChart from './heart-line.vue'
-
-export default defineComponent({
-  name: '',
-  components: {
-    HeartLineChart
-  },
-  props: {},
-  setup(props, {emit}) {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-      DB: <any>null,
-      ObjectStore: 'track-status',
-      group: <any>[],
-      showGroupDialog: false,
-      groupForm: {},
-      showKeyDialog: false,
-      keyForm: {},
-      showAllChart: true,
-      showAllMap: true,
-    })
-    const ref_groupForm = ref()
-    const ref_keyForm = ref()
-    const request = window.indexedDB.open('SeatTools', 1)
-    request.onerror = function (event) {}
-    request.onsuccess = function (event) {
-      state.DB = request.result
-      state.group = []
-      init()
-    }
-    request.onupgradeneeded = function (event: any) {
-      state.DB = event.target.result
-      if (!state.DB.objectStoreNames.contains(state.ObjectStore)) {
-        const objectStore = state.DB.createObjectStore(state.ObjectStore, { autoIncrement: true })
-      }
-    }
-    const init = () => {
-      const os = state.DB.transaction(state.ObjectStore).objectStore(state.ObjectStore)
-      os.openCursor().onsuccess = e => {
-        const cursor = e.target.result
-        if (cursor) {
-          if (state.group.every(v => v.id !== cursor.key)) {
-            state.group.push({
-              id: cursor.key,
-              name: cursor.value.name,
-              cql: cursor.value.cql,
-              second: cursor.value.second,
-              keyList: JSON.parse(cursor.value.keyList),
-              isStart: false
-            })
-          }
-          cursor.continue()
-        } else {
-        }
-      }
-    }
-    const onAddGroup = () => {
-      state.showGroupDialog = true
-      state.groupForm = {}
-    }
-    const onSaveGroup = () => {
-      ref_groupForm.value.submit().then(() => {
-        if (!state.groupForm.id) {
-          const obj = {
-            name: state.groupForm.name,
-            second: state.groupForm.second,
-            cql: state.groupForm.cql,
-            keyList: JSON.stringify([])
-          }
-          const re = state.DB.transaction([state.ObjectStore], 'readwrite').objectStore(state.ObjectStore).add(obj)
-          re.onsuccess = e => {
-            ElMessage.success('添加成功！')
-            state.showGroupDialog = false
-            init()
-          }
-          re.onerror = e => {
-            ElMessage.error('添加失败！')
-          }
-        } else {
-          const obj = {
-            name: state.groupForm.name,
-            second: state.groupForm.second,
-            cql: state.groupForm.cql,
-            keyList: JSON.stringify(state.groupForm.keyList.map(v => {
-              return {
-                key: v.key
-              }
-            }))
-          }
-          const re = state.DB.transaction([state.ObjectStore], 'readwrite').objectStore(state.ObjectStore).put(obj, state.groupForm.id)
-          re.onsuccess = e => {
-            ElMessage.success('更新成功！')
-            state.group.forEach(v => {
-              if (v.id === state.groupForm.id) {
-                v = state.groupForm
-              }
-            })
-            state.showGroupDialog = false
-          }
-          re.onerror = e => {
-            ElMessage.error('更新失败！')
-          }
-        }
-      })
-    }
-    const onAddKey = (group) => {
-      state.keyForm = {
-        group: group
-      }
-      state.showKeyDialog = true
-    }
-    const onSaveKey = () => {
-      ref_keyForm.value.submit().then(() => {
-        const kList = [...state.keyForm.group.keyList.map(v => {
-          const o = {key: v.key}
-          return o
-        }), {key: state.keyForm.key}]
-        const obj = {
-          name: state.keyForm.group.name,
-          second: state.keyForm.group.second,
-          cql: state.keyForm.group.cql,
-          keyList: JSON.stringify(kList)
-        }
-        const re = state.DB.transaction([state.ObjectStore], 'readwrite').objectStore(state.ObjectStore).put(obj, state.keyForm.group.id)
-        re.onsuccess = e => {
-          ElMessage.success('更新成功！')
-          state.group.forEach(v => {
-            if (v.id === state.keyForm.group.id) {
-              v.keyList = JSON.parse(JSON.stringify(kList))
-            }
-          })
-          state.showKeyDialog = false
-        }
-        re.onerror = e => {
-          ElMessage.error('更新失败！')
-        }
-      })
-    }
-    const onStartKey = (group) => {
-      group.isStart = true
-      const handle = () => {
-        group.keyList.forEach(v => {
-          let url = `/${store.state.app.apiProxy.rhFindShipApi}/geomesa/queryFusionShip/?cql=`;
-          url += encodeURIComponent(group.cql.split('{KEY}').join(v.key))
-          axios.get(url).then(res => {
-            if (res.data.data?.length > 0) {
-              v.online = true
-              if (v.apiData) {
-                v.apiData = [...v.apiData, res.data.data[0]]
-              } else {
-                v.apiData = [res.data.data[0]]
-              }
-              setKeyMap(v, v.apiData[v.apiData.length - 1])
-            } else {
-              v.online = false
-              if (v.apiData) {
-                v.apiData = [...v.apiData, {}]
-              } else {
-                v.apiData = [{}]
-              }
-            }
-          })
-        })
-      }
-      handle()
-      group.interval = setInterval(() => {
-        handle()
-      }, 1000 * group.second)
-    }
-    const onStopKey = (group) => {
-      group.isStart = false
-      clearInterval(group.interval)
-      group.interval = null
-      group.keyList?.forEach(v => {
-        v.apiData = []
-      })
-    }
-    const setKeyMap = (key, data) => {
-      if (key.MAP) {
-        that.$easyMap.initShape({
-          map: key.MAP,
-          layerName: "MAP",
-          layerZIndex: 9,
-          list: [
-            {
-              easyMapParams: {
-                id: new Date().getTime(),
-                position: data.location,
-                normalStyle: [
-                  new style.Style({
-                    image: new style.Circle({
-                      radius: 5,
-                      fill: new style.Fill({
-                        color: 'red',
-                      }),
-                    }),
-                  })
-                ]
-              }
-            }
-          ]
-        });
-        key.MAP.getView().animate({
-          center: that.$easyMap.formatPosition.wptTcpt(data.location)
-        })
-      }
-    }
-    const initKeyMap = (map, key) => {
-      key.MAP = map
-      if (key.apiData?.length > 0) {
-        const data = key.apiData[key.apiData.length - 1]
-        setKeyMap(key, data)
-      }
-    }
-    const onDelGroup = (group) => {
-      ElMessageBox.confirm(`是否删除分组：${group.name}`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        const re = state.DB.transaction([state.ObjectStore], 'readwrite').objectStore(state.ObjectStore).delete(group.id)
-        re.onsuccess = e => {
-          ElMessage.success('删除成功！')
-          state.group.forEach((v, i) => {
-            if (v.id === group.id) {
-              state.group.splice(i, 1)
-            }
-          })
-        }
-        re.onerror = e => {
-          ElMessage.error('更新失败！')
-        }
-      })
-    }
-    const onEditGroup = (group) => {
-      console.log(group)
-      state.groupForm = group
-      state.showGroupDialog = true
-    }
-    const onDelKey = (group, key) => {
-      ElMessageBox.confirm(`是否删除KEY：${key.key}`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        group.keyList.forEach((v, i) => {
-          if (v.key === key.key) {
-            group.keyList.splice(i, 1)
-          }
-        })
-        const obj = {
-          name: group.name,
-          second: group.second,
-          cql: group.cql,
-          keyList: JSON.stringify(group.keyList.map(v => {
-            return {key: v.key}
-          }))
-        }
-        const re = state.DB.transaction([state.ObjectStore], 'readwrite').objectStore(state.ObjectStore).put(obj, group.id)
-        re.onsuccess = e => {
-          ElMessage.success('更新成功！')
-        }
-        re.onerror = e => {
-          ElMessage.error('更新失败！')
-        }
-      })
-    }
-    onMounted(() => {
-    })
-    return {
-      ...toRefs(state),
-      ref_groupForm,
-      ref_keyForm,
-      onAddGroup,
-      onSaveGroup,
-      onAddKey,
-      onSaveKey,
-      onStartKey,
-      onStopKey,
-      initKeyMap,
-      onEditGroup,
-      onDelGroup,
-      onDelKey
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.main {
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  .main-head {
-
-  }
-  .main-content {
-    flex: 1;
-    overflow: auto;
-    .key-content {
-      width: 100%;
-      height: 140px;
-      display: flex;
-      .key-position {
-        width: 200px;
-        height: 100%;
-        :deep(.easy-map-ol) {
-          .easy-map_ol-default-mouse-position, .easy-map_ol-default-zoom, .easy-map_ol-default-scaleLine {
-            display: none;
-          }
-        }
-      }
-      .key-heart {
-        flex: 1;
-      }
-    }
-  }
-}
-</style>