TracSeek（领新北斗） — Scalable JT808 Vehicle Tracking Platform

TracSeek is a vehicle monitoring frontend built with Vue 3 + Vite + Element Plus. It is designed for JT/T 808 scenarios, including real-time positioning, track playback, device management,rule management, statistical reports, system management, and multilingual support.

Quick Start

1. Clone repository

git clone https://github.com/lingxcom/tracseek.git
cd tracseek
git clone https://github.com/lingxcom/tracseek-web.git

2. Start with Docker

docker compose up -d

3. Open in browser

http://localhost:8800
Account:admin
Password:123456

Backend repository

• Gitee ：https://gitee.com/lingxcom/tracseek
• Github ：https://github.com/lingxcom/tracseek

Frontend repository

• Gitee ：https://gitee.com/lingxcom/tracseek-web
• Github ：https://github.com/lingxcom/tracseek-web

Tech Stack

• Vue 3 (Composition API)
• Vite 5
• Vue Router 4
• Element Plus
• vue-i18n
• Axios
• Maptalks
• ECharts

Routing and Authentication

• Router entry: src/router/index.js
• Main layout page: /main, with child routes for business pages
• Auth logic: global beforeEach guard checks sessionStorage.isLogin === "true"
• Unauthenticated access to protected routes redirects to /login

API and WebSocket Configuration

Config file: public/static/js/config.js

• Injected into window at runtime:
  • window.apiUrl
  • window.wsUrl
  • window.uploadUrl
• In local development (localhost / 127.0.0.1), local host addresses are auto-generated
• When the host contains 5173, it defaults to 127.0.0.1:8800 (for frontend-backend local integration)

API wrapper: src/hooks/api.js

• Unified API call via axios.post(window.apiUrl, JSON.stringify(params))
• Automatically injects:
  • lingxtoken (from sessionStorage.token)
  • language (current i18n locale)
• code == 40001 automatically redirects to login
• code == 40002 shows a no-permission message

Multilingual (i18n) Guidelines

Language entry: src/lang/index.js

• Multiple locales are built in (such as zh-CN, en-US, ja-JP, ko-KR, etc.)
• Locale switch options are managed by LOCALE_OPTIONS
• Element Plus locale packs are mapped by current language in src/App.vue

When adding new copy, follow these rules:

1. Do not hardcode display text in pages; always use t('...')
2. Add the same key to all src/lang/*/index.js locale files
3. Key naming is recommended to be module-based, for example:
   • el.main.*
   • el.report.*
   • el.jt808.*

Directory Structure (Core)

src/
  main.js                 # App entry
  App.vue                 # Global shell + Element Plus locale
  router/
    index.js              # Routes and guards
  lang/
    index.js              # i18n registration
    */index.js            # Locale entries
  hooks/
    api.js                # Unified API calls
    lingx.js              # Utility function collection
  views/
    Login.vue
    Main.vue
    Home.vue
    jt808/                # Positioning, tracks, messages, etc.
    report/               # Statistical reports
    lingx/                # System capability pages
public/
  static/js/config.js     # Runtime api/ws/upload endpoint config

Build and Asset Output

vite.config.js defines output naming rules:

• JS: js/[hash].js
• Assets: [ext]/[hash].[ext]

This is helpful for static asset caching and deployment.

FAQ

1) "Cannot connect to API / WebSocket failed"

Check these first:

• window.apiUrl / window.wsUrl generated by public/static/js/config.js
• Actual request URL, status code, and certificate errors in browser Console and Network tabs
• Whether backend service ports are reachable (common in local integration: port 8800 not started)

2) Redirected back to login after login

Check whether sessionStorage.isLogin is correctly written as "true" and whether the token has expired.

Development Suggestions

• Before committing, at minimum verify: login, main menu, one JT808 page, and one report page
• Reuse the existing lingx component system when adding pages to avoid duplicate implementations
• If copy text changes, sync all language files to avoid missing keys at runtime