feat

src/components/base/components/icon/iconfont/demo_index.html

@@ -55,6 +55,54 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe7ab;</span>
+                <div class="name">question</div>
+                <div class="code-name">&amp;#xe7ab;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ac;</span>
+                <div class="name">accident</div>
+                <div class="code-name">&amp;#xe7ac;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ad;</span>
+                <div class="name">blood</div>
+                <div class="code-name">&amp;#xe7ad;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ae;</span>
+                <div class="name">inquiry</div>
+                <div class="code-name">&amp;#xe7ae;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7af;</span>
+                <div class="name">authorization</div>
+                <div class="code-name">&amp;#xe7af;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b0;</span>
+                <div class="name">law</div>
+                <div class="code-name">&amp;#xe7b0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b1;</span>
+                <div class="name">prospect</div>
+                <div class="code-name">&amp;#xe7b1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b2;</span>
+                <div class="name">items</div>
+                <div class="code-name">&amp;#xe7b2;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe7aa;</span>
                 <div class="name">share</div>
                 <div class="code-name">&amp;#xe7aa;</div>
@@ -966,9 +1014,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1691631024836') format('woff2'),
-       url('iconfont.woff?t=1691631024836') format('woff'),
-       url('iconfont.ttf?t=1691631024836') format('truetype');
+  src: url('iconfont.woff2?t=1692066010344') format('woff2'),
+       url('iconfont.woff?t=1692066010344') format('woff'),
+       url('iconfont.ttf?t=1692066010344') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -995,6 +1043,78 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-question"></span>
+            <div class="name">
+              question
+            </div>
+            <div class="code-name">.icon-question
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-accident"></span>
+            <div class="name">
+              accident
+            </div>
+            <div class="code-name">.icon-accident
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-blood"></span>
+            <div class="name">
+              blood
+            </div>
+            <div class="code-name">.icon-blood
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-inquiry"></span>
+            <div class="name">
+              inquiry
+            </div>
+            <div class="code-name">.icon-inquiry
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-authorization"></span>
+            <div class="name">
+              authorization
+            </div>
+            <div class="code-name">.icon-authorization
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-law"></span>
+            <div class="name">
+              law
+            </div>
+            <div class="code-name">.icon-law
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-prospect"></span>
+            <div class="name">
+              prospect
+            </div>
+            <div class="code-name">.icon-prospect
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-items"></span>
+            <div class="name">
+              items
+            </div>
+            <div class="code-name">.icon-items
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-share"></span>
             <div class="name">
               share
@@ -2364,6 +2484,70 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-question"></use>
+                </svg>
+                <div class="name">question</div>
+                <div class="code-name">#icon-question</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-accident"></use>
+                </svg>
+                <div class="name">accident</div>
+                <div class="code-name">#icon-accident</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-blood"></use>
+                </svg>
+                <div class="name">blood</div>
+                <div class="code-name">#icon-blood</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-inquiry"></use>
+                </svg>
+                <div class="name">inquiry</div>
+                <div class="code-name">#icon-inquiry</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-authorization"></use>
+                </svg>
+                <div class="name">authorization</div>
+                <div class="code-name">#icon-authorization</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-law"></use>
+                </svg>
+                <div class="name">law</div>
+                <div class="code-name">#icon-law</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-prospect"></use>
+                </svg>
+                <div class="name">prospect</div>
+                <div class="code-name">#icon-prospect</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-items"></use>
+                </svg>
+                <div class="name">items</div>
+                <div class="code-name">#icon-items</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-share"></use>
                 </svg>
                 <div class="name">share</div>

src/components/base/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4084834 */
-  src: url('iconfont.woff2?t=1691631024836') format('woff2'),
-       url('iconfont.woff?t=1691631024836') format('woff'),
-       url('iconfont.ttf?t=1691631024836') format('truetype');
+  src: url('iconfont.woff2?t=1692066010344') format('woff2'),
+       url('iconfont.woff?t=1692066010344') format('woff'),
+       url('iconfont.ttf?t=1692066010344') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-question:before {
+  content: "\e7ab";
+}
+
+.icon-accident:before {
+  content: "\e7ac";
+}
+
+.icon-blood:before {
+  content: "\e7ad";
+}
+
+.icon-inquiry:before {
+  content: "\e7ae";
+}
+
+.icon-authorization:before {
+  content: "\e7af";
+}
+
+.icon-law:before {
+  content: "\e7b0";
+}
+
+.icon-prospect:before {
+  content: "\e7b1";
+}
+
+.icon-items:before {
+  content: "\e7b2";
+}
+
 .icon-share:before {
   content: "\e7aa";
 }

src/components/base/components/icon/iconfont/iconfont.json

