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

review：【iot 物联网】场景联动的 review

Browse Source
This commit is contained in:
YunaiV
2025-07-28 23:25:54 +08:00
parent 9b88826a17
commit 5021c711a7
15 changed files with 145 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/iot/rule/scene/form/configs/ConditionConfig.vue
View File

@ -91,6 +91,7 @@
</el-row>
<!-- 条件预览 -->
<!-- TODO puhui999：可以去掉。。。因为表单选择了，可以看懂的呀。 -->
<div
v-if="conditionPreview"
class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"

3
src/views/iot/rule/scene/form/configs/ConditionGroupContainerConfig.vue
View File

@ -1,7 +1,7 @@
<!-- 条件组容器配置组件 -->
<template>
<div class="flex flex-col gap-16px">
<!-- 条件组容器头部 -->
<!-- TODO @puhui999：这个是不是删除，不然有两个“附件条件组”的 header -->
<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"
>
@ -39,6 +39,7 @@
<!-- 子条件组列表 -->
<div v-if="modelValue.subGroups && modelValue.subGroups.length > 0" class="space-y-16px">
<!-- 逻辑关系说明 -->
<!-- TODO @puhui999：这个可以去掉。。。提示有点太多了。 -->
<div v-if="modelValue.subGroups.length > 1" class="flex items-center justify-center">
<div
class="flex items-center gap-8px px-12px py-6px bg-orange-50 border border-orange-200 rounded-full text-12px text-orange-600"

32
src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
View File

@ -1,7 +1,9 @@
<!-- 当前时间条件配置组件 -->
<template>
<div class="flex flex-col gap-16px">
<div class="flex items-center gap-8px p-12px px-16px bg-orange-50 rounded-6px border border-orange-200">
<div
class="flex items-center gap-8px p-12px px-16px bg-orange-50 rounded-6px border border-orange-200"
>
<Icon icon="ep:timer" class="text-orange-500 text-18px" />
<span class="text-14px font-500 text-orange-700">当前时间条件配置</span>
</div>
@ -89,13 +91,20 @@
</el-row>
<!-- 条件预览 -->
<div v-if="conditionPreview" class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
<!-- puhui999：可以去掉。。。因为表单选择了，可以看懂的呀。 -->
<div
v-if="conditionPreview"
class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"
>
<div class="flex items-center gap-8px mb-8px">
<Icon icon="ep:view" class="text-[var(--el-color-info)] text-16px" />
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件预览</span>
</div>
<div class="pl-24px">
<code class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono">{{ conditionPreview }}</code>
<code
class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono"
>{{ conditionPreview }}</code
>
</div>
</div>
@ -113,7 +122,10 @@
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { ConditionFormData, IotRuleSceneTriggerTimeOperatorEnum } from '@/api/iot/rule/scene/scene.types'
import {
ConditionFormData,
IotRuleSceneTriggerTimeOperatorEnum
} from '@/api/iot/rule/scene/scene.types'
/** 当前时间条件配置组件 */
defineOptions({ name: 'CurrentTimeConditionConfig' })
@ -203,22 +215,22 @@ const conditionPreview = computed(() => {
if (!condition.value.operator) {
return ''
}
const operatorOption = timeOperatorOptions.find(opt => opt.value === condition.value.operator)
const operatorOption = timeOperatorOptions.find((opt) => opt.value === condition.value.operator)
const operatorLabel = operatorOption?.label || condition.value.operator
if (condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
return `当前时间 ${operatorLabel}`
}
if (!condition.value.timeValue) {
return `当前时间 ${operatorLabel} [未设置时间]`
}
if (needsSecondTimeInput.value && condition.value.timeValue2) {
return `当前时间 ${operatorLabel} ${condition.value.timeValue} 和 ${condition.value.timeValue2}`
}
return `当前时间 ${operatorLabel} ${condition.value.timeValue}`
})

1
src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue
View File

