drone/drone-web.git

parent: 8a0906c1 | patch | commit | ignore whitespace

GuLiMmo

2023-11-29 7d9fb50b4e444ba3afec098ad031e93b4e9ee9ee

航线库修改/api打包后可修改

11 files modified

1 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	5 ●●●●● patch \| view \| raw \| blame \| history
	src/components/MediaPanel.vue	5 ●●●●● patch \| view \| raw \| blame \| history
	src/mqtt/config.ts	14 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/page-web/projects/wayline.vue	149 ●●●●● patch \| view \| raw \| blame \| history
	src/store/index.ts	12 ●●●●● 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

@@ -221,9 +221,8 @@
  distance?:number
}

export const flyByArea = async function (sn:string,dockPoint:Point,jsonPath:any,radius:number,deviceSn:string,payloadIndex:string): Promise<IWorkspaceResponse<any>> {
export const flyByArea = async function (sn:string, dockPoint:Point, jsonPath:any, radius:number, deviceSn:string, payloadIndex:string): Promise<IWorkspaceResponse<any>> {
  const url = `${HTTP_PREFIX}/workspaces/${sn}/jobs/${deviceSn}/flyByArea`
  const result = await request.post(url,{dockPoint:dockPoint,jsonPath:jsonPath,radius:radius,payloadIndex:payloadIndex})
  const result = await request.post(url, { dockPoint: dockPoint, jsonPath: jsonPath, radius: radius, payloadIndex: payloadIndex })
  return result.data
}


 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/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/wayline.vue

@@ -100,15 +100,19 @@
          <span>返回上一页</span>
        </div>
        <li
          v-for="(position, index) in tragetPointArr"
          v-for="(item, index) in tragetPointArr"
          :key="index"
          :class="{ selectedColor : index === selectedPoint }"
          @click="tragetPointClick(position, index)">
          @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>
          <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>
@@ -132,7 +136,14 @@
import { getRoot } from '/@/root'
import * as Cesium from 'cesium'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { stat } from 'fs'
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>()

@@ -164,8 +175,69 @@
const { removeById, addClickEvent, getEntityById } = cesiumOperation()

const isPointListOpen = ref<boolean>(false)
const tragetPointArr = ref<Cesium.Cartesian3[]>([])
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
@@ -253,6 +325,7 @@
  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
  })
@@ -302,9 +375,13 @@
        outlineColor: Cesium.Color.BLACK,
      })
      cartesianArr.push(entity.position._value)
      tragetPointArr.value[i] = {
        position: entity.position._value,
        eventList: []
      }
    }
    tragetPointArr.value = cartesianArr
    const stripe = createStripe()
    // tragetPointArr.value = cartesianArr
    // const stripe = createStripe()
    const lineEntity = global.$viewer.entities.add({
      name: 'entityLine',
      id: 'kmzLine',
@@ -319,9 +396,13 @@
    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', {
@@ -448,6 +529,47 @@
  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
@@ -525,7 +647,20 @@
      }
      .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;

 src/store/index.ts

@@ -99,7 +99,8 @@
  clientId: '', // mqtt 连接 唯一客户端id,
  waylineTool: {
    isShow: false as boolean,
    wayline: {} as any
    wayline: {} as any,
    kmzPath: '' as string
  }
})

@@ -210,10 +211,11 @@
  },
  // 设置wayline中的信息
  SET_WAYLINE_INFO (state, { isShow, wayline }) {
    state.waylineTool = {
      isShow,
      wayline
    }
    state.waylineTool.isShow = isShow
    state.waylineTool.wayline = wayline
  },
  SET_WAYLINE_KMZPATH (state, kmzPath) {
    state.waylineTool.kmzPath = kmzPath
  }
}


 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,
			})

			@@ -221,9 +221,8 @@
			distance?:number
			}

			export const flyByArea = async function (sn:string,dockPoint:Point,jsonPath:any,radius:number,deviceSn:string,payloadIndex:string): Promise<IWorkspaceResponse<any>> {
			export const flyByArea = async function (sn:string, dockPoint:Point, jsonPath:any, radius:number, deviceSn:string, payloadIndex:string): Promise<IWorkspaceResponse<any>> {
			const url = `${HTTP_PREFIX}/workspaces/${sn}/jobs/${deviceSn}/flyByArea`
			const result = await request.post(url,{dockPoint:dockPoint,jsonPath:jsonPath,radius:radius,payloadIndex:payloadIndex})
			const result = await request.post(url, { dockPoint: dockPoint, jsonPath: jsonPath, radius: radius, payloadIndex: payloadIndex })
			return result.data
			}

			@@ -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',

			@@ -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,
			}

			@@ -100,15 +100,19 @@
			<span>返回上一页</span>
			</div>
			<li
			v-for="(position, index) in tragetPointArr"
			v-for="(item, index) in tragetPointArr"
			:key="index"
			:class="{ selectedColor : index === selectedPoint }"
			@click="tragetPointClick(position, index)">
			@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>
			<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>
			@@ -132,7 +136,14 @@
			import { getRoot } from '/@/root'
			import * as Cesium from 'cesium'
			import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
			import { stat } from 'fs'
			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>()

			@@ -164,8 +175,69 @@
			const { removeById, addClickEvent, getEntityById } = cesiumOperation()

			const isPointListOpen = ref<boolean>(false)
			const tragetPointArr = ref<Cesium.Cartesian3[]>([])
			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
			@@ -253,6 +325,7 @@
			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
			})
			@@ -302,9 +375,13 @@
			outlineColor: Cesium.Color.BLACK,
			})
			cartesianArr.push(entity.position._value)
			tragetPointArr.value[i] = {
			position: entity.position._value,
			eventList: []
			}
			}
			tragetPointArr.value = cartesianArr
			const stripe = createStripe()
			// tragetPointArr.value = cartesianArr
			// const stripe = createStripe()
			const lineEntity = global.$viewer.entities.add({
			name: 'entityLine',
			id: 'kmzLine',
			@@ -319,9 +396,13 @@
			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', {
			@@ -448,6 +529,47 @@
			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
			@@ -525,7 +647,20 @@
			}
			.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;

			@@ -99,7 +99,8 @@
			clientId: '', // mqtt 连接唯一客户端id,
			waylineTool: {
			isShow: false as boolean,
			wayline: {} as any
			wayline: {} as any,
			kmzPath: '' as string
			}
			})

			@@ -210,10 +211,11 @@
			},
			// 设置wayline中的信息
			SET_WAYLINE_INFO (state, { isShow, wayline }) {
			state.waylineTool = {
			isShow,
			wayline
			}
			state.waylineTool.isShow = isShow
			state.waylineTool.wayline = wayline
			},
			SET_WAYLINE_KMZPATH (state, kmzPath) {
			state.waylineTool.kmzPath = kmzPath
			}
			}

			@@ -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
			}