| 123456789101112131415161718 |
- <template>
- <section class="alarm-summary">
- <div class="summary-title"><div><strong>{{ alarm.deviceName || '未命名设备' }}</strong><p>{{ alarm.deviceCode || '—' }}</p></div><el-tag :type="levelTone">{{ alarm.alarmLevelName || '未知等级' }}</el-tag></div>
- <div class="summary-body">
- <div>{{ alarmDescription(alarm) }}</div>
- <p v-if="hasActualValue(alarm)">实际值：<span class="value">{{ valueText(alarm.actualValue, alarm.warningUnit) }}</span>；阈值：{{ thresholdText(alarm) }}</p>
- <p>安装位置：{{ alarm.equipmentLocation || '—' }}</p>
- <p>报警时间：{{ alarm.alarmTime || '—' }}</p>
- </div>
- </section>
- </template>
- <script setup>
- import { alarmDescription, thresholdText, valueText, hasActualValue } from './alarmReviewModel'
- defineProps({ alarm: { type: Object, required: true }, levelTone: { type: String, default: 'info' } })
- </script>
- <style scoped>
- .alarm-summary{padding:18px 20px;background:#f7f9fc;border:1px solid #e8edf3;border-radius:6px;margin-bottom:24px}.summary-title{display:flex;justify-content:space-between;gap:16px}.summary-title strong{font-size:16px;color:#303133}.summary-title p,.summary-body p{margin:6px 0 0;color:#909399;font-size:13px;overflow-wrap:anywhere}.summary-body{border-top:1px solid #e4e7ed;margin-top:14px;padding-top:14px;line-height:1.7}.summary-body .value{color:#e65c40;font-weight:600}
- </style>
|
