|
|
@@ -1,124 +1,269 @@
|
|
|
import * as React from 'react';
|
|
|
-import Box from "@mui/material/Box";
|
|
|
-import 'handsontable/dist/handsontable.full.min.css';
|
|
|
-//import 'handsontable/styles/ht-theme-main.min.css';
|
|
|
-import { HandsonTable } from 'handsontable/base';
|
|
|
-import {HotTable} from "@handsontable/react";
|
|
|
-//import { registerAllModules } from 'handsontable/registry';
|
|
|
-import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
|
|
|
-import { Grid } from '@mui/material';
|
|
|
-import Tab from "@mui/material/Tab";
|
|
|
-import TabContext from "@mui/lab/TabContext";
|
|
|
-import TabList from "@mui/lab/TabList";
|
|
|
-import TabPanel from "@mui/lab/TabPanel";
|
|
|
-//import { registerPlugin, NestedRows } from 'handsontable/plugins';
|
|
|
-//registerPlugin(NestedRows);
|
|
|
-import { textRenderer, registerRenderer } from 'handsontable/renderers';
|
|
|
-import useWebSocket, { ReadyState } from 'react-use-websocket';
|
|
|
-
|
|
|
-import Zjcs from './Zjcs';
|
|
|
-import Djcs from './Djcs';
|
|
|
+
|
|
|
import Service from './Service';
|
|
|
import {useNavigate, useLocation} from "react-router";
|
|
|
//registerAllModules();
|
|
|
+import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
|
|
|
+import Box from '@mui/material/Box';
|
|
|
+import MuiAppBar from '@mui/material/AppBar';
|
|
|
+import { styled, useTheme } from '@mui/material/styles';
|
|
|
+import Toolbar from '@mui/material/Toolbar';
|
|
|
+import Typography from '@mui/material/Typography';
|
|
|
+import CssBaseline from '@mui/material/CssBaseline';
|
|
|
+import AccountCircle from '@mui/icons-material/AccountCircle';
|
|
|
+import Fab from '@mui/material/Fab';
|
|
|
+import Tooltip from '@mui/material/Tooltip';
|
|
|
+import DeleteIcon from '@mui/icons-material/Delete';
|
|
|
|
|
|
-
|
|
|
+import Drawer from '@mui/material/Drawer';
|
|
|
+import Divider from '@mui/material/Divider';
|
|
|
+import IconButton from '@mui/material/IconButton';
|
|
|
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
|
|
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
|
+import MenuIcon from '@mui/icons-material/Menu';
|
|
|
+import AddIcon from '@mui/icons-material/Add';
|
|
|
|
|
|
export default function Home2() {
|
|
|
+ const drawerWidth = 240;
|
|
|
+ const theme = useTheme();
|
|
|
|
|
|
- const { sendMessage, lastMessage, readyState } = useWebSocket('ws://127.0.0.1:8000/ws', {
|
|
|
- shouldReconnect: (closeEvent) => true
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- function coverRenderer(_instance, td, _row, _col, _prop, value, _cellProperties) {
|
|
|
-
|
|
|
-
|
|
|
- const button = document.createElement('button');
|
|
|
- button.innerText="打开";
|
|
|
- if (_col == 2) {
|
|
|
- button.innerText="解析";
|
|
|
- }
|
|
|
- //img.src = value;
|
|
|
- /*button.addEventListener('click', (event) => {
|
|
|
- console.log(hotRef.current?.hotInstance?.getData()[selectedRow.current]);
|
|
|
- hotRef.current?.hotInstance?.alter('remove_row', selectedRow.current, 1);
|
|
|
- //console.log(plugin);
|
|
|
- event.preventDefault();
|
|
|
- });*/
|
|
|
- button.addEventListener('mousedown', (event) => {
|
|
|
-
|
|
|
-
|
|
|
- //console.log(plugin);
|
|
|
- event.preventDefault();
|
|
|
- });
|
|
|
- td.innerText = '';
|
|
|
- td.appendChild(button);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- return td;
|
|
|
- }
|
|
|
-
|
|
|
+ const deleteItem = React.useCallback(
|
|
|
+ (id) => () => {
|
|
|
+ console.log(id);
|
|
|
+ Service.deleteFiles(id).then(x=> {
|
|
|
+ Service.generateFiles2().then(x=>{
|
|
|
+ setDetail(x.map(y=>{return {'id': y[0], 'ID': y[0], '名称': y[1], '创建时间': y[2]};}));
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ [],
|
|
|
+ );
|
|
|
+
|
|
|
+ const columns = React.useMemo(
|
|
|
+ () => [
|
|
|
+ { field: 'ID', headerName: 'ID', width: 250 },
|
|
|
+ { field: '名称', headerName: '名称', width: 400 },
|
|
|
+ { field: '创建时间', headerName: '创建时间', width: 200 },
|
|
|
+ {
|
|
|
+ field: 'actions',
|
|
|
+ type: 'actions',
|
|
|
+ width: 80,
|
|
|
+ getActions: (params) => [
|
|
|
+ <GridActionsCellItem
|
|
|
+ icon={<DeleteIcon />}
|
|
|
+ label="删除"
|
|
|
+ onClick={deleteItem(params.id)}
|
|
|
+ />,
|
|
|
+
|
|
|
+
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [deleteItem],
|
|
|
+ );
|
|
|
+ const Style = {
|
|
|
+ position: "absolute",
|
|
|
+ bottom: 128,
|
|
|
+ right: 64,
|
|
|
+ };
|
|
|
+ const VisuallyHiddenInput = styled('input')({
|
|
|
+ display: 'none',
|
|
|
+ accept: ".13jz, .13jt, .jszf"
|
|
|
+ });
|
|
|
|
|
|
const hotRef = React.useRef(null);
|
|
|
const navigate = useNavigate();
|
|
|
let location = useLocation();
|
|
|
- const [detail, setDetail] = React.useState([["File Name"]]);
|
|
|
+ const [detail, setDetail] = React.useState([]);
|
|
|
+ const [open, setOpen] = React.useState(false);
|
|
|
+ const [selectedFiles, setSelectedFiles] = React.useState([]);
|
|
|
+
|
|
|
+ const handleFileChange = (event) => {
|
|
|
+ setSelectedFiles(event.target.files);
|
|
|
+ console.log(event.target.files);
|
|
|
+ const fd = new FormData();
|
|
|
+ fd.append('file', event.target.files[0]);
|
|
|
+ Service.uploadFile(fd).then(x=>{
|
|
|
+ console.log("uploaded");
|
|
|
+ Service.generateFiles2().then(x=>{
|
|
|
+ setDetail(x.map(y=>{return {'id': y[0], 'ID': y[0], '名称': y[1], '创建时间': y[2]};}));
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
React.useEffect(
|
|
|
() => {
|
|
|
Service.generateFiles2().then(x=>{
|
|
|
- setDetail(x);
|
|
|
+ setDetail(x.map(y=>{return {'id': y[0], 'ID': y[0], '名称': y[1], '创建时间': y[2]};}));
|
|
|
});
|
|
|
}, []
|
|
|
);
|
|
|
|
|
|
- React.useEffect(() => {
|
|
|
- console.log(lastMessage);
|
|
|
- }, [lastMessage]);
|
|
|
|
|
|
- registerRenderer('highlightRowRenderer', (hotInstance, TD, row, column, ...rest) => {
|
|
|
-
|
|
|
- coverRenderer(hotInstance, TD, row, column, ...rest);
|
|
|
-
|
|
|
- });
|
|
|
+ const handleRowClick = (params) => {
|
|
|
+ //setMessage(`Movie "${params.row.title}" clicked`);
|
|
|
+ navigate('/editor/qingdan/'.concat(params.row.id));
|
|
|
+ };
|
|
|
+
|
|
|
+ const AppBar = styled(MuiAppBar, {
|
|
|
+ shouldForwardProp: (prop) => prop !== 'open',
|
|
|
+ })(({ theme }) => ({
|
|
|
+ transition: theme.transitions.create(['margin', 'width'], {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.leavingScreen,
|
|
|
+ }),
|
|
|
+ variants: [
|
|
|
+ {
|
|
|
+ props: ({ open }) => open,
|
|
|
+ style: {
|
|
|
+ width: `calc(100% - ${drawerWidth}px)`,
|
|
|
+ marginLeft: `${drawerWidth}px`,
|
|
|
+ transition: theme.transitions.create(['margin', 'width'], {
|
|
|
+ easing: theme.transitions.easing.easeOut,
|
|
|
+ duration: theme.transitions.duration.enteringScreen,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }));
|
|
|
+
|
|
|
+ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
|
|
|
+ ({ theme }) => ({
|
|
|
+ flexGrow: 1,
|
|
|
+ padding: theme.spacing(3),
|
|
|
+ transition: theme.transitions.create('margin', {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.leavingScreen,
|
|
|
+ }),
|
|
|
+ marginLeft: `-${drawerWidth}px`,
|
|
|
+ variants: [
|
|
|
+ {
|
|
|
+ props: ({ open }) => open,
|
|
|
+ style: {
|
|
|
+ transition: theme.transitions.create('margin', {
|
|
|
+ easing: theme.transitions.easing.easeOut,
|
|
|
+ duration: theme.transitions.duration.enteringScreen,
|
|
|
+ }),
|
|
|
+ marginLeft: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }),
|
|
|
+ );
|
|
|
+
|
|
|
+ const DrawerHeader = styled('div')(({ theme }) => ({
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ padding: theme.spacing(0, 1),
|
|
|
+ // necessary for content to be below app bar
|
|
|
+ ...theme.mixins.toolbar,
|
|
|
+ justifyContent: 'flex-end',
|
|
|
+ }));
|
|
|
+
|
|
|
+ const handleDrawerClose = () => {
|
|
|
+ setOpen(false);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ const handleDrawerOpen = () => {
|
|
|
+ setOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
|
|
|
return (
|
|
|
- <>
|
|
|
- <HotTable nestedRows={false}
|
|
|
- data={detail
|
|
|
- }
|
|
|
- ref={hotRef}
|
|
|
- afterSelection={(row, column)=>{
|
|
|
- console.log(row);
|
|
|
- let selected = hotRef.current?.hotInstance?.getData()[row];
|
|
|
- console.log(selected[0]);
|
|
|
- if (column == 1) {
|
|
|
- navigate("/editor/qingdan/".concat(selected[0]));
|
|
|
- } else {
|
|
|
- //sendMessage(selected[0]);
|
|
|
- }
|
|
|
-
|
|
|
- }}
|
|
|
- rowHeaders={true}
|
|
|
- colHeaders={false}
|
|
|
- height="800"
|
|
|
- readOnly={true}
|
|
|
- autoWrapRow={false}
|
|
|
- autoWrapCol={false}
|
|
|
- /*cells={(row, col, prop) => {
|
|
|
- if (col >= 1) {
|
|
|
- return {
|
|
|
- // row options, which apply to each cell of the second row
|
|
|
- // and to each cell of the fifth row
|
|
|
- renderer: "highlightRowRenderer"
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
- }*/
|
|
|
- licenseKey="non-commercial-and-evaluation" // for non-commercial use only
|
|
|
- />
|
|
|
- </>
|
|
|
+ <Box sx={{ display: 'flex' }}>
|
|
|
+
|
|
|
+ <CssBaseline />
|
|
|
+ <AppBar position="fixed" open={open}>
|
|
|
+ <Toolbar>
|
|
|
+
|
|
|
+ <IconButton
|
|
|
+ color="inherit"
|
|
|
+ aria-label="open drawer"
|
|
|
+ onClick={handleDrawerOpen}
|
|
|
+ edge="start"
|
|
|
+ sx={[
|
|
|
+ {
|
|
|
+ mr: 2,
|
|
|
+ },
|
|
|
+ open && { display: 'none' },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <MenuIcon />
|
|
|
+ </IconButton>
|
|
|
+ <Typography variant="h6" noWrap component="div">
|
|
|
+ 工作台
|
|
|
+ </Typography>
|
|
|
+ <Box sx={{ flexGrow: 1 }} />
|
|
|
+ <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
|
|
|
+
|
|
|
+ <IconButton
|
|
|
+ size="large"
|
|
|
+ edge="end"
|
|
|
+ aria-label="account of current user"
|
|
|
+
|
|
|
+ aria-haspopup="true"
|
|
|
+
|
|
|
+ color="inherit"
|
|
|
+ >
|
|
|
+ <AccountCircle />
|
|
|
+ </IconButton>
|
|
|
+ </Box>
|
|
|
+ </Toolbar>
|
|
|
+ </AppBar>
|
|
|
+ <Drawer
|
|
|
+ sx={{
|
|
|
+ width: drawerWidth,
|
|
|
+ flexShrink: 0,
|
|
|
+ '& .MuiDrawer-paper': {
|
|
|
+ width: drawerWidth,
|
|
|
+ boxSizing: 'border-box',
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ variant="persistent"
|
|
|
+ anchor="left"
|
|
|
+ open={open}
|
|
|
+ >
|
|
|
+ <DrawerHeader>
|
|
|
+ <IconButton onClick={handleDrawerClose}>
|
|
|
+ {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
|
|
|
+ </IconButton>
|
|
|
+ </DrawerHeader>
|
|
|
+ <Divider />
|
|
|
+
|
|
|
+ </Drawer>
|
|
|
+ <Main open={open}>
|
|
|
+ <DrawerHeader />
|
|
|
+
|
|
|
+ <div style={{ height: `calc(100vh - 150px)`, width: '100%' }}>
|
|
|
+ <DataGrid onRowClick={handleRowClick}
|
|
|
+ rows={detail} columns={columns}
|
|
|
+ disableColumnMenu={true}
|
|
|
+ localeText={{
|
|
|
+ noRowsLabel: '无数据',
|
|
|
+ paginationRowsPerPage: '每页行数',
|
|
|
+ footerRowSelected: (count) => `共选中了${count.toLocaleString()}行`,
|
|
|
+
|
|
|
+
|
|
|
+ }}
|
|
|
+ />
|
|
|
+
|
|
|
+ <Tooltip title="导入">
|
|
|
+ <Fab color="primary" aria-label="add" sx={Style} component="label">
|
|
|
+ <AddIcon />
|
|
|
+ <VisuallyHiddenInput
|
|
|
+ type="file"
|
|
|
+ accept=".13jz, .13jt, .jszf"
|
|
|
+ onChange={handleFileChange}
|
|
|
+ />
|
|
|
+ </Fab>
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </Main>
|
|
|
+ </Box>
|
|
|
);
|
|
|
}
|