@@ -6,6 +6,62 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "36913105",
+      "name": "question",
+      "font_class": "question",
+      "unicode": "e7ab",
+      "unicode_decimal": 59307
+    },
+    {
+      "icon_id": "36913104",
+      "name": "accident",
+      "font_class": "accident",
+      "unicode": "e7ac",
+      "unicode_decimal": 59308
+    },
+    {
+      "icon_id": "36913107",
+      "name": "blood",
+      "font_class": "blood",
+      "unicode": "e7ad",
+      "unicode_decimal": 59309
+    },
+    {
+      "icon_id": "36913108",
+      "name": "inquiry",
+      "font_class": "inquiry",
+      "unicode": "e7ae",
+      "unicode_decimal": 59310
+    },
+    {
+      "icon_id": "36913106",
+      "name": "authorization",
+      "font_class": "authorization",
+      "unicode": "e7af",
+      "unicode_decimal": 59311
+    },
+    {
+      "icon_id": "36913103",
+      "name": "law",
+      "font_class": "law",
+      "unicode": "e7b0",
+      "unicode_decimal": 59312
+    },
+    {
+      "icon_id": "36913102",
+      "name": "prospect",
+      "font_class": "prospect",
+      "unicode": "e7b1",
+      "unicode_decimal": 59313
+    },
+    {
+      "icon_id": "36913101",
+      "name": "items",
+      "font_class": "items",
+      "unicode": "e7b2",
+      "unicode_decimal": 59314
+    },
+    {
       "icon_id": "36848606",
       "name": "share",
       "font_class": "share",

src/router/constant.ts

@@ -1,32 +1,33 @@
-import { modeFlags, ModeFlag, isLogin } from "@/store/sys";
-import { computed, ComputedRef } from "vue";
-import { ui18n } from "@/lang";
+import { modeFlags, ModeFlag, isLogin } from '@/store/sys';
+import { computed, ComputedRef } from 'vue';
+import { ui18n } from '@/lang';
 
 export const readyRouteName = {
-  layout: "layout",
-  query: "query",
-  hotspot: "hotspot",
-  measure: "measure",
-  graphic: "graphic",
-  scene: "scene",
-  photos: "photos",
-  accidents: "accidents",
-  roads: "roads",
-  tabulation: "tabulation",
-  gena4: "gena4"
+  layout: 'layout',
+  query: 'query',
+  hotspot: 'hotspot',
+  measure: 'measure',
+  graphic: 'graphic',
+  scene: 'scene',
+  home: 'home',
+  photos: 'photos',
+  accidents: 'accidents',
+  roads: 'roads',
+  tabulation: 'tabulation',
+  ask: 'ask',
+  gena4: 'gena4',
+  explorate: 'explorate',
+  extract: 'extract',
 } as const;
 
 export const writeRouteName = {
   ...readyRouteName,
-  setup: "setup",
+  setup: 'setup',
 } as const;
 
 export const defRouteName = readyRouteName.query;
 
-export type RouteNameRaw<T extends ModeFlag = any> =
-  T extends typeof modeFlags.LOGIN
-    ? typeof writeRouteName
-    : typeof readyRouteName;
+export type RouteNameRaw<T extends ModeFlag = any> = T extends typeof modeFlags.LOGIN ? typeof writeRouteName : typeof readyRouteName;
 
 export type RouteMetaAtom = {
   title: string;
@@ -39,32 +40,32 @@ export type RouteMetaRaw<T extends ModeFlag = any> = {
 };
 
 export const readyRouteMeta: RouteMetaRaw = {
-  [readyRouteName.layout]: { title: ui18n.t("sys.title") },
-  [readyRouteName.query]: { title: ui18n.t("sys.query") },
-  [readyRouteName.hotspot]: { title: ui18n.t("hotspot.name") },
-  [readyRouteName.measure]: { title: ui18n.t("measure.name") },
-  [readyRouteName.graphic]: { title: "绘图" },
-  [readyRouteName.scene]: { title: "绘图" },
-  [readyRouteName.photos]: {title: "相册"},
-  [readyRouteName.accidents]: {title: "事故照片"},
-  [readyRouteName.roads]: {title: "道路照片"},
-  [readyRouteName.tabulation]: {title: "制表"},
-  [readyRouteName.gena4]: {title: "生成A4"}
+  [readyRouteName.layout]: { title: ui18n.t('sys.title') },
+  [readyRouteName.query]: { title: ui18n.t('sys.query') },
+  [readyRouteName.hotspot]: { title: ui18n.t('hotspot.name') },
+  [readyRouteName.measure]: { title: ui18n.t('measure.name') },
+  [readyRouteName.graphic]: { title: '绘图' },
+  [readyRouteName.scene]: { title: '绘图' },
+  [readyRouteName.home]: { title: '首页' },
+  [readyRouteName.photos]: { title: '相册' },
+  [readyRouteName.accidents]: { title: '事故照片' },
+  [readyRouteName.roads]: { title: '道路照片' },
+  [readyRouteName.tabulation]: { title: '制表' },
+  [readyRouteName.gena4]: { title: '生成A4' },
+  [readyRouteName.ask]: { title: '询问笔录' },
+  [readyRouteName.explorate]: { title: '道路交通事故现场勘查笔录' },
+  [readyRouteName.extract]: { title: '当事人血样（尿样）提取登记表' },
 };
 
 export const writeRouteMeta: RouteMetaRaw<typeof modeFlags.LOGIN> = {
   ...readyRouteMeta,
-  [writeRouteName.setup]: { title: ui18n.t("sys.setup") },
+  [writeRouteName.setup]: { title: ui18n.t('sys.setup') },
 };
 
 export type RouteName<T extends ModeFlag = any> = ComputedRef<RouteNameRaw<T>>;
-export const routeName = computed(() =>
-  isLogin.value ? writeRouteName : readyRouteName
-);
+export const routeName = computed(() => (isLogin.value ? writeRouteName : readyRouteName));
 
 export type RouteMeta<T extends ModeFlag = any> = ComputedRef<RouteMetaRaw<T>>;
-export const routeMeta = computed(() =>
-  isLogin.value ? writeRouteMeta : readyRouteMeta
-);
+export const routeMeta = computed(() => (isLogin.value ? writeRouteMeta : readyRouteMeta));
 
 export default writeRouteName;

src/router/info.ts

@@ -39,6 +39,12 @@ export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
     component: () => import("@/views/scene/index.vue"),
   },
   {
+    path: "/home",
+    name: readyRouteName.home,
+    meta: readyRouteMeta.home,
+    component: () => import("@/views/scene/home.vue"),
+  },
+  {
     path: "/photos",
     name: readyRouteName.photos,
     meta: readyRouteMeta.photos,
@@ -68,6 +74,24 @@ export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
     meta: readyRouteMeta.tabulation,
     component: () => import("@/views/roads/tabulation.vue"),
   },
+  {
+    path: "/ask/:id",
+    name: readyRouteName.ask,
+    meta: readyRouteMeta.ask,
+    component: () => import("@/views/tables/ask.vue"),
+  },
+  {
+    path: "/explorate/:id",
+    name: readyRouteName.explorate,
+    meta: readyRouteMeta.explorate,
+    component: () => import("@/views/tables/explorate.vue"),
+  },
+  {
+    path: "/extract/:id",
+    name: readyRouteName.extract,
+    meta: readyRouteMeta.extract,
+    component: () => import("@/views/tables/extract.vue"),
+  },
 ];
 
 export type RoutesRef<T extends ModeFlag = any> = ComputedRef<{

src/views/scene/covers/fixPoints.vue

@@ -6,39 +6,24 @@
     :active="point === customMap.activeFixPoint"
     @change-pos="(pos) => (point.pos = pos)"
     @focus="() => (customMap.activeFixPoint = point)"
-    @blur="
-      () =>
-        (customMap.activeFixPoint =
-          customMap.activeFixPoint === point ? null : customMap.activeFixPoint)
-    "
+    @blur="() => (customMap.activeFixPoint = customMap.activeFixPoint === point ? null : customMap.activeFixPoint)"
   />
 
   <div ref="menu" @touchstart.stop class="action-menus">
     <!--    <ActionsPanel :menus="activeActionMenus" v-show="customMap.activeFixPoint" />-->
-    <ActionMenus
-      v-if="customMap.activeFixPoint"
-      :menus="activeActionMenus"
-      :active-key="edit ? 'edit' : null"
-      dire="row"
-    />
+    <ActionMenus v-if="customMap.activeFixPoint" :menus="activeActionMenus" :active-key="edit ? 'edit' : null" dire="row" />
   </div>
 
-  <EditFixPoint
-    v-if="edit"
-    @quit="edit = null"
-    v-model:text="edit.text"
-    ref="dom"
-    :key="edit.id"
-  />
+  <EditFixPoint v-if="edit" @quit="edit = null" v-model:text="edit.text" ref="dom" :key="edit.id" />
 </template>
 
 <script setup lang="ts">
-import { fixPoints, FixPoint } from "@/store/fixPoint";
-import FixPointPanel from "./fixPoint.vue";
-import { ref, watch, watchEffect } from "vue";
-import { customMap } from "@/hook";
-import ActionMenus from "@/components/group-button/index.vue";
-import EditFixPoint from "@/components/edit-fix-point/index.vue";
+import { fixPoints, FixPoint } from '@/store/fixPoint';
+import FixPointPanel from './fixPoint.vue';
+import { ref, watch, watchEffect } from 'vue';
+import { customMap } from '@/hook';
+import ActionMenus from '@/components/group-button/index.vue';
+import EditFixPoint from '@/components/edit-fix-point/index.vue';
 
 const edit = ref<FixPoint>();
 watchEffect(() => {
@@ -49,24 +34,23 @@ watchEffect(() => {
 
 const activeActionMenus = [
   {
-    key: "edit",
-    icon: "edit",
-    text: "编辑",
-    color: "#161A1A",
-    iconColor: "#2F8FFF",
+    key: 'edit',
+    icon: 'edit',
+    text: '编辑',
+    color: '#161A1A',
+    iconColor: '#2F8FFF',
     onClick() {
-      edit.value =
-        edit.value === customMap.activeFixPoint ? null : customMap.activeFixPoint;
+      edit.value = edit.value === customMap.activeFixPoint ? null : customMap.activeFixPoint;
 
       console.log(edit.value);
     },
   },
   {
-    key: "delete",
-    icon: "del",
-    text: "删除",
-    color: "#FF4D4F",
-    iconColor: "#fff",
+    key: 'delete',
+    icon: 'del',
+    text: '删除',
+    color: '#FF4D4F',
+    iconColor: '#fff',
     onClick() {
       const index = fixPoints.value.indexOf(customMap.activeFixPoint);
       if (~index) {
@@ -88,10 +72,10 @@ watchEffect((onCleanup) => {
       }
     };
     // document.documentElement.addEventListener("click", handler)
-    document.documentElement.addEventListener("touchstart", handler);
+    document.documentElement.addEventListener('touchstart', handler);
     onCleanup(() => {
       // document.documentElement.removeEventListener("click", handler)
-      document.documentElement.removeEventListener("touchstart", handler);
+      document.documentElement.removeEventListener('touchstart', handler);
     });
   }
 });

src/views/scene/covers/measures.vue

@@ -53,7 +53,7 @@ const changePoints = (measure, points) => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .action-menus {
   position: absolute;
   bottom: var(--boundMargin);

src/views/scene/home.vue

@@ -0,0 +1,308 @@
+<template>
+  <MainPanel>
+    <template v-slot:header>
+      <div class="photos-header">
+        <div class="left">
+          <ui-icon class="back-icon" type="return" ctrl style="margin-right: 10px" @click="router.back" />
+          <span> 标题 </span>
+        </div>
+      </div>
+    </template>
+
+    <div class="info-layout">
+      <div class="info-top">
+        <div class="info-top-left" :class="{ full: viewStatus }">
+          <Container @loaded="loaded = true" />
+          <template v-if="loaded && !trackMode">
+            <Menus @enter-child="childPage = true" @leave-child="childPage = false" />
+            <BasePoints v-if="currentView" />
+            <FixPoints />
+            <Measures />
+            <Photo />
+            <ButtonPane class="back fun-ctrl" size="48" @click="router.push('/scene')" v-if="!childPage">
+            <!-- <ButtonPane class="back fun-ctrl" size="48" @click="onScale" v-if="!childPage"> -->
+              <ui-icon type="screen_f" class="icon" />
+            </ButtonPane>
+            <Mode />
+          </template>
+        </div>
+        <div class="info-top-right" :class="{ full: viewStatus }">
+          <div class="input-item">
+            <p>事故时间:</p>
+            <input type="text" />
+          </div>
+          <div class="input-item">
+            <p>天气:</p>
+            <input type="text" />
+          </div>
+          <div class="input-item">
+            <p>地点:</p>
+            <input type="text" />
+          </div>
+          <div class="text-item">
+            <p>事故描述:</p>
+            <textarea class="info-textarea"></textarea>
+          </div>
+          <div class="info-btn">
+            <div class="right-btn">现场绘图(0)</div>
+            <div class="right-btn">事故照片(0)</div>
+          </div>
+        </div>
+      </div>
+      <div class="info-bottom" :class="{ full: viewStatus }">
+        <div v-for="(i, index) in list">
+          <ui-icon type="return"></ui-icon>
+          <span> {{ i.name }}</span>
+        </div>
+      </div>
+    </div>
+  </MainPanel>
+</template>
+
+<script lang="ts" setup>
+import MainPanel from '@/components/main-panel/index.vue';
+import Header from '@/components/photos/header.vue';
+import Container from './container.vue';
+import Mode from './mode.vue';
+import Menus from './menus/pane.vue';
+import BasePoints from '@/views/scene/covers/basePoints.vue';
+import FixPoints from '@/views/scene/covers/fixPoints.vue';
+import Measures from '@/views/scene/covers/measures.vue';
+import Photo from './photo.vue';
+import ButtonPane from '@/components/button-pane';
+import { customMap, disabledMap, useSDK } from '@/hook';
+import customSetup from '../../hook/custom';
+import UiIcon from '@/components/base/components/icon/index.vue';
+import { ref, watchEffect } from 'vue';
+import { back } from '@/store/sync';
+import { trackMode } from '@/views/scene/trackMeasureWidth';
+import { currentView } from './currentScene';
+import { api } from '@/store/sync';
+import { router, writeRouteName } from '@/router';
+const loaded = ref(false);
+const childPage = ref(false);
+const stopReg = watchEffect(() => {
+  if (loaded.value) {
+    const sdk = useSDK();
+    stopReg();
+    customSetup(sdk);
+    disabledMap.measure = false;
+  }
+});
+const viewStatus = ref(false);
+const onScale = () => {
+  viewStatus.value = !viewStatus.value;
+};
+const list = ref([
+  {
+    id: 1,
+    icon: 'return',
+    name: '勘查笔录',
+  },
+  {
+    id: 2,
+    icon: 'return',
+    name: '询问笔录',
+  },
+  {
+    id: 3,
+    icon: 'return',
+    name: '讯问笔录',
+  },
+  {
+    id: 4,
+    icon: 'return',
+    name: '事故认定',
+  },
+  {
+    id: 5,
+    icon: 'return',
+    name: '血样登记表',
+  },
+  {
+    id: 6,
+    icon: 'return',
+    name: '遗留物品清单',
+  },
+  {
+    id: 7,
+    icon: 'return',
+    name: '授权委托书',
+  },
+  {
+    id: 8,
+    icon: 'return',
+    name: '法律法规',
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.info-layout {
+  width: 100%;
+  height: 100%;
+  // padding-top: 50px;
+  background: rgba(22, 24, 26, 1);
+  padding: 70px 20px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .info-top {
+    width: 100%;
+    height: 83%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .info-top-left {
+      width: 70%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+      transition: all 0.3s;
+      &.full {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        transform-origin: center center;
+      }
+      .fun-ctrl {
+        position: absolute;
+        left: var(--boundMargin);
+        top: var(--boundMargin);
+        padding: 0;
+        width: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .info-top-right {
+      width: calc(30% - 20px);
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.8);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      &.full {
+        width: 0;
+      }
+      p {
+        margin-bottom: 4px;
+      }
+      .input-item {
+        height: 10%;
+
+        input {
+          width: 100%;
+          padding: 0 8px;
+          height: 56%;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid rgba(255, 255, 255, 0.5);
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      .text-item {
+        width: 100%;
+        height: 35%;
+        .info-textarea {
+          width: 100%;
+          padding: 8px;
+          height: 87%;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid rgba(255, 255, 255, 0.5);
+          color: rgba(255, 255, 255, 0.8);
+          outline: none;
+          resize: none;
+        }
+      }
+      .info-btn {
+        width: 100%;
+        height: 19.5%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .right-btn {
+          width: 296px;
+          height: 42.8%;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px 4px 4px 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .info-bottom {
+    width: 100%;
+    height: 14.49%;
+    display: flex;
+    flex-wrap: nowrap;
+    &.full {
+      height: 0;
+    }
+    > div {
+      width: 100%;
+      height: 100%;
+      margin-right: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.1);
+      font-size: 16px;
+      border-radius: 4px;
+      > span {
+        margin-top: 8px;
+      }
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+}
+.photos-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+
+  .center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    white-space: nowrap;
+    // pointer-events: none;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+  .left,
+  .right {
+    z-index: 1;
+  }
+}
+
+.back-icon {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 24px 24px 24px 24px;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/scene/index.vue

@@ -1,35 +1,100 @@
 <template>
-  <Container @loaded="loaded = true" />
-
-  <template v-if="loaded && !trackMode">
-    <Menus @enter-child="childPage = true" @leave-child="childPage = false" />
-    <BasePoints v-if="currentView" />
-    <FixPoints />
-    <Measures />
-    <Photo />
-    <ButtonPane class="back fun-ctrl" size="48" @click="back" v-if="!childPage">
-      <ui-icon type="return_l" class="icon" />
-    </ButtonPane>
-    <Mode />
-  </template>
+  <MainPanel>
+    <template v-slot:header>
+      <div class="photos-header">
+        <div class="left">
+          <ui-icon class="back-icon" type="return" ctrl style="margin-right: 10px" @click="back" />
+          <span> {{ scenetTitle }} </span>
+        </div>
+      </div>
+    </template>
+
+    <div class="info-layout">
+      <div class="info-top">
+        <div class="info-top-left" :class="{ full: viewStatus }">
+          <Container @loaded="loaded = true" />
+          <template v-if="loaded && !trackMode">
+            <Menus :viewStatus="viewStatus" @enter-child="childPage = true" @leave-child="childPage = false" />
+            <BasePoints v-if="currentView" />
+            <FixPoints />
+            <Measures />
+            <Photo />
+            <!-- <ButtonPane class="back fun-ctrl" size="48" @click="router.push('/scene')" v-if="!childPage"> -->
+            <ButtonPane class="back fun-ctrl" size="48" @click="onScale" v-if="!childPage">
+              <ui-icon :type="viewStatus ? 'screen_c' : 'screen_f'" class="icon" />
+            </ButtonPane>
+            <Mode />
+          </template>
+        </div>
+        <div class="info-top-right" :class="{ full: viewStatus }">
+          <div class="input-item">
+            <p>事故时间:</p>
+            <input type="text" />
+          </div>
+          <div class="input-item">
+            <p>天气:</p>
+            <input type="text" />
+          </div>
+          <div class="input-item">
+            <p>地点:</p>
+            <input type="text" />
+          </div>
+          <div class="text-item">
+            <p>事故描述:</p>
+            <textarea class="info-textarea"></textarea>
+          </div>
+          <div class="info-btn">
+            <div class="right-btn" @click="router.push('roads')">现场绘图({{ sceneSortPhotos.length }})</div>
+            <div class="right-btn" @click="router.push('accidents')">事故照片({{ accodentSortPhotos.length }})</div>
+          </div>
+        </div>
+      </div>
+      <div class="info-bottom" :class="{ full: viewStatus }">
+        <div v-for="(i, index) in list">
+          <ui-icon :type="i.icon"></ui-icon>
+          <span> {{ i.name }}</span>
+        </div>
+      </div>
+    </div>
+  </MainPanel>
 </template>
 
 <script lang="ts" setup>
-import Container from "./container.vue";
-import Mode from "./mode.vue";
-import Menus from "./menus/pane.vue";
-import BasePoints from "@/views/scene/covers/basePoints.vue";
-import FixPoints from "@/views/scene/covers/fixPoints.vue";
-import Measures from "@/views/scene/covers/measures.vue";
-import Photo from "./photo.vue";
-import ButtonPane from "@/components/button-pane";
-import { customMap, disabledMap, useSDK } from "@/hook";
-import customSetup from "../../hook/custom";
-import UiIcon from "@/components/base/components/icon/index.vue";
-import { ref, watchEffect } from "vue";
-import { back } from "@/store/sync";
-import { trackMode } from "@/views/scene/trackMeasureWidth";
-import { currentView } from "./currentScene";
+import MainPanel from '@/components/main-panel/index.vue';
+import Header from '@/components/photos/header.vue';
+import Container from './container.vue';
+import Mode from './mode.vue';
+import Menus from './menus/pane.vue';
+import BasePoints from '@/views/scene/covers/basePoints.vue';
+import FixPoints from '@/views/scene/covers/fixPoints.vue';
+import Measures from '@/views/scene/covers/measures.vue';
+import Photo from './photo.vue';
+import ButtonPane from '@/components/button-pane';
+import { customMap, disabledMap, useSDK } from '@/hook';
+import customSetup from '../../hook/custom';
+import UiIcon from '@/components/base/components/icon/index.vue';
+import { ref, watchEffect, computed } from 'vue';
+import { back } from '@/store/sync';
+import { trackMode } from '@/views/scene/trackMeasureWidth';
+import { currentView } from './currentScene';
+import { api } from '@/store/sync';
+import { router, writeRouteName } from '@/router';
+import { roadPhotos, RoadPhoto } from '@/store/roadPhotos';
+import { types, accidentPhotos, AccidentPhoto } from '@/store/accidentPhotos';
+import { photos } from '@/store/photos';
+import { title } from '@/store/setup';
+
+const accodentSortPhotos = computed(() => {
+  const photos = [...accidentPhotos.value];
+  return photos.sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type));
+});
+const scenetTitle = computed(() => title);
+const enum TypeEnum {
+  Draw,
+  Table,
+}
+const currentType = ref(TypeEnum.Draw);
+const sceneSortPhotos = computed(() => roadPhotos.value.filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table)).reverse());
 
 const loaded = ref(false);
 const childPage = ref(false);
@@ -41,19 +106,230 @@ const stopReg = watchEffect(() => {
     disabledMap.measure = false;
   }
 });
+const viewStatus = ref(false);
+const onScale = () => {
+  viewStatus.value = !viewStatus.value;
+};
+const list = ref([
+  {
+    id: 1,
+    icon: 'prospect',
+    name: '勘查笔录',
+  },
+  {
+    id: 2,
+    icon: 'inquiry',
+    name: '询问笔录',
+  },
+  {
+    id: 3,
+    icon: 'question',
+    name: '讯问笔录',
+  },
+  {
+    id: 4,
+    icon: 'accident',
+    name: '事故认定',
+  },
+  {
+    id: 5,
+    icon: 'blood',
+    name: '血样登记表',
+  },
+  {
+    id: 6,
+    icon: 'items',
+    name: '遗留物品清单',
+  },
+  {
+    id: 7,
+    icon: 'authorization',
+    name: '授权委托书',
+  },
+  {
+    id: 8,
+    icon: 'law',
+    name: '法律法规',
+  },
+]);
 </script>
 
 <style scoped lang="scss">
-.back {
-  left: var(--boundMargin);
-  top: var(--boundMargin);
-  color: #fff;
-  font-size: 20px;
-  transition: color 0.3s ease;
-
-  .icon {
+.info-layout {
+  width: 100%;
+  height: 100%;
+  // padding-top: 50px;
+  background: rgba(22, 24, 26, 1);
+  padding: 70px 20px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .info-top {
+    width: 100%;
+    height: 83%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .info-top-left {
+      width: 70%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+      transition: all 0.3s;
+      &.full {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        transform-origin: center center;
+      }
+
+      .hide {
+        display: none !important;
+      }
+      .scene-mode-tabs {
+        height: 48px !important;
+      }
+      .fun-ctrl {
+        position: absolute;
+        left: var(--boundMargin);
+        top: var(--boundMargin);
+        padding: 0;
+        width: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .info-top-right {
+      width: calc(30% - 20px);
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.8);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      &.full {
+        width: 0;
+      }
+      p {
+        margin-bottom: 4px;
+      }
+      .input-item {
+        height: 10%;
+
+        input {
+          width: 100%;
+          padding: 0 8px;
+          height: 56%;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid rgba(255, 255, 255, 0.5);
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      .text-item {
+        width: 100%;
+        height: 35%;
+        .info-textarea {
+          width: 100%;
+          padding: 8px;
+          height: 87%;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid rgba(255, 255, 255, 0.5);
+          color: rgba(255, 255, 255, 0.8);
+          outline: none;
+          resize: none;
+        }
+      }
+      .info-btn {
+        width: 100%;
+        height: 19.5%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .right-btn {
+          width: 296px;
+          height: 42.8%;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 4px 4px 4px 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .info-bottom {
+    width: 100%;
+    height: 14.49%;
+    display: flex;
+    flex-wrap: nowrap;
+    &.full {
+      height: 0;
+    }
+    > div {
+      width: 100%;
+      height: 100%;
+      margin-right: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.1);
+      font-size: 16px;
+      border-radius: 4px;
+      > span {
+        margin-top: 8px;
+      }
+      .iconfont {
+        font-size: 24px;
+      }
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+}
+.photos-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+
+  .center {
     position: absolute;
-    transform: translateX(-50%);
+    left: 0;
+    right: 0;
+    white-space: nowrap;
+    // pointer-events: none;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
   }
+  .left,
+  .right {
+    z-index: 1;
+  }
+}
+
+.back-icon {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 24px 24px 24px 24px;
+  align-items: center;
+  justify-content: center;
 }
 </style>

src/views/scene/index1.vue

@@ -0,0 +1,61 @@
+<template>
+  <Container @loaded="loaded = true" />
+
+  <template v-if="loaded && !trackMode">
+    <Menus @enter-child="childPage = true" @leave-child="childPage = false" />
+    <BasePoints v-if="currentView" />
+    <FixPoints />
+    <Measures />
+    <Photo />
+    <!-- <ButtonPane class="back fun-ctrl" size="48" @click="back" v-if="!childPage"> -->
+    <ButtonPane class="back fun-ctrl" size="48" @click="router.back" v-if="!childPage">
+      <ui-icon type="return_l" class="icon" />
+    </ButtonPane>
+    <Mode />
+  </template>
+  
+</template>
+
+<script lang="ts" setup>
+import Container from "./container.vue";
+import Mode from "./mode.vue";
+import Menus from "./menus/pane.vue";
+import BasePoints from "@/views/scene/covers/basePoints.vue";
+import FixPoints from "@/views/scene/covers/fixPoints.vue";
+import Measures from "@/views/scene/covers/measures.vue";
+import Photo from "./photo.vue";
+import ButtonPane from "@/components/button-pane";
+import { customMap, disabledMap, useSDK } from "@/hook";
+import customSetup from "../../hook/custom";
+import UiIcon from "@/components/base/components/icon/index.vue";
+import { ref, watchEffect } from "vue";
+import { back } from "@/store/sync";
+import { trackMode } from "@/views/scene/trackMeasureWidth";
+import { currentView } from "./currentScene";
+import { router, writeRouteName } from '@/router';
+const loaded = ref(false);
+const childPage = ref(false);
+const stopReg = watchEffect(() => {
+  if (loaded.value) {
+    const sdk = useSDK();
+    stopReg();
+    customSetup(sdk);
+    disabledMap.measure = false;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.back {
+  left: var(--boundMargin);
+  top: var(--boundMargin);
+  color: #fff;
+  font-size: 20px;
+  transition: color 0.3s ease;
+
+  .icon {
+    position: absolute;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/scene/menus/pane.vue

@@ -1,6 +1,6 @@
 <template>
   <ActionMenus
-    v-if="!store.child.value"
+    v-if="!store.child.value && viewStatus"
     class="menus"
     :class="{ level: level === 2 }"
     :menus="store.menus as any"
@@ -9,7 +9,7 @@
   />
   <scene-menus
     :parentKey="store.activeMenuKey.value"
-    v-if="store.child.value"
+    v-if="store.child.value && viewStatus"
     @back="store.child.value = null"
     :menus="store.child.value as MenuRaw[]"
     :level="level + 1"
@@ -25,8 +25,9 @@ import { disabledMap, laserModeStack } from "@/hook";
 import { Mode } from "@/sdk";
 
 const props = withDefaults(
-  defineProps<{ menus?: MenuRaw[]; level?: number; parentKey?: string }>(),
+  defineProps<{ menus?: MenuRaw[]; level?: number; parentKey?: string ;viewStatus?:Boolean}>(),
   { level: 1 }
+  
 );
 const emit = defineEmits<{
   (e: "back"): void;
@@ -59,7 +60,7 @@ watchEffect((onCleanup) => {
     onCleanup(() => {});
   }
 });
-
+console.error(props)
 if (props.level === 1) {
   watchEffect(() => {
     disabledMap.photo = !store.child.value?.length;
@@ -89,7 +90,6 @@ onMounted(() => {
         return menu.defaultSelect;
       }
     });
-    console.log(defaultMenu);
     store.itemActiveKey.value = defaultMenu?.key;
     // store.activeMenuKey.value =
     if (props.parentKey === "measure") {

src/views/scene/trackMeasureWidth.ts

@@ -1,44 +1,44 @@
-import {router} from "@/router";
-import writeRouteName from "../../router/constant";
-import {startMeasure, SuccessMeasureAtom} from '../scene/linkage/measure'
-import {ref, watchEffect} from "vue";
-import {useAsyncSDK} from '@/hook/useLaser'
-import {customMap, laserModeStack} from '@/hook/custom/index'
-import {Mode} from "@/sdk";
-import {mount} from "@/components/base/utils/componentHelper";
-import TrackMeasure from "@/views/scene/TrackMeasure.vue";
-import {list} from '@/store/measure'
+import { router } from '@/router';
+import writeRouteName from '../../router/constant';
+import { startMeasure, SuccessMeasureAtom } from '../scene/linkage/measure';
+import { ref, watchEffect } from 'vue';
+import { useAsyncSDK } from '@/hook/useLaser';
+import { customMap, laserModeStack } from '@/hook/custom/index';
+import { Mode } from '@/sdk';
+import { mount } from '@/components/base/utils/componentHelper';
+import TrackMeasure from '@/views/scene/TrackMeasure.vue';
+import { list } from '@/store/measure';
 
-
-export const trackMode = ref(false)
+export const trackMode = ref(false);
 
 export const trackMeasureWidth = async () => {
-  trackMode.value = true
-  await router.push({ name: writeRouteName.scene })
-  const sdk = await useAsyncSDK()
+  trackMode.value = true;
+  await router.push({ name: writeRouteName.scene });
+  const sdk = await useAsyncSDK();
 
-  laserModeStack.push(ref(Mode.cloud))
-  await new Promise(resolve => setTimeout(resolve, 10))
-  sdk.enterTopView()
-  const measure = await new Promise<SuccessMeasureAtom>(resolve => {
+  laserModeStack.push(ref(Mode.cloud));
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  sdk.enterTopView();
+  const measure = await new Promise<SuccessMeasureAtom>((resolve) => {
     const { destroy } = mount(TrackMeasure, {
       props: {
-        onConfirm: data => {
-          destroy()
-          resolve(data)
-        }
+        onConfirm: (data) => {
+          destroy();
+          resolve(data);
+        },
       },
-      element: document.body
-    } as any)
-  })
-  laserModeStack.pop()
-  await router.back()
-  await new Promise(resolve => setTimeout(resolve, 100))
-  sdk.leaveTopView()
-  trackMode.value = false
+      element: document.body,
+    } as any);
+  });
+  laserModeStack.pop();
+  await router.back();
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  sdk.leaveTopView();
+
+  trackMode.value = false;
   if (measure) {
-    return Number(measure.length.toFixed(2))
+    return Number(measure.length.toFixed(2));
   } else {
-    return null
+    return null;
   }
-}
+};

src/views/tables/ask.vue

@@ -0,0 +1,189 @@
+<!--  -->
+<template>
+  <div class="ask-content">
+    <h4 class="title">询问笔录</h4>
+    <div class="container">
+      <div class="line">
+        <span>时间</span>
+        <div class="write-line" contenteditable></div>
+        <span>至</span>
+        <div class="write-line" contenteditable></div>
+      </div>
+      <div class="line">
+        <span>地点</span>
+        <div class="write-line left" contenteditable></div>
+      </div>
+      <div class="line">
+        <span>询问/讯问人</span>
+        <div class="write-line" contenteditable></div>
+        <span>工作单位</span>
+        <div class="write-line" contenteditable></div>
+      </div>
+      <div class="line">
+        <span>记录人</span>
+        <div class="write-line" contenteditable></div>
+        <span>工作单位</span>
+        <div class="write-line" contenteditable></div>
+      </div>
+      <div class="line">
+        <span>被询问/讯问人</span>
+        <div style="flex: 0.5" class="write-line" contenteditable></div>
+        <span>性别</span>
+        <div style="flex: 0.3" class="write-line" contenteditable></div>
+        <span>年龄</span>
+        <div style="flex: 0.3" class="write-line" contenteditable></div>
+        <span>出生日期</span>
+        <div class="write-line" contenteditable></div>
+      </div>
+      <div class="line">
+        <span>身份证件种类及号码</span>
+        <div class="write-line" contenteditable></div>
+        <span>是否人大代表</span>
+      </div>
+      <div class="line">
+        <span>现住址</span>
+        <div class="write-line" contenteditable></div>
+        <span>联系方式</span>
+        <div style="flex: 0.3" class="write-line" contenteditable></div>
+      </div>
+      <div class="line">
+        <span>户籍所在地</span>
+        <div class="write-line left" contenteditable></div>
+      </div>
+      <div class="line worap">
+        <span style="line-height: 40px"> (口头传唤/被扭送/自动投案的被询问/讯问人于</span>
+        <div class="write-line" style="width: 40%" contenteditable></div>
+        <span style="line-height: 40px"> 到达，</span>
+        <div class="write-line" style="" contenteditable></div>
+        <span style="line-height: 40px"> 离开，</span>
+        <span style="line-height: 40px"> 本人签名：</span>
+        <div class="write-line" style="" contenteditable></div>
+        <span> ）。</span>
+      </div>
+      <div class="more-line">
+        <!-- <div class="write-lines" id="test" contenteditable></div> -->
+        <textarea name="" id="test" cols="30" rows="5"></textarea>
+        <div class="more-line-box">
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-name" @click="getRows">
+      <span>被询问人:</span>
+      <span>被讯问人:</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+const getRows = () => {
+  let r = document.getElementById('test').rows;
+  console.error(r)
+};
+</script>
+<style lang="scss" scoped>
+.ask-content {
+  color: #000;
+  font-size: 20px;
+  padding: 10px 30px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  font-family: sr, st;
+  .title {
+    text-align: center;
+  }
+  .bottom-name {
+    width: 80%;
+    height: 40px;
+    line-height: 40px;
+    margin: 0 auto;
+  }
+  .container {
+    text-align: center;
+    width: 80%;
+    margin: 0 auto;
+    padding: 0 0 40px 0;
+    border-bottom: 2px solid #000;
+    .line {
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-start;
+      margin-bottom: 20px;
+      &.worap {
+        display: inline-block;
+        text-align: justify;
+        // line-height: 40px;
+        // margin-bottom: 0;
+        .write-line {
+          width: 30%;
+        }
+      }
+      .write-line {
+        border-bottom: 1px solid #000;
+        display: inline-block;
+        padding: 0 10px;
+        outline: none;
+        flex: 1;
+        &.left {
+          text-align: left;
+        }
+        &.center {
+          text-align: left;
+        }
+        &.right {
+          text-align: right;
+        }
+      }
+    }
+    .more-line {
+      width: 100%;
+      height: 200px;
+      line-height: 40px;
+      position: relative;
+      overflow-y: hidden;
+      // overflow-x: hidden;
+
+      .write-lines {
+        width: 100%;
+        height: 100%;
+        padding: 0 10px;
+        position: absolute;
+        text-align: left;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        outline: none;
+      }
+      textarea{
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        text-align: left;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+      .more-line-box {
+        width: 100%;
+        height: 100%;
+        // position: absolute;
+        // top: 0;
+        // left: 0;
+        // z-index: 1;
+        .item {
+          width: 100%;
+          height: 20%;
+          border-bottom: 1px solid #000;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/tables/explorate.vue

@@ -0,0 +1,198 @@
+<!--  -->
+<template>
+  <div class="explorate" :class="{ downMode }" ref="layoutRef">
+    <h2 class="title">道路交通事故现场勘查笔录</h2>
+
+    <div class="container">
+      <table>
+        <tr class="table-header">
+          <td colspan="7">
+            <div>
+              <div class="header-item">
+                <i></i>
+                <span>现场勘查</span>
+              </div>
+              <div class="header-item">
+                <i></i>
+                <span>补充勘查</span>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td width="120">勘查单位</td>
+          <td colspan="6" contenteditable></td>
+        </tr>
+        <tr>
+          <td>勘查时间</td>
+          <td colspan="6" contenteditable></td>
+        </tr>
+        <tr>
+          <td>勘查时间</td>
+          <td colspan="6" contenteditable>2023年6月14日16时29分</td>
+        </tr>
+        <tr>
+          <td rowspan="8">事故地点</td>
+          <td rowspan="3" width="80">道路类型</td>
+          <td rowspan="2" width="80">公路</td>
+          <td width="80px">技术等级</td>
+          <td colspan="3"></td>
+        </tr>
+        <tr>
+          <td>行政等级</td>
+          <td colspan="3"></td>
+        </tr>
+        <tr>
+          <td width="80">城市道路</td>
+          <td width="200" colspan="4"></td>
+        </tr>
+        <tr>
+          <td rowspan="2">路口路段类型</td>
+          <td width="">路口</td>
+          <td colspan="4"></td>
+        </tr>
+        <tr>
+          <td>路段</td>
+          <td colspan="4"></td>
+        </tr>
+        <tr>
+          <td>路名</td>
+          <td colspan="3"></td>
+          <td width="180">路号（公路）</td>
+          <td width="180"></td>
+        </tr>
+        <tr>
+          <td rowspan="2">位置</td>
+          <td>卫星定位</td>
+          <td width="150" colspan="2">经度：</td>
+          <td colspan="2">纬度：</td>
+        </tr>
+        <tr>
+          <td>地点描述</td>
+          <td height="60" colspan="4"></td>
+        </tr>
+
+        <tr></tr>
+        <tr>
+          <td colspan="7">
+            <div class="middle-msg">
+              <p>一、事故现场道路环境</p>
+              <p>一、事故现场道路环境</p>
+              <p>一、事故现场道路环境</p>
+              <p>一、事故现场道路环境</p>
+              <p>一、事故现场道路环境</p>
+              <p>一、事故现场道路环境</p>
+              <p>一、事故现场道路环境</p>
+              <p>一、事故现场道路环境</p>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="7">
+            <div class="ex-sign">
+              <span> 现场勘察人员签名：</span>
+              <span> 记录人签名：</span>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="7">
+            <div class="ex-sign">
+              <span @click="getLayoutImage"> 当事人签名：</span>
+              <span> 见证人签名：</span>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import html2canvas from 'html2canvas';
+import { downloadImage, uploadImage } from '@/store/sync';
+import Message from '@/components/base/components/message/message.vue';
+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);
+};
+</script>
+<style lang="scss" scoped>
+.explorate {
+  color: #000;
+  font-size: 18px;
+  padding: 10px 30px;
+  width: 100%;
+  height: 100%;
+  // display: grid;
+  overflow: auto;
+  font-family: sr, st;
+
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    table {
+      width: 100%;
+      height: 100%;
+      border-collapse: collapse;
+      tr {
+        td {
+          height: 40px;
+          border: 2px solid #000;
+          outline: none;
+          line-height: 24px;
+          padding: 0 14px;
+          text-align: center;
+          .middle-msg {
+            text-align: left;
+          }
+          .ex-sign {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+        }
+        &.table-header {
+          td {
+            > div {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              > div {
+                margin-right: 40px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.downMode {
+    table {
+      border: 2px solid #000;
+      tr {
+        td {
+          border: none;
+          border-bottom: 1px solid #000;
+          border-right: 1px solid #000;
+          &:last-of-type {
+            border-right: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/tables/extract.vue

@@ -0,0 +1,140 @@
+<!--  -->
+<template>
+  <div class="explorate" :class="{ downMode }" ref="layoutRef">
+    <h2 class="title">当事人血样（尿样）提取登记表</h2>
+
+    <div class="container">
+      <table>
+        <tr>
+          <td width="15%" colspan="2">姓名</td>
+          <td width="20%"></td>
+          <td width="10%">性别</td>
+          <td width="5%"></td>
+          <td width="20%">身份证号码</td>
+          <td width="30%" colspan="2"></td>
+        </tr>
+        <tr>
+          <td width="15%" colspan="2">事故时间</td>
+          <td width="35%" colspan="3">2023年6月14日16时29分</td>
+          <td width="20%">地点</td>
+          <td width="30%" colspan="2"></td>
+        </tr>
+        <tr>
+          <td colspan="2">血样（尿样)提取时间</td>
+          <td colspan="6"></td>
+        </tr>
+        <tr>
+          <td colspan="2">血样（尿样)提取地点</td>
+          <td colspan="6"></td>
+        </tr>
+        <tr>
+          <td width="10%" rowspan="4" colspan="1">血样（尿样）提取人员填写</td>
+          <td width="5%" rowspan="3">提取登记</td>
+          <td colspan="3">A样本盛装容器编号</td>
+          <td></td>
+          <td width="10%">提取量</td>
+          <td>ml</td>
+        </tr>
+        <tr>
+          <td colspan="3">B样本盛装容器编号</td>
+          <td></td>
+          <td>提取量</td>
+          <td>ml</td>
+        </tr>
+        <tr>
+          <td colspan="2">消毒名称</td>
+          <td colspan="1"></td>
+          <td>密封方式</td>
+          <td colspan="2"></td>
+        </tr>
+        <tr>
+          <td width="10%" colspan="3">提取人员单位</td>
+          <td></td>
+          <td>提取人员（签名）</td>
+          <td colspan="2"></td>
+        </tr>
+        <tr>
+          <td>通知家属情况</td>
+          <td colspan="7"></td>
+        </tr>
+        <tr>
+          <td>被提取人（签名）</td>
+          <td colspan="2"></td>
+          <td>见证人（签名）</td>
+          <td colspan="2"></td>
+          <td>交通警察（签名）</td>
+          <td colspan="2"></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import html2canvas from 'html2canvas';
+import { downloadImage, uploadImage } from '@/store/sync';
+import Message from '@/components/base/components/message/message.vue';
+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);
+};
+</script>
+<style lang="scss" scoped>
+.explorate {
+  color: #000;
+  font-size: 18px;
+  padding: 10px 30px;
+  width: 100%;
+  height: 100%;
+  // display: grid;
+  overflow: auto;
+  font-family: sr, st;
+
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    table {
+      width: 100%;
+      height: 100%;
+      border-collapse: collapse;
+      tr {
+        td {
+          height: 40px;
+          border: 2px solid #000;
+          outline: none;
+          line-height: 24px;
+          padding: 0 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  &.downMode {
+    table {
+      border: 2px solid #000;
+      tr {
+        td {
+          border: none;
+          border-bottom: 1px solid #000;
+          border-right: 1px solid #000;
+          &:last-of-type {
+            border-right: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>