# 领新北斗（TracSeek）-车辆动态监控系统JT808JT1078-前端

**Repository Path**: IFinal/tracseek-web

## Basic Information

- **Project Name**: 领新北斗（TracSeek）-车辆动态监控系统JT808JT1078-前端
- **Description**: 支持JT/T808, JT/T809, JT/T1077, JT/T1078, T/JSATL11-2017, T/JSATL12-2017,GB32960等技术协议，支持多语言。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://www.lingx.com
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2026-06-06
- **Last Updated**: 2026-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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

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

### 2. Start with Docker

```bash
docker compose up -d
```

### 3. Open in browser

```bash
http://localhost:8800
Account:admin
Password:123456
```
## Backend repository
* Gitee ：[https://gitee.com/lingxcom/tracseek](https://gitee.com/lingxcom/tracseek)
* Github ：[https://github.com/lingxcom/tracseek](https://github.com/lingxcom/tracseek)

## Frontend repository
* Gitee ：[https://gitee.com/lingxcom/tracseek-web](https://gitee.com/lingxcom/tracseek-web)
* Github ：[https://github.com/lingxcom/tracseek-web](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)

```text
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