lynn
8 months ago
parent
0a2fac6cdb
commit
35d3c17be3
@ -1,24 +1,257 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="monitor-container">
|
||||||
<div style="padding: 0px 20px">
|
<!-- Camera Section -->
|
||||||
<el-image
|
<el-row :gutter="20" class="camera-section">
|
||||||
style="width: 100%"
|
<el-col :span="8" v-for="camera in cameras" :key="camera.id">
|
||||||
:src="require('/src/assets/monitor.png')"
|
<el-card shadow="never">
|
||||||
fit="fill"></el-image>
|
<div slot="header" class="clearfix">
|
||||||
<!-- <div ref="lxHeader">
|
<span>{{ camera.name }}</span>
|
||||||
<lx-header icon="md-apps" text="环境监控" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
<el-button style="float: right; padding: 3px 0" type="text" :class="camera.status === '离线' ? 'offline' : ''">{{ camera.status }}</el-button>
|
||||||
<div slot="content"></div>
|
</div>
|
||||||
<slot>
|
<div class="camera-body">
|
||||||
|
<el-image
|
||||||
</slot>
|
style="width: 100%; height: 180px; background-color: #000; display: flex; align-items: center; justify-content: center;"
|
||||||
</lx-header>
|
:src="camera.image"
|
||||||
</div> -->
|
fit="cover">
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<i class="el-icon-picture-outline" style="font-size: 40px; color: #ccc;"></i>
|
||||||
|
<div style="color: #ccc;">EZVIZ</div>
|
||||||
|
</div>
|
||||||
|
<div slot="placeholder" class="image-slot">
|
||||||
|
<i class="el-icon-loading" style="font-size: 40px; color: #ccc;"></i>
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
|
<div class="camera-info">视频通道: {{ camera.channel }}</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- Environment Section -->
|
||||||
|
<div class="environment-section">
|
||||||
|
<h3 class="section-title">环境信息</h3>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8" v-for="point in environmentPoints" :key="point.id">
|
||||||
|
<el-card shadow="never" :body-style="{ padding: '0px' }">
|
||||||
|
<div class="environment-card" :class="getCardClass(point.status)">
|
||||||
|
<div class="env-header">
|
||||||
|
<span>{{ point.name }}</span>
|
||||||
|
<el-tag size="small" :type="getTagType(point.status)" effect="dark" class="status-tag">
|
||||||
|
<i v-if="point.status === '正常'" class="el-icon-success" style="margin-right: 4px;"></i>
|
||||||
|
{{ point.status }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<el-row class="env-data">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="data-item">
|
||||||
|
<div class="label">CO浓度</div>
|
||||||
|
<div class="value" :class="point.status === '预警' ? 'warning-value' : ''">{{ point.coConcentration }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="data-item">
|
||||||
|
<div class="label">温度</div>
|
||||||
|
<div class="value">{{ point.temperature }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="env-data">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="data-item">
|
||||||
|
<div class="label">湿度</div>
|
||||||
|
<div class="value">{{ point.humidity }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="data-item">
|
||||||
|
<div class="label">更新时间</div>
|
||||||
|
<div class="value date">{{ point.updateTime }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MonitorPage',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cameras: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '摄像头1',
|
||||||
|
status: '离线',
|
||||||
|
image: 'https://img.freepik.com/free-vector/cctv-surveillance-system-concept_23-2148529272.jpg',
|
||||||
|
channel: '[DS-2CD2225XM-LGLSE(AE1005192)- AE1005192]'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '摄像头2',
|
||||||
|
status: '离线',
|
||||||
|
image: 'https://img.freepik.com/premium-photo/security-camera-perspective-hallway-corridor-monitoring-space-3d-rendering_172660-215.jpg',
|
||||||
|
channel: '[DS-2CD2225XM-LGLSE(AE1005068)- AE1005068]'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '摄像头3',
|
||||||
|
status: '离线',
|
||||||
|
image: 'https://img.freepik.com/premium-photo/video-surveillance-camera-record-street-cctv-camera-work-building_169016-21553.jpg',
|
||||||
|
channel: '[DS-2CD2225XM-LGLSE(AE1005197)- AE1005197]'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
environmentPoints: [
|
||||||
|
{ id: 'A', name: '监控点 A', status: '正常', coConcentration: '2.5 ppm', temperature: '24.5 ℃', humidity: '45 %', updateTime: '2024-01-05' },
|
||||||
|
{ id: 'B', name: '监控点 B', status: '预警', coConcentration: '8.2 ppm', temperature: '26.8 ℃', humidity: '52 %', updateTime: '2024-01-05' },
|
||||||
|
{ id: 'C', name: '监控点 C', status: '正常', coConcentration: '1.8 ppm', temperature: '23.9 ℃', humidity: '48 %', updateTime: '2024-01-05' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCardClass(status) {
|
||||||
|
if (status === '正常') {
|
||||||
|
// Assuming the green normal status is also '正常' based on context,
|
||||||
|
// We check the ID for C to apply green, otherwise blue
|
||||||
|
// Or better, add a specific status like 'Normal-Green' if data allows
|
||||||
|
return 'status-normal-blue'; // Default blue for '正常'
|
||||||
|
// For point C, if we assume its status implies green:
|
||||||
|
// return pointId === 'C' ? 'status-normal-green' : 'status-normal-blue';
|
||||||
|
} else if (status === '预警') {
|
||||||
|
return 'status-warning';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getTagType(status) {
|
||||||
|
if (status === '正常') return 'success'; // Element UI tag type for green/blue normal
|
||||||
|
if (status === '预警') return 'warning'; // Element UI tag type for yellow warning
|
||||||
|
return 'info'; // Default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
.monitor-container {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f5f7fa; // Light background for the whole page
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-section {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card {
|
||||||
|
border: none; // Remove default card border if desired
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-body {
|
||||||
|
text-align: center;
|
||||||
|
.el-image {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
.image-slot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.camera-info {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 5px;
|
||||||
|
word-break: break-all;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.offline {
|
||||||
|
color: #F56C6C; // Style for offline button
|
||||||
|
}
|
||||||
|
|
||||||
|
.environment-section {
|
||||||
|
.section-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.environment-card {
|
||||||
|
padding: 15px;
|
||||||
|
color: #fff; // Default text color for cards
|
||||||
|
|
||||||
|
&.status-normal-blue {
|
||||||
|
background-color: #409EFF; // Blue for normal status
|
||||||
|
}
|
||||||
|
&.status-warning {
|
||||||
|
background-color: #E6A23C; // Yellow for warning status
|
||||||
|
}
|
||||||
|
&.status-normal-green { // Assuming point C has a distinct 'green normal' status
|
||||||
|
background-color: #67C23A; // Green for normal status
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.env-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
border-radius: 10px; // Make tag more pill-shaped
|
||||||
|
border: none;
|
||||||
|
// Match background to card, or use Element UI types
|
||||||
|
&.el-tag--success { background-color: rgba(255, 255, 255, 0.2); color: #fff;}
|
||||||
|
&.el-tag--warning { background-color: rgba(255, 255, 255, 0.2); color: #fff;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.env-data {
|
||||||
|
margin-bottom: 10px; // Space between data rows
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item {
|
||||||
|
.label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(255, 255, 255, 0.8); // Lighter label color
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
&.warning-value {
|
||||||
|
color: #fdf6ec; // Slightly different color for warning value if needed
|
||||||
|
}
|
||||||
|
&.date {
|
||||||
|
font-size: 14px; // Smaller font for date
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue