fix(amap):core

This commit is contained in:
wang_yp 2024-10-10 00:23:45 +08:00
parent 28201296f1
commit 9248a85e34
6 changed files with 184 additions and 98 deletions

View File

@ -19,7 +19,7 @@ import React from "react";
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"; import { EmConfig } from "./em_column";
import TaskArchives from "../training/task_archives";
const Emergency = (props: Store) => { const Emergency = (props: Store) => {
const { emergencyStore } = props; const { emergencyStore } = props;
const [isModalOpen, setIsModalOpen] = useState<boolean>(false); const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
@ -79,6 +79,7 @@ const Emergency = (props: Store) => {
> >
</Button> </Button>
<TaskArchives taskId={record?.identity} category_identity={record.archives_category_identity}/>
</Space> </Space>
), ),
}, },

View File

@ -11,49 +11,12 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.map_container_t { .scr {
position: absolute; position: absolute;
height: 60px; top: 60px;
top: 0; z-index: 9;
width: 100%;
background-image: url("../../static/head.png");
background-repeat: no-repeat;
backdrop-filter: blur(10px);
left: 0; left: 0;
right: 0; right: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
.map_container_t_l {
display: flex;
align-items: center;
flex: 1;
.title_img {
margin-left: 10px;
width: 20px;
height: 20px;
}
.twp {
width: 160px;
height: 30px;
}
> span {
margin-left: 15px;
margin-right: 15px;
color: #fff;
font-size: 30px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.1em;
font-variation-settings: "opsz" auto;
color: #ffffff;
text-shadow: 0px 0px 10px #29ecb4;
}
}
.scr {
flex: 1;
overflow: hidden; overflow: hidden;
.scrolling-text { .scrolling-text {
white-space: nowrap; white-space: nowrap;
@ -69,6 +32,66 @@
} }
} }
} }
.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);
left: 0;
right: 0;
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: 2;
.title_img {
margin-left: 10px;
width: 20px;
height: 20px;
}
.on_to{
transform: rotate(-180deg) rotateY(0deg);
}
.twp {
height: 30px;
}
> span {
margin-left: 15px;
margin-right: 15px;
color: #fff;
font-size: 30px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.1em;
font-variation-settings: "opsz" auto;
color: #ffffff;
text-shadow: 0px 0px 10px #29ecb4;
}
}
.map_container_t_l {
flex: 1;
> span {
margin-left: 15px;
margin-right: 15px;
color: #fff;
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;
}
}
.map_container_t_r { .map_container_t_r {
flex: 1; flex: 1;

View File

@ -4,7 +4,6 @@ import MapContainer from "@/components/map/MapComponent";
import HomeLeft from "@/pages/home/homeLeft/home_left"; import HomeLeft from "@/pages/home/homeLeft/home_left";
import HomeRight from "@/pages/home/homeRigrt/home_right"; import HomeRight from "@/pages/home/homeRigrt/home_right";
import HomeBottom from "@/pages/home/homeBottom/home_bottom"; import HomeBottom from "@/pages/home/homeBottom/home_bottom";
import image1 from "@/static/title_jiantou@1x.png";
import image2 from "@/static/title_line@1x.png"; import image2 from "@/static/title_line@1x.png";
import { SettingOutlined } from "@ant-design/icons"; import { SettingOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
@ -14,10 +13,22 @@ const Home = observer(() => {
<div className="contents_center"> <div className="contents_center">
<div className="map_container_t"> <div className="map_container_t">
<div className="map_container_t_l"> <div className="map_container_t_l">
<img className="title_img" src={image1} alt="" /> <span>20241020 </span>
</div>
<div className="map_container_t_c">
<img className="twp on_to" src={image2} alt="" />
<span></span> <span></span>
<img className="twp" src={image2} alt="" /> <img className="twp" src={image2} alt="" />
</div> </div>
<div className="map_container_t_r">
<SettingOutlined
onClick={() => {
navigate("admin/user");
}}
style={{ fontSize: "20px", color: "#f9f9f9", cursor: "pointer" }}
/>
</div>
</div>
<div className="scr"> <div className="scr">
<div className="scrolling-text"> <div className="scrolling-text">
<span> <span>
@ -27,13 +38,6 @@ const Home = observer(() => {
</span> </span>
</div> </div>
</div> </div>
<div className="map_container_t_r">
<SettingOutlined
onClick={() => {navigate("admin/user");}}
style={{ fontSize: "20px", color: "#f9f9f9", cursor: "pointer" }}
/>
</div>
</div>
<div className="map_container_l"> <div className="map_container_l">
<HomeLeft /> <HomeLeft />
</div> </div>

View File

@ -0,0 +1,42 @@
import * as echarts from "echarts";
export const trunEchatConfig = (data) => {
return {
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)",
},
]),
},
},
],
};
}

View File

