Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
CivManage
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ReactWeb5
CivManage
Commits
98bb8971
Commit
98bb8971
authored
Dec 22, 2023
by
田翔
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: 工作台2.0升级
parent
d27f3c5c
Pipeline
#83451
waiting for manual action with stages
Changes
9
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
505 additions
and
65 deletions
+505
-65
index.js
...g/WorkDesign/components/Designer/Container/Group/index.js
+6
-2
index.less
...WorkDesign/components/Designer/Container/Group/index.less
+31
-1
index.js
...uconfig/WorkDesign/components/Designer/Container/index.js
+77
-10
index.less
...onfig/WorkDesign/components/Designer/Container/index.less
+62
-1
index.js
...g/menuconfig/WorkDesign/components/Designer/Left/index.js
+12
-2
index.less
...menuconfig/WorkDesign/components/Designer/Left/index.less
+31
-2
index.js
.../menuconfig/WorkDesign/components/Designer/Right/index.js
+189
-45
index.less
...enuconfig/WorkDesign/components/Designer/Right/index.less
+93
-2
index.js
...Config/menuconfig/WorkDesign/components/Designer/index.js
+4
-0
No files found.
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.js
View file @
98bb8971
...
@@ -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
}
>
>
{
{
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.less
View file @
98bb8971
@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
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js
View file @
98bb8971
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']}>
{
{
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less
View file @
98bb8971
...
@@ -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;
}
}
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js
View file @
98bb8971
...
@@ -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%'
}}
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less
View file @
98bb8971
...
@@ -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 {
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js
View file @
98bb8971
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: '
14
px
', fontWeight: '
bold
', color: '
#
3594
FF
' }} />}
</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={'
卡片图标
'}
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.less
View file @
98bb8971
...
@@ -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;
}
}
}
}
}
}
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/index.js
View file @
98bb8971
...
@@ -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
})
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment