From 9e765ee8e2852409a1a98a6fb548b2d9d4111713 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Thu, 19 Oct 2023 17:25:34 +0800
Subject: [PATCH] 添加航线任务待提醒

---
 src/components/GMap.vue             |   82 ++++++++++++----
 src/utils/time.ts                   |    2 
 src/pages/page-web/projects/tsa.vue |  174 +++++++++++++++++++---------------
 src/types/device.ts                 |    2 
 4 files changed, 162 insertions(+), 98 deletions(-)

diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index 813c026..595dc27 100644
--- a/src/components/GMap.vue
+++ b/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;" />
@@ -301,7 +318,7 @@
                 <a-col span="2"></a-col>
                 <a-col span="8">
                   <a-button :class="[airPortOption ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
-                     size="small" @click="openFlySetting">
+                    size="small" @click="openFlySetting">
                     操作
                   </a-button>
                 </a-col>
@@ -436,19 +453,22 @@
           <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>
         <div class="osd flex-1">
           <a-row class="mr-20" align="middle">
             <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;' ">
+              :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>
diff --git a/src/pages/page-web/projects/tsa.vue b/src/pages/page-web/projects/tsa.vue
index adba68c..ab0fc09 100644
--- a/src/pages/page-web/projects/tsa.vue
+++ b/src/pages/page-web/projects/tsa.vue
@@ -13,22 +13,31 @@
       <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%;"
-                   class="flex-row flex-justify-between flex-align-center">
+              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%">
                   <!-- // 机场设备标题 -->
                   <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'
-                        }}
+                        dock.callsign ??
+                        'No Drone'
+                      }}
                       </div>
                     </a-tooltip>
                   </div>
@@ -36,13 +45,13 @@
                   <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/>
+                        <RobotOutlined />
                       </span>
                       <div class="font-bold text-hidden" style="max-width: 80px;"
-                           :style="dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
+                        :style="dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
                         {{
                           dockInfo[dock.gateway.sn] ? EDockModeText[dockInfo[dock.gateway.sn].basic_osd?.mode_code] :
-                              EDockModeText[EDockModeCode.Disconnected]
+                          EDockModeText[EDockModeCode.Disconnected]
                         }}
                       </div>
                     </div>
@@ -50,37 +59,37 @@
                       <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' :
                           hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"
-                             style="width: 18px; height: 16px; text-align: center;">
+                          style="width: 18px; height: 16px; text-align: center;">
                           <span :style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
-                              hmsInfo[dock.gateway.sn].length
-                            }}</span>
+                            hmsInfo[dock.gateway.sn].length
+                          }}</span>
                           <span class="fz10">{{ hmsInfo[dock.gateway.sn].length > 99 ? '+' : '' }}</span>
                         </div>
                         <a-popover trigger="click" placement="bottom" color="black"
-                                   v-model:visible="hmsVisible[dock.gateway.sn]"
-                                   @visibleChange="readHms(hmsVisible[dock.gateway.sn], dock.gateway.sn)"
-                                   :overlayStyle="{ width: '200px', height: '300px' }">
+                          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' :
                             hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
-                               style="margin-left: 3px; width: 107px; height: 16px;">
+                            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">
+                              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'">
+                                :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 style="width: 110px;">
                                       <span class="word-loop">{{ hms.message_zh }}</span>
                                     </div>
                                     <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"/>
+                                      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" />
                                     </div>
                                   </div>
                                 </template>
@@ -101,13 +110,14 @@
                   <div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;">
                     <div class="flex-row">
                       <span class="ml5 mr5">
-                        <RocketOutlined/>
+                        <RocketOutlined />
                       </span>
                       <div class="font-bold text-hidden" style="max-width: 80px"
-                           :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;'">
+                        :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>
@@ -115,36 +125,35 @@
                       <div v-if="hmsInfo[dock.sn]" class="flex-align-center flex-row">
                         <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;">
+                          style="width: 18px; height: 16px; text-align: center;">
                           <span :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
-                              hmsInfo[dock.sn].length
-                            }}</span>
+                            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)"
-                                   :overlayStyle="{ width: '200px', height: '300px' }">
+                        <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' :
                             hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
-                               style="margin-left: 3px; width: 107px; height: 16px;">
+                            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">
+                              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'">
+                                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 style="width: 110px;">
                                       <span class="word-loop">{{ hms.message_zh }}</span>
                                     </div>
                                     <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"/>
+                                      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" />
                                     </div>
                                   </div>
                                 </template>
@@ -162,14 +171,14 @@
                   </div>
                 </div>
                 <div style="float: right; background: #595959; height: 100%; width: 40px;"
-                     class="flex-row flex-justify-center flex-align-center">
+                  class="flex-row flex-justify-center flex-align-center">
                   <div class="fz16"
-                       @click="switchVisible($event, dock, true, dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected, dock.gateway.sn)">
+                    @click="switchVisible($event, dock, true, dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected, dock.gateway.sn)">
                     <a v-if="osdVisible.gateway_sn === dock.gateway.sn && osdVisible.visible">
-                      <EyeOutlined/>
+                      <EyeOutlined />
                     </a>
                     <a v-else>
-                      <EyeInvisibleOutlined/>
+                      <EyeInvisibleOutlined />
                     </a>
                   </div>
                 </div>
@@ -183,58 +192,56 @@
       <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"
-                 style="background: #3c3c3c; height: 90px; margin-bottom: 10px;">
+              style="background: #3c3c3c; height: 90px; margin-bottom: 10px;">
               <div class="battery-slide" v-if="deviceInfo[device.sn]">
                 <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>
               <div style="border-bottom: 1px solid #515151; border-radius: 2px; height: 50px; width: 100%;"
-                   class="flex-row flex-justify-between flex-align-center">
+                class="flex-row flex-justify-between flex-align-center">
                 <div style="float: left; padding: 5px 5px 8px 8px; width: 88%">
                   <div style="width: 100%; height: 100%;">
                     <a-tooltip>
                       <template #title>{{
-                          device.model ? `${device.model} - ${device.callsign}` : 'No Drone'
-                        }}
+                        device.model ? `${device.model} - ${device.callsign}` : 'No Drone'
+                      }}
                       </template>
                       <span class="text-hidden" style="max-width: 200px; display: block; height: 20px;">{{
-                          device.model ?
-                              `${device.model} - ${device.callsign}` : 'No Drone'
-                        }}</span>
+                        device.model ?
+                        `${device.model} - ${device.callsign}` : 'No Drone'
+                      }}</span>
                     </a-tooltip>
                   </div>
                   <div class="mt5" style="background: #595959;">
                     <span class="ml5 mr5">
-                      <RocketOutlined/>
+                      <RocketOutlined />
                     </span>
                     <span class="font-bold"
-                          :style="deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
+                      :style="deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
                       {{
                         deviceInfo[device.sn] ? EModeCode[deviceInfo[device.sn].mode_code] :
-                            EModeCode[EModeCode.Disconnected]
+                        EModeCode[EModeCode.Disconnected]
                       }}
                     </span>
                   </div>
                 </div>
                 <div style="float: right; background: #595959; height: 50px; width: 40px;"
-                     class="flex-row flex-justify-center flex-align-center">
+                  class="flex-row flex-justify-center flex-align-center">
                   <div class="fz16"
-                       @click="switchVisible($event, device, false, deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected)">
+                    @click="switchVisible($event, device, false, deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected)">
                     <a v-if="osdVisible.sn === device.sn && osdVisible.visible">
-                      <EyeOutlined/>
+                      <EyeOutlined />
                     </a>
                     <a v-else>
-                      <EyeInvisibleOutlined/>
+                      <EyeInvisibleOutlined />
                     </a>
                   </div>
                 </div>
@@ -242,12 +249,12 @@
               <div class="flex-row flex-justify-center flex-align-center" style="height: 40px;">
                 <div class="flex-row" style="height: 20px; background: #595959; width: 94%;">
                   <span class="mr5"><a-image style="margin-left: 2px; margin-top: -2px; height: 20px; width: 20px;"
-                                             :src="rc"/></span>
+                      :src="rc" /></span>
                   <a-tooltip>
                     <template #title>{{ device.gateway.model }} - {{ device.gateway.callsign }}</template>
                     <div class="text-hidden" style="max-width: 200px;">{{ device.gateway.model }} - {{
-                        device.gateway.callsign
-                      }}
+                      device.gateway.callsign
+                    }}
                     </div>
                   </a-tooltip>
                 </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)
@@ -522,7 +531,7 @@
 </script>
 
 <style lang="scss">
-.project-tsa-wrapper > :first-child {
+.project-tsa-wrapper> :first-child {
   height: 50px;
   line-height: 50px;
   align-items: center;
@@ -541,7 +550,7 @@
   }
 }
 
-.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+.ant-collapse>.ant-collapse-item>.ant-collapse-header {
   color: white !important;
   border: 0;
   padding-left: 14px;
@@ -582,7 +591,7 @@
   }
 }
 
-.battery-slide > div {
+.battery-slide>div {
   position: relative;
   margin-top: -2px;
   min-height: 2px;
@@ -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>
diff --git a/src/types/device.ts b/src/types/device.ts
index 5fb1f84..cbffc22 100644
--- a/src/types/device.ts
+++ b/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 {
diff --git a/src/utils/time.ts b/src/utils/time.ts
index 72a311d..2d450de 100644
--- a/src/utils/time.ts
+++ b/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, '/')

--
Gitblit v1.9.3