|
|
|
|
@ -3,7 +3,7 @@ |
|
|
|
|
<div id="app" class="dashboard" style="overflow-x: hidden;"> |
|
|
|
|
|
|
|
|
|
<div class="header"> |
|
|
|
|
<h1>设备监控中心大屏 - 智能管理版</h1> |
|
|
|
|
<h1>唐山烟草网络设备智能监管平台</h1> |
|
|
|
|
<div class="time-display">{{ currentTime }}</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -37,7 +37,7 @@ |
|
|
|
|
<div class="floor-device-grid"> |
|
|
|
|
<div v-for="floor in floorDeviceDistribution" |
|
|
|
|
:key="floor.level" |
|
|
|
|
class="floor-device-card"> |
|
|
|
|
class="floor-device-card" @click="jumpToDeviceFiles(floor.floor)"> |
|
|
|
|
<div class="floor-level">{{ floor.floor }}</div> |
|
|
|
|
<div class="floor-count">{{ floor.count }}</div> |
|
|
|
|
</div> |
|
|
|
|
@ -52,11 +52,11 @@ |
|
|
|
|
<div class="panel"> |
|
|
|
|
<div class="panel-title">设备信息统计</div> |
|
|
|
|
<div class="device-stats-container"> |
|
|
|
|
<div class="device-stat-item"> |
|
|
|
|
<div class="device-stat-item clickable-item" @click="goToDeviceFiles"> |
|
|
|
|
<div class="device-stat-value">{{ totalDevices }}</div> |
|
|
|
|
<div class="device-stat-label">设备总数</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="device-stat-item"> |
|
|
|
|
<div class="device-stat-item clickable-item" @click="goToDeviceStateMonitor"> |
|
|
|
|
<div class="device-stat-value">{{ onlineDevices }}</div> |
|
|
|
|
<div class="device-stat-label">在线设备数</div> |
|
|
|
|
</div> |
|
|
|
|
@ -377,6 +377,19 @@ export default { |
|
|
|
|
this.refreshDeviceStatus(); |
|
|
|
|
}, 60000); |
|
|
|
|
}, |
|
|
|
|
activated() { |
|
|
|
|
// 每次进入首页时刷新数据 |
|
|
|
|
this.refreshDeviceStatus(); |
|
|
|
|
this.loadDeviceTypeData(); |
|
|
|
|
this.loadAlertStatistics(); |
|
|
|
|
this.loadAlertTimes(); |
|
|
|
|
this.loadFloorDeviceDistribution(); |
|
|
|
|
this.updateTimeDisplay(); |
|
|
|
|
|
|
|
|
|
// 更新最后刷新时间 |
|
|
|
|
this.updateTime = this.currentTime; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
beforeDestroy() { |
|
|
|
|
// 移除事件监听 |
|
|
|
|
window.removeEventListener('resize', this.handleResize); |
|
|
|
|
@ -385,6 +398,14 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 跳转到设备档案页面 |
|
|
|
|
goToDeviceFiles() { |
|
|
|
|
this.$router.push('/device/files'); |
|
|
|
|
}, |
|
|
|
|
// 跳转到设备状态监控页面 |
|
|
|
|
goToDeviceStateMonitor() { |
|
|
|
|
this.$router.push('/inMonitoring/devicesState'); |
|
|
|
|
}, |
|
|
|
|
// 处理日期范围变化，将结束时间设置为23:59:59 |
|
|
|
|
handleDateRangeChange(range) { |
|
|
|
|
if (range && range.length === 2) { |
|
|
|
|
@ -868,6 +889,37 @@ export default { |
|
|
|
|
} else { |
|
|
|
|
this.warningLevelFilter = level; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 年度预警跳转到预警信息页面 |
|
|
|
|
if (level === 'annual') { |
|
|
|
|
this.$router.push('/inMonitoring/inMonitoring/message'); |
|
|
|
|
} |
|
|
|
|
// 1-3级预警跳转到预警信息页面并传递级别参数 |
|
|
|
|
else if (level === 'level1') { |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: '/inMonitoring/inMonitoring/message', |
|
|
|
|
query: { level: '1' } |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
else if (level === 'level2') { |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: '/inMonitoring/inMonitoring/message', |
|
|
|
|
query: { level: '2' } |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
else if (level === 'level3') { |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: '/inMonitoring/inMonitoring/message', |
|
|
|
|
query: { level: '3' } |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 跳转到设备档案页面并传递楼层参数 |
|
|
|
|
jumpToDeviceFiles(floor) { |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: '/device/files', |
|
|
|
|
query: { floor: floor } |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
refreshDeviceStatus() { |
|
|
|
|
@ -992,6 +1044,16 @@ export default { |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 可点击元素的样式 */ |
|
|
|
|
.clickable-item { |
|
|
|
|
cursor: pointer; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.clickable-item:hover { |
|
|
|
|
background-color: #f0f9ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dashboard { |
|
|
|
|
width: 100%; |
|
|
|
|
min-height: 100%; |
|
|
|
|
|
Wangxin
8 months ago