Merge pull request 'feature/cl' (#17) from feature/cl into master

Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/17

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,6 +35,9 @@ export default class DrawerComponents extends React.Component {
       columns: [],
       spinning: true,
       showJob: false,
+      defaultTypeValue: ['isBelongTo'],
+      defaultStatusValue: [0, 1, 2, 3],
+      disabled: false,
     };
   }
 
@@ -257,8 +262,8 @@ export default class DrawerComponents extends React.Component {
                         <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}
                         </div>        
-                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;height: 25px;line-height: 25px;">
-                          ${getLabel(547322, labelData)}:${d.data.fleader}
+                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;line-height: 25px;">
+                          ${getLabel(547190, labelData)}:${d.data.fleader}
                         </div>
                         <div style="display:flex" >
                             <div style="height: 25px; line-height: 25px; min-width: 80px;">
@@ -304,17 +309,19 @@ 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;width: 55%;height:100%">
                     <div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:2px'>
-                        <div style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
-                          d.data.fname
-                        }</div>
+                        <div style="font-weight: bold;font-size: 14px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">
+                        ${d.data.fname}
+                        <span style='color: red;'>(${d.data.accountType})</span>
+                        </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;">
+                    <div style="font-size: 13px;margin-top: 5px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
                         <span>${getLabel(547324, labelData)}: ${
         d.data.companyWorkYear
       } ${getLabel(547526, labelData)}</span>
                     </div>
