refactor
This commit is contained in:
parent
3429e19c6c
commit
1486fbfbb7
@ -3,6 +3,7 @@ import HomeLayout from "@/components/home/Layout";
|
||||
import DomainOne from "@/components/domain/One";
|
||||
import DomainTwo from "@/components/domain/Two";
|
||||
import DomainThree from "@/components/domain/Three";
|
||||
import DomainFour from "@/components/domain/Four";
|
||||
import "./App.less";
|
||||
|
||||
function App() {
|
||||
@ -12,6 +13,7 @@ function App() {
|
||||
<Route path="map/1" element={<DomainOne />}></Route>
|
||||
<Route path="map/2" element={<DomainTwo />}></Route>
|
||||
<Route path="map/3" element={<DomainThree />}></Route>
|
||||
<Route path="map/4" element={<DomainFour />}></Route>
|
||||
<Route path="*" element={<Navigate to={"/"} replace={true} />} />
|
||||
</Routes>
|
||||
);
|
||||
|
||||
115
src/components/domain/Four/ChartPanel.jsx
Normal file
115
src/components/domain/Four/ChartPanel.jsx
Normal file
@ -0,0 +1,115 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
|
||||
const years = [];
|
||||
|
||||
for (let year = 2011; year <= 2020; year++) {
|
||||
years.push(year);
|
||||
}
|
||||
|
||||
const observedData = [
|
||||
-0.90765893, 0.14846958, 1.6577014, -0.32029018, -1.2422978, 0.44113398,
|
||||
-0.45218363, 1.897564, -0.6926195, -0.529819,
|
||||
];
|
||||
|
||||
const predictedData = [
|
||||
-0.20760797, 0.206235, 0.85673275, 0.13969683, -0.39370838, 0.23775028,
|
||||
-0.34866039, 0.93110625, 0.19143088, 0.5760311,
|
||||
];
|
||||
|
||||
function ChartPanel() {
|
||||
const option = {
|
||||
title: {
|
||||
// text: "Stacked Line",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["观测结果", "预测结果"],
|
||||
textStyle: { color: "#04fbfd", cursor: "point" },
|
||||
},
|
||||
animationDuration: years.length * 1000,
|
||||
animationEasing: "cubicInOut",
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// // 下载
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: years,
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
symbol: ["none", "arrow"],
|
||||
symbolOffser: [0, 10],
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
min: -2.0,
|
||||
max: 2.0,
|
||||
interval: 0.5,
|
||||
splitNumber: 5,
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
symbolOffset: [0, 10],
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
},
|
||||
axisTick: { show: true },
|
||||
scale: true,
|
||||
},
|
||||
dataZoom: { type: "inside", start: 0, end: 100 },
|
||||
series: [
|
||||
{
|
||||
name: "观测结果",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
data: observedData,
|
||||
color: "black",
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
color: "black",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "预测结果",
|
||||
type: "line",
|
||||
// stack: "Total",
|
||||
data: predictedData,
|
||||
color: "red",
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
color: "red",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="chart-info-panel">
|
||||
<ReactECharts
|
||||
option={option}
|
||||
lazyUpdate={true}
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChartPanel;
|
||||
11
src/components/domain/Four/CustomFlyTo.jsx
Normal file
11
src/components/domain/Four/CustomFlyTo.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import { Cartesian3 } from "cesium";
|
||||
import { CameraFlyTo } from "resium";
|
||||
|
||||
export default function CustomFlyTo() {
|
||||
return (
|
||||
<CameraFlyTo
|
||||
duration={5}
|
||||
destination={Cartesian3.fromDegrees(93, 30, 16000000)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
59
src/components/domain/Four/FormPanel.jsx
Normal file
59
src/components/domain/Four/FormPanel.jsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { Button, Form, Input, Select } from "antd";
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
};
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 8, span: 16 },
|
||||
};
|
||||
|
||||
export default function FormPanel() {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
return (
|
||||
<div className="form-panel">
|
||||
<Form
|
||||
{...layout}
|
||||
form={form}
|
||||
name="control-hooks"
|
||||
initialValues={{
|
||||
sic: "sic_s",
|
||||
}}
|
||||
>
|
||||
<Form.Item name="sic" label="海冰密集度" rules={[{ required: true }]}>
|
||||
<Select placeholder="请选择海冰密集度区域" mode="multiple">
|
||||
<Option value="sic_s">南极附近海冰</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="sce" label="积雪范围" rules={[{ required: true }]}>
|
||||
<Select placeholder="请选择积雪范围" mode="multiple">
|
||||
<Option value="sc_ea">欧亚大陆积雪异常</Option>
|
||||
<Option value="sc_tp">青藏高原积雪异常</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="st" label="地表温度范围" rules={[{ required: true }]}>
|
||||
<Select placeholder="请选地表温度范围" mode="multiple">
|
||||
<Option value="ts_1">ts_1</Option>
|
||||
<Option value="ts_2">ts_2</Option>
|
||||
<Option value="ts_3">ts_3</Option>
|
||||
<Option value="ts_4">ts_4</Option>
|
||||
<Option value="ts_5">ts_5</Option>
|
||||
<Option value="ts_6">ts_6</Option>
|
||||
<Option value="ts_7">ts_7</Option>
|
||||
<Option value="ts_8">ts_8</Option>
|
||||
<Option value="ts_9">ts_9</Option>
|
||||
<Option value="ts_10">ts_10</Option>
|
||||
<Option value="ts_11">ts_11</Option>
|
||||
<Option value="ts_12">ts_12</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item {...tailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/components/domain/Four/RectangleLayer.jsx
Normal file
38
src/components/domain/Four/RectangleLayer.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { Cartesian3, Rectangle, Color, Math as CesiumMath } from "cesium";
|
||||
import { Entity, RectangleGraphics } from "resium";
|
||||
const points = [
|
||||
[13, -70, 30, -67],
|
||||
[93, 29, 99, 35],
|
||||
[68, 48, 76, 52],
|
||||
[150, 60, 160, 70],
|
||||
[130, 20, 140, 28],
|
||||
[150, 12, 175, 22],
|
||||
[-110, 20, -95, 35],
|
||||
[10, -12, 45, -2],
|
||||
[80, 10, 110, 20],
|
||||
[-150, -10, -40, 5],
|
||||
[65, -62, 90, -57],
|
||||
[145, -30, 155, -20],
|
||||
[165, -45, 180, -30],
|
||||
[-140, -60, -110, -45],
|
||||
[-70, -78, -50, -70],
|
||||
];
|
||||
export default function RectangleLayer() {
|
||||
return points.map((p, i) => (
|
||||
<Entity
|
||||
key={`rectangle-${i}`}
|
||||
name="RectangleGraphics"
|
||||
description="RectangleGraphics!!"
|
||||
>
|
||||
<RectangleGraphics
|
||||
coordinates={Rectangle.fromDegrees(...p)}
|
||||
material={Color.PEACHPUFF.withAlpha(0.3)}
|
||||
rotation={CesiumMath.toRadians(45)}
|
||||
extrudedHeight={0}
|
||||
height={0}
|
||||
outline // height must be set for outline to display
|
||||
outlineColor={Color.YELLOW}
|
||||
/>
|
||||
</Entity>
|
||||
));
|
||||
}
|
||||
31
src/components/domain/Four/index.jsx
Normal file
31
src/components/domain/Four/index.jsx
Normal file
@ -0,0 +1,31 @@
|
||||
import MapLayout from "@/components/map/Layout";
|
||||
import CustomToolbar from "@/components/common/CustomToolbar";
|
||||
import CustomClock from "@/components/common/CustomClock";
|
||||
import TextInfoPanel from "@/components/common/TextInfoPanel";
|
||||
import CustomFlyTo from "./CustomFlyTo";
|
||||
import FormPanel from "./FormPanel";
|
||||
import ChartPanel from "./ChartPanel";
|
||||
import RectangleLayer from "./RectangleLayer";
|
||||
|
||||
export default function DomainFour() {
|
||||
return (
|
||||
<MapLayout>
|
||||
<div className="title">三极联动影响青藏高原上层温度</div>
|
||||
<CustomToolbar />
|
||||
<CustomClock />
|
||||
<CustomFlyTo />
|
||||
<div className="left-panel one">
|
||||
<TextInfoPanel content="利用ERA5再分析数据，通过XGBoost和Light" />
|
||||
</div>
|
||||
<div className="right-panel">
|
||||
<div className="top-panel">
|
||||
<FormPanel />
|
||||
</div>
|
||||
<div className="bottom-panel">
|
||||
<ChartPanel />
|
||||
</div>
|
||||
</div>
|
||||
<RectangleLayer />
|
||||
</MapLayout>
|
||||
);
|
||||
}
|
||||
@ -132,6 +132,7 @@
|
||||
width: 450px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.top-panel {
|
||||
flex: 1;
|
||||
@ -141,6 +142,16 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: auto;
|
||||
padding: 12px;
|
||||
border: 1px solid #04fbfd;
|
||||
color: #02f9ff !important;
|
||||
background-color: #1f485690;
|
||||
}
|
||||
|
||||
.chart-info-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user