算法配置成功

src/views/cameras/preview/CameraPreview.vue

@@ -46,7 +46,8 @@
 
   .algorithmsSetting {
     flex: 1;
-    border: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    padding-left: 20px;
   }
   .cameraMain {
     display: flex;

src/views/cameras/preview/components/AlgorithmsSetting/AlgoSettingCard.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="algoCardWrapper">
-    <div style="display: flex; justify-content: space-between">
-      <ElSelect v-model="selectedAlgoId" style="width: 150px">
+    <div class="algoCardTitle">
+      <ElSelect v-model="selectedAlgoId" style="width: 150px" size="small">
         <ElOption v-for="item in allAlgoList" :key="item.id" :value="item.id" :label="item.name">
           {{ item.name }}
           <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
         </ElOption>
       </ElSelect>
-      <ElSwitch v-model="enableCard" />
+      <ElSwitch v-model="enableCard" size="small" />
     </div>
-    <div>
+    <div class="algoCardMain">
       <div class="algoRow">
         <div class="algoLabel">电子围栏:</div>
         <div>
@@ -36,7 +36,6 @@
               :clearable="false"
               size="small"
               style="width: 180px; margin-bottom: 10px"
-              @change="handleTimeChange(x.id, $event)"
             />
             <span @click="removeTime(x.id)" v-if="timeRangeArr.length > 1">
               <el-icon class="removeIcon"><CircleCloseFilled /></el-icon
@@ -79,11 +78,17 @@
   import { CircleCloseFilled } from '@element-plus/icons-vue';
   import { ref, watch } from 'vue';
   import { storeToRefs } from 'pinia';
-  import { Dayjs } from 'dayjs';
+  import dayjs, { Dayjs } from 'dayjs';
   import addTimeIcon from '@/assets/icons/addTimeIcon.png';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
-  import { STATUS } from './types';
-  import { FrequencyEnum, createDefaultTime, frequencyOptions, getDetectionJSON } from './utils';
+  import { STATUS, TimeRangeItem } from './types';
+  import {
+    FrequencyEnum,
+    createDefaultTime,
+    frequencyOptions,
+    getDetectionJSON,
+    getDetectionTimeJSON,
+  } from './utils';
 
   // const { data: algoList, loading } = useAllAlgos();
   const cameraAlgoStore = useCameraAlgoStore();
@@ -108,7 +113,7 @@
     (e: 'onRemove', algoId: number): Promise<unknown>;
   }>();
 
-  const timeRangeArr = ref([createDefaultTime()]);
+  const timeRangeArr = ref<TimeRangeItem[]>([createDefaultTime()]);
 
   const detectionUnit = ref(FrequencyEnum.miniute);
 
@@ -128,6 +133,7 @@
       electronicFence.value = Boolean(detail?.electronicFence);
       detectionNum.value = detectionJSON.detectionNum;
       detectionUnit.value = detectionJSON.detectionUnit;
+      timeRangeArr.value = getDetectionTimeJSON(detail?.detectionTime) || [createDefaultTime()];
     },
     { deep: true, immediate: true },
   );
@@ -136,16 +142,12 @@
     timeRangeArr.value.push(createDefaultTime());
   };
 
-  const handleTimeChange = (...rest) => {
-    console.log(timeRangeArr);
-  };
-
   const removeTime = (id: string) => {
     timeRangeArr.value = timeRangeArr.value.filter((x) => x.id !== id);
   };
 
   const getTimeStr = (d: Dayjs) => {
-    return d.format('HH:mm:ss');
+    return dayjs(d).format('HH:mm:ss');
   };
   const getTimeStrs = (d: [Dayjs, Dayjs]) => {
     return getTimeStr(d[0]) + '-' + getTimeStr(d[1]);
@@ -179,13 +181,13 @@
   .algoCardWrapper {
     border: 1px solid #ccc;
     border-radius: 4px;
-    padding: 10px;
+    /* padding: 10px; */
     width: 400px;
   }
 
   .algoRow {
     display: flex;
-    margin: 10px;
+    margin: 10px 0;
   }
 
   .algoLabel {
@@ -203,4 +205,15 @@
   .addTimeIcon {
     cursor: pointer;
   }
+
+  .algoCardTitle {
+    background: #f0f2f5;
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 20px;
+  }
+
+  .algoCardMain {
+    padding: 10px 20px;
+  }
 </style>

src/views/cameras/preview/components/AlgorithmsSetting/AlgorithmsSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>算法配置</div>
+    <div style="font-size: 12px; font-weight: bold">算法配置</div>
     <div style="display: flex">
       <div style="width: 200px">
         <AlgoTag
@@ -18,7 +18,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { onMounted } from 'vue';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import AlgoSettingCard from './AlgoSettingCard.vue';
   import { storeToRefs } from 'pinia';

src/views/cameras/preview/components/AlgorithmsSetting/types.ts

@@ -1,4 +1,11 @@
+import { Dayjs } from 'dayjs';
+
 export enum STATUS {
   enabled = 1,
   disabled = 0,
 }
+
+export interface TimeRangeItem {
+  id: string;
+  value: [Dayjs, Dayjs];
+}

src/views/cameras/preview/components/AlgorithmsSetting/utils.ts

@@ -1,7 +1,8 @@
 import dayjs, { Dayjs } from 'dayjs';
 import { uid } from 'uid';
+import { TimeRangeItem } from './types';
 
-export const createDefaultTime = () => {
+export const createDefaultTime = (): TimeRangeItem => {
   return { id: uid(), value: [dayjs(), dayjs().add(1, 'hour')] as [Dayjs, Dayjs] };
 };
 
@@ -16,7 +17,7 @@ export const frequencyOptions = [
   { label: '分钟', value: FrequencyEnum.miniute },
   { label: '小时', value: FrequencyEnum.hour },
 ];
-/** 根据后端返回的时间，拆分成单位和数值 */
+/** 根据后端返回的时间(单位是秒)，拆分成单位和数值 */
 export const getDetectionJSON = (time: number | undefined | null) => {
   if (time && time > 0) {
     for (let i = frequencyOptions.length - 1; i >= 0; i--) {
@@ -28,3 +29,18 @@ export const getDetectionJSON = (time: number | undefined | null) => {
   }
   return { detectionNum: 5, detectionUnit: FrequencyEnum.miniute };
 };
+
+export const getDetectionTimeJSON = (time?: string): TimeRangeItem[] | null => {
+  if (!time) return null;
+  const timeArr = time.split(';');
+  const nowStr = dayjs().format('YYYY-MM-DD');
+  const timeStrArr = timeArr
+    .map((x) => {
+      const [startDate, endDate] = x.split('-');
+      return [dayjs(`${nowStr} ${startDate}`), dayjs(`${nowStr} ${endDate}`)] as [Dayjs, Dayjs];
+    })
+    .map((x) => {
+      return { id: uid(), value: x };
+    });
+  return timeStrArr;
+};