d3地图添加全屏

web/src/components/trajectory/index.vue

@@ -1,9 +1,14 @@
 <template>
-  <div ref="mapContainer" class="map-container"></div>
+  <div ref="mapContainer" class="map-container" :class="{ 'fullscreen': isFullscreen }">
+    <button class="fullscreen-btn" @click="toggleFullscreen">
+      {{ isFullscreen ? '退出全屏' : '全屏' }}
+    </button>
+  </div>
 </template>
 
+
 <script setup>
-import { ref, onMounted, watch,defineEmits } from 'vue'
+import { ref, onMounted, watch, defineEmits, onBeforeUnmount } from 'vue'
 import * as d3 from 'd3'
 import chinaData from './newJson.json'
 
@@ -22,20 +27,21 @@ const props = defineProps({
 })
 const emit = defineEmits(['qvehuan1']);
 const mapContainer = ref(null)
-let svg, mapGroup, markersGroup, zoom
+const isFullscreen = ref(false)
+let svg, mapGroup, markersGroup, zoom, width, height
 
 const initMap = () => {
-  const width = 1000
-  const height = 800
-
+  // 动态获取容器尺寸
+  width = mapContainer.value.clientWidth?mapContainer.value.clientWidth:800
+  height = mapContainer.value.clientHeight?mapContainer.value.clientHeight:600
   const projection = d3.geoMercator()
     .center([104, 37])
-    .scale(600)
+    .scale(isFullscreen.value ? 1000 : 600)
     .translate([width / 2, height / 2])
 
   const path = d3.geoPath().projection(projection)
 
-  if (svg) svg.selectAll("*").remove()
+  if (svg) svg.remove()
 
   svg = d3.select(mapContainer.value)
     .append('svg')
@@ -82,12 +88,28 @@ const initMap = () => {
     })
   svg.call(zoom)
 }
+const handleResize = () => {
+  if (!isFullscreen.value) return
+  initMap()
+  updateRoute()
+}
+
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+  setTimeout(() => {
+    initMap()
+    updateRoute()
+  }, 100)
+}
+
 
 const updateRoute = () => {
+  width = mapContainer.value.clientWidth?mapContainer.value.clientWidth:800
+  height = mapContainer.value.clientHeight?mapContainer.value.clientHeight:600
   const projection = d3.geoMercator()
     .center([104, 37])
-    .scale(600)
-    .translate([1000 / 2, 800 / 2])
+    .scale(isFullscreen.value ? 1000 : 600)
+    .translate([width / 2, height / 2])
   if (initqie.value) {
     // debugger
     mapGroup.selectAll('.route-path').remove()
@@ -108,7 +130,7 @@ const updateRoute = () => {
     .attr('d', d3.geoPath().projection(projection))
     .attr('fill', 'none')
     .attr('stroke', '#f00')
-    .attr('stroke-width', 1)
+    .attr('stroke-width', 0.1)
     .attr('stroke-dasharray', function () {
       return this.getTotalLength()
     })
@@ -133,20 +155,24 @@ const updateRoute = () => {
     markersGroup.append('circle')
       .attr('cx', x)
       .attr('cy', y)
-      .attr('r', 1) // 根据缩放级别调整半径
+      .attr('r', 0.3) // 根据缩放级别调整半径
       .attr('fill', '#ff4757')
       .attr('stroke', 'white')
-      .attr('stroke-width', 0.1) // 同步调整描边宽度
+      .attr('stroke-width', 0) // 同步调整描边宽度
   })
 }
 const initqie = ref(false)
 onMounted(() => {
+  window.addEventListener('resize', handleResize)
   if (props.coordinates) {
     initMap()
     updateRoute()
   }
 
 })
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+})
 watch(() => props.qvehuan, (newVal) => {
   initqie.value = newVal
   updateRoute()
@@ -157,11 +183,37 @@ watch(() => props.coordinates, (newVal) => {
 </script>
 
 <style>
-/* 保持原有样式不变 */
 .map-container {
+  position: relative;
   background-color: #f0f8ff;
   margin: 20px;
   overflow: hidden;
   touch-action: none;
+  transition: all 0.3s ease;
+  width: 100%;
+  height: 100%;
+}
+
+.fullscreen {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0 !important;
+  z-index: 9999;
+}
+
+.fullscreen-btn {
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  z-index: 10000;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
 }
 </style>

web/src/utils/request.ts

@@ -64,7 +64,8 @@ service.interceptors.response.use(
     if (error.response.data) {
       const { status, msg } = error.response.data;
       // token 过期,重新登录
-      if (status === '403') {
+      // debugger
+      if (status == '403') {
         ElMessageBox.confirm('当前页面已失效，请重新登录', '提示', {
           confirmButtonText: 'OK',
           type: 'warning'

web/src/views/testdata/fileSynchronization/index.vue

@@ -104,7 +104,7 @@ const loading1 = ref(false)
 const loading2 = ref(false)
 const loading3 = ref(false)
 //文件对比-新增内容
-const sureSize = ref(100)
+const sureSize = ref(10)
 const sureTotal = ref()
 const sureCurrent = ref(1)
 function diffSure() {
@@ -131,7 +131,7 @@ function diffSure() {
     })
 }
 //文件对比-变更内容
-const ChangeSize = ref(100)
+const ChangeSize = ref(10)
 const ChangeTotal = ref()
 const ChangeCurrent = ref(1)
 function diffChange() {
@@ -158,7 +158,7 @@ function diffChange() {
     })
 }
 //文件对比-缺失内容
-const MisseSize = ref(100)
+const MisseSize = ref(10)
 const MissTotal = ref()
 const MissCurrent = ref(1)
 function diffMiss() {