Merge branch 'master' of http://192.168.0.115:3000/bill/traffic-laser

src/sdk/carry/measures/index.vue

@@ -4,40 +4,41 @@
     :key="Math.random() * 100"
     :data="item"
     :unit="MeasureUnit.meter"
-    :ref="canvas => (refs[i] = canvas)"
+    :ref="(canvas) => (refs[i] = canvas)"
   />
 </template>
 
 <script setup lang="ts">
-import MeasureItem from './item.vue'
-import { propsKey, laserKey } from '../constant'
-import {inject, computed, ref, watch, watchEffect} from 'vue'
-import {MeasureUnit} from "@/sdk";
-import {tempMeasures} from "@/store/measure";
-import {customMap} from "@/hook";
-import {trackMode} from "@/views/scene/trackMeasureWidth";
+import MeasureItem from "./item.vue";
+import { propsKey, laserKey } from "../constant";
+import { inject, computed, ref, watch, watchEffect } from "vue";
+import { MeasureUnit } from "@/sdk";
+import { tempMeasures } from "@/store/measure";
+import { customMap } from "@/hook";
+import { trackMode } from "@/views/scene/trackMeasureWidth";
 
-const props = inject(propsKey)
-const laser = inject(laserKey)
-const refs = ref([])
-const measureMap = props.measureMap
+const props = inject(propsKey);
+const laser = inject(laserKey);
+const refs = ref([]);
+const measureMap = props.measureMap;
 
 const measure = computed(() => {
-  console.error(trackMode.value)
-  return trackMode.value ?  props.store.measure.tempMeasures : [...props.store.measure.list, ...props.store.baseLine.baseLines]
-})
+  return trackMode.value
+    ? props.store.measure.tempMeasures
+    : [...props.store.measure.list, ...props.store.baseLine.baseLines];
+});
 watchEffect(() => {
-  console.error(props.store.measure.tempMeasures[0])
-})
+  console.error(props.store.measure.tempMeasures[0]);
+});
 
 watch(
   refs,
   () => {
     for (let i = 0; i < measure.value.length; i++) {
-      const vm = refs.value[i]
-      vm && measureMap.set(measure.value[i], vm.canvas)
+      const vm = refs.value[i];
+      vm && measureMap.set(measure.value[i], vm.canvas);
     }
   },
   { deep: true }
-)
+);
 </script>

src/sdk/types/sdk.ts

