sader

config/proxy.ts

@@ -22,7 +22,7 @@
 export default {
   dev: {
     "/vstp/": {
-      target: "http://192.168.40.36:8022",
+      target: "http://192.168.40.228:8022",
       changeOrigin: true,
       pathRewrite: { "^/vstp": "" },
     },

config/routes.ts

@@ -94,6 +94,11 @@ export default [
             path: "/work/model",
             component: "./model",
           },
+          {
+            name: "探针管理",
+            path: "/work/tangzhen",
+            component: "./tangzhen",
+          },
           {
             name: "平台日志",
             path: "/work/logs",

package.json

@@ -65,6 +65,8 @@
     "@mui/lab": "^5.0.0-alpha.103",
     "@mui/material": "^5.11.16",
     "@mui/styled-engine-sc": "^5.11.11",
+    "@react-three/drei": "^9.90.0",
+    "@react-three/fiber": "^8.15.12",
     "@reduxjs/toolkit": "^1.9.3",
     "@sentry/react": "^7.52.1",
     "@umijs/route-utils": "^2.1.3",
@@ -102,6 +104,7 @@
     "simplebar-react": "^3.2.1",
     "socket.io-client": "^2.5.0",
     "styled-components": "^5.3.9",
+    "three": "^0.159.0",
     "umi-request": "^1.4.0",
     "web-vitals": "^3.1.1"
   },
@@ -136,4 +139,4 @@
   "engines": {
     "node": ">=12.0.0"
   }
-}
\ No newline at end of file
+}

public/assets/icons/navbar/ic_zhen.svg

+<svg t="1701760296084" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3236" width="24" height="24"><path d="M394.24 623.616c120.832-180.224 268.288-444.416 316.416-391.168l1.024 56.32-199.68 215.04-117.76 119.808z" fill="#BCE2EC" p-id="3237"></path><path d="M112.64 992.256c-12.288 0-24.576-14.336-14.336-27.648l104.448-139.264-11.264-6.144-24.576-15.36c-87.04-59.392-138.24-154.624-41.984-263.168 62.464-69.632 179.2-77.824 291.84-74.752l55.296 2.048 109.568-145.408-3.072-2.048c-45.056-38.912-56.32-97.28 19.456-160.768C722.944 56.32 928.768 206.848 870.4 386.048c-35.84 110.592-163.84 122.88-291.84 120.832l-39.936-1.024-269.312 312.32 15.36 6.144c58.368 19.456 116.736 25.6 153.6 16.384 101.376-24.576 91.136-109.568 23.552-113.664-9.216-1.024-16.384-8.192-15.36-18.432 1.024-9.216 8.192-16.384 18.432-15.36 111.616 7.168 119.808 146.432-17.408 180.224-17.408 4.096-38.912 6.144-61.44 5.12-34.816-2.048-73.728-9.216-111.616-21.504l-28.672-10.24-120.832 139.264c-4.096 4.096-8.192 6.144-12.288 6.144zM223.232 798.72l223.232-296.96-39.936-1.024c-112.64-2.048-205.824 6.144-256 63.488-77.824 88.064-41.984 159.744 35.84 211.968 10.24 7.168 20.48 13.312 30.72 18.432l6.144 4.096z m211.968-225.28l60.416-69.632h-7.168L435.2 573.44z m147.456-100.352c130.048 2.048 228.352-12.288 256-97.28 49.152-152.576-123.904-268.288-220.16-188.416-50.176 40.96-50.176 73.728-28.672 98.304l12.288 11.264 40.96-54.272c19.456-25.6 49.152-40.96 72.704-30.72 29.696 11.264 28.672 45.056 8.192 79.872 0 1.024-1.024 2.048-2.048 2.048L686.08 335.872l15.36 3.072c27.648 5.12 53.248 4.096 65.536-1.024 8.192-4.096 18.432 0 22.528 8.192 4.096 8.192 0 18.432-8.192 22.528-25.6 11.264-68.608 9.216-110.592-2.048l-9.216-3.072-93.184 108.544 14.336 1.024z m-59.392-2.048l103.424-119.808-6.144-2.048-11.264-6.144L513.024 471.04h10.24z m126.976-146.432l44.032-51.2 5.12-9.216c10.24-20.48 2.048-21.504 3.072-21.504-3.072-1.024-18.432 0-33.792 20.48l-38.912 52.224 7.168 4.096 13.312 5.12z" fill="#55545F" p-id="3238"></path></svg>
\ No newline at end of file

src/components/InitForm/FormItems.jsx

@@ -1245,6 +1245,7 @@ function UploadDragger({ item, colProps }) {
             }
             window.open(url);
           },
