6 changed files with 282 additions and 0 deletions
@ -0,0 +1,18 @@ |
|||||||
|
import type { GetLogListParams, Log, MessageContent } from './types' |
||||||
|
import { defHttp } from '@/utils/http/axios' |
||||||
|
|
||||||
|
export function getLogList(params: GetLogListParams) { |
||||||
|
return defHttp.get<PageResult<Log>>({ |
||||||
|
url: '/device/log/page', |
||||||
|
params, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function getMessageContent(id: string) { |
||||||
|
return defHttp.get<MessageContent>({ |
||||||
|
url: '/device/log/message', |
||||||
|
params: { |
||||||
|
id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
@ -0,0 +1,25 @@ |
|||||||
|
export interface GetLogListParams extends PageParam { |
||||||
|
productId: string |
||||||
|
deviceSn: string |
||||||
|
traceId: string |
||||||
|
bizType: string |
||||||
|
queryStartTime: string |
||||||
|
queryEndTime: string |
||||||
|
} |
||||||
|
|
||||||
|
export interface Log { |
||||||
|
productId: string |
||||||
|
deviceSn: string |
||||||
|
traceId: string |
||||||
|
messageId?: string |
||||||
|
bizType: number |
||||||
|
operation: string |
||||||
|
createTime: string |
||||||
|
code: number |
||||||
|
} |
||||||
|
|
||||||
|
export interface MessageContent { |
||||||
|
message: string |
||||||
|
topic: string |
||||||
|
createTime: string |
||||||
|
} |
@ -0,0 +1,62 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { h, ref } from 'vue' |
||||||
|
import { Button } from 'ant-design-vue' |
||||||
|
import { CopyOutlined } from '@ant-design/icons-vue' |
||||||
|
import { getMessageContent } from '@/api/monitor-ops/log' |
||||||
|
import { BasicModal, useModalInner } from '@/components/Modal' |
||||||
|
import { noop } from '@/utils' |
||||||
|
import type { DescItem } from '@/components/Description' |
||||||
|
import { Description } from '@/components/Description' |
||||||
|
import { copyText } from '@/utils/copyTextToClipboard' |
||||||
|
import type { MessageContent } from '@/api/monitor-ops/log/types' |
||||||
|
|
||||||
|
defineEmits(['register']) |
||||||
|
|
||||||
|
const data = ref<MessageContent>() |
||||||
|
const [register] = useModalInner((id: string) => { |
||||||
|
getMessageContent(id) |
||||||
|
.then((res) => { |
||||||
|
data.value = res |
||||||
|
}) |
||||||
|
.catch(noop) |
||||||
|
}) |
||||||
|
|
||||||
|
const schema: DescItem[] = [ |
||||||
|
{ |
||||||
|
field: 'topic', |
||||||
|
label: 'Topic', |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'createTime', |
||||||
|
label: '时间', |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'message', |
||||||
|
label: '内容', |
||||||
|
render(val) { |
||||||
|
let content = val |
||||||
|
try { |
||||||
|
content = JSON.stringify(JSON.parse(val), null, 2) |
||||||
|
} |
||||||
|
catch {} |
||||||
|
return h('div', [ |
||||||
|
h(Button, { |
||||||
|
size: 'small', |
||||||
|
onClick: () => copyText(content), |
||||||
|
}, () => [h(CopyOutlined), '复制']), |
||||||
|
h('pre', { |
||||||
|
style: { |
||||||
|
marginTop: '10px', |
||||||
|
}, |
||||||
|
}, content), |
||||||
|
]) |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<BasicModal title="消息内容" :footer="null" @register="register"> |
||||||
|
<Description :data="data" :schema="schema" :column="1" /> |
||||||
|
</BasicModal> |
||||||
|
</template> |
@ -0,0 +1,131 @@ |
|||||||
|
import { h } from 'vue' |
||||||
|
import { Tag } from 'ant-design-vue' |
||||||
|
import dayjs from 'dayjs' |
||||||
|
import type { BasicColumn, FormSchema } from '@/components/Table' |
||||||
|
import { getAllProducts } from '@/api/product' |
||||||
|
import type { Product } from '@/api/product/types' |
||||||
|
import { useSystemEnumStoreWithOut } from '@/store/modules/systemEnum' |
||||||
|
|
||||||
|
let productsCache: Pick<Product, 'id' | 'productName'>[] = [] |
||||||
|
async function getCachedProducts() { |
||||||
|
if (productsCache.length) |
||||||
|
return productsCache |
||||||
|
|
||||||
|
try { |
||||||
|
return productsCache = await getAllProducts() |
||||||
|
} |
||||||
|
catch { |
||||||
|
return [] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const { getSystemEnumLabel, getSystemEnums } = useSystemEnumStoreWithOut() |
||||||
|
|
||||||
|
export const columns: BasicColumn[] = [ |
||||||
|
{ |
||||||
|
title: '所属产品', |
||||||
|
dataIndex: 'productId', |
||||||
|
customRender({ value }) { |
||||||
|
return productsCache.find(item => item.id === value)?.productName |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '设备序列号', |
||||||
|
dataIndex: 'deviceSn', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'TraceID', |
||||||
|
dataIndex: 'traceId', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '消息内容', |
||||||
|
dataIndex: 'messageId', |
||||||
|
width: 120, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '业务类型', |
||||||
|
dataIndex: 'bizType', |
||||||
|
width: 150, |
||||||
|
customRender({ value }) { |
||||||
|
return h(Tag, () => getSystemEnumLabel('eDeviceLogBizType', value)) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'operation', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '时间', |
||||||
|
dataIndex: 'createTime', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '状态', |
||||||
|
dataIndex: 'code', |
||||||
|
width: 120, |
||||||
|
customRender({ value }) { |
||||||
|
return h('b', { |
||||||
|
style: { |
||||||
|
color: value === 200 ? '#16a34a' : '#dc2626', |
||||||
|
}, |
||||||
|
}, value) |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
export const searchFormSchema: FormSchema[] = [ |
||||||
|
{ |
||||||
|
field: 'productId', |
||||||
|
label: '所属产品', |
||||||
|
component: 'ApiSelect', |
||||||
|
componentProps: { |
||||||
|
api: getCachedProducts, |
||||||
|
valueField: 'id', |
||||||
|
labelField: 'productName', |
||||||
|
showSearch: true, |
||||||
|
}, |
||||||
|
colProps: { |
||||||
|
span: 6, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'deviceSn', |
||||||
|
label: '设备序列号', |
||||||
|
component: 'Input', |
||||||
|
colProps: { |
||||||
|
span: 6, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'traceId', |
||||||
|
label: 'TraceId', |
||||||
|
component: 'Input', |
||||||
|
colProps: { |
||||||
|
span: 6, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'bizType', |
||||||
|
label: '业务类型', |
||||||
|
component: 'Select', |
||||||
|
componentProps: { |
||||||
|
options: getSystemEnums('eDeviceLogBizType'), |
||||||
|
}, |
||||||
|
colProps: { |
||||||
|
span: 6, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'time', |
||||||
|
label: '日志时间', |
||||||
|
component: 'RangePicker', |
||||||
|
componentProps: { |
||||||
|
showTime: true, |
||||||
|
disabledDate(current) { |
||||||
|
return current && current > dayjs().endOf('day') |
||||||
|
}, |
||||||
|
}, |
||||||
|
colProps: { |
||||||
|
span: 6, |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
@ -0,0 +1,45 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { columns, searchFormSchema } from './data' |
||||||
|
import MessageContentModal from './MessageContentModal.vue' |
||||||
|
import { getLogList } from '@/api/monitor-ops/log' |
||||||
|
import { BasicTable, useTable } from '@/components/Table' |
||||||
|
import { useModal } from '@/components/Modal' |
||||||
|
import type { GetLogListParams, Log } from '@/api/monitor-ops/log/types' |
||||||
|
|
||||||
|
const [registerModal, { openModal }] = useModal<string>() |
||||||
|
|
||||||
|
const [register] = useTable({ |
||||||
|
api(params: GetLogListParams & { time: [string, string] }) { |
||||||
|
return getLogList({ |
||||||
|
...params, |
||||||
|
queryStartTime: params.time && params.time[0], |
||||||
|
queryEndTime: params.time && params.time[1], |
||||||
|
}) |
||||||
|
}, |
||||||
|
columns, |
||||||
|
formConfig: { |
||||||
|
labelWidth: 90, |
||||||
|
schemas: searchFormSchema, |
||||||
|
}, |
||||||
|
bordered: true, |
||||||
|
canResize: false, |
||||||
|
isTreeTable: true, |
||||||
|
useSearchForm: true, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<BasicTable :api="async () => ([] as Log[])" @register="register"> |
||||||
|
<template #bodyCell="{ column, record }"> |
||||||
|
<template v-if="column.key === 'messageId'"> |
||||||
|
<a-button v-if="record.messageId" type="link" size="small" @click="openModal(true, record.messageId)"> |
||||||
|
查看 |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</BasicTable> |
||||||
|
|
||||||
|
<MessageContentModal @register="registerModal" /> |
||||||
|
</div> |
||||||
|
</template> |
Loading…
Reference in new issue