@@ -17,11 +17,11 @@ import { ModelModelAtom } from "./model";
 export type SceneEventMap = {
   buildingChange: ModelModelAtom;
   allLoaded: void;
-  posChange: Pos3D & { dataset: string[], meterPerPixel: number };
+  posChange: Pos3D & { dataset: string[]; meterPerPixel: number };
   loaded: void;
   webglError: void;
   visible: boolean;
-  viewChange: "Top" | "Bottom"
+  viewChange: "Top" | "Bottom" | string;
 };
 
 export type PointInfo = {
@@ -35,12 +35,12 @@ export type Base = Emitter<SceneEventMap> & {
   // 通过DOM坐标获取真实坐标
   getPointByScreen: (screen?: Pos & { inDrag?: boolean }) => PointInfo | null;
   // 通过真实坐标获取DOM坐标
-  getScreenByPoint: (
-    point: Pos,
-    slide?: boolean
-  ) => { pos: Pos; trueSide: boolean };
+  getScreenByPoint: (point: Pos, slide?: boolean) => { pos: Pos; trueSide: boolean };
 
-  screenshot: (width: number, height: number) => {finishPromise: Promise<{ dataUrl: string }>, meterPerPixel: number};
+  screenshot: (
+    width: number,
+    height: number
+  ) => { finishPromise: Promise<{ dataUrl: string }>; meterPerPixel: number };
   el: HTMLElement;
 };
 
@@ -70,7 +70,7 @@ export type Measure = {
     dataUrl: string;
     pose: Pose;
   };
-  bus: Emitter<{ update: Measure; selected: boolean, firstClickMarker: void }>;
+  bus: Emitter<{ update: Measure; selected: boolean; firstClickMarker: void }>;
   getDatasets: () => Array<string>;
   getDatasetId: () => string;
   getDatasetLocations: () => Array<Pos3D>;
@@ -79,8 +79,7 @@ export type Measure = {
 };
 
 export type StartMeasure = Measure & {
-  bus: Emitter<{ end: Measure; quit: Measure; invalidPoint: string }> &
-    Measure["bus"];
+  bus: Emitter<{ end: Measure; quit: Measure; invalidPoint: string }> & Measure["bus"];
   quit: () => void;
   end: () => void;
 };
@@ -247,7 +246,7 @@ export type Scene = Base & {
     sid: string,
     color: string
   ): Measure;
-  trackScenePos: () => { promise: Promise<Pos3D>, quit: ()  => void}
+  trackScenePos: () => { promise: Promise<Pos3D>; quit: () => void };
   comeToMeasure: (measure: Measure) => Promise<void>;
   comeToTag: (pos: Pos3D) => Promise<void>;
 
@@ -330,7 +329,7 @@ export type LaserSDKProps = {
   num: string;
   webSite: string;
   isDebug?: boolean;
-  getFileUrl: (url: string) => Promise<string>
+  getFileUrl: (url: string) => Promise<string>;
   axios: any;
   basePath: string;
 };
@@ -449,8 +448,8 @@ export type LaserSDK = {
   map: Map;
   scene: Scene;
   enterDatasetsManage: () => any;
-  enterTopView: () => any,
-  leaveTopView: () => any,
+  enterTopView: () => any;
+  leaveTopView: () => any;
   leaveDatasetsManage: () => any;
   getPointByEntity: (id: string) => Pos3D;
   entityIncludePoint: (id: string, pos: Pos3D) => boolean;
@@ -498,11 +497,7 @@ export type LaserSDK = {
   enterEditClouds: (data: EditCloudsArgs) => EditClouds;
   enterEditCrop: () => EditCrop;
 
-  transformPoint: (
-    point: Pos3D,
-    datasetId: string,
-    dataset_location: Pos3D
-  ) => Pos3D;
+  transformPoint: (point: Pos3D, datasetId: string, dataset_location: Pos3D) => Pos3D;
 
   enterMeasurement: () => void;
   leaveMeasurement: () => void;
@@ -518,11 +513,7 @@ export type LaserSDK = {
 
   enterFireEdit: () => void;
 
-  insertEffect: (
-    type: TypeEmu,
-    prop: InsertEffectProp,
-    edit: boolean
-  ) => Effect;
+  insertEffect: (type: TypeEmu, prop: InsertEffectProp, edit: boolean) => Effect;
 
   debug: boolean;
   // 加载小物体

src/views/scene/container.vue

@@ -1,34 +1,33 @@
 <template>
   <div class="canvas-layout">
-    <p v-if="currentMeterPerPixel" class="meterPerPixel">1: {{currentMeterPerPixel}}</p>
+    <p v-if="currentMeterPerPixel" class="meterPerPixel">1: {{ currentMeterPerPixel }}</p>
     <div class="scene-canvas" ref="sceneLayoutRef" />
   </div>
 </template>
 
 <script setup lang="ts">
-import {onActivated, onDeactivated, onMounted, ref, watchEffect} from "vue";
-import {customMap, disabledMap, setupLaser, useLoading, useParams} from "@/hook";
-import {store} from "@/store";
-import {currentApp} from "@/store/app";
-import {Loading} from '@kankan/components/index'
-import {LaserSDK, Mode} from "@/sdk";
-import {api} from "@/store/sync";
-
-const emit = defineEmits<{ (e: 'loaded'): void }>()
+import { onActivated, onDeactivated, onMounted, ref, watchEffect } from "vue";
+import { customMap, disabledMap, setupLaser, useLoading, useParams } from "@/hook";
+import { store } from "@/store";
+import { currentApp } from "@/store/app";
+import { Loading } from "@kankan/components/index";
+import { LaserSDK, Mode } from "@/sdk";
+import { api } from "@/store/sync";
+
+const emit = defineEmits<{ (e: "loaded"): void }>();
 const sceneLayoutRef = ref<HTMLCanvasElement>();
-const active = ref(true)
+const active = ref(true);
 
-onActivated(() => active.value = true)
-onDeactivated(() => active.value = false)
+onActivated(() => (active.value = true));
+onDeactivated(() => (active.value = false));
 
 const handlerSDK = (sdk: LaserSDK) => {
   watchEffect(() => {
-    console.log("visible", active.value)
-    sdk.scene.emit("visible", active.value)
-  })
-}
+    sdk.scene.emit("visible", active.value);
+  });
+};
 
-const currentMeterPerPixel = ref(0)
+const currentMeterPerPixel = ref(0);
 
 onMounted(async () => {
   const sdk = await useLoading(
@@ -44,47 +43,48 @@ onMounted(async () => {
     })
   );
 
-  emit('loaded')
+  emit("loaded");
 
-  sdk.scene.on('posChange', pos => {
-    currentMeterPerPixel.value = pos.meterPerPixel ? Math.round(1 / pos.meterPerPixel) : null
-  })
+  sdk.scene.on("posChange", (pos) => {
+    currentMeterPerPixel.value = pos.meterPerPixel
+      ? Math.round(1 / pos.meterPerPixel)
+      : null;
+  });
   // 156  170
   // 90
   setTimeout(() => {
     watchEffect(() => {
-      const doms = Array.from(sceneLayoutRef.value.querySelectorAll("#navCube, #home")) as HTMLElement[]
+      const doms = Array.from(
+        sceneLayoutRef.value.querySelectorAll("#navCube, #home")
+      ) as HTMLElement[];
       if (!disabledMap.mode) {
         if (customMap.mode === Mode.pano) {
-          doms.forEach(dom => {
-            dom.style.display = "none"
-          })
+          doms.forEach((dom) => {
+            dom.style.display = "none";
+          });
         } else {
-          doms.forEach(dom => {
-            dom.style.display = "block"
-          })
+          doms.forEach((dom) => {
+            dom.style.display = "block";
+          });
         }
       }
-      handlerSDK(sdk)
-    })
-    Loading.hideAll()
-  }, 1000)
+      handlerSDK(sdk);
+    });
+    Loading.hideAll();
+  }, 1000);
 });
-
-
-
 </script>
 
 <style scoped lang="scss">
 .canvas-layout {
-  width  : 100%;
-  height : 100%;
+  width: 100%;
+  height: 100%;
   position: relative;
   z-index: 0;
 }
 
 .scene-canvas {
-  width : 100%;
+  width: 100%;
   height: 100%;
 }
 
@@ -96,10 +96,9 @@ onMounted(async () => {
 </style>
 
 <style lang="scss">
-.canvas-layout  {
-
+.canvas-layout {
   .meterPerPixel,
-  #navCube{
+  #navCube {
     position: absolute !important;
     right: calc(var(--boundMargin) + 10px) !important;
     top: calc(var(--boundMargin) + 10px) !important;
@@ -122,7 +121,7 @@ onMounted(async () => {
     background: none !important;
     z-index: 2;
     color: #fff;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     &:before {
       content: "\e73e";
@@ -144,8 +143,7 @@ onMounted(async () => {
     font-weight: 400;
     line-height: 23px;
     font-size: 20px;
-    text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
+    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
   }
 }
-
 </style>

src/views/scene/covers/basePoints.vue

@@ -30,9 +30,10 @@ import BasePoint from "./basePoint.vue";
 import { ref } from "vue";
 import { FixPoint } from "@/store/fixPoint";
 import ActionsPanel from "@/views/scene/covers/actions.vue";
-import { customMap } from "@/hook";
+import { customMap, useSDK } from "@/hook";
 import ActionMenus from "@/components/group-button/index.vue";
 
+
 const activeActionMenus = [
   {
     key: "delete",

src/views/scene/covers/measure.vue

@@ -1,52 +1,66 @@
 <template></template>
 
 <script setup lang="ts">
-import {useSDK} from "@/hook";
-import { MeasureAtom } from '@/store/measure'
-import {computed, onActivated, onDeactivated, onMounted, onUnmounted, watchEffect} from "vue";
+import { useSDK } from "@/hook";
+import { MeasureAtom } from "@/store/measure";
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  watchEffect,
+} from "vue";
+import { currentView } from "../currentScene";
 
-const props = defineProps<{ data: MeasureAtom }>()
+const props = defineProps<{ data: MeasureAtom }>();
 const emit = defineEmits<{
-  (m: 'changePoints', data: MeasureAtom['points']): void,
-  (m: 'focus'): void,
-  (m: 'blur'): void
-}>()
+  (m: "changePoints", data: MeasureAtom["points"]): void;
+  (m: "focus"): void;
+  (m: "blur"): void;
+}>();
 
 const measure = computed(() => {
-  const sdk = useSDK()
+  const sdk = useSDK();
   if (sdk?.carry?.measureMap) {
-    return sdk.carry.measureMap.get(props.data)
+    return sdk.carry.measureMap.get(props.data);
   }
-})
+});
 
 watchEffect(() => {
   if (measure.value) {
     measure.value.bus.on("selected", (focus) => {
       if (focus) {
-        emit('focus')
+        emit("focus");
       } else {
-        emit('blur')
+        emit("blur");
       }
-    })
+    });
 
     measure.value.bus.on("update", () => {
-      emit("changePoints", measure.value.getPoints())
-    })
+      emit("changePoints", measure.value.getPoints());
+    });
+
+    if (currentView.value) {
+      measure.value.show();
+    } else {
+      measure.value.hide();
+    }
   }
-})
+});
 
