Commit facaeff6 authored by 皮倩雯's avatar 皮倩雯

fix: '表字段字段配置界面样式修改'

parent 5f3f16f2
......@@ -168,6 +168,7 @@ const AddModal = props => {
const { TreeNode } = TreeSelect;
const [timeData, setTimeData] = useState('');
const { Option } = Select;
const [synchronization, setSynchronization] = useState('');
// 提交
const onSubmit = () => {
// 不切换树
......@@ -177,6 +178,12 @@ const AddModal = props => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
let aa = '';
if (synchronization == true) {
aa = 1;
} else {
aa = 0;
}
let data = [
{
Unit: obj.Unit || '',
......@@ -194,7 +201,7 @@ const AddModal = props => {
Order: pramData.Order,
Name: obj.Name,
Alias: obj.Alias,
SyncEvent: obj.SyncEvent,
SyncEvent: aa,
ValidationRule: obj.ValidationRule,
ExceptionEventFields: characterValue,
},
......@@ -358,6 +365,13 @@ const AddModal = props => {
setCharacterValue(res[0].data.root.ExceptionEventFields);
setCheckedList(res[0].data.root.ExceptionEventFields.split(','));
}
if (res[0].data.root.SyncEvent === 1) {
form.setFieldsValue({ SyncEvent: true });
setSynchronization(true);
} else {
form.setFieldsValue({ SyncEvent: false });
setSynchronization(false);
}
setShape(res[0].data.root.Shape);
console.log(res[0].data.root.Shape);
if (res[0].data.root.Shape == '文本') {
......@@ -632,6 +646,13 @@ const AddModal = props => {
setRadio('');
setRadio1('');
setRadio3('');
setPep('');
setCho('');
setCheckboxAll1('');
setCheckboxAllID1('');
setFlag(false);
setHide(true);
setSynchronization(false);
}
}, [isVisible]);
......@@ -958,6 +979,13 @@ const AddModal = props => {
setCharacterValue(aa.ExceptionEventFields);
setCheckedList(aa.ExceptionEventFields.split(','));
}
if (aa.SyncEvent === 1) {
form.setFieldsValue({ SyncEvent: true });
setSynchronization(true);
} else {
form.setFieldsValue({ SyncEvent: false });
setSynchronization(false);
}
setShape(aa.Shape);
if (aa.Shape == '文本') {
setDetail('输入内容将显示在前端输入框提示信息中');
......@@ -979,6 +1007,7 @@ const AddModal = props => {
setDetail('');
}
console.log(aa.Shape);
console.log(aa.Config);
let coordinates = false,
picture = false,
must = false;
......@@ -1216,6 +1245,13 @@ const AddModal = props => {
setCharacterValue(res[0].data.root.ExceptionEventFields);
setCheckedList(res[0].data.root.ExceptionEventFields.split(','));
}
if (res[0].data.root.SyncEvent === 1) {
form.setFieldsValue({ SyncEvent: true });
setSynchronization(true);
} else {
form.setFieldsValue({ SyncEvent: false });
setSynchronization(false);
}
setShape(res[0].data.root.Shape);
console.log(res[0].data.root.Shape);
let coordinates = false,
......@@ -1426,11 +1462,13 @@ const AddModal = props => {
});
}
if (res[0].data.root.Config.endsWith('.n')) {
form.setFieldsValue({ choose: true });
setCho(true);
} else {
console.log(111);
form.setFieldsValue({ choose: false });
setCho(false);
} else {
console.log(222);
form.setFieldsValue({ choose: true });
setCho(true);
}
break;
}
......@@ -1450,6 +1488,12 @@ const AddModal = props => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
let aa = '';
if (synchronization == true) {
aa = 1;
} else {
aa = 0;
}
let data = [
{
Unit: obj.Unit || '',
......@@ -1467,7 +1511,7 @@ const AddModal = props => {
Order: pramData.Order,
Name: obj.Name,
Alias: obj.Alias,
SyncEvent: obj.SyncEvent,
SyncEvent: aa,
ValidationRule: obj.ValidationRule,
ExceptionEventFields: characterValue,
},
......@@ -1605,6 +1649,7 @@ const AddModal = props => {
ShowConfig: '',
pepole: '',
choose: '',
SyncEvent: '',
});
setRadio(0);
setRadio3('0');
......@@ -1613,6 +1658,7 @@ const AddModal = props => {
setCho('');
setCheckboxAll1('');
setCheckboxAllID1('');
setSynchronization(false);
setFlag(false);
setHide(true);
if (i == 1.14) {
......@@ -1827,6 +1873,10 @@ const AddModal = props => {
setCheckboxAllID1(e.target.checked);
};
const changeSy = e => {
setSynchronization(e.target.checked);
};
return (
<>
<Drawer
......@@ -1898,15 +1948,19 @@ const AddModal = props => {
</div>
</Item>
<Item label="同步" name="SyncEvent" labelCol={{ span: 4 }}>
<Radio.Group>
<Checkbox checked={synchronization} onChange={changeSy}>
工单 → 事件
</Checkbox>
{/* <Radio.Group>
<Radio value={0} style={{ marginRight: '0.5rem' }}>
不同步
</Radio>
<Radio value={1} style={{ marginRight: '0.5rem' }}>
工单 → 事件
</Radio>
{/* <Radio value={2}>事件(上报时) → 工单</Radio> */}
</Radio.Group>
</Radio.Group> */}
{/* <Radio value={2}>事件(上报时) → 工单</Radio> */}
</Item>
<Row>
{/* <Col span={1} /> */}
......@@ -2270,8 +2324,8 @@ const AddModal = props => {
<Tooltip
title={
<>
<span>默认展示形式为下拉框</span>
<Image width={200} src={partImage} />
<span>弹窗显示人员所属机构</span>
<Image width={200} src={AllImage} />
</>
}
>
......@@ -2286,21 +2340,6 @@ const AddModal = props => {
</div>
}
>
<Tooltip
title={
<>
<span>展示形式为弹窗显示人员所属机构</span>
<Image width={200} src={AllImage} />
</>
}
>
<InfoCircleOutlined
style={{
color: 'rgb(24 144 255)',
marginRight: '5px',
}}
/>
</Tooltip>
<div style={{ display: 'inline-block', marginRight: '10px' }}>
<Item name="All1" style={{ marginBottom: '0' }}>
<Checkbox
......@@ -2342,7 +2381,7 @@ const AddModal = props => {
return (
<>
<Item
label="角色|机构"
label="过滤"
name="ConfigName"
labelCol={{ span: 4 }}
rules={[
......@@ -2369,7 +2408,7 @@ const AddModal = props => {
return (
<>
<Item
label="角色|机构"
label="过滤:"
name="Config"
labelCol={{ span: 4 }}
rules={[
......@@ -2445,11 +2484,7 @@ const AddModal = props => {
case '位置坐标':
return (
<Item label="字段名称" name="Config" labelCol={{ span: 4 }}>
<Input
allowClear
style={{ width: '93%' }}
placeholder="请输入坐标位置"
/>
<Input allowClear placeholder="请输入坐标位置" />
</Item>
);
case '地址':
......@@ -2512,7 +2547,7 @@ const AddModal = props => {
fontSize: '24px',
color: '#1890FF',
marginTop: '8px',
marginLeft: '-10px',
marginLeft: '-3px',
}}
/>
</Tooltip>
......
......@@ -587,7 +587,6 @@ const AddModal = props => {
}
};
const mapTree = org => {
console.log(org);
const haveChildren = Array.isArray(org.children) && org.children.length > 0;
return haveChildren ? (
<TreeNode value={org.name} title={org.name} disabled>
......
......@@ -10,10 +10,11 @@ import {
notification,
message,
Spin,
Tooltip,
Pagination,
} from 'antd';
import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
import { Chart, Interval, Line, Tooltip, Axis } from 'bizcharts';
// import { DataSet } from '@antv/data-set';
import { SwapRightOutlined, SyncOutlined, CaretUpFilled, CaretDownFilled } from '@ant-design/icons';
import { Chart, Interval, Line, Axis } from 'bizcharts';
import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index';
import styles from './index.less';
......@@ -26,14 +27,22 @@ const ServiceLog = () => {
const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
const [timeInterval, setTimeInterval] = useState('3'); // 时间间隔,1/2/3/4(每分钟/5分钟/小时/天),默认每小时
const [startTime, setStartTime] = useState(moment().startOf('week')); // 默认值,当天0点00:00:00
const [timeInterval, setTimeInterval] = useState('4'); // 时间间隔,1/2/3/4(每分钟/5分钟/小时/天),默认每小时
const [startTime, setStartTime] = useState(moment().startOf('month')); // 默认值,当天0点00:00:00
const [endTime, setEndTime] = useState(
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值,当前时间
);
const [logType, setLogType] = useState('9999'); // 请求参数,日志类型,默认是正常,0:成功 -1:异常 9999:全部
const [searchWord, setSearchWord] = useState(''); // 关键字
const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
const [total, setTotal] = useState();
const [pageSize, setPageSize] = useState(20);
const [currentPage, setCurrentPage] = useState(1);
const [show1, setShow1] = useState('block');
const [show2, setShow2] = useState('none');
const [keepType, setKeepType] = useState('');
const [keepOrder, setKeepOrder] = useState('');
// 计算时间间隔(分钟)
const start = new Date(startTime).getTime();
......@@ -77,10 +86,36 @@ const ServiceLog = () => {
render: item => searchStyle(item),
},
{
title: '调用时间',
dataIndex: 'CallTime',
key: 'CallTime',
width: 160,
title: (
<div>
录入时间
<Tooltip title="点击降序">
<CaretUpFilled
style={{
display: show1,
color: '#1890ff',
marginTop: '-13px',
marginLeft: '60%',
}}
onClick={() => shengxu(1)}
/>
</Tooltip>
<Tooltip title="点击升序">
<CaretDownFilled
style={{
display: show2,
color: '#1890ff',
marginTop: '-13px',
marginLeft: '60%',
}}
onClick={() => jiangxu(1)}
/>
</Tooltip>
</div>
),
},
// {
// title: 'IP',
......@@ -98,12 +133,20 @@ const ServiceLog = () => {
title: '异常信息',
dataIndex: 'ErrorMsg',
key: 'ErrorMsg',
render: record => {
if (!record) {
return '-';
}
return record;
},
onCell: () => ({
style: {
maxWidth: 300,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer',
},
}),
render: record => (
<Tooltip placement="topLeft" title={record}>
{record}
</Tooltip>
),
},
{
title: '请求方法',
......@@ -112,24 +155,149 @@ const ServiceLog = () => {
width: 100,
},
{
title: '耗时/ms',
dataIndex: 'ConsumerTime',
key: 'ConsumerTime',
width: 100,
defaultSortOrder: 'descend',
sortDirections: ['descend', 'ascend'],
sorter: (a, b) => a.ConsumerTime - b.ConsumerTime,
title: (
<div>
耗时/ms
<Tooltip title="点击降序">
<CaretUpFilled
style={{
display: show1,
color: '#1890ff',
marginTop: '-13px',
marginLeft: '60%',
}}
onClick={() => shengxu(2)}
/>
</Tooltip>
<Tooltip title="点击升序">
<CaretDownFilled
style={{
display: show2,
color: '#1890ff',
marginTop: '-13px',
marginLeft: '60%',
}}
onClick={() => jiangxu(2)}
/>
</Tooltip>
</div>
),
},
{
title: '返回体大小/byte',
dataIndex: 'ResponseSize',
key: 'ResponseSize',
width: 140,
sortDirections: ['descend', 'ascend'],
sorter: (a, b) => a.ResponseSize - b.ResponseSize,
},
];
const shengxu = e => {
setKeepType(e);
setKeepOrder('desc');
console.log(e);
setShow1('none');
setShow2('block');
setPageSize(20);
setCurrentPage(1);
setLoading(true);
post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, {
// 获取日志表数据时PageSize设置为200,其他接口默认值20
PageIndex: 1,
PageSize: 20,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '',
Module: searchWord,
LogType: +logType,
Description: '',
LoginName: '',
UserName: '',
StaticsType: +timeInterval,
sort: e == 1 ? 'callTime' : 'consumerTime',
order: 'desc',
})
.then(res => {
if (res.code === 0) {
if (!res.data) {
setDataTable([]);
} else {
const result = res.data.list;
setTotal(res.data.TotalCount);
setDataTable(
result.map((item, index) => {
item.key = index;
return item;
}),
);
}
} else {
notification.error({
message: '数据获取失败',
description: res.msg,
});
}
setLoading(false);
})
.catch(err => {
message.error(err);
setLoading(false);
});
};
const jiangxu = e => {
setKeepType(e);
setKeepOrder('asc');
setShow2('none');
setShow1('block');
setPageSize(20);
setCurrentPage(1);
setLoading(true);
post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, {
// 获取日志表数据时PageSize设置为200,其他接口默认值20
PageIndex: 1,
PageSize: 20,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '',
Module: searchWord,
LogType: +logType,
Description: '',
LoginName: '',
UserName: '',
StaticsType: +timeInterval,
sort: e == 1 ? 'callTime' : 'consumerTime',
order: 'asc',
})
.then(res => {
if (res.code === 0) {
if (!res.data) {
setDataTable([]);
} else {
const result = res.data.list;
setTotal(res.data.TotalCount);
setDataTable(
result.map((item, index) => {
item.key = index;
return item;
}),
);
}
} else {
notification.error({
message: '数据获取失败',
description: res.msg,
});
}
setLoading(false);
})
.catch(err => {
message.error(err);
setLoading(false);
});
};
// 模糊查询匹配的样式
const searchStyle = val => {
let n;
......@@ -184,7 +352,7 @@ const ServiceLog = () => {
post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
// 获取日志表数据时PageSize设置为200,其他接口默认值20
PageIndex: 1,
PageSize: url === '/GetOMSLog' ? 1000 : 20,
PageSize: 20,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '',
......@@ -201,6 +369,9 @@ const ServiceLog = () => {
set([]);
} else {
const result = url === '/GetOMSLog' ? res.data.list : res.data;
if (url === '/GetOMSLog') {
setTotal(res.data.TotalCount);
}
set(
result.map((item, index) => {
item.key = index;
......@@ -211,6 +382,74 @@ const ServiceLog = () => {
}),
);
}
setKeepType('');
setKeepOrder('');
setPageSize(20);
setCurrentPage(1);
} else {
notification.error({
message: '数据获取失败',
description: res.msg,
});
}
setLoading(false);
})
.catch(err => {
message.error(err);
setLoading(false);
});
};
const getData1 = (url, set, page, size) => {
console.log(keepType);
console.log(keepOrder);
let data = {};
if (keepType) {
data = {
PageIndex: page,
PageSize: size,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '',
Module: searchWord,
LogType: +logType,
Description: '',
LoginName: '',
UserName: '',
StaticsType: +timeInterval,
sort: keepType == 1 ? 'callTime' : 'consumerTime',
order: keepOrder,
};
} else {
data = {
PageIndex: page,
PageSize: size,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '',
Module: searchWord,
LogType: +logType,
Description: '',
LoginName: '',
UserName: '',
StaticsType: +timeInterval,
};
}
post(`${PUBLISH_SERVICE}/LogCenter${url}`, data)
.then(res => {
if (res.code === 0) {
if (!res.data) {
set([]);
} else {
const result = res.data.list;
setTotal(res.data.TotalCount);
set(
result.map((item, index) => {
item.key = index;
return item;
}),
);
}
} else {
notification.error({
message: '数据获取失败',
......@@ -252,12 +491,24 @@ const ServiceLog = () => {
};
const handleReset = () => {
setLogType('9999');
setTimeInterval('3');
setStartTime(moment().startOf('week'));
setTimeInterval('4');
setStartTime(moment().startOf('month'));
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setSearchWord('');
setShowSearchStyle(false);
};
const dayTime = () => {
let date = new Date();
return date.getDate() - 1;
};
// 监听分页
const paginationChange = (page, pageSizes) => {
getData1('/GetOMSLog', setDataTable, page, pageSizes);
setCurrentPage(page);
setPageSize(pageSizes);
};
return (
<>
<div className={styles.serviceLog}>
......@@ -287,6 +538,7 @@ const ServiceLog = () => {
<Button onClick={() => setTime(12 * 60, '3')}>近12小时</Button>
<Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
<Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
<Button onClick={() => setTime(24 * dayTime() * 60, '4')}>本月</Button>
<span style={{ marginLeft: '20px' }}>返回状态:</span>
<Select
defaultValue="全部"
......@@ -418,16 +670,22 @@ const ServiceLog = () => {
bordered
columns={columns}
dataSource={dataTable}
scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }}
pagination={{
showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20,
showQuickJumper: true,
showSizeChanger: true,
}}
scroll={{ x: 'max-content', y: 'calc(100vh - 565px)' }}
pagination={false}
/>
</div>
<Pagination
style={{ display: 'flex', justifyContent: 'end', padding: '10px' }}
total={total}
showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`}
defaultPageSize={pageSize}
defaultCurrent={1}
pageSizeOptions={[10, 20, 40, 100]}
current={currentPage}
onChange={paginationChange}
size="small"
showQuickJumper
/>
</Spin>
</div>
</>
......
.serviceLog{
.head{
padding: 10px;
background: white;
margin-bottom: 2px;
min-width: 1030px;
.serviceLog {
.head {
padding: 10px;
background: white;
margin-bottom: 2px;
min-width: 1030px;
}
.foot {
padding: 10px;
background: white;
font-size: 20px;
}
.table {
border-top: 1px solid #f0eded;
// overflow: auto;//不要这个,pagination否则无法固定底部
.ant-table-thead tr th {
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
background-color: #f6f9fe;
}
.chart{
padding: 10px;
background: white;
font-size:20px;
.ant-table-body {
height: calc(100vh - 565px);
border-right: white;
overflow: auto !important;
}
.table{
border-top: 1px solid #f0eded;
// overflow: auto;//不要这个,pagination否则无法固定底部
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
background-color:#F6F9FE;
}
.ant-table-body{
height:calc(100vh - 580px);
border-right: white;
overflow: auto !important;
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table-pagination{
padding-right: 12px;
background: white;
margin: 1px 0;
padding:8px;
padding-right: 20px;
}
.ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last{
border-right: 1px solid #DBE7FB !important;
}
.ant-table.ant-table-small {
width: 99%;
margin: 10px auto;
}
.ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last{
border: 1px solid #DBE7FB;
}
.ant-pagination {
z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-spin-container {
background-color: white;
}
.fontColor{
font-weight: 600;
.ant-table-pagination {
padding-right: 12px;
background: white;
margin: 1px 0;
padding: 8px;
padding-right: 20px;
}
.icon{
margin-top: -5px !important;
vertical-align: text-bottom;
.ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last {
border-right: 1px solid #dbe7fb !important;
}
.sel{
width: 100px;
.ant-table.ant-table-small {
width: 99%;
margin: 10px auto;
}
}
\ No newline at end of file
.ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last {
border: 1px solid #dbe7fb;
}
}
.ant-spin-container {
background-color: white;
}
.fontColor {
font-weight: 600;
}
.icon {
// margin-top: -5px !important;
vertical-align: text-bottom;
}
.sel {
width: 100px;
}
}
.ant-table-column-sorter-up + .ant-table-column-sorter-down {
margin-top: 0;
}
.ant-select-arrow .anticon > svg {
vertical-align: middle;
}
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