|
|
|
@ -35,6 +35,13 @@ function calculateIntersection (cx, cy, d, angle) { |
|
|
|
function Index (props) { |
|
|
|
const xyCvs = useRef() |
|
|
|
const xzCvs = useRef() |
|
|
|
const [darkModde] = useState(true) |
|
|
|
const [darkColor] = useState({ |
|
|
|
background: '#1E1E1E', |
|
|
|
textColor: '#F5F5F5', |
|
|
|
subTextColor: '#D3D3D3', |
|
|
|
shadow: '#303030' |
|
|
|
}) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
const canvasArea = document.getElementById('canvasArea') |
|
|
|
@ -51,6 +58,10 @@ function Index (props) { |
|
|
|
// 画圆
|
|
|
|
xyCtx.beginPath(); |
|
|
|
xyCtx.arc(...center, diameter / 2, 0, 2 * Math.PI); |
|
|
|
if (darkModde) { |
|
|
|
xyCtx.strokeStyle = darkColor.subTextColor; |
|
|
|
// xyCtx.fill();
|
|
|
|
} |
|
|
|
xyCtx.stroke(); |
|
|
|
// 圆心圆
|
|
|
|
xyCtx.beginPath(); |
|
|
|
@ -393,20 +404,29 @@ function Index (props) { |
|
|
|
} |
|
|
|
initCanvas() |
|
|
|
}, []) |
|
|
|
console.log(darkColor, darkModde ? darkColor.textColor : 'auto'); |
|
|
|
|
|
|
|
const cardStyle = { |
|
|
|
boxShadow: `0 0 10px ${darkModde ? darkColor.shadow : 'rgba(0, 0, 0, 0.2)'}`, |
|
|
|
color: darkModde ? darkColor.textColor : 'auto' |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div style={{ height: '100vh', padding: 8 }}> |
|
|
|
<div style={{ |
|
|
|
height: '100vh', padding: 8, |
|
|
|
color: darkModde ? darkColor.textColor : 'auto', |
|
|
|
background: darkModde ? darkColor.background : 'auto' |
|
|
|
}}> |
|
|
|
<div style={{ height: '80%', padding: 8 }}> |
|
|
|
<Row style={{ height: '100%' }}> |
|
|
|
<Col span={12} id="canvasArea" style={{ paddingRight: 8, }}> |
|
|
|
<div className='card'> |
|
|
|
<Col span={12} id="canvasArea" style={{ paddingRight: 8, maxHeight: '100%' }}> |
|
|
|
<div className='card' style={cardStyle}> |
|
|
|
<canvas ref={xzCvs} id='xzCvs' height={120} width={120} style={{}}> |
|
|
|
您的浏览器不支持canvas,请更换浏览器. |
|
|
|
</canvas> |
|
|
|
</div> |
|
|
|
</Col> |
|
|
|
<Col span={12} style={{ paddingLeft: 8,}}> |
|
|
|
<div className='card'> |
|
|
|
<Col span={12} style={{ paddingLeft: 8, }}> |
|
|
|
<div className='card' style={cardStyle}> |
|
|
|
<canvas ref={xyCvs} id='xyCvs' height={120} width={120} style={{}}> |
|
|
|
您的浏览器不支持canvas,请更换浏览器. |
|
|
|
</canvas> |
|
|
|
@ -451,14 +471,18 @@ function Index (props) { |
|
|
|
s: '', |
|
|
|
},].map(s => { |
|
|
|
return ( |
|
|
|
<Col span={3} style={{ padding: 8, height: '100%' }}> |
|
|
|
<div class="card"> |
|
|
|
<Col span={3} style={{ |
|
|
|
padding: 8, height: '100%', |
|
|
|
background: |
|
|
|
darkModde ? darkColor.background : 'auto' |
|
|
|
}}> |
|
|
|
<div className="card" style={cardStyle}> |
|
|
|
{ |
|
|
|
s.k ? |
|
|
|
<> |
|
|
|
<h2>{s.k}</h2> |
|
|
|
<p>{s.v}</p> |
|
|
|
<span class="status">{s.s}</span> |
|
|
|
<h2 style={{ color: darkModde ? darkColor.textColor : 'auto' }}>{s.k}</h2> |
|
|
|
<p style={{ color: darkModde ? darkColor.subTextColor : 'auto' }}>{s.v}</p> |
|
|
|
<span className="status">{s.s}</span> |
|
|
|
</> |
|
|
|
: '' |
|
|
|
} |
|
|
|
|
