sl-sfy-safety/src/views/cameras/preview/components/AlgorithmsSetting/AlgoSettingCard.vue

<template>
  <div class="algoCardWrapper">
    <div class="algoCardTitle">
      <div>{{ selectedAlgoDetail?.algoInfo?.name }}</div>
      <ElSwitch v-model="selectedAlgoDetail.enableCardBool" size="small" />
    </div>
    <div class="algoCardMain">
      <div class="algoRow">
        <div class="algoLabel">电子围栏:</div>
        <div>
          <div>
            <ElSwitch v-model="selectedAlgoDetail.electronicFenceBool" size="small" />
            <span style="font-size: 10px; margin-left: 20px; color: #262626"
              >备注：请绘制电子围栏</span
            >
          </div>
          <div class="presetList"> 预置位1 预置位2 预置位3 </div>
        </div>
      </div>
      <div class="algoRow">
        <div class="algoLabel">检测时间:</div>
        <div>
          <div v-for="x in selectedAlgoDetail.timeRangeArr" :key="x.id">
            <el-time-picker
              v-model="x.value"
              is-range
              range-separator="-"
              start-placeholder="Start time"
              end-placeholder="End time"
              :clearable="false"
              size="small"
              style="width: 180px; margin-bottom: 10px"
            />
            <span @click="removeTime(x.id)" v-if="selectedAlgoDetail.timeRangeArr.length > 1">
              <el-icon class="removeIcon"><CircleCloseFilled /></el-icon
            ></span>
          </div>
          <div @click="handleAddTimeRange" class="addTimeIcon">
            <img :src="addTimeIcon" width="28" height="28" />
          </div>
        </div>
      </div>
      <div class="algoRow" style="align-items: center">
        <div class="algoLabel">检测频率:</div>
        <ElInputNumber
          v-model="selectedAlgoDetail.detectionJSON.detectionNum"
          controls-position="right"
          :min="0"
          size="small"
          style="width: 80px"
        />
        <ElSelect
          size="small"
          style="width: 60px; margin-left: 10px"
          v-model="selectedAlgoDetail.detectionJSON.detectionUnit"
        >
          <ElOption
            v-for="x in frequencyOptions"
            :key="x.value"
            :value="x.value"
            :label="x.label"
          />
        </ElSelect>
        <span style="font-size: 12px; margin-left: 5px">/次</span>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <ElButton size="small" @click="handleRemoveAlgo" :disabled="!selectedAlgoId">删除</ElButton>
        <ElButton size="small" type="primary" @click="handleSave" :disabled="!selectedAlgoId"
          >保存</ElButton
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ElSelect, ElOption, ElSwitch, ElInputNumber, ElTimePicker } from 'element-plus';
  import { CircleCloseFilled } from '@element-plus/icons-vue';
  import { ref, watch } from 'vue';
  import { storeToRefs } from 'pinia';
  import dayjs, { Dayjs } from 'dayjs';
  import addTimeIcon from '@/assets/icons/addTimeIcon.png';
  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
  import { STATUS, TimeRangeItem } from './types';
  import {
    FrequencyEnum,
    createDefaultTime,
    frequencyOptions,
    getDetectionJSON,
    getDetectionTimeJSON,
  } from './utils';

  // const { data: algoList, loading } = useAllAlgos();
  const cameraAlgoStore = useCameraAlgoStore();
  const { selectedAlgoId, selectedAlgoDetail } = storeToRefs(cameraAlgoStore);

  interface Param {
    /** 算法id */
    algoId: number;
    /** 检测频率，单位是秒 */
    detectionFrequency: number;
    /** 检测时间段，可以有多个，转化为字符串，格式为 09:00-10:00;11:00-12:00 */
    detectionTime: string;
    /** 电子围栏是否开启 */
    electronicFence: STATUS;
    /** 算法是否启用 */
    status: STATUS;
  }

  const emits = defineEmits<{
    (e: 'onSubmit', param: Param): Promise<unknown>;
    (e: 'onRemove', algoId: number): Promise<unknown>;
  }>();

  const handleAddTimeRange = () => {
    selectedAlgoDetail.value.timeRangeArr.push(createDefaultTime());
  };

  const removeTime = (id: string) => {
    const timeRangeArr = selectedAlgoDetail.value.timeRangeArr;
    selectedAlgoDetail.value.timeRangeArr = timeRangeArr.filter((x) => x.id !== id);
  };

  const getTimeStr = (d: Dayjs) => {
    return dayjs(d).format('HH:mm:ss');
  };
  const getTimeStrs = (d: [Dayjs, Dayjs]) => {
    return getTimeStr(d[0]) + '-' + getTimeStr(d[1]);
  };

  const handleSave = () => {
    const detail = selectedAlgoDetail.value;
    if (!detail) return;
    const param = {
      id: detail.id,
      algoId: detail.algoId,
      detectionFrequency: detail.detectionJSON.detectionNum * detail.detectionJSON.detectionUnit,
      detectionTime: detail.timeRangeArr
        .map((x) => {
          return getTimeStrs(x.value);
        })
        .join(';'),
      electronicFence: detail.electronicFenceBool ? STATUS.enabled : STATUS.disabled,
      status: detail.enableCardBool ? STATUS.enabled : STATUS.disabled,
    };
    emits('onSubmit', param);
    console.log('param', param);
  };

  const handleRemoveAlgo = () => {
    if (!selectedAlgoId.value) return;
    emits('onRemove', selectedAlgoId.value);
  };
</script>
<style scoped>
  .algoCardWrapper {
    border: 1px solid #ccc;
    border-radius: 4px;
    /* padding: 10px; */
    width: 400px;
  }

  .algoRow {
    display: flex;
    margin: 10px 0;
  }

  .algoLabel {
    margin-right: 10px;
  }
  .presetList {
    font-size: 12px;
    display: none;
  }
  .removeIcon {
    margin-left: 10px;
    color: #8c8c8c;
    cursor: pointer;
  }

  .addTimeIcon {
    cursor: pointer;
  }

  .algoCardTitle {
    background: #f0f2f5;
    display: flex;
    justify-content: space-between;
    padding: 4px 20px;
    align-items: center;
  }

  .algoCardMain {
    padding: 10px 20px;
  }
</style>