兼容高密度设备

src/components/photos/header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="photos-header">
     <div>
-      <ui-icon type="close" ctrl style="margin-right: 10px" @click="router.back" />
+      <ui-icon type="close" ctrl style="margin-right: 10px" @click="() => onBack ? onBack() : back()" />
       <span>{{ title }}</span>
     </div>
     <span class="center" v-if="count">
@@ -15,9 +15,9 @@
 
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
-import {router} from '@/router'
+import {back} from "@/store/sync";
 
-defineProps<{ count?: number, title: string }>()
+defineProps<{ count?: number, title: string, onBack?: () => void }>()
 </script>
 
 <style lang="scss" scoped>

src/graphic/Settings.js

@@ -1,5 +1,7 @@
 import Constant from "./Constant";
 import VectorCategory from "./enum/VectorCategory";
+import { os } from '@/utils/index.js'
+
 const Settings = {
   roadLeftDrivewayCount: 1,
   roadRightDrivewayCount: 1,
@@ -22,6 +24,6 @@ const Settings = {
   locationMode: Constant.angleLocationMode,
   baseLineId: null, //基准线id，有且只有一条
   selectBasePointId: null, //选中的基准点
-  isMobile: false,
+  isMobile: !os.isPc,
 };
 export default Settings;

src/store/sync.ts

@@ -8,54 +8,84 @@ import {accidentPhotos} from "@/store/accidentPhotos";
 import {roadPhotos} from "@/store/roadPhotos";
 import {debounce, getId} from '@/utils'
 import {watch} from "vue";
+import {params} from "@/hook";
+import router from "@/router";
 
-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 || []
+const global = window as any
+const api = import.meta.env.DEV && !global.android
+  ? {
+      async setStore(data) {
+        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
+      },
+      async downloadImage(file) {
+        window.open(URL.createObjectURL(file))
+      },
+      closePage() {
+
+      }
     }
+  : {
+    async setStore(data) {
+      global.android.setSceneStore(params.m, data)
+    },
+    async getStore() {
+      return global.android.getSceneStore(params.m)
+    },
+    async uploadImage(file) {
+      return global.android.uploadImage(params.m, file)
+    },
+    async downloadImage(file) {
+      global.android.downloadImage(params.m, file)
+    },
+    closePage() {
 
-    // roadPhotos.value.map(data => {
-    //   data.url = data.photoUrl
-    // })
-    // accidentPhotos.value.map(data => {
-    //   data.url = data.photoUrl
-    // })
+    }
+  }
 
-    syncSceneStore()
-  })
+export const back = () => {
+  if (history.state.back) {
+    router.back()
+  } else {
+    api.closePage()
+  }
+}
+
+const loadStore = async () => {
+  const data = await api.getStore()
+  list.value = data?.measures || []
+  baseLines.value = data?.baseLines || []
+  basePoints.value = data?.basePoints || []
+  fixPoints.value = data?.fixPoints || []
+  photos.value = data?.photos || []
+  accidentPhotos.value = data?.accidentPhotos || []
+  roadPhotos.value = data?.roadPhotos || []
 
-export const updateSceneStore = debounce((data) => {
-  axios.post("sceneStore", data)
-}, 1000)
+  syncSceneStore()
+}
 
-export const uploadImage = async (blob: Blob) => {
+export const updateSceneStore = debounce(api.setStore, 1000)
+export const uploadImage = (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
+  return api.uploadImage(file)
 }
 
 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 file = new File([blob], name, {type: "image/jpeg"})
+  await api.downloadImage(file)
 }
 
 const syncSceneStore = () => {
@@ -74,4 +104,10 @@ const syncSceneStore = () => {
     },
     { deep: true }
   )
-}
+}
+
+loadStore()
+  .catch((e) => {
+    console.error(e)
+    alert("场景数据加载失败")
+  })

src/views/graphic/header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="graphic-header" v-if="data">
     <div class="title">
-      <ui-icon type="close" @click="router.back" class="head-icon" />
+      <ui-icon type="close" @click="back" class="head-icon" />
       <p>{{ isRoad ? '现场绘图' : '事故照片' }}</p>
     </div>
     <div class="actions">
@@ -12,7 +12,7 @@
           :class="{disabled: menu.disable}"
           @click="menu.onClick"
       >
-        <ui-icon type="close" />
+        <ui-icon type="close"  />
         <p>{{ menu.text }}</p>
       </div>
     </div>
@@ -46,7 +46,7 @@ import {AccidentPhoto, accidentPhotos, types} from '@/store/accidentPhotos'
 import {useData} from './data'
 import UiInput from "@/components/base/components/input/index.vue";
 import {roadPhotos} from "@/store/roadPhotos";
-import {uploadImage} from '@/store/sync'
+import {back, uploadImage} from '@/store/sync'
 
 const data = useData()
 const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode)

src/views/roads/tabulation.vue

@@ -1,7 +1,7 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header  title="现场绘图 | 制表">
+      <Header title="现场绘图 | 制表" :on-back="onBack">
         <ui-button
             type="primary"
             @click="saveHandler"
@@ -137,6 +137,7 @@ import {HandMode, useHand} from '@/hook/useHand'
 import Header from "@/components/photos/header.vue";
 import MainPanel from "@/components/main-panel/index.vue";
 import {uploadImage} from "@/store/sync";
+import {Mode} from "@/views/graphic/menus";
 
 const roadPhoto = computed<RoadPhoto>(() => {
   let route, params, data
@@ -174,8 +175,13 @@ const { cssMatrix: photoCSSMatrix, matrix: photoMatrix } = useHand(
   history.value.value.imageTransform
 )
 
-
-
+const onBack = () => {
+  console.log("????")
+  router.replace({
+    name: writeRouteName.graphic,
+    params: {mode: Mode.Road, id: roadPhoto.value.id, action: 'update'}
+  })
+}
 
 const downMode = ref(false)
 const layoutRef = ref<HTMLDivElement>()

src/views/scene/container.vue

@@ -54,4 +54,33 @@ onMounted(async () => {
   right: 0;
   top: 0;
 }
+</style>
+
+<style lang="scss">
+.canvas-layout  {
+  #navCube,
+  #home {
+    right: var(--boundMargin) !important;
+    top: var(--boundMargin) !important;
+  }
+  #home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px !important;
+    height: 20px !important;
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    background: none !important;
+    z-index: 1;
+    color: #fff;
+
+    &:before {
+      content: "\e633";
+      pointer-events: none;
+    }
+  }
+}
 </style>

src/views/scene/index.vue

@@ -8,7 +8,7 @@
     <FixPoints />
     <Measures />
     <Photo />
-    <ButtonPane class="back fun-ctrl" size="48">
+    <ButtonPane class="back fun-ctrl" size="48" @click="back">
       <ui-icon type="close" class="icon" />
     </ButtonPane>
   </template>
@@ -27,6 +27,7 @@ import {disabledMap, useSDK} from "@/hook";
 import customSetup from "../../hook/custom";
 import UiIcon from "@/components/base/components/icon/index.vue";
 import {ref, watchEffect} from "vue";
+import {back} from "@/store/sync";
 
 const loaded = ref(false)
 const stopReg = watchEffect(() => {