修改需求

src/graphic/CanvasStyle/focus.js

@@ -93,7 +93,6 @@ const DoubleArrowLine = {
   strokeStyle: "red",
 };
 
-
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#fff",

src/graphic/Renderer/Draw.js

@@ -657,14 +657,16 @@ export default class Draw {
     ctx.save();
     help.setVectorStyle(ctx, vector);
     ctx.beginPath();
-    ctx.arc(
-      extremePoint.x,
-      extremePoint.y,
-      Style.CrossPoint.radius * coordinate.ratio,
-      0,
-      Math.PI * 2,
-      true
-    );
+    if (!Settings.screenMode) {
+      ctx.arc(
+        extremePoint.x,
+        extremePoint.y,
+        Style.CrossPoint.radius * coordinate.ratio,
+        0,
+        Math.PI * 2,
+        true
+      );
+    }
     ctx.stroke();
     ctx.fill();
     ctx.restore();
@@ -716,9 +718,9 @@ export default class Draw {
       vector
     );
     vector.leftLanesCurves &&
-      vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
+      vector.leftLanesCurves.forEach((data) => this.drawCurveLan(data, foo));
     vector.rightLanesCurves &&
-      vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
+      vector.rightLanesCurves.forEach((data) => this.drawCurveLan(data, foo));
 
     if (foo) {
       const leftEdge = dataService.getCurveRoadEdge(vector.leftEdgeId);
@@ -796,13 +798,17 @@ export default class Draw {
     }
   }
 
-  drawCurveLan(lines) {
+  drawCurveLan(lines, focus) {
     const [coves] = help.transformCoves([lines]);
     const ctx = this.context;
     ctx.save();
 
     help.setVectorStyle(ctx, null, "CurveLan");
     ctx.lineWidth *= Settings.lineWidth;
+    if (focus) {
+      ctx.strokeStyle = "rgba(255, 153, 0, 1)";
+      ctx.lineWidth *= 2;
+    }
     ctx.setLineDash(Style.Lane.dash);
     help.drawCoves(ctx, coves);
     ctx.restore();

src/views/graphic/geos/roadEdge.vue

@@ -1,109 +1,109 @@
 <template>
-  <GeoTeleport :menus="menus" class="geo-teleport-use" :active="active"/>
-  <GeoTeleport :menus="childMenus" v-if="childMenus" class="type-geo"/>
+  <GeoTeleport :menus="menus" class="geo-teleport-use" :active="active" />
+  <GeoTeleport :menus="childMenus" v-if="childMenus" class="type-geo" />
 </template>
 
 <script setup lang="ts">
 import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
-import {drawRef, FocusVector, VectorType} from '@/hook/useGraphic'
-import {computed, ref, toRaw, UnwrapRef} from "vue";
-import {dataService} from "@/graphic/Service/DataService";
-import GeoActions from "@/graphic/enum/GeoActions"
-import {UITypeExtend} from "@/views/graphic/menus";
+import { drawRef, FocusVector, VectorType } from "@/hook/useGraphic";
+import { computed, ref, toRaw, UnwrapRef } from "vue";
+import { dataService } from "@/graphic/Service/DataService";
+import GeoActions from "@/graphic/enum/GeoActions";
+import { UITypeExtend } from "@/views/graphic/menus";
 import VectorEvents from "@/graphic/enum/VectorEvents";
 import VectorStyle from "@/graphic/enum/VectorStyle";
 import VectorWeight from "@/graphic/enum/VectorWeight";
 
-
-const props = defineProps<{ geo: FocusVector }>()
-const vector = computed(() => dataService.getRoadEdge(props.geo.vectorId))
-console.error(vector.value)
+const props = defineProps<{ geo: FocusVector }>();
+const vector = computed(() => dataService.getRoadEdge(props.geo.vectorId));
+console.error(vector.value);
 
 const clickHandlerFactory = (key) => {
-  return () => drawRef.value.uiControl.updateVectorForSelectUI(key)
-}
+  return () => drawRef.value.uiControl.updateVectorForSelectUI(key);
+};
 
 const lineTypeMenu = [
   {
     key: VectorStyle.SingleSolidLine,
     icon: "line_sf",
     text: "单实线",
-    onClick: clickHandlerFactory(VectorStyle.SingleSolidLine)
+    onClick: clickHandlerFactory(VectorStyle.SingleSolidLine),
   },
   {
     key: VectorStyle.SingleDashedLine,
     icon: "line_sd",
     text: "单虚线",
-    onClick: clickHandlerFactory(VectorStyle.SingleDashedLine)
+    onClick: clickHandlerFactory(VectorStyle.SingleDashedLine),
   },
   {
     hide: props.geo.type === VectorType.CurveRoadEdge,
     key: VectorStyle.DoubleSolidLine,
     icon: "line_df",
     text: "双实线",
-    onClick: clickHandlerFactory(VectorStyle.DoubleSolidLine)
+    onClick: clickHandlerFactory(VectorStyle.DoubleSolidLine),
   },
   {
     hide: props.geo.type === VectorType.CurveRoadEdge,
     key: VectorStyle.DoubleDashedLine,
     icon: "line_dd",
     text: "双虚线",
-    onClick: clickHandlerFactory(VectorStyle.DoubleDashedLine)
+    onClick: clickHandlerFactory(VectorStyle.DoubleDashedLine),
   },
   {
     hide: props.geo.type === VectorType.CurveRoadEdge,
     key: VectorStyle.BrokenLine,
     icon: "line_broken",
     text: "折线",
-    onClick: clickHandlerFactory(VectorStyle.BrokenLine)
+    onClick: clickHandlerFactory(VectorStyle.BrokenLine),
   },
   {
     key: VectorStyle.PointDrawLine,
     icon: "line_dot",
     text: "点画线",
-    onClick: clickHandlerFactory(VectorStyle.PointDrawLine)
+    onClick: clickHandlerFactory(VectorStyle.PointDrawLine),
   },
   // {key: VectorStyle.Greenbelt, icon: "treelawn", text: "绿化带 ", onClick: clickHandlerFactory(VectorStyle.Greenbelt)},
-]
+];
 
 const lineWidthMenu = [
   {
     key: VectorWeight.Bold,
-    icon: 'l_thick',
+    icon: "l_thick",
     text: "宽度",
     onClick: () => {
-      clickHandlerFactory(VectorWeight.Thinning)()
-      menus.value[1] = lineWidthMenu[1]
-    }
+      clickHandlerFactory(VectorWeight.Thinning)();
+      menus.value[1] = lineWidthMenu[1];
+    },
   },
   {
     key: VectorWeight.Thinning,
-    icon: 'l_thin',
+    icon: "l_thin",
     text: "宽度",
     onClick: () => {
-      clickHandlerFactory(VectorWeight.Bold)()
-      menus.value[1] = lineWidthMenu[0]
-    }
+      clickHandlerFactory(VectorWeight.Bold)();
+      menus.value[1] = lineWidthMenu[0];
+    },
   },
