feat: .

src/views/scene/photo.vue

@@ -5,45 +5,39 @@
       <ui-icon type="photo" class="icon" />
     </ButtonPane>
 
-    <img
-      v-if="showCoverUrl"
-      :src="showCoverUrl.value"
-      class="cover"
-      :style="{ opacity: showCoverUrl ? '1' : 0 }"
-      @click="router.push(writeRouteName.photos)"
-    />
+    <img v-if="showCoverUrl" :src="showCoverUrl.value" class="cover" :style="{ opacity: showCoverUrl ? '1' : 0 }" @click="router.push(writeRouteName.photos)" />
   </div>
 </template>
 
 <script setup lang="ts">
-import UiIcon from "@/components/base/components/icon/index.vue";
-import ButtonPane from "@/components/button-pane/index.vue";
-import { list } from "@/store/measure";
-import { fixPoints } from "@/store/fixPoint";
-import { baseLines } from "@/store/baseLine";
-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, formatDate, getId } from "@/utils";
-import { computed, nextTick, ref, watchEffect } from "vue";
-import { api, downloadImage, uploadImage } from "@/store/sync";
-import { router, writeRouteName } from "@/router";
-import { LaserSDK, Pos, Pos3D } from "@/sdk";
-import { useStaticUrl } from "@/hook/useStaticUrl";
-import { Loading } from "@kankan/components/index";
-import { generateMixMenus, MenuRaw, menus, findMenuByKey } from "./menus/menus";
+import UiIcon from '@/components/base/components/icon/index.vue';
+import ButtonPane from '@/components/button-pane/index.vue';
+import { list } from '@/store/measure';
+import { fixPoints } from '@/store/fixPoint';
+import { baseLines } from '@/store/baseLine';
+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, formatDate, getId } from '@/utils';
+import { computed, nextTick, ref, watchEffect } from 'vue';
+import { api, downloadImage, uploadImage } from '@/store/sync';
+import { router, writeRouteName } from '@/router';
+import { LaserSDK, Pos, Pos3D } from '@/sdk';
+import { useStaticUrl } from '@/hook/useStaticUrl';
+import { Loading } from '@kankan/components/index';
+import { generateMixMenus, MenuRaw, menus, findMenuByKey } from './menus/menus';
 const menusMix = computed(() => menus);
-const store = generateMixMenus("children", (m) => m, menusMix.value);
+const store = generateMixMenus('children', (m) => m, menusMix.value);
 const showCoverUrl = computed(() => {
   if (photos.value[photos.value.length - 1]?.url) {
     return useStaticUrl(photos.value[photos.value.length - 1].url);
   }
 });
 
-import mp3url from "./camera1.mp3";
+import mp3url from './camera1.mp3';
 const tempPhoto = ref<string>();
 const coverRef = ref<HTMLImageElement>();
 const audio = new Audio(mp3url);
