lynn
8 months ago
parent
0a2fac6cdb
commit
35d3c17be3
@ -1,24 +1,257 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div style="padding: 0px 20px">
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
:src="require('/src/assets/monitor.png')"
|
||||
fit="fill"></el-image>
|
||||
<!-- <div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="环境监控" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div> -->
|
||||
<div class="monitor-container">
|
||||
<!-- Camera Section -->
|
||||
<el-row :gutter="20" class="camera-section">
|
||||
<el-col :span="8" v-for="camera in cameras" :key="camera.id">
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ camera.name }}</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" :class="camera.status === '离线' ? 'offline' : ''">{{ camera.status }}</el-button>
|
||||
</div>
|
||||
<div class="camera-body">
|
||||
<el-image
|
||||
style="width: 100%; height: 180px; background-color: #000; display: flex; align-items: center; justify-content: center;"
|
||||
:src="camera.image"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
Reference in new issue