fix

src/views/tables/ask.vue

@@ -156,7 +156,7 @@
       <span v-else>被讯问人:</span>
       <div style="flex: 1">
         <input type="text" v-model="data.askerBys" />
-        <div class="content-box">{{ data.askerBys }}</div>
+        <div class="content-box left">{{ data.askerBys }}</div>
       </div>
     </div>
   </div>

src/views/tables/explorate-four.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="explorate" v-if="data" :class="{downMode:downMode}">
+  <div class="explorate" v-if="data" :class="{ downMode: downMode }">
     <div>
       <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
 
@@ -143,12 +143,14 @@
             <span>现场勘查人员签名：</span>
             <div>
               <input type="text" v-model="data.explorateSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
           <div>
             <span>记录人签名：</span>
             <div>
               <input type="text" v-model="data.reportSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
         </div>
@@ -157,12 +159,14 @@
             <span>当事人签名：</span>
             <div>
               <input type="text" v-model="data.clientSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
           <div>
             <span>见证人签名：</span>
             <div>
               <input type="text" v-model="data.witnessSign" />
+              <div class="content-box left">{{ data.witnessSign }}</div>
             </div>
           </div>
         </div>

src/views/tables/explorate-one.vue

@@ -23,19 +23,22 @@
             <div>勘查单位</div>
             <!-- <div class="input-box" contenteditable v-html="data.explorateCompany"></div> -->
             <div class="input-box">
-              <input type="text" v-model="data.explorateCompany" />
+              <input type="text" style="text-align: center" v-model="data.explorateCompany" />
+              <div class="content-box">{{ data.explorateCompany }}</div>
             </div>
           </div>
           <div class="info">
             <div>勘查时间</div>
             <div class="input-box">
-              <input type="text" v-model="data.explorateTime" />
+              <input type="text" style="text-align: center" v-model="data.explorateTime" />
+              <div class="content-box">{{ data.explorateTime }}</div>
             </div>
           </div>
           <div class="info">
             <div>事故时间</div>
             <div class="input-box">
-              <input type="text" v-model="data.accidentTime" />
+              <input type="text" style="text-align: center" v-model="data.accidentTime" />
+              <div class="content-box">{{ data.accidentTime }}</div>
             </div>
           </div>
           <div class="time">
@@ -64,6 +67,7 @@
                             <span>{{ i.title }}</span>
                             <div class="input-box" style="flex: 1" v-if="i.id == 5">
                               <input type="text" v-model="data.administrativeLevel.value" />
+                              <div class="content-box left border-bottom">{{ data.administrativeLevel.value }}</div>
                             </div>
                           </div>
                         </div>
@@ -113,10 +117,12 @@
                 <div class="road-msg">
                   <div class="road-name-text input-box">
                     <input type="text" v-model="data.roadName" />
+                    <div class="content-box left">{{ data.roadName }}</div>
                   </div>
                   <div class="road-num">路号（公路）</div>
                   <div class="road-num-text input-box">
                     <input type="text" v-model="data.roadNum" />
+                    <div class="content-box left">{{ data.roadNum }}</div>
                   </div>
                 </div>
               </div>
@@ -155,10 +161,11 @@
 
             <div style="flex-flow: row wrap">
               <div class="item" v-for="(i, index) in weatherList.options" @click="checkLevel(weatherList, index)">
-                <ui-icon :type="weatherList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                <ui-icon :type="data.weather.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                 <span>{{ i.title }}</span>
                 <div class="input-box" v-if="i.id == 10">
                   <input type="text" v-model="data.weather.value" />
+                  <div class="content-box left border-bottom">{{ data.weather.value }}</div>
                 </div>
               </div>
             </div>
@@ -171,14 +178,16 @@
                   <span class="info-title">{{ i.title }}</span>
                   <div class="check-box">
                     <div class="check-item" :style="j_index == i.options.length - 1 ? 'flex:1;' : ''" v-for="(j, j_index) in i.options" @click="checkEnvironItem(j, index, j_index)">
-                      <ui-icon :type="i.check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                      <ui-icon :type="data.environments[index].check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
                       <span>{{ j.name }}</span>
                       <div class="input-box" v-if="j_index == i.options.length - 1 && i.id != 9">
                         <input type="text" v-model="data.environments[index].value" />
+                        <div class="content-box left">{{ data.environments[index].value }}</div>
                       </div>
                     </div>
                     <div class="input-box" style="flex: none; width: 80%" v-if="!i.options.length">
                       <input type="text" v-model="data.environments[index].value" />
+                      <div class="content-box left">{{ data.environments[index].value }}</div>
                     </div>
                   </div>
                   <!-- <div class="input-box" v-if="index == environments.length - 1">
@@ -193,12 +202,14 @@
               <span>现场勘查人员签名：</span>
               <div>
                 <input type="text" v-model="data.explorateSign" />
+                <div class="content-box left">{{ data.explorateSign }}</div>
               </div>
             </div>
             <div>
               <span>记录人签名：</span>
               <div>
                 <input type="text" v-model="data.reportSign" />
+                <div class="content-box left">{{ data.reportSign }}</div>
               </div>
             </div>
           </div>
@@ -207,12 +218,14 @@
               <span>当事人签名：</span>
               <div>
                 <input type="text" v-model="data.clientSign" />
+                <div class="content-box left">{{ data.clientSign }}</div>
               </div>
             </div>
             <div>
               <span>见证人签名：</span>
               <div>
                 <input type="text" v-model="data.witnessSign" />
+                <div class="content-box left">{{ data.witnessSign }}</div>
               </div>
             </div>
           </div>
