drone/drone-web.git

parent: 5f35a489 | patch | commit | show whitespace

Merge remote-tracking branch 'origin/demo' into demo

xieb

2023-11-29 951aacd10e070d3c9867dbb19404bc470f2e3aad

Merge remote-tracking branch 'origin/demo' into demo

16 files modified

9 files added

	env/.env.dev	9 ●●●●● patch \| view \| raw \| blame \| history
	index.html	7 ●●●●● patch \| view \| raw \| blame \| history
	package.json	2 ●●●●● patch \| view \| raw \| blame \| history
	public/apiConfig.js	28 ●●●●● patch \| view \| raw \| blame \| history
	src/api/http/request.ts	4 ●●●●● patch \| view \| raw \| blame \| history
	src/api/wayline.ts	1 ●●●●● patch \| view \| raw \| blame \| history
	src/assets/icons/waylinetool/camera-off.png	patch \| view \| raw \| blame \| history
	src/assets/icons/waylinetool/camera-on.png	patch \| view \| raw \| blame \| history
	src/assets/icons/waylinetool/camera.png	patch \| view \| raw \| blame \| history
	src/assets/icons/waylinetool/create-file.png	patch \| view \| raw \| blame \| history
	src/assets/icons/waylinetool/fd.png	patch \| view \| raw \| blame \| history
	src/assets/icons/waylinetool/swerve.png	patch \| view \| raw \| blame \| history
	src/assets/icons/waylinetool/xt.png	patch \| view \| raw \| blame \| history
	src/components/GMap.vue	3 ●●●●● patch \| view \| raw \| blame \| history
	src/components/MediaPanel.vue	5 ●●●●● patch \| view \| raw \| blame \| history
	src/components/g-map/DroneControlPanel.vue	4 ●●●●● patch \| view \| raw \| blame \| history
	src/components/waylinetool/index.vue	132 ●●●●● patch \| view \| raw \| blame \| history
	src/hooks/use-cesium-tsa.ts	5 ●●●●● patch \| view \| raw \| blame \| history
	src/mqtt/config.ts	14 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/page-web/projects/routeLine.vue	36 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/page-web/projects/tsa.vue	12 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/page-web/projects/wayline.vue	442 ●●●●● patch \| view \| raw \| blame \| history
	src/store/index.ts	15 ●●●●● patch \| view \| raw \| blame \| history
	src/vite-env.d.ts	6 ●●●●● patch \| view \| raw \| blame \| history
	src/websocket/util/config.ts	4 ●●●●● patch \| view \| raw \| blame \| history

 env/.env.dev

@@ -1,4 +1,9 @@
VITE_API_URL = 'http://192.168.1.133:6789'
VITE_WS_API_URL = 'ws://192.168.1.133:6789/api/v1/ws'
# VITE_API_URL = 'http://192.168.1.133:6789'
# VITE_WS_API_URL = 'ws://192.168.1.133:6789/api/v1/ws'
# VITE_APP_ENVIRONMENT=DEV
# VITE_BASE_API = '/drone-api'

VITE_API_URL = 'http://171.34.76.171:8880/drone'
VITE_WS_API_URL = 'ws://171.34.76.171:8882/ws'
VITE_APP_ENVIRONMENT=DEV
VITE_BASE_API = '/drone-api'

 index.html

@@ -1,9 +1,9 @@
<!--
 * @Author: husq 931347610@qq.com
 * @Date: 2023-08-22 09:55:39
 * @LastEditors: husq 931347610@qq.com
 * @LastEditTime: 2023-09-18 10:47:02
 * @FilePath: \Cloud-API-Demo-Web\index.html
 * @LastEditors: GuLiMmo 2820890765@qq.com
 * @LastEditTime: 2023-11-27 13:55:34
 * @FilePath: /drone-web/index.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -16,6 +16,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>无人机操作系统</title>
    <script src="./jessibuca/jessibuca.js"></script>
    <script src="./apiConfig.js"></script>
  </head>
  <body>
    <div id="demo-app"></div>

 package.json

@@ -12,9 +12,9 @@
    "lint": "eslint --fix"
  },
  "dependencies": {
    "@turf/turf": "^6.5.0",
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@ant-design/icons-vue": "^6.0.1",
    "@turf/turf": "^6.5.0",
    "@vitejs/plugin-legacy": "^1.6.2",
    "agora-rtc-sdk-ng": "^4.12.1",
    "ant-design-vue": "^2.2.8",

 public/apiConfig.js

New file
@@ -0,0 +1,28 @@

/**
 * @description: 可修改api，如果为空则是默认api
 */
const baseUrl = {
  // 基础请求接口
  apiBaseUrl: '',
  // websocket请求接口
  wsBaseUrl: '',
  // MediaPanel请求接口
  mediaPanelPrefix: ''
}
/**
 * @description: 可修改mqtt配置，如果为空则是默认配置
 */
const mqttConfig = {
  clientId: '',
  username: '',
  password: '',
  host: '',
  protocol: '',
  port: ''
}

window.globalApiConfig = {
  baseUrl,
  mqttConfig
}

 src/api/http/request.ts

@@ -7,6 +7,8 @@
import { ELocalStorageKey, ERouterName, EUserType } from '/@/types/enums'
export * from './type'

const { baseUrl: { apiBaseUrl } } = window.globalApiConfig

const REQUEST_ID = 'X-Request-Id'
function getAuthToken () {
  return localStorage.getItem(ELocalStorageKey.Token)
@@ -16,7 +18,7 @@
  headers: {
    'Content-Type': 'application/json',
  },
  baseURL: import.meta.env.VITE_BASE_API,
  baseURL: apiBaseUrl || import.meta.env.VITE_BASE_API,
  // timeout: 12000,
})


 src/api/wayline.ts

@@ -226,4 +226,3 @@
  const result = await request.post(url,{dockPoint:dockPoint,jsonPath:jsonPath,radius:radius,payloadIndex:payloadIndex})
  return result.data
}


 src/assets/icons/waylinetool/camera-off.png


 src/assets/icons/waylinetool/camera-on.png


 src/assets/icons/waylinetool/camera.png


 src/assets/icons/waylinetool/create-file.png


 src/assets/icons/waylinetool/fd.png


 src/assets/icons/waylinetool/swerve.png


 src/assets/icons/waylinetool/xt.png


 src/components/GMap.vue

@@ -735,6 +735,7 @@
        :payloads="osdVisible.payloads">
      </DroneControlPanel>
    </div>
    <waylineTool />
  </div>
</template>

