fix: 工作台搭建图片回显

package.json

@@ -114,6 +114,7 @@
         "gsap": "^3.10.4",
         "history": "4.9.0",
         "hoist-non-react-statics": "3.3.0",
+        "html2canvas": "^1.4.1",
         "immer": "3.0.0",
         "immutability-helper": "latest",
         "immutable": "^4.0.0-rc.12",
@@ -123,9 +124,10 @@
         "js-calendar-converter": "0.0.4",
         "lodash": "4.17.11",
         "minimist": "1.2.0",
-        "panda-xform": "^5.2.3",
+        "panda-xform": "5.2.4",
         "parseForm": "^2.3.8",
         "prop-types": "15.7.2",
+        "qrcode.react": "^3.1.0",
         "quill": "^1.3.7",
         "rc-tween-one": "^3.0.6",
         "react": "16.14.0",

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js

-import React, { useRef, useContext, useState, useEffect } from 'react'
+import React, { useRef, useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react'
 import styles from './index.less'
 import { DownOutlined, VerticalAlignTopOutlined, UpOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../index'
 import Group from './Group'
 import moment from 'moment'
-import { getSiteTree } from '@/services/siteManage/api';
+import { getSiteTree } from '@/services/siteManage/api'
 
 const btns = [
   { title: '置顶', icon: <VerticalAlignTopOutlined /> },
@@ -14,10 +14,14 @@ const btns = [
   { title: '置底', icon: <VerticalAlignBottomOutlined /> },
 ]
 
-const Container = (props) => {
+const Container = (props, ref) => {
+
+  useImperativeHandle(ref, () => ({
+    moblieRef
+  }))
 
   const currentDate = moment().format('YYYY-MM-DD')
-  const ref = useRef(null)
+  const moblieRef = useRef(null)
   const [currentSite, setCurrentSite] = useState('永吉水务有限公司')
   const { shema, setShema } = useContext(GlobalStore)
 
@@ -30,7 +34,7 @@ const Container = (props) => {
     }
   })
 
-  drop(ref)
+  drop(moblieRef)
 
   const pageClick = () => {
     let array = []
@@ -79,12 +83,15 @@ const Container = (props) => {
     <div className={styles.container}>
       <div className={styles.content}>
         <div
-          ref={ref}
+          ref={moblieRef}
           className={styles.moblie}
           onClick={() => pageClick()}
           active={`${shema.active}`}
         >
-          <div className={styles.moblieCenter} name={shema.theme}>
+          <div
+            className={styles.moblieCenter}
+            name={shema.theme}
+          >
             <div className={styles['m-info']}>
               <div className={styles['i-company']}>
                 <span className={styles['c-address']}></span>
@@ -119,4 +126,4 @@ const Container = (props) => {
 
 }
 
-export default Container
\ No newline at end of file
+export default forwardRef(Container)
\ No newline at end of file

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js

@@ -3,6 +3,7 @@ import { Checkbox, Row, Col } from 'antd'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { CaretRightOutlined } from '@ant-design/icons'
 import styles from './index.less'
+import { GlobalStore } from '../index'
 
 const cardTypes = ['管理', '执行', '运营']
 
@@ -97,7 +98,7 @@ const Group = (props) => {
 }
 
 const Card = (props) => {
-  console.log('pprops', props)
+
   const ref = useRef(null)
   const id = getNanoid()
 
@@ -146,6 +147,7 @@ const CardGroup = (props) => {
 
 const Left = () => {
 
+  const { shema, setShema } = useContext(GlobalStore)
   const [cardType, setCardType] = useState(cardTypes)
 
   const cardsFilter = useMemo(() => {

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js

@@ -172,6 +172,10 @@ const Right = () => {
 
   useEffect(() => {
     getData()
+    //初始增加一个供水主题
+    if (!shema.theme) {
+      setShema({ ...shema, theme: '供水主题背景' })
+    }
   }, [])
 
   return (

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/index.js

-import React, { useState, createContext } from 'react'
+import React, { useState, createContext, useRef } from 'react'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import QRcode from 'qrcode.react'
-import { Button, Popover } from 'antd'
+import { Button, Popover, message } from 'antd'
 import { EyeOutlined } from '@ant-design/icons'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import styles from './index.less'
 import Left from './Left'
 import Container from './Container'
 import Right from './Right'
+import html2canvas from 'html2canvas'
+import { request } from '@wisdom-utils/utils/es';
+
+const HtmlToCanvas = (DOM, option) => {
+  // function saveFile(data, filename) {
+  //   let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
+  //   save_link.href = data
+  //   save_link.download = filename
+  //   let event = document.createEvent('MouseEvents')
+  //   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+  //   save_link.dispatchEvent(event)
+  // }
+
+  // async function exportToPic() {
+
+  //   let fileName = option.text
+  //   let canvas = await html2canvas(DOM, option)
+  //   let pageData = canvas.toDataURL('image/jpeg', 1.0)
+  //   saveFile(pageData.replace("image/jpeg", "image/octet-stream"), `${fileName}.jpeg`)
+  // }
+
+  // exportToPic()
+
+}
 
 export const GlobalStore = createContext(null)
 
@@ -20,13 +44,37 @@ const Designer = (props) => {
 
   const { currentCard, } = props
   const [shema, setShema] = useState(currentCard['卡片结构'] ? { ...JSON.parse(currentCard['卡片结构']) } : initShema)
+  const containerRef = useRef(null)
 
   const goBack = () => {
     props?.goBack?.()
   }
 
-  const saveDesgin = () => {
-    props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema) })
+  const UploadSingleFile = (data) => {
+    return request({
+      url: `${origin}/PandaCore/GateWay/PandaOMS/OMS/FileCenter/UploadSingleFile`,
+      method: 'post',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      data,
+    });
+  }
+
+  const saveDesgin = async () => {
+    const moblieDOM = containerRef?.current?.moblieRef?.current
+    const canvas = await html2canvas(moblieDOM)
+    canvas.toBlob(async blob => {
+      const file = new File([blob], `${currentCard['名称']}.png`, { type: 'image/png' })
+      const formData = new FormData();
+      formData.append('singleFile', file);
+      const { code, data, msg } = await UploadSingleFile(formData)
+      if (code === 0) {
+        props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), '路径': data })
+      } else {
+        message.error({ content: msg })
+      }
+    })
   }
 
   const preview = () => {
@@ -55,7 +103,7 @@ const Designer = (props) => {
           </div>
           <div className={styles.bottom}>
             <Left></Left>
-            <Container></Container>
+            <Container ref={containerRef}></Container>
             <Right></Right>
           </div>
         </div>

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/index.js

@@ -6,9 +6,9 @@ import { getSchemeList, saveScheme, deleteScheme, roleGroupList } from '@/servic
 import Designer from './components/Designer'
 
 const cardType = [
-  { label: '管理', value: '管理' },
-  { label: '运营', value: '运营' },
-  { label: '执行', value: '执行' },
+  { label: '管理工作台', value: '管理' },
+  { label: '运营工作台', value: '运营' },
+  { label: '执行工作台', value: '执行' },
 ]
 
 const WorkDesign = (props) => {
@@ -166,6 +166,7 @@ const WorkDesign = (props) => {
                           </div>
                         </div>
                         <div className={styles.img}>
+                          {v['路径'] ? <img style={{ width: '100%' }} src={`${origin}/PandaOMS/OMS/FileCenter/DownloadFiles?module=图库&filePath=${v['路径']}`}></img> : null}
                           <div className={styles.imgCenter}>
                             <div>
                               <Button type="primary" onClick={() => toDesign(v)}>编辑</Button>
@@ -234,7 +235,7 @@ const WorkDesign = (props) => {
             </TreeSelect>
           </Form.Item>
           <Form.Item
-            label={'组件类型'}
+            label={'工作台类型'}
             name={'类型'}
             rules={[{ required: true }]}
           >
@@ -248,7 +249,7 @@ const WorkDesign = (props) => {
           </Form.Item>
         </Form>
       </Modal>
-    </div >
+    </div>
   )
 
 }

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/index.less

@@ -124,6 +124,7 @@
           margin-top: 5px;
           margin-bottom: 5px;
           border-radius: 4px;
+          overflow: hidden;
           &:hover {
             cursor: pointer;
             .imgCenter {