<script lang="ts" setup>
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
import type { MesDvTelemetryApi } from '#/api/mes/dv/telemetry';
|
|
import { watch } from 'vue';
|
|
import { Tag } from 'ant-design-vue';
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { getLatestTelemetry } from '#/api/mes/dv/telemetry';
|
|
import { useLatestColumns } from '../../telemetry/data';
|
|
const props = defineProps<{ tbDeviceId?: string }>();
|
|
const [Grid, gridApi] = useVbenVxeGrid({
|
gridOptions: {
|
columns: useLatestColumns(),
|
height: 320,
|
keepSource: true,
|
// /latest 返回裸数组，需关闭分页，否则 vxe 会按 {list,total} 解析导致不展示
|
pagerConfig: { enabled: false },
|
proxyConfig: {
|
ajax: {
|
query: async () =>
|
await getLatestTelemetry({ tbDeviceId: props.tbDeviceId }),
|
},
|
},
|
rowConfig: { keyField: 'id', isHover: true },
|
toolbarConfig: { refresh: true },
|
} as VxeTableGridOptions<MesDvTelemetryApi.Telemetry>,
|
});
|
|
watch(
|
() => props.tbDeviceId,
|
(value) => {
|
if (value) {
|
gridApi.query();
|
}
|
},
|
);
|
</script>
|
|
<template>
|
<Grid table-title="数采实时数据">
|
<template #anomaly="{ row }">
|
<Tag :color="row.whetherAnomaly ? 'red' : 'green'">
|
{{ row.whetherAnomaly ? '异常' : '正常' }}
|
</Tag>
|
</template>
|
</Grid>
|
</template>
|
