54afd4555d
1.修复物模型列表无限加载的问题 2.修复物模型管理页面添加，TSL，编辑，删除，功能类型选项功能不用问题 3.修复TSL按钮物模型接口没有的问题 4.修复物模型新增编辑页面的属性不能正常编辑修改问题美化显示 iot设备管理问题 1.修复新增编辑页面缺少字段相关组件 2.修复设备详情中子页面不显示问题 3.修复设备详情子页面物模型数据页面不显示问题 4.修复模拟设备右侧不显示问题 右侧溢出，改为上下分栏 Signed-off-by: Administrator <425053404@qq.com>
116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
||
import type { ThingModelData } from '#/api/iot/thingmodel';
|
||
|
||
import { computed } from 'vue';
|
||
|
||
import { Tooltip } from 'ant-design-vue';
|
||
|
||
import {
|
||
getEventTypeLabel,
|
||
getThingModelServiceCallTypeLabel,
|
||
IoTDataSpecsDataTypeEnum,
|
||
IoTThingModelTypeEnum,
|
||
} from '#/views/iot/utils/constants';
|
||
|
||
/** 数据定义展示组件 */
|
||
defineOptions({ name: 'DataDefinition' });
|
||
|
||
const props = defineProps<{ data: ThingModelData }>();
|
||
|
||
// 格式化布尔值和枚举值列表为字符串
|
||
const formattedDataSpecsList = computed(() => {
|
||
if (!props.data.property?.dataSpecsList || props.data.property.dataSpecsList.length === 0) {
|
||
return '';
|
||
}
|
||
return props.data.property.dataSpecsList
|
||
.map(item => `${item.value}-${item.name}`)
|
||
.join('、');
|
||
});
|
||
|
||
// 显示的简短文本（第一个值）
|
||
const shortText = computed(() => {
|
||
if (!props.data.property?.dataSpecsList || props.data.property.dataSpecsList.length === 0) {
|
||
return '-';
|
||
}
|
||
const first = props.data.property.dataSpecsList[0];
|
||
const count = props.data.property.dataSpecsList.length;
|
||
return count > 1 ? `${first.value}-${first.name} 等${count}项` : `${first.value}-${first.name}`;
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 属性 -->
|
||
<template v-if="Number(data.type) === IoTThingModelTypeEnum.PROPERTY">
|
||
<!-- 非列表型：数值 -->
|
||
<div
|
||
v-if="
|
||
[
|
||
IoTDataSpecsDataTypeEnum.INT,
|
||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||
].includes(data.property?.dataType as any)
|
||
"
|
||
>
|
||
取值范围：{{
|
||
`${data.property?.dataSpecs?.min}~${data.property?.dataSpecs?.max}`
|
||
}}
|
||
</div>
|
||
<!-- 非列表型：文本 -->
|
||
<div v-if="IoTDataSpecsDataTypeEnum.TEXT === data.property?.dataType">
|
||
数据长度：{{ data.property?.dataSpecs?.length }}
|
||
</div>
|
||
<!-- 列表型: 数组、结构、时间（特殊） -->
|
||
<div
|
||
v-if="
|
||
[
|
||
IoTDataSpecsDataTypeEnum.ARRAY,
|
||
IoTDataSpecsDataTypeEnum.STRUCT,
|
||
IoTDataSpecsDataTypeEnum.DATE,
|
||
].includes(data.property?.dataType as any)
|
||
"
|
||
>
|
||
-
|
||
</div>
|
||
<!-- 列表型: 布尔值、枚举 -->
|
||
<div
|
||
v-if="
|
||
[IoTDataSpecsDataTypeEnum.BOOL, IoTDataSpecsDataTypeEnum.ENUM].includes(
|
||
data.property?.dataType as any,
|
||
)
|
||
"
|
||
>
|
||
<Tooltip :title="formattedDataSpecsList" placement="topLeft">
|
||
<span class="data-specs-text">
|
||
{{
|
||
IoTDataSpecsDataTypeEnum.BOOL === data.property?.dataType
|
||
? '布尔值'
|
||
: '枚举值'
|
||
}}：{{ shortText }}
|
||
</span>
|
||
</Tooltip>
|
||
</div>
|
||
</template>
|
||
<!-- 服务 -->
|
||
<div v-if="Number(data.type) === IoTThingModelTypeEnum.SERVICE">
|
||
调用方式：{{
|
||
getThingModelServiceCallTypeLabel(data.service?.callType as any)
|
||
}}
|
||
</div>
|
||
<!-- 事件 -->
|
||
<div v-if="Number(data.type) === IoTThingModelTypeEnum.EVENT">
|
||
事件类型：{{ getEventTypeLabel(data.event?.type as any) }}
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.data-specs-text {
|
||
cursor: help;
|
||
border-bottom: 1px dashed #d9d9d9;
|
||
|
||
&:hover {
|
||
border-bottom-color: #1890ff;
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
</style>
|