Skip to content

phsl / admin

Go to a project
Commit eb5d350b by 芋道源码 Committed by Gitee
Options

!626 【代码完善】IOT: ThingModel StructDataSpecs 组件 

Merge pull request !626 from puhui999/feature/iot
parents b6d3a85a 45694910
Showing with 423 additions and 246 deletions
src/api/iot/thinkmodel/index.ts → src/api/iot/thingmodel/index.ts
......@@ -3,7 +3,7 @@ import request from '@/config/axios'
/**
* IoT 产品物模型
*/
export interface ThinkModelData {
export interface ThingModelData {
id?: number // 物模型功能编号
identifier?: string // 功能标识
name?: string // 功能名称
......@@ -12,29 +12,29 @@ export interface ThinkModelData {
productKey?: string // 产品标识
dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
type: ProductFunctionTypeEnum // 功能类型
property: ThinkModelProperty // 属性
event?: ThinkModelEvent // 事件
service?: ThinkModelService // 服务
property: ThingModelProperty // 属性
event?: ThingModelEvent // 事件
service?: ThingModelService // 服务
}
/**
* ThinkModelProperty 类型
* ThingModelProperty 类型
*/
export interface ThinkModelProperty {
export interface ThingModelProperty {
[key: string]: any
}
/**
* ThinkModelEvent 类型
* ThingModelEvent 类型
*/
export interface ThinkModelEvent {
export interface ThingModelEvent {
[key: string]: any
}
/**
* ThinkModelService 类型
* ThingModelService 类型
*/
export interface ThinkModelService {
export interface ThingModelService {
[key: string]: any
}
......@@ -52,38 +52,37 @@ export enum ProductFunctionAccessModeEnum {
}
// IoT 产品物模型 API
export const ThinkModelApi = {
export const ThingModelApi = {
// 查询产品物模型分页
// TODO @puhui999：product 前缀，是不是去掉哈。
getThinkModelPage: async (params: any) => {
return await request.get({ url: `/iot/product-think-model/page`, params })
getThingModelPage: async (params: any) => {
return await request.get({ url: `/iot/product-thing-model/page`, params })
},
// 获得产品物模型
getThinkModelListByProductId: async (params: any) => {
getThingModelListByProductId: async (params: any) => {
return await request.get({
url: `/iot/product-think-model/list-by-product-id`,
url: `/iot/product-thing-model/list-by-product-id`,
params
})
},
// 查询产品物模型详情
getThinkModel: async (id: number) => {
return await request.get({ url: `/iot/product-think-model/get?id=` + id })
getThingModel: async (id: number) => {
return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
},
// 新增产品物模型
createThinkModel: async (data: ThinkModelData) => {
return await request.post({ url: `/iot/product-think-model/create`, data })
createThingModel: async (data: ThingModelData) => {
return await request.post({ url: `/iot/product-thing-model/create`, data })
},
// 修改产品物模型
updateThinkModel: async (data: ThinkModelData) => {
return await request.put({ url: `/iot/product-think-model/update`, data })
updateThingModel: async (data: ThingModelData) => {
return await request.put({ url: `/iot/product-thing-model/update`, data })
},
// 删除产品物模型
deleteThinkModel: async (id: number) => {
return await request.delete({ url: `/iot/product-think-model/delete?id=` + id })
deleteThingModel: async (id: number) => {
return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
}
}
src/utils/dict.ts
......@@ -236,7 +236,7 @@ export enum DICT_TYPE {
IOT_DATA_FORMAT = 'iot_data_format', // IOT 数据格式
IOT_PROTOCOL_TYPE = 'iot_protocol_type', // IOT 接入网关协议
IOT_DEVICE_STATUS = 'iot_device_status', // IOT 设备状态
IOT_PRODUCT_THINK_MODEL_TYPE = 'iot_product_think_model_type', // IOT 产品功能类型
IOT_PRODUCT_THING_MODEL_TYPE = 'iot_product_thing_model_type', // IOT 产品功能类型
IOT_DATA_TYPE = 'iot_data_type', // IOT 数据类型
IOT_UNIT_TYPE = 'iot_unit_type', // IOT 单位类型
IOT_RW_TYPE = 'iot_rw_type', // IOT 读写类型
......
src/views/iot/product/product/detail/index.vue
......@@ -8,8 +8,8 @@
<el-tab-pane label="Topic 类列表" name="topic">
<ProductTopic v-if="activeTab === 'topic'" :product="product" />
</el-tab-pane>
<el-tab-pane label="功能定义" lazy name="thinkModel">
<IoTProductThinkModel ref="thinkModelRef" />
<el-tab-pane label="功能定义" lazy name="thingModel">
<IoTProductThingModel ref="thingModelRef" />
</el-tab-pane>
<el-tab-pane label="消息解析" name="message" />
<el-tab-pane label="服务端订阅" name="subscription" />
......@@ -22,7 +22,7 @@ import { DeviceApi } from '@/api/iot/device/device'
import ProductDetailsHeader from './ProductDetailsHeader.vue'
import ProductDetailsInfo from './ProductDetailsInfo.vue'
import ProductTopic from './ProductTopic.vue'
import IoTProductThinkModel from '@/views/iot/thinkmodel/index.vue'
import IoTProductThingModel from '@/views/iot/thingmodel/index.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useRouter } from 'vue-router'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
......
src/views/iot/product/product/index.vue
......@@ -97,7 +97,9 @@
</div>
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">产品标识</span>
<span class="text-[#0b1d30] whitespace-normal break-all">{{ item.productKey }}</span>
<span class="text-[#0b1d30] whitespace-normal break-all">
{{ item.productKey }}
</span>
</div>
</div>
<div class="w-[100px] h-[100px]">
......@@ -309,7 +311,7 @@ const openObjectModel = (item: ProductVO) => {
push({
name: 'IoTProductDetail',
params: { id: item.id },
query: { tab: 'thinkModel' }
query: { tab: 'thingModel' }
})
}
......
src/views/iot/thinkmodel/ThinkModelDataSpecs.vue → src/views/iot/thingmodel/ThingModelDataSpecs.vue
......@@ -5,8 +5,9 @@
prop="property.dataType"
>
<el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
<!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套2层（父和子） -->
<el-option
v-for="option in dataTypeOptions"
v-for="option in getDataTypeOptions"
:key="option.value"
:label="option.label"
:value="option.value"
......@@ -14,7 +15,7 @@
</el-select>
</el-form-item>
<!-- 数值型配置 -->
<ThinkModelNumberTypeDataSpecs
<ThingModelNumberDataSpecs
v-if="
[DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
property.dataType || ''
......@@ -23,17 +24,12 @@
v-model="property.dataSpecs"
/>
<!-- 枚举型配置 -->
<ThinkModelEnumTypeDataSpecs
<ThingModelEnumDataSpecs
v-if="property.dataType === DataSpecsDataType.ENUM"
v-model="property.dataSpecsList"
/>
<!-- 布尔型配置 -->
<el-form-item
v-if="property.dataType === DataSpecsDataType.BOOL"
:rules="[{ required: true, message: '请输入布尔值名称', trigger: 'blur' }]"
label="布尔值"
prop="property.dataSpecsList"
>
<el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值">
<template v-for="(item, index) in property.dataSpecsList" :key="item.value">
<div class="flex items-center justify-start w-1/1 mb-5px">
<span>{{ item.value }}</span>
......@@ -58,10 +54,6 @@
<!-- 文本型配置 -->
<el-form-item
v-if="property.dataType === DataSpecsDataType.TEXT"
:rules="[
{ required: true, message: '请输入文本字节长度', trigger: 'blur' },
{ validator: validateTextLength, trigger: 'blur' }
]"
label="数据长度"
prop="property.dataSpecs.length"
>
......@@ -74,16 +66,16 @@
<el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
</el-form-item>
<!-- 数组型配置-->
<ThinkModelArrayTypeDataSpecs
<ThingModelArrayDataSpecs
v-if="property.dataType === DataSpecsDataType.ARRAY"
v-model="property.dataSpecs"
/>
<!-- TODO puhui999: Struct 属性待完善 -->
<el-form-item
:rules="[{ required: true, message: '请选择读写类型', trigger: 'change' }]"
label="读写类型"
prop="property.accessMode"
>
<!-- Struct 型配置-->
<ThingModelStructDataSpecs
v-if="property.dataType === DataSpecsDataType.STRUCT"
v-model="property.dataSpecsList"
/>
<el-form-item v-if="!isStructDataSpecs" label="读写类型" prop="property.accessMode">
<el-radio-group v-model="property.accessMode">
<el-radio label="rw">读写</el-radio>
<el-radio label="r">只读</el-radio>
......@@ -102,22 +94,29 @@
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType, dataTypeOptions } from './config'
import { DataSpecsDataType, dataTypeOptions, validateBoolName } from './config'
import {
ThinkModelArrayTypeDataSpecs,
ThinkModelEnumTypeDataSpecs,
ThinkModelNumberTypeDataSpecs
ThingModelArrayDataSpecs,
ThingModelEnumDataSpecs,
ThingModelNumberDataSpecs,
ThingModelStructDataSpecs
} from './dataSpecs'
import { ThinkModelProperty } from '@/api/iot/thinkmodel'
import { isEmpty } from '@/utils/is'
import { ThingModelProperty } from '@/api/iot/thingmodel'
/** IoT 物模型数据 */
defineOptions({ name: 'ThinkModelDataSpecs' })
defineOptions({ name: 'ThingModelDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
const emits = defineEmits(['update:modelValue'])
const property = useVModel(props, 'modelValue', emits) as Ref<ThinkModelProperty>
const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
const getDataTypeOptions = computed(() => {
return !props.isStructDataSpecs
? dataTypeOptions
: dataTypeOptions.filter(
(item) =>
!([DataSpecsDataType.STRUCT, DataSpecsDataType.ARRAY] as any[]).includes(item.value)
)
}) // 获得数据类型列表
/** 属性值的数据类型切换时初始化相关数据 */
const handleChange = (dataType: any) => {
property.value.dataSpecsList = []
......@@ -143,45 +142,6 @@ const handleChange = (dataType: any) => {
break
}
}
// TODO @puhui999：一些校验的规则，是不是写到 utils 里。
/** 校验布尔值名称 */
const validateBoolName = (_: any, value: string, callback: any) => {
if (isEmpty(value)) {
callback(new Error('布尔值名称不能为空'))
return
}
// 检查开头字符
if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
return
}
// 检查整体格式
if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
return
}
// 检查长度（一个中文算一个字符）
if (value.length > 20) {
callback(new Error('布尔值名称长度不能超过20个字符'))
return
}
callback()
}
/** 校验文本长度 */
const validateTextLength = (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('文本长度不能为空'))
return
}
if (isNaN(Number(value))) {
callback(new Error('文本长度必须是数字'))
return
}
callback()
}
</script>
<style lang="scss" scoped>
......
src/views/iot/thinkmodel/ThinkModelForm.vue → src/views/iot/thingmodel/ThingModelForm.vue
......@@ -4,13 +4,13 @@
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
:rules="ThingModelFormRules"
label-width="100px"
>
<el-form-item label="功能类型" prop="type">
<el-radio-group v-model="formData.type">
<el-radio-button
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_THINK_MODEL_TYPE)"
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_THING_MODEL_TYPE)"
:key="dict.value"
:value="dict.value"
>
......@@ -25,7 +25,7 @@
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item>
<!-- 属性配置 -->
<ThinkModelDataSpecs
<ThingModelDataSpecs
v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
v-model="formData.property"
/>
......@@ -40,15 +40,15 @@
<script lang="ts" setup>
import { ProductVO } from '@/api/iot/product/product'
import ThinkModelDataSpecs from './ThinkModelDataSpecs.vue'
import { ProductFunctionTypeEnum, ThinkModelApi, ThinkModelData } from '@/api/iot/thinkmodel'
import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
import { ProductFunctionTypeEnum, ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { DataSpecsDataType } from './config'
import { DataSpecsDataType, ThingModelFormRules } from './config'
import { cloneDeep } from 'lodash-es'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
/** IoT 物模型数据表单 */
defineOptions({ name: 'IoTProductThinkModelForm' })
defineOptions({ name: 'IoTProductThingModelForm' })
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
......@@ -59,7 +59,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref<ThinkModelData>({
const formData = ref<ThingModelData>({
type: ProductFunctionTypeEnum.PROPERTY,
dataType: DataSpecsDataType.INT,
property: {
......@@ -69,43 +69,7 @@ const formData = ref<ThinkModelData>({
}
}
})
const formRules = reactive({
name: [
{ required: true, message: '功能名称不能为空', trigger: 'blur' },
{
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9][\u4e00-\u9fa5a-zA-Z0-9\-_/\.]{0,29}$/,
message:
'支持中文、大小写字母、日文、数字、短划线、下划线、斜杠和小数点，必须以中文、英文或数字开头，不超过 30 个字符',
trigger: 'blur'
}
],
type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
identifier: [
{ required: true, message: '标识符不能为空', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9_]{1,50}$/,
message: '支持大小写字母、数字和下划线，不超过 50 个字符',
trigger: 'blur'
},
{
validator: (_: any, value: string, callback: any) => {
const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
if (reservedKeywords.includes(value)) {
callback(
new Error(
'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
)
)
} else if (/^\d+$/.test(value)) {
callback(new Error('标识符不能是纯数字'))
} else {
callback()
}
},
trigger: 'blur'
}
]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
......@@ -117,7 +81,7 @@ const open = async (type: string, id?: number) => {
if (id) {
formLoading.value = true
try {
formData.value = await ThinkModelApi.getThinkModel(id)
formData.value = await ThingModelApi.getThingModel(id)
} finally {
formLoading.value = false
}
......@@ -131,7 +95,7 @@ const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = cloneDeep(formData.value) as ThinkModelData
const data = cloneDeep(formData.value) as ThingModelData
// 信息补全
data.productId = product!.value.id
data.productKey = product!.value.productKey
......@@ -140,10 +104,10 @@ const submitForm = async () => {
data.property.identifier = data.identifier
data.property.name = data.name
if (formType.value === 'create') {
await ThinkModelApi.createThinkModel(data)
await ThingModelApi.createThingModel(data)
message.success(t('common.createSuccess'))
} else {
await ThinkModelApi.updateThinkModel(data)
await ThingModelApi.updateThingModel(data)
message.success(t('common.updateSuccess'))
}
} finally {
......
src/views/iot/thingmodel/config.ts 0 → 100644
import {isEmpty} from '@/utils/is'
/** dataSpecs 数值型数据结构 */
export interface DataSpecsNumberDataVO {
dataType: 'int' | 'float' | 'double' // 数据类型，取值为 INT、FLOAT 或 DOUBLE
max: string // 最大值，必须与 dataType 设置一致，且为 STRING 类型
min: string // 最小值，必须与 dataType 设置一致，且为 STRING 类型
step: string // 步长，必须与 dataType 设置一致，且为 STRING 类型
precise?: string // 精度，当 dataType 为 FLOAT 或 DOUBLE 时可选
defaultValue?: string // 默认值，可选
unit: string // 单位的符号
unitName: string // 单位的名称
}
/** dataSpecs 枚举型数据结构 */
export interface DataSpecsEnumOrBoolDataVO {
dataType: 'enum' | 'bool'
defaultValue?: string // 默认值，可选
name: string // 枚举项的名称
value: number | undefined // 枚举值
}
/** 属性值的数据类型 */
export const DataSpecsDataType = {
INT: 'int',
FLOAT: 'float',
DOUBLE: 'double',
ENUM: 'enum',
BOOL: 'bool',
TEXT: 'text',
DATE: 'date',
STRUCT: 'struct',
ARRAY: 'array'
} as const
/** 物体模型数据类型配置项 */
export const dataTypeOptions = [
{ value: DataSpecsDataType.INT, label: 'int32 (整数型)' },
{ value: DataSpecsDataType.FLOAT, label: 'float (单精度浮点型)' },
{ value: DataSpecsDataType.DOUBLE, label: 'double (双精度浮点型)' },
{ value: DataSpecsDataType.ENUM, label: 'enum(枚举型)' },
{ value: DataSpecsDataType.BOOL, label: 'bool (布尔型)' },
{ value: DataSpecsDataType.TEXT, label: 'text (文本型)' },
{ value: DataSpecsDataType.DATE, label: 'date (时间型)' },
{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
]
/** 获得物体模型数据类型配置项名称 */
export const getDataTypeOptionsLabel = (value: string) => {
return dataTypeOptions.find((option) => option.value === value)?.label
}
/** 公共校验规则 */
export const ThingModelFormRules = {
name: [
{ required: true, message: '功能名称不能为空', trigger: 'blur' },
{
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9][\u4e00-\u9fa5a-zA-Z0-9\-_/\.]{0,29}$/,
message:
'支持中文、大小写字母、日文、数字、短划线、下划线、斜杠和小数点，必须以中文、英文或数字开头，不超过 30 个字符',
trigger: 'blur'
}
],
type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
identifier: [
{ required: true, message: '标识符不能为空', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9_]{1,50}$/,
message: '支持大小写字母、数字和下划线，不超过 50 个字符',
trigger: 'blur'
},
{
validator: (_: any, value: string, callback: any) => {
const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
if (reservedKeywords.includes(value)) {
callback(
new Error(
'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
)
)
} else if (/^\d+$/.test(value)) {
callback(new Error('标识符不能是纯数字'))
} else {
callback()
}
},
trigger: 'blur'
}
],
'property.dataSpecs.childDataType': [{ required: true, message: '元素类型不能为空' }],
'property.dataSpecs.size': [
{ required: true, message: '元素个数不能为空' },
{
validator: (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('元素个数不能为空'))
return
}
if (isNaN(Number(value))) {
callback(new Error('元素个数必须是数字'))
return
}
callback()
},
trigger: 'blur'
}
],
'property.dataSpecs.length': [
{ required: true, message: '请输入文本字节长度', trigger: 'blur' },
{
validator: (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('文本长度不能为空'))
return
}
if (isNaN(Number(value))) {
callback(new Error('文本长度必须是数字'))
return
}
callback()
},
trigger: 'blur'
}
],
'property.accessMode': [{ required: true, message: '请选择读写类型', trigger: 'change' }]
}
/** 校验布尔值名称 */
export const validateBoolName = (_: any, value: string, callback: any) => {
if (isEmpty(value)) {
callback(new Error('布尔值名称不能为空'))
return
}
// 检查开头字符
if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
return
}
// 检查整体格式
if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
return
}
// 检查长度（一个中文算一个字符）
if (value.length > 20) {
callback(new Error('布尔值名称长度不能超过20个字符'))
return
}
callback()
}
src/views/iot/thinkmodel/dataSpecs/ThinkModelArrayTypeDataSpecs.vue → src/views/iot/thingmodel/dataSpecs/ThingModelArrayDataSpecs.vue
<template>
<el-form-item
:rules="[{ required: true, message: '元素类型不能为空' }]"
label="元素类型"
prop="property.dataSpecs.childDataType"
>
<el-radio-group v-model="dataSpecs.childDataType">
<el-form-item label="元素类型" prop="property.dataSpecs.childDataType">
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
<template v-for="item in dataTypeOptions" :key="item.value">
<el-radio
v-if="
......@@ -19,43 +15,35 @@
</template>
</el-radio-group>
</el-form-item>
<el-form-item
:rules="[
{ required: true, message: '元素个数不能为空' },
{ validator: validateSize, trigger: 'blur' }
]"
label="元素个数"
prop="property.dataSpecs.size"
>
<el-form-item label="元素个数" prop="property.dataSpecs.size">
<el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
</el-form-item>
<!-- Struct 型配置-->
<ThingModelStructDataSpecs
v-if="dataSpecs.childDataType === DataSpecsDataType.STRUCT"
v-model="dataSpecs.dataSpecsList"
/>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType, dataTypeOptions } from '../config'
import { isEmpty } from '@/utils/is'
// TODO @puhui999：参数校验，是不是还是定义一个变量，统一管，好阅读点哈？
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
/** 数组型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThinkModelArrayTypeDataSpecs' })
defineOptions({ name: 'ThingModelArrayDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
/** 校验元素个数 */
const validateSize = (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('元素个数不能为空'))
/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
const handleChange = (val: string) => {
if (val !== DataSpecsDataType.STRUCT) {
return
}
if (isNaN(Number(value))) {
callback(new Error('元素个数必须是数字'))
return
}
callback()
dataSpecs.value.dataSpecsList = []
}
</script>
......
src/views/iot/thinkmodel/dataSpecs/ThinkModelEnumTypeDataSpecs.vue → src/views/iot/thingmodel/dataSpecs/ThingModelEnumDataSpecs.vue
......@@ -2,7 +2,6 @@
<el-form-item
:rules="[{ required: true, validator: validateEnumList, trigger: 'change' }]"
label="枚举项"
prop="property.dataSpecsList"
>
<div class="flex flex-col">
<div class="flex items-center">
......@@ -48,7 +47,7 @@ import { DataSpecsDataType, DataSpecsEnumOrBoolDataVO } from '../config'
import { isEmpty } from '@/utils/is'
/** 枚举型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThinkModelEnumTypeDataSpecs' })
defineOptions({ name: 'ThingModelEnumDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
......@@ -113,7 +112,6 @@ const validateEnumName = (_: any, value: string, callback: any) => {
callback(new Error('枚举描述长度不能超过20个字符'))
return
}
callback()
}
......@@ -147,7 +145,6 @@ const validateEnumList = (_: any, __: any, callback: any) => {
callback(new Error('存在重复的枚举值'))
return
}
callback()
}
</script>
......
src/views/iot/thinkmodel/dataSpecs/ThinkModelNumberTypeDataSpecs.vue → src/views/iot/thingmodel/dataSpecs/ThingModelNumberDataSpecs.vue
......@@ -62,7 +62,7 @@ import { UnifyUnitSpecsDTO } from '@/views/iot/utils/constants'
import { DataSpecsNumberDataVO } from '../config'
/** 数值型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThinkModelNumberTypeDataSpecs' })
defineOptions({ name: 'ThingModelNumberDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
......
src/views/iot/thingmodel/dataSpecs/ThingModelStructDataSpecs.vue 0 → 100644
<template>
<!-- struct 数据展示 -->
<el-form-item
:rules="[{ required: true, validator: validateList, trigger: 'change' }]"
label="JSON 对象"
>
<div
v-for="(item, index) in dataSpecsList"
:key="index"
class="w-1/1 struct-item flex justify-between px-10px mb-10px"
>
<span>参数名称：{{ item.name }}</span>
<div class="btn">
<el-button link type="primary" @click="openStructForm(item)">编辑</el-button>
<el-divider direction="vertical" />
<el-button link type="danger" @click="deleteStructItem(index)">删除</el-button>
</div>
</div>
<el-button link type="primary" @click="openStructForm(null)">+新增参数</el-button>
</el-form-item>
<!-- struct 表单 -->
<Dialog v-model="dialogVisible" :title="dialogTitle" append-to-body>
<el-form
ref="structFormRef"
v-loading="formLoading"
:model="formData"
:rules="ThingModelFormRules"
label-width="100px"
>
<el-form-item label="参数名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入功能名称" />
</el-form-item>
<el-form-item label="标识符" prop="identifier">
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item>
<!-- 属性配置 -->
<ThingModelDataSpecs v-model="formData.property" is-struct-data-specs />
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import ThingModelDataSpecs from '../ThingModelDataSpecs.vue'
import { DataSpecsDataType, ThingModelFormRules } from '../config'
import { isEmpty } from '@/utils/is'
/** Struct 型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelStructDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('新增参数') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const structFormRef = ref() // 表单 ref
const formData = ref<any>({
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
})
/** 打开 struct 表单 */
const openStructForm = (val: any) => {
dialogVisible.value = true
resetForm()
if (isEmpty(val)) {
return
}
// 编辑时回显数据
formData.value = {
identifier: val.identifier,
name: val.name,
description: val.description,
property: {
dataType: val.childDataType,
dataSpecs: val.dataSpecs,
dataSpecsList: val.dataSpecsList
}
}
}
/** 删除 struct 项 */
const deleteStructItem = (index: number) => {
dataSpecsList.value.splice(index, 1)
}
/** 添加参数 */
const submitForm = async () => {
await structFormRef.value.validate()
try {
const data = unref(formData)
// 构建数据对象
const item = {
identifier: data.identifier,
name: data.name,
description: data.description,
dataType: DataSpecsDataType.STRUCT,
childDataType: data.property.dataType,
dataSpecs:
!!data.property.dataSpecs && Object.keys(data.property.dataSpecs).length > 1
? data.property.dataSpecs
: undefined,
dataSpecsList: data.property.dataSpecsList
}
// 查找是否已有相同 identifier 的项
const existingIndex = dataSpecsList.value.findIndex(
(spec) => spec.identifier === data.identifier
)
if (existingIndex > -1) {
// 更新已有项
dataSpecsList.value[existingIndex] = item
} else {
// 添加新项
dataSpecsList.value.push(item)
}
} finally {
// 隐藏对话框
dialogVisible.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
}
structFormRef.value?.resetFields()
}
/** 校验 struct 不能为空 */
const validateList = (_: any, __: any, callback: any) => {
if (isEmpty(dataSpecsList.value)) {
callback(new Error('struct 不能为空'))
return
}
callback()
}
</script>
<style lang="scss" scoped>
.struct-item {
background-color: #e4f2fd;
}
</style>
src/views/iot/thingmodel/dataSpecs/index.ts 0 → 100644
import ThingModelEnumDataSpecs from './ThingModelEnumDataSpecs.vue'
import ThingModelNumberDataSpecs from './ThingModelNumberDataSpecs.vue'
import ThingModelArrayDataSpecs from './ThingModelArrayDataSpecs.vue'
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
export {
ThingModelEnumDataSpecs,
ThingModelNumberDataSpecs,
ThingModelArrayDataSpecs,
ThingModelStructDataSpecs
}
src/views/iot/thinkmodel/index.vue → src/views/iot/thingmodel/index.vue
<!-- TODO 目录，应该是 thinkModel 哈。 -->
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
......@@ -17,7 +16,7 @@
placeholder="请选择功能类型"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_THINK_MODEL_TYPE)"
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_THING_MODEL_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
......@@ -50,7 +49,7 @@
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="功能类型" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_THINK_MODEL_TYPE" :value="scope.row.type" />
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_THING_MODEL_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column align="center" label="功能名称" prop="name" />
......@@ -97,23 +96,23 @@
</el-tabs>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ThinkModelForm ref="formRef" @success="getList" />
<ThingModelForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { ThinkModelApi, ThinkModelData } from '@/api/iot/thinkmodel'
import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import ThinkModelForm from './ThinkModelForm.vue'
import ThingModelForm from './ThingModelForm.vue'
import { ProductVO } from '@/api/iot/product/product'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { getDataTypeOptionsLabel } from '@/views/iot/thinkmodel/config'
import { getDataTypeOptionsLabel } from '@/views/iot/thingmodel/config'
defineOptions({ name: 'IoTProductThinkModel' })
defineOptions({ name: 'IoTProductThingModel' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const list = ref<ThinkModelData[]>([]) // 列表的数据
const list = ref<ThingModelData[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
......@@ -131,7 +130,7 @@ const getList = async () => {
loading.value = true
try {
queryParams.productId = product?.value?.id || -1
const data = await ThinkModelApi.getThinkModelPage(queryParams)
const data = await ThingModelApi.getThingModelPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
......@@ -163,7 +162,7 @@ const handleDelete = async (id: number) => {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ThinkModelApi.deleteThinkModel(id)
await ThingModelApi.deleteThingModel(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
......
src/views/iot/thinkmodel/config.ts deleted 100644 → 0
/** dataSpecs 数值型数据结构 */
export interface DataSpecsNumberDataVO {
dataType: 'int' | 'float' | 'double' // 数据类型，取值为 INT、FLOAT 或 DOUBLE
max: string // 最大值，必须与 dataType 设置一致，且为 STRING 类型
min: string // 最小值，必须与 dataType 设置一致，且为 STRING 类型
step: string // 步长，必须与 dataType 设置一致，且为 STRING 类型
precise?: string // 精度，当 dataType 为 FLOAT 或 DOUBLE 时可选
defaultValue?: string // 默认值，可选
unit: string // 单位的符号
unitName: string // 单位的名称
}
/** dataSpecs 枚举型数据结构 */
export interface DataSpecsEnumOrBoolDataVO {
dataType: 'enum' | 'bool'
defaultValue?: string // 默认值，可选
name: string // 枚举项的名称
value: number | undefined // 枚举值
}
/** 属性值的数据类型 */
export const DataSpecsDataType = {
INT: 'int',
FLOAT: 'float',
DOUBLE: 'double',
ENUM: 'enum',
BOOL: 'bool',
TEXT: 'text',
DATE: 'date',
STRUCT: 'struct',
ARRAY: 'array'
} as const
/** 物体模型数据类型配置项 */
export const dataTypeOptions = [
{ value: DataSpecsDataType.INT, label: 'int32 (整数型)' },
{ value: DataSpecsDataType.FLOAT, label: 'float (单精度浮点型)' },
{ value: DataSpecsDataType.DOUBLE, label: 'double (双精度浮点型)' },
{ value: DataSpecsDataType.ENUM, label: 'enum(枚举型)' },
{ value: DataSpecsDataType.BOOL, label: 'bool (布尔型)' },
{ value: DataSpecsDataType.TEXT, label: 'text (文本型)' },
{ value: DataSpecsDataType.DATE, label: 'date (时间型)' },
{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
]
/** 获得物体模型数据类型配置项名称 */
export const getDataTypeOptionsLabel = (value: string) => {
return dataTypeOptions.find((option) => option.value === value)?.label
}
src/views/iot/thinkmodel/dataSpecs/index.ts deleted 100644 → 0
import ThinkModelEnumTypeDataSpecs from './ThinkModelEnumTypeDataSpecs.vue'
import ThinkModelNumberTypeDataSpecs from './ThinkModelNumberTypeDataSpecs.vue'
import ThinkModelArrayTypeDataSpecs from './ThinkModelArrayTypeDataSpecs.vue'
export { ThinkModelEnumTypeDataSpecs, ThinkModelNumberTypeDataSpecs, ThinkModelArrayTypeDataSpecs }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment