修正问题

src/components/photos/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="photos-layout">
-    <div class="photos">
+    <div class="photos" v-if="data.length">
       <div
           v-for="(photo, index) in data"
           :key="photo.id"
@@ -23,16 +23,19 @@
         <slot :data="photo" :index="index" />
       </div>
     </div>
+    <undata v-else :undataMsg="undataMsg" />
   </div>
 </template>
 <script setup lang="ts">
 import { useStaticUrl } from '@/hook/useStaticUrl'
 import UiInput from "@/components/base/components/input/index.vue";
+import Undata from "./undata.vue";
 
 type Item = { url: string, id: string }
 
 const props = defineProps<{
   data: Item[],
+  undataMsg?: string
   getURL?: (data: any) => string
   active?: Item,
   selects?: Item[],

src/components/photos/undata.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="undata">
+    <div>
+      <img src="./undata.png" />
+      <p>{{ undataMsg }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.undata {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  div {
+    flex: none;
+    text-align: center;
+  }
+
+  img {
+    width: 160px;
+  }
+
+  p {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>
+
+<script setup lang="ts">
+defineProps<{undataMsg?: string}>()
+</script>

src/graphic/Controls/UIControl.js

@@ -535,8 +535,6 @@ export default class UIControl {
 
   // 设置默认设置
   setDefaultSetting(setting) {
-    console.log('获得设置', setting);
-
     uiService.setRoadMidDivideWidth(setting.roadQuarantineWidth / coordinate.res * coordinate.ratio);
     uiService.setCurveRoadMidDivideWidth(setting.roadQuarantineWidth / coordinate.res * coordinate.ratio);
     uiService.setSingleLaneWidth(setting.singleRoadWidth / coordinate.res * coordinate.ratio);

src/graphic/Renderer/Draw.js

@@ -232,16 +232,25 @@ const help = {
         if (style === VectorStyle.DoubleDashedLine) {
           ctx.setLineDash([8 * coordinate.ratio, 8 * coordinate.ratio]);
         }
-        ctx.lineWidth = lineWidth * 4
-        ctx.moveTo(line[0].x, line[0].y);
-        ctx.lineTo(line[1].x, line[1].y);
-        ctx.stroke();
+        const pd1 = help.getPerpendicularPoint(
+          line[0], line[1], line[0], 4 * coordinate.ratio,
+        )
+        const pd2 = help.getPerpendicularPoint(
+          line[0], line[1], line[1], 4 * coordinate.ratio,
+        )
+        const pd3 = help.getPerpendicularPoint(
+          line[0], line[1], line[0], -4 * coordinate.ratio,
+        )
+        const pd4 = help.getPerpendicularPoint(
+          line[0], line[1], line[1], -4 * coordinate.ratio,
+        )
 
+        ctx.moveTo(pd1.x, pd1.y);
+        ctx.lineTo(pd2.x, pd2.y);
+        ctx.stroke();
 
-        ctx.moveTo(line[0].x, line[0].y);
-        ctx.lineTo(line[1].x, line[1].y);
-        ctx.lineWidth = lineWidth * 2
-        ctx.strokeStyle = 'rgb(255,255,255)'
+        ctx.moveTo(pd3.x, pd3.y);
+        ctx.lineTo(pd4.x, pd4.y);
         break
       case VectorStyle.BrokenLine:
         const ldis = 5 * coordinate.ratio

src/views/accidents/index.vue

@@ -7,6 +7,7 @@
             @click="selectMode = !selectMode"
             width="96px"
             style="margin-right: 16px"
+            v-if="sortPhotos.length"
         >
           {{ selectMode ? '取消' : '选择' }}
         </ui-button>
@@ -22,21 +23,24 @@
     </template>
 
     <div class="type-photos-layout">
-      <div class="type-photos" v-for="typePhoto in typePhotos" :key="typePhoto.type">
-        <p class="type-title">{{ typePhoto.type }}</p>
-        <Photos
-            class="type-photos-content accident-photos-content"
-            :class="{max: typePhoto.photos.length > 4}"
-            v-model:active="active"
-            v-model:selects="selects"
-            :select-mode="selectMode"
-            :data="typePhoto.photos"
-        >
-          <template v-slot="{data, index}">
-            <p>{{ data.title || typePhoto.type.substring(0, 2) + (index + 1) }}</p>
-          </template>
-        </Photos>
-      </div>
+      <template v-if="sortPhotos.length">
+        <div class="type-photos" v-for="typePhoto in typePhotos" :key="typePhoto.type">
+          <p class="type-title">{{ typePhoto.type }}</p>
+          <Photos
+              class="type-photos-content accident-photos-content"
+              :class="{max: typePhoto.photos.length > 4}"
+              v-model:active="active"
+              v-model:selects="selects"
+              :select-mode="selectMode"
+              :data="typePhoto.photos"
+          >
+            <template v-slot="{data, index}">
+              <p>{{ data.title || typePhoto.type.substring(0, 2) + (index + 1) }}</p>
+            </template>
+          </Photos>
+        </div>
+      </template>
+      <undata undata-msg="无照片。请点击右上角按钮标注照片。" />
     </div>
 
     <ActionMenus class="select-menus" :menus="selectMenus" dire="row" v-if="selects.length" />
@@ -64,6 +68,7 @@ import Header from "@/components/photos/header.vue";
 import ButtonPane from "@/components/button-pane/index.vue";
 import {useConfirm} from "@/hook";
 import {roadPhotos} from "@/store/roadPhotos";
+import Undata from "@/components/photos/undata.vue";
 
 const sortPhotos = computed(() => {
   const photos = [...accidentPhotos.value]

src/views/photos/index.vue

@@ -2,13 +2,14 @@
   <MainPanel>
     <template v-slot:header>
       <Header :count="selects.length" :title="`全部照片（${photos.length}）`">
-        <ui-button type="primary" @click="selectMode = !selectMode" width="96px">
+        <ui-button type="primary" @click="selectMode = !selectMode" width="96px" v-if="sortPhotos.length">
           {{ selectMode ? '取消' : '选择' }}
         </ui-button>
       </Header>
     </template>
 
     <Photos
+      undata-msg="无照片。请返回场景拍照以获取照片"
       :getURL="data => data.urlRaw || data.url"
       v-model:active="active"
       v-model:selects="selects"

src/views/roads/index.vue

@@ -7,6 +7,7 @@
             @click="selectMode = !selectMode"
             width="96px"
             style="margin-right: 16px"
+            v-if="sortPhotos.length"
         >
           {{ selectMode ? '取消' : '选择' }}
         </ui-button>
@@ -22,6 +23,7 @@
     </template>
 
     <Photos
+        undata-msg="无现场图。请点击右上角按钮绘制现场图。"
         v-model:active="active"
         v-model:selects="selects"
         :select-mode="selectMode"
@@ -184,4 +186,4 @@ onDeactivated(() => {
   bottom: var(--boundMargin);
 }
 
-</style>
+</style>

src/views/scene/covers/cover.vue

@@ -122,7 +122,7 @@ onUnmounted(() => {
 .cover-layout {
   position: absolute;
   z-index: 1;
-  transform: translate(-50%, -100%);
+  transform: translate(-50%, -50%);
   cursor: move;
 }
 

src/views/scene/menus/menus.ts

@@ -128,8 +128,13 @@ export const generateMixMenus = <T extends {}, K extends keyof MenuRaw>(
         generateFn,
         mainMenus,
         menu => {
-          menu.onClick && menu.onClick()
-          itemActiveKey.value = menu.key
+          if (itemActiveKey.value === menu.key) {
+            itemActiveKey.value = null
+          } else {
+            menu.onClick && menu.onClick()
+            itemActiveKey.value = menu.key
+          }
+
         },
         () => itemActiveKey.value
       ),