fix: 问题修复

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

 import React, { useRef, useContext } from 'react'
 import styles from './index.less'
+import { DownOutlined } from '@ant-design/icons'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../index'
 import Group from './Group'
+import moment from 'moment'
 
 const Container = (props) => {
 
+  const currentDate = moment().format('YYYY-MM-DD')
   const ref = useRef(null)
   const { shema, setShema } = useContext(GlobalStore)
 
@@ -40,6 +43,18 @@ const Container = (props) => {
           active={`${shema.active}`}
         >
           <div className={styles.moblieCenter} name={shema.theme}>
+            <div className={styles['m-info']}>
+              <div className={styles['i-company']}>
+                <span className={styles['c-address']}></span>
+                <span>永吉水务有限公司</span>
+                <DownOutlined style={{ fontSize: '12px', marginLeft: '5px' }} />
+              </div>
+              <div className={styles['i-date']}>
+                <span></span>
+                <span>{currentDate}</span>
+                <DownOutlined style={{ fontSize: '12px', marginLeft: '5px' }} />
+              </div>
+            </div>
             <div style={{ padding: '10px' }}>
               {
                 shema?.work?.map((v, i) => <Group key={v.id} index={i} {...v} />)

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

@@ -28,10 +28,50 @@
       .moblieCenter {
         padding-top: 110px;
         height: 650px;
+        position: relative;
         &[name='供水主题背景'] {
-          background: url('@{imgSrc}/供水主题背景预览.png');
+          background: url('@{imgSrc}/背景预览-供水.png');
           background-size: 100% 100%;
         }
+        &[name='排水主题背景'] {
+          background: url('@{imgSrc}/背景预览-排水.png');
+          background-size: 100% 100%;
+        }
+        &[name='农饮水主题背景'] {
+          background: url('@{imgSrc}/背景预览-农饮水.png');
+          background-size: 100% 100%;
+        }
+        .m-info {
+          position: absolute;
+          top: 79px;
+          padding: 10px;
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          .i-company {
+            color: white;
+            border-radius: 14px;
+            border: 1px solid white;
+            padding: 2px 7px;
+            .c-address {
+              display: inline-block;
+              width: 15px;
+              height: 17px;
+              background: url('@{imgSrc}/定位.png');
+              background-size: 100% 100%;
+              position: relative;
+              top: 2px;
+              margin-right: 4px;
+            }
+          }
+          .i-date {
+            border-radius: 14px;
+            background: white;
+            color: black;
+            padding: 2px 7px;
+            line-height: 23px;
+          }
+        }
       }
       &[active='true'] {
         border: 2px solid #001bff;

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

@@ -5,7 +5,7 @@ import { GlobalStore } from '../index'
 
 const themes = [
   { name: '供水主题背景' },
-  { name: '排水通用背景' },
+  { name: '排水主题背景' },
   { name: '农饮水主题背景' },
 ]
 

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

@@ -40,7 +40,7 @@
               background: url('@{imgSrc}/供水主题背景.png');
               background-size: 100% 100%;
             }
-            &[name='排水通用背景'] {
+            &[name='排水主题背景'] {
               background: url('@{imgSrc}/排水通用背景.png');
               background-size: 100% 100%;
             }

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

 import React, { useState, createContext } from 'react'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
-import { Button } from 'antd'
+import QRcode from 'qrcode.react'
+import { Button, Popover } from 'antd'
+import { EyeOutlined } from '@ant-design/icons'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import styles from './index.less'
 import Left from './Left'
@@ -24,8 +26,11 @@ const Designer = (props) => {
   }
 
   const saveDesgin = () => {
-    console.log('shema', shema)
-    props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), })
+    props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema) })
+  }
+
+  const preview = () => {
+    props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema) })
   }
 
   return (
@@ -36,6 +41,16 @@ const Designer = (props) => {
         <div className={styles.designer}>
           <div className={styles.top}>
             <Button style={{ marginRight: '10px' }} onClick={goBack}>返回</Button>
+            <Popover
+              trigger="click"
+              content={
+                <div>
+                  <QRcode value={`${window.origin}/civ_mobile/product/water/monitor/workbench?env=dev`} />
+                </div>
+              }
+            >
+              <Button icon={<EyeOutlined />} style={{ marginRight: '10px' }} onClick={preview}>预览</Button>
+            </Popover>
             <Button type="primary" onClick={saveDesgin}>保存</Button>
           </div>
           <div className={styles.bottom}>

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

 import React, { useEffect, useState } from 'react'
 import styles from './index.less'
-import { Form, Modal, Input, message, Button, TreeSelect } from 'antd'
+import { Form, Modal, Input, message, Button, TreeSelect, Select } from 'antd'
 import { RightOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
 import { getSchemeList, saveScheme, deleteScheme, roleGroupList } from '@/services/mobileConfig/api'
 import Designer from './components/Designer'
 
+const cardType = [
+  { label: '管理', value: '管理' },
+  { label: '运营', value: '运营' },
+  { label: '执行', value: '执行' },
+]
+
 const WorkDesign = (props) => {
 
   const userName = sessionStorage.getItem('userName')
@@ -17,7 +23,7 @@ const WorkDesign = (props) => {
   const [form] = Form.useForm()
 
   const addCard = () => {
-    form.setFieldsValue({ '名称': '', '关联角色ID': [], '描述': '' })
+    form.setFieldsValue({ '名称': '', '关联角色ID': [], '描述': '', '类型': '' })
     setCurrentCard({})
     setVisible(true)
   }
@@ -152,7 +158,7 @@ const WorkDesign = (props) => {
                   cardList.map(v => {
                     return (
                       <div className={styles.card} key={v.ID}>
-                        <div className={styles['card-type']} type={v?.scheme?.type || '运营组件'}>{v?.scheme?.type || '运营组件'}</div>
+                        <div className={styles['card-type']} type={v['类型'] || '运营'}>{v['类型'] || '运营'}</div>
                         <div className={styles.title}>
                           <div className={styles['title-click']} onClick={() => editCard(v)}>
                             <span className={styles['title-text']}>{v['名称']}</span>
@@ -227,13 +233,13 @@ const WorkDesign = (props) => {
             >
             </TreeSelect>
           </Form.Item>
-          {/* <Form.Item
+          <Form.Item
             label={'组件类型'}
             name={'类型'}
             rules={[{ required: true }]}
           >
-            <Input />
-          </Form.Item> */}
+            <Select options={cardType}></Select>
+          </Form.Item>
           <Form.Item
             label={'工作台描述'}
             name={'描述'}

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

@@ -71,14 +71,26 @@
         position: relative;
         .card-type {
           position: absolute;
-          right: -12px;
+          right: -9px;
           top: 16px;
-          width: 80px;
+          width: 60px;
           height: 36px;
-          background: url('@{imgSrc}/运营组件.png');
-          background-size: 100% 100%;
           color: white;
           padding-left: 10px;
+          text-align: center;
+          letter-spacing: 3px;
+          &[type="运营"] {
+            background: url('@{imgSrc}/运营组件.png');
+            background-size: 100% 100%;
+          }
+          &[type="管理"] {
+            background: url('@{imgSrc}/管理组件.png');
+            background-size: 100% 100%;
+          }
+          &[type="执行"] {
+            background: url('@{imgSrc}/执行组件.png');
+            background-size: 100% 100%;
+          }
         }
         .title {
           font-size: 12px;
@@ -101,7 +113,6 @@
               background-size: 100% 100%;
             }
           }
-          .card-type {}
         }
         .img {
           width: 100%;