fix: 工作台2.0升级

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

@@ -67,7 +67,7 @@ const Group = (props) => {
     shema?.work.forEach(v => {
       array.push({ ...v, active: item.id === v.id, children: v.children.map(v => ({ ...v, active: false })) })
     })
-    setShema({ ...shema, work: array, active: false })
+    setShema({ ...shema, work: array, active: false, carousel: { ...shema.carousel, active: false } })
   }
 
   const deleteGroup = (e, item) => {
@@ -106,7 +106,7 @@ const Group = (props) => {
       })
       array.push({ ...v, active: false, children })
     })
-    setShema({ ...shema, work: array, active: false })
+    setShema({ ...shema, work: array, active: false, carousel: { ...shema.carousel, active: false } })
   }
 
   return (
@@ -114,6 +114,10 @@ const Group = (props) => {
       className={styles.group}
       onClick={(e) => groupClick(e, props)}
       active={`${props.active}`}
+      style={{
+        background: props.hideBackground ? '' : '#FFFFFF',
+        marginTop: props.hideBackground ? '0' : '10px'
+      }}
       ref={ref}
     >
       {

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

 @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .group {
   margin-top: 10px;
-  background: #FFFFFF;
   border-radius: 5px;
   width: 100%;
   min-height: 100px;
@@ -107,5 +106,35 @@
       background: url('@{imgSrc}/card12.png');
       background-size: 100% 100%;
     }
+    &[widget='OPERATIONSOVERVIEW'] {
+      height: 60px;
+      background: url('@{imgSrc}/card101.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPELINEASSETS'] {
+      height: 205px;
+      background: url('@{imgSrc}/card102.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPELINECOLLECTION'] {
+      height: 43px;
+      background: url('@{imgSrc}/card103.png');
+      background-size: 100% 100%;
+    }
+    &[widget='INSPECTIONMAINTENANCE'] {
+      height: 57px;
+      background: url('@{imgSrc}/card104.png');
+      background-size: 100% 100%;
+    }
+    &[widget='EVENTWORKORDER'] {
+      height: 46px;
+      background: url('@{imgSrc}/card105.png');
+      background-size: 100% 100%;
+    }
+    &[widget='SUBSIDIARYBUSINESSRANKING'] {
+      height: 180px;
+      background: url('@{imgSrc}/card106.png');
+      background-size: 100% 100%;
+    }
   }
 }
\ No newline at end of file

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

 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 {
+  DownOutlined,
+  VerticalAlignTopOutlined,
+  UpOutlined,
+  VerticalAlignBottomOutlined,
+  CheckOutlined,
+  CaretDownOutlined,
+} 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 { Carousel } from 'antd'
 
 const btns = [
   { title: '置顶', icon: <VerticalAlignTopOutlined /> },
@@ -24,6 +32,7 @@ const Container = (props, ref) => {
   const moblieRef = useRef(null)
   const [currentSite, setCurrentSite] = useState('永吉水务有限公司')
   const { shema, setShema } = useContext(GlobalStore)
+  const { carousel } = shema
 
   const [, drop] = useDrop(() => {
     return {
@@ -81,6 +90,84 @@ const Container = (props, ref) => {
     setShema({ ...shema, work: array, active: false })
   }
 
+  const carouselClick = (e) => {
+    e.stopPropagation()
+    let array = []
+    shema?.work.forEach(v => {
+      array.push({ ...v, active: false, children: v.children.map(v => ({ ...v, active: false })) })
+    })
+    setShema({ ...shema, work: array, active: false, carousel: { ...shema.carousel, active: true } })
+  }
+
+  const getMoblieCenter = () => {
+    if (shema.themeStyle === '个人版') {
+      return (
+        <div
+          className={styles['moblieCenter-a']}
+          name={shema.theme}
+        >
+          <div className={styles['m-info']}>
+            <div className={styles['i-company']}>
+              <span className={styles['c-address']}></span>
+              <span>{currentSite}</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} />)
+            }
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div
+        className={styles['moblieCenter-b']}
+        name={shema.theme}
+      >
+        <div
+          className={styles.slideShow}
+          onClick={(e) => carouselClick(e)}
+          active={`${carousel?.active}`}
+        >
+          <div className={styles.top}>
+            <div className={styles['top-left']}>
+              <span className={styles['l-icon']}></span>
+              <span className={styles['l-text']}>{currentSite}</span>
+              <CaretDownOutlined style={{ color: '#999999' }} />
+            </div>
+            <div className={styles['top-right']}>
+              <span className={styles['r-icon']}></span>
+              <span className={styles['r-text']}>{currentDate}</span>
+            </div>
+          </div>
+          <Carousel autoplay>
+            {
+              shema?.carousel?.imgUrls?.map(v => {
+                return (
+                  <div className={styles['carousel-item']}>
+                    <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${v}`} />
+                  </div>
+                )
+              })
+            }
+          </Carousel>
+        </div>
+        <div style={{ padding: '10px' }}>
+          {
+            shema?.work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
+          }
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.content}>
@@ -89,29 +176,9 @@ const Container = (props, ref) => {
           className={styles.moblie}
           onClick={() => pageClick()}
           active={`${shema.active}`}
+          style={{ background: shema?.background }}
         >
-          <div
-            className={styles.moblieCenter}
-            name={shema.theme}
-          >
-            <div className={styles['m-info']}>
-              <div className={styles['i-company']}>
-                <span className={styles['c-address']}></span>
-                <span>{currentSite}</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} />)
-              }
-            </div>
-          </div>
+          {getMoblieCenter()}
         </div>
         <div className={styles['c-btns']}>
           {

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

@@ -46,7 +46,7 @@
       &::-webkit-scrollbar {
         width: 0;
       }
-      .moblieCenter {
+      .moblieCenter-a {
         padding-top: 110px;
         height: 650px;
         position: relative;
@@ -94,6 +94,67 @@
           }
         }
       }
+      .moblieCenter-b {
+        height: 650px;
+        position: relative;
+        .slideShow {
+          position: relative;
+          width: 100%;
+          height: 150px;
+          .top {
+            position: absolute;
+            width: 100%;
+            padding: 10px;
+            z-index: 99;
+            display: flex;
+            justify-content: space-between;
+            color: black;
+            .top-left {
+              display: flex;
+              align-items: center;
+              padding: 2px 10px;
+              border-radius: 15px;
+              background: #FFFFFF;
+              .l-icon {
+                width: 16px;
+                height: 16px;
+                background: url('@{imgSrc}/公司图标.png');
+                background-size: 100% 100%;
+                margin-right: 10px;
+              }
+              .l-text {
+                font-size: 14px;
+                margin-right: 10px;
+              }
+            }
+            .top-right {
+              padding: 2px 10px;
+              border-radius: 15px;
+              background: #FFFFFF;
+              align-items: center;
+              display: flex;
+              align-items: center;
+              .r-icon {
+                width: 16px;
+                height: 16px;
+                background: url('@{imgSrc}/时间图标.png');
+                background-size: 100% 100%;
+                margin-right: 10px;
+              }
+              .r-text {
+                font-size: 14px;
+              }
+            }
+          }
+          &[active='true'] {
+            border: 2px solid #001bff;
+          }
+          .carousel-item {
+            height: 150px;
+            background: #52A2E5;
+          }
+        }
+      }
       &[active='true'] {
         border: 2px solid #001bff;
       }

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

@@ -59,7 +59,18 @@ const cards = [
     },
   ],
   [
-    
+    {
+      title: '江西水务集团GIS项目',
+      count: 1,
+      children: [
+        { name: '运营总览', widget: 'OPERATIONSOVERVIEW', type: '运营' },
+        { name: '管网资产', widget: 'PIPELINEASSETS', type: '运营' },
+        { name: '管网采集', widget: 'PIPELINECOLLECTION', type: '运营' },
+        { name: '巡检运维', widget: 'INSPECTIONMAINTENANCE', type: '运营' },
+        { name: '事件工单', widget: 'EVENTWORKORDER', type: '运营' },
+        { name: '子公司业务排行', widget: 'SUBSIDIARYBUSINESSRANKING', type: '运营' },
+      ]
+    },
   ]
 ]
 
@@ -243,7 +254,6 @@ const Left = () => {
           })}
         </div>
         <div className={styles.item}>
-          {/* <div className={styles['g-title']} style={{ paddingBottom: '0' }}>卡片组件</div> */}
           <div className={styles['g-checks']}>
             <Checkbox.Group
               style={{ width: '100%' }}

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

@@ -50,8 +50,7 @@
         font-weight: 700;
       }
       .g-checks {
-        // padding: 9px 0;
-        // background: linear-gradient(to top, #F3F3F3, #FFFFFF);
+        margin: 10px 0 5px 0;
       }
       .g-content {
         padding: 0 10px;
@@ -142,6 +141,36 @@
             background: url('@{imgSrc}/card12.png');
             background-size: 100% 100%;
           }
+          &[widget='OPERATIONSOVERVIEW'] {
+            height: 60px;
+            background: url('@{imgSrc}/card101.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPELINEASSETS'] {
+            height: 205px;
+            background: url('@{imgSrc}/card102.png');
+            background-size: 100% 100%;
+          }
+          &[widget='PIPELINECOLLECTION'] {
+            height: 43px;
+            background: url('@{imgSrc}/card103.png');
+            background-size: 100% 100%;
+          }
+          &[widget='INSPECTIONMAINTENANCE'] {
+            height: 57px;
+            background: url('@{imgSrc}/card104.png');
+            background-size: 100% 100%;
+          }
+          &[widget='EVENTWORKORDER'] {
+            height: 46px;
+            background: url('@{imgSrc}/card105.png');
+            background-size: 100% 100%;
+          }
+          &[widget='SUBSIDIARYBUSINESSRANKING'] {
+            height: 180px;
+            background: url('@{imgSrc}/card106.png');
+            background-size: 100% 100%;
+          }
         }
       }
       &:hover {

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

 import React, { useState, useContext, useMemo, useEffect } from 'react'
 import styles from './index.less'
-import { Input, Form, TreeSelect, Switch, Modal, Space, Button, Popover } from 'antd'
+import { Input, Form, TreeSelect, Switch, Modal, Space, Button, Popover, Upload } from 'antd'
 import { GlobalStore } from '../index'
 import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api'
 import {
@@ -14,13 +14,22 @@ import {
   PictureOutlined,
   PlusOutlined,
   MinusCircleOutlined,
+  CheckOutlined
 } from '@ant-design/icons'
 import { getImageBases } from '@/services/common/api'
 import PicturesWall from '@/components/Upload/index'
+import { get, PUBLISH_SERVICE } from '@/services';
 
 const { TreeNode } = TreeSelect
 const { TextArea } = Input
 
+const themeStyles = [
+  { name: '个人版' },
+  { name: '企业版' },
+]
+
+const backgrounds = ['#FFFFFF', '#EBE1FF', '#E3EAFF', '#DCF3FE', '#DBF4D4', '#FCEAD1', '#FBE2E1']
+
 const themes = [
   { name: '供水主题背景' },
   { name: '排水主题背景' },
@@ -32,8 +41,9 @@ const urlArray = []
 const Right = () => {
 
   const { shema, setShema } = useContext(GlobalStore)
-  const { active } = shema
+  const { active, themeStyle, carousel } = shema
   const [form] = Form.useForm()
+  const [showList, setShowList] = useState([])
   const [paramForm] = Form.useForm()
   const [moblieList, setMoblieList] = useState([])
   const [iconShow, setIconShow] = useState()
@@ -41,24 +51,23 @@ const Right = () => {
   const [currentIcon, setCurrentIcon] = useState('')
   const [paramShow, setParamShow] = useState(false)
 
-  const name = useMemo(() => {
-    let name = ''
+  const currentGroup = useMemo(() => {
+    let current = { hideBackground: false }
     shema?.work.forEach(v => {
       if (v.active) {
-        name = v.name
+        current = { ...v }
       }
     })
-    return name
+    return current
   }, [shema])
 
-  const groupActive = useMemo(() => {
-    let Active = false
-    shema?.work.forEach(v => {
-      if (v.active) {
-        Active = true
-      }
-    })
-    return Active
+  const Actives = useMemo(() => {
+    let Active = shema?.work.some(v => v.active)
+    return {
+      cardActive: !Active,
+      groupActive: Active,
+      carouselActive: shema?.carousel?.active
+    }
   }, [shema])
 
   const card = useMemo(() => {
@@ -81,11 +90,14 @@ const Right = () => {
     setShema({ ...shema, theme: v.name })
   }
 
-  const groupChange = (e) => {
-    e.persist()
+  const changeThemeStyles = (v) => {
+    setShema({ ...shema, themeStyle: v.name })
+  }
+
+  const groupChange = ({ attr, value }) => {
     let array = []
     shema?.work.forEach(v => {
-      array.push({ ...v, name: v.active ? e.target.value : v.name })
+      array.push({ ...v, [attr]: v.active ? value : v[attr] })
     })
     setShema({ ...shema, work: array })
   }
@@ -240,97 +252,229 @@ const Right = () => {
     </TreeSelect>
   )
 
+  const optionsUpload = {
+    onChange: ({ file, fileList }) => {
+      if (file.status === 'done' && file.response.code === 0) {
+        file.url = `${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${file.response.data}`
+        file.sourcePath = file.response.data;
+      }
+      if (Array.isArray(fileList)) {
+        setShowList(fileList)
+        setShema({ ...shema, carousel: { ...carousel, imgUrls: fileList.map(v => v.sourcePath) } })
+      } else {
+        setShowList([])
+      }
+    },
+  }
+
+  const getComSetting = () => {
+    const { cardActive, groupActive, carouselActive } = Actives
+    if (carouselActive) {
+      return (
+        <div className={styles.carouselSetting}>
+          <div className={styles['g-title']}>轮播图</div>
+          <div className={styles['g-content']}>
+            <Upload
+              name="singleFile"
+              listType="picture-card"
+              className="avatar-uploader"
+              fileList={showList}
+              action={`${window.location.origin}${PUBLISH_SERVICE}/UploadSingleFile`}
+              {...optionsUpload}
+            >
+              +
+            </Upload>
+          </div>
+        </div>
+      )
+    }
+    if (groupActive) {
+      return (
+        <div className={styles.group}>
+          <div className={styles['g-title']}>分组设置</div>
+          <div className={styles['g-content']}>
+            <div className={styles['c-item']}>
+              <div>
+                分组名称：
+              </div>
+              <div>
+                <Input
+                  value={currentGroup?.name}
+                  onChange={(e) => {
+                    e.persist()
+                    groupChange({ attr: 'name', value: e.target.value })
+                  }}
+                />
+              </div>
+            </div>
+            <div className={styles['c-item']}>
+              <div>
+                隐藏背景色：
+              </div>
+              <div>
+                <Switch
+                  checkedChildren="隐藏"
+                  unCheckedChildren="显示"
+                  checked={currentGroup.hideBackground}
+                  onChange={(checked) => {
+                    groupChange({ attr: 'hideBackground', value: checked })
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div className={styles.cardSetting}>
+        <Form form={form} layout='vertical'>
+          <Form.Item label="卡片名称" name="name">
+            <Input value={card.name} onChange={(e) => cardSetting(e, 'name')} />
+          </Form.Item>
+          <Form.Item label="卡片名称是否显示" name="nameShow" valuePropName='checked'>
+            <Switch checked={card.nameShow} onChange={check => cardSettingOther(check, 'nameShow')} />
+          </Form.Item>
+          <Form.Item label="卡片图标" name="icon">
+            {
+              card.icon ? (
+                <div className={styles['card-img']}>
+                  <img
+                    onClick={() => {
+                      setCurrentIcon(card.icon)
+                      setIconShow(true)
+                    }}
+                    style={{ width: '100%', height: '100%' }}
+                    src={`${origin}/civweb4/${card.icon}`}
+                  />
+                </div>
+              ) : (
+                <div className={styles['card-icon']} onClick={() => setIconShow(true)}>
+                  <PlusOutlined />
+                </div>
+              )
+            }
+          </Form.Item>
+          <Form.Item label="功能跳转" name="url">
+            <Popover
+              content={content}
+              trigger="click"
+            >
+              <TextArea value={card.url} onChange={e => cardSettingOther(e.target.value, 'url')} rows={4} />
+            </Popover>
+          </Form.Item>
+          <Form.Item label="卡片参数" name="param">
+            <Input value={card.param} onClick={paramShowChange} />
+          </Form.Item>
+        </Form>
+      </div>
+    )
+  }
+
+  // useEffect(() => {
+  //   setShema({ ...shema, carousel: { ...carousel, imgUrls: showList.map(v => v.sourcePath) } })
+  // }, [shema.carousel])
+
   useEffect(() => {
     getData()
     //初始增加一个供水主题
     if (!shema.theme) {
       setShema({ ...shema, theme: '供水主题背景' })
     }
+    if (!shema.themeStyle) {
+      setShema({ ...shema, themeStyle: '个人版' })
+    }
+    if (Array.isArray(carousel?.imgUrls)) {
+      let array = []
+      carousel?.imgUrls.forEach((v, i) => {
+        let uid = i + '_' + Math.random()
+        array.push({
+          uid: uid,
+          name: v.split('\\').reverse()[0],
+          type: 'image/jpeg',
+          status: 'done',
+          url: `${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${v}`,
+          sourcePath: v,
+          thumbUrl: `${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${v}`,
+          originFileObj: { "uid": uid },
+          "response": { "code": 0, "msg": "Ok", "data": v, "stackTrace": null },
+          "xhr": {},
+        })
+      })
+      setShowList(array)
+    }
   }, [])
 
   return (
     <div className={styles.right}>
       <div className={styles.header}>{active ? '页面配置' : '组件配置'}</div>
       <div className={styles.pageSetting} style={{ display: active ? 'block' : 'none' }}>
+        <div className={styles.group}>
+          <div className={styles['g-title']}>主题风格</div>
+          <div className={styles['g-content']}>
+            <div className={styles.themeStyles}>
+              {
+                themeStyles.map(v => {
+                  return (
+                    <div
+                      ative={`${v.name === themeStyle}`}
+                      className={styles.themeStyle}
+                      name={v.name}
+                      onClick={() => changeThemeStyles(v)}
+                    >
+                      {v.name === themeStyle && <div className={styles['s-icon']} name={v.name}></div>}
+                      <div className={styles['s-text']}>{v.name}</div>
+                    </div>
+                  )
+                })
+              }
+            </div>
+          </div>
+        </div>
         <div className={styles.group}>
           <div className={styles['g-title']}>主题色设置</div>
+          <div className={styles.mimGroup}>使用背景色</div>
           <div className={styles['g-content']}>
-            {
-              themes.map(v => {
-                return (
-                  <div
-                    className={styles['c-center']}
-                    onClick={() => changeThemes(v)}
-                    key={v.name}
-                  >
-                    <div className={styles['c-img']} ative={`${v.name === shema.theme}`} name={v.name}></div>
-                    <div className={styles['c-text']} ative={`${v.name === shema.theme}`}>{v.name}</div>
-                  </div>
-                )
-              })
-            }
+            <div className={styles['c-background']}>
+              {
+                backgrounds.map(v => {
+                  return (
+                    <div
+                      className={styles['d-item']}
+                      style={{ background: v }}
+                      onClick={() => setShema({ ...shema, background: v })}
+                    >
+                      {shema.background === v && <CheckOutlined style={{ fontSize: '14px', fontWeight: 'bold', color: '#3594FF' }} />}
+                    </div>
+                  )
+                })
+              }
+            </div>
+          </div>
+          <div className={styles.mimGroup}>使用背景图</div>
+          <div className={styles['g-content']}>
+            <div className={styles['c-backImg']}>
+              {
+                themes.map(v => {
+                  return (
+                    <div
+                      className={styles['c-center']}
+                      onClick={() => changeThemes(v)}
+                      key={v.name}
+                    >
+                      <div className={styles['c-img']} ative={`${v.name === shema.theme}`} name={v.name}></div>
+                      <div className={styles['c-text']} ative={`${v.name === shema.theme}`}>{v.name}</div>
+                    </div>
+                  )
+                })
+              }
+            </div>
           </div>
         </div>
       </div>
       <div className={styles.comSetting} style={{ display: !active ? 'block' : 'none' }}>
         {
-          groupActive ? (
-            <div className={styles.group}>
-              <div className={styles['g-title']}>分组设置</div>
-              <div className={styles['g-content']}>
-                <div className={styles['c-item']}>
-                  <div>
-                    分组名称：
-                  </div>
-                  <div>
-                    <Input value={name} onChange={groupChange} />
-                  </div>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className={styles.cardSetting}>
-              <Form form={form} layout='vertical'>
-                <Form.Item label="卡片名称" name="name">
-                  <Input value={card.name} onChange={(e) => cardSetting(e, 'name')} />
-                </Form.Item>
-                <Form.Item label="卡片名称是否显示" name="nameShow" valuePropName='checked'>
-                  <Switch checked={card.nameShow} onChange={check => cardSettingOther(check, 'nameShow')} />
-                </Form.Item>
-                <Form.Item label="卡片图标" name="icon">
-                  {
-                    card.icon ? (
-                      <div className={styles['card-img']}>
-                        <img
-                          onClick={() => {
-                            setCurrentIcon(card.icon)
-                            setIconShow(true)
-                          }}
-                          style={{ width: '100%', height: '100%' }}
-                          src={`${origin}/civweb4/${card.icon}`}
-                        />
-                      </div>
-                    ) : (
-                      <div className={styles['card-icon']} onClick={() => setIconShow(true)}>
-                        <PlusOutlined />
-                      </div>
-                    )
-                  }
-                </Form.Item>
-                <Form.Item label="功能跳转" name="url">
-                  <Popover
-                    content={content}
-                    trigger="click"
-                  >
-                    <TextArea value={card.url} onChange={e => cardSettingOther(e.target.value, 'url')} rows={4} />
-                  </Popover>
-                </Form.Item>
-                <Form.Item label="卡片参数" name="param">
-                  <Input value={card.param} onClick={paramShowChange} />
-                </Form.Item>
-              </Form>
-            </div>
-          )
+          getComSetting()
         }
       </div>
       <Modal

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

@@ -19,41 +19,122 @@
         font-size: 14px;
         font-weight: 600;
       }
+      .mimGroup {
+        padding-left: 13px;
+      }
       .g-content {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
+        width: 100%;
         padding: 0 20px;
-        .c-center {
-          .c-img {
+        .themeStyles {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          .themeStyle {
             width: 120px;
             height: 120px;
             border-radius: 5px;
             overflow: hidden;
+            position: relative;
             &:hover {
               cursor: pointer;
             }
-            &[ative='true'] {
-              border: 2px solid #1890ff;
-            }
-            &[name='供水主题背景'] {
-              background: url('@{imgSrc}/供水主题背景.png');
+            &[name='个人版'] {
+              background: url('@{imgSrc}/个人版.png');
               background-size: 100% 100%;
+              &[ative='true'] {
+                border: 2px solid #3594FF;
+              }
             }
-            &[name='排水主题背景'] {
-              background: url('@{imgSrc}/排水通用背景.png');
+            &[name='企业版'] {
+              background: url('@{imgSrc}/企业版.png');
               background-size: 100% 100%;
+              &[ative='true'] {
+                border: 2px solid #20B896;
+              }
             }
-            &[name='农饮水主题背景'] {
-              background: url('@{imgSrc}/农饮水主题背景.png');
-              background-size: 100% 100%;
+            .s-icon {
+              color: white;
+              width: 100%;
+              width: 18px;
+              height: 18px;
+              top: 5px;
+              right: 5px;
+              position: absolute;
+              &[name='个人版'] {
+                background: url('@{imgSrc}/个人版-图标.png');
+                background-size: 100% 100%;
+              }
+              &[name='企业版'] {
+                background: url('@{imgSrc}/企业版-图标.png');
+                background-size: 100% 100%;
+              }
+            }
+            .s-text {
+              color: white;
+              width: 100%;
+              height: 25px;
+              bottom: 0;
+              left: 0;
+              text-align: center;
+              position: absolute;
+            }
+          }
+        }
+        .c-background {
+          margin-top: 10px;
+          width: 100%;
+          display: flex;
+          .d-item {
+            margin-right: 10px;
+            width: 30px;
+            height: 30px;
+            border: 1px solid #C8C8C8;
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:hover {
+              cursor: pointer;
             }
           }
-          .c-text {
-            text-align: center;
-            &[ative='true'] {
-              color: #1890ff;
-              font-weight: 700;
+        }
+        .c-backImg {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          margin-top: 10px;
+          .c-center {
+            .c-img {
+              width: 120px;
+              height: 120px;
+              border-radius: 5px;
+              overflow: hidden;
+              &:hover {
+                cursor: pointer;
+              }
+              &[ative='true'] {
+                border: 2px solid #1890ff;
+              }
+              &[name='供水主题背景'] {
+                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%;
+              }
+            }
+            .c-text {
+              text-align: center;
+              &[ative='true'] {
+                color: #1890ff;
+                font-weight: 700;
+              }
             }
           }
         }
@@ -64,6 +145,16 @@
     width: 100%;
     height: calc(100% - 40px);
     overflow: auto;
+    .carouselSetting {
+      .g-title {
+        padding: 10px;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .g-content {
+        padding: 0 20px;
+      }
+    }
     .group {
       .g-title {
         padding: 10px;
@@ -73,8 +164,8 @@
       .g-content {
         padding: 0 20px;
         .c-item {
-          display: flex;
           align-items: center;
+          margin-bottom: 10px;
         }
       }
     }

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

@@ -39,7 +39,10 @@ const initShema = {
   work: [],
   active: true,
   type: '运营组件',
+  theme: '供水主题背景',
+  themeStyle: '个人版',
 }
+
 const Designer = (props) => {
 
   const { currentCard, } = props
@@ -70,6 +73,7 @@ const Designer = (props) => {
       formData.append('singleFile', file);
       const { code, data, msg } = await UploadSingleFile(formData)
       if (code === 0) {
+        console.log('shema', shema)
         props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), '路径': data })
       } else {
         message.error({ content: msg })