hikvision-web 1.0.0

package/src/pages/CardList.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useState } from 'react';
+import { Table, Button, Input, Space, Modal, Select, Tag } from 'antd';
+import { SearchOutlined, PlusOutlined, EditOutlined, WarningOutlined } from '@ant-design/icons';
+import { useAppStore } from '../store/appStore';
+import { cardApi } from '../services/api';
+import { Link } from 'react-router-dom';
+
+const { Search } = Input;
+
+export default function CardList() {
+  const { cards, isCardLoading, loadCards } = useAppStore();
+
+  const [searchCardNo, setSearchCardNo] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [unbindModal, setUnbindModal] = useState<{ visible: boolean; cardNo?: string; personName?: string }>({ visible: false });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      loadCards({ pageNo: page, pageSize });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [page, pageSize]);
+
+  const handleSearch = () => {
+    setPage(1);
+    loadCards({ pageNo: 1, pageSize });
+  };
+
+  const handleUnbind = async () => {
+    if (!unbindModal.cardNo) return;
+    try {
+      // 先获取卡片信息获取 personId
+      const result: any = await cardApi.getByCardNo(unbindModal.cardNo);
+      await cardApi.unbind(unbindModal.cardNo, result.card?.personId || '');
+      alert('退卡成功');
+      setUnbindModal({ visible: false });
+      loadCards({ pageNo: page, pageSize });
+    } catch (error: any) {
+      alert(`退卡失败: ${error.message || error}`);
+    }
+  };
+
+  const columns = [
+    {
+      title: '卡片 ID',
+      dataIndex: 'cardId',
+      key: 'cardId',
+      width: 200,
+      render: (text: string) => <code style={{ fontSize: 12 }}>{text}</code>,
+    },
+    {
+      title: '卡号',
+      dataIndex: 'cardNo',
+      key: 'cardNo',
+      width: 150,
+    },
+    {
+      title: '卡片类型',
+      dataIndex: 'cardType',
+      key: 'cardType',
+      width: 80,
+      render: (t: string) => {
+        const map: Record<string, string> = { '0': '普通卡', '1': '临时卡', '2': '特殊卡' };
+        return map[t] || t;
+      },
+    },
+    {
+      title: '持卡人',
+      dataIndex: 'personName',
+      key: 'personName',
+      width: 100,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 80,
+      render: (s: string) => {
+        const map: Record<string, { text: string; color: string }> = {
+          '0': { text: '正常', color: 'green' },
+          '1': { text: '挂失', color: 'orange' },
+          '2': { text: '退卡', color: 'gray' },
+          '3': { text: '损坏', color: 'red' },
+        };
+        const item = map[s] || { text: s, color: 'default' };
+        return <Tag color={item.color}>{item.text}</Tag>;
+      },
+    },
+    {
+      title: '发卡时间',
+      dataIndex: 'issueTime',
+      key: 'issueTime',
+      width: 160,
+      render: (t: string) => t ? new Date(t).toLocaleString() : '-',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 180,
+      render: (_: any, record: any) => (
+        <Space size="small">
+          {record.status === '0' && (
+            <Button
+              type="link"
+              danger
+              icon={<WarningOutlined />}
+              size="small"
+              onClick={() => setUnbindModal({ visible: true, cardNo: record.cardNo, personName: record.personName })}
+            >
+              退卡
+            </Button>
+          )}
+          {record.status === '1' && (
+            <Button
+              type="link"
+              icon={<EditOutlined />}
+              size="small"
+              onClick={async () => {
+                try {
+                  await cardApi.unloss(record.cardNo);
+                  alert('解挂成功');
+                  loadCards({ pageNo: page, pageSize });
+                } catch (e: any) {
+                  alert(`解挂失败: ${e.message || e}`);
+                }
+              }}
+            >
+              解挂
+            </Button>
+          )}
+          <Link to={`/card/add?ref=${record.cardNo}`}>
+            <Button type="link" icon={<PlusOutlined />} size="small">复制</Button>
+          </Link>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 className="page-title" style={{ marginBottom: 0 }}>卡片管理</h2>
+        <Link to="/card/add">
+          <Button type="primary" icon={<PlusOutlined />}>开卡</Button>
+        </Link>
+      </div>
+
+      <div style={{ marginBottom: 16, display: 'flex', gap: 8 }}>
+        <Search
+          placeholder="搜索卡号"
+          value={searchCardNo}
+          onChange={(e) => setSearchCardNo(e.target.value)}
+          onPressEnter={handleSearch}
+          style={{ width: 200 }}
+        />
+        <Button icon={<SearchOutlined />} onClick={handleSearch}>搜索</Button>
+        <Select
+          value={pageSize}
+          onChange={(v) => { setPageSize(v); setPage(1); }}
+          style={{ width: 100 }}
+          options={[{ value: 10, label: '10/页' }, { value: 20, label: '20/页' }, { value: 50, label: '50/页' }]}
+        />
+      </div>
+
+      <Table
+        columns={columns}
+        dataSource={cards}
+        rowKey="cardNo"
+        loading={isCardLoading}
+        pagination={{
+          current: page,
+          pageSize,
+          showSizeChanger: true,
+          showTotal: (t) => `共 ${t} 条`,
+          onChange: (p, ps) => { setPage(p); setPageSize(ps); },
+        }}
+      />
+
+      <Modal
+        title="确认退卡"
+        open={unbindModal.visible}
+        onOk={handleUnbind}
+        onCancel={() => setUnbindModal({ visible: false })}
+        okText="确认退卡"
+        okButtonProps={{ danger: true }}
+      >
+        <p>确定要为 <strong>{unbindModal.personName}</strong> 退卡 <strong>{unbindModal.cardNo}</strong> 吗？</p>
+        <p style={{ color: '#ff4d4f' }}>此操作不可撤销！</p>
+      </Modal>
+    </div>
+  );
+}

package/src/pages/DashboardPage.tsx

@@ -0,0 +1,300 @@
+import { useState, useEffect } from 'react';
+import { Card, Row, Col, Statistic, Spin, Typography, Tabs, Progress } from 'antd';
+import { UserOutlined, TeamOutlined, CarOutlined, IdcardOutlined } from '@ant-design/icons';
+import { statApi } from '../services/api';
+
+const { Title } = Typography;
+const { TabPane } = Tabs;
+
+interface Stats {
+  personCount: number;
+  orgCount: number;
+  vehicleCount: number;
+  cardCount: number;
+}
+
+interface OrgPersonStat {
+  orgIndexCode: string;
+  orgName: string;
+  orgPath: string;
+  personCount: number;
+}
+
+interface VehicleStat {
+  total: number;
+  boundCount: number;
+  unboundCount: number;
+  boundPercent: number;
+  unboundPercent: number;
+}
+
+interface CardStat {
+  total: number;
+  activeCount: number;
+  inactiveCount: number;
+  activePercent: number;
+  inactivePercent: number;
+}
+
+export default function DashboardPage() {
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [orgStats, setOrgStats] = useState<OrgPersonStat[]>([]);
+  const [vehicleStat, setVehicleStat] = useState<VehicleStat | null>(null);
+  const [cardStat, setCardStat] = useState<CardStat | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadBasicStats();
+  }, []);
+
+  const loadBasicStats = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res: any = await statApi.getStats();
+      if (res.success) {
+        setStats(res.data);
+      } else {
+        setError(res.message || '加载失败');
+      }
+    } catch (e: any) {
+      setError(e.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadDetailStats = async () => {
+    if (orgStats.length > 0) return; // 已加载
+    setDetailLoading(true);
+    try {
+      const orgRes: any = await statApi.getPersonsByOrg();
+      const vehicleRes: any = await statApi.getVehiclesByStatus();
+      const cardRes: any = await statApi.getCardsByStatus();
+      
+      if (orgRes.success) setOrgStats(orgRes.data);
+      if (vehicleRes.success) setVehicleStat(vehicleRes.data);
+      if (cardRes.success) setCardStat(cardRes.data);
+    } catch (e: any) {
+      console.error('加载明细失败', e);
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: 60 }}>
+        <Spin size="large" />
+        <div style={{ marginTop: 16 }}>加载中...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ textAlign: 'center', padding: 60 }}>
+        <div style={{ color: '#ff4d4f' }}>加载失败: {error}</div>
+        <div style={{ marginTop: 16 }}>
+          <a onClick={loadBasicStats}>重新加载</a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Title level={3}>📊 系统概览</Title>
+      
+      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
+        <Col xs={24} sm={12} md={6}>
+          <Card>
+            <Statistic
+              title="人员总数"
+              value={stats?.personCount || 0}
+              prefix={<UserOutlined />}
+              valueStyle={{ color: '#1890ff' }}
+            />
+          </Card>
+        </Col>
+        
+        <Col xs={24} sm={12} md={6}>
+          <Card>
+            <Statistic
+              title="组织总数"
+              value={stats?.orgCount || 0}
+              prefix={<TeamOutlined />}
+              valueStyle={{ color: '#52c41a' }}
+            />
+          </Card>
+        </Col>
+        
+        <Col xs={24} sm={12} md={6}>
+          <Card>
+            <Statistic
+              title="车辆总数"
+              value={stats?.vehicleCount || 0}
+              prefix={<CarOutlined />}
+              valueStyle={{ color: '#faad14' }}
+            />
+          </Card>
+        </Col>
+        
+        <Col xs={24} sm={12} md={6}>
+          <Card>
+            <Statistic
+              title="卡片总数"
+              value={stats?.cardCount || 0}
+              prefix={<IdcardOutlined />}
+              valueStyle={{ color: '#f5222d' }}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      <Tabs defaultActiveKey="overview" onTabClick={loadDetailStats}>
+        <TabPane tab="人员分布" key="persons-by-org">
+          <Card 
+            title="各组织人员分布" 
+            extra={<span style={{ color: '#999' }}>共 {orgStats.length} 个组织，{stats?.personCount || 0} 人</span>}
+            loading={detailLoading}
+          >
+            {orgStats.length > 0 ? (
+              <div style={{ maxHeight: 500, overflowY: 'auto' }}>
+                {orgStats.map((org) => {
+                  const percent = stats?.personCount ? Math.round(org.personCount / stats.personCount * 100) : 0;
+                  return (
+                    <div key={org.orgIndexCode} style={{ marginBottom: 12 }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
+                        <span title={org.orgPath} style={{ maxWidth: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{org.orgPath}</span>
+                        <span style={{ color: '#666' }}>{org.personCount} 人 ({percent}%)</span>
+                      </div>
+                      <Progress 
+                        percent={percent} 
+                        strokeColor={percent > 20 ? '#1890ff' : '#52c41a'}
+                        size="small"
+                        showInfo={false}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>
+                点击标签页加载数据
+              </div>
+            )}
+          </Card>
+        </TabPane>
+
+        <TabPane tab="车辆状态" key="vehicles-by-status">
+          <Card title="车辆绑定状态" loading={detailLoading}>
+            {vehicleStat ? (
+              <Row gutter={[16, 16]}>
+                <Col xs={24} sm={8}>
+                  <Card size="small">
+                    <Statistic
+                      title="已绑定"
+                      value={vehicleStat.boundCount}
+                      suffix={`/ ${vehicleStat.total}`}
+                      valueStyle={{ color: '#52c41a' }}
+                    />
+                    <Progress 
+                      percent={vehicleStat.boundPercent} 
+                      strokeColor="#52c41a"
+                      style={{ marginTop: 8 }}
+                    />
+                  </Card>
+                </Col>
+                <Col xs={24} sm={8}>
+                  <Card size="small">
+                    <Statistic
+                      title="未绑定"
+                      value={vehicleStat.unboundCount}
+                      suffix={`/ ${vehicleStat.total}`}
+                      valueStyle={{ color: '#ff4d4f' }}
+                    />
+                    <Progress 
+                      percent={vehicleStat.unboundPercent} 
+                      strokeColor="#ff4d4f"
+                      style={{ marginTop: 8 }}
+                    />
+                  </Card>
+                </Col>
+                <Col xs={24} sm={8}>
+                  <Card size="small" type="inner">
+                    <Statistic
+                      title="绑定率"
+                      value={vehicleStat.boundPercent}
+                      suffix="%"
+                      valueStyle={{ color: '#1890ff' }}
+                    />
+                  </Card>
+                </Col>
+              </Row>
+            ) : (
+              <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>
+                点击标签页加载数据
+              </div>
+            )}
+          </Card>
+        </TabPane>
+
+        <TabPane tab="卡片状态" key="cards-by-status">
+          <Card title="卡片状态" loading={detailLoading}>
+            {cardStat ? (
+              <Row gutter={[16, 16]}>
+                <Col xs={24} sm={8}>
+                  <Card size="small">
+                    <Statistic
+                      title="正常卡片"
+                      value={cardStat.activeCount}
+                      suffix={`/ ${cardStat.total}`}
+                      valueStyle={{ color: '#52c41a' }}
+                    />
+                    <Progress 
+                      percent={cardStat.activePercent} 
+                      strokeColor="#52c41a"
+                      style={{ marginTop: 8 }}
+                    />
+                  </Card>
+                </Col>
+                <Col xs={24} sm={8}>
+                  <Card size="small">
+                    <Statistic
+                      title="禁用/未发放"
+                      value={cardStat.inactiveCount}
+                      suffix={`/ ${cardStat.total}`}
+                      valueStyle={{ color: '#ff4d4f' }}
+                    />
+                    <Progress 
+                      percent={cardStat.inactivePercent} 
+                      strokeColor="#ff4d4f"
+                      style={{ marginTop: 8 }}
+                    />
+                  </Card>
+                </Col>
+                <Col xs={24} sm={8}>
+                  <Card size="small" type="inner">
+                    <Statistic
+                      title="正常率"
+                      value={cardStat.activePercent}
+                      suffix="%"
+                      valueStyle={{ color: '#1890ff' }}
+                    />
+                  </Card>
+                </Col>
+              </Row>
+            ) : (
+              <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>
+                点击标签页加载数据
+              </div>
+            )}
+          </Card>
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+}