zhoulexin
/
sopSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: zhoulexin:main
Branches Tags
zhoulexin:zlx
zhoulexin:main
zhoulexin:yjc
..
compare: zhoulexin:zlx
Branches Tags
zhoulexin:zlx
zhoulexin:main
zhoulexin:yjc

2 Commits
main ... zlx

Author SHA1 Message Date
zhoulexin 8ff1b05f22 fix:联调算法 14 hours ago
zhoulexin 69259d9de7 feat:初始化代码 4 days ago
37 changed files with 8692 additions and 0 deletions
Show Stats

8
.env.development
Unescape Escape View File

@ -0,0 +1,8 @@
# 开发环境配置
VITE_APP_TITLE = 'SOP作业检测系统'
# 后端接口地址
VITE_API_BASE_URL = 'http://10.23.22.43:8188/api'
# 请求超时时间（毫秒）
VITE_API_TIMEOUT = 15000

8
.env.production
Unescape Escape View File

@ -0,0 +1,8 @@
# 生产环境配置
VITE_APP_TITLE = 'SOP作业检测系统'
# 后端接口地址
VITE_API_BASE_URL = '/api'
# 请求超时时间（毫秒）
VITE_API_TIMEOUT = 15000

24
.gitignore vendored
Unescape Escape View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

13
index.html
Unescape Escape View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SOP作业检测系统</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2878
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
package.json
Unescape Escape View File

@ -0,0 +1,27 @@
{
"name": "sop-system",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"axios": "^1.18.1",
"echarts": "^6.1.0",
"element-plus": "^2.9.7",
"pinia": "^2.3.0",
"vue": "^3.5.38",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.7",
"sass": "^1.83.0",
"unplugin-auto-import": "^0.19.0",
"unplugin-vue-components": "^0.28.0",
"vite": "^8.1.0"
}
}

1819
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

3
pnpm-workspace.yaml
Unescape Escape View File

@ -0,0 +1,3 @@
allowBuilds:
'@parcel/watcher': false
vue-demi: false

6
public/favicon.svg
Unescape Escape View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="6" fill="#2d5af0"/>
<path d="M8 10h6v12H8V10zm10 0h6v12h-6V10z" fill="white" opacity="0.9"/>
<path d="M11 14h12M11 18h12" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
<circle cx="20" cy="12" r="2" fill="#22c55e"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 363 B

11
src/App.vue
Unescape Escape View File

@ -0,0 +1,11 @@
<template>
<router-view />
</template>
<script setup>
import { useUserStore } from '@/stores/user'
import { computed } from 'vue'
const userStore = useUserStore()
const isLoggedIn = computed(() => userStore.isLoggedIn)
</script>

37
src/api/index.js
Unescape Escape View File

@ -0,0 +1,37 @@
import request from '@/utils/request'
// ============ 登录相关 ============
/**
* 账号密码登录
* @param {Object} data - { username, password }
*/
export function loginApi(data) {
return request({
url: '/auth/login',
method: 'post',
data
})
}
/**
* 获取用户信息
*/
export function getUserInfoApi() {
return request({
url: '/user/info',
method: 'get'
})
}
// ============ 后续在此添加业务接口 ============
/**
* 示例：获取首页统计数据
*/
export function getHomeStatsApi() {
return request({
url: '/home/stats',
method: 'get'
})
}

282
src/components/WebRtcPlayer.vue
Unescape Escape View File

@ -0,0 +1,282 @@
<template>
<div class="webrtc-wrapper">
<video
ref="videoRef"
autoplay
muted
playsinline
class="video-player"
></video>
<!-- 加载状态 -->
<div v-if="loading" class="loading-overlay">
<span class="spinner"></span>
<span>连接中...</span>
</div>
<!-- 录制状态指示器 -->
<div v-if="isRecording" class="recording-indicator">
<span class="dot"></span> 录制中 {{ recordTime }}s
</div>
<div v-if="error" class="error-overlay">{{ error }}</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
src: { type: String, required: true }
});
// 监听 src 变化，重新连接
watch(() => props.src, (newSrc, oldSrc) => {
if (newSrc && newSrc !== oldSrc) {
disconnect();
connect();
}
});
// 暴露给父组件的方法
const emit = defineEmits(['record-status-change','record-complete','connection-status']);
const videoRef = ref(null);
const error = ref('');
const loading = ref(false);
let pc = null;
// --- 录屏相关状态 ---
const isRecording = ref(false);
const recordTime = ref(0);
let mediaRecorder = null;
let recordedChunks = [];
let timerInterval = null;
// 1. 断开 WebRTC 连接
const disconnect = () => {
if (pc) {
pc.close();
pc = null;
}
if (videoRef.value) {
videoRef.value.srcObject = null;
}
error.value = '';
};
// 2. 连接 WebRTC
const connect = async () => {
loading.value = true;
error.value = '';
try {
pc = new RTCPeerConnection();
pc.ontrack = (event) => {
if (videoRef.value && event.streams[0]) {
videoRef.value.srcObject = event.streams[0];
emit('connection-status', true);
}
};
pc.addTransceiver('video', { direction: 'recvonly' });
pc.addTransceiver('audio', { direction: 'recvonly' });
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
const res = await fetch(props.src, {
method: 'POST',
headers: { 'Content-Type': 'application/sdp' },
body: pc.localDescription.sdp
});
if (!res.ok) throw new Error(`Status: ${res.status}`);
const answer = await res.text();
await pc.setRemoteDescription({ type: 'answer', sdp: answer });
} catch (e) {
error.value = '连接失败，请检查视频地址';
emit('connection-status', false);
console.error(e);
} finally {
let timeout = setTimeout(() => {
loading.value = false;
clearTimeout(timeout);
}, 1500);
}
};
// 2. 截图功能
const takeSnapshot = () => {
if (!videoRef.value) return null;
const video = videoRef.value;
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 转换为 Blob (格式可选: image/png, image/jpeg)
return new Promise((resolve) => {
canvas.toBlob((blob) => {
resolve(blob);
}, 'image/jpeg', 0.9);
});
};
// 3. 开始录屏
const startRecord = () => {
if (!videoRef.value || isRecording.value) return;
try {
// 捕获视频流的 MediaStream
// 注意：captureStream 是实验性 API，但在现代 Chrome/Edge/Firefox 中支持良好
const stream = videoRef.value.captureStream ? videoRef.value.captureStream() : videoRef.value.mozCaptureStream();
if (!stream) {
error.value = '浏览器不支持捕获视频流';
return;
}
recordedChunks = [];
// 创建 MediaRecorder
// mimeType 可以根据需要选择，例如 'video/webm; codecs=vp9'
mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
recordedChunks = []; // 清空数组释放内存
// 【关键】将 blob 发送给父组件
emit('record-complete', blob);
console.log('录制完成，Blob大小:', blob.size);
};
mediaRecorder.start();
isRecording.value = true;
recordTime.value = 0;
// 计时器
timerInterval = setInterval(() => {
recordTime.value++;
}, 1000);
emit('record-status-change', true);
} catch (err) {
console.error('录制启动失败:', err);
error.value = '录制启动失败';
}
};
// 4. 停止录屏
const stopRecord = () => {
if (mediaRecorder && isRecording.value) {
mediaRecorder.stop();
isRecording.value = false;
clearInterval(timerInterval);
emit('record-status-change', false);
}
};
// 5. 处理录制完成（这里可以改为直接上传后端）
const handleRecordComplete = (blob) => {
console.log('录制完成，文件大小:', blob.size, 'bytes');
// 【示例】如何上传给后端
// uploadVideoToServer(blob);
// 如果需要在前端预览或下载，可以创建 URL
// const url = URL.createObjectURL(blob);
};
// 【可选】上传函数示例
const uploadVideoToServer = async (blob) => {
const formData = new FormData();
formData.append('file', blob, `record_${new Date().getTime()}.webm`);
try {
// 替换为你的后端上传接口
// await axios.post('/api/upload/video', formData);
console.log('视频上传成功');
} catch (e) {
console.error('上传失败', e);
}
};
onMounted(() => connect());
onUnmounted(() => {
if (pc) pc.close();
if (isRecording.value) stopRecord();
});
// 暴露方法给父组件
defineExpose({
takeSnapshot,
startRecord,
stopRecord
});
</script>
<style scoped>
.webrtc-wrapper { width: 100%; height: 100%; position: relative; background: #000; }
.video-player { width: 100%; height: 100%; object-fit: contain; }
.error-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }
.loading-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #409eff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.recording-indicator {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.dot {
width: 8px;
height: 8px;
background-color: red;
border-radius: 50%;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
</style>

134
src/layout/AppHeader.vue
Unescape Escape View File

@ -0,0 +1,134 @@
<template>
<header class="app-header">
<div class="header-left">
<div class="breadcrumb">
<el-icon class="breadcrumb-icon" :size="16"><HomeFilled /></el-icon>
<span class="breadcrumb-text">工作台</span>
</div>
</div>
<div class="header-right">
<el-dropdown trigger="click" placement="bottom-end">
<div class="user-info">
<el-avatar :size="32" class="user-avatar">
<el-icon :size="18"><UserFilled /></el-icon>
</el-avatar>
<span class="user-name">{{ userStore.realName || userStore.username }}</span>
<el-icon class="arrow-down" :size="14"><ArrowDown /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item divided @click="handleLogout">
<el-icon><SwitchButton /></el-icon>
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</header>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()
function handleLogout() {
userStore.logout()
router.push('/login')
}
</script>
<style lang="scss" scoped>
.app-header {
height: $header-height;
background: $bg-white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
border-bottom: 1px solid $border-color;
flex-shrink: 0;
}
.header-left {
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
.breadcrumb-icon {
color: $primary-color;
}
.breadcrumb-text {
font-size: 14px;
color: $text-primary;
font-weight: 500;
}
}
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
.header-actions {
.action-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: $radius-sm;
cursor: pointer;
transition: $transition;
color: $text-secondary;
&:hover {
background: $bg-color;
color: $primary-color;
}
.badge-item {
display: flex;
align-items: center;
justify-content: center;
}
}
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border-radius: $radius-md;
cursor: pointer;
transition: $transition;
&:hover {
background: $bg-color;
}
.user-avatar {
background: linear-gradient(135deg, $primary-color, $primary-light);
}
.user-name {
font-size: 14px;
font-weight: 500;
color: $text-primary;
}
.arrow-down {
color: $text-light;
}
}
}
</style>

67
src/layout/MainLayout.vue
Unescape Escape View File

@ -0,0 +1,67 @@
<template>
<div class="main-layout">
<SideMenu />
<div class="main-container" :class="{ collapsed: appStore.sidebarCollapsed }">
<AppHeader />
<div class="main-content">
<router-view v-slot="{ Component }">
<transition name="fade-slide" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</div>
</template>
<script setup>
import SideMenu from './SideMenu.vue'
import AppHeader from './AppHeader.vue'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
</script>
<style lang="scss" scoped>
.main-layout {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
.main-container {
flex: 1;
display: flex;
flex-direction: column;
margin-left: $sidebar-width;
transition: $transition;
min-width: 0;
&.collapsed {
margin-left: 64px;
}
}
.main-content {
flex: 1;
padding: 20px;
overflow-y: auto;
background-color: $bg-color;
}
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: all 0.3s ease;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateY(8px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateY(-8px);
}
</style>

182
src/layout/SideMenu.vue
Unescape Escape View File

@ -0,0 +1,182 @@
<template>
<aside class="sidebar" :class="{ collapsed: appStore.sidebarCollapsed }">
<div class="logo-area">
<div class="logo-icon">
<svg viewBox="0 0 40 40" width="36" height="36">
<rect width="40" height="40" rx="10" fill="url(#logoGrad)"/>
<path d="M11 14h7v12H11V14zm12 0h7v12h-7V14z" fill="white" opacity="0.85"/>
<path d="M14 18h12M14 22h12" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.45"/>
<defs>
<linearGradient id="logoGrad" x1="0" y1="0" x2="40" y2="40">
<stop offset="0%" stop-color="#2d5af0"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
</defs>
</svg>
</div>
<transition name="fade">
<span v-show="!appStore.sidebarCollapsed" class="logo-title">SOP检测系统</span>
</transition>
</div>
<nav class="menu-list">
<div
v-for="item in menuItems"
:key="item.path"
class="menu-item"
:class="{ active: activeMenu === item.path }"
@click="handleMenuClick(item)"
>
<el-icon class="menu-icon" :size="20">
<component :is="item.icon" />
</el-icon>
<span v-show="!appStore.sidebarCollapsed" class="menu-label">{{ item.title }}</span>
</div>
</nav>
<div class="sidebar-footer">
<div class="collapse-btn" @click="appStore.toggleSidebar()">
<el-icon :size="18">
<Fold v-if="!appStore.sidebarCollapsed" />
<Expand v-else />
</el-icon>
</div>
</div>
</aside>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const menuItems = [
{ path: '/home', title: '首页', icon: 'HomeFilled' }
// 后续在此添加菜单项
]
const activeMenu = computed(() => {
return route.path
})
function handleMenuClick(item) {
router.push(item.path)
}
</script>
<style lang="scss" scoped>
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: $sidebar-width;
background: linear-gradient(180deg, #1a1f2e 0%, #1e2538 100%);
display: flex;
flex-direction: column;
z-index: 100;
transition: $transition;
overflow: hidden;
&.collapsed {
width: 64px;
}
}
.logo-area {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
.logo-icon {
flex-shrink: 0;
}
.logo-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
white-space: nowrap;
letter-spacing: 0.5px;
}
}
.menu-list {
flex: 1;
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: $radius-md;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: $transition;
white-space: nowrap;
.menu-icon {
flex-shrink: 0;
}
.menu-label {
font-size: 14px;
font-weight: 500;
}
&:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
}
&.active {
background: rgba(45, 90, 240, 0.25);
color: #ffffff;
.menu-icon {
color: #7b9ffa;
}
}
}
.sidebar-footer {
padding: 12px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
.collapse-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: $radius-sm;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: $transition;
&:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

30
src/main.js
Unescape Escape View File

@ -0,0 +1,30 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './router'
import { createPersistPlugin } from '@/stores/plugins/persist'
import './styles/global.scss'
import 'element-plus/dist/index.css'
const app = createApp(App)
// Pinia 实例化并注册持久化插件
const pinia = createPinia()
pinia.use(createPersistPlugin({
whiteList: ['token', 'userInfo']
}))
// 全局注册 Element Plus Icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(pinia)
app.use(router)
app.use(ElementPlus, { locale: zhCn })
app.mount('#app')

53
src/router/index.js
Unescape Escape View File

@ -0,0 +1,53 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue'),
meta: { title: '登录', noAuth: true }
},
{
path: '/',
component: () => import('@/layout/MainLayout.vue'),
children: [
{
path: 'home',
name: 'Home',
component: () => import('@/views/home/index.vue'),
meta: { title: '首页', icon: 'HomeFilled' }
}
// 后续在此添加新菜单路由
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
const userStore = useUserStore()
document.title = `${to.meta.title || ''} - SOP作业检测系统`
if (to.meta.noAuth) {
next()
return
}
if (!userStore.isLoggedIn) {
next({ name: 'Login', query: { redirect: to.fullPath } })
return
}
next()
})
export default router

15
src/stores/app.js
Unescape Escape View File

@ -0,0 +1,15 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useAppStore = defineStore('app', () => {
const sidebarCollapsed = ref(false)
function toggleSidebar() {
sidebarCollapsed.value = !sidebarCollapsed.value
}
return {
sidebarCollapsed,
toggleSidebar
}
})

64
src/stores/plugins/persist.js
Unescape Escape View File

@ -0,0 +1,64 @@
/**
* Pinia 持久化插件
* 将指定 store 的状态自动同步到 localStorage，刷新页面不丢失
*/
const STORAGE_PREFIX = 'sop_'
function getStorageKey(storeId) {
return STORAGE_PREFIX + storeId
}
export function createPersistPlugin(options = {}) {
const {
keyPrefix = STORAGE_PREFIX,
whiteList = [], // 需要持久化的字段，为空则全部持久化
storage = localStorage
} = options
return ({ store }) => {
const storageKey = getStorageKey(store.$id)
// 初始化：从 storage 恢复状态
try {
const stored = storage.getItem(storageKey)
if (stored) {
const parsed = JSON.parse(stored)
Object.keys(parsed).forEach((key) => {
if (whiteList.length === 0 || whiteList.includes(key)) {
store[key] = parsed[key]
}
})
}
} catch (e) {
console.error(`[persist] 读取 ${storageKey} 失败:`, e)
}
// 监听变化：状态更新时写入 storage
store.$subscribe((mutation, state) => {
try {
const toSave = {}
const keys = whiteList.length > 0 ? whiteList : Object.keys(state)
keys.forEach((key) => {
if (key in state && !key.startsWith('$')) {
toSave[key] = state[key]
}
})
storage.setItem(storageKey, JSON.stringify(toSave))
} catch (e) {
console.error(`[persist] 写入 ${storageKey} 失败:`, e)
}
})
// 提供清除方法
store.$persistClear = () => {
try {
storage.removeItem(storageKey)
} catch (e) {
console.error(`[persist] 清除 ${storageKey} 失败:`, e)
}
}
}
}

40
src/stores/user.js
Unescape Escape View File

@ -0,0 +1,40 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { loginApi } from '@/api'
export const useUserStore = defineStore('user', () => {
const token = ref('')
const userInfo = ref(null)
const isLoggedIn = computed(() => !!token.value)
const username = computed(() => userInfo.value?.username || '')
const realName = computed(() => userInfo.value?.realName || '')
/**
* 登录
* @param {Object} credentials - { username, password }
*/
async function login(credentials) {
const data = await loginApi(credentials)
// 后端返回的 data 结构：
// { token, tokenType, userId, username, realName, avatar, role, roleName, schoolName }
token.value = data.token
userInfo.value = data
return data
}
function logout() {
token.value = ''
userInfo.value = null
}
return {
token,
userInfo,
isLoggedIn,
username,
realName,
login,
logout
}
})

44
src/styles/global.scss
Unescape Escape View File

@ -0,0 +1,44 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
font-size: 14px;
color: #1e293b;
background-color: #f0f4f8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#app {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
&:hover {
background: #94a3b8;
}
}

26
src/styles/variables.scss
Unescape Escape View File

@ -0,0 +1,26 @@
// 全局SCSS变量
$primary-color: #2d5af0;
$primary-light: #5b7ff5;
$primary-dark: #1a3fb8;
$success-color: #22c55e;
$warning-color: #f59e0b;
$danger-color: #ef4444;
$info-color: #6366f1;
$bg-color: #f0f4f8;
$bg-white: #ffffff;
$text-primary: #1e293b;
$text-secondary: #64748b;
$text-light: #94a3b8;
$border-color: #e2e8f0;
$sidebar-width: 240px;
$header-height: 56px;
$radius-sm: 6px;
$radius-md: 10px;
$radius-lg: 16px;
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

4
src/utils/fileHttp.js
Unescape Escape View File

@ -0,0 +1,4 @@
const fileHttp = {
ptApi: '10.23.22.43:8001'
}
export default fileHttp

87
src/utils/request.js
Unescape Escape View File

@ -0,0 +1,87 @@
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import router from '@/router'
// 创建 axios 实例
const request = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: Number(import.meta.env.VITE_API_TIMEOUT) || 15000,
headers: {
'Content-Type': 'application/json'
}
})
// 请求拦截器
request.interceptors.request.use(
(config) => {
const userStore = useUserStore()
// 如果有 token 则携带
if (userStore.token) {
config.headers.Authorization = `Bearer ${userStore.token}`
}
return config
},
(error) => {
console.error('请求错误:', error)
return Promise.reject(error)
}
)
// 响应拦截器
request.interceptors.response.use(
(response) => {
const res = response.data
// 根据后端约定的数据结构判断
// 假设后端返回格式: { code: 200, data: {...}, message: 'success' }
if (res.code === 200 || res.code === 0) {
return res.data
}
// 业务错误
ElMessage.error(res.message || '请求失败')
return Promise.reject(new Error(res.message || '请求失败'))
},
(error) => {
const { response } = error
if (response) {
const { status, data } = response
switch (status) {
case 401:
// token 过期或未登录
ElMessage.error('登录已过期，请重新登录')
const userStore = useUserStore()
userStore.logout()
router.push({
name: 'Login',
query: { redirect: router.currentRoute.value.fullPath }
})
break
case 403:
ElMessage.error('没有权限访问该资源')
break
case 404:
ElMessage.error('请求的资源不存在')
break
case 500:
ElMessage.error('服务器内部错误')
break
default:
ElMessage.error(data?.message || `请求错误 (${status})`)
}
} else if (error.code === 'ECONNABORTED') {
ElMessage.error('请求超时，请检查网络连接')
} else {
ElMessage.error('网络异常，请检查网络连接')
}
return Promise.reject(error)
}
)
export default request

