| | |
|---|
| | | <a-col :span="1"></a-col> |
|---|
| | | <a-col :span="22"> |
|---|
| | | <div v-if="onlineDocks.data.length === 0" style="height: 150px; color: white;"> |
|---|
| | | <a-empty style="color: #fff;" :image="simpleImage" description="暂无数据" |
|---|
| | | :image-style="{ height: '60px' }" /> |
|---|
| | | <a-empty style="color: #fff;" :image="simpleImage" description="暂无数据" :image-style="{ height: '60px' }" /> |
|---|
| | | </div> |
|---|
| | | <div v-else class="fz12" style="color: white;"> |
|---|
| | | <div v-for="dock in onlineDocks.data" :key="dock.sn" |
|---|
| | |
|---|
| | | <!-- // 机场设备标题 --> |
|---|
| | | <div style="width: 80%; height: 30px; line-height: 30px; font-size: 16px;"> |
|---|
| | | <a-tooltip :title="`${dock.gateway.callsign} - ${dock.callsign ?? 'No Drone'}`"> |
|---|
| | | <div class="text-hidden" style="max-width: 200px;">{{ dock.gateway.callsign}} - {{ dock.callsign ?? 'No Drone'}} |
|---|
| | | <div class="text-hidden" style="max-width: 200px;">{{ dock.gateway.callsign }} - {{ dock.callsign |
|---|
| | | ?? 'No Drone' }} |
|---|
| | | </div> |
|---|
| | | </a-tooltip> |
|---|
| | | </div> |
|---|
| | | <!-- // 机场设备状态 --> |
|---|
| | | <div class="mt5 flex-align-center flex-row flex-justify-between" |
|---|
| | | style="background: #595959;"> |
|---|
| | | <div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;"> |
|---|
| | | <div class="flex-align-center flex-row"> |
|---|
| | | <span class="ml5 mr5"> |
|---|
| | | <RobotOutlined /> |
|---|
| | |
|---|
| | | }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="mr5 flex-align-center flex-row" |
|---|
| | | style="width: 125px; margin-right: 0; height: 18px;"> |
|---|
| | | <div class="mr5 flex-align-center flex-row" style="width: 125px; margin-right: 0; height: 18px;"> |
|---|
| | | <div v-if="hmsInfo[dock.gateway.sn]" class="flex-align-center flex-row"> |
|---|
| | | <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' : |
|---|
| | | <div |
|---|
| | | :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' : |
|---|
| | | hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'" |
|---|
| | | style="width: 18px; height: 16px; text-align: center;"> |
|---|
| | | <span |
|---|
| | | :style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{ |
|---|
| | | <span :style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{ |
|---|
| | | hmsInfo[dock.gateway.sn].length |
|---|
| | | }}</span> |
|---|
| | | <span class="fz10">{{ hmsInfo[dock.gateway.sn].length > 99 ? '+' : |
|---|
| | |
|---|
| | | v-model:visible="hmsVisible[dock.gateway.sn]" |
|---|
| | | @visibleChange="readHms(hmsVisible[dock.gateway.sn], dock.gateway.sn)" |
|---|
| | | :overlayStyle="{ width: '200px', height: '300px' }"> |
|---|
| | | <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution' : |
|---|
| | | <div |
|---|
| | | :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution' : |
|---|
| | | hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'" |
|---|
| | | style="margin-left: 3px; width:107px; height: 16px;"> |
|---|
| | | <span class="word-loop">{{ |
|---|
| | | hmsInfo[dock.gateway.sn][0].message_zh }}</span> |
|---|
| | | </div> |
|---|
| | | <template #content> |
|---|
| | | <a-collapse |
|---|
| | | style="background: black; height: 300px; overflow-y: auto;" |
|---|
| | | :bordered="false" expand-icon-position="right" |
|---|
| | | :accordion="true"> |
|---|
| | | <a-collapse-panel v-for="hms in hmsInfo[dock.gateway.sn]" |
|---|
| | | :key="hms.hms_id" :showArrow="false" |
|---|
| | | <a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false" |
|---|
| | | expand-icon-position="right" :accordion="true"> |
|---|
| | | <a-collapse-panel v-for="hms in hmsInfo[dock.gateway.sn]" :key="hms.hms_id" |
|---|
| | | :showArrow="false" |
|---|
| | | style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px" |
|---|
| | | :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'"> |
|---|
| | | <template #header="{ isActive }"> |
|---|
| | | <div class="flex-row flex-align-center" |
|---|
| | | style="width: 130px;"> |
|---|
| | | <div class="flex-row flex-align-center" style="width: 130px;"> |
|---|
| | | <div style="width: 110px;"> |
|---|
| | | <span class="word-loop">{{ hms.message_zh |
|---|
| | | }}</span> |
|---|
| | |
|---|
| | | <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 " |
|---|
| | | class="flex-row flex-align-center flex-justify-center" |
|---|
| | | :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'"> |
|---|
| | | <DoubleRightOutlined |
|---|
| | | :rotate="isActive ? 90 : 0" /> |
|---|
| | | <DoubleRightOutlined :rotate="isActive ? 90 : 0" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | </a-popover> |
|---|
| | | </div> |
|---|
| | | <div v-else class="width-100" |
|---|
| | | style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div> |
|---|
| | | <div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- // 机场是否启动 --> |
|---|
| | | <div class="mt5 flex-align-center flex-row flex-justify-between" |
|---|
| | | style="background: #595959;"> |
|---|
| | | <div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;"> |
|---|
| | | <div class="flex-row"> |
|---|
| | | <span class="ml5 mr5"> |
|---|
| | | <RocketOutlined /> |
|---|
| | | </span> |
|---|
| | | <div class="font-bold text-hidden" style="max-width: 80px" |
|---|
| | | :style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'"> |
|---|
| | | :style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected || dockInfo[dock.gateway.sn].basic_osd?.drone_in_dock === 1 ? 'color: #00ee8b' : 'color: red;'"> |
|---|
| | | {{ |
|---|
| | | deviceInfo[dock.sn] ? EModeText[deviceInfo[dock.sn].mode_code] : |
|---|
| | | dockInfo[dock.gateway.sn].basic_osd?.drone_in_dock === 1 ? '舱内关机' : |
|---|
| | | EModeText[EModeCode.Disconnected] |
|---|
| | | }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="mr5 flex-align-center flex-row" |
|---|
| | | style="width: 125px; margin-right: 0; height: 18px;"> |
|---|
| | | <div class="mr5 flex-align-center flex-row" style="width: 125px; margin-right: 0; height: 18px;"> |
|---|
| | | <div v-if="hmsInfo[dock.sn]" class="flex-align-center flex-row"> |
|---|
| | | <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' : |
|---|
| | | <div |
|---|
| | | :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' : |
|---|
| | | hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'" |
|---|
| | | style="width: 18px; height: 16px; text-align: center;"> |
|---|
| | | <span |
|---|
| | | :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{ |
|---|
| | | <span :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{ |
|---|
| | | hmsInfo[dock.sn].length |
|---|
| | | }}</span> |
|---|
| | | <span class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : '' |
|---|
| | | }}</span> |
|---|
| | | </div> |
|---|
| | | <a-popover trigger="click" placement="bottom" color="black" |
|---|
| | | v-model:visible="hmsVisible[dock.sn]" |
|---|
| | | @visibleChange="readHms(hmsVisible[dock.sn], dock.sn)" |
|---|
| | | v-model:visible="hmsVisible[dock.sn]" @visibleChange="readHms(hmsVisible[dock.sn], dock.sn)" |
|---|
| | | :overlayStyle="{ width: '200px', height: '300px' }"> |
|---|
| | | <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution' : |
|---|
| | | <div |
|---|
| | | :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution' : |
|---|
| | | hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'" |
|---|
| | | style="margin-left: 3px; width:107px; height: 16px;"> |
|---|
| | | <span class="word-loop">{{ hmsInfo[dock.sn][0].message_zh |
|---|
| | | }}</span> |
|---|
| | | </div> |
|---|
| | | <template #content> |
|---|
| | | <a-collapse |
|---|
| | | style="background: black; height: 300px; overflow-y: auto;" |
|---|
| | | :bordered="false" expand-icon-position="right" |
|---|
| | | :accordion="true"> |
|---|
| | | <a-collapse-panel v-for="hms in hmsInfo[dock.sn]" |
|---|
| | | :key="hms.hms_id" :showArrow="false" |
|---|
| | | <a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false" |
|---|
| | | expand-icon-position="right" :accordion="true"> |
|---|
| | | <a-collapse-panel v-for="hms in hmsInfo[dock.sn]" :key="hms.hms_id" :showArrow="false" |
|---|
| | | style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px" |
|---|
| | | :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'"> |
|---|
| | | <template #header="{ isActive }"> |
|---|
| | | <div class="flex-row flex-align-center" |
|---|
| | | style="width: 130px;"> |
|---|
| | | <div class="flex-row flex-align-center" style="width: 130px;"> |
|---|
| | | <div style="width: 110px;"> |
|---|
| | | <span class="word-loop">{{ hms.message_zh |
|---|
| | | }}</span> |
|---|
| | |
|---|
| | | <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 " |
|---|
| | | class="flex-row flex-align-center flex-justify-center" |
|---|
| | | :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'"> |
|---|
| | | <DoubleRightOutlined |
|---|
| | | :rotate="isActive ? 90 : 0" /> |
|---|
| | | <DoubleRightOutlined :rotate="isActive ? 90 : 0" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | </a-popover> |
|---|
| | | </div> |
|---|
| | | <div v-else class="width-100" |
|---|
| | | style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div> |
|---|
| | | <div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
