feat: law

src/views/scene/index.vue

@@ -111,9 +111,9 @@ const onScale = () => {
   viewStatus.value = !viewStatus.value;
 };
 const goItem = (item) => {
-  if (item.id == 8) {
-    return;
-  }
+  // if (item.id == 8) {
+  //   return;
+  // }
   // router.push(`/demo/${item.id}`);
   router.push(`/tables/${item.type}`);
 };
@@ -164,6 +164,7 @@ const list = ref([
     id: 8,
     icon: 'law',
     name: '法律法规',
+    type: 'law',
   },
 ]);
 onMounted(() => {

src/views/tables/index.vue

@@ -2,15 +2,15 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header title="道路交通事故现场勘查笔录" type="return">
-        <ui-button type="primary" width="96px" @click="getLayoutImage"> 完成 </ui-button>
+      <Header :title="headerTitle" type="return">
+        <ui-button v-if="tableType != 'law'" type="primary" width="96px" @click="saveHandler"> 完成 </ui-button>
       </Header>
     </template>
 
     <div class="mySwiper" v-if="loaded">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(i, index) in eleList">
-          <div class="warpper" :class="{ downMode }" :id="`layoutRef${index}`">
+          <div class="warpper" :class="{ downMode, 'no-padding': tableType == 'law' }" :id="`layoutRef${index}`">
             <component :downMode="downMode" :is="i"></component>
           </div>
         </div>
@@ -26,6 +26,7 @@ import Swiper from 'swiper';
 import 'swiper/swiper.min.css';
 import html2canvas from 'html2canvas';
 import { downloadImage, uploadImage } from '@/store/sync';
+import { genUseLoading } from '@/hook';
 import Message from '@/components/base/components/message/message.vue';
 import Header from '@/components/photos/header.vue';
 import MainPanel from '@/components/main-panel/index.vue';
@@ -47,26 +48,41 @@ import extract from './extract.vue';
 import legacy from './legacy.vue';
 //询问、讯问
 import ask from './ask.vue';
+
+//法规
+import law from './law.vue';
 // const eleList = ref([one, two, three, four]);
 // const eleList = ref([authorOne, authorTwo]);
 const eleList = ref([]);
-
+const headerTitle = ref('');
 const tableType = ref<string | string[]>();
 const downMode = ref(false);
+
+const saveHandler = genUseLoading(async () => {
+  await getLayoutImage();
+  router.replace('/scene');
+});
+
 const getLayoutImage = async () => {
   downMode.value = true;
   await nextTick();
+  let num = 0;
+  return new Promise((res, rej) => {
+    eleList.value.forEach(async (element, index) => {
+      // console.error(layoutRef.value);
+      let ele = document.getElementById(`layoutRef${index}`);
+      const canvas = await html2canvas(ele);
+      Message.success({ msg: '已保存至相册', time: 2000 });
+      const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.95));
+      await downloadImage(blob, `tables_${index}.jpg`);
+      num++;
 
-  eleList.value.forEach(async (element, index) => {
-    // console.error(layoutRef.value);
-    let ele = document.getElementById(`layoutRef${index}`);
-    const canvas = await html2canvas(ele);
-    Message.success({ msg: '已保存至相册', time: 2000 });
-
-    const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.95));
-    await downloadImage(blob, `tables_${index}.jpg`);
+      if (num == eleList.value.length) {
+        downMode.value = false;
+        res(true);
+      }
+    });
   });
-  downMode.value = false;
 
   // return await uploadImage(blob);
 };
@@ -75,21 +91,37 @@ const initTables = () => {
   switch (tableType.value) {
     case 'explorate':
       eleList.value = [one, two, three, four];
+      headerTitle.value = '道路交通事故现场勘查笔录';
       break;
     case 'ask':
       eleList.value = [ask];
+      if (router.currentRoute.value.query.type == '1') {
+        headerTitle.value = '询问笔录';
+      } else {
+        headerTitle.value = '讯问笔录';
+      }
+
       break;
     case 'author':
       eleList.value = [authorOne, authorTwo];
+      headerTitle.value = '授权委托书';
       break;
     case 'legacy':
       eleList.value = [legacy];
+      headerTitle.value = '道路交通事故现场遗留物品清单';
       break;
     case 'extract':
       eleList.value = [extract];
+      headerTitle.value = '当事人血样（尿样）提取登记表';
       break;
     case 'identification':
       eleList.value = [identification];
+      headerTitle.value = '道路交通事故认定书（简易程序）';
+      break;
+
+    case 'law':
+      eleList.value = [law];
+      headerTitle.value = '法律法规';
       break;
   }
 };
@@ -97,6 +129,7 @@ const mySwiper = ref(null);
 const loaded = ref(false);
 onActivated(() => {
   initTables();
+
   loaded.value = true;
   mySwiper.value = null;
   nextTick(() => {
@@ -104,7 +137,7 @@ onActivated(() => {
       mySwiper.value = new Swiper('.mySwiper', {
         on: {
           init: function (swiper) {
-            console.error(swiper);
+            // console.error(swiper);
           },
           transitionStart: function (swiper) {},
           touchStart: function (swiper, event) {},
@@ -136,6 +169,9 @@ onDeactivated(() => {
       overflow: auto;
       > .warpper {
         padding: 20px 50px 30px;
+        &.no-padding {
+          padding: 0;
+        }
         &.downMode {
           padding: 125px 100px 75px;
           width: 1050px;

src/views/tables/law.vue

@@ -0,0 +1,22 @@
+<!--  -->
+<template>
+  <div v-for="(i, index) in 27" class="item">
+    <img :src="getImageUrl(index)" alt="" />
+    <!-- <img :src="`@/assets/images/law/${index}.jpg`" alt="" /> -->
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+
+const getImageUrl = (index) => {
+  return new URL(`/src/assets/images/law/${index + 1}.jpg`, import.meta.url).href;
+};
+</script>
+<style lang="scss" scoped>
+.item {
+  img {
+    width: 100%;
+  }
+}
+</style>

src/views/tables/legacy.vue

@@ -195,7 +195,8 @@ div[contenteditable] {
         > div[contenteditable] {
           width: 100%;
           height: 100%;
-          line-height: 60px;
+          line-height: 80px;
+          // line-height: 60px;
         }
       }
     }