添加设置

src/components/base/components/dialog/Confirm.vue

@@ -27,8 +27,11 @@
 <script>
 import { defineComponent } from 'vue'
 import { isFunction, omit } from '../../utils'
+import UiButton from "@/components/base/components/button/index.vue";
+import UiDialog from "@/components/base/components/dialog/Dialog.vue";
 export default defineComponent({
     name: 'ui-confirm',
+    components: {UiDialog, UiButton},
     props: {
         title: {
             type: String,

src/graphic/Controls/UIControl.js

@@ -515,6 +515,21 @@ export default class UIControl {
     this.layer.renderer.autoRedraw();
   }
 
+
+  // 设置默认设置
+  setDefaultSetting(setting) {
+    console.log("获得设置", setting)
+  }
+
+  // 获取默认设置
+  getDefaultSetting() {
+    return {
+      singleRoadWidth: 4,
+      roadQuarantineWidth: 1,
+      lineWidth: 1
+    }
+  }
+
   hidePrompt() {
     for (let prompt of this._prompts) {
       prompt();

src/graphic/Renderer/Draw.js

@@ -855,7 +855,6 @@ export default class Draw {
 
   drawCurveLine(vector) {
     // points  CurveLine
-    console.log(vector);
     const ctx = this.context;
     ctx.save();
     help.setVectorStyle(ctx, vector);

src/views/graphic/data.ts

@@ -5,6 +5,7 @@ import {roadPhotos, RoadPhoto} from "@/store/roadPhotos";
 import {router} from '@/router'
 import {getId} from "@/utils";
 import {photos} from "@/store/photos";
+import {trackMode} from "@/views/scene/trackMeasureWidth";
 
 export const useData = () => {
   const data = ref<AccidentPhoto | RoadPhoto>(null);
@@ -15,6 +16,11 @@ export const useData = () => {
         roadPhotos: roadPhotos.value
     }),
     ({params}) => {
+
+      if (trackMode.value) {
+        return;
+      }
+      console.error("reload data")
       if (!params.action) {
         data.value = null
       } else if (params.action === 'add') {
@@ -51,4 +57,4 @@ export const useData = () => {
   )
 
   return data;
-}
+}

src/views/graphic/menus.ts

@@ -8,6 +8,8 @@ import Message from "@/components/base/components/message/message.vue";
 import RoadStructure from '@/graphic/enum/RoadStructure'
 import RoadTemplate from '@/graphic/enum/RoadTemplate'
 import {computed} from "vue";
+import { mount } from '@/components/base/utils/componentHelper'
+import Setting from "@/views/graphic/setting.vue";
 
 export enum Mode {
   Road,
@@ -163,6 +165,25 @@ export const mainMenusRaw: MenusRaw = [
   },
   { key: UIType.Text, text: "文字", icon: "text" },
   { key: UIType.Magnifier, text: "放大镜", icon: "magnify_g" },
+
+  // { key: UITypeExtend.photo, text: "照片库" },
+  {
+    key: UITypeExtend.setup,
+    icon: "setting",
+    text: "设置",
+    onClick() {
+      const { destroy } = mount(
+        Setting,
+        {
+          props: {
+            close() {
+              destroy();
+            }
+          }
+        } as any
+      )
+    }
+  },
 ];
 
 export const photoMenusRaw: MenusRaw = [

src/views/graphic/setting.vue

@@ -0,0 +1,89 @@
+<template>
+  <ui-confirm title="设置" ok-text="保存" :func="handler" v-if="!trackMode">
+    <template v-slot:content>
+      <div class="setting-layout">
+        <div>
+          <p>
+            <span>默认单车道宽度</span>
+            <span>单位m</span>
+          </p>
+          <ui-input v-model="data.singleRoadWidth" width="100%">
+            <template v-slot:icon>
+              <ui-icon type="clear" ctrl @click="setSceneSingleRoadWidth" />
+            </template>
+          </ui-input>
+        </div>
+        <div>
+          <p>
+            <span>默认隔离带宽度</span>
+            <span>单位m</span>
+          </p>
+          <ui-input v-model="data.roadQuarantineWidth" width="100%">
+            <template v-slot:icon>
+              <ui-icon type="clear" ctrl @click="setSceneRoadQuarantineWidth" />
+            </template>
+          </ui-input>
+        </div>
+        <div>
+          <p>
+            <span>基本线宽 b</span>
+            <span>单位m</span>
+          </p>
+          <ui-input type="select" :options="lineWidthOption" v-model="data.lineWidth" width="100%" />
+        </div>
+      </div>
+    </template>
+  </ui-confirm>
+</template>
+<script setup lang="ts">
+import UiConfirm from "@/components/base/components/dialog/Confirm.vue";
+import UiInput from "@/components/base/components/input/index.vue";
+import {ref} from "vue";
+import UiIcon from "@/components/base/components/icon/index.vue";
+import {trackMeasureWidth, trackMode} from "@/views/scene/trackMeasureWidth";
+import { drawRef } from '@/hook/useGraphic'
+
+const props = defineProps<{ close?: () => void }>()
+
+const data = ref({...drawRef.value.uiControl.getDefaultSetting()})
+const lineWidthOption = [
+  {label: 2, value: 2},
+  {label: 1.4, value: 1.4},
+  {label: 1, value: 1},
+  {label: 0.7, value: 0.7},
+  {label: 0.5, value: 0.5},
+  {label: 0.35, value: 0.35},
+]
+
+const setSceneSingleRoadWidth = async () => {
+  data.value.singleRoadWidth = await trackMeasureWidth()
+}
+
+const setSceneRoadQuarantineWidth = async () => {
+  data.value.roadQuarantineWidth = await trackMeasureWidth()
+}
+
+const handler = (label) => {
+  if (label === 'ok') {
+    drawRef.value.uiControl.setDefaultSetting({...data.value})
+  }
+  props.close && props.close()
+}
+</script>
+
+<style lang="scss" scoped>
+.setting-layout {
+  width: 440px;
+
+  > div {
+    margin-bottom: 20px;
+
+    p {
+      margin-bottom: 6px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/scene/container.vue

@@ -113,11 +113,16 @@ onMounted(async () => {
     background: none !important;
     z-index: 1;
     color: #fff;
+    transition: all .3s ease;
 
     &:before {
       content: "\e73e";
       pointer-events: none;
     }
+
+    &:active {
+      color: #3290ff;
+    }
   }
 }
-</style>
+</style>

src/views/scene/index.vue

@@ -2,15 +2,17 @@
   <Container @loaded="loaded = true" />
 
   <template v-if="loaded">
+    <template v-if="!trackMode">
+      <Menus @enter-child="childPage = true" @leave-child="childPage = false" />
+      <BasePoints />
+      <FixPoints />
+      <Measures />
+      <Photo />
+      <ButtonPane class="back fun-ctrl" size="48" @click="back" v-if="!childPage">
+        <ui-icon type="close" class="icon" />
+      </ButtonPane>
+    </template>
     <Mode />
-    <Menus @enter-child="childPage = true" @leave-child="childPage = false" />
-    <BasePoints />
-    <FixPoints />
-    <Measures />
-    <Photo />
-    <ButtonPane class="back fun-ctrl" size="48" @click="back" v-if="!childPage">
-      <ui-icon type="close" class="icon" />
-    </ButtonPane>
   </template>
 </template>
 
@@ -28,6 +30,8 @@ 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 router from "@/router";
+import {trackMode} from "@/views/scene/trackMeasureWidth";
 
 const loaded = ref(false)
 const childPage = ref(false)

src/views/scene/linkage/measure.ts

@@ -25,6 +25,7 @@ export const startMeasure = (type: MeasureType, color: string, firstClickMarker?
     dataSet: unTemp,
     type: type,
     points: [],
+    length: 0,
     color,
     show: true,
     dataset_points: null,
@@ -36,9 +37,10 @@ export const startMeasure = (type: MeasureType, color: string, firstClickMarker?
     canvas: measure,
   };
 
-  return new Promise<MeasureAtom>(resolve => {
+  return new Promise<typeof raw>(resolve => {
     const endHandler = () => {
       raw.points = currentMeasure.canvas.getPoints();
+      raw.length = currentMeasure.canvas.getDistance().value
       raw.dataset_points = currentMeasure.canvas.getDatasetLocations();
       raw.datasetIds = currentMeasure.canvas.getDatasets();
       raw.dataSet = unTemp;
@@ -93,4 +95,4 @@ export const stopMeasure = () => {
     prevMeasure.canvas.bus.emit("quit")
     prevMeasure = null;
   }
-}
+}

src/views/scene/trackMeasureWidth.ts

@@ -0,0 +1,19 @@
+import { router } from "@/router";
+import writeRouteName from "../../router/constant";
+import { startMeasure } from '../scene/linkage/measure'
+import {nextTick, ref} from "vue";
+import { useAsyncSDK } from '@/hook/useLaser'
+
+export const trackMode = ref(false)
+
+export const trackMeasureWidth = async () => {
+  trackMode.value = true
+  await router.push({ name: writeRouteName.scene })
+  await useAsyncSDK()
+  const measure = await startMeasure('LINE', 'red')
+  await router.back()
+  await nextTick();
+  await new Promise(resolve => setTimeout(resolve, 100))
+  trackMode.value = false
+  return Number(measure.length.toFixed(2))
+}