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

fix(amap):core

This commit is contained in:
wang_yp 2024-10-14 11:43:18 +08:00
parent 4a7f57bb3c
commit b62973648b
14 changed files with 369 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.tsx
View File

@ -7,23 +7,29 @@ const onMessage = (e: any) => {
let data = JSON.parse(e);
if (data.type === "accpt") {
let body = JSON.parse(data.content.body);
console.log(body);
MapUtl.addMaker({
lng: 103.55,
lat: 30.342,
title: body?.user_name,
users: body,
});
} else if (data.type === "move") {
let maker: any = null;
let body = JSON.parse(data.content.body);
MapUtl.makerList?.forEach((e) => {
if (e.userIdentity === body?.user_identity) {
maker = e.marker;
}
});
maker?.setPosition([body.long, body.lat]);
}
};
console.log("init");
socketService.on("message", onMessage);
const App = () => {
useEffect(() => {
return () => {
console.log("uninstall");
socketService.off("message", onMessage);
};
}, []);

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

@ -1,5 +1,9 @@
interface makersInf {
userIdentity:string,
marker:any
}
class MapUtl {
static makerList: any[] = [];
static makerList: makersInf[] = [];
static amap: any = null;
static loadMap: any = null;
static wecherInfo: any = null;
@ -25,6 +29,11 @@ class MapUtl {
infoWindow.open(MapUtl.amap, e.target.getPosition());
});
MapUtl.amap?.add(marker);
// 将maker添加到数组
MapUtl.makerList.push({
userIdentity:users.identity,
marker:marker
})
}
static setMakericon = (maker) => {
maker.setPosition([103.55, 30.342]);

3
src/index.less
View File

@ -82,14 +82,13 @@ code {
background-repeat: no-repeat; /* 确保图片不会重复 */
padding-bottom: 0px;
.ant-modal-header {
padding: 30px 30px;
color: rgba(0, 0, 0, 0.85);
background: none;
border-bottom: 0px solid #f0f0f0;
align-items: center;
padding-left: 40px;
position: relative;
top: -38px;
top: -10px;
left: -30px;
.ant-modal-title {
color: #fff;

22
src/pages/OrgChart.tsx
View File

@ -3,15 +3,17 @@ import "./org_chart.less";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { orgData } from "./org_config";
import PoverDetail from "./poverDetail";
const OrgChartSelf = (props: Store) => {
const { depStore } = props;
const [data, setOrgData] = useState([]);
const [detail, setDetail] = useState(false);
useEffect(() => {
depStore.getOrg().then((res) => {
// setOrgData(res.data.record)
// setOrgData(orgData);
});
}, []);
}, [depStore]);
const getArrayDepth = (arr) => {
let maxDepth = 0;
@ -55,6 +57,14 @@ const OrgChartSelf = (props: Store) => {
};
const renderTree = (list: Array<any>) => {
return (
<>
{detail ? (
<div style={{height:"600px",overflowX:"auto",color:"#fff"}} onClick={() => {
setDetail(false)
}}>
<PoverDetail />
</div>
) : (
<div className="orgsBox">
{list?.map((v, _) => {
if (v.children) {
@ -132,7 +142,13 @@ const OrgChartSelf = (props: Store) => {
>
{v.users?.map((v1, _) => {
return (
<div key={v1.user_name} className="userNmaeBox">
<div
key={v1.user_name}
className="userNmaeBox"
onClick={() => {
setDetail(true);
}}
>
<img
height={60}
style={{
@ -151,6 +167,8 @@ const OrgChartSelf = (props: Store) => {
);
})}
</div>
)}
</>
);
};
return <div className="org_sc">{renderTree(orgData)}</div>;

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

@ -9,7 +9,7 @@ import { SettingOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router";
import { useEffect, useState } from "react";
import MapUtl from "@/components/map/mapUtil";
import ReactPlayer from "react-player";
import Video from "./video";
const Home = observer(() => {
const navigate = useNavigate();
@ -87,14 +87,7 @@ const Home = observer(() => {
</div>
<MapContainer />
<div className="map_video_container">
{/* <ReactPlayer
className="react-player"
url="https://www.119.gov.cn/images/qmxfxw/expd/2024/07/01/1719818550990010367.mp4" //地址
width="100%" //宽度
height="100%" //高度
playing={true} //是否自动播放
controls //控制
/> */}
<Video />
</div>
<div className="map_container_r">
<HomeRight />

104
src/pages/home/homeBottom/dispath.tsx
View File

@ -1,6 +1,14 @@
import SimpleForm from "@/components/form/simple_form";
import { traningConfig } from "@/pages/training/traning_config";
import { Button, Form, FormInstance, Modal, Select } from "antd";
import {
Button,
Form,
FormInstance,
InputNumber,
Modal,
Select,
SelectProps,
} from "antd";
import React from "react";
import { useState } from "react";
import baseHttp from "@/service/base";
@ -8,10 +16,17 @@ import "./bot.less";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { FormType } from "@/components/form/interface";
import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
const { Option } = Select;
const Dispath = (props: Store) => {
const { trainingStore, trainingCatStore } = props;
const formRef = React.useRef<FormInstance>(null);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const [projectConfig, setProjectConfig] = useState<any>([]);
const [stashList, setStashList] = useState<any>([]);
const [userList, setUserList] = useState<any>([]);
const [data, setData] = useState<SelectProps["options"]>([]);
const openDispatch = async () => {
await getList();
setIsModalOpen(true);
@ -48,13 +63,8 @@ const Dispath = (props: Store) => {
setIsModalOpen(false);
};
const handleSubmit = () => {
setIsModalOpen(false);
formRef.current?.submit();
};
const formRef = React.useRef<FormInstance>(null);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const [projectConfig, setProjectConfig] = useState<any>([]);
const [stashList, setStashList] = useState<any>([]);
const [userList, setUserList] = useState<any>([]);
const onFinish = (values: any) => {
let data = {
@ -65,11 +75,25 @@ const Dispath = (props: Store) => {
trainingStore.add(data);
setIsModalOpen(false);
};
const handleSearch = (newValue: string) => {
if (newValue === "") return;
baseHttp.get("/supplies/list/serch", { name: newValue }).then((res) => {
let data = res.data?.record ?? [];
data.forEach((item) => {
item.text = item.name;
item.value = item.identity;
});
setData(data ?? []);
});
};
const handleChange = (newValue: string) => {
// setValue(newValue);
};
return (
<>
<span onClick={openDispatch}>巡防调度</span>
<span onClick={openDispatch}>训练任务</span>
<Modal
title={"发布调度任务"}
title={"发布训练任务"}
className="owner_model"
width={800}
open={isModalOpen}
@ -124,6 +148,68 @@ const Dispath = (props: Store) => {
})}
</Select>
</Form.Item>
<Form.List name="supplies_list">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<div style={{ position: "relative" }}>
<Form.Item
{...restField}
label={"物资"}
name={[name, "supplies_identity"]}
rules={[{ required: true, message: "请选择物资" }]}
>
<Select
showSearch
placeholder={props.placeholder}
style={props.style}
defaultActiveFirstOption={false}
suffixIcon={null}
filterOption={false}
onSearch={handleSearch}
onChange={handleChange}
notFoundContent={null}
options={(data || []).map((d) => ({
value: d.value,
label: d.text,
}))}
/>
</Form.Item>
<Form.Item
{...restField}
name={[name, "num"]}
label={"数量"}
rules={[
{ required: true, message: "请输入物资数量" },
]}
>
<InputNumber placeholder="请输入物资数量" />
</Form.Item>
<MinusCircleOutlined
style={{
position: "absolute",
right: "10px",
bottom: "20px",
}}
onClick={() => remove(name)}
/>
</div>
))}
<Form.Item>
<div style={{ textAlign: "center" }}>
<Button
style={{ width: 300 }}
type="dashed"
onClick={() => add()}
block
>
添加物资
</Button>
</div>
</Form.Item>
</>
)}
</Form.List>
</>
</SimpleForm>
</div>

5
src/pages/home/homeBottom/emr.tsx
View File

@ -17,7 +17,7 @@ import { EmConfig } from "@/pages/emergency/em_column";
import { inject, observer } from "mobx-react";
const Emr = (props: Store) => {
const { emergencyStore } = props;
const { emergencyStore,homeStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const formRef = React.useRef<FormInstance>(null);
const [projectConfig, setProjectConfig] = useState<any>([]);
@ -37,6 +37,7 @@ const Emr = (props: Store) => {
};
emergencyStore.add(data);
setIsModalOpen(false);
homeStore.getNewTask()
};
const handleSearch = (newValue: string) => {
if (newValue === "") return;
@ -150,4 +151,4 @@ const Emr = (props: Store) => {
);
};
export default inject("emergencyStore")(observer(Emr));
export default inject("emergencyStore","homeStore")(observer(Emr));

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

@ -5,16 +5,17 @@ import { Modal } from "antd";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
const Orgin = (props:Store) => {
const {homeStore} = props;
const Orgin = (props: Store) => {
const { homeStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
useEffect(()=>{
homeStore.getOgCount()
},[homeStore])
useEffect(() => {
homeStore.getOgCount();
}, [homeStore]);
const showModal = () => {
setIsModalOpen(true);
};
const handleCancel = () => {
setIsModalOpen(false);
};
@ -22,12 +23,12 @@ const Orgin = (props:Store) => {
<>
<div className="orgin-content" onClick={showModal}>
<div className="po">
<span>{homeStore.ogMap?.count??0}</span>
<span>{homeStore.ogMap?.count ?? 0}</span>
<img src={origin} alt="" />
<p>党组织数量</p>
</div>
<div className="po">
<span>{homeStore.ogMap?.member_count??0}</span>
<span>{homeStore.ogMap?.member_count ?? 0}</span>
<img src={origin2} alt="" />
<p>党员数量</p>
</div>

125
src/pages/home/homeRigrt/kanban.tsx
View File

@ -12,43 +12,16 @@ const KanBan = () => {
series: [
{
type: "gauge",
center: ["40%", "70%"],
center: ["50%", "70%"],
startAngle: 200,
endAngle: -20,
radius:70,
min: 0,
max: 30,
splitNumber: 12,
itemStyle: {
color: "#FFAB91",
},
progress: {
show: true,
width: 20,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 15,
},
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: "#999",
},
},
splitLine: {
distance: -42,
length: 14,
lineStyle: {
width: 3,
color: "#999",
},
},
axisLabel: {
distance: -20,
color: "#999",
@ -58,7 +31,7 @@ const KanBan = () => {
show: false,
},
title: {
show: false,
show: true,
},
detail: {
valueAnimation: true,
@ -79,8 +52,9 @@ const KanBan = () => {
},
{
type: "gauge",
center: ["40%", "70%"],
center: ["50%", "70%"],
startAngle: 200,
radius:70,
endAngle: -20,
min: 0,
max: 60,
@ -89,7 +63,7 @@ const KanBan = () => {
},
progress: {
show: true,
width: 8,
width: 6,
},
pointer: {
show: false,
@ -129,11 +103,18 @@ const KanBan = () => {
series: [
{
type: "pie",
radius: [40, 80],
radius: [30, 80],
center: ["50%", "50%"],
itemStyle: {
borderRadius: 2,
},
label: {
normal: {
show: true,
position: "inner",
formatter: "{b}:{c}",
},
},
data: [
{ value: 40, name: "第三方" },
{ value: 18, name: "购买" },
@ -144,12 +125,82 @@ const KanBan = () => {
};
option && myChart.setOption(option);
};
const guoqi = (id: string) => {
var myChart = echarts.init(document.getElementById(id));
var option = {
legend: {
top: "bottom",
show: false,
},
series: [
{
type: "pie",
radius: [30, 80],
center: ["50%", "50%"],
itemStyle: {
borderRadius: 2,
},
label: {
normal: {
show: true,
position: "inner",
formatter: "{b}:{c}",
},
},
data: [
{ value: 40, name: "即将过期" },
{ value: 18, name: "已经过期" },
{ value: 18, name: "未过期" },
],
},
],
};
option && myChart.setOption(option);
};
const outin = (id: string) => {
var myChart = echarts.init(document.getElementById(id));
var option = {
legend: {
top: "bottom",
show: false,
},
series: [
{
type: "pie",
radius: [30, 80],
center: ["50%", "50%"],
itemStyle: {
borderRadius: 2,
},
label: {
normal: {
show: true,
position: "inner",
formatter: "{b}:{c}",
},
},
data: [
{ value: 40, name: "出库" },
{ value: 18, name: "入库" },
],
},
],
};
option && myChart.setOption(option);
};
const gailan = () => {
var myChart = echarts.init(document.getElementById("gailan"));
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
data: [
"个人携行",
"反恐维稳",
"反恐维稳",
"地震救援",
"防汛抗洪",
"灭火救援",
],
axisLabel: {
show: true,
interval: 0,
@ -165,7 +216,7 @@ const KanBan = () => {
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: [820, 932, 901, 934, 1290, 1330],
type: "line",
smooth: true,
areaStyle: {
@ -189,8 +240,8 @@ const KanBan = () => {
useEffect(() => {
initChart();
sourece("sourece");
sourece("yujing");
sourece("baozhiqi");
guoqi("yujing");
outin("baozhiqi");
sourece("level");
gailan();
}, []);

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

@ -18,7 +18,7 @@ const Pyzx = (props: Store) => {
<div key={item.id} className="pyzx_title">
<img
height={80}
src="https://img0.baidu.com/it/u=2135939479,1633462316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
src={item.head_img}
alt=""
/>
<div className="content">

29
src/pages/home/video.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect } from "react";
import ReactPlayer from "react-player";
const Video = (props: Store) => {
const { homeStore } = props;
useEffect(() => {
homeStore.getNewTask();
}, [homeStore]);
return (
<>
{homeStore.showVideo ? (
<ReactPlayer
className="react-player"
url="https://www.119.gov.cn/images/qmxfxw/expd/2024/07/01/1719818550990010367.mp4" //地址
width="100%" //宽度
height="100%" //高度
playing={true} //是否自动播放
controls //控制
/>
) : (
<></>
)}
</>
);
};
export default inject("homeStore")(observer(Video));

4
src/pages/org_config.ts
View File

@ -59,7 +59,7 @@ export const orgData = [
},
{
position: "战士",
user_name: "王小四7",
user_name: "wang_yp",
userId: 13,
},
],
@ -226,7 +226,7 @@ export const orgData = [
},
{
position: "战士",
user_name: "王小五",
user_name: "wang_yp",
userId: 13,
},
],

15
src/store/home.ts
View File

@ -11,8 +11,7 @@ class HomeConfig {
static mm: string = "public/mm"
static rm: string = "public/rm"
static ae: string = "public/ae"
static newTask: string = "user/newTask"
}
class HomeStore extends BaseStore<TagDataType> {
constructor() {
@ -21,6 +20,8 @@ class HomeStore extends BaseStore<TagDataType> {
getOgCount: action,
ogMap: observable,
alist: observable,
showVideo: observable,
showVideoHandler: action,
})
}
@ -44,7 +45,17 @@ class HomeStore extends BaseStore<TagDataType> {
async getAe() {
return await baseHttp.get(HomeConfig.ae, {});
}
async getNewTask() {
let res = await baseHttp.get(HomeConfig.newTask, {});
if (res.data?.record) {
this.showVideoHandler(true)
}
}
showVideoHandler(status) {
this.showVideo = status
}
ogMap!: Object;
showVideo!: boolean;
alist!: Array<any>;
}
const homeStore = new HomeStore()

14
src/util/config.ts
View File

@ -1,13 +1,11 @@
class Config {
// static baseUrl = "https://rw.quwanya.cn/";
// static uploadUrl = "https://rw.quwanya.cn/";
// static ws = "wss://rw.quwanya.cn/ws";
static ws = "ws://127.0.0.1:12214/ws?id=admin";
static baseUrl = "http://127.0.0.1:12214/";
static uploadUrl = "http://127.0.0.1:12214/";
static baseUrl = "https://rw.quwanya.cn/";
static uploadUrl = "https://rw.quwanya.cn/";
static ws = "wss://rw.quwanya.cn/wsadmin?id=admin";
static rtc = "wss://rw.quwanya.cn/ws";
// static ws = "ws://127.0.0.1:12214/ws?id=admin";
// static baseUrl = "http://127.0.0.1:12214/";
// static uploadUrl = "http://127.0.0.1:12214/";
}
export default Config;