|
@ -15,12 +15,13 @@ |
|
|
detailed = false; |
|
|
detailed = false; |
|
|
} |
|
|
} |
|
|
"> |
|
|
"> |
|
|
<template v-for="(item, index) in dataSource" :key="item.deviceInfoCode"> |
|
|
<template v-for="(item, index) in dataSource.slice(0, 8)" :key="item.deviceInfoCode"> |
|
|
<div |
|
|
<div |
|
|
v-if="item.type !== 1" |
|
|
|
|
|
class="door-box-item" |
|
|
class="door-box-item" |
|
|
:style="{ |
|
|
:style="{ |
|
|
'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index % 3], |
|
|
'background-color': { '0': 'rgba(191, 205, 226, 1)', '1': '#0dffa4', '2': '#ffbc46' }[ |
|
|
|
|
|
item.record.EGstRu |
|
|
|
|
|
], |
|
|
}"> |
|
|
}"> |
|
|
{{ item.deviceInfoName }} |
|
|
{{ item.deviceInfoName }} |
|
|
</div> |
|
|
</div> |
|
@ -37,12 +38,13 @@ |
|
|
detailed = false; |
|
|
detailed = false; |
|
|
} |
|
|
} |
|
|
"> |
|
|
"> |
|
|
<template v-for="(item, index) in dataSource" :key="item.deviceInfoCode"> |
|
|
<template v-for="(item, index) in dataSource.slice(8, 16)" :key="item.deviceInfoCode"> |
|
|
<div |
|
|
<div |
|
|
v-if="item.type === 1" |
|
|
|
|
|
class="door-box-item" |
|
|
class="door-box-item" |
|
|
:style="{ |
|
|
:style="{ |
|
|
'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index % 3], |
|
|
'background-color': { '0': 'rgba(191, 205, 226, 1)', '1': '#0dffa4', '2': '#ffbc46' }[ |
|
|
|
|
|
item.record.EGstRu |
|
|
|
|
|
], |
|
|
}"> |
|
|
}"> |
|
|
{{ item.deviceInfoName }} |
|
|
{{ item.deviceInfoName }} |
|
|
</div> |
|
|
</div> |
|
@ -75,10 +77,16 @@ |
|
|
:style="{ |
|
|
:style="{ |
|
|
border: |
|
|
border: |
|
|
'1px solid ' + |
|
|
'1px solid ' + |
|
|
{ '0': '#bfcde2', '1': '#0dffa4', '2': '#ffbc46' }[record.record.EGstRu], |
|
|
{ |
|
|
color: { '0': '#bfcde2', '1': '#0dffa4', '2': '#ffbc46' }[ |
|
|
'0': 'rgba(191, 205, 226, 1)', |
|
|
record.record.EGstRu |
|
|
'1': 'rgba(0, 255, 210, 1)', |
|
|
], |
|
|
'2': 'rgba(255, 188, 70, 1)', |
|
|
|
|
|
}[record.record.EGstRu], |
|
|
|
|
|
color: { |
|
|
|
|
|
'0': 'rgba(191, 205, 226, 1)', |
|
|
|
|
|
'1': 'rgba(0, 255, 210, 1)', |
|
|
|
|
|
'2': 'rgba(255, 188, 70, 1)', |
|
|
|
|
|
}[record.record.EGstRu], |
|
|
}"> |
|
|
}"> |
|
|
{{ record.record.runMode.label }} |
|
|
{{ record.record.runMode.label }} |
|
|
</a-tag> |
|
|
</a-tag> |
|
@ -108,9 +116,7 @@ |
|
|
<div style="color: rgb(53, 205, 0); font-size: 20px; font-weight: 700"> |
|
|
<div style="color: rgb(53, 205, 0); font-size: 20px; font-weight: 700"> |
|
|
{{ infoObject.deviceInfoName }} |
|
|
{{ infoObject.deviceInfoName }} |
|
|
</div> |
|
|
</div> |
|
|
<img |
|
|
<div style="width: 150%; height: 1px; background-color: rgba(67, 67, 66, 1)"></div> |
|
|
style="width: 100%; margin-top: -10px" |
|
|
|
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
|
|
|
|
|
<div class="table-detail-box"> |
|
|
<div class="table-detail-box"> |
|
|
<electricDoorTables ref="tables" /> |
|
|
<electricDoorTables ref="tables" /> |
|
|
</div> |
|
|
</div> |
|
@ -144,7 +150,7 @@ |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
const intervalId = setInterval(getDoorList, 600000); |
|
|
const intervalId = setInterval(getDoorList, 60000); |
|
|
//页面 创建 |
|
|
//页面 创建 |
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
//调用电梯接口 定时获取电梯接口 获取当前门状态 |
|
|
//调用电梯接口 定时获取电梯接口 获取当前门状态 |
|
@ -240,21 +246,22 @@ |
|
|
.door-box { |
|
|
.door-box { |
|
|
width: 708px; |
|
|
width: 708px; |
|
|
height: 42px; |
|
|
height: 42px; |
|
|
background-color: rgba(245, 154, 35, 0.5); |
|
|
background-color: rgba(247, 235, 130, 0.8); |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
left: 23%; |
|
|
left: 23%; |
|
|
padding: 6px 6px; |
|
|
padding: 6px 6px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
gap: 10px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
|
|
|
border-radius: 4px; |
|
|
.door-box-item { |
|
|
.door-box-item { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
line-height: 30px; |
|
|
line-height: 30px; |
|
|
border: 1px solid #ab8757; |
|
|
|
|
|
font-weight: 500; |
|
|
font-weight: 500; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
|
|
|
border-radius: 4px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.table-detail { |
|
|
.table-detail { |
|
@ -267,6 +274,7 @@ |
|
|
background-size: 100%; |
|
|
background-size: 100%; |
|
|
z-index: 3; |
|
|
z-index: 3; |
|
|
padding: 32px 32px; |
|
|
padding: 32px 32px; |
|
|
|
|
|
overflow: hidden; |
|
|
.close-icon { |
|
|
.close-icon { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
right: 2px; |
|
|
right: 2px; |
|
@ -289,6 +297,7 @@ |
|
|
overflow-y: auto; |
|
|
overflow-y: auto; |
|
|
margin-top: 4px; |
|
|
margin-top: 4px; |
|
|
padding: 0px 4px; |
|
|
padding: 0px 4px; |
|
|
|
|
|
margin-top: 12px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
// 总容器与抽屉按钮 |
|
|
// 总容器与抽屉按钮 |
|
|