initial
Esse commit está contido em:
sean.zhou
@@ -0,0 +1 @@
|
||||
/src/vendors/**
|
||||
@@ -0,0 +1,22 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
commonjs: true,
|
||||
es2021: true,
|
||||
node: true
|
||||
},
|
||||
extends: ['standard', 'plugin:vue/vue3-essential'],
|
||||
parserOptions: {
|
||||
ecmaVersion: 12,
|
||||
parser: '@typescript-eslint/parser'
|
||||
},
|
||||
plugins: ['vue', '@typescript-eslint'],
|
||||
rules: {
|
||||
'comma-dangle': 'off',
|
||||
'import/no-absolute-path': 'off',
|
||||
'no-unused-vars': 'off',
|
||||
camelcase: 'off',
|
||||
'no-redeclare': 'off',
|
||||
'vue/no-unused-components': 'off'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
node_modules/
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
# .vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
.history
|
||||
/coverage
|
||||
/backup
|
||||
node_modules
|
||||
@@ -0,0 +1,5 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
@@ -0,0 +1 @@
|
||||
registry=https://registry.npm.taobao.org/
|
||||
@@ -0,0 +1,2 @@
|
||||
# VUE3
|
||||
全系统选用 script setup 模式
|
||||
externo
+2
@@ -0,0 +1,2 @@
|
||||
VITE_APP_ENVIRONMENT=DEV
|
||||
VITE_APP_APIGATEWAY_BACKEND_HOST=''
|
||||
externo
+2
@@ -0,0 +1,2 @@
|
||||
VITE_APP_ENVIRONMENT=production
|
||||
VITE_APP_APIGATEWAY_BACKEND_HOST=''
|
||||
externo
+2
@@ -0,0 +1,2 @@
|
||||
VITE_APP_ENVIRONMENT=STAG
|
||||
VITE_APP_APIGATEWAY_BACKEND_HOST=''
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>demo-web</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="demo-app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
gerado
+13530
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"name": "demo-web",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"serve": "vite",
|
||||
"build:test": "vite build --mode stag",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@ant-design/icons-vue": "^6.0.1",
|
||||
"@vitejs/plugin-legacy": "^1.6.2",
|
||||
"agora-rtc-sdk-ng": "latest",
|
||||
"ant-design-vue": "^2.2.8",
|
||||
"axios": "^0.21.1",
|
||||
"query-string": "^7.0.1",
|
||||
"reconnecting-websocket": "^4.4.0",
|
||||
"vconsole": "^3.8.1",
|
||||
"vite-plugin-components": "^0.13.3",
|
||||
"vite-plugin-importer": "^0.2.5",
|
||||
"vite-plugin-optimize-persist": "^0.1.2",
|
||||
"vite-plugin-package-config": "^0.1.1",
|
||||
"vue": "^3.2.26",
|
||||
"vue-cookies": "^1.7.4",
|
||||
"vue-i18n": "^9.1.6",
|
||||
"vue-router": "4",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.3.2",
|
||||
"@types/urlencode": "^1.1.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.8.1",
|
||||
"@typescript-eslint/parser": "^5.8.1",
|
||||
"@vitejs/plugin-vue": "^1.2.4",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-config-standard": "^16.0.3",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^5.1.0",
|
||||
"eslint-plugin-vue": "^7.13.0",
|
||||
"rollup-plugin-external-globals": "^0.6.1",
|
||||
"sass": "^1.35.1",
|
||||
"typescript": "^4.5.4",
|
||||
"vite": "^2.4.0",
|
||||
"vite-plugin-eslint": "^1.3.0",
|
||||
"vite-plugin-style-import": "^1.0.1",
|
||||
"vite-plugin-svg-icons": "^1.0.5",
|
||||
"vite-plugin-vconsole": "^1.1.0",
|
||||
"vue-tsc": "^0.0.24"
|
||||
},
|
||||
"license": "ISC",
|
||||
"vite": {
|
||||
"optimizeDeps": {
|
||||
"include": [
|
||||
"@amap/amap-jsapi-loader",
|
||||
"@ant-design/icons-vue",
|
||||
"@vue/reactivity",
|
||||
"agora-rtc-sdk-ng",
|
||||
"ant-design-vue",
|
||||
"ant-design-vue/es",
|
||||
"ant-design-vue/es/button/style/css",
|
||||
"ant-design-vue/es/divider/style/css",
|
||||
"ant-design-vue/es/drawer/style/css",
|
||||
"ant-design-vue/es/form/style/css",
|
||||
"ant-design-vue/es/image/style/css",
|
||||
"ant-design-vue/es/input/style/css",
|
||||
"ant-design-vue/es/message/style/css",
|
||||
"ant-design-vue/es/modal/style/css",
|
||||
"ant-design-vue/es/radio/style/css",
|
||||
"ant-design-vue/es/select/style/css",
|
||||
"ant-design-vue/es/switch/style/css",
|
||||
"ant-design-vue/es/table/style/css",
|
||||
"ant-design-vue/es/tooltip/style/css",
|
||||
"ant-design-vue/es/tree/style/css",
|
||||
"axios",
|
||||
"reconnecting-websocket",
|
||||
"vconsole",
|
||||
"vue",
|
||||
"vue-router",
|
||||
"vuex"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Arquivo binário não exibido.
|
Depois Largura: | Altura: | Tamanho: 6.4 KiB |
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div id="demo-app" class="demo-app">
|
||||
<router-view />
|
||||
<!-- <div class="map-wrapper">
|
||||
<GMap/>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from 'vue'
|
||||
import { useMyStore } from './store'
|
||||
import GMap from '/@/components/GMap.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
components: { GMap },
|
||||
|
||||
setup () {
|
||||
const store = useMyStore()
|
||||
return {}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.demo-app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.map-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
// import Icon from '@ant-design/icons-vue'
|
||||
import * as antDesign from 'ant-design-vue'
|
||||
import 'ant-design-vue/dist/antd.css'
|
||||
import { App } from 'vue'
|
||||
import svgIcon from '/@/components/svgIcon.vue'
|
||||
|
||||
export const antComponents = {
|
||||
install (app: App): void {
|
||||
app.use(antDesign)
|
||||
// app.component('Icon', Icon)
|
||||
app.component('svg-icon', svgIcon)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 职责声明：
|
||||
* 1.提供一个 单一的 axios 实例（方面进行统一拦截）
|
||||
* 2.允许调用方定制自己的配置（例如拦截器等），而不影响其他实例
|
||||
*
|
||||
* 暴露 API：
|
||||
* 1.一个统一的 axios 实例: singleAxiosInstance（绑定了统一的拦截器）
|
||||
* 2.创建 axios 实例的方法 createAxiosInstance，并在参数中允许配置是否绑定统一拦截器
|
||||
* 3.对外暴露统一拦截器绑定方案，允许外界进行定制: bindCommonRequestInterceptors、bindCommonResponseInterceptors
|
||||
*/
|
||||
|
||||
import Axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
|
||||
|
||||
// 统一的 request 拦截器
|
||||
export function bindCommonRequestInterceptors (instance: AxiosInstance): void {
|
||||
instance.interceptors.request.use(config => {
|
||||
return config
|
||||
})
|
||||
}
|
||||
|
||||
// Unified response interceptor
|
||||
export function bindCommonResponseInterceptors (instance: AxiosInstance): void {
|
||||
instance.interceptors.response.use(config => {
|
||||
return config
|
||||
}, err => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
}
|
||||
|
||||
export function createAxiosInstance (config?: AxiosRequestConfig, commonInterceptorConf: { request?: boolean, response?: boolean } = {}): AxiosInstance {
|
||||
const instance = Axios.create(config)
|
||||
|
||||
// Binding a unified interceptor, binding by default
|
||||
commonInterceptorConf.request !== false && bindCommonRequestInterceptors(instance)
|
||||
commonInterceptorConf.response !== false && bindCommonResponseInterceptors(instance)
|
||||
|
||||
return instance
|
||||
}
|
||||
|
||||
const singleAxios = createAxiosInstance({}, { request: true, response: false })
|
||||
|
||||
export default singleAxios
|
||||
@@ -0,0 +1,20 @@
|
||||
export const CURRENT_CONFIG = {
|
||||
|
||||
baseURL: 'Please enter the backend access address prefix.', // This url must end with "/". Example: 'http://192.168.1.1:6789/cloud/'
|
||||
websocketURL: 'Please enter the WebSocket access address.', // Example: 'ws://192.168.1.1:6789/api/v1/ws'
|
||||
|
||||
rtmpURL: 'Please enter the rtmp access address.', // Example: 'rtmp://192.168.1.1/live/'
|
||||
gb28181Para:
|
||||
'serverIP=Please enter the server ip.&serverPort=Please enter the server port.&serverID=Please enter the server id.' +
|
||||
'&agentID=Please enter the agent id.&agentPassword=Please enter the agent password' +
|
||||
'&localPort=Please enter the local port.&channel=Please enter the channel.',
|
||||
rtspPara: 'userName=Please enter the username.&password=Please enter the password&port=Please enter the port.',
|
||||
amapKey: 'Please enter the amap key.',
|
||||
agoraAPPID: 'Please enter the agora app id.',
|
||||
agoraToken: 'Please enter the agora token.',
|
||||
agoraChannel: 'Please enter the agora channel.',
|
||||
|
||||
appId: 'Please enter the app id.', // You need to go to the development website to apply.
|
||||
appKey: 'Please enter the app key.', // You need to go to the development website to apply.
|
||||
appLicense: 'Please enter the app license.' // You need to go to the development website to apply.
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import axios from 'axios'
|
||||
import { uuidv4 } from '/@/utils/uuid'
|
||||
import { CURRENT_CONFIG } from './config'
|
||||
export * from './type'
|
||||
const REQUEST_ID = 'X-Request-Id'
|
||||
function getAuthToken () {
|
||||
return localStorage.getItem('x-auth-token')
|
||||
}
|
||||
|
||||
const instance = axios.create({
|
||||
// withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
// timeout: 12000,
|
||||
})
|
||||
|
||||
instance.interceptors.request.use(
|
||||
config => {
|
||||
config.headers['X-Auth-Token'] = getAuthToken()
|
||||
// config.headers[REQUEST_ID] = uuidv4()
|
||||
config.baseURL = CURRENT_CONFIG.baseURL
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
instance.interceptors.response.use(
|
||||
response => response,
|
||||
err => {
|
||||
const requestId = err?.config?.headers && err?.config?.headers[REQUEST_ID]
|
||||
console.info('')
|
||||
if (requestId) {
|
||||
console.info(REQUEST_ID, '：', requestId)
|
||||
}
|
||||
console.info('url: ', err?.config?.url, `【${err?.config?.method}】 \n>>>> err: `, err)
|
||||
|
||||
let description = '-'
|
||||
if (err.response?.data && err.response.data.message) {
|
||||
description = err.response.data.message
|
||||
}
|
||||
if (err.response?.data && err.response.data.result) {
|
||||
description = err.response.data.result.message
|
||||
}
|
||||
// @See: https://github.com/axios/axios/issues/383
|
||||
if (!err.response || !err.response.status) {
|
||||
console.log('The network is abnormal, please check the network and try again')
|
||||
} else if (err.response?.status !== 200) {
|
||||
console.log(`ERROR_CODE: ${err.response?.status}`)
|
||||
}
|
||||
if (err.response?.status === 403) {
|
||||
// window.location.href = '/'
|
||||
}
|
||||
if (err.response?.status === 401) {
|
||||
console.log(err.response)
|
||||
}
|
||||
|
||||
return Promise.reject(err)
|
||||
},
|
||||
)
|
||||
|
||||
export default instance
|
||||
@@ -0,0 +1,38 @@
|
||||
export interface IResult {
|
||||
code: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface IPage {
|
||||
page: number;
|
||||
total: number;
|
||||
page_size: number;
|
||||
}
|
||||
|
||||
export interface IListWorkspaceResponse<T> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
list: T[];
|
||||
pagination: IPage;
|
||||
};
|
||||
}
|
||||
// Workspace
|
||||
export interface IWorkspaceResponse<T> {
|
||||
[x: string]: number;
|
||||
code: number;
|
||||
data: T;
|
||||
message: string;
|
||||
}
|
||||
export type IStatus = 'WAITING' | 'DOING' | 'SUCCESS' | 'FAILED';
|
||||
|
||||
export interface CommonListResponse<T> extends IResult {
|
||||
data: {
|
||||
list: T[];
|
||||
pagination: IPage;
|
||||
};
|
||||
}
|
||||
|
||||
export interface CommonResponse<T> extends IResult {
|
||||
data: T
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import request, { IWorkspaceResponse } from '/@/api/http/request'
|
||||
import { mapLayers } from '/@/constants/mock-layers'
|
||||
import { elementGroupsReq, PostElementsBody, PutElementsBody } from '/@/types/mapLayer'
|
||||
const PREFIX = '/map/api/v1'
|
||||
const workspace_id = localStorage.getItem('workspace-id')
|
||||
type UnknownResponse = Promise<IWorkspaceResponse<unknown>>
|
||||
// get elements group
|
||||
// export const getLayers = async (reqParams: elementGroupsReq): UnknownResponse => {
|
||||
// const url = `${PREFIX}/workspaces/${workspace_id}/element_groups`
|
||||
// const result = await request.get(url, {
|
||||
// params: {
|
||||
// group_id: reqParams.groupId,
|
||||
// is_distributed: reqParams.isDistributed
|
||||
// },
|
||||
// })
|
||||
// return result.data
|
||||
// }
|
||||
export const getLayers = async (reqParams: elementGroupsReq): UnknownResponse => {
|
||||
return mapLayers
|
||||
}
|
||||
|
||||
// Get elements groups request
|
||||
export const getElementGroupsReq = async (body: elementGroupsReq): Promise<IWorkspaceResponse<any>> => {
|
||||
const url = `${PREFIX}/workspaces/` + workspace_id + '/element-groups'
|
||||
const result = await request.get(url, body)
|
||||
return result.data
|
||||
}
|
||||
// add element
|
||||
export const postElementsReq = async (pid: string, body: PostElementsBody): Promise<IWorkspaceResponse<{ id: string }>> => {
|
||||
const url = `${PREFIX}/workspaces/` + workspace_id + `/element-groups/${pid}/elements`
|
||||
const result = await request.post(url, body)
|
||||
return result.data
|
||||
}
|
||||
// Update map element request
|
||||
export const updateElementsReq = async (id: string, body: PutElementsBody): Promise<IWorkspaceResponse<{ id: string }>> => {
|
||||
const url = `${PREFIX}/workspaces/` + workspace_id + `/elements/${id}`
|
||||
const result = await request.put(url, body)
|
||||
return result.data
|
||||
}
|
||||
// Delete map element
|
||||
export const deleteElementReq = async (id: string, body: {}): Promise<any> => {
|
||||
const url = `${PREFIX}/workspaces/` + workspace_id + `/elements/${id}`
|
||||
const result = await request.delete(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Delete layer elements
|
||||
export const deleteLayerEleReq = async (id: string, body: {}): Promise<any> => {
|
||||
const url = `${PREFIX}/workspaces/` + workspace_id + `/element-groups/${id}/elements`
|
||||
const result = await request.delete(url, body)
|
||||
return result.data
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import request, { IWorkspaceResponse } from '/@/api/http/request'
|
||||
const HTTP_PREFIX = '/manage/api/v1'
|
||||
|
||||
// login
|
||||
interface loginBody {
|
||||
username: string,
|
||||
password: string
|
||||
}
|
||||
export const login = async function (body: loginBody): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/login`
|
||||
const result = await request.post(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Refresh Token
|
||||
export const refreshToken = async function (body: {}): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/token/refresh`
|
||||
const result = await request.post(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Get Platform Info
|
||||
export const getPlatformInfo = async function (body: {}): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/workspaces/current`
|
||||
const result = await request.get(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Get User Info
|
||||
export const getUserInfo = async function (body: {}): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/users/current`
|
||||
const result = await request.get(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Get Device Topo
|
||||
export const getDeviceTopo = async function (body: {}): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/devices/devices`
|
||||
const result = await request.get(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Get Livestream Capacity
|
||||
export const getLiveCapacity = async function (body: {}): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/live/capacity`
|
||||
const result = await request.get(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Start Livestream
|
||||
export const startLivestream = async function (body: {}): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/live/streams/start`
|
||||
const result = await request.post(url, body)
|
||||
return result.data
|
||||
}
|
||||
|
||||
// Stop Livestream
|
||||
export const stopLivestream = async function (body: {}): Promise<IWorkspaceResponse<any>> {
|
||||
const url = `${HTTP_PREFIX}/live/streams/stop`
|
||||
const result = await request.post(url, body)
|
||||
return result.data
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import request from '/@/api/http/request'
|
||||
const HTTP_PREFIX = '/media/api/v1'
|
||||
|
||||
// Get Media Files
|
||||
export const getMediaFiles = async function (wid: string, body: {}): Promise<any> {
|
||||
const url = `${HTTP_PREFIX}/files/${wid}/files`
|
||||
const result = await request.get(url, body)
|
||||
return result.data
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
import { getRoot } from '/@/root'
|
||||
|
||||
const root = getRoot()
|
||||
const components = new Map()
|
||||
|
||||
declare let window:any
|
||||
|
||||
interface JsResponse{
|
||||
code:number,
|
||||
message:string,
|
||||
data:{}
|
||||
}
|
||||
|
||||
export default {
|
||||
init () {
|
||||
components.set('thing', {
|
||||
host: '',
|
||||
connectCallback: '',
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
components.set('liveshare', {
|
||||
videoPublishType: 'video-demand-aux-manual', // video-on-demand、video-by-manual、video-demand-aux-manual
|
||||
statusCallback: ''
|
||||
})
|
||||
components.set('map', {
|
||||
userName: '',
|
||||
elementPreName: ''
|
||||
})
|
||||
components.set('ws', {
|
||||
host: '',
|
||||
token: '',
|
||||
connectCallback: ''
|
||||
})
|
||||
components.set('api', {
|
||||
host: '',
|
||||
token: ''
|
||||
})
|
||||
components.set('tsa', {
|
||||
})
|
||||
components.set('media', {
|
||||
autoUploadPhoto: true, // 是否自动上传图片, 非必需
|
||||
autoUploadPhotoType: 1, // 自动上传的照片类型，0：原图， 1：缩略图， 非必需
|
||||
autoUploadVideo: true // 是否自动上传视频， 非必需
|
||||
})
|
||||
components.set('mission', {
|
||||
})
|
||||
},
|
||||
getComponentParam (key:string) {
|
||||
return components.get(key)
|
||||
},
|
||||
setComponentParam (key:string, value:any) {
|
||||
components.set(key, value)
|
||||
},
|
||||
loadComponent (name:string, param:any):string {
|
||||
return window.djiBridge.platformLoadComponent(name, JSON.stringify(param))
|
||||
},
|
||||
unloadComponent (name:string) :string {
|
||||
return window.djiBridge.platformUnloadComponent(name)
|
||||
},
|
||||
isComponentLoaded (module:string):string {
|
||||
return window.djiBridge.platformIsComponentLoaded(module)
|
||||
},
|
||||
setWorkspaceId (uuid:string):string {
|
||||
return window.djiBridge.platformSetWorkspaceId(uuid)
|
||||
},
|
||||
setPlatformMessage (platformName:string, title:string, desc:string):string {
|
||||
return window.djiBridge.platformSetInformation(platformName, title, desc)
|
||||
},
|
||||
getRemoteControllerSN () :string {
|
||||
return window.djiBridge.platformGetRemoteControllerSN()
|
||||
},
|
||||
getAircraftSN ():string {
|
||||
return window.djiBridge.platformGetAircraftSN()
|
||||
},
|
||||
stopwebview ():string {
|
||||
return window.djiBridge.platformStopSelf()
|
||||
},
|
||||
getToken () :string {
|
||||
const res:string = this.isComponentLoaded('api')
|
||||
const resObj = JSON.parse(res)
|
||||
console.log('api load status:', resObj)
|
||||
if (resObj.data === true) {
|
||||
const tokenRes = JSON.parse(window.djiBridge.apiGetToken())
|
||||
return tokenRes.data
|
||||
} else {
|
||||
console.warn('warning: not api component loaded!!')
|
||||
return ''
|
||||
}
|
||||
},
|
||||
setToken (token:string):string {
|
||||
return window.djiBridge.apiSetToken(token)
|
||||
},
|
||||
setLogEncryptKey (key:string):string {
|
||||
return window.djiBridge.platformSetLogEncryptKey(key)
|
||||
},
|
||||
clearLogEncryptKey ():string {
|
||||
return window.djiBridge.platformClearLogEncryptKey()
|
||||
},
|
||||
getLogPath ():string {
|
||||
return window.djiBridge.platformGetLogPath()
|
||||
},
|
||||
platformVerifyLicense (appId:string, appKey:string, appLicense:string):string {
|
||||
return window.djiBridge.platformVerifyLicense(appId, appKey, appLicense)
|
||||
},
|
||||
isPlatformVerifySuccess ():string {
|
||||
return window.djiBridge.platformIsVerified()
|
||||
},
|
||||
// liveshare
|
||||
/**
|
||||
*
|
||||
* @param type
|
||||
* video-on-demand: 服务器点播，依赖于thing模块，具体的点播命令参见设备物模型的直播服务
|
||||
* video-by-manual：手动点播，配置好直播类型参数之后，在图传页面可修改直播参数，停止直播
|
||||
* video-demand-aux-manual: 混合模式，支持服务器点播，以及图传页面修改直播参数，停止直播
|
||||
*/
|
||||
setVideoPublishType (type:string):string {
|
||||
return window.djiBridge.liveshareSetVideoPublishType(type)
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns
|
||||
* type: liveshare type， 0：unknown, 1:agora, 2:rtmp, 3:rtsp, 4:gb28181
|
||||
*/
|
||||
getLiveshareConfig () {
|
||||
return window.djiBridge.liveshareGetConfig()
|
||||
},
|
||||
|
||||
setLiveshareConfig (type:number, params:string):string {
|
||||
return window.djiBridge.liveshareSetConfig(type, params)
|
||||
},
|
||||
|
||||
setLiveshareStatusCallback (callbackFunc:string) :string {
|
||||
return window.djiBridge.liveshareSetStatusCallback(callbackFunc)
|
||||
},
|
||||
getLiveshareStatus () {
|
||||
return window.djiBridge.liveshareGetStatus()
|
||||
},
|
||||
startLiveshare ():string {
|
||||
return window.djiBridge.liveshareStartLive()
|
||||
},
|
||||
stopLiveshare ():string {
|
||||
return window.djiBridge.liveshareStopLive()
|
||||
},
|
||||
// media
|
||||
setAutoUploadPhoto (auto:boolean):string {
|
||||
return window.djiBridge.mediaSetAutoUploadPhoto(auto)
|
||||
},
|
||||
getAutoUploadPhoto () {
|
||||
return window.djiBridge.mediaGetAutoUploadPhoto()
|
||||
},
|
||||
setUploadPhotoType (type:number):string {
|
||||
return window.djiBridge.mediaSetUploadPhotoType(type)
|
||||
},
|
||||
getUploadPhotoType () {
|
||||
return window.djiBridge.mediaGetUploadPhotoType()
|
||||
},
|
||||
setAutoUploadVideo (auto:boolean):string {
|
||||
return window.djiBridge.mediaSetAutoUploadVideo(auto)
|
||||
},
|
||||
getAutoUploadVideo () {
|
||||
return window.djiBridge.mediaGetAutoUploadVideo()
|
||||
},
|
||||
setDownloadOwner (rcIndex:number):string {
|
||||
return window.djiBridge.mediaSetDownloadOwner(rcIndex)
|
||||
},
|
||||
getDownloadOwner () {
|
||||
return window.djiBridge.mediaGetDownloadOwner()
|
||||
},
|
||||
onBackClickReg () {
|
||||
window.djiBridge.onBackClick = () => {
|
||||
if (root.$router.currentRoute.value.path === '/pilot-home') {
|
||||
console.log(root.$router.currentRoute.value.path)
|
||||
return false
|
||||
} else {
|
||||
console.log(root.$router.currentRoute.value.path)
|
||||
history.go(-1)
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import request from '/@/api/http/request'
|
||||
const HTTP_PREFIX = '/wayline/api/v1'
|
||||
|
||||
// Get Wayline Files
|
||||
export const getWaylineFiles = async function (wid: string, body: {}): Promise<any> {
|
||||
const url = `${HTTP_PREFIX}/workspaces/${wid}/waylines?` + 'order_by=' + body.order_by + '&page=' + body.page + '&page_size=' + body.page_size
|
||||
const result = await request.get(url)
|
||||
return result.data
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import ReconnectingWebSocket from 'reconnecting-websocket'
|
||||
import { CURRENT_CONFIG as config } from '/@/api/http/config'
|
||||
|
||||
let socket = {}
|
||||
|
||||
export default {
|
||||
init (getMsgFunc) {
|
||||
const token = localStorage.getItem('x-auth-token')
|
||||
const wspath =
|
||||
config.websocketURL + '?x-auth-token=' + escape(token)
|
||||
socket = new ReconnectingWebSocket(wspath)
|
||||
socket.onopen = this.onOpen
|
||||
socket.onerror = this.onError
|
||||
socket.onmessage = getMsgFunc
|
||||
socket.onclose = this.onClose
|
||||
return socket
|
||||
},
|
||||
onOpen () {
|
||||
console.log('ws opened')
|
||||
},
|
||||
onError (err) {
|
||||
console.error(err)
|
||||
},
|
||||
onClose () {
|
||||
console.log('ws closed')
|
||||
},
|
||||
sendMsg (data) {
|
||||
this.socket.send(data)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>ic/panel/checkbox_active</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="ic/panel/checkbox_active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group-3" fill="#FFFFFF">
|
||||
<polygon id="Shape-Copy" points="11.2103387 4.23529412 6.47425817 8.97137463 4.50089127 6.99800776 2.82352941 8.65563591 4.79689632 10.6290028 6.37558979 12.2076964 6.47425817 12.286631 12.8877005 5.8929223"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 731 B |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 652 652" style="enable-background:new 0 0 652 652;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#241F1F;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M464.9,404.7l44.3-183.9h-95l-40.5,164.9c-5.9,32.2-40.4,47.2-64.9,47.6h-67.3l-22.9,66.3h141.5
|
||||
C395,499.6,446.5,481.8,464.9,404.7"/>
|
||||
<path class="st0" d="M265.5,339.9L310.1,153h97.8l-50.8,212.6c-9.8,41.1-40.3,50.9-68.5,50.9H63.2c-24.8,0-45.6-10.6-34.4-58
|
||||
l20.3-84.8c10.3-43,42.3-52.9,65.4-52.9h157.3l-12.7,53h-80.3c-11.8,0-18.3,2.6-21.6,16.3l-13,54.1c-4.6,19.4,2.2,20.8,16.4,20.8
|
||||
h73.6C247.8,365.2,259.6,364.3,265.5,339.9"/>
|
||||
<polygon class="st0" points="530.7,220.9 484.6,416.5 579.7,416.5 625.7,220.9 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 952 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs><path d="m14.042 0 14.043 8.055-5.128 2.941 5.128 2.941-5.127 2.94 5.127 2.942-14.043 8.055L0 19.82l5.126-2.942L0 13.937l5.127-2.941L0 8.056 14.042 0zM7.638 18.318l-2.614 1.5 9.018 5.175 9.017-5.174-2.614-1.5-6.403 3.674-6.404-3.675zm0-5.882-2.615 1.5 9.02 5.175 9.017-5.173-2.615-1.501-6.403 3.674-6.404-3.675zm6.404-9.554L5.024 8.056l9.018 5.174 9.017-5.174-9.017-5.174z" id="layer_a"></path></defs><g transform="translate(2 2)" fill-rule="evenodd"><mask id="layer_b"><use xlink:href="#layer_a"></use></mask><use fill-rule="nonzero" xlink:href="#layer_a"></use><g mask="url(#layer_b)"><path d="M-19-20h68v68h-68z"></path></g></g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 830 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs><path d="M29.5 4v21.5h-4v2H3V8h3V4h23.5zM10.553 18.859 5.5 22.399V25H23v-6.088l-7.011 5.108-5.436-5.161zM27 6.5H8.499L8.5 8h17v15H27V6.5zm-4 4H5.5v8.847l5.293-3.707 5.406 5.133L23 15.819V10.5zm-6.362 1.956a2 2 0 1 1 0 4 2 2 0 0 1 0-4z" id="media_a"></path></defs><g fill-rule="evenodd"><mask id="media_b"><use xlink:href="#media_a"></use></mask><use fill-rule="nonzero" xlink:href="#media_a"></use><g mask="url(#media_b)"><path d="M-17-18h68v68h-68z"></path></g></g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 666 B |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>2图标/24px/pin</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M6.56239716,0 L13.1247943,9.89949494 L6.56239716,19.7989899 L0,9.89949494 L6.56239716,0 Z M6.56239716,3.61897251 L2.39965953,9.89878783 L6.56239716,16.1786032 L10.7251348,9.89878783 L6.56239716,3.61897251 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="2图标//24px/pin" stroke="none" stroke-width="1" fill="#19BE6B" fill-rule="evenodd">
|
||||
<g id="编组" transform="translate(5.000000, 2.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="形状" fill="#19BE6B" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="1颜色/ic色/nor" mask="url(#mask-2)" fill="#19BE6B">
|
||||
<g transform="translate(-26.000000, -26.000000)">
|
||||
<rect x="0" y="0" width="68" height="68"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 1.2 KiB |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>2图标/24px/pin</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M6.56239716,0 L13.1247943,9.89949494 L6.56239716,19.7989899 L0,9.89949494 L6.56239716,0 Z M6.56239716,3.61897251 L2.39965953,9.89878783 L6.56239716,16.1786032 L10.7251348,9.89878783 L6.56239716,3.61897251 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="2图标//24px/pin" stroke="none" stroke-width="1" fill="#212121" fill-rule="evenodd">
|
||||
<g id="编组" transform="translate(5.000000, 2.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="形状" fill="#212121" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="1颜色/ic色/nor" mask="url(#mask-2)" fill="#212121">
|
||||
<g transform="translate(-26.000000, -26.000000)">
|
||||
<rect x="0" y="0" width="68" height="68"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 1.2 KiB |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>2图标/24px/pin</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M6.56239716,0 L13.1247943,9.89949494 L6.56239716,19.7989899 L0,9.89949494 L6.56239716,0 Z M6.56239716,3.61897251 L2.39965953,9.89878783 L6.56239716,16.1786032 L10.7251348,9.89878783 L6.56239716,3.61897251 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="2图标//24px/pin" stroke="none" stroke-width="1" fill="#2D8CF0" fill-rule="evenodd">
|
||||
<g id="编组" transform="translate(5.000000, 2.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="形状" fill="#2D8CF0" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="1颜色/ic色/nor" mask="url(#mask-2)" fill="#2D8CF0">
|
||||
<g transform="translate(-26.000000, -26.000000)">
|
||||
<rect x="0" y="0" width="68" height="68"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 1.2 KiB |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>2图标/24px/pin</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M6.56239716,0 L13.1247943,9.89949494 L6.56239716,19.7989899 L0,9.89949494 L6.56239716,0 Z M6.56239716,3.61897251 L2.39965953,9.89878783 L6.56239716,16.1786032 L10.7251348,9.89878783 L6.56239716,3.61897251 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="2图标//24px/pin" stroke="none" stroke-width="1" fill="#b620e0" fill-rule="evenodd">
|
||||
<g id="编组" transform="translate(5.000000, 2.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="形状" fill="#b620e0" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="1颜色/ic色/nor" mask="url(#mask-2)" fill="#b620e0">
|
||||
<g transform="translate(-26.000000, -26.000000)">
|
||||
<rect x="0" y="0" width="68" height="68"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 1.2 KiB |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>2图标/24px/pin</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M6.56239716,0 L13.1247943,9.89949494 L6.56239716,19.7989899 L0,9.89949494 L6.56239716,0 Z M6.56239716,3.61897251 L2.39965953,9.89878783 L6.56239716,16.1786032 L10.7251348,9.89878783 L6.56239716,3.61897251 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="2图标//24px/pin" stroke="none" stroke-width="1" fill="#e23c39" fill-rule="evenodd">
|
||||
<g id="编组" transform="translate(5.000000, 2.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="形状" fill="#e23c39" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="1颜色/ic色/nor" mask="url(#mask-2)" fill="#e23c39">
|
||||
<g transform="translate(-26.000000, -26.000000)">
|
||||
<rect x="0" y="0" width="68" height="68"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 1.2 KiB |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>2图标/24px/pin</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M6.56239716,0 L13.1247943,9.89949494 L6.56239716,19.7989899 L0,9.89949494 L6.56239716,0 Z M6.56239716,3.61897251 L2.39965953,9.89878783 L6.56239716,16.1786032 L10.7251348,9.89878783 L6.56239716,3.61897251 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="2图标//24px/pin" stroke="none" stroke-width="1" fill="#FFBB00" fill-rule="evenodd">
|
||||
<g id="编组" transform="translate(5.000000, 2.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="形状" fill="#FFBB00" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="1颜色/ic色/nor" mask="url(#mask-2)" fill="#FFBB00">
|
||||
<g transform="translate(-26.000000, -26.000000)">
|
||||
<rect x="0" y="0" width="68" height="68"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 1.2 KiB |
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path d="m19.87 10.131-1.01 2.518-.86-.012v-.006l-7.045.002-.068.004a1.75 1.75 0 0 0-1.614 1.737l.006.144.656 8.388h4.804l-1.005 2.5h-6.11l-.168-2.137H.544l-.53-6.896a4.25 4.25 0 0 1 4.03-4.598l.206-.005h2.48a4.25 4.25 0 0 1 .873.09 4.238 4.238 0 0 1 3.089-1.716l.166-.01.166-.003h8.846zm1.106 1.7 5.476 13.566-5.454-1.781-5.497 1.78 5.475-13.565zm.008 4.028.011 6.18H21l2.854.931-2.87-7.111zm-14.21-1.588L4.25 14.27a1.75 1.75 0 0 0-1.75 1.75l.007.153.352 4.597 4.401-.001-.473-6.056a4.3 4.3 0 0 1-.012-.442zM6.193 3.748a3.25 3.25 0 1 1 0 6.5 3.25 3.25 0 0 1 0-6.5zM14.3 0a4.25 4.25 0 1 1 0 8.5 4.25 4.25 0 0 1 0-8.5zM6.192 5.748a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zM14.3 2a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5z" id="team_a">
|
||||
</path>
|
||||
</defs>
|
||||
<g transform="translate(3 3)" fill-rule="evenodd">
|
||||
<mask id="team_b">
|
||||
<use xlink:href="#team_a"></use>
|
||||
</mask>
|
||||
<use fill-rule="nonzero" xlink:href="#team_a"></use>
|
||||
<g mask="url(#team_b)"><path d="M-20-21h68v68h-68z"></path>
|
||||
</g></g>
|
||||
</svg>
|
||||
|
Depois Largura: | Altura: | Tamanho: 1.2 KiB |
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="g-map-wrapper">
|
||||
<div id="g-container" :style="{ width: '100%', height: '100%' }" />
|
||||
<div
|
||||
class="g-action-panle"
|
||||
:style="{ right: drawVisible ? '316px' : '16px' }"
|
||||
>
|
||||
<div class="g-action-item" @click="draw('pin', true)">
|
||||
<a-button type="primary">PIN</a-button>
|
||||
</div>
|
||||
<div class="g-action-item" @click="draw('polyline', true)">
|
||||
<a-button type="primary">Line</a-button>
|
||||
</div>
|
||||
<div class="g-action-item" @click="draw('polygon', true)">
|
||||
<a-button type="primary">Poly</a-button>
|
||||
</div>
|
||||
<div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">
|
||||
<a-button type="primary" danger>X</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
|
||||
import {
|
||||
generateLineContent,
|
||||
generatePointContent,
|
||||
generatePolyContent
|
||||
} from '../utils/map-layer-utils'
|
||||
import { postElementsReq } from '/@/api/layer'
|
||||
import { MapDoodleType, MapElementEnum } from '/@/constants/map'
|
||||
import { useGMapManage } from '/@/hooks/use-g-map'
|
||||
import { useGMapCover } from '/@/hooks/use-g-map-cover'
|
||||
import { useMouseTool } from '/@/hooks/use-mouse-tool'
|
||||
import { getApp } from '/@/root'
|
||||
import { useMyStore } from '/@/store'
|
||||
import { GeojsonCoordinate } from '/@/types/map'
|
||||
import { MapDoodleEnum } from '/@/types/map-enum'
|
||||
import { PostElementsBody } from '/@/types/mapLayer'
|
||||
import { uuidv4 } from '/@/utils/uuid'
|
||||
import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'GMap',
|
||||
props: {},
|
||||
setup () {
|
||||
const useMouseToolHook = useMouseTool()
|
||||
const useGMapManageHook = useGMapManage()
|
||||
|
||||
const mouseMode = ref(false)
|
||||
const store = useMyStore()
|
||||
const state = reactive({
|
||||
currentType: '',
|
||||
coverIndex: 0
|
||||
})
|
||||
const shareId = computed(() => {
|
||||
return store.state.layerBaseInfo.share
|
||||
})
|
||||
const defaultId = computed(() => {
|
||||
return store.state.layerBaseInfo.default
|
||||
})
|
||||
const drawVisible = computed(() => {
|
||||
return store.state.drawVisible
|
||||
})
|
||||
watch(
|
||||
() => store.state.wsEvent,
|
||||
newData => {
|
||||
const useGMapCoverHook = useGMapCover()
|
||||
const event = newData
|
||||
let exist = false
|
||||
if (Object.keys(event.mapElementCreat).length !== 0) {
|
||||
console.log(event.mapElementCreat)
|
||||
const ele = event.mapElementCreat
|
||||
store.state.Layers.forEach(layer => {
|
||||
layer.elements.forEach(e => {
|
||||
if (e.id === ele.id) {
|
||||
exist = true
|
||||
console.log('true')
|
||||
}
|
||||
})
|
||||
})
|
||||
if (exist === false) {
|
||||
setLayers({
|
||||
id: ele.id,
|
||||
name: ele.name,
|
||||
resource: ele.resource
|
||||
})
|
||||
|
||||
updateCoordinates('wgs84-gcj02', ele)
|
||||
useGMapCoverHook.init2DPin(
|
||||
ele.name,
|
||||
ele.resource.content.geometry.coordinates,
|
||||
ele.resource.content.properties.color,
|
||||
{
|
||||
id: ele.id,
|
||||
name: ele.name
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
store.state.wsEvent.mapElementCreat = {}
|
||||
}
|
||||
if (Object.keys(event.mapElementUpdate).length !== 0) {
|
||||
console.log(event.mapElementUpdate)
|
||||
console.log('该功能还未实现，请开发商自己增加')
|
||||
store.state.wsEvent.mapElementUpdate = {}
|
||||
}
|
||||
if (Object.keys(event.mapElementDelete).length !== 0) {
|
||||
console.log(event.mapElementDelete)
|
||||
console.log('该功能还未实现，请开发商自己增加')
|
||||
store.state.wsEvent.mapElementDelete = {}
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
function draw (type: MapDoodleType, bool: boolean) {
|
||||
state.currentType = type
|
||||
useMouseToolHook.mouseTool(type, getDrawCallback)
|
||||
mouseMode.value = bool
|
||||
}
|
||||
onMounted(() => {
|
||||
const app = getApp()
|
||||
useGMapManageHook.globalPropertiesConfig(app)
|
||||
})
|
||||
function getDrawCallback ({ obj }) {
|
||||
switch (state.currentType) {
|
||||
case MapDoodleEnum.PIN:
|
||||
postPinPositionResource(obj)
|
||||
break
|
||||
case MapDoodleEnum.POLYLINE:
|
||||
postPolylineResource(obj)
|
||||
break
|
||||
case MapDoodleEnum.POLYGON:
|
||||
postPolygonResource(obj)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
async function postPinPositionResource (obj) {
|
||||
const req = getPinPositionResource(obj)
|
||||
setLayers(req)
|
||||
updateCoordinates('gcj02-wgs84', req)
|
||||
const result = await postElementsReq(shareId.value, req)
|
||||
obj.setExtData({ id: req.id, name: req.name })
|
||||
store.state.coverList.push(obj)
|
||||
// console.log(store.state.coverList)
|
||||
}
|
||||
async function postPolylineResource (obj) {
|
||||
const req = getPolylineResource(obj)
|
||||
setLayers(req)
|
||||
updateCoordinates('gcj02-wgs84', req)
|
||||
const result = await postElementsReq(shareId.value, req)
|
||||
obj.setExtData({ id: req.id, name: req.name })
|
||||
store.state.coverList.push(obj)
|
||||
// console.log(store.state.coverList)
|
||||
}
|
||||
async function postPolygonResource (obj) {
|
||||
const req = getPoygonResource(obj)
|
||||
setLayers(req)
|
||||
updateCoordinates('gcj02-wgs84', req)
|
||||
const result = await postElementsReq(shareId.value, req)
|
||||
obj.setExtData({ id: req.id, name: req.name })
|
||||
store.state.coverList.push(obj)
|
||||
// console.log(store.state.coverList)
|
||||
}
|
||||
|
||||
function getPinPositionResource (obj) {
|
||||
const position = obj.getPosition()
|
||||
const resource = generatePointContent(position)
|
||||
const name = obj._originOpts.title
|
||||
const id = uuidv4()
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
resource
|
||||
}
|
||||
}
|
||||
function getPolylineResource (obj) {
|
||||
const path = obj.getPath()
|
||||
const resource = generateLineContent(path)
|
||||
const { name, id } = getBaseInfo(obj._opts)
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
resource
|
||||
}
|
||||
}
|
||||
function getPoygonResource (obj) {
|
||||
const path = obj.getPath()
|
||||
const resource = generatePolyContent(path)
|
||||
const { name, id } = getBaseInfo(obj._opts)
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
resource
|
||||
}
|
||||
}
|
||||
function getBaseInfo (obj) {
|
||||
const name = obj.title
|
||||
const id = uuidv4()
|
||||
return { name, id }
|
||||
}
|
||||
function setLayers (resource: PostElementsBody) {
|
||||
const layers = store.state.Layers
|
||||
const layer = layers.find(item => item.id.includes(shareId.value))
|
||||
// layer.id = 'private_layer' + uuidv4()
|
||||
// layer?.elements.push(resource)
|
||||
if (layer?.elements) {
|
||||
;(layer?.elements as any[]).push(resource)
|
||||
}
|
||||
console.log('layers', layers)
|
||||
store.commit('SET_LAYER_INFO', layers)
|
||||
}
|
||||
function updateCoordinates (transformType: string, element: any) {
|
||||
const geoType = element.resource?.content.geometry.type
|
||||
const type = element.resource?.type as number
|
||||
if (element.resource) {
|
||||
if (MapElementEnum.PIN === type) {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates as GeojsonCoordinate
|
||||
if (transformType === 'wgs84-gcj02') {
|
||||
const transResult = wgs84togcj02(
|
||||
coordinates[0],
|
||||
coordinates[1]
|
||||
) as GeojsonCoordinate
|
||||
element.resource.content.geometry.coordinates = transResult
|
||||
} else if (transformType === 'gcj02-wgs84') {
|
||||
const transResult = gcj02towgs84(
|
||||
coordinates[0],
|
||||
coordinates[1]
|
||||
) as GeojsonCoordinate
|
||||
element.resource.content.geometry.coordinates = transResult
|
||||
}
|
||||
} else if (MapElementEnum.LINE === type && geoType === 'LineString') {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates as GeojsonCoordinate[]
|
||||
if (transformType === 'wgs84-gcj02') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = wgs84togcj02(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
} else if (transformType === 'gcj02-wgs84') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = gcj02towgs84(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
}
|
||||
element.resource.content.geometry.coordinates = coordinates
|
||||
} else if (MapElementEnum.LINE === type && geoType === 'Polygon') {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates[0] as GeojsonCoordinate[]
|
||||
|
||||
if (transformType === 'wgs84-gcj02') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = wgs84togcj02(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
} else if (transformType === 'gcj02-wgs84') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = gcj02towgs84(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
}
|
||||
element.resource.content.geometry.coordinates = [coordinates]
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
draw,
|
||||
mouseMode,
|
||||
drawVisible
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.g-map-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.g-action-panle {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
.g-action-item {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.amap-logo {
|
||||
opacity: 0;
|
||||
}
|
||||
.amap-copyright {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<span>
|
||||
<a-tree
|
||||
draggable
|
||||
:defaultExpandAll="true"
|
||||
class="device-map-layers"
|
||||
@drop="onDrop"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<a-tree-node
|
||||
:title="layer.name"
|
||||
:id="layer.id"
|
||||
v-for="layer in getTreeData"
|
||||
:key="layer.id"
|
||||
>
|
||||
<!-- <template #title>
|
||||
{{layer.name}}
|
||||
</template> -->
|
||||
<template v-if="layer.elements">
|
||||
<a-tree-node
|
||||
v-for="resource in layer.elements"
|
||||
:id="getLayerTreeKey('resource', resource.id)"
|
||||
:key="getLayerTreeKey('resource', resource.id)"
|
||||
>
|
||||
<template #title>
|
||||
{{ resource.name }}
|
||||
</template>
|
||||
</a-tree-node>
|
||||
</template>
|
||||
</a-tree-node>
|
||||
</a-tree>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineProps, PropType, reactive } from 'vue'
|
||||
import { useMyStore } from '/@/store'
|
||||
import { DropEvent, mapLayer } from '/@/types/mapLayer'
|
||||
import { getLayerTreeKey } from '/@/utils/layer-tree'
|
||||
const store = useMyStore()
|
||||
const props = defineProps({
|
||||
layerData: Array as PropType<mapLayer[]>
|
||||
})
|
||||
const state = reactive({
|
||||
checkedKeys: [] as string[],
|
||||
expandedKeys: [] as string[]
|
||||
})
|
||||
const getTreeData = computed(() => {
|
||||
// console.log('props.treeData', JSON.parse(JSON.stringify(props.layerData)))
|
||||
return JSON.parse(JSON.stringify(props.layerData))
|
||||
})
|
||||
const shareId = computed(() => {
|
||||
return store.state.layerBaseInfo.share
|
||||
})
|
||||
const defaultId = computed(() => {
|
||||
return store.state.layerBaseInfo.default
|
||||
})
|
||||
async function onDrop ({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
|
||||
let _treeData = props.layerData || []
|
||||
let dragKey = dragNode.eventKey
|
||||
dragKey = dragKey.replaceAll('resource__', '')
|
||||
const dropPos = node.pos.split('-')
|
||||
let dropKey =
|
||||
node.eventKey.includes(shareId.value) ||
|
||||
node.eventKey.includes(defaultId.value)
|
||||
? node.eventKey
|
||||
: node.$parent.eventKey
|
||||
if (!dragKey || !dropKey) return
|
||||
dropKey = dropKey.replaceAll('resource__', '')
|
||||
const loop = (data: mapLayer[], key: string, callback: Function) => {
|
||||
data.forEach((item, index, arr) => {
|
||||
if (item.id === key) {
|
||||
return callback(item, index, arr)
|
||||
}
|
||||
|
||||
if (item.elements) {
|
||||
return loop(item.elements, key, callback)
|
||||
}
|
||||
})
|
||||
}
|
||||
const data = [..._treeData] as mapLayer[]
|
||||
// Find dragObject
|
||||
let dragObj = {} as mapLayer
|
||||
loop(data, dragKey, (item: mapLayer, index: number, arr: mapLayer[]) => {
|
||||
arr.splice(index, 1)
|
||||
dragObj = item
|
||||
})
|
||||
if (!dropToGap) {
|
||||
// Drop on the content
|
||||
loop(data, dropKey, (item: mapLayer) => {
|
||||
item.elements = item.elements || []
|
||||
// where to insert 示例添加到尾部，可以是随意位置
|
||||
item.elements.push(dragObj)
|
||||
})
|
||||
}
|
||||
_treeData = data
|
||||
// console.log('_treeData', _treeData)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$antPrefix: 'ant';
|
||||
.device-map-layers.#{$antPrefix}-tree {
|
||||
color: #fff;
|
||||
|
||||
.#{$antPrefix}-tree-checkbox:not(.#{$antPrefix}-tree-checkbox-checked)
|
||||
.#{$antPrefix}-tree-checkbox-inner {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// 第一个层级的 li，有左边距 16px
|
||||
> li {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&.#{$antPrefix}-tree-treenode-disabled
|
||||
> .#{$antPrefix}-tree-node-content-wrapper {
|
||||
height: 20px;
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{$antPrefix}-tree-switcher {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.#{$antPrefix}-tree-checkbox {
|
||||
z-index: 1;
|
||||
}
|
||||
.#{$antPrefix}-tree-checkbox:hover::after,
|
||||
.#{$antPrefix}-tree-checkbox-wrapper:hover
|
||||
.#{$antPrefix}-tree-checkbox::after {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.#{$antPrefix}-tree-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$antPrefix}-tree-node-content-wrapper {
|
||||
color: #fff;
|
||||
width: calc(100% - 46px);
|
||||
flex: 1;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
min-width: 0; // 解决文字溢出不会省略的问题
|
||||
padding-right: 0;
|
||||
|
||||
&:not([draggable='true']) {
|
||||
border-top: 2px transparent solid;
|
||||
border-bottom: 2px transparent solid;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
> span {
|
||||
&::before {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
height: 28px;
|
||||
transition: all 0.3s;
|
||||
content: '';
|
||||
}
|
||||
|
||||
// 进度条组件需要相对最外层定位，进度条组件的position不能设置为relative
|
||||
> *:not(.progress-wrapper) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$antPrefix}-tree-node-selected {
|
||||
background-color: transparent;
|
||||
color: #2d8cf0;
|
||||
> span {
|
||||
&::before {
|
||||
background-color: #4f4f4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_open
|
||||
.#{$antPrefix}-tree-switcher-icon {
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_close
|
||||
.#{$antPrefix}-tree-switcher-icon {
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="media-panel-wrapper">
|
||||
<div class="header">Media</div>
|
||||
<a-button type="primary" style="margin-top:20px" @click="onRefresh"
|
||||
>Refresh</a-button
|
||||
>
|
||||
<a-table class="media-table" :columns="columns" :data-source="data">
|
||||
<template #name="{ text, record }">
|
||||
<a :href="record.preview_url">{{ text }}</a>
|
||||
</template>
|
||||
<template #action>
|
||||
<span class="action-area">
|
||||
action
|
||||
</span>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from '@vue/reactivity'
|
||||
import { getMediaFiles } from '/@/api/media'
|
||||
const columns = [
|
||||
{
|
||||
title: 'FileName',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
slots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: 'FileSize',
|
||||
dataIndex: 'size',
|
||||
key: 'size'
|
||||
},
|
||||
{
|
||||
title: 'PayloadType',
|
||||
dataIndex: 'payload_type',
|
||||
key: 'payload_type',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
const data = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: 'name1',
|
||||
size: 32,
|
||||
payload_type: 'PM320_DUAL',
|
||||
preview_url: ''
|
||||
}
|
||||
])
|
||||
const onRefresh = async () => {
|
||||
const wid = localStorage.getItem('workspace-id')
|
||||
data.value = []
|
||||
const index = 1
|
||||
const res = await getMediaFiles(wid, {})
|
||||
res.data.forEach(ele => {
|
||||
data.value.push({
|
||||
key: index.toString(),
|
||||
name: ele.file_name
|
||||
})
|
||||
})
|
||||
console.log(res)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.media-panel-wrapper {
|
||||
width: 100%;
|
||||
.media-table {
|
||||
background: #fff;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
padding: 16px 24px;
|
||||
font-size: 20px;
|
||||
text-align: start;
|
||||
color: #000;
|
||||
}
|
||||
.action-area {
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<svg :class="svgClass" :aria-hidden="true" :style="{color: color, width:computedWidth, height:computedWidth}">
|
||||
<use :xlink:href="iconName" :fill="color"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, computed } from 'vue'
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
},
|
||||
})
|
||||
const iconName = computed(() => `#icon-${props.name}`)
|
||||
const svgClass = computed(() => {
|
||||
console.log(props.name, 'props.name')
|
||||
if (props.name) {
|
||||
return `svg-icon icon-${props.name}`
|
||||
}
|
||||
return 'svg-icon'
|
||||
})
|
||||
const computedWidth = computed(() => {
|
||||
const result = props.width || props.size
|
||||
return result ? result + 'px' : '1em'
|
||||
})
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="panel-wrapper">
|
||||
<div class="header">Wayline Library</div>
|
||||
<a-button type="primary" style="margin-top:20px" @click="onRefresh"
|
||||
>Refresh</a-button
|
||||
>
|
||||
<a-table class="table" :columns="columns" :data-source="data">
|
||||
<template #name="{ text, record }">
|
||||
<a :href="record.preview_url">{{ text }}</a>
|
||||
</template>
|
||||
<template #action>
|
||||
<span class="action-area">
|
||||
action
|
||||
</span>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from '@vue/reactivity'
|
||||
import { onMounted } from 'vue'
|
||||
import { getWaylineFiles } from '/@/api/wayline'
|
||||
const columns = [
|
||||
{
|
||||
title: 'FileName',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
slots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: 'TemplateType',
|
||||
dataIndex: 'template_type',
|
||||
key: 'template_type'
|
||||
},
|
||||
{
|
||||
title: 'Favorited',
|
||||
dataIndex: 'favorite',
|
||||
key: 'favorite'
|
||||
},
|
||||
{
|
||||
title: 'DroneType',
|
||||
dataIndex: 'drone_type',
|
||||
key: 'drone_type'
|
||||
},
|
||||
{
|
||||
title: 'PayloadType',
|
||||
dataIndex: 'payload_type',
|
||||
key: 'payload_type'
|
||||
},
|
||||
{
|
||||
title: 'User',
|
||||
dataIndex: 'user',
|
||||
key: 'user'
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
const data = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: 'name1',
|
||||
template_type: '0',
|
||||
drone_type: '0-60-0',
|
||||
payload_type: 'PM320_DUAL',
|
||||
user: 'pilot',
|
||||
favorited: 'true'
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
onRefresh()
|
||||
})
|
||||
const onRefresh = async () => {
|
||||
const wid: string = localStorage.getItem('workspace-id')
|
||||
data.value = []
|
||||
const index = 1
|
||||
const res = await getWaylineFiles(wid, {
|
||||
page: 1, // 页数
|
||||
page_size: 9, // 每页大小
|
||||
order_by: 'update_time desc' // 排序, xxx_column_desc, xxx_column_asc, xxx_column(default asc)
|
||||
})
|
||||
console.log(res)
|
||||
res.data.list.forEach(ele => {
|
||||
data.value.push({
|
||||
key: index.toString(),
|
||||
name: ele.name,
|
||||
template_type: ele.template_types[0],
|
||||
drone_type: ele.drone_model_key,
|
||||
payload_type: ele.payload_model_keys[0],
|
||||
user: ele.user_name,
|
||||
favorite: ele.favorited.toString()
|
||||
})
|
||||
})
|
||||
console.log('wayline files:', data.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-wrapper {
|
||||
width: 100%;
|
||||
.table {
|
||||
background: #fff;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
padding: 16px 24px;
|
||||
font-size: 20px;
|
||||
text-align: start;
|
||||
color: #000;
|
||||
}
|
||||
.action-area {
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
export const AMapConfig = {
|
||||
key: '26d54da6733de88435c68d1a2e88b682',
|
||||
version: '2.0',
|
||||
plugins: [
|
||||
'AMap.Scale',
|
||||
'AMap.ToolBar',
|
||||
'AMap.ControlBar',
|
||||
'AMap.ElasticMarker',
|
||||
'AMap.MapType',
|
||||
'AMap.Geocoder',
|
||||
'AMap.CircleEditor',
|
||||
'AMap.PolygonEditor',
|
||||
'AMap.PolylineEditor',
|
||||
'AMap.PolyEditor',
|
||||
'AMap.RangingTool',
|
||||
'AMap.Weather',
|
||||
'AMap.MouseTool'
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
export enum MapElementColor {
|
||||
Blue = '#2D8CF0',
|
||||
Green = '#19BE6B',
|
||||
Yellow = '#FFBB00',
|
||||
Red = '#E23C39',
|
||||
Orange = '#B620E0',
|
||||
Default = '#212121'
|
||||
}
|
||||
export const MapElementDefaultColor = MapElementColor.Default
|
||||
|
||||
export enum MapDoodleColor {
|
||||
PinColor = '#2D8CF0',
|
||||
PolylineColor = '#3366FF',
|
||||
PolygonColor = '#FF33FF'
|
||||
}
|
||||
|
||||
export enum MapElementEnum {
|
||||
PIN = 0,
|
||||
LINE = 1,
|
||||
POLY = 2
|
||||
}
|
||||
export type MapDoodleType = 'pin' | 'polyline' | 'polygon' | 'off'
|
||||
@@ -0,0 +1,138 @@
|
||||
export const mapLayers = {
|
||||
code: 0,
|
||||
message: 'success',
|
||||
data: {
|
||||
list: [{
|
||||
id: 'private_layer',
|
||||
name: 'Private Layer',
|
||||
order: 0,
|
||||
is_distributed: false,
|
||||
type: 1,
|
||||
is_lock: false,
|
||||
create_time: 1634268707424,
|
||||
elements: [{
|
||||
id: 'b2370d29-be65-42b0-9224-4d816e86dc64',
|
||||
name: 'xuejia n. 1',
|
||||
order: 0,
|
||||
status: 1,
|
||||
display: 1,
|
||||
resource: {
|
||||
content: {
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
color: '#2D8CF0'
|
||||
},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
[114.156671, 38.468249],
|
||||
[114.139517, 37.372177],
|
||||
[115.52899, 37.712212]
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
type: 4,
|
||||
user_name: 'xuejia n.',
|
||||
user_id: '1402914943455727616'
|
||||
},
|
||||
update_time: 1636966336566,
|
||||
create_time: 1636966325700,
|
||||
elevation_load_status: 0,
|
||||
icon: 'area'
|
||||
}, {
|
||||
id: '768e9fcd-121f-47a6-96b9-f1aee27d32f0',
|
||||
name: 'xuejia n. 1',
|
||||
order: 0,
|
||||
status: 1,
|
||||
display: 1,
|
||||
resource: {
|
||||
content: {
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
color: '#2D8CF0'
|
||||
},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[116.263962, 40.234929],
|
||||
[116.503006, 40.237026],
|
||||
[116.335465, 40.155206],
|
||||
[116.541458, 40.12371]
|
||||
]
|
||||
}
|
||||
},
|
||||
type: 4,
|
||||
user_name: 'xuejia n.',
|
||||
user_id: '1402914943455727616'
|
||||
},
|
||||
update_time: 1636966322636,
|
||||
create_time: 1636966316803,
|
||||
elevation_load_status: 0,
|
||||
icon: 'line'
|
||||
}, {
|
||||
id: '4e741a76-3600-4af5-ace8-d805e7cd31fa',
|
||||
name: 'xuejia n. 2',
|
||||
order: 0,
|
||||
status: 1,
|
||||
display: 1,
|
||||
resource: {
|
||||
content: {
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
color: '#2D8CF0',
|
||||
clampToGround: true
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [116.098223, 39.976538, 104]
|
||||
}
|
||||
},
|
||||
type: 6,
|
||||
user_name: 'xuejia n.',
|
||||
user_id: '1402914943455727616'
|
||||
},
|
||||
update_time: 1636966305229,
|
||||
create_time: 1636966305229,
|
||||
elevation_load_status: 0,
|
||||
icon: 'pin'
|
||||
}, {
|
||||
id: 'efff2b5d-de22-4d48-8d92-4f53170668f6',
|
||||
name: 'xuejia n. 1',
|
||||
order: 0,
|
||||
status: 1,
|
||||
display: 1,
|
||||
resource: {
|
||||
content: {
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
color: '#19BE6B',
|
||||
clampToGround: true
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [113.35367028239645, 23.755194000519843, 22]
|
||||
}
|
||||
},
|
||||
type: 6,
|
||||
user_name: 'xuejia n.',
|
||||
user_id: '1402914943455727616'
|
||||
},
|
||||
update_time: 1636966304432,
|
||||
create_time: 1636966299455,
|
||||
elevation_load_status: 0,
|
||||
icon: 'pin'
|
||||
}]
|
||||
}, {
|
||||
id: 'share_layer',
|
||||
name: 'Share Layer',
|
||||
order: 0,
|
||||
is_distributed: true,
|
||||
type: 2,
|
||||
is_lock: false,
|
||||
create_time: 1634268707414,
|
||||
elements: []
|
||||
}]
|
||||
}
|
||||
}
|
||||
externo
+9
@@ -0,0 +1,9 @@
|
||||
// Environment variable definition
|
||||
// https://cn.vitejs.dev/guide/env-and-mode.html#env-files
|
||||
|
||||
interface ImportMetaEnv {
|
||||
VITE_APP_ENVIRONMENT: 'DEV' | 'STAG' | 'UAT' | 'PROD',
|
||||
// api gateway
|
||||
VITE_APP_APIGATEWAY_BACKEND_HOST: string
|
||||
// More environment variables...
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import pin19be6b from '/@/assets/icons/pin-19be6b.svg'
|
||||
import pin212121 from '/@/assets/icons/pin-212121.svg'
|
||||
import pin2d8cf0 from '/@/assets/icons/pin-2d8cf0.svg'
|
||||
import pinb620e0 from '/@/assets/icons/pin-b620e0.svg'
|
||||
import pine23c39 from '/@/assets/icons/pin-e23c39.svg'
|
||||
import pineffbb00 from '/@/assets/icons/pin-ffbb00.svg'
|
||||
import { getRoot } from '/@/root'
|
||||
import rootStore from '/@/store'
|
||||
import { GeojsonCoordinate } from '/@/types/map'
|
||||
|
||||
export function useGMapCover () {
|
||||
const root = getRoot()
|
||||
const AMap = root.$aMapObj
|
||||
const normalColor = '#2D8CF0'
|
||||
const store = rootStore
|
||||
const coverList = store.state.coverList
|
||||
|
||||
function AddCoverToMap (cover :any) {
|
||||
root.$aMap.add(cover)
|
||||
coverList.push(cover)
|
||||
// console.log('coverList:', store.state.coverList)
|
||||
}
|
||||
function getPinIcon (color?:string) {
|
||||
// console.log('color', color)
|
||||
const colorObj: {
|
||||
[key: number| string]: any
|
||||
} = {
|
||||
'2d8cf0': pin2d8cf0,
|
||||
'19be6b': pin19be6b,
|
||||
212121: pin212121,
|
||||
b620e0: pinb620e0,
|
||||
e23c39: pine23c39,
|
||||
ffbb00: pineffbb00,
|
||||
|
||||
}
|
||||
const iconName = (color?.replaceAll('#', '') || '').toLocaleLowerCase()
|
||||
return new AMap.Icon({
|
||||
// size: new AMap.Size(40, 50),
|
||||
image: colorObj[iconName],
|
||||
// imageOffset: new AMap.Pixel(0, -60),
|
||||
// imageSize: new AMap.Size(40, 50)
|
||||
})
|
||||
}
|
||||
function init2DPin (name: string, coordinates:GeojsonCoordinate, color?:string, data?:{}) {
|
||||
console.log(name, coordinates[0], coordinates[1], color, data)
|
||||
const pin = new AMap.Marker({
|
||||
position: new AMap.LngLat(coordinates[0], coordinates[1]),
|
||||
title: name,
|
||||
icon: getPinIcon(color),
|
||||
// strokeColor: color || normalColor,
|
||||
// fillColor: color || normalColor,
|
||||
extData: data
|
||||
})
|
||||
// console.log('coordinates pin', pin)
|
||||
AddCoverToMap(pin)
|
||||
}
|
||||
function AddOverlayGroup (overlayGroup) {
|
||||
root.$aMap.add(overlayGroup)
|
||||
coverList.push(overlayGroup)
|
||||
}
|
||||
function initPolyline (name: string, coordinates:GeojsonCoordinate[], color?:string, data?:{}) {
|
||||
const path = [] as GeojsonCoordinate[]
|
||||
coordinates.forEach(coordinate => {
|
||||
path.push(new AMap.LngLat(coordinate[0], coordinate[1]))
|
||||
})
|
||||
const polyline = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: color || normalColor,
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 2,
|
||||
strokeStyle: 'solid',
|
||||
extData: data
|
||||
// draggable: true,
|
||||
})
|
||||
AddOverlayGroup(polyline)
|
||||
}
|
||||
function initPolygon (name: string, coordinates:GeojsonCoordinate[], color?:string, data?:{}) {
|
||||
const path = [] as GeojsonCoordinate[]
|
||||
coordinates.forEach(coordinate => {
|
||||
path.push(new AMap.LngLat(coordinate[0], coordinate[1]))
|
||||
})
|
||||
// console.log('Polygon', path)
|
||||
const Polygon = new AMap.Polygon({
|
||||
path: path,
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 2,
|
||||
fillColor: color || normalColor,
|
||||
fillOpacity: 0.4,
|
||||
// draggable: true,
|
||||
strokeColor: color || normalColor,
|
||||
extData: data
|
||||
})
|
||||
AddOverlayGroup(Polygon)
|
||||
}
|
||||
function removeCoverFromMap (id:string) {
|
||||
for (let i = 0; i < coverList.length; i++) {
|
||||
const ele = coverList[i]
|
||||
// console.log(ele)
|
||||
const extdata = ele?.getExtData()
|
||||
if (extdata?.id === id) {
|
||||
console.log(extdata)
|
||||
root.$aMap.remove(ele)
|
||||
coverList.slice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
function getElementFromMap (id:string) {
|
||||
// console.log('start', new Date().getTime())
|
||||
const ele = coverList.find(ele => ele?.getExtData().id === id)
|
||||
// console.log('end', new Date().getTime())
|
||||
return ele
|
||||
// coverList.forEach((ele:any) => {
|
||||
// const extdata = ele?.getExtData()
|
||||
// // console.log(extdata)
|
||||
// if (extdata?.id === id) {
|
||||
// return ele
|
||||
// }
|
||||
// })
|
||||
}
|
||||
function updatePinElement (id:string, name: string, coordinates:GeojsonCoordinate, color?:string) {
|
||||
const element = getElementFromMap(id) as any
|
||||
if (element) {
|
||||
const icon = getPinIcon(color)
|
||||
element.setPosition(new AMap.LngLat(coordinates[0], coordinates[1]))
|
||||
element.setIcon(icon)
|
||||
element.setTitle(name)
|
||||
} else {
|
||||
// console.log('into init PIN')
|
||||
init2DPin(name, coordinates, color, {
|
||||
id: id,
|
||||
name: name
|
||||
})
|
||||
}
|
||||
}
|
||||
return {
|
||||
init2DPin,
|
||||
initPolyline,
|
||||
initPolygon,
|
||||
removeCoverFromMap,
|
||||
getElementFromMap,
|
||||
updatePinElement
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
import { App, reactive } from 'vue'
|
||||
import { AMapConfig } from '/@/constants/index'
|
||||
|
||||
export function useGMapManage () {
|
||||
const state = reactive({
|
||||
mapEntity: null,
|
||||
mapObj: null,
|
||||
mouseTool: null,
|
||||
})
|
||||
async function initMap (container: string, app:App) {
|
||||
AMapLoader.load({
|
||||
...AMapConfig
|
||||
}).then((AMap) => {
|
||||
state.mapObj = AMap
|
||||
state.mapEntity = new AMap.Map(container, {
|
||||
center: [113.935913, 22.525335],
|
||||
zoom: 15
|
||||
})
|
||||
state.mouseTool = new AMap.MouseTool(state.mapEntity)
|
||||
app.config.globalProperties.$aMap = state.mapEntity
|
||||
app.config.globalProperties.$aMapObj = state.mapObj
|
||||
app.config.globalProperties.$mouseTool = state.mouseTool
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
function globalPropertiesConfig (app:App) {
|
||||
initMap('g-container', app)
|
||||
}
|
||||
return {
|
||||
globalPropertiesConfig,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { reactive } from 'vue'
|
||||
import pin2d8cf0 from '/@/assets/icons/pin-2d8cf0.svg'
|
||||
import { MapDoodleType } from '/@/constants/map'
|
||||
import { getRoot } from '/@/root'
|
||||
import { MapDoodleEnum } from '/@/types/map-enum'
|
||||
|
||||
export function useMouseTool () {
|
||||
const root = getRoot()
|
||||
const AMap = root.$aMapObj
|
||||
const state = reactive({
|
||||
pinNum: 0,
|
||||
polylineNum: 0,
|
||||
PolygonNum: 0,
|
||||
currentType: '',
|
||||
})
|
||||
function drawPin (type:MapDoodleType, getDrawCallback:Function) {
|
||||
root?.$mouseTool.marker({
|
||||
title: type + state.pinNum,
|
||||
icon: pin2d8cf0,
|
||||
})
|
||||
state.pinNum++
|
||||
root?.$mouseTool.on('draw', getDrawCallback)
|
||||
}
|
||||
function drawPolyline (type:MapDoodleType, getDrawCallback:Function) {
|
||||
root?.$mouseTool.polyline({
|
||||
strokeColor: '#2d8cf0',
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 2,
|
||||
strokeStyle: 'solid',
|
||||
draggable: true,
|
||||
title: type + state.polylineNum++
|
||||
})
|
||||
root?.$mouseTool.on('draw', getDrawCallback)
|
||||
}
|
||||
function drawPolygon (type:MapDoodleType, getDrawCallback:Function) {
|
||||
root?.$mouseTool.polygon({
|
||||
strokeColor: '#2d8cf0',
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 2,
|
||||
fillColor: '#1791fc',
|
||||
fillOpacity: 0.4,
|
||||
draggable: true,
|
||||
title: type + state.PolygonNum++
|
||||
})
|
||||
root?.$mouseTool.on('draw', getDrawCallback)
|
||||
}
|
||||
function drawOff (type:MapDoodleType) {
|
||||
root?.$mouseTool.close()
|
||||
root?.$mouseTool.off('draw')
|
||||
}
|
||||
function mouseTool (type: MapDoodleType, getDrawCallback: Function) {
|
||||
state.currentType = type
|
||||
switch (type) {
|
||||
case MapDoodleEnum.PIN:
|
||||
drawPin(type, getDrawCallback)
|
||||
break
|
||||
case MapDoodleEnum.POLYLINE:
|
||||
drawPolyline(type, getDrawCallback)
|
||||
break
|
||||
case MapDoodleEnum.POLYGON:
|
||||
drawPolygon(type, getDrawCallback)
|
||||
break
|
||||
case MapDoodleEnum.Close:
|
||||
drawOff(type)
|
||||
break
|
||||
}
|
||||
}
|
||||
return {
|
||||
mouseTool
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { antComponents } from './antd'
|
||||
import { CommonComponents } from './use-common-components'
|
||||
import 'virtual:svg-icons-register'
|
||||
import store, { storeKey } from './store'
|
||||
import { createInstance } from '/@/root'
|
||||
import '/@/styles/index.scss'
|
||||
const app = createInstance(App)
|
||||
app.use(store, storeKey)
|
||||
app.use(router)
|
||||
app.use(CommonComponents)
|
||||
app.use(antComponents)
|
||||
app.mount('#demo-app')
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="element-map-wrapper">
|
||||
<GMap/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from 'vue'
|
||||
import GMap from '/@/components/GMap.vue'
|
||||
export default defineComponent({
|
||||
name: 'Elements',
|
||||
components: { GMap },
|
||||
setup () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="left flex-column flex-justify-start flex-align-center">
|
||||
<p class="fz26 mb0 mt10" style="color: #727272">
|
||||
{{ platformName }}
|
||||
</p>
|
||||
<p class="fz16 ml10 mb0 mt10" style="color: #2d8cf0">
|
||||
status:{{ connect }}
|
||||
</p>
|
||||
<p class="fz32 mb0 mt50" style="color: #000000">{{ workspaceName }}</p>
|
||||
<a-button
|
||||
class="fz20 mt20 flex-column flex-justify-center flex-align-center"
|
||||
style="width: 30vw; height: 12vh;"
|
||||
type="default"
|
||||
@click="onOpen3rdApp"
|
||||
>Open 3rd Party APP</a-button
|
||||
>
|
||||
<a-button
|
||||
class="fz20"
|
||||
style="width: 15vw; height: 12vh; position: fixed; bottom: 7vh"
|
||||
type="primary"
|
||||
@click="onExit"
|
||||
>Quit</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="right flex-column flex-justify-start flex-align-center">
|
||||
<p class="fz24 mb0 mt10 ">Setting</p>
|
||||
<a-button class="mt10 fz16" style="width:90%" @click="onMediaSetting"
|
||||
>Media File Upload Setting</a-button
|
||||
>
|
||||
<a-button class="mt10 fz16" style="width:90%" @click="onLiveshareSetting"
|
||||
>Manual Live Share Setting</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { message } from 'ant-design-vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { CURRENT_CONFIG } from '/@/api/http/config'
|
||||
import { getPlatformInfo, getUserInfo } from '/@/api/manage'
|
||||
import apiPilot from '/@/api/pilot-bridge'
|
||||
import { getRoot } from '/@/root'
|
||||
|
||||
const root = getRoot()
|
||||
const connect = ref('Disconnect')
|
||||
const platformName = ref('Unknown')
|
||||
const workspaceName = ref('Unknown')
|
||||
const workspaceDesc = ref('Unknown')
|
||||
const wsId = ref()
|
||||
|
||||
onMounted(() => {
|
||||
apiPilot.init()
|
||||
const token = apiPilot.getToken()
|
||||
if (token) {
|
||||
getPlatformInfo({}).then(res => {
|
||||
console.log(res)
|
||||
platformName.value = res.data.platform_name
|
||||
workspaceName.value = res.data.workspace_name
|
||||
workspaceDesc.value = res.data.workspace_desc
|
||||
wsId.value = res.data.workspace_id
|
||||
apiPilot.setPlatformMessage(
|
||||
platformName.value,
|
||||
workspaceName.value,
|
||||
workspaceDesc.value
|
||||
)
|
||||
apiPilot.setWorkspaceId(wsId.value)
|
||||
})
|
||||
}
|
||||
if (JSON.parse(apiPilot.isComponentLoaded('thing')).data === false || token) {
|
||||
getUserInfo({}).then(res => {
|
||||
const param = {
|
||||
host: res.data.mqtt_addr,
|
||||
username: res.data.mqtt_username,
|
||||
password: res.data.mqtt_password,
|
||||
connectCallback: 'connectCallback'
|
||||
}
|
||||
apiPilot.setComponentParam('thing', param)
|
||||
apiPilot.loadComponent('thing', apiPilot.getComponentParam('thing'))
|
||||
})
|
||||
} else {
|
||||
const connectState = JSON.parse(window.djiBridge.thingGetConnectState())
|
||||
if (connectState.code === 0 && connectState.data) {
|
||||
connect.value = 'Connected'
|
||||
} else {
|
||||
connect.value = 'Disconnect'
|
||||
}
|
||||
}
|
||||
apiPilot.loadComponent('liveshare', apiPilot.getComponentParam('liveshare'))
|
||||
console.log('ws token:', token)
|
||||
apiPilot.setComponentParam('ws', {
|
||||
host: CURRENT_CONFIG.websocketURL,
|
||||
token: token
|
||||
})
|
||||
apiPilot.loadComponent('ws', apiPilot.getComponentParam('ws'))
|
||||
apiPilot.setComponentParam('map', {
|
||||
userName: 'pilot1',
|
||||
elementPreName: 'PILOT'
|
||||
})
|
||||
apiPilot.loadComponent('map', apiPilot.getComponentParam('map'))
|
||||
apiPilot.loadComponent('tsa', apiPilot.getComponentParam('tsa'))
|
||||
apiPilot.loadComponent('media', apiPilot.getComponentParam('media'))
|
||||
apiPilot.loadComponent('mission', {})
|
||||
window.connectCallback = arg => {
|
||||
connectCallback(arg)
|
||||
}
|
||||
apiPilot.onBackClickReg()
|
||||
})
|
||||
const connectCallback = (arg: any) => {
|
||||
console.info('into callback', arg)
|
||||
if (arg) {
|
||||
connect.value = 'Connected'
|
||||
window.djiBridge.mediaSetDownloadOwner(0)
|
||||
window.djiBridge.mediaSetUploadPhotoType(1)
|
||||
} else {
|
||||
connect.value = 'Disconnect'
|
||||
}
|
||||
}
|
||||
const onExit = async (e: any) => {
|
||||
apiPilot.stopwebview()
|
||||
}
|
||||
const onMediaSetting = async (e: any) => {
|
||||
root.$router.push('/pilot-media')
|
||||
}
|
||||
const onLiveshareSetting = async (e: any) => {
|
||||
root.$router.push('/pilot-liveshare')
|
||||
}
|
||||
const onOpen3rdApp = () => {
|
||||
window.open('mydjischeme://www.dji.com')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@/styles/index.scss';
|
||||
.page {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
transition: width 0.2s ease;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.left {
|
||||
width: 50%;
|
||||
border-right: red solid 2px;
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<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="http://lofrev.net/wp-content/photos/2016/09/dji_logo_png.png"
|
||||
/>
|
||||
<p class="logo fz35 pb50">Pilot Cloud API Demo</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.user" placeholder="Username">
|
||||
<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>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
class="m0"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:disabled="formState.user === '' || formState.password === ''"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Login
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { onMounted, reactive, UnwrapRef } from 'vue'
|
||||
import { CURRENT_CONFIG } from '/@/api/http/config'
|
||||
import { login, refreshToken } from '/@/api/manage'
|
||||
import apiPilot from '/@/api/pilot-bridge'
|
||||
import { getRoot } from '/@/root'
|
||||
|
||||
interface FormState {
|
||||
user: string
|
||||
password: string
|
||||
}
|
||||
const root = getRoot()
|
||||
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
user: 'pilot',
|
||||
password: 'pilot123'
|
||||
})
|
||||
let isVerified:any
|
||||
onMounted(async () => {
|
||||
const verifyLicense = JSON.parse(apiPilot.platformVerifyLicense(CURRENT_CONFIG.appId,
|
||||
CURRENT_CONFIG.appKey, CURRENT_CONFIG.appLicense))
|
||||
const platformVerify = JSON.parse(apiPilot.isPlatformVerifySuccess())
|
||||
isVerified = platformVerify.data
|
||||
if (platformVerify.data === true) {
|
||||
message.success('The license verification is successful.')
|
||||
} else {
|
||||
message.error('Filed to verify the license. message is ' + verifyLicense.data)
|
||||
return
|
||||
}
|
||||
const token = apiPilot.getToken()
|
||||
console.log('api token:', token)
|
||||
apiPilot.setPlatformMessage('Cloud Api Platform', '', '')
|
||||
if (token && token !== undefined) {
|
||||
await refreshToken({})
|
||||
.then(res => {
|
||||
apiPilot.setComponentParam('api', {
|
||||
host: CURRENT_CONFIG.baseURL,
|
||||
token: res.data.access_token
|
||||
})
|
||||
const jsres = JSON.parse(
|
||||
apiPilot.loadComponent('api', apiPilot.getComponentParam('api'))
|
||||
)
|
||||
console.log('load api module status:', jsres)
|
||||
apiPilot.setToken(res.data.access_token)
|
||||
localStorage.setItem('x-auth-token', res.data.access_token)
|
||||
message.success('Login Success')
|
||||
root.$router.push('/pilot-home')
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
const onSubmit = async (e: any) => {
|
||||
await login({
|
||||
username: formState.user,
|
||||
password: formState.password
|
||||
})
|
||||
.then(res => {
|
||||
if (!isVerified) {
|
||||
message.error('Please verify the license firstly.')
|
||||
return
|
||||
}
|
||||
console.log('login res:', res)
|
||||
if (res.code === 0) {
|
||||
apiPilot.setComponentParam('api', {
|
||||
host: CURRENT_CONFIG.baseURL,
|
||||
token: res.data.access_token
|
||||
})
|
||||
const jsres = apiPilot.loadComponent(
|
||||
'api',
|
||||
apiPilot.getComponentParam('api')
|
||||
)
|
||||
console.log('load api module res:', jsres)
|
||||
apiPilot.setToken(res.data.access_token)
|
||||
localStorage.setItem('x-auth-token', res.data.access_token)
|
||||
localStorage.setItem('workspace-id', res.data.workspace_id)
|
||||
localStorage.setItem('username', res.data.username)
|
||||
message.success('Login Success')
|
||||
root.$router.push('/pilot-home')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@/styles/index.scss';
|
||||
.login {
|
||||
// background-color: $dark-highlight;
|
||||
height: 100vh;
|
||||
}
|
||||
.logo {
|
||||
color: $primary;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div
|
||||
class="width-100vw height-100vh flex-column flex-justify-start flex-align-start"
|
||||
>
|
||||
<div
|
||||
class="mt20 flex-row flex-align-center flex-justify-between"
|
||||
style="width: 100%"
|
||||
>
|
||||
<p class="ml10 mb0 fz16" style="color: black">
|
||||
Select Video Publish Mode:
|
||||
</p>
|
||||
<a-select
|
||||
style="width: 200px"
|
||||
placeholder="Select Mode"
|
||||
@select="onPublishModeSelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in publishModeList"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<a-divider dashed class="mt10 mb0"></a-divider>
|
||||
|
||||
<div
|
||||
class="flex-row flex-align-center flex-justify-between mt10"
|
||||
style="width: 100%"
|
||||
>
|
||||
<p class="ml10 mb0 fz16" style="color: black">Select Live Share Type:</p>
|
||||
<a-select
|
||||
style="width: 200px"
|
||||
placeholder="Select Live Type"
|
||||
@select="onLiveTypeSelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in liveTypeList"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<a-divider dashed class="mt10 mb0"></a-divider>
|
||||
|
||||
<div
|
||||
class="flex-row flex-align-center flex-justify-center mt20"
|
||||
style="width: 100%"
|
||||
>
|
||||
<p>Live Share State: {{ liveState }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex-row flex-align-center flex-justify-center mt20"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-button type="primary" @click="onPlay">Play</a-button>
|
||||
<a-button class="ml20" type="primary" @click="onGetConfig"
|
||||
>Get Config</a-button
|
||||
>
|
||||
<a-button class="ml20" type="primary" @click="onGetStatus"
|
||||
>Get Status</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { message } from 'ant-design-vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { CURRENT_CONFIG as config } from '/@/api/http/config'
|
||||
import apiPilot from '/@/api/pilot-bridge'
|
||||
import { getRoot } from '/@/root'
|
||||
|
||||
const root = getRoot()
|
||||
|
||||
const publishModeList = [
|
||||
{
|
||||
value: 'video-on-demand',
|
||||
label: 'video-on-demand'
|
||||
},
|
||||
{
|
||||
value: 'video-by-manual',
|
||||
label: 'video-by-manual'
|
||||
},
|
||||
{
|
||||
value: 'video-demand-aux-manual',
|
||||
label: 'video-demand-aux-manual'
|
||||
}
|
||||
]
|
||||
const liveTypeList = [
|
||||
{
|
||||
value: 1,
|
||||
label: 'AGORA'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'RTMP'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: 'RTSP'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'GB28181'
|
||||
}
|
||||
]
|
||||
const agoraParam = {
|
||||
uid: config.agoraAPPID,
|
||||
token: config.agoraToken,
|
||||
channelId: config.agoraChannel
|
||||
}
|
||||
const rtmpParam = {
|
||||
url: config.rtmpURL + '12345'
|
||||
}
|
||||
const rtspParam = {
|
||||
userName: 'dji-live-share',
|
||||
password: '12345678',
|
||||
port: '8554'
|
||||
}
|
||||
const gb28181Param = {
|
||||
serverIp: '114.55.103.238',
|
||||
serverPort: '5060',
|
||||
serverId: '34020000002000000001',
|
||||
agentId: '34020000001310000004',
|
||||
password: '12345678',
|
||||
agentPort: '7060',
|
||||
agentChannel: '34020000001310000004'
|
||||
}
|
||||
const liveState = ref<string>('STOP')
|
||||
const livetypeSelected = ref<number>(1)
|
||||
const publishModeSelected = ref<string>('video-demand-aux-manual')
|
||||
|
||||
onMounted(() => {
|
||||
const status: any = apiPilot.getLiveshareStatus()
|
||||
console.log(status)
|
||||
// liveState.value =
|
||||
// status.status === 0
|
||||
// ? 'Cannot connect to server'
|
||||
// : status.status === 1
|
||||
// ? 'Connect to server'
|
||||
// : 'Playing'
|
||||
|
||||
// console.log(liveState.value)
|
||||
})
|
||||
const onLiveTypeSelect = (val: any) => {
|
||||
livetypeSelected.value = val
|
||||
message.info('set livetype:' + livetypeSelected.value, 5)
|
||||
}
|
||||
const onPublishModeSelect = (val: string) => {
|
||||
publishModeSelected.value = val
|
||||
message.info(
|
||||
'set publish mode res:' +
|
||||
apiPilot.setVideoPublishType(publishModeSelected.value),
|
||||
5
|
||||
)
|
||||
}
|
||||
const onPlay = () => {
|
||||
switch (livetypeSelected.value) {
|
||||
case 1: {
|
||||
message.info('agoraParam:' + JSON.stringify(agoraParam))
|
||||
apiPilot.setLiveshareConfig(1, JSON.stringify(agoraParam))
|
||||
apiPilot.startLiveshare()
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
message.info('rtmpParam:' + JSON.stringify(rtmpParam))
|
||||
apiPilot.setLiveshareConfig(2, JSON.stringify(rtmpParam))
|
||||
message.info(apiPilot.startLiveshare())
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
message.info('rtspParam:' + JSON.stringify(rtspParam))
|
||||
apiPilot.setLiveshareConfig(3, JSON.stringify(rtspParam))
|
||||
apiPilot.startLiveshare()
|
||||
break
|
||||
}
|
||||
case 4: {
|
||||
message.info('gb28181Param:' + JSON.stringify(gb28181Param))
|
||||
apiPilot.setLiveshareConfig(4, JSON.stringify(gb28181Param))
|
||||
apiPilot.startLiveshare()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
const onGetStatus = () => {
|
||||
const status = apiPilot.getLiveshareStatus()
|
||||
message.info(status, 5)
|
||||
}
|
||||
const onGetConfig = () => {
|
||||
const status = apiPilot.getLiveshareConfig()
|
||||
message.info(status, 5)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @import '/@/styles/index.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div
|
||||
class="width-100vw height-100vh flex-column flex-justify-start flex-align-start"
|
||||
>
|
||||
<p class="fz16 ml10 mt10 mb10 color-text-title color-font-bold">
|
||||
If Enabled, Pilot will upload photos or videos to the server
|
||||
automatically.
|
||||
</p>
|
||||
<div
|
||||
class="flex-row flex-align-center flex-justify-between"
|
||||
style="width: 100%"
|
||||
>
|
||||
<p class="ml10 mb0 fz16" style="color: black">Auto Upload Photos</p>
|
||||
<a-switch
|
||||
class="mt0 mb0"
|
||||
v-model:checked="enablePhotoUpload"
|
||||
@change="onPhotoUpload"
|
||||
></a-switch>
|
||||
</div>
|
||||
<div
|
||||
class="flex-row flex-align-center flex-justify-between"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-radio-group
|
||||
class="mt10 ml20"
|
||||
v-if="enablePhotoUpload == true"
|
||||
v-model:value="photoType"
|
||||
defaultChecked="0"
|
||||
@change="onPhototype"
|
||||
>
|
||||
<a-radio :value="0">Original Photo</a-radio>
|
||||
<a-radio class="ml20" :value="1">Preview Photo</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<a-divider dashed class="mt10 mb0"></a-divider>
|
||||
|
||||
<div
|
||||
class="flex-row flex-align-center flex-justify-between mt10"
|
||||
style="width: 100%"
|
||||
>
|
||||
<p class="ml10 mb0 fz16" style="color: black">Auto Upload Video</p>
|
||||
<a-switch
|
||||
@change="onVideoUpload"
|
||||
v-model:checked="enableVideoUpload"
|
||||
></a-switch>
|
||||
</div>
|
||||
<a-divider dashed class="mt10 mb0"></a-divider>
|
||||
|
||||
<div
|
||||
class="flex-row flex-align-center flex-justify-between mt20"
|
||||
style="width: 100%"
|
||||
>
|
||||
<p class="ml10 mb0 fz16 color-font-bold" style="color: black">
|
||||
Path for uploading media resources in dual-controller mode
|
||||
</p>
|
||||
<a-radio-group
|
||||
class="mt0 mb0"
|
||||
v-model:value="uploadPath"
|
||||
button-style="solid"
|
||||
@change="onUploadPath"
|
||||
>
|
||||
<a-radio-button :value="0">Mine</a-radio-button>
|
||||
<a-radio-button :value="1">Another</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { message } from 'ant-design-vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import apiPilot from '/@/api/pilot-bridge'
|
||||
import { getRoot } from '/@/root'
|
||||
|
||||
const root = getRoot()
|
||||
|
||||
const enablePhotoUpload = ref<boolean>(true)
|
||||
const enableVideoUpload = ref<boolean>(false)
|
||||
const photoType = ref<number>(1)
|
||||
const uploadPath = ref<number>(0)
|
||||
|
||||
onMounted(() => {
|
||||
message.info('After setting, please use the physical button of the remote control to return, otherwise the setting is invalid.')
|
||||
|
||||
enablePhotoUpload.value =
|
||||
apiPilot.getAutoUploadPhoto() === undefined
|
||||
? true
|
||||
: apiPilot.getAutoUploadPhoto()
|
||||
enableVideoUpload.value =
|
||||
apiPilot.getAutoUploadVideo() === undefined
|
||||
? false
|
||||
: apiPilot.getAutoUploadVideo()
|
||||
photoType.value =
|
||||
apiPilot.getUploadPhotoType() === undefined
|
||||
? 1
|
||||
: apiPilot.getUploadPhotoType()
|
||||
uploadPath.value =
|
||||
apiPilot.getDownloadOwner() === undefined ? 0 : apiPilot.getDownloadOwner()
|
||||
|
||||
console.log(
|
||||
enablePhotoUpload.value,
|
||||
enableVideoUpload.value,
|
||||
photoType.value,
|
||||
uploadPath.value
|
||||
)
|
||||
apiPilot.setComponentParam('media', {
|
||||
autoUploadPhoto: enablePhotoUpload.value,
|
||||
autoUploadPhotoType: photoType.value,
|
||||
autoUploadVideo: enableVideoUpload.value
|
||||
})
|
||||
})
|
||||
const onPhotoUpload = () => {
|
||||
apiPilot.setAutoUploadPhoto(enablePhotoUpload.value)
|
||||
}
|
||||
const onVideoUpload = () => {
|
||||
console.log(enableVideoUpload.value)
|
||||
apiPilot.setAutoUploadVideo(enableVideoUpload.value)
|
||||
}
|
||||
const onPhototype = () => {
|
||||
console.log(photoType.value)
|
||||
apiPilot.setUploadPhotoType(photoType.value)
|
||||
}
|
||||
const onUploadPath = (e: any) => {
|
||||
apiPilot.setDownloadOwner(uploadPath.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @import '/@/styles/index.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="showLogin"
|
||||
class="login flex-column flex-justify-center flex-align-center m0 b0"
|
||||
>
|
||||
<a-image
|
||||
style="width: 17vw; height: 10vw; margin-bottom: 50px"
|
||||
src="http://lofrev.net/wp-content/photos/2016/09/dji_logo_png.png"
|
||||
/>
|
||||
<p class="logo fz35 pb50">Cloud API Demo</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.user" placeholder="Username">
|
||||
<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>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
class="m0"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:disabled="formState.user === '' || formState.password === ''"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Login
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div v-else class="project-app-wrapper">
|
||||
<div class="left">
|
||||
<Sidebar />
|
||||
<div class="main-content uranus-scrollbar dark">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="map-wrapper">
|
||||
<GMap />
|
||||
</div>
|
||||
<div class="media-wrapper" v-if="getMediaRoute()">
|
||||
<MediaPanel />
|
||||
</div>
|
||||
<div class="wayline-wrapper" v-if="getWaylineRoute()">
|
||||
<WaylinePanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { reactive, ref, UnwrapRef } from 'vue'
|
||||
import Sidebar from './sidebar.vue'
|
||||
import { login } from '/@/api/manage'
|
||||
import websocket from '/@/api/websocket'
|
||||
import GMap from '/@/components/GMap.vue'
|
||||
import MediaPanel from '/@/components/MediaPanel.vue'
|
||||
import WaylinePanel from '/@/components/wayline-panel.vue'
|
||||
import { useGMapCover } from '/@/hooks/use-g-map-cover'
|
||||
import { getRoot } from '/@/root'
|
||||
import { useMyStore } from '/@/store'
|
||||
|
||||
interface FormState {
|
||||
user: string
|
||||
password: string
|
||||
}
|
||||
|
||||
const root = getRoot()
|
||||
const showLogin = ref(true)
|
||||
const store = useMyStore()
|
||||
const formState: UnwrapRef<FormState> = reactive({
|
||||
user: 'adminPC',
|
||||
password: 'adminPC'
|
||||
})
|
||||
let socket = {} as any
|
||||
const gMapCoverHook = useGMapCover()
|
||||
|
||||
const onSubmit = async (e: any) => {
|
||||
const result = await login({
|
||||
username: formState.user,
|
||||
password: formState.password
|
||||
})
|
||||
if (result.code === 0) {
|
||||
console.log(result)
|
||||
localStorage.setItem('x-auth-token', result.data.access_token)
|
||||
localStorage.setItem('workspace-id', result.data.workspace_id)
|
||||
localStorage.setItem('username', result.data.username)
|
||||
showLogin.value = false
|
||||
message.info('login success')
|
||||
socket = websocket.init(wsGetMsg)
|
||||
}
|
||||
}
|
||||
|
||||
// function wsInfo (data) {
|
||||
// store.commit('SET_DEVICE_INFO', data)
|
||||
// }
|
||||
// function getDeviceInfo () {
|
||||
// const info = store.state.DeviceInfo
|
||||
// console.log(info)
|
||||
const wsGetMsg = async (res: any) => {
|
||||
const payload = JSON.parse(res.data)
|
||||
// console.log(payload)
|
||||
switch (payload.biz_code) {
|
||||
case 'gateway_osd': {
|
||||
store.commit('SET_GATEWAY_INFO', payload.data)
|
||||
break
|
||||
}
|
||||
case 'device_osd': {
|
||||
store.commit('SET_DEVICE_INFO', payload.data)
|
||||
break
|
||||
}
|
||||
case 'map_element_create': {
|
||||
store.commit('SET_MAP_ELEMENT_CREATE', payload.data)
|
||||
break
|
||||
}
|
||||
case 'map_element_update': {
|
||||
store.commit('SET_MAP_ELEMENT_UPDATE', payload.data)
|
||||
break
|
||||
}
|
||||
case 'map_element_delete': {
|
||||
store.commit('SET_MAP_ELEMENT_DELETE', payload.data)
|
||||
break
|
||||
}
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function getMediaRoute () {
|
||||
return root.$route.name === 'media'
|
||||
}
|
||||
|
||||
function getWaylineRoute () {
|
||||
return root.$route.name === 'wayline'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@/styles/index.scss';
|
||||
.login {
|
||||
background-color: $dark-highlight;
|
||||
height: 100vh;
|
||||
}
|
||||
.logo {
|
||||
color: $primary;
|
||||
}
|
||||
.project-app-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
transition: width 0.2s ease;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.left {
|
||||
width: 450px;
|
||||
display: flex;
|
||||
background-color: #232323;
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.map-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
color: $text-white-basic;
|
||||
}
|
||||
.media-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
background: #f6f8fa;
|
||||
padding: 16px;
|
||||
}
|
||||
.wayline-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
background: #f6f8fa;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<div class="project-layer-wrapper">
|
||||
<LayersTree
|
||||
:layer-data="mapLayers"
|
||||
class="project-layer-content"
|
||||
@check="checkLayer"
|
||||
@select="selectLayer"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
/>
|
||||
<a-drawer
|
||||
title="Map Element"
|
||||
placement="right"
|
||||
:closable="true"
|
||||
v-model:visible="visible"
|
||||
:mask="false"
|
||||
wrapClassName="drawer-element-wrapper"
|
||||
@close="closeDrawer"
|
||||
width="300"
|
||||
>
|
||||
<div class="drawer-element-content">
|
||||
<div class="name element-item">
|
||||
<span class="title">Name:</span>
|
||||
<a-input
|
||||
v-model:value="layerState.layerName"
|
||||
style="width:120px"
|
||||
placeholder="element name"
|
||||
@change="changeLayer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="longitude element-item"
|
||||
v-if="layerState.currentType === geoType.Point"
|
||||
>
|
||||
<span class="title">Longitude:</span>
|
||||
<a-input
|
||||
v-model:value="layerState.longitude"
|
||||
style="width:120px"
|
||||
placeholder="longitude"
|
||||
@change="changeLayer"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="latitude element-item"
|
||||
v-if="layerState.currentType === geoType.Point"
|
||||
>
|
||||
<span class="title">Latitude:</span>
|
||||
<a-input
|
||||
v-model:value="layerState.latitude"
|
||||
style="width:120px"
|
||||
placeholder="latitude"
|
||||
@change="changeLayer"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-content">
|
||||
<span class="mr30">Color: </span>
|
||||
<div
|
||||
v-for="item in colors"
|
||||
:key="item.id"
|
||||
class="color-item"
|
||||
:style="'background:' + item.color"
|
||||
@click="changeColor(item)"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="item.color === layerState.color"
|
||||
:size="18"
|
||||
name="check"
|
||||
></svg-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row flex-justify-around flex-align-center mt20">
|
||||
<a-button type="primary" @click="deleteElement">Delete</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import {
|
||||
deleteElementReq,
|
||||
getElementGroupsReq,
|
||||
updateElementsReq
|
||||
} from '/@/api/layer'
|
||||
import LayersTree from '/@/components/LayersTree.vue'
|
||||
import { MapDoodleColor, MapElementEnum } from '/@/constants/map'
|
||||
import { useGMapCover } from '/@/hooks/use-g-map-cover'
|
||||
import { getRoot } from '/@/root'
|
||||
import { useMyStore } from '/@/store'
|
||||
import { GeojsonCoordinate, LayerResource } from '/@/types/map'
|
||||
import { Color, GeoType } from '/@/types/mapLayer'
|
||||
import { generatePoint } from '/@/utils/genjson'
|
||||
import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform'
|
||||
|
||||
const root = getRoot()
|
||||
const store = useMyStore()
|
||||
let useGMapCoverHook = useGMapCover(store)
|
||||
console.log('store', store)
|
||||
const mapLayers = ref(store.state.Layers)
|
||||
const checkedKeys = ref<string[]>([])
|
||||
const selectedKeys = ref<string[]>([])
|
||||
const selectedKey = ref<string>('')
|
||||
const selectedLayer = ref<any>(null)
|
||||
const visible = ref<boolean>(false)
|
||||
store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
|
||||
const geoType = GeoType
|
||||
const layerState = reactive({
|
||||
layerName: '',
|
||||
layerId: '',
|
||||
longitude: 0,
|
||||
latitude: 0,
|
||||
currentType: '', // “LineString”,"Polygon","Point"
|
||||
color: '#212121'
|
||||
})
|
||||
const colors = ref<Color[]>([
|
||||
{ id: 1, name: 'BLUE', color: '#2D8CF0', selected: true },
|
||||
{ id: 2, name: 'GREEN', color: '#19BE6B', selected: false },
|
||||
{ id: 3, name: 'YELLOW', color: '#FFBB00', selected: false },
|
||||
{ id: 4, name: 'ORANGE', color: '#B620E0', selected: false },
|
||||
{ id: 5, name: 'RED', color: '#E23C39', selected: false },
|
||||
{ id: 6, name: 'NAME_DEFAULT', color: '#212121', selected: false }
|
||||
])
|
||||
|
||||
async function getAllElement () {
|
||||
getElementGroups('init')
|
||||
setTimeout(() => {
|
||||
useGMapCoverHook = useGMapCover()
|
||||
initMapCover()
|
||||
}, 1000)
|
||||
}
|
||||
function initMapCover () {
|
||||
mapLayers.value.forEach(item => {
|
||||
if (item.elements) {
|
||||
setMapCoverByElement(item.elements)
|
||||
}
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => store.state.Layers,
|
||||
newData => {
|
||||
mapLayers.value = newData
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
function setMapCoverByElement (elements: LayerResource[]) {
|
||||
elements.forEach(element => {
|
||||
const name = element.name
|
||||
const color = element.resource?.content.properties.color
|
||||
const type = element.resource?.type as number
|
||||
updateMapElement(element, name, color)
|
||||
})
|
||||
}
|
||||
function updateMapElement (
|
||||
element: LayerResource,
|
||||
name: string,
|
||||
color: string | undefined
|
||||
) {
|
||||
const geoType = element.resource?.content.geometry.type
|
||||
const id = element.id
|
||||
const type = element.resource?.type as number
|
||||
|
||||
if (MapElementEnum.PIN === type) {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates as GeojsonCoordinate
|
||||
useGMapCoverHook.updatePinElement(id, name, coordinates, color)
|
||||
} else if (MapElementEnum.LINE === type && geoType === 'LineString') {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates as GeojsonCoordinate[]
|
||||
useGMapCoverHook.initPolyline(name, coordinates, color, {
|
||||
id: id,
|
||||
name: name
|
||||
})
|
||||
} else if (MapElementEnum.LINE === type && geoType === 'Polygon') {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates[0] as GeojsonCoordinate[]
|
||||
useGMapCoverHook.initPolygon(name, coordinates, color, {
|
||||
id: id,
|
||||
name: name
|
||||
})
|
||||
}
|
||||
}
|
||||
function checkLayer (keys: string[]) {
|
||||
console.log('checkLayer', keys, selectedKeys.value, checkedKeys.value)
|
||||
}
|
||||
function selectLayer (keys: string[], e) {
|
||||
// console.log('selectLayer', e.node.eventKey, e.selected)
|
||||
if (e.selected) {
|
||||
selectedKey.value = e.node.eventKey
|
||||
selectedLayer.value = getCurrentLayer(selectedKey.value)
|
||||
setBaseInfo()
|
||||
}
|
||||
visible.value = e.selected
|
||||
store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
|
||||
// store.dispatch('updateElement', { type: 'is_select', id: e.node.eventKey, bool: e.selected })
|
||||
}
|
||||
function getCurrentLayer (id: string) {
|
||||
const Layers = store.state.Layers
|
||||
const key = id.replaceAll('resource__', '')
|
||||
// console.log('selectedKey.value', selectedKey.value)
|
||||
let layer = null
|
||||
const findCan = function (V) {
|
||||
V.forEach(item => {
|
||||
if (item.id === key) {
|
||||
layer = item
|
||||
}
|
||||
if (item.elements) {
|
||||
findCan(item.elements)
|
||||
}
|
||||
})
|
||||
}
|
||||
findCan(Layers)
|
||||
// const layer = Layers.find(item => item.elements.find(el => el.id === key))
|
||||
console.log('layer', layer)
|
||||
return layer
|
||||
}
|
||||
function setBaseInfo () {
|
||||
const layer = selectedLayer.value
|
||||
if (layer) {
|
||||
const geoType = layer.resource?.content.geometry.type
|
||||
// “LineString”,"Polygon","Point"
|
||||
layerState.currentType = geoType
|
||||
layerState.layerName = layer.name
|
||||
layerState.layerId = layer.id
|
||||
layerState.color = layer.resource?.content.properties.color
|
||||
switch (geoType) {
|
||||
case GeoType.Point:
|
||||
layerState.longitude = layer.resource?.content.geometry.coordinates[0]
|
||||
layerState.latitude = layer.resource?.content.geometry.coordinates[1]
|
||||
break
|
||||
case GeoType.LineString:
|
||||
break
|
||||
case GeoType.Polygon:
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getAllElement()
|
||||
})
|
||||
function closeDrawer () {
|
||||
store.commit('SET_DRAW_VISIBLE_INFO', false)
|
||||
selectedKeys.value = []
|
||||
}
|
||||
function changeColor (color: Color) {
|
||||
layerState.color = color.color
|
||||
|
||||
updateElements()
|
||||
}
|
||||
function changeLayer (val: string) {
|
||||
updateElements()
|
||||
}
|
||||
async function deleteElement () {
|
||||
const elementid = selectedLayer.value.id
|
||||
|
||||
await deleteElementReq(elementid, {}).then(async (res: any) => {
|
||||
// console.log('delete element res:', res)
|
||||
if (res.code !== 0) {
|
||||
console.warn(res)
|
||||
return
|
||||
}
|
||||
visible.value = false
|
||||
store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
|
||||
useGMapCoverHook.removeCoverFromMap(elementid)
|
||||
getElementGroups()
|
||||
})
|
||||
}
|
||||
async function getElementGroups (type?: string) {
|
||||
const result = await getElementGroupsReq({
|
||||
groupId: '',
|
||||
isDistributed: true
|
||||
})
|
||||
mapLayers.value = result.data
|
||||
mapLayers.value = updateWgs84togcj02()
|
||||
if (type && type === 'init') {
|
||||
store.dispatch('setLayerInfo', mapLayers.value)
|
||||
}
|
||||
store.commit('SET_LAYER_INFO', mapLayers.value)
|
||||
}
|
||||
async function updateElements () {
|
||||
let content = null
|
||||
if (layerState.currentType === GeoType.Point) {
|
||||
const position = {
|
||||
height: 0,
|
||||
latitude: Number(layerState.latitude || 0),
|
||||
longitude: Number(layerState.longitude || 0)
|
||||
}
|
||||
const cxt = generatePoint(position, {
|
||||
color: layerState.color || MapDoodleColor.PinColor,
|
||||
clampToGround: true
|
||||
})
|
||||
content = {
|
||||
type: MapElementEnum.PIN,
|
||||
geometry: cxt.geometry,
|
||||
properties: cxt.properties
|
||||
}
|
||||
const currentLayer = selectedLayer.value
|
||||
currentLayer.resource.content = content
|
||||
selectedLayer.value = currentLayer
|
||||
} else {
|
||||
const currentLayer = selectedLayer.value
|
||||
content = currentLayer.resource.content
|
||||
content.properties.color = layerState.color
|
||||
}
|
||||
updateMapElement(selectedLayer.value, layerState.layerName, layerState.color)
|
||||
const result = await updateElementsReq(layerState.layerId, {
|
||||
name: layerState.layerName,
|
||||
content: content
|
||||
})
|
||||
getElementGroups()
|
||||
}
|
||||
|
||||
function updateWgs84togcj02 () {
|
||||
const layers = mapLayers.value
|
||||
layers.forEach(item => {
|
||||
if (item.elements) {
|
||||
item.elements.forEach(ele => {
|
||||
updateCoordinates('wgs84-gcj02', ele)
|
||||
})
|
||||
}
|
||||
})
|
||||
return layers
|
||||
}
|
||||
function updateCoordinates (transformType: string, element: LayerResource) {
|
||||
const geoType = element.resource?.content.geometry.type
|
||||
const type = element.resource?.type as number
|
||||
if (element.resource) {
|
||||
if (MapElementEnum.PIN === type) {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates as GeojsonCoordinate
|
||||
if (transformType === 'wgs84-gcj02') {
|
||||
const transResult = wgs84togcj02(
|
||||
coordinates[0],
|
||||
coordinates[1]
|
||||
) as GeojsonCoordinate
|
||||
element.resource.content.geometry.coordinates = transResult
|
||||
} else if (transformType === 'gcj02-wgs84') {
|
||||
const transResult = gcj02towgs84(
|
||||
coordinates[0],
|
||||
coordinates[1]
|
||||
) as GeojsonCoordinate
|
||||
element.resource.content.geometry.coordinates = transResult
|
||||
}
|
||||
} else if (MapElementEnum.LINE === type && geoType === 'LineString') {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates as GeojsonCoordinate[]
|
||||
if (transformType === 'wgs84-gcj02') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = wgs84togcj02(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
} else if (transformType === 'gcj02-wgs84') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = gcj02towgs84(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
}
|
||||
element.resource.content.geometry.coordinates = coordinates
|
||||
} else if (MapElementEnum.LINE === type && geoType === 'Polygon') {
|
||||
const coordinates = element.resource?.content.geometry
|
||||
.coordinates[0] as GeojsonCoordinate[]
|
||||
|
||||
if (transformType === 'wgs84-gcj02') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = wgs84togcj02(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
} else if (transformType === 'gcj02-wgs84') {
|
||||
coordinates.forEach(coordinate => {
|
||||
coordinate = gcj02towgs84(
|
||||
coordinate[0],
|
||||
coordinate[1]
|
||||
) as GeojsonCoordinate
|
||||
})
|
||||
}
|
||||
element.resource.content.geometry.coordinates = [coordinates]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@/styles/index.scss';
|
||||
.project-layer-wrapper {
|
||||
padding-top: 16px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.drawer-element-wrapper {
|
||||
.ant-drawer-content {
|
||||
background-color: $dark-highlight;
|
||||
color: $text-white-basic;
|
||||
.ant-drawer-header {
|
||||
background-color: $dark-highlight;
|
||||
.ant-drawer-title {
|
||||
color: $text-white-basic;
|
||||
}
|
||||
.ant-drawer-close {
|
||||
color: $text-white-basic;
|
||||
}
|
||||
}
|
||||
.ant-input {
|
||||
background-color: #101010;
|
||||
border-color: $dark-border;
|
||||
color: $text-white-basic;
|
||||
}
|
||||
}
|
||||
.color-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
.color-item {
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
display: inline-flex;
|
||||
width: 80px;
|
||||
}
|
||||
.element-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div class="flex-column flex-justify-start flex-align-center">
|
||||
<p class="fz24">Live streaming source selection</p>
|
||||
<div class="flex-row flex-justify-center flex-align-center mt10">
|
||||
<a-select
|
||||
style="width:150px"
|
||||
placeholder="Select Drone"
|
||||
@select="onDroneSelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in dronePara.droneList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
class="ml10"
|
||||
style="width:150px"
|
||||
placeholder="Select Camera"
|
||||
@select="onCameraSelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in dronePara.cameraList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
class="ml10"
|
||||
style="width:150px"
|
||||
placeholder="Select Lens"
|
||||
@select="onVideoSelect"
|
||||
>
|
||||
<a-select-option
|
||||
class="ml10"
|
||||
v-for="item in dronePara.videoList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
class="ml10"
|
||||
style="width:150px"
|
||||
placeholder="Select Clarity"
|
||||
@select="onClaritySelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in clarityList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</div>
|
||||
<p class="fz24 mt10">Agora Parameter</p>
|
||||
<p class="fz16">
|
||||
Note: Obtain The Following Parameters From https://console.agora.io
|
||||
</p>
|
||||
<div class="flex-row flex-justify-center flex-align-center">
|
||||
<a-input v-model:value="agoraPara.appid" placeholder="APP ID"></a-input>
|
||||
<a-input
|
||||
class="ml10"
|
||||
v-model:value="agoraPara.token"
|
||||
placeholder="Token"
|
||||
></a-input>
|
||||
<a-input
|
||||
class="ml10"
|
||||
v-model:value="agoraPara.channel"
|
||||
placeholder="Channel"
|
||||
></a-input>
|
||||
</div>
|
||||
<div class="mt20">
|
||||
<p class="fz20">
|
||||
Livestate:{{ livePara.liveState == false ? 'Stop' : 'Playing' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt10 flex-row flex-justify-center flex-align-center">
|
||||
<a-button type="primary" large @click="onStart">Play</a-button>
|
||||
<a-button class="ml20" type="primary" large @click="onStop"
|
||||
>Stop</a-button
|
||||
>
|
||||
<a-button class="ml20" type="primary" large @click="onRefresh"
|
||||
>Refresh Live Capacity</a-button
|
||||
>
|
||||
</div>
|
||||
<div id="player"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import AgoraRTC from 'agora-rtc-sdk-ng'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import { CURRENT_CONFIG as config } from '/@/api/http/config'
|
||||
import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage'
|
||||
import { getRoot } from '/@/root'
|
||||
|
||||
const root = getRoot()
|
||||
|
||||
const clarityList = [
|
||||
{
|
||||
value: 0,
|
||||
label: 'Adaptive'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: 'Smooth'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'Standard'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: 'HD'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'Super Clear'
|
||||
}
|
||||
]
|
||||
|
||||
let agoraClient = {} as any
|
||||
const agoraPara = reactive({
|
||||
appid: config.agoraAPPID,
|
||||
token: config.agoraToken,
|
||||
channel: config.agoraChannel,
|
||||
uid: null,
|
||||
stream: {}
|
||||
})
|
||||
const dronePara = reactive({
|
||||
livestreamSource: [],
|
||||
droneList: [],
|
||||
cameraList: [],
|
||||
videoList: [],
|
||||
droneSelected: '',
|
||||
cameraSelected: '',
|
||||
videoSelected: '',
|
||||
claritySelected: ''
|
||||
})
|
||||
const livePara = reactive({
|
||||
url: '',
|
||||
webrtc: {} as any,
|
||||
videoId: '',
|
||||
liveState: false
|
||||
})
|
||||
|
||||
const onRefresh = async () => {
|
||||
await getLiveCapacity({})
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
if (res.data === null) {
|
||||
console.warn('warning: get live capacity is null!!!')
|
||||
return
|
||||
}
|
||||
dronePara.livestreamSource = res.data
|
||||
dronePara.droneList = []
|
||||
|
||||
console.log('live_capacity:', dronePara.livestreamSource)
|
||||
|
||||
if (dronePara.livestreamSource) {
|
||||
dronePara.livestreamSource.forEach((ele: any) => {
|
||||
dronePara.droneList.push({ label: ele.sn, value: ele.sn })
|
||||
})
|
||||
console.log(dronePara.droneList)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onRefresh()
|
||||
agoraClient = AgoraRTC.createClient({ mode: 'live', codec: 'h264' })
|
||||
agoraClient.setClientRole('audience')
|
||||
|
||||
// Subscribe when a remote user publishes a stream
|
||||
agoraClient.on('user-published', async (user: any, mediaType: string) => {
|
||||
await agoraClient.subscribe(user, mediaType)
|
||||
if (mediaType === 'video') {
|
||||
console.log('subscribe success')
|
||||
// Get `RemoteVideoTrack` in the `user` object.
|
||||
const remoteVideoTrack = user.videoTrack
|
||||
// Dynamically create a container in the form of a DIV element for playing the remote video track.
|
||||
const remotePlayerContainer: any = document.getElementById('player')
|
||||
// Specify the ID of the DIV container. You can use the `uid` of the remote user.
|
||||
remotePlayerContainer.id = agoraPara.uid
|
||||
remotePlayerContainer.textContent = 'uid: ' + agoraPara.uid
|
||||
remotePlayerContainer.style.width = '640px'
|
||||
remotePlayerContainer.style.height = '480px'
|
||||
remoteVideoTrack.play(remotePlayerContainer)
|
||||
}
|
||||
})
|
||||
agoraClient.on('user-unpublished', async (user: any) => {
|
||||
console.log('unpublish live:', user)
|
||||
await agoraClient.leave()
|
||||
})
|
||||
})
|
||||
|
||||
const handleError = (err: any) => {
|
||||
console.error(err)
|
||||
}
|
||||
const handleJoinChannel = (uid: any) => {
|
||||
agoraPara.uid = uid
|
||||
}
|
||||
|
||||
const onStart = async () => {
|
||||
const that = this
|
||||
console.log(
|
||||
'drone parameter：',
|
||||
dronePara.droneSelected,
|
||||
dronePara.cameraSelected,
|
||||
dronePara.videoSelected,
|
||||
dronePara.claritySelected
|
||||
)
|
||||
const timestamp = new Date().getTime().toString()
|
||||
const liveTimestamp = timestamp
|
||||
if (
|
||||
dronePara.droneSelected == null ||
|
||||
dronePara.cameraSelected == null ||
|
||||
dronePara.videoSelected == null ||
|
||||
dronePara.claritySelected == null
|
||||
) {
|
||||
console.warn('waring: not select live para!!!')
|
||||
}
|
||||
livePara.videoId =
|
||||
dronePara.droneSelected +
|
||||
'/' +
|
||||
dronePara.cameraSelected +
|
||||
'/' +
|
||||
dronePara.videoSelected
|
||||
console.log(agoraPara)
|
||||
await agoraClient
|
||||
.join(agoraPara.appid, agoraPara.channel, agoraPara.token, null)
|
||||
.then((res: any) => {
|
||||
console.log('agora uid:', res)
|
||||
agoraPara.uid = res
|
||||
})
|
||||
console.log(agoraPara.token)
|
||||
agoraPara.token = encodeURIComponent(agoraPara.token)
|
||||
console.log('agoraToken:', agoraPara.token)
|
||||
livePara.url =
|
||||
'channel=' +
|
||||
agoraPara.channel +
|
||||
'&sn=' +
|
||||
dronePara.droneSelected +
|
||||
'&token=' +
|
||||
agoraPara.token +
|
||||
'&uid=' +
|
||||
agoraPara.uid
|
||||
|
||||
await startLivestream({
|
||||
url: livePara.url,
|
||||
video_id: livePara.videoId,
|
||||
url_type: 0,
|
||||
video_quality: dronePara.claritySelected
|
||||
})
|
||||
.then(res => {
|
||||
livePara.liveState = true
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
const onStop = async () => {
|
||||
stopLivestream({
|
||||
video_id: livePara.videoId
|
||||
}).then(res => {
|
||||
livePara.liveState = false
|
||||
console.log('stop play livestream')
|
||||
})
|
||||
}
|
||||
const onDroneSelect = (val: any) => {
|
||||
dronePara.droneSelected = val
|
||||
if (dronePara.droneSelected) {
|
||||
const droneTemp = dronePara.livestreamSource
|
||||
droneTemp.forEach(ele => {
|
||||
const drone = ele
|
||||
if (drone.sn === dronePara.droneSelected) {
|
||||
const cameraListTemp = drone.cameras_list
|
||||
dronePara.cameraList = []
|
||||
cameraListTemp.forEach((ele: any) => {
|
||||
dronePara.cameraList.push({ label: ele.name, value: ele.index })
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const onCameraSelect = (val: any) => {
|
||||
dronePara.cameraSelected = val
|
||||
|
||||
if (dronePara.cameraSelected) {
|
||||
const droneTemp = dronePara.livestreamSource
|
||||
droneTemp.forEach(ele => {
|
||||
const drone = ele
|
||||
if (drone.sn === dronePara.droneSelected) {
|
||||
const cameraListTemp = drone.cameras_list
|
||||
cameraListTemp.forEach((ele: any) => {
|
||||
const camera = ele
|
||||
if (camera.index === dronePara.cameraSelected) {
|
||||
const videoListTemp = camera.videos_list
|
||||
dronePara.videoList = []
|
||||
videoListTemp.forEach((ele: any) => {
|
||||
dronePara.videoList.push({ label: ele.type, value: ele.index })
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const onVideoSelect = (val: any) => {
|
||||
dronePara.videoSelected = val
|
||||
}
|
||||
const onClaritySelect = (val: any) => {
|
||||
dronePara.claritySelected = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@/styles/index.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="flex-column flex-justify-start flex-align-center">
|
||||
<video
|
||||
:style="{ width: '720px', height: '480px' }"
|
||||
id="video-webrtc"
|
||||
ref="videowebrtc"
|
||||
controls
|
||||
class="mt20"
|
||||
></video>
|
||||
<p class="fz24">Live streaming source selection</p>
|
||||
<div class="flex-row flex-justify-center flex-align-center mt10">
|
||||
<a-select
|
||||
style="width: 150px"
|
||||
placeholder="Select Live Type"
|
||||
@select="onLiveTypeSelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in liveTypeList"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
class="ml10"
|
||||
style="width:150px"
|
||||
placeholder="Select Drone"
|
||||
@select="onDroneSelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in droneList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
class="ml10"
|
||||
style="width:150px"
|
||||
placeholder="Select Camera"
|
||||
@select="onCameraSelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in cameraList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
class="ml10"
|
||||
style="width:150px"
|
||||
placeholder="Select Lens"
|
||||
@select="onVideoSelect"
|
||||
>
|
||||
<a-select-option
|
||||
class="ml10"
|
||||
v-for="item in videoList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
class="ml10"
|
||||
style="width:150px"
|
||||
placeholder="Select Clarity"
|
||||
@select="onClaritySelect"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in clarityList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="mt20">
|
||||
<p class="fz20">Livestate:{{ liveState == 0 ? 'Stop' : 'Playing' }}</p>
|
||||
<p class="fz10" v-if="livetypeSelected == 2">
|
||||
Please use VLC media player to play the RTSP livestream !!!
|
||||
</p>
|
||||
<p class="fz10" v-if="livetypeSelected == 2">
|
||||
RTSP Parameter:{{ rtspData }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt10 flex-row flex-justify-center flex-align-center">
|
||||
<a-button type="primary" large @click="onStart">Play</a-button>
|
||||
<a-button class="ml20" type="primary" large @click="onStop"
|
||||
>Stop</a-button
|
||||
>
|
||||
<a-button class="ml20" type="primary" large @click="onRefresh"
|
||||
>Refresh Live Capacity</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { message } from 'ant-design-vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { CURRENT_CONFIG as config } from '/@/api/http/config'
|
||||
import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage'
|
||||
import { getRoot } from '/@/root'
|
||||
import jswebrtc from '/@/vendors/jswebrtc.min.js'
|
||||
const root = getRoot()
|
||||
|
||||
const liveTypeList = [
|
||||
{
|
||||
value: 1,
|
||||
label: 'RTMP'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'RTSP'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: 'GB28181'
|
||||
}
|
||||
]
|
||||
const clarityList = [
|
||||
{
|
||||
value: 0,
|
||||
label: 'Adaptive'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: 'Smooth'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'Standard'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: 'HD'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'Super Clear'
|
||||
}
|
||||
]
|
||||
|
||||
const videowebrtc = ref(null)
|
||||
const livestreamSource = ref()
|
||||
const droneList = ref()
|
||||
const cameraList = ref()
|
||||
const videoList = ref()
|
||||
const droneSelected = ref()
|
||||
const cameraSelected = ref()
|
||||
const videoSeleted = ref()
|
||||
const claritySeleted = ref()
|
||||
const videoId = ref()
|
||||
const liveState = ref(0)
|
||||
const livetypeSelected = ref()
|
||||
const rtspData = ref()
|
||||
|
||||
const onRefresh = async () => {
|
||||
await getLiveCapacity({})
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
if (res.data === null) {
|
||||
console.warn('warning: get live capacity is null!!!')
|
||||
return
|
||||
}
|
||||
const resData: Array<[]> = res.data
|
||||
console.log('live_capacity:', resData)
|
||||
livestreamSource.value = resData
|
||||
console.log(livestreamSource)
|
||||
|
||||
const temp: Array<{}> = []
|
||||
if (livestreamSource.value) {
|
||||
livestreamSource.value.forEach(ele => {
|
||||
temp.push({ label: ele.sn, value: ele.sn })
|
||||
})
|
||||
console.log(temp)
|
||||
droneList.value = temp
|
||||
console.log(droneList.value)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onRefresh()
|
||||
})
|
||||
const onStart = async () => {
|
||||
const that = this
|
||||
console.log(
|
||||
'直播参数：',
|
||||
livetypeSelected.value,
|
||||
droneSelected.value,
|
||||
cameraSelected.value,
|
||||
videoSeleted.value,
|
||||
claritySeleted.value
|
||||
)
|
||||
const timestamp = new Date().getTime().toString()
|
||||
const liveTimestamp = timestamp
|
||||
if (
|
||||
livetypeSelected.value == null ||
|
||||
droneSelected.value == null ||
|
||||
cameraSelected.value == null ||
|
||||
videoSeleted.value == null ||
|
||||
claritySeleted.value == null
|
||||
) {
|
||||
console.warn('waring: not select live para!!!')
|
||||
return
|
||||
}
|
||||
videoId.value =
|
||||
droneSelected.value + '/' + cameraSelected.value + '/' + videoSeleted.value
|
||||
let liveURL = ''
|
||||
switch (livetypeSelected.value) {
|
||||
case 1: {
|
||||
// RTMP
|
||||
liveURL = config.rtmpURL + timestamp
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
// RTSP
|
||||
liveURL = config.rtspPara
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
// GB28181
|
||||
liveURL = config.gb28181Para
|
||||
break
|
||||
}
|
||||
default:
|
||||
console.warn('warning: live type is not correct!!!')
|
||||
break
|
||||
}
|
||||
await startLivestream({
|
||||
url: liveURL,
|
||||
video_id: videoId.value,
|
||||
url_type: livetypeSelected.value,
|
||||
video_quality: claritySeleted.value
|
||||
})
|
||||
.then(res => {
|
||||
if (livetypeSelected.value === 3) {
|
||||
const url = res.data.url
|
||||
const videoElement = videowebrtc.value
|
||||
// gb28181,it will fail if not wait.
|
||||
message.loading({
|
||||
content: '直播等待中。。。',
|
||||
duration: 4,
|
||||
onClose () {
|
||||
const player = new jswebrtc.Player(url, {
|
||||
video: videoElement,
|
||||
autoplay: true,
|
||||
onPlay: obj => {
|
||||
console.log('start play livestream')
|
||||
}
|
||||
})
|
||||
liveState.value = 1
|
||||
}
|
||||
})
|
||||
} else if (livetypeSelected.value === 2) {
|
||||
console.log(res)
|
||||
rtspData.value =
|
||||
'url:' +
|
||||
res.data.url +
|
||||
'&username:' +
|
||||
res.data.username +
|
||||
'&password:' +
|
||||
res.data.password
|
||||
} else if (livetypeSelected.value === 1) {
|
||||
const url = res.data.url
|
||||
const videoElement = videowebrtc.value
|
||||
console.log('start live:', url)
|
||||
const player = new jswebrtc.Player(url, {
|
||||
video: videoElement,
|
||||
autoplay: true,
|
||||
onPlay: obj => {
|
||||
console.log('start play livestream')
|
||||
liveState.value = 1
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
const onStop = () => {
|
||||
stopLivestream({
|
||||
video_id: videoId.value
|
||||
}).then(res => {
|
||||
liveState.value = 0
|
||||
console.log('stop play livestream')
|
||||
})
|
||||
}
|
||||
const onLiveTypeSelect = (val: any) => {
|
||||
livetypeSelected.value = val
|
||||
}
|
||||
const onDroneSelect = (val: any) => {
|
||||
droneSelected.value = val
|
||||
const temp: Array<{}> = []
|
||||
if (droneSelected.value) {
|
||||
const droneTemp = livestreamSource.value
|
||||
droneTemp.forEach(ele => {
|
||||
const drone = ele
|
||||
if (drone.sn === droneSelected.value) {
|
||||
const cameraListTemp = drone.cameras_list
|
||||
cameraListTemp.forEach(ele => {
|
||||
temp.push({ label: ele.name, value: ele.index })
|
||||
})
|
||||
cameraList.value = temp
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const onCameraSelect = (val: any) => {
|
||||
cameraSelected.value = val
|
||||
const result: Array<{}> = []
|
||||
if (cameraSelected.value) {
|
||||
const droneTemp = livestreamSource.value
|
||||
droneTemp.forEach(ele => {
|
||||
const drone = ele
|
||||
if (drone.sn === droneSelected.value) {
|
||||
const cameraListTemp = drone.cameras_list
|
||||
cameraListTemp.forEach(ele => {
|
||||
const camera = ele
|
||||
if (camera.index === cameraSelected.value) {
|
||||
const videoListTemp = camera.videos_list
|
||||
videoListTemp.forEach(ele => {
|
||||
result.push({ label: ele.type, value: ele.index })
|
||||
})
|
||||
videoList.value = result
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const onVideoSelect = (val: any) => {
|
||||
videoSeleted.value = val
|
||||
}
|
||||
const onClaritySelect = (val: any) => {
|
||||
claritySeleted.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@/styles/index.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="flex-column flex-justify-start flex-align-center">
|
||||
<a-button
|
||||
class="mt10 "
|
||||
style="width:90%"
|
||||
type="primary"
|
||||
@click="onAgoraLiveStream"
|
||||
>Agora Live</a-button
|
||||
>
|
||||
<a-button
|
||||
class="mt10"
|
||||
style="width:90%"
|
||||
type="primary"
|
||||
@click="onOthersLive"
|
||||
>RTMP/GB28181 Live</a-button
|
||||
>
|
||||
</div>
|
||||
<div v-if="enableAgoraLive">
|
||||
<a-modal
|
||||
style="top:0"
|
||||
v-model:visible="enableAgoraLive"
|
||||
title="Agora Live"
|
||||
width="100%"
|
||||
:maskClosable="false"
|
||||
wrapClassName="full-modal"
|
||||
:footer="null"
|
||||
>
|
||||
<LiveAgora />
|
||||
</a-modal>
|
||||
</div>
|
||||
<div v-if="enableOthersLive">
|
||||
<a-modal
|
||||
style="top:0"
|
||||
v-model:visible="enableOthersLive"
|
||||
title="RTMP/GB28181/RTSP Live"
|
||||
width="100%"
|
||||
:maskClosable="false"
|
||||
wrapClassName="full-modal"
|
||||
:footer="null"
|
||||
>
|
||||
<LiveOthers />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import LiveAgora from './livestream-agora.vue'
|
||||
import LiveOthers from './livestream-others.vue'
|
||||
import { getRoot } from '/@/root'
|
||||
const root = getRoot()
|
||||
|
||||
const enableAgoraLive = ref(false)
|
||||
const enableOthersLive = ref(false)
|
||||
const onAgoraLiveStream = () => {
|
||||
console.log('agora')
|
||||
enableAgoraLive.value = true
|
||||
}
|
||||
const onOthersLive = () => {
|
||||
console.log('liveview')
|
||||
enableOthersLive.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh);
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="project-media-wrapper">
|
||||
Media
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="project-tsa-wrapper">
|
||||
TSA
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="project-wayline-wrapper">
|
||||
wayline
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="demo-project-sidebar-wrapper">
|
||||
<router-link
|
||||
v-for="item in options"
|
||||
:key="item.key"
|
||||
:to="item.path"
|
||||
:class="{
|
||||
'menu-item': true,
|
||||
selected: selectedRoute(item),
|
||||
disabled: item.key > 6
|
||||
}"
|
||||
>
|
||||
<a-tooltip :title="item.label" placement="right">
|
||||
<span>{{ item.label }}</span>
|
||||
</a-tooltip>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { getRoot } from '/@/root'
|
||||
interface IOptions {
|
||||
key: number
|
||||
label: string
|
||||
path:
|
||||
| string
|
||||
| {
|
||||
path: string
|
||||
query?: any
|
||||
}
|
||||
icon: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Sidebar',
|
||||
setup () {
|
||||
const root = getRoot()
|
||||
const options = [
|
||||
{ key: 0, label: 'livestream', path: '/livestream', icon: 'livestream' },
|
||||
{ key: 1, label: 'tsa', path: '/tsa', icon: 'tsa' },
|
||||
{ key: 2, label: 'layer', path: '/layer', icon: 'layer' },
|
||||
{ key: 3, label: 'media', path: '/media', icon: 'media' },
|
||||
{ key: 4, label: 'wayline', path: '/wayline', icon: 'wayline' }
|
||||
]
|
||||
|
||||
function selectedRoute (item: IOptions) {
|
||||
const path = typeof item.path === 'string' ? item.path : item.path.path
|
||||
return root.$route.path?.indexOf(path) === 0
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
selectedRoute
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.demo-project-sidebar-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80px;
|
||||
border-right: 1px solid #4f4f4f;
|
||||
color: $text-white-basic;
|
||||
// flex: 1;
|
||||
overflow: hidden;
|
||||
.menu-item {
|
||||
width: 100%;
|
||||
padding: 16px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: $text-white-basic;
|
||||
cursor: pointer;
|
||||
&.selected {
|
||||
background-color: $dark-highlight;
|
||||
color: $primary;
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
.filling {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 24px;
|
||||
color: $text-white-basic;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.ant-tooltip-open {
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
import { readFileSync, readdirSync } from 'fs'
|
||||
|
||||
let idPerfix = ''
|
||||
const svgTitle = /<svg([^>+].*?)>/
|
||||
const clearHeightWidth = /(width|height)="([^>+].*?)"/g
|
||||
const hasViewBox = /(viewBox="[^>+].*?")/g
|
||||
const clearReturn = /(\r)|(\n)/g
|
||||
|
||||
// Find the svg file
|
||||
function svgFind(e) {
|
||||
const arr = []
|
||||
const dirents = readdirSync(e, { withFileTypes: true })
|
||||
for (const dirent of dirents) {
|
||||
if (dirent.isDirectory()) arr.push(...svgFind(e + dirent.name + '/'))
|
||||
else {
|
||||
const svg = readFileSync(e + dirent.name)
|
||||
.toString()
|
||||
.replace(clearReturn, '')
|
||||
.replace(svgTitle, ($1, $2) => {
|
||||
let width = 0
|
||||
let height = 0
|
||||
let content = $2.replace(clearHeightWidth, (s1, s2, s3) => {
|
||||
if (s2 === 'width') width = s3
|
||||
else if (s2 === 'height') height = s3
|
||||
return ''
|
||||
})
|
||||
if (!hasViewBox.test($2)) content += `viewBox="0 0 ${width} ${height}"`
|
||||
return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>`
|
||||
}).replace('</svg>', '</symbol>')
|
||||
arr.push(svg)
|
||||
}
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
export const svgBuilder = (path: any, perfix = 'icon') => {
|
||||
if (path === '') return
|
||||
idPerfix = perfix
|
||||
const res = svgFind(path)
|
||||
console.log(res)
|
||||
return {
|
||||
name: 'svg-transform',
|
||||
transformIndexHtml (dom: String) {
|
||||
return dom.replace(
|
||||
'<body>',
|
||||
`<body><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" version="1.1">${res.join('')}</svg>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { createApp, ComponentCustomProperties, App as VueApp } from 'vue'
|
||||
declare module '@vue/runtime-core' {
|
||||
interface ComponentCustomProperties {
|
||||
$aMap: any
|
||||
$aMapObj: any
|
||||
$mouseTool: any
|
||||
}
|
||||
}
|
||||
let root: ComponentCustomProperties
|
||||
let app = null as any
|
||||
|
||||
export function createInstance (App: any): VueApp {
|
||||
app = createApp(App)
|
||||
root = app.config.globalProperties as ComponentCustomProperties
|
||||
return app
|
||||
}
|
||||
|
||||
export function getRoot (): ComponentCustomProperties {
|
||||
return root
|
||||
}
|
||||
|
||||
export function getApp (): VueApp {
|
||||
return app
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
import { ERouterName } from '/@/types/index'
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/' + ERouterName.Project,
|
||||
name: ERouterName.Project,
|
||||
// redirect: {
|
||||
// name: ERouterName.Project
|
||||
// },
|
||||
component: () => import('/@/pages/project-app/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/' + ERouterName.Livestream,
|
||||
component: () => import('/@/pages/project-app/projects/livestream.vue')
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.Tsa,
|
||||
component: () => import('/@/pages/project-app/projects/tsa.vue')
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.Layer,
|
||||
name: ERouterName.Layer,
|
||||
component: () => import('/@/pages/project-app/projects/layer.vue')
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.Media,
|
||||
name: ERouterName.Media,
|
||||
component: () => import('/@/pages/project-app/projects/media.vue')
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.Wayline,
|
||||
name: ERouterName.Wayline,
|
||||
component: () => import('/@/pages/project-app/projects/wayline.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.Pilot,
|
||||
name: ERouterName.Pilot,
|
||||
component: () => import('/@/pages/page-pilot/pilot-index.vue'),
|
||||
children: [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.PilotHome,
|
||||
component: () => import('/@/pages/page-pilot/pilot-home.vue')
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.PilotMedia,
|
||||
component: () => import('/@/pages/page-pilot/pilot-media.vue')
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.PilotLiveshare,
|
||||
component: () => import('/@/pages/page-pilot/pilot-liveshare.vue')
|
||||
},
|
||||
{
|
||||
path: '/' + ERouterName.Element,
|
||||
name: ERouterName.Element,
|
||||
component: () => import('/@/pages/elements/elements.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
externo
+5
@@ -0,0 +1,5 @@
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { InjectionKey } from 'vue'
|
||||
import { ActionTree, createStore, GetterTree, MutationTree, Store, StoreOptions, useStore } from 'vuex'
|
||||
import { getLayers } from '/@/api/layer'
|
||||
import { LayerType } from '/@/types/mapLayer'
|
||||
const initStateFunc = () => ({
|
||||
Layers: [
|
||||
{
|
||||
name: 'default',
|
||||
id: '',
|
||||
is_distributed: true,
|
||||
elements: [],
|
||||
is_check: false,
|
||||
is_select: false,
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
name: 'share',
|
||||
id: '',
|
||||
is_distributed: true,
|
||||
elements: [],
|
||||
is_check: false,
|
||||
is_select: false,
|
||||
type: 2
|
||||
}
|
||||
],
|
||||
GatewayInfo: { // remote controller, dock
|
||||
|
||||
},
|
||||
DeviceInfo: { // drone
|
||||
|
||||
},
|
||||
layerBaseInfo: {} as {
|
||||
[key:string]:string
|
||||
},
|
||||
drawVisible: false,
|
||||
coverList: [
|
||||
|
||||
] as any,
|
||||
wsEvent: {
|
||||
mapElementCreat: {},
|
||||
mapElementUpdate: {},
|
||||
mapElementDelete: {}
|
||||
}
|
||||
})
|
||||
|
||||
export type RootStateType = ReturnType<typeof initStateFunc>
|
||||
|
||||
const getters: GetterTree<RootStateType, RootStateType> = {
|
||||
}
|
||||
const mutations: MutationTree<RootStateType> = {
|
||||
SET_LAYER_INFO (state, info) {
|
||||
state.Layers = info
|
||||
},
|
||||
SET_DEVICE_INFO (state, info) {
|
||||
state.DeviceInfo = info
|
||||
// console.log(state.DeviceInfo)
|
||||
},
|
||||
SET_GATEWAY_INFO (state, info) {
|
||||
state.GatewayInfo = info
|
||||
// console.log(state.GatewayInfo)
|
||||
},
|
||||
SET_DRAW_VISIBLE_INFO (state, bool) {
|
||||
state.drawVisible = bool
|
||||
},
|
||||
SET_MAP_ELEMENT_CREATE (state, info) {
|
||||
state.wsEvent.mapElementCreat = info
|
||||
},
|
||||
SET_MAP_ELEMENT_UPDATE (state, info) {
|
||||
state.wsEvent.mapElementUpdate = info
|
||||
},
|
||||
SET_MAP_ELEMENT_DELETE (state, info) {
|
||||
state.wsEvent.mapElementDelete = info
|
||||
},
|
||||
}
|
||||
|
||||
const actions: ActionTree<RootStateType, RootStateType> = {
|
||||
async getAllElement ({ commit }) {
|
||||
const result = await getLayers({
|
||||
groupId: '',
|
||||
isDistributed: true
|
||||
})
|
||||
commit('SET_LAYER_INFO', result.data?.list)
|
||||
console.log(result)
|
||||
},
|
||||
updateElement ({ state }, content: {type: 'is_check' | 'is_select', id: string, bool:boolean}) {
|
||||
const key = content.id.replaceAll('resource__', '')
|
||||
const type = content.type
|
||||
const layers = state.Layers
|
||||
const layer = layers.find(item => item.id === key)
|
||||
if (layer) {
|
||||
layer[type] = content.bool
|
||||
}
|
||||
},
|
||||
setLayerInfo ({ state }, layers) {
|
||||
// const layers = state.Layers
|
||||
const obj:{
|
||||
[key:string]:string
|
||||
} = {}
|
||||
layers.forEach(layer => {
|
||||
if (layer.type === LayerType.Default) {
|
||||
obj.default = layer.id
|
||||
} else {
|
||||
if (layer.type === LayerType.Share) {
|
||||
obj.share = layer.id
|
||||
}
|
||||
}
|
||||
})
|
||||
state.layerBaseInfo = obj
|
||||
console.log('state.layerBaseInfo', state.layerBaseInfo)
|
||||
},
|
||||
getLayerInfo ({ state }, id:string) {
|
||||
return state.layerBaseInfo[id]
|
||||
}
|
||||
}
|
||||
|
||||
const storeOptions: StoreOptions<RootStateType> = {
|
||||
state: initStateFunc,
|
||||
getters,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
|
||||
const rootStore = createStore(storeOptions)
|
||||
|
||||
export default rootStore
|
||||
|
||||
export const storeKey: InjectionKey<Store<RootStateType>> = Symbol('')
|
||||
|
||||
type AllStateStoreTypes = RootStateType & {
|
||||
// moduleName: moduleType
|
||||
}
|
||||
|
||||
export function useMyStore<T = AllStateStoreTypes> () {
|
||||
return useStore<T>(storeKey)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
|
||||
html, body, #app, #my-app {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f9fa;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
// Prevent font enlargement in horizontal screen
|
||||
text-size-adjust: 100%;
|
||||
|
||||
font-family: Roboto, sans-serif-medium, Arial, sans-serif;
|
||||
color: $main-text-color;
|
||||
font-size: 14px;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -0,0 +1,318 @@
|
||||
.flex-display {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
@extend .flex-display;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
@extend .flex-display;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.flex-align-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.flex-align-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
.flex-align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.flex-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.flex-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.flex-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.flex-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.flex-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
//width
|
||||
.width-100vw {
|
||||
width: 100vw;
|
||||
}
|
||||
.width-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//height
|
||||
.height-100vh {
|
||||
height: 100vh;
|
||||
}
|
||||
.height-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
//margin
|
||||
m-5 {
|
||||
margin: -5px !important;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: -5px !important;
|
||||
}
|
||||
|
||||
.mt100 {
|
||||
margin-top: 100px !important;
|
||||
}
|
||||
|
||||
.mt110 {
|
||||
margin-top: 110px !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: -5px !important;
|
||||
}
|
||||
.ml-5 {
|
||||
margin-left: -5px !important;
|
||||
}
|
||||
.mr-5 {
|
||||
margin-right: -5px !important;
|
||||
}
|
||||
.m0 {
|
||||
margin: 0px !important;
|
||||
}
|
||||
.mt0 {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
.mb0 {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.ml0 {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
.mr0 {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
.m5 {
|
||||
margin: 5px !important;
|
||||
}
|
||||
.mt5 {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
.mb5 {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
.ml5 {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.mr5 {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
.m10 {
|
||||
margin: 10px !important;
|
||||
}
|
||||
.mt10 {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
.mb10 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.ml10 {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
.mr10 {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
.m15 {
|
||||
margin: 15px !important;
|
||||
}
|
||||
.mt15 {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
.mb15 {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
.ml15 {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
.mr15 {
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
.m20 {
|
||||
margin: 20px !important;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
.mb20 {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
.mr20 {
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
.m25 {
|
||||
margin: 25px !important;
|
||||
}
|
||||
.mt25 {
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
.mb25 {
|
||||
margin-bottom: 25px !important;
|
||||
}
|
||||
.ml25 {
|
||||
margin-left: 25px !important;
|
||||
}
|
||||
.mr25 {
|
||||
margin-right: 25px !important;
|
||||
}
|
||||
.m30 {
|
||||
margin: 30px !important;
|
||||
}
|
||||
.mt30 {
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
.mb30 {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
.ml30 {
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
.ml40 {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
.mr30 {
|
||||
margin-right: 30px !important;
|
||||
}
|
||||
.m50 {
|
||||
margin: 50px !important;
|
||||
}
|
||||
.mt50 {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
.mb50 {
|
||||
margin-bottom: 50px !important;
|
||||
}
|
||||
.ml50 {
|
||||
margin-left: 50px !important;
|
||||
}
|
||||
.mr50 {
|
||||
margin-right: 50px !important;
|
||||
}
|
||||
// padding值
|
||||
.p0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.pt0 {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.pr0 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.pb0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.pl0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.p5 {
|
||||
padding: 5px;
|
||||
}
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.pl5 {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.p10 {
|
||||
padding: 10px;
|
||||
}
|
||||
.pt10 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.pr10 {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.pb10 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.pl10 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.p15 {
|
||||
padding: 15px;
|
||||
}
|
||||
.pt15 {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.pr15 {
|
||||
padding-right: 15px;
|
||||
}
|
||||
.pb15 {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.pl15 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.p20 {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pt20 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.pr20 {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.pb20 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.pl20 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.p30 {
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pt30 {
|
||||
padding-top: 30px;
|
||||
}
|
||||
.pr30 {
|
||||
padding-right: 30px;
|
||||
}
|
||||
.pb30 {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.pl30 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.pb50 {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.pl50 {
|
||||
padding-left: 50px;
|
||||
}
|
||||
.pl120 {
|
||||
padding-left: 120px;
|
||||
}
|
||||
.pl150 {
|
||||
padding-left: 150px;
|
||||
}
|
||||
.pt50 {
|
||||
padding-top: 50px;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
$font-family-sans-serif: 'Open Sans', BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', SimSun, sans-serif;
|
||||
|
||||
$line-heights: (
|
||||
12: 20px,
|
||||
14: 22px,
|
||||
16: 24px,
|
||||
18: 26px
|
||||
);
|
||||
|
||||
// 用法: @include text(12)
|
||||
@mixin text($size) {
|
||||
font-size: #{$size}px;
|
||||
line-height: map-get($line-heights, $size);
|
||||
}
|
||||
|
||||
// 常规体
|
||||
@mixin text-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// 中粗体
|
||||
@mixin text-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@mixin ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fz10 {
|
||||
font-size: 10;
|
||||
}
|
||||
.fz12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.fz14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.fz16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fz18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.fz20 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.fz22 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.fz24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.fz26 {
|
||||
font-size: 26px;
|
||||
}
|
||||
.fz28 {
|
||||
font-size: 28px;
|
||||
}
|
||||
.fz30 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.fz32 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.fz35 {
|
||||
font-size: 35px;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import './common.scss';
|
||||
@import 'flex.style.scss';
|
||||
@import 'fonts.scss';
|
||||
@@ -0,0 +1,164 @@
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
border : 0;
|
||||
font : inherit;
|
||||
font-size : 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height : 1;
|
||||
// -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing : 0;
|
||||
}
|
||||
|
||||
caption,
|
||||
th,
|
||||
td {
|
||||
font-weight : normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
q,
|
||||
blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
q::before,
|
||||
q::after,
|
||||
blockquote::before,
|
||||
blockquote::after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
a {
|
||||
background : transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='number'],
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='email'],
|
||||
input[type='search'],
|
||||
select,
|
||||
textarea {
|
||||
font-family : inherit;
|
||||
margin : 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
$main-text-color: #000;
|
||||
$header-height: 52px;
|
||||
// Auxiliary color
|
||||
$info: #1fa3f6;
|
||||
$success: #28d445;
|
||||
$danger: #e70102;
|
||||
$alarm: #ffcc00;
|
||||
$warning: #ffcc00;
|
||||
$error: #e70102;
|
||||
|
||||
// 品牌色
|
||||
$primary: #2d8cf0;
|
||||
$primary-click: #2b85e4;
|
||||
$primary-hover: #5cadff;
|
||||
$primary-hover-dropdown: rgba($primary-hover, 0.2);
|
||||
$primary-disabled: #274d75;
|
||||
// 辅助色拓展
|
||||
$danger-hover: #ff4d4e;
|
||||
$danger-active: #d40001;
|
||||
$menu-primary: #464c5b; // tab菜单主题色
|
||||
// 图标颜色
|
||||
$ic-white-normal: #fff;
|
||||
$ic-black-normal: #4e4e4e;
|
||||
$ic-hover: #a7a7a7;
|
||||
$ic-disabled: #5f5f5f;
|
||||
$ic-selected: #1088f2;
|
||||
// 中性色-黑
|
||||
$dark-bg-light: #868688; // 背景色浅色
|
||||
$dark-btn-hover: #5d5f61; // 按钮 hover 色
|
||||
$dark-border: #4f4f4f; // 边框色
|
||||
$dark-btn-disabled: #3c3c3c; // 按钮主色禁用
|
||||
$dark-border-secondary: #393939; // 第二边框色
|
||||
$dark-basic-primary: #232323; // 第一基础底色
|
||||
$dark-basic-secondary: #282828; // 第二基础底色
|
||||
$dark-highlight: #232323; // 高亮色
|
||||
$dark-disable: #444444; // 置灰底色
|
||||
$dark-project-disabled: #292929;
|
||||
// 中性色-白
|
||||
$light-bg-primary: #fff; // 1 背景
|
||||
$light-bg-secondary: #f7f9fa; // 2 背景
|
||||
$light-divider: #e8eaec; // 3 分割线
|
||||
$light-border: #dcdee2; // 4 边框
|
||||
$light-disabled: #c5c8ce; // 5 失效
|
||||
$light-auxiliary: #808695; // 6 辅助图标
|
||||
$light-main-text: #515a6e; // 7 正文 ？用处
|
||||
$light-title: #17233d; // 8 标题 ？用处
|
||||
$light-bg-menu: #3b3e40; // 9 菜单栏背景色 ？用处
|
||||
$light-border-secondary: #e8e8e8; // 第二边框色
|
||||
|
||||
// 字体
|
||||
// 白色
|
||||
$text-white-basic: #fff; // 基础色
|
||||
$text-white-main: rgba($text-white-basic, 1); // 正文
|
||||
$text-white-secondary: rgba($text-white-basic, 0.45); // 次级
|
||||
$text-white-disabled: rgba($text-white-basic, 0.25); // 置灰
|
||||
// 黑色
|
||||
$text-black-basic: #000000; // 基础色
|
||||
$text-black-emphasize: rgba($text-black-basic, 0.85); // 强调
|
||||
$text-black-main: rgba($text-black-basic, 0.65); // 正文
|
||||
$text-black-secondary: rgba($text-black-basic, 0.45); // 次要
|
||||
$text-black-disabled: rgba($text-black-basic, 0.25); // 置灰
|
||||
$text-link: $primary;
|
||||
$text-danger: $danger;
|
||||
// 标签
|
||||
$tag-green: #19be6b;
|
||||
// 滚动条等颜色
|
||||
$scroll-bar: #c5c8ce;
|
||||
$scroll-bar-dark: #5f5f5f;
|
||||
|
||||
// 选择框
|
||||
|
||||
$select-disabled: #d8d8d8;
|
||||
@@ -0,0 +1,19 @@
|
||||
export enum ERouterName {
|
||||
Element = 'element',
|
||||
Project = 'project',
|
||||
Tsa = 'tsa',
|
||||
Layer = 'layer',
|
||||
Media = 'media',
|
||||
Wayline = 'wayline',
|
||||
Livestream = 'livestream',
|
||||
Pilot = 'pilot-login',
|
||||
PilotHome = 'pilot-home',
|
||||
PilotMedia = 'pilot-media',
|
||||
PilotLiveshare = 'pilot-liveshare'
|
||||
}
|
||||
|
||||
export enum EStorageKey {
|
||||
LANG_CODE = 'DJI_CREATE_VITE_H5_APP:lang_code',
|
||||
TEST_TOOLS_POSITION_STORAGE_KEY = 'DJI_CREATE_VITE_H5_APP:test_tools_position',
|
||||
SESSION_ID = 'DJI_CREATE_VITE_H5_APP:sess'
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './enums'
|
||||
@@ -0,0 +1,6 @@
|
||||
export enum MapDoodleEnum {
|
||||
PIN = 'pin',
|
||||
POLYLINE = 'polyline',
|
||||
POLYGON = 'polygon',
|
||||
Close = 'off'
|
||||
}
|
||||
externo
+100
@@ -0,0 +1,100 @@
|
||||
|
||||
export interface MapGeographicPosition {
|
||||
longitude: number;
|
||||
latitude: number;
|
||||
height?: number;
|
||||
}
|
||||
export enum LayerType {
|
||||
Normal,
|
||||
Default,
|
||||
Share
|
||||
}
|
||||
export interface pinAMapPosition {
|
||||
KL: number
|
||||
className: string
|
||||
kT: number
|
||||
lng: number
|
||||
lat: number
|
||||
}
|
||||
export enum ResourceStatus {
|
||||
NotShow,
|
||||
Show
|
||||
}
|
||||
export type GeojsonCoordinate = [number, number, number?]
|
||||
|
||||
export interface GeojsonLine {
|
||||
type: 'Feature'
|
||||
properties: {
|
||||
color: string
|
||||
directConnected?: boolean
|
||||
}
|
||||
geometry: {
|
||||
type: 'LineString'
|
||||
coordinates: GeojsonCoordinate[]
|
||||
}
|
||||
}
|
||||
|
||||
export interface GeojsonPolygon {
|
||||
type: 'Feature'
|
||||
properties: {
|
||||
color: string
|
||||
}
|
||||
geometry: {
|
||||
type: 'Polygon'
|
||||
coordinates: GeojsonCoordinate[][]
|
||||
}
|
||||
}
|
||||
|
||||
export interface GeojsonPoint {
|
||||
type: 'Feature'
|
||||
properties: {
|
||||
color: string
|
||||
clampToGround?: boolean
|
||||
}
|
||||
geometry: {
|
||||
type: 'Point'
|
||||
coordinates: GeojsonCoordinate
|
||||
}
|
||||
}
|
||||
export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint
|
||||
|
||||
interface ResourceObjectBasic {
|
||||
user_name: string
|
||||
user_id?: string
|
||||
type:0| 1 | 2
|
||||
content: unknown
|
||||
}
|
||||
export interface PinResource extends ResourceObjectBasic {
|
||||
type: 0
|
||||
content: GeojsonFeature
|
||||
}
|
||||
|
||||
export type ResourceObject = PinResource
|
||||
export enum LayerElevationLoadStatus {
|
||||
Unload,
|
||||
Load
|
||||
}
|
||||
|
||||
export interface LayerResource {
|
||||
id: string
|
||||
name: string
|
||||
order: number
|
||||
status: ResourceStatus
|
||||
resource: ResourceObject | null
|
||||
display: number
|
||||
create_time: number
|
||||
elevation_load_status?: LayerElevationLoadStatus //
|
||||
}
|
||||
export interface Layer {
|
||||
id: string
|
||||
name: string
|
||||
order: number
|
||||
create_time: number
|
||||
type: LayerType
|
||||
is_distributed: boolean
|
||||
is_lock: boolean
|
||||
elements: null | LayerResource[],
|
||||
is_check?: boolean
|
||||
is_select?: boolean
|
||||
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { MapElementEnum } from '/@/constants/map'
|
||||
|
||||
export interface mapLayerStyle {
|
||||
background: string
|
||||
}
|
||||
|
||||
export interface mapLayerChildren {
|
||||
key: string
|
||||
style: mapLayerStyle
|
||||
title: string
|
||||
obj: any
|
||||
}
|
||||
export interface mapLayerChildrenObj {
|
||||
className: string
|
||||
key: string
|
||||
name: string
|
||||
type: string
|
||||
}
|
||||
|
||||
// 拖拽事件
|
||||
export interface DropEvent {
|
||||
node: {
|
||||
eventKey: string
|
||||
pos: string
|
||||
$parent: any
|
||||
}
|
||||
dragNode: {
|
||||
eventKey: string
|
||||
}
|
||||
dropPosition: number
|
||||
dropToGap: boolean
|
||||
}
|
||||
export interface mapLayer {
|
||||
key?: string
|
||||
title: string
|
||||
id: string
|
||||
name: string
|
||||
style: mapLayerStyle
|
||||
elements: any
|
||||
}
|
||||
export interface elementGroupsReq{
|
||||
groupId: string
|
||||
isDistributed: boolean
|
||||
}
|
||||
export interface PostElementsBody {
|
||||
id: string
|
||||
name: string
|
||||
resource: {
|
||||
type: MapElementEnum,
|
||||
user_name?: string,
|
||||
content: {
|
||||
type:string,
|
||||
properties:{
|
||||
color:string,
|
||||
clampToGround:boolean
|
||||
},
|
||||
geometry:{
|
||||
type:string,
|
||||
coordinates:unknown
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export interface Color {
|
||||
id: number
|
||||
color: string
|
||||
selected: boolean,
|
||||
name: string
|
||||
}
|
||||
|
||||
export enum GeoType {
|
||||
LineString = 'LineString',
|
||||
Polygon = 'Polygon',
|
||||
Point = 'Point'
|
||||
}
|
||||
export enum ResourceStatus {
|
||||
NotShow,
|
||||
Show
|
||||
}
|
||||
|
||||
export enum LayerElevationLoadStatus {
|
||||
Unload,
|
||||
Load
|
||||
}
|
||||
export interface PutElementsBody {
|
||||
name?: string
|
||||
status?: ResourceStatus
|
||||
content?: unknown
|
||||
display?: number
|
||||
elevation_load_status?: LayerElevationLoadStatus
|
||||
}
|
||||
export enum LayerType {
|
||||
Normal,
|
||||
Default,
|
||||
Share,
|
||||
Reconstruction
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { App, DefineComponent } from 'vue'
|
||||
|
||||
const components: Record<string, DefineComponent<{}, {}, any>> = {
|
||||
|
||||
}
|
||||
|
||||
export const CommonComponents = {
|
||||
install (app: App): void {
|
||||
Object.keys(components).forEach(name => {
|
||||
app.component(name, components[name])
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export function formatPhoneNum (phoneNum: string | number) {
|
||||
const str = String(phoneNum)
|
||||
return str.substring(0, 3) + '****' + str.slice(-4)
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
MapGeographicPosition,
|
||||
} from '/@/types/map'
|
||||
|
||||
export type GeojsonCoordinate = [number, number, number?]
|
||||
|
||||
export interface GeojsonLine {
|
||||
type: 'Feature'
|
||||
properties: {
|
||||
color: string
|
||||
directConnected?: boolean
|
||||
}
|
||||
geometry: {
|
||||
type: 'LineString'
|
||||
coordinates: GeojsonCoordinate[]
|
||||
}
|
||||
}
|
||||
|
||||
export interface GeojsonPolygon {
|
||||
type: 'Feature'
|
||||
properties: {
|
||||
color: string
|
||||
}
|
||||
geometry: {
|
||||
type: 'Polygon'
|
||||
coordinates: GeojsonCoordinate[][]
|
||||
}
|
||||
}
|
||||
|
||||
export interface GeojsonPoint {
|
||||
type: 'Feature'
|
||||
properties: {
|
||||
color: string
|
||||
clampToGround?: boolean
|
||||
}
|
||||
geometry: {
|
||||
type: 'Point'
|
||||
coordinates: GeojsonCoordinate
|
||||
}
|
||||
}
|
||||
|
||||
export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint
|
||||
|
||||
export function geographic2Coordinate (position: MapGeographicPosition): GeojsonCoordinate {
|
||||
const coordinates: GeojsonCoordinate = [position.longitude, position.latitude]
|
||||
if (position.height !== undefined) coordinates.push(position.height)
|
||||
return coordinates
|
||||
}
|
||||
|
||||
export function generateLine (coordinates: MapGeographicPosition[], properties: GeojsonLine['properties']): GeojsonFeature {
|
||||
return {
|
||||
type: 'Feature',
|
||||
properties,
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: coordinates.map(geographic2Coordinate),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function generatePolygon (coordinates: MapGeographicPosition[], properties: GeojsonPolygon['properties']): GeojsonFeature {
|
||||
return {
|
||||
type: 'Feature',
|
||||
properties,
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [coordinates.map(geographic2Coordinate)],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function generatePoint (position: MapGeographicPosition, properties: GeojsonPoint['properties']): GeojsonFeature {
|
||||
return {
|
||||
type: 'Feature',
|
||||
properties,
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: geographic2Coordinate(position),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
const layerTreeTypes = ['layer', 'resource'] as const
|
||||
type LayerTreeType = (typeof layerTreeTypes)[number]
|
||||
const Spliter = '__'
|
||||
|
||||
export function getLayerTreeKey (type: LayerTreeType, id: number | string) {
|
||||
return `${type}${Spliter}${id}`
|
||||
}
|
||||
|
||||
export function isLayerTreeKey (key: string, type?: LayerTreeType) {
|
||||
if (type) {
|
||||
return key.startsWith(`${type}${Spliter}`)
|
||||
} else {
|
||||
return layerTreeTypes.some(t => key.startsWith(`${t}${Spliter}`))
|
||||
}
|
||||
}
|
||||
|
||||
export function getIdFromLayerTreeKey (key: string) {
|
||||
return key.split(Spliter)[1]
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
|
||||
/**
|
||||
* Used for log printing in a non-production environment
|
||||
* @param args
|
||||
*/
|
||||
export function consoleLog (...args: Parameters<typeof console.log>) {
|
||||
if (import.meta.env.VITE_APP_ENVIRONMENT !== 'PROD') {
|
||||
window.console.log.apply(null, args) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
|
||||
export function consoleWarn (...args: Parameters<typeof console.warn>) {
|
||||
if (import.meta.env.VITE_APP_ENVIRONMENT !== 'PROD') {
|
||||
console.warn.apply(null, args) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
|
||||
export function consoleError (...args: Parameters<typeof console.error>) {
|
||||
if (import.meta.env.VITE_APP_ENVIRONMENT !== 'PROD') {
|
||||
console.error.apply(null, args) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
|
||||
export function testEnvLog (...args: Parameters<typeof console.log>) {
|
||||
if (import.meta.env.VITE_APP_ENVIRONMENT !== 'PROD') {
|
||||
console.log.apply(null, args) // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { pinAMapPosition, MapGeographicPosition, Layer, LayerType, LayerElevationLoadStatus } from '/@/types/map'
|
||||
import { generatePoint, generateLine, generatePolygon } from '/@/utils/genjson'
|
||||
import { MapDoodleColor, MapElementEnum } from '/@/constants/map'
|
||||
function getPinPosition (pinAMapPosition: pinAMapPosition):MapGeographicPosition {
|
||||
return { height: 0, latitude: pinAMapPosition.lat, longitude: pinAMapPosition.lng }
|
||||
}
|
||||
|
||||
export function generatePointContent (pinAMapPosition: pinAMapPosition) {
|
||||
const position = getPinPosition(pinAMapPosition)
|
||||
return {
|
||||
type: MapElementEnum.PIN,
|
||||
content: generatePoint(position, {
|
||||
color: MapDoodleColor.PinColor,
|
||||
clampToGround: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
function getLieOrPolyPosition (mapPosition: pinAMapPosition[]):MapGeographicPosition[] {
|
||||
const position = [] as MapGeographicPosition[]
|
||||
mapPosition.forEach(item => {
|
||||
position.push({ height: 0, latitude: item.lat, longitude: item.lng })
|
||||
})
|
||||
return position
|
||||
}
|
||||
export function generateLineContent (mapPosition: pinAMapPosition[]) {
|
||||
const position = getLieOrPolyPosition(mapPosition)
|
||||
return {
|
||||
type: MapElementEnum.LINE,
|
||||
content: generateLine(position, {
|
||||
color: MapDoodleColor.PolylineColor,
|
||||
directConnected: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function generatePolyContent (mapPosition: pinAMapPosition[]) {
|
||||
const position = getLieOrPolyPosition(mapPosition)
|
||||
return {
|
||||
type: MapElementEnum.POLY,
|
||||
content: generatePolygon(position, {
|
||||
color: MapDoodleColor.PolygonColor,
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { EStorageKey } from '/@/types/enums'
|
||||
import { consoleWarn } from './logger'
|
||||
|
||||
function getStorageData (key: EStorageKey, parse?: boolean): string | null
|
||||
function getStorageData<T> (key: EStorageKey, parse?: boolean): T | null
|
||||
function getStorageData (key: EStorageKey, parse?: boolean): any {
|
||||
const value = window.localStorage.getItem(key)
|
||||
if (parse && value) {
|
||||
try {
|
||||
const result = JSON.parse(value)
|
||||
return result
|
||||
} catch (e) {
|
||||
consoleWarn('appStorage.get failed, err:', e)
|
||||
return null
|
||||
}
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function clearStorageData (key: EStorageKey | EStorageKey[]) {
|
||||
let keyList: EStorageKey[] = []
|
||||
if (Array.isArray(key)) {
|
||||
keyList = key
|
||||
} else {
|
||||
keyList = [key]
|
||||
}
|
||||
keyList.forEach(item => {
|
||||
window.localStorage.removeItem(item)
|
||||
})
|
||||
}
|
||||
|
||||
const appStorage = {
|
||||
save (key: EStorageKey, value: string) {
|
||||
window.localStorage.setItem(key, value)
|
||||
},
|
||||
get: getStorageData,
|
||||
|
||||
clear: clearStorageData,
|
||||
}
|
||||
|
||||
export default appStorage
|
||||
@@ -0,0 +1,6 @@
|
||||
export function uuidv4 () {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
const r = Math.random() * 16 | 0; const v = c === 'x' ? r : (r & 0x3 | 0x8)
|
||||
return v.toString(16)
|
||||
})
|
||||
}
|
||||
externo
+85
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* Conversion between the coordinates of the National Bureau of Survey and Measurement (Mars coordinates, GCJ02) and the WGS84 coordinate system
|
||||
*/
|
||||
const x_PI = 3.14159265358979324 * 3000.0 / 180.0;
|
||||
const PI = 3.1415926535897932384626;
|
||||
const a = 6378245.0;
|
||||
const ee = 0.00669342162296594323;
|
||||
|
||||
|
||||
/**
|
||||
* WGS84 to Mars coordinate system GCj02
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
export function wgs84togcj02(lng, lat) {
|
||||
if (out_of_china(lng, lat)) {
|
||||
return [lng, lat]
|
||||
}
|
||||
else {
|
||||
var dlat = transformlat(lng - 105.0, lat - 35.0);
|
||||
var dlng = transformlng(lng - 105.0, lat - 35.0);
|
||||
var radlat = lat / 180.0 * PI;
|
||||
var magic = Math.sin(radlat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
var sqrtmagic = Math.sqrt(magic);
|
||||
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
|
||||
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
|
||||
var mglat = lat + dlat;
|
||||
var mglng = lng + dlng;
|
||||
return [mglng, mglat]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GCJ02 transform WGS84
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
export function gcj02towgs84(lng, lat) {
|
||||
var lat = +lat;
|
||||
var lng = +lng;
|
||||
if (out_of_china(lng, lat)) {
|
||||
return [lng, lat]
|
||||
} else {
|
||||
var dlat = transformlat(lng - 105.0, lat - 35.0);
|
||||
var dlng = transformlng(lng - 105.0, lat - 35.0);
|
||||
var radlat = lat / 180.0 * PI;
|
||||
var magic = Math.sin(radlat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
var sqrtmagic = Math.sqrt(magic);
|
||||
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
|
||||
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
|
||||
var mglat = lat + dlat;
|
||||
var mglng = lng + dlng;
|
||||
return [lng * 2 - mglng, lat * 2 - mglat]
|
||||
}
|
||||
}
|
||||
|
||||
function transformlat(lng, lat) {
|
||||
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
|
||||
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
|
||||
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
|
||||
return ret
|
||||
}
|
||||
|
||||
export function transformlng(lng, lat) {
|
||||
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
|
||||
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
|
||||
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
|
||||
return ret
|
||||
}
|
||||
|
||||
/**
|
||||
* Judge whether you are in the country or not if you are not in the country
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function out_of_china(lng, lat) {
|
||||
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
|
||||
}
|
||||
externo
+2
Diff do arquivo suprimido porque uma ou mais linhas são muito longas
externo
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"baseUrl": ".",
|
||||
"types": ["vite/client"],
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom"
|
||||
],
|
||||
"paths": {
|
||||
"/@/*": [
|
||||
"src/*"
|
||||
],
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue"
|
||||
, "src/vendors/coordtransform.js" ]
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
// config alias
|
||||
import path from 'path'
|
||||
import { ConfigEnv, defineConfig, UserConfigExport } from 'vite'
|
||||
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'
|
||||
// Introduce eslint plugin
|
||||
import eslintPlugin from 'vite-plugin-eslint'
|
||||
import OptimizationPersist from 'vite-plugin-optimize-persist'
|
||||
import PkgConfig from 'vite-plugin-package-config'
|
||||
import viteSvgIcons from 'vite-plugin-svg-icons'
|
||||
import { viteVConsole } from 'vite-plugin-vconsole'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default ({ command, mode }: ConfigEnv): UserConfigExport => defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
eslintPlugin({
|
||||
fix: true
|
||||
}),
|
||||
ViteComponents({
|
||||
customComponentResolvers: [AntDesignVueResolver()],
|
||||
}),
|
||||
viteSvgIcons({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
|
||||
// 指定symbolId格式
|
||||
symbolId: 'icon-[dir]-[name]',
|
||||
}),
|
||||
viteVConsole({
|
||||
entry: path.resolve(__dirname, './src/main.ts'), // 入口文件
|
||||
// localEnabled: command === 'serve', // serve开发环境下
|
||||
// enabled: command !== 'serve' || mode === 'test', // 打包环境下/发布测试包,
|
||||
config: { // vconsole 配置项
|
||||
maxLogNumber: 1000,
|
||||
theme: 'light'
|
||||
}
|
||||
}),
|
||||
PkgConfig(),
|
||||
OptimizationPersist()
|
||||
// [svgBuilder('./src/assets/icons/')] // All svg under src/icons/svg/ have been imported here, no need to import separately
|
||||
],
|
||||
server: {
|
||||
open: true,
|
||||
host: '0.0.0.0',
|
||||
port: 8080
|
||||
},
|
||||
envDir: './env',
|
||||
resolve: {
|
||||
alias: [{
|
||||
// https://github.com/vitejs/vite/issues/279#issuecomment-635646269
|
||||
find: '/@',
|
||||
replacement: path.resolve(__dirname, './src'),
|
||||
}
|
||||
]
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
// example : additionalData: `@import "./src/design/styles/variables";`
|
||||
// dont need include file extend .scss
|
||||
additionalData: '@import "./src/styles/variables";'
|
||||
},
|
||||
}
|
||||
},
|
||||
base: '/',
|
||||
build: {
|
||||
target: ['es2015'], // 最低支持 es2015
|
||||
sourcemap: true
|
||||
}
|
||||
})
|
||||
+3927
Diferenças do arquivo suprimidas por serem muito extensas
Carregar Diff
Referência em uma Nova Issue
Bloquear um usuário