update： 新建航线、事件编辑、kmz文件问题修改

GuLiMmo

2024-03-19 aec00ecc093be803860c8675cbe1c4c776a7cb4e

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

@@ -16,17 +16,24 @@
            <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; margin-bottom: 10px;">
            <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 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">
@@ -116,7 +123,7 @@
                        :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 ? '舱内关机' :
                          dockInfo[dock.gateway.sn]?.basic_osd?.drone_in_dock === 1 ? '舱内关机' :
                            EModeText[EModeCode.Disconnected]
                        }}
                      </div>
@@ -268,7 +275,8 @@
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'
import * as Cesium from 'cesium'
import { computed, onMounted, reactive, ref, watch, onUnmounted } from 'vue'
import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
import rc from '/@/assets/icons/rc.png'
import { OnlineDevice, EModeCode, OSDVisible, EDockModeCode, DeviceOsd, EDockModeText, EModeText } from '/@/types/device'
@@ -284,7 +292,8 @@
} 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'
import { parseJsonFile } from '/@/utils/geo-utils'
let droneEntity: any

const { appContext } = getCurrentInstance()
@@ -299,11 +308,14 @@
const onlineDevices = reactive({
  data: [] as OnlineDevice[]
})

// 机场序列号
const dock = ref('')
// 无人机序列号
const device_dock = ref('')
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 +339,12 @@
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) => {
  // cesium.removeAllPoint()
  if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
    // cesium.removeById('drone_fly')
@@ -360,10 +373,39 @@
        heading: data.deviceInfo[data.currentSn].attitude_head,
      }
      cesium.addPoint(setting)
      // 无人机路线轨迹
      // 判断是否存在done_route
      if (cesium.getEntityById('drone_route')) {
        cesium.removeById('drone_route')
      }
      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]
    // }
    // eslint-disable-next-line eqeqeq
    // 3、4、5的时候代表飞行过程 绘制路线
    console.log(data.deviceInfo[data.currentSn], 'Aircraft')
    // eslint-disable-next-line eqeqeq
    if (data.deviceInfo[data.currentSn].mode_code && (data.deviceInfo[data.currentSn].mode_code == 3 || data.deviceInfo[data.currentSn].mode_code == 4 || data.deviceInfo[data.currentSn].mode_code == 5 || data.deviceInfo[data.currentSn].mode_code == 9)) {
      const newPositions = Cesium.Cartesian3.fromDegreesArray([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
      // eslint-disable-next-line eqeqeq
    } else if (data.deviceInfo[data.currentSn].mode_code == 0 || data.deviceInfo[data.currentSn].mode_code == 14) {
      const drone_route = cesium.getEntityById('drone_route')
      previousPositions.value = []
      drone_route.polyline.positions = previousPositions.value
    }
  }
  if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
    if (snCode.value.includes(data.currentSn)) return
@@ -372,13 +414,14 @@
    const setting = {
      longitude: data.dockInfo[data.currentSn].basic_osd?.longitude,
      latitude: data.dockInfo[data.currentSn].basic_osd?.latitude,
      id: `drone_dock_${new Date().getTime()}`,
      billboard: {
        image: getResource('dock.png'),
        outlineWidth: 0,
        width: 36,
        height: 36,
        scale: 1.0,
      }
      },
    }
    cesium.addPoint(setting)
    // cesium.flyTo(setting)
@@ -394,6 +437,12 @@
    Promise.resolve(false)
  }
}
// 判断给定日期是否晚于当前时间
const isDateLaterThanNow = (dateObj: any) => {
  const todayTimestamp = setTodayTime(dateObj)
  return todayTimestamp > Date.now()
}

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

onUnmounted(() => {
  cesium.removeAllPoint()
})

function getOnlineTopo () {
@@ -424,7 +478,13 @@
    onlineDevices.data = []
    onlineDocks.data = []
    res.data.forEach((gateway: any) => {
      const child = gateway.children
      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,
@@ -442,7 +502,8 @@
        },
        payload: []
      }
      child?.payloads_list.forEach((payload: any) => {
      const payloads_list = child?.payloads_list || []
      payloads_list.forEach((payload: any) => {
        device.payload.push({
          index: payload.index,
          model: payload.model,
@@ -468,14 +529,19 @@
}

function switchVisible (e: any, device: OnlineDevice, isDock: boolean, isClick: boolean, sn?: any) {
  console.log(device, 'device')
  // showDrawer.value = !showDrawer.value
  dock.value = device.gateway.sn
  device_dock.value = device.sn
  // showDrawer.value = !showDr++awer.value
  if (!isClick) {
    e.target.style.cursor = 'not-allowed'
    return
  }

  if (device.sn === osdVisible.value.sn) {
    osdVisible.value.visible = !osdVisible.value.visible
    // 临时--可能会改
    osdVisible.value.is_dock = true
    osdVisible.value.gateway_sn = device.gateway.sn
  } else {
    osdVisible.value.sn = device.sn
    osdVisible.value.callsign = device.callsign
@@ -673,10 +739,16 @@
.task_wrapper {
  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;