feat:merge dev

src/utils/axios.ts

@@ -60,7 +60,7 @@ class HttpAxios {
         sessionStorage.clear()
         router.push('/login')
         const userStore = useUserStore()
-        userStore.logout(false)
+        userStore.logout()
         ElMessage.warning({
           message: 'Please log in to use this feature.',
           grouping: true

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -204,7 +204,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
       </div>
     </div>
     <div class="transport-map">
-      <MapView :serial_no="allData?.serial_no" :uncode="allData?.uncode"></MapView>
+      <MapView style="flex: 1" :serial_no="allData?.serial_no" :uncode="allData?.uncode"></MapView>
       <TransportStep class="transport-step" :data="allData"></TransportStep>
     </div>
     <div class="info-content">
@@ -425,15 +425,10 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
     }
   }
   .transport-map {
-    position: relative;
+    display: flex;
+    gap: 8px;
     margin-bottom: 8px;
-    .transport-step {
-      position: absolute;
-      top: 8px;
-      right: 16px;
-      z-index: 1000;
-      overflow: hidden;
-    }
+    padding: 0 24px;
   }
 }
 

src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
-    id="tracking-map"
-    ref="mapContainer"
-    style="width: 100%; height: 520px"
-    class="tracking-map"
-    :class="{ 'dark-mode': themeStore.theme === 'dark' }"
-  ></div>
+  <div id="tracking-map" style="width: 100%; height: 448px" class="tracking-map"></div>
 </template>
 <script setup lang="ts">
 import L from 'leaflet'
@@ -13,11 +7,6 @@ import DestinationIcon from '../images/destinationIcon.png'
 import OriginIcon from '../images/originIcon.png'
 import TransferIcon from '../images/transferIcon.png'
 import { onMounted, ref, watch } from 'vue'
-import * as turf from '@turf/turf'
-import { mapData } from './mapData'
-import { useThemeStore } from '@/stores/modules/theme'
-
-const themeStore = useThemeStore()
 
 const props = defineProps<{
   serial_no?: string
@@ -64,179 +53,6 @@ const initMap = () => {
   }).addTo(map)
 }
 
-// 修正经度
-const fixLng = (lng: number) => {
-  while (lng > 180) lng = lng - 360
-  while (lng <= -180) lng = lng + 360
-  return lng
-}
-const getBBox = () => {
-  let bnd = map.getBounds()
-  let ww = bnd.getEast() - bnd.getWest()
-  let cent_pt = map.getCenter()
-  let bbox = [
-    fixLng(cent_pt.lng - ww / 2),
-    bnd.getSouth(),
-    fixLng(cent_pt.lng + ww / 2),
-    bnd.getNorth()
-  ]
-
-  let bbox2 = []
-  let bbox3 = []
-  if (ww > 360) {
-    bbox[0] = -180
-    bbox[2] = 0
-
-    bbox2[0] = 0
-    bbox2[1] = bbox[1]
-    bbox2[2] = 180
-    bbox2[3] = bbox[3]
-  }
-  if (bbox[2] * bbox[0] < 0 || bbox[2] < bbox[0]) {
-    if (bbox[0] >= 0) {
-      bbox2[0] = -180
-      bbox2[2] = bbox[2]
-      bbox2[1] = bbox[1]
-      bbox2[3] = bbox[3]
-      bbox[2] = 180
-    } else {
-      bbox2[0] = 0
-      bbox2[2] = bbox[2]
-      bbox2[1] = bbox[1]
-      bbox2[3] = bbox[3]
-      bbox[2] = 0
-    }
-  }
-  if (bbox2[2] * bbox2[0] < 0 || bbox2[2] < bbox2[0]) {
-    if (bbox2[0] >= 0) {
-      bbox3[0] = -180
-      bbox3[2] = bbox2[2]
-      bbox3[1] = bbox2[1]
-      bbox3[3] = bbox2[3]
-      bbox2[2] = 180
-    } else {
-      bbox3[0] = 0
-      bbox3[2] = bbox2[2]
-      bbox3[1] = bbox2[1]
-      bbox3[3] = bbox2[3]
-      bbox2[2] = 0
-    }
-  }
-  let ll = []
-  ll.push(bbox)
-
-  if (bbox2.length > 0) ll.push(bbox2)
-  if (bbox3.length > 0) ll.push(bbox3)
-  return ll
-}
-let track_added_marker = []
-
-const clear_marker = () => {
-  track_added_marker.forEach((v) => {
-    map!.removeLayer(v)
-  })
-
-  track_added_marker = []
-}
-const draw_marker = (dottedLine = [], solidLine = []) => {
-  clear_marker()
-  dottedLine.forEach((l) => {
-    addMapLine(l, true, { color: '#ff7500', weight: 2 })
-  })
-  solidLine.forEach((l) => {
-    addMapLine(l, false, { color: '#ff7500', weight: 2 })
-  })
-}
-const addMapLine = (l, IsDash, opts) => {
-  let mpts = l.pts
-  if (mpts == null || mpts.length == 0) return
-
-  let bnd = map.getBounds()
-  let ww = bnd.getEast() - bnd.getWest()
-  let cc = Math.ceil(ww / 360)
-
-  let boxlist = getBBox()
-
-  let ll = []
-
-  for (let ii = 0; ii < mpts.length; ii++) {
-    ll[ii] = [mpts[ii][1], mpts[ii][0]]
-  }
-  let pline = turf.lineString(ll, { name: '' })
-  let level = map.getZoom()
-  let options = {
-    tolerance:
-      Math.round(
-        ((level < 8 ? 0.0005 : level < 12 ? 0.00005 : 0) / (level == 0 ? 1 : level)) * 1000000
-      ) / 1000000,
-    highQuality: false
-  }
-  let simplified = turf.simplify(pline, options)
-
-  let lines_list = []
-  let clipped: any = simplified
-  boxlist.forEach((bbox) => {
-    let bb = bbox
-    clipped = turf.bboxClip(simplified, bb)
-    if (clipped != null) {
-      if (clipped.geometry.type === 'LineString') {
-        let line_pts = clipped.geometry.coordinates
-        let pta = []
-        let jj = 0
-        for (let ii = 0; ii < line_pts.length; ii++) {
-          pta[jj++] = [line_pts[ii][1], line_pts[ii][0]]
-        }
-        lines_list.push(pta)
-      } else if (clipped.geometry.type === 'MultiLineString') {
-        clipped.geometry.coordinates.forEach((_pts) => {
-          let line_pts = _pts
-          let pta = []
-          let jj = 0
-          for (let ii = 0; ii < line_pts.length; ii++) {
-            pta[jj++] = [line_pts[ii][1], line_pts[ii][0]]
-          }
-          lines_list.push(pta)
-        })
-      }
-    }
-  })
-
-  let cc1 = Math.floor(bnd.getWest() / 360)
-  let cc2 = Math.ceil(bnd.getEast() / 360)
-  cc = cc2 - cc1 + 1
-
-  let kk = cc1
-  // let lines_list = [mpts]
-  while (kk >= cc1 && kk <= cc2 && cc > 0) {
-    lines_list.forEach((a) => {
-      let ii = 0
-      let jj = 0
-      let pts = []
-      for (ii = 0; ii < a.length; ii++) pts[jj++] = [a[ii][0], a[ii][1] + kk * 360]
-
-      if (jj > 0) {
-        if (IsDash) {
-          showTrackLine(
-            pts,
-            jj,
-            Object.assign({}, { color: '#ff7500', dashArray: '10', weight: 2 }, opts)
-          )
-        } else {
-          showTrackLine(pts, jj, Object.assign({}, { color: '#ff7500', weight: 1 }, opts))
-        }
-      }
-    })
-
-    kk++
-    cc--
-  }
-}
-
-const showTrackLine = (pts, jj, opts) => {
-  let arrow = L.polyline(pts, Object.assign({}, { color: '#ff7500', weight: 2 }, opts)).addTo(map)
-  track_added_marker.push(arrow)
-}
-
 const addResetZoomButton = (center: L.LatLng, zoom: number) => {
   const ResetZoomControl = L.Control.extend({
     options: {
@@ -539,6 +355,7 @@ onUnmounted(() => {
 <style lang="scss">
 @import 'leaflet/dist/leaflet.css';
 .tracking-map {
+  border-radius: 12px;
   .leaflet-popup-content-wrapper {
     border-radius: 6px;
   }

src/views/Tracking/src/components/TrackingDetail/src/components/TransportStep.vue

@@ -42,8 +42,9 @@ const handleTabClick = (name: string) => {
 <style lang="scss" scoped>
 .transport-step {
   width: 400px;
-  height: 484px;
-  background-color: var(--color-header-bg);
+  height: 448px;
+  background-color: #fff;
+  border: 1px solid #eaebed;
   border-radius: 12px;
   border: 1px solid var(--color-border);
   box-shadow: -2px 2px 12px 0px var(--color-shipment-status-shadow);