fix：【iot 物联网】linter 报错
This commit is contained in:
YunaiV
@@ -14,8 +14,8 @@ import {
|
||||
import { getDataSinkSimpleList } from '#/api/iot/rule/data/sink';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useRuleFormSchema } from './data';
|
||||
import SourceConfigForm from './components/SourceConfigForm.vue';
|
||||
import { useRuleFormSchema } from './data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<any>();
|
||||
@@ -49,7 +49,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
|
||||
// 校验数据源配置
|
||||
await sourceConfigRef.value?.validate();
|
||||
|
||||
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as any;
|
||||
@@ -73,7 +73,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<any>();
|
||||
|
||||
|
||||
// 加载数据目的列表
|
||||
const sinkList = await getDataSinkSimpleList();
|
||||
formApi.updateSchema([
|
||||
@@ -110,7 +110,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
<Modal class="w-4/5" :title="getTitle">
|
||||
<Form class="mx-4" />
|
||||
<div class="mx-4 mt-4">
|
||||
<div class="text-sm font-medium mb-2">数据源配置</div>
|
||||
<div class="mb-2 text-sm font-medium">数据源配置</div>
|
||||
<SourceConfigForm ref="sourceConfigRef" />
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
|
||||
import { Table, Select, Button, Form, FormItem } from 'ant-design-vue';
|
||||
import { Button, Form, FormItem, Select, Table } from 'ant-design-vue';
|
||||
|
||||
import { getSimpleProductList } from '#/api/iot/product/product';
|
||||
import { getSimpleDeviceList } from '#/api/iot/device/device';
|
||||
import { getSimpleProductList } from '#/api/iot/product/product';
|
||||
import { getThingModelListByProductId } from '#/api/iot/thingmodel';
|
||||
import {
|
||||
IotDeviceMessageMethodEnum,
|
||||
@@ -25,13 +25,17 @@ const formRef = ref(); // 表单 Ref
|
||||
|
||||
// 获取上行消息方法列表
|
||||
const upstreamMethods = computed(() => {
|
||||
return Object.values(IotDeviceMessageMethodEnum).filter((item) => item.upstream);
|
||||
return Object.values(IotDeviceMessageMethodEnum).filter(
|
||||
(item) => item.upstream,
|
||||
);
|
||||
});
|
||||
|
||||
/** 根据产品 ID 过滤设备 */
|
||||
const getFilteredDevices = (productId: number) => {
|
||||
if (!productId) return [];
|
||||
return deviceList.value.filter((device: any) => device.productId === productId);
|
||||
return deviceList.value.filter(
|
||||
(device: any) => device.productId === productId,
|
||||
);
|
||||
};
|
||||
|
||||
/** 判断是否需要显示标识符选择器 */
|
||||
|
||||
@@ -145,4 +145,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
} from '#/api/iot/rule/data';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useSinkFormSchema } from './data';
|
||||
import {
|
||||
HttpConfigForm,
|
||||
KafkaMQConfigForm,
|
||||
@@ -22,6 +21,9 @@ import {
|
||||
RedisStreamConfigForm,
|
||||
RocketMQConfigForm,
|
||||
} from './config';
|
||||
import { useSinkFormSchema } from './data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const IotDataSinkTypeEnum = {
|
||||
HTTP: 1,
|
||||
@@ -32,7 +34,6 @@ const IotDataSinkTypeEnum = {
|
||||
REDIS_STREAM: 6,
|
||||
} as const;
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<any>();
|
||||
|
||||
const getTitle = computed(() => {
|
||||
@@ -118,7 +119,7 @@ watch(
|
||||
<Modal class="w-3/5" :title="getTitle">
|
||||
<Form class="mx-4" />
|
||||
<div v-if="formData" class="mx-4 mt-4">
|
||||
<div class="text-sm font-medium mb-2">配置信息</div>
|
||||
<div class="mb-2 text-sm font-medium">配置信息</div>
|
||||
<HttpConfigForm
|
||||
v-if="IotDataSinkTypeEnum.HTTP === formData.type"
|
||||
v-model="formData.config"
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { Input, Select, FormItem } from 'ant-design-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { FormItem, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import KeyValueEditor from './components/KeyValueEditor.vue';
|
||||
|
||||
defineOptions({ name: 'HttpConfigForm' });
|
||||
@@ -33,10 +34,10 @@ onMounted(() => {
|
||||
if (config.value.url) {
|
||||
if (config.value.url.startsWith('https://')) {
|
||||
urlPrefix.value = 'https://';
|
||||
urlPath.value = config.value.url.substring(8);
|
||||
urlPath.value = config.value.url.slice(8);
|
||||
} else if (config.value.url.startsWith('http://')) {
|
||||
urlPrefix.value = 'http://';
|
||||
urlPath.value = config.value.url.substring(7);
|
||||
urlPath.value = config.value.url.slice(7);
|
||||
} else {
|
||||
urlPath.value = config.value.url;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { Input, Switch, FormItem } from 'ant-design-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { FormItem, Input, Switch } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'KafkaMQConfigForm' });
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { Input, FormItem } from 'ant-design-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { FormItem, Input } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'MqttConfigForm' });
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { Input, InputNumber, FormItem } from 'ant-design-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { FormItem, Input, InputNumber } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'RabbitMQConfigForm' });
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { Input, InputNumber, FormItem } from 'ant-design-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { FormItem, Input, InputNumber } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'RedisStreamConfigForm' });
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { Input, FormItem } from 'ant-design-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { FormItem, Input } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'RocketMQConfigForm' });
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@@ -1,5 +1,66 @@
|
||||
<script lang="ts" setup>
|
||||
import { isEmpty } from '@vben/utils';
|
||||
|
||||
import { Delete, Plus } from '@element-plus/icons-vue';
|
||||
|
||||
defineOptions({ name: 'KeyValueEditor' });
|
||||
|
||||
const props = defineProps<{
|
||||
addButtonText: string;
|
||||
modelValue: Record<string, string>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
interface KeyValueItem {
|
||||
key: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const items = ref<KeyValueItem[]>([]); // 内部 key-value 项列表
|
||||
|
||||
/** 添加项目 */
|
||||
const addItem = () => {
|
||||
items.value.push({ key: '', value: '' });
|
||||
updateModelValue();
|
||||
};
|
||||
|
||||
/** 移除项目 */
|
||||
const removeItem = (index: number) => {
|
||||
items.value.splice(index, 1);
|
||||
updateModelValue();
|
||||
};
|
||||
|
||||
/** 更新 modelValue */
|
||||
const updateModelValue = () => {
|
||||
const result: Record<string, string> = {};
|
||||
items.value.forEach((item) => {
|
||||
if (item.key) {
|
||||
result[item.key] = item.value;
|
||||
}
|
||||
});
|
||||
emit('update:modelValue', result);
|
||||
};
|
||||
|
||||
/** 监听项目变化 */
|
||||
watch(items, updateModelValue, { deep: true });
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
// 列表有值后以列表中的值为准
|
||||
if (isEmpty(val) || !isEmpty(items.value)) {
|
||||
return;
|
||||
}
|
||||
items.value = Object.entries(props.modelValue).map(([key, value]) => ({
|
||||
key,
|
||||
value,
|
||||
}));
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-for="(item, index) in items" :key="index" class="flex mb-2 w-full">
|
||||
<div v-for="(item, index) in items" :key="index" class="mb-2 flex w-full">
|
||||
<el-input v-model="item.key" class="mr-2" placeholder="键" />
|
||||
<el-input v-model="item.value" placeholder="值" />
|
||||
<el-button class="ml-2" text type="danger" @click="removeItem(index)">
|
||||
@@ -16,58 +77,3 @@
|
||||
{{ addButtonText }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Delete, Plus } from '@element-plus/icons-vue'
|
||||
import { isEmpty } from '@vben/utils'
|
||||
|
||||
defineOptions({ name: 'KeyValueEditor' })
|
||||
|
||||
interface KeyValueItem {
|
||||
key: string
|
||||
value: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Record<string, string>
|
||||
addButtonText: string
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const items = ref<KeyValueItem[]>([]) // 内部 key-value 项列表
|
||||
|
||||
/** 添加项目 */
|
||||
const addItem = () => {
|
||||
items.value.push({ key: '', value: '' })
|
||||
updateModelValue()
|
||||
}
|
||||
|
||||
/** 移除项目 */
|
||||
const removeItem = (index: number) => {
|
||||
items.value.splice(index, 1)
|
||||
updateModelValue()
|
||||
}
|
||||
|
||||
/** 更新 modelValue */
|
||||
const updateModelValue = () => {
|
||||
const result: Record<string, string> = {}
|
||||
items.value.forEach((item) => {
|
||||
if (item.key) {
|
||||
result[item.key] = item.value
|
||||
}
|
||||
})
|
||||
emit('update:modelValue', result)
|
||||
}
|
||||
|
||||
/** 监听项目变化 */
|
||||
watch(items, updateModelValue, { deep: true })
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
// 列表有值后以列表中的值为准
|
||||
if (isEmpty(val) || !isEmpty(items.value)) {
|
||||
return
|
||||
}
|
||||
items.value = Object.entries(props.modelValue).map(([key, value]) => ({ key, value }))
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
import HttpConfigForm from './HttpConfigForm.vue'
|
||||
import MqttConfigForm from './MqttConfigForm.vue'
|
||||
import RocketMQConfigForm from './RocketMQConfigForm.vue'
|
||||
import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
|
||||
import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
|
||||
import RedisStreamConfigForm from './RedisStreamConfigForm.vue'
|
||||
|
||||
export {
|
||||
HttpConfigForm,
|
||||
MqttConfigForm,
|
||||
RocketMQConfigForm,
|
||||
KafkaMQConfigForm,
|
||||
RabbitMQConfigForm,
|
||||
RedisStreamConfigForm
|
||||
}
|
||||
export { default as HttpConfigForm } from './HttpConfigForm.vue';
|
||||
export { default as KafkaMQConfigForm } from './KafkaMQConfigForm.vue';
|
||||
export { default as MqttConfigForm } from './MqttConfigForm.vue';
|
||||
export { default as RabbitMQConfigForm } from './RabbitMQConfigForm.vue';
|
||||
export { default as RedisStreamConfigForm } from './RedisStreamConfigForm.vue';
|
||||
export { default as RocketMQConfigForm } from './RocketMQConfigForm.vue';
|
||||
|
||||
@@ -150,4 +150,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'IotRuleDataBridge' });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page
|
||||
description="物聯網規則引擎 - 數據橋接"
|
||||
title="數據橋接"
|
||||
>
|
||||
<Page description="物聯網規則引擎 - 數據橋接" title="數據橋接">
|
||||
<div class="p-4">
|
||||
<Button
|
||||
danger
|
||||
|
||||
@@ -1,69 +1,37 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
size="80%"
|
||||
direction="rtl"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px">
|
||||
<!-- 基础信息配置 -->
|
||||
<BasicInfoSection v-model="formData" :rules="formRules" />
|
||||
<!-- 触发器配置 -->
|
||||
<TriggerSection v-model:triggers="formData.triggers" />
|
||||
<!-- 执行器配置 -->
|
||||
<ActionSection v-model:actions="formData.actions" />
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button :disabled="submitLoading" type="primary" @click="handleSubmit">
|
||||
<Icon icon="ep:check" />
|
||||
确 定
|
||||
</el-button>
|
||||
<el-button @click="handleClose">
|
||||
<Icon icon="ep:close" />
|
||||
取 消
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import BasicInfoSection from './sections/BasicInfoSection.vue'
|
||||
import TriggerSection from './sections/TriggerSection.vue'
|
||||
import ActionSection from './sections/ActionSection.vue'
|
||||
import { IotSceneRule } from '#/api/iot/rule/scene'
|
||||
import { RuleSceneApi } from '#/api/iot/rule/scene'
|
||||
import { CommonStatusEnum } from '@/utils/constants';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import { IotSceneRule, RuleSceneApi } from '#/api/iot/rule/scene';
|
||||
import {
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
IotRuleSceneActionTypeEnum,
|
||||
isDeviceTrigger
|
||||
} from '#/views/iot/utils/constants'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
isDeviceTrigger,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
import ActionSection from './sections/ActionSection.vue';
|
||||
import BasicInfoSection from './sections/BasicInfoSection.vue';
|
||||
import TriggerSection from './sections/TriggerSection.vue';
|
||||
|
||||
/** IoT 场景联动规则表单 - 主表单组件 */
|
||||
defineOptions({ name: 'RuleSceneForm' })
|
||||
defineOptions({ name: 'RuleSceneForm' });
|
||||
|
||||
/** 组件属性定义 */
|
||||
const props = defineProps<{
|
||||
/** 抽屉显示状态 */
|
||||
modelValue: boolean
|
||||
modelValue: boolean;
|
||||
/** 编辑的场景联动规则数据 */
|
||||
ruleScene?: IotSceneRule
|
||||
}>()
|
||||
ruleScene?: IotSceneRule;
|
||||
}>();
|
||||
|
||||
/** 组件事件定义 */
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'success'): void
|
||||
}>()
|
||||
(e: 'update:modelValue', value: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}>();
|
||||
|
||||
const drawerVisible = useVModel(props, 'modelValue', emit) // 抽屉显示状态
|
||||
const drawerVisible = useVModel(props, 'modelValue', emit); // 抽屉显示状态
|
||||
|
||||
/**
|
||||
* 创建默认的表单数据
|
||||
@@ -83,15 +51,15 @@ const createDefaultFormData = (): IotSceneRule => {
|
||||
operator: undefined,
|
||||
value: undefined,
|
||||
cronExpression: undefined,
|
||||
conditionGroups: [] // 空的条件组数组
|
||||
}
|
||||
conditionGroups: [], // 空的条件组数组
|
||||
},
|
||||
],
|
||||
actions: []
|
||||
}
|
||||
}
|
||||
actions: [],
|
||||
};
|
||||
};
|
||||
|
||||
const formRef = ref() // 表单引用
|
||||
const formData = ref<IotSceneRule>(createDefaultFormData()) // 表单数据
|
||||
const formRef = ref(); // 表单引用
|
||||
const formData = ref<IotSceneRule>(createDefaultFormData()); // 表单数据
|
||||
|
||||
/**
|
||||
* 触发器校验器
|
||||
@@ -101,54 +69,57 @@ const formData = ref<IotSceneRule>(createDefaultFormData()) // 表单数据
|
||||
*/
|
||||
const validateTriggers = (_rule: any, value: any, callback: any) => {
|
||||
if (!value || !Array.isArray(value) || value.length === 0) {
|
||||
callback(new Error('至少需要一个触发器'))
|
||||
return
|
||||
callback(new Error('至少需要一个触发器'));
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
const trigger = value[i]
|
||||
|
||||
for (const [i, trigger] of value.entries()) {
|
||||
// 校验触发器类型
|
||||
if (!trigger.type) {
|
||||
callback(new Error(`触发器 ${i + 1}: 触发器类型不能为空`))
|
||||
return
|
||||
callback(new Error(`触发器 ${i + 1}: 触发器类型不能为空`));
|
||||
return;
|
||||
}
|
||||
|
||||
// 校验设备触发器
|
||||
if (isDeviceTrigger(trigger.type)) {
|
||||
if (!trigger.productId) {
|
||||
callback(new Error(`触发器 ${i + 1}: 产品不能为空`))
|
||||
return
|
||||
callback(new Error(`触发器 ${i + 1}: 产品不能为空`));
|
||||
return;
|
||||
}
|
||||
if (!trigger.deviceId) {
|
||||
callback(new Error(`触发器 ${i + 1}: 设备不能为空`))
|
||||
return
|
||||
callback(new Error(`触发器 ${i + 1}: 设备不能为空`));
|
||||
return;
|
||||
}
|
||||
if (!trigger.identifier) {
|
||||
callback(new Error(`触发器 ${i + 1}: 物模型标识符不能为空`))
|
||||
return
|
||||
callback(new Error(`触发器 ${i + 1}: 物模型标识符不能为空`));
|
||||
return;
|
||||
}
|
||||
if (!trigger.operator) {
|
||||
callback(new Error(`触发器 ${i + 1}: 操作符不能为空`))
|
||||
return
|
||||
callback(new Error(`触发器 ${i + 1}: 操作符不能为空`));
|
||||
return;
|
||||
}
|
||||
if (trigger.value === undefined || trigger.value === null || trigger.value === '') {
|
||||
callback(new Error(`触发器 ${i + 1}: 参数值不能为空`))
|
||||
return
|
||||
if (
|
||||
trigger.value === undefined ||
|
||||
trigger.value === null ||
|
||||
trigger.value === ''
|
||||
) {
|
||||
callback(new Error(`触发器 ${i + 1}: 参数值不能为空`));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 校验定时触发器
|
||||
if (trigger.type === IotRuleSceneTriggerTypeEnum.TIMER) {
|
||||
if (!trigger.cronExpression) {
|
||||
callback(new Error(`触发器 ${i + 1}: CRON表达式不能为空`))
|
||||
return
|
||||
}
|
||||
if (
|
||||
trigger.type === IotRuleSceneTriggerTypeEnum.TIMER &&
|
||||
!trigger.cronExpression
|
||||
) {
|
||||
callback(new Error(`触发器 ${i + 1}: CRON表达式不能为空`));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
callback()
|
||||
}
|
||||
callback();
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行器校验器
|
||||
@@ -158,17 +129,15 @@ const validateTriggers = (_rule: any, value: any, callback: any) => {
|
||||
*/
|
||||
const validateActions = (_rule: any, value: any, callback: any) => {
|
||||
if (!value || !Array.isArray(value) || value.length === 0) {
|
||||
callback(new Error('至少需要一个执行器'))
|
||||
return
|
||||
callback(new Error('至少需要一个执行器'));
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
const action = value[i]
|
||||
|
||||
for (const [i, action] of value.entries()) {
|
||||
// 校验执行器类型
|
||||
if (!action.type) {
|
||||
callback(new Error(`执行器 ${i + 1}: 执行器类型不能为空`))
|
||||
return
|
||||
callback(new Error(`执行器 ${i + 1}: 执行器类型不能为空`));
|
||||
return;
|
||||
}
|
||||
|
||||
// 校验设备控制执行器
|
||||
@@ -177,47 +146,53 @@ const validateActions = (_rule: any, value: any, callback: any) => {
|
||||
action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
) {
|
||||
if (!action.productId) {
|
||||
callback(new Error(`执行器 ${i + 1}: 产品不能为空`))
|
||||
return
|
||||
callback(new Error(`执行器 ${i + 1}: 产品不能为空`));
|
||||
return;
|
||||
}
|
||||
if (!action.deviceId) {
|
||||
callback(new Error(`执行器 ${i + 1}: 设备不能为空`))
|
||||
return
|
||||
callback(new Error(`执行器 ${i + 1}: 设备不能为空`));
|
||||
return;
|
||||
}
|
||||
|
||||
// 服务调用需要验证服务标识符
|
||||
if (action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE) {
|
||||
if (!action.identifier) {
|
||||
callback(new Error(`执行器 ${i + 1}: 服务不能为空`))
|
||||
return
|
||||
}
|
||||
if (
|
||||
action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE &&
|
||||
!action.identifier
|
||||
) {
|
||||
callback(new Error(`执行器 ${i + 1}: 服务不能为空`));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!action.params || Object.keys(action.params).length === 0) {
|
||||
callback(new Error(`执行器 ${i + 1}: 参数配置不能为空`))
|
||||
return
|
||||
callback(new Error(`执行器 ${i + 1}: 参数配置不能为空`));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 校验告警执行器
|
||||
if (
|
||||
action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER ||
|
||||
action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER
|
||||
(action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER ||
|
||||
action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER) &&
|
||||
!action.alertConfigId
|
||||
) {
|
||||
if (!action.alertConfigId) {
|
||||
callback(new Error(`执行器 ${i + 1}: 告警配置不能为空`))
|
||||
return
|
||||
}
|
||||
callback(new Error(`执行器 ${i + 1}: 告警配置不能为空`));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
callback()
|
||||
}
|
||||
callback();
|
||||
};
|
||||
|
||||
const formRules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '场景名称不能为空', trigger: 'blur' },
|
||||
{ type: 'string', min: 1, max: 50, message: '场景名称长度应在1-50个字符之间', trigger: 'blur' }
|
||||
{
|
||||
type: 'string',
|
||||
min: 1,
|
||||
max: 50,
|
||||
message: '场景名称长度应在1-50个字符之间',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '场景状态不能为空', trigger: 'change' },
|
||||
@@ -225,61 +200,70 @@ const formRules = reactive({
|
||||
type: 'enum',
|
||||
enum: [CommonStatusEnum.ENABLE, CommonStatusEnum.DISABLE],
|
||||
message: '状态值必须为启用或禁用',
|
||||
trigger: 'change'
|
||||
}
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
description: [
|
||||
{ type: 'string', max: 200, message: '场景描述不能超过200个字符', trigger: 'blur' }
|
||||
{
|
||||
type: 'string',
|
||||
max: 200,
|
||||
message: '场景描述不能超过200个字符',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
triggers: [{ required: true, validator: validateTriggers, trigger: 'change' }],
|
||||
actions: [{ required: true, validator: validateActions, trigger: 'change' }]
|
||||
}) // 表单校验规则
|
||||
triggers: [
|
||||
{ required: true, validator: validateTriggers, trigger: 'change' },
|
||||
],
|
||||
actions: [{ required: true, validator: validateActions, trigger: 'change' }],
|
||||
}); // 表单校验规则
|
||||
|
||||
const submitLoading = ref(false) // 提交加载状态
|
||||
const isEdit = ref(false) // 是否为编辑模式
|
||||
const drawerTitle = computed(() => (isEdit.value ? '编辑场景联动规则' : '新增场景联动规则')) // 抽屉标题
|
||||
const submitLoading = ref(false); // 提交加载状态
|
||||
const isEdit = ref(false); // 是否为编辑模式
|
||||
const drawerTitle = computed(() =>
|
||||
isEdit.value ? '编辑场景联动规则' : '新增场景联动规则',
|
||||
); // 抽屉标题
|
||||
|
||||
/** 提交表单 */
|
||||
const handleSubmit = async () => {
|
||||
// 校验表单
|
||||
if (!formRef.value) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
if (!formRef.value) return;
|
||||
const valid = await formRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
// 提交请求
|
||||
submitLoading.value = true
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
// 更新场景联动规则
|
||||
await RuleSceneApi.updateRuleScene(formData.value)
|
||||
ElMessage.success('更新成功')
|
||||
await RuleSceneApi.updateRuleScene(formData.value);
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
// 创建场景联动规则
|
||||
await RuleSceneApi.createRuleScene(formData.value)
|
||||
ElMessage.success('创建成功')
|
||||
await RuleSceneApi.createRuleScene(formData.value);
|
||||
ElMessage.success('创建成功');
|
||||
}
|
||||
|
||||
// 关闭抽屉并触发成功事件
|
||||
drawerVisible.value = false
|
||||
emit('success')
|
||||
drawerVisible.value = false;
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error)
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '创建失败')
|
||||
console.error('保存失败:', error);
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '创建失败');
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** 处理抽屉关闭事件 */
|
||||
const handleClose = () => {
|
||||
drawerVisible.value = false
|
||||
}
|
||||
drawerVisible.value = false;
|
||||
};
|
||||
|
||||
/** 初始化表单数据 */
|
||||
const initFormData = () => {
|
||||
if (props.ruleScene) {
|
||||
// 编辑模式：数据结构已对齐，直接使用后端数据
|
||||
isEdit.value = true
|
||||
isEdit.value = true;
|
||||
formData.value = {
|
||||
...props.ruleScene,
|
||||
// 确保触发器数组不为空
|
||||
@@ -294,37 +278,79 @@ const initFormData = () => {
|
||||
operator: undefined,
|
||||
value: undefined,
|
||||
cronExpression: undefined,
|
||||
conditionGroups: []
|
||||
}
|
||||
conditionGroups: [],
|
||||
},
|
||||
],
|
||||
// 确保执行器数组不为空
|
||||
actions: props.ruleScene.actions || []
|
||||
}
|
||||
actions: props.ruleScene.actions || [],
|
||||
};
|
||||
} else {
|
||||
// 新增模式：使用默认数据
|
||||
isEdit.value = false
|
||||
formData.value = createDefaultFormData()
|
||||
isEdit.value = false;
|
||||
formData.value = createDefaultFormData();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** 监听抽屉显示 */
|
||||
watch(drawerVisible, async (visible) => {
|
||||
if (visible) {
|
||||
initFormData()
|
||||
initFormData();
|
||||
// 重置表单验证状态
|
||||
await nextTick()
|
||||
formRef.value?.clearValidate()
|
||||
await nextTick();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
/** 监听编辑数据变化 */
|
||||
watch(
|
||||
() => props.ruleScene,
|
||||
() => {
|
||||
if (drawerVisible.value) {
|
||||
initFormData()
|
||||
initFormData();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
size="80%"
|
||||
direction="rtl"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="110px"
|
||||
>
|
||||
<!-- 基础信息配置 -->
|
||||
<BasicInfoSection v-model="formData" :rules="formRules" />
|
||||
<!-- 触发器配置 -->
|
||||
<TriggerSection v-model:triggers="formData.triggers" />
|
||||
<!-- 执行器配置 -->
|
||||
<ActionSection v-model:actions="formData.actions" />
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button
|
||||
:disabled="submitLoading"
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<Icon icon="ep:check" />
|
||||
确 定
|
||||
</el-button>
|
||||
<el-button @click="handleClose">
|
||||
<Icon icon="ep:close" />
|
||||
取 消
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,56 @@
|
||||
<!-- 告警配置组件 -->
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import { AlertConfigApi } from '#/api/iot/alert/config';
|
||||
|
||||
/** 告警配置组件 */
|
||||
defineOptions({ name: 'AlertConfig' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value?: number): void;
|
||||
}>();
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const alertConfigs = ref<any[]>([]); // 告警配置列表
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的值
|
||||
*/
|
||||
const handleChange = (value?: number) => {
|
||||
emit('update:modelValue', value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载告警配置列表
|
||||
*/
|
||||
const loadAlertConfigs = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await AlertConfigApi.getAlertConfigPage({
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
enabled: true, // 只加载启用的配置
|
||||
});
|
||||
alertConfigs.value = data.list || [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
loadAlertConfigs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<el-form-item label="告警配置" required>
|
||||
@@ -28,54 +80,3 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { AlertConfigApi } from '#/api/iot/alert/config'
|
||||
|
||||
/** 告警配置组件 */
|
||||
defineOptions({ name: 'AlertConfig' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value?: number): void
|
||||
}>()
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit)
|
||||
|
||||
const loading = ref(false) // 加载状态
|
||||
const alertConfigs = ref<any[]>([]) // 告警配置列表
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的值
|
||||
*/
|
||||
const handleChange = (value?: number) => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载告警配置列表
|
||||
*/
|
||||
const loadAlertConfigs = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await AlertConfigApi.getAlertConfigPage({
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
enabled: true // 只加载启用的配置
|
||||
})
|
||||
alertConfigs.value = data.list || []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
loadAlertConfigs()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,158 @@
|
||||
<!-- 单个条件配置组件 -->
|
||||
<script setup lang="ts">
|
||||
import type { TriggerCondition } from '#/api/iot/rule/scene';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
getConditionTypeOptions,
|
||||
IoTDeviceStatusEnum,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum,
|
||||
IotRuleSceneTriggerConditionTypeEnum,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
import ValueInput from '../inputs/ValueInput.vue';
|
||||
import DeviceSelector from '../selectors/DeviceSelector.vue';
|
||||
import OperatorSelector from '../selectors/OperatorSelector.vue';
|
||||
import ProductSelector from '../selectors/ProductSelector.vue';
|
||||
import PropertySelector from '../selectors/PropertySelector.vue';
|
||||
import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue';
|
||||
|
||||
/** 单个条件配置组件 */
|
||||
defineOptions({ name: 'ConditionConfig' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: TriggerCondition;
|
||||
triggerType: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: TriggerCondition): void;
|
||||
}>();
|
||||
|
||||
/** 获取设备状态选项 */
|
||||
const deviceStatusOptions = [
|
||||
{
|
||||
value: IoTDeviceStatusEnum.ONLINE.value,
|
||||
label: IoTDeviceStatusEnum.ONLINE.label,
|
||||
},
|
||||
{
|
||||
value: IoTDeviceStatusEnum.OFFLINE.value,
|
||||
label: IoTDeviceStatusEnum.OFFLINE.label,
|
||||
},
|
||||
];
|
||||
|
||||
/** 获取状态操作符选项 */
|
||||
const statusOperatorOptions = [
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value,
|
||||
label: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name,
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
|
||||
label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.name,
|
||||
},
|
||||
];
|
||||
|
||||
const condition = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const propertyType = ref<string>('string'); // 属性类型
|
||||
const propertyConfig = ref<any>(null); // 属性配置
|
||||
const isDeviceCondition = computed(() => {
|
||||
return (
|
||||
condition.value.type ===
|
||||
IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS ||
|
||||
condition.value.type ===
|
||||
IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
|
||||
);
|
||||
}); // 计算属性：判断是否为设备相关条件
|
||||
|
||||
/**
|
||||
* 更新条件字段
|
||||
* @param field 字段名
|
||||
* @param value 字段值
|
||||
*/
|
||||
const updateConditionField = (field: any, value: any) => {
|
||||
(condition.value as any)[field] = value;
|
||||
emit('update:modelValue', condition.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新整个条件对象
|
||||
* @param newCondition 新的条件对象
|
||||
*/
|
||||
const updateCondition = (newCondition: TriggerCondition) => {
|
||||
condition.value = newCondition;
|
||||
emit('update:modelValue', condition.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理条件类型变化事件
|
||||
* @param type 条件类型
|
||||
*/
|
||||
const handleConditionTypeChange = (type: number) => {
|
||||
// 根据条件类型清理字段
|
||||
const isCurrentTime =
|
||||
type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME;
|
||||
const isDeviceStatus =
|
||||
type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS;
|
||||
|
||||
// 清理标识符字段（时间条件和设备状态条件都不需要）
|
||||
if (isCurrentTime || isDeviceStatus) {
|
||||
condition.value.identifier = undefined;
|
||||
}
|
||||
|
||||
// 清理设备相关字段（仅时间条件需要）
|
||||
if (isCurrentTime) {
|
||||
condition.value.productId = undefined;
|
||||
condition.value.deviceId = undefined;
|
||||
}
|
||||
|
||||
// 设置默认操作符
|
||||
condition.value.operator = isCurrentTime
|
||||
? 'at_time'
|
||||
: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value;
|
||||
|
||||
// 清空参数值
|
||||
condition.value.param = '';
|
||||
};
|
||||
|
||||
/** 处理产品变化事件 */
|
||||
const handleProductChange = (_: number) => {
|
||||
// 产品变化时清空设备和属性
|
||||
condition.value.deviceId = undefined;
|
||||
condition.value.identifier = '';
|
||||
};
|
||||
|
||||
/** 处理设备变化事件 */
|
||||
const handleDeviceChange = (_: number) => {
|
||||
// 设备变化时清空属性
|
||||
condition.value.identifier = '';
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理属性变化事件
|
||||
* @param propertyInfo 属性信息对象
|
||||
*/
|
||||
const handlePropertyChange = (propertyInfo: { config: any; type: string }) => {
|
||||
propertyType.value = propertyInfo.type;
|
||||
propertyConfig.value = propertyInfo.config;
|
||||
|
||||
// 重置操作符和值
|
||||
condition.value.operator =
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value;
|
||||
condition.value.param = '';
|
||||
};
|
||||
|
||||
/** 处理操作符变化事件 */
|
||||
const handleOperatorChange = () => {
|
||||
// 重置值
|
||||
condition.value.param = '';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-16px">
|
||||
<div class="gap-16px flex flex-col">
|
||||
<!-- 条件类型选择 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
@@ -29,7 +181,9 @@
|
||||
<el-form-item label="产品" required>
|
||||
<ProductSelector
|
||||
:model-value="condition.productId"
|
||||
@update:model-value="(value) => updateConditionField('productId', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('productId', value)
|
||||
"
|
||||
@change="handleProductChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -38,7 +192,9 @@
|
||||
<el-form-item label="设备" required>
|
||||
<DeviceSelector
|
||||
:model-value="condition.deviceId"
|
||||
@update:model-value="(value) => updateConditionField('deviceId', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('deviceId', value)
|
||||
"
|
||||
:product-id="condition.productId"
|
||||
@change="handleDeviceChange"
|
||||
/>
|
||||
@@ -48,8 +204,10 @@
|
||||
|
||||
<!-- 设备状态条件配置 -->
|
||||
<div
|
||||
v-if="condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS"
|
||||
class="flex flex-col gap-16px"
|
||||
v-if="
|
||||
condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS
|
||||
"
|
||||
class="gap-16px flex flex-col"
|
||||
>
|
||||
<!-- 状态和操作符选择 -->
|
||||
<el-row :gutter="16">
|
||||
@@ -58,7 +216,9 @@
|
||||
<el-form-item label="操作符" required>
|
||||
<el-select
|
||||
:model-value="condition.operator"
|
||||
@update:model-value="(value) => updateConditionField('operator', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('operator', value)
|
||||
"
|
||||
placeholder="请选择操作符"
|
||||
class="w-full"
|
||||
>
|
||||
@@ -77,7 +237,9 @@
|
||||
<el-form-item label="设备状态" required>
|
||||
<el-select
|
||||
:model-value="condition.param"
|
||||
@update:model-value="(value) => updateConditionField('param', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('param', value)
|
||||
"
|
||||
placeholder="请选择设备状态"
|
||||
class="w-full"
|
||||
>
|
||||
@@ -95,7 +257,9 @@
|
||||
|
||||
<!-- 设备属性条件配置 -->
|
||||
<div
|
||||
v-else-if="condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY"
|
||||
v-else-if="
|
||||
condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
|
||||
"
|
||||
class="space-y-16px"
|
||||
>
|
||||
<!-- 属性配置 -->
|
||||
@@ -105,7 +269,9 @@
|
||||
<el-form-item label="监控项" required>
|
||||
<PropertySelector
|
||||
:model-value="condition.identifier"
|
||||
@update:model-value="(value) => updateConditionField('identifier', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('identifier', value)
|
||||
"
|
||||
:trigger-type="triggerType"
|
||||
:product-id="condition.productId"
|
||||
:device-id="condition.deviceId"
|
||||
@@ -119,7 +285,9 @@
|
||||
<el-form-item label="操作符" required>
|
||||
<OperatorSelector
|
||||
:model-value="condition.operator"
|
||||
@update:model-value="(value) => updateConditionField('operator', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('operator', value)
|
||||
"
|
||||
:property-type="propertyType"
|
||||
@change="handleOperatorChange"
|
||||
/>
|
||||
@@ -131,7 +299,9 @@
|
||||
<el-form-item label="比较值" required>
|
||||
<ValueInput
|
||||
:model-value="condition.param"
|
||||
@update:model-value="(value) => updateConditionField('param', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('param', value)
|
||||
"
|
||||
:property-type="propertyType"
|
||||
:operator="condition.operator"
|
||||
:property-config="propertyConfig"
|
||||
@@ -143,157 +313,15 @@
|
||||
|
||||
<!-- 当前时间条件配置 -->
|
||||
<CurrentTimeConditionConfig
|
||||
v-else-if="condition.type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME"
|
||||
v-else-if="
|
||||
condition.type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME
|
||||
"
|
||||
:model-value="condition"
|
||||
@update:model-value="updateCondition"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue'
|
||||
import ProductSelector from '../selectors/ProductSelector.vue'
|
||||
import DeviceSelector from '../selectors/DeviceSelector.vue'
|
||||
import PropertySelector from '../selectors/PropertySelector.vue'
|
||||
import OperatorSelector from '../selectors/OperatorSelector.vue'
|
||||
import ValueInput from '../inputs/ValueInput.vue'
|
||||
import type { TriggerCondition } from '#/api/iot/rule/scene'
|
||||
import {
|
||||
IotRuleSceneTriggerConditionTypeEnum,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum,
|
||||
getConditionTypeOptions,
|
||||
IoTDeviceStatusEnum
|
||||
} from '#/views/iot/utils/constants'
|
||||
|
||||
/** 单个条件配置组件 */
|
||||
defineOptions({ name: 'ConditionConfig' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: TriggerCondition
|
||||
triggerType: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: TriggerCondition): void
|
||||
}>()
|
||||
|
||||
/** 获取设备状态选项 */
|
||||
const deviceStatusOptions = [
|
||||
{
|
||||
value: IoTDeviceStatusEnum.ONLINE.value,
|
||||
label: IoTDeviceStatusEnum.ONLINE.label
|
||||
},
|
||||
{
|
||||
value: IoTDeviceStatusEnum.OFFLINE.value,
|
||||
label: IoTDeviceStatusEnum.OFFLINE.label
|
||||
}
|
||||
]
|
||||
|
||||
/** 获取状态操作符选项 */
|
||||
const statusOperatorOptions = [
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value,
|
||||
label: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
|
||||
label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.name
|
||||
}
|
||||
]
|
||||
|
||||
const condition = useVModel(props, 'modelValue', emit)
|
||||
|
||||
const propertyType = ref<string>('string') // 属性类型
|
||||
const propertyConfig = ref<any>(null) // 属性配置
|
||||
const isDeviceCondition = computed(() => {
|
||||
return (
|
||||
condition.value.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS ||
|
||||
condition.value.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
|
||||
)
|
||||
}) // 计算属性：判断是否为设备相关条件
|
||||
|
||||
/**
|
||||
* 更新条件字段
|
||||
* @param field 字段名
|
||||
* @param value 字段值
|
||||
*/
|
||||
const updateConditionField = (field: any, value: any) => {
|
||||
;(condition.value as any)[field] = value
|
||||
emit('update:modelValue', condition.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新整个条件对象
|
||||
* @param newCondition 新的条件对象
|
||||
*/
|
||||
const updateCondition = (newCondition: TriggerCondition) => {
|
||||
condition.value = newCondition
|
||||
emit('update:modelValue', condition.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理条件类型变化事件
|
||||
* @param type 条件类型
|
||||
*/
|
||||
const handleConditionTypeChange = (type: number) => {
|
||||
// 根据条件类型清理字段
|
||||
const isCurrentTime = type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME
|
||||
const isDeviceStatus = type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS
|
||||
|
||||
// 清理标识符字段（时间条件和设备状态条件都不需要）
|
||||
if (isCurrentTime || isDeviceStatus) {
|
||||
condition.value.identifier = undefined
|
||||
}
|
||||
|
||||
// 清理设备相关字段（仅时间条件需要）
|
||||
if (isCurrentTime) {
|
||||
condition.value.productId = undefined
|
||||
condition.value.deviceId = undefined
|
||||
}
|
||||
|
||||
// 设置默认操作符
|
||||
condition.value.operator = isCurrentTime
|
||||
? 'at_time'
|
||||
: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
|
||||
|
||||
// 清空参数值
|
||||
condition.value.param = ''
|
||||
}
|
||||
|
||||
/** 处理产品变化事件 */
|
||||
const handleProductChange = (_: number) => {
|
||||
// 产品变化时清空设备和属性
|
||||
condition.value.deviceId = undefined
|
||||
condition.value.identifier = ''
|
||||
}
|
||||
|
||||
/** 处理设备变化事件 */
|
||||
const handleDeviceChange = (_: number) => {
|
||||
// 设备变化时清空属性
|
||||
condition.value.identifier = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理属性变化事件
|
||||
* @param propertyInfo 属性信息对象
|
||||
*/
|
||||
const handlePropertyChange = (propertyInfo: { type: string; config: any }) => {
|
||||
propertyType.value = propertyInfo.type
|
||||
propertyConfig.value = propertyInfo.config
|
||||
|
||||
// 重置操作符和值
|
||||
condition.value.operator = IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
|
||||
condition.value.param = ''
|
||||
}
|
||||
|
||||
/** 处理操作符变化事件 */
|
||||
const handleOperatorChange = () => {
|
||||
// 重置值
|
||||
condition.value.param = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -1,13 +1,172 @@
|
||||
<!-- 当前时间条件配置组件 -->
|
||||
<script setup lang="ts">
|
||||
import type { TriggerCondition } from '#/api/iot/rule/scene';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import { IotRuleSceneTriggerTimeOperatorEnum } from '#/views/iot/utils/constants';
|
||||
|
||||
/** 当前时间条件配置组件 */
|
||||
defineOptions({ name: 'CurrentTimeConditionConfig' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: TriggerCondition;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: TriggerCondition): void;
|
||||
}>();
|
||||
|
||||
const condition = useVModel(props, 'modelValue', emit);
|
||||
|
||||
// 时间操作符选项
|
||||
const timeOperatorOptions = [
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
|
||||
icon: 'ep:arrow-left',
|
||||
iconClass: 'text-blue-500',
|
||||
tag: 'primary',
|
||||
category: '时间点',
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.name,
|
||||
icon: 'ep:arrow-right',
|
||||
iconClass: 'text-green-500',
|
||||
tag: 'success',
|
||||
category: '时间点',
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.name,
|
||||
icon: 'ep:sort',
|
||||
iconClass: 'text-orange-500',
|
||||
tag: 'warning',
|
||||
category: '时间段',
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
|
||||
icon: 'ep:position',
|
||||
iconClass: 'text-purple-500',
|
||||
tag: 'info',
|
||||
category: '时间点',
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.TODAY.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
|
||||
icon: 'ep:calendar',
|
||||
iconClass: 'text-red-500',
|
||||
tag: 'danger',
|
||||
category: '日期',
|
||||
},
|
||||
];
|
||||
|
||||
// 计算属性：是否需要时间输入
|
||||
const needsTimeInput = computed(() => {
|
||||
const timeOnlyOperators = [
|
||||
IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
|
||||
IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
|
||||
IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
|
||||
IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
|
||||
];
|
||||
return timeOnlyOperators.includes(condition.value.operator as any);
|
||||
});
|
||||
|
||||
// 计算属性：是否需要日期输入
|
||||
const needsDateInput = computed(() => {
|
||||
return false; // 暂时不支持日期输入，只支持时间
|
||||
});
|
||||
|
||||
// 计算属性：是否需要第二个时间输入
|
||||
const needsSecondTimeInput = computed(() => {
|
||||
return (
|
||||
condition.value.operator ===
|
||||
IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
|
||||
);
|
||||
});
|
||||
|
||||
// 计算属性：从 param 中解析时间值
|
||||
const timeValue = computed(() => {
|
||||
if (!condition.value.param) return '';
|
||||
const params = condition.value.param.split(',');
|
||||
return params[0] || '';
|
||||
});
|
||||
|
||||
// 计算属性：从 param 中解析第二个时间值
|
||||
const timeValue2 = computed(() => {
|
||||
if (!condition.value.param) return '';
|
||||
const params = condition.value.param.split(',');
|
||||
return params[1] || '';
|
||||
});
|
||||
|
||||
/**
|
||||
* 更新条件字段
|
||||
* @param field 字段名
|
||||
* @param value 字段值
|
||||
*/
|
||||
const updateConditionField = (field: any, value: any) => {
|
||||
condition.value[field] = value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理第一个时间值变化
|
||||
* @param value 时间值
|
||||
*/
|
||||
const handleTimeValueChange = (value: string) => {
|
||||
const currentParams = condition.value.param
|
||||
? condition.value.param.split(',')
|
||||
: [];
|
||||
currentParams[0] = value || '';
|
||||
|
||||
// 如果是范围条件，保留第二个值；否则只保留第一个值
|
||||
condition.value.param = needsSecondTimeInput.value
|
||||
? currentParams.slice(0, 2).join(',')
|
||||
: currentParams[0];
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理第二个时间值变化
|
||||
* @param value 时间值
|
||||
*/
|
||||
const handleTimeValue2Change = (value: string) => {
|
||||
const currentParams = condition.value.param
|
||||
? condition.value.param.split(',')
|
||||
: [''];
|
||||
currentParams[1] = value || '';
|
||||
condition.value.param = currentParams.slice(0, 2).join(',');
|
||||
};
|
||||
|
||||
/** 监听操作符变化，清理不相关的时间值 */
|
||||
watch(
|
||||
() => condition.value.operator,
|
||||
(newOperator) => {
|
||||
if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
|
||||
// 今日条件不需要时间参数
|
||||
condition.value.param = '';
|
||||
} else if (!needsSecondTimeInput.value) {
|
||||
// 非范围条件只保留第一个时间值
|
||||
const currentParams = condition.value.param
|
||||
? condition.value.param.split(',')
|
||||
: [];
|
||||
condition.value.param = currentParams[0] || '';
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-16px">
|
||||
<div class="gap-16px flex flex-col">
|
||||
<el-row :gutter="16">
|
||||
<!-- 时间操作符选择 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item label="时间条件" required>
|
||||
<el-select
|
||||
:model-value="condition.operator"
|
||||
@update:model-value="(value) => updateConditionField('operator', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('operator', value)
|
||||
"
|
||||
placeholder="请选择时间条件"
|
||||
class="w-full"
|
||||
>
|
||||
@@ -17,12 +176,14 @@
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<div class="gap-8px flex items-center">
|
||||
<Icon :icon="option.icon" :class="option.iconClass" />
|
||||
<span>{{ option.label }}</span>
|
||||
</div>
|
||||
<el-tag :type="option.tag as any" size="small">{{ option.category }}</el-tag>
|
||||
<el-tag :type="option.tag as any" size="small">
|
||||
{{ option.category }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
@@ -51,7 +212,7 @@
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
class="w-full"
|
||||
/>
|
||||
<div v-else class="text-[var(--el-text-color-placeholder)] text-14px">
|
||||
<div v-else class="text-14px text-[var(--el-text-color-placeholder)]">
|
||||
无需设置时间值
|
||||
</div>
|
||||
</el-form-item>
|
||||
@@ -84,151 +245,3 @@
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { IotRuleSceneTriggerTimeOperatorEnum } from '#/views/iot/utils/constants'
|
||||
import type { TriggerCondition } from '#/api/iot/rule/scene'
|
||||
|
||||
/** 当前时间条件配置组件 */
|
||||
defineOptions({ name: 'CurrentTimeConditionConfig' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: TriggerCondition
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: TriggerCondition): void
|
||||
}>()
|
||||
|
||||
const condition = useVModel(props, 'modelValue', emit)
|
||||
|
||||
// 时间操作符选项
|
||||
const timeOperatorOptions = [
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
|
||||
icon: 'ep:arrow-left',
|
||||
iconClass: 'text-blue-500',
|
||||
tag: 'primary',
|
||||
category: '时间点'
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.name,
|
||||
icon: 'ep:arrow-right',
|
||||
iconClass: 'text-green-500',
|
||||
tag: 'success',
|
||||
category: '时间点'
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.name,
|
||||
icon: 'ep:sort',
|
||||
iconClass: 'text-orange-500',
|
||||
tag: 'warning',
|
||||
category: '时间段'
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
|
||||
icon: 'ep:position',
|
||||
iconClass: 'text-purple-500',
|
||||
tag: 'info',
|
||||
category: '时间点'
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerTimeOperatorEnum.TODAY.value,
|
||||
label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
|
||||
icon: 'ep:calendar',
|
||||
iconClass: 'text-red-500',
|
||||
tag: 'danger',
|
||||
category: '日期'
|
||||
}
|
||||
]
|
||||
|
||||
// 计算属性：是否需要时间输入
|
||||
const needsTimeInput = computed(() => {
|
||||
const timeOnlyOperators = [
|
||||
IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
|
||||
IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
|
||||
IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
|
||||
IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value
|
||||
]
|
||||
return timeOnlyOperators.includes(condition.value.operator as any)
|
||||
})
|
||||
|
||||
// 计算属性：是否需要日期输入
|
||||
const needsDateInput = computed(() => {
|
||||
return false // 暂时不支持日期输入，只支持时间
|
||||
})
|
||||
|
||||
// 计算属性：是否需要第二个时间输入
|
||||
const needsSecondTimeInput = computed(() => {
|
||||
return condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
|
||||
})
|
||||
|
||||
// 计算属性：从 param 中解析时间值
|
||||
const timeValue = computed(() => {
|
||||
if (!condition.value.param) return ''
|
||||
const params = condition.value.param.split(',')
|
||||
return params[0] || ''
|
||||
})
|
||||
|
||||
// 计算属性：从 param 中解析第二个时间值
|
||||
const timeValue2 = computed(() => {
|
||||
if (!condition.value.param) return ''
|
||||
const params = condition.value.param.split(',')
|
||||
return params[1] || ''
|
||||
})
|
||||
|
||||
/**
|
||||
* 更新条件字段
|
||||
* @param field 字段名
|
||||
* @param value 字段值
|
||||
*/
|
||||
const updateConditionField = (field: any, value: any) => {
|
||||
condition.value[field] = value
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理第一个时间值变化
|
||||
* @param value 时间值
|
||||
*/
|
||||
const handleTimeValueChange = (value: string) => {
|
||||
const currentParams = condition.value.param ? condition.value.param.split(',') : []
|
||||
currentParams[0] = value || ''
|
||||
|
||||
// 如果是范围条件，保留第二个值；否则只保留第一个值
|
||||
if (needsSecondTimeInput.value) {
|
||||
condition.value.param = currentParams.slice(0, 2).join(',')
|
||||
} else {
|
||||
condition.value.param = currentParams[0]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理第二个时间值变化
|
||||
* @param value 时间值
|
||||
*/
|
||||
const handleTimeValue2Change = (value: string) => {
|
||||
const currentParams = condition.value.param ? condition.value.param.split(',') : ['']
|
||||
currentParams[1] = value || ''
|
||||
condition.value.param = currentParams.slice(0, 2).join(',')
|
||||
}
|
||||
|
||||
/** 监听操作符变化，清理不相关的时间值 */
|
||||
watch(
|
||||
() => condition.value.operator,
|
||||
(newOperator) => {
|
||||
if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
|
||||
// 今日条件不需要时间参数
|
||||
condition.value.param = ''
|
||||
} else if (!needsSecondTimeInput.value) {
|
||||
// 非范围条件只保留第一个时间值
|
||||
const currentParams = condition.value.param ? condition.value.param.split(',') : []
|
||||
condition.value.param = currentParams[0] || ''
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,341 @@
|
||||
<!-- 设备控制配置组件 -->
|
||||
<script setup lang="ts">
|
||||
import type { Action } from '#/api/iot/rule/scene';
|
||||
import type {
|
||||
ThingModelProperty,
|
||||
ThingModelService,
|
||||
} from '#/api/iot/thingmodel';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import { ThingModelApi } from '#/api/iot/thingmodel';
|
||||
import {
|
||||
IoTDataSpecsDataTypeEnum,
|
||||
IotRuleSceneActionTypeEnum,
|
||||
IoTThingModelAccessModeEnum,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
import JsonParamsInput from '../inputs/JsonParamsInput.vue';
|
||||
import DeviceSelector from '../selectors/DeviceSelector.vue';
|
||||
import ProductSelector from '../selectors/ProductSelector.vue';
|
||||
|
||||
/** 设备控制配置组件 */
|
||||
defineOptions({ name: 'DeviceControlConfig' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Action;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: Action): void;
|
||||
}>();
|
||||
|
||||
const action = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const thingModelProperties = ref<ThingModelProperty[]>([]); // 物模型属性列表
|
||||
const loadingThingModel = ref(false); // 物模型加载状态
|
||||
const selectedService = ref<null | ThingModelService>(null); // 选中的服务对象
|
||||
const serviceList = ref<ThingModelService[]>([]); // 服务列表
|
||||
const loadingServices = ref(false); // 服务加载状态
|
||||
|
||||
// 参数值的计算属性，用于双向绑定
|
||||
const paramsValue = computed({
|
||||
get: () => {
|
||||
// 如果 params 是对象，转换为 JSON 字符串（兼容旧数据）
|
||||
if (action.value.params && typeof action.value.params === 'object') {
|
||||
return JSON.stringify(action.value.params, null, 2);
|
||||
}
|
||||
// 如果 params 已经是字符串，直接返回
|
||||
return action.value.params || '';
|
||||
},
|
||||
set: (value: string) => {
|
||||
// 直接保存为 JSON 字符串，不进行解析转换
|
||||
action.value.params = value.trim() || '';
|
||||
},
|
||||
});
|
||||
|
||||
// 计算属性：是否为属性设置类型
|
||||
const isPropertySetAction = computed(() => {
|
||||
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET;
|
||||
});
|
||||
|
||||
// 计算属性：是否为服务调用类型
|
||||
const isServiceInvokeAction = computed(() => {
|
||||
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE;
|
||||
});
|
||||
|
||||
/**
|
||||
* 处理产品变化事件
|
||||
* @param productId 产品 ID
|
||||
*/
|
||||
const handleProductChange = (productId?: number) => {
|
||||
// 当产品变化时，清空设备选择和参数配置
|
||||
if (action.value.productId !== productId) {
|
||||
action.value.deviceId = undefined;
|
||||
action.value.identifier = undefined; // 清空服务标识符
|
||||
action.value.params = ''; // 清空参数，保存为空字符串
|
||||
selectedService.value = null; // 清空选中的服务
|
||||
serviceList.value = []; // 清空服务列表
|
||||
}
|
||||
|
||||
// 加载新产品的物模型属性或服务列表
|
||||
if (productId) {
|
||||
if (isPropertySetAction.value) {
|
||||
loadThingModelProperties(productId);
|
||||
} else if (isServiceInvokeAction.value) {
|
||||
loadServiceList(productId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理设备变化事件
|
||||
* @param deviceId 设备 ID
|
||||
*/
|
||||
const handleDeviceChange = (deviceId?: number) => {
|
||||
// 当设备变化时，清空参数配置
|
||||
if (action.value.deviceId !== deviceId) {
|
||||
action.value.params = ''; // 清空参数，保存为空字符串
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理服务变化事件
|
||||
* @param serviceIdentifier 服务标识符
|
||||
*/
|
||||
const handleServiceChange = (serviceIdentifier?: string) => {
|
||||
// 根据服务标识符找到对应的服务对象
|
||||
const service =
|
||||
serviceList.value.find((s) => s.identifier === serviceIdentifier) || null;
|
||||
selectedService.value = service;
|
||||
|
||||
// 当服务变化时，清空参数配置
|
||||
action.value.params = '';
|
||||
|
||||
// 如果选择了服务且有输入参数，生成默认参数结构
|
||||
if (service && service.inputParams && service.inputParams.length > 0) {
|
||||
const defaultParams = {};
|
||||
service.inputParams.forEach((param) => {
|
||||
defaultParams[param.identifier] = getDefaultValueForParam(param);
|
||||
});
|
||||
// 将默认参数转换为 JSON 字符串保存
|
||||
action.value.params = JSON.stringify(defaultParams, null, 2);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取物模型TSL数据
|
||||
* @param productId 产品ID
|
||||
* @returns 物模型TSL数据
|
||||
*/
|
||||
const getThingModelTSL = async (productId: number) => {
|
||||
if (!productId) return null;
|
||||
|
||||
try {
|
||||
return await ThingModelApi.getThingModelTSLByProductId(productId);
|
||||
} catch (error) {
|
||||
console.error('获取物模型TSL数据失败:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载物模型属性（可写属性）
|
||||
* @param productId 产品ID
|
||||
*/
|
||||
const loadThingModelProperties = async (productId: number) => {
|
||||
if (!productId) {
|
||||
thingModelProperties.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loadingThingModel.value = true;
|
||||
const tslData = await getThingModelTSL(productId);
|
||||
|
||||
if (!tslData?.properties) {
|
||||
thingModelProperties.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 过滤出可写的属性（accessMode 包含 'w'）
|
||||
thingModelProperties.value = tslData.properties.filter(
|
||||
(property: ThingModelProperty) =>
|
||||
property.accessMode &&
|
||||
(property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value ||
|
||||
property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('加载物模型属性失败:', error);
|
||||
thingModelProperties.value = [];
|
||||
} finally {
|
||||
loadingThingModel.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载服务列表
|
||||
* @param productId 产品ID
|
||||
*/
|
||||
const loadServiceList = async (productId: number) => {
|
||||
if (!productId) {
|
||||
serviceList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loadingServices.value = true;
|
||||
const tslData = await getThingModelTSL(productId);
|
||||
|
||||
if (!tslData?.services) {
|
||||
serviceList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
serviceList.value = tslData.services;
|
||||
} catch (error) {
|
||||
console.error('加载服务列表失败:', error);
|
||||
serviceList.value = [];
|
||||
} finally {
|
||||
loadingServices.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 从TSL加载服务信息（用于编辑模式回显）
|
||||
* @param productId 产品ID
|
||||
* @param serviceIdentifier 服务标识符
|
||||
*/
|
||||
const loadServiceFromTSL = async (
|
||||
productId: number,
|
||||
serviceIdentifier: string,
|
||||
) => {
|
||||
// 先加载服务列表
|
||||
await loadServiceList(productId);
|
||||
|
||||
// 然后设置选中的服务
|
||||
const service = serviceList.value.find(
|
||||
(s: any) => s.identifier === serviceIdentifier,
|
||||
);
|
||||
if (service) {
|
||||
selectedService.value = service;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据参数类型获取默认值
|
||||
* @param param 参数对象
|
||||
* @returns 默认值
|
||||
*/
|
||||
const getDefaultValueForParam = (param: any) => {
|
||||
switch (param.dataType) {
|
||||
case IoTDataSpecsDataTypeEnum.BOOL: {
|
||||
return false;
|
||||
}
|
||||
case IoTDataSpecsDataTypeEnum.DOUBLE:
|
||||
case IoTDataSpecsDataTypeEnum.FLOAT: {
|
||||
return 0;
|
||||
}
|
||||
case IoTDataSpecsDataTypeEnum.ENUM: {
|
||||
// 如果有枚举值，使用第一个
|
||||
if (
|
||||
param.dataSpecs?.dataSpecsList &&
|
||||
param.dataSpecs.dataSpecsList.length > 0
|
||||
) {
|
||||
return param.dataSpecs.dataSpecsList[0].value;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
case IoTDataSpecsDataTypeEnum.INT: {
|
||||
return 0;
|
||||
}
|
||||
case IoTDataSpecsDataTypeEnum.TEXT: {
|
||||
return '';
|
||||
}
|
||||
default: {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const isInitialized = ref(false); // 防止重复初始化的标志
|
||||
|
||||
/**
|
||||
* 初始化组件数据
|
||||
*/
|
||||
const initializeComponent = async () => {
|
||||
if (isInitialized.value) return;
|
||||
|
||||
const currentAction = action.value;
|
||||
if (!currentAction) return;
|
||||
|
||||
// 如果已经选择了产品且是属性设置类型，加载物模型
|
||||
if (currentAction.productId && isPropertySetAction.value) {
|
||||
await loadThingModelProperties(currentAction.productId);
|
||||
}
|
||||
|
||||
// 如果是服务调用类型且已有标识符，初始化服务选择
|
||||
if (
|
||||
currentAction.productId &&
|
||||
isServiceInvokeAction.value &&
|
||||
currentAction.identifier
|
||||
) {
|
||||
// 加载物模型TSL以获取服务信息
|
||||
await loadServiceFromTSL(currentAction.productId, currentAction.identifier);
|
||||
}
|
||||
|
||||
isInitialized.value = true;
|
||||
};
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
initializeComponent();
|
||||
});
|
||||
|
||||
/** 监听关键字段的变化，避免深度监听导致的性能问题 */
|
||||
watch(
|
||||
() => [action.value.productId, action.value.type, action.value.identifier],
|
||||
async ([newProductId, , newIdentifier], [oldProductId, , oldIdentifier]) => {
|
||||
// 避免初始化时的重复调用
|
||||
if (!isInitialized.value) return;
|
||||
|
||||
// 产品变化时重新加载数据
|
||||
if (newProductId !== oldProductId) {
|
||||
if (newProductId && isPropertySetAction.value) {
|
||||
await loadThingModelProperties(newProductId as number);
|
||||
} else if (newProductId && isServiceInvokeAction.value) {
|
||||
await loadServiceList(newProductId as number);
|
||||
}
|
||||
}
|
||||
|
||||
// 服务标识符变化时更新选中的服务
|
||||
if (
|
||||
newIdentifier !== oldIdentifier &&
|
||||
newProductId &&
|
||||
isServiceInvokeAction.value &&
|
||||
newIdentifier
|
||||
) {
|
||||
const service = serviceList.value.find(
|
||||
(s: any) => s.identifier === newIdentifier,
|
||||
);
|
||||
if (service) {
|
||||
selectedService.value = service;
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-16px">
|
||||
<div class="gap-16px flex flex-col">
|
||||
<!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品" required>
|
||||
<ProductSelector v-model="action.productId" @change="handleProductChange" />
|
||||
<ProductSelector
|
||||
v-model="action.productId"
|
||||
@change="handleProductChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@@ -39,7 +369,10 @@
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>{{ service.name }}</span>
|
||||
<el-tag :type="service.callType === 'sync' ? 'primary' : 'success'" size="small">
|
||||
<el-tag
|
||||
:type="service.callType === 'sync' ? 'primary' : 'success'"
|
||||
size="small"
|
||||
>
|
||||
{{ service.callType === 'sync' ? '同步' : '异步' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
@@ -74,303 +407,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import ProductSelector from '../selectors/ProductSelector.vue'
|
||||
import DeviceSelector from '../selectors/DeviceSelector.vue'
|
||||
import JsonParamsInput from '../inputs/JsonParamsInput.vue'
|
||||
import type { Action } from '#/api/iot/rule/scene'
|
||||
import type { ThingModelProperty, ThingModelService } from '#/api/iot/thingmodel'
|
||||
import {
|
||||
IotRuleSceneActionTypeEnum,
|
||||
IoTThingModelAccessModeEnum,
|
||||
IoTDataSpecsDataTypeEnum
|
||||
} from '#/views/iot/utils/constants'
|
||||
import { ThingModelApi } from '#/api/iot/thingmodel'
|
||||
|
||||
/** 设备控制配置组件 */
|
||||
defineOptions({ name: 'DeviceControlConfig' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Action
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: Action): void
|
||||
}>()
|
||||
|
||||
const action = useVModel(props, 'modelValue', emit)
|
||||
|
||||
const thingModelProperties = ref<ThingModelProperty[]>([]) // 物模型属性列表
|
||||
const loadingThingModel = ref(false) // 物模型加载状态
|
||||
const selectedService = ref<ThingModelService | null>(null) // 选中的服务对象
|
||||
const serviceList = ref<ThingModelService[]>([]) // 服务列表
|
||||
const loadingServices = ref(false) // 服务加载状态
|
||||
|
||||
// 参数值的计算属性，用于双向绑定
|
||||
const paramsValue = computed({
|
||||
get: () => {
|
||||
// 如果 params 是对象，转换为 JSON 字符串（兼容旧数据）
|
||||
if (action.value.params && typeof action.value.params === 'object') {
|
||||
return JSON.stringify(action.value.params, null, 2)
|
||||
}
|
||||
// 如果 params 已经是字符串，直接返回
|
||||
return action.value.params || ''
|
||||
},
|
||||
set: (value: string) => {
|
||||
// 直接保存为 JSON 字符串，不进行解析转换
|
||||
action.value.params = value.trim() || ''
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：是否为属性设置类型
|
||||
const isPropertySetAction = computed(() => {
|
||||
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET
|
||||
})
|
||||
|
||||
// 计算属性：是否为服务调用类型
|
||||
const isServiceInvokeAction = computed(() => {
|
||||
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
})
|
||||
|
||||
/**
|
||||
* 处理产品变化事件
|
||||
* @param productId 产品 ID
|
||||
*/
|
||||
const handleProductChange = (productId?: number) => {
|
||||
// 当产品变化时，清空设备选择和参数配置
|
||||
if (action.value.productId !== productId) {
|
||||
action.value.deviceId = undefined
|
||||
action.value.identifier = undefined // 清空服务标识符
|
||||
action.value.params = '' // 清空参数，保存为空字符串
|
||||
selectedService.value = null // 清空选中的服务
|
||||
serviceList.value = [] // 清空服务列表
|
||||
}
|
||||
|
||||
// 加载新产品的物模型属性或服务列表
|
||||
if (productId) {
|
||||
if (isPropertySetAction.value) {
|
||||
loadThingModelProperties(productId)
|
||||
} else if (isServiceInvokeAction.value) {
|
||||
loadServiceList(productId)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理设备变化事件
|
||||
* @param deviceId 设备 ID
|
||||
*/
|
||||
const handleDeviceChange = (deviceId?: number) => {
|
||||
// 当设备变化时，清空参数配置
|
||||
if (action.value.deviceId !== deviceId) {
|
||||
action.value.params = '' // 清空参数，保存为空字符串
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理服务变化事件
|
||||
* @param serviceIdentifier 服务标识符
|
||||
*/
|
||||
const handleServiceChange = (serviceIdentifier?: string) => {
|
||||
// 根据服务标识符找到对应的服务对象
|
||||
const service = serviceList.value.find((s) => s.identifier === serviceIdentifier) || null
|
||||
selectedService.value = service
|
||||
|
||||
// 当服务变化时，清空参数配置
|
||||
action.value.params = ''
|
||||
|
||||
// 如果选择了服务且有输入参数，生成默认参数结构
|
||||
if (service && service.inputParams && service.inputParams.length > 0) {
|
||||
const defaultParams = {}
|
||||
service.inputParams.forEach((param) => {
|
||||
defaultParams[param.identifier] = getDefaultValueForParam(param)
|
||||
})
|
||||
// 将默认参数转换为 JSON 字符串保存
|
||||
action.value.params = JSON.stringify(defaultParams, null, 2)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取物模型TSL数据
|
||||
* @param productId 产品ID
|
||||
* @returns 物模型TSL数据
|
||||
*/
|
||||
const getThingModelTSL = async (productId: number) => {
|
||||
if (!productId) return null
|
||||
|
||||
try {
|
||||
return await ThingModelApi.getThingModelTSLByProductId(productId)
|
||||
} catch (error) {
|
||||
console.error('获取物模型TSL数据失败:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载物模型属性（可写属性）
|
||||
* @param productId 产品ID
|
||||
*/
|
||||
const loadThingModelProperties = async (productId: number) => {
|
||||
if (!productId) {
|
||||
thingModelProperties.value = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loadingThingModel.value = true
|
||||
const tslData = await getThingModelTSL(productId)
|
||||
|
||||
if (!tslData?.properties) {
|
||||
thingModelProperties.value = []
|
||||
return
|
||||
}
|
||||
|
||||
// 过滤出可写的属性（accessMode 包含 'w'）
|
||||
thingModelProperties.value = tslData.properties.filter(
|
||||
(property: ThingModelProperty) =>
|
||||
property.accessMode &&
|
||||
(property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value ||
|
||||
property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value)
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('加载物模型属性失败:', error)
|
||||
thingModelProperties.value = []
|
||||
} finally {
|
||||
loadingThingModel.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载服务列表
|
||||
* @param productId 产品ID
|
||||
*/
|
||||
const loadServiceList = async (productId: number) => {
|
||||
if (!productId) {
|
||||
serviceList.value = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loadingServices.value = true
|
||||
const tslData = await getThingModelTSL(productId)
|
||||
|
||||
if (!tslData?.services) {
|
||||
serviceList.value = []
|
||||
return
|
||||
}
|
||||
|
||||
serviceList.value = tslData.services
|
||||
} catch (error) {
|
||||
console.error('加载服务列表失败:', error)
|
||||
serviceList.value = []
|
||||
} finally {
|
||||
loadingServices.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从TSL加载服务信息（用于编辑模式回显）
|
||||
* @param productId 产品ID
|
||||
* @param serviceIdentifier 服务标识符
|
||||
*/
|
||||
const loadServiceFromTSL = async (productId: number, serviceIdentifier: string) => {
|
||||
// 先加载服务列表
|
||||
await loadServiceList(productId)
|
||||
|
||||
// 然后设置选中的服务
|
||||
const service = serviceList.value.find((s: any) => s.identifier === serviceIdentifier)
|
||||
if (service) {
|
||||
selectedService.value = service
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据参数类型获取默认值
|
||||
* @param param 参数对象
|
||||
* @returns 默认值
|
||||
*/
|
||||
const getDefaultValueForParam = (param: any) => {
|
||||
switch (param.dataType) {
|
||||
case IoTDataSpecsDataTypeEnum.INT:
|
||||
return 0
|
||||
case IoTDataSpecsDataTypeEnum.FLOAT:
|
||||
case IoTDataSpecsDataTypeEnum.DOUBLE:
|
||||
return 0.0
|
||||
case IoTDataSpecsDataTypeEnum.BOOL:
|
||||
return false
|
||||
case IoTDataSpecsDataTypeEnum.TEXT:
|
||||
return ''
|
||||
case IoTDataSpecsDataTypeEnum.ENUM:
|
||||
// 如果有枚举值，使用第一个
|
||||
if (param.dataSpecs?.dataSpecsList && param.dataSpecs.dataSpecsList.length > 0) {
|
||||
return param.dataSpecs.dataSpecsList[0].value
|
||||
}
|
||||
return ''
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const isInitialized = ref(false) // 防止重复初始化的标志
|
||||
|
||||
/**
|
||||
* 初始化组件数据
|
||||
*/
|
||||
const initializeComponent = async () => {
|
||||
if (isInitialized.value) return
|
||||
|
||||
const currentAction = action.value
|
||||
if (!currentAction) return
|
||||
|
||||
// 如果已经选择了产品且是属性设置类型，加载物模型
|
||||
if (currentAction.productId && isPropertySetAction.value) {
|
||||
await loadThingModelProperties(currentAction.productId)
|
||||
}
|
||||
|
||||
// 如果是服务调用类型且已有标识符，初始化服务选择
|
||||
if (currentAction.productId && isServiceInvokeAction.value && currentAction.identifier) {
|
||||
// 加载物模型TSL以获取服务信息
|
||||
await loadServiceFromTSL(currentAction.productId, currentAction.identifier)
|
||||
}
|
||||
|
||||
isInitialized.value = true
|
||||
}
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
initializeComponent()
|
||||
})
|
||||
|
||||
/** 监听关键字段的变化，避免深度监听导致的性能问题 */
|
||||
watch(
|
||||
() => [action.value.productId, action.value.type, action.value.identifier],
|
||||
async ([newProductId, , newIdentifier], [oldProductId, , oldIdentifier]) => {
|
||||
// 避免初始化时的重复调用
|
||||
if (!isInitialized.value) return
|
||||
|
||||
// 产品变化时重新加载数据
|
||||
if (newProductId !== oldProductId) {
|
||||
if (newProductId && isPropertySetAction.value) {
|
||||
await loadThingModelProperties(newProductId as number)
|
||||
} else if (newProductId && isServiceInvokeAction.value) {
|
||||
await loadServiceList(newProductId as number)
|
||||
}
|
||||
}
|
||||
|
||||
// 服务标识符变化时更新选中的服务
|
||||
if (
|
||||
newIdentifier !== oldIdentifier &&
|
||||
newProductId &&
|
||||
isServiceInvokeAction.value &&
|
||||
newIdentifier
|
||||
) {
|
||||
const service = serviceList.value.find((s: any) => s.identifier === newIdentifier)
|
||||
if (service) {
|
||||
selectedService.value = service
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,20 +1,110 @@
|
||||
<!-- 设备触发配置组件 -->
|
||||
<script setup lang="ts">
|
||||
import type { Trigger } from '#/api/iot/rule/scene';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import MainConditionInnerConfig from './MainConditionInnerConfig.vue';
|
||||
import SubConditionGroupConfig from './SubConditionGroupConfig.vue';
|
||||
|
||||
/** 设备触发配置组件 */
|
||||
defineOptions({ name: 'DeviceTriggerConfig' });
|
||||
|
||||
const props = defineProps<{
|
||||
index: number;
|
||||
modelValue: Trigger;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: Trigger): void;
|
||||
(e: 'trigger-type-change', type: number): void;
|
||||
}>();
|
||||
|
||||
const trigger = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const maxSubGroups = 3; // 最多 3 个子条件组
|
||||
const maxConditionsPerGroup = 3; // 每组最多 3 个条件
|
||||
|
||||
/**
|
||||
* 更新条件
|
||||
* @param condition 条件对象
|
||||
*/
|
||||
const updateCondition = (condition: Trigger) => {
|
||||
trigger.value = condition;
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理触发器类型变化事件
|
||||
* @param type 触发器类型
|
||||
*/
|
||||
const handleTriggerTypeChange = (type: number) => {
|
||||
trigger.value.type = type;
|
||||
emit('trigger-type-change', type);
|
||||
};
|
||||
|
||||
/** 添加子条件组 */
|
||||
const addSubGroup = async () => {
|
||||
if (!trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups = [];
|
||||
}
|
||||
|
||||
// 检查是否达到最大子组数量限制
|
||||
if (trigger.value.conditionGroups?.length >= maxSubGroups) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用 nextTick 确保响应式更新完成后再添加新的子组
|
||||
await nextTick();
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups.push([]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 移除子条件组
|
||||
* @param index 子条件组索引
|
||||
*/
|
||||
const removeSubGroup = (index: number) => {
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新子条件组
|
||||
* @param index 子条件组索引
|
||||
* @param subGroup 子条件组数据
|
||||
*/
|
||||
const updateSubGroup = (index: number, subGroup: any) => {
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups[index] = subGroup;
|
||||
}
|
||||
};
|
||||
|
||||
/** 移除整个条件组 */
|
||||
const removeConditionGroup = () => {
|
||||
trigger.value.conditionGroups = undefined;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-16px">
|
||||
<div class="gap-16px flex flex-col">
|
||||
<!-- 主条件配置 - 默认直接展示 -->
|
||||
<div class="space-y-16px">
|
||||
<!-- 主条件配置 -->
|
||||
<div class="flex flex-col gap-16px">
|
||||
<div class="gap-16px flex flex-col">
|
||||
<!-- 主条件配置 -->
|
||||
<div class="space-y-16px">
|
||||
<!-- 主条件头部 - 与附加条件组保持一致的绿色风格 -->
|
||||
<div
|
||||
class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
|
||||
class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
|
||||
>
|
||||
<div class="flex items-center gap-12px">
|
||||
<div class="flex items-center gap-8px text-16px font-600 text-green-700">
|
||||
<div class="gap-12px flex items-center">
|
||||
<div
|
||||
class="gap-8px text-16px font-600 flex items-center text-green-700"
|
||||
>
|
||||
<div
|
||||
class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
|
||||
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
|
||||
>
|
||||
主
|
||||
</div>
|
||||
@@ -38,15 +128,17 @@
|
||||
<!-- 条件组配置 -->
|
||||
<div class="space-y-16px">
|
||||
<!-- 条件组配置 -->
|
||||
<div class="flex flex-col gap-16px">
|
||||
<div class="gap-16px flex flex-col">
|
||||
<!-- 条件组容器头部 -->
|
||||
<div
|
||||
class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
|
||||
class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
|
||||
>
|
||||
<div class="flex items-center gap-12px">
|
||||
<div class="flex items-center gap-8px text-16px font-600 text-green-700">
|
||||
<div class="gap-12px flex items-center">
|
||||
<div
|
||||
class="gap-8px text-16px font-600 flex items-center text-green-700"
|
||||
>
|
||||
<div
|
||||
class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
|
||||
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
|
||||
>
|
||||
组
|
||||
</div>
|
||||
@@ -57,7 +149,7 @@
|
||||
{{ trigger.conditionGroups?.length || 0 }} 个子条件组
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@@ -67,7 +159,12 @@
|
||||
<Icon icon="ep:plus" />
|
||||
添加子条件组
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" text @click="removeConditionGroup">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
text
|
||||
@click="removeConditionGroup"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
删除条件组
|
||||
</el-button>
|
||||
@@ -88,22 +185,28 @@
|
||||
>
|
||||
<!-- 子条件组容器 -->
|
||||
<div
|
||||
class="border-2 border-orange-200 rounded-8px bg-orange-50 shadow-sm hover:shadow-md transition-shadow"
|
||||
class="rounded-8px border-2 border-orange-200 bg-orange-50 shadow-sm transition-shadow hover:shadow-md"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between p-16px bg-gradient-to-r from-orange-50 to-yellow-50 border-b border-orange-200 rounded-t-6px"
|
||||
class="p-16px rounded-t-6px flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50"
|
||||
>
|
||||
<div class="flex items-center gap-12px">
|
||||
<div class="flex items-center gap-8px text-16px font-600 text-orange-700">
|
||||
<div class="gap-12px flex items-center">
|
||||
<div
|
||||
class="gap-8px text-16px font-600 flex items-center text-orange-700"
|
||||
>
|
||||
<div
|
||||
class="w-24px h-24px bg-orange-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
|
||||
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
|
||||
>
|
||||
{{ subGroupIndex + 1 }}
|
||||
</div>
|
||||
<span>子条件组 {{ subGroupIndex + 1 }}</span>
|
||||
</div>
|
||||
<el-tag size="small" type="warning" class="font-500">组内条件为"且"关系</el-tag>
|
||||
<el-tag size="small" type="info"> {{ subGroup?.length || 0 }}个条件 </el-tag>
|
||||
<el-tag size="small" type="warning" class="font-500">
|
||||
组内条件为"且"关系
|
||||
</el-tag>
|
||||
<el-tag size="small" type="info">
|
||||
{{ subGroup?.length || 0 }}个条件
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button
|
||||
type="danger"
|
||||
@@ -119,7 +222,9 @@
|
||||
|
||||
<SubConditionGroupConfig
|
||||
:model-value="subGroup"
|
||||
@update:model-value="(value) => updateSubGroup(subGroupIndex, value)"
|
||||
@update:model-value="
|
||||
(value) => updateSubGroup(subGroupIndex, value)
|
||||
"
|
||||
:trigger-type="trigger.type"
|
||||
:max-conditions="maxConditionsPerGroup"
|
||||
/>
|
||||
@@ -128,13 +233,15 @@
|
||||
<!-- 子条件组间的"或"连接符 -->
|
||||
<div
|
||||
v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
|
||||
class="flex items-center justify-center py-12px"
|
||||
class="py-12px flex items-center justify-center"
|
||||
>
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<!-- 连接线 -->
|
||||
<div class="w-32px h-1px bg-orange-300"></div>
|
||||
<!-- 或标签 -->
|
||||
<div class="px-16px py-6px bg-orange-100 border-2 border-orange-300 rounded-full">
|
||||
<div
|
||||
class="px-16px py-6px rounded-full border-2 border-orange-300 bg-orange-100"
|
||||
>
|
||||
<span class="text-14px font-600 text-orange-600">或</span>
|
||||
</div>
|
||||
<!-- 连接线 -->
|
||||
@@ -148,9 +255,9 @@
|
||||
<!-- 空状态 -->
|
||||
<div
|
||||
v-else
|
||||
class="p-24px border-2 border-dashed border-orange-200 rounded-8px text-center bg-orange-50"
|
||||
class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-12px">
|
||||
<div class="gap-12px flex flex-col items-center">
|
||||
<Icon icon="ep:plus" class="text-32px text-orange-400" />
|
||||
<div class="text-orange-600">
|
||||
<p class="text-14px font-500 mb-4px">暂无子条件组</p>
|
||||
@@ -162,90 +269,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
|
||||
import SubConditionGroupConfig from './SubConditionGroupConfig.vue'
|
||||
import type { Trigger } from '#/api/iot/rule/scene'
|
||||
|
||||
/** 设备触发配置组件 */
|
||||
defineOptions({ name: 'DeviceTriggerConfig' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Trigger
|
||||
index: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: Trigger): void
|
||||
(e: 'trigger-type-change', type: number): void
|
||||
}>()
|
||||
|
||||
const trigger = useVModel(props, 'modelValue', emit)
|
||||
|
||||
const maxSubGroups = 3 // 最多 3 个子条件组
|
||||
const maxConditionsPerGroup = 3 // 每组最多 3 个条件
|
||||
|
||||
/**
|
||||
* 更新条件
|
||||
* @param condition 条件对象
|
||||
*/
|
||||
const updateCondition = (condition: Trigger) => {
|
||||
trigger.value = condition
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理触发器类型变化事件
|
||||
* @param type 触发器类型
|
||||
*/
|
||||
const handleTriggerTypeChange = (type: number) => {
|
||||
trigger.value.type = type
|
||||
emit('trigger-type-change', type)
|
||||
}
|
||||
|
||||
/** 添加子条件组 */
|
||||
const addSubGroup = async () => {
|
||||
if (!trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups = []
|
||||
}
|
||||
|
||||
// 检查是否达到最大子组数量限制
|
||||
if (trigger.value.conditionGroups?.length >= maxSubGroups) {
|
||||
return
|
||||
}
|
||||
|
||||
// 使用 nextTick 确保响应式更新完成后再添加新的子组
|
||||
await nextTick()
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups.push([])
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除子条件组
|
||||
* @param index 子条件组索引
|
||||
*/
|
||||
const removeSubGroup = (index: number) => {
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新子条件组
|
||||
* @param index 子条件组索引
|
||||
* @param subGroup 子条件组数据
|
||||
*/
|
||||
const updateSubGroup = (index: number, subGroup: any) => {
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups[index] = subGroup
|
||||
}
|
||||
}
|
||||
|
||||
/** 移除整个条件组 */
|
||||
const removeConditionGroup = () => {
|
||||
trigger.value.conditionGroups = undefined
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,174 @@
|
||||
<script setup lang="ts">
|
||||
import type { Trigger } from '#/api/iot/rule/scene';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
getTriggerTypeLabel,
|
||||
IoTDeviceStatusEnum,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum,
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
triggerTypeOptions,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
import JsonParamsInput from '../inputs/JsonParamsInput.vue';
|
||||
import ValueInput from '../inputs/ValueInput.vue';
|
||||
import DeviceSelector from '../selectors/DeviceSelector.vue';
|
||||
import OperatorSelector from '../selectors/OperatorSelector.vue';
|
||||
import ProductSelector from '../selectors/ProductSelector.vue';
|
||||
import PropertySelector from '../selectors/PropertySelector.vue';
|
||||
|
||||
/** 主条件内部配置组件 */
|
||||
defineOptions({ name: 'MainConditionInnerConfig' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Trigger;
|
||||
triggerType: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: Trigger): void;
|
||||
(e: 'trigger-type-change', value: number): void;
|
||||
}>();
|
||||
|
||||
/** 获取设备状态变更选项（用于触发器配置） */
|
||||
const deviceStatusChangeOptions = [
|
||||
{
|
||||
label: IoTDeviceStatusEnum.ONLINE.label,
|
||||
value: IoTDeviceStatusEnum.ONLINE.value,
|
||||
},
|
||||
{
|
||||
label: IoTDeviceStatusEnum.OFFLINE.label,
|
||||
value: IoTDeviceStatusEnum.OFFLINE.value,
|
||||
},
|
||||
];
|
||||
|
||||
const condition = useVModel(props, 'modelValue', emit);
|
||||
const propertyType = ref(''); // 属性类型
|
||||
const propertyConfig = ref<any>(null); // 属性配置
|
||||
|
||||
// 计算属性：是否为设备属性触发器
|
||||
const isDevicePropertyTrigger = computed(() => {
|
||||
return (
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
);
|
||||
});
|
||||
|
||||
// 计算属性：是否为设备状态触发器
|
||||
const isDeviceStatusTrigger = computed(() => {
|
||||
return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE;
|
||||
});
|
||||
|
||||
// 计算属性：是否需要操作符选择（服务调用和事件上报不需要操作符）
|
||||
const needsOperatorSelector = computed(() => {
|
||||
const noOperatorTriggerTypes = [
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
|
||||
] as number[];
|
||||
return !noOperatorTriggerTypes.includes(props.triggerType);
|
||||
});
|
||||
|
||||
// 计算属性：是否需要宽列布局（服务调用和事件上报不需要操作符列，所以值输入列更宽）
|
||||
const isWideValueColumn = computed(() => {
|
||||
const wideColumnTriggerTypes = [
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
|
||||
] as number[];
|
||||
return wideColumnTriggerTypes.includes(props.triggerType);
|
||||
});
|
||||
|
||||
// 计算属性：值输入字段的标签文本
|
||||
const valueInputLabel = computed(() => {
|
||||
return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
? '服务参数'
|
||||
: '比较值';
|
||||
});
|
||||
|
||||
// 计算属性：服务配置 - 用于 JsonParamsInput
|
||||
const serviceConfig = computed(() => {
|
||||
if (
|
||||
propertyConfig.value &&
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
) {
|
||||
return {
|
||||
service: {
|
||||
name: propertyConfig.value.name || '服务',
|
||||
inputParams: propertyConfig.value.inputParams || [],
|
||||
},
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
|
||||
// 计算属性：事件配置 - 用于 JsonParamsInput
|
||||
const eventConfig = computed(() => {
|
||||
if (
|
||||
propertyConfig.value &&
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
|
||||
) {
|
||||
return {
|
||||
event: {
|
||||
name: propertyConfig.value.name || '事件',
|
||||
outputParams: propertyConfig.value.outputParams || [],
|
||||
},
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
|
||||
/**
|
||||
* 更新条件字段
|
||||
* @param field 字段名
|
||||
* @param value 字段值
|
||||
*/
|
||||
const updateConditionField = (field: any, value: any) => {
|
||||
condition.value[field] = value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理触发器类型变化事件
|
||||
* @param type 触发器类型
|
||||
*/
|
||||
const handleTriggerTypeChange = (type: number) => {
|
||||
emit('trigger-type-change', type);
|
||||
};
|
||||
|
||||
/** 处理产品变化事件 */
|
||||
const handleProductChange = () => {
|
||||
// 产品变化时清空设备和属性
|
||||
condition.value.deviceId = undefined;
|
||||
condition.value.identifier = '';
|
||||
};
|
||||
|
||||
/** 处理设备变化事件 */
|
||||
const handleDeviceChange = () => {
|
||||
// 设备变化时清空属性
|
||||
condition.value.identifier = '';
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理属性变化事件
|
||||
* @param propertyInfo 属性信息对象
|
||||
*/
|
||||
const handlePropertyChange = (propertyInfo: any) => {
|
||||
if (propertyInfo) {
|
||||
propertyType.value = propertyInfo.type;
|
||||
propertyConfig.value = propertyInfo.config;
|
||||
|
||||
// 对于事件上报和服务调用，自动设置操作符为 '='
|
||||
if (
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
) {
|
||||
condition.value.operator =
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-16px">
|
||||
<!-- 触发事件类型选择 -->
|
||||
@@ -25,7 +196,9 @@
|
||||
<el-form-item label="产品" required>
|
||||
<ProductSelector
|
||||
:model-value="condition.productId"
|
||||
@update:model-value="(value) => updateConditionField('productId', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('productId', value)
|
||||
"
|
||||
@change="handleProductChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -34,7 +207,9 @@
|
||||
<el-form-item label="设备" required>
|
||||
<DeviceSelector
|
||||
:model-value="condition.deviceId"
|
||||
@update:model-value="(value) => updateConditionField('deviceId', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('deviceId', value)
|
||||
"
|
||||
:product-id="condition.productId"
|
||||
@change="handleDeviceChange"
|
||||
/>
|
||||
@@ -49,7 +224,9 @@
|
||||
<el-form-item label="监控项" required>
|
||||
<PropertySelector
|
||||
:model-value="condition.identifier"
|
||||
@update:model-value="(value) => updateConditionField('identifier', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('identifier', value)
|
||||
"
|
||||
:trigger-type="triggerType"
|
||||
:product-id="condition.productId"
|
||||
:device-id="condition.deviceId"
|
||||
@@ -63,7 +240,9 @@
|
||||
<el-form-item label="操作符" required>
|
||||
<OperatorSelector
|
||||
:model-value="condition.operator"
|
||||
@update:model-value="(value) => updateConditionField('operator', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('operator', value)
|
||||
"
|
||||
:property-type="propertyType"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -74,7 +253,10 @@
|
||||
<el-form-item :label="valueInputLabel" required>
|
||||
<!-- 服务调用参数配置 -->
|
||||
<JsonParamsInput
|
||||
v-if="triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE"
|
||||
v-if="
|
||||
triggerType ===
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
"
|
||||
v-model="condition.value"
|
||||
type="service"
|
||||
:config="serviceConfig"
|
||||
@@ -82,7 +264,9 @@
|
||||
/>
|
||||
<!-- 事件上报参数配置 -->
|
||||
<JsonParamsInput
|
||||
v-else-if="triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST"
|
||||
v-else-if="
|
||||
triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
|
||||
"
|
||||
v-model="condition.value"
|
||||
type="event"
|
||||
:config="eventConfig"
|
||||
@@ -92,7 +276,9 @@
|
||||
<ValueInput
|
||||
v-else
|
||||
:model-value="condition.value"
|
||||
@update:model-value="(value) => updateConditionField('value', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('value', value)
|
||||
"
|
||||
:property-type="propertyType"
|
||||
:operator="condition.operator"
|
||||
:property-config="propertyConfig"
|
||||
@@ -110,7 +296,9 @@
|
||||
<el-form-item label="产品" required>
|
||||
<ProductSelector
|
||||
:model-value="condition.productId"
|
||||
@update:model-value="(value) => updateConditionField('productId', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('productId', value)
|
||||
"
|
||||
@change="handleProductChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -119,7 +307,9 @@
|
||||
<el-form-item label="设备" required>
|
||||
<DeviceSelector
|
||||
:model-value="condition.deviceId"
|
||||
@update:model-value="(value) => updateConditionField('deviceId', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('deviceId', value)
|
||||
"
|
||||
:product-id="condition.productId"
|
||||
@change="handleDeviceChange"
|
||||
/>
|
||||
@@ -131,13 +321,19 @@
|
||||
<el-form-item label="操作符" required>
|
||||
<el-select
|
||||
:model-value="condition.operator"
|
||||
@update:model-value="(value) => updateConditionField('operator', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('operator', value)
|
||||
"
|
||||
placeholder="请选择操作符"
|
||||
class="w-full"
|
||||
>
|
||||
<el-option
|
||||
:label="IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name"
|
||||
:value="IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value"
|
||||
:label="
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
|
||||
"
|
||||
:value="
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
|
||||
"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -146,7 +342,9 @@
|
||||
<el-form-item label="参数" required>
|
||||
<el-select
|
||||
:model-value="condition.value"
|
||||
@update:model-value="(value) => updateConditionField('value', value)"
|
||||
@update:model-value="
|
||||
(value) => updateConditionField('value', value)
|
||||
"
|
||||
placeholder="请选择操作符"
|
||||
class="w-full"
|
||||
>
|
||||
@@ -163,8 +361,8 @@
|
||||
</div>
|
||||
|
||||
<!-- 其他触发类型的提示 -->
|
||||
<div v-else class="text-center py-20px">
|
||||
<p class="text-14px text-[var(--el-text-color-secondary)] mb-4px">
|
||||
<div v-else class="py-20px text-center">
|
||||
<p class="text-14px mb-4px text-[var(--el-text-color-secondary)]">
|
||||
当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
|
||||
</p>
|
||||
<p class="text-12px text-[var(--el-text-color-placeholder)]">
|
||||
@@ -173,168 +371,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ProductSelector from '../selectors/ProductSelector.vue'
|
||||
import DeviceSelector from '../selectors/DeviceSelector.vue'
|
||||
import PropertySelector from '../selectors/PropertySelector.vue'
|
||||
import OperatorSelector from '../selectors/OperatorSelector.vue'
|
||||
import ValueInput from '../inputs/ValueInput.vue'
|
||||
import JsonParamsInput from '../inputs/JsonParamsInput.vue'
|
||||
|
||||
import type { Trigger } from '#/api/iot/rule/scene'
|
||||
import {
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
triggerTypeOptions,
|
||||
getTriggerTypeLabel,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum,
|
||||
IoTDeviceStatusEnum
|
||||
} from '#/views/iot/utils/constants'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
/** 主条件内部配置组件 */
|
||||
defineOptions({ name: 'MainConditionInnerConfig' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Trigger
|
||||
triggerType: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: Trigger): void
|
||||
(e: 'trigger-type-change', value: number): void
|
||||
}>()
|
||||
|
||||
/** 获取设备状态变更选项（用于触发器配置） */
|
||||
const deviceStatusChangeOptions = [
|
||||
{
|
||||
label: IoTDeviceStatusEnum.ONLINE.label,
|
||||
value: IoTDeviceStatusEnum.ONLINE.value
|
||||
},
|
||||
{
|
||||
label: IoTDeviceStatusEnum.OFFLINE.label,
|
||||
value: IoTDeviceStatusEnum.OFFLINE.value
|
||||
}
|
||||
]
|
||||
|
||||
const condition = useVModel(props, 'modelValue', emit)
|
||||
const propertyType = ref('') // 属性类型
|
||||
const propertyConfig = ref<any>(null) // 属性配置
|
||||
|
||||
// 计算属性：是否为设备属性触发器
|
||||
const isDevicePropertyTrigger = computed(() => {
|
||||
return (
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
)
|
||||
})
|
||||
|
||||
// 计算属性：是否为设备状态触发器
|
||||
const isDeviceStatusTrigger = computed(() => {
|
||||
return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE
|
||||
})
|
||||
|
||||
// 计算属性：是否需要操作符选择（服务调用和事件上报不需要操作符）
|
||||
const needsOperatorSelector = computed(() => {
|
||||
const noOperatorTriggerTypes = [
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
|
||||
] as number[]
|
||||
return !noOperatorTriggerTypes.includes(props.triggerType)
|
||||
})
|
||||
|
||||
// 计算属性：是否需要宽列布局（服务调用和事件上报不需要操作符列，所以值输入列更宽）
|
||||
const isWideValueColumn = computed(() => {
|
||||
const wideColumnTriggerTypes = [
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
|
||||
IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
|
||||
] as number[]
|
||||
return wideColumnTriggerTypes.includes(props.triggerType)
|
||||
})
|
||||
|
||||
// 计算属性：值输入字段的标签文本
|
||||
const valueInputLabel = computed(() => {
|
||||
return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
? '服务参数'
|
||||
: '比较值'
|
||||
})
|
||||
|
||||
// 计算属性：服务配置 - 用于 JsonParamsInput
|
||||
const serviceConfig = computed(() => {
|
||||
if (
|
||||
propertyConfig.value &&
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
) {
|
||||
return {
|
||||
service: {
|
||||
name: propertyConfig.value.name || '服务',
|
||||
inputParams: propertyConfig.value.inputParams || []
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
})
|
||||
|
||||
// 计算属性：事件配置 - 用于 JsonParamsInput
|
||||
const eventConfig = computed(() => {
|
||||
if (propertyConfig.value && props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST) {
|
||||
return {
|
||||
event: {
|
||||
name: propertyConfig.value.name || '事件',
|
||||
outputParams: propertyConfig.value.outputParams || []
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
})
|
||||
|
||||
/**
|
||||
* 更新条件字段
|
||||
* @param field 字段名
|
||||
* @param value 字段值
|
||||
*/
|
||||
const updateConditionField = (field: any, value: any) => {
|
||||
condition.value[field] = value
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理触发器类型变化事件
|
||||
* @param type 触发器类型
|
||||
*/
|
||||
const handleTriggerTypeChange = (type: number) => {
|
||||
emit('trigger-type-change', type)
|
||||
}
|
||||
|
||||
/** 处理产品变化事件 */
|
||||
const handleProductChange = () => {
|
||||
// 产品变化时清空设备和属性
|
||||
condition.value.deviceId = undefined
|
||||
condition.value.identifier = ''
|
||||
}
|
||||
|
||||
/** 处理设备变化事件 */
|
||||
const handleDeviceChange = () => {
|
||||
// 设备变化时清空属性
|
||||
condition.value.identifier = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理属性变化事件
|
||||
* @param propertyInfo 属性信息对象
|
||||
*/
|
||||
const handlePropertyChange = (propertyInfo: any) => {
|
||||
if (propertyInfo) {
|
||||
propertyType.value = propertyInfo.type
|
||||
propertyConfig.value = propertyInfo.config
|
||||
|
||||
// 对于事件上报和服务调用，自动设置操作符为 '='
|
||||
if (
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
|
||||
props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
) {
|
||||
condition.value.operator = IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import type { TriggerCondition } from '#/api/iot/rule/scene';
|
||||
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum,
|
||||
IotRuleSceneTriggerConditionTypeEnum,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
import ConditionConfig from './ConditionConfig.vue';
|
||||
|
||||
/** 子条件组配置组件 */
|
||||
defineOptions({ name: 'SubConditionGroupConfig' });
|
||||
|
||||
const props = defineProps<{
|
||||
maxConditions?: number;
|
||||
modelValue: TriggerCondition[];
|
||||
triggerType: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: TriggerCondition[]): void;
|
||||
}>();
|
||||
|
||||
const subGroup = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const maxConditions = computed(() => props.maxConditions || 3); // 最大条件数量
|
||||
|
||||
/** 添加条件 */
|
||||
const addCondition = async () => {
|
||||
// 确保 subGroup.value 是一个数组
|
||||
if (!subGroup.value) {
|
||||
subGroup.value = [];
|
||||
}
|
||||
|
||||
// 检查是否达到最大条件数量限制
|
||||
if (subGroup.value?.length >= maxConditions.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newCondition: TriggerCondition = {
|
||||
type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
identifier: '',
|
||||
operator: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value, // 使用枚举默认值
|
||||
param: '',
|
||||
};
|
||||
|
||||
// 使用 nextTick 确保响应式更新完成后再添加新条件
|
||||
await nextTick();
|
||||
if (subGroup.value) {
|
||||
subGroup.value.push(newCondition);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 移除条件
|
||||
* @param index 条件索引
|
||||
*/
|
||||
const removeCondition = (index: number) => {
|
||||
if (subGroup.value) {
|
||||
subGroup.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新条件
|
||||
* @param index 条件索引
|
||||
* @param condition 条件对象
|
||||
*/
|
||||
const updateCondition = (index: number, condition: TriggerCondition) => {
|
||||
if (subGroup.value) {
|
||||
subGroup.value[index] = condition;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-16px">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!subGroup || subGroup.length === 0" class="text-center py-24px">
|
||||
<div class="flex flex-col items-center gap-12px">
|
||||
<Icon icon="ep:plus" class="text-32px text-[var(--el-text-color-placeholder)]" />
|
||||
<div v-if="!subGroup || subGroup.length === 0" class="py-24px text-center">
|
||||
<div class="gap-12px flex flex-col items-center">
|
||||
<Icon
|
||||
icon="ep:plus"
|
||||
class="text-32px text-[var(--el-text-color-placeholder)]"
|
||||
/>
|
||||
<div class="text-[var(--el-text-color-secondary)]">
|
||||
<p class="text-14px font-500 mb-4px">暂无条件</p>
|
||||
<p class="text-12px">点击下方按钮添加第一个条件</p>
|
||||
@@ -24,18 +108,19 @@
|
||||
>
|
||||
<!-- 条件配置 -->
|
||||
<div
|
||||
class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)] shadow-sm"
|
||||
class="rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)] shadow-sm"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between p-12px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)] rounded-t-4px"
|
||||
class="p-12px rounded-t-4px flex items-center justify-between border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]"
|
||||
>
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<div
|
||||
class="w-20px h-20px bg-blue-500 text-white rounded-full flex items-center justify-center text-10px font-bold"
|
||||
class="w-20px h-20px text-10px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
|
||||
>
|
||||
{{ conditionIndex + 1 }}
|
||||
</div>
|
||||
<span class="text-12px font-500 text-[var(--el-text-color-primary)]"
|
||||
<span
|
||||
class="text-12px font-500 text-[var(--el-text-color-primary)]"
|
||||
>条件 {{ conditionIndex + 1 }}</span
|
||||
>
|
||||
</div>
|
||||
@@ -54,7 +139,9 @@
|
||||
<div class="p-12px">
|
||||
<ConditionConfig
|
||||
:model-value="condition"
|
||||
@update:model-value="(value) => updateCondition(conditionIndex, value)"
|
||||
@update:model-value="
|
||||
(value) => updateCondition(conditionIndex, value)
|
||||
"
|
||||
:trigger-type="triggerType"
|
||||
/>
|
||||
</div>
|
||||
@@ -63,94 +150,21 @@
|
||||
|
||||
<!-- 添加条件按钮 -->
|
||||
<div
|
||||
v-if="subGroup && subGroup.length > 0 && subGroup.length < maxConditions"
|
||||
class="text-center py-16px"
|
||||
v-if="
|
||||
subGroup && subGroup.length > 0 && subGroup.length < maxConditions
|
||||
"
|
||||
class="py-16px text-center"
|
||||
>
|
||||
<el-button type="primary" plain @click="addCondition">
|
||||
<Icon icon="ep:plus" />
|
||||
继续添加条件
|
||||
</el-button>
|
||||
<span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]">
|
||||
<span
|
||||
class="mt-8px text-12px block text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
最多可添加 {{ maxConditions }} 个条件
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick } from 'vue'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import ConditionConfig from './ConditionConfig.vue'
|
||||
import type { TriggerCondition } from '#/api/iot/rule/scene'
|
||||
import {
|
||||
IotRuleSceneTriggerConditionTypeEnum,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum
|
||||
} from '#/views/iot/utils/constants'
|
||||
|
||||
/** 子条件组配置组件 */
|
||||
defineOptions({ name: 'SubConditionGroupConfig' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: TriggerCondition[]
|
||||
triggerType: number
|
||||
maxConditions?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: TriggerCondition[]): void
|
||||
}>()
|
||||
|
||||
const subGroup = useVModel(props, 'modelValue', emit)
|
||||
|
||||
const maxConditions = computed(() => props.maxConditions || 3) // 最大条件数量
|
||||
|
||||
/** 添加条件 */
|
||||
const addCondition = async () => {
|
||||
// 确保 subGroup.value 是一个数组
|
||||
if (!subGroup.value) {
|
||||
subGroup.value = []
|
||||
}
|
||||
|
||||
// 检查是否达到最大条件数量限制
|
||||
if (subGroup.value?.length >= maxConditions.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const newCondition: TriggerCondition = {
|
||||
type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
identifier: '',
|
||||
operator: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value, // 使用枚举默认值
|
||||
param: ''
|
||||
}
|
||||
|
||||
// 使用 nextTick 确保响应式更新完成后再添加新条件
|
||||
await nextTick()
|
||||
if (subGroup.value) {
|
||||
subGroup.value.push(newCondition)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除条件
|
||||
* @param index 条件索引
|
||||
*/
|
||||
const removeCondition = (index: number) => {
|
||||
if (subGroup.value) {
|
||||
subGroup.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新条件
|
||||
* @param index 条件索引
|
||||
* @param condition 条件对象
|
||||
*/
|
||||
const updateCondition = (index: number, condition: TriggerCondition) => {
|
||||
if (subGroup.value) {
|
||||
subGroup.value[index] = condition
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,417 @@
|
||||
<!-- JSON参数输入组件 - 通用版本 -->
|
||||
<script setup lang="ts">
|
||||
import type { JsonParamsInputType } from '#/views/iot/utils/constants';
|
||||
|
||||
import { InfoFilled } from '@element-plus/icons-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
IoTDataSpecsDataTypeEnum,
|
||||
JSON_PARAMS_EXAMPLE_VALUES,
|
||||
JSON_PARAMS_INPUT_CONSTANTS,
|
||||
JSON_PARAMS_INPUT_ICONS,
|
||||
JsonParamsInputTypeEnum,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
/** JSON参数输入组件 - 通用版本 */
|
||||
defineOptions({ name: 'JsonParamsInput' });
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: JsonParamsInputTypeEnum.SERVICE,
|
||||
placeholder: JSON_PARAMS_INPUT_CONSTANTS.PLACEHOLDER,
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
interface JsonParamsConfig {
|
||||
// 服务配置
|
||||
service?: {
|
||||
inputParams?: any[];
|
||||
name: string;
|
||||
};
|
||||
// 事件配置
|
||||
event?: {
|
||||
name: string;
|
||||
outputParams?: any[];
|
||||
};
|
||||
// 属性配置
|
||||
properties?: any[];
|
||||
// 自定义配置
|
||||
custom?: {
|
||||
name: string;
|
||||
params: any[];
|
||||
};
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue?: string;
|
||||
config?: JsonParamsConfig;
|
||||
type?: JsonParamsInputType;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void;
|
||||
}
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit, {
|
||||
defaultValue: '',
|
||||
});
|
||||
|
||||
const paramsJson = ref(''); // JSON参数字符串
|
||||
const jsonError = ref(''); // JSON验证错误信息
|
||||
|
||||
// 计算属性：参数列表
|
||||
const paramsList = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.CUSTOM: {
|
||||
return props.config?.custom?.params || [];
|
||||
}
|
||||
case JsonParamsInputTypeEnum.EVENT: {
|
||||
return props.config?.event?.outputParams || [];
|
||||
}
|
||||
case JsonParamsInputTypeEnum.PROPERTY: {
|
||||
return props.config?.properties || [];
|
||||
}
|
||||
case JsonParamsInputTypeEnum.SERVICE: {
|
||||
return props.config?.service?.inputParams || [];
|
||||
}
|
||||
default: {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 计算属性：标题
|
||||
const title = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.CUSTOM: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.CUSTOM(
|
||||
props.config?.custom?.name,
|
||||
);
|
||||
}
|
||||
case JsonParamsInputTypeEnum.EVENT: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.EVENT(
|
||||
props.config?.event?.name,
|
||||
);
|
||||
}
|
||||
case JsonParamsInputTypeEnum.PROPERTY: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.PROPERTY;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.SERVICE: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.SERVICE(
|
||||
props.config?.service?.name,
|
||||
);
|
||||
}
|
||||
default: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.DEFAULT;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 计算属性：标题图标
|
||||
const titleIcon = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.CUSTOM: {
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.CUSTOM;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.EVENT: {
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.EVENT;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.PROPERTY: {
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.PROPERTY;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.SERVICE: {
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.SERVICE;
|
||||
}
|
||||
default: {
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.DEFAULT;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 计算属性：参数图标
|
||||
const paramsIcon = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.CUSTOM: {
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.CUSTOM;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.EVENT: {
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.EVENT;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.PROPERTY: {
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.PROPERTY;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.SERVICE: {
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.SERVICE;
|
||||
}
|
||||
default: {
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.DEFAULT;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 计算属性：参数标签
|
||||
const paramsLabel = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.CUSTOM: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.CUSTOM;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.EVENT: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.EVENT;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.PROPERTY: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.PROPERTY;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.SERVICE: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.SERVICE;
|
||||
}
|
||||
default: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.DEFAULT;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 计算属性：空状态消息
|
||||
const emptyMessage = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.CUSTOM: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.CUSTOM;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.EVENT: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.EVENT;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.PROPERTY: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.PROPERTY;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.SERVICE: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.SERVICE;
|
||||
}
|
||||
default: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.DEFAULT;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 计算属性：无配置消息
|
||||
const noConfigMessage = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.CUSTOM: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.EVENT: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.PROPERTY: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
|
||||
}
|
||||
case JsonParamsInputTypeEnum.SERVICE: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
|
||||
}
|
||||
default: {
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 处理参数变化事件
|
||||
*/
|
||||
const handleParamsChange = () => {
|
||||
try {
|
||||
jsonError.value = ''; // 清除之前的错误
|
||||
|
||||
if (paramsJson.value.trim()) {
|
||||
const parsed = JSON.parse(paramsJson.value);
|
||||
localValue.value = paramsJson.value;
|
||||
|
||||
// 额外的参数验证
|
||||
if (typeof parsed !== 'object' || parsed === null) {
|
||||
jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAMS_MUST_BE_OBJECT;
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证必填参数
|
||||
for (const param of paramsList.value) {
|
||||
if (
|
||||
param.required &&
|
||||
(!parsed[param.identifier] || parsed[param.identifier] === '')
|
||||
) {
|
||||
jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAM_REQUIRED_ERROR(
|
||||
param.name,
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
localValue.value = '';
|
||||
}
|
||||
|
||||
// 验证通过
|
||||
jsonError.value = '';
|
||||
} catch (error) {
|
||||
jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_ERROR(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: JSON_PARAMS_INPUT_CONSTANTS.UNKNOWN_ERROR,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 快速填充示例数据
|
||||
*/
|
||||
const fillExampleJson = () => {
|
||||
paramsJson.value = generateExampleJson();
|
||||
handleParamsChange();
|
||||
};
|
||||
|
||||
/**
|
||||
* 清空参数
|
||||
*/
|
||||
const clearParams = () => {
|
||||
paramsJson.value = '';
|
||||
localValue.value = '';
|
||||
jsonError.value = '';
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取参数类型名称
|
||||
* @param dataType 数据类型
|
||||
* @returns 类型名称
|
||||
*/
|
||||
const getParamTypeName = (dataType: string) => {
|
||||
// 使用 constants.ts 中已有的 getDataTypeName 函数逻辑
|
||||
const typeMap = {
|
||||
[IoTDataSpecsDataTypeEnum.INT]: '整数',
|
||||
[IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
|
||||
[IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
|
||||
[IoTDataSpecsDataTypeEnum.TEXT]: '字符串',
|
||||
[IoTDataSpecsDataTypeEnum.BOOL]: '布尔值',
|
||||
[IoTDataSpecsDataTypeEnum.ENUM]: '枚举',
|
||||
[IoTDataSpecsDataTypeEnum.DATE]: '日期',
|
||||
[IoTDataSpecsDataTypeEnum.STRUCT]: '结构体',
|
||||
[IoTDataSpecsDataTypeEnum.ARRAY]: '数组',
|
||||
};
|
||||
return typeMap[dataType] || dataType;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取参数类型标签样式
|
||||
* @param dataType 数据类型
|
||||
* @returns 标签样式
|
||||
*/
|
||||
const getParamTypeTag = (dataType: string) => {
|
||||
const tagMap = {
|
||||
[IoTDataSpecsDataTypeEnum.INT]: 'primary',
|
||||
[IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
|
||||
[IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
|
||||
[IoTDataSpecsDataTypeEnum.TEXT]: 'info',
|
||||
[IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
|
||||
[IoTDataSpecsDataTypeEnum.ENUM]: 'danger',
|
||||
[IoTDataSpecsDataTypeEnum.DATE]: 'primary',
|
||||
[IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
|
||||
[IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
|
||||
};
|
||||
return tagMap[dataType] || 'info';
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取示例值
|
||||
* @param param 参数对象
|
||||
* @returns 示例值
|
||||
*/
|
||||
const getExampleValue = (param: any) => {
|
||||
const exampleConfig =
|
||||
JSON_PARAMS_EXAMPLE_VALUES[param.dataType] ||
|
||||
JSON_PARAMS_EXAMPLE_VALUES.DEFAULT;
|
||||
return exampleConfig.display;
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成示例JSON
|
||||
* @returns JSON字符串
|
||||
*/
|
||||
const generateExampleJson = () => {
|
||||
if (paramsList.value.length === 0) {
|
||||
return '{}';
|
||||
}
|
||||
|
||||
const example = {};
|
||||
paramsList.value.forEach((param) => {
|
||||
const exampleConfig =
|
||||
JSON_PARAMS_EXAMPLE_VALUES[param.dataType] ||
|
||||
JSON_PARAMS_EXAMPLE_VALUES.DEFAULT;
|
||||
example[param.identifier] = exampleConfig.value;
|
||||
});
|
||||
|
||||
return JSON.stringify(example, null, 2);
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理数据回显
|
||||
* @param value 值字符串
|
||||
*/
|
||||
const handleDataDisplay = (value: string) => {
|
||||
if (!value || !value.trim()) {
|
||||
paramsJson.value = '';
|
||||
jsonError.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 尝试解析JSON，如果成功则格式化
|
||||
const parsed = JSON.parse(value);
|
||||
paramsJson.value = JSON.stringify(parsed, null, 2);
|
||||
jsonError.value = '';
|
||||
} catch {
|
||||
// 如果不是有效的JSON，直接使用原字符串
|
||||
paramsJson.value = value;
|
||||
jsonError.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 监听外部值变化（编辑模式数据回显）
|
||||
watch(
|
||||
() => localValue.value,
|
||||
async (newValue, oldValue) => {
|
||||
// 避免循环更新
|
||||
if (newValue === oldValue) return;
|
||||
|
||||
// 使用 nextTick 确保在下一个 tick 中处理数据
|
||||
await nextTick();
|
||||
handleDataDisplay(newValue || '');
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 组件挂载后也尝试处理一次数据回显
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
if (localValue.value) {
|
||||
handleDataDisplay(localValue.value);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听配置变化
|
||||
watch(
|
||||
() => props.config,
|
||||
(newConfig, oldConfig) => {
|
||||
// 只有在配置真正变化时才清空数据
|
||||
if (
|
||||
JSON.stringify(newConfig) !== JSON.stringify(oldConfig) && // 如果没有外部传入的值，才清空数据
|
||||
!localValue.value
|
||||
) {
|
||||
paramsJson.value = '';
|
||||
jsonError.value = '';
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 参数配置 -->
|
||||
<div class="w-full space-y-12px">
|
||||
<div class="space-y-12px w-full">
|
||||
<!-- JSON 输入框 -->
|
||||
<div class="relative">
|
||||
<el-input
|
||||
@@ -13,7 +423,7 @@
|
||||
:class="{ 'is-error': jsonError }"
|
||||
/>
|
||||
<!-- 查看详细示例弹出层 -->
|
||||
<div class="absolute top-8px right-8px">
|
||||
<div class="top-8px right-8px absolute">
|
||||
<el-popover
|
||||
placement="left-start"
|
||||
:width="450"
|
||||
@@ -34,9 +444,14 @@
|
||||
|
||||
<!-- 弹出层内容 -->
|
||||
<div class="json-params-detail-content">
|
||||
<div class="flex items-center gap-8px mb-16px">
|
||||
<Icon :icon="titleIcon" class="text-[var(--el-color-primary)] text-18px" />
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">
|
||||
<div class="gap-8px mb-16px flex items-center">
|
||||
<Icon
|
||||
:icon="titleIcon"
|
||||
class="text-18px text-[var(--el-color-primary)]"
|
||||
/>
|
||||
<span
|
||||
class="text-16px font-600 text-[var(--el-text-color-primary)]"
|
||||
>
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -44,9 +459,14 @@
|
||||
<div class="space-y-16px">
|
||||
<!-- 参数列表 -->
|
||||
<div v-if="paramsList.length > 0">
|
||||
<div class="flex items-center gap-8px mb-8px">
|
||||
<Icon :icon="paramsIcon" class="text-[var(--el-color-primary)] text-14px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">
|
||||
<div class="gap-8px mb-8px flex items-center">
|
||||
<Icon
|
||||
:icon="paramsIcon"
|
||||
class="text-14px text-[var(--el-color-primary)]"
|
||||
/>
|
||||
<span
|
||||
class="text-14px font-500 text-[var(--el-text-color-primary)]"
|
||||
>
|
||||
{{ paramsLabel }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -54,24 +474,38 @@
|
||||
<div
|
||||
v-for="param in paramsList"
|
||||
:key="param.identifier"
|
||||
class="flex items-center justify-between p-8px bg-[var(--el-fill-color-lighter)] rounded-4px"
|
||||
class="p-8px rounded-4px flex items-center justify-between bg-[var(--el-fill-color-lighter)]"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="text-12px font-500 text-[var(--el-text-color-primary)]">
|
||||
<div
|
||||
class="text-12px font-500 text-[var(--el-text-color-primary)]"
|
||||
>
|
||||
{{ param.name }}
|
||||
<el-tag v-if="param.required" size="small" type="danger" class="ml-4px">
|
||||
<el-tag
|
||||
v-if="param.required"
|
||||
size="small"
|
||||
type="danger"
|
||||
class="ml-4px"
|
||||
>
|
||||
{{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="text-11px text-[var(--el-text-color-secondary)]">
|
||||
<div
|
||||
class="text-11px text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
{{ param.identifier }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<el-tag :type="getParamTypeTag(param.dataType)" size="small">
|
||||
<div class="gap-8px flex items-center">
|
||||
<el-tag
|
||||
:type="getParamTypeTag(param.dataType)"
|
||||
size="small"
|
||||
>
|
||||
{{ getParamTypeName(param.dataType) }}
|
||||
</el-tag>
|
||||
<span class="text-11px text-[var(--el-text-color-secondary)]">
|
||||
<span
|
||||
class="text-11px text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
{{ getExampleValue(param) }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -79,11 +513,13 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-12px ml-22px">
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)] mb-6px">
|
||||
<div
|
||||
class="text-12px mb-6px text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
{{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
|
||||
</div>
|
||||
<pre
|
||||
class="p-12px bg-[var(--el-fill-color-light)] rounded-4px text-11px text-[var(--el-text-color-primary)] overflow-x-auto border-l-3px border-[var(--el-color-primary)]"
|
||||
class="p-12px rounded-4px text-11px border-l-3px overflow-x-auto border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] text-[var(--el-text-color-primary)]"
|
||||
>
|
||||
<code>{{ generateExampleJson() }}</code>
|
||||
</pre>
|
||||
@@ -92,8 +528,10 @@
|
||||
|
||||
<!-- 无参数提示 -->
|
||||
<div v-else>
|
||||
<div class="text-center py-16px">
|
||||
<p class="text-14px text-[var(--el-text-color-secondary)]">{{ emptyMessage }}</p>
|
||||
<div class="py-16px text-center">
|
||||
<p class="text-14px text-[var(--el-text-color-secondary)]">
|
||||
{{ emptyMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,18 +542,26 @@
|
||||
|
||||
<!-- 验证状态和错误提示 -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<Icon
|
||||
:icon="
|
||||
jsonError
|
||||
? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
|
||||
: JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
|
||||
"
|
||||
:class="jsonError ? 'text-[var(--el-color-danger)]' : 'text-[var(--el-color-success)]'"
|
||||
:class="
|
||||
jsonError
|
||||
? 'text-[var(--el-color-danger)]'
|
||||
: 'text-[var(--el-color-success)]'
|
||||
"
|
||||
class="text-14px"
|
||||
/>
|
||||
<span
|
||||
:class="jsonError ? 'text-[var(--el-color-danger)]' : 'text-[var(--el-color-success)]'"
|
||||
:class="
|
||||
jsonError
|
||||
? 'text-[var(--el-color-danger)]'
|
||||
: 'text-[var(--el-color-success)]'
|
||||
"
|
||||
class="text-12px"
|
||||
>
|
||||
{{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
|
||||
@@ -123,379 +569,21 @@
|
||||
</div>
|
||||
|
||||
<!-- 快速填充按钮 -->
|
||||
<div v-if="paramsList.length > 0" class="flex items-center gap-8px">
|
||||
<div v-if="paramsList.length > 0" class="gap-8px flex items-center">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)]">{{
|
||||
JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
|
||||
}}</span>
|
||||
<el-button size="small" type="primary" plain @click="fillExampleJson">
|
||||
{{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" plain @click="clearParams">{{
|
||||
JSON_PARAMS_INPUT_CONSTANTS.CLEAR_BUTTON
|
||||
}}</el-button>
|
||||
<el-button size="small" type="danger" plain @click="clearParams">
|
||||
{{ JSON_PARAMS_INPUT_CONSTANTS.CLEAR_BUTTON }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import {
|
||||
IoTDataSpecsDataTypeEnum,
|
||||
JSON_PARAMS_INPUT_CONSTANTS,
|
||||
JSON_PARAMS_INPUT_ICONS,
|
||||
JSON_PARAMS_EXAMPLE_VALUES,
|
||||
JsonParamsInputTypeEnum,
|
||||
type JsonParamsInputType
|
||||
} from '#/views/iot/utils/constants'
|
||||
|
||||
/** JSON参数输入组件 - 通用版本 */
|
||||
defineOptions({ name: 'JsonParamsInput' })
|
||||
|
||||
interface JsonParamsConfig {
|
||||
// 服务配置
|
||||
service?: {
|
||||
name: string
|
||||
inputParams?: any[]
|
||||
}
|
||||
// 事件配置
|
||||
event?: {
|
||||
name: string
|
||||
outputParams?: any[]
|
||||
}
|
||||
// 属性配置
|
||||
properties?: any[]
|
||||
// 自定义配置
|
||||
custom?: {
|
||||
name: string
|
||||
params: any[]
|
||||
}
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue?: string
|
||||
config?: JsonParamsConfig
|
||||
type?: JsonParamsInputType
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: JsonParamsInputTypeEnum.SERVICE,
|
||||
placeholder: JSON_PARAMS_INPUT_CONSTANTS.PLACEHOLDER
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit, {
|
||||
defaultValue: ''
|
||||
})
|
||||
|
||||
const paramsJson = ref('') // JSON参数字符串
|
||||
const jsonError = ref('') // JSON验证错误信息
|
||||
|
||||
// 计算属性：参数列表
|
||||
const paramsList = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.SERVICE:
|
||||
return props.config?.service?.inputParams || []
|
||||
case JsonParamsInputTypeEnum.EVENT:
|
||||
return props.config?.event?.outputParams || []
|
||||
case JsonParamsInputTypeEnum.PROPERTY:
|
||||
return props.config?.properties || []
|
||||
case JsonParamsInputTypeEnum.CUSTOM:
|
||||
return props.config?.custom?.params || []
|
||||
default:
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：标题
|
||||
const title = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.SERVICE:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.SERVICE(props.config?.service?.name)
|
||||
case JsonParamsInputTypeEnum.EVENT:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.EVENT(props.config?.event?.name)
|
||||
case JsonParamsInputTypeEnum.PROPERTY:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.PROPERTY
|
||||
case JsonParamsInputTypeEnum.CUSTOM:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.CUSTOM(props.config?.custom?.name)
|
||||
default:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.TITLES.DEFAULT
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：标题图标
|
||||
const titleIcon = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.SERVICE:
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.SERVICE
|
||||
case JsonParamsInputTypeEnum.EVENT:
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.EVENT
|
||||
case JsonParamsInputTypeEnum.PROPERTY:
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.PROPERTY
|
||||
case JsonParamsInputTypeEnum.CUSTOM:
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.CUSTOM
|
||||
default:
|
||||
return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.DEFAULT
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：参数图标
|
||||
const paramsIcon = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.SERVICE:
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.SERVICE
|
||||
case JsonParamsInputTypeEnum.EVENT:
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.EVENT
|
||||
case JsonParamsInputTypeEnum.PROPERTY:
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.PROPERTY
|
||||
case JsonParamsInputTypeEnum.CUSTOM:
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.CUSTOM
|
||||
default:
|
||||
return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.DEFAULT
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：参数标签
|
||||
const paramsLabel = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.SERVICE:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.SERVICE
|
||||
case JsonParamsInputTypeEnum.EVENT:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.EVENT
|
||||
case JsonParamsInputTypeEnum.PROPERTY:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.PROPERTY
|
||||
case JsonParamsInputTypeEnum.CUSTOM:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.CUSTOM
|
||||
default:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.DEFAULT
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：空状态消息
|
||||
const emptyMessage = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.SERVICE:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.SERVICE
|
||||
case JsonParamsInputTypeEnum.EVENT:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.EVENT
|
||||
case JsonParamsInputTypeEnum.PROPERTY:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.PROPERTY
|
||||
case JsonParamsInputTypeEnum.CUSTOM:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.CUSTOM
|
||||
default:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.DEFAULT
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性：无配置消息
|
||||
const noConfigMessage = computed(() => {
|
||||
switch (props.type) {
|
||||
case JsonParamsInputTypeEnum.SERVICE:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE
|
||||
case JsonParamsInputTypeEnum.EVENT:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT
|
||||
case JsonParamsInputTypeEnum.PROPERTY:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY
|
||||
case JsonParamsInputTypeEnum.CUSTOM:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM
|
||||
default:
|
||||
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 处理参数变化事件
|
||||
*/
|
||||
const handleParamsChange = () => {
|
||||
try {
|
||||
jsonError.value = '' // 清除之前的错误
|
||||
|
||||
if (paramsJson.value.trim()) {
|
||||
const parsed = JSON.parse(paramsJson.value)
|
||||
localValue.value = paramsJson.value
|
||||
|
||||
// 额外的参数验证
|
||||
if (typeof parsed !== 'object' || parsed === null) {
|
||||
jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAMS_MUST_BE_OBJECT
|
||||
return
|
||||
}
|
||||
|
||||
// 验证必填参数
|
||||
for (const param of paramsList.value) {
|
||||
if (param.required && (!parsed[param.identifier] || parsed[param.identifier] === '')) {
|
||||
jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAM_REQUIRED_ERROR(param.name)
|
||||
return
|
||||
}
|
||||
}
|
||||
} else {
|
||||
localValue.value = ''
|
||||
}
|
||||
|
||||
// 验证通过
|
||||
jsonError.value = ''
|
||||
} catch (error) {
|
||||
jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_ERROR(
|
||||
error instanceof Error ? error.message : JSON_PARAMS_INPUT_CONSTANTS.UNKNOWN_ERROR
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 快速填充示例数据
|
||||
*/
|
||||
const fillExampleJson = () => {
|
||||
paramsJson.value = generateExampleJson()
|
||||
handleParamsChange()
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空参数
|
||||
*/
|
||||
const clearParams = () => {
|
||||
paramsJson.value = ''
|
||||
localValue.value = ''
|
||||
jsonError.value = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取参数类型名称
|
||||
* @param dataType 数据类型
|
||||
* @returns 类型名称
|
||||
*/
|
||||
const getParamTypeName = (dataType: string) => {
|
||||
// 使用 constants.ts 中已有的 getDataTypeName 函数逻辑
|
||||
const typeMap = {
|
||||
[IoTDataSpecsDataTypeEnum.INT]: '整数',
|
||||
[IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
|
||||
[IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
|
||||
[IoTDataSpecsDataTypeEnum.TEXT]: '字符串',
|
||||
[IoTDataSpecsDataTypeEnum.BOOL]: '布尔值',
|
||||
[IoTDataSpecsDataTypeEnum.ENUM]: '枚举',
|
||||
[IoTDataSpecsDataTypeEnum.DATE]: '日期',
|
||||
[IoTDataSpecsDataTypeEnum.STRUCT]: '结构体',
|
||||
[IoTDataSpecsDataTypeEnum.ARRAY]: '数组'
|
||||
}
|
||||
return typeMap[dataType] || dataType
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取参数类型标签样式
|
||||
* @param dataType 数据类型
|
||||
* @returns 标签样式
|
||||
*/
|
||||
const getParamTypeTag = (dataType: string) => {
|
||||
const tagMap = {
|
||||
[IoTDataSpecsDataTypeEnum.INT]: 'primary',
|
||||
[IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
|
||||
[IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
|
||||
[IoTDataSpecsDataTypeEnum.TEXT]: 'info',
|
||||
[IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
|
||||
[IoTDataSpecsDataTypeEnum.ENUM]: 'danger',
|
||||
[IoTDataSpecsDataTypeEnum.DATE]: 'primary',
|
||||
[IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
|
||||
[IoTDataSpecsDataTypeEnum.ARRAY]: 'warning'
|
||||
}
|
||||
return tagMap[dataType] || 'info'
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取示例值
|
||||
* @param param 参数对象
|
||||
* @returns 示例值
|
||||
*/
|
||||
const getExampleValue = (param: any) => {
|
||||
const exampleConfig =
|
||||
JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES.DEFAULT
|
||||
return exampleConfig.display
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成示例JSON
|
||||
* @returns JSON字符串
|
||||
*/
|
||||
const generateExampleJson = () => {
|
||||
if (paramsList.value.length === 0) {
|
||||
return '{}'
|
||||
}
|
||||
|
||||
const example = {}
|
||||
paramsList.value.forEach((param) => {
|
||||
const exampleConfig =
|
||||
JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES.DEFAULT
|
||||
example[param.identifier] = exampleConfig.value
|
||||
})
|
||||
|
||||
return JSON.stringify(example, null, 2)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理数据回显
|
||||
* @param value 值字符串
|
||||
*/
|
||||
const handleDataDisplay = (value: string) => {
|
||||
if (!value || !value.trim()) {
|
||||
paramsJson.value = ''
|
||||
jsonError.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 尝试解析JSON，如果成功则格式化
|
||||
const parsed = JSON.parse(value)
|
||||
paramsJson.value = JSON.stringify(parsed, null, 2)
|
||||
jsonError.value = ''
|
||||
} catch {
|
||||
// 如果不是有效的JSON，直接使用原字符串
|
||||
paramsJson.value = value
|
||||
jsonError.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 监听外部值变化（编辑模式数据回显）
|
||||
watch(
|
||||
() => localValue.value,
|
||||
async (newValue, oldValue) => {
|
||||
// 避免循环更新
|
||||
if (newValue === oldValue) return
|
||||
|
||||
// 使用 nextTick 确保在下一个 tick 中处理数据
|
||||
await nextTick()
|
||||
handleDataDisplay(newValue || '')
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 组件挂载后也尝试处理一次数据回显
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
if (localValue.value) {
|
||||
handleDataDisplay(localValue.value)
|
||||
}
|
||||
})
|
||||
|
||||
// 监听配置变化
|
||||
watch(
|
||||
() => props.config,
|
||||
(newConfig, oldConfig) => {
|
||||
// 只有在配置真正变化时才清空数据
|
||||
if (JSON.stringify(newConfig) !== JSON.stringify(oldConfig)) {
|
||||
// 如果没有外部传入的值，才清空数据
|
||||
if (!localValue.value) {
|
||||
paramsJson.value = ''
|
||||
jsonError.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 弹出层内容样式 */
|
||||
.json-params-detail-content {
|
||||
|
||||
@@ -1,4 +1,152 @@
|
||||
<!-- 值输入组件 -->
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
IoTDataSpecsDataTypeEnum,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
/** 值输入组件 */
|
||||
defineOptions({ name: 'ValueInput' });
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
interface Props {
|
||||
modelValue?: string;
|
||||
propertyType?: string;
|
||||
operator?: string;
|
||||
propertyConfig?: any;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void;
|
||||
}
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit, {
|
||||
defaultValue: '',
|
||||
});
|
||||
|
||||
const rangeStart = ref(''); // 范围开始值
|
||||
const rangeEnd = ref(''); // 范围结束值
|
||||
const dateValue = ref(''); // 日期值
|
||||
const numberValue = ref<number>(); // 数字值
|
||||
|
||||
/** 计算属性：枚举选项 */
|
||||
const enumOptions = computed(() => {
|
||||
if (props.propertyConfig?.enum) {
|
||||
return props.propertyConfig.enum.map((item: any) => ({
|
||||
label: item.name || item.label || item.value,
|
||||
value: item.value,
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
/** 计算属性：列表预览 */
|
||||
const listPreview = computed(() => {
|
||||
if (
|
||||
props.operator ===
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value &&
|
||||
localValue.value
|
||||
) {
|
||||
return localValue.value
|
||||
.split(',')
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
/** 判断是否为数字类型 */
|
||||
const isNumericType = () => {
|
||||
return [
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
].includes((props.propertyType || '') as any);
|
||||
};
|
||||
|
||||
/** 获取输入框类型 */
|
||||
const getInputType = () => {
|
||||
switch (props.propertyType) {
|
||||
case IoTDataSpecsDataTypeEnum.DOUBLE:
|
||||
case IoTDataSpecsDataTypeEnum.FLOAT:
|
||||
case IoTDataSpecsDataTypeEnum.INT: {
|
||||
return 'number';
|
||||
}
|
||||
default: {
|
||||
return 'text';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** 获取占位符文本 */
|
||||
const getPlaceholder = () => {
|
||||
const typeMap = {
|
||||
[IoTDataSpecsDataTypeEnum.TEXT]: '请输入字符串',
|
||||
[IoTDataSpecsDataTypeEnum.INT]: '请输入整数',
|
||||
[IoTDataSpecsDataTypeEnum.FLOAT]: '请输入浮点数',
|
||||
[IoTDataSpecsDataTypeEnum.DOUBLE]: '请输入双精度数',
|
||||
[IoTDataSpecsDataTypeEnum.STRUCT]: '请输入 JSON 格式数据',
|
||||
[IoTDataSpecsDataTypeEnum.ARRAY]: '请输入数组格式数据',
|
||||
};
|
||||
return typeMap[props.propertyType || ''] || '请输入值';
|
||||
};
|
||||
|
||||
/** 获取数字精度 */
|
||||
const getPrecision = () => {
|
||||
return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 0 : 2;
|
||||
};
|
||||
|
||||
/** 获取数字步长 */
|
||||
const getStep = () => {
|
||||
return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 1 : 0.1;
|
||||
};
|
||||
|
||||
/** 获取最小值 */
|
||||
const getMin = () => {
|
||||
return props.propertyConfig?.min || undefined;
|
||||
};
|
||||
|
||||
/** 获取最大值 */
|
||||
const getMax = () => {
|
||||
return props.propertyConfig?.max || undefined;
|
||||
};
|
||||
|
||||
/** 处理范围变化事件 */
|
||||
const handleRangeChange = () => {
|
||||
localValue.value =
|
||||
rangeStart.value && rangeEnd.value
|
||||
? `${rangeStart.value},${rangeEnd.value}`
|
||||
: '';
|
||||
};
|
||||
|
||||
/** 处理日期变化事件 */
|
||||
const handleDateChange = (value: string) => {
|
||||
localValue.value = value || '';
|
||||
};
|
||||
|
||||
/** 处理数字变化事件 */
|
||||
const handleNumberChange = (value: number | undefined) => {
|
||||
localValue.value = value?.toString() || '';
|
||||
};
|
||||
|
||||
/** 监听操作符变化 */
|
||||
watch(
|
||||
() => props.operator,
|
||||
() => {
|
||||
localValue.value = '';
|
||||
rangeStart.value = '';
|
||||
rangeEnd.value = '';
|
||||
dateValue.value = '';
|
||||
numberValue.value = undefined;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full min-w-0">
|
||||
<!-- 布尔值选择 -->
|
||||
@@ -14,7 +162,9 @@
|
||||
|
||||
<!-- 枚举值选择 -->
|
||||
<el-select
|
||||
v-else-if="propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0"
|
||||
v-else-if="
|
||||
propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
|
||||
"
|
||||
v-model="localValue"
|
||||
placeholder="请选择枚举值"
|
||||
class="w-full!"
|
||||
@@ -29,45 +179,64 @@
|
||||
|
||||
<!-- 范围输入 (between 操作符) -->
|
||||
<div
|
||||
v-else-if="operator === IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value"
|
||||
class="w-full! flex items-center gap-8px"
|
||||
v-else-if="
|
||||
operator ===
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
|
||||
"
|
||||
class="w-full! gap-8px flex items-center"
|
||||
>
|
||||
<el-input
|
||||
v-model="rangeStart"
|
||||
:type="getInputType()"
|
||||
placeholder="最小值"
|
||||
@input="handleRangeChange"
|
||||
class="flex-1 min-w-0"
|
||||
class="min-w-0 flex-1"
|
||||
style="width: auto !important"
|
||||
/>
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] whitespace-nowrap">至</span>
|
||||
<span
|
||||
class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]"
|
||||
>至</span>
|
||||
<el-input
|
||||
v-model="rangeEnd"
|
||||
:type="getInputType()"
|
||||
placeholder="最大值"
|
||||
@input="handleRangeChange"
|
||||
class="flex-1 min-w-0"
|
||||
class="min-w-0 flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 列表输入 (in 操作符) -->
|
||||
<div
|
||||
v-else-if="operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value"
|
||||
v-else-if="
|
||||
operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value
|
||||
"
|
||||
class="w-full!"
|
||||
>
|
||||
<el-input v-model="localValue" placeholder="请输入值列表，用逗号分隔" class="w-full!">
|
||||
<el-input
|
||||
v-model="localValue"
|
||||
placeholder="请输入值列表，用逗号分隔"
|
||||
class="w-full!"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
|
||||
<Icon
|
||||
icon="ep:question-filled"
|
||||
class="text-[var(--el-text-color-placeholder)] cursor-help"
|
||||
class="cursor-help text-[var(--el-text-color-placeholder)]"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-input>
|
||||
<div v-if="listPreview.length > 0" class="mt-8px flex items-center gap-6px flex-wrap">
|
||||
<div
|
||||
v-if="listPreview.length > 0"
|
||||
class="mt-8px gap-6px flex flex-wrap items-center"
|
||||
>
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)]">解析结果：</span>
|
||||
<el-tag v-for="(item, index) in listPreview" :key="index" size="small" class="m-0">
|
||||
<el-tag
|
||||
v-for="(item, index) in listPreview"
|
||||
:key="index"
|
||||
size="small"
|
||||
class="m-0"
|
||||
>
|
||||
{{ item }}
|
||||
</el-tag>
|
||||
</div>
|
||||
@@ -112,7 +281,7 @@
|
||||
:content="`单位：${propertyConfig.unit}`"
|
||||
placement="top"
|
||||
>
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] px-4px">
|
||||
<span class="text-12px px-4px text-[var(--el-text-color-secondary)]">
|
||||
{{ propertyConfig.unit }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
@@ -120,147 +289,3 @@
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import {
|
||||
IoTDataSpecsDataTypeEnum,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum
|
||||
} from '#/views/iot/utils/constants'
|
||||
|
||||
/** 值输入组件 */
|
||||
defineOptions({ name: 'ValueInput' })
|
||||
|
||||
interface Props {
|
||||
modelValue?: string
|
||||
propertyType?: string
|
||||
operator?: string
|
||||
propertyConfig?: any
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit, {
|
||||
defaultValue: ''
|
||||
})
|
||||
|
||||
const rangeStart = ref('') // 范围开始值
|
||||
const rangeEnd = ref('') // 范围结束值
|
||||
const dateValue = ref('') // 日期值
|
||||
const numberValue = ref<number>() // 数字值
|
||||
|
||||
/** 计算属性：枚举选项 */
|
||||
const enumOptions = computed(() => {
|
||||
if (props.propertyConfig?.enum) {
|
||||
return props.propertyConfig.enum.map((item: any) => ({
|
||||
label: item.name || item.label || item.value,
|
||||
value: item.value
|
||||
}))
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
/** 计算属性：列表预览 */
|
||||
const listPreview = computed(() => {
|
||||
if (
|
||||
props.operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value &&
|
||||
localValue.value
|
||||
) {
|
||||
return localValue.value
|
||||
.split(',')
|
||||
.map((item) => item.trim())
|
||||
.filter((item) => item)
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
/** 判断是否为数字类型 */
|
||||
const isNumericType = () => {
|
||||
return [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE
|
||||
].includes((props.propertyType || '') as any)
|
||||
}
|
||||
|
||||
/** 获取输入框类型 */
|
||||
const getInputType = () => {
|
||||
switch (props.propertyType) {
|
||||
case IoTDataSpecsDataTypeEnum.INT:
|
||||
case IoTDataSpecsDataTypeEnum.FLOAT:
|
||||
case IoTDataSpecsDataTypeEnum.DOUBLE:
|
||||
return 'number'
|
||||
default:
|
||||
return 'text'
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取占位符文本 */
|
||||
const getPlaceholder = () => {
|
||||
const typeMap = {
|
||||
[IoTDataSpecsDataTypeEnum.TEXT]: '请输入字符串',
|
||||
[IoTDataSpecsDataTypeEnum.INT]: '请输入整数',
|
||||
[IoTDataSpecsDataTypeEnum.FLOAT]: '请输入浮点数',
|
||||
[IoTDataSpecsDataTypeEnum.DOUBLE]: '请输入双精度数',
|
||||
[IoTDataSpecsDataTypeEnum.STRUCT]: '请输入 JSON 格式数据',
|
||||
[IoTDataSpecsDataTypeEnum.ARRAY]: '请输入数组格式数据'
|
||||
}
|
||||
return typeMap[props.propertyType || ''] || '请输入值'
|
||||
}
|
||||
|
||||
/** 获取数字精度 */
|
||||
const getPrecision = () => {
|
||||
return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 0 : 2
|
||||
}
|
||||
|
||||
/** 获取数字步长 */
|
||||
const getStep = () => {
|
||||
return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 1 : 0.1
|
||||
}
|
||||
|
||||
/** 获取最小值 */
|
||||
const getMin = () => {
|
||||
return props.propertyConfig?.min || undefined
|
||||
}
|
||||
|
||||
/** 获取最大值 */
|
||||
const getMax = () => {
|
||||
return props.propertyConfig?.max || undefined
|
||||
}
|
||||
|
||||
/** 处理范围变化事件 */
|
||||
const handleRangeChange = () => {
|
||||
if (rangeStart.value && rangeEnd.value) {
|
||||
localValue.value = `${rangeStart.value},${rangeEnd.value}`
|
||||
} else {
|
||||
localValue.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理日期变化事件 */
|
||||
const handleDateChange = (value: string) => {
|
||||
localValue.value = value || ''
|
||||
}
|
||||
|
||||
/** 处理数字变化事件 */
|
||||
const handleNumberChange = (value: number | undefined) => {
|
||||
localValue.value = value?.toString() || ''
|
||||
}
|
||||
|
||||
/** 监听操作符变化 */
|
||||
watch(
|
||||
() => props.operator,
|
||||
() => {
|
||||
localValue.value = ''
|
||||
rangeStart.value = ''
|
||||
rangeEnd.value = ''
|
||||
dateValue.value = ''
|
||||
numberValue.value = undefined
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,168 @@
|
||||
<!-- 执行器配置组件 -->
|
||||
<script setup lang="ts">
|
||||
import type { Action } from '#/api/iot/rule/scene';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
getActionTypeLabel,
|
||||
getActionTypeOptions,
|
||||
IotRuleSceneActionTypeEnum,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
import AlertConfig from '../configs/AlertConfig.vue';
|
||||
import DeviceControlConfig from '../configs/DeviceControlConfig.vue';
|
||||
|
||||
/** 执行器配置组件 */
|
||||
defineOptions({ name: 'ActionSection' });
|
||||
|
||||
const props = defineProps<{
|
||||
actions: Action[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:actions', value: Action[]): void;
|
||||
}>();
|
||||
|
||||
const actions = useVModel(props, 'actions', emit);
|
||||
|
||||
/** 获取执行器标签类型（用于 el-tag 的 type 属性） */
|
||||
const getActionTypeTag = (
|
||||
type: number,
|
||||
): 'danger' | 'info' | 'primary' | 'success' | 'warning' => {
|
||||
const actionTypeTags = {
|
||||
[IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
|
||||
[IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
|
||||
[IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
|
||||
[IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning',
|
||||
} as const;
|
||||
return actionTypeTags[type] || 'info';
|
||||
};
|
||||
|
||||
/** 判断是否为设备执行器类型 */
|
||||
const isDeviceAction = (type: number): boolean => {
|
||||
const deviceActionTypes = [
|
||||
IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
|
||||
IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE,
|
||||
] as number[];
|
||||
return deviceActionTypes.includes(type);
|
||||
};
|
||||
|
||||
/** 判断是否为告警执行器类型 */
|
||||
const isAlertAction = (type: number): boolean => {
|
||||
const alertActionTypes = [
|
||||
IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
|
||||
IotRuleSceneActionTypeEnum.ALERT_RECOVER,
|
||||
] as number[];
|
||||
return alertActionTypes.includes(type);
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建默认的执行器数据
|
||||
* @returns 默认执行器对象
|
||||
*/
|
||||
const createDefaultActionData = (): Action => {
|
||||
return {
|
||||
type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
identifier: undefined, // 物模型标识符（服务调用时使用）
|
||||
params: undefined,
|
||||
alertConfigId: undefined,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加执行器
|
||||
*/
|
||||
const addAction = () => {
|
||||
const newAction = createDefaultActionData();
|
||||
actions.value.push(newAction);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除执行器
|
||||
* @param index 执行器索引
|
||||
*/
|
||||
const removeAction = (index: number) => {
|
||||
actions.value.splice(index, 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新执行器类型
|
||||
* @param index 执行器索引
|
||||
* @param type 执行器类型
|
||||
*/
|
||||
const updateActionType = (index: number, type: number) => {
|
||||
actions.value[index].type = type;
|
||||
onActionTypeChange(actions.value[index], type);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新执行器
|
||||
* @param index 执行器索引
|
||||
* @param action 执行器对象
|
||||
*/
|
||||
const updateAction = (index: number, action: Action) => {
|
||||
actions.value[index] = action;
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新告警配置
|
||||
* @param index 执行器索引
|
||||
* @param alertConfigId 告警配置ID
|
||||
*/
|
||||
const updateActionAlertConfig = (index: number, alertConfigId?: number) => {
|
||||
actions.value[index].alertConfigId = alertConfigId;
|
||||
};
|
||||
|
||||
/**
|
||||
* 监听执行器类型变化
|
||||
* @param action 执行器对象
|
||||
* @param type 执行器类型
|
||||
*/
|
||||
const onActionTypeChange = (action: Action, type: number) => {
|
||||
// 清理不相关的配置，确保数据结构干净
|
||||
if (isDeviceAction(type)) {
|
||||
// 设备控制类型：清理告警配置，确保设备参数存在
|
||||
action.alertConfigId = undefined;
|
||||
if (!action.params) {
|
||||
action.params = '';
|
||||
}
|
||||
// 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择）
|
||||
if (action.identifier && type !== action.type) {
|
||||
action.identifier = undefined;
|
||||
}
|
||||
} else if (isAlertAction(type)) {
|
||||
action.productId = undefined;
|
||||
action.deviceId = undefined;
|
||||
action.identifier = undefined; // 清理服务标识符
|
||||
action.params = undefined;
|
||||
action.alertConfigId = undefined;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
|
||||
<el-card
|
||||
class="rounded-8px border border-[var(--el-border-color-light)]"
|
||||
shadow="never"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-8px">
|
||||
<Icon icon="ep:setting" class="text-[var(--el-color-primary)] text-18px" />
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">执行器配置</span>
|
||||
<el-tag size="small" type="info">{{ actions.length }} 个执行器</el-tag>
|
||||
<div class="gap-8px flex items-center">
|
||||
<Icon
|
||||
icon="ep:setting"
|
||||
class="text-18px text-[var(--el-color-primary)]"
|
||||
/>
|
||||
<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 class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<el-button type="primary" size="small" @click="addAction">
|
||||
<Icon icon="ep:plus" />
|
||||
添加执行器
|
||||
@@ -33,26 +187,32 @@
|
||||
<div
|
||||
v-for="(action, index) in actions"
|
||||
:key="`action-${index}`"
|
||||
class="border-2 border-blue-200 rounded-8px bg-blue-50 shadow-sm hover:shadow-md transition-shadow"
|
||||
class="rounded-8px border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
|
||||
>
|
||||
<!-- 执行器头部 - 蓝色主题 -->
|
||||
<div
|
||||
class="flex items-center justify-between p-16px bg-gradient-to-r from-blue-50 to-sky-50 border-b border-blue-200 rounded-t-6px"
|
||||
class="p-16px rounded-t-6px flex items-center justify-between border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50"
|
||||
>
|
||||
<div class="flex items-center gap-12px">
|
||||
<div class="flex items-center gap-8px text-16px font-600 text-blue-700">
|
||||
<div class="gap-12px flex items-center">
|
||||
<div
|
||||
class="gap-8px text-16px font-600 flex items-center text-blue-700"
|
||||
>
|
||||
<div
|
||||
class="w-24px h-24px bg-blue-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
|
||||
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<span>执行器 {{ index + 1 }}</span>
|
||||
</div>
|
||||
<el-tag :type="getActionTypeTag(action.type)" size="small" class="font-500">
|
||||
<el-tag
|
||||
:type="getActionTypeTag(action.type)"
|
||||
size="small"
|
||||
class="font-500"
|
||||
>
|
||||
{{ getActionTypeLabel(action.type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<el-button
|
||||
v-if="actions.length > 1"
|
||||
type="danger"
|
||||
@@ -74,7 +234,9 @@
|
||||
<el-form-item label="执行类型" required>
|
||||
<el-select
|
||||
:model-value="action.type"
|
||||
@update:model-value="(value) => updateActionType(index, value)"
|
||||
@update:model-value="
|
||||
(value) => updateActionType(index, value)
|
||||
"
|
||||
@change="(value) => onActionTypeChange(action, value)"
|
||||
placeholder="请选择执行类型"
|
||||
class="w-full"
|
||||
@@ -100,21 +262,32 @@
|
||||
<AlertConfig
|
||||
v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER"
|
||||
:model-value="action.alertConfigId"
|
||||
@update:model-value="(value) => updateActionAlertConfig(index, value)"
|
||||
@update:model-value="
|
||||
(value) => updateActionAlertConfig(index, value)
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- 触发告警提示 - 触发告警时显示 -->
|
||||
<div
|
||||
v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER"
|
||||
class="border border-[var(--el-border-color-light)] rounded-6px p-16px bg-[var(--el-fill-color-blank)]"
|
||||
class="rounded-6px p-16px border border-[var(--el-border-color-light)] bg-[var(--el-fill-color-blank)]"
|
||||
>
|
||||
<div class="flex items-center gap-8px mb-8px">
|
||||
<Icon icon="ep:warning" class="text-[var(--el-color-warning)] text-16px" />
|
||||
<span class="text-14px font-600 text-[var(--el-text-color-primary)]">触发告警</span>
|
||||
<div class="gap-8px mb-8px flex items-center">
|
||||
<Icon
|
||||
icon="ep:warning"
|
||||
class="text-16px text-[var(--el-color-warning)]"
|
||||
/>
|
||||
<span
|
||||
class="text-14px font-600 text-[var(--el-text-color-primary)]"
|
||||
>触发告警</span
|
||||
>
|
||||
<el-tag size="small" type="warning">自动执行</el-tag>
|
||||
</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
|
||||
当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 -> 告警配置] 管理。
|
||||
<div
|
||||
class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
|
||||
告警配置] 管理。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,7 +295,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 添加提示 -->
|
||||
<div v-if="actions.length > 0" class="text-center py-16px">
|
||||
<div v-if="actions.length > 0" class="py-16px text-center">
|
||||
<el-button type="primary" plain @click="addAction">
|
||||
<Icon icon="ep:plus" />
|
||||
继续添加执行器
|
||||
@@ -131,142 +304,3 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import DeviceControlConfig from '../configs/DeviceControlConfig.vue'
|
||||
import AlertConfig from '../configs/AlertConfig.vue'
|
||||
import type { Action } from '#/api/iot/rule/scene'
|
||||
import {
|
||||
getActionTypeLabel,
|
||||
getActionTypeOptions,
|
||||
IotRuleSceneActionTypeEnum
|
||||
} from '#/views/iot/utils/constants'
|
||||
|
||||
/** 执行器配置组件 */
|
||||
defineOptions({ name: 'ActionSection' })
|
||||
|
||||
const props = defineProps<{
|
||||
actions: Action[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:actions', value: Action[]): void
|
||||
}>()
|
||||
|
||||
const actions = useVModel(props, 'actions', emit)
|
||||
|
||||
/** 获取执行器标签类型（用于 el-tag 的 type 属性） */
|
||||
const getActionTypeTag = (type: number): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
|
||||
const actionTypeTags = {
|
||||
[IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
|
||||
[IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
|
||||
[IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
|
||||
[IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning'
|
||||
} as const
|
||||
return actionTypeTags[type] || 'info'
|
||||
}
|
||||
|
||||
/** 判断是否为设备执行器类型 */
|
||||
const isDeviceAction = (type: number): boolean => {
|
||||
const deviceActionTypes = [
|
||||
IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
|
||||
IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
|
||||
] as number[]
|
||||
return deviceActionTypes.includes(type)
|
||||
}
|
||||
|
||||
/** 判断是否为告警执行器类型 */
|
||||
const isAlertAction = (type: number): boolean => {
|
||||
const alertActionTypes = [
|
||||
IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
|
||||
IotRuleSceneActionTypeEnum.ALERT_RECOVER
|
||||
] as number[]
|
||||
return alertActionTypes.includes(type)
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建默认的执行器数据
|
||||
* @returns 默认执行器对象
|
||||
*/
|
||||
const createDefaultActionData = (): Action => {
|
||||
return {
|
||||
type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
identifier: undefined, // 物模型标识符（服务调用时使用）
|
||||
params: undefined,
|
||||
alertConfigId: undefined
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加执行器
|
||||
*/
|
||||
const addAction = () => {
|
||||
const newAction = createDefaultActionData()
|
||||
actions.value.push(newAction)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除执行器
|
||||
* @param index 执行器索引
|
||||
*/
|
||||
const removeAction = (index: number) => {
|
||||
actions.value.splice(index, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新执行器类型
|
||||
* @param index 执行器索引
|
||||
* @param type 执行器类型
|
||||
*/
|
||||
const updateActionType = (index: number, type: number) => {
|
||||
actions.value[index].type = type
|
||||
onActionTypeChange(actions.value[index], type)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新执行器
|
||||
* @param index 执行器索引
|
||||
* @param action 执行器对象
|
||||
*/
|
||||
const updateAction = (index: number, action: Action) => {
|
||||
actions.value[index] = action
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新告警配置
|
||||
* @param index 执行器索引
|
||||
* @param alertConfigId 告警配置ID
|
||||
*/
|
||||
const updateActionAlertConfig = (index: number, alertConfigId?: number) => {
|
||||
actions.value[index].alertConfigId = alertConfigId
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听执行器类型变化
|
||||
* @param action 执行器对象
|
||||
* @param type 执行器类型
|
||||
*/
|
||||
const onActionTypeChange = (action: Action, type: number) => {
|
||||
// 清理不相关的配置，确保数据结构干净
|
||||
if (isDeviceAction(type)) {
|
||||
// 设备控制类型：清理告警配置，确保设备参数存在
|
||||
action.alertConfigId = undefined
|
||||
if (!action.params) {
|
||||
action.params = ''
|
||||
}
|
||||
// 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择）
|
||||
if (action.identifier && type !== action.type) {
|
||||
action.identifier = undefined
|
||||
}
|
||||
} else if (isAlertAction(type)) {
|
||||
action.productId = undefined
|
||||
action.deviceId = undefined
|
||||
action.identifier = undefined // 清理服务标识符
|
||||
action.params = undefined
|
||||
action.alertConfigId = undefined
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,41 @@
|
||||
<!-- 基础信息配置组件 -->
|
||||
<script setup lang="ts">
|
||||
import type { IotSceneRule } from '#/api/iot/rule/scene';
|
||||
|
||||
import { DICT_TYPE, getIntDictOptions } from '@vben/constants';
|
||||
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
/** 基础信息配置组件 */
|
||||
defineOptions({ name: 'BasicInfoSection' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: IotSceneRule;
|
||||
rules?: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: IotSceneRule): void;
|
||||
}>();
|
||||
|
||||
const formData = useVModel(props, 'modelValue', emit); // 表单数据
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card class="border border-[var(--el-border-color-light)] rounded-8px mb-10px" shadow="never">
|
||||
<el-card
|
||||
class="rounded-8px mb-10px border border-[var(--el-border-color-light)]"
|
||||
shadow="never"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-8px">
|
||||
<Icon icon="ep:info-filled" class="text-[var(--el-color-primary)] text-18px" />
|
||||
<div class="gap-8px flex items-center">
|
||||
<Icon
|
||||
icon="ep:info-filled"
|
||||
class="text-18px text-[var(--el-color-primary)]"
|
||||
/>
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">基础信息</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,26 +83,6 @@
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@vben/constants'
|
||||
import type { IotSceneRule } from '#/api/iot/rule/scene'
|
||||
|
||||
/** 基础信息配置组件 */
|
||||
defineOptions({ name: 'BasicInfoSection' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: IotSceneRule
|
||||
rules?: any
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: IotSceneRule): void
|
||||
}>()
|
||||
|
||||
const formData = useVModel(props, 'modelValue', emit) // 表单数据
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@@ -1,11 +1,135 @@
|
||||
<script setup lang="ts">
|
||||
import type { Trigger } from '#/api/iot/rule/scene';
|
||||
|
||||
import { Crontab } from '@/components/Crontab';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
getTriggerTypeLabel,
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
isDeviceTrigger,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
import DeviceTriggerConfig from '../configs/DeviceTriggerConfig.vue';
|
||||
|
||||
/** 触发器配置组件 */
|
||||
defineOptions({ name: 'TriggerSection' });
|
||||
|
||||
const props = defineProps<{
|
||||
triggers: Trigger[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:triggers', value: Trigger[]): void;
|
||||
}>();
|
||||
|
||||
const triggers = useVModel(props, 'triggers', emit);
|
||||
|
||||
/** 获取触发器标签类型（用于 el-tag 的 type 属性） */
|
||||
const getTriggerTagType = (
|
||||
type: number,
|
||||
): 'danger' | 'info' | 'primary' | 'success' | 'warning' => {
|
||||
if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
|
||||
return 'warning';
|
||||
}
|
||||
return isDeviceTrigger(type) ? 'success' : 'info';
|
||||
};
|
||||
|
||||
/** 添加触发器 */
|
||||
const addTrigger = () => {
|
||||
const newTrigger: Trigger = {
|
||||
type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
identifier: undefined,
|
||||
operator: undefined,
|
||||
value: undefined,
|
||||
cronExpression: undefined,
|
||||
conditionGroups: [], // 空的条件组数组
|
||||
};
|
||||
triggers.value.push(newTrigger);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除触发器
|
||||
* @param index 触发器索引
|
||||
*/
|
||||
const removeTrigger = (index: number) => {
|
||||
if (triggers.value.length > 1) {
|
||||
triggers.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新触发器类型
|
||||
* @param index 触发器索引
|
||||
* @param type 触发器类型
|
||||
*/
|
||||
const updateTriggerType = (index: number, type: number) => {
|
||||
triggers.value[index].type = type;
|
||||
onTriggerTypeChange(index, type);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新触发器设备配置
|
||||
* @param index 触发器索引
|
||||
* @param newTrigger 新的触发器对象
|
||||
*/
|
||||
const updateTriggerDeviceConfig = (index: number, newTrigger: Trigger) => {
|
||||
triggers.value[index] = newTrigger;
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新触发器 CRON 配置
|
||||
* @param index 触发器索引
|
||||
* @param cronExpression CRON 表达式
|
||||
*/
|
||||
const updateTriggerCronConfig = (index: number, cronExpression?: string) => {
|
||||
triggers.value[index].cronExpression = cronExpression;
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理触发器类型变化事件
|
||||
* @param index 触发器索引
|
||||
* @param _ 触发器类型（未使用）
|
||||
*/
|
||||
const onTriggerTypeChange = (index: number, _: number) => {
|
||||
const triggerItem = triggers.value[index];
|
||||
triggerItem.productId = undefined;
|
||||
triggerItem.deviceId = undefined;
|
||||
triggerItem.identifier = undefined;
|
||||
triggerItem.operator = undefined;
|
||||
triggerItem.value = undefined;
|
||||
triggerItem.cronExpression = undefined;
|
||||
triggerItem.conditionGroups = [];
|
||||
};
|
||||
|
||||
/** 初始化：确保至少有一个触发器 */
|
||||
onMounted(() => {
|
||||
if (triggers.value.length === 0) {
|
||||
addTrigger();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card class="border border-[var(--el-border-color-light)] rounded-8px mb-10px" shadow="never">
|
||||
<el-card
|
||||
class="rounded-8px mb-10px border border-[var(--el-border-color-light)]"
|
||||
shadow="never"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-8px">
|
||||
<Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
|
||||
<el-tag size="small" type="info">{{ triggers.length }} 个触发器</el-tag>
|
||||
<div class="gap-8px flex items-center">
|
||||
<Icon
|
||||
icon="ep:lightning"
|
||||
class="text-18px text-[var(--el-color-primary)]"
|
||||
/>
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]"
|
||||
>触发器配置</span
|
||||
>
|
||||
<el-tag size="small" type="info">
|
||||
{{ triggers.length }} 个触发器
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="primary" size="small" @click="addTrigger">
|
||||
<Icon icon="ep:plus" />
|
||||
@@ -20,26 +144,32 @@
|
||||
<div
|
||||
v-for="(triggerItem, index) in triggers"
|
||||
:key="`trigger-${index}`"
|
||||
class="border-2 border-green-200 rounded-8px bg-green-50 shadow-sm hover:shadow-md transition-shadow"
|
||||
class="rounded-8px border-2 border-green-200 bg-green-50 shadow-sm transition-shadow hover:shadow-md"
|
||||
>
|
||||
<!-- 触发器头部 - 绿色主题 -->
|
||||
<div
|
||||
class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border-b border-green-200 rounded-t-6px"
|
||||
class="p-16px rounded-t-6px flex items-center justify-between border-b border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
|
||||
>
|
||||
<div class="flex items-center gap-12px">
|
||||
<div class="flex items-center gap-8px text-16px font-600 text-green-700">
|
||||
<div class="gap-12px flex items-center">
|
||||
<div
|
||||
class="gap-8px text-16px font-600 flex items-center text-green-700"
|
||||
>
|
||||
<div
|
||||
class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
|
||||
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<span>触发器 {{ index + 1 }}</span>
|
||||
</div>
|
||||
<el-tag size="small" :type="getTriggerTagType(triggerItem.type)" class="font-500">
|
||||
<el-tag
|
||||
size="small"
|
||||
:type="getTriggerTagType(triggerItem.type)"
|
||||
class="font-500"
|
||||
>
|
||||
{{ getTriggerTypeLabel(triggerItem.type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<el-button
|
||||
v-if="triggers.length > 1"
|
||||
type="danger"
|
||||
@@ -61,32 +191,40 @@
|
||||
v-if="isDeviceTrigger(triggerItem.type)"
|
||||
:model-value="triggerItem"
|
||||
:index="index"
|
||||
@update:model-value="(value) => updateTriggerDeviceConfig(index, value)"
|
||||
@update:model-value="
|
||||
(value) => updateTriggerDeviceConfig(index, value)
|
||||
"
|
||||
@trigger-type-change="(type) => updateTriggerType(index, type)"
|
||||
/>
|
||||
|
||||
<!-- 定时触发配置 -->
|
||||
<div
|
||||
v-else-if="triggerItem.type === IotRuleSceneTriggerTypeEnum.TIMER"
|
||||
class="flex flex-col gap-16px"
|
||||
class="gap-16px flex flex-col"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-8px p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"
|
||||
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)]"
|
||||
>
|
||||
<Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]"
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- CRON 表达式配置 -->
|
||||
<div
|
||||
class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
|
||||
class="p-16px rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)]"
|
||||
>
|
||||
<el-form-item label="CRON表达式" required>
|
||||
<Crontab
|
||||
:model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
|
||||
@update:model-value="(value) => updateTriggerCronConfig(index, value)"
|
||||
@update:model-value="
|
||||
(value) => updateTriggerCronConfig(index, value)
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
@@ -100,7 +238,9 @@
|
||||
<el-empty description="暂无触发器">
|
||||
<template #description>
|
||||
<div class="space-y-8px">
|
||||
<p class="text-[var(--el-text-color-secondary)]">暂无触发器配置</p>
|
||||
<p class="text-[var(--el-text-color-secondary)]">
|
||||
暂无触发器配置
|
||||
</p>
|
||||
<p class="text-12px text-[var(--el-text-color-placeholder)]">
|
||||
请使用上方的"添加触发器"按钮来设置触发规则
|
||||
</p>
|
||||
@@ -111,112 +251,3 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import DeviceTriggerConfig from '../configs/DeviceTriggerConfig.vue'
|
||||
import { Crontab } from '@/components/Crontab'
|
||||
import type { Trigger } from '#/api/iot/rule/scene'
|
||||
import {
|
||||
getTriggerTypeLabel,
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
isDeviceTrigger
|
||||
} from '#/views/iot/utils/constants'
|
||||
|
||||
/** 触发器配置组件 */
|
||||
defineOptions({ name: 'TriggerSection' })
|
||||
|
||||
const props = defineProps<{
|
||||
triggers: Trigger[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:triggers', value: Trigger[]): void
|
||||
}>()
|
||||
|
||||
const triggers = useVModel(props, 'triggers', emit)
|
||||
|
||||
/** 获取触发器标签类型（用于 el-tag 的 type 属性） */
|
||||
const getTriggerTagType = (type: number): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
|
||||
if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
|
||||
return 'warning'
|
||||
}
|
||||
return isDeviceTrigger(type) ? 'success' : 'info'
|
||||
}
|
||||
|
||||
/** 添加触发器 */
|
||||
const addTrigger = () => {
|
||||
const newTrigger: Trigger = {
|
||||
type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
identifier: undefined,
|
||||
operator: undefined,
|
||||
value: undefined,
|
||||
cronExpression: undefined,
|
||||
conditionGroups: [] // 空的条件组数组
|
||||
}
|
||||
triggers.value.push(newTrigger)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除触发器
|
||||
* @param index 触发器索引
|
||||
*/
|
||||
const removeTrigger = (index: number) => {
|
||||
if (triggers.value.length > 1) {
|
||||
triggers.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新触发器类型
|
||||
* @param index 触发器索引
|
||||
* @param type 触发器类型
|
||||
*/
|
||||
const updateTriggerType = (index: number, type: number) => {
|
||||
triggers.value[index].type = type
|
||||
onTriggerTypeChange(index, type)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新触发器设备配置
|
||||
* @param index 触发器索引
|
||||
* @param newTrigger 新的触发器对象
|
||||
*/
|
||||
const updateTriggerDeviceConfig = (index: number, newTrigger: Trigger) => {
|
||||
triggers.value[index] = newTrigger
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新触发器 CRON 配置
|
||||
* @param index 触发器索引
|
||||
* @param cronExpression CRON 表达式
|
||||
*/
|
||||
const updateTriggerCronConfig = (index: number, cronExpression?: string) => {
|
||||
triggers.value[index].cronExpression = cronExpression
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理触发器类型变化事件
|
||||
* @param index 触发器索引
|
||||
* @param _ 触发器类型（未使用）
|
||||
*/
|
||||
const onTriggerTypeChange = (index: number, _: number) => {
|
||||
const triggerItem = triggers.value[index]
|
||||
triggerItem.productId = undefined
|
||||
triggerItem.deviceId = undefined
|
||||
triggerItem.identifier = undefined
|
||||
triggerItem.operator = undefined
|
||||
triggerItem.value = undefined
|
||||
triggerItem.cronExpression = undefined
|
||||
triggerItem.conditionGroups = []
|
||||
}
|
||||
|
||||
/** 初始化：确保至少有一个触发器 */
|
||||
onMounted(() => {
|
||||
if (triggers.value.length === 0) {
|
||||
addTrigger()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,76 @@
|
||||
<!-- 设备选择器组件 -->
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
|
||||
import { DeviceApi } from '#/api/iot/device/device';
|
||||
import { DEVICE_SELECTOR_OPTIONS } from '#/views/iot/utils/constants';
|
||||
|
||||
/** 设备选择器组件 */
|
||||
defineOptions({ name: 'DeviceSelector' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: number;
|
||||
productId?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value?: number): void;
|
||||
(e: 'change', value?: number): void;
|
||||
}>();
|
||||
|
||||
const deviceLoading = ref(false); // 设备加载状态
|
||||
const deviceList = ref<any[]>([]); // 设备列表
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的设备ID
|
||||
*/
|
||||
const handleChange = (value?: number) => {
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取设备列表
|
||||
*/
|
||||
const getDeviceList = async () => {
|
||||
if (!props.productId) {
|
||||
deviceList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
deviceLoading.value = true;
|
||||
const res = await DeviceApi.getDeviceListByProductId(props.productId);
|
||||
deviceList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error);
|
||||
deviceList.value = [];
|
||||
} finally {
|
||||
deviceList.value.unshift(DEVICE_SELECTOR_OPTIONS.ALL_DEVICES);
|
||||
deviceLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听产品变化
|
||||
watch(
|
||||
() => props.productId,
|
||||
(newProductId) => {
|
||||
if (newProductId) {
|
||||
getDeviceList();
|
||||
} else {
|
||||
deviceList.value = [];
|
||||
// 清空当前选择的设备
|
||||
if (props.modelValue) {
|
||||
emit('update:modelValue', undefined);
|
||||
emit('change', undefined);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-select
|
||||
:model-value="modelValue"
|
||||
@@ -16,88 +88,21 @@
|
||||
:label="device.deviceName"
|
||||
:value="device.id"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full py-4px">
|
||||
<div class="py-4px flex w-full items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">
|
||||
<div
|
||||
class="text-14px font-500 mb-2px text-[var(--el-text-color-primary)]"
|
||||
>
|
||||
{{ device.deviceName }}
|
||||
</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">{{ device.deviceKey }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">
|
||||
{{ device.deviceKey }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4px" 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" />
|
||||
</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DeviceApi } from '#/api/iot/device/device'
|
||||
import { DEVICE_SELECTOR_OPTIONS } from '#/views/iot/utils/constants'
|
||||
import { DICT_TYPE } from '@vben/constants'
|
||||
|
||||
/** 设备选择器组件 */
|
||||
defineOptions({ name: 'DeviceSelector' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: number
|
||||
productId?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value?: number): void
|
||||
(e: 'change', value?: number): void
|
||||
}>()
|
||||
|
||||
const deviceLoading = ref(false) // 设备加载状态
|
||||
const deviceList = ref<any[]>([]) // 设备列表
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的设备ID
|
||||
*/
|
||||
const handleChange = (value?: number) => {
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取设备列表
|
||||
*/
|
||||
const getDeviceList = async () => {
|
||||
if (!props.productId) {
|
||||
deviceList.value = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
deviceLoading.value = true
|
||||
const res = await DeviceApi.getDeviceListByProductId(props.productId)
|
||||
deviceList.value = res || []
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error)
|
||||
deviceList.value = []
|
||||
} finally {
|
||||
deviceList.value.unshift(DEVICE_SELECTOR_OPTIONS.ALL_DEVICES)
|
||||
deviceLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 监听产品变化
|
||||
watch(
|
||||
() => props.productId,
|
||||
(newProductId) => {
|
||||
if (newProductId) {
|
||||
getDeviceList()
|
||||
} else {
|
||||
deviceList.value = []
|
||||
// 清空当前选择的设备
|
||||
if (props.modelValue) {
|
||||
emit('update:modelValue', undefined)
|
||||
emit('change', undefined)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,59 +1,26 @@
|
||||
<!-- 操作符选择器组件 -->
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<el-select
|
||||
v-model="localValue"
|
||||
placeholder="请选择操作符"
|
||||
@change="handleChange"
|
||||
class="w-full"
|
||||
>
|
||||
<el-option
|
||||
v-for="operator in availableOperators"
|
||||
:key="operator.value"
|
||||
:label="operator.label"
|
||||
:value="operator.value"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full py-4px">
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)]">
|
||||
{{ operator.label }}
|
||||
</div>
|
||||
<div
|
||||
class="text-12px text-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)] px-6px py-2px rounded-4px font-mono"
|
||||
>
|
||||
{{ operator.symbol }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">
|
||||
{{ operator.description }}
|
||||
</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
IoTDataSpecsDataTypeEnum,
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum,
|
||||
IoTDataSpecsDataTypeEnum
|
||||
} from '#/views/iot/utils/constants'
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
/** 操作符选择器组件 */
|
||||
defineOptions({ name: 'OperatorSelector' })
|
||||
defineOptions({ name: 'OperatorSelector' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: string
|
||||
propertyType?: string
|
||||
}>()
|
||||
modelValue?: string;
|
||||
propertyType?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: string): void
|
||||
}>()
|
||||
(e: 'update:modelValue', value: string): void;
|
||||
(e: 'change', value: string): void;
|
||||
}>();
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit)
|
||||
const localValue = useVModel(props, 'modelValue', emit);
|
||||
|
||||
// 基于枚举的操作符定义
|
||||
const allOperators = [
|
||||
@@ -69,8 +36,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.TEXT,
|
||||
IoTDataSpecsDataTypeEnum.BOOL,
|
||||
IoTDataSpecsDataTypeEnum.ENUM
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.ENUM,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
|
||||
@@ -84,8 +51,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.TEXT,
|
||||
IoTDataSpecsDataTypeEnum.BOOL,
|
||||
IoTDataSpecsDataTypeEnum.ENUM
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.ENUM,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN.value,
|
||||
@@ -97,12 +64,16 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.DATE
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.DATE,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS.value,
|
||||
label: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS.name,
|
||||
value:
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS
|
||||
.value,
|
||||
label:
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS
|
||||
.name,
|
||||
symbol: '≥',
|
||||
description: '值大于或等于指定值时触发',
|
||||
example: 'humidity >= 80',
|
||||
@@ -110,8 +81,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.DATE
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.DATE,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN.value,
|
||||
@@ -123,12 +94,16 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.DATE
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.DATE,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS.value,
|
||||
label: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS.name,
|
||||
value:
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS
|
||||
.value,
|
||||
label:
|
||||
IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS
|
||||
.name,
|
||||
symbol: '≤',
|
||||
description: '值小于或等于指定值时触发',
|
||||
example: 'battery <= 20',
|
||||
@@ -136,8 +111,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.DATE
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.DATE,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value,
|
||||
@@ -149,8 +124,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.TEXT,
|
||||
IoTDataSpecsDataTypeEnum.ENUM
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.ENUM,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_IN.value,
|
||||
@@ -162,8 +137,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.TEXT,
|
||||
IoTDataSpecsDataTypeEnum.ENUM
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.ENUM,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value,
|
||||
@@ -175,8 +150,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.DATE
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.DATE,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_BETWEEN.value,
|
||||
@@ -188,8 +163,8 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.INT,
|
||||
IoTDataSpecsDataTypeEnum.FLOAT,
|
||||
IoTDataSpecsDataTypeEnum.DOUBLE,
|
||||
IoTDataSpecsDataTypeEnum.DATE
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.DATE,
|
||||
],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.LIKE.value,
|
||||
@@ -197,7 +172,7 @@ const allOperators = [
|
||||
symbol: '≈',
|
||||
description: '字符串匹配指定模式时触发',
|
||||
example: 'message like "%error%"',
|
||||
supportedTypes: [IoTDataSpecsDataTypeEnum.TEXT]
|
||||
supportedTypes: [IoTDataSpecsDataTypeEnum.TEXT],
|
||||
},
|
||||
{
|
||||
value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.value,
|
||||
@@ -212,33 +187,33 @@ const allOperators = [
|
||||
IoTDataSpecsDataTypeEnum.TEXT,
|
||||
IoTDataSpecsDataTypeEnum.BOOL,
|
||||
IoTDataSpecsDataTypeEnum.ENUM,
|
||||
IoTDataSpecsDataTypeEnum.DATE
|
||||
]
|
||||
}
|
||||
]
|
||||
IoTDataSpecsDataTypeEnum.DATE,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 计算属性：可用的操作符
|
||||
const availableOperators = computed(() => {
|
||||
if (!props.propertyType) {
|
||||
return allOperators
|
||||
return allOperators;
|
||||
}
|
||||
return allOperators.filter((op) =>
|
||||
(op.supportedTypes as any[]).includes(props.propertyType || '')
|
||||
)
|
||||
})
|
||||
(op.supportedTypes as any[]).includes(props.propertyType || ''),
|
||||
);
|
||||
});
|
||||
|
||||
// 计算属性：当前选中的操作符
|
||||
const selectedOperator = computed(() => {
|
||||
return allOperators.find((op) => op.value === localValue.value)
|
||||
})
|
||||
return allOperators.find((op) => op.value === localValue.value);
|
||||
});
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的操作符值
|
||||
*/
|
||||
const handleChange = (value: string) => {
|
||||
emit('change', value)
|
||||
}
|
||||
emit('change', value);
|
||||
};
|
||||
|
||||
/** 监听属性类型变化 */
|
||||
watch(
|
||||
@@ -248,14 +223,50 @@ watch(
|
||||
if (
|
||||
localValue.value &&
|
||||
selectedOperator.value &&
|
||||
!(selectedOperator.value.supportedTypes as any[]).includes(props.propertyType || '')
|
||||
!(selectedOperator.value.supportedTypes as any[]).includes(
|
||||
props.propertyType || '',
|
||||
)
|
||||
) {
|
||||
localValue.value = ''
|
||||
localValue.value = '';
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<el-select
|
||||
v-model="localValue"
|
||||
placeholder="请选择操作符"
|
||||
@change="handleChange"
|
||||
class="w-full"
|
||||
>
|
||||
<el-option
|
||||
v-for="operator in availableOperators"
|
||||
:key="operator.value"
|
||||
:label="operator.label"
|
||||
:value="operator.value"
|
||||
>
|
||||
<div class="py-4px flex w-full items-center justify-between">
|
||||
<div class="gap-8px flex items-center">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)]">
|
||||
{{ operator.label }}
|
||||
</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)]"
|
||||
>
|
||||
{{ operator.symbol }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">
|
||||
{{ operator.description }}
|
||||
</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-select-dropdown__item) {
|
||||
height: auto;
|
||||
|
||||
@@ -1,4 +1,53 @@
|
||||
<!-- 产品选择器组件 -->
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
|
||||
import { ProductApi } from '#/api/iot/product/product';
|
||||
|
||||
/** 产品选择器组件 */
|
||||
defineOptions({ name: 'ProductSelector' });
|
||||
|
||||
defineProps<{
|
||||
modelValue?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value?: number): void;
|
||||
(e: 'change', value?: number): void;
|
||||
}>();
|
||||
|
||||
const productLoading = ref(false); // 产品加载状态
|
||||
const productList = ref<any[]>([]); // 产品列表
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的产品 ID
|
||||
*/
|
||||
const handleChange = (value?: number) => {
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
};
|
||||
|
||||
/** 获取产品列表 */
|
||||
const getProductList = async () => {
|
||||
try {
|
||||
productLoading.value = true;
|
||||
const res = await ProductApi.getSimpleProductList();
|
||||
productList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取产品列表失败:', error);
|
||||
productList.value = [];
|
||||
} finally {
|
||||
productLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时获取产品列表
|
||||
onMounted(() => {
|
||||
getProductList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-select
|
||||
:model-value="modelValue"
|
||||
@@ -15,9 +64,11 @@
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full py-4px">
|
||||
<div class="py-4px flex w-full items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">
|
||||
<div
|
||||
class="text-14px font-500 mb-2px text-[var(--el-text-color-primary)]"
|
||||
>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">
|
||||
@@ -29,51 +80,3 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ProductApi } from '#/api/iot/product/product'
|
||||
import { DICT_TYPE } from '@vben/constants'
|
||||
|
||||
/** 产品选择器组件 */
|
||||
defineOptions({ name: 'ProductSelector' })
|
||||
|
||||
defineProps<{
|
||||
modelValue?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value?: number): void
|
||||
(e: 'change', value?: number): void
|
||||
}>()
|
||||
|
||||
const productLoading = ref(false) // 产品加载状态
|
||||
const productList = ref<any[]>([]) // 产品列表
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的产品 ID
|
||||
*/
|
||||
const handleChange = (value?: number) => {
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
}
|
||||
|
||||
/** 获取产品列表 */
|
||||
const getProductList = async () => {
|
||||
try {
|
||||
productLoading.value = true
|
||||
const res = await ProductApi.getSimpleProductList()
|
||||
productList.value = res || []
|
||||
} catch (error) {
|
||||
console.error('获取产品列表失败:', error)
|
||||
productList.value = []
|
||||
} finally {
|
||||
productLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时获取产品列表
|
||||
onMounted(() => {
|
||||
getProductList()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,279 @@
|
||||
<!-- 属性选择器组件 -->
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
IotThingModelTSLResp,
|
||||
ThingModelEvent,
|
||||
ThingModelParam,
|
||||
ThingModelProperty,
|
||||
ThingModelService,
|
||||
} from '#/api/iot/thingmodel';
|
||||
|
||||
import { InfoFilled } from '@element-plus/icons-vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import { ThingModelApi } from '#/api/iot/thingmodel';
|
||||
import {
|
||||
getAccessModeLabel,
|
||||
getDataTypeName,
|
||||
getDataTypeTagType,
|
||||
getEventTypeLabel,
|
||||
getThingModelServiceCallTypeLabel,
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
IoTThingModelTypeEnum,
|
||||
THING_MODEL_GROUP_LABELS,
|
||||
} from '#/views/iot/utils/constants';
|
||||
|
||||
/** 属性选择器组件 */
|
||||
defineOptions({ name: 'PropertySelector' });
|
||||
|
||||
const props = defineProps<{
|
||||
deviceId?: number;
|
||||
modelValue?: string;
|
||||
productId?: number;
|
||||
triggerType: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void;
|
||||
(e: 'change', value: { config: any; type: string }): void;
|
||||
}>();
|
||||
|
||||
/** 属性选择器内部使用的统一数据结构 */
|
||||
interface PropertySelectorItem {
|
||||
identifier: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
dataType: string;
|
||||
type: number; // IoTThingModelTypeEnum
|
||||
accessMode?: string;
|
||||
required?: boolean;
|
||||
unit?: string;
|
||||
range?: string;
|
||||
eventType?: string;
|
||||
callType?: string;
|
||||
inputParams?: ThingModelParam[];
|
||||
outputParams?: ThingModelParam[];
|
||||
property?: ThingModelProperty;
|
||||
event?: ThingModelEvent;
|
||||
service?: ThingModelService;
|
||||
}
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit);
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const propertyList = ref<PropertySelectorItem[]>([]); // 属性列表
|
||||
const thingModelTSL = ref<IotThingModelTSLResp | null>(null); // 物模型TSL数据
|
||||
|
||||
// 计算属性：属性分组
|
||||
const propertyGroups = computed(() => {
|
||||
const groups: { label: string; options: any[] }[] = [];
|
||||
|
||||
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
|
||||
groups.push({
|
||||
label: THING_MODEL_GROUP_LABELS.PROPERTY,
|
||||
options: propertyList.value.filter(
|
||||
(p) => p.type === IoTThingModelTypeEnum.PROPERTY,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST) {
|
||||
groups.push({
|
||||
label: THING_MODEL_GROUP_LABELS.EVENT,
|
||||
options: propertyList.value.filter(
|
||||
(p) => p.type === IoTThingModelTypeEnum.EVENT,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) {
|
||||
groups.push({
|
||||
label: THING_MODEL_GROUP_LABELS.SERVICE,
|
||||
options: propertyList.value.filter(
|
||||
(p) => p.type === IoTThingModelTypeEnum.SERVICE,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
return groups.filter((group) => group.options.length > 0);
|
||||
});
|
||||
|
||||
// 计算属性：当前选中的属性
|
||||
const selectedProperty = computed(() => {
|
||||
return propertyList.value.find((p) => p.identifier === localValue.value);
|
||||
});
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的属性标识符
|
||||
*/
|
||||
const handleChange = (value: string) => {
|
||||
const property = propertyList.value.find((p) => p.identifier === value);
|
||||
if (property) {
|
||||
emit('change', {
|
||||
type: property.dataType,
|
||||
config: property,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取物模型TSL数据
|
||||
*/
|
||||
const getThingModelTSL = async () => {
|
||||
if (!props.productId) {
|
||||
thingModelTSL.value = null;
|
||||
propertyList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const tslData = await ThingModelApi.getThingModelTSLByProductId(
|
||||
props.productId,
|
||||
);
|
||||
|
||||
if (tslData) {
|
||||
thingModelTSL.value = tslData;
|
||||
parseThingModelData();
|
||||
} else {
|
||||
console.error('获取物模型TSL失败: 返回数据为空');
|
||||
propertyList.value = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取物模型TSL失败:', error);
|
||||
propertyList.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 解析物模型 TSL 数据 */
|
||||
const parseThingModelData = () => {
|
||||
const tsl = thingModelTSL.value;
|
||||
const properties: PropertySelectorItem[] = [];
|
||||
|
||||
if (!tsl) {
|
||||
propertyList.value = properties;
|
||||
return;
|
||||
}
|
||||
// 解析属性
|
||||
if (tsl.properties && Array.isArray(tsl.properties)) {
|
||||
tsl.properties.forEach((prop) => {
|
||||
properties.push({
|
||||
identifier: prop.identifier,
|
||||
name: prop.name,
|
||||
description: prop.description,
|
||||
dataType: prop.dataType,
|
||||
type: IoTThingModelTypeEnum.PROPERTY,
|
||||
accessMode: prop.accessMode,
|
||||
required: prop.required,
|
||||
unit: getPropertyUnit(prop),
|
||||
range: getPropertyRange(prop),
|
||||
property: prop,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 解析事件
|
||||
if (tsl.events && Array.isArray(tsl.events)) {
|
||||
tsl.events.forEach((event) => {
|
||||
properties.push({
|
||||
identifier: event.identifier,
|
||||
name: event.name,
|
||||
description: event.description,
|
||||
dataType: 'struct',
|
||||
type: IoTThingModelTypeEnum.EVENT,
|
||||
eventType: event.type,
|
||||
required: event.required,
|
||||
outputParams: event.outputParams,
|
||||
event,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 解析服务
|
||||
if (tsl.services && Array.isArray(tsl.services)) {
|
||||
tsl.services.forEach((service) => {
|
||||
properties.push({
|
||||
identifier: service.identifier,
|
||||
name: service.name,
|
||||
description: service.description,
|
||||
dataType: 'struct',
|
||||
type: IoTThingModelTypeEnum.SERVICE,
|
||||
callType: service.callType,
|
||||
required: service.required,
|
||||
inputParams: service.inputParams,
|
||||
outputParams: service.outputParams,
|
||||
service,
|
||||
});
|
||||
});
|
||||
}
|
||||
propertyList.value = properties;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取属性单位
|
||||
* @param property 属性对象
|
||||
* @returns 属性单位
|
||||
*/
|
||||
const getPropertyUnit = (property: any) => {
|
||||
if (!property) return undefined;
|
||||
|
||||
// 数值型数据的单位
|
||||
if (property.dataSpecs && property.dataSpecs.unit) {
|
||||
return property.dataSpecs.unit;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取属性范围描述
|
||||
* @param property 属性对象
|
||||
* @returns 属性范围描述
|
||||
*/
|
||||
const getPropertyRange = (property: any) => {
|
||||
if (!property) return undefined;
|
||||
|
||||
// 数值型数据的范围
|
||||
if (property.dataSpecs) {
|
||||
const specs = property.dataSpecs;
|
||||
if (specs.min !== undefined && specs.max !== undefined) {
|
||||
return `${specs.min}~${specs.max}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 枚举型和布尔型数据的选项
|
||||
if (property.dataSpecsList && Array.isArray(property.dataSpecsList)) {
|
||||
return property.dataSpecsList
|
||||
.map((item: any) => `${item.name}(${item.value})`)
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/** 监听产品变化 */
|
||||
watch(
|
||||
() => props.productId,
|
||||
() => {
|
||||
getThingModelTSL();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
/** 监听触发类型变化 */
|
||||
watch(
|
||||
() => props.triggerType,
|
||||
() => {
|
||||
localValue.value = '';
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-8px">
|
||||
<div class="gap-8px flex items-center">
|
||||
<el-select
|
||||
v-model="localValue"
|
||||
placeholder="请选择监控项"
|
||||
@@ -10,15 +283,21 @@
|
||||
class="!w-150px"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option-group v-for="group in propertyGroups" :key="group.label" :label="group.label">
|
||||
<el-option-group
|
||||
v-for="group in propertyGroups"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="property in group.options"
|
||||
:key="property.identifier"
|
||||
:label="property.name"
|
||||
:value="property.identifier"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full py-2px">
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)] flex-1 truncate">
|
||||
<div class="py-2px flex w-full items-center justify-between">
|
||||
<span
|
||||
class="text-14px font-500 flex-1 truncate text-[var(--el-text-color-primary)]"
|
||||
>
|
||||
{{ property.name }}
|
||||
</span>
|
||||
<el-tag
|
||||
@@ -56,49 +335,66 @@
|
||||
|
||||
<!-- 弹出层内容 -->
|
||||
<div class="property-detail-content">
|
||||
<div class="flex items-center gap-8px mb-12px">
|
||||
<Icon icon="ep:info-filled" class="text-[var(--el-color-info)] text-16px" />
|
||||
<div class="gap-8px mb-12px flex items-center">
|
||||
<Icon
|
||||
icon="ep:info-filled"
|
||||
class="text-16px text-[var(--el-color-info)]"
|
||||
/>
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">
|
||||
{{ selectedProperty.name }}
|
||||
</span>
|
||||
<el-tag :type="getDataTypeTagType(selectedProperty.dataType)" size="small">
|
||||
<el-tag
|
||||
:type="getDataTypeTagType(selectedProperty.dataType)"
|
||||
size="small"
|
||||
>
|
||||
{{ getDataTypeName(selectedProperty.dataType) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8px ml-24px">
|
||||
<div class="flex items-start gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
||||
<div class="gap-8px flex items-start">
|
||||
<span
|
||||
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
标识符：
|
||||
</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
||||
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]">
|
||||
{{ selectedProperty.identifier }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedProperty.description" class="flex items-start gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
||||
<div
|
||||
v-if="selectedProperty.description"
|
||||
class="gap-8px flex items-start"
|
||||
>
|
||||
<span
|
||||
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
描述：
|
||||
</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
||||
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]">
|
||||
{{ selectedProperty.description }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedProperty.unit" class="flex items-start gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
||||
<div v-if="selectedProperty.unit" class="gap-8px flex items-start">
|
||||
<span
|
||||
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
单位：
|
||||
</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
||||
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]">
|
||||
{{ selectedProperty.unit }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedProperty.range" class="flex items-start gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
||||
<div v-if="selectedProperty.range" class="gap-8px flex items-start">
|
||||
<span
|
||||
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
取值范围：
|
||||
</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
||||
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]">
|
||||
{{ selectedProperty.range }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -109,40 +405,48 @@
|
||||
selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
|
||||
selectedProperty.accessMode
|
||||
"
|
||||
class="flex items-start gap-8px"
|
||||
class="gap-8px flex items-start"
|
||||
>
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
||||
<span
|
||||
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
访问模式：
|
||||
</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
||||
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]">
|
||||
{{ getAccessModeLabel(selectedProperty.accessMode) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
selectedProperty.type === IoTThingModelTypeEnum.EVENT && selectedProperty.eventType
|
||||
selectedProperty.type === IoTThingModelTypeEnum.EVENT &&
|
||||
selectedProperty.eventType
|
||||
"
|
||||
class="flex items-start gap-8px"
|
||||
class="gap-8px flex items-start"
|
||||
>
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
||||
<span
|
||||
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
事件类型：
|
||||
</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
||||
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]">
|
||||
{{ getEventTypeLabel(selectedProperty.eventType) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
selectedProperty.type === IoTThingModelTypeEnum.SERVICE && selectedProperty.callType
|
||||
selectedProperty.type === IoTThingModelTypeEnum.SERVICE &&
|
||||
selectedProperty.callType
|
||||
"
|
||||
class="flex items-start gap-8px"
|
||||
class="gap-8px flex items-start"
|
||||
>
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
||||
<span
|
||||
class="text-12px min-w-60px flex-shrink-0 text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
调用类型：
|
||||
</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
||||
<span class="text-12px flex-1 text-[var(--el-text-color-primary)]">
|
||||
{{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -152,267 +456,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import {
|
||||
IotRuleSceneTriggerTypeEnum,
|
||||
IoTThingModelTypeEnum,
|
||||
getAccessModeLabel,
|
||||
getEventTypeLabel,
|
||||
getThingModelServiceCallTypeLabel,
|
||||
getDataTypeName,
|
||||
getDataTypeTagType,
|
||||
THING_MODEL_GROUP_LABELS
|
||||
} from '#/views/iot/utils/constants'
|
||||
import type {
|
||||
IotThingModelTSLResp,
|
||||
ThingModelEvent,
|
||||
ThingModelParam,
|
||||
ThingModelProperty,
|
||||
ThingModelService
|
||||
} from '#/api/iot/thingmodel'
|
||||
import { ThingModelApi } from '#/api/iot/thingmodel'
|
||||
|
||||
/** 属性选择器组件 */
|
||||
defineOptions({ name: 'PropertySelector' })
|
||||
|
||||
/** 属性选择器内部使用的统一数据结构 */
|
||||
interface PropertySelectorItem {
|
||||
identifier: string
|
||||
name: string
|
||||
description?: string
|
||||
dataType: string
|
||||
type: number // IoTThingModelTypeEnum
|
||||
accessMode?: string
|
||||
required?: boolean
|
||||
unit?: string
|
||||
range?: string
|
||||
eventType?: string
|
||||
callType?: string
|
||||
inputParams?: ThingModelParam[]
|
||||
outputParams?: ThingModelParam[]
|
||||
property?: ThingModelProperty
|
||||
event?: ThingModelEvent
|
||||
service?: ThingModelService
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: string
|
||||
triggerType: number
|
||||
productId?: number
|
||||
deviceId?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: { type: string; config: any }): void
|
||||
}>()
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit)
|
||||
|
||||
const loading = ref(false) // 加载状态
|
||||
const propertyList = ref<PropertySelectorItem[]>([]) // 属性列表
|
||||
const thingModelTSL = ref<IotThingModelTSLResp | null>(null) // 物模型TSL数据
|
||||
|
||||
// 计算属性：属性分组
|
||||
const propertyGroups = computed(() => {
|
||||
const groups: { label: string; options: any[] }[] = []
|
||||
|
||||
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
|
||||
groups.push({
|
||||
label: THING_MODEL_GROUP_LABELS.PROPERTY,
|
||||
options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.PROPERTY)
|
||||
})
|
||||
}
|
||||
|
||||
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST) {
|
||||
groups.push({
|
||||
label: THING_MODEL_GROUP_LABELS.EVENT,
|
||||
options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.EVENT)
|
||||
})
|
||||
}
|
||||
|
||||
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) {
|
||||
groups.push({
|
||||
label: THING_MODEL_GROUP_LABELS.SERVICE,
|
||||
options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.SERVICE)
|
||||
})
|
||||
}
|
||||
|
||||
return groups.filter((group) => group.options.length > 0)
|
||||
})
|
||||
|
||||
// 计算属性：当前选中的属性
|
||||
const selectedProperty = computed(() => {
|
||||
return propertyList.value.find((p) => p.identifier === localValue.value)
|
||||
})
|
||||
|
||||
/**
|
||||
* 处理选择变化事件
|
||||
* @param value 选中的属性标识符
|
||||
*/
|
||||
const handleChange = (value: string) => {
|
||||
const property = propertyList.value.find((p) => p.identifier === value)
|
||||
if (property) {
|
||||
emit('change', {
|
||||
type: property.dataType,
|
||||
config: property
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取物模型TSL数据
|
||||
*/
|
||||
const getThingModelTSL = async () => {
|
||||
if (!props.productId) {
|
||||
thingModelTSL.value = null
|
||||
propertyList.value = []
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const tslData = await ThingModelApi.getThingModelTSLByProductId(props.productId)
|
||||
|
||||
if (tslData) {
|
||||
thingModelTSL.value = tslData
|
||||
parseThingModelData()
|
||||
} else {
|
||||
console.error('获取物模型TSL失败: 返回数据为空')
|
||||
propertyList.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取物模型TSL失败:', error)
|
||||
propertyList.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 解析物模型 TSL 数据 */
|
||||
const parseThingModelData = () => {
|
||||
const tsl = thingModelTSL.value
|
||||
const properties: PropertySelectorItem[] = []
|
||||
|
||||
if (!tsl) {
|
||||
propertyList.value = properties
|
||||
return
|
||||
}
|
||||
// 解析属性
|
||||
if (tsl.properties && Array.isArray(tsl.properties)) {
|
||||
tsl.properties.forEach((prop) => {
|
||||
properties.push({
|
||||
identifier: prop.identifier,
|
||||
name: prop.name,
|
||||
description: prop.description,
|
||||
dataType: prop.dataType,
|
||||
type: IoTThingModelTypeEnum.PROPERTY,
|
||||
accessMode: prop.accessMode,
|
||||
required: prop.required,
|
||||
unit: getPropertyUnit(prop),
|
||||
range: getPropertyRange(prop),
|
||||
property: prop
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 解析事件
|
||||
if (tsl.events && Array.isArray(tsl.events)) {
|
||||
tsl.events.forEach((event) => {
|
||||
properties.push({
|
||||
identifier: event.identifier,
|
||||
name: event.name,
|
||||
description: event.description,
|
||||
dataType: 'struct',
|
||||
type: IoTThingModelTypeEnum.EVENT,
|
||||
eventType: event.type,
|
||||
required: event.required,
|
||||
outputParams: event.outputParams,
|
||||
event: event
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 解析服务
|
||||
if (tsl.services && Array.isArray(tsl.services)) {
|
||||
tsl.services.forEach((service) => {
|
||||
properties.push({
|
||||
identifier: service.identifier,
|
||||
name: service.name,
|
||||
description: service.description,
|
||||
dataType: 'struct',
|
||||
type: IoTThingModelTypeEnum.SERVICE,
|
||||
callType: service.callType,
|
||||
required: service.required,
|
||||
inputParams: service.inputParams,
|
||||
outputParams: service.outputParams,
|
||||
service: service
|
||||
})
|
||||
})
|
||||
}
|
||||
propertyList.value = properties
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取属性单位
|
||||
* @param property 属性对象
|
||||
* @returns 属性单位
|
||||
*/
|
||||
const getPropertyUnit = (property: any) => {
|
||||
if (!property) return undefined
|
||||
|
||||
// 数值型数据的单位
|
||||
if (property.dataSpecs && property.dataSpecs.unit) {
|
||||
return property.dataSpecs.unit
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取属性范围描述
|
||||
* @param property 属性对象
|
||||
* @returns 属性范围描述
|
||||
*/
|
||||
const getPropertyRange = (property: any) => {
|
||||
if (!property) return undefined
|
||||
|
||||
// 数值型数据的范围
|
||||
if (property.dataSpecs) {
|
||||
const specs = property.dataSpecs
|
||||
if (specs.min !== undefined && specs.max !== undefined) {
|
||||
return `${specs.min}~${specs.max}`
|
||||
}
|
||||
}
|
||||
|
||||
// 枚举型和布尔型数据的选项
|
||||
if (property.dataSpecsList && Array.isArray(property.dataSpecsList)) {
|
||||
return property.dataSpecsList.map((item: any) => `${item.name}(${item.value})`).join(', ')
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
/** 监听产品变化 */
|
||||
watch(
|
||||
() => props.productId,
|
||||
() => {
|
||||
getThingModelTSL()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
/** 监听触发类型变化 */
|
||||
watch(
|
||||
() => props.triggerType,
|
||||
() => {
|
||||
localValue.value = ''
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 下拉选项样式 */
|
||||
:deep(.el-select-dropdown__item) {
|
||||
|
||||
@@ -129,7 +129,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
{
|
||||
label: row.status === 0 ? '停用' : '启用',
|
||||
type: 'link',
|
||||
icon: row.status === 0 ? 'ant-design:stop-outlined' : 'ant-design:check-circle-outlined',
|
||||
icon:
|
||||
row.status === 0
|
||||
? 'ant-design:stop-outlined'
|
||||
: 'ant-design:check-circle-outlined',
|
||||
onClick: handleToggleStatus.bind(null, row),
|
||||
},
|
||||
{
|
||||
|
||||
@@ -47,7 +47,9 @@ const [Modal, modalApi] = useVbenModal({
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as RuleSceneApi.SceneRule;
|
||||
try {
|
||||
await (formData.value?.id ? updateSceneRule(data) : createSceneRule(data));
|
||||
await (formData.value?.id
|
||||
? updateSceneRule(data)
|
||||
: createSceneRule(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
@@ -83,4 +85,3 @@ const [Modal, modalApi] = useVbenModal({
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user