@@ -782,6 +783,7 @@
import Cesium from './cesiumMap/cesium.vue'
import { convertTimestampToDate } from '/@/utils/time'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import waylineTool from './waylinetool/index.vue'
export default defineComponent({
  components: {
    BorderOutlined,
@@ -807,6 +809,7 @@
    CarryOutOutlined,
    RocketOutlined,
    DesktopOutlined,
    waylineTool
  },
  name: 'GMap',
  props: {},

 src/components/MediaPanel.vue

@@ -118,12 +118,15 @@

type Key = ColumnProps['key'];

const { baseUrl: { mediaPanelPrefix } } = window.globalApiConfig

const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
const loading = ref(false)
const showVideo = ref(false)
const videoPlayerId = ref('videoPlayerId')
// 文件前缀
const prefix = 'https://dev.jxpskj.com:8026/cloud-bucket'
// const prefix = 'https://dev.jxpskj.com:8026/cloud-bucket'
const prefix = mediaPanelPrefix || 'https://dev.jxpskj.com:8026/cloud-bucket'
// 搜索栏配置项
const searchPanelOptions = reactive({
  size: 'large',

 src/components/g-map/DroneControlPanel.vue

@@ -525,14 +525,14 @@
  // })

  flyByArea(sn, dockPoint, jsonPath, radius, deviceSn, payloadIndex).then(res => {
    const targetPoint = res.data
    console.log('targetPoint====', targetPoint)
    const targetPoint = res.data || []
    // 机场位置
    const startPoint = {
      lon: props.deviceInfo.dock.basic_osd.longitude,
      lat: props.deviceInfo.dock.basic_osd.latitude
    }
    targetPoint.unshift(startPoint)
    console.log('targetPoint====', targetPoint)
    // 获取到点之后在图上绘点
    targetPoint.forEach((point: { lon: number; lat: number }, index: number) => {
      console.log(point)

 src/components/waylinetool/index.vue

New file
@@ -0,0 +1,132 @@
<template>
    <ul class="btn-list" v-if="waylineAbout.isShow">
        <li class="s-btn" v-for="(item, index) in btnList" :key="index">
          <div class="title">{{ item.title }}</div>
          <div class="btn" @click="item.event">
            <img :src="item.icon" alt="icon">
          </div>
        </li>
    </ul>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useMyStore } from '/@/store'

const store = useMyStore()

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}

// 点位按钮list
interface sBtn {
  icon: string,
  title: string,
  event: Function
}

const btnList = ref<sBtn[]>([
  {
    icon: getResource('waylinetool/camera-on.png'),
    title: '开始录像',
    event: () => {}
  },
  {
    icon: getResource('waylinetool/camera-off.png'),
    title: '停止录像',
    event: () => {}
  },
  {
    icon: '',
    title: '开始等时间隔拍照',
    event: () => {}
  },
  {
    icon: '',
    title: '开始等距间隔拍照',
    event: () => {}
  },
  {
    icon: '',
    title: '结束间隔拍照',
    event: () => {}
  },
  {
    icon: getResource('waylinetool/xt.png'),
    title: '悬停',
    event: () => {}
  },
  {
    icon: '',
    title: '飞行器偏航角',
    event: () => {}
  },
  {
    icon: '',
    title: '云台偏航角',
    event: () => {}
  },
  {
    icon: '',
    title: '云台俯仰角',
    event: () => {}
  },
  {
    icon: getResource('waylinetool/camera.png'),
    title: '拍照',
    event: () => {}
  },
  {
    icon: getResource('waylinetool/fd.png'),
    title: '相机变焦',
    event: () => {}
  },
  {
    icon: getResource('waylinetool/create-file.png'),
    title: '创建文件夹',
    event: () => {}
  }
])

const waylineAbout = computed(() => {
  console.log(store.state.waylineTool)
  return store.state.waylineTool
})

</script>
<style lang="scss" scoped>
.btn-list {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  .s-btn {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    &:last-child {
      margin: 0;
    }
    .title {
      width: 130px;
      text-align: right;
      margin-right: 10px;
      color: #fff;
      text-shadow: 2px 2px 2px #000;
      font-weight: bold;
    }
    .btn {
      width: 34px;
      height: 34px;
      background-color: #323131;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 20px;
      }
    }
  }
}
</style>

 src/hooks/use-cesium-tsa.ts

@@ -184,9 +184,8 @@
      }
    })
  }

  let leftClickHandler: Cesium.ScreenSpaceEventHandler
  // 添加点击事件
  let leftClickHandler: Cesium.ScreenSpaceEventHandler
  const addClickEvent = (sid: string, cb: Function) => {
    if (leftClickHandler) {
      removeClickEvent()
@@ -194,7 +193,7 @@
    leftClickHandler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas)
    leftClickHandler.setInputAction(function (click: { position: Cesium.Cartesian2 }) {
      const pick = viewer?.scene.pick(click.position)
      if (pick && pick.id._id === sid) {
      if (pick && (pick.id._id === sid || pick.id._id.includes(sid))) {
        cb(click, pick, viewer, handler)
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

 src/mqtt/config.ts

@@ -2,16 +2,18 @@
  IClientOptions,
} from 'mqtt'

const { mqttConfig: { clientId, username, password, host, protocol, port } } = window.globalApiConfig

export const OPTIONS: IClientOptions = {
  clean: true, // true: 清除会话, false: 保留会话
  connectTimeout: 10000, // mqtt 超时时间
  resubscribe: true, // 断开重连后，再次订阅原订阅
  reconnectPeriod: 10000, // 重连间隔时间： 5s
  keepalive: 5, // 心跳间隔时间：1s
  clientId: 'DroneWeb',
  username: 'root',
  password: 'root',
  host: '182.106.212.58',
  protocol: 'ws',
  port: 35675,
  clientId: clientId || 'DroneWeb',
  username: username || 'root',
  password: password || 'root',
  host: host || '182.106.212.58',
  protocol: protocol || 'ws',
  port: port || 35675,
}

 src/pages/page-web/projects/routeLine.vue

@@ -40,6 +40,9 @@

    <!-- 地图内弹窗 -->
    <div class="popup-box" ref="popup">
      <div class="popup-title">
        <span @click="closePopUp">×</span>
      </div>
      <div class="PopUp">
        <img :src="currentWayline.photo_url" alt="photo">
        <div>
@@ -150,7 +153,6 @@
  const billboardSetting = {
    ...pointOption,
    billboard: {
      id: 'start_point_img',
      image: 'https://dev.jxpskj.com:8026/cloud-bucket/5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_202311171122_004_5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_20231117112319_0001_W_%E8%88%AA%E7%82%B91.jpeg',
      width: 40,
      height: 40,
@@ -215,6 +217,12 @@
  // 飞向第一个坐标点
  flyTo(pointOption, 4, 1000)
}

const closePopUp = () => {
  const element: HTMLDivElement | any = document.querySelector('.popup-box') || popup.value
  element.style.display = 'none'
}

function onScroll (e: any) {
  const element = e.srcElement
  if (element.scrollTop + element.clientHeight >= element.scrollHeight - 5 && Math.ceil(pagination.total / pagination.page_size) > pagination.page && canRefresh.value) {
@@ -259,19 +267,34 @@
  top: 0;
  left: 0;
  display: none;
  background-color: #fff;
  padding-top: 0;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  .popup-title {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    span {
      text-align: right;
      cursor: pointer;
      font-weight: bolder;
      display: block;
      width: 25px
    }
  }

  .PopUp {
    width: 250px;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #f5f5f5;
    padding: 10px;
    padding-top: 0px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: calc(50% - 6px);
      left: -9px;
      left: -12px;
      width: 0px;
      height: 0px;
      border-style: solid;
@@ -290,5 +313,4 @@
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #c5c8cc transparent;
}
</style>
}</style>

 src/pages/page-web/projects/tsa.vue

@@ -275,7 +275,7 @@

<script lang="ts" setup>
import * as Cesium from 'cesium'
import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'
import { computed, onMounted, reactive, ref, watch, onUnmounted } from 'vue'
import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
import rc from '/@/assets/icons/rc.png'
import { OnlineDevice, EModeCode, OSDVisible, EDockModeCode, DeviceOsd, EDockModeText, EModeText } from '/@/types/device'
@@ -373,6 +373,10 @@
      }
      cesium.addPoint(setting)
      // 无人机路线轨迹
      // 判断是否存在done_route
      if (cesium.getEntityById('drone_route')) {
        cesium.removeById('drone_route')
      }
      const routeTrajectory = {
        longitude: 115.85666327144976,
        latitude: 28.62452712442823,
@@ -409,6 +413,7 @@
    const setting = {
      longitude: data.dockInfo[data.currentSn].basic_osd?.longitude,
      latitude: data.dockInfo[data.currentSn].basic_osd?.latitude,
      id: `drone_dock_${new Date().getTime()}`,
      billboard: {
        image: getResource('dock.png'),
        outlineWidth: 0,
@@ -416,7 +421,6 @@
        height: 36,
        scale: 1.0,
      },
      id: 'aerodrome'
    }
    cesium.addPoint(setting)
    // cesium.flyTo(setting)
@@ -460,6 +464,10 @@
  previousPositions.value = []
})

onUnmounted(() => {
  cesium.removeAllPoint()
})

function getOnlineTopo () {
  getDeviceTopo(workSpaceId.value).then((res) => {
    if (res.code !== 0) {

 src/pages/page-web/projects/wayline.vue

@@ -1,18 +1,13 @@
<template>
  <div class="project-wayline-wrapper height-100">
  <div class="project-wayline-wrapper height-100" ref="projectWayLine">
    <a-spin :spinning="loading" :delay="300" tip="加载中" size="large">
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
      <a-row>
        <a-col :span="1"></a-col>
        <a-col :span="15">航线库</a-col>
          <a-col :span="15">{{ isPointListOpen ? '航点列表' : '航线库' }}</a-col>
        <a-col :span="8" v-if="importVisible" class="flex-row flex-justify-end flex-align-center">
          <a-upload
            name="file"
            :multiple="false"
            :before-upload="beforeUpload"
            :show-upload-list="false"
            :customRequest="uploadFile"
          >
            <a-upload name="file" :multiple="false" :before-upload="beforeUpload" :show-upload-list="false"
              :customRequest="uploadFile">
            <a-button type="text" style="color: white;">
              <SelectOutlined />
            </a-button>
@@ -20,25 +15,36 @@
        </a-col>
      </a-row>
    </div>
    <div :style="{ height : height + 'px'}" class="scrollbar">
      <div :style="{ height: height + 'px' }" class="scrollbar" v-if="!isPointListOpen">
      <div id="data" class="height-100 uranus-scrollbar" v-if="waylinesData.data.length !== 0" @scroll="onScroll">
        <div v-for="wayline in waylinesData.data" :key="wayline.id">
          <div class="wayline-panel" style="padding-top: 5px;" @click="selectRoute(wayline)">
            <div class="title">
              <a-tooltip :title="wayline.name">
                <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ wayline.name }}</div>
                  <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                    {{ wayline.name }}</div>
              </a-tooltip>
              <div class="ml10"><UserOutlined /></div>
                <div class="ml10">
                  <UserOutlined />
                </div>
              <a-tooltip :title="wayline.user_name">
                <div class="ml5 pr10" style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ wayline.user_name }}</div>
                  <div class="ml5 pr10"
                    style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{
                      wayline.user_name }}</div>
              </a-tooltip>
              <div class="fz20">
                  <!-- <span style="margin-right: 10px;">
                  <EditOutlined style="font-size: 15px;" />
                </span> -->
                <a-dropdown>
                  <a style="color: white;">
                    <EllipsisOutlined />
                  </a>
                  <template #overlay>
                    <a-menu theme="dark" class="more" style="background: #3c3c3c;">
                        <a-menu-item @click="openEditModal(wayline)">
                          <span>重命名</span>
                        </a-menu-item>
                      <a-menu-item @click="downloadWayline(wayline.id, wayline.name)">
                        <span>下载</span>
                      </a-menu-item>
@@ -51,9 +57,14 @@
              </div>
            </div>
            <div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
              <span><RocketOutlined /></span>
              <span class="ml5">{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)] }}</span>
              <span class="ml10"><CameraFilled style="border-top: 1px solid; padding-top: -3px;" /></span>
                <span>
                  <RocketOutlined />
                </span>
                <span class="ml5">{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
                }}</span>
                <span class="ml10">
                  <CameraFilled style="border-top: 1px solid; padding-top: -3px;" />
                </span>
              <span class="ml5" v-for="payload in wayline.payload_model_keys" :key="payload.id">
                {{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(payload)] }}
              </span>
@@ -67,7 +78,8 @@
      <div v-else>
        <a-empty :image-style="{ height: '60px', marginTop: '60px' }" />
      </div>
      <a-modal v-model:visible="deleteTip" okText="确定" cancelText="取消" width="450px" :closable="false" :maskClosable="false" centered :okButtonProps="{ danger: true }" @ok="deleteWayline">
        <a-modal v-model:visible="deleteTip" okText="确定" cancelText="取消" width="450px" :closable="false"
          :maskClosable="false" centered :okButtonProps="{ danger: true }" @ok="deleteWayline">
          <p class="pt10 pl20" style="height: 50px;">确定要删除该文件吗？</p>
          <template #title>
              <div class="flex-row flex-justify-center">
@@ -75,7 +87,34 @@
              </div>
          </template>
      </a-modal>
        <!-- 编辑 -->
        <a-modal class="edit-modal-box" v-model:visible="editVisible" title="编辑航线名称" :get-container="() => projectWayLine"
          :cancel-button-props="{ ghost: true }" @ok="handleEditName">
          <div class="wayline-title">航线名称</div>
          <a-input v-model:value="currentWayLine.name" placeholder="请输入航线名称" />
        </a-modal>
    </div>
      <ul class="targt-point scrollbar" :style="{ height: height + 'px' }" v-else>
        <div class="back-btn" @click="isPointListOpen = !isPointListOpen">
          <ArrowLeftOutlined />
          <span>返回上一页</span>
        </div>
        <li
          v-for="(item, index) in tragetPointArr"
          :key="index"
          :class="{ selectedColor : index === selectedPoint }"
          @click="tragetPointClick(item.position, index)">
          <div class="graph">
            <div class="left" :style="{borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0'}"></div>
            <div class="right">{{ index + 1 }}</div>
          </div>
          <div class="graph-right">
            <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
              <img :src="event.icon" alt="icon" />
            </div>
          </div>
        </li>
      </ul>
    </a-spin>
  </div>
</template>
@@ -86,7 +125,7 @@
import { onMounted, onUpdated, ref } from 'vue'
import { deleteWaylineFile, downloadWaylineFile, getWaylineFiles, importKmzFile, getWayLineFile } from '/@/api/wayline'
import { ELocalStorageKey, ERouterName } from '/@/types'
import { EllipsisOutlined, RocketOutlined, CameraFilled, UserOutlined, SelectOutlined } from '@ant-design/icons-vue'
import { ArrowLeftOutlined, EllipsisOutlined, RocketOutlined, CameraFilled, UserOutlined, SelectOutlined, EditOutlined } from '@ant-design/icons-vue'
import { EDeviceType } from '/@/types/device'
import { useMyStore } from '/@/store'
import { WaylineFile } from '/@/types/wayline'
@@ -97,12 +136,22 @@
import { getRoot } from '/@/root'
import * as Cesium from 'cesium'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import axios from 'axios'
import JSZIP from 'jszip'
// 初始化jszip
const JsZip = new JSZIP()

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}

const projectWayLine = ref<HTMLDivElement>()

const loading = ref(false)
const { appContext } = getCurrentInstance()
const { appContext }: any = getCurrentInstance()
const global = appContext.config.globalProperties
const store = useMyStore()
let kmlDataSource = null
let kmlDataSource: { entities: { values: { _children: any }[] }; show: boolean } | null | any = null
const pagination :IPage = {
  page: 1,
  total: -1,
@@ -112,6 +161,8 @@
const waylinesData = reactive({
  data: [] as WaylineFile[]
})
// 当前点击的信息
const currentWayLine = ref<any>({})

const root = getRoot()
const workspaceId = computed(() => store.state.common.projectId || localStorage.getItem(ELocalStorageKey.WorkspaceId))
@@ -119,8 +170,74 @@
const deleteWaylineId = ref<string>('')
const canRefresh = ref(true)
const importVisible = ref<boolean>(root.$router.currentRoute.value.name === ERouterName.WAYLINE)
const editVisible = ref<boolean>(false)
const height = ref()
const { removeById, } = cesiumOperation()
const { removeById, addClickEvent, getEntityById } = cesiumOperation()

const isPointListOpen = ref<boolean>(false)
const tragetPointArr = ref<{
  position: Cesium.Cartesian3,
  eventList: string[]
}[]>([])
const selectedPoint = ref<number | null>(null)

// 对应事件
const eventList: any = reactive<{
  key: string,
  name: string,
  icon?: string
}[]>([
  {
    key: 'takePhoto',
    name: '单拍',
    icon: getResource('waylinetool/camera.png'),
  },
  {
    key: 'startRecord',
    name: '开始录像',
    icon: getResource('waylinetool/camera-on.png'),
  },
  {
    key: 'stopRecord',
    name: '结束录像',
    icon: getResource('waylinetool/camera-off.png'),
  },
  {
    key: 'focus',
    name: '对焦'
  },
  {
    key: 'zoom',
    name: '变焦',
    icon: getResource('waylinetool/fd.png'),
  },
  {
    key: 'customDirName',
    name: '创建新文件夹',
    icon: getResource('waylinetool/create-file.png'),
  },
  {
    key: 'gimbalRotate',
    name: '旋转云台'
  },
  {
    key: 'rotateYaw',
    name: '飞行器偏航'
  },
  {
    key: 'hover',
    name: '悬停等待',
    icon: getResource('waylinetool/xt.png'),
  },
  {
    key: 'gimbalEvenlyRotate',
    name: '航段间均匀转动云台pitch角'
  },
  {
    key: 'orientedShoot',
    name: '精准复拍动作'
  }
])

onMounted(() => {
  const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
@@ -143,6 +260,11 @@
    global.$viewer.dataSources.remove(kmlDataSource)
  }
  removeById('kmzLine')
  removeById('clickBox')
  store.commit('SET_WAYLINE_INFO', {
    isShow: false,
    wayline: {}
  })
})