+
                 </div>
                 </div>
              </div>`;
@@ -322,22 +329,78 @@ export default class DrawerComponents extends React.Component {
   };
 
   showDrawer = (params) => {
+    const { defaultStatusValue, defaultTypeValue } = this.state;
+    params = {
+      ...params,
+      typeValue: defaultTypeValue.join(','),
+      statusValue: defaultStatusValue.join(','),
+    };
     this.getDeatilDatas(params, 'chart', '0');
     this.setState({ open: true, params: params });
   };
 
   onClose = () => {
-    this.setState({ open: false, detailType: 'chart', showJob: false });
+    this.setState({
+      open: false,
+      detailType: 'chart',
+      showJob: false,
+      defaultStatusValue: [0, 1, 2, 3],
+      defaultTypeValue: ['isBelongTo'],
+      disabled: false,
+    });
   };
 
   changeDetail = () => {
-    const { detailType, params } = this.state;
+    const { detailType, params, defaultTypeValue, defaultStatusValue } =
+      this.state;
+    const newParam = {
+      ...params,
+      typeValue: defaultTypeValue.join(','),
+      statusValue: defaultStatusValue.join(','),
+    };
     let type = detailType == 'chart' ? 'table' : 'chart';
     const showJob = this.state.showJob ? '1' : '0';
     this.setState({
       detailType: type,
     });
-    this.getDeatilDatas(params, type, showJob);
+    this.getDeatilDatas(newParam, type, showJob);
+  };
+
+  onStatusChange = (checkedValues) => {
+    const { labelData } = this.props;
+    if (checkedValues.length === 0) {
+      return message.error(`${getLabel(547728, labelData)}`, 2);
+    }
+    this.setState({
+      defaultStatusValue: checkedValues,
+    });
+    const { defaultTypeValue, params, detailType } = this.state;
+    const showJob = this.state.showJob ? '1' : '0';
+    const nParam = {
+      ...params,
+      statusValue: checkedValues.join(','),
+      typeValue: defaultTypeValue.join(','),
+    };
+    this.getDeatilDatas(nParam, detailType, showJob);
+  };
+
+  onTypeChange = (checkedValues) => {
+    const { labelData } = this.props;
+    if (this.state.showJob) {
+      return message.error(`${getLabel(547729, labelData)}`, 2);
+    }
+    this.setState({
+      defaultTypeValue: checkedValues,
+      disabled: checkedValues.includes('isManager') ? true : false,
+    });
+    const { defaultStatusValue, params, detailType } = this.state;
+    const showJob = this.state.showJob ? '1' : '0';
+    const nParam = {
+      ...params,
+      statusValue: defaultStatusValue.join(','),
+      typeValue: checkedValues.join(','),
+    };
+    this.getDeatilDatas(nParam, detailType, showJob);
   };
 
   render() {
@@ -350,16 +413,35 @@ export default class DrawerComponents extends React.Component {
       columns,
       spinning,
       showJob,
+      defaultStatusValue,
+      defaultTypeValue,
+      disabled,
     } = this.state;
     let arr = [];
 
     const { labelData } = this.props;
 
+    const optionsType = [
+      { label: `${getLabel(547715, labelData)}`, value: 'isManager' },
+      { label: `${getLabel(547716, labelData)}`, value: 'isBelongTo' },
+    ];
+
+    const optionsStatus = [
+      { label: `${getLabel(547718, labelData)}`, value: 0 },
+      { label: `${getLabel(547719, labelData)}`, value: 1 },
+      { label: `${getLabel(547720, labelData)}`, value: 2 },
+      { label: `${getLabel(547721, labelData)}`, value: 3 },
+      { label: `${getLabel(547722, labelData)}`, value: 4 },
+      { label: `${getLabel(547723, labelData)}`, value: 5 },
+      { label: `${getLabel(547724, labelData)}`, value: 6 },
+      { label: `${getLabel(547725, labelData)}`, value: 7 },
+    ];
+
     if (detailType == 'chart') {
       arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' });
       //arr.push({ label: '导出PDF', key: '2' });
     } else {
-      arr.push({ label: '导出表格', key: '3' });
+      arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' });
     }
 
     const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;
@@ -367,7 +449,7 @@ export default class DrawerComponents extends React.Component {
     return (
       <Drawer
         title={getLabel(547321, labelData)}
-        width={1100}
+        width={1200}
         onClose={this.onClose}
         open={open}
         bodyStyle={{
@@ -379,13 +461,18 @@ export default class DrawerComponents extends React.Component {
               <Checkbox
                 style={{ marginTop: '5px', marginLeft: 100 }}
                 checked={showJob}
+                disabled={disabled}
                 onChange={(e) => {
                   this.setState({
                     showJob: e.target.checked,
                   });
-
+                  const newParam = {
+                    ...params,
+                    statusValue: defaultStatusValue.join(','),
+                    typeValue: defaultTypeValue.join(','),
+                  };
                   this.getDeatilDatas(
-                    params,
+                    newParam,
                     detailType,
                     e.target.checked ? '1' : '0',
                   );
@@ -403,45 +490,68 @@ export default class DrawerComponents extends React.Component {
           </Space>
         }
       >
-        {detailType == 'chart' ? (
-          <div className="svg-container">
-            <Spin
-              size="large"
-              spinning={spinning}
-              tip={getLabel(547320, labelData)}
-              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}
+        <>
+          {detailType == 'chart' && (
+            <Row style={{ margin: '20px 20px 0px 20px' }}>
+              <Col span={2}>{getLabel(547714, labelData)}：</Col>
+              <Col span={22}>
+                <Checkbox.Group
+                  options={optionsType}
+                  value={defaultTypeValue}
+                  onChange={this.onTypeChange}
+                />
+              </Col>
+            </Row>
+          )}
+          <Row style={{ margin: '10px 20px 10px 20px' }}>
+            <Col span={2}>{getLabel(547717, labelData)}：</Col>
+            <Col span={22}>
+              <Checkbox.Group
+                options={optionsStatus}
+                value={defaultStatusValue}
+                onChange={this.onStatusChange}
               />
-            )}
-          </div>
-        ) : (
-          <div style={{ padding: '0 20px' }}>
-            <Table
-              dataSource={dataSource}
-              columns={columns}
-              scroll={{ y: 600 }}
-              loading={spinning}
-              pagination={{
-                showSizeChanger: false,
-                showTotal: (total) =>
-                  `${getLabel(547523, labelData)} ${
-                    dataSource.length
-                  } ${getLabel(547524, labelData)}`,
-              }}
-            />
-          </div>
-        )}
+            </Col>
+          </Row>
+          {detailType == 'chart' ? (
+            <div className="svg-container">
+              <Spin
+                size="large"
+                spinning={spinning}
+                tip={getLabel(547320, labelData)}
+                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}
+                loading={spinning}
+                pagination={{
+                  showSizeChanger: false,
+                  showTotal: (total) =>
+                    `${getLabel(547523, labelData)} ${
+                      dataSource.length
+                    } ${getLabel(547524, labelData)}`,
+                }}
+              />
+            </div>
+          )}
+        </>
       </Drawer>
     );
   }

src/components/timeline/index.jsx

@@ -7,10 +7,12 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import React from 'react';
-import { Timeline, Drawer } from 'antd';
+import { Timeline, Drawer, Popconfirm, message } from 'antd';
 import styles from './index.less';
 import leftTreeShow from './img/leftTree-show.png';
 import leftHide from './img/leftTree-hide.png';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { getLabel } from '../../util/i18n.js';
 
 export default class TimeLine extends React.Component {
   constructor(props) {
@@ -35,6 +37,21 @@ export default class TimeLine extends React.Component {
     this.props.onClick(data);
   }
 
+  handleDelete(key) {
+    const { labelData } = this.props;
+    let api = `/api/bs/hrmorganization/orgchart/versionDelete?versionId=${key}`;
+    fetch(api)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.api_status) {
+          message.success(`${getLabel(547484, labelData)}`, 2, 3);
+          window.location.reload(true);
+        } else {
+          message.error(`${getLabel(547483, labelData)}`, 2, 3);
+        }
+      });
+  }
+
   componentDidMount() {
     this.searchTimeLines(this.props.url);
   }
@@ -56,6 +73,8 @@ export default class TimeLine extends React.Component {
   };
 
   render() {
+    const { labelData } = this.props;
+
     let showStyle = {};
     let positionStyle = {};
     if (this.state.open) {
@@ -89,14 +108,30 @@ export default class TimeLine extends React.Component {
               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.title}
+                    style={{
+                      color: item.color == 'blue' ? '#1890ff' : 'dimgray',
+                    }}
+                    onClick={this.handleLineClick.bind(this, item)}
+                  >
+                    {item.title}
+                  </div>
+                  {item.key != 0 && (
+                    <Popconfirm
+                      title={`${getLabel(547491, labelData)}[${item.title}]?`}
+                      onConfirm={this.handleDelete.bind(this, item.key)}
+                      okText={getLabel(547319, labelData)}
+                      cancelText={getLabel(547318, labelData)}
+                    >
+                      <div className={styles.delete}>
+                        <CloseCircleOutlined />
+                      </div>
+                    </Popconfirm>
+                  )}
                   <div className={styles.time}>{item.time}</div>
                 </Timeline.Item>
               );

src/components/timeline/index.less

@@ -15,21 +15,25 @@
     cursor: pointer;
   }
 
-  .timeline :hover {
-    color: #1890ff;
-  }
+  // .timeline .title:hover {
+  //   color: #1890ff;
+  // }
 
   .time {
     color: dimgray;
   }
+
+  .delete :hover {
+    color: red;
+  }
 }
 
 .leftRightLayoutBtn {
   width: 18px;
   height: 60px;
-  position: absolute;
+  position: fixed;
   top: 50%;
-  margin-top: -30px;
+  // margin-top: -30px;
   z-index: 101;
   cursor: pointer;
 }

src/components/topBar/index.jsx

@@ -22,7 +22,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, FolderOutlined } from '@ant-design/icons';
 moment.locale('zh-cn');
 import { getLabel } from '../../util/i18n.js';
 import { SmileOutlined } from '@ant-design/icons';
@@ -45,6 +45,8 @@ export class TopBar extends React.Component {
       open: false,
       confirmLoading: false,
       description: '',
+      timelineId: '0',
+      treeKey: 1,
     };
   }
 
@@ -57,10 +59,29 @@ export class TopBar extends React.Component {
     this.setState({ requestData });
   }
 
+  handleTreeData(treeData = [], timelineId) {
+    this.setState({
+      rootTreeData: treeData,
+      timelineId: timelineId,
+      treeKey: this.state.treeKey + 1,
+    });
+  }
+
   onChange = (e) => {
     this.setState({ description: e.target.value });
   };
 
+  generateKey = (
+    length = 5,
+    chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
+  ) => {
+    let result = '';
+    for (let i = 0; i < length; i++) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+  };
+
   /**
    * 弹窗确认
    */
@@ -117,6 +138,9 @@ export class TopBar extends React.Component {
           }
           arr.map((item, index) => {
             item.icon = <HomeOutlined />;
+            if (item.type == 2) {
+              item.icon = <FolderOutlined />;
+            }
           });
           this.setState({
             rootTreeData: arr,
@@ -135,11 +159,14 @@ export class TopBar extends React.Component {
       const { id } = treeNode;
       setTimeout(() => {
         const { fclass } = this.state.requestData;
+        const { timelineId } = this.state;
         let api =
           '/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
           id +
           '&fclass=' +
-          fclass;
+          fclass +
+          '&id=' +
+          timelineId;
         this.getNodeTreeNode(api);
         resolve(undefined);
       }, 500);
@@ -192,7 +219,8 @@ export class TopBar extends React.Component {
 
   render() {
     const { disabled, type, labelData } = this.props;
-    const { rootTreeData, open, confirmLoading, treeExpandedKeys } = this.state;
+    const { rootTreeData, open, confirmLoading, treeExpandedKeys, treeKey } =
+      this.state;
 
     return (
       <div className={style.topbarWrapper}>
@@ -229,9 +257,11 @@ export class TopBar extends React.Component {
               ))}
             </Select>
           </Col>
-          <Col span={6}>
+
+          <Col span={8}>
             {getLabel(547294, labelData)}：
             <TreeSelect
+              key={treeKey}
               treeDataSimpleMode
               allowClear
               style={{ width: '65%' }}
@@ -244,7 +274,7 @@ export class TopBar extends React.Component {
               treeIcon
             />
           </Col>
-          <Col span={6}>
+          <Col span={5}>
             <Checkbox
               style={{ marginTop: '5px', marginLeft: 100 }}
               checked={this.state.requestData.hidedept == '1'}
@@ -266,7 +296,7 @@ export class TopBar extends React.Component {
               />
             </Tooltip>
           </Col>
-          <Col span={6}>
+          <Col span={5}>
             {getLabel(547299, labelData)}：
             <Select
               defaultValue="3"
@@ -304,17 +334,40 @@ export class TopBar extends React.Component {
               />
             </Tooltip>
           </Col>
-          <Col span={16}>
-            <Button
-              type="primary"
-              style={{ marginRight: '10px' }}
-              disabled={disabled}
-              onClick={() => {
-                this.setState({ open: true });
-              }}
-            >
-              {getLabel(547305, labelData)}
-            </Button>
+
+          <Col span={10}>
+            {this.state.requestData.fclass == '0' && (
+              <span>
+                <Button
+                  type="primary"
+                  style={{ marginRight: '10px' }}
+                  disabled={disabled}
+                  onClick={() => {
+                    this.setState({ open: true });
+                  }}
+                >
+                  {getLabel(547305, labelData)}
+                </Button>
+                <Button
+                  type="primary"
+                  style={{ marginRight: '10px' }}
+                  onClick={() => {
+                    window.open('#/dragtree', 'blank');
+                  }}
+                >
+                  {getLabel(547310, labelData)}
+                </Button>
+                <Button
+                  type="primary"
+                  style={{ marginRight: '10px' }}
+                  onClick={() => {
+                    window.open('#/statistics', 'blank');
+                  }}
+                >
+                  {getLabel(547313, labelData)}
+                </Button>
+              </span>
+            )}
 
             <Button
               type="primary"
@@ -325,24 +378,7 @@ export class TopBar extends React.Component {
             >
               {getLabel(547307, labelData)}
             </Button>
-            <Button
-              type="primary"
-              style={{ marginRight: '10px' }}
-              onClick={() => {
-                window.open('#/dragtree', 'blank');
-              }}
-            >
-              {getLabel(547310, labelData)}
-            </Button>
-            <Button
-              type="primary"
-              style={{ marginRight: '10px' }}
-              onClick={() => {
-                window.open('#/statistics', 'blank');
-              }}
-            >
-              {getLabel(547313, labelData)}
-            </Button>
+
             <Dropdown overlay={this.menu}>
               <Button type="primary">{getLabel(547314, labelData)}</Button>
             </Dropdown>

src/pages/company.jsx

@@ -76,9 +76,10 @@ export default function companyPage() {
           '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
           qs.stringify(request, { addQueryPrefix: true });
       } else {
+        let request = { ...topbar.state.requestData, ids: idsStr };
         api =
-          '/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&fisvitual=0&id=0&root=0&ids=' +
-          idsStr;
+          '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
+          qs.stringify(request, { addQueryPrefix: true });
       }
       fetch(api)
         .then((res) => res.json())
@@ -164,8 +165,8 @@ export default function companyPage() {
     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;">
+      return `<div style="text-align: center;">
+          <div style="display: inline-block;  margin-left: 5px;">
             <div style="
               font-size: 24px;
               font-family: Microsoft YaHei-Bold, Microsoft YaHei;
