|
|
@ -4,37 +4,47 @@ |
|
|
|
<div class="drawer-box-ins" v-if="!visible" @click="toggleDrawer"> |
|
|
|
<DoubleLeftOutlined class="drawer-icon" style="color: white" /> |
|
|
|
</div> |
|
|
|
<!-- 门位置 --> |
|
|
|
<!-- 下边门位置 --> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: 708px; |
|
|
|
height: 42px; |
|
|
|
background-color: rgba(245, 154, 35, 0.5); |
|
|
|
position: absolute; |
|
|
|
top: 49%; |
|
|
|
left: 23%; |
|
|
|
padding: 6px 6px; |
|
|
|
display: flex; |
|
|
|
gap: 10px; |
|
|
|
cursor: pointer; |
|
|
|
" |
|
|
|
v-if="dataSource.length > 0" |
|
|
|
style="top: 49%" |
|
|
|
class="door-box" |
|
|
|
@click=" |
|
|
|
() => { |
|
|
|
visible = !visible; |
|
|
|
detailed = false; |
|
|
|
} |
|
|
|
"> |
|
|
|
<template v-for="(item, index) in dataSource" :key="item.deviceInfoCode"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
text-align: center; |
|
|
|
line-height: 30px; |
|
|
|
border: 1px solid #ab8757; |
|
|
|
font-weight: 500; |
|
|
|
" |
|
|
|
:style="{ 'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][0] }"> |
|
|
|
{{ ['A号门', 'B号门', 'C号门', 'D号门'][0] }} |
|
|
|
v-if="item.type !== 1" |
|
|
|
class="door-box-item" |
|
|
|
:style="{ |
|
|
|
'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index % 3], |
|
|
|
}"> |
|
|
|
{{ ['A号门', 'B号门', 'C号门', 'D号门'][index % 3] }} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<!-- 上边门位置 --> |
|
|
|
<div |
|
|
|
v-if="dataSource.length > 0" |
|
|
|
style="top: 20%" |
|
|
|
class="door-box" |
|
|
|
@click=" |
|
|
|
() => { |
|
|
|
visible = !visible; |
|
|
|
detailed = false; |
|
|
|
} |
|
|
|
"> |
|
|
|
<template v-for="(item, index) in dataSource" :key="item.deviceInfoCode"> |
|
|
|
<div |
|
|
|
v-if="item.type === 1" |
|
|
|
class="door-box-item" |
|
|
|
:style="{ |
|
|
|
'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index % 3], |
|
|
|
}"> |
|
|
|
{{ ['A号门', 'B号门', 'C号门', 'D号门'][index % 3] }} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
@ -121,6 +131,10 @@ |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
//确认上边下边门 暂时随机区分 |
|
|
|
res.data.forEach((item: any, index: any) => { |
|
|
|
item.type = index % 2; |
|
|
|
}); |
|
|
|
dataSource.value = res.data; |
|
|
|
} |
|
|
|
}); |
|
|
@ -142,10 +156,10 @@ |
|
|
|
return { |
|
|
|
//点击 行 进行查看详情 |
|
|
|
onClick: () => { |
|
|
|
// 处理点击事件 |
|
|
|
detailed.value = !detailed.value; |
|
|
|
infoObject.value = record; |
|
|
|
tables.value.toggle(record); |
|
|
|
// 处理点击事件 |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
@ -220,6 +234,26 @@ |
|
|
|
border-radius: 0 8px 8px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.door-box { |
|
|
|
width: 708px; |
|
|
|
height: 42px; |
|
|
|
background-color: rgba(245, 154, 35, 0.5); |
|
|
|
position: absolute; |
|
|
|
left: 23%; |
|
|
|
padding: 6px 6px; |
|
|
|
display: flex; |
|
|
|
gap: 10px; |
|
|
|
cursor: pointer; |
|
|
|
.door-box-item { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
text-align: center; |
|
|
|
line-height: 30px; |
|
|
|
border: 1px solid #ab8757; |
|
|
|
font-weight: 500; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
.table-detail { |
|
|
|
width: 380px; |
|
|
|
height: 632px; |
|
|
|