fix(web-antdv-next): IoT 模拟设备页使用 Tabs items 和 contentRender 适配 antdv-next
XuZhiqiang
parent
08a246d472
commit
852fd0e44f
|
|
@ -48,6 +48,34 @@ const upstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_POST.method); // 上
|
||||||
const downstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_SET.method); // 下行子标签
|
const downstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_SET.method); // 下行子标签
|
||||||
const deviceMessageRef = ref(); // 设备消息组件引用
|
const deviceMessageRef = ref(); // 设备消息组件引用
|
||||||
const deviceMessageRefreshDelay = 2000; // 延迟 N 秒，保证模拟上行的消息被处理
|
const deviceMessageRefreshDelay = 2000; // 延迟 N 秒，保证模拟上行的消息被处理
|
||||||
|
const simulatorTabItems = [
|
||||||
|
{ key: 'upstream', label: '上行指令调试' },
|
||||||
|
{ key: 'downstream', label: '下行指令调试' },
|
||||||
|
];
|
||||||
|
const upstreamTabItems = [
|
||||||
|
{
|
||||||
|
key: IotDeviceMessageMethodEnum.PROPERTY_POST.method,
|
||||||
|
label: '属性上报',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: IotDeviceMessageMethodEnum.EVENT_POST.method,
|
||||||
|
label: '事件上报',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: IotDeviceMessageMethodEnum.STATE_UPDATE.method,
|
||||||
|
label: '状态变更',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const downstreamTabItems = [
|
||||||
|
{
|
||||||
|
key: IotDeviceMessageMethodEnum.PROPERTY_SET.method,
|
||||||
|
label: '属性设置',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method,
|
||||||
|
label: '设备服务调用',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
// 折叠状态
|
// 折叠状态
|
||||||
const debugCollapsed = ref(false); // 指令调试区域折叠状态
|
const debugCollapsed = ref(false); // 指令调试区域折叠状态
|
||||||
|
|
@ -465,87 +493,91 @@ watch([activeTab, upstreamTab, downstreamTab], () => {
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div v-show="!debugCollapsed">
|
<div v-show="!debugCollapsed">
|
||||||
<Tabs v-model:active-key="activeTab" size="small">
|
<Tabs
|
||||||
<!-- 上行指令调试 -->
|
v-model:active-key="activeTab"
|
||||||
<Tabs.TabPane key="upstream" tab="上行指令调试">
|
:items="simulatorTabItems"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<template #contentRender="{ item }">
|
||||||
<Tabs
|
<Tabs
|
||||||
v-if="activeTab === 'upstream'"
|
v-if="item.key === 'upstream' && activeTab === 'upstream'"
|
||||||
v-model:active-key="upstreamTab"
|
v-model:active-key="upstreamTab"
|
||||||
|
:items="upstreamTabItems"
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
<!-- 属性上报 -->
|
<template #contentRender="{ item: upstreamItem }">
|
||||||
<Tabs.TabPane
|
|
||||||
:key="IotDeviceMessageMethodEnum.PROPERTY_POST.method"
|
|
||||||
tab="属性上报"
|
|
||||||
>
|
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<Table
|
<template
|
||||||
:columns="propertyColumns"
|
v-if="
|
||||||
:data-source="propertyList"
|
upstreamItem.key ===
|
||||||
:pagination="false"
|
IotDeviceMessageMethodEnum.PROPERTY_POST.method
|
||||||
:scroll="{ x: 'max-content', y: 300 }"
|
"
|
||||||
align="center"
|
|
||||||
size="small"
|
|
||||||
>
|
>
|
||||||
<template #bodyCell="{ column, record }">
|
<Table
|
||||||
<template v-if="column.key === 'dataType'">
|
:columns="propertyColumns"
|
||||||
{{ record.property?.dataType ?? '-' }}
|
:data-source="propertyList"
|
||||||
|
:pagination="false"
|
||||||
|
:scroll="{ x: 'max-content', y: 300 }"
|
||||||
|
align="center"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'dataType'">
|
||||||
|
{{ record.property?.dataType ?? '-' }}
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="column.key === 'dataDefinition'"
|
||||||
|
>
|
||||||
|
<DataDefinition :data="record" />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'value'">
|
||||||
|
<InputNumber
|
||||||
|
v-if="isNumberProperty(record)"
|
||||||
|
:value="getFormValue(record.identifier)"
|
||||||
|
placeholder="输入值"
|
||||||
|
size="small"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="
|
||||||
|
setFormValue(record.identifier, $event)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else-if="isSelectProperty(record)"
|
||||||
|
:value="getFormValue(record.identifier)"
|
||||||
|
:options="getPropertyOptions(record)"
|
||||||
|
placeholder="请选择值"
|
||||||
|
size="small"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="
|
||||||
|
setFormValue(record.identifier, $event)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
v-else
|
||||||
|
:value="getFormValue(record.identifier)"
|
||||||
|
placeholder="输入值"
|
||||||
|
size="small"
|
||||||
|
@update:value="
|
||||||
|
setFormValue(record.identifier, $event)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="column.key === 'dataDefinition'">
|
</Table>
|
||||||
<DataDefinition :data="record" />
|
<div class="mt-4 flex items-center justify-between">
|
||||||
</template>
|
<span class="text-sm text-gray-600">
|
||||||
<template v-else-if="column.key === 'value'">
|
设置属性值后，点击「发送属性上报」按钮
|
||||||
<InputNumber
|
</span>
|
||||||
v-if="isNumberProperty(record)"
|
<Button type="primary" @click="handlePropertyPost">
|
||||||
:value="getFormValue(record.identifier)"
|
发送属性上报
|
||||||
placeholder="输入值"
|
</Button>
|
||||||
size="small"
|
</div>
|
||||||
class="w-full"
|
</template>
|
||||||
@update:value="
|
|
||||||
setFormValue(record.identifier, $event)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
v-else-if="isSelectProperty(record)"
|
|
||||||
:value="getFormValue(record.identifier)"
|
|
||||||
:options="getPropertyOptions(record)"
|
|
||||||
placeholder="请选择值"
|
|
||||||
size="small"
|
|
||||||
class="w-full"
|
|
||||||
@update:value="
|
|
||||||
setFormValue(record.identifier, $event)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
v-else
|
|
||||||
:value="getFormValue(record.identifier)"
|
|
||||||
placeholder="输入值"
|
|
||||||
size="small"
|
|
||||||
@update:value="
|
|
||||||
setFormValue(record.identifier, $event)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
<div class="mt-4 flex items-center justify-between">
|
|
||||||
<span class="text-sm text-gray-600">
|
|
||||||
设置属性值后，点击「发送属性上报」按钮
|
|
||||||
</span>
|
|
||||||
<Button type="primary" @click="handlePropertyPost">
|
|
||||||
发送属性上报
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</ContentWrap>
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 事件上报 -->
|
|
||||||
<Tabs.TabPane
|
|
||||||
:key="IotDeviceMessageMethodEnum.EVENT_POST.method"
|
|
||||||
tab="事件上报"
|
|
||||||
>
|
|
||||||
<ContentWrap>
|
|
||||||
<Table
|
<Table
|
||||||
|
v-else-if="
|
||||||
|
upstreamItem.key ===
|
||||||
|
IotDeviceMessageMethodEnum.EVENT_POST.method
|
||||||
|
"
|
||||||
:columns="eventColumns"
|
:columns="eventColumns"
|
||||||
:data-source="eventList"
|
:data-source="eventList"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
|
|
@ -555,7 +587,7 @@ watch([activeTab, upstreamTab, downstreamTab], () => {
|
||||||
>
|
>
|
||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
<template v-if="column.key === 'dataType'">
|
<template v-if="column.key === 'dataType'">
|
||||||
{{ record.event?.dataType ?? '-' }}
|
{{ record.dataType ?? '-' }}
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="column.key === 'dataDefinition'">
|
<template v-else-if="column.key === 'dataDefinition'">
|
||||||
<DataDefinition :data="record" />
|
<DataDefinition :data="record" />
|
||||||
|
|
@ -563,11 +595,11 @@ watch([activeTab, upstreamTab, downstreamTab], () => {
|
||||||
<template v-else-if="column.key === 'value'">
|
<template v-else-if="column.key === 'value'">
|
||||||
<TextArea
|
<TextArea
|
||||||
:rows="3"
|
:rows="3"
|
||||||
:value="getFormValue(record.identifier)"
|
:value="getFormValue(record.identifier!)"
|
||||||
placeholder="输入事件参数（JSON格式）"
|
placeholder="输入事件参数（JSON格式）"
|
||||||
size="small"
|
size="small"
|
||||||
@update:value="
|
@update:value="
|
||||||
setFormValue(record.identifier, $event)
|
setFormValue(record.identifier!, $event)
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -582,16 +614,13 @@ watch([activeTab, upstreamTab, downstreamTab], () => {
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</Table>
|
</Table>
|
||||||
</ContentWrap>
|
<div
|
||||||
</Tabs.TabPane>
|
v-else-if="
|
||||||
|
upstreamItem.key ===
|
||||||
<!-- 状态变更 -->
|
IotDeviceMessageMethodEnum.STATE_UPDATE.method
|
||||||
<Tabs.TabPane
|
"
|
||||||
:key="IotDeviceMessageMethodEnum.STATE_UPDATE.method"
|
class="flex gap-4"
|
||||||
tab="状态变更"
|
>
|
||||||
>
|
|
||||||
<ContentWrap>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleDeviceState(DeviceStateEnum.ONLINE)"
|
@click="handleDeviceState(DeviceStateEnum.ONLINE)"
|
||||||
|
|
@ -606,90 +635,89 @@ watch([activeTab, upstreamTab, downstreamTab], () => {
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</Tabs.TabPane>
|
</template>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 下行指令调试 -->
|
|
||||||
<Tabs.TabPane key="downstream" tab="下行指令调试">
|
|
||||||
<Tabs
|
<Tabs
|
||||||
v-if="activeTab === 'downstream'"
|
v-else-if="
|
||||||
|
item.key === 'downstream' && activeTab === 'downstream'
|
||||||
|
"
|
||||||
v-model:active-key="downstreamTab"
|
v-model:active-key="downstreamTab"
|
||||||
|
:items="downstreamTabItems"
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
<!-- 属性调试 -->
|
<template #contentRender="{ item: downstreamItem }">
|
||||||
<Tabs.TabPane
|
|
||||||
:key="IotDeviceMessageMethodEnum.PROPERTY_SET.method"
|
|
||||||
tab="属性设置"
|
|
||||||
>
|
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<Table
|
<template
|
||||||
:columns="propertyColumns"
|
v-if="
|
||||||
:data-source="propertyList"
|
downstreamItem.key ===
|
||||||
:pagination="false"
|
IotDeviceMessageMethodEnum.PROPERTY_SET.method
|
||||||
:scroll="{ x: 'max-content', y: 300 }"
|
"
|
||||||
align="center"
|
|
||||||
size="small"
|
|
||||||
>
|
>
|
||||||
<template #bodyCell="{ column, record }">
|
<Table
|
||||||
<template v-if="column.key === 'dataType'">
|
:columns="propertyColumns"
|
||||||
{{ record.property?.dataType ?? '-' }}
|
:data-source="propertyList"
|
||||||
|
:pagination="false"
|
||||||
|
:scroll="{ x: 'max-content', y: 300 }"
|
||||||
|
align="center"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'dataType'">
|
||||||
|
{{ record.property?.dataType ?? '-' }}
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="column.key === 'dataDefinition'"
|
||||||
|
>
|
||||||
|
<DataDefinition :data="record" />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'value'">
|
||||||
|
<InputNumber
|
||||||
|
v-if="isNumberProperty(record)"
|
||||||
|
:value="getFormValue(record.identifier)"
|
||||||
|
placeholder="输入值"
|
||||||
|
size="small"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="
|
||||||
|
setFormValue(record.identifier, $event)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else-if="isSelectProperty(record)"
|
||||||
|
:value="getFormValue(record.identifier)"
|
||||||
|
:options="getPropertyOptions(record)"
|
||||||
|
placeholder="请选择值"
|
||||||
|
size="small"
|
||||||
|
class="w-full"
|
||||||
|
@update:value="
|
||||||
|
setFormValue(record.identifier, $event)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
v-else
|
||||||
|
:value="getFormValue(record.identifier)"
|
||||||
|
placeholder="输入值"
|
||||||
|
size="small"
|
||||||
|
@update:value="
|
||||||
|
setFormValue(record.identifier, $event)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="column.key === 'dataDefinition'">
|
</Table>
|
||||||
<DataDefinition :data="record" />
|
<div class="mt-4 flex items-center justify-between">
|
||||||
</template>
|
<span class="text-sm text-gray-600">
|
||||||
<template v-else-if="column.key === 'value'">
|
设置属性值后，点击「发送属性设置」按钮
|
||||||
<InputNumber
|
</span>
|
||||||
v-if="isNumberProperty(record)"
|
<Button type="primary" @click="handlePropertySet">
|
||||||
:value="getFormValue(record.identifier)"
|
发送属性设置
|
||||||
placeholder="输入值"
|
</Button>
|
||||||
size="small"
|
</div>
|
||||||
class="w-full"
|
</template>
|
||||||
@update:value="
|
|
||||||
setFormValue(record.identifier, $event)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
v-else-if="isSelectProperty(record)"
|
|
||||||
:value="getFormValue(record.identifier)"
|
|
||||||
:options="getPropertyOptions(record)"
|
|
||||||
placeholder="请选择值"
|
|
||||||
size="small"
|
|
||||||
class="w-full"
|
|
||||||
@update:value="
|
|
||||||
setFormValue(record.identifier, $event)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
v-else
|
|
||||||
:value="getFormValue(record.identifier)"
|
|
||||||
placeholder="输入值"
|
|
||||||
size="small"
|
|
||||||
@update:value="
|
|
||||||
setFormValue(record.identifier, $event)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
<div class="mt-4 flex items-center justify-between">
|
|
||||||
<span class="text-sm text-gray-600">
|
|
||||||
设置属性值后，点击「发送属性设置」按钮
|
|
||||||
</span>
|
|
||||||
<Button type="primary" @click="handlePropertySet">
|
|
||||||
发送属性设置
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</ContentWrap>
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<!-- 服务调用 -->
|
|
||||||
<Tabs.TabPane
|
|
||||||
:key="IotDeviceMessageMethodEnum.SERVICE_INVOKE.method"
|
|
||||||
tab="设备服务调用"
|
|
||||||
>
|
|
||||||
<ContentWrap>
|
|
||||||
<Table
|
<Table
|
||||||
|
v-else-if="
|
||||||
|
downstreamItem.key ===
|
||||||
|
IotDeviceMessageMethodEnum.SERVICE_INVOKE.method
|
||||||
|
"
|
||||||
:columns="serviceColumns"
|
:columns="serviceColumns"
|
||||||
:data-source="serviceList"
|
:data-source="serviceList"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
|
|
@ -704,11 +732,11 @@ watch([activeTab, upstreamTab, downstreamTab], () => {
|
||||||
<template v-else-if="column.key === 'value'">
|
<template v-else-if="column.key === 'value'">
|
||||||
<TextArea
|
<TextArea
|
||||||
:rows="3"
|
:rows="3"
|
||||||
:value="getFormValue(record.identifier)"
|
:value="getFormValue(record.identifier!)"
|
||||||
placeholder="输入服务参数（JSON格式）"
|
placeholder="输入服务参数（JSON格式）"
|
||||||
size="small"
|
size="small"
|
||||||
@update:value="
|
@update:value="
|
||||||
setFormValue(record.identifier, $event)
|
setFormValue(record.identifier!, $event)
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -724,9 +752,9 @@ watch([activeTab, upstreamTab, downstreamTab], () => {
|
||||||
</template>
|
</template>
|
||||||
</Table>
|
</Table>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</Tabs.TabPane>
|
</template>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Tabs.TabPane>
|
</template>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue