查漏补缺

server/test/SS-t-P1d6CwREny2/webcloud/sources.json

@@ -1 +1,33 @@
-{"bounds":{"min":[-28.193546295166017,-25.514963150024415,-1.328073501586914],"max":[35.724212646484378,38.40279579162598,62.58968544006348]},"projection":"","sources":[{"name":"info.json","points":1177633,"bounds":{"min":[-28.193546295166017,-25.514963150024415,-1.328073501586914],"max":[35.724212646484378,38.40279579162598,62.58968544006348]}}]}
+{
+  "bounds": {
+    "min": [
+      -28.193546295166017,
+      -25.514963150024415,
+      -1.328073501586914
+    ],
+    "max": [
+      35.724212646484378,
+      38.40279579162598,
+      62.58968544006348
+    ]
+  },
+  "projection": "",
+  "sources": [
+    {
+      "name": "info.json",
+      "points": 1177633,
+      "bounds": {
+        "min": [
+          -28.193546295166017,
+          -25.514963150024415,
+          -1.328073501586914
+        ],
+        "max": [
+          35.724212646484378,
+          38.40279579162598,
+          62.58968544006348
+        ]
+      }
+    }
+  ]
+}

src/components/group-button/index.vue

@@ -5,7 +5,7 @@
       :key="menu.key"
       class="menu"
       :style="menuStyle"
-      :class="{ active: activeKey === menu.key, dire }"
+      :class="{ active: activeKey === menu.key, dire, disabled: menu.disabled }"
       @click="menu.onClick && menu.onClick(menu)"
     >
       <template v-if="$slots.default">
@@ -26,6 +26,7 @@ type Menu =  {
   key: any,
   text?: string,
   icon?: string,
+  disabled?: boolean
   onClick?: (menu: Menu) => void
 }
 

src/router/constant.ts

