12 files modified
1 files added
| | |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | getFiles() |
| | | // getFiles() |
| | | }) |
| | | |
| | | function getFiles () { |
| | |
| | | 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' }, |
| | |
| | | <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> |
| | | |
| | |
| | | <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"> |
| | |
| | | }) |
| | | } |
| | | // 绘制点 |
| | | 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, |
| | |
| | | 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) { |
| | |
| | | } |
| | | |
| | | // 飞到项目中心点 |
| | | 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() |
| | | } |
| | | }) |
| | | } |
| | |
| | | <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' |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | @import '/@/styles/index.scss'; |
| | | |
| | | .login { |
| | | background-color: $dark-highlight; |
| | | height: 100vh; |
| | |
| | | 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) |
| | |
| | | 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() |
| | |
| | | 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 () => { |
| | |
| | | <!-- |
| | | * @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> |
| | |
| | | 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']) |
| | |
| | | } |
| | | }) |
| | | const spinning = ref<boolean>(true) |
| | | const selectIndex = ref(-1) |
| | | // 删除方法 |
| | | const deleteItem = (item: projectCard) => { |
| | | Modal.confirm({ |
| | |
| | | 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"> |
| | |
| | | border-bottom: 1px solid #4f4f4f; |
| | | display: flex; |
| | | } |
| | | |
| | | .active { |
| | | cursor: pointer; |
| | | background-color: #101010; |
| | | } |
| | | .project-left { |
| | | padding: 16px; |
| | | flex: 1; |
| | |
| | | <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}"> |
| | |
| | | |
| | | 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 |
| | |
| | | <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" |
| | |
| | | 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 () { |