xiaosi
1 month ago
commit
127695558b
91 changed files with 37075 additions and 0 deletions
@ -0,0 +1,14 @@ |
|||||
|
# http://editorconfig.org |
||||
|
root = true |
||||
|
|
||||
|
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}] |
||||
|
charset = utf-8 |
||||
|
end_of_line = lf |
||||
|
trim_trailing_whitespace = true |
||||
|
insert_final_newline = true |
||||
|
indent_style = space |
||||
|
indent_size = 4 |
||||
|
max_line_length = 180 |
||||
|
|
||||
|
[*.md] |
||||
|
trim_trailing_whitespace = false |
||||
@ -0,0 +1,6 @@ |
|||||
|
# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config |
||||
|
# TARO_APP_ID="开发环境下的小程序 AppID" |
||||
|
#TARO_APP_API="https://canola-tool.jiagutech.com/api" |
||||
|
TARO_APP_API="http://192.168.10.23:9761" |
||||
|
|
||||
|
|
||||
@ -0,0 +1,3 @@ |
|||||
|
# TARO_APP_ID="生产环境下的小程序 AppID" |
||||
|
# TARO_APP_API="https://canola-tool.jiagutech.com/api" |
||||
|
TARO_APP_API="http://192.168.10.23:9761" |
||||
@ -0,0 +1 @@ |
|||||
|
# TARO_APP_ID="测试环境下的小程序 AppID" |
||||
@ -0,0 +1,5 @@ |
|||||
|
// ESLint 检查 .vue 文件需要单独配置编辑器： |
||||
|
// https://eslint.vuejs.org/user-guide/#editor-integrations |
||||
|
{ |
||||
|
"extends": ["taro/vue3"] |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
dist/ |
||||
|
deploy_versions/ |
||||
|
.temp/ |
||||
|
.rn_temp/ |
||||
|
node_modules/ |
||||
|
.DS_Store |
||||
|
.swc |
||||
|
*.local |
||||
@ -0,0 +1,8 @@ |
|||||
|
# Default ignored files |
||||
|
/shelf/ |
||||
|
/workspace.xml |
||||
|
# Editor-based HTTP Client requests |
||||
|
/httpRequests/ |
||||
|
# Datasource local storage ignored files |
||||
|
/dataSources/ |
||||
|
/dataSources.local.xml |
||||
@ -0,0 +1,7 @@ |
|||||
|
<component name="InspectionProjectProfileManager"> |
||||
|
<profile version="1.0"> |
||||
|
<option name="myName" value="Project Default" /> |
||||
|
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" /> |
||||
|
<inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" /> |
||||
|
</profile> |
||||
|
</component> |
||||
@ -0,0 +1,6 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="ProjectRootManager"> |
||||
|
<output url="file://$PROJECT_DIR$/out" /> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,8 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="ProjectModuleManager"> |
||||
|
<modules> |
||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/uav-edu-mp.iml" filepath="$PROJECT_DIR$/.idea/uav-edu-mp.iml" /> |
||||
|
</modules> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,9 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<module type="JAVA_MODULE" version="4"> |
||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true"> |
||||
|
<exclude-output /> |
||||
|
<content url="file://$MODULE_DIR$" /> |
||||
|
<orderEntry type="inheritedJdk" /> |
||||
|
<orderEntry type="sourceFolder" forTests="false" /> |
||||
|
</component> |
||||
|
</module> |
||||
@ -0,0 +1,6 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="VcsDirectoryMappings"> |
||||
|
<mapping directory="" vcs="Git" /> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,10 @@ |
|||||
|
// babel-preset-taro 更多选项和默认值：
|
||||
|
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
|
||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
['taro', { |
||||
|
framework: 'vue3', |
||||
|
ts: false |
||||
|
}] |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
/* eslint-disable */ |
||||
|
/* prettier-ignore */ |
||||
|
// @ts-nocheck
|
||||
|
// Generated by unplugin-vue-components
|
||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
|
export {} |
||||
|
|
||||
|
declare module 'vue' { |
||||
|
export interface GlobalComponents { |
||||
|
ExamQuestion: typeof import('./src/components/ExamQuestion.vue')['default'] |
||||
|
ExamResult: typeof import('./src/components/ExamResult.vue')['default'] |
||||
|
NutAvatar: typeof import('@nutui/nutui-taro')['Avatar'] |
||||
|
NutButton: typeof import('@nutui/nutui-taro')['Button'] |
||||
|
NutCell: typeof import('@nutui/nutui-taro')['Cell'] |
||||
|
NutDialog: typeof import('@nutui/nutui-taro')['Dialog'] |
||||
|
NutEmpty: typeof import('@nutui/nutui-taro')['Empty'] |
||||
|
NutForm: typeof import('@nutui/nutui-taro')['Form'] |
||||
|
NutFormItem: typeof import('@nutui/nutui-taro')['FormItem'] |
||||
|
NutInfiniteloading: typeof import('@nutui/nutui-taro')['Infiniteloading'] |
||||
|
NutInput: typeof import('@nutui/nutui-taro')['Input'] |
||||
|
NutOverlay: typeof import('@nutui/nutui-taro')['Overlay'] |
||||
|
NutPopup: typeof import('@nutui/nutui-taro')['Popup'] |
||||
|
NutRange: typeof import('@nutui/nutui-taro')['Range'] |
||||
|
NutTabbar: typeof import('@nutui/nutui-taro')['Tabbar'] |
||||
|
NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem'] |
||||
|
NutTag: typeof import('@nutui/nutui-taro')['Tag'] |
||||
|
NutTextarea: typeof import('@nutui/nutui-taro')['Textarea'] |
||||
|
NutToast: typeof import('@nutui/nutui-taro')['Toast'] |
||||
|
RealTimeData: typeof import('./src/components/RealTimeData.vue')['default'] |
||||
|
RoutePointInfo: typeof import('./src/components/RoutePointInfo.vue')['default'] |
||||
|
SupervisionData: typeof import('./src/components/SupervisionData.vue')['default'] |
||||
|
SupervisionSideData: typeof import('./src/components/SupervisionSideData.vue')['default'] |
||||
|
TabBar: typeof import('./src/components/TabBar.vue')['default'] |
||||
|
TrackPlayback: typeof import('./src/components/TrackPlayback.vue')['default'] |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
module.exports = { |
||||
|
env: { |
||||
|
NODE_ENV: '"development"' |
||||
|
}, |
||||
|
defineConstants: {}, |
||||
|
mini: {}, |
||||
|
h5: {} |
||||
|
} |
||||
@ -0,0 +1,135 @@ |
|||||
|
import Components from 'unplugin-vue-components/webpack'; |
||||
|
import NutUIResolver from '@nutui/auto-import-resolver'; |
||||
|
|
||||
|
const config = { |
||||
|
projectName: 'canola-tool-mp', |
||||
|
date: '2025-3-14', |
||||
|
designWidth(input) { |
||||
|
if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) { |
||||
|
return 375 |
||||
|
} |
||||
|
return 750 |
||||
|
}, |
||||
|
deviceRatio: { |
||||
|
640: 2.34 / 2, |
||||
|
750: 1, |
||||
|
828: 1.81 / 2, |
||||
|
375: 2 / 1 |
||||
|
}, |
||||
|
sourceRoot: 'src', |
||||
|
outputRoot: 'dist', |
||||
|
plugins: ['@tarojs/plugin-html'], |
||||
|
defineConstants: {}, |
||||
|
copy: { |
||||
|
patterns: [], |
||||
|
options: {} |
||||
|
}, |
||||
|
framework: 'vue3', |
||||
|
compiler: { |
||||
|
type: 'webpack5', |
||||
|
prebundle: { enable: false } |
||||
|
}, |
||||
|
sass: { |
||||
|
data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";` |
||||
|
}, |
||||
|
mini: { |
||||
|
enableExtract: true, |
||||
|
miniCssExtractPluginOption: { |
||||
|
ignoreOrder: true, |
||||
|
}, |
||||
|
webpackChain(chain) { |
||||
|
chain.plugin('unplugin-vue-components').use(Components({ |
||||
|
resolvers: [ |
||||
|
NutUIResolver({ |
||||
|
importStyle: 'sass', |
||||
|
taro: true |
||||
|
}) |
||||
|
] |
||||
|
})).merge({ |
||||
|
module: { |
||||
|
rule: { |
||||
|
mjsScript: { |
||||
|
test: /\.mjs$/, |
||||
|
include: [/pinia/], |
||||
|
use: { |
||||
|
babelLoader: { |
||||
|
loader: require.resolve('babel-loader') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
postcss: { |
||||
|
pxtransform: { |
||||
|
enable: true, |
||||
|
config: { |
||||
|
// selectorBlackList: ['nut-']
|
||||
|
} |
||||
|
}, |
||||
|
url: { |
||||
|
enable: true, |
||||
|
config: { |
||||
|
limit: 1, // 设定转换尺寸上限
|
||||
|
} |
||||
|
}, |
||||
|
cssModules: { |
||||
|
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
|
||||
|
config: { |
||||
|
namingPattern: 'module', // 转换模式，取值为 global/module
|
||||
|
generateScopedName: '[name]__[local]___[hash:base64:5]' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
h5: { |
||||
|
webpackChain(chain) { |
||||
|
chain.plugin('unplugin-vue-components').use(Components({ |
||||
|
resolvers: [ |
||||
|
NutUIResolver({ |
||||
|
importStyle: 'sass', |
||||
|
taro: true |
||||
|
}) |
||||
|
] |
||||
|
})).merge({ |
||||
|
module: { |
||||
|
rule: { |
||||
|
mjsScript: { |
||||
|
test: /\.mjs$/, |
||||
|
include: [/pinia/], |
||||
|
use: { |
||||
|
babelLoader: { |
||||
|
loader: require.resolve('babel-loader') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
publicPath: '/', |
||||
|
staticDirectory: 'static', |
||||
|
esnextModules: ['nutui-taro', 'icons-vue-taro'], |
||||
|
postcss: { |
||||
|
autoprefixer: { |
||||
|
enable: true, |
||||
|
config: {} |
||||
|
}, |
||||
|
cssModules: { |
||||
|
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
|
||||
|
config: { |
||||
|
namingPattern: 'module', // 转换模式，取值为 global/module
|
||||
|
generateScopedName: '[name]__[local]___[hash:base64:5]' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
module.exports = function (merge) { |
||||
|
if (process.env.NODE_ENV === 'development') { |
||||
|
return merge({}, config, require('./dev')) |
||||
|
} |
||||
|
return merge({}, config, require('./prod')) |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
module.exports = { |
||||
|
env: { |
||||
|
NODE_ENV: '"production"' |
||||
|
}, |
||||
|
defineConstants: {}, |
||||
|
mini: {}, |
||||
|
h5: { |
||||
|
/** |
||||
|
* WebpackChain 插件配置 |
||||
|
* @docs https://github.com/neutrinojs/webpack-chain
|
||||
|
*/ |
||||
|
// webpackChain (chain) {
|
||||
|
// /**
|
||||
|
// * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
|
||||
|
// * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
|
||||
|
// */
|
||||
|
// chain.plugin('analyzer')
|
||||
|
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
|
||||
|
|
||||
|
// /**
|
||||
|
// * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
|
||||
|
// * @docs https://github.com/chrisvfritz/prerender-spa-plugin
|
||||
|
// */
|
||||
|
// const path = require('path')
|
||||
|
// const Prerender = require('prerender-spa-plugin')
|
||||
|
// const staticDir = path.join(__dirname, '..', 'dist')
|
||||
|
// chain
|
||||
|
// .plugin('prerender')
|
||||
|
// .use(new Prerender({
|
||||
|
// staticDir,
|
||||
|
// routes: [ '/pages/index/index' ],
|
||||
|
// postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
|
||||
|
// }))
|
||||
|
// }
|
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,86 @@ |
|||||
|
{ |
||||
|
"name": "uav-edu-mp", |
||||
|
"version": "1.0.0", |
||||
|
"private": true, |
||||
|
"description": "", |
||||
|
"templateInfo": { |
||||
|
"name": "vue3-NutUI4", |
||||
|
"typescript": false, |
||||
|
"css": "Less", |
||||
|
"framework": "Vue3" |
||||
|
}, |
||||
|
"scripts": { |
||||
|
"build:weapp": "taro build --type weapp", |
||||
|
"build:swan": "taro build --type swan", |
||||
|
"build:alipay": "taro build --type alipay", |
||||
|
"build:tt": "taro build --type tt", |
||||
|
"build:h5": "taro build --type h5", |
||||
|
"build:rn": "taro build --type rn", |
||||
|
"build:qq": "taro build --type qq", |
||||
|
"build:jd": "taro build --type jd", |
||||
|
"build:quickapp": "taro build --type quickapp", |
||||
|
"dev:weapp": "npm run build:weapp -- --watch", |
||||
|
"dev:swan": "npm run build:swan -- --watch", |
||||
|
"dev:alipay": "npm run build:alipay -- --watch", |
||||
|
"dev:tt": "npm run build:tt -- --watch", |
||||
|
"dev:h5": "npm run build:h5 -- --watch", |
||||
|
"dev:rn": "npm run build:rn -- --watch", |
||||
|
"dev:qq": "npm run build:qq -- --watch", |
||||
|
"dev:jd": "npm run build:jd -- --watch", |
||||
|
"dev:quickapp": "npm run build:quickapp -- --watch" |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"last 3 versions", |
||||
|
"Android >= 4.1", |
||||
|
"ios >= 8" |
||||
|
], |
||||
|
"author": "", |
||||
|
"dependencies": { |
||||
|
"@babel/runtime": "^7.7.7", |
||||
|
"@leafer-ui/miniapp": "1.0.7", |
||||
|
"@nutui/icons-vue-taro": "^0.0.9", |
||||
|
"@nutui/nutui-taro": "4.3.13", |
||||
|
"@tarojs/components": "3.6.35", |
||||
|
"@tarojs/helper": "3.6.35", |
||||
|
"@tarojs/plugin-framework-vue3": "3.6.35", |
||||
|
"@tarojs/plugin-html": "3.6.35", |
||||
|
"@tarojs/plugin-platform-alipay": "3.6.35", |
||||
|
"@tarojs/plugin-platform-h5": "3.6.35", |
||||
|
"@tarojs/plugin-platform-jd": "3.6.35", |
||||
|
"@tarojs/plugin-platform-qq": "3.6.35", |
||||
|
"@tarojs/plugin-platform-swan": "3.6.35", |
||||
|
"@tarojs/plugin-platform-tt": "3.6.35", |
||||
|
"@tarojs/plugin-platform-weapp": "3.6.35", |
||||
|
"@tarojs/runtime": "3.6.35", |
||||
|
"@tarojs/shared": "3.6.35", |
||||
|
"@tarojs/taro": "3.6.35", |
||||
|
"@turf/turf": "^7.2.0", |
||||
|
"dayjs": "^1.11.13", |
||||
|
"pinia": "^2.2.6", |
||||
|
"popmotion": "^11.0.5", |
||||
|
"vue": "^3.2.40" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@babel/core": "^7.8.0", |
||||
|
"@nutui/auto-import-resolver": "^1.0.0", |
||||
|
"@tarojs/cli": "3.6.35", |
||||
|
"@tarojs/taro-loader": "3.6.35", |
||||
|
"@tarojs/webpack5-runner": "3.6.35", |
||||
|
"@types/node": "^18.15.11", |
||||
|
"@types/webpack-env": "^1.13.6", |
||||
|
"@vue/babel-plugin-jsx": "^1.0.6", |
||||
|
"@vue/compiler-sfc": "^3.2.40", |
||||
|
"babel-preset-taro": "3.6.35", |
||||
|
"css-loader": "3.4.2", |
||||
|
"eslint": "^8.12.0", |
||||
|
"eslint-config-taro": "3.6.35", |
||||
|
"eslint-plugin-vue": "^8.0.0", |
||||
|
"style-loader": "1.3.0", |
||||
|
"stylelint": "9.3.0", |
||||
|
"ts-node": "^10.9.1", |
||||
|
"typescript": "^4.1.0", |
||||
|
"unplugin-vue-components": "^0.26.0", |
||||
|
"vue-loader": "^17.0.0", |
||||
|
"webpack": "^5.78.0" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
{ |
||||
|
"miniprogramRoot": "dist/", |
||||
|
"projectname": "uav-edu-mp", |
||||
|
"description": "", |
||||
|
"appid": "wxa55106c0b120722e", |
||||
|
"setting": { |
||||
|
"urlCheck": true, |
||||
|
"es6": true, |
||||
|
"enhance": true, |
||||
|
"compileHotReLoad": false, |
||||
|
"postcss": false, |
||||
|
"minified": true, |
||||
|
"babelSetting": { |
||||
|
"ignore": [], |
||||
|
"disablePlugins": [], |
||||
|
"outputPath": "" |
||||
|
} |
||||
|
}, |
||||
|
"compileType": "miniprogram", |
||||
|
"libVersion": "3.6.5", |
||||
|
"srcMiniprogramRoot": "dist/", |
||||
|
"packOptions": { |
||||
|
"ignore": [], |
||||
|
"include": [] |
||||
|
}, |
||||
|
"condition": {}, |
||||
|
"editorSetting": { |
||||
|
"tabIndent": "insertSpaces", |
||||
|
"tabSize": 2 |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
{ |
||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", |
||||
|
"projectname": "uav-edu-mp", |
||||
|
"setting": { |
||||
|
"compileHotReLoad": true, |
||||
|
"bigPackageSizeSupport": true, |
||||
|
"urlCheck": false |
||||
|
}, |
||||
|
"libVersion": "3.7.12" |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
{ |
||||
|
"miniprogramRoot": "./", |
||||
|
"projectname": "uav-edu-mp", |
||||
|
"description": "", |
||||
|
"appid": "touristappid", |
||||
|
"setting": { |
||||
|
"urlCheck": true, |
||||
|
"es6": false, |
||||
|
"postcss": false, |
||||
|
"minified": false |
||||
|
}, |
||||
|
"compileType": "miniprogram" |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
export default defineAppConfig({ |
||||
|
pages: [ |
||||
|
'pages/login/index', |
||||
|
'pages/supervisionMap/index', |
||||
|
'pages/supervision/index', |
||||
|
'pages/flightMap/index', |
||||
|
'pages/returnTripMap/index', |
||||
|
'pages/routePlanMap/index', |
||||
|
'pages/home/index', |
||||
|
'pages/flight/index', |
||||
|
'pages/routePlan/index', |
||||
|
'pages/returnTrip/index', |
||||
|
'pages/evaluation/index', |
||||
|
'pages/own/index', |
||||
|
], |
||||
|
window: { |
||||
|
backgroundTextStyle: 'light', |
||||
|
navigationBarBackgroundColor: '#fff', |
||||
|
navigationBarTitleText: 'WeChat', |
||||
|
navigationBarTextStyle: 'black' |
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,21 @@ |
|||||
|
import { createApp } from 'vue'; |
||||
|
import store from './stores'; |
||||
|
// import './app.less';
|
||||
|
import './assets/iconfont.css' |
||||
|
// import './common.less';
|
||||
|
import { IconFont } from '@nutui/icons-vue-taro'; |
||||
|
|
||||
|
|
||||
|
const App = createApp({ |
||||
|
onShow(options) { |
||||
|
console.log('App Show', options); |
||||
|
|
||||
|
}, |
||||
|
// 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
|
||||
|
}) |
||||
|
|
||||
|
App.use(store); |
||||
|
App.use(IconFont); |
||||
|
|
||||
|
|
||||
|
export default App; |
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 941 B |
|
After Width: | Height: | Size: 174 B |
@ -0,0 +1,27 @@ |
|||||
|
@font-face { |
||||
|
font-family: "FontAwesome"; /* Project id 4868745 */ |
||||
|
src: url('./iconfont.woff2?t=1742801623512') format('woff2'), |
||||
|
url('./iconfont.woff?t=1742801623512') format('woff'), |
||||
|
url('./iconfont.ttf?t=1742801623512') format('truetype'); |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
font-family: FontAwesome; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
|
||||
|
.icon-stop:before { |
||||
|
content: "\e6b5"; |
||||
|
} |
||||
|
|
||||
|
.icon-pause:before { |
||||
|
content: "\e7fe"; |
||||
|
} |
||||
|
|
||||
|
.icon-play:before { |
||||
|
content: "\e6cf"; |
||||
|
} |
||||
|
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 688 B |
|
After Width: | Height: | Size: 942 B |
|
After Width: | Height: | Size: 175 B |
|
After Width: | Height: | Size: 185 B |
|
After Width: | Height: | Size: 103 B |
|
After Width: | Height: | Size: 146 B |
@ -0,0 +1,100 @@ |
|||||
|
<script setup> |
||||
|
import { ref, defineProps } from 'vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
isVisible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
questionData: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
imageUrl: '', |
||||
|
content: '' |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const isExpanded = ref(false); |
||||
|
|
||||
|
// 在组件显示后添加展开效果 |
||||
|
watch(() => props.isVisible, (newVal) => { |
||||
|
if (newVal) { |
||||
|
setTimeout(() => { |
||||
|
isExpanded.value = true; |
||||
|
}, 50); |
||||
|
} else { |
||||
|
isExpanded.value = false; |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="[s.root, { 'is-expanded': isExpanded }]" v-if="isVisible"> |
||||
|
<div class="title"> |
||||
|
<div style="display: flex; align-items: center; gap: 4px;"> |
||||
|
<t-icon name="file" /> |
||||
|
<div>考题</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="question-image" v-if="questionData.imageUrl"> |
||||
|
<img :src="questionData.imageUrl" alt="考题图片" /> |
||||
|
</div> |
||||
|
<div class="requirements" v-html="questionData.content"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: 80%; |
||||
|
max-width: 400px; |
||||
|
background: rgba(0, 0, 0, 0.8); |
||||
|
backdrop-filter: blur(8px); |
||||
|
color: #fff; |
||||
|
transform: translateX(100%); |
||||
|
transition: transform 0.3s ease-in-out; |
||||
|
z-index: 100; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
&.is-expanded { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.title { |
||||
|
padding: 16px; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
flex: 1; |
||||
|
padding: 16px; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.question-image { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.requirements { |
||||
|
font-size: 14px; |
||||
|
line-height: 1.6; |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,206 @@ |
|||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { Left, Right } from '@nutui/icons-vue-taro'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
isPassed: { |
||||
|
type: Boolean, |
||||
|
required: true |
||||
|
}, |
||||
|
errorPoints: { |
||||
|
type: Array, |
||||
|
default: () => [ |
||||
|
{ |
||||
|
current: '85°', |
||||
|
qualified: '90°', |
||||
|
message: '方位角偏离预定航线过大' |
||||
|
}, |
||||
|
{ |
||||
|
current: '120米', |
||||
|
qualified: '100米', |
||||
|
message: '飞行高度超出安全范围' |
||||
|
}, |
||||
|
{ |
||||
|
current: '12米/秒', |
||||
|
qualified: '8米/秒', |
||||
|
message: '飞行速度过快，不符合考试要求' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const isVisible = ref(true); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="[s.root, { [s.hidden]: !isVisible }]"> |
||||
|
<div class="toggle-btn" :class="{ 'is-active': !isVisible }" @click="() => isVisible = !isVisible"> |
||||
|
<Right v-if="isVisible" style="font-size: 12px;" /> |
||||
|
<Left style="font-size: 12px;" v-else /> |
||||
|
</div> |
||||
|
<div class="title"> |
||||
|
<div style="display: flex; align-items: center; gap: 4px;"> |
||||
|
<div>考试结果</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="result-info"> |
||||
|
<div class="status" :class="{ 'passed': isPassed, 'failed': !isPassed }"> |
||||
|
{{ isPassed ? '通过' : '未通过' }} |
||||
|
</div> |
||||
|
<div v-if="!isPassed && errorPoints.length > 0" class="error-points"> |
||||
|
<div class="error-title">错误点位信息：</div> |
||||
|
<div v-for="(point, index) in errorPoints" :key="index" class="error-item"> |
||||
|
<div class="error-detail"> |
||||
|
<div class="error-row"> |
||||
|
<span class="label">当前值：</span> |
||||
|
<span class="value">{{ point.current }}</span> |
||||
|
</div> |
||||
|
<div class="error-row"> |
||||
|
<span class="label">合格值：</span> |
||||
|
<span class="value">{{ point.qualified }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="error-message">{{ point.message }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
pointer-events: visible; |
||||
|
position: absolute; |
||||
|
right: 5px; |
||||
|
top: 5px; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
border-radius: 8px; |
||||
|
color: white; |
||||
|
font-size: 10px; |
||||
|
width: 12vw; |
||||
|
min-width: 140px; |
||||
|
max-height: 80vh; |
||||
|
// overflow: auto; |
||||
|
z-index: 2; |
||||
|
transition: transform 0.3s ease; |
||||
|
|
||||
|
&.hidden { |
||||
|
transform: translateX(calc(100% + 5px)); |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.toggle-btn { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
cursor: pointer; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 20px; |
||||
|
transform: translateX(-100%); |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
background-color: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 6px 8px 4px 8px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
max-height: 60vh; |
||||
|
overflow: auto; |
||||
|
padding: 6px; |
||||
|
|
||||
|
.result-info { |
||||
|
.status { |
||||
|
font-size: 12px; |
||||
|
padding: 6px 8px; |
||||
|
border-radius: 4px; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
// margin-bottom: 8px; |
||||
|
|
||||
|
&.passed { |
||||
|
background-color: rgba(0, 255, 0, 0.2); |
||||
|
color: #52c41a; |
||||
|
} |
||||
|
|
||||
|
&.failed { |
||||
|
background-color: rgba(255, 0, 0, 0.2); |
||||
|
color: #ff4d4f; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-message { |
||||
|
font-size: 10px; |
||||
|
color: rgba(255, 255, 255, 0.85); |
||||
|
line-height: 1.4; |
||||
|
text-align: center; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.error-points { |
||||
|
margin-top: 8px; |
||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
padding-top: 8px; |
||||
|
|
||||
|
.error-title { |
||||
|
font-weight: 500; |
||||
|
margin-bottom: 6px; |
||||
|
color: #ff6b6b; |
||||
|
} |
||||
|
|
||||
|
.error-item { |
||||
|
background-color: rgba(255, 107, 107, 0.1); |
||||
|
padding: 6px; |
||||
|
border-radius: 4px; |
||||
|
margin-bottom: 6px; |
||||
|
|
||||
|
.error-detail { |
||||
|
margin-bottom: 6px; |
||||
|
|
||||
|
.error-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 4px 0; |
||||
|
|
||||
|
.label { |
||||
|
color: #ff9999; |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
font-size: 10px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-message { |
||||
|
color: #ff9999; |
||||
|
font-size: 10px; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,205 @@ |
|||||
|
<script setup> |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import { Left, Right } from '@nutui/icons-vue-taro'; |
||||
|
import { toFixed } from '../utils/helpers'; |
||||
|
import { formatTime } from '../utils/helpers'; |
||||
|
import deviceCruise from '../core/deviceCruise'; |
||||
|
|
||||
|
const isVisible = ref(true); |
||||
|
// const toggleVisibility = () => { |
||||
|
// isVisible.value = !isVisible.value; |
||||
|
// }; |
||||
|
// const showTip = ref(true); |
||||
|
// const toggleBtnClass = computed(() => { |
||||
|
// return { |
||||
|
// 'toggle-btn': true, |
||||
|
// 'is-active': !isVisible.value |
||||
|
// }; |
||||
|
// }); |
||||
|
|
||||
|
const info = computed(() => deviceCruise.timelyData); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="[s.root, { [s.hidden]: !isVisible }]"> |
||||
|
<div class="nav"> |
||||
|
<div :class="{ 'toggle-btn': true, 'is-active': !isVisible }" @click="() => isVisible = !isVisible"> |
||||
|
<Left v-if="isVisible" style="font-size: 14px;" /> |
||||
|
<Right style="font-size: 14px;" v-else /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">时间：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ formatTime(info.timestamp) }}</small> |
||||
|
<span class="unit"></span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">经度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.lng, 7) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">纬度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.lat, 7) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row" v-if="(info.xspeed === 0) || info.xspeed"> |
||||
|
<span class="label">水平速度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.xspeed, 2) }}</small> |
||||
|
<span class="unit">米/秒</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row" v-if="(info.velocity === 0) || info.velocity"> |
||||
|
<span class="label">速度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.velocity, 2) }}</small> |
||||
|
<span class="unit">千米/小时</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row" v-if="(info.breadth === 0) || info.breadth"> |
||||
|
<span class="label">幅宽：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.breadth, 2) }}</small> |
||||
|
<span class="unit">米</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row" v-if="(info.deep === 0) || info.deep"> |
||||
|
<span class="label">耕深：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.deep, 2) }}</small> |
||||
|
<span class="unit">厘米</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row" v-if="(info.seeding === 0) || info.seeding"> |
||||
|
<span class="label">播种速度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ info.seeding }}</small> |
||||
|
<span class="unit">粒/s</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">航向角：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.yaw, 2) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
pointer-events: visible; |
||||
|
position: absolute; |
||||
|
left: 5px; |
||||
|
top: 5px; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
padding: 8px; |
||||
|
border-radius: 8px; |
||||
|
color: white; |
||||
|
font-size: 11px; |
||||
|
width: fit-content; |
||||
|
min-width: 120px; |
||||
|
z-index: 2; |
||||
|
transition: transform 0.3s ease; |
||||
|
|
||||
|
&.hidden { |
||||
|
transform: translateX(calc(-100% - 5px)); |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.nav { |
||||
|
position: absolute; |
||||
|
right: -20px; |
||||
|
top: 6px; |
||||
|
|
||||
|
.toggle-btn { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
cursor: pointer; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
border-radius: 0 4px 4px 0; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
background-color: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.text-row { |
||||
|
margin-bottom: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 2px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
min-width: 40px; |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.value-unit { |
||||
|
display: inline-flex; |
||||
|
align-items: baseline; |
||||
|
gap: 1px; |
||||
|
|
||||
|
.value { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.unit { |
||||
|
font-size: 0.85em; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
small { |
||||
|
font-size: 0.85em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,222 @@ |
|||||
|
<script setup> |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import { Left, Right } from '@nutui/icons-vue-taro'; |
||||
|
import { toFixed } from '../utils/helpers'; |
||||
|
|
||||
|
const isVisible = ref(true); |
||||
|
|
||||
|
const pointInfoList = computed(() => [ |
||||
|
{ |
||||
|
index: 1, |
||||
|
angle: 0, |
||||
|
distance: 90, |
||||
|
height: 50, |
||||
|
stayTime: 0 |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
angle: 135, |
||||
|
distance: 70, |
||||
|
height: 60, |
||||
|
stayTime: 2 |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
angle: 225, |
||||
|
distance: 80, |
||||
|
height: 45, |
||||
|
stayTime: 3 |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
angle: 315, |
||||
|
distance: 100, |
||||
|
height: 55, |
||||
|
stayTime: 2 |
||||
|
} |
||||
|
]); |
||||
|
const props = defineProps({ |
||||
|
// isVisible: { |
||||
|
// type: Boolean, |
||||
|
// default: true |
||||
|
// }, |
||||
|
pointInfo: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: () => ({ |
||||
|
index: 1, |
||||
|
azimuth: 0, |
||||
|
distance: 0, |
||||
|
height: 0, |
||||
|
stayTime: 0 |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// const emit = defineEmits(['update:isVisible']); |
||||
|
|
||||
|
// const toggleVisibility = () => { |
||||
|
// emit('update:isVisible', !props.isVisible); |
||||
|
// }; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="[s.root, { [s.hidden]: !isVisible }]"> |
||||
|
<div class="title"> |
||||
|
<div style="display: flex; align-items: center; gap: 4px;"> |
||||
|
<div>航线点信息</div> |
||||
|
</div> |
||||
|
<div class="toggle-btn" :class="{ 'is-active': !isVisible }" @click="() => isVisible = !isVisible"> |
||||
|
<Left v-if="isVisible" style="font-size: 14px;" /> |
||||
|
<Right style="font-size: 14px;" v-else /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="route-point-info"> |
||||
|
<div class="point-card" v-for="(item, index) in pointInfoList" :key="index"> |
||||
|
<div class="point-header"> |
||||
|
<div class="point-index">{{ index + 1 }}</div> |
||||
|
</div> |
||||
|
<div class="point-details"> |
||||
|
<div class="detail-row"> |
||||
|
<span class="label">方位角</span> |
||||
|
<span class="value">{{ toFixed(item.angle, 1) }}°</span> |
||||
|
</div> |
||||
|
<div class="detail-row"> |
||||
|
<span class="label">相对距离</span> |
||||
|
<span class="value">{{ toFixed(item.distance, 2) }}米</span> |
||||
|
</div> |
||||
|
<div class="detail-row"> |
||||
|
<span class="label">高度</span> |
||||
|
<span class="value">{{ toFixed(item.height, 2) }}米</span> |
||||
|
</div> |
||||
|
<div class="detail-row"> |
||||
|
<span class="label">停留时长</span> |
||||
|
<span class="value">{{ item.stayTime }}秒</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
pointer-events: visible; |
||||
|
position: absolute; |
||||
|
left: 5px; |
||||
|
top: 5px; |
||||
|
background-color: rgba(0, 0, 0, 0.85); |
||||
|
border-radius: 8px; |
||||
|
color: white; |
||||
|
font-size: 10px; |
||||
|
width: fit-content; |
||||
|
min-width: 17vw; |
||||
|
z-index: 2; |
||||
|
transition: transform 0.3s ease; |
||||
|
|
||||
|
&.hidden { |
||||
|
transform: translateX(calc(-100% - 10px)); |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.title { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 6px 8px 4px 8px; |
||||
|
} |
||||
|
|
||||
|
.toggle-btn { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
cursor: pointer; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
// border-radius: 4px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
// transition: all 0.3s ease; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 20px; |
||||
|
transform: translateX(100%); |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
background-color: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 6px; |
||||
|
|
||||
|
.route-point-info { |
||||
|
max-height: 60vh; |
||||
|
overflow: auto; |
||||
|
.point-card { |
||||
|
background-color: rgba(56, 56, 56, 0.9); |
||||
|
border-radius: 8px; |
||||
|
padding: 8px; |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
gap: 3px; |
||||
|
|
||||
|
.point-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.point-index { |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
border-radius: 50%; |
||||
|
border: 1px solid rgba(254, 254, 254, 0.4); |
||||
|
background-color: rgba(255, 255, 255, 0.2); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 9px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.point-details { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
gap: 10px; |
||||
|
width: 100%; |
||||
|
|
||||
|
.detail-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
white-space: nowrap; |
||||
|
gap: 4px; |
||||
|
line-height: 1.2; |
||||
|
|
||||
|
.label { |
||||
|
font-size: 9px; |
||||
|
color: rgba(255, 255, 255, 0.6); |
||||
|
min-width: 20px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
font-size: 9px; |
||||
|
color: rgba(255, 255, 255, 0.95); |
||||
|
text-align: right; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
& + .point-card { |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,324 @@ |
|||||
|
<script setup> |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import { Left, Right } from '@nutui/icons-vue-taro'; |
||||
|
import { toFixed } from '../utils/helpers'; |
||||
|
import { formatTime } from '../utils/helpers'; |
||||
|
import deviceCruise from '../core/deviceCruise'; |
||||
|
|
||||
|
const isVisible = ref(true); |
||||
|
const info = computed(() => deviceCruise.timelyData); |
||||
|
|
||||
|
// 计算飞行时间 |
||||
|
const flightTime = computed(() => { |
||||
|
const startTime = deviceCruise.startTime; |
||||
|
if (!startTime) return '00:00:00'; |
||||
|
const duration = Math.floor((Date.now() - startTime) / 1000); |
||||
|
const hours = Math.floor(duration / 3600); |
||||
|
const minutes = Math.floor((duration % 3600) / 60); |
||||
|
const seconds = duration % 60; |
||||
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
||||
|
}); |
||||
|
|
||||
|
// 错误点列表 |
||||
|
const errorPoints = ref([ |
||||
|
// 示例数据 |
||||
|
// { position: { lat: 39.908692, lng: 116.397477 }, type: '高度超限', time: '2024-01-20 10:30:00' } |
||||
|
]); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="[s.root, { [s.hidden]: !isVisible }]"> |
||||
|
<div class="nav"> |
||||
|
<div :class="{ 'toggle-btn': true, 'is-active': !isVisible }" @click="() => isVisible = !isVisible"> |
||||
|
<Left v-if="isVisible" style="font-size: 14px;" /> |
||||
|
<Right style="font-size: 14px;" v-else /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<!-- 基本状态 --> |
||||
|
<div class="section"> |
||||
|
<div class="section-title">基本状态</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">电量：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ info.battery || 0 }}</small> |
||||
|
<span class="unit">%</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">卫星数：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ info.satellites || 0 }}</small> |
||||
|
<span class="unit">颗</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">飞行时间：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ flightTime }}</small> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 位置信息 --> |
||||
|
<div class="section"> |
||||
|
<div class="section-title">位置信息</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">经度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.lng, 7) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">纬度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.lat, 7) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">高度：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.altitude, 2) }}</small> |
||||
|
<span class="unit">米</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 姿态信息 --> |
||||
|
<div class="section"> |
||||
|
<div class="section-title">姿态信息</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">俯仰角：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.pitch, 2) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">横滚角：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.roll, 2) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">航向角：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.yaw, 2) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 偏移信息 --> |
||||
|
<div class="section"> |
||||
|
<div class="section-title">偏移信息</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">切线角：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.tangentAngle, 2) }}</small> |
||||
|
<span class="unit">°</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">水平偏移：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.horizontalOffset, 2) }}</small> |
||||
|
<span class="unit">米</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">高度偏移：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ toFixed(info.verticalOffset, 2) }}</small> |
||||
|
<span class="unit">米</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 错误点列表 --> |
||||
|
<div class="section" v-if="errorPoints.length > 0"> |
||||
|
<div class="section-title">错误点列表</div> |
||||
|
<div class="error-list"> |
||||
|
<div v-for="(point, index) in errorPoints" :key="index" class="error-item"> |
||||
|
<div class="error-type">{{ point.type }}</div> |
||||
|
<div class="error-position"> |
||||
|
<small>{{ toFixed(point.position.lat, 7) }}, {{ toFixed(point.position.lng, 7) }}</small> |
||||
|
</div> |
||||
|
<div class="error-time"> |
||||
|
<small>{{ point.time }}</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
pointer-events: visible; |
||||
|
position: absolute; |
||||
|
left: 0px; |
||||
|
top: 0px; |
||||
|
bottom: 0px; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
padding: 8px; |
||||
|
border-radius: 8px; |
||||
|
color: white; |
||||
|
font-size: 11px; |
||||
|
width: fit-content; |
||||
|
min-width: 140px; |
||||
|
z-index: 2; |
||||
|
transition: transform 0.3s ease; |
||||
|
|
||||
|
&.hidden { |
||||
|
transform: translateX(calc(-100% - 5px)); |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.container { |
||||
|
// display: flex; |
||||
|
// flex-direction: column; |
||||
|
// gap: 12px; |
||||
|
box-sizing: border-box; |
||||
|
overflow: auto; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.nav { |
||||
|
position: absolute; |
||||
|
right: -20px; |
||||
|
top: 6px; |
||||
|
|
||||
|
.toggle-btn { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
cursor: pointer; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
border-radius: 0 4px 4px 0; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
background-color: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.section { |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
margin-bottom: 6px; |
||||
|
padding-bottom: 4px; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-row { |
||||
|
margin-bottom: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 2px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
min-width: 50px; |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.value-unit { |
||||
|
display: inline-flex; |
||||
|
align-items: baseline; |
||||
|
gap: 1px; |
||||
|
|
||||
|
.value { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.unit { |
||||
|
font-size: 0.85em; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
small { |
||||
|
font-size: 0.85em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-list { |
||||
|
.error-item { |
||||
|
margin-bottom: 8px; |
||||
|
padding: 6px; |
||||
|
background-color: rgba(255, 0, 0, 0.2); |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.error-type { |
||||
|
font-weight: 500; |
||||
|
margin-bottom: 2px; |
||||
|
} |
||||
|
|
||||
|
.error-position, |
||||
|
.error-time { |
||||
|
font-size: 0.85em; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,214 @@ |
|||||
|
<script setup> |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import { Left, Right } from '@nutui/icons-vue-taro'; |
||||
|
import deviceCruise from '../core/deviceCruise'; |
||||
|
|
||||
|
const isVisible = ref(true); |
||||
|
const info = computed(() => deviceCruise.timelyData); |
||||
|
|
||||
|
// 学员信息 |
||||
|
const studentInfo = ref({ |
||||
|
name: '张三', // 示例数据 |
||||
|
droneId: 'UAV-001', // 示例数据 |
||||
|
}); |
||||
|
|
||||
|
// 阶段性倒计时 |
||||
|
const countdown = ref({ |
||||
|
phase: '起飞阶段', // 示例数据 |
||||
|
remainingTime: '05:00', // 示例数据 |
||||
|
}); |
||||
|
|
||||
|
// 实时语音播报内容 |
||||
|
const voiceContent = ref('请注意保持安全高度'); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="[s.root, { [s.hidden]: !isVisible }]"> |
||||
|
<div class="nav"> |
||||
|
<div :class="{ 'toggle-btn': true, 'is-active': !isVisible }" @click="() => isVisible = !isVisible"> |
||||
|
<Right v-if="isVisible" style="font-size: 14px;" /> |
||||
|
<Left style="font-size: 14px;" v-else /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div class="container-2"> |
||||
|
<!-- 学员信息 --> |
||||
|
<div class="section"> |
||||
|
<div class="section-title">学员信息</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">姓名：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ studentInfo.name }}</small> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">飞机编号：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ studentInfo.droneId }}</small> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 阶段信息 --> |
||||
|
<div class="section"> |
||||
|
<div class="section-title">阶段信息</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">当前阶段：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ countdown.phase }}</small> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text-row"> |
||||
|
<span class="label">剩余时间：</span> |
||||
|
<span class="value"> |
||||
|
<div class="value-unit"> |
||||
|
<small class="value">{{ countdown.remainingTime }}</small> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 语音播报 --> |
||||
|
<div class="section"> |
||||
|
<div class="section-title">语音播报</div> |
||||
|
<div class="voice-content"> |
||||
|
{{ voiceContent }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
pointer-events: visible; |
||||
|
position: absolute; |
||||
|
right: 0px; |
||||
|
top: 0px; |
||||
|
bottom: 0px; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
padding: 8px; |
||||
|
border-radius: 8px; |
||||
|
color: white; |
||||
|
font-size: 11px; |
||||
|
width: fit-content; |
||||
|
min-width: 140px; |
||||
|
z-index: 2; |
||||
|
transition: transform 0.3s ease; |
||||
|
|
||||
|
&.hidden { |
||||
|
transform: translateX(calc(100% + 5px)); |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.container { |
||||
|
// box-sizing: border-box; |
||||
|
overflow: auto; |
||||
|
height: 100%; |
||||
|
|
||||
|
.container-2 { |
||||
|
// display: flex; |
||||
|
// flex-direction: column; |
||||
|
// gap: 8px; |
||||
|
// padding: 4px; |
||||
|
height: 102%; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nav { |
||||
|
position: absolute; |
||||
|
left: -20px; |
||||
|
top: 6px; |
||||
|
|
||||
|
.toggle-btn { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
cursor: pointer; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
border-radius: 4px 0 0 4px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
background-color: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.section { |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
margin-bottom: 6px; |
||||
|
padding-bottom: 4px; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-row { |
||||
|
margin-bottom: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 2px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
min-width: 50px; |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.value-unit { |
||||
|
display: inline-flex; |
||||
|
align-items: baseline; |
||||
|
gap: 1px; |
||||
|
|
||||
|
.value { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
small { |
||||
|
font-size: 0.85em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.voice-content { |
||||
|
padding: 6px; |
||||
|
background-color: rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 4px; |
||||
|
font-size: 0.85em; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<script setup> |
||||
|
import { eventCenter, getCurrentInstance, reLaunch } from '@tarojs/taro' |
||||
|
import {onMounted, ref, h, computed} from "vue"; |
||||
|
import { Category, My, Eye, Horizontal } from '@nutui/icons-vue-taro'; |
||||
|
import { useAuthStore } from "../stores"; |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
|
||||
|
const { isStudent } = storeToRefs(useAuthStore()); |
||||
|
|
||||
|
const current = ref(0); |
||||
|
|
||||
|
const tabList = computed(() => [ |
||||
|
...(isStudent.value ? [ |
||||
|
{ title: '首页', icon: h(Category), path: '/pages/home/index' }, |
||||
|
{ title: '监管', icon: h(Eye), path: '/pages/supervision/index' }, |
||||
|
{ title: '我的', icon: h(My), path: '/pages/own/index' } |
||||
|
] : [ |
||||
|
{ title: '监管', icon: h(Eye), path: '/pages/supervision/index' }, |
||||
|
{ title: '记录', icon: h(Horizontal), path: '/pages/home/index' }, |
||||
|
{ title: '我的', icon: h(My), path: '/pages/own/index' } |
||||
|
]), |
||||
|
]); |
||||
|
|
||||
|
const emit = defineEmits(['change']); |
||||
|
|
||||
|
function handleClick(_, index) { |
||||
|
const item = tabList.value[index]; |
||||
|
emit('change', item); |
||||
|
if (item.path) { |
||||
|
reLaunch({ url: item.path }) |
||||
|
current.value = index; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventCenter.on(getCurrentInstance().router.onShow, () => { |
||||
|
const page = getCurrentInstance().router.path; |
||||
|
if (!page) return; |
||||
|
const index = tabList.value.findIndex(item => item.path === page); |
||||
|
if (index !== -1) current.value = index; |
||||
|
}); |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<nut-tabbar v-model="current" bottom safe-area-inset-bottom placeholder unactive-color="#7d7e80" active-color="#1989fa" @tab-switch="handleClick"> |
||||
|
<nut-tabbar-item v-for="(item, index) in tabList" :key="index" :tab-title="item.title" :icon="item.icon"> |
||||
|
</nut-tabbar-item> |
||||
|
</nut-tabbar> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,195 @@ |
|||||
|
<script setup> |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import deviceCruise from '../core/deviceCruise'; |
||||
|
import { PlayStop, PlayStart, Refresh } from '@nutui/icons-vue-taro'; |
||||
|
|
||||
|
// 计算属性 |
||||
|
const ready = computed(() => deviceCruise.ready); |
||||
|
const speedRate = computed(() => deviceCruise.speedRate); |
||||
|
const totalTime = computed(() => deviceCruise.totalTime); |
||||
|
const currentTime = computed({ |
||||
|
get() { |
||||
|
return deviceCruise.elapsedMs; |
||||
|
}, |
||||
|
set(val) { |
||||
|
// console.log('aaaaa', val); |
||||
|
// deviceCruise.handlePause(); |
||||
|
deviceCruise.setCurrentTime(val); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const showPlayButton = computed(() => deviceCruise.isPaused || deviceCruise.isStopped); |
||||
|
|
||||
|
// 格式化时间显示 |
||||
|
function formatTime(ms) { |
||||
|
const seconds = Math.floor(ms / 1000); |
||||
|
const minutes = Math.floor(seconds / 60); |
||||
|
const remainingSeconds = seconds % 60; |
||||
|
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; |
||||
|
} |
||||
|
|
||||
|
// 计算当前时间显示 |
||||
|
const currentTimeDisplay = computed(() => formatTime(deviceCruise.elapsedMs)); |
||||
|
const totalTimeDisplay = computed(() => formatTime(totalTime.value)); |
||||
|
|
||||
|
// 事件处理函数 |
||||
|
function onChangeSpeedRate() { |
||||
|
const newSpeedRate = speedRate.value >= 8 ? 1 : speedRate.value * 2; |
||||
|
deviceCruise.setSpeedRate(newSpeedRate); |
||||
|
} |
||||
|
|
||||
|
function onPlay() { |
||||
|
deviceCruise.handlePlay(); |
||||
|
} |
||||
|
|
||||
|
function onPause() { |
||||
|
deviceCruise.handlePause(); |
||||
|
} |
||||
|
|
||||
|
function onStop() { |
||||
|
deviceCruise.handleStop(); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view :class="s.root"> |
||||
|
<view class="slider-container"> |
||||
|
<nut-range |
||||
|
v-model="currentTime" |
||||
|
hidden-range |
||||
|
:hidden-tag="true" |
||||
|
:max="totalTime" |
||||
|
:min="0" |
||||
|
:step="1" |
||||
|
/> |
||||
|
<view class="time-display"> |
||||
|
<text>{{ currentTimeDisplay }}</text> |
||||
|
<text>{{ totalTimeDisplay }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="controls"> |
||||
|
<view class="btn" @click="onChangeSpeedRate" style="color: #fff;"> |
||||
|
{{ speedRate }} x |
||||
|
</view> |
||||
|
<view class="btn" v-if="showPlayButton" @click="onPlay"> |
||||
|
<PlayStart /> |
||||
|
</view> |
||||
|
<view class="btn" v-else @click="onPause"> |
||||
|
<PlayStop /> |
||||
|
</view> |
||||
|
<view class="btn" @click="onStop"> |
||||
|
<Refresh /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
pointer-events: visible; |
||||
|
position: absolute; |
||||
|
left: 10rpx; |
||||
|
right: 10rpx; |
||||
|
bottom: 5rpx; |
||||
|
z-index: 999; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
padding: 10rpx 15rpx 10rpx 15rpx; |
||||
|
border-radius: 8rpx; |
||||
|
display: flex; |
||||
|
// flex-direction: row; |
||||
|
align-items: center; |
||||
|
gap: 20rpx; |
||||
|
|
||||
|
:global { |
||||
|
.slider-container { |
||||
|
flex: 4; |
||||
|
|
||||
|
.nut-range-button { |
||||
|
width: 16rpx; |
||||
|
height: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.time-display { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
font-size: 16rpx; |
||||
|
color: #fff; |
||||
|
margin-top: 5rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.controls { |
||||
|
// flex: 2; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
// justify-content: flex-end; |
||||
|
gap: 10rpx; |
||||
|
|
||||
|
.btn { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: #fff; |
||||
|
background-color: #0069ca!important; |
||||
|
min-width: 30rpx; |
||||
|
font-size: 16rpx; |
||||
|
height: 40rpx; |
||||
|
width: 40rpx; |
||||
|
border-radius: 8rpx; |
||||
|
|
||||
|
&:active { |
||||
|
background-color: #0056b3!important; |
||||
|
} |
||||
|
|
||||
|
.nut-icon { |
||||
|
//width: 12px; |
||||
|
//height: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.play-controls { |
||||
|
// display: flex; |
||||
|
// gap: 10rpx; |
||||
|
} |
||||
|
|
||||
|
// .nut-button { |
||||
|
// min-width: 30rpx; |
||||
|
// height: 30rpx; |
||||
|
// padding: 0 6rpx; |
||||
|
// display: flex; |
||||
|
// align-items: center; |
||||
|
// justify-content: center; |
||||
|
// color: #fff; |
||||
|
// // background-color: #1890ff !important; |
||||
|
// } |
||||
|
|
||||
|
.iconfont { |
||||
|
font-size: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.time-display { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
font-size: 16rpx; |
||||
|
color: #fff; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.icon-play:before { |
||||
|
content: '\e87c'; |
||||
|
} |
||||
|
|
||||
|
.icon-pause:before { |
||||
|
content: '\e87d'; |
||||
|
} |
||||
|
|
||||
|
.icon-stop:before { |
||||
|
content: '\e87e'; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,96 @@ |
|||||
|
/** |
||||
|
* 接口地址列表 |
||||
|
*/ |
||||
|
import { buildURL } from '../utils/helpers'; |
||||
|
const { TARO_APP_API: BASE_URL } = process.env; // 获取环境变量
|
||||
|
// const { TARO_APP_API: BASE_URL } = import.meta; // 获取环境变量
|
||||
|
// 上传
|
||||
|
// export const UPLOAD = `${BASE_URL}/v1/files/upload`;
|
||||
|
export const UPLOAD = `http://192.168.10.23:9762/v1/files/upload`; |
||||
|
|
||||
|
// 用户登录
|
||||
|
export const LOGIN_WITH_PASSWORD = `${BASE_URL}/user/token`; |
||||
|
export const WECHAT_AUTH_URL = `${BASE_URL}/wechat/mini/auth`; |
||||
|
export const GET_WECHAT_USERINFO = `${BASE_URL}/wechat/mini/getWxUserInfo`; |
||||
|
|
||||
|
//学生信息
|
||||
|
export const UPDATE_STUDENT = (id) => buildURL(`${BASE_URL}/v1/students/{id}`, id); |
||||
|
|
||||
|
//人员信息
|
||||
|
export const UPDATE_MEMBER = (id) => buildURL(`${BASE_URL}/v1/users/{id}`, id); |
||||
|
|
||||
|
// 讲评管理
|
||||
|
// export const GET_EVALUATION_LIST = `${BASE_URL}/v1/evaluations`;
|
||||
|
// export const CREATE_EVALUATION = `${BASE_URL}/v1/evaluations`;
|
||||
|
// export const UPDATE_EVALUATION = `${BASE_URL}/v1/evaluations`;
|
||||
|
// export const GET_EVALUATION_DETAIL = (id) => buildURL(`${BASE_URL}/v1/evaluations/{id}`, id);
|
||||
|
|
||||
|
export const GET_EVALUATION_LIST = `http://192.168.10.23:9762/v1/evaluations`; |
||||
|
export const CREATE_EVALUATION = `http://192.168.10.23:9762/v1/evaluations`; |
||||
|
export const UPDATE_EVALUATION = `http://192.168.10.23:9762/v1/evaluations`; |
||||
|
export const GET_EVALUATION_DETAIL = (id) => buildURL(`http://192.168.10.23:9762/v1/evaluations/{id}`, id); |
||||
|
export const REPLY_EVALUATION = 'http://192.168.10.23:9762/v1/evaluations/reply'; |
||||
|
|
||||
|
// 实践飞行管理
|
||||
|
// export const GET_FLIGHT_LIST = `${BASE_URL}/v1/flightRecords`;
|
||||
|
// export const GET_FLIGHT_DETAIL = (id) => buildURL(`${BASE_URL}/v1/flightRecords/{id}`, id);
|
||||
|
// export const GET_FLIGHT_TRACKS = (id) => buildURL(`${BASE_URL}/v1/flightRecords/{id}/tracks`, id);
|
||||
|
|
||||
|
export const GET_FLIGHT_LIST = `http://192.168.10.23:9762/v1/flightRecords`; |
||||
|
export const GET_FLIGHT_DETAIL = (id) => buildURL(`http://192.168.10.23:9762/v1/flightRecords/{id}`, id); |
||||
|
export const GET_FLIGHT_TRACKS = (id) => buildURL(`http://192.168.10.23:9762/v1/flightRecords/{id}/tracks`, id); |
||||
|
|
||||
|
// 航线管理
|
||||
|
// export const GET_ROUTE_PLAN_LIST = `${BASE_URL}/v1/routePlans`;
|
||||
|
// export const GET_ROUTE_PLAN_DETAIL = (id) => buildURL(`${BASE_URL}/v1/routePlans/{id}`, id);
|
||||
|
|
||||
|
export const GET_ROUTE_PLAN_LIST = `http://192.168.10.23:9762/v1/routePlans`; |
||||
|
export const GET_ROUTE_PLAN_DETAIL = (id) => buildURL(`http://192.168.10.23:9762/v1/routePlans/{id}`, id); |
||||
|
|
||||
|
// 应急返航管理
|
||||
|
// export const GET_RETURN_TRIP_LIST = `${BASE_URL}/v1/returnTrips`;
|
||||
|
// export const GET_RETURN_TRIP_DETAIL = (id) => buildURL(`${BASE_URL}/v1/returnTrips/{id}`, id);
|
||||
|
|
||||
|
export const GET_RETURN_TRIP_LIST = `http://192.168.10.23:9762/v1/returnTrips`; |
||||
|
export const GET_RETURN_TRIP_DETAIL = (id) => buildURL(`http://192.168.10.23:9762/v1/returnTrips/{id}`, id); |
||||
|
|
||||
|
|
||||
|
// 用户信息
|
||||
|
export const GET_USER_INFO = `${BASE_URL}/user/userInfo`; |
||||
|
|
||||
|
// 识别记录
|
||||
|
export const CREATE_RECORD = `${BASE_URL}/record/createRecord`; |
||||
|
|
||||
|
// export const CREATE_RECORD = `${BASE_URL}/record/upload`;
|
||||
|
export const GET_RECORD_LIST = `${BASE_URL}/record/page`; |
||||
|
export const DELETE_RECORD = `${BASE_URL}/record/delete/{recordId}`; |
||||
|
export const UPDATE_RECORD = `${BASE_URL}/record/update`; |
||||
|
export const GET_RECORD_DETAIL = `${BASE_URL}/record/getRecordDetail/{recordId}`; |
||||
|
export const UPDATE_RECORD_DETAIL = `${BASE_URL}/record/updateRecordContent`; |
||||
|
export const EXPORT_RECORD = `${BASE_URL}/record/export/{recordId}`; |
||||
|
export const SET_SCALE = `${BASE_URL}/record/scale`; |
||||
|
|
||||
|
// 任务
|
||||
|
export const GET_TASK_LIST = `${BASE_URL}/record/tasks`; |
||||
|
export const GET_TASK_PROGRESS = `${BASE_URL}/record/taskProgress/{taskId}`; |
||||
|
|
||||
|
// 模型列表
|
||||
|
export const GET_MODEL_LIST = `${BASE_URL}/record/models`; |
||||
|
export const UPDATE_USER = `${BASE_URL}/user/update`; |
||||
|
export const SEARCH_REGION_FARMER = `${BASE_URL}/user/listFarmerByRegionCode`; |
||||
|
export const UPDATE_FARMER = `${BASE_URL}/user/updateFarmer`; |
||||
|
|
||||
|
// 作业
|
||||
|
export const GET_WORK_RECORD_LIST = `${BASE_URL}/job/page`; |
||||
|
export const GET_TRACK_LIST = `${BASE_URL}/job/tracks/{jobId}`; |
||||
|
export const GET_WORK_TYPE_LIST = `${BASE_URL}/job/types`; |
||||
|
export const GET_WORKING_DETAIL = `${BASE_URL}/job/inWorking`; |
||||
|
export const UPDATE_WORK_STATUS = `${BASE_URL}/job/status`; |
||||
|
export const CREATE_WORK = `${BASE_URL}/job/start`; |
||||
|
|
||||
|
// 设备
|
||||
|
export const GET_DEVICE_LIST = `${BASE_URL}/device/page`; |
||||
|
export const GET_ONLINE_DEVICES = `${BASE_URL}/device/onlineAndRound`; |
||||
|
|
||||
|
// 地区
|
||||
|
export const GET_REGION_CHILDREN = `${BASE_URL}/region/getChildren`; |
||||
@ -0,0 +1,165 @@ |
|||||
|
// 文件 formData.js
|
||||
|
import mimeMap from './mimeMap'; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
|
||||
|
function FormData(){ |
||||
|
let fileManager = Taro.getFileSystemManager(); |
||||
|
let data = {}; |
||||
|
let files = []; |
||||
|
|
||||
|
this.clearCacheData = () => { |
||||
|
data = {}; |
||||
|
files = []; |
||||
|
} |
||||
|
|
||||
|
this.append = (name, value)=>{ |
||||
|
data[name] = value; |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
this.appendFile = (name, path, fileName)=>{ |
||||
|
let buffer = fileManager.readFileSync(path); |
||||
|
if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){ |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
if(!fileName){ |
||||
|
fileName = getFileNameFromPath(path); |
||||
|
} |
||||
|
|
||||
|
files.push({ |
||||
|
name: name, |
||||
|
buffer: buffer, |
||||
|
fileName: fileName |
||||
|
}); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
this.getData = ()=>convert(data, files) |
||||
|
} |
||||
|
|
||||
|
function getFileNameFromPath(path){ |
||||
|
let idx=path.lastIndexOf("/"); |
||||
|
return path.substr(idx+1); |
||||
|
} |
||||
|
|
||||
|
function convert(data, files){ |
||||
|
let boundaryKey = 'wxmpFormBoundary' + randString(); // 数据分割符，一般是随机的字符串
|
||||
|
let boundary = '--' + boundaryKey; |
||||
|
let endBoundary = boundary + '--'; |
||||
|
|
||||
|
let postArray = []; |
||||
|
//拼接参数
|
||||
|
if(data && Object.prototype.toString.call(data) == "[object Object]"){ |
||||
|
for(let key in data){ |
||||
|
postArray = postArray.concat(formDataArray(boundary, key, data[key])); |
||||
|
} |
||||
|
} |
||||
|
//拼接文件
|
||||
|
if(files && Object.prototype.toString.call(files) == "[object Array]"){ |
||||
|
for(let i in files){ |
||||
|
let file = files[i]; |
||||
|
postArray = postArray.concat(formDataArray(boundary, file.name, file.buffer, file.fileName)); |
||||
|
} |
||||
|
} |
||||
|
//结尾
|
||||
|
let endBoundaryArray = []; |
||||
|
endBoundaryArray.push(...endBoundary.toUtf8Bytes()); |
||||
|
postArray = postArray.concat(endBoundaryArray); |
||||
|
return { |
||||
|
contentType: 'multipart/form-data; boundary=' + boundaryKey, |
||||
|
buffer: new Uint8Array(postArray).buffer |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function randString() { |
||||
|
let res = ""; |
||||
|
for (let i = 0; i < 17; i++) { |
||||
|
let n = parseInt(Math.random() * 62); |
||||
|
if (n <= 9) { |
||||
|
res += n; |
||||
|
} |
||||
|
else if (n <= 35) { |
||||
|
res += String.fromCharCode(n + 55); |
||||
|
} |
||||
|
else { |
||||
|
res += String.fromCharCode(n + 61); |
||||
|
} |
||||
|
} |
||||
|
return res; |
||||
|
} |
||||
|
|
||||
|
function formDataArray(boundary, name, value, fileName){ |
||||
|
let dataString = ''; |
||||
|
let isFile = !!fileName; |
||||
|
|
||||
|
dataString += boundary + '\r\n'; |
||||
|
dataString += 'Content-Disposition: form-data; name="' + name + '"'; |
||||
|
if (isFile){ |
||||
|
dataString += '; filename="' + fileName + '"' + '\r\n'; |
||||
|
dataString += 'Content-Type: ' + getFileMime(fileName) + '\r\n\r\n'; |
||||
|
} |
||||
|
else{ |
||||
|
dataString += '\r\n\r\n'; |
||||
|
dataString += value; |
||||
|
} |
||||
|
|
||||
|
let dataArray = []; |
||||
|
dataArray.push(...dataString.toUtf8Bytes()); |
||||
|
|
||||
|
if (isFile) { |
||||
|
let fileArray = new Uint8Array(value); |
||||
|
dataArray = dataArray.concat(Array.prototype.slice.call(fileArray)); |
||||
|
} |
||||
|
dataArray.push(..."\r".toUtf8Bytes()); |
||||
|
dataArray.push(..."\n".toUtf8Bytes()); |
||||
|
|
||||
|
return dataArray; |
||||
|
} |
||||
|
|
||||
|
function getFileMime(fileName){ |
||||
|
let idx = fileName.lastIndexOf("."); |
||||
|
let mime = mimeMap[fileName.substr(idx)]; |
||||
|
return mime?mime:"application/octet-stream" |
||||
|
} |
||||
|
|
||||
|
String.prototype.toUtf8Bytes = function(){ |
||||
|
var str = this; |
||||
|
var bytes = []; |
||||
|
for (var i = 0; i < str.length; i++) { |
||||
|
bytes.push(...str.utf8CodeAt(i)); |
||||
|
if (str.codePointAt(i) > 0xffff) { |
||||
|
i++; |
||||
|
} |
||||
|
} |
||||
|
return bytes; |
||||
|
} |
||||
|
|
||||
|
String.prototype.utf8CodeAt = function(i) { |
||||
|
var str = this; |
||||
|
var out = [], p = 0; |
||||
|
var c = str.charCodeAt(i); |
||||
|
if (c < 128) { |
||||
|
out[p++] = c; |
||||
|
} else if (c < 2048) { |
||||
|
out[p++] = (c >> 6) | 192; |
||||
|
out[p++] = (c & 63) | 128; |
||||
|
} else if ( |
||||
|
((c & 0xFC00) == 0xD800) && (i + 1) < str.length && |
||||
|
((str.charCodeAt(i + 1) & 0xFC00) == 0xDC00)) { |
||||
|
// Surrogate Pair
|
||||
|
c = 0x10000 + ((c & 0x03FF) << 10) + (str.charCodeAt(++i) & 0x03FF); |
||||
|
out[p++] = (c >> 18) | 240; |
||||
|
out[p++] = ((c >> 12) & 63) | 128; |
||||
|
out[p++] = ((c >> 6) & 63) | 128; |
||||
|
out[p++] = (c & 63) | 128; |
||||
|
} else { |
||||
|
out[p++] = (c >> 12) | 224; |
||||
|
out[p++] = ((c >> 6) & 63) | 128; |
||||
|
out[p++] = (c & 63) | 128; |
||||
|
} |
||||
|
return out; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
export default FormData; |
||||
@ -0,0 +1,296 @@ |
|||||
|
/** |
||||
|
* 设备按轨迹巡航 |
||||
|
*/ |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { interpolate } from 'popmotion'; |
||||
|
// import * as turf from '@turf/turf';
|
||||
|
import deviceIcon from '../assets/deviceIcon.png'; |
||||
|
|
||||
|
const markerId = 999; |
||||
|
|
||||
|
class DeviceCruise { |
||||
|
|
||||
|
_markerOptins = { |
||||
|
id: markerId, |
||||
|
iconPath: deviceIcon, |
||||
|
width: 32, |
||||
|
height: 32, |
||||
|
anchor: { x: 0.5, y: 0.5 } |
||||
|
} |
||||
|
_that = null; |
||||
|
|
||||
|
// 地图实例
|
||||
|
_map = null; |
||||
|
|
||||
|
// 单条轨迹数据
|
||||
|
_dataSource = {}; |
||||
|
|
||||
|
// 巡航速率
|
||||
|
speedRate = 1; |
||||
|
|
||||
|
// 动画计时器
|
||||
|
_timer = null; |
||||
|
|
||||
|
// 上一帧时间点
|
||||
|
_lastFrameAt = 0; |
||||
|
|
||||
|
// 累计播放时长（毫秒数）
|
||||
|
elapsedMs = 0; |
||||
|
|
||||
|
// 每帧期望间隔（毫秒数，实际间隔取决于浏览器fps）
|
||||
|
_fpsInterval = 1000 / 30; |
||||
|
|
||||
|
// 上一帧时间戳
|
||||
|
_lastFrameTimestamp = 0; |
||||
|
|
||||
|
// 巡航到的时间点数据
|
||||
|
timelyData = {}; |
||||
|
|
||||
|
isPlaying = false; |
||||
|
|
||||
|
isPaused = false; |
||||
|
|
||||
|
isStopped = true; |
||||
|
|
||||
|
// currentIndex = 0;
|
||||
|
|
||||
|
// 是否准备完毕
|
||||
|
get ready() { |
||||
|
return Object.keys(this._that._dataSource).length > 0; |
||||
|
} |
||||
|
|
||||
|
get _points() { |
||||
|
const { points } = this._that._dataSource; |
||||
|
return points || []; |
||||
|
} |
||||
|
|
||||
|
// 基准时间点（从0开始的毫秒数）
|
||||
|
get _datumTime() { |
||||
|
const [{ timestamp: startTs } = {}] = this._that._points || []; |
||||
|
return this._that._points.map(({ timestamp }) => timestamp - startTs); |
||||
|
} |
||||
|
|
||||
|
// 轨迹总时间（毫秒数）
|
||||
|
get totalTime() { |
||||
|
return this._that._datumTime[this._that._datumTime.length - 1] || 0; |
||||
|
} |
||||
|
|
||||
|
// 是否已经开始播放了
|
||||
|
get isStarted() { |
||||
|
return this._that.isPlaying || this._that.isPaused; |
||||
|
} |
||||
|
|
||||
|
constructor() { |
||||
|
this._that = reactive(this); |
||||
|
return this._that; |
||||
|
} |
||||
|
|
||||
|
// 设置地图实例
|
||||
|
setMap(mapInstance) { |
||||
|
this._that._map = mapInstance; |
||||
|
} |
||||
|
|
||||
|
// 载入轨迹数据（point中必须包含lng, lat, timestamp, yaw）
|
||||
|
loadTrack({ id, points, ...others }) { |
||||
|
// if (!this._that._that._map) {
|
||||
|
// throw new Error('请先设置地图实例');
|
||||
|
// }
|
||||
|
this._that._dataSource = { |
||||
|
id, |
||||
|
points: (points || []).map(item => ({ ...item })), |
||||
|
...others, |
||||
|
}; |
||||
|
this._that._reset(); |
||||
|
this._that._initDevice(); |
||||
|
} |
||||
|
|
||||
|
// 设置速率
|
||||
|
setSpeedRate(val) { |
||||
|
this._that.speedRate = val; |
||||
|
} |
||||
|
|
||||
|
_setting = false; |
||||
|
// 设置当前巡航时间点
|
||||
|
setCurrentTime(ms) { |
||||
|
if (ms < 0 || ms > this._that.totalTime) return; |
||||
|
if (this._that.isPlaying) { |
||||
|
this._that.isPlaying = false; |
||||
|
this._that.isPaused = true; |
||||
|
} |
||||
|
|
||||
|
if (this._that._setting) return; |
||||
|
this._that._setting = true; |
||||
|
this._that.elapsedMs = ms; |
||||
|
const index = this._that._datumTime.findIndex(item => item >= ms); |
||||
|
this._that.currentIndex = index; |
||||
|
const point = this._that._points[index]; |
||||
|
const { lng, lat, yaw } = point; |
||||
|
this._that._map.removeMarkers({ |
||||
|
markerIds: [markerId], |
||||
|
success: () => { |
||||
|
// this._that._renderDevice();
|
||||
|
this._that._map.addMarkers({ |
||||
|
markers: [{ |
||||
|
...this._that._markerOptins, |
||||
|
latitude: lat, |
||||
|
longitude: lng, |
||||
|
rotate: yaw || 0, |
||||
|
}], |
||||
|
success: () => { |
||||
|
this._that._setting = false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 获取指定毫秒处的数据值
|
||||
|
_getTimelyData(ms = 0) { |
||||
|
const genTimelyData = interpolate(this._that._datumTime, this._that._points); |
||||
|
// const index = this._that._datumTime.findIndex(item => item >= ms);
|
||||
|
// console.log('genTimelyData', genTimelyData(ms));
|
||||
|
// if (index === -1) {
|
||||
|
// return {};
|
||||
|
// }
|
||||
|
|
||||
|
return genTimelyData(ms); |
||||
|
// return this._that._points[index] || {};
|
||||
|
} |
||||
|
|
||||
|
_reset() { |
||||
|
this._that.isPlaying = false; |
||||
|
this._that.isPaused = false; |
||||
|
this._that.isStopped = true; |
||||
|
this._that.speedRate = 1; |
||||
|
this._that._lastFrameAt = 0; |
||||
|
this._that.elapsedMs = 0; |
||||
|
this._that._lastFrameTimestamp = 0; |
||||
|
} |
||||
|
|
||||
|
_initDevice() { |
||||
|
const [point] = this._that._points; |
||||
|
if (!point) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const { lng, lat, yaw } = point; |
||||
|
this._that._map.addMarkers({ |
||||
|
markers: [{ |
||||
|
...this._that._markerOptins, |
||||
|
latitude: lat, |
||||
|
longitude: lng, |
||||
|
rotate: yaw || 0, |
||||
|
}] |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
_clearDevice() { |
||||
|
// 清除timelyData即可
|
||||
|
this._that.timelyData = {}; |
||||
|
this._that._map.removeMarkers({ |
||||
|
markerIds: [markerId] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
_renderDevice() { |
||||
|
if (!this._that._points.length) return; |
||||
|
// if (!this._that.isPlaying) return;
|
||||
|
|
||||
|
// const lastData = this._that._getTimelyData(this._that.elapsedMs - 100 > 0 ? this._that.elapsedMs - 100 : 0);
|
||||
|
const nextData = this._that._getTimelyData(this._that.elapsedMs); |
||||
|
|
||||
|
// const { deep, breadth, seeding, flow } = nextData;
|
||||
|
this._that.timelyData = { ...nextData }; |
||||
|
const { lng, lat, yaw } = nextData; |
||||
|
|
||||
|
this._that._map.translateMarker({ |
||||
|
markerId, |
||||
|
destination: { |
||||
|
longitude: lng, |
||||
|
latitude: lat, |
||||
|
}, |
||||
|
autoRotate: false, |
||||
|
duration: 1, |
||||
|
rotate: yaw || 0, |
||||
|
moveWithRotate: true, |
||||
|
animationEnd: () => { |
||||
|
// this._that.timelyData = { ...nextData };
|
||||
|
// this._that.currentIndex += 1;
|
||||
|
// if (this._that.isPlaying) {
|
||||
|
// this._that.elapsedMs += (duration * this._that.speedRate);
|
||||
|
// if (this._that.elapsedMs >= this._that.totalTime) {
|
||||
|
// this._that.handleStop();
|
||||
|
// return;
|
||||
|
// }
|
||||
|
// this._that._renderDevice();
|
||||
|
// }
|
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
_ticker = timestamp => { |
||||
|
this._that.elapsedMs += Math.round((timestamp - this._that._lastFrameAt) * this._that.speedRate); |
||||
|
this._that._lastFrameAt = timestamp; |
||||
|
if (this._that.elapsedMs > this._that.totalTime) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 在期望的间隔内_renderDevice，而不是每个tick都_renderDevice（目的：降低render频率，提高显示性能）
|
||||
|
const now = Date.now(); |
||||
|
const timeDiff = now - this._that._lastFrameTimestamp; |
||||
|
if (timeDiff > this._that._fpsInterval) { |
||||
|
this._that._lastFrameTimestamp = now - (timeDiff % this._that._fpsInterval); // 矫正时间戳
|
||||
|
this._that._renderDevice(); |
||||
|
} |
||||
|
|
||||
|
this._that._timer = requestAnimationFrame(this._that._ticker); |
||||
|
}; |
||||
|
|
||||
|
// 开始播放巡航动画、恢复播放巡航动画
|
||||
|
handlePlay() { |
||||
|
requestAnimationFrame(ms => { |
||||
|
this._that._lastFrameAt = ms; |
||||
|
}); |
||||
|
this._that.isPlaying = true; |
||||
|
this._that.isPaused = false; |
||||
|
this._that.isStopped = false; |
||||
|
requestAnimationFrame(this._that._ticker); |
||||
|
} |
||||
|
|
||||
|
// 暂停播放巡航动画
|
||||
|
handlePause() { |
||||
|
this._that.isPlaying = false; |
||||
|
this._that.isPaused = true; |
||||
|
this._that.isStopped = false; |
||||
|
cancelAnimationFrame(this._that._timer); |
||||
|
} |
||||
|
|
||||
|
// 停止播放巡航动画
|
||||
|
handleStop() { |
||||
|
this._that.isPlaying = false; |
||||
|
this._that.isPaused = false; |
||||
|
this._that.isStopped = true; |
||||
|
this._that._lastFrameAt = 0; |
||||
|
this._that.elapsedMs = 0; |
||||
|
cancelAnimationFrame(this._that._timer); |
||||
|
this._that._renderDevice(); |
||||
|
this._that.timelyData = {}; |
||||
|
} |
||||
|
|
||||
|
clear() { |
||||
|
if (!this._that._map) return; |
||||
|
this._that.handleStop(); |
||||
|
this._that._clearDevice(); |
||||
|
this._that._reset(); |
||||
|
this._that._dataSource = {}; |
||||
|
this._that.timelyData = {}; |
||||
|
} |
||||
|
|
||||
|
destroy() { |
||||
|
this._that.clear(); |
||||
|
this._that._timer = null; |
||||
|
this._that._map = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new DeviceCruise(); |
||||
@ -0,0 +1,345 @@ |
|||||
|
export default { |
||||
|
"0.001": "application/x-001", |
||||
|
"0.323": "text/h323", |
||||
|
"0.907": "drawing/907", |
||||
|
".acp": "audio/x-mei-aac", |
||||
|
".aif": "audio/aiff", |
||||
|
".aiff": "audio/aiff", |
||||
|
".asa": "text/asa", |
||||
|
".asp": "text/asp", |
||||
|
".au": "audio/basic", |
||||
|
".awf": "application/vnd.adobe.workflow", |
||||
|
".bmp": "application/x-bmp", |
||||
|
".c4t": "application/x-c4t", |
||||
|
".cal": "application/x-cals", |
||||
|
".cdf": "application/x-netcdf", |
||||
|
".cel": "application/x-cel", |
||||
|
".cg4": "application/x-g4", |
||||
|
".cit": "application/x-cit", |
||||
|
".cml": "text/xml", |
||||
|
".cmx": "application/x-cmx", |
||||
|
".crl": "application/pkix-crl", |
||||
|
".csi": "application/x-csi", |
||||
|
".cut": "application/x-cut", |
||||
|
".dbm": "application/x-dbm", |
||||
|
".dcd": "text/xml", |
||||
|
".der": "application/x-x509-ca-cert", |
||||
|
".dib": "application/x-dib", |
||||
|
".doc": "application/msword", |
||||
|
".drw": "application/x-drw", |
||||
|
".dwf": "Model/vnd.dwf", |
||||
|
".dwg": "application/x-dwg", |
||||
|
".dxf": "application/x-dxf", |
||||
|
".emf": "application/x-emf", |
||||
|
".ent": "text/xml", |
||||
|
".eps": "application/x-ps", |
||||
|
".etd": "application/x-ebx", |
||||
|
".fax": "image/fax", |
||||
|
".fif": "application/fractals", |
||||
|
".frm": "application/x-frm", |
||||
|
".gbr": "application/x-gbr", |
||||
|
".gif": "image/gif", |
||||
|
".gp4": "application/x-gp4", |
||||
|
".hmr": "application/x-hmr", |
||||
|
".hpl": "application/x-hpl", |
||||
|
".hrf": "application/x-hrf", |
||||
|
".htc": "text/x-component", |
||||
|
".html": "text/html", |
||||
|
".htx": "text/html", |
||||
|
".ico": "image/x-icon", |
||||
|
".iff": "application/x-iff", |
||||
|
".igs": "application/x-igs", |
||||
|
".img": "application/x-img", |
||||
|
".isp": "application/x-internet-signup", |
||||
|
".java": "java/*", |
||||
|
".jpe": "image/jpeg", |
||||
|
".jpeg": "image/jpeg", |
||||
|
".jpg": "application/x-jpg", |
||||
|
".jsp": "text/html", |
||||
|
".lar": "application/x-laplayer-reg", |
||||
|
".lavs": "audio/x-liquid-secure", |
||||
|
".lmsff": "audio/x-la-lms", |
||||
|
".ltr": "application/x-ltr", |
||||
|
".m2v": "video/x-mpeg", |
||||
|
".m4e": "video/mpeg4", |
||||
|
".man": "application/x-troff-man", |
||||
|
".mdb": "application/msaccess", |
||||
|
".mfp": "application/x-shockwave-flash", |
||||
|
".mhtml": "message/rfc822", |
||||
|
".mid": "audio/mid", |
||||
|
".mil": "application/x-mil", |
||||
|
".mnd": "audio/x-musicnet-download", |
||||
|
".mocha": "application/x-javascript", |
||||
|
".mp1": "audio/mp1", |
||||
|
".mp2v": "video/mpeg", |
||||
|
".mp4": "video/mpeg4", |
||||
|
".mpd": "application/vnd.ms-project", |
||||
|
".mpeg": "video/mpg", |
||||
|
".mpga": "audio/rn-mpeg", |
||||
|
".mps": "video/x-mpeg", |
||||
|
".mpv": "video/mpg", |
||||
|
".mpw": "application/vnd.ms-project", |
||||
|
".mtx": "text/xml", |
||||
|
".net": "image/pnetvue", |
||||
|
".nws": "message/rfc822", |
||||
|
".out": "application/x-out", |
||||
|
".p12": "application/x-pkcs12", |
||||
|
".p7c": "application/pkcs7-mime", |
||||
|
".p7r": "application/x-pkcs7-certreqresp", |
||||
|
".pc5": "application/x-pc5", |
||||
|
".pcl": "application/x-pcl", |
||||
|
".pdf": "application/pdf", |
||||
|
".pdx": "application/vnd.adobe.pdx", |
||||
|
".pgl": "application/x-pgl", |
||||
|
".pko": "application/vnd.ms-pki.pko", |
||||
|
".plg": "text/html", |
||||
|
".plt": "application/x-plt", |
||||
|
".png": "application/x-png", |
||||
|
".ppa": "application/vnd.ms-powerpoint", |
||||
|
".pps": "application/vnd.ms-powerpoint", |
||||
|
".ppt": "application/x-ppt", |
||||
|
".prf": "application/pics-rules", |
||||
|
".prt": "application/x-prt", |
||||
|
".ps": "application/postscript", |
||||
|
".pwz": "application/vnd.ms-powerpoint", |
||||
|
".ra": "audio/vnd.rn-realaudio", |
||||
|
".ras": "application/x-ras", |
||||
|
".rdf": "text/xml", |
||||
|
".red": "application/x-red", |
||||
|
".rjs": "application/vnd.rn-realsystem-rjs", |
||||
|
".rlc": "application/x-rlc", |
||||
|
".rm": "application/vnd.rn-realmedia", |
||||
|
".rmi": "audio/mid", |
||||
|
".rmm": "audio/x-pn-realaudio", |
||||
|
".rms": "application/vnd.rn-realmedia-secure", |
||||
|
".rmx": "application/vnd.rn-realsystem-rmx", |
||||
|
".rp": "image/vnd.rn-realpix", |
||||
|
".rsml": "application/vnd.rn-rsml", |
||||
|
".rtf": "application/msword", |
||||
|
".rv": "video/vnd.rn-realvideo", |
||||
|
".sat": "application/x-sat", |
||||
|
".sdw": "application/x-sdw", |
||||
|
".slb": "application/x-slb", |
||||
|
".slk": "drawing/x-slk", |
||||
|
".smil": "application/smil", |
||||
|
".snd": "audio/basic", |
||||
|
".sor": "text/plain", |
||||
|
".spl": "application/futuresplash", |
||||
|
".ssm": "application/streamingmedia", |
||||
|
".stl": "application/vnd.ms-pki.stl", |
||||
|
".sty": "application/x-sty", |
||||
|
".swf": "application/x-shockwave-flash", |
||||
|
".tg4": "application/x-tg4", |
||||
|
".tif": "image/tiff", |
||||
|
".tiff": "image/tiff", |
||||
|
".top": "drawing/x-top", |
||||
|
".tsd": "text/xml", |
||||
|
".uin": "application/x-icq", |
||||
|
".vcf": "text/x-vcard", |
||||
|
".vdx": "application/vnd.visio", |
||||
|
".vpg": "application/x-vpeg005", |
||||
|
".vsd": "application/x-vsd", |
||||
|
".vst": "application/vnd.visio", |
||||
|
".vsw": "application/vnd.visio", |
||||
|
".vtx": "application/vnd.visio", |
||||
|
".wav": "audio/wav", |
||||
|
".wb1": "application/x-wb1", |
||||
|
".wb3": "application/x-wb3", |
||||
|
".wiz": "application/msword", |
||||
|
".wk4": "application/x-wk4", |
||||
|
".wks": "application/x-wks", |
||||
|
".wma": "audio/x-ms-wma", |
||||
|
".wmf": "application/x-wmf", |
||||
|
".wmv": "video/x-ms-wmv", |
||||
|
".wmz": "application/x-ms-wmz", |
||||
|
".wpd": "application/x-wpd", |
||||
|
".wpl": "application/vnd.ms-wpl", |
||||
|
".wr1": "application/x-wr1", |
||||
|
".wrk": "application/x-wrk", |
||||
|
".ws2": "application/x-ws", |
||||
|
".wsdl": "text/xml", |
||||
|
".xdp": "application/vnd.adobe.xdp", |
||||
|
".xfd": "application/vnd.adobe.xfd", |
||||
|
".xhtml": "text/html", |
||||
|
".xls": "application/x-xls", |
||||
|
".xml": "text/xml", |
||||
|
".xq": "text/xml", |
||||
|
".xquery": "text/xml", |
||||
|
".xsl": "text/xml", |
||||
|
".xwd": "application/x-xwd", |
||||
|
".sis": "application/vnd.symbian.install", |
||||
|
".x_t": "application/x-x_t", |
||||
|
".apk": "application/vnd.android.package-archive", |
||||
|
"0.301": "application/x-301", |
||||
|
"0.906": "application/x-906", |
||||
|
".a11": "application/x-a11", |
||||
|
".ai": "application/postscript", |
||||
|
".aifc": "audio/aiff", |
||||
|
".anv": "application/x-anv", |
||||
|
".asf": "video/x-ms-asf", |
||||
|
".asx": "video/x-ms-asf", |
||||
|
".avi": "video/avi", |
||||
|
".biz": "text/xml", |
||||
|
".bot": "application/x-bot", |
||||
|
".c90": "application/x-c90", |
||||
|
".cat": "application/vnd.ms-pki.seccat", |
||||
|
".cdr": "application/x-cdr", |
||||
|
".cer": "application/x-x509-ca-cert", |
||||
|
".cgm": "application/x-cgm", |
||||
|
".class": "java/*", |
||||
|
".cmp": "application/x-cmp", |
||||
|
".cot": "application/x-cot", |
||||
|
".crt": "application/x-x509-ca-cert", |
||||
|
".css": "text/css", |
||||
|
".dbf": "application/x-dbf", |
||||
|
".dbx": "application/x-dbx", |
||||
|
".dcx": "application/x-dcx", |
||||
|
".dgn": "application/x-dgn", |
||||
|
".dll": "application/x-msdownload", |
||||
|
".dot": "application/msword", |
||||
|
".dtd": "text/xml", |
||||
|
".dwf": "application/x-dwf", |
||||
|
".dxb": "application/x-dxb", |
||||
|
".edn": "application/vnd.adobe.edn", |
||||
|
".eml": "message/rfc822", |
||||
|
".epi": "application/x-epi", |
||||
|
".eps": "application/postscript", |
||||
|
".exe": "application/x-msdownload", |
||||
|
".fdf": "application/vnd.fdf", |
||||
|
".fo": "text/xml", |
||||
|
".g4": "application/x-g4", |
||||
|
".tif": "image/tiff", |
||||
|
".gl2": "application/x-gl2", |
||||
|
".hgl": "application/x-hgl", |
||||
|
".hpg": "application/x-hpgl", |
||||
|
".hqx": "application/mac-binhex40", |
||||
|
".hta": "application/hta", |
||||
|
".htm": "text/html", |
||||
|
".htt": "text/webviewhtml", |
||||
|
".icb": "application/x-icb", |
||||
|
".ico": "application/x-ico", |
||||
|
".ig4": "application/x-g4", |
||||
|
".iii": "application/x-iphone", |
||||
|
".ins": "application/x-internet-signup", |
||||
|
".IVF": "video/x-ivf", |
||||
|
".jfif": "image/jpeg", |
||||
|
".jpe": "application/x-jpe", |
||||
|
".jpg": "image/jpeg", |
||||
|
".js": "application/x-javascript", |
||||
|
".la1": "audio/x-liquid-file", |
||||
|
".latex": "application/x-latex", |
||||
|
".lbm": "application/x-lbm", |
||||
|
".ls": "application/x-javascript", |
||||
|
".m1v": "video/x-mpeg", |
||||
|
".m3u": "audio/mpegurl", |
||||
|
".mac": "application/x-mac", |
||||
|
".math": "text/xml", |
||||
|
".mdb": "application/x-mdb", |
||||
|
".mht": "message/rfc822", |
||||
|
".mi": "application/x-mi", |
||||
|
".midi": "audio/mid", |
||||
|
".mml": "text/xml", |
||||
|
".mns": "audio/x-musicnet-stream", |
||||
|
".movie": "video/x-sgi-movie", |
||||
|
".mp2": "audio/mp2", |
||||
|
".mp3": "audio/mp3", |
||||
|
".mpa": "video/x-mpg", |
||||
|
".mpe": "video/x-mpeg", |
||||
|
".mpg": "video/mpg", |
||||
|
".mpp": "application/vnd.ms-project", |
||||
|
".mpt": "application/vnd.ms-project", |
||||
|
".mpv2": "video/mpeg", |
||||
|
".mpx": "application/vnd.ms-project", |
||||
|
".mxp": "application/x-mmxp", |
||||
|
".nrf": "application/x-nrf", |
||||
|
".odc": "text/x-ms-odc", |
||||
|
".p10": "application/pkcs10", |
||||
|
".p7b": "application/x-pkcs7-certificates", |
||||
|
".p7m": "application/pkcs7-mime", |
||||
|
".p7s": "application/pkcs7-signature", |
||||
|
".pci": "application/x-pci", |
||||
|
".pcx": "application/x-pcx", |
||||
|
".pdf": "application/pdf", |
||||
|
".pfx": "application/x-pkcs12", |
||||
|
".pic": "application/x-pic", |
||||
|
".pl": "application/x-perl", |
||||
|
".pls": "audio/scpls", |
||||
|
".png": "image/png", |
||||
|
".pot": "application/vnd.ms-powerpoint", |
||||
|
".ppm": "application/x-ppm", |
||||
|
".ppt": "application/vnd.ms-powerpoint", |
||||
|
".pr": "application/x-pr", |
||||
|
".prn": "application/x-prn", |
||||
|
".ps": "application/x-ps", |
||||
|
".ptn": "application/x-ptn", |
||||
|
".r3t": "text/vnd.rn-realtext3d", |
||||
|
".ram": "audio/x-pn-realaudio", |
||||
|
".rat": "application/rat-file", |
||||
|
".rec": "application/vnd.rn-recording", |
||||
|
".rgb": "application/x-rgb", |
||||
|
".rjt": "application/vnd.rn-realsystem-rjt", |
||||
|
".rle": "application/x-rle", |
||||
|
".rmf": "application/vnd.adobe.rmf", |
||||
|
".rmj": "application/vnd.rn-realsystem-rmj", |
||||
|
".rmp": "application/vnd.rn-rn_music_package", |
||||
|
".rmvb": "application/vnd.rn-realmedia-vbr", |
||||
|
".rnx": "application/vnd.rn-realplayer", |
||||
|
".rpm": "audio/x-pn-realaudio-plugin", |
||||
|
".rt": "text/vnd.rn-realtext", |
||||
|
".rtf": "application/x-rtf", |
||||
|
".sam": "application/x-sam", |
||||
|
".sdp": "application/sdp", |
||||
|
".sit": "application/x-stuffit", |
||||
|
".sld": "application/x-sld", |
||||
|
".smi": "application/smil", |
||||
|
".smk": "application/x-smk", |
||||
|
".sol": "text/plain", |
||||
|
".spc": "application/x-pkcs7-certificates", |
||||
|
".spp": "text/xml", |
||||
|
".sst": "application/vnd.ms-pki.certstore", |
||||
|
".stm": "text/html", |
||||
|
".svg": "text/xml", |
||||
|
".tdf": "application/x-tdf", |
||||
|
".tga": "application/x-tga", |
||||
|
".tif": "application/x-tif", |
||||
|
".tld": "text/xml", |
||||
|
".torrent": "application/x-bittorrent", |
||||
|
".txt": "text/plain", |
||||
|
".uls": "text/iuls", |
||||
|
".vda": "application/x-vda", |
||||
|
".vml": "text/xml", |
||||
|
".vsd": "application/vnd.visio", |
||||
|
".vss": "application/vnd.visio", |
||||
|
".vst": "application/x-vst", |
||||
|
".vsx": "application/vnd.visio", |
||||
|
".vxml": "text/xml", |
||||
|
".wax": "audio/x-ms-wax", |
||||
|
".wb2": "application/x-wb2", |
||||
|
".wbmp": "image/vnd.wap.wbmp", |
||||
|
".wk3": "application/x-wk3", |
||||
|
".wkq": "application/x-wkq", |
||||
|
".wm": "video/x-ms-wm", |
||||
|
".wmd": "application/x-ms-wmd", |
||||
|
".wml": "text/vnd.wap.wml", |
||||
|
".wmx": "video/x-ms-wmx", |
||||
|
".wp6": "application/x-wp6", |
||||
|
".wpg": "application/x-wpg", |
||||
|
".wq1": "application/x-wq1", |
||||
|
".wri": "application/x-wri", |
||||
|
".ws": "application/x-ws", |
||||
|
".wsc": "text/scriptlet", |
||||
|
".wvx": "video/x-ms-wvx", |
||||
|
".xdr": "text/xml", |
||||
|
".xfdf": "application/vnd.adobe.xfdf", |
||||
|
".xls": "application/vnd.ms-excel", |
||||
|
".xlw": "application/x-xlw", |
||||
|
".xpl": "audio/scpls", |
||||
|
".xql": "text/xml", |
||||
|
".xsd": "text/xml", |
||||
|
".xslt": "text/xml", |
||||
|
".x_b": "application/x-x_b", |
||||
|
".sisx": "application/vnd.symbian.install", |
||||
|
".ipa": "application/vnd.iphone", |
||||
|
".xap": "application/x-silverlight-app", |
||||
|
".zip": "application/x-zip-compressed", |
||||
|
} |
||||
@ -0,0 +1,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> |
||||
|
<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"> |
||||
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
|
<meta name="apple-touch-fullscreen" content="yes"> |
||||
|
<meta name="format-detection" content="telephone=no,address=no"> |
||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="white"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||
|
<title>uav-edu-mp</title> |
||||
|
<script><%= htmlWebpackPlugin.options.script % ></script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,6 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '自我讲评', |
||||
|
disableSwipeBack: true, |
||||
|
enablePullDownRefresh: true, |
||||
|
backgroundTextStyle: 'dark', |
||||
|
}) |
||||
@ -0,0 +1,621 @@ |
|||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive } from 'vue'; |
||||
|
import { useEvaluationStore, useAuthStore } from '../../stores'; |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
import { formatTime } from '../../utils/helpers'; |
||||
|
import { Uploader } from '@nutui/icons-vue-taro'; |
||||
|
|
||||
|
const { getEvaluationList, getEvaluationDetail, replyEvaluation, updateEvaluation, createEvaluation } = useEvaluationStore(); |
||||
|
const { evaluationList, evaluationExtra, evaluationQueries } = storeToRefs(useEvaluationStore()); |
||||
|
const { isTeacher, isStudent } = storeToRefs(useAuthStore()); |
||||
|
|
||||
|
const replyContent = ref(''); |
||||
|
const isReplying = ref(false); |
||||
|
const editContent = ref(''); |
||||
|
const isEditing = ref(false); |
||||
|
const showEdit = ref(false); |
||||
|
const showCreate = ref(false); |
||||
|
const createContent = ref(''); |
||||
|
const isCreating = ref(false); |
||||
|
|
||||
|
const state = reactive({ |
||||
|
msg: '错误提示', |
||||
|
type: 'warn', |
||||
|
show: false, |
||||
|
cover: true, |
||||
|
center: true, |
||||
|
}); |
||||
|
|
||||
|
function openToast(type = 'warn', msg = '错误提示') { |
||||
|
state.msg = msg; |
||||
|
state.type = type; |
||||
|
state.show = true; |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const finished = ref(false); |
||||
|
const showDetail = ref(false); |
||||
|
const showReply = ref(false); |
||||
|
const currentDetail = ref(null); |
||||
|
const currentEvaluation = ref(null); |
||||
|
const isRefreshing = ref(false); |
||||
|
|
||||
|
function onRefresh() { |
||||
|
isRefreshing.value = true; |
||||
|
evaluationQueries.value.pageNum = 1; |
||||
|
getEvaluationList().then(() => { |
||||
|
Taro.stopPullDownRefresh(); |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
isRefreshing.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onLoadMore() { |
||||
|
if (loading.value) return; |
||||
|
if (evaluationList.value.length >= evaluationExtra.value.total) return; |
||||
|
loading.value = true; |
||||
|
evaluationQueries.value.pageNum += 1; |
||||
|
getEvaluationList().catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function viewDetail(id) { |
||||
|
getEvaluationDetail(id).then(({ data }) => { |
||||
|
currentDetail.value = data; |
||||
|
showDetail.value = true; |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function showReplyDialog(item) { |
||||
|
currentEvaluation.value = item; |
||||
|
replyContent.value = ''; |
||||
|
isReplying.value = false; |
||||
|
showReply.value = true; |
||||
|
} |
||||
|
|
||||
|
function submitReply() { |
||||
|
if (!replyContent.value.trim()) { |
||||
|
openToast('warn', '请输入教评内容'); |
||||
|
return; |
||||
|
} |
||||
|
isReplying.value = true; |
||||
|
replyEvaluation(currentEvaluation.value.id, replyContent.value) |
||||
|
.then(() => { |
||||
|
openToast('success', '教评成功'); |
||||
|
replyContent.value = ''; |
||||
|
showReply.value = false; |
||||
|
onRefresh(); |
||||
|
}) |
||||
|
.catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
isReplying.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function showEditDialog(item) { |
||||
|
currentEvaluation.value = item; |
||||
|
editContent.value = item.content; |
||||
|
isEditing.value = false; |
||||
|
showEdit.value = true; |
||||
|
} |
||||
|
|
||||
|
function submitEdit() { |
||||
|
if (!editContent.value.trim()) { |
||||
|
openToast('warn', '请输入评论内容'); |
||||
|
return; |
||||
|
} |
||||
|
isEditing.value = true; |
||||
|
updateEvaluation({ id: currentEvaluation.value.id, content: editContent.value }) |
||||
|
.then(() => { |
||||
|
openToast('success', '修改成功'); |
||||
|
editContent.value = ''; |
||||
|
showEdit.value = false; |
||||
|
onRefresh(); |
||||
|
}) |
||||
|
.catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
isEditing.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function submitCreate() { |
||||
|
if (!createContent.value.trim()) { |
||||
|
openToast('warn', '请输入自我讲评内容'); |
||||
|
return; |
||||
|
} |
||||
|
isCreating.value = true; |
||||
|
createEvaluation({ content: createContent.value }) |
||||
|
.then(() => { |
||||
|
openToast('success', '创建成功'); |
||||
|
createContent.value = ''; |
||||
|
showCreate.value = false; |
||||
|
onRefresh(); |
||||
|
}) |
||||
|
.catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
isCreating.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function formatDate(date) { |
||||
|
return formatTime(date, 'YYYY-MM-DD'); |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getEvaluationList().catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
Taro.usePullDownRefresh(() => { |
||||
|
onRefresh(); |
||||
|
}); |
||||
|
|
||||
|
Taro.useReachBottom(() => { |
||||
|
onLoadMore(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="list"> |
||||
|
<div v-for="item in evaluationList" :key="item.id" class="item" :class="{ 'has-reply': item.hasReply }"> |
||||
|
<div class="header"> |
||||
|
<div class="student-name">{{ item.studentName || '匿名' }}</div> |
||||
|
<div class="status" v-if="!item.hasReply" :class="{ 'has-reply': item.hasReply }">{{ item.hasReply ? '已回复' : '未回复' }}</div> |
||||
|
</div> |
||||
|
<div class="content">{{ item.content }}</div> |
||||
|
<div class="footer"> |
||||
|
<div class="date">{{ formatTime(item.createTime) }}</div> |
||||
|
<div class="buttons"> |
||||
|
<nut-button size="mini" type="info" @click="viewDetail(item.id)"> |
||||
|
<span>查看回复</span> |
||||
|
</nut-button> |
||||
|
<nut-button v-if="isStudent" size="mini" type="primary" @click="showEditDialog(item)"> |
||||
|
<span>修改</span> |
||||
|
</nut-button> |
||||
|
<nut-button v-if="isTeacher" size="mini" type="primary" @click="showReplyDialog(item)"> |
||||
|
<span>写教评</span> |
||||
|
</nut-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nut-empty v-if="evaluationList.length === 0" description="暂无数据" /> |
||||
|
<nut-infiniteloading |
||||
|
v-if="evaluationList.length" |
||||
|
load-txt="加载中..." |
||||
|
load-more-txt="没有更多了" |
||||
|
:has-more="evaluationList.length < evaluationExtra.total" |
||||
|
@load-more="loadData" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="create-button" v-if="isStudent" @click="showCreate = true"> |
||||
|
<nut-button type="info"><Uploader /></nut-button> |
||||
|
</div> |
||||
|
|
||||
|
<nut-popup v-model:visible="showDetail" position="bottom" :style="{ height: '70%' }" round> |
||||
|
<div class="detail" v-if="currentDetail"> |
||||
|
<div class="main-content"> |
||||
|
<div class="content">{{ currentDetail.content }}</div> |
||||
|
<div class="footer"> |
||||
|
<div class="student-name">{{ currentDetail.studentName }}</div> |
||||
|
<div class="time">{{ formatTime(currentDetail.createTime) }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="replies"> |
||||
|
<div class="reply-title">回复列表</div> |
||||
|
<div v-if="currentDetail.replies && currentDetail.replies.length > 0" class="reply-list"> |
||||
|
<div v-for="reply in currentDetail.replies" :key="reply.createTime" class="reply-item"> |
||||
|
<div class="reply-content">{{ reply.content }}</div> |
||||
|
<div class="reply-info"> |
||||
|
<span class="teacher">{{ reply.teacherName || '老师' }}</span> |
||||
|
<span class="time">{{ formatTime(reply.createTime) }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nut-empty v-else description="暂无回复" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nut-popup> |
||||
|
|
||||
|
<nut-popup v-model:visible="showReply" position="bottom" :style="{ height: '40%' }" round> |
||||
|
<div class="reply-popup"> |
||||
|
<div class="reply-popup-header"> |
||||
|
<div class="title">教评</div> |
||||
|
<div class="close" @click="showReply = false"> |
||||
|
<i class="iconfont icon-close"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="reply-popup-content"> |
||||
|
<nut-textarea |
||||
|
v-model="replyContent" |
||||
|
placeholder="请输入回复内容" |
||||
|
:maxlength="100" |
||||
|
:rows="4" |
||||
|
/> |
||||
|
<nut-button |
||||
|
block |
||||
|
type="primary" |
||||
|
:loading="isReplying" |
||||
|
@click="submitReply" |
||||
|
>提交回复</nut-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nut-popup> |
||||
|
|
||||
|
<nut-popup v-model:visible="showEdit" position="bottom" :style="{ height: '40%' }" round> |
||||
|
<div class="reply-popup"> |
||||
|
<div class="reply-popup-header"> |
||||
|
<div class="title">修改评论</div> |
||||
|
<div class="close" @click="showEdit = false"> |
||||
|
<i class="iconfont icon-close"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="reply-popup-content"> |
||||
|
<nut-textarea |
||||
|
v-model="editContent" |
||||
|
placeholder="请输入评论内容" |
||||
|
:maxlength="100" |
||||
|
:rows="4" |
||||
|
/> |
||||
|
<nut-button |
||||
|
block |
||||
|
type="primary" |
||||
|
:loading="isEditing" |
||||
|
@click="submitEdit" |
||||
|
>提交修改</nut-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nut-popup> |
||||
|
|
||||
|
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" :cover="state.cover" :center="state.center" /> |
||||
|
|
||||
|
<nut-popup v-model:visible="showCreate" position="bottom" :style="{ height: '40%' }" round> |
||||
|
<div class="reply-popup"> |
||||
|
<div class="reply-popup-header"> |
||||
|
<div class="title">新建自我讲评</div> |
||||
|
<div class="close" @click="showCreate = false"> |
||||
|
<i class="iconfont icon-close"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="reply-popup-content"> |
||||
|
<nut-textarea |
||||
|
v-model="createContent" |
||||
|
placeholder="请输入自我讲评内容" |
||||
|
:maxlength="100" |
||||
|
:rows="4" |
||||
|
/> |
||||
|
<nut-button |
||||
|
block |
||||
|
type="primary" |
||||
|
:loading="isCreating" |
||||
|
@click="submitCreate" |
||||
|
>提交</nut-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nut-popup> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
box-sizing: border-box; |
||||
|
min-height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
padding: 16px; |
||||
|
|
||||
|
:global { |
||||
|
.list { |
||||
|
.item { |
||||
|
background-color: #fff; |
||||
|
border-radius: 16px; |
||||
|
padding: 24px; |
||||
|
margin-bottom: 20px; |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
||||
|
transition: all 0.3s ease; |
||||
|
position: relative; |
||||
|
overflow: visible; |
||||
|
z-index: 0; |
||||
|
|
||||
|
&::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
width: 6px; |
||||
|
background-color: #838383; |
||||
|
border-radius: 16px 0 0 16px; |
||||
|
z-index: 2; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
&.has-reply::before { |
||||
|
background-color: #00c691; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.student-name { |
||||
|
font-size: 16px; |
||||
|
color: #262626; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
font-size: 14px; |
||||
|
color: #8c8c8c; |
||||
|
padding: 4px 12px; |
||||
|
border-radius: 20px; |
||||
|
background-color: #f5f5f5; |
||||
|
&.has-reply { |
||||
|
color: #00c691; |
||||
|
background-color: rgba(0, 198, 145, 0.1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
font-size: 24px; |
||||
|
line-height: 1.5; |
||||
|
color: #262626; |
||||
|
font-weight: 500; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-top: 16px; |
||||
|
|
||||
|
.date { |
||||
|
font-size: 14px; |
||||
|
color: #8c8c8c; |
||||
|
} |
||||
|
|
||||
|
.buttons { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
|
||||
|
.nut-button { |
||||
|
height: 36px; |
||||
|
// padding: 0 16px; |
||||
|
border-radius: 20px; |
||||
|
// color: #00c691; |
||||
|
// border-color: #00c691; |
||||
|
// background-color: rgba(0, 198, 145, 0.1); |
||||
|
|
||||
|
// &:hover { |
||||
|
// background-color: rgba(0, 198, 145, 0.2); |
||||
|
// } |
||||
|
|
||||
|
// i { |
||||
|
// margin-right: 6px; |
||||
|
font-size: 16px; |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.loading, .no-more { |
||||
|
text-align: center; |
||||
|
padding: 16px; |
||||
|
color: #999; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
pointer-events: none; |
||||
|
padding: 24px; |
||||
|
// height: 100%; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.main-content { |
||||
|
background-color: #f8f8f8; |
||||
|
border-radius: 16px; |
||||
|
padding: 24px; |
||||
|
margin-bottom: 24px; |
||||
|
|
||||
|
.content { |
||||
|
font-size: 24px; |
||||
|
line-height: 1.5; |
||||
|
color: #262626; |
||||
|
font-weight: 500; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.student-name { |
||||
|
font-size: 16px; |
||||
|
color: #262626; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 14px; |
||||
|
color: #8c8c8c; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.replies { |
||||
|
.reply-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 20px; |
||||
|
color: #262626; |
||||
|
padding-left: 12px; |
||||
|
border-left: 4px solid #00c691; |
||||
|
} |
||||
|
|
||||
|
.reply-list { |
||||
|
.reply-item { |
||||
|
background-color: #f8f8f8; |
||||
|
border-radius: 16px; |
||||
|
padding: 20px; |
||||
|
margin-bottom: 16px; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.reply-content { |
||||
|
font-size: 16px; |
||||
|
line-height: 1.6; |
||||
|
color: #262626; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.reply-info { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
.teacher { |
||||
|
color: #00c691; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
color: #8c8c8c; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.reply-popup { |
||||
|
padding: 20px; |
||||
|
// height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.reply-popup-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
.title { |
||||
|
// font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #262626; |
||||
|
} |
||||
|
|
||||
|
.close { |
||||
|
padding: 8px; |
||||
|
cursor: pointer; |
||||
|
color: #8c8c8c; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #262626; |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.reply-popup-content { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 0 20px 20px; |
||||
|
height: calc(100% - 60px); |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.nut-textarea { |
||||
|
margin-bottom: 20px; |
||||
|
background-color: #f8f8f8; |
||||
|
border-radius: 12px; |
||||
|
padding: 16px; |
||||
|
font-size: 16px; |
||||
|
min-height: 120px; |
||||
|
} |
||||
|
|
||||
|
.nut-button { |
||||
|
// height: 48px; |
||||
|
border-radius: 12px; |
||||
|
// font-size: 16px; |
||||
|
// background-color: #00c691; |
||||
|
// border-color: #00c691; |
||||
|
margin-top: auto; |
||||
|
|
||||
|
// &:active { |
||||
|
// background-color: darken(#00c691, 10%); |
||||
|
// border-color: darken(#00c691, 10%); |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.create-button { |
||||
|
position: fixed; |
||||
|
left: 24px; |
||||
|
bottom: 10vh; |
||||
|
// width: 56px; |
||||
|
// height: 56px; |
||||
|
border-radius: 50%; |
||||
|
// background-color: #00c691; |
||||
|
// box-shadow: 0 4px 12px rgba(0, 198, 145, 0.3); |
||||
|
// display: flex; |
||||
|
// align-items: center; |
||||
|
// justify-content: center; |
||||
|
// cursor: pointer; |
||||
|
// transition: all 0.3s ease; |
||||
|
// z-index: 100; |
||||
|
|
||||
|
// &:hover { |
||||
|
// transform: translateY(-2px); |
||||
|
// // box-shadow: 0 6px 16px rgba(0, 198, 145, 0.4); |
||||
|
// } |
||||
|
.nut-button { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
width: 10px; |
||||
|
height: 24px; |
||||
|
// font-size: 24px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,6 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '实践飞行', |
||||
|
disableSwipeBack: true, |
||||
|
enablePullDownRefresh: true, |
||||
|
backgroundTextStyle: 'dark', |
||||
|
}) |
||||
@ -0,0 +1,226 @@ |
|||||
|
<script setup> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
import { storeToRefs } from "pinia"; |
||||
|
import { useFlightStore } from "../../stores"; |
||||
|
|
||||
|
const { getFlightList } = useFlightStore(); |
||||
|
const { flightList, flightExtra, flightQueries } = storeToRefs(useFlightStore()); |
||||
|
|
||||
|
const state = reactive({ |
||||
|
msg: '错误提示', |
||||
|
type: 'warn', |
||||
|
show: false, |
||||
|
cover: true, |
||||
|
center: true, |
||||
|
}); |
||||
|
|
||||
|
function openToast(type = 'warn', msg = '错误提示') { |
||||
|
state.msg = msg; |
||||
|
state.type = type; |
||||
|
state.show = true; |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const isRefreshing = ref(false); |
||||
|
|
||||
|
function onRefresh() { |
||||
|
isRefreshing.value = true; |
||||
|
flightQueries.value.pageNum = 1; |
||||
|
getFlightList().then(() => { |
||||
|
Taro.stopPullDownRefresh(); |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
isRefreshing.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onLoadMore() { |
||||
|
if (loading.value) return; |
||||
|
if (flightList.value.length >= flightExtra.value.total) return; |
||||
|
loading.value = true; |
||||
|
flightQueries.value.pageNum += 1; |
||||
|
getFlightList().catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onNavTo(id) { |
||||
|
Taro.navigateTo({ |
||||
|
url: `/pages/flightMap/index?id=${id}`, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
Taro.usePullDownRefresh(() => { |
||||
|
onRefresh(); |
||||
|
}); |
||||
|
|
||||
|
Taro.useReachBottom(() => { |
||||
|
onLoadMore(); |
||||
|
}); |
||||
|
|
||||
|
Taro.useDidShow(() => { |
||||
|
getFlightList().catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="list"> |
||||
|
<div class="item" v-for="item in flightList" :key="item.id" :class="{ 'is-pass': item.isPass }"> |
||||
|
<div class="title"> |
||||
|
<span>{{ item.studentName || '-' }}</span> |
||||
|
<nut-button size="mini" type="info" @click="onNavTo(item.id)">回放</nut-button> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="info-row"> |
||||
|
<span>班级：{{ item.className || '-' }}</span> |
||||
|
<span>无人机：{{ item.droneName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>教师：{{ item.teacherName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>场地：{{ item.airfieldName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>开始时间：{{ item.startTime || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span><nut-tag :type="item.isPass ? 'success' : 'danger'">{{ item.isPass ? '通过' : '未通过' }}</nut-tag></span> |
||||
|
<span>失败次数：{{ item.failTimes || 0 }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nut-empty v-if="!loading && !flightList.length" description="暂无数据" /> |
||||
|
<nut-infiniteloading |
||||
|
v-if="flightList.length" |
||||
|
load-txt="加载中..." |
||||
|
load-more-txt="没有更多了" |
||||
|
:has-more="flightList.length < flightExtra.total" |
||||
|
@load-more="onLoadMore" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" :cover="state.cover" :duration="2000" /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
padding: 20px 0; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #eaeaea; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
:global { |
||||
|
.list { |
||||
|
flex: 1; |
||||
|
overflow: auto; |
||||
|
padding: 0 20px; |
||||
|
|
||||
|
.item { |
||||
|
background-color: white; |
||||
|
border-radius: 16px; |
||||
|
padding: 28px; |
||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); |
||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 6px; |
||||
|
height: 100%; |
||||
|
background-color: #4CAF50; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
&:not(.is-pass)::before { |
||||
|
background-color: #FF5252; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
transform: translateY(-4px); |
||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
& + .item { |
||||
|
margin-top: 28px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 38px; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 24px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
color: #2c3e50; |
||||
|
|
||||
|
:global(.nut-button) { |
||||
|
font-size: 28px; |
||||
|
padding: 10px 24px; |
||||
|
border-radius: 8px; |
||||
|
background: rgba(74, 144, 226, 0.12); |
||||
|
color: #4a90e2; |
||||
|
border: none; |
||||
|
font-weight: 500; |
||||
|
transition: all 0.2s ease; |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.96); |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
color: #666; |
||||
|
font-size: 28px; |
||||
|
line-height: 1.6; |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 16px; |
||||
|
padding-right: 12px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
color: #34495e; |
||||
|
&:first-child { |
||||
|
color: #7f8c8d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
export default { |
||||
|
navigationBarTitleText: '实践飞行回放', |
||||
|
navigationStyle: 'default', |
||||
|
pageOrientation: 'landscape' |
||||
|
}; |
||||
@ -0,0 +1,252 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, ref, watch, onUnmounted, computed } from "vue"; |
||||
|
import * as Taro from "@tarojs/taro"; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
import { creatEightShaped, convertToTrajectory } from './utils'; |
||||
|
import trackData from './track.json'; |
||||
|
import deviceCruise from '../../core/deviceCruise'; |
||||
|
import TrackPlayback from '../../components/TrackPlayback.vue'; |
||||
|
import RealTimeData from '../../components/RealTimeData.vue'; |
||||
|
|
||||
|
// Taro.hideHomeButton(); |
||||
|
|
||||
|
// 地图中心点位置 |
||||
|
const centerPoint = ref({ |
||||
|
lat: 39.908692, |
||||
|
lng: 116.397477 |
||||
|
}); |
||||
|
|
||||
|
// 地图上下文 |
||||
|
let mapContext = null; |
||||
|
|
||||
|
const trajectory = convertToTrajectory(trackData, { |
||||
|
startTime: "2025-03-14T08:00:00Z", |
||||
|
interval: 1000 // 1秒间隔 |
||||
|
}); |
||||
|
|
||||
|
const show = ref(false); |
||||
|
|
||||
|
// 初始化地图 |
||||
|
onMounted(() => { |
||||
|
mapContext = Taro.createMapContext('map'); |
||||
|
show.value = true; |
||||
|
console.log(mapContext); |
||||
|
|
||||
|
initEightShaped(); |
||||
|
initDeviceCruise(); |
||||
|
}); |
||||
|
|
||||
|
// 八字飞行实例 |
||||
|
let eightShaped = null; |
||||
|
|
||||
|
// 多边形配置 |
||||
|
const polygons = ref([]); |
||||
|
// 圆形标记配置 |
||||
|
const circles = ref([]); |
||||
|
// 标记点配置 |
||||
|
const markerPoints = ref([]); |
||||
|
// 飞行轨迹配置 |
||||
|
const polyline = ref([{ |
||||
|
points: trackData.map(coord => ({ |
||||
|
latitude: coord[1], |
||||
|
longitude: coord[0] |
||||
|
})), |
||||
|
color: '#008000', |
||||
|
width: 4, |
||||
|
arrowLine: true |
||||
|
}]); |
||||
|
|
||||
|
// 地图旋转角度 |
||||
|
const bearing = ref(0); |
||||
|
|
||||
|
// 初始化八字飞行 |
||||
|
function initEightShaped() { |
||||
|
if (!mapContext) return; |
||||
|
|
||||
|
const center1 = [106.630154, 26.647661]; |
||||
|
const center2 = [106.632154, 26.649661]; |
||||
|
|
||||
|
// 计算两个圆心之间的方位角并转换为地图旋转角度 |
||||
|
let angle = turf.bearing(center1, center2); |
||||
|
// 在横屏模式下，需要加上90度使八字保持水平 |
||||
|
// 将角度转换为0-360度范围 |
||||
|
angle = ((angle % 360) + 360) % 360; |
||||
|
|
||||
|
const { polygons: shapePolygons, circles: shapeCircles, markers: shapeMarkers } = creatEightShaped({ |
||||
|
center: center1, |
||||
|
radius: 105, |
||||
|
radiusDiff: 35, |
||||
|
centerWidth: 2, |
||||
|
}, { |
||||
|
center: center2, |
||||
|
radius: 105, |
||||
|
radiusDiff: 35, |
||||
|
centerWidth: 2, |
||||
|
}, [6, 0, 1, 3, 4, 5, 2], { radius: 50 }); |
||||
|
|
||||
|
// 更新地图显示数据 |
||||
|
polygons.value = shapePolygons; |
||||
|
markerPoints.value = shapeMarkers; |
||||
|
circles.value = [ |
||||
|
...shapeCircles, |
||||
|
{ |
||||
|
latitude: center1[1], |
||||
|
longitude: center1[0], |
||||
|
color: '#FF0000', |
||||
|
fillColor: '#FF0000', |
||||
|
radius: 5, |
||||
|
strokeWidth: 2 |
||||
|
}, |
||||
|
{ |
||||
|
latitude: center2[1], |
||||
|
longitude: center2[0], |
||||
|
color: '#FF0000', |
||||
|
fillColor: '#FF0000', |
||||
|
radius: 5, |
||||
|
strokeWidth: 2 |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
// 设置地图视野 |
||||
|
// 设置地图视野，使用两个圆心作为边界点，并调整缩放级别 |
||||
|
mapContext.includePoints({ |
||||
|
points: [ |
||||
|
{ latitude: center1[1], longitude: center1[0] }, |
||||
|
{ latitude: center2[1], longitude: center2[0] } |
||||
|
], |
||||
|
padding: [50, 50, 110, 50], |
||||
|
success: (res) => { |
||||
|
setTimeout(() => { |
||||
|
// 调整偏移量使八字飞行路径保持垂直显示 |
||||
|
bearing.value = ((angle + 5) % 360 + 360) % 360; |
||||
|
}, 500); |
||||
|
// bearing.value = angle.toFixed(2) - 85; |
||||
|
console.log('地图视野设置成功', res); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error('地图视野设置失败', err); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 监听位置变化，更新八字飞行位置 |
||||
|
// watch(() => centerPoint.value, () => { |
||||
|
// if (!mapContext || !eightShaped) return; |
||||
|
// // 重新初始化八字飞行 |
||||
|
// initEightShaped(); |
||||
|
// }, { deep: true }); |
||||
|
|
||||
|
// 初始化轨迹回放 |
||||
|
function initDeviceCruise() { |
||||
|
console.log(mapContext); |
||||
|
|
||||
|
deviceCruise.setMap(mapContext); |
||||
|
deviceCruise.loadTrack(trajectory); |
||||
|
// markerPoints.value.push(deviceCruise._marker.value); |
||||
|
// console.log(markerPoints.value); |
||||
|
} |
||||
|
|
||||
|
// 计算属性：合并所有标记点 |
||||
|
// const allMarkers = computed(() => { |
||||
|
// // console.log(markerPoints.value, deviceCruise._marker.value); |
||||
|
// // eslint-disable-next-line vue/no-side-effects-in-computed-properties |
||||
|
// // markerPoints.value.push(deviceCruise._marker.value); |
||||
|
// |
||||
|
// // return [...markerPoints.value, deviceCruise._marker]; |
||||
|
// return markerPoints; |
||||
|
// }); |
||||
|
|
||||
|
// Taro.getLaunchOptionsSync().then(res => { |
||||
|
// console.log(res); |
||||
|
// }); |
||||
|
|
||||
|
// 组件卸载时清理资源 |
||||
|
onUnmounted(() => { |
||||
|
if (deviceCruise) { |
||||
|
deviceCruise.destroy(); |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view :class="s.root"> |
||||
|
<view class="mapBox"> |
||||
|
<map |
||||
|
id="map" |
||||
|
:longitude="centerPoint.lng" |
||||
|
:latitude="centerPoint.lat" |
||||
|
:polygons="polygons" |
||||
|
:circles="circles" |
||||
|
:markers="markerPoints" |
||||
|
:polyline="polyline" |
||||
|
:enable-satellite="true" |
||||
|
:enable-rotate="true" |
||||
|
:rotate="bearing" |
||||
|
/> |
||||
|
</view> |
||||
|
<TrackPlayback /> |
||||
|
<RealTimeData class="real-time-data" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0 !important; |
||||
|
overflow: hidden; |
||||
|
// position: fixed; |
||||
|
// top: 0; |
||||
|
// left: 0; |
||||
|
|
||||
|
:global { |
||||
|
.mapBox { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
#map { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
// z-index: -1; |
||||
|
} |
||||
|
|
||||
|
.real-time-data { |
||||
|
//position: absolute; |
||||
|
//left: 20px; |
||||
|
//top: 20px; |
||||
|
//z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.auth-tip { |
||||
|
position: absolute; |
||||
|
left: 40px; |
||||
|
right: 40px; |
||||
|
top: 40px; |
||||
|
background-color: fade(black, 50%); |
||||
|
backdrop-filter: blur(6px); |
||||
|
padding: 40px; |
||||
|
border-radius: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
font-size: 28px; |
||||
|
color: yellow; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,358 @@ |
|||||
|
import * as turf from '@turf/turf'; |
||||
|
import deviceIcon from '../../assets/deviceIcon.png'; |
||||
|
|
||||
|
// 创建同心圆多边形点集
|
||||
|
function _createCircle({ center, redRadius, radiusDiff }) { |
||||
|
const outerRadius = redRadius + radiusDiff; // 外圆半径
|
||||
|
const innerRadius = redRadius - radiusDiff; // 内圆半径
|
||||
|
|
||||
|
// 配置圆形生成选项
|
||||
|
const options = {steps: 64, units: 'meters'}; // 增加steps以使圆形更平滑
|
||||
|
|
||||
|
// 生成外圆和内圆
|
||||
|
const outerCircle = turf.circle([center.lng, center.lat], outerRadius, options); |
||||
|
const innerCircle = turf.circle([center.lng, center.lat], innerRadius, options); |
||||
|
|
||||
|
// 生成红色参考圆
|
||||
|
const redCircle = turf.circle([center.lng, center.lat], redRadius, options); |
||||
|
|
||||
|
// 创建环形（外圆 - 内圆）
|
||||
|
const featureCollection = turf.featureCollection([outerCircle, innerCircle]); |
||||
|
const ring = turf.difference(featureCollection); |
||||
|
|
||||
|
// 转换坐标格式为小程序地图组件要求的格式
|
||||
|
const convertCoordinates = (coords) => { |
||||
|
return coords.map(coord => ({ |
||||
|
longitude: coord[0], |
||||
|
latitude: coord[1] |
||||
|
})); |
||||
|
}; |
||||
|
|
||||
|
// // 获取环形的坐标点集
|
||||
|
// const ringCoords = ring.geometry.coordinates[0];
|
||||
|
// 获取红色圆的坐标点集
|
||||
|
const redCircleCoords = redCircle.geometry.coordinates[0]; |
||||
|
|
||||
|
// 返回所需的点集
|
||||
|
return { |
||||
|
ring: [...convertCoordinates(ring.geometry.coordinates[0]), ...convertCoordinates(ring.geometry.coordinates[1])], |
||||
|
redCircle: convertCoordinates(redCircleCoords), |
||||
|
center: { |
||||
|
latitude: center.lat, |
||||
|
longitude: center.lng |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 添加标记点
|
||||
|
export function addCircleMarkers(circle1, circle2, indexMap = [6, 0, 1, 3, 4, 5, 2], { radius = 5 }) { |
||||
|
const center1 = turf.point(circle1.center); |
||||
|
const center2 = turf.point(circle2.center); |
||||
|
|
||||
|
// 1. 计算两圆心连线方位角
|
||||
|
const bearing = turf.bearing(center1, center2); |
||||
|
|
||||
|
// 2. 生成基准交点
|
||||
|
const basePoint1 = turf.destination(center1, circle1.radius, bearing, { units: 'meters' }); |
||||
|
const basePoint2 = turf.destination(center2, circle2.radius, bearing + 180, { units: 'meters' }); |
||||
|
|
||||
|
// 3. 生成旋转点集合
|
||||
|
const generateRotatedPoints = (center, baseCoord) => { |
||||
|
const points = []; |
||||
|
for(let angle = 0; angle < 360; angle += 90) { |
||||
|
const rotatedCoord = turf.transformRotate( |
||||
|
turf.point(baseCoord), |
||||
|
angle, |
||||
|
{pivot: center} |
||||
|
).geometry.coordinates; |
||||
|
points.push(rotatedCoord); |
||||
|
} |
||||
|
return points.slice(1); // 排除原始点
|
||||
|
}; |
||||
|
|
||||
|
// 4. 生成所有标记点
|
||||
|
const positions = [ |
||||
|
...generateRotatedPoints(circle1.center, basePoint1.geometry.coordinates), |
||||
|
...generateRotatedPoints(circle2.center, basePoint2.geometry.coordinates), |
||||
|
turf.midpoint(center1, center2).geometry.coordinates // 连线中点
|
||||
|
]; |
||||
|
|
||||
|
const circles = []; |
||||
|
const markers = []; |
||||
|
|
||||
|
// 5. 生成标记点数据
|
||||
|
positions.forEach((coord, index) => { |
||||
|
const markerPoint = { |
||||
|
longitude: coord[0], |
||||
|
latitude: coord[1] |
||||
|
}; |
||||
|
|
||||
|
// 为中点位置添加圆形背景
|
||||
|
if (index === 6) { |
||||
|
circles.push({ |
||||
|
latitude: markerPoint.latitude, |
||||
|
longitude: markerPoint.longitude, |
||||
|
// fillColor: '#00000000',
|
||||
|
color: '#FF0000', |
||||
|
radius, |
||||
|
strokeWidth: 2 |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 添加数字标记
|
||||
|
markers.push({ |
||||
|
id: index, |
||||
|
latitude: markerPoint.latitude, |
||||
|
longitude: markerPoint.longitude, |
||||
|
iconPath: deviceIcon, |
||||
|
width: 10, |
||||
|
height: 10, |
||||
|
label: { |
||||
|
content: String(indexMap[index] + 1), |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 20, |
||||
|
textStrokeWidth: 2, |
||||
|
textStrokeColor: '#000000', |
||||
|
anchorX: -6, |
||||
|
anchorY: -12, |
||||
|
bgColor: '#00000000' |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
return { circles, markers }; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export function creatEightShaped(circleOptions1 = {}, circleOptions2 = {}, indexMap = [6, 0, 1, 3, 4, 5, 2], markerOptions = { radius: 50 }) { |
||||
|
const circle1 = _createCircle({ |
||||
|
center: { lng: circleOptions1.center[0], lat: circleOptions1.center[1] }, |
||||
|
redRadius: circleOptions1.radius, |
||||
|
radiusDiff: circleOptions1.radiusDiff |
||||
|
}); |
||||
|
const circle2 = _createCircle({ |
||||
|
center: { lng: circleOptions2.center[0], lat: circleOptions2.center[1] }, |
||||
|
redRadius: circleOptions2.radius, |
||||
|
radiusDiff: circleOptions2.radiusDiff |
||||
|
}); |
||||
|
const polygons = []; |
||||
|
|
||||
|
// 添加第一个圆的环形
|
||||
|
polygons.push({ |
||||
|
points: circle1.ring, |
||||
|
fillColor: '#FFFFFF80', |
||||
|
strokeColor: '#00000000', |
||||
|
strokeWidth: 2 |
||||
|
}); |
||||
|
|
||||
|
polygons.push({ |
||||
|
points: circle1.redCircle, |
||||
|
fillColor: '#00000000', |
||||
|
strokeColor: '#FF0000', |
||||
|
strokeWidth: 2 |
||||
|
}); |
||||
|
|
||||
|
// 添加第二个圆的环形
|
||||
|
polygons.push({ |
||||
|
points: circle2.ring, |
||||
|
fillColor: '#FFFFFF80', |
||||
|
strokeColor: '#00000000', |
||||
|
strokeWidth: 2 |
||||
|
}); |
||||
|
|
||||
|
polygons.push({ |
||||
|
points: circle2.redCircle, |
||||
|
fillColor: '#00000000', |
||||
|
strokeColor: '#FF0000', |
||||
|
strokeWidth: 2 |
||||
|
}); |
||||
|
|
||||
|
// 生成标记点和圆形标记
|
||||
|
const center1 = turf.point(circleOptions1.center); |
||||
|
const center2 = turf.point(circleOptions2.center); |
||||
|
|
||||
|
// 计算两圆心连线方位角
|
||||
|
const bearing = turf.bearing(center1, center2); |
||||
|
|
||||
|
// 生成基准交点
|
||||
|
const basePoint1 = turf.destination(center1, circleOptions1.radius, bearing, { units: 'meters' }); |
||||
|
const basePoint2 = turf.destination(center2, circleOptions2.radius, bearing + 180, { units: 'meters' }); |
||||
|
|
||||
|
// 生成旋转点集合
|
||||
|
const generateRotatedPoints = (center, baseCoord) => { |
||||
|
const points = []; |
||||
|
for(let angle = 0; angle < 360; angle += 90) { |
||||
|
const rotatedCoord = turf.transformRotate( |
||||
|
turf.point(baseCoord), |
||||
|
angle, |
||||
|
{pivot: center} |
||||
|
).geometry.coordinates; |
||||
|
points.push(rotatedCoord); |
||||
|
} |
||||
|
return points.slice(1); // 排除原始点
|
||||
|
}; |
||||
|
|
||||
|
// 生成所有标记点
|
||||
|
const positions = [ |
||||
|
...generateRotatedPoints(circleOptions1.center, basePoint1.geometry.coordinates), |
||||
|
...generateRotatedPoints(circleOptions2.center, basePoint2.geometry.coordinates), |
||||
|
turf.midpoint(center1, center2).geometry.coordinates // 连线中点
|
||||
|
]; |
||||
|
|
||||
|
const circles = []; |
||||
|
const markers = []; |
||||
|
|
||||
|
// 生成标记点数据
|
||||
|
positions.forEach((coord, index) => { |
||||
|
const markerPoint = { |
||||
|
longitude: coord[0], |
||||
|
latitude: coord[1] |
||||
|
}; |
||||
|
|
||||
|
// 为中点位置添加圆形背景
|
||||
|
if (index === 6) { |
||||
|
circles.push({ |
||||
|
latitude: markerPoint.latitude, |
||||
|
longitude: markerPoint.longitude, |
||||
|
color: '#FF0000', |
||||
|
radius: markerOptions.radius, |
||||
|
strokeWidth: 2 |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 添加数字标记
|
||||
|
markers.push({ |
||||
|
id: index, |
||||
|
latitude: markerPoint.latitude, |
||||
|
longitude: markerPoint.longitude, |
||||
|
iconPath: deviceIcon, |
||||
|
width: 1, |
||||
|
height: 1, |
||||
|
label: { |
||||
|
content: String(indexMap[index] + 1), |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 20, |
||||
|
textStrokeWidth: 2, |
||||
|
textStrokeColor: '#000000', |
||||
|
anchorX: -6, |
||||
|
anchorY: -12, |
||||
|
bgColor: '#00000000' |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
return { polygons, circles, markers }; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
// function fitView(mapContent) {
|
||||
|
// if (!this._circle1 || !this._circle2) return;
|
||||
|
//
|
||||
|
// const points = [
|
||||
|
// ...this._circle1.ring,
|
||||
|
// ...this._circle2.ring
|
||||
|
// ];
|
||||
|
//
|
||||
|
// // 计算所有点的边界
|
||||
|
// const lngs = points.map(p => p.longitude);
|
||||
|
// const lats = points.map(p => p.latitude);
|
||||
|
// const minLng = Math.min(...lngs);
|
||||
|
// const maxLng = Math.max(...lngs);
|
||||
|
// const minLat = Math.min(...lats);
|
||||
|
// const maxLat = Math.max(...lats);
|
||||
|
//
|
||||
|
// // 设置地图视野
|
||||
|
// this._map.includePoints({
|
||||
|
// points: [
|
||||
|
// { latitude: minLat, longitude: minLng },
|
||||
|
// { latitude: maxLat, longitude: maxLng }
|
||||
|
// ],
|
||||
|
// padding: [50]
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
// 创建八字飞行图形
|
||||
|
// export function EightShapedFlight() {
|
||||
|
// // 创建八字形
|
||||
|
//
|
||||
|
// // 调整视野以适应两个圆形
|
||||
|
//
|
||||
|
//
|
||||
|
// // 销毁实例
|
||||
|
// destroy() {
|
||||
|
// this._circle1 = null;
|
||||
|
// this._circle2 = null;
|
||||
|
// }
|
||||
|
// }
|
||||
|
|
||||
|
|
||||
|
///////////////
|
||||
|
|
||||
|
/** |
||||
|
* 将二维坐标数组转换为轨迹对象，包含自动生成的时间戳和航向角 |
||||
|
* @param {Array} coords 二维数组，格式如 [[lng, lat], ...] |
||||
|
* @param {Object} [options] 配置选项 |
||||
|
* @param {Date|string} [options.startTime] 起始时间(默认当前时间) |
||||
|
* @param {number} [options.interval=1000] 时间间隔(毫秒) |
||||
|
* @param {boolean} [options.calculateYaw=true] 是否计算航向角 |
||||
|
* @returns {Object} 轨迹对象 {id: string, points: Array} |
||||
|
*/ |
||||
|
export function convertToTrajectory(coords, options = {}) { |
||||
|
// 参数处理
|
||||
|
const { |
||||
|
startTime = new Date(), |
||||
|
interval = 1000, |
||||
|
calculateYaw = true |
||||
|
} = options; |
||||
|
|
||||
|
const startTimestamp = new Date(startTime).getTime(); |
||||
|
const id = `trajectory_${startTimestamp}`; |
||||
|
|
||||
|
// 核心转换逻辑
|
||||
|
const points = coords.map(([lng, lat], index, arr) => { |
||||
|
// 生成时间戳
|
||||
|
const timestamp = startTimestamp + index * interval; |
||||
|
|
||||
|
// 航向角计算
|
||||
|
let yaw = 0; |
||||
|
if (calculateYaw && index > 0) { |
||||
|
const prev = arr[index - 1]; |
||||
|
yaw = calculateBearing(prev, [lng, lat]); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
lng, |
||||
|
lat, |
||||
|
timestamp, |
||||
|
yaw: parseFloat(yaw.toFixed(2)), |
||||
|
alt: index * 2 // 示例高度值
|
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
// 闭环处理（首尾坐标相同时）
|
||||
|
// if (calculateYaw && points.length > 1) {
|
||||
|
// const first = points[0];
|
||||
|
// const last = points[points.length - 1];
|
||||
|
// if (first.lng === last.lng && first.lat === last.lat) {
|
||||
|
// last.yaw = calculateBearing(points[points.length - 2], first);
|
||||
|
// }
|
||||
|
// }
|
||||
|
|
||||
|
return { id, points }; |
||||
|
} |
||||
|
|
||||
|
// 航向角计算函数（单位：度）
|
||||
|
export function calculateBearing(prev, current) { |
||||
|
// console.log(prev, current);
|
||||
|
const [lng1, lat1] = prev; |
||||
|
const [lng2, lat2] = current; |
||||
|
|
||||
|
const dLon = (lng2 - lng1) * Math.PI / 180; |
||||
|
const y = Math.sin(dLon) * Math.cos(lat2 * Math.PI / 180); |
||||
|
const x = Math.cos(lat1 * Math.PI / 180) * Math.sin(lat2 * Math.PI / 180) - |
||||
|
Math.sin(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.cos(dLon); |
||||
|
|
||||
|
let angle = Math.atan2(y, x); |
||||
|
return ((angle * 180 / Math.PI) + 360) % 360; // 转换为0-360度
|
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '享飞低空培训', |
||||
|
enablePullDownRefresh: false, |
||||
|
disableScroll: false, |
||||
|
}) |
||||
@ -0,0 +1,350 @@ |
|||||
|
<script setup> |
||||
|
// import { ref } from 'vue'; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
import TabBar from '../../components/TabBar.vue'; |
||||
|
// import { useTaskStore } from "../../stores"; |
||||
|
// import { storeToRefs } from "pinia"; |
||||
|
import { reactive } from "vue"; |
||||
|
import { RectRight } from '@nutui/icons-vue-taro' |
||||
|
import list from '../../assets/list.png'; |
||||
|
import flower from '../../assets/flower.png'; |
||||
|
|
||||
|
Taro.hideHomeButton(); |
||||
|
|
||||
|
// const { getTaskList } = useTaskStore(); |
||||
|
// const { taskList } = storeToRefs(useTaskStore()); |
||||
|
|
||||
|
// const taskProgressList = ref([]) |
||||
|
|
||||
|
// const { params } = Taro.useRouter(); |
||||
|
|
||||
|
// if (params?.navToRecord) { |
||||
|
// // setTimeout(() => { |
||||
|
// onNavTo(); |
||||
|
// // }, 3000) |
||||
|
// } |
||||
|
|
||||
|
// onUnmounted(() => { |
||||
|
// // taskList.value = []; |
||||
|
// }); |
||||
|
|
||||
|
function onNavToFlight() { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/flight/index', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function onNavToRoutePlan() { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/routePlan/index', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function onNavToTrip() { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/returnTrip/index', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function onNavToEvaluation() { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/evaluation/index', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const state = reactive({ |
||||
|
msg: '错误提示', |
||||
|
type: 'warn', |
||||
|
show: false, |
||||
|
cover: true, |
||||
|
// title: '', |
||||
|
// bottom: '', |
||||
|
center: true, |
||||
|
}); |
||||
|
|
||||
|
function openToast(type = 'warn', msg = '错误提示') { |
||||
|
state.msg = msg; |
||||
|
state.type = type; |
||||
|
state.show = true; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="container" > |
||||
|
<div class="item record-box-1" @click="onNavToFlight"> |
||||
|
<div class="nav-box"> |
||||
|
<div class="text">实践飞行</div> |
||||
|
<div class="right"> |
||||
|
<RectRight /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<image :src="list" class="image" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item record-box-2" @click="onNavToRoutePlan"> |
||||
|
<div class="nav-box"> |
||||
|
<div class="text">航线规划</div> |
||||
|
<div class="right"> |
||||
|
<RectRight /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<image :src="list" class="image" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item record-box-3" @click="onNavToTrip"> |
||||
|
<div class="nav-box"> |
||||
|
<div class="text">应急返航</div> |
||||
|
<div class="right"> |
||||
|
<RectRight /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<image :src="list" class="image" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item record-box-4" @click="onNavToEvaluation"> |
||||
|
<div class="nav-box"> |
||||
|
<div class="text">自我讲评</div> |
||||
|
<div class="right"> |
||||
|
<RectRight /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<image :src="list" class="image" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tip-content"> |
||||
|
<div class="tip-center"> |
||||
|
<div class="round"> |
||||
|
<div class="round2"></div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="text">本程序可查看学习过程、实操记录。</div> |
||||
|
<div class="text">每天给自己一个评价，进步更快哦 ～。</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tmp"></div> |
||||
|
</div> |
||||
|
|
||||
|
<image :src="flower" class="flower" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tip-center" v-if="false"> |
||||
|
<div style="display: flex;"> |
||||
|
<div>1、</div><div style="flex: 1">本程序可查看学习过程、实操记录。</div> |
||||
|
</div> |
||||
|
<div style="display: flex;margin-top: 10px;"> |
||||
|
<div>2、</div><div style="flex: 1">每天给自己一个评价，进步更快哦 ～。</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bottom-text"> |
||||
|
低空培训系统技术支持 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<TabBar /> |
||||
|
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" :cover="state.cover" :duration="2000" /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
padding: 0 40px; |
||||
|
box-sizing: border-box; |
||||
|
overflow: hidden; |
||||
|
background-color: #f2fbff; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
height: 100%; |
||||
|
|
||||
|
:global { |
||||
|
.container { |
||||
|
margin-top: 80px; |
||||
|
//margin-bottom: 40px; |
||||
|
//text-align: center; |
||||
|
//font-weight: bold; |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
gap: 40px; |
||||
|
//align-items: center; |
||||
|
//justify-content: center; |
||||
|
|
||||
|
.item { |
||||
|
flex: 1; |
||||
|
box-sizing: border-box; |
||||
|
//object-fit: cover; |
||||
|
//width: 300px; |
||||
|
//height: 360px; |
||||
|
height: 300px; |
||||
|
//border: 6px solid #000; |
||||
|
border-radius: 20px; |
||||
|
//display: flex; |
||||
|
//align-items: center; |
||||
|
//justify-content: center; |
||||
|
position: relative; |
||||
|
font-size: 40px; |
||||
|
color: white; |
||||
|
padding: 40px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
//&:active { |
||||
|
// background-color: rgba(204, 204, 204, 0.4); |
||||
|
//} |
||||
|
|
||||
|
&.record-box-1 { |
||||
|
box-shadow: 5px 5px 10px 5px rgba(0, 140, 112, 0.3); |
||||
|
background: linear-gradient(218.31deg, rgb(0, 195, 156) 3.576%,rgb(0, 140, 112) 94.437%); |
||||
|
|
||||
|
.nut-icon { |
||||
|
color: rgb(0, 195, 156); |
||||
|
font-size: 20px; |
||||
|
//width: 10px; |
||||
|
//height: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.record-box-2 { |
||||
|
box-shadow: 5px 5px 10px 5px rgba(0, 89, 195, 0.3); |
||||
|
background: linear-gradient(218.31deg, rgb(66, 152, 255) 3.576%,rgb(0, 89, 195) 94.437%); |
||||
|
|
||||
|
.nut-icon { |
||||
|
color: rgb(66, 152, 255); |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.record-box-3 { |
||||
|
box-shadow: 5px 5px 10px 5px rgba(195, 107, 0, 0.3); |
||||
|
background: linear-gradient(218.31deg, rgb(255, 167, 66) 3.576%, rgb(195, 117, 0) 94.437%); |
||||
|
|
||||
|
.nut-icon { |
||||
|
color: rgb(255, 173, 66); |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.record-box-4 { |
||||
|
box-shadow: 5px 5px 10px 5px rgba(0, 195, 159, 0.3); |
||||
|
background: linear-gradient(218.31deg, rgb(66, 233, 255) 3.576%, rgb(0, 189, 195) 94.437%); |
||||
|
|
||||
|
.nut-icon { |
||||
|
color: rgb(66, 227, 255); |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nav-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.right { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
background-color: white; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.image { |
||||
|
position: absolute; |
||||
|
bottom: -20px; |
||||
|
right: -20px; |
||||
|
width: 190px; |
||||
|
height: 180px; |
||||
|
object-fit: cover; |
||||
|
//filter: grayscale(50%); |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tab-content { |
||||
|
padding: 40px 10px; |
||||
|
|
||||
|
.at-input { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
margin-top: 60px; |
||||
|
} |
||||
|
|
||||
|
.tip-content { |
||||
|
margin-top: 80px; |
||||
|
position: relative; |
||||
|
|
||||
|
.tip-center { |
||||
|
overflow: hidden; |
||||
|
//position: absolute; |
||||
|
//left: 0; |
||||
|
//right: 0; |
||||
|
//bottom: 740px; |
||||
|
//text-align: center; |
||||
|
position: relative; |
||||
|
border-radius: 20px; |
||||
|
box-shadow: 4px 4px 12px 0px rgba(255, 237, 189, 0.4); |
||||
|
background: linear-gradient(180.00deg, rgb(255, 242, 206),rgb(255, 235, 181) 100%); |
||||
|
color: rgb(204, 119, 0); |
||||
|
padding: 40px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
//justify-content: ; |
||||
|
//padding: 0 40px; |
||||
|
|
||||
|
.round { |
||||
|
position: absolute; |
||||
|
top: -100px; |
||||
|
left: -100px; |
||||
|
overflow: hidden; |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
border-radius: 50%; |
||||
|
background: rgb(252, 228, 166); |
||||
|
z-index: 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
z-index: 1; |
||||
|
|
||||
|
.text + .text { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tmp { |
||||
|
width: 286px; |
||||
|
//height: 300px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.flower { |
||||
|
position: absolute; |
||||
|
bottom: -20px; |
||||
|
right: -20px; |
||||
|
width: 286px; |
||||
|
height: 320px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom-text { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 240px; |
||||
|
text-align: center; |
||||
|
font-size: 28px; |
||||
|
//color: #058a00; |
||||
|
//font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,7 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '登录', |
||||
|
// navigationStyle: "custom",
|
||||
|
// navigationBarTextStyle:'white',
|
||||
|
enablePullDownRefresh: false, |
||||
|
disableScroll: false, |
||||
|
}) |
||||
@ -0,0 +1,279 @@ |
|||||
|
<script setup> |
||||
|
import { reactive, ref, watch } from 'vue'; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
import { useAuthStore } from '../../stores'; |
||||
|
import * as auth from '../../utils/auth'; |
||||
|
import { Loading } from '@nutui/icons-vue-taro' |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
|
||||
|
const { loginWithPassword, wechatAuth, updateStudentAvatar, updateMemberAvatar } = useAuthStore(); |
||||
|
const { userInfo, isStudent } = storeToRefs(useAuthStore()); |
||||
|
|
||||
|
const showLoginDialog = ref(false); |
||||
|
const pageLoading = ref(false); |
||||
|
// const loggedInLoading = ref(false); |
||||
|
const aUrl = ref(''); |
||||
|
|
||||
|
function updataAvatar() { |
||||
|
if (!userInfo.value?.id) return; |
||||
|
if (!aUrl.value) return; |
||||
|
if (isStudent.value) { |
||||
|
updateStudentAvatar({ avatar: aUrl.value, id: userInfo.value?.id }).then(() => { |
||||
|
userInfo.value.avatar = aUrl.value; |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}); |
||||
|
} else { |
||||
|
updateMemberAvatar({ avatar: aUrl.value, id: userInfo.value?.id }).then(() => { |
||||
|
userInfo.value.avatar = aUrl.value; |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function wxCodeLogin(loadRes = {}) { |
||||
|
Taro.login({ |
||||
|
success: (loginRes) => { |
||||
|
wechatAuth({ code: loginRes.code, sceneId: loadRes.scene }).then(() => { |
||||
|
if (auth.getToken()) { |
||||
|
updataAvatar(); |
||||
|
showLoginDialog.value = false; |
||||
|
Taro.reLaunch({ url: '/pages/home/index' }); |
||||
|
// openToast('success', `登录成功`); |
||||
|
return; |
||||
|
} |
||||
|
if (loadRes.scene && (`${loadRes.scene}`.length > 6)) { |
||||
|
showLoginDialog.value = true; |
||||
|
return; |
||||
|
} |
||||
|
if (!loadRes.scene && showLoginDialog.value) { |
||||
|
openToast('warn', '未查询到用户，请先在地面站绑定'); |
||||
|
// showLoginDialog.value = true; |
||||
|
return; |
||||
|
} |
||||
|
console.log('userInfo', userInfo.value); |
||||
|
}).catch(({ msg }) => { |
||||
|
// console.log('eee', err); |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
pageLoading.value = false; |
||||
|
}); |
||||
|
}, |
||||
|
fail: () => { |
||||
|
pageLoading.value = false; |
||||
|
openToast('warn', '未得到微信授权Code'); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
Taro.useLoad((loadRes) => { |
||||
|
pageLoading.value = true; |
||||
|
console.log('app load', loadRes); |
||||
|
wxCodeLogin(loadRes); |
||||
|
}); |
||||
|
|
||||
|
function onGetAvatar() { |
||||
|
Taro.getUserProfile({ |
||||
|
desc: '用于完善用户资料', |
||||
|
success: (userProfile) => { |
||||
|
const { userInfo: { avatarUrl = '' } = {} } = userProfile || {}; |
||||
|
console.log('avatarUrl', avatarUrl); |
||||
|
aUrl.value = avatarUrl; |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function onLoggedIn() { |
||||
|
pageLoading.value = true; |
||||
|
wxCodeLogin(); |
||||
|
onGetAvatar(); |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
|
||||
|
const formRef = ref(); |
||||
|
const INIT_FORM_DATA = { |
||||
|
phone: '', |
||||
|
password: '', |
||||
|
}; |
||||
|
const formData = ref({ ...INIT_FORM_DATA }); |
||||
|
|
||||
|
const submit = () => { |
||||
|
onGetAvatar(); |
||||
|
formRef.value?.validate().then(({ valid }) => { |
||||
|
if (!valid) return; |
||||
|
loading.value = true; |
||||
|
loginWithPassword(formData.value).then(() => { |
||||
|
updataAvatar(); |
||||
|
Taro.reLaunch({ url: '/pages/own/index' }); |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// Promise 异步校验 |
||||
|
const asyncValidator = (val) => { |
||||
|
const phoneReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/; |
||||
|
if (!val) { |
||||
|
return Promise.reject('请输入手机号') |
||||
|
} else if (!phoneReg.test(val)) { |
||||
|
return Promise.reject('手机号格式不正确') |
||||
|
} else { |
||||
|
return Promise.resolve(''); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const rules = ref({ |
||||
|
phone: [ |
||||
|
{ required: true, message: '请填写手机号' }, |
||||
|
{ validator: asyncValidator, message: '电话格式不正确' } |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, message: '请填写密码' }, |
||||
|
], |
||||
|
}) |
||||
|
|
||||
|
const state = reactive({ |
||||
|
msg: '错误提示', |
||||
|
type: 'warn', |
||||
|
show: false, |
||||
|
cover: true, |
||||
|
// title: '', |
||||
|
// bottom: '', |
||||
|
center: true, |
||||
|
}); |
||||
|
|
||||
|
function openToast(type = 'warn', msg = '错误提示') { |
||||
|
state.msg = msg; |
||||
|
state.type = type; |
||||
|
state.show = true; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="title">低空培训系统</div> |
||||
|
<nut-form |
||||
|
ref="formRef" |
||||
|
label-position="top" |
||||
|
star-position="left" |
||||
|
:model-value="formData" |
||||
|
:rules="rules"> |
||||
|
<nut-form-item label="手机号" prop="phone"> |
||||
|
<nut-input v-model="formData.phone" placeholder="请输入手机号" type="number" /> |
||||
|
</nut-form-item> |
||||
|
<nut-form-item label="密码" prop="password"> |
||||
|
<nut-input v-model="formData.password" placeholder="请输入密码" type="password" /> |
||||
|
</nut-form-item> |
||||
|
<nut-form-item> |
||||
|
<nut-button :loading="loading" type="info" size="large" @click="submit">登录</nut-button> |
||||
|
</nut-form-item> |
||||
|
</nut-form> |
||||
|
|
||||
|
<div class="bottom-end">低空培训系统技术支持</div> |
||||
|
</div> |
||||
|
|
||||
|
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" :cover="state.cover" :duration="2000" /> |
||||
|
<nut-dialog |
||||
|
title="提示" |
||||
|
v-model:visible="showLoginDialog" |
||||
|
:close-on-click-overlay="false"> |
||||
|
<div style="text-align: center;font-size: 18px;color: black;">请先在地面站绑定</div> |
||||
|
<template #footer> |
||||
|
<nut-button type="info" @click="onLoggedIn" :loading="loggedInLoading">已绑定</nut-button> |
||||
|
</template> |
||||
|
</nut-dialog> |
||||
|
<nut-overlay v-model:visible="pageLoading" :overlay-class="s.overlay" :close-on-click-overlay="false"> |
||||
|
<div class="loading-wrapper"> |
||||
|
<Loading style="color: white;font-size: 34px;" /> |
||||
|
</div> |
||||
|
</nut-overlay> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
// padding: 20px; |
||||
|
// box-sizing: border-box; |
||||
|
background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.overlay { |
||||
|
:global { |
||||
|
.loading-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
max-width: 90%; |
||||
|
// padding: 40px 20px; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
// flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
:global { |
||||
|
.title { |
||||
|
position: absolute; |
||||
|
top: 250px; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
font-size: 48px; |
||||
|
text-align: center; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.nut-form { |
||||
|
// margin-top: 200px; |
||||
|
border-radius: 16px; |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
transform: translateY(-20%); |
||||
|
// margin-top: 200px; |
||||
|
|
||||
|
.nut-cell-group__wrap { |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.nut-button { |
||||
|
// width: 100%; |
||||
|
border-radius: 16px; |
||||
|
// height: 50px; |
||||
|
// line-height: 50px; |
||||
|
// font-size: 18px; |
||||
|
// font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom-end { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 60px; |
||||
|
text-align: center; |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,3 @@ |
|||||
|
export default { |
||||
|
navigationBarTitleText: '我的' |
||||
|
} |
||||
@ -0,0 +1,171 @@ |
|||||
|
<script setup> |
||||
|
import TabBar from "../../components/TabBar.vue"; |
||||
|
import { ref } from "vue"; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
import { storeToRefs } from "pinia"; |
||||
|
import { useAuthStore } from "../../stores"; |
||||
|
import * as UserInfo from "../../utils/userInfo"; |
||||
|
import * as Auth from "../../utils/auth"; |
||||
|
import FormData from '../../core/FormData'; |
||||
|
|
||||
|
Taro.hideHomeButton(); |
||||
|
|
||||
|
const { userInfo, isStudent, isTeacher } = storeToRefs(useAuthStore()); |
||||
|
const { updateStudentAvatar, updateMemberAvatar, uploadFile } = useAuthStore(); |
||||
|
|
||||
|
const isOpened = ref(false); |
||||
|
const avatarUrl = ref(''); |
||||
|
|
||||
|
const weightClasses = { |
||||
|
small: "小型", |
||||
|
medium: "中型", |
||||
|
large: "大型", |
||||
|
} |
||||
|
|
||||
|
function handleConfirm() { |
||||
|
UserInfo.remove(); |
||||
|
Auth.removeToken(); |
||||
|
userInfo.value = {}; |
||||
|
Taro.reLaunch({ url: '/pages/login/index' }) |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
function onChooseAvatar(e) { |
||||
|
loading.value = true; |
||||
|
const { avatarUrl: url = '' } = e.detail || {}; |
||||
|
// console.log('avatarUrl', e); |
||||
|
const form = new FormData(); |
||||
|
form.appendFile('file', url); |
||||
|
form.append('type', 'avatar'); |
||||
|
const fileData = form.getData(); |
||||
|
uploadFile(fileData.buffer, { header: { 'content-type': `${fileData.contentType}` } }).then(({ data }) => { |
||||
|
avatarUrl.value = data.fileUrl; |
||||
|
form.clearCacheData(); |
||||
|
if (isStudent.value) { |
||||
|
console.log('isS'); |
||||
|
updateStudentAvatar({ avatar: avatarUrl.value, id: userInfo.value?.id }).then(() => { |
||||
|
userInfo.value.avatar = avatarUrl.value; |
||||
|
Taro.showToast({ title: '头像更新成功', icon: 'success' }); |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) Taro.showToast({ title: msg, icon: 'error' }); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
} else { |
||||
|
console.log('isM'); |
||||
|
updateMemberAvatar({ avatar: avatarUrl.value, id: userInfo.value?.id }).then(() => { |
||||
|
userInfo.value.avatar = avatarUrl.value; |
||||
|
// showAvatarDialog.value = false; |
||||
|
Taro.showToast({ title: '头像更新成功', icon: 'success' }); |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) Taro.showToast({ title: msg, icon: 'error' }); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
} |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) Taro.showToast({ title: msg, icon: 'error' }); |
||||
|
}); |
||||
|
|
||||
|
// avatarUrl.value = url; |
||||
|
// if (!avatarUrl.value) { |
||||
|
// loading.value = false; |
||||
|
// return; |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
function onCancel(e) { |
||||
|
console.log('aaa', e); |
||||
|
} |
||||
|
|
||||
|
Taro.onError((e) => { |
||||
|
console.log('onError', e); |
||||
|
}) |
||||
|
|
||||
|
Taro.useError((e) => { |
||||
|
console.log('useError', e); |
||||
|
}) |
||||
|
|
||||
|
Taro.useDidShow((e) => { |
||||
|
console.log('useDidShow', e); |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="top"> |
||||
|
<nut-avatar size="large"><img :src="userInfo?.avatar" /></nut-avatar> |
||||
|
<div class="name">{{ userInfo?.name || '-' }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="isStudent"> |
||||
|
<nut-cell title="班级" :desc="userInfo?.class?.name || '-'"></nut-cell> |
||||
|
<nut-cell title="考试等级" :desc="userInfo?.licenseGrade?.name || '-'"></nut-cell> |
||||
|
<nut-cell title="无人机重量级" :desc="weightClasses[userInfo?.weightClass] || '-'"></nut-cell> |
||||
|
</div> |
||||
|
|
||||
|
<div v-else> |
||||
|
<nut-cell v-if="userInfo?.courses" title="教学内容" :desc="userInfo?.courses || '-'"></nut-cell> |
||||
|
<nut-cell v-if="userInfo?.class" title="负责班级" :desc="userInfo?.class?.name || '-'"></nut-cell> |
||||
|
<nut-cell v-if="userInfo?.organization" title="机构名称" :desc="userInfo?.organization?.name || '-'"></nut-cell> |
||||
|
</div> |
||||
|
|
||||
|
<nut-button shape="square" class="btn" type="info" size="large" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" :loading="loading" @error="onCancel">更换头像</nut-button> |
||||
|
<nut-button shape="square" type="primary" v-if="!isStudent && !isTeacher" class="btn" size="large" @click="isOpened = true">退出</nut-button> |
||||
|
</div> |
||||
|
|
||||
|
<nut-dialog |
||||
|
title="退出提示" |
||||
|
content="确定退出当前账号吗？" |
||||
|
v-model:visible="isOpened" |
||||
|
@ok="handleConfirm" |
||||
|
/> |
||||
|
|
||||
|
<TabBar /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
box-sizing: content-box; |
||||
|
overflow: hidden; |
||||
|
background-color: #f2fbff !important; |
||||
|
// background-color: #f2fbff; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
box-sizing: content-box; |
||||
|
background-color: white; |
||||
|
margin: 30px; |
||||
|
height: 100%; |
||||
|
padding: 30px; |
||||
|
border-radius: 30px; |
||||
|
|
||||
|
:global { |
||||
|
.top { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 30px; |
||||
|
|
||||
|
.name { |
||||
|
margin-right: 50px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//.at-list__item-extra { |
||||
|
// max-width: 380px; |
||||
|
// |
||||
|
// .item-extra__info { |
||||
|
// white-space: unset; |
||||
|
// } |
||||
|
//} |
||||
|
|
||||
|
.btn { |
||||
|
margin-top: 40px; |
||||
|
border-radius: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,6 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '应急返航', |
||||
|
disableSwipeBack: true, |
||||
|
enablePullDownRefresh: true, |
||||
|
backgroundTextStyle: 'dark', |
||||
|
}) |
||||
@ -0,0 +1,215 @@ |
|||||
|
<script setup> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
import { storeToRefs } from "pinia"; |
||||
|
import { useReturnTripStore } from "../../stores"; |
||||
|
|
||||
|
const { getReturnTripList } = useReturnTripStore(); |
||||
|
const { returnTripList, returnTripExtra, returnTripQueries } = storeToRefs(useReturnTripStore()); |
||||
|
|
||||
|
const state = reactive({ |
||||
|
msg: '错误提示', |
||||
|
type: 'warn', |
||||
|
show: false, |
||||
|
cover: true, |
||||
|
center: true, |
||||
|
}); |
||||
|
|
||||
|
function openToast(type = 'warn', msg = '错误提示') { |
||||
|
state.msg = msg; |
||||
|
state.type = type; |
||||
|
state.show = true; |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const isRefreshing = ref(false); |
||||
|
|
||||
|
function onRefresh() { |
||||
|
isRefreshing.value = true; |
||||
|
returnTripQueries.value.pageNum = 1; |
||||
|
getReturnTripList().then(() => { |
||||
|
Taro.stopPullDownRefresh(); |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
isRefreshing.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onLoadMore() { |
||||
|
if (loading.value) return; |
||||
|
if (returnTripList.value.length >= returnTripExtra.value.total) return; |
||||
|
loading.value = true; |
||||
|
returnTripQueries.value.pageNum += 1; |
||||
|
getReturnTripList().catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onNavTo(id) { |
||||
|
Taro.navigateTo({ |
||||
|
url: `/pages/returnTripMap/index?id=${id}`, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
Taro.usePullDownRefresh(() => { |
||||
|
onRefresh(); |
||||
|
}); |
||||
|
|
||||
|
Taro.useReachBottom(() => { |
||||
|
onLoadMore(); |
||||
|
}); |
||||
|
|
||||
|
Taro.useDidShow(() => { |
||||
|
getReturnTripList().catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="list"> |
||||
|
<div class="item" v-for="item in returnTripList" :key="item.recordId" :class="{ 'is-pass': item.isPass }"> |
||||
|
<div class="title"> |
||||
|
<span>{{ item.studentName || '-' }}</span> |
||||
|
<nut-button size="mini" type="info" @click="onNavTo(item.recordId)">回放</nut-button> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="info-row"> |
||||
|
<span>班级：{{ item.className || '-' }}</span> |
||||
|
<span>无人机：{{ item.droneName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>教师：{{ item.teacherName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>开始时间：{{ item.startTime || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>结束时间：{{ item.endTime || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span><nut-tag :type="item.isPass ? 'success' : 'danger'">{{ item.isPass ? '通过' : '未通过' }}</nut-tag></span> |
||||
|
<span><nut-tag type="warning" v-if="item.inProgress">进行中</nut-tag></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nut-empty v-if="!loading && !returnTripList.length" description="暂无数据" /> |
||||
|
<nut-infiniteloading |
||||
|
v-if="returnTripList.length" |
||||
|
load-txt="加载中..." |
||||
|
load-more-txt="没有更多了" |
||||
|
:has-more="returnTripList.length < returnTripExtra.total" |
||||
|
@load-more="onLoadMore" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" :cover="state.cover" :duration="2000" /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
padding: 20px 0; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #eaeaea; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
:global { |
||||
|
.list { |
||||
|
flex: 1; |
||||
|
overflow: auto; |
||||
|
padding: 0 20px; |
||||
|
|
||||
|
.item { |
||||
|
background-color: white; |
||||
|
border-radius: 16px; |
||||
|
padding: 28px; |
||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); |
||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 6px; |
||||
|
height: 100%; |
||||
|
background-color: #4CAF50; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
&:not(.is-pass)::before { |
||||
|
background-color: #FF5252; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
transform: translateY(-4px); |
||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
& + .item { |
||||
|
margin-top: 28px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 38px; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 24px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
color: #2c3e50; |
||||
|
|
||||
|
.class-name { |
||||
|
font-size: 32px; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
color: #666; |
||||
|
font-size: 28px; |
||||
|
line-height: 1.6; |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 16px; |
||||
|
padding-right: 12px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
color: #34495e; |
||||
|
&:first-child { |
||||
|
color: #7f8c8d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '应急返航回放', |
||||
|
navigationStyle: 'default', |
||||
|
pageOrientation: 'landscape' |
||||
|
}) |
||||
@ -0,0 +1,116 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, ref, onUnmounted } from "vue"; |
||||
|
import * as Taro from "@tarojs/taro"; |
||||
|
import TrackPlayback from '../../components/TrackPlayback.vue'; |
||||
|
import RealTimeData from '../../components/RealTimeData.vue'; |
||||
|
import { initReturnTripConfig } from './utils'; |
||||
|
|
||||
|
// 地图中心点位置（Home点） |
||||
|
const centerPoint = ref({ |
||||
|
lat: 26.647661, |
||||
|
lng: 106.630154 |
||||
|
}); |
||||
|
|
||||
|
// 地图上下文 |
||||
|
let mapContext = null; |
||||
|
|
||||
|
// 多边形配置 |
||||
|
const polygons = ref([]); |
||||
|
// 标记点配置 |
||||
|
const markerPoints = ref([]); |
||||
|
// 飞行轨迹配置 |
||||
|
const polyline = ref([]); |
||||
|
|
||||
|
// 初始化地图 |
||||
|
onMounted(() => { |
||||
|
mapContext = Taro.createMapContext('map'); |
||||
|
initReturnTrip(); |
||||
|
}); |
||||
|
|
||||
|
// 初始化返航界面 |
||||
|
function initReturnTrip() { |
||||
|
if (!mapContext) return; |
||||
|
// 获取返航界面配置 |
||||
|
const config = initReturnTripConfig(centerPoint.value); |
||||
|
markerPoints.value = config.markers; |
||||
|
polygons.value = config.polygons; |
||||
|
|
||||
|
// 设置地图视野 |
||||
|
mapContext.includePoints({ |
||||
|
points: [{ |
||||
|
longitude: centerPoint.value.lng, |
||||
|
latitude: centerPoint.value.lat, |
||||
|
}], |
||||
|
padding: [50, 50, 110, 50], |
||||
|
success: (res) => { |
||||
|
console.log('地图视野设置成功', res); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error('地图视野设置失败', err); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// console.log(markers); |
||||
|
} |
||||
|
|
||||
|
// 组件卸载时清理资源 |
||||
|
onUnmounted(() => { |
||||
|
// deviceCruise.destroy(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view :class="s.root"> |
||||
|
<view class="mapBox"> |
||||
|
<map |
||||
|
id="map" |
||||
|
:longitude="centerPoint.lng" |
||||
|
:latitude="centerPoint.lat" |
||||
|
:polygons="polygons" |
||||
|
:markers="markerPoints" |
||||
|
:polyline="polyline" |
||||
|
:enable-satellite="true" |
||||
|
/> |
||||
|
</view> |
||||
|
<TrackPlayback /> |
||||
|
<RealTimeData class="real-time-data" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0 !important; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
:global { |
||||
|
.mapBox { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
#map { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.real-time-data { |
||||
|
//position: absolute; |
||||
|
//left: 20px; |
||||
|
//top: 20px; |
||||
|
//z-index: 2; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,96 @@ |
|||||
|
import * as turf from '@turf/turf'; |
||||
|
import homeBg from '../../assets/home-marker.png'; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
|
||||
|
const deviceInfo = Taro.getDeviceInfo() |
||||
|
|
||||
|
// 创建同心圆多边形点集
|
||||
|
export function createCircle({ center, innerRadius, outerRadius }) { |
||||
|
// 配置圆形生成选项
|
||||
|
const options = { steps: 64, units: 'meters' }; // 增加steps以使圆形更平滑
|
||||
|
|
||||
|
// 生成外圆和内圆
|
||||
|
const outerCircle = turf.circle([center.lng, center.lat], outerRadius, options); |
||||
|
const innerCircle = turf.circle([center.lng, center.lat], innerRadius, options); |
||||
|
|
||||
|
// 创建环形（外圆 - 内圆）
|
||||
|
const featureCollection = turf.featureCollection([outerCircle, innerCircle]); |
||||
|
const ring = turf.difference(featureCollection); |
||||
|
|
||||
|
// 转换坐标格式为小程序地图组件要求的格式
|
||||
|
const convertCoordinates = (coords) => { |
||||
|
return coords.map(coord => ({ |
||||
|
longitude: coord[0], |
||||
|
latitude: coord[1] |
||||
|
})); |
||||
|
}; |
||||
|
|
||||
|
// 获取环形的坐标点集
|
||||
|
const ringCoords = ring.geometry.coordinates; |
||||
|
|
||||
|
// 返回所需的点集
|
||||
|
return { |
||||
|
ring: [...convertCoordinates(ringCoords[0]), ...convertCoordinates(ringCoords[1])], |
||||
|
center: { |
||||
|
latitude: center.lat, |
||||
|
longitude: center.lng |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 初始化返航界面配置
|
||||
|
export function initReturnTripConfig(centerPoint, innerRadius = 50, outerRadius = 100) { |
||||
|
const markerOptions = { |
||||
|
...(`${deviceInfo?.system || ''}`.includes('iOS') ? { |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
// anchorX: -5,
|
||||
|
anchorY: -16, |
||||
|
textAlign: 'center', |
||||
|
} : { |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
anchorX: -4, |
||||
|
anchorY: -9, |
||||
|
}) |
||||
|
} |
||||
|
const homePoint = [centerPoint.lng, centerPoint.lat]; |
||||
|
|
||||
|
// 添加Home点标记
|
||||
|
const homeMarker = [{ |
||||
|
id: 1, |
||||
|
longitude: homePoint[0], |
||||
|
latitude: homePoint[1], |
||||
|
iconPath: homeBg, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
anchor: { x: 0.5, y: 0.5 }, |
||||
|
label: { |
||||
|
...markerOptions, |
||||
|
content: 'H' |
||||
|
} |
||||
|
}]; |
||||
|
|
||||
|
// 生成同心圆点集
|
||||
|
const circlePoints = createCircle({ |
||||
|
center: centerPoint, |
||||
|
innerRadius, // 内圆半径（米）
|
||||
|
outerRadius // 外圆半径（米）
|
||||
|
}); |
||||
|
|
||||
|
// 设置多边形配置
|
||||
|
const polygons = [ |
||||
|
{ |
||||
|
points: circlePoints.ring, |
||||
|
fillColor: '#FFFFFF80', |
||||
|
strokeColor: '#00000000', |
||||
|
strokeWidth: 2 |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
return { |
||||
|
markers: homeMarker, |
||||
|
polygons, |
||||
|
// homePoint: { latitude: homePoint[1], longitude: homePoint[0] }
|
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '航线规划', |
||||
|
disableSwipeBack: true, |
||||
|
enablePullDownRefresh: true, |
||||
|
backgroundTextStyle: 'dark', |
||||
|
}) |
||||
@ -0,0 +1,221 @@ |
|||||
|
<script setup> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import Taro from "@tarojs/taro"; |
||||
|
import { storeToRefs } from "pinia"; |
||||
|
import { useRoutePlanStore } from "../../stores"; |
||||
|
|
||||
|
const { getRoutePlanList } = useRoutePlanStore(); |
||||
|
const { routePlanList, routePlanExtra, routePlanQueries } = storeToRefs(useRoutePlanStore()); |
||||
|
|
||||
|
const state = reactive({ |
||||
|
msg: '错误提示', |
||||
|
type: 'warn', |
||||
|
show: false, |
||||
|
cover: true, |
||||
|
center: true, |
||||
|
}); |
||||
|
|
||||
|
function openToast(type = 'warn', msg = '错误提示') { |
||||
|
state.msg = msg; |
||||
|
state.type = type; |
||||
|
state.show = true; |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const isRefreshing = ref(false); |
||||
|
|
||||
|
function onRefresh() { |
||||
|
isRefreshing.value = true; |
||||
|
routePlanQueries.value.pageNum = 1; |
||||
|
getRoutePlanList().then(() => { |
||||
|
Taro.stopPullDownRefresh(); |
||||
|
}).catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
isRefreshing.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onLoadMore() { |
||||
|
if (loading.value) return; |
||||
|
if (routePlanList.value.length >= routePlanExtra.value.total) return; |
||||
|
loading.value = true; |
||||
|
routePlanQueries.value.pageNum += 1; |
||||
|
getRoutePlanList().catch(({ msg }) => { |
||||
|
if (msg) openToast('warn', msg); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onNavTo(id) { |
||||
|
Taro.navigateTo({ |
||||
|
url: `/pages/routePlanMap/index?id=${id}`, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
Taro.usePullDownRefresh(() => { |
||||
|
onRefresh(); |
||||
|
}); |
||||
|
|
||||
|
Taro.useReachBottom(() => { |
||||
|
onLoadMore(); |
||||
|
}); |
||||
|
|
||||
|
Taro.useDidShow(() => { |
||||
|
getRoutePlanList().catch(err => { |
||||
|
openToast('warn', err?.description); |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="list"> |
||||
|
<div class="item" v-for="item in routePlanList" :key="item.answerId" :class="{ 'is-pass': item.isPass }"> |
||||
|
<div class="title"> |
||||
|
<span>{{ item.studentName || '-' }}</span> |
||||
|
<nut-button size="mini" type="info" @click="onNavTo(item.answerId)">查看</nut-button> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="info-row"> |
||||
|
<span>题目：{{ item.questionName || '-' }}</span> |
||||
|
<span>模板：{{ item.templateName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>教师：{{ item.teacherName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>开始时间：{{ item.beginTime || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span>结束时间：{{ item.finishTime || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<span><nut-tag :type="item.isPass ? 'success' : 'danger'">{{ item.isPass ? '通过' : '未通过' }}</nut-tag></span> |
||||
|
</div> |
||||
|
<div v-if="item.errorMsg" class="error-msg">{{ item.errorMsg }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<nut-empty v-if="!loading && !routePlanList.length" description="暂无数据" /> |
||||
|
<nut-infiniteloading |
||||
|
v-if="routePlanList.length" |
||||
|
load-txt="加载中..." |
||||
|
load-more-txt="没有更多了" |
||||
|
:has-more="routePlanList.length < routePlanExtra.total" |
||||
|
@load-more="onLoadMore" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" :cover="state.cover" :duration="2000" /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
padding: 20px 0; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #eaeaea; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
:global { |
||||
|
.list { |
||||
|
flex: 1; |
||||
|
overflow: auto; |
||||
|
padding: 0 20px; |
||||
|
|
||||
|
.item { |
||||
|
background-color: white; |
||||
|
border-radius: 16px; |
||||
|
padding: 28px; |
||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); |
||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 6px; |
||||
|
height: 100%; |
||||
|
background-color: #4CAF50; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
&:not(.is-pass)::before { |
||||
|
background-color: #FF5252; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
transform: translateY(-4px); |
||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
& + .item { |
||||
|
margin-top: 28px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 38px; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 24px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
color: #2c3e50; |
||||
|
|
||||
|
.question-name { |
||||
|
font-size: 32px; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
color: #666; |
||||
|
font-size: 28px; |
||||
|
line-height: 1.6; |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 16px; |
||||
|
padding-right: 12px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
color: #34495e; |
||||
|
&:first-child { |
||||
|
color: #7f8c8d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-msg { |
||||
|
margin-top: 16px; |
||||
|
color: #ff4d4f; |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
export default { |
||||
|
navigationBarTitleText: '航线规划', |
||||
|
navigationStyle: 'default', |
||||
|
pageOrientation: 'landscape' |
||||
|
} |
||||
@ -0,0 +1,433 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, ref, computed } from "vue"; |
||||
|
import RoutePointInfo from '../../components/RoutePointInfo.vue'; |
||||
|
import ExamResult from '../../components/ExamResult.vue'; |
||||
|
import * as Taro from "@tarojs/taro"; |
||||
|
// import * as turf from '@turf/turf'; |
||||
|
import pointBg from '../../assets/point-marker.png'; |
||||
|
import homeBg from '../../assets/home-marker.png'; |
||||
|
import tmpBg from '../../assets/transparent-marker.png'; |
||||
|
import { Close, Horizontal } from '@nutui/icons-vue-taro'; |
||||
|
|
||||
|
const deviceInfo = Taro.getDeviceInfo() |
||||
|
|
||||
|
// 考题显示状态 |
||||
|
const isExamVisible = ref(false); |
||||
|
const isExamExpanded = ref(false); |
||||
|
|
||||
|
// 切换考题显示状态 |
||||
|
const toggleExam = () => { |
||||
|
isExamVisible.value = !isExamVisible.value; |
||||
|
}; |
||||
|
|
||||
|
// 在考题显示后添加展开效果 |
||||
|
// watch(() => isExamVisible.value, (newVal) => { |
||||
|
// if (newVal) { |
||||
|
// setTimeout(() => { |
||||
|
// isExamExpanded.value = true; |
||||
|
// }, 50); |
||||
|
// } else { |
||||
|
// isExamExpanded.value = false; |
||||
|
// } |
||||
|
// }); |
||||
|
|
||||
|
// 模拟考题数据 |
||||
|
const questionData = ref({ |
||||
|
imageUrl: 'https://example.com/exam-image.jpg', |
||||
|
content: `航线要求： |
||||
|
(一) 起飞点（返航点）与考试点位的相对方位由委任代表根据现场环境等情况进行决定。于起飞前规划一个等边三角形并循环执行，边长为a，航线相对地面高度为b，水平速度为c，垂直速度为d，转弯方式为停止转弯，停留时间不作要求。 |
||||
|
|
||||
|
(二) a 值建议为30米，b 值建议为30米，c 值建议为3m/s，d 值 建议为1m/s，(航线方位及各数值可由委任代表按实际情况进行调整，考题以委任代表规定数值为准)。 |
||||
|
|
||||
|
(三) 题中心为起飞点A,地面中任取，须在地图中标明，1点在A的45°，30米方位，1到2的顺向角为135°。` |
||||
|
}); |
||||
|
|
||||
|
const markerOption = computed(() => { |
||||
|
if (`${deviceInfo?.system || ''}`.includes('iOS')) { |
||||
|
return { |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
// anchorX: -5, |
||||
|
anchorY: -16, |
||||
|
textAlign: 'center', |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
anchorX: -4, |
||||
|
anchorY: -9, |
||||
|
// textAlign: 'center', |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
console.log(deviceInfo.system) |
||||
|
|
||||
|
Taro.hideHomeButton(); |
||||
|
|
||||
|
// 地图中心点位置 |
||||
|
const centerPoint = ref({ |
||||
|
lat: 39.908692, |
||||
|
lng: 116.397477 |
||||
|
}); |
||||
|
|
||||
|
// 地图上下文 |
||||
|
let mapContext = null; |
||||
|
|
||||
|
// 是否闭合航线 |
||||
|
const isClosedRoute = ref(true); |
||||
|
|
||||
|
// home点位置（起始点） |
||||
|
const homePoint = ref({ |
||||
|
latitude: 39.908692, |
||||
|
longitude: 116.397477 |
||||
|
}); |
||||
|
|
||||
|
// 航线点位数组 |
||||
|
const routePoints = ref([{ |
||||
|
latitude: 39.909192, // 点1 |
||||
|
longitude: 116.398277 |
||||
|
}, { |
||||
|
latitude: 39.909892, // 点4 |
||||
|
longitude: 116.398977 |
||||
|
}, { |
||||
|
latitude: 39.909392, // 点2 |
||||
|
longitude: 116.399477 |
||||
|
}, { |
||||
|
latitude: 39.908892, // 点3 |
||||
|
longitude: 116.399977 |
||||
|
}]); |
||||
|
|
||||
|
// 计算两点之间的距离（单位：米） |
||||
|
const calculateDistance = (point1, point2) => { |
||||
|
const R = 6371e3; // 地球半径（米） |
||||
|
const φ1 = point1.latitude * Math.PI/180; |
||||
|
const φ2 = point2.latitude * Math.PI/180; |
||||
|
const Δφ = (point2.latitude - point1.latitude) * Math.PI/180; |
||||
|
const Δλ = (point2.longitude - point1.longitude) * Math.PI/180; |
||||
|
|
||||
|
const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) + |
||||
|
Math.cos(φ1) * Math.cos(φ2) * |
||||
|
Math.sin(Δλ/2) * Math.sin(Δλ/2); |
||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); |
||||
|
|
||||
|
// 计算中点坐标 |
||||
|
const midLongitude = (point1.longitude + point2.longitude) / 2; |
||||
|
const midLatitude = (point1.latitude + point2.latitude) / 2; |
||||
|
|
||||
|
return { mid: [midLongitude, midLatitude], distance: Math.round(R * c) }; |
||||
|
}; |
||||
|
|
||||
|
// 标记点配置 |
||||
|
const markers = ref([ |
||||
|
{ |
||||
|
id: 89, |
||||
|
latitude: homePoint.value.latitude, |
||||
|
longitude: homePoint.value.longitude, |
||||
|
iconPath: homeBg, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
anchor: { x: 0.5, y: 0.5 }, |
||||
|
label: { |
||||
|
content: 'H', |
||||
|
// color: '#FFFFFF', |
||||
|
...markerOption.value, |
||||
|
// textAlign: 'center', |
||||
|
borderWidth: 1, |
||||
|
borderColor: '#000', |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
id: 1, |
||||
|
latitude: routePoints.value[0].latitude, |
||||
|
longitude: routePoints.value[0].longitude, |
||||
|
iconPath: pointBg, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
anchor: { x: 0.5, y: 0.5 }, |
||||
|
label: { |
||||
|
content: '1', |
||||
|
...markerOption.value, |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
latitude: routePoints.value[1].latitude, |
||||
|
longitude: routePoints.value[1].longitude, |
||||
|
iconPath: pointBg, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
anchor: { x: 0.5, y: 0.5 }, |
||||
|
label: { |
||||
|
content: '2', |
||||
|
...markerOption.value, |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
latitude: routePoints.value[2].latitude, |
||||
|
longitude: routePoints.value[2].longitude, |
||||
|
iconPath: pointBg, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
anchor: { x: 0.5, y: 0.5 }, |
||||
|
label: { |
||||
|
content: '3', |
||||
|
...markerOption.value, |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
latitude: routePoints.value[3].latitude, |
||||
|
longitude: routePoints.value[3].longitude, |
||||
|
iconPath: pointBg, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
anchor: { x: 0.5, y: 0.5 }, |
||||
|
label: { |
||||
|
content: '4', |
||||
|
...markerOption.value, |
||||
|
} |
||||
|
} |
||||
|
]); |
||||
|
|
||||
|
// 航线配置 |
||||
|
const polyline = computed(() => { |
||||
|
const points = [homePoint.value, ...routePoints.value]; |
||||
|
if (isClosedRoute.value) { |
||||
|
points.push({ |
||||
|
latitude: routePoints.value[0].latitude, |
||||
|
longitude: routePoints.value[0].longitude |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 计算每段航线的中点位置和距离 |
||||
|
const segments = []; |
||||
|
for (let i = 0; i < points.length - 1; i++) { |
||||
|
const tmp = calculateDistance(points[i], points[i + 1]); |
||||
|
const midPoint = { |
||||
|
latitude: tmp.mid[1], |
||||
|
longitude: tmp.mid[0], |
||||
|
}; |
||||
|
|
||||
|
// 添加距离标注marker |
||||
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties |
||||
|
markers.value.push({ |
||||
|
id: 1000 + i, |
||||
|
iconPath: tmpBg, |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
anchor: { x: 0.5, y: 0.5 }, |
||||
|
latitude: midPoint.latitude, |
||||
|
longitude: midPoint.longitude, |
||||
|
// content: `${distance}m` |
||||
|
label: { |
||||
|
content: `${tmp.distance}m`, |
||||
|
color: '#FFFFFF', |
||||
|
fontSize: 12, |
||||
|
textAlign: 'center', |
||||
|
anchorY: -9, |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return [{ |
||||
|
points, |
||||
|
color: '#1989fa', |
||||
|
width: 4, |
||||
|
}]; |
||||
|
}); |
||||
|
|
||||
|
// 初始化地图 |
||||
|
onMounted(() => { |
||||
|
mapContext = Taro.createMapContext('map'); |
||||
|
|
||||
|
// 设置地图视野 |
||||
|
mapContext.includePoints({ |
||||
|
points: routePoints.value, |
||||
|
padding: [50, 50, 110, 50], |
||||
|
success: (res) => { |
||||
|
console.log('地图视野设置成功', res); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error('地图视野设置失败', err); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
console.log(markers); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view :class="s.root"> |
||||
|
<view class="mapBox"> |
||||
|
<map |
||||
|
id="map" |
||||
|
:longitude="centerPoint.lng" |
||||
|
:latitude="centerPoint.lat" |
||||
|
:markers="markers" |
||||
|
:polyline="polyline" |
||||
|
:enable-satellite="true" |
||||
|
/> |
||||
|
</view> |
||||
|
<RoutePointInfo :pointInfo="[]" /> |
||||
|
<ExamResult :is-passed="false" /> |
||||
|
<div :class="[s.examQuestion, { 'is-expanded': isExamVisible }]" v-show="isExamVisible"> |
||||
|
<div class="title"> |
||||
|
<div class="title-content"> |
||||
|
<Horizontal /> |
||||
|
<span>考题</span> |
||||
|
</div> |
||||
|
<Close class="close-btn" @click="toggleExam" /> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="question-image" v-if="questionData.imageUrl"> |
||||
|
<img :src="questionData.imageUrl" alt="考题图片" /> |
||||
|
</div> |
||||
|
<div class="requirements" v-html="questionData.content"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div :class="s.showExamBtn" @click="toggleExam" v-show="!isExamVisible"> |
||||
|
<Horizontal /> |
||||
|
<span>显示考题</span> |
||||
|
</div> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0 !important; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
:global { |
||||
|
.mapBox { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
#map { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.examQuestion { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: 50%; |
||||
|
max-width: 400px; |
||||
|
background: rgba(0, 0, 0, 0.8); |
||||
|
backdrop-filter: blur(8px); |
||||
|
color: #fff; |
||||
|
transform: translateX(100%); |
||||
|
transition: transform 0.3s ease-in-out; |
||||
|
z-index: 100; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
&:global { |
||||
|
&.is-expanded { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.title { |
||||
|
padding: 5px; |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 2px; |
||||
|
|
||||
|
.nut-icon { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.close-btn { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
cursor: pointer; |
||||
|
padding: 2px; |
||||
|
font-size: 12px; |
||||
|
&:hover { |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
flex: 1; |
||||
|
padding: 12px; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.question-image { |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.requirements { |
||||
|
font-size: 12px; |
||||
|
line-height: 1.5; |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.showExamBtn { |
||||
|
position: fixed; |
||||
|
right: 16px; |
||||
|
bottom: 16px; |
||||
|
background: rgba(0, 0, 0, 0.8); |
||||
|
color: #fff; |
||||
|
padding: 8px 16px; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
z-index: 100; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
&:hover { |
||||
|
background: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.nut-icon { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '场地监管', |
||||
|
enablePullDownRefresh: false, |
||||
|
disableScroll: false, |
||||
|
}) |
||||
@ -0,0 +1,375 @@ |
|||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
import deviceIcon from '../../assets/deviceIcon.png' |
||||
|
import TabBar from '../../components/TabBar.vue' |
||||
|
// import { storeToRefs } from 'pinia'; |
||||
|
// import { useSupervisionStore } from '../../stores'; |
||||
|
|
||||
|
Taro.hideHomeButton(); |
||||
|
|
||||
|
// 虚拟数据 |
||||
|
const fieldList = ref([ |
||||
|
{ |
||||
|
recordId: 270424022978560, |
||||
|
studentId: 7, |
||||
|
studentName: '阿亮', |
||||
|
teacherId: 27, |
||||
|
teacherName: '侯老师', |
||||
|
droneId: 42, |
||||
|
droneSn: 'DJI-001', |
||||
|
airfield: { |
||||
|
id: 3, |
||||
|
name: '示范飞行场地2', |
||||
|
imageUrl: deviceIcon |
||||
|
}, |
||||
|
details: [ |
||||
|
{ |
||||
|
recordId: 270424022978560, |
||||
|
happen_time: '2025-03-04 11:16:47', |
||||
|
phase: '悬停', |
||||
|
audioCode: 'welcome', |
||||
|
isError: true, |
||||
|
errorDesc: '未按指定高度悬停' |
||||
|
} |
||||
|
], |
||||
|
failTimes: 1, |
||||
|
isPass: false, |
||||
|
startTime: '2025-03-05 17:19:25', |
||||
|
endTime: '2025-03-05 17:19:35', |
||||
|
inProgress: false |
||||
|
}, |
||||
|
{ |
||||
|
recordId: 270424022978561, |
||||
|
studentId: 8, |
||||
|
studentName: '小明', |
||||
|
teacherId: 28, |
||||
|
teacherName: '张老师', |
||||
|
droneId: 43, |
||||
|
droneSn: 'DJI-002', |
||||
|
airfield: { |
||||
|
id: 4, |
||||
|
name: '高级训练场', |
||||
|
imageUrl: deviceIcon |
||||
|
}, |
||||
|
details: [], |
||||
|
failTimes: 0, |
||||
|
isPass: true, |
||||
|
startTime: '2025-03-05 18:00:00', |
||||
|
endTime: '2025-03-05 18:15:00', |
||||
|
inProgress: false |
||||
|
}, |
||||
|
{ |
||||
|
recordId: 270424022978562, |
||||
|
studentId: 9, |
||||
|
studentName: '小红', |
||||
|
teacherId: 29, |
||||
|
teacherName: '王老师', |
||||
|
droneId: 44, |
||||
|
droneSn: 'DJI-003', |
||||
|
airfield: { |
||||
|
id: 5, |
||||
|
name: '初级训练场', |
||||
|
imageUrl: deviceIcon |
||||
|
}, |
||||
|
details: [ |
||||
|
{ |
||||
|
recordId: 270424022978562, |
||||
|
happen_time: '2025-03-05 19:10:30', |
||||
|
phase: '起飞', |
||||
|
audioCode: 'takeoff', |
||||
|
isError: true, |
||||
|
errorDesc: '起飞速度过快' |
||||
|
}, |
||||
|
{ |
||||
|
recordId: 270424022978562, |
||||
|
happen_time: '2025-03-05 19:12:00', |
||||
|
phase: '降落', |
||||
|
audioCode: 'landing', |
||||
|
isError: true, |
||||
|
errorDesc: '降落点偏离指定位置' |
||||
|
} |
||||
|
], |
||||
|
failTimes: 2, |
||||
|
isPass: false, |
||||
|
startTime: '2025-03-05 19:10:00', |
||||
|
endTime: '2025-03-05 19:15:00', |
||||
|
inProgress: true |
||||
|
} |
||||
|
]); |
||||
|
|
||||
|
// 暂时注释掉原有的API调用代码 |
||||
|
// const { getFieldList } = useSupervisionStore(); |
||||
|
// const { fieldList } = storeToRefs(useSupervisionStore()); |
||||
|
|
||||
|
Taro.useDidShow(() => { |
||||
|
// 使用虚拟数据，暂时注释掉API调用 |
||||
|
// getFieldList().catch(err => { |
||||
|
// Taro.showToast({ |
||||
|
// title: err?.description || '获取场地列表失败', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// }); |
||||
|
}); |
||||
|
|
||||
|
function onRefresh() { |
||||
|
// 使用虚拟数据，暂时注释掉API调用 |
||||
|
// return getFieldList().finally(() => { |
||||
|
// Taro.stopPullDownRefresh(); |
||||
|
// }); |
||||
|
Taro.stopPullDownRefresh(); |
||||
|
} |
||||
|
|
||||
|
Taro.usePullDownRefresh(() => { |
||||
|
onRefresh(); |
||||
|
}); |
||||
|
|
||||
|
function onNavTo(id) { |
||||
|
Taro.navigateTo({ |
||||
|
url: `/pages/supervisionMap/index?id=${id}`, |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="field-list"> |
||||
|
<div class="field-card" v-for="item in fieldList" :key="item.recordId" @click="onNavTo(item.id)"> |
||||
|
<div class="field-image"> |
||||
|
<img :src="item.airfield.imageUrl" alt="场地图片" /> |
||||
|
<div class="status-badge" :class="{ 'in-progress': item.inProgress, 'passed': item.isPass, 'failed': !item.isPass && !item.inProgress }"> |
||||
|
{{ item.inProgress ? '进行中' : (item.isPass ? '通过' : '未通过') }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="field-info"> |
||||
|
<div class="student-info"> |
||||
|
<div class="student-name">{{ item.studentName }}</div> |
||||
|
<div class="teacher-name">指导教师：{{ item.teacherName }}</div> |
||||
|
</div> |
||||
|
<div class="field-name"> |
||||
|
<span class="icon">📍</span> |
||||
|
{{ item.airfield.name }} |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span class="label">飞机编号：</span> |
||||
|
<span class="value">{{ item.droneSn || '暂无' }}</span> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span class="label">开始时间：</span> |
||||
|
<span class="value">{{ item.startTime }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<TabBar /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f2fbff; |
||||
|
padding: 16px; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
:global { |
||||
|
.field-list { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
||||
|
gap: 16px; |
||||
|
padding: 0; |
||||
|
|
||||
|
.field-card { |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 12px; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
transform: translateY(-4px); |
||||
|
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16); |
||||
|
} |
||||
|
|
||||
|
.field-image { |
||||
|
width: 100%; |
||||
|
height: 160px; |
||||
|
overflow: hidden; |
||||
|
background-color: #f0f0f0; |
||||
|
position: relative; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.status-badge { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
right: 12px; |
||||
|
padding: 4px 12px; |
||||
|
border-radius: 12px; |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
|
||||
|
&.in-progress { |
||||
|
background-color: #1890ff; |
||||
|
} |
||||
|
|
||||
|
&.passed { |
||||
|
background-color: #52c41a; |
||||
|
} |
||||
|
|
||||
|
&.failed { |
||||
|
background-color: #ff4d4f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.field-info { |
||||
|
padding: 12px; |
||||
|
|
||||
|
.student-info { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8px; |
||||
|
|
||||
|
.student-name { |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
|
||||
|
.teacher-name { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
background-color: #f5f5f5; |
||||
|
padding: 2px 8px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.field-name { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
margin-bottom: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: #f8f8f8; |
||||
|
padding: 6px 8px; |
||||
|
border-radius: 6px; |
||||
|
|
||||
|
.icon { |
||||
|
margin-right: 4px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 6px; |
||||
|
font-size: 13px; |
||||
|
line-height: 1.4; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
color: #666; |
||||
|
margin-right: 8px; |
||||
|
flex-shrink: 0; |
||||
|
min-width: 70px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.basic-info { |
||||
|
background-color: #f8f8f8; |
||||
|
border-radius: 8px; |
||||
|
padding: 12px; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 6px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
color: #666; |
||||
|
font-size: 13px; |
||||
|
margin-right: 8px; |
||||
|
flex-shrink: 0; |
||||
|
min-width: 70px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
color: #1a1a1a; |
||||
|
font-size: 13px; |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-info { |
||||
|
background-color: #fff2f0; |
||||
|
border-radius: 8px; |
||||
|
padding: 12px; |
||||
|
|
||||
|
.error-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #ff4d4f; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.error-list { |
||||
|
.error-item { |
||||
|
padding: 8px; |
||||
|
background-color: rgba(255, 77, 79, 0.1); |
||||
|
border-radius: 4px; |
||||
|
margin-bottom: 8px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.error-phase { |
||||
|
font-size: 13px; |
||||
|
font-weight: 500; |
||||
|
color: #ff4d4f; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.error-desc { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.error-time { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '监管详情', |
||||
|
navigationStyle: 'default', |
||||
|
pageOrientation: 'landscape' |
||||
|
}) |
||||
@ -0,0 +1,289 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, ref, onUnmounted } from "vue"; |
||||
|
import * as Taro from "@tarojs/taro"; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
import deviceCruise from '../../core/deviceCruise'; |
||||
|
// import TrackPlayback from '../../components/TrackPlayback.vue'; |
||||
|
import SupervisionData from '../../components/SupervisionData.vue'; |
||||
|
import SupervisionSideData from '../../components/SupervisionSideData.vue'; |
||||
|
import trackData from '../flightMap/track.json'; |
||||
|
import { convertToTrajectory, creatEightShaped } from '../flightMap/utils'; |
||||
|
|
||||
|
// 地图中心点位置 |
||||
|
const centerPoint = ref({ |
||||
|
lat: 39.908692, |
||||
|
lng: 116.397477 |
||||
|
}); |
||||
|
|
||||
|
// 地图上下文 |
||||
|
let mapContext = null; |
||||
|
|
||||
|
const show = ref(true); |
||||
|
|
||||
|
// 初始化地图 |
||||
|
onMounted(() => { |
||||
|
mapContext = Taro.createMapContext('map'); |
||||
|
show.value = true; |
||||
|
initMap(); |
||||
|
initEightShaped(); |
||||
|
}); |
||||
|
|
||||
|
// 多边形配置 |
||||
|
const polygons = ref([]); |
||||
|
// 圆形标记配置 |
||||
|
const circles = ref([]); |
||||
|
// 标记点配置 |
||||
|
const markerPoints = ref([]); |
||||
|
|
||||
|
// 轨迹数据转换 |
||||
|
const trajectory = convertToTrajectory(trackData, { |
||||
|
startTime: "2025-03-14T08:00:00Z", |
||||
|
interval: 1000 // 1秒间隔 |
||||
|
}); |
||||
|
|
||||
|
// 地图旋转角度 |
||||
|
const bearing = ref(0); |
||||
|
|
||||
|
// 飞行轨迹配置 |
||||
|
const polyline = ref([{ |
||||
|
points: trackData.map(coord => ({ |
||||
|
latitude: coord[1], |
||||
|
longitude: coord[0] |
||||
|
})), |
||||
|
color: '#008000', |
||||
|
width: 4, |
||||
|
arrowLine: true |
||||
|
}]); |
||||
|
|
||||
|
// 错误点位标记 |
||||
|
// const errorPoints = ref([{ |
||||
|
// latitude: 39.908692, |
||||
|
// longitude: 116.397477, |
||||
|
// iconPath: '../../assets/red-marker.svg', |
||||
|
// width: 30, |
||||
|
// height: 30, |
||||
|
// callout: { |
||||
|
// content: '错误点位', |
||||
|
// color: '#FF0000', |
||||
|
// fontSize: 14, |
||||
|
// borderRadius: 4, |
||||
|
// bgColor: '#FFFFFF', |
||||
|
// padding: 8, |
||||
|
// display: 'ALWAYS' |
||||
|
// } |
||||
|
// }]); |
||||
|
|
||||
|
// 初始化地图 |
||||
|
function initMap() { |
||||
|
if (!mapContext) return; |
||||
|
// |
||||
|
} |
||||
|
|
||||
|
// 地图旋转角度 |
||||
|
// const bearing = ref(0); |
||||
|
|
||||
|
// 初始化八字飞行 |
||||
|
function initEightShaped() { |
||||
|
if (!mapContext) return; |
||||
|
|
||||
|
const center1 = [116.397477, 39.908692]; |
||||
|
const center2 = [116.399477, 39.910692]; |
||||
|
|
||||
|
const mid = turf.midpoint(center1, center2).geometry.coordinates; |
||||
|
console.log('mid', mid); |
||||
|
|
||||
|
centerPoint.value = { |
||||
|
lat: mid[1], |
||||
|
lng: mid[0] |
||||
|
}; |
||||
|
// 计算两个圆心之间的方位角并转换为地图旋转角度 |
||||
|
let angle = turf.bearing(center1, center2); |
||||
|
|
||||
|
// 计算与正东方向的夹角 |
||||
|
angle = ((90 - angle) % 360 + 360) % 360; |
||||
|
|
||||
|
const { polygons: shapePolygons, circles: shapeCircles, markers: shapeMarkers } = creatEightShaped({ |
||||
|
center: center1, |
||||
|
radius: 105, |
||||
|
radiusDiff: 35, |
||||
|
centerWidth: 2, |
||||
|
}, { |
||||
|
center: center2, |
||||
|
radius: 105, |
||||
|
radiusDiff: 35, |
||||
|
centerWidth: 2, |
||||
|
}, [6, 0, 1, 3, 4, 5, 2], { radius: 50 }); |
||||
|
|
||||
|
// 更新地图显示数据 |
||||
|
polygons.value = shapePolygons; |
||||
|
markerPoints.value = shapeMarkers; |
||||
|
circles.value = shapeCircles; |
||||
|
|
||||
|
// 设置地图视野 |
||||
|
mapContext.includePoints({ |
||||
|
points: [ |
||||
|
{ latitude: center1[1], longitude: center1[0] }, |
||||
|
{ latitude: center2[1], longitude: center2[0] } |
||||
|
], |
||||
|
padding: [50, 50, 110, 50], |
||||
|
success: (res) => { |
||||
|
setTimeout(() => { |
||||
|
// 调整偏移量使八字飞行路径保持垂直显示 |
||||
|
bearing.value = angle; |
||||
|
// console.log('angle', bearing.value); |
||||
|
}, 5000); |
||||
|
// bearing.value = angle.toFixed(2) - 85; |
||||
|
console.log('地图视野设置成功', res); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error('地图视野设置失败', err); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 组件卸载时清理资源 |
||||
|
onUnmounted(() => { |
||||
|
if (deviceCruise) { |
||||
|
deviceCruise.destroy(); |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view :class="s.root"> |
||||
|
<view class="mapBox"> |
||||
|
<map |
||||
|
id="map" |
||||
|
:longitude="centerPoint.lng" |
||||
|
:latitude="centerPoint.lat" |
||||
|
:markers="markerPoints" |
||||
|
:polygons="polygons" |
||||
|
:circles="circles" |
||||
|
:polyline="polyline" |
||||
|
:enable-rotate="true" |
||||
|
:rotate="bearing" |
||||
|
:enable-satellite="true" |
||||
|
/> |
||||
|
<view v-if="show" class="exam-result-modal"> |
||||
|
<view class="modal-content"> |
||||
|
<view class="close-btn" @tap="show = false">×</view> |
||||
|
<view class="result-status" :class="{ 'pass': true }"> |
||||
|
通过 |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="label">姓名：</text> |
||||
|
<text class="value">张三</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="label">飞机编号：</text> |
||||
|
<text class="value">UAV-001</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<SupervisionData class="real-time-data" /> |
||||
|
<SupervisionSideData /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.root { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
:global { |
||||
|
.mapBox { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
#map { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.exam-result-modal { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 1000; |
||||
|
|
||||
|
.modal-content { |
||||
|
background-color: rgba(0, 0, 0, 0.8); |
||||
|
padding: 20px; |
||||
|
border-radius: 12px; |
||||
|
min-width: 280px; |
||||
|
position: relative; |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
||||
|
|
||||
|
.close-btn { |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 10px; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
line-height: 24px; |
||||
|
text-align: center; |
||||
|
font-size: 20px; |
||||
|
color: #999; |
||||
|
cursor: pointer; |
||||
|
border-radius: 50%; |
||||
|
transition: all 0.3s; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #f5f5f5; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.result-status { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
margin-bottom: 16px; |
||||
|
color: #ff4d4f; |
||||
|
|
||||
|
&.pass { |
||||
|
color: #52c41a; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
margin: 8px 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.label { |
||||
|
color: #838383; |
||||
|
margin-right: 8px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
color: #ffffff; |
||||
|
font-weight: 500; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.real-time-data { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,14 @@ |
|||||
|
/** |
||||
|
* stores |
||||
|
*/ |
||||
|
import { createPinia } from 'pinia'; |
||||
|
|
||||
|
const store = createPinia(); |
||||
|
|
||||
|
export default store; |
||||
|
export * from './modules/authStore'; |
||||
|
export * from './modules/flightStore'; |
||||
|
export * from './modules/routePlanStore'; |
||||
|
export * from './modules/returnTripStore'; |
||||
|
export * from './modules/evaluationStore'; |
||||
|
|
||||
@ -0,0 +1,138 @@ |
|||||
|
/** |
||||
|
* authStore |
||||
|
*/ |
||||
|
import { ref, computed } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '../../utils/http'; |
||||
|
import * as helpers from '../../utils/helpers'; |
||||
|
import * as UserInfo from '../../utils/userInfo'; |
||||
|
import * as auth from '../../utils/auth'; |
||||
|
import * as urls from '../../config/urls'; |
||||
|
|
||||
|
export const useAuthStore = defineStore('auth', () => { |
||||
|
// state
|
||||
|
const userInfo = ref(UserInfo.get()); |
||||
|
|
||||
|
const checkRole = (roleCode) => computed(() => { |
||||
|
if (!userInfo.value?.roles) return false; |
||||
|
return userInfo.value.roles.find(({ code }) => code === roleCode); |
||||
|
}); |
||||
|
|
||||
|
const isSuperAdmin = checkRole('super_admin'); |
||||
|
const isOrgAdmin = checkRole('org_admin'); |
||||
|
const isTeacherAdmin = checkRole('teacher_admin'); |
||||
|
const isEduAdmin = checkRole('edu_admin'); |
||||
|
const isTeacher = checkRole('teacher'); |
||||
|
const isStudent = checkRole('student'); |
||||
|
|
||||
|
// actions
|
||||
|
function loginWithPassword(formData = {}) { |
||||
|
const requestDate = helpers.pick(formData, [ |
||||
|
'password', |
||||
|
'phone', |
||||
|
]); |
||||
|
|
||||
|
return http.post(urls.LOGIN_WITH_PASSWORD, requestDate, { |
||||
|
withToken: false |
||||
|
}).then(({ data: { data } = {} }) => { |
||||
|
// const { data = {} } = data;
|
||||
|
// 获取信息
|
||||
|
console.log('loginWithPassword', data); |
||||
|
|
||||
|
const { token: accessToken, user } = data; |
||||
|
if (accessToken) { |
||||
|
auth.saveToken(accessToken); |
||||
|
} |
||||
|
// 更新信息
|
||||
|
const newUserInfo = { |
||||
|
// ...userInfo.value,
|
||||
|
...(user || {}), |
||||
|
}; |
||||
|
userInfo.value = { ...newUserInfo }; |
||||
|
// // 保存信息
|
||||
|
UserInfo.save(newUserInfo); |
||||
|
|
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function wechatAuth({ code, sceneId } = {}) { |
||||
|
return http.post(urls.WECHAT_AUTH_URL, { |
||||
|
code, |
||||
|
sceneId |
||||
|
}, { |
||||
|
withToken: false |
||||
|
}).then(({ data: { data } = {} }) => { |
||||
|
console.log('wechatAuth', data); |
||||
|
const { token: accessToken = '', student = {}, user = {} } = data || {}; |
||||
|
if (accessToken) { |
||||
|
auth.saveToken(accessToken); |
||||
|
// 更新信息
|
||||
|
const newUserInfo = { |
||||
|
// ...userInfo.value,
|
||||
|
...(user || {}), |
||||
|
...(student || {}), |
||||
|
}; |
||||
|
userInfo.value = { ...newUserInfo }; |
||||
|
// // 保存信息
|
||||
|
UserInfo.save(newUserInfo); |
||||
|
} |
||||
|
|
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getWechatUserInfo({ code, iv, encryptedData } = {}) { |
||||
|
return http.post(urls.GET_WECHAT_USERINFO, { |
||||
|
code, |
||||
|
iv, |
||||
|
encryptedData, |
||||
|
}).then(({ data: { data } = {} }) => { |
||||
|
console.log('wechatuserInfo', data); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function updateStudentAvatar(formData = {}) { |
||||
|
const requestData = helpers.pick(formData, [ |
||||
|
'id', |
||||
|
'avatar', |
||||
|
]); |
||||
|
return http.put(urls.UPDATE_STUDENT(requestData.id), requestData).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function updateMemberAvatar(formData = {}) { |
||||
|
const requestData = helpers.pick(formData, [ |
||||
|
'id', |
||||
|
'avatar', |
||||
|
]); |
||||
|
return http.put(urls.UPDATE_MEMBER(requestData.id), requestData).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function uploadFile(formData, { header = {} } = {}) { |
||||
|
return http.post(urls.UPLOAD, formData, { header }).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
userInfo, |
||||
|
loginWithPassword, |
||||
|
isSuperAdmin, |
||||
|
isOrgAdmin, |
||||
|
isTeacherAdmin, |
||||
|
isEduAdmin, |
||||
|
isTeacher, |
||||
|
isStudent, |
||||
|
wechatAuth, |
||||
|
updateStudentAvatar, |
||||
|
updateMemberAvatar, |
||||
|
getWechatUserInfo, |
||||
|
uploadFile |
||||
|
}; |
||||
|
}); |
||||
|
export default {}; |
||||
@ -0,0 +1,61 @@ |
|||||
|
/** |
||||
|
* evaluationStore |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '../../utils/http'; |
||||
|
import * as urls from '../../config/urls'; |
||||
|
|
||||
|
export const useEvaluationStore = defineStore('evaluation', () => { |
||||
|
// state
|
||||
|
const evaluationList = ref([]); |
||||
|
const evaluationExtra = ref({ total: null }); |
||||
|
const evaluationQueries = ref({ pageNum: 1, pageSize: 10 }); |
||||
|
|
||||
|
// actions
|
||||
|
function getEvaluationList(params = {}) { |
||||
|
const queryParams = { ...evaluationQueries.value, ...params }; |
||||
|
return http.get(urls.GET_EVALUATION_LIST, { params: queryParams }).then(({ data: { data } = {} }) => { |
||||
|
const { records: list = [], total = 0 } = data; |
||||
|
evaluationList.value = list || []; |
||||
|
evaluationExtra.value = { ...evaluationExtra.value, total }; |
||||
|
evaluationQueries.value = { ...evaluationQueries.value, ...queryParams }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function createEvaluation(params) { |
||||
|
return http.post(urls.CREATE_EVALUATION, params).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function updateEvaluation(params) { |
||||
|
return http.put(urls.UPDATE_EVALUATION, params).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getEvaluationDetail(id) { |
||||
|
return http.get(urls.GET_EVALUATION_DETAIL(id)).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function replyEvaluation(evaluationId, content) { |
||||
|
return http.post(urls.REPLY_EVALUATION, { evaluationId, content }).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
evaluationList, |
||||
|
evaluationExtra, |
||||
|
evaluationQueries, |
||||
|
getEvaluationList, |
||||
|
createEvaluation, |
||||
|
updateEvaluation, |
||||
|
getEvaluationDetail, |
||||
|
replyEvaluation |
||||
|
}; |
||||
|
}); |
||||
@ -0,0 +1,49 @@ |
|||||
|
/** |
||||
|
* flightStore |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '../../utils/http'; |
||||
|
import * as urls from '../../config/urls'; |
||||
|
|
||||
|
export const useFlightStore = defineStore('flight', () => { |
||||
|
// state
|
||||
|
const flightList = ref([]); |
||||
|
const flightExtra = ref({ total: null }); |
||||
|
const flightQueries = ref({ pageNum: 1, pageSize: 10 }); |
||||
|
|
||||
|
// actions
|
||||
|
function getFlightList(params = {}) { |
||||
|
const queryParams = { ...flightQueries.value, ...params }; |
||||
|
return http.get(urls.GET_FLIGHT_LIST, { params: queryParams }).then(({ data: { data } = {} }) => { |
||||
|
const { records: list = [], total = 0 } = data; |
||||
|
flightList.value = list || []; |
||||
|
flightExtra.value = { ...flightExtra.value, total }; |
||||
|
flightQueries.value = { ...flightQueries.value, ...queryParams }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getFlightDetail(id) { |
||||
|
return http.get(urls.GET_FLIGHT_DETAIL(id)).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getFlightTracks(id) { |
||||
|
return http.get(urls.GET_FLIGHT_TRACKS(id)).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
return { |
||||
|
flightList, |
||||
|
flightExtra, |
||||
|
flightQueries, |
||||
|
getFlightList, |
||||
|
getFlightDetail, |
||||
|
getFlightTracks |
||||
|
}; |
||||
|
}); |
||||
@ -0,0 +1,40 @@ |
|||||
|
/** |
||||
|
* returnTripStore |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '../../utils/http'; |
||||
|
import * as urls from '../../config/urls'; |
||||
|
|
||||
|
export const useReturnTripStore = defineStore('returnTrip', () => { |
||||
|
// state
|
||||
|
const returnTripList = ref([]); |
||||
|
const returnTripExtra = ref({ total: null }); |
||||
|
const returnTripQueries = ref({ pageNum: 1, pageSize: 10 }); |
||||
|
|
||||
|
// actions
|
||||
|
function getReturnTripList(params = {}) { |
||||
|
const queryParams = { ...returnTripQueries.value, ...params }; |
||||
|
return http.get(urls.GET_RETURN_TRIP_LIST, { params: queryParams }).then(({ data: { data } = {} }) => { |
||||
|
const { records: list = [], total = 0 } = data; |
||||
|
returnTripList.value = list || []; |
||||
|
returnTripExtra.value = { ...returnTripExtra.value, total }; |
||||
|
returnTripQueries.value = { ...returnTripQueries.value, ...queryParams }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getReturnTripDetail(id) { |
||||
|
return http.get(urls.GET_RETURN_TRIP_DETAIL(id)).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
returnTripList, |
||||
|
returnTripExtra, |
||||
|
returnTripQueries, |
||||
|
getReturnTripList, |
||||
|
getReturnTripDetail |
||||
|
}; |
||||
|
}); |
||||
@ -0,0 +1,40 @@ |
|||||
|
/** |
||||
|
* routePlanStore |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '../../utils/http'; |
||||
|
import * as urls from '../../config/urls'; |
||||
|
|
||||
|
export const useRoutePlanStore = defineStore('routePlan', () => { |
||||
|
// state
|
||||
|
const routePlanList = ref([]); |
||||
|
const routePlanExtra = ref({ total: null }); |
||||
|
const routePlanQueries = ref({ pageNum: 1, pageSize: 10 }); |
||||
|
|
||||
|
// actions
|
||||
|
function getRoutePlanList(params = {}) { |
||||
|
const queryParams = { ...routePlanQueries.value, ...params }; |
||||
|
return http.get(urls.GET_ROUTE_PLAN_LIST, { params: queryParams }).then(({ data: { data } = {} }) => { |
||||
|
const { records: list = [], total = 0 } = data; |
||||
|
routePlanList.value = list || []; |
||||
|
routePlanExtra.value = { ...routePlanExtra.value, total }; |
||||
|
routePlanQueries.value = { ...routePlanQueries.value, ...queryParams }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getRoutePlanDetail(id) { |
||||
|
return http.get(urls.GET_ROUTE_PLAN_DETAIL(id)).then(({ data }) => { |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
routePlanList, |
||||
|
routePlanExtra, |
||||
|
routePlanQueries, |
||||
|
getRoutePlanList, |
||||
|
getRoutePlanDetail |
||||
|
}; |
||||
|
}); |
||||
@ -0,0 +1,51 @@ |
|||||
|
/** |
||||
|
* supervisionStore |
||||
|
* 场地监管相关接口 |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import * as urls from '../../config/urls'; |
||||
|
import http from '../../utils/http'; |
||||
|
|
||||
|
export const useSupervisionStore = defineStore('supervision', () => { |
||||
|
const fieldList = ref([]); |
||||
|
|
||||
|
const flightQueries = ref({ pageNum: 1, pageSize: 99999, inProgress: true }); |
||||
|
|
||||
|
// actions
|
||||
|
function getFieldList() { |
||||
|
return http.get(urls.GET_FLIGHT_LIST, { params: flightQueries }).then(({ data: { data } = {} }) => { |
||||
|
const { records: list = [], total = 0 } = data; |
||||
|
|
||||
|
// 获取所有记录的详情信息
|
||||
|
const detailPromises = list.map(record => { |
||||
|
return http.get(urls.GET_FLIGHT_DETAIL(record.id)).then(({ data }) => { |
||||
|
return { ...record, ...data }; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// 使用Promise.all并行处理所有详情请求
|
||||
|
return Promise.all(detailPromises).then(detailedList => { |
||||
|
fieldList.value = detailedList; |
||||
|
return { ...data, records: detailedList }; |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// function getFieldDetail(id) {
|
||||
|
// return http.get(urls.GET_FLIGHT_DETAIL(id)).then(({ data }) => {
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
// function getFlightTracks(id) {
|
||||
|
// return http.get(urls.GET_FLIGHT_TRACKS(id)).then(({ data }) => {
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
return { |
||||
|
fieldList, |
||||
|
getFieldList, |
||||
|
}; |
||||
|
}); |
||||
@ -0,0 +1,34 @@ |
|||||
|
/** |
||||
|
* token信息存取 |
||||
|
*/ |
||||
|
import { setStorageSync, getStorageSync, removeStorageSync } from "@tarojs/taro"; |
||||
|
|
||||
|
export function saveToken(accessToken) { |
||||
|
try { |
||||
|
setStorageSync('token', accessToken) |
||||
|
} catch (e) { |
||||
|
// Do something when catch error
|
||||
|
console.log('e', e); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function getToken() { |
||||
|
let token; |
||||
|
try { |
||||
|
token = getStorageSync('token'); |
||||
|
} catch (e) { |
||||
|
// Do something when catch error
|
||||
|
console.log('e', e); |
||||
|
} |
||||
|
return token; |
||||
|
} |
||||
|
|
||||
|
export function removeToken() { |
||||
|
try { |
||||
|
removeStorageSync('token') |
||||
|
} catch (e) { |
||||
|
// Do something when catch error
|
||||
|
console.log('e', e); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,6 @@ |
|||||
|
/** |
||||
|
* 事件总线（用于跨组件通信，一般用于非父子组件） |
||||
|
*/ |
||||
|
// import mitt from 'mitt';
|
||||
|
|
||||
|
// export default mitt();
|
||||
@ -0,0 +1,210 @@ |
|||||
|
/** |
||||
|
* 辅助函数 |
||||
|
*/ |
||||
|
import dayjs from 'dayjs'; |
||||
|
|
||||
|
/** |
||||
|
* 等待异步结果 |
||||
|
* @param checker 检测函数，返回值为truthy时表示得到想要的结果，否则反之 |
||||
|
* @param timeout 指定时间内没有得到想要的结果则超时 |
||||
|
*/ |
||||
|
export function until(checker = () => true, timeout = 2000) { |
||||
|
return new Promise((resolve) => { |
||||
|
let pollingTimer = null; |
||||
|
|
||||
|
const timeoutTimer = setTimeout(() => { |
||||
|
clearInterval(pollingTimer); |
||||
|
resolve(false); |
||||
|
}, timeout); |
||||
|
|
||||
|
pollingTimer = setInterval(() => { |
||||
|
const result = checker(); |
||||
|
if (result) { |
||||
|
clearTimeout(timeoutTimer); |
||||
|
clearInterval(pollingTimer); |
||||
|
resolve(result); |
||||
|
} |
||||
|
}, 10); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据restful的uri构建实际url |
||||
|
* @param uri uri模版 |
||||
|
* @param argv 插入到uri中的参数列表，按顺序插入 |
||||
|
* @returns url |
||||
|
*/ |
||||
|
export function buildURL(uri, ...argv) { |
||||
|
return uri.replace(/{\w+}|:[a-zA-Z]+/g, () => { |
||||
|
const res = argv.shift(); |
||||
|
if (res === undefined) { |
||||
|
throw new Error('URI 参数不足'); |
||||
|
} |
||||
|
return res; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 选取原object指定属性，构成新的object |
||||
|
* @param originObject |
||||
|
* @param pickKeys |
||||
|
*/ |
||||
|
export function pick(originObject, pickKeys = []) { |
||||
|
const newObject = {}; |
||||
|
pickKeys.forEach((key) => { |
||||
|
if (Object.prototype.hasOwnProperty.call(originObject, key)) { |
||||
|
newObject[key] = originObject[key]; |
||||
|
} |
||||
|
}); |
||||
|
return newObject; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新target对象的键值，使用source对象里的数据 |
||||
|
* @param target |
||||
|
* @param source |
||||
|
*/ |
||||
|
export function update(target, source) { |
||||
|
const result = { ...target }; |
||||
|
Object.keys(target).forEach((key) => { |
||||
|
if (Object.prototype.hasOwnProperty.call(source, key)) { |
||||
|
result[key] = source[key]; |
||||
|
} |
||||
|
}); |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将对象的部分key重命名 |
||||
|
* @param originObject 原始对象（也可以是相同结构的对象构成的数组） |
||||
|
* @param keysMapping 新keys映射（如{ name: 'username', sex: 'gender' }，表示把原始对象中的name重命名为username、把sex重命名为gender，原始对象其他key不变） |
||||
|
* @returns {{}|*} 新对象 |
||||
|
*/ |
||||
|
export function renameKeys(originObject, keysMapping = {}) { |
||||
|
if (!Array.isArray(originObject)) { |
||||
|
const kvList = Object.keys(originObject).map((key) => { |
||||
|
const newKey = keysMapping[key] || key; |
||||
|
return { [newKey]: originObject[key] }; |
||||
|
}); |
||||
|
return Object.assign({}, ...kvList); |
||||
|
} |
||||
|
return originObject.map((obj) => renameKeys(obj, keysMapping)); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 随机数 |
||||
|
*/ |
||||
|
export function rand(min, max, fraction = 0) { |
||||
|
const res = (Math.random() * ((max - min) + 1)) + min; |
||||
|
return res.toFixed(fraction) - 0; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将input当着数字处理，若不是数字则返回代替字符 |
||||
|
* @param input |
||||
|
* @param substitution |
||||
|
* @returns {string|number} |
||||
|
*/ |
||||
|
export function numeric(input, substitution = '-') { |
||||
|
const type = typeof input; |
||||
|
if (type !== 'number' && type !== 'string') return substitution; |
||||
|
|
||||
|
const output = Number(input); |
||||
|
return !Number.isNaN(output) ? output : substitution; |
||||
|
} |
||||
|
|
||||
|
// 保留小数位（是整数则不保留）
|
||||
|
export const toFixed = (num, digits = 2) => (Number(num || 0).toFixed(digits)) - 0; |
||||
|
|
||||
|
|
||||
|
export const falsyTo = (fv, to) => (fv || fv === 0 ? fv : to); |
||||
|
/** |
||||
|
* 格式化时间戳 |
||||
|
* @param timestamp |
||||
|
* @param format |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
export function formatTime(timestamp, format = 'YYYY-MM-DD HH:mm:ss') { |
||||
|
return (timestamp || timestamp === 0) && dayjs(timestamp).isValid() ? dayjs(timestamp).format(format) : '-'; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将总秒数格式化为“x时y分z秒”形式 |
||||
|
* @param sec |
||||
|
* @param precision |
||||
|
* @param isChinese |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
export function popularTime(sec, precision = 0, isChinese = false) { |
||||
|
const { HOUR, MINUTE, SECOND } = isChinese ? { HOUR: '时', MINUTE: '分', SECOND: '秒' } : { |
||||
|
HOUR: 'h', |
||||
|
MINUTE: 'm', |
||||
|
SECOND: 's' |
||||
|
}; |
||||
|
let remainingSec = sec; |
||||
|
const hours = Math.floor(remainingSec / 3600); |
||||
|
|
||||
|
remainingSec -= hours * 3600; |
||||
|
const minutes = Math.floor(remainingSec / 60); |
||||
|
|
||||
|
remainingSec -= minutes * 60; |
||||
|
|
||||
|
return `${hours ? `${hours}${HOUR}` : ''}${minutes ? `${minutes}${MINUTE}` : ''}${remainingSec ? `${remainingSec.toFixed(precision)}${SECOND}` : ''}`; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 将秒转化为小时 |
||||
|
* @param sec |
||||
|
* @returns {number} |
||||
|
*/ |
||||
|
export function toHour(sec) { |
||||
|
return (sec / 3600).toFixed(2) - 0; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 对数组中的每个元素进行偏移计算，返回计算后的数组 |
||||
|
* @param originArray 原数组（有数字构成） |
||||
|
* @param offsetArray 偏移量数组（与原数组元素一一对应） |
||||
|
* @returns {*[]} 计算后的新数组 |
||||
|
*/ |
||||
|
export function arrOffset(originArray = [], offsetArray = []) { |
||||
|
return originArray.map((item, index) => +item + (offsetArray[index] || 0)); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 范围时间内，生成连续时间戳（按步长连续） |
||||
|
* @param startTs 起始时间戳 |
||||
|
* @param endTs 结束时间戳 |
||||
|
* @param step 步长（year | month | week | day | hour | minute | second | millisecond） |
||||
|
* @returns {*[]} 连续时间戳 |
||||
|
*/ |
||||
|
export function rangeTimestamps(startTs, endTs, step = 'day') { |
||||
|
const s = dayjs(startTs).startOf(step); |
||||
|
const eTs = dayjs(endTs).startOf(step).valueOf(); |
||||
|
const result = []; |
||||
|
for (; s.valueOf() <= eTs;) { |
||||
|
result.push(s.valueOf()); |
||||
|
s.add(1, step); |
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 计算出数组中最多的元素 |
||||
|
* @param array |
||||
|
* @returns {*} |
||||
|
*/ |
||||
|
export function mostCommonElement(array) { |
||||
|
return array.reduce((max, element) => { |
||||
|
const count = array.filter((e) => e === element).length; |
||||
|
return count > array.filter((e) => e === max).length ? element : max; |
||||
|
}, ''); |
||||
|
} |
||||
|
|
||||
|
// /**
|
||||
|
// * 将gps坐标，转换为国测局坐标
|
||||
|
// * @param point 经纬度构成的数组[经度, 纬度]
|
||||
|
// */
|
||||
|
// export function GPS2GCJ(point) {
|
||||
|
// return gcoord.transform(point, gcoord.WGS84, gcoord.GCJ02);
|
||||
|
// }
|
||||
@ -0,0 +1,209 @@ |
|||||
|
/** |
||||
|
* 请求 |
||||
|
*/ |
||||
|
import Taro, { request, downloadFile, uploadFile } from "@tarojs/taro"; |
||||
|
import { getToken } from './auth'; |
||||
|
// import { log } from "console";
|
||||
|
// import * as UserInfo from "./userInfo";
|
||||
|
// import * as Auth from "./auth";
|
||||
|
|
||||
|
// function judgmentHttpCode(res, reject, resolve) {
|
||||
|
// if (res?.statusCode !== 200 || res?.data?.code !== 200) {
|
||||
|
// reject(res?.data);
|
||||
|
// if (res?.data?.code === 40011) {
|
||||
|
// UserInfo.removeUserInfo();
|
||||
|
// Auth.removeToken();
|
||||
|
// Taro.reLaunch({ url: '/pages/login/index?refresh=true' })
|
||||
|
// }
|
||||
|
// } else {
|
||||
|
// resolve(res?.data || { code: SUCCESS_CODE, description: "无数据返回", data: {} });
|
||||
|
// }
|
||||
|
// }
|
||||
|
|
||||
|
class Http { |
||||
|
get = (url, { params = {}, header = {}, withToken = true } = {}) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
request({ |
||||
|
url, |
||||
|
header: { |
||||
|
...(withToken ? { |
||||
|
Authorization: `Bearer ${getToken()}` |
||||
|
} : {}), |
||||
|
...header, |
||||
|
}, |
||||
|
data: params, |
||||
|
method: 'GET', |
||||
|
success: (res) => { |
||||
|
const { data, statusCode } = res || {}; |
||||
|
if (statusCode !== 200) { |
||||
|
reject(data); |
||||
|
return; |
||||
|
} |
||||
|
resolve({ data }); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
reject({ msg: err.errMsg || '请求失败' }); |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
post = (url, data = {}, { header = {}, withToken = true } = {}) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
request({ |
||||
|
url, |
||||
|
header: { |
||||
|
...(withToken ? { |
||||
|
Authorization: `Bearer ${getToken()}` |
||||
|
} : {}), |
||||
|
...header, |
||||
|
}, |
||||
|
data, |
||||
|
method: 'POST', |
||||
|
success: (res) => { |
||||
|
const { data, statusCode } = res || {}; |
||||
|
if (statusCode !== 200) { |
||||
|
reject(data); |
||||
|
return; |
||||
|
} |
||||
|
resolve({ data }); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
reject({ msg: err.errMsg || '请求失败' }); |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
put = (url, data = {}, { header = {}, withToken = true } = {}) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
request({ |
||||
|
url, |
||||
|
header: { |
||||
|
...(withToken ? { |
||||
|
Authorization: `Bearer ${getToken()}` |
||||
|
} : {}), |
||||
|
...header, |
||||
|
}, |
||||
|
data, |
||||
|
method: 'PUT', |
||||
|
success: (res) => { |
||||
|
const { data, statusCode } = res || {}; |
||||
|
if (statusCode !== 200) { |
||||
|
reject(data); |
||||
|
return; |
||||
|
} |
||||
|
resolve({ data }); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
reject({ msg: err.errMsg || '请求失败' }); |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
delete = (url, data = {}, { header = {}, withToken = true } = {}) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
request({ |
||||
|
url, |
||||
|
header: { |
||||
|
...(withToken ? { |
||||
|
Authorization: `Bearer ${getToken()}` |
||||
|
} : {}), |
||||
|
...header, |
||||
|
}, |
||||
|
data, |
||||
|
method: 'DELETE', |
||||
|
success: (res) => { |
||||
|
const { data, statusCode } = res || {}; |
||||
|
if (statusCode !== 200) { |
||||
|
reject(data); |
||||
|
return; |
||||
|
} |
||||
|
resolve({ data }); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
reject({ msg: err.errMsg || '请求失败' }); |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// downLoadFile = (url, data = {}, { header = {}, withToken = true } = {}) => {
|
||||
|
// return new Promise((resolve, reject) => {
|
||||
|
// downloadFile({
|
||||
|
// url,
|
||||
|
// header: {
|
||||
|
// ...(withToken ? {
|
||||
|
// Authorization: `Bearer ${getToken()}`
|
||||
|
// } : {}),
|
||||
|
// ...header,
|
||||
|
// },
|
||||
|
// // data,
|
||||
|
// // method: 'DELETE',
|
||||
|
// success: (res) => {
|
||||
|
// // console.log('downloadFile', res);
|
||||
|
// if (res?.data) {
|
||||
|
// reject(res?.data);
|
||||
|
// } else {
|
||||
|
// const str = res.header["Content-disposition"];
|
||||
|
// // console.log('str', str);
|
||||
|
// const regex = /filename\*=utf-8''([^;]+)/;
|
||||
|
// const match = `${str}`.match(regex);
|
||||
|
//
|
||||
|
// let fileName = '未命名文件';
|
||||
|
// if (match && match[1]) {
|
||||
|
// fileName = decodeURIComponent(match[1]);
|
||||
|
// }
|
||||
|
// resolve({ code: SUCCESS_CODE, data: { filePath: res.tempFilePath, fileName } });
|
||||
|
// }
|
||||
|
// // if (res?.statusCode !== 200 || res?.data?.code !== 200) {
|
||||
|
// // reject(res?.data);
|
||||
|
// // } else {
|
||||
|
// // resolve(res?.data || { code: SUCCESS_CODE, description: "无数据返回", data: {} });
|
||||
|
// // }
|
||||
|
// },
|
||||
|
// fail: (err) => {
|
||||
|
// reject({ code: err?.errno || 0, description: err?.errMsg || '请求发送失败', data: {} });
|
||||
|
// }
|
||||
|
// })
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// upLoad = (url, data = {}, { header = {}, withToken = true } = {}) => {
|
||||
|
// return new Promise((resolve, reject) => {
|
||||
|
// uploadFile({
|
||||
|
// url,
|
||||
|
// header: {
|
||||
|
// ...(withToken ? {
|
||||
|
// Authorization: `Bearer ${getToken()}`
|
||||
|
// } : {}),
|
||||
|
// ...header,
|
||||
|
// },
|
||||
|
// filePath: data.filePath,
|
||||
|
// name: 'no',
|
||||
|
// formData: data,
|
||||
|
// // data,
|
||||
|
// // method: 'DELETE',
|
||||
|
// success: (res) => {
|
||||
|
// console.log('downloadFile', res);
|
||||
|
// if (res?.data) {
|
||||
|
// reject(res?.data);
|
||||
|
// } else {
|
||||
|
// resolve({ code: SUCCESS_CODE, data: res.tempFilePath })
|
||||
|
// }
|
||||
|
// // if (res?.statusCode !== 200 || res?.data?.code !== 200) {
|
||||
|
// // reject(res?.data);
|
||||
|
// // } else {
|
||||
|
// // resolve(res?.data || { code: SUCCESS_CODE, description: "无数据返回", data: {} });
|
||||
|
// // }
|
||||
|
// },
|
||||
|
// fail: (err) => {
|
||||
|
// reject({ code: err?.errno || 0, description: err?.errMsg || '请求发送失败', data: {} });
|
||||
|
// }
|
||||
|
// })
|
||||
|
// });
|
||||
|
// }
|
||||
|
} |
||||
|
|
||||
|
export default new Http(); |
||||
@ -0,0 +1,34 @@ |
|||||
|
/** |
||||
|
* 身份信息存取 |
||||
|
*/ |
||||
|
import { setStorageSync, getStorageSync, removeStorageSync } from "@tarojs/taro"; |
||||
|
|
||||
|
export function save(userInfo) { |
||||
|
try { |
||||
|
// JSON.stringify(userInfo)
|
||||
|
setStorageSync('userInfo', userInfo) |
||||
|
} catch (e) { |
||||
|
// Do something when catch error
|
||||
|
console.log('e', e); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function get() { |
||||
|
let userInfo; |
||||
|
try { |
||||
|
userInfo = getStorageSync('userInfo'); |
||||
|
} catch (e) { |
||||
|
// Do something when catch error
|
||||
|
console.log('e', e); |
||||
|
} |
||||
|
return userInfo; |
||||
|
} |
||||
|
|
||||
|
export function remove() { |
||||
|
try { |
||||
|
removeStorageSync('userInfo') |
||||
|
} catch (e) { |
||||
|
// Do something when catch error
|
||||
|
console.log('e', e); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue