.

config/routes.js

@@ -124,12 +124,17 @@ export default [
         component: './Machinery/Machinery/Edit',
         hideInMenu: true,
       },
-      // {
-      //   path: '/Machinery/GIS',
-      //   name: '农机GIS',
-      //   access: 'gis',
-      //   component: './Machinery/GIS',
-      // },
+      {
+        path: '/Machinery/GIS',
+        name: '农机GIS',
+        component: './Machinery/GIS',
+      },
+      {
+        path: '/Machinery/GIS/detail.jsx',
+        name: 'GIS详情',
+        component: './Machinery/GIS/detail.jsx',
+        hideInMenu: true,
+      },
     ],
   },
   {

src/pages/Machinery/GIS/components/WorkListModel.jsx

@@ -0,0 +1,95 @@
+import {
+  Button,
+  Modal,
+  Form,
+  Input,
+  DatePicker,
+  Radio,
+  Select,
+} from 'antd';
+import { useEffect, useState, useRef } from 'react';
+import PageTable from '@/components/PageTable';
+import moment from 'moment';
+import { history } from 'umi';
+import { getJobList } from '@/services/job'
+
+const formatterTime = (val) => {
+  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
+};
+const { RangePicker } = DatePicker;
+export default (props) => {
+  const { editModal, onCancel, machineryId } = props
+  const actionRef = useRef();
+
+  const [start, setStartDate] = useState()
+  const [end, setEndDate] = useState()
+  const handelChange = (date, dateStrings) => {
+    setStartDate(dateStrings[0])
+    setEndDate(dateStrings[1])
+  }
+  const Reset = () => {
+    setStartDate()
+    setEndDate()
+    actionRef.current.reload();
+  }
+  const goDetail = (id) => {
+    history.push(`./GIS/detail.jsx?id=` + id);
+  }
+
+  const columns = [
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      search: false
+    },
+    {
+      title: '农机手',
+      dataIndex: 'workerName',
+      key: 'workerName',
+      search: false
+    },
+    {
+      title: '作业时间',
+      dataIndex: 'endDate',
+      key: 'endDate',
+      render: (t, render) => formatterTime(render.startDate) + ' ~ ' + formatterTime(render.endDate),
+      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelChange} />
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          style={{ padding: 0 }}
+          type="link"
+          key={1}
+          onClick={() => goDetail(record.jobId)}
+        >
+          查看GIS
+        </Button>
+      ],
+    }
+  ]
+  return (
+    <Modal
+      forceRender
+      width='1024px'
+      title='农机GIS列表'
+      visible={editModal}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      footer={null}
+    >
+      <PageTable
+        request={getJobList}
+        actionRef={actionRef}
+        columns={columns}
+        rowKey="jobId"
+        options={false}
+        params={{ machineryId: machineryId, start, end }}
+        onReset={Reset}
+      />
+    </Modal>
+  )
+}

src/pages/Machinery/GIS/detail.jsx

@@ -0,0 +1,59 @@
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Card, Form, Button, Descriptions } from 'antd';
+import { useEffect, useState } from 'react';
+import { getJobDetail } from '@/services/job'
+import moment from 'moment';
+import { history } from 'umi';
+
+
+
+const FormItem = Form.Item;
+const goBack = () => {
+  history.goBack();
+};
+const formatterTime = (val) => {
+  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
+};
+export default (props) => {
+  const { location } = props;
+  const { id } = location.query;
+  const [workInfo, setWorkInfo] = useState()
+
+  useEffect(() => {
+    if (id) {
+      getJobDetail(id).then((res) => {
+        setWorkInfo(res)
+      })
+    }
+  }, [id])
+  return (
+    <PageHeaderWrapper extra={[<Button key={id} type="default" onClick={() => goBack()}>
+      返回
+    </Button>]}>
+      <Card style={{ minHeight: '700px' }}>
+        <Descriptions style={{ margin: '0 32px' }}>
+          <Descriptions.Item label="订单号">{workInfo?.orderNo}</Descriptions.Item>
+          <Descriptions.Item label="合作社">{workInfo?.orgName}</Descriptions.Item>
+          <Descriptions.Item label="农机">{workInfo?.machineryName}</Descriptions.Item>
+          <Descriptions.Item label="农机手">{workInfo?.workerName}</Descriptions.Item>
+          <Descriptions.Item label="作业面积">{workInfo?.area}</Descriptions.Item>
+          <Descriptions.Item label="作业时间">{formatterTime(workInfo?.startDate)}~{formatterTime(workInfo?.endDate)}</Descriptions.Item>
+        </Descriptions>
+        {/* <Form >
+          <FormItem label="订单号">{workInfo?.orderNo}</FormItem>
+          <FormItem label="合作社">{workInfo?.orgName}</FormItem>
+          <FormItem label="农机">{workInfo?.machineryName}</FormItem>
+          <FormItem label="农机手">{workInfo?.workerName}</FormItem>
+          <FormItem label="作业面积">{workInfo?.area}亩</FormItem>
+          <FormItem label="作业时间">{formatterTime(workInfo?.startDate)}~{formatterTime(workInfo?.endDate)}</FormItem>
+          <FormItem label=" " colon={false}>
+            <Button type="default" onClick={() => goBack()}>
+              返回
+            </Button>
+          </FormItem>
+        </Form> */}
+
+      </Card>
+    </PageHeaderWrapper>
+  );
+};