400
src/utils/websocket.js
Unescape Escape View File

@ -0,0 +1,400 @@
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
/**
* WebSocket 长连接管理类
* 支持心跳检测、自动重连、消息分发等功能
*/
class WebSocketClient {
constructor(options = {}) {
this.url = options.url || '' // WebSocket 地址
this.protocols = options.protocols || [] // 子协议
this.reconnectInterval = options.reconnectInterval || 3000 // 重连间隔（ms）
this.maxReconnectTimes = options.maxReconnectTimes || 10 // 最大重连次数
this.heartbeatInterval = options.heartbeatInterval || 30000 // 心跳间隔（ms）
this.heartbeatTimeout = options.heartbeatTimeout || 5000 // 心跳超时时间（ms）
this.autoReconnect = options.autoReconnect !== false // 是否自动重连，默认 true
this.debug = options.debug || false // 调试模式
this.binaryType = options.binaryType || 'arraybuffer' // 二进制数据类型
this.ws = null // WebSocket 实例
this.reconnectTimes = 0 // 当前重连次数
this.reconnectTimer = null // 重连定时器
this.heartbeatTimer = null // 心跳定时器
this.heartbeatCheckTimer = null // 心跳检测定时器
this.isConnected = false // 是否已连接
this.isDestroyed = false // 是否已销毁
this.pendingMessages = [] // 待发送消息队列
// 事件监听器
this.listeners = {
open: [],
close: [],
error: [],
message: [],
reconnect: [],
heartbeat: []
}
// 心跳消息内容
this.pingMessage = options.pingMessage || JSON.stringify({ type: 'ping' })
this.pongMessage = options.pongMessage || JSON.stringify({ type: 'pong' })
// 绑定 this
this._onOpen = this._onOpen.bind(this)
this._onClose = this._onClose.bind(this)
this._onError = this._onError.bind(this)
this._onMessage = this._onMessage.bind(this)
}
/**
* 连接 WebSocket
* @param {string} url - 可选的连接地址，不传则使用初始化时的地址
*/
connect(url) {
if (this.isDestroyed) return
if (url) {
this.url = url
}
if (!this.url) {
console.error('[WebSocket] 连接地址不能为空')
return
}
// 如果已有连接，先关闭
if (this.ws) {
this.close()
}
this._log('正在连接 WebSocket:', this.url)
try {
if (this.protocols && this.protocols.length > 0) {
this.ws = new WebSocket(this.url, this.protocols)
} else {
this.ws = new WebSocket(this.url)
}
this.ws.onopen = this._onOpen
this.ws.onclose = this._onClose
this.ws.onerror = this._onError
this.ws.onmessage = this._onMessage
this.ws.binaryType = this.binaryType
} catch (err) {
console.error('[WebSocket] 创建连接失败:', err)
this._emit('error', err)
this._tryReconnect()
}
}
/**
* 关闭连接
*/
close() {
this._clearHeartbeat()
this._clearReconnectTimer()
if (this.ws) {
try {
this.ws.onopen = null
this.ws.onclose = null
this.ws.onerror = null
this.ws.onmessage = null
this.ws.close(1000, '客户端主动关闭')
} catch (err) {
this._log('关闭连接出错:', err)
}
this.ws = null
}
this.isConnected = false
}
/**
* 销毁实例（彻底释放资源）
*/
destroy() {
this.isDestroyed = true
this.close()
this.listeners.open = []
this.listeners.close = []
this.listeners.error = []
this.listeners.message = []
this.listeners.reconnect = []
this.listeners.heartbeat = []
this.pendingMessages = []
}
/**
* 发送消息
* @param {string|Object} data - 要发送的数据
*/
send(data) {
const message = typeof data === 'object' ? JSON.stringify(data) : String(data)
if (this.isConnected && this.ws && this.ws.readyState === WebSocket.OPEN) {
this.ws.send(message)
return true
}
// 未连接时加入待发送队列
this.pendingMessages.push(message)
this._log('消息加入待发送队列，当前队列长度:', this.pendingMessages.length)
return false
}
/**
* 发送二进制数据（ArrayBuffer），用于文件切片上传等场景
* @param {ArrayBuffer} buffer - 二进制数据
*/
sendBinary(buffer) {
if (this.isConnected && this.ws && this.ws.readyState === WebSocket.OPEN) {
this.ws.send(buffer)
return true
}
return false
}
// ==================== 事件监听 ====================
on(event, callback) {
if (this.listeners[event]) {
this.listeners[event].push(callback)
}
return this
}
off(event, callback) {
if (this.listeners[event]) {
if (callback) {
this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback)
} else {
this.listeners[event] = []
}
}
return this
}
// ==================== 内置事件处理 ====================
_onOpen(event) {
this.isConnected = true
this.reconnectTimes = 0
this._log('WebSocket 已连接')
this._startHeartbeat()
this._emit('open', event)
// 发送认证信息（带 token）
// this._sendAuthMessage()
// 发送待发送队列中的消息
this._flushPendingMessages()
}
_onClose(event) {
this.isConnected = false
this._clearHeartbeat()
this._log('WebSocket 已关闭, code:', event.code, 'reason:', event.reason)
this._emit('close', event)
// 非主动关闭时自动重连（code 1000 表示主动关闭）
if (event.code !== 1000 && this.autoReconnect && !this.isDestroyed) {
this._tryReconnect()
}
}
_onError(event) {
this._log('WebSocket 发生错误:', event)
this._emit('error', event)
}
_onMessage(event) {
try {
const data = JSON.parse(event.data)
this._log('收到消息:', data)
// 任何服务端消息都视为心跳信号，重置超时检测
if (this.heartbeatCheckTimer) {
clearTimeout(this.heartbeatCheckTimer)
this.heartbeatCheckTimer = null
}
// 处理心跳回复
if (data.type === 'pong') {
return
}
// 处理服务端 ping
if (data.type === 'ping') {
this.send(this.pongMessage)
return
}
this._emit('message', data)
} catch {
// 非 JSON 格式（如二进制文件chunk接收），也重置心跳
if (this.heartbeatCheckTimer) {
clearTimeout(this.heartbeatCheckTimer)
this.heartbeatCheckTimer = null
}
this._emit('message', event.data)
}
}
// ==================== 认证 ====================
_sendAuthMessage() {
try {
const userStore = useUserStore()
if (userStore.token) {
this.send({
type: 'auth',
token: userStore.token
})
}
} catch {
this._log('获取 token 失败，跳过认证')
}
}
// ==================== 心跳机制 ====================
_startHeartbeat() {
this._clearHeartbeat()
// heartbeatInterval 为 0 或非正值时关闭主动心跳
if (!this.heartbeatInterval || this.heartbeatInterval <= 0) return
// 定时发送 ping
this.heartbeatTimer = setInterval(() => {
if (this.isConnected && this.ws) {
this.ws.send(this.pingMessage)
this._log('发送心跳 ping')
// 设置超时检测
this.heartbeatCheckTimer = setTimeout(() => {
this._log('心跳超时，准备重连')
this._emit('heartbeat', { status: 'timeout' })
this.close()
this._tryReconnect()
}, this.heartbeatTimeout)
}
}, this.heartbeatInterval)
}
_clearHeartbeat() {
if (this.heartbeatTimer) {
clearInterval(this.heartbeatTimer)
this.heartbeatTimer = null
}
if (this.heartbeatCheckTimer) {
clearTimeout(this.heartbeatCheckTimer)
this.heartbeatCheckTimer = null
}
}
// ==================== 重连机制 ====================
_tryReconnect() {
if (this.isDestroyed || !this.autoReconnect) return
if (this.reconnectTimes >= this.maxReconnectTimes) {
this._log('已达到最大重连次数，停止重连')
ElMessage.error('连接服务器失败，请刷新页面重试')
return
}
this.reconnectTimes++
this._log(`第 ${this.reconnectTimes} 次重连...`)
this._emit('reconnect', {
times: this.reconnectTimes,
maxTimes: this.maxReconnectTimes
})
// 指数退避：重连间隔逐渐增大（最大 30 秒）
const interval = Math.min(
this.reconnectInterval * Math.pow(1.5, this.reconnectTimes - 1),
30000
)
this._clearReconnectTimer()
this.reconnectTimer = setTimeout(() => {
this.connect()
}, interval)
}
_clearReconnectTimer() {
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer)
this.reconnectTimer = null
}
}
// ==================== 内部工具方法 ====================
_emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach((callback) => {
try {
callback(data)
} catch (err) {
console.error(`[WebSocket] ${event} 事件回调出错:`, err)
}
})
}
}
_flushPendingMessages() {
while (this.pendingMessages.length > 0) {
const msg = this.pendingMessages.shift()
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
this.ws.send(msg)
}
}
}
_log(...args) {
if (this.debug) {
console.log('[WebSocket]', ...args)
}
}
/**
* 获取当前连接状态
* @returns {number} 0-未连接, 1-已连接, 2-正在连接, 3-正在关闭
*/
getReadyState() {
return this.ws ? this.ws.readyState : WebSocket.CLOSED
}
/**
* 是否已连接
*/
get connected() {
return this.isConnected
}
}
// 单例模式 - 全局默认 WebSocket 实例（可选使用）
let defaultInstance = null
/**
* 获取或创建全局默认 WebSocket 实例
* @param {Object} options - 配置选项
* @returns {WebSocketClient}
*/
export function useWebSocket(options = {}) {
if (!defaultInstance || options.forceNew) {
if (defaultInstance && options.forceNew) {
defaultInstance.destroy()
}
defaultInstance = new WebSocketClient(options)
}
return defaultInstance
}
export default WebSocketClient

173
src/views/home/components/ChartsPanel.vue
Unescape Escape View File

