|
|
@@ -0,0 +1,1646 @@
|
|
|
+"use client"
|
|
|
+
|
|
|
+import "antd/dist/reset.css"
|
|
|
+
|
|
|
+import {useEffect, useMemo, useRef, useState} from "react"
|
|
|
+import dynamic from "next/dynamic"
|
|
|
+import type {MenuProps} from "antd"
|
|
|
+import {
|
|
|
+ Badge,
|
|
|
+ Button,
|
|
|
+ Card,
|
|
|
+ Col,
|
|
|
+ Collapse,
|
|
|
+ Descriptions,
|
|
|
+ Divider,
|
|
|
+ Drawer,
|
|
|
+ Form,
|
|
|
+ Input,
|
|
|
+ Layout,
|
|
|
+ Menu,
|
|
|
+ Modal,
|
|
|
+ Popover,
|
|
|
+ Progress,
|
|
|
+ Row,
|
|
|
+ Segmented,
|
|
|
+ Select,
|
|
|
+ Slider,
|
|
|
+ Space,
|
|
|
+ Statistic,
|
|
|
+ Steps,
|
|
|
+ Switch,
|
|
|
+ Table,
|
|
|
+ Tabs,
|
|
|
+ Tag,
|
|
|
+ Timeline,
|
|
|
+ Typography,
|
|
|
+ Upload,
|
|
|
+} from "antd"
|
|
|
+import {
|
|
|
+ Activity,
|
|
|
+ Bell,
|
|
|
+ Box,
|
|
|
+ Boxes,
|
|
|
+ Check,
|
|
|
+ CheckCircle2,
|
|
|
+ CloudUpload,
|
|
|
+ Cog,
|
|
|
+ Database,
|
|
|
+ Factory,
|
|
|
+ FileJson2,
|
|
|
+ Globe,
|
|
|
+ Layers,
|
|
|
+ LinkIcon,
|
|
|
+ Lock,
|
|
|
+ Network,
|
|
|
+ Package,
|
|
|
+ Radar,
|
|
|
+ RefreshCw,
|
|
|
+ Send,
|
|
|
+ Server,
|
|
|
+ Settings,
|
|
|
+ ShieldCheck,
|
|
|
+ SignalHigh,
|
|
|
+ Sprout,
|
|
|
+ UploadIcon,
|
|
|
+ Users,
|
|
|
+} from "lucide-react"
|
|
|
+import globalMessage from "@/app/_modules/globalMessage";
|
|
|
+
|
|
|
+const { Header, Sider, Content } = Layout
|
|
|
+const { TextArea } = Input
|
|
|
+const { Title, Text } = Typography
|
|
|
+
|
|
|
+// Lazy components that require browser APIs
|
|
|
+const DeviceMap = dynamic(() => import("./components/device-map"), { ssr: false })
|
|
|
+const RealtimeLine = dynamic(() => import("./components/realtime-line"), { ssr: false })
|
|
|
+const QueueGauge = dynamic(() => import("./components/queue-gauge"), { ssr: false })
|
|
|
+
|
|
|
+type Project = {
|
|
|
+ id: string
|
|
|
+ name: string
|
|
|
+ description?: string
|
|
|
+ createdAt: string
|
|
|
+}
|
|
|
+type Product = {
|
|
|
+ id: string
|
|
|
+ name: string
|
|
|
+ protocol: "TCP" | "UDP" | "LWM2M" | "MQTTS" | "HTTP/HTTPS"
|
|
|
+ projectId: string
|
|
|
+ thirdParty: boolean
|
|
|
+ authToken?: string
|
|
|
+}
|
|
|
+type ThingModel = {
|
|
|
+ id: string
|
|
|
+ productId: string
|
|
|
+ json: string
|
|
|
+}
|
|
|
+type Device = {
|
|
|
+ id: string
|
|
|
+ name: string
|
|
|
+ productId: string
|
|
|
+ projectId: string
|
|
|
+ status: "online" | "offline"
|
|
|
+ lastSeen?: string
|
|
|
+ lat: number
|
|
|
+ lng: number
|
|
|
+}
|
|
|
+
|
|
|
+type Telemetry = {
|
|
|
+ ts: number
|
|
|
+ value: number
|
|
|
+ deviceId: string
|
|
|
+}
|
|
|
+
|
|
|
+const initialProjects: Project[] = [
|
|
|
+ { id: "p1", name: "城市燃气", description: "管网与阀井监测", createdAt: new Date().toISOString() },
|
|
|
+ { id: "p2", name: "城市水务", description: "供排水管线监测", createdAt: new Date().toISOString() },
|
|
|
+]
|
|
|
+const initialProducts: Product[] = [
|
|
|
+ { id: "prod1", name: "压力传感器A", protocol: "MQTTS", projectId: "p1", thirdParty: false },
|
|
|
+ { id: "prod2", name: "井盖监测B", protocol: "HTTP/HTTPS", projectId: "p1", thirdParty: true, authToken: "TP-XXXX" },
|
|
|
+ { id: "prod3", name: "流量计C", protocol: "LWM2M", projectId: "p2", thirdParty: false },
|
|
|
+]
|
|
|
+const initialThingModels: ThingModel[] = [
|
|
|
+ {
|
|
|
+ id: "tm1",
|
|
|
+ productId: "prod1",
|
|
|
+ json: JSON.stringify(
|
|
|
+ {
|
|
|
+ properties: [
|
|
|
+ { id: "pressure", name: "压力", type: "number", unit: "kPa" },
|
|
|
+ { id: "battery", name: "电量", type: "number", unit: "%" },
|
|
|
+ ],
|
|
|
+ events: [{ id: "alarm", name: "告警", level: "high" }],
|
|
|
+ services: [{ id: "reset", name: "复位", in: {}, out: {} }],
|
|
|
+ },
|
|
|
+ null,
|
|
|
+ 2,
|
|
|
+ ),
|
|
|
+ },
|
|
|
+]
|
|
|
+const initialDevices: Device[] = [
|
|
|
+ {
|
|
|
+ id: "dev-001",
|
|
|
+ name: "压力A-001",
|
|
|
+ productId: "prod1",
|
|
|
+ projectId: "p1",
|
|
|
+ status: "online",
|
|
|
+ lastSeen: new Date().toISOString(),
|
|
|
+ lat: 31.231706,
|
|
|
+ lng: 121.472644,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "dev-002",
|
|
|
+ name: "井盖B-002",
|
|
|
+ productId: "prod2",
|
|
|
+ projectId: "p1",
|
|
|
+ status: "offline",
|
|
|
+ lat: 31.220706,
|
|
|
+ lng: 121.462644,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "dev-003",
|
|
|
+ name: "流量C-003",
|
|
|
+ productId: "prod3",
|
|
|
+ projectId: "p2",
|
|
|
+ status: "online",
|
|
|
+ lastSeen: new Date().toISOString(),
|
|
|
+ lat: 31.241706,
|
|
|
+ lng: 121.482644,
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+function useInterval(callback: () => void, delay: number | null) {
|
|
|
+ const savedRef = useRef<() => void>(null)
|
|
|
+ useEffect(() => {
|
|
|
+ savedRef.current = callback
|
|
|
+ }, [callback])
|
|
|
+ useEffect(() => {
|
|
|
+ if (delay === null) return
|
|
|
+ const id = setInterval(() => savedRef.current && savedRef.current(), delay)
|
|
|
+ return () => clearInterval(id)
|
|
|
+ }, [delay])
|
|
|
+}
|
|
|
+
|
|
|
+export default function Page() {
|
|
|
+ const [collapsed, setCollapsed] = useState(false)
|
|
|
+ const [activeKey, setActiveKey] = useState<string>("overview")
|
|
|
+
|
|
|
+ // Core states
|
|
|
+ const [projects, setProjects] = useState<Project[]>(initialProjects)
|
|
|
+ const [products, setProducts] = useState<Product[]>(initialProducts)
|
|
|
+ const [thingModels, setThingModels] = useState<ThingModel[]>(initialThingModels)
|
|
|
+ const [devices, setDevices] = useState<Device[]>(initialDevices)
|
|
|
+
|
|
|
+ const [telemetry, setTelemetry] = useState<Telemetry[]>([])
|
|
|
+ const [backlog, setBacklog] = useState<number>(8)
|
|
|
+ const [throughput, setThroughput] = useState<number>(120)
|
|
|
+ const [alerts, setAlerts] = useState<number>(1)
|
|
|
+ const [todayCount, setTodayCount] = useState<number>(3200)
|
|
|
+
|
|
|
+ const [logs, setLogs] = useState<
|
|
|
+ { key: string; time: string; deviceId: string; product: string; msg: string; level: "INFO" | "WARN" | "ERROR" }[]
|
|
|
+ >([])
|
|
|
+
|
|
|
+ // UI states for feedback
|
|
|
+ const [projectModalOpen, setProjectModalOpen] = useState(false)
|
|
|
+ const [productModalOpen, setProductModalOpen] = useState(false)
|
|
|
+ const [deviceModalOpen, setDeviceModalOpen] = useState(false)
|
|
|
+ const [cmdModal, setCmdModal] = useState<{ open: boolean; device?: Device }>({ open: false })
|
|
|
+ const [dataDrawer, setDataDrawer] = useState<{ open: boolean; device?: Device }>({ open: false })
|
|
|
+ const [registerDrawer, setRegisterDrawer] = useState(false)
|
|
|
+ const [notifOpen, setNotifOpen] = useState(false)
|
|
|
+
|
|
|
+ // Extra feedback modals
|
|
|
+ const [svcModal, setSvcModal] = useState<{ open: boolean; svc?: any }>({ open: false })
|
|
|
+ const [weightModal, setWeightModal] = useState<{ open: boolean; weight: number }>({ open: false, weight: 50 })
|
|
|
+ const [scheduleModal, setScheduleModal] = useState<boolean>(false)
|
|
|
+ const [apiAccessModal, setApiAccessModal] = useState<boolean>(false)
|
|
|
+ const [rbacModal, setRbacModal] = useState<{ open: boolean; user?: any }>({ open: false })
|
|
|
+
|
|
|
+ const [form] = Form.useForm()
|
|
|
+ const [productForm] = Form.useForm()
|
|
|
+ const [deviceForm] = Form.useForm()
|
|
|
+ const [cmdForm] = Form.useForm()
|
|
|
+
|
|
|
+ // Simulate telemetry stream, queue and device health
|
|
|
+ useInterval(() => {
|
|
|
+ const onlineDevices = devices.filter((d) => d.status === "online")
|
|
|
+ if (onlineDevices.length === 0) return
|
|
|
+ const randDevice = onlineDevices[Math.floor(Math.random() * onlineDevices.length)]
|
|
|
+ const v = Math.round(80 + Math.random() * 40 - 20)
|
|
|
+ const now = Date.now()
|
|
|
+ setTelemetry((prev) => {
|
|
|
+ const next = [...prev, { ts: now, value: v, deviceId: randDevice.id }].slice(-120)
|
|
|
+ return next
|
|
|
+ })
|
|
|
+ setTodayCount((c) => c + 1)
|
|
|
+ setBacklog((b) => Math.max(0, b + 1 - Math.floor(throughput / 100)))
|
|
|
+ setLogs((prev) => {
|
|
|
+ const product = products.find((p) => p.id === randDevice.productId)?.name ?? "-"
|
|
|
+ const next = [
|
|
|
+ {
|
|
|
+ key: `${now}`,
|
|
|
+ time: new Date(now).toLocaleTimeString(),
|
|
|
+ deviceId: randDevice.id,
|
|
|
+ product,
|
|
|
+ msg: `上报: value=${v}`,
|
|
|
+ level: "INFO" as const,
|
|
|
+ },
|
|
|
+ ...prev,
|
|
|
+ ].slice(0, 50)
|
|
|
+ return next
|
|
|
+ })
|
|
|
+ if (Math.random() < 0.03) {
|
|
|
+ setAlerts((a) => a + 1)
|
|
|
+ setLogs((prev) => [
|
|
|
+ {
|
|
|
+ key: `${now}-warn`,
|
|
|
+ time: new Date(now).toLocaleTimeString(),
|
|
|
+ deviceId: randDevice.id,
|
|
|
+ product: products.find((p) => p.id === randDevice.productId)?.name ?? "-",
|
|
|
+ msg: "告警: 压力异常",
|
|
|
+ level: "WARN",
|
|
|
+ },
|
|
|
+ ...prev,
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ setDevices((prev) => prev.map((d) => (d.id === randDevice.id ? { ...d, lastSeen: new Date().toISOString() } : d)))
|
|
|
+ }, 1200)
|
|
|
+
|
|
|
+ const onlineCount = devices.filter((d) => d.status === "online").length
|
|
|
+
|
|
|
+ const menuItems: MenuProps["items"] = [
|
|
|
+ { key: "overview", icon: <Activity size={18} />, label: "总览" },
|
|
|
+ { key: "south", icon: <Server size={18} />, label: "南向接入" },
|
|
|
+ { key: "terminal", icon: <LinkIcon size={18} />, label: "终端接入" },
|
|
|
+ { key: "distribution", icon: <Send size={18} />, label: "数据分发" },
|
|
|
+ { key: "mq", icon: <Network size={18} />, label: "北向消息队列" },
|
|
|
+ { key: "warehouse", icon: <Database size={18} />, label: "数据仓库" },
|
|
|
+ { key: "openapi", icon: <Globe size={18} />, label: "数据共享开放" },
|
|
|
+ { key: "micro", icon: <Boxes size={18} />, label: "微服务" },
|
|
|
+ { key: "auth", icon: <ShieldCheck size={18} />, label: "认证鉴权" },
|
|
|
+ ]
|
|
|
+
|
|
|
+ const projectOptions = projects.map((p) => ({ label: p.name, value: p.id }))
|
|
|
+ const productOptions = products.map((p) => ({ label: p.name, value: p.id }))
|
|
|
+
|
|
|
+ function addProject(values: any) {
|
|
|
+ const p: Project = {
|
|
|
+ id: `p-${Math.random().toString(36).slice(2, 8)}`,
|
|
|
+ name: values.name,
|
|
|
+ description: values.description,
|
|
|
+ createdAt: new Date().toISOString(),
|
|
|
+ }
|
|
|
+ setProjects((prev) => [p, ...prev])
|
|
|
+ setProjectModalOpen(false)
|
|
|
+ form.resetFields()
|
|
|
+ globalMessage.success("项目已创建")
|
|
|
+ }
|
|
|
+ function addProduct(values: any) {
|
|
|
+ const prod: Product = {
|
|
|
+ id: `prod-${Math.random().toString(36).slice(2, 8)}`,
|
|
|
+ name: values.name,
|
|
|
+ protocol: values.protocol,
|
|
|
+ projectId: values.projectId,
|
|
|
+ thirdParty: values.thirdParty || false,
|
|
|
+ authToken: values.thirdParty ? `TP-${Math.random().toString(36).slice(2, 8)}` : undefined,
|
|
|
+ }
|
|
|
+ setProducts((prev) => [prod, ...prev])
|
|
|
+ setProductModalOpen(false)
|
|
|
+ productForm.resetFields()
|
|
|
+ globalMessage.success("产品已创建")
|
|
|
+ }
|
|
|
+ function addDevice(values: any) {
|
|
|
+ const dev: Device = {
|
|
|
+ id: values.id,
|
|
|
+ name: values.name,
|
|
|
+ productId: values.productId,
|
|
|
+ projectId: values.projectId,
|
|
|
+ status: "offline",
|
|
|
+ lat: values.lat ?? 31.23 + Math.random() * 0.05,
|
|
|
+ lng: values.lng ?? 121.47 + Math.random() * 0.05,
|
|
|
+ }
|
|
|
+ setDevices((prev) => [dev, ...prev])
|
|
|
+ setDeviceModalOpen(false)
|
|
|
+ deviceForm.resetFields()
|
|
|
+ globalMessage.success("设备已注册")
|
|
|
+ }
|
|
|
+ function toggleDevice(id: string, online: boolean) {
|
|
|
+ setDevices((prev) =>
|
|
|
+ prev.map((d) =>
|
|
|
+ d.id === id
|
|
|
+ ? { ...d, status: online ? "online" : "offline", lastSeen: online ? new Date().toISOString() : d.lastSeen }
|
|
|
+ : d,
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ globalMessage.success(online ? "设备上线成功" : "设备已下线")
|
|
|
+ }
|
|
|
+ function sendCommand(values: any) {
|
|
|
+ const device = cmdModal.device
|
|
|
+ if (!device) return
|
|
|
+ const now = Date.now()
|
|
|
+ setLogs((prev) => [
|
|
|
+ {
|
|
|
+ key: `${now}-cmd`,
|
|
|
+ time: new Date(now).toLocaleTimeString(),
|
|
|
+ deviceId: device.id,
|
|
|
+ product: products.find((p) => p.id === device.productId)?.name ?? "-",
|
|
|
+ msg: `下发指令: ${values.serviceId} ${values.payload}`,
|
|
|
+ level: "INFO",
|
|
|
+ },
|
|
|
+ ...prev,
|
|
|
+ ])
|
|
|
+ setCmdModal({ open: false })
|
|
|
+ cmdForm.resetFields()
|
|
|
+ globalMessage.success("指令已发送")
|
|
|
+ }
|
|
|
+
|
|
|
+ const telemetrySeries = useMemo(() => {
|
|
|
+ const xs = telemetry.map((t) => new Date(t.ts).toLocaleTimeString())
|
|
|
+ const ys = telemetry.map((t) => t.value)
|
|
|
+ return { xs, ys }
|
|
|
+ }, [telemetry])
|
|
|
+
|
|
|
+ const alertLogs = logs.filter((l) => l.level !== "INFO").slice(0, 10)
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Layout style={{ minHeight: "100vh" }}>
|
|
|
+ <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed} width={240}>
|
|
|
+ <div style={{ height: 60, display: "flex", alignItems: "center", padding: "0 12px", gap: 8 }}>
|
|
|
+ <Sprout size={22} color="white" />
|
|
|
+ {!collapsed && <Text style={{ color: "white", fontWeight: 600 }}>生命线物联网平台</Text>}
|
|
|
+ </div>
|
|
|
+ <Menu
|
|
|
+ theme="dark"
|
|
|
+ mode="inline"
|
|
|
+ selectedKeys={[activeKey]}
|
|
|
+ items={menuItems}
|
|
|
+ onClick={(e) => setActiveKey(e.key)}
|
|
|
+ />
|
|
|
+ </Sider>
|
|
|
+ <Layout>
|
|
|
+ <Header
|
|
|
+ style={{
|
|
|
+ background: "white",
|
|
|
+ borderBottom: "1px solid #f0f0f0",
|
|
|
+ display: "flex",
|
|
|
+ alignItems: "center",
|
|
|
+ padding: "0 16px",
|
|
|
+ gap: 12,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Radar size={22} />
|
|
|
+ <Title level={4} style={{ margin: 0 }}>
|
|
|
+ 城市生命线物联网平台
|
|
|
+ </Title>
|
|
|
+ <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
|
|
|
+ <Badge count={alerts} overflowCount={99}>
|
|
|
+ <Button icon={<Bell size={16} />} onClick={() => setNotifOpen(true)} aria-label="查看通知" />
|
|
|
+ </Badge>
|
|
|
+ <Button icon={<RefreshCw size={16} />} onClick={() => globalMessage.success("已刷新")} aria-label="刷新" />
|
|
|
+ <Button type="primary" icon={<CloudUpload size={16} />} onClick={() => setRegisterDrawer(true)}>
|
|
|
+ 设备注册
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </Header>
|
|
|
+ <Content style={{ padding: 16 }}>
|
|
|
+ {activeKey === "overview" && (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={12} md={6}>
|
|
|
+ <Card>
|
|
|
+ <Statistic title="设备在线" value={onlineCount} prefix={<SignalHigh size={16} />} />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={12} md={6}>
|
|
|
+ <Card>
|
|
|
+ <Statistic title="今日上报" value={todayCount} prefix={<UploadIcon size={16} />} />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={12} md={6}>
|
|
|
+ <Card>
|
|
|
+ <Statistic title="队列积压" value={backlog} suffix="条" prefix={<Layers size={16} />} />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={12} md={6}>
|
|
|
+ <Card>
|
|
|
+ <Statistic title="告警数" value={alerts} prefix={<AlertIcon />} />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={16}>
|
|
|
+ <Card title="实时监测趋势">
|
|
|
+ <RealtimeLine title="压力/流量趋势" xs={telemetrySeries.xs} ys={telemetrySeries.ys} />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={8}>
|
|
|
+ <Card title="消息队列压力">
|
|
|
+ <QueueGauge backlog={backlog} throughput={throughput} />
|
|
|
+ <Divider />
|
|
|
+ <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
|
|
+ <Text>处理吞吐</Text>
|
|
|
+ <Segmented
|
|
|
+ options={[
|
|
|
+ { label: "低", value: 80 },
|
|
|
+ { label: "中", value: 120 },
|
|
|
+ { label: "高", value: 200 },
|
|
|
+ ]}
|
|
|
+ value={throughput}
|
|
|
+ onChange={(v) => {
|
|
|
+ setThroughput(Number(v))
|
|
|
+ globalMessage.success(`已切换吞吐：${v}/s`)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="设备分布地图">
|
|
|
+ <div style={{ height: 360 }}>
|
|
|
+ <DeviceMap devices={devices} />
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="实时日志">
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ dataSource={logs}
|
|
|
+ pagination={{ pageSize: 6 }}
|
|
|
+ columns={[
|
|
|
+ { title: "时间", dataIndex: "time", width: 100 },
|
|
|
+ { title: "设备ID", dataIndex: "deviceId", width: 120 },
|
|
|
+ { title: "产品", dataIndex: "product", width: 120 },
|
|
|
+ {
|
|
|
+ title: "级别",
|
|
|
+ dataIndex: "level",
|
|
|
+ width: 80,
|
|
|
+ render: (lv) =>
|
|
|
+ lv === "INFO" ? (
|
|
|
+ <Tag color="blue">INFO</Tag>
|
|
|
+ ) : lv === "WARN" ? (
|
|
|
+ <Tag color="orange">WARN</Tag>
|
|
|
+ ) : (
|
|
|
+ <Tag color="red">ERROR</Tag>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ { title: "消息", dataIndex: "msg" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "south" && (
|
|
|
+ <Card>
|
|
|
+ <Tabs
|
|
|
+ defaultActiveKey="projects"
|
|
|
+ items={[
|
|
|
+ {
|
|
|
+ key: "projects",
|
|
|
+ label: (
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Package size={16} /> 项目管理
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ children: (
|
|
|
+ <>
|
|
|
+ <div className="flex justify-between mb-3">
|
|
|
+ <Text type="secondary">按项目分类设备，方便资产统一管理</Text>
|
|
|
+ <Button type="primary" onClick={() => setProjectModalOpen(true)} icon={<PlusIcon />}>
|
|
|
+ 新建项目
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ <Table<Project>
|
|
|
+ rowKey="id"
|
|
|
+ dataSource={projects}
|
|
|
+ columns={[
|
|
|
+ { title: "项目名称", dataIndex: "name" },
|
|
|
+ { title: "描述", dataIndex: "description" },
|
|
|
+ { title: "创建时间", dataIndex: "createdAt", render: (t) => new Date(t).toLocaleString() },
|
|
|
+ {
|
|
|
+ title: "设备数",
|
|
|
+ render: (_, r) => devices.filter((d) => d.projectId === r.id).length,
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <Modal
|
|
|
+ title="新建项目"
|
|
|
+ open={projectModalOpen}
|
|
|
+ onCancel={() => setProjectModalOpen(false)}
|
|
|
+ onOk={() => form.submit()}
|
|
|
+ okText="保存"
|
|
|
+ >
|
|
|
+ <Form form={form} layout="vertical" onFinish={addProject}>
|
|
|
+ <Form.Item label="项目名称" name="name" rules={[{ required: true, message: "请输入名称" }]}>
|
|
|
+ <Input placeholder="例如：城市燃气" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="描述" name="description">
|
|
|
+ <Input placeholder="可选" />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "products",
|
|
|
+ label: (
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Box size={16} /> 产品管理
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ children: (
|
|
|
+ <>
|
|
|
+ <div className="flex justify-between mb-3">
|
|
|
+ <Text type="secondary">定义产品、添加设备，管理自建与第三方授权产品</Text>
|
|
|
+ <Button type="primary" icon={<PlusIcon />} onClick={() => setProductModalOpen(true)}>
|
|
|
+ 新建产品
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ <Table<Product>
|
|
|
+ rowKey="id"
|
|
|
+ dataSource={products}
|
|
|
+ columns={[
|
|
|
+ { title: "名称", dataIndex: "name" },
|
|
|
+ { title: "协议", dataIndex: "protocol" },
|
|
|
+ {
|
|
|
+ title: "归属项目",
|
|
|
+ dataIndex: "projectId",
|
|
|
+ render: (id) => projects.find((p) => p.id === id)?.name,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "类型",
|
|
|
+ dataIndex: "thirdParty",
|
|
|
+ render: (v: boolean) =>
|
|
|
+ v ? <Tag color="purple">第三方</Tag> : <Tag color="green">自建</Tag>,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "授权Token",
|
|
|
+ dataIndex: "authToken",
|
|
|
+ render: (t) => (t ? <Text code>{t}</Text> : <Text type="secondary">-</Text>),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "设备数",
|
|
|
+ render: (_, r) => devices.filter((d) => d.productId === r.id).length,
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <Modal
|
|
|
+ title="新建产品"
|
|
|
+ open={productModalOpen}
|
|
|
+ onCancel={() => setProductModalOpen(false)}
|
|
|
+ onOk={() => productForm.submit()}
|
|
|
+ okText="保存"
|
|
|
+ >
|
|
|
+ <Form form={productForm} layout="vertical" onFinish={addProduct}>
|
|
|
+ <Form.Item label="产品名称" name="name" rules={[{ required: true }]}>
|
|
|
+ <Input placeholder="例如：压力传感器A" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="接入协议" name="protocol" rules={[{ required: true }]}>
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "TCP", value: "TCP" },
|
|
|
+ { label: "UDP", value: "UDP" },
|
|
|
+ { label: "LWM2M", value: "LWM2M" },
|
|
|
+ { label: "MQTTS", value: "MQTTS" },
|
|
|
+ { label: "HTTP/HTTPS", value: "HTTP/HTTPS" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="归属项目" name="projectId" rules={[{ required: true }]}>
|
|
|
+ <Select options={projectOptions} />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="第三方产品" name="thirdParty" valuePropName="checked">
|
|
|
+ <Switch />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "thing",
|
|
|
+ label: (
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <FileJson2 size={16} /> 物模型管理
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ children: (
|
|
|
+ <>
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} md={12}>
|
|
|
+ <Card
|
|
|
+ title="定义物模型（JSON）"
|
|
|
+ extra={
|
|
|
+ <Button
|
|
|
+ onClick={() => {
|
|
|
+ const t: ThingModel = {
|
|
|
+ id: `tm-${Math.random().toString(36).slice(2, 8)}`,
|
|
|
+ productId: products[0]?.id ?? "",
|
|
|
+ json: JSON.stringify(
|
|
|
+ {
|
|
|
+ properties: [{ id: "temp", name: "温度", type: "number", unit: "℃" }],
|
|
|
+ events: [],
|
|
|
+ services: [],
|
|
|
+ },
|
|
|
+ null,
|
|
|
+ 2,
|
|
|
+ ),
|
|
|
+ }
|
|
|
+ setThingModels((prev) => [t, ...prev])
|
|
|
+ globalMessage.success("已创建示例物模型")
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 创建示例
|
|
|
+ </Button>
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ rowKey="id"
|
|
|
+ dataSource={thingModels}
|
|
|
+ pagination={{ pageSize: 5 }}
|
|
|
+ columns={[
|
|
|
+ { title: "ID", dataIndex: "id", width: 120 },
|
|
|
+ {
|
|
|
+ title: "产品",
|
|
|
+ dataIndex: "productId",
|
|
|
+ render: (id: string) => products.find((p) => p.id === id)?.name ?? "-",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "属性数",
|
|
|
+ render: (_, r: ThingModel) => {
|
|
|
+ try {
|
|
|
+ const o = JSON.parse(r.json)
|
|
|
+ return o.properties?.length ?? 0
|
|
|
+ } catch {
|
|
|
+ return "-"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (_, r: ThingModel) => (
|
|
|
+ <Space>
|
|
|
+ <Popover
|
|
|
+ title="物模型预览"
|
|
|
+ content={
|
|
|
+ <pre style={{ maxWidth: 360, maxHeight: 200, overflow: "auto", margin: 0 }}>
|
|
|
+ {r.json}
|
|
|
+ </pre>
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Button size="small">预览</Button>
|
|
|
+ </Popover>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ onClick={() => {
|
|
|
+ const prod = products.find((p) => p.id === r.productId)
|
|
|
+ globalMessage.success(`已应用到产品 ${prod?.name ?? "-"}`)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 应用到产品
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} md={12}>
|
|
|
+ <Card title="快速校验">
|
|
|
+ <Form
|
|
|
+ layout="vertical"
|
|
|
+ onFinish={(v) => {
|
|
|
+ try {
|
|
|
+ const obj = JSON.parse(v.json)
|
|
|
+ if (!Array.isArray(obj.properties)) throw new Error("缺少 properties")
|
|
|
+ globalMessage.success("物模型JSON校验通过")
|
|
|
+ } catch (e: any) {
|
|
|
+ globalMessage.error(`JSON错误: ${e.message}`)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Form.Item
|
|
|
+ label="JSON定义"
|
|
|
+ name="json"
|
|
|
+ rules={[{ required: true, message: "请输入物模型JSON" }]}
|
|
|
+ initialValue={thingModels[0]?.json}
|
|
|
+ >
|
|
|
+ <TextArea rows={12} placeholder="输入物模型JSON" />
|
|
|
+ </Form.Item>
|
|
|
+ <Button type="primary" htmlType="submit" icon={<Check size={16} />}>
|
|
|
+ 校验
|
|
|
+ </Button>
|
|
|
+ </Form>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "devices",
|
|
|
+ label: (
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Factory size={16} /> 设备管理
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ children: (
|
|
|
+ <>
|
|
|
+ <div className="flex justify-between mb-3">
|
|
|
+ <Text type="secondary">注册、上线、上报数据与指令下发</Text>
|
|
|
+ <Space>
|
|
|
+ <Button icon={<PlusIcon />} onClick={() => setDeviceModalOpen(true)}>
|
|
|
+ 注册设备
|
|
|
+ </Button>
|
|
|
+ <Button type="primary" icon={<Send size={16} />} onClick={() => setRegisterDrawer(true)}>
|
|
|
+ 批量/页面注册
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ <Table<Device>
|
|
|
+ rowKey="id"
|
|
|
+ dataSource={devices}
|
|
|
+ pagination={{ pageSize: 8 }}
|
|
|
+ columns={[
|
|
|
+ { title: "设备ID", dataIndex: "id", width: 140 },
|
|
|
+ { title: "名称", dataIndex: "name" },
|
|
|
+ {
|
|
|
+ title: "项目",
|
|
|
+ dataIndex: "projectId",
|
|
|
+ render: (id) => projects.find((p) => p.id === id)?.name,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "产品",
|
|
|
+ dataIndex: "productId",
|
|
|
+ render: (id) => products.find((p) => p.id === id)?.name,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "状态",
|
|
|
+ dataIndex: "status",
|
|
|
+ render: (s: Device["status"]) =>
|
|
|
+ s === "online" ? <Tag color="green">在线</Tag> : <Tag>离线</Tag>,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "最后上报",
|
|
|
+ dataIndex: "lastSeen",
|
|
|
+ render: (t) => (t ? new Date(t).toLocaleString() : "-"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (_, r) => (
|
|
|
+ <Space>
|
|
|
+ {r.status === "online" ? (
|
|
|
+ <Button size="small" onClick={() => toggleDevice(r.id, false)}>
|
|
|
+ 下线
|
|
|
+ </Button>
|
|
|
+ ) : (
|
|
|
+ <Button size="small" type="primary" onClick={() => toggleDevice(r.id, true)}>
|
|
|
+ 上线
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ icon={<Send size={14} />}
|
|
|
+ onClick={() => setCmdModal({ open: true, device: r })}
|
|
|
+ >
|
|
|
+ 下发指令
|
|
|
+ </Button>
|
|
|
+ <Button size="small" onClick={() => setDataDrawer({ open: true, device: r })}>
|
|
|
+ 上报数据
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <Modal
|
|
|
+ title="注册设备"
|
|
|
+ open={deviceModalOpen}
|
|
|
+ onCancel={() => setDeviceModalOpen(false)}
|
|
|
+ onOk={() => deviceForm.submit()}
|
|
|
+ okText="保存"
|
|
|
+ >
|
|
|
+ <Form form={deviceForm} layout="vertical" onFinish={addDevice}>
|
|
|
+ <Form.Item label="设备ID" name="id" rules={[{ required: true }]}>
|
|
|
+ <Input placeholder="例如：dev-004" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="设备名称" name="name" rules={[{ required: true }]}>
|
|
|
+ <Input placeholder="例如：压力A-004" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="项目" name="projectId" rules={[{ required: true }]}>
|
|
|
+ <Select options={projectOptions} />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="产品" name="productId" rules={[{ required: true }]}>
|
|
|
+ <Select options={productOptions} />
|
|
|
+ </Form.Item>
|
|
|
+ <Row gutter={8}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item label="纬度" name="lat">
|
|
|
+ <Input type="number" placeholder="31.23" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item label="经度" name="lng">
|
|
|
+ <Input type="number" placeholder="121.47" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ title={`下发指令 - ${cmdModal.device?.name ?? ""}`}
|
|
|
+ open={cmdModal.open}
|
|
|
+ onCancel={() => setCmdModal({ open: false })}
|
|
|
+ onOk={() => cmdForm.submit()}
|
|
|
+ okText="发送"
|
|
|
+ >
|
|
|
+ <Form form={cmdForm} layout="vertical" onFinish={sendCommand}>
|
|
|
+ <Form.Item label="服务标识" name="serviceId" rules={[{ required: true }]}>
|
|
|
+ <Input placeholder="例如：reset" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="负载(JSON)" name="payload" rules={[{ required: true }]}>
|
|
|
+ <TextArea rows={6} placeholder='例如：{"delay":5}' />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <Drawer
|
|
|
+ title={`上报数据 - ${dataDrawer.device?.name ?? ""}`}
|
|
|
+ open={dataDrawer.open}
|
|
|
+ onClose={() => setDataDrawer({ open: false })}
|
|
|
+ width={520}
|
|
|
+ >
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ pagination={{ pageSize: 10 }}
|
|
|
+ dataSource={logs.filter((l) => l.deviceId === dataDrawer.device?.id)}
|
|
|
+ columns={[
|
|
|
+ { title: "时间", dataIndex: "time", width: 120 },
|
|
|
+ { title: "级别", dataIndex: "level", width: 80 },
|
|
|
+ { title: "消息", dataIndex: "msg" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Drawer>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "terminal" && (
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={14}>
|
|
|
+ <Card title="设备连接与认证流程">
|
|
|
+ <Steps
|
|
|
+ direction="vertical"
|
|
|
+ items={[
|
|
|
+ {
|
|
|
+ title: "选择协议连接",
|
|
|
+ description: "支持 TCP / UDP / LWM2M / MQTTS / HTTP(S)",
|
|
|
+ icon: <LinkIcon size={16} />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "设备注册（批量/单一）",
|
|
|
+ description: "提供服务交互或页面交互两种方式",
|
|
|
+ icon: <Users size={16} />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "授权与安全认证",
|
|
|
+ description: "加解密与签名认证模块，确保高安全场景",
|
|
|
+ icon: <Lock size={16} />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "上线与心跳",
|
|
|
+ description: "接入后定期保活，保持在线状态",
|
|
|
+ icon: <CheckCircle2 size={16} />,
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ <Divider />
|
|
|
+ <Form
|
|
|
+ layout="vertical"
|
|
|
+ onFinish={() => {
|
|
|
+ globalMessage.success("认证通过")
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Row gutter={12}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item label="设备ID" name="id" rules={[{ required: true }]}>
|
|
|
+ <Input placeholder="dev-xxx" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item label="协议" name="protocol" rules={[{ required: true }]}>
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "TCP", value: "TCP" },
|
|
|
+ { label: "UDP", value: "UDP" },
|
|
|
+ { label: "LWM2M", value: "LWM2M" },
|
|
|
+ { label: "MQTTS", value: "MQTTS" },
|
|
|
+ { label: "HTTP/HTTPS", value: "HTTP/HTTPS" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Form.Item label="设备密钥" name="secret" rules={[{ required: true }]}>
|
|
|
+ <Input.Password placeholder="******" />
|
|
|
+ </Form.Item>
|
|
|
+ <Button type="primary" htmlType="submit" icon={<ShieldCheck size={16} />}>
|
|
|
+ 认证
|
|
|
+ </Button>
|
|
|
+ </Form>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={10}>
|
|
|
+ <Card title="批量注册（CSV）">
|
|
|
+ <Upload.Dragger
|
|
|
+ multiple
|
|
|
+ beforeUpload={() => {
|
|
|
+ globalMessage.success("CSV已接收，已加入处理队列")
|
|
|
+ return false
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <p className="ant-upload-drag-icon">
|
|
|
+ <UploadIcon />
|
|
|
+ </p>
|
|
|
+ <p className="ant-upload-text">点击或拖拽CSV文件到此处上传</p>
|
|
|
+ <p className="ant-upload-hint">示例列：deviceId,productId,projectId,secret</p>
|
|
|
+ </Upload.Dragger>
|
|
|
+ </Card>
|
|
|
+ <Card title="连接参数示例" className="mt-4">
|
|
|
+ <Descriptions size="small" column={1} bordered>
|
|
|
+ <Descriptions.Item label="MQTTS 服务器">mqtts://iot.example.com:8883</Descriptions.Item>
|
|
|
+ <Descriptions.Item label="HTTP 上报">POST https://api.example.com/iot/ingest</Descriptions.Item>
|
|
|
+ <Descriptions.Item label="LWM2M 服务器">coaps://lwm2m.example.com:5684</Descriptions.Item>
|
|
|
+ </Descriptions>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "distribution" && (
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} md={12}>
|
|
|
+ <Card title="数据接入与加工流程">
|
|
|
+ <Timeline
|
|
|
+ items={[
|
|
|
+ {
|
|
|
+ color: "blue",
|
|
|
+ children: "协议接入（TCP/UDP/LWM2M/MQTTS/HTTP）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "green",
|
|
|
+ children: "报文解析（TLV/JSON/自定义）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "green",
|
|
|
+ children: "清洗与标准化（字段映射/单位换算/去噪）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "green",
|
|
|
+ children: "入库（时序/对象/冷存）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "purple",
|
|
|
+ children: "开放共享（发布/订阅）",
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ <Card title="实时发布/订阅" className="mt-4">
|
|
|
+ <Space direction="vertical" style={{ width: "100%" }}>
|
|
|
+ <div className="flex items-center justify-between">
|
|
|
+ <Text>发布主题</Text>
|
|
|
+ <Text code>{`/city/${products[0]?.id ?? "prod"}/pressure`}</Text>
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center gap-8">
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Text type="secondary">发布</Text>
|
|
|
+ <Switch defaultChecked onChange={(c) => globalMessage.success(c ? "已开启发布" : "已关闭发布")} />
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Text type="secondary">订阅</Text>
|
|
|
+ <Switch defaultChecked onChange={(c) => globalMessage.success(c ? "已开启订阅" : "已关闭订阅")} />
|
|
|
+ </div>
|
|
|
+ <Button icon={<Send size={16} />} onClick={() => globalMessage.success("已发布一条消息")}>
|
|
|
+ 推送一条
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </Space>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} md={12}>
|
|
|
+ <Card title="加工结果预览">
|
|
|
+ <pre
|
|
|
+ style={{
|
|
|
+ maxHeight: 320,
|
|
|
+ overflow: "auto",
|
|
|
+ background: "#0b1020",
|
|
|
+ color: "#d6e5ff",
|
|
|
+ padding: 12,
|
|
|
+ borderRadius: 8,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {`{
|
|
|
+ "deviceId": "${devices[0]?.id ?? "dev"}",
|
|
|
+ "ts": "${new Date().toISOString()}",
|
|
|
+ "model": "pressure",
|
|
|
+ "value": ${Number.isFinite(telemetrySeries.ys.at(-1) ?? Number.NaN) ? telemetrySeries.ys.at(-1) : 100},
|
|
|
+ "unit": "kPa",
|
|
|
+ "quality": "good"
|
|
|
+}`}
|
|
|
+ </pre>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "mq" && (
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={10}>
|
|
|
+ <Card title="流量削峰与高并发处理">
|
|
|
+ <QueueGauge backlog={backlog} throughput={throughput} />
|
|
|
+ <Divider />
|
|
|
+ <Text>解耦采集与处理服务，实现高并发接入</Text>
|
|
|
+ <Progress className="mt-3" percent={Math.min(100, Math.round((throughput / 250) * 100))} steps={12} />
|
|
|
+ </Card>
|
|
|
+ <Card title="指标类型转换" className="mt-4">
|
|
|
+ <Form
|
|
|
+ layout="vertical"
|
|
|
+ onFinish={() => globalMessage.success("转换规则已保存")}
|
|
|
+ initialValues={{ topic: "按产品", format: "物模型", compress: false }}
|
|
|
+ >
|
|
|
+ <Form.Item label="主题维度" name="topic">
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "按产品", value: "按产品" },
|
|
|
+ { label: "按物模型指标", value: "按物模型指标" },
|
|
|
+ { label: "按项目", value: "按项目" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="格式转换" name="format">
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "物模型（标准）", value: "物模型" },
|
|
|
+ { label: "CSV", value: "CSV" },
|
|
|
+ { label: "自定义", value: "自定义" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="开启压缩" name="compress" valuePropName="checked">
|
|
|
+ <Switch />
|
|
|
+ </Form.Item>
|
|
|
+ <Button type="primary" htmlType="submit" icon={<Check size={16} />}>
|
|
|
+ 保存
|
|
|
+ </Button>
|
|
|
+ </Form>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={14}>
|
|
|
+ <Card title="转换前/后对比">
|
|
|
+ <Row gutter={12}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Title level={5}>原始数据</Title>
|
|
|
+ <pre
|
|
|
+ style={{
|
|
|
+ background: "#0b1020",
|
|
|
+ color: "#d6e5ff",
|
|
|
+ padding: 12,
|
|
|
+ borderRadius: 8,
|
|
|
+ minHeight: 220,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {`{"dev":"${devices[0]?.id ?? "dev"}","p":${telemetrySeries.ys.at(-1) ?? 100},"ts":${Date.now()}}`}
|
|
|
+ </pre>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Title level={5}>标准化后</Title>
|
|
|
+ <pre
|
|
|
+ style={{
|
|
|
+ background: "#0b1020",
|
|
|
+ color: "#d6e5ff",
|
|
|
+ padding: 12,
|
|
|
+ borderRadius: 8,
|
|
|
+ minHeight: 220,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {`{
|
|
|
+ "deviceId": "${devices[0]?.id ?? "dev"}",
|
|
|
+ "metrics": [{"id":"pressure","value": ${telemetrySeries.ys.at(-1) ?? 100}, "unit":"kPa"}],
|
|
|
+ "timestamp": "${new Date().toISOString()}"
|
|
|
+}`}
|
|
|
+ </pre>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "warehouse" && (
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={14}>
|
|
|
+ <Card title="原始数据（近50条）">
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ dataSource={logs.map((l, i) => ({ ...l, idx: i }))}
|
|
|
+ pagination={{ pageSize: 8 }}
|
|
|
+ columns={[
|
|
|
+ { title: "#", dataIndex: "idx", width: 60 },
|
|
|
+ { title: "时间", dataIndex: "time", width: 120 },
|
|
|
+ { title: "设备ID", dataIndex: "deviceId", width: 140 },
|
|
|
+ { title: "消息", dataIndex: "msg" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={10}>
|
|
|
+ <Card title="ETL 作业">
|
|
|
+ <Collapse
|
|
|
+ items={[
|
|
|
+ {
|
|
|
+ key: "extract",
|
|
|
+ label: "抽取",
|
|
|
+ children: <Text>从接入缓冲区读取原始数据，写入ODS层。</Text>,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "clean",
|
|
|
+ label: "清洗",
|
|
|
+ children: <Text>字段校验、缺失填充、单位换算、异常剔除。</Text>,
|
|
|
+ },
|
|
|
+ { key: "load", label: "加载", children: <Text>入库到时序与事实表，供分析与API服务。</Text> },
|
|
|
+ ]}
|
|
|
+ defaultActiveKey={["extract", "clean", "load"]}
|
|
|
+ />
|
|
|
+ <Divider />
|
|
|
+ <Space>
|
|
|
+ <Button type="primary" icon={<PlayIcon />} onClick={() => globalMessage.success("已触发 ETL 作业")}>
|
|
|
+ 运行一次
|
|
|
+ </Button>
|
|
|
+ <Button icon={<Settings size={16} />} onClick={() => setScheduleModal(true)}>
|
|
|
+ 计划配置
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "openapi" && (
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="接口服务管理">
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ rowKey="name"
|
|
|
+ dataSource={[
|
|
|
+ { name: "实时监测查询", path: "/api/metrics/realtime", status: "running" },
|
|
|
+ { name: "设备状态查询", path: "/api/devices/status", status: "running" },
|
|
|
+ { name: "历史数据查询", path: "/api/metrics/history", status: "stopped" },
|
|
|
+ ]}
|
|
|
+ columns={[
|
|
|
+ { title: "名称", dataIndex: "name" },
|
|
|
+ { title: "路径", dataIndex: "path", render: (p) => <Text code>{p}</Text> },
|
|
|
+ {
|
|
|
+ title: "状态",
|
|
|
+ dataIndex: "status",
|
|
|
+ render: (s) =>
|
|
|
+ s === "running" ? (
|
|
|
+ <Badge status="success" text="运行中" />
|
|
|
+ ) : (
|
|
|
+ <Badge status="default" text="已停止" />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (_, r) => (
|
|
|
+ <Space>
|
|
|
+ <Button size="small" onClick={() => setSvcModal({ open: true, svc: r })}>
|
|
|
+ 配置
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ onClick={() => globalMessage.success(r.status === "running" ? "已停止" : "已启动")}
|
|
|
+ >
|
|
|
+ {r.status === "running" ? "停止" : "启动"}
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="接口定义示例">
|
|
|
+ <pre
|
|
|
+ style={{ background: "#0b1020", color: "#d6e5ff", padding: 12, borderRadius: 8, minHeight: 240 }}
|
|
|
+ >
|
|
|
+ {`GET /api/metrics/realtime?productId=prod1
|
|
|
+
|
|
|
+Response
|
|
|
+{
|
|
|
+ "code": 0,
|
|
|
+ "data": [
|
|
|
+ {"deviceId":"dev-001","metric":"pressure","value": 112.3,"unit":"kPa","ts":"${new Date().toISOString()}"}
|
|
|
+ ]
|
|
|
+}`}
|
|
|
+ </pre>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "micro" && (
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="注册中心（服务发现/健康检查/负载均衡）">
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ rowKey="name"
|
|
|
+ dataSource={[
|
|
|
+ {
|
|
|
+ name: "ingest-service",
|
|
|
+ addr: "10.0.0.2:7001",
|
|
|
+ status: Math.random() > 0.05 ? "UP" : "DOWN",
|
|
|
+ load: "32%",
|
|
|
+ },
|
|
|
+ { name: "parser-service", addr: "10.0.0.3:7002", status: "UP", load: "41%" },
|
|
|
+ { name: "mq-gateway", addr: "10.0.0.4:7003", status: "UP", load: "27%" },
|
|
|
+ { name: "api-service", addr: "10.0.0.5:7004", status: "UP", load: "36%" },
|
|
|
+ ]}
|
|
|
+ columns={[
|
|
|
+ { title: "服务", dataIndex: "name" },
|
|
|
+ { title: "地址", dataIndex: "addr" },
|
|
|
+ {
|
|
|
+ title: "状态",
|
|
|
+ dataIndex: "status",
|
|
|
+ render: (s) =>
|
|
|
+ s === "UP" ? <Badge status="success" text="UP" /> : <Badge status="error" text="DOWN" />,
|
|
|
+ },
|
|
|
+ { title: "负载", dataIndex: "load" },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (_, r) => (
|
|
|
+ <Space>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ icon={<RefreshCw size={14} />}
|
|
|
+ onClick={() => globalMessage.success(`已触发健康检查：${r.name}`)}
|
|
|
+ >
|
|
|
+ 健康检查
|
|
|
+ </Button>
|
|
|
+ <Button size="small" onClick={() => setWeightModal({ open: true, weight: 50 })}>
|
|
|
+ 权重
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="配置中心（动态配置/多环境）">
|
|
|
+ <Form
|
|
|
+ layout="vertical"
|
|
|
+ onFinish={() => globalMessage.success("配置已更新")}
|
|
|
+ initialValues={{ env: "dev", log: "info", db: "postgres://neon-db/..." }}
|
|
|
+ >
|
|
|
+ <Form.Item label="环境" name="env">
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "开发", value: "dev" },
|
|
|
+ { label: "测试", value: "test" },
|
|
|
+ { label: "生产", value: "prod" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="日志级别" name="log">
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "debug", value: "debug" },
|
|
|
+ { label: "info", value: "info" },
|
|
|
+ { label: "warn", value: "warn" },
|
|
|
+ { label: "error", value: "error" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="数据库连接串" name="db">
|
|
|
+ <Input placeholder="postgres://..." />
|
|
|
+ </Form.Item>
|
|
|
+ <Space>
|
|
|
+ <Button type="primary" htmlType="submit" icon={<Check size={16} />}>
|
|
|
+ 保存并推送
|
|
|
+ </Button>
|
|
|
+ <Button icon={<Cog size={16} />} onClick={() => setApiAccessModal(true)}>
|
|
|
+ 访问接口
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </Form>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {activeKey === "auth" && (
|
|
|
+ <Row gutter={[16, 16]}>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="OAuth 2.0">
|
|
|
+ <Form
|
|
|
+ layout="vertical"
|
|
|
+ onFinish={() => globalMessage.success("已签发示例Token")}
|
|
|
+ initialValues={{ clientId: "demo-client", scope: "read:devices", grant: "client_credentials" }}
|
|
|
+ >
|
|
|
+ <Form.Item label="Client ID" name="clientId" rules={[{ required: true }]}>
|
|
|
+ <Input />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="授权范围" name="scope">
|
|
|
+ <Input placeholder="read:devices write:commands" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="授权模式" name="grant">
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "Client Credentials", value: "client_credentials" },
|
|
|
+ { label: "Authorization Code", value: "authorization_code" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Button type="primary" htmlType="submit" icon={<ShieldCheck size={16} />}>
|
|
|
+ 获取Token
|
|
|
+ </Button>
|
|
|
+ </Form>
|
|
|
+ <Divider />
|
|
|
+ <Text>示例Token</Text>
|
|
|
+ <pre style={{ background: "#0b1020", color: "#d6e5ff", padding: 12, borderRadius: 8 }}>
|
|
|
+ {"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.demo.payload.signature"}
|
|
|
+ </pre>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} lg={12}>
|
|
|
+ <Card title="RBAC 权限管理">
|
|
|
+ <Row gutter={12}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Title level={5}>角色</Title>
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ pagination={false}
|
|
|
+ dataSource={[
|
|
|
+ { key: "r1", name: "管理员", perms: "ALL" },
|
|
|
+ { key: "r2", name: "运维", perms: "devices:read, commands:write" },
|
|
|
+ { key: "r3", name: "访客", perms: "devices:read" },
|
|
|
+ ]}
|
|
|
+ columns={[
|
|
|
+ { title: "角色", dataIndex: "name" },
|
|
|
+ { title: "权限", dataIndex: "perms" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Title level={5}>用户</Title>
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ pagination={false}
|
|
|
+ dataSource={[
|
|
|
+ { key: "u1", name: "alice", role: "管理员" },
|
|
|
+ { key: "u2", name: "bob", role: "运维" },
|
|
|
+ ]}
|
|
|
+ columns={[
|
|
|
+ { title: "用户", dataIndex: "name" },
|
|
|
+ { title: "角色", dataIndex: "role" },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (_, r) => (
|
|
|
+ <Button size="small" onClick={() => setRbacModal({ open: true, user: r })}>
|
|
|
+ 分配权限
|
|
|
+ </Button>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )}
|
|
|
+ </Content>
|
|
|
+ </Layout>
|
|
|
+
|
|
|
+ {/* Drawer: 设备注册引导 */}
|
|
|
+ <Drawer title="设备注册与授权" open={registerDrawer} onClose={() => setRegisterDrawer(false)} width={640}>
|
|
|
+ <Steps
|
|
|
+ current={1}
|
|
|
+ items={[{ title: "选择产品" }, { title: "注册设备" }, { title: "获取密钥" }, { title: "接入测试" }]}
|
|
|
+ />
|
|
|
+ <Divider />
|
|
|
+ <Form
|
|
|
+ layout="vertical"
|
|
|
+ onFinish={(v) => {
|
|
|
+ addDevice({
|
|
|
+ id: v.id,
|
|
|
+ name: v.name,
|
|
|
+ projectId: products.find((p) => p.id === v.productId)?.projectId ?? projects[0]?.id,
|
|
|
+ productId: v.productId,
|
|
|
+ lat: 31.23 + Math.random() * 0.05,
|
|
|
+ lng: 121.47 + Math.random() * 0.05,
|
|
|
+ })
|
|
|
+ globalMessage.success("注册成功")
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Form.Item label="产品" name="productId" rules={[{ required: true }]}>
|
|
|
+ <Select options={productOptions} />
|
|
|
+ </Form.Item>
|
|
|
+ <Row gutter={12}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item label="设备ID" name="id" rules={[{ required: true }]}>
|
|
|
+ <Input placeholder="dev-xxx" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item label="设备名称" name="name" rules={[{ required: true }]}>
|
|
|
+ <Input />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Form.Item>
|
|
|
+ <Space>
|
|
|
+ <Button htmlType="submit" type="primary" icon={<Check size={16} />}>
|
|
|
+ 注册
|
|
|
+ </Button>
|
|
|
+ <Button icon={<UploadIcon size={16} />} onClick={() => globalMessage.success("已接收CSV")}>
|
|
|
+ 导入CSV
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ <Divider />
|
|
|
+ <Title level={5}>连接示例（MQTTS）</Title>
|
|
|
+ <pre style={{ background: "#0b1020", color: "#d6e5ff", padding: 12, borderRadius: 8 }}>
|
|
|
+ {`mqtts://iot.example.com:8883
|
|
|
+username: <deviceId>
|
|
|
+password: <deviceSecret>
|
|
|
+topic: /up/<product>/<deviceId>`}
|
|
|
+ </pre>
|
|
|
+ </Drawer>
|
|
|
+
|
|
|
+ {/* Notifications modal */}
|
|
|
+ <Modal title="通知中心" open={notifOpen} onCancel={() => setNotifOpen(false)} onOk={() => setNotifOpen(false)}>
|
|
|
+ {alertLogs.length === 0 ? (
|
|
|
+ <Text type="secondary">暂无告警</Text>
|
|
|
+ ) : (
|
|
|
+ <Table
|
|
|
+ size="small"
|
|
|
+ pagination={false}
|
|
|
+ dataSource={alertLogs}
|
|
|
+ columns={[
|
|
|
+ { title: "时间", dataIndex: "time", width: 120 },
|
|
|
+ { title: "设备ID", dataIndex: "deviceId", width: 140 },
|
|
|
+ { title: "消息", dataIndex: "msg" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ {/* OpenAPI config modal */}
|
|
|
+ <Modal
|
|
|
+ title={`服务配置 - ${svcModal.svc?.name ?? ""}`}
|
|
|
+ open={svcModal.open}
|
|
|
+ onCancel={() => setSvcModal({ open: false })}
|
|
|
+ onOk={() => {
|
|
|
+ setSvcModal({ open: false })
|
|
|
+ globalMessage.success("配置已保存")
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Form layout="vertical" initialValues={svcModal.svc}>
|
|
|
+ <Form.Item label="名称" name="name">
|
|
|
+ <Input disabled />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="路径" name="path">
|
|
|
+ <Input />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="限流（req/s）" name="qps">
|
|
|
+ <Input placeholder="例如 200" />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ {/* Service weight modal */}
|
|
|
+ <Modal
|
|
|
+ title="实例权重"
|
|
|
+ open={weightModal.open}
|
|
|
+ onCancel={() => setWeightModal((s) => ({ ...s, open: false }))}
|
|
|
+ onOk={() => {
|
|
|
+ setWeightModal((s) => ({ ...s, open: false }))
|
|
|
+ globalMessage.success(`已设置权重：${weightModal.weight}`)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Slider
|
|
|
+ min={0}
|
|
|
+ max={100}
|
|
|
+ value={weightModal.weight}
|
|
|
+ onChange={(v) => setWeightModal({ open: true, weight: Number(v) })}
|
|
|
+ />
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ {/* Warehouse schedule modal */}
|
|
|
+ <Modal
|
|
|
+ title="ETL 计划配置"
|
|
|
+ open={scheduleModal}
|
|
|
+ onCancel={() => setScheduleModal(false)}
|
|
|
+ onOk={() => {
|
|
|
+ setScheduleModal(false)
|
|
|
+ globalMessage.success("计划已保存")
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Form layout="vertical" initialValues={{ cron: "0 */1 * * *", retry: 3 }}>
|
|
|
+ <Form.Item label="Cron 表达式" name="cron">
|
|
|
+ <Input />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="失败重试次数" name="retry">
|
|
|
+ <Input type="number" />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ {/* Config center API access modal */}
|
|
|
+ <Modal
|
|
|
+ title="配置访问接口"
|
|
|
+ open={apiAccessModal}
|
|
|
+ onCancel={() => setApiAccessModal(false)}
|
|
|
+ onOk={() => setApiAccessModal(false)}
|
|
|
+ >
|
|
|
+ <Descriptions size="small" column={1} bordered>
|
|
|
+ <Descriptions.Item label="GET">
|
|
|
+ <Text code>/config/{`{env}`}</Text>
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="POST 推送更新">
|
|
|
+ <Text code>/config/push</Text>
|
|
|
+ </Descriptions.Item>
|
|
|
+ </Descriptions>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ {/* RBAC assign modal */}
|
|
|
+ <Modal
|
|
|
+ title={`分配权限 - ${rbacModal.user?.name ?? ""}`}
|
|
|
+ open={rbacModal.open}
|
|
|
+ onCancel={() => setRbacModal({ open: false })}
|
|
|
+ onOk={() => {
|
|
|
+ setRbacModal({ open: false })
|
|
|
+ globalMessage.success("权限已更新")
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Form layout="vertical" initialValues={{ role: rbacModal.user?.role ?? "访客" }}>
|
|
|
+ <Form.Item label="角色" name="role">
|
|
|
+ <Select
|
|
|
+ options={[
|
|
|
+ { label: "管理员", value: "管理员" },
|
|
|
+ { label: "运维", value: "运维" },
|
|
|
+ { label: "访客", value: "访客" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </Layout>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+function PlusIcon() {
|
|
|
+ return (
|
|
|
+ <span aria-hidden className="inline-flex">
|
|
|
+ <svg width="0" height="0" />
|
|
|
+ </span>
|
|
|
+ )
|
|
|
+}
|
|
|
+function AlertIcon() {
|
|
|
+ return (
|
|
|
+ <span aria-hidden className="inline-flex">
|
|
|
+ <svg width="0" height="0" />
|
|
|
+ </span>
|
|
|
+ )
|
|
|
+}
|
|
|
+function PlayIcon() {
|
|
|
+ return (
|
|
|
+ <span aria-hidden className="inline-flex">
|
|
|
+ <svg width="0" height="0" />
|
|
|
+ </span>
|
|
|
+ )
|
|
|
+}
|
