dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页，报警图表，字段顺序调整

Browse Source
This commit is contained in:
fengerli
2025-09-20 15:43:53 +08:00
parent eb4bb8c208
commit b1f5cfdd7a
3 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/equipmentAlarmRecord/types.ts
View File

@ -16,6 +16,7 @@ export interface AlarmVO {
deviceMac: string; deviceMac: string;
devicePic:string; devicePic:string;
finishTime: string; finishTime: string;
timeDiff:string
} }

16
src/views/equipmentAlarmRecord/index.vue
View File

@ -89,16 +89,16 @@
<div class="label">报警事项</div> <div class="label">报警事项</div>
<div class="alearm"> <div class="alearm">
<template v-if="item.deviceAction === 0">强制报警 <template v-if="item.deviceAction === 0">强制报警
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span> <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template> </template>
<template v-else-if="item.deviceAction === 1">撞击闯入 <template v-else-if="item.deviceAction === 1">撞击闯入
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span> <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template> </template>
<template v-else-if="item.deviceAction === 2">自动报警 <template v-else-if="item.deviceAction === 2">自动报警
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span> <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template> </template>
<template v-else-if="item.deviceAction === 3">电子围栏告警 <template v-else-if="item.deviceAction === 3">电子围栏告警
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span> <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template> </template>
</div> </div>
<div class="label">报警地点</div> <div class="label">报警地点</div>
@ -223,10 +223,10 @@ const getList = async () => {
}; };
const res = await listAlarm(queryParams.value); const res = await listAlarm(queryParams.value);
if (res.rows) { if (res.rows) {
// 先清除已有定时器 // 先清除已有定时器
clearAllTimers(); clearAllTimers();
//alarmList.value = res.rows; //alarmList.value = res.rows;
// 为每个项添加timeDiff属性并初始化 // 为每个项添加timeDiff属性并初始化
alarmList.value = res.rows.map(item => ({ alarmList.value = res.rows.map(item => ({
...item, ...item,
timeDiff: '' // 用于存储计算出的时间差 timeDiff: '' // 用于存储计算出的时间差
@ -307,6 +307,10 @@ onMounted(() => {
getList(); getList();
getDeviceType() getDeviceType()
}); });
// 组件卸载时清除所有定时器
onUnmounted(() => {
clearAllTimers();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep .el-collapse { :deep .el-collapse {

17
src/views/index.vue
View File

@ -326,7 +326,7 @@ const initAlarmRingChart = async () => {
}, },
textStyle: { textStyle: {
color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义） color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义）
fontSize: 12, // 文字字号 fontSize: 14, // 文字字号
lineHeight: 20 // 文字行高 lineHeight: 20 // 文字行高
} }
}, },
@ -338,15 +338,16 @@ const initAlarmRingChart = async () => {
show: false // 隐藏标签连接线 show: false // 隐藏标签连接线
}, },
data: [ data: [
{ {
value: processingAlarmToday, value:processingAlarmToday ,
name: '报警',
itemStyle: { color: '#F65757' } // 红色：未处理
},
{
value: alarmsTotalToday,
name: '已处理', name: '已处理',
itemStyle: { color: '#07BE75' } // 绿色：已处理 itemStyle: { color: '#07BE75' }
},
{
value: alarmsTotalToday,
name: '报警',
itemStyle: { color: '#F65757' }
}, },
] ]