@@ -12,7 +12,8 @@ export const readyRouteName = {
   photos: "photos",
   accidents: "accidents",
   roads: "roads",
-  tabulation: "tabulation"
+  tabulation: "tabulation",
+  gena4: "gena4"
 } as const;
 
 export const writeRouteName = {
@@ -47,7 +48,8 @@ export const readyRouteMeta: RouteMetaRaw = {
   [readyRouteName.photos]: {title: "相册"},
   [readyRouteName.accidents]: {title: "事故照片"},
   [readyRouteName.roads]: {title: "道路照片"},
-  [readyRouteName.tabulation]: {title: "制表"}
+  [readyRouteName.tabulation]: {title: "制表"},
+  [readyRouteName.gena4]: {title: "生成A4"}
 };
 
 export const writeRouteMeta: RouteMetaRaw<typeof modeFlags.LOGIN> = {

src/router/info.ts

@@ -50,6 +50,12 @@ export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
     component: () => import("@/views/accidents/index.vue"),
   },
   {
+    path: "/gena4/:id1/:id2",
+    name: readyRouteName.gena4,
+    meta: readyRouteMeta.gena4,
+    component: () => import("@/views/accidents/index.vue"),
+  },
+  {
     path: "/roads",
     name: readyRouteName.roads,
     meta: readyRouteMeta.roads,

src/views/accidents/index.vue

@@ -38,9 +38,7 @@
       </div>
     </div>
 
-    <ButtonPane class="del fun-ctrl" @click="delSelects" v-if="selects.length">
-      <ui-icon type="close" class="icon" />
-    </ButtonPane>
+    <ActionMenus class="select-menus" :menus="selectMenus" dire="row" v-if="selects.length" />
   </MainPanel>
 
   <FillSlide :data="sortPhotos" v-model:active="active" @quit="active = null" v-if="active">
@@ -57,7 +55,7 @@ import ActionMenus from "@/components/group-button/index.vue";
 import {types, accidentPhotos, AccidentPhoto} from '@/store/accidentPhotos'
 import UiIcon from "@/components/base/components/icon/index.vue";
 import {router, writeRouteName} from '@/router'
-import {computed, ref, watchEffect} from "vue";
+import {computed, reactive, ref, watchEffect} from "vue";
 import {Mode} from '@/views/graphic/menus'
 import UiButton from "@/components/base/components/button/index.vue";
 import Photos from "@/components/photos/index.vue";
@@ -94,6 +92,27 @@ const menus = [
   }
 ]
 
+const selectMenus = reactive([
+  {
+    key: "gen",
+    text: "生成A4",
+    disabled: computed(() => selects.value.length > 2),
+    onClick: () => {
+      const params = {
+        id1: selects.value[0].id,
+        id2: selects.value.length === 1 ? '-1' : selects.value[1].id
+      }
+      router.push({ name: writeRouteName.gena4, params})
+    }
+  },
+  {
+    key: "del",
+    text: "删除",
+    onClick: () => delSelects()
+  },
+])
+
+
 watchEffect(() => {
   if (!selectMode.value) {
     selects.value = []
@@ -172,4 +191,11 @@ const gotoDraw = () => {
   padding: 0 24px 2px;
   font-size: 16px;
 }
+
+
+.select-menus {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--boundMargin);
+}
 </style>

src/views/accidents/print.vue

@@ -0,0 +1,58 @@
+<template>
+  <MainPanel>
+    <template v-slot:header>
+      <Header  title="生成A4">
+        <ui-button
+            type="primary"
+            @click="saveHandler"
+            width="96px"
+        >
+          保存
+        </ui-button>
+      </Header>
+    </template>
+
+    <div class="content" ref="layoutRef">
+      <div v-for="accidentPhoto in accidentPhotos" :key="accidentPhoto.id">
+        <h4>{{accidentPhoto.title}}</h4>
+        <img :src="getStaticFile(accidentPhoto.url)">
+      </div>
+    </div>
+  </MainPanel>
+</template>
+<script setup lang="ts">
+import UiButton from "@/components/base/components/button/index.vue";
+import Header from "@/components/photos/header.vue";
+import MainPanel from "@/components/main-panel/index.vue";
+import {computed, ref} from "vue";
+import html2canvas from "html2canvas";
+import {router, writeRouteName} from "@/router";
+import {AccidentPhoto, accidentPhotos} from "@/store/accidentPhotos";
+import {getStaticFile} from "@/dbo/main";
+
+const back = () => {
+  router.replace({name: writeRouteName.accidents})
+}
+
+const accidentPhotos = computed<AccidentPhoto[]>(() => {
+  let route, params
+  if (((route = router.currentRoute.value).name === writeRouteName.gena4)
+    && (params = route.params)
+    && params.id1 
+    && params.id2) {
+    return accidentPhotos.value.filter(data => [params.id1, params.id2].includes(data.id))
+  }
+})
+
+const layoutRef = ref<HTMLDivElement>()
+const saveHandler = async () => {
+  const canvas = await html2canvas(layoutRef.value)
+  const blob = await new Promise<Blob>(
+    resolve => canvas.toBlob(resolve, "image/jpeg", 0.95)
+  )
+  back()
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/photos/index.vue

@@ -17,9 +17,8 @@
     <ButtonPane class="back fun-ctrl" @click="router.push(writeRouteName.scene)" v-if="!selectMode">
       <ui-icon type="close" class="icon" />
     </ButtonPane>
-    <ButtonPane class="del fun-ctrl" @click="delSelects" v-if="selects.length">
-      <ui-icon type="close" class="icon" />
-    </ButtonPane>
+
+    <ActionMenus class="select-menus" :menus="selectMenus" dire="row" v-if="selects.length" />
   </MainPanel>
 
   <FillSlide :data="sortPhotos" v-model:active="active" @quit="active = null" v-if="active">
@@ -65,6 +64,14 @@ const menus = [
   }
 ]
 
+const selectMenus = [
+  {
+    key: "del",
+    text: "删除",
+    onClick: () => delSelects()
+  },
+]
+
 watchEffect(() => {
   if (!selectMode.value) {
     selects.value = []
@@ -104,15 +111,14 @@ const gotoDraw = (mode: Mode) => {
     transform: translateX(-50%);
   }
 }
-
-.back {
-  right: var(--boundMargin);
+.select-menus {
+  left: 50%;
+  transform: translateX(-50%);
   bottom: var(--boundMargin);
 }
 
-.del {
-  left: 50%;
-  transform: translateX(-50%);
+.back {
+  right: var(--boundMargin);
   bottom: var(--boundMargin);
 }
 

src/views/roads/index.vue

@@ -33,9 +33,8 @@
       </template>
     </Photos>
 
-    <ButtonPane class="del fun-ctrl" @click="delSelects" v-if="selects.length">
-      <ui-icon type="close" class="icon" />
-    </ButtonPane>
+
+    <ActionMenus class="select-menus" :menus="selectMenus" dire="row" v-if="selects.length" />
   </MainPanel>
 
   <FillSlide
@@ -83,6 +82,14 @@ const menus = [
   }
 ]
 
+const selectMenus = [
+  {
+    key: "del",
+    text: "删除",
+    onClick: () => delSelects()
+  },
+]
+
 watchEffect(() => {
   if (!selectMode.value) {
     selects.value = []
@@ -139,4 +146,11 @@ const gotoDraw = () => {
   bottom: var(--boundMargin);
 }
 
+
+.select-menus {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--boundMargin);
+}
+
 </style>

src/views/roads/tabulation.vue

@@ -178,22 +178,6 @@ const { cssMatrix: photoCSSMatrix, matrix: photoMatrix } = useHand(
 
 
 const downMode = ref(false)
-const layoutRef = ref<HTMLDivElement>()
-const getLayoutImage = async () => {
-  downMode.value = true
-  await nextTick()
-  const canvas = await html2canvas(layoutRef.value)
-  downMode.value = false
-  const blob = await new Promise<Blob>(resolve => canvas.toBlob(resolve, "image/jpeg", 0.95))
-  return await uploadImage(blob)
-}
-const saveHandler = async () => {
-  roadPhoto.value.table = {
-    ...history.value.value,
-    url: await getLayoutImage()
-  }
-  router.replace({name: writeRouteName.roads})
-}
 
 </script>