@ -4,59 +4,48 @@ import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import "./left.less"; import "./left.less";
import { Col, Modal, Row } from "antd"; import { Col, Modal, Row } from "antd";
import { trunEchatConfig } from "./trun_chat_config";
const Turn = (props: Store) => { const Turn = (props: Store) => {
const { homeStore } = props; const { homeStore, trainingStore, folderStore } = props;
const [isModalOpen, setisModalOpen] = useState(false); const [isModalOpen, setisModalOpen] = useState(false);
const [folderList, setfolderList] = useState<any>([]);
const [imageList, setImageList] = useState<any>([]);
const [imageUrl, setImageUrl] = useState<any>([]);
const initChart = (data) => { const initChart = (data) => {
var myChart = echarts.init(document.getElementById("xunlian")); var myChart = echarts.init(document.getElementById("xunlian"));
var option = { trunEchatConfig(data) && myChart.setOption(trunEchatConfig(data));
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(() => { useEffect(() => {
homeStore.getTr().then((res) => { homeStore.getTr().then((res) => {
initChart(res.data.record); initChart(res.data.record);
}); });
}, [homeStore]); }, [homeStore]);
useEffect(() => {
trainingStore.getlist();
}, [trainingStore]);
const trunHandler = () => { const trunHandler = () => {
setisModalOpen(true); setisModalOpen(true);
}; };
const getFolderhandler = (id: string) => {
// trainingStore.getlist();
folderStore?.getFolderList(id).then((res) => {
setfolderList(res?.data?.record ?? []);
});
};
const getAehandler = async (id: string) => {
// trainingStore.getlist();
await folderStore?.getAlist(id).then(() => {
folderStore.alist?.forEach((elem) => {
elem.url = elem.file_url;
elem.name = elem.file_name;
});
setImageList(folderStore.alist ?? []);
});
};
return ( return (
<> <>
<div <div
@ -78,26 +67,60 @@ const Turn = (props: Store) => {
> >
<> <>
<Row> <Row>
<Col flex={2}> <Col span={2}>
{[7, 8, 9, 10, 11].map((item, index) => { <div style={{ color: "#fff", margin: "10px" }}>
<p></p>
{trainingStore.list?.map((item) => {
return ( return (
<div style={{ color: "#fff" ,margin:"10px"}} key={index}> <p
<img style={{ color: "#fff", cursor: "pointer" }}
height={60} onClick={() => {
src="https://img0.baidu.com/it/u=2135939479,1633462316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" getFolderhandler(item.archives_category_identity);
alt="" }}
/> >
</div> {item.title}
</p>
); );
})} })}
</div>
</Col> </Col>
<Col flex={8}> <Col span={2}>
<div style={{ color: "#fff" }} > <div style={{ color: "#fff", margin: "10px" }}>
<p></p>
{folderList?.map((item) => {
return (
<p
style={{ color: "#fff", cursor: "pointer" }}
onClick={() => {
getAehandler(item.identity);
}}
>
{item.folder_name}
</p>
);
})}
</div>
</Col>
<Col span={2}>
<div style={{ color: "#fff", margin: "10px" }}>
<p></p>
{imageList?.map((item) => {
return (
<img <img
style={{width:"100%",height:"800px"}} onClick={()=>{
src="https://img0.baidu.com/it/u=2135939479,1633462316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" setImageUrl(item.file_url)
}}
style={{ width: "80px", height: "80px" }}
src={item.file_url}
alt="" alt=""
/> />
);
})}
</div>
</Col>
<Col span={18}>
<div style={{ color: "#fff" }}>
<img style={{ width: "100%", height: "800px" }} src={imageUrl} alt="" />
</div> </div>
</Col> </Col>
</Row> </Row>
@ -107,4 +130,8 @@ const Turn = (props: Store) => {
); );
}; };
export default inject("homeStore")(observer(Turn)); export default inject(
"homeStore",
"trainingStore",
"folderStore"
)(observer(Turn));

View File

@ -81,16 +81,6 @@ const Trainings = (props: Store) => {
</Button> </Button>
<TaskArchives taskId={record?.identity} category_identity={record.archives_category_identity}/> <TaskArchives taskId={record?.identity} category_identity={record.archives_category_identity}/>
{/* <Button
type="dashed"
size="small"
onClick={() => {
trainingStore.id = record?.identity;
setIsModalOpenUser(true);
}}
>
</Button> */}
<Button <Button
type="dashed" type="dashed"
size="small" size="small"
@ -132,7 +122,6 @@ const Trainings = (props: Store) => {
}; };
useEffect(() => { useEffect(() => {
trainingStore.getlist(); trainingStore.getlist();
}, [trainingStore]); }, [trainingStore]);
useEffect(() => { useEffect(() => {
trainingCatStore.getlist().then(() => { trainingCatStore.getlist().then(() => {