perf：【IoT 物联网】场景联动目录结构优化
This commit is contained in:
puhui999
209
src/views/iot/rule/scene/form/configs/AlertConfig.vue
Normal file
209
src/views/iot/rule/scene/form/configs/AlertConfig.vue
Normal file
@ -0,0 +1,209 @@
|
||||
<!-- 告警配置组件 -->
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<!-- TODO @puhui999：触发告警时，不用选择配置哈； -->
|
||||
<el-form-item label="告警配置" required>
|
||||
<el-select
|
||||
v-model="localValue"
|
||||
placeholder="请选择告警配置"
|
||||
filterable
|
||||
clearable
|
||||
@change="handleChange"
|
||||
class="w-full"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option
|
||||
v-for="config in alertConfigs"
|
||||
:key="config.id"
|
||||
:label="config.name"
|
||||
:value="config.id"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full py-4px">
|
||||
<div class="flex-1">
|
||||
<div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ config.name }}</div>
|
||||
<div class="text-12px text-[var(--el-text-color-secondary)]">{{ config.description }}</div>
|
||||
</div>
|
||||
<el-tag :type="config.enabled ? 'success' : 'danger'" size="small">
|
||||
{{ config.enabled ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 告警配置详情 -->
|
||||
<div v-if="selectedConfig" class="mt-16px 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-12px">
|
||||
<Icon icon="ep:bell" class="text-[var(--el-color-warning)] text-16px" />
|
||||
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ selectedConfig.name }}</span>
|
||||
<el-tag :type="selectedConfig.enabled ? 'success' : 'danger'" size="small">
|
||||
{{ selectedConfig.enabled ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="space-y-8px">
|
||||
<div class="flex items-start gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">描述：</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.description }}</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">通知方式：</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ getNotifyTypeName(selectedConfig.notifyType) }}</span>
|
||||
</div>
|
||||
<div v-if="selectedConfig.receivers" class="flex items-start gap-8px">
|
||||
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">接收人：</span>
|
||||
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.receivers.join(', ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果 -->
|
||||
<div v-if="validationMessage" class="mt-16px">
|
||||
<el-alert
|
||||
:title="validationMessage"
|
||||
:type="isValid ? 'success' : 'error'"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
/** 告警配置组件 */
|
||||
defineOptions({ name: 'AlertConfig' })
|
||||
|
||||
interface Props {
|
||||
modelValue?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value?: number): void
|
||||
(e: 'validate', result: { valid: boolean; message: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const localValue = useVModel(props, 'modelValue', emit)
|
||||
|
||||
// 状态
|
||||
const loading = ref(false)
|
||||
const alertConfigs = ref<any[]>([])
|
||||
const validationMessage = ref('')
|
||||
const isValid = ref(true)
|
||||
|
||||
// 计算属性
|
||||
const selectedConfig = computed(() => {
|
||||
return alertConfigs.value.find((config) => config.id === localValue.value)
|
||||
})
|
||||
|
||||
// 工具函数
|
||||
const getNotifyTypeName = (type: number) => {
|
||||
const typeMap = {
|
||||
1: '邮件通知',
|
||||
2: '短信通知',
|
||||
3: '微信通知',
|
||||
4: '钉钉通知'
|
||||
}
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
// 事件处理
|
||||
const handleChange = () => {
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const updateValidationResult = () => {
|
||||
if (!localValue.value) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请选择告警配置'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
const config = selectedConfig.value
|
||||
if (!config) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '告警配置不存在'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
if (!config.enabled) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '选择的告警配置已禁用'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
// 验证通过
|
||||
isValid.value = true
|
||||
validationMessage.value = '告警配置验证通过'
|
||||
emit('validate', { valid: true, message: validationMessage.value })
|
||||
}
|
||||
|
||||
// API 调用
|
||||
const getAlertConfigs = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 这里应该调用真实的API获取告警配置
|
||||
// 暂时使用模拟数据
|
||||
// TODO @puhui999：这里是模拟数据
|
||||
alertConfigs.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: '设备异常告警',
|
||||
description: '设备状态异常时发送告警',
|
||||
enabled: true,
|
||||
notifyType: 1,
|
||||
receivers: ['admin@example.com', 'operator@example.com']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '温度超限告警',
|
||||
description: '温度超过阈值时发送告警',
|
||||
enabled: true,
|
||||
notifyType: 2,
|
||||
receivers: ['13800138000', '13900139000']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '系统故障告警',
|
||||
description: '系统发生故障时发送告警',
|
||||
enabled: false,
|
||||
notifyType: 3,
|
||||
receivers: ['技术支持群']
|
||||
}
|
||||
]
|
||||
} catch (error) {
|
||||
console.error('获取告警配置失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 监听值变化
|
||||
watch(
|
||||
() => localValue.value,
|
||||
() => {
|
||||
updateValidationResult()
|
||||
}
|
||||
)
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getAlertConfigs()
|
||||
if (localValue.value) {
|
||||
updateValidationResult()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-select-dropdown__item) {
|
||||
height: auto;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
</style>
|
||||
216
src/views/iot/rule/scene/form/configs/ConditionConfig.vue
Normal file
216
src/views/iot/rule/scene/form/configs/ConditionConfig.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<!-- 单个条件配置组件 -->
|
||||
<!-- TODO @puhui999：这里需要在对下阿里云 IoT，不太对；它是条件类型；然后选择产品、设备；接着选条件类型对应的比较； -->
|
||||
<template>
|
||||
<div class="flex flex-col gap-16px">
|
||||
<el-row :gutter="16">
|
||||
<!-- 属性/事件/服务选择 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item label="监控项" required>
|
||||
<PropertySelector
|
||||
:model-value="condition.identifier"
|
||||
@update:model-value="(value) => updateConditionField('identifier', value)"
|
||||
:trigger-type="triggerType"
|
||||
:product-id="productId"
|
||||
:device-id="deviceId"
|
||||
@change="handlePropertyChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 操作符选择 -->
|
||||
<el-col :span="6">
|
||||
<el-form-item label="操作符" required>
|
||||
<OperatorSelector
|
||||
:model-value="condition.operator"
|
||||
@update:model-value="(value) => updateConditionField('operator', value)"
|
||||
:property-type="propertyType"
|
||||
@change="handleOperatorChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 值输入 -->
|
||||
<el-col :span="10">
|
||||
<el-form-item label="比较值" required>
|
||||
<ValueInput
|
||||
:model-value="condition.param"
|
||||
@update:model-value="(value) => updateConditionField('param', value)"
|
||||
:property-type="propertyType"
|
||||
:operator="condition.operator"
|
||||
:property-config="propertyConfig"
|
||||
@validate="handleValueValidate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 条件预览 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果 -->
|
||||
<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 PropertySelector from '../selectors/PropertySelector.vue'
|
||||
import OperatorSelector from '../selectors/OperatorSelector.vue'
|
||||
import ValueInput from '../inputs/ValueInput.vue'
|
||||
import { ConditionFormData } from '@/api/iot/rule/scene/scene.types'
|
||||
|
||||
/** 单个条件配置组件 */
|
||||
defineOptions({ name: 'ConditionConfig' })
|
||||
|
||||
interface Props {
|
||||
modelValue: ConditionFormData
|
||||
triggerType: number
|
||||
productId?: number
|
||||
deviceId?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: ConditionFormData): void
|
||||
(e: 'validate', result: { valid: boolean; message: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const condition = useVModel(props, 'modelValue', emit)
|
||||
|
||||
// 状态
|
||||
const propertyType = ref<string>('string')
|
||||
const propertyConfig = ref<any>(null)
|
||||
const validationMessage = ref('')
|
||||
const isValid = ref(true)
|
||||
const valueValidation = ref({ valid: true, message: '' })
|
||||
|
||||
// 计算属性
|
||||
const conditionPreview = computed(() => {
|
||||
if (!condition.value.identifier || !condition.value.operator || !condition.value.param) {
|
||||
return ''
|
||||
}
|
||||
|
||||
const propertyName = propertyConfig.value?.name || condition.value.identifier
|
||||
const operatorText = getOperatorText(condition.value.operator)
|
||||
const value = condition.value.param
|
||||
|
||||
return `当 ${propertyName} ${operatorText} ${value} 时触发`
|
||||
})
|
||||
|
||||
// 工具函数
|
||||
const getOperatorText = (operator: string) => {
|
||||
const operatorMap = {
|
||||
'=': '等于',
|
||||
'!=': '不等于',
|
||||
'>': '大于',
|
||||
'>=': '大于等于',
|
||||
'<': '小于',
|
||||
'<=': '小于等于',
|
||||
in: '包含于',
|
||||
between: '介于'
|
||||
}
|
||||
return operatorMap[operator] || operator
|
||||
}
|
||||
|
||||
// 事件处理
|
||||
const updateConditionField = (field: keyof ConditionFormData, value: any) => {
|
||||
condition.value[field] = value
|
||||
emit('update:modelValue', condition.value)
|
||||
}
|
||||
|
||||
const handlePropertyChange = (propertyInfo: { type: string; config: any }) => {
|
||||
propertyType.value = propertyInfo.type
|
||||
propertyConfig.value = propertyInfo.config
|
||||
|
||||
// 重置操作符和值
|
||||
condition.value.operator = '='
|
||||
condition.value.param = ''
|
||||
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const handleOperatorChange = () => {
|
||||
// 重置值
|
||||
condition.value.param = ''
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const handleValueValidate = (result: { valid: boolean; message: string }) => {
|
||||
valueValidation.value = result
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const updateValidationResult = () => {
|
||||
// 基础验证
|
||||
if (!condition.value.identifier) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请选择监控项'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
if (!condition.value.operator) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请选择操作符'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
if (!condition.value.param) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请输入比较值'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
// 值验证
|
||||
if (!valueValidation.value.valid) {
|
||||
isValid.value = false
|
||||
validationMessage.value = valueValidation.value.message
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
// 验证通过
|
||||
isValid.value = true
|
||||
validationMessage.value = '条件配置验证通过'
|
||||
emit('validate', { valid: true, message: validationMessage.value })
|
||||
}
|
||||
|
||||
// 监听条件变化
|
||||
watch(
|
||||
() => [condition.value.identifier, condition.value.operator, condition.value.param],
|
||||
() => {
|
||||
updateValidationResult()
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
updateValidationResult()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
233
src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
Normal file
233
src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
Normal file
@ -0,0 +1,233 @@
|
||||
<!-- 条件组配置组件 -->
|
||||
<template>
|
||||
<div class="p-16px">
|
||||
<div class="space-y-12px">
|
||||
<!-- 条件列表 -->
|
||||
<div v-if="group.conditions && group.conditions.length > 0" class="space-y-12px">
|
||||
<div
|
||||
v-for="(condition, index) in group.conditions"
|
||||
:key="`condition-${index}`"
|
||||
class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-light)]"
|
||||
>
|
||||
<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)]">条件 {{ index + 1 }}</span>
|
||||
<el-tag size="small" type="primary">
|
||||
{{ getConditionTypeName(condition.type) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
text
|
||||
@click="removeCondition(index)"
|
||||
v-if="group.conditions!.length > 1"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="p-12px bg-[var(--el-fill-color-blank)] rounded-4px">
|
||||
<ConditionConfig
|
||||
:model-value="condition"
|
||||
@update:model-value="(value) => updateCondition(index, value)"
|
||||
:trigger-type="triggerType"
|
||||
:product-id="productId"
|
||||
:device-id="deviceId"
|
||||
@validate="(result) => handleConditionValidate(index, result)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 逻辑连接符 -->
|
||||
<!-- TODO @puhui999：不用这个哈； -->
|
||||
<div v-if="index < group.conditions!.length - 1" class="flex justify-center mt-8px">
|
||||
<el-select v-model="group.logicOperator" size="small" class="w-80px">
|
||||
<el-option label="且" value="AND" />
|
||||
<el-option label="或" value="OR" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="py-40px text-center">
|
||||
<el-empty description="暂无条件配置" :image-size="80">
|
||||
<el-button type="primary" @click="addCondition">
|
||||
<Icon icon="ep:plus" />
|
||||
添加第一个条件
|
||||
</el-button>
|
||||
</el-empty>
|
||||
</div>
|
||||
|
||||
<!-- 添加条件按钮 -->
|
||||
<div
|
||||
v-if="
|
||||
group.conditions && group.conditions.length > 0 && group.conditions.length < maxConditions
|
||||
"
|
||||
class="text-center py-16px"
|
||||
>
|
||||
<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)]"> 最多可添加 {{ maxConditions }} 个条件 </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果 -->
|
||||
<!-- TODO @puhui999：是不是不用这种提示；只要 validator rules 能展示出来就好了呀。。。 -->
|
||||
<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 ConditionConfig from './ConditionConfig.vue'
|
||||
import {
|
||||
ConditionGroupFormData,
|
||||
ConditionFormData,
|
||||
IotRuleSceneTriggerTypeEnum
|
||||
} from '@/api/iot/rule/scene/scene.types'
|
||||
|
||||
/** 条件组配置组件 */
|
||||
defineOptions({ name: 'ConditionGroupConfig' })
|
||||
|
||||
interface Props {
|
||||
modelValue: ConditionGroupFormData
|
||||
triggerType: number
|
||||
productId?: number
|
||||
deviceId?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: ConditionGroupFormData): void
|
||||
(e: 'validate', result: { valid: boolean; message: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const group = useVModel(props, 'modelValue', emit)
|
||||
|
||||
// 配置常量
|
||||
const maxConditions = 5
|
||||
|
||||
// 验证状态
|
||||
const conditionValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
|
||||
const validationMessage = ref('')
|
||||
const isValid = ref(true)
|
||||
|
||||
// 条件类型映射
|
||||
const conditionTypeNames = {
|
||||
[IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST]: '属性条件',
|
||||
[IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST]: '事件条件',
|
||||
[IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE]: '服务条件'
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
const getConditionTypeName = (type: number) => {
|
||||
return conditionTypeNames[type] || '未知条件'
|
||||
}
|
||||
|
||||
// 事件处理
|
||||
const updateCondition = (index: number, condition: ConditionFormData) => {
|
||||
if (group.value.conditions) {
|
||||
group.value.conditions[index] = condition
|
||||
}
|
||||
}
|
||||
|
||||
const addCondition = () => {
|
||||
if (!group.value.conditions) {
|
||||
group.value.conditions = []
|
||||
}
|
||||
|
||||
if (group.value.conditions.length >= maxConditions) {
|
||||
return
|
||||
}
|
||||
|
||||
const newCondition: ConditionFormData = {
|
||||
type: props.triggerType,
|
||||
productId: props.productId || 0,
|
||||
deviceId: props.deviceId || 0,
|
||||
identifier: '',
|
||||
operator: '=',
|
||||
param: ''
|
||||
}
|
||||
|
||||
group.value.conditions.push(newCondition)
|
||||
}
|
||||
|
||||
const removeCondition = (index: number) => {
|
||||
if (group.value.conditions) {
|
||||
group.value.conditions.splice(index, 1)
|
||||
delete conditionValidations.value[index]
|
||||
|
||||
// 重新索引验证结果
|
||||
const newValidations: { [key: number]: { valid: boolean; message: string } } = {}
|
||||
Object.keys(conditionValidations.value).forEach((key) => {
|
||||
const numKey = parseInt(key)
|
||||
if (numKey > index) {
|
||||
newValidations[numKey - 1] = conditionValidations.value[numKey]
|
||||
} else if (numKey < index) {
|
||||
newValidations[numKey] = conditionValidations.value[numKey]
|
||||
}
|
||||
})
|
||||
conditionValidations.value = newValidations
|
||||
|
||||
updateValidationResult()
|
||||
}
|
||||
}
|
||||
|
||||
const handleConditionValidate = (index: number, result: { valid: boolean; message: string }) => {
|
||||
conditionValidations.value[index] = result
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const updateValidationResult = () => {
|
||||
if (!group.value.conditions || group.value.conditions.length === 0) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请至少添加一个条件'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
const validations = Object.values(conditionValidations.value)
|
||||
const allValid = validations.every((v) => v.valid)
|
||||
|
||||
if (allValid) {
|
||||
isValid.value = true
|
||||
validationMessage.value = '条件组配置验证通过'
|
||||
} else {
|
||||
isValid.value = false
|
||||
const errorMessages = validations.filter((v) => !v.valid).map((v) => v.message)
|
||||
validationMessage.value = `条件配置错误: ${errorMessages.join('; ')}`
|
||||
}
|
||||
|
||||
emit('validate', { valid: isValid.value, message: validationMessage.value })
|
||||
}
|
||||
|
||||
// 监听条件数量变化
|
||||
watch(
|
||||
() => group.value.conditions?.length,
|
||||
() => {
|
||||
updateValidationResult()
|
||||
}
|
||||
)
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
if (!group.value.conditions || group.value.conditions.length === 0) {
|
||||
addCondition()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
147
src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
Normal file
147
src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<!-- 设备控制配置组件 -->
|
||||
<!-- TODO @puhui999：貌似没生效~~~ -->
|
||||
<template>
|
||||
<div class="flex flex-col gap-16px">
|
||||
<!-- 产品和设备选择 -->
|
||||
<ProductDeviceSelector
|
||||
v-model:product-id="action.productId"
|
||||
v-model:device-id="action.deviceId"
|
||||
@change="handleDeviceChange"
|
||||
/>
|
||||
|
||||
<!-- 控制参数配置 -->
|
||||
<div v-if="action.productId && action.deviceId" class="space-y-16px">
|
||||
<el-form-item label="控制参数" required>
|
||||
<el-input
|
||||
v-model="paramsJson"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入JSON格式的控制参数"
|
||||
@input="handleParamsChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 参数示例 -->
|
||||
<div class="mt-12px">
|
||||
<el-alert title="参数格式示例" type="info" :closable="false" show-icon>
|
||||
<template #default>
|
||||
<div class="space-y-8px">
|
||||
<p class="m-0 text-14px text-[var(--el-text-color-primary)]">属性设置示例：</p>
|
||||
<pre class="m-0 p-8px bg-[var(--el-fill-color-light)] rounded-4px text-12px text-[var(--el-text-color-regular)] overflow-x-auto"><code>{ "temperature": 25, "power": true }</code></pre>
|
||||
<p class="m-0 text-14px text-[var(--el-text-color-primary)]">服务调用示例：</p>
|
||||
<pre class="m-0 p-8px bg-[var(--el-fill-color-light)] rounded-4px text-12px text-[var(--el-text-color-regular)] overflow-x-auto"><code>{ "method": "restart", "params": { "delay": 5 } }</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果 -->
|
||||
<div v-if="validationMessage" class="mt-16px">
|
||||
<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 ProductDeviceSelector from '../selectors/ProductDeviceSelector.vue'
|
||||
import { ActionFormData } from '@/api/iot/rule/scene/scene.types'
|
||||
|
||||
/** 设备控制配置组件 */
|
||||
defineOptions({ name: 'DeviceControlConfig' })
|
||||
|
||||
interface Props {
|
||||
modelValue: ActionFormData
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: ActionFormData): void
|
||||
(e: 'validate', result: { valid: boolean; message: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const action = useVModel(props, 'modelValue', emit)
|
||||
|
||||
// 状态
|
||||
const paramsJson = ref('')
|
||||
const validationMessage = ref('')
|
||||
const isValid = ref(true)
|
||||
|
||||
// 事件处理
|
||||
const handleDeviceChange = ({ productId, deviceId }: { productId?: number; deviceId?: number }) => {
|
||||
action.value.productId = productId
|
||||
action.value.deviceId = deviceId
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const handleParamsChange = () => {
|
||||
try {
|
||||
if (paramsJson.value.trim()) {
|
||||
action.value.params = JSON.parse(paramsJson.value)
|
||||
} else {
|
||||
action.value.params = {}
|
||||
}
|
||||
updateValidationResult()
|
||||
} catch (error) {
|
||||
isValid.value = false
|
||||
validationMessage.value = 'JSON格式错误'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
}
|
||||
}
|
||||
|
||||
const updateValidationResult = () => {
|
||||
// 基础验证
|
||||
if (!action.value.productId || !action.value.deviceId) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请选择产品和设备'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
if (!action.value.params || Object.keys(action.value.params).length === 0) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请配置控制参数'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
// 验证通过
|
||||
isValid.value = true
|
||||
validationMessage.value = '设备控制配置验证通过'
|
||||
emit('validate', { valid: true, message: validationMessage.value })
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
if (action.value.params) {
|
||||
paramsJson.value = JSON.stringify(action.value.params, null, 2)
|
||||
}
|
||||
updateValidationResult()
|
||||
})
|
||||
|
||||
// 监听参数变化
|
||||
watch(
|
||||
() => action.value.params,
|
||||
(newParams) => {
|
||||
if (newParams && typeof newParams === 'object') {
|
||||
paramsJson.value = JSON.stringify(newParams, null, 2)
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.example-content code) {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
266
src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
Normal file
266
src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
Normal file
@ -0,0 +1,266 @@
|
||||
<!-- 设备触发配置组件 -->
|
||||
<template>
|
||||
<div class="flex flex-col gap-16px">
|
||||
<!-- 产品和设备选择 -->
|
||||
<ProductDeviceSelector
|
||||
v-model:product-id="trigger.productId"
|
||||
v-model:device-id="trigger.deviceId"
|
||||
@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 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 }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="addConditionGroup"
|
||||
:disabled="(trigger.conditionGroups?.length || 0) >= maxConditionGroups"
|
||||
>
|
||||
<Icon icon="ep:plus" />
|
||||
添加条件组
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 条件组列表 -->
|
||||
<div
|
||||
v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
|
||||
class="flex flex-col gap-12px"
|
||||
>
|
||||
<div
|
||||
v-for="(group, groupIndex) in trigger.conditionGroups"
|
||||
: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 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>
|
||||
</div>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
text
|
||||
@click="removeConditionGroup(groupIndex)"
|
||||
v-if="trigger.conditionGroups!.length > 1"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
删除组
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<ConditionGroupConfig
|
||||
:model-value="group"
|
||||
@update:model-value="(value) => updateConditionGroup(groupIndex, value)"
|
||||
:trigger-type="trigger.type"
|
||||
:product-id="trigger.productId"
|
||||
:device-id="trigger.deviceId"
|
||||
@validate="(result) => handleGroupValidate(groupIndex, result)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="py-40px text-center">
|
||||
<el-empty description="暂无触发条件">
|
||||
<el-button type="primary" @click="addConditionGroup">
|
||||
<Icon icon="ep:plus" />
|
||||
添加第一个条件组
|
||||
</el-button>
|
||||
</el-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果 -->
|
||||
<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 ProductDeviceSelector from '../selectors/ProductDeviceSelector.vue'
|
||||
import ConditionGroupConfig from './ConditionGroupConfig.vue'
|
||||
import {
|
||||
TriggerFormData,
|
||||
ConditionGroupFormData,
|
||||
IotRuleSceneTriggerTypeEnum as TriggerTypeEnum
|
||||
} from '@/api/iot/rule/scene/scene.types'
|
||||
|
||||
/** 设备触发配置组件 */
|
||||
defineOptions({ name: 'DeviceTriggerConfig' })
|
||||
|
||||
interface Props {
|
||||
modelValue: TriggerFormData
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: TriggerFormData): void
|
||||
(e: 'validate', result: { valid: boolean; message: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const trigger = useVModel(props, 'modelValue', emit)
|
||||
|
||||
// 配置常量
|
||||
const maxConditionGroups = 3
|
||||
|
||||
// 验证状态
|
||||
const groupValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
|
||||
const validationMessage = ref('')
|
||||
const isValid = ref(true)
|
||||
|
||||
// 计算属性
|
||||
const needsConditions = computed(() => {
|
||||
return trigger.value.type !== TriggerTypeEnum.DEVICE_STATE_UPDATE
|
||||
})
|
||||
|
||||
// 事件处理
|
||||
const updateConditionGroup = (index: number, group: ConditionGroupFormData) => {
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups[index] = group
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeviceChange = ({ productId, deviceId }: { productId?: number; deviceId?: number }) => {
|
||||
trigger.value.productId = productId
|
||||
trigger.value.deviceId = deviceId
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const addConditionGroup = () => {
|
||||
if (!trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups = []
|
||||
}
|
||||
|
||||
if (trigger.value.conditionGroups.length >= maxConditionGroups) {
|
||||
return
|
||||
}
|
||||
|
||||
const newGroup: ConditionGroupFormData = {
|
||||
conditions: [],
|
||||
logicOperator: 'AND'
|
||||
}
|
||||
|
||||
trigger.value.conditionGroups.push(newGroup)
|
||||
}
|
||||
|
||||
const removeConditionGroup = (index: number) => {
|
||||
if (trigger.value.conditionGroups) {
|
||||
trigger.value.conditionGroups.splice(index, 1)
|
||||
delete groupValidations.value[index]
|
||||
|
||||
// 重新索引验证结果
|
||||
const newValidations: { [key: number]: { valid: boolean; message: string } } = {}
|
||||
Object.keys(groupValidations.value).forEach((key) => {
|
||||
const numKey = parseInt(key)
|
||||
if (numKey > index) {
|
||||
newValidations[numKey - 1] = groupValidations.value[numKey]
|
||||
} else if (numKey < index) {
|
||||
newValidations[numKey] = groupValidations.value[numKey]
|
||||
}
|
||||
})
|
||||
groupValidations.value = newValidations
|
||||
|
||||
updateValidationResult()
|
||||
}
|
||||
}
|
||||
|
||||
const handleGroupValidate = (index: number, result: { valid: boolean; message: string }) => {
|
||||
groupValidations.value[index] = result
|
||||
updateValidationResult()
|
||||
}
|
||||
|
||||
const updateValidationResult = () => {
|
||||
// 基础验证
|
||||
if (!trigger.value.productId || !trigger.value.deviceId) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请选择产品和设备'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
// 设备状态变更不需要条件验证
|
||||
if (trigger.value.type === TriggerTypeEnum.DEVICE_STATE_UPDATE) {
|
||||
isValid.value = true
|
||||
validationMessage.value = '设备触发配置验证通过'
|
||||
emit('validate', { valid: true, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
// 条件组验证
|
||||
if (!trigger.value.conditionGroups || trigger.value.conditionGroups.length === 0) {
|
||||
isValid.value = false
|
||||
validationMessage.value = '请至少添加一个触发条件组'
|
||||
emit('validate', { valid: false, message: validationMessage.value })
|
||||
return
|
||||
}
|
||||
|
||||
const validations = Object.values(groupValidations.value)
|
||||
const allValid = validations.every((v) => v.valid)
|
||||
|
||||
if (allValid) {
|
||||
isValid.value = true
|
||||
validationMessage.value = '设备触发配置验证通过'
|
||||
} else {
|
||||
isValid.value = false
|
||||
const errorMessages = validations.filter((v) => !v.valid).map((v) => v.message)
|
||||
validationMessage.value = `条件组配置错误: ${errorMessages.join('; ')}`
|
||||
}
|
||||
|
||||
emit('validate', { valid: isValid.value, message: validationMessage.value })
|
||||
}
|
||||
|
||||
// 监听触发器类型变化
|
||||
watch(
|
||||
() => trigger.value.type,
|
||||
() => {
|
||||
updateValidationResult()
|
||||
}
|
||||
)
|
||||
|
||||
// 监听产品设备变化
|
||||
watch(
|
||||
() => [trigger.value.productId, trigger.value.deviceId],
|
||||
() => {
|
||||
updateValidationResult()
|
||||
}
|
||||
)
|
||||
// TODO @puhui999：unocss - 已完成转换
|
||||
</script>
|
||||
88
src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
Normal file
88
src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<!-- 定时触发配置组件 -->
|
||||
<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>
|
||||
|
||||
<!-- 可视化编辑器 -->
|
||||
<!-- 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)]">
|
||||
<el-form-item label="CRON表达式" required>
|
||||
<CronInput v-model="localValue" @validate="handleValidate" />
|
||||
</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'
|
||||
|
||||
/** 定时触发配置组件 */
|
||||
defineOptions({ name: 'TimerTriggerConfig' })
|
||||
|
||||
interface Props {
|
||||
modelValue?: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'validate', result: { valid: boolean; message: string }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user