perf：【IoT 物联网】场景联动目录结构优化
This commit is contained in:
puhui999
@ -117,7 +117,6 @@ import {
|
||||
ActionFormData,
|
||||
IotRuleSceneActionTypeEnum as ActionTypeEnum
|
||||
} from '@/api/iot/rule/scene/scene.types'
|
||||
import { createDefaultActionData } from '../../utils/transform'
|
||||
|
||||
/** 执行器配置组件 */
|
||||
defineOptions({ name: 'ActionSection' })
|
||||
@ -136,6 +135,19 @@ const emit = defineEmits<Emits>()
|
||||
|
||||
const actions = useVModel(props, 'actions', emit)
|
||||
|
||||
/**
|
||||
* 创建默认的执行器数据
|
||||
*/
|
||||
const createDefaultActionData = (): ActionFormData => {
|
||||
return {
|
||||
type: ActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
params: {},
|
||||
alertConfigId: undefined
|
||||
}
|
||||
}
|
||||
|
||||
// 配置常量
|
||||
const maxActions = 5
|
||||
|
||||
|
||||
@ -1,108 +0,0 @@
|
||||
<!-- 预览区域组件 -->
|
||||
<!-- TODO @puhui999：是不是不用这个哈？ -->
|
||||
<template>
|
||||
<el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-8px">
|
||||
<Icon icon="ep:view" class="text-[var(--el-color-primary)] text-18px" />
|
||||
<span class="text-16px font-600 text-[var(--el-text-color-primary)]">配置预览</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<el-button type="primary" size="small" @click="handleValidate" :loading="validating">
|
||||
<Icon icon="ep:check" />
|
||||
验证配置
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="p-0">
|
||||
<!-- 基础信息预览 -->
|
||||
<div class="mb-20px">
|
||||
<div class="flex items-center gap-8px mb-12px">
|
||||
<Icon icon="ep:info-filled" class="text-[var(--el-color-info)] text-16px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">基础信息</span>
|
||||
</div>
|
||||
<div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
|
||||
<ConfigPreview :form-data="formData" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 触发器预览 -->
|
||||
<div class="mb-20px">
|
||||
<div class="flex items-center gap-8px mb-12px">
|
||||
<Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发器配置</span>
|
||||
<el-tag size="small" type="primary">{{ formData.triggers.length }}</el-tag>
|
||||
</div>
|
||||
<div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
|
||||
<TriggerPreview :triggers="formData.triggers" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 执行器预览 -->
|
||||
<div class="mb-20px">
|
||||
<div class="flex items-center gap-8px mb-12px">
|
||||
<Icon icon="ep:setting" class="text-[var(--el-color-success)] text-16px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">执行器配置</span>
|
||||
<el-tag size="small" type="success">{{ formData.actions.length }}</el-tag>
|
||||
</div>
|
||||
<div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
|
||||
<ActionPreview :actions="formData.actions" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果 -->
|
||||
<div class="mb-20px">
|
||||
<div class="flex items-center gap-8px mb-12px">
|
||||
<Icon icon="ep:circle-check" class="text-[var(--el-color-primary)] text-16px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">验证结果</span>
|
||||
</div>
|
||||
<div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
|
||||
<ValidationResult :validation-result="validationResult" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ConfigPreview from '../previews/ConfigPreview.vue'
|
||||
import TriggerPreview from '../previews/TriggerPreview.vue'
|
||||
import ActionPreview from '../previews/ActionPreview.vue'
|
||||
import ValidationResult from '../previews/ValidationResult.vue'
|
||||
import { RuleSceneFormData } from '@/api/iot/rule/scene/scene.types'
|
||||
|
||||
/** 预览区域组件 */
|
||||
defineOptions({ name: 'PreviewSection' })
|
||||
|
||||
interface Props {
|
||||
formData: RuleSceneFormData
|
||||
validationResult?: { valid: boolean; message?: string } | null
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'validate'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 状态
|
||||
const validating = ref(false)
|
||||
|
||||
// 事件处理
|
||||
const handleValidate = async () => {
|
||||
validating.value = true
|
||||
try {
|
||||
// 延迟一下模拟验证过程
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
emit('validate')
|
||||
} finally {
|
||||
validating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -119,7 +119,6 @@ import {
|
||||
TriggerFormData,
|
||||
IotRuleSceneTriggerTypeEnum as TriggerTypeEnum
|
||||
} from '@/api/iot/rule/scene/scene.types'
|
||||
import { createDefaultTriggerData } from '../../utils/transform'
|
||||
|
||||
/** 触发器配置组件 */
|
||||
defineOptions({ name: 'TriggerSection' })
|
||||
@ -138,6 +137,22 @@ const emit = defineEmits<Emits>()
|
||||
|
||||
const triggers = useVModel(props, 'triggers', emit)
|
||||
|
||||
/**
|
||||
* 创建默认的触发器数据
|
||||
*/
|
||||
const createDefaultTriggerData = (): TriggerFormData => {
|
||||
return {
|
||||
type: TriggerTypeEnum.DEVICE_PROPERTY_POST, // 默认为设备属性上报
|
||||
productId: undefined,
|
||||
deviceId: undefined,
|
||||
identifier: undefined,
|
||||
operator: undefined,
|
||||
value: undefined,
|
||||
cronExpression: undefined,
|
||||
conditionGroups: []
|
||||
}
|
||||
}
|
||||
|
||||
// 配置常量
|
||||
const maxTriggers = 5
|
||||
|
||||
|
||||
Reference in New Issue
Block a user