tables

src/views/tables/explorate-one.vue

@@ -153,14 +153,20 @@
                 <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)">
+                    <div class="check-item" :style="j_index == i.options.length - 1 ? 'flex:1;' : ''" v-for="(j, j_index) in i.options" @click="checkEnvironItem(j, index, j_index)">
                       <ui-icon :type="i.check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
                       <span>{{ j.name }}</span>
+                      <div class="input-box" v-if="j_index == i.options.length - 1">
+                        <input type="text" />
+                      </div>
+                    </div>
+                    <div class="input-box" v-if="!i.options.length">
+                      <input type="text" />
                     </div>
                   </div>
-                  <div class="input-box">
+                  <!-- <div class="input-box" v-if="index == environments.length - 1">
                     <input type="text" />
-                  </div>
+                  </div> -->
                 </div>
               </div>
             </div>
@@ -197,12 +203,12 @@
 </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';
+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 () => {
@@ -210,71 +216,71 @@ const getLayoutImage = async () => {
   await nextTick();
   console.error(layoutRef.value);
   const canvas = await html2canvas(layoutRef.value);
-  Message.success({ msg: '已保存至相册', time: 2000 });
+  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');
+  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: '补充勘查' },
+    { 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: '其他特殊路段' },
+    { 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: '匝道口' },
+    { 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: '其他路' },
+    { 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: 1, title: "国道" },
+    { id: 2, title: "省道" },
     {
       id: 3,
-      title: '县道',
+      title: "县道",
     },
     {
       id: 4,
-      title: '乡村道',
+      title: "乡村道",
     },
     {
       id: 5,
-      title: '其他',
+      title: "其他",
     },
   ],
 });
@@ -284,62 +290,62 @@ const checkLevel = (item, index) => {
 const technicalLevel = ref({
   check: 0,
   options: [
-    { id: 1, title: '高速' },
-    { id: 2, title: '一级' },
+    { id: 1, title: "高速" },
+    { id: 2, title: "一级" },
     {
       id: 3,
-      title: '二级',
+      title: "二级",
     },
     {
       id: 4,
-      title: '三级',
+      title: "三级",
     },
     {
       id: 5,
-      title: '四级',
+      title: "四级",
     },
     {
       id: 6,
-      title: '等外',
+      title: "等外",
     },
   ],
 });
 const weatherList = ref({
   check: 0,
   options: [
-    { id: 1, title: '晴' },
-    { id: 2, title: '阴' },
+    { id: 1, title: "晴" },
+    { id: 2, title: "阴" },
     {
       id: 3,
-      title: '多云',
+      title: "多云",
     },
     {
       id: 4,
-      title: '雨',
+      title: "雨",
     },
     {
       id: 5,
-      title: '雪',
+      title: "雪",
     },
     {
       id: 6,
-      title: '雾',
+      title: "雾",
     },
     {
       id: 7,
-      title: '冰雹',
+      title: "冰雹",
     },
     {
       id: 8,
-      title: '沙尘',
+      title: "沙尘",
     },
     {
       id: 9,
-      title: '霾',
+      title: "霾",
     },
     {
       id: 10,
-      title: '其他',
+      title: "其他",
     },
   ],
 });
@@ -350,111 +356,111 @@ const checkEnvironItem = (item, index, j_index) => {
 const environments = ref([
   {
     id: 1,
-    title: '影响视线或行驶的障碍物：',
-    value: '',
+    title: "影响视线或行驶的障碍物：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '无' },
-      { id: 2, name: '有：' },
+      { id: 1, name: "无" },
+      { id: 2, name: "有：" },
     ],
   },
   {
     id: 2,
-    title: '递路交通标志：',
-    value: '',
+    title: "递路交通标志：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '无' },
-      { id: 2, name: '有：' },
+      { id: 1, name: "无" },
+      { id: 2, name: "有：" },
     ],
   },
   {
     id: 3,
-    title: '道路交通标线：',
-    value: '',
+    title: "道路交通标线：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '无' },
-      { id: 2, name: '有：' },
+      { id: 1, name: "无" },
+      { id: 2, name: "有：" },
     ],
   },
   {
     id: 4,
-    title: '中央隔离设施：',
-    value: '',
+    title: "中央隔离设施：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '无' },
-      { id: 2, name: '有：' },
+      { id: 1, name: "无" },
+      { id: 2, name: "有：" },
     ],
   },
   {
     id: 5,
-    title: '路侧防护设施：',
-    value: '',
+    title: "路侧防护设施：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '无' },
-      { id: 2, name: '有：' },
+      { id: 1, name: "无" },
+      { id: 2, name: "有：" },
     ],
   },
   {
     id: 6,
-    title: '路面材料：',
-    value: '',
+    title: "路面材料：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '沥青' },
-      { id: 2, name: '水泥' },
-      { id: 3, name: '砂石' },
-      { id: 4, name: '土路' },
-      { id: 5, name: '其他' },
+      { id: 1, name: "沥青" },
+      { id: 2, name: "水泥" },
+      { id: 3, name: "砂石" },
+      { id: 4, name: "土路" },
+      { id: 5, name: "其他" },
     ],
   },
   {
     id: 7,
-    title: '路面状况：',
-    value: '',
+    title: "路面状况：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '路面完好' },
-      { id: 2, name: '施工' },
-      { id: 3, name: '凹凸' },
-      { id: 4, name: '塌陷' },
-      { id: 5, name: '路障' },
-      { id: 6, name: '其他' },
+      { id: 1, name: "路面完好" },
+      { id: 2, name: "施工" },
+      { id: 3, name: "凹凸" },
+      { id: 4, name: "塌陷" },
+      { id: 5, name: "路障" },
+      { id: 6, name: "其他" },
     ],
   },
   {
     id: 8,
-    title: '路表状况：',
-    value: '',
+    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: 1, name: "干燥" },
+      { id: 2, name: "潮湿" },
+      { id: 3, name: "积水" },
+      { id: 4, name: "漫水" },
+      { id: 5, name: "冰雪" },
+      { id: 6, name: "泥泞" },
+      { id: 7, name: "其他" },
     ],
   },
   {
     id: 9,
-    title: '照明情况：',
-    value: '',
+    title: "照明情况：",
+    value: "",
     check: 0,
     options: [
-      { id: 1, name: '白天   夜间路灯照明' },
-      { id: 2, name: '有' },
-      { id: 3, name: '无' },
+      { id: 1, name: "白天   夜间路灯照明" },
+      { id: 2, name: "有" },
+      { id: 3, name: "无" },
     ],
   },
   {
     id: 10,
-    title: '照明情况：',
-    value: '',
+    title: "照明情况：",
+    value: "",
     check: 0,
     options: [],
   },
@@ -580,9 +586,11 @@ div {
         align-items: center;
         margin-bottom: 18px;
         .check-box {
-          display: inline-block;
+          // display: inline-block;
+          display: flex;
+          flex: 1;
           .check-item {
-            display: inline-block;
+            display: flex;
             margin-right: 10px;
             &:last-of-type {
               margin-right: 0;