add animation

src/App.tsx

@@ -20,6 +20,9 @@ const onMessage = (e: any) => {
         lat: body.address.lat ?? 30.523876,
         title: body?.user.user_name,
         users: body.user,
+        clicks:(v)=>{
+          console.log(v)
+        }
       });
     }
   } else if (data.type === "move") {

src/components/map/MapComponentTow.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { mapArrs } from "@/store/map";
+
+export default function MapContainerTow() {
+  let [amap, setmaps] = useState<any>(null);
+  useEffect(() => {
+    loadMaps();
+    return () => {
+      amap?.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const loadMaps = async () => {
+    const Amap = await AMapLoader.load({
+      key: "d58999d072ed7e5897d3900a769cfda0", // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: ["AMap.Scale", "AMap.MoveAnimation", "AMap.Weather"],
+    });
+
+    amap = new Amap.Map("containerTow", {
+      viewMode: "2D", // 是否为3D地图模式
+      zoom: 15, // 初始化地图级别
+      center: [103.872802, 30.523876], // 初始化地图中心点位置
+      mapStyle: "amap://styles/darkblue",
+      resizeEnable: true,
+    });
+    const polygon = new Amap.Polygon({
+      map: amap,
+      path: mapArrs,
+      strokeColor: "red", //线颜色
+      strokeOpacity: 0.8, //线透明度
+      strokeWeight: 2, //线宽
+      fillColor: "#85b0ec", //填充色
+      fillOpacity: 0, //填充透明度
+    });
+    amap.add(polygon);
+    amap.setFitView();
+    setmaps(amap);
+  };
+
+  return (
+    <div id="containerTow" style={{ height: "100vh", width: "100%" }}></div>
+  );
+}

src/components/map/MapFrom.tsx

@@ -37,7 +37,6 @@ 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

@@ -2,7 +2,7 @@ import makers from "../../static/map-maker.png";
 import makers1 from "../../static/map-maker1.png";
 interface makersInf {
     userIdentity: string,
-    marker: any
+    marker: any,
 } 
 class MapUtl {
     static makerList: makersInf[] = [];
@@ -11,7 +11,7 @@ class MapUtl {
     static wecherInfo: any = null;
 
     static addMaker(data: any) {
-        const { lng, lat, title, users } = data;
+        const { lng, lat, title, users,clicks } = data;
         let mk, dep = "";
         if (users?.militia_type === 1) {
             mk = makers
@@ -51,6 +51,7 @@ class MapUtl {
         });
         marker.on("click", (e) => {
             infoWindow.open(MapUtl.amap, e.target.getPosition());
+            clicks(users.id)
         });
         MapUtl.amap?.add(marker);
         // 将maker添加到数组
@@ -98,7 +99,7 @@ class MapUtl {
     }
 
     static polyline = (lineArr) => {
-        var marker = new MapUtl.loadMap.Marker({
+        let markerp = new MapUtl.loadMap.Marker({
             map: MapUtl.amap,
             position: [116.478935, 39.997761],
             icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
@@ -111,17 +112,17 @@ class MapUtl {
             strokeColor: "#28F",  //线颜色
             strokeWeight: 6,      //线宽
         });
-        var passedPolyline = new MapUtl.loadMap.Polyline({
+        let passedPolyline = new MapUtl.loadMap.Polyline({
             map: MapUtl.amap,
             strokeColor: "#AF5",  //线颜色
             strokeWeight: 6,      //线宽
         });
-        marker.on('moving', function (e) {
+        markerp.on('moving', function (e) {
             passedPolyline.setPath(e.passedPath);
             MapUtl.amap.setCenter(e.target.getPosition(), true)
         });
         MapUtl.amap.setFitView();
-        marker.moveAlong(lineArr, {
+        markerp.moveAlong(lineArr, {
             duration: 500,//可根据实际采集时间间隔设置
             autoRotation: true,
         });

src/index.less

@@ -73,6 +73,9 @@ code {
   color: #00ef97 !important;
   border-color: #00ef97 !important;
 }
+p{
+  margin: 0;
+}
 .owner_model {
   padding-bottom: 0px !important;
   .ant-modal-content {
@@ -80,7 +83,7 @@ code {
     background-size: 100% 100%;
     background-position: center center; /* 可选，确保图片在容器中居中 */
     background-repeat: no-repeat; /* 确保图片不会重复 */
-    padding-bottom: 0px;
+    padding-bottom: 0px; 
     .ant-modal-header {
       color: rgba(0, 0, 0, 0.85);
       background: none;

src/pages/home/home.less

@@ -34,46 +34,25 @@
   }
   .map_container_t {
     position: absolute;
-    height: 60px;
     top: 0;
     width: 100%;
-    background-image: url("../../static/head.png");
+    background-image: url("../../static/head1.png");
-    background-repeat: no-repeat;
-    backdrop-filter: blur(10px);
     left: 0;
-    right: 0;
+    background-size: 100% 100%;
+    height: 120px;
     z-index: 1;
     display: flex;
-    align-items: center;
     justify-content: space-between;
     .map_container_t_c {
-      display: flex;
+      text-align: center;
-      align-items: center;
+      flex: 1;
-      justify-content: center;
+      padding: 10px;
-      flex: 4;
+      font-size: 15px;
-      .title_img {
-        width: 20px;
-        height: 20px;
-        
-      }
-      img{
-        width: 100px;
-      }
-      .on_to {
-        transform: rotate(-180deg) rotateY(0deg);
-      }
-      .twp {
-        height: 30px;
-      }
       > span {
-        margin-left: 15px;
+        font-size: 20px;
-        margin-right: 15px;
-        color: #fff;
-        font-size:25px;
         font-weight: normal;
         line-height: normal;
         letter-spacing: 0.1em;
-        font-variation-settings: "opsz" auto;
         color: #ffffff;
         text-shadow: 0px 0px 10px #29ecb4;
       }
@@ -97,16 +76,16 @@
     .map_container_t_r {
       flex: 1;
       display: flex;
-      align-items: center;
-      justify-content: space-between;
       text-align: right;
       padding-right: 10px;
+      display: flex;
+      justify-content: end;
     }
   }
   .map_container_l {
     position: absolute;
     left: 0px;
-    top: 60px;
+    top: 40px;
     width: 20%;
     bottom: 0px;
     z-index: 2;
@@ -117,7 +96,7 @@
   .map_container_r {
     position: absolute;
     right: 0px;
-    top: 60px;
+    top: 40px;
     bottom: 0px;
     width: 20%;
     z-index: 2;
@@ -126,7 +105,7 @@
     backdrop-filter: blur(10px);
     height: 100%;
   }
-  .map_container_b_check{
+  .map_container_b_check {
     position: absolute;
     bottom: 40px;
     height: 60px;
@@ -138,7 +117,6 @@
     position: absolute;
     bottom: 0px;
     backdrop-filter: blur(10px);
-    background: rgba(37, 52, 70, 0.4);
     height: 60px;
     width: 100%;
     z-index: 1;
@@ -146,11 +124,7 @@
     .bottom_content {
       display: inline-block;
       > span {
-        background: linear-gradient(
+       
-          180deg,
-          rgba(0, 193, 153, 0.1) 0%,
-          rgba(0, 239, 151, 0.8) 100%
-        );
         padding: 5px 10px;
         color: #fff;
         margin: 0 10px;

src/pages/home/home.tsx

@@ -4,9 +4,6 @@ import MapContainer from "@/components/map/MapComponent";
 import HomeLeft from "@/pages/home/homeLeft/home_left";
 import HomeRight from "@/pages/home/homeRigrt/home_right";
 import HomeBottom from "@/pages/home/homeBottom/home_bottom";
-import image2 from "@/static/title_line@1x.png";
-import { SettingOutlined } from "@ant-design/icons";
-import { useNavigate } from "react-router";
 import Weather from "./homeLeft/weather";
 import Timer from "./homeLeft/timer";
 import HomeVideo from "./home_video";
@@ -14,7 +11,7 @@ import HomeCheck from "./home_check";
 import Scr from "./scr";
 
 const Home = observer(() => {
-  const navigate = useNavigate();
+  
   return (
     <div className="contents_center">
       <div className="map_container_t">
@@ -22,18 +19,10 @@ const Home = observer(() => {
           <Timer />
         </div>
         <div className="map_container_t_c">
-          <img className="twp on_to" src={image2} alt="" />
           <span>黄水镇微网实格应急处突综合指挥服务平台</span>
-          <img className="twp" src={image2} alt="" />
         </div>
         <div className="map_container_t_r">
           <Weather />
-          <SettingOutlined
-            onClick={() => {
-              navigate("admin/user");
-            }}
-            style={{ fontSize: "1rem", color: "#f9f9f9", cursor: "pointer" }}
-          />
         </div>
       </div>
       <div className="scr">
@@ -50,7 +39,7 @@ const Home = observer(() => {
         <HomeRight />
       </div>
       <div className="map_container_b_check">
-        <HomeCheck />
+        {/* <HomeCheck /> */}
       </div>
       <div className="map_container_b">
         <HomeBottom />

src/pages/home/homeBottom/bot.less

@@ -5,6 +5,9 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  background-image: url("../../../static/bottom.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
 
 .owner_model {

src/pages/home/homeLeft/left.less

@@ -11,13 +11,13 @@
         overflow-y: hidden;
         text-align: center;
         .org_head{
-            background-image: url("../../../static/titie_secend@1x.png");
+            background-image: url("../../../static/sub_title.png");
-            background-size: 100% 50px;
+            background-size: 100% 100%;
             background-repeat: no-repeat;
-            line-height: 60px;
+            line-height: 36px;
-            height: 50px;
+            height: 36px;
             text-align: left;
-            padding-left: 20px;
+            padding-left: 30px;
         }
         .orgin-content{
             display: flex;

src/pages/home/homeLeft/pover.tsx

@@ -22,7 +22,7 @@ const Pover = (props: Store) => {
       },
       grid: {
         top: "10%",
-        bottom: "45%",
+        bottom: "35%",
         right: "5%",
         left: "12%",
       },
@@ -37,6 +37,7 @@ const Pover = (props: Store) => {
           data: data.map((item) => item.count),
           type: "bar",
           barWidth: 10, // 设置柱子粗细
+          color:"#0094FF",
           itemStyle: {
             borderRadius: [5, 5, 0, 0],
           },
@@ -66,6 +67,7 @@ const Pover = (props: Store) => {
         title="力量汇总"
         className="owner_model"
         width={"80%"}
+        height={"700px"}
         open={isModalOpen}
         afterClose={() => {}}
         onOk={() => {}}

src/pages/home/homeLeft/timer.tsx

@@ -20,7 +20,7 @@ const Timer = () => {
       clearInterval(tim);
     };
   }, []);
-  return <span style={{fontSize:"1rem"}}>{times} </span>;
+  return <span style={{fontSize:"1rem",marginTop:"5px",display:"block"}}>{times} </span>;
 };
 
 export default Timer;

src/pages/home/homeLeft/trun_chat_config.ts

@@ -11,7 +11,7 @@ export const trunEchatConfig = (data) => {
                 rotate: 30,
             },
         },
-        grid: { top: "10%", bottom: "45%", right: "5%" },
+        grid: { top: "10%", bottom: "35%", right: "5%" },
         yAxis: {
             type: "value",
             splitLine: {

src/pages/home/homeLeft/weather.tsx

@@ -1,8 +1,10 @@
 import MapUtl from "@/components/map/mapUtil";
 import { useEffect, useState } from "react";
-
+import { SettingOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router";
 const Weather = () => {
   const [wechaer, setWechaer] = useState<any>();
+  const navigate = useNavigate();
   useEffect(() => {
     setTimeout(() => {
       MapUtl.wecherInfo?.getLive("双流区", (err, data) => {
@@ -16,31 +18,31 @@ const Weather = () => {
         flex: "1",
         color: "#fff",
         fontSize: "13px",
-        padding:"10px"
       }}
     >
       <div
         style={{
-          fontSize: ".8rem",
+          fontSize: "1rem",
           display: "flex",
-          justifyContent: "space-between",
+          justifyContent: "end",
           alignItems: "center",
+          marginTop:"5px"
         }}
       >
         <span>天气:{wechaer?.weather}</span>
         <span>风向:{wechaer?.windDirection}</span>
-      </div>
+        <div style={{width:"10px"}}></div>
-      <div
-        style={{
-          fontSize: ".8rem",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
         <span>风级:{wechaer?.windPower}</span>
         <span>湿度:{wechaer?.humidity}</span>
+        <div style={{width:"10px"}}></div>
+        <SettingOutlined
+        onClick={() => {
+          navigate("admin/user");
+        }}
+        style={{ fontSize: "1rem", color: "#f9f9f9", cursor: "pointer" }}
+      />
       </div>
+     
     </div>
   );
 };

src/pages/home/homeRigrt/ac.tsx

@@ -6,11 +6,11 @@ const Ac = (props: Store) => {
   const { homeStore } = props;
 
   const initChart = (data) => {
-    var myChart = echarts.init(document.getElementById("rm"));
+    var myChart = echarts.init(document.getElementById("ac"));
     var option = {
       legend: {
         top: "5%",
-        left:"left",
+        left: "right",
         textStyle: {
           color: "#fff",
         },
@@ -33,17 +33,17 @@ const Ac = (props: Store) => {
       },
       series: [
         {
-          center: ["70%", "40%"],
+          center: ["35%", "40%"],
           name: "Access From",
           type: "pie",
-          radius: ["40%", "60%"],
+          radius: ["30%", "50%"],
-            normal : {
+          normal: {
-              label : {
+            label: {
-                show : false
+              show: false,
-              },
+            },
-              labelLine : {
+            labelLine: {
-                show : false
+              show: false,
-              }
+            },
           },
           label: {
             backgroundColor: "#F6F8FC",
@@ -64,6 +64,6 @@ const Ac = (props: Store) => {
     });
    
   }, [homeStore]);
-  return <div style={{ width: "100%", height: "100%" }} id="rm"></div>;
+  return <div style={{ width: "100%", height: "100%" }} id="ac"></div>;
 };
 export default inject("homeStore")(observer(Ac));

src/pages/home/homeRigrt/pyzx.tsx

@@ -2,11 +2,17 @@ import { inject, observer } from "mobx-react";
 import "./right.less";
 import { Store } from "antd/es/form/interface";
 import { useEffect, useState } from "react";
+import { Modal } from "antd";
+
 const Pyzx = (props: Store) => {
   const { homeStore } = props;
   const [user, setUser] = useState<any>();
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   useEffect(() => {
     homeStore.getAe().then((res) => {
+      res.data?.record.sort((item, item2) => {
+        return item2.scores - item.scores;
+      });
       setUser(res.data?.record);
     });
   }, [homeStore]);
@@ -15,12 +21,15 @@ const Pyzx = (props: Store) => {
     <div className="pyzx">
       {user?.map((item) => {
         return (
-          <div key={item.id} className="pyzx_title">
+          <div
-            <img
+            key={item.id}
-              height={80}
+            className="pyzx_title"
-              src={item.head_img}
+            onClick={() => {
-              alt=""
+              homeStore.getScores(item.identity);
-            />
+              setIsModalOpen(true);
+            }}
+          >
+            <img height={80} src={item.head_img} alt="" />
             <div className="content">
               <div>姓名:{item.user_name}</div>
               <div>总积分:{item.scores}</div>
@@ -30,6 +39,56 @@ const Pyzx = (props: Store) => {
           </div>
         );
       })}
+      <Modal
+        title="积分详情"
+        className="owner_model"
+        width={"60%"}
+        open={isModalOpen}
+        afterClose={() => {}}
+        onOk={() => {}}
+        footer={null}
+        onCancel={() => {
+          setIsModalOpen(false);
+        }}
+      >
+        <div>
+          <p style={{ color: "#fff", fontSize: "16px" }}>总积分：{homeStore.scoreData?.totalScore}</p>
+          <div style={{ color: "#fff", fontSize: "15px" ,display:"flex",justifyContent:"space-between",marginBottom:"10px"}}>
+            <div style={{border:"1px solid #333",padding:"10px",flex:1}}>
+              <span>训练积分汇总 :</span>
+              <span>{homeStore.scoreData?.taskScore}</span>
+              <div style={{height:"10px"}}></div>
+              <div style={{height:"500px"}}>
+                {
+                 homeStore.scoreData?.training?.map((item,index)=>{
+                  return <div key={index} style={{marginBottom:"10px",border:"1px solid #333",padding:"10px"}}>
+                    <div>任务标题：{item.title}</div>
+                    <div>任务描述：{item.desc}</div>
+                    <div>任务积分：{item.score}</div>
+                  </div>
+                 }) 
+                }
+              </div>
+            </div>
+            <div style={{width:"10px"}}></div>
+            <div style={{border:"1px solid #333",padding:"10px",flex:1}}>
+              <span>学习积分汇总 :</span>
+              <span>{homeStore.scoreData?.learnScore}</span>
+              <div style={{height:"10px"}}></div>
+              <div style={{height:"500px",overflow:"auto"}}>
+                {
+                 homeStore.scoreData?.learn?.map((item,index)=>{
+                  return <div key={index} style={{marginBottom:"10px",border:"1px solid #333",padding:"10px"}}>
+                    <div>学习内容：{item.title}</div>
+                    <div>任务积分：{item.score}</div>
+                  </div>
+                 }) 
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };

src/pages/home/homeRigrt/right.less

@@ -10,13 +10,13 @@
     overflow-y: hidden;
     text-align: center;
     .org_head {
-      background-image: url("../../../static/titie_secend@1x.png");
+      background-image: url("../../../static/sub_title.png");
-      background-size: 100% 50px;
+      background-size: 100% 100%;
       background-repeat: no-repeat;
-      line-height: 60px;
+      line-height: 36px;
-      height: 50px;
+      height: 36px;
       text-align: left;
-      padding-left: 20px;
+      padding-left: 30px;
     }
   }
 }

src/pages/home/homeRigrt/wz.tsx

@@ -13,7 +13,7 @@ const Wz = (props: Store) => {
     var option = {
       legend: {
         top: "5%",
-        right: "right",
+        right: "left",
         textStyle: {
           color: "#fff",
         },
@@ -26,13 +26,20 @@ const Wz = (props: Store) => {
           });
           return name + "-" + v;
         },
+        orient: "vertical", // 垂直排列
+        type: "scroll", //分页类型
+        pageIconColor: "#ff781f", //翻页箭头颜色
+        pageTextStyle: {
+          color: "#999", //翻页数字颜色
+        }, //翻页数字设置
+        pageIconSize: 5,
       },
       series: [
         {
           center: ["35%", "40%"],
           name: "Access From",
           type: "pie",
-          radius: ["40%", "60%"],
+          radius: ["30%", "50%"],
           normal: {
             label: {
               show: false,
@@ -45,7 +52,7 @@ const Wz = (props: Store) => {
             backgroundColor: "#F6F8FC",
             borderColor: "#8C8D8E",
             borderWidth: 0,
-            show: true,
+            show: false,
             borderRadius: 4,
           },
           data,

src/pages/home/home_check.tsx

@@ -1,12 +1,18 @@
-import { Radio } from "antd";
+import { Button, DatePicker, message, Modal, Radio, Space } 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";
+import MapContainerTow from "@/components/map/MapComponentTow";
 
 const HomeCheck = (props: Store) => {
-  const { homeStore } = props;
+  const { homeStore ,usrStore} = props;
   const [size, changeSize] = useState("1");
+  const [id, setId] = useState("");
+  const { RangePicker } = DatePicker;
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [times, setTimes] = useState<string[]>([]);
+
   const handleSizeChange = (e: any) => {
     changeSize(e.target.value);
     getUlist(e.target.value);
@@ -15,8 +21,35 @@ const HomeCheck = (props: Store) => {
     setTimeout(() => {
       getUlist("1");
     }, 2000);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const serchSD = () => {
+    if (times.length === 0) {
+      message.error("请选择时间区间");
+      return;
+    }
+    usrStore
+      .getSite({
+        id: id,
+        start_time: times[0],
+        end_time: times[1],
+      })
+      .then((res) => {
+        let data: any = [];
+        if (res.data && res.data.record) {
+          res.data.record.forEach((element) => {
+            data.push([element.long, element.lat]);
+          });
+          if (data.length === 0) {
+            message.info("暂无轨迹数据");
+            return;
+          }
+          if (data.length > 0) {
+            MapUtl.polyline(data);
+          }
+        }
+      });
+  };
 
   const getUlist = (type) => {
     let query = {};
@@ -46,18 +79,58 @@ const HomeCheck = (props: Store) => {
           lat: element.lat,
           title: element.user_name,
           users: element,
+          clicks: (v) => {
+            setId("01JDGZGAKDRK1K5R5AF9JFHCTN")
+            setOpen(true)
+          },
         });
       });
     });
   };
   return (
-    <Radio.Group value={size} onChange={handleSizeChange}>
+    <>
-      <Radio.Button value="1">民兵</Radio.Button>
+      <Radio.Group value={size} onChange={handleSizeChange}>
-      <Radio.Button value="2">网格员</Radio.Button>
+        <Radio.Button value="1">民兵</Radio.Button>
-      <Radio.Button value="3">巡防</Radio.Button>
+        <Radio.Button value="2">网格员</Radio.Button>
-    </Radio.Group>
+        <Radio.Button value="3">巡防</Radio.Button>
+      </Radio.Group>
+      <Modal
+        title={"轨迹回放"}
+        width={"70%"}
+        open={isOpen}
+        centered
+        okText="确定"
+        cancelText="取消"
+        footer={null}
+        destroyOnClose={true}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      >
+        <div>
+          <Space>
+            <RangePicker
+              onChange={(v, s) => {
+                setTimes(s);
+              }}
+            />
+            <Button
+              type="dashed"
+              size="small"
+              onClick={() => {
+                serchSD();
+              }}
+            >
+              查看轨迹信息
+            </Button>
+          </Space>
+          <div style={{ height: "10px" }}></div>
+          <MapContainerTow />
+        </div>
+      </Modal>
+    </>
   );
 };
 
 // export default HomeBottom;
-export default inject("homeStore")(observer(HomeCheck));
+export default inject("homeStore","usrStore")(observer(HomeCheck));

src/pages/poverDetail/index.tsx

@@ -30,11 +30,11 @@ const PoverDetail = (props:Store) => {
           </tr>
           <tr>
             <td >通讯地址</td>
-            <td colSpan={3}>{usrStore.userDetail?.mail_addr}</td>
+            <td colSpan={3}>{usrStore.userDetail?.home_addr}</td>
           </tr>
           <tr>
             <td >联系电话</td>
-            <td >13208266337</td>
+            <td >{usrStore.userDetail?.tel}</td>
             <td >邮箱</td>
             <td colSpan={2}>{usrStore.userDetail?.email}</td>
           </tr>

src/pages/poverPage/index.tsx

@@ -9,11 +9,16 @@ import PoverDetail from "../poverDetail";
 const PoverPage = (props: Store) => {
   const { usrStore } = props;
   const [poverData, setPover] = useState<any>();
+  const [config, setConfig] = useState<any>({
+    militia_type: 1,
+    vet: 1,
+    o_type: "",
+  });
   const initChart = (id: string, count: number, total: number) => {
     var myChart = echarts.init(document.getElementById(id));
     var option = {
       title: {
-        text: "10%",
+        text: count,
         left: "center",
         top: "center",
         textStyle: {
@@ -52,40 +57,52 @@ const PoverPage = (props: Store) => {
   };
   useEffect(() => {
     usrStore.getPover().then((e) => {
-      initChart("pover_jg", e.data.o_type_nums, e.data.total);
+      initChart("pover_jg", e.data.o_type, e.data.total);
-      initChart("pover_jgs", e.data.o_type_num, e.data.total);
+      initChart("pover_jgs", e.data.o_types, e.data.total);
-      initChart("pover1", e.data.a_member, e.data.total);
       setPover(e.data);
     });
   }, [usrStore]);
-
+  const serch = () => {
+    usrStore.getPoverList(config);
+  };
   return (
-    <div style={{ width: "100%", height: "100%" }}>
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignContent: "space-between",
+      }}
+    >
       <div className="nav-header">
-        <div style={{ textAlign: "center" }}>
+        <div style={{ textAlign: "center", marginBottom: "20px" ,cursor:"pointer" }}>
-          <div style={{ width: "150px", height: "100px" }} id="pover_jgs"></div>
+          <div
+            style={{ width: "150px", height: "100px" }}
+            id="pover_jgs"
+            onClick={() => {
+              setConfig({
+                o_type: "01JAZAZDTHJE8FZ24GY9AJ758N",
+                size: 30,
+                offset: 1,
+              });
+              serch();
+            }}
+          ></div>
           <span style={{ color: "#fff" }}>机关单位</span>
         </div>
-        <div className="pv-head-item">
+        <div
-          <SnippetsTwoTone style={{ fontSize: 30 }} />
+          style={{ textAlign: "center", marginBottom: "20px" }}
-          <div>
+          onClick={() => {
-            <div>{poverData?.militia_meber}人</div>
+            setConfig({
-            <span>基干民兵</span>
+              o_type: "01JAZB1GVJED5R34V6Z8MBWER4",
-          </div>
+              size: 30,
-        </div>
+              offset: 1,
-        <div className="pv-head-item">
+            });
-          <SnippetsTwoTone style={{ fontSize: 30 }} />
+            serch();
-          <div>
+          }}
-            <div>{poverData?.easy_meber}人</div>
+        >
-            <span>普通民兵</span>
+          <div style={{ width: "150px", height: "100%" }} id="pover_jg"></div>
-          </div>
+          <span style={{ color: "#fff" }}>企事业单位</span>
-        </div>
-        <div className="pv-head-item">
-          <SnippetsTwoTone style={{ fontSize: 30 }} />
-          <div>
-            <div>{poverData?.vet_meber}人</div>
-            <span>退役军人</span>
-          </div>
         </div>
       </div>
       <div className="nav-content">
@@ -95,16 +112,57 @@ const PoverPage = (props: Store) => {
             usrStore.setPoverDe(false);
           }}
         >
-          <div style={{ textAlign: "center" }}>
+          <div
-            <div style={{ width: "100%", height: "100%" }} id="pover_jg"></div>
+            className="pv-head-item"
-            <span style={{ color: "#fff" }}>企事业单位</span>
+            onClick={(e) => {
+              setConfig({
+                militia_type: 1,
+                size: 30,
+                offset: 1,
+              });
+              serch();
+            }}
+          >
+            <SnippetsTwoTone style={{ fontSize: 30 }} />
+            <div>
+              <div>{poverData?.militia_meber}人</div>
+              <span>基干民兵</span>
+            </div>
           </div>
-          <p></p>
+          <div className="pv-head-item">
-          <div style={{ textAlign: "center"}}>
+            <SnippetsTwoTone style={{ fontSize: 30 }} />
-            <div style={{ width: "100%", height: "100%" }} id="pover1"></div>
+            <div
-            <span style={{ color: "#fff" }}>积极力量</span>
+              onClick={() => {
+                setConfig({
+                  militia_type: 2,
+                  size: 30,
+                  offset: 1,
+                });
+                serch();
+              }}
+            >
+              <div>{poverData?.easy_meber}人</div>
+              <span>普通民兵</span>
+            </div>
+          </div>
+          <div className="pv-head-item">
+            <SnippetsTwoTone style={{ fontSize: 30 }} />
+            <div
+              onClick={() => {
+                setConfig({
+                  vet: 1,
+                  size: 30,
+                  offset: 1,
+                });
+                serch();
+              }}
+            >
+              <div>{poverData?.vet_meber}人</div>
+              <span>退役军人</span>
+            </div>
           </div>
         </div>
+
         <div className="content-right">
           <p style={{ margin: 0, fontSize: "20px", marginBottom: "10px" }}>
             双流区黄水镇人民武装部基干民兵力量

src/pages/poverPage/pv.less

@@ -1,18 +1,17 @@
 .nav-header {
   min-height: 50px;
   padding: 10px;
-  display: flex;
 }
 .nav-content {
   width: 100%;
   height: 100%;
   min-height: 500px;
-  display: flex;
+ 
-  align-items: start;
-  justify-content: space-around;
   .content-left {
-    width: 15%;
     height: 100%;
+    display: flex;
+    align-items: start;
+    justify-content: start;
   }
   .content-right {
     width: 85%;
@@ -43,7 +42,7 @@
   }
 }
 .pv_table {
-  height: 430px;
+  height: 500px;
   .table {
     width: 100%;
     overflow-x: auto;
@@ -61,5 +60,6 @@
         }
       }
     }
+    
   }
 }

src/pages/poverPage/pvTable.tsx

@@ -5,28 +5,26 @@ import { useEffect } from "react";
 const PvTable = (props: Store) => {
   const { teamStore, persMgmtStore, usrStore } = props;
   useEffect(() => {
-    teamStore.getlist();
     persMgmtStore.getlist();
-    usrStore.getlist();
+    usrStore.getPoverList();
-   
+  }, [teamStore, persMgmtStore, usrStore]);
-  }, [teamStore,persMgmtStore,usrStore]);
+  const folders = (id, list) => {
-  const folders = (id,list) => {
+    let has = false;
-    let has = false
+    list.forEach((element) => {
-    list.forEach(element => {
       if (element.team_identity === id) {
-        has = true
+        has = true;
       }
     });
-    return <div>{has?'√':'x'}</div>
+    return <div>{has ? "√" : "x"}</div>;
   };
-  const foldersp = (id,list) => {
+  const foldersp = (id, list) => {
-    let has = false
+    let has = false;
-    list.forEach(element => {
+    list.forEach((element) => {
       if (element.pers_identity === id) {
-        has = true
+        has = true;
       }
     });
-    return <div>{has?'√':'x'}</div>
+    return <div>{has ? "√" : "x"}</div>;
   };
   return (
     <div className="pv_table">
@@ -36,7 +34,6 @@ const PvTable = (props: Store) => {
             <td rowSpan={2}>序号</td>
             <td rowSpan={2}>姓名</td>
             <td rowSpan={2}>政治面貌</td>
-            <td rowSpan={2}>所属集结点</td>
             <td colSpan={teamStore.list?.length ?? 4}>所属队伍</td>
             <td colSpan={persMgmtStore.list?.length ?? 4}>个人身份</td>
           </tr>
@@ -50,23 +47,27 @@ const PvTable = (props: Store) => {
           </tr>
         </thead>
         <tbody>
-          {usrStore.list?.map((us,i) => {
+          {usrStore.poverList?.map((us, i) => {
             return (
-              <tr 
+              <tr
-              key={us.id}
+                key={us.id}
-              onClick={(e) => {
+                onClick={(e) => {
-                usrStore.setUserDetaul(us)
+                  usrStore.setUserDetaul(us);
-                usrStore.setPoverDe(true)
+                  usrStore.setPoverDe(true);
-              }}>
+                }}
-                <td>{i+1}</td>
+              >
-                <td>{us.user_name}</td>
+                <td>{i + 1}</td>
-                <td>{us.political_affil}</td>
+                <td>{us.username}</td>
-                <td>{us.dep_identity}</td>
+                <td>{us.politicalaffils.name}</td>
                 {teamStore.list?.map((e) => {
-                  return <td key={e.identity}>{folders(e.identity,us.team)}</td>;
+                  return (
+                    <td key={e.identity}>{folders(e.identity, us.team)}</td>
+                  );
                 })}
                 {persMgmtStore.list?.map((e) => {
-                   return <td key={e.identity}>{foldersp(e.identity,us.pers)}</td>;
+                  return (
+                    <td key={e.identity}>{foldersp(e.identity, us.pers)}</td>
+                  );
                 })}
               </tr>
             );

src/pages/signin/column.tsx

@@ -65,4 +65,5 @@ export const serchConfig = [
     value: "",
     rules: [],
   },
+   
 ];

src/pages/signin/index.tsx

@@ -1,17 +1,46 @@
-import { Button, FormInstance, Space } from "antd";
+import { Button, Form, FormInstance, Select, Space } from "antd";
 import { inject, observer } from "mobx-react";
 import BTable from "@/components/b_table";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Store } from "antd/lib/form/interface";
 import React from "react";
 import { serchConfig, studyColumns } from "./column";
 import SimpleForm from "@/components/form/simple_form";
+const { Option } = Select;
 
 const Signin = (props: Store) => {
   const { signinStore } = props;
   const serchFormRef = React.useRef<FormInstance>(null);
-  useEffect(() => { 
+  const [tagList, setTagList] = useState<any>([]);
+
+  useEffect(() => {
     signinStore.getlist();
+    setTagList([
+      {
+        id: 0,
+        name: "全部",
+      },
+      {
+        id: 1,
+        name: "网格员",
+      },
+      {
+        id: 2,
+        name: "微网格员",
+      },
+      {
+        id: 3,
+        name: "基干民兵",
+      },
+      {
+        id: 4,
+        name: "普通民兵",
+      },
+      {
+        id: 5,
+        name: "巡防大队",
+      },
+    ]);
   }, [signinStore]);
 
   const onSerchFinish = (values: any) => {
@@ -20,7 +49,7 @@ const Signin = (props: Store) => {
       start_time: values.start_time?.format("YYYY-MM-DD HH:mm"),
       end_time: values.end_time?.format("YYYY-MM-DD HH:mm"),
       page: 1,
-      page_size: 10,
+      page_size: 20,
     };
     signinStore.getlist(query);
   };
@@ -46,6 +75,17 @@ const Signin = (props: Store) => {
             onFinishFailed={onFinishFailed}
           >
             <Space>
+              <Form.Item key="tags" label="身份" name="tags" initialValue={0}>
+                <Select placeholder="">
+                  {tagList?.map((v: any) => {
+                    return (
+                      <Option key={v.id} value={v.id}>
+                        {v.name}
+                      </Option>
+                    );
+                  })}
+                </Select>
+              </Form.Item>
               <Button
                 type="primary"
                 onClick={() => {
@@ -62,18 +102,17 @@ const Signin = (props: Store) => {
               >
                 重置
               </Button>
-              <Button onClick={() => {
+              <Button
-                signinStore.exports();
+                onClick={() => {
-              }}>导出</Button>
+                  signinStore.exports();
+                }}
+              >
+                导出
+              </Button>
             </Space>
           </SimpleForm>
         </Space>
-
+        <BTable store={signinStore} columns={studyColumns} dataSource={signinStore.list}/>
-        <BTable
-          store={signinStore}
-          columns={studyColumns}
-          dataSource={signinStore.list}
-        />
       </Space>
     </div>
   );

src/pages/user/move.tsx

@@ -38,25 +38,10 @@ const Move = (props) => {
  
   return (
     <>
-      <Button
+      <Button type="dashed" size="small" onClick={() => {setOpen(true);}}>
-        type="dashed"
-        size="small"
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
         查看轨迹信息
       </Button>
-
+      <Modal title={"轨迹回放"} width={"70%"} open={isOpen} centered okText="确定" cancelText="取消" footer={null} destroyOnClose={true}
-      <Modal
-        title={"轨迹回放"}
-        width={"70%"}
-        open={isOpen}
-        centered
-        okText="确定"
-        cancelText="取消"
-        footer={null}
-        destroyOnClose={true}
         onCancel={() => {
           setOpen(false);
         }}

src/pages/user/user_config.tsx

@@ -29,6 +29,23 @@ export const defaultConfig =(team,per)=>
     value: 0,
     rules: [{ required: true, message: "请选择性别" }],
   },
+  {
+    type: FormType.radio,
+    label: "视频查看权限",
+    name: "video_permission",
+    radioData: [
+      {
+        key: "有",
+        val: 1,
+      },
+      {
+        key: "无",
+        val: 2,
+      },
+    ],
+    value: 0,
+    rules: [{ required: true, message: "视频查看权限" }],
+  },
   {
     type: FormType.radio,
     label: "是否网格员",
@@ -61,7 +78,7 @@ export const defaultConfig =(team,per)=>
       },
     ],
     value: 0,
-    rules: [],
+    rules: [{ required: true, message: "是否微网格员" }],
   },
   {
     type: FormType.radio,

src/store/home.ts

@@ -3,7 +3,6 @@ import { action, makeObservable, observable } from "mobx";
 import baseHttp from "@/service/base";
 import BaseStore from "./baseStore";
 import { TagDataType } from "@/model/userModel";
-import MapUtl from "@/components/map/mapUtil";
 import Config from "@/util/config";
 
 class HomeConfig {
@@ -15,28 +14,36 @@ class HomeConfig {
     static ae: string = "/v1/public/ae"
     static todo: string = "/v1/public/todo"
     static con: string = "/v1/user/mapMakerUser"
-    
+
     static newTask: string = "/v1/user/newTask"
     static taskulist: string = "/v1/public/taskInUser"
     static deviceList: string = "/api/v1/devicesconfig" //设备列表
     static channerList: string = "/api/v1/channelsconfig" //设备列表
     static channelstream: string = "/api/v1/devices/channelstream" //设备包活
+    static scores: string = "/v1/user/scores"
 
 }
 class HomeStore extends BaseStore<TagDataType> {
+    scoreData = {}
     constructor() {
         super(HomeConfig)
         makeObservable(this, {
             getOgCount: action,
+            scoreData:observable,
             ogMap: observable,
             alist: observable,
             showVideo: observable,
             ulist: observable,
             showVideoHandler: action,
             getTaskUserList: action,
+            getScores: action,
         })
     }
-
+    async getScores(id) {
+        let data = await baseHttp.get(HomeConfig.scores + "/" + id, null)
+        this.scoreData = data.data.record
+        
+    }
     async getOgCount() {
         let res = await baseHttp.get(HomeConfig.os, {});
         this.ogMap = res.data.record
@@ -113,9 +120,9 @@ class HomeStore extends BaseStore<TagDataType> {
                     let res = await this.getChannerStrem(element.device, element.channel)
                     urls.push(Config.videoApis + res.EasyDarwin?.Body.URL)
                 }
-                this.getTaskUserList()
+                // this.getTaskUserList()
                 this.showVideoHandler(true)
-               
+
             }
             return urls;
         } catch (error) {
@@ -126,12 +133,12 @@ class HomeStore extends BaseStore<TagDataType> {
         let res = await baseHttp.get(HomeConfig.taskulist, {});
         if (res.data?.record?.ulist && res.data?.record.ulist.length > 0) {
             res.data?.record?.ulist.forEach(element => {
-                MapUtl.addMaker({
+                // MapUtl.addMaker({
-                    lng: element.long ?? 116.478935,
+                //     lng: element.long ?? 116.478935,
-                    lat: element.lat ?? 39.997761,
+                //     lat: element.lat ?? 39.997761,
-                    title: element.user_name,
+                //     title: element.user_name,
-                    users: element
+                //     users: element
-                })
+                // })
             });
         }
     }

src/store/user.ts

@@ -11,6 +11,7 @@ class UserConfig {
     static DELETE: string = "/v1/user"
     static EDIT: string = "/v1/user"
     static pover: string = "/v1/user/userPower"
+    static poverList: string = "/v1/user/poverList"
     static team: string = "/v1/team/list"
     static per: string = "/v1/persMgmt/list"
     static serch: string = "/v1/user/serch"
@@ -18,12 +19,15 @@ class UserConfig {
     static videoLogin: string = "/api/v1/login"
     static siteList: string = "/v1/user/site"
     static reSetPwd: string = "/v1/user/reSetPwd"
+
 }
 class UserStore extends BaseStore<UserDataType> {
     _userinfo: UserInfos = {}; // 用户信息
     userDetail = {}
+
     isNeedLogin: boolean = false; // 是否需要登录
     poverDetail: boolean = false; // 是否展示民兵详情
+    poverList: any = []
 
     constructor() {
         super(UserConfig)
@@ -35,6 +39,7 @@ class UserStore extends BaseStore<UserDataType> {
             serchUser: action,
             setPoverDe: action,
             setUserDetaul: action,
+            getPoverList: action,
             getPatrol: action,
             getSite: action,
             _userinfo: observable,
@@ -42,12 +47,14 @@ class UserStore extends BaseStore<UserDataType> {
             poverDetail: observable,
             userDetail: observable,
             openLoginDilog: action,
+            poverList: observable,
             userInfo: computed,
         })
     }
     async getTeam() {
         return await baseHttp.get(UserConfig.team, null)
     }
+
     async getPer() {
         return await baseHttp.get(UserConfig.per, null)
     }
@@ -60,17 +67,20 @@ class UserStore extends BaseStore<UserDataType> {
     async getPatrol() {
         return await baseHttp.get(UserConfig.getPatrol, {})
     }
-
+    // 获取坐标点
     async getSite(id) {
         return await baseHttp.put(UserConfig.siteList + "/" + id.id, id)
     }
-
+    // 重置密码
     async reSetPwd(id) {
-     await baseHttp.put(UserConfig.reSetPwd+"/"+id,{})
+        await baseHttp.put(UserConfig.reSetPwd + "/" + id, {})
         message.success("密码重置成功")
     }
-
+    //  获取 力量列表
-
+    async getPoverList(param) {
+        let res = await baseHttp.get(UserConfig.poverList, param)
+        this.poverList = res.data.record
+    }
 
     get userInfo(): UserInfos {
         if (!this._userinfo.token) {

src/util/config.ts

@@ -1,6 +1,6 @@
 class Config {
-    static baseUrl = "https://www.hswzct.cn:12016/";
+    // static baseUrl = "https://www.hswzct.cn:12016/";
-    // static baseUrl = "http://127.0.0.1:12214/";
+    static baseUrl = "http://127.0.0.1:12214/";
     static ws = "wss://www.hswzct.cn:12016/wsadmin?id=admin";
     // static ws = "wss://rw.quwanya.cn/wsadmin?id=admin";
     static userStatic = "https://www.hswzct.cn:12016/api/uploads/user/";
@@ -8,6 +8,3 @@ class Config {
     static videoApis = "https://sprh.hswzct.cn:4443"; // 
 }
 export default Config;
-
-// 1、发布任务的时候选择视频列表 
-// 2、人的数据区分