From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue | 251 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 251 insertions(+), 0 deletions(-)
diff --git a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
new file mode 100644
index 0000000..979eff8
--- /dev/null
+++ b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
@@ -0,0 +1,251 @@
+<!-- 璁惧瑙﹀彂閰嶇疆缁勪欢 -->
+<template>
+ <div class="flex flex-col gap-16px">
+ <!-- 涓绘潯浠堕厤缃� - 榛樿鐩存帴灞曠ず -->
+ <div class="space-y-16px">
+ <!-- 涓绘潯浠堕厤缃� -->
+ <div class="flex flex-col gap-16px">
+ <!-- 涓绘潯浠堕厤缃� -->
+ <div class="space-y-16px">
+ <!-- 涓绘潯浠跺ご閮� - 涓庨檮鍔犳潯浠剁粍淇濇寔涓�鑷寸殑缁胯壊椋庢牸 -->
+ <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"
+ >
+ <div class="flex items-center gap-12px">
+ <div class="flex items-center gap-8px text-16px font-600 text-green-700">
+ <div
+ class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+ >
+ 涓�
+ </div>
+ <span>涓绘潯浠�</span>
+ </div>
+ <el-tag size="small" type="success">蹇呴』婊¤冻</el-tag>
+ </div>
+ </div>
+
+ <!-- 涓绘潯浠跺唴瀹归厤缃� -->
+ <MainConditionInnerConfig
+ :model-value="trigger"
+ @update:model-value="updateCondition"
+ :trigger-type="trigger.type"
+ @trigger-type-change="handleTriggerTypeChange"
+ />
+ </div>
+ </div>
+ </div>
+
+ <!-- 鏉′欢缁勯厤缃� -->
+ <div class="space-y-16px">
+ <!-- 鏉′欢缁勯厤缃� -->
+ <div class="flex flex-col gap-16px">
+ <!-- 鏉′欢缁勫鍣ㄥご閮� -->
+ <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"
+ >
+ <div class="flex items-center gap-12px">
+ <div class="flex items-center gap-8px text-16px font-600 text-green-700">
+ <div
+ class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+ >
+ 缁�
+ </div>
+ <span>闄勫姞鏉′欢缁�</span>
+ </div>
+ <el-tag size="small" type="success">涓�"涓绘潯浠�"涓轰笖鍏崇郴</el-tag>
+ <el-tag size="small" type="info">
+ {{ trigger.conditionGroups?.length || 0 }} 涓瓙鏉′欢缁�
+ </el-tag>
+ </div>
+ <div class="flex items-center gap-8px">
+ <el-button
+ type="primary"
+ size="small"
+ @click="addSubGroup"
+ :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
+ >
+ <Icon icon="ep:plus" />
+ 娣诲姞瀛愭潯浠剁粍
+ </el-button>
+ <el-button type="danger" size="small" text @click="removeConditionGroup">
+ <Icon icon="ep:delete" />
+ 鍒犻櫎鏉′欢缁�
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 瀛愭潯浠剁粍鍒楄〃 -->
+ <div
+ v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
+ class="space-y-16px"
+ >
+ <!-- 閫昏緫鍏崇郴璇存槑 -->
+ <div class="relative">
+ <div
+ v-for="(subGroup, subGroupIndex) in trigger.conditionGroups"
+ :key="`sub-group-${subGroupIndex}`"
+ class="relative"
+ >
+ <!-- 瀛愭潯浠剁粍瀹瑰櫒 -->
+ <div
+ class="border-2 border-orange-200 rounded-8px bg-orange-50 shadow-sm hover:shadow-md transition-shadow"
+ >
+ <div
+ class="flex items-center justify-between p-16px bg-gradient-to-r from-orange-50 to-yellow-50 border-b border-orange-200 rounded-t-6px"
+ >
+ <div class="flex items-center gap-12px">
+ <div class="flex items-center gap-8px text-16px font-600 text-orange-700">
+ <div
+ class="w-24px h-24px bg-orange-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+ >
+ {{ subGroupIndex + 1 }}
+ </div>
+ <span>瀛愭潯浠剁粍 {{ subGroupIndex + 1 }}</span>
+ </div>
+ <el-tag size="small" type="warning" class="font-500">缁勫唴鏉′欢涓�"涓�"鍏崇郴</el-tag>
+ <el-tag size="small" type="info"> {{ subGroup?.length || 0 }}涓潯浠� </el-tag>
+ </div>
+ <el-button
+ type="danger"
+ size="small"
+ text
+ @click="removeSubGroup(subGroupIndex)"
+ class="hover:bg-red-50"
+ >
+ <Icon icon="ep:delete" />
+ 鍒犻櫎缁�
+ </el-button>
+ </div>
+
+ <SubConditionGroupConfig
+ :model-value="subGroup"
+ @update:model-value="(value) => updateSubGroup(subGroupIndex, value)"
+ :trigger-type="trigger.type"
+ :max-conditions="maxConditionsPerGroup"
+ />
+ </div>
+
+ <!-- 瀛愭潯浠剁粍闂寸殑"鎴�"杩炴帴绗� -->
+ <div
+ v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
+ class="flex items-center justify-center py-12px"
+ >
+ <div class="flex items-center gap-8px">
+ <!-- 杩炴帴绾� -->
+ <div class="w-32px h-1px bg-orange-300"></div>
+ <!-- 鎴栨爣绛� -->
+ <div class="px-16px py-6px bg-orange-100 border-2 border-orange-300 rounded-full">
+ <span class="text-14px font-600 text-orange-600">鎴�</span>
+ </div>
+ <!-- 杩炴帴绾� -->
+ <div class="w-32px h-1px bg-orange-300"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 绌虹姸鎬� -->
+ <div
+ v-else
+ class="p-24px border-2 border-dashed border-orange-200 rounded-8px text-center bg-orange-50"
+ >
+ <div class="flex flex-col items-center gap-12px">
+ <Icon icon="ep:plus" class="text-32px text-orange-400" />
+ <div class="text-orange-600">
+ <p class="text-14px font-500 mb-4px">鏆傛棤瀛愭潯浠剁粍</p>
+ <p class="text-12px">鐐瑰嚮涓婃柟"娣诲姞瀛愭潯浠剁粍"鎸夐挳寮�濮嬮厤缃�</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
+import SubConditionGroupConfig from './SubConditionGroupConfig.vue'
+import type { Trigger } from '@/api/iot/rule/scene'
+
+/** 璁惧瑙﹀彂閰嶇疆缁勪欢 */
+defineOptions({ name: 'DeviceTriggerConfig' })
+
+const props = defineProps<{
+ modelValue: Trigger
+ index: number
+}>()
+
+const emit = defineEmits<{
+ (e: 'update:modelValue', value: Trigger): void
+ (e: 'trigger-type-change', type: number): void
+}>()
+
+const trigger = useVModel(props, 'modelValue', emit)
+
+const maxSubGroups = 3 // 鏈�澶� 3 涓瓙鏉′欢缁�
+const maxConditionsPerGroup = 3 // 姣忕粍鏈�澶� 3 涓潯浠�
+
+/**
+ * 鏇存柊鏉′欢
+ * @param condition 鏉′欢瀵硅薄
+ */
+const updateCondition = (condition: Trigger) => {
+ trigger.value = condition
+}
+
+/**
+ * 澶勭悊瑙﹀彂鍣ㄧ被鍨嬪彉鍖栦簨浠�
+ * @param type 瑙﹀彂鍣ㄧ被鍨�
+ */
+const handleTriggerTypeChange = (type: number) => {
+ trigger.value.type = type
+ emit('trigger-type-change', type)
+}
+
+/** 娣诲姞瀛愭潯浠剁粍 */
+const addSubGroup = async () => {
+ if (!trigger.value.conditionGroups) {
+ trigger.value.conditionGroups = []
+ }
+
+ // 妫�鏌ユ槸鍚﹁揪鍒版渶澶у瓙缁勬暟閲忛檺鍒�
+ if (trigger.value.conditionGroups?.length >= maxSubGroups) {
+ return
+ }
+
+ // 浣跨敤 nextTick 纭繚鍝嶅簲寮忔洿鏂板畬鎴愬悗鍐嶆坊鍔犳柊鐨勫瓙缁�
+ await nextTick()
+ if (trigger.value.conditionGroups) {
+ trigger.value.conditionGroups.push([])
+ }
+}
+
+/**
+ * 绉婚櫎瀛愭潯浠剁粍
+ * @param index 瀛愭潯浠剁粍绱㈠紩
+ */
+const removeSubGroup = (index: number) => {
+ if (trigger.value.conditionGroups) {
+ trigger.value.conditionGroups.splice(index, 1)
+ }
+}
+
+/**
+ * 鏇存柊瀛愭潯浠剁粍
+ * @param index 瀛愭潯浠剁粍绱㈠紩
+ * @param subGroup 瀛愭潯浠剁粍鏁版嵁
+ */
+const updateSubGroup = (index: number, subGroup: any) => {
+ if (trigger.value.conditionGroups) {
+ trigger.value.conditionGroups[index] = subGroup
+ }
+}
+
+/** 绉婚櫎鏁翠釜鏉′欢缁� */
+const removeConditionGroup = () => {
+ trigger.value.conditionGroups = undefined
+}
+</script>
--
Gitblit v1.8.0