-]
+];
 
-const appendMenus = props.geo.type === VectorType.CurveRoadEdge
-  ? [
-      {
-        key: VectorEvents.AddCrossPoint,
-        icon: "control_a",
-        text: "加控制点",
-        onClick: clickHandlerFactory(VectorEvents.AddCrossPoint)
-      },
-      {
-        key: VectorEvents.MinusCrossPoint,
-        icon: "control_d",
-        text: "减控制点",
-        onClick: clickHandlerFactory(VectorEvents.MinusCrossPoint)
-      },
-    ]
-  : []
-const childMenus = ref<UnwrapRef<typeof menus>>()
+const appendMenus =
+  props.geo.type === VectorType.CurveRoadEdge
+    ? [
+        // {
+        //   key: VectorEvents.AddCrossPoint,
+        //   icon: "control_a",
+        //   text: "加控制点",
+        //   onClick: clickHandlerFactory(VectorEvents.AddCrossPoint)
+        // },
+        // {
+        //   key: VectorEvents.MinusCrossPoint,
+        //   icon: "control_d",
+        //   text: "减控制点",
+        //   onClick: clickHandlerFactory(VectorEvents.MinusCrossPoint)
+        // },
+      ]
+    : [];
+const childMenus = ref<UnwrapRef<typeof menus>>();
 // console.log(vector.value)
 const menus = ref([
   {
@@ -111,18 +111,20 @@ const menus = ref([
     text: "单实线",
     icon: "line",
     onClick() {
-      childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu
-    }
+      childMenus.value = toRaw(childMenus.value) === lineTypeMenu ? null : lineTypeMenu;
+    },
   },
   vector.value?.weight === VectorWeight.Bold ? lineWidthMenu[0] : lineWidthMenu[1],
-  ...appendMenus
-])
+  ...appendMenus,
+]);
 
 const active = computed(() =>
-  toRaw(childMenus.value) === lineTypeMenu ? menus.value[0]
-    : toRaw(childMenus.value) === lineWidthMenu ? menus.value[1] : null
-)
-
+  toRaw(childMenus.value) === lineTypeMenu
+    ? menus.value[0]
+    : toRaw(childMenus.value) === lineWidthMenu
+    ? menus.value[1]
+    : null
+);
 </script>
 
 <style scoped lang="scss">

