yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能完善】IOT: 产品物模型-属性

pull/620/head
puhui999 2024-12-16 17:47:02 +08:00
parent 187b5b03ee
commit e36e48586e
7 changed files with 143 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/iot/thinkmodelfunction/index.ts
View File

@ -10,6 +10,7 @@ export interface ThingModelData {
description?: string // 功能描述
productId?: number // 产品编号
productKey?: string // 产品标识
dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
type: ProductFunctionTypeEnum // 功能类型
property: ThingModelProperty // 属性
event?: ThingModelEvent // 事件
@ -53,34 +54,35 @@ export enum ProductFunctionAccessModeEnum {
// IoT 产品物模型 API
export const ThinkModelFunctionApi = {
// 查询产品物模型分页
getThinkModelFunctionPage: async (params: any) => {
return await request.get({ url: `/iot/think-model-function/page`, params })
getProductThingModelPage: async (params: any) => {
return await request.get({ url: `/iot/product-thing-model/page`, params })
},
// 获得产品物模型
getThinkModelFunctionListByProductId: async (params: any) => {
getProductThingModelListByProductId: async (params: any) => {
return await request.get({
url: `/iot/think-model-function/list-by-product-id`,
url: `/iot/product-thing-model/list-by-product-id`,
params
})
},
// 查询产品物模型详情
getThinkModelFunction: async (id: number) => {
return await request.get({ url: `/iot/think-model-function/get?id=` + id })
getProductThingModel: async (id: number) => {
return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
},
// 新增产品物模型
createThinkModelFunction: async (data: ThingModelData) => {
return await request.post({ url: `/iot/think-model-function/create`, data })
createProductThingModel: async (data: ThingModelData) => {
return await request.post({ url: `/iot/product-thing-model/create`, data })
},
// 修改产品物模型
updateThinkModelFunction: async (data: ThingModelData) => {
return await request.put({ url: `/iot/think-model-function/update`, data })
updateProductThingModel: async (data: ThingModelData) => {
return await request.put({ url: `/iot/product-thing-model/update`, data })
},
// 删除产品物模型
deleteThinkModelFunction: async (id: number) => {
return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
deleteProductThingModel: async (id: number) => {
return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
}
}

28
src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
View File

@ -24,34 +24,35 @@
v-model="property.dataSpecsList"
/>
<!-- 布尔型配置 -->
<el-form-item label="布尔值" prop="bool" v-if="property.dataType === DataSpecsDataType.BOOL">
<el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值" prop="bool">
<template v-for="item in property.dataSpecsList" :key="item.value">
<div class="flex items-center justify-start w-1/1 mb-5px">
<span>{{ item.value }}</span>
<span class="mx-2">-</span>
<el-input
v-model="item.name"
class="w-255px!"
:placeholder="`如：${item.value === 0 ? '关' : '开'}`"
class="w-255px!"
/>
</div>
</template>
</el-form-item>
<!-- 文本型配置 -->
<el-form-item label="数据长度" prop="text" v-if="property.dataType === DataSpecsDataType.TEXT">
<el-input v-model="property.length" class="w-255px!" placeholder="请输入文本字节长度">
<el-form-item v-if="property.dataType === DataSpecsDataType.TEXT" label="数据长度" prop="text">
<el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
<template #append>字节</template>
</el-input>
</el-form-item>
<!-- 时间型配置 -->
<el-form-item label="时间格式" prop="date" v-if="property.dataType === DataSpecsDataType.DATE">
<el-input disabled class="w-255px!" placeholder="String类型的UTC时间戳（毫秒）" />
<el-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
<el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
</el-form-item>
<!-- 数组型配置-->
<ThingModelArrayTypeDataSpecs
v-model="property.dataSpecs"
v-if="property.dataType === DataSpecsDataType.ARRAY"
v-model="property.dataSpecs"
/>
<!-- TODO puhui999: Struct 属性待完善 -->
<el-form-item label="读写类型" prop="accessMode">
<el-radio-group v-model="property.accessMode">
<el-radio label="rw">读写</el-radio>
@ -84,16 +85,8 @@ const handleChange = (dataType: any) => {
property.value.dataSpecsList = []
property.value.dataSpecs = {}
property.value.dataSpecs.dataType = dataType
switch (dataType) {
case DataSpecsDataType.INT:
property.value.dataSpecs.dataType = DataSpecsDataType.INT
break
case DataSpecsDataType.DOUBLE:
property.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
break
case DataSpecsDataType.FLOAT:
property.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
break
case DataSpecsDataType.ENUM:
property.value.dataSpecsList.push({
dataType: DataSpecsDataType.ENUM,
@ -110,9 +103,6 @@ const handleChange = (dataType: any) => {
})
}
break
case DataSpecsDataType.ARRAY:
property.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
break
}
}
</script>

33
src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
View File

@ -22,8 +22,8 @@
</el-form-item>
<!-- 属性配置 -->
<ThingModelDataSpecs
v-model="formData.property"
v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
v-model="formData.property"
/>
</el-form>
@ -39,11 +39,12 @@ import { ProductVO } from '@/api/iot/product/product'
import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
import {
ProductFunctionTypeEnum,
ThinkModelFunctionApi,
ThingModelData
ThingModelData,
ThinkModelFunctionApi
} from '@/api/iot/thinkmodelfunction'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { DataSpecsDataType } from './config'
import { cloneDeep } from 'lodash-es'
defineOptions({ name: 'IoTProductThingModelForm' })
@ -58,12 +59,15 @@ const formLoading = ref(false)
const formType = ref('')
const formData = ref<ThingModelData>({
type: ProductFunctionTypeEnum.PROPERTY,
dataType: DataSpecsDataType.INT,
property: {
dataType: DataSpecsDataType.INT,
dataSpecsList: [],
dataSpecs: {}
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
})
// TODO puhui999: 表单校验待完善
const formRules = reactive({
name: [
{ required: true, message: '功能名称不能为空', trigger: 'blur' },
@ -114,7 +118,7 @@ const open = async (type: string, id?: number) => {
if (id) {
formLoading.value = true
try {
formData.value = await ThinkModelFunctionApi.getThinkModelFunction(id)
formData.value = await ThinkModelFunctionApi.getProductThingModel(id)
} finally {
formLoading.value = false
}
@ -128,14 +132,19 @@ const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = formData.value as unknown as ThingModelData
const data = cloneDeep(formData.value) as ThingModelData
// 信息补全
data.productId = product!.value.id
data.productKey = product!.value.productKey
data.description = data.property.description
data.dataType = data.property.dataType
data.property.identifier = data.identifier
data.property.name = data.name
if (formType.value === 'create') {
await ThinkModelFunctionApi.createThinkModelFunction(data)
await ThinkModelFunctionApi.createProductThingModel(data)
message.success(t('common.createSuccess'))
} else {
await ThinkModelFunctionApi.updateThinkModelFunction(data)
await ThinkModelFunctionApi.updateProductThingModel(data)
message.success(t('common.updateSuccess'))
}
} finally {
@ -149,10 +158,12 @@ const submitForm = async () => {
const resetForm = () => {
formData.value = {
type: ProductFunctionTypeEnum.PROPERTY,
dataType: DataSpecsDataType.INT,
property: {
dataType: DataSpecsDataType.INT,
dataSpecsList: [],
dataSpecs: {}
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
}
formRef.value?.resetFields()

5
src/views/iot/product/product/detail/ThingModel/config.ts
View File

@ -43,3 +43,8 @@ export const dataTypeOptions = [
{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
]
/** 获得物体模型数据类型配置项名称 */
export const getDataTypeOptionsLabel = (value: string) => {
return dataTypeOptions.find((option) => option.value === value)?.label
}

35
src/views/iot/product/product/detail/ThingModel/index.vue
View File

@ -32,7 +32,12 @@
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button plain type="primary" @click="openForm('create')">
<el-button
v-hasPermi="[`iot:product-thing-model:create`]"
plain
type="primary"
@click="openForm('create')"
>
<Icon class="mr-5px" icon="ep:plus" />
添加功能
</el-button>
@ -49,12 +54,21 @@
</el-table-column>
<el-table-column align="center" label="功能名称" prop="name" />
<el-table-column align="center" label="标识符" prop="identifier" />
<el-table-column align="center" label="数据类型" prop="identifier" />
<el-table-column align="center" label="数据定义" prop="identifier" />
<el-table-column align="center" label="数据类型" prop="identifier">
<template #default="{ row }">
{{ dataTypeOptionsLabel(row.property.dataType) ?? '-' }}
</template>
</el-table-column>
<el-table-column align="center" label="数据定义" prop="identifier">
<template #default="{ row }">
<!-- TODO puhui999: 数据定义展示待完善 -->
{{ row.property.dataSpecs ?? row.property.dataSpecsList }}
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="[`iot:think-model-function:update`]"
v-hasPermi="[`iot:product-thing-model:update`]"
link
type="primary"
@click="openForm('update', scope.row.id)"
@ -62,7 +76,7 @@
编辑
</el-button>
<el-button
v-hasPermi="['iot:think-model-function:delete']"
v-hasPermi="['iot:product-thing-model:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
@ -85,11 +99,12 @@
<ThingModelForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
import { ThingModelData, ThinkModelFunctionApi } from '@/api/iot/thinkmodelfunction'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
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/product/product/detail/ThingModel/config'
defineOptions({ name: 'IoTProductThingModel' })
@ -97,7 +112,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const list = ref<ThinkModelFunctionVO[]>([]) // 列表的数据
const list = ref<ThingModelData[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
@ -108,12 +123,14 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
queryParams.productId = product?.value?.id || -1
const data = await ThinkModelFunctionApi.getThinkModelFunctionPage(queryParams)
const data = await ThinkModelFunctionApi.getProductThingModelPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
@ -145,7 +162,7 @@ const handleDelete = async (id: number) => {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ThinkModelFunctionApi.deleteThinkModelFunction(id)
await ThinkModelFunctionApi.deleteProductThingModel(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()

2
src/views/iot/product/product/detail/index.vue
View File

@ -8,7 +8,7 @@
<el-tab-pane label="Topic 类列表" name="topic">
<ProductTopic v-if="activeTab === 'topic'" :product="product" />
</el-tab-pane>
<el-tab-pane label="功能定义" lazy name="function">
<el-tab-pane label="功能定义" lazy name="thingModel">
<IoTProductThingModel ref="thingModelRef" />
</el-tab-pane>
<el-tab-pane label="消息解析" name="message" />

124
src/views/iot/product/product/index.vue
View File

@ -2,49 +2,57 @@
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="产品名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入产品名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
clearable
placeholder="请输入产品名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="ProductKey" prop="productKey">
<el-input
v-model="queryParams.productKey"
placeholder="请输入产品标识"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
clearable
placeholder="请输入产品标识"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['iot:product:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button
type="success"
v-hasPermi="['iot:product:create']"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['iot:product:export']"
type="primary"
@click="openForm('create')"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button
v-hasPermi="['iot:product:export']"
:loading="exportLoading"
plain
type="success"
@click="handleExport"
>
<Icon class="mr-5px" icon="ep:download" />
导出
</el-button>
</el-form-item>
<!-- 视图切换按钮 -->
@ -64,8 +72,8 @@
<!-- 卡片视图 -->
<ContentWrap>
<el-row v-if="viewMode === 'card'" :gutter="16">
<el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
<el-card class="h-full transition-colors" :body-style="{ padding: '0' }">
<el-col v-for="item in list" :key="item.id" :lg="6" :md="12" :sm="12" :xs="24" class="mb-4">
<el-card :body-style="{ padding: '0' }" class="h-full transition-colors">
<!-- 内容区域 -->
<div class="p-4">
<!-- 标题区域 -->
@ -103,41 +111,41 @@
<!-- 按钮组 -->
<div class="flex items-center px-0">
<el-button
class="flex-1 !px-2 !h-[32px] text-[13px]"
type="primary"
plain
@click="openForm('update', item.id)"
v-hasPermi="['iot:product:update']"
class="flex-1 !px-2 !h-[32px] text-[13px]"
plain
type="primary"
@click="openForm('update', item.id)"
>
<Icon icon="ep:edit-pen" class="mr-1" />
<Icon class="mr-1" icon="ep:edit-pen" />
编辑
</el-button>
<el-button
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
type="warning"
plain
type="warning"
@click="openDetail(item.id)"
>
<Icon icon="ep:view" class="mr-1" />
<Icon class="mr-1" icon="ep:view" />
详情
</el-button>
<el-button
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
type="success"
plain
type="success"
@click="openObjectModel(item)"
>
<Icon icon="ep:scale-to-original" class="mr-1" />
<Icon class="mr-1" icon="ep:scale-to-original" />
物模型
</el-button>
<div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
<el-button
class="!px-2 !h-[32px] text-[13px]"
type="danger"
plain
@click="handleDelete(item.id)"
v-hasPermi="['iot:product:delete']"
:disabled="item.status === 1"
class="!px-2 !h-[32px] text-[13px]"
plain
type="danger"
@click="handleDelete(item.id)"
>
<Icon icon="ep:delete" />
</el-button>
@ -148,68 +156,68 @@
</el-row>
<!-- 列表视图 -->
<el-table v-else v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="ID" align="center" prop="id" />
<el-table-column label="ProductKey" align="center" prop="productKey" />
<el-table-column label="品类" align="center" prop="categoryName" />
<el-table-column label="设备类型" align="center" prop="deviceType">
<el-table v-else v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="ID" prop="id" />
<el-table-column align="center" label="ProductKey" prop="productKey" />
<el-table-column align="center" label="品类" prop="categoryName" />
<el-table-column align="center" label="设备类型" prop="deviceType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
</template>
</el-table-column>
<el-table-column label="产品图标" align="center" prop="icon">
<el-table-column align="center" label="产品图标" prop="icon">
<template #default="scope">
<el-image
v-if="scope.row.icon"
:preview-src-list="[scope.row.icon]"
:src="scope.row.icon"
class="w-40px h-40px"
:preview-src-list="[scope.row.icon]"
/>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="产品图片" align="center" prop="picture">
<el-table-column align="center" label="产品图片" prop="picture">
<template #default="scope">
<el-image
v-if="scope.row.picUrl"
:preview-src-list="[scope.row.picture]"
:src="scope.row.picUrl"
class="w-40px h-40px"
:preview-src-list="[scope.row.picture]"
/>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px"
/>
<el-table-column label="操作" align="center">
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="['iot:product:query']"
link
type="primary"
@click="openDetail(scope.row.id)"
v-hasPermi="['iot:product:query']"
>
查看
</el-button>
<el-button
v-hasPermi="['iot:product:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['iot:product:update']"
>
编辑
</el-button>
<el-button
v-hasPermi="['iot:product:delete']"
:disabled="scope.row.status === 1"
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['iot:product:delete']"
:disabled="scope.row.status === 1"
>
删除
</el-button>
@ -219,9 +227,9 @@
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
@ -230,7 +238,7 @@
<ProductForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import { ProductApi, ProductVO } from '@/api/iot/product/product'
import ProductForm from './ProductForm.vue'
@ -301,7 +309,7 @@ const openObjectModel = (item: ProductVO) => {
push({
name: 'IoTProductDetail',
params: { id: item.id },
query: { tab: 'function' }
query: { tab: 'thingModel' }
})
}