添加事故照片制作页面

src/graphic/enum/UIEvents.js

@@ -5,6 +5,8 @@ const UIEvents = {
   Circle: "Circle",
   // 图例
   Img: "backgroundImage",
+  // 箭头
+  Arrow: "arrow",
   // 测量
   MeasureLine: "measure",
   // 文字

src/router/index.ts

@@ -93,7 +93,7 @@ export const setupRouter = (routesRef: RoutesRef) => {
       defRouteName = _defRouteName
 
       if (!exists(routes.value, router.currentRoute.value)) {
-        router.replace({ name: defRouteName })
+        // router.replace({ name: defRouteName })
       }
     },
     { flush: 'post', immediate: true }
@@ -107,7 +107,7 @@ export const setupRouter = (routesRef: RoutesRef) => {
     if (!exists(routes.value, router.currentRoute.value)) {
       unSetName = router.currentRoute.value.fullPath
       enter++
-      router.replace({ name: defRouteName })
+      // router.replace({ name: defRouteName })
     } else {
       enter--
     }

src/router/info.ts

@@ -70,7 +70,7 @@ export const writeChildren: RoutesRaw<typeof modeFlags.LOGIN> = [
 export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
   { ...baseAppRoute, children: writeChildren },
   {
-    path: "/graphic",
+    path: "/graphic/:mode",
     name: readyRouteName.graphic,
     meta: readyRouteMeta.graphic,
     component: () => import("@/views/graphic/index.vue"),

src/views/graphic/header.vue

@@ -2,7 +2,7 @@
   <div class="graphic-header">
     <div class="title">
       <ui-icon type="close" />
-      <p>现场绘图</p>
+      <p>{{ mode === Mode.Road ? '现场绘图' : '事故照片' }}</p>
     </div>
 
     <div class="actions">
@@ -12,7 +12,7 @@
       </div>
     </div>
 
-    <div class="table">
+    <div class="table" v-if="mode === Mode.Road">
       <ui-button width="100px" type="primary">制表</ui-button>
     </div>
   </div>
@@ -20,7 +20,12 @@
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiButton from "@/components/base/components/button/index.vue";
-import { headActionMenuRaw, generateByMenus } from './menus'
+import {generateByMenus, headActionMenuRaw, Mode} from './menus'
+import {computed} from "vue";
+import {router} from '@/router'
+
+
+const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode)
 
 const menus = generateByMenus(
   menu => ({...menu}),

src/views/graphic/index.vue

@@ -1,10 +1,14 @@
 <template>
-  <MainPanel :menus="menus as any" :active-menu-key="activeMenuKey">
+  <MainPanel :menus="store.menus as any" :active-menu-key="store.activeMenuKey.value">
     <template v-slot:header>
       <Header />
     </template>
     <Container />
-    <ChildMenus v-if="extendMenus" :menus="extendMenus" @quit="extendMenus = null" />
+    <ChildMenus
+        v-if="store.child.value"
+        :menus="store.child.value as any"
+        @quit="store.child.value = null"
+    />
 
     <GraphicAction class="full-action">
       <ui-icon
@@ -25,17 +29,18 @@ import Container from './container.vue'
 import GraphicAction from '@/components/button-pane/index.vue'
 import UiIcon from "@/components/base/components/icon/index.vue";
 import VectorMenus from './vectorMenus.vue'
+import {router} from '@/router'
 
-import {computed, watch, watchEffect} from "vue";
-import { customMap } from '@/hook'
-import { generateMixMenus, UITypeExtend, focusMenuRaw } from './menus'
-import { currentVector } from "@/hook/useGraphic";
+import {computed} from "vue";
+import {customMap} from '@/hook'
+import {focusMenuRaw, generateMixMenus, mainMenusRaw, photoMenusRaw, Mode, UITypeExtend} from './menus'
+import {currentVector} from "@/hook/useGraphic";
 
-const {
-  child: extendMenus,
-  menus,
-  activeMenuKey
-} = generateMixMenus(
+const menusRaws = computed(() => {
+  const mode = Number(router.currentRoute.value.params.mode) as Mode
+  return mode === Mode.Photo ? photoMenusRaw : mainMenusRaw
+})
+const store = computed(() => generateMixMenus(
   "extend",
   (mainMenuRaw) => ({
     title: mainMenuRaw.text,
@@ -44,10 +49,11 @@ const {
     icon: 'menu',
     bottom:  mainMenuRaw.key === UITypeExtend.photo
   }),
-)
+  menusRaws.value
+))
+
 
 const focusMenus = computed(() => {
-  console.warn(focusMenuRaw[currentVector.value?.type])
   return focusMenuRaw[currentVector.value?.type]
 })
 const isFull = computed(() => customMap.sysView === 'full' )

src/views/graphic/menus.ts

@@ -5,6 +5,11 @@ import {
   generateMixMenus as generateMixMenusRaw
 } from '@/utils/menus'
 
+export enum Mode {
+  Road,
+  Photo
+}
+
 export const UITypeExtend = {
   structure: "structure",
   template: "template",
@@ -86,12 +91,20 @@ export const mainMenusRaw: MenusRaw = [
   },
   { key: UIType.Img, text: "图例" },
   { key: UIType.MeasureLine, text: "测量" },
-  { key: UIType.Tag, text: "文字" },
+  { key: UIType.Text, text: "文字" },
   { key: UIType.magnifier, text: "放大镜" },
   { key: UITypeExtend.photo, text: "照片库" },
   { key: UITypeExtend.setup, text: "设置" },
 ];
 
+export const photoMenusRaw: MenusRaw = [
+  { key: UIType.Text, text: "文字" },
+  { key: UIType.Circle, text: "圈出" },
+  { key: UIType.Arrow, text: "箭头" },
+  { key: UIType.magnifier, text: "放大镜" },
+]
+
+
 export const headActionMenuRaw = [
   { key: UIType.GoBack, text: "回退" },
   { key: UIType.GoAhead, text: "前进" },