feat(scene): 工程页面添加数据获取和展示功能

src/pages/scene/engineering.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import style from './style/engineering.module.less';
 import { Input, Grid, Card, Result, Pagination } from '@arco-design/web-react';
 import { IconPlus, IconApps } from '@arco-design/web-react/icon';
 import { openWindow, OpenWindowOptions } from '@/utils/common';
+import { getPublicSceneList, getMySceneList } from '@/api/scene';
+import CardWrap from '@/pages/scene/cardWrap';
 
 const InputSearch = Input.Search;
 const Row = Grid.Row;
@@ -16,6 +18,9 @@ interface EngineeringProps {
 
 const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) => {
   const [searchValue, setSearchValue] = useState<string>('');
+  const [sceneData, setSceneData] = useState({
+    list: []
+  });
   const [count, setCount] = useState<number>(12);
 
   const onSearchHandle = (value: string) => {
@@ -27,7 +32,7 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
     setSearchValue(value);
   };
 
-  const openEngineHandle = (index: number) => {
+  const openEngineHandle = (item) => {
     const url = `/ideContainer`;
     const params: OpenWindowOptions = {
       target: '_blank',
@@ -37,6 +42,34 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
     openWindow(url, params);
   };
 
+
+  useEffect(() => {
+    const fetchData = async () => {
+      console.log('dataType:', dataType);
+      // currPage?: number   name?: string   pageSize?: number
+      // getPublicSceneList()
+      // getMySceneList()
+      const functions = {
+        public: getPublicSceneList,
+        my: getMySceneList
+      };
+      const params = {
+        currPage: 1,
+        pageSize: 11,
+        name: ''
+      };
+      const res: any = await functions[dataType](params);
+      if (res.code === 200) {
+        console.log('res:', res);
+        const { data } = res;
+        setSceneData(data);
+        setCount(data.totalCount);
+      }
+    };
+
+    fetchData();
+  }, [dataType]);
+
   return (
     <>
       <div className={style.engineeringContainer}>
@@ -56,7 +89,7 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
           </Col>
         </Row>
         {/*卡片模式数据渲染*/}
-        <Row>
+        <Row style={{ marginBottom: 10 }}>
           <Col
             xs={12}
             sm={12}
@@ -78,28 +111,29 @@ const Engineering: React.FC<EngineeringProps> = ({ dataType, showAdd = true }) =
             )}
           </Col>
           {/*遍历生成卡片*/}
-          {Array.from({ length: count }).map((item, index) => (
+          {sceneData.list.map((item, index) => (
             <Col
-              key={index}
+              key={item.id}
               xs={12}
               sm={12}
               md={12}
               lg={6}
               xl={6}
               xxl={6}>
-              <Card className={style.cardStyle} hoverable onClick={() => openEngineHandle(index)}>
-                <Result
-                  status="info"
-                  subTitle={'工程' + index}
-                  icon={<IconApps />}
-                ></Result>
+              <Card className={style.cardStyle} hoverable onClick={() => openEngineHandle(item)}>
+                {/*<Result*/}
+                {/*  status="info"*/}
+                {/*  subTitle={item.name}*/}
+                {/*  icon={<IconApps />}*/}
+                {/*></Result>*/}
+                <CardWrap item={item}></CardWrap>
               </Card>
             </Col>
           ))}
         </Row>
         <Row>
           <Col>
-            <Pagination style={{ float: 'right' }} total={100} />
+            <Pagination style={{ float: 'right' }} total={count} />
           </Col>
         </Row>
       </div>

src/pages/scene/style/engineering.module.less

@@ -3,5 +3,9 @@
     margin: 5px;
     border: 1px solid var(--color-neutral-3);
     cursor: pointer;
+
+    :global(.arco-card-body) {
+      padding: 0;
+    }
   }
 }