@ -0,0 +1,173 @@
<template>
<div class="charts-panel">
<div class="chart-box">
<div ref="pieChartRef" class="chart"></div>
</div>
<div class="chart-box">
<div ref="barChartRef" class="chart"></div>
</div>
</div>
</template>
<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts/core'
import { PieChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, MarkLineComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, MarkLineComponent, CanvasRenderer])
const props = defineProps({
processStats: { type: Object, default: () => ({ completed: 0, incomplete: 0 }) },
counts: { type: Array, default: () => [] }
})
const pieChartRef = ref(null)
const barChartRef = ref(null)
let pieInstance = null
let barInstance = null
function initCharts() {
if (pieChartRef.value) {
pieInstance = echarts.init(pieChartRef.value)
}
if (barChartRef.value) {
barInstance = echarts.init(barChartRef.value)
}
}
function updatePieChart() {
if (!pieInstance) return
const { completed, incomplete } = props.processStats
pieInstance.setOption({
title: { text: '流程完成状态', left: 'center', textStyle: { fontSize: 14 } },
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
legend: { bottom: 25 },
series: [{
type: 'pie',
radius: ['30%', '60%'],
center: ['50%', '50%'],
data: [
{ name: '已完成', value: completed, itemStyle: { color: '#67c23a' } },
{ name: '未完成', value: incomplete, itemStyle: { color: '#e6a23c' } }
],
label: { show: true, formatter: '{b}\n{c}个' }
}]
})
}
function lightenColor(hex, amount) {
const num = parseInt(hex.slice(1), 16)
const r = Math.min(255, (num >> 16) + Math.round((255 - (num >> 16)) * amount))
const g = Math.min(255, ((num >> 8) & 0xff) + Math.round((255 - ((num >> 8) & 0xff)) * amount))
const b = Math.min(255, (num & 0xff) + Math.round((255 - (num & 0xff)) * amount))
return `rgb(${r},${g},${b})`
}
function updateBarChart() {
if (!barInstance) return
const names = props.counts.map(item => item.name)
const colors = ['#ff4500', '#FFA500', '#C0C0C0', '#32CD32', '#00CED1', '#4169E1', '#9932CC', '#FF1493', '#8B4513']
// 实际值 — 深色，每个柱子不同颜色
const actualData = props.counts.map((item, idx) => ({
value: item.count,
itemStyle: { color: colors[idx % colors.length], borderRadius: [0, 0, 4, 4] }
}))
// 剩余值（9 - 实际值）— 用当前数据的浅色版本
const remainData = props.counts.map((item, idx) => ({
value: Math.max(0, 9 - item.count),
itemStyle: { color: lightenColor(colors[idx % colors.length], 0.7), borderRadius: [4, 4, 0, 0] }
}))
barInstance.setOption({
title: { text: '检测计数', left: 'center', textStyle: { fontSize: 14 } },
tooltip: {
trigger: 'axis',
formatter(params) {
const actual = params.find(p => p.seriesName === '实际值')
if (!actual) return ''
return `${actual.name}<br/>${actual.marker} 检测数: ${actual.value}/9`
}
},
grid: { left: '5%', right: '5%', bottom: '5%', top: '15%', containLabel: true },
xAxis: { type: 'category', data: names, axisLabel: { rotate: 30, fontSize: 12 } },
yAxis: {
type: 'value',
minInterval: 1,
max: 9,
splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }
},
series: [
{
type: 'bar',
name: '实际值',
stack: 'total',
barWidth: 22,
data: actualData,
markLine: {
silent: true,
symbol: 'none',
lineStyle: { color: '#e6a23c', type: 'dashed', width: 2 },
label: {
formatter: '上限: 9',
color: '#e6a23c',
fontSize: 12,
position: 'insideEndTop'
},
data: [{ yAxis: 9 }]
}
},
{
type: 'bar',
name: '',
stack: 'total',
barWidth: 22,
data: remainData
}
]
})
}
watch(() => ({ ...props.processStats }), updatePieChart, { deep: true })
watch(() => [...props.counts], updateBarChart, { deep: true })
onMounted(() => {
nextTick(() => {
initCharts()
updatePieChart()
updateBarChart()
})
})
onUnmounted(() => {
pieInstance?.dispose()
barInstance?.dispose()
})
</script>
<style lang="scss" scoped>
.charts-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
.chart-box {
flex: 1;
background: $bg-white;
border-radius: $radius-md;
box-shadow: $shadow-sm;
overflow: hidden;
min-height: 0;
.chart {
width: 100%;
height: 100%;
min-height: 200px;
}
}
}
</style>

46
src/views/home/components/ControlButtons.vue
Unescape Escape View File

@ -0,0 +1,46 @@
<template>
<div class="control-buttons">
<el-button
:type="streamRunning ? 'danger' : 'primary'"
size="default"
@click="$emit('toggleStream')"
:disabled="streamAddressEmpty || (algorithmRunning && !streamRunning)"
>
{{ streamRunning ? '关闭视频流' : '启动视频流' }}
</el-button>
<el-button
:type="algorithmRunning ? 'danger' : 'success'"
size="default"
@click="$emit('toggleAlgorithm')"
:disabled="offlineVideoMissing"
>
{{ algorithmRunning ? '关闭算法' : '启动算法' }}
</el-button>
</div>
</template>
<script setup>
defineProps({
streamRunning: Boolean,
algorithmRunning: Boolean,
streamAddressEmpty: Boolean,
offlineVideoMissing: Boolean
})
defineEmits(['toggleStream', 'toggleAlgorithm'])
</script>
<style lang="scss" scoped>
.control-buttons {
display: flex;
gap: 12px;
background: $bg-white;
padding: 16px;
border-radius: $radius-md;
box-shadow: $shadow-sm;
.el-button {
flex: 1;
}
}
</style>

64
src/views/home/components/CountsCard.vue
Unescape Escape View File

@ -0,0 +1,64 @@
<template>
<div class="counts-card" v-if="hasCounts">
<div class="counts-header">检测计数</div>
<div class="counts-body">
<div class="count-item" v-for="(item, index) in counts" :key="index">
<span class="count-label">{{ item.name }}</span>
<span class="count-value">{{ item.count }}</span>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
counts: { type: Array, default: () => [] }
})
const hasCounts = computed(() => props.counts.length > 0)
</script>
<style lang="scss" scoped>
.counts-card {
background: $bg-white;
border-radius: $radius-md;
box-shadow: $shadow-sm;
overflow: hidden;
.counts-header {
padding: 10px 16px;
background: #e3f2fd;
font-size: 14px;
font-weight: 600;
color: #1565c0;
}
.counts-body {
padding: 10px 16px;
display: flex;
flex-wrap: wrap;
gap: 6px;
.count-item {
flex: 1 1 calc(50% - 6px);
display: flex;
justify-content: space-between;
padding: 6px 10px;
background: #f5f5f5;
border-radius: 6px;
font-size: 13px;
.count-label {
color: $text-secondary;
}
.count-value {
font-weight: 700;
color: $primary-color;
}
}
}
}
</style>

66
src/views/home/components/DetectionProgress.vue
Unescape Escape View File

@ -0,0 +1,66 @@
<template>
<div class="video-bottom-controls" v-if="visible">
<div class="detect-progress">
<div class="progress-info">
<span>{{ statusText || '检测中...' }}</span>
<span class="progress-pct">{{ progress.toFixed(1) }}%</span>
</div>
<el-progress :percentage="Math.round(progress)" :stroke-width="8" />
<div class="progress-actions">
<el-button size="small" :type="paused ? 'warning' : 'info'" @click="$emit('togglePause')" :disabled="ending">
<el-icon :size="14"><component :is="paused ? 'VideoPlay' : 'VideoPause'" /></el-icon>
{{ paused ? '恢复处理' : '暂停处理' }}
</el-button>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
visible: Boolean,
progress: { type: Number, default: 0 },
statusText: String,
paused: Boolean,
ending: Boolean
})
defineEmits(['togglePause'])
</script>
<style lang="scss" scoped>
.video-bottom-controls {
display: flex;
justify-content: center;
gap: 16px;
padding: 8px 0;
.detect-progress {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
.progress-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: $text-secondary;
.progress-pct {
color: $primary-color;
font-weight: 600;
}
}
.progress-actions {
display: flex;
gap: 8px;
.el-button {
flex: 1;
}
}
}
}
</style>

103
src/views/home/components/FlowLog.vue
Unescape Escape View File

@ -0,0 +1,103 @@
<template>
<div class="log-section">
<div class="log-header">流程日志</div>
<div class="log-body" ref="logBodyRef">
<div
v-for="(log, index) in logs"
:key="index"
class="log-item"
:class="'log-' + log.type"
>
<span class="log-time">{{ log.time }}</span>
<div class="log-msg">{{ log.message }}</div>
</div>
<div v-if="logs.length === 0" class="log-empty">暂无日志</div>
</div>
</div>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
const props = defineProps({
logs: { type: Array, default: () => [] }
})
const logBodyRef = ref(null)
watch(() => props.logs.length, () => {
nextTick(() => {
if (logBodyRef.value) {
logBodyRef.value.scrollTop = logBodyRef.value.scrollHeight
}
})
})
</script>
<style lang="scss" scoped>
.log-section {
flex: 1;
display: flex;
flex-direction: column;
background: #fffacd;
border-radius: $radius-md;
overflow: hidden;
box-shadow: $shadow-sm;
min-height: 0;
.log-header {
padding: 10px 16px;
background: #fff176;
font-size: 14px;
font-weight: 600;
color: $text-primary;
}
.log-body {
flex: 1;
padding: 10px 16px;
overflow-y: auto;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
line-height: 1.6;
.log-item {
width: 200%;
padding: 4px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
&:last-child {
border-bottom: none;
}
.log-time {
color: #666;
margin-right: 8px;
}
.log-msg {
color: $text-primary;
white-space: pre-wrap;
}
&.log-success .log-msg {
color: $success-color;
}
&.log-error .log-msg {
color: $danger-color;
}
&.log-warning .log-msg {
color: $warning-color;
}
}
.log-empty {
text-align: center;
color: #999;
padding: 20px 0;
}
}
}
</style>

104
src/views/home/components/VideoPlayer.vue
Unescape Escape View File

