显示信息修改

This commit is contained in:
jingna 2026-05-19 09:19:51 +08:00
parent 3389be85be
commit 000fb7689e
3 changed files with 57 additions and 54 deletions

View File

@ -102,12 +102,12 @@ onMounted(() => {
<div class="top-title">报警信息</div> <div class="top-title">报警信息</div>
<div class="container-bottom-box"> <div class="container-bottom-box">
<div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1"> <div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1">
<div style="width: 8%; text-align: center;">{{ index + 1 }}</div> <div style="width: 8%;text-align: center;">{{ index + 1 }}</div>
<div style="width: 23%; text-align: center;">{{ item.name }}</div> <div style="width: 14%;text-align: center;">{{ item.name }}</div>
<div style="width: 15%; text-align: center;">{{ item.typeName }}</div> <div style="width: 20%;text-align: center;">{{ item.typeName }}</div>
<div style="width: 10%; text-align: center;">{{ item.level }}</div> <div style="width: 8%;text-align: center;">{{ item.level }}</div>
<div style="width: 25%; text-align: center;">{{ item.content }}</div> <div style="width: 30%;text-align: center;">{{ item.content }}</div>
<div style="width: 20%; text-align: center;">{{ item.time }}</div> <div style="width: 20%;text-align: center;">{{ item.time }}</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -220,10 +220,10 @@ onMounted(() => {
<div class="container-bottom-box"> <div class="container-bottom-box">
<div v-for="(item, index) in tableData" :key="item.name" class="container-bottom-box-line1"> <div v-for="(item, index) in tableData" :key="item.name" class="container-bottom-box-line1">
<div style="width: 8%;text-align: center;">{{ index + 1 }}</div> <div style="width: 8%;text-align: center;">{{ index + 1 }}</div>
<div style="width: 22%;text-align: center;">{{ item.name }}</div> <div style="width: 14%;text-align: center;">{{ item.name }}</div>
<div style="width: 20%;text-align: center;">{{ item.typeName }}</div> <div style="width: 20%;text-align: center;">{{ item.typeName }}</div>
<div style="width: 10%;text-align: center;">{{ item.level }}</div> <div style="width: 8%;text-align: center;">{{ item.level }}</div>
<div style="width: 20%;text-align: center;">{{ item.content }}</div> <div style="width: 30%;text-align: center;">{{ item.content }}</div>
<div style="width: 20%;text-align: center;">{{ item.time }}</div> <div style="width: 20%;text-align: center;">{{ item.time }}</div>
</div> </div>
</div> </div>

View File

@ -5,54 +5,54 @@ import { usePlatformStore } from '../../stores/platform'
const { state, bootstrap } = usePlatformStore() const { state, bootstrap } = usePlatformStore()
const inputStates = computed(() => { const inputStates = computed(() => {
if (!state.realtime?.switch) { if (!state.realtime?.switch) {
return [true, false, true, false, true, false, true, false, true, false, true, false] return [true, false, true, false, true, false, true, false, true, false, true, false]
} }
return Array.from({ length: 12 }, (_, i) => { return Array.from({ length: 12 }, (_, i) => {
const key = `di${i + 1}` const key = `di${i + 1}`
return state.realtime!.switch[key] === 1 return state.realtime!.switch[key] === 1
}) })
}) })
const outputStates = computed(() => { const outputStates = computed(() => {
if (!state.realtime?.switch) { if (!state.realtime?.switch) {
return [false, true, false, true, false, true, false, true, false, true, false, true] return [false, true, false, true, false, true, false, true, false, true, false, true]
} }
return Array.from({ length: 12 }, (_, i) => { return Array.from({ length: 12 }, (_, i) => {
const key = `do${i + 1}` const key = `do${i + 1}`
return state.realtime!.switch[key] === 1 return state.realtime!.switch[key] === 1
}) })
}) })
function formatTime(dateStr: string): string { function formatTime(dateStr: string): string {
const date = new Date(dateStr) const date = new Date(dateStr)
const year = date.getFullYear() const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0') const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0') const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0') const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
} }
const tableData = computed(() => { const tableData = computed(() => {
const list = state.alarms[state.alarms.length - 1] || {} const list = state.alarms[state.alarms.length - 1] || {}
const arr = [] const arr = []
let reslist:any = {} let reslist: any = {}
if(list.alarm_type == 'line_alarm'){ if (list.alarm_type == 'line_alarm') {
reslist.name = `线路${list?.no || 1}` reslist.name = `线路${list?.no || 1}`
}else if(list.alarm_type == 'ai_alarm'){ } else if (list.alarm_type == 'ai_alarm') {
reslist.name = `通道${list?.no || 1}` reslist.name = `通道${list?.no || 1}`
} else if(list.alarm_type == 'operate_alarm'){ } else if (list.alarm_type == 'operate_alarm') {
reslist.name = '' reslist.name = ''
} }
reslist.typeName = list.type reslist.typeName = list.type
reslist.content = list.content reslist.content = list.content
reslist.time = list.time ? formatTime(list.time) : '' reslist.time = list.time ? formatTime(list.time) : ''
reslist.level = list.level || '' reslist.level = list.level || ''
return [reslist] return [reslist]
}) })
onMounted(() => { onMounted(() => {
void bootstrap() void bootstrap()
}) })
</script> </script>
@ -70,7 +70,8 @@ onMounted(() => {
<div v-for="(state, index) in inputStates" :key="`input-${index}`" class="state-item"> <div v-for="(state, index) in inputStates" :key="`input-${index}`" class="state-item">
<img v-if="state" src="@/assets/images/menuicon/on.png" style="width: 34px; height: 36px;" <img v-if="state" src="@/assets/images/menuicon/on.png" style="width: 34px; height: 36px;"
alt=""> alt="">
<img v-else src="@/assets/images/menuicon/off.png" alt="" style="width: 34px; height: 36px;"> <img v-else src="@/assets/images/menuicon/off.png" alt=""
style="width: 34px; height: 36px;">
<div class="label">开入{{ index + 1 }}</div> <div class="label">开入{{ index + 1 }}</div>
</div> </div>
</div> </div>
@ -97,12 +98,12 @@ onMounted(() => {
<div class="top-title">报警信息</div> <div class="top-title">报警信息</div>
<div class="container-bottom-box"> <div class="container-bottom-box">
<div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1"> <div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1">
<div style="width: 8%; text-align: center;">{{ index + 1 }}</div> <div style="width: 8%;text-align: center;">{{ index + 1 }}</div>
<div style="width: 23%; text-align: center;">{{ item.name }}</div> <div style="width: 14%;text-align: center;">{{ item.name }}</div>
<div style="width: 15%; text-align: center;">{{ item.typeName }}</div> <div style="width: 20%;text-align: center;">{{ item.typeName }}</div>
<div style="width: 10%; text-align: center;">{{ item.level }}</div> <div style="width: 8%;text-align: center;">{{ item.level }}</div>
<div style="width: 25%; text-align: center;">{{ item.content }}</div> <div style="width: 30%;text-align: center;">{{ item.content }}</div>
<div style="width: 20%; text-align: center;">{{ item.time }}</div> <div style="width: 20%;text-align: center;">{{ item.time }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -180,6 +181,7 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 65px; height: 65px;
.label { .label {
font-size: 14px; font-size: 14px;
color: #363636; color: #363636;
@ -208,6 +210,7 @@ onMounted(() => {
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1); box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
border-radius: 4px; border-radius: 4px;
overflow: auto; overflow: auto;
.container-bottom-box-line1 { .container-bottom-box-line1 {
display: flex; display: flex;
align-items: center; align-items: center;