feat:一大堆表格

src/views/tables/explorate-four.vue

@@ -0,0 +1,266 @@
+<!--  -->
+<template>
+  <div class="explorate">
+    <div>
+      <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
+
+      <div class="container">
+        <div class="table-excel">
+          <p style="margin-bottom: 10px">六、对车辆驾驶人进行酒精含量、国家管制的精神药品和麻醉药品测试的结果以及提取血样、 尿样情况</p>
+          <table>
+            <tr>
+              <td>编号</td>
+              <td>姓名</td>
+              <td style="width: 170px">身份证号码</td>
+              <td>联系电话</td>
+              <td>交通方式</td>
+              <td style="width: 100px">酒精、 国家管制精神药品和麻醉药品测试结果</td>
+              <td style="width: 110px">是否抽血或提取尿样</td>
+              <td>备注</td>
+            </tr>
+
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+          </table>
+        </div>
+        <div class="table-excel">
+          <p style="margin-bottom: 10px">七、肇事车辆驶离的方向、 车型、 车号、 车身颜色等情况</p>
+          <table>
+            <tr>
+              <td>编号</td>
+              <td>牌号</td>
+              <td>车型</td>
+              <td>车身颜色</td>
+              <td>驶离路线、方向</td>
+              <td>驾乘人员情况</td>
+              <td>其他信息</td>
+            </tr>
+
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+          </table>
+        </div>
+        <div class="table-body">
+          <div class="item column">
+            <span>八、现场采取强制措施情况</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+        <div class="table-body no-border">
+          <div class="item column">
+            <span>九、勘查现场的交通警察认为应当记录的其他情况</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+
+        <div class="sign-box">
+          <div>
+            <span>现场勘查人员签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>记录人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+        <div class="sign-box">
+          <div>
+            <span>当事人签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>见证人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer">
+        <span>共<span>肆</span>页</span>
+        <span>第<span>肆</span>页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+</script>
+<style lang="scss" scoped>
+.explorate {
+  color: #000;
+  width: 100%;
+  height: 100%;
+
+  font-family: sr, st;
+
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    border: 1px solid #000;
+    font-size: 20px;
+    .table-excel {
+      padding: 10px;
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        border: 1px solid #000;
+        tr {
+          // border-bottom: 1px solid #000;
+          &:last-of-type {
+            td {
+              border-bottom: none;
+            }
+          }
+        }
+        td {
+          padding: 10px 14px;
+          box-sizing: border-box;
+          text-align: center;
+          max-width: 11%;
+          height: 40px;
+          border-right: 1px solid #000;
+          border-bottom: 1px solid #000;
+          &:last-of-type {
+            border-right: none;
+          }
+          > div {
+            outline: none;
+          }
+        }
+      }
+    }
+    .sign-box {
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      border-top: 1px solid #000;
+      min-height: 40px;
+      > div {
+        width: 50%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        > div {
+          flex: 1;
+          height: 100%;
+          outline: none;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          line-height: 40px;
+        }
+      }
+    }
+    .table-body {
+      // border-top: 1px solid #000;
+      padding: 10px;
+      border-bottom: 1px solid #000;
+      &.no-border {
+        border-bottom: none;
+      }
+      .item {
+        display: flex;
+        margin-bottom: 10px;
+        &.column {
+          flex-direction: column;
+          height: 130px;
+          > div {
+            outline: none;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 60px;
+    margin-top: 10px;
+    > span {
+      > span {
+        margin: 0 24px;
+      }
+    }
+  }
+}
+</style>

src/views/tables/explorate-one.vue

@@ -475,7 +475,7 @@ div {
 
   // padding: 80px 0 0 0;
   > div {
-    padding: 20px 50px 30px;
+    // padding: 20px 50px 30px;
   }
   .title {
     text-align: center;

src/views/tables/explorate-three.vue

@@ -0,0 +1,143 @@
+<!--  -->
+<template>
+  <div class="explorate">
+    <div>
+      <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
+
+      <div class="container">
+        <div class="table-body">
+          <p style="margin-bottom: 20px; margin-top: 10px">五、现场痕迹物证的种类、形态、尺寸、位置以及固定或者提取情况</p>
+
+          <div class="item column">
+            <span>（一）地面痕迹：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>（二）车体痕迹：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>（三）人体痕迹：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>（四）物证：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>（五）其他：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+
+        <div class="sign-box">
+          <div>
+            <span>现场勘查人员签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>记录人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+        <div class="sign-box">
+          <div>
+            <span>当事人签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>见证人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <span>共<span>肆</span>页</span>
+        <span>第<span>叁</span>页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+</script>
+<style lang="scss" scoped>
+.explorate {
+  color: #000;
+  width: 100%;
+  height: 100%;
+  // display: grid;
+
+  font-family: sr, st;
+
+  // padding: 80px 0 0 0;
+  > div {
+    // padding: 20px 50px 30px;
+  }
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    border: 1px solid #000;
+    font-size: 20px;
+
+    .sign-box {
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      border-top: 1px solid #000;
+      min-height: 40px;
+      > div {
+        width: 50%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        > div {
+          flex: 1;
+          height: 100%;
+          outline: none;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          line-height: 40px;
+        }
+      }
+    }
+    .table-body {
+      margin-top: 10px;
+      padding: 0 10px 10px;
+      .item {
+        display: flex;
+        margin-bottom: 10px;
+
+        &.column {
+          flex-direction: column;
+          height: 200px;
+          width: 100%;
+
+          > div {
+            outline: none;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 60px;
+    margin-top: 10px;
+    > span {
+      > span {
+        margin: 0 24px;
+      }
+    }
+  }
+}
+</style>

src/views/tables/explorate-two.vue

@@ -0,0 +1,385 @@
+<!--  -->
+<template>
+  <div class="explorate">
+    <div>
+      <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
+
+      <div class="container">
+        <div class="table-header">
+          <p style="margin-bottom: 5px">二、现场监控设备情况</p>
+          <div class="table-header-info">
+            <div class="item" v-for="(i, index) in headerList.options" @click="checkOptions(headerList, index)">
+              <ui-icon :type="headerList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+              <span>{{ i.title }}</span>
+              <div v-if="i.id == 2" style="flex: 1"><input type="text" /></div>
+            </div>
+          </div>
+        </div>
+        <div class="table-body">
+          <p style="margin-bottom: 20px; margin-top: 10px">三、现场伤亡人员基本情况及救援</p>
+          <p style="margin-bottom: 10px">（一）伤亡人员基本情况；</p>
+          <div class="item">
+            <span>当场死亡：（</span>
+            <div contenteditable style="width: 10px"></div>
+            <span>）人；急救、医疗人员签名确认：</span>
+            <div style="flex: 1">
+              <input type="text" />
+            </div>
+          </div>
+          <div class="item">
+            <span>受伤：（</span>
+            <div contenteditable style="width: 10px"></div>
+            <span>）人。</span>
+          </div>
+          <div class="item column">
+            <span>伤亡人员去向：</span>
+            <div style="height: 60px; width: 100%" contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>其他需求说明的情况：</span>
+            <div style="height: 60px; width: 100%" contenteditable></div>
+          </div>
+          <p>（二）救援简要情况：</p>
+
+          <div class="item" style="margin-top: 10px">
+            <span> 是否涉及危险物品：</span>
+            <div style="margin-right: 40px" v-for="(i, index) in isnotList.options" @click="checkOptions(isnotList, index)">
+              <ui-icon :type="isnotList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+              <span>{{ i.title }}</span>
+            </div>
+            <!-- <div style="margin-right: 40px">
+              <ui-icon type="rb_n"></ui-icon>
+              <span>是</span>
+            </div> -->
+            <div>名称：</div>
+            <div style="flex: 1">
+              <input type="text" />
+            </div>
+          </div>
+          <p style="margin-bottom: 5px">相关部门和人员到达情况：</p>
+          <div class="item half">
+            <template v-for="(i, index) in reachList.options">
+              <div v-if="index < 2" @click="checkOptions(reachList, index)">
+                <div style="display: inline-block">
+                  <ui-icon :type="reachList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                  <span>{{ i.title }}</span>
+                </div>
+              </div>
+            </template>
+
+            <!-- <div>
+              <div style="display: inline-block"><ui-icon type="rb_n"></ui-icon> <span>消防</span></div>
+            </div> -->
+          </div>
+          <div class="item half">
+            <template v-for="(i, index) in reachList.options">
+              <div v-if="index >= 2" @click="checkOptions(reachList, index)">
+                <div style="display: inline-block">
+                  <ui-icon :type="reachList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                  <span>{{ i.title }}</span>
+                </div>
+              </div>
+            </template>
+            <!-- <div>
+              <div style="display: inline-block"><ui-icon type="rb_n"></ui-icon> <span>其他</span></div>
+            </div> -->
+          </div>
+        </div>
+        <div class="table-excel">
+          <p style="margin-bottom: 10px">四、现场事故车辆车型、牌号及车辆挡位 转向、灯光、仪表指针位置，汽车行驶记录仪、车载 事件数据记录仪、卫星定位装置等安装及使用情况</p>
+          <table>
+            <tr>
+              <td rowspan="2">编号</td>
+              <td rowspan="2">牌号</td>
+              <td rowspan="2">车辆类型</td>
+              <td rowspan="2">车辆档位</td>
+              <td rowspan="2">灯光开启情况</td>
+              <td rowspan="2">车速仪表指针位置</td>
+              <td colspan="3">车载设备安装使用情况（有，无）</td>
+            </tr>
+            <tr>
+              <td>汽车行驶记录仪</td>
+              <td>车载事件数据记录仪</td>
+              <td>卫星定位装置</td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+            <tr>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+          </table>
+        </div>
+        <div class="sign-box">
+          <div>
+            <span>现场勘查人员签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>记录人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+        <div class="sign-box">
+          <div>
+            <span>当事人签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>见证人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <span>共<span>肆</span>页</span>
+        <span>第<span>贰</span>页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+const checkOptions = (item, index) => {
+  item.check = item.options[index].id;
+};
+const headerList = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '未发现',
+    },
+    {
+      id: 2,
+      title: '发现',
+    },
+  ],
+});
+const isnotList = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '否',
+    },
+    {
+      id: 2,
+      title: '是',
+    },
+  ],
+});
+const reachList = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '医疗',
+    },
+    {
+      id: 2,
+      title: '消防',
+    },
+    {
+      id: 3,
+      title: '清障',
+    },
+    {
+      id: 4,
+      title: '其他',
+    },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+div[contenteditable] {
+  outline: none;
+}
+.explorate {
+  color: #000;
+  width: 100%;
+  height: 100%;
+  // display: grid;
+
+  font-family: sr, st;
+
+  // padding: 80px 0 0 0;
+  > div {
+    // padding: 20px 50px 30px;
+  }
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    border: 1px solid #000;
+    font-size: 20px;
+    .table-excel {
+      padding: 10px;
+      table {
+        border-collapse: collapse;
+        border: 1px solid #000;
+        tr {
+          // border-bottom: 1px solid #000;
+          &:last-of-type {
+            td {
+              border-bottom: none;
+            }
+          }
+        }
+        td {
+          padding: 0 14px;
+          box-sizing: border-box;
+          text-align: center;
+          max-width: 11%;
+          height: 40px;
+          border-right: 1px solid #000;
+          border-bottom: 1px solid #000;
+          &:last-of-type {
+            border-right: none;
+          }
+          > div {
+            outline: none;
+          }
+        }
+      }
+    }
+    .sign-box {
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      border-top: 1px solid #000;
+      min-height: 40px;
+      > div {
+        width: 50%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        > div {
+          flex: 1;
+          height: 100%;
+          outline: none;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          line-height: 40px;
+        }
+      }
+    }
+    .table-body {
+      border-top: 1px solid #000;
+      margin-top: 10px;
+      padding: 0 10px 10px;
+      border-bottom: 1px solid #000;
+      .item {
+        display: flex;
+        margin-bottom: 10px;
+        &.half {
+          align-items: center;
+          justify-content: space-between;
+          > div {
+            width: 50%;
+            flex-flow: row wrap;
+          }
+        }
+        &.column {
+          flex-direction: column;
+
+          > div {
+            outline: none;
+            height: 100%;
+          }
+        }
+        > div {
+          input {
+            width: 100%;
+            border-bottom: 1px solid #000;
+          }
+        }
+      }
+    }
+    .table-header {
+      padding: 0 10px;
+      .table-header-info {
+        padding-left: 50px;
+        .item {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          width: 100%;
+          > div {
+            input {
+              width: 100%;
+              border-bottom: 1px solid #000;
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 60px;
+    margin-top: 10px;
+    > span {
+      > span {
+        margin: 0 24px;
+      }
+    }
+  }
+}
+</style>

src/views/tables/explorate.vue

@@ -196,7 +196,7 @@
     <div class="mySwiper">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(i, index) in eleList">
-          <div :id="`layoutRef${index}`">
+          <div class="warpper" :class="{ downMode }" :id="`layoutRef${index}`">
             <component :is="i"></component>
           </div>
         </div>
@@ -215,7 +215,10 @@ import Message from '@/components/base/components/message/message.vue';
 import Header from '@/components/photos/header.vue';
 import MainPanel from '@/components/main-panel/index.vue';
 import one from './explorate-one.vue';
-const eleList = ref([one]);
+import two from './explorate-two.vue';
+import three from './explorate-three.vue';
+import four from './explorate-four.vue';
+const eleList = ref([one, two, three, four]);
 // const layoutRef1 = ref<HTMLDivElement>();
 // const layoutRef2 = ref<HTMLDivElement>();
 
@@ -276,7 +279,11 @@ onMounted(() => {
       height: 100%;
       width: 100%;
       overflow: auto;
-      > div {
+      > .warpper {
+        padding: 20px 50px 30px;
+        &.downMode {
+          padding: 125px 100px 75px;
+        }
         // height: 100%;
         // width: 100%;
         // line-height: 100px;