V2X调试器,主页的快捷按钮

This commit is contained in:
洛洛希雅 2024-05-07 17:06:03 +08:00
parent 1f493f0820
commit b741f55519
18 changed files with 904459 additions and 19 deletions

View File

@ -115,6 +115,7 @@
"VNode": true,
"WritableComputedRef": true,
"toValue": true,
"filterRouters": true
"filterRouters": true,
"useMqttStore": true
}
}

859165
src/assets/mqtt/CLC_track.json Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

17
src/store/mqtt.ts Normal file
View File

@ -0,0 +1,17 @@
import { defineStore } from 'pinia'
export const useMqttStore = defineStore('mqtt', {
state() {
return {
topic: 'V2X/RSU/R328328/RSM/UP/DAWNLINE',
url: 'mqtt://localhost:15675/mqtt',
username: 'root',
password: '123456',
clientId: 'R328328'
}
},
persist: {
storage: localStorage,
paths: undefined
}
})

View File

@ -93,3 +93,15 @@ output {
background-color: #f8fafc;
}
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#app{
height: 100%;
width: 100%;
overflow: auto;
}

View File

@ -36,6 +36,12 @@
登录
</el-button>
</el-form>
<div class="link">
<div>快捷方式</div>
<a href="/gitea/">Gitea</a>
<a href="/jenkins/">Jenkins</a>
<router-link to="/mqtt">V2X-MQTT</router-link>
</div>
<div class="icp">
鲁ICP备
<s>1145141919-810</s>
@ -207,6 +213,32 @@ $light_gray: #eee;
}
}
.link {
padding: 10px 30px;
background: #fff6;
box-shadow: 0 4px 16px rgba(4, 61, 175, 0.15);
border-radius: 8px;
position: absolute;
left: 15px;
top: 10px;
color: white;
display: flex;
align-items: center;
div {
font-size: 18px;
font-weight: bold;
display: inline-block;
margin-right: 1em;
}
a {
background-color: #ffffffaa;
color: #1f294a;
padding: 0.3em 0.5em;
margin-right: 0.5em;
border-radius: 0.3em;
}
}
.title-container {
.title {
font-size: 18px;

49
src/views/mqtt/dataLib.ts Normal file
View File

@ -0,0 +1,49 @@
export interface DataLib {
data: () => Promise<Array<Array<any>>>
title: string
}
const dataLib = {
CLC_track: {
data: () => import('@/assets/mqtt/CLC_track.json'),
title: '协作换道场景,轨迹数据'
},
DNP_track: {
data: () => import('@/assets/mqtt/DNP_track.json'),
title: '逆向超车场景,轨迹数据'
},
ICW_track: {
data: () => import('@/assets/mqtt/ICW_track.json'),
title: '交叉口车辆间碰撞预警场景,轨迹数据'
},
msg_VIR_CLC: {
data: () => import('@/assets/mqtt/msg_VIR_CLC.json'),
title: '协作换道场景,车辆请求信息'
},
msg_VIR_DNP: {
data: () => import('@/assets/mqtt/msg_VIR_DNP.json'),
title: '逆向超车场景,车辆请求信息'
},
overspeed_track: {
data: () => import('@/assets/mqtt/overspeed_track.json'),
title: '车辆超速数据'
},
RW_track: {
data: () => import('@/assets/mqtt/RW_track.json'),
title: '车辆逆行数据'
},
SDS_track: {
data: () => import('@/assets/mqtt/SDS_track.json'),
title: '数据共享场景,轨迹数据'
},
slower_speed_track: {
data: () => import('@/assets/mqtt/slower_speed_track.json'),
title: '车辆慢行数据'
},
VPTC_CW_track_turn: {
data: () => import('@/assets/mqtt/VPTC_CW_track_turn.json'),
title: '弱势交通参与者碰撞预警场景,车辆转向'
}
}
export type DataLibList = { [P in keyof typeof dataLib]: DataLib }
export default dataLib as any as DataLibList

View File

@ -3,17 +3,24 @@ import type { MqttClient } from 'mqtt'
import mqtt from 'mqtt'
import { delay } from '@/utils/common-util'
import type { Ref } from 'vue'
import { useMqttStore } from '@/store/mqtt'
import type { DataLib } from '@/views/mqtt/dataLib'
import dataLib from '@/views/mqtt/dataLib'
import { ElMessage } from 'element-plus'
let mqttClient: MqttClient | null = $ref()
let mqttClient: MqttClient | null = $ref(null)
const jobCancel: Ref<(() => void) | null> = ref() as any
const topic = $ref('V2X/RSU/R328328/RSM/UP/DAWNLINE')
const url = $ref('mqtt://localhost:15675/mqtt')
const username = $ref('root')
const password = $ref('123456')
const clientId = $ref('R328328')
const file: File = $ref()
const mqttStore = useMqttStore()
const topic = $toRef(mqttStore, 'topic')
const url = $toRef(mqttStore, 'url')
const username = $toRef(mqttStore, 'username')
const password = $toRef(mqttStore, 'password')
const clientId = $toRef(mqttStore, 'clientId')
let loading = $ref(false)
let status = $ref(false)
const active = $ref('CLC_track')
function connect() {
mqttClient = mqtt.connect(url, {
@ -39,8 +46,17 @@ async function disconnect() {
}
async function publish() {
const text = await file.text()
const list = JSON.parse(text) as any[]
let jsonModule: any
try {
loading = true
jsonModule = await (dataLib[active] as DataLib).data()
} catch (e: Error) {
loading = false
console.error(e)
ElMessage.error(`加载失败:${e.message}`)
return
}
const list = jsonModule.default as any[]
let i = 0
const next = () => list[(i = i++ % list.length)]
;(async () => {
@ -62,7 +78,27 @@ async function publish() {
<template>
<el-container>
<el-main style="max-width: 1024px; margin: 0 auto">
<el-aside width="500px">
<div class="mqtt-title-frame">
<router-link to="/" class="el-button el-button--primary el-button--small">返回</router-link>
<span class="mqtt-title">适用于V2X系统的MQTT调试器</span>
</div>
<h2 class="item-separator">数据选择器</h2>
<div class="data-list">
<el-row
v-for="[key, it] in Object.entries(dataLib)"
:key="key"
class="data-list-item"
:data-active="key === active"
@click="active = key"
>
<el-col :span="8">{{ key }}</el-col>
<el-col :span="16">{{ it.title }}</el-col>
</el-row>
</div>
</el-aside>
<el-main>
<el-form label-width="auto">
<el-form-item label="地址">
<el-input v-model="url" />
@ -79,12 +115,6 @@ async function publish() {
<el-form-item label="密码">
<el-input v-model="password" />
</el-form-item>
<el-form-item label="文件">
<input type="file" accept="application/json" @change="file = $event.target?.['files']?.[0]" />
</el-form-item>
<el-form-item label="过滤器">
<el-table />
</el-form-item>
<el-form-item>
<el-button v-if="!status" type="primary" @click="connect">连接</el-button>
<el-button v-else type="danger" @click="disconnect">断开</el-button>
@ -93,7 +123,54 @@ async function publish() {
</el-form-item>
</el-form>
</el-main>
<el-aside />
</el-container>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.el-container {
height: 100%;
width: 100%;
overflow: auto;
box-sizing: border-box;
padding: 10px;
.mqtt-title-frame {
display: flex;
align-items: center;
.mqtt-title {
flex-grow: 1;
margin-left: 1em;
//text-align: right;
font-size: 1.5em;
font-weight: 800;
}
}
.item-separator {
background-color: gray;
color: white;
padding: 0.3em 0.5em;
margin-top: 0.5em;
}
.data-list {
margin-top: 0.5em;
.data-list-item {
padding: 0.2em 0.5em;
user-select: none;
cursor: pointer;
&:hover {
background-color: var(--el-color-primary-light-7);
}
&[data-active='true'] {
background-color: var(--el-color-primary);
color: white;
border-radius: 5px;
}
}
}
}
</style>

View File

@ -4,7 +4,8 @@
"paths": {
"@/*": ["src/*"],
"~/*": ["typings/*"]
}
},
"types": ["@vue-macros/reactivity-transform/macros-global"]
},
"include": ["src", "typings"],
"exclude": ["node_modules", "**/dist"]

View File

@ -96,6 +96,7 @@ declare global {
const useDebuggerStore: typeof import('../src/store/debuger')['useDebuggerStore']
const useElement: typeof import('../src/hooks/use-element')['useElement']
const useLink: typeof import('vue-router')['useLink']
const useMqttStore: typeof import('../src/store/mqtt')['useMqttStore']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']