init
suixy
3 weeks ago
commit
60d0235013
@ -0,0 +1,30 @@
|
|||||||
|
.DS_Store
|
||||||
|
.history
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
release/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
**/*.log
|
||||||
|
|
||||||
|
tests/**/coverage/
|
||||||
|
tests/e2e/reports
|
||||||
|
selenium-debug.log
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.local
|
||||||
|
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
pnpm-lock.yaml
|
||||||
|
|
||||||
|
# 编译生成的文件
|
||||||
|
auto-imports.d.ts
|
||||||
|
components.d.ts
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>塔架 FOD</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "tower-fod",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --host 0.0.0.0",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview --host 0.0.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"element-plus": "^2.11.8",
|
||||||
|
"vue": "^3.5.24",
|
||||||
|
"vue-router": "^4.6.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^6.0.2",
|
||||||
|
"vite": "^7.2.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
app.component(key, component)
|
||||||
|
}
|
||||||
|
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.use(router)
|
||||||
|
app.mount('#app')
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import LoginView from '../view/login/index.vue'
|
||||||
|
import MapView from '../view/map/index.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: LoginView,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'map',
|
||||||
|
component: MapView,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,243 @@
|
|||||||
|
:root {
|
||||||
|
font-family:
|
||||||
|
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||||
|
sans-serif;
|
||||||
|
color: #eef5ff;
|
||||||
|
background: #030712;
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-page {
|
||||||
|
position: relative;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 18% 12%, rgba(45, 212, 191, 0.18), transparent 32%),
|
||||||
|
linear-gradient(135deg, #020617 0%, #111827 52%, #07111f 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stream-video {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
background: #020617;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-backdrop {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
|
||||||
|
linear-gradient(0deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
|
||||||
|
background-size: 56px 56px;
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-backdrop::after {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
content: "";
|
||||||
|
background: linear-gradient(180deg, rgba(2, 6, 23, 0.28), transparent 34%, rgba(2, 6, 23, 0.52));
|
||||||
|
}
|
||||||
|
|
||||||
|
.scan-line {
|
||||||
|
position: absolute;
|
||||||
|
top: -12%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 16%;
|
||||||
|
background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.16), transparent);
|
||||||
|
animation: scan-move 5.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-grid {
|
||||||
|
position: absolute;
|
||||||
|
inset: 24px;
|
||||||
|
border: 1px solid rgba(125, 211, 252, 0.24);
|
||||||
|
box-shadow: inset 0 0 44px rgba(8, 145, 178, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stream-status {
|
||||||
|
position: absolute;
|
||||||
|
left: 24px;
|
||||||
|
bottom: 24px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
max-width: calc(100vw - 48px);
|
||||||
|
min-height: 38px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #dbeafe;
|
||||||
|
background: rgba(2, 6, 23, 0.62);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stream-status strong {
|
||||||
|
overflow: hidden;
|
||||||
|
color: #93c5fd;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #f59e0b;
|
||||||
|
box-shadow: 0 0 14px rgba(245, 158, 11, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.online {
|
||||||
|
background: #22c55e;
|
||||||
|
box-shadow: 0 0 14px rgba(34, 197, 94, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 3;
|
||||||
|
width: 236px;
|
||||||
|
padding: 14px;
|
||||||
|
border: 1px solid rgba(186, 230, 253, 0.28);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(3, 7, 18, 0.66);
|
||||||
|
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-pad {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
". up ."
|
||||||
|
"left center right"
|
||||||
|
". down .";
|
||||||
|
grid-template-columns: repeat(3, 48px);
|
||||||
|
grid-template-rows: repeat(3, 42px);
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn,
|
||||||
|
.zoom-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
border-color: rgba(147, 197, 253, 0.34);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #eff6ff;
|
||||||
|
background: rgba(15, 23, 42, 0.74);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:hover,
|
||||||
|
.zoom-btn:hover,
|
||||||
|
.function-btn:hover {
|
||||||
|
border-color: rgba(34, 211, 238, 0.86);
|
||||||
|
color: #ffffff;
|
||||||
|
background: rgba(8, 145, 178, 0.76);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.up {
|
||||||
|
grid-area: up;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.left {
|
||||||
|
grid-area: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.center {
|
||||||
|
grid-area: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.right {
|
||||||
|
grid-area: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn.down {
|
||||||
|
grid-area: down;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-btn {
|
||||||
|
min-width: 0;
|
||||||
|
height: 36px;
|
||||||
|
margin: 0 !important;
|
||||||
|
border-color: rgba(148, 163, 184, 0.24);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #dbeafe;
|
||||||
|
background: rgba(15, 23, 42, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scan-move {
|
||||||
|
from {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateY(760%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.control-panel {
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
width: 212px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-pad {
|
||||||
|
grid-template-columns: repeat(3, 42px);
|
||||||
|
grid-template-rows: repeat(3, 38px);
|
||||||
|
gap: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stream-status {
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
bottom: 12px;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<section class="dialog-page">
|
||||||
|
<el-table :data="rows" height="360" size="small" class="dialog-table">
|
||||||
|
<el-table-column prop="index" label="序号" width="72" align="center" />
|
||||||
|
<el-table-column prop="area" label="屏蔽区域" min-width="140" />
|
||||||
|
<el-table-column prop="location" label="中心经纬度" min-width="180" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="radius" label="半径" min-width="90" />
|
||||||
|
<el-table-column prop="reason" label="屏蔽原因" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="updatedAt" label="更新时间" min-width="170" show-overflow-tooltip />
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const rows = [
|
||||||
|
{
|
||||||
|
index: 1,
|
||||||
|
area: '施工区域 A',
|
||||||
|
location: '120.095812, 36.365016',
|
||||||
|
radius: '18m',
|
||||||
|
reason: '临时施工设备',
|
||||||
|
updatedAt: '2026-06-12 10:20:00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: 2,
|
||||||
|
area: '维护区域 B',
|
||||||
|
location: '120.097301, 36.364782',
|
||||||
|
radius: '12m',
|
||||||
|
reason: '固定维护标识',
|
||||||
|
updatedAt: '2026-06-12 11:05:00',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dialog-page {
|
||||||
|
min-height: 360px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.14);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(2, 6, 23, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table {
|
||||||
|
width: 100%;
|
||||||
|
color: #e5eefb;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__inner-wrapper::before) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__header-wrapper th) {
|
||||||
|
border-bottom-color: rgba(226, 232, 240, 0.16);
|
||||||
|
color: rgba(226, 232, 240, 0.86);
|
||||||
|
background: rgba(15, 23, 42, 0.78);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__row) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__row:hover > td.el-table__cell) {
|
||||||
|
background: rgba(14, 165, 233, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(td.el-table__cell) {
|
||||||
|
border-bottom-color: rgba(226, 232, 240, 0.1);
|
||||||
|
color: #e5eefb;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__body-wrapper),
|
||||||
|
.dialog-table :deep(.el-table__empty-block) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__empty-text) {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<section class="dialog-page">
|
||||||
|
<el-form :model="form" label-width="112px" class="config-form">
|
||||||
|
<el-form-item label="探测阈值">
|
||||||
|
<el-slider v-model="form.threshold" :min="1" :max="100" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="告警级别">
|
||||||
|
<el-select v-model="form.alertLevel" placeholder="请选择告警级别">
|
||||||
|
<el-option label="低" value="low" />
|
||||||
|
<el-option label="中" value="medium" />
|
||||||
|
<el-option label="高" value="high" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="自动确认">
|
||||||
|
<el-switch v-model="form.autoConfirm" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="巡检间隔">
|
||||||
|
<el-input-number v-model="form.interval" :min="1" :max="60" />
|
||||||
|
<span class="unit">秒</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="4" placeholder="输入配置备注" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
threshold: 75,
|
||||||
|
alertLevel: 'high',
|
||||||
|
autoConfirm: false,
|
||||||
|
interval: 5,
|
||||||
|
remark: '',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dialog-page {
|
||||||
|
min-height: 360px;
|
||||||
|
padding: 18px;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.14);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(2, 6, 23, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form {
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-form-item__label) {
|
||||||
|
color: rgba(226, 232, 240, 0.82);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-input__wrapper),
|
||||||
|
.config-form :deep(.el-textarea__inner),
|
||||||
|
.config-form :deep(.el-input-number .el-input__wrapper),
|
||||||
|
.config-form :deep(.el-select__wrapper) {
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.18);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(15, 23, 42, 0.72);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-input__inner),
|
||||||
|
.config-form :deep(.el-textarea__inner),
|
||||||
|
.config-form :deep(.el-select__selected-item) {
|
||||||
|
color: #e5eefb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-textarea__inner::placeholder),
|
||||||
|
.config-form :deep(.el-input__inner::placeholder) {
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-input-number__decrease),
|
||||||
|
.config-form :deep(.el-input-number__increase) {
|
||||||
|
border-color: rgba(226, 232, 240, 0.14);
|
||||||
|
color: #cbd5e1;
|
||||||
|
background: rgba(30, 41, 59, 0.82);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-slider__runway) {
|
||||||
|
background: rgba(51, 65, 85, 0.88);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-slider__bar) {
|
||||||
|
background: #0891b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-slider__button) {
|
||||||
|
border-color: #22d3ee;
|
||||||
|
background: #e0f2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form :deep(.el-switch.is-checked .el-switch__core) {
|
||||||
|
border-color: #0891b2;
|
||||||
|
background-color: #0891b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<section class="dialog-page">
|
||||||
|
<el-table :data="rows" height="360" size="small" class="dialog-table">
|
||||||
|
<el-table-column prop="index" label="序号" width="72" align="center" />
|
||||||
|
<el-table-column prop="location" label="经纬度" min-width="180" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="category" label="异物类别" min-width="120" />
|
||||||
|
<el-table-column prop="intensity" label="探测强度" min-width="110" />
|
||||||
|
<el-table-column prop="status" label="处理状态" min-width="110" />
|
||||||
|
<el-table-column prop="discoveredAt" label="发现时间" min-width="170" show-overflow-tooltip />
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const rows = [
|
||||||
|
{
|
||||||
|
index: 1,
|
||||||
|
location: '120.096710, 36.365238',
|
||||||
|
category: '疑似异物',
|
||||||
|
intensity: '82%',
|
||||||
|
status: '待处理',
|
||||||
|
discoveredAt: '2026-06-12 14:35:20',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: 2,
|
||||||
|
location: '120.096842, 36.365104',
|
||||||
|
category: '金属碎片',
|
||||||
|
intensity: '76%',
|
||||||
|
status: '处理中',
|
||||||
|
discoveredAt: '2026-06-12 14:36:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: 3,
|
||||||
|
location: '120.096514, 36.365387',
|
||||||
|
category: '塑料残片',
|
||||||
|
intensity: '64%',
|
||||||
|
status: '已处理',
|
||||||
|
discoveredAt: '2026-06-12 14:37:42',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dialog-page {
|
||||||
|
min-height: 360px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.14);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(2, 6, 23, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table {
|
||||||
|
width: 100%;
|
||||||
|
color: #e5eefb;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__inner-wrapper::before) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__header-wrapper th) {
|
||||||
|
border-bottom-color: rgba(226, 232, 240, 0.16);
|
||||||
|
color: rgba(226, 232, 240, 0.86);
|
||||||
|
background: rgba(15, 23, 42, 0.78);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__row) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__row:hover > td.el-table__cell) {
|
||||||
|
background: rgba(14, 165, 233, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(td.el-table__cell) {
|
||||||
|
border-bottom-color: rgba(226, 232, 240, 0.1);
|
||||||
|
color: #e5eefb;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__body-wrapper),
|
||||||
|
.dialog-table :deep(.el-table__empty-block) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-table :deep(.el-table__empty-text) {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<main class="login-page">
|
||||||
|
<section class="login-shell">
|
||||||
|
<div class="login-brand">
|
||||||
|
<span class="brand-kicker">AIRFIELD FOD MONITOR</span>
|
||||||
|
<h1>机场道面外来物检测系统</h1>
|
||||||
|
<p>道面监控、异物识别、处置闭环统一入口</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" class="login-card" @submit.prevent>
|
||||||
|
<div class="card-title">
|
||||||
|
<span>系统登录</span>
|
||||||
|
<small>Secure Access</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-form-item prop="username">
|
||||||
|
<el-input
|
||||||
|
v-model="form.username"
|
||||||
|
size="large"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
clearable
|
||||||
|
autocomplete="username"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input
|
||||||
|
v-model="form.password"
|
||||||
|
size="large"
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
show-password
|
||||||
|
autocomplete="current-password"
|
||||||
|
@keyup.enter="submitLogin"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-button class="login-button" type="primary" size="large" @click="submitLogin">
|
||||||
|
登录
|
||||||
|
</el-button>
|
||||||
|
</el-form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {reactive, ref} from 'vue'
|
||||||
|
import {useRouter} from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const formRef = ref(null)
|
||||||
|
const form = reactive({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
})
|
||||||
|
const rules = {
|
||||||
|
username: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入用户名',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入密码',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitLogin() {
|
||||||
|
const valid = await formRef.value?.validate().catch(() => false)
|
||||||
|
|
||||||
|
if (valid) {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-page {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
place-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 32px;
|
||||||
|
background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
|
||||||
|
linear-gradient(0deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
|
||||||
|
radial-gradient(circle at 24% 20%, rgba(34, 211, 238, 0.2), transparent 30%),
|
||||||
|
radial-gradient(circle at 78% 72%, rgba(245, 158, 11, 0.16), transparent 28%),
|
||||||
|
linear-gradient(135deg, #020617 0%, #0f172a 48%, #030712 100%);
|
||||||
|
background-size: 56px 56px, 56px 56px, auto, auto, auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page::before {
|
||||||
|
position: absolute;
|
||||||
|
inset: 24px;
|
||||||
|
content: "";
|
||||||
|
border: 1px solid rgba(125, 211, 252, 0.18);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-shell {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.08fr) 420px;
|
||||||
|
gap: 46px;
|
||||||
|
align-items: center;
|
||||||
|
width: min(1080px, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-kicker {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid rgba(34, 211, 238, 0.32);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #67e8f9;
|
||||||
|
background: rgba(8, 145, 178, 0.12);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand h1 {
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0;
|
||||||
|
color: #f8fafc;
|
||||||
|
font-size: clamp(34px, 5vw, 64px);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 1.06;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand p {
|
||||||
|
max-width: 520px;
|
||||||
|
margin: 18px 0 0;
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 26px;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.22);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(2, 6, 23, 0.64);
|
||||||
|
box-shadow: 0 32px 100px rgba(0, 0, 0, 0.42);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
color: #f8fafc;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 850;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title small {
|
||||||
|
color: #38bdf8;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card :deep(.el-input__wrapper) {
|
||||||
|
min-height: 46px;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.18);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(15, 23, 42, 0.74);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card :deep(.el-input__inner) {
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card :deep(.el-input__inner::placeholder) {
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card :deep(.el-form-item__error) {
|
||||||
|
color: #fca5a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 6px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, #0891b2, #0f766e);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button:hover {
|
||||||
|
background: linear-gradient(135deg, #0e7490, #115e59);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.login-shell {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
.login-page {
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page::before {
|
||||||
|
inset: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,682 @@
|
|||||||
|
<template>
|
||||||
|
<main class="amap-page">
|
||||||
|
<div ref="mapContainerRef" class="amap-container"></div>
|
||||||
|
|
||||||
|
<header class="top-menu">
|
||||||
|
<h1>机场道面外来物检测系统</h1>
|
||||||
|
<nav class="menu-actions" aria-label="页面菜单">
|
||||||
|
<el-button
|
||||||
|
v-for="item in menuItems"
|
||||||
|
:key="item.key"
|
||||||
|
:type="activeDialog === item.key ? 'primary' : 'default'"
|
||||||
|
@click="handleMenuClick(item.key)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</el-button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="bottom-card-row" aria-label="底部监控信息">
|
||||||
|
<section class="video-card" aria-label="视频监控">
|
||||||
|
<VideoView />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<el-card class="fod-detail-card" shadow="never">
|
||||||
|
<section class="fod-detail-panel" aria-label="异物检测详情">
|
||||||
|
<div class="fod-header">
|
||||||
|
<span>异物检测信息</span>
|
||||||
|
<el-tag size="small" :type="statusTagType" effect="dark">
|
||||||
|
{{ detectionInfo.status }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl class="fod-grid">
|
||||||
|
<div v-for="item in detectionFields" :key="item.label" class="fod-item">
|
||||||
|
<dt>{{ item.label }}</dt>
|
||||||
|
<dd>{{ item.value }}</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<div class="fod-images">
|
||||||
|
<el-image
|
||||||
|
v-for="(image, index) in detectionImages"
|
||||||
|
:key="image"
|
||||||
|
class="fod-image"
|
||||||
|
:src="image"
|
||||||
|
:preview-src-list="detectionImages"
|
||||||
|
:initial-index="index"
|
||||||
|
fit="cover"
|
||||||
|
preview-teleported
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="fod-table-card" shadow="never">
|
||||||
|
<section class="fod-table-panel" aria-label="异物检测列表">
|
||||||
|
<el-table :data="detectionRows" height="100%" size="small" class="fod-table">
|
||||||
|
<el-table-column prop="index" label="序号" width="52" align="center" />
|
||||||
|
<el-table-column prop="location" label="经纬度" min-width="132" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="discoveredAt" label="发现时间" min-width="132" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="60" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="primary" size="small" @click="selectDetection(row)">
|
||||||
|
查看
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
</el-card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:title="currentDialogTitle"
|
||||||
|
width="76vw"
|
||||||
|
class="system-dialog"
|
||||||
|
append-to-body
|
||||||
|
destroy-on-close
|
||||||
|
@closed="activeDialog = ''"
|
||||||
|
>
|
||||||
|
<component :is="currentDialogComponent" v-if="currentDialogComponent" />
|
||||||
|
</el-dialog>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
|
import BlockedDataView from '../blocked-data/index.vue'
|
||||||
|
import ConfigView from '../config/index.vue'
|
||||||
|
import HistoryDataView from '../history-data/index.vue'
|
||||||
|
import VideoView from '../video/index.vue'
|
||||||
|
|
||||||
|
const AMAP_KEY = 'f570ff5caa2f5c956fc6bf66cacabb93'
|
||||||
|
const AMAP_SECURITY_CODE = '114b8c8d2356490283ea98293a9c4ae3'
|
||||||
|
const AMAP_SCRIPT_ID = 'amap-jsapi'
|
||||||
|
const AMAP_CALLBACK_NAME = '__initAmapMapView'
|
||||||
|
const MAP_CENTER = [120.09671, 36.365238]
|
||||||
|
const MAP_ZOOM = 15
|
||||||
|
const MAP_ROTATION = -72.6
|
||||||
|
|
||||||
|
const mapContainerRef = ref(null)
|
||||||
|
const activeDialog = ref('')
|
||||||
|
const detectionInfo = {
|
||||||
|
discoveredAt: '2026-06-12 14:35:20',
|
||||||
|
location: '120.096710E, 36.365238N',
|
||||||
|
intensity: '82%',
|
||||||
|
count: 3,
|
||||||
|
category: '疑似异物',
|
||||||
|
status: '待处理',
|
||||||
|
}
|
||||||
|
const detectionImages = [
|
||||||
|
createDetectionImage('#0f766e', 'FOD-01'),
|
||||||
|
createDetectionImage('#1d4ed8', 'FOD-02'),
|
||||||
|
createDetectionImage('#b45309', 'FOD-03'),
|
||||||
|
]
|
||||||
|
const detectionRows = [
|
||||||
|
{
|
||||||
|
index: 1,
|
||||||
|
location: '120.096710, 36.365238',
|
||||||
|
discoveredAt: '2026-06-12 14:35:20',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: 2,
|
||||||
|
location: '120.096842, 36.365104',
|
||||||
|
discoveredAt: '2026-06-12 14:36:08',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: 3,
|
||||||
|
location: '120.096514, 36.365387',
|
||||||
|
discoveredAt: '2026-06-12 14:37:42',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: 4,
|
||||||
|
location: '120.096933, 36.365291',
|
||||||
|
discoveredAt: '2026-06-12 14:39:16',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const detectionFields = computed(() => [
|
||||||
|
{ label: '发现时间', value: detectionInfo.discoveredAt },
|
||||||
|
{ label: '位置信息', value: detectionInfo.location },
|
||||||
|
{ label: '探测强度', value: detectionInfo.intensity },
|
||||||
|
{ label: '检测次数', value: detectionInfo.count },
|
||||||
|
{ label: '异物类别', value: detectionInfo.category },
|
||||||
|
{ label: '处理状态', value: detectionInfo.status },
|
||||||
|
])
|
||||||
|
const statusTagType = computed(() => {
|
||||||
|
if (detectionInfo.status === '已处理') {
|
||||||
|
return 'success'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (detectionInfo.status === '处理中') {
|
||||||
|
return 'warning'
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'danger'
|
||||||
|
})
|
||||||
|
const menuItems = [
|
||||||
|
{ key: 'home', label: '首页' },
|
||||||
|
{ key: 'history', label: '历史数据' },
|
||||||
|
{ key: 'config', label: '配置' },
|
||||||
|
{ key: 'blocked', label: '屏蔽数据' },
|
||||||
|
]
|
||||||
|
const dialogMap = {
|
||||||
|
history: {
|
||||||
|
title: '历史数据',
|
||||||
|
component: HistoryDataView,
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
title: '配置',
|
||||||
|
component: ConfigView,
|
||||||
|
},
|
||||||
|
blocked: {
|
||||||
|
title: '屏蔽数据',
|
||||||
|
component: BlockedDataView,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
const dialogVisible = computed({
|
||||||
|
get: () => Boolean(activeDialog.value),
|
||||||
|
set: (value) => {
|
||||||
|
if (!value) {
|
||||||
|
activeDialog.value = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const currentDialogTitle = computed(() => dialogMap[activeDialog.value]?.title || '')
|
||||||
|
const currentDialogComponent = computed(() => dialogMap[activeDialog.value]?.component || null)
|
||||||
|
|
||||||
|
let mapInstance = null
|
||||||
|
let amapScriptPromise = null
|
||||||
|
|
||||||
|
function createDetectionImage(color, label) {
|
||||||
|
const svg = `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="${color}" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#020617" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="320" height="200" fill="url(#bg)"/>
|
||||||
|
<path d="M0 132 C62 108 94 154 150 130 C206 106 244 82 320 112 L320 200 L0 200 Z" fill="#111827" opacity="0.72"/>
|
||||||
|
<rect x="18" y="18" width="284" height="164" rx="10" fill="none" stroke="#e2e8f0" stroke-opacity="0.36"/>
|
||||||
|
<circle cx="160" cy="100" r="34" fill="none" stroke="#fef3c7" stroke-width="2.5" stroke-dasharray="7 6"/>
|
||||||
|
<path d="M141 105 L158 74 L180 121 Z" fill="#fbbf24" opacity="0.86"/>
|
||||||
|
<text x="24" y="44" fill="#f8fafc" font-size="18" font-family="Arial, sans-serif" font-weight="700">${label}</text>
|
||||||
|
<text x="24" y="168" fill="#cbd5e1" font-size="12" font-family="Arial, sans-serif">Foreign Object Detection Snapshot</text>
|
||||||
|
</svg>`
|
||||||
|
|
||||||
|
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function waitForAmapMapConstructor(timeout = 10000) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const startedAt = Date.now()
|
||||||
|
|
||||||
|
const checkAmap = () => {
|
||||||
|
if (window.AMap?.Map) {
|
||||||
|
resolve(window.AMap)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Date.now() - startedAt >= timeout) {
|
||||||
|
reject(new Error('AMap Map constructor is unavailable'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
window.setTimeout(checkAmap, 50)
|
||||||
|
}
|
||||||
|
|
||||||
|
checkAmap()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadAmapScript() {
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: AMAP_SECURITY_CODE,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.AMap?.Map) {
|
||||||
|
return Promise.resolve(window.AMap)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (amapScriptPromise) {
|
||||||
|
return amapScriptPromise
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById(AMAP_SCRIPT_ID)) {
|
||||||
|
amapScriptPromise = waitForAmapMapConstructor()
|
||||||
|
return amapScriptPromise
|
||||||
|
}
|
||||||
|
|
||||||
|
amapScriptPromise = new Promise((resolve, reject) => {
|
||||||
|
window[AMAP_CALLBACK_NAME] = () => {
|
||||||
|
waitForAmapMapConstructor().then(resolve).catch(reject)
|
||||||
|
}
|
||||||
|
|
||||||
|
const script = document.createElement('script')
|
||||||
|
script.id = AMAP_SCRIPT_ID
|
||||||
|
script.async = true
|
||||||
|
script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}&callback=${AMAP_CALLBACK_NAME}`
|
||||||
|
script.onload = () => {
|
||||||
|
waitForAmapMapConstructor().then(resolve).catch(reject)
|
||||||
|
}
|
||||||
|
script.onerror = (error) => {
|
||||||
|
amapScriptPromise = null
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
document.head.appendChild(script)
|
||||||
|
})
|
||||||
|
|
||||||
|
amapScriptPromise = amapScriptPromise.catch((error) => {
|
||||||
|
amapScriptPromise = null
|
||||||
|
throw error
|
||||||
|
})
|
||||||
|
|
||||||
|
return amapScriptPromise
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectDetection(row) {
|
||||||
|
console.info('查看异物检测记录:', row)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMenuClick(key) {
|
||||||
|
if (key === 'home') {
|
||||||
|
activeDialog.value = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
activeDialog.value = key
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initMap() {
|
||||||
|
try {
|
||||||
|
const AMap = await loadAmapScript()
|
||||||
|
|
||||||
|
if (!AMap?.Map) {
|
||||||
|
throw new Error('AMap Map constructor is unavailable')
|
||||||
|
}
|
||||||
|
|
||||||
|
mapInstance = new AMap.Map(mapContainerRef.value, {
|
||||||
|
viewMode: '3D',
|
||||||
|
zoom: MAP_ZOOM,
|
||||||
|
center: MAP_CENTER,
|
||||||
|
pitch: 0,
|
||||||
|
rotation: MAP_ROTATION,
|
||||||
|
showLabel: false,
|
||||||
|
layers: [
|
||||||
|
new AMap.TileLayer.Satellite(),
|
||||||
|
],
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Load AMap failed:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(initMap)
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
mapInstance?.destroy()
|
||||||
|
mapInstance = null
|
||||||
|
delete window[AMAP_CALLBACK_NAME]
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.amap-page {
|
||||||
|
position: relative;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #030712;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amap-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
left: 24px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 4;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
min-height: 56px;
|
||||||
|
padding: 0 18px;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.26);
|
||||||
|
border-radius: 14px;
|
||||||
|
color: #f8fafc;
|
||||||
|
background: rgba(2, 6, 23, 0.5);
|
||||||
|
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-menu h1 {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-actions {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-actions :deep(.el-button) {
|
||||||
|
min-width: 86px;
|
||||||
|
margin: 0;
|
||||||
|
border-color: rgba(226, 232, 240, 0.22);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #e5eefb;
|
||||||
|
background: rgba(15, 23, 42, 0.66);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-actions :deep(.el-button:hover) {
|
||||||
|
border-color: rgba(56, 189, 248, 0.72);
|
||||||
|
color: #ffffff;
|
||||||
|
background: rgba(14, 116, 144, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-actions :deep(.el-button--primary) {
|
||||||
|
border-color: rgba(34, 211, 238, 0.85);
|
||||||
|
background: rgba(8, 145, 178, 0.86);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-row {
|
||||||
|
position: absolute;
|
||||||
|
left: 24px;
|
||||||
|
right: 24px;
|
||||||
|
bottom: 24px;
|
||||||
|
z-index: 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 2fr 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
height: 60%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card,
|
||||||
|
.fod-detail-card,
|
||||||
|
.fod-table-card {
|
||||||
|
min-width: 0;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.28);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card {
|
||||||
|
background: rgba(2, 6, 23, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card :deep(.monitor-page) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card :deep(.control-panel) {
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
width: 212px;
|
||||||
|
padding: 12px;
|
||||||
|
transform: scale(0.5);
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card :deep(.stream-status) {
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
bottom: 12px;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card :deep(.direction-pad) {
|
||||||
|
grid-template-columns: repeat(3, 42px);
|
||||||
|
grid-template-rows: repeat(3, 38px);
|
||||||
|
gap: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-detail-card,
|
||||||
|
.fod-table-card {
|
||||||
|
color: #e5eefb;
|
||||||
|
background: rgba(2, 6, 23, 0.48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-detail-card :deep(.el-card__body),
|
||||||
|
.fod-table-card :deep(.el-card__body) {
|
||||||
|
height: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-detail-panel,
|
||||||
|
.fod-table-panel {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-detail-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-header {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid rgba(226, 232, 240, 0.16);
|
||||||
|
color: #f8fafc;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 10px 14px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin: 12px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-item {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-item dt {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
color: rgba(203, 213, 225, 0.74);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-item dd {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #f8fafc;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-images {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
align-content: end;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-top: 1px solid rgba(226, 232, 240, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 74px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.18);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(15, 23, 42, 0.62);
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table-panel {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.14);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(15, 23, 42, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #e5eefb;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table :deep(.el-table__inner-wrapper::before) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table :deep(.el-table__header-wrapper th) {
|
||||||
|
border-bottom-color: rgba(226, 232, 240, 0.16);
|
||||||
|
color: rgba(226, 232, 240, 0.82);
|
||||||
|
background: rgba(15, 23, 42, 0.72);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table :deep(.el-table__row) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table :deep(.el-table__row:hover > td.el-table__cell) {
|
||||||
|
background: rgba(14, 165, 233, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table :deep(td.el-table__cell) {
|
||||||
|
border-bottom-color: rgba(226, 232, 240, 0.1);
|
||||||
|
color: #e5eefb;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table :deep(.el-table__body-wrapper) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.system-dialog) {
|
||||||
|
border: 1px solid rgba(226, 232, 240, 0.22);
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgba(2, 6, 23, 0.92);
|
||||||
|
box-shadow: 0 32px 120px rgba(0, 0, 0, 0.56);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.system-dialog .el-dialog__header) {
|
||||||
|
padding: 18px 20px 12px;
|
||||||
|
border-bottom: 1px solid rgba(226, 232, 240, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.system-dialog .el-dialog__title) {
|
||||||
|
color: #f8fafc;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.system-dialog .el-dialog__body) {
|
||||||
|
padding: 18px 20px 20px;
|
||||||
|
color: #e5eefb;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.el-select__popper.el-popper) {
|
||||||
|
border-color: rgba(226, 232, 240, 0.18);
|
||||||
|
background: rgba(2, 6, 23, 0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.el-select-dropdown) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.el-select-dropdown__item) {
|
||||||
|
color: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.el-select-dropdown__item.is-hovering),
|
||||||
|
:global(.el-select-dropdown__item:hover) {
|
||||||
|
color: #ffffff;
|
||||||
|
background: rgba(14, 165, 233, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.el-select-dropdown__item.is-selected) {
|
||||||
|
color: #67e8f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.top-menu {
|
||||||
|
top: 12px;
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-menu h1 {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-actions {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-actions :deep(.el-button) {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-row {
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
bottom: 12px;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
height: 72%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card {
|
||||||
|
min-height: 220px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-detail-card,
|
||||||
|
.fod-table-card {
|
||||||
|
min-height: 220px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-table-panel {
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fod-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,206 @@
|
|||||||
|
<template>
|
||||||
|
<main class="monitor-page">
|
||||||
|
<video
|
||||||
|
ref="videoRef"
|
||||||
|
class="stream-video"
|
||||||
|
autoplay
|
||||||
|
muted
|
||||||
|
playsinline
|
||||||
|
controls="false"
|
||||||
|
></video>
|
||||||
|
|
||||||
|
<div class="video-backdrop" aria-hidden="true">
|
||||||
|
<!-- <div class="scan-line"></div>-->
|
||||||
|
<div class="signal-grid"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<aside class="control-panel" aria-label="视频控制器">
|
||||||
|
<div class="direction-pad" aria-label="方向控制">
|
||||||
|
<el-button
|
||||||
|
class="control-btn up"
|
||||||
|
type="primary"
|
||||||
|
:icon="ArrowUp"
|
||||||
|
aria-label="向上"
|
||||||
|
@click="sendControl('up')"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
class="control-btn left"
|
||||||
|
type="primary"
|
||||||
|
:icon="ArrowLeft"
|
||||||
|
aria-label="向左"
|
||||||
|
@click="sendControl('left')"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
class="control-btn center"
|
||||||
|
:icon="Aim"
|
||||||
|
aria-label="居中"
|
||||||
|
@click="sendControl('center')"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
class="control-btn right"
|
||||||
|
type="primary"
|
||||||
|
:icon="ArrowRight"
|
||||||
|
aria-label="向右"
|
||||||
|
@click="sendControl('right')"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
class="control-btn down"
|
||||||
|
type="primary"
|
||||||
|
:icon="ArrowDown"
|
||||||
|
aria-label="向下"
|
||||||
|
@click="sendControl('down')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="zoom-controls" aria-label="缩放控制">
|
||||||
|
<el-button
|
||||||
|
class="zoom-btn"
|
||||||
|
:icon="ZoomIn"
|
||||||
|
aria-label="放大"
|
||||||
|
@click="sendControl('zoom-in')"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
class="zoom-btn"
|
||||||
|
:icon="ZoomOut"
|
||||||
|
aria-label="缩小"
|
||||||
|
@click="sendControl('zoom-out')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="function-grid">
|
||||||
|
<el-button
|
||||||
|
v-for="item in functionButtons"
|
||||||
|
:key="item"
|
||||||
|
class="function-btn"
|
||||||
|
@click="sendControl(item)"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
|
||||||
|
import {
|
||||||
|
Aim,
|
||||||
|
ArrowDown,
|
||||||
|
ArrowLeft,
|
||||||
|
ArrowRight,
|
||||||
|
ArrowUp,
|
||||||
|
ZoomIn,
|
||||||
|
ZoomOut,
|
||||||
|
} from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const WS_STREAM_URL = import.meta.env.VITE_VIDEO_WS_URL || 'ws://localhost:8080/video'
|
||||||
|
const MIME_CODEC =
|
||||||
|
import.meta.env.VITE_VIDEO_MIME_CODEC || 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
|
||||||
|
|
||||||
|
const videoRef = ref(null)
|
||||||
|
const wsRef = ref(null)
|
||||||
|
const mediaSourceRef = ref(null)
|
||||||
|
const sourceBufferRef = ref(null)
|
||||||
|
const queue = []
|
||||||
|
const connectionState = ref('连接中')
|
||||||
|
const streamUrl = computed(() => WS_STREAM_URL)
|
||||||
|
const functionButtons = [
|
||||||
|
'功能1',
|
||||||
|
'功能2',
|
||||||
|
'功能3',
|
||||||
|
'功能4',
|
||||||
|
'功能5',
|
||||||
|
'功能6'
|
||||||
|
]
|
||||||
|
|
||||||
|
function appendNextChunk() {
|
||||||
|
const sourceBuffer = sourceBufferRef.value
|
||||||
|
|
||||||
|
if (!sourceBuffer || sourceBuffer.updating || queue.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
sourceBuffer.appendBuffer(queue.shift())
|
||||||
|
} catch (error) {
|
||||||
|
connectionState.value = '视频数据异常'
|
||||||
|
console.error('Append video chunk failed:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupMediaSource() {
|
||||||
|
const video = videoRef.value
|
||||||
|
|
||||||
|
if (!video || !window.MediaSource) {
|
||||||
|
connectionState.value = '浏览器不支持 MediaSource'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const mediaSource = new MediaSource()
|
||||||
|
mediaSourceRef.value = mediaSource
|
||||||
|
video.src = URL.createObjectURL(mediaSource)
|
||||||
|
|
||||||
|
mediaSource.addEventListener('sourceopen', () => {
|
||||||
|
if (!MediaSource.isTypeSupported(MIME_CODEC)) {
|
||||||
|
connectionState.value = '视频编码不支持'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
sourceBufferRef.value = mediaSource.addSourceBuffer(MIME_CODEC)
|
||||||
|
sourceBufferRef.value.mode = 'segments'
|
||||||
|
sourceBufferRef.value.addEventListener('updateend', appendNextChunk)
|
||||||
|
connectStream()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function connectStream() {
|
||||||
|
const ws = new WebSocket(WS_STREAM_URL)
|
||||||
|
ws.binaryType = 'arraybuffer'
|
||||||
|
wsRef.value = ws
|
||||||
|
|
||||||
|
ws.addEventListener('open', () => {
|
||||||
|
connectionState.value = '已连接'
|
||||||
|
})
|
||||||
|
|
||||||
|
ws.addEventListener('message', (event) => {
|
||||||
|
if (typeof event.data === 'string') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
queue.push(event.data)
|
||||||
|
appendNextChunk()
|
||||||
|
})
|
||||||
|
|
||||||
|
ws.addEventListener('close', () => {
|
||||||
|
connectionState.value = '连接已断开'
|
||||||
|
})
|
||||||
|
|
||||||
|
ws.addEventListener('error', () => {
|
||||||
|
connectionState.value = '连接失败'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendControl(action) {
|
||||||
|
const ws = wsRef.value
|
||||||
|
const payload = JSON.stringify({
|
||||||
|
type: 'control',
|
||||||
|
action,
|
||||||
|
sentAt: new Date().toISOString(),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (ws?.readyState === WebSocket.OPEN) {
|
||||||
|
ws.send(payload)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(setupMediaSource)
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
wsRef.value?.close()
|
||||||
|
|
||||||
|
if (videoRef.value?.src) {
|
||||||
|
URL.revokeObjectURL(videoRef.value.src)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 5173,
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue