去掉“待研发项目”，调整页面布局，优化人员计划（仅展示有数据的星期版本）。

1 year ago · ce5e67f8a5
2 changed files with 94 additions and 120 deletions
--- a/web/client/src/sections/homePage/containers/index.js
+++ b/web/client/src/sections/homePage/containers/index.js
@ -7,7 +7,6 @@ import { push } from 'react-router-redux';
 import moment from 'moment';
 import request from 'superagent';
 import ProTable from '@ant-design/pro-table';
-import { getWait } from '../actions/profile';
 import styles from './index.less';

 const schedule = require('node-schedule');
@ -19,11 +18,14 @@ const pointImg = '/assets/images/point.png';

 let cachePeopleData = null;

+function hideWeekdayInTable(weekday) {
+  return !cachePeopleData || cachePeopleData.every((d) => d[`${weekday}`] == 'undefined');
+}
+
 function Management(props) {
  const { dispatch, user } = props;
  const [projectData, setProjectData] = useState(null);
  const [peopleData, setPeopleData] = useState([]);
-  const [waitData, setWaitData] = useState([]);
  const ref = useRef();

  function getOngoingProjects() {
@ -46,11 +48,8 @@ function Management(props) {
      getOngoingProjects();
      getOngoingPersons();
    });
-
-    dispatch(getWait()).then((res) => {
-      setWaitData(res?.payload.data?.projects);
-    });
  }, []);
