Showing
1 changed file
with
31 additions
and
2 deletions
| 1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
| 2 | - import { ref } from 'vue'; | 2 | + import { CSSProperties, h, ref } from 'vue'; |
| 3 | import { EdgeDeviceItemType, EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance'; | 3 | import { EdgeDeviceItemType, EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance'; |
| 4 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | 4 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 5 | import { columns, searchFormSchema } from './config'; | 5 | import { columns, searchFormSchema } from './config'; |
| @@ -9,6 +9,8 @@ | @@ -9,6 +9,8 @@ | ||
| 9 | import { useMessage } from '/@/hooks/web/useMessage'; | 9 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 10 | import { useRoute } from 'vue-router'; | 10 | import { useRoute } from 'vue-router'; |
| 11 | import { useGo } from '/@/hooks/web/usePage'; | 11 | import { useGo } from '/@/hooks/web/usePage'; |
| 12 | + import { Badge } from 'ant-design-vue'; | ||
| 13 | + import Icon from '/@/components/Icon'; | ||
| 12 | 14 | ||
| 13 | defineEmits(['register']); | 15 | defineEmits(['register']); |
| 14 | 16 | ||
| @@ -41,6 +43,32 @@ | @@ -41,6 +43,32 @@ | ||
| 41 | reload(); | 43 | reload(); |
| 42 | }; | 44 | }; |
| 43 | 45 | ||
| 46 | + const AlarmDetailActionButton = ({ hasAlarm }: { hasAlarm?: boolean }) => | ||
| 47 | + h( | ||
| 48 | + Badge, | ||
| 49 | + { offset: [0, -5] }, | ||
| 50 | + { | ||
| 51 | + default: () => h('span', { style: { color: '#377dff' } }, '详情'), | ||
| 52 | + count: () => | ||
| 53 | + h( | ||
| 54 | + 'div', | ||
| 55 | + { | ||
| 56 | + style: { | ||
| 57 | + visibility: hasAlarm ? 'visible' : 'hidden', | ||
| 58 | + width: '14px', | ||
| 59 | + height: '14px', | ||
| 60 | + display: 'flex', | ||
| 61 | + justifyContent: 'center', | ||
| 62 | + alignItems: 'center', | ||
| 63 | + border: '1px solid #f46161', | ||
| 64 | + borderRadius: '50%', | ||
| 65 | + } as CSSProperties, | ||
| 66 | + }, | ||
| 67 | + h(Icon, { icon: 'mdi:bell-warning', color: '#f46161', size: 12 }) | ||
| 68 | + ), | ||
| 69 | + } | ||
| 70 | + ); | ||
| 71 | + | ||
| 44 | const [registerTable, { reload }] = useTable({ | 72 | const [registerTable, { reload }] = useTable({ |
| 45 | title: '边缘设备', | 73 | title: '边缘设备', |
| 46 | columns, | 74 | columns, |
| @@ -94,7 +122,8 @@ | @@ -94,7 +122,8 @@ | ||
| 94 | <TableAction | 122 | <TableAction |
| 95 | :actions="[ | 123 | :actions="[ |
| 96 | { | 124 | { |
| 97 | - label: '详情', | 125 | + // label: '详情', |
| 126 | + label: AlarmDetailActionButton({ hasAlarm: !!record.alarmStatus }), | ||
| 98 | icon: 'ant-design:eye-outlined', | 127 | icon: 'ant-design:eye-outlined', |
| 99 | onClick: handleGoDeviceDetail.bind(null, record), | 128 | onClick: handleGoDeviceDetail.bind(null, record), |
| 100 | }, | 129 | }, |