first commit

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,
     });

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] },

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 = []

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;

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,

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 (
     <div className="bottom_container">
       <div className="bottom_content">
@@ -11,9 +61,16 @@ const HomeBottom = () => {
         <Emr />
         <Ec />
         <WhichVideo />
+        {/* 切换marker查看 */}
+        <Radio.Group value={size} onChange={handleSizeChange}>
+          <Radio.Button value="1">民兵</Radio.Button>
+          <Radio.Button value="2">网格员</Radio.Button>
+          <Radio.Button value="3">巡防</Radio.Button>
+        </Radio.Group>
       </div>
     </div>
   );
 };
 
-export default HomeBottom;
+// export default HomeBottom;
+export default inject("homeStore")(observer(HomeBottom));

src/pages/home/homeBottom/which_video.tsx

@@ -33,7 +33,7 @@ const WhichVideo = (props) => {
       <Modal
         title={"视频查看"}
         className="owner_model"
-        width={1000}
+        width={"80%"}
         centered
         open={isModalOpen}
         afterClose={() => {
@@ -48,9 +48,9 @@ const WhichVideo = (props) => {
           setIsModalOpen(false);
         }}
       >
-        <div style={{ height: "700px", overflowY: "scroll", width: "1000px" }}>
+        <div style={{ height: "700px",  width: "100%" }}>
           <div style={{ display: "flex" }}>
-            <div>
+            <div style={{overflowY: "scroll",height: "700px"}}>
               {deviceList.map((item, index) => {
                 return (
                   <div
@@ -73,7 +73,7 @@ const WhichVideo = (props) => {
               })}
             </div>
             <div style={{ width: "20px" }}></div>
-            <div>
+            <div style={{height:"700px",overflow:"scroll"}}>
               {channelList.map((item, index) => {
                 return (
                   <div

src/pages/home/homeLeft/orgin.tsx

@@ -6,31 +6,14 @@ import { Modal } from "antd";
 import { Store } from "antd/es/form/interface";
 import { inject, observer } from "mobx-react";
 import { useEffect, useState } from "react";
-import MapUtl from "@/components/map/mapUtil";
 const Orgin = (props: Store) => {
   const { homeStore } = props;
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [isSelf, setIsSelf] = useState<boolean>(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);

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;
     }
   }

src/store/home.ts

@@ -57,8 +57,8 @@ class HomeStore extends BaseStore<TagDataType> {
         return await baseHttp.get(HomeConfig.ae, {});
     }
     // 获取联系人
-    async getContact() {
-        return await baseHttp.get(HomeConfig.con, {});
+    async getContact(params) {
+        return await baseHttp.get(HomeConfig.con, params);
     }
 
     // 获取视频推流连接