|
|
|
@ -121,10 +121,9 @@ |
|
|
|
<iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" style=" margin: 0 auto; display: block;" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 重构告警列表 - 分为两行 --> |
|
|
|
<div v-if="hasValidData" class="env-alarm-container"> |
|
|
|
<!-- 第一行:温湿度 --> |
|
|
|
<ul class="env-alarm-list env-alarm-list-first"> |
|
|
|
<div class="env-alarm-container"> |
|
|
|
<!-- 温湿度 --> |
|
|
|
<ul v-if="hasValidData" class="env-alarm-list env-alarm-list-first"> |
|
|
|
<li> |
|
|
|
<svg-icon icon-class="temperature" class-name="msg-list-svg" /> |
|
|
|
<div> |
|
|
|
@ -332,7 +331,7 @@ |
|
|
|
<svg-icon icon-class="alerm" class-name="warehouse-svg" />当日告警统计 |
|
|
|
</h3> |
|
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);"> |
|
|
|
<catePie :cate-data="alarmChartData" /> |
|
|
|
<catePie :cate-data="alarmChartData" :refreshtime="refreshtime" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -498,9 +497,9 @@ export default { |
|
|
|
}, 1000) |
|
|
|
this.getDevice() |
|
|
|
this.getTodayHikAlarmLog() |
|
|
|
this.alarmRefreshTimer = setInterval(() => { |
|
|
|
this.getTodayHikAlarmLog() |
|
|
|
}, 300000) |
|
|
|
// this.alarmRefreshTimer = setInterval(() => { |
|
|
|
// this.getTodayHikAlarmLog() |
|
|
|
// }, 100000) |
|
|
|
// 初始化逻辑 |
|
|
|
window.getIframeLoading = this.getIframeLoading |
|
|
|
// this.allDisplayConfigData = allDeviceData |
|
|
|
@ -530,7 +529,9 @@ export default { |
|
|
|
this.echartsTimer = setInterval(() => { |
|
|
|
this.lendData = [] |
|
|
|
this.typeData = [] |
|
|
|
this.alarmChartData = [] |
|
|
|
this.getBorrowerNumSta() |
|
|
|
this.getTodayHikAlarmLog() |
|
|
|
}, this.refreshtime) |
|
|
|
this.getVideoUrl() |
|
|
|
}, |
|
|
|
@ -543,14 +544,13 @@ export default { |
|
|
|
this.webRtcServer.disconnect() |
|
|
|
this.webRtcServer = null |
|
|
|
} |
|
|
|
if (this.alarmRefreshTimer) clearInterval(this.alarmRefreshTimer) |
|
|
|
// if (this.alarmRefreshTimer) clearInterval(this.alarmRefreshTimer) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 重构告警数据获取方法 |
|
|
|
getTodayHikAlarmLog() { |
|
|
|
getTodayHikAlarmLog().then(data => { |
|
|
|
console.log('今日海康告警日志', data) |
|
|
|
this.alarmStatisticsRaw = data || [] |
|
|
|
this.alarmStatisticsRaw = this.transformAlarmData(data || {}) |
|
|
|
this.formatAlarmChartData() |
|
|
|
}).catch(error => { |
|
|
|
console.error('获取告警统计数据失败:', error) |
|
|
|
@ -558,33 +558,49 @@ export default { |
|
|
|
this.alarmChartData = [] |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 格式化告警数据为饼图数据源 |
|
|
|
|
|
|
|
transformAlarmData(alarmObj) { |
|
|
|
const fieldMap = [ |
|
|
|
{ key: 'accessAlarm', name: '门禁告警' }, |
|
|
|
{ key: 'firefightingAlarm', name: '消防告警' }, |
|
|
|
{ key: 'equipmentAlarm', name: '设备告警' }, |
|
|
|
{ key: 'environmentAlarm', name: '环境告警' } |
|
|
|
] |
|
|
|
|
|
|
|
return fieldMap.map(item => ({ |
|
|
|
alarmValue: item.name, |
|
|
|
num: alarmObj[item.key] || 0 |
|
|
|
})) |
|
|
|
}, |
|
|
|
|
|
|
|
formatAlarmChartData() { |
|
|
|
if (!this.alarmStatisticsRaw.length) { |
|
|
|
const allZero = this.alarmStatisticsRaw.every(item => item.num === 0) |
|
|
|
if (allZero) { |
|
|
|
this.alarmChartData = [{ name: '无告警', value: 1, itemStyle: { color: '#666666' }}] |
|
|
|
return |
|
|
|
} |
|
|
|
// 固定颜色列表(按优先级排序) |
|
|
|
const colorList = ['#F65164', '#339CFF', '#FFB800', '#1CADAB', '#9B6BCC', '#FF7D00'] |
|
|
|
|
|
|
|
const alarmColorMap = { |
|
|
|
'设备断线': '#F65164', |
|
|
|
'红外线报警': '#339CFF', |
|
|
|
'消防报警': '#FFB800', |
|
|
|
'漏水报警': '#1CADAB', |
|
|
|
'PM2.5超标': '#9B6BCC', |
|
|
|
'甲醛超标': '#FF7D00' |
|
|
|
'门禁告警': '#F65164', |
|
|
|
'消防告警': '#FFB800', |
|
|
|
'设备告警': '#339CFF', |
|
|
|
'环境告警': '#1CADAB' |
|
|
|
} |
|
|
|
// 备用颜色列表(防止新增告警类型没有配置颜色) |
|
|
|
const colorList = ['#F65164', '#339CFF', '#FFB800', '#1CADAB', '#9B6BCC', '#FF7D00'] |
|
|
|
|
|
|
|
this.alarmChartData = this.alarmStatisticsRaw.map((item, index) => { |
|
|
|
const alarmName = item.alarmValue || '未知告警' |
|
|
|
// 优先使用配置的颜色,没有则使用备用颜色 |
|
|
|
const color = alarmColorMap[alarmName] || colorList[index % colorList.length] || '#666666' |
|
|
|
|
|
|
|
return { |
|
|
|
name: alarmName, |
|
|
|
value: item.num || 0, |
|
|
|
value: item.num || 0, // 保留0值 |
|
|
|
itemStyle: { |
|
|
|
color: color |
|
|
|
} |
|
|
|
}, |
|
|
|
// 可选:为0值添加特殊样式(比如半透明) |
|
|
|
...(item.num === 0 ? { itemStyle: { color: color, opacity: 0.5 }} : {}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -1533,7 +1549,7 @@ export default { |
|
|
|
.card-panel-text { |
|
|
|
line-height: 30px; |
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
font-size: 24px; |
|
|
|
font-size: 22px; |
|
|
|
margin-bottom: 11px; |
|
|
|
& span { |
|
|
|
-webkit-background-clip: text; |
|
|
|
|