虚拟仿真完成

src/pages/Simulation/index.less

@@ -14,8 +14,17 @@
     height: 300px;
     position: relative;
     width: 100%;
-    overflow-y: auto;
+
-    overflow-x: hidden;
+    .list {
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    .btn {
+      margin: 20px;
+      float: right;
+    }
 
     .bar {
       height: 2px;

src/pages/Simulation/index.tsx

@@ -26,7 +26,7 @@ const testData = {
   cProgress: 0,
 };
 
-const Progress = ({ item, onFinish }: any) => {
+const Progress = ({ item, onFinish, start }: any) => {
   const [data, setData] = useState<any>({});
   const timer = useRef<any>(null);
   const dataSave = useRef<any>({});
@@ -35,12 +35,17 @@ const Progress = ({ item, onFinish }: any) => {
     if (item.id) {
       dataSave.current = item;
       setData(item);
+    }
+  }, [item.id]);
+
+  useEffect(() => {
+    if (start) {
       recursionFun();
     }
     return () => {
       clearTimeout(timer.current);
     };
-  }, [item.id]);
+  }, [start]);
 
   const rand = (m: number, n: number) => {
     return Math.ceil(Math.random() * (n - m + 1) + m - 1);
@@ -54,7 +59,7 @@ const Progress = ({ item, onFinish }: any) => {
       ['bText', 'bProgress'],
       ['cText', 'cProgress'],
     ];
-    const arrayIndex = rand(0, 2);
+    const arrayIndex = newItem.type > 2 ? 0 : newItem.type;
     const arrayItem = array[arrayIndex];
     const dataNum = rand(5, 10);
     let total = newItem[arrayItem[1]] + dataNum;
@@ -65,12 +70,13 @@ const Progress = ({ item, onFinish }: any) => {
       newItem[arrayItem[1]] = total;
       newItem[arrayItem[0]] = '正在写入';
     }
-    if (newItem.aProgress + newItem.bProgress + newItem.cProgress !== 300) {
+    if (newItem.aProgress + newItem.bProgress + newItem.cProgress !== 100) {
       timer.current = setTimeout(() => {
         recursionFun();
       }, (10 - dataNum) * 1000);
     } else {
       newItem.state = 'done';
+      console.log(newItem, 'newItem');
       onFinish(newItem);
     }
     setData(newItem);
@@ -125,7 +131,9 @@ const Progress = ({ item, onFinish }: any) => {
 
 const Page = () => {
   const [data, setData] = useState<any>([]);
-  // const [disabled, setDisabled] = useState<any>([]);
+  const [disabled, setDisabled] = useState<boolean>(false);
+  const [start, setStart] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
   const resizeBar = useRef<any>(null);
   const resizeBox = useRef<any>(null);
   const iframeBox = useRef<any>(null);
@@ -142,6 +150,7 @@ const Page = () => {
 
   const getData = (e: any) => {
     if (e.origin === 'https://edu-xnfz.educoder.net') {
+      // alert(e.data)
       let newData: any = [];
       try {
         if (e.data) {
@@ -164,7 +173,7 @@ const Page = () => {
         });
       }
 
-      console.log(dataSave.current, newData, 2222);
+      // console.log(dataSave.current, newData, 2222);
 
       if (dataSave.current.length < newData.length) {
         const param = newData.find((e: any) => {
@@ -238,7 +247,37 @@ const Page = () => {
     }
   }, [resizeBar]);
 
-  const handleFinish = (v: any) => {};
+  const handleFinish = (v: any) => {
+    const newData = dataSave.current.map((e: any) => {
+      if (e.id === v.id) {
+        return { ...v };
+      }
+      return e;
+    });
+    if (newData.every((e: any) => e.state === 'done')) {
+      setDisabled(true);
+      setLoading(false);
+    }
+    setData(newData);
+    dataSave.current = newData;
+  };
+
+  const handleClick = async () => {
+    const deviceList = dataSave.current.map((e: any) => {
+      return { id: e.id, status: '1' };
+    });
+    const res = await Fetch(`/openi/device/configureDevice`, {
+      method: 'post',
+      data: {
+        deviceList,
+      },
+    });
+    if (res.result === 'success') {
+      setStart(true);
+      setLoading(true);
+      setDisabled(false);
+    }
+  };
 
   return (
     <div className={styles.page}>
@@ -312,11 +351,26 @@ const Page = () => {
           </div> */}
           {!!data.length ? (
             data.map((e: any) => (
-              <Progress key={e.id} item={e} onFinish={handleFinish} />
+              <Progress
+                key={e.id}
+                item={e}
+                start={start}
+                onFinish={handleFinish}
+              />
             ))
           ) : (
             <Empty className="mt10" />
           )}
+          <Button
+            onClick={handleClick}
+            loading={loading}
+            type="primary"
+            ghost
+            disabled={disabled || data.length === 0}
+            className={styles.btn}
+          >
+            开始初装
+          </Button>
         </div>
       </div>
     </div>