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 {
  asyncTimeout,
  base64ToBlob,
  blobToBase64,
  debounce,
  getId,
} from "@/utils";
import { watch } from "vue";
import { genUseLoading, params } from "@/hook";
import router, { writeRouteName } from "@/router";
import { baseURL } from "@/dbo/main";
import { defaultUses, uses } from "@/store/SVGLabel";
import { imageRotate } from "@/utils/image-rotate";
import { sceneSeting } from "./sceneSeting";
import { tables } from "./tables";
import { drawSetting } from "./drawSetting";
import { Pos3D } from "@/sdk";
import { reshootData } from "./reshoot";

const global = window as any;

const getFilesIng = [];
const getFilesSuccess = [];
setInterval(() => {
  if (getFilesSuccess.length !== getFilesIng.length) {
    console.log(
      "请求资源数：" + getFilesIng.length,
      "响应结果数：" + getFilesSuccess.length
    );
    console.log(
      "未返回资源：" +
        getFilesIng.filter((url) => !getFilesSuccess.includes(url))
    );
  }
  // console.log(getFilesSuccess, getFilesIng);
}, 1000);
const normalImage = async (url: string) => {
  const getUrl = await api.getFile(url);
  const blob = await imageRotate(getUrl);
  if (!blob) {
    return url;
  } else {
    return await api.uploadImage(new File([blob], getId()));
  }
};

console.log("进入初始化sync count为" + global.count);
if (!global.count) {
  global.count = 0;
}

export const api = !global.android
  ? // true
    // const api = import.meta.env.DEV
    {
      async setStore(data) {
        console.log("setStore");
        return axios.post("sceneStore", data);
      },
      async getStore() {
        return (await axios.get("/attach/sceneStore")).data;
      },
      async uploadImage(file) {
        return (
          await axios({
            url: "/upload",
            headers: { "Content-Type": "multipart/form-data" },
            method: "post",
            data: { file },
          })
        ).data.data as string;
      },
      async downloadImage(file) {
        window.open(URL.createObjectURL(file));
        return true;
      },
      async shareImage(filename: string) {
        await window.open(await api.getFile(filename));
      },
      async getFile(url) {
        try {
          const urlRaw = url;
          getFilesIng.push(urlRaw);

          if (url.includes(baseURL)) {
            url = url.substring(baseURL.length);
          }
          url = url.trim();
          const paths = url.split("/");
          const notBase64BaseTypes = [".png", ".jpg"];
          const notBase64 = notBase64BaseTypes.some((type) =>
            paths[paths.length - 1].includes(type)
          );
          if (notBase64) {
            getFilesSuccess.push(urlRaw);
            // await new Promise((resolve) => setTimeout(resolve, 2000));
            console.error(baseURL + url);
            return baseURL + url;
          } else {
            const data = await axios.get(url, { responseType: "blob" });
            const base64 = await blobToBase64(data.data);
            getFilesSuccess.push(urlRaw);
            return URL.createObjectURL(base64ToBlob(base64));
          }
        } catch (e) {
          console.error("获取文件失败 url:", url);
          throw e;
        }
      },
      async photograph(rotate = true) {
        const file = await new Promise<File>((resolve) => {
          const input = document.createElement("input");
          input.type = "file";
          input.click();
          input.addEventListener("change", (ev) => {
            resolve(input.files[0]);
          });
        });

        const url = await this.uploadImage(file);
        return rotate ? await normalImage(url) : url;
      },
      async selectPhotoAlbum(rotate = true) {
        return await this.photograph(rotate);
      },
      async closePage() {
        return router.push({ name: writeRouteName.scene });
      },
      async reshoot(pos: Pos3D) {
        console.log("reshoot参数：");
        console.log(JSON.stringify(pos));
        await asyncTimeout(1000);
        return { position: pos, image: "/images/1761892155839_0_pano_0.jpg" };
      },
      async delPano() {},
    }
  : {
      delPano(data: any) {
        return new Promise((resolve) => {
          global.delPanoCallback = (data) => {
            delete global.delPanoCallback;
            resolve(data);
          };
          global.android.delPano(JSON.stringify(data), "delPanoCallback");
        });
      },
      reshoot(pos: Pos3D) {
        return new Promise((resolve) => {
          global.reshootCallback = (data) => {
            delete global.reshootCallback;
            resolve(data);
          };
          global.android.reshoot(JSON.stringify(pos), "reshootCallback");
        });
      },
      shareImage(filename: string) {
        return new Promise((resolve) => {
          global.shareImageCallback = (data) => {
            delete global.shareImageCallback;
            resolve(data);
          };
          global.android.shareImage(filename, "shareImageCallback");
        });
      },
      setStore(data) {
        return new Promise((resolve) => {
          global.setSceneStoreCallback = (data) => {
            resolve(data);
          };
          global.android.setSceneStore(
            params.m + "/store.json",
            JSON.stringify(data),
            "setSceneStoreCallback"
          );
        });
      },
      getStore() {
        return new Promise((resolve) => {
          global.getSceneStoreCallback = (data) => {
            resolve(data);
          };
          global.android.getSceneStore(
            params.m + "/store.json",
            "getSceneStoreCallback"
          );
        });
      },
      // genUseLoading()
      async getFile(fileUrl: string) {
        const urlRaw = fileUrl;
        getFilesIng.push(urlRaw);
        fileUrl = fileUrl.trim();
        if (fileUrl.includes(params.m)) {
          fileUrl = fileUrl.substring(
            fileUrl.indexOf(params.m) + params.m.length
          );
        }
        fileUrl = new URL(fileUrl, "http://www.a.com").pathname;
        fileUrl = (params.realPath || params.m) + fileUrl;

        const paths = fileUrl.split("/");
        const notBase64BaseTypes = [
          // ".png", ".jpg"
          // , ".bin"
        ];
        const notBase64 = notBase64BaseTypes.some((type) =>
          paths[paths.length - 1].includes(type)
        );

        if (!notBase64) {
          return await new Promise<string>((resolve) => {
            const apiName = `getImageCallback${global.count++}`;
            global[apiName] = (base64) => {
              getFilesSuccess.push(urlRaw);
              try {
                resolve(URL.createObjectURL(base64ToBlob(base64)));
              } catch (e) {
                console.error(
                  "getFile 失败 获取url：",
                  fileUrl,
                  "获取结果:",
                  base64
                );
              }
              delete global[apiName];
            };
            global.android.getImage(fileUrl, apiName);
          });
        } else {
          getFilesSuccess.push(urlRaw);
          return fileUrl;
        }
      },
      uploadImage(file: File) {
        return new Promise<string>(async (resolve) => {
          const apiName = `uploadImageCallback${global.count++}`;
          global[apiName] = (data) => {
            resolve(data);
            delete global[apiName];
          };
          const data = await blobToBase64(file);
          global.android.uploadImage(
            params.m + "/attach/upload/" + file.name,
            data,
            apiName
          );
        });
      },
      downloadImage(file: File) {
        return new Promise<boolean>(async (resolve) => {
          const apiName = `downloadImageCallback${global.count++}`;
          console.log("download ing fileName ", file.name, "apiName ", apiName);
          global[apiName] = () => {
            console.log("download success fileName", file.name);
            resolve(true);
            delete global[apiName];
          };
          const data = await blobToBase64(file);
          // file为base64
          global.android.downloadImage(file.name, data, apiName);
        });
      },
      photograph(rotate = true) {
        return new Promise<string>((resolve) => {
          const apiName = `photograph${global.count++}`;
          global[apiName] = (data) => {
            data
              ? rotate
                ? normalImage(data).then(resolve)
                : resolve(data)
              : resolve(null);
            delete global[apiName];
          };
          global.android.cameraPhotograph(params.m, apiName);
        });
      },
      selectPhotoAlbum(rotate = true) {
        return new Promise<string>((resolve) => {
          const apiName = `selectPhotoAlbum${global.count++}`;
          global[apiName] = (data) => {
            data
              ? rotate
                ? normalImage(data).then(resolve)
                : resolve(data)
              : resolve(null);
            delete global[apiName];
          };
          global.android.selectPhotoAlbum(params.m, apiName);
        });
      },
      closePage() {
        return new Promise((resolve) => {
          global.closeWebViewCallback = resolve;
          global.android.closeWebView("closeWebViewCallback");
        });
      },
    };

