| | |
| | | <!-- 机巢状态 --> |
| | | <template> |
| | | <CommonTitle title="机巢状态" /> |
| | | <CommonTitle title="机巢状态" @details="detailsFun" /> |
| | | <div :style="{ marginLeft: pxToRem(14) }"> |
| | | <div class="machine-status"> |
| | | <div class="info"> |
| | |
| | | <img src="@/assets/images/signMachineNest/machineRight/distance.png" alt=""> |
| | | <span class="text">飞行距离</span> |
| | | </div> |
| | | <div class="text-data">98<span class="text">km</span></div> |
| | | <div class="text-data">{{ singleTotal.flight_mileage }}<span class="text">km</span></div> |
| | | </div> |
| | | <div class="card"> |
| | | <div> |
| | | <img src="@/assets/images/signMachineNest/machineRight/duration.png" alt=""> |
| | | <span class="text">飞行时长</span> |
| | | </div> |
| | | <div class="text-data">188<span class="text">min</span></div> |
| | | <div class="text-data">{{ singleTotal.hour_count }}<span class="text">h</span></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <MachineTableDetails v-model:show="isShowDetails"/> |
| | | </template> |
| | | |
| | | <script setup> |
| | |
| | | import { EModeCode, EDockModeText, EModeText } from '@/utils/staticData/device'; |
| | | import { getLnglatAltitude } from '@/utils/cesium/mapUtil.js'; |
| | | import { useStore } from 'vuex'; |
| | | import MachineTableDetails from '@/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue'; |
| | | |
| | | const store = useStore(); |
| | | // 获取机巢信息 |
| | | let osdVisible = computed(() => store.state.home.osdVisible); |
| | | // 单个机巢统计数据 |
| | | const singleTotal = computed(() => store.state.home.singleTotal); |
| | | // 是否展示机机巢状态详情 |
| | | let isShowDetails = ref(false); |
| | | |
| | | let str = '--'; |
| | | let drone_charge_state = ref({ |
| | | capacity_percent: '--', |
| | |
| | | } |
| | | return theFinheight.toFixed(1); |
| | | }; |
| | | |
| | | // 详情 |
| | | const detailsFun = () => { |
| | | isShowDetails.value = true; |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | ); |
| | | opacity: 0.85; |
| | | margin: 2px 0 13 0; |
| | | |
| | | |
| | | padding: 8px 0px 20px 18px; |
| | | .info { |
| | | display: flex; |
| | |
| | | color: #FFB26A; |
| | | margin-right: 10px; |
| | | } |
| | | .wb { |
| | | .wb { |
| | | width: 60px; |
| | | height: 20px; |
| | | height: 20px; |
| | | background: rgba(255,106,106,0.2); |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid #FF6A6A; |
| | | color: #FF6A6A; |
| | | } |
| | | } |
| | | |
| | | |
| | | } |
| | | } |
| | | .status { |
| | |
| | | gap: 10px 20px; |
| | | margin-top: 18px; |
| | | .card { |
| | | width: calc(33.33% - 14px); |
| | | width: calc(33.33% - 14px); |
| | | } |
| | | img { |
| | | width: 16px; |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |