kmz文件打包完成、新增航线功能、事件编辑

GuLiMmo

2024-03-18 3e13dd0242140c7189b65e4171efaa9190d1763d

kmz文件打包完成、新增航线功能、事件编辑

 src/components/GMap.vue

@@ -1,10 +1,11 @@
<template>
  <div class="g-map-wrapper">
    <!-- 地图区域 -->
    <!-- <div id="g-container" :style="{ width: '100%', height: '100%' }" /> -->
    <Cesium />
    <!-- 绘制面板 -->
    <!-- <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
  <div class="map-container">
    <div class="g-map-wrapper">
      <!-- 地图区域 -->
      <!-- <div id="g-container" :style="{ width: '100%', height: '100%' }" /> -->
      <Cesium />
      <!-- 绘制面板 -->
      <!-- <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
      <div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'" @click="draw('pin', true)">
        <a><a-image :src="pin" :preview="false" /></a>
      </div>
@@ -26,322 +27,378 @@
        </a>
      </div>
    </div> -->
    <!-- 飞机OSD -->
    <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
      <div class="pl5 pr5 flex-align-center flex-row flex-justify-between"
        style="border-bottom: 1px solid #515151; height: 18%;">
        <span>{{ osdVisible.callsign }}</span>
        <span><a class="fz16" style="color: white;" @click="() => osdVisible.visible = false">
            <CloseOutlined />
          </a></span>
      </div>
      <div style="height: 82%;">
        <div class="flex-column flex-align-center flex-justify-center"
          style="margin-top: -5px; padding-top: 25px; float: left; width: 60px; background: #2d2d2d;">
          <a-tooltip :title="osdVisible.model">
            <div style="width: 90%;" class="flex-column flex-align-center flex-justify-center">
              <span><a-image :src="M30" :preview="false" /></span>
              <span>{{ osdVisible.model }}</span>
            </div>
          </a-tooltip>
      <!-- 飞机OSD -->
      <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
        <div
          class="pl5 pr5 flex-align-center flex-row flex-justify-between"
          style="border-bottom: 1px solid #515151; height: 18%">
          <span>{{ osdVisible.callsign }}</span>
          <span
            ><a class="fz16" style="color: white" @click="() => (osdVisible.visible = false)"> <CloseOutlined /> </a
          ></span>
        </div>
        <div class="osd">
          <a-row>
            <a-col span="16"
              :style="deviceInfo.device.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;' : 'color: rgb(25,190,107)'">{{
                EModeText[deviceInfo.device.mode_code] }}</a-col>
          </a-row>
          <a-row>
            <a-col span="6">
              <a-tooltip title="Signal strength">
                <span>HD</span>
                <span class="ml5">{{ deviceInfo.gateway?.transmission_signal_quality }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="RC Battery Level">
                <span>
                  <ThunderboltOutlined class="fz14" />
                </span>
                <span class="ml5">{{ deviceInfo.gateway && deviceInfo.gateway.capacity_percent !== str ?
                  deviceInfo.gateway.capacity_percent + ' %' : deviceInfo.gateway.capacity_percent }}</span>
              </a-tooltip>
            </a-col>

            <a-col span="6">
              <a-tooltip title="无人机电池电量">
                <span>
                  <ThunderboltOutlined class="fz14" />
                </span>
                <span class="ml5">{{ deviceInfo.device.battery.capacity_percent !== str ?
                  deviceInfo.device.battery.capacity_percent + ' %' : deviceInfo.device.battery.capacity_percent }}</span>
              </a-tooltip>
            </a-col>
          </a-row>
          <a-row>
            <a-tooltip title="RTK固定">
              <a-col span="6" class="flex-row flex-align-center flex-justify-start">
                <span>Fixed</span>
                <span class="ml5 circle"
                  :style="deviceInfo.device.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span>
              </a-col>
        <div style="height: 82%">
          <div
            class="flex-column flex-align-center flex-justify-center"
            style="margin-top: -5px; padding-top: 25px; float: left; width: 60px; background: #2d2d2d">
            <a-tooltip :title="osdVisible.model">
              <div style="width: 90%" class="flex-column flex-align-center flex-justify-center">
                <span><a-image :src="M30" :preview="false" /></span>
                <span>{{ osdVisible.model }}</span>
              </div>
            </a-tooltip>
            <a-col span="6">
              <a-tooltip title="GPS">
                <span>GPS</span>
                <span class="ml5">{{ deviceInfo.device.position_state.gps_number }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="RTK">
                <span>
                  <TrademarkOutlined class="fz14" />
                </span>
                <span class="ml5">{{ deviceInfo.device.position_state.rtk_number }}</span>
              </a-tooltip>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="6">
              <a-tooltip title="飞行模式">
                <span>
                  <ControlOutlined class="fz16" />
                </span>
                <span class="ml5">{{ EGear[deviceInfo.device.gear] }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="海拔高度">
                <span>ASL</span>
                <span class="ml5">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) +
                  'm' }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="高于起飞高度">
                <span>ALT</span>
                <span class="ml5">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) +
                  'm' }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="到起点距离">
                <span>H</span>
                <span class="ml5">{{ deviceInfo.device.home_distance === str ? str :
                  deviceInfo.device.home_distance.toFixed(2) + ' m' }}</span>
              </a-tooltip>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="6">
              <a-tooltip title="水平速度">
                <span>H.S</span>
                <span class="ml5">{{ deviceInfo.device.horizontal_speed === str ? str :
                  deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s' }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="垂直速度">
                <span>V.S</span>
                <span class="ml5">{{ deviceInfo.device.vertical_speed === str ? str :
                  deviceInfo.device.vertical_speed.toFixed(2) + ' m/s' }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="风速">
                <span>W.S</span>
                <span class="ml5">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed /
                  10).toFixed(2) + ' m/s' }}</span>
              </a-tooltip>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="battery-slide" v-if="deviceInfo.device.battery.remain_flight_time !== 0">
        <div style="background: #535759;" class="width-100"></div>
        <div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%' }"></div>
        <div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%' }"></div>
        <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%' }"></div>
        <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
        <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
          {{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}:
          {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' :
            '' }}{{ deviceInfo.device.battery.remain_flight_time % 60 }}
        </div>
      </div>
    </div>
    <!-- 机场OSD -->
    <!--  && osdVisible.is_dock -->
    <div class="osd-panel fz12" v-if="osdVisible.visible">
      <div class="fz16 pr5 flex-align-center flex-row flex-justify-between"
        style="border-bottom: 1px solid #515151; height: 10%;">
        <div class="flex-align-center flex-justify-center" style="display: flex;">
          <div v-if="osdVisible.latest_wayline_job" class="flex-column flex-align-center flex-justify-center">
            <div class="task_wrapper">
              <div class="task_content task_content_way" v-if="deviceInfo.device && deviceInfo.device?.mode_code === 5">
                <div class="task_status">
                  <ContainerOutlined />
                  <span>执行任务中</span>
                </div>
              </div>
              <div class="task_content" v-else>
                <div class="task_status">
                  <ContainerOutlined />
                  <span>待执行</span>
                </div>
                <div class="task_info">{{ osdVisible.latest_wayline_job.is_later ? '今天' :
                  '明天' }}{{ convertTimestampToDate(osdVisible.latest_wayline_job.begin_time, 'hh:mm') }}</div>
              </div>
              <div class="task_title">{{ osdVisible.latest_wayline_job.name }}</div>
            </div>
          </div>
          <span :style="[osdVisible.latest_wayline_job ? 'margin-left:20px' : '']">{{ osdVisible.gateway_callsign }}</span>
          <div class="osd">
            <a-row>
              <a-col
                span="16"
                :style="
                  deviceInfo.device.mode_code === EModeCode.Disconnected
                    ? 'color: red; font-weight: 700;'
                    : 'color: rgb(25,190,107)'
                "
                >{{ EModeText[deviceInfo.device.mode_code] }}</a-col
              >
            </a-row>
            <a-row>
              <a-col span="6">
                <a-tooltip title="Signal strength">
                  <span>HD</span>
                  <span class="ml5">{{ deviceInfo.gateway?.transmission_signal_quality }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="6">
                <a-tooltip title="RC Battery Level">
                  <span>
                    <ThunderboltOutlined class="fz14" />
                  </span>
                  <span class="ml5">{{
                    deviceInfo.gateway && deviceInfo.gateway.capacity_percent !== str
                      ? deviceInfo.gateway.capacity_percent + ' %'
                      : deviceInfo.gateway.capacity_percent
                  }}</span>
                </a-tooltip>
              </a-col>

              <a-col span="6">
                <a-tooltip title="无人机电池电量">
                  <span>
                    <ThunderboltOutlined class="fz14" />
                  </span>
                  <span class="ml5">{{
                    deviceInfo.device.battery.capacity_percent !== str
                      ? deviceInfo.device.battery.capacity_percent + ' %'
                      : deviceInfo.device.battery.capacity_percent
                  }}</span>
                </a-tooltip>
              </a-col>
            </a-row>
            <a-row>
              <a-tooltip title="RTK固定">
                <a-col span="6" class="flex-row flex-align-center flex-justify-start">
                  <span>Fixed</span>
                  <span
                    class="ml5 circle"
                    :style="
                      deviceInfo.device.position_state.is_fixed === 1
                        ? 'backgroud: rgb(25,190,107);'
                        : ' background: red;'
                    "></span>
                </a-col>
              </a-tooltip>
              <a-col span="6">
                <a-tooltip title="GPS">
                  <span>GPS</span>
                  <span class="ml5">{{ deviceInfo.device.position_state.gps_number }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="6">
                <a-tooltip title="RTK">
                  <span>
                    <TrademarkOutlined class="fz14" />
                  </span>
                  <span class="ml5">{{ deviceInfo.device.position_state.rtk_number }}</span>
                </a-tooltip>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="6">
                <a-tooltip title="飞行模式">
                  <span>
                    <ControlOutlined class="fz16" />
                  </span>
                  <span class="ml5">{{ EGear[deviceInfo.device.gear] }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="6">
                <a-tooltip title="海拔高度">
                  <span>ASL</span>
                  <span class="ml5">{{
                    deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + 'm'
                  }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="6">
                <a-tooltip title="高于起飞高度">
                  <span>ALT</span>
                  <span class="ml5">{{
                    deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + 'm'
                  }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="6">
                <a-tooltip title="到起点距离">
                  <span>H</span>
                  <span class="ml5">{{
                    deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m'
                  }}</span>
                </a-tooltip>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="6">
                <a-tooltip title="水平速度">
                  <span>H.S</span>
                  <span class="ml5">{{
                    deviceInfo.device.horizontal_speed === str
                      ? str
                      : deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s'
                  }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="6">
                <a-tooltip title="垂直速度">
                  <span>V.S</span>
                  <span class="ml5">{{
                    deviceInfo.device.vertical_speed === str
                      ? str
                      : deviceInfo.device.vertical_speed.toFixed(2) + ' m/s'
                  }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="6">
                <a-tooltip title="风速">
                  <span>W.S</span>
                  <span class="ml5">{{
                    deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / 10).toFixed(2) + ' m/s'
                  }}</span>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
        </div>
        <div>
          <a style="color: white;" @click="closeOsdWindow">
            <CloseOutlined />
          </a>
        <div class="battery-slide" v-if="deviceInfo.device.battery.remain_flight_time !== 0">
          <div style="background: #535759" class="width-100"></div>
          <div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%' }"></div>
          <div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%' }"></div>
          <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%' }"></div>
          <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
          <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
            {{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}:
            {{ 10 > deviceInfo.device.battery.remain_flight_time % 60 ? '0' : ''
            }}{{ deviceInfo.device.battery.remain_flight_time % 60 }}
          </div>
        </div>
      </div>
      <!-- 机场 -->
      <div class="flex-display" style="border-bottom: 1px solid #515151;">
        <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d;">
          <a-tooltip :title="osdVisible.gateway_callsign">
            <div class="flex-column  flex-align-center flex-justify-center" style="width: 90%;">
              <span>
                <RobotFilled style="font-size: 48px;" />
              </span>
              <span class="mt10">Dock</span>
      <!-- 机场OSD -->
      <!--  && osdVisible.is_dock -->
      <div class="osd-panel fz12" v-if="osdVisible.visible">
        <div
          class="fz16 pr5 flex-align-center flex-row flex-justify-between"
          style="border-bottom: 1px solid #515151; height: 10%">
          <div class="flex-align-center flex-justify-center" style="display: flex">
            <div v-if="osdVisible.latest_wayline_job" class="flex-column flex-align-center flex-justify-center">
              <div class="task_wrapper">
                <div
                  class="task_content task_content_way"
                  v-if="deviceInfo.device && deviceInfo.device?.mode_code === 5">
                  <div class="task_status">
                    <ContainerOutlined />
                    <span>执行任务中</span>
                  </div>
                </div>
                <div class="task_content" v-else>
                  <div class="task_status">
                    <ContainerOutlined />
                    <span>待执行</span>
                  </div>
                  <div class="task_info">
                    {{ osdVisible.latest_wayline_job.is_later ? '今天' : '明天'
                    }}{{ convertTimestampToDate(osdVisible.latest_wayline_job.begin_time, 'hh:mm') }}
                  </div>
                </div>
                <div class="task_title">{{ osdVisible.latest_wayline_job.name }}</div>
              </div>
            </div>
          </a-tooltip>
            <span :style="[osdVisible.latest_wayline_job ? 'margin-left:20px' : '']">{{
              osdVisible.gateway_callsign
            }}</span>
          </div>
          <div>
            <a style="color: white" @click="closeOsdWindow">
              <CloseOutlined />
            </a>
          </div>
        </div>
        <div class="osd flex-1" style="flex: 1">
          <a-row justify="space-between" class="mr-20">
            <a-col span="9"
              :style="deviceInfo.dock.basic_osd?.mode_code === EDockModeCode.Disconnected ? 'color: red; font-weight: 700;' : 'color: rgb(25,190,107)'">
              {{ EDockModeText[deviceInfo.dock.basic_osd?.mode_code] }}</a-col>
            <!-- <a-col span="1">{{ hmsInfo[sn]?.length || 1 }}</a-col> -->
            <a-col span="1" class="num" v-if="hmsInfo[sn]">{{ hmsInfo[sn]?.length }}</a-col>
            <a-col span="14" v-if="hmsInfo[sn] && hmsInfo[sn].length > 0" style="width: 100%;padding-left:5px ;">
              <a-tooltip :title="hmsInfo[sn][0].message_zh">
                <div class="overflow">{{ hmsInfo[sn][0].message_zh }}</div>
              </a-tooltip>
            </a-col>
          </a-row>
          <a-row>
            <!-- <a-col span="12">
                <a-tooltip title="累计运行时间">
                  <span><HistoryOutlined /></span>
                  <span class="ml5">
                    <span v-if="deviceInfo.dock.work_osd?.acc_time >= 2592000"> {{ Math.floor(deviceInfo.dock.work_osd?.acc_time / 2592000) }}m </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000) >= 86400"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000) / 86400) }}d </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) >= 3600"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) / 3600) }}h </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) >= 60"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) / 60) }}min </span>
                    <span>{{ Math.floor(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600 % 60) }} s</span>
                  </span>
                </a-tooltip>
              </a-col> -->
            <a-col span="9">
              <a-tooltip title="降雨量">
                <span>🌧</span>
                <span class="ml5">{{ RainfallEnum[deviceInfo.dock.basic_osd?.rainfall] }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="15" style="width: 100%;">
              <div class="env-box span5">
                <div class="span-box mr-20">
                  <a-tooltip title="环境温度">
                    <span>°C</span>
                    <span class="ml5">{{ deviceInfo.dock.basic_osd?.environment_temperature }}</span>
                  </a-tooltip>
                </div>
                <div class="span-box mr-20">
                  <a-tooltip title="网络状态">
                    <span
                      :style="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.ETHERNET || deviceInfo.dock.basic_osd?.network_state?.quality === NetworkStateQualityEnum.GOOD ?
                        'color: #00ee8b' : deviceInfo.dock.basic_osd?.network_state?.quality === NetworkStateQualityEnum.MEDIUM ? 'color: yellow' : 'color: red'">
                      <span v-if="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.FOUR_G">
                        <SignalFilled />
                      </span>
                      <span v-else>
                        <GlobalOutlined />
                      </span>
                    </span>
                    <span class="ml5">{{ deviceInfo.dock.basic_osd?.network_state?.rate }} kb/s</span>
                  </a-tooltip>
                </div>
                <div class="span-box mr-20">
                  <a-tooltip title="媒体文件剩余上传">
                    <span>
                      <CloudUploadOutlined class="fz14" />
                    </span>
                    <span class="ml5">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span>
                  </a-tooltip>
                </div>
              </div>
            </a-col>
            <!-- <a-col span="12">
                <a-tooltip title="激活时间">
                  <span><FieldTimeOutlined /></span>
                  <span class="ml5">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString() }}
                  </span>
                </a-tooltip>
              </a-col> -->
          </a-row>
          <a-row>
            <!-- <a-col span="12">
                <a-tooltip title="累计运行时间">
                  <span><HistoryOutlined /></span>
                  <span class="ml5">
                    <span v-if="deviceInfo.dock.work_osd?.acc_time >= 2592000"> {{ Math.floor(deviceInfo.dock.work_osd?.acc_time / 2592000) }}m </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000) >= 86400"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000) / 86400) }}d </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) >= 3600"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) / 3600) }}h </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) >= 60"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) / 60) }}min </span>
                    <span>{{ Math.floor(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600 % 60) }} s</span>
                  </span>
                </a-tooltip>
              </a-col> -->
            <a-col span="9">
              <a-tooltip title="设备上的无人机">
        <!-- 机场 -->
        <div class="flex-display" style="border-bottom: 1px solid #515151">
          <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d">
            <a-tooltip :title="osdVisible.gateway_callsign">
              <div class="flex-column flex-align-center flex-justify-center" style="width: 90%">
                <span>
                  <RocketOutlined />
                  <RobotFilled style="font-size: 48px" />
                </span>
                <span class="ml5">{{ DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="15" style="width: 100%;">
              <div class="env-box span5 op_btn">
                <a-col span="6">
                  <a-tooltip title="设备湿度">
                    <span>💦</span>
                    <span class="ml5">{{ deviceInfo.dock.basic_osd?.humidity }}</span>
                  </a-tooltip>
                </a-col>
                <a-col span="8">
                  <a-button :class="[showMonitor ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                    size="small" @click="openMonitor">
                    监控
                  </a-button>
                </a-col>
                <a-col span="2"></a-col>
                <a-col span="8">
                  <a-button :class="[airPortOption ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                    size="small" @click="openFlySetting">
                    操作
                  </a-button>
                </a-col>
                <span class="mt10">Dock</span>
              </div>
            </a-col>
            <!-- <a-col span="12">
            </a-tooltip>
          </div>
          <div class="osd flex-1" style="flex: 1">
            <a-row justify="space-between" class="mr-20">
              <a-col
                span="9"
                :style="
                  deviceInfo.dock.basic_osd?.mode_code === EDockModeCode.Disconnected
                    ? 'color: red; font-weight: 700;'
                    : 'color: rgb(25,190,107)'
                ">
                {{ EDockModeText[deviceInfo.dock.basic_osd?.mode_code] }}</a-col
              >
              <!-- <a-col span="1">{{ hmsInfo[sn]?.length || 1 }}</a-col> -->
              <a-col span="1" class="num" v-if="hmsInfo[sn]">{{ hmsInfo[sn]?.length }}</a-col>
              <a-col span="14" v-if="hmsInfo[sn] && hmsInfo[sn].length > 0" style="width: 100%; padding-left: 5px">
                <a-tooltip :title="hmsInfo[sn][0].message_zh">
                  <div class="overflow">{{ hmsInfo[sn][0].message_zh }}</div>
                </a-tooltip>
              </a-col>
            </a-row>
            <a-row>
              <!-- <a-col span="12">
                <a-tooltip title="累计运行时间">
                  <span><HistoryOutlined /></span>
                  <span class="ml5">
                    <span v-if="deviceInfo.dock.work_osd?.acc_time >= 2592000"> {{ Math.floor(deviceInfo.dock.work_osd?.acc_time / 2592000) }}m </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000) >= 86400"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000) / 86400) }}d </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) >= 3600"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) / 3600) }}h </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) >= 60"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) / 60) }}min </span>
                    <span>{{ Math.floor(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600 % 60) }} s</span>
                  </span>
                </a-tooltip>
              </a-col> -->
              <a-col span="9">
                <a-tooltip title="降雨量">
                  <span>🌧</span>
                  <span class="ml5">{{ RainfallEnum[deviceInfo.dock.basic_osd?.rainfall] }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="15" style="width: 100%">
                <div class="env-box span5">
                  <div class="span-box mr-20">
                    <a-tooltip title="环境温度">
                      <span>°C</span>
                      <span class="ml5">{{ deviceInfo.dock.basic_osd?.environment_temperature }}</span>
                    </a-tooltip>
                  </div>
                  <div class="span-box mr-20">
                    <a-tooltip title="网络状态">
                      <span
                        :style="
                          deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.ETHERNET ||
                          deviceInfo.dock.basic_osd?.network_state?.quality === NetworkStateQualityEnum.GOOD
                            ? 'color: #00ee8b'
                            : deviceInfo.dock.basic_osd?.network_state?.quality === NetworkStateQualityEnum.MEDIUM
                            ? 'color: yellow'
                            : 'color: red'
                        ">
                        <span v-if="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.FOUR_G">
                          <SignalFilled />
                        </span>
                        <span v-else>
                          <GlobalOutlined />
                        </span>
                      </span>
                      <span class="ml5">{{ deviceInfo.dock.basic_osd?.network_state?.rate }} kb/s</span>
                    </a-tooltip>
                  </div>
                  <div class="span-box mr-20">
                    <a-tooltip title="媒体文件剩余上传">
                      <span>
                        <CloudUploadOutlined class="fz14" />
                      </span>
                      <span class="ml5">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span>
                    </a-tooltip>
                  </div>
                </div>
              </a-col>
              <!-- <a-col span="12">
                <a-tooltip title="激活时间">
                  <span><FieldTimeOutlined /></span>
                  <span class="ml5">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString() }}
                  </span>
                </a-tooltip>
              </a-col> -->
          </a-row>
          <!-- 注释 -->
          <!-- <a-row>
            </a-row>
            <a-row>
              <!-- <a-col span="12">
                <a-tooltip title="累计运行时间">
                  <span><HistoryOutlined /></span>
                  <span class="ml5">
                    <span v-if="deviceInfo.dock.work_osd?.acc_time >= 2592000"> {{ Math.floor(deviceInfo.dock.work_osd?.acc_time / 2592000) }}m </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000) >= 86400"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000) / 86400) }}d </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) >= 3600"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) / 3600) }}h </span>
                    <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) >= 60"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) / 60) }}min </span>
                    <span>{{ Math.floor(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600 % 60) }} s</span>
                  </span>
                </a-tooltip>
              </a-col> -->
              <a-col span="9">
                <a-tooltip title="设备上的无人机">
                  <span>
                    <RocketOutlined />
                  </span>
                  <span class="ml5">{{ DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] }}</span>
                </a-tooltip>
              </a-col>
              <a-col span="15" style="width: 100%">
                <div class="env-box span5 op_btn">
                  <a-col span="6">
                    <a-tooltip title="设备湿度">
                      <span>💦</span>
                      <span class="ml5">{{ deviceInfo.dock.basic_osd?.humidity }}</span>
                    </a-tooltip>
                  </a-col>
                  <a-col span="8">
                    <a-button
                      :class="[showMonitor ? 'active-color' : 'unactive-color']"
                      class="width-100"
                      type="primary"
                      size="small"
                      @click="openMonitor">
                      监控
                    </a-button>
                  </a-col>
                  <a-col span="2"></a-col>
                  <a-col span="8">
                    <a-button
                      :class="[airPortOption ? 'active-color' : 'unactive-color']"
                      class="width-100"
                      type="primary"
                      size="small"
                      @click="openFlySetting">
                      操作
                    </a-button>
                  </a-col>
                </div>
              </a-col>
              <!-- <a-col span="12">
                <a-tooltip title="激活时间">
                  <span><FieldTimeOutlined /></span>
                  <span class="ml5">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString() }}
                  </span>
                </a-tooltip>
              </a-col> -->
            </a-row>
            <!-- 注释 -->
            <!-- <a-row>
              <a-col span="6">
                <a-tooltip title="网络状态">
                  <span :style="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.ETHERNET || deviceInfo.dock.basic_osd?.network_state?.quality === NetworkStateQualityEnum.GOOD ?
