traffic-laser/src/views/tables/explorate-one.vue

<!--  -->
<template>
  <!-- <MainPanel>
    <template v-slot:header>
      <Header title="道路交通事故现场勘查笔录" type="return">
        <ui-button type="primary" width="96px" @click="getLayoutImage"> 完成 </ui-button>
      </Header>
    </template> -->

  <div class="explorate" :class="{ downMode }">
    <div ref="layoutRef">
      <h2 class="title">道路交通事故现场勘查笔录</h2>

      <div class="container">
        <div class="wrapper">
          <div class="header">
            <div class="item" v-for="(i, index) in sceneTypes.options" @click="checkLevel(sceneTypes, index)">
              <ui-icon :type="sceneTypes.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
              <span>{{ i.title }}</span>
            </div>
          </div>
          <div class="info">
            <div>勘查单位</div>
            <div class="input-box" contenteditable></div>
          </div>
          <div class="info">
            <div>勘查时间</div>
            <div class="input-box" contenteditable></div>
          </div>
          <div class="info">
            <div>事故时间</div>
            <div class="input-box" contenteditable></div>
          </div>
          <div class="time">
            <div class="name">事故地点</div>
            <div class="time-one">
              <div class="road-type">
                <div class="road-type-name">道路类型</div>
                <div class="type-box">
                  <div class="type-item">
                    <div class="type-item-name">公路</div>
                    <div class="item-msg">
                      <div class="item-info">
                        <div class="item-info-name">技术等级</div>
                        <div class="item-info-box">
                          <div class="item" v-for="(i, index) in technicalLevel.options" @click="checkLevel(technicalLevel, index)">
                            <ui-icon :type="technicalLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                            <span>{{ i.title }}</span>
                          </div>
                        </div>
                      </div>
                      <div class="item-info">
                        <div class="item-info-name">行政等级</div>
                        <div class="item-info-box">
                          <div class="item" v-for="(i, index) in administrativeLevel.options" @click="checkLevel(administrativeLevel, index)">
                            <ui-icon :type="administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                            <span>{{ i.title }}</span>
                            <div class="input-box" style="flex: 1" v-if="i.id == 5">
                              <input type="text" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="type-item city">
                    <div class="type-item-name">城市道路</div>
                    <div class="item-msg">
                      <div class="item-info">
                        <div class="item-info-box" style="flex-flow: row wrap">
                          <div class="item" v-for="(i, index) in cityRoadList.options" @click="checkLevel(cityRoadList, index)">
                            <ui-icon :type="cityRoadList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                            <span>{{ i.title }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="road-type">
                <div class="road-type-name">路口路段类型</div>
                <div class="type-box">
                  <div class="type-item">
                    <div class="type-item-name">路口</div>
                    <div class="item-msg intersection" style="min-height: 48px; flex-flow: row wrap">
                      <div class="item" v-for="(i, index) in roadSideList.options" @click="checkLevel(roadSideList, index)">
                        <ui-icon :type="roadSideList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                        <span>{{ i.title }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="type-item">
                    <div class="type-item-name">路段</div>
                    <div class="item-msg intersection" style="min-height: 60px; flex-flow: row wrap">
                      <div class="item" v-for="(i, index) in roadPartList.options" @click="checkLevel(roadPartList, index)">
                        <ui-icon :type="roadPartList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                        <span>{{ i.title }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="road-info">
                <div class="road-name">路名</div>
                <div class="road-msg">
                  <div class="road-name-text" contenteditable></div>
                  <div class="road-num">路号（公路）</div>
                  <div class="road-num-text" contenteditable></div>
                </div>
              </div>
              <div class="road-pos">
                <div class="road-pos-name">位置</div>
                <div class="pos-box">
                  <div class="pos-item">
                    <div class="pos-item-name" style="height: 30px">卫星定位</div>
                    <div class="pos-msg" style="height: 30px">
                      <div class="longitude">
                        <span>经度:</span>
                        <div contenteditable></div>
                      </div>
                      <div class="latitude">
                        <span>纬度:</span>
                        <div contenteditable></div>
                      </div>
                    </div>
                  </div>
                  <div class="pos-item">
                    <div class="pos-item-name" style="height: 54px">地点描述</div>
                    <div class="pos-msg desc" style="height: 54px" contenteditable></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="weather">
            <div class="name">天气</div>

            <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>
                <span>{{ i.title }}</span>
                <div class="input-box" v-if="i.id == 10">
                  <input type="text" />
                </div>
              </div>
            </div>
          </div>
          <div class="environment">
            <div>
              <p style="margin-bottom: 18px">一、事故现场道路环境</p>
              <div class="em-info-box">
                <div class="info-item" v-for="(i, index) in environments">
                  <span class="info-title">{{ i.title }}</span>
                  <div class="check-box">
                    <div class="check-item" 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>
                      <span>{{ j.name }}</span>
                    </div>
                  </div>
                  <div class="input-box">
                    <input type="text" />
                  </div>
                </div>
              </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>
      <div class="footer">
        <span>共<span>肆</span>页</span>
        <span>第<span>壹</span>页</span>
      </div>
    </div>
  </div>
  <!-- </MainPanel> -->