src/views/roads/tabulation.vue

@@ -2,76 +2,70 @@
   <MainPanel>
     <template v-slot:header>
       <Header title="现场绘图 | 制表" :on-back="onBack" type="return">
-        <ui-button
-            type="primary"
-            @click="saveHandler"
-            width="96px"
-        >
-          保存
-        </ui-button>
+        <ui-button type="primary" @click="saveHandler" width="96px"> 保存 </ui-button>
       </Header>
     </template>
 
-    <div class="tab-layout" v-if="roadPhoto" :class="{downMode}">
+    <div class="tab-layout" v-if="roadPhoto" :class="{ downMode }">
       <div class="content" ref="layoutRef">
         <table>
           <tr>
             <td class="value title" colspan="6" height="64">
-              <span v-if="downMode">{{roadPhoto.title}}</span>
+              <span v-if="downMode">{{ roadPhoto.title }}</span>
               <ui-input
-                  v-else
-                  type="text"
-                  @input="input"
-                  v-model="roadPhoto.title"
-                  @blur="history.push"
+                v-else
+                type="text"
+                @input="input"
+                v-model="roadPhoto.title"
+                @blur="history.push"
               />
             </td>
           </tr>
           <tr>
             <td class="label" width="150" height="64">到达事故现场时间</td>
             <td class="value">
-              <span v-if="downMode">{{history.value.arrivalTime}}</span>
+              <span v-if="downMode">{{ history.value.arrivalTime }}</span>
               <ui-input
-                  v-else
-                  type="text"
-                  @input="input"
-                  v-model="history.value.arrivalTime"
-                  @blur="history.push"
+                v-else
+                type="text"
+                @input="input"
+                v-model="history.value.arrivalTime"
+                @blur="history.push"
               />
             </td>
             <td class="label" width="100">天气</td>
             <td class="value" width="80">
-              <span v-if="downMode">{{history.value.weather}}</span>
+              <span v-if="downMode">{{ history.value.weather }}</span>
               <ui-input
-                  v-else
-                  type="text"
-                  @input="input"
-                  v-model="history.value.weather"
-                  @blur="history.push"
+                v-else
+                type="text"
+                @input="input"
+                v-model="history.value.weather"
+                @blur="history.push"
               />
             </td>
             <td class="label" width="100">路面性质</td>
             <td class="value" width="150">
-              <span v-if="downMode">{{history.value.conditions}}</span>
+              <span v-if="downMode">{{ history.value.conditions }}</span>
               <ui-input
