123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
import { useState, useCallback, useMemo } from 'react'
|
||
import { useDidShow } from '@tarojs/taro'
|
||
import { View, Text } from '@tarojs/components'
|
||
import { Navbar } from '@/components/navbar'
|
||
import { Loading } from '@/components/loading'
|
||
import { Empty } from '@/components/empty'
|
||
import { getEventList, type EventItem } from '@/api/event'
|
||
import { ROUTES } from '@/constants/routes'
|
||
import { navigateTo } from '@/utils/navigation'
|
||
import { showToast } from '@/utils/toast'
|
||
import { splitAlerts } from './splitAlerts'
|
||
import styles from './index.module.scss'
|
||
|
||
export default function Index() {
|
||
const [alertList, setAlertList] = useState<EventItem[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [loadError, setLoadError] = useState(false)
|
||
|
||
// 每次进入页面重拉全量告警（与事件页"全部"筛选同参数）
|
||
const loadAlerts = useCallback(async () => {
|
||
setLoading(true)
|
||
setLoadError(false)
|
||
try {
|
||
const list = await getEventList({ sceneId: 0, status: 0, startDate: '', endDate: '' })
|
||
setAlertList(list)
|
||
} catch {
|
||
setLoadError(true)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [])
|
||
|
||
useDidShow(() => {
|
||
loadAlerts()
|
||
})
|
||
|
||
const { unhandled, messages } = useMemo(() => splitAlerts(alertList), [alertList])
|
||
|
||
const goFamily = () => navigateTo(ROUTES.FAMILY)
|
||
const goAlertDetail = () => showToast('告警详情即将上线')
|
||
|
||
return (
|
||
<View className={styles.page}>
|
||
<Navbar title="智慧养老" autoBack={false} />
|
||
|
||
{loading ? (
|
||
<View className={styles.stateWrap}><Loading /></View>
|
||
) : loadError ? (
|
||
<View className={styles.stateWrap}>
|
||
<Empty text="加载失败，请检查网络" mode="wifi" />
|
||
<View className={styles.retryBtn} onClick={loadAlerts}><Text>重试</Text></View>
|
||
</View>
|
||
) : (
|
||
<>
|
||
<FamilyEntry onClick={goFamily} />
|
||
|
||
{unhandled.length > 0 && (
|
||
<UnhandledAlert alert={unhandled[0]} onClick={goAlertDetail} />
|
||
)}
|
||
|
||
{messages.length > 0 && (
|
||
<View className={styles.messageList}>
|
||
{messages.map((alert) => (
|
||
<AlertMessageItem key={alert.id} alert={alert} onClick={goAlertDetail} />
|
||
))}
|
||
</View>
|
||
)}
|
||
|
||
{unhandled.length === 0 && messages.length === 0 && (
|
||
<View className={styles.stateWrap}>
|
||
<Empty text="暂无告警消息" mode="message" />
|
||
</View>
|
||
)}
|
||
</>
|
||
)}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
function FamilyEntry({ onClick }: { onClick: () => void }) {
|
||
return (
|
||
<View className={styles.familyEntry} onClick={onClick}>
|
||
<View className={styles.familyIcon}>
|
||
<Text className={styles.familyEmoji}>👨👩👧</Text>
|
||
</View>
|
||
<Text className={styles.familyText}>家庭圈</Text>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
function UnhandledAlert({ alert, onClick }: { alert: EventItem; onClick: () => void }) {
|
||
return (
|
||
<View className={styles.unhandledCard} onClick={onClick}>
|
||
<View className={styles.unhandledTag}><Text>未处理</Text></View>
|
||
<Text className={styles.unhandledTitle}>{alert.deviceName || '未知设备'}</Text>
|
||
{alert.sceneName && (
|
||
<View className={styles.unhandledRow}>
|
||
<Text className={styles.rowLabel}>家庭圈：</Text>
|
||
<Text className={styles.rowValue}>{alert.sceneName}</Text>
|
||
</View>
|
||
)}
|
||
{alert.time && (
|
||
<View className={styles.unhandledRow}>
|
||
<Text className={styles.rowLabel}>时间：</Text>
|
||
<Text className={styles.rowValue}>{alert.time}</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
function AlertMessageItem({ alert, onClick }: { alert: EventItem; onClick: () => void }) {
|
||
return (
|
||
<View className={styles.messageCard} onClick={onClick}>
|
||
<View className={styles.messageHead}>
|
||
<View className={styles.messageDot} />
|
||
<Text className={styles.messageTitle}>告警消息</Text>
|
||
</View>
|
||
{alert.time && <Text className={styles.messageTime}>{alert.time}</Text>}
|
||
</View>
|
||
)
|
||
}
|