添加设备管理页面

.umirc.ts

@@ -19,7 +19,7 @@ export default defineConfig({
   proxy: {
     '/api': {
       // target: 'http://47.96.12.136:8888/',
-      target: 'http://47.96.12.136:8788/',
+      target: 'http://47.96.12.136:8888/',
       // target: 'https://work.greentech.com.cn/',
       changeOrigin: true,
     },

src/components/TabsContent/index.js

@@ -0,0 +1,35 @@
+import { useMemo, useState } from 'react';
+import styles from './index.less';
+
+const TabsContent = (props) => {
+  const { defaultActiveKey = '1', center = true, items = {}, onChange } = props;
+  const [active, setActive] = useState(defaultActiveKey);
+  const renderContent = useMemo(() => {
+    return items.find((item) => item.key == active).children;
+  }, [active]);
+  return (
+    <div>
+      <div
+        className={styles.tabsTitle}
+        style={center ? { justifyContent: 'center' } : {}}
+      >
+        {items.map((item) => (
+          <div
+            key={item.key}
+            className={`${styles.tabsItem} ${
+              active == item.key ? styles.active : ''
+            }`}
+            onClick={() => {
+              setActive(item.key);
+              onChange(item.key);
+            }}
+          >
+            {item.label}
+          </div>
+        ))}
+      </div>
+      <div>{renderContent}</div>
+    </div>
+  );
+};
+export default TabsContent;

src/components/TabsContent/index.less

@@ -0,0 +1,17 @@
+.tabsTitle {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  :nth-child(1) {
+    border-right: 1px solid black;
+  }
+  :last-child {
+    border-right: none;
+  }
+}
+.tabsItem {
+  padding: 0 20px;
+}
+.active {
+  color: aqua;
+}

src/global.less

@@ -48,6 +48,15 @@ button {
 }
 body {
   color: #333;
+  .ant-collapse-header {
+    flex-direction: row-reverse;
+  }
+  .ant-collapse-item {
+    background-color: white !important;
+    border-radius: 6px !important;
+    border-bottom: none !important;
+    margin-bottom: 10px;
+  }
 }
 
 // Remove list styles on ul, ol
@@ -107,4 +116,4 @@ input[type='reset'] {
   &.open {
     background-image: url('@/assets/icon-eye2.png');
   }
-}
+}

src/pages/DeviceManager/index.js

@@ -1,54 +1,63 @@
-import ContentPage from '@/components/ContentPage';
-import { queryDevice } from '@/services/device';
+import PageContent from '@/components/PageContent';
+import TabsContent from '@/components/TabsContent';
+import { queryDeviceList } from '@/services/device';
 import { useParams, useRequest } from '@umijs/max';
-import { Button, Collapse, Space, Tabs } from 'antd';
+import { Button, Collapse, Space } from 'antd';
+import { useMemo } from 'react';
 const img = require('@/assets/deviceManager/device01.png');
+const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
-  const { data, run, loading } = useRequest((data) => queryDevice(data), {
-    defaultParams: [{ ProjectId: projectId, IsNew: 1 }],
+  const { data, run, loading } = useRequest((data) => queryDeviceList(data), {
+    defaultParams: [projectId],
   });
-  console.log(data);
 
-  const onChange = () => {};
+  const onChange = (tab) => {
+    console.log(tab);
+  };
   return (
-    <ContentPage style={{ backgroundColor: 'gray' }}>
-      {/* <CloseOutlined /> */}
-      <Tabs
+    <PageContent style={{ backgroundColor: 'gray' }}>
+      <TabsContent
         defaultActiveKey="1"
         onChange={onChange}
         items={[
           {
             label: `设备管理`,
             key: '1',
-            children: <Device />,
+            children: <Device data={data} />,
           },
           {
             label: `备品管理`,
             key: '2',
-            children: `Content of Tab Pane 2`,
+            children: <SparePart />,
           },
         ]}
       />
-    </ContentPage>
+    </PageContent>
   );
 };
-const Device = () => {
-  const text = `
-  A dog is a type of domesticated animal.
-  Known for its loyalty and faithfulness,
-  it can be found as a welcome guest in many households across the world.
-`;
+const Device = ({ data }) => {
+  const dataSource = useMemo(() => {
+    const total = data?.reduce((total, item) => item.Count, 0);
+    const items = data?.map((item, idx) => {
+      return {
+        key: idx,
+        label: item.Type,
+        children: <div>{data?.map((item) => item.Name)}</div>,
+      };
+    });
+    return { total, items };
+  }, [data]);
   const items = [
     {
       key: '1',
       label: 'This is panel header with arrow icon',
-      children: <p>{text}</p>,
+      children: <p>aaaaaaaa</p>,
     },
     {
       key: '2',
       label: 'This is panel header with no arrow icon',
-      children: <p>{text}</p>,
+      children: <p>aaaaaaaaa</p>,
       showArrow: false,
     },
   ];
@@ -67,7 +76,7 @@ const Device = () => {
       >
         <img style={{ width: '30%' }} src={img} />
         <div>
-          <div>410</div>
+          <div>{dataSource?.total}</div>
           <div>设备总数</div>
         </div>
         <div>
@@ -130,14 +139,31 @@ const Device = () => {
         defaultActiveKey={['1']}
         bordered={false}
         onChange={onChange}
-        items={items}
+        items={dataSource?.items}
       />
     </div>
   );
 };
 const SparePart = () => {
-  
-  return <div></div>
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          borderRadius: '10px',
+          backgroundColor: 'white',
+          justifyContent: 'space-around',
+        }}
+      >
+        <img style={{ width: '30%' }} src={img} />
+        <div>
+          <div>410</div>
+          <div>在库数量（个）</div>
+        </div>
+        <img style={{ position: 'absolute', right: '20px' }} src={chartIcon} />
+      </div>
+    </div>
+  );
 };
 
 export default DeviceManager;

src/services/device.js

@@ -6,3 +6,6 @@ export async function queryDevice(params = {}) {
     `/api/v1/device/list/${params.ProjectId}?${stringify(params)}`,
   );
 }
+export async function queryDeviceList(ProjectId) {
+  return request(`/api/v1/device-pad/list/${ProjectId}`);
+}