fix

package.json

@@ -23,6 +23,7 @@
     "echarts": "^5.0.2",
     "echarts-for-react": "^3.0.2",
     "lodash-es": "^4.17.21",
+    "moment": "^2.29.4",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "react": "^18.2.0",
     "react-custom-scrollbars-2": "^4.5.0",

src/components/domain/Five/FormPanel.jsx

@@ -1,4 +1,7 @@
-import { Button, Form, Select } from "antd";
+import { Button, DatePicker, Form, Select } from "antd";
+import moment from "moment";
+
+const { RangePicker } = DatePicker;
 
 const layout = {
   labelCol: { span: 6 },
@@ -53,6 +56,19 @@ const options = [
   value: item,
 }));
 
+let timeOptions = [];
+for (let index = 1861; index < 2004; index++) {
+  timeOptions.push({
+    item: index,
+    value: index,
+  });
+}
+
+const dataOptions = ["表面温度", "表面向上感热通量"].map((item) => ({
+  label: item,
+  value: item,
+}));
+
 export default function FormPanel({ setShow }) {
   const [form] = Form.useForm();
 
@@ -104,6 +120,8 @@ export default function FormPanel({ setShow }) {
             "SAM0-UNICON",
             "TaiESM1",
           ],
+          time: [moment("1861", "YYYY"), moment("2004", "YYYY")],
+          data: ["表面温度", "表面向上感热通量"],
         }}
         onFinish={(values) => {
           setShow(true);
@@ -121,6 +139,29 @@ export default function FormPanel({ setShow }) {
             options={options}
           />
         </Form.Item>
+        <Form.Item
+          name="time"
+          label="时间段"
+          rules={[{ required: true, message: "时间段是必选项" }]}
+        >
+          <RangePicker
+            format={"YYYY"}
+            picker="year"
+            placeholder={["起始年份", "截止年份"]}
+          />
+        </Form.Item>
+        <Form.Item
+          name="data"
+          label="数据"
+          rules={[{ required: true, message: "数据是必选项" }]}
+        >
+          <Select
+            placeholder="请选择数据"
+            mode="multiple"
+            allowClear
+            options={dataOptions}
+          />
+        </Form.Item>
 
         <Form.Item {...tailLayout}>
           <Button type="primary" htmlType="submit">

src/components/domain/Two/Site/index.jsx

@@ -1,4 +1,3 @@
-import { useParams } from "react-router-dom";
 import Site from "./Site";
 import { chunk } from "lodash-es";
 import { useSelector } from "react-redux";
@@ -16,11 +15,9 @@ const positions = [
 ];
 
 function Sites() {
-  const { type } = useParams();
-  const { showSite } = useSelector((state) => state.data);
+  // const { showSite } = useSelector((state) => state.data);
 
-  if (type !== "2") return <></>;
-  if (!showSite) return <></>;
+  // if (!showSite) return <></>;
 
   return chunk(positions, 2).map((position, index) => {
     return <Site key={`site-${index}`} index={index} position={position} />;

src/components/domain/Two/index.jsx

@@ -12,6 +12,7 @@ import EntityLegend from "./EntityLegend";
 import Circles from "./Circles";
 import SurfaceAnomaly from "./SurfaceAnomaly";
 import MoistureTransport from "./MoistureTransport";
+import Sites from "./Site";
 
 export default function DomainTwo() {
   return (
@@ -32,6 +33,7 @@ export default function DomainTwo() {
       <IndianOceanSST />
       {/* <SurfaceAnomaly /> */}
       <MoistureTransport />
+      <Sites />
     </MapLayout>
   );
 }

src/components/home/Layout/NavBar.jsx

@@ -1,12 +1,17 @@
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
-import NavBarButton from "./NavBarButton";
 import { useDispatch } from "react-redux";
+import { createFromIconfontCN } from "@ant-design/icons";
+import NavBarButton from "./NavBarButton";
 
 function NavBar() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
+  const MyIcon = createFromIconfontCN({
+    scriptUrl: "//at.alicdn.com/t/c/font_4281629_4lq551rfhki.js",
+  });
+
   const navigateHandler = useCallback(
     (type) => {
       navigate(`/map/${type}`, { replace: true });
@@ -24,34 +29,42 @@ function NavBar() {
       <NavBarButton
         text={"两极协同-拉布拉多海"}
         onClick={() => navigateHandler(1)}
+        icon={<MyIcon type={`icon-labrador`} />}
       />
       <NavBarButton
         text={"两极协同-南极青藏高原"}
         onClick={() => navigateHandler(2)}
+        icon={<MyIcon type={`icon-nanji`} />}
       />
       <NavBarButton
         text={"两极协同-大西洋"}
         onClick={() => navigateHandler(3)}
+        icon={<MyIcon type={`icon-daxiyang`} />}
       />
       <NavBarButton
         text={"三级联动-青藏高原上层"}
         onClick={() => navigateHandler(4)}
+        icon={<MyIcon type={`icon-shangcengwendu`} />}
       />
       <NavBarButton
         text={"三级联动-东亚夏季风"}
         onClick={() => navigateHandler(5)}
+        icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
       />
       <NavBarButton
         text={"三级联动-东亚夏季风"}
         onClick={() => navigateHandler(5)}
+        icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
       />
       <NavBarButton
         text={"三级联动-东亚夏季风"}
         onClick={() => navigateHandler(5)}
+        icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
       />
       <NavBarButton
         text={"三级联动-东亚夏季风"}
         onClick={() => navigateHandler(5)}
+        icon={<MyIcon type={`icon-dongyaxiajifeng`} />}
       />
     </div>
   );

src/components/home/Layout/NavBarButton.jsx

@@ -1,11 +1,17 @@
-function NavBarButton({ text, onClick }) {
+function NavBarButton({ text, onClick, icon }) {
   return (
     <div className="nav-bar-button" onClick={onClick}>
       <div className="btn-table left-top" />
       <div className="btn-table right-top" />
       <div className="btn-table left-bottom" />
       <div className="btn-table right-bottom" />
-      <div className="nav-bar-content">{text}</div>
+      <div className="nav-bar-content">
+        <div className="nav-bar-content-icon">{icon}</div>
+        <div className="nav-bar-content-text">
+          <div>{text.split("-")[0]}</div>
+          <div>{text.split("-")[1]}</div>
+        </div>
+      </div>
     </div>
   );
 }

src/components/home/Layout/index.module.less

@@ -20,13 +20,8 @@
   .nav-bar {
     width: 100%;
     max-width: 1200px;
-    margin: 15% auto;
-    height: 72px;
-    padding: 0 12px;
+    margin: 200px auto;
     color: #fff;
-    // display: flex;
-    // justify-content: space-evenly;
-    // align-items: center;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     // grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
@@ -83,8 +78,20 @@
         background-color: #081633;
         height: 100%;
         display: flex;
-        justify-content: center;
+        justify-content: space-evenly;
         align-items: center;
+        gap: 8px;
+
+        .anticon {
+          font-size: 40px;
+        }
+
+        .nav-bar-content-text {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
       }
 
       &:hover {

yarn.lock

@@ -5468,6 +5468,7 @@ __metadata:
     echarts: ^5.0.2
     echarts-for-react: ^3.0.2
     lodash-es: ^4.17.21
+    moment: ^2.29.4
     node-polyfill-webpack-plugin: ^2.0.1
     react: ^18.2.0
     react-custom-scrollbars-2: ^4.5.0
@@ -11620,7 +11621,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"moment@npm:^2.24.0, moment@npm:^2.29.2":
+"moment@npm:^2.24.0, moment@npm:^2.29.2, moment@npm:^2.29.4":
   version: 2.29.4
   resolution: "moment@npm:2.29.4"
   checksum: 0ec3f9c2bcba38dc2451b1daed5daded747f17610b92427bebe1d08d48d8b7bdd8d9197500b072d14e326dd0ccf3e326b9e3d07c5895d3d49e39b6803b76e80e