添加归档页面

src/layouts/BasicLayout.tsx

@@ -13,6 +13,7 @@ import HomePage from '@/pages/demo/HomePage';
 import RegisterPage from '@/pages/patient/register';
 import WorklistPage from '@/pages/patient/worklist';
 import HistorylistPage from '@/pages/patient/HistoryList';
+import ArchivelistPage from '@/pages/patient/ArchiveList';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -47,7 +48,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
         'process': <HomePage />,
         'register':<RegisterPage />,
         'worklist':<WorklistPage />,
-        'historylist':<HistorylistPage />
+        'historylist':<HistorylistPage />,
+        'archivelist':<ArchivelistPage />
     };
     //感知菜单项点击
     const handleMenuClick=(key:string)=>{

src/pages/patient/ArchiveList.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Row, Col, Button, Drawer, Grid, Pagination } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import WorklistTable from './components/WorklistTable';
+import ArchiveOperationPanel from './components/ArchiveOperationPanel';
+
+const { useBreakpoint } = Grid;
+
+const ArchivelistPage: React.FC = () => {
+  const screens = useBreakpoint();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  return (
+    <div className="p-4">
+      {screens.xs ? (
+        <>
+          <WorklistTable />
+          <Button
+            type="primary"
+            shape="circle"
+            icon={<SettingOutlined />}
+            className="fixed bottom-6 right-6 z-50"
+            onClick={() => setDrawerVisible(true)}
+          />
+          <Drawer
+            title="操作面板"
+            placement="left"
+            onClose={() => setDrawerVisible(false)}
+            open={drawerVisible}
+            width={300}
+          >
+            <ArchiveOperationPanel />
+          </Drawer>
+        </>
+      ) : (
+        <Row gutter={16}>
+          <Col span={screens.lg ? 18 : screens.md ? 20 : 24}>
+            <WorklistTable />
+            <div className="flex justify-center mt-4">
+                <Pagination defaultCurrent={1} total={50} />
+            </div>
+          </Col>
+          <Col span={screens.lg ? 6 : screens.md ? 4 : 0}>
+            <ArchiveOperationPanel />
+          </Col>
+        </Row>
+      )}
+    </div>
+  );
+};
+
+export default ArchivelistPage;

src/pages/patient/components/ArchiveOperationPanel.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import SearchPanel from './SearchPanel';
+import DicomNodeDetailPanel from './DicomNodeDetailPanel';
+
+const ArchiveOperationPanel: React.FC = () => {
+  return (
+    <div className="w-full">
+      <SearchPanel />
+      <div className="mt-4">
+        <DicomNodeDetailPanel nodeList={[
+          {
+            id: '1',
+            name: 'CT Scanner',
+            calledAET: 'CT_AE',
+            ip: '192.168.1.100',
+            host:'host7',
+            port: '11112',
+            callingAET:'ccc'
+          },
+          {
+            id: '2',
+            name: 'CT Scanner',
+            calledAET: 'CT_AE',
+            ip: '192.168.1.152',
+            host:'host7',
+            port: '852',
+            callingAET:'8548'
+          }
+        ]} />
+        </div>
+    </div>
+  );
+};
+
+export default ArchiveOperationPanel;

src/pages/patient/components/DicomNodeDetailPanel.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Card, Form, Select, Input, Row, Col, Tooltip, Button, Space } from 'antd';
+import { LinkOutlined, InboxOutlined } from '@ant-design/icons';
+
+const { Option } = Select;
+
+interface DicomNode {
+  id: string;
+  name: string;
+  host: string;
+  ip: string;
+  port: string;
+  calledAET: string;
+  callingAET: string;
+}
+
+interface Props {
+  nodeList: DicomNode[];
+  selectedNodeId?: string;
+  onNodeChange?: (id: string) => void;
+  onTestConnection?: () => void;
+  onArchive?: () => void;
+}
+
+const DicomNodeDetailPanel: React.FC<Props> = ({
+  nodeList,
+  selectedNodeId,
+  onNodeChange,
+  onTestConnection,
+  onArchive,
+}) => {
+  const selectedNode = nodeList.find(node => node.id === selectedNodeId);
+
+  return (
+    <Card title="DICOM节点详情" bordered={false}>
+      <Form layout="vertical">
+        <Form.Item label="DICOM节点列表">
+          <Select
+            value={selectedNodeId}
+            onChange={onNodeChange}
+            style={{ width: '100%' }}
+            placeholder="请选择DICOM节点"
+          >
+            {nodeList.map(node => (
+              <Option key={node.id} value={node.id}>
+                {node.name}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Row gutter={16}>
+          <Col span={12}>
+            <Form.Item label="主机名称">
+              <Input value={selectedNode?.host} readOnly />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="主机IP">
+              <Input value={selectedNode?.ip} readOnly />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={16}>
+          <Col span={8}>
+            <Form.Item label="主机端口">
+              <Input value={selectedNode?.port} readOnly />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="被叫实体名">
+              <Input value={selectedNode?.calledAET} readOnly />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item label="主叫实体名">
+              <Input value={selectedNode?.callingAET} readOnly />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Form.Item>
+          <Space>
+            <Tooltip title="测试连接状态">
+              <Button
+                icon={<LinkOutlined />}
+                onClick={onTestConnection}
+                type="default"
+              />
+            </Tooltip>
+            <Tooltip title="归档">
+              <Button
+                icon={<InboxOutlined />}
+                onClick={onArchive}
+                type="default"
+              />
+            </Tooltip>
+          </Space>
+        </Form.Item>
+      </Form>
+    </Card>
+  );
+};
+
+export default DicomNodeDetailPanel;