From ed062c2c4c8e3fe74c7f1798a54ba4091a0c7e72 Mon Sep 17 00:00:00 2001 From: wang_yp <357754663@qq.com> Date: Wed, 4 Dec 2024 01:53:16 +0800 Subject: [PATCH] first commit --- src/App.tsx | 4 +- src/components/map/MapComponent.tsx | 5 +- src/components/map/MapFrom.tsx | 1 + src/components/map/mapUtil.ts | 28 +++----- src/pages/home/home.less | 3 +- src/pages/home/homeBottom/home_bottom.tsx | 61 +++++++++++++++++- src/pages/home/homeBottom/which_video.tsx | 8 +-- src/pages/home/homeLeft/orgin.tsx | 19 +----- src/pages/home/homeRigrt/right.less | 29 +++++---- .../{map-maker (1).png => map-maker1.png} | Bin .../{map-maker (2).png => map-maker2.png} | Bin src/store/home.ts | 4 +- 12 files changed, 96 insertions(+), 66 deletions(-) rename src/static/{map-maker (1).png => map-maker1.png} (100%) rename src/static/{map-maker (2).png => map-maker2.png} (100%) diff --git a/src/App.tsx b/src/App.tsx index 3058d97..5556144 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,8 +7,8 @@ const onMessage = (e: any) => { if (data.type === "accpt") { let body = JSON.parse(data.content.body); MapUtl.addMaker({ - lng: 103.55, - lat: 30.342, + lng: 103.872802, + lat: 30.523876, title: body?.user_name, users: body, }); diff --git a/src/components/map/MapComponent.tsx b/src/components/map/MapComponent.tsx index 750f4bc..2a6d993 100644 --- a/src/components/map/MapComponent.tsx +++ b/src/components/map/MapComponent.tsx @@ -22,8 +22,8 @@ export default function MapContainer() { amap = new Amap.Map("container", { viewMode: "2D", // 是否为3D地图模式 - zoom: 11, // 初始化地图级别 - center: [103.55, 30.34], // 初始化地图中心点位置 + zoom: 15, // 初始化地图级别 + center: [103.872802, 30.523876], // 初始化地图中心点位置 mapStyle: "amap://styles/darkblue", resizeEnable: true, }); @@ -44,7 +44,6 @@ export default function MapContainer() { // addMaket(Amap,amap); MapUtl.loadMap = Amap; MapUtl.amap = amap; - [ { title: "红桥微型消防站", po: [103.889435, 30.528084] }, { title: "桃荚微型消防站", po: [103.89066, 30.506378] }, diff --git a/src/components/map/MapFrom.tsx b/src/components/map/MapFrom.tsx index bbebf75..f14dc00 100644 --- a/src/components/map/MapFrom.tsx +++ b/src/components/map/MapFrom.tsx @@ -37,6 +37,7 @@ export default function MapFrom(props:any) { // 开启坐标选择功能 mouseTool.on("draw", function (event) { var lnglat = event.obj.getBounds().getCenter(); // 获取图形的中心点坐标 + console.log(lnglat) markers = mouseTool.overlays.marker props.onChange({lng:lnglat.lng,lat:lnglat.lat}) var mk = [] diff --git a/src/components/map/mapUtil.ts b/src/components/map/mapUtil.ts index f9bfca3..de22268 100644 --- a/src/components/map/mapUtil.ts +++ b/src/components/map/mapUtil.ts @@ -1,6 +1,6 @@ import makers from "../../static/map-maker.png"; -import makers1 from "../../static/map-maker (1).png"; -import makers2 from "../../static/map-maker (2).png"; +import makers1 from "../../static/map-maker1.png"; +import makers2 from "../../static/map-maker2.png"; interface makersInf { userIdentity: string, marker: any @@ -13,16 +13,16 @@ class MapUtl { static addMaker(data: any) { const { lng, lat, title, users } = data; - let mk,dep = ""; - if(users?.militia_type===1){ + let mk, dep = ""; + if (users?.militia_type === 1) { mk = makers dep = "民兵" } - if(users?.grid_user===1){ + if (users?.grid_user === 1) { mk = makers1 dep = "网格员" } - if(users?.patrol_user===1){ + if (users?.patrol_user === 1) { mk = makers2 dep = "巡防大队" } @@ -35,7 +35,7 @@ class MapUtl { imageSize: [20, 20], image: mk, style: { - backgroundImage:"red" + backgroundImage: "red" }// 默认的样式名 }), }); @@ -132,19 +132,7 @@ class MapUtl { static getWecher() { } - // 百度转高德 - static bdConvertGd(coordinate) { - var bd_lng = coordinate[0]; - var bd_lat = coordinate[1]; - var pi = 3.14159265358979324 * 3000.0 / 180.0; - var x = bd_lng - 0.0065; - var y = bd_lat - 0.006; - var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi); - var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi); - var gd_lng = z * Math.cos(theta); - var gd_lat = z * Math.sin(theta); - return [gd_lng, gd_lat]; - } + } export default MapUtl; \ No newline at end of file diff --git a/src/pages/home/home.less b/src/pages/home/home.less index 0c9ec7c..7580d74 100644 --- a/src/pages/home/home.less +++ b/src/pages/home/home.less @@ -127,13 +127,12 @@ bottom: 0px; backdrop-filter: blur(10px); background: rgba(37, 52, 70, 0.4); - height: 80px; + height: 60px; width: 100%; z-index: 1; text-align: center; .bottom_content { display: inline-block; - padding-top: 15px; > span { background: linear-gradient( 180deg, diff --git a/src/pages/home/homeBottom/home_bottom.tsx b/src/pages/home/homeBottom/home_bottom.tsx index 1ed0ee4..e79d1ea 100644 --- a/src/pages/home/homeBottom/home_bottom.tsx +++ b/src/pages/home/homeBottom/home_bottom.tsx @@ -3,7 +3,57 @@ import WhichVideo from "./which_video"; import Ec from "./ec"; import Emr from "./emr"; import "./bot.less"; -const HomeBottom = () => { +import { Radio } from "antd"; +import { useEffect, useState } from "react"; +import { inject, observer } from "mobx-react"; +import { Store } from "antd/es/form/interface"; +import MapUtl from "@/components/map/mapUtil"; + +const HomeBottom = (props: Store) => { + const { homeStore } = props; + const [size, changeSize] = useState("1"); + const handleSizeChange = (e: any) => { + changeSize(e.target.value); + getUlist(e.target.value); + }; + useEffect(() => { + setTimeout(() => { + getUlist("1"); + }, 2000); + }, []); + + const getUlist = (type) => { + let query = {}; + switch (type) { + case "1": + query = { militia: 1 }; + break; + case "2": + query = { grid_officer: 1 }; + break; + case "3": + query = { patrol_brigade: 1 }; + break; + } + let marks = MapUtl.makerList; + if (marks.length) { + marks.forEach((item) => { + item?.marker.remove(); + }); + } + homeStore.getContact(query).then((res) => { + let list = res.data.record; + list.forEach((element) => { + if (!element.lat || !element.long) return; + MapUtl.addMaker({ + lng: element.long, + lat: element.lat, + title: element.user_name, + users: element, + }); + }); + }); + }; return (
@@ -11,9 +61,16 @@ const HomeBottom = () => { + {/* 切换marker查看 */} + + 民兵 + 网格员 + 巡防 +
); }; -export default HomeBottom; +// export default HomeBottom; +export default inject("homeStore")(observer(HomeBottom)); diff --git a/src/pages/home/homeBottom/which_video.tsx b/src/pages/home/homeBottom/which_video.tsx index 0a50d82..ff741f8 100644 --- a/src/pages/home/homeBottom/which_video.tsx +++ b/src/pages/home/homeBottom/which_video.tsx @@ -33,7 +33,7 @@ const WhichVideo = (props) => { { @@ -48,9 +48,9 @@ const WhichVideo = (props) => { setIsModalOpen(false); }} > -
+
-
+
{deviceList.map((item, index) => { return (
{ })}
-
+
{channelList.map((item, index) => { return (
{ const { homeStore } = props; const [isModalOpen, setIsModalOpen] = useState(false); const [isSelf, setIsSelf] = useState(false); - const getRaud = (m: number,n:number) => { - var num = Math.floor(Math.random()*(m - n) + n); - return num - }; + useEffect(() => { homeStore.getOgCount(); homeStore.getVideoUrlList(); - homeStore.getContact().then((res)=>{ - let list = res.data.record; - list.forEach(element => { - let lng = "103.8"+getRaud(2000,12000) - let lat = "30.5"+getRaud(1000,12000) - MapUtl.addMaker({ - lng:lng, - lat:lat, - title:element.user_name, - users:element - }) - }); - }) }, [homeStore]); const showModal = () => { setIsModalOpen(true); diff --git a/src/pages/home/homeRigrt/right.less b/src/pages/home/homeRigrt/right.less index 3d1c869..0e7c599 100644 --- a/src/pages/home/homeRigrt/right.less +++ b/src/pages/home/homeRigrt/right.less @@ -1,11 +1,11 @@ .right_container { width: 100%; - color: #fff; - height: 100%; - display: flex; - flex-direction: column; + color: #fff; + height: 100%; + display: flex; + flex-direction: column; .org { - flex:1; + flex: 1; width: 100%; overflow-y: hidden; text-align: center; @@ -21,21 +21,24 @@ } } -.pyzx{ - height: 100%; - padding: 10px; - overflow-y: auto; - .pyzx_title{ +.pyzx { + height: 100%; + min-height: 200px; + padding: 10px; + margin-bottom: 10px; + overflow-y: scroll; + flex: 1; + .pyzx_title { display: flex; padding: 5px 4px; + margin-bottom: 10px; align-items: start; background: rgba(37, 52, 70, 0.4); - - .content{ + .content { text-align: left; font-size: 13px; } - >img{ + > img { margin-right: 10px; } } diff --git a/src/static/map-maker (1).png b/src/static/map-maker1.png similarity index 100% rename from src/static/map-maker (1).png rename to src/static/map-maker1.png diff --git a/src/static/map-maker (2).png b/src/static/map-maker2.png similarity index 100% rename from src/static/map-maker (2).png rename to src/static/map-maker2.png diff --git a/src/store/home.ts b/src/store/home.ts index 5b8f175..45222d1 100644 --- a/src/store/home.ts +++ b/src/store/home.ts @@ -57,8 +57,8 @@ class HomeStore extends BaseStore { return await baseHttp.get(HomeConfig.ae, {}); } // 获取联系人 - async getContact() { - return await baseHttp.get(HomeConfig.con, {}); + async getContact(params) { + return await baseHttp.get(HomeConfig.con, params); } // 获取视频推流连接