| | |
| | | <div :style="{ marginLeft: pxToRem(14) }"> |
| | | <div class="machine-status"> |
| | | <div class="info"> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/wrj.png" alt=""> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/wrj.png" alt="" /> |
| | | <div class="info-right"> |
| | | <!-- <div class="name">{{ osdVisible?.callsign || '--' }}</div> --> |
| | | <div class="name">{{ osdVisible?.nickname || '--' }}</div> |
| | |
| | | <div class="status"> |
| | | <div class="card"> |
| | | <div> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/height.png" alt=""> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/height.png" alt="" /> |
| | | <span class="text">实时真高</span> |
| | | </div> |
| | | <div class="text-data">{{ detailInfo.height || '--' }}<span class="text">米</span></div> |
| | | <div class="text-data"> |
| | | {{ detailInfo.height || '--' }} |
| | | <span class="text">米</span> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/speed.png" alt=""> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/speed.png" alt="" /> |
| | | <span class="text">飞行速度</span> |
| | | </div> |
| | | <div class="text-data">{{ detailInfo.horizontal_speed }}<span class="text">米/秒</span></div> |
| | | <div class="text-data"> |
| | | {{ detailInfo.horizontal_speed }} |
| | | <span class="text">米/秒</span> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/signal.png" alt=""> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/signal.png" alt="" /> |
| | | <span class="text">信号强度</span> |
| | | </div> |
| | | <div class="text-data">{{ detailInfo.quality }}</div> |
| | | </div> |
| | | <div class="card"> |
| | | <div> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/electricity.png" alt=""> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/electricity.png" alt="" /> |
| | | <span class="text">电池电量</span> |
| | | </div> |
| | | <div v-if="drone_charge_state.capacity_percent != 0" class="text-data"> |
| | | {{ drone_charge_state.capacity_percent }}<span class="text">%</span> |
| | | {{ drone_charge_state.capacity_percent }} |
| | | <span class="text">%</span> |
| | | </div> |
| | | <div v-else class="text-data">{{ detailInfo.capacity_percent }}<span class="text">%</span></div> |
| | | <div v-else class="text-data"> |
| | | {{ detailInfo.capacity_percent }} |
| | | <span class="text">%</span> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/distance.png" alt=""> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/distance.png" alt="" /> |
| | | <span class="text">飞行距离</span> |
| | | </div> |
| | | <div class="text-data">{{ singleTotal.flight_mileage }}<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=""> |
| | | <img src="../../../../assets/images/signMachineNest/machineRight/duration.png" alt="" /> |
| | | <span class="text">飞行时长</span> |
| | | </div> |
| | | <div class="text-data">{{ singleTotal.hour_count }}<span class="text">h</span></div> |
| | | <div class="text-data"> |
| | | {{ singleTotal.hour_count }} |
| | | <span class="text">h</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import { EDeviceTypeName } from '@/utils/staticData/enums.js'; |
| | | import { EModeCode, EDockModeText, EModeText } from '@/utils/staticData/device'; |
| | | import { getLnglatAltitude } from '@/utils/cesium/mapUtil.js'; |
| | | import { useStore } from 'vuex'; |
| | | import MachineTableDetails from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue'; |
| | | import CommonTitle from '@/components/CommonTitle.vue' |
| | | import { EDeviceTypeName } from '@/utils/staticData/enums.js' |
| | | import { EModeCode, EDockModeText, EModeText } from '@/utils/staticData/device' |
| | | import { getLnglatAltitude } from '@/utils/cesium/mapUtil.js' |
| | | import { useStore } from 'vuex' |
| | | import MachineTableDetails from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue' |
| | | |
| | | const store = useStore(); |
| | | const store = useStore() |
| | | // 获取机巢信息 |
| | | let osdVisible = ref({});//computed(() => store.state.home.osdVisible); |
| | | const singleUavHome = computed(() => store.state.home.singleUavHome); |
| | | let osdVisible = ref({}) //computed(() => store.state.home.osdVisible); |
| | | const singleUavHome = computed(() => store.state.home.singleUavHome) |
| | | // 单个机巢统计数据 |
| | | const singleTotal = computed(() => store.state.home.singleTotal); |
| | | const singleTotal = computed(() => store.state.home.singleTotal) |
| | | // 是否展示机机巢状态详情 |
| | | let isShowDetails = ref(false); |
| | | let isShowDetails = ref(false) |
| | | |
| | | let str = '--'; |
| | | let str = '--' |
| | | let drone_charge_state = ref({ |
| | | capacity_percent: '--', |
| | | state: 0 |
| | | state: 0, |
| | | }) |
| | | let AircraftStatus = ref(null); |
| | | let AircraftStatus = ref(null) |
| | | let detailInfo = ref({ |
| | | longitude: '--', |
| | | latitude: '--', |
| | |
| | | height: '--', |
| | | remain_flight_time: '--', |
| | | capacity_percent: '--', |
| | | }); |
| | | let quality = ref(['弱', '较弱', '中等', '较强', '强']); |
| | | }) |
| | | let quality = ref(['弱', '较弱', '中等', '较强', '强']) |
| | | let deviceInfo = ref({ |
| | | gateway: { |
| | | capacity_percent: str, |
| | |
| | | latitude: 0, |
| | | longitude: 0, |
| | | }, |
| | | }); |
| | | let mode_code = ref('已断开连接'); |
| | | }) |
| | | let mode_code = ref('已断开连接') |
| | | |
| | | watch(() => store.state.home.osdVisible, (newValue) => { |
| | | osdVisible.value = newValue; |
| | | }); |
| | | watch( |
| | | () => store.state.home.osdVisible, |
| | | newValue => { |
| | | osdVisible.value = newValue |
| | | } |
| | | ) |
| | | |
| | | // 监听实时信息 |
| | | watch( |
| | | () => store.state.home.wsMessage, |
| | | (newValue) => { |
| | | newValue => { |
| | | if (newValue.mode_code === 14) return |
| | | if (Object.keys(newValue).length === 0) return |
| | | detailInfo.value.longitude = newValue?.longitude.toFixed(6) || '--'; |
| | | detailInfo.value.latitude = newValue?.latitude.toFixed(6) || '--'; |
| | | detailInfo.value.longitude = newValue?.longitude.toFixed(6) || '--' |
| | | detailInfo.value.latitude = newValue?.latitude.toFixed(6) || '--' |
| | | // console.log(window.$viewer) |
| | | getLnglatAltitude(Number(detailInfo.value.longitude), Number(detailInfo.value.latitude),window.$viewer).then((res) => { |
| | | const height = newValue?.height - res?.height; |
| | | getLnglatAltitude(Number(detailInfo.value.longitude), Number(detailInfo.value.latitude), window.$viewer).then( |
| | | res => { |
| | | const height = newValue?.height - res?.height |
| | | //针对西安实时高度进行降低 |
| | | const wId = localStorage.getItem('bs_workspace_id'); |
| | | const wId = localStorage.getItem('bs_workspace_id') |
| | | if (wId === 'f47ac10b-58cc-4372-a567-0e02b2c3d479') { |
| | | detailInfo.value.height = reduceHeight(height); |
| | | detailInfo.value.height = reduceHeight(height) |
| | | } else { |
| | | detailInfo.value.height = height.toFixed(1) || '--'; |
| | | detailInfo.value.height = height.toFixed(1) || '--' |
| | | } |
| | | |
| | | detailInfo.value.quality = quality.value[newValue?.position_state.quality - 1] || '--'; |
| | | detailInfo.value.horizontal_speed = newValue?.horizontal_speed.toFixed(1) || '--'; |
| | | detailInfo.value.remain_flight_time = (newValue?.battery.remain_flight_time / 60).toFixed(0) || '--'; |
| | | detailInfo.value.capacity_percent = (newValue?.battery.capacity_percent).toFixed(0) || '--'; |
| | | }); |
| | | detailInfo.value.quality = quality.value[newValue?.position_state.quality - 1] || '--' |
| | | detailInfo.value.horizontal_speed = newValue?.horizontal_speed.toFixed(1) || '--' |
| | | detailInfo.value.remain_flight_time = (newValue?.battery.remain_flight_time / 60).toFixed(0) || '--' |
| | | detailInfo.value.capacity_percent = (newValue?.battery.capacity_percent).toFixed(0) || '--' |
| | | } |
| | | ) |
| | | }, |
| | | { immediate: true, deep: true } |
| | | ); |
| | | ) |
| | | // 获取最新机场状态 |
| | | watch(store.state.home.deviceState, (newValue) => { |
| | | watch( |
| | | store.state.home.deviceState, |
| | | newValue => { |
| | | // console.log('newValue', newValue); |
| | | if (newValue.currentType === EDeviceTypeName.Dock && newValue?.dockInfo[newValue.currentSn]) { |
| | | // 机场状态 |
| | | mode_code.value = EDockModeText[newValue?.dockInfo[newValue.currentSn]?.basic_osd?.mode_code]; |
| | | mode_code.value = EDockModeText[newValue?.dockInfo[newValue.currentSn]?.basic_osd?.mode_code] |
| | | // this.$emit('updateModeCode', mode_code.value); |
| | | // 舱内状态 |
| | | AircraftStatus.value = |
| | | EModeText[newValue.deviceInfo[ |
| | | deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? |
| | | osdVisible.sn |
| | | ]?.mode_code |
| | | ]; |
| | | EModeText[ |
| | | newValue.deviceInfo[deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? osdVisible.sn]?.mode_code |
| | | ] |
| | | // 舱内关机时显示的电量 |
| | | let child_sn = newValue?.dockInfo[newValue.currentSn].basic_osd.sub_device?.device_sn; |
| | | let child_sn = newValue?.dockInfo[newValue.currentSn].basic_osd?.sub_device?.device_sn |
| | | // 飞机在线时取飞机中的电量 |
| | | if(newValue.deviceInfo[child_sn]) { |
| | | drone_charge_state.value = { |
| | | capacity_percent: newValue.deviceInfo[child_sn].battery.capacity_percent, |
| | | state: newValue.deviceInfo[child_sn].battery.landing_power |
| | | state: newValue.deviceInfo[child_sn].battery.landing_power, |
| | | } |
| | | } else{ |
| | | // 遥控器这里拿不到值data.drone_charge_state_new == undefined 会一直报错 |
| | | if (newValue.drone_charge_state_new) { |
| | | drone_charge_state.value = newValue.drone_charge_state_new; |
| | | drone_charge_state.value = newValue.drone_charge_state_new |
| | | } |
| | | } |
| | | if (osdVisible.value.visible && osdVisible.value.is_dock && osdVisible.value.gateway_sn !== '') { |
| | | deviceInfo.value.dock = newValue.dockInfo[osdVisible.value.gateway_sn]; |
| | | deviceInfo.value.dock = newValue.dockInfo[osdVisible.value.gateway_sn] |
| | | deviceInfo.value.device = |
| | | newValue.deviceInfo[deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? |
| | | osdVisible.value.sn |
| | | ]; |
| | | newValue.deviceInfo[deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? osdVisible.value.sn] |
| | | // 设备关机即不显示信息 |
| | | // 兼容遥控器 关闭无人机 mode_code返回的是14 不是undefined |
| | | if ( |
| | | newValue.deviceInfo[ |
| | | deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? |
| | | osdVisible.value.sn |
| | | ]?.mode_code === undefined || newValue.deviceInfo[ |
| | | deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? |
| | | osdVisible.value .sn |
| | | ]?.mode_code == 14 |
| | | newValue.deviceInfo[deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? osdVisible.value.sn] |
| | | ?.mode_code === undefined || |
| | | newValue.deviceInfo[deviceInfo.value.dock.basic_osd?.sub_device?.device_sn ?? osdVisible.value.sn] |
| | | ?.mode_code == 14 |
| | | ) { |
| | | detailInfo.value = { |
| | | longitude: '--', |
| | |
| | | remain_flight_time: '--', |
| | | height: '--', |
| | | capacity_percent: '--', |
| | | }; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | { immediate: true, deep: true } |
| | | ); |
| | | ) |
| | | |
| | | const reduceHeight = (height) => { |
| | | if (!Number(height)) return '--'; |
| | | let theFinheight = 0; |
| | | const reduceHeight = height => { |
| | | if (!Number(height)) return '--' |
| | | let theFinheight = 0 |
| | | if (height < 120) { |
| | | theFinheight = height; |
| | | theFinheight = height |
| | | } else if (height > 220) { |
| | | theFinheight = height - 110; |
| | | theFinheight = height - 110 |
| | | } else if (height > 210) { |
| | | theFinheight = height - 100; |
| | | theFinheight = height - 100 |
| | | } else if (height > 200) { |
| | | theFinheight = height - 90; |
| | | theFinheight = height - 90 |
| | | } else if (height > 190) { |
| | | theFinheight = height - 80; |
| | | theFinheight = height - 80 |
| | | } else if (height > 180) { |
| | | theFinheight = height - 70; |
| | | theFinheight = height - 70 |
| | | } else if (height > 170) { |
| | | theFinheight = height - 60; |
| | | theFinheight = height - 60 |
| | | } else if (height > 160) { |
| | | theFinheight = height - 50; |
| | | theFinheight = height - 50 |
| | | } else if (height > 150) { |
| | | theFinheight = height - 40; |
| | | theFinheight = height - 40 |
| | | } else if (height > 140) { |
| | | theFinheight = height - 30; |
| | | theFinheight = height - 30 |
| | | } else if (height > 130) { |
| | | theFinheight = height - 20; |
| | | theFinheight = height - 20 |
| | | } else if (height > 120) { |
| | | theFinheight = height - 10; |
| | | theFinheight = height - 10 |
| | | } |
| | | return theFinheight.toFixed(1); |
| | | }; |
| | | return theFinheight.toFixed(1) |
| | | } |
| | | |
| | | // 详情 |
| | | const detailsFun = () => { |
| | | isShowDetails.value = true; |
| | | }; |
| | | isShowDetails.value = true |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .machine-status { |
| | | width: 390px; |
| | | height: 230px; |
| | | background: linear-gradient( |
| | | 270deg, |
| | | #1f3e7a 0%, |
| | | rgba(31, 62, 122, 0.35) 79%, |
| | | rgba(31, 62, 122, 0) 100% |
| | | ); |
| | | background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%); |
| | | opacity: 0.85; |
| | | margin: 2px 0 13 0; |
| | | |
| | |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | font-size: 24px; |
| | | color: #0BE5F5; |
| | | color: #0be5f5; |
| | | line-height: 28px; |
| | | overflow: hidden; // 添加溢出隐藏 |
| | | text-overflow: ellipsis; // 显示省略号 |
| | |
| | | .wz { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-size: 14px; |
| | | color: #FFFFFF; |
| | | color: #ffffff; |
| | | line-height: 16px; |
| | | .left { |
| | | width: 70px; |
| | |
| | | line-height: 20px; |
| | | background: rgba(255,178,106,0.2); |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid #FFB26A; |
| | | color: #FFB26A; |
| | | border: 1px solid #ffb26a; |
| | | color: #ffb26a; |
| | | margin-right: 10px; |
| | | } |
| | | .other { |
| | | border: 1px solid #8EFFAC; |
| | | color: #8EFFAC; |
| | | border: 1px solid #8effac; |
| | | color: #8effac; |
| | | } |
| | | .wb { |
| | | width: 60px; |
| | | height: 20px; |
| | | background: rgba(255,106,106,0.2); |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid #FF6A6A; |
| | | color: #FF6A6A; |
| | | border: 1px solid #ff6a6a; |
| | | color: #ff6a6a; |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | .status { |
| | |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #FFFFFF; |
| | | color: #ffffff; |
| | | line-height: 16px; |
| | | } |
| | | .text-data { |
| | |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | font-size: 18px; |
| | | color: #0BE5F5; |
| | | color: #0be5f5; |
| | | line-height: 21px; |
| | | } |
| | | } |