zhaohy
4 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