Skip to content

phsl / admin

Go to a project
Commit 4f1c79ba by puhui999
Options

【代码优化】IoT: 物模型

parent bfdf7f61
Showing with 128 additions and 155 deletions
src/utils/index.ts
import { toNumber } from 'lodash-es' import {toNumber} from 'lodash-es'
/** /**
* *
...@@ -118,7 +118,7 @@ export function toAnyString() { ...@@ -118,7 +118,7 @@ export function toAnyString() {
/** /**
* 生成指定长度的随机字符串 * 生成指定长度的随机字符串
* *
* @param length 字符串长度 * @param length 字符串长度
*/ */
export function generateRandomStr(length: number): string { export function generateRandomStr(length: number): string {
...@@ -459,7 +459,7 @@ export function jsonParse(str: string) { ...@@ -459,7 +459,7 @@ export function jsonParse(str: string) {
try { try {
return JSON.parse(str) return JSON.parse(str)
} catch (e) { } catch (e) {
console.error(`str[${str}] 不是一个 JSON 字符串`) // console.error(`str[${str}] 不是一个 JSON 字符串`)
return '' return ''
} }
} }
src/views/iot/device/device/detail/DeviceDetailsSimulator.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<el-tabs v-model="activeTab" type="border-card"> <el-tabs v-model="activeTab" type="border-card">
<!-- 上行指令调试 --> <!-- 上行指令调试 -->
<el-tab-pane label="上行指令调试" name="up"> <el-tab-pane label="上行指令调试" name="up">
<el-tabs v-model="subTab" v-if="activeTab === 'up'"> <el-tabs v-if="activeTab === 'up'" v-model="subTab">
<!-- 属性上报 --> <!-- 属性上报 -->
<el-tab-pane label="属性上报" name="property"> <el-tab-pane label="属性上报" name="property">
<ContentWrap> <ContentWrap>
...@@ -29,70 +29,11 @@ ...@@ -29,70 +29,11 @@
</el-table-column> </el-table-column>
<el-table-column align="left" label="数据定义" prop="identifier"> <el-table-column align="left" label="数据定义" prop="identifier">
<template #default="{ row }"> <template #default="{ row }">
<!-- 属性 --> <DataDefinition :data="row" />
<template v-if="row.type === ThingModelType.PROPERTY">
<!-- 非列表型：数值 -->
<div
v-if="
[
DataSpecsDataType.INT,
DataSpecsDataType.DOUBLE,
DataSpecsDataType.FLOAT
].includes(row.property.dataType)
"
>
取值范围：
{{ `${row.property.dataSpecs.min}~${row.property.dataSpecs.max}` }}
</div>
<!-- 非列表型：文本 -->
<div v-if="DataSpecsDataType.TEXT === row.property.dataType">
数据长度：{{ row.property.dataSpecs.length }}
</div>
<!-- 列表型: 数组、结构、时间（特殊） -->
<div
v-if="
[
DataSpecsDataType.ARRAY,
DataSpecsDataType.STRUCT,
DataSpecsDataType.DATE
].includes(row.property.dataType)
"
>
-
</div>
<!-- 列表型: 布尔值、枚举 -->
<div
v-if="
[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(
row.property.dataType
)
"
>
<div>
{{
DataSpecsDataType.BOOL === row.property.dataType
? '布尔值'
: '枚举值'
}}：
</div>
<div v-for="item in row.property.dataSpecsList" :key="item.value">
{{ `${item.name}-${item.value}` }}
</div>
</div>
<!-- TODO @super：要不要兜底下，没翻译的类型，直接展示 json？ -->
</template>
<!-- 服务 -->
<div v-if="row.type === ThingModelType.SERVICE">
调用方式：{{ getCallTypeByValue(row.service.callType) }}
</div>
<!-- 事件 -->
<div v-if="row.type === ThingModelType.EVENT">
事件类型：{{ getEventTypeByValue(row.event.type) }}
</div>
</template> </template>
</el-table-column> </el-table-column>
<!-- TODO @super：可以右侧 fixed --> <!-- TODO @super：可以右侧 fixed -->
<el-table-column label="值" align="center" width="80"> <el-table-column align="center" label="值" width="80">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.simulateValue" class="!w-60px" /> <el-input v-model="scope.row.simulateValue" class="!w-60px" />
</template> </template>
...@@ -100,7 +41,7 @@ ...@@ -100,7 +41,7 @@
</el-table> </el-table>
<!-- TODO @super：发送按钮，可以放在右侧哈。因为我们的 simulateValue 就在最右侧 --> <!-- TODO @super：发送按钮，可以放在右侧哈。因为我们的 simulateValue 就在最右侧 -->
<div class="mt-10px"> <div class="mt-10px">
<el-button type="primary" @click="handlePropertyReport"> 发送 </el-button> <el-button type="primary" @click="handlePropertyReport"> 发送</el-button>
</div> </div>
</ContentWrap> </ContentWrap>
</el-tab-pane> </el-tab-pane>
...@@ -151,7 +92,7 @@ ...@@ -151,7 +92,7 @@
<!-- 下行指令调试 --> <!-- 下行指令调试 -->
<!-- TODO @super：待实现 --> <!-- TODO @super：待实现 -->
<el-tab-pane label="下行指令调试" name="down"> <el-tab-pane label="下行指令调试" name="down">
<el-tabs v-model="subTab" v-if="activeTab === 'down'"> <el-tabs v-if="activeTab === 'down'" v-model="subTab">
<!-- 属性调试 --> <!-- 属性调试 -->
<el-tab-pane label="属性调试" name="propertyDebug"> <el-tab-pane label="属性调试" name="propertyDebug">
<ContentWrap> <ContentWrap>
...@@ -201,18 +142,13 @@ ...@@ -201,18 +142,13 @@
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import { ProductVO } from '@/api/iot/product/product' import { ProductVO } from '@/api/iot/product/product'
import { ThingModelApi, SimulatorData } from '@/api/iot/thingmodel' import { SimulatorData, ThingModelApi } from '@/api/iot/thingmodel'
import { DeviceApi, DeviceStateEnum, DeviceVO } from '@/api/iot/device/device' import { DeviceApi, DeviceStateEnum, DeviceVO } from '@/api/iot/device/device'
import DeviceDetailsLog from './DeviceDetailsLog.vue' import DeviceDetailsLog from './DeviceDetailsLog.vue'
import { import { getDataTypeOptionsLabel } from '@/views/iot/thingmodel/config'
DataSpecsDataType, import { DataDefinition } from '@/views/iot/thingmodel/components'
getCallTypeByValue,
getDataTypeOptionsLabel,
getEventTypeByValue,
ThingModelType
} from '@/views/iot/thingmodel/config'
const props = defineProps<{ const props = defineProps<{
product: ProductVO product: ProductVO
......
src/views/iot/thingmodel/ThingModelEvent.vue
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
label="事件类型" label="事件类型"
prop="event.type" prop="event.type"
> >
<!-- TODO @puhui999：默认选中，INFO 信息 -->
<el-radio-group v-model="thingModelEvent.type"> <el-radio-group v-model="thingModelEvent.type">
<el-radio :value="ThingModelEventType.INFO.value"> <el-radio :value="ThingModelEventType.INFO.value">
{{ ThingModelEventType.INFO.label }} {{ ThingModelEventType.INFO.label }}
...@@ -30,7 +29,8 @@ ...@@ -30,7 +29,8 @@
import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue' import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import { ThingModelEvent } from '@/api/iot/thingmodel' import { ThingModelEvent } from '@/api/iot/thingmodel'
import { ThingModelParamDirection, ThingModelEventType } from './config' import { ThingModelEventType, ThingModelParamDirection } from './config'
import { isEmpty } from '@/utils/is'
/** IoT 物模型事件 */ /** IoT 物模型事件 */
defineOptions({ name: 'ThingModelEvent' }) defineOptions({ name: 'ThingModelEvent' })
...@@ -38,6 +38,13 @@ defineOptions({ name: 'ThingModelEvent' }) ...@@ -38,6 +38,13 @@ defineOptions({ name: 'ThingModelEvent' })
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>() const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
const emits = defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<ThingModelEvent> const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<ThingModelEvent>
// 默认选中，INFO 信息
watch(
() => thingModelEvent.value.type,
(val: string) => isEmpty(val) && (thingModelEvent.value.type = ThingModelEventType.INFO.value),
{ immediate: true }
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/views/iot/thingmodel/ThingModelProperty.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<el-option <el-option
v-for="option in getDataTypeOptions" v-for="option in getDataTypeOptions"
:key="option.value" :key="option.value"
:label="option.label" :label="`${option.value}(${option.label})`"
:value="option.value" :value="option.value"
/> />
</el-select> </el-select>
...@@ -76,7 +76,6 @@ ...@@ -76,7 +76,6 @@
v-if="property.dataType === DataSpecsDataType.STRUCT" v-if="property.dataType === DataSpecsDataType.STRUCT"
v-model="property.dataSpecsList" v-model="property.dataSpecsList"
/> />
<!-- TODO @puhui999：默认选中第一个 -->
<el-form-item v-if="!isStructDataSpecs && !isParams" label="读写类型" prop="property.accessMode"> <el-form-item v-if="!isStructDataSpecs && !isParams" label="读写类型" prop="property.accessMode">
<el-radio-group v-model="property.accessMode"> <el-radio-group v-model="property.accessMode">
<el-radio :label="ThingModelAccessMode.READ_WRITE.value"> <el-radio :label="ThingModelAccessMode.READ_WRITE.value">
...@@ -104,6 +103,7 @@ import { ...@@ -104,6 +103,7 @@ import {
ThingModelStructDataSpecs ThingModelStructDataSpecs
} from './dataSpecs' } from './dataSpecs'
import { ThingModelProperty } from '@/api/iot/thingmodel' import { ThingModelProperty } from '@/api/iot/thingmodel'
import { isEmpty } from '@/utils/is'
/** IoT 物模型属性 */ /** IoT 物模型属性 */
defineOptions({ name: 'ThingModelProperty' }) defineOptions({ name: 'ThingModelProperty' })
...@@ -146,6 +146,18 @@ const handleChange = (dataType: any) => { ...@@ -146,6 +146,18 @@ const handleChange = (dataType: any) => {
break break
} }
} }
// 默认选中读写
watch(
() => property.value.accessMode,
(val: string) => {
if (props.isStructDataSpecs || props.isParams) {
return
}
isEmpty(val) && (property.value.accessMode = ThingModelAccessMode.READ_WRITE.value)
},
{ immediate: true }
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/views/iot/thingmodel/ThingModelService.vue
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
label="调用方式" label="调用方式"
prop="service.callType" prop="service.callType"
> >
<!-- TODO @puhui999：默认选中，ASYNC 异步 -->
<el-radio-group v-model="service.callType"> <el-radio-group v-model="service.callType">
<el-radio :value="ThingModelServiceCallType.ASYNC.value"> <el-radio :value="ThingModelServiceCallType.ASYNC.value">
{{ ThingModelServiceCallType.ASYNC.label }} {{ ThingModelServiceCallType.ASYNC.label }}
...@@ -34,6 +33,7 @@ import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue' ...@@ -34,6 +33,7 @@ import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
import { ThingModelService } from '@/api/iot/thingmodel' import { ThingModelService } from '@/api/iot/thingmodel'
import { ThingModelParamDirection, ThingModelServiceCallType } from './config' import { ThingModelParamDirection, ThingModelServiceCallType } from './config'
import { isEmpty } from '@/utils/is'
/** IoT 物模型服务 */ /** IoT 物模型服务 */
defineOptions({ name: 'ThingModelService' }) defineOptions({ name: 'ThingModelService' })
...@@ -41,6 +41,13 @@ defineOptions({ name: 'ThingModelService' }) ...@@ -41,6 +41,13 @@ defineOptions({ name: 'ThingModelService' })
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>() const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
const emits = defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService> const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>
// 默认选中，ASYNC 异步
watch(
() => service.value.callType,
(val: string) => isEmpty(val) && (service.value.callType = ThingModelServiceCallType.ASYNC.value),
{ immediate: true }
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/views/iot/thingmodel/components/DataDefinition.vue 0 → 100644
<template>
<!-- 属性 -->
<template v-if="data.type === ThingModelType.PROPERTY">
<!-- 非列表型：数值 -->
<div
v-if="
[DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
data.property.dataType
)
"
>
取值范围：{{ `${data.property.dataSpecs.min}~${data.property.dataSpecs.max}` }}
</div>
<!-- 非列表型：文本 -->
<div v-if="DataSpecsDataType.TEXT === data.property.dataType">
数据长度：{{ data.property.dataSpecs.length }}
</div>
<!-- 列表型: 数组、结构、时间（特殊） -->
<div
v-if="
[DataSpecsDataType.ARRAY, DataSpecsDataType.STRUCT, DataSpecsDataType.DATE].includes(
data.property.dataType
)
"
>
-
</div>
<!-- 列表型: 布尔值、枚举 -->
<div v-if="[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(data.property.dataType)">
<div> {{ DataSpecsDataType.BOOL === data.property.dataType ? '布尔值' : '枚举值' }}：</div>
<div v-for="item in data.property.dataSpecsList" :key="item.value">
{{ `${item.name}-${item.value}` }}
</div>
</div>
</template>
<!-- 服务 -->
<div v-if="data.type === ThingModelType.SERVICE">
调用方式：{{ getCallTypeByValue(data.service!.callType) }}
</div>
<!-- 事件 -->
<div v-if="data.type === ThingModelType.EVENT">
事件类型：{{ getEventTypeByValue(data.event!.type) }}
</div>
</template>
<script lang="ts" setup>
import {
DataSpecsDataType,
getCallTypeByValue,
getEventTypeByValue,
ThingModelType
} from '@/views/iot/thingmodel/config'
import { ThingModelData } from '@/api/iot/thingmodel'
/** 数据定义展示组件 */
defineOptions({ name: 'DataDefinition' })
defineProps<{ data: ThingModelData }>()
</script>
<style lang="scss" scoped></style>
src/views/iot/thingmodel/components/index.ts 0 → 100644
import DataDefinition from './DataDefinition.vue'
export { DataDefinition }
src/views/iot/thingmodel/config.ts
import { isEmpty } from '@/utils/is' import {isEmpty} from '@/utils/is'
/** dataSpecs 数值型数据结构 */ /** dataSpecs 数值型数据结构 */
export interface DataSpecsNumberDataVO { export interface DataSpecsNumberDataVO {
...@@ -21,7 +21,7 @@ export interface DataSpecsEnumOrBoolDataVO { ...@@ -21,7 +21,7 @@ export interface DataSpecsEnumOrBoolDataVO {
} }
/** 属性值的数据类型 */ /** 属性值的数据类型 */
// TODO @puhui999：这个枚举类，要不放到 dict 里？ // TODO @puhui999：这个枚举类，要不放到 dict 里？ 这个全是当常量来使用的不好放 dict 里 🤣
export const DataSpecsDataType = { export const DataSpecsDataType = {
INT: 'int', INT: 'int',
FLOAT: 'float', FLOAT: 'float',
...@@ -37,15 +37,15 @@ export const DataSpecsDataType = { ...@@ -37,15 +37,15 @@ export const DataSpecsDataType = {
/** 物体模型数据类型配置项 */ /** 物体模型数据类型配置项 */
// TODO @puhui999：搞到字典里；label 只使用（）部分，就是整数型、单精度浮点型等，这种哈。这样，拼接 value(label) 就可以渲染出来，通用性更强 // TODO @puhui999：搞到字典里；label 只使用（）部分，就是整数型、单精度浮点型等，这种哈。这样，拼接 value(label) 就可以渲染出来，通用性更强
export const dataTypeOptions = [ export const dataTypeOptions = [
{ value: DataSpecsDataType.INT, label: 'int32 (整数型)' }, { value: DataSpecsDataType.INT, label: '整数型' },
{ value: DataSpecsDataType.FLOAT, label: 'float (单精度浮点型)' }, { value: DataSpecsDataType.FLOAT, label: '单精度浮点型' },
{ value: DataSpecsDataType.DOUBLE, label: 'double (双精度浮点型)' }, { value: DataSpecsDataType.DOUBLE, label: '双精度浮点型' },
{ value: DataSpecsDataType.ENUM, label: 'enum(枚举型)' }, { value: DataSpecsDataType.ENUM, label: '枚举型' },
{ value: DataSpecsDataType.BOOL, label: 'bool (布尔型)' }, { value: DataSpecsDataType.BOOL, label: '布尔型' },
{ value: DataSpecsDataType.TEXT, label: 'text (文本型)' }, { value: DataSpecsDataType.TEXT, label: '文本型' },
{ value: DataSpecsDataType.DATE, label: 'date (时间型)' }, { value: DataSpecsDataType.DATE, label: '时间型' },
{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' }, { value: DataSpecsDataType.STRUCT, label: '结构体' },
{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' } { value: DataSpecsDataType.ARRAY, label: '数组' }
] ]
/** 获得物体模型数据类型配置项名称 */ /** 获得物体模型数据类型配置项名称 */
...@@ -53,7 +53,8 @@ export const getDataTypeOptionsLabel = (value: string) => { ...@@ -53,7 +53,8 @@ export const getDataTypeOptionsLabel = (value: string) => {
if (isEmpty(value)) { if (isEmpty(value)) {
return value return value
} }
return dataTypeOptions.find((option) => option.value === value)?.label const dataType = dataTypeOptions.find((option) => option.value === value)
return dataType && `${dataType.value}(${dataType.label})`
} }
// IOT 产品物模型类型枚举类 // IOT 产品物模型类型枚举类
......
src/views/iot/thingmodel/dataSpecs/ThingModelArrayDataSpecs.vue
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange"> <el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
<template v-for="item in dataTypeOptions" :key="item.value"> <template v-for="item in dataTypeOptions" :key="item.value">
<el-radio <el-radio
class="w-1/3"
v-if=" v-if="
!( !(
[DataSpecsDataType.ENUM, DataSpecsDataType.ARRAY, DataSpecsDataType.DATE] as any[] [DataSpecsDataType.ENUM, DataSpecsDataType.ARRAY, DataSpecsDataType.DATE] as any[]
).includes(item.value) ).includes(item.value)
" "
:value="item.value" :value="item.value"
class="w-1/3"
> >
{{ item.label }} {{ `${item.value}(${item.label})` }}
</el-radio> </el-radio>
</template> </template>
</el-radio-group> </el-radio-group>
......
src/views/iot/thingmodel/dataSpecs/ThingModelStructDataSpecs.vue
...@@ -118,6 +118,9 @@ const submitForm = async () => { ...@@ -118,6 +118,9 @@ const submitForm = async () => {
} }
// 查找是否已有相同 identifier 的项 // 查找是否已有相同 identifier 的项
if (isEmpty(dataSpecsList.value)) {
dataSpecsList.value = []
}
const existingIndex = dataSpecsList.value.findIndex( const existingIndex = dataSpecsList.value.findIndex(
(spec) => spec.identifier === data.identifier (spec) => spec.identifier === data.identifier
) )
......
src/views/iot/thingmodel/index.vue
...@@ -64,59 +64,7 @@ ...@@ -64,59 +64,7 @@
</el-table-column> </el-table-column>
<el-table-column align="left" label="数据定义" prop="identifier"> <el-table-column align="left" label="数据定义" prop="identifier">
<template #default="{ row }"> <template #default="{ row }">
<!-- 属性 --> <DataDefinition :data="row" />
<template v-if="row.type === ThingModelType.PROPERTY">
<!-- 非列表型：数值 -->
<div
v-if="
[
DataSpecsDataType.INT,
DataSpecsDataType.DOUBLE,
DataSpecsDataType.FLOAT
].includes(row.property.dataType)
"
>
<!-- TODO @puhui999：把数据定义，抽成一个方法？这样，其它地方也可以复用哈。 -->
取值范围：{{ `${row.property.dataSpecs.min}~${row.property.dataSpecs.max}` }}
</div>
<!-- 非列表型：文本 -->
<div v-if="DataSpecsDataType.TEXT === row.property.dataType">
数据长度：{{ row.property.dataSpecs.length }}
</div>
<!-- 列表型: 数组、结构、时间（特殊） -->
<div
v-if="
[
DataSpecsDataType.ARRAY,
DataSpecsDataType.STRUCT,
DataSpecsDataType.DATE
].includes(row.property.dataType)
"
>
-
</div>
<!-- 列表型: 布尔值、枚举 -->
<div
v-if="
[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(row.property.dataType)
"
>
<div>
{{ DataSpecsDataType.BOOL === row.property.dataType ? '布尔值' : '枚举值' }}：
</div>
<div v-for="item in row.property.dataSpecsList" :key="item.value">
{{ `${item.name}-${item.value}` }}
</div>
</div>
</template>
<!-- 服务 -->
<div v-if="row.type === ThingModelType.SERVICE">
调用方式：{{ getCallTypeByValue(row.service.callType) }}
</div>
<!-- 事件 -->
<div v-if="row.type === ThingModelType.EVENT">
事件类型：{{ getEventTypeByValue(row.event.type) }}
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="操作"> <el-table-column align="center" label="操作">
...@@ -158,13 +106,8 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' ...@@ -158,13 +106,8 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import ThingModelForm from './ThingModelForm.vue' import ThingModelForm from './ThingModelForm.vue'
import { ProductVO } from '@/api/iot/product/product' import { ProductVO } from '@/api/iot/product/product'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants' import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { import { getDataTypeOptionsLabel } from './config'
DataSpecsDataType, import { DataDefinition } from './components'
getCallTypeByValue,
getDataTypeOptionsLabel,
getEventTypeByValue,
ThingModelType
} from './config'
defineOptions({ name: 'IoTThingModel' }) defineOptions({ name: 'IoTThingModel' })
......
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