forked from gzt/A8000
LiLongLong
2 months ago
7 changed files with 112 additions and 141 deletions
-
3components.d.ts
-
129src/components/AlarmLight.vue
-
7src/components/dialogs/AlarmDetailByType.vue
-
3src/components/dialogs/AlarmModal.vue
-
67src/components/dialogs/AlarmRecordModal.vue
-
1src/pages/Index/Index.vue
-
43src/pages/Index/Regular/Running.vue
@ -1,129 +0,0 @@ |
|||||
<template> |
|
||||
<div class="alarm-light-container" @click="onShowAlarmDetail"> |
|
||||
<div |
|
||||
class="alarm-light" |
|
||||
:style="{ '--light-color': getColor }" |
|
||||
:class="{ 'pulse-animation': isActive }" |
|
||||
> |
|
||||
<span class="light-text">{{ text }}</span> |
|
||||
</div> |
|
||||
<el-dialog v-model="detailVisible" width="700" style="z-index: 999"> |
|
||||
<AlarmDetailByType :currEventReport="alarmItem"/> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { defineProps, computed, ref } from 'vue'; |
|
||||
import AlarmDetailByType from './dialogs/AlarmDetailByType.vue' |
|
||||
|
|
||||
const detailVisible = ref(false) |
|
||||
const props = defineProps({ |
|
||||
color: { |
|
||||
type: String, |
|
||||
default: 'red', |
|
||||
validator: (val: string) => |
|
||||
['red', 'green', 'yellow', 'blue', 'custom'].includes(val) || |
|
||||
val.startsWith('#') |
|
||||
}, |
|
||||
customColor: { |
|
||||
type: String, |
|
||||
default: '#ff0000' |
|
||||
}, |
|
||||
text: { |
|
||||
type: String, |
|
||||
default: 'ALERT' |
|
||||
}, |
|
||||
// 动画周期（秒） |
|
||||
cycleDuration: { |
|
||||
type: Number, |
|
||||
default: 2 |
|
||||
}, |
|
||||
// 是否激活动画 |
|
||||
active: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
alarmItem: { |
|
||||
type: Object, |
|
||||
default: () => {} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const getColor = computed(() => { |
|
||||
const colorMap: Record<string, string> = { |
|
||||
'red': '#ff0000', |
|
||||
'green': '#00cc00', |
|
||||
'yellow': '#ffff00', |
|
||||
'blue': '#0066ff', |
|
||||
'custom': props.customColor |
|
||||
}; |
|
||||
return colorMap[props.color] || props.color; |
|
||||
}); |
|
||||
|
|
||||
const isActive = computed(() => props.active); |
|
||||
|
|
||||
const onShowAlarmDetail = () => { |
|
||||
detailVisible.value = true; |
|
||||
console.log('alarm ==11= ', props.alarmItem) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.alarm-light-container { |
|
||||
display: inline-block; |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.alarm-light { |
|
||||
width: 7rem; |
|
||||
height: 7rem; |
|
||||
border-radius: 50%; |
|
||||
border: 2px solid rgba(255, 255, 255, 0.5); |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
z-index: 1; |
|
||||
|
|
||||
/* 基础样式 */ |
|
||||
background-color: var(--light-color); |
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); |
|
||||
} |
|
||||
|
|
||||
.light-text { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
font-size: 14px; |
|
||||
color: white; |
|
||||
font-weight: bold; |
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); |
|
||||
z-index: 2; |
|
||||
} |
|
||||
|
|
||||
/* 从弱到强的脉动动画 */ |
|
||||
.pulse-animation { |
|
||||
animation: pulse 2s infinite ease-in-out; |
|
||||
animation-duration: calc(var(--cycle-duration, 2) * 1s); |
|
||||
} |
|
||||
|
|
||||
@keyframes pulse { |
|
||||
0%, 100% { |
|
||||
box-shadow: |
|
||||
0 0 5px var(--light-color), |
|
||||
0 0 8px var(--light-color), |
|
||||
0 0 10px var(--light-color); |
|
||||
opacity: 0.6; |
|
||||
transform: scale(0.95); |
|
||||
} |
|
||||
50% { |
|
||||
box-shadow: |
|
||||
0 0 10px var(--light-color), |
|
||||
0 0 15px var(--light-color), |
|
||||
0 0 18px var(--light-color), |
|
||||
0 0 20px var(--light-color); |
|
||||
opacity: 1; |
|
||||
transform: scale(1); |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,67 @@ |
|||||
|
<template> |
||||
|
<div > |
||||
|
<!-- 左边报警列表 --> |
||||
|
<div v-if="alarmList && alarmList.length"> |
||||
|
<el-table |
||||
|
ref="tableRef" |
||||
|
:data="alarmList" |
||||
|
show-overflow-tooltip |
||||
|
header-cell-class-name="table-header" |
||||
|
row-class-name="table-row"> |
||||
|
<el-table-column type="index" label="序号" width="50"></el-table-column> |
||||
|
<el-table-column prop="keyName" label="名称" width="170"> |
||||
|
<template #default="scope"> |
||||
|
{{ scope.row.flagType === 'NormalFlag' ? scope.row.notTriggeredDisName : scope.row.triggeredStateName}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="flagType" label="类型" width="170"> |
||||
|
<template #default="scope"> |
||||
|
{{ scope.row.flagType === 'NormalFlag' ? '正常' : scope.row.flagType === 'WarningFlag' ? '警告' : '异常'}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { useDeviceStore } from '@/store' |
||||
|
import type { WarningState } from '@/websocket/socket' |
||||
|
import { ref, watchEffect } from 'vue' |
||||
|
const deviceStore = useDeviceStore() |
||||
|
const alarmList = ref<WarningState[]>([]) |
||||
|
watchEffect(() => { |
||||
|
alarmList.value = deviceStore.alarmList |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.alarm-container { |
||||
|
min-height: 20vh; |
||||
|
text-align: start; |
||||
|
} |
||||
|
.alarm-item { |
||||
|
height: 17vh; |
||||
|
cursor: pointer; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.alarm-item-title{ |
||||
|
font-weight: bold |
||||
|
} |
||||
|
.alarm-name { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.alarm-type { |
||||
|
margin: 0 10px; |
||||
|
padding: 2px 6px; |
||||
|
border-radius: 4px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.clear-alarm-btn{ |
||||
|
margin-top: 10px; |
||||
|
height: 4rem; |
||||
|
font-size: 20px; |
||||
|
width:7rem; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue