My Google AI Studio App

+ 警报中心: 实时检索 + + } + placeholder="搜索设备ID或警报内容..." + style={{ width: 250, borderRadius: 2 }} + /> + + +

+ + + {summary.map((item) => ( + + + {item.label}} + value={item.count} + valueStyle={{ color: item.color, fontWeight: 900, fontSize: 24 }} + prefix={React.cloneElement(item.icon, { style: { opacity: 0.4 } })} + /> + + + ))} + + + + ({ ...a, key: a.id }))} + pagination={{ pageSize: 12, size: 'small' }} + /> + + + ); +} diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx new file mode 100644 index 0000000..16e4fb6 --- /dev/null +++ b/src/pages/Devices.tsx @@ -0,0 +1,272 @@ +import React, { useState } from 'react'; +import { + Table, + Input, + Button, + Tag, + Progress, + Space, + Typography, + Row, + Col, + Statistic, + Descriptions, + Tabs, + Card +} from 'antd'; +import { + SearchOutlined, + PlusOutlined, + SettingOutlined, + PoweroffOutlined, + ClusterOutlined, + ArrowRightOutlined, + CloseOutlined, + DashboardOutlined, + HeatMapOutlined, + InfoCircleOutlined, + LineChartOutlined, + ThunderboltOutlined +} from '@ant-design/icons'; +import { DEVICES } from '../constants'; +import { motion, AnimatePresence } from 'motion/react'; + +const { Text, Title } = Typography; + +export default function Devices() { + const [selectedDeviceId, setSelectedDeviceId] = useState(null); + const selectedDevice = DEVICES.find(d => d.id === selectedDeviceId); + + const columns = [ + { + title: '节点身份', + dataIndex: 'name', + key: 'name', + render: (text: string, record: any) => ( + + {text} + {record.id} | {record.type} + + ), + }, + { + title: '负载/状态', + key: 'status', + render: (record: any) => ( + + + {record.status.toUpperCase()} + + + + {record.cpu}% + + + ), + }, + { + title: '能量效率', + dataIndex: 'battery', + key: 'battery', + render: (percent: number) => ( + + + {percent}% + + ), + }, + { + title: '管理', + key: 'action', + align: 'right' as const, + render: () => ( + + + + + + + + +

({ ...d, key: d.id }))} + pagination={false} + sticky + scroll={{ y: 'calc(100vh - 250px)' }} + onRow={(record) => ({ + onClick: () => setSelectedDeviceId(record.id), + className: selectedDeviceId === record.id ? 'bg-blue-50' : '', + style: { cursor: 'pointer' } + })} + /> + + + + + {selectedDevice && ( + + + +

+ + Asset Intelligence / v4.0 + + {selectedDevice.name} + + {selectedDevice.type} + ID: {selectedDevice.id} + +

+ +

+ + + {selectedDevice.name} + {selectedDevice.id} + {selectedDevice.type} + {selectedDevice.lastUpdate} + FW_2.5.4_REL + MQTT_SSL + + +

+ + + + 该设备目前运行正常，已通过节点身份验证，正在进行全量数据透传。 + + +

+ ) + }, + { + key: '2', + label: '运行状态', + children: ( +

+ +

+ + 负载率} value={selectedDevice.cpu} suffix="%" valueStyle={{ fontSize: 16, fontFamily: 'monospace' }} /> + + + + + 核心温度} value={selectedDevice.temp} suffix="°C" valueStyle={{ fontSize: 16, fontFamily: 'monospace', color: '#f5222d' }} /> + + + + + 剩余能量} value={selectedDevice.battery} suffix="%" valueStyle={{ fontSize: 16, fontFamily: 'monospace', color: '#52c41a' }} /> + + + + + 系统健康} value={98.2} suffix="%" valueStyle={{ fontSize: 16, fontFamily: 'monospace' }} /> + + + + +

+ + 实时动态 (SIGNAL) + + +

+ 上行链路速率 + 1.2 Mbps +

+ 下行链路速率 + 0.4 Mbps +

+ 当前信号强度 + EXCELLENT +

+ +

+ + ) + } + ]} + /> + + +

+ + + + +

+ + + + )} + + + + ); +} diff --git a/src/pages/Downloads.tsx b/src/pages/Downloads.tsx new file mode 100644 index 0000000..7ce62c1 --- /dev/null +++ b/src/pages/Downloads.tsx @@ -0,0 +1,120 @@ +import React from 'react'; +import { + Table, + Button, + DatePicker, + Space, + Typography, + Card, + Segmented, + Row, + Col, +} from 'antd'; +import { + DownloadOutlined, + VideoCameraOutlined, + CalendarOutlined, + SearchOutlined +} from '@ant-design/icons'; +import { VIDEOS } from '../constants'; + +const { Text, Title } = Typography; +const { RangePicker } = DatePicker; + +export default function Downloads() { + const columns = [ + { + title: '文件详情', + key: 'file', + render: (record: any) => ( + +

+ +

+ + ROB_{record.id}_RAW.mp4 + Cloud-Storage-01 + + + ), + }, + { + title: '源设备', + dataIndex: 'deviceName', + key: 'deviceName', + render: (text: string) => {text}, + }, + { + title: '起止时间', + key: 'duration', + render: (record: any) => ( + + {record.startTime.split(' ')[1]} +

+ {record.endTime.split(' ')[1]} + + ), + }, + { + title: '容量', + dataIndex: 'size', + key: 'size', + render: (text: string) => {text}, + }, + { + title: '操作', + key: 'action', + align: 'right' as const, + render: () => ( + + ), + }, + ]; + + return ( +

+ 视频回放中心 + +

+ + + +

+ + + 时间跨度 + + + + + + + + + + + + +

({ ...v, key: v.id }))} + pagination={{ pageSize: 12, size: 'small' }} + /> + + + ); +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..c9c8a66 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,218 @@ +import React from 'react'; +import { + Card, + Row, + Col, + Statistic, + Table, + Tag, + Progress, + List, + Button, + Typography, + Space, +} from 'antd'; +import { + ThunderboltOutlined, + DashboardOutlined, + DotChartOutlined, + RocketOutlined, + BellOutlined, + CloudUploadOutlined, +} from '@ant-design/icons'; +import { DEVICES, ALERTS } from '../constants'; +import { useNavigate } from 'react-router-dom'; + +const { Text, Title } = Typography; +const AntdCard = Card as any; + +export default function Home() { + const navigate = useNavigate(); + + const stats = [ + { title: '芯片温度', value: 32.08, icon: , color: '#ff4d4f', suffix: '℃' }, + { title: '设备电流', value: 0, icon: , color: '#1677ff', suffix: 'A' }, + { title: '设备电压', value: 0, icon: , color: '#fa8c16', suffix: 'V' }, + { title: '设备数量', value: DEVICES.length, icon: , color: '#52c41a', suffix: '' }, + { title: '告警数量', value: ALERTS.filter(a => !a.handled).length, icon: , color: '#ff4d4f', suffix: '' }, + { title: '上报事件', value: 1, icon: , color: '#52c41a', suffix: '' }, + ]; + + const columns = [ + { + title: 'Node / 标识', + dataIndex: 'name', + key: 'name', + render: (text: string, record: any) => ( + + {text} + {record.id} + + ), + }, + { + title: 'Status / 状态', + dataIndex: 'status', + key: 'status', + width: 110, + render: (status: string) => ( + + {status.toUpperCase()} + + ), + }, + { + title: 'Batt / 电量', + dataIndex: 'battery', + key: 'battery', + width: 140, + render: (percent: number) => ( + + ), + }, + { + title: 'Load / 负载', + dataIndex: 'cpu', + key: 'cpu', + width: 100, + render: (cpu: number) => ( + {cpu}% + ), + }, + { + title: 'Ping / 延迟', + key: 'ping', + width: 100, + align: 'right', + render: () => 12ms, + }, + ]; + + return ( +

+ {/* 统计卡片 */} + + {stats.map((stat, idx) => ( +

+ + {stat.title}} + value={stat.value} + precision={idx === 0 ? 2 : 0} + valueStyle={{ + color: '#1f2329', + fontWeight: 600, + fontSize: 22, + marginTop: 4, + }} + prefix={React.cloneElement(stat.icon as React.ReactElement, { + style: { color: stat.color, fontSize: 16, marginRight: 6 }, + })} + suffix={{stat.suffix}} + /> + + + ))} + + + + {/* 设备表格 */} + + 核心节点实时清单} + bordered={false} + style={{ borderRadius: 10, boxShadow: '0 2px 12px rgba(0,0,0,0.06)' }} + bodyStyle={{ padding: 0 }} + > +

({ ...d, key: d.id }))} + pagination={false} + onRow={(record) => ({ + onClick: () => navigate('/devices'), + style: { cursor: 'pointer' }, + })} + rowHoverable + /> + + + + {/* 告警列表 */} + + 当日重点警报} + extra={ + + } + bordered={false} + style={{ borderRadius: 10, boxShadow: '0 2px 12px rgba(0,0,0,0.06)' }} + bodyStyle={{ padding: 0, height: 460, overflowY: 'auto' }} + > + ( + +

+ + {alert.type} + + + {alert.time.split(' ')[1]} + +

+ + {alert.message} + + + 设备：{alert.deviceName} + + + )} + /> + + + + + ); +} \ No newline at end of file diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000..4695240 --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,150 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { + Form, + Input, + Button, + Checkbox, + Typography, + Space, + Card, + message +} from 'antd'; +import { + UserOutlined, + LockOutlined, + RocketOutlined, + SafetyCertificateOutlined, + ArrowRightOutlined +} from '@ant-design/icons'; +import { motion } from 'motion/react'; + +const { Text, Title } = Typography; + +export default function Login() { + const navigate = useNavigate(); + + const onFinish = (values: any) => { + // 模拟登录逻辑 + console.log('Login attempt:', values); + + // 根据用户名模拟不同的角色用于演示 + let role = 'viewer'; + let name = '观察员'; + + if (values.username === 'admin') { + role = 'admin'; + name = '系统管理员'; + } else if (values.username === 'operator') { + role = 'operator'; + name = '操作员'; + } + + // 存储用户信息 + const userInfo = { + username: values.username, + name: name, + role: role, + avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${values.username}` + }; + + localStorage.setItem('isAuthenticated', 'true'); + localStorage.setItem('token', 'mock_token_' + Date.now()); // 模拟 Token + localStorage.setItem('user', JSON.stringify(userInfo)); + + message.success(`欢迎回来, ${name}`); + navigate('/'); + }; + + return ( +

+ {/* Background Decor */} +

+ + + + {/* Header */} +

+ +

+ RobotMaster AI + 机器人智慧服务系统 +

+ + {/* Form */} +

+ + 账号名称} + name="username" + rules={[{ required: true, message: '请输入管理员账号' }]} + > + + + + 访问令牌 / 密码} + name="password" + rules={[{ required: true, message: '请输入密码' }]} + > + + + +

+ + 记住会话 + + +

+ + + + + +

+ + {/* Footer */} +

+ System Version: v4.2.1-stable + +

+ Server Online + +

+ + + + {/* Security Notice */} +

+ + AUTHORIZED PERSONNEL ONLY | ENCRYPTED LINK | TRACE ENABLED + +

+ ); +} diff --git a/src/pages/Roles.tsx b/src/pages/Roles.tsx new file mode 100644 index 0000000..2b178d0 --- /dev/null +++ b/src/pages/Roles.tsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { + Card, + Row, + Col, + Button, + Typography, + Tag, + Space, + Divider, + List +} from 'antd'; +import { + SafetyCertificateOutlined, + LockOutlined, + CheckCircleOutlined, + PlusOutlined, + TeamOutlined +} from '@ant-design/icons'; + +const { Text, Title } = Typography; + +export default function Roles() { + const roles = [ + { name: '超级管理员', key: 'admin', desc: '系统全权限，支持资源分配与权限审计', level: 'Level 1' }, + { name: '系统操作员', key: 'operator', desc: '设备策略下发，实时指令干预及警报处理', level: 'Level 2' }, + { name: '访客观察员', key: 'viewer', desc: '只读权限，支持实时视频预览与报表查阅', level: 'Level 3' }, + ]; + + const permissions = [ + { name: '设备控制权限', sectors: ['远程重启', '策略部署', '紧急停机'] }, + { name: '视频管理权限', sectors: ['实时监控', '云台控制', '录像下载'] }, + { name: '核心准入权限', sectors: ['审计日志', '成本报表', '用户配置'] }, + ]; + + return ( +

+ 系统角色权限矩阵 + +

+ + + {roles.map((role) => ( +

+ }>管理成员 + ]} + > + + + + } + title={{role.name}} + description={ + + {role.level} + {role.desc} + + } + /> + + + ))} + + + 功能模块权限分配 (细分原子操作)} + style={{ borderRadius: 2 }} + > + + {permissions.map((p) => ( + +

+ {p.name} + ( + +

+ {item} + +

+ + )} + /> +

+ + ))} + + + + ); +} diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx new file mode 100644 index 0000000..9ee9604 --- /dev/null +++ b/src/pages/Users.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { + Table, + Tag, + Space, + Button, + Input, + Typography, + Card, + Avatar +} from 'antd'; +import { + PlusOutlined, + SearchOutlined, + EditOutlined, + DeleteOutlined, + UserOutlined +} from '@ant-design/icons'; +import { MANAGED_USERS } from '../constants'; + +const { Text, Title } = Typography; + +export default function Users() { + const columns = [ + { + title: '用户信息', + key: 'userinfo', + render: (record: any) => ( + + } /> + + {record.name} + {record.id} + + + ), + }, + { + title: '系统权限', + dataIndex: 'role', + key: 'role', + render: (role: string) => ( + + {role} + + ), + }, + { + title: '账户状态', + key: 'status', + render: () => ACTIVE, + }, + { + title: '最近登录', + key: 'lastLogin', + render: () => 2024-03-24 10:22:45, + }, + { + title: '操作', + key: 'action', + align: 'right' as const, + render: () => ( + + + + + ), + }, + ]; + + return ( +

+ 用户管理权限控制 + + } + placeholder="搜索用户名或工号..." + style={{ width: 250, borderRadius: 2 }} + /> + + +

+ + +

({ ...u, key: u.id }))} + pagination={false} + /> + + + ); +} diff --git a/src/pages/Video.tsx b/src/pages/Video.tsx new file mode 100644 index 0000000..8cc833c --- /dev/null +++ b/src/pages/Video.tsx @@ -0,0 +1,208 @@ +import React, { useState } from 'react'; +import { + Row, + Col, + Card, + Button, + Tag, + Typography, + Space, + Tooltip, + List, + Avatar, + Select, + Divider, +} from 'antd'; +import { + CaretUpOutlined, + CaretDownOutlined, + CaretLeftOutlined, + CaretRightOutlined, + FullscreenOutlined, + ReloadOutlined, + MonitorOutlined, + VideoCameraOutlined, + ThunderboltOutlined, + CustomerServiceOutlined, + AlertOutlined, + EyeOutlined +} from '@ant-design/icons'; +import { DEVICES } from '../constants'; + +const { Text, Title } = Typography; + +function cn(...classes: string[]) { + return classes.filter(Boolean).join(' '); +} + +export default function VideoControl() { + const [selectedDevice, setSelectedDevice] = useState(DEVICES[0]); + const onlineDevices = DEVICES.filter(d => d.status === 'online' || d.status === 'alert'); + + const getVideoConfig = (type: string) => { + switch (type) { + case '安防型': + return { + count: 4, + labels: ['Front/主前', 'Back/后视', 'Left/左侧', 'Right/右侧'], + gridClass: 'grid-cols-2 grid-rows-2' + }; + case '运输型': + return { + count: 5, + labels: ['Front/前驱', 'Back/后置', 'Left/左翼', 'Right/右翼', 'Cargo/货舱'], + gridClass: 'grid-cols-4 grid-rows-2' + }; + case '巡检型': + default: + return { + count: 3, + labels: ['Main/主探', 'Pan/全景', 'Detail/细节'], + gridClass: 'grid-cols-2 grid-rows-2' + }; + } + }; + + const config = getVideoConfig(selectedDevice.type); + + return ( + + {/* Video Content */} + + {/* Top Control Bar */} +

+ +