diff --git a/src/components/common/TextInfoPanel/index.module.less b/src/components/common/TextInfoPanel/index.module.less index 7f21bf0..b447e08 100644 --- a/src/components/common/TextInfoPanel/index.module.less +++ b/src/components/common/TextInfoPanel/index.module.less @@ -1,3 +1,5 @@ +@import "@/var.less"; + .textInfoPanel :global { width: 100%; height: 100%; @@ -5,7 +7,7 @@ color: white !important; background-color: #000000e7; pointer-events: auto; - font-size: 22px; + font-size: @font-32; text-indent: 2em; line-height: 1.5; z-index: 999; diff --git a/src/components/domain/One/CustomChartPanel.jsx b/src/components/domain/One/CustomChartPanel.jsx index 6511cc5..1223a4d 100644 --- a/src/components/domain/One/CustomChartPanel.jsx +++ b/src/components/domain/One/CustomChartPanel.jsx @@ -39,7 +39,7 @@ function CustomChartPanel() { }, legend: { data: ["拉布拉多海夏季海温(异常值)", "高原夏季气温(异常值)"], - textStyle: { color: "#04fbfd", cursor: "point", fontSize: 20 }, + textStyle: { color: "#04fbfd", cursor: "point", fontSize: 22 }, }, grid: { left: "3%", @@ -61,12 +61,16 @@ function CustomChartPanel() { }, }, axisLabel: { - interval: 4, + interval: 9, + fontSize: 22, }, }, yAxis: { type: "value", name: "℃", + nameTextStyle: { + fontSize: 22, + }, min: -1.5, max: 2.0, interval: 0.5, @@ -83,6 +87,7 @@ function CustomChartPanel() { }, axisLabel: { show: true, + fontSize: 22, }, axisTick: { show: true }, scale: true, @@ -100,6 +105,9 @@ function CustomChartPanel() { itemStyle: { color: "red", }, + lineStyle: { + width: 4, //设置线条粗细 + }, animationDelay: 5 * 1000, animationDuration: 30 * 1000, animationEasing: "cubicInOut", @@ -115,8 +123,8 @@ function CustomChartPanel() { color: plateauColor, }, lineStyle: { - type: "dashed", - width: 2, + type: "solid", + width: 4, }, animationDelay: 25 * 1000, animationDuration: 10 * 1000, diff --git a/src/components/domain/One/EntityLegend.jsx b/src/components/domain/One/EntityLegend.jsx index d71316c..1e044c8 100644 --- a/src/components/domain/One/EntityLegend.jsx +++ b/src/components/domain/One/EntityLegend.jsx @@ -5,7 +5,7 @@ import waterwapor from "@/assets/waterwapor.png"; function EntityLegend() { return ( -
+
- - - -
Rossby 波列传播路径
diff --git a/src/components/domain/One/Labels/LabelEtity.jsx b/src/components/domain/One/Labels/LabelEtity.jsx index 086b064..cad6db1 100644 --- a/src/components/domain/One/Labels/LabelEtity.jsx +++ b/src/components/domain/One/Labels/LabelEtity.jsx @@ -16,8 +16,8 @@ export default function LabelEntity({ showTime, text, position }) { }, [replayVersion]); const [font, { toggle: fontToggle }] = useToggle( - "24px Helvetica", - "bold 32px Helvetica" + "bold 32px Helvetica", + "24px Helvetica" ); const [fillColor, { toggle: colorToggle }] = useToggle( Color.fromCssColorString("#04fbfd").withAlpha(0.9), diff --git a/src/components/domain/One/index.jsx b/src/components/domain/One/index.jsx index 1740575..20f5f88 100644 --- a/src/components/domain/One/index.jsx +++ b/src/components/domain/One/index.jsx @@ -27,7 +27,7 @@ export default function DomainOne() {
- +
diff --git a/src/components/domain/Three/SceneOne/CustomChartPanel.jsx b/src/components/domain/Three/SceneOne/CustomChartPanel.jsx index 5d68f36..6556635 100644 --- a/src/components/domain/Three/SceneOne/CustomChartPanel.jsx +++ b/src/components/domain/Three/SceneOne/CustomChartPanel.jsx @@ -86,7 +86,7 @@ function CustomChartPanel() { }, legend: { data: ["南极", "北极", "青藏高原"], - textStyle: { color: "#04fbfd", cursor: "point", fontSize: 20 }, + textStyle: { color: "#04fbfd", cursor: "point", fontSize: 24 }, }, animationDuration: 10 * 1000, animationEasing: "cubicInOut", @@ -115,16 +115,21 @@ function CustomChartPanel() { }, }, axisLabel: { - interval: 4, + interval: 10, + fontSize: 24, }, }, yAxis: { type: "value", + name: "℃", min: -1, max: 1, interval: 0.5, splitNumber: 5, splitLine: { show: false }, + nameTextStyle: { + fontSize: 24, + }, axisLine: { onZero: false, show: true, @@ -136,6 +141,7 @@ function CustomChartPanel() { }, axisLabel: { show: true, + fontSize: 24, }, axisTick: { show: true }, scale: true, @@ -153,6 +159,9 @@ function CustomChartPanel() { itemStyle: { color: "red", }, + lineStyle: { + width: 4, + }, }, { name: "南极", @@ -165,6 +174,9 @@ function CustomChartPanel() { itemStyle: { color: "blue", }, + lineStyle: { + width: 4, + }, }, { name: "青藏高原", @@ -177,6 +189,9 @@ function CustomChartPanel() { itemStyle: { color: "green", }, + lineStyle: { + width: 4, + }, }, ], }; diff --git a/src/components/domain/Three/SceneOne/TextLabel.jsx b/src/components/domain/Three/SceneOne/TextLabel.jsx new file mode 100644 index 0000000..95cfb2b --- /dev/null +++ b/src/components/domain/Three/SceneOne/TextLabel.jsx @@ -0,0 +1,6 @@ +import styles from "./index.module.less"; +export default function TextLabel() { + return ( +
南北极之间温度变化存在跷跷板现象
+ ); +} diff --git a/src/components/domain/Three/SceneOne/ViewerImageLayer.jsx b/src/components/domain/Three/SceneOne/ViewerImageLayer.jsx index 9856d9f..6c2b114 100644 --- a/src/components/domain/Three/SceneOne/ViewerImageLayer.jsx +++ b/src/components/domain/Three/SceneOne/ViewerImageLayer.jsx @@ -4,7 +4,7 @@ import { WebMapServiceImageryProvider } from "cesium"; const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; -function LandImageLayer({ name }) { +function LandImageLayer({ name, opacity=1.0 }) { const tempProvider = useMemo( () => new WebMapServiceImageryProvider({ @@ -23,7 +23,7 @@ function LandImageLayer({ name }) { key={`ImageryLayer-${name}`} imageryProvider={tempProvider} show={true} - alpha={0.5} + alpha={opacity} /> ); } diff --git a/src/components/domain/Three/SceneOne/ViewerOne.jsx b/src/components/domain/Three/SceneOne/ViewerOne.jsx index fa17210..0f8d68d 100644 --- a/src/components/domain/Three/SceneOne/ViewerOne.jsx +++ b/src/components/domain/Three/SceneOne/ViewerOne.jsx @@ -21,7 +21,7 @@ function ViewerOne({ children }) { /> - + {children}
diff --git a/src/components/domain/Three/SceneOne/ViewerTwo.jsx b/src/components/domain/Three/SceneOne/ViewerTwo.jsx index 222853a..bd2cd51 100644 --- a/src/components/domain/Three/SceneOne/ViewerTwo.jsx +++ b/src/components/domain/Three/SceneOne/ViewerTwo.jsx @@ -8,7 +8,7 @@ function ViewerTwo({ children }) { return (
- + -
-
- -
+
); } diff --git a/src/components/domain/Three/SceneOne/index.module.less b/src/components/domain/Three/SceneOne/index.module.less index c6c6a53..91a0c66 100644 --- a/src/components/domain/Three/SceneOne/index.module.less +++ b/src/components/domain/Three/SceneOne/index.module.less @@ -1,3 +1,5 @@ +@import "@/var.less"; + .sceneOne :global { display: flex; flex-direction: column; @@ -106,6 +108,7 @@ .legend-title { color: #04fbfd; + font-size: @font-32; } .colorbar { @@ -134,9 +137,18 @@ .legend-text-item { flex: 1; text-align: right; - font-weight: 600; color: white; -webkit-text-stroke: #04fbfd 1px; } } } + +.textLabel :global { + position: absolute; + bottom: calc(50% + 132px); + width: 50%; + left: 25%; + text-align: center; + color: #04fbfd; + font-size: @font-32; +} diff --git a/src/components/domain/Three/SceneTwo/index.jsx b/src/components/domain/Three/SceneTwo/index.jsx index dc3c349..ad05d5a 100644 --- a/src/components/domain/Three/SceneTwo/index.jsx +++ b/src/components/domain/Three/SceneTwo/index.jsx @@ -7,6 +7,7 @@ import Circles from "./Circles"; import CustomChartPanel from "./CustomChartPanel"; import Labels from "./Labels"; import ReplayButton from "./ReplayButton"; +import ViewerImageLayer from "../SceneOne/ViewerImageLayer"; function SceneTwo() { return ( @@ -25,6 +26,9 @@ function SceneTwo() { + + + diff --git a/src/components/domain/Two/Circles.jsx b/src/components/domain/Two/Circles.jsx index e388db5..d8951fb 100644 --- a/src/components/domain/Two/Circles.jsx +++ b/src/components/domain/Two/Circles.jsx @@ -89,17 +89,6 @@ function Circles() { > {circle} - - - ); }; diff --git a/src/components/domain/Two/EntityLegend.jsx b/src/components/domain/Two/EntityLegend.jsx index 206fa24..b67b716 100644 --- a/src/components/domain/Two/EntityLegend.jsx +++ b/src/components/domain/Two/EntityLegend.jsx @@ -6,7 +6,7 @@ import moisture from "@/assets/moisture.png"; function EntityLegend() { return ( -
+
low diff --git a/src/components/domain/Two/HadleyCell.jsx b/src/components/domain/Two/HadleyCell.jsx index c805c1d..f7fd5e3 100644 --- a/src/components/domain/Two/HadleyCell.jsx +++ b/src/components/domain/Two/HadleyCell.jsx @@ -18,7 +18,7 @@ export default function HadleyCell() { stopTime.secondsOfDay - currentTime.secondsOfDay ); - if (leftTime < 3) { + if (leftTime < 5) { setShow(true); } else if (show) setShow(false); }, [show]); diff --git a/src/components/domain/Two/Labels/LabelEtity.jsx b/src/components/domain/Two/Labels/LabelEtity.jsx index 086b064..cad6db1 100644 --- a/src/components/domain/Two/Labels/LabelEtity.jsx +++ b/src/components/domain/Two/Labels/LabelEtity.jsx @@ -16,8 +16,8 @@ export default function LabelEntity({ showTime, text, position }) { }, [replayVersion]); const [font, { toggle: fontToggle }] = useToggle( - "24px Helvetica", - "bold 32px Helvetica" + "bold 32px Helvetica", + "24px Helvetica" ); const [fillColor, { toggle: colorToggle }] = useToggle( Color.fromCssColorString("#04fbfd").withAlpha(0.9), diff --git a/src/components/domain/Two/Labels/index.jsx b/src/components/domain/Two/Labels/index.jsx index 3b91c0e..96b91ea 100644 --- a/src/components/domain/Two/Labels/index.jsx +++ b/src/components/domain/Two/Labels/index.jsx @@ -21,7 +21,7 @@ export default function Labels() { position={Cartesian3.fromDegrees(73, -7, 0)} /> diff --git a/src/components/domain/Two/index.module.less b/src/components/domain/Two/index.module.less index 9e6bb64..c2ddfbf 100644 --- a/src/components/domain/Two/index.module.less +++ b/src/components/domain/Two/index.module.less @@ -1,6 +1,7 @@ +@import "@/var.less"; .siteLegend :global { position: absolute; - width: 230px; + width: 260px; height: 300px; right: 12px; bottom: 14px; @@ -18,8 +19,7 @@ gap: 8px; .site-legend-item-name { - font-size: 20px; - font-weight: 700; + font-size: @font-32; flex: 1; } } diff --git a/src/components/home/Layout/NavBar.jsx b/src/components/home/Layout/NavBar.jsx index 1204179..4d4651f 100644 --- a/src/components/home/Layout/NavBar.jsx +++ b/src/components/home/Layout/NavBar.jsx @@ -2,11 +2,11 @@ import { Fragment } from "react"; import { Dropdown } from "antd"; import NavBarButton from "./NavBarButton"; import funcLibrary from "@/assets/方法库.png"; -// import funcLibrary from "@/assets/方法库2.png"; +import onlineDecisionSupport from "@/assets/方法库2.png"; import threePoles from "@/assets/三极联动.png"; import dataShare from "@/assets/数据共享.jpg"; -import onlineDecisionSupport from "@/assets/在线决策支持.png"; -// import onlineDecisionSupport from "@/assets/在线决策支持2.png"; +// import onlineDecisionSupport from "@/assets/在线决策支持.png"; +// import funcLibrary from "@/assets/在线决策支持2.png"; import styles from "./index.module.less"; const itemsTwo = [ @@ -18,7 +18,7 @@ const itemsTwo = [ rel="noopener noreferrer" href="http://casearthpoles.tpdc.ac.cn/zh-hans/data/analyze/list" > - 简介 + 方法库在线集成与共享 ), }, @@ -26,7 +26,7 @@ const itemsTwo = [ key: "2", label: ( - 随机森林方法在线计算案例 + 随机森林算法融合多源雪深数据产品 ), }, @@ -38,7 +38,7 @@ const itemsTwo = [ rel="noopener noreferrer" href="/show/map/climateReconDataAssim" > - 过去千年气候重建数据同化 + 过去千年气候重建 ), }, diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less index 84a3508..2954bb0 100644 --- a/src/components/map/Layout/index.module.less +++ b/src/components/map/Layout/index.module.less @@ -1,3 +1,5 @@ +@import "@/var.less"; + .cesiumContainer :global { pointer-events: auto; @@ -114,8 +116,8 @@ .entity-legend { position: absolute; bottom: 140px; - width: 960px; - left: 25%; + width: calc(100% - 948px); + left: 474px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; @@ -132,7 +134,7 @@ gap: 8px; .entity-legend-item-name { - font-weight: 700; + font-size: @font-32; } } } @@ -140,8 +142,8 @@ .legend { position: absolute; bottom: 12px; - width: 960px; - left: 25%; + width: calc(100% - 948px); + left: 474px; // height: 40px; display: flex; @@ -155,8 +157,7 @@ .legend-title { color: #fff; - font-size: 20px; - font-weight: 600; + font-size: @font-32; } .colorbar { diff --git a/src/var.less b/src/var.less new file mode 100644 index 0000000..c968bd6 --- /dev/null +++ b/src/var.less @@ -0,0 +1 @@ +@font-32: 24px;