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

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

@@ -443,14 +443,18 @@ const WorkflowHomePage = () => {
                         {/* <DeleteOutlined onClick={e => delFlow(ele, e)} /> */}
                       </div>
                     </div>
-                    <img
-                      src={`${
-                        window.location.origin
-                      }/PandaOMS/OMS/FileCenter/DownLoadFiles?filePath=${
-                        ele.PreviewImage
-                      }&v=${new Date().getTime()}`}
-                      alt=""
-                    />
+                    {ele.PreviewImage ? (
+                      <img
+                        src={`${
+                          window.location.origin
+                        }/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,42 +968,54 @@ 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, // 有效区域
       }),
-    }).then(response => {
-      if (response.code === 0) {
-        FlowNodeSave({
-          PreviewImage: response.data,
-          CreateUser: sessionStorage.getItem('userName'),
-          flowID,
-          ...currentNode.current,
-          CarbonCopyPeopleList: currentNode.current.CarbonCopyPeopleList.map(item =>
-            Number(item.value),
-          ),
-        }).then(res => {
-          if (res.code === 0) {
-            diagram.model.setDataProperty(
-              currentNode.current,
-              'FlowTimerList',
-              res.data.FlowTimerList,
-            );
-            diagram.model.setDataProperty(currentNode.current, 'ActivityId', res.data.ActivityId);
-            diagram.model.setDataProperty(
-              currentNode.current,
-              'FlowNodeExtendId',
-              res.data.FlowNodeExtendId,
-            );
-            message.success('保存成功');
-          } else {
-            message.error(res.msg);
+      1.2, // 压缩比例
+      base64 => {
+        console.log(base64);
+        SaveWorkFlowImage({
+          flowName: flowData.flowName,
+          base64Data: base64,
+        }).then(response => {
+          if (response.code === 0) {
+            FlowNodeSave({
+              PreviewImage: response.data,
+              CreateUser: sessionStorage.getItem('userName'),
+              flowID,
+              ...currentNode.current,
+              CarbonCopyPeopleList: currentNode.current.CarbonCopyPeopleList.map(item =>
+                Number(item.value),
+              ),
+            }).then(res => {
+              if (res.code === 0) {
+                diagram.model.setDataProperty(
+                  currentNode.current,
+                  'FlowTimerList',
+                  res.data.FlowTimerList,
+                );
+                diagram.model.setDataProperty(
+                  currentNode.current,
+                  'ActivityId',
+                  res.data.ActivityId,
+                );
+                diagram.model.setDataProperty(
+                  currentNode.current,
+                  'FlowNodeExtendId',
+                  res.data.FlowNodeExtendId,
+                );
+                message.success('保存成功');
+              } else {
+                message.error(res.msg);
+              }
+            });
           }
         });
-      }
-    });
+      },
+    );
   };
   // 关闭时进行数据比对看数据是否改变
   const leaveTip = () => {
@@ -1126,43 +1138,51 @@ 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, // 有效区域
       }),
-    }).then(val => {
-      if (val.code === 0) {
-        SaveNodeChange({
-          FlowId: flowID,
-          // DeleteNodes,
-          CreateUser: sessionStorage.getItem('userName'),
-          PreviewImage: val.data,
-          DeleteLines,
-          Lines: diagramObj.linkDataArray,
-          Nodes: diagramObj.nodeDataArray,
-        })
-          .then(res => {
-            setButtonLoading(false);
-            if (res.code === 0) {
-              setDeleteNodes([]);
-              setDeleteLines([]);
-              setAddNodes([]);
-              setDeleteNode('');
-              setDeleteLine('');
-              getFlowData();
-              message.success('保存成功');
-            } else {
-              message.error(res.msg);
-            }
-          })
-          .catch(() => {
-            setButtonLoading(false);
-            message.error('网络异常请稍后重试');
-          });
-      }
-    });
+      1.2, // 压缩比例
+      base64 => {
+        console.log(base64);
+        SaveWorkFlowImage({
+          flowName: flowData.flowName,
+          base64Data: base64,
+        }).then(val => {
+          if (val.code === 0) {
+            SaveNodeChange({
+              FlowId: flowID,
+              // DeleteNodes,
+              CreateUser: sessionStorage.getItem('userName'),
+              PreviewImage: val.data,
+              DeleteLines,
+              Lines: diagramObj.linkDataArray,
+              Nodes: diagramObj.nodeDataArray,
+            })
+              .then(res => {
+                setButtonLoading(false);
+                if (res.code === 0) {
+                  setDeleteNodes([]);
+                  setDeleteLines([]);
+                  setAddNodes([]);
+                  setDeleteNode('');
+                  setDeleteLine('');
+                  getFlowData();
+                  message.success('保存成功');
+                } else {
+                  message.error(res.msg);
+                }
+              })
+              .catch(() => {
+                setButtonLoading(false);
+                message.error('网络异常请稍后重试');
+              });
+          }
+        });
+      },
+    );
   };
   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');
+  };
+}