+
  const projectCol = [
    {
      title: '执行ID',
@ -168,6 +167,7 @@ function Management(props) {
      key: 'monday',
      dataIndex: 'monday',
      hideInSearch: true,
+      hideInTable: hideWeekdayInTable('monday'),
      render: (dom, record) => <div>{record.monday == 'undefined' ? '--' : record.monday}</div>,
    },
    {
@ -175,6 +175,7 @@ function Management(props) {
      key: 'tuesday',
      dataIndex: 'tuesday',
      hideInSearch: true,
+      hideInTable: hideWeekdayInTable('tuesday'),
      render: (dom, record) => <div>{record.tuesday == 'undefined' ? '--' : record.tuesday}</div>,
    },
    {
@ -182,6 +183,7 @@ function Management(props) {
      key: 'wednesday',
      dataIndex: 'wednesday',
      hideInSearch: true,
+      hideInTable: hideWeekdayInTable('wednesday'),
      render: (dom, record) => <div>{record.wednesday == 'undefined' ? '--' : record.wednesday}</div>,
    },
    {
@ -189,6 +191,7 @@ function Management(props) {
      key: 'thursday',
      dataIndex: 'thursday',
      hideInSearch: true,
+      hideInTable: hideWeekdayInTable('thursday'),
      render: (dom, record) => <div>{record.thursday == 'undefined' ? '--' : record.thursday}</div>,
    },
    {
@ -196,6 +199,7 @@ function Management(props) {
      key: 'friday',
      dataIndex: 'friday',
      hideInSearch: true,
+      hideInTable: hideWeekdayInTable('friday'),
      render: (dom, record) => <div>{record.friday == 'undefined' ? '--' : record.friday}</div>,
    },
    {
@ -203,6 +207,7 @@ function Management(props) {
      key: 'saturday',
      dataIndex: 'saturday',
      hideInSearch: true,
+      hideInTable: hideWeekdayInTable('saturday'),
      render: (dom, record) => <div>{record.saturday == 'undefined' ? '--' : record.saturday}</div>,
    },
    {
@ -210,6 +215,7 @@ function Management(props) {
      key: 'sunday',
      dataIndex: 'sunday',
      hideInSearch: true,
+      hideInTable: hideWeekdayInTable('sunday'),
      render: (dom, record) => <div>{record.sunday == 'undefined' ? '--' : record.sunday}</div>,
    },
    {
@ -219,45 +225,12 @@ function Management(props) {
      dataIndex: 'search_keyword',
      order: 6,
      fieldProps: {
-        placeholder: '请输入关键字进行搜索',
+        placeholder: '请输入关键字搜索',
        getPopupContainer: (triggerNode) => triggerNode.parentNode,
      },
    },
  ];

-  const waitCol = [
-    {
-      title: '项目',
-      dataIndex: 'name_project',
-      key: 'name_project',
-      align: 'center',
-    },
-    {
-      title: '需求来源',
-      dataIndex: 'from_project',
-      key: 'from_project',
-      align: 'center',
-    },
-    {
-      title: '对接人',
-      dataIndex: 'contacts',
-      key: 'contacts',
-      align: 'center',
-    }, {
-      title: '评估工时',
-      dataIndex: 'consum_time',
-      key: 'consum_time',
-      align: 'center',
-    },
-    {
-      title: '处理进度',
-      dataIndex: 'progress',
-      key: 'progress',
-      align: 'center',
-    },
-
-  ];
-
  return (
    <>
      <div className={CX('index')}>
@ -268,71 +241,55 @@ function Management(props) {
            <div className={CX('index-main-box-title')}>本月在研项目</div>
            <div className={CX('index-main-box-en')}>/Research project this month</div>
            <Spin spinning={!projectData}>
-              <Table dataSource={projectData} columns={projectCol} size="small" pagination={false} scroll={{ y: '32vh' }} />
+              <Table dataSource={projectData} columns={projectCol} size="small" pagination={false} scroll={{ y: '78vh' }} />
            </Spin>
          </div>

          <div className={CX('index-main-box')}>
            <img className={CX('index-main-box-point')} src={pointImg} />
-            <div className={CX('index-main-box-title')}>待研发项目</div>
-            <div className={CX('index-main-box-en')}>/Project to be developed</div>
-            <Table dataSource={waitData} columns={waitCol} size="small" pagination={false} scroll={{ y: '32vh' }} />
-          </div>
-        </div>
-        <div
-          className={CX('index-main-box')}
-          style={{
-            width: '90%', margin: '0 auto', marginTop: '2.8rem', height: '42.5vh',
-          }}
-        >
-          <img className={CX('index-main-box-point')} src={pointImg} />
-          <div className={CX('index-main-box-title')}>人员情况</div>
-          <div className={CX('index-main-box-en')}>/Information on Personnel</div>
-          <ProTable
-            options={false}
-            actionRef={ref}
-            dataSource={peopleData}
-            columns={peopleCol}
-            size="small"
-            pagination={false}
-            scroll={{ y: '20vh' }}
-            request={async (params) => {
-              const { search_keyword, post_people } = params;
-              if (search_keyword || post_people) {
-                const data = cachePeopleData.filter((member) => {
-                  if (!post_people) {
-                    return member.name_people.includes(search_keyword);
-                  }
-                  if (!search_keyword) {
-                    return member.post_people == post_people;
-                  }
-                  return member.name_people.includes(search_keyword) && member.post_people == post_people;
-                });
+            <div className={CX('index-main-box-title')}>人员情况</div>
+            <div className={CX('index-main-box-en')}>/Information on Personnel</div>
+            <ProTable
+              options={false}
+              actionRef={ref}
+              dataSource={peopleData}
+              columns={peopleCol}
+              size="small"
+              pagination={false}
+              scroll={{ y: '69vh' }}
+              request={async (params) => {
+                const { search_keyword, post_people } = params;
+                if (search_keyword || post_people) {
+                  const data = cachePeopleData.filter((member) => {
+                    if (!post_people) {
+                      return member.name_people.includes(search_keyword);
+                    }
+                    if (!search_keyword) {
+                      return member.post_people == post_people;
+                    }
+                    return member.name_people.includes(search_keyword) && member.post_people == post_people;
+                  });
+                  setPeopleData(data);
+                  return { data };
+                }
+                if (cachePeopleData) {
+                  setPeopleData(cachePeopleData);
+                  return { data: cachePeopleData };
+                }
+                const res = await request.get('/ongoing/persons');
+                const data = res?.body?.projects;
+                cachePeopleData = data;
                setPeopleData(data);
-                return { data };
-              }
-              if (cachePeopleData) {
-                setPeopleData(cachePeopleData);
-                return { data: cachePeopleData };
-              }
-              const res = await request.get('/ongoing/persons');
-              const data = res?.body?.projects;
-              cachePeopleData = data;
-              setPeopleData(data);
-              return { ...res };
-            }}
-          />
+                return { ...res };
+              }}
+            />
+          </div>
        </div>
      </div>

      <a
        style={{
-          fontSize: '16px',
-          position: 'absolute',
-          color: '#000',
-          right: '40px',
-          top: '20px',
-          zIndex: 10000,
+          fontSize: '16px', position: 'absolute', color: '#000', right: '40px', top: '20px', zIndex: 10000,
        }}
        onClick={() => {
          if (user && user.authorized && JSON.parse(sessionStorage.getItem('user'))) {
--- a/web/client/src/sections/homePage/containers/index.less
+++ b/web/client/src/sections/homePage/containers/index.less
@ -119,35 +119,55 @@

  &-main {
    display: flex;
-    width: 90%;
+    width: 96%;
    margin: 0 auto;
-    height: 40vh;
-justify-content: space-between;
+    height: 85vh;
+    justify-content: space-between;
+
    &-box {
-      width: 49%;
-     height: 42vh;
+      &:first-child {
+        width: 41%;
+      }
+
+      &:last-child {
+        width: 58%;
+      }
+
+      height: 87vh;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
      text-align: left;
      padding: 5px;
-       .ant-table-tbody > tr > td{
+
+      .ant-table-tbody>tr>td {
        background-color: #ffffff !important;
-    }   
-    .ant-col-offset-6{
-      text-align: left !important;
+      }
+
+      .ant-col-offset-6 {
+        text-align: left !important;
        margin-left: 0% !important;
-    }  
-    .ant-col-offset-6{
-      margin-left: -12%;
-    }
-    .ant-col ant-form-item-control{
-      flex-grow:0 !important;
-    }
-.ant-pro-card-body{
-  padding: 0px 24px 0 24px !important;
-}
-// .ant-table-column-sorter-inner{
-//   display: none !important;
-// }
+      }
+
+      .ant-col-offset-6 {
+        margin-left: -12%;
+      }
+
+      .ant-col ant-form-item-control {
+        flex-grow: 0 !important;
+      }
+
+      .ant-pro-card-body {
+        padding: 0px 24px 0 24px !important;
+      }
+
+      .ant-pro-table {
+        .ant-card-body {
+          padding: 0;
+        }
+
+        .ant-pro-table-search {
+          margin-bottom: 0;
+        }
+      }

      &-point {
        width: 14px;
@ -180,7 +200,4 @@ justify-content: space-between;

 .cell-class {
  background-color: skyblue;
-}
-// .ant-tooltip-content{
-//   display: none !important;
-// }
+}