组织架构图

.umirc.ts

@@ -1,11 +1,3 @@
-/*
- * @Author: Chengliang 1546584672@qq.com
- * @Date: 2023-08-16 11:22:18
- * @LastEditors: Chengliang 1546584672@qq.com
- * @LastEditTime: 2023-08-24 15:58:29
- * @FilePath: /org-chart-frant/.umirc.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 import { defineConfig } from 'umi';
 
 export default defineConfig({
@@ -21,6 +13,7 @@ export default defineConfig({
     { path: '/user', component: '@/pages/user' },
     { path: '/company', component: '@/pages/company' },
     { path: '/dragtree', component: '@/pages/dragTree' },
+    { path: '/statistics', component: '@/pages/statisticsTable' },
   ],
   fastRefresh: {},
   antd: {},

src/components/timeline/index.jsx

@@ -2,19 +2,22 @@
  * @Author: Chengliang 1546584672@qq.com
  * @Date: 2023-06-25 16:33:21
  * @LastEditors: Chengliang 1546584672@qq.com
- * @LastEditTime: 2023-06-29 14:24:04
+ * @LastEditTime: 2023-09-14 17:48:39
  * @FilePath: /org-chart-frant/src/components/timeline/index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import React from 'react';
-import { Timeline } from 'antd';
+import { Timeline, Drawer } from 'antd';
 import styles from './index.less';
+import leftTreeShow from './img/leftTree-show.png';
+import leftHide from './img/leftTree-hide.png';
 
 export default class TimeLine extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       timelineList: [],
+      open: true,
     };
   }
 
@@ -46,26 +49,61 @@ export default class TimeLine extends React.Component {
       });
   }
 
+  setOpen = () => {
+    this.setState({
+      open: !this.state.open,
+    });
+  };
+
   render() {
+    let showStyle = {};
+    let positionStyle = {};
+    if (this.state.open) {
+      showStyle = {
+        display: 'block',
+      };
+      positionStyle = {
+        left: '219px',
+        background: `url(${leftTreeShow}) no-repeat -2px 0`,
+      };
+    } else {
+      showStyle = {
+        display: 'none',
+      };
+      positionStyle = {
+        left: '0',
+        background: `url(${leftHide}) no-repeat -2px 0`,
+      };
+    }
+
     return (
-      <div className={styles.lineWrapper}>
-        <Timeline>
-          {this.state.timelineList.map((item) => {
-            return (
-              <Timeline.Item
-                key={item.key}
-                onClick={this.handleLineClick.bind(this, item)}
-                className={styles.timeline}
-                color={item.color}
-                style={{ color: item.color == 'blue' ? '#1890ff' : 'dimgray' }}
-              >
-                <div>{item.title}</div>
-                <div className={styles.time}>{item.time}</div>
-              </Timeline.Item>
-            );
-          })}
-        </Timeline>
-      </div>
+      <>
+        <div
+          className={styles.leftRightLayoutBtn}
+          style={positionStyle}
+          onClick={this.setOpen}
+        ></div>
+        <div className={styles.lineWrapper} style={showStyle}>
+          <Timeline>
+            {this.state.timelineList.map((item) => {
+              return (
+                <Timeline.Item
+                  key={item.key}
+                  onClick={this.handleLineClick.bind(this, item)}
+                  className={styles.timeline}
+                  color={item.color}
+                  style={{
+                    color: item.color == 'blue' ? '#1890ff' : 'dimgray',
+                  }}
+                >
+                  <div>{item.title}</div>
+                  <div className={styles.time}>{item.time}</div>
+                </Timeline.Item>
+              );
+            })}
+          </Timeline>
+        </div>
+      </>
     );
   }
 }

src/components/timeline/index.less

@@ -24,6 +24,21 @@
   }
 }
 
+.leftRightLayoutBtn {
+  width: 18px;
+  height: 60px;
+  position: absolute;
+  top: 50%;
+  margin-top: -30px;
+  z-index: 101;
+  cursor: pointer;
+}
+
+.leftRightLayoutBtn :hover {
+  background-image: url(./img/leftTree-show-hover.png) no-repeat -2px 0 !important;
+  background-color: #1890ff;
+}
+
 .lineWrapper::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 10px;

src/components/topBar/index.jsx

@@ -293,7 +293,7 @@ export class TopBar extends React.Component {
               />
             </Tooltip>
           </Col>
-          <Col span={8}>
+          <Col span={16}>
             <Button
               type="primary"
               style={{ marginRight: '10px' }}
@@ -323,6 +323,15 @@ export class TopBar extends React.Component {
             >
               组织调整
             </Button>
+            <Button
+              type="primary"
+              style={{ marginRight: '10px' }}
+              onClick={() => {
+                window.open('#/statistics', 'blank');
+              }}
+            >
+              人数统计
+            </Button>
             <Dropdown overlay={this.menu}>
               <Button type="primary">导出</Button>
             </Dropdown>

src/department/index.js

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export default () => {
-    return <div>Hello</div>
-}

src/pages/company.jsx

@@ -10,7 +10,8 @@ import OperateDialog from '../components/dialog';
 import jsPDF from 'jspdf';
 import moment from 'moment';
 import qs from 'qs';
-import { message, Spin } from 'antd';
+import { message, Spin, notification } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';
 
 let active = 'top';
 let drawerCom = null;
@@ -31,6 +32,14 @@ export default function companyPage() {
   const [timelineId, setTimelineId] = useState(0);
   const infoRef = useRef();
 
+  useEffect(() => {
+    notification.open({
+      message: '提示',
+      description:
+        '组织架构图中编制数和在编数显示初始化需参考文档配置定时任务并执行！！！(编制数默认取本年度最新编制信息,人数统计展示仅限于行政维度)',
+      icon: <SmileOutlined style={{ color: '#108ee9' }} />,
+    });
+  }, []);
   useEffect(() => {
     infoRef.current = timelineId;
   }, [timelineId]);
@@ -140,6 +149,8 @@ export default function companyPage() {
   };
 
   const nodeContentRender = (d, i, arr, state) => {
+    let fclass = topbar.state.requestData.fclass;
+    let statisticsStyle = fclass == 0 ? 'block' : 'none';
     if (d.data.ftype == 0) {
       return `<div>
           <div style="display: inline-block; text-align: center; margin-left: 5px;">
@@ -166,7 +177,13 @@ export default function companyPage() {
               d.data.fname
             } style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
             line-height: 18px;word-break: break-all;">${d.data.fname}</div>
-          </div>`;
+            <div style="display: ${statisticsStyle}">
+                <span style="color:red">${d.data.staffNum}</span> /
+                <span style="color:green">${d.data.onJobNum}</span>
+            </div>
+          </div>
+        </div>
+          `;
     } else if (d.data.ftype == 2) {
       return `
         <div style="width: 100%; height: 100%; background-size: 100% 100%;">
@@ -179,6 +196,10 @@ export default function companyPage() {
             font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;"> 
             <div style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
             line-height: 18px;word-break: break-all;">${d.data.fname}</div>
+            <div style="display: ${statisticsStyle}">
+              <span style="color:red">${d.data.staffNum}</span> /
+              <span style="color:green">${d.data.onJobNum}</span>
+            </div>
           </div>
         </div>
         `;

src/pages/statisticsTable.jsx

@@ -0,0 +1,89 @@
+/*
+ * @Author: Chengliang 1546584672@qq.com
+ * @Date: 2023-09-11 15:33:27
+ * @LastEditors: Chengliang 1546584672@qq.com
+ * @LastEditTime: 2023-09-13 17:49:16
+ * @FilePath: /org-chart-frant/src/pages/statisticsTable.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, { useEffect, useState, useRef } from 'react';
+import * as d3 from 'd3';
+import qs from 'qs';
+import { Table } from 'antd';
+
+const StatisticsTable = () => {
+  const [loading, setLoading] = useState(true);
+  const [dataSource, setDataSource] = useState([]);
+  const [columns, setColumns] = useState([]);
+
+  useEffect(() => {
+    const columns = [
+      {
+        title: '序号',
+        dataIndex: 'key',
+        key: 'key',
+      },
+      {
+        title: '名称',
+        dataIndex: 'dataIdName',
+        key: 'dataIdName',
+      },
+      {
+        title: '上级',
+        dataIndex: 'superIdName',
+        key: 'superIdName',
+      },
+      {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        render(value, row, index) {
+          if (value == 1) {
+            return '分部';
+          } else {
+            return '部门';
+          }
+        },
+      },
+      {
+        title: '在编数',
+        dataIndex: 'onJobNum',
+        key: 'onJobNum',
+      },
+      {
+        title: '编制数',
+        dataIndex: 'staffNum',
+        key: 'staffNum',
+      },
+      {
+        title: '创建人',
+        dataIndex: 'creator',
+        key: 'creator',
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+      },
+    ];
+    setColumns(columns);
+    d3.json(`/api/bs/hrmorganization/orgchart/selectStatistics`).then((res) => {
+      setDataSource(res.data.result);
+      setLoading(false);
+    });
+  }, [true]);
+
+  return (
+    <>
+      <div style={{ padding: '50px' }}>
+        <Table dataSource={dataSource} columns={columns} loading={loading} />;
+      </div>
+    </>
+  );
+};
+export default StatisticsTable;

src/pages/user.jsx

@@ -99,7 +99,7 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaaX333ODS20gePpBTCOy; JSESSIONID=aaaX333ODS20gePpBTCOy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=6359f5f6-7958-4201-8982-fdc38c5348b7';
+      'ecology_JSessionid=aaaQRFwOgYRXPc88EZiQy; JSESSIONID=aaaQRFwOgYRXPc88EZiQy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=0418808b-1045-4624-bea6-5b308360da7b';
     d3.json(
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
     ).then((data) => {