@ -79,6 +79,7 @@
</el-row>
<!-- 条件预览 -->
<!-- TODO puhui999：可以去掉。。。因为表单选择了，可以看懂的呀。 -->
<div
v-if="conditionPreview"
class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"

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

@ -17,7 +17,7 @@
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">附加条件组</span>
<el-tag size="small" type="success">与主条件为且关系</el-tag>
<el-tag size="small" type="info">
{{ trigger.conditionGroup?.subGroups?.length || 0 }}个子条件组
{{ trigger.conditionGroup?.subGroups?.length || 0 }} 个子条件组
</el-tag>
</div>
<el-button
@ -70,6 +70,7 @@ import {
/** 设备触发配置组件 */
defineOptions({ name: 'DeviceTriggerConfig' })
// TODO @puhui999：下面的 Props、Emits 可以合并到变量那；
interface Props {
modelValue: TriggerFormData
}
@ -92,8 +93,6 @@ const mainConditionValidation = ref<{ valid: boolean; message: string }>({
const validationMessage = ref('')
const isValid = ref(true)
// 计算属性
// 初始化主条件
const initMainCondition = () => {
if (!trigger.value.mainCondition) {

1
src/views/iot/rule/scene/form/configs/MainConditionConfig.vue
View File

@ -20,6 +20,7 @@
</div>
<!-- 主条件配置 -->
<!-- TODO @puhui999：这里可以简化下，主条件是不能删除的。。。 -->
<div v-else class="space-y-16px">
<div class="flex items-center justify-between">
<div class="flex items-center gap-8px">

4
src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
View File

@ -1,4 +1,3 @@
<!-- 主条件内部配置组件 - 不显示条件类型选择 -->
<template>
<div class="space-y-16px">
<!-- 触发事件类型显示 -->
@ -76,6 +75,7 @@
</el-row>
<!-- 条件预览 -->
<!-- TODO puhui999：可以去掉。。。因为表单选择了，可以看懂的呀。 -->
<div v-if="conditionPreview" class="mt-12px">
<div class="text-12px text-[var(--el-text-color-secondary)]">
预览：{{ conditionPreview }}
@ -133,6 +133,7 @@ const emit = defineEmits<Emits>()
// 响应式数据
const condition = useVModel(props, 'modelValue', emit)
// TODO @puhui999：是不是 validationMessage 非空，就是不通过哈；
const isValid = ref(true)
const validationMessage = ref('')
const propertyType = ref('')
@ -159,6 +160,7 @@ const conditionPreview = computed(() => {
})
// 获取触发类型文本
// TODO @puhui999：是不是有枚举可以服用哈；
const getTriggerTypeText = (type: number) => {
switch (type) {
case IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST:

2
src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
View File

@ -1,4 +1,3 @@
<!-- 子条件组配置组件 -->
<template>
<div class="p-16px">
<!-- 空状态 -->
@ -66,6 +65,7 @@
</div>
<!-- 条件间的"且"连接符 -->
<!-- TODO @puhu999：建议去掉，有点元素太丰富了。 -->
<div
v-if="conditionIndex < subGroup.conditions!.length - 1"
class="flex items-center justify-center py-8px"

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

@ -1,13 +1,16 @@
<!-- 定时触发配置组件 -->
<template>
<div class="flex flex-col gap-16px">
<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)]">
<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>
<!-- CRON表达式配置 -->
<div 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>
<Crontab v-model="localValue" />
</el-form-item>
@ -22,6 +25,7 @@ import { Crontab } from '@/components/Crontab'
/** 定时触发配置组件 */
defineOptions({ name: 'TimerTriggerConfig' })
// TODO @puhui999：下面的 Props、Emits 可以合并到变量那；
interface Props {
modelValue?: string
}
@ -37,4 +41,4 @@ const emit = defineEmits<Emits>()
const localValue = useVModel(props, 'modelValue', emit, {
defaultValue: '0 0 12 * * ?'
})
</script>
</script>