smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: iot

Browse Source
This commit is contained in:
xingyu4j
2025-10-13 10:17:19 +08:00
parent 5f88a54d60
commit 4c4cd57ef0
27 changed files with 857 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/src/api/iot/rule/scene/index.ts
View File

@@ -90,6 +90,7 @@ export interface TriggerCondition {
operator?: string; operator?: string;
value?: any; value?: any;
type?: string; type?: string;
param?: string;
} }
/** IoT 场景联动规则动作 */ /** IoT 场景联动规则动作 */

4
apps/web-antd/src/api/iot/thingmodel/index.ts
View File

@@ -114,13 +114,13 @@ export interface ThingModelFormRules {
} }
/** 验证布尔型名称 */ /** 验证布尔型名称 */
export const validateBoolName = (_rule: any, value: any, callback: any) => { export function validateBoolName(_rule: any, value: any, callback: any) {
if (value) { if (value) {
callback(); callback();
} else { } else {
callback(new Error('枚举描述不能为空')); callback(new Error('枚举描述不能为空'));
} }
}; }
/** 查询产品物模型分页 */ /** 查询产品物模型分页 */
export function getThingModelPage(params: PageParam) { export function getThingModelPage(params: PageParam) {

80
apps/web-antd/src/views/iot/rule/scene/form/RuleSceneForm.vue
View File

@@ -1,9 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { CommonStatusEnum } from '@/utils/constants'; import type { IotSceneRule } from '#/api/iot/rule/scene';
import { useVModel } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import { IotSceneRule, RuleSceneApi } from '#/api/iot/rule/scene'; import { computed, nextTick, reactive, ref, watch } from 'vue';
import { CommonStatusEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import { Button, Drawer, Form, message } from 'ant-design-vue';
import { createSceneRule, updateSceneRule } from '#/api/iot/rule/scene';
import { import {
IotRuleSceneActionTypeEnum, IotRuleSceneActionTypeEnum,
IotRuleSceneTriggerTypeEnum, IotRuleSceneTriggerTypeEnum,
@@ -37,14 +43,14 @@ const drawerVisible = useVModel(props, 'modelValue', emit); // 抽屉显示状
* 创建默认的表单数据 * 创建默认的表单数据
* @returns 默认表单数据对象 * @returns 默认表单数据对象
*/ */
const createDefaultFormData = (): IotSceneRule => { function createDefaultFormData(): IotSceneRule {
return { return {
name: '', name: '',
description: '', description: '',
status: CommonStatusEnum.ENABLE, // 默认启用状态 status: CommonStatusEnum.ENABLE, // 默认启用状态
triggers: [ triggers: [
{ {
type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST, type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST.toString(),
productId: undefined, productId: undefined,
deviceId: undefined, deviceId: undefined,
identifier: undefined, identifier: undefined,
@@ -56,7 +62,7 @@ const createDefaultFormData = (): IotSceneRule => {
], ],
actions: [], actions: [],
}; };
}; }
const formRef = ref(); // 表单引用 const formRef = ref(); // 表单引用
const formData = ref<IotSceneRule>(createDefaultFormData()); // 表单数据 const formData = ref<IotSceneRule>(createDefaultFormData()); // 表单数据
@@ -67,7 +73,7 @@ const formData = ref<IotSceneRule>(createDefaultFormData()); // 表单数据
* @param value 校验值 * @param value 校验值
* @param callback 回调函数 * @param callback 回调函数
*/ */
const validateTriggers = (_rule: any, value: any, callback: any) => { function validateTriggers(_rule: any, value: any, callback: any) {
if (!value || !Array.isArray(value) || value.length === 0) { if (!value || !Array.isArray(value) || value.length === 0) {
callback(new Error('至少需要一个触发器')); callback(new Error('至少需要一个触发器'));
return; return;
@@ -119,7 +125,7 @@ const validateTriggers = (_rule: any, value: any, callback: any) => {
} }
callback(); callback();
}; }
/** /**
* 执行器校验器 * 执行器校验器
@@ -127,7 +133,7 @@ const validateTriggers = (_rule: any, value: any, callback: any) => {
* @param value 校验值 * @param value 校验值
* @param callback 回调函数 * @param callback 回调函数
*/ */
const validateActions = (_rule: any, value: any, callback: any) => { function validateActions(_rule: any, value: any, callback: any) {
if (!value || !Array.isArray(value) || value.length === 0) { if (!value || !Array.isArray(value) || value.length === 0) {
callback(new Error('至少需要一个执行器')); callback(new Error('至少需要一个执行器'));
return; return;
@@ -181,7 +187,7 @@ const validateActions = (_rule: any, value: any, callback: any) => {
} }
callback(); callback();
}; }
const formRules = reactive({ const formRules = reactive({
name: [ name: [
@@ -224,7 +230,7 @@ const drawerTitle = computed(() =>
); // 抽屉标题 ); // 抽屉标题
/** 提交表单 */ /** 提交表单 */
const handleSubmit = async () => { async function handleSubmit() {
// 校验表单 // 校验表单
if (!formRef.value) return; if (!formRef.value) return;
const valid = await formRef.value.validate(); const valid = await formRef.value.validate();
@@ -235,12 +241,12 @@ const handleSubmit = async () => {
try { try {
if (isEdit.value) { if (isEdit.value) {
// 更新场景联动规则 // 更新场景联动规则
await RuleSceneApi.updateRuleScene(formData.value); await updateSceneRule(formData.value);
ElMessage.success('更新成功'); message.success('更新成功');
} else { } else {
// 创建场景联动规则 // 创建场景联动规则
await RuleSceneApi.createRuleScene(formData.value); await createSceneRule(formData.value);
ElMessage.success('创建成功'); message.success('创建成功');
} }
// 关闭抽屉并触发成功事件 // 关闭抽屉并触发成功事件
@@ -248,11 +254,11 @@ const handleSubmit = async () => {
emit('success'); emit('success');
} catch (error) { } catch (error) {
console.error('保存失败:', error); console.error('保存失败:', error);
ElMessage.error(isEdit.value ? '更新失败' : '创建失败'); message.error(isEdit.value ? '更新失败' : '创建失败');
} finally { } finally {
submitLoading.value = false; submitLoading.value = false;
} }
}; }
/** 处理抽屉关闭事件 */ /** 处理抽屉关闭事件 */
const handleClose = () => { const handleClose = () => {
@@ -260,14 +266,14 @@ const handleClose = () => {
}; };
/** 初始化表单数据 */ /** 初始化表单数据 */
const initFormData = () => { function initFormData() {
if (props.ruleScene) { if (props.ruleScene) {
// 编辑模式：数据结构已对齐，直接使用后端数据 // 编辑模式：数据结构已对齐，直接使用后端数据
isEdit.value = true; isEdit.value = true;
formData.value = { formData.value = {
...props.ruleScene, ...props.ruleScene,
// 确保触发器数组不为空 // 确保触发器数组不为空
triggers: props.ruleScene.triggers?.length triggers: (props.ruleScene.triggers?.length as any)
? props.ruleScene.triggers ? props.ruleScene.triggers
: [ : [
{ {
@@ -289,7 +295,7 @@ const initFormData = () => {
isEdit.value = false; isEdit.value = false;
formData.value = createDefaultFormData(); formData.value = createDefaultFormData();
} }
}; }
/** 监听抽屉显示 */ /** 监听抽屉显示 */
watch(drawerVisible, async (visible) => { watch(drawerVisible, async (visible) => {
@@ -314,43 +320,39 @@ watch(
</script> </script>
<template> <template>
<el-drawer <Drawer
v-model="drawerVisible" v-model="drawerVisible"
:title="drawerTitle" :title="drawerTitle"
size="80%" width="80%"
direction="rtl" direction="rtl"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
@close="handleClose" @close="handleClose"
> >
<el-form <Form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="formRules" :rules="formRules as any"
label-width="110px" label-width="110px"
> >
<!-- 基础信息配置 --> <!-- 基础信息配置 -->
<BasicInfoSection v-model="formData" :rules="formRules" /> <BasicInfoSection v-model="formData" :rules="formRules" />
<!-- 触发器配置 --> <!-- 触发器配置 -->
<TriggerSection v-model:triggers="formData.triggers" /> <TriggerSection v-model:triggers="formData.triggers as any" />
<!-- 执行器配置 --> <!-- 执行器配置 -->
<ActionSection v-model:actions="formData.actions" /> <ActionSection v-model:actions="formData.actions as any" />
</el-form> </Form>
<template #footer> <template #footer>
<div class="drawer-footer"> <div class="drawer-footer">
<el-button <Button :disabled="submitLoading" type="primary" @click="handleSubmit">
:disabled="submitLoading" <IconifyIcon icon="ep:check" />
type="primary"
@click="handleSubmit"
>
<Icon icon="ep:check" />
确 定 确 定
</el-button> </Button>
<el-button @click="handleClose"> <Button @click="handleClose">
<Icon icon="ep:close" /> <IconifyIcon icon="ep:close" />
取 消 取 消
</el-button> </Button>
</div> </div>
</template> </template>
</el-drawer> </Drawer>
</template> </template>

77
apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
View File

@@ -2,9 +2,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { TriggerCondition } from '#/api/iot/rule/scene'; import type { TriggerCondition } from '#/api/iot/rule/scene';
import { computed } from 'vue'; import { computed, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import {
Col,
DatePicker,
Form,
Row,
Select,
Tag,
TimePicker,
} from 'ant-design-vue';
import { IotRuleSceneTriggerTimeOperatorEnum } from '#/views/iot/utils/constants'; import { IotRuleSceneTriggerTimeOperatorEnum } from '#/views/iot/utils/constants';
@@ -108,15 +119,15 @@ const timeValue2 = computed(() => {
* @param field 字段名 * @param field 字段名
* @param value 字段值 * @param value 字段值
*/ */
const updateConditionField = (field: any, value: any) => { function updateConditionField(field: any, value: any) {
condition.value[field] = value; condition.value[field] = value;
}; }
/** /**
* 处理第一个时间值变化 * 处理第一个时间值变化
* @param value 时间值 * @param value 时间值
*/ */
const handleTimeValueChange = (value: string) => { function handleTimeValueChange(value: string) {
const currentParams = condition.value.param const currentParams = condition.value.param
? condition.value.param.split(',') ? condition.value.param.split(',')
: []; : [];
@@ -126,19 +137,19 @@ const handleTimeValueChange = (value: string) => {
condition.value.param = needsSecondTimeInput.value condition.value.param = needsSecondTimeInput.value
? currentParams.slice(0, 2).join(',') ? currentParams.slice(0, 2).join(',')
: currentParams[0]; : currentParams[0];
}; }
/** /**
* 处理第二个时间值变化 * 处理第二个时间值变化
* @param value 时间值 * @param value 时间值
*/ */
const handleTimeValue2Change = (value: string) => { function handleTimeValue2Change(value: string) {
const currentParams = condition.value.param const currentParams = condition.value.param
? condition.value.param.split(',') ? condition.value.param.split(',')
: ['']; : [''];
currentParams[1] = value || ''; currentParams[1] = value || '';
condition.value.param = currentParams.slice(0, 2).join(','); condition.value.param = currentParams.slice(0, 2).join(',');
}; }
/** 监听操作符变化，清理不相关的时间值 */ /** 监听操作符变化，清理不相关的时间值 */
watch( watch(
@@ -160,19 +171,19 @@ watch(
<template> <template>
<div class="gap-16px flex flex-col"> <div class="gap-16px flex flex-col">
<el-row :gutter="16"> <Row :gutter="16">
<!-- 时间操作符选择 --> <!-- 时间操作符选择 -->
<el-col :span="8"> <Col :span="8">
<el-form-item label="时间条件" required> <Form.Item label="时间条件" required>
<el-select <Select
:model-value="condition.operator" :model-value="condition.operator"
@update:model-value=" @update:model-value="
(value) => updateConditionField('operator', value) (value: any) => updateConditionField('operator', value)
" "
placeholder="请选择时间条件" placeholder="请选择时间条件"
class="w-full" class="w-full"
> >
<el-option <Select.Option
v-for="option in timeOperatorOptions" v-for="option in timeOperatorOptions"
:key="option.value" :key="option.value"
:label="option.label" :label="option.label"
@@ -180,22 +191,22 @@ watch(
> >
<div class="flex w-full items-center justify-between"> <div class="flex w-full items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<Icon :icon="option.icon" :class="option.iconClass" /> <IconifyIcon :icon="option.icon" :class="option.iconClass" />
<span>{{ option.label }}</span> <span>{{ option.label }}</span>
</div> </div>
<el-tag :type="option.tag as any" size="small"> <Tag :type="option.tag as any" size="small">
{{ option.category }} {{ option.category }}
</el-tag> </Tag>
</div> </div>
</el-option> </Select.Option>
</el-select> </Select>
</el-form-item> </Form.Item>
</el-col> </Col>
<!-- 时间值输入 --> <!-- 时间值输入 -->
<el-col :span="8"> <Col :span="8">
<el-form-item label="时间值" required> <Form.Item label="时间值" required>
<el-time-picker <TimePicker
v-if="needsTimeInput" v-if="needsTimeInput"
:model-value="timeValue" :model-value="timeValue"
@update:model-value="handleTimeValueChange" @update:model-value="handleTimeValueChange"
@@ -204,7 +215,7 @@ watch(
value-format="HH:mm:ss" value-format="HH:mm:ss"
class="w-full" class="w-full"
/> />
<el-date-picker <DatePicker
v-else-if="needsDateInput" v-else-if="needsDateInput"
:model-value="timeValue" :model-value="timeValue"
@update:model-value="handleTimeValueChange" @update:model-value="handleTimeValueChange"
@@ -217,13 +228,13 @@ watch(
<div v-else class="text-14px text-[var(--el-text-color-placeholder)]"> <div v-else class="text-14px text-[var(--el-text-color-placeholder)]">
无需设置时间值 无需设置时间值
</div> </div>
</el-form-item> </Form.Item>
</el-col> </Col>
<!-- 第二个时间值（范围条件） --> <!-- 第二个时间值（范围条件） -->
<el-col :span="8" v-if="needsSecondTimeInput"> <Col :span="8" v-if="needsSecondTimeInput">
<el-form-item label="结束时间" required> <Form.Item label="结束时间" required>
<el-time-picker <TimePicker
v-if="needsTimeInput" v-if="needsTimeInput"
:model-value="timeValue2" :model-value="timeValue2"
@update:model-value="handleTimeValue2Change" @update:model-value="handleTimeValue2Change"
@@ -232,7 +243,7 @@ watch(
value-format="HH:mm:ss" value-format="HH:mm:ss"
class="w-full" class="w-full"
/> />
<el-date-picker <DatePicker
v-else v-else
:model-value="timeValue2" :model-value="timeValue2"
@update:model-value="handleTimeValue2Change" @update:model-value="handleTimeValue2Change"
@@ -242,8 +253,8 @@ watch(
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
class="w-full" class="w-full"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
</el-row> </Row>
</div> </div>
</template> </template>

105
apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
View File

@@ -6,9 +6,14 @@ import type {
ThingModelService, ThingModelService,
} from '#/api/iot/thingmodel'; } from '#/api/iot/thingmodel';
import { useVModel } from '@vueuse/core'; import { computed, onMounted, ref, watch } from 'vue';
import { ThingModelApi } from '#/api/iot/thingmodel'; import { isObject } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import { Col, Form, Row, Select, Tag } from 'ant-design-vue';
import { getThingModelListByProductId } from '#/api/iot/thingmodel';
import { import {
IoTDataSpecsDataTypeEnum, IoTDataSpecsDataTypeEnum,
IotRuleSceneActionTypeEnum, IotRuleSceneActionTypeEnum,
@@ -42,7 +47,7 @@ const loadingServices = ref(false); // 服务加载状态
const paramsValue = computed({ const paramsValue = computed({
get: () => { get: () => {
// 如果 params 是对象，转换为 JSON 字符串（兼容旧数据） // 如果 params 是对象，转换为 JSON 字符串（兼容旧数据）
if (action.value.params && typeof action.value.params === 'object') { if (action.value.params && isObject(action.value.params)) {
return JSON.stringify(action.value.params, null, 2); return JSON.stringify(action.value.params, null, 2);
} }
// 如果 params 已经是字符串，直接返回 // 如果 params 已经是字符串，直接返回
@@ -56,19 +61,25 @@ const paramsValue = computed({
// 计算属性：是否为属性设置类型 // 计算属性：是否为属性设置类型
const isPropertySetAction = computed(() => { const isPropertySetAction = computed(() => {
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET; return (
action.value.type ===
IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString()
);
}); });
// 计算属性：是否为服务调用类型 // 计算属性：是否为服务调用类型
const isServiceInvokeAction = computed(() => { const isServiceInvokeAction = computed(() => {
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE; return (
action.value.type ===
IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE.toString()
);
}); });
/** /**
* 处理产品变化事件 * 处理产品变化事件
* @param productId 产品 ID * @param productId 产品 ID
*/ */
const handleProductChange = (productId?: number) => { function handleProductChange(productId?: number) {
// 当产品变化时，清空设备选择和参数配置 // 当产品变化时，清空设备选择和参数配置
if (action.value.productId !== productId) { if (action.value.productId !== productId) {
action.value.deviceId = undefined; action.value.deviceId = undefined;
@@ -86,24 +97,24 @@ const handleProductChange = (productId?: number) => {
loadServiceList(productId); loadServiceList(productId);
} }
} }
}; }
/** /**
* 处理设备变化事件 * 处理设备变化事件
* @param deviceId 设备 ID * @param deviceId 设备 ID
*/ */
const handleDeviceChange = (deviceId?: number) => { function handleDeviceChange(deviceId?: number) {
// 当设备变化时，清空参数配置 // 当设备变化时，清空参数配置
if (action.value.deviceId !== deviceId) { if (action.value.deviceId !== deviceId) {
action.value.params = ''; // 清空参数，保存为空字符串 action.value.params = ''; // 清空参数，保存为空字符串
} }
}; }
/** /**
* 处理服务变化事件 * 处理服务变化事件
* @param serviceIdentifier 服务标识符 * @param serviceIdentifier 服务标识符
*/ */
const handleServiceChange = (serviceIdentifier?: string) => { function handleServiceChange(serviceIdentifier?: any) {
// 根据服务标识符找到对应的服务对象 // 根据服务标识符找到对应的服务对象
const service = const service =
serviceList.value.find((s) => s.identifier === serviceIdentifier) || null; serviceList.value.find((s) => s.identifier === serviceIdentifier) || null;
@@ -121,29 +132,29 @@ const handleServiceChange = (serviceIdentifier?: string) => {
// 将默认参数转换为 JSON 字符串保存 // 将默认参数转换为 JSON 字符串保存
action.value.params = JSON.stringify(defaultParams, null, 2); action.value.params = JSON.stringify(defaultParams, null, 2);
} }
}; }
/** /**
* 获取物模型TSL数据 * 获取物模型TSL数据
* @param productId 产品ID * @param productId 产品ID
* @returns 物模型TSL数据 * @returns 物模型TSL数据
*/ */
const getThingModelTSL = async (productId: number) => { async function getThingModelTSL(productId: number) {
if (!productId) return null; if (!productId) return null;
try { try {
return await ThingModelApi.getThingModelTSLByProductId(productId); return await getThingModelListByProductId(productId);
} catch (error) { } catch (error) {
console.error('获取物模型TSL数据失败:', error); console.error('获取物模型TSL数据失败:', error);
return null; return null;
} }
}; }
/** /**
* 加载物模型属性（可写属性） * 加载物模型属性（可写属性）
* @param productId 产品ID * @param productId 产品ID
*/ */
const loadThingModelProperties = async (productId: number) => { async function loadThingModelProperties(productId: number) {
if (!productId) { if (!productId) {
thingModelProperties.value = []; thingModelProperties.value = [];
return; return;
@@ -171,13 +182,13 @@ const loadThingModelProperties = async (productId: number) => {
} finally { } finally {
loadingThingModel.value = false; loadingThingModel.value = false;
} }
}; }
/** /**
* 加载服务列表 * 加载服务列表
* @param productId 产品ID * @param productId 产品ID
*/ */
const loadServiceList = async (productId: number) => { async function loadServiceList(productId: number) {
if (!productId) { if (!productId) {
serviceList.value = []; serviceList.value = [];
return; return;
@@ -199,17 +210,17 @@ const loadServiceList = async (productId: number) => {
} finally { } finally {
loadingServices.value = false; loadingServices.value = false;
} }
}; }
/** /**
* 从TSL加载服务信息（用于编辑模式回显） * 从TSL加载服务信息（用于编辑模式回显）
* @param productId 产品ID * @param productId 产品ID
* @param serviceIdentifier 服务标识符 * @param serviceIdentifier 服务标识符
*/ */
const loadServiceFromTSL = async ( async function loadServiceFromTSL(
productId: number, productId: number,
serviceIdentifier: string, serviceIdentifier: string,
) => { ) {
// 先加载服务列表 // 先加载服务列表
await loadServiceList(productId); await loadServiceList(productId);
@@ -220,14 +231,14 @@ const loadServiceFromTSL = async (
if (service) { if (service) {
selectedService.value = service; selectedService.value = service;
} }
}; }
/** /**
* 根据参数类型获取默认值 * 根据参数类型获取默认值
* @param param 参数对象 * @param param 参数对象
* @returns 默认值 * @returns 默认值
*/ */
const getDefaultValueForParam = (param: any) => { function getDefaultValueForParam(param: any) {
switch (param.dataType) { switch (param.dataType) {
case IoTDataSpecsDataTypeEnum.BOOL: { case IoTDataSpecsDataTypeEnum.BOOL: {
return false; return false;
@@ -256,14 +267,14 @@ const getDefaultValueForParam = (param: any) => {
return ''; return '';
} }
} }
}; }
const isInitialized = ref(false); // 防止重复初始化的标志 const isInitialized = ref(false); // 防止重复初始化的标志
/** /**
* 初始化组件数据 * 初始化组件数据
*/ */
const initializeComponent = async () => { async function initializeComponent() {
if (isInitialized.value) return; if (isInitialized.value) return;
const currentAction = action.value; const currentAction = action.value;
@@ -285,7 +296,7 @@ const initializeComponent = async () => {
} }
isInitialized.value = true; isInitialized.value = true;
}; }
/** 组件初始化 */ /** 组件初始化 */
onMounted(() => { onMounted(() => {
@@ -329,30 +340,30 @@ watch(
<template> <template>
<div class="gap-16px flex flex-col"> <div class="gap-16px flex flex-col">
<!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 --> <!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
<el-row :gutter="16"> <Row :gutter="16">
<el-col :span="12"> <Col :span="12">
<el-form-item label="产品" required> <Form.Item label="产品" required>
<ProductSelector <ProductSelector
v-model="action.productId" v-model="action.productId"
@change="handleProductChange" @change="handleProductChange"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
<el-col :span="12"> <Col :span="12">
<el-form-item label="设备" required> <Form.Item label="设备" required>
<DeviceSelector <DeviceSelector
v-model="action.deviceId" v-model="action.deviceId"
:product-id="action.productId" :product-id="action.productId"
@change="handleDeviceChange" @change="handleDeviceChange"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
</el-row> </Row>
<!-- 服务选择 - 服务调用类型时显示 --> <!-- 服务选择 - 服务调用类型时显示 -->
<div v-if="action.productId && isServiceInvokeAction" class="space-y-16px"> <div v-if="action.productId && isServiceInvokeAction" class="space-y-16px">
<el-form-item label="服务" required> <Form.Item label="服务" required>
<el-select <Select
v-model="action.identifier" v-model="action.identifier"
placeholder="请选择服务" placeholder="请选择服务"
filterable filterable
@@ -361,7 +372,7 @@ watch(
:loading="loadingServices" :loading="loadingServices"
@change="handleServiceChange" @change="handleServiceChange"
> >
<el-option <Select.Option
v-for="service in serviceList" v-for="service in serviceList"
:key="service.identifier" :key="service.identifier"
:label="service.name" :label="service.name"
@@ -369,41 +380,41 @@ watch(
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span>{{ service.name }}</span> <span>{{ service.name }}</span>
<el-tag <Tag
:type="service.callType === 'sync' ? 'primary' : 'success'" :type="service.callType === 'sync' ? 'primary' : 'success'"
size="small" size="small"
> >
{{ service.callType === 'sync' ? '同步' : '异步' }} {{ service.callType === 'sync' ? '同步' : '异步' }}
</el-tag> </Tag>
</div> </div>
</el-option> </Select.Option>
</el-select> </Select>
</el-form-item> </Form.Item>
<!-- 服务参数配置 --> <!-- 服务参数配置 -->
<div v-if="action.identifier" class="space-y-16px"> <div v-if="action.identifier" class="space-y-16px">
<el-form-item label="服务参数" required> <Form.Item label="服务参数" required>
<JsonParamsInput <JsonParamsInput
v-model="paramsValue" v-model="paramsValue"
type="service" type="service"
:config="{ service: selectedService } as any" :config="{ service: selectedService } as any"
placeholder="请输入 JSON 格式的服务参数" placeholder="请输入 JSON 格式的服务参数"
/> />
</el-form-item> </Form.Item>
</div> </div>
</div> </div>
<!-- 控制参数配置 - 属性设置类型时显示 --> <!-- 控制参数配置 - 属性设置类型时显示 -->
<div v-if="action.productId && isPropertySetAction" class="space-y-16px"> <div v-if="action.productId && isPropertySetAction" class="space-y-16px">
<!-- 参数配置 --> <!-- 参数配置 -->
<el-form-item label="参数" required> <Form.Item label="参数" required>
<JsonParamsInput <JsonParamsInput
v-model="paramsValue" v-model="paramsValue"
type="property" type="property"
:config="{ properties: thingModelProperties }" :config="{ properties: thingModelProperties }"
placeholder="请输入 JSON 格式的控制参数" placeholder="请输入 JSON 格式的控制参数"
/> />
</el-form-item> </Form.Item>
</div> </div>
</div> </div>
</template> </template>

88
apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
View File

@@ -1,8 +1,13 @@
<!-- 设备触发配置组件 --> <!-- 设备触发配置组件 -->
<script setup lang="ts"> <script setup lang="ts">
import type { Trigger } from '#/api/iot/rule/scene'; import type { RuleSceneApi } from '#/api/iot/rule/scene';
import { nextTick } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Button, Tag } from 'ant-design-vue';
import MainConditionInnerConfig from './MainConditionInnerConfig.vue'; import MainConditionInnerConfig from './MainConditionInnerConfig.vue';
import SubConditionGroupConfig from './SubConditionGroupConfig.vue'; import SubConditionGroupConfig from './SubConditionGroupConfig.vue';
@@ -12,12 +17,12 @@ defineOptions({ name: 'DeviceTriggerConfig' });
const props = defineProps<{ const props = defineProps<{
index: number; index: number;
modelValue: Trigger; modelValue: RuleSceneApi.Trigger;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', value: Trigger): void; (e: 'update:modelValue', value: RuleSceneApi.Trigger): void;
(e: 'trigger-type-change', type: number): void; (e: 'triggerTypeChange', type: number): void;
}>(); }>();
const trigger = useVModel(props, 'modelValue', emit); const trigger = useVModel(props, 'modelValue', emit);
@@ -29,21 +34,21 @@ const maxConditionsPerGroup = 3; // 每组最多 3 个条件
* 更新条件 * 更新条件
* @param condition 条件对象 * @param condition 条件对象
*/ */
const updateCondition = (condition: Trigger) => { function updateCondition(condition: RuleSceneApi.Trigger) {
trigger.value = condition; trigger.value = condition;
}; }
/** /**
* 处理触发器类型变化事件 * 处理触发器类型变化事件
* @param type 触发器类型 * @param type 触发器类型
*/ */
const handleTriggerTypeChange = (type: number) => { function handleTriggerTypeChange(type: number) {
trigger.value.type = type; trigger.value.type = type.toString();
emit('trigger-type-change', type); emit('triggerTypeChange', type);
}; }
/** 添加子条件组 */ /** 添加子条件组 */
const addSubGroup = async () => { async function addSubGroup() {
if (!trigger.value.conditionGroups) { if (!trigger.value.conditionGroups) {
trigger.value.conditionGroups = []; trigger.value.conditionGroups = [];
} }
@@ -56,35 +61,35 @@ const addSubGroup = async () => {
// 使用 nextTick 确保响应式更新完成后再添加新的子组 // 使用 nextTick 确保响应式更新完成后再添加新的子组
await nextTick(); await nextTick();
if (trigger.value.conditionGroups) { if (trigger.value.conditionGroups) {
trigger.value.conditionGroups.push([]); trigger.value.conditionGroups.push([] as any);
} }
}; }
/** /**
* 移除子条件组 * 移除子条件组
* @param index 子条件组索引 * @param index 子条件组索引
*/ */
const removeSubGroup = (index: number) => { function removeSubGroup(index: number) {
if (trigger.value.conditionGroups) { if (trigger.value.conditionGroups) {
trigger.value.conditionGroups.splice(index, 1); trigger.value.conditionGroups.splice(index, 1);
} }
}; }
/** /**
* 更新子条件组 * 更新子条件组
* @param index 子条件组索引 * @param index 子条件组索引
* @param subGroup 子条件组数据 * @param subGroup 子条件组数据
*/ */
const updateSubGroup = (index: number, subGroup: any) => { function updateSubGroup(index: number, subGroup: any) {
if (trigger.value.conditionGroups) { if (trigger.value.conditionGroups) {
trigger.value.conditionGroups[index] = subGroup; trigger.value.conditionGroups[index] = subGroup;
} }
}; }
/** 移除整个条件组 */ /** 移除整个条件组 */
const removeConditionGroup = () => { function removeConditionGroup() {
trigger.value.conditionGroups = undefined; trigger.value.conditionGroups = undefined;
}; }
</script> </script>
<template> <template>
@@ -118,7 +123,7 @@ const removeConditionGroup = () => {
<MainConditionInnerConfig <MainConditionInnerConfig
:model-value="trigger" :model-value="trigger"
@update:model-value="updateCondition" @update:model-value="updateCondition"
:trigger-type="trigger.type" :trigger-type="trigger.type as any"
@trigger-type-change="handleTriggerTypeChange" @trigger-type-change="handleTriggerTypeChange"
/> />
</div> </div>
@@ -150,24 +155,19 @@ const removeConditionGroup = () => {
</el-tag> </el-tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<el-button <Button
type="primary" type="primary"
size="small" size="small"
@click="addSubGroup" @click="addSubGroup"
:disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups" :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
> >
<Icon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
添加子条件组 添加子条件组
</el-button> </Button>
<el-button <Button danger size="small" text @click="removeConditionGroup">
type="danger" <IconifyIcon icon="ep:delete" />
size="small"
text
@click="removeConditionGroup"
>
<Icon icon="ep:delete" />
删除条件组 删除条件组
</el-button> </Button>
</div> </div>
</div> </div>
@@ -201,36 +201,36 @@ const removeConditionGroup = () => {
</div> </div>
<span>子条件组 {{ subGroupIndex + 1 }}</span> <span>子条件组 {{ subGroupIndex + 1 }}</span>
</div> </div>
<el-tag size="small" type="warning" class="font-500"> <Tag size="small" type="warning" class="font-500">
组内条件为"且"关系 组内条件为"且"关系
</el-tag> </Tag>
<el-tag size="small" type="info"> <Tag size="small" type="info">
{{ subGroup?.length || 0 }}个条件 {{ (subGroup as any)?.length || 0 }}个条件
</el-tag> </Tag>
</div> </div>
<el-button <Button
type="danger" danger
size="small" size="small"
text text
@click="removeSubGroup(subGroupIndex)" @click="removeSubGroup(subGroupIndex)"
class="hover:bg-red-50" class="hover:bg-red-50"
> >
<Icon icon="ep:delete" /> <IconifyIcon icon="ep:delete" />
删除组 删除组
</el-button> </Button>
</div> </div>
<SubConditionGroupConfig <SubConditionGroupConfig
:model-value="subGroup" :model-value="subGroup as any"
@update:model-value=" @update:model-value="
(value) => updateSubGroup(subGroupIndex, value) (value) => updateSubGroup(subGroupIndex, value)
" "
:trigger-type="trigger.type" :trigger-type="trigger.type as any"
:max-conditions="maxConditionsPerGroup" :max-conditions="maxConditionsPerGroup"
/> />
</div> </div>
<!-- 子条件组间的"或"连接符 --> <!-- 子条件组间的'或'连接符 -->
<div <div
v-if="subGroupIndex < trigger.conditionGroups!.length - 1" v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
class="py-12px flex items-center justify-center" class="py-12px flex items-center justify-center"
@@ -258,7 +258,7 @@ const removeConditionGroup = () => {
class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center" class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
> >
<div class="gap-12px flex flex-col items-center"> <div class="gap-12px flex flex-col items-center">
<Icon icon="ep:plus" class="text-32px text-orange-400" /> <IconifyIcon icon="ep:plus" class="text-32px text-orange-400" />
<div class="text-orange-600"> <div class="text-orange-600">
<p class="text-14px font-500 mb-4px">暂无子条件组</p> <p class="text-14px font-500 mb-4px">暂无子条件组</p>
<p class="text-12px">点击上方"添加子条件组"按钮开始配置</p> <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>

147
apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
View File

@@ -1,7 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Trigger } from '#/api/iot/rule/scene'; import type { Trigger } from '#/api/iot/rule/scene';
import { computed, ref } from 'vue';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Col, Form, Row, Select } from 'ant-design-vue';
import { import {
getTriggerTypeLabel, getTriggerTypeLabel,
@@ -28,7 +31,7 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', value: Trigger): void; (e: 'update:modelValue', value: Trigger): void;
(e: 'trigger-type-change', value: number): void; (e: 'triggerTypeChange', value: number): void;
}>(); }>();
/** 获取设备状态变更选项（用于触发器配置） */ /** 获取设备状态变更选项（用于触发器配置） */
@@ -123,36 +126,36 @@ const eventConfig = computed(() => {
* @param field 字段名 * @param field 字段名
* @param value 字段值 * @param value 字段值
*/ */
const updateConditionField = (field: any, value: any) => { function updateConditionField(field: any, value: any) {
condition.value[field] = value; (condition.value as any)[field] = value;
}; }
/** /**
* 处理触发器类型变化事件 * 处理触发器类型变化事件
* @param type 触发器类型 * @param type 触发器类型
*/ */
const handleTriggerTypeChange = (type: number) => { function handleTriggerTypeChange(type: number) {
emit('trigger-type-change', type); emit('triggerTypeChange', type);
}; }
/** 处理产品变化事件 */ /** 处理产品变化事件 */
const handleProductChange = () => { function handleProductChange() {
// 产品变化时清空设备和属性 // 产品变化时清空设备和属性
condition.value.deviceId = undefined; condition.value.deviceId = undefined;
condition.value.identifier = ''; condition.value.identifier = '';
}; }
/** 处理设备变化事件 */ /** 处理设备变化事件 */
const handleDeviceChange = () => { function handleDeviceChange() {
// 设备变化时清空属性 // 设备变化时清空属性
condition.value.identifier = ''; condition.value.identifier = '';
}; }
/** /**
* 处理属性变化事件 * 处理属性变化事件
* @param propertyInfo 属性信息对象 * @param propertyInfo 属性信息对象
*/ */
const handlePropertyChange = (propertyInfo: any) => { function handlePropertyChange(propertyInfo: any) {
if (propertyInfo) { if (propertyInfo) {
propertyType.value = propertyInfo.type; propertyType.value = propertyInfo.type;
propertyConfig.value = propertyInfo.config; propertyConfig.value = propertyInfo.config;
@@ -166,34 +169,34 @@ const handlePropertyChange = (propertyInfo: any) => {
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value; IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value;
} }
} }
}; }
</script> </script>
<template> <template>
<div class="space-y-16px"> <div class="space-y-16px">
<!-- 触发事件类型选择 --> <!-- 触发事件类型选择 -->
<el-form-item label="触发事件类型" required> <Form.Item label="触发事件类型" required>
<el-select <Select
:model-value="triggerType" :model-value="triggerType"
@update:model-value="handleTriggerTypeChange" @update:model-value="handleTriggerTypeChange"
placeholder="请选择触发事件类型" placeholder="请选择触发事件类型"
class="w-full" class="w-full"
> >
<el-option <Select.Option
v-for="option in triggerTypeOptions" v-for="option in triggerTypeOptions"
:key="option.value" :key="option.value"
:label="option.label" :label="option.label"
:value="option.value" :value="option.value"
/> />
</el-select> </Select>
</el-form-item> </Form.Item>
<!-- 设备属性条件配置 --> <!-- 设备属性条件配置 -->
<div v-if="isDevicePropertyTrigger" class="space-y-16px"> <div v-if="isDevicePropertyTrigger" class="space-y-16px">
<!-- 产品设备选择 --> <!-- 产品设备选择 -->
<el-row :gutter="16"> <Row :gutter="16">
<el-col :span="12"> <Col :span="12">
<el-form-item label="产品" required> <Form.Item label="产品" required>
<ProductSelector <ProductSelector
:model-value="condition.productId" :model-value="condition.productId"
@update:model-value=" @update:model-value="
@@ -201,10 +204,10 @@ const handlePropertyChange = (propertyInfo: any) => {
" "
@change="handleProductChange" @change="handleProductChange"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
<el-col :span="12"> <Col :span="12">
<el-form-item label="设备" required> <Form.Item label="设备" required>
<DeviceSelector <DeviceSelector
:model-value="condition.deviceId" :model-value="condition.deviceId"
@update:model-value=" @update:model-value="
@@ -213,15 +216,15 @@ const handlePropertyChange = (propertyInfo: any) => {
:product-id="condition.productId" :product-id="condition.productId"
@change="handleDeviceChange" @change="handleDeviceChange"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
</el-row> </Row>
<!-- 属性配置 --> <!-- 属性配置 -->
<el-row :gutter="16"> <Row :gutter="16">
<!-- 属性/事件/服务选择 --> <!-- 属性/事件/服务选择 -->
<el-col :span="6"> <Col :span="6">
<el-form-item label="监控项" required> <Form.Item label="监控项" required>
<PropertySelector <PropertySelector
:model-value="condition.identifier" :model-value="condition.identifier"
@update:model-value=" @update:model-value="
@@ -232,12 +235,12 @@ const handlePropertyChange = (propertyInfo: any) => {
:device-id="condition.deviceId" :device-id="condition.deviceId"
@change="handlePropertyChange" @change="handlePropertyChange"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
<!-- 操作符选择 - 服务调用和事件上报不需要操作符 --> <!-- 操作符选择 - 服务调用和事件上报不需要操作符 -->
<el-col v-if="needsOperatorSelector" :span="6"> <Col v-if="needsOperatorSelector" :span="6">
<el-form-item label="操作符" required> <Form.Item label="操作符" required>
<OperatorSelector <OperatorSelector
:model-value="condition.operator" :model-value="condition.operator"
@update:model-value=" @update:model-value="
@@ -245,12 +248,12 @@ const handlePropertyChange = (propertyInfo: any) => {
" "
:property-type="propertyType" :property-type="propertyType"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
<!-- 值输入 --> <!-- 值输入 -->
<el-col :span="isWideValueColumn ? 18 : 12"> <Col :span="isWideValueColumn ? 18 : 12">
<el-form-item :label="valueInputLabel" required> <Form.Item :label="valueInputLabel" required>
<!-- 服务调用参数配置 --> <!-- 服务调用参数配置 -->
<JsonParamsInput <JsonParamsInput
v-if=" v-if="
@@ -259,7 +262,7 @@ const handlePropertyChange = (propertyInfo: any) => {
" "
v-model="condition.value" v-model="condition.value"
type="service" type="service"
:config="serviceConfig" :config="serviceConfig as any"
placeholder="请输入 JSON 格式的服务参数" placeholder="请输入 JSON 格式的服务参数"
/> />
<!-- 事件上报参数配置 --> <!-- 事件上报参数配置 -->
@@ -269,7 +272,7 @@ const handlePropertyChange = (propertyInfo: any) => {
" "
v-model="condition.value" v-model="condition.value"
type="event" type="event"
:config="eventConfig" :config="eventConfig as any"
placeholder="请输入 JSON 格式的事件参数" placeholder="请输入 JSON 格式的事件参数"
/> />
<!-- 普通值输入 --> <!-- 普通值输入 -->
@@ -283,17 +286,17 @@ const handlePropertyChange = (propertyInfo: any) => {
:operator="condition.operator" :operator="condition.operator"
:property-config="propertyConfig" :property-config="propertyConfig"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
</el-row> </Row>
</div> </div>
<!-- 设备状态条件配置 --> <!-- 设备状态条件配置 -->
<div v-else-if="isDeviceStatusTrigger" class="space-y-16px"> <div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
<!-- 设备状态触发器使用简化的配置 --> <!-- 设备状态触发器使用简化的配置 -->
<el-row :gutter="16"> <Row :gutter="16">
<el-col :span="12"> <Col :span="12">
<el-form-item label="产品" required> <Form.Item label="产品" required>
<ProductSelector <ProductSelector
:model-value="condition.productId" :model-value="condition.productId"
@update:model-value=" @update:model-value="
@@ -301,10 +304,10 @@ const handlePropertyChange = (propertyInfo: any) => {
" "
@change="handleProductChange" @change="handleProductChange"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
<el-col :span="12"> <Col :span="12">
<el-form-item label="设备" required> <Form.Item label="设备" required>
<DeviceSelector <DeviceSelector
:model-value="condition.deviceId" :model-value="condition.deviceId"
@update:model-value=" @update:model-value="
@@ -313,21 +316,21 @@ const handlePropertyChange = (propertyInfo: any) => {
:product-id="condition.productId" :product-id="condition.productId"
@change="handleDeviceChange" @change="handleDeviceChange"
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
</el-row> </Row>
<el-row :gutter="16"> <Row :gutter="16">
<el-col :span="6"> <Col :span="6">
<el-form-item label="操作符" required> <Form.Item label="操作符" required>
<el-select <Select
:model-value="condition.operator" :model-value="condition.operator"
@update:model-value=" @update:model-value="
(value) => updateConditionField('operator', value) (value: any) => updateConditionField('operator', value)
" "
placeholder="请选择操作符" placeholder="请选择操作符"
class="w-full" class="w-full"
> >
<el-option <Select.Option
:label=" :label="
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
" "
@@ -335,29 +338,29 @@ const handlePropertyChange = (propertyInfo: any) => {
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
" "
/> />
</el-select> </Select>
</el-form-item> </Form.Item>
</el-col> </Col>
<el-col :span="6"> <Col :span="6">
<el-form-item label="参数" required> <Form.Item label="参数" required>
<el-select <Select
:model-value="condition.value" :model-value="condition.value"
@update:model-value=" @update:model-value="
(value) => updateConditionField('value', value) (value: any) => updateConditionField('value', value)
" "
placeholder="请选择操作符" placeholder="请选择操作符"
class="w-full" class="w-full"
> >
<el-option <Select.Option
v-for="option in deviceStatusChangeOptions" v-for="option in deviceStatusChangeOptions"
:key="option.value" :key="option.value"
:label="option.label" :label="option.label"
:value="option.value" :value="option.value"
/> />
</el-select> </Select>
</el-form-item> </Form.Item>
</el-col> </Col>
</el-row> </Row>
</div> </div>
<!-- 其他触发类型的提示 --> <!-- 其他触发类型的提示 -->

39
apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
View File

@@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import type { TriggerCondition } from '#/api/iot/rule/scene'; import type { TriggerCondition } from '#/api/iot/rule/scene';
import { nextTick } from 'vue'; import { computed, nextTick } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Button } from 'ant-design-vue';
import { import {
IotRuleSceneTriggerConditionParameterOperatorEnum, IotRuleSceneTriggerConditionParameterOperatorEnum,
@@ -42,7 +45,7 @@ const addCondition = async () => {
} }
const newCondition: TriggerCondition = { const newCondition: TriggerCondition = {
type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性 type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString(), // 默认为设备属性
productId: undefined, productId: undefined,
deviceId: undefined, deviceId: undefined,
identifier: '', identifier: '',
@@ -61,22 +64,22 @@ const addCondition = async () => {
* 移除条件 * 移除条件
* @param index 条件索引 * @param index 条件索引
*/ */
const removeCondition = (index: number) => { function removeCondition(index: number) {
if (subGroup.value) { if (subGroup.value) {
subGroup.value.splice(index, 1); subGroup.value.splice(index, 1);
} }
}; }
/** /**
* 更新条件 * 更新条件
* @param index 条件索引 * @param index 条件索引
* @param condition 条件对象 * @param condition 条件对象
*/ */
const updateCondition = (index: number, condition: TriggerCondition) => { function updateCondition(index: number, condition: TriggerCondition) {
if (subGroup.value) { if (subGroup.value) {
subGroup.value[index] = condition; subGroup.value[index] = condition;
} }
}; }
</script> </script>
<template> <template>
@@ -92,10 +95,10 @@ const updateCondition = (index: number, condition: TriggerCondition) => {
<p class="text-14px font-500 mb-4px">暂无条件</p> <p class="text-14px font-500 mb-4px">暂无条件</p>
<p class="text-12px">点击下方按钮添加第一个条件</p> <p class="text-12px">点击下方按钮添加第一个条件</p>
</div> </div>
<el-button type="primary" @click="addCondition"> <Button type="primary" @click="addCondition">
<Icon icon="ep:plus" /> <Icon icon="ep:plus" />
添加条件 添加条件
</el-button> </Button>
</div> </div>
</div> </div>
@@ -121,26 +124,28 @@ const updateCondition = (index: number, condition: TriggerCondition) => {
</div> </div>
<span <span
class="text-12px font-500 text-[var(--el-text-color-primary)]" class="text-12px font-500 text-[var(--el-text-color-primary)]"
>条件 {{ conditionIndex + 1 }}</span
> >
条件 {{ conditionIndex + 1 }}
</span>
</div> </div>
<el-button <Button
type="danger" danger
size="small" size="small"
text text
@click="removeCondition(conditionIndex)" @click="removeCondition(conditionIndex)"
v-if="subGroup!.length > 1" v-if="subGroup!.length > 1"
class="hover:bg-red-50" class="hover:bg-red-50"
> >
<Icon icon="ep:delete" /> <IconifyIcon icon="ep:delete" />
</el-button> </Button>
</div> </div>
<div class="p-12px"> <div class="p-12px">
<ConditionConfig <ConditionConfig
:model-value="condition" :model-value="condition"
@update:model-value=" @update:model-value="
(value) => updateCondition(conditionIndex, value) (value: TriggerCondition) =>
updateCondition(conditionIndex, value)
" "
:trigger-type="triggerType" :trigger-type="triggerType"
/> />
@@ -155,10 +160,10 @@ const updateCondition = (index: number, condition: TriggerCondition) => {
" "
class="py-16px text-center" class="py-16px text-center"
> >
<el-button type="primary" plain @click="addCondition"> <Button type="primary" plain @click="addCondition">
<Icon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
继续添加条件 继续添加条件
</el-button> </Button>
<span <span
class="mt-8px text-12px block text-[var(--el-text-color-secondary)]" class="mt-8px text-12px block text-[var(--el-text-color-secondary)]"
> >

103
apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
View File

@@ -2,8 +2,12 @@
<script setup lang="ts"> <script setup lang="ts">
import type { JsonParamsInputType } from '#/views/iot/utils/constants'; import type { JsonParamsInputType } from '#/views/iot/utils/constants';
import { InfoFilled } from '@element-plus/icons-vue'; import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Button, Input, Popover, Tag } from 'ant-design-vue';
import { import {
IoTDataSpecsDataTypeEnum, IoTDataSpecsDataTypeEnum,
@@ -44,10 +48,10 @@ interface JsonParamsConfig {
} }
interface Props { interface Props {
modelValue?: string; modelValue: string;
config?: JsonParamsConfig; config: JsonParamsConfig;
type?: JsonParamsInputType; type: JsonParamsInputType;
placeholder?: string; placeholder: string;
} }
interface Emits { interface Emits {
@@ -217,7 +221,7 @@ const noConfigMessage = computed(() => {
/** /**
* 处理参数变化事件 * 处理参数变化事件
*/ */
const handleParamsChange = () => { function handleParamsChange() {
try { try {
jsonError.value = ''; // 清除之前的错误 jsonError.value = ''; // 清除之前的错误
@@ -256,33 +260,33 @@ const handleParamsChange = () => {
: JSON_PARAMS_INPUT_CONSTANTS.UNKNOWN_ERROR, : JSON_PARAMS_INPUT_CONSTANTS.UNKNOWN_ERROR,
); );
} }
}; }
/** /**
* 快速填充示例数据 * 快速填充示例数据
*/ */
const fillExampleJson = () => { function fillExampleJson() {
paramsJson.value = generateExampleJson(); paramsJson.value = generateExampleJson();
handleParamsChange(); handleParamsChange();
}; }
/** /**
* 清空参数 * 清空参数
*/ */
const clearParams = () => { function clearParams() {
paramsJson.value = ''; paramsJson.value = '';
localValue.value = ''; localValue.value = '';
jsonError.value = ''; jsonError.value = '';
}; }
/** /**
* 获取参数类型名称 * 获取参数类型名称
* @param dataType 数据类型 * @param dataType 数据类型
* @returns 类型名称 * @returns 类型名称
*/ */
const getParamTypeName = (dataType: string) => { function getParamTypeName(dataType: string) {
// 使用 constants.ts 中已有的 getDataTypeName 函数逻辑 // 使用 constants.ts 中已有的 getDataTypeName 函数逻辑
const typeMap = { const typeMap: Record<string, string> = {
[IoTDataSpecsDataTypeEnum.INT]: '整数', [IoTDataSpecsDataTypeEnum.INT]: '整数',
[IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数', [IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
[IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度', [IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
@@ -294,15 +298,15 @@ const getParamTypeName = (dataType: string) => {
[IoTDataSpecsDataTypeEnum.ARRAY]: '数组', [IoTDataSpecsDataTypeEnum.ARRAY]: '数组',
}; };
return typeMap[dataType] || dataType; return typeMap[dataType] || dataType;
}; }
/** /**
* 获取参数类型标签样式 * 获取参数类型标签样式
* @param dataType 数据类型 * @param dataType 数据类型
* @returns 标签样式 * @returns 标签样式
*/ */
const getParamTypeTag = (dataType: string) => { function getParamTypeTag(dataType: string) {
const tagMap = { const tagMap: Record<string, string> = {
[IoTDataSpecsDataTypeEnum.INT]: 'primary', [IoTDataSpecsDataTypeEnum.INT]: 'primary',
[IoTDataSpecsDataTypeEnum.FLOAT]: 'success', [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
[IoTDataSpecsDataTypeEnum.DOUBLE]: 'success', [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
@@ -314,45 +318,45 @@ const getParamTypeTag = (dataType: string) => {
[IoTDataSpecsDataTypeEnum.ARRAY]: 'warning', [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
}; };
return tagMap[dataType] || 'info'; return tagMap[dataType] || 'info';
}; }
/** /**
* 获取示例值 * 获取示例值
* @param param 参数对象 * @param param 参数对象
* @returns 示例值 * @returns 示例值
*/ */
const getExampleValue = (param: any) => { function getExampleValue(param: any) {
const exampleConfig = const exampleConfig: any =
JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES[param.dataType] ||
JSON_PARAMS_EXAMPLE_VALUES.DEFAULT; JSON_PARAMS_EXAMPLE_VALUES.DEFAULT;
return exampleConfig.display; return exampleConfig.display;
}; }
/** /**
* 生成示例JSON * 生成示例JSON
* @returns JSON字符串 * @returns JSON字符串
*/ */
const generateExampleJson = () => { function generateExampleJson() {
if (paramsList.value.length === 0) { if (paramsList.value.length === 0) {
return '{}'; return '{}';
} }
const example = {}; const example: Record<string, any> = {};
paramsList.value.forEach((param) => { paramsList.value.forEach((param) => {
const exampleConfig = const exampleConfig: any =
JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES[param.dataType] ||
JSON_PARAMS_EXAMPLE_VALUES.DEFAULT; JSON_PARAMS_EXAMPLE_VALUES.DEFAULT;
example[param.identifier] = exampleConfig.value; example[param.identifier] = exampleConfig.value;
}); });
return JSON.stringify(example, null, 2); return JSON.stringify(example, null, 2);
}; }
/** /**
* 处理数据回显 * 处理数据回显
* @param value 值字符串 * @param value 值字符串
*/ */
const handleDataDisplay = (value: string) => { function handleDataDisplay(value: string) {
if (!value || !value.trim()) { if (!value || !value.trim()) {
paramsJson.value = ''; paramsJson.value = '';
jsonError.value = ''; jsonError.value = '';
@@ -369,7 +373,7 @@ const handleDataDisplay = (value: string) => {
paramsJson.value = value; paramsJson.value = value;
jsonError.value = ''; jsonError.value = '';
} }
}; }
// 监听外部值变化（编辑模式数据回显） // 监听外部值变化（编辑模式数据回显）
watch( watch(
@@ -414,9 +418,9 @@ watch(
<div class="space-y-12px w-full"> <div class="space-y-12px w-full">
<!-- JSON 输入框 --> <!-- JSON 输入框 -->
<div class="relative"> <div class="relative">
<el-input <Input.TextArea
v-model="paramsJson" v-model="paramsJson"
type="textarea" type="text"
:rows="4" :rows="4"
:placeholder="placeholder" :placeholder="placeholder"
@input="handleParamsChange" @input="handleParamsChange"
@@ -424,8 +428,8 @@ watch(
/> />
<!-- 查看详细示例弹出层 --> <!-- 查看详细示例弹出层 -->
<div class="top-8px right-8px absolute"> <div class="top-8px right-8px absolute">
<el-popover <Popover
placement="left-start" placement="leftTop"
:width="450" :width="450"
trigger="click" trigger="click"
:show-arrow="true" :show-arrow="true"
@@ -433,19 +437,21 @@ watch(
popper-class="json-params-detail-popover" popper-class="json-params-detail-popover"
> >
<template #reference> <template #reference>
<el-button <Button
type="info" text
:icon="InfoFilled" type="primary"
circle circle
size="small" size="small"
:title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE" :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
/> >
<IconifyIcon icon="ep:info-filled" />
</Button>
</template> </template>
<!-- 弹出层内容 --> <!-- 弹出层内容 -->
<div class="json-params-detail-content"> <div class="json-params-detail-content">
<div class="gap-8px mb-16px flex items-center"> <div class="gap-8px mb-16px flex items-center">
<Icon <IconifyIcon
:icon="titleIcon" :icon="titleIcon"
class="text-18px text-[var(--el-color-primary)]" class="text-18px text-[var(--el-color-primary)]"
/> />
@@ -460,7 +466,7 @@ watch(
<!-- 参数列表 --> <!-- 参数列表 -->
<div v-if="paramsList.length > 0"> <div v-if="paramsList.length > 0">
<div class="gap-8px mb-8px flex items-center"> <div class="gap-8px mb-8px flex items-center">
<Icon <IconifyIcon
:icon="paramsIcon" :icon="paramsIcon"
class="text-14px text-[var(--el-color-primary)]" class="text-14px text-[var(--el-color-primary)]"
/> />
@@ -481,14 +487,14 @@ watch(
class="text-12px font-500 text-[var(--el-text-color-primary)]" class="text-12px font-500 text-[var(--el-text-color-primary)]"
> >
{{ param.name }} {{ param.name }}
<el-tag <Tag
v-if="param.required" v-if="param.required"
size="small" size="small"
type="danger" type="danger"
class="ml-4px" class="ml-4px"
> >
{{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }} {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
</el-tag> </Tag>
</div> </div>
<div <div
class="text-11px text-[var(--el-text-color-secondary)]" class="text-11px text-[var(--el-text-color-secondary)]"
@@ -497,12 +503,9 @@ watch(
</div> </div>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<el-tag <Tag :type="getParamTypeTag(param.dataType)" size="small">
:type="getParamTypeTag(param.dataType)"
size="small"
>
{{ getParamTypeName(param.dataType) }} {{ getParamTypeName(param.dataType) }}
</el-tag> </Tag>
<span <span
class="text-11px text-[var(--el-text-color-secondary)]" class="text-11px text-[var(--el-text-color-secondary)]"
> >
@@ -536,14 +539,14 @@ watch(
</div> </div>
</div> </div>
</div> </div>
</el-popover> </Popover>
</div> </div>
</div> </div>
<!-- 验证状态和错误提示 --> <!-- 验证状态和错误提示 -->
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<Icon <IconifyIcon
:icon=" :icon="
jsonError jsonError
? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR ? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
@@ -573,12 +576,12 @@ watch(
<span class="text-12px text-[var(--el-text-color-secondary)]">{{ <span class="text-12px text-[var(--el-text-color-secondary)]">{{
JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
}}</span> }}</span>
<el-button size="small" type="primary" plain @click="fillExampleJson"> <Button size="small" type="primary" plain @click="fillExampleJson">
{{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }} {{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
</el-button> </Button>
<el-button size="small" type="danger" plain @click="clearParams"> <Button size="small" danger type="primary" @click="clearParams">
{{ JSON_PARAMS_INPUT_CONSTANTS.CLEAR_BUTTON }} {{ JSON_PARAMS_INPUT_CONSTANTS.CLEAR_BUTTON }}
</el-button> </Button>
</div> </div>
</div> </div>
</div> </div>
@@ -595,7 +598,7 @@ watch(
max-width: 500px !important; max-width: 500px !important;
} }
:global(.json-params-detail-popover .el-popover__content) { :global(.json-params-detail-popover .ant-popover__content) {
padding: 16px !important; padding: 16px !important;
} }

97
apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue
View File

@@ -1,6 +1,9 @@
<!-- 值输入组件 --> <!-- 值输入组件 -->
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { DatePicker, Input, Select, Tag, Tooltip } from 'ant-design-vue';
import { import {
IoTDataSpecsDataTypeEnum, IoTDataSpecsDataTypeEnum,
@@ -61,16 +64,16 @@ const listPreview = computed(() => {
}); });
/** 判断是否为数字类型 */ /** 判断是否为数字类型 */
const isNumericType = () => { function isNumericType() {
return [ return [
IoTDataSpecsDataTypeEnum.DOUBLE, IoTDataSpecsDataTypeEnum.DOUBLE,
IoTDataSpecsDataTypeEnum.FLOAT, IoTDataSpecsDataTypeEnum.FLOAT,
IoTDataSpecsDataTypeEnum.INT, IoTDataSpecsDataTypeEnum.INT,
].includes((props.propertyType || '') as any); ].includes((props.propertyType || '') as any);
}; }
/** 获取输入框类型 */ /** 获取输入框类型 */
const getInputType = () => { function getInputType() {
switch (props.propertyType) { switch (props.propertyType) {
case IoTDataSpecsDataTypeEnum.DOUBLE: case IoTDataSpecsDataTypeEnum.DOUBLE:
case IoTDataSpecsDataTypeEnum.FLOAT: case IoTDataSpecsDataTypeEnum.FLOAT:
@@ -81,11 +84,11 @@ const getInputType = () => {
return 'text'; return 'text';
} }
} }
}; }
/** 获取占位符文本 */ /** 获取占位符文本 */
const getPlaceholder = () => { function getPlaceholder() {
const typeMap = { const typeMap: Record<string, string> = {
[IoTDataSpecsDataTypeEnum.TEXT]: '请输入字符串', [IoTDataSpecsDataTypeEnum.TEXT]: '请输入字符串',
[IoTDataSpecsDataTypeEnum.INT]: '请输入整数', [IoTDataSpecsDataTypeEnum.INT]: '请输入整数',
[IoTDataSpecsDataTypeEnum.FLOAT]: '请输入浮点数', [IoTDataSpecsDataTypeEnum.FLOAT]: '请输入浮点数',
@@ -94,45 +97,45 @@ const getPlaceholder = () => {
[IoTDataSpecsDataTypeEnum.ARRAY]: '请输入数组格式数据', [IoTDataSpecsDataTypeEnum.ARRAY]: '请输入数组格式数据',
}; };
return typeMap[props.propertyType || ''] || '请输入值'; return typeMap[props.propertyType || ''] || '请输入值';
}; }
/** 获取数字精度 */ /** 获取数字精度 */
const getPrecision = () => { function getPrecision() {
return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 0 : 2; return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 0 : 2;
}; }
/** 获取数字步长 */ /** 获取数字步长 */
const getStep = () => { function getStep() {
return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 1 : 0.1; return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 1 : 0.1;
}; }
/** 获取最小值 */ /** 获取最小值 */
const getMin = () => { function getMin() {
return props.propertyConfig?.min || undefined; return props.propertyConfig?.min || undefined;
}; }
/** 获取最大值 */ /** 获取最大值 */
const getMax = () => { function getMax() {
return props.propertyConfig?.max || undefined; return props.propertyConfig?.max || undefined;
}; }
/** 处理范围变化事件 */ /** 处理范围变化事件 */
const handleRangeChange = () => { function handleRangeChange() {
localValue.value = localValue.value =
rangeStart.value && rangeEnd.value rangeStart.value && rangeEnd.value
? `${rangeStart.value},${rangeEnd.value}` ? `${rangeStart.value},${rangeEnd.value}`
: ''; : '';
}; }
/** 处理日期变化事件 */ /** 处理日期变化事件 */
const handleDateChange = (value: string) => { function handleDateChange(value: any) {
localValue.value = value || ''; localValue.value = value || '';
}; }
/** 处理数字变化事件 */ /** 处理数字变化事件 */
const handleNumberChange = (value: number | undefined) => { function handleNumberChange(value: number | undefined) {
localValue.value = value?.toString() || ''; localValue.value = value?.toString() || '';
}; }
/** 监听操作符变化 */ /** 监听操作符变化 */
watch( watch(
@@ -150,18 +153,18 @@ watch(
<template> <template>
<div class="w-full min-w-0"> <div class="w-full min-w-0">
<!-- 布尔值选择 --> <!-- 布尔值选择 -->
<el-select <Select
v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL" v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
v-model="localValue" v-model="localValue"
placeholder="请选择布尔值" placeholder="请选择布尔值"
class="w-full!" class="w-full!"
> >
<el-option label="真 (true)" value="true" /> <Select.Option label="真 (true)" :value="true" />
<el-option label="假 (false)" value="false" /> <Select.Option label="假 (false)" :value="false" />
</el-select> </Select>
<!-- 枚举值选择 --> <!-- 枚举值选择 -->
<el-select <Select
v-else-if=" v-else-if="
propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0 propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
" "
@@ -169,13 +172,13 @@ watch(
placeholder="请选择枚举值" placeholder="请选择枚举值"
class="w-full!" class="w-full!"
> >
<el-option <Select.Option
v-for="option in enumOptions" v-for="option in enumOptions"
:key="option.value" :key="option.value"
:label="option.label" :label="option.label"
:value="option.value" :value="option.value"
/> />
</el-select> </Select>
<!-- 范围输入 (between 操作符) --> <!-- 范围输入 (between 操作符) -->
<div <div
@@ -185,7 +188,7 @@ watch(
" "
class="w-full! gap-8px flex items-center" class="w-full! gap-8px flex items-center"
> >
<el-input <Input
v-model="rangeStart" v-model="rangeStart"
:type="getInputType()" :type="getInputType()"
placeholder="最小值" placeholder="最小值"
@@ -195,8 +198,10 @@ watch(
/> />
<span <span
class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]" class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]"
>至</span> >
<el-input 至
</span>
<Input
v-model="rangeEnd" v-model="rangeEnd"
:type="getInputType()" :type="getInputType()"
placeholder="最大值" placeholder="最大值"
@@ -212,38 +217,40 @@ watch(
" "
class="w-full!" class="w-full!"
> >
<el-input <Input
v-model="localValue" v-model="localValue"
placeholder="请输入值列表，用逗号分隔" placeholder="请输入值列表，用逗号分隔"
class="w-full!" class="w-full!"
> >
<template #suffix> <template #suffix>
<el-tooltip content="多个值用逗号分隔，如：1,2,3" placement="top"> <Tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
<Icon <IconifyIcon
icon="ep:question-filled" icon="ep:question-filled"
class="cursor-help text-[var(--el-text-color-placeholder)]" class="cursor-help text-[var(--el-text-color-placeholder)]"
/> />
</el-tooltip> </Tooltip>
</template> </template>
</el-input> </Input>
<div <div
v-if="listPreview.length > 0" v-if="listPreview.length > 0"
class="mt-8px gap-6px flex flex-wrap items-center" class="mt-8px gap-6px flex flex-wrap items-center"
> >
<span class="text-12px text-[var(--el-text-color-secondary)]">解析结果：</span> <span class="text-12px text-[var(--el-text-color-secondary)]">
<el-tag 解析结果：
</span>
<Tag
v-for="(item, index) in listPreview" v-for="(item, index) in listPreview"
:key="index" :key="index"
size="small" size="small"
class="m-0" class="m-0"
> >
{{ item }} {{ item }}
</el-tag> </Tag>
</div> </div>
</div> </div>
<!-- 日期时间输入 --> <!-- 日期时间输入 -->
<el-date-picker <DatePicker
v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE" v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE"
v-model="dateValue" v-model="dateValue"
type="datetime" type="datetime"
@@ -255,7 +262,7 @@ watch(
/> />
<!-- 数字输入 --> <!-- 数字输入 -->
<el-input-number <Input.Number
v-else-if="isNumericType()" v-else-if="isNumericType()"
v-model="numberValue" v-model="numberValue"
:precision="getPrecision()" :precision="getPrecision()"
@@ -268,7 +275,7 @@ watch(
/> />
<!-- 文本输入 --> <!-- 文本输入 -->
<el-input <Input
v-else v-else
v-model="localValue" v-model="localValue"
:type="getInputType()" :type="getInputType()"
@@ -276,7 +283,7 @@ watch(
class="w-full!" class="w-full!"
> >
<template #suffix> <template #suffix>
<el-tooltip <Tooltip
v-if="propertyConfig?.unit" v-if="propertyConfig?.unit"
:content="`单位：${propertyConfig.unit}`" :content="`单位：${propertyConfig.unit}`"
placement="top" placement="top"
@@ -284,8 +291,8 @@ watch(
<span class="text-12px px-4px text-[var(--el-text-color-secondary)]"> <span class="text-12px px-4px text-[var(--el-text-color-secondary)]">
{{ propertyConfig.unit }} {{ propertyConfig.unit }}
</span> </span>
</el-tooltip> </Tooltip>
</template> </template>
</el-input> </Input>
</div> </div>
</template> </template>

163
apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue
View File

@@ -2,7 +2,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Action } from '#/api/iot/rule/scene'; import type { Action } from '#/api/iot/rule/scene';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Button, Card, Empty, Form, Select, Tag } from 'ant-design-vue';
import { import {
getActionTypeLabel, getActionTypeLabel,
@@ -27,110 +30,116 @@ const emit = defineEmits<{
const actions = useVModel(props, 'actions', emit); const actions = useVModel(props, 'actions', emit);
/** 获取执行器标签类型（用于 el-tag 的 type 属性） */ /** 获取执行器标签类型（用于 el-tag 的 type 属性） */
const getActionTypeTag = ( function getActionTypeTag(
type: number, type: number,
): 'danger' | 'info' | 'primary' | 'success' | 'warning' => { ): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
const actionTypeTags = { const actionTypeTags: Record<
number,
'danger' | 'info' | 'primary' | 'success' | 'warning'
> = {
[IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary', [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
[IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success', [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
[IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger', [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
[IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning', [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning',
} as const; } as const;
return actionTypeTags[type] || 'info'; return actionTypeTags[type] || 'info';
}; }
/** 判断是否为设备执行器类型 */ /** 判断是否为设备执行器类型 */
const isDeviceAction = (type: number): boolean => { function isDeviceAction(type: number): boolean {
const deviceActionTypes = [ const deviceActionTypes = [
IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE, IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE,
] as number[]; ] as number[];
return deviceActionTypes.includes(type); return deviceActionTypes.includes(type);
}; }
/** 判断是否为告警执行器类型 */ /** 判断是否为告警执行器类型 */
const isAlertAction = (type: number): boolean => { function isAlertAction(type: number): boolean {
const alertActionTypes = [ const alertActionTypes = [
IotRuleSceneActionTypeEnum.ALERT_TRIGGER, IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
IotRuleSceneActionTypeEnum.ALERT_RECOVER, IotRuleSceneActionTypeEnum.ALERT_RECOVER,
] as number[]; ] as number[];
return alertActionTypes.includes(type); return alertActionTypes.includes(type);
}; }
/** /**
* 创建默认的执行器数据 * 创建默认的执行器数据
* @returns 默认执行器对象 * @returns 默认执行器对象
*/ */
const createDefaultActionData = (): Action => { function createDefaultActionData(): Action {
return { return {
type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置 type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString(), // 默认为设备属性设置
productId: undefined, productId: undefined,
deviceId: undefined, deviceId: undefined,
identifier: undefined, // 物模型标识符（服务调用时使用） identifier: undefined, // 物模型标识符（服务调用时使用）
params: undefined, params: undefined,
alertConfigId: undefined, alertConfigId: undefined,
}; };
}; }
/** /**
* 添加执行器 * 添加执行器
*/ */
const addAction = () => { function addAction() {
const newAction = createDefaultActionData(); const newAction = createDefaultActionData();
actions.value.push(newAction); actions.value.push(newAction);
}; }
/** /**
* 删除执行器 * 删除执行器
* @param index 执行器索引 * @param index 执行器索引
*/ */
const removeAction = (index: number) => { function removeAction(index: number) {
actions.value.splice(index, 1); actions.value.splice(index, 1);
}; }
/** /**
* 更新执行器类型 * 更新执行器类型
* @param index 执行器索引 * @param index 执行器索引
* @param type 执行器类型 * @param type 执行器类型
*/ */
const updateActionType = (index: number, type: number) => { function updateActionType(index: number, type: number) {
actions.value[index].type = type; actions.value[index].type = type.toString();
onActionTypeChange(actions.value[index], type); onActionTypeChange(actions.value[index] as Action, type);
}; }
/** /**
* 更新执行器 * 更新执行器
* @param index 执行器索引 * @param index 执行器索引
* @param action 执行器对象 * @param action 执行器对象
*/ */
const updateAction = (index: number, action: Action) => { function updateAction(index: number, action: Action) {
actions.value[index] = action; actions.value[index] = action;
}; }
/** /**
* 更新告警配置 * 更新告警配置
* @param index 执行器索引 * @param index 执行器索引
* @param alertConfigId 告警配置ID * @param alertConfigId 告警配置ID
*/ */
const updateActionAlertConfig = (index: number, alertConfigId?: number) => { function updateActionAlertConfig(index: number, alertConfigId?: number) {
actions.value[index].alertConfigId = alertConfigId; actions.value[index].alertConfigId = alertConfigId;
}; if (actions.value[index]) {
actions.value[index].alertConfigId = alertConfigId;
}
}
/** /**
* 监听执行器类型变化 * 监听执行器类型变化
* @param action 执行器对象 * @param action 执行器对象
* @param type 执行器类型 * @param type 执行器类型
*/ */
const onActionTypeChange = (action: Action, type: number) => { function onActionTypeChange(action: Action, type: any) {
// 清理不相关的配置，确保数据结构干净 // 清理不相关的配置，确保数据结构干净
if (isDeviceAction(type)) { if (isDeviceAction(type)) {
// 设备控制类型：清理告警配置，确保设备参数存在 // 设备控制类型：清理告警配置，确保设备参数存在
action.alertConfigId = undefined; action.alertConfigId = undefined;
if (!action.params) { if (!(action as any).params) {
action.params = ''; (action as any).params = '';
} }
// 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择） // 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择）
if (action.identifier && type !== action.type) { if (action.identifier && type !== (action as any).type) {
action.identifier = undefined; action.identifier = undefined;
} }
} else if (isAlertAction(type)) { } else if (isAlertAction(type)) {
@@ -140,33 +149,23 @@ const onActionTypeChange = (action: Action, type: number) => {
action.params = undefined; action.params = undefined;
action.alertConfigId = undefined; action.alertConfigId = undefined;
} }
}; }
</script> </script>
<template> <template>
<el-card <Card class="rounded-8px border-primary border" shadow="never">
class="rounded-8px border border-[var(--el-border-color-light)]" <template #title>
shadow="never"
>
<template #header>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<Icon <IconifyIcon icon="ep:setting" class="text-18px text-primary" />
icon="ep:setting" <span class="text-16px font-600 text-primary"> 执行器配置 </span>
class="text-18px text-[var(--el-color-primary)]" <Tag size="small" type="info"> {{ actions.length }} 个执行器 </Tag>
/>
<span class="text-16px font-600 text-[var(--el-text-color-primary)]"
>执行器配置</span
>
<el-tag size="small" type="info">
{{ actions.length }} 个执行器
</el-tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<el-button type="primary" size="small" @click="addAction"> <Button type="primary" size="small" @click="addAction">
<Icon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
添加执行器 添加执行器
</el-button> </Button>
</div> </div>
</div> </div>
</template> </template>
@@ -174,12 +173,12 @@ const onActionTypeChange = (action: Action, type: number) => {
<div class="p-0"> <div class="p-0">
<!-- 空状态 --> <!-- 空状态 -->
<div v-if="actions.length === 0"> <div v-if="actions.length === 0">
<el-empty description="暂无执行器配置"> <Empty description="暂无执行器配置">
<el-button type="primary" @click="addAction"> <Button type="primary" @click="addAction">
<Icon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
添加第一个执行器 添加第一个执行器
</el-button> </Button>
</el-empty> </Empty>
</div> </div>
<!-- 执行器列表 --> <!-- 执行器列表 -->
@@ -204,26 +203,26 @@ const onActionTypeChange = (action: Action, type: number) => {
</div> </div>
<span>执行器 {{ index + 1 }}</span> <span>执行器 {{ index + 1 }}</span>
</div> </div>
<el-tag <Tag
:type="getActionTypeTag(action.type)" :type="getActionTypeTag(action.type as any)"
size="small" size="small"
class="font-500" class="font-500"
> >
{{ getActionTypeLabel(action.type) }} {{ getActionTypeLabel(action.type as any) }}
</el-tag> </Tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<el-button <Button
v-if="actions.length > 1" v-if="actions.length > 1"
type="danger" danger
size="small" size="small"
text text
@click="removeAction(index)" @click="removeAction(index)"
class="hover:bg-red-50" class="hover:bg-red-50"
> >
<Icon icon="ep:delete" /> <IconifyIcon icon="ep:delete" />
删除 删除
</el-button> </Button>
</div> </div>
</div> </div>
@@ -231,36 +230,39 @@ const onActionTypeChange = (action: Action, type: number) => {
<div class="p-16px space-y-16px"> <div class="p-16px space-y-16px">
<!-- 执行类型选择 --> <!-- 执行类型选择 -->
<div class="w-full"> <div class="w-full">
<el-form-item label="执行类型" required> <Form.Item label="执行类型" required>
<el-select <Select
:model-value="action.type" :model-value="action.type"
@update:model-value=" @update:model-value="
(value) => updateActionType(index, value) (value: number) => updateActionType(index, value)
" "
@change="(value) => onActionTypeChange(action, value)" @change="(value) => onActionTypeChange(action, value)"
placeholder="请选择执行类型" placeholder="请选择执行类型"
class="w-full" class="w-full"
> >
<el-option <Select.Option
v-for="option in getActionTypeOptions()" v-for="option in getActionTypeOptions()"
:key="option.value" :key="option.value"
:label="option.label" :label="option.label"
:value="option.value" :value="option.value"
/> />
</el-select> </Select>
</el-form-item> </Form.Item>
</div> </div>
<!-- 设备控制配置 --> <!-- 设备控制配置 -->
<DeviceControlConfig <DeviceControlConfig
v-if="isDeviceAction(action.type)" v-if="isDeviceAction(action.type as any)"
:model-value="action" :model-value="action"
@update:model-value="(value) => updateAction(index, value)" @update:model-value="(value) => updateAction(index, value)"
/> />
<!-- 告警配置 - 只有恢复告警时才显示 --> <!-- 告警配置 - 只有恢复告警时才显示 -->
<AlertConfig <AlertConfig
v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER" v-if="
action.type ===
IotRuleSceneActionTypeEnum.ALERT_RECOVER.toString()
"
:model-value="action.alertConfigId" :model-value="action.alertConfigId"
@update:model-value=" @update:model-value="
(value) => updateActionAlertConfig(index, value) (value) => updateActionAlertConfig(index, value)
@@ -269,19 +271,16 @@ const onActionTypeChange = (action: Action, type: number) => {
<!-- 触发告警提示 - 触发告警时显示 --> <!-- 触发告警提示 - 触发告警时显示 -->
<div <div
v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER" v-if="
class="rounded-6px p-16px border border-[var(--el-border-color-light)] bg-[var(--el-fill-color-blank)]" action.type ===
IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
"
class="rounded-6px p-16px border-border bg-fill-color-blank border"
> >
<div class="gap-8px mb-8px flex items-center"> <div class="gap-8px mb-8px flex items-center">
<Icon <IconifyIcon icon="ep:warning" class="text-16px text-warning" />
icon="ep:warning" <span class="text-14px font-600 text-primary">触发告警</span>
class="text-16px text-[var(--el-color-warning)]" <Tag size="small" type="warning">自动执行</Tag>
/>
<span
class="text-14px font-600 text-[var(--el-text-color-primary)]"
>触发告警</span
>
<el-tag size="small" type="warning">自动执行</el-tag>
</div> </div>
<div <div
class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]" class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]"
@@ -296,11 +295,11 @@ const onActionTypeChange = (action: Action, type: number) => {
<!-- 添加提示 --> <!-- 添加提示 -->
<div v-if="actions.length > 0" class="py-16px text-center"> <div v-if="actions.length > 0" class="py-16px text-center">
<el-button type="primary" plain @click="addAction"> <Button type="primary" plain @click="addAction">
<Icon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
继续添加执行器 继续添加执行器
</el-button> </Button>
</div> </div>
</div> </div>
</el-card> </Card>
</template> </template>

72
apps/web-antd/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue
View File

@@ -2,9 +2,12 @@
<script setup lang="ts"> <script setup lang="ts">
import type { IotSceneRule } from '#/api/iot/rule/scene'; import type { IotSceneRule } from '#/api/iot/rule/scene';
import { DICT_TYPE, getIntDictOptions } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Card, Col, Form, Input, Radio, Row } from 'ant-design-vue';
/** 基础信息配置组件 */ /** 基础信息配置组件 */
defineOptions({ name: 'BasicInfoSection' }); defineOptions({ name: 'BasicInfoSection' });
@@ -22,65 +25,62 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
</script> </script>
<template> <template>
<el-card <Card class="rounded-8px mb-10px border-primary border" shadow="never">
class="rounded-8px mb-10px border border-[var(--el-border-color-light)]" <template #title>
shadow="never"
>
<template #header>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<Icon <IconifyIcon icon="ep:info-filled" class="text-18px text-primary" />
icon="ep:info-filled" <span class="text-16px font-600 text-primary">基础信息</span>
class="text-18px text-[var(--el-color-primary)]"
/>
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">基础信息</span>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" /> <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" />
</div> </div>
</div> </div>
</template> </template>
<div class="p-0"> <div class="p-0">
<el-row :gutter="24" class="mb-24px"> <Row :gutter="24" class="mb-24px">
<el-col :span="12"> <Col :span="12">
<el-form-item label="场景名称" prop="name" required> <Form.Item label="场景名称" prop="name" required>
<el-input <Input
v-model="formData.name" v-model="formData.name"
placeholder="请输入场景名称" placeholder="请输入场景名称"
maxlength="50" :maxlength="50"
show-word-limit show-word-limit
clearable clearable
/> />
</el-form-item> </Form.Item>
</el-col> </Col>
<el-col :span="12"> <Col :span="12">
<el-form-item label="场景状态" prop="status" required> <Form.Item label="场景状态" prop="status" required>
<el-radio-group v-model="formData.status"> <Radio.Group v-model="formData.status">
<el-radio <Radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" v-for="(dict, index) in getDictOptions(
:key="dict.value" DICT_TYPE.COMMON_STATUS,
'number',
)"
:key="index"
:label="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</el-radio> </Radio>
</el-radio-group> </Radio.Group>
</el-form-item> </Form.Item>
</el-col> </Col>
</el-row> </Row>
<el-form-item label="场景描述" prop="description"> <Form.Item label="场景描述" prop="description">
<el-input <Input.TextArea
v-model="formData.description" v-model="formData.description"
type="textarea" type="text"
placeholder="请输入场景描述（可选）" placeholder="请输入场景描述（可选）"
:rows="3" :rows="3"
maxlength="200" :maxlength="200"
show-word-limit show-word-limit
resize="none" resize="none"
/> />
</el-form-item> </Form.Item>
</div> </div>
</el-card> </Card>
</template> </template>
<style scoped> <style scoped>

124
apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue
View File

@@ -1,9 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Trigger } from '#/api/iot/rule/scene'; import type { Trigger } from '#/api/iot/rule/scene';
import { Crontab } from '@/components/Crontab'; import { onMounted } from 'vue';
import { useVModel } from '@vueuse/core';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import { Button, Card, Empty, Form, Tag } from 'ant-design-vue';
import { CronTab } from '#/components/cron-tab';
import { import {
getTriggerTypeLabel, getTriggerTypeLabel,
IotRuleSceneTriggerTypeEnum, IotRuleSceneTriggerTypeEnum,
@@ -26,19 +31,19 @@ const emit = defineEmits<{
const triggers = useVModel(props, 'triggers', emit); const triggers = useVModel(props, 'triggers', emit);
/** 获取触发器标签类型（用于 el-tag 的 type 属性） */ /** 获取触发器标签类型（用于 el-tag 的 type 属性） */
const getTriggerTagType = ( function getTriggerTagType(
type: number, type: number,
): 'danger' | 'info' | 'primary' | 'success' | 'warning' => { ): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
if (type === IotRuleSceneTriggerTypeEnum.TIMER) { if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
return 'warning'; return 'warning';
} }
return isDeviceTrigger(type) ? 'success' : 'info'; return isDeviceTrigger(type) ? 'success' : 'info';
}; }
/** 添加触发器 */ /** 添加触发器 */
const addTrigger = () => { function addTrigger() {
const newTrigger: Trigger = { const newTrigger: Trigger = {
type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE, type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE.toString(),
productId: undefined, productId: undefined,
deviceId: undefined, deviceId: undefined,
identifier: undefined, identifier: undefined,
@@ -48,52 +53,52 @@ const addTrigger = () => {
conditionGroups: [], // 空的条件组数组 conditionGroups: [], // 空的条件组数组
}; };
triggers.value.push(newTrigger); triggers.value.push(newTrigger);
}; }
/** /**
* 删除触发器 * 删除触发器
* @param index 触发器索引 * @param index 触发器索引
*/ */
const removeTrigger = (index: number) => { function removeTrigger(index: number) {
if (triggers.value.length > 1) { if (triggers.value.length > 1) {
triggers.value.splice(index, 1); triggers.value.splice(index, 1);
} }
}; }
/** /**
* 更新触发器类型 * 更新触发器类型
* @param index 触发器索引 * @param index 触发器索引
* @param type 触发器类型 * @param type 触发器类型
*/ */
const updateTriggerType = (index: number, type: number) => { function updateTriggerType(index: number, type: number) {
triggers.value[index].type = type; triggers.value[index].type = type;
onTriggerTypeChange(index, type); onTriggerTypeChange(index, type);
}; }
/** /**
* 更新触发器设备配置 * 更新触发器设备配置
* @param index 触发器索引 * @param index 触发器索引
* @param newTrigger 新的触发器对象 * @param newTrigger 新的触发器对象
*/ */
const updateTriggerDeviceConfig = (index: number, newTrigger: Trigger) => { function updateTriggerDeviceConfig(index: number, newTrigger: Trigger) {
triggers.value[index] = newTrigger; triggers.value[index] = newTrigger;
}; }
/** /**
* 更新触发器 CRON 配置 * 更新触发器 CRON 配置
* @param index 触发器索引 * @param index 触发器索引
* @param cronExpression CRON 表达式 * @param cronExpression CRON 表达式
*/ */
const updateTriggerCronConfig = (index: number, cronExpression?: string) => { function updateTriggerCronConfig(index: number, cronExpression?: string) {
triggers.value[index].cronExpression = cronExpression; triggers.value[index].cronExpression = cronExpression;
}; }
/** /**
* 处理触发器类型变化事件 * 处理触发器类型变化事件
* @param index 触发器索引 * @param index 触发器索引
* @param _ 触发器类型（未使用） * @param _ 触发器类型（未使用）
*/ */
const onTriggerTypeChange = (index: number, _: number) => { function onTriggerTypeChange(index: number, _: number) {
const triggerItem = triggers.value[index]; const triggerItem = triggers.value[index];
triggerItem.productId = undefined; triggerItem.productId = undefined;
triggerItem.deviceId = undefined; triggerItem.deviceId = undefined;
@@ -102,7 +107,7 @@ const onTriggerTypeChange = (index: number, _: number) => {
triggerItem.value = undefined; triggerItem.value = undefined;
triggerItem.cronExpression = undefined; triggerItem.cronExpression = undefined;
triggerItem.conditionGroups = []; triggerItem.conditionGroups = [];
}; }
/** 初始化：确保至少有一个触发器 */ /** 初始化：确保至少有一个触发器 */
onMounted(() => { onMounted(() => {
@@ -113,28 +118,18 @@ onMounted(() => {
</script> </script>
<template> <template>
<el-card <Card class="rounded-8px mb-10px border-primary border" shadow="never">
class="rounded-8px mb-10px border border-[var(--el-border-color-light)]" <template #title>
shadow="never"
>
<template #header>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<Icon <IconifyIcon icon="ep:lightning" class="text-18px text-primary" />
icon="ep:lightning" <span class="text-16px font-600 text-primary">触发器配置</span>
class="text-18px text-[var(--el-color-primary)]" <Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag>
/>
<span class="text-16px font-600 text-[var(--el-text-color-primary)]"
>触发器配置</span
>
<el-tag size="small" type="info">
{{ triggers.length }} 个触发器
</el-tag>
</div> </div>
<el-button type="primary" size="small" @click="addTrigger"> <Button type="primary" size="small" @click="addTrigger">
<Icon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
添加触发器 添加触发器
</el-button> </Button>
</div> </div>
</template> </template>
@@ -161,26 +156,26 @@ onMounted(() => {
</div> </div>
<span>触发器 {{ index + 1 }}</span> <span>触发器 {{ index + 1 }}</span>
</div> </div>
<el-tag <Tag
size="small" size="small"
:type="getTriggerTagType(triggerItem.type)" :type="getTriggerTagType(triggerItem.type as any)"
class="font-500" class="font-500"
> >
{{ getTriggerTypeLabel(triggerItem.type) }} {{ getTriggerTypeLabel(triggerItem.type as any) }}
</el-tag> </Tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<el-button <Button
v-if="triggers.length > 1" v-if="triggers.length > 1"
type="danger" danger
size="small" size="small"
text text
@click="removeTrigger(index)" @click="removeTrigger(index)"
class="hover:bg-red-50" class="hover:bg-red-50"
> >
<Icon icon="ep:delete" /> <IconifyIcon icon="ep:delete" />
删除 删除
</el-button> </Button>
</div> </div>
</div> </div>
@@ -188,7 +183,7 @@ onMounted(() => {
<div class="p-16px space-y-16px"> <div class="p-16px space-y-16px">
<!-- 设备触发配置 --> <!-- 设备触发配置 -->
<DeviceTriggerConfig <DeviceTriggerConfig
v-if="isDeviceTrigger(triggerItem.type)" v-if="isDeviceTrigger(triggerItem.type as any)"
:model-value="triggerItem" :model-value="triggerItem"
:index="index" :index="index"
@update:model-value=" @update:model-value="
@@ -199,34 +194,33 @@ onMounted(() => {
<!-- 定时触发配置 --> <!-- 定时触发配置 -->
<div <div
v-else-if="triggerItem.type === IotRuleSceneTriggerTypeEnum.TIMER" v-else-if="
triggerItem.type ===
IotRuleSceneTriggerTypeEnum.TIMER.toString()
"
class="gap-16px flex flex-col" class="gap-16px flex flex-col"
> >
<div <div
class="gap-8px p-12px px-16px rounded-6px flex items-center border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]" class="gap-8px p-12px px-16px rounded-6px border-primary bg-background flex items-center border"
>
<Icon
icon="ep:timer"
class="text-18px text-[var(--el-color-danger)]"
/>
<span
class="text-14px font-500 text-[var(--el-text-color-primary)]"
>定时触发配置</span
> >
<IconifyIcon icon="ep:timer" class="text-18px text-danger" />
<span class="text-14px font-500 text-primary">
定时触发配置
</span>
</div> </div>
<!-- CRON 表达式配置 --> <!-- CRON 表达式配置 -->
<div <div
class="p-16px rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)]" class="p-16px rounded-6px border-primary bg-background border"
> >
<el-form-item label="CRON表达式" required> <Form.Item label="CRON表达式" required>
<Crontab <CronTab
:model-value="triggerItem.cronExpression || '0 0 12 * * ?'" :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
@update:model-value=" @update:model-value="
(value) => updateTriggerCronConfig(index, value) (value) => updateTriggerCronConfig(index, value)
" "
/> />
</el-form-item> </Form.Item>
</div> </div>
</div> </div>
</div> </div>
@@ -235,19 +229,17 @@ onMounted(() => {
<!-- 空状态 --> <!-- 空状态 -->
<div v-else class="py-40px text-center"> <div v-else class="py-40px text-center">
<el-empty description="暂无触发器"> <Empty description="暂无触发器">
<template #description> <template #description>
<div class="space-y-8px"> <div class="space-y-8px">
<p class="text-[var(--el-text-color-secondary)]"> <p class="text-secondary">暂无触发器配置</p>
暂无触发器配置 <p class="text-12px text-primary">
</p>
<p class="text-12px text-[var(--el-text-color-placeholder)]">
请使用上方的"添加触发器"按钮来设置触发规则 请使用上方的"添加触发器"按钮来设置触发规则
</p> </p>
</div> </div>
</template> </template>
</el-empty> </Empty>
</div> </div>
</div> </div>
</el-card> </Card>
</template> </template>

33
apps/web-antd/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue
View File

@@ -1,8 +1,13 @@
<!-- 设备选择器组件 --> <!-- 设备选择器组件 -->
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue';
import { DICT_TYPE } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { DeviceApi } from '#/api/iot/device/device'; import { Select } from 'ant-design-vue';
import { getDeviceListByProductId } from '#/api/iot/device/device';
import { DictTag } from '#/components/dict-tag';
import { DEVICE_SELECTOR_OPTIONS } from '#/views/iot/utils/constants'; import { DEVICE_SELECTOR_OPTIONS } from '#/views/iot/utils/constants';
/** 设备选择器组件 */ /** 设备选择器组件 */
@@ -25,15 +30,15 @@ const deviceList = ref<any[]>([]); // 设备列表
* 处理选择变化事件 * 处理选择变化事件
* @param value 选中的设备ID * @param value 选中的设备ID
*/ */
const handleChange = (value?: number) => { function handleChange(value?: number) {
emit('update:modelValue', value); emit('update:modelValue', value);
emit('change', value); emit('change', value);
}; }
/** /**
* 获取设备列表 * 获取设备列表
*/ */
const getDeviceList = async () => { async function getDeviceList() {
if (!props.productId) { if (!props.productId) {
deviceList.value = []; deviceList.value = [];
return; return;
@@ -41,7 +46,7 @@ const getDeviceList = async () => {
try { try {
deviceLoading.value = true; deviceLoading.value = true;
const res = await DeviceApi.getDeviceListByProductId(props.productId); const res = await getDeviceListByProductId(props.productId);
deviceList.value = res || []; deviceList.value = res || [];
} catch (error) { } catch (error) {
console.error('获取设备列表失败:', error); console.error('获取设备列表失败:', error);
@@ -50,7 +55,7 @@ const getDeviceList = async () => {
deviceList.value.unshift(DEVICE_SELECTOR_OPTIONS.ALL_DEVICES); deviceList.value.unshift(DEVICE_SELECTOR_OPTIONS.ALL_DEVICES);
deviceLoading.value = false; deviceLoading.value = false;
} }
}; }
// 监听产品变化 // 监听产品变化
watch( watch(
@@ -72,7 +77,7 @@ watch(
</script> </script>
<template> <template>
<el-select <Select
:model-value="modelValue" :model-value="modelValue"
@update:model-value="handleChange" @update:model-value="handleChange"
placeholder="请选择设备" placeholder="请选择设备"
@@ -82,7 +87,7 @@ watch(
:loading="deviceLoading" :loading="deviceLoading"
:disabled="!productId" :disabled="!productId"
> >
<el-option <Select.Option
v-for="device in deviceList" v-for="device in deviceList"
:key="device.id" :key="device.id"
:label="device.deviceName" :label="device.deviceName"
@@ -90,19 +95,17 @@ watch(
> >
<div class="py-4px flex w-full items-center justify-between"> <div class="py-4px flex w-full items-center justify-between">
<div class="flex-1"> <div class="flex-1">
<div <div class="text-14px font-500 mb-2px text-primary">
class="text-14px font-500 mb-2px text-[var(--el-text-color-primary)]"
>
{{ device.deviceName }} {{ device.deviceName }}
</div> </div>
<div class="text-12px text-[var(--el-text-color-secondary)]"> <div class="text-12px text-primary">
{{ device.deviceKey }} {{ device.deviceKey }}
</div> </div>
</div> </div>
<div class="gap-4px flex items-center" v-if="device.id > 0"> <div class="gap-4px flex items-center" v-if="device.id > 0">
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" /> <DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
</div> </div>
</div> </div>
</el-option> </Select.Option>
</el-select> </Select>
</template> </template>

21
apps/web-antd/src/views/iot/rule/scene/form/selectors/OperatorSelector.vue
View File

@@ -1,6 +1,9 @@
<!-- 操作符选择器组件 --> <!-- 操作符选择器组件 -->
<script setup lang="ts"> <script setup lang="ts">
import { computed, watch } from 'vue';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Select } from 'ant-design-vue';
import { import {
IoTDataSpecsDataTypeEnum, IoTDataSpecsDataTypeEnum,
@@ -211,9 +214,9 @@ const selectedOperator = computed(() => {
* 处理选择变化事件 * 处理选择变化事件
* @param value 选中的操作符值 * @param value 选中的操作符值
*/ */
const handleChange = (value: string) => { function handleChange(value: any) {
emit('change', value); emit('change', value);
}; }
/** 监听属性类型变化 */ /** 监听属性类型变化 */
watch( watch(
@@ -235,13 +238,13 @@ watch(
<template> <template>
<div class="w-full"> <div class="w-full">
<el-select <Select
v-model="localValue" v-model="localValue"
placeholder="请选择操作符" placeholder="请选择操作符"
@change="handleChange" @change="handleChange"
class="w-full" class="w-full"
> >
<el-option <Select.Option
v-for="operator in availableOperators" v-for="operator in availableOperators"
:key="operator.value" :key="operator.value"
:label="operator.label" :label="operator.label"
@@ -249,21 +252,21 @@ watch(
> >
<div class="py-4px flex w-full items-center justify-between"> <div class="py-4px flex w-full items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<div class="text-14px font-500 text-[var(--el-text-color-primary)]"> <div class="text-14px font-500 text-primary">
{{ operator.label }} {{ operator.label }}
</div> </div>
<div <div
class="text-12px px-6px py-2px rounded-4px bg-[var(--el-color-primary-light-9)] font-mono text-[var(--el-color-primary)]" class="text-12px px-6px py-2px rounded-4px bg-primary-light-9 text-primary font-mono"
> >
{{ operator.symbol }} {{ operator.symbol }}
</div> </div>
</div> </div>
<div class="text-12px text-[var(--el-text-color-secondary)]"> <div class="text-12px text-secondary">
{{ operator.description }} {{ operator.description }}
</div> </div>
</div> </div>
</el-option> </Select.Option>
</el-select> </Select>
</div> </div>
</template> </template>

30
apps/web-antd/src/views/iot/rule/scene/form/selectors/ProductSelector.vue
View File

@@ -1,8 +1,12 @@
<!-- 产品选择器组件 --> <!-- 产品选择器组件 -->
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue';
import { DICT_TYPE } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { ProductApi } from '#/api/iot/product/product'; import { Select } from 'ant-design-vue';
import { getSimpleProductList } from '#/api/iot/product/product';
/** 产品选择器组件 */ /** 产品选择器组件 */
defineOptions({ name: 'ProductSelector' }); defineOptions({ name: 'ProductSelector' });
@@ -23,16 +27,16 @@ const productList = ref<any[]>([]); // 产品列表
* 处理选择变化事件 * 处理选择变化事件
* @param value 选中的产品 ID * @param value 选中的产品 ID
*/ */
const handleChange = (value?: number) => { function handleChange(value?: number) {
emit('update:modelValue', value); emit('update:modelValue', value);
emit('change', value); emit('change', value);
}; }
/** 获取产品列表 */ /** 获取产品列表 */
const getProductList = async () => { async function getProductList() {
try { try {
productLoading.value = true; productLoading.value = true;
const res = await ProductApi.getSimpleProductList(); const res = await getSimpleProductList();
productList.value = res || []; productList.value = res || [];
} catch (error) { } catch (error) {
console.error('获取产品列表失败:', error); console.error('获取产品列表失败:', error);
@@ -40,7 +44,7 @@ const getProductList = async () => {
} finally { } finally {
productLoading.value = false; productLoading.value = false;
} }
}; }
// 组件挂载时获取产品列表 // 组件挂载时获取产品列表
onMounted(() => { onMounted(() => {
@@ -49,7 +53,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<el-select <Select
:model-value="modelValue" :model-value="modelValue"
@update:model-value="handleChange" @update:model-value="handleChange"
placeholder="请选择产品" placeholder="请选择产品"
@@ -58,7 +62,7 @@ onMounted(() => {
class="w-full" class="w-full"
:loading="productLoading" :loading="productLoading"
> >
<el-option <Select.Option
v-for="product in productList" v-for="product in productList"
:key="product.id" :key="product.id"
:label="product.name" :label="product.name"
@@ -66,17 +70,15 @@ onMounted(() => {
> >
<div class="py-4px flex w-full items-center justify-between"> <div class="py-4px flex w-full items-center justify-between">
<div class="flex-1"> <div class="flex-1">
<div <div class="text-14px font-500 mb-2px text-primary">
class="text-14px font-500 mb-2px text-[var(--el-text-color-primary)]"
>
{{ product.name }} {{ product.name }}
</div> </div>
<div class="text-12px text-[var(--el-text-color-secondary)]"> <div class="text-12px text-secondary">
{{ product.productKey }} {{ product.productKey }}
</div> </div>
</div> </div>
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" /> <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" />
</div> </div>
</el-option> </Select.Option>
</el-select> </Select>
</template> </template>

130
apps/web-antd/src/views/iot/rule/scene/form/selectors/PropertySelector.vue
View File

@@ -1,17 +1,20 @@
<!-- 属性选择器组件 --> <!-- 属性选择器组件 -->
<script setup lang="ts"> <script setup lang="ts">
import type { import type {
IotThingModelTSLResp, ThingModelApi,
ThingModelEvent, ThingModelEvent,
ThingModelParam,
ThingModelProperty, ThingModelProperty,
ThingModelService, ThingModelService,
} from '#/api/iot/thingmodel'; } from '#/api/iot/thingmodel';
import { InfoFilled } from '@element-plus/icons-vue'; import { computed, ref, watch } from 'vue';
import { useVModel } from '@vueuse/core';
import { ThingModelApi } from '#/api/iot/thingmodel'; import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import { Button, Popover, Select, Tag } from 'ant-design-vue';
import { getThingModelListByProductId } from '#/api/iot/thingmodel';
import { import {
getAccessModeLabel, getAccessModeLabel,
getDataTypeName, getDataTypeName,
@@ -61,8 +64,8 @@ interface PropertySelectorItem {
const localValue = useVModel(props, 'modelValue', emit); const localValue = useVModel(props, 'modelValue', emit);
const loading = ref(false); // 加载状态 const loading = ref(false); // 加载状态
const propertyList = ref<PropertySelectorItem[]>([]); // 属性列表 const propertyList = ref<ThingModelApi.Property[]>([]); // 属性列表
const thingModelTSL = ref<IotThingModelTSLResp | null>(null); // 物模型TSL数据 const thingModelTSL = ref<null | ThingModelApi.ThingModel>(null); // 物模型TSL数据
// 计算属性：属性分组 // 计算属性：属性分组
const propertyGroups = computed(() => { const propertyGroups = computed(() => {
@@ -107,7 +110,7 @@ const selectedProperty = computed(() => {
* 处理选择变化事件 * 处理选择变化事件
* @param value 选中的属性标识符 * @param value 选中的属性标识符
*/ */
const handleChange = (value: string) => { function handleChange(value: any) {
const property = propertyList.value.find((p) => p.identifier === value); const property = propertyList.value.find((p) => p.identifier === value);
if (property) { if (property) {
emit('change', { emit('change', {
@@ -115,12 +118,12 @@ const handleChange = (value: string) => {
config: property, config: property,
}); });
} }
}; }
/** /**
* 获取物模型TSL数据 * 获取物模型TSL数据
*/ */
const getThingModelTSL = async () => { async function getThingModelTSL() {
if (!props.productId) { if (!props.productId) {
thingModelTSL.value = null; thingModelTSL.value = null;
propertyList.value = []; propertyList.value = [];
@@ -129,9 +132,7 @@ const getThingModelTSL = async () => {
loading.value = true; loading.value = true;
try { try {
const tslData = await ThingModelApi.getThingModelTSLByProductId( const tslData = await getThingModelListByProductId(props.productId);
props.productId,
);
if (tslData) { if (tslData) {
thingModelTSL.value = tslData; thingModelTSL.value = tslData;
@@ -146,10 +147,10 @@ const getThingModelTSL = async () => {
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; }
/** 解析物模型 TSL 数据 */ /** 解析物模型 TSL 数据 */
const parseThingModelData = () => { function parseThingModelData() {
const tsl = thingModelTSL.value; const tsl = thingModelTSL.value;
const properties: PropertySelectorItem[] = []; const properties: PropertySelectorItem[] = [];
@@ -210,14 +211,14 @@ const parseThingModelData = () => {
}); });
} }
propertyList.value = properties; propertyList.value = properties;
}; }
/** /**
* 获取属性单位 * 获取属性单位
* @param property 属性对象 * @param property 属性对象
* @returns 属性单位 * @returns 属性单位
*/ */
const getPropertyUnit = (property: any) => { function getPropertyUnit(property: any) {
if (!property) return undefined; if (!property) return undefined;
// 数值型数据的单位 // 数值型数据的单位
@@ -226,14 +227,14 @@ const getPropertyUnit = (property: any) => {
} }
return undefined; return undefined;
}; }
/** /**
* 获取属性范围描述 * 获取属性范围描述
* @param property 属性对象 * @param property 属性对象
* @returns 属性范围描述 * @returns 属性范围描述
*/ */
const getPropertyRange = (property: any) => { function getPropertyRange(property: any) {
if (!property) return undefined; if (!property) return undefined;
// 数值型数据的范围 // 数值型数据的范围
@@ -252,7 +253,7 @@ const getPropertyRange = (property: any) => {
} }
return undefined; return undefined;
}; }
/** 监听产品变化 */ /** 监听产品变化 */
watch( watch(
@@ -274,7 +275,7 @@ watch(
<template> <template>
<div class="gap-8px flex items-center"> <div class="gap-8px flex items-center">
<el-select <Select
v-model="localValue" v-model="localValue"
placeholder="请选择监控项" placeholder="请选择监控项"
filterable filterable
@@ -283,39 +284,37 @@ watch(
class="!w-150px" class="!w-150px"
:loading="loading" :loading="loading"
> >
<el-option-group <Select.OptionGroup
v-for="group in propertyGroups" v-for="group in propertyGroups"
:key="group.label" :key="group.label"
:label="group.label" :label="group.label"
> >
<el-option <Select.Option
v-for="property in group.options" v-for="property in group.options"
:key="property.identifier" :key="property.identifier"
:label="property.name" :label="property.name"
:value="property.identifier" :value="property.identifier"
> >
<div class="py-2px flex w-full items-center justify-between"> <div class="py-2px flex w-full items-center justify-between">
<span <span class="text-14px font-500 text-primary flex-1 truncate">
class="text-14px font-500 flex-1 truncate text-[var(--el-text-color-primary)]"
>
{{ property.name }} {{ property.name }}
</span> </span>
<el-tag <Tag
:type="getDataTypeTagType(property.dataType)" :type="getDataTypeTagType(property.dataType)"
size="small" size="small"
class="ml-8px flex-shrink-0" class="ml-8px flex-shrink-0"
> >
{{ property.identifier }} {{ property.identifier }}
</el-tag> </Tag>
</div> </div>
</el-option> </Select.Option>
</el-option-group> </Select.OptionGroup>
</el-select> </Select>
<!-- 属性详情弹出层 --> <!-- 属性详情弹出层 -->
<el-popover <Popover
v-if="selectedProperty" v-if="selectedProperty"
placement="right-start" placement="rightTop"
:width="350" :width="350"
trigger="click" trigger="click"
:show-arrow="true" :show-arrow="true"
@@ -323,42 +322,39 @@ watch(
popper-class="property-detail-popover" popper-class="property-detail-popover"
> >
<template #reference> <template #reference>
<el-button <Button
type="info" type="primary"
:icon="InfoFilled" text
circle circle
size="small" size="small"
class="flex-shrink-0" class="flex-shrink-0"
title="查看属性详情" title="查看属性详情"
/> >
<IconifyIcon icon="ep:info-filled" />
</Button>
</template> </template>
<!-- 弹出层内容 --> <!-- 弹出层内容 -->
<div class="property-detail-content"> <div class="property-detail-content">
<div class="gap-8px mb-12px flex items-center"> <div class="gap-8px mb-12px flex items-center">
<Icon <IconifyIcon icon="ep:info-filled" class="text-16px text-info" />
icon="ep:info-filled" <span class="text-14px font-500 text-primary">
class="text-16px text-[var(--el-color-info)]"
/>
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">
{{ selectedProperty.name }} {{ selectedProperty.name }}
</span> </span>
<el-tag <Tag
:type="getDataTypeTagType(selectedProperty.dataType)" :type="getDataTypeTagType(selectedProperty.dataType)"
size="small" size="small"
> >
{{ getDataTypeName(selectedProperty.dataType) }} {{ getDataTypeName(selectedProperty.dataType) }}
</el-tag> </Tag>
</div> </div>
<div class="space-y-8px ml-24px"> <div class="space-y-8px ml-24px">
<div class="gap-8px flex items-start"> <div class="gap-8px flex items-start">
<span <span class="text-12px min-w-60px text-secondary flex-shrink-0">
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
>
标识符： 标识符：
</span> </span>
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]"> <span class="text-12px text-primary flex-1">
{{ selectedProperty.identifier }} {{ selectedProperty.identifier }}
</span> </span>
</div> </div>
@@ -367,34 +363,28 @@ watch(
v-if="selectedProperty.description" v-if="selectedProperty.description"
class="gap-8px flex items-start" class="gap-8px flex items-start"
> >
<span <span class="text-12px min-w-60px text-secondary flex-shrink-0">
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
>
描述： 描述：
</span> </span>
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]"> <span class="text-12px text-primary flex-1">
{{ selectedProperty.description }} {{ selectedProperty.description }}
</span> </span>
</div> </div>
<div v-if="selectedProperty.unit" class="gap-8px flex items-start"> <div v-if="selectedProperty.unit" class="gap-8px flex items-start">
<span <span class="text-12px min-w-60px text-secondary flex-shrink-0">
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
>
单位： 单位：
</span> </span>
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]"> <span class="text-12px text-primary flex-1">
{{ selectedProperty.unit }} {{ selectedProperty.unit }}
</span> </span>
</div> </div>
<div v-if="selectedProperty.range" class="gap-8px flex items-start"> <div v-if="selectedProperty.range" class="gap-8px flex items-start">
<span <span class="text-12px min-w-60px text-secondary flex-shrink-0">
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
>
取值范围： 取值范围：
</span> </span>
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]"> <span class="text-12px text-primary flex-1">
{{ selectedProperty.range }} {{ selectedProperty.range }}
</span> </span>
</div> </div>
@@ -407,12 +397,10 @@ watch(
" "
class="gap-8px flex items-start" class="gap-8px flex items-start"
> >
<span <span class="text-12px min-w-60px text-secondary flex-shrink-0">
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
>
访问模式： 访问模式：
</span> </span>
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]"> <span class="text-12px text-primary flex-1">
{{ getAccessModeLabel(selectedProperty.accessMode) }} {{ getAccessModeLabel(selectedProperty.accessMode) }}
</span> </span>
</div> </div>
@@ -424,12 +412,10 @@ watch(
" "
class="gap-8px flex items-start" class="gap-8px flex items-start"
> >
<span <span class="text-12px min-w-60px text-secondary flex-shrink-0">
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
>
事件类型： 事件类型：
</span> </span>
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]"> <span class="text-12px text-primary flex-1">
{{ getEventTypeLabel(selectedProperty.eventType) }} {{ getEventTypeLabel(selectedProperty.eventType) }}
</span> </span>
</div> </div>
@@ -441,18 +427,16 @@ watch(
" "
class="gap-8px flex items-start" class="gap-8px flex items-start"
> >
<span <span class="text-12px min-w-60px text-secondary flex-shrink-0">
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
>
调用类型： 调用类型：
</span> </span>
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]"> <span class="text-12px text-primary flex-1">
{{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }} {{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</el-popover> </Popover>
</div> </div>
</template> </template>

4
apps/web-antd/src/views/iot/rule/scene/index.vue
View File

@@ -9,7 +9,7 @@ import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { import {
deleteSceneRule, deleteSceneRule,
getRuleScenePage, getSceneRulePage,
updateSceneRuleStatus, updateSceneRuleStatus,
} from '#/api/iot/rule/scene'; } from '#/api/iot/rule/scene';
import { $t } from '#/locales'; import { $t } from '#/locales';
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: { proxyConfig: {
ajax: { ajax: {
query: async ({ page }, formValues) => { query: async ({ page }, formValues) => {
return await getRuleScenePage({ return await getSceneRulePage({
pageNo: page.currentPage, pageNo: page.currentPage,
pageSize: page.pageSize, pageSize: page.pageSize,
...formValues, ...formValues,

4
apps/web-antd/src/views/iot/thingmodel/modules/ThingModelEvent.vue
View File

@@ -1,5 +1,9 @@
<!-- 产品的物模型表单（event 项） --> <!-- 产品的物模型表单（event 项） -->
<script lang="ts" setup> <script lang="ts" setup>
import type { Ref } from 'vue';
import { watch } from 'vue';
import { isEmpty } from '@vben/utils'; import { isEmpty } from '@vben/utils';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';

55
apps/web-antd/src/views/iot/thingmodel/modules/ThingModelForm.vue
View File

@@ -2,18 +2,19 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import type { ProductVO } from '#/api/iot/product/product'; import type { IotProductApi } from '#/api/iot/product/product';
import type { ThingModelData } from '#/api/iot/thingmodel'; import type { ThingModelData } from '#/api/iot/thingmodel';
import { inject, ref } from 'vue'; import { inject, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { DICT_TYPE, getIntDictOptions } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import { ThingModelApi, ThingModelFormRules } from '#/api/iot/thingmodel'; import { createThingModel, updateThingModel } from '#/api/iot/thingmodel';
import { import {
IOT_PROVIDE_KEY, IOT_PROVIDE_KEY,
IoTDataSpecsDataTypeEnum, IoTDataSpecsDataTypeEnum,
@@ -29,9 +30,7 @@ defineOptions({ name: 'IoTThingModelForm' });
/** 提交表单 */ /** 提交表单 */
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息 const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
const { t } = useI18n(); // 国际化
const dialogVisible = ref(false); // 弹窗的是否展示 const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(''); // 弹窗的标题 const dialogTitle = ref(''); // 弹窗的标题
@@ -55,13 +54,13 @@ const formRef = ref(); // 表单 Ref
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
dialogVisible.value = true; dialogVisible.value = true;
dialogTitle.value = t(`action.${type}`); dialogTitle.value = $t(`action.${type}`);
formType.value = type; formType.value = type;
resetForm(); resetForm();
if (id) { if (id) {
formLoading.value = true; formLoading.value = true;
try { try {
formData.value = await ThingModelApi.getThingModel(id); formData.value = await getThingModel(id);
// 情况一：属性初始化 // 情况一：属性初始化
if ( if (
!formData.value.property || !formData.value.property ||
@@ -96,7 +95,7 @@ const open = async (type: string, id?: number) => {
}; };
defineExpose({ open, close: () => (dialogVisible.value = false) }); defineExpose({ open, close: () => (dialogVisible.value = false) });
const submitForm = async () => { async function submitForm() {
await formRef.value.validate(); await formRef.value.validate();
formLoading.value = true; formLoading.value = true;
try { try {
@@ -105,23 +104,20 @@ const submitForm = async () => {
data.productId = product!.value.id; data.productId = product!.value.id;
data.productKey = product!.value.productKey; data.productKey = product!.value.productKey;
fillExtraAttributes(data); fillExtraAttributes(data);
if (formType.value === 'create') { await (formType.value === 'create'
await ThingModelApi.createThingModel(data); ? createThingModel(data)
message.success({ content: t('common.createSuccess') }); : updateThingModel(data));
} else { message.success($t('ui.actionMessage.operationSuccess'));
await ThingModelApi.updateThingModel(data);
message.success({ content: t('common.updateSuccess') });
}
// 关闭弹窗 // 关闭弹窗
dialogVisible.value = false; dialogVisible.value = false;
emit('success'); emit('success');
} finally { } finally {
formLoading.value = false; formLoading.value = false;
} }
}; }
/** 填写额外的属性（处理不同类型的情况） */ /** 填写额外的属性（处理不同类型的情况） */
const fillExtraAttributes = (data: any) => { function fillExtraAttributes(data: any) {
// 属性 // 属性
if (data.type === IoTThingModelTypeEnum.PROPERTY) { if (data.type === IoTThingModelTypeEnum.PROPERTY) {
removeDataSpecs(data.property); removeDataSpecs(data.property);
@@ -149,22 +145,22 @@ const fillExtraAttributes = (data: any) => {
delete data.property; delete data.property;
delete data.service; delete data.service;
} }
}; }
/** 处理 dataSpecs 为空的情况 */ /** 处理 dataSpecs 为空的情况 */
const removeDataSpecs = (val: any) => { function removeDataSpecs(val: any) {
if (!val.dataSpecs || Object.keys(val.dataSpecs).length === 0) { if (!val.dataSpecs || Object.keys(val.dataSpecs).length === 0) {
delete val.dataSpecs; delete val.dataSpecs;
} }
if (!val.dataSpecsList || val.dataSpecsList.length === 0) { if (!val.dataSpecsList || val.dataSpecsList.length === 0) {
delete val.dataSpecsList; delete val.dataSpecsList;
} }
}; }
/** 重置表单 */ /** 重置表单 */
const resetForm = () => { function resetForm() {
formData.value = { formData.value = {
type: IoTThingModelTypeEnum.PROPERTY, type: IoTThingModelTypeEnum.PROPERTY.toString(),
dataType: IoTDataSpecsDataTypeEnum.INT, dataType: IoTDataSpecsDataTypeEnum.INT,
property: { property: {
dataType: IoTDataSpecsDataTypeEnum.INT, dataType: IoTDataSpecsDataTypeEnum.INT,
@@ -174,9 +170,9 @@ const resetForm = () => {
}, },
service: {}, service: {},
event: {}, event: {},
} as ThingModelData; };
formRef.value?.resetFields(); formRef.value?.resetFields();
}; }
</script> </script>
<template> <template>
@@ -192,7 +188,10 @@ const resetForm = () => {
<a-form-item label="功能类型" name="type"> <a-form-item label="功能类型" name="type">
<a-radio-group v-model:value="formData.type"> <a-radio-group v-model:value="formData.type">
<a-radio-button <a-radio-button
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)" v-for="dict in getDictOptions(
DICT_TYPE.IOT_THING_MODEL_TYPE,
'number',
)"
:key="dict.value" :key="dict.value"
:value="dict.value" :value="dict.value"
> >

19
apps/web-antd/src/views/iot/thingmodel/modules/ThingModelTSL.vue
View File

@@ -1,9 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Ref } from 'vue';
import type { ProductVO } from '#/api/iot/product/product';
import { inject, onMounted, ref } from 'vue';
import hljs from 'highlight.js'; // 导入代码高亮文件 import hljs from 'highlight.js'; // 导入代码高亮文件
import json from 'highlight.js/lib/languages/json'; import json from 'highlight.js/lib/languages/json';
import { ProductVO } from '#/api/iot/product/product'; import { getThingModelListByProductId } from '#/api/iot/thingmodel';
import { ThingModelApi } from '#/api/iot/thingmodel';
import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants'; import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants';
import 'highlight.js/styles/github.css'; // 导入代码高亮样式 import 'highlight.js/styles/github.css'; // 导入代码高亮样式
@@ -16,18 +21,18 @@ const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品
const viewMode = ref('code'); // 查看模式：code-代码视图，editor-编辑器视图 const viewMode = ref('code'); // 查看模式：code-代码视图，editor-编辑器视图
/** 打开弹窗 */ /** 打开弹窗 */
const open = () => { function open() {
dialogVisible.value = true; dialogVisible.value = true;
}; }
defineExpose({ open }); defineExpose({ open });
/** 获取 TSL */ /** 获取 TSL */
const thingModelTSL = ref({}); const thingModelTSL = ref({});
const getTsl = async () => { async function getTsl() {
thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId( thingModelTSL.value = await getThingModelListByProductId(
product?.value?.id || 0, product?.value?.id || 0,
); );
}; }
/** 初始化 */ /** 初始化 */
onMounted(async () => { onMounted(async () => {

31
apps/web-antd/src/views/iot/thingmodel/modules/components/DataDefinition.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ThingModelData } from '#/api/iot/thingmodel'; import type { ThingModelData } from '#/api/iot/thingmodel';
import { import {
getEventTypeLabel, getEventTypeLabel,
getThingModelServiceCallTypeLabel, getThingModelServiceCallTypeLabel,
@@ -15,7 +16,7 @@ defineProps<{ data: ThingModelData }>();
<template> <template>
<!-- 属性 --> <!-- 属性 -->
<template v-if="data.type === IoTThingModelTypeEnum.PROPERTY"> <template v-if="data.type === IoTThingModelTypeEnum.PROPERTY.toString()">
<!-- 非列表型：数值 --> <!-- 非列表型：数值 -->
<div <div
v-if=" v-if="
@@ -23,16 +24,16 @@ defineProps<{ data: ThingModelData }>();
IoTDataSpecsDataTypeEnum.INT, IoTDataSpecsDataTypeEnum.INT,
IoTDataSpecsDataTypeEnum.DOUBLE, IoTDataSpecsDataTypeEnum.DOUBLE,
IoTDataSpecsDataTypeEnum.FLOAT, IoTDataSpecsDataTypeEnum.FLOAT,
].includes(data.property.dataType) ].includes(data.property?.dataType as any)
" "
> >
取值范围：{{ 取值范围：{{
`${data.property.dataSpecs.min}~${data.property.dataSpecs.max}` `${data.property?.dataSpecs.min}~${data.property?.dataSpecs.max}`
}} }}
</div> </div>
<!-- 非列表型：文本 --> <!-- 非列表型：文本 -->
<div v-if="IoTDataSpecsDataTypeEnum.TEXT === data.property.dataType"> <div v-if="IoTDataSpecsDataTypeEnum.TEXT === data.property?.dataType">
数据长度：{{ data.property.dataSpecs.length }} 数据长度：{{ data.property?.dataSpecs.length }}
</div> </div>
<!-- 列表型: 数组、结构、时间（特殊） --> <!-- 列表型: 数组、结构、时间（特殊） -->
<div <div
@@ -41,7 +42,7 @@ defineProps<{ data: ThingModelData }>();
IoTDataSpecsDataTypeEnum.ARRAY, IoTDataSpecsDataTypeEnum.ARRAY,
IoTDataSpecsDataTypeEnum.STRUCT, IoTDataSpecsDataTypeEnum.STRUCT,
IoTDataSpecsDataTypeEnum.DATE, IoTDataSpecsDataTypeEnum.DATE,
].includes(data.property.dataType) ].includes(data.property?.dataType as any)
" "
> >
- -
@@ -50,29 +51,31 @@ defineProps<{ data: ThingModelData }>();
<div <div
v-if=" v-if="
[IoTDataSpecsDataTypeEnum.BOOL, IoTDataSpecsDataTypeEnum.ENUM].includes( [IoTDataSpecsDataTypeEnum.BOOL, IoTDataSpecsDataTypeEnum.ENUM].includes(
data.property.dataType, data.property?.dataType as any,
) )
" "
> >
<div> <div>
{{ {{
IoTDataSpecsDataTypeEnum.BOOL === data.property.dataType IoTDataSpecsDataTypeEnum.BOOL === data.property?.dataType
? '布尔值' ? '布尔值'
: '枚举值' : '枚举值'
}}： }}：
</div> </div>
<div v-for="item in data.property.dataSpecsList" :key="item.value"> <div v-for="item in data.property?.dataSpecsList" :key="item.value">
{{ `${item.name}-${item.value}` }} {{ `${item.name}-${item.value}` }}
</div> </div>
</div> </div>
</template> </template>
<!-- 服务 --> <!-- 服务 -->
<div v-if="data.type === IoTThingModelTypeEnum.SERVICE"> <div v-if="data.type === IoTThingModelTypeEnum.SERVICE.toString()">
调用方式：{{ getThingModelServiceCallTypeLabel(data.service!.callType) }} 调用方式：{{
getThingModelServiceCallTypeLabel(data.service?.callType as any)
}}
</div> </div>
<!-- 事件 --> <!-- 事件 -->
<div v-if="data.type === IoTThingModelTypeEnum.EVENT"> <div v-if="data.type === IoTThingModelTypeEnum.EVENT.toString()">
事件类型：{{ getEventTypeLabel(data.event!.type) }} 事件类型：{{ getEventTypeLabel(data.event?.type as any) }}
</div> </div>
</template> </template>

28
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelArrayDataSpecs.vue
View File

@@ -1,6 +1,9 @@
<!-- dataType：array 数组类型 --> <!-- dataType：array 数组类型 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { Ref } from 'vue';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Form, Input, Radio } from 'ant-design-vue';
import { import {
getDataTypeOptions, getDataTypeOptions,
@@ -17,20 +20,19 @@ const emits = defineEmits(['update:modelValue']);
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>; const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>;
/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */ /** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
const handleChange = (val: string) => { function handleChange(val: any) {
if (val !== IoTDataSpecsDataTypeEnum.STRUCT) { if (val !== IoTDataSpecsDataTypeEnum.STRUCT) {
return; return;
} }
dataSpecs.value.dataSpecsList = []; dataSpecs.value.dataSpecsList = [];
}; }
</script> </script>
<template> <template>
<el-form-item label="元素类型" prop="property.dataSpecs.childDataType"> <Form.Item label="元素类型" prop="property.dataSpecs.childDataType">
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange"> <Radio.Group v-model="dataSpecs.childDataType" @change="handleChange">
<template v-for="item in getDataTypeOptions()" :key="item.value"> <template v-for="item in getDataTypeOptions()" :key="item.value">
<el-radio <Radio
v-if=" v-if="
!( !(
[ [
@@ -44,18 +46,16 @@ const handleChange = (val: string) => {
class="w-1/3" class="w-1/3"
> >
{{ `${item.value}(${item.label})` }} {{ `${item.value}(${item.label})` }}
</el-radio> </Radio>
</template> </template>
</el-radio-group> </Radio.Group>
</el-form-item> </Form.Item>
<el-form-item label="元素个数" prop="property.dataSpecs.size"> <Form.Item label="元素个数" prop="property.dataSpecs.size">
<el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" /> <Input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
</el-form-item> </Form.Item>
<!-- Struct 型配置--> <!-- Struct 型配置-->
<ThingModelStructDataSpecs <ThingModelStructDataSpecs
v-if="dataSpecs.childDataType === IoTDataSpecsDataTypeEnum.STRUCT" v-if="dataSpecs.childDataType === IoTDataSpecsDataTypeEnum.STRUCT"
v-model="dataSpecs.dataSpecsList" v-model="dataSpecs.dataSpecsList"
/> />
</template> </template>
<style lang="scss" scoped></style>

59
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelEnumDataSpecs.vue
View File

@@ -1,10 +1,14 @@
<!-- dataType：enum 数组类型 --> <!-- dataType：enum 数组类型 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { Ref } from 'vue';
import type { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel';
import { isEmpty } from '@vben/utils'; import { isEmpty } from '@vben/utils';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Button, Form, Input, message } from 'ant-design-vue';
import { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel';
import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants'; import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
/** 枚举型的 dataSpecs 配置组件 */ /** 枚举型的 dataSpecs 配置组件 */
@@ -17,30 +21,30 @@ const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<
>; >;
/** 添加枚举项 */ /** 添加枚举项 */
const addEnum = () => { function addEnum() {
dataSpecsList.value.push({ dataSpecsList.value.push({
dataType: IoTDataSpecsDataTypeEnum.ENUM, dataType: IoTDataSpecsDataTypeEnum.ENUM,
name: '', // 枚举项的名称 name: '', // 枚举项的名称
value: undefined, // 枚举值 value: '', // 枚举值
}); });
}; }
/** 删除枚举项 */ /** 删除枚举项 */
const deleteEnum = (index: number) => { function deleteEnum(index: number) {
if (dataSpecsList.value.length === 1) { if (dataSpecsList.value.length === 1) {
message.warning('至少需要一个枚举项'); message.warning('至少需要一个枚举项');
return; return;
} }
dataSpecsList.value.splice(index, 1); dataSpecsList.value.splice(index, 1);
}; }
/** 校验枚举值 */ /** 校验枚举值 */
const validateEnumValue = (_: any, value: any, callback: any) => { function validateEnumValue(_: any, value: any, callback: any) {
if (isEmpty(value)) { if (isEmpty(value)) {
callback(new Error('枚举值不能为空')); callback(new Error('枚举值不能为空'));
return; return;
} }
if (isNaN(Number(value))) { if (Number.isNaN(Number(value))) {
callback(new Error('枚举值必须是数字')); callback(new Error('枚举值必须是数字'));
return; return;
} }
@@ -51,10 +55,10 @@ const validateEnumValue = (_: any, value: any, callback: any) => {
return; return;
} }
callback(); callback();
}; }
/** 校验枚举描述 */ /** 校验枚举描述 */
const validateEnumName = (_: any, value: string, callback: any) => { function validateEnumName(_: any, value: string, callback: any) {
if (isEmpty(value)) { if (isEmpty(value)) {
callback(new Error('枚举描述不能为空')); callback(new Error('枚举描述不能为空'));
return; return;
@@ -75,10 +79,10 @@ const validateEnumName = (_: any, value: string, callback: any) => {
return; return;
} }
callback(); callback();
}; }
/** 校验整个枚举列表 */ /** 校验整个枚举列表 */
const validateEnumList = (_: any, __: any, callback: any) => { function validateEnumList(_: any, __: any, callback: any) {
if (isEmpty(dataSpecsList.value)) { if (isEmpty(dataSpecsList.value)) {
callback(new Error('请至少添加一个枚举项')); callback(new Error('请至少添加一个枚举项'));
return; return;
@@ -95,7 +99,7 @@ const validateEnumList = (_: any, __: any, callback: any) => {
// 检查枚举值是否都是数字 // 检查枚举值是否都是数字
const hasInvalidNumber = dataSpecsList.value.some((item) => const hasInvalidNumber = dataSpecsList.value.some((item) =>
isNaN(Number(item.value)), Number.isNaN(Number(item.value)),
); );
if (hasInvalidNumber) { if (hasInvalidNumber) {
callback(new Error('存在非数字的枚举值')); callback(new Error('存在非数字的枚举值'));
@@ -110,11 +114,11 @@ const validateEnumList = (_: any, __: any, callback: any) => {
return; return;
} }
callback(); callback();
}; }
</script> </script>
<template> <template>
<el-form-item <Form.Item
:rules="[ :rules="[
{ required: true, validator: validateEnumList, trigger: 'change' }, { required: true, validator: validateEnumList, trigger: 'change' },
]" ]"
@@ -130,7 +134,7 @@ const validateEnumList = (_: any, __: any, callback: any) => {
:key="index" :key="index"
class="mb-5px flex items-center justify-between" class="mb-5px flex items-center justify-between"
> >
<el-form-item <Form.Item
:prop="`property.dataSpecsList[${index}].value`" :prop="`property.dataSpecsList[${index}].value`"
:rules="[ :rules="[
{ required: true, message: '枚举值不能为空' }, { required: true, message: '枚举值不能为空' },
@@ -138,10 +142,10 @@ const validateEnumList = (_: any, __: any, callback: any) => {
]" ]"
class="mb-0 flex-1" class="mb-0 flex-1"
> >
<el-input v-model="item.value" placeholder="请输入枚举值,如'0'" /> <Input v-model="item.value" placeholder="请输入枚举值,如'0'" />
</el-form-item> </Form.Item>
<span class="mx-2">~</span> <span class="mx-2">~</span>
<el-form-item <Form.Item
:prop="`property.dataSpecsList[${index}].name`" :prop="`property.dataSpecsList[${index}].name`"
:rules="[ :rules="[
{ required: true, message: '枚举描述不能为空' }, { required: true, message: '枚举描述不能为空' },
@@ -149,20 +153,15 @@ const validateEnumList = (_: any, __: any, callback: any) => {
]" ]"
class="mb-0 flex-1" class="mb-0 flex-1"
> >
<el-input v-model="item.name" placeholder="对该枚举项的描述" /> <Input v-model="item.name" placeholder="对该枚举项的描述" />
</el-form-item> </Form.Item>
<el-button <Button class="ml-10px" link type="primary" @click="deleteEnum(index)">
class="ml-10px"
link
type="primary"
@click="deleteEnum(index)"
>
删除 删除
</el-button> </Button>
</div> </div>
<el-button link type="primary" @click="addEnum">+添加枚举项</el-button> <Button link type="primary" @click="addEnum">+添加枚举项</Button>
</div> </div>
</el-form-item> </Form.Item>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

24
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelNumberDataSpecs.vue
View File

@@ -1,11 +1,14 @@
<!-- dataType：number 数组类型 --> <!-- dataType：number 数组类型 -->
<script lang="ts" setup> <script lang="ts" setup>
import { DICT_TYPE, getStrDictOptions } from '@vben/constants'; import type { Ref } from 'vue';
import type { DataSpecsNumberData } from '#/api/iot/thingmodel';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { DataSpecsNumberData } from '#/api/iot/thingmodel';
/** 数值型的 dataSpecs 配置组件 */ /** 数值型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelNumberDataSpecs' }); defineOptions({ name: 'ThingModelNumberDataSpecs' });
@@ -28,11 +31,11 @@ const unitChange = (UnitSpecs: string) => {
const validateMin = (_: any, __: any, callback: any) => { const validateMin = (_: any, __: any, callback: any) => {
const min = Number(dataSpecs.value.min); const min = Number(dataSpecs.value.min);
const max = Number(dataSpecs.value.max); const max = Number(dataSpecs.value.max);
if (isNaN(min)) { if (Number.isNaN(min)) {
callback(new Error('请输入有效的数值')); callback(new Error('请输入有效的数值'));
return; return;
} }
if (max !== undefined && !isNaN(max) && min >= max) { if (max !== undefined && !Number.isNaN(max) && min >= max) {
callback(new Error('最小值必须小于最大值')); callback(new Error('最小值必须小于最大值'));
return; return;
} }
@@ -44,11 +47,11 @@ const validateMin = (_: any, __: any, callback: any) => {
const validateMax = (_: any, __: any, callback: any) => { const validateMax = (_: any, __: any, callback: any) => {
const min = Number(dataSpecs.value.min); const min = Number(dataSpecs.value.min);
const max = Number(dataSpecs.value.max); const max = Number(dataSpecs.value.max);
if (isNaN(max)) { if (Number.isNaN(max)) {
callback(new Error('请输入有效的数值')); callback(new Error('请输入有效的数值'));
return; return;
} }
if (min !== undefined && !isNaN(min) && max <= min) { if (min !== undefined && !Number.isNaN(min) && max <= min) {
callback(new Error('最大值必须大于最小值')); callback(new Error('最大值必须大于最小值'));
return; return;
} }
@@ -59,7 +62,7 @@ const validateMax = (_: any, __: any, callback: any) => {
/** 校验步长 */ /** 校验步长 */
const validateStep = (_: any, __: any, callback: any) => { const validateStep = (_: any, __: any, callback: any) => {
const step = Number(dataSpecs.value.step); const step = Number(dataSpecs.value.step);
if (isNaN(step)) { if (Number.isNaN(step)) {
callback(new Error('请输入有效的数值')); callback(new Error('请输入有效的数值'));
return; return;
} }
@@ -69,7 +72,7 @@ const validateStep = (_: any, __: any, callback: any) => {
} }
const min = Number(dataSpecs.value.min); const min = Number(dataSpecs.value.min);
const max = Number(dataSpecs.value.max); const max = Number(dataSpecs.value.max);
if (!isNaN(min) && !isNaN(max) && step > max - min) { if (!Number.isNaN(min) && !Number.isNaN(max) && step > max - min) {
callback(new Error('步长不能大于最大值和最小值的差值')); callback(new Error('步长不能大于最大值和最小值的差值'));
return; return;
} }
@@ -129,8 +132,9 @@ const validateStep = (_: any, __: any, callback: any) => {
@change="unitChange" @change="unitChange"
> >
<el-option <el-option
v-for="(item, index) in getStrDictOptions( v-for="(item, index) in getDictOptions(
DICT_TYPE.IOT_THING_MODEL_UNIT, DICT_TYPE.IOT_THING_MODEL_UNIT,
'string',
)" )"
:key="index" :key="index"
:label="`${item.label}-${item.value}`" :label="`${item.label}-${item.value}`"

78
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelStructDataSpecs.vue
View File

@@ -1,10 +1,14 @@
<!-- dataType：struct 数组类型 --> <!-- dataType：struct 数组类型 -->
<script lang="ts" setup> <script lang="ts" setup>
import type { Ref } from 'vue';
import { nextTick, onMounted, ref, unref } from 'vue';
import { isEmpty } from '@vben/utils'; import { isEmpty } from '@vben/utils';
import { useVModel } from '@vueuse/core'; import { useVModel } from '@vueuse/core';
import { Button, Divider, Form, Input, Modal } from 'ant-design-vue';
import { ThingModelFormRules } from '#/api/iot/thingmodel';
import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants'; import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
import ThingModelProperty from '../ThingModelProperty.vue'; import ThingModelProperty from '../ThingModelProperty.vue';
@@ -29,7 +33,7 @@ const formData = ref<any>({
}); });
/** 打开 struct 表单 */ /** 打开 struct 表单 */
const openStructForm = (val: any) => { function openStructForm(val: any) {
dialogVisible.value = true; dialogVisible.value = true;
resetForm(); resetForm();
if (isEmpty(val)) { if (isEmpty(val)) {
@@ -46,15 +50,15 @@ const openStructForm = (val: any) => {
dataSpecsList: val.dataSpecsList, dataSpecsList: val.dataSpecsList,
}, },
}; };
}; }
/** 删除 struct 项 */ /** 删除 struct 项 */
const deleteStructItem = (index: number) => { function deleteStructItem(index: number) {
dataSpecsList.value.splice(index, 1); dataSpecsList.value.splice(index, 1);
}; }
/** 添加参数 */ /** 添加参数 */
const submitForm = async () => { async function submitForm() {
await structFormRef.value.validate(); await structFormRef.value.validate();
try { try {
@@ -88,10 +92,10 @@ const submitForm = async () => {
} finally { } finally {
dialogVisible.value = false; dialogVisible.value = false;
} }
}; }
/** 重置表单 */ /** 重置表单 */
const resetForm = () => { function resetForm() {
formData.value = { formData.value = {
property: { property: {
dataType: IoTDataSpecsDataTypeEnum.INT, dataType: IoTDataSpecsDataTypeEnum.INT,
@@ -101,16 +105,16 @@ const resetForm = () => {
}, },
}; };
structFormRef.value?.resetFields(); structFormRef.value?.resetFields();
}; }
/** 校验 struct 不能为空 */ /** 校验 struct 不能为空 */
const validateList = (_: any, __: any, callback: any) => { function validateList(_: any, __: any, callback: any) {
if (isEmpty(dataSpecsList.value)) { if (isEmpty(dataSpecsList.value)) {
callback(new Error('struct 不能为空')); callback(new Error('struct 不能为空'));
return; return;
} }
callback(); callback();
}; }
/** 组件初始化 */ /** 组件初始化 */
onMounted(async () => { onMounted(async () => {
@@ -122,60 +126,52 @@ onMounted(async () => {
<template> <template>
<!-- struct 数据展示 --> <!-- struct 数据展示 -->
<el-form-item <Form.Item
:rules="[{ required: true, validator: validateList, trigger: 'change' }]" :rules="[{ required: true, validator: validateList, trigger: 'change' }]"
label="JSON 对象" label="JSON 对象"
> >
<div <div
v-for="(item, index) in dataSpecsList" v-for="(item, index) in dataSpecsList"
:key="index" :key="index"
class="w-1/1 struct-item px-10px mb-10px flex justify-between" class="px-10px mb-10px flex w-full justify-between bg-gray-100"
> >
<span>参数名称：{{ item.name }}</span> <span>参数名称：{{ item.name }}</span>
<div class="btn"> <div class="btn">
<el-button link type="primary" @click="openStructForm(item)"> <Button link type="primary" @click="openStructForm(item)">
编辑 编辑
</el-button> </Button>
<el-divider direction="vertical" /> <Divider direction="vertical" />
<el-button link type="danger" @click="deleteStructItem(index)"> <Button link danger @click="deleteStructItem(index)"> 删除 </Button>
删除
</el-button>
</div> </div>
</div> </div>
<el-button link type="primary" @click="openStructForm(null)"> <Button link type="primary" @click="openStructForm(null)">
+新增参数 +新增参数
</el-button> </Button>
</el-form-item> </Form.Item>
<!-- struct 表单 --> <!-- struct 表单 -->
<Dialog v-model="dialogVisible" :title="dialogTitle" append-to-body> <Modal v-model="dialogVisible" :title="dialogTitle" append-to-body>
<el-form <Form
ref="structFormRef" ref="structFormRef"
v-loading="formLoading" v-loading="formLoading"
:model="formData" :model="formData"
:rules="ThingModelFormRules" :rules="ThingModelFormRules"
label-width="100px" label-width="100px"
> >
<el-form-item label="参数名称" prop="name"> <Form.Item label="参数名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入功能名称" /> <Input v-model="formData.name" placeholder="请输入功能名称" />
</el-form-item> </Form.Item>
<el-form-item label="标识符" prop="identifier"> <Form.Item label="标识符" prop="identifier">
<el-input v-model="formData.identifier" placeholder="请输入标识符" /> <Input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item> </Form.Item>
<!-- 属性配置 --> <!-- 属性配置 -->
<ThingModelProperty v-model="formData.property" is-struct-data-specs /> <ThingModelProperty v-model="formData.property" is-struct-data-specs />
</el-form> </Form>
<template #footer> <template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm"> <Button :disabled="formLoading" type="primary" @click="submitForm">
确 定 确 定
</el-button> </Button>
<el-button @click="dialogVisible = false">取 消</el-button> <Button @click="dialogVisible = false">取 消</Button>
</template> </template>
</Dialog> </Modal>
</template> </template>
<style lang="scss" scoped>
.struct-item {
background-color: #e4f2fd;
}
</style>

59
apps/web-antd/src/views/iot/utils/constants.ts
View File

@@ -13,7 +13,7 @@ export const IoTThingModelTypeEnum = {
PROPERTY: 1, // 属性 PROPERTY: 1, // 属性
SERVICE: 2, // 服务 SERVICE: 2, // 服务
EVENT: 3, // 事件 EVENT: 3, // 事件
} as const; };
/** IoT 设备消息的方法枚举 */ /** IoT 设备消息的方法枚举 */
export const IotDeviceMessageMethodEnum = { export const IotDeviceMessageMethodEnum = {
@@ -68,7 +68,7 @@ export const IoTThingModelServiceCallTypeEnum = {
label: '同步', label: '同步',
value: 'sync', value: 'sync',
}, },
} as const; };
export const getThingModelServiceCallTypeLabel = ( export const getThingModelServiceCallTypeLabel = (
value: string, value: string,
): string | undefined => ): string | undefined =>
@@ -90,7 +90,7 @@ export const IoTThingModelEventTypeEnum = {
label: '故障', label: '故障',
value: 'error', value: 'error',
}, },
} as const; };
export const getEventTypeLabel = (value: string): string | undefined => export const getEventTypeLabel = (value: string): string | undefined =>
Object.values(IoTThingModelEventTypeEnum).find((type) => type.value === value) Object.values(IoTThingModelEventTypeEnum).find((type) => type.value === value)
?.label; ?.label;
@@ -99,7 +99,7 @@ export const getEventTypeLabel = (value: string): string | undefined =>
export const IoTThingModelParamDirectionEnum = { export const IoTThingModelParamDirectionEnum = {
INPUT: 'input', // 输入参数 INPUT: 'input', // 输入参数
OUTPUT: 'output', // 输出参数 OUTPUT: 'output', // 输出参数
} as const; };
// IoT 产品物模型访问模式枚举类 // IoT 产品物模型访问模式枚举类
export const IoTThingModelAccessModeEnum = { export const IoTThingModelAccessModeEnum = {
@@ -115,7 +115,7 @@ export const IoTThingModelAccessModeEnum = {
label: '只写', label: '只写',
value: 'w', value: 'w',
}, },
} as const; };
/** 获取访问模式标签 */ /** 获取访问模式标签 */
export const getAccessModeLabel = (value: string): string => { export const getAccessModeLabel = (value: string): string => {
@@ -136,7 +136,7 @@ export const IoTDataSpecsDataTypeEnum = {
DATE: 'date', DATE: 'date',
STRUCT: 'struct', STRUCT: 'struct',
ARRAY: 'array', ARRAY: 'array',
} as const; };
export const getDataTypeOptions = () => { export const getDataTypeOptions = () => {
return [ return [
@@ -165,7 +165,7 @@ export const getDataTypeOptionsLabel = (value: string) => {
/** 获取数据类型显示名称（用于属性选择器） */ /** 获取数据类型显示名称（用于属性选择器） */
export const getDataTypeName = (dataType: string): string => { export const getDataTypeName = (dataType: string): string => {
const typeMap = { const typeMap: Record<string, string> = {
[IoTDataSpecsDataTypeEnum.INT]: '整数', [IoTDataSpecsDataTypeEnum.INT]: '整数',
[IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数', [IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
[IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度', [IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
@@ -179,11 +179,14 @@ export const getDataTypeName = (dataType: string): string => {
return typeMap[dataType] || dataType; return typeMap[dataType] || dataType;
}; };
/** 获取数据类型标签类型（用于 el-tag 的 type 属性） */ /** 获取数据类型标签类型（用于 tag 的 type 属性） */
export const getDataTypeTagType = ( export const getDataTypeTagType = (
dataType: string, dataType: string,
): 'danger' | 'info' | 'primary' | 'success' | 'warning' => { ): 'danger' | 'info' | 'primary' | 'success' | 'warning' => {
const tagMap = { const tagMap: Record<
string,
'danger' | 'info' | 'primary' | 'success' | 'warning'
> = {
[IoTDataSpecsDataTypeEnum.INT]: 'primary', [IoTDataSpecsDataTypeEnum.INT]: 'primary',
[IoTDataSpecsDataTypeEnum.FLOAT]: 'success', [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
[IoTDataSpecsDataTypeEnum.DOUBLE]: 'success', [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
@@ -193,7 +196,7 @@ export const getDataTypeTagType = (
[IoTDataSpecsDataTypeEnum.DATE]: 'primary', [IoTDataSpecsDataTypeEnum.DATE]: 'primary',
[IoTDataSpecsDataTypeEnum.STRUCT]: 'info', [IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
[IoTDataSpecsDataTypeEnum.ARRAY]: 'warning', [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
} as const; };
return tagMap[dataType] || 'info'; return tagMap[dataType] || 'info';
}; };
@@ -202,7 +205,7 @@ export const THING_MODEL_GROUP_LABELS = {
PROPERTY: '设备属性', PROPERTY: '设备属性',
EVENT: '设备事件', EVENT: '设备事件',
SERVICE: '设备服务', SERVICE: '设备服务',
} as const; };
// IoT OTA 任务设备范围枚举 // IoT OTA 任务设备范围枚举
export const IoTOtaTaskDeviceScopeEnum = { export const IoTOtaTaskDeviceScopeEnum = {
@@ -214,7 +217,7 @@ export const IoTOtaTaskDeviceScopeEnum = {
label: '指定设备', label: '指定设备',
value: 2, value: 2,
}, },
} as const; };
// IoT OTA 任务状态枚举 // IoT OTA 任务状态枚举
export const IoTOtaTaskStatusEnum = { export const IoTOtaTaskStatusEnum = {
@@ -230,7 +233,7 @@ export const IoTOtaTaskStatusEnum = {
label: '已取消', label: '已取消',
value: 30, value: 30,
}, },
} as const; };
// IoT OTA 升级记录状态枚举 // IoT OTA 升级记录状态枚举
export const IoTOtaTaskRecordStatusEnum = { export const IoTOtaTaskRecordStatusEnum = {
@@ -258,7 +261,7 @@ export const IoTOtaTaskRecordStatusEnum = {
label: '升级取消', label: '升级取消',
value: 50, value: 50,
}, },
} as const; };
// ========== 场景联动规则相关常量 ========== // ========== 场景联动规则相关常量 ==========
@@ -269,7 +272,7 @@ export const IotRuleSceneTriggerTypeEnum = {
DEVICE_EVENT_POST: 3, // 设备事件上报 DEVICE_EVENT_POST: 3, // 设备事件上报
DEVICE_SERVICE_INVOKE: 4, // 设备服务调用 DEVICE_SERVICE_INVOKE: 4, // 设备服务调用
TIMER: 100, // 定时触发 TIMER: 100, // 定时触发
} as const; };
/** 触发器类型选项配置 */ /** 触发器类型选项配置 */
export const triggerTypeOptions = [ export const triggerTypeOptions = [
@@ -296,7 +299,7 @@ export const triggerTypeOptions = [
]; ];
/** 判断是否为设备触发器类型 */ /** 判断是否为设备触发器类型 */
export const isDeviceTrigger = (type: number): boolean => { export function isDeviceTrigger(type: number): boolean {
const deviceTriggerTypes = [ const deviceTriggerTypes = [
IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE, IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST, IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
@@ -304,7 +307,7 @@ export const isDeviceTrigger = (type: number): boolean => {
IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE, IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
] as number[]; ] as number[];
return deviceTriggerTypes.includes(type); return deviceTriggerTypes.includes(type);
}; }
// ========== 场景联动规则执行器相关常量 ========== // ========== 场景联动规则执行器相关常量 ==========
@@ -314,7 +317,7 @@ export const IotRuleSceneActionTypeEnum = {
DEVICE_SERVICE_INVOKE: 2, // 设备服务调用 DEVICE_SERVICE_INVOKE: 2, // 设备服务调用
ALERT_TRIGGER: 100, // 告警触发 ALERT_TRIGGER: 100, // 告警触发
ALERT_RECOVER: 101, // 告警恢复 ALERT_RECOVER: 101, // 告警恢复
} as const; };
/** 执行器类型选项配置 */ /** 执行器类型选项配置 */
export const getActionTypeOptions = () => [ export const getActionTypeOptions = () => [
@@ -356,14 +359,14 @@ export const IotRuleSceneTriggerConditionParameterOperatorEnum = {
NOT_BETWEEN: { name: '不在...之间', value: 'not between' }, // 不在...之间 NOT_BETWEEN: { name: '不在...之间', value: 'not between' }, // 不在...之间
LIKE: { name: '字符串匹配', value: 'like' }, // 字符串匹配 LIKE: { name: '字符串匹配', value: 'like' }, // 字符串匹配
NOT_NULL: { name: '非空', value: 'not null' }, // 非空 NOT_NULL: { name: '非空', value: 'not null' }, // 非空
} as const; };
/** IoT 场景联动触发条件类型枚举 */ /** IoT 场景联动触发条件类型枚举 */
export const IotRuleSceneTriggerConditionTypeEnum = { export const IotRuleSceneTriggerConditionTypeEnum = {
DEVICE_STATUS: 1, // 设备状态 DEVICE_STATUS: 1, // 设备状态
DEVICE_PROPERTY: 2, // 设备属性 DEVICE_PROPERTY: 2, // 设备属性
CURRENT_TIME: 3, // 当前时间 CURRENT_TIME: 3, // 当前时间
} as const; };
/** 获取条件类型选项 */ /** 获取条件类型选项 */
export const getConditionTypeOptions = () => [ export const getConditionTypeOptions = () => [
@@ -418,7 +421,7 @@ export const IoTDeviceStatusEnum = {
value2: 'not_activated', value2: 'not_activated',
tagType: 'info', tagType: 'info',
}, },
} as const; };
/** 设备选择器特殊选项 */ /** 设备选择器特殊选项 */
export const DEVICE_SELECTOR_OPTIONS = { export const DEVICE_SELECTOR_OPTIONS = {
@@ -426,7 +429,7 @@ export const DEVICE_SELECTOR_OPTIONS = {
id: 0, id: 0,
deviceName: '全部设备', deviceName: '全部设备',
}, },
} as const; };
/** IoT 场景联动触发时间操作符枚举 */ /** IoT 场景联动触发时间操作符枚举 */
export const IotRuleSceneTriggerTimeOperatorEnum = { export const IotRuleSceneTriggerTimeOperatorEnum = {
@@ -437,7 +440,7 @@ export const IotRuleSceneTriggerTimeOperatorEnum = {
BEFORE_TODAY: { name: '在今日之前', value: 'before_today' }, // 在今日之前 BEFORE_TODAY: { name: '在今日之前', value: 'before_today' }, // 在今日之前
AFTER_TODAY: { name: '在今日之后', value: 'after_today' }, // 在今日之后 AFTER_TODAY: { name: '在今日之后', value: 'after_today' }, // 在今日之后
TODAY: { name: '在今日之间', value: 'today' }, // 在今日之间 TODAY: { name: '在今日之间', value: 'today' }, // 在今日之间
} as const; };
/** 获取触发器类型标签 */ /** 获取触发器类型标签 */
export const getTriggerTypeLabel = (type: number): string => { export const getTriggerTypeLabel = (type: number): string => {
@@ -453,7 +456,7 @@ export const JsonParamsInputTypeEnum = {
EVENT: 'event', EVENT: 'event',
PROPERTY: 'property', PROPERTY: 'property',
CUSTOM: 'custom', CUSTOM: 'custom',
} as const; };
/** JSON 参数输入组件类型 */ /** JSON 参数输入组件类型 */
export type JsonParamsInputType = export type JsonParamsInputType =
@@ -512,7 +515,7 @@ export const JSON_PARAMS_INPUT_CONSTANTS = {
CUSTOM: '请先进行配置', CUSTOM: '请先进行配置',
DEFAULT: '请先进行配置', DEFAULT: '请先进行配置',
}, },
} as const; };
/** JSON 参数输入组件图标常量 */ /** JSON 参数输入组件图标常量 */
export const JSON_PARAMS_INPUT_ICONS = { export const JSON_PARAMS_INPUT_ICONS = {
@@ -539,10 +542,10 @@ export const JSON_PARAMS_INPUT_ICONS = {
ERROR: 'ep:warning', ERROR: 'ep:warning',
SUCCESS: 'ep:circle-check', SUCCESS: 'ep:circle-check',
}, },
} as const; };
/** JSON 参数输入组件示例值常量 */ /** JSON 参数输入组件示例值常量 */
export const JSON_PARAMS_EXAMPLE_VALUES = { export const JSON_PARAMS_EXAMPLE_VALUES: Record<string, any> = {
[IoTDataSpecsDataTypeEnum.INT]: { display: '25', value: 25 }, [IoTDataSpecsDataTypeEnum.INT]: { display: '25', value: 25 },
[IoTDataSpecsDataTypeEnum.FLOAT]: { display: '25.5', value: 25.5 }, [IoTDataSpecsDataTypeEnum.FLOAT]: { display: '25.5', value: 25.5 },
[IoTDataSpecsDataTypeEnum.DOUBLE]: { display: '25.5', value: 25.5 }, [IoTDataSpecsDataTypeEnum.DOUBLE]: { display: '25.5', value: 25.5 },
@@ -552,4 +555,4 @@ export const JSON_PARAMS_EXAMPLE_VALUES = {
[IoTDataSpecsDataTypeEnum.STRUCT]: { display: '{}', value: {} }, [IoTDataSpecsDataTypeEnum.STRUCT]: { display: '{}', value: {} },
[IoTDataSpecsDataTypeEnum.ARRAY]: { display: '[]', value: [] }, [IoTDataSpecsDataTypeEnum.ARRAY]: { display: '[]', value: [] },
DEFAULT: { display: '""', value: '' }, DEFAULT: { display: '""', value: '' },
} as const; };