</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';
import Header from '@/components/photos/header.vue';
import MainPanel from '@/components/main-panel/index.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);
};
const sceneTypes = ref({
  check: 0,
  options: [
    { id: 1, title: '现场勘查' },
    { id: 2, title: '补充勘查' },
  ],
});
const roadPartList = ref({
  check: 0,
  options: [
    { id: 1, title: '普通路段' },
    { id: 2, title: '高架路段' },
    { id: 3, title: '变窄路段' },
    { id: 4, title: '窄路' },
    { id: 5, title: '桥梁' },
    { id: 6, title: '隧道' },
    { id: 7, title: '路段进出处' },
    { id: 8, title: '路侧险要路段' },
    { id: 9, title: '其他特殊路段' },
  ],
});
const roadSideList = ref({
  check: 0,
  options: [
    { id: 1, title: '三枝分叉口' },
    { id: 2, title: '四枝分叉口' },
    { id: 3, title: '多枝分叉口' },
    { id: 4, title: '环形交叉口' },
    { id: 5, title: '匝道口' },
  ],
});
const cityRoadList = ref({
  check: 0,
  options: [
    { id: 1, title: '城市快速路' },
    { id: 2, title: '一般城市道路' },
    { id: 3, title: '单位小区自建路' },
    { id: 4, title: '公共停车场' },
    { id: 5, title: '公共广场' },
    { id: 6, title: '其他路' },
  ],
});

const administrativeLevel = ref({
  check: 0,
  options: [
    { id: 1, title: '国道' },
    { id: 2, title: '省道' },
    {
      id: 3,
      title: '县道',
    },
    {
      id: 4,
      title: '乡村道',
    },
    {
      id: 5,
      title: '其他',
    },
  ],
});
const checkLevel = (item, index) => {
  item.check = item.options[index].id;
};
const technicalLevel = ref({
  check: 0,
  options: [
    { id: 1, title: '高速' },
    { id: 2, title: '一级' },
    {
      id: 3,
      title: '二级',
    },
    {
      id: 4,
      title: '三级',
    },
    {
      id: 5,
      title: '四级',
    },
    {
      id: 6,
      title: '等外',
    },
  ],
});
const weatherList = ref({
  check: 0,
  options: [
    { id: 1, title: '晴' },
    { id: 2, title: '阴' },
    {
      id: 3,
      title: '多云',
    },
    {
      id: 4,
      title: '雨',
    },
    {
      id: 5,
      title: '雪',
    },
    {
      id: 6,
      title: '雾',
    },
    {
      id: 7,
      title: '冰雹',
    },
    {
      id: 8,
      title: '沙尘',
    },
    {
      id: 9,
      title: '霾',
    },
    {
      id: 10,
      title: '其他',
    },
  ],
});

