zhaohy
3 months ago
14 changed files with 523 additions and 34 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,279 @@ |
|||
<template> |
|||
<div style="width: 100%; height: 100%; overflow: hidden"> |
|||
<div style="width: 100%; height: 50px; display: flex"> |
|||
<img |
|||
v-if="selctLeft.type == 1" |
|||
style="width: 42px; height: 42px; margin-left: -6px" |
|||
src="../image/liftState/straightLadder.png" |
|||
alt="" /> |
|||
<img |
|||
v-else-if="selctLeft.type == 2" |
|||
style="width: 42px; height: 42px; margin-left: -6px" |
|||
src="../image/liftState/escalator.png" |
|||
alt="" /> |
|||
<div style="margin-left: 6px; font-size: 20px; line-height: 28px"> |
|||
{{ selctLeft.name }} |
|||
</div> |
|||
</div> |
|||
<!-- 左侧抽屉的关闭按钮 --> |
|||
<div class="drawer-box-out" @click="clickDrawer()"> |
|||
<DoubleRightOutlined class="drawer-icon" style="color: white" /> |
|||
</div> |
|||
<div style="width: 100%; height: calc(100% - 50px); display: flex; position: relative"> |
|||
<a-table |
|||
style="width: 100%" |
|||
:columns="column" |
|||
:data-source="dataSource" |
|||
:pagination="pagination"> |
|||
<template #bodyCell="{ record, column }"> |
|||
<template v-if="column.dataIndex === 'switch'"> |
|||
<a-tag |
|||
style="background-color: rgba(0, 0, 0, 0.5); width: 50px" |
|||
:style="{ |
|||
border: { |
|||
'0': '1px solid rgba(0, 255, 210, 1)', //2 |
|||
'1': '1px solid rgba(191, 205, 226, 1)', //关闭 |
|||
}[record.switch], |
|||
color: { |
|||
'0': 'rgba(0, 255, 210, 1)', //正常 |
|||
'1': 'rgba(191, 205, 226, 1)', //关闭 |
|||
}[record.switch], |
|||
}" |
|||
>{{ { '0': '开启', '1': '关闭' }[record.switch] }}</a-tag |
|||
> |
|||
</template> |
|||
<template v-if="column.dataIndex === 'state'"> |
|||
<a-tag |
|||
style="background-color: rgba(0, 0, 0, 0.5); width: 50px" |
|||
:style="{ |
|||
border: { |
|||
'0': '1px solid rgba(0, 255, 210, 1)', //正常 |
|||
'1': '1px solid rgba(255, 188, 70, 1)', //维修 |
|||
'2': '1px solid rgba(255, 118, 54, 1)', //故障 |
|||
'3': '1px solid rgba(243, 97, 99, 1)', //告警 |
|||
}[record.state], |
|||
color: { |
|||
'0': 'rgba(0, 255, 210, 1)', //正常 |
|||
'1': 'rgba(255, 188, 70, 1)', //维修 |
|||
'2': 'rgba(255, 118, 54, 1)', //故障 |
|||
'3': 'rgba(243, 97, 99, 1)', //告警 |
|||
}[record.state], |
|||
}" |
|||
>{{ { '0': '正常', '1': '维修', '2': '故障', '3': '告警' }[record.state] }}</a-tag |
|||
> |
|||
</template> |
|||
<template v-if="column.dataIndex === 'lift'"> |
|||
<a-tag |
|||
style="background-color: rgba(0, 0, 0, 0.5); width: 50px" |
|||
:style="{ |
|||
border: { |
|||
'0': '1px solid rgba(0, 255, 210, 1)', //上行 |
|||
'1': '1px solid rgba(0, 255, 210, 1)', //下行 |
|||
'2': '1px solid rgba(255, 188, 70, 1)', //暂停 |
|||
'3': '1px solid rgba(243, 97, 99, 1)', //急停 |
|||
'4': '1px solid rgba(167, 66, 255, 1)', //未知 |
|||
}[record.lift], |
|||
color: { |
|||
'0': 'rgba(0, 255, 210, 1)', //上行 |
|||
'1': 'rgba(0, 255, 210, 1)', //下行 |
|||
'2': 'rgba(255, 188, 70, 1)', //暂停 |
|||
'3': 'rgba(243, 97, 99, 1)', //急停 |
|||
'4': 'rgba(167, 66, 255, 1)', //未知 |
|||
}[record.lift], |
|||
}" |
|||
>{{ |
|||
{ |
|||
'0': '上行', //上行 |
|||
'1': '下行', //下行 |
|||
'2': '暂停', //暂停 |
|||
'3': '急停', //急停 |
|||
'4': '未知', //未知 |
|||
}[record.lift] |
|||
}}</a-tag |
|||
> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { DoubleRightOutlined } from '@ant-design/icons-vue'; |
|||
|
|||
import { ref } from 'vue'; |
|||
const emit = defineEmits(['clickDrawer']); |
|||
|
|||
const selctLeft = ref({}); |
|||
// 改变页码 |
|||
const handleChangePage = (current: number, pageSize: number) => { |
|||
pagination.value.current = current; |
|||
pagination.value.pageSize = pageSize; |
|||
}; |
|||
|
|||
const dataSource = ref([ |
|||
{ time: '2022-03-01 10:00:00', state: '0', switch: '0', lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 }, |
|||
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 0 }, |
|||
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 }, |
|||
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 }, |
|||
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 0 }, |
|||
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 }, |
|||
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 }, |
|||
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
|||
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 }, |
|||
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
|||
]); |
|||
const pagination = ref({ |
|||
total: dataSource.value.length, |
|||
size: 'small', |
|||
current: 1, |
|||
pageSize: 10, |
|||
showQuickJumper: false, |
|||
showLessItems: false, |
|||
showSizeChanger: false, |
|||
responsive: true, |
|||
showTotal: (total: number, range: any) => (total && range ? `` : ''), //显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录 |
|||
onChange: handleChangePage, |
|||
}); |
|||
const column = [ |
|||
{ |
|||
title: '执行时间', |
|||
dataIndex: 'time', |
|||
key: 'time', |
|||
width: 140, |
|||
}, |
|||
{ |
|||
title: '开关', |
|||
dataIndex: 'switch', |
|||
key: 'switch', |
|||
width: 80, |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
dataIndex: 'state', |
|||
key: 'state', |
|||
width: 80, |
|||
}, |
|||
{ |
|||
title: '模式', |
|||
dataIndex: 'lift', |
|||
key: 'lift', |
|||
width: 80, |
|||
}, |
|||
]; |
|||
const toggle = (data: any) => { |
|||
pagination.value.current = 1; |
|||
selctLeft.value = data; |
|||
}; |
|||
const clickDrawer = () => { |
|||
emit('clickDrawer'); |
|||
}; |
|||
defineExpose({ |
|||
toggle, |
|||
}); |
|||
</script> |
|||
<style scoped lang="less"> |
|||
:deep(.ant-table-thead > tr) { |
|||
height: 30px !important; |
|||
} |
|||
:deep(.ant-table-tbody > tr) { |
|||
height: 30px !important; |
|||
} |
|||
:deep(.ant-table-thead > tr > th) { |
|||
background-color: #1a2230; |
|||
border: 1px solid rgba(163, 192, 243, 0.8); |
|||
color: white; |
|||
text-align: center; |
|||
font-weight: normal !important; |
|||
padding: 12px !important; |
|||
} |
|||
:deep(.ant-table-tbody > tr > td) { |
|||
background-color: rgba(0, 0, 0, 0.9) !important; |
|||
color: white; |
|||
border: 1px solid rgba(163, 192, 243, 0.8); |
|||
text-align: center; |
|||
padding: 12px !important; |
|||
} |
|||
:deep(.ant-table-row:hover td) { |
|||
background: rgba(0, 0, 0, 0.9) !important; |
|||
cursor: pointer; |
|||
} |
|||
:deep(.ant-tabs-tab-btn) { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
color: #fff !important; |
|||
} |
|||
//分页 |
|||
:deep(.ant-pagination-item) { |
|||
background-color: rgba(0, 0, 0, 1) !important; |
|||
border: 1px solid rgba(147, 200, 243, 1) !important; |
|||
border-radius: 2px !important; |
|||
margin: 0 8px !important; |
|||
} |
|||
:deep(.ant-pagination-item a) { |
|||
color: rgba(12, 140, 246, 1) !important; |
|||
} |
|||
:deep(.ant-pagination-item-active) { |
|||
border-radius: 2px !important; |
|||
background: rgba(12, 140, 246, 1) !important; |
|||
} |
|||
:deep(.ant-pagination-item-active a) { |
|||
color: white !important; |
|||
} |
|||
:deep(.ant-pagination-prev) { |
|||
background-color: rgba(0, 0, 0, 1) !important; |
|||
border: 1px solid rgba(147, 200, 243, 1) !important; |
|||
} |
|||
:deep(.ant-pagination-next) { |
|||
background-color: rgba(0, 0, 0, 1) !important; |
|||
border: 1px solid rgba(147, 200, 243, 1) !important; |
|||
} |
|||
:deep(.anticon) { |
|||
color: rgba(12, 140, 246, 1) !important; |
|||
} |
|||
:deep(.ant-table-pagination) { |
|||
display: flex; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
} |
|||
:deep(.ant-spin-container) { |
|||
height: 100% !important; |
|||
} |
|||
:deep(.ant-spin-nested-loading) { |
|||
height: 100% !important; |
|||
} |
|||
//分页 在右边 取消 |
|||
// :deep(.ant-table-pagination-right) { |
|||
// justify-content: normal !important; |
|||
// } |
|||
// 抽屉关闭按钮 |
|||
.drawer-box-out { |
|||
width: 24px; |
|||
height: 24px; |
|||
border-radius: 2px; |
|||
position: absolute; |
|||
right: 576px; |
|||
z-index: 2; |
|||
top: 50%; |
|||
margin: auto; |
|||
background: #268aff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
border-radius: 0 8px 8px 0; |
|||
color: white; |
|||
} |
|||
:deep(.anticon) { |
|||
color: #fff !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue