xuemingqiang/yudao-ui-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf：【IoT 物联网】场景联动触发器优化

Browse Source
This commit is contained in:
puhui999
2025-07-28 16:45:43 +08:00
parent d3d6f8f8ab
commit 274ecb5dca
14 changed files with 96 additions and 2740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
View File

@ -8,25 +8,13 @@
@change="handleDeviceChange"
/>
<!-- TODO @puhui999：这里有点冗余，建议去掉 -->
<!-- 设备状态变更提示 -->
<div v-if="trigger.type === TriggerTypeEnum.DEVICE_STATE_UPDATE" class="mt-8px">
<el-alert title="设备状态变更触发" type="info" :closable="false" show-icon>
<template #default>
<p class="m-0">当选中的设备上线或离线时将自动触发场景规则</p>
<p class="m-0 mt-4px text-12px text-[var(--el-text-color-secondary)]">无需配置额外的触发条件</p>
</template>
</el-alert>
</div>
<!-- 条件组配置 -->
<div v-else-if="needsConditions" class="space-y-12px">
<div v-if="needsConditions" class="space-y-12px">
<div class="flex items-center justify-between mb-12px">
<div class="flex items-center gap-8px">
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发条件</span>
<!-- TODO @puhui999：去掉数量限制 -->
<el-tag size="small" type="info">
{{ trigger.conditionGroups?.length || 0 }}/{{ maxConditionGroups }}
{{ trigger.conditionGroups?.length || 0 }}个条件组
</el-tag>
</div>
<div class="flex items-center gap-8px">
@ -52,18 +40,13 @@
:key="`group-${groupIndex}`"
class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
>
<div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)]">
<div
class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)]"
>
<div class="flex items-center text-14px font-500 text-[var(--el-text-color-primary)]">
<span>条件组 {{ groupIndex + 1 }}</span>
<!-- TODO @puhui999：不用“且、或”哈。条件组之间，就是或；条件之间就是且 -->
<el-select
v-model="group.logicOperator"
size="small"
class="w-80px ml-12px"
>
<el-option label="且" value="AND" />
<el-option label="或" value="OR" />
</el-select>
<el-tag size="small" type="info" class="ml-8px">条件间为"且"关系</el-tag>
</div>
<el-button
type="danger"
@ -262,5 +245,4 @@ watch(
updateValidationResult()
}
)
// TODO @puhui999：unocss - 已完成转换
</script>

64
src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
View File

@ -1,52 +1,23 @@
<!-- 定时触发配置组件 -->
<template>
<div class="flex flex-col gap-16px">
<div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
<div class="flex items-center gap-8px">
<Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">定时触发配置</span>
</div>
<div class="flex items-center gap-8px">
<el-button type="text" size="small" @click="showBuilder = !showBuilder">
<Icon :icon="showBuilder ? 'ep:edit' : 'ep:setting'" />
{{ showBuilder ? '手动编辑' : '可视化编辑' }}
</el-button>
</div>
<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)]">
<Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">定时触发配置</span>
</div>
<!-- 可视化编辑器 -->
<!-- TODO @puhui999：是不是复用现有的 cron 组件；不然有点重复哈；维护比较复杂 -->
<div v-if="showBuilder" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
<CronBuilder v-model="localValue" @validate="handleValidate" />
</div>
<!-- 手动编辑 -->
<div v-else class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
<!-- CRON表达式配置 -->
<div class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
<el-form-item label="CRON表达式" required>
<CronInput v-model="localValue" @validate="handleValidate" />
<Crontab v-model="localValue" />
</el-form-item>
</div>
<!-- 下次执行时间预览 -->
<NextExecutionPreview :cron-expression="localValue" />
<!-- 验证结果 -->
<div v-if="validationMessage" class="mt-8px">
<el-alert
:title="validationMessage"
:type="isValid ? 'success' : 'error'"
:closable="false"
show-icon
/>
</div>
</div>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import CronBuilder from '../inputs/CronBuilder.vue'
import CronInput from '../inputs/CronInput.vue'
import NextExecutionPreview from '../previews/NextExecutionPreview.vue'
import { Crontab } from '@/components/Crontab'
/** 定时触发配置组件 */
defineOptions({ name: 'TimerTriggerConfig' })
@ -66,23 +37,4 @@ const emit = defineEmits<Emits>()
const localValue = useVModel(props, 'modelValue', emit, {
defaultValue: '0 0 12 * * ?'
})
// 状态
const showBuilder = ref(true)
const validationMessage = ref('')
const isValid = ref(true)
// 事件处理
const handleValidate = (result: { valid: boolean; message: string }) => {
isValid.value = result.valid
validationMessage.value = result.message
emit('validate', result)
}
// 初始验证
onMounted(() => {
handleValidate({ valid: true, message: '定时触发配置验证通过' })
})
</script>
</script>