dilog
This commit is contained in:
parent
fa2023f223
commit
2f686df09c
|
|
@ -18,24 +18,40 @@ export default function MapContainer() {
|
||||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
plugins: ["AMap.Scale"],
|
plugins: ["AMap.Scale"],
|
||||||
});
|
});
|
||||||
|
|
||||||
amap = new Amap.Map("container", {
|
amap = new Amap.Map("container", {
|
||||||
viewMode: "2D", // 是否为3D地图模式
|
viewMode: "2D", // 是否为3D地图模式
|
||||||
zoom: 11, // 初始化地图级别
|
zoom: 11, // 初始化地图级别
|
||||||
center: [103.55, 30.34], // 初始化地图中心点位置
|
center: [103.55, 30.34], // 初始化地图中心点位置
|
||||||
mapStyle: "amap://styles/darkblue",
|
mapStyle: "amap://styles/darkblue",
|
||||||
|
resizeEnable: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
setmaps(amap);
|
setmaps(amap);
|
||||||
addMaket(Amap);
|
addMaket(Amap,amap);
|
||||||
|
amap.setFitView();
|
||||||
};
|
};
|
||||||
const addMaket = (m) => {
|
const addMaket = (m,mp) => {
|
||||||
const marker = new m.Marker({
|
const marker = new m.Marker({
|
||||||
position: new m.LngLat(103.55, 30.34),
|
position: new m.LngLat(103.55, 30.34),
|
||||||
title: "黄水",
|
title: "黄水",
|
||||||
});
|
});
|
||||||
//将创建的点标记添加到已有的地图实例：
|
|
||||||
|
var content = [
|
||||||
|
"<div><b>高德软件有限公司</b>",
|
||||||
|
"电话 : 010-84107000 邮编 : 100102",
|
||||||
|
"地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
|
||||||
|
];
|
||||||
|
var infoWindow = new m.InfoWindow({
|
||||||
|
offset: new m.Pixel(0, -30),
|
||||||
|
autoMove: true,
|
||||||
|
content: content.join("<br/>"),
|
||||||
|
});
|
||||||
|
marker.on("click", (e) => {
|
||||||
|
infoWindow.open(mp, e.target.getPosition());
|
||||||
|
});
|
||||||
amap.add(marker);
|
amap.add(marker);
|
||||||
MapUtl.makerList.push(marker)
|
|
||||||
|
MapUtl.makerList.push(marker);
|
||||||
MapUtl.amap = m;
|
MapUtl.amap = m;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
|
<title>给多个点添加信息窗体</title>
|
||||||
|
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
|
||||||
|
<script type="text/javascript"
|
||||||
|
src="https://webapi.amap.com/maps?v=2.0&key=d58999d072ed7e5897d3900a769cfda0"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="container"></div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
//初始化地图对象，加载地图
|
||||||
|
var map = new AMap.Map("container", {
|
||||||
|
resizeEnable: true,
|
||||||
|
mapStyle: "amap://styles/darkblue",
|
||||||
|
center: [103.55, 30.34],
|
||||||
|
viewMode: "2D", // 是否为3D地图模式
|
||||||
|
zoom: 11, // 初始化地图级别
|
||||||
|
});
|
||||||
|
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
|
||||||
|
var marker = new AMap.Marker({
|
||||||
|
position: [103.55, 30.34],
|
||||||
|
map: map
|
||||||
|
});
|
||||||
|
marker.content = '我是第1个Marker';
|
||||||
|
marker.on('click', markerClick);
|
||||||
|
marker.emit('click', { target: marker });
|
||||||
|
function markerClick(e) {
|
||||||
|
infoWindow.setContent(e.target.content);
|
||||||
|
infoWindow.open(map, e.target.getPosition());
|
||||||
|
}
|
||||||
|
map.setFitView();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { FormType } from "@/components/form/interface";
|
||||||
|
|
||||||
|
export const EmConfig = (userList) => [
|
||||||
|
{
|
||||||
|
type: FormType.input,
|
||||||
|
label: "处突名称",
|
||||||
|
name: "emergency_name",
|
||||||
|
value: "",
|
||||||
|
rules: [{ required: true, message: "请输入处突名称!" }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: FormType.input,
|
||||||
|
label: "任务描述",
|
||||||
|
name: "desc",
|
||||||
|
value: "",
|
||||||
|
rules: [{ required: true, message: "请输入任务描述!" }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: FormType.input,
|
||||||
|
label: "目标位置",
|
||||||
|
name: "target_location",
|
||||||
|
value: "",
|
||||||
|
rules: [{ required: true, message: "请输入任务描述!" }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: FormType.map,
|
||||||
|
label: "坐标信息",
|
||||||
|
name: "marker",
|
||||||
|
value: "",
|
||||||
|
rules: [{ required: true, message: "请输入任务描述!" }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: FormType.cehckboxGroup,
|
||||||
|
label: "参与人员选择",
|
||||||
|
name: "user_id",
|
||||||
|
value: [],
|
||||||
|
checkboxData: userList,
|
||||||
|
rules: [{ required: true, message: "请选择参与人员!" }],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -16,9 +16,9 @@ import { UserDataType } from "@/model/userModel";
|
||||||
import { Store } from "antd/lib/form/interface";
|
import { Store } from "antd/lib/form/interface";
|
||||||
import SimpleForm from "@/components/form/simple_form";
|
import SimpleForm from "@/components/form/simple_form";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { FormType } from "@/components/form/interface";
|
|
||||||
import baseHttp from "@/service/base";
|
import baseHttp from "@/service/base";
|
||||||
import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
|
import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
|
||||||
|
import { EmConfig } from "./em_column";
|
||||||
|
|
||||||
const Emergency = (props: Store) => {
|
const Emergency = (props: Store) => {
|
||||||
const { emergencyStore } = props;
|
const { emergencyStore } = props;
|
||||||
|
|
@ -87,7 +87,7 @@ const Emergency = (props: Store) => {
|
||||||
emergencyStore.deleteItem(record.identity);
|
emergencyStore.deleteItem(record.identity);
|
||||||
};
|
};
|
||||||
const edit = (record) => {
|
const edit = (record) => {
|
||||||
setProjectConfig(defaultConfig);
|
setProjectConfig(EmConfig(userList));
|
||||||
|
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
formRef.current?.setFieldsValue(record);
|
formRef.current?.setFieldsValue(record);
|
||||||
|
|
@ -118,44 +118,7 @@ const Emergency = (props: Store) => {
|
||||||
setUserList(data ?? []);
|
setUserList(data ?? []);
|
||||||
});
|
});
|
||||||
}, [emergencyStore]);
|
}, [emergencyStore]);
|
||||||
const defaultConfig = [
|
|
||||||
{
|
|
||||||
type: FormType.input,
|
|
||||||
label: "处突名称",
|
|
||||||
name: "emergency_name",
|
|
||||||
value: "",
|
|
||||||
rules: [{ required: true, message: "请输入处突名称!" }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: FormType.input,
|
|
||||||
label: "任务描述",
|
|
||||||
name: "desc",
|
|
||||||
value: "",
|
|
||||||
rules: [{ required: true, message: "请输入任务描述!" }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: FormType.input,
|
|
||||||
label: "目标位置",
|
|
||||||
name: "target_location",
|
|
||||||
value: "",
|
|
||||||
rules: [{ required: true, message: "请输入任务描述!" }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: FormType.map,
|
|
||||||
label: "坐标信息",
|
|
||||||
name: "marker",
|
|
||||||
value: "",
|
|
||||||
rules: [{ required: true, message: "请输入任务描述!" }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: FormType.cehckboxGroup,
|
|
||||||
label: "参与人员选择",
|
|
||||||
name: "user_id",
|
|
||||||
value: [],
|
|
||||||
checkboxData: userList,
|
|
||||||
rules: [{ required: true, message: "请选择参与人员!" }],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const onFinishFailed = () => {};
|
const onFinishFailed = () => {};
|
||||||
const handleSearch = (newValue: string) => {
|
const handleSearch = (newValue: string) => {
|
||||||
if (newValue === "") return;
|
if (newValue === "") return;
|
||||||
|
|
@ -180,7 +143,7 @@ const Emergency = (props: Store) => {
|
||||||
<Button
|
<Button
|
||||||
type="default"
|
type="default"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setProjectConfig(defaultConfig);
|
setProjectConfig(EmConfig(userList));
|
||||||
setId(null);
|
setId(null);
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import SimpleForm from "@/components/form/simple_form";
|
import SimpleForm from "@/components/form/simple_form";
|
||||||
import { traningConfig } from "@/pages/training/traning_config";
|
import { traningConfig } from "@/pages/training/traning_config";
|
||||||
import { Button, Form, FormInstance, Modal, Select } from "antd";
|
import { Button, Form, FormInstance, Modal, Select } from "antd";
|
||||||
import React, { useEffect } from "react";
|
import React from "react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import baseHttp from "@/service/base";
|
import baseHttp from "@/service/base";
|
||||||
import "./bot.less";
|
import "./bot.less";
|
||||||
|
|
@ -12,7 +12,8 @@ const { Option } = Select;
|
||||||
|
|
||||||
const Dispath = (props: Store) => {
|
const Dispath = (props: Store) => {
|
||||||
const { trainingStore, trainingCatStore } = props;
|
const { trainingStore, trainingCatStore } = props;
|
||||||
const openDispatch = () => {
|
const openDispatch = async () => {
|
||||||
|
await getList();
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
setProjectConfig([
|
setProjectConfig([
|
||||||
...traningConfig,
|
...traningConfig,
|
||||||
|
|
@ -26,19 +27,7 @@ const Dispath = (props: Store) => {
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
const handleCancle = () => {
|
const getList = async () => {
|
||||||
setIsModalOpen(false);
|
|
||||||
};
|
|
||||||
const handleSubmit = () => {
|
|
||||||
setIsModalOpen(false);
|
|
||||||
};
|
|
||||||
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>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
try {
|
try {
|
||||||
trainingCatStore.getlist().then(() => {
|
trainingCatStore.getlist().then(() => {
|
||||||
setStashList(trainingCatStore.list);
|
setStashList(trainingCatStore.list);
|
||||||
|
|
@ -54,7 +43,18 @@ const Dispath = (props: Store) => {
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
}, [trainingCatStore]);
|
};
|
||||||
|
const handleCancle = () => {
|
||||||
|
setIsModalOpen(false);
|
||||||
|
};
|
||||||
|
const handleSubmit = () => {
|
||||||
|
setIsModalOpen(false);
|
||||||
|
};
|
||||||
|
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) => {
|
const onFinish = (values: any) => {
|
||||||
let data = {
|
let data = {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { Modal } from "antd";
|
import { Modal } from "antd";
|
||||||
import { Store } from "antd/es/form/interface";
|
import { Store } from "antd/es/form/interface";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import "./bot.less";
|
import "./bot.less";
|
||||||
import { PhoneTwoTone } from "@ant-design/icons";
|
import { PhoneTwoTone } from "@ant-design/icons";
|
||||||
import { webRTC } from "@/util/webRtc";
|
import { webRTC } from "@/util/webRtc";
|
||||||
|
|
@ -10,14 +10,16 @@ const Ec = (props: Store) => {
|
||||||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||||||
const { usrStore } = props;
|
const { usrStore } = props;
|
||||||
const [userList, setUserList] = useState<any>([]);
|
const [userList, setUserList] = useState<any>([]);
|
||||||
useEffect(() => {
|
const openDispatch = () => {
|
||||||
|
try {
|
||||||
usrStore.getlist().then(() => {
|
usrStore.getlist().then(() => {
|
||||||
setUserList(usrStore.list);
|
setUserList(usrStore.list);
|
||||||
webRTC.init();
|
webRTC.init();
|
||||||
});
|
|
||||||
}, [usrStore]);
|
|
||||||
const openDispatch = () => {
|
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
const callphone = (record: any) => {
|
const callphone = (record: any) => {
|
||||||
webRTC.calls(record.identity);
|
webRTC.calls(record.identity);
|
||||||
|
|
@ -64,7 +66,10 @@ const Ec = (props: Store) => {
|
||||||
</div>
|
</div>
|
||||||
<div className="ec_right">
|
<div className="ec_right">
|
||||||
<div style={{ display: "flex" }}>
|
<div style={{ display: "flex" }}>
|
||||||
<video id="rtcVideo" style={{ width: "300px", height: "300px" }}></video>
|
<video
|
||||||
|
id="rtcVideo"
|
||||||
|
style={{ width: "300px", height: "300px" }}
|
||||||
|
></video>
|
||||||
<video
|
<video
|
||||||
id="remoteVideo"
|
id="remoteVideo"
|
||||||
style={{ width: "300px", height: "300px" }}
|
style={{ width: "300px", height: "300px" }}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,65 @@
|
||||||
import { Modal } from "antd";
|
import SimpleForm from "@/components/form/simple_form";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Form,
|
||||||
|
FormInstance,
|
||||||
|
InputNumber,
|
||||||
|
Modal,
|
||||||
|
Select,
|
||||||
|
SelectProps,
|
||||||
|
} from "antd";
|
||||||
|
import { Store } from "antd/es/form/interface";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import baseHttp from "@/service/base";
|
||||||
|
import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
|
||||||
|
import { EmConfig } from "@/pages/emergency/em_column";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
|
||||||
const Emr = () => {
|
const Emr = (props: Store) => {
|
||||||
|
const { emergencyStore } = props;
|
||||||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||||||
|
const formRef = React.useRef<FormInstance>(null);
|
||||||
|
const [projectConfig, setProjectConfig] = useState<any>([]);
|
||||||
|
const [data, setData] = useState<SelectProps["options"]>([]);
|
||||||
|
const [userList, setUserList] = useState<Array<any>>([]);
|
||||||
const openDispatch = () => {
|
const openDispatch = () => {
|
||||||
|
setProjectConfig(EmConfig(userList));
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
};
|
};
|
||||||
|
const onFinishFailed = () => {};
|
||||||
|
|
||||||
|
const onFinish = (values: any) => {
|
||||||
|
let data = {
|
||||||
|
...values,
|
||||||
|
long: values.marker["lng"],
|
||||||
|
lat: values.marker["lat"],
|
||||||
|
};
|
||||||
|
emergencyStore.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 ?? []);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
emergencyStore.getlist();
|
||||||
|
baseHttp.get("/user/list", null).then((res) => {
|
||||||
|
let data = res.data?.record ?? [];
|
||||||
|
data.forEach((item) => {
|
||||||
|
item.label = item.account;
|
||||||
|
item.value = item.identity;
|
||||||
|
});
|
||||||
|
setUserList(data ?? []);
|
||||||
|
});
|
||||||
|
}, [emergencyStore]);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<span onClick={openDispatch}> 应急处突</span>
|
<span onClick={openDispatch}> 应急处突</span>
|
||||||
|
|
@ -14,15 +68,86 @@ const Emr = () => {
|
||||||
className="owner_model"
|
className="owner_model"
|
||||||
width={800}
|
width={800}
|
||||||
open={isModalOpen}
|
open={isModalOpen}
|
||||||
afterClose={() => {}}
|
afterClose={() => formRef.current?.resetFields()}
|
||||||
onOk={() => {}}
|
onOk={() => formRef.current?.submit()}
|
||||||
footer={null}
|
okText="确定"
|
||||||
|
cancelText="取消"
|
||||||
onCancel={() => {
|
onCancel={() => {
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
}}
|
}}
|
||||||
></Modal>
|
>
|
||||||
|
<div className="disPatch" style={{ fontSize: "#fff" }}>
|
||||||
|
<SimpleForm
|
||||||
|
formRef={formRef}
|
||||||
|
createCallback={() => {
|
||||||
|
formRef.current?.setFieldsValue(null);
|
||||||
|
}}
|
||||||
|
formName="card_basic"
|
||||||
|
colProps={25}
|
||||||
|
subBtnName="提交"
|
||||||
|
formDatas={projectConfig}
|
||||||
|
onFinish={onFinish}
|
||||||
|
initialValues={true}
|
||||||
|
childrenPosi={true}
|
||||||
|
onFinishFailed={onFinishFailed}
|
||||||
|
>
|
||||||
|
<Form.List name="supplies_list">
|
||||||
|
{(fields, { add, remove }) => (
|
||||||
|
<>
|
||||||
|
{fields.map(({ key, name, ...restField }) => (
|
||||||
|
<>
|
||||||
|
<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}
|
||||||
|
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 onClick={() => remove(name)} />
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
<Form.Item>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<Button
|
||||||
|
style={{ width: 300 }}
|
||||||
|
type="dashed"
|
||||||
|
onClick={() => add()}
|
||||||
|
block
|
||||||
|
>
|
||||||
|
添加物资
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Form.List>
|
||||||
|
</SimpleForm>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Emr;
|
export default inject("emergencyStore")(observer(Emr));
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,9 @@
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Modal } from "antd";
|
|
||||||
import "./left.less";
|
import "./left.less";
|
||||||
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import Orgin from "./orgin";
|
import Orgin from "./orgin";
|
||||||
import Pover from "./pover";
|
import Pover from "./pover";
|
||||||
import { inject, observer } from "mobx-react";
|
import Turn from './turn';
|
||||||
import { Store } from "antd/es/form/interface";
|
const HomeLeft = () => {
|
||||||
const HomeLeft = (props: Store) => {
|
|
||||||
const { homeStore } = props;
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
|
||||||
const initChart = (data) => {
|
|
||||||
var myChart = echarts.init(document.getElementById("xunlian"));
|
|
||||||
var option = {
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: data.map((item) => item.name),
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
interval: 0,
|
|
||||||
rotate: 30,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {top: "10%",bottom: "45%",right: "5%"},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 去除网格线
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: data.map((item) => item.count),
|
|
||||||
type: "line",
|
|
||||||
smooth: true,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.1,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgb(128, 255, 165)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgb(1, 191, 236)",
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
homeStore.getTr().then((res) => {
|
|
||||||
initChart(res.data.record);
|
|
||||||
});
|
|
||||||
}, [homeStore]);
|
|
||||||
|
|
||||||
// const openDispatch = () => {
|
// const openDispatch = () => {
|
||||||
// 位置移动
|
// 位置移动
|
||||||
|
|
@ -89,24 +35,9 @@ const HomeLeft = (props: Store) => {
|
||||||
<div className="org_head">
|
<div className="org_head">
|
||||||
<p>年度训练</p>
|
<p>年度训练</p>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ width: "100%", height: "100%" }} id="xunlian"></div>
|
<Turn />
|
||||||
</div>
|
</div>
|
||||||
<Modal
|
|
||||||
title="组织架构"
|
|
||||||
className="owner_model"
|
|
||||||
width={"80%"}
|
|
||||||
open={isModalOpen}
|
|
||||||
afterClose={() => {}}
|
|
||||||
okText="确定"
|
|
||||||
cancelText="取消"
|
|
||||||
onOk={() => {}}
|
|
||||||
onCancel={() => {
|
|
||||||
setIsModalOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p>cascsa</p>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default inject("homeStore")(observer(HomeLeft));
|
export default HomeLeft;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
import { Store } from "antd/es/form/interface";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { inject, observer } from "mobx-react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import "./left.less";
|
||||||
|
import { Col, Modal, Row } from "antd";
|
||||||
|
const Turn = (props: Store) => {
|
||||||
|
const { homeStore } = props;
|
||||||
|
const [isModalOpen, setisModalOpen] = useState(false);
|
||||||
|
const initChart = (data) => {
|
||||||
|
var myChart = echarts.init(document.getElementById("xunlian"));
|
||||||
|
var option = {
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: data.map((item) => item.name),
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
interval: 0,
|
||||||
|
rotate: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: { top: "10%", bottom: "45%", right: "5%" },
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: false, // 去除网格线
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: data.map((item) => item.count),
|
||||||
|
type: "line",
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.1,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgb(128, 255, 165)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgb(1, 191, 236)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
homeStore.getTr().then((res) => {
|
||||||
|
initChart(res.data.record);
|
||||||
|
});
|
||||||
|
}, [homeStore]);
|
||||||
|
const trunHandler = () => {
|
||||||
|
setisModalOpen(true);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
onClick={trunHandler}
|
||||||
|
style={{ width: "100%", height: "100%" }}
|
||||||
|
id="xunlian"
|
||||||
|
></div>
|
||||||
|
<Modal
|
||||||
|
title="年度训练"
|
||||||
|
className="owner_model"
|
||||||
|
width={1200}
|
||||||
|
open={isModalOpen}
|
||||||
|
afterClose={() => {}}
|
||||||
|
onOk={() => {}}
|
||||||
|
footer={null}
|
||||||
|
onCancel={() => {
|
||||||
|
setisModalOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<>
|
||||||
|
<Row>
|
||||||
|
<Col flex={2}>
|
||||||
|
{[7, 8, 9, 10, 11].map((item, index) => {
|
||||||
|
return (
|
||||||
|
<div style={{ color: "#fff" ,margin:"10px"}} key={index}>
|
||||||
|
<img
|
||||||
|
height={60}
|
||||||
|
src="https://img0.baidu.com/it/u=2135939479,1633462316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Col>
|
||||||
|
<Col flex={8}>
|
||||||
|
<div style={{ color: "#fff" }} >
|
||||||
|
<img
|
||||||
|
style={{width:"100%",height:"800px"}}
|
||||||
|
src="https://img0.baidu.com/it/u=2135939479,1633462316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default inject("homeStore")(observer(Turn));
|
||||||
|
|
@ -18,16 +18,17 @@ axios.interceptors.request.use((config) => {
|
||||||
// 添加响应拦截器
|
// 添加响应拦截器
|
||||||
axios.interceptors.response.use((res: AxiosResponse) => {
|
axios.interceptors.response.use((res: AxiosResponse) => {
|
||||||
if (res.data?.status === 401) {
|
if (res.data?.status === 401) {
|
||||||
console.log("res.data.status",res.data.status);
|
|
||||||
store.usrStore.openLoginDilog()
|
store.usrStore.openLoginDilog()
|
||||||
store.usrStore.logOut()
|
store.usrStore.logOut()
|
||||||
|
window.location.href = '#/login'
|
||||||
}
|
}
|
||||||
return res;
|
return res;
|
||||||
}, (err) => {
|
}, (err) => {
|
||||||
console.log(err.status===401);
|
|
||||||
if (err.status === 401) {
|
if (err.status === 401) {
|
||||||
store.usrStore.openLoginDilog()
|
store.usrStore.openLoginDilog()
|
||||||
store.usrStore.logOut()
|
store.usrStore.logOut()
|
||||||
|
window.location.href = '#/login'
|
||||||
}
|
}
|
||||||
return Promise.reject(err);
|
return Promise.reject(err);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,7 @@ class UserStore extends BaseStore<UserDataType> {
|
||||||
if (!this._userinfo.token) {
|
if (!this._userinfo.token) {
|
||||||
let token = window.localStorage.getItem("token")
|
let token = window.localStorage.getItem("token")
|
||||||
this._userinfo.token = token;
|
this._userinfo.token = token;
|
||||||
|
|
||||||
}
|
}
|
||||||
return this._userinfo;
|
return this._userinfo;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
class Config {
|
class Config {
|
||||||
// static baseUrl = "https://rw.quwanya.cn/";
|
static baseUrl = "https://rw.quwanya.cn/";
|
||||||
// static uploadUrl = "https://rw.quwanya.cn/";
|
static uploadUrl = "https://rw.quwanya.cn/";
|
||||||
|
static ws = "wss://rw.quwanya.cn/ws";
|
||||||
|
|
||||||
// static ws = "wss://rw.quwanya.cn/ws?id=admin";
|
// static ws = "wss://rw.quwanya.cn/ws?id=admin";
|
||||||
|
// static baseUrl = "http://127.0.0.1:12214/";
|
||||||
|
// static uploadUrl = "http://127.0.0.1:12214/";
|
||||||
static baseUrl = "http://127.0.0.1:12214/";
|
// static ws = "ws://rw.quwanya.cn/ws";
|
||||||
static uploadUrl = "http://127.0.0.1:12214/";
|
|
||||||
static ws = "ws://rw.quwanya.cn:12217/ws";
|
|
||||||
|
|
||||||
}
|
}
|
||||||
export default Config;
|
export default Config;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import SocketService from "./socket";
|
// import SocketService from "./socket";
|
||||||
|
|
||||||
|
import Config from "./config";
|
||||||
|
|
||||||
// const socketService = SocketService.getInstance();
|
// const socketService = SocketService.getInstance();
|
||||||
class WebRtc {
|
class WebRtc {
|
||||||
|
|
@ -17,7 +19,7 @@ class WebRtc {
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
async init() {
|
async init() {
|
||||||
this.ws = new WebSocket("ws://rw.quwanya.cn:12217/ws")
|
this.ws = new WebSocket(Config.ws)
|
||||||
this.ws.addEventListener('open', this.open);
|
this.ws.addEventListener('open', this.open);
|
||||||
let that = this;
|
let that = this;
|
||||||
this.createOffer()
|
this.createOffer()
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue