feat: 导入数据前端列表显示
This commit is contained in:
parent
d4a43e211a
commit
40717541d4
|
@ -1,24 +1,38 @@
|
|||
import path from "node:path";
|
||||
import { JSONFilePreset } from "lowdb/node";
|
||||
import { app } from "electron";
|
||||
import { Low } from "node_modules/lowdb/lib/core/Low";
|
||||
import { StructuredMetadata } from "./dicom";
|
||||
|
||||
const initDb = async () => {
|
||||
// Read or create db.json
|
||||
const defaultData = { posts: [] };
|
||||
const db = await JSONFilePreset(
|
||||
path.join(app.getPath("userData"), "db.json"),
|
||||
defaultData
|
||||
);
|
||||
interface ICreateDatabase {
|
||||
name: string;
|
||||
}
|
||||
|
||||
// Update db.json
|
||||
await db.update(({ posts }) => posts.push("hello world"));
|
||||
|
||||
// Alternatively you can call db.write() explicitely later
|
||||
// to write to db.json
|
||||
db.data.posts.push("hello world");
|
||||
await db.write();
|
||||
|
||||
console.log(db);
|
||||
type SeriesTableType = StructuredMetadata & {
|
||||
createTime?: number;
|
||||
updateTime?: number;
|
||||
};
|
||||
|
||||
initDb();
|
||||
interface DbTable {
|
||||
series: SeriesTableType[];
|
||||
}
|
||||
|
||||
const defaultData: DbTable = { series: [] };
|
||||
export let db: Low<{ series: SeriesTableType[] }>;
|
||||
|
||||
export const createDatabase = async (config: ICreateDatabase) => {
|
||||
const { name } = config;
|
||||
db = await JSONFilePreset(
|
||||
path.join(app.getPath("userData"), name),
|
||||
defaultData
|
||||
);
|
||||
};
|
||||
|
||||
// Update db.json
|
||||
// await db.update(({ posts }) => posts.push("hello world"));
|
||||
|
||||
// Alternatively you can call db.write() explicitely later to write to db.json
|
||||
// db.data.posts.push("hello world");
|
||||
// await db.write();
|
||||
|
||||
// console.log(db);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import path from "path";
|
||||
import * as dicomParser from "dicom-parser";
|
||||
import fs from "fs";
|
||||
import crypto from 'crypto';
|
||||
import crypto from "crypto";
|
||||
|
||||
export interface StructuredData {
|
||||
[SeriesInstanceUID: string]: ExtractMetadata[];
|
||||
|
@ -13,6 +13,8 @@ export interface ExtractMetadata {
|
|||
SeriesInstanceUID?: string;
|
||||
PatientName?: string;
|
||||
pixelData?: Uint16Array;
|
||||
PatientSex: string;
|
||||
PatientAge: string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -77,6 +79,8 @@ export const parseDICOMFile = async (
|
|||
const StudyInstanceUID = dataSet.string("x0020000d");
|
||||
const SeriesInstanceUID = dataSet.string("x0020000e");
|
||||
const PatientName = dataSet.string("x00100030");
|
||||
const PatientSex = dataSet.string("x00100040") ?? "";
|
||||
const PatientAge = dataSet.string("x00101010") ?? "";
|
||||
const pixelDataElement = dataSet.elements.x7fe00010;
|
||||
const pixelData = new Uint16Array(
|
||||
dataSet.byteArray.buffer,
|
||||
|
@ -89,6 +93,8 @@ export const parseDICOMFile = async (
|
|||
StudyInstanceUID,
|
||||
SeriesInstanceUID,
|
||||
PatientName,
|
||||
PatientSex,
|
||||
PatientAge,
|
||||
// pixelData,
|
||||
};
|
||||
} catch (error) {
|
||||
|
@ -129,34 +135,37 @@ export interface StructuredMetadata {
|
|||
StudyInstanceUID?: string;
|
||||
SeriesInstanceUID?: string;
|
||||
PatientName?: string;
|
||||
fileHash: string[]
|
||||
fileHash: string[];
|
||||
PatientSex: string;
|
||||
PatientAge: string;
|
||||
}
|
||||
|
||||
export interface ScanProgress {
|
||||
percentage: number
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
// 计算文件的哈希值
|
||||
async function calculateFileHash(filePath: string): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const hash = crypto.createHash('sha256');
|
||||
const hash = crypto.createHash("sha256");
|
||||
const stream = fs.createReadStream(filePath);
|
||||
|
||||
stream.on('error', reject);
|
||||
stream.pipe(hash).on('finish', () => resolve(hash.digest('hex')));
|
||||
stream.on("error", reject);
|
||||
stream.pipe(hash).on("finish", () => resolve(hash.digest("hex")));
|
||||
});
|
||||
}
|
||||
|
||||
// 序列级别
|
||||
export const keyProp = "SeriesInstanceUID";
|
||||
|
||||
export const structureMetadata = async (
|
||||
data: ExtractMetadata[],
|
||||
progressCallback?: (progress: ScanProgress) => void
|
||||
): Promise<StructuredMetadata[]> => {
|
||||
const result: StructuredMetadata[] = [];
|
||||
// 序列级别
|
||||
const keyProp = 'SeriesInstanceUID'
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const item = data[i]
|
||||
const item = data[i];
|
||||
const existItem = result.find((i) => i[keyProp] === item[keyProp]);
|
||||
const hash = await calculateFileHash(item.filePath);
|
||||
|
||||
|
@ -164,7 +173,7 @@ export const structureMetadata = async (
|
|||
// 如果找到了相同的条目,合并 filePath
|
||||
if (!existItem.fileHash.includes(hash)) {
|
||||
existItem.filePaths.push(item.filePath);
|
||||
existItem.fileHash.push(hash)
|
||||
existItem.fileHash.push(hash);
|
||||
}
|
||||
} else {
|
||||
// 如果没有找到,创建一个新的条目
|
||||
|
@ -174,10 +183,12 @@ export const structureMetadata = async (
|
|||
StudyInstanceUID: item.StudyInstanceUID,
|
||||
SeriesInstanceUID: item.SeriesInstanceUID,
|
||||
PatientName: item.PatientName,
|
||||
PatientAge: item.PatientAge,
|
||||
PatientSex: item.PatientSex,
|
||||
});
|
||||
}
|
||||
const progress: ScanProgress = {
|
||||
percentage: ((i + 1) / data.length) * 100
|
||||
percentage: ((i + 1) / data.length) * 100,
|
||||
};
|
||||
progressCallback?.(progress);
|
||||
}
|
||||
|
|
|
@ -2,11 +2,14 @@ import { dialog, ipcMain } from "electron";
|
|||
import os from "os";
|
||||
import {
|
||||
findDcmFiles,
|
||||
keyProp,
|
||||
processFilesInBatches,
|
||||
StructuredMetadata,
|
||||
structureMetadata,
|
||||
} from "./core/dicom";
|
||||
import { EVENT_PARSE_DICOM } from "./ipcEvent";
|
||||
import PythonManager from "./core/PythonManager";
|
||||
import { db } from "./core/db";
|
||||
|
||||
/**
|
||||
* 渲染进程和主进程的事件调度
|
||||
|
@ -60,8 +63,25 @@ const registerIpcMainHandlers = (
|
|||
const structDicom = await structureMetadata(items, (progress) => {
|
||||
event.reply("scan-progress", progress);
|
||||
});
|
||||
// 存数据库
|
||||
const changeTime = Date.now();
|
||||
for (const item of structDicom) {
|
||||
const existSeries = db.data.series.find(
|
||||
(i) => i[keyProp] === item[keyProp]
|
||||
);
|
||||
existSeries
|
||||
? Object.assign(existSeries, item, { updateTime: changeTime })
|
||||
: db.data.series.push({ ...item, createTime: changeTime });
|
||||
await db.write();
|
||||
}
|
||||
event.reply("scan-progress-done", structDicom);
|
||||
});
|
||||
|
||||
ipcMain.on("db:series:select", async (event, data) => {
|
||||
await db.read();
|
||||
const seriesList = db.data.series;
|
||||
event.reply("db:series:select:response", seriesList);
|
||||
});
|
||||
};
|
||||
|
||||
export default registerIpcMainHandlers;
|
||||
|
|
|
@ -11,6 +11,7 @@ import { fileURLToPath } from "node:url";
|
|||
import path from "node:path";
|
||||
import registerIpcMainHandlers from "./ipcMainHandlers";
|
||||
import PythonManager from "./core/PythonManager";
|
||||
import { createDatabase } from "./core/db";
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
@ -133,6 +134,8 @@ app.whenReady().then(() => {
|
|||
createWindow();
|
||||
createTray();
|
||||
registerGlobalShortcuts();
|
||||
createDatabase({ name: "cvpilot.json" });
|
||||
console.log(path.join(app.getPath("userData")));
|
||||
|
||||
// 设置 Dock 图标
|
||||
if (process.platform === "darwin") {
|
||||
|
|
|
@ -1,11 +1,4 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
CaretSortIcon,
|
||||
ChevronDownIcon,
|
||||
DotsHorizontalIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
import { ChevronDownIcon } from "@radix-ui/react-icons";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
|
@ -25,9 +18,6 @@ import {
|
|||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
@ -39,48 +29,22 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
|
||||
const data: Payment[] = [
|
||||
{
|
||||
id: "m5gr84i9",
|
||||
amount: 316,
|
||||
status: "success",
|
||||
email: "ken99@yahoo.com",
|
||||
},
|
||||
{
|
||||
id: "3u1reuv4",
|
||||
amount: 242,
|
||||
status: "success",
|
||||
email: "Abe45@gmail.com",
|
||||
},
|
||||
{
|
||||
id: "derv1ws0",
|
||||
amount: 837,
|
||||
status: "processing",
|
||||
email: "Monserrat44@gmail.com",
|
||||
},
|
||||
{
|
||||
id: "5kma53ae",
|
||||
amount: 874,
|
||||
status: "success",
|
||||
email: "Silas22@gmail.com",
|
||||
},
|
||||
{
|
||||
id: "bhqecj4p",
|
||||
amount: 721,
|
||||
status: "failed",
|
||||
email: "carmella@hotmail.com",
|
||||
},
|
||||
];
|
||||
|
||||
export type Payment = {
|
||||
export type Series = {
|
||||
id: string;
|
||||
amount: number;
|
||||
status: "pending" | "processing" | "success" | "failed";
|
||||
email: string;
|
||||
StudyInstanceUID?: string;
|
||||
SeriesInstanceUID?: string;
|
||||
PatientName?: string;
|
||||
PatientAge: string;
|
||||
PatientSex: string;
|
||||
createTime?: number;
|
||||
updateTime?: number;
|
||||
filePaths: string[];
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<Payment>[] = [
|
||||
export const columns: ColumnDef<Series>[] = [
|
||||
{
|
||||
id: "select",
|
||||
header: ({ table }) => (
|
||||
|
@ -104,81 +68,82 @@ export const columns: ColumnDef<Payment>[] = [
|
|||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
accessorKey: "PatientName",
|
||||
header: "姓名",
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">{row.getValue("status")}</div>
|
||||
<div className="capitalize">{row.getValue("PatientName")}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "email",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
Email
|
||||
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
|
||||
accessorKey: "PatientAge",
|
||||
header: "年龄",
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">{row.getValue("PatientAge")}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: () => <div className="text-right">Amount</div>,
|
||||
cell: ({ row }) => {
|
||||
const amount = parseFloat(row.getValue("amount"));
|
||||
|
||||
// Format the amount as a dollar amount
|
||||
const formatted = new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
}).format(amount);
|
||||
|
||||
return <div className="text-right font-medium">{formatted}</div>;
|
||||
},
|
||||
accessorKey: "PatientSex",
|
||||
header: "性别",
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">{row.getValue("PatientSex")}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
const payment = row.original;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Open menu</span>
|
||||
<DotsHorizontalIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigator.clipboard.writeText(payment.id)}
|
||||
>
|
||||
Copy payment ID
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>View customer</DropdownMenuItem>
|
||||
<DropdownMenuItem>View payment details</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
accessorKey: "SeriesInstanceUID",
|
||||
header: "序列UID",
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">{row.getValue("SeriesInstanceUID")}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "filePaths",
|
||||
header: "层数",
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">
|
||||
{(row.getValue("filePaths") as string[]).length}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "createTime",
|
||||
header: "创建时间",
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">
|
||||
{new Date(row.getValue("createTime")).toLocaleString()}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "updateTime",
|
||||
header: "修改时间",
|
||||
cell: ({ row }) => (
|
||||
<div className="capitalize">
|
||||
{new Date(row.getValue("updateTime")).toLocaleString()}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export function SeriesTable() {
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||
[]
|
||||
);
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [data, setData] = useState<Series[]>([]);
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
|
||||
SeriesInstanceUID: false,
|
||||
updateTime: false,
|
||||
});
|
||||
const [rowSelection, setRowSelection] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
window.ipcRenderer.send("db:series:select");
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
window.ipcRenderer.on("db:series:select:response", (event, data) => {
|
||||
console.log(data);
|
||||
setData(data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
|
@ -200,20 +165,22 @@ export function SeriesTable() {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex items-center py-4">
|
||||
<div className="w-full h-full flex flex-col">
|
||||
<div className="flex-shrink-0 flex items-center p-4">
|
||||
<Input
|
||||
placeholder="Filter emails..."
|
||||
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
|
||||
placeholder="筛选姓名"
|
||||
value={
|
||||
(table.getColumn("PatientName")?.getFilterValue() as string) ?? ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
table.getColumn("email")?.setFilterValue(event.target.value)
|
||||
table.getColumn("PatientName")?.setFilterValue(event.target.value)
|
||||
}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="ml-auto">
|
||||
Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
|
||||
<Button variant="outline" size="sm" className="ml-auto">
|
||||
显示 <ChevronDownIcon className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
|
@ -230,13 +197,14 @@ export function SeriesTable() {
|
|||
column.toggleVisibility(!!value)
|
||||
}
|
||||
>
|
||||
{column.id}
|
||||
{column.columnDef.header}
|
||||
</DropdownMenuCheckboxItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<ScrollArea className="h-full w-full flex-grow pl-4 pr-4">
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
|
@ -287,30 +255,7 @@ export function SeriesTable() {
|
|||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex items-center justify-end space-x-2 py-4">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
||||
{table.getFilteredRowModel().rows.length} row(s) selected.
|
||||
</div>
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -11,6 +11,8 @@ import { ToastAction } from "@/components/ui/toast";
|
|||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { RocketIcon } from "@radix-ui/react-icons";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SeriesTable } from "./SeriesTable";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface ScanProgress {
|
||||
percentage: number;
|
||||
|
@ -43,7 +45,7 @@ export const Datasource = () => {
|
|||
setImportDialogVisible(true);
|
||||
setStartTime(Date.now());
|
||||
});
|
||||
}, [progress?.percentage, toast]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScanFinished = (event, data) => {
|
||||
|
@ -65,6 +67,7 @@ export const Datasource = () => {
|
|||
title: "完成",
|
||||
description: `本次操作共导入${data.length}组序列数据,耗时:${timeDuration} s`,
|
||||
action: <ToastAction altText="启动AI测量">启动AI测量</ToastAction>,
|
||||
duration: 30 * 1000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
@ -86,7 +89,15 @@ export const Datasource = () => {
|
|||
}, [importDialogVisible]);
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
<motion.div
|
||||
className="h-full"
|
||||
initial={{ y: 10, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<SeriesTable />
|
||||
{/* 导入数据dialog */}
|
||||
<Dialog open={importDialogVisible} onOpenChange={setImportDialogVisible}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
|
@ -106,6 +117,6 @@ export const Datasource = () => {
|
|||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -251,9 +251,9 @@ export function ModelTable() {
|
|||
<div className="flex-shrink-0 flex items-center justify-between p-4">
|
||||
<Input
|
||||
placeholder="根据名称查询模型"
|
||||
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
|
||||
value={(table.getColumn("modelname")?.getFilterValue() as string) ?? ""}
|
||||
onChange={(event) =>
|
||||
table.getColumn("email")?.setFilterValue(event.target.value)
|
||||
table.getColumn("modelname")?.setFilterValue(event.target.value)
|
||||
}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
|
@ -266,7 +266,7 @@ export function ModelTable() {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollArea className="flex-grow pl-4 pr-4">
|
||||
<ScrollArea className="h-full w-full flex-grow pl-4 pr-4">
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
|
|
|
@ -4,6 +4,7 @@ import { ModelTable } from "./ModelTable";
|
|||
export const Models = () => {
|
||||
return (
|
||||
<motion.div
|
||||
className="h-full"
|
||||
initial={{ y: 10, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 0, opacity: 0 }}
|
||||
|
|
Loading…
Reference in New Issue
Block a user