style: 重新调整结构
This commit is contained in:
70
src/views/Project/BottomBar.vue
Normal file
70
src/views/Project/BottomBar.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="tabs tabs-box flex-shrink-0">
|
||||
<label class="tab">
|
||||
<input
|
||||
type="radio"
|
||||
name="function-bar"
|
||||
id="1"
|
||||
checked
|
||||
@change="handleTabChange"
|
||||
/>
|
||||
<TerminalIcon class="icon" />
|
||||
日志终端
|
||||
</label>
|
||||
<label class="tab">
|
||||
<input
|
||||
type="radio"
|
||||
name="function-bar"
|
||||
id="2"
|
||||
@change="handleTabChange"
|
||||
/>
|
||||
<VideoIcon class="icon" />
|
||||
HTTP视频流
|
||||
</label>
|
||||
<label class="tab">
|
||||
<input
|
||||
type="radio"
|
||||
name="function-bar"
|
||||
id="3"
|
||||
@change="handleTabChange"
|
||||
/>
|
||||
<SquareActivityIcon class="icon" />
|
||||
示波器
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div v-if="checkID === 1" class="h-full overflow-y-auto"></div>
|
||||
<div v-else-if="checkID === 2" class="h-full overflow-y-auto">
|
||||
<VideoStreamView />
|
||||
</div>
|
||||
<div v-else-if="checkID === 3" class="h-full overflow-y-auto">
|
||||
<OscilloscopeView />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { VideoIcon, SquareActivityIcon, TerminalIcon } from "lucide-vue-next";
|
||||
import VideoStreamView from "@/views/Project/VideoStream.vue";
|
||||
import OscilloscopeView from "@/views/Project/Oscilloscope.vue";
|
||||
import { isNull, toNumber } from "lodash";
|
||||
import { ref } from "vue";
|
||||
|
||||
const checkID = ref(1);
|
||||
|
||||
function handleTabChange(event: Event) {
|
||||
const target = event.currentTarget as HTMLInputElement;
|
||||
if (isNull(target)) return;
|
||||
|
||||
checkID.value = toNumber(target.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../assets/main.css";
|
||||
|
||||
.icon {
|
||||
@apply h-4 w-4 opacity-70 mr-1.5;
|
||||
}
|
||||
</style>
|
||||
277
src/views/Project/Index.vue
Normal file
277
src/views/Project/Index.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="h-screen flex flex-col overflow-hidden">
|
||||
<div class="flex flex-1 overflow-hidden relative">
|
||||
<SplitterGroup
|
||||
id="splitter-group-v"
|
||||
direction="vertical"
|
||||
class="w-full h-full"
|
||||
>
|
||||
<SplitterPanel id="splitter-group-v-panel-project">
|
||||
<SplitterGroup
|
||||
id="splitter-group-h"
|
||||
direction="horizontal"
|
||||
class="w-full h-full"
|
||||
>
|
||||
<!-- 左侧图形化区域 -->
|
||||
<SplitterPanel
|
||||
id="splitter-group-h-panel-canvas"
|
||||
:default-size="60"
|
||||
:min-size="30"
|
||||
class="relative bg-base-200 overflow-hidden h-full"
|
||||
>
|
||||
<DiagramCanvas
|
||||
ref="diagramCanvas"
|
||||
:showDocPanel="showDocPanel"
|
||||
@diagram-updated="handleDiagramUpdated"
|
||||
@open-components="openComponentsMenu"
|
||||
@toggle-doc-panel="toggleDocPanel"
|
||||
/>
|
||||
</SplitterPanel>
|
||||
<!-- 拖拽分割线 -->
|
||||
<SplitterResizeHandle
|
||||
id="splitter-group-h-resize-handle"
|
||||
class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors"
|
||||
/>
|
||||
<!-- 右侧编辑区域 -->
|
||||
<SplitterPanel
|
||||
id="splitter-group-h-panel-properties"
|
||||
:min-size="20"
|
||||
class="bg-base-200 h-full overflow-hidden flex flex-col"
|
||||
>
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<!-- 使用条件渲染显示不同的面板 -->
|
||||
<PropertyPanel
|
||||
v-show="!showDocPanel"
|
||||
:componentData="componentManager.selectedComponentData.value"
|
||||
:componentConfig="
|
||||
componentManager.selectedComponentConfig.value
|
||||
"
|
||||
@updateProp="updateComponentProp"
|
||||
@updateDirectProp="updateComponentDirectProp"
|
||||
/>
|
||||
<div
|
||||
v-show="showDocPanel"
|
||||
class="doc-panel overflow-y-auto h-full"
|
||||
>
|
||||
<MarkdownRenderer :content="documentContent" />
|
||||
</div>
|
||||
</div>
|
||||
</SplitterPanel>
|
||||
</SplitterGroup>
|
||||
</SplitterPanel>
|
||||
|
||||
<SplitterResizeHandle
|
||||
id="splitter-group-v-resize-handle"
|
||||
class="h-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors"
|
||||
/>
|
||||
|
||||
<!-- 功能底栏 -->
|
||||
<SplitterPanel
|
||||
id="splitter-group-v-panel-bar"
|
||||
:default-size="20"
|
||||
:min-size="15"
|
||||
class="w-full overflow-hidden"
|
||||
>
|
||||
<FunctionBar class="mx-4 mt-1" />
|
||||
</SplitterPanel>
|
||||
</SplitterGroup>
|
||||
</div>
|
||||
<!-- 元器件选择组件 -->
|
||||
<ComponentSelector
|
||||
:open="showComponentsMenu"
|
||||
@update:open="showComponentsMenu = $event"
|
||||
@add-component="handleAddComponent"
|
||||
@add-template="handleAddTemplate"
|
||||
@close="showComponentsMenu = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
|
||||
import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
|
||||
import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
|
||||
import PropertyPanel from "@/components/PropertyPanel.vue";
|
||||
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
||||
import FunctionBar from "@/views/Project/BottomBar.vue";
|
||||
import { useProvideComponentManager } from "@/components/LabCanvas";
|
||||
import type { DiagramData } from "@/components/LabCanvas";
|
||||
import { useAlertStore } from "@/components/Alert";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
|
||||
// 提供组件管理服务
|
||||
const componentManager = useProvideComponentManager();
|
||||
|
||||
const alert = useAlertStore();
|
||||
|
||||
// --- 文档面板控制 ---
|
||||
const showDocPanel = ref(false);
|
||||
const documentContent = ref("");
|
||||
|
||||
// 切换文档面板和属性面板
|
||||
async function toggleDocPanel() {
|
||||
showDocPanel.value = !showDocPanel.value;
|
||||
|
||||
// 如果切换到文档面板，则获取文档内容
|
||||
if (showDocPanel.value) {
|
||||
await loadDocumentContent();
|
||||
}
|
||||
}
|
||||
|
||||
// 加载文档内容
|
||||
async function loadDocumentContent() {
|
||||
try {
|
||||
// 从路由参数中获取教程ID
|
||||
const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
|
||||
|
||||
// 构建文档路径
|
||||
let docPath = `/doc/${tutorialId}/doc.md`;
|
||||
|
||||
// 检查当前路径是否包含下划线（例如 02_key 格式）
|
||||
// 如果不包含，那么使用更新的命名格式
|
||||
if (!tutorialId.includes("_")) {
|
||||
docPath = `/doc/${tutorialId}/doc.md`;
|
||||
}
|
||||
|
||||
// 获取文档内容
|
||||
const response = await fetch(docPath);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load document: ${response.status}`);
|
||||
}
|
||||
|
||||
// 更新文档内容，并替换图片路径
|
||||
documentContent.value = (await response.text()).replace(
|
||||
/.\/images/gi,
|
||||
`/doc/${tutorialId}/images`,
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("加载文档失败:", error);
|
||||
documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
|
||||
}
|
||||
}
|
||||
|
||||
// --- UI 状态管理 ---
|
||||
const showComponentsMenu = ref(false);
|
||||
const diagramCanvas = ref(null);
|
||||
|
||||
function openComponentsMenu() {
|
||||
showComponentsMenu.value = true;
|
||||
}
|
||||
|
||||
// 处理 ComponentSelector 组件添加元器件事件
|
||||
async function handleAddComponent(componentData: {
|
||||
type: string;
|
||||
name: string;
|
||||
props: Record<string, any>;
|
||||
}) {
|
||||
await componentManager.addComponent(componentData);
|
||||
}
|
||||
|
||||
// 处理模板添加事件
|
||||
async function handleAddTemplate(templateData: {
|
||||
id: string;
|
||||
name: string;
|
||||
template: any;
|
||||
}) {
|
||||
const result = await componentManager.addTemplate(templateData);
|
||||
if (result) {
|
||||
alert?.show(result.message, result.success ? "success" : "error");
|
||||
}
|
||||
}
|
||||
|
||||
// 处理图表数据更新事件
|
||||
function handleDiagramUpdated(data: DiagramData) {
|
||||
console.log("Diagram data updated:", data);
|
||||
}
|
||||
|
||||
// 更新组件属性的方法 - 委托给componentManager
|
||||
function updateComponentProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
componentManager.updateComponentProp(componentId, propName, value);
|
||||
}
|
||||
|
||||
// 更新组件的直接属性 - 委托给componentManager
|
||||
function updateComponentDirectProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
componentManager.updateComponentDirectProp(componentId, propName, value);
|
||||
}
|
||||
|
||||
// --- 生命周期钩子 ---
|
||||
onMounted(async () => {
|
||||
// 检查是否有例程参数，如果有则自动打开文档面板
|
||||
if (route.query.tutorial) {
|
||||
showDocPanel.value = true;
|
||||
await loadDocumentContent();
|
||||
}
|
||||
|
||||
// 设置画布引用并初始化组件管理器
|
||||
componentManager.setCanvasRef(diagramCanvas.value);
|
||||
await componentManager.initialize();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
/* 样式保持不变 */
|
||||
@import "../assets/main.css";
|
||||
|
||||
.animate-slideRight {
|
||||
animation: slideRight 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保滚动行为仅在需要时出现 */
|
||||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 文档面板样式 */
|
||||
.doc-panel {
|
||||
padding: 1.5rem;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
/* 使用透明背景 */
|
||||
border: none;
|
||||
/* 确保没有边框 */
|
||||
}
|
||||
|
||||
/* 文档切换按钮样式 */
|
||||
.doc-toggle-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* Markdown渲染样式调整 */
|
||||
:deep(.markdown-content) {
|
||||
padding: 1rem;
|
||||
background-color: hsl(var(--b1));
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
184
src/views/Project/Oscilloscope.vue
Normal file
184
src/views/Project/Oscilloscope.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-base-100 flex flex-col mx-auto p-6 space-y-6 container"
|
||||
>
|
||||
<!-- 设置 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<Settings class="w-5 h-5" />
|
||||
示波器配置
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-row justify-around gap-4">
|
||||
<div class="grow">
|
||||
<IpInputField
|
||||
v-model="tempConfig.ip"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<PortInputField
|
||||
v-model="tempConfig.port"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
@click="resetConfig"
|
||||
:disabled="isDefault"
|
||||
>
|
||||
<RotateCcw class="w-4 h-4" />
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="saveConfig"
|
||||
:disabled="!isValidConfig || !hasChanges"
|
||||
:class="{ loading: isSaving }"
|
||||
>
|
||||
<Save class="w-4 h-4" v-if="!isSaving" />
|
||||
保存配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 波形展示 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<Activity class="w-5 h-5" />
|
||||
波形显示
|
||||
</h2>
|
||||
<WaveformDisplay :data="generateTestData()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, reactive, watch } from "vue";
|
||||
import { useStorage } from "@vueuse/core";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
Settings,
|
||||
Save,
|
||||
RotateCcw,
|
||||
Activity,
|
||||
} from "lucide-vue-next";
|
||||
import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
|
||||
import { IpInputField, PortInputField } from "@/components/InputField";
|
||||
|
||||
// 配置类型定义
|
||||
const configSchema = z.object({
|
||||
ip: z
|
||||
.string()
|
||||
.ip({ version: "v4", message: "请输入有效的IPv4地址" })
|
||||
.min(1, "请输入IP地址"),
|
||||
port: z
|
||||
.number()
|
||||
.int("端口必须是整数")
|
||||
.min(1, "端口必须大于0")
|
||||
.max(65535, "端口必须小于等于65535"),
|
||||
});
|
||||
|
||||
type OscilloscopeConfig = z.infer<typeof configSchema>;
|
||||
|
||||
// 默认配置
|
||||
const defaultConfig: OscilloscopeConfig = {
|
||||
ip: "192.168.1.100",
|
||||
port: 8080,
|
||||
};
|
||||
|
||||
// 使用 VueUse 存储配置
|
||||
const config = useStorage<OscilloscopeConfig>(
|
||||
"oscilloscope-config",
|
||||
defaultConfig,
|
||||
localStorage,
|
||||
{
|
||||
serializer: {
|
||||
read: (value: string) => {
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
const result = configSchema.safeParse(parsed);
|
||||
return result.success ? result.data : defaultConfig;
|
||||
} catch {
|
||||
return defaultConfig;
|
||||
}
|
||||
},
|
||||
write: (value: OscilloscopeConfig) => JSON.stringify(value),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 临时配置（用于编辑）
|
||||
const tempConfig = reactive<OscilloscopeConfig>({
|
||||
ip: config.value.ip,
|
||||
port: config.value.port,
|
||||
});
|
||||
|
||||
// 状态管理
|
||||
const isSaving = ref(false);
|
||||
|
||||
// 检查配置是否有效 - 简化版本，因为验证现在在组件内部
|
||||
const isValidConfig = computed(() => {
|
||||
return tempConfig.ip && tempConfig.port &&
|
||||
tempConfig.port >= 1 && tempConfig.port <= 65535 &&
|
||||
/^(\d{1,3}\.){3}\d{1,3}$/.test(tempConfig.ip);
|
||||
});
|
||||
|
||||
// 检查是否有更改
|
||||
const hasChanges = computed(() => {
|
||||
return (
|
||||
tempConfig.ip !== config.value.ip || tempConfig.port !== config.value.port
|
||||
);
|
||||
});
|
||||
|
||||
const isDefault = computed(() => {
|
||||
return (
|
||||
defaultConfig.ip === tempConfig.ip && defaultConfig.port === tempConfig.port
|
||||
);
|
||||
});
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async () => {
|
||||
if (!isValidConfig.value) return;
|
||||
|
||||
isSaving.value = true;
|
||||
|
||||
try {
|
||||
// 模拟保存延迟
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
|
||||
config.value = {
|
||||
ip: tempConfig.ip,
|
||||
port: tempConfig.port,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("保存配置失败:", error);
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置配置
|
||||
const resetConfig = () => {
|
||||
tempConfig.ip = defaultConfig.ip;
|
||||
tempConfig.port = defaultConfig.port;
|
||||
};
|
||||
|
||||
// 监听存储的配置变化，同步到临时配置
|
||||
watch(
|
||||
config,
|
||||
(newConfig) => {
|
||||
tempConfig.ip = newConfig.ip;
|
||||
tempConfig.port = newConfig.port;
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
606
src/views/Project/VideoStream.vue
Normal file
606
src/views/Project/VideoStream.vue
Normal file
@@ -0,0 +1,606 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-base-100">
|
||||
<div class="container mx-auto p-6 space-y-6">
|
||||
<!-- 控制面板 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<Settings class="w-6 h-6" />
|
||||
控制面板
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<!-- 服务状态 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<div
|
||||
class="badge"
|
||||
:class="
|
||||
statusInfo.isRunning ? 'badge-success' : 'badge-error'
|
||||
"
|
||||
>
|
||||
{{ statusInfo.isRunning ? "运行中" : "已停止" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-title">服务状态</div>
|
||||
<div class="stat-value text-primary">HTTP</div>
|
||||
<div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流信息 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<Video class="w-8 h-8" />
|
||||
</div>
|
||||
<div class="stat-title">视频规格</div>
|
||||
<div class="stat-value text-secondary">
|
||||
{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
|
||||
</div>
|
||||
<div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接数 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-accent">
|
||||
<Users class="w-8 h-8" />
|
||||
</div>
|
||||
<div class="stat-title">连接数</div>
|
||||
<div class="stat-value text-accent">
|
||||
{{ statusInfo.connectedClients }}
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
<div class="dropdown dropdown-hover">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="text-xs underline cursor-help"
|
||||
>
|
||||
查看客户端
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
|
||||
>
|
||||
<li
|
||||
v-for="(client, index) in statusInfo.clientEndpoints"
|
||||
:key="index"
|
||||
class="text-xs"
|
||||
>
|
||||
<a>{{ client }}</a>
|
||||
</li>
|
||||
<li
|
||||
v-if="
|
||||
!statusInfo.clientEndpoints ||
|
||||
statusInfo.clientEndpoints.length === 0
|
||||
"
|
||||
>
|
||||
<a class="text-xs opacity-50">无活跃连接</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
class="btn btn-outline btn-primary"
|
||||
@click="configCamera"
|
||||
:dsiabled="configing"
|
||||
>
|
||||
<RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
|
||||
<CogIcon v-else class="h-4 w-4 mr-2" />
|
||||
{{ configing ? "配置中..." : "配置摄像头" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline btn-primary"
|
||||
@click="refreshStatus"
|
||||
:disabled="loading"
|
||||
>
|
||||
<RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
|
||||
<RefreshCw v-else class="h-4 w-4 mr-2" />
|
||||
{{ loading ? "刷新中..." : "刷新状态" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="testConnection"
|
||||
:disabled="testing"
|
||||
>
|
||||
<RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
|
||||
<TestTube v-else class="h-4 w-4 mr-2" />
|
||||
{{ testing ? "测试中..." : "测试连接" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频预览区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<Video class="w-6 h-6" />
|
||||
视频预览
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="relative bg-black rounded-lg overflow-hidden"
|
||||
style="aspect-ratio: 4/3"
|
||||
>
|
||||
<!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
|
||||
<div
|
||||
v-show="isPlaying"
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
:src="currentVideoSource"
|
||||
alt="视频流"
|
||||
class="max-w-full max-h-full object-contain"
|
||||
@error="handleVideoError"
|
||||
@load="handleVideoLoad"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 错误信息显示 -->
|
||||
<div
|
||||
v-if="hasVideoError"
|
||||
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
|
||||
>
|
||||
<div class="card bg-error text-white shadow-lg w-full max-w-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title flex items-center gap-2">
|
||||
<AlertTriangle class="h-6 w-6" />
|
||||
视频流加载失败
|
||||
</h3>
|
||||
<p>无法连接到视频服务器，请检查以下内容：</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>视频流服务是否已启动</li>
|
||||
<li>网络连接是否正常</li>
|
||||
<li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
|
||||
</ul>
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-primary"
|
||||
@click="tryReconnect"
|
||||
>
|
||||
重试连接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 占位符 -->
|
||||
<div
|
||||
v-show="!isPlaying && !hasVideoError"
|
||||
class="absolute inset-0 flex items-center justify-center text-white"
|
||||
>
|
||||
<div class="text-center">
|
||||
<Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
|
||||
<p class="text-lg opacity-75">{{ videoStatus }}</p>
|
||||
<p class="text-sm opacity-60 mt-2">
|
||||
点击"播放视频流"按钮开始查看实时视频
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频控制 -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="text-sm text-base-content/70">
|
||||
流地址:
|
||||
<code class="bg-base-300 px-2 py-1 rounded">{{
|
||||
streamInfo.mjpegUrl
|
||||
}}</code>
|
||||
</div>
|
||||
<div class="space-x-2">
|
||||
<div class="dropdown dropdown-hover dropdown-top dropdown-end">
|
||||
<div
|
||||
tabindex="0"
|
||||
role="button"
|
||||
class="btn btn-sm btn-outline btn-accent"
|
||||
>
|
||||
<MoreHorizontal class="w-4 h-4 mr-1" />
|
||||
更多功能
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
|
||||
>
|
||||
<li>
|
||||
<a @click="openInNewTab(streamInfo.htmlUrl)">
|
||||
<ExternalLink class="w-4 h-4" />
|
||||
在新标签打开视频页面
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="takeSnapshot">
|
||||
<Camera class="w-4 h-4" />
|
||||
获取并下载快照
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="copyToClipboard(streamInfo.mjpegUrl)">
|
||||
<Copy class="w-4 h-4" />
|
||||
复制MJPEG地址
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success btn-sm"
|
||||
@click="startStream"
|
||||
:disabled="isPlaying"
|
||||
>
|
||||
<Play class="w-4 h-4 mr-1" />
|
||||
播放视频流
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error btn-sm"
|
||||
@click="stopStream"
|
||||
:disabled="!isPlaying"
|
||||
>
|
||||
<Square class="w-4 h-4 mr-1" />
|
||||
停止视频流
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<FileText class="w-6 h-6" />
|
||||
操作日志
|
||||
</h2>
|
||||
|
||||
<div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
|
||||
<div
|
||||
v-for="(log, index) in logs"
|
||||
:key="index"
|
||||
class="text-sm font-mono mb-1"
|
||||
>
|
||||
<span class="text-base-content/50"
|
||||
>[{{ formatTime(log.time) }}]</span
|
||||
>
|
||||
<span :class="getLogClass(log.level)">{{ log.message }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="logs.length === 0"
|
||||
class="text-base-content/50 text-center py-8"
|
||||
>
|
||||
暂无日志记录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button class="btn btn-outline btn-sm" @click="clearLogs">
|
||||
清空日志
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import {
|
||||
CogIcon,
|
||||
Settings,
|
||||
Video,
|
||||
Users,
|
||||
RefreshCw,
|
||||
TestTube,
|
||||
Play,
|
||||
Square,
|
||||
ExternalLink,
|
||||
Camera,
|
||||
Copy,
|
||||
FileText,
|
||||
AlertTriangle,
|
||||
MoreHorizontal,
|
||||
} from "lucide-vue-next";
|
||||
import { VideoStreamClient, CameraConfigRequest } from "@/APIClient";
|
||||
import { useEquipments } from "@/stores/equipments";
|
||||
|
||||
const eqps = useEquipments();
|
||||
|
||||
// 状态管理
|
||||
const loading = ref(false);
|
||||
const configing = ref(false);
|
||||
const testing = ref(false);
|
||||
const isPlaying = ref(false);
|
||||
const hasVideoError = ref(false);
|
||||
const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频');
|
||||
|
||||
// 数据
|
||||
const statusInfo = ref({
|
||||
isRunning: false,
|
||||
serverPort: 8080,
|
||||
streamUrl: "",
|
||||
mjpegUrl: "",
|
||||
snapshotUrl: "",
|
||||
connectedClients: 0,
|
||||
clientEndpoints: [] as string[],
|
||||
});
|
||||
|
||||
const streamInfo = ref({
|
||||
frameRate: 30,
|
||||
frameWidth: 640,
|
||||
frameHeight: 480,
|
||||
format: "MJPEG",
|
||||
htmlUrl: "",
|
||||
mjpegUrl: "",
|
||||
snapshotUrl: "",
|
||||
});
|
||||
|
||||
const currentVideoSource = ref("");
|
||||
const logs = ref<Array<{ time: Date; level: string; message: string }>>([]);
|
||||
|
||||
// API 客户端
|
||||
const videoClient = new VideoStreamClient();
|
||||
|
||||
// 添加日志
|
||||
const addLog = (level: string, message: string) => {
|
||||
logs.value.push({
|
||||
time: new Date(),
|
||||
level,
|
||||
message,
|
||||
});
|
||||
// 限制日志数量
|
||||
if (logs.value.length > 100) {
|
||||
logs.value.shift();
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: Date) => {
|
||||
return time.toLocaleTimeString();
|
||||
};
|
||||
|
||||
// 获取日志样式
|
||||
const getLogClass = (level: string) => {
|
||||
switch (level) {
|
||||
case "error":
|
||||
return "text-error";
|
||||
case "warning":
|
||||
return "text-warning";
|
||||
case "success":
|
||||
return "text-success";
|
||||
default:
|
||||
return "text-base-content";
|
||||
}
|
||||
};
|
||||
|
||||
// 清空日志
|
||||
const clearLogs = () => {
|
||||
logs.value = [];
|
||||
addLog("info", "日志已清空");
|
||||
};
|
||||
|
||||
// 复制到剪贴板
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
.then(() => {
|
||||
addLog("success", "已复制到剪贴板");
|
||||
})
|
||||
.catch((err) => {
|
||||
addLog("error", `复制失败: ${err}`);
|
||||
});
|
||||
};
|
||||
|
||||
// 在新标签中打开视频页面
|
||||
const openInNewTab = (url: string) => {
|
||||
window.open(url, "_blank");
|
||||
addLog("info", `已在新标签打开视频页面: ${url}`);
|
||||
};
|
||||
|
||||
// 获取并下载快照
|
||||
const takeSnapshot = async () => {
|
||||
try {
|
||||
addLog("info", "正在获取快照...");
|
||||
|
||||
// 使用当前的快照URL
|
||||
const snapshotUrl = streamInfo.value.snapshotUrl;
|
||||
if (!snapshotUrl) {
|
||||
addLog("error", "快照URL不可用");
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加时间戳防止缓存
|
||||
const urlWithTimestamp = `${snapshotUrl}?t=${new Date().getTime()}`;
|
||||
|
||||
// 创建一个临时链接下载图片
|
||||
const a = document.createElement("a");
|
||||
a.href = urlWithTimestamp;
|
||||
a.download = `fpga-snapshot-${new Date().toISOString().replace(/:/g, "-")}.jpg`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
addLog("success", "快照已下载");
|
||||
} catch (error) {
|
||||
addLog("error", `获取快照失败: ${error}`);
|
||||
console.error("获取快照失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
async function configCamera() {
|
||||
configing.value = true;
|
||||
try {
|
||||
addLog("info", "正在配置并初始化摄像头...");
|
||||
const boardconfig = new CameraConfigRequest({
|
||||
address: eqps.boardAddr,
|
||||
port: eqps.boardPort,
|
||||
});
|
||||
await videoClient.configureCamera(boardconfig);
|
||||
|
||||
const status = await videoClient.getCameraConfig();
|
||||
if (status.isConfigured) {
|
||||
addLog("success", "摄像头已配置并初始化");
|
||||
} else {
|
||||
addLog("error", "摄像头配置失败，请检查地址和端口");
|
||||
}
|
||||
} catch (error) {
|
||||
addLog("error", `摄像头配置失败: ${error}`);
|
||||
console.error("摄像头配置失败:", error);
|
||||
} finally {
|
||||
configing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新状态
|
||||
const refreshStatus = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
addLog("info", "正在获取服务状态...");
|
||||
|
||||
// 使用新的API方法名称
|
||||
const status = await videoClient.getStatus();
|
||||
statusInfo.value = status;
|
||||
|
||||
const info = await videoClient.getStreamInfo();
|
||||
streamInfo.value = info;
|
||||
|
||||
addLog("success", "服务状态获取成功");
|
||||
} catch (error) {
|
||||
addLog("error", `获取状态失败: ${error}`);
|
||||
console.error("获取状态失败:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 测试连接
|
||||
const testConnection = async () => {
|
||||
testing.value = true;
|
||||
try {
|
||||
addLog("info", "正在测试视频流连接...");
|
||||
|
||||
const result = await videoClient.testConnection();
|
||||
|
||||
if (result) {
|
||||
addLog("success", "视频流连接测试成功");
|
||||
} else {
|
||||
addLog("error", "视频流连接测试失败");
|
||||
}
|
||||
} catch (error) {
|
||||
addLog("error", `连接测试失败: ${error}`);
|
||||
console.error("连接测试失败:", error);
|
||||
} finally {
|
||||
testing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 视频错误处理
|
||||
const handleVideoError = () => {
|
||||
if (isPlaying.value) {
|
||||
hasVideoError.value = true;
|
||||
addLog("error", "视频流加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 视频加载成功处理
|
||||
const handleVideoLoad = () => {
|
||||
hasVideoError.value = false;
|
||||
addLog("success", "视频流加载成功");
|
||||
};
|
||||
|
||||
// 尝试重新连接
|
||||
const tryReconnect = () => {
|
||||
addLog("info", "尝试重新连接视频流...");
|
||||
hasVideoError.value = false;
|
||||
|
||||
// 重新设置视频源，添加时间戳避免缓存问题
|
||||
currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`;
|
||||
};
|
||||
|
||||
// 启动视频流
|
||||
const startStream = async () => {
|
||||
try {
|
||||
addLog("info", "正在启动视频流...");
|
||||
videoStatus.value = "正在连接视频流...";
|
||||
videoClient.setEnabled(true);
|
||||
|
||||
// 刷新状态
|
||||
await refreshStatus();
|
||||
|
||||
// 设置视频源
|
||||
currentVideoSource.value = streamInfo.value.mjpegUrl;
|
||||
|
||||
// 设置播放状态
|
||||
isPlaying.value = true;
|
||||
hasVideoError.value = false;
|
||||
|
||||
addLog("success", "视频流已启动");
|
||||
} catch (error) {
|
||||
addLog("error", `启动视频流失败: ${error}`);
|
||||
videoStatus.value = "启动视频流失败";
|
||||
console.error("启动视频流失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 停止视频流
|
||||
const stopStream = () => {
|
||||
try {
|
||||
addLog("info", "正在停止视频流...");
|
||||
videoClient.setEnabled(false);
|
||||
|
||||
// 清除视频源
|
||||
currentVideoSource.value = "";
|
||||
|
||||
// 更新状态
|
||||
isPlaying.value = false;
|
||||
hasVideoError.value = false;
|
||||
videoStatus.value = '点击"播放视频流"按钮开始查看实时视频';
|
||||
|
||||
addLog("success", "视频流已停止");
|
||||
} catch (error) {
|
||||
addLog("error", `停止视频流失败: ${error}`);
|
||||
console.error("停止视频流失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(async () => {
|
||||
addLog("info", "HTTP 视频流页面已加载");
|
||||
await refreshStatus();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopStream();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义样式 */
|
||||
.stats {
|
||||
background-color: var(--b1);
|
||||
color: var(--bc);
|
||||
/* 添加适配文本颜色 */
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
img {
|
||||
/* 确保视频流居中显示 */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
* {
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user