husq
2023-09-13 4473382ddd15af3767edf0b4c8becd8ffbd186f9
注释没用到的接口代码、英文修改为中文
12 files modified
1 files added
187 ■■■■ changed files
src/assets/loginBg.jpg patch | view | raw | blame | history
src/components/MediaPanel.vue 2 ●●● patch | view | raw | blame | history
src/components/common/sidebar.vue 2 ●●● patch | view | raw | blame | history
src/components/common/topbar.vue 2 ●●● patch | view | raw | blame | history
src/components/task/TaskPanel.vue 2 ●●● patch | view | raw | blame | history
src/hooks/use-center-point.ts 40 ●●●● patch | view | raw | blame | history
src/pages/page-web/index.vue 48 ●●●●● patch | view | raw | blame | history
src/pages/page-web/projects/layer.vue 2 ●●● patch | view | raw | blame | history
src/pages/page-web/projects/project_list/add_page/add.vue 5 ●●●●● patch | view | raw | blame | history
src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue 30 ●●●● patch | view | raw | blame | history
src/pages/page-web/projects/task.vue 2 ●●● patch | view | raw | blame | history
src/pages/page-web/projects/tsa.vue 30 ●●●● patch | view | raw | blame | history
src/pages/page-web/projects/wayline.vue 22 ●●●● patch | view | raw | blame | history
src/assets/loginBg.jpg
src/components/MediaPanel.vue
@@ -109,7 +109,7 @@
})
onMounted(() => {
  getFiles()
  // getFiles()
})
function getFiles () {
src/components/common/sidebar.vue
@@ -54,7 +54,7 @@
    const root = getRoot()
    const options = [
      { key: 0, label: '团队', path: '/' + ERouterName.TSA, icon: 'TeamOutlined' },
      { key: 1, label: '直播', path: '/' + ERouterName.LIVESTREAM, icon: 'VideoCameraOutlined' },
      // { key: 1, label: '直播', path: '/' + ERouterName.LIVESTREAM, icon: 'VideoCameraOutlined' },
      { key: 2, label: '标注', path: '/' + ERouterName.LAYER, icon: 'EnvironmentOutlined' },
      { key: 3, label: '媒体库', path: '/' + ERouterName.MEDIA, icon: 'PictureOutlined' },
      { key: 4, label: '航线库', path: '/' + ERouterName.WAYLINE, icon: 'NodeIndexOutlined' },
src/components/common/topbar.vue
@@ -1,7 +1,7 @@
<template>
  <div class="width-100 flex-row flex-justify-between flex-align-center" style="height: 60px;">
    <div class="height-100">
      <a-avatar :size="40" shape="square" :src="cloudapi" />
      <!-- <a-avatar :size="40" shape="square" :src="cloudapi" /> -->
      <span class="ml10 fontBold">{{ workspaceName }}</span>
    </div>
src/components/task/TaskPanel.vue
@@ -1,5 +1,5 @@
<template>
  <div class="header">Task Plan Library</div>
  <div class="header">计划库</div>
  <div class="plan-panel-wrapper">
    <a-table class="plan-table" :columns="columns" :data-source="plansData.data" row-key="job_id"
      :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
src/hooks/use-center-point.ts
@@ -10,7 +10,7 @@
  })
}
// 绘制点
function addPoint (viewer: any, id: string, longitude: number, latitude: number, label: string) {
export function addPoint (viewer: any, id: string, longitude: number, latitude: number) {
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
    id,
@@ -35,7 +35,6 @@
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handler.setInputAction(function (click: any) {
    const pickedObject = viewer.scene.pick(click.position)
    console.log(pickedObject, 'pickObject')
    if (Cesium.defined(pickedObject)) {
      const list = longitudeList.filter((v: { id: string, longitude: number; latitude: number; }) => v.id === pickedObject.id.id)
      if (pickedObject.id.label) {
@@ -57,10 +56,39 @@
}
// 飞到项目中心点
export function flyTo (viewer: any, longitude: number, latitude: number) {
  // console.log()
  const targetPosition = { longitude, latitude }
export function flyTo (viewer: any, longitude: number, latitude: number, height: number = 5000) {
  const targetPosition = { longitude, latitude, height }
  viewer.camera.flyTo({
    destination: targetPosition,
    destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
    duration: 2
  })
}
// 通过经纬度判断当前地图上是否有实体
export function isEntityExist (viewer: any, longitude: number, latitude: number) {
  const position = Cesium.Cartesian3.fromDegrees(longitude, latitude)
  const pickedObject = viewer.scene.pick(position)
  console.log(pickedObject, 'pickedObject')
  if (Cesium.defined(pickedObject)) {
    return true
  } else {
    return false
  }
}
// 清除地图上的点
export function clearAllPoint (viewer:any) {
  // 获取Cesium场景对象
  const scene = viewer.scene
  // 获取场景中的所有图元
  const primitives = scene.primitives
  // 遍历图元数组
  primitives.forEach(function (primitive: any) {
  // 判断图元是否为点集合
    if (primitive instanceof Cesium.PointPrimitiveCollection) {
    // 移除所有点
      primitive.removeAll()
    }
  })
}
src/pages/page-web/index.vue
@@ -1,52 +1,33 @@
<template>
  <div
    class="login flex-column flex-justify-center flex-align-center m0 b0">
    <a-image
      style="width: 17vw; height: 10vw; margin-bottom: 50px"
      :src="djiLogo"
    />
    <p class="fz35 pb50" style="color: #2d8cf0">Cloud API Demo</p>
    <a-form
      layout="inline"
      :model="formState"
      class="flex-row flex-justify-center flex-align-center"
    >
  <div class="login flex-column flex-justify-center flex-align-center m0 b0">
    <a-image :preview="false" style="width: 17vw; height: 10vw; margin-bottom: 50px" :src="djiLogo" />
    <p class="fz35 pb50" style="color: #2d8cf0">无人机操作系统</p>
    <a-form layout="inline" :model="formState" class="flex-row flex-justify-center flex-align-center">
      <a-form-item>
        <a-input v-model:value="formState.username" placeholder="Username">
          <template #prefix
            ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model:value="formState.password"
          type="password"
          placeholder="Password"
        >
          <template #prefix
            ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        <a-input v-model:value="formState.password" type="password" placeholder="Password">
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          class="m0"
          type="primary"
          html-type="submit"
          :disabled="loginBtnDisabled"
          @click="onSubmit"
        >
          Login
        <a-button class="m0" type="primary" html-type="submit" :disabled="loginBtnDisabled" @click="onSubmit">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import djiLogo from '/@/assets/icons/dji_logo.png'
import djiLogo from '/@/assets/loginBg.jpg'
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { reactive, computed, UnwrapRef } from 'vue'
@@ -83,6 +64,7 @@
<style lang="scss" scoped>
@import '/@/styles/index.scss';
.login {
  background-color: $dark-highlight;
  height: 100vh;
src/pages/page-web/projects/layer.vue
@@ -250,7 +250,7 @@
  const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
  const parent = element?.parentNode as HTMLDivElement
  scorllHeight.value = parent.clientHeight - parent.firstElementChild!.clientHeight
  getAllElement()
  // getAllElement()
})
function closeDrawer () {
  store.commit('SET_DRAW_VISIBLE_INFO', false)
src/pages/page-web/projects/project_list/add_page/add.vue
@@ -174,7 +174,10 @@
import { Form, message } from 'ant-design-vue'
import { cloneDeep } from 'lodash'
import { add, detail, edit as projectEdit } from '/@/api/project-page/index'
import { addPoint } from '/@/hooks/use-center-point'
import { useMyStore } from '/@/store/index'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const router = useRouter()
const store = useMyStore()
const route = useRoute()
@@ -242,6 +245,8 @@
  const res = await detail(id)
  if (res.code !== 5000) return
  formState.value = res.data
  addPoint(global.$viewer, res.data.id, res.data.latitude, res.data.latitude)
  store.commit('SET_CENTER_CONFIG_LATITUDE', { latitude: formState.value.latitude, longitude: formState.value.longitude })
}
// 编辑项目
const editProject = async () => {
src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
@@ -1,18 +1,8 @@
<!--
 * @Author: 胡思旗 931347610@qq.com
 * @Date: 2023-08-28 15:23:47
 * @LastEditors: husq 931347610@qq.com
 * @LastEditTime: 2023-09-11 17:00:46
 * @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\list_page\components\ProjectList.vue
 * @Description:项目列表组件
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
  <div class="project-box flex-common">
    <a-spin :spinning="model" style="width: 100%;">
      <div class="project-card" v-for="item in cardList" :key="item.id">
        <div class="project-left">
      <div class="project-card" :class="{active: index == selectIndex}" v-for="(item, index) in cardList" :key="item.id">
        <div class="project-left" @click="goCenter(item, index)">
          <div class="head mb10 flex-display flex-align-center flex-justify-between">
            <div class="head-left flex-display flex-align-center">
              <a-tag color="#87d068">{{ status[item.projectStatus] }}</a-tag>
@@ -65,6 +55,9 @@
import { del, edit } from '/@/api/project-page'
import { Modal, message } from 'ant-design-vue'
import { useMyStore } from '/@/store'
import { flyTo, isEntityExist } from '/@/hooks/use-center-point'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const store = useMyStore()
const router = useRouter()
const emit = defineEmits(['refreshList', 'update:modelValue'])
@@ -84,6 +77,7 @@
  }
})
const spinning = ref<boolean>(true)
const selectIndex = ref(-1)
// 删除方法
const deleteItem = (item: projectCard) => {
  Modal.confirm({
@@ -141,7 +135,12 @@
    query: { id: item.id },
  })
}
const goCenter = (item:any, index:number) => {
  selectIndex.value === index ? selectIndex.value = -1 : selectIndex.value = index
  flyTo(global.$viewer, item.longitude, item.latitude)
  const flag = isEntityExist(global.$viewer, item.longitude, item.latitude)
  console.log(flag, 'fffff')
}
</script>
<style scoped lang="scss">
@@ -163,7 +162,10 @@
    border-bottom: 1px solid #4f4f4f;
    display: flex;
  }
  .active {
    cursor: pointer;
    background-color: #101010;
  }
  .project-left {
    padding: 16px;
    flex: 1;
src/pages/page-web/projects/task.vue
@@ -3,7 +3,7 @@
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
      <a-row>
        <a-col :span="1"></a-col>
        <a-col :span="20">Task Plan Library</a-col>
        <a-col :span="20">计划库</a-col>
        <a-col :span="2">
          <span v-if="taskRoute">
            <router-link :to="{ name: ERouterName.CREATE_PLAN}">
src/pages/page-web/projects/tsa.vue
@@ -306,21 +306,21 @@
onMounted(() => {
  // flyTo(global.$viewer, route.params.longitude as unknown as number, route.params.latitude as unknown as number)
  getOnlineTopo()
  setTimeout(() => {
    watch(() => store.state.deviceStatusEvent,
      data => {
        getOnlineTopo()
        if (data.deviceOnline.sn) {
          getUnreadHms(data.deviceOnline.sn)
        }
      },
      {
        deep: true
      }
    )
    getOnlineDeviceHms()
  }, 3000)
  // getOnlineTopo()
  // setTimeout(() => {
  //   watch(() => store.state.deviceStatusEvent,
  //     data => {
  //       getOnlineTopo()
  //       if (data.deviceOnline.sn) {
  //         getUnreadHms(data.deviceOnline.sn)
  //       }
  //     },
  //     {
  //       deep: true
  //     }
  //   )
  //   getOnlineDeviceHms()
  // }, 3000)
  const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
  const parent = element?.parentNode as HTMLDivElement
  scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight
src/pages/page-web/projects/wayline.vue
@@ -4,7 +4,7 @@
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
      <a-row>
        <a-col :span="1"></a-col>
        <a-col :span="15">Flight Route Library</a-col>
        <a-col :span="15">航线库</a-col>
        <a-col :span="8" v-if="importVisible" class="flex-row flex-justify-end flex-align-center">
          <a-upload
            name="file"
@@ -125,17 +125,17 @@
onMounted(() => {
  const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
  height.value = document.body.clientHeight - parent.firstElementChild!.clientHeight
  getWaylines()
  // getWaylines()
  const key = setInterval(() => {
    const data = document.getElementById('data')?.lastElementChild as HTMLDivElement
    if (pagination.total === 0 || Math.ceil(pagination.total / pagination.page_size) <= pagination.page || height.value <= data?.clientHeight + data?.offsetTop) {
      clearInterval(key)
      return
    }
    pagination.page++
    getWaylines()
  }, 1000)
  // const key = setInterval(() => {
  //   const data = document.getElementById('data')?.lastElementChild as HTMLDivElement
  //   if (pagination.total === 0 || Math.ceil(pagination.total / pagination.page_size) <= pagination.page || height.value <= data?.clientHeight + data?.offsetTop) {
  //     clearInterval(key)
  //     return
  //   }
  //   pagination.page++
  //   getWaylines()
  // }, 1000)
})
function getWaylines () {