sl-sfy-safety/src/modules/algo-params-setting-base/store/useFenceStore.ts

import { GetFenceParams, getFenceApi, UpdateBatchCameraFenceParam } from '@/api/camera/camera-preview';
import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import { ServerLine, ServerLineInfos } from '../components/FenceEditor/constants';
import safeParse from '@/utils/safeParse';
import { ElMessage, ElMessageBox } from 'element-plus';
import { updateBatchCameraFenceApi } from '@/api/camera/camera-preview';
/** 当前电子围栏的store */
export const useFenceStore = defineStore('fencePolygonStore', () => {
  /** 初始的电子围栏。用于取消时恢复数据 */
  const initialFence = ref<ServerLineInfos>([]);
  /** 当前相机-预置位-算法对应的所有的电子围栏 */
  const allFences = ref<ServerLineInfos>(initialFence.value);

  /** 当前正在操作的电子围栏id */
  const currentFenceId = ref<number | null>(null);

  /** 电子围栏的分组id */
  const currentFenceGroupId = ref<number | null>(null);

  const loading = ref(false);

  // 是否展示电子围栏的工具栏
  const showFenceTool = ref(false);

  /** 电子围栏参数是否修改过 */
  const isChanged = computed(() => JSON.stringify(initialFence.value) !== JSON.stringify(allFences.value));

  /** 获取电子围栏 */
  const getFence = (param: GetFenceParams) => {
    loading.value = true;
    if (!param.algoId || !param.cameraId || !param.presetToken) return;
    return getFenceApi(param)
      .then((res) => {
        currentFenceGroupId.value = res?.id;
        const fence = res?.electronicFencePolygon
          ? (JSON.parse(res?.electronicFencePolygon) as [])
          : ([] as { polygon: string }[]);
        // const pointsJSON = points.poly
        const newFence = fence.map((x) => {
          return { ...x, polygon: typeof x.polygon === 'string' ? (safeParse(x.polygon) as ServerLine) : x.polygon };
        }) as unknown as ServerLineInfos;
        allFences.value = newFence;
        initialFence.value = newFence;
      })
      .catch(() => {
        currentFenceId.value = null;
        allFences.value = [];
      })
      .finally(() => {
        loading.value = false;
        currentFenceId.value = null;
      });
  };

  const clear = () => {
    allFences.value = [];
    initialFence.value = [];
    currentFenceId.value = null;
    currentFenceGroupId.value = null;
    showFenceTool.value = false;
  };

  /** 重置到修改前的状态 */
  const reset = () => {
    allFences.value = initialFence.value;
  };

  /** 确认是否要离开电子围栏 */
  const confirmExitFence = (): Promise<unknown> => {
    if (isChanged.value) {
      return ElMessageBox.confirm('电子围栏设置未保存，离开后无法保存设置内容。', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
      }).then(() => {
        return Promise.resolve();
      });
    } else {
      return Promise.resolve();
    }
  };

  /** 本地电子围栏数据保存到后端 */
  const updateBatchCameraFence = (data: UpdateBatchCameraFenceParam) => {
    updateBatchCameraFenceApi(data).then(() => {
      // 保存成功后初始值要和当前值保持一致，避免触发confirmExitFence逻辑
      initialFence.value = allFences.value;
      ElMessage.success('保存成功');
    });
  };

  return {
    allFences,
    isChanged,
    currentFenceId,
    currentFenceGroupId,
    initialFence,
    clear,
    showFenceTool,
    getFence,
    reset,
    confirmExitFence,
    updateBatchCameraFence,
  };
});

export default useFenceStore;