-                  v-else
-                  type="text"
-                  @input="input"
-                  v-model="history.value.conditions"
-                  @blur="history.push"
+                v-else
+                type="text"
+                @input="input"
+                v-model="history.value.conditions"
+                @blur="history.push"
               />
             </td>
           </tr>
           <tr>
-            <td class="label"  height="64">事故发生地点</td>
+            <td class="label" height="64">事故发生地点</td>
             <td class="value" colspan="5">
-              <span v-if="downMode">{{history.value.location}}</span>
+              <span v-if="downMode">{{ history.value.location }}</span>
               <ui-input
-                  v-else
-                  type="text"
-                  @input="input"
-                  v-model="history.value.location"
-                  @blur="history.push"
+                v-else
+                type="text"
+                @input="input"
+                v-model="history.value.location"
+                @blur="history.push"
               />
             </td>
           </tr>
@@ -79,17 +73,17 @@
             <td class="image" colspan="6" height="360">
               <div class="photo-layout">
                 <img
-                    :src="useStaticUrl(roadPhoto.url).value"
-                    @blur="history.push"
-                    class="photo"
-                    :style="{transform: photoCSSMatrix}"
-                    ref="photoRef"
+                  :src="useStaticUrl(roadPhoto.url).value"
+                  @blur="history.push"
+                  class="photo"
+                  :style="{ transform: photoCSSMatrix }"
+                  ref="photoRef"
                 />
                 <img
-                    src="/static/compass.png"
-                    class="compass"
-                    :style="{transform: compassCSSMatrix}"
-                    ref="compassRef"
+                  src="/static/compass.png"
+                  class="compass"
+                  :style="{ transform: compassCSSMatrix }"
+                  ref="compassRef"
                 />
                 <p class="compass-info">比例1 : {{ proportion }}</p>
               </div>
@@ -97,17 +91,17 @@
           </tr>
           <tr>
             <td class="value" colspan="6" height="64">
-              <span v-if="downMode">{{history.value.illustrate}}</span>
+              <span v-if="downMode">{{ history.value.illustrate }}</span>
               <ui-input
-                  v-else
-                  type="text"
-                  @input="input"
-                  v-model="history.value.illustrate"
-                  @blur="history.push"
+                v-else
+                type="text"
+                @input="input"
+                v-model="history.value.illustrate"
+                @blur="history.push"
               />
             </td>
           </tr>
-          <tr >
+          <tr>
             <td class="value date" colspan="6" height="48">
               {{ formatDate(new Date(), "yyyy年MM月dd日hh时mm分") }}
             </td>
@@ -125,103 +119,107 @@
 </template>
 
 <script setup lang="ts">
-import { router, writeRouteName } from '@/router'
+import { router, writeRouteName } from "@/router";
 import { formatDate } from "@/utils";
-import {computed, nextTick, ref, watchEffect} from "vue";
-import { useHistory } from '@/hook/useHistory'
-import {roadPhotos, RoadPhoto, getDefaultTable} from "@/store/roadPhotos";
-import {useStaticUrl} from "@/hook/useStaticUrl";
-import html2canvas from 'html2canvas'
+import { computed, nextTick, onDeactivated, ref, watchEffect } from "vue";
+import { useHistory } from "@/hook/useHistory";
+import { roadPhotos, RoadPhoto, getDefaultTable } from "@/store/roadPhotos";
+import { useStaticUrl } from "@/hook/useStaticUrl";
+import html2canvas from "html2canvas";
 import UiButton from "@/components/base/components/button/index.vue";
 import UiInput from "@/components/base/components/input/index.vue";
-import {HandMode, useHand} from '@/hook/useHand'
+import { HandMode, useHand } from "@/hook/useHand";
 import Header from "@/components/photos/header.vue";
 import MainPanel from "@/components/main-panel/index.vue";