function getWaylines () {
@@ -203,9 +325,17 @@
  getWayLineFile(workspaceId.value, wayline.id).then(res => {
    store.commit('SET_SELECT_WAYLINE_INFO', wayline)
    initKmlFile(res.data)
    store.commit('SET_WAYLINE_KMZPATH', res.data)
  }).finally(() => {
    loading.value = false
  })
  // 清除选中点柱形和隐藏按钮
  store.commit('SET_WAYLINE_INFO', {
    isShow: false,
    wayline: {}
  })
  removeById('clickBox')
  isPointListOpen.value = !isPointListOpen.value
}
/**
 * 加载kml文件
@@ -230,24 +360,35 @@
    kmlEntity.value = kmlDataSource.entities.values
    kmlDataSource.show = true
    const kmlEntityArr = kmlDataSource.entities.values[0]._children
    const cartesianArr = []
    const cartesianArr: any[] = []
    for (let i = 0; i < kmlEntityArr.length; i++) {
      const entity = kmlEntityArr[i]
      entity.point = new Cesium.PointGraphics({
        pixelSize: 12,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
      const billboard = createBillboard(`${i + 1}`, '#2D8CF0')
      entity._id = 'tragetPoint' + i
      entity.billboard = new Cesium.BillboardGraphics({
        image: billboard,
        pixelOffset: new Cesium.Cartesian2(0, -20)
      })
      entity.billboard = null
      entity.point = new Cesium.PointGraphics({
        pixelSize: 20,
        color: Cesium.Color.GHOSTWHITE,
        outlineColor: Cesium.Color.BLACK,
      })
      cartesianArr.push(entity.position._value)
      tragetPointArr.value[i] = {
        position: entity.position._value,
        eventList: []
    }
    }
    // tragetPointArr.value = cartesianArr
    // const stripe = createStripe()
    const lineEntity = global.$viewer.entities.add({
      name: 'entityLine',
      id: 'kmzLine',
      polyline: {
        positions: cartesianArr,
        width: 10,
        material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN),
        width: 20,
        material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.MEDIUMSPRINGGREEN),
        clampToGround: false, // 关闭贴地效果，保留高度
      },
    })
@@ -255,8 +396,46 @@
    global.$viewer.flyTo(lineEntity, {
      offset: new Cesium.HeadingPitchRange(0, -90, 8000)
    })

    // 解析kmz文件
    readKmzFile(file)
  })
}

// 点击目标点
function tragetPointClick (position: Cesium.Cartesian3, index: number) {
  selectedPoint.value = index
  store.commit('SET_WAYLINE_INFO', {
    isShow: true,
    wayline: currentWayLine
  })
  if (getEntityById('clickBox')) {
    removeById('clickBox')
  }
  kmlDataSource.entities._entities._array.forEach((entity: { _id: string; billboard: Cesium.BillboardGraphics }, i: number) => {
    entity.billboard = new Cesium.BillboardGraphics({
      image: createBillboard(`${i}`, entity._id === `tragetPoint${index}` ? '#FF9900' : '#2D8CF0'),
      pixelOffset: new Cesium.Cartesian2(0, -20)
    })
  })
  // 创建盒子
  const entity = {
    id: 'clickBox',
    position,
    box: {
      dimensions: new Cesium.Cartesian3(10.0, 10.0, 120),
      material: Cesium.Color.MEDIUMSPRINGGREEN.withAlpha(0.1),
      // outline: true,
      // outlineColor: Cesium.Color.MEDIUMSPRINGGREEN.withAlpha(0.8),
      heightReference: true
    }
  }
  const boxEntity = global.$viewer.entities.add(entity)
  global.$viewer.flyTo(boxEntity, {
    duration: 3,
  })
}

function onScroll (e: any) {
  const element = e.srcElement
  if (element.scrollTop + element.clientHeight >= element.scrollHeight - 5 && Math.ceil(pagination.total / pagination.page_size) > pagination.page && canRefresh.value) {
@@ -264,6 +443,7 @@
    getWaylines()
  }
}

interface FileItem {
  uid: string;
  name?: string;
@@ -303,6 +483,102 @@
  })
}

// 创建广告牌
const createBillboard = (title: string, color: string) => {
  // 创建canvas绘制广告牌
  const billboard = document.createElement('canvas')
  billboard.width = 30
  billboard.height = 30
  const ctx: HTMLCanvasElement | any = billboard.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(0, 0)
  ctx.lineTo(30, 0)
  ctx.lineTo(15, 22)
  ctx.fillStyle = color
  ctx.fill()
  ctx.font = '18px serif'
  ctx.fillStyle = '#ffffff'
  ctx.fillText(title, 10, 15)
  ctx.closePath()
  return billboard
}

// 创建条纹
const createStripe = () => {
  // 创建canvas绘制广告牌
  const stripe = document.createElement('canvas')
  stripe.width = 40
  stripe.height = 40
  const ctx: HTMLCanvasElement | any = stripe.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(0, 20)
  ctx.lineTo(0, 40)
  ctx.lineTo(20, 20)
  ctx.lineTo(20, 0)
  ctx.fillStyle = '#fff'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(20, 0)
  ctx.lineTo(20, 20)
  ctx.lineTo(40, 40)
  ctx.lineTo(40, 20)
  ctx.fillStyle = '#fff'
  ctx.fill()
  ctx.closePath()
  return stripe
}

/**
 * @description: 获取kmz文件中的内容
 * @param {*} kmzPath kmz文件地址
 * @return {*} void
 */
const readKmzFile = (kmzPath: string) => {
  // 使用axios读取文件
  return axios.get(kmzPath, { responseType: 'arraybuffer' })
    .then(fileRes => fileRes.data)
    .then(kmzData => JsZip.loadAsync(kmzData)) // 解压kmz文件
    .then(kmzZip => {
      // 通过文件名找到 KML 文件
      const kmlFile = kmzZip.file(/\.kml$/i)[0]
      return kmlFile.async('text')
    }).then(kml => {
      // 查找航点标签reg
      const regx = /<Placemark>([\s\S]*?)<\/Placemark>/g
      // 查找事件组reg
      const actionGroupReg = /<wpml:actionGroup>([\s\S]*?)<\/wpml:actionGroup>/g
      // 查找单个事件reg
      const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
      // 当前kmz文件航点
      const kmlPoints = kml.match(regx)
      kmlPoints?.forEach((point: string, index: number) => {
        // 当前点的事件组
        const ponitAction = point.match(actionGroupReg)
        const eventArr: string[] = []
        if (ponitAction) {
          // 当前事件
          const actions = ponitAction[0].match(actionRegx)
          actions?.forEach(action => {
            eventList.forEach((item: any) => {
              action.includes(item.key) && eventArr.push(item)
            })
          })
          tragetPointArr.value[index].eventList = eventArr
        }
      })
    })
}

const openEditModal = (wayline: any) => {
  currentWayLine.value = wayline
  editVisible.value = true
}

const handleEditName = () => {
  editVisible.value = false
}

</script>

<style lang="scss" scoped>
@@ -316,6 +592,7 @@
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;

  .title {
    display: flex;
    flex-direction: row;
@@ -325,9 +602,116 @@
    margin: 0px 10px 0 10px;
  }
}

.uranus-scrollbar {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #c5c8cc transparent;
}

.project-wayline-wrapper {
  .targt-point {
    padding: 0;
    margin: 0;
    list-style-type: none;
    .back-btn {
      cursor: pointer;
      padding: 10px;
      border-bottom: 1px solid #4f4f4f;
      span {
        margin-left: 10px;
      }
      &:hover {
        color: #2d8cf0;
      }
    }
    li {
      cursor: pointer;
      padding: 10px 0;
      margin: 0 7px;
      display: flex;
      .graph {
        width: 40px;
        display: flex;
        align-items: center;
        .left {
          width: 0;
          height: 0;
          border-top: 15px solid #2D8CF0;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
        }
        .right {
          margin-left: 3px;
        }
      }
      .graph-right {
        width: calc(100% - 40px);
        height: 30px;
        border-bottom: 1px solid #4f4f4f;
        display: flex;
        align-items: center;
        .s-event-icon {
          width: 25px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 70%;
          }
        }
      }
      &:hover {
        background-color: #3C3C3C;
      }
    }
  }

  :deep(.ant-modal) {
    .ant-modal-close {
      height: 40px;
      width: 40px;

      .ant-modal-close-x {
        width: 100%;
        height: 100%;
        line-height: 40px;
        color: #fff;
      }
    }

    .ant-modal-header {
      text-align: center;
      padding: 10px;
      border: 0;
      background-color: #282828;

      .ant-modal-title {
        color: #fff;
        font-size: 15px;
      }
    }

    .ant-modal-body,
    .ant-modal-footer {
      background-color: #1C1C1C;
      border: 0;

      .wayline-title {
        color: #c5c8cc;
        margin-bottom: 10px;
      }

      .ant-input {
        background-color: transparent;
        color: #fff;
      }
    }
  }
}

.selectedColor {
  background-color: #3C3C3C;
}
</style>

 src/store/index.ts

@@ -96,7 +96,12 @@
  devicesCmdExecuteInfo: {
  } as DevicesCmdExecuteInfo,
  mqttState: null as any, // mqtt 实例
  clientId: '', // mqtt 连接 唯一客户端id
  clientId: '', // mqtt 连接 唯一客户端id,
  waylineTool: {
    isShow: false as boolean,
    wayline: {} as any,
    kmzPath: '' as string
  }
})

export type RootStateType = ReturnType<typeof initStateFunc>
@@ -204,6 +209,14 @@
  SET_CLIENT_ID (state, clientId) {
    state.clientId = clientId
  },
  // 设置wayline中的信息
  SET_WAYLINE_INFO (state, { isShow, wayline }) {
    state.waylineTool.isShow = isShow
    state.waylineTool.wayline = wayline
  },
  SET_WAYLINE_KMZPATH (state, kmzPath) {
    state.waylineTool.kmzPath = kmzPath
  }
}

const actions: ActionTree<RootStateType, RootStateType> = {

 src/vite-env.d.ts

@@ -1 +1,7 @@
/// <reference types="vite/client" />
export {}
declare global {
    interface Window {
        globalApiConfig: any
    }
}

 src/websocket/util/config.ts

@@ -1,11 +1,13 @@
import { ELocalStorageKey } from '/@/types/enums'
import { CURRENT_CONFIG } from '/@/api/http/config'

const { baseUrl: { wsBaseUrl } } = window.globalApiConfig

const user = localStorage.getItem('user_info')
export function getWebsocketUrl () {
  const token: string = localStorage.getItem(ELocalStorageKey.Token) || '' as string
  // const url = CURRENT_CONFIG.websocketURL
  const url = import.meta.env.VITE_WS_API_URL + '?x-auth-token=' + encodeURI(token)
  const url = (wsBaseUrl || import.meta.env.VITE_WS_API_URL) + '?x-auth-token=' + encodeURI(token)
  return url
}

			@@ -1,4 +1,9 @@
			VITE_API_URL = 'http://192.168.1.133:6789'
			VITE_WS_API_URL = 'ws://192.168.1.133:6789/api/v1/ws'
			# VITE_API_URL = 'http://192.168.1.133:6789'
			# VITE_WS_API_URL = 'ws://192.168.1.133:6789/api/v1/ws'
			# VITE_APP_ENVIRONMENT=DEV
			# VITE_BASE_API = '/drone-api'

			VITE_API_URL = 'http://171.34.76.171:8880/drone'
			VITE_WS_API_URL = 'ws://171.34.76.171:8882/ws'
			VITE_APP_ENVIRONMENT=DEV
			VITE_BASE_API = '/drone-api'

			@@ -1,9 +1,9 @@
			<!--
			* @Author: husq 931347610@qq.com
			* @Date: 2023-08-22 09:55:39
			* @LastEditors: husq 931347610@qq.com
			* @LastEditTime: 2023-09-18 10:47:02
			* @FilePath: \Cloud-API-Demo-Web\index.html
			* @LastEditors: GuLiMmo 2820890765@qq.com
			* @LastEditTime: 2023-11-27 13:55:34
			* @FilePath: /drone-web/index.html
			* @Description:
			*
			* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
			@@ -16,6 +16,7 @@
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>无人机操作系统</title>
			<script src="./jessibuca/jessibuca.js"></script>
			<script src="./apiConfig.js"></script>
			</head>
			<body>
			<div id="demo-app"></div>

			@@ -12,9 +12,9 @@
			"lint": "eslint --fix"
			},
			"dependencies": {
			"@turf/turf": "^6.5.0",
			"@amap/amap-jsapi-loader": "^1.0.1",
			"@ant-design/icons-vue": "^6.0.1",
			"@turf/turf": "^6.5.0",
			"@vitejs/plugin-legacy": "^1.6.2",
			"agora-rtc-sdk-ng": "^4.12.1",
			"ant-design-vue": "^2.2.8",

New file
			@@ -0,0 +1,28 @@

			/**
			* @description: 可修改api，如果为空则是默认api
			*/
			const baseUrl = {
			// 基础请求接口
			apiBaseUrl: '',
			// websocket请求接口
			wsBaseUrl: '',
			// MediaPanel请求接口
			mediaPanelPrefix: ''
			}
			/**
			* @description: 可修改mqtt配置，如果为空则是默认配置
			*/
			const mqttConfig = {
			clientId: '',
			username: '',
			password: '',
			host: '',
			protocol: '',
			port: ''
			}

			window.globalApiConfig = {
			baseUrl,
			mqttConfig
			}

			@@ -7,6 +7,8 @@
			import { ELocalStorageKey, ERouterName, EUserType } from '/@/types/enums'
			export * from './type'

			const { baseUrl: { apiBaseUrl } } = window.globalApiConfig

			const REQUEST_ID = 'X-Request-Id'
			function getAuthToken () {
			return localStorage.getItem(ELocalStorageKey.Token)
			@@ -16,7 +18,7 @@
			headers: {
			'Content-Type': 'application/json',
			},
			baseURL: import.meta.env.VITE_BASE_API,
			baseURL: apiBaseUrl \|\| import.meta.env.VITE_BASE_API,
			// timeout: 12000,
			})

			@@ -226,4 +226,3 @@
			const result = await request.post(url,{dockPoint:dockPoint,jsonPath:jsonPath,radius:radius,payloadIndex:payloadIndex})
			return result.data
			}

			@@ -735,6 +735,7 @@
			:payloads="osdVisible.payloads">
			</DroneControlPanel>
			</div>
			<waylineTool />
			</div>
			</template>

			@@ -782,6 +783,7 @@
			import Cesium from './cesiumMap/cesium.vue'
			import { convertTimestampToDate } from '/@/utils/time'
			import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
			import waylineTool from './waylinetool/index.vue'
			export default defineComponent({
			components: {
			BorderOutlined,
			@@ -807,6 +809,7 @@
			CarryOutOutlined,
			RocketOutlined,
			DesktopOutlined,
			waylineTool
			},
			name: 'GMap',
			props: {},

			@@ -118,12 +118,15 @@

			type Key = ColumnProps['key'];

			const { baseUrl: { mediaPanelPrefix } } = window.globalApiConfig

			const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
			const loading = ref(false)
			const showVideo = ref(false)
			const videoPlayerId = ref('videoPlayerId')
			// 文件前缀
			const prefix = 'https://dev.jxpskj.com:8026/cloud-bucket'
			// const prefix = 'https://dev.jxpskj.com:8026/cloud-bucket'
			const prefix = mediaPanelPrefix \|\| 'https://dev.jxpskj.com:8026/cloud-bucket'
			// 搜索栏配置项
			const searchPanelOptions = reactive({
			size: 'large',

			@@ -525,14 +525,14 @@
			// })

			flyByArea(sn, dockPoint, jsonPath, radius, deviceSn, payloadIndex).then(res => {
			const targetPoint = res.data
			console.log('targetPoint====', targetPoint)
			const targetPoint = res.data \|\| []
			// 机场位置
			const startPoint = {
			lon: props.deviceInfo.dock.basic_osd.longitude,
			lat: props.deviceInfo.dock.basic_osd.latitude
			}
			targetPoint.unshift(startPoint)
			console.log('targetPoint====', targetPoint)
			// 获取到点之后在图上绘点
			targetPoint.forEach((point: { lon: number; lat: number }, index: number) => {
			console.log(point)

New file
			@@ -0,0 +1,132 @@
			<template>
			<ul class="btn-list" v-if="waylineAbout.isShow">
			<li class="s-btn" v-for="(item, index) in btnList" :key="index">
			<div class="title">{{ item.title }}</div>
			<div class="btn" @click="item.event">
			<img :src="item.icon" alt="icon">
			</div>
			</li>
			</ul>
			</template>
			<script lang="ts" setup>
			import { ref, computed } from 'vue'
			import { useMyStore } from '/@/store'

			const store = useMyStore()

			const getResource = (name: string) => {
			return new URL(`/src/assets/icons/${name}`, import.meta.url).href
			}

			// 点位按钮list
			interface sBtn {
			icon: string,
			title: string,
			event: Function
			}

			const btnList = ref<sBtn[]>([
			{
			icon: getResource('waylinetool/camera-on.png'),
			title: '开始录像',
			event: () => {}
			},
			{
			icon: getResource('waylinetool/camera-off.png'),
			title: '停止录像',
			event: () => {}
			},
			{
			icon: '',
			title: '开始等时间隔拍照',
			event: () => {}
			},
			{
			icon: '',
			title: '开始等距间隔拍照',
			event: () => {}
			},
			{
			icon: '',
			title: '结束间隔拍照',
			event: () => {}
			},
			{
			icon: getResource('waylinetool/xt.png'),
			title: '悬停',
			event: () => {}
			},
			{
			icon: '',
			title: '飞行器偏航角',
			event: () => {}
			},
			{
			icon: '',
			title: '云台偏航角',
			event: () => {}
			},
			{
			icon: '',
			title: '云台俯仰角',
			event: () => {}
			},
			{
			icon: getResource('waylinetool/camera.png'),
			title: '拍照',
			event: () => {}
			},
			{
			icon: getResource('waylinetool/fd.png'),
			title: '相机变焦',
			event: () => {}
			},
			{
			icon: getResource('waylinetool/create-file.png'),
			title: '创建文件夹',
			event: () => {}
			}
			])

			const waylineAbout = computed(() => {
			console.log(store.state.waylineTool)
			return store.state.waylineTool
			})

			</script>
			<style lang="scss" scoped>
			.btn-list {
			position: absolute;
			right: 75px;
			top: 50%;
			transform: translateY(-50%);
			.s-btn {
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			&:last-child {
			margin: 0;
			}
			.title {
			width: 130px;
			text-align: right;
			margin-right: 10px;
			color: #fff;
			text-shadow: 2px 2px 2px #000;
			font-weight: bold;
			}
			.btn {
			width: 34px;
			height: 34px;
			background-color: #323131;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			img {
			width: 20px;
			}
			}
			}
			}
			</style>

			@@ -184,9 +184,8 @@
			}
			})
			}

			let leftClickHandler: Cesium.ScreenSpaceEventHandler
			// 添加点击事件
			let leftClickHandler: Cesium.ScreenSpaceEventHandler
			const addClickEvent = (sid: string, cb: Function) => {
			if (leftClickHandler) {
			removeClickEvent()
			@@ -194,7 +193,7 @@
			leftClickHandler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas)
			leftClickHandler.setInputAction(function (click: { position: Cesium.Cartesian2 }) {
			const pick = viewer?.scene.pick(click.position)
			if (pick && pick.id._id === sid) {
			if (pick && (pick.id._id === sid \|\| pick.id._id.includes(sid))) {
			cb(click, pick, viewer, handler)
			}
			}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

			@@ -2,16 +2,18 @@
			IClientOptions,
			} from 'mqtt'

			const { mqttConfig: { clientId, username, password, host, protocol, port } } = window.globalApiConfig

			export const OPTIONS: IClientOptions = {
			clean: true, // true: 清除会话, false: 保留会话
			connectTimeout: 10000, // mqtt 超时时间
			resubscribe: true, // 断开重连后，再次订阅原订阅
			reconnectPeriod: 10000, // 重连间隔时间： 5s
			keepalive: 5, // 心跳间隔时间：1s
			clientId: 'DroneWeb',
			username: 'root',
			password: 'root',
			host: '182.106.212.58',
			protocol: 'ws',
			port: 35675,
			clientId: clientId \|\| 'DroneWeb',
			username: username \|\| 'root',
			password: password \|\| 'root',
			host: host \|\| '182.106.212.58',
			protocol: protocol \|\| 'ws',
			port: port \|\| 35675,
			}

			@@ -40,6 +40,9 @@

			<!-- 地图内弹窗 -->
			<div class="popup-box" ref="popup">
			<div class="popup-title">
			<span @click="closePopUp">×</span>
			</div>
			<div class="PopUp">
			<img :src="currentWayline.photo_url" alt="photo">
			<div>
			@@ -150,7 +153,6 @@
			const billboardSetting = {
			...pointOption,
			billboard: {
			id: 'start_point_img',
			image: 'https://dev.jxpskj.com:8026/cloud-bucket/5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_202311171122_004_5abb3b6e-cb42-40e4-b086-9c24db0e8765/DJI_20231117112319_0001_W_%E8%88%AA%E7%82%B91.jpeg',
			width: 40,
			height: 40,
			@@ -215,6 +217,12 @@
			// 飞向第一个坐标点
			flyTo(pointOption, 4, 1000)
			}

			const closePopUp = () => {
			const element: HTMLDivElement \| any = document.querySelector('.popup-box') \|\| popup.value
			element.style.display = 'none'
			}

			function onScroll (e: any) {
			const element = e.srcElement
			if (element.scrollTop + element.clientHeight >= element.scrollHeight - 5 && Math.ceil(pagination.total / pagination.page_size) > pagination.page && canRefresh.value) {
			@@ -259,19 +267,34 @@
			top: 0;
			left: 0;
			display: none;
			background-color: #fff;
			padding-top: 0;
			border-radius: 5px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			.popup-title {
			display: flex;
			justify-content: flex-end;
			padding: 0 10px;
			span {
			text-align: right;
			cursor: pointer;
			font-weight: bolder;
			display: block;
			width: 25px
			}
			}

			.PopUp {
			width: 250px;
			background-color: #fff;
			padding: 5px;
			border: 1px solid #f5f5f5;
			padding: 10px;
			padding-top: 0px;
			position: relative;

			&::after {
			content: '';
			position: absolute;
			top: calc(50% - 6px);
			left: -9px;
			left: -12px;
			width: 0px;
			height: 0px;
			border-style: solid;
			@@ -290,5 +313,4 @@
			overflow: auto;
			scrollbar-width: thin;
			scrollbar-color: #c5c8cc transparent;
			}
			</style>
			}</style>

			@@ -275,7 +275,7 @@

			<script lang="ts" setup>
			import * as Cesium from 'cesium'
			import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'
			import { computed, onMounted, reactive, ref, watch, onUnmounted } from 'vue'
			import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
			import rc from '/@/assets/icons/rc.png'
			import { OnlineDevice, EModeCode, OSDVisible, EDockModeCode, DeviceOsd, EDockModeText, EModeText } from '/@/types/device'
			@@ -373,6 +373,10 @@
			}
			cesium.addPoint(setting)
			// 无人机路线轨迹
			// 判断是否存在done_route
			if (cesium.getEntityById('drone_route')) {
			cesium.removeById('drone_route')
			}
			const routeTrajectory = {
			longitude: 115.85666327144976,
			latitude: 28.62452712442823,
			@@ -409,6 +413,7 @@
			const setting = {
			longitude: data.dockInfo[data.currentSn].basic_osd?.longitude,
			latitude: data.dockInfo[data.currentSn].basic_osd?.latitude,
			id: `drone_dock_${new Date().getTime()}`,
			billboard: {
			image: getResource('dock.png'),
			outlineWidth: 0,
			@@ -416,7 +421,6 @@
			height: 36,
			scale: 1.0,
			},
			id: 'aerodrome'
			}
			cesium.addPoint(setting)
			// cesium.flyTo(setting)
			@@ -460,6 +464,10 @@
			previousPositions.value = []
			})

			onUnmounted(() => {
			cesium.removeAllPoint()
			})

			function getOnlineTopo () {
			getDeviceTopo(workSpaceId.value).then((res) => {
			if (res.code !== 0) {

			@@ -1,18 +1,13 @@
			<template>
			<div class="project-wayline-wrapper height-100">
			<div class="project-wayline-wrapper height-100" ref="projectWayLine">
			<a-spin :spinning="loading" :delay="300" tip="加载中" size="large">
			<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
			<a-row>
			<a-col :span="1"></a-col>
			<a-col :span="15">航线库</a-col>
			<a-col :span="15">{{ isPointListOpen ? '航点列表' : '航线库' }}</a-col>
			<a-col :span="8" v-if="importVisible" class="flex-row flex-justify-end flex-align-center">
			<a-upload
			name="file"
			:multiple="false"
			:before-upload="beforeUpload"
			:show-upload-list="false"
			:customRequest="uploadFile"
			>
			<a-upload name="file" :multiple="false" :before-upload="beforeUpload" :show-upload-list="false"
			:customRequest="uploadFile">
			<a-button type="text" style="color: white;">
			<SelectOutlined />
			</a-button>
			@@ -20,25 +15,36 @@
			</a-col>
			</a-row>
			</div>
			<div :style="{ height : height + 'px'}" class="scrollbar">
			<div :style="{ height: height + 'px' }" class="scrollbar" v-if="!isPointListOpen">
			<div id="data" class="height-100 uranus-scrollbar" v-if="waylinesData.data.length !== 0" @scroll="onScroll">
			<div v-for="wayline in waylinesData.data" :key="wayline.id">
			<div class="wayline-panel" style="padding-top: 5px;" @click="selectRoute(wayline)">
			<div class="title">
			<a-tooltip :title="wayline.name">
			<div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ wayline.name }}</div>
			<div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
			{{ wayline.name }}</div>
			</a-tooltip>
			<div class="ml10"><UserOutlined /></div>
			<div class="ml10">
			<UserOutlined />
			</div>
			<a-tooltip :title="wayline.user_name">
			<div class="ml5 pr10" style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ wayline.user_name }}</div>
			<div class="ml5 pr10"
			style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{
			wayline.user_name }}</div>
			</a-tooltip>
			<div class="fz20">
			<!-- <span style="margin-right: 10px;">
			<EditOutlined style="font-size: 15px;" />
			</span> -->
			<a-dropdown>
			<a style="color: white;">
			<EllipsisOutlined />
			</a>
			<template #overlay>
			<a-menu theme="dark" class="more" style="background: #3c3c3c;">
			<a-menu-item @click="openEditModal(wayline)">
			<span>重命名</span>
			</a-menu-item>
			<a-menu-item @click="downloadWayline(wayline.id, wayline.name)">
			<span>下载</span>
			</a-menu-item>
			@@ -51,9 +57,14 @@
			</div>
			</div>
			<div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
			<span><RocketOutlined /></span>
			<span class="ml5">{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)] }}</span>
			<span class="ml10"><CameraFilled style="border-top: 1px solid; padding-top: -3px;" /></span>
			<span>
			<RocketOutlined />
			</span>
			<span class="ml5">{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
			}}</span>
			<span class="ml10">
			<CameraFilled style="border-top: 1px solid; padding-top: -3px;" />
			</span>
			<span class="ml5" v-for="payload in wayline.payload_model_keys" :key="payload.id">
			{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(payload)] }}
			</span>
			@@ -67,7 +78,8 @@
			<div v-else>
			<a-empty :image-style="{ height: '60px', marginTop: '60px' }" />
			</div>
			<a-modal v-model:visible="deleteTip" okText="确定" cancelText="取消" width="450px" :closable="false" :maskClosable="false" centered :okButtonProps="{ danger: true }" @ok="deleteWayline">
			<a-modal v-model:visible="deleteTip" okText="确定" cancelText="取消" width="450px" :closable="false"
			:maskClosable="false" centered :okButtonProps="{ danger: true }" @ok="deleteWayline">
			<p class="pt10 pl20" style="height: 50px;">确定要删除该文件吗？</p>
			<template #title>
			<div class="flex-row flex-justify-center">
			@@ -75,7 +87,34 @@
			</div>
			</template>
			</a-modal>
			<!-- 编辑 -->
			<a-modal class="edit-modal-box" v-model:visible="editVisible" title="编辑航线名称" :get-container="() => projectWayLine"
			:cancel-button-props="{ ghost: true }" @ok="handleEditName">
			<div class="wayline-title">航线名称</div>
			<a-input v-model:value="currentWayLine.name" placeholder="请输入航线名称" />
			</a-modal>
			</div>
			<ul class="targt-point scrollbar" :style="{ height: height + 'px' }" v-else>
			<div class="back-btn" @click="isPointListOpen = !isPointListOpen">
			<ArrowLeftOutlined />
			<span>返回上一页</span>
			</div>
			<li
			v-for="(item, index) in tragetPointArr"
			:key="index"
			:class="{ selectedColor : index === selectedPoint }"
			@click="tragetPointClick(item.position, index)">
			<div class="graph">
			<div class="left" :style="{borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0'}"></div>
			<div class="right">{{ index + 1 }}</div>
			</div>
			<div class="graph-right">
			<div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
			<img :src="event.icon" alt="icon" />
			</div>
			</div>
			</li>
			</ul>
			</a-spin>
			</div>
			</template>
			@@ -86,7 +125,7 @@
			import { onMounted, onUpdated, ref } from 'vue'
			import { deleteWaylineFile, downloadWaylineFile, getWaylineFiles, importKmzFile, getWayLineFile } from '/@/api/wayline'
			import { ELocalStorageKey, ERouterName } from '/@/types'
			import { EllipsisOutlined, RocketOutlined, CameraFilled, UserOutlined, SelectOutlined } from '@ant-design/icons-vue'
			import { ArrowLeftOutlined, EllipsisOutlined, RocketOutlined, CameraFilled, UserOutlined, SelectOutlined, EditOutlined } from '@ant-design/icons-vue'
			import { EDeviceType } from '/@/types/device'
			import { useMyStore } from '/@/store'
			import { WaylineFile } from '/@/types/wayline'
			@@ -97,12 +136,22 @@
			import { getRoot } from '/@/root'
			import * as Cesium from 'cesium'
			import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
			import axios from 'axios'
			import JSZIP from 'jszip'
			// 初始化jszip
			const JsZip = new JSZIP()

			const getResource = (name: string) => {
			return new URL(`/src/assets/icons/${name}`, import.meta.url).href
			}

			const projectWayLine = ref<HTMLDivElement>()

			const loading = ref(false)
			const { appContext } = getCurrentInstance()
			const { appContext }: any = getCurrentInstance()
			const global = appContext.config.globalProperties
			const store = useMyStore()
			let kmlDataSource = null
			let kmlDataSource: { entities: { values: { _children: any }[] }; show: boolean } \| null \| any = null
			const pagination :IPage = {
			page: 1,
			total: -1,
			@@ -112,6 +161,8 @@
			const waylinesData = reactive({
			data: [] as WaylineFile[]
			})
			// 当前点击的信息
			const currentWayLine = ref<any>({})

			const root = getRoot()
			const workspaceId = computed(() => store.state.common.projectId \|\| localStorage.getItem(ELocalStorageKey.WorkspaceId))
			@@ -119,8 +170,74 @@
			const deleteWaylineId = ref<string>('')
			const canRefresh = ref(true)
			const importVisible = ref<boolean>(root.$router.currentRoute.value.name === ERouterName.WAYLINE)
			const editVisible = ref<boolean>(false)
			const height = ref()
			const { removeById, } = cesiumOperation()
			const { removeById, addClickEvent, getEntityById } = cesiumOperation()

			const isPointListOpen = ref<boolean>(false)
			const tragetPointArr = ref<{
			position: Cesium.Cartesian3,
			eventList: string[]
			}[]>([])
			const selectedPoint = ref<number \| null>(null)

			// 对应事件
			const eventList: any = reactive<{
			key: string,
			name: string,
			icon?: string
			}[]>([
			{
			key: 'takePhoto',
			name: '单拍',
			icon: getResource('waylinetool/camera.png'),
			},
			{
			key: 'startRecord',
			name: '开始录像',
			icon: getResource('waylinetool/camera-on.png'),
			},
			{
			key: 'stopRecord',
			name: '结束录像',
			icon: getResource('waylinetool/camera-off.png'),
			},
			{
			key: 'focus',
			name: '对焦'
			},
			{
			key: 'zoom',
			name: '变焦',
			icon: getResource('waylinetool/fd.png'),
			},
			{
			key: 'customDirName',
			name: '创建新文件夹',
			icon: getResource('waylinetool/create-file.png'),
			},
			{
			key: 'gimbalRotate',
			name: '旋转云台'
			},
			{
			key: 'rotateYaw',
			name: '飞行器偏航'
			},
			{
			key: 'hover',
			name: '悬停等待',
			icon: getResource('waylinetool/xt.png'),
			},
			{
			key: 'gimbalEvenlyRotate',
			name: '航段间均匀转动云台pitch角'
			},
			{
			key: 'orientedShoot',
			name: '精准复拍动作'
			}
			])

			onMounted(() => {
			const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
			@@ -143,6 +260,11 @@
			global.$viewer.dataSources.remove(kmlDataSource)
			}
			removeById('kmzLine')
			removeById('clickBox')
			store.commit('SET_WAYLINE_INFO', {
			isShow: false,
			wayline: {}
			})
			})

			function getWaylines () {
			@@ -203,9 +325,17 @@
			getWayLineFile(workspaceId.value, wayline.id).then(res => {
			store.commit('SET_SELECT_WAYLINE_INFO', wayline)
			initKmlFile(res.data)
			store.commit('SET_WAYLINE_KMZPATH', res.data)
			}).finally(() => {
			loading.value = false
			})
			// 清除选中点柱形和隐藏按钮
			store.commit('SET_WAYLINE_INFO', {
			isShow: false,
			wayline: {}
			})
			removeById('clickBox')
			isPointListOpen.value = !isPointListOpen.value
			}
			/**
			* 加载kml文件
			@@ -230,24 +360,35 @@
			kmlEntity.value = kmlDataSource.entities.values
			kmlDataSource.show = true
			const kmlEntityArr = kmlDataSource.entities.values[0]._children
			const cartesianArr = []
			const cartesianArr: any[] = []
			for (let i = 0; i < kmlEntityArr.length; i++) {
			const entity = kmlEntityArr[i]
			entity.point = new Cesium.PointGraphics({
			pixelSize: 12,
			color: Cesium.Color.RED,
			outlineColor: Cesium.Color.WHITE,
			const billboard = createBillboard(`${i + 1}`, '#2D8CF0')
			entity._id = 'tragetPoint' + i
			entity.billboard = new Cesium.BillboardGraphics({
			image: billboard,
			pixelOffset: new Cesium.Cartesian2(0, -20)
			})
			entity.billboard = null
			entity.point = new Cesium.PointGraphics({
			pixelSize: 20,
			color: Cesium.Color.GHOSTWHITE,
			outlineColor: Cesium.Color.BLACK,
			})
			cartesianArr.push(entity.position._value)
			tragetPointArr.value[i] = {
			position: entity.position._value,
			eventList: []
			}
			}
			// tragetPointArr.value = cartesianArr
			// const stripe = createStripe()
			const lineEntity = global.$viewer.entities.add({
			name: 'entityLine',
			id: 'kmzLine',
			polyline: {
			positions: cartesianArr,
			width: 10,
			material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN),
			width: 20,
			material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.MEDIUMSPRINGGREEN),
			clampToGround: false, // 关闭贴地效果，保留高度
			},
			})
			@@ -255,8 +396,46 @@
			global.$viewer.flyTo(lineEntity, {
			offset: new Cesium.HeadingPitchRange(0, -90, 8000)
			})

			// 解析kmz文件
			readKmzFile(file)
			})
			}

			// 点击目标点
			function tragetPointClick (position: Cesium.Cartesian3, index: number) {
			selectedPoint.value = index
			store.commit('SET_WAYLINE_INFO', {
			isShow: true,
			wayline: currentWayLine
			})
			if (getEntityById('clickBox')) {
			removeById('clickBox')
			}
			kmlDataSource.entities._entities._array.forEach((entity: { _id: string; billboard: Cesium.BillboardGraphics }, i: number) => {
			entity.billboard = new Cesium.BillboardGraphics({
			image: createBillboard(`${i}`, entity._id === `tragetPoint${index}` ? '#FF9900' : '#2D8CF0'),
			pixelOffset: new Cesium.Cartesian2(0, -20)
			})
			})
			// 创建盒子
			const entity = {
			id: 'clickBox',
			position,
			box: {
			dimensions: new Cesium.Cartesian3(10.0, 10.0, 120),
			material: Cesium.Color.MEDIUMSPRINGGREEN.withAlpha(0.1),
			// outline: true,
			// outlineColor: Cesium.Color.MEDIUMSPRINGGREEN.withAlpha(0.8),
			heightReference: true
			}
			}
			const boxEntity = global.$viewer.entities.add(entity)
			global.$viewer.flyTo(boxEntity, {
			duration: 3,
			})
			}

			function onScroll (e: any) {
			const element = e.srcElement
			if (element.scrollTop + element.clientHeight >= element.scrollHeight - 5 && Math.ceil(pagination.total / pagination.page_size) > pagination.page && canRefresh.value) {
			@@ -264,6 +443,7 @@
			getWaylines()
			}
			}

			interface FileItem {
			uid: string;
			name?: string;
			@@ -303,6 +483,102 @@
			})
			}

			// 创建广告牌
			const createBillboard = (title: string, color: string) => {
			// 创建canvas绘制广告牌
			const billboard = document.createElement('canvas')
			billboard.width = 30
			billboard.height = 30
			const ctx: HTMLCanvasElement \| any = billboard.getContext('2d')
			ctx.beginPath()
			ctx.moveTo(0, 0)
			ctx.lineTo(30, 0)
			ctx.lineTo(15, 22)
			ctx.fillStyle = color
			ctx.fill()
			ctx.font = '18px serif'
			ctx.fillStyle = '#ffffff'
			ctx.fillText(title, 10, 15)
			ctx.closePath()
			return billboard
			}

			// 创建条纹
			const createStripe = () => {
			// 创建canvas绘制广告牌
			const stripe = document.createElement('canvas')
			stripe.width = 40
			stripe.height = 40
			const ctx: HTMLCanvasElement \| any = stripe.getContext('2d')
			ctx.beginPath()
			ctx.moveTo(0, 20)
			ctx.lineTo(0, 40)
			ctx.lineTo(20, 20)
			ctx.lineTo(20, 0)
			ctx.fillStyle = '#fff'
			ctx.fill()
			ctx.closePath()
			ctx.beginPath()
			ctx.moveTo(20, 0)
			ctx.lineTo(20, 20)
			ctx.lineTo(40, 40)
			ctx.lineTo(40, 20)
			ctx.fillStyle = '#fff'
			ctx.fill()
			ctx.closePath()
			return stripe
			}

			/**
			* @description: 获取kmz文件中的内容
			* @param {*} kmzPath kmz文件地址
			* @return {*} void
			*/
			const readKmzFile = (kmzPath: string) => {
			// 使用axios读取文件
			return axios.get(kmzPath, { responseType: 'arraybuffer' })
			.then(fileRes => fileRes.data)
			.then(kmzData => JsZip.loadAsync(kmzData)) // 解压kmz文件
			.then(kmzZip => {
			// 通过文件名找到 KML 文件
			const kmlFile = kmzZip.file(/\.kml$/i)[0]
			return kmlFile.async('text')
			}).then(kml => {
			// 查找航点标签reg
			const regx = /<Placemark>([\s\S]*?)<\/Placemark>/g
			// 查找事件组reg
			const actionGroupReg = /<wpml:actionGroup>([\s\S]*?)<\/wpml:actionGroup>/g
			// 查找单个事件reg
			const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
			// 当前kmz文件航点
			const kmlPoints = kml.match(regx)
			kmlPoints?.forEach((point: string, index: number) => {
			// 当前点的事件组
			const ponitAction = point.match(actionGroupReg)
			const eventArr: string[] = []
			if (ponitAction) {
			// 当前事件
			const actions = ponitAction[0].match(actionRegx)
			actions?.forEach(action => {
			eventList.forEach((item: any) => {
			action.includes(item.key) && eventArr.push(item)
			})
			})
			tragetPointArr.value[index].eventList = eventArr
			}
			})
			})
			}

			const openEditModal = (wayline: any) => {
			currentWayLine.value = wayline
			editVisible.value = true
			}

			const handleEditName = () => {
			editVisible.value = false
			}

			</script>

			<style lang="scss" scoped>
			@@ -316,6 +592,7 @@
			font-size: 13px;
			border-radius: 2px;
			cursor: pointer;

			.title {
			display: flex;
			flex-direction: row;
			@@ -325,9 +602,116 @@
			margin: 0px 10px 0 10px;
			}
			}

			.uranus-scrollbar {
			overflow: auto;
			scrollbar-width: thin;
			scrollbar-color: #c5c8cc transparent;
			}

			.project-wayline-wrapper {
			.targt-point {
			padding: 0;
			margin: 0;
			list-style-type: none;
			.back-btn {
			cursor: pointer;
			padding: 10px;
			border-bottom: 1px solid #4f4f4f;
			span {
			margin-left: 10px;
			}
			&:hover {
			color: #2d8cf0;
			}
			}
			li {
			cursor: pointer;
			padding: 10px 0;
			margin: 0 7px;
			display: flex;
			.graph {
			width: 40px;
			display: flex;
			align-items: center;
			.left {
			width: 0;
			height: 0;
			border-top: 15px solid #2D8CF0;
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			}
			.right {
			margin-left: 3px;
			}
			}
			.graph-right {
			width: calc(100% - 40px);
			height: 30px;
			border-bottom: 1px solid #4f4f4f;
			display: flex;
			align-items: center;
			.s-event-icon {
			width: 25px;
			height: 25px;
			display: flex;
			justify-content: center;
			align-items: center;
			img {
			width: 70%;
			}
			}
			}
			&:hover {
			background-color: #3C3C3C;
			}
			}
			}

			:deep(.ant-modal) {
			.ant-modal-close {
			height: 40px;
			width: 40px;

			.ant-modal-close-x {
			width: 100%;
			height: 100%;
			line-height: 40px;
			color: #fff;
			}
			}

			.ant-modal-header {
			text-align: center;
			padding: 10px;
			border: 0;
			background-color: #282828;

			.ant-modal-title {
			color: #fff;
			font-size: 15px;
			}
			}

			.ant-modal-body,
			.ant-modal-footer {
			background-color: #1C1C1C;
			border: 0;

			.wayline-title {
			color: #c5c8cc;
			margin-bottom: 10px;
			}

			.ant-input {
			background-color: transparent;
			color: #fff;
			}
			}
			}
			}

			.selectedColor {
			background-color: #3C3C3C;
			}
			</style>

			@@ -96,7 +96,12 @@
			devicesCmdExecuteInfo: {
			} as DevicesCmdExecuteInfo,
			mqttState: null as any, // mqtt 实例
			clientId: '', // mqtt 连接唯一客户端id
			clientId: '', // mqtt 连接唯一客户端id,
			waylineTool: {
			isShow: false as boolean,
			wayline: {} as any,
			kmzPath: '' as string
			}
			})

			export type RootStateType = ReturnType<typeof initStateFunc>
			@@ -204,6 +209,14 @@
			SET_CLIENT_ID (state, clientId) {
			state.clientId = clientId
			},
			// 设置wayline中的信息
			SET_WAYLINE_INFO (state, { isShow, wayline }) {
			state.waylineTool.isShow = isShow
			state.waylineTool.wayline = wayline
			},
			SET_WAYLINE_KMZPATH (state, kmzPath) {
			state.waylineTool.kmzPath = kmzPath
			}
			}

			const actions: ActionTree<RootStateType, RootStateType> = {

			@@ -1 +1,7 @@
			/// <reference types="vite/client" />
			export {}
			declare global {
			interface Window {
			globalApiConfig: any
			}
			}

			@@ -1,11 +1,13 @@
			import { ELocalStorageKey } from '/@/types/enums'
			import { CURRENT_CONFIG } from '/@/api/http/config'

			const { baseUrl: { wsBaseUrl } } = window.globalApiConfig

			const user = localStorage.getItem('user_info')
			export function getWebsocketUrl () {
			const token: string = localStorage.getItem(ELocalStorageKey.Token) \|\| '' as string
			// const url = CURRENT_CONFIG.websocketURL
			const url = import.meta.env.VITE_WS_API_URL + '?x-auth-token=' + encodeURI(token)
			const url = (wsBaseUrl \|\| import.meta.env.VITE_WS_API_URL) + '?x-auth-token=' + encodeURI(token)
			return url
			}