戴代码备份
This commit is contained in:
龚皓
parent
fd75d299ec
commit
a13d627315
|
|
@ -72,7 +72,7 @@
|
||||||
const fetchCameras = async () => {
|
const fetchCameras = async () => {
|
||||||
try {
|
try {
|
||||||
const token = localStorage.getItem('alertToken');
|
const token = localStorage.getItem('alertToken');
|
||||||
const cameraData = await apiInstance.getMinCameras(token);
|
const cameraData = await apiInstance.getAllCameras(token);
|
||||||
|
|
||||||
// 根据 filterStatus 筛选摄像头状态
|
// 根据 filterStatus 筛选摄像头状态
|
||||||
if (filterStatus.value === "online") {
|
if (filterStatus.value === "online") {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,205 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-card class="stats-card">
|
||||||
|
<div class="stats-header">告警数量和类型分布</div>
|
||||||
|
<el-row :gutter="20" class="stats-row">
|
||||||
|
<el-col :span="24">
|
||||||
|
<div ref="chart" class="chart"></div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { BoxApi } from '@/utils/boxApi.ts'; // 引入 BoxApi 类
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const chart = ref(null);
|
||||||
|
const seriesData = ref([]);
|
||||||
|
|
||||||
|
// BoxApi 实例
|
||||||
|
const apiInstance = new BoxApi();
|
||||||
|
|
||||||
|
// 获取告警类型的映射
|
||||||
|
const fetchTypeMapping = async (token) => {
|
||||||
|
const algorithms = await apiInstance.getAlgorithms(token);
|
||||||
|
let mapping = algorithms.map(algorithm => ({
|
||||||
|
value: 0,
|
||||||
|
code_name: algorithm.code_name,
|
||||||
|
name: algorithm.name
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 添加额外的类型
|
||||||
|
const newMapping = [
|
||||||
|
{ code_name: "minizawu:532", name: "杂物堆积", value: 0 }
|
||||||
|
];
|
||||||
|
|
||||||
|
seriesData.value = mapping.concat(newMapping);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分批次获取全量告警数据并更新 seriesData
|
||||||
|
const fetchAndProcessEvents = async (token) => {
|
||||||
|
try {
|
||||||
|
let currentPage = 1;
|
||||||
|
const pageSize = 1000; // 每次加载 2000 条
|
||||||
|
let allEvents = [];
|
||||||
|
|
||||||
|
// 第一次请求，获取告警总数和首批数据
|
||||||
|
const { tableData: firstBatch, totalItems } = await apiInstance.getEvents(token, pageSize, currentPage);
|
||||||
|
allEvents = [...firstBatch];
|
||||||
|
|
||||||
|
// 根据告警总数计算总页数
|
||||||
|
const totalPages = Math.ceil(totalItems / pageSize);
|
||||||
|
|
||||||
|
// 循环分页加载剩余的数据
|
||||||
|
while (currentPage < totalPages) {
|
||||||
|
currentPage++;
|
||||||
|
const { tableData: nextBatch } = await apiInstance.getEvents(token, pageSize, currentPage);
|
||||||
|
allEvents = [...allEvents, ...nextBatch];
|
||||||
|
|
||||||
|
// 每次加载数据后逐步更新图表
|
||||||
|
processEventData(allEvents);
|
||||||
|
updateChart(); // 逐步更新图表
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最终处理全部数据
|
||||||
|
processEventData(allEvents);
|
||||||
|
updateChart(); // 最终更新图表
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching events:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理告警事件数据并更新 seriesData
|
||||||
|
const processEventData = (events) => {
|
||||||
|
// 重置数据，防止累计错误
|
||||||
|
seriesData.value.forEach(item => {
|
||||||
|
item.value = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 遍历事件并统计告警类型数量
|
||||||
|
events.forEach(event => {
|
||||||
|
const matchAlgorithm = seriesData.value.find(item => item.code_name === event.types);
|
||||||
|
if (matchAlgorithm) {
|
||||||
|
matchAlgorithm.value += 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
const initChart = () => {
|
||||||
|
// 初始化 ECharts 实例
|
||||||
|
if (!chart.value) {
|
||||||
|
console.error("Chart DOM element is not available");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
chart.value = echarts.init(chart.value);
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
bottom: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
itemGap: 20,
|
||||||
|
data: seriesData.value.map(item => item.name),
|
||||||
|
show : true
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '告警类型',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
data: seriesData.value,
|
||||||
|
data: [],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
stillShowZeroSum: false,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
chart.value.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新图表数据
|
||||||
|
const updateChart = () => {
|
||||||
|
if (chart.value && typeof chart.value.setOption === 'function') {
|
||||||
|
chart.value.setOption({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: seriesData.value
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.error("ECharts instance is not initialized properly");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('alertToken');
|
||||||
|
|
||||||
|
// 获取告警类型映射
|
||||||
|
await fetchTypeMapping(token);
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
initChart();
|
||||||
|
|
||||||
|
// 分批次获取告警数据并更新图表
|
||||||
|
await fetchAndProcessEvents(token);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching data:", error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.stats-card {
|
||||||
|
background-color: #304555;
|
||||||
|
/* background: linear-gradient(to top, rgba(16, 84, 194, 0.6), rgba(31, 48, 207, 0.7)); */
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
/* margin: 10px; */
|
||||||
|
/* padding: 10px; */
|
||||||
|
/* height: 100vh; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-header {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1px solid #3a4b5c;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
/* min-height: 365px; */
|
||||||
|
height: 41vh;
|
||||||
|
min-width: 40vw;
|
||||||
|
/* height: 445px; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
const fetchCameras = async () => {
|
const fetchCameras = async () => {
|
||||||
try {
|
try {
|
||||||
const token = localStorage.getItem('alertToken');
|
const token = localStorage.getItem('alertToken');
|
||||||
const cameraData = await apiInstance.getMinCameras(token);
|
const cameraData = await apiInstance.getAllCameras(token);
|
||||||
cameras.value = cameraData;
|
cameras.value = cameraData;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取摄像头列表失败:', error);
|
console.error('获取摄像头列表失败:', error);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,595 @@
|
||||||
|
<template>
|
||||||
|
<div class="camera-container">
|
||||||
|
<div class="top-header">
|
||||||
|
<div class="search-row">
|
||||||
|
<el-input v-model="searchKeyword" placeholder="搜索摄像头名称" @input="filterCameras" class="search-input" />
|
||||||
|
</div>
|
||||||
|
<el-select v-model="filterStatus" placeholder="筛选状态" @change="fetchCameras" class="status-filter">
|
||||||
|
<el-option label="全部" value="all"></el-option>
|
||||||
|
<el-option label="在线" value="online"></el-option>
|
||||||
|
<el-option label="离线" value="offline"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<!-- <div class="top-text">警戒点位</div>
|
||||||
|
<el-select v-model="selectedCameraId" placeholder="搜索摄像头名称" @change="selectCameraById" clearable filterable
|
||||||
|
class="camera-select">
|
||||||
|
<el-option v-for="camera in cameras" :key="camera.id" :label="camera.name" :value="camera.id">
|
||||||
|
<span>{{ camera.id }}.</span> 名称: {{ camera.name }}
|
||||||
|
</el-option>
|
||||||
|
</el-select> -->
|
||||||
|
</div>
|
||||||
|
<div class="content-container">
|
||||||
|
<div class="left-part">
|
||||||
|
<div class="camera-list">
|
||||||
|
<el-card v-for="camera in filteredCameras" :key="camera.id" class="camera-item"
|
||||||
|
@click="selectCameraById(camera.id)">
|
||||||
|
<template #header>
|
||||||
|
<el-row class="row-id-name">
|
||||||
|
<el-col :span="14" class="col-camera-id">
|
||||||
|
{{ camera.name }}
|
||||||
|
</el-col>
|
||||||
|
<!-- <el-col :span="8" class="col-camera-name">
|
||||||
|
{{ camera.name }}
|
||||||
|
</el-col> -->
|
||||||
|
<el-col :span="10" class="col-camera-setting">
|
||||||
|
<el-button type="text" icon="el-icon-setting" class="settings-button"
|
||||||
|
@click.stop="handleSettings(camera.id)">设置</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
<div class="div-content">
|
||||||
|
<el-row class="row-content">
|
||||||
|
<el-col :span="10" class="col-camera-snapshot">
|
||||||
|
通道{{ camera.id }}
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="14" class="col-camera-snapshot">
|
||||||
|
<el-image :src="camera.snapshot" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
|
||||||
|
:preview-src-list="camera.snapshot" class="camera-img" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="camera-grid">
|
||||||
|
<div v-for="(camera, index) in selectedCameras" :key="camera.id" class="grid-item">
|
||||||
|
<div class="stream-control">
|
||||||
|
<p class="camera-name-title">{{ camera.name }}</p>
|
||||||
|
<div class="close-button" @click="closeStream(camera)">×</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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-image v-if="!camera.playing && camera.snapshot" :src="camera.snapshot" alt="camera snapshot"
|
||||||
|
class="camera-snapshot" />
|
||||||
|
<el-button v-show="!camera.playing || showButton" class="play-button" type="primary" circle size="large"
|
||||||
|
@click="openDialog(camera)">
|
||||||
|
<el-icon>
|
||||||
|
<VideoPlay v-if="!camera.playing" />
|
||||||
|
<VideoPause v-if="camera.playing" />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" width="50%" @close="closeDialog">
|
||||||
|
<template #title>播放摄像头: {{ currentCamera?.name }}</template>
|
||||||
|
<canvas v-show="dialogVisible" ref="dialogCanvas" class="dialog-canvas"></canvas>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
|
||||||
|
<CameraRules :visible="rulesDialogVisible" :cameraData="currentCameraData"
|
||||||
|
@update:visible="rulesDialogVisible = $event" @save-result="handleSaveResult" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import { BoxApi } from '@/utils/boxApi.ts';
|
||||||
|
import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
|
||||||
|
import CameraRules from '@/html/CameraRules.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
|
const cameras = ref([]);
|
||||||
|
const selectedCameras = ref([]);
|
||||||
|
const showButton = ref(false);
|
||||||
|
const apiInstance = new BoxApi();
|
||||||
|
const canvasRefs = ref({});
|
||||||
|
const selectedCameraId = ref(null);
|
||||||
|
const dialogVisible = ref(false); // 控制弹窗的显示与隐藏
|
||||||
|
const currentCamera = ref(null); // 当前选中的摄像头
|
||||||
|
|
||||||
|
// 弹窗中的canvas引用
|
||||||
|
const dialogCanvas = ref(null);
|
||||||
|
const filterStatus = ref("all");
|
||||||
|
|
||||||
|
const filteredCameras = ref([]);
|
||||||
|
const searchKeyword = ref('');
|
||||||
|
|
||||||
|
const currentCameraData = ref(null);
|
||||||
|
const rulesDialogVisible = ref(false);
|
||||||
|
|
||||||
|
|
||||||
|
const fetchCameras = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('alertToken');
|
||||||
|
const cameraData = await apiInstance.getAllCameras(token);
|
||||||
|
// console.log("cameraData>>>>>>>>>>>>>>>", cameraData);
|
||||||
|
|
||||||
|
// 根据 filterStatus 筛选摄像头状态
|
||||||
|
if (filterStatus.value === "online") {
|
||||||
|
cameras.value = cameraData.filter(camera => camera.status === "online");
|
||||||
|
} else if (filterStatus.value === "offline") {
|
||||||
|
cameras.value = cameraData.filter(camera => camera.status === "offline");
|
||||||
|
} else {
|
||||||
|
cameras.value = cameraData;
|
||||||
|
// console.log("all cameras:", cameras.value);
|
||||||
|
}
|
||||||
|
filteredCameras.value = [...cameras.value];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取摄像头列表失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterCameras = () => {
|
||||||
|
if (!searchKeyword.value.trim()) {
|
||||||
|
filteredCameras.value = [...cameras.value];
|
||||||
|
} else {
|
||||||
|
filteredCameras.value = cameras.value.filter(camera =>
|
||||||
|
camera.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// console.log("filteredCameras>>:", filteredCameras.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectCameraById = (cameraId) => {
|
||||||
|
const camera = cameras.value.find(c => c.id === cameraId);
|
||||||
|
if (camera && !selectedCameras.value.some(c => c.id === camera.id)) {
|
||||||
|
selectedCameras.value.push({ ...camera, playing: false, streamPort: null });
|
||||||
|
// console.log("搜索摄像头的数组内含有", selectedCameras.value)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleSettings = async (cameraId) => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('alertToken');
|
||||||
|
const cameraData = await apiInstance.getCameraById(token, cameraId);
|
||||||
|
// console.log("获取到的 cameraData:", cameraData);
|
||||||
|
currentCameraData.value = cameraData;
|
||||||
|
rulesDialogVisible.value = true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取摄像头规则失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveResult = ({ success, message }) => {
|
||||||
|
console.log('收到子组件保存结果事件:', { success, message });
|
||||||
|
|
||||||
|
ElMessage({
|
||||||
|
message,
|
||||||
|
type: success ? 'success' : 'error',
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (success) {
|
||||||
|
rulesDialogVisible.value = false; // 关闭规则对话框
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打开弹窗并开始播放
|
||||||
|
const openDialog = async (camera) => {
|
||||||
|
currentCamera.value = camera;
|
||||||
|
dialogVisible.value = true;
|
||||||
|
await nextTick();
|
||||||
|
startStreamInDialog(camera);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在弹窗中播放视频
|
||||||
|
const startStreamInDialog = async (camera) => {
|
||||||
|
const canvas = dialogCanvas.value;
|
||||||
|
|
||||||
|
if (!camera || !canvas) {
|
||||||
|
console.error('未找到对应的 canvas');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = localStorage.getItem('alertToken');
|
||||||
|
try {
|
||||||
|
const response = await apiInstance.startCameraStream(token, camera.id);
|
||||||
|
camera.streamPort = response.port;
|
||||||
|
camera.playing = true;
|
||||||
|
|
||||||
|
const url = `ws://192.168.28.33:${camera.streamPort}/`;
|
||||||
|
// console.log('播放路径:', url);
|
||||||
|
|
||||||
|
if (window.JSMpeg) {
|
||||||
|
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 未加载');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('启动视频流失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭弹窗并停止视频播放
|
||||||
|
const closeDialog = () => {
|
||||||
|
if (currentCamera.value) {
|
||||||
|
handleStopStream(currentCamera.value);
|
||||||
|
}
|
||||||
|
dialogVisible.value = false;
|
||||||
|
currentCamera.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleStopStream = async (camera) => {
|
||||||
|
const token = localStorage.getItem('alertToken');
|
||||||
|
try {
|
||||||
|
await apiInstance.stopCameraStream(token, camera.id);
|
||||||
|
camera.playing = false;
|
||||||
|
|
||||||
|
if (camera.player) {
|
||||||
|
camera.player.destroy();
|
||||||
|
camera.player = null;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('停止视频流失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeStream = (camera) => {
|
||||||
|
handleStopStream(camera);
|
||||||
|
selectedCameras.value = selectedCameras.value.filter(c => c.id !== camera.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchCameras();
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
selectedCameras.value.forEach(camera => {
|
||||||
|
if (camera.player) {
|
||||||
|
camera.player.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.camera-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #F1F1F1;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
/* width: 100%; */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.search-row {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: 0vh;
|
||||||
|
left: 0vw;
|
||||||
|
width: 10vw;
|
||||||
|
margin-left: 1vh;
|
||||||
|
margin: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .search-row input{
|
||||||
|
color: #fffefe;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .search-input .el-input__inner{
|
||||||
|
background-color: #001529;
|
||||||
|
/* background-color:red; */
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
::v-deep .search-input .el-input__wrapper{
|
||||||
|
background-color: #001529;
|
||||||
|
/* background-color: red; */
|
||||||
|
box-shadow: 0 0 0 0px
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .search-input .el-input__inner::placeholder{
|
||||||
|
color: #fffefe;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.status-filter {
|
||||||
|
position: relative;
|
||||||
|
top: 0vh;
|
||||||
|
left: 0vw;
|
||||||
|
width: 10vw;
|
||||||
|
margin-left: 1vh;
|
||||||
|
margin: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
display: flex;
|
||||||
|
height: 58vh;
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-part {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 12vw;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 40%;
|
||||||
|
background-color: #001529;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .camera-item .el-card__header {
|
||||||
|
border-radius: 10px 10px 0 0 ;
|
||||||
|
/* background-color: rgb(41, 12, 150); */
|
||||||
|
background: linear-gradient(to left top, rgb(18, 110, 196), rgba(3, 55, 153, 0.3));
|
||||||
|
height: 4vh;
|
||||||
|
/* min-height: 3vh;
|
||||||
|
min-width: 13vw; */
|
||||||
|
min-height: 50px;
|
||||||
|
min-width: 300px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
border: none;
|
||||||
|
/* align-items: center; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-id-name {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-camera-id {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-camera-name {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-camera-setting {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
|
||||||
|
}
|
||||||
|
.settings-button{
|
||||||
|
color: #fffefe;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .camera-item .el-card__body {
|
||||||
|
/* min-height: 10vh;
|
||||||
|
min-width: 13vw; */
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
background-color: #001529;
|
||||||
|
padding: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-content,
|
||||||
|
.row-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-camera-snapshot {
|
||||||
|
text-align: center;
|
||||||
|
background-color: #001529;
|
||||||
|
width: 10vw;
|
||||||
|
align-content: center;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-img {
|
||||||
|
/* object-fit: cover; */
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 1vh;
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
::v-deep .status-filter .el-select__wrapper {
|
||||||
|
background-color: #001529;
|
||||||
|
box-shadow: 0 0 0 0 !important;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .camera-select .el-select__wrapper {
|
||||||
|
background-color: #001529;
|
||||||
|
box-shadow: 0 0 0 0 !important;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .camera-select .el-select__selected-item {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .status-filter .el-select__selected-item {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-select {
|
||||||
|
position: relative;
|
||||||
|
top: 0vh;
|
||||||
|
left: 0vw;
|
||||||
|
width: 12vw;
|
||||||
|
margin-left: 0vh;
|
||||||
|
margin-top: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.top-text {
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 7vw;
|
||||||
|
margin: 1vh 0 0 0;
|
||||||
|
padding: 0 0 0 10vw;
|
||||||
|
/* justify-content: center; */
|
||||||
|
align-content: center;
|
||||||
|
background-color: #001529;
|
||||||
|
line-height: 0px;
|
||||||
|
color: aliceblue;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stream-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-name-title {
|
||||||
|
padding: 0.2vh;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-grid {
|
||||||
|
margin: 0vh 1vh;
|
||||||
|
padding: 0 0 2vh 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1vh 0vh;
|
||||||
|
/* height: 39vh;
|
||||||
|
width: 34vw; */
|
||||||
|
width: 68vw;
|
||||||
|
height: 55vh;
|
||||||
|
max-height: 58vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
scrollbar-width: none;
|
||||||
|
/* background-color: #ffffff; */
|
||||||
|
background-color: #F1F1F1;
|
||||||
|
/* background-color: #c71515; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-grid::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
margin: 1vh;
|
||||||
|
position: relative;
|
||||||
|
height: 25vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-snapshot,
|
||||||
|
.camera-large {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
right: 1px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background-color: #000000;
|
||||||
|
color: aliceblue;
|
||||||
|
padding: 0 2px 2px 0;
|
||||||
|
border-radius: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:hover {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button-container {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10;
|
||||||
|
opacity: 0.4;
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-card {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue