Inicio Explorar Ayuda
Registro Iniciar sesión
lanxin
/
JinanGMLS
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

更新支持移动端

lanxin hace 23 horas
padre
4e73026284
commit
06fc0fc4df
Se han modificado 6 ficheros con 73 adiciones y 33 borrados
Unificar vista Mostrar estadísticas de diff
  1. 2 2
      front/public/index.html
  2. 5 3
      front/src/App.tsx
  3. 15 2
      front/src/assets/styles/base.css
  4. 43 24
      front/src/pages/A1home/index.tsx
  5. 1 2
      front/src/pages/components/Left/index.module.scss
  6. 7 0
      front/src/utils/isMobile.ts

+ 2 - 2
front/public/index.html
Ver fichero 

@@ -1,5 +1,5 @@
 
-<!DOCTYPE html>
 
-<html lang="zh">
 
+<!doctype html>
 
+<html lang="zh" style="overflow: hidden">
 
   <head>
 
   <head>
 
     <meta charset="utf-8" />
 
     <meta charset="utf-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />

+ 5 - 3
front/src/App.tsx
Ver fichero 

@@ -23,7 +23,9 @@ export default function App() {
 
   const rootDomFu = useCallback(() => {
 
   const rootDomFu = useCallback(() => {
 
     const rootDom: HTMLDivElement = document.querySelector('#root')!
 
     const rootDom: HTMLDivElement = document.querySelector('#root')!
 
     if (rootDom) {
 
     if (rootDom) {
 
-      rootDom.style.height = window.innerHeight + 'px'
 
+      // rootDom.style.height = window.innerHeight + 'px'
 
+      const scale = `${window.innerWidth / 1920}, ${window.innerHeight / 945}`
 
+      rootDom.style.transform = `translate(-50%, -50%) scale(${scale})`
 
     }
 
     }
 
   }, [])
 
   }, [])
 
 
 
@@ -85,12 +87,12 @@ export default function App() {
 
       <MessageCom />
 
       <MessageCom />
 
 
 
       {/* 横屏提示 */}
 
       {/* 横屏提示 */}
 
-      {isMobileFu() ? (
 
+      {/* {isMobileFu() ? (
 
         <div id='ScreenChange'>
 
         <div id='ScreenChange'>
 
           <img src={screenImg} alt='' />
 
           <img src={screenImg} alt='' />
 
           <p>请在竖屏模式浏览</p>
 
           <p>请在竖屏模式浏览</p>
 
         </div>
 
         </div>
 
-      ) : null}
 
+      ) : null} */}
 
     </>
 
     </>
 
   )
 
   )
 
 }
 
 }

+ 15 - 2
front/src/assets/styles/base.css
Ver fichero 

@@ -9,8 +9,16 @@ html {
 
   user-select: none;
 
   user-select: none;
 
 }
 
 }
 
 body {
 
 body {
 
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
 
-    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
 
+  font:
 
+    1em/1.4 'Microsoft Yahei',
 
+    'PingFang SC',
 
+    'Avenir',
 
+    'Segoe UI',
 
+    'Hiragino Sans GB',
 
+    'STHeiti',
 
+    'Microsoft Sans Serif',
 
+    'WenQuanYi Micro Hei',
 
+    sans-serif;
 
   height: 100%;
 
   height: 100%;
 
   color: black;
 
   color: black;
 
 }
 
 }
 
@@ -60,6 +68,11 @@ textarea {
 
   height: 100vh;
 
   height: 100vh;
 
   overflow: auto;
 
   overflow: auto;
 
   overflow-y: overlay;
 
   overflow-y: overlay;
 
+  height: 945px;
 
+  width: 1920px;
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
   /* 普通文字按钮的颜色 */
 
   /* 普通文字按钮的颜色 */
 
   /* 按钮的危险颜色 */
 
   /* 按钮的危险颜色 */
 
   /* antd分页器样式 */
 
   /* antd分页器样式 */

+ 43 - 24
front/src/pages/A1home/index.tsx
Ver fichero 

@@ -5,6 +5,7 @@ import Right from '@/pages/components/Right'
 
 import BottomSearch from '@/pages/components/BottomSearch'
 
 import BottomSearch from '@/pages/components/BottomSearch'
 
 import MapTab from '@/pages/components/MapTab'
 
 import MapTab from '@/pages/components/MapTab'
 
 import Detail from '@/pages/components/Detail'
 
 import Detail from '@/pages/components/Detail'
 
+import isMobile from '@/utils/isMobile'
 
 import { ReactComponent as MapSvg } from '@/assets/img/map.svg'
 
 import { ReactComponent as MapSvg } from '@/assets/img/map.svg'
 
 import svgPanZoom from 'svg-pan-zoom'
 
 import svgPanZoom from 'svg-pan-zoom'
 
 import { useDispatch, useSelector } from 'react-redux'
 
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -23,6 +24,7 @@ import { cityIdToName, addDefs, nameToCityId } from '@/pages/A1home/util'
 
 function A1home() {
 
 function A1home() {
 
   const svgRef = useRef<SVGSVGElement>(null)
 
   const svgRef = useRef<SVGSVGElement>(null)
 
   const panZoomInstance = useRef<ReturnType<typeof svgPanZoom> | null>(null)
 
   const panZoomInstance = useRef<ReturnType<typeof svgPanZoom> | null>(null)
 
+  // 控制动画效果
 
   const [isAddClassName, setIsAddClassName] = useState(false)
 
   const [isAddClassName, setIsAddClassName] = useState(false)
 
   const [curCityId, setCurCityId] = useState('')
 
   const [curCityId, setCurCityId] = useState('')
 
   const [isDragging, setIsDragging] = useState(false)
 
   const [isDragging, setIsDragging] = useState(false)
 
@@ -75,12 +77,15 @@ function A1home() {
 
   const { list: listAll } = useSelector((state: RootState) => state.Martyr.tableInfo)
 
   const { list: listAll } = useSelector((state: RootState) => state.Martyr.tableInfo)
 
   const martyrListByCity = useMemo(
 
   const martyrListByCity = useMemo(
 
     () =>
 
     () =>
 
-      listAll.reduce((acc, current) => {
 
-        const key = current.nativeCity
 
-        if (!acc[key]) acc[key] = []
 
-        acc[key].push(current)
 
-        return acc
 
-      }, {} as Record<string, typeof listAll>),
 
+      listAll.reduce(
 
+        (acc, current) => {
 
+          const key = current.nativeCity
 
+          if (!acc[key]) acc[key] = []
 
+          acc[key].push(current)
 
+          return acc
 
+        },
 
+        {} as Record<string, typeof listAll>
 
+      ),
 
     [listAll]
 
     [listAll]
 
   )
 
   )
 
 
 
@@ -90,28 +95,35 @@ function A1home() {
 
     getListFu()
 
     getListFu()
 
     getRelativeList().then(res => {
 
     getRelativeList().then(res => {
 
       setRelativeList(
 
       setRelativeList(
 
-        res.data.reduce((acc: Record<string, RelativeItem[]>, current: RelativeItem) => {
 
-          const key = current.city
 
-          if (!acc[key]) acc[key] = []
 
-          acc[key].push(current)
 
-          return acc
 
-        }, {} as Record<string, typeof listAll>)
 
+        res.data.reduce(
 
+          (acc: Record<string, RelativeItem[]>, current: RelativeItem) => {
 
+            const key = current.city
 
+            if (!acc[key]) acc[key] = []
 
+            acc[key].push(current)
 
+            return acc
 
+          },
 
+          {} as Record<string, typeof listAll>
 
+        )
 
       )
 
       )
 
     })
 
     })
 
     getClueList().then(res => {
 
     getClueList().then(res => {
 
       setClueList(
 
       setClueList(
 
-        res.data.reduce((acc: Record<string, ClueItem[]>, current: ClueItem) => {
 
-          const key = current.city
 
-          if (!acc[key]) acc[key] = []
 
-          acc[key].push(current)
 
-          return acc
 
-        }, {} as Record<string, typeof listAll>)
 
+        res.data.reduce(
 
+          (acc: Record<string, ClueItem[]>, current: ClueItem) => {
 
+            const key = current.city
 
+            if (!acc[key]) acc[key] = []
 
+            acc[key].push(current)
 
+            return acc
 
+          },
 
+          {} as Record<string, typeof listAll>
 
+        )
 
       )
 
       )
 
     })
 
     })
 
   }, [getClueList, getListFu, getRelativeList])
 
   }, [getClueList, getListFu, getRelativeList])
 
 
 
   // 聚焦到指定城市
 
   // 聚焦到指定城市
 
   const focusOnCity = useCallback((cityId: string) => {
 
   const focusOnCity = useCallback((cityId: string) => {
 
+    console.log('00000000000000000000000')
 
     if (panZoomInstance.current && svgRef.current && cityId) {
 
     if (panZoomInstance.current && svgRef.current && cityId) {
 
       const zoomLevel = 1.8
 
       const zoomLevel = 1.8
 
       const svgPoint = svgRef.current.createSVGPoint()
 
       const svgPoint = svgRef.current.createSVGPoint()
 
@@ -254,14 +266,14 @@ function A1home() {
 
   )
 
   )
 
 
 
   // 鼠标移入移出点击城市版块
 
   // 鼠标移入移出点击城市版块
 
-  const mouseEnter = useCallback((e: MouseEvent) => {
 
+  const mouseEnter = useCallback((e: MouseEvent | TouchEvent) => {
 
     const target = e.target as SVGElement
 
     const target = e.target as SVGElement
 
     const tooltip = svgRef.current?.querySelector(`#tap-${target.id}Tooltip`)
 
     const tooltip = svgRef.current?.querySelector(`#tap-${target.id}Tooltip`)
 
     if (tooltip) {
 
     if (tooltip) {
 
       ;(tooltip as HTMLElement).style.opacity = '1'
 
       ;(tooltip as HTMLElement).style.opacity = '1'
 
     }
 
     }
 
   }, [])
 
   }, [])
 
-  const mouseLeave = useCallback((e: MouseEvent) => {
 
+  const mouseLeave = useCallback((e: MouseEvent | TouchEvent) => {
 
     const target = e.target as SVGElement
 
     const target = e.target as SVGElement
 
     const tooltip = svgRef.current?.querySelector(`#tap-${target.id}Tooltip`)
 
     const tooltip = svgRef.current?.querySelector(`#tap-${target.id}Tooltip`)
 
     if (tooltip) {
 
     if (tooltip) {
 
@@ -269,7 +281,7 @@ function A1home() {
 
     }
 
     }
 
   }, [])
 
   }, [])
 
   const clickCity = useCallback(
 
   const clickCity = useCallback(
 
-    (e: MouseEvent) => {
 
+    (e: MouseEvent | TouchEvent) => {
 
       if (isDragging) {
 
       if (isDragging) {
 
         // 添加拖拽状态判断
 
         // 添加拖拽状态判断
 
         setIsDragging(false)
 
         setIsDragging(false)
 
@@ -391,9 +403,9 @@ function A1home() {
 
       svgRef.current.style.height = '100%'
 
       svgRef.current.style.height = '100%'
 
       panZoomInstance.current = svgPanZoom(svgRef.current, {
 
       panZoomInstance.current = svgPanZoom(svgRef.current, {
 
         zoomEnabled: true,
 
         zoomEnabled: true,
 
-        dblClickZoomEnabled: false,
 
+        dblClickZoomEnabled: isMobile() ? true : false,
 
+        controlIconsEnabled: true,
 
         panEnabled: true,
 
         panEnabled: true,
 
-        controlIconsEnabled: false,
 
         fit: true,
 
         fit: true,
 
         center: true,
 
         center: true,
 
         onPan: () => {
 
         onPan: () => {
 
@@ -414,6 +426,11 @@ function A1home() {
 
           setEnableTooltipEvents(true)
 
           setEnableTooltipEvents(true)
 
           removeArrows()
 
           removeArrows()
 
         })
 
         })
 
+        viewport.addEventListener('touchend', e => {
 
+          setIsAddClassName(false)
 
+          setEnableTooltipEvents(true)
 
+          removeArrows()
 
+        })
 
         viewport.dispatchEvent(new MouseEvent('click'))
 
         viewport.dispatchEvent(new MouseEvent('click'))
 
       }
 
       }
 
     }
 
     }
 
@@ -453,11 +470,12 @@ function A1home() {
 
         item.removeEventListener('mouseenter', mouseEnter)
 
         item.removeEventListener('mouseenter', mouseEnter)
 
         item.removeEventListener('mouseleave', mouseLeave)
 
         item.removeEventListener('mouseleave', mouseLeave)
 
         item.removeEventListener('click', clickCity)
 
         item.removeEventListener('click', clickCity)
 
-
 
+        item.removeEventListener('touchend', clickCity)
 
         if (enableTooltipEvents) {
 
         if (enableTooltipEvents) {
 
           item.addEventListener('mouseenter', mouseEnter)
 
           item.addEventListener('mouseenter', mouseEnter)
 
           item.addEventListener('mouseleave', mouseLeave)
 
           item.addEventListener('mouseleave', mouseLeave)
 
           item.addEventListener('click', clickCity)
 
           item.addEventListener('click', clickCity)
 
+          item.addEventListener('touchend', clickCity)
 
         }
 
         }
 
       })
 
       })
 
       return () => {
 
       return () => {
 
@@ -465,6 +483,7 @@ function A1home() {
 
           item.removeEventListener('mouseenter', mouseEnter)
 
           item.removeEventListener('mouseenter', mouseEnter)
 
           item.removeEventListener('mouseleave', mouseLeave)
 
           item.removeEventListener('mouseleave', mouseLeave)
 
           item.removeEventListener('click', clickCity)
 
           item.removeEventListener('click', clickCity)
 
+          item.removeEventListener('touchend', clickCity)
 
         })
 
         })
 
       }
 
       }
 
     }
 
     }

+ 1 - 2
front/src/pages/components/Left/index.module.scss
Ver fichero 

@@ -112,8 +112,7 @@
 
             flex-direction: column;
 
             flex-direction: column;
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
 
-            overflow-y: auto;
 
-            overflow-x: hidden;
 
+            overflow: auto;
 
             gap: 10px;
 
             gap: 10px;
 
             &::-webkit-scrollbar {
 
             &::-webkit-scrollbar {
 
               display: none; /* 隐藏滚动条 */
 
               display: none; /* 隐藏滚动条 */

+ 7 - 0
front/src/utils/isMobile.ts
Ver fichero 

@@ -0,0 +1,7 @@
 
+const isMobile = () => {
 
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 
+    navigator.userAgent
 
+  )
 
+}
 
+
 
+export default isMobile