review:【antd】【iot】代码实现

This commit is contained in:
YunaiV
2025-12-21 23:04:57 +08:00
parent 835da00f2c
commit 13f81b3130
10 changed files with 37 additions and 47 deletions

View File

@@ -15,13 +15,7 @@ import { DICT_TYPE } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime } from '@vben/utils';
import {
Button,
Select,
Space,
Switch,
Tag,
} from 'ant-design-vue';
import { Button, Select, Space, Switch, Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeviceMessagePage } from '#/api/iot/device/device';
@@ -241,9 +235,7 @@ defineExpose({
</template>
<template #params="{ row }">
<span v-if="row.reply">
{{
`{"code":${row.code},"msg":"${row.msg}","data":${row.data}\}`
}}
{{ `{"code":${row.code},"msg":"${row.msg}","data":${row.data}\}` }}
</span>
<span v-else>{{ row.params }}</span>
</template>

View File

@@ -593,8 +593,14 @@ async function handleServiceInvoke(row: ThingModelData) {
size="small"
@click="messageCollapsed = !messageCollapsed"
>
<IconifyIcon icon="lucide:chevron-down" v-if="!messageCollapsed" />
<IconifyIcon icon="lucide:chevron-down" v-if="messageCollapsed" />
<IconifyIcon
icon="lucide:chevron-down"
v-if="!messageCollapsed"
/>
<IconifyIcon
icon="lucide:chevron-down"
v-if="messageCollapsed"
/>
</Button>
</div>
</template>

View File

@@ -9,13 +9,7 @@ import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime } from '@vben/utils';
import {
Button,
RangePicker,
Select,
Space,
Tag,
} from 'ant-design-vue';
import { Button, RangePicker, Select, Space, Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeviceMessagePairPage } from '#/api/iot/device/device';
@@ -240,9 +234,7 @@ defineExpose({
<Grid>
<template #reportTime="{ row }">
{{
row.request?.reportTime
? formatDateTime(row.request.reportTime)
: '-'
row.request?.reportTime ? formatDateTime(row.request.reportTime) : '-'
}}
</template>
<template #identifier="{ row }">

View File

@@ -3,7 +3,14 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { IotDeviceApi } from '#/api/iot/device/device';
import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import {
nextTick,
onBeforeUnmount,
onMounted,
reactive,
ref,
watch,
} from 'vue';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
@@ -27,6 +34,7 @@ import DeviceDetailsThingModelPropertyHistory from './thing-model-property-histo
const props = defineProps<{ deviceId: number }>();
// TODO @haohao变量写在 // 列表的加载中 这种注释哈,变量后面;
/** 列表的加载中 */
const loading = ref(true);
/** 显示的列表数据 */
@@ -373,7 +381,9 @@ onBeforeUnmount(() => {
<div class="mb-2.5 last:mb-0">
<span class="mr-2.5 text-muted-foreground">更新时间</span>
<span class="text-sm text-foreground">
{{ item.updateTime ? formatDateTime(item.updateTime) : '-' }}
{{
item.updateTime ? formatDateTime(item.updateTime) : '-'
}}
</span>
</div>
</div>
@@ -394,9 +404,7 @@ onBeforeUnmount(() => {
<template #actions="{ row }">
<Button
type="link"
@click="
openHistory(props.deviceId, row.identifier, row.dataType)
"
@click="openHistory(props.deviceId, row.identifier, row.dataType)"
>
查看数据
</Button>

View File

@@ -9,13 +9,7 @@ import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime } from '@vben/utils';
import {
Button,
RangePicker,
Select,
Space,
Tag,
} from 'ant-design-vue';
import { Button, RangePicker, Select, Space, Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeviceMessagePairPage } from '#/api/iot/device/device';
@@ -254,15 +248,11 @@ defineExpose({
<Grid>
<template #requestTime="{ row }">
{{
row.request?.reportTime
? formatDateTime(row.request.reportTime)
: '-'
row.request?.reportTime ? formatDateTime(row.request.reportTime) : '-'
}}
</template>
<template #responseTime="{ row }">
{{
row.reply?.reportTime ? formatDateTime(row.reply.reportTime) : '-'
}}
{{ row.reply?.reportTime ? formatDateTime(row.reply.reportTime) : '-' }}
</template>
<template #identifier="{ row }">
<Tag color="blue" size="small">

View File

@@ -72,7 +72,6 @@ const queryParams = ref({
groupId: undefined as number | undefined,
}); // 搜索参数
/** 搜索 */
function handleSearch() {
if (viewMode.value === 'list') {
@@ -201,7 +200,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!);
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
checkboxConfig: {
@@ -310,7 +308,10 @@ onMounted(async () => {
style="width: 200px"
>
<Select.Option
v-for="dict in getDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE, 'number')"
v-for="dict in getDictOptions(
DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
'number',
)"
:key="dict.value"
:value="dict.value"
>

View File

@@ -23,7 +23,9 @@ const messageChartRef = ref();
const { renderEcharts } = useEcharts(messageChartRef);
const loading = ref(false);
const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>([]);
const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
[],
);
/** 时间范围(仅日期,不包含时分秒) */
const dateRange = ref<[string, string]>([

View File

@@ -405,4 +405,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}

View File

@@ -90,4 +90,3 @@ onMounted(async () => {
</Tabs>
</Page>
</template>

View File

@@ -17,6 +17,8 @@ import { $t } from '#/locales';
import { useAdvancedFormSchema, useBasicFormSchema } from '../data';
const emit = defineEmits(['success']);
/** 生成 ProductKey包含大小写字母和数字 */
function generateProductKey(): string {
const chars =
@@ -28,7 +30,6 @@ function generateProductKey(): string {
return result;
}
const emit = defineEmits(['success']);
const formData = ref<IotProductApi.Product>();
const activeKey = ref<string[]>([]);
const getTitle = computed(() => {