wang_yp
/
ball_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add animation

This commit is contained in:
wang_yp 2025-03-11 17:26:05 +08:00
parent 07b4f7e193
commit 66dba51bf9
32 changed files with 516 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@ -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") {

46
src/components/map/MapComponentTow.tsx Normal file
View File

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

1
src/components/map/MapFrom.tsx
View File

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

13
src/components/map/mapUtil.ts
View File

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

3
src/index.less
View File

@ -73,6 +73,9 @@ code {
color: #00ef97 !important;
border-color: #00ef97 !important;
}
p{
margin: 0;
}
.owner_model {
padding-bottom: 0px !important;
.ant-modal-content {

52
src/pages/home/home.less
View File

@ -34,46 +34,25 @@
}
.map_container_t {
position: absolute;
height: 60px;
top: 0;
width: 100%;
background-image: url("../../static/head.png");
background-repeat: no-repeat;
backdrop-filter: blur(10px);
background-image: url("../../static/head1.png");
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;
align-items: center;
justify-content: center;
flex: 4;
.title_img {
width: 20px;
height: 20px;
}
img{
width: 100px;
}
.on_to {
transform: rotate(-180deg) rotateY(0deg);
}
.twp {
height: 30px;
}
text-align: center;
flex: 1;
padding: 10px;
font-size: 15px;
> span {
margin-left: 15px;
margin-right: 15px;
color: #fff;
font-size:25px;
font-size: 20px;
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;
@ -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;

15
src/pages/home/home.tsx
View File

@ -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 />

3
src/pages/home/homeBottom/bot.less
View File

@ -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 {

10
src/pages/home/homeLeft/left.less
View File

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

4
src/pages/home/homeLeft/pover.tsx
View File

@ -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={() => {}}

2
src/pages/home/homeLeft/timer.tsx
View File

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

2
src/pages/home/homeLeft/trun_chat_config.ts
View File

@ -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: {

28
src/pages/home/homeLeft/weather.tsx
View File

@ -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={{
fontSize: ".8rem",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div style={{width:"10px"}}></div>
<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>
);
};

16
src/pages/home/homeRigrt/ac.tsx
View File

@ -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: {
label: {
show : false
show: false,
},
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));

71
src/pages/home/homeRigrt/pyzx.tsx
View File

@ -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">
<img
height={80}
src={item.head_img}
alt=""
/>
<div
key={item.id}
className="pyzx_title"
onClick={() => {
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>
);
};

10
src/pages/home/homeRigrt/right.less
View File

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

13
src/pages/home/homeRigrt/wz.tsx
View File

@ -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,

79
src/pages/home/home_check.tsx
View File

@ -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);
@ -17,6 +23,33 @@ const HomeCheck = (props: Store) => {
}, 2000);
// 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.Button value="2">网格员</Radio.Button>
<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));

4
src/pages/poverDetail/index.tsx
View File

@ -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>

130
src/pages/poverPage/index.tsx
View File

