feat(设备配置): 添加区域范围配置和时间单位选择功能

- 在设备详情页面添加xStart、xEnd、yStart、yEnd坐标范围配置
- 为设备区域配置组件新增ranges属性传递坐标范围
- 在报警计划模态框中添加时间单位选择器（秒/分钟/小时/天）
- 修改日期选择器格式为YYYY-MM-DD，时间选择器格式为HH:mm

src/views/device/detail/components/alarmPlanModal/index.vue

@@ -55,7 +55,16 @@
             show-count
             allow-clear
             style="width: 100%"
-          />
+          >
+            <template #addonAfter>
+              <a-select v-model:value="thresholdTimeFormat" style="width: 80px">
+                <a-select-option value="s">秒</a-select-option>
+                <a-select-option value="min">分钟</a-select-option>
+                <a-select-option value="hour">小时</a-select-option>
+                <a-select-option value="day">天</a-select-option>
+              </a-select>
+            </template>
+          </a-input-number>
         </a-form-item>
 
         <a-form-item
@@ -128,7 +137,16 @@
                     show-count
                     allow-clear
                     style="width: 100%"
-                  />
+                  >
+                    <template #addonAfter>
+                      <a-select v-model:value="timeThresholdFormat" style="width: 80px">
+                        <a-select-option value="s">秒</a-select-option>
+                        <a-select-option value="min">分钟</a-select-option>
+                        <a-select-option value="hour">小时</a-select-option>
+                        <a-select-option value="day">天</a-select-option>
+                      </a-select>
+                    </template>
+                  </a-input-number>
                 </a-form-item>
               </div>
             </div>
@@ -143,8 +161,8 @@
           <a-range-picker
             v-model:value="formState.planTime"
             style="width: 100%"
-            show-time
-            valueFormat="YYYY-MM-DD HH:mm:ss"
+            :show-time="false"
+            valueFormat="YYYY-MM-DD"
           />
         </a-form-item>
 
@@ -152,7 +170,8 @@
           <div style="display: flex; align-items: center; gap: 8px">
             <a-time-range-picker
               v-model:value="formState.effectTimeFrame"
-              valueFormat="HH:mm:ss"
+              valueFormat="HH:mm"
+              format="HH:mm"
               style="width: 100%"
             />
             <a-button size="small" type="link" @click="addEffectTime">添加</a-button>
@@ -323,6 +342,9 @@ const formState = reactive<FormState>({
   timeThreshold: 300,
 })
 
+const thresholdTimeFormat = ref<'s' | 'min' | 'hour' | 'day'>('s') // 触发阈值 额外选择器
+const timeThresholdFormat = ref<'s' | 'min' | 'hour' | 'day'>('s') // 异常消失时间阈值 额外选择器
+
 const plainOptions = ref<(number | string)[]>(weekOptions)
 const checkState = reactive({
   indeterminate: true,
@@ -545,6 +567,30 @@ const fetchEventTypeList = async () => {
 }
 fetchEventTypeList()
 
+function thresholdTimeFormatValue() {
+  if (thresholdTimeFormat.value === 's') {
+    return Number(formState.thresholdTime) // 触发阈值
+  } else if (thresholdTimeFormat.value === 'min') {
+    return Number(formState.thresholdTime) * 60 // 触发阈值
+  } else if (thresholdTimeFormat.value === 'hour') {
+    return Number(formState.thresholdTime) * 60 * 60 // 触发阈值
+  } else if (thresholdTimeFormat.value === 'day') {
+    return Number(formState.thresholdTime) * 24 * 60 * 60 // 触发阈值
+  }
+}
+
+function timeThresholdFormatValue() {
+  if (timeThresholdFormat.value === 's') {
+    return Number(formState.timeThreshold) // 触发阈值
+  } else if (timeThresholdFormat.value === 'min') {
+    return Number(formState.timeThreshold) * 60 // 触发阈值
+  } else if (timeThresholdFormat.value === 'hour') {
+    return Number(formState.timeThreshold) * 60 * 60 // 触发阈值
+  } else if (timeThresholdFormat.value === 'day') {
+    return Number(formState.timeThreshold) * 24 * 60 * 60 // 触发阈值
+  }
+}
+
 const submitLoading = ref(false)
 // 确定
 const submit = () => {
@@ -571,9 +617,7 @@ const submit = () => {
         console.log('🔥paramData🔥', paramData)
       } else if ([9].includes(formState.eventType as number)) {
         paramData = {
-          time_threshold: isNaN(Number(formState.timeThreshold))
-            ? 0
-            : Number(formState.timeThreshold),
+          time_threshold: isNaN(Number(formState.timeThreshold)) ? 0 : timeThresholdFormatValue(),
         }
         console.log('🔥paramData🔥', paramData)
       }
@@ -583,7 +627,7 @@ const submit = () => {
         clientId: props.clientId, // 设备ID
         name: formState.planName, // 计划名称
         remark: formState.remark || '', // 备注
-        thresholdTime: Number(formState.thresholdTime) || 300, // 触发阈值
+        thresholdTime: thresholdTimeFormatValue(), // 触发阈值
         mergeTime: Number(formState.mergeTime) || 30, // 归并时间
         eventVal: formState.eventType as number, // 事件类型 与 param 有联动关系
         param: JSON.stringify(paramData), // 事件参数 与 eventVal 有联动关系

src/views/device/detail/components/deviceAreaConfig/index.vue

@@ -375,6 +375,7 @@ type Props = {
   // x,y的范围，用于初始化画布的大小
   length: number
   width: number
+  ranges: number[] // 区域范围
 }
 const emit = defineEmits<{
   (e: 'success', value: void): void
@@ -383,6 +384,7 @@ const props = withDefaults(defineProps<Props>(), {
   devId: '',
   length: 0, // 区域宽度
   width: 0, // 区域高度
+  ranges: () => [], // 区域范围
 })
 
 const deviceRoomId = ref('')

src/views/device/detail/components/deviceConfig/index.vue

@@ -28,6 +28,7 @@
         :dev-id="props.data.devId"
         :length="props.data.length"
         :width="props.data.width"
+        :ranges="[props.data.xStart, props.data.xEnd, props.data.yStart, props.data.yEnd]"
         @success="deviceAreaConfigSuccess"
       ></deviceAreaConfig>
     </template>
@@ -52,6 +53,10 @@ type Props = {
     clientId: string
     length: number
     width: number
+    xStart: number
+    xEnd: number
+    yStart: number
+    yEnd: number
   }
 }
 
@@ -68,6 +73,10 @@ const props = withDefaults(defineProps<Props>(), {
     clientId: '',
     length: 0,
     width: 0,
+    xStart: 0,
+    xEnd: 0,
+    yStart: 0,
+    yEnd: 0,
   }),
 })
 

src/views/device/detail/index.vue

@@ -270,6 +270,10 @@
           clientId: (detailState.clientId as string) || '',
           length: (detailState.length as number) || 0,
           width: (detailState.width as number) || 0,
+          xStart: (detailState.xxStart as number) || 0,
+          xEnd: (detailState.xxEnd as number) || 0,
+          yStart: (detailState.yyStart as number) || 0,
+          yEnd: (detailState.yyEnd as number) || 0,
         }"
         :mode="configDrawerMode"
         :room-id="deviceRoomId"