src/pages/Machinery/GIS/index.jsx

@@ -1,3 +1,155 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Button, Select } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import PageTable from '@/components/PageTable';
+import { getMachineryList } from '@/services/machinery';
+import { getMachineryTypeList } from '@/services/machineryType';
+import { getCooperativeList } from '@/services/cooperative';
+import WorkListModel from './components/WorkListModel';
+
+const { Option } = Select;
+
 export default (props) => {
-  return <div>农机GIS</div>;
+  const actionRef = useRef();
+  const [machineryTypeList, setMachineryTypeList] = useState([]);
+  const [cooperativeList, setCooperativeList] = useState([]);
+  const [editModal, setEditModal] = useState(false);
+  const [machineryId, setMachineryId] = useState();
+
+
+  const showList = (val) => {
+    setMachineryId(val.machineryId)
+    setEditModal(true)
+  }
+  const onCancel = () => {
+    setEditModal(false)
+    console.log(666);
+  }
+  useEffect(() => {
+    getCooperativeList({ pageSize: 999 }).then((res) => {
+      setCooperativeList(res.records);
+    }).catch((err) => {
+      console.log(err.message)
+    });
+    getMachineryTypeList({ pageSize: 999 }).then((res) => {
+      setMachineryTypeList(res.records);
+    }).catch((err) => {
+      console.log(err.message)
+    });
+  }, []);
+  const columns = [
+    {
+      title: '合作社',
+      dataIndex: 'orgId',
+      key: 'orgId',
+      hideInTable: true,
+      renderFormItem: (item, field, form) => {
+        return (
+          <Select>
+            {cooperativeList.map((item) => (
+              <Option value={item.orgId} key={item.orgId}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        )
+      }
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '合作社',
+      dataIndex: 'orgName',
+      key: 'orgName',
+      search: false
+    },
+    {
+      title: '农机类型',
+      dataIndex: 'typeId',
+      key: 'typeId',
+      renderFormItem: (item, field, form) => {
+        return (
+          <Select>
+            {machineryTypeList.map((item) => (
+              <Option value={item.typeId} key={item.typeId}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        );
+      },
+      hideInTable: true,
+    },
+    {
+      title: '农机类型',
+      dataIndex: 'typeName',
+      key: 'typeName',
+      search: false,
+    },
+    {
+      title: '区域',
+      dataIndex: 'regionName',
+      key: 'regionName',
+      search: false,
+    },
+    {
+      title: '农机单价',
+      dataIndex: 'price',
+      key: 'price',
+      render: (t) => t / 100,
+      search: false,
+    },
+    {
+      title: '主图',
+      dataIndex: 'thumb',
+      key: 'thumb',
+      width: 150,
+      render: (t) => <img width={110} src={t} alt="" />,
+      search: false,
+    },
+    {
+      title: '工作状态',
+      dataIndex: 'jobStatus',
+      key: 'jobStatus',
+      search: false,
+      render: (_, record) => {
+        return record.jobStatus == 1 ? '使用中' : '空闲中';
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      search: false,
+      render: (_, record) => {
+        return record.status === 1 ? '正常' : '维修中';
+      },
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => showList(record)}>
+          农机GIS
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageHeaderWrapper>
+      <PageTable
+        request={getMachineryList}
+        actionRef={actionRef}
+        columns={columns}
+        rowKey="machineryId"
+        options={false}
+        scroll={{ x: 1000 }}
+      />
+      <WorkListModel editModal={editModal} onCancel={onCancel} machineryId={machineryId} />
+    </PageHeaderWrapper>
+  );
 };

src/services/job.js

@@ -1,8 +1,15 @@
 import request from '@/utils/request';
 
 /**
- * 查询农机列表
+ * 查询作业列表
  * @param {*} params
  * @returns
  */
 export const getJobList = (params) => request('/work-job', { params });
+
+/**
+ * 查询作业详情
+ * @param {*} params
+ * @returns
+ */
+export const getJobDetail = (id) => request(`/work-job/${id}`);