traffic-laser/src/store/sync.ts

import axios from '@/dbo/main'
import { list } from "@/store/measure";
import {baseLines} from "@/store/baseLine";
import {basePoints} from "@/store/basePoint";
import {fixPoints} from "@/store/fixPoint";
import {photos} from "@/store/photos";
import {accidentPhotos} from "@/store/accidentPhotos";
import {roadPhotos} from "@/store/roadPhotos";
import {debounce, getId} from '@/utils'
import {watch} from "vue";

axios.get("/attach/sceneStore")
  .then((data) => {
    if (data.status === 200) {
      list.value = data.data.measures || []
      baseLines.value = data.data.baseLines || []
      basePoints.value = data.data.basePoints || []
      fixPoints.value = data.data.fixPoints || []
      photos.value = data.data.photos || []
      accidentPhotos.value = data.data.accidentPhotos || []
      roadPhotos.value = data.data.roadPhotos || []
    }

    // roadPhotos.value.map(data => {
    //   data.url = data.photoUrl
    // })
    // accidentPhotos.value.map(data => {
    //   data.url = data.photoUrl
    // })

    syncSceneStore()
  })

export const updateSceneStore = debounce((data) => {
  axios.post("sceneStore", data)
}, 1000)

export const uploadImage = async (blob: Blob) => {
  const file = new File([blob], `${getId()}.jpg`)
  const res = await axios({
    url: "/upload",
    headers: { "Content-Type": "multipart/form-data" },
    method: 'post',
    data: { file }
  });
  return res.data.data
}

export const downloadImage = async (data: Blob | string, name: string = getId()) => {
  const blob: Blob = typeof data === "string"
    ? (await axios.get(data, { responseType: "blob" })).data
    : data

  if (import.meta.env.DEV) {
    window.open(URL.createObjectURL(blob))
  } else {
    const file = new File([blob], name)
  }
}

const syncSceneStore = () => {
  return watch(
    () => ({
      measures: list.value,
      baseLines: baseLines.value,
      basePoints: basePoints.value,
      fixPoints: fixPoints.value,
      photos: photos.value,
      accidentPhotos: accidentPhotos.value,
      roadPhotos: roadPhotos.value
    }),
    (data) => {
      updateSceneStore(data)
    },
    { deep: true }
  )
}