-import {downloadImage, uploadImage} from "@/store/sync";
-import {Mode} from "@/views/graphic/menus";
+import { downloadImage, uploadImage } from "@/store/sync";
+import { Mode } from "@/views/graphic/menus";
 import Message from "@/components/base/components/message/message.vue";
 
 const roadPhoto = computed<RoadPhoto>(() => {
-  let route, params, data
-  if (((route = router.currentRoute.value).name === writeRouteName.tabulation)
-    && (params = route.params).id
-    && (data = roadPhotos.value.find(data => data.id === params.id))) {
-    return data
+  let route, params, data;
+  if (
+    (route = router.currentRoute.value).name === writeRouteName.tabulation &&
+    (params = route.params).id &&
+    (data = roadPhotos.value.find((data) => data.id === params.id))
+  ) {
+    return data;
   } else {
     // router.back();
   }
-})
+});
 const history = computed(
   () => roadPhoto.value && useHistory(getDefaultTable(roadPhoto.value))
-)
+);
 
-const input = () => history.value.state.hasRedo = false
+const input = () => (history.value.state.hasRedo = false);
 
-const compassRef = ref<HTMLImageElement>()
+const compassRef = ref<HTMLImageElement>();
 const { cssMatrix: compassCSSMatrix, matrix: compassMatrix } = useHand(
   compassRef,
   HandMode.Angle,
   () => {
-    history.value.value.compassAngle = compassMatrix.value
-    history.value.push()
+    history.value.value.compassAngle = compassMatrix.value;
+    history.value.push();
   },
   history.value.value.compassAngle
-)
-const photoRef = ref<HTMLImageElement>()
+);
+const photoRef = ref<HTMLImageElement>();
 const { cssMatrix: photoCSSMatrix, matrix: photoMatrix } = useHand(
   photoRef,
   HandMode.MoveAndScale,
   () => {
-    history.value.value.imageTransform = photoMatrix.value
-    history.value.push()
+    history.value.value.imageTransform = photoMatrix.value;
+    history.value.push();
   },
   history.value.value.imageTransform
-)
-
-const proportion = ref(1)
-const photoLoaded = ref(false)
+);
+onDeactivated(() => (photoLoaded.value = false));
+const proportion = ref(1);
+const photoLoaded = ref(false);
 watchEffect(() => {
   if (!roadPhoto.value || !photoRef.value) {
     return;
   }
   if (!photoLoaded.value) {
-    photoRef.value.onload = () => photoLoaded.value = true
+    photoRef.value.onload = () => (photoLoaded.value = true);
+    return;
   }
-  const scale = roadPhoto.value.data.scale || 1
-  const martrixScale = photoMatrix.value[0]
-  const photoWidth = photoRef.value.naturalWidth
-  const prop = ((photoWidth / photoRef.value.offsetWidth) * scale) / martrixScale
-  proportion.value = Math.ceil(prop * 100) / 100
-})
-
+  const scale = roadPhoto.value.data.scale || 1;
+  const martrixScale = photoMatrix.value[0];
+  const photoWidth = photoRef.value.naturalWidth;
+  const prop = ((photoWidth / photoRef.value.offsetWidth) * scale) / martrixScale;
+  console.log(scale, martrixScale, photoWidth, prop);
+  proportion.value = Math.ceil(prop * 100) / 100;
+});
 
 const onBack = () => {
   router.replace({
     name: writeRouteName.graphic,
-    params: {mode: Mode.Road, id: roadPhoto.value.id, action: 'update'}
-  })
-}
+    params: { mode: Mode.Road, id: roadPhoto.value.id, action: "update" },
+  });
+};
 
