查漏补缺

src/components/fill-slide/index.vue

@@ -14,7 +14,7 @@
           <template v-if="$slots.default">
             <slot :data="raw" />
           </template>
-          <img :src="getStaticFile(raw.url)" class="image" v-else />
+          <img :src="getStaticFile(getURL ? getURL(raw) : raw.url)" class="image" v-else />
         </template>
       </ui-slide>
     </div>
@@ -27,12 +27,11 @@
 <script lang="ts" setup>
 import UiSlide from "@/components/base/components/slide/index.vue";
 import {getStaticFile} from "@/dbo/main";
-import {photos} from "@/store/photos";
 import UiIcon from "@/components/base/components/icon/index.vue";
 
 type Item = {url: string}
 
-defineProps<{ data: Item[], active: Item }>()
+defineProps<{ data: Item[], active: Item, getURL?: (data: any) => string }>()
 defineEmits<{
   (e: 'update:active', d: Item): void,
   (e: 'quit'): void

src/components/photos/index.vue

@@ -8,7 +8,7 @@
           @click="selectMode ? changeSelects(photo, !selects.includes(photo)) : $emit('update:active', photo)"
       >
         <div class="img-layout">
-          <img :src="getStaticFile(photo.url)" />
+          <img :src="getStaticFile(getURL ? getURL(photo) : photo.url)" />
           <ui-input
               width="24px"
               height="24px"
@@ -33,6 +33,7 @@ type Item = { url: string, id: string }
 
 const props = defineProps<{
   data: Item[],
+  getURL?: (data: any) => string
   active?: Item,
   selects?: Item[],
   selectMode?: boolean

src/graphic/Controls/UIControl.js

@@ -119,28 +119,39 @@ export default class UIControl {
     }
   }
 
+
   //截图
-  screenShot() {
+  async screenShot() {
     let canvas = this.layer.canvas;
     //隐藏grid
     dataService.setGridDisplay(false);
     this.layer.renderer.autoRedraw();
-    this.downloadCadImg(canvas, "test.jpg");
+    // this.downloadCadImg(canvas, "test.jpg");
+    const blob = await this.getCadBlob(canvas)
     //显示grid
     dataService.setGridDisplay(true);
     this.layer.renderer.autoRedraw();
+
+    return blob
+  }
+
+  getCadBlob(canvas) {
+    var type = "jpg";
+    return new Promise(resolve => canvas.toBlob(resolve, `${type}/image`))
   }
 
   downloadCadImg(canvas, filename) {
     // 图片导出为 jpg 格式
     var type = "jpg";
     var imgData = canvas.toDataURL(type, 3);
+    canvas.toBlob(`${type}/image`)
 
     // 加工image data，替换mime type
     imgData = imgData.replace(this._fixType(type), "image/octet-stream");
     // 下载后的图片名
     //var filename = 'cad_' + new Date().getTime() + '.' + type
     // download
+    debugger
     this.saveFile(imgData, filename);
   }
 

src/graphic/enum/UIEvents.js

@@ -7,8 +7,20 @@ const UIEvents = {
   Img: "backgroundImage",
   // 箭头
   Arrow: "ArrowLine",
+
   // 测量
+  // 测量线
   MeasureLine: "MeasureLine",
+  // 测量点
+  MeasurePoint: "MeasurePoint",
+  // 自由测量
+  MeasureFree: "MeasureFree",
+  // 直角定位法
+  MeasureCartesianMethod: "MeasureCartesianMethod",
+  // 综合定位法
+  MeasureComprehensiveMethod: "MeasureComprehensiveMethod",
+
+
   // 文字
   Text: "text", //这个是标注，暂时这样
   //svg

src/hook/useHand.ts

@@ -45,7 +45,6 @@ export const useHand = (
     return {x, y}
   }
   const getPointByEvent = (ev: TouchEvent | MouseEvent): PointStore => {
-
     if (ev instanceof TouchEvent) {
       const point1 = {
         x: ev.touches[0].pageX,

src/store/sync.ts

@@ -21,12 +21,12 @@ axios.get("/attach/sceneStore")
       roadPhotos.value = data.data.roadPhotos || []
     }
 
-    roadPhotos.value.map(data => {
-      data.url = data.photoUrl
-    })
-    accidentPhotos.value.map(data => {
-      data.url = data.photoUrl
-    })
+    // roadPhotos.value.map(data => {
+    //   data.url = data.photoUrl
+    // })
+    // accidentPhotos.value.map(data => {
+    //   data.url = data.photoUrl
+    // })
 
     syncSceneStore()
   })

src/views/graphic/header.vue

@@ -27,7 +27,10 @@
           v-if="options"
       />
       <ui-button width="100px" type="primary" class="save" @click="saveHandler">
-        {{ isRoad ? '制表' : '保存' }}
+        保存
+      </ui-button>
+      <ui-button width="100px" type="primary" class="save" @click="createTable" v-if="isRoad">
+        制表
       </ui-button>
     </div>
   </div>
@@ -36,13 +39,14 @@
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiButton from "@/components/base/components/button/index.vue";
 import {Mode} from './menus'
-import {drawRef, graphicState, changeStore} from '@/hook/useGraphic'
-import {computed, watchEffect} from "vue";
+import {changeStore, drawRef, graphicState} from '@/hook/useGraphic'
+import {computed} from "vue";
 import {router, writeRouteName} from '@/router'
-import {types, AccidentPhoto, accidentPhotos} from '@/store/accidentPhotos'
+import {AccidentPhoto, accidentPhotos, types} from '@/store/accidentPhotos'
 import {useData} from './data'
 import UiInput from "@/components/base/components/input/index.vue";
 import {roadPhotos} from "@/store/roadPhotos";
+import {uploadImage} from '@/store/sync'
 
 const data = useData()
 const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode)
@@ -93,12 +97,13 @@ const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>
   return menus
 })
 
