中远重工初版架构图完成

2024-04-30 15:50:25 +08:00 · 2024-04-30 15:50:25 +08:00 · fd31f9370a
parent 156e801980
commit fd31f9370a
67 changed files with 138362 additions and 51 deletions
--- a/orgChart/1.3c747345.async.js
+++ b/orgChart/1.3c747345.async.js
--- a/orgChart/2.070ac19a.async.js
+++ b/orgChart/2.070ac19a.async.js
--- a/orgChart/3.391dace1.async.js
+++ b/orgChart/3.391dace1.async.js
--- a/orgChart/img/avator.png
+++ b/orgChart/img/avator.png
--- a/orgChart/img/back/background.png
+++ b/orgChart/img/back/background.png
--- a/orgChart/img/back/inset.png
+++ b/orgChart/img/back/inset.png
--- a/orgChart/img/back/level1.png
+++ b/orgChart/img/back/level1.png
--- a/orgChart/img/back/level2.png
+++ b/orgChart/img/back/level2.png
--- a/orgChart/img/back/level3.png
+++ b/orgChart/img/back/level3.png
--- a/orgChart/img/back/level4.png
+++ b/orgChart/img/back/level4.png
--- a/orgChart/img/back/level5.png
+++ b/orgChart/img/back/level5.png
--- a/orgChart/img/back/level6.png
+++ b/orgChart/img/back/level6.png
--- a/orgChart/img/back/level7.png
+++ b/orgChart/img/back/level7.png
--- a/orgChart/img/back/level8.png
+++ b/orgChart/img/back/level8.png
--- a/orgChart/img/button_content.png
+++ b/orgChart/img/button_content.png
--- a/orgChart/img/change.png
+++ b/orgChart/img/change.png
--- a/orgChart/img/company.png
+++ b/orgChart/img/company.png
--- a/orgChart/img/company_job_label.png
+++ b/orgChart/img/company_job_label.png
--- a/orgChart/img/default_avator.png
+++ b/orgChart/img/default_avator.png
--- a/orgChart/img/department.png
+++ b/orgChart/img/department.png
--- a/orgChart/img/department/1.png
+++ b/orgChart/img/department/1.png
--- a/orgChart/img/department/2.png
+++ b/orgChart/img/department/2.png
--- a/orgChart/img/department/3.png
+++ b/orgChart/img/department/3.png
--- a/orgChart/img/department/4.png
+++ b/orgChart/img/department/4.png
--- a/orgChart/img/department/5.png
+++ b/orgChart/img/department/5.png
--- a/orgChart/img/department/6.png
+++ b/orgChart/img/department/6.png
--- a/orgChart/img/department/7.png
+++ b/orgChart/img/department/7.png
--- a/orgChart/img/department/8.png
+++ b/orgChart/img/department/8.png
--- a/orgChart/img/hand.gif
+++ b/orgChart/img/hand.gif
--- a/orgChart/img/manager.png
+++ b/orgChart/img/manager.png
--- a/orgChart/img/permission.png
+++ b/orgChart/img/permission.png
--- a/orgChart/img/remind.png
+++ b/orgChart/img/remind.png
--- a/orgChart/img/subcompany/1.png
+++ b/orgChart/img/subcompany/1.png
--- a/orgChart/img/subcompany/2.png
+++ b/orgChart/img/subcompany/2.png
--- a/orgChart/img/subcompany/3.png
+++ b/orgChart/img/subcompany/3.png
--- a/orgChart/img/subcompany1.png
+++ b/orgChart/img/subcompany1.png
--- a/orgChart/img/user-card/avatar-outer-green.png
+++ b/orgChart/img/user-card/avatar-outer-green.png
--- a/orgChart/img/user-card/avatar-outer.png
+++ b/orgChart/img/user-card/avatar-outer.png
--- a/orgChart/img/user-card/card-label-start.png
+++ b/orgChart/img/user-card/card-label-start.png
--- a/orgChart/img/user-card/jobicon-orange.png
+++ b/orgChart/img/user-card/jobicon-orange.png
--- a/orgChart/img/user-card/jobicon.png
+++ b/orgChart/img/user-card/jobicon.png
--- a/orgChart/img/user-card/line1.png
+++ b/orgChart/img/user-card/line1.png
--- a/orgChart/img/user-card/line2.png
+++ b/orgChart/img/user-card/line2.png
--- a/orgChart/img/user-card/user-card-blue.png
+++ b/orgChart/img/user-card/user-card-blue.png
--- a/orgChart/img/user-card/user-card-green.png
+++ b/orgChart/img/user-card/user-card-green.png
--- a/orgChart/img/user-card/user-card-orange.png
+++ b/orgChart/img/user-card/user-card-orange.png
--- a/orgChart/img/user-card/user-card.png
+++ b/orgChart/img/user-card/user-card.png
--- a/orgChart/img/user-card/绿色-虚线.png
+++ b/orgChart/img/user-card/绿色-虚线.png
--- a/orgChart/index.html
+++ b/orgChart/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
+    />
+    <link rel="stylesheet" href="./umi.c64b754c.css" />
+    <script>
+      window.routerBase = "/spa/orgChart/";
+    </script>
+    <script>
+      //! umi version: 3.5.32
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script src="./umi.1df510d5.js"></script>
+  </body>
+</html>
--- a/orgChart/static/background.4d79988a.png
+++ b/orgChart/static/background.4d79988a.png
--- a/orgChart/static/hand.4d36373f.gif
+++ b/orgChart/static/hand.4d36373f.gif
--- a/orgChart/static/inset.67f1d620.png
+++ b/orgChart/static/inset.67f1d620.png
--- a/orgChart/umi.1df510d5.js
+++ b/orgChart/umi.1df510d5.js
--- a/orgChart/umi.c64b754c.css
+++ b/orgChart/umi.c64b754c.css
--- a/package.json
+++ b/package.json
@ -24,6 +24,7 @@
    "@types/d3": "^7.4.0",
    "d3": "7.4.4",
    "d3-org-chart": "2.6.0",
