src/components/GMap.vue

@@ -177,12 +177,18 @@
        <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_content task_content_way" v-if="deviceInfo.device && deviceInfo.device?.mode_code === 5">
                  <div class="task_status">
                    <ContainerOutlined />
                    <span>执行任务中</span>
                  </div>
                </div>
                <div class="task_content" v-else>
                  <div class="task_status">
                    <ContainerOutlined />
                    <span>待执行</span>
                  </div>
                  <div class="task_info">{{convertTimestampToDate(osdVisible.latest_wayline_job.begin_time)}}</div>
                  <div class="task_info">{{osdVisible.latest_wayline_job.is_later ? '今天': '明天'}}{{convertTimestampToDate(osdVisible.latest_wayline_job.begin_time, 'hh:mm')}}</div>
                </div>
                <div class="task_title">{{osdVisible.latest_wayline_job.name}}</div>
              </div>
@@ -764,7 +770,7 @@
  BorderOutlined, LineOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
  ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
  FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
  DesktopOutlined, CloseOutlined
  DesktopOutlined, CloseOutlined, ContainerOutlined
} from '@ant-design/icons-vue'
import { EDeviceTypeName } from '../types'
import DockControlPanel from './g-map/DockControlPanel.vue'
@@ -778,6 +784,7 @@
    BorderOutlined,
    LineOutlined,
    CloseOutlined,
    ContainerOutlined,
    ControlOutlined,
    TrademarkOutlined,
    ThunderboltOutlined,
@@ -1598,9 +1605,13 @@
  align-items: center;
  font-size: 12px;
  .task_content {
    background-color: #19be6b;
    background-color: #41bbfa;
    padding: 2px 4px;
  }

  .task_content_way {
    background-color: #19be6b;
  }
  .task_title {
    margin-left: 5px;
    font-size: 14px;

 src/hooks/use-cesium-tsa.ts

@@ -20,11 +20,17 @@
  outlineWidth: number,
  [key: string]: any
}
interface polyline {
  width?: number
  material?: Cesium.Color
  [key: string]: any
}
interface pointOption {
  longitude: number
  latitude: number
  point?: pointSetting
  billboard?: billboardSetting
  polyline?: polyline
  label?: labelSetting
  id?: string
  heading?: number
@@ -153,6 +159,14 @@
    })
  }

  // 添加线段
  const addPolyline = (pointOption: pointOption) => {
    viewer?.entities.add({
      polyline: pointOption.polyline,
      id: pointOption.id,
    })
  }

  // 通过点ID删除
  function removeById (id:string) {
    viewer?.entities.removeById(id)
@@ -276,6 +290,7 @@
    roadPattern,
    patternMap,
    getEntityById,
    updateEntityPosition
    updateEntityPosition,
    addPolyline
  }
}

 src/pages/page-web/projects/tsa.vue

@@ -19,12 +19,18 @@
            <div v-for="dock in onlineDocks.data" :key="dock.sn"
              style="background: #3c3c3c; margin-bottom: 10px;">
              <div class="task_wrapper" v-if="dock.latest_wayline_job">
                <div class="task_content">
                <div class="task_content task_content_way" v-if="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code === 5">
                  <div class="task_status">
                    <ContainerOutlined />
                    <span>执行任务中</span>
                  </div>
                </div>
                <div class="task_content" v-else>
                  <div class="task_status">
                    <ContainerOutlined />
                    <span>待执行</span>
                  </div>
                  <div class="task_info">{{convertTimestampToDate(dock.latest_wayline_job.begin_time)}}</div>
                  <div class="task_info">{{dock.latest_wayline_job.is_later ? '今天': '明天'}}{{convertTimestampToDate(dock.latest_wayline_job.begin_time, 'hh:mm')}}</div>
                </div>
                <div class="task_title">{{dock.latest_wayline_job.name}}</div>
              </div>
@@ -268,6 +274,7 @@
</template>

<script lang="ts" setup>
import * as Cesium from 'cesium'
import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'
import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
import rc from '/@/assets/icons/rc.png'
@@ -284,7 +291,7 @@
} from '@ant-design/icons-vue'
import { EHmsLevel } from '/@/types/enums'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { convertTimestampToDate } from '/@/utils/time'
import { convertTimestampToDate, getDateFromTimestamp, isToday, setTodayTime } from '/@/utils/time'
let droneEntity: any

const { appContext } = getCurrentInstance()
@@ -303,7 +310,7 @@
const onlineDocks = reactive({
  data: [] as OnlineDevice[]
})

const previousPositions = ref([])
const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
const dockInfo = computed(() => store.state.deviceState.dockInfo)
const projectName = computed(() => store.state.common.projectName)
@@ -327,11 +334,13 @@
const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}