export const back = () => {
  api.closePage();
};

const loadStore = async () => {
  const data: any = await api.getStore();
  if (params.temp) {
    try {
      const str = await api.getFile("panoReshot.json");
      const data = await (await fetch(str).then()).text();
      reshootData.value = JSON.parse(data).map((item) => ({
        ...item,
        position: JSON.parse(item.position),
      }));
    } catch (e) {
      console.error(e);
      reshootData.value = [];
    }
  }
  list.value = data?.measures || [];
  baseLines.value = data?.baseLines || [];
  basePoints.value = data?.basePoints || [];
  sceneSeting.value = data?.sceneSeting;
  fixPoints.value = data?.fixPoints || [];
  photos.value = data?.photos || [];
  accidentPhotos.value = data?.accidentPhotos || [];
  roadPhotos.value = data?.roadPhotos || [];
  uses.value = data?.uses || defaultUses;
  tables.value = data?.tables || {};
  drawSetting.value = data?.drawSetting || {};
  syncSceneStore();
};

export const updateSceneStore = debounce(api.setStore, 300);
export const uploadImage = (blob: Blob, name = `${getId()}.jpg`) => {
  const file = new File([blob], name);
  return api.uploadImage(file);
};

export const reshoot = (pos: Pos3D) => api.reshoot(pos);

export const downloadImage = async (
  data: Blob | string,
  name = `${getId()}.jpg`
) => {
  const blob: Blob =
    typeof data === "string"
      ? (await axios.get(data, { responseType: "blob" })).data
      : data;
  const file = new File([blob], name, { type: "image/jpeg" });

  return await api.downloadImage(file);
};

const syncSceneStore = () => {
  return watch(
    () => ({
      measures: list.value,
      baseLines: baseLines.value,
      sceneSeting: sceneSeting.value,
      basePoints: basePoints.value,
      fixPoints: fixPoints.value,
      photos: photos.value,
      uses: uses.value,
      accidentPhotos: accidentPhotos.value,
      roadPhotos: roadPhotos.value,
      tables: tables.value,
      drawSetting: drawSetting.value,
    }),
    (data) => {
      console.error("收到数据源更新");
      updateSceneStore(data);
    },
    { deep: true, flush: "sync" }
  );
};
loadStore().catch((e) => {
  console.error(e);
  alert("场景数据加载失败");
});