@@ -57,7 +51,7 @@ watchEffect(() => {
 });
 const screenshot = async (sdk: LaserSDK) => {
   const dom = sdk.scene.el;
-  dom.style.pointerEvents = "none";
+  dom.style.pointerEvents = 'none';
 
   const getScreenshot = async (down = false) => {
     const data = sdk.scene.screenshot(dom.offsetWidth, dom.offsetHeight);
@@ -65,9 +59,7 @@ const screenshot = async (sdk: LaserSDK) => {
     const blob = base64ToBlob(base64);
     let url: string;
     if (down) {
-      const filename = `img_${formatDate(new Date(), "yyyyMMddhhmmss")}_${
-        data.meterPerPixel || 1
-      }_${new Date().getTime().toString().substring(8)}.jpg`;
+      const filename = `img_${formatDate(new Date(), 'yyyyMMddhhmmss')}_${data.meterPerPixel || 1}_${new Date().getTime().toString().substring(8)}.jpg`;
       url = await uploadImage(blob, filename);
       await downloadImage(blob, filename);
     } else {
@@ -87,7 +79,7 @@ const screenshot = async (sdk: LaserSDK) => {
   baseLines.value.concat(list.value).forEach((item) => (item.show = true));
   await nextTick();
 
-  dom.style.pointerEvents = "all";
+  dom.style.pointerEvents = 'all';
   return {
     rawUrl: screenshotRaw.url,
     url: screenshot.url,
@@ -95,28 +87,27 @@ const screenshot = async (sdk: LaserSDK) => {
   };
 };
 
-const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> =>
-  poss.map(getCurrentScreen).filter((pos) => !!pos);
+const getCurrentScreens = (poss: Array<Pos3D>): Array<Pos> => poss.map(getCurrentScreen).filter((pos) => !!pos);
 
 const photo = async () => {
   Loading.show();
-  console.log("播放音频");
+  console.log('播放音频');
   try {
     await audio.play();
   } catch (e) {
-    console.error("播放音频错误", e);
+    console.error('播放音频错误', e);
   }
-  console.log("音频播放结束");
+  console.log('音频播放结束');
   const sdk = useSDK();
-  console.log("开始截图");
+  console.log('开始截图');
   const data = await screenshot(sdk);
-  console.log("截图完成");
+  console.log('截图完成');
   tempPhoto.value = await api.getFile(data.rawUrl);
-  console.log("获取到临时文件");
+  console.log('获取到临时文件');
   await nextTick();
 
   const handler = async () => {
-    coverRef.value.removeEventListener("animationend", handler);
+    coverRef.value.removeEventListener('animationend', handler);
     tempPhoto.value = null;
 
     photos.value.push({
@@ -135,18 +126,14 @@ const photo = async () => {
           }
         })
         .filter((poss) => poss?.pos.length === 2),
-      baseLines: baseLines.value
-        .map((data) => getCurrentScreens(data.points))
-        .filter((poss) => poss.length === 2),
-      fixPoints: fixPoints.value
-        .map((data) => ({ text: data.text, pos: getCurrentScreen(data.pos) }))
-        .filter((data) => !!data.pos),
+      baseLines: baseLines.value.map((data) => getCurrentScreens(data.points)).filter((poss) => poss.length === 2),
+      fixPoints: fixPoints.value.map((data) => ({ text: data.text, pos: getCurrentScreen(data.pos) })).filter((data) => !!data.pos),
       basePoints: getCurrentScreens(basePoints.value.map((data) => data.pos)),
     });
 
     Loading.hide();
   };
-  coverRef.value.addEventListener("animationend", handler);
+  coverRef.value.addEventListener('animationend', handler);
 };
 </script>
 
@@ -184,15 +171,27 @@ const photo = async () => {
   border-radius: 24px;
   overflow: hidden;
 }
-
 .face-animation {
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  animation: 1s linear 1 both photo-face;
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    animation: 1s linear 1 both small-photo-face;
+  }
+.full {
+  .face-animation {
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    animation: 1s linear 1 both photo-face;
+  }
 }
 .face-animation.start {
 }
@@ -229,4 +228,38 @@ const photo = async () => {
     top: calc(calc(50%) + 20px);
   }
 }
+@keyframes small-photo-face {
+  from {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    margin-left: 0;
+    margin-top: 0;
+    border-radius: 0;
+  }
+  30%,
+  40%,
+  to {
+    left: 50%;
+    top: 100px;
+    width: 48px;
+    height: 48px;
+    margin-left: -24px;
+    border-radius: 50%;
+    z-index: 3;
+  }
+
+  70% {
+    left: calc(70% - 60px);
+    top: calc(calc(50% - 48px) / 1.5);
+
+ 
+  }
+
+  to {
+    left: calc(100% - 63px);
+    top: calc(calc(50%) + 20px);
+  }
+}
 </style>

src/views/tables/author/author-two.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="author">
     <div class="content">
-      <div class="check-item" @click="checkOptions(checkData1, index)" v-for="(i, index) in checkData1.options">
+      <!-- <div class="check-item" @click="checkOptions(checkData1, index)" v-for="(i, index) in checkData1.options">
         <div class="item">
           <ui-icon :type="checkData1.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
           <span>{{ i.title }}</span>
@@ -10,9 +10,9 @@
             <input type="text" />
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="check-item" @click="checkOptions(checkData, index)" v-for="(i, index) in checkData.options">
-        <div class="item">
+        <div class="item" :style="i.id == 1 || i.id == 4 ? '' : 'display: inline-block'">
           <ui-icon :type="checkData.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
           <span>{{ i.title }}</span>
           <div v-if="i.id == 1 || i.id == 4" class="input-box" style="flex: 1">
@@ -51,6 +51,10 @@ const checkData = ref({
   check: 0,
   options: [
     {
+      id: 1,
+      title: '...',
+    },
+    {
       id: 2,
       title: '一般代理。即代理为参与诉讼、调解，提供法律帮助。',
     },
@@ -96,7 +100,7 @@ div[contenteditable] {
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      margin-bottom: 20px;
+      // margin-bottom: 20px;
     }
     .check-item {
       margin-bottom: 30px;

src/views/tables/extract.vue

@@ -7,77 +7,77 @@
       <table>
         <tr>
           <td width="12%" colspan="2">姓名</td>
-          <td width="20%"><input type="text" /></td>
+          <td width="20%"><div contenteditable></div></td>
           <td width="10%">性别</td>
-          <td width="8%"><input type="text" /></td>
+          <td width="8%"><div contenteditable></div></td>
           <td width="20%">身份证号码</td>
-          <td width="30%" colspan="2"><input type="text" /></td>
+          <td width="30%" colspan="2"><div contenteditable></div></td>
         </tr>
         <tr>
           <td width="15%" colspan="2">事故时间</td>
-          <td width="35%" colspan="3"><input type="text" /></td>
+          <td width="35%" colspan="3"><div contenteditable></div></td>
           <td width="20%">地点</td>
-          <td width="30%" colspan="2"><input type="text" /></td>
+          <td width="30%" colspan="2"><div contenteditable></div></td>
         </tr>
         <tr>
           <td colspan="2">血样（尿样)提取时间</td>
-          <td colspan="6"><input type="text" /></td>
+          <td colspan="6"><div contenteditable></div></td>
         </tr>
         <tr>
           <td colspan="2">血样（尿样)提取地点</td>
-          <td colspan="6"><input type="text" /></td>
+          <td colspan="6"><div contenteditable></div></td>
         </tr>
         <tr>
           <td width="10%" rowspan="4" colspan="1">血样（尿样）提取人员填写</td>
           <td width="5%" rowspan="3">提取登记</td>
           <td colspan="3">A样本盛装容器编号</td>
-          <td><input type="text" /></td>
+          <td><div contenteditable></div></td>
           <td width="10%">提取量</td>
           <td>
             <div>
-              <input type="text" />
+              <div contenteditable></div>
               ml
             </div>
           </td>
         </tr>
         <tr>
           <td colspan="3">B样本盛装容器编号</td>
-          <td><input type="text" /></td>
+          <td><div contenteditable></div></td>
           <td>提取量</td>
           <td>
             <div>
-              <input type="text" />
+              <div contenteditable></div>
               ml
             </div>
           </td>
         </tr>
         <tr>
           <td colspan="1">消毒名称</td>
-          <td colspan="2"><input type="text" /></td>
+          <td colspan="2"><div contenteditable></div></td>
           <td>密封方式</td>
-          <td colspan="2"><input type="text" /></td>
+          <td colspan="2"><div contenteditable></div></td>
         </tr>
         <tr>
           <td width="10%" colspan="2">提取人员单位</td>
-          <td colspan="2"><input type="text" /></td>
+          <td colspan="2"><div contenteditable></div></td>
           <td>提取人员（签名）</td>
-          <td colspan="2"><input type="text" /></td>
+          <td colspan="2"><div contenteditable></div></td>
         </tr>
         <tr>
           <td>通知家属情况</td>
-          <td colspan="7"><input type="text" /></td>
+          <td colspan="7"><div contenteditable></div></td>
         </tr>
         <tr>
           <td>被提取人（签名）</td>
-          <td colspan="2"><input type="text" /></td>
+          <td colspan="2"><div contenteditable></div></td>
           <td>见证人（签名）</td>
-          <td colspan="2"><input type="text" /></td>
+          <td colspan="2"><div contenteditable></div></td>
           <td>交通警察（签名）</td>
-          <td colspan="2"><input type="text" /></td>
+          <td colspan="2"><div contenteditable></div></td>
         </tr>
         <tr>
           <td>办案单位</td>
-          <td colspan="7"><input type="text" /></td>
+          <td colspan="7"><div contenteditable></div></td>
         </tr>
       </table>
     </div>
@@ -141,6 +141,7 @@ div[contenteditable] {
             justify-content: center;
             // word-break: break-all;
             white-space: nowrap;
+            line-height: 110px;
             width: 100%;
               height: 100%;
             input {

src/views/tables/index.vue

@@ -2,8 +2,8 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header :title="headerTitle" type="return">
-        <ui-button v-if="tableType != 'law'" type="primary" width="96px" @click="saveHandler"> 完成 </ui-button>
+      <Header :title="headerTitle" :on-back="onBack" type="return">
+        <ui-button v-if="tableType != 'law'" type="primary" width="96px" @click="saveHandler"> {{ isWrite ? '确定' : '完成' }} </ui-button>
       </Header>
     </template>
 
@@ -16,7 +16,7 @@
         </div>
       </div>
     </div>
-    <Write v-if="isWrite" :text="text" :textIndex="textIndex" @onTextConfirm="onTextConfirm"> </Write>
+    <Write ref="com" v-if="isWrite" :text="text" :textIndex="textIndex" @onTextConfirm="onTextConfirm"> </Write>
   </MainPanel>
 </template>
 
@@ -55,7 +55,7 @@ import doc from './write/doc.vue';
 import law from './law.vue';
 // const eleList = ref([one, two, three, four]);
 // const eleList = ref([authorOne, authorTwo]);
-
+const com = ref(null); // 通过 模板ref 绑定子组件
 const eleList = ref([]);
 const headerTitle = ref('');
 const tableType = ref<string | string[]>();
@@ -78,12 +78,12 @@ const setAskPage = () => {
   initSwiper();
 };
 const goWrite = (data) => {
-  console.error(data)
+  console.error(data);
   isWrite.value = true;
   textIndex.value = data.textIndex;
 };
 const onTextConfirm = (data) => {
-  console.error(data)
+  console.error(data);
   askPage.value = data.page;
   text.value = data.text;
   isWrite.value = false;
@@ -94,6 +94,10 @@ const onTextChange = (data) => {
 };
 
 const saveHandler = genUseLoading(async () => {
+  if (isWrite.value) {
+    com.value.onConfirm();
+    return;
+  }
   await getLayoutImage();
   // router.replace('/scene');
 });
@@ -186,6 +190,13 @@ const initSwiper = () => {
     }
   });
 };
+const onBack = () => {
+  if (isWrite.value) {
+    isWrite.value = false;
+    return;
+  }
+  router.back();
+};
 onActivated(() => {
   initTables();
   initSwiper();
@@ -199,6 +210,8 @@ const initPage = () => {
 };
 onMounted(() => {});
 onDeactivated(() => {
+  isWrite.value = false;
+  text.value = '';
   loaded.value = false;
 });
 </script>

src/views/tables/write/doc.vue

@@ -76,13 +76,14 @@ div[contenteditable] {
   margin: 28px auto 0;
   display: flex;
   font-size: 24px;
+  font-family: SimSun-Regular, SimSun;
 }
 .num-box {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   margin-bottom: 10px;
-
+  font-family: SimSun-Regular, SimSun;
   .input-box {
     width: 64px;
     height: 30px;
@@ -96,7 +97,7 @@ div[contenteditable] {
   width: 100%;
   // height: calc(100vh - 100px);
   height: 1080px;
-
+  font-family: SimSun-Regular, SimSun;
   overflow: hidden;
   .content {
     overflow: hidden;

src/views/tables/write/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="warpper">
     <div class="write-box" id="container">
-      <div @click="onConfirm">确定</div>
+      <!-- <div @click="onConfirm">确定</div> -->
       <!--  -->
       <div class="content" id="content" :style="`height:${inputHeight}px;`">
         <!-- <div contenteditable v-html="text" :style="`height:${lineCount * 40}px;`" @keydown="hanlderWrite($event)" id="write-info"></div> -->
@@ -26,7 +26,6 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-
 });
 const emits = defineEmits(['onTextConfirm', 'onTextChange']);
 const inputText = ref('');
@@ -47,9 +46,9 @@ const onConfirm = () => {
   } else {
     page = page + Math.ceil((msgHeight.value - 400) / 1080);
   }
-  console.log(page);
   emits('onTextConfirm', { text: inputText.value, msgHeight: msgHeight.value, page });
 };
+defineExpose({ onConfirm });
 const msgHeight = ref(40);
 const hanlderWrite = (e) => {
   let msgH = document.getElementById('msg').clientHeight;
@@ -120,10 +119,10 @@ onMounted(async () => {
 .write-box {
   width: 100%;
   height: calc(100vh - 100px);
-  font-size:24px;
-  color:#000;
+  font-size: 24px;
+  color: #000;
   overflow: hidden;
-  font-family: sr, st;
+  font-family: SimSun-Regular, SimSun;
   .content {
     overflow-y: auto;
     overflow-x: hidden;
@@ -149,7 +148,7 @@ onMounted(async () => {
       z-index: 2;
       overflow: hidden;
       font-size: 24px;
-      font-family: sr, st;
+      font-family: SimSun-Regular, SimSun;
     }
     .msg-box {
       min-height: 40px;