-const downMode = ref(false)
-const layoutRef = ref<HTMLDivElement>()
+const downMode = ref(false);
+const layoutRef = ref<HTMLDivElement>();
 const getLayoutImage = async () => {
-  downMode.value = true
-  await nextTick()
-  const canvas = await html2canvas(layoutRef.value)
-  Message.success({ msg: "已保存至相册", time: 2000 } )
-  downMode.value = false
-  const blob = await new Promise<Blob>(resolve => canvas.toBlob(resolve, "image/jpeg", 0.95))
-  await downloadImage(blob)
-  return await uploadImage(blob)
-}
+  downMode.value = true;
+  await nextTick();
+  const canvas = await html2canvas(layoutRef.value);
+  Message.success({ msg: "已保存至相册", time: 2000 });
+  downMode.value = false;
+  const blob = await new Promise<Blob>((resolve) =>
+    canvas.toBlob(resolve, "image/jpeg", 0.95)
+  );
+  await downloadImage(blob);
+  return await uploadImage(blob);
+};
 const saveHandler = async () => {
   roadPhoto.value.table = {
     ...history.value.value,
-    url: await getLayoutImage()
-  }
-  router.replace({name: writeRouteName.roads})
-}
-
+    url: await getLayoutImage(),
+  };
+  router.replace({ name: writeRouteName.roads });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -286,7 +284,6 @@ const saveHandler = async () => {
   height: 800px;
   border-collapse: collapse;
 
-
   tr:not(:first-child) {
     &:nth-child(2) td {
       border-top: 2px solid #000;
@@ -307,7 +304,7 @@ const saveHandler = async () => {
 
   .value {
     height: 43px;
-    background-color: #D4E8FF;
+    background-color: #d4e8ff;
   }
 
   .title {

src/views/scene/TrackMeasure.vue

@@ -1,46 +1,45 @@
 <template>
   <div class="photo-btn">
-    <ButtonPane
-        class="item fun-ctrl"
-        :size="80"
-        @click="callback"
-    >
+    <ButtonPane class="item fun-ctrl" :size="80" @click="callback">
       <ui-icon type="affirm" class="icon" />
     </ButtonPane>
     <ButtonPane class="item fun-ctrl" :size="80" @click="active = !active">
-      <ui-icon type="line_h" class="icon" :class="{active}" />
+      <ui-icon type="line_h" class="icon" :class="{ active }" />
     </ButtonPane>
   </div>
 </template>
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import ButtonPane from "@/components/button-pane/index.vue";
-import {startMeasure, SuccessMeasureAtom} from "@/views/scene/linkage/measure";
-import {onActivated, onMounted, ref, watchEffect} from "vue";
-import {tempMeasures} from "@/store/measure";
-import {measureDisabledStack} from '@/hook/custom'
+import { startMeasure, SuccessMeasureAtom } from "@/views/scene/linkage/measure";
+import { onActivated, onMounted, ref, watchEffect, nextTick } from "vue";
+import { tempMeasures } from "@/store/measure";
+import { measureDisabledStack } from "@/hook/custom";
+import { useSDK } from "@/hook";
 
-const props = defineProps<{ onConfirm: (data: SuccessMeasureAtom) => void }>()
-const active = ref(true)
+const props = defineProps<{ onConfirm: (data: SuccessMeasureAtom) => void }>();
+const active = ref(true);
 const callback = () => {
-  props.onConfirm(tempMeasures.value[0] as any)
-  tempMeasures.value = []
-}
+  props.onConfirm(tempMeasures.value[0] as any);
+  tempMeasures.value = [];
+};
 watchEffect(() => {
   if (active.value) {
-    tempMeasures.value = []
-    startMeasure('L_LINE', 'red')
-      .then((measure) => {
-        if (measure) {
-          active.value = null
-          tempMeasures.value = [measure]
-
-          console.log(tempMeasures.value)
-        }
-      })
+    tempMeasures.value = [];
+    startMeasure("L_LINE", "red").then((measure) => {
+      if (measure) {
+        active.value = null;
+        tempMeasures.value = [measure];
+        nextTick(() => {
+          const canvas = useSDK().carry.measureMap.get(measure);
+          canvas.bus.on("update", (pos) => {
+            measure.length = canvas.getDistance().value;
+          });
+        });
+      }
+    });
   }
-})
-
+});
 </script>
 
 <style lang="scss" scoped>
@@ -66,5 +65,4 @@ watchEffect(() => {
     font-size: 28px;
   }
 }
-
 </style>