无人机操作系统
blame | history | patch | commit | commitdiff | ignore whitespace
guoshilong
2023-11-13 54849757852f6ab40eb17afbd03d1d839b60a38d 
 src/components/GMap.vue


@@ -1,168 +1,236 @@


<template>


  <div class="g-map-wrapper">


    <div id="g-container" :style="{ width: '100%', height: '100%' }" />


    <div


      class="g-action-panle"


      :style="{ right: drawVisible ? '316px' : '16px' }"


    >


    <!-- 地图区域 -->


    <!-- <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>


      <div :class="state.currentType === 'polyline' ? 'g-action-item selection' : 'g-action-item'" @click="draw('polyline', true)">


        <a><LineOutlined :rotate="135" class="fz20"/></a>


      <div :class="state.currentType === 'polyline' ? 'g-action-item selection' : 'g-action-item'"


        @click="draw('polyline', true)">


        <a>


          <LineOutlined :rotate="135" class="fz20" />


        </a>


      </div>


      <div :class="state.currentType === 'polygon' ? 'g-action-item selection' : 'g-action-item'" @click="draw('polygon', true)">


        <a><BorderOutlined class="fz18" /></a>


      <div :class="state.currentType === 'polygon' ? 'g-action-item selection' : 'g-action-item'"


        @click="draw('polygon', true)">


        <a>


          <BorderOutlined class="fz18" />


        </a>


      </div>


      <div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">


        <a style="color: red;"><CloseOutlined /></a>


        <a style="color: red;">


          <CloseOutlined />


        </a>


      </div>


    </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%;">


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


        <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;">


        <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><a-image :src="M30" :preview="false" /></span>


              <span>{{ osdVisible.model }}</span>


            </div>


          </a-tooltip>


        </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)'">{{ EModeCode[deviceInfo.device.mode_code] }}</a-col>


            </a-row>


            <a-row>


              <a-col span="6">


                <a-tooltip title="Signal strength">


                  <span>HD</span>


                  <span class="ml10">{{ 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="ml10">{{ 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="Drone Battery Level">


                  <span><ThunderboltOutlined class="fz14"/></span>


                  <span class="ml10">{{ 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 Fixed">


                <a-col span="6" class="flex-row flex-align-center flex-justify-start">


                  <span>Fixed</span>


                  <span class="ml10 circle" :style="deviceInfo.device.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span>


                </a-col>


          <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 span="6">


                <a-tooltip title="GPS">


                  <span>GPS</span>


                  <span class="ml10">{{ deviceInfo.device.position_state.gps_number }}</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-col span="6">


                <a-tooltip title="RTK">


                  <span><TrademarkOutlined class="fz14"/></span>


                  <span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span>


                </a-tooltip>


              </a-col>


            </a-row>


            <a-row>


              <a-col span="6">


                <a-tooltip title="Flight Mode">


                  <span><ControlOutlined class="fz16" /></span>


                  <span class="ml10">{{ EGear[deviceInfo.device.gear] }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Altitude above sea level">


                  <span>ASL</span>


                  <span class="ml10">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m'}}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Altitude above takeoff level">


                  <span>ALT</span>


                  <span class="ml10">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Distance to Home Point">


                  <span>H</span>


                  <span class="ml10">{{ 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="Horizontal Speed">


                  <span>H.S</span>


                  <span class="ml10">{{ 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="Vertical Speed">


                  <span>V.S</span>


                  <span class="ml10">{{ 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="Wind Speed">


                  <span>W.S</span>


                  <span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / 10).toFixed(2) + ' m/s'}}</span>


                </a-tooltip>


              </a-col>


            </a-row>


            </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="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 }}


          {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' :


            '' }}{{ deviceInfo.device.battery.remain_flight_time % 60 }}


        </div>


      </div>


    </div>


    <!-- 机场OSD -->


    <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12">


      <div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 10%;">


        <span>{{ osdVisible.gateway_callsign }}</span>


        <span><a style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span>


    <!--  && 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>


        <div>


          <a style="color: white;" @click="closeOsdWindow">


            <CloseOutlined />


          </a>


        </div>


      </div>


        <!-- 机场 -->


      <div class ="flex-display" style="border-bottom: 1px solid #515151;">


      <!-- 机场 -->


      <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.model">


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


                <RobotFilled style="font-size: 48px;" />


              </span>


              <span class="mt10">Dock</span>


            </div>


          </a-tooltip>


        </div>


        <div class="osd flex-1" style="flex: 1">


            <a-row>


              <a-col span="16" :style="deviceInfo.dock.basic_osd?.mode_code === EDockModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">


                {{ EDockModeCode[deviceInfo.dock.basic_osd?.mode_code] }}</a-col>


            </a-row>


            <a-row>


              <a-col span="12">


                <a-tooltip title="Accumulated Running Time">


          <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="ml10">


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


@@ -170,46 +238,138 @@


                    <span>{{ Math.floor(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600 % 60) }} s</span>


                  </span>


                </a-tooltip>


              </a-col>


              <a-col span="12">


                <a-tooltip title="Activation time">


              </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="ml10">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString() }}


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


          </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="Network State">


                <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="ml10" >{{ deviceInfo.dock.basic_osd?.network_state?.rate }} kb/s</span>


                  <span class="ml5" >{{ deviceInfo.dock.basic_osd?.network_state?.rate }} kb/s</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="The total number of times the dock has performed missions.">


                <a-tooltip title="设备执行任务总次数">


                  <span><CarryOutOutlined /></span>


                  <span class="ml10" >{{ deviceInfo.dock.work_osd?.job_number }} </span>


                  <span class="ml5" >{{ deviceInfo.dock.work_osd?.job_number }} </span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Media File Remain Upload">


                <a-tooltip title="媒体文件剩余上传">


                  <span><CloudUploadOutlined class="fz14"/></span>


                  <span class="ml10">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span>


                  <span class="ml5">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip>


                  <template #title>


                    <p>total: {{ deviceInfo.dock.basic_osd?.storage?.total }}</p>


                    <p>used: {{ deviceInfo.dock.basic_osd?.storage?.used  }}</p>


                    <p>总共: {{ deviceInfo.dock.basic_osd?.storage?.total }}</p>


                    <p>已使用: {{ deviceInfo.dock.basic_osd?.storage?.used  }}</p>


                  </template>


                  <span><FolderOpenOutlined /></span>


                  <span class="ml10" v-if="deviceInfo.dock.basic_osd?.storage?.total > 0">


                  <span class="ml5" v-if="deviceInfo.dock.basic_osd?.storage?.total > 0">


                    <a-progress type="circle" :width="20" :percent="deviceInfo.dock.basic_osd?.storage?.used * 100/ deviceInfo.dock.basic_osd?.storage?.total"


                      :strokeWidth="20" :showInfo="false" :strokeColor="deviceInfo.dock.basic_osd?.storage?.used * 100 / deviceInfo.dock.basic_osd?.storage?.total > 80 ? 'red' : '#00ee8b' "/>


                  </span>


@@ -218,195 +378,360 @@


            </a-row>


            <a-row>


              <a-col span="6">


                <a-tooltip title="Wind Speed">


                <a-tooltip title="风速">


                  <span>W.S</span>


                  <span class="ml10">{{ (deviceInfo.dock.basic_osd?.wind_speed ?? str) + ' m/s'}}</span>


                  <span class="ml5">{{ (deviceInfo.dock.basic_osd?.wind_speed ?? str) + ' m/s'}}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Rainfall">


                <a-tooltip title="降雨量">


                  <span>🌧</span>


                  <span class="ml10">{{ RainfallEnum[deviceInfo.dock.basic_osd?.rainfall] }}</span>


                  <span class="ml5">{{ RainfallEnum[deviceInfo.dock.basic_osd?.rainfall] }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Environment Temperature">


                <a-tooltip title="环境温度">


                  <span>°C</span>


                  <span class="ml10">{{ deviceInfo.dock.basic_osd?.environment_temperature }}</span>


                  <span class="ml5">{{ deviceInfo.dock.basic_osd?.environment_temperature }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Dock Temperature">


                <a-tooltip title="设备温度">


                  <span>°C</span>


                  <span class="ml10">{{ deviceInfo.dock.basic_osd?.temperature }}</span>


                  <span class="ml5">{{ deviceInfo.dock.basic_osd?.temperature }}</span>


                </a-tooltip>


              </a-col>


            </a-row>


            <a-row>


              <a-col span="6">


                <a-tooltip title="Dock Humidity">


                <a-tooltip title="设备湿度">


                  <span>💦</span>


                  <span class="ml10">{{ deviceInfo.dock.basic_osd?.humidity }}</span>


                  <span class="ml5">{{ deviceInfo.dock.basic_osd?.humidity }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Working Voltage">


                <a-tooltip title="工作电压">


                  <span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 16px; text-align: center; float: left;">V</span>


                  <span class="ml10">{{ (deviceInfo.dock.work_osd?.working_voltage ?? str) + ' mV' }}</span>


                  <span class="ml5">{{ (deviceInfo.dock.work_osd?.working_voltage ?? str) + ' mV' }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Working Current">


                <a-tooltip title="工作电流">


                  <span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 15px; text-align: center; float: left;" >A</span>


                  <span class="ml10">{{ (deviceInfo.dock.work_osd?.working_current ?? str) + ' mA' }}</span>


                  <span class="ml5">{{ (deviceInfo.dock.work_osd?.working_current ?? str) + ' mA' }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Drone in dock">


                <a-tooltip title="设备上的无人机">


                  <span><RocketOutlined /></span>


                  <span class="ml10">{{ DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] }}</span>


                  <span class="ml5">{{ DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] }}</span>


                </a-tooltip>


              </a-col>


            </a-row>


            <a-row class="p5">


              <a-col span="24">


                <a-button type="primary" :disabled="controlPanelVisible" size="small" @click="setControlPanelVisible(true)">


                  设备操作


                </a-button>


              </a-col>


            </a-row>


            <DockControlPanel v-if="controlPanelVisible" :sn="osdVisible.gateway_sn"  :deviceInfo="deviceInfo" @close-control-panel="dockDebugOnOff">


            </DockControlPanel>


            </a-row> -->


          <!-- <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">


                监控


              </a-button>


            </a-col>


            <a-col span="11">


              <a-button :class="[showOption ? 'active-color' : 'unactive-color']" class="width-100" type="primary"


                :disabled="dockControlPanelVisible" size="small" @click="openFlySetting">


                操作


              </a-button>


            </a-col>


          </a-row> -->


          <!-- 机场控制面板 -->


          <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo"


            @close-control-panel="closeOperate">


          </DockControlPanel>


        </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-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>M30</span>


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


              <a-col span="16" :style="!deviceInfo.device || deviceInfo.device?.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">


                {{ !deviceInfo.device ? EModeCode[EModeCode.Disconnected] : EModeCode[deviceInfo.device?.mode_code] }}</a-col>


            </a-row>


            <a-row>


              <a-col span="6">


                <a-tooltip title="Upward Quality">


                  <span><SignalFilled /><ArrowUpOutlined style="font-size: 9px; vertical-align: top;" /></span>


                  <span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.up_quality }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Downward Quality">


                  <span><SignalFilled /><ArrowDownOutlined style="font-size: 9px; vertical-align: top;" /></span>


                  <span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.down_quality }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Drone Battery Level">


                  <span><ThunderboltOutlined class="fz14"/></span>


                  <span class="ml10">{{ deviceInfo.device && deviceInfo.device.battery.capacity_percent !== str ? deviceInfo.device?.battery.capacity_percent + ' %' : str }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip>


                  <template #title>


                    <p>total: {{ deviceInfo.device?.storage?.total }}</p>


                    <p>used: {{ deviceInfo.device?.storage?.used  }}</p>


                  </template>


                  <span><FolderOpenOutlined /></span>


                  <span class="ml10" v-if="deviceInfo.device?.storage?.total > 0">


                    <a-progress type="circle" :width="20" :percent="deviceInfo.device?.storage?.used * 100/ deviceInfo.device?.storage?.total"


                      :strokeWidth="20" :showInfo="false" :strokeColor="deviceInfo.device?.storage?.used * 100 / deviceInfo.device?.storage?.total > 80 ? 'red' : '#00ee8b' "/>


                  </span>


                </a-tooltip>


              </a-col>


            </a-row>


            <a-row>


              <a-tooltip title="RTK Fixed">


                <a-col span="6" class="flex-row flex-align-center flex-justify-start">


                  <span>Fixed</span>


                  <span class="ml10 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="ml10">{{ deviceInfo.device ? deviceInfo.device.position_state.gps_number : str }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="RTK">


                  <span><TrademarkOutlined class="fz14"/></span>


                  <span class="ml10">{{ deviceInfo.device ? deviceInfo.device.position_state.rtk_number : str }}</span>


                </a-tooltip>


              </a-col>


            </a-row>


            <a-row>


              <a-col span="6">


                <a-tooltip title="Flight Mode">


                  <span><ControlOutlined class="fz16" /></span>


                  <span class="ml10">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span>


                </a-tooltip>


              </a-col>


              <a-col span="6">


                <a-tooltip title="Altitude above sea level">


                  <span>ASL</span>


                  <span class="ml10">{{ !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="Altitude above takeoff level">


                  <span>ALT</span>


                  <span class="ml10">{{ !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="Distance to Home Point">


                  <span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 15px; text-align: center;  display: block; float: left;" >H</span>


                  <span class="ml10">{{ !deviceInfo.device || 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="Horizontal Speed">


                  <span>H.S</span>


                  <span class="ml10">{{ !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="Vertical Speed">


                  <span>V.S</span>


                  <span class="ml10">{{ !deviceInfo.device || 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="Wind Speed">


                  <span>W.S</span>


                  <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.wind_speed === str ? str : (deviceInfo.device?.wind_speed / 10).toFixed(2) + ' m/s'}}</span>


                </a-tooltip>


              </a-col>


            </a-row>


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


              <a-button v-else :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary"


                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>


        </div>


      </div>


      <div class="battery-slide" v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0" style="border: 1px solid red">


      <!-- 飞机直播 -->


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


                  <SignalFilled />


                  <ArrowUpOutlined style="font-size: 9px; vertical-align: top;" />


                </span>


                <span class="ml5">{{ deviceInfo.dock.link_osd?.sdr?.up_quality }}</span>


              </a-tooltip>


            </a-col>


            <a-col span="6">


              <a-tooltip title="向下质量">


                <span>


                  <SignalFilled />


                  <ArrowDownOutlined style="font-size: 9px; vertical-align: top;" />


                </span>


                <span class="ml5">{{ deviceInfo.dock.link_osd?.sdr?.down_quality }}</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-col span="6">


              <a-tooltip>


                <template #title>


                  <p>总供: {{ deviceInfo.device?.storage?.total }}</p>


                  <p>已使用: {{ deviceInfo.device?.storage?.used }}</p>


                </template>


                <span>


                  <FolderOpenOutlined />


                </span>


                <span class="ml5" v-if="deviceInfo.device?.storage?.total > 0">


                  <a-progress type="circle" :width="20"


                    :percent="deviceInfo.device?.storage?.used * 100 / deviceInfo.device?.storage?.total" :strokeWidth="20"


                    :showInfo="false"


                    :strokeColor="deviceInfo.device?.storage?.used * 100 / deviceInfo.device?.storage?.total > 80 ? 'red' : '#00ee8b'" />


                </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 ? deviceInfo.device.position_state.gps_number : 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-row>


          <a-row>


            <a-col span="6">


              <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="海拔高度">


                <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


                  style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 15px; text-align: center;  display: block; float: left;">H</span>


                <span class="ml5">{{ !deviceInfo.device || 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 || 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-col span="6">


              <a-tooltip title="风速">


                <span>W.S</span>


                <span class="ml5">{{ !deviceInfo.device || deviceInfo.device.wind_speed === str ? str :


                  (deviceInfo.device?.wind_speed / 10).toFixed(2) + ' m/s' }}</span>


              </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">


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


              <span>一键起飞</span>


            </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="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 }}


          {{ 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>


  </div>


</template>


@@ -418,6 +743,7 @@


  generatePointContent,


  generatePolyContent


} from '../utils/map-layer-utils'


import { message } from 'ant-design-vue'


import { postElementsReq } from '/@/api/layer'


import { MapDoodleType, MapElementEnum } from '/@/constants/map'


import { useGMapManage } from '/@/hooks/use-g-map'


@@ -431,26 +757,34 @@


import { uuidv4 } from '/@/utils/uuid'


import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform'


import { deviceTsaUpdate } from '/@/hooks/use-g-map-tsa'


import Jessibuca from '/@/components/Jessibuca/Jessibuca.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,


  NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum


  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, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,


  BorderOutlined, LineOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,


  ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,


  FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined


  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'


import { useDockControl } from './g-map/useDockControl'




import { useDockControl } from './g-map/use-dock-control'


import DroneControlPanel from './g-map/DroneControlPanel.vue'


import { useConnectMqtt } from './g-map/use-connect-mqtt'


import Cesium from './cesiumMap/cesium.vue'


import { convertTimestampToDate } from '/@/utils/time'


export default defineComponent({


  components: {


    BorderOutlined,


    LineOutlined,


    CloseOutlined,


    ContainerOutlined,


    ControlOutlined,


    TrademarkOutlined,


    ThunderboltOutlined,


@@ -466,8 +800,10 @@


    ArrowUpOutlined,


    ArrowDownOutlined,


    DockControlPanel,


    DroneControlPanel,


    CarryOutOutlined,


    RocketOutlined


    RocketOutlined,


    DesktopOutlined,


  },


  name: 'GMap',


  props: {},


@@ -475,10 +811,40 @@


    const useMouseToolHook = useMouseTool()


    const useGMapManageHook = useGMapManage()


    const deviceTsaUpdateHook = deviceTsaUpdate()


    interface SelectOption {


      value: any,


      label: string,


      more?: any


    }


    // 打开飞行控制


    const openDroneControl = ref(false)


    const root = getRoot()




    // 监控显示


    const showMonitor = ref(false)


    const mouseMode = ref(false)


    const store = useMyStore()


    // 机场直播地址


    const airPortUrl = ref('')


    const airPortOption = ref(false)


    // 设备列表


    const droneList = ref()


    // 设备相机


    const cameraList = ref()


    // 相机设备选择值


    const cameraIndex = ref(0)


    // 设备列表选择值


    const droneIndex = ref(0)


    // 视频列表选择值


    const videoList = ref()


    const videoIndex = ref(0)




    // 飞机视频播放地址


    const aircraftUrl = ref('')


    const showAircraft = ref(false)


    // 飞机视频列表


    const aircraftList = ref([])


    const aircraSelected = ref(undefined)


    const aircrafIndex = ref(-1)


    const state = reactive({


      currentType: '',


      coverIndex: 0


@@ -526,22 +892,251 @@


    const drawVisible = computed(() => {


      return store.state.drawVisible


    })


    const osdVisible = computed(() => {


      return store.state.osdVisible


    const osdVisible = computed(() => JSON.parse(JSON.stringify(store.state.osdVisible)))


    const sn = computed(() => {


      return store.state.hmsInfoDetailSn


    })


    const hmsInfo = computed({


      get: () => store.state.hmsInfo,


      set: (val) => {


        return val


      }


    })




    // 关闭窗口


    const closeOsdWindow = () => {


      store.commit('SET_OSD_VISIBLE_INFO', false)


      showAircraft.value = false


      aircrafIndex.value = -1


      aircraftUrl.value = ''


      showMonitor.value = false


      airPortUrl.value = ''


      airPortOption.value = false


      showMonitor.value = false


    }




    // 打开监控权限


    const openMonitor = () => {


      showMonitor.value = !showMonitor.value


      if (showMonitor.value) {


        loadVideo()


      } else {


        airPortUrl.value = ''


        // onClose()


      }


    }


    // 打开飞机监控


    const openAircra = (type: number) => {


      showAircraft.value = !showAircraft.value


      if (type === aircrafIndex.value) {


        showAircraft.value = false


        aircrafIndex.value = -1


      } else {


        showAircraft.value = true


        aircrafIndex.value = type


      }


      if (showAircraft.value) {


        loadDroneVideo(type)


      } else {


        aircraftUrl.value = ''


        // closeFly()


      }


    }


    // 加载该设备的视频信息


    const loadVideo = async () => {


      droneList.value = []


      cameraList.value = []


      videoList.value = []


      droneIndex.value = 0


      cameraIndex.value = 0


      await getLiveCapacity({ id: store.state.common.projectId })


        .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 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)


              // 设备直播处理


              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


                  }


                })


                videoList.value = cameraList.value[cameraIndex.value].more.map((v) => {


                  return {


                    label: v.type,


                    value: v.index,


                  }


                })


                onStart()


              } else {


                showMonitor.value = false


                message.error('该设备暂无直播设备开启')


              }


            }


          }


        })


        .catch(error => {


          showMonitor.value = false


          airPortUrl.value = ''


          message.error(error)


        })


    }


    // 加载无人机的视频信息


    const loadDroneVideo = async (index: number) => {


      aircraftList.value = []


      await getLiveCapacity({ id: store.state.common.projectId })


        .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 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)


            // 无人机设备处理


            if (airList[0].more && airList[0].more.length > 0) {


              aircraftList.value = airList[0].more.map(v => {


                return {


                  label: v.name,


                  value: v.index,


                  vadeosList: v.videos_list


                }


              })


              aircraSelected.value = aircraftList.value[index].value


              flyOnStart()


            } else {


              showAircraft.value = false


              message.error('该无人机暂无直播设备开启')


            }


          }


        })


        .catch(error => {


          showAircraft.value = false


          aircrafIndex.value = -1


          message.error(error)


        })


    }


    // 机场视频超时说明可能直播被关闭需要重新开启直播


    const airTimeout = () => {


      try {


        onStart()


      } catch (e) {


        airPortUrl.value = ''


        // onClose()


      }


    }


    const flyTimeout = () => {


      try {


        flyOnStart()


      } catch (e) {


        aircraftUrl.value = ''


        // closeFly()


      }


    }


    // 设备开始播放


    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 liveURL = config.rtmpURL + streamId


      await startLivestream({


        url: liveURL,


        video_id: videoId,


        url_type: 1,


        video_quality: 0


      })


        .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




      stopLivestream({


        video_id: videoId


      }).then(res => {


        if (res.code === 0) {


          airPortUrl.value = ''


        }


      })


    }


    // 飞机设备播放


    const flyOnStart = async () => {


      aircraftUrl.value = ''


      const videoId = deviceInfo.dock.basic_osd?.sub_device?.device_sn + '/' + aircraSelected.value + '/' + 'normal-0'


      const streamId = deviceInfo.dock.basic_osd?.sub_device?.device_sn + '-' + aircraSelected.value + '-' + 'normal-0'


      const liveURL = config.rtmpURL + streamId


      await startLivestream({


        url: liveURL,


        video_id: videoId,


        url_type: 1,


        video_quality: 0


      })


        .then(res => {


          if (res.code !== 0) return


          aircraftUrl.value = res.data.url


        })


    }


    // 飞行设备关闭


    const closeFly = async () => {


      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')


        })


      })


      // const videoId = deviceInfo.dock.basic_osd?.sub_device?.device_sn + '/' + aircraSelected.value + '/' + 'normal-0'


      aircraftList.value = []


      aircraSelected.value = ''


    }


    // 打开机场操作


    const openFlySetting = () => {


      openDroneControl.value = false


      airPortOption.value = !airPortOption.value


      if (airPortOption.value) {


        setDockControlPanelVisible(true)


      } else {


        setDockControlPanelVisible(false)


      }


    }


    // 打开无人机操作


    const openDeviceSetting = () => {


      setDockControlPanelVisible(false)


      airPortOption.value = false


      openDroneControl.value = !openDroneControl.value


    }


    // 飞行控制状态


    const controlStatus = computed(() => store.state.common.droneControlSource)


    watch(() => store.state.deviceStatusEvent,


      data => {


        if (Object.keys(data.deviceOnline).length !== 0) {


          deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)


          // deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)


          store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus


        }


        if (Object.keys(data.deviceOffline).length !== 0) {


          deviceTsaUpdateHook.removeMarker(data.deviceOffline.sn)


          if ((data.deviceOffline.sn === osdVisible.value.sn) || (osdVisible.value.is_dock && data.deviceOffline.sn === osdVisible.value.gateway_sn)) {


            osdVisible.value.visible = false


            store.commit('SET_OSD_VISIBLE_INFO', osdVisible)


          }


          store.state.deviceStatusEvent.deviceOffline = {}


        }


      },


@@ -549,31 +1144,42 @@


        deep: true


      }


    )




    watch(() => store.state.deviceState, data => {


      if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {


        deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)


        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]) {


        deviceTsaUpdateHook.moveTo(data.currentSn, data.deviceInfo[data.currentSn].longitude, data.deviceInfo[data.currentSn].latitude)


        if (osdVisible.value.visible && osdVisible.value.sn !== '') {


          deviceInfo.device = data.deviceInfo[osdVisible.value.sn]


        }


      }


      if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {


        deviceTsaUpdateHook.initMarker(EDeviceTypeName.Dock, [EDeviceTypeName.Dock], data.currentSn, data.dockInfo[data.currentSn].basic_osd?.longitude, data.dockInfo[data.currentSn].basic_osd?.latitude)


        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]


          deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd.sub_device?.device_sn ?? osdVisible.value.sn]


        }


      }


    }, {


      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 => {


@@ -634,21 +1240,29 @@


      mouseMode.value = bool


    }




    // dock 控制指令


    // dock 控制面板


    const {


      controlPanelVisible,


      setControlPanelVisible,


      sendDockControlCmd,


      dockDebugOnOff,


      dockControlPanelVisible,


      setDockControlPanelVisible,


      onCloseControlPanel,


    } = useDockControl()


    // 关闭设备控制方法


    const closeOperate = (sn: string) => {


      airPortOption.value = false


      if (deviceInfo.dock.basic_osd?.mode_code === 2) {


        onCloseControlPanel(sn)


      } else {


        setDockControlPanelVisible(false)


      }


    }


    // 连接或断开drc


    useConnectMqtt()




    onMounted(() => {


      const app = getApp()


      useGMapManageHook.globalPropertiesConfig(app)


      setInterval(() => {


        console.info(deviceInfo.dock)


      }, 1000)


      // const app = getApp()


      // useGMapManageHook.globalPropertiesConfig(app)


    })




    function getDrawCallback ({ obj }) {


      switch (state.currentType) {


        case MapDoodleEnum.PIN:


@@ -664,7 +1278,7 @@


          break


      }


    }


    async function postPinPositionResource (obj) {


    async function postPinPositionResource (obj: { setExtData: (arg0: { id: string; name: any }) => void }) {


      const req = getPinPositionResource(obj)


      setLayers(req)


      const coordinates = req.resource.content.geometry.coordinates


@@ -675,7 +1289,7 @@


      store.state.coverList.push(obj)


      // console.log(store.state.coverList)


    }


    async function postPolylineResource (obj) {


    async function postPolylineResource (obj: { setExtData: (arg0: { id: string; name: any }) => void }) {


      const req = getPolylineResource(obj)


      setLayers(req)


      updateCoordinates('gcj02-wgs84', req)


@@ -684,7 +1298,7 @@


      store.state.coverList.push(obj)


      // console.log(store.state.coverList)


    }


    async function postPolygonResource (obj) {


    async function postPolygonResource (obj: { setExtData: (arg0: { id: string; name: any }) => void }) {


      const req = getPoygonResource(obj)


      setLayers(req)


      updateCoordinates('gcj02-wgs84', req)


@@ -694,7 +1308,7 @@


      // console.log(store.state.coverList)


    }




    function getPinPositionResource (obj) {


    function getPinPositionResource (obj: { getPosition: () => any; _originOpts: { title: any } }) {


      const position = obj.getPosition()


      const resource = generatePointContent(position)


      const name = obj._originOpts.title


@@ -705,7 +1319,7 @@


        resource


      }


    }


    function getPolylineResource (obj) {


    function getPolylineResource (obj: { getPath: () => any; _opts: any }) {


      const path = obj.getPath()


      const resource = generateLineContent(path)


      const { name, id } = getBaseInfo(obj._opts)


@@ -715,7 +1329,7 @@


        resource


      }


    }


    function getPoygonResource (obj) {


    function getPoygonResource (obj: { getPath: () => any; _opts: any }) {


      const path = obj.getPath()


      const resource = generatePolyContent(path)


      const { name, id } = getBaseInfo(obj._opts)


@@ -725,7 +1339,7 @@


        resource


      }


    }


    function getBaseInfo (obj) {


    function getBaseInfo (obj: { title: any }) {


      const name = obj.title


      const id = uuidv4()


      return { name, id }


@@ -736,7 +1350,7 @@


      // 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)


@@ -816,28 +1430,53 @@


      EModeCode,


      str,


      EDockModeCode,


      controlPanelVisible,


      dockDebugOnOff,


      setControlPanelVisible,


      EDockModeText,


      DEVICE_NAME,


      EModeText,


      dockControlPanelVisible,


      setDockControlPanelVisible,


      onCloseControlPanel,


      NetworkStateTypeEnum,


      NetworkStateQualityEnum,


      RainfallEnum,


      DroneInDockEnum


      DroneInDockEnum,


      hmsInfo,


      sn,


      showMonitor,


      airPortUrl,


      openMonitor,


      droneIndex,


      openAircra,


      showAircraft,


      aircraftUrl,


      aircraftList,


      aircraSelected,


      closeOperate,


      closeOsdWindow,


      openDroneControl,


      openFlySetting,


      openDeviceSetting,


      airTimeout,


      flyTimeout,


      aircrafIndex,


      airPortOption,


      controlStatus,


      convertTimestampToDate


    }


  }


})


</script>




<style lang="scss" scoped>




.g-map-wrapper {


  height: 100%;


  width: 100%;




  .g-action-panle {


  .g-action-panel {


    position: absolute;


    top: 16px;


    right: 16px;




    .g-action-item {


      width: 28px;


      height: 28px;


@@ -848,36 +1487,74 @@


      text-align: center;


      margin-bottom: 2px;


    }




    .g-action-item:hover {


      border: 1px solid $primary;


      border-radius: 2px;


    }


  }




  .selection {


    border: 1px solid $primary;


    border-radius: 2px;


  }




  // antd button 光晕


  &:deep(.ant-btn){


  &:deep(.ant-btn) {


    &::after {


      display: none;


    }


  }




  &:deep(.ant-btn > .anticon + span, .ant-btn > span + .anticon, .ant-btn > .anticon + span, .ant-btn > span + .anticon) {


    margin-left: 5px !important;


  }


}




.osd-panel {


  position: absolute;


  left: 10px;


  top: 10px;


  width: 480px;


  background: black;


  color: white;


  background-color: #232323;


  color: #fff;


  border-radius: 2px;


  opacity: 0.7;


  // opacity: 0.8;


}


.osd > div {




.overflow {


  width: 100%;


  overflow: hidden;


  background-color: #ff9900;


  // padding: 2px 5px;


  white-space: nowrap;


  text-overflow: ellipsis;


}




.osd-info {


  margin: 15px 10px;


}




.num {


  padding: 0 5px;


  background-color: #ff9900;


  color: #fff;


}




.span5 {


  display: flex;


  align-items: center;


  padding-right: 20px;


}




.op_btn {


  justify-content: space-between;


}




.osd>div:not(.dock-control-panel) {


  margin-top: 5px;


  padding-left: 5px;


  margin-bottom: 5px;


}




.circle {


@@ -890,12 +1567,15 @@


  .capacity-percent {


    background: #00ee8b;


  }




  .return-home {


    background: #ff9f0a;


  }




  .landing {


    background: #f5222d;


  }




  .white-point {


    width: 4px;


    height: 4px;


@@ -903,6 +1583,7 @@


    background: white;


    bottom: -0.5px;


  }




  .battery {


    background: #141414;


    color: #00ee8b;


@@ -913,9 +1594,27 @@


    padding: 0 5px;


  }


}


.battery-slide > div {




.battery-slide>div {


  position: absolute;


  min-height: 2px;


  border-radius: 2px;


}


.task_wrapper {


  display: flex;


  align-items: center;


  font-size: 12px;


  .task_content {


    background-color: #41bbfa;


    padding: 2px 4px;


  }




  .task_content_way {


    background-color: #19be6b;


  }


  .task_title {


    margin-left: 5px;


    font-size: 14px;


  }


}


</style>