@@ -430,7 +487,7 @@
                </a-tooltip>
              </a-col>
            </a-row> -->
          <!-- <a-row class="p5" justify="space-between">
            <!-- <a-row class="p5" justify="space-between">
            <a-col span="11">
              <a-button :class="[showMonitor ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                size="small" @click="openMonitor">
@@ -444,65 +501,97 @@
              </a-button>
            </a-col>
          </a-row> -->
          <!-- 机场控制面板 -->
          <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo"
            @close-control-panel="closeOperate">
          </DockControlPanel>
            <!-- 机场控制面板 -->
            <DockControlPanel
              v-if="dockControlPanelVisible"
              :sn="osdVisible.gateway_sn"
              :deviceInfo="deviceInfo"
              @close-control-panel="closeOperate">
            </DockControlPanel>
          </div>
        </div>
      </div>
      <a-row class="p5" v-if="showMonitor" justify="center" align="middle">
        <!-- <a-spin :spinning="spinning"> -->
        <Jessibuca v-if="airPortUrl" @timeout="airTimeout" :videoUrl="airPortUrl" width="100%" height="300px" />
        <!-- </a-spin> -->
      </a-row>
      <!--  飞机-->
      <div class="flex-display">
        <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px;  background: #2d2d2d;">
          <a-tooltip :title="osdVisible.model">
            <div style="width: 90%;" class="flex-column flex-align-center flex-justify-center">
              <span><a-image :src="M30" :preview="false" /></span>
              <span>{{ DEVICE_NAME[`${osdVisible.device_domain}-${osdVisible.device_type}-${osdVisible.device_sub_type}`]
              }}</span>
            </div>
          </a-tooltip>
        </div>
        <div class="osd flex-1">
          <a-row class="mr-20" align="middle">
            <a-col span="9"
              :style="deviceInfo.device && deviceInfo.device?.mode_code !== EModeCode.Disconnected ? 'color: rgb(25,190,107)' : deviceInfo.dock.basic_osd?.drone_in_dock === 1 ? 'color: rgb(25,190,107)' : 'color: red; font-weight: 700;'">
              <!-- DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] -->
              {{ deviceInfo.device ? EModeText[deviceInfo.device?.mode_code] : (deviceInfo.dock.basic_osd?.drone_in_dock
                === 1) ? '舱内关机' : EModeText[EModeCode.Disconnected]
              }}</a-col>
            <a-col span="15">
              <div style="width:100%;padding:0 5px;background-color: #5d5f61;color: #fff;font-size: 10px;">
                {{ deviceInfo.device?.mode_code == 14 || !deviceInfo.device ? 'N/A' : '当前正常' }}</div>
            </a-col>
          </a-row>
          <a-row align="middle" justify="center">
            <a-col span="24">
              <div v-if="deviceInfo.device?.mode_code == 14 || !deviceInfo.device" style="color:#494949;"
                class="flex-display flex-justify-center mt5 mb5">当前设备已关机，无法进行直播</div>
            </a-col>
          </a-row>
          <a-row class="p5" v-if="deviceInfo.device?.mode_code != 14 && deviceInfo.device" align="middle"
            justify="space-between">
            <a-col span="11">
              <a-button :class="[aircrafIndex === 0 ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                size="small" @click="openAircra(0)">
                飞行相机
              </a-button>
            </a-col>
            <a-col span="11">
              <a-button :class="[aircrafIndex === 1 ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                size="small" @click="openAircra(1)">
                M30T相机
              </a-button>
            </a-col>
          </a-row>
          <a-row class="p5" align="middle" justify="space-between">
            <a-col span="24">
              <!-- <a-button v-if="controlStatus != ''" :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
        <a-row class="p5" v-if="showMonitor" justify="center" align="middle">
          <!-- <a-spin :spinning="spinning"> -->
          <Jessibuca v-if="airPortUrl" @timeout="airTimeout" :videoUrl="airPortUrl" width="100%" height="300px" />
          <!-- </a-spin> -->
        </a-row>
        <!--  飞机-->
        <div class="flex-display">
          <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d">
            <a-tooltip :title="osdVisible.model">
              <div style="width: 90%" class="flex-column flex-align-center flex-justify-center">
                <span><a-image :src="M30" :preview="false" /></span>
                <span>{{
                  DEVICE_NAME[`${osdVisible.device_domain}-${osdVisible.device_type}-${osdVisible.device_sub_type}`]
                }}</span>
              </div>
            </a-tooltip>
          </div>
          <div class="osd flex-1">
            <a-row class="mr-20" align="middle">
              <a-col
                span="9"
                :style="
                  deviceInfo.device && deviceInfo.device?.mode_code !== EModeCode.Disconnected
                    ? 'color: rgb(25,190,107)'
                    : deviceInfo.dock.basic_osd?.drone_in_dock === 1
                    ? 'color: rgb(25,190,107)'
                    : 'color: red; font-weight: 700;'
                ">
                <!-- DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] -->
                {{
                  deviceInfo.device
                    ? EModeText[deviceInfo.device?.mode_code]
                    : deviceInfo.dock.basic_osd?.drone_in_dock === 1
                    ? '舱内关机'
                    : EModeText[EModeCode.Disconnected]
                }}</a-col
              >
              <a-col span="15">
                <div style="width: 100%; padding: 0 5px; background-color: #5d5f61; color: #fff; font-size: 10px">
                  {{ deviceInfo.device?.mode_code == 14 || !deviceInfo.device ? 'N/A' : '当前正常' }}
                </div>
              </a-col>
            </a-row>
            <a-row align="middle" justify="center">
              <a-col span="24">
                <div
                  v-if="deviceInfo.device?.mode_code == 14 || !deviceInfo.device"
                  style="color: #494949"
                  class="flex-display flex-justify-center mt5 mb5">
                  当前设备已关机，无法进行直播
                </div>
              </a-col>
            </a-row>
            <a-row
              class="p5"
              v-if="deviceInfo.device?.mode_code != 14 && deviceInfo.device"
              align="middle"
              justify="space-between">
              <a-col span="11">
                <a-button
                  :class="[aircrafIndex === 0 ? 'active-color' : 'unactive-color']"
                  class="width-100"
                  type="primary"
                  size="small"
                  @click="openAircra(0)">
                  飞行相机
                </a-button>
              </a-col>
              <a-col span="11">
                <a-button
                  :class="[aircrafIndex === 1 ? 'active-color' : 'unactive-color']"
                  class="width-100"
                  type="primary"
                  size="small"
                  @click="openAircra(1)">
                  M30T相机
                </a-button>
              </a-col>
            </a-row>
            <a-row class="p5" align="middle" justify="space-between">
              <a-col span="24">
                <!-- <a-button v-if="controlStatus != ''" :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                size="small" @click="openDeviceSetting">
                飞行控制(<DesktopOutlined v-if="controlStatus === 'A'" /> <RobotFilled v-else />{{  controlStatus === 'A' ? 'A控' : 'B控'}})
              </a-button>
