perf: 【IoT 物联网】场景联动优化 ConditionTypeSelector 的内容直接内联在主组件中
parent
d077604bc9
commit
18b4775e98
|
|
@ -5,11 +5,20 @@
|
||||||
<el-row :gutter="16">
|
<el-row :gutter="16">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="条件类型" required>
|
<el-form-item label="条件类型" required>
|
||||||
<ConditionTypeSelector
|
<el-select
|
||||||
:model-value="condition.type"
|
:model-value="condition.type"
|
||||||
@update:model-value="(value) => updateConditionField('type', value)"
|
@update:model-value="(value) => updateConditionField('type', value)"
|
||||||
@change="handleConditionTypeChange"
|
@change="handleConditionTypeChange"
|
||||||
/>
|
placeholder="请选择条件类型"
|
||||||
|
class="w-full"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="option in conditionTypeOptions"
|
||||||
|
:key="option.value"
|
||||||
|
:label="option.label"
|
||||||
|
:value="option.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
@ -114,7 +123,6 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useVModel } from '@vueuse/core'
|
import { useVModel } from '@vueuse/core'
|
||||||
import ConditionTypeSelector from '../selectors/ConditionTypeSelector.vue'
|
|
||||||
import DeviceStatusConditionConfig from './DeviceStatusConditionConfig.vue'
|
import DeviceStatusConditionConfig from './DeviceStatusConditionConfig.vue'
|
||||||
import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue'
|
import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue'
|
||||||
import ProductSelector from '../selectors/ProductSelector.vue'
|
import ProductSelector from '../selectors/ProductSelector.vue'
|
||||||
|
|
@ -146,6 +154,22 @@ const condition = useVModel(props, 'modelValue', emit)
|
||||||
// 常量定义
|
// 常量定义
|
||||||
const ConditionTypeEnum = IotRuleSceneTriggerConditionTypeEnum
|
const ConditionTypeEnum = IotRuleSceneTriggerConditionTypeEnum
|
||||||
|
|
||||||
|
// 条件类型选项
|
||||||
|
const conditionTypeOptions = [
|
||||||
|
{
|
||||||
|
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS,
|
||||||
|
label: '设备状态'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY,
|
||||||
|
label: '设备属性'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME,
|
||||||
|
label: '当前时间'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
// 状态
|
// 状态
|
||||||
const propertyType = ref<string>('string')
|
const propertyType = ref<string>('string')
|
||||||
const propertyConfig = ref<any>(null)
|
const propertyConfig = ref<any>(null)
|
||||||
|
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!-- 条件类型选择器组件 -->
|
|
||||||
<template>
|
|
||||||
<el-select
|
|
||||||
:model-value="modelValue"
|
|
||||||
@update:model-value="handleChange"
|
|
||||||
placeholder="请选择条件类型"
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="option in conditionTypeOptions"
|
|
||||||
:key="option.value"
|
|
||||||
:label="option.label"
|
|
||||||
:value="option.value"
|
|
||||||
>
|
|
||||||
<div class="flex items-center justify-between w-full">
|
|
||||||
<div class="flex items-center gap-8px">
|
|
||||||
<Icon :icon="option.icon" :class="option.iconClass" />
|
|
||||||
<span>{{ option.label }}</span>
|
|
||||||
</div>
|
|
||||||
<el-tag :type="option.tag" size="small">{{ option.category }}</el-tag>
|
|
||||||
</div>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { IotRuleSceneTriggerConditionTypeEnum } from '@/views/iot/utils/constants'
|
|
||||||
|
|
||||||
/** 条件类型选择器组件 */
|
|
||||||
defineOptions({ name: 'ConditionTypeSelector' })
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
modelValue?: number
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', value: number): void
|
|
||||||
(e: 'change', value: number): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// 条件类型选项
|
|
||||||
const conditionTypeOptions = [
|
|
||||||
{
|
|
||||||
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS,
|
|
||||||
label: '设备状态',
|
|
||||||
description: '监控设备的在线/离线状态变化',
|
|
||||||
icon: 'ep:connection',
|
|
||||||
iconClass: 'text-blue-500',
|
|
||||||
tag: 'primary',
|
|
||||||
category: '设备'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY,
|
|
||||||
label: '设备属性',
|
|
||||||
description: '监控设备属性值的变化',
|
|
||||||
icon: 'ep:data-analysis',
|
|
||||||
iconClass: 'text-green-500',
|
|
||||||
tag: 'success',
|
|
||||||
category: '属性'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME,
|
|
||||||
label: '当前时间',
|
|
||||||
description: '基于当前时间的条件判断',
|
|
||||||
icon: 'ep:timer',
|
|
||||||
iconClass: 'text-orange-500',
|
|
||||||
tag: 'warning',
|
|
||||||
category: '时间'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
// 事件处理
|
|
||||||
const handleChange = (value: number) => {
|
|
||||||
emit('update:modelValue', value)
|
|
||||||
emit('change', value)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue