Commit 98bb8971 authored by 田翔's avatar 田翔

fix: 工作台2.0升级

parent d27f3c5c
Pipeline #83451 waiting for manual action with stages
...@@ -67,7 +67,7 @@ const Group = (props) => { ...@@ -67,7 +67,7 @@ const Group = (props) => {
shema?.work.forEach(v => { shema?.work.forEach(v => {
array.push({ ...v, active: item.id === v.id, children: v.children.map(v => ({ ...v, active: false })) }) 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) => { const deleteGroup = (e, item) => {
...@@ -106,7 +106,7 @@ const Group = (props) => { ...@@ -106,7 +106,7 @@ const Group = (props) => {
}) })
array.push({ ...v, active: false, children }) array.push({ ...v, active: false, children })
}) })
setShema({ ...shema, work: array, active: false }) setShema({ ...shema, work: array, active: false, carousel: { ...shema.carousel, active: false } })
} }
return ( return (
...@@ -114,6 +114,10 @@ const Group = (props) => { ...@@ -114,6 +114,10 @@ const Group = (props) => {
className={styles.group} className={styles.group}
onClick={(e) => groupClick(e, props)} onClick={(e) => groupClick(e, props)}
active={`${props.active}`} active={`${props.active}`}
style={{
background: props.hideBackground ? '' : '#FFFFFF',
marginTop: props.hideBackground ? '0' : '10px'
}}
ref={ref} ref={ref}
> >
{ {
......
@imgSrc: '@/assets/images/mobileConfig/WorkDesign'; @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
.group { .group {
margin-top: 10px; margin-top: 10px;
background: #FFFFFF;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
min-height: 100px; min-height: 100px;
...@@ -107,5 +106,35 @@ ...@@ -107,5 +106,35 @@
background: url('@{imgSrc}/card12.png'); background: url('@{imgSrc}/card12.png');
background-size: 100% 100%; 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
import React, { useRef, useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react' import React, { useRef, useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react'
import styles from './index.less' 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 { useDrag, useDrop, DndProvider } from 'react-dnd'
import { GlobalStore } from '../index' import { GlobalStore } from '../index'
import Group from './Group' import Group from './Group'
import moment from 'moment' import moment from 'moment'
import { getSiteTree } from '@/services/siteManage/api' import { getSiteTree } from '@/services/siteManage/api'
import { Carousel } from 'antd'
const btns = [ const btns = [
{ title: '置顶', icon: <VerticalAlignTopOutlined /> }, { title: '置顶', icon: <VerticalAlignTopOutlined /> },
...@@ -24,6 +32,7 @@ const Container = (props, ref) => { ...@@ -24,6 +32,7 @@ const Container = (props, ref) => {
const moblieRef = useRef(null) const moblieRef = useRef(null)
const [currentSite, setCurrentSite] = useState('永吉水务有限公司') const [currentSite, setCurrentSite] = useState('永吉水务有限公司')
const { shema, setShema } = useContext(GlobalStore) const { shema, setShema } = useContext(GlobalStore)
const { carousel } = shema
const [, drop] = useDrop(() => { const [, drop] = useDrop(() => {
return { return {
...@@ -81,17 +90,20 @@ const Container = (props, ref) => { ...@@ -81,17 +90,20 @@ const Container = (props, ref) => {
setShema({ ...shema, work: array, active: false }) 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 ( return (
<div className={styles.container}>
<div className={styles.content}>
<div
ref={moblieRef}
className={styles.moblie}
onClick={() => pageClick()}
active={`${shema.active}`}
>
<div <div
className={styles.moblieCenter} className={styles['moblieCenter-a']}
name={shema.theme} name={shema.theme}
> >
<div className={styles['m-info']}> <div className={styles['m-info']}>
...@@ -112,6 +124,61 @@ const Container = (props, ref) => { ...@@ -112,6 +124,61 @@ const Container = (props, ref) => {
} }
</div> </div>
</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}>
<div
ref={moblieRef}
className={styles.moblie}
onClick={() => pageClick()}
active={`${shema.active}`}
style={{ background: shema?.background }}
>
{getMoblieCenter()}
</div> </div>
<div className={styles['c-btns']}> <div className={styles['c-btns']}>
{ {
......
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0; width: 0;
} }
.moblieCenter { .moblieCenter-a {
padding-top: 110px; padding-top: 110px;
height: 650px; height: 650px;
position: relative; position: relative;
...@@ -94,6 +94,67 @@ ...@@ -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'] { &[active='true'] {
border: 2px solid #001bff; border: 2px solid #001bff;
} }
......
...@@ -59,7 +59,18 @@ const cards = [ ...@@ -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 = () => { ...@@ -243,7 +254,6 @@ const Left = () => {
})} })}
</div> </div>
<div className={styles.item}> <div className={styles.item}>
{/* <div className={styles['g-title']} style={{ paddingBottom: '0' }}>卡片组件</div> */}
<div className={styles['g-checks']}> <div className={styles['g-checks']}>
<Checkbox.Group <Checkbox.Group
style={{ width: '100%' }} style={{ width: '100%' }}
......
...@@ -50,8 +50,7 @@ ...@@ -50,8 +50,7 @@
font-weight: 700; font-weight: 700;
} }
.g-checks { .g-checks {
// padding: 9px 0; margin: 10px 0 5px 0;
// background: linear-gradient(to top, #F3F3F3, #FFFFFF);
} }
.g-content { .g-content {
padding: 0 10px; padding: 0 10px;
...@@ -142,6 +141,36 @@ ...@@ -142,6 +141,36 @@
background: url('@{imgSrc}/card12.png'); background: url('@{imgSrc}/card12.png');
background-size: 100% 100%; 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 { &:hover {
......
import React, { useState, useContext, useMemo, useEffect } from 'react' import React, { useState, useContext, useMemo, useEffect } from 'react'
import styles from './index.less' 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 { GlobalStore } from '../index'
import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api' import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api'
import { import {
...@@ -14,13 +14,22 @@ import { ...@@ -14,13 +14,22 @@ import {
PictureOutlined, PictureOutlined,
PlusOutlined, PlusOutlined,
MinusCircleOutlined, MinusCircleOutlined,
CheckOutlined
} from '@ant-design/icons' } from '@ant-design/icons'
import { getImageBases } from '@/services/common/api' import { getImageBases } from '@/services/common/api'
import PicturesWall from '@/components/Upload/index' import PicturesWall from '@/components/Upload/index'
import { get, PUBLISH_SERVICE } from '@/services';
const { TreeNode } = TreeSelect const { TreeNode } = TreeSelect
const { TextArea } = Input const { TextArea } = Input
const themeStyles = [
{ name: '个人版' },
{ name: '企业版' },
]
const backgrounds = ['#FFFFFF', '#EBE1FF', '#E3EAFF', '#DCF3FE', '#DBF4D4', '#FCEAD1', '#FBE2E1']
const themes = [ const themes = [
{ name: '供水主题背景' }, { name: '供水主题背景' },
{ name: '排水主题背景' }, { name: '排水主题背景' },
...@@ -32,8 +41,9 @@ const urlArray = [] ...@@ -32,8 +41,9 @@ const urlArray = []
const Right = () => { const Right = () => {
const { shema, setShema } = useContext(GlobalStore) const { shema, setShema } = useContext(GlobalStore)
const { active } = shema const { active, themeStyle, carousel } = shema
const [form] = Form.useForm() const [form] = Form.useForm()
const [showList, setShowList] = useState([])
const [paramForm] = Form.useForm() const [paramForm] = Form.useForm()
const [moblieList, setMoblieList] = useState([]) const [moblieList, setMoblieList] = useState([])
const [iconShow, setIconShow] = useState() const [iconShow, setIconShow] = useState()
...@@ -41,24 +51,23 @@ const Right = () => { ...@@ -41,24 +51,23 @@ const Right = () => {
const [currentIcon, setCurrentIcon] = useState('') const [currentIcon, setCurrentIcon] = useState('')
const [paramShow, setParamShow] = useState(false) const [paramShow, setParamShow] = useState(false)
const name = useMemo(() => { const currentGroup = useMemo(() => {
let name = '' let current = { hideBackground: false }
shema?.work.forEach(v => { shema?.work.forEach(v => {
if (v.active) { if (v.active) {
name = v.name current = { ...v }
} }
}) })
return name return current
}, [shema]) }, [shema])
const groupActive = useMemo(() => { const Actives = useMemo(() => {
let Active = false let Active = shema?.work.some(v => v.active)
shema?.work.forEach(v => { return {
if (v.active) { cardActive: !Active,
Active = true groupActive: Active,
carouselActive: shema?.carousel?.active
} }
})
return Active
}, [shema]) }, [shema])
const card = useMemo(() => { const card = useMemo(() => {
...@@ -81,11 +90,14 @@ const Right = () => { ...@@ -81,11 +90,14 @@ const Right = () => {
setShema({ ...shema, theme: v.name }) setShema({ ...shema, theme: v.name })
} }
const groupChange = (e) => { const changeThemeStyles = (v) => {
e.persist() setShema({ ...shema, themeStyle: v.name })
}
const groupChange = ({ attr, value }) => {
let array = [] let array = []
shema?.work.forEach(v => { 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 }) setShema({ ...shema, work: array })
} }
...@@ -240,41 +252,44 @@ const Right = () => { ...@@ -240,41 +252,44 @@ const Right = () => {
</TreeSelect> </TreeSelect>
) )
useEffect(() => { const optionsUpload = {
getData() onChange: ({ file, fileList }) => {
//初始增加一个供水主题 if (file.status === 'done' && file.response.code === 0) {
if (!shema.theme) { file.url = `${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${file.response.data}`
setShema({ ...shema, theme: '供水主题背景' }) 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 ( return (
<div className={styles.right}> <div className={styles.carouselSetting}>
<div className={styles.header}>{active ? '页面配置' : '组件配置'}</div> <div className={styles['g-title']}>轮播图</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['g-content']}>
{ <Upload
themes.map(v => { name="singleFile"
return ( listType="picture-card"
<div className="avatar-uploader"
className={styles['c-center']} fileList={showList}
onClick={() => changeThemes(v)} action={`${window.location.origin}${PUBLISH_SERVICE}/UploadSingleFile`}
key={v.name} {...optionsUpload}
> >
<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> </Upload>
</div>
</div> </div>
) )
})
} }
</div> if (groupActive) {
</div> return (
</div>
<div className={styles.comSetting} style={{ display: !active ? 'block' : 'none' }}>
{
groupActive ? (
<div className={styles.group}> <div className={styles.group}>
<div className={styles['g-title']}>分组设置</div> <div className={styles['g-title']}>分组设置</div>
<div className={styles['g-content']}> <div className={styles['g-content']}>
...@@ -283,12 +298,35 @@ const Right = () => { ...@@ -283,12 +298,35 @@ const Right = () => {
分组名称: 分组名称:
</div> </div>
<div> <div>
<Input value={name} onChange={groupChange} /> <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>
</div> </div>
</div> </div>
) : ( )
}
return (
<div className={styles.cardSetting}> <div className={styles.cardSetting}>
<Form form={form} layout='vertical'> <Form form={form} layout='vertical'>
<Form.Item label="卡片名称" name="name"> <Form.Item label="卡片名称" name="name">
...@@ -332,6 +370,112 @@ const Right = () => { ...@@ -332,6 +370,112 @@ const Right = () => {
</div> </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']}>
<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' }}>
{
getComSetting()
}
</div> </div>
<Modal <Modal
title={'卡片图标'} title={'卡片图标'}
......
...@@ -19,11 +19,91 @@ ...@@ -19,11 +19,91 @@
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
.mimGroup {
padding-left: 13px;
}
.g-content { .g-content {
width: 100%;
padding: 0 20px;
.themeStyles {
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 20px; .themeStyle {
width: 120px;
height: 120px;
border-radius: 5px;
overflow: hidden;
position: relative;
&:hover {
cursor: pointer;
}
&[name='个人版'] {
background: url('@{imgSrc}/个人版.png');
background-size: 100% 100%;
&[ative='true'] {
border: 2px solid #3594FF;
}
}
&[name='企业版'] {
background: url('@{imgSrc}/企业版.png');
background-size: 100% 100%;
&[ative='true'] {
border: 2px solid #20B896;
}
}
.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-backImg {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 10px;
.c-center { .c-center {
.c-img { .c-img {
width: 120px; width: 120px;
...@@ -60,10 +140,21 @@ ...@@ -60,10 +140,21 @@
} }
} }
} }
}
.comSetting { .comSetting {
width: 100%; width: 100%;
height: calc(100% - 40px); height: calc(100% - 40px);
overflow: auto; overflow: auto;
.carouselSetting {
.g-title {
padding: 10px;
font-size: 14px;
font-weight: 600;
}
.g-content {
padding: 0 20px;
}
}
.group { .group {
.g-title { .g-title {
padding: 10px; padding: 10px;
...@@ -73,8 +164,8 @@ ...@@ -73,8 +164,8 @@
.g-content { .g-content {
padding: 0 20px; padding: 0 20px;
.c-item { .c-item {
display: flex;
align-items: center; align-items: center;
margin-bottom: 10px;
} }
} }
} }
......
...@@ -39,7 +39,10 @@ const initShema = { ...@@ -39,7 +39,10 @@ const initShema = {
work: [], work: [],
active: true, active: true,
type: '运营组件', type: '运营组件',
theme: '供水主题背景',
themeStyle: '个人版',
} }
const Designer = (props) => { const Designer = (props) => {
const { currentCard, } = props const { currentCard, } = props
...@@ -70,6 +73,7 @@ const Designer = (props) => { ...@@ -70,6 +73,7 @@ const Designer = (props) => {
formData.append('singleFile', file); formData.append('singleFile', file);
const { code, data, msg } = await UploadSingleFile(formData) const { code, data, msg } = await UploadSingleFile(formData)
if (code === 0) { if (code === 0) {
console.log('shema', shema)
props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), '路径': data }) props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), '路径': data })
} else { } else {
message.error({ content: msg }) message.error({ content: msg })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment