Commit bc3c9d81 authored by Maofei94's avatar Maofei94

perf: 登陆页优化,layout优化

parent 210d1741
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="57.468px" height="30px" viewBox="0 0 57.468 30" enable-background="new 0 0 57.468 30" xml:space="preserve">
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.0376" y1="9.8105" x2="48.2442" y2="34.4248">
<stop offset="0" style="stop-color:#1E99D7"/>
<stop offset="1" style="stop-color:#49AF86"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M28.733,22.787c-0.76,0-1.485,0.1-2.144,0.271l0,0c-0.003,0-0.009,0.002-0.011,0.004
c-0.133,0.033-0.262,0.076-0.39,0.117c-2.221,0.521-5.448-1.268-2.83-4.58l-0.011-0.006c1.484-2.158,1.97-4.486,1.083-6.425
c-1.697-3.708-7.754-4.566-13.525-1.923c-5.772,2.648-9.072,7.797-7.375,11.502c1.698,3.707,7.753,4.568,13.525,1.918
c0.185-0.082,0.36-0.18,0.538-0.268v0.01c2.9-1.629,5.677,0.705,5.545,2.686c-0.014,0.1-0.023,0.199-0.023,0.303
c0,1.99,2.515,3.604,5.617,3.604c3.103,0,5.617-1.613,5.617-3.604C34.35,24.402,31.836,22.787,28.733,22.787z"/>
</g>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="3.2749" y1="3.3135" x2="51.5636" y2="27.9313">
<stop offset="0" style="stop-color:#1E99D7"/>
<stop offset="1" style="stop-color:#49AF86"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M7.842,8.285c3.108-1.636,4.775-4.581,3.721-6.576c-1.051-1.997-4.422-2.283-7.528-0.65
c-3.107,1.636-4.771,4.584-3.72,6.578C1.364,9.631,4.737,9.921,7.842,8.285z"/>
</g>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="8.6138" y1="-7.1582" x2="56.8952" y2="17.4559">
<stop offset="0" style="stop-color:#1E99D7"/>
<stop offset="1" style="stop-color:#49AF86"/>
</linearGradient>
<path fill="url(#SVGID_3_)" d="M53.433,1.058c-3.106-1.633-6.479-1.346-7.531,0.65c-0.787,1.498-0.047,3.527,1.688,5.145l0,0
c1.232,1.51,0.55,3.728-1.991,2.99c-0.203-0.08-0.406-0.148-0.611-0.217c-0.037-0.018-0.071-0.026-0.11-0.044
c-0.32-0.144-0.554-0.21-0.739-0.231c-4.955-1.445-9.642-0.369-11.102,2.818c-1.699,3.709,1.603,8.855,7.373,11.498
c5.771,2.65,11.827,1.789,13.525-1.918c1.195-2.605-0.09-5.921-2.959-8.583c-0.004-0.002-0.007-0.009-0.012-0.013
c-1.701-1.924-1.368-4.611,0.33-4.18c0.058,0.018,0.117,0.036,0.176,0.053c0.02,0.009,0.04,0.009,0.061,0.018V9.04
c2.475,0.688,4.787,0.188,5.624-1.404C58.205,5.642,56.54,2.694,53.433,1.058z"/>
</g>
</g>
</svg>
This diff was suppressed by a .gitattributes entry.
......@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
import menuConfig from '../routes/menuConfig';
import logo from '../assets/logo.svg';
import logo from '../assets/images/logo/panda-logo.svg';
import RightContent from '../components/GlobalHeader/RightContent';
// const noMatch = (
......@@ -22,7 +22,7 @@ import RightContent from '../components/GlobalHeader/RightContent';
const defaultFooterDom = (
<DefaultFooter
copyright={`${new Date().getFullYear()} 熊猫智慧水务技术委员会出品`}
links={[]}
links={false}
/>
);
......@@ -39,11 +39,14 @@ const BasicLayout = props => {
matchRoutes(props.route.routes, props.location.pathname);
return (
<ProLayout
logo={logo}
logo={() => (
<img src={logo} style={{ width: '32px', height: '32px' }} alt="" />
)}
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => {}}
// footerRender={() => defaultFooterDom}
footerRender={() => defaultFooterDom}
rightContentRender={() => <RightContent />}
title="熊猫运维系统"
route={
{
// routes: config.routes,
......
......@@ -9,7 +9,7 @@ import {
getPageTitle,
} from '@ant-design/pro-layout';
import logo from '../assets/logo.svg';
import logo from '../assets/images/logo/panda-logo.svg';
import styles from './UserLayout.less';
const UserLayout = props => {
......@@ -40,16 +40,17 @@ const UserLayout = props => {
<div className={styles.top}>
<div className={styles.header}>
<img alt="logo" className={styles.logo} src={logo} />
<span className={styles.title}>Ant Design</span>
<span className={styles.title}>熊猫水务运维平台</span>
</div>
<div className={styles.desc}>
Ant Design 是西湖区最具影响力的 Web 设计规范
{/* Ant Design 是西湖区最具影响力的 Web 设计规范 */}
</div>
</div>
{renderRoutes(route.routes)}
</div>
<DefaultFooter
copyright={`${new Date().getFullYear()} 熊猫智慧水务技术委员会出品`}
links={[]}
/>
</div>
</HelmetProvider>
......
......@@ -14,6 +14,7 @@ import {
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux';
import { get, post } from '../../services';
import styles from './InitDataBase.less'
const { Option } = Select;
const formLables = {
......@@ -167,15 +168,16 @@ const InitDataBase = props => {
dataIndex: 'name',
key: 'name',
render: () => {
return <button onClick={ ()=>{changeDesc()}}>修改描述</button>;
return <Button type='primary' size='small' onClick={ ()=>{changeDesc()}}>修改描述</Button>;
},
},
{
title: '删除',
dataIndex: 'name',
key: 'name',
render: () => {
return <button>删除</button>;
return <Button size='small' danger>删除</Button>;
},
},
];
......@@ -183,9 +185,9 @@ const InitDataBase = props => {
<>
<PageContainer>
<Card>
<div>数据库初始化</div>
<div />
<div className={styles.tableTitle}>数据库初始化</div>
<Form
className={styles.mgTop20}
layout="horizontal"
labelAlign="left"
labelCol={{ span: 3 }}
......@@ -194,18 +196,18 @@ const InitDataBase = props => {
onValuesChange={onValuesChange}
>
<Form.Item label={`${formLables.ip}:`} name="ip">
<Input placeholder="请输入" />
<Input placeholder="请输入服务器名或IP地址" />
</Form.Item>
<Form.Item label={`${formLables.userName}:`} name="userName">
<Input placeholder="请输入" />
<Input placeholder="请输入用户名称" />
</Form.Item>
<Form.Item label={`${formLables.password}:`} name="password">
<Input placeholder="请输入" />
<Input placeholder="请输入用户密码" />
</Form.Item>
<Form.Item label={`${formLables.dbName}:`} name="dbName">
<Select
showSearch
placeholder="请选择"
placeholder="请选择数据库"
optionFilterProp="children"
onFocus={() => {
selectFocus();
......@@ -230,27 +232,24 @@ const InitDataBase = props => {
</Select>
</Form.Item>
<Form.Item>
<Space size="large">
<Button onClick={onCheck}>测试连接</Button>
<Button htmlType="submit">保存连接</Button>
<Button htmlType="reset" onClick={()=>{initClick()}}>
数据库初始化
</Button>
</Space>
<span>{dbForm.inUse}</span>
<div className={styles.tCenter}>
<Space size="large">
<Button onClick={onCheck}>测试连接</Button>
<Button type='primary' htmlType="submit">保存连接</Button>
<Button type='primary' danger htmlType="reset" onClick={()=>{initClick()}}>
数据库初始化
</Button>
<span>{dbForm.inUse}</span>
</Space>
</div>
</Form.Item>
{/* <div className={`btnBox`}>
<Button onClick={onCheck}>测试连接</Button>
<Button>保存连接</Button>
<Button>数据库初始化</Button>
<span>(产品方案(物联GCK))</span>
</div> */}
</Form>
</Card>
<Card>
<div>近期保存的数据库连接</div>
<Card className={styles.mgTop20}>
<div className={styles.tableTitle}>近期保存的数据库连接</div>
<Table
style={{marginTop:'20px'}}
columns={columns}
dataSource={data}
bordered
......@@ -270,6 +269,13 @@ const InitDataBase = props => {
maskClosable
onOk={() => setModalVisible(false)}
onCancel={() => setModalVisible(false)}
width="1000px"
bodyStyle={{
minHeight:'100px'
}}
footer={
<Button type='primary' onClick={() => setModalVisible(false)}>关闭窗口</Button>
}
>
<div>测试</div>
</Modal>
......
.tableTitle{
font-size: 16px;
}
.mgTop20{
margin-top: 20px !important;
}
.tCenter{
text-align: center;
}
\ No newline at end of file
......@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Card, Button, Table, Space, Modal } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { get } from '../../services';
import styles from './ManagementDataBase.less'
const ManagementDataBase = () => {
const [autoCheckList, setAutoCheckList] = useState([]);
......@@ -69,8 +70,10 @@ const ManagementDataBase = () => {
}, []);
const handleCheck = () => {
console.log('check DB');
alert('check DB')
};
const handleUpdate = () => {
alert('updatedb')
console.log('updatedb');
};
const handleLog = text => {
......@@ -101,17 +104,11 @@ const ManagementDataBase = () => {
key: 'tableName',
width: 200,
},
// {
// title:'类型',
// dataIndex: 'type',
// key: 'type',
// },
{
title: '差异比较',
dataIndex: 'message',
key: 'message',
ellipsis: true,
// width:80
},
];
const logColumns = [
......@@ -141,13 +138,14 @@ const ManagementDataBase = () => {
key: 'despersion',
render: text => {
return (
<button
<Button
size='small'
onClick={() => {
handleLog(text);
}}
>
日志
</button>
</Button>
);
},
},
......@@ -158,13 +156,15 @@ const ManagementDataBase = () => {
ellipsis: true,
render: text => {
return (
<button
<Button
size='small'
type='primary'
onClick={() => {
handleLog(text);
}}
>
升级内容
</button>
</Button>
);
},
},
......@@ -174,33 +174,38 @@ const ManagementDataBase = () => {
<>
<PageContainer>
<Card>
<div>表结构自动化修复</div>
<div className={styles.tableTitle}>表结构自动化修复</div>
<Table
className={styles.mgTop20}
columns={autoCheckColumns}
dataSource={autoCheckList}
bordered
loading={checkLoading}
/>
<div className={ styles.tCenter}>
<Space>
<Button onClick={handleCheck}>检查</Button>
<Button onClick={handleUpdate}>升级</Button>
<Button type='primary' onClick={handleCheck}>检查</Button>
<Button danger type='primary' onClick={handleUpdate}>升级</Button>
</Space>
</div>
</Card>
<Card>
<div>
<Card className={styles.mgTop20}>
<div className={styles.tableTitle}>
表字段手动修复
(字段长度不统一,请手动修改差异,数据可能会截断,请谨慎操作)
</div>
<Table
className={styles.mgTop20}
columns={checkColumns}
dataSource={checkList}
bordered
loading={checkLoading}
/>
</Card>
<Card>
<div>数据库升级记录</div>
<Card className={styles.mgTop20}>
<div className={styles.tableTitle}>数据库升级记录</div>
<Table
className={styles.mgTop20}
columns={logColumns}
dataSource={logList}
bordered
......@@ -216,8 +221,12 @@ const ManagementDataBase = () => {
maskClosable
onOk={() => setModalVisible(false)}
onCancel={() => setModalVisible(false)}
width="1000px"
bodyStyle={{
minHeight:'100px'
}}
footer={[
<Button onClick={() => setModalVisible(false)}>关闭窗口</Button>,
<Button type='primary' onClick={() => setModalVisible(false)}>关闭窗口</Button>,
]}
>
{content}
......
.tableTitle{
font-size: 16px;
}
.mgTop20{
margin-top: 20px !important;
}
.tCenter{
text-align: center;
}
\ No newline at end of file
......@@ -14,29 +14,29 @@ import { connect } from 'react-redux';
import TestModal from './ModalComponent';
import ListCard from './ListCard';
import { get, post } from '../../services';
import { orgGet,orgTest } from '../../services/orgnazation/api'
const { Search } = Input
const { TreeNode } = TreeSelect;
const treeData = [
{
title: 'Node1',
value: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-1',
},
{
title: 'Child Node2',
value: '0-0-2',
},
],
},
{
title: 'Node2',
value: '0-1',
},
];
// const treeData = [
// {
// title: 'Node1',
// value: '0-0',
// children: [
// {
// title: 'Child Node1',
// value: '0-0-1',
// },
// {
// title: 'Child Node2',
// value: '0-0-2',
// },
// ],
// },
// {
// title: 'Node2',
// value: '0-1',
// },
// ];
const DefaultComponent = ()=> {
......@@ -44,8 +44,8 @@ const DefaultComponent = ()=> {
const [tableData, setTableData] = useState([]) //table的值
const [selectedRowKeys, setSelectedRowKeys] = useState([]) //table表格checkbox配置
const [modalVisible, setModalVisible] = useState(false) //展示Modal弹窗
const [modalVisible2, setModalVisible2] = useState(false) //展示Modal弹窗
const [testPeoList, setTestPeoList] = useState([]) //测试card数组
const [treeData, setTreeData] = useState([])
//树节点选中的值
const treeChange = (e) =>{
setTreeValue(e)
......@@ -95,6 +95,49 @@ const DefaultComponent = ()=> {
key:'wxid'
}
]
useEffect( ()=>{
orgGet().then(res =>{
console.log(res,'orgGet')
if(res){
let arr = transTree(res)
console.log(transTree(res),'arr')
setTreeData(arr)
}
})
},[])
//处理返回的树形结构
const transTree = (value,isChild=false) =>{
let arr = value
if(arr.length< 0){
return
}
let obj = {}
return arr.map( item =>{
// item.title = item.text
// item.value = item.id
// if( item.children && item.children.length > 0){
// transTree(item.children)
// return obj=item
// }else{
// return item
// }
if(isChild){
item.title = item.userName
item.value = item.userID
}else{
item.title = item.text
item.value = item.id
}
if( item.children && item.children.length > 0){
transTree(item.children,false)
return obj=item
}else{
return item
}
})
}
useEffect( () =>{
get('/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew',{
OUID:24,
......@@ -104,7 +147,6 @@ const DefaultComponent = ()=> {
if(res.success){
setTableData(res.root)
}
console.log(res)
})
const testData =[]
const test2list = []
......@@ -136,10 +178,8 @@ const DefaultComponent = ()=> {
onChange:selectChange,
}
const btnLable = [
{label:'查找用户',handle:handleSearch},
{label:'用户导入',handle:handleImport},
{label:'新建用户',handle:'newHandle'},
{label:'批量关联',handle:'relHandle'}
{label:'查找用户',handle:handleSearch ,config:{ type:'primary',danger:true} },
{label:'用户导入',handle:handleImport,config:{ type:'info',}},
]
return (
......@@ -147,7 +187,11 @@ const DefaultComponent = ()=> {
<PageContainer>
<Card>
<Row>
机构选择
<Col span ={1}>
<div style={{height:"30px",lineHeight:"30px"}}>
机构选择
</div>
</Col>
<Col span={12}>
<TreeSelect
style={{"width":"50%"}}
......@@ -157,27 +201,28 @@ const DefaultComponent = ()=> {
/>
</Col>
<Col span={ 8}>
<Search
{/* <Search
placeholder="请输入"
onSearch={(e) =>{inputSearch(e)}}
style={{ width: "50%" }}
enterButton
/>
/> */}
</Col>
</Row>
</Card>
<Card>
<Space>
{
btnLable && btnLable.map( (item,index) => {
return (
<Button key={index} onClick ={ ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button>
)
})
}
</Space>
<div style={{marginTop:'20px',textAlign:'center'}}>
<Space>
{
btnLable && btnLable.map( (item,index) => {
const { config} =item
return (
<Button key={index} {...config} onClick ={ ()=>{ item.handle && typeof item.handle === 'function' && item.handle()}}>{item.label}</Button>
)
})
}
</Space>
</div>
<TestModal
title='测试title'
title='用户选择'
visible = {modalVisible}
maskClosable
onOk={() => confirmModal()}
......@@ -186,6 +231,8 @@ const DefaultComponent = ()=> {
style= {{top:20}}
width="1000px"
destroyOnClose={true}
cancelText='取消'
okText='确认选择'
>
<ListCard optionsList ={testPeoList}></ListCard>
</TestModal>
......
import React, { useState, useEffect, useCallback} from 'react'
import ListCardItem from './listCardItem'
import { get, post } from '../../services';
import { orgTest} from '../../services/orgnazation/api'
const ListCard = (props) =>{
const [valueList, setValueList]=useState([])
const [testList, setTestList] = useState([])
const { optionsList} = props
// const getValueCallback = (value,index) => {
// console.log(value,index)
// console.log(valueList,'valueList1```')
// setValueList(valueList[index]=value)
// console.log(valueList,'valueList')
// }
const getValueCallback = useCallback(
(value,index) => {
console.log(value,index)
......@@ -32,6 +26,10 @@ const ListCard = (props) =>{
})
setTestList(list)
})
//多级嵌套测试
orgTest().then(res =>{
console.log(res,'res')
})
},[])
return (
<>
......
@import '~antd/es/style/themes/default.less';
.test {
.divBox {
display: flex;
flex-wrap: wrap;
border: 1px solid chartreuse;
border: 1px solid #b5b8c8;
margin-top: 20px;
min-height: 40px;
.topCheckbox{
height: 20px;
background-color: #fff;
margin: -10px 0 0 20px;
}
.checkdiv {
display: flex;
margin-left: 20px;
justify-content: space-between;
.check {
margin: 10px 0 ;
flex: 1;
}
}
}
.checkdiv {
display: flex;
justify-content: space-between;
.check {
flex: 1;
}
}
\ No newline at end of file
import React,{ useState, useEffect, } from 'react'
import {
Card,
Input,
Button
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import { get, post } from '../../services';
const TestTable = ()=> {
const [data,setData] = useState([])
//搜索框时间
useEffect(() =>{
get(`/Cityinterface/rest/services/OMS.svc/S_GetConnRecord`, {
_version: 9999,
dc: 1603334559186,
}).then( res =>{
if(res){
setData(res)
}
console.log(res)
}).catch( err =>{
console.error(err)
})
},[])
const columns = [
{
title: '服务器名或IP地址',
dataIndex: 'ip',
key: 'ip',
},
{
title: '数据库名称',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '数据库用户名称',
dataIndex: 'userName',
key: 'userName',
},
{
title: '保存时间',
dataIndex: 'saveTime',
key: 'saveTime',
},
{
title: '描述',
dataIndex: 'desc',
key: 'desc',
},
{
title: '修改描述',
dataIndex: 'name',
key: 'name',
filters:true,
valueType: 'dateTime'
// render: () => {
// return <Button type='primary' onClick={ ()=>{changeDesc()}}>修改描述</Button>;
// },
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record) => (
<>
<Button
>
修改描述
</Button>
<Button href="">删除</Button>
</>
),
},
];
return (
<>
<PageContainer>
<Card></Card>
<ProTable
style={{marginTop:'20px'}}
headerTitle='表格'
rowKey="key"
search={{labelWidth:100}}
columns={columns}
bordered
dataSource={data}
/>
</PageContainer>
</>
)
}
export default connect()(TestTable)
\ No newline at end of file
......@@ -15,8 +15,8 @@ const ListCardItem = (props) =>{
const [ checkList, setCheckList] = useState([]) //复选框列表
const { getValueCallback, itemid, userList, OUName } = props
const defaultList = userList && userList.map( (item,index) =>{
item.label = item.userName || item.label || index
item.value = item.userID || item.label || index
item.label = item.userName || item.label
item.value = item.userID || item.label
return item
}) || []
......@@ -43,9 +43,9 @@ const ListCardItem = (props) =>{
}
return (
<>
<div className ={`${styles.test}`}>
<div style={{width:"100%"}}>
<Checkbox
<div className ={`${styles.divBox}`}>
<div className={ styles.topCheckbox}>
<Checkbox
indeterminate = { indeterminate}
checked={ allChecked}
onChange= { (e) =>{ handleAllChecked(e)}}
......
......@@ -28,9 +28,9 @@ const Login = props => {
console.log(values); // eg:{userName: "123", password: "123"}
const { userName: loginName, password } = values;
login({ loginName, password }).then(result => {
console.log(result.data);
if (result.data.success === true && result.data.pass === true) {
const { userMode } = result.data;
console.log(result);
if (result.success === true && result.pass === true) {
const { userMode } = result;
localStorage.setItem('userMode', userMode);
if (userMode === USER_MODE.ADMIN || userMode === USER_MODE.SUPER) {
window.location.href = '/dbm/dbInit/';
......
......@@ -6,6 +6,7 @@ import RequestTest from '../pages/testPages/request';
import InitDataBase from '../pages/database/InitDataBase';
import ManagementDataBase from '../pages/database/ManagementDataBase';
import DefaultComponent from '../pages/orgnazation/DefaultComponent';
import TestTable from '../pages/orgnazation/TestTable';
export default {
routes: [
{
......@@ -42,6 +43,11 @@ export default {
name: '机构列表',
component: DefaultComponent,
},
{
path: '/userCenter/testTable',
name: '测试表格',
component: TestTable,
},
{
path: '/platformCenter/gis',
name: 'GIS平台',
......
......@@ -38,6 +38,10 @@ const menuConfig = [
path: '/userCenter/orgList',
name: '机构列表',
},
{
path: '/userCenter/testTable',
name: '测试表格',
},
],
},
{
......
import { get, post } from '../index';
export const orgTest = params =>
get(
'/Cityinterface/rest/services/OMS.svc/W4_GetMenuByRoleWithLevel?roleID=6&subSystemValue=city&subSystemName=city&_version=9999&_dc=1604051878230',
params,
);
// 获取组织结构树
export const orgGet = params =>
get(
'/Cityinterface/rest/services/OMS.svc/U_GetOUTree?_version=9999&_dc=1604304482575&node=-1',
params,
);
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