From 4dccbb68399da2d46943b8d613585afb49aa5455 Mon Sep 17 00:00:00 2001
From: sean.zhou <sean.zhou@dji.com>
Date: Fri, 22 Jul 2022 20:48:54 +0800
Subject: [PATCH] V1.1.0 for dock
---
src/pages/project-app/index.vue | 164 +++++++-----------------------------------------------
1 files changed, 22 insertions(+), 142 deletions(-)
diff --git a/src/pages/project-app/index.vue b/src/pages/project-app/index.vue
index d8359da..b5a855d 100644
--- a/src/pages/project-app/index.vue
+++ b/src/pages/project-app/index.vue
@@ -1,20 +1,18 @@
<template>
<div
- v-if="showLogin"
- class="login flex-column flex-justify-center flex-align-center m0 b0"
- >
+ 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"
+ :src="djiLogo"
/>
- <p class="logo fz35 pb50">Cloud API Demo</p>
+ <p class="fz35 pb50" style="color: #2d8cf0">Cloud API Demo</p>
<a-form
layout="inline"
:model="formState"
class="flex-row flex-justify-center flex-align-center"
>
<a-form-item>
- <a-input v-model:value="formState.user" placeholder="Username">
+ <a-input v-model:value="formState.username" placeholder="Username">
<template #prefix
><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
/></template>
@@ -44,115 +42,41 @@
</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 djiLogo from '/@/assets/icons/dji_logo.png'
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 { login, LoginBody } from '/@/api/manage'
import { getRoot } from '/@/root'
-import { useMyStore } from '/@/store'
-
-interface FormState {
- user: string
- password: string
-}
+import { ELocalStorageKey, ERouterName, EUserType } from '/@/types'
+import router from '/@/router'
const root = getRoot()
-const showLogin = ref(true)
-const store = useMyStore()
-const formState: UnwrapRef<FormState> = reactive({
- user: 'adminPC',
- password: 'adminPC'
+const formState: UnwrapRef<LoginBody> = reactive({
+ username: 'adminPC',
+ password: 'adminPC',
+ flag: EUserType.Web,
})
-let socket = {} as any
-const gMapCoverHook = useGMapCover()
const onSubmit = async (e: any) => {
- const result = await login({
- username: formState.user,
- password: formState.password
- })
+ const result = await login(formState)
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)
+ localStorage.setItem(ELocalStorageKey.Token, result.data.access_token)
+ localStorage.setItem(ELocalStorageKey.WorkspaceId, result.data.workspace_id)
+ localStorage.setItem(ELocalStorageKey.Username, result.data.username)
+ localStorage.setItem(ELocalStorageKey.UserId, result.data.user_id)
+ localStorage.setItem(ELocalStorageKey.Flag, EUserType.Web.toString())
+ root.$router.push(ERouterName.MEMBERS)
+ } else {
+ message.error(result.message)
}
}
-// 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>
@@ -160,49 +84,5 @@
.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>
--
Gitblit v1.9.3