@ -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_jgs", e.data.o_type_num, e.data.total);
initChart("pover1", e.data.a_member, e.data.total);
initChart("pover_jg", e.data.o_type, e.data.total);
initChart("pover_jgs", e.data.o_types, 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={{ width: "150px", height: "100px" }} id="pover_jgs"></div>
<div style={{ textAlign: "center", marginBottom: "20px" ,cursor:"pointer" }}>
<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">
<SnippetsTwoTone style={{ fontSize: 30 }} />
<div>
<div>{poverData?.militia_meber}人</div>
<span>基干民兵</span>
</div>
</div>
<div className="pv-head-item">
<SnippetsTwoTone style={{ fontSize: 30 }} />
<div>
<div>{poverData?.easy_meber}人</div>
<span>普通民兵</span>
</div>
</div>
<div className="pv-head-item">
<SnippetsTwoTone style={{ fontSize: 30 }} />
<div>
<div>{poverData?.vet_meber}人</div>
<span>退役军人</span>
</div>
<div
style={{ textAlign: "center", marginBottom: "20px" }}
onClick={() => {
setConfig({
o_type: "01JAZB1GVJED5R34V6Z8MBWER4",
size: 30,
offset: 1,
});
serch();
}}
>
<div style={{ width: "150px", height: "100%" }} id="pover_jg"></div>
<span style={{ color: "#fff" }}>企事业单位</span>
</div>
</div>
<div className="nav-content">
@ -95,16 +112,57 @@ const PoverPage = (props: Store) => {
usrStore.setPoverDe(false);
}}
>
<div style={{ textAlign: "center" }}>
<div style={{ width: "100%", height: "100%" }} id="pover_jg"></div>
<span style={{ color: "#fff" }}>企事业单位</span>
</div>
<p></p>
<div style={{ textAlign: "center"}}>
<div style={{ width: "100%", height: "100%" }} id="pover1"></div>
<span style={{ color: "#fff" }}>积极力量</span>
<div
className="pv-head-item"
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>
<div className="pv-head-item">
<SnippetsTwoTone style={{ fontSize: 30 }} />
<div
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" }}>
双流区黄水镇人民武装部基干民兵力量

12
src/pages/poverPage/pv.less
View File

@ -1,18 +1,17 @@
.nav-header {
min-height: 50px;
padding: 10px;
display: flex;
}
.nav-content {
width: 100%;
height: 100%;
min-height: 500px;
.content-left {
height: 100%;
display: flex;
align-items: start;
justify-content: space-around;
.content-left {
width: 15%;
height: 100%;
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 @@
}
}
}
}
}

43
src/pages/poverPage/pvTable.tsx
View File

@ -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]);
const folders = (id, list) => {
let has = false
list.forEach(element => {
let has = false;
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) => {
let has = false
list.forEach(element => {
let has = false;
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
key={us.id}
onClick={(e) => {
usrStore.setUserDetaul(us)
usrStore.setPoverDe(true)
}}>
usrStore.setUserDetaul(us);
usrStore.setPoverDe(true);
}}
>
<td>{i + 1}</td>
<td>{us.user_name}</td>
<td>{us.political_affil}</td>
<td>{us.dep_identity}</td>
<td>{us.username}</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>
);

1
src/pages/signin/column.tsx
View File

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

61
src/pages/signin/index.tsx
View File

@ -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);
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
onClick={() => {
signinStore.exports();
}}>导出</Button>
}}
>
导出
</Button>
</Space>
</SimpleForm>
</Space>
<BTable
store={signinStore}
columns={studyColumns}
dataSource={signinStore.list}
/>
<BTable store={signinStore} columns={studyColumns} dataSource={signinStore.list}/>
</Space>
</div>
);

19
src/pages/user/move.tsx
View File

@ -38,25 +38,10 @@ const Move = (props) => {
return (
<>
<Button
type="dashed"
size="small"
onClick={() => {
setOpen(true);
}}
>
<Button 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);
}}

19
src/pages/user/user_config.tsx
View File

@ -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,

BIN
src/static/bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

BIN
src/static/head1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
src/static/sub_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

23
src/store/home.ts
View File

@ -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 {
@ -21,22 +20,30 @@ class HomeConfig {
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,7 +120,7 @@ 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)
}
@ -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({
lng: element.long ?? 116.478935,
lat: element.lat ?? 39.997761,
title: element.user_name,
users: element
})
// MapUtl.addMaker({
// lng: element.long ?? 116.478935,
// lat: element.lat ?? 39.997761,
// title: element.user_name,
// users: element
// })
});
}
}

18
src/store/user.ts
View File

@ -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, {})
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) {

7
src/util/config.ts
View File

@ -1,6 +1,6 @@
class Config {
static baseUrl = "https://www.hswzct.cn:12016/";
// static baseUrl = "http://127.0.0.1:12214/";
// static baseUrl = "https://www.hswzct.cn:12016/";
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、人的数据区分