feats

src/pages/Machinery/JobList/index.jsx

@@ -1,49 +1,47 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Button, Popconfirm, Modal, Form, Input, message } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import PageTable from '@/components/PageTable';
+import { getDeviceJobList } from '@/services/job';
 
 export default (props) => {
-  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
-  const [form] = Form.useForm();
-  const [editModal, setEditModal] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [regionId, setRegionId] = useState();
   const actionRef = useRef();
 
   const columns = [
     {
-      title: '名称',
-      dataIndex: 'name',
-      key: 'name',
+      title: '设备类型',
+      dataIndex: 'deviceKind',
+      key: 'deviceKind',
+      valueEnum: {
+        shensong: {
+          text: '深松',
+        },
+        feifang: {
+          text: '飞防',
+        },
+      },
     },
     {
       title: '设备编号',
-      dataIndex: 'createDate',
-      key: 'createDate',
+      dataIndex: 'deviceNo',
+      key: 'deviceNo',
       width: 340,
     },
-    {
-      title: '设备类型',
-      dataIndex: 'status',
-      key: 'status',
-    },
     {
       title: '作业面积(亩)',
-      dataIndex: 'status',
-      key: 'status',
+      dataIndex: 'jobArea',
+      key: 'jobArea',
       search: false,
     },
     {
       title: '作业时间',
-      dataIndex: 'status',
-      key: 'status',
+      dataIndex: 'jobDate',
+      key: 'jobDate',
       search: false,
     },
     {
       title: '绑定农机',
-      dataIndex: 'status',
-      key: 'status',
+      dataIndex: 'machineryName',
+      key: 'machineryName',
       search: false,
     },
   ];
@@ -54,6 +52,7 @@ export default (props) => {
         columns={columns}
         actionRef={actionRef}
         options={false}
+        request={getDeviceJobList}
         // toolBarRender={actions}
         scroll={{ x: 1000 }}
       />

src/pages/Machinery/OperationStatistics/components/search/Form.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, Form, Col, Row } from 'antd';
+
+export function FormItem(props) {
+  return (
+    <Col span={6}>
+      <Form.Item {...props}>{props.children}</Form.Item>
+    </Col>
+  );
+}
+
+export default (props) => {
+  const { initialValues, onFinish } = props;
+
+  const [form] = Form.useForm();
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  return (
+    <Form form={form} initialValues={initialValues} onFinish={onFinish}>
+      <Row gutter={24}>
+        {props.children}
+        <Col span={6} offset={18} style={{ textAlign: 'right' }}>
+          <Button onClick={onReset}>重置</Button>
+          <Button type="primary" htmlType="submit" style={{ margin: '0 8px' }}>
+            查询
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+};

src/pages/Machinery/OperationStatistics/components/search/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Card, Input, Select, DatePicker } from 'antd';
+import moment from 'moment';
+import Form, { FormItem } from './Form';
+
+const { RangePicker } = DatePicker;
+
+const initialValues = {
+  jobDate: [moment().startOf('year'), moment()],
+};
+
+const options = [
+  {
+    value: 'shensong',
+    label: '深松',
+  },
+  {
+    value: 'feifang',
+    label: '飞防',
+  },
+];
+
+export default (props) => {
+  const { onFinish } = props;
+
+  const handleFinish = (values) => {
+    // 转换日期格式
+    const { jobDate, ...otherValues } = values;
+
+    onFinish({
+      startDate: jobDate[0].format('YYYY-MM-DD'),
+      endDate: jobDate[1].format('YYYY-MM-DD'),
+      ...otherValues,
+    });
+  };
+
+  React.useEffect(() => {
+    // 开始就触发查询
+    handleFinish(initialValues);
+  }, []);
+
+  return (
+    <Card>
+      <Form onFinish={handleFinish} initialValues={initialValues}>
+        <FormItem name="orgName" label="合作社">
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem name="deviceNo" label="设备编号">
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem name="deviceKind" label="设备类型">
+          <Select options={options} />
+        </FormItem>
+        <FormItem name="jobDate" label="作业时间">
+          <RangePicker />
+        </FormItem>
+      </Form>
+    </Card>
+  );
+};

src/pages/Machinery/OperationStatistics/index.jsx

@@ -1,89 +1,136 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Button, Popconfirm, Modal, Form, Input, message, Descriptions } from 'antd';
+import React, { useState, useRef, useMemo } from 'react';
+import { Button, Card, Table, message, Descriptions, Col, Row } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import PageTable from '@/components/PageTable';
+import { getDeviceJobByOrg, exportDeviceJobByOrg } from '@/services/job';
+import Search from './components/search';
 
 export default (props) => {
-  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
-  const [form] = Form.useForm();
-  const [editModal, setEditModal] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [regionId, setRegionId] = useState();
-  const actionRef = useRef();
-
-  const exports = () => [
-    <Button key="add" type="primary">
-      导出
-    </Button>,
-  ];
-
   const columns = [
     {
-      title: '合作社名称',
-      dataIndex: 'name',
-      key: 'name',
+      title: '合作社',
+      dataIndex: 'orgName',
+      key: 'orgName',
     },
     {
       title: '设备编号',
-      dataIndex: 'createDate',
-      key: 'createDate',
+      dataIndex: 'deviceNo',
+      key: 'deviceNo',
       width: 340,
     },
     {
       title: '设备类型',
-      dataIndex: 'status',
-      key: 'status',
+      dataIndex: 'deviceKind',
+      key: 'deviceKind',
+      render: (t) => (t === 'shensong' ? '深松' : t === 'feifang' ? '飞防' : '-'),
     },
     {
       title: '作业面积(亩)',
-      dataIndex: 'status',
-      key: 'status',
-      search: false,
+      dataIndex: 'jobArea',
+      key: 'jobArea',
     },
     {
       title: '作业时间',
-      dataIndex: 'status',
-      key: 'status',
-      search: false,
+      dataIndex: 'jobDate',
+      key: 'jobDate',
     },
     {
       title: '绑定农机',
-      dataIndex: 'status',
-      key: 'status',
+      dataIndex: 'machineryName',
+      key: 'machineryName',
       search: false,
     },
-    {
-      title: '时间选择',
-      dataIndex: 'created_at',
-      valueType: 'dateRange',
-      hideInTable: true,
-      search: {
-        transform: (value) => {
-          return {
-            startTime: value[0],
-            endTime: value[1],
-          };
-        },
-      },
-    },
   ];
 
+  const [loading, setLoading] = useState(false);
+  const [list, setList] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState({ current: 1, pageSize: 10, total: 0 });
+  const searchValue = useRef({});
+
+  const pagination = useMemo(
+    () => ({
+      ...page,
+      showTotal: (total, range) => `总计 ${total} 条`,
+      onChange: (page, pageSize) => {
+        setPage({
+          current: page,
+          pageSize,
+          total: 0,
+        });
+
+        queryData({
+          ...searchValue.current,
+          pageNum: page,
+          pageSize,
+        });
+      },
+    }),
+    [page],
+  );
+
+  const queryData = (params) => {
+    setLoading(true);
+    getDeviceJobByOrg(params)
+      .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);
+      });
+  };
+
+  const exportData = () => {
+    setLoading(true);
+    exportDeviceJobByOrg(searchValue.current)
+      .then(() => setLoading(false))
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  };
+
+  const onSearch = (params = {}) => {
+    searchValue.current = params;
+    queryData({
+      ...params,
+      pageNum: 1,
+      pageSize: page.pageSize,
+    });
+  };
+
   return (
-    <PageHeaderWrapper
-      content={
-        <Descriptions>
-          <Descriptions.Item label='总作业面积:'>亩</Descriptions.Item>
-        </Descriptions>
-      }
-    >
-      <PageTable
-        columns={columns}
-        actionRef={actionRef}
-        options={false}
-        toolBarRender={exports}
-        // toolBarRender={actions}
-        scroll={{ x: 1000 }}
-      />
+    <PageHeaderWrapper>
+      <div style={{ marginBottom: '16px' }}>
+        <Search onFinish={onSearch} />
+      </div>
+      <Card loading={loading}>
+        <Row>
+          <Col span={12}>
+            <div style={{ textAlign: 'left', marginBottom: '16px', fontSize: '16px' }}>
+              <span>总作业面积 </span>
+              <strong>{total}</strong>
+              <span> 亩</span>
+            </div>
+          </Col>
+          <Col span={12}>
+            <div style={{ textAlign: 'right', marginBottom: '16px' }}>
+              <Button type="primary" onClick={exportData}>
+                导出
+              </Button>
+            </div>
+          </Col>
+        </Row>
+        <Table rowKey="jobNo" columns={columns} dataSource={list} pagination={pagination} />
+      </Card>
     </PageHeaderWrapper>
   );
 };

src/pages/MonitoringScreen2/components/map/index.jsx

@@ -5,23 +5,8 @@ import Map from './map';
 export default (props) => {
   return (
     <div className={Styles['geo-map-container']}>
-      {/* 占位图片 */}
-      <div className={Styles['geo-map-header']}>
-        <div />
-        <div />
-        <div />
-      </div>
-
-      <div className={Styles['geo-map-body']}>
-        <Map />
-      </div>
-
-      {/* 占位图片 */}
-      <div className={Styles['geo-map-footer']}>
-        <div />
-        <div />
-        <div />
-      </div>
+      <Map style={{ height: '100%' }} />
+      {props.children}
     </div>
   );
 };

src/pages/MonitoringScreen2/index.jsx

@@ -199,12 +199,16 @@ export default (props) => {
               />
             </div>
             {/* <GeoMap machineTypeList={machineTypeList} orgList={orgList} machineList={machineList} /> */}
-            <Map />
+            <Map>
+              <div
+                className={Styles['map-addon']}
+                style={{ right: '20px', bottom: '100px', width: '600px' }}
+              >
+                <DeviceList />
+              </div>
+            </Map>
           </div>
         </div>
-        <div>
-          <DeviceList />
-        </div>
       </div>
     </div>
   );

src/pages/MonitoringScreen2/style.less

@@ -86,3 +86,8 @@
 .mg-tp-30 {
   margin-top: 30px;
 }
+
+.map-addon {
+  position: absolute;
+  z-index: 20;
+}

src/services/job.js

@@ -20,3 +20,24 @@ export const getJobDetail = (id) => request(`/work-job/${id}`);
  * @returns
  */
 export const getJobGISDetail = (params) => request(`/machinery-gps`, { params });
+
+/**
+ * 查询作业列表2
+ * @param {*} params
+ * @returns
+ */
+export const getDeviceJobList = (params) => request('/device-job', { params });
+
+/**
+ * 作业统计
+ * @param {*} params
+ * @returns
+ */
+export const getDeviceJobByOrg = (params) => request('/device-job/by-org', { params });
+
+/**
+ * 作业统计导出
+ * @param {*} params
+ * @returns
+ */
+export const exportDeviceJobByOrg = (params) => request('/device-job/by-org/export', { params });