fix: 修改需求

src/assets/public.scss

@@ -1,46 +1,48 @@
 html,
 body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
+  width        : 100%;
+  height       : 100%;
+  margin       : 0;
+  overflow     : hidden;
   --padding-top: 0px;
 }
+
 a {
   color: var(--color-main-normal);
 }
+
 #app {
-  width: 100%;
-  height: 100%;
+  width   : 100%;
+  height  : 100%;
   position: absolute;
   overflow: hidden;
-  left: 0;
-  top: 0;
+  left    : 0;
+  top     : 0;
 }
 
 .clear-float::after {
-  content: '';
+  content: "";
   display: block;
-  clear: both;
+  clear  : both;
 }
 
 .require {
   position: relative;
 
   &::before {
-    content: '*';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 100%;
+    content     : "*";
+    position    : absolute;
+    top         : 50%;
+    transform   : translateY(-50%);
+    right       : 100%;
     margin-right: 4px;
-    color: #fa3f48;
-    line-height: 1.5em;
+    color       : #fa3f48;
+    line-height : 1.5em;
   }
 }
 
 .more-menu {
-  position: relative;
+  position          : relative;
   // &::after {
   //   content: '';
   //   box-sizing: content-box;
@@ -60,7 +62,7 @@ canvas {
 }
 
 .ui-editor-toolbox {
-  top: calc(var(--editor-head-height) + var(--header-top));
+  top       : calc(var(--editor-head-height) + var(--header-top));
   transition: inset ease 0.3s;
 }
 
@@ -76,31 +78,33 @@ input::-ms-reveal {
 /*定义滚动条高宽及背景
  高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width           : 6px;
+  height          : 6px;
   background-color: rgba(0, 0, 0, 0);
 }
+
 /*定义滚动条轨道
   内阴影+圆角*/
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0);
+  border-radius     : 3px;
+  background-color  : rgba(255, 255, 255, 0);
 }
+
 /*定义滑块
   内阴影+圆角*/
 ::-webkit-scrollbar-thumb {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0.5);
+  border-radius     : 3px;
+  background-color  : rgba(255, 255, 255, 0.5);
 }
 
 input:-webkit-autofill {
   /*自动填充文字颜色*/
   -webkit-text-fill-color: #fff !important;
   /*自动填充背景颜色*/
-  -webkit-box-shadow: 0 0 0px 1000px #313131 inset;
-  border-color: var(--colors-primary-base) !important;
+  -webkit-box-shadow     : 0 0 0px 1000px #313131 inset;
+  border-color           : var(--colors-primary-base) !important;
 
   // -webkit-box-shadow: 0 0 0px 1000px #313131 inset !important;//关于解决输入框背景颜色
   // -webkit-text-fill-color: rgba(255,255,255,1)!important;//关于接输入框文字颜色
@@ -118,3 +122,13 @@ pre,
 samp {
   font-family: inherit;
 }
+
+@font-face {
+  font-family: "sr";
+  src        : url("./font/SimSun\ Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "st";
+  src        : url("./font/simsun.ttc") format("truetype");
+}

src/graphic/Geometry/Img.js

@@ -1,3 +1,4 @@
+import { genUseLoading } from "@/hook/useLoading.ts";
 import { coordinate } from "../Coordinate.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import VectorType from "../enum/VectorType.js";
@@ -28,16 +29,18 @@ export default class Img extends Geometry {
   }
 
   setImageData() {
-    return new Promise(async (resolve, reject) => {
+    return genUseLoading(async () => {
       this.imageData = new Image();
       this.imageData.src = await api.getFile(this.src);
-      this.imageData.onload = function () {
-        resolve();
-      };
-      this.imageData.onerror = function () {
-        reject();
-      };
-    });
+      await new Promise((resolve, reject) => {
+        this.imageData.onload = function () {
+          resolve();
+        };
+        this.imageData.onerror = function () {
+          reject();
+        };
+      });
+    })();
   }
 
   setBounding() {

src/store/sync.ts

@@ -8,7 +8,7 @@ import { accidentPhotos } from "@/store/accidentPhotos";
 import { roadPhotos } from "@/store/roadPhotos";
 import { base64ToBlob, blobToBase64, debounce, getId } from "@/utils";
 import { watch } from "vue";
-import { params } from "@/hook";
+import { genUseLoading, params } from "@/hook";
 import router, { writeRouteName } from "@/router";
 import { baseURL } from "@/dbo/main";
 import { defaultUses, uses } from "@/store/SVGLabel";
@@ -62,7 +62,7 @@ export const api = !global.android
           paths[paths.length - 1].includes(type)
         );
         if (notBase64) {
-          // await new Promise(resolve => setTimeout(resolve, 2000))
+          // await new Promise((resolve) => setTimeout(resolve, 2000));
           return baseURL + url;
         } else {
           const data = await axios.get(url, { responseType: "blob" });
@@ -118,7 +118,7 @@ export const api = !global.android
           );
         });
       },
