中远重工组织架构图改造

src/components/drawer/index.jsx

@@ -32,7 +32,7 @@ export default class DrawerComponents extends React.Component {
       dataSource: [],
       columns: [],
       spinning: true,
-      showJob: true,
+      showJob: false,
     };
   }
 
@@ -63,7 +63,7 @@ export default class DrawerComponents extends React.Component {
   }
 
   //获取数据
-  getDeatilDatas(params, type = 'chart', showJob = '1') {
+  getDeatilDatas(params, type = 'chart', showJob = '0') {
     this.setState({ spinning: true });
     d3.json(
       '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
@@ -237,8 +237,12 @@ export default class DrawerComponents extends React.Component {
                     </div>
                     <div style="display: inline-block;  background-size: 100% 100%; width: 35%; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
                         <img src='./img/user-card/avatar-outer.png' style='position:absolute;width:90px;height:90px;left:11px'/>
-                        <img src="./img/department.png" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
-                    </div>
+                        <img src="${
+                          d.data.fleaderimg
+                            ? d.data.fleaderimg
+                            : './img/department.png'
+                        }" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
+                        </div>
                     <div style="display: inline-block; margin-left: 6px;width: 55%">
                         <div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                             ${d.data.fname}
@@ -284,14 +288,15 @@ export default class DrawerComponents extends React.Component {
                         : './img/default_avator.png'
                     }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" />
                 </div>
-                <div style="display: inline-block; margin-left: 6px;width: 55%;height:100%">
+                <div style="display: inline-block; margin-left: 6px;width: 55%;height:100%;margin-top: -12px;">
                     <div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:15px'>
                         <div style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
                           d.data.fname
                         }</div>
                     </div>
-                    <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
-                        <span>司龄: ${d.data.companyWorkYear} 年</span>
+                    <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;height: 25px;line-height: 25px;">
+                        <span>所属部门: ${d.data.localDeptName} </span>
+                        <div>岗位名称: ${d.data.jobTitle}</div>
                     </div>
                 </div>
                 </div>
@@ -300,23 +305,21 @@ export default class DrawerComponents extends React.Component {
   };
 
   showDrawer = (params) => {
-    const showJob = params.fclass == '0' ? '1' : '0';
-    this.getDeatilDatas(params, 'chart', showJob);
+    this.getDeatilDatas(params, 'chart', '0');
     this.setState({ open: true, params: params });
   };
 
   onClose = () => {
-    this.setState({ open: false, detailType: 'chart', showJob: true });
+    this.setState({ open: false, detailType: 'chart', showJob: false });
   };
 
   changeDetail = () => {
     const { detailType, params } = this.state;
     let type = detailType == 'chart' ? 'table' : 'chart';
-    const showJob = this.state.showJob ? '1' : '0';
     this.setState({
       detailType: type,
     });
-    this.getDeatilDatas(params, type, showJob);
+    this.getDeatilDatas(params, type, '0');
   };
 
   render() {
@@ -352,7 +355,7 @@ export default class DrawerComponents extends React.Component {
             </span>
           </>
         }
-        width={1100}
+        width={1200}
         onClose={this.onClose}
         open={open}
         bodyStyle={{
@@ -360,25 +363,6 @@ export default class DrawerComponents extends React.Component {
         }}
         extra={
           <Space>
-            {detailType == 'chart' && params && params.fclass == '0' && (
-              <Checkbox
-                style={{ marginTop: '5px', marginLeft: 100 }}
-                checked={showJob}
-                onChange={(e) => {
-                  this.setState({
-                    showJob: e.target.checked,
-                  });
-
-                  this.getDeatilDatas(
-                    params,
-                    detailType,
-                    e.target.checked ? '1' : '0',
-                  );
-                }}
-              >
-                是否显示岗位
-              </Checkbox>
-            )}
             <Dropdown overlay={menu}>
               <Button type="primary">导出</Button>
             </Dropdown>

src/components/topBar/index.jsx

@@ -21,7 +21,7 @@ const { TextArea } = Input;
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import locale from 'antd/lib/date-picker/locale/zh_CN';
-import { HomeOutlined } from '@ant-design/icons';
+import { HomeOutlined, FolderOpenOutlined } from '@ant-design/icons';
 moment.locale('zh-cn');
 
 export class TopBar extends React.Component {
@@ -32,12 +32,15 @@ export class TopBar extends React.Component {
       rootTreeData: [], //根节点异步树
       treeLoadedKeys: [],
       treeExpandedKeys: [],
+      deptTreeData: [],
       requestData: {
         fclass: '0',
         root: undefined,
-        level: '2',
+        department: undefined,
+        level: '3',
         fisvitual: '0',
         hidedept: '0',
+        showClass: '0', //班组显示 0不显示
       },
       open: false,
       confirmLoading: false,
@@ -156,6 +159,29 @@ export class TopBar extends React.Component {
     this.getSeatchCondition(this.props.url);
   }
 
+  /**
+   * 部门节点树
+   */
+  getDeptTreeData = (url) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.api_status) {
+          let arr = [...data.departmentTree];
+          arr.map((item, index) => {
+            item.icon = <FolderOpenOutlined />;
+          });
+          this.setState({
+            deptTreeData: arr,
+          });
+        }
+      });
+  };
+
+  onDeptChange = (value, label, extra) => {
+    this.handleFormChange({ department: value });
+  };
+
   getSeatchCondition = (url) => {
     fetch(url)
       .then((res) => res.json())
@@ -163,10 +189,14 @@ export class TopBar extends React.Component {
         data.companyTree.map((item, index) => {
           item.icon = <HomeOutlined />;
         });
+        this.handleFormChange({ root: data.root });
         this.setState({
           fclasslist: data.fclasslist,
           rootTreeData: data.companyTree,
         });
+        this.getDeptTreeData(
+          `/api/bs/hrmorganization/orgchart/getDepartmentTree?fclass=0&subcompany=${data.root}`,
+        );
       });
   };
 
@@ -188,50 +218,27 @@ export class TopBar extends React.Component {
 
   render() {
     const { disabled, type } = this.props;
-    const { rootTreeData, open, confirmLoading, treeExpandedKeys } = this.state;
+    const {
+      rootTreeData,
+      open,
+      confirmLoading,
+      treeExpandedKeys,
+      requestData,
+      deptTreeData,
+    } = this.state;
+    const { fclass, department, root, showClass } = requestData;
 
     return (
       <div className={style.topbarWrapper}>
         <Row>
           <Col span={6}>
-            维度：
-            <Select
-              defaultValue="0"
-              style={{ width: 140 }}
-              value={this.state.requestData.fclass}
-              onChange={(value) => {
-                const requestData = {
-                  fclass: value,
-                  root: undefined,
-                  level: '2',
-                  fisvitual: '0',
-                  hidedept: '0',
-                };
-                this.handleFormChange(requestData);
-                this.setState({
-                  rootTreeData: [],
-                });
-                this.getNodeTreeNode(
-                  `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
-                  false,
-                );
-                this.props.changeFclass(requestData);
-              }}
-            >
-              {this.state.fclasslist.map((item) => (
-                <Option key={item.key} value={item.id}>
-                  {item.companyname}
-                </Option>
-              ))}
-            </Select>
-          </Col>
-          <Col span={6}>
-            根节点：
+            所属分部：
             <TreeSelect
+              disabled
               treeDataSimpleMode
               allowClear
               style={{ width: '75%' }}
-              value={this.state.requestData.root}
+              value={root}
               dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
               placeholder="请选择根节点"
               onChange={this.onRootChange}
@@ -240,6 +247,29 @@ export class TopBar extends React.Component {
               treeIcon
             />
           </Col>
+          <Col span={6}>
+            <Checkbox
+              style={{ marginTop: '5px', marginLeft: 60 }}
+              checked={showClass == '1'}
+              onChange={(e) =>
+                this.handleFormChange({
+                  showClass: e.target.checked ? '1' : '0',
+                })
+              }
+            >
+              显示班组
+            </Checkbox>
+            <Tooltip
+              title="提示:开启后将显示班组信息"
+              color="#0082fb"
+              placement="rightTop"
+            >
+              <QuestionCircleOutlined
+                style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
+              />
+            </Tooltip>
+          </Col>
+
           <Col span={6}>
             <Checkbox
               style={{ marginTop: '5px', marginLeft: 100 }}
@@ -279,39 +309,20 @@ export class TopBar extends React.Component {
         </Row>
         <Row style={{ marginTop: '15px' }}>
           <Col span={6}>
-            <Checkbox
-              style={{ marginTop: '5px' }}
-              checked={this.state.requestData.fisvitual == '1'}
-              onChange={(e) =>
-                this.handleFormChange({
-                  fisvitual: e.target.checked ? '1' : '0',
-                })
-              }
-            >
-              显示虚拟组织
-            </Checkbox>
-            <Tooltip
-              title="提示:若启用虚拟组织，需要在分部自定义表增加字段(名称 fblx) 字段类型 下拉框(0实体 1虚拟) 部门自定义表同上(字段名称 bmlx)。"
-              color="#0082fb"
-              placement="rightTop"
-            >
-              <QuestionCircleOutlined
-                style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
-              />
-            </Tooltip>
+            部门节点：
+            <TreeSelect
+              treeDataSimpleMode
+              allowClear
+              style={{ width: '75%' }}
+              value={department}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择"
+              onChange={this.onDeptChange}
+              treeData={deptTreeData}
+              treeIcon
+            />
           </Col>
-          <Col span={16}>
-            <Button
-              type="primary"
-              style={{ marginRight: '10px' }}
-              disabled={disabled}
-              onClick={() => {
-                this.setState({ open: true });
-              }}
-            >
-              版本记录
-            </Button>
-
+          <Col span={8} style={{ textAlign: 'center' }}>
             <Button
               type="primary"
               style={{ marginRight: '10px' }}

src/pages/company.jsx

@@ -10,8 +10,10 @@ import OperateDialog from '../components/dialog';
 import jsPDF from 'jspdf';
 import moment from 'moment';
 import qs from 'qs';
-import { message, Spin, notification } from 'antd';
+import { message, Spin, notification, Affix, Button, Tooltip } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
+import remind from '../../public/img/remind.png';
+import hand from '../../public/img/hand.gif';
 
 let active = 'top';
 let drawerCom = null;
@@ -109,7 +111,7 @@ export default function companyPage() {
   // 获取数据
   useEffect(() => {
     d3.json(
-      '/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&hidedept=0&root=0&level=2&id=0',
+      '/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&hidedept=0&root=0&level=3&id=0&showClass=0',
     ).then((data) => {
       setData(data.data);
       setHasRight(data?.hasRight);
@@ -465,13 +467,6 @@ export default function companyPage() {
           onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
           onZoomBehavior={(value) => handleZoomBehavior(value)}
         />
-        <TimeLine
-          ref={(r) => (timeLine = r)}
-          onClick={(timeline) => {
-            timeLineSearch(timeline);
-          }}
-          url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
-        />
         <Spin size="large" spinning={spinning}>
           <OrgChartComponent
             setChart={(chart) => (orgChart = chart)}
@@ -491,6 +486,16 @@ export default function companyPage() {
           addFolderNode={addFolderNode}
           deleteNode={deleteNode}
         />
+        <Affix style={{ position: 'fixed', top: 200, left: 20 }}>
+          <Tooltip
+            title="提示:图中红色数字代表编制数,绿色数字代表在职人数"
+            color="#0082fb"
+            placement="rightTop"
+          >
+            <img className={styles.remindImage} src={remind} />
+          </Tooltip>
+          <img className={styles.handImage} alt="手势" src={hand} />
+        </Affix>
       </div>
     )
   );

src/pages/index.less

@@ -117,3 +117,15 @@
   padding: 0px;
   overflow: hidden;
 }
+
+.remindImage {
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  transition: transform 0.3s ease;
+}
+
+.handImage {
+  width: 40px;
+  height: 40px;
+}