+          maxCount: 1,
         }}
         transform={(value) => {
           const key = item.key ?? item.dataIndex;

src/components/ThreeViewer/index.jsx

+/*
+ * @Author: wuhao930406 1148547900@qq.com
+ * @Date: 2023-08-03 11:31:00
+ * @LastEditors: wuhao930406 1148547900@qq.com
+ * @LastEditTime: 2023-08-24 14:27:24
+ * @FilePath: /editor-plus/src/pages/components/GlftBlock/index.jsx
+ * @Description:
+ *
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
+ */
+import { Gltf, OrbitControls } from "@react-three/drei";
+import { Canvas, useLoader } from "@react-three/fiber";
+import { memo } from "react";
+import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import "./index.less";
+
+const ModelLoader = memo(({ url = "./glb/camera.obj" }) => {
+  let loader,
+    urlsplit = url.split(".");
+
+  const modelType = urlsplit[urlsplit.length - 1];
+
+  if (modelType === "gltf" || modelType === "glb") {
+    return <Gltf src={url} receiveShadow castShadow position={[0, 0, 0]} />;
+  } else if (modelType === "obj") {
+    loader = useLoader(OBJLoader, url);
+    return (
+      <group>
+        <primitive
+          object={loader.clone()}
+          receiveShadow
+          castShadow
+          position={[0, 0, 0]}
+        />
+      </group>
+    );
+  } else if (modelType === "fbx") {
+    loader = useLoader(FBXLoader, url);
+    return (
+      <group>
+        <primitive
+          object={loader.scene.clone()}
+          receiveShadow
+          castShadow
+          position={[0, 0, 0]}
+        />
+      </group>
+    );
+  }
+});
+
+function ThreeViewer({ url }) {
+  return (
+    <div className="bar-block-component">
+      <Canvas style={{ height: "600px", width: "100%" }} id={"sada"}>
+        <color attach="background" args={["#333"]} />
+        <ambientLight intensity={1} />
+        <OrbitControls></OrbitControls>
+        <pointLight position={[10, 10, 10]} intensity={1} />
+        <ModelLoader url={url} />
+      </Canvas>
+    </div>
+  );
+}
+
+export default ThreeViewer;

src/components/ThreeViewer/index.less

+.foo-block-element {
+  border-radius: 5px;
+  color: #fff;
+  background-color: #08a9fe;
+  box-shadow: 0 5px 20px rgba(8,169,254,.1);
+}
+.bar-block-component {
+  position: relative;
+  background-color: #f0f0f0;
+  box-shadow: 0 5px 20px rgba(192,57,43,.1);
+}
+.bar-block-component, .foo-block-element {
+  margin: 10px;
+  border-radius: 5px;
+  color: #fff;
+}
+.bar-block-component .button-remove {
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  transform: translateY(-50%);
+  color: red;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: center;
+}
+.bf-content{
+  height: 80vh !important;
+}
\ No newline at end of file

src/layouts/dashboard/nav/config.jsx

@@ -18,13 +18,13 @@ const navConfig = [
         title: "实训管理",
         path: "/work/bustrain",
         icon: icon("ic-shixun"),
-        key:"TEACH_TRAIN"
+        key: "TEACH_TRAIN",
       },
       {
         title: "作业批阅",
         path: "/work/checkhomework",
         icon: icon("ic_book"),
-        key:"TEACH_TASK"
+        key: "TEACH_TASK",
       },
       {
         title: "成绩单",
@@ -40,30 +40,29 @@ const navConfig = [
   },
   {
     title: "学习中心",
-    children:[
+    children: [
       {
         title: "我的实训",
         path: "/work/mybustrain",
         icon: icon("ic_training"),
-        key:"STUDY_TRAIN"
+        key: "STUDY_TRAIN",
       },
       {
         title: "我的成绩",
         path: "/work/myrecord",
         icon: icon("ic_grades"),
-        key:"STUDY_ACHIEVEMENT",
+        key: "STUDY_ACHIEVEMENT",
       },
       {
         title: "学习记录",
         path: "/work/studyrecord",
         icon: icon("ic_list"),
       },
-    
-    ]
+    ],
   },
   {
     title: "管理中心",
-    children:[
+    children: [
       {
         title: "首页",
         path: "/work/board",
@@ -83,13 +82,13 @@ const navConfig = [
         title: "教师管理",
         path: "/work/teacher",
         icon: icon("ic_user"),
-        key:"MANAGE_TEACHER"
+        key: "MANAGE_TEACHER",
       },
       {
         title: "学生管理",
         path: "/work/student",
         icon: icon("ic_student"),
-        key:"MANAGE_STUDENT"
+        key: "MANAGE_STUDENT",
       },
 
       {
@@ -102,12 +101,17 @@ const navConfig = [
         path: "/work/model",
         icon: icon("ic_3d"),
       },
+      {
+        title: "探针管理",
+        path: "/work/tangzhen",
+        icon: icon("ic_zhen"),
+      },
       {
         title: "平台日志",
         path: "/work/logs",
         icon: icon("ic_blog"),
       },
-    ]
+    ],
   },
 ];
 

src/pages/model/index.jsx

@@ -2,6 +2,7 @@ import AutoTable from "@/components/AutoTable";
 import DraggableDialog from "@/components/DraggableDialog";
 import InitForm from "@/components/InitForm";
 import PremButton from "@/components/PremButton";
+import ThreeViewer from "@/components/ThreeViewer";
 import { doFetch } from "@/utils/doFetch";
 import { Box, Container, Stack, Typography } from "@mui/material";
 import { useRequest } from "ahooks";
@@ -12,7 +13,7 @@ import "./index.less";
 const { message } = Antd;
 const { Paragraph } = Antd.Typography;
 
-function Class() {
+function Model() {
   const actionRef = useRef(),
     actionRefs = useRef();
   const [dialogprops, setdialogprops] = useState({
@@ -90,21 +91,31 @@ function Class() {
     () => [
       { title: "模型名称", dataIndex: "modelName", key: "modelName" },
       {
-        title: "模型预览的地址",
-        dataIndex: "url",
-        key: "url",
+        title: "模型",
+        dataIndex: "modelFile",
+        key: "modelFile",
+        valueType: "uploadDragger",
         search: false,
+        colProps: {
+          span: 24,
+        },
         render: (text, row) => {
+          console.log(row);
           return (
-            <Paragraph
-              copyable={{
-                text: row?.url,
+            <a
+              target="_blank"
+              onClick={() => {
+                setdialogprops({
+                  open: true,
+                  footer: false,
+                  url: row?.url,
+                  title: "预览",
+                  maxWidth:"lg"
+                });
               }}
             >
-              <a href={row?.url} target="_blank">
-                {row?.url}
-              </a>
-            </Paragraph>
+              预览
+            </a>
           );
         },
       },
@@ -120,27 +131,31 @@ function Class() {
         dialogprops={dialogprops}
         maxWidth={dialogprops?.maxWidth ?? "sm"}
       >
-        <InitForm
-          fields={columns}
-          defaultFormValue={dialogprops?.defaultFormValue}
-          onFinish={(val, extra) => {
-            let postdata = { ...val };
-            switch (dialogprops?.title) {
-              case "编辑":
-                postdata = {
-                  ...val,
-                  id: dialogprops?.defaultFormValue?.id,
-                };
-                break;
-              default:
-                break;
-            }
-            runAsync({
-              url: "/model/saveOrUpdate",
-              params: postdata,
-            });
-          }}
-        ></InitForm>
+        {dialogprops.title === "预览" ? (
+          <ThreeViewer url={dialogprops?.url}></ThreeViewer>
+        ) : (
+          <InitForm
+            fields={columns}
+            defaultFormValue={dialogprops?.defaultFormValue}
+            onFinish={(val, extra) => {
+              let postdata = { ...val };
+              switch (dialogprops?.title) {
+                case "编辑":
+                  postdata = {
+                    ...val,
+                    id: dialogprops?.defaultFormValue?.id,
+                  };
+                  break;
+                default:
+                  break;
+              }
+              runAsync({
+                url: "/model/saveOrUpdate",
+                params: postdata,
+              });
+            }}
+          ></InitForm>
+        )}
       </DraggableDialog>
 
       <Box
@@ -194,4 +209,4 @@ function Class() {
   );
 }
 
-export default Class;
+export default Model;

src/pages/tangzhen/index.jsx

+import AutoTable from "@/components/AutoTable";
+import DraggableDialog from "@/components/DraggableDialog";
+import InitForm from "@/components/InitForm";
+import PremButton from "@/components/PremButton";
+import ThreeViewer from "@/components/ThreeViewer";
+import { doFetch } from "@/utils/doFetch";
+import { Box, Container, Stack, Typography } from "@mui/material";
+import { useRequest } from "ahooks";
+import * as Antd from "antd";
+import { useMemo, useRef, useState } from "react";
+import "./index.less";
+
+const { message } = Antd;
+const { Paragraph } = Antd.Typography;
+
+function Probe() {
+  const actionRef = useRef(),
+    actionRefs = useRef();
+  const [dialogprops, setdialogprops] = useState({
+    open: false,
+  });
+  const [active, setactive] = useState("1");
+
+  const handleClose = () => {
+    setdialogprops((s) => ({
+      ...s,
+      open: false,
+    }));
+  };
+
+  const { runAsync, loading } = useRequest(doFetch, {
+    manual: true,
+    onSuccess: (res, parames) => {
+      if (res?.code == "0000") {
+        handleClose();
+        message.success("操作成功");
+        if (active === "1") {
+          actionRef?.current?.reload();
+        } else {
+          actionRefs?.current?.reload();
+        }
+      }
+    },
+  });
+
+  const edit = (text, row, _, action) => {
+    return (
+      <PremButton
+        btn={{
+          size: "small",
+          variant: "text",
+          onClick: () => {
+            setdialogprops({
+              open: true,
+              defaultFormValue: { ...row },
+              title: "编辑",
+            });
+          },
+        }}
+      >
+        编辑
+      </PremButton>
+    );
+  };
+
+  const remove = (text, row, _, action) => {
+    return (
+      <PremButton
+        pop={{
+          title: "是否删除该探针?",
+          okText: "确认",
+          cancelText: "取消",
+          onConfirm: async () => {
+            await runAsync({
+              url: "/probe/delete",
+              params: { id: row.id },
+            });
+          },
+        }}
+        btn={{
+          size: "small",
+          color: "error",
+        }}
+      >
+        删除
+      </PremButton>
+    );
+  };
+
+  const columns = useMemo(
+    () => [
+      { title: "探针名称", dataIndex: "probeName", key: "probeName" },
+      {
+        title: "探针",
+        dataIndex: "probeFile",
+        key: "probeFile",
+        valueType: "uploadDragger",
+        search: false,
+        colProps: {
+          span: 24,
+        },
+        render: (text, row) => {
+          console.log(row);
+          return (
+            <a
+              target="_blank"
+              onClick={() => {
+                setdialogprops({
+                  open: true,
+                  footer: false,
+                  url: row?.url,
+                  title: "预览",
+                  maxWidth:"lg"
+                });
+              }}
+            >
+              预览
+            </a>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <Container maxWidth={false}>
+      <DraggableDialog
+        handleClose={handleClose}
+        loading={loading}
+        dialogprops={dialogprops}
+        maxWidth={dialogprops?.maxWidth ?? "sm"}
+      >
+        {dialogprops.title === "预览" ? (
+          <ThreeViewer url={dialogprops?.url}></ThreeViewer>
+        ) : (
+          <InitForm
+            fields={columns}
+            defaultFormValue={dialogprops?.defaultFormValue}
+            onFinish={(val, extra) => {
+              let postdata = { ...val };
+              switch (dialogprops?.title) {
+                case "编辑":
+                  postdata = {
+                    ...val,
+                    id: dialogprops?.defaultFormValue?.id,
+                  };
+                  break;
+                default:
+                  break;
+              }
+              runAsync({
+                url: "/probe/saveOrUpdate",
+                params: postdata,
+              });
+            }}
+          ></InitForm>
+        )}
+      </DraggableDialog>
+
+      <Box
+        display={"flex"}
+        justifyContent={"space-between"}
+        alignItems={"center"}
+        sx={{ mb: 2.5 }}
+        mt={0}
+      >
+        <Typography variant="h5">探针管理</Typography>
+        <Stack spacing={2} direction="row">
+          <PremButton
+            btn={{
+              variant: "contained",
+              onClick: (e) => {
+                e.stopPropagation();
+                setdialogprops({
+                  open: true,
+                  defaultFormValue: {},
+                  title: "新增探针",
+                });
+              },
+            }}
+          >
+            新增探针
+          </PremButton>
+        </Stack>
+      </Box>
+
+      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
+        <AutoTable
+          actionRef={actionRef}
+          scroll={{ x: 1366 }}
+          columns={[
+            ...columns,
+            {
+              title: "操作",
+              valueType: "option",
+              width: 200,
+              render: (text, row, _, action) => [
+                edit(text, row, _, action),
+                remove(text, row, _, action),
+              ],
+            },
+          ]}
+          path="/probe/page"
+          rerendered={false}
+        ></AutoTable>
+      </Box>
+    </Container>
+  );
+}
+
+export default Probe;

src/pages/tangzhen/index.less

+.white {
+  .ant-pro-card {
+    background-color: #f6f6f6 !important;
+  }
+  .ant-table-tbody,td {
+    background-color: #f9f9f9 !important;
+  }
+}