fix: 流程中心生成图片优化

src/pages/bsmanager/workOrder/workflowEdit/WorkflowHomePage.jsx

@@ -443,14 +443,18 @@ const WorkflowHomePage = () => {
                         {/* <DeleteOutlined onClick={e => delFlow(ele, e)} /> */}
                       </div>
                     </div>
+                    {ele.PreviewImage ? (
                       <img
                         src={`${
                           window.location.origin
-                      }/PandaOMS/OMS/FileCenter/DownLoadFiles?filePath=${
-                        ele.PreviewImage
-                      }&v=${new Date().getTime()}`}
-                      alt=""
+                        }/PandaOMS/OMS/FileCenter/DownLoadFiles?filePath=${ele.PreviewImage}`}
                       />
+                    ) : (
+                      <img
+                        className={styles.noDataImg}
+                        src={require('../../../../assets/images/common/noData.png')}
+                      />
+                    )}
                   </div>
                   <div className={styles.bottom}>
                     <div className={styles.left}>{ele.CreateUser || ''}</div>

src/pages/bsmanager/workOrder/workflowEdit/WorkflowHomePage.less

@@ -318,7 +318,11 @@
             overflow: hidden;
 
             img {
-              width: 320px;
+              width: 270px;
+            }
+            .noDataImg {
+              width: 120px;
+              height: 112px;
             }
           }
 

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChartRt.jsx

@@ -11,7 +11,7 @@ import {
   DeleteFlowNodes,
   SaveWorkFlowImage,
 } from '@/services/workflow/workflow';
-
+import { compress } from '@/utils/utils';
 import { ExclamationCircleOutlined, TrophyOutlined } from '@ant-design/icons';
 import * as go from 'gojs';
 import styles from './FlowBoard.less';
@@ -968,12 +968,18 @@ const FlowChart = props => {
     );
   };
   const nodeCallBack = () => {
-    SaveWorkFlowImage({
-      flowName: flowData.flowName,
-      base64Data: diagram.makeImageData({
+    compress(
+      diagram.makeImageData({
         background: 'rgb(239, 248, 250)',
-        maxSize: new go.Size(1260, 500),
+        // maxSize: new go.Size(1260, 500), // 固定区域
+        scale: 1, // 有效区域
       }),
+      1.2, // 压缩比例
+      base64 => {
+        console.log(base64);
+        SaveWorkFlowImage({
+          flowName: flowData.flowName,
+          base64Data: base64,
         }).then(response => {
           if (response.code === 0) {
             FlowNodeSave({
@@ -991,7 +997,11 @@ const FlowChart = props => {
                   'FlowTimerList',
                   res.data.FlowTimerList,
                 );
-            diagram.model.setDataProperty(currentNode.current, 'ActivityId', res.data.ActivityId);
+                diagram.model.setDataProperty(
+                  currentNode.current,
+                  'ActivityId',
+                  res.data.ActivityId,
+                );
                 diagram.model.setDataProperty(
                   currentNode.current,
                   'FlowNodeExtendId',
@@ -1004,6 +1014,8 @@ const FlowChart = props => {
             });
           }
         });
+      },
+    );
   };
   // 关闭时进行数据比对看数据是否改变
   const leaveTip = () => {
@@ -1126,12 +1138,18 @@ const FlowChart = props => {
       return;
     }
     setButtonLoading(true);
-    SaveWorkFlowImage({
-      flowName: flowData.flowName,
-      base64Data: diagram.makeImageData({
+    compress(
+      diagram.makeImageData({
         background: 'rgb(239, 248, 250)',
-        maxSize: new go.Size(1260, 500),
+        // maxSize: new go.Size(1260, 500), // 固定区域
+        scale: 1, // 有效区域
       }),
+      1.2, // 压缩比例
+      base64 => {
+        console.log(base64);
+        SaveWorkFlowImage({
+          flowName: flowData.flowName,
+          base64Data: base64,
         }).then(val => {
           if (val.code === 0) {
             SaveNodeChange({
@@ -1163,6 +1181,8 @@ const FlowChart = props => {
               });
           }
         });
+      },
+    );
   };
   const treeChange = newValue => {
     setSelectValue(newValue);

src/utils/utils.js

+export function compress(
+  base64, // 源图片
+  rate, // 缩放比例
+  callback, // 回调
+) {
+  //处理缩放，转格式
+  var _img = new Image();
+  _img.src = base64;
+  _img.onload = function() {
+    var _canvas = document.createElement('canvas');
+    var w = this.width / rate;
+    var h = this.height / rate;
+    _canvas.setAttribute('width', w);
+    _canvas.setAttribute('height', h);
+    _canvas.getContext('2d').drawImage(this, 0, 0, w, h);
+    var base64 = _canvas.toDataURL('image/jpeg');
+    _canvas.toBlob(function(blob) {
+      if (blob.size > 750 * 1334) {
+        //如果还大，继续压缩
+        compress(base64, rate, callback);
+      } else {
+        callback(base64);
+      }
+    }, 'image/jpeg');
+  };
+}