修改workSpaceId、地图逻辑修改

husq

2023-09-21 e91e29a9a6dd4f7cb436da3c5c59fdd750e35129

修改workSpaceId、地图逻辑修改

 src/api/http/config.ts

@@ -7,8 +7,8 @@

  // http
  // http://172.16.13.64:8100
  baseURL: 'http://192.168.1.198:6789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
  // baseURL: 'https://dev.jxpskj.com:36789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
  // baseURL: 'http://192.168.1.198:6789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
  baseURL: 'https://dev.jxpskj.com:36789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
  // ws: 'ws//127.0.0.1:6789/api/v1/ws',
  // ws://192.168.1.198:1883/
  // websocketURL: 'ws://192.168.1.198:6789/api/v1/ws', // Example: 'ws://192.168.1.198:6789/api/v1/ws'

 src/api/manage.ts

@@ -131,8 +131,6 @@
}

export const getUserPage = async function (params: any, body: IPage): Promise<CommonListResponse<any>> {
  console.log(params, '++++++++++++++')

  const url = `${HTTP_PREFIX}/user/page`
  const result = await request.get(url, { params: { ...params, pageNum: body.current, pageSize: body.size } })
  return result.data

 src/components/GMap.vue

@@ -1,9 +1,10 @@
<template>
  <div class="g-map-wrapper">
    <!-- 地图区域 -->
    <div id="g-container" :style="{ width: '100%', height: '100%' }" />
    <!-- <div id="g-container" :style="{ width: '100%', height: '100%' }" /> -->
    <Cesium />
    <!-- 绘制面板 -->
    <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
    <!-- <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
      <div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'" @click="draw('pin', true)">
        <a><a-image :src="pin" :preview="false" /></a>
      </div>
@@ -24,7 +25,7 @@
          <CloseOutlined />
        </a>
      </div>
    </div>
    </div> -->
    <!-- 飞机OSD -->
    <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
      <div class="pl5 pr5 flex-align-center flex-row flex-justify-between"
@@ -666,7 +667,7 @@
import { useDockControl } from './g-map/use-dock-control'
import DroneControlPanel from './g-map/DroneControlPanel.vue'
import { useConnectMqtt } from './g-map/use-connect-mqtt'

import Cesium from './cesiumMap/cesium.vue'
export default defineComponent({
  components: {
    BorderOutlined,
@@ -958,7 +959,6 @@
        stopLivestream({
          video_id: videoId
        }).then(res => {
          console.log(res, 'res')
          if (res.code === 0) {
            aircraftUrl.value = ''
          }
@@ -973,11 +973,11 @@
    watch(() => store.state.deviceStatusEvent,
      data => {
        if (Object.keys(data.deviceOnline).length !== 0) {
          deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
          // deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
          store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus
        }
        if (Object.keys(data.deviceOffline).length !== 0) {
          deviceTsaUpdateHook.removeMarker(data.deviceOffline.sn)
          // deviceTsaUpdateHook.removeMarker(data.deviceOffline.sn)
          if ((data.deviceOffline.sn === osdVisible.value.sn) || (osdVisible.value.is_dock && data.deviceOffline.sn === osdVisible.value.gateway_sn)) {
            osdVisible.value.visible = false
            store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
@@ -992,19 +992,16 @@

    watch(() => store.state.deviceState, data => {
      if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
        deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)
        if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') {
          deviceInfo.gateway = data.gatewayInfo[osdVisible.value.gateway_sn]
        }
      }
      if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
        deviceTsaUpdateHook.moveTo(data.currentSn, data.deviceInfo[data.currentSn].longitude, data.deviceInfo[data.currentSn].latitude)
        if (osdVisible.value.visible && osdVisible.value.sn !== '') {
          deviceInfo.device = data.deviceInfo[osdVisible.value.sn]
        }
      }
      if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
        deviceTsaUpdateHook.initMarker(EDeviceTypeName.Dock, [EDeviceTypeName.Dock], data.currentSn, data.dockInfo[data.currentSn].basic_osd?.longitude, data.dockInfo[data.currentSn].basic_osd?.latitude)
        if (osdVisible.value.visible && osdVisible.value.is_dock && osdVisible.value.gateway_sn !== '') {
          deviceInfo.dock = data.dockInfo[osdVisible.value.gateway_sn]
          deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd.sub_device?.device_sn ?? osdVisible.value.sn]
@@ -1085,8 +1082,8 @@
    useConnectMqtt()

    onMounted(() => {
      const app = getApp()
      useGMapManageHook.globalPropertiesConfig(app)
      // const app = getApp()
      // useGMapManageHook.globalPropertiesConfig(app)
    })

    function getDrawCallback ({ obj }) {
@@ -1278,7 +1275,7 @@
      aircraftUrl,
      aircraftList,
      aircraSelected,
      selectChange
      selectChange,
    }
  }
})

 src/components/cesiumMap/cesium.vue

@@ -1,10 +1,10 @@
<template>
  <div class="height-100 width-100 cesium" id="cesiumContainer"></div>
  <div v-if="centerConfig.type && !centerConfig.latitude" class="pointLongitude">在地图上点击绘制项目中心点</div>
  <div class="switch">
  <!-- <div class="switch">
    <div class="2d" v-if="dimension === 3" @click="switchModel('2D')">2D</div>
    <div class="3d" v-else @click="switchModel('3D')">3D</div>
  </div>
  </div> -->
</template>

<script setup lang="ts">
@@ -87,25 +87,6 @@
  })
  viewer?.imageryLayers.addImageryProvider(annotation)
}
const Point = (longitude: number, latitude: number) => {
  // 移除地图所有点 重新绘制
  viewer?.entities.removeAll()
  const entity = viewer?.entities.add({
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
    point: {
      pixelSize: 24,
      color: Cesium.Color.GREEN,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
    }
  })
  // // 将相机定位到标记点的位置
  // viewer.value?.camera.flyTo({
  //   destination: entity.position,
  //   duration: 2
  // })
}

// 切换为二三维模式
const switchModel = (type: string) => {
  switch (type) {
@@ -128,42 +109,8 @@
      dimension.value = 3
  }
}

// 设置项目中所有的项目中心坐标
watch(() => store.state.map.pointList, (newVal) => {
  if (newVal) {
    pointCenter(viewer, newVal)
    clickPoint(viewer, newVal)
  }
}, {
  deep: true
})
// 点击地图生成项目中心点
watch(() => store.state.map.centerConfig.type, (newVal) => {
  if (newVal === false || !store.state.map.centerConfig.type) {
    viewer?.entities.removeAll()
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
  } else {
    handler.setInputAction(function (e: any) {
      const cartesian = viewer?.camera.pickEllipsoid(e.position, viewer?.scene.globe.ellipsoid)
      if (cartesian) {
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
        const longitude = Cesium.Math.toDegrees(cartographic.longitude)
        const latitude = Cesium.Math.toDegrees(cartographic.latitude)
        const data = {
          longitude,
          latitude,
        }
        store.commit('SET_CENTER_CONFIG_LATITUDE', data)
        Point(longitude, latitude)
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK
    )
  }
}, {
  deep: true
})
onMounted(() => {
  console.log('=====执行=====')
  init()
})
// 销毁地图模型

 src/components/common/topbar.vue

@@ -50,7 +50,6 @@
watch(route, (newVal) => {
  if (newVal) {
    selected.value = newVal.path
    console.log(selected.value, '+++++')
  }
}, {
  immediate: true,

 src/hooks/use-cesium-tsa.ts

New file
@@ -0,0 +1,64 @@
import { ELocalStorageKey, EDeviceTypeName } from '/@/types'
import dockIcon from '/@/assets/icons/dock.png'
import rcIcon from '/@/assets/icons/rc.png'
import droneIcon from '/@/assets/icons/drone.png'
import * as Cesium from 'cesium'
interface billboardSetting {
    image: string,
    scale?: number,
    [key: string]: any
}
interface pointSetting {
    pixelSize: number,
    outlineWidth: number,
    [key: string]: any
}
interface labelSetting {
    text: string,
    font: string,
    outlineWidth: number,
    [key: string]: any
}
interface pointOption {
    longitude: number
    latitude: number
    point?: pointSetting
    billboard?: billboardSetting
    label?: labelSetting
}

export function cesiumOperation (viewer: any) {
  const cesiumExample = viewer
  const icons = new Map([
    [EDeviceTypeName.Aircraft, droneIcon],
    [EDeviceTypeName.Gateway, rcIcon],
    [EDeviceTypeName.Dock, dockIcon]
  ])
  // 清除所有标记点
  function removeAllPoint () {
    cesiumExample.entities.removeAll()
  }
  // 添加标记点
  function addPoint (pointOption:pointOption) {
    cesiumExample.entities.add({
      position: Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude),
      billboard: pointOption.billboard,
      point: pointOption.point
    })
  }
  // 飞行 flyto
  function flyTo (pointOption:pointOption, time: number = 3) {
    const destination = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude, 1000)
    const duration = time
    cesiumExample.camera.flyTo({
      destination,
      duration
    })
  }

  return {
    addPoint,
    removeAllPoint,
    flyTo
  }
}

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

@@ -250,13 +250,14 @@
import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '/@/api/manage'
import { RocketOutlined, EyeInvisibleOutlined, EyeOutlined, RobotOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
import { EHmsLevel } from '/@/types/enums'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const route = useRoute()
// const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const store = useMyStore()
const username = ref(localStorage.getItem(ELocalStorageKey.Username))
const workspaceId = ref(localStorage.getItem(ELocalStorageKey.WorkspaceId)!)
// const workSpaceId = ref(localStorage.getItem(ELocalStorageKey.workSpaceId)!)
const osdVisible = ref({} as OSDVisible)
const hmsVisible = new Map<string, boolean>()
const scorllHeight = ref()
@@ -270,11 +271,62 @@

const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
const dockInfo = computed(() => store.state.deviceState.dockInfo)
const workSpaceId = computed(() => store.state.common.projectId)
const hmsInfo = computed({
  get: () => store.state.hmsInfo,
  set: (val) => {
    return val
  }
})
const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}
const cesium = cesiumOperation(global.$viewer)
const hasFlownToLocation = ref(false)
// 添加机场标注
watch(() => store.state.deviceState, data => {
  cesium.removeAllPoint()
  if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
    // deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)
  }
  if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
    // 无人机图标
    const setting = {
      longitude: data.deviceInfo[data.currentSn].longitude,
      latitude: data.deviceInfo[data.currentSn].latitude,
      billboard: {
        image: getResource('drone.png'),
        outlineWidth: 0,
        width: 36,
        height: 36,
        scale: 1.0,
      }
    }
    cesium.addPoint(setting)
    // if (osdVisible.value.visible && osdVisible.value.sn !== '') {
    //   deviceInfo.value.device = data.deviceInfo[osdVisible.value.sn]
    // }
  }
  if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
    // 机场图标位置
    const setting = {
      longitude: data.dockInfo[data.currentSn].basic_osd?.longitude || 115.85666327144976,
      latitude: data.dockInfo[data.currentSn].basic_osd?.latitude || 28.62452712442823,
      billboard: {
        image: getResource('dock.png'),
        outlineWidth: 0,
        width: 36,
        height: 36,
        scale: 1.0,
      }
    }
    cesium.addPoint(setting)
    if (hasFlownToLocation.value) return
    cesium.flyTo(setting)
    hasFlownToLocation.value = true
  }
}, {
  deep: true
})

onMounted(() => {
@@ -298,14 +350,13 @@
  scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight
})
const messageHandler = async (payload: any) => {
  console.log(payload, 'payload')
  // if (payload.type === 'hms') {
  //   const { data
}
// 监听ws 消息
// useConnectWebSocket(messageHandler)
function getOnlineTopo () {
  getDeviceTopo(workspaceId.value).then((res) => {
  getDeviceTopo(workSpaceId.value).then((res) => {
    if (res.code !== 0) {
      return
    }
@@ -371,12 +422,11 @@
}

function getUnreadHms (sn: string) {
  getUnreadDeviceHms(workspaceId.value, sn).then(res => {
  getUnreadDeviceHms(workSpaceId.value, sn).then(res => {
    if (res.data.length !== 0) {
      hmsInfo.value[sn] = res.data
    }
  })
  console.info(hmsInfo.value)
}

function getOnlineDeviceHms () {
@@ -398,7 +448,7 @@

function readHms (visiable: boolean, sn: string) {
  if (!visiable) {
    updateDeviceHms(workspaceId.value, sn).then(res => {
    updateDeviceHms(workSpaceId.value, sn).then(res => {
      if (res.code === 0) {
        delete hmsInfo.value[sn]
      }

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

@@ -109,7 +109,7 @@
})

const root = getRoot()
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
const workspaceId = computed(() => store.state.common.projectId)
const deleteTip = ref(false)
const deleteWaylineId = ref<string>('')
const canRefresh = ref(true)
@@ -137,7 +137,7 @@
    return
  }
  canRefresh.value = false
  getWaylineFiles(workspaceId, {
  getWaylineFiles(workspaceId.value, {
    page: pagination.page,
    page_size: pagination.page_size,
    order_by: 'update_time desc'
@@ -174,7 +174,7 @@

function downloadWayline (waylineId: string, fileName: string) {
  loading.value = true
  downloadWaylineFile(workspaceId, waylineId).then(res => {
  downloadWaylineFile(workspaceId.value, waylineId).then(res => {
    if (!res) {
      return
    }
@@ -186,7 +186,13 @@
}

function selectRoute (wayline: WaylineFile) {
  store.commit('SET_SELECT_WAYLINE_INFO', wayline)
  loading.value = true
  downloadWaylineFile(workspaceId.value, wayline.id).then(res => {
    store.commit('SET_SELECT_WAYLINE_INFO', wayline)
    console.log(res, 'res')
  }).finally(() => {
    loading.value = false
  })
}

function onScroll (e: any) {
@@ -219,7 +225,7 @@
  fileList.value.forEach(async (file: FileItem) => {
    const fileData = new FormData()
    fileData.append('file', file, file.name)
    await importKmzFile(workspaceId, fileData).then((res) => {
    await importKmzFile(workspaceId.value, fileData).then((res) => {
      if (res.code === 0) {
        message.success(`${file.name} file uploaded successfully`)
        canRefresh.value = true