// 获取ws连接过来的sn设备号
const snCode = ref<string[]>([])
const cesium = cesiumOperation()
// 添加机场标注
watch(() => store.state.deviceState, data => {
watch(() => store.state.deviceState, (data, oldData) => {
  console.log(data, 'data')
  // cesium.removeAllPoint()
  if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
    // cesium.removeById('drone_fly')
@@ -343,6 +352,18 @@
        heading: data.deviceInfo[data.currentSn].attitude_head,
      }
      cesium.updateEntityPosition(data.deviceInfo[data.currentSn].longitude, data.deviceInfo[data.currentSn].latitude, 'drone_fly', orientation)
      // 根据机场状态码判断是否实时更新轨迹航线
      if (data.dockInfo[data.currentSn] && (data.dockInfo[data.currentSn].basic_osd.mode_code === 3 || data.dockInfo[data.currentSn].basic_osd.mode_code === 4 || data.dockInfo[data.currentSn].basic_osd.mode_code === 5)) {
        // 生成新的位置数组
        const newPositions = Cesium.Cartesian3.fromDegreesArray([oldData.deviceInfo[data.currentSn].longitude, oldData.deviceInfo[data.currentSn].latitude, data.deviceInfo[data.currentSn].longitude, data.deviceInfo[data.currentSn].latitude])
        previousPositions.value = previousPositions.value.concat(newPositions)
        //  更新线段的位置
        const drone_route = cesium.getEntityById('drone_route')
        drone_route.polyline.positions = previousPositions.value
      } else {
        previousPositions.value = []
        cesium.removeById('drone_route')
      }
    } else {
      // 无人机图标
      const setting = {
@@ -360,10 +381,19 @@
        heading: data.deviceInfo[data.currentSn].attitude_head,
      }
      cesium.addPoint(setting)
      // 无人机路线轨迹
      const routeTrajectory = {
        longitude: 115.85666327144976,
        latitude: 28.62452712442823,
        id: 'drone_route',
        polyline: {
          width: 5,
          positions: previousPositions.value,
          material: Cesium.Color.BLUE
        },
      }
      cesium.addPolyline(routeTrajectory)
    }
    // if (osdVisible.value.visible && osdVisible.value.sn !== '') {
    //   deviceInfo.value.device = data.deviceInfo[osdVisible.value.sn]
    // }
  }
  if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
    if (snCode.value.includes(data.currentSn)) return
@@ -394,6 +424,12 @@
    Promise.resolve(false)
  }
}
// 判断给定日期是否晚于当前时间
const isDateLaterThanNow = (dateObj:any) => {
  const todayTimestamp = setTodayTime(dateObj)
  return todayTimestamp > Date.now()
}

onMounted(() => {
  getOnlineTopo()
  setTimeout(() => {
@@ -413,6 +449,7 @@
  const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
  const parent = element?.parentNode as HTMLDivElement
  scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight
  previousPositions.value = []
})

function getOnlineTopo () {
@@ -425,6 +462,12 @@
    onlineDocks.data = []
    res.data.forEach((gateway: any) => {
      const child = gateway.children
      if (gateway.latest_wayline_job) {
        const isLater = isToday(gateway.latest_wayline_job.begin_time)
        // false 代表任务开始时间大于今天  true为任务开始时间为今天
        gateway.latest_wayline_job.is_later = isLater
      }

      const device: OnlineDevice = {
        model: child?.device_name,
        callsign: child?.nickname,
@@ -468,7 +511,6 @@
}

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'
@@ -674,9 +716,12 @@
  display: flex;
  align-items: center;
  .task_content {
    background-color: #19be6b;
    background-color: #41bbfa;
    padding: 2px 4px;
  }
  .task_content_way {
    background-color: #19be6b;
  }
  .task_title {
    margin-left: 5px;
    font-size: 14px;

 src/utils/time.ts

@@ -66,3 +66,41 @@
  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
  return Y + M + D
}

// 获取时间戳对应的日期
export const getDateFromTimestamp = (timestamp:number) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  return { year, month, day, hours, minutes, seconds }
}

// 将日期设置为今天的日期，返回时间戳
export const setTodayTime = (dateObj:any) => {
  const today = new Date()
  const year = today.getFullYear()
  const month = today.getMonth()
  const day = today.getDate()
  const { hours, minutes, seconds } = dateObj
  return new Date(year, month, day, hours, minutes, seconds).getTime()
}

// 判断任务状态是否是当天进行对比
export const isToday = (timestamp:number) => {
  const { hours, minutes, seconds } = getDateFromTimestamp(timestamp)
  const todayTaskTimestamp = setTodayTime({ hours, minutes, seconds })
  // 判断传过来的时间戳是否是今天任务时间时间戳
  if (timestamp === todayTaskTimestamp) {
    return true
  } else if (todayTaskTimestamp < timestamp) {
    return false
  } else {
    const oneDayTimestamp = 24 * 60 * 60 * 1000
    timestamp += oneDayTimestamp
    isToday(timestamp)
  }
}