显示信息修改
This commit is contained in:
parent
3389be85be
commit
000fb7689e
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user