-const saveHandler = () => {
+const saveStore = async () => {
   const newData = {
     ...data.value,
     data: JSON.parse(JSON.stringify(drawRef.value.load.save()))
   }
-  console.log("screenShot", drawRef.value.uiControl.screenShot())
+  const blob = await drawRef.value.uiControl.screenShot()
+  newData.url = await uploadImage(blob)
   const origin = isRoad.value ? roadPhotos.value : accidentPhotos.value
   const index = origin.indexOf(data.value)
   if (~index) {
@@ -106,7 +111,17 @@ const saveHandler = () => {
   } else {
     origin.push(newData)
   }
-  router.replace({name: isRoad.value ? writeRouteName.roads : writeRouteName.accidents})
+}
+
+const saveHandler = async () => {
+  await saveStore()
+  await router.replace({name: isRoad.value ? writeRouteName.roads : writeRouteName.accidents})
+}
+
+const createTable = async () => {
+  console.log("createTable")
+  await saveStore()
+  await router.replace({name: writeRouteName.tabulation, params: {id: data.value.id} })
 }
 
 

src/views/graphic/index.vue

@@ -49,7 +49,7 @@ const store = computed(() => generateMixMenus(
     name: mainMenuRaw.key,
     isRoute: false,
     icon: 'menu',
-    bottom:  mainMenuRaw.key === UITypeExtend.photo
+    bottom:  mainMenuRaw.key === UITypeExtend.setup
   }),
   menusRaws.value
 ))

src/views/graphic/menus.ts