@@ -510,23 +599,27 @@
                size="small" @click="openDeviceSetting">
                飞行控制
              </a-button> -->
              <a-button :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                size="small" @click="openDeviceSetting">
                飞行控制
              </a-button>
            </a-col>
          </a-row>
                <a-button
                  :class="[openDroneControl ? 'active-color' : 'unactive-color']"
                  class="width-100"
                  type="primary"
                  size="small"
                  @click="openDeviceSetting">
                  飞行控制
                </a-button>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
      <!-- 飞机直播 -->
      <a-row class="p5" v-if="showAircraft">
        <!-- <a-spin :spinning="spinning"> -->
        <Jessibuca v-if="aircraftUrl" @timeout="flyTimeout" :videoUrl="aircraftUrl" width="100%" height="300px" />
        <!-- </a-spin> -->
      </a-row>
      <!-- 飞机图标信息 -->
      <div class="osd-info flex-1">
        <!-- <a-row align="middle">
        <!-- 飞机直播 -->
        <a-row class="p5" v-if="showAircraft">
          <!-- <a-spin :spinning="spinning"> -->
          <Jessibuca v-if="aircraftUrl" @timeout="flyTimeout" :videoUrl="aircraftUrl" width="100%" height="300px" />
          <!-- </a-spin> -->
        </a-row>
        <!-- 飞机图标信息 -->
        <div class="osd-info flex-1">
          <!-- <a-row align="middle">
            <a-col span="6">
              <a-tooltip title="向上质量">
                <span>