@ -0,0 +1,104 @@
<template>
<div class="video-container">
<!-- 实时流模式 -->
<WebRtcPlayer
v-if="videoMode === 'live'"
:src="webrtcUrl"
@connection-status="$emit('connectionChange', $event)"
/>
<!-- 离线视频模式 -->
<div v-else-if="videoMode === 'offline'" class="offline-player">
<video
ref="offlineVideoRef"
:src="offlineVideoUrl"
class="video-element"
controls
></video>
</div>
<!-- 空状态 -->
<div v-else class="empty-video">
<el-icon :size="48"><VideoCamera /></el-icon>
<p class="empty-title">暂无视频画面</p>
<p class="empty-hint">点击上方「切换」加载实时流，或上传离线视频</p>
</div>
</div>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import WebRtcPlayer from '@/components/WebRtcPlayer.vue'
const props = defineProps({
videoMode: String,
webrtcUrl: String,
offlineVideoUrl: String,
videoAutoplayTrigger: Number
})
defineEmits(['connectionChange'])
const offlineVideoRef = ref(null)
// 外部触发自动播放（启动算法时）
watch(() => props.videoAutoplayTrigger, () => {
if (props.videoMode === 'offline') {
nextTick(() => offlineVideoRef.value?.play())
}
})
</script>
<style lang="scss" scoped>
.video-container {
flex: 1;
background: #1a1a2e;
border-radius: $radius-md;
overflow: hidden;
position: relative;
min-height: 300px;
:deep(.webrtc-wrapper) {
width: 100%;
height: 100%;
}
.offline-player {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
.video-element {
flex: 1;
width: 100%;
height: 100%;
min-height: 0;
object-fit: contain;
background: #000;
}
}
.empty-video {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.5);
.empty-title {
margin-top: 16px;
font-size: 16px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
}
.empty-hint {
margin-top: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.3);
}
}
}
</style>

76
src/views/home/components/VideoToolbar.vue
Unescape Escape View File

@ -0,0 +1,76 @@
<template>
<div class="video-toolbar">
<div class="stream-info">
<span class="label">实时视频流:</span>
<el-input
:model-value="streamAddress"
size="small"
placeholder="输入地址如: 10.23.22.xx"
class="stream-input"
@update:model-value="$emit('update:streamAddress', $event)"
/>
<el-button type="primary" size="small" @click="$emit('switchStream')" :disabled="disabled">切换</el-button>
</div>
<div class="upload-area">
<el-upload
:auto-upload="false"
:show-file-list="false"
accept="video/*"
:on-change="handleUpload"
:disabled="disabled"
>
<el-button size="small">
<el-icon :size="14"><Upload /></el-icon>
离线视频
</el-button>
</el-upload>
</div>
</div>
</template>
<script setup>
const props = defineProps({
streamAddress: String,
disabled: Boolean
})
const emit = defineEmits(['update:streamAddress', 'switchStream', 'uploadVideo'])
function handleUpload(file) {
emit('uploadVideo', file)
}
</script>
<style lang="scss" scoped>
.video-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
background: $bg-white;
padding: 12px 16px;
border-radius: $radius-md;
box-shadow: $shadow-sm;
.stream-info {
display: flex;
align-items: center;
gap: 8px;
.label {
font-size: 13px;
color: $text-secondary;
white-space: nowrap;
}
.stream-input {
width: 180px;
}
}
.upload-area {
:deep(.el-upload) {
display: block;
}
}
}
</style>

452
src/views/home/index.vue
Unescape Escape View File