@@ -185,10 +186,11 @@ export default function companyPage() {
           </div>
           <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
             font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;"> 
-            <div title=${
-              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 class="tooltip">
+                <div class="tooltitle"> ${d.data.fname} </div>
+                <div class="tooltiptext">${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>
@@ -206,8 +208,11 @@ export default function companyPage() {
           </div>
           <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
             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 class="tooltip">
+                <div class="tooltitle"> ${d.data.fname} </div>
+                <div class="tooltiptext">${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>
@@ -346,6 +351,10 @@ export default function companyPage() {
    */
   const handleExport = (type) => {
     if (type == 'png') {
+      const hiddenElements = document.querySelectorAll('.tooltitle');
+      const hiddenElementsArray = Array.from(hiddenElements);
+      // 从 DOM 中移除隐藏内容
+      hiddenElementsArray.forEach((el) => (el.style.display = 'none'));
       orgChart && orgChart.exportImg({ full: true });
     } else {
       orgChart && downloadPdf(orgChart);
@@ -366,6 +375,8 @@ export default function companyPage() {
       hidedept: '0',
     };
     topbar.handleFormChange({ ...resetParams });
+    //根节点初始化
+    topbar.handleTreeData([], timeline.id);
     topbar.getNodeTreeNode(
       `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`,
       false,
@@ -485,6 +496,7 @@ export default function companyPage() {
             timeLineSearch(timeline);
           }}
           url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
+          labelData={labelData}
         />
         <Spin size="large" spinning={spinning}>
           <OrgChartComponent

src/pages/index.less

@@ -114,6 +114,44 @@
 }
 
 .ant-drawer-body {
-  padding: 0px;
+  padding: 0;
   overflow: hidden;
 }
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  width: 110px;
+  margin: 0 auto;
+  line-height: 18px;
+  word-break: break-all;
+}
+
+.tooltip .tooltitle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 144px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 39%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}

src/pages/user.jsx

@@ -99,7 +99,7 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaayUiSEKCD-Z-Y9A1i-y; JSESSIONID=aaayUiSEKCD-Z-Y9A1i-y; loginuuids=1; Systemlanguid=7; loginidweaver=sysadmin; languageidweaver=8; __randcode__=4ba2aadd-0de6-4ebc-b9d4-584ba46c0969';
+      'ecology_JSessionid=aaaLiDqzA0rZHgPBdxGez; JSESSIONID=aaaLiDqzA0rZHgPBdxGez; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=7b9b3b9b-a780-4d6a-b8d5-22d0f8aaf11a';
     d3.json(
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
     ).then((data) => {