|
|
@@ -28,315 +28,279 @@
|
|
|
</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">
|
|
|
- <span>
|
|
|
- <HistoryOutlined />
|
|
|
- </span>
|
|
|
- <span class="ml10">
|
|
|
- <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="12">
|
|
|
- <a-tooltip title="Activation time">
|
|
|
- <span>
|
|
|
- <FieldTimeOutlined />
|
|
|
- </span>
|
|
|
- <span class="ml10">{{ 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">
|
|
|
- <span :style="qualityStyle">
|
|
|
- <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>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="The total number of times the dock has performed missions.">
|
|
|
- <span>
|
|
|
- <CarryOutOutlined />
|
|
|
- </span>
|
|
|
- <span class="ml10">{{ deviceInfo.dock.work_osd?.job_number }} </span>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Media File Remain Upload">
|
|
|
- <span>
|
|
|
- <CloudUploadOutlined class="fz14" />
|
|
|
- </span>
|
|
|
- <span class="ml10">{{ 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>
|
|
|
- </template>
|
|
|
- <span>
|
|
|
- <FolderOpenOutlined />
|
|
|
- </span>
|
|
|
- <span class="ml10" 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>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Wind Speed">
|
|
|
- <span>W.S</span>
|
|
|
- <span class="ml10">{{ (deviceInfo.dock.basic_osd?.wind_speed ?? str) + ' m/s' }}</span>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Rainfall">
|
|
|
- <span>🌧</span>
|
|
|
- <span class="ml10">{{ RainfallEnum[deviceInfo.dock.basic_osd?.rainfall] }}</span>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Environment Temperature">
|
|
|
- <span>°C</span>
|
|
|
- <span class="ml10">{{ deviceInfo.dock.basic_osd?.environment_temperature }}</span>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Dock Temperature">
|
|
|
- <span>°C</span>
|
|
|
- <span class="ml10">{{ deviceInfo.dock.basic_osd?.temperature }}</span>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Dock Humidity">
|
|
|
- <span>💦</span>
|
|
|
- <span class="ml10">{{ deviceInfo.dock.basic_osd?.humidity }}</span>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Working Voltage">
|
|
|
- <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>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Working Current">
|
|
|
- <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>
|
|
|
- </a-tooltip>
|
|
|
- </a-col>
|
|
|
- <a-col span="6">
|
|
|
- <a-tooltip title="Drone in dock">
|
|
|
- <span>
|
|
|
- <RocketOutlined />
|
|
|
- </span>
|
|
|
- <span class="ml10">{{ deviceInfo.dock.basic_osd?.drone_in_dock }}</span>
|
|
|
+ <div class="content-dock-info">
|
|
|
+ <div class="content-dock-info-cell">
|
|
|
+ <div class="content-dock-info-cell-style">
|
|
|
+ {{ getTextByDockModeCode(deviceInfo.dock.basic_osd?.mode_code) }}
|
|
|
+ </div>
|
|
|
+ <div class="content-dock-info-cell-status">
|
|
|
+ <div v-if="deviceInfo.device">
|
|
|
+ 获取机场状态
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ N/A
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-dock-info-cell">
|
|
|
+ <div class="content-dock-info-cell-style">
|
|
|
+ <div v-if="1">
|
|
|
+ <img :src="weatherSrc">
|
|
|
+ 适合飞行
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <img :src="weatherSrc">
|
|
|
+ 不适合飞行
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-dock-info-cell-row">
|
|
|
+ <a-row>
|
|
|
+ <a-col span="8">
|
|
|
+ <a-tooltip title="温度">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <img :src="temperatureSrc">
|
|
|
+ <span>
|
|
|
+ {{ deviceInfo.dock.basic_osd?.temperature }}
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ °C
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="8">
|
|
|
+ <a-tooltip title="网速">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <img :src="networkSrc">
|
|
|
+ <span>
|
|
|
+ {{ deviceInfo.dock.basic_osd?.network_state?.rate }}
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ kb/s
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="8">
|
|
|
+ <a-tooltip title="文件上传">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <img :src="uploadSrc">
|
|
|
+ <div>
|
|
|
+ {{ 0 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-dock-info-cell">
|
|
|
+ <div class="content-dock-info-cell-button">
|
|
|
+ 监控直播
|
|
|
+ </div>
|
|
|
+ <div class="content-dock-info-cell-icon">
|
|
|
+ <a-tooltip title="操作">
|
|
|
+ <img :src="actionSelectedSrc" @click="setDockControlPanelVisible(false)" v-if="dockControlPanelVisible">
|
|
|
+ <img :src="actionSrc" @click="setDockControlPanelVisible(true)" v-else>
|
|
|
</a-tooltip>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row class="p5">
|
|
|
- <a-col span="24">
|
|
|
- <a-button type="primary" :disabled="dockControlPanelVisible" size="small"
|
|
|
- @click="setDockControlPanelVisible(true)">
|
|
|
- 操作
|
|
|
- </a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 飞机-->
|
|
|
<div class="content-aircraft">
|
|
|
- <div class="content-dock-left">
|
|
|
- <div class="content-dock-left-image">
|
|
|
- <a-image :src="M3tdSrc" :preview="false" v-if="osdInfo.model === 'M3TD'" />
|
|
|
- <a-image :src="M30Src" :preview="false" v-else />
|
|
|
+ <div class="content-aircraft-head">
|
|
|
+ <div class="content-aircraft-head-icon">
|
|
|
+ <div class="content-aircraft-head-icon-image">
|
|
|
+ <a-image :src="M3tdSrc" :preview="false" v-if="osdInfo.model === 'M3TD'" />
|
|
|
+ <a-image :src="M30Src" :preview="false" v-else />
|
|
|
+ </div>
|
|
|
+ <a-tooltip :title="osdInfo.model">
|
|
|
+ <div class="content-aircraft-head-icon-text">
|
|
|
+ {{ osdInfo.model }}
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
</div>
|
|
|
- <a-tooltip :title="osdInfo.model">
|
|
|
- <div class="content-dock-left-image-text">
|
|
|
- {{ osdInfo.model }}
|
|
|
+ <div class="content-aircraft-head-right">
|
|
|
+ <div class="content-aircraft-head-right-top">
|
|
|
+ <div class="content-aircraft-head-right-top-style">
|
|
|
+ 舱内关闭
|
|
|
+ </div>
|
|
|
+ <div class="content-aircraft-head-right-top-status">
|
|
|
+ <div v-if="deviceInfo.device">
|
|
|
+ {{ getTextByModeCode(deviceInfo.device.mode_code) }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ N/A
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a-tooltip>
|
|
|
+ <div class="content-aircraft-head-right-bottom">
|
|
|
+ <div class="content-aircraft-head-right-bottom-button">
|
|
|
+ 开启直播
|
|
|
+ </div>
|
|
|
+ <div class="content-aircraft-head-right-bottom-icon">
|
|
|
+ <a-tooltip title="操作">
|
|
|
+ <img :src="aircraftSelectedSrc" @click="setDockControlPanelVisible(false)"
|
|
|
+ v-if="dockControlPanelVisible">
|
|
|
+ <img :src="aircraftSrc" @click="setDockControlPanelVisible(true)" v-else>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-aircraft-head-right-select">
|
|
|
+ <div v-if="state.deviceLiveStatus">
|
|
|
+ <a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头" v-model:value="state.cameraValue">
|
|
|
+ <a-select-option v-for="item in state.cameraList" :key="item.value" :value="item.value"
|
|
|
+ @click="onCameraSelect(item)">
|
|
|
+ {{ item.label }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select style="width: 125px;margin-right: 5px;" placeholder="清晰度" v-model:value="state.clarityValue"
|
|
|
+ @select="onClaritySelect">
|
|
|
+ <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">
|
|
|
+ {{ item.label }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onStart" />
|
|
|
+ <a-button :icon="h(PoweroffOutlined)" @click="onStop" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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>
|
|
|
+ <div class="battery-slide">
|
|
|
+ <div style="background: #535759;" class="width-100"></div>
|
|
|
+ <div class="capacity-percent" :style="{ width: deviceInfo.device?.battery.capacity_percent + '%' }"></div>
|
|
|
+ </div>
|
|
|
+ <LivePlayer :text="state.playerText" :url="state.playerUrl" v-if="state.deviceLiveStatus" />
|
|
|
+ <div class="content-aircraft-info">
|
|
|
+ <a-row style="margin-bottom: 5px;">
|
|
|
<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>
|
|
|
+ <div style="margin-top: -3px;" class="content-aircraft-info-item">
|
|
|
+ <a-tooltip title="遥控器信号">
|
|
|
+ <div style="display: flex;align-items: flex-end;">
|
|
|
+ <img style="margin-right: 5px;" :src="controllerSrc" v-if="controllerSignal > 0">
|
|
|
+ <img style="margin-right: 5px;" :src="controllerErrorSrc" v-else>
|
|
|
+ <div>
|
|
|
+ <img :src="signalThreeSrc" v-if="controllerSignal <= 3">
|
|
|
+ <img :src="signalFourSrc" v-else-if="controllerSignal === 4">
|
|
|
+ <img :src="signalFiveSrc" v-else-if="controllerSignal === 5">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip title="飞行器信号">
|
|
|
+ <div style="display: flex;align-items: flex-end;">
|
|
|
+ <img style="width: 15px;margin-right: 5px;" :src="fourGSrc" v-if="aircraftSignal > 0">
|
|
|
+ <img style="width: 15px;margin-right: 5px;" :src="fourGErrorSrc" v-else>
|
|
|
+ <div>
|
|
|
+ <img :src="signalThreeSrc" v-if="aircraftSignal <= 3">
|
|
|
+ <img :src="signalFourSrc" v-else-if="aircraftSignal === 4">
|
|
|
+ <img :src="signalFiveSrc" v-else-if="aircraftSignal === 5">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
</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>
|
|
|
+ <div class="content-aircraft-info-item">
|
|
|
+ <a-tooltip title="RTK">
|
|
|
+ <div style="display: flex;align-items: center;margin-right: 5px;">
|
|
|
+ <img style="width: 24px;margin-right: 5px;" :src="rtkSrc" v-if="RTK > 0">
|
|
|
+ <img style="width: 24px; margin-right: 5px;" :src="rtkErrorSrc" v-else>
|
|
|
+ <div>
|
|
|
+ {{ RTK }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip title="GPS">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <img style="margin-right: 5px;" :src="gpsSrc" v-if="GPS > 0">
|
|
|
+ <img style="margin-right: 5px;" :src="gpsErrorSrc" v-else>
|
|
|
+ <div>
|
|
|
+ {{ GPS }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
</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 title="电量">
|
|
|
+ <div class="content-aircraft-info-item">
|
|
|
+ <div style="margin-right: 5px;">
|
|
|
+ <img :src="batteryOneSrc" v-if="capacity >= 75">
|
|
|
+ <img :src="batteryTwoSrc" v-else-if="capacity >= 50 && capacity < 75">
|
|
|
+ <img :src="batteryThreeSrc" v-else-if="capacity >= 25 && capacity < 50">
|
|
|
+ <img :src="batteryFourSrc" v-else-if="capacity < 25">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ capacity + '%' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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 title="风向速度">
|
|
|
+ <div class="content-aircraft-info-item">
|
|
|
+ <img style="margin-right: 5px;" :src="windSrc">
|
|
|
+ <div style="font-weight: bold;margin-right: 5px;">
|
|
|
+ W.S
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ windSpeed }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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 title="海拔高度">
|
|
|
+ <div class="content-aircraft-info-item">
|
|
|
+ <div style="font-weight: bold;margin-right: 5px;">
|
|
|
+ ASL
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ ASL }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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 title="离地高度">
|
|
|
+ <div class="content-aircraft-info-item">
|
|
|
+ <div style="font-weight: bold;margin-right: 5px;">
|
|
|
+ AGL
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ AGL }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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 title="水平速度">
|
|
|
+ <div class="content-aircraft-info-item">
|
|
|
+ <div style="font-weight: bold;margin-right: 5px;">
|
|
|
+ H.S
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ HS }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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 title="当前高度">
|
|
|
+ <div class="content-aircraft-info-item">
|
|
|
+ <img style="margin-right: 5px;" :src="homeSrc">
|
|
|
+ <div>
|
|
|
+ {{ homeDistance }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</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">
|
|
|
- <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>
|
|
|
<!-- 机场控制面板 -->
|
|
|
<DockControlPanel v-if="dockControlPanelVisible" :sn="osdInfo.gateway_sn" :deviceInfo="deviceInfo"
|
|
|
@close-control-panel="onCloseControlPanel" />
|
|
|
@@ -346,22 +310,26 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, reactive, onMounted } from 'vue';
|
|
|
+import { h, computed, reactive, onMounted } from 'vue';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
-import {
|
|
|
- CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
|
|
|
- ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
|
|
|
- FieldTimeOutlined, FolderOpenOutlined, ArrowUpOutlined, CarryOutOutlined
|
|
|
-} from '@ant-design/icons-vue'
|
|
|
+import { CloseOutlined, PlaySquareOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
|
|
|
import LivePlayer from '/@/components/livePlayer/index.vue';
|
|
|
import taskSrc from '../icons/info/task.svg';
|
|
|
import dock2Src from '../icons/info/dock2.png';
|
|
|
import M30Src from '../icons/info/m30.png';
|
|
|
import M3tdSrc from '../icons/info/m3td.png';
|
|
|
+import weatherSrc from '../icons/info/weather.svg';
|
|
|
+import temperatureSrc from '../icons/info/temperature.svg';
|
|
|
+import networkSrc from '../icons/info/network.svg';
|
|
|
+import uploadSrc from '../icons/info/upload.svg';
|
|
|
+import actionSrc from '../icons/info/action.svg';
|
|
|
+import actionSelectedSrc from '../icons/info/action_selected.svg';
|
|
|
+import aircraftSrc from '../icons/aircraft.svg';
|
|
|
+import aircraftSelectedSrc from '../icons/aircraft_selected.svg';
|
|
|
import controllerSrc from '../icons/info/controller.svg';
|
|
|
import controllerErrorSrc from '../icons/info/controllerError.svg';
|
|
|
-import networkSrc from '../icons/info/network.svg';
|
|
|
-import networkErrorSrc from '../icons/info/networkError.svg';
|
|
|
+import fourGSrc from '../icons/info/fourG.svg';
|
|
|
+import fourGErrorSrc from '../icons/info/fourGError.svg';
|
|
|
import signalThreeSrc from '../icons/info/signalThree.svg';
|
|
|
import signalFourSrc from '../icons/info/signalFour.svg';
|
|
|
import signalFiveSrc from '../icons/info/signalFive.svg';
|
|
|
@@ -369,21 +337,18 @@ import rtkSrc from '../icons/info/rtk.svg';
|
|
|
import rtkErrorSrc from '../icons/info/rtkError.svg';
|
|
|
import gpsSrc from '../icons/info/gps.svg';
|
|
|
import gpsErrorSrc from '../icons/info/gpsError.svg';
|
|
|
-// import batteryOneSrc from '../icons/batteryOne.svg';
|
|
|
-// import batteryTwoSrc from '../icons/batteryTwo.svg';
|
|
|
-// import batteryThreeSrc from '../icons/batteryThree.svg';
|
|
|
-// import batteryFourSrc from '../icons/batteryFour.svg';
|
|
|
+import batteryOneSrc from '../icons/info/batteryOne.svg';
|
|
|
+import batteryTwoSrc from '../icons/info/batteryTwo.svg';
|
|
|
+import batteryThreeSrc from '../icons/info/batteryThree.svg';
|
|
|
+import batteryFourSrc from '../icons/info/batteryFour.svg';
|
|
|
import windSrc from '../icons/info/wind.svg';
|
|
|
import homeSrc from '../icons/info/home.svg';
|
|
|
import { CURRENT_CONFIG as config } from '/@/api/http/config';
|
|
|
import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage';
|
|
|
import DockControlPanel from '../../g-map/DockControlPanel.vue'
|
|
|
import DroneControlPanel from '../../g-map/DroneControlPanel.vue'
|
|
|
-import {
|
|
|
- DeviceOsd, DeviceStatus, DockOsd, EGear, EModeCode, GatewayOsd, EDockModeCode,
|
|
|
- NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum
|
|
|
-} from '/@/types/device'
|
|
|
import { useDockControl } from '../../g-map/use-dock-control';
|
|
|
+import { getTextByModeCode, getTextByDockModeCode } from '/@/utils/index'
|
|
|
|
|
|
interface Props {
|
|
|
osdInfo: any
|
|
|
@@ -399,18 +364,17 @@ const { dockControlPanelVisible, setDockControlPanelVisible, onCloseControlPanel
|
|
|
|
|
|
// 遥控器信号
|
|
|
const controllerSignal = computed(() => {
|
|
|
- // const info = props.deviceInfo.gateway;
|
|
|
- // if (info && info.wireless_link) {
|
|
|
- // return info.wireless_link['4g_gnd_quality'];
|
|
|
- // } else {
|
|
|
- // return 0;
|
|
|
- // }
|
|
|
+ const info = props.deviceInfo?.gateway;
|
|
|
+ if (info && info.wireless_link) {
|
|
|
+ return info.wireless_link['4g_gnd_quality'];
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
});
|
|
|
-console.log(props.osdInfo, 'dev');
|
|
|
|
|
|
// 飞机信号
|
|
|
const aircraftSignal = computed(() => {
|
|
|
- const info = props.deviceInfo.gateway;
|
|
|
+ const info = props.deviceInfo?.gateway;
|
|
|
if (info && info.wireless_link) {
|
|
|
return info.wireless_link['4g_uav_quality'];
|
|
|
} else {
|
|
|
@@ -418,18 +382,98 @@ const aircraftSignal = computed(() => {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-const str: string = '--'
|
|
|
+const RTK = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ return info.position_state.rtk_number;
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
-const qualityStyle = computed(() => {
|
|
|
- if (props.deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.ETHERNET ||
|
|
|
- (props.deviceInfo.dock.basic_osd?.network_state?.quality || 0) > NetworkStateQualityEnum.FAIR) {
|
|
|
- return 'color: #00ee8b'
|
|
|
+const GPS = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ return info.position_state.gps_number;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
}
|
|
|
- if ((props.deviceInfo.dock.basic_osd?.network_state?.quality || 0) === NetworkStateQualityEnum.FAIR) {
|
|
|
- return 'color: yellow'
|
|
|
+});
|
|
|
+
|
|
|
+// 电池容量
|
|
|
+const capacity = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ return info.battery.capacity_percent;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
}
|
|
|
- return 'color: red'
|
|
|
-})
|
|
|
+});
|
|
|
+
|
|
|
+const windSpeed = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.wind_speed === '--') {
|
|
|
+ return info.wind_speed;
|
|
|
+ } else {
|
|
|
+ return (info.wind_speed / 10).toFixed(2) + ' m/s';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const ASL = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.height === '--') {
|
|
|
+ return info.height;
|
|
|
+ } else {
|
|
|
+ return info.height.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const AGL = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.elevation === '--') {
|
|
|
+ return info.elevation;
|
|
|
+ } else {
|
|
|
+ return info.elevation.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const HS = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.horizontal_speed === '--') {
|
|
|
+ return info.horizontal_speed;
|
|
|
+ } else {
|
|
|
+ return info.horizontal_speed.toFixed(2) + ' m/s';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const homeDistance = computed(() => {
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.home_distance === '--') {
|
|
|
+ return info.home_distance;
|
|
|
+ } else {
|
|
|
+ return info.home_distance.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
interface SelectOption {
|
|
|
value: any,
|
|
|
@@ -614,6 +658,7 @@ const onStop = async () => {
|
|
|
}
|
|
|
|
|
|
&-dock {
|
|
|
+ font-size: 12px;
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid #535759;
|
|
|
position: relative;
|
|
|
@@ -638,59 +683,186 @@ const onStop = async () => {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &-info {
|
|
|
+ flex: 1;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+ &-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0;
|
|
|
+
|
|
|
+ &-style {
|
|
|
+ width: 100px;
|
|
|
+ border-right: 1px solid #535759;
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 2px
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-row {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-status {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 5px;
|
|
|
+ background: #4a4d4e;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-button {
|
|
|
+ flex: 1;
|
|
|
+ height: 24px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ border: 1.5px solid #535759;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ border: 1.5px solid #535759;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&-aircraft {
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #535759;
|
|
|
+ font-size: 12px;
|
|
|
|
|
|
- &-left {
|
|
|
- width: 80px;
|
|
|
- padding: 5px;
|
|
|
- background: #3d3d3d;
|
|
|
+ &-head {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
|
|
|
- &-image {
|
|
|
- width: 80%;
|
|
|
- margin-bottom: 10px;
|
|
|
+ &-icon {
|
|
|
+ width: 80px;
|
|
|
+ padding: 5px;
|
|
|
+ background: #3d3d3d;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &-image {
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-text {
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &-text {
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
+ &-right {
|
|
|
+ flex: 1;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ margin: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &-style {
|
|
|
+ width: 100px;
|
|
|
+ color: #2a994b;
|
|
|
+ border-right: 1px solid #535759;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-status {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 5px;
|
|
|
+ background: #4a4d4e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &-button {
|
|
|
+ flex: 1;
|
|
|
+ height: 24px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ border: 1.5px solid #535759;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ border: 1.5px solid #535759;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-select {
|
|
|
+ margin: 10px 0 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.osd-panel {
|
|
|
- position: absolute;
|
|
|
- margin-left: 10px;
|
|
|
- left: 0;
|
|
|
- top: 10px;
|
|
|
- width: 480px;
|
|
|
- background: #000;
|
|
|
- color: #fff;
|
|
|
- border-radius: 2px;
|
|
|
- background-color: rgba(0, 0, 0, 0.8);
|
|
|
-}
|
|
|
+ &-info {
|
|
|
+ padding: 5px;
|
|
|
|
|
|
-.osd>div:not(.dock-control-panel) {
|
|
|
- margin-top: 5px;
|
|
|
- padding: 5px;
|
|
|
-}
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
-.circle {
|
|
|
- border-radius: 50%;
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
+ img {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.battery-slide {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
.capacity-percent {
|
|
|
background: #00ee8b;
|
|
|
}
|
|
|
@@ -703,28 +875,20 @@ const onStop = async () => {
|
|
|
background: #f5222d;
|
|
|
}
|
|
|
|
|
|
- .white-point {
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- border-radius: 50%;
|
|
|
- background: white;
|
|
|
- bottom: -0.5px;
|
|
|
- }
|
|
|
-
|
|
|
.battery {
|
|
|
- background: #141414;
|
|
|
- color: #00ee8b;
|
|
|
- margin-top: -10px;
|
|
|
- height: 20px;
|
|
|
- width: auto;
|
|
|
- border-left: 1px solid #00ee8b;
|
|
|
- padding: 0 5px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 1px;
|
|
|
+ width: 8px;
|
|
|
+ height: 4px;
|
|
|
+ margin-top: -3px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.battery-slide>div {
|
|
|
- position: absolute;
|
|
|
+ position: relative;
|
|
|
+ margin-top: -2px;
|
|
|
min-height: 2px;
|
|
|
border-radius: 2px;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
</style>
|
李富豪