@ -0,0 +1,452 @@
<template>
<div class="home-page">
<div class="left-section">
<ControlButtons
:stream-running="streamRunning"
:algorithm-running="algorithmRunning"
:stream-address-empty="!streamAddress"
:offline-video-missing="!offlineVideoUrl"
@toggle-stream="toggleStream"
@toggle-algorithm="toggleAlgorithm"
/>
<div class="stats-panel">
<div v-for="item in detectCounts" :key="item.name" class="stat-box">
<div class="stat-label">{{ item.name }}</div>
<div class="stat-value">{{ item.count }}</div>
</div>
</div>
<FlowLog :logs="flowLogs" />
</div>
<div class="center-section">
<VideoToolbar
:stream-address="streamAddress"
:disabled="algorithmRunning || streamRunning"
@update:stream-address="streamAddress = $event"
@switch-stream="switchStream"
@upload-video="handleVideoUpload"
/>
<VideoPlayer
:video-mode="videoMode"
:webrtc-url="webrtcUrl"
:offline-video-url="offlineVideoUrl"
:video-autoplay-trigger="videoAutoplayTrigger"
@connection-change="onConnectionChange"
/>
<DetectionProgress
:visible="videoMode === 'offline' && !!offlineVideoUrl && algorithmRunning"
:progress="detectProgress"
:status-text="detectStatusText"
:paused="paused"
:ending="ending"
@toggle-pause="togglePause"
/>
</div>
<div class="right-section">
<ChartsPanel :process-stats="processStats" :counts="detectCounts" />
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import WebSocketClient from '@/utils/websocket'
import VideoToolbar from './components/VideoToolbar.vue'
import VideoPlayer from './components/VideoPlayer.vue'
import DetectionProgress from './components/DetectionProgress.vue'
import ControlButtons from './components/ControlButtons.vue'
import FlowLog from './components/FlowLog.vue'
import ChartsPanel from './components/ChartsPanel.vue'
import fileHttp from '@/utils/fileHttp.js'
// ============ 视频流相关 ============
const videoMode = ref('idle')
const streamAddress = ref('')
const webrtcUrl = computed(() => {
return import.meta.env.VITE_WEBRTC_URL || `http://${streamAddress.value}/stream`
})
const streamRunning = ref(false)
function switchStream() {
if (!streamAddress.value) {
ElMessage.warning('请输入视频流地址')
return
}
videoMode.value = 'live'
ElMessage.success('已切换到实时视频流')
}
function toggleStream() {
streamRunning.value = !streamRunning.value
if (streamRunning.value) {
// 防呆：如果已有上传的离线视频，清空它，避免启动算法按钮未禁用
if (offlineVideoUrl.value) {
URL.revokeObjectURL(offlineVideoUrl.value)
offlineVideoUrl.value = ''
detectionFile.value = null
resetDetectionState()
addLog('已清空离线视频文件，如需检测请重新上传', 'warning')
}
videoMode.value = 'live'
ElMessage.success('视频流已启动')
} else {
videoMode.value = 'idle'
ElMessage.info('视频流已关闭')
}
}
function onConnectionChange(status) {
streamRunning.value = status
}
// ============ 离线视频相关 ============
const offlineVideoUrl = ref('')
const detectionFile = ref(null)
function handleVideoUpload(file) {
if (offlineVideoUrl.value) {
URL.revokeObjectURL(offlineVideoUrl.value)
}
offlineVideoUrl.value = URL.createObjectURL(file.raw)
detectionFile.value = file.raw
videoMode.value = 'offline'
resetDetectionState()
ElMessage.success('离线视频已加载')
}
// ============ 离线视频检测（WebSocket 协议） ============
const WS_URL = `ws://${fileHttp.ptApi}/ws/detect`
const HTTP_BASE = `http://${fileHttp.ptApi}`
const detectProgress = ref(0)
const detectStatusText = ref('')
const DEFAULT_COUNTS = [
{ name: '附件包白板', count: 0 },
{ name: '充电头', count: 0 },
{ name: '充电线1', count: 0 },
{ name: '充电线2', count: 0 },
{ name: '附件包', count: 0 },
{ name: '产品1', count: 0 },
{ name: '隔板', count: 0 },
{ name: '信封', count: 0 },
{ name: '胶带', count: 0 }
]
const detectCounts = reactive(DEFAULT_COUNTS.map(c => ({ ...c })))
const processStats = reactive({ completed: 0, incomplete: 0 })
function mergeCounts(newCounts) {
newCounts.forEach(newItem => {
const existing = detectCounts.find(item => item.name === newItem.name)
if (existing) {
existing.count = newItem.count
}
})
}
function resetDetectionState() {
detectProgress.value = 0
detectStatusText.value = ''
detectCounts.forEach(item => { item.count = 0 })
processStats.completed = 0
processStats.incomplete = 0
}
async function sendFileInChunks(socket, file) {
const chunkSize = 1024 * 1024
let offset = 0
while (offset < file.size) {
const chunk = file.slice(offset, offset + chunkSize)
const buffer = await chunk.arrayBuffer()
socket.sendBinary(buffer)
offset += chunkSize
}
}
// ============ 算法控制 ============
const algorithmRunning = ref(false)
const paused = ref(false)
const ending = ref(false)
let wsClient = null
const videoAutoplayTrigger = ref(0)
function toggleAlgorithm() {
if (algorithmRunning.value && videoMode.value === 'offline' && detectionFile.value) {
endDetection()
return
}
algorithmRunning.value = !algorithmRunning.value
if (algorithmRunning.value) {
paused.value = false
ending.value = false
flowLogs.value = []
if (videoMode.value === 'offline' && detectionFile.value) {
resetDetectionState()
detectStatusText.value = '正在连接 WebSocket...'
addLog('开始连接算法检测服务', 'info')
// 触发视频自动播放
videoAutoplayTrigger.value++
wsClient = new WebSocketClient({
url: WS_URL,
binaryType: 'arraybuffer',
autoReconnect: false,
heartbeatInterval: 0,
heartbeatTimeout: 0,
debug: false
})
wsClient.on('open', () => {
detectStatusText.value = '已连接，正在打开算法开关...'
addLog('WebSocket 已连接，发送算法开关', 'info')
wsClient.send({ type: 'switch', enabled: true })
})
wsClient.on('message', async (msg) => {
switch (msg.type) {
case 'ready':
addLog('服务端 ready', 'info')
break
case 'switch':
addLog('算法开关已开启', 'success')
wsClient.send({
type: 'start',
filename: detectionFile.value.name,
options: {
conf: 0.6, iou: 0.45, skip: 5, imgsz: 640, max_frames: 0, save_video: true
}
})
break
case 'upload_started':
detectStatusText.value = '正在上传视频...'
addLog('开始上传视频文件', 'info')
await sendFileInChunks(wsClient, detectionFile.value)
wsClient.send({ type: 'end' })
addLog('视频上传完成，等待服务端处理', 'info')
break
case 'processing_started':
detectStatusText.value = '服务端正在处理视频...'
addLog('检测开始', 'success')
break
case 'pause':
paused.value = Boolean(msg.paused)
addLog(msg.message || (paused.value ? '检测已暂停' : '检测已恢复'), 'warning')
break
case 'progress':
detectProgress.value = Number(msg.progress || 0)
detectStatusText.value = `处理中 (${msg.frame || 0}/${msg.total_frames || 0})`
break
case 'counts':
mergeCounts(msg.counts || [])
break
case 'log':
addLog(msg.message || '', 'info')
break
case 'stopping':
ending.value = true
detectStatusText.value = msg.message || '正在结束检测...'
addLog(msg.message || '已请求结束检测', 'warning')
break
case 'cancelled':
ending.value = true
detectStatusText.value = msg.message || '检测已结束，正在生成当前结果...'
addLog(msg.message || '检测已结束', 'warning')
break
case 'done':
const videoUrl = HTTP_BASE.replace(/\/$/, '') + msg.output_video_url
if (offlineVideoUrl.value) {
URL.revokeObjectURL(offlineVideoUrl.value)
}
offlineVideoUrl.value = videoUrl
videoMode.value = 'offline'
detectStatusText.value = '检测完成'
detectProgress.value = 100
addLog('检测完成，视频已更新', 'success')
// 更新流程统计（饼图数据）
const processes = msg.processes || []
processStats.completed = processes.filter(p => p.is_complete).length
processStats.incomplete = processes.filter(p => !p.is_complete).length
// 更新检测计数（柱状图数据）
mergeCounts(msg.counts || [])
ElMessage.success('视频检测完成')
algorithmRunning.value = false
paused.value = false
ending.value = false
wsClient.close()
videoAutoplayTrigger.value++
break
case 'error':
detectStatusText.value = '检测出错'
addLog('服务端错误: ' + (msg.message || ''), 'error')
ElMessage.error(msg.message || '服务端处理出错')
algorithmRunning.value = false
paused.value = false
ending.value = false
wsClient.close()
break
}
})
wsClient.on('close', () => {
addLog('连接关闭', 'warning')
algorithmRunning.value = false
paused.value = false
ending.value = false
})
wsClient.on('error', () => {
detectStatusText.value = '连接失败'
addLog('WebSocket 连接失败，请检查服务地址', 'error')
ElMessage.error('WebSocket 连接失败')
algorithmRunning.value = false
paused.value = false
ending.value = false
})
wsClient.connect()
} else if (videoMode.value === 'offline' && !detectionFile.value) {
ElMessage.warning('请先上传离线视频')
algorithmRunning.value = false
} else {
wsClient = new WebSocketClient({
url: WS_URL, debug: true, autoReconnect: true
})
wsClient.on('open', () => {
ElMessage.success('算法已启动')
addLog('算法连接成功', 'info')
})
wsClient.on('message', (data) => {
console.log('[WebSocket] 收到算法数据:', data)
})
wsClient.on('close', () => addLog('算法连接已关闭', 'warning'))
wsClient.on('error', () => addLog('算法连接出错', 'error'))
wsClient.connect()
}
} else {
if (wsClient) {
wsClient.destroy()
wsClient = null
}
ElMessage.info('算法已关闭')
addLog('算法已关闭', 'info')
}
}
function togglePause() {
if (!wsClient || wsClient.getReadyState() !== WebSocket.OPEN) return
paused.value = !paused.value
wsClient.send({ type: 'pause', paused: paused.value })
addLog(paused.value ? '发送暂停请求...' : '发送恢复请求...', 'info')
}
function endDetection() {
if (!wsClient || wsClient.getReadyState() !== WebSocket.OPEN || ending.value) return
ending.value = true
detectStatusText.value = '已发送结束请求，等待服务端生成结果...'
addLog('前端请求结束检测', 'warning')
wsClient.send({ type: 'stop' })
}
// ============ 流程日志 ============
const flowLogs = ref([])
function addLog(message, type = 'info') {
const now = new Date()
const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
flowLogs.value.push({ time, message, type })
if (flowLogs.value.length > 200) {
flowLogs.value.shift()
}
}
// ============ 生命周期 ============
onMounted(() => {
addLog('页面已加载，可上传离线视频或连接实时流', 'info')
})
onUnmounted(() => {
if (offlineVideoUrl.value) {
URL.revokeObjectURL(offlineVideoUrl.value)
}
if (wsClient) {
wsClient.destroy()
wsClient = null
}
})
</script>
<style lang="scss" scoped>
.home-page {
display: flex;
gap: 16px;
height: calc(100vh - #{$header-height} - 32px);
padding: 0;
}
.left-section, .right-section{
width: 500px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.left-section{
width: 400px;
}
.center-section{
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
min-height: 0;
}
.stats-panel {
display: flex;
flex-wrap: wrap;
gap: 6px;
.stat-box {
flex: 0 0 calc(33.33% - 4px);
background: $bg-white;
padding: 6px 4px;
border-radius: $radius-md;
box-shadow: $shadow-sm;
text-align: center;
.stat-label {
font-size: 14px;
color: $text-secondary;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stat-value {
font-size: 16px;
font-weight: 700;
color: $primary-color;
}
}
}
</style>

512
src/views/login/index.vue
Unescape Escape View File

@ -0,0 +1,512 @@
<template>
<div class="login-page">
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
<div class="bg-circle circle-3"></div>
<div class="bg-grid"></div>
</div>
<!-- 登录卡片 -->
<div class="login-container">
<div class="login-card">
<!-- 左侧品牌区 -->
<div class="brand-section">
<div class="brand-content">
<div class="brand-logo">
<svg viewBox="0 0 60 60" width="60" height="60">
<rect width="60" height="60" rx="16" fill="white"/>
<path d="M16 20h10v20H16V20zm18 0h10v20H34V20z" fill="#2d5af0"/>
<path d="M20 26h20M20 32h20" stroke="#2d5af0" stroke-width="2" stroke-linecap="round"/>
<circle cx="35" cy="23" r="3.5" fill="#22c55e"/>
</svg>
</div>
<h1 class="brand-title">SOP作业检测系统</h1>
<p class="brand-desc">
智能化作业工序检测，精准把控每一道工序<br/>
确保产品装配零遗漏
</p>
<div class="brand-features">
<div class="feature-item">
<div class="feature-icon">
<el-icon :size="18"><Checked /></el-icon>
</div>
<span>工序步骤实时检测</span>
</div>
<div class="feature-item">
<div class="feature-icon">
<el-icon :size="18"><Box /></el-icon>
</div>
<span>配件完整性校验</span>
</div>
<div class="feature-item">
<div class="feature-icon">
<el-icon :size="18"><DocumentChecked /></el-icon>
</div>
<span>检测报告自动生成</span>
</div>
</div>
</div>
<div class="brand-decoration">
<div class="decoration-line"></div>
<div class="decoration-line"></div>
<div class="decoration-line"></div>
</div>
</div>
<!-- 右侧表单区 -->
<div class="form-section">
<div class="form-header">
<h2>欢迎回来</h2>
<p>请登录您的账号以继续使用</p>
</div>
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="rules"
class="login-form"
@keyup.enter="handleLogin"
>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入账号"
:prefix-icon="User"
size="large"
clearable
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
:prefix-icon="Lock"
size="large"
show-password
/>
</el-form-item>
<div class="form-options">
<el-checkbox v-model="rememberMe">记住账号</el-checkbox>
</div>
<el-button
type="primary"
size="large"
class="login-btn"
:loading="loading"
@click="handleLogin"
>
{{ loading ? '登录中...' : '登 录' }}
</el-button>
</el-form>
</div>
</div>
<!-- 底部版权 -->
<div class="login-copyright">
© 2026 SOP作业检测系统 · 智能化工序管理平台
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const REMEMBER_KEY = 'sop_remember_account'
const loginFormRef = ref(null)
const loading = ref(false)
const rememberMe = ref(false)
const loginForm = reactive({
username: '',
password: ''
})
// 初始化：读取本地存储的记住账号
onMounted(() => {
try {
const saved = localStorage.getItem(REMEMBER_KEY)
if (saved) {
const data = JSON.parse(saved)
loginForm.username = data.username || ''
rememberMe.value = data.remember || false
}
} catch {
// ignore
}
})
const rules = {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度不少于6位', trigger: 'blur' }
]
}
// 保存/清除记住的账号
function saveAccount() {
try {
if (rememberMe.value && loginForm.username) {
localStorage.setItem(REMEMBER_KEY, JSON.stringify({
username: loginForm.username,
remember: true
}))
} else {
localStorage.removeItem(REMEMBER_KEY)
}
} catch {
// ignore
}
}
async function handleLogin() {
if (!loginFormRef.value) return
try {
await loginFormRef.value.validate()
loading.value = true
// 登录前先保存记住账号状态
saveAccount()
await userStore.login({
username: loginForm.username,
password: loginForm.password
})
ElMessage.success('登录成功，欢迎回来！')
const redirect = route.query.redirect || '/home'
router.push(redirect)
} catch (error) {
ElMessage.error(error.message || '登录失败，请重试')
// 登录失败时恢复记住状态
saveAccount()
} finally {
loading.value = false
}
}
</script>
<style lang="scss" scoped>
.login-page {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 30%, #f5f7fc 70%, #eef2fb 100%);
}
// 背景装饰
.bg-decoration {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
.bg-circle {
position: absolute;
border-radius: 50%;
opacity: 0.12;
&.circle-1 {
width: 600px;
height: 600px;
background: linear-gradient(135deg, #2d5af0, #6366f1);
top: -200px;
right: -150px;
animation: float 8s ease-in-out infinite;
}
&.circle-2 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #22c55e, #10b981);
bottom: -120px;
left: -80px;
animation: float 10s ease-in-out infinite reverse;
}
&.circle-3 {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #f59e0b, #f97316);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: float 7s ease-in-out infinite;
opacity: 0.05;
}
}
.bg-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(45, 90, 240, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(45, 90, 240, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
}
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(3deg); }
}
// 登录容器
.login-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
// 登录卡片
.login-card {
display: flex;
width: 900px;
min-height: 520px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.06),
0 1px 4px rgba(0, 0, 0, 0.04);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.6);
}
// 左侧品牌区
.brand-section {
width: 420px;
background: linear-gradient(160deg, #1e3a8a 0%, #2d5af0 40%, #4f46e5 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 40px;
overflow: hidden;
.brand-content {
position: relative;
z-index: 1;
text-align: center;
}
.brand-logo {
margin-bottom: 24px;
}
.brand-title {
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin-bottom: 12px;
letter-spacing: 1px;
}
.brand-desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
margin-bottom: 36px;
}
.brand-features {
display: flex;
flex-direction: column;
gap: 12px;
.feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: $transition;
&:hover {
background: rgba(255, 255, 255, 0.18);
}
.feature-icon {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
}
span {
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
font-weight: 500;
text-align: left;
}
}
}
.brand-decoration {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 40px;
opacity: 0.08;
.decoration-line {
width: 160px;
height: 2px;
background: #ffffff;
border-radius: 1px;
&:nth-child(2) {
width: 120px;
}
&:nth-child(3) {
width: 80px;
}
}
}
}
// 右侧表单区
.form-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 48px 40px;
.form-header {
margin-bottom: 36px;
h2 {
font-size: 26px;
font-weight: 700;
color: $text-primary;
margin-bottom: 8px;
}
p {
font-size: 14px;
color: $text-secondary;
}
}
}
.login-form {
.el-form-item {
margin-bottom: 20px;
:deep(.el-input__wrapper) {
border-radius: $radius-md;
box-shadow: 0 0 0 1px $border-color inset;
transition: $transition;
padding: 2px 12px;
&:hover {
box-shadow: 0 0 0 1px $primary-light inset;
}
&.is-focus {
box-shadow: 0 0 0 1px $primary-color inset, 0 0 0 3px rgba(45, 90, 240, 0.1);
}
}
:deep(.el-input__prefix) {
color: $text-light;
margin-right: 6px;
}
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
:deep(.el-checkbox__label) {
font-size: 13px;
color: $text-secondary;
}
}
.login-btn {
width: 100%;
height: 46px;
font-size: 16px;
font-weight: 600;
letter-spacing: 4px;
border-radius: $radius-md;
background: linear-gradient(135deg, #2d5af0, #4f46e5);
border: none;
transition: $transition;
&:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(45, 90, 240, 0.35);
}
&:active {
transform: translateY(0);
}
}
}
// 版权信息
.login-copyright {
font-size: 12px;
color: $text-light;
letter-spacing: 0.5px;
}
// 响应式
@media (max-width: 960px) {
.login-card {
width: 90vw;
flex-direction: column;
.brand-section {
width: 100%;
padding: 32px 24px;
.brand-features {
display: none;
}
}
.form-section {
padding: 32px 24px;
}
}
}
</style>