-const clickHandler = ev => {
-  const $canvas = document.querySelector(".scene-canvas > canvas")
+const clickHandler = (ev) => {
+  const $canvas = document.querySelector(".scene-canvas > canvas");
   if (!$canvas || !$canvas.contains(ev.target)) {
-    emit("blur")
-    console.log("blur measure")
-    measure.value.selected(false)
+    emit("blur");
+    console.log("blur measure");
+    measure.value.selected(false);
   }
-}
+};
 onMounted(() => {
-  document.querySelector("#app").addEventListener("touchstart", clickHandler)
-})
+  document.querySelector("#app").addEventListener("touchstart", clickHandler);
+});
 onUnmounted(() => {
-  document.querySelector("#app").removeEventListener("touchstart", clickHandler)
-})
-</script>
+  document.querySelector("#app").removeEventListener("touchstart", clickHandler);
+});
+</script>

src/views/scene/covers/measures.vue

@@ -1,39 +1,35 @@
 <template>
   <Measure
-      v-for="measure in list.concat(baseLines)"
-      :key="measure.id"
-      :data="measure"
-      @change-points="points => changePoints(measure, points)"
-      @blur="() => active = active === measure ? null : active"
-      @focus="() => active = measure"
+    v-for="measure in list.concat(baseLines)"
+    :key="measure.id"
+    :data="measure"
+    @change-points="(points) => changePoints(measure, points)"
+    @blur="() => (active = active === measure ? null : active)"
+    @focus="() => (active = measure)"
   />
 
   <div ref="menu" @touchstart.stop class="action-menus">
-    <ActionMenus
-        v-if="active"
-        :menus="activeActionMenus"
-        dire="row"
-    />
+    <ActionMenus v-if="active" :menus="activeActionMenus" dire="row" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { list, MeasureAtom } from '@/store/measure'
-import { baseLines } from '@/store/baseLine'
-import Measure from './measure.vue'
-import {ref} from "vue";
+import { list, MeasureAtom } from "@/store/measure";
+import { baseLines } from "@/store/baseLine";
+import Measure from "./measure.vue";
+import { ref } from "vue";
 import ActionsPanel from "@/views/scene/covers/actions.vue";
