feats

src/pages/Machinery/OperationStatistics/Detail.jsx

@@ -1,24 +1,38 @@
 import React from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Card, Divider } from 'antd';
+import { Col, Row, Divider } from 'antd';
+import { getMachineryDetail } from '@/services/machinery';
 import Summary from './components/Summary';
 import Machines from './components/Machines';
+import MaImg from './components/MaImg';
 
 export default (props) => {
   const { location } = props;
-  const { user: userId } = location.query || {};
+  const { user, machineryId } = location.query || {};
+
+  const [current, setCurrent] = React.useState({});
+
+  const userId = user || current.ownerId;
+
+  React.useEffect(() => {
+    if (machineryId) {
+      getMachineryDetail(machineryId).then(setCurrent);
+    }
+  }, [machineryId]);
 
   return (
     <PageHeaderWrapper>
-      <Card>
-        <p>
+      <div style={{ display: 'flex' }}>
+        <div style={{ width: '360px', flex: 'none' }}>
           <Summary userId={userId} />
-        </p>
-        <Divider />
-        <p>
-          <Machines userId={userId} />
-        </p>
-      </Card>
+          <div style={{ marginTop: '24px' }}>
+            <MaImg machine={current} />
+          </div>
+        </div>
+        <div style={{ flex: '1', marginLeft: '24px' }}>
+          <Machines current={current} setCurrent={setCurrent} userId={userId} />
+        </div>
+      </div>
     </PageHeaderWrapper>
   );
 };

src/pages/Machinery/OperationStatistics/components/MaImg.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Card, Empty } from 'antd';
+
+export default (props) => {
+  const { machine = {} } = props;
+
+  return (
+    <Card title={machine.name}>
+      {machine.thumb ? (
+        <img alt="" src={machine.thumb} style={{ width: '100%' }} />
+      ) : (
+        <Empty description="暂无农机" />
+      )}
+    </Card>
+  );
+};

src/pages/Machinery/OperationStatistics/components/MaJob.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Button, Card, Table, message, Descriptions, Col, Row } from 'antd';
+import { getDeviceJobByOrg, exportDeviceJobByOrg } from '@/services/job';
+
+export default (props) => {
+  const { machine, userId } = props;
+
+  const columns = [
+    {
+      title: '设备类型',
+      dataIndex: 'deviceKind',
+      key: 'deviceKind',
+      render: (t) => (t === 'shensong' ? '深松' : t === 'feifang' ? '飞防' : '-'),
+    },
+    {
+      title: '设备编号',
+      dataIndex: 'deviceNo',
+      key: 'deviceNo',
+    },
+    {
+      title: '作业面积(亩)',
+      dataIndex: 'jobArea',
+      key: 'jobArea',
+    },
+    {
+      title: '作业时间',
+      dataIndex: 'jobTime',
+      key: 'jobTime',
+    },
+  ];
+
+  const [loading, setLoading] = React.useState(false);
+  const [list, setList] = React.useState([]);
+  const [total, setTotal] = React.useState(0);
+  const [page, setPage] = React.useState({ current: 1, pageSize: 10, total: 0 });
+
+  const pagination = React.useMemo(
+    () => ({
+      ...page,
+      showTotal: (total, range) => `总计 ${total} 条`,
+      onChange: (page, pageSize) => {
+        setPage({
+          current: page,
+          pageSize,
+          total: 0,
+        });
+
+        queryData({
+          machineryId: machine.machineryId,
+          userId,
+          pageNum: page,
+          pageSize,
+        });
+      },
+    }),
+    [page, machine, userId],
+  );
+
+  const queryData = (params) => {
+    setLoading(true);
+    getDeviceJobByOrg({ ...params, startDate: '2022-01-01', endDate: '2099-12-31' })
+      .then((res) => {
+        setLoading(false);
+        const { list: dtList, totalArea } = res;
+        setList(dtList.records || []);
+        setTotal(totalArea || 0);
+        setPage({
+          current: dtList.current,
+          pageSize: dtList.size,
+          total: dtList.total,
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  };
+
+  React.useEffect(() => {
+    if (userId && machine) {
+      const { machineryId } = machine;
+      queryData({
+        machineryId,
+        userId,
+        pageNum: 1,
+        pageSize: 10,
+      });
+    }
+  }, [machine, userId]);
+
+  return (
+    <div>
+      <div style={{ textAlign: 'left', marginBottom: '16px', fontSize: '16px' }}>
+        <span>总作业面积 </span>
+        <strong>{total}</strong>
+        <span> 亩</span>
+      </div>
+      <Table
+        loading={loading}
+        rowKey="jobNo"
+        columns={columns}
+        dataSource={list}
+        pagination={pagination}
+      />
+    </div>
+  );
+};

src/pages/Machinery/OperationStatistics/components/Machines.jsx

@@ -1,19 +1,37 @@
 import React from 'react';
-import { Spin, Tabs } from 'antd';
+import { Card, Tabs } from 'antd';
+import MaJob from './MaJob';
 import { getMachineryListByUser } from '@/services/device';
 
 export default (props) => {
-  const { userId } = props;
+  const { userId, current, setCurrent } = props;
 
   const [loading, setLoading] = React.useState(false);
   const [machines, setMachines] = React.useState([]);
+  const [activeTab, setActiveTab] = React.useState();
+
+  const tabList = React.useMemo(() => {
+    return machines.map((x) => ({ key: x.machineryId, tab: x.name }));
+  }, [machines]);
+
+  const onTabChange = (key) => {
+    setCurrent(machines.filter((x) => x.machineryId === key)[0]);
+  };
+
+  React.useEffect(() => {
+    if (current) {
+      setActiveTab(current.machineryId);
+    }
+  }, [current]);
 
   React.useEffect(() => {
     if (userId) {
       setLoading(true);
       getMachineryListByUser(userId)
         .then((res) => {
-          setMachines(res);
+          const list = res || [];
+          setMachines(list);
+          setCurrent(list[0] || {});
           setLoading(false);
         })
         .catch((err) => {
@@ -24,9 +42,8 @@ export default (props) => {
   }, [userId]);
 
   return (
-    <Spin spinning={loading}>
-      <h3 style={{ fontWeight: 700 }}>作业信息</h3>
-      <Tabs></Tabs>
-    </Spin>
+    <Card loading={loading} tabList={tabList} activeTabKey={activeTab} onTabChange={onTabChange}>
+      <MaJob machine={current} userId={userId} />
+    </Card>
   );
 };

src/pages/Machinery/OperationStatistics/components/Summary.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Descriptions, Spin } from 'antd';
+import { Card, Avatar, Spin } from 'antd';
 import { getUserDetail } from '@/services/user';
 
+const defAva = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png';
+
 export default (props) => {
   const { userId } = props;
 
@@ -24,11 +26,18 @@ export default (props) => {
   }, [userId]);
 
   return (
-    <Spin spinning={loading}>
-      <Descriptions title="用户信息">
-        <Descriptions.Item label="姓名">{user.userName}</Descriptions.Item>
-        <Descriptions.Item label="电话">{user.phone}</Descriptions.Item>
-      </Descriptions>
-    </Spin>
+    <Card
+      loading={loading}
+      cover={
+        <div style={{ margin: '0 auto', marginTop: '2em', width: '128px' }}>
+          <Avatar src={user.avatar || defAva} size={128} />
+        </div>
+      }
+    >
+      <Card.Meta
+        title={<div style={{ textAlign: 'center' }}>{user.userName}</div>}
+        description={<div style={{ textAlign: 'center' }}>{user.phone}</div>}
+      />
+    </Card>
   );
 };