fix: 1

src/components/base/assets/scss/components/_input.scss

@@ -1,17 +1,18 @@
 .ui-input {
-  display: inline-flex;
-  align-items: center;
-  --base-border-color: rgba(255, 255, 255, 0.2);
+  display               : inline-flex;
+  align-items           : center;
+  --base-border-color   : rgba(255, 255, 255, 0.2);
   --colors-content-color: #fff;
 
   &.error {
-    position: relative;
+    position             : relative;
     --colors-primary-base: #FA3F48;
-    --base-border-color: #FA3F48;
+    --base-border-color  : #FA3F48;
+
     .error-msg {
-      top: 100%;
-      position: absolute;
-      color: var(--colors-primary-base);
+      top       : 100%;
+      position  : absolute;
+      color     : var(--colors-primary-base);
       margin-top: 5px;
     }
   }
@@ -20,82 +21,83 @@
     position: relative;
 
     &::before {
-      content: '*';
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 100%;
+      content     : '*';
+      position    : absolute;
+      top         : 50%;
+      transform   : translateY(-50%);
+      right       : 100%;
       margin-right: 4px;
-      color: #FA3F48;
-      line-height: 1.5em;
+      color       : #FA3F48;
+      line-height : 1.5em;
     }
   }
 
-  
+
   .input {
-    position: relative;
+    position   : relative;
     align-items: center;
-    display: inline-flex;
-    
+    display    : inline-flex;
+
 
     .input-div,
     textarea,
     input {
-      width: 100%;
-      height: 100%;
-      outline: none;
-      border: none;
-      font-size: 14px;
-      color: var(--colors-content-color);
+      width       : 100%;
+      height      : 100%;
+      outline     : none;
+      border      : none;
+      font-size   : 14px;
+      color       : var(--colors-content-color);
       padding-left: 4px;
-      resize: none;
+      resize      : none;
 
       &+.replace {
         position: absolute;
-        z-index: 1;
+        z-index : 1;
       }
 
       &.replace-input {
         opacity: 0;
-        cursor: pointer;
+        cursor : pointer;
       }
     }
 
     .pre-icon {
       position: absolute;
-      z-index: 1;
+      z-index : 1;
     }
   }
 
   .label {
-    cursor: pointer;
+    cursor     : pointer;
     margin-left: 7px;
   }
 
   .radio,
   .checkbox {
-    width: 16px;
+    width : 16px;
     height: 16px;
-      
+
     input {
       &+.replace {
-        color: var(--colors-color);
-        border: 1px solid currentColor;
+        color           : var(--colors-color);
+        border          : 1px solid currentColor;
         background-color: var(--colors-normal-back);
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        pointer-events: none;
-        transition: all .1s linear;
-
-      &.checked {
-        color: var(--colors-primary-base);
-      }
+        left            : 0;
+        top             : 0;
+        right           : 0;
+        bottom          : 0;
+        pointer-events  : none;
+        transition      : all .1s linear;
+
+        &.checked {
+          color: var(--colors-primary-base);
+        }
       }
 
       &:focus+.replace {
-        border-color: var(--colors-primary-base);;
+        border-color: var(--colors-primary-base);
+        ;
       }
 
     }
@@ -105,17 +107,18 @@
   .checkbox input {
     &+.replace {
       border-radius: 4px;
+
       .icon {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%) scale(0);
+        position  : absolute;
+        left      : 50%;
+        top       : 50%;
+        transform : translate(-50%, -50%) scale(0);
         transition: all .1s linear;
       }
 
 
       &.checked {
-        .icon{
+        .icon {
           transform: translate(-50%, -50%) scale(1);
         }
       }
@@ -126,20 +129,21 @@
   .radio input {
     &+.replace {
       border-radius: 50%;
+
       &::after {
-        content: '';
-        border-radius: 50%;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%) scale(0);
-        transition: all .1s linear;
-        width: 60%;
-        height: 60%;
+        content         : '';
+        border-radius   : 50%;
+        position        : absolute;
+        left            : 50%;
+        top             : 50%;
+        transform       : translate(-50%, -50%) scale(0);
+        transition      : all .1s linear;
+        width           : 60%;
+        height          : 60%;
         background-color: currentColor;
       }
 
-      &.checked::after{
+      &.checked::after {
         transform: translate(-50%, -50%) scale(1);
       }
     }
@@ -148,26 +152,27 @@
   }
 
   .text {
-    width: 100%;
-    height: 100%;
+    width        : 100%;
+    height       : 100%;
     border-radius: 4px;
 
     input {
-      background: var(--colors-normal-back);
-      height: 100%;
-      padding: 8px 10px;
+      background   : var(--colors-normal-back);
+      height       : 100%;
+      padding      : 8px 10px;
       border-radius: 4px;
-      border: 1px solid var(--base-border-color);
-      transition: border .3s ease;
+      border       : 1px solid var(--base-border-color);
+      transition   : border .3s ease;
 
       &:focus {
         border-color: var(--colors-primary-base);
       }
 
-      &::placeholder { 
+      &::placeholder {
         color: var(--colors-color);
       }
     }
+
     .input-value {
       position: absolute;
     }
@@ -176,12 +181,14 @@
       input {
         padding-left: 30px;
       }
+
       .input-value {
         left: 30px;
       }
+
       .pre-icon {
-        left: 10px;
-        top: 50%;
+        left     : 10px;
+        top      : 50%;
         transform: translateY(-50%);
       }
     }
@@ -194,24 +201,27 @@
       input {
         padding-right: 30px;
       }
+
       .retouch {
-        position: absolute;
-        right: 10px;
-        top: 50%;
+        position : absolute;
+        right    : 10px;
+        top      : 50%;
         transform: translateY(-50%);
       }
 
       .len {
         font-size: var(--small-size);
-        color: rgba(var(--colors-primary-fill), 1);
+        color    : rgba(var(--colors-primary-fill), 1);
 
         span {
-          color: var(--colors-primary-base);;
+          color: var(--colors-primary-base);
+          ;
         }
       }
     }
 
     &.ready {
+
       .retouch,
       input {
         transition: all .1s linear;
@@ -219,22 +229,22 @@
     }
   }
 
-  
+
   .textarea {
-    width: 100%;
-    height: 100%;
+    width     : 100%;
+    height    : 100%;
     min-height: 50px;
 
-    > .replace {
-      border-radius: 4px;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+    >.replace {
+      border-radius : 4px;
+      left          : 0;
+      top           : 0;
+      right         : 0;
+      bottom        : 0;
       pointer-events: none;
-      background: var(--colors-normal-back);
-      border: 1px solid var(--base-border-color);
-      transition: border .3s ease;
+      background    : var(--colors-normal-back);
+      border        : 1px solid var(--base-border-color);
+      transition    : border .3s ease;
     }
 
     .input-div {
@@ -245,17 +255,18 @@
         color: var(--color-main-normal);
       }
     }
+
     .input-div,
     textarea {
-      height: 100%;
-      width: 100%;
+      height : 100%;
+      width  : 100%;
       padding: 10px;
-      
-      &:focus + .replace {
+
+      &:focus+.replace {
         border-color: var(--colors-primary-base);
       }
 
-      &::placeholder { 
+      &::placeholder {
         color: var(--colors-color);
       }
     }
@@ -272,30 +283,31 @@
       .input-div,
       textarea {
         margin-bottom: var(--bar-height);
-        height: calc(100% - var(--bar-height));
+        height       : calc(100% - var(--bar-height));
       }
 
-      > .retouch {
-        position: absolute;
-        right: 0;
-        left: 0;
-        bottom: 0;
+      >.retouch {
+        position        : absolute;
+        right           : 0;
+        left            : 0;
+        bottom          : 0;
         background-color: rgba(var(--colors-primary-fill), 0.1);
-        height: var(--bar-height);
-        display: flex;
-        padding: 0 10px;
-        align-items: center;
-        justify-content: space-between;
+        height          : var(--bar-height);
+        display         : flex;
+        padding         : 0 10px;
+        align-items     : center;
+        justify-content : space-between;
 
       }
 
       .len {
         justify-self: end;
-        font-size: var(--small-size);
-        color: rgba(var(--colors-primary-fill), 1);
+        font-size   : var(--small-size);
+        color       : rgba(var(--colors-primary-fill), 1);
 
         span {
-          color: var(--colors-primary-base);;
+          color: var(--colors-primary-base);
+          ;
         }
       }
     }
@@ -304,25 +316,28 @@
 
   .number {
     input {
-      -moz-appearance:textfield;
+      -moz-appearance: textfield;
     }
+
     input::-webkit-inner-spin-button,
     input::-webkit-outer-spin-button {
       -webkit-appearance: none;
-      margin: 0;
+      margin            : 0;
     }
 
     .ctrls {
       position: absolute;
-      inset: 2px 0;
-      width: 8px;
+      inset   : 2px 0;
+      width   : 8px;
+
       .icon {
         position: absolute;
-        right: 0;
+        right   : 0;
 
         &.up {
           bottom: 0;
         }
+
         &.down {
           top: 0;
         }
@@ -340,75 +355,78 @@
     input {
       cursor: pointer;
     }
-    
+
     &.focus {
       input {
         border-color: var(--colors-primary-base);
       }
+
       .retouch {
         transform: translateY(-50%) rotateZ(180deg);
       }
     }
-    
+
   }
 
 
   .range {
-    width: 100%;
-    display: flex;
-    --height: 6px;
+    width      : 100%;
+    display    : flex;
+    --height   : 6px;
     --slideSize: calc(var(--height) + 8px);
 
     .range-content {
-      flex: 1;
+      flex            : 1;
       background-color: var(--colors-normal-back);
-      position: relative;
-      cursor: pointer;
+      position        : relative;
+      cursor          : pointer;
     }
 
     .range-content::before,
     .range-content {
-      height: var(--height);
+      height       : var(--height);
       border-radius: calc(var(--height) / 2);
     }
 
     .range-content::before,
-    .range-content .range-slide{
-      content: '';
+    .range-content .range-slide {
+      content : '';
       position: absolute;
     }
 
     .range-content::before {
-      pointer-events: none;
-      left: 0;
-      top: 0;
-      width: var(--percentage);
-      background-color: var(--colors-primary-base);;
+      pointer-events  : none;
+      left            : 0;
+      top             : 0;
+      width           : var(--percentage);
+      background-color: var(--colors-primary-base);
+      ;
     }
 
     .range-locus {
-      width: calc(100% - var(--slideSize));
-      height: var(--height);
+      width   : calc(100% - var(--slideSize));
+      height  : var(--height);
       position: relative;
 
       .range-slide {
-        cursor: pointer;
-        height: var(--slideSize);
-        width: var(--slideSize);
-        top: 50%;
-        left: var(--percentage);
-        transform: translateY(-50%);
+        cursor          : pointer;
+        height          : var(--slideSize);
+        width           : var(--slideSize);
+        top             : 50%;
+        left            : var(--percentage);
+        transform       : translateY(-50%);
         background-color: var(--colors-content-color);
-        border-radius: 50%;
+        border-radius   : 50%;
       }
     }
 
     .range-text {
       margin-left: 20px;
-      width: 60px;
+      width      : 60px;
     }
 
     .animation {
+
       &.range-content::before,
       .range-slide {
         transition: all .1s linear;
@@ -419,36 +437,37 @@
 
   .switch {
     --height: 24px;
-    width: 50px;
-    height: var(--height);
+    width   : 50px;
+    height  : var(--height);
 
     .replace {
-      background-color: rgba(255, 255, 255, 0.3);;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: calc(var(--height) / 2);
+      background-color: rgba(255, 255, 255, 0.3);
+      ;
+      left          : 0;
+      top           : 0;
+      right         : 0;
+      bottom        : 0;
+      border-radius : calc(var(--height) / 2);
       pointer-events: none;
-      position: relative;
-      transition: background-color .3s ease;
+      position      : relative;
+      transition    : background-color .3s ease;
 
       &::after {
-        content: '';
-        --padding: 3px;
-        --size: calc(var(--height) - var(--padding) * 2);
-        position: absolute;
-        width: var(--size);
-        height: var(--size);
-        top: var(--padding);
-        background: var(--colors-content-color);
+        content      : '';
+        --padding    : 3px;
+        --size       : calc(var(--height) - var(--padding) * 2);
+        position     : absolute;
+        width        : var(--size);
+        height       : var(--size);
+        top          : var(--padding);
+        background   : var(--colors-content-color);
         border-radius: 50%;
-        left: var(--padding);
-        transition: left .3s ease;
+        left         : var(--padding);
+        transition   : left .3s ease;
       }
     }
 
-    input:checked + .replace {
+    input:checked+.replace {
       background-color: var(--colors-primary-base);
 
       &::after {
@@ -459,96 +478,102 @@
 
 
   .file {
-    width: 100%;
+    width : 100%;
     height: 100%;
 
     input {
-      cursor: pointer;
+      cursor : pointer;
       opacity: 0;
     }
+
     .use-replace {
       position: absolute;
     }
+
     .use-replace,
     .replace {
-      left: 0;
-      right: 0;
-      display: flex;
-      align-items: center;
+      left           : 0;
+      right          : 0;
+      display        : flex;
+      align-items    : center;
       justify-content: center;
-      pointer-events: none;
+      pointer-events : none;
     }
 
     &:not(.valuable) {
       .replace {
-        top: 0;
-        bottom: 0;
-        background: rgba(var(--colors-primary-fill), 0.1);
+        top          : 0;
+        bottom       : 0;
+        background   : rgba(var(--colors-primary-fill), 0.1);
         border-radius: 4px;
-        border: 1px solid rgba(var(--colors-primary-fill), 0.2);
+        border       : 1px solid rgba(var(--colors-primary-fill), 0.2);
         // position: relative;
 
-        
+
         .placeholder {
           text-align: center;
-          max-width: 80%;
-          
-          p:not(:last-child){
+          max-width : 80%;
+
+          p:not(:last-child) {
             margin-bottom: 10px;
           }
 
           .bottom {
-            font-size: 12px;
-            color: rgba(255,255,255,.3);
-            width: 90%;
-            position: absolute;
-            bottom: 10px;
-            left: 50%;
-            transform: translateX(-50%);
+            font-size : 12px;
+            color     : rgba(255, 255, 255, .3);
+            width     : 90%;
+            position  : absolute;
+            bottom    : 10px;
+            left      : 50%;
+            transform : translateX(-50%);
             text-align: left;
           }
         }
       }
 
       input {
-        width: 100%;
+        width : 100%;
         height: 100%;
-  
-        &:focus + .replace {
+
+        &:focus+.replace {
           border-color: var(--colors-primary-base);
         }
       }
     }
+
     &.valuable {
-      background: rgba(var(--colors-primary-fill), 0.1);
+      background   : rgba(var(--colors-primary-fill), 0.1);
       border-radius: 4px;
-      border: 1px solid rgba(var(--colors-primary-fill), 0.2);
+      border       : 1px solid rgba(var(--colors-primary-fill), 0.2);
 
       input,
       .replace {
-        position: absolute;
-        bottom: 0;
-        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0,0,0,0.5) 100%);
-        height: 32px;
+        position   : absolute;
+        bottom     : 0;
+        background : linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%);
+        height     : 32px;
         line-height: 32px;
 
         .tj {
-          right: 10px;
-          top: 0;
-          bottom: 0;
-          display: flex;
+          right      : 10px;
+          top        : 0;
+          bottom     : 0;
+          display    : flex;
           align-items: center;
-          font-size: 10px;
+          font-size  : 10px;
+
           &::after {
             content: '）';
           }
+
           &::before {
-            
+
             content: '（';
           }
 
-          > span {
-            color: var(--colors-primary-base);;
+          >span {
+            color: var(--colors-primary-base);
+            ;
             margin-right: 4px;
           }
         }
@@ -556,20 +581,20 @@
 
       .icons {
         position: absolute;
-        right: 10px;
-        top: 0;
+        right   : 10px;
+        top     : 0;
 
         span {
-          width: 24px;
-          height: 24px;
-          border-radius: 50%;
-          background: rgba(0, 0, 0, 0.3);
-          font-size: 12px;
-          color: rgba(255,255,255,.7);
-          display: flex;
-          align-items: center;
+          width          : 24px;
+          height         : 24px;
+          border-radius  : 50%;
+          background     : rgba(0, 0, 0, 0.3);
+          font-size      : 12px;
+          color          : rgba(255, 255, 255, .7);
+          display        : flex;
+          align-items    : center;
           justify-content: center;
-          margin-top: 10px
+          margin-top     : 10px
         }
 
       }
@@ -577,20 +602,20 @@
   }
 
 
-  .search{
+  .search {
 
-    .retouch{
+    .retouch {
       transform: translateY(-50%) !important;
 
       .clear {
         // background-color: rgba(255,255,255,.3);
-        font-size: 16px;
-        display: flex;
-        align-items: center;
+        font-size      : 16px;
+        display        : flex;
+        align-items    : center;
         justify-content: center;
-        color: rgba(255,255,255,.7);
-        border-radius: 50%;
-        cursor: pointer;
+        color          : rgba(255, 255, 255, .7);
+        border-radius  : 50%;
+        cursor         : pointer;
       }
     }
   }
@@ -599,10 +624,11 @@
     &.default {
       input {
         opacity: 1;
-        border: inherit;
+        border : inherit;
         outline: inherit;
       }
     }
+
     .replace {
       pointer-events: none;
     }
@@ -615,10 +641,11 @@
 
 
   &:not(.show) {
-    opacity: 0;
+    opacity       : 0;
     pointer-events: none;
 
   }
+
   &.show {
     opacity: 1;
   }
@@ -629,6 +656,7 @@
     &:not(.show) {
       transform: scale(1, 0);
     }
+
     &.show {
       transform: scale(1, 1);
     }
@@ -648,36 +676,37 @@
 
 }
 
-.select-replace{
+.select-replace {
   --colors-content-color: #fff;
-  
+
   list-style: none;
   max-height: 288px;
   background: #161A1A;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3),
     inset 0 0 1px rgb(255 255 255 / 90%);
   border-radius: 4px;
-  overflow-y: auto;
-  color: var(--colors-content-color);
+  overflow-y   : auto;
+  color        : var(--colors-content-color);
 
   .un-data {
-    padding: 20px 15px;
-    color: rgba(255, 255, 255, 0.3);
+    padding       : 20px 15px;
+    color         : rgba(255, 255, 255, 0.3);
     pointer-events: none;
-    font-size: 14px;
+    font-size     : 14px;
   }
 
   .select-options-atom {
-    padding: 10px 10px;
+    padding  : 16px;
     font-size: 14px;
 
     &.active {
       background: var(--colors-normal-back);
-      color: var(--colors-primary-base);;        
+      color     : var(--colors-primary-base);
+      ;
     }
 
     &:not(.active):hover {
-      cursor: pointer;
+      cursor          : pointer;
       background-color: var(--colors-primary-base);
     }
   }
@@ -685,8 +714,7 @@
 
 .is-hidden {
   position: absolute;
-  left: -10000px;
-  top: -10000px;
-
-}
+  left    : -10000px;
+  top     : -10000px;
 
+}

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=1687679372862') format('woff2'),
-       url('iconfont.woff?t=1687679372862') format('woff'),
-       url('iconfont.ttf?t=1687679372862') format('truetype');
+  src: url('iconfont.woff2?t=1689556787062') format('woff2'),
+       url('iconfont.woff?t=1689556787062') format('woff'),
+       url('iconfont.ttf?t=1689556787062') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-tabulation:before {
+  content: "\e7a8";
+}
+
 .icon-return_l:before {
   content: "\e7a7";
 }

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

@@ -6,6 +6,13 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "36453663",
+      "name": "tabulation",
+      "font_class": "tabulation",
+      "unicode": "e7a8",
+      "unicode_decimal": 59304
+    },
+    {
       "icon_id": "36128160",
       "name": "return_l",
       "font_class": "return_l",

src/components/photos/header.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="photos-header">
-    <div>
+    <div class="left">
       <ui-icon
-          class="back-icon"
-          :type="type || 'return_l'"
-          ctrl
-          style="margin-right: 10px"
-          @click="() => onBack ? onBack() : back()"
+        class="back-icon"
+        :type="type || 'return_l'"
+        ctrl
+        style="margin-right: 10px"
+        @click="() => (onBack ? onBack() : back())"
       />
       <span>{{ title }}</span>
     </div>
-    <span class="center" v-if="count">
-      已选择 {{ count }} 张
+    <span class="center">
+      <template v-if="$slots.center">
+        <slot name="center" :count="count" />
+      </template>
+      <template v-else-if="count"> 已选择 {{ count }} 张 </template>
     </span>
     <div class="right">
       <slot />
@@ -21,9 +24,9 @@
 
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
-import {back} from "@/store/sync";
+import { back } from "@/store/sync";
 
-defineProps<{ count?: number, title: string, onBack?: () => void, type?: string }>()
+defineProps<{ count?: number; title: string; onBack?: () => void; type?: string }>();
 </script>
 
 <style lang="scss" scoped>
@@ -39,24 +42,26 @@ defineProps<{ count?: number, title: string, onBack?: () => void, type?: string
     left: 0;
     right: 0;
     white-space: nowrap;
-    pointer-events: none;
+    // 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);
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 24px 24px 24px 24px;
   align-items: center;
   justify-content: center;
 }
-
-
 </style>

src/views/graphic/childMenus.vue

@@ -9,7 +9,7 @@
         v-for="menu in menus"
         :key="menu.key"
         class="menu"
-        :class="{active: uiType.current === menu.key}"
+        :class="{ active: uiType.current === menu.key }"
         @click="clickHandler(menu)"
       >
         <ui-icon :type="menu.icon" class="icon" />
@@ -22,17 +22,17 @@
 <script setup lang="ts">
 import { MenusRaw, findMainMenuByAttr } from "@/views/graphic/menus";
 import UiIcon from "@/components/base/components/icon/index.vue";
-import { uiType } from '@/hook/useGraphic'
-import {computed} from "vue";
+import { uiType } from "@/hook/useGraphic";
+import { computed } from "vue";
 
 const props = defineProps<{ menus: MenusRaw }>();
-const title = computed(() => findMainMenuByAttr(props.menus)?.text)
+const title = computed(() => findMainMenuByAttr(props.menus)?.text);
 
 const emit = defineEmits<{ (e: "quit") }>();
 const clickHandler = (menu) => {
-  uiType.change(menu.key as any)
-  emit("quit")
-}
+  uiType.change(menu.key as any);
+  emit("quit");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -57,7 +57,8 @@ const clickHandler = (menu) => {
   flex-direction: column;
   cursor: pointer;
   height: 100px;
-  transition: color .3s ease;
+  pointer-events: none;
+  transition: color 0.3s ease;
 
   //&:hover,
   &.active {

src/views/graphic/header.vue

@@ -202,7 +202,7 @@ const saveHandler = async () => {
 
 const createTable = async () => {
   await saveStore();
-  await router.replace({
+  await router.push({
     name: writeRouteName.tabulation,
     params: { id: data.value.id },
   });

src/views/photos/index.vue

@@ -219,13 +219,18 @@ onActivated(() => {
   bottom: var(--boundMargin);
   overflow: hidden;
 
+  background-color: #fff;
+  i {
+    color: var(--editor-menu-back);
+  }
+
   .select {
     position: absolute;
     width: 100px;
     right: 0;
     opacity: 0;
     height: 100%;
-    top: 0;
+    top: -5px;
   }
 }
 

src/views/roads/index.vue

@@ -24,6 +24,21 @@
         >
           新增
         </ui-button>
+        <template v-slot:center="{ count }">
+          <template v-if="count"> 已选择 {{ count }} 张 </template>
+          <div v-else class="filter-type">
+            <span
+              :class="{ active: currentType === TypeEnum.Draw }"
+              @click="() => (currentType = TypeEnum.Draw)"
+              >绘图</span
+            >
+            <span
+              :class="{ active: currentType === TypeEnum.Table }"
+              @click="() => (currentType = TypeEnum.Table)"
+              >制表</span
+            >
+          </div>
+        </template>
       </Header>
     </template>
 
@@ -67,7 +82,7 @@ import FillSlide from "@/components/fill-slide/index.vue";
 import { roadPhotos, RoadPhoto } from "@/store/roadPhotos";
 import ActionMenus from "@/components/group-button/index.vue";
 import { router, writeRouteName } from "@/router";
-import { computed, onDeactivated, ref, watchEffect } from "vue";
+import { computed, onDeactivated, reactive, ref, watchEffect } from "vue";
 import { Mode } from "@/views/graphic/menus";
 import UiButton from "@/components/base/components/button/index.vue";
 import Header from "@/components/photos/header.vue";
@@ -79,11 +94,20 @@ import { api } from "@/store/sync";
 import { photos } from "@/store/photos";
 import { getId } from "@/utils";
 
-const sortPhotos = computed(() => [...roadPhotos.value].reverse());
+const enum TypeEnum {
+  Draw,
+  Table,
+}
+const currentType = ref(TypeEnum.Draw);
+const sortPhotos = computed(() =>
+  roadPhotos.value
+    .filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table))
+    .reverse()
+);
 const active = ref<RoadPhoto>();
 const selectMode = ref(false);
 const selects = ref<RoadPhoto[]>([]);
-const menus = [
+const menus = computed(() => [
   {
     key: "copy",
     icon: "copy",
@@ -98,6 +122,13 @@ const menus = [
     },
   },
   {
+    key: "tabulation",
+    icon: "tabulation",
+    hide: currentType.value === TypeEnum.Table,
+    text: "制表",
+    onClick: () => gotoDraw(active.value, true),
+  },
+  {
     key: "road",
     icon: "edit",
     text: "修改",
@@ -109,7 +140,7 @@ const menus = [
     text: "删除",
     onClick: () => delPhoto(),
   },
-];
+]);
 
 const selectMenus = [
   {
@@ -162,11 +193,18 @@ const delSelects = async () => {
   }
 };
 
-const gotoDraw = (road = active.value) => {
-  router.push({
-    name: writeRouteName.graphic,
-    params: { mode: Mode.Road, id: road.id, action: "update" },
-  });
+const gotoDraw = (road = active.value, forece = false) => {
+  if (forece || road.table) {
+    router.push({
+      name: writeRouteName.tabulation,
+      params: { id: road.id },
+    });
+  } else {
+    router.push({
+      name: writeRouteName.graphic,
+      params: { mode: Mode.Road, id: road.id, action: "update" },
+    });
+  }
 };
 
 onDeactivated(() => {
@@ -212,4 +250,28 @@ onDeactivated(() => {
   transform: translateX(-50%);
   bottom: var(--boundMargin);
 }
+
+.filter-type {
+  span {
+    display: inline-block;
+    color: #ffffff;
+    font-size: 16px;
+    margin: 0 20px;
+    &.active {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: "";
+        bottom: 0;
+        margin-bottom: -14px;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: #1779ed;
+        border-radius: 2px;
+      }
+    }
+  }
+}
 </style>

src/views/roads/tabulation.vue

@@ -72,6 +72,7 @@
           <tr>
             <td class="image" colspan="6" height="569">
               <div class="photo-layout">
+                <ui-icon type="reset" class="reset" @click="resetHandler" />
                 <img
                   :src="useStaticUrl(roadPhoto.url).value"
                   @blur="history.push"
@@ -136,6 +137,7 @@ import MainPanel from "@/components/main-panel/index.vue";
 import { downloadImage, uploadImage } from "@/store/sync";
 import { Mode } from "@/views/graphic/menus";
 import Message from "@/components/base/components/message/message.vue";
+import matruces from "@/utils/matruces";
 
 const roadPhoto = computed<RoadPhoto>(() => {
   let route, params, data;
@@ -175,6 +177,13 @@ const { cssMatrix: photoCSSMatrix, matrix: photoMatrix } = useHand(
   },
   history.value.value.imageTransform
 );
+
+const resetHandler = () => {
+  photoMatrix.value = matruces.translateMatrix(0, 0, 0);
+  history.value.push();
+  console.log("?????");
+};
+
 onDeactivated(() => (photoLoaded.value = false));
 const proportion = ref(1);
 const photoLoaded = ref(false);
@@ -194,10 +203,11 @@ watchEffect(() => {
 });
 
 const onBack = () => {
-  router.replace({
-    name: writeRouteName.graphic,
-    params: { mode: Mode.Road, id: roadPhoto.value.id, action: "update" },
-  });
+  router.back();
+  // router.replace({
+  //   name: writeRouteName.graphic,
+  //   params: { mode: Mode.Road, id: roadPhoto.value.id, action: "update" },
+  // });
 };
 
 const downMode = ref(false);
@@ -351,6 +361,25 @@ const saveHandler = async () => {
     text-align: right;
     padding-right: 44px;
   }
+
+  .reset {
+    position: absolute;
+    left: 24px;
+    top: 24px;
+    z-index: 99;
+    width: 32px;
+    height: 32px;
+    background: #ffffff;
+    color: #000;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
+    border-radius: 55px 55px 55px 55px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    color: #000;
+  }
 }
 
 .downMode {