@@ -246,18 +259,18 @@ const props = defineProps({
 const data = ref(null);
 
 const layoutRef = ref<HTMLDivElement>();
-const downMode = ref(false);
-const getLayoutImage = async () => {
-  downMode.value = true;
-  await nextTick();
-  console.error(layoutRef.value);
-  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, "12312.jpg");
-  // return await uploadImage(blob);
-};
+// const downMode = ref(false);
+// const getLayoutImage = async () => {
+//   downMode.value = true;
+//   await nextTick();
+//   console.error(layoutRef.value);
+//   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, "12312.jpg");
+//   // return await uploadImage(blob);
+// };
 const sceneTypes = ref({
   check: 0,
   type: "explorateType",
@@ -402,6 +415,7 @@ const weatherList = ref({
 const checkEnvironItem = (item, index, j_index) => {
   environments.value[index].check = item.id;
   data.value.environments[index].check = item.id;
+  console.log(item.id)
 };
 const environments = ref([
   {
@@ -538,6 +552,19 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+  &.border-bottom {
+    border-bottom: 1px solid #000;
+  }
+}
 input {
   width: 100%;
 }
@@ -552,8 +579,14 @@ div {
   // display: grid;
 
   font-family: sr, st;
-
-  // padding: 80px 0 0 0;
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   > div {
     // padding: 20px 50px 30px;
   }
@@ -576,13 +609,13 @@ div {
     }
   }
 
-  &.downMode {
-    width: 1050px;
-    height: 1485px;
-    > div {
-      padding: 125px 100px 75px;
-    }
-  }
+  // &.downMode {
+  //   width: 1050px;
+  //   height: 1485px;
+  //   > div {
+  //     padding: 125px 100px 75px;
+  //   }
+  // }
 }
 
 .wrapper {

src/views/tables/explorate-three.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="explorate" v-if="data">
+  <div class="explorate" v-if="data" :class="{ downMode }">
     <div>
       <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
 
@@ -10,23 +10,38 @@
 
           <div class="item column">
             <span>（一）地面痕迹：</span>
-            <div><textarea v-model="data.groundTrace" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <textarea v-model="data.groundTrace" name="" id="" cols="30" rows="10"></textarea>
+              <div class="content-box top-left">{{ data.groundTrace }}</div>
+            </div>
           </div>
           <div class="item column">
             <span>（二）车体痕迹：</span>
-            <div><textarea v-model="data.carTrace" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.carTrace }}</div>
+              <textarea v-model="data.carTrace" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
           <div class="item column">
             <span>（三）人体痕迹：</span>
-            <div><textarea v-model="data.bodyTrace" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.bodyTrace }}</div>
+              <textarea v-model="data.bodyTrace" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
           <div class="item column">
             <span>（四）物证：</span>
-            <div><textarea v-model="data.meterialEvidence" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.meterialEvidence }}</div>
+              <textarea v-model="data.meterialEvidence" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
           <div class="item column">
             <span>（五）其他：</span>
-            <div><textarea v-model="data.other" name="" id="" cols="30" rows="10"></textarea></div>
+            <div>
+              <div class="content-box top-left">{{ data.other }}</div>
+              <textarea v-model="data.other" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
         </div>
 
@@ -35,12 +50,14 @@
             <span>现场勘查人员签名：</span>
             <div>
               <input type="text" v-model="data.explorateSign" />
+              <div class="content-box left">{{ data.explorateSign }}</div>
             </div>
           </div>
           <div>
             <span>记录人签名：</span>
             <div>
               <input type="text" v-model="data.reportSign" />
+              <div class="content-box left">{{ data.reportSign }}</div>
             </div>
           </div>
         </div>
@@ -49,12 +66,14 @@
             <span>当事人签名：</span>
             <div>
               <input type="text" v-model="data.clientSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
             </div>
           </div>
           <div>
             <span>见证人签名：</span>
             <div>
               <input type="text" v-model="data.witnessSign" />
+              <div class="content-box left">{{ data.witnessSign }}</div>
             </div>
           </div>
         </div>
@@ -97,6 +116,21 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  word-break: break-all;
+  &.left {
+    justify-content: flex-start;
+  }
+  &.top-left {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+}
 .explorate {
   color: #000;
   width: 100%;
@@ -104,6 +138,15 @@ onMounted(() => {
   // display: grid;
 
   font-family: sr, st;
+  &.downMode {
+    input,
+    textarea {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
 
   // padding: 80px 0 0 0;
   > div {

src/views/tables/explorate-two.vue

@@ -121,21 +121,33 @@
         <div class="sign-box">
           <div>
             <span>现场勘查人员签名：</span>
-            <div><input type="text" v-model="data.explorateSign" /></div>
+            <div>
+              <input type="text" v-model="data.explorateSign" />
+              <div class="content-box left">{{ data.explorateSign }}</div>
+            </div>
           </div>
           <div>
             <span>记录人签名：</span>
-            <div><input type="text" v-model="data.reportSign" /></div>
+            <div>
+              <input type="text" v-model="data.reportSign" />
+              <div class="content-box left">{{ data.reportSign }}</div>
+            </div>
           </div>
         </div>
         <div class="sign-box">
           <div>
             <span>当事人签名：</span>
-            <div><input type="text" v-model="data.clientSign" /></div>
+            <div>
+              <input type="text" v-model="data.clientSign" />
+              <div class="content-box left">{{ data.clientSign }}</div>
+            </div>
           </div>
           <div>
             <span>见证人签名：</span>
-            <div><input type="text" v-model="data.witnessSign" /></div>
+            <div>
+              <input type="text" v-model="data.witnessSign" />
+              <div class="content-box left">{{ data.witnessSign }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -253,7 +265,14 @@ div[contenteditable] {
   // display: grid;
 
   font-family: sr, st;
-
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   // padding: 80px 0 0 0;
   > div {
     // padding: 20px 50px 30px;