Commit f0a8e78b authored by 皮倩雯's avatar 皮倩雯
parents 17fe8003 5946debb
Pipeline #52556 waiting for manual action with stages
...@@ -142,6 +142,7 @@ ...@@ -142,6 +142,7 @@
"sortablejs": "^1.13.0", "sortablejs": "^1.13.0",
"styled-components": "4.2.0", "styled-components": "4.2.0",
"use-merge-value": "^1.0.2", "use-merge-value": "^1.0.2",
"react-color": "^2.19.3",
"voca": "^1.4.0" "voca": "^1.4.0"
}, },
"devDependencies": { "devDependencies": {
......
...@@ -37,8 +37,7 @@ const OmsLog = () => { ...@@ -37,8 +37,7 @@ const OmsLog = () => {
width: 150, width: 150,
defaultSortOrder: 'descend', defaultSortOrder: 'descend',
sortDirections: ['descend', 'ascend'], sortDirections: ['descend', 'ascend'],
sorter: (a, b) => sorter: (a, b) => new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
}, },
{ {
title: '接口名称', title: '接口名称',
...@@ -65,8 +64,8 @@ const OmsLog = () => { ...@@ -65,8 +64,8 @@ const OmsLog = () => {
width: 850, width: 850,
ellipsis: 'true', ellipsis: 'true',
render: record => ( render: record => (
<Tooltip placement="left" title={decodeURI(record)}> <Tooltip placement="left" title={record}>
{decodeURI(record)} {record}
</Tooltip> </Tooltip>
), ),
}, },
...@@ -110,10 +109,7 @@ const OmsLog = () => { ...@@ -110,10 +109,7 @@ const OmsLog = () => {
const searchStyle1 = val => { const searchStyle1 = val => {
let n; let n;
if (showSearchStyle) { if (showSearchStyle) {
n = val.replace( n = val.replace(new RegExp(label, 'g'), `<span style='color:red'>${label}</span>`);
new RegExp(label, 'g'),
`<span style='color:red'>${label}</span>`,
);
} else { } else {
n = val; n = val;
} }
...@@ -180,10 +176,7 @@ const OmsLog = () => { ...@@ -180,10 +176,7 @@ const OmsLog = () => {
const setTime = time => { const setTime = time => {
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss')); setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setStartTime( setStartTime(
moment( moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
new Date(new Date().getTime() - time * 60 * 60 * 1000),
'YYYY-MM-DD HH:mm:ss',
),
); );
}; };
const handleReset = () => { const handleReset = () => {
...@@ -249,8 +242,8 @@ const OmsLog = () => { ...@@ -249,8 +242,8 @@ const OmsLog = () => {
<Button <Button
type="primary" type="primary"
style={{ marginLeft: '10px' }} style={{ marginLeft: '10px' }}
onClick={() =>{ onClick={() => {
getData() getData();
setShowSearchStyle(true); setShowSearchStyle(true);
}} }}
> >
...@@ -278,8 +271,7 @@ const OmsLog = () => { ...@@ -278,8 +271,7 @@ const OmsLog = () => {
dataSource={data} dataSource={data}
scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }} scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }}
pagination={{ pagination={{
showTotal: (total, range) => showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100], pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20, defaultPageSize: 20,
showQuickJumper: true, showQuickJumper: true,
......
...@@ -60,10 +60,7 @@ const ServiceLog = () => { ...@@ -60,10 +60,7 @@ const ServiceLog = () => {
message: '时间设置有误', message: '时间设置有误',
description: '起始时间应该早于结束时间', description: '起始时间应该早于结束时间',
}); });
} else if ( } else if ((startMonth !== endMonth && startYear === endYear) || startYear !== endYear) {
(startMonth !== endMonth && startYear === endYear) ||
startYear !== endYear
) {
notification.info({ notification.info({
message: '时间设置提示', message: '时间设置提示',
description: '不允许跨月份查询', description: '不允许跨月份查询',
...@@ -137,10 +134,7 @@ const ServiceLog = () => { ...@@ -137,10 +134,7 @@ const ServiceLog = () => {
const searchStyle = val => { const searchStyle = val => {
let n; let n;
if (showSearchStyle) { if (showSearchStyle) {
n = val.replace( n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
new RegExp(searchWord, 'g'),
`<span style='color:red'>${searchWord}</span>`,
);
} else { } else {
n = val; n = val;
} }
...@@ -242,12 +236,7 @@ const ServiceLog = () => { ...@@ -242,12 +236,7 @@ const ServiceLog = () => {
const setTime = (time, value) => { const setTime = (time, value) => {
setTimeInterval(value); setTimeInterval(value);
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss')); setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setStartTime( setStartTime(moment(new Date(new Date().getTime() - time * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'));
moment(
new Date(new Date().getTime() - time * 60 * 1000),
'YYYY-MM-DD HH:mm:ss',
),
);
}; };
// 设置返回状态 // 设置返回状态
const changeStatus = value => { const changeStatus = value => {
...@@ -337,9 +326,7 @@ const ServiceLog = () => { ...@@ -337,9 +326,7 @@ const ServiceLog = () => {
<Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
<Row style={{ background: 'white' }}> <Row style={{ background: 'white' }}>
<Col span={8} style={{ paddingTop: '8px', paddingLeft: '5px' }}> <Col span={8} style={{ paddingTop: '8px', paddingLeft: '5px' }}>
<span style={{ fontSize: '14px', fontWeight: '600' }}> <span style={{ fontSize: '14px', fontWeight: '600' }}>访问量统计</span>
访问量统计
</span>
<span style={{ paddingLeft: '60%' }}>间隔:</span> <span style={{ paddingLeft: '60%' }}>间隔:</span>
<Select <Select
defaultValue="每小时" defaultValue="每小时"
...@@ -355,14 +342,10 @@ const ServiceLog = () => { ...@@ -355,14 +342,10 @@ const ServiceLog = () => {
</Select> </Select>
</Col> </Col>
<Col span={7} offset={1} style={{ paddingTop: '8px' }}> <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
<span style={{ fontSize: '14px', fontWeight: '600' }}> <span style={{ fontSize: '14px', fontWeight: '600' }}>接口调用频次统计</span>
接口调用频次统计
</span>
</Col> </Col>
<Col span={7} offset={1} style={{ paddingTop: '8px' }}> <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
<span style={{ fontSize: '14px', fontWeight: '600' }}> <span style={{ fontSize: '14px', fontWeight: '600' }}>接口平均耗时统计</span>
接口平均耗时统计
</span>
</Col> </Col>
</Row> </Row>
<Row className={styles.chart}> <Row className={styles.chart}>
...@@ -403,12 +386,7 @@ const ServiceLog = () => { ...@@ -403,12 +386,7 @@ const ServiceLog = () => {
Path: { alias: '接口调用频次' }, Path: { alias: '接口调用频次' },
}} }}
> >
<Axis <Axis name="Path" label="" title={{ offset: 20 }} className={styles.fontColor} />
name="Path"
label=""
title={{ offset: 20 }}
className={styles.fontColor}
/>
<Axis name="Count" title /> <Axis name="Count" title />
<Interval position="Path*Count" /> <Interval position="Path*Count" />
<Tooltip shared lock /> <Tooltip shared lock />
...@@ -442,8 +420,7 @@ const ServiceLog = () => { ...@@ -442,8 +420,7 @@ const ServiceLog = () => {
dataSource={dataTable} dataSource={dataTable}
scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }} scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }}
pagination={{ pagination={{
showTotal: (total, range) => showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100], pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20, defaultPageSize: 20,
showQuickJumper: true, showQuickJumper: true,
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { getLoginPage, getMapCofigs, getWebThemes, getProductList } from '@/services/webConfig/api'; import { getLoginPage, getMapCofigs, getWebThemes, getProductList } from '@/services/webConfig/api';
import { SketchPicker } from 'react-color';
import { import {
Drawer, Drawer,
notification, notification,
...@@ -14,6 +15,7 @@ import { ...@@ -14,6 +15,7 @@ import {
Divider, Divider,
Row, Row,
Col, Col,
Switch,
} from 'antd'; } from 'antd';
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons'; import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
import WebConfigForm from './webConfigForm'; import WebConfigForm from './webConfigForm';
...@@ -22,6 +24,16 @@ import styles from './siteConfigDrawer.less'; ...@@ -22,6 +24,16 @@ import styles from './siteConfigDrawer.less';
const { Option } = Select; const { Option } = Select;
const plainOptions = ['搜索', '首页', '常用', '反馈', '消息']; const plainOptions = ['搜索', '首页', '常用', '反馈', '消息'];
const defaultCheckedList = ['搜索', '首页', '常用', '反馈', '消息']; const defaultCheckedList = ['搜索', '首页', '常用', '反馈', '消息'];
const colorList = [
{ key: '薄暮', color: '#F5222D' },
{ key: '火山', color: '#FA541C' },
{ key: '日暮', color: '#FAAD14' },
{ key: '明青', color: '#13C2C2' },
{ key: '极光绿', color: '#52C41A' },
{ key: '拂晓蓝', color: '#1890FF' },
{ key: '极客蓝', color: '#2F54EB' },
{ key: '酱紫', color: '#722ED1' },
];
export default props => { export default props => {
const { visible, onClose, config, hasIntegerate, isEdit, onOk, submitting, productList } = props; const { visible, onClose, config, hasIntegerate, isEdit, onOk, submitting, productList } = props;
...@@ -30,7 +42,10 @@ export default props => { ...@@ -30,7 +42,10 @@ export default props => {
const [checkedList, setCheckedList] = useState([]); const [checkedList, setCheckedList] = useState([]);
const [indeterminate, setIndeterminate] = useState(false); const [indeterminate, setIndeterminate] = useState(false);
const [checkAll, setCheckAll] = useState(true); const [checkAll, setCheckAll] = useState(true);
const [displayColorPicker, setDisplayColorPicker] = useState(false);
const [color, setColor] = useState('');
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
const [showAdvanced, setShowAdvanced] = useState(false); // 是否显示高级设置
useEffect(() => { useEffect(() => {
onGetLoginPages(); onGetLoginPages();
console.log(isEdit); console.log(isEdit);
...@@ -65,16 +80,27 @@ export default props => { ...@@ -65,16 +80,27 @@ export default props => {
if (isEdit) { if (isEdit) {
// 获取表单回显 // 获取表单回显
console.log(config, 'config'); console.log(config, 'config');
form.setFieldsValue(config); form.setFieldsValue({
...config,
primaryColor: config.primaryColor ? config.primaryColor : '#1890FF',
navTheme: config.navTheme ? config.navTheme : 'light',
headerPrimaryColor: config.headerPrimaryColor ? config.headerPrimaryColor : '#1890FF',
});
setColor(config.headerPrimaryColor ? config.headerPrimaryColor : '#1890FF');
} else { } else {
setColor('#1890FF');
form.setFieldsValue({ form.setFieldsValue({
messageMarking: 'All', messageMarking: 'All',
messageVoice: true, messageVoice: true,
hideMap: false, hideMap: false,
loginTemplate: 'Default.html', loginTemplate: 'Default.html',
primaryColor: '#1890FF',
navTheme: 'light',
headerPrimaryColor: '#1890FF',
}); });
} }
} else { } else {
setShowAdvanced(false);
form.resetFields(); form.resetFields();
} }
}, [visible]); }, [visible]);
...@@ -124,6 +150,10 @@ export default props => { ...@@ -124,6 +150,10 @@ export default props => {
setIndeterminate(!!list.length && list.length < plainOptions.length); setIndeterminate(!!list.length && list.length < plainOptions.length);
setCheckAll(list.length === plainOptions.length); setCheckAll(list.length === plainOptions.length);
}; };
const colorChange = value => {
setColor(value.hex);
form.setFieldsValue({ headerPrimaryColor: value.hex });
};
return ( return (
<Drawer <Drawer
title={isEdit ? '查看/编辑网站配置' : '新增网站'} title={isEdit ? '查看/编辑网站配置' : '新增网站'}
...@@ -212,19 +242,18 @@ export default props => { ...@@ -212,19 +242,18 @@ export default props => {
> >
<Input autoComplete="off" disabled={isEdit} /> <Input autoComplete="off" disabled={isEdit} />
</Form.Item> </Form.Item>
<Form.Item name="topMenu" label="顶部功能"> <Form.Item label="登录模板" name="loginTemplate">
<Checkbox <Select placeholder="请选择登录模板">
indeterminate={indeterminate} {loginPages.map(item => (
onChange={onCheckAllChange} <Option value={item.value} key={item.value}>
checked={checkAll} {item.value}
style={{ marginTop: '5px', display: 'none' }} </Option>
> ))}
全选 </Select>
</Checkbox>
{/* <br />
<br /> */}
<CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
</Form.Item> </Form.Item>
<Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
主页配置
</Divider>
<Form.Item label="产品类型" name="productType"> <Form.Item label="产品类型" name="productType">
<Select placeholder="请选择主页产品类型"> <Select placeholder="请选择主页产品类型">
{productList.map(item => ( {productList.map(item => (
...@@ -237,15 +266,97 @@ export default props => { ...@@ -237,15 +266,97 @@ export default props => {
<Form.Item label="主页Url" name="homePage"> <Form.Item label="主页Url" name="homePage">
<Input placeholder="请输入主页路径" autoComplete="off" /> <Input placeholder="请输入主页路径" autoComplete="off" />
</Form.Item> </Form.Item>
<Form.Item label="登录模板" name="loginTemplate"> <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
<Select placeholder="请选择登录模板"> 主题配置
{loginPages.map(item => ( </Divider>
<Option value={item.value} key={item.value}> <Form.Item name="headerPrimaryColor" label="顶部">
{item.value} <div className={styles.colorBox}>
<div
className={styles.colorSwatch}
onClick={e => {
e.stopPropagation();
setDisplayColorPicker(!displayColorPicker);
}}
>
<div>{color}</div>
<div
style={{
backgroundColor: color,
height: '10px',
width: '10px',
margin: '10px 0 0 5px',
}}
/>
</div>
{displayColorPicker ? (
<div className={styles.popover}>
<div
onClick={() => setDisplayColorPicker(false)}
style={{
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
}}
/>
<SketchPicker color={color} onChange={e => colorChange(e)} width="230px" />
</div>
) : null}
</div>
</Form.Item>
<Form.Item name="navTheme" label="菜单">
<Select placeholder="请选择功能标签">
<Option value="light"></Option>
<Option value="dark"></Option>
</Select>
</Form.Item>
<Form.Item name="primaryColor" label="基础">
<Select placeholder="请选择颜色">
{colorList.map(item => (
<Option value={item.color} key={item.color}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div
style={{
height: '10px',
width: '10px',
background: item.color,
marginRight: '5px',
}}
/>
{`${item.key}${item.color})`}
</div>
</Option> </Option>
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item>
<Switch
checked={showAdvanced}
checkedChildren="高级设置"
unCheckedChildren="高级设置"
onChange={() => setShowAdvanced(!showAdvanced)}
/>
</Form.Item>
<div style={{ display: showAdvanced ? 'block' : 'none' }}>
<Form.Item name="topMenu" label="顶部功能">
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
style={{ marginTop: '5px', display: 'none' }}
>
全选
</Checkbox>
<CheckboxGroup
options={plainOptions}
value={checkedList}
checked={showAdvanced}
onChange={onChange}
/>
</Form.Item>
<Form.Item label="功能标签" name="mdi"> <Form.Item label="功能标签" name="mdi">
<Select placeholder="请选择功能标签"> <Select placeholder="请选择功能标签">
<Option value="MDI" key="0"> <Option value="MDI" key="0">
...@@ -296,6 +407,7 @@ export default props => { ...@@ -296,6 +407,7 @@ export default props => {
<Radio value={false}>关闭</Radio> <Radio value={false}>关闭</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
</div>
</Form> </Form>
</Drawer> </Drawer>
); );
......
.siteConfigContainer{ .siteConfigContainer {}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
// z-index: 1;
}
.colorBox {
.colorSwatch {
display: flex;
justify-content: center;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
border-radius: 2px;
}
.popover {
position: absolute;
z-index: 2;
}
} }
\ No newline at end of file
...@@ -260,7 +260,7 @@ const NewSelectUser = props => { ...@@ -260,7 +260,7 @@ const NewSelectUser = props => {
</div> </div>
{/* 复选框模块 */} {/* 复选框模块 */}
<div className={styles.checkScrollBox}> <div className={styles.checkScrollBox}>
<Spin spinning={loading}> {/* <Spin spinning={loading}> */}
<div className={styles.checkContainer}> <div className={styles.checkContainer}>
{allList.map((item, index) => ( {allList.map((item, index) => (
<div className={styles.checkBoxContent} key={item.groupId}> <div className={styles.checkBoxContent} key={item.groupId}>
...@@ -275,7 +275,7 @@ const NewSelectUser = props => { ...@@ -275,7 +275,7 @@ const NewSelectUser = props => {
</div> </div>
))} ))}
</div> </div>
</Spin> {/* </Spin> */}
</div> </div>
</div> </div>
<div className={styles.tableRight}> <div className={styles.tableRight}>
......
...@@ -70,10 +70,13 @@ ...@@ -70,10 +70,13 @@
.tableRight { .tableRight {
margin-left: 10px; margin-left: 10px;
height: 100%; height: 100%;
.ant-spin-nested-loading { .ant-spin-nested-loading {
height: 100%; height: 100%;
.ant-table { .ant-table {
height: 100%; height: 100%;
.ant-table-container { .ant-table-container {
height: 100%; height: 100%;
} }
......
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