Skip to content

phsl / admin

Go to a project
Commit 94d74f1a by puhui999
Options

【功能新增】IOT: 产品物模型，30%

parent fdc971dd
Showing with 153 additions and 109 deletions
src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
<template> <template>
<el-select <el-form-item label="数据类型" prop="dataType">
v-model="formData.property.dataType.type" <ThingModelDataType v-model="formData.dataType" @change="handleChange" />
:disabled="!!formData.id" </el-form-item>
placeholder="请选择数据类型" <!-- 数值型配置 -->
> <ThingModelNumberTypeDataSpecs
<el-option key="int" label="int32 (整数型)" value="int" /> v-if="
<el-option key="float" label="float (单精度浮点型)" value="float" /> [DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
<el-option key="double" label="double (双精度浮点型)" value="double" /> formData.dataType || ''
<el-option key="enum" label="enum(枚举型)" value="enum" /> )
<el-option key="bool" label="bool (布尔型)" value="bool" /> "
<el-option key="text" label="text (文本型)" value="text" /> v-model="formData.dataSpecs"
<el-option key="date" label="date (时间型)" value="date" /> />
<el-option key="struct" label="struct (结构体)" value="struct" /> <!-- 枚举型配置 -->
<el-option key="array" label="array (数组)" value="array" /> <ThingModelEnumTypeDataSpecs
</el-select> v-if="formData.dataType === DataSpecsDataType.ENUM"
<!-- 情况一：数值型 --> v-model="formData.dataSpecsList"
/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import { DataSpecsDataType } from './config'
import {
ThingModelDataType,
ThingModelEnumTypeDataSpecs,
ThingModelNumberTypeDataSpecs
} from './dataSpecs'
/** 物模型数据类型 */ /** 物模型数据 */
defineOptions({ name: 'ThingModelDataSpecs' }) defineOptions({ name: 'ThingModelDataSpecs' })
const props = defineProps<{ modelValue: any }>() const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
const formData = useVModel(props, 'modelValue', emits) const formData = useVModel(props, 'modelValue', emits) as Ref<any>
/** 属性值的数据类型切换时 */
const handleChange = () => {
formData.value.dataSpecsList = []
formData.value.dataSpecs = {}
}
// dataType为INT的dataSpecs示例： // dataType为INT的dataSpecs示例：
// //
// { // {
......
src/views/iot/product/product/detail/ThingModel/ThingModelDataType.vue deleted 100644 → 0
<template>
<el-select
v-model="formData.property.dataType.type"
:disabled="!!formData.id"
placeholder="请选择数据类型"
>
<el-option key="int" label="int32 (整数型)" value="int" />
<el-option key="float" label="float (单精度浮点型)" value="float" />
<el-option key="double" label="double (双精度浮点型)" value="double" />
<el-option key="enum" label="enum(枚举型)" value="enum" />
<el-option key="bool" label="bool (布尔型)" value="bool" />
<el-option key="text" label="text (文本型)" value="text" />
<el-option key="date" label="date (时间型)" value="date" />
<el-option key="struct" label="struct (结构体)" value="struct" />
<el-option key="array" label="array (数组)" value="array" />
</el-select>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
/** 物模型数据类型 */
defineOptions({ name: 'ThingModelDataType' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const formData = useVModel(props, 'modelValue', emits)
</script>
<style lang="scss" scoped></style>
src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
...@@ -18,28 +18,17 @@ ...@@ -18,28 +18,17 @@
<el-input v-model="formData.name" placeholder="请输入功能名称" /> <el-input v-model="formData.name" placeholder="请输入功能名称" />
</el-form-item> </el-form-item>
<el-form-item label="标识符" prop="identifier"> <el-form-item label="标识符" prop="identifier">
<el-input <el-input v-model="formData.identifier" placeholder="请输入标识符" />
v-model="formData.identifier"
:disabled="formType === 'update'"
placeholder="请输入标识符"
/>
</el-form-item> </el-form-item>
<el-form-item label="数据类型" prop="type"> <ThingModelDataSpecs v-model="formData" />
<ThingModelDataType v-model="formData" />
</el-form-item>
<ThingModelNumberTypeDataSpecs v-model="formData" />
<el-form-item label="读写类型" prop="accessMode"> <el-form-item label="读写类型" prop="accessMode">
<el-radio-group v-model="formData.property.accessMode"> <el-radio-group v-model="formData.accessMode">
<el-radio label="rw">读写</el-radio> <el-radio label="rw">读写</el-radio>
<el-radio label="r">只读</el-radio> <el-radio label="r">只读</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="属性描述" prop="property.description"> <el-form-item label="属性描述" prop="property.description">
<el-input <el-input v-model="formData.description" placeholder="请输入属性描述" type="textarea" />
v-model="formData.property.description"
placeholder="请输入属性描述"
type="textarea"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -51,10 +40,9 @@ ...@@ -51,10 +40,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ThingModelNumberTypeDataSpecs from './ThingModelNumberTypeDataSpecs.vue'
import { ProductVO } from '@/api/iot/product/product' import { ProductVO } from '@/api/iot/product/product'
import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
import { import {
ProductFunctionAccessModeEnum,
ProductFunctionTypeEnum, ProductFunctionTypeEnum,
ThinkModelFunctionApi, ThinkModelFunctionApi,
ThinkModelFunctionVO ThinkModelFunctionVO
...@@ -80,22 +68,10 @@ const formData = ref({ ...@@ -80,22 +68,10 @@ const formData = ref({
name: undefined, name: undefined,
description: undefined, description: undefined,
type: ProductFunctionTypeEnum.PROPERTY, type: ProductFunctionTypeEnum.PROPERTY,
property: { dataType: undefined,
identifier: undefined, dataSpecsList: [],
name: undefined, dataSpecs: undefined,
accessMode: ProductFunctionAccessModeEnum.READ_WRITE, accessMode: undefined
required: true,
dataType: {
type: undefined,
specs: {
min: undefined,
max: undefined,
step: undefined,
unit: undefined
}
},
description: undefined // 添加这一行
}
}) })
const formRules = reactive({ const formRules = reactive({
name: [ name: [
...@@ -188,22 +164,10 @@ const resetForm = () => { ...@@ -188,22 +164,10 @@ const resetForm = () => {
name: undefined, name: undefined,
description: undefined, description: undefined,
type: ProductFunctionTypeEnum.PROPERTY, type: ProductFunctionTypeEnum.PROPERTY,
property: { dataType: undefined,
identifier: undefined, dataSpecsList: [],
name: undefined, dataSpecs: undefined,
accessMode: ProductFunctionAccessModeEnum.READ_WRITE, accessMode: undefined
required: true,
dataType: {
type: undefined,
specs: {
min: undefined,
max: undefined,
step: undefined,
unit: undefined
}
},
description: undefined // 确保重置 description 字段
}
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
......
src/views/iot/product/product/detail/ThingModel/config.ts 0 → 100644
/** 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 DataSpecsTextDataVO {
dataType: 'TEXT'
length: number
}
/** dataSpecs 枚举型数据结构 */
export interface DataSpecsEnumDataVO {
dataType: 'ENUM' | 'BOOL'
defaultValue?: string // 默认值，可选
name: string // 枚举项的名称
value: number // 枚举值
}
/** 属性值的数据类型 */
export const DataSpecsDataType = {
INT: 'int',
FLOAT: 'float',
DOUBLE: 'double',
ENUM: 'enum',
BOOL: 'bool',
TEXT: 'text',
DATE: 'date',
STRUCT: 'struct',
ARRAY: 'array'
}
src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelDataType.vue 0 → 100644
<template>
<el-select v-model="dataType" placeholder="请选择数据类型" @change="handleChange">
<el-option
v-for="option in dataTypeOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType } from '../config'
/** 物模型数据类型 */
defineOptions({ name: 'ThingModelDataType' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue', 'change'])
const dataType = useVModel(props, 'modelValue', emits)
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 (数组)' }
]
const handleChange = () => {
emits('change')
}
</script>
<style lang="scss" scoped></style>
src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelEnumTypeDataSpecs.vue 0 → 100644
<template>
<el-form-item label="枚举项" prop="enumItem">
<div class="flex items-center justify-between">
<span> 参数值 </span>
<span> 参数描述 </span>
</div>
<div v-for="(item, index) in formData" :key="index" class="flex items-center justify-between">
<el-input v-model="item.value" placeholder="请输入参数值" />
<span class="mx-2">~</span>
<el-input v-model="item.name" placeholder="请输入参数描述" />
</div>
<el-button link type="primary">+添加枚举项</el-button>
</el-form-item>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
/** 枚举型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelEnumTypeDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const formData = useVModel(props, 'modelValue', emits)
</script>
<style lang="scss" scoped></style>
src/views/iot/product/product/detail/ThingModel/ThingModelNumberTypeDataSpecs.vue → src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelNumberTypeDataSpecs.vue
...@@ -30,23 +30,13 @@ ...@@ -30,23 +30,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import { UnifyUnitSpecsDTO } from '@/views/iot/utils/constants' import { UnifyUnitSpecsDTO } from '@/views/iot/utils/constants'
import { DataSpecsNumberDataVO } from '../config'
/** 数值型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelNumberTypeDataSpecs' }) defineOptions({ name: 'ThingModelNumberTypeDataSpecs' })
const props = defineProps<{ modelValue: any }>() const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
const formData = useVModel(props, 'modelValue', emits) as Ref<DataConfig> const formData = useVModel(props, 'modelValue', emits) as Ref<DataSpecsNumberDataVO>
type DataType = 'INT' | 'FLOAT' | 'DOUBLE'
interface DataConfig {
dataType: DataType // 数据类型，取值为 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 // 单位的名称
}
/** 单位发生变化时触发 */ /** 单位发生变化时触发 */
const unitChange = (UnitSpecs: string) => { const unitChange = (UnitSpecs: string) => {
......
src/views/iot/product/product/detail/ThingModel/dataSpecs/index.ts 0 → 100644
import ThingModelDataType from './ThingModelDataType.vue'
import ThingModelEnumTypeDataSpecs from './ThingModelEnumTypeDataSpecs.vue'
import ThingModelNumberTypeDataSpecs from './ThingModelNumberTypeDataSpecs.vue'
export { ThingModelDataType, ThingModelEnumTypeDataSpecs, ThingModelNumberTypeDataSpecs }
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