亚信科技单独开发

.umirc.ts

@@ -2,7 +2,7 @@
  * @Author: Chengliang 1546584672@qq.com
  * @Date: 2022-08-04 10:22:55
  * @LastEditors: Chengliang 1546584672@qq.com
- * @LastEditTime: 2023-05-23 15:18:17
+ * @LastEditTime: 2023-06-08 13:50:33
  * @FilePath: /org-chart-frant/.umirc.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -20,13 +20,14 @@ export default defineConfig({
   routes: [
     { path: '/user', component: '@/pages/user' },
     { path: '/company', component: '@/pages/company' },
+    { path: '/chart', component: '@/pages/chart' },
   ],
   fastRefresh: {},
   antd: {},
   proxy: {
     '/api': {
       // 标识需要进行转换的请求的url
-      target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
+      target: 'http://10.21.122.33/api', // 服务端域名 / http://localhost:8686
       changeOrigin: true, // 允许域名进行转换
       pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
     },

package.json

@@ -20,16 +20,20 @@
     ]
   },
   "dependencies": {
-    "@ant-design/pro-layout": "^6.5.0",
+    "@ant-design/pro-layout": "^7.14.3",
     "@types/d3": "^7.4.0",
+    "antd": "^5.5.2",
     "d3": "7.4.4",
     "d3-org-chart": "2.6.0",
+    "es": "^0.8.0",
     "jspdf": "^2.5.1",
     "moment": "^2.29.3",
     "qs": "^6.11.0",
     "react": "17.x",
     "react-dom": "17.x",
-    "umi": "^3.5.26"
+    "umi": "^3.5.26",
+    "watermark-component-for-react": "^1.0.0",
+    "watermark-dom": "^2.3.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

src/components/topBar/index.jsx

@@ -134,7 +134,7 @@ export class TopBar extends React.Component {
               style={{ width: 150 }}
               locale={locale}
               allowClear={false}
-              disabledDate={this.disabledDate}
+              //disabledDate={this.disabledDate}
               defaultValue={moment(new Date())}
               value={
                 this.state.requestData.date && this.state.requestData.date != ''
@@ -152,6 +152,7 @@ export class TopBar extends React.Component {
             部门：
             <TreeSelect
               treeDataSimpleMode
+              allowClear
               style={{ width: '80%' }}
               value={this.state.requestData.department}
               dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
@@ -180,8 +181,17 @@ export class TopBar extends React.Component {
             >
               查询
             </Button>
+            <Button
+              type="primary"
+              style={{ marginRight: '10px' }}
+              onClick={() => {
+                window.open('#/chart', '_blank');
+              }}
+            >
+              图谱
+            </Button>
             <Dropdown overlay={this.menu}>
-              <Button>导出</Button>
+              <Button type="primary">导出</Button>
             </Dropdown>
           </Col>
         </Row>

src/pages/chart.jsx

@@ -0,0 +1,44 @@
+/*
+ * @Author: Chengliang 1546584672@qq.com
+ * @Date: 2023-06-08 13:52:38
+ * @LastEditors: Chengliang 1546584672@qq.com
+ * @LastEditTime: 2023-06-08 19:21:18
+ * @FilePath: /org-chart-frant/src/pages/chart.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, { useEffect, useState } from 'react';
+import qs from 'qs';
+import * as d3 from 'd3';
+import styles from './index.less';
+import { Image } from 'antd';
+
+import WaterMark from 'watermark-component-for-react';
+
+export default function companyPage() {
+  const [url, setUrl] = useState('');
+  const [watermark, setWatermark] = useState('');
+
+  //获取数据
+  useEffect(() => {
+    d3.json('/api/ais/orgChart/chartData').then((res) => {
+      setUrl(res.data.url);
+      setWatermark(res.data.watermark);
+    });
+  }, [true]);
+
+  return (
+    <>
+      <WaterMark content={watermark} font="20px Microsoft Yahei">
+        <div className={styles.chartContainer}>
+          <Image
+            width="100%"
+            src={url}
+            preview={{
+              src: { url },
+            }}
+          />
+        </div>
+      </WaterMark>
+    </>
+  );
+}

src/pages/company.jsx

@@ -8,6 +8,7 @@ import jsPDF from 'jspdf';
 import moment from 'moment';
 import qs from 'qs';
 import { message, Tooltip } from 'antd';
+import WaterMark from 'watermark-component-for-react';
 
 let active = 'top';
 export default function companyPage() {
@@ -16,6 +17,7 @@ export default function companyPage() {
   let orgChart = null;
   let topBarSearchRequest = null;
   const [hasRight, setHasRight] = useState('');
+  const [watermark, setWatermark] = useState('');
 
   // 点击节点
   function onNodeClick(nodeId) {}
@@ -33,20 +35,10 @@ export default function companyPage() {
         return;
       }
       let idsStr = idsList.join(',');
-      let api = '';
-      if (topBarSearchRequest) {
-        let request = { ...topBarSearchRequest, ids: idsStr };
-        api =
-          '/api/ais/orgChart/asyncCompanyData' +
-          qs.stringify(request, { addQueryPrefix: true });
-      } else {
-        api =
-          '/api/ais/orgChart/asyncCompanyData?level=0&date=' +
-          moment(new Date()).format('YYYY-MM-DD') +
-          '&ids=' +
-          idsStr;
-      }
-
+      let request = { ...topBarSearchRequest, ids: idsStr };
+      let api =
+        '/api/ais/orgChart/asyncCompanyData' +
+        qs.stringify(request, { addQueryPrefix: true });
       fetch(api)
         .then((res) => res.json())
         .then((resp) => {
@@ -92,6 +84,7 @@ export default function companyPage() {
         moment(new Date()).format('YYYY-MM-DD'),
     ).then((resp) => {
       setData(resp.data.data);
+      setWatermark(resp.data.watermark);
       setHasRight('true');
     });
   }, [true]);
@@ -322,38 +315,44 @@ export default function companyPage() {
 
   return (
     hasRight && (
-      <div className={styles.contentWrapper}>
-        <TopBar
-          onExport={(type) => {
-            handleExport(type);
-          }}
-          onSearch={(requestData) => {
-            handleSearch(requestData);
-          }}
-          type="company"
-          url="/api/ais/orgChart/getSearchCondition"
-        />
-        <ToolBar
-          onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
-          onLeftLayoutClick={(progressBtn) =>
-            handleLeftLayoutClick(progressBtn)
-          }
-          onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
-          onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
-          onZoomBehavior={(value) => handleZoomBehavior(value)}
-        />
-        <OrgChartComponent
-          setChart={(chart) => (orgChart = chart)}
-          setClick={(click) => (addNodeChildFunc = click)}
-          onNodeClick={onNodeClick}
-          data={data}
-          onButtonClick={onButtonClick}
-          buttonContent={buttonContentRender}
-          nodeWidth={nodeWidthRender}
-          nodeHeight={nodeHeightRender}
-          nodeContent={nodeContentRender}
-        />
-      </div>
+      <>
+        <div className={styles.contentWrapper}>
+          <TopBar
+            onExport={(type) => {
+              handleExport(type);
+            }}
+            onSearch={(requestData) => {
+              handleSearch(requestData);
+            }}
+            type="company"
+            url="/api/ais/orgChart/getSearchCondition"
+          />
+          <WaterMark content={watermark} font="20px Microsoft Yahei">
+            <ToolBar
+              onTopLayoutClick={(progressBtn) =>
+                handleTopLayoutClick(progressBtn)
+              }
+              onLeftLayoutClick={(progressBtn) =>
+                handleLeftLayoutClick(progressBtn)
+              }
+              onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
+              onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
+              onZoomBehavior={(value) => handleZoomBehavior(value)}
+            />
+            <OrgChartComponent
+              setChart={(chart) => (orgChart = chart)}
+              setClick={(click) => (addNodeChildFunc = click)}
+              onNodeClick={onNodeClick}
+              data={data}
+              onButtonClick={onButtonClick}
+              buttonContent={buttonContentRender}
+              nodeWidth={nodeWidthRender}
+              nodeHeight={nodeHeightRender}
+              nodeContent={nodeContentRender}
+            />
+          </WaterMark>
+        </div>
+      </>
     )
   );
 }

src/pages/index.less

@@ -9,3 +9,7 @@
 .contentWrapper {
   background-color: #f7f9fd;
 }
+
+.chartContainer {
+  width: 100%;
+}

src/pages/user.jsx

@@ -87,7 +87,7 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaaWkjP1eWxafe-9oLVHy; JSESSIONID=aaaWkjP1eWxafe-9oLVHy; Systemlanguid=7; languageidweaver=7; loginidweaver=sysadmin; loginuuids=1; __randcode__=7dbeb514-9ed0-45cd-b615-ee71d20de8ba';
+      '33_ecology_JSessionid=aaaSwPJSYdnnPeJLLTAIy; JSESSIONID=aaaSwPJSYdnnPeJLLTAIy; ecology_JSessionid=aaaSwPJSYdnnPeJLLTAIy; Systemlanguid=7; languageidweaver=7; loginuuids=1; CASTGC=TGT-24-bAecNfLfcApkHgVJI4eBDeMPZKszmMQ2zOE77onyUqE7WlUveN-c01; loginidweaver=1; __randcode__=90e4fc5f-84d7-436b-8123-d6db388371bf';
     d3.json(
       // "/user/data"
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +