import AutoTable from "@/components/AutoTable";
import DraggableDialog from "@/components/DraggableDialog";
import PointViewer from "@/components/PointViewer";
import PremButton from "@/components/PremButton";
import { doFetch } from "@/utils/doFetch";
import { ProDescriptions } from "@ant-design/pro-components";
import { Box, Container, Stack, Typography } from "@mui/material";
import { useRequest } from "ahooks";
import { Divider, Drawer, message, Table, Tag, Tooltip } from "antd";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { useMemo, useRef, useState } from "react";
import "./index.less";
dayjs.extend(duration);
function removeFirstAndLastChar(str) {
return str.substring(1, str.length - 1);
}
function Record() {
const actionRef = useRef();
const [dialogprops, setdialogprops] = useState({
open: false,
});
const handleClose = () => {
setdialogprops((s) => ({
...s,
open: false,
}));
};
const detailcolumns = [
{
title: "分数",
dataIndex: "score",
key: "score",
hideInSearch: true,
span: 2,
},
{
title: "评语",
dataIndex: "comment",
key: "comment",
span: 2,
},
{ title: "学生姓名", dataIndex: "studentName", key: "studentName" },
{ title: "学生账号", dataIndex: "studentAccount", key: "studentAccount" },
{ title: "课程名称", dataIndex: "courseName", key: "courseName" },
{ title: "实训名称", dataIndex: "trainName", key: "trainName" },
{ title: "实验名称", dataIndex: "experimentName", key: "experimentName" },
{
title: "实验时长（分钟）",
dataIndex: "testTime",
key: "testTime",
render: (text, record) => {
function secondsToMinutesAndSeconds(seconds) {
var minutes = Math.floor(seconds / 60);
var remainingSeconds = seconds % 60;
return minutes + " 分 " + remainingSeconds + " 秒";
}
return secondsToMinutesAndSeconds(record?.testTime);
},
},
{ title: "权重", dataIndex: "weight", key: "weight", hideInSearch: true },
{ title: "分数", dataIndex: "scoreWeight", key: "scoreWeight" },
{
title: "提交时间",
dataIndex: "finishTime",
key: "finishTimeRange",
},
{
title: "批阅人",
dataIndex: "reviewUserName",
key: "reviewUserName",
},
{
title: "批阅时间",
dataIndex: "reviewTime",
key: "reviewTime",
},
];
const { runAsync, loading } = useRequest(doFetch, {
manual: true,
onSuccess: (res) => {
if (res?.code == "0000") {
message.success("操作成功");
}
},
});
const detail = (text, row, _, action) => {
return (
<PremButton
btn={{
size: "small",
variant: "text",
color: "inherit",
onClick: async () => {
let res = await doFetch({
url: "/studentExperiment/detail",
params: { id: row?.id },
});
let result = await doFetch({
url: "/studentExperiment/queryResultForPc",
params: {
id: row.id,
},
});
setdialogprops({
open: true,
defaultFormValue: { ...res?.data?.data },
title: "详情",
maxWidth: "md",
footer: false,
tabdata: result?.data?.data,
});
},
}}
>
详情
</PremButton>
);
};
const rollback = (text, row, action) => {
return (
<PremButton
pop={{
disabled: row?.reviewType !== 1,
title: "是否退回该实训?",
okText: "确认",
cancelText: "取消",
onConfirm: async () => {
await runAsync({
url: "/studentExperiment/remake",
params: { id: row?.id },
});
},
}}
btn={{
disabled: row?.reviewType !== 1,
size: "small",
color: "error",
}}
>
撤回
</PremButton>
);
};
const columns = useMemo(() => {
let res = [
{ title: "课程名称", dataIndex: "courseName", key: "courseName" },
{ title: "实训名称", dataIndex: "trainName", key: "trainName" },
{ title: "实验名称", dataIndex: "experimentName", key: "experimentName" },
{
title: "分数",
dataIndex: "scoreWeight",
key: "scoreWeight",
hideInSearch: true,
},
{
title: "提交时间",
dataIndex: "finishTime",
key: "finishTimeRange",
valueType: "dateTimeRange",
},
{
title: "批阅时间",
dataIndex: "reviewTime",
key: "reviewTimeRange",
valueType: "dateTimeRange",
},
{
title: "批阅状态",
dataIndex: "reviewTypeName",
key: "reviewType",
valueType: "select",
options: [
{ label: "待批阅", value: "1" },
{ label: "已批阅", value: "2" },
],
},
{
title: "操作",
valueType: "option",
width: 128,
render: (text, row, _, action) => [
detail(text, row, _, action),
rollback(text, row, _, action),
],
},
];
return res;
}, []);
const [drawer, setDrawer] = useState({
open: false,
onClose: () => {
setDrawer((s) => ({
...s,
open: false,
}));
},
});
return (
<Container maxWidth={false}>
<DraggableDialog
handleClose={handleClose}
dialogprops={dialogprops}
maxWidth={dialogprops?.maxWidth ?? "sm"}
footer={false}
>
<div>
<ProDescriptions
columns={detailcolumns}
column={2}
style={{ marginBottom: 12 }}
dataSource={dialogprops?.defaultFormValue}
></ProDescriptions>
<Divider></Divider>
<b style={{ fontSize: 14, paddingBottom: 10, display: "block" }}>
实验素养
</b>
<Table
size="small"
pagination={{
pageSize: 6,
}}
columns={[
{
title: "操作名称",
dataIndex: "config",
key: "config",
render: (text, row) => {
return row?.config?.name;
},
},
{
title: "是否操作",
dataIndex: "isComplete",
key: "isComplete",
width: 200,
render: (text, row) => {
return row?.isComplete ? (
"完成"
) : (
<span style={{ color: "red" }}>未完成</span>
);
},
},
]}
dataSource={
dialogprops?.tabdata?.recordDataDic
? Object.values(dialogprops?.tabdata?.recordDataDic)
: []
}
></Table>
<Divider></Divider>
<div style={{ position: "relative", minHeight: 360 }}>
<Drawer
{...drawer}
getContainer={false}
title={false}
closable={false}
destroyOnClose
>
<PointViewer
position={drawer?.position}
CoordinatePoint={dialogprops?.tabdata?.CoordinatePoint}
CurGongjianPoint={dialogprops?.tabdata?.CurGongjianPoint}
></PointViewer>
</Drawer>
<b style={{ fontSize: 14, paddingBottom: 10, display: "block" }}>
实验报告
</b>
<Table
size="small"
pagination={{
pageSize: 6,
}}
columns={[
{
title: "名称",
dataIndex: "Name",
key: "Name",
},
{
title: "测量值",
dataIndex: "actualValue",
key: "actualValue",
render: (text, row) => {
return row?.actualValue?.toFixed(4) ?? "";
},
},
{
title: "名义值",
dataIndex: "normal",
key: "normal",
render: (text, row) => {
return row?.normal?.toFixed(4) ?? "";
},
},
{
title: "上公差",
dataIndex: "Upper",
key: "Upper",
},
{
title: "下公差",
dataIndex: "Down",
key: "Down",
},
]}
rowKey={"id"}
dataSource={
dialogprops?.tabdata?.PeculiarityInfosDict
? Object.values(dialogprops?.tabdata?.PeculiarityInfosDict)
?.map((it, i) => {
return it?.map((item, index) => {
return {
...item,
id: i + "," + index,
};
});
})
?.flat()
: []
}
expandable={{
expandedRowRender: ({ ElementInfoList, PointList }) => {
return (
<div style={{ display: "flex", gap: 6 }}>
{ElementInfoList?.map((it) => {
return (
<div
style={{
padding: 12,
backgroundColor: "#f0f0f0",
display: "inline-block",
borderRadius: 4,
marginBottom: 6,
}}
>
<span style={{ paddingRight: 12 }}>{it?.Name}</span>
{it?.PointList?.map((its) => (
<Tooltip
key={its?.id}
title={
<div
dangerouslySetInnerHTML={{
__html: removeFirstAndLastChar(
JSON.stringify(its.Position)
).replace(/,/g, "<br/>"),
}}
></div>
}
>
<Tag
onClick={() => {
setDrawer((s) => ({
...s,
position: its.Position,
open: true,
}));
}}
style={{ cursor: "pointer" }}
>
{its.Name}
</Tag>
</Tooltip>
))}
</div>
);
})}
<div
style={{
padding: 12,
backgroundColor: "#f0f0f0",
display: "inline-block",
borderRadius: 4,
marginBottom: 6,
}}
>
<span style={{ paddingRight: 12 }}>点集合</span>
{PointList?.map((its) => (
<Tooltip
key={its?.id}
title={
<div
dangerouslySetInnerHTML={{
__html: removeFirstAndLastChar(
JSON.stringify(its.Position)
).replace(/,/g, "<br/>"),
}}
></div>
}
>
<Tag
onClick={() => {
setDrawer((s) => ({
...s,
position: its.Position,
open: true,
}));
}}
style={{ cursor: "pointer" }}
>
{its.Name}
</Tag>
</Tooltip>
))}
</div>
</div>
);
},
}}
></Table>
</div>
</div>
</DraggableDialog>
<Stack direction={"row"} mb={2}>
<Typography variant="h5">我的成绩</Typography>
</Stack>
<Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
<AutoTable
actionRef={actionRef}
scroll={{ x: 1366 }}
columns={[...columns]}
path={"/studentExperiment/queryPageByLoginStudent"}
></AutoTable>
</Box>
</Container>
);
}
export default Record;