fix: 1

src/components/photos/index.vue

@@ -2,25 +2,29 @@
   <div class="photos-layout">
     <div class="photos" v-if="data.length">
       <div
-          v-for="(photo, index) in data"
-          :key="photo.id"
-          class="photo"
-          @click="selectMode ? changeSelects(photo, !selects.includes(photo)) : $emit('update:active', photo)"
+        v-for="(photo, index) in data"
+        :key="photo.id"
+        class="photo"
+        @click="
+          selectMode
+            ? changeSelects(photo, !selects.includes(photo))
+            : $emit('update:active', photo)
+        "
       >
-        <div class="img-layout">
-          <div class="occupying" v-if="!urls.get(photo).value" :style="{paddingTop: ratio}">
+        <div class="img-layout" :style="{ paddingTop: ratio }">
+          <div class="occupying" v-if="!urls.get(photo).value">
             <ui-icon type="map" />
           </div>
           <img :src="urls.get(photo).value" v-else />
           <ui-input
-              width="24px"
-              height="24px"
-              v-if="selectMode"
-              type="checkbox"
-              :modelValue="selects.includes(photo)"
-              @update:modelValue="selected => changeSelects(photo, selected)"
-              @click.stop
-              class="photo-select"
+            width="24px"
+            height="24px"
+            v-if="selectMode"
+            type="checkbox"
+            :modelValue="selects.includes(photo)"
+            @update:modelValue="(selected) => changeSelects(photo, selected)"
+            @click.stop
+            class="photo-select"
           />
         </div>
         <slot :data="photo" :index="index" />
@@ -30,45 +34,48 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useStaticUrl } from '@/hook/useStaticUrl'
+import { useStaticUrl } from "@/hook/useStaticUrl";
 import UiInput from "@/components/base/components/input/index.vue";
 import Undata from "./undata.vue";
-import {computed, reactive, Ref} from "vue";
+import { computed, reactive, Ref } from "vue";
 