+    "jquery": "^3.7.1",
    "js-export-excel": "^1.1.4",
    "jspdf": "^2.5.1",
    "moment": "^2.29.3",
--- a/public/img/department/dept0.png
+++ b/public/img/department/dept0.png
--- a/public/img/department/dept1.png
+++ b/public/img/department/dept1.png
--- a/public/img/department/dept2.png
+++ b/public/img/department/dept2.png
--- a/public/img/department/dept3.png
+++ b/public/img/department/dept3.png
--- a/public/img/department/dept4.png
+++ b/public/img/department/dept4.png
--- a/public/img/department/dept5.png
+++ b/public/img/department/dept5.png
--- a/src/components/drawer/index.jsx
+++ b/src/components/drawer/index.jsx
@ -8,6 +8,8 @@ import {
  Table,
  Spin,
  Checkbox,
+  Row,
+  Col,
 } from 'antd';
 import { OrgChartComponent } from '@/components/orgChart';
 import * as d3 from 'd3';
@ -33,11 +35,22 @@ export default class DrawerComponents extends React.Component {
      columns: [],
      spinning: true,
      showJob: false,
+      nbOptions: [],
+      defaultNbValue: [],
+      wbOptions: [],
+      defaultWbValue: [],
    };
  }

  componentDidMount() {}

+  componentDidUpdate(prevProps, prevState, snapshotValue) {
+    // 组件更新后的操作
+    // if (orgChart != null) {
+    //  orgChart.getChartState().svgHeight = 3000;
+    // }
+  }
+
  // 点击节点
  onNodeClick(node) {}

@ -62,18 +75,38 @@ export default class DrawerComponents extends React.Component {
      : `./img/user-card/user-card-blue.png`;
  }

+  //查询条件
+  getDeatilCondition() {
+    return new Promise((resolve) => {
+      d3.json('/api/bs/hrmorganization/orgchart/getDeptDetailCondition?').then(
+        (data) => {
+          this.setState({
+            nbOptions: data.nbCondition,
+            wbOptions: data.wbCondition,
+            defaultNbValue: data.nbValue,
+          });
+          resolve();
+        },
+      );
+    });
+  }
+
  //获取数据
  getDeatilDatas(params, type = 'chart', showJob = '0') {
-    this.setState({ spinning: true });
+    this.setState({ spinning: true, data: [] });
    d3.json(
      '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
-        qs.stringify({ detauleType: type, ...params, showJob }),
+        qs.stringify({ detailType: type, ...params, showJob }),
    ).then((data) => {
      //
      if (type == 'chart') {
        this.setState({ data: data.data, spinning: false });
      } else {
-        this.setState({ dataSource: data.dataSource, columns: data.columns });
+        this.setState({
+          dataSource: data.dataSource,
+          columns: data.columns,
+          spinning: false,
+        });
      }
    });
  }
@ -304,22 +337,74 @@ export default class DrawerComponents extends React.Component {
    }
  };