431
test_websocket_frontend(2).html
Unescape Escape View File

@ -0,0 +1,431 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SOP WebSocket 前端测试</title>
<style>
body {
margin: 0;
font-family: Arial, "Microsoft YaHei", sans-serif;
background: #f5f7fb;
color: #1f2937;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 24px;
}
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
padding: 20px;
margin-bottom: 16px;
}
h1 {
margin: 0 0 16px;
font-size: 24px;
}
label {
display: block;
margin: 10px 0 6px;
font-weight: 600;
}
input, button {
font-size: 14px;
}
input[type="text"], input[type="number"] {
width: 100%;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 10px;
}
input[type="file"] {
width: 100%;
padding: 10px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.buttons {
display: flex;
gap: 10px;
margin-top: 16px;
flex-wrap: wrap;
}
button {
border: 0;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
color: #fff;
background: #2563eb;
}
button:disabled {
cursor: not-allowed;
background: #9ca3af;
}
.danger {
background: #dc2626;
}
.status {
padding: 10px 12px;
border-radius: 8px;
background: #eef2ff;
color: #3730a3;
margin-bottom: 12px;
white-space: pre-wrap;
}
.progress-wrap {
height: 16px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #22c55e, #16a34a);
transition: width 0.2s;
}
.counts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
}
.count-item {
padding: 10px;
border-radius: 8px;
background: #f3f4f6;
display: flex;
justify-content: space-between;
}
.log {
height: 280px;
overflow: auto;
background: #111827;
color: #d1d5db;
border-radius: 8px;
padding: 12px;
font-family: Consolas, monospace;
font-size: 13px;
white-space: pre-wrap;
}
video {
width: 100%;
max-height: 520px;
background: #000;
border-radius: 8px;
}
a {
color: #2563eb;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1>SOP 视频检测 WebSocket 前端测试</h1>
<div id="status" class="status">未连接</div>
<label>WebSocket 地址</label>
<input id="wsUrl" type="text" value="ws://10.21.221.41:8000/ws/detect" />
<label>HTTP 服务地址，用于播放结果视频</label>
<input id="httpBase" type="text" value="http://10.21.221.41:8000" />
<label>选择要上传的视频</label>
<input id="videoFile" type="file" accept="video/*" />
<div class="grid">
<div>
<label>conf</label>
<input id="conf" type="number" value="0.5" min="0" max="1" step="0.01" />
</div>
<div>
<label>iou</label>
<input id="iou" type="number" value="0.45" min="0" max="1" step="0.01" />
</div>
<div>
<label>skip</label>
<input id="skip" type="number" value="5" min="1" step="1" />
</div>
<div>
<label>max_frames，0 表示完整视频</label>
<input id="maxFrames" type="number" value="0" min="0" step="1" />
</div>
</div>
<div class="buttons">
<button id="startBtn">上传并开始检测</button>
<button id="pauseBtn" disabled>暂停处理</button>
<button id="endBtn" class="danger" disabled>结束检测</button>
<button id="stopBtn" class="danger" disabled>关闭连接</button>
</div>
</div>
<div class="card">
<h2>实时进度</h2>
<div class="progress-wrap"><div id="progressBar" class="progress-bar"></div></div>
<p id="progressText">0%</p>
</div>
<div class="card">
<h2>实时计数</h2>
<div id="counts" class="counts">暂无计数</div>
</div>
<div class="card">
<h2>实时日志</h2>
<div id="log" class="log"></div>
</div>
<div class="card">
<h2>处理后视频</h2>
<video id="resultVideo" controls></video>
<p id="resultLinks"></p>
</div>
</div>
<script>
const statusEl = document.getElementById("status");
const logEl = document.getElementById("log");
const countsEl = document.getElementById("counts");
const progressBar = document.getElementById("progressBar");
const progressText = document.getElementById("progressText");
const resultVideo = document.getElementById("resultVideo");
const resultLinks = document.getElementById("resultLinks");
const startBtn = document.getElementById("startBtn");
const pauseBtn = document.getElementById("pauseBtn");
const endBtn = document.getElementById("endBtn");
const stopBtn = document.getElementById("stopBtn");
let ws = null;
let paused = false;
let ending = false;
function setStatus(text) {
statusEl.textContent = text;
}
function appendLog(text) {
logEl.textContent += text + "\n";
logEl.scrollTop = logEl.scrollHeight;
}
function renderCounts(counts) {
const entries = Object.entries(counts || {});
if (!entries.length) {
countsEl.textContent = "暂无计数";
return;
}
countsEl.innerHTML = entries.map(([name, value]) => (
`<div class="count-item"><span>${name}</span><strong>${value}</strong></div>`
)).join("");
}
function renderProgress(msg) {
const progress = Number(msg.progress || 0);
progressBar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
progressText.textContent = `${progress.toFixed(1)}% | ${msg.frame || 0}/${msg.total_frames || 0}`;
}
async function sendFileInChunks(socket, file) {
const chunkSize = 1024 * 1024;
let offset = 0;
while (offset < file.size) {
const chunk = file.slice(offset, offset + chunkSize);
const buffer = await chunk.arrayBuffer();
socket.send(buffer);
offset += chunkSize;
}
}
startBtn.onclick = async () => {
const file = document.getElementById("videoFile").files[0];
const wsUrl = document.getElementById("wsUrl").value.trim();
if (!file) {
alert("请先选择视频文件");
return;
}
if (!wsUrl.startsWith("ws://") && !wsUrl.startsWith("wss://")) {
alert("WebSocket 地址必须以 ws:// 或 wss:// 开头");
return;
}
logEl.textContent = "";
resultLinks.innerHTML = "";
resultVideo.removeAttribute("src");
resultVideo.load();
renderCounts({});
renderProgress({ progress: 0, frame: 0, total_frames: 0 });
startBtn.disabled = true;
pauseBtn.disabled = true;
pauseBtn.textContent = "暂停处理";
paused = false;
ending = false;
endBtn.disabled = true;
stopBtn.disabled = false;
setStatus("正在连接 WebSocket...");
ws = new WebSocket(wsUrl);
ws.binaryType = "arraybuffer";
ws.onopen = () => {
setStatus("已连接，正在打开算法开关...");
ws.send(JSON.stringify({ type: "switch", enabled: true }));
};
ws.onmessage = async (event) => {
const msg = JSON.parse(event.data);
if (msg.type === "ready") {
appendLog("服务端 ready");
return;
}
if (msg.type === "switch") {
appendLog("算法开关已开启");
ws.send(JSON.stringify({
type: "start",
filename: file.name,
options: {
conf: Number(document.getElementById("conf").value),
iou: Number(document.getElementById("iou").value),
skip: Number(document.getElementById("skip").value),
imgsz: 640,
max_frames: Number(document.getElementById("maxFrames").value),
save_video: true
}
}));
return;
}
if (msg.type === "upload_started") {
setStatus("正在上传视频...");
appendLog("开始上传视频");
await sendFileInChunks(ws, file);
ws.send(JSON.stringify({ type: "end" }));
appendLog("视频上传完成，等待服务端处理");
return;
}
if (msg.type === "processing_started") {
setStatus("服务端正在处理视频...");
appendLog("检测开始");
pauseBtn.disabled = false;
endBtn.disabled = false;
return;
}
if (msg.type === "stopping") {
ending = true;
pauseBtn.disabled = true;
endBtn.disabled = true;
setStatus(msg.message || "正在结束检测...");
appendLog(msg.message || "已请求结束检测");
return;
}
if (msg.type === "cancelled") {
ending = true;
pauseBtn.disabled = true;
endBtn.disabled = true;
setStatus(msg.message || "检测已结束，正在生成当前结果...");
appendLog(msg.message || "检测已结束");
return;
}
if (msg.type === "pause") {
paused = Boolean(msg.paused);
pauseBtn.textContent = paused ? "恢复处理" : "暂停处理";
setStatus(paused ? "检测已暂停，服务仍在运行" : "服务端正在处理视频...");
appendLog(msg.message || (paused ? "检测已暂停" : "检测已恢复"));
return;
}
if (msg.type === "progress") {
renderProgress(msg);
return;
}
if (msg.type === "counts") {
renderCounts(msg.counts);
return;
}
if (msg.type === "log") {
appendLog(msg.message || "");
return;
}
if (msg.type === "done") {
const httpBase = document.getElementById("httpBase").value.replace(/\/$/, "");
const videoUrl = httpBase + msg.output_video_url;
const reportUrl = httpBase + msg.report_url;
setStatus("检测完成");
pauseBtn.disabled = true;
endBtn.disabled = true;
renderCounts(msg.counts || {});
resultVideo.src = videoUrl;
resultLinks.innerHTML = `结果视频：<a href="${videoUrl}" target="_blank">${videoUrl}</a><br>` +
`检测报告：<a href="${reportUrl}" target="_blank">${reportUrl}</a>`;
appendLog("检测完成");
ws.close();
return;
}
if (msg.type === "error") {
setStatus("服务端错误：" + msg.message);
appendLog("错误：" + msg.message);
pauseBtn.disabled = true;
endBtn.disabled = true;
ws.close();
}
};
ws.onerror = () => {
setStatus("WebSocket 连接失败，请检查服务地址、端口、防火墙和服务是否以 0.0.0.0 启动");
};
ws.onclose = () => {
startBtn.disabled = false;
pauseBtn.disabled = true;
pauseBtn.textContent = "暂停处理";
endBtn.disabled = true;
stopBtn.disabled = true;
};
};
pauseBtn.onclick = () => {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
paused = !paused;
ws.send(JSON.stringify({ type: "pause", paused }));
pauseBtn.textContent = paused ? "恢复处理" : "暂停处理";
};
endBtn.onclick = () => {
if (!ws || ws.readyState !== WebSocket.OPEN || ending) return;
ending = true;
pauseBtn.disabled = true;
endBtn.disabled = true;
setStatus("已发送结束检测请求，等待服务端生成当前结果...");
appendLog("前端请求结束检测");
ws.send(JSON.stringify({ type: "stop" }));
};
stopBtn.onclick = () => {
if (ws) ws.close();
setStatus("连接已关闭");
};
</script>
</body>
</html>

368
test_websocket_frontend.html
Unescape Escape View File

@ -0,0 +1,368 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SOP WebSocket 前端测试</title>
<style>
body {
margin: 0;
font-family: Arial, "Microsoft YaHei", sans-serif;
background: #f5f7fb;
color: #1f2937;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 24px;
}
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
padding: 20px;
margin-bottom: 16px;
}
h1 {
margin: 0 0 16px;
font-size: 24px;
}
label {
display: block;
margin: 10px 0 6px;
font-weight: 600;
}
input, button {
font-size: 14px;
}
input[type="text"], input[type="number"] {
width: 100%;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 10px;
}
input[type="file"] {
width: 100%;
padding: 10px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.buttons {
display: flex;
gap: 10px;
margin-top: 16px;
flex-wrap: wrap;
}
button {
border: 0;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
color: #fff;
background: #2563eb;
}
button:disabled {
cursor: not-allowed;
background: #9ca3af;
}
.danger {
background: #dc2626;
}
.status {
padding: 10px 12px;
border-radius: 8px;
background: #eef2ff;
color: #3730a3;
margin-bottom: 12px;
white-space: pre-wrap;
}
.progress-wrap {
height: 16px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #22c55e, #16a34a);
transition: width 0.2s;
}
.counts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
}
.count-item {
padding: 10px;
border-radius: 8px;
background: #f3f4f6;
display: flex;
justify-content: space-between;
}
.log {
height: 280px;
overflow: auto;
background: #111827;
color: #d1d5db;
border-radius: 8px;
padding: 12px;
font-family: Consolas, monospace;
font-size: 13px;
white-space: pre-wrap;
}
video {
width: 100%;
max-height: 520px;
background: #000;
border-radius: 8px;
}
a {
color: #2563eb;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1>SOP 视频检测 WebSocket 前端测试</h1>
<div id="status" class="status">未连接</div>
<label>WebSocket 地址</label>
<input id="wsUrl" type="text" value="ws://10.21.221.41:8000/ws/detect" />
<label>HTTP 服务地址，用于播放结果视频</label>
<input id="httpBase" type="text" value="http://10.21.221.41:8000" />
<label>选择要上传的视频</label>
<input id="videoFile" type="file" accept="video/*" />
<div class="grid">
<div>
<label>conf</label>
<input id="conf" type="number" value="0.5" min="0" max="1" step="0.01" />
</div>
<div>
<label>iou</label>
<input id="iou" type="number" value="0.45" min="0" max="1" step="0.01" />
</div>
<div>
<label>skip</label>
<input id="skip" type="number" value="5" min="1" step="1" />
</div>
<div>
<label>max_frames，0 表示完整视频</label>
<input id="maxFrames" type="number" value="0" min="0" step="1" />
</div>
</div>
<div class="buttons">
<button id="startBtn">上传并开始检测</button>
<button id="stopBtn" class="danger" disabled>关闭连接</button>
</div>
</div>
<div class="card">
<h2>实时进度</h2>
<div class="progress-wrap"><div id="progressBar" class="progress-bar"></div></div>
<p id="progressText">0%</p>
</div>
<div class="card">
<h2>实时计数</h2>
<div id="counts" class="counts">暂无计数</div>
</div>
<div class="card">
<h2>实时日志</h2>
<div id="log" class="log"></div>
</div>
<div class="card">
<h2>处理后视频</h2>
<video id="resultVideo" controls></video>
<p id="resultLinks"></p>
</div>
</div>
<script>
const statusEl = document.getElementById("status");
const logEl = document.getElementById("log");
const countsEl = document.getElementById("counts");
const progressBar = document.getElementById("progressBar");
const progressText = document.getElementById("progressText");
const resultVideo = document.getElementById("resultVideo");
const resultLinks = document.getElementById("resultLinks");
const startBtn = document.getElementById("startBtn");
const stopBtn = document.getElementById("stopBtn");
let ws = null;
function setStatus(text) {
statusEl.textContent = text;
}
function appendLog(text) {
logEl.textContent += text + "\n";
logEl.scrollTop = logEl.scrollHeight;
}
function renderCounts(counts) {
const entries = Object.entries(counts || {});
if (!entries.length) {
countsEl.textContent = "暂无计数";
return;
}
countsEl.innerHTML = entries.map(([name, value]) => (
`<div class="count-item"><span>${name}</span><strong>${value}</strong></div>`
)).join("");
}
function renderProgress(msg) {
const progress = Number(msg.progress || 0);
progressBar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
progressText.textContent = `${progress.toFixed(1)}% | ${msg.frame || 0}/${msg.total_frames || 0}`;
}
async function sendFileInChunks(socket, file) {
const chunkSize = 1024 * 1024;
let offset = 0;
while (offset < file.size) {
const chunk = file.slice(offset, offset + chunkSize);
const buffer = await chunk.arrayBuffer();
socket.send(buffer);
offset += chunkSize;
}
}
startBtn.onclick = async () => {
const file = document.getElementById("videoFile").files[0];
const wsUrl = document.getElementById("wsUrl").value.trim();
if (!file) {
alert("请先选择视频文件");
return;
}
if (!wsUrl.startsWith("ws://") && !wsUrl.startsWith("wss://")) {
alert("WebSocket 地址必须以 ws:// 或 wss:// 开头");
return;
}
logEl.textContent = "";
resultLinks.innerHTML = "";
resultVideo.removeAttribute("src");
resultVideo.load();
renderCounts({});
renderProgress({ progress: 0, frame: 0, total_frames: 0 });
startBtn.disabled = true;
stopBtn.disabled = false;
setStatus("正在连接 WebSocket...");
ws = new WebSocket(wsUrl);
ws.binaryType = "arraybuffer";
ws.onopen = () => {
setStatus("已连接，正在打开算法开关...");
ws.send(JSON.stringify({ type: "switch", enabled: true }));
};
ws.onmessage = async (event) => {
const msg = JSON.parse(event.data);
if (msg.type === "ready") {
appendLog("服务端 ready");
return;
}
if (msg.type === "switch") {
appendLog("算法开关已开启");
ws.send(JSON.stringify({
type: "start",
filename: file.name,
options: {
conf: Number(document.getElementById("conf").value),
iou: Number(document.getElementById("iou").value),
skip: Number(document.getElementById("skip").value),
imgsz: 640,
max_frames: Number(document.getElementById("maxFrames").value),
save_video: true
}
}));
return;
}
if (msg.type === "upload_started") {
setStatus("正在上传视频...");
appendLog("开始上传视频");
await sendFileInChunks(ws, file);
ws.send(JSON.stringify({ type: "end" }));
appendLog("视频上传完成，等待服务端处理");
return;
}
if (msg.type === "processing_started") {
setStatus("服务端正在处理视频...");
appendLog("检测开始");
return;
}
if (msg.type === "progress") {
renderProgress(msg);
return;
}
if (msg.type === "counts") {
renderCounts(msg.counts);
return;
}
if (msg.type === "log") {
appendLog(msg.message || "");
return;
}
if (msg.type === "done") {
const httpBase = document.getElementById("httpBase").value.replace(/\/$/, "");
const videoUrl = httpBase + msg.output_video_url;
const reportUrl = httpBase + msg.report_url;
setStatus("检测完成");
renderCounts(msg.counts || {});
resultVideo.src = videoUrl;
resultLinks.innerHTML = `结果视频：<a href="${videoUrl}" target="_blank">${videoUrl}</a><br>` +
`检测报告：<a href="${reportUrl}" target="_blank">${reportUrl}</a>`;
appendLog("检测完成");
ws.close();
return;
}
if (msg.type === "error") {
setStatus("服务端错误：" + msg.message);
appendLog("错误：" + msg.message);
ws.close();
}
};
ws.onerror = () => {
setStatus("WebSocket 连接失败，请检查服务地址、端口、防火墙和服务是否以 0.0.0.0 启动");
};
ws.onclose = () => {
startBtn.disabled = false;
stopBtn.disabled = true;
};
};
stopBtn.onclick = () => {
if (ws) ws.close();
setStatus("连接已关闭");
};
</script>
</body>
</html>

35
vite.config.js
Unescape Escape View File

@ -0,0 +1,35 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`
}
}
},
server: {
host: '0.0.0.0',
port: 3001,
open: true
}
})
Write Preview
Loading…
Cancel
Save