组织透视修复导出图片

.umirc.ts

@@ -1,9 +1,17 @@
+/*
+ * @Author: Chengliang 1546584672@qq.com
+ * @Date: 2022-08-04 10:22:55
+ * @LastEditors: Chengliang 1546584672@qq.com
+ * @LastEditTime: 2022-08-08 16:31:31
+ * @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({
   hash: true,
   history: { type: 'hash' },
-  base: "/spa/orgChart/",
+  base: '/spa/orgChart/',
   // exportStatic: {},
   publicPath: './',
   nodeModulesTransform: {
@@ -11,15 +19,16 @@ export default defineConfig({
   },
   routes: [
     { path: '/user', component: '@/pages/user' },
-    { path: '/company', component: '@/pages/company' }
+    { path: '/company', component: '@/pages/company' },
   ],
   fastRefresh: {},
   antd: {},
   proxy: {
-    "/api": { // 标识需要进行转换的请求的url
-     "target": "http://localhost:18089/api", // 服务端域名
-     "changeOrigin": true, // 允许域名进行转换
-     "pathRewrite": { "^/api": ''}  // 将请求url里的ci去掉
-    }
-  }
+    '/api': {
+      // 标识需要进行转换的请求的url
+      target: 'http://localhost:8686/api', // 服务端域名
+      changeOrigin: true, // 允许域名进行转换
+      pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
+    },
+  },
 });

src/pages/user.jsx

@@ -1,14 +1,13 @@
 import styles from './index.less';
-import React, { useEffect, useState } from "react";
-import {OrgChartComponent} from '@/components/orgChart'
+import React, { useEffect, useState } from 'react';
+import { OrgChartComponent } from '@/components/orgChart';
 import * as d3 from 'd3';
 import { TopBar } from '../components/topBar';
 import ToolBar from '../components/toolBar';
-import moment from "moment";
+import moment from 'moment';
 import qs from 'qs';
 import { message } from 'antd';
 
-
 export default function userPage() {
   const [data, setData] = useState(null);
   const [progressTop, setProgressTop] = useState(50);
@@ -17,67 +16,73 @@ export default function userPage() {
   let progressBtnRef = null;
   let topBarSearchRequest = null;
 
-  
   // 点击节点
   function onNodeClick(nodeId) {
     // alert('clicked ' + nodeId);
   }
 
   function onButtonClick(event, d) {
-      
     if (d.children) {
-        let idsList = []
-        d.children.forEach(item => {
+      let idsList = [];
+      d.children.forEach((item) => {
         if (item.data.hasChildren && !item._children) {
           idsList.push(item.data.id);
         }
-        })
+      });
 
       if (idsList.length == 0) {
-          return
+        return;
       }
 
-        let idsStr = idsList.join(",")
+      let idsStr = idsList.join(',');
 
-        console.log("idsStr", idsStr);
+      console.log('idsStr', idsStr);
 
-        let api = "";
+      let api = '';
       if (topBarSearchRequest) {
-          let request = {...topBarSearchRequest, ids: idsStr}
-          api = "/api/bs/hrmorganization/orgchart/asyncUserData" + qs.stringify(request, {addQueryPrefix: true})
-          
+        let request = { ...topBarSearchRequest, ids: idsStr };
+        api =
+          '/api/bs/hrmorganization/orgchart/asyncUserData' +
+          qs.stringify(request, { addQueryPrefix: true });
       } else {
-          api = "/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD") + "&ids="+idsStr
+        api =
+          '/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' +
+          moment(new Date()).format('YYYY-MM-DD') +
+          '&ids=' +
+          idsStr;
       }
 
-        fetch(api).then(res => res.json()).then(data => {
+      fetch(api)
+        .then((res) => res.json())
+        .then((data) => {
           if (data.data) {
-            data.data.forEach(item => {
-              window.chart.addNode(item)
-            })
+            data.data.forEach((item) => {
+              window.chart.addNode(item);
+            });
           }
-        })
+        });
     }
   }
 
   // 获取部门图片
   function getDepartmentImage() {
-      let index = Math.floor(Math.random() * 8) + 1
-      return `./img/department/${index}.png` 
+    let index = Math.floor(Math.random() * 8) + 1;
+    return `./img/department/${index}.png`;
   }
 
   // 获取部门图片
   function getSubcompanyImage() {
-      let index = Math.floor(Math.random() * 3) + 1
-      return `./img/subcompany/${index}.png` 
+    let index = Math.floor(Math.random() * 3) + 1;
+    return `./img/subcompany/${index}.png`;
   }
 
   // 获取数据
   useEffect(() => {
     d3.json(
       // "/user/data"
-        "/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD")
-      ).then(data => {
+      '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
+        moment(new Date()).format('YYYY-MM-DD'),
+    ).then((data) => {
       setData(data.data);
     });
   }, [true]);
@@ -88,55 +93,53 @@ export default function userPage() {
         <div style="margin-left: 16px; margin-top: 10px;">
           <img src="./img/button_content.png" />
         </div>
-      `
-    }
+      `;
+  };
 
   // 节点宽度渲染
-    const nodeWidthRender = d => 
-    {
+  const nodeWidthRender = (d) => {
     return 280;
-    }
+  };
 
-    const nodeHeightRender = d => {
+  const nodeHeightRender = (d) => {
     return 160;
-    }
+  };
 
   // tool bar start
   const handleTopLayoutClick = (progressBtn) => {
-      progressBtn.current.style.top= 50 + "px";
-      orgChart && orgChart.layout('top').render()
-    }
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart && orgChart.layout('top').render();
+  };
 
   const handleLeftLayoutClick = (progressBtn) => {
-      progressBtn.current.style.top= 50 + "px";
-      orgChart && orgChart.layout('left').render()
-    }
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart && orgChart.layout('left').render();
+  };
 
   const handleZoomIn = (progressBtn) => {
     if (progressBtn) {
-        let top = (parseInt(progressBtn.current.style.top) - 10)
+      let top = parseInt(progressBtn.current.style.top) - 10;
       if (top <= 0) {
         top = 30;
       }
-        progressBtn.current.style.top = top + "px";
+      progressBtn.current.style.top = top + 'px';
     }
     orgChart && orgChart.zoomIn();
-    }
+  };
 
   const handleZoomOut = (progressBtn) => {
     if (progressBtn) {
-        let top = (parseInt(progressBtn.current.style.top) + 10)
+      let top = parseInt(progressBtn.current.style.top) + 10;
       if (top >= 100) {
         top = 70;
       }
-        progressBtn.current.style.top = top + "px";
+      progressBtn.current.style.top = top + 'px';
     }
     orgChart && orgChart.zoomOut();
-    }
+  };
 
   // tool bar end
 
-
   // top bar start
 
   function downloadPdf(chart) {
@@ -153,7 +156,7 @@ export default function userPage() {
             5,
             5,
             595 / 3,
-              ((img.height / img.width) * 595) / 3
+            ((img.height / img.width) * 595) / 3,
           );
           pdf.save('chart.pdf');
         };
@@ -162,42 +165,50 @@ export default function userPage() {
   }
 
   const handleExport = (type) => {
-      if(type == "png") {
+    if (type == 'png') {
       orgChart && orgChart.exportImg({ full: true });
     } else {
-        orgChart && downloadPdf(orgChart)
-      }
+      orgChart && downloadPdf(orgChart);
     }
+  };
 
   const handleSearch = (requestData) => {
-      topBarSearchRequest = requestData
-      let api = "/api/bs/hrmorganization/orgchart/userData" + qs.stringify(requestData, {addQueryPrefix: true})
-      fetch(api).then(res => res.json()).then(data => {
+    topBarSearchRequest = requestData;
+    let api =
+      '/api/bs/hrmorganization/orgchart/userData' +
+      qs.stringify(requestData, { addQueryPrefix: true });
+    fetch(api)
+      .then((res) => res.json())
+      .then((data) => {
         if (data.data && data.data.length > 0) {
-          setData(data.data)
+          setData(data.data);
         } else {
-          message.warning("暂无数据");
-        }
-      })
+          message.warning('暂无数据');
         }
+      });
+  };
 
   // top bar end
 
   const nodeContentRender = (d, i, arr, state) => {
     // 集团地址
-      let companyUrl = "/spa/organization/static/index.html#/main/organization/group"
+    let companyUrl =
+      '/spa/organization/static/index.html#/main/organization/group';
     // 分部地址
-      let subcompanyUrl = "/spa/organization/static/index.html#/main/organization/companyExtend/"
+    let subcompanyUrl =
+      '/spa/organization/static/index.html#/main/organization/companyExtend/';
     // 部门地址
-      let departmentUrl = "/spa/organization/static/index.html#/main/organization/departmentExtend/"
+    let departmentUrl =
+      '/spa/organization/static/index.html#/main/organization/departmentExtend/';
     // 岗位地址
-      let jobtitleUrl = "/spa/organization/static/index.html#/main/organization/jobExtend/";
+    let jobtitleUrl =
+      '/spa/organization/static/index.html#/main/organization/jobExtend/';
 
     // 人员地址
-      let userUrl = "/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/";
+    let userUrl = '/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/';
 
     // 通讯录
-      let addressBookUrl = "/spa/hrm/index_mobx.html#/main/hrm/addressBook";
+    let addressBookUrl = '/spa/hrm/index_mobx.html#/main/hrm/addressBook';
 
     if (d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
       return `<div>
@@ -214,16 +225,30 @@ export default function userPage() {
               font-family: Microsoft YaHei-Bold, Microsoft YaHei;
               font-weight: bold;
               color: #000000;
-            " onclick="window.open('${d.data.ftype == 0 ? companyUrl : 
-                        d.data.ftype == 1 ? subcompanyUrl + d.data.fnumber : 
-                        d.data.ftype == 2 ? departmentUrl + d.data.fnumber : ""}', '_blank')">${d.data.fname}</span>
+            " onclick="window.open('${
+              d.data.ftype == 0
+                ? companyUrl
+                : d.data.ftype == 1
+                ? subcompanyUrl + d.data.fnumber
+                : d.data.ftype == 2
+                ? departmentUrl + d.data.fnumber
+                : ''
+            }', '_blank')">${d.data.fname}</span>
             <span style="margin-left: 70px;">
               <img src="./img/user-card/line1.png" />
               <img src="./img/user-card/line2.png" />
             </span>
-            <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;" onclick="window.open('${userUrl + d.data.fleader}', '_blank')">
-              <div onclick="window.open('${userUrl + d.data.fleader}', '_blank')" style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
-                <img src="${d.data.fleaderimg ? d.data.fleaderimg : "./img/default_avator.png"}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
+            <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;" onclick="window.open('${
+              userUrl + d.data.fleader
+            }', '_blank')">
+              <div onclick="window.open('${
+                userUrl + d.data.fleader
+              }', '_blank')" style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
+                <img src="${
+                  d.data.fleaderimg
+                    ? d.data.fleaderimg
+                    : './img/default_avator.png'
+                }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
               </div>
               <div style="display: inline-block; margin-left: 6px;">
                 <div style="
@@ -241,13 +266,17 @@ export default function userPage() {
                   margin-bottom: 19px;
                 ">${d.data.fname} / ${d.data.fleaderjob}</div>
                 <div style="display: flex;" onclick="window.open('${addressBookUrl}', '_blank')">
-                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px;">编制: ${d.data.fplan}</div>
-                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${d.data.fonjob}</div>
+                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px;">编制: ${
+                    d.data.fplan
+                  }</div>
+                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 69px; margin-left: 10px;">在岗: ${
+                    d.data.fonjob
+                  }</div>
                 </div>
               </div>
             </div>
           </div>
-        </div>`
+        </div>`;
     } else if (d.data.ftype == 3) {
       return `<div>
           <div style="position: relative;">
@@ -294,10 +323,12 @@ export default function userPage() {
               </div>
             </div>
           </div>
-        </div>`
+        </div>`;
     } else if (d.data.ftype == 4) {
       return `<div>
-          <div style="position: relative;" onclick="window.open('${userUrl + d.data.fnumber}', '_blank')">
+          <div style="position: relative;" onclick="window.open('${
+            userUrl + d.data.fnumber
+          }', '_blank')">
             <img src="./img/user-card/card-label-start.png" />
             <span >
               <img src="./img/user-card/line1.png" />
@@ -305,7 +336,11 @@ export default function userPage() {
             </span>
             <div style="background: url('./img/user-card/user-card.png'); height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
               <div style="display: inline-block; background: url('./img/user-card/avatar-outer.png'); background-size: 100% 100%; width: 90px; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
-                <img src="${d.data.fleaderimg ? d.data.fleaderimg : "./img/default_avator.png"}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
+                <img src="${
+                  d.data.fleaderimg
+                    ? d.data.fleaderimg
+                    : './img/default_avator.png'
+                }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;"/>
               </div>
               <div style="display: inline-block; margin-left: 6px;">
                 <div style="
@@ -319,32 +354,38 @@ export default function userPage() {
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
-                ">${d.data.department ? d.data.department + " / " : ""}${d.data.fleaderjob}</div>
+                ">${d.data.department ? d.data.department + ' / ' : ''}${
+        d.data.fleaderjob
+      }</div>
                 <div style="
                   font-size: 10px;
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
                   margin-bottom: 10px;
-                ">${d.data.mobile ? d.data.mobile : ""}</div>
+                ">${d.data.mobile ? d.data.mobile : ''}</div>
                 <div style="
                   font-size: 10px;
                   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                   font-weight: 400;
                   color: #333333;
-                ">${d.data.address ? "地址：" + d.data.address : ""}</div>
+                ">${d.data.address ? '地址：' + d.data.address : ''}</div>
               </div>
             </div>
           </div>
-        </div>`
-      }
+        </div>`;
     }
+  };
 
   return (
     <div className={styles.contentWrapper}>
       <TopBar
-          onExport={() => {handleExport()}}
-          onSearch={(requestData) => {handleSearch(requestData)}}
+        onExport={(type) => {
+          handleExport(type);
+        }}
+        onSearch={(requestData) => {
+          handleSearch(requestData);
+        }}
         url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
       />
       <ToolBar
@@ -354,14 +395,12 @@ export default function userPage() {
         onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
       />
       <OrgChartComponent
-          setChart={(chart) => orgChart = chart}
-          setClick={click => (addNodeChildFunc = click)}
+        setChart={(chart) => (orgChart = chart)}
+        setClick={(click) => (addNodeChildFunc = click)}
         onNodeClick={onNodeClick}
         onButtonClick={onButtonClick}
         data={data}
-          buttonContent={
-            buttonContentRender
-          }
+        buttonContent={buttonContentRender}
         nodeWidth={nodeWidthRender}
         nodeHeight={nodeHeightRender}
         nodeContent={nodeContentRender}