-  showDrawer = (params) => {
-    this.getDeatilDatas(params, 'chart', '0');
+  showDrawer = async (params) => {
    this.setState({ open: true, params: params });
+    await this.getDeatilCondition();
+    const { defaultNbValue } = this.state;
+    params = {
+      ...params,
+      nbValue: defaultNbValue.join(','),
+    };
+    this.getDeatilDatas(params, 'chart', '0');
  };

  onClose = () => {
-    this.setState({ open: false, detailType: 'chart', showJob: false });
+    this.setState({
+      open: false,
+      detailType: 'chart',
+      showJob: false,
+      data: [],
+      dataSource: [],
+      defaultNbValue: [],
+      defaultWbValue: [],
+    });
  };

  changeDetail = () => {
-    const { detailType, params } = this.state;
+    const {
+      defaultNbValue,
+      defaultWbValue,
+      detailType,
+      params,
+      data,
+      dataSource,
+    } = this.state;
    let type = detailType == 'chart' ? 'table' : 'chart';
    this.setState({
      detailType: type,
    });
-    this.getDeatilDatas(params, type, '0');
+    const nParam = {
+      ...params,
+      nbValue: defaultNbValue.join(','),
+      wbValue: defaultWbValue.join(','),
+    };
+    this.getDeatilDatas(nParam, type, '0');
+  };
+
+  onNbChange = (checkedValues) => {
+    this.setState({
+      defaultNbValue: checkedValues,
+    });
+    const { defaultWbValue, params, detailType } = this.state;
+    const nParam = {
+      ...params,
+      nbValue: checkedValues.join(','),
+      wbValue: defaultWbValue.join(','),
+    };
+    this.getDeatilDatas(nParam, detailType, '0');
+  };
+
+  onWbChange = (checkedValues) => {
+    this.setState({
+      defaultWbValue: checkedValues,
+    });
+    const { defaultNbValue, params, detailType } = this.state;
+    const nParam = {
+      ...params,
+      nbValue: defaultNbValue.join(','),
+      wbValue: checkedValues.join(','),
+    };
+    this.getDeatilDatas(nParam, detailType, '0');
  };

  render() {
@ -332,8 +417,13 @@ export default class DrawerComponents extends React.Component {
      columns,
      spinning,
      showJob,
+      nbOptions,
+      defaultNbValue,
+      wbOptions,
+      defaultWbValue,
    } = this.state;
    let arr = [];
+
    if (detailType == 'chart') {
      arr.push({ label: '导出图片', key: '1' });
      //arr.push({ label: '导出PDF', key: '2' });
@ -358,9 +448,6 @@ export default class DrawerComponents extends React.Component {
        width={1200}
        onClose={this.onClose}
        open={open}
-        bodyStyle={{
-          paddingBottom: 80,
-        }}
        extra={
          <Space>
            <Dropdown overlay={menu}>
@ -372,40 +459,71 @@ export default class DrawerComponents extends React.Component {
          </Space>
        }
      >
-        {detailType == 'chart' ? (
-          data.length > 0 && (
-            <Spin size="large" spinning={spinning}>
-              <OrgChartComponent
-                setChart={(chart) => (orgChart = chart)}
-                setClick={(click) => (addNodeChildFunc = click)}
-                onNodeClick={this.onNodeClick}
-                onButtonClick={this.onButtonClick}
-                data={data}
-                buttonContent={this.buttonContentRender}
-                nodeWidth={this.nodeWidthRender}
-                nodeHeight={this.nodeHeightRender}
-                nodeContent={this.nodeContentRender}
+        <>
+          <Row style={{ margin: '20px 20px' }}>
+            <Col span={2}>内部职工：</Col>{' '}
+            <Col span={22}>
+              {' '}
+              <Checkbox.Group
+                options={nbOptions}
+                value={defaultNbValue}
+                onChange={this.onNbChange}
              />
-            </Spin>
-          )
-        ) : (
-          <div style={{ padding: '0 20px' }}>
-            <Table
-              dataSource={dataSource}
-              columns={columns}
-              scroll={{ y: 500 }}
-              pagination={{
-                locale: {
-                  // 翻页文本替换
-                  items_per_page: '条/页',
-                  jump_to: '跳至',
-                  page: '页',
-                },
-                showTotal: (total) => `共 ${dataSource.length} 条`,
-              }}
-            />
-          </div>
-        )}
+            </Col>
+          </Row>
+          <Row style={{ margin: '0px 20px' }}>
+            <Col span={2}>外部人员：</Col>
+            <Col span={22}>
+              {' '}
+              <Checkbox.Group
+                options={wbOptions}
+                value={defaultWbValue}
+                onChange={this.onWbChange}
+              />
+            </Col>
+          </Row>
+          {detailType == 'chart' ? (
+            <div className="svg-container">
+              <Spin
+                size="large"
+                spinning={spinning}
+                tip="正在读取数据...."
+                className="loading-center"
+              />
+              {data.length > 0 && (
+                <OrgChartComponent
+                  setChart={(chart) => (orgChart = chart)}
+                  setClick={(click) => (addNodeChildFunc = click)}
+                  onNodeClick={this.onNodeClick}
+                  onButtonClick={this.onButtonClick}
+                  data={data}
+                  buttonContent={this.buttonContentRender}
+                  nodeWidth={this.nodeWidthRender}
+                  nodeHeight={this.nodeHeightRender}
+                  nodeContent={this.nodeContentRender}
+                />
+              )}
+            </div>
+          ) : (
+            <div style={{ padding: '0 20px' }}>
+              <Table
+                dataSource={dataSource}
+                columns={columns}
+                scroll={{ y: 500 }}
+                loading={spinning}
+                pagination={{
+                  locale: {
+                    // 翻页文本替换
+                    items_per_page: '条/页',
+                    jump_to: '跳至',
+                    page: '页',
+                  },
+                  showTotal: (total) => `共 ${dataSource.length} 条`,
+                }}
+              />
+            </div>
+          )}
+        </>
      </Drawer>
    );
  }
--- a/src/components/drawer/index.less
+++ b/src/components/drawer/index.less
@ -2,3 +2,11 @@
  width: 500px;
  text-align: left;
 }
+
+.loading-center {
+  position: absolute;
+  top: 50vh;
+  left: 50%;
+  margin-left: -8px;
+  margin-top: -8px;
+}
--- a/src/d3-org-chart.js
+++ b/src/d3-org-chart.js
@ -230,8 +230,8 @@ export class OrgChart {
        top: {
          nodeLeftX: (node) => -node.width / 2,
          nodeRightX: (node) => node.width / 2,
-          nodeTopY: (node) => 0,
-          //nodeTopY: (node) => node.height / 0.3,
+          //nodeTopY: (node) => 0,
+          nodeTopY: (node) => node.height / 0.4,
          nodeBottomY: (node) => node.height,
          nodeJoinX: (node) => node.x - node.width / 2,
          nodeJoinY: (node) => node.y + node.height,
--- a/src/pages/company.jsx
+++ b/src/pages/company.jsx
@ -99,8 +99,8 @@ export default function companyPage() {
  };

  // 获取部门图片
-  function getDepartmentImage(fisvitual) {
-    return fisvitual == '0' ? `./img/back/level4.png` : `./img/back/level8.png`;
+  function getDepartmentImage(level) {
+    return `./img/department/dept${level}.png`;
  }

  // 获取分部图片
@ -191,7 +191,7 @@ export default function companyPage() {
        <div style="width: 100%; height: 100%; background-size: 100% 100%;">
          <div style='position:absolute;height:100%'>
            <img style='width:144px;height:106px' src="${getDepartmentImage(
-              d.data.fisvitual,
+              d.data.deptLevel,
            )}"/>
          </div>
          <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
--- a/src/pages/index.less
+++ b/src/pages/index.less
@ -114,7 +114,7 @@
 }

 .ant-drawer-body {
-  padding: 0px;
+  padding: 0px !important;
  overflow: hidden;
 }

@ -129,3 +129,21 @@
  width: 40px;
  height: 40px;
 }
+
+.svg-container {
+  overflow-y: auto;
+  //height: calc(~'100% - 100px');;
+}
+
+.svg-container::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 10px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+.svg-container::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块 #c1c1c1*/
+  border-radius: 10px;
+  background-color: #c1c1c1;
+}
--- a/src/pages/user.jsx
+++ b/src/pages/user.jsx
@ -99,7 +99,7 @@ export default function userPage() {
  // 获取数据
  useEffect(() => {
    document.cookie =
-      'ecology_JSessionid=aaahTt6JHXEIM-HoSW-Xy; JSESSIONID=aaahTt6JHXEIM-HoSW-Xy; Systemlanguid=7; languageidweaver=7; loginuuids=2773; __randcode__=a8294fa0-56d7-430f-a35b-139d73474682; loginidweaver=zhangxy16';
+      'ecology_JSessionid=aaaSjdYP0FDFSd1hMbt8y; JSESSIONID=aaaSjdYP0FDFSd1hMbt8y; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin;';
    d3.json(
      '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
    ).then((data) => {