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

GuLiMmo

2024-03-18 3e13dd0242140c7189b65e4171efaa9190d1763d

 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>