admin-vue3/src/views/iot/thingmodel/ThingModelService.vue

140 lines
3.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!-- 产品的物模型表单service -->
<template>
<el-form-item
:rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
label="调用方式"
prop="service.callType"
>
<el-radio-group v-model="service.callType">
<el-radio
v-for="callType in Object.values(IoTThingModelServiceCallTypeEnum)"
:key="callType.value"
:value="callType.value"
>
{{ callType.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="输入参数">
<ThingModelInputOutputParam
v-model="service.inputParams"
:direction="IoTThingModelParamDirectionEnum.INPUT"
/>
</el-form-item>
<el-form-item label="输出参数">
<ThingModelInputOutputParam
v-model="service.outputParams"
:direction="IoTThingModelParamDirectionEnum.OUTPUT"
/>
</el-form-item>
<!-- Modbus 配置 -->
<el-divider content-position="left">Modbus 配置(可选)</el-divider>
<el-form-item label="完整帧">
<el-input
v-model="service.modbusConfig.fullFrame"
placeholder="十六进制完整帧40050000FF00832B"
clearable
/>
<div class="form-item-tip">
如果配置了完整帧,将直接使用该帧发送命令(推荐用于固定命令)
</div>
</el-form-item>
<el-form-item label="功能码">
<el-input-number
v-model="service.modbusConfig.functionCode"
:min="1"
:max="127"
placeholder="如5"
clearable
/>
</el-form-item>
<el-form-item label="寄存器地址">
<el-input-number
v-model="service.modbusConfig.registerAddress"
:min="0"
:max="65535"
placeholder="如0"
clearable
/>
</el-form-item>
<el-form-item label="写入值">
<el-input-number
v-model="service.modbusConfig.writeValue"
placeholder="写入值"
/>
</el-form-item>
<!-- 字节序 -->
<el-form-item label="字节序" prop="service.modbusConfig.byteOrder">
<el-radio-group v-model="service.modbusConfig.byteOrder">
<el-radio
v-for="order in Object.values(IoTModbusByteOrderEnum)"
:key="order.value"
:label="order.value"
>
{{ order.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
<script lang="ts" setup>
import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
import { useVModel } from '@vueuse/core'
import { ThingModelService } from '@/api/iot/thingmodel'
import { isEmpty } from '@/utils/is'
import {
IoTThingModelParamDirectionEnum,
IoTThingModelServiceCallTypeEnum,
IoTModbusByteOrderEnum
} from '@/views/iot/utils/constants'
/** IoT 物模型服务 */
defineOptions({ name: 'ThingModelService' })
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
const emits = defineEmits(['update:modelValue'])
const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>
/** 初始化 modbusConfig */
if (!service.value.modbusConfig) {
service.value.modbusConfig = {
functionCode: undefined,
registerAddress: undefined,
writeValue: undefined,
registerCount: undefined,
fullFrame: '',
crcHex: '',
byteOrder: IoTModbusByteOrderEnum.BIG_ENDIAN.value // 默认大端模式
}
} else if (!service.value.modbusConfig.byteOrder) {
// 向下兼容:如果没有 byteOrder默认设置为大端模式
service.value.modbusConfig.byteOrder = IoTModbusByteOrderEnum.BIG_ENDIAN.value
}
/** 默认选中ASYNC 异步 */
watch(
() => service.value.callType,
(val: string) =>
isEmpty(val) && (service.value.callType = IoTThingModelServiceCallTypeEnum.ASYNC.value),
{ immediate: true }
)
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
.el-form-item {
margin-bottom: 0;
}
}
.form-item-tip {
font-size: 12px;
color: #999;
margin-top: 4px;
line-height: 1.5;
}
</style>