From c542fb07c6591687bc4b36c7c768d5173a05ab2f Mon Sep 17 00:00:00 2001
From: tianxiang <2546291626@qq.com>
Date: Thu, 19 Oct 2023 17:45:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B7=A5=E4=BD=9C=E5=8F=B0=E6=90=AD?=
=?UTF-8?q?=E5=BB=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/Designer/Container/index.js | 63 ++++++++-
.../components/Designer/Container/index.less | 21 +++
.../components/Designer/Left/index.js | 130 ++++++++++++++----
.../components/Designer/Left/index.less | 46 ++++++-
.../components/Designer/Right/index.js | 128 ++++++++++++++++-
5 files changed, 349 insertions(+), 39 deletions(-)
diff --git a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js
index 71643e8e..169509b8 100644
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js
@@ -1,15 +1,24 @@
-import React, { useRef, useContext } from 'react'
+import React, { useRef, useContext, useState, useEffect } from 'react'
import styles from './index.less'
-import { DownOutlined } from '@ant-design/icons'
+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';
+
+const btns = [
+ { title: '缃《', icon: <VerticalAlignTopOutlined /> },
+ { title: '涓婁竴椤�', icon: <UpOutlined /> },
+ { title: '涓嬩竴椤�', icon: <DownOutlined /> },
+ { title: '缃簳', icon: <VerticalAlignBottomOutlined /> },
+]
const Container = (props) => {
const currentDate = moment().format('YYYY-MM-DD')
const ref = useRef(null)
+ const [currentSite, setCurrentSite] = useState('姘稿悏姘村姟鏈夐檺鍏徃')
const { shema, setShema } = useContext(GlobalStore)
const [, drop] = useDrop(() => {
@@ -31,10 +40,43 @@ const Container = (props) => {
setShema({ ...shema, work: array, active: true })
}
+ const getSite = async () => {
+ const { code, data } = await getSiteTree({ node: -1 })
+ if (code === 0) {
+ setCurrentSite(data?.list?.[0].text)
+ }
+ }
+
+ const getData = () => {
+ getSite()
+ }
+
+ useEffect(() => {
+ getData()
+ }, [])
+
+ const btnsClick = (item) => {
+ let index = 0
+ if (item.title === '缃《') {
+ index = 0
+ } else if (item.title === '缃簳') {
+ index = shema?.work.length - 1
+ } else if (item.title === '涓婁竴椤�') {
+ let ativeIndex = shema?.work?.findIndex(v => v.active) - 1
+ index = ativeIndex >= 0 ? ativeIndex : 0
+ } else if (item.title === '涓嬩竴椤�') {
+ let ativeIndex = shema?.work?.findIndex(v => v.active) + 1
+ index = ativeIndex < (shema?.work.length - 1) ? ativeIndex : shema?.work.length - 1
+ }
+ let array = []
+ shema?.work.forEach((v, i) => {
+ array.push({ ...v, active: index === i, children: v.children.map(s => ({ ...s, active: false })) })
+ })
+ setShema({ ...shema, work: array, active: false })
+ }
+
return (
- <div
- className={styles.container}
- >
+ <div className={styles.container}>
<div className={styles.content}>
<div
ref={ref}
@@ -46,7 +88,7 @@ const Container = (props) => {
<div className={styles['m-info']}>
<div className={styles['i-company']}>
<span className={styles['c-address']}></span>
- <span>姘稿悏姘村姟鏈夐檺鍏徃</span>
+ <span>{currentSite}</span>
<DownOutlined style={{ fontSize: '12px', marginLeft: '5px' }} />
</div>
<div className={styles['i-date']}>
@@ -62,6 +104,15 @@ const Container = (props) => {
</div>
</div>
</div>
+ <div className={styles['c-btns']}>
+ {
+ btns.map(v => {
+ return (
+ <div key={v.title} className={styles['c-btn']} onClick={() => btnsClick(v)}>{v.icon}</div>
+ )
+ })
+ }
+ </div>
</div>
</div>
)
diff --git a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less
index d5e0d66b..d02f4511 100644
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less
@@ -17,6 +17,27 @@
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
+ .c-btns {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ .c-btn {
+ border-radius: 50%;
+ background: white;
+ width: 30px;
+ height: 30px;
+ margin-bottom: 10px;
+ font-size: 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ &:hover {
+ cursor: pointer;
+ color: #1985FF;
+ }
+ }
+ }
.moblie {
width: 330px;
overflow: auto;
diff --git a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js
index ea05cd39..05232e31 100644
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js
@@ -1,9 +1,55 @@
-import React, { useState, useRef, useContext } from 'react'
+import React, { useState, useRef, useContext, useMemo } from 'react'
+import { Checkbox, Row, Col } from 'antd'
import { useDrag, useDrop, DndProvider } from 'react-dnd'
-import { GlobalStore } from '../index'
import { CaretRightOutlined } from '@ant-design/icons'
import styles from './index.less'
+const cardTypes = ['绠＄悊', '鎵ц', '杩愯惀']
+
+const cards = [
+ {
+ title: '杩愯惀鎬昏',
+ count: 1,
+ children: [
+ { name: '杩愯惀鎬昏', widget: 'OVERVIEW', type: '杩愯惀' }
+ ]
+ },
+ {
+ title: '姘村巶',
+ count: 2,
+ children: [
+ { name: '姘村巶鎬昏', widget: 'WATER_OVERVIEW', type: '杩愯惀' },
+ { name: '渚涙按閲忔洸绾�', widget: 'WATER_CHART', type: '杩愯惀' },
+ ]
+ },
+ {
+ title: '绠＄綉',
+ count: 4,
+ children: [
+ { name: '绠＄綉鐩戞帶', widget: 'PIPEMONITORING', type: '杩愯惀' },
+ { name: '绠＄綉閲囬泦', widget: 'PIPEGATHER', type: '杩愯惀' },
+ { name: '绠＄綉宸℃', widget: 'PIPEINSPECTION', type: '杩愯惀' },
+ { name: '缁翠慨宸ュ崟', widget: 'MAINTENANCEORDER', type: '杩愯惀' },
+ ]
+ },
+ {
+ title: '浜屼緵',
+ count: 3,
+ children: [
+ { name: '浜屼緵鎬昏', widget: 'OPERATIONAL_OVERVIEW', type: '杩愯惀' },
+ { name: '娉垫埧杩愯鐘舵€�', widget: 'PUMP_STATUS', type: '杩愯惀' },
+ { name: '娉垫埧缁翠慨淇濆吇', widget: 'PUMP_MAINTAIN', type: '杩愯惀' },
+ ]
+ },
+ {
+ title: '钀ユ敹',
+ count: 1,
+ children: [
+ { name: '钀ユ敹鎬昏', widget: 'REVENUE_OVERVIEW', type: '杩愯惀' },
+ ]
+ }
+]
+
const getNanoid = (len = 10) => {
var orgStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let returnStr = "";
@@ -51,7 +97,7 @@ const Group = (props) => {
}
const Card = (props) => {
-
+ console.log('pprops', props)
const ref = useRef(null)
const id = getNanoid()
@@ -71,11 +117,9 @@ const Card = (props) => {
ref={ref}
className={styles.card}
>
- <div
- className={styles.cardBox}
- widget={props.widget}
- >
- </div>
+ <div className={styles.cardType} type={props.type}>{props.type + '缁勪欢'}</div>
+ <div className={styles.cardBox} widget={props.widget}></div>
+ <div className={styles.swiper}>{props.name}</div>
</div>
)
}
@@ -102,6 +146,23 @@ const CardGroup = (props) => {
const Left = () => {
+ const [cardType, setCardType] = useState(cardTypes)
+
+ const cardsFilter = useMemo(() => {
+ let array = []
+ cards.forEach(v => {
+ let children = v.children.filter(s => cardType.includes(s.type))
+ if (children.length) {
+ array.push({ ...v, children })
+ }
+ })
+ return array
+ }, [cards, cardType])
+
+ const cardTypeChange = (value) => {
+ setCardType(value)
+ }
+
return (
<div className={styles.left}>
<div className={styles.header}>缁勪欢搴�</div>
@@ -113,29 +174,38 @@ const Left = () => {
</div>
</div>
<div className={styles.item}>
- <div className={styles['g-title']}>鍗＄墖缁勪欢</div>
+ <div className={styles['g-title']} style={{ paddingBottom: '0' }}>鍗＄墖缁勪欢</div>
+ <div className={styles['g-checks']}>
+ <Checkbox.Group
+ style={{ width: '100%' }}
+ value={cardType}
+ onChange={cardTypeChange}
+ >
+ <Row>
+ {
+ cardTypes.map(v => {
+ return (
+ <Col key={v} span={8} style={{ display: 'flex', justifyContent: 'center' }}>
+ <Checkbox value={v}>{v}</Checkbox>
+ </Col>
+ )
+ })
+ }
+ </Row>
+ </Checkbox.Group>
+ </div>
<div className={styles['g-content']}>
- <CardGroup title={'杩愯惀鎬昏'} count={1}>
- <Card name={'杩愯惀鎬昏'} widget={'OVERVIEW'}></Card>
- </CardGroup>
- <CardGroup title={'姘村巶'} count={2}>
- <Card name={'姘村巶鎬昏'} widget={'WATER_OVERVIEW'}></Card>
- <Card name={'渚涙按閲忔洸绾�'} widget={'WATER_CHART'}></Card>
- </CardGroup>
- <CardGroup title={'绠＄綉'} count={4}>
- <Card name={'绠＄綉鐩戞帶'} widget={'PIPEMONITORING'}></Card>
- <Card name={'绠＄綉閲囬泦'} widget={'PIPEGATHER'}></Card>
- <Card name={'绠＄綉宸℃'} widget={'PIPEINSPECTION'}></Card>
- <Card name={'缁翠慨宸ュ崟'} widget={'MAINTENANCEORDER'}></Card>
- </CardGroup>
- <CardGroup title={'浜屼緵'} count={4}>
- <Card name={'浜屼緵鎬昏'} widget={'OPERATIONAL_OVERVIEW'}></Card>
- <Card name={'娉垫埧杩愯鐘舵€�'} widget={'PUMP_STATUS'}></Card>
- <Card name={'娉垫埧缁翠慨淇濆吇'} widget={'PUMP_MAINTAIN'}></Card>
- </CardGroup>
- <CardGroup title={'钀ユ敹'} count={1}>
- <Card name={'钀ユ敹鎬昏'} widget={'REVENUE_OVERVIEW'}></Card>
- </CardGroup>
+ {
+ cardsFilter.map(v => {
+ return (
+ <CardGroup key={v.title} {...v}>
+ {
+ v.children.map(s => <Card key={s.name} {...s}></Card>)
+ }
+ </CardGroup>
+ )
+ })
+ }
</div>
</div>
</div>
diff --git a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less
index d5a86356..41fd7ab9 100644
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less
@@ -19,6 +19,10 @@
font-size: 14px;
font-weight: 700;
}
+ .g-checks {
+ padding: 9px 0;
+ background: linear-gradient(to top, #F3F3F3, #FFFFFF);
+ }
.g-content {
padding: 0 10px;
.group {
@@ -33,9 +37,10 @@
.card {
width: 100%;
border-radius: 4px;
- background: #E4E4E4;
+ background: #f4f4f4;
margin-top: 7px;
padding: 10px;
+ position: relative;
.cardBox {
width: 100%;
height: 100%;
@@ -95,6 +100,44 @@
background-size: 100% 100%;
}
}
+ &:hover {
+ .swiper {
+ height: 25px;
+ }
+ }
+ .cardType {
+ position: absolute;
+ right: 0;
+ top: 0;
+ color: white;
+ padding: 2px 5px;
+ &[type='绠＄悊'] {
+ border-radius: 4px;
+ background: #2291ee;
+ }
+ &[type='鎵ц'] {
+ border-radius: 4px;
+ background: #9079FF;
+ }
+ &[type='杩愯惀'] {
+ border-radius: 4px;
+ background: #26BB9A;
+ }
+ }
+ .swiper {
+ overflow: hidden;
+ position: absolute;
+ transition: all 0.5s;
+ color: white;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ height: 0;
+ line-height: 25px;
+ border-radius: 0 0 4px 4px;
+ background: rgba(0, 0, 0, 0.3);
+ }
}
}
}
@@ -102,6 +145,7 @@
.cardGroup {
padding-left: 10px;
font-size: 14px;
+ margin-top: 3px;
.g-top {
display: inline;
&:hover {
diff --git a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js
index 9cc6c676..016b72e6 100644
--- a/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js
+++ b/src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js
@@ -1,7 +1,20 @@
import React, { useState, useContext, useMemo, useEffect } from 'react'
import styles from './index.less'
-import { Input, Form } from 'antd'
+import { Input, Form, TreeSelect, Switch, Modal } from 'antd'
import { GlobalStore } from '../index'
+import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api'
+import {
+ UsergroupDeleteOutlined,
+ IdcardOutlined,
+ DesktopOutlined,
+ FolderFilled,
+ FileOutlined,
+ MobileOutlined,
+ DeleteOutlined,
+ PictureOutlined,
+} from '@ant-design/icons'
+
+const { TreeNode } = TreeSelect
const themes = [
{ name: '渚涙按涓婚鑳屾櫙' },
@@ -14,6 +27,8 @@ const Right = () => {
const { shema, setShema } = useContext(GlobalStore)
const { active } = shema
const [form] = Form.useForm()
+ const [moblieList, setMoblieList] = useState([])
+ const [iconShow, setIconShow] = useState()
const name = useMemo(() => {
let name = ''
@@ -73,6 +88,92 @@ const Right = () => {
setShema({ ...shema, work: array })
}
+ const cardSettingOther = (value, attr) => {
+ let array = []
+ shema?.work.forEach(v => {
+ array.push({ ...v, children: v.children.map(v => ({ ...v, [attr]: v.active ? value : v[[attr]] })) })
+ })
+ setShema({ ...shema, work: array })
+ }
+
+ const getAppList = async () => {
+ const { code, data } = await getMiniAppModuleTree({ userMode: 'super', })
+ if (code === 0) {
+ let array = (data[0].children.length > 0 && [...data[0].children]) || [];
+ let list = [];
+ array.map((i, j) => {
+ let aa = [];
+ i.children.map(k => {
+ if (k.text === '鑿滃崟绠＄悊') {
+ aa = k.children;
+ }
+ });
+ let a = {};
+ a.value = `praent${j}`;
+ a.text = i.text;
+ a.children = aa;
+ a.menuID = `praent${j}`;
+ a.key = `praent${j}`;
+ list.push(a);
+ })
+ setMoblieList(list)
+ }
+ }
+
+ const mapTreeMoblie = (org) => {
+ const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+ if (org.key) {
+ if (haveChildren) {
+ return (
+ <TreeNode
+ value={org.pageUrl || org.menuID}
+ title={org.text}
+ icon={org.key ? <MobileOutlined /> : <FolderFilled />}
+ disabled
+ >
+ {org.children.map(item => mapTreeMoblie(item))}
+ </TreeNode>
+ );
+ }
+ return <TreeNode value={org.pageUrl || org.menuID} title={org.text} icon={<MobileOutlined />} disabled />;
+ }
+ return haveChildren ? (
+ <TreeNode
+ value={org.pageUrl || org.menuID}
+ title={org.text}
+ icon={org.key ? <MobileOutlined /> : <FolderFilled />}
+ disabled
+ >
+ {org.children.map(item => mapTreeMoblie(item))}
+ </TreeNode>
+ ) : (
+ <TreeNode
+ value={org.pageUrl || org.menuID}
+ title={org.text}
+ icon={
+ org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo' ? (
+ <FolderFilled />
+ ) : (
+ <FileOutlined style={{ color: '#1890ff' }} />
+ )
+ }
+ disabled={org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo'}
+ />
+ )
+ }
+
+ const getData = () => {
+ getAppList()
+ }
+
+ const iconShowChange = () => {
+ setIconShow(true)
+ }
+
+ useEffect(() => {
+ getData()
+ }, [])
+
return (
<div className={styles.right}>
<div className={styles.header}>{active ? '椤甸潰閰嶇疆' : '缁勪欢閰嶇疆'}</div>
@@ -119,11 +220,27 @@ const Right = () => {
<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">
<Input value={card.icon} onChange={(e) => cardSetting(e, 'icon')} />
</Form.Item>
<Form.Item label="鍔熻兘璺宠浆" name="url">
- <Input.TextArea value={card.url} onChange={(e) => cardSetting(e, 'url')} />
+ <TreeSelect
+ showSearch
+ treeNodeFilterProp="title"
+ style={{ width: '97%' }}
+ value={card.url}
+ dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+ placeholder="璇烽€夋嫨鍔熻兘璺緞"
+ allowClear
+ treeDefaultExpandAll
+ treeIcon
+ onChange={(value) => cardSettingOther(value, 'url')}
+ >
+ {moblieList.map(i => mapTreeMoblie(i))}
+ </TreeSelect>
</Form.Item>
<Form.Item label="鍗＄墖鍙傛暟" name="param">
<Input value={card.param} onChange={(e) => cardSetting(e, 'param')} />
@@ -133,6 +250,13 @@ const Right = () => {
)
}
</div>
+ <Modal
+ title={'鍗＄墖鍥炬爣'}
+ visible={iconShow}
+ onCancel={() => setIconShow(false)}
+ >
+
+ </Modal>
</div>
)
--
2.17.1