fix:修改ui
This commit is contained in:
@@ -168,6 +168,7 @@
|
|||||||
return text.index + 1;
|
return text.index + 1;
|
||||||
},
|
},
|
||||||
width: 80,
|
width: 80,
|
||||||
|
fixed: 'left',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '规则id',
|
title: '规则id',
|
||||||
|
@@ -146,6 +146,7 @@
|
|||||||
return text.index + 1;
|
return text.index + 1;
|
||||||
},
|
},
|
||||||
width: 80,
|
width: 80,
|
||||||
|
fixed: 'left',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '规则id',
|
title: '规则id',
|
||||||
|
@@ -7,7 +7,7 @@
|
|||||||
@ok="handleOk"
|
@ok="handleOk"
|
||||||
@cancel="handleCancel">
|
@cancel="handleCancel">
|
||||||
<div class="ns-title-extra-box" style="position: absolute; top: 28px"></div>
|
<div class="ns-title-extra-box" style="position: absolute; top: 28px"></div>
|
||||||
<div class="box">
|
<div class="box-link">
|
||||||
<div class="box-left">
|
<div class="box-left">
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="searchValue"
|
v-model:value="searchValue"
|
||||||
@@ -363,7 +363,7 @@
|
|||||||
margin-left: 6px !important;
|
margin-left: 6px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.box {
|
.box-link {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 490px;
|
height: 490px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@@ -15,6 +15,7 @@ const tableKeyMap = [
|
|||||||
return text.index + 1;
|
return text.index + 1;
|
||||||
},
|
},
|
||||||
width: 80,
|
width: 80,
|
||||||
|
fixed: 'left',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '优先级',
|
title: '优先级',
|
||||||
|
@@ -15,6 +15,7 @@ const tableKeyMap = [
|
|||||||
return text.index + 1;
|
return text.index + 1;
|
||||||
},
|
},
|
||||||
width: 80,
|
width: 80,
|
||||||
|
fixed: 'left',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '优先级',
|
title: '优先级',
|
||||||
|
@@ -13,6 +13,7 @@ const tableKeyMap = [
|
|||||||
return text.index + 1;
|
return text.index + 1;
|
||||||
},
|
},
|
||||||
width: 80,
|
width: 80,
|
||||||
|
fixed: 'left',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '优先级',
|
title: '优先级',
|
||||||
|
@@ -4,37 +4,47 @@
|
|||||||
<div class="drawer-box-ins" v-if="!visible" @click="toggleDrawer">
|
<div class="drawer-box-ins" v-if="!visible" @click="toggleDrawer">
|
||||||
<DoubleLeftOutlined class="drawer-icon" style="color: white" />
|
<DoubleLeftOutlined class="drawer-icon" style="color: white" />
|
||||||
</div>
|
</div>
|
||||||
<!-- 门位置 -->
|
<!-- 下边门位置 -->
|
||||||
<div
|
<div
|
||||||
style="
|
v-if="dataSource.length > 0"
|
||||||
width: 708px;
|
style="top: 49%"
|
||||||
height: 42px;
|
class="door-box"
|
||||||
background-color: rgba(245, 154, 35, 0.5);
|
|
||||||
position: absolute;
|
|
||||||
top: 49%;
|
|
||||||
left: 23%;
|
|
||||||
padding: 6px 6px;
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
"
|
|
||||||
@click="
|
@click="
|
||||||
() => {
|
() => {
|
||||||
visible = !visible;
|
visible = !visible;
|
||||||
|
detailed = false;
|
||||||
}
|
}
|
||||||
">
|
">
|
||||||
<template v-for="(item, index) in dataSource" :key="item.deviceInfoCode">
|
<template v-for="(item, index) in dataSource" :key="item.deviceInfoCode">
|
||||||
<div
|
<div
|
||||||
style="
|
v-if="item.type !== 1"
|
||||||
flex: 1;
|
class="door-box-item"
|
||||||
height: 100%;
|
:style="{
|
||||||
text-align: center;
|
'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index % 3],
|
||||||
line-height: 30px;
|
}">
|
||||||
border: 1px solid #ab8757;
|
{{ ['A号门', 'B号门', 'C号门', 'D号门'][index % 3] }}
|
||||||
font-weight: 500;
|
</div>
|
||||||
"
|
</template>
|
||||||
:style="{ 'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][0] }">
|
</div>
|
||||||
{{ ['A号门', 'B号门', 'C号门', 'D号门'][0] }}
|
<!-- 上边门位置 -->
|
||||||
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@@ -121,6 +131,10 @@
|
|||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.msg === 'success') {
|
if (res.msg === 'success') {
|
||||||
|
//确认上边下边门 暂时随机区分
|
||||||
|
res.data.forEach((item: any, index: any) => {
|
||||||
|
item.type = index % 2;
|
||||||
|
});
|
||||||
dataSource.value = res.data;
|
dataSource.value = res.data;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -142,10 +156,10 @@
|
|||||||
return {
|
return {
|
||||||
//点击 行 进行查看详情
|
//点击 行 进行查看详情
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
|
// 处理点击事件
|
||||||
detailed.value = !detailed.value;
|
detailed.value = !detailed.value;
|
||||||
infoObject.value = record;
|
infoObject.value = record;
|
||||||
tables.value.toggle(record);
|
tables.value.toggle(record);
|
||||||
// 处理点击事件
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
@@ -220,6 +234,26 @@
|
|||||||
border-radius: 0 8px 8px 0;
|
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 {
|
.table-detail {
|
||||||
width: 380px;
|
width: 380px;
|
||||||
height: 632px;
|
height: 632px;
|
||||||
|
@@ -41,8 +41,9 @@
|
|||||||
// showQuickJumper: true,
|
// showQuickJumper: true,
|
||||||
// showLessItems: true,
|
// showLessItems: true,
|
||||||
showSizeChanger: false,
|
showSizeChanger: false,
|
||||||
showTotal: (total: number, range: any) =>
|
// showTotal: (total: number, range: any) =>
|
||||||
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
|
// total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
|
||||||
|
showTotal: (total: number, range: any) => (total && range ? '' : ''),
|
||||||
onChange: handleChangePage,
|
onChange: handleChangePage,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -116,7 +117,7 @@
|
|||||||
padding: 4px !important;
|
padding: 4px !important;
|
||||||
}
|
}
|
||||||
:deep(.ant-table-row:hover td) {
|
:deep(.ant-table-row:hover td) {
|
||||||
background-color: rgba(0, 0, 0, 1) !important;
|
background: rgba(0, 0, 0, 1) !important;
|
||||||
cursor: default !important;
|
cursor: default !important;
|
||||||
}
|
}
|
||||||
//分页样式
|
//分页样式
|
||||||
@@ -142,7 +143,7 @@
|
|||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
//分页 在右边 取消
|
//分页 在右边 取消
|
||||||
:deep(.ant-table-pagination-right) {
|
// :deep(.ant-table-pagination-right) {
|
||||||
justify-content: normal !important;
|
// justify-content: normal !important;
|
||||||
}
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user