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

eslintrc/.eslintrc-auto-import.json

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

src/store/mqtt.ts

@@ -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
+  }
+})

src/styles/index.scss

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

src/views/login/index.vue

@@ -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;

src/views/mqtt/dataLib.ts

@@ -0,0 +1,61 @@
+export type DataLibContent = Array<Array<any>>
+
+export interface DataLib {
+  data: () => Promise<DataLibContent>
+  title: string
+}
+
+async function importLib(url: string) {
+  const baseUrl = window.NGINX_BASE_URL ? window.NGINX_BASE_URL : ''
+  const url1 = `${baseUrl}/home${url}`
+  const resp = await fetch(url1)
+  if (!resp.ok) {
+    throw new Error(resp.text())
+  }
+  return resp.json()
+}
+
+const dataLib = {
+  CLC_track: {
+    data: () => importLib('/static/mqtt/CLC_track.json'),
+    title: '协作换道场景，轨迹数据'
+  },
+  DNP_track: {
+    data: () => importLib('/static/mqtt/DNP_track.json'),
+    title: '逆向超车场景，轨迹数据'
+  },
+  ICW_track: {
+    data: () => importLib('/static/mqtt/ICW_track.json'),
+    title: '交叉口车辆间碰撞预警场景，轨迹数据'
+  },
+  msg_VIR_CLC: {
+    data: () => importLib('/static/mqtt/msg_VIR_CLC.json'),
+    title: '协作换道场景，车辆请求信息'
+  },
+  msg_VIR_DNP: {
+    data: () => importLib('/static/mqtt/msg_VIR_DNP.json'),
+    title: '逆向超车场景，车辆请求信息'
+  },
+  overspeed_track: {
+    data: () => importLib('/static/mqtt/overspeed_track.json'),
+    title: '车辆超速数据'
+  },
+  RW_track: {
+    data: () => importLib('/static/mqtt/RW_track.json'),
+    title: '车辆逆行数据'
+  },
+  SDS_track: {
+    data: () => importLib('/static/mqtt/SDS_track.json'),
+    title: '数据共享场景，轨迹数据'
+  },
+  slower_speed_track: {
+    data: () => importLib('/static/mqtt/slower_speed_track.json'),
+    title: '车辆慢行数据'
+  },
+  VPTC_CW_track_turn: {
+    data: () => importLib('/static/mqtt/VPTC_CW_track_turn.json'),
+    title: '弱势交通参与者碰撞预警场景，车辆转向'
+  }
+}
+export type DataLibList = { [P in keyof typeof dataLib]: DataLib }
+export default dataLib as any as DataLibList

src/views/mqtt/index.vue

@@ -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, DataLibContent } 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: DataLibContent
+  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
   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>

tsconfig.json

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

typings/auto-imports.d.ts

@@ -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']