|
@@ -3,8 +3,12 @@ import './WeekCalendarItem.scss'
|
|
|
import { rpxToPx } from "@/utils/tools";
|
|
import { rpxToPx } from "@/utils/tools";
|
|
|
import { useEffect, useState } from "react";
|
|
import { useEffect, useState } from "react";
|
|
|
import { ColorType } from "@/context/themes/color";
|
|
import { ColorType } from "@/context/themes/color";
|
|
|
-export default function WeekCalendarItem(props: { data: any }) {
|
|
|
|
|
|
|
+
|
|
|
|
|
+let timer
|
|
|
|
|
+export default function WeekCalendarItem(props: { data: any, isCurrentWeek: boolean }) {
|
|
|
const [charts, setCharts] = useState([])
|
|
const [charts, setCharts] = useState([])
|
|
|
|
|
+ const [showCurrentTime, setShowCurrentTime] = useState(false)
|
|
|
|
|
+ const [position, setPosition] = useState({ left: 0, top: 0 })
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
var array: any = []
|
|
var array: any = []
|
|
|
for (var i = 0; i < 7; i++) {
|
|
for (var i = 0; i < 7; i++) {
|
|
@@ -41,6 +45,30 @@ export default function WeekCalendarItem(props: { data: any }) {
|
|
|
setCharts(array)
|
|
setCharts(array)
|
|
|
}, [])
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ if (timer)
|
|
|
|
|
+ clearInterval(timer)
|
|
|
|
|
+ if (props.isCurrentWeek) {
|
|
|
|
|
+ timer = setInterval(()=>{
|
|
|
|
|
+ getPosition()
|
|
|
|
|
+ },60000)
|
|
|
|
|
+ getPosition()
|
|
|
|
|
+ }
|
|
|
|
|
+ setShowCurrentTime(props.isCurrentWeek)
|
|
|
|
|
+ }, [props.isCurrentWeek])
|
|
|
|
|
+
|
|
|
|
|
+ function getPosition() {
|
|
|
|
|
+ var now = new Date().getTime()
|
|
|
|
|
+ var start = props.data.start
|
|
|
|
|
+ var index = Math.floor((now - start) / (3600 * 24 * 1000))
|
|
|
|
|
+ var left = (now - start) % (3600 * 24 * 1000)
|
|
|
|
|
+ var top = left / (3600 * 24 * 1000) * 400
|
|
|
|
|
+ setPosition({
|
|
|
|
|
+ left: rpxToPx(94 * index),
|
|
|
|
|
+ top: rpxToPx(top)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
function getIntersection(start1, end1, start2, end2) {
|
|
function getIntersection(start1, end1, start2, end2) {
|
|
|
// 确保 start1 小于等于 end1,start2 小于等于 end2
|
|
// 确保 start1 小于等于 end1,start2 小于等于 end2
|
|
|
if (start1 > end1) {
|
|
if (start1 > end1) {
|
|
@@ -67,23 +95,33 @@ export default function WeekCalendarItem(props: { data: any }) {
|
|
|
<View style={{ height: parseInt(rpxToPx(60) + '') }}>
|
|
<View style={{ height: parseInt(rpxToPx(60) + '') }}>
|
|
|
<View className="chart_top_week">
|
|
<View className="chart_top_week">
|
|
|
<Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周日</Text>
|
|
<Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周日</Text>
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*1) + '') }}>周一</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*2) + '') }}>周二</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*3) + '') }}>周三</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*4) + '') }}>周四</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*5) + '') }}>周五</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*6) + '') }}>周六</Text>
|
|
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + '') }}>周一</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + '') }}>周二</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + '') }}>周三</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + '') }}>周四</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + '') }}>周五</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + '') }}>周六</Text>
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|
|
|
|
|
|
|
|
<View className="chart_detail">
|
|
<View className="chart_detail">
|
|
|
|
|
+ {
|
|
|
|
|
+ showCurrentTime && <View style={{
|
|
|
|
|
+ position: 'absolute',
|
|
|
|
|
+ left: position.left,
|
|
|
|
|
+ top: position.top,
|
|
|
|
|
+ width: rpxToPx(94),
|
|
|
|
|
+ height: 1,
|
|
|
|
|
+ backgroundColor: 'red'
|
|
|
|
|
+ }} />
|
|
|
|
|
+ }
|
|
|
<View className="verticalLine" style={{ left: 0 }} />
|
|
<View className="verticalLine" style={{ left: 0 }} />
|
|
|
- <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*1) + '') }} />
|
|
|
|
|
- <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*2) + '') }} />
|
|
|
|
|
- <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*3) + '') }} />
|
|
|
|
|
- <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*4) + '') }} />
|
|
|
|
|
- <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*5) + '') }} />
|
|
|
|
|
- <View className="verticalLine" style={{ left: parseInt(rpxToPx(94*6) + '') }} />
|
|
|
|
|
|
|
+ <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 1) + '') }} />
|
|
|
|
|
+ <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 2) + '') }} />
|
|
|
|
|
+ <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 3) + '') }} />
|
|
|
|
|
+ <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 4) + '') }} />
|
|
|
|
|
+ <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 5) + '') }} />
|
|
|
|
|
+ <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 6) + '') }} />
|
|
|
<View className="horizontalLine" style={{ top: rpxToPx(100), backgroundColor: '#262626' }} />
|
|
<View className="horizontalLine" style={{ top: rpxToPx(100), backgroundColor: '#262626' }} />
|
|
|
<View className="horizontalLine" style={{ top: rpxToPx(200), backgroundColor: '#383838' }} />
|
|
<View className="horizontalLine" style={{ top: rpxToPx(200), backgroundColor: '#383838' }} />
|
|
|
<View className="horizontalLine" style={{ top: rpxToPx(300), backgroundColor: '#262626' }} />
|
|
<View className="horizontalLine" style={{ top: rpxToPx(300), backgroundColor: '#262626' }} />
|
|
@@ -125,13 +163,13 @@ export default function WeekCalendarItem(props: { data: any }) {
|
|
|
</View>
|
|
</View>
|
|
|
<View style={{ height: parseInt(rpxToPx(60) + '') }}>
|
|
<View style={{ height: parseInt(rpxToPx(60) + '') }}>
|
|
|
<View className="chart_bottom_week">
|
|
<View className="chart_bottom_week">
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周一</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*1) + '') }}>周二</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*2) + '') }}>周三</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*3) + '') }}>周四</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*4) + '') }}>周五</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*5) + '') }}>周六</Text>
|
|
|
|
|
- <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94*6) + '') }}>周日</Text>
|
|
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + '') }}>周一</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + '') }}>周二</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + '') }}>周三</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + '') }}>周四</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + '') }}>周五</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + '') }}>周六</Text>
|
|
|
|
|
+ <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + '') }}>周日</Text>
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|