@@ -650,66 +743,81 @@
              </a-tooltip>
            </a-col>
          </a-row> -->
        <a-row align="middle">
          <a-col span="6" class="flex-row flex-align-center flex-justify-start">
            <a-tooltip title="飞行模式">
              <span>
                <ControlOutlined class="fz16" />
              </span>
              <span class="ml5">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="RTK">
              <span>
                <TrademarkOutlined class="fz14" />
              </span>
              <span class="ml5">{{ deviceInfo.device ? deviceInfo.device.position_state.rtk_number : str }}</span>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="无人机电池电量">
              <span>
                <ThunderboltOutlined class="fz14" />
              </span>
              <span class="ml5">{{ deviceInfo.device && deviceInfo.device.battery.capacity_percent !== str ?
                deviceInfo.device?.battery.capacity_percent + ' %' : str }}</span>
            </a-tooltip>
          </a-col>
        </a-row>
        <a-row align="middle" class="mt10">
          <a-col span="6">
            <a-tooltip title="海拔高度">
              <span>ASL</span>
              <span class="ml5">{{ !deviceInfo.device || deviceInfo.device.height === str ? str :
                deviceInfo.device?.height.toFixed(2) + ' m' }}</span>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="高于起飞高度">
              <span>ALT</span>
              <span class="ml5">{{ !deviceInfo.device || deviceInfo.device.elevation === str ? str :
                deviceInfo.device?.elevation.toFixed(2) + ' m' }}</span>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="水平速度">
              <span>H.S</span>
              <span class="ml5">{{ !deviceInfo.device || deviceInfo.device?.horizontal_speed === str ? str :
                deviceInfo.device?.horizontal_speed.toFixed(2) + ' m/s' }}</span>
            </a-tooltip>
          </a-col>
          <a-col span="6">
            <a-tooltip title="垂直速度">
              <span>V.S</span>
              <span class="ml5">{{ !deviceInfo.device || deviceInfo.device.vertical_speed === str ? str :
                deviceInfo.device?.vertical_speed.toFixed(2) + ' m/s' }}</span>
            </a-tooltip>
          </a-col>
        </a-row>
      </div>
      <!-- 飞行控制 -->
      <!-- <div class="fly-control flex-display">
          <a-row align="middle">
            <a-col span="6" class="flex-row flex-align-center flex-justify-start">
              <a-tooltip title="飞行模式">
                <span>
                  <ControlOutlined class="fz16" />
                </span>
                <span class="ml5">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="RTK">
                <span>
                  <TrademarkOutlined class="fz14" />
                </span>
                <span class="ml5">{{ deviceInfo.device ? deviceInfo.device.position_state.rtk_number : str }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="无人机电池电量">
                <span>
                  <ThunderboltOutlined class="fz14" />
                </span>
                <span class="ml5">{{
                  deviceInfo.device && deviceInfo.device.battery.capacity_percent !== str
                    ? deviceInfo.device?.battery.capacity_percent + ' %'
                    : str
                }}</span>
              </a-tooltip>
            </a-col>
          </a-row>
          <a-row align="middle" class="mt10">
            <a-col span="6">
              <a-tooltip title="海拔高度">
                <span>ASL</span>
                <span class="ml5">{{
                  !deviceInfo.device || deviceInfo.device.height === str
                    ? str
                    : deviceInfo.device?.height.toFixed(2) + ' m'
                }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="高于起飞高度">
                <span>ALT</span>
                <span class="ml5">{{
                  !deviceInfo.device || deviceInfo.device.elevation === str
                    ? str
                    : deviceInfo.device?.elevation.toFixed(2) + ' m'
                }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="水平速度">
                <span>H.S</span>
                <span class="ml5">{{
                  !deviceInfo.device || deviceInfo.device?.horizontal_speed === str
                    ? str
                    : deviceInfo.device?.horizontal_speed.toFixed(2) + ' m/s'
                }}</span>
              </a-tooltip>
            </a-col>
            <a-col span="6">
              <a-tooltip title="垂直速度">
                <span>V.S</span>
                <span class="ml5">{{
                  !deviceInfo.device || deviceInfo.device.vertical_speed === str
                    ? str
                    : deviceInfo.device?.vertical_speed.toFixed(2) + ' m/s'
                }}</span>
              </a-tooltip>
            </a-col>
          </a-row>
        </div>
        <!-- 飞行控制 -->
        <!-- <div class="fly-control flex-display">
        <div class="flex-column flex-align-stretch flex-justify-center" style="width: 100px;  background: #2d2d2d;">
            <div style="cursor: pointer;" class="p10 flex-column flex-align-center flex-justify-center">
              <span><a-image :src="M30" :preview="false" /></span>
@@ -717,36 +825,41 @@
            </div>
        </div>
      </div> -->
      <div class="battery-slide" v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0"
        style="border: 1px solid red">
        <div style="background: #535759;" class="width-100"></div>
        <div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%' }"></div>
        <div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%' }"></div>
        <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%' }"></div>
        <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
        <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
          {{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}:
          {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' :
            '' }}{{ deviceInfo.device.battery.remain_flight_time % 60 }}
        <div
          class="battery-slide"
          v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0"
          style="border: 1px solid red">
          <div style="background: #535759" class="width-100"></div>
          <div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%' }"></div>
          <div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%' }"></div>
          <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%' }"></div>
          <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
          <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
            {{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}:
            {{ 10 > deviceInfo.device.battery.remain_flight_time % 60 ? '0' : ''
            }}{{ deviceInfo.device.battery.remain_flight_time % 60 }}
          </div>
        </div>
        <!-- 飞行指令 -->
        <DroneControlPanel
          v-model="openDroneControl"
          :sn="osdVisible.gateway_sn"
          :deviceInfo="deviceInfo"
          :payloads="osdVisible.payloads">
        </DroneControlPanel>
      </div>
      <!-- 飞行指令 -->
      <DroneControlPanel v-model="openDroneControl" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo"
        :payloads="osdVisible.payloads">
      </DroneControlPanel>
      <waylineTool />
      <routeProfile />
    </div>
    <waylineTool />
    <routeProfile />
    <div class="event-wrapper" v-if="false">
      <eventEdit />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
import {
  generateLineContent,
  generatePointContent,
  generatePolyContent
} from '../utils/map-layer-utils'
import { generateLineContent, generatePointContent, generatePolyContent } from '../utils/map-layer-utils'
import { message } from 'ant-design-vue'
import { postElementsReq } from '/@/api/layer'
import { MapDoodleType, MapElementEnum } from '/@/constants/map'
@@ -762,19 +875,49 @@
import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform'
import { deviceTsaUpdate } from '/@/hooks/use-g-map-tsa'
import Jessibuca from '/@/components/Jessibuca/Jessibuca.vue'
import eventEdit from './waylinetool/event-edit.vue'
import { CURRENT_CONFIG as config } from '/@/api/http/config'
import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage'
import {
  DeviceOsd, DeviceStatus, DockOsd, EGear, EModeCode, GatewayOsd, EDockModeCode, EDockModeText, EModeText,
  NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum, DEVICE_NAME
  DeviceOsd,
  DeviceStatus,
  DockOsd,
  EGear,
  EModeCode,
  GatewayOsd,
  EDockModeCode,
  EDockModeText,
  EModeText,
  NetworkStateQualityEnum,
  NetworkStateTypeEnum,
  RainfallEnum,
  DroneInDockEnum,
  DEVICE_NAME,
} from '/@/types/device'
import pin from '/@/assets/icons/pin-2d8cf0.svg'
import M30 from '/@/assets/icons/m30.png'
import {
  BorderOutlined, LineOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
  ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
  FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
  DesktopOutlined, CloseOutlined, ContainerOutlined
  BorderOutlined,
  LineOutlined,
  ControlOutlined,
  TrademarkOutlined,
  ArrowDownOutlined,
  ThunderboltOutlined,
  SignalFilled,
  GlobalOutlined,
  HistoryOutlined,
  CloudUploadOutlined,
  RocketOutlined,
  FieldTimeOutlined,
  CloudOutlined,
  CloudFilled,
  FolderOpenOutlined,
  RobotFilled,
  ArrowUpOutlined,
  CarryOutOutlined,
  DesktopOutlined,
  CloseOutlined,
  ContainerOutlined,
} from '@ant-design/icons-vue'
import { EDeviceTypeName } from '../types'
import DockControlPanel from './g-map/DockControlPanel.vue'
@@ -812,7 +955,8 @@
    RocketOutlined,
    DesktopOutlined,
    waylineTool,
    routeProfile
    routeProfile,
    eventEdit
  },
  name: 'GMap',
  props: {},
@@ -822,8 +966,8 @@
    const useGMapManageHook = useGMapManage()
    const deviceTsaUpdateHook = deviceTsaUpdate()
    interface SelectOption {
      value: any,
      label: string,
      value: any
      label: string
      more?: any
    }
    // 打开飞行控制
@@ -857,7 +1001,7 @@
    const aircrafIndex = ref(-1)
    const state = reactive({
      currentType: '',
      coverIndex: 0
      coverIndex: 0,
    })
    const str: string = '--'
    const deviceInfo = reactive({
@@ -865,9 +1009,7 @@
        capacity_percent: str,
        transmission_signal_quality: str,
      } as GatewayOsd,
      dock: {

      } as DockOsd,
      dock: {} as DockOsd,
      device: {
        gear: -1,
        mode_code: EModeCode.Disconnected,
@@ -881,7 +1023,7 @@
        position_state: {
          gps_number: str,
          is_fixed: 0,
          rtk_number: str
          rtk_number: str,
        },
        battery: {
          capacity_percent: str,
@@ -891,7 +1033,7 @@
        },
        latitude: 0,
        longitude: 0,
      } as DeviceOsd
      } as DeviceOsd,
    })
    const shareId = computed(() => {
      return store.state.layerBaseInfo.share
@@ -910,7 +1052,7 @@
      get: () => store.state.hmsInfo,
      set: (val) => {
        return val
      }
      },
    })

    // 关闭窗口
@@ -960,28 +1102,30 @@
      droneIndex.value = 0
      cameraIndex.value = 0
      await getLiveCapacity({ id: store.state.common.projectId })
        .then(res => {
        .then((res) => {
          if (res.code === 0) {
            if (res.data === null) {
              console.warn('warning: get live capacity is null!!!')
              return
            }
            // 机场数据
            const airport = res.data.find(v => v.sn === sn.value)
            const airport = res.data.find((v) => v.sn === sn.value)
            const temp: Array<SelectOption> = []
            if (airport) {
              temp.push({ label: airport.name, value: airport.sn, more: airport.cameras_list })
              // 设备列表
              droneList.value = temp.filter(v => v.value === sn.value)
              droneList.value = temp.filter((v) => v.value === sn.value)
              // 设备直播处理
              if (droneList.value[0].more && droneList.value[0].more.length > 0) {
                cameraList.value = droneList.value[droneIndex.value].more.map((v: { name: any; index: any; videos_list: any }) => {
                  return {
                    label: v.name,
                    value: v.index,
                    more: v.videos_list
                  }
                })
                cameraList.value = droneList.value[droneIndex.value].more.map(
                  (v: { name: any; index: any; videos_list: any }) => {
                    return {
                      label: v.name,
                      value: v.index,
                      more: v.videos_list,
                    }
                  },
                )
                videoList.value = cameraList.value[cameraIndex.value].more.map((v) => {
                  return {
                    label: v.type,
@@ -996,7 +1140,7 @@
            }
          }
        })
        .catch(error => {
        .catch((error) => {
          showMonitor.value = false
          airPortUrl.value = ''
          message.error(error)
@@ -1006,25 +1150,25 @@
    const loadDroneVideo = async (index: number) => {
      aircraftList.value = []
      await getLiveCapacity({ id: store.state.common.projectId })
        .then(res => {
        .then((res) => {
          if (res.code === 0) {
            if (res.data === null) {
              console.warn('warning: get live capacity is null!!!')
              return
            }
            const drone = res.data.find(v => v.sn === deviceInfo.dock.basic_osd.sub_device?.device_sn)
            const drone = res.data.find((v) => v.sn === deviceInfo.dock.basic_osd.sub_device?.device_sn)
            const temp: Array<SelectOption> = []
            if (drone) {
              temp.push({ label: drone.name, value: drone.sn, more: drone.cameras_list })
            } // 无人机列表
            const airList = temp.filter(v => v.value === deviceInfo.dock.basic_osd?.sub_device?.device_sn)
            const airList = temp.filter((v) => v.value === deviceInfo.dock.basic_osd?.sub_device?.device_sn)
            // 无人机设备处理
            if (airList[0].more && airList[0].more.length > 0) {
              aircraftList.value = airList[0].more.map(v => {
              aircraftList.value = airList[0].more.map((v) => {
                return {
                  label: v.name,
                  value: v.index,
                  vadeosList: v.videos_list
                  vadeosList: v.videos_list,
                }
              })
              aircraSelected.value = aircraftList.value[index].value
@@ -1035,7 +1179,7 @@
            }
          }
        })
        .catch(error => {
        .catch((error) => {
          showAircraft.value = false
          aircrafIndex.value = -1
          message.error(error)
@@ -1061,27 +1205,41 @@
    // 设备开始播放
    const onStart = async () => {
      airPortUrl.value = ''
      const videoId = droneList.value[droneIndex.value].value + '/' + cameraList.value[cameraIndex.value].value + '/' + videoList.value[videoIndex.value].value
      const streamId = droneList.value[droneIndex.value].value + '-' + cameraList.value[cameraIndex.value].value + '-' + videoList.value[videoIndex.value].value
      const videoId =
        droneList.value[droneIndex.value].value +
        '/' +
        cameraList.value[cameraIndex.value].value +
        '/' +
        videoList.value[videoIndex.value].value
      const streamId =
        droneList.value[droneIndex.value].value +
        '-' +
        cameraList.value[cameraIndex.value].value +
        '-' +
        videoList.value[videoIndex.value].value
      const liveURL = config.rtmpURL + streamId
      await startLivestream({
        url: liveURL,
        video_id: videoId,
        url_type: 1,
        video_quality: 0
        video_quality: 0,
      }).then((res) => {
        if (res.code !== 0) return
        airPortUrl.value = res.data.url
      })
        .then(res => {
          if (res.code !== 0) return
          airPortUrl.value = res.data.url
        })
    }
    // 关闭设备直播
    const onClose = async () => {
      const videoId = droneList.value[droneIndex.value].value + '/' + cameraList.value[cameraIndex.value].value + '/' + videoList.value[videoIndex.value].value
      const videoId =
        droneList.value[droneIndex.value].value +
        '/' +
        cameraList.value[cameraIndex.value].value +
        '/' +
        videoList.value[videoIndex.value].value

      stopLivestream({
        video_id: videoId
      }).then(res => {
        video_id: videoId,
      }).then((res) => {
        if (res.code === 0) {
          airPortUrl.value = ''
        }
@@ -1097,26 +1255,27 @@
        url: liveURL,
        video_id: videoId,
        url_type: 1,
        video_quality: 1
        video_quality: 1,
      }).then((res) => {
        if (res.code !== 0) return
        aircraftUrl.value = res.data.url
      })
        .then(res => {
          if (res.code !== 0) return
          aircraftUrl.value = res.data.url
        })
    }
    // 飞行设备关闭
    const closeFly = async () => {
      aircraftList.value.forEach(item => {
      aircraftList.value.forEach((item) => {
        const videoId = deviceInfo.dock.basic_osd?.sub_device?.device_sn + '/' + item.value + '/' + 'normal-0'
        stopLivestream({
          video_id: videoId
        }).then(res => {
          if (res.code === 0) {
            aircraftUrl.value = ''
          }
        }).catch(e => {
          console.log(e, 'errrrrrrrrrrrrrr')
          video_id: videoId,
        })
          .then((res) => {
            if (res.code === 0) {
              aircraftUrl.value = ''
            }
          })
          .catch((e) => {
            console.log(e, 'errrrrrrrrrrrrrr')
          })
      })
      // const videoId = deviceInfo.dock.basic_osd?.sub_device?.device_sn + '/' + aircraSelected.value + '/' + 'normal-0'
      aircraftList.value = []
@@ -1140,8 +1299,9 @@
    }
    // 飞行控制状态
    const controlStatus = computed(() => store.state.common.droneControlSource)
    watch(() => store.state.deviceStatusEvent,
      data => {
    watch(
      () => store.state.deviceStatusEvent,
      (data) => {
        if (Object.keys(data.deviceOnline).length !== 0) {
          // deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
          store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus
@@ -1151,57 +1311,65 @@
        }
      },
      {
        deep: true
      }
        deep: true,
      },
    )
    watch(() => store.state.deviceState, data => {
      if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
        if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') {
          deviceInfo.gateway = data.gatewayInfo[osdVisible.value.gateway_sn]
    watch(
      () => store.state.deviceState,
      (data) => {
        if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
          if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') {
            deviceInfo.gateway = data.gatewayInfo[osdVisible.value.gateway_sn]
          }
        }
      }
      if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
        if (osdVisible.value.visible && osdVisible.value.sn !== '') {
          deviceInfo.device = data.deviceInfo[osdVisible.value.sn]
        if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
          if (osdVisible.value.visible && osdVisible.value.sn !== '') {
            deviceInfo.device = data.deviceInfo[osdVisible.value.sn]
          }
        }
      }

      if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
        if (osdVisible.value.visible && osdVisible.value.is_dock && osdVisible.value.gateway_sn !== '') {
          deviceInfo.dock = data.dockInfo[osdVisible.value.gateway_sn]
          deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd.sub_device?.device_sn ?? osdVisible.value.sn]
        if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
          if (osdVisible.value.visible && osdVisible.value.is_dock && osdVisible.value.gateway_sn !== '') {
            deviceInfo.dock = data.dockInfo[osdVisible.value.gateway_sn]
            deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd.sub_device?.device_sn ?? osdVisible.value.sn]
          }
        }
      }
    }, {
      deep: true,
    })
    watch(() => osdVisible.value, (data, oldData) => {
      showMonitor.value = false
      aircraftUrl.value = ''
      showAircraft.value = false
      aircraftList.value = []
      aircraSelected.value = undefined
      airPortUrl.value = ''
      droneList.value = []
      if (deviceInfo.dock.basic_osd?.mode_code === 2) {
        onCloseControlPanel(oldData.gateway_sn)
      } else {
        setDockControlPanelVisible(false)
      }
    }, {
      deep: true,
    })
      },
      {
        deep: true,
      },
    )
    watch(
      () => osdVisible.value,
      (data, oldData) => {
        showMonitor.value = false
        aircraftUrl.value = ''
        showAircraft.value = false
        aircraftList.value = []
        aircraSelected.value = undefined
        airPortUrl.value = ''
        droneList.value = []
        if (deviceInfo.dock.basic_osd?.mode_code === 2) {
          onCloseControlPanel(oldData.gateway_sn)
        } else {
          setDockControlPanelVisible(false)
        }
      },
      {
        deep: true,
      },
    )
    watch(
      () => store.state.wsEvent,
      newData => {
      (newData) => {
        const useGMapCoverHook = useGMapCover()
        const event = newData
        let exist = false
        if (Object.keys(event.mapElementCreat).length !== 0) {
          console.log(event.mapElementCreat)
          const ele = event.mapElementCreat
          store.state.Layers.forEach(layer => {
            layer.elements.forEach(e => {
          store.state.Layers.forEach((layer) => {
            layer.elements.forEach((e) => {
              if (e.id === ele.id) {
                exist = true
                console.log('true')
@@ -1212,7 +1380,7 @@
            setLayers({
              id: ele.id,
              name: ele.name,
              resource: ele.resource
              resource: ele.resource,
            })

            updateCoordinates('wgs84-gcj02', ele)
@@ -1222,8 +1390,8 @@
              ele.resource.content.properties.color,
              {
                id: ele.id,
                name: ele.name
              }
                name: ele.name,
              },
            )
          }

@@ -1241,29 +1409,34 @@
        }
      },
      {
        deep: true
      }
        deep: true,
      },
    )
    watch(() => openDroneControl.value, (is: boolean) => {
      if (!is) {
        cesium.removeById('rangeEllipse')
        cesium.removeAllDataSource()
        return
      }
      // 设置无人机范围
      // cesium.removeById('rangeEllipse')
      const { dock: { basic_osd } } = deviceInfo
    watch(
      () => openDroneControl.value,
      (is: boolean) => {
        if (!is) {
          cesium.removeById('rangeEllipse')
          cesium.removeAllDataSource()
          return
        }
        // 设置无人机范围
        // cesium.removeById('rangeEllipse')
        const {
          dock: { basic_osd },
        } = deviceInfo

      const ellipseSetting = {
        longitude: basic_osd?.longitude,
        latitude: basic_osd?.latitude
      }
      cesium.addEllipse(ellipseSetting)
      cesium.flyTo(ellipseSetting, 5, 20000)
        const ellipseSetting = {
          longitude: basic_osd?.longitude,
          latitude: basic_osd?.latitude,
        }
        cesium.addEllipse(ellipseSetting)
        cesium.flyTo(ellipseSetting, 5, 20000)

      // 加载图斑
      cesium.loadGeoJson('../src/assets/jsonData/jkj(1).json')
    })
        // 加载图斑
        cesium.loadGeoJson('../src/assets/jsonData/jkj(1).json')
      },
    )

    function draw (type: MapDoodleType, bool: boolean) {
      state.currentType = type
@@ -1272,11 +1445,7 @@
    }

    // dock 控制面板
    const {
      dockControlPanelVisible,
      setDockControlPanelVisible,
      onCloseControlPanel,
    } = useDockControl()
    const { dockControlPanelVisible, setDockControlPanelVisible, onCloseControlPanel } = useDockControl()
    // 关闭设备控制方法
    const closeOperate = (sn: string) => {
      airPortOption.value = false
@@ -1313,8 +1482,8 @@
      const req = getPinPositionResource(obj)
      setLayers(req)
      const coordinates = req.resource.content.geometry.coordinates
      updateCoordinates('gcj02-wgs84', req);
      (req.resource.content.geometry.coordinates as GeojsonCoordinate).push((coordinates as GeojsonCoordinate)[2])
      updateCoordinates('gcj02-wgs84', req)
      ;(req.resource.content.geometry.coordinates as GeojsonCoordinate).push((coordinates as GeojsonCoordinate)[2])
      const result = await postElementsReq(shareId.value, req)
      obj.setExtData({ id: req.id, name: req.name })
      store.state.coverList.push(obj)
@@ -1347,7 +1516,7 @@
      return {
        id,
        name,
        resource
        resource,
      }
    }
    function getPolylineResource (obj: { getPath: () => any; _opts: any }) {
@@ -1357,7 +1526,7 @@
      return {
        id,
        name,
        resource
        resource,
      }
    }
    function getPoygonResource (obj: { getPath: () => any; _opts: any }) {
@@ -1367,7 +1536,7 @@
      return {
        id,
        name,
        resource
        resource,
      }
    }
    function getBaseInfo (obj: { title: any }) {
@@ -1377,11 +1546,11 @@
    }
    function setLayers (resource: PostElementsBody) {
      const layers = store.state.Layers
      const layer = layers.find(item => item.id.includes(shareId.value))
      const layer = layers.find((item) => item.id.includes(shareId.value))
      // layer.id = 'private_layer' + uuidv4()
      // layer?.elements.push(resource)
      if (layer?.elements) {
        ; (layer?.elements as any[]).push(resource)
        ;(layer?.elements as any[]).push(resource)
      }
      console.log('layers', layers)
      store.commit('SET_LAYER_INFO', layers)
@@ -1391,57 +1560,36 @@
      const type = element.resource?.type as number
      if (element.resource) {
        if (MapElementEnum.PIN === type) {
          const coordinates = element.resource?.content.geometry
            .coordinates as GeojsonCoordinate
          const coordinates = element.resource?.content.geometry.coordinates as GeojsonCoordinate
          if (transformType === 'wgs84-gcj02') {
            const transResult = wgs84togcj02(
              coordinates[0],
              coordinates[1]
            ) as GeojsonCoordinate
            const transResult = wgs84togcj02(coordinates[0], coordinates[1]) as GeojsonCoordinate
            element.resource.content.geometry.coordinates = transResult
          } else if (transformType === 'gcj02-wgs84') {
            const transResult = gcj02towgs84(
              coordinates[0],
              coordinates[1]
            ) as GeojsonCoordinate
            const transResult = gcj02towgs84(coordinates[0], coordinates[1]) as GeojsonCoordinate
            element.resource.content.geometry.coordinates = transResult
          }
        } else if (MapElementEnum.LINE === type && geoType === 'LineString') {
          const coordinates = element.resource?.content.geometry
            .coordinates as GeojsonCoordinate[]
          const coordinates = element.resource?.content.geometry.coordinates as GeojsonCoordinate[]
          if (transformType === 'wgs84-gcj02') {
            coordinates.forEach(coordinate => {
              coordinate = wgs84togcj02(
                coordinate[0],
                coordinate[1]
              ) as GeojsonCoordinate
            coordinates.forEach((coordinate) => {
              coordinate = wgs84togcj02(coordinate[0], coordinate[1]) as GeojsonCoordinate
            })
          } else if (transformType === 'gcj02-wgs84') {
            coordinates.forEach(coordinate => {
              coordinate = gcj02towgs84(
                coordinate[0],
                coordinate[1]
              ) as GeojsonCoordinate
            coordinates.forEach((coordinate) => {
              coordinate = gcj02towgs84(coordinate[0], coordinate[1]) as GeojsonCoordinate
            })
          }
          element.resource.content.geometry.coordinates = coordinates
        } else if (MapElementEnum.LINE === type && geoType === 'Polygon') {
          const coordinates = element.resource?.content.geometry
            .coordinates[0] as GeojsonCoordinate[]
          const coordinates = element.resource?.content.geometry.coordinates[0] as GeojsonCoordinate[]

          if (transformType === 'wgs84-gcj02') {
            coordinates.forEach(coordinate => {
              coordinate = wgs84togcj02(
                coordinate[0],
                coordinate[1]
              ) as GeojsonCoordinate
            coordinates.forEach((coordinate) => {
              coordinate = wgs84togcj02(coordinate[0], coordinate[1]) as GeojsonCoordinate
            })
          } else if (transformType === 'gcj02-wgs84') {
            coordinates.forEach(coordinate => {
              coordinate = gcj02towgs84(
                coordinate[0],
                coordinate[1]
              ) as GeojsonCoordinate
            coordinates.forEach((coordinate) => {
              coordinate = gcj02towgs84(coordinate[0], coordinate[1]) as GeojsonCoordinate
            })
          }
          element.resource.content.geometry.coordinates = [coordinates]
@@ -1492,16 +1640,27 @@
      aircrafIndex,
      airPortOption,
      controlStatus,
      convertTimestampToDate
      convertTimestampToDate,
    }
  }
  },
})
</script>

<style lang="scss" scoped>
.g-map-wrapper {

.map-container {
  height: 100%;
  display: flex;
  .event-wrapper {
    width: 350px;
    height: 100%;
  }
}

.g-map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;

  .g-action-panel {
    position: absolute;
@@ -1537,7 +1696,12 @@
    }
  }

  &:deep(.ant-btn > .anticon + span, .ant-btn > span + .anticon, .ant-btn > .anticon + span, .ant-btn > span + .anticon) {
  &:deep(
      .ant-btn > .anticon + span,
      .ant-btn > span + .anticon,
      .ant-btn > .anticon + span,
      .ant-btn > span + .anticon
    ) {
    margin-left: 5px !important;
  }
}
@@ -1582,7 +1746,7 @@
  justify-content: space-between;
}

.osd>div:not(.dock-control-panel) {
.osd > div:not(.dock-control-panel) {
  margin-top: 5px;
  padding-left: 5px;
  margin-bottom: 5px;
@@ -1626,7 +1790,7 @@
  }
}

.battery-slide>div {
.battery-slide > div {
  position: absolute;
  min-height: 2px;
  border-radius: 2px;
@@ -1650,4 +1814,5 @@
    margin-left: 5px;
    font-size: 14px;
  }
}</style>
}
</style>

 src/components/cesiumMap/cesium.vue

@@ -40,7 +40,7 @@
      </div>
    </div>
  </a-popover>
</template>\
</template>

<script setup lang="ts">
import { ref, } from 'vue'

 src/components/waylinetool/event-edit.vue

New file
@@ -0,0 +1,24 @@
<template>
    <div class="event-container">
        <div class="edit-box"></div>
        <div class="map-box"></div>
    </div>
</template>

<script lang="ts" scoped>
</script>

<style lang="scss" scoped>
.event-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgb(35, 35, 35);
    .edit-box,
    .map-box {
        flex: 1;
        border: 1px solid red;
    }
}
</style>

 src/directive/contentMenu.ts

New file
@@ -0,0 +1,36 @@
export const vContentMenu = {
  mounted: (el: Element, binding: { value: any }) => {
    const { value } = binding
    el.addEventListener('contextmenu', (e: any) => {
      e.preventDefault()
      const contentMenu = document.querySelector('.vContentMenu')
      if (contentMenu) {
        contentMenu.remove()
      }
      const menuDom: HTMLUListElement = document.createElement('ul')
      menuDom.setAttribute('class', 'vContentMenu')
      const { x, y } = e
      console.log(x, y)
      menuDom.setAttribute(
        'style',
        `
          width: fit-content;
          background: #595959;
          padding: 7px;
          margin: 0;
          position: fixed;
          top: ${y}px;
          left: ${x}px;
        `,
      )
      el.appendChild(menuDom)
    })

    el.addEventListener('click', () => {
      const contentMenu = document.querySelector('.vContentMenu')
      if (contentMenu) {
        contentMenu.remove()
      }
    })
  },
}

 src/pages/page-web/projects/components/route-edit/components/content-menu.vue

New file
@@ -0,0 +1,109 @@
<template>
  <div class="container" ref="containerRef">
    <slot></slot>
    <!-- <Teleport to="body"> -->
    <div class="context-menu" ref="menuRef" v-show="showMenu">
      <div class="context-menu__item" v-for="(item, index) in props.menu" :key="index" @click="delPointOrEvent(item)">
        {{ item.title }}
      </div>
    </div>
    <!-- </Teleport> -->
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick, onMounted, onUnmounted, defineProps } from 'vue'
import useKmzTsa, { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
import useMapDraw, { kmlEntities as globalEntities, waylinePointsEvent } from '/@/utils/cesium/use-map-draw'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
const { removeAllDataSource, removeAllPoint } = cesiumOperation()
const { appContext }: any = getCurrentInstance()
const global = appContext.config.globalProperties

const mapDraw = useMapDraw('', '', '', global)
const { generateXML } = useKmzTsa()

const props = defineProps<{
  menu: { title: string; value: { index: number; item: any } }[]
}>()

const showMenu = ref<boolean>(false)
const containerRef = ref<HTMLDivElement | null>(null)
const menuRef = ref<HTMLDivElement | any>(null)

// 右键菜单
const handleContextMenu = (event: MouseEvent) => {
  event.preventDefault()
  event.stopPropagation()
  showMenu.value = true
  const { x, y } = event
  nextTick(() => {
    const menuWidth = menuRef.value.offsetWidth
    menuRef.value.style.transform = `translate(${x - menuWidth - 15}px, ${y}px)`
  })
}

// 删除点位
const delPointOrEvent = (menuItem: { value: { index: number } }) => {
  const points = xmlTemplate.value.Folder.Placemark
  const delIndex = menuItem.value.index
  points.splice(delIndex, 1)
  points.forEach((point: { index: { '#text': string | number } }, index: number) => {
    point.index['#text'] = index
  })
  waylinePointsEvent.value.splice(delIndex, 1)
  globalEntities.value.splice(delIndex, 1)
  const xmlStr = generateXML(xmlTemplate.value)
  mapDraw.drawWayline(globalEntities.value, xmlStr)
}

// 关闭菜单
const closeMenu = () => {
  showMenu.value = false
}

// 添加时间
const addMenuEvent = () => {
  containerRef.value?.addEventListener('contextmenu', handleContextMenu)
  window.addEventListener('click', closeMenu, true)
  window.addEventListener('contextmenu', closeMenu, true)
}

// 移除事件
const delMenuEvent = () => {
  containerRef.value?.removeEventListener('contextmenu', handleContextMenu)
  window.removeEventListener('click', closeMenu, true)
  window.removeEventListener('contextmenu', closeMenu, true)
}

onMounted(() => {
  addMenuEvent()
})

onUnmounted(() => {
  delMenuEvent()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}
:deep() {
  .context-menu {
    width: fit-content;
    position: fixed;
    top: 0;
    background-color: #595959;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 999;
    &__item {
      cursor: pointer;
      padding: 5px 10px;
      transition: all 0.2s ease-in-out;
      &:hover {
        background-color: rgb(57, 57, 57);
      }
    }
  }
}
</style>

 src/pages/page-web/projects/components/route-edit/components/setting.vue

@@ -12,13 +12,18 @@
          <div class="photo-setting common">
            <div class="title">拍照设置</div>
            <ul class="select-box">
              <li class="select-item" v-for="item in photoSetting" :key="item.value" :style="{
      '--settingColor': xmlTemplate.Folder.payloadParam?.imageFormat['#text']
        .split(',')
        .includes(item.value)
        ? '#409eff'
        : '#3c3c3c',
    }" @click="selectPhotoSetting(item.value)">
              <li
                class="select-item"
                v-for="item in photoSetting"
                :key="item.value"
                :style="{
                  '--settingColor': xmlTemplate.Folder.payloadParam?.imageFormat['#text']
                    .split(',')
                    .includes(item.value)
                    ? '#409eff'
                    : '#3c3c3c',
                }"
                @click="selectPhotoSetting(item.value)">
                {{ item.title }}照片
              </li>
            </ul>
@@ -51,8 +56,11 @@
                  <li @click="numberControls(true, 100, 'takeOffSecurityHeight')">+100</li>
                  <li @click="numberControls(true, 10, 'takeOffSecurityHeight')">+10</li>
                  <li class="parameter-input">
                    <a-input-number :min="2" :max="1500"
                      v-model:value="xmlTemplate.missionConfig.takeOffSecurityHeight['#text']"></a-input-number>m
                    <a-input-number
                      :min="2"
                      :max="1500"
                      v-model:value="xmlTemplate.missionConfig.takeOffSecurityHeight['#text']"></a-input-number
                    >m
                  </li>
                  <li @click="numberControls(false, 100, 'takeOffSecurityHeight')">-100</li>
                  <li @click="numberControls(false, 10, 'takeOffSecurityHeight')">-10</li>
@@ -62,15 +70,17 @@
          </div>
          <!-- 高度模式 -->
          <div class="height-mode common">
            <a-tooltip placement="right"
            <a-tooltip
              placement="right"
              :title="tipDescriptionEnums[xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']]">
              <div class="title">航线高度模式</div>
              <div class="mode-box">
                <a-radio-group v-model:value="xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']"
                <a-radio-group
                  v-model:value="xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']"
                  button-style="solid">
                  <a-radio-button v-for="item in heightModeSetting" :key="item.value" :value="item.value">{{
      item.title
    }}</a-radio-button>
                    item.title
                  }}</a-radio-button>
                </a-radio-group>
              </div>
              <div class="parameter-tool">
@@ -81,8 +91,11 @@
                  <li @click="numberControls(true, 100, 'globalHeight')">+100</li>
                  <li @click="numberControls(true, 10, 'globalHeight')">+10</li>
                  <li class="parameter-input">
                    <a-input-number :min="0" :max="10000"
                      v-model:value="xmlTemplate.Folder.globalHeight['#text']"></a-input-number>m
                    <a-input-number
                      :min="0"
                      :max="10000"
                      v-model:value="xmlTemplate.Folder.globalHeight['#text']"></a-input-number
                    >m
                  </li>
                  <li @click="numberControls(false, 100, 'globalHeight')">-100</li>
                  <li @click="numberControls(false, 10, 'globalHeight')">-10</li>
@@ -96,7 +109,10 @@
            <div class="speed-box">
              <div class="subtract" @click="numberControls(false, 1, 'autoFlightSpeed')">-</div>
              <div class="text">
                <a-input-number v-model:value="xmlTemplate.Folder.autoFlightSpeed['#text']" :min="1" :max="15"
                <a-input-number
                  v-model:value="xmlTemplate.Folder.autoFlightSpeed['#text']"
                  :min="1"
                  :max="15"
                  class="value">
                </a-input-number>
                m / s
@@ -115,7 +131,7 @@
import { reactive, defineProps } from 'vue'
import { tipDescriptionEnums } from './enums'
import useKmzTsa, { kmlStr, template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
import useMapDraw from '/@/utils/cesium/use-map-draw'
import useMapDraw, { kmlEntities as globalEntities } from '/@/utils/cesium/use-map-draw'
import { getKmlParams } from '/@/utils/cesium/kmz'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { message } from 'ant-design-vue'
@@ -125,6 +141,7 @@

const mapDraw = useMapDraw('', '', '', global)
const { removeAllDataSource, removeAllPoint } = cesiumOperation()
const kmzUtils = useKmzTsa()

interface setting {
  imageFormat: string[]
@@ -168,7 +185,7 @@

// 计算
const numberControls = (isAdd: boolean, computeVal: number, key: string) => {
  let obj = { '#text': 0 }
  let obj = { '#text': '0' }
  if (key === 'takeOffSecurityHeight') {
    obj = xmlTemplate.value.missionConfig.takeOffSecurityHeight
  }
@@ -184,7 +201,17 @@
  } else {
    value -= computeVal
  }
  obj['#text'] = value
  obj['#text'] = value.toString()
  if (key === 'globalHeight') {
    const placemarkArr = xmlTemplate.value.Folder.Placemark
    placemarkArr.forEach((placemark: { useGlobalHeight: { [x: string]: any }; height: { [x: string]: string } }) => {
      if (Reflect.has(placemark, 'useGlobalHeight')) {
        placemark.height['#text'] = value.toString()
      }
    })
    const xmlString = kmzUtils.generateXML(xmlTemplate.value)
    mapDraw.drawWayline(globalEntities.value, xmlString)
  }
}

// 拍照选择
@@ -433,7 +460,6 @@

  :deep() {
    .ant-popover-content {

      .ant-popover-arrow,
      .ant-popover-inner {
        background-color: #101010;

 src/pages/page-web/projects/components/route-edit/index.vue

@@ -57,16 +57,18 @@
            <div class="right">{{ index + 1 }}</div>
          </div>
        </a-tooltip>
        <div class="graph-right">
          <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
            <a-tooltip placement="top">
              <template #title>
                {{ event.name }}
              </template>
              <img :src="event.icon" alt="icon" />
            </a-tooltip>
        <contextMenu :menu="[{ title: '删除航点', value: { index, item } }]">
          <div class="graph-right">
            <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
              <a-tooltip placement="top">
                <template #title>
                  {{ event.name }}
                </template>
                <img :src="event.icon" alt="icon" />
              </a-tooltip>
            </div>
          </div>
        </div>
        </contextMenu>
      </li>
    </ul>
  </div>
@@ -85,6 +87,7 @@
import useMapDraw, { kmlEntities as globalEntities, selectPointIndex as pointIdx } from '/@/utils/cesium/use-map-draw'
import { getKmlParams } from '/@/utils/cesium/kmz'
import { getHaeHeight } from '/@/utils/cesium/mapUtils'
import contextMenu from './components/content-menu.vue'
const store = useMyStore()
const { appContext }: any = getCurrentInstance()
const global = appContext.config.globalProperties
@@ -165,6 +168,16 @@
    })
    waylineDetails.value = details
    tragetPointArr.value = waylinePointsEvent.value
    watch(
      () => waylinePointsEvent.value,
      (val) => {
        tragetPointArr.value = val
      },
      {
        deep: true,
      },
    )

    kmlEntities.value = entities.value
    if (!mouseRightClickEvent) {
      // 添加右键事件
@@ -172,8 +185,6 @@
    }
  })
}

// const createPointOrPolyline = () => {}

// 创建广告牌
const createBillboard = (title: string | number, color: string) => {
@@ -244,9 +255,17 @@
  kmlEntities.value.forEach((entity: Cesium.Entity | any, i: number) => {
    if (i === index) {
      entity.billboard.image = createBillboard(index + 1, '#f3be4f')
      const dashLineEntity: Cesium.Entity | any = getEntityById(`dashLine${i}`)
      dashLineEntity.polyline.material = new Cesium.PolylineDashMaterialProperty({
        color: Cesium.Color.fromBytes(235, 192, 99),
      })
      entity.label.show = true
    } else {
      entity.billboard.image = createBillboard(i + 1, '#61d396')
      const dashLineEntity: Cesium.Entity | any = getEntityById(`dashLine${i}`)
      dashLineEntity.polyline.material = new Cesium.PolylineDashMaterialProperty({
        color: Cesium.Color.WHITE,
      })
      entity.label.show = false
    }
  })
@@ -351,12 +370,11 @@
    // 加入到解析的JSON对象中
    const setting = {
      Point: {
        coordinates: { '#text': `${longitude.toFixed(6)},${latitude.toFixed(6)}` },
        coordinates: { '#text': `${longitude},${latitude}` },
      },
      index: { '#text': points.length },
      height: { '#text': height },
      ellipsoidHeight: { '#text': height - posterHeight },
      isRisky: { '#text': 0 },
      height: { '#text': height },
      useGlobalHeadingParam: { '#text': 1 },
      useGlobalHeight: { '#text': 1 },
      useGlobalSpeed: { '#text': 1 },
@@ -374,9 +392,8 @@
        waypointTurnDampingDist: { '#text': 0.2 },
        waypointTurnMode: { '#text': 'toPointAndStopWithDiscontinuityCurvature' },
      },
      isRisky: { '#text': 0 },
    }
    removeAllDataSource()
    removeAllPoint()
    if (className === 'finally-point') {
      globalEntities.value.push(entity)
      xmlTemplate.value.Folder.Placemark.push(setting)
@@ -409,7 +426,6 @@
    xmlTemplate.value.Folder.Placemark.forEach((placemark: { index: { [x: string]: number } }, index: number) => {
      placemark.index['#text'] = index
    })

    const xmlStr = kmzUtils.generateXML(xmlTemplate.value)
    mapDraw.drawWayline(globalEntities.value, xmlStr)
  })
@@ -623,7 +639,7 @@
      }

      .graph-right {
        width: calc(100% - 40px);
        width: 100%;
        height: 30px;
        border-bottom: 1px solid #4f4f4f;
        display: flex;

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

@@ -16,7 +16,7 @@
                <SelectOutlined />
              </a-button>
            </a-upload>
            <a-button type="text" style="color: white" @click="addWaylineDialog">
            <a-button type="text" style="color: white" @click="addWaylineDialogShow = true">
              <template #icon>
                <PlusOutlined />
              </template>
@@ -130,16 +130,36 @@
      <a-modal
        v-model:visible="addWaylineDialogShow"
        title="新建航线"
        @ok="addWaylineFile"
        @cancel="closeAddWaylineDialog"
        :get-container="() => projectWayLine"
        :cancel-button-props="{ ghost: true }">
        <a-form layout="vertical" :model="waylineFormState" class="create-wayline-content">
        <a-form layout="vertical" :model="waylineFormState" ref="waylineFormRef" class="create-wayline-content">
          <a-form-item label="航线名称">
            <a-input class="wayline-input"></a-input>
            <a-input class="wayline-input" v-model="waylineFormState.fileName" placeholder="请输入航线名称"></a-input>
          </a-form-item>
          <a-form-item label="选择飞行器与负载">
            <a-select></a-select>
            <a-select
              v-model="waylineFormState.droneType"
              :options="droneTypeList"
              class="drone-select"
              :showArrow="false"
              placeholder="请选择无人机型号"
              :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
              @change="droneTypeChange">
            </a-select>
            <div class="drone-box">
              <img :src="getResource('wrj.png')" alt="" srcset="" class="drone-img" />
            </div>
            <div class="payload-select">
              <div class="title"><span></span> 云台I</div>
              <a-select
                v-model="waylineFormState.payloadType"
                :options="dronePayloads"
                allowClear
                placeholder="请选择云台型号"
                :showArrow="false"
                :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" />
            </div>
          </a-form-item>
        </a-form>
@@ -376,18 +396,56 @@
// 新建航线
interface waylineFormState {
  fileName: string
  droneType: string
  payloadType: string
  droneType: string | number | undefined
  payloadType: string | number | undefined
}
const waylineFormRef = ref()
const addWaylineDialogShow = ref<boolean>(false)
const isCreateWayline = ref<boolean>(false)
const waylineFormState = reactive<UnwrapRef<waylineFormState>>({
  fileName: '',
  droneType: '',
  droneType: 67,
  payloadType: '',
})
const addWaylineDialog = () => {
  addWaylineDialogShow.value = true
interface droneType {
  label: string
  value: number
  payloads?: droneType[]
}
const droneTypeList = reactive<droneType[]>([
  {
    label: 'M30系列',
    value: 67,
    payloads: [
      { label: 'M30 相机', value: 0 },
      { label: 'M30T 相机', value: 0 },
    ],
  },
  {
    label: 'Mavic 3 行业系列',
    value: 77,
    payloads: [
      { label: 'Mavic3E 相机', value: 0 },
      { label: 'Mavic3T 相机', value: 0 },
    ],
  },
  {
    label: 'Matrice 3D 系列',
    value: 91,
    payloads: [
      { label: 'M3D 相机', value: 0 },
      { label: 'M3DT 相机', value: 0 },
    ],
  },
])
const dronePayloads = ref<droneType[]>([])
const droneTypeChange = (value: number) => {
  const payloads = droneTypeList.find((s) => s.value === value)?.payloads
  dronePayloads.value = payloads || []
}
const addWaylineFile = () => {}
const closeAddWaylineDialog = () => {
  waylineFormRef.value.resetFields()
}

function onScroll (e: any) {
@@ -631,20 +689,99 @@
    }
    :deep() {
      .ant-form-item-label {
        margin-top: 15px;
        label {
          color: #ffffff73;
        }
      }
      .wayline-input {
        border-color: #4f4f4f;
        margin: 0;
      }
      .ant-select-selector {
        color: #fff;
        background-color: #3c3c3c;
        border: 0;
    }
    .drone-select {
      :deep() {
        .ant-select-selector {
          color: #fff;
          background-color: #3c3c3c;
          border: 0;
          font-weight: bolder;
        }
        .ant-select-dropdown {
          background-color: #3c3c3c;
          color: #fff;
          .ant-empty-description {
            color: #fff;
          }
          .ant-select-item-option {
            color: #fff;
            font-weight: bold;
            &-active {
              background-color: rgb(45, 45, 45);
            }
            &-selected {
              background-color: rgb(45, 45, 45);
              color: #2d8cf0;
            }
          }
        }
      }
      .ant-select-arrow {
    }
    .payload-select {
      margin: 0 auto;
      background-color: black;
      width: 150px;
      font-weight: bold;
      border: 1px solid #4f4f4f;
      border-radius: 3px;
      .title {
        color: #fff;
        text-align: center;
        padding: 5px 0;
        span {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          display: inline-block;
          background-color: orange;
        }
      }
      :deep() {
        .ant-select-selector {
          border: 0;
          box-shadow: none !important;
          background-color: transparent;
          font-weight: bold;
          color: #fff;
          .ant-select-selection-placeholder {
            text-align: center;
          }
          .ant-select-selection-item {
            text-align: center;
          }
        }
        .ant-select-clear {
          color: red;
          background-color: transparent;
        }
        .ant-select-dropdown {
          background-color: #000;
          color: #fff;
          .ant-empty-description {
            color: #fff;
          }
        }
        .ant-select-item-option {
          color: #fff;
          font-weight: bold;
          &-active {
            background-color: rgb(45, 45, 45);
          }
          &-selected {
            background-color: rgb(45, 45, 45);
            color: #2d8cf0;
          }
        }
      }
    }
  }

 src/utils/cesium/kmz.ts

@@ -141,7 +141,13 @@
  const parser = new DOMParser()
  const xmlDoc = parser.parseFromString(xmlStr, 'text/xml')
  const xmlObj = deepParse(xmlDoc.documentElement)
  return xmlObj
  if (Reflect.has(xmlObj, 'Document')) {
    return xmlObj
  } else {
    return {
      Document: xmlObj
    }
  }
}

// json转xml
@@ -151,14 +157,14 @@
 * @param {string} rootName xml根节点名称
 * @return {*} string
 */
export const JSONToXML = (obj: any, rootName?: string | undefined) => {
export const JSONToXML = (obj: any, rootName?: string | undefined, isEnd: boolean = false) => {
  let xml = ''

  const buildXml = (obj: string | any[], rootName?: string | undefined) => {
    let xml = ''
    if (Array.isArray(obj)) {
      obj.forEach((item) => {
        xml += `<${rootName}>${buildXml(item)}</${rootName}>`
        xml += `<${rootName}>${buildXml(item)}</${rootName}>\n`
      })
    } else if (typeof obj === 'object') {
      Object.keys(obj).forEach((key) => {
@@ -168,8 +174,8 @@
          if (key === 'Placemark') {
            xml += `${buildXml(obj[key], key)}`
          } else {
            const str = !noWmpl.includes(key) ? 'wpml:' : ''
            xml += `<${str}${key}>${buildXml(obj[key], key)}</${str}${key}>`
            const str = !noWmpl.includes(key) && isEnd ? 'wpml:' : ''
            xml += `<${str}${key}>${buildXml(obj[key], key)}</${str}${key}>\n`
          }
        }
      })
@@ -179,12 +185,12 @@
    return xml
  }

  const header = isEnd ? '<?xml version="1.0" encoding="UTF-8"?>' : ''
  xml += `
  <?xml version="1.0" encoding="UTF-8"?>
  ${header}
  <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:wpml="http://www.dji.com/wpmz/1.0.5">
    ${buildXml(obj, rootName)}
  </kml>
  `

  return xml
}

 src/utils/cesium/use-kmz-tsa.ts

@@ -1,13 +1,8 @@
import { ref } from 'vue'
import {
  analyzeKmzFile,
  XMLToJSON,
  JSONToXML
} from '/@/utils/cesium/kmz'
import { analyzeKmzFile, XMLToJSON, JSONToXML } from '/@/utils/cesium/kmz'
import _ from 'lodash'
import JSZIP from 'jszip'
import { saveAs } from 'file-saver'

const JsZip = new JSZIP()

const fileAuthor = reactive({
  name: '',
@@ -150,30 +145,132 @@
    template.value = tplXmlJson.Document
    return kmzRes
  }
  const create = () => {

  const create = (waylineBasicInfo) => {
    const author = window.localStorage.getItem('username') || ''
    const createTime = new Date().getTime()
    // 模板
    const template = {
      author,
      createTime,
      updateTime: createTime,
      missionConfig: {
        flyToWaylineMode: 'safely',
        finishAction: 'goHome',
        exitOnRCLost: 'goContinue',
        executeRCLostAction: 'goBack',
        takeOffSecurityHeight: 20,
        takeOffRefPoint: '0.000000,0.000000,0.000000',
        takeOffRefPointAGLHeight: 0,
        globalTransitionalSpeed: 15,
        globalRTHHeight: 80,
        droneInfo: {
          droneEnumValue: 0,
          droneSubEnumValue: 0,
        },
        payloadInfo: {
          payloadEnumValue: 0,
          payloadSubEnumValue: 0,
          payloadPositionIndex: 0,
        },
      },
      Folder: {
        templateType: 'waypoint',
        useGlobalTransitionalSpeed: 0,
        templateId: 0,
        waylineCoordinateSysParam: {
          coordinateMode: 'WGS84',
          heightMode: 'EGM96',
          globalShootHeight: 50,
          positioningType: 'GPS',
          surfaceFollowModeEnable: 1,
          surfaceRelativeHeight: 100,
        },
        autoFlightSpeed: 7,
        gimbalPitchMode: 'usePointSetting',
        globalWaypointHeadingParam: {
          waypointHeadingMode: 'followWayline',
          waypointHeadingAngle: 0,
          waypointPoiPoint: '0.000000,0.000000,0.000000',
          waypointHeadingPathMode: 'followBadArc',
        },
        globalWaypointTurnMode: 'toPointAndStopWithDiscontinuityCurvature',
        globalUseStraightLine: 0,
        Placemark: [],
      },
    }
  }
  const save = () => {
    console.log('存在问题')
    const JsZip = new JSZIP()
    const waylines = waylinesContext(template.value)
    const templateXml = JSONToXML(template.value, '', true)
    const waylinesWpml = JSONToXML(waylines, '', true)
    JsZip.file('wpmz/template.kml', templateXml)
    JsZip.file('wpmz/waylines.wpml', waylinesWpml)
    JsZip.generateAsync({ type: 'blob' }).then((blob) => {
      saveAs(blob, '新建航线.kmz')
    })
  }

  const generateXML = <T>(xmlJson: T) => {
    return JSONToXML(xmlJson)
  }

  const waylinesContext = (templateJson: any) => {
    const waylinesObj: { [key: string]: any } = {
      missionConfig: {
        flyToWaylineMode: null,
        finishAction: null,
        exitOnRCLost: null,
        executeRCLostAction: null,
        takeOffSecurityHeight: null,
        globalTransitionalSpeed: null,
        globalRTHHeight: null,
        droneInfo: null,
        payloadInfo: null,
      },
      Folder: {
        templateId: null,
        executeHeightMode: null,
        waylineId: null,
        autoFlightSpeed: null,
        Placemark: null,
      },
    }
    Object.keys(waylinesObj).forEach((key: string) => {
      if (Object.prototype.toString.call(waylinesObj[key]) === '[object Object]') {
        Object.keys(waylinesObj[key]).forEach((item) => {
          waylinesObj[key][item] = templateJson[key][item]
          if (item === 'executeHeightMode') {
            waylinesObj[key][item] = templateJson[key].waylineCoordinateSysParam.heightMode
          }
          if (item === 'waylineId') {
            waylinesObj[key][item] = templateJson[key].templateId
          }
        })
      } else {
        waylinesObj[key] = templateJson[key]
      }
    })
    return waylinesObj
  }

  // 将wpmz/template.kml解析传来json转换回去，重新复制以便于后续绘制
  watch(() => template.value, (newobj) => {
    const xmlString = JSONToXML(newobj)
    kmlStr.value = xmlString
  }, {
    deep: true
  })
  watch(
    () => template.value,
    (newobj) => {
      const xmlString = JSONToXML(newobj)
      kmlStr.value = xmlString
    },
    {
      deep: true,
    },
  )

  return {
    init,
    create,
    save,
    generateXML
    generateXML,
  }
}


 src/utils/cesium/use-map-draw.ts

@@ -4,8 +4,8 @@
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
import { ref } from 'vue'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
const { addPolyline, getEntityById } = cesiumOperation()
import { XMLToJSON } from './kmz'
const { addPolyline, getEntityById, removeAllDataSource, removeAllPoint } = cesiumOperation()

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
@@ -24,11 +24,16 @@
interface tragetPoint {
  position: Cesium.Cartesian3
  isUseGlobalHeight: boolean
  eventList: eventParmas[]
  eventList: eventParmas[] | null
}

interface action {
  key: string
  name: string
  icon?: string
}
// 对应事件
const eventList = [
const actionList: eventParmas[] = [
  {
    key: 'takePhoto',
    name: '单拍',
@@ -58,11 +63,6 @@
    key: 'zoom',
    name: '变焦',
    icon: getResource('waylinetool/fd.png'),
  },
  {
    key: 'customDirName',
    name: '创建新文件夹',
    icon: getResource('waylinetool/create-file.png'),
  },
  {
    key: 'gimbalRotate',
@@ -120,15 +120,10 @@
  global: any,
) => {
  const ellipsoid = global.$viewer.scene.globe.ellipsoid

  //   kml文件中点位string
  let kmlPoints: string[] | any = []
  //  记录点位信息
  let cartesianArr: Cesium.Cartesian3[] = []

  // 绘制路线
  // 起飞点
  // let btmStartPoint: Cesium.Cartesian3 | null = null
  const drawWayline = async (entities?: Cesium.Entity[], kmlStr?: string) => {
    if (!entities && !kmlStr) {
      dataSource.show = false
@@ -141,36 +136,25 @@
    // 获取所有点位
    let kmlRes = ''
    if (kmlStr) {
      removeAllDataSource()
      removeAllPoint()
      kmlRes = kmlStr
    } else {
      const fileRes = await analyzeKmzFile(fileUrl)
      kmlRes = await fileRes.fileInfoObj['wpmz/template.kml']
    }
    const kmlJson = XMLToJSON(kmlRes)
    // 所有航点
    kmlPoints = getKmlParams(kmlRes, false, {
      name: 'Placemark',
      findRegx: '([\\s\\S]*?)',
      mode: 'g',
    })
    const kmlPoints = kmlJson.Document.Folder.Placemark
    // 起飞点
    let btmStartPoint = null
    // 获取文件中的起飞点
    const startPointRegStr = getKmlParams(kmlRes, true, {
      name: 'takeOffRefPoint',
      findRegx: '([\\s\\S]*?)',
    }) || ['', '0.00000,0.00000,0.00000']
    const startPointPosition = startPointRegStr[1].split(',')
    const startPointPosition = kmlJson.Document.missionConfig.takeOffRefPoint['#text'].split(',')
    btmStartPoint = Cesium.Cartesian3.fromDegrees(
      Number(startPointPosition[1]),
      Number(startPointPosition[0]),
      Number(startPointPosition[2]),
    )
    // 参考起飞点“海拔高度，与“参考起飞点”中的椭球高度对应
    // const posterHeightRegStr = getKmlParams(kmlRes, true, {
    //   name: 'takeOffRefPointAGLHeight',
    //   findRegx: '([\\s\\S]*?)',
    // }) || ['', 0]
    // const posterHeight = Number(posterHeightRegStr[1])
    // 判断是否存在实体集
    if (entities) {
      cartesianArr = []
@@ -186,22 +170,12 @@
      const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
      // 获取当前航点中的值
      const point = kmlPoints[i]
      const getHaeHeight: any = getKmlParams(point, true, {
        name: 'ellipsoidHeight',
        findRegx: '([\\s\\S]*?)',
      })
      const getPointHeight: any = getKmlParams(point, true, {
        name: 'height',
        findRegx: '([\\s\\S]*?)',
      })
      const getHaeHeight = point.ellipsoidHeight['#text']
      const getPointHeight = point.height['#text']
      // 获取是否使用全局高度
      const useGlobalHeightRegStr = getKmlParams(point, true, {
        name: 'useGlobalHeight',
        findRegx: '([\\s\\S]*?)',
      }) || ['', '0']
      const isUseGlobalHeight = Boolean(Number(useGlobalHeightRegStr[1]))
      const AslHeight = Number(getPointHeight[1])
      const HeaHeight = Number(getHaeHeight[1])
      const isUseGlobalHeight = point?.useGlobalHeight ? point.useGlobalHeight['#text'] : 0
      const AslHeight = Number(getPointHeight)
      const HeaHeight = Number(getHaeHeight)
      entity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, AslHeight)
      // 创建广告牌信息
      const title = Number(i + 1) === 1 ? 'S' : i + 1
@@ -226,10 +200,8 @@
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        pixelOffset: new Cesium.Cartesian2(0, -40),
        show: false
        show: false,
      })
      // 广告牌隐藏
      // entity.label._show = false
      // 修改点的信息
      entity.point = new Cesium.PointGraphics({
        pixelSize: 20,
@@ -303,11 +275,9 @@
  //   获取航线详情
  const getWaylineDetails = (kmlStr: string) => {
    // 获取当前航线全局速度
    const getGlobalSpeed: any = getKmlParams(kmlStr, true, {
      name: 'autoFlightSpeed',
      findRegx: '([\\s\\S]*?)',
    })
    const speed = Number(getGlobalSpeed[1])
    const kmlJson = XMLToJSON(kmlStr).Document
    const getGlobalSpeed = kmlJson.Folder.autoFlightSpeed['#text']
    const speed = Number(getGlobalSpeed)
    const lineEntity = getEntityById('entityLine')
    // 获取距离
    const polylineLength: any = getPolylineLength(lineEntity).toFixed(1) || 0
@@ -332,76 +302,28 @@
      const fileRes = await analyzeKmzFile(fileUrl)
      kmlRes = await fileRes.fileInfoObj['wpmz/template.kml']
    }
    // 所有航点
    const points = getKmlParams(kmlRes, false, {
      name: 'Placemark',
      findRegx: '([\\s\\S]*?)',
      mode: 'g',
    })
    points?.forEach((point: string, index: number) => {
      // 当前点位事件
      const pointActions = getKmlParams(point, true, {
        name: 'actionGroup',
        findRegx: '([\\s\\S]*?)',
        mode: 'g',
      })
      const eventArr: eventParmas[] = []
      if (pointActions) {
        const actions =
          getKmlParams(pointActions[0], true, {
            name: 'action',
            findRegx: '([\\s\\S]*?)',
            mode: 'g',
          }) || []
        actions?.forEach((action) => {
          eventList.forEach((event: any) => {
            if (!event.distinguish) {
              action.includes(event.key) && eventArr.push(event)
            } else {
              const pitchAngle =
                getKmlParams(action, true, {
                  name: 'gimbalPitchRotateAngle',
                  findRegx: '([\\s\\S]*?)',
                }) || []
              const yawAngle =
                getKmlParams(action, true, {
                  name: 'gimbalYawRotateAngle',
                  findRegx: '([\\s\\S]*?)',
                }) || []
              if (!!Number(pitchAngle[1]) && event.distinguish === 'pitch') {
                eventArr.push(event)
              }
              if (!!Number(yawAngle[1]) && event.distinguish === 'yaw') {
                eventArr.push(event)
              }
            }
    const kmlJson = XMLToJSON(kmlRes).Document
    const points = kmlJson.Folder?.Placemark
    let takePhotoNum = 0
    points?.forEach((point: { actionGroup: any }, index: number) => {
      if (Reflect.has(point, 'actionGroup')) {
        const action = point.actionGroup.action
        if (Array.isArray(action)) {
          action.forEach((item) => {
            const { actionActuatorFunc } = item
            actionActuatorFunc['#text'] === 'takePhoto' && takePhotoNum++
            const actionObj: eventParmas | any = actionList.find((event) => actionActuatorFunc['#text'] === event.key)
            waylinePointsEvent.value[index].eventList?.push(actionObj)
          })
          // 判断一共有多少个拍照模式
          const actionFunc = getKmlParams(point, true, {
            name: 'actionActuatorFunc',
            findRegx: 'takePhoto',
            mode: 'g',
          })
          if (actionFunc) {
            ;(waylineDetails[3] as any).value++
          }
        })
        waylinePointsEvent.value[index].eventList = eventArr
      }
      // 获取当前是否存在拍照模式
      const pointShootMode = getKmlParams(point, true, {
        name: 'shootType',
        findRegx: '([\\s\\S]*?)',
        mode: 'g',
      })
      if (pointShootMode) {
        pointShootMode.forEach((type: string) => {
          eventList.forEach((item: any) => {
            type.includes(item.key) && eventArr.push(item)
          })
        })
        } else {
          const { actionActuatorFunc } = action
          actionActuatorFunc['#text'] === 'takePhoto' && takePhotoNum++
          const actionObj: eventParmas | any = actionList.find((item) => actionActuatorFunc['#text'] === item.key)
          waylinePointsEvent.value[index].eventList?.push(actionObj)
        }
      }
    })
    waylineDetails[3].value = takePhotoNum
  }
  const clearWaylineData = () => {
    kmlEntities.value = []