fix:修改ui
This commit is contained in:
@@ -168,6 +168,7 @@
|
||||
return text.index + 1;
|
||||
},
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '规则id',
|
||||
|
@@ -146,6 +146,7 @@
|
||||
return text.index + 1;
|
||||
},
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '规则id',
|
||||
|
@@ -7,7 +7,7 @@
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
<div class="ns-title-extra-box" style="position: absolute; top: 28px"></div>
|
||||
<div class="box">
|
||||
<div class="box-link">
|
||||
<div class="box-left">
|
||||
<a-input
|
||||
v-model:value="searchValue"
|
||||
@@ -363,7 +363,7 @@
|
||||
margin-left: 6px !important;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
.box-link {
|
||||
width: 100%;
|
||||
height: 490px;
|
||||
display: flex;
|
||||
|
@@ -15,6 +15,7 @@ const tableKeyMap = [
|
||||
return text.index + 1;
|
||||
},
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '优先级',
|
||||
|
@@ -15,6 +15,7 @@ const tableKeyMap = [
|
||||
return text.index + 1;
|
||||
},
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '优先级',
|
||||
|
@@ -13,6 +13,7 @@ const tableKeyMap = [
|
||||
return text.index + 1;
|
||||
},
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '优先级',
|
||||
|
@@ -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;
|
||||
|
@@ -41,8 +41,9 @@
|
||||
// showQuickJumper: true,
|
||||
// showLessItems: true,
|
||||
showSizeChanger: false,
|
||||
showTotal: (total: number, range: any) =>
|
||||
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
|
||||
// showTotal: (total: number, range: any) =>
|
||||
// total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
|
||||
showTotal: (total: number, range: any) => (total && range ? '' : ''),
|
||||
onChange: handleChangePage,
|
||||
});
|
||||
|
||||
@@ -116,7 +117,7 @@
|
||||
padding: 4px !important;
|
||||
}
|
||||
:deep(.ant-table-row:hover td) {
|
||||
background-color: rgba(0, 0, 0, 1) !important;
|
||||
background: rgba(0, 0, 0, 1) !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
//分页样式
|
||||
@@ -142,7 +143,7 @@
|
||||
color: #fff !important;
|
||||
}
|
||||
//分页 在右边 取消
|
||||
:deep(.ant-table-pagination-right) {
|
||||
justify-content: normal !important;
|
||||
}
|
||||
// :deep(.ant-table-pagination-right) {
|
||||
// justify-content: normal !important;
|
||||
// }
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user