const checkEnvironItem = (item, index, j_index) => {
  environments.value[index].check = item.id;
};
const environments = ref([
  {
    id: 1,
    title: '影响视线或行驶的障碍物：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '无' },
      { id: 2, name: '有：' },
    ],
  },
  {
    id: 2,
    title: '递路交通标志：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '无' },
      { id: 2, name: '有：' },
    ],
  },
  {
    id: 3,
    title: '道路交通标线：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '无' },
      { id: 2, name: '有：' },
    ],
  },
  {
    id: 4,
    title: '中央隔离设施：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '无' },
      { id: 2, name: '有：' },
    ],
  },
  {
    id: 5,
    title: '路侧防护设施：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '无' },
      { id: 2, name: '有：' },
    ],
  },
  {
    id: 6,
    title: '路面材料：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '沥青' },
      { id: 2, name: '水泥' },
      { id: 3, name: '砂石' },
      { id: 4, name: '土路' },
      { id: 5, name: '其他' },
    ],
  },
  {
    id: 7,
    title: '路面状况：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '路面完好' },
      { id: 2, name: '施工' },
      { id: 3, name: '凹凸' },
      { id: 4, name: '塌陷' },
      { id: 5, name: '路障' },
      { id: 6, name: '其他' },
    ],
  },
  {
    id: 8,
    title: '路表状况：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '干燥' },
      { id: 2, name: '潮湿' },
      { id: 3, name: '积水' },
      { id: 4, name: '漫水' },
      { id: 5, name: '冰雪' },
      { id: 6, name: '泥泞' },
      { id: 7, name: '其他' },
    ],
  },
  {
    id: 9,
    title: '照明情况：',
    value: '',
    check: 0,
    options: [
      { id: 1, name: '白天   夜间路灯照明' },
      { id: 2, name: '有' },
      { id: 3, name: '无' },
    ],
  },
  {
    id: 10,
    title: '照明情况：',
    value: '',
    check: 0,
    options: [],
  },
]);
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.explorate {
  color: #000;
  font-size: 20px;
  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 {
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    margin-top: 10px;
    > span {
      > span {
        margin: 0 24px;
      }
    }
  }

  &.downMode {
    width: 1050px;
    height: 1485px;
    > div {
      padding: 125px 100px 75px;
    }
  }
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(8, auto);
  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;
      }
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #000;
    height: 35px;
    .item {
      margin-right: 60px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .info {
    display: grid;
    grid-template-columns: 14% 86%;
    grid-template-rows: repeat(1, 100%);
    height: 35px;
    > div {
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      &:last-of-type {
        border-right: none;
      }
      &.input-box {
        outline: none;
        padding: 0 10px;
        line-height: 35px;
        text-align: center;
      }
    }
  }
  .environment {
    padding: 10px;
    .em-info-box {
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        .check-box {
          display: inline-block;
          .check-item {
            display: inline-block;
            margin-right: 10px;
            &:last-of-type {
              margin-right: 0;
            }
          }
        }
        .input-box {
          flex: 1;
          display: inline-block;
          border-bottom: 1px solid #000;
          input {
            width: 100%;
            padding: 0 10px;
          }
        }
      }
    }
  }
  .weather {
    display: grid;
    grid-template-columns: 14% 86%;
    grid-template-rows: repeat(1, 100%);
    min-height: 35px;
    border-bottom: 1px solid #000;
    .name {
      border-right: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    > div {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 5px;
      .item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-right: 10px;
        margin-bottom: 5px;
        .input-box {
          input {
            border-bottom: 1px solid #000;
          }
        }
      }
    }
  }
  .time {
    display: grid;
    grid-template-columns: 14% 86%;
    grid-template-rows: repeat(1, auto);
    .name {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    > div {
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;

      &:last-of-type {
        border-right: none;
      }
    }
    .time-one {
      // display: grid;
      // grid-auto-flow: row;
      // grid-template-columns: 66px;
      // grid-template-rows: repeat(4, auto);
      .road-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid #000;
        .road-name {
          width: 66px;
          box-sizing: border-box;
          padding: 0 10px;
        }
        .road-msg {
          flex: 1;
          border-left: 1px solid #000;
          > div {
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
          }
          .road-name-text {
            width: 55%;
            flex: 1;
            padding: 0 10px;
            outline: none;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .road-num {
            width: 23.8%;
            padding: 0 10px;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
          }
          .road-num-text {
            width: 20%;
            padding: 0 10px;
            flex: 1;
            outline: none;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        > div {
          min-height: 30px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
      .road-pos {
        display: flex;
        align-items: center;
        width: 100%;
        .road-pos-name {
          width: 66px;
          padding: 0 10px;
        }
        .pos-box {
          // width: 100%;
          flex: 1;

          .pos-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex: 1;
            width: 100%;
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
            &:last-of-type {
              border-bottom: none;
            }

            .pos-item-name {
              width: 120px;
              padding: 0 10px;
              border-right: 1px solid #000;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .pos-msg {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              &.desc {
                outline: none;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 5px;
                line-height: 54px;
              }
              .longitude {
                display: inline-block;
                width: 50%;
                border-right: 1px solid #000;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 10px;
                > div {
                  flex: 1;
                  height: 30px;
                  outline: none;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                }
              }
              .latitude {
                display: inline-block;
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 10px;
                > div {
                  flex: 1;
                  height: 30px;
                  outline: none;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                }
              }
            }
          }
        }
      }
      .road-type {
        border-bottom: 1px solid #000;
        display: flex;
        align-items: center;
        width: 100%;
        .road-type-name {
          width: 66px;
          padding: 0 10px;
        }
        .type-box {
          // width: 100%;
          flex: 1;

          .type-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex: 1;
            width: 100%;
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
            &.city {
              .type-item-name {
                // border-right: 1px solid #000;
              }
              .item-info-box {
                border-left: 1px solid #000;
              }
            }
            &:last-of-type {
              border-bottom: none;
            }
            .type-item-name {
              width: 66px;
              padding: 0 10px;
            }
            .item-msg {
              flex: 1;
              &.intersection {
                min-height: 48px;
                border-left: 1px solid #000;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 5px;
                .item {
                  margin-right: 5px;
                  margin-bottom: 5px;
                  // flex: 1;
                  // display: flex;
                  // align-items: center;
                  // justify-content: flex-start;
                }
              }
            }
            > div {
              // width: 100%;
              // height: 56px;
              .item-info {
                width: 100%;

                border-bottom: 1px solid #000;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                position: relative;
                .item-info-name {
                  width: 66px;
                  height: 56px;
                  // line-height: 56px;
                  padding: 0 10px;
                  border-right: 1px solid #000;
                  border-left: 1px solid #000;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                }
                .item-info-box {
                  flex: 1;
                  min-height: 56px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  padding: 5px;
                  .item {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    margin-right: 2px;
                    margin-bottom: 5px;
                    &:last-of-type {
                      margin-right: 0;
                      display: flex;
                      align-items: center;
                      justify-content: flex-start;
                      flex: 1;
                    }
                    .input-box {
                      width: 10%;
                      input {
                        width: 100%;
                        border-bottom: 1px solid #000;
                      }
                    }
                  }
                }
                &:last-of-type {
                  border-bottom: none;
                }
              }
            }
          }
        }
      }
    }
  }
}
.wrapper div {
}
</style>