-type Item = { url: string, id: string }
+type Item = { url: string; id: string };
 
 const props = defineProps<{
-  data: Item[],
-  undataMsg?: string
-  getURL?: (data: any) => string
-  active?: Item,
-  selects?: Item[],
-  selectMode?: boolean
-}>()
+  data: Item[];
+  undataMsg?: string;
+  getURL?: (data: any) => string;
+  active?: Item;
+  selects?: Item[];
+  selectMode?: boolean;
+}>();
 
 const emit = defineEmits<{
-  (e: "update:active", a: Item): void,
-  (e: "update:selects", a: Item[]): void,
-}>()
+  (e: "update:active", a: Item): void;
+  (e: "update:selects", a: Item[]): void;
+}>();
 
 const urls = computed(() => {
-  const urls = reactive(new Map<Item, Ref<string>>())
-  props.data.forEach(item => {
-    urls.set(item, useStaticUrl(props.getURL ? props.getURL(item) : item.url))
-  })
-  return urls
-})
-const ratio = (window.innerHeight / window.innerWidth) * 100 + '%'
+  const urls = reactive(new Map<Item, Ref<string>>());
+  props.data.forEach((item) => {
+    urls.set(item, useStaticUrl(props.getURL ? props.getURL(item) : item.url));
+  });
+  return urls;
+});
+const ratio = (window.innerHeight / window.innerWidth) * 100 + "%";
 const changeSelects = (item: Item, selected: boolean) => {
-  const olSelected = props.selects.includes(item)
+  const olSelected = props.selects.includes(item);
   if (selected !== olSelected) {
     if (selected) {
-      emit('update:selects', [...props.selects, item])
+      emit("update:selects", [...props.selects, item]);
     } else {
-      emit('update:selects', props.selects.filter(oItem => oItem !== item))
+      emit(
+        "update:selects",
+        props.selects.filter((oItem) => oItem !== item)
+      );
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -79,7 +86,7 @@ const changeSelects = (item: Item, selected: boolean) => {
   right: 0;
   bottom: 0;
   overflow-y: auto;
-  background: #2E2E2E;
+  background: #2e2e2e;
 }
 .photos {
   display: grid;
@@ -99,10 +106,13 @@ const changeSelects = (item: Item, selected: boolean) => {
 
 .img-layout {
   position: relative;
-  height: 100%;
+  height: 0 !important;
 }
 .occupying,
 .photo img {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -110,8 +120,10 @@ const changeSelects = (item: Item, selected: boolean) => {
 }
 
 .occupying {
-  background: #1A1A1A;
-  position: relative;
+  background: #1a1a1a;
+  position: absolute;
+  height: 100%;
+  width: 100%;
 
   .icon {
     position: absolute;
@@ -119,7 +131,7 @@ const changeSelects = (item: Item, selected: boolean) => {
     font-size: 30px;
     left: 50%;
     transform: translate(-50%, -50%);
-    color: rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.1);
   }
 }
 </style>

src/graphic/Geometry/CurveLine.js

@@ -2,6 +2,8 @@ import VectorType from "../enum/VectorType.js";
 import SelectState from "../enum/SelectState.js";
 import Geometry from "./Geometry";
 import Constant from "../Constant.js";
+import VectorStyle from "../enum/VectorStyle.js";
+import VectorWight from "../enum/VectorWeight.js";
 
 export default class CurveLine extends Geometry {
   constructor(startId, endId, vectorId) {
@@ -9,6 +11,8 @@ export default class CurveLine extends Geometry {
     this.startId = startId;
     this.endId = endId;
     this.points = null;
+    this.style = VectorStyle.SingleSolidLine;
+    this.weight = VectorWight.Thinning;
     this.curves = null;
     this.geoType = VectorType.CurveLine;
     this.setId(vectorId);

src/graphic/Geometry/CurveRoadEdge.js

@@ -2,6 +2,8 @@
 import Geometry from "./Geometry.js";
 import VectorType from "../enum/VectorType.js";
 import { mathUtil } from "../Util/MathUtil.js";
+import VectorWight from "../enum/VectorWeight.js";
+import VectorStyle from "../enum/VectorStyle.js";
 
 export default class CurveRoadEdge extends Geometry {
   constructor(start, end, vectorId, parentId, points) {
@@ -10,7 +12,8 @@ export default class CurveRoadEdge extends Geometry {
     this.start = {};
     this.end = {};
     this.vectorId = null;
-    this.style = null;
+    this.style = VectorStyle.SingleSolidLine;
+    this.weight = VectorWight.Thinning;
     this.points = points || [];
     this.curves = [];
     this.geoType = VectorType.CurveRoadEdge;

src/graphic/Geometry/Line.js

@@ -1,6 +1,8 @@
 import VectorType from "../enum/VectorType.js";
 import VectorCategory from "../enum/VectorCategory.js";
 import SelectState from "../enum/SelectState.js";
+import VectorWight from "../enum/VectorWeight.js";
+import VectorStyle from "../enum/VectorStyle.js";
 import Geometry from "./Geometry";
 import Constant from "../Constant.js";
 import Style from "@/graphic/CanvasStyle/index.js";
@@ -15,6 +17,8 @@ export default class Line extends Geometry {
     this.locationMode = null;
     this.linkedFixPointId = null;
     this.linkedBasePointId = null;
+    this.style = VectorStyle.SingleSolidLine;
+    this.weight = VectorWight.Thinning;
     this.color = Style.SingleArrowLine.strokeStyle; //箭头类型会用到
     this.value = null; //测量线会用到
     this.geoType = VectorType.Line;

src/graphic/Geometry/RoadEdge.js

@@ -1,6 +1,8 @@
 //墙的边缘线
 import Geometry from "./Geometry.js";
 import VectorType from "../enum/VectorType.js";
+import VectorWight from "../enum/VectorWeight.js";
+import VectorStyle from "../enum/VectorStyle.js";
 import { mathUtil } from "../Util/MathUtil.js";
 
 export default class RoadEdge extends Geometry {
@@ -10,7 +12,8 @@ export default class RoadEdge extends Geometry {
     this.start = {};
     this.end = {};
     this.vectorId = null;
-    this.style = null;
+    this.style = VectorStyle.SingleSolidLine;
+    this.weight = VectorWight.Thinning;
     this.geoType = VectorType.RoadEdge;
     this.lineWidth = 4;
     this.setId(vectorId);

src/graphic/Renderer/Draw.js

@@ -399,6 +399,22 @@ export default class Draw {
     if (canvas) {
       this.canvas = canvas;
       this.context = canvas.getContext("2d");
+
+      const saveRaw = this.context.save.bind(this.context);
+      const restoreRaw = this.context.restore.bind(this.context);
+      let index = 0;
+      this.context.save = saveRaw;
+      // this.context.save = () => {
+      //   index++;
+      //   console.error("save", index);
+      //   saveRaw();
+      // };
+      this.context.restore = restoreRaw;
+      // this.context.restore = () => {
+      //   index--;
+      //   console.log("restore", index);
+      //   restoreRaw();
+      // };
     } else {
       this.context = null;
       this.canvas = null;
@@ -1015,7 +1031,7 @@ export default class Draw {
   }
 
   drawPoint(vector, screenSave) {
-    // console.log(vector);
+    console.log(vector);
     const screenNotDrawTypes = [VectorCategory.Point.NormalPoint];
     if (!screenSave) {
       if (
@@ -1039,12 +1055,14 @@ export default class Draw {
       const lineid = Object.keys(vector.parent)[0];
       let line;
       if (!(lineid && (line = dataService.getLine(lineid)))) {
+        ctx.restore();
         return;
       }
       const [stylea, attr] = help.getVectorStyle(line, line.category);
       style = {
         ...style,
         ...stylea,
+        fillStyle: attr ? "#fff" : stylea.strokeStyle,
       };
     } else if (vector.category === VectorCategory.Point.FixPoint) {
       const text = dataService.getText(vector?.linkedTextId);

src/views/graphic/header.vue

@@ -1,106 +1,115 @@
 <template>
   <div v-if="data" class="graphic-header">
     <div class="title">
-      <ui-icon class="head-icon" type="return" @click="router.back"/>
-      <p>{{ isRoad ? '现场绘图' : '事故照片' }}</p>
+      <ui-icon class="head-icon" type="return" @click="router.back" />
+      <p>{{ isRoad ? "现场绘图" : "事故照片" }}</p>
     </div>
     <div class="actions">
       <div
-          v-for="menu in menus"
-          :key="menu.text"
-          :class="{disabled: menu.disable}"
-          class="action fun-ctrl"
-          @click="menu.onClick"
+        v-for="menu in menus"
+        :key="menu.text"
+        :class="{ disabled: menu.disable }"
+        class="action fun-ctrl"
+        @click="menu.onClick"
       >
-        <ui-icon :type="menu.icon"/>
+        <ui-icon :type="menu.icon" />
         <p>{{ menu.text }}</p>
         <ui-input
-            v-if="menu.icon === 'map'"
-            :modelValue="graphicState.showBackImage"
-            class="map-status"
-            type="checkbox"
+          v-if="menu.icon === 'map'"
+          :modelValue="graphicState.showBackImage"
+          class="map-status"
+          type="checkbox"
         />
       </div>
     </div>
 
     <div class="table">
       <ui-input
-          v-if="options"
-          v-model="(data as AccidentPhoto).type"
-          :options="options"
-          height="32px"
-          type="select"
-          width="120px"
+        v-if="options"
+        v-model="(data as AccidentPhoto).type"
+        :options="options"
+        height="32px"
+        type="select"
+        width="120px"
       />
-      <ui-button :class="{['save-file']: isRoad}" :type="isRoad ? undefined : 'primary'" class="save" width="100px"
-                 @click="saveHandler">
+      <ui-button
+        :class="{ ['save-file']: isRoad }"
+        :type="isRoad ? undefined : 'primary'"
+        class="save"
+        width="100px"
+        @click="saveHandler"
+      >
         保存
       </ui-button>
-      <ui-button v-if="isRoad" class="save" type="primary" width="100px" @click="createTable">
+      <ui-button
+        v-if="isRoad"
+        class="save"
+        type="primary"
+        width="100px"
+        @click="createTable"
+      >
         制表
       </ui-button>
     </div>
     <div
-        class="meterPerPixel"
-        v-if="currentMeterPerPixel"
-        :style="{color: graphicState.showBackImage ? '#fff' : '#16181A'}"
+      class="meterPerPixel"
+      v-if="currentMeterPerPixel && isRoad"
+      :style="{ color: graphicState.showBackImage ? '#fff' : '#16181A' }"
     >
       1 : {{ currentMeterPerPixel }}
     </div>
   </div>
-
 </template>
 <script lang="ts" setup>
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiButton from "@/components/base/components/button/index.vue";
-import {Mode} from './menus'
-import {changeStore, drawRef, graphicState} from '@/hook/useGraphic'
-import {computed, onActivated, onDeactivated, ref, watchEffect} from "vue";
-import {router, writeRouteName} from '@/router'
-import {AccidentPhoto, accidentPhotos, types} from '@/store/accidentPhotos'
-import {useData} from './data'
+import { Mode } from "./menus";
+import { changeStore, drawRef, graphicState } from "@/hook/useGraphic";
+import { computed, onActivated, onDeactivated, ref, watchEffect } from "vue";
+import { router, writeRouteName } from "@/router";
+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 {genUseLoading} from "@/hook";
-
+import { roadPhotos } from "@/store/roadPhotos";
+import { uploadImage } from "@/store/sync";
+import { genUseLoading } from "@/hook";
 
-import {dataService} from "@/graphic/Service/DataService";
+import { dataService } from "@/graphic/Service/DataService";
 
-const data = useData()
-const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode)
-const isRoad = computed(() => mode.value === Mode.Road)
+const data = useData();
+const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode);
+const isRoad = computed(() => mode.value === Mode.Road);
 const options = computed(() =>
-  !isRoad.value ? types.map(t => ({label: t, value: t})) : null
-)
-const currentMeterPerPixel = ref()
-let interval
+  !isRoad.value ? types.map((t) => ({ label: t, value: t })) : null
+);
+const currentMeterPerPixel = ref();
+let interval;
 onActivated(() => {
   interval = setInterval(() => {
     if (drawRef.value) {
       const coordinate = drawRef.value.coordinate;
-      const p1 = coordinate.getXYFromScreen({x: 0, y: 0})
-      const p2 = coordinate.getXYFromScreen({x: 0, y: 1})
+      const p1 = coordinate.getXYFromScreen({ x: 0, y: 0 });
+      const p2 = coordinate.getXYFromScreen({ x: 0, y: 1 });
       const num = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
-      const meterPerPixel =((num * coordinate.res * 100) / coordinate.ratio) / 100
-      currentMeterPerPixel.value = Math.round(1 / meterPerPixel)
+      const meterPerPixel = (num * coordinate.res * 100) / coordinate.ratio / 100;
+      currentMeterPerPixel.value = Math.round(1 / meterPerPixel);
     }
-  }, 200)
-})
-onDeactivated(() => clearInterval(interval))
+  }, 200);
+});
+onDeactivated(() => clearInterval(interval));
 
 const backImageChang = (show) => {
-  dataService.setGridDisplay(!show)
-  drawRef.value.uiControl.menu_backgroundImg(show)
-}
+  dataService.setGridDisplay(!show);
+  drawRef.value.uiControl.menu_backgroundImg(show);
+};
 
 watchEffect(() => {
   if (data.value && drawRef.value) {
-    backImageChang(true)
+    backImageChang(true);
   }
-})
+});
 
-type Menu = { disable?: boolean, text: string, icon: string, onClick: () => void }
+type Menu = { disable?: boolean; text: string; icon: string; onClick: () => void };
 const menus = computed<Menu[]>(() => {
   const menus = [
     {
@@ -108,71 +117,74 @@ const menus = computed<Menu[]>(() => {
       icon: "backout",
       disable: !graphicState.value.canRevoke,
       onClick: () => {
-        drawRef.value.uiControl.menu_revoke()
-        changeStore()
-      }
+        drawRef.value.uiControl.menu_revoke();
+        changeStore();
+      },
     },
     {
       text: "",
       icon: "redo",
       disable: !graphicState.value.canRecovery,
       onClick: () => {
-        drawRef.value.uiControl.menu_recovery()
-        changeStore()
-      }
+        drawRef.value.uiControl.menu_recovery();
+        changeStore();
+      },
     },
     {
       text: "",
       icon: "clear",
       onClick: () => {
-        drawRef.value.uiControl.menu_clear()
-        changeStore()
-      }
+        drawRef.value.uiControl.menu_clear();
+        changeStore();
+      },
     },
     {
       icon: "reset",
       text: "",
-      onClick: () => drawRef.value.uiControl.menu_view_reset()
-    }
-  ]
+      onClick: () => drawRef.value.uiControl.menu_view_reset(),
+    },
+  ];
 
   if (isRoad.value) {
     menus.splice(menus.length - 1, 0, {
       icon: "map",
       text: ``,
-      onClick: () => backImageChang(!graphicState.value.showBackImage)
-    })
+      onClick: () => backImageChang(!graphicState.value.showBackImage),
+    });
   }
-  return menus
-})
+  return menus;
+});
 
 const saveStore = genUseLoading(async () => {
   const newData = {
     ...data.value,
-    data: JSON.parse(JSON.stringify(drawRef.value.load.save()))
-  }
-  const blob = await drawRef.value.uiControl.screenShot()
-  newData.url = await uploadImage(blob)
-  const origin = isRoad.value ? roadPhotos.value : accidentPhotos.value
-  const index = origin.indexOf(data.value)
+    data: JSON.parse(JSON.stringify(drawRef.value.load.save())),
+  };
+  const blob = await drawRef.value.uiControl.screenShot();
+  newData.url = await uploadImage(blob);
+  const origin = isRoad.value ? roadPhotos.value : accidentPhotos.value;
+  const index = origin.indexOf(data.value);
   if (~index) {
-    origin[index] = newData
+    origin[index] = newData;
   } else {
-    origin.push(newData)
+    origin.push(newData);
   }
-})
+});
 
 const saveHandler = async () => {
-  await saveStore()
-  await router.replace({name: isRoad.value ? writeRouteName.roads : writeRouteName.accidents})
-}
+  await saveStore();
+  await router.replace({
+    name: isRoad.value ? writeRouteName.roads : writeRouteName.accidents,
+  });
+};
 
 const createTable = async () => {
-  await saveStore()
-  await router.replace({name: writeRouteName.tabulation, params: {id: data.value.id}})
-}
-
-
+  await saveStore();
+  await router.replace({
+    name: writeRouteName.tabulation,
+    params: { id: data.value.id },
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -240,7 +252,7 @@ const createTable = async () => {
 .head-icon {
   width: 32px;
   height: 32px;
-  background: rgba(255,255,255,0.1);
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 24px 24px 24px 24px;
   font-size: 16px !important;
   display: flex;
@@ -266,12 +278,11 @@ const createTable = async () => {
 .map-status.ui-input .checkbox {
   width: 12px;
   height: 7px;
-
 }
 
 .map-status.ui-input .checkbox input + .replace {
   border-radius: 4px;
-  background-color: #7E7E7E;
+  background-color: #7e7e7e;
   position: absolute;
   border: none;
 
@@ -285,7 +296,7 @@ const createTable = async () => {
     background-color: #fff;
     top: 1px;
     left: 1px;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
   }
 
   i {