修改需求

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="() => onBack ? onBack() : back()" />
+      <ui-icon :type="type || 'return'" ctrl style="margin-right: 10px" @click="() => onBack ? onBack() : back()" />
       <span>{{ title }}</span>
     </div>
     <span class="center" v-if="count">
@@ -17,7 +17,7 @@
 import UiIcon from "@/components/base/components/icon/index.vue";
 import {back} from "@/store/sync";
 
-defineProps<{ count?: number, title: string, onBack?: () => void }>()
+defineProps<{ count?: number, title: string, onBack?: () => void, type?: string }>()
 </script>
 
 <style lang="scss" scoped>

src/graphic/CanvasStyle/default.js

@@ -117,15 +117,15 @@ const MeasureLine = {
   strokeStyle: "#2F8FFF",
   lineWidth: 4 * coordinate.ratio,
   text: {
+    fontSize: 12,
     fillColor: "#fff",
     padding: 6 * coordinate.ratio,
     backColor: "#2F8FFF"
   },
-
 };
 const BaseLine = {
-  strokeStyle: "#000",
-  lineWidth: 1 * coordinate.ratio,
+  strokeStyle: "red",
+  lineWidth: 3 * coordinate.ratio,
 };
 
 const BasePoint = {

src/graphic/CanvasStyle/focus.js

@@ -7,6 +7,16 @@ const Road = {
   strokeStyle: "#3290FF",
 };
 
+const MeasureLine = {
+  strokeStyle: "red",
+  lineWidth: 4 * coordinate.ratio,
+  text: {
+    fontSize: 12,
+    fillColor: "#fff",
+    padding: 6 * coordinate.ratio,
+    backColor: "red"
+  },
+};
 const NormalLine = {
   ...def.NormalLine,
   lineWidth: 2 * coordinate.ratio,
@@ -104,6 +114,7 @@ export default {
   CurveRoadPoint,
   CrossPoint,
   CurveRoad,
+  MeasureLine,
   TestPoint,
   RoadEdge,
   Magnifier,

src/graphic/CanvasStyle/select.js

@@ -7,6 +7,17 @@ const Road = {
   strokeStyle: "#3290FF",
 };
 
+const MeasureLine = {
+  strokeStyle: "red",
+  lineWidth: 4 * coordinate.ratio,
+  text: {
+    fontSize: 12,
+    fillColor: "#fff",
+    padding: 6 * coordinate.ratio,
+    backColor: "red"
+  },
+};
+
 const BaseLine = {
   strokeStyle: "#3290FF",
   lineWidth: 1 * coordinate.ratio,
@@ -100,6 +111,7 @@ export default {
   CurveRoadPoint,
   CrossPoint,
   CurveRoad,
+  MeasureLine,
   BasePoint,
   BaseLine,
   RoadEdge,

src/graphic/Renderer/Draw.js

@@ -184,6 +184,9 @@ const help = {
     ctx.save();
     ctx.translate(center.x, center.y);
     ctx.rotate((angle * Math.PI) / 180);
+    ctx.font = `${
+      (style.fontSize || 10) * coordinate.ratio
+    }px Microsoft YaHei`;
     const textCenter = help.getTextCenter(ctx, text);
     const padding = style.padding;
     help.roundRect(
@@ -706,7 +709,7 @@ export default class Draw {
     this.context.font = `${
       vector.fontSize * coordinate.ratio
     }px Microsoft YaHei`;
-    this.drawTextByInfo(vector.center, vector.value, (vector.angle || 0), false);
+    this.drawTextByInfo(vector.center, vector.value, -(vector.angle || 0), false);
 
     const ctx = this.context;
     const pt = coordinate.getScreenXY(vector.center);
@@ -735,6 +738,7 @@ export default class Draw {
   }
 
   drawLineText(vector, style) {
+
     const startReal = dataService.getPoint(vector.startId);
     const endReal = dataService.getPoint(vector.endId);
     help.drawLineText(
@@ -782,7 +786,7 @@ export default class Draw {
       point,
       35 * coordinate.ratio
     );
-    this.context.font = `${10 * coordinate.ratio}px Microsoft YaHei`;
+    this.context.font = `${12 * coordinate.ratio}px Microsoft YaHei`;
     help.drawLineText(
       this.context,
       help.getPerpendicularPoint(point, p5, p5, 10 * coordinate.ratio),

src/hook/custom/preset.ts

@@ -20,7 +20,8 @@ export enum DisabledCom {
   floors = "floors",
   lmenu = "lmenu",
   autoLeave = "autoLeave",
-  Mode = 'mode'
+  Mode = 'mode',
+  photo = 'photo'
 }
 
 export const searchDisabledStack = stackFactory(ref(false));
@@ -41,6 +42,7 @@ export const floorsDisabled = stackFactory(ref(false));
 export const lmenuDisabled = stackFactory(ref(false));
 export const autoLeaveDisabled = stackFactory(ref(false));
 export const modeDisabled = stackFactory(ref(false));
+export const photoDisabled= stackFactory(ref(false));
 
 export const disabledMapStack = {
   [DisabledCom.Search]: searchDisabledStack,
@@ -62,6 +64,7 @@ export const disabledMapStack = {
   [DisabledCom.lmenu]: lmenuDisabled,
   [DisabledCom.autoLeave]: autoLeaveDisabled,
   [DisabledCom.Mode]: modeDisabled,
+  [DisabledCom.photo]: photoDisabled,
 } as { [key in DisabledCom]: Stack<Ref<boolean>> };
 
 export type DisabledMapStack = typeof disabledMapStack;

src/views/accidents/index.vue

@@ -1,7 +1,7 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header :count="selects.length" :title="`已标注照片（${sortPhotos.length}）`">
+      <Header type="close" :count="selects.length" :title="`已标注照片（${sortPhotos.length}）`">
         <ui-button
             :type="selectMode ? 'primary' : 'normal'"
             @click="selectMode = !selectMode"
@@ -56,7 +56,7 @@ import ActionMenus from "@/components/group-button/index.vue";
 import {types, accidentPhotos, AccidentPhoto} from '@/store/accidentPhotos'
 import UiIcon from "@/components/base/components/icon/index.vue";
 import {router, writeRouteName} from '@/router'
-import {computed, reactive, ref, watchEffect} from "vue";
+import {computed, onDeactivated, reactive, ref, watchEffect} from "vue";
 import {Mode} from '@/views/graphic/menus'
 import UiButton from "@/components/base/components/button/index.vue";
 import Photos from "@/components/photos/index.vue";
@@ -166,6 +166,9 @@ const gotoDraw = () => {
   })
 }
 
+onDeactivated(() => {
+  active.value = null
+})
 </script>
 
 <style scoped lang="scss">

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="back" class="head-icon" />
+      <ui-icon type="return" @click="back" class="head-icon" />
       <p>{{ isRoad ? '现场绘图' : '事故照片' }}</p>
     </div>
     <div class="actions">

src/views/photos/index.vue

@@ -36,7 +36,7 @@ import {PhotoRaw, photos} from '@/store/photos'
 import UiIcon from "@/components/base/components/icon/index.vue";
 import {router, writeRouteName} from '@/router'
 import ButtonPane from "@/components/button-pane/index.vue";
-import {computed, ref, watchEffect} from "vue";
+import {computed, onDeactivated, ref, watchEffect} from "vue";
 import {Mode} from '@/views/graphic/menus'
 import UiButton from "@/components/base/components/button/index.vue";
 import Photos from '@/components/photos'
@@ -123,6 +123,9 @@ const gotoDraw = (mode: Mode) => {
   })
 }
 
+onDeactivated(() => {
+  active.value = null
+})
 </script>
 
 <style scoped lang="scss">

src/views/roads/index.vue

@@ -1,7 +1,7 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header :count="selects.length" :title="`现场图管理（${sortPhotos.length}）`">
+      <Header :count="selects.length" :title="`现场图管理（${sortPhotos.length}）`" type="close">
         <ui-button
             :type="selectMode ? 'primary' : 'normal'"
             @click="selectMode = !selectMode"
@@ -56,7 +56,7 @@ import FillSlide from '@/components/fill-slide/index.vue'
 import {roadPhotos, RoadPhoto} from '@/store/roadPhotos'
 import ActionMenus from "@/components/group-button/index.vue";
 import {router, writeRouteName} from '@/router'
-import {computed, ref, watchEffect} from "vue";
+import {computed, onDeactivated, ref, watchEffect} from "vue";
 import {Mode} from '@/views/graphic/menus'
 import UiButton from "@/components/base/components/button/index.vue";
 import Header from "@/components/photos/header.vue";
@@ -142,6 +142,10 @@ const gotoDraw = () => {
   })
 }
 
+onDeactivated(() => {
+  active.value = null
+})
+
 </script>
 
 <style scoped lang="scss">

src/views/scene/covers/measure.vue

@@ -37,7 +37,7 @@ watchEffect(() => {
 
 const clickHandler = ev => {
   const $canvas = document.querySelector(".scene-canvas > canvas")
-  if (!$canvas.contains(ev.target)) {
+  if (!$canvas || !$canvas.contains(ev.target)) {
     emit("blur")
     // measure.value.selected(false)
   }

src/views/scene/menus/pane.vue

@@ -19,6 +19,7 @@ import ActionMenus from "@/components/group-button/index.vue";
 import {generateMixMenus, MenuRaw, menus, findMenuByKey} from './menus'
 import {joinActions} from './actions'
 import {computed, onUnmounted, watchEffect} from "vue";
+import {disabledMap} from "@/hook";
 
 const props = withDefaults(
   defineProps<{ menus?: MenuRaw[], level?: number }>(),
@@ -51,6 +52,10 @@ watchEffect((onCleanup) => {
   }
 })
 
+watchEffect(() => {
+  disabledMap.photo = !store.child.value
+})
+
 onUnmounted(joinActions(store.itemActiveKey));
 </script>
 <script lang="ts"> export default {name: 'scene-menus'}</script>

src/views/scene/photo.vue

@@ -1,7 +1,7 @@
 <template>
   <img :src="tempPhoto" class="face-animation" v-if="tempPhoto" ref="coverRef">
 
-  <div class="photo-layout">
+  <div class="photo-layout" v-if="disabledMap.photo">
     <ButtonPane class="photo-btn fun-ctrl" size="80" @click="photo">
       <ui-icon type="photo" class="icon" />
     </ButtonPane>
@@ -25,9 +25,10 @@ import {basePoints} from '@/store/basePoint'
 import {photos} from '@/store/photos'
 import { useSDK } from '@/hook/useLaser'
 import {genUseLoading} from "@/hook";
+import {disabledMap} from "@/hook/custom";
 import {base64ToBlob, getId} from "@/utils";
 import {nextTick, ref} from "vue";
-import {api, uploadImage} from "@/store/sync";
+import {api, downloadImage, uploadImage} from "@/store/sync";
 import {router, writeRouteName} from "@/router";
 import {Pos, Pos3D} from "@/sdk";
 
@@ -66,10 +67,12 @@ const photo = genUseLoading(async () => {
     coverRef.value.removeEventListener("animationend", handler)
     showCoverUrl.value = tempPhoto.value
     tempPhoto.value = null
-    baseLines.value.concat(list.value).forEach(item => {
-      item.show = false
-    })
+    // baseLines.value.concat(list.value).forEach(item => {
+    //   item.show = false
+    // })
+    throw "111"
     await nextTick()
+    await downloadImage(blob)
     const url = await upload
     photos.value.push({
       id: getId(),
@@ -96,9 +99,9 @@ const photo = genUseLoading(async () => {
     })
     showCoverUrl.value = await api.getFile(url)
     dom.style.pointerEvents = "all"
-    baseLines.value.concat(list.value).forEach(item => {
-      item.show = true
-    })
+    // baseLines.value.concat(list.value).forEach(item => {
+    //   item.show = true
+    // })
   }
   coverRef.value.addEventListener("animationend", handler)
 })