-
+      // genUseLoading()
       async getFile(fileUrl: string) {
         fileUrl = fileUrl.trim();
         if (fileUrl.includes(params.m)) {

src/views/graphic/header.vue

@@ -65,7 +65,7 @@ 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 { computed, onActivated, onDeactivated, ref, watch, watchEffect } from "vue";
 import { router, writeRouteName } from "@/router";
 import { AccidentPhoto, accidentPhotos, types } from "@/store/accidentPhotos";
 import { useData } from "./data";
@@ -103,11 +103,18 @@ const backImageChang = (show) => {
   drawRef.value.uiControl.menu_backgroundImg(show);
 };
 
-watchEffect(() => {
-  if (data.value && drawRef.value) {
-    backImageChang(true);
-  }
-});
+watch(
+  () => ({
+    id: data.value?.id,
+    drawRef: drawRef.value,
+  }),
+  (data, oldData) => {
+    if (data.drawRef && data.id != oldData?.id) {
+      backImageChang(true);
+    }
+  },
+  { immediate: true }
+);
 
 type Menu = { disable?: boolean; text: string; icon: string; onClick: () => void };
 const menus = computed<Menu[]>(() => {

src/views/roads/tabulation.vue

@@ -22,7 +22,7 @@
             </td>
           </tr>
           <tr>
-            <td class="label" width="150" height="42">到达事故现场时间</td>
+            <td class="label" width="218" height="40">到达事故现场时间</td>
             <td class="value">
               <span v-if="downMode">{{ history.value.arrivalTime }}</span>
               <ui-input
@@ -34,7 +34,7 @@
               />
             </td>
             <td class="label" width="100">天气</td>
-            <td class="value" width="80">
+            <td class="value" width="116">
               <span v-if="downMode">{{ history.value.weather }}</span>
               <ui-input
                 v-else
@@ -110,10 +110,10 @@
           </tr>
         </table>
         <div class="signatures">
-          <p class="signature">绘图员：</p>
-          <p class="signature">当事人签名：</p>
           <p class="signature">勘察员：</p>
-          <p class="signature">见证人签名：</p>
+          <p class="signature">绘图员：</p>
+          <p class="signature">当事人签字：</p>
+          <p class="signature">见证人签字：</p>
         </div>
       </div>
     </div>
@@ -136,7 +136,6 @@ import MainPanel from "@/components/main-panel/index.vue";
 import { downloadImage, uploadImage } from "@/store/sync";
 import { Mode } from "@/views/graphic/menus";
 import Message from "@/components/base/components/message/message.vue";
-import { useConfirm } from "@/hook";
 
 const roadPhoto = computed<RoadPhoto>(() => {
   let route, params, data;
@@ -255,9 +254,9 @@ const saveHandler = async () => {
   left: 0;
   right: 0;
 
-  font-family: SimSun-Regular, SimSun;
+  font-family: sr, st;
   color: #000;
-  font-size: 16px;
+  font-size: 20px;
 }
 
 .content {
@@ -270,10 +269,10 @@ const saveHandler = async () => {
   position: relative;
   .photo-layout {
     position: absolute;
-    left: 1px;
-    right: 1px;
-    bottom: 1px;
-    top: 1px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    top: 0px;
     overflow: hidden;
     display: flex;
     justify-content: center;
@@ -350,6 +349,7 @@ const saveHandler = async () => {
 
   .date {
     text-align: right;
+    padding-right: 44px;
   }
 }
 
@@ -358,11 +358,10 @@ const saveHandler = async () => {
     span {
       height: 52px !important;
       font-size: 46px !important;
-      font-family: SimSun-Regular, SimSun;
       font-weight: 400;
       color: #000000;
       line-height: 52px;
-      letter-spacing: 13px;
+      letter-spacing: 10px;
     }
   }
 
@@ -374,9 +373,9 @@ const saveHandler = async () => {
     overflow: hidden;
   }
   .content table .textarea-layout {
-    height: 73px;
+    height: 63px;
     span {
-      padding: 10px 0px;
+      padding: 5px 0px;
       display: block;
       height: 100%;
     }
@@ -388,31 +387,32 @@ const saveHandler = async () => {
 
     tr:not(:first-child) {
       td {
-        border-right: 3px solid #000;
-        border-bottom: 3px solid #000;
+        border-right: 1px solid #000;
+        border-bottom: 1px solid #000;
       }
 
       &:nth-child(2) td {
-        border-top: 3px solid #000;
+        border-top: 2px solid #000;
       }
 
       td:first-child {
-        border-left: 3px solid #000;
+        border-left: 2px solid #000;
       }
       td:last-child {
-        border-right: 3px solid #000;
+        border-right: 2px solid #000;
       }
 
       &:last-child td {
-        border-bottom: 3px solid #000;
+        border-bottom: 2px solid #000;
       }
     }
   }
 }
 
 .signatures {
-  margin-top: 13px;
+  margin-top: 10px;
   display: flex;
+  font-size: 16px;
 
   .signature {
     flex: 1;