Compare commits
6 Commits
1d550b8952
...
b80c991378
| Author | SHA1 | Date |
|---|---|---|
龚皓
|
b80c991378 | |
|
龚皓
|
733e548068 | |
|
龚皓
|
32feaeb0b5 | |
|
龚皓
|
c086787dfe | |
|
龚皓
|
474d7b533d | |
|
龚皓
|
47dc751cca |
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="icon" href="/icon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>告警管理</title>
|
||||
<script src="public\static\jsmpeg-master\jsmpeg.min.js"></script>
|
||||
<script src="/static/jsmpeg-master/jsmpeg.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,11 @@
|
|||
<el-icon><Avatar /></el-icon>
|
||||
<template #title><span>用户管理</span></template>
|
||||
</el-menu-item>
|
||||
<el-sub-menu index="1">
|
||||
<el-menu-item index="/settings">
|
||||
<el-icon><Setting /></el-icon>
|
||||
<template #title><span>告警设置</span></template>
|
||||
</el-menu-item>
|
||||
<!-- <el-sub-menu index="1">
|
||||
<template #title>
|
||||
<el-icon><Location /></el-icon>
|
||||
<span>面板测试</span>
|
||||
|
|
@ -43,7 +47,7 @@
|
|||
<el-icon><Document /></el-icon>
|
||||
<template #title><span>功能点3测试</span></template>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu> -->
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
|
|
@ -64,7 +68,7 @@
|
|||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-dropdown-item @click="goToUserManagement">
|
||||
<el-icon><User /></el-icon> 用户中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="onLogout">
|
||||
|
|
@ -92,7 +96,7 @@ import { ref, watch, onMounted } from 'vue';
|
|||
import { useRoute, useRouter } from 'vue-router';
|
||||
import {
|
||||
Document, WarningFilled, Location, User, SwitchButton,
|
||||
House, Management, TrendCharts, Avatar, Fold, Expand
|
||||
House, Management, TrendCharts, Avatar, Fold, Expand ,Setting
|
||||
} from '@element-plus/icons-vue';
|
||||
import { BoxApi } from '@/utils/boxApi';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
|
@ -103,6 +107,10 @@ const activeIndex = ref(route.path);
|
|||
const isCollapse = ref(false); // 控制侧边栏收缩状态
|
||||
const username = ref(''); // 存储用户名
|
||||
|
||||
const goToUserManagement = () => {
|
||||
router.push('/userList'); // 跳转到用户管理页面
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const storedUsername = localStorage.getItem('username');
|
||||
username.value = storedUsername ? storedUsername : '用户';
|
||||
|
|
@ -241,14 +249,18 @@ const onLogout = async () => {
|
|||
}
|
||||
|
||||
.nav-footer {
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
height: 5vh;
|
||||
background-color: #001529;
|
||||
/* background: linear-gradient(to top, rgb(3, 158, 185,0.7), rgb(123, 3, 153,0.7)); */
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
height: 2vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid #001529;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div class="settings-container">
|
||||
<el-row class="popup-row">
|
||||
<el-checkbox v-model="isPopupEnabled" @change="handleCheckboxChange">开启弹窗</el-checkbox>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 用于控制复选框的勾选状态
|
||||
const isPopupEnabled = ref(false);
|
||||
let websocket: WebSocket | null = null;
|
||||
let heartbeatInterval: number | null = null; // 用于心跳检测的定时器
|
||||
|
||||
// 从 localStorage 中读取勾选状态
|
||||
onMounted(() => {
|
||||
const storedState = localStorage.getItem('isPopupEnabled');
|
||||
isPopupEnabled.value = storedState === 'true';
|
||||
|
||||
if (isPopupEnabled.value) {
|
||||
connectWebSocket();
|
||||
}
|
||||
});
|
||||
|
||||
// 当页面离开或组件卸载时，清理 WebSocket 连接和心跳检测
|
||||
onBeforeUnmount(() => {
|
||||
closeWebSocket();
|
||||
});
|
||||
|
||||
// 当用户勾选或取消勾选时触发的函数
|
||||
const handleCheckboxChange = () => {
|
||||
if (isPopupEnabled.value) {
|
||||
// 如果复选框被勾选，弹出确认对话框
|
||||
ElMessageBox.confirm('是否开启弹窗提示？', '提示', {
|
||||
confirmButtonText: '是',
|
||||
cancelButtonText: '否',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
// 用户点击确认，开启 WebSocket
|
||||
localStorage.setItem('isPopupEnabled', 'true'); // 保存状态到 localStorage
|
||||
connectWebSocket();
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消，重置勾选状态
|
||||
isPopupEnabled.value = false;
|
||||
localStorage.setItem('isPopupEnabled', 'false'); // 更新 localStorage
|
||||
});
|
||||
} else {
|
||||
// 取消勾选时关闭 WebSocket 连接
|
||||
closeWebSocket();
|
||||
}
|
||||
};
|
||||
|
||||
// WebSocket 连接函数
|
||||
const connectWebSocket = () => {
|
||||
websocket = new WebSocket('ws://192.168.28.11:8080/event/ws');
|
||||
|
||||
websocket.onopen = () => {
|
||||
ElMessage.success('弹窗告警开启成功');
|
||||
startHeartbeat(); // 启动心跳检测
|
||||
};
|
||||
|
||||
websocket.onmessage = (event) => {
|
||||
// 接收到消息时，显示浏览器通知
|
||||
showNotification(event.data);
|
||||
};
|
||||
|
||||
websocket.onclose = () => {
|
||||
ElMessage.warning('WebSocket 已关闭');
|
||||
isPopupEnabled.value = false; // 如果连接异常关闭，取消勾选状态
|
||||
localStorage.setItem('isPopupEnabled', 'false'); // 更新 localStorage
|
||||
stopHeartbeat(); // 停止心跳检测
|
||||
};
|
||||
|
||||
websocket.onerror = () => {
|
||||
ElMessage.error('WebSocket 连接出错');
|
||||
isPopupEnabled.value = false;
|
||||
localStorage.setItem('isPopupEnabled', 'false');
|
||||
stopHeartbeat(); // 停止心跳检测
|
||||
};
|
||||
};
|
||||
|
||||
// 关闭 WebSocket 连接
|
||||
const closeWebSocket = () => {
|
||||
if (websocket) {
|
||||
websocket.close();
|
||||
ElMessage.info('WebSocket 连接已关闭');
|
||||
localStorage.setItem('isPopupEnabled', 'false'); // 更新 localStorage
|
||||
stopHeartbeat(); // 停止心跳检测
|
||||
}
|
||||
};
|
||||
|
||||
// 显示浏览器通知
|
||||
const showNotification = (message: string) => {
|
||||
if (Notification.permission === 'granted') {
|
||||
new Notification('新消息', {
|
||||
body: message,
|
||||
icon: '/path/to/icon.png', // 可以指定通知的图标
|
||||
});
|
||||
} else if (Notification.permission !== 'denied') {
|
||||
// 请求用户授权通知
|
||||
Notification.requestPermission().then((permission) => {
|
||||
if (permission === 'granted') {
|
||||
new Notification('新消息', {
|
||||
body: message,
|
||||
icon: '/path/to/icon.png',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 心跳检测，定时发送消息或 ping WebSocket
|
||||
const startHeartbeat = () => {
|
||||
if (heartbeatInterval) return;
|
||||
|
||||
heartbeatInterval = window.setInterval(() => {
|
||||
if (websocket && websocket.readyState === WebSocket.OPEN) {
|
||||
websocket.send('ping'); // 发送心跳消息
|
||||
}
|
||||
}, 5000); // 每5秒发送一次心跳消息
|
||||
};
|
||||
|
||||
// 停止心跳检测
|
||||
const stopHeartbeat = () => {
|
||||
if (heartbeatInterval) {
|
||||
clearInterval(heartbeatInterval);
|
||||
heartbeatInterval = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 检查通知权限
|
||||
onMounted(() => {
|
||||
if (Notification.permission !== 'granted') {
|
||||
Notification.requestPermission();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-container {
|
||||
padding: 20px;
|
||||
}
|
||||
.popup-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -85,15 +85,17 @@ onMounted(async () => {
|
|||
/* margin-bottom: 10px; */
|
||||
/* display: flex; */
|
||||
/* gap: 5px; */
|
||||
background-color: #fff;
|
||||
/* background-color: #fff; */
|
||||
/* background-color: #1E2E4A; */
|
||||
/* overflow: hidden; */
|
||||
/* height: 55vh; */
|
||||
/* max-height: 450px; */
|
||||
/* padding-left: 1vh; */
|
||||
/* padding-right:1vh ; */
|
||||
/* overflow: hidden; */
|
||||
height: 55vh;
|
||||
height: 56vh;
|
||||
margin-top: 60px;
|
||||
/* border: 1px solid #1E2E4A; */
|
||||
}
|
||||
.bottom-pan{
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
<template>
|
||||
<div class="camera-container">
|
||||
<!-- 左侧摄像头列表 -->
|
||||
<!-- 左侧：摄像头列表 -->
|
||||
<div class="camera-list">
|
||||
<el-card v-for="camera in cameras" :key="camera.id" class="camera-item" @click="selectCamera(camera)">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索摄像头名称"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
class="search-input"
|
||||
/>
|
||||
<el-card v-for="camera in filteredCameras" :key="camera.id" class="camera-item" @click="selectCamera(camera)">
|
||||
<div class="camera-header">
|
||||
<span>ID: {{ camera.id }}</span>
|
||||
<span class="status" :class="{ 'online': camera.status === 'online', 'offline': camera.status !== 'online' }">
|
||||
|
|
@ -16,208 +23,232 @@
|
|||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 右侧摄像头详情和播放控制 -->
|
||||
<div class="camera-details" v-if="selectedCamera">
|
||||
<el-card>
|
||||
<div class="stream-control">
|
||||
<p>{{ selectedCamera.name }}</p>
|
||||
</div>
|
||||
<!-- 右侧：摄像头详情栅格 -->
|
||||
<div class="camera-grid">
|
||||
<div v-for="camera in selectedCameras" :key="camera.id" class="camera-details">
|
||||
<el-card class="camera-card">
|
||||
<div class="stream-control">
|
||||
<p class="camera-name-title">{{ camera.name }}</p>
|
||||
<el-button @click="closeStream(camera)" class="close-button" circle size="mini">X</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 在未播放时显示播放按钮 -->
|
||||
<div class="play-button-container" @mouseenter="showButton = true" @mouseleave="showButton = false">
|
||||
<img v-show="!playing && selectedCamera.snapshot" :src="selectedCamera.snapshot" alt="camera snapshot"
|
||||
class="camera-snapshot" />
|
||||
<canvas v-show="playing" ref="canvasRef" class="camera-large"></canvas>
|
||||
<!-- 视频播放和快照部分 -->
|
||||
<div class="play-button-container" @mouseenter="showButton = true" @mouseleave="showButton = false">
|
||||
<!-- 未播放时显示快照或占位符 -->
|
||||
<div class="camera-placeholder" v-if="!camera.playing && !camera.snapshot">
|
||||
<el-icon size="48">
|
||||
<VideoCameraFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 播放按钮 -->
|
||||
<el-button v-show="!playing || showButton" class="play-button" type="primary" circle size="large"
|
||||
@click="handlePlayPause">
|
||||
<el-icon>
|
||||
<VideoPlay v-if="!playing" />
|
||||
<VideoPause v-if="playing" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<img v-if="!camera.playing && camera.snapshot" :src="camera.snapshot" alt="camera snapshot"
|
||||
class="camera-snapshot" />
|
||||
|
||||
<!-- 播放视频流的 canvas -->
|
||||
<canvas v-show="camera.playing" :ref="el => setCanvasRef(camera.id, el)" class="camera-large"></canvas>
|
||||
|
||||
<!-- 播放和暂停按钮 -->
|
||||
<el-button v-show="!camera.playing || showButton" class="play-button" type="primary" circle size="large"
|
||||
@click="handlePlayPause(camera)">
|
||||
<el-icon>
|
||||
<VideoPlay v-if="!camera.playing" />
|
||||
<VideoPause v-if="camera.playing" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick,computed } from 'vue';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
|
||||
import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
|
||||
|
||||
// 存储所有摄像头列表
|
||||
const cameras = ref([]);
|
||||
const selectedCamera = ref(null);
|
||||
const playing = ref(false);
|
||||
const streamPort = ref(null);
|
||||
const canvasRef = ref(null);
|
||||
const playerRef = ref(null);
|
||||
const showButton = ref(false); // 用于控制按钮的显示和隐藏
|
||||
|
||||
// 存储已选择并展示的摄像头
|
||||
const selectedCameras = ref([]);
|
||||
// 控制播放按钮的显示状态
|
||||
const showButton = ref(false);
|
||||
// API 实例
|
||||
const apiInstance = new BoxApi();
|
||||
// 存储 canvas 引用
|
||||
const canvasRefs = ref({});
|
||||
|
||||
// 请求摄像头数据
|
||||
// 搜索输入的查询字符串
|
||||
const searchQuery = ref('');
|
||||
|
||||
// 计算属性：根据搜索关键词过滤摄像头列表
|
||||
const filteredCameras = computed(() =>
|
||||
cameras.value.filter(camera =>
|
||||
camera.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
// 获取摄像头列表
|
||||
const fetchCameras = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
const cameraData = await apiInstance.getMinCameras(token); // 调用 getMinCameras 方法
|
||||
cameras.value = cameraData; // 保存摄像头列表数据
|
||||
const cameraData = await apiInstance.getMinCameras(token);
|
||||
cameras.value = cameraData;
|
||||
} catch (error) {
|
||||
console.error('Error fetching cameras:', error);
|
||||
console.error('获取摄像头列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 选择摄像头
|
||||
// 选择摄像头并展示详情
|
||||
const selectCamera = (camera) => {
|
||||
selectedCamera.value = camera; // 将点击的摄像头设为选中的摄像头
|
||||
playing.value = false; // 重置播放状态
|
||||
streamPort.value = null; // 重置流端口
|
||||
showButton.value = true; // 重置按钮显示状态
|
||||
};
|
||||
|
||||
// 启动或暂停播放
|
||||
const handlePlayPause = async () => {
|
||||
if (playing.value) {
|
||||
handleStopStream();
|
||||
} else {
|
||||
handleStartStream();
|
||||
if (!selectedCameras.value.some(c => c.id === camera.id)) {
|
||||
selectedCameras.value.push({ ...camera, playing: false, streamPort: null });
|
||||
}
|
||||
};
|
||||
|
||||
// 启动流播放
|
||||
const handleStartStream = async () => {
|
||||
console.log('Button clicked and playing is:', playing.value);
|
||||
if (!selectedCamera.value || !canvasRef.value) {
|
||||
// 设置 canvas 引用
|
||||
const setCanvasRef = (cameraId, el) => {
|
||||
if (el) {
|
||||
canvasRefs.value[cameraId] = el;
|
||||
}
|
||||
};
|
||||
|
||||
// 播放/暂停摄像头视频流
|
||||
const handlePlayPause = async (camera) => {
|
||||
if (camera.playing) {
|
||||
handleStopStream(camera);
|
||||
} else {
|
||||
handleStartStream(camera);
|
||||
}
|
||||
};
|
||||
|
||||
// 启动视频流
|
||||
const handleStartStream = async (camera) => {
|
||||
await nextTick(); // 确保 DOM 已渲染
|
||||
const canvas = canvasRefs.value[camera.id];
|
||||
|
||||
if (!camera || !canvas) {
|
||||
console.error('未找到对应的 canvas');
|
||||
return;
|
||||
}
|
||||
|
||||
const token = localStorage.getItem('alertToken');
|
||||
try {
|
||||
const response = await apiInstance.startCameraStream(token, selectedCamera.value.id);
|
||||
streamPort.value = response.port;
|
||||
playing.value = true;
|
||||
const response = await apiInstance.startCameraStream(token, camera.id);
|
||||
camera.streamPort = response.port;
|
||||
camera.playing = true;
|
||||
|
||||
// 创建播放器
|
||||
const url = `ws://192.168.28.33:${streamPort.value}/`;
|
||||
console.log('Playing set to true:', playing.value);
|
||||
|
||||
if (playerRef.value) {
|
||||
playerRef.value.destroy(); // 销毁旧播放器
|
||||
}
|
||||
const rememberedAddress = localStorage.getItem('rememberedAddress') || '127.0.0.1';
|
||||
const url = `ws://${rememberedAddress}:${camera.streamPort}/`;
|
||||
// const url = `ws://192.168.28.33:${camera.streamPort}/`;
|
||||
console.log('播放路径:', url);
|
||||
|
||||
if (window.JSMpeg) {
|
||||
playerRef.value = new window.JSMpeg.Player(url, {
|
||||
canvas: canvasRef.value,
|
||||
const player = new window.JSMpeg.Player(url, {
|
||||
canvas: canvas,
|
||||
autoplay: true,
|
||||
videoBufferSize: 15 * 1024 * 1024,
|
||||
audioBufferSize: 5 * 1024 * 1024,
|
||||
});
|
||||
camera.player = player;
|
||||
} else {
|
||||
console.error('JSMpeg is not available on window object.');
|
||||
console.error('JSMpeg 未加载');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error starting stream:', error);
|
||||
console.error('启动视频流失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 停止流播放
|
||||
const handleStopStream = async () => {
|
||||
if (!selectedCamera.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 停止视频流
|
||||
const handleStopStream = async (camera) => {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
try {
|
||||
await apiInstance.stopCameraStream(token, selectedCamera.value.id);
|
||||
playing.value = false;
|
||||
await apiInstance.stopCameraStream(token, camera.id);
|
||||
camera.playing = false;
|
||||
|
||||
// 销毁播放器
|
||||
if (playerRef.value) {
|
||||
playerRef.value.destroy();
|
||||
playerRef.value = null;
|
||||
if (camera.player) {
|
||||
camera.player.destroy();
|
||||
camera.player = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error stopping stream:', error);
|
||||
console.error('停止视频流失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 组件卸载时清理播放器
|
||||
onBeforeUnmount(() => {
|
||||
if (playerRef.value) {
|
||||
playerRef.value.destroy();
|
||||
playerRef.value = null;
|
||||
}
|
||||
// 关闭摄像头流视图
|
||||
const closeStream = (camera) => {
|
||||
handleStopStream(camera);
|
||||
selectedCameras.value = selectedCameras.value.filter(c => c.id !== camera.id);
|
||||
};
|
||||
|
||||
// 组件挂载时获取摄像头列表
|
||||
onMounted(() => {
|
||||
fetchCameras();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchCameras(); // 页面加载时请求摄像头数据
|
||||
// 组件卸载时清理资源
|
||||
onBeforeUnmount(() => {
|
||||
selectedCameras.value.forEach(camera => {
|
||||
if (camera.player) {
|
||||
camera.player.destroy();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.camera-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-color: #1E2E4A;
|
||||
}
|
||||
|
||||
/* 左侧摄像头列表 */
|
||||
.camera-list {
|
||||
width: 20%;
|
||||
min-width: 215px;
|
||||
max-height: 90vh;
|
||||
max-height: 100vh;
|
||||
/* 限制高度为一屏 */
|
||||
overflow-y: auto;
|
||||
/* 超出时滚动 */
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #1E2E4A;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 每个摄像头项目的样式 */
|
||||
.camera-item {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid #458388;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.camera-item:hover {
|
||||
background-color: #f5f7fa;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 摄像头项目头部 */
|
||||
.camera-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 摄像头状态标签 */
|
||||
.status {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.camera-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.camera-thumbnail {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.camera-name {
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.camera-details {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.camera-snapshot {
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.camera-large {
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.online {
|
||||
|
|
@ -228,28 +259,141 @@ onMounted(() => {
|
|||
color: red;
|
||||
}
|
||||
|
||||
/* 摄像头内容：缩略图和名称 */
|
||||
.camera-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.camera-thumbnail {
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #12d1df;
|
||||
}
|
||||
|
||||
.camera-name {
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 右侧摄像头详情展示 */
|
||||
.camera-grid {
|
||||
width: 80%;
|
||||
height: 95vh; /* 占满页面右侧区域 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* 两列 */
|
||||
grid-template-rows: repeat(2, 1fr); /* 两行 */
|
||||
gap: 5px; /* 栅格块之间的间距 */
|
||||
padding: 10px;
|
||||
/* background-color: #1E2E4A; */
|
||||
background: linear-gradient(to top, rgba(0, 3, 3, 0.4), rgba(9, 21, 196, 0.3));
|
||||
/* background: linear-gradient(to top, rgba(8, 53, 61, 0.4), rgba(9, 21, 196, 0.3)); */
|
||||
/* border: 2px solid #ece9e9; */
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.camera-details {
|
||||
height: 45vh;
|
||||
/* background-color: #3b2c2c; */
|
||||
/* background: linear-gradient(to top, rgba(8, 53, 61, 0.4), rgba(9, 21, 196, 0.3)); */
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* overflow-y: auto; */
|
||||
}
|
||||
.camera-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: #1E2E4A; */
|
||||
background: linear-gradient(to top, rgba(64, 226, 255, 0.7), rgba(211, 64, 248, 0.7));
|
||||
/* background: linear-gradient(to top, rgba(0, 7, 8, 0.9), rgba(12, 2, 155, 0.7)); */
|
||||
border: 2px solid #0b4c5f;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
/* padding: 10px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.stream-control {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* .stream-control p {
|
||||
color: #f5f7fa;
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
} */
|
||||
|
||||
.camera-name-title {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.camera-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #6b6b6b;
|
||||
border: 2px dashed rgba(109, 109, 109, 0.7);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(50, 50, 50, 0.5);
|
||||
}
|
||||
|
||||
/* 播放中的 canvas 样式 */
|
||||
.camera-large {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(109, 109, 109, 0.3);
|
||||
}
|
||||
|
||||
/* 摄像头大图和快照 */
|
||||
.camera-snapshot {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #dcdcdc;
|
||||
}
|
||||
|
||||
|
||||
.stream-control p {
|
||||
margin-right: 20px;
|
||||
font-size: 15px;
|
||||
line-height: 5px;
|
||||
}
|
||||
|
||||
.stream-control el-button {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
/* 播放按钮容器 */
|
||||
.play-button-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 播放按钮 */
|
||||
.play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,24 @@
|
|||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { BoxApi } from '@/utils/boxApi';
|
||||
import { BoxApi } from '@/utils/boxApi';
|
||||
import { User, Lock } from '@element-plus/icons-vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// 获取主机地址（去掉端口）
|
||||
const getHostAddress = () => window.location.hostname;
|
||||
const getHostPort = () => '8000';
|
||||
|
||||
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
address: '',
|
||||
port: '',
|
||||
remember: false // 新增 "记住密码" 选项
|
||||
address: localStorage.getItem('rememberedAddress') || getHostAddress(),
|
||||
port: localStorage.getItem('rememberedPort') || getHostPort(),
|
||||
remember: false,
|
||||
serverSettings: false
|
||||
});
|
||||
|
||||
const errorMessage = ref('');
|
||||
|
|
@ -23,50 +29,48 @@ const cookless = ref(false);
|
|||
// 创建实例
|
||||
let apiInstance: BoxApi | null = null;
|
||||
|
||||
|
||||
|
||||
// 加载页面时检查是否有记住的密码
|
||||
onMounted(() => {
|
||||
const savedUsername = localStorage.getItem('username');
|
||||
const savedPassword = localStorage.getItem('rememberedPassword');
|
||||
const savedAddress = localStorage.getItem('rememberedAddress');
|
||||
const savedPort = localStorage.getItem('rememberedPort');
|
||||
|
||||
if (savedUsername && savedPassword && savedAddress && savedPort) {
|
||||
// const savedAddress = localStorage.getItem('rememberedAddress');
|
||||
// const savedPort = localStorage.getItem('rememberedPort');
|
||||
if (savedUsername && savedPassword) {
|
||||
loginForm.username = savedUsername;
|
||||
loginForm.password = savedPassword;
|
||||
loginForm.address = savedAddress;
|
||||
loginForm.port = savedPort;
|
||||
loginForm.remember = true; // 如果有记住的数据，将复选框设为选中状态
|
||||
}
|
||||
});
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
// 检查服务器地址和端口是否填写
|
||||
if (!loginForm.address || !loginForm.port) {
|
||||
errorMessage.value = '请输入服务器地址和端口';
|
||||
return;
|
||||
}
|
||||
// if (!loginForm.address || !loginForm.port) {
|
||||
// errorMessage.value = '请输入服务器地址和端口';
|
||||
// return;
|
||||
// }
|
||||
const address = loginForm.serverSettings ? loginForm.address : getHostAddress();
|
||||
const port = loginForm.serverSettings ? loginForm.port : getHostPort();
|
||||
|
||||
// 实例化 SuperboxApi
|
||||
apiInstance = new BoxApi(loginForm.address, parseInt(loginForm.port));
|
||||
apiInstance = new BoxApi(address, parseInt(port));
|
||||
|
||||
// 调用 SuperboxApi 的 login 方法，传入 cookless 为 false
|
||||
const apiToken = await apiInstance.login(loginForm.username, loginForm.password,false);
|
||||
const apiToken = await apiInstance.login(loginForm.username, loginForm.password, false);
|
||||
|
||||
// 保存 token 到本地存储
|
||||
localStorage.setItem('alertToken', apiToken);
|
||||
localStorage.setItem('username', loginForm.username);
|
||||
localStorage.setItem('rememberedAddress', address);
|
||||
localStorage.setItem('rememberedPort', port);
|
||||
|
||||
// 如果勾选了“记住密码”，将用户名、密码、地址和端口存入 localStorage
|
||||
if (loginForm.remember) {
|
||||
localStorage.setItem('username', loginForm.username);
|
||||
localStorage.setItem('rememberedPassword', loginForm.password);
|
||||
localStorage.setItem('rememberedAddress', loginForm.address);
|
||||
localStorage.setItem('rememberedPort', loginForm.port);
|
||||
} else {
|
||||
// 如果未勾选“记住密码”，清除之前记住的数据
|
||||
localStorage.removeItem('rememberedPassword');
|
||||
localStorage.removeItem('rememberedAddress');
|
||||
localStorage.removeItem('rememberedPort');
|
||||
}
|
||||
|
||||
// 跳转到首页
|
||||
|
|
@ -84,9 +88,12 @@ const onSubmit = async () => {
|
|||
const onReset = () => {
|
||||
loginForm.username = '';
|
||||
loginForm.password = '';
|
||||
loginForm.address = '';
|
||||
loginForm.port = '';
|
||||
// loginForm.address = '';
|
||||
// loginForm.port = '';
|
||||
loginForm.address = getHostAddress(); // 重置为当前主机地址
|
||||
loginForm.port = getHostPort(); // 重置为当前端口号
|
||||
loginForm.remember = false; // 重置记住密码复选框
|
||||
loginForm.serverSettings = false;
|
||||
errorMessage.value = '';
|
||||
};
|
||||
</script>
|
||||
|
|
@ -102,10 +109,10 @@ const onReset = () => {
|
|||
</div>
|
||||
<div class="login-body">
|
||||
<el-form :model="loginForm" style="max-width: 600px;">
|
||||
<el-form-item>
|
||||
<el-form-item v-show="loginForm.serverSettings">
|
||||
<el-input v-model="loginForm.address" placeholder="服务器地址" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-form-item v-show="loginForm.serverSettings">
|
||||
<el-input v-model="loginForm.port" placeholder="端口" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
|
@ -126,10 +133,14 @@ const onReset = () => {
|
|||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- 添加记住密码复选框 -->
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-row class="setting-row">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="loginForm.serverSettings">服务器设置</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row justify="end">
|
||||
<el-form-item size="small" :gutter="30">
|
||||
<el-button type="primary" @click="onReset" plain>重置</el-button>
|
||||
|
|
@ -201,4 +212,8 @@ const onReset = () => {
|
|||
.error-message {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import UserList from '@/html/UserList.vue';
|
|||
import Home from '@/html/Home.vue';
|
||||
import DataStatistics from '@/html/DataStatistics.vue';
|
||||
import Cameras from '@/components/Cameras.vue';
|
||||
import Settings from '@/components/Settings.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -65,6 +66,12 @@ const routes = [
|
|||
name: 'Cameras',
|
||||
component: Cameras,
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path:'/settings',
|
||||
name: 'Settings',
|
||||
component: Settings,
|
||||
meta: { requiresAuth: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -382,17 +382,24 @@ class BoxApi {
|
|||
}
|
||||
|
||||
private _authHeader(token: string | null = null): object {
|
||||
// const access_token = token === "" ? this.token : token;
|
||||
const alertToken = localStorage.getItem(`alertToken`) || token || this.token || "" || "";
|
||||
const accessToken = token || this.token || localStorage.getItem('alertToken') || "";
|
||||
return {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Authorization': `Bearer ${alertToken}`,
|
||||
// 'Cookie': `jwt=${access_token}`
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
// 'X-CSRFToken': this.getCsrfToken()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
private getCsrfToken(): string {
|
||||
const cookie = document.cookie.split(';').find(cookie => cookie.trim().startsWith('csrftoken='));
|
||||
if (cookie) {
|
||||
return cookie.split('=')[1];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
|
||||
private _boxAddr() {
|
||||
return window.location.host.replace(/:\d+/, "");
|
||||
|
|
|
|||
Loading…
Reference in New Issue