@@ -13,6 +13,7 @@ export enum Mode {
 export const UITypeExtend = {
   structure: "structure",
   template: "template",
+  measure: "measure",
   road: "__road",
   photo: "photo",
   setup: "setup",
@@ -71,15 +72,28 @@ export const templateMenusRaw = [
   { key: UIType.HighwaySection, text: "高速路段" }
 ]
 
+export const measureMenusRaw = [
+  { key: UIType.MeasureLine, text: "基准线" },
+  { key: UIType.MeasurePoint, text: "基准点" },
+  { key: UIType.MeasureFree, text: "自由测量" },
+  { key: UIType.MeasureCartesianMethod, text: "直角定位法" },
+  { key: UIType.MeasureComprehensiveMethod, text: "综合定位法" },
+]
+
 export const mainMenusRaw: MenusRaw = [
   { key: UIType.Line, text: "画线" },
 
   // { key: UIType.Img, text: "图例" },
-  { key: UIType.MeasureLine, text: "测量" },
+  {
+    key: UITypeExtend.measure,
+    text: "测量",
+    children: measureMenusRaw
+  },
+  // { key: UIType.MeasureLine, text: "测量" },
   { key: UIType.Text, text: "文字" },
   { key: UIType.Magnifier, text: "放大镜" },
-  { key: UITypeExtend.photo, text: "照片库" },
-  { key: UITypeExtend.setup, text: "设置" },
+  // { key: UITypeExtend.photo, text: "照片库" },
+  // { key: UITypeExtend.setup, text: "设置" },
 ];
 
 if (import.meta.env.DEV) {

src/views/roads/index.vue

@@ -26,6 +26,7 @@
         v-model:selects="selects"
         :select-mode="selectMode"
         :data="sortPhotos"
+        :getURL="data => data?.table?.url || data.url"
     >
       <template v-slot="{data}">
         <p>{{ data.title || '默认标题' }}</p>
@@ -37,7 +38,13 @@
     </ButtonPane>
   </MainPanel>
 
-  <FillSlide :data="sortPhotos" v-model:active="active" @quit="active = null" v-if="active">
+  <FillSlide
+      :getURL="data => data?.table?.url || data.url"
+      :data="sortPhotos"
+      v-model:active="active"
+      @quit="active = null"
+      v-if="active"
+  >
     <template v-slot:foot>
       <ActionMenus class="menus" :menus="menus" dire="row" />
     </template>

src/views/roads/tabulation.vue

@@ -79,7 +79,7 @@
             <td class="image" colspan="6" height="360">
               <div class="photo-layout">
                 <img
-                    :src="getStaticFile(roadPhoto.photoUrl)"
+                    :src="getStaticFile(roadPhoto.url)"
                     @blur="history.push"
                     class="photo"
                     :style="{transform: photoCSSMatrix}"
@@ -91,8 +91,6 @@
                     :style="{transform: compassCSSMatrix}"
                     ref="compassRef"
                 />
-<!--                :style="{transform: `rotateZ(${history.value.compassAngle}deg)`}"-->
-<!--                @mousedown="downHandler"-->
               </div>
             </td>
           </tr>
@@ -138,6 +136,7 @@ import UiInput from "@/components/base/components/input/index.vue";
 import {HandMode, useHand} from '@/hook/useHand'
 import Header from "@/components/photos/header.vue";
 import MainPanel from "@/components/main-panel/index.vue";
+import {uploadImage} from "@/store/sync";
 
 const roadPhoto = computed<RoadPhoto>(() => {
   let route, params, data
@@ -146,7 +145,7 @@ const roadPhoto = computed<RoadPhoto>(() => {
     && (data = roadPhotos.value.find(data => data.id === params.id))) {
     return data
   } else {
-    router.back();
+    // router.back();
   }
 })
 const history = computed(
@@ -180,17 +179,20 @@ const { cssMatrix: photoCSSMatrix, matrix: photoMatrix } = useHand(
 
 const downMode = ref(false)
 const layoutRef = ref<HTMLDivElement>()
-const downLayoutImage = async () => {
+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))
-  window.open(URL.createObjectURL(blob))
+  return await uploadImage(blob)
 }
-const saveHandler = () => {
-  roadPhoto.value.table = history.value.value
-  downLayoutImage()
+const saveHandler = async () => {
+  roadPhoto.value.table = {
+    ...history.value.value,
+    url: await getLayoutImage()
+  }
+  router.replace({name: writeRouteName.roads})
 }
 
 </script>