| src/components/GMap.vue | ●●●●● patch | view | raw | blame | history | |
| src/pages/page-web/projects/tsa.vue | ●●●●● patch | view | raw | blame | history | |
| src/types/device.ts | ●●●●● patch | view | raw | blame | history | |
| src/utils/time.ts | ●●●●● patch | view | raw | blame | history |
src/components/GMap.vue
@@ -113,13 +113,15 @@ <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> <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> <span class="ml5">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + 'm' }}</span> </a-tooltip> </a-col> <a-col span="6"> @@ -148,8 +150,7 @@ <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> <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> @@ -171,17 +172,33 @@ <!-- 机场OSD --> <!-- && osdVisible.is_dock --> <div class="osd-panel fz12" v-if="osdVisible.visible"> <div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" <div class="fz16 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="closeOsdWindow"> <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"> <div class="task_status"> <ContainerOutlined /> <span>待执行</span> </div> <div class="task_info">{{convertTimestampToDate(osdVisible.latest_wayline_job.begin_time)}}</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></span> </a> </div> </div> <!-- 机场 --> <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;" /> @@ -436,7 +453,8 @@ <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>{{ DEVICE_NAME[`${osdVisible.device_domain}-${osdVisible.device_type}-${osdVisible.device_sub_type}`] }}</span> <span>{{ DEVICE_NAME[`${osdVisible.device_domain}-${osdVisible.device_type}-${osdVisible.device_sub_type}`] }}</span> </div> </a-tooltip> </div> @@ -445,10 +463,12 @@ <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] {{ 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> <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"> @@ -457,10 +477,11 @@ 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-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 :class="[aircrafIndex === 0 ? 'active-color' : 'unactive-color']" class="width-100" type="primary" size="small" @click="openAircra(0)"> 飞行相机 </a-button> </a-col> @@ -740,10 +761,10 @@ 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, DesktopOutlined DesktopOutlined, CloseOutlined } from '@ant-design/icons-vue' import { EDeviceTypeName } from '../types' import DockControlPanel from './g-map/DockControlPanel.vue' @@ -751,6 +772,7 @@ 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, @@ -774,7 +796,7 @@ DroneControlPanel, CarryOutOutlined, RocketOutlined, DesktopOutlined DesktopOutlined, }, name: 'GMap', props: {}, @@ -1431,7 +1453,8 @@ flyTimeout, aircrafIndex, airPortOption, controlStatus controlStatus, convertTimestampToDate } } }) @@ -1475,6 +1498,7 @@ display: none; } } &:deep(.ant-btn > .anticon + span, .ant-btn > span + .anticon, .ant-btn > .anticon + span, .ant-btn > span + .anticon) { margin-left: 5px !important; } @@ -1568,4 +1592,18 @@ position: absolute; min-height: 2px; border-radius: 2px; }</style> } .task_wrapper { display: flex; align-items: center; font-size: 12px; .task_content { background-color: #19be6b; padding: 2px 4px; } .task_title { margin-left: 5px; font-size: 14px; } } </style> src/pages/page-web/projects/tsa.vue
@@ -13,13 +13,22 @@ <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;"> <a-collapse-panel :key="EDeviceTypeName.Dock" header="机场" style="border-bottom: 1px solid #4f4f4f;"> <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" style="background: #3c3c3c; height: 90px; margin-bottom: 10px;"> <div style="border-radius: 2px; height: 100%; width: 100%;" style="background: #3c3c3c; margin-bottom: 10px;"> <div class="task_wrapper" v-if="dock.latest_wayline_job"> <div class="task_content"> <div class="task_status"> <ContainerOutlined /> <span>待执行</span> </div> <div class="task_info">{{convertTimestampToDate(dock.latest_wayline_job.begin_time)}}</div> </div> <div class="task_title">{{dock.latest_wayline_job.name}}</div> </div> <div style="border-radius: 2px; height: 90px; width: 100%;" class="flex-row flex-justify-between flex-align-center"> <div style="float: left; padding: 0px 5px 8px 8px; width: 88%"> <!-- // 机场设备标题 --> @@ -107,7 +116,8 @@ :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] dockInfo[dock.gateway.sn].basic_osd?.drone_in_dock === 1 ? '舱内关机' : EModeText[EModeCode.Disconnected] }} </div> </div> @@ -121,8 +131,7 @@ }}</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]" <a-popover trigger="click" placement="bottom" color="black" 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' : @@ -183,8 +192,7 @@ <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;"> <a-collapse-panel :key="EDeviceTypeName.Aircraft" header="在线设备" style="border-bottom: 1px solid #4f4f4f;"> <div v-if="onlineDevices.data.length === 0" style="height: 150px; color: white;"> <a-empty :image="simpleImage" style="color: #fff;" description="暂无数据" :image-style="{ height: '60px' }"/> <a-empty :image="simpleImage" style="color: #fff;" description="暂无数据" :image-style="{ height: '60px' }" /> </div> <div v-else class="fz12" style="color: white;"> <div v-for="device in onlineDevices.data" :key="device.sn" @@ -193,8 +201,7 @@ <div style="background: #535759; width: 100%;"></div> <div class="capacity-percent" :style="{ width: deviceInfo[device.sn].battery.capacity_percent + '%' }"> </div> <div class="return-home" :style="{ width: deviceInfo[device.sn].battery.return_home_power + '%' }"></div> <div class="return-home" :style="{ width: deviceInfo[device.sn].battery.return_home_power + '%' }"></div> <div class="landing" :style="{ width: deviceInfo[device.sn].battery.landing_power + '%' }"></div> <div class="battery" :style="{ left: deviceInfo[device.sn].battery.capacity_percent + '%' }"></div> </div> @@ -256,9 +263,6 @@ </div> </a-collapse-panel> </a-collapse> <!-- 测试视频播放组件 --> <!-- <JessibucaVideo videoUrl="https://www.ainfo.top:700/rtp/34020000001110000101_34020000001310000001.flv" /> --> </div> </div> </template> @@ -275,11 +279,13 @@ EyeInvisibleOutlined, EyeOutlined, RobotOutlined, DoubleRightOutlined DoubleRightOutlined, ContainerOutlined, } from '@ant-design/icons-vue' import { EHmsLevel } from '/@/types/enums' import { cesiumOperation } from '/@/hooks/use-cesium-tsa' let droneEntity import { convertTimestampToDate } from '/@/utils/time' let droneEntity: any const { appContext } = getCurrentInstance() const global = appContext.config.globalProperties @@ -424,6 +430,7 @@ callsign: child?.nickname, sn: child?.device_sn, mode: EModeCode.Disconnected, latest_wayline_job: gateway.latest_wayline_job, gateway: { model: gateway?.device_name, callsign: gateway?.nickname, @@ -461,6 +468,7 @@ } function switchVisible (e: any, device: OnlineDevice, isDock: boolean, isClick: boolean, sn?: any) { console.log(device, 'device') // showDrawer.value = !showDrawer.value if (!isClick) { e.target.style.cursor = 'not-allowed' @@ -480,6 +488,7 @@ osdVisible.value.device_domain = device.gateway.device_domain osdVisible.value.device_sub_type = device.gateway.device_sub_type osdVisible.value.device_type = device.gateway.device_type osdVisible.value.latest_wayline_job = device.latest_wayline_job } store.commit('SET_OSD_VISIBLE_INFO', osdVisible.value) store.commit('SET_HMSInfo_DetailSn', sn) @@ -659,3 +668,18 @@ } } </style> <style lang="scss" scoped> .task_wrapper { display: flex; align-items: center; .task_content { background-color: #19be6b; padding: 2px 4px; } .task_title { margin-left: 5px; font-size: 14px; } } </style> src/types/device.ts
@@ -157,6 +157,7 @@ callsign: string, sn: string, mode: number, latest_wayline_job?: any gateway: { model: string, callsign: string, @@ -238,6 +239,7 @@ device_type: string, device_sub_type: string, device_domain: string latest_wayline_job?: any } export interface GatewayOsd { src/utils/time.ts
@@ -43,7 +43,7 @@ return '' } export function convertTimestampToDate (timestamp:any, format:string) { export function convertTimestampToDate (timestamp:any, format?:string) { if (timestamp && (typeof timestamp === 'string') && timestamp.indexOf('-') > -1) { // eslint-disable-next-line no-useless-escape timestamp = timestamp.replace(/\-/g, '/')