-import {customMap} from "@/hook";
+import { customMap } from "@/hook";
 import ActionMenus from "@/components/group-button/index.vue";
 import * as process from "process";
 
-const active = ref<MeasureAtom>()
+const active = ref<MeasureAtom>();
 const getStore = (item: MeasureAtom) =>
   ~list.value.indexOf(item)
     ? list.value
     : ~baseLines.value.indexOf(item)
-      ? baseLines.value
-      : null
+    ? baseLines.value
+    : null;
 const activeActionMenus = [
   {
     key: "delete",
@@ -42,23 +38,22 @@ const activeActionMenus = [
     color: "#FF4D4F",
     iconColor: "#fff",
     onClick() {
-      console.log('aa')
-      const store = getStore(active.value)
+      console.log("aa");
+      const store = getStore(active.value);
       if (store) {
-        store.splice(store.indexOf(active.value), 1)
+        store.splice(store.indexOf(active.value), 1);
       }
-      active.value = null
-    }
-  }
-]
+      active.value = null;
+    },
+  },
+];
 
 const changePoints = (measure, points) => {
-  measure.points = points.map(point => ({...point}))
-}
+  measure.points = points.map((point) => ({ ...point }));
+};
 </script>
 
 <style scoped>
-
 .action-menus {
   position: absolute;
   bottom: var(--boundMargin);

src/views/scene/currentScene.ts

@@ -0,0 +1,10 @@
+import { useAsyncSDK, useSDK } from "@/hook";
+import { ref } from "vue";
+
+export const currentView = ref("");
+
+useAsyncSDK().then((sdk) => {
+  sdk.scene.on("viewChange", (view) => {
+    currentView.value = view === "perspective" ? null : view;
+  });
+});

src/views/scene/index.vue

@@ -3,7 +3,7 @@
 
   <template v-if="loaded && !trackMode">
     <Menus @enter-child="childPage = true" @leave-child="childPage = false" />
-    <BasePoints />
+    <BasePoints v-if="currentView" />
     <FixPoints />
     <Measures />
     <Photo />
@@ -15,31 +15,32 @@
 </template>
 
 <script lang="ts" setup>
-import Container from "./container.vue"
-import Mode from './mode.vue'
-import Menus from './menus/pane.vue'
+import Container from "./container.vue";
+import Mode from "./mode.vue";
+import Menus from "./menus/pane.vue";
 import BasePoints from "@/views/scene/covers/basePoints.vue";
 import FixPoints from "@/views/scene/covers/fixPoints.vue";
 import Measures from "@/views/scene/covers/measures.vue";
-import Photo from './photo.vue'
-import ButtonPane from '@/components/button-pane'
-import {customMap, disabledMap, useSDK} from "@/hook";
+import Photo from "./photo.vue";
+import ButtonPane from "@/components/button-pane";
+import { customMap, 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";
-import {trackMode} from "@/views/scene/trackMeasureWidth";
+import { ref, watchEffect } from "vue";
+import { back } from "@/store/sync";
+import { trackMode } from "@/views/scene/trackMeasureWidth";
+import { currentView } from "./currentScene";
 
-const loaded = ref(false)
-const childPage = ref(false)
+const loaded = ref(false);
+const childPage = ref(false);
 const stopReg = watchEffect(() => {
   if (loaded.value) {
     const sdk = useSDK();
-    stopReg()
-    customSetup(sdk)
-    disabledMap.measure = false
+    stopReg();
+    customSetup(sdk);
+    disabledMap.measure = false;
   }
-})
+});
 </script>
 
 <style scoped lang="scss">
@@ -48,7 +49,7 @@ const stopReg = watchEffect(() => {
   top: var(--boundMargin);
   color: #fff;
   font-size: 20px;
-  transition: color .3s ease;
+  transition: color 0.3s ease;
 
   .icon {
     position: absolute;