perf: 【IoT 物联网】场景联动时间条件配置组件优化

pull/808/head
puhui999 2025-08-07 21:45:23 +08:00
parent fd85c4d682
commit 0d91d4bdc0
1 changed files with 56 additions and 14 deletions

View File

@ -29,7 +29,7 @@
<Icon :icon="option.icon" :class="option.iconClass" /> <Icon :icon="option.icon" :class="option.iconClass" />
<span>{{ option.label }}</span> <span>{{ option.label }}</span>
</div> </div>
<el-tag :type="option.tag" size="small">{{ option.category }}</el-tag> <el-tag :type="option.tag as any" size="small">{{ option.category }}</el-tag>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>
@ -41,8 +41,8 @@
<el-form-item label="时间值" required> <el-form-item label="时间值" required>
<el-time-picker <el-time-picker
v-if="needsTimeInput" v-if="needsTimeInput"
:model-value="condition.timeValue" :model-value="timeValue"
@update:model-value="(value) => updateConditionField('timeValue', value)" @update:model-value="handleTimeValueChange"
placeholder="请选择时间" placeholder="请选择时间"
format="HH:mm:ss" format="HH:mm:ss"
value-format="HH:mm:ss" value-format="HH:mm:ss"
@ -50,8 +50,8 @@
/> />
<el-date-picker <el-date-picker
v-else-if="needsDateInput" v-else-if="needsDateInput"
:model-value="condition.timeValue" :model-value="timeValue"
@update:model-value="(value) => updateConditionField('timeValue', value)" @update:model-value="handleTimeValueChange"
type="datetime" type="datetime"
placeholder="请选择日期时间" placeholder="请选择日期时间"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
@ -69,8 +69,8 @@
<el-form-item label="结束时间" required> <el-form-item label="结束时间" required>
<el-time-picker <el-time-picker
v-if="needsTimeInput" v-if="needsTimeInput"
:model-value="condition.timeValue2" :model-value="timeValue2"
@update:model-value="(value) => updateConditionField('timeValue2', value)" @update:model-value="handleTimeValue2Change"
placeholder="请选择结束时间" placeholder="请选择结束时间"
format="HH:mm:ss" format="HH:mm:ss"
value-format="HH:mm:ss" value-format="HH:mm:ss"
@ -78,8 +78,8 @@
/> />
<el-date-picker <el-date-picker
v-else v-else
:model-value="condition.timeValue2" :model-value="timeValue2"
@update:model-value="(value) => updateConditionField('timeValue2', value)" @update:model-value="handleTimeValue2Change"
type="datetime" type="datetime"
placeholder="请选择结束日期时间" placeholder="请选择结束日期时间"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
@ -162,7 +162,7 @@ const needsTimeInput = computed(() => {
IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value, IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value
] ]
return timeOnlyOperators.includes(condition.value.operator) return timeOnlyOperators.includes(condition.value.operator as any)
}) })
// //
@ -175,24 +175,66 @@ const needsSecondTimeInput = computed(() => {
return condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value return condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
}) })
// param
const timeValue = computed(() => {
if (!condition.value.param) return ''
const params = condition.value.param.split(',')
return params[0] || ''
})
// param
const timeValue2 = computed(() => {
if (!condition.value.param) return ''
const params = condition.value.param.split(',')
return params[1] || ''
})
/** /**
* 更新条件字段 * 更新条件字段
* @param field 字段名 * @param field 字段名
* @param value 字段值 * @param value 字段值
*/ */
const updateConditionField = (field: keyof TriggerCondition, value: any) => { const updateConditionField = (field: any, value: any) => {
condition.value[field] = value condition.value[field] = value
} }
/**
* 处理第一个时间值变化
* @param value 时间值
*/
const handleTimeValueChange = (value: string) => {
const currentParams = condition.value.param ? condition.value.param.split(',') : []
currentParams[0] = value || ''
//
if (needsSecondTimeInput.value) {
condition.value.param = currentParams.slice(0, 2).join(',')
} else {
condition.value.param = currentParams[0]
}
}
/**
* 处理第二个时间值变化
* @param value 时间值
*/
const handleTimeValue2Change = (value: string) => {
const currentParams = condition.value.param ? condition.value.param.split(',') : ['']
currentParams[1] = value || ''
condition.value.param = currentParams.slice(0, 2).join(',')
}
// //
watch( watch(
() => condition.value.operator, () => condition.value.operator,
(newOperator) => { (newOperator) => {
if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) { if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
;(condition.value as any).timeValue = undefined //
;(condition.value as any).timeValue2 = undefined condition.value.param = ''
} else if (!needsSecondTimeInput.value) { } else if (!needsSecondTimeInput.value) {
;(condition.value as any).timeValue2 = undefined //
const currentParams = condition.value.param ? condition.value.param.split(',') : []
condition.value.param = currentParams[0] || ''
} }
} }
) )