配偶方位预测(仅供娱乐)
-
+
-
-
-
)
diff --git a/src/components/Map/right/index.scss b/src/components/Map/right/index.scss
index 24db24da4af427ebbe51a33e976d47421e9f865e..119d79a72d5012749a85e3b8a4c519a5956ccd27 100644
--- a/src/components/Map/right/index.scss
+++ b/src/components/Map/right/index.scss
@@ -1,50 +1,70 @@
-.ji {
+.map {
height: 100%;
- position: relative;
- h3 {
- margin-bottom: 30px;
- text-align: left;
- margin-bottom: 0.1rem;
- padding: 0.03rem 0.1rem;
- font-size: 0.1rem;
- // letter-spacing: .0625rem;
- color: var(--c_mainWhite);
- background: linear-gradient(to right, var(--c_mainBlue), transparent);
- z-index: 1;
- --c_mainBlue: #4d96ba;
- --c_highlightBlue: #2c519d;
- --c_mainWhite: #fff;
- --c_mainGray: #666;
- --c_bg: midnightblue;
- --c_bg_chart: rgba(0, 138, 255, 0.1);
- }
-}
-.ji .input-group .chart:before {
- content: '北↑';
- position: absolute;
- left: 39.75rem;
- top: 6rem;
}
-.ji .chart.notebook:before {
- left: 7.75rem;
- top: .5rem;
+.map h3 {
+ margin-bottom: 30px;
+ text-align: left;
+ margin-bottom: 0.1rem;
+ padding: 0.03rem 0.1rem;
+ font-size: 0.1rem;
+ color: var(--c_mainWhite);
+ background: linear-gradient(to right, var(--c_mainBlue), transparent);
+ z-index: 1;
+ --c_mainBlue: #4d96ba;
+ --c_highlightBlue: #2c519d;
+ --c_mainWhite: #fff;
+ --c_mainGray: #666;
+ --c_bg: midnightblue;
+ --c_bg_chart: rgba(0, 138, 255, 0.1);
}
-.ji .input-group {
+.map .input-group {
width: 100%;
- button{
+ height: 10%;
+ z-index: 1;
+}
+.map .input-group label input {
+ vertical-align: middle;
+}
+.map .input-group button {
margin-left: .125rem;
+ font-size: .0625rem !important;
color: #fff;
background: deepskyblue;
- }
-
}
-.ji .text {
+.map .chart {
+ height: 75%;
+ position: relative;
+}
+.map .chart:before {
+ content: '北↑';
+ position: absolute;
+ left: .99rem;
+ top: 0rem;
+ color: white;
+ font-size: .1rem;
+}
+.map .chart .zhizhenss {
+ width: 1.0625rem !important;
+ height: 1.0625rem !important;
position: absolute;
- // width: 7%;
- // right:7.125rem;
- // top:1.125rem;
+ top: .30rem;
+ right: 1.48rem;
+ z-index: 1;
+ filter: opacity(0.8);
}
-.ji .text.notebook {
- width: 13rem;
- top: 7rem;
+
+.map .chart #tuututuut {
+ width: 60% !important;
+ height: 100%;
+ margin-bottom: .375rem;
+}
+.map .chart .text {
+ width: 30% !important;
+ position: absolute;
+ top: .125rem;
+ right: .25rem;
+ p{
+ font-size: .075rem;
+ }
+
}
\ No newline at end of file
diff --git a/src/components/Studyplan/index.jsx b/src/components/Studyplan/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..5b722fb95e78c350261c5d8afa8c9e826e37bdfd
--- /dev/null
+++ b/src/components/Studyplan/index.jsx
@@ -0,0 +1,488 @@
+import React, { useEffect, useRef, useState } from 'react'
+import * as echarts from "echarts";
+import './index.scss'
+export default function Index() {
+ const chartRef = useRef(null);
+ // 获取本地存储内容
+ const wind = JSON.parse(localStorage.getItem('settings')) || {};
+ // console.log(wind, '123');
+ const [menu, setMenu] = useState(wind.zoomMode);
+ //修改颜色
+ const [styles, setstyles] = useState(wind.colorData);
+ const [colors, setcolors] = useState(wind.colors);
+ let totalDays = 36;
+ // x轴数据
+ let [xData0, planData] = [[], []];
+ let xData = (function () {
+ let startTime = new Date('2019-07-04');
+ let endTime = new Date('2019-10-11');
+ let data = [];
+ while (startTime.getTime() <= endTime.getTime()) {
+ data.push(startTime);
+ if (startTime.getDay() === 0) {
+ // 周日处理其他事情
+ planData.push(0);
+ } else {
+ planData.push(1);
+ }
+ startTime = new Date(startTime.getTime() + 86400 * 1000);
+ }
+ let weekStr = '日一二三四五六';
+ return data.map(
+ (item) =>
+ item.getMonth() +
+ 1 +
+ '-' +
+ item.getDate() +
+ '周' +
+ weekStr[item.getDay()] +
+ '',
+ );
+ })();
+ // console.log(xData,planData);
+ let planDataSum = planData.map((item, index) => {
+ let sum = planData
+ .slice()
+ .splice(0, index + 1)
+ .reduce((pre, cur) => {
+ return pre + cur;
+ });
+ // console.log(sum);
+
+ return sum > totalDays ? totalDays : sum.toFixed(1);
+ });
+ // 累计完成
+ let recordData = [
+ 1,
+ 0.5,
+ 1,
+ 0, // 7月
+ 0.0,
+ 0.5,
+ 0.5,
+ 0.5,
+ 0.8,
+ 0.8,
+ 0.0,
+ 0.9,
+ 0.6,
+ 0.5,
+ 0.5,
+ 0.2,
+ 0.2,
+ 0.2,
+ 0.1,
+ 0.0,
+ 0.0,
+ 0.1,
+ 0.1,
+ 0.2,
+ 0.1,
+ 0.2,
+ 0.1,
+ 0.1,
+ 0.2,
+ 0.2,
+ 0.3,
+ 0.2, // 8月
+ 0.2,
+ 0.0,
+ 0.2,
+ 0.1,
+ 0.1,
+ 0.3,
+ 0.2,
+ 0.2,
+ 0.2,
+ 0.2,
+ 0.0,
+ 0.8,
+ 0.7,
+ 0.4,
+ 1,
+ 1,
+ 0.8,
+ 0.5,
+ 0.1,
+ 0.1,
+ 0.9,
+ 0.9,
+ 0.8,
+ 0.0,
+ 0.9,
+ 1,
+ 0.8,
+ 0.8, // 9月
+ 1,
+ 0.2,
+ 0.9,
+ 0.4,
+ 0.9,
+ 0.9,
+ 0.9,
+ 0.6,
+ 0.8,
+ 0.4,
+ 0.3,
+ 0.4,
+ 0.9,
+ 0.5,
+ 0.8,
+ 0.7,
+ 0.6,
+ 0.9,
+ 0.5,
+ 0.5,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.8,
+ 0.9,
+ 0.4,
+ 0.5,
+ 0.0,
+ 0.4,
+ 0.9,
+ 0.1,
+ 0.1,
+ 1,
+ 0.6, // 10月
+ 0.9,
+ 0.7,
+ 0.8,
+ 0.8,
+ 0.5,
+ ];
+ function linepie() {
+ let chartInstance = echarts.init(chartRef.current);
+ chartInstance.clear()
+ const option = {
+ legend: {
+ data: ['当日计划', '当日完成', '累计计划', '累计完成'],
+ textStyle: {
+ fontSize: 10,
+ color: styles[colors][0],
+ },
+ itemHeight: 10, // 修改icon图形大小
+ itemWidth: 20, // 修改icon图形大小
+ itemGap: 8, // 修改间距
+ },
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgba(0,0,0,0.3)', //设置背景图片 rgba格式
+ borderWidth: 0,
+ textStyle: {
+ fontSize: 12,
+ fontWeight: 'normal',
+ color: styles[colors][0],
+ },
+ },
+ grid: {
+ left: '5.4%',
+ right: '0%',
+ top: '10%',
+ bottom: '10%',
+ },
+ dataZoom: {
+ type: 'inside',
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ axisLabel: {
+ //坐标轴刻度标签的相关设置。
+ formatter: function (params) {
+ var newParamsName = ''; // 最终拼接成的字符串
+ var paramsNameNumber = params.length; // 实际标签的个数
+ // 标签呈现两行显示
+ if (paramsNameNumber == 6) {
+ var provideNumber = 4; // 每行能显示的字的个数
+ } else if (paramsNameNumber == 7) {
+ var provideNumber = 5; // 每行能显示的字的个数
+ } else {
+ var provideNumber = 3; // 每行能显示的字的个数
+ }
+ // var provideNumber = 3;// 每行能显示的字的个数
+ var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+ /**
+ * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+ */
+ // 条件等同于rowNumber>1
+ if (paramsNameNumber > provideNumber) {
+ /** 循环每一行,p表示行 */
+ for (var p = 0; p < rowNumber; p++) {
+ var tempStr = ''; // 表示每一次截取的字符串
+ var start = p * provideNumber; // 开始截取的位置
+ var end = start + provideNumber; // 结束截取的位置
+ // 此处特殊处理最后一行的索引值
+ if (p == rowNumber - 1) {
+ // 最后一次不换行
+ tempStr = params.substring(start, paramsNameNumber);
+ } else {
+ // 每一次拼接字符串并换行
+ tempStr = params.substring(start, end) + '\n';
+ }
+ newParamsName += tempStr; // 最终拼成的字符串
+ }
+ } else {
+ // 将旧标签的值赋给新标签
+ newParamsName = params;
+ }
+ //将最终的字符串返回
+ return newParamsName;
+ },
+ textStyle: {
+ color: styles[colors][0]
+ }
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: styles[colors][0],
+ }
+ },
+ },
+
+ yAxis: {
+ type: 'value',
+ show: true,
+ name: '学习进度(天)/%',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: 'white'
+ },
+ },
+ axisTick: { show: true },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: styles[colors][0],
+ },
+ },
+ // y轴数据自定义
+ axisLabel: {
+ formatter: function (value) {
+ var texts = [];
+ if (value == 0) {
+ texts.push('0/(0%)');
+ } else if (value <= 3) {
+ texts.push('3/(8%)');
+ } else if (value <= 6) {
+ texts.push('6/(17%)');
+ } else if (value <= 9) {
+ texts.push('9/(25%)');
+ } else if (value <= 10) {
+ texts.push('10/(28%)');
+ } else if (value <= 12) {
+ texts.push('12/(33%)');
+ } else if (value <= 15) {
+ texts.push('15/(42%)');
+ } else if (value <= 18) {
+ texts.push('18/(50%)');
+ } else if (value <= 20) {
+ texts.push('20/(56%)');
+ } else if (value <= 21) {
+ texts.push('21/(58%)');
+ } else if (value <= 25) {
+ texts.push('25/(69%)');
+ } else if (value <= 30) {
+ texts.push('30/(83%)');
+ } else if (value <= 35) {
+ texts.push('10/(97%)');
+ } else if (value <= 40) {
+ texts.push('40/(111%)');
+ } else {
+ texts.push('50/(139%)');
+ }
+ return texts;
+ },
+ textStyle: {
+ color: styles[colors][0]
+ }
+ },
+ },
+ color: styles[colors],
+ series: [
+ {
+ name: '当日计划',
+ type: 'bar',
+ stack: 'one',
+ data: planData,
+ itemStyle: { color: styles[colors][0] },
+ // 设置文字的颜色
+ label: {
+ color: styles[colors][0],
+ show: true,
+ fontSize: 8,
+ position: 'top', //在上方显示
+ },
+ backgroundStyle: {
+ color: styles[colors][0],
+ },
+ },
+ {
+ name: '当日完成',
+ type: 'bar',
+ stack: 'tow',
+ data: recordData,
+ itemStyle: { color: styles[colors][0] },
+ // 设置文字的颜色
+ label: {
+ color: styles[colors][0],
+ show: true,
+ fontSize: 8,
+ position: 'top', //在上方显示
+ },
+ },
+ {
+ name: '累计计划',
+ type: 'line',
+ data: planDataSum,
+ textStyle: {
+ color: styles[colors][0]
+ },
+ itemStyle: { color: 'red' },
+ lineStyle: {
+ color: 'red',
+ },
+ symbol: 'circle', //折线点设置为实心点
+ symbolSize: 6, //折线点的大小
+ areaStyle: {
+ //区域填充渐变颜色
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(255,0,0,1.000)', // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0,0)', // 100% 处的颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ // 设置文字的颜色
+ label: {
+ color: 'rgb(195,0,0)',
+ show: true,
+ fontWeight: 'bold',
+ fontSize: 8,
+ formatter: function (param) {
+ console.log('~~', param.dataIndex);
+ let percentStr =
+ param.dataIndex % 2 === 0
+ ? `(${(param.value / 0.3).toFixed(1)})%`
+ : '';
+ return `\v${param.value}\n\v${percentStr}`;
+ },
+ },
+ },
+ {
+ name: '累计完成',
+ type: 'line',
+ symbol: 'circle', //折线点设置为实心点
+ symbolSize: 6, //折线点的大小
+ data: recordData.map((item, index) => {
+ return recordData
+ .slice()
+ .splice(0, index + 1)
+ .reduce((pre, cur) => {
+ return pre + cur;
+ })
+ .toFixed(1);
+ }),
+ itemStyle: { color: '#acec51' },
+ areaStyle: {
+ //区域填充渐变颜色
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(0,150,0,1.000)', // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0,0)', // 100% 处的颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ // 设置文字的颜色
+ label: {
+ color: '#acec51',
+ show: true,
+ fontSize: 8,
+ fontWeight: 'bold',
+ formatter: function (param) {
+ console.log('~~', param.dataIndex);
+ let percentStr = param.dataIndex % 2 === 0 ? `(${(param.value / 0.3).toFixed(1)})%` : '';
+ return `\v${param.value}\n\v${percentStr}`;
+ },
+ },
+ },
+ ],
+ };
+ chartInstance.setOption(option);
+ window.addEventListener("resize", function () {
+ chartInstance.resize();
+ });
+ }
+ //设置定时器
+ useEffect(() => {
+ linepie()
+ if (wind.chartRefreshPeriod) {
+ const timer = setInterval(() => {
+ linepie();
+ }, wind.chartRefreshPeriod * 1000)
+ return () => clearInterval(timer)
+ }
+ });
+
+ //三元判断函数
+ function Mentime({ menu }) {
+ console.log('Mentime', menu);
+ switch (menu) {
+ case "stretch":
+ return (
+
+ );
+ case "cover":
+ return (
+
+ );
+ case "contain":
+ return (
+
+ );
+ default:
+ return (
+
+ );
+ }
+ }
+ return (
+ 如果找对象,预测结果可以作为一个参考方向；如果已是夫妻,两人测得结果和实际方位都匹配的自然概率是2.78%,其中只有一方匹配的自然概率是16.67%。
-猜对者请继续保持和谐，猜不对也请继续努力，夫妻相敬如宾，必能幸福长久！
+
+ 
+ {/* */}
+
+
+
如果找对象，预测结果可以作为一个参考方向；如果已是夫妻，两人测得结果和实际方位都匹配的自然概率是2.78%，其中只有一方匹配的自然概率是16.67%。
+猜对者请继续保持和谐，猜不对也请继续努力，夫妻相敬如宾，必能幸福长久！
+
+
+ );
+}
diff --git a/src/components/Studyplan/index.scss b/src/components/Studyplan/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e468e011158da56d06495f6cb4d69224928cf275
--- /dev/null
+++ b/src/components/Studyplan/index.scss
@@ -0,0 +1,35 @@
+#ech {
+ div:first-child {
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ canvas {
+ width: 100% !important;
+ height: 100% !important;
+ }
+}
+
+.right {
+ width: 100%;
+ height: 100%;
+ margin: auto;
+}
+
+.right h3 {
+ margin-bottom: 30px;
+ text-align: left;
+ margin-bottom: 0.1rem;
+ padding: 0.03rem 0.1rem;
+ font-size: 0.1rem;
+ // letter-spacing: .0625rem;
+ color: var(--c_mainWhite);
+ background: linear-gradient(to right, var(--c_mainBlue), transparent);
+ z-index: 1;
+ --c_mainBlue: #4d96ba;
+ --c_highlightBlue: #2c519d;
+ --c_mainWhite: #fff;
+ --c_mainGray: #666;
+ --c_bg: midnightblue;
+ --c_bg_chart: rgba(0, 138, 255, 0.1);
+}
\ No newline at end of file
diff --git a/src/components/Themebounced/index.jsx b/src/components/Themebounced/index.jsx
index 2eff418ae4cc8478062a32153a837fd146f6d56d..740c0c1e8cd53a4bfd321d8d704a1e3ecfc7054e 100644
--- a/src/components/Themebounced/index.jsx
+++ b/src/components/Themebounced/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
import './index.scss'
import { Radio, Button } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
@@ -12,16 +12,16 @@ export default function Themebounced(props) {
const [colors, setcolors] = useState('default');
const [WeatherPeriod, setWeatherPeriod] = useState(5);
const [chartRePeriod, setchartRePeriod] = useState(10);
- const [hideGesture, sethideGesture] = useState(true);
+ const [hideGesture, sethideGesture] = useState(false);
- const getCfg=()=>{
+ const getCfg = () => {
setdesignW(settings.designW || 1920) //设计图宽度
setdesignH(settings.designH || 1080) //设计图高度
setValuezoom(settings.zoomMode || 'stretch')
setWeatherPeriod(settings.getWeatherPeriod || 5) //天气预报更新周期（分）
setchartRePeriod(settings.chartRefreshPeriod || 10) // 图表刷新周期（秒）
setcolors(settings.colors || 'default')
- sethideGesture(settings.hideGesture)
+ sethideGesture(settings.hideGesture || false)
console.log(`settings`, settings);
};
@@ -41,26 +41,50 @@ export default function Themebounced(props) {
'#FFFFE6', '#6E6464'],
summer: ['#FFAE00', '#FF5200', '#007AFF', '#00BF05',
'#DCFFFF', '#505064'],
- autumn: ['#c1ad2f','#A5912D', '#782323', '#783723', '#A05027',
+ autumn: ['#c1ad2f', '#A5912D', '#782323', '#783723', '#A05027',
'#FAE6DC', '#283C14'],
winter: ['#F5F5FA', '#96822D', '#6E5A19', '#BECDEB',
'#E1E1F0', '#281E1E'],
},
hideGesture: hideGesture //优化状态
-
+
};
- window.localStorage.setItem('settings',JSON.stringify(Cfg))
+ window.localStorage.setItem('settings', JSON.stringify(Cfg))
window.location.reload()
}
const gethideGesture = (e) => {
- console.log(`e`, e);
- console.log(`e`, e.target);
- console.log(`e`, e.target.checked);
+ // console.log(`e`, e);
+ // console.log(`e`, e.target);
+ // console.log(`e`, e.target.checked);
}
useEffect(() => {
getCfg()
+ const settings = JSON.parse(localStorage.getItem('settings')) || {};
+ let Cfg = {
+ designW: settings.designW || 1920,
+ designH: settings.designH || 1080,
+ zoomMode: settings.zoomMode || 'stretch',
+ getWeatherPeriod: settings.getWeatherPeriod || 5, //天气更新频率
+ chartRefreshPeriod: settings.chartRefreshPeriod || 10, //图表刷新频率
+ colors: settings.colors || 'default',
+ colorData: {//配色方案，部分色彩参考 http://rmco.jp/coloringroom/haisyoku_rei/haisyoku_haru.html
+ default: ['lightskyblue', 'orange', 'greenyellow', 'limegreen',
+ 'mediumturquoise', 'mediumpurple'],
+ spring: ['#BEDC6E', '#FA8C8C', '#FAAAC8', '#FAC8C8',
+ '#FFFFE6', '#6E6464'],
+ summer: ['#FFAE00', '#FF5200', '#007AFF', '#00BF05',
+ '#DCFFFF', '#505064'],
+ autumn: ['#c1ad2f', '#A5912D', '#782323', '#783723', '#A05027',
+ '#FAE6DC', '#283C14'],
+ winter: ['#F5F5FA', '#96822D', '#6E5A19', '#BECDEB',
+ '#E1E1F0', '#281E1E'],
+ },
+ hideGesture: settings.hideGesture || false //优化状态
+
+ };
+ window.localStorage.setItem('settings', JSON.stringify(Cfg))
}, []);
return (
原计划36个学习日基本完成，后面包括找工作相关的时间，记录截止到10月11
+
@@ -68,7 +92,7 @@ export default function Themebounced(props) {
diff --git a/src/pages/Home/index.scss b/src/pages/Home/index.scss
index 7563e2a00de53f4694e450e51485ea57a23a500a..2f7a64d7da19249bea7041a260c6035606991adf 100644
--- a/src/pages/Home/index.scss
+++ b/src/pages/Home/index.scss
@@ -1,43 +1,52 @@
-
-
.left_col {
- width: 100%;
- height: 100%;
- display: flex;
- // padding: 0 .35rem;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ // padding: 0 .35rem;
}
.left_zone {
- width: 3rem;
- margin: 10px;
- height: 380px;
- box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
- border: 1px solid #0764bc;
- box-shadow: 0 0 2px 0 #0e325f,
- inset 0 0 2px 0 #0e325f;
-
+ width: 3rem;
+ margin: 10px;
+ height: 380px;
+ box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
+ border: 1px solid #0764bc;
+ box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;
}
.left_zone_cover {
- width: 33% ;
- margin: 10px;
- height: 450px;
- box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
- border: 1px solid #0764bc;
- box-shadow: 0 0 2px 0 #0e325f,
- inset 0 0 2px 0 #0e325f;
-
+ width: 33%;
+ margin: 10px;
+ height: 450px;
+ box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
+ border: 1px solid #0764bc;
+ box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;
}
.left_zone_contain {
- width: 3rem;
- // margin: 5px;
- height: 2.15rem;
- box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
- border: 1px solid #0764bc;
- box-shadow: 0 0 2px 0 #0e325f,
- inset 0 0 2px 0 #0e325f;
-
+ width: 33%;
+ margin: 10px;
+ height: 40vh;
+ box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
+ border: 1px solid #0764bc;
+ box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;
}
.router {
- margin-top: 20px;
+ margin-top: 15px;
+ a {
+ padding-left: 0.1rem;
+ font-family: italic;
+ font-style: italic;
+ // padding-left: 10px;
+ }
+ a:hover{
+ text-decoration: underline;
+
+ }
+ a:before {
+ content: "→ ";
+ position: relative;
+ left:0;
+ animation: linkTo 5s ease-out;
+ animation-iteration-count: infinite;
+ }
}
\ No newline at end of file
diff --git a/src/pages/Map/index.jsx b/src/pages/Map/index.jsx
index f9cd98312ccc283403577b7b40f68a1472c65496..a1b8eb4f789e298c7f1bead0a04c67ac80f9de26 100644
--- a/src/pages/Map/index.jsx
+++ b/src/pages/Map/index.jsx
@@ -1,6 +1,6 @@
import './index.scss'
import "../style/header.scss";
-import React from "react";
+import React, { useState,useEffect } from "react";
// import Top from "./pages/Top";
import Weather from '../../components/Weather'
@@ -12,11 +12,34 @@ import Right from '../../components/Map/right/index'
import { Link } from "react-router-dom";
import { Breadcrumb, Layout, Menu } from "antd";
-import Diqiu from '../../components/Map/MapChina/Diqiu';
import Qujing from '../../components/Map/MapChina/Qujing';
+import Themebounced from '../../components/Themebounced'
const { Header, Content, Footer } = Layout;
function App() {
+ const [zoomMode, setzoomMode] = useState('');
+ const [zoomMode1, setzoomMode1] = useState('');
+ // console.log(`settings`, settings);
+ useEffect(() => {
+ const settings = JSON.parse(localStorage.getItem("settings")) || {};
+ // console.log(`settings`, settings);
+ if (settings.zoomMode == "stretch") {
+ setzoomMode("right_zone_3d");
+ setzoomMode1('left_zone_3d')
+ console.log(`123`);
+ }
+ if (settings.zoomMode == "cover") {
+ setzoomMode("right_zone_2d_cover");
+ setzoomMode1('left_zone_2d_cover')
+ console.log(`123`);
+ }
+ if (settings.zoomMode == "contain") {
+ setzoomMode("right_zone_2d_contain");
+ setzoomMode1('left_zone_2d_contain')
+ console.log(`123`);
+ }
+
+ }, []);
return (
设置
-
+
设计图
@@ -79,26 +103,22 @@ export default function Themebounced(props) {
setdesignH(e.target.value)} />
-
+
缩放模式
- { setValuezoom(e.target.value) }} value={valuezoom}>
- contain
- cover
- stretch
-
+ { setValuezoom(e.target.id) }} name="suofang" id="contain" checked={valuezoom === 'contain' ? true : false} />
+ { setValuezoom(e.target.id) }} name="suofang" id="cover" checked={valuezoom === 'cover' ? true : false} />
+ { setValuezoom(e.target.id) }} name="suofang" id="stretch" checked={valuezoom === 'stretch' ? true : false} />
-
diff --git a/src/components/Themebounced/index.scss b/src/components/Themebounced/index.scss
index afa96f6f616defae475a391fb87c5527c8d4a994..97a4757cecef2c593be3e2039292b13ff780cf6f 100644
--- a/src/components/Themebounced/index.scss
+++ b/src/components/Themebounced/index.scss
@@ -16,25 +16,26 @@ li {
}
.left-bottom {
- width: 2rem;
- height: 520px;
+ color: #fff;
+ width: 20vw;
+ height: 2.8rem;
position: fixed;
- left: -1.8rem;
- bottom: 5%;
- display: flex;
- transition: .5s;
+ left: -350px;
+ bottom: 3%;
+ transition: .4s;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
z-index: 999;
- // min-width: 295px;
- text-align: left;
+ min-width: 360px;
+ min-height: 380px;
div:nth-child(1) {
width: 90%;
- height: 200px;
- background-color: midnightblue;
- .shezhi{
- font-size: .09rem;
+
+ // height: 100%;
+ // background-color: midnightblue;
+ .shezhi {
+ font-size: .1rem;
// background-color: red;
background-image: linear-gradient(to right, #4bafe4, rgba(255, 0, 0, 0));
height: 4vh;
@@ -42,6 +43,7 @@ li {
border-bottom: 0;
margin-bottom: .2rem;
}
+
span {
font-size: .05rem;
}
@@ -55,27 +57,110 @@ li {
div {
font-size: .07rem;
- padding-bottom: 10px;
+ margin: 0 0 0.04rem 0;
border-bottom: 0.5px solid rgb(94, 139, 189);
padding-left: 10px;
+ text-align: left;
}
div:nth-child(1) {
- // margin-top: 20px;
- font-size: .09rem;
+ margin: 10px 0 0 .05rem;
+ // font-size: .09rem;
// background-color: red;
// background-image: linear-gradient(to right, #4bafe4, rgba(255, 0, 0, 0));
height: 4vh;
- line-height: 5vh;
+ // line-height: 3.5vh;
border-bottom: 0;
}
+ .setImg {
+ li:first-child {
+ margin: .05rem 0 .05rem 0;
+ font-size: .08rem;
+ }
+
+ li:last-child {
+ margin-bottom: .05rem;
+
+ input {
+ // padding: 0 0 .2rem .2rem;
+ font-size: .08rem;
+ margin-right: calc(100% - 98%);
+ width: calc(100% - 78%);
+ // height: 3.5vh;
+ }
+
+ // input:last-child {
+ // margin-right: 0;
+ // }
+
+ span {
+ margin-right: .03rem;
+ font-size: .07rem;
+ }
+ }
+ }
+
+ .suo,
+ .colorFun {
+ li:first-child {
+ font-size: .08rem;
+ margin: .02rem 0;
+ }
+
+ li:last-child {
+ margin: 0 0 .05rem .1rem;
+
+ input {
+ vertical-align: middle;
+ margin-right: .06rem;
+ }
+
+ label {
+ margin-right: .15rem;
+ font-size: .08rem;
+ }
+ }
+ }
+
+ .other {
+ li {
+ font-size: .08rem;
+ // margin: .5vh 2vh;
+ margin-bottom: .05rem;
+
+ input {
+ margin-right: 0.2rem;
+ }
+
+ input[type='number'] {
+ // width: 7rem;
+ // margin: .2rem 0;
+ font-size: .08rem;
+ }
+ }
+
+ // li:first-child {
+ // font-size: 2vh;
+ // margin: .5rem 0 .0rem 0;
+ // }
+ }
+
+ }
+
+ button {
+ display: block;
+ margin: .1rem auto;
+ width: .66rem;
+ height: .2rem;
+ border-radius: 20px;
+ background-color: rgb(0, 191, 255);
+ border: 0;
+ color: white;
}
}
-.optimize{
- margin-top: 20px;
-}
+
.left-bottom:hover{
left: 0;
@@ -83,6 +168,12 @@ li {
background-color: midnightblue;
}
+// .left-bottom {
+// left: 0;
+// box-shadow: rgb(74, 177, 229) 0px 0px 10px 10px;
+// background-color: midnightblue;
+// }
+
//
@keyframes linkTo {
@@ -99,13 +190,3 @@ li {
left: .02rem;
}
}
-.ant-radio-wrapper{
- color: white;
- span{
- padding: 2px;
- }
-}
-.ant-radio-inner {
- width: 10px;
- height: 10px;
-}
diff --git a/src/components/Weather/index.jsx b/src/components/Weather/index.jsx
index bd82348205de0718aef74e59d8d1ca29f9ff371c..73d0917acf7abc1cb97a6fbfdceddca1feff6b5b 100644
--- a/src/components/Weather/index.jsx
+++ b/src/components/Weather/index.jsx
@@ -2,30 +2,116 @@ import React, { useState, useEffect } from 'react'
import './index.scss'
import axios from 'axios'
+
export default function Weather() {
+ const settings = JSON.parse(localStorage.getItem("settings")) || {};
let [zudu, getzui] = useState(0)
let [di, getid] = useState(0)
let [tuanqi, gettianq] = useState('')
let [chengshi, getchengshi] = useState('')
+ let [styleimg, setstyleimg] = useState('')
+ const weather2Code = {
+ "晴": 100,
+ "多云": 101,
+ "少云": 102,
+ "晴间多云": 103,
+ "阴": 104,
+ "有风": 200,
+ "平静": 201,
+ "微风": 202,
+ "和风": 203,
+ "清风": 204,
+ "强风/劲风": 205,
+ "疾风": 206,
+ "大风": 207,
+ "烈风": 208,
+ "风暴": 209,
+ "狂爆风": 210,
+ "飓风": 211,
+ "龙卷风": 212,
+ "热带风暴": 213,
+ "阵雨": 300,
+ "强阵雨": 301,
+ "雷阵雨": 302,
+ "强雷阵雨": 303,
+ "雷阵雨伴有冰雹": 304,
+ "小雨": 305,
+ "中雨": 306,
+ "大雨": 307,
+ "极端降雨": 308,
+ "毛毛雨/细雨": 309,
+ "暴雨": 310,
+ "大暴雨": 311,
+ "特大暴雨": 312,
+ "冻雨": 313,
+ "小到中雨": 314,
+ "中到大雨": 315,
+ "大到暴雨": 316,
+ "暴雨到大暴雨": 317,
+ "大暴雨到特大暴雨": 318,
+ "雨": 399,
+ "小雪": 400,
+ "中雪": 401,
+ "大雪": 402,
+ "暴雪": 403,
+ "雨夹雪": 404,
+ "雨雪天气": 405,
+ "阵雨夹雪": 406,
+ "阵雪": 407,
+ "小到中雪": 408,
+ "中到大雪": 409,
+ "大到暴雪": 410,
+ "雪": 499,
+ "薄雾": 500,
+ "雾": 501,
+ "霾": 502,
+ "扬沙": 503,
+ "浮尘": 504,
+ "沙尘暴": 507,
+ "强沙尘暴": 508,
+ "浓雾": 509,
+ "强浓雾": 510,
+ "中度霾": 511,
+ "重度霾": 512,
+ "严重霾": 513,
+ "大雾": 514,
+ "特强浓雾": 515,
+ "热": 900,
+ "冷": 901,
+ "未知": 999,
+ };
const getDetail = async () => {
let { data: { data: { predict: predict } } } = await axios.get('http://www.nmc.cn/rest/weather?stationid=54602')
- console.log('data', predict);
+ // console.log('data', predict);
getid(predict.detail[0].night.weather.temperature)
getzui(predict.detail[0].day.weather.temperature)
gettianq(predict.detail[0].night.weather.info)
getchengshi(predict.station.city)
- console.log(`最高温度`, predict.detail[0].day.weather.temperature);
+ // console.log(`最高温度`, predict.detail[0].day.weather.temperature);
+ setstyleimg(weather2Code[predict.detail[0].night.weather.info])
+
+ // console.log(`weather`, weather2Code[predict.detail[0].night.weather.info]);
+
}
useEffect(() => {
getDetail()
+ if (settings.getWeatherPeriod) {
+ const timer = setInterval(() => {
+ getDetail()
+ }, settings.chartRefreshPeriod * 1000)
+ return () => clearInterval(timer)
+ }
+ getDetail()
},[])
return (
+
配色方案
- { setcolors(e.target.value) }} value={colors}>
- default
- spring
- summer
- autumn
- winter
-
+ { setcolors(e.target.id) }} checked={colors === 'default' ? true : false} />
+ { setcolors(e.target.id) }} checked={colors === 'spring' ? true : false} />
+ { setcolors(e.target.id) }} checked={colors === 'summer' ? true : false} />
+ { setcolors(e.target.id) }} checked={colors === 'autumn' ? true : false} />
+ { setcolors(e.target.id) }} checked={colors === 'winter' ? true : false} />
@@ -112,17 +132,15 @@ export default function Themebounced(props) {
setchartRePeriod(e.target.value)} />
- sethideGesture(e.target.checked)} />
+ sethideGesture(e.target.checked)} />
-
+ }>保存并刷新
-
+
+ ![]({"https://cdn.heweather.com/cond_icon/")
+
+
- {di}℃ ~ {zudu}℃
- {tuanqi} {chengshi} diff --git a/src/components/Weather/index.scss b/src/components/Weather/index.scss index d99f774fcd846a8a02d6e44ee55830ae358db4cb..ca0b2a18d774bd2a474f7504d3c7f2f24c99e48c 100644 --- a/src/components/Weather/index.scss +++ b/src/components/Weather/index.scss @@ -17,9 +17,16 @@ li { } } .weatherIcon{ + img{ + width: .2rem; + height: .2rem; + // filter: brightness(3); + background-size: contain; + } width: .2rem; height: .2rem; filter: brightness(3); background-size: contain; - background-image: url("https://cdn.heweather.com/cond_icon/101.png"); + // background-image: url("https://cdn.heweather.com/cond_icon/101.png"); + } \ No newline at end of file diff --git a/src/pages/Earth/index.jsx b/src/pages/Earth/index.jsx new file mode 100644 index 0000000000000000000000000000000000000000..6271f0e75c94583f54a68766d7ead115cbc7f1a6 --- /dev/null +++ b/src/pages/Earth/index.jsx @@ -0,0 +1,95 @@ +import './index.scss' +import "../style/header.scss"; +import React, { useState,useEffect } from "react"; +// import Top from "./pages/Top"; + + +import Terran from '../../components/Earth/Terran' +import Lifetime from '../../components/Earth/Lifetime' + +import Weather from '../../components/Weather' + +import Clock from '../../components/Clock'; +// 导入右上第一个表格 +import Luck from '../../components/Earth/Luck' + +import { Link } from "react-router-dom"; +import { Breadcrumb, Layout, Menu } from "antd"; + + +import Themebounced from '../../components/Themebounced' +import Index from '../../components/Earth/Terran'; + +const { Header, Content, Footer } = Layout; + +function App() { + const [zoomMode, setzoomMode] = useState(''); + const [zoomMode1, setzoomMode1] = useState(''); + // console.log(`settings`, settings); + useEffect(() => { + const settings = JSON.parse(localStorage.getItem("settings")) || {}; + // console.log(`settings`, settings); + if (settings.zoomMode == "stretch") { + setzoomMode("right_zone_3d"); + setzoomMode1('left_zone_3d') + // console.log(`123`); + } + if (settings.zoomMode == "cover") { + setzoomMode("right_zone_3d_cover"); + setzoomMode1('left_zone_3d_cover') + // console.log(`123`); + } + if (settings.zoomMode == "contain") { + setzoomMode("right_zone_3d_contain"); + setzoomMode1('left_zone_3d_contain') + // console.log(`123`); + } + + }, []); + return ( +
+
+ 
+
+
+
+
+ 大屏图表适配解决方案
+
+
+
+
+
+ 进入地图
+ 返回首页
+ 学习计划进度
+
+
+
+
+ {/* 左图 */}
+
+
+
+
+
+
+ {/* 右下 */}
+
+
- →进入地图
- →进入3d地球
- →学习计划进度
+ 进入地图
+ 进入3d地球
+ 学习计划进度
- →返回首页
- →进入3d地球
- →学习计划进度
+ 返回首页
+ 进入3d地球
+ 学习计划进度