Merge remote-tracking branch 'origin/feature/2.0'
Lei OT
2 years ago
commit
e5ac09e030
@ -0,0 +1,53 @@
|
|||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Line } from '@ant-design/plots';
|
||||||
|
import { merge, isEmpty } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from '../libs/ht';
|
||||||
|
|
||||||
|
const uniqueByKey = (array, key, pickLast) => {
|
||||||
|
const seen = new Map();
|
||||||
|
const isPickLast = pickLast === true;
|
||||||
|
|
||||||
|
return array.filter(item => {
|
||||||
|
const k = item[key];
|
||||||
|
const storedItem = seen.get(k);
|
||||||
|
|
||||||
|
if(storedItem) {
|
||||||
|
if(isPickLast) {
|
||||||
|
seen.set(k, item); // update with last item
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
seen.set(k, item);
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { config, dataSource, ...extProps } = props;
|
||||||
|
const kpiKey = dataFieldAlias[config.yField]?.nestkey?.v;
|
||||||
|
const _data = dataSource.reduce((r, v) => {
|
||||||
|
r.push(v);
|
||||||
|
if ( ! isEmpty(v[kpiKey])) { // 有设目标才多显示一条虚线 颜色: #F4664A
|
||||||
|
r.push({...v, [config.yField]: v[kpiKey], [config.seriesField]: dataFieldAlias[kpiKey].label, extraLine: true,});
|
||||||
|
}
|
||||||
|
return r;
|
||||||
|
}, []);
|
||||||
|
const mergeLineConfig = merge({
|
||||||
|
color: ['#598cf3', '#F4664A', '#FAAD14'],
|
||||||
|
lineStyle: (data) => {
|
||||||
|
// console.log(data);
|
||||||
|
if (data[config.seriesField].includes('目标')) {
|
||||||
|
return {
|
||||||
|
lineDash: [4, 4],
|
||||||
|
opacity: 0.5,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
opacity: 1,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}, config);
|
||||||
|
return <Line {...mergeLineConfig} data={_data} />;
|
||||||
|
});
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { sortBy, merge } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from '../libs/ht';
|
||||||
|
import { Mix, Scatter } from '@ant-design/plots';
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { dataSource, ...extProps } = props;
|
||||||
|
const config = merge(
|
||||||
|
{
|
||||||
|
appendPadding: 10,
|
||||||
|
// xField: 'Revenue (Millions)',
|
||||||
|
// yField: 'Rating',
|
||||||
|
shape: 'circle',
|
||||||
|
// colorField: 'Genre',
|
||||||
|
size: 4,
|
||||||
|
yAxis: {
|
||||||
|
nice: true,
|
||||||
|
line: {
|
||||||
|
style: {
|
||||||
|
stroke: '#aaa',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
min: -100,
|
||||||
|
grid: {
|
||||||
|
line: {
|
||||||
|
style: {
|
||||||
|
stroke: '#eee',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
line: {
|
||||||
|
style: {
|
||||||
|
stroke: '#aaa',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}, extProps);
|
||||||
|
return <Scatter {...config} data={dataSource} />;
|
||||||
|
});
|
||||||
@ -1,23 +1,22 @@
|
|||||||
import { useContext } from 'react';
|
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
// import { stores_Context } from '../config';
|
|
||||||
import { Table } from 'antd';
|
|
||||||
import KPISettings from './KPISettings';
|
import KPISettings from './KPISettings';
|
||||||
import { bu, KPISubjects } from '../../libs/ht';
|
import { bu, KPISubjects } from '../../libs/ht';
|
||||||
|
|
||||||
|
const sort = { DateType: 10, years: 11 };
|
||||||
|
const yearInitial = {};
|
||||||
const searchFormItemSet = {
|
const searchFormItemSet = {
|
||||||
'bu': { shows: ['DateType', 'years', 'HTBusinessUnits'] },
|
'bu': { shows: ['DateType', 'years', 'HTBusinessUnits'], sort },
|
||||||
'dept': { shows: ['DateType', 'years', 'DepartmentList'], fieldProps: { DepartmentList: { allowClear: true } } },
|
'dept': { shows: ['DateType', 'years', 'DepartmentList'], sort, fieldProps: { DepartmentList: { allowClear: true,isLeaf: true, show_all: false } }, },
|
||||||
'operator': { shows: ['DateType', 'years', 'DepartmentList'] }, // , 'operator'
|
'operator': { shows: ['DateType', 'years', 'DepartmentList', 'operator'], fieldProps: { DepartmentList: { allowClear: true, isLeaf: true }, operator: { param: { is_assign: 1 } } }, sort },
|
||||||
'destination': { shows: ['DateType', 'years', 'destination'] },
|
'destination': { shows: ['DateType', 'years', 'destination'], sort },
|
||||||
'country': { shows: ['DateType', 'years', 'country'] },
|
'country': { shows: ['DateType', 'years', 'country'], sort },
|
||||||
};
|
};
|
||||||
|
|
||||||
export default observer((props) => {
|
export default observer((props) => {
|
||||||
const searchProps = searchFormItemSet?.[props.curObject] || {};
|
const searchProps = searchFormItemSet?.[props.curObject] || {};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<KPISettings {...{ searchProps, objects: bu, KPISubjects }} {...props} />
|
<KPISettings {...{ searchProps, KPISubjects }} {...props} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,263 @@
|
|||||||
|
import { useContext, useState, useEffect, useMemo } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { stores_Context } from '../../../config';
|
||||||
|
import { Button, Switch, Input, Space, Typography, Row, Col, message } from 'antd';
|
||||||
|
import { EditableProTable } from '@ant-design/pro-components';
|
||||||
|
import { KPIObjects } from '../../../libs/ht';
|
||||||
|
import { isEmpty, fixTo2Decimals, fixTo4Decimals, cloneDeep, numberFormatter, fixToInt } from '../../../utils/commons';
|
||||||
|
|
||||||
|
export const KPIObjectsMapped = KPIObjects.reduce((a, c) => ({ ...a, [String(c.key)]: c }), {});
|
||||||
|
const { Text } = Typography;
|
||||||
|
const initialPercentKey = new Array(12).fill(1).reduce((r, v, i) => ({ ...r, [`M${i + 1}Percent`]: [8, 9].includes(i) ? 10 : 8 }), {});
|
||||||
|
const numberConvert10K = (number, scale = 1) => {
|
||||||
|
return fixTo2Decimals(number / (1000 * scale)) + 'K';
|
||||||
|
};
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { KPIStore, date_picker_store: searchFormStore } = useContext(stores_Context);
|
||||||
|
const { curObject, objects, onSearchSubmit } = props;
|
||||||
|
const curObjectItem = KPIObjectsMapped[curObject];
|
||||||
|
|
||||||
|
const [dataSource, setDataSource] = useState(KPIStore.pageData);
|
||||||
|
const [editOpen, setEditOpen] = useState(false);
|
||||||
|
const [editableRowsKeys, setEditableRowKeys] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
setDataSource(KPIStore.pageData);
|
||||||
|
setEditableRowKeys([]);
|
||||||
|
setEditOpen(false);
|
||||||
|
return () => {};
|
||||||
|
}, [KPIStore.pageData]);
|
||||||
|
|
||||||
|
const PercentInput = useMemo(
|
||||||
|
() =>
|
||||||
|
// eslint-disable-next-line react/display-name
|
||||||
|
({ value, onChange, record, ...extProps }) => {
|
||||||
|
// // eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
|
const [inputValue, setInputValue] = useState(value);
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
setInputValue(e.target.value);
|
||||||
|
onChange?.(e.target.value);
|
||||||
|
};
|
||||||
|
const calcV = inputValue ? numberConvert10K(fixToInt((Number(record?.yearValue) * inputValue) / 100)) : 0;
|
||||||
|
return (
|
||||||
|
<Space direction={'vertical'}>
|
||||||
|
<Input key={'input'} suffix="%" type={'number'} value={inputValue} onChange={handleInputChange} step={0.1} />
|
||||||
|
<Text type={'secondary'}>{calcV}</Text>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const RenderMonthCell = (row, mon) => {
|
||||||
|
return (
|
||||||
|
<Space direction={'vertical'}>
|
||||||
|
<div>
|
||||||
|
{fixTo2Decimals(row?.[`M${mon}Percent`])}
|
||||||
|
<span>%</span>
|
||||||
|
</div>
|
||||||
|
<div>{numberConvert10K(fixTo4Decimals((Number(row?.yearValue) * row?.[`M${mon}Percent`]) / 100))}</div>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const monthCol = new Array(12).fill(1).map((_, index) => {
|
||||||
|
return {
|
||||||
|
title: `${index + 1}月`,
|
||||||
|
dataIndex: `M${index + 1}Percent`,
|
||||||
|
valueType: 'digit',
|
||||||
|
width: '6.5em',
|
||||||
|
// fieldProps: { min: 0, max: 100, style: { width: '4em' } },
|
||||||
|
renderFormItem: ({ dataIndex, ...item }, { record, isEditable, ...e }, form) => {
|
||||||
|
return <PercentInput {...{ record }} month={index + 1} key={`M${index + 1}`} />;
|
||||||
|
},
|
||||||
|
render: (_, row) => RenderMonthCell(row, index + 1),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: curObjectItem.label,
|
||||||
|
dataIndex: 'object_id',
|
||||||
|
editable: false,
|
||||||
|
render: (_, r) => r.object_name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '年度目标',
|
||||||
|
dataIndex: 'yearValue',
|
||||||
|
valueType: 'digit',
|
||||||
|
fieldProps: { style: { width: '100%' }, step: 10000 * 1 },
|
||||||
|
formItemProps: {
|
||||||
|
style: { width: '100%' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
...monthCol,
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<Space>
|
||||||
|
<span>操作</span>
|
||||||
|
<Switch
|
||||||
|
unCheckedChildren="查看"
|
||||||
|
checkedChildren="编辑"
|
||||||
|
key={'openEdit'}
|
||||||
|
// defaultChecked={true}
|
||||||
|
checked={editOpen}
|
||||||
|
onChange={(e) => {
|
||||||
|
makeInitialTable(e);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
valueType: 'option',
|
||||||
|
// width: 250,
|
||||||
|
render: () => {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const onTableChange = (...argrs) => {
|
||||||
|
setEditableRowKeys(argrs[0].map((ele) => ele.key));
|
||||||
|
setDataSource(argrs[0]);
|
||||||
|
};
|
||||||
|
const onTableSubmit = () => {
|
||||||
|
const tableData = dataSource.reduce((r, curObj) => {
|
||||||
|
const allMonth = new Array(12).fill(1).map((_, index) => {
|
||||||
|
const mIndex = index + 1;
|
||||||
|
const mVal = (Number(curObj.yearValue) * Number(curObj[`M${mIndex}Percent`])) / 100;
|
||||||
|
const startM = moment([KPIStore.settingYear, index, 1]);
|
||||||
|
const pick = (({ object, object_name, object_id, subject, date_type }) => ({
|
||||||
|
object,
|
||||||
|
object_name,
|
||||||
|
object_id,
|
||||||
|
subject,
|
||||||
|
date_type,
|
||||||
|
}))(curObj);
|
||||||
|
return {
|
||||||
|
...pick,
|
||||||
|
start_date: startM.format('YYYY-MM-DD'),
|
||||||
|
end_date: startM.endOf('M').format('YYYY-MM-DD HH:mm'),
|
||||||
|
value: mVal,
|
||||||
|
kpi_id: curObj.kpiDataMapped?.[`M${mIndex}`]?.kpi_id || undefined,
|
||||||
|
key: undefined,
|
||||||
|
group_date_type: 'month',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const yearRow = (({ object, object_name, object_id, subject, date_type, yearValue, kpiYear }) => ({
|
||||||
|
object,
|
||||||
|
object_name,
|
||||||
|
object_id,
|
||||||
|
subject,
|
||||||
|
date_type,
|
||||||
|
value: yearValue,
|
||||||
|
start_date: moment([KPIStore.settingYear, 0, 1]).format('YYYY-MM-DD'),
|
||||||
|
end_date: moment([KPIStore.settingYear, 11, 1]).endOf('M').format('YYYY-MM-DD HH:mm'),
|
||||||
|
kpi_id: kpiYear?.kpi_id || undefined,
|
||||||
|
group_date_type: 'year',
|
||||||
|
}))(curObj);
|
||||||
|
return r.concat(allMonth, yearRow);
|
||||||
|
}, []);
|
||||||
|
// console.log('sub', tableData, 'del:', delKpiIds);
|
||||||
|
// return false; // debug:
|
||||||
|
KPIStore.onSubmit(tableData, { delQueue: delKpiIds }).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
message.success('保存成功');
|
||||||
|
setEditOpen(false);
|
||||||
|
setEditableRowKeys([]);
|
||||||
|
setDelKpiIds([]);
|
||||||
|
onSearchSubmit(searchFormStore.formValuesToSub);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
message.error('失败, 请重试');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const initialRow = monthCol.reduce(
|
||||||
|
(r, v) => ({
|
||||||
|
...r,
|
||||||
|
[v.dataIndex]: 0,
|
||||||
|
yearValue: 10000 * 1,
|
||||||
|
object: curObject,
|
||||||
|
object_name: '',
|
||||||
|
object_id: -1,
|
||||||
|
subject: KPIStore.settingSubject,
|
||||||
|
date_type: searchFormStore.formValuesToSub.DateType,
|
||||||
|
kpiDataMapped: {},
|
||||||
|
key: Date.now().toString(32),
|
||||||
|
group_date_type: 'month',
|
||||||
|
}),
|
||||||
|
{}
|
||||||
|
); // v.formItemProps.initialValue
|
||||||
|
const makeInitialTable = (e) => {
|
||||||
|
setEditOpen(e);
|
||||||
|
// test: 单独设置之后, 清空筛选会导致无法批量设置新的
|
||||||
|
const _initialRow = Object.assign({}, initialRow, initialPercentKey);
|
||||||
|
const _objects = isEmpty(objects) ? curObjectItem?.data || [] : objects;
|
||||||
|
const _initialTable = _objects.map((obj) => ({
|
||||||
|
...cloneDeep(_initialRow),
|
||||||
|
object_name: obj.label,
|
||||||
|
object_id: obj.value,
|
||||||
|
key: Date.now().toString(32) + obj.value,
|
||||||
|
}));
|
||||||
|
const mergePageData = Object.values(
|
||||||
|
Object.assign(
|
||||||
|
{},
|
||||||
|
_initialTable.reduce((r, v) => ({ ...r, [v.object_name]: v }), {}),
|
||||||
|
dataSource.reduce((r, v) => ({ ...r, [v.object_name]: v }), {})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
if (e && isEmpty(dataSource)) {
|
||||||
|
setDataSource(_initialTable);
|
||||||
|
setEditableRowKeys(_initialTable.map((ele) => ele.key));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
setDataSource(mergePageData);
|
||||||
|
setEditableRowKeys(e ? mergePageData.map((ele) => ele.key) : []);
|
||||||
|
};
|
||||||
|
const [delKpiIds, setDelKpiIds] = useState([]);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={16} className="mb-1 ">
|
||||||
|
<Col className="gutter-row mb-n1 p-none" span={24}>
|
||||||
|
<EditableProTable
|
||||||
|
key={KPIStore.settingYear}
|
||||||
|
// headerTitle={`毛利`}
|
||||||
|
columns={columns}
|
||||||
|
rowKey="key"
|
||||||
|
scroll={{
|
||||||
|
x: 1000,
|
||||||
|
}}
|
||||||
|
value={dataSource}
|
||||||
|
onChange={onTableChange}
|
||||||
|
recordCreatorProps={false}
|
||||||
|
editable={{
|
||||||
|
type: 'multiple',
|
||||||
|
editableKeys: editableRowsKeys,
|
||||||
|
actionRender: (row, config, defaultDoms) => {
|
||||||
|
return [defaultDoms.delete];
|
||||||
|
},
|
||||||
|
onDelete: (_key, _row) => {
|
||||||
|
const rowKpiIds = (_row?.kpiData || []).map((ele) => ele.kpi_id);
|
||||||
|
rowKpiIds.push(_row?.kpiYear?.kpi_id);
|
||||||
|
setDelKpiIds(rowKpiIds);
|
||||||
|
},
|
||||||
|
onValuesChange: (record, recordList) => {
|
||||||
|
onTableChange(recordList);
|
||||||
|
},
|
||||||
|
onChange: (editableKeys, editableRows) => {
|
||||||
|
setEditableRowKeys(editableKeys);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col className="gutter-row mb-n1 p-none mt-1 align_center" span={24}>
|
||||||
|
<Space size={'large'}>
|
||||||
|
<Button className="mt-1 mb-1 align_center" disabled={!editOpen} type="primary" key="save" onClick={onTableSubmit}>
|
||||||
|
保存数据
|
||||||
|
</Button>
|
||||||
|
{!editOpen && <Button className="mt-1 mb-1 align_center" disabled={false} type={'ghost'} key="initTable" onClick={() => {makeInitialTable(true);}}>
|
||||||
|
编辑设置
|
||||||
|
</Button>}
|
||||||
|
</Space>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,263 @@
|
|||||||
|
import { useContext, useState, useEffect, useMemo } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { stores_Context } from '../../../config';
|
||||||
|
import { Button, Switch, Input, Space, Typography, Row, Col, message } from 'antd';
|
||||||
|
import { EditableProTable } from '@ant-design/pro-components';
|
||||||
|
import { KPIObjects } from '../../../libs/ht';
|
||||||
|
import { isEmpty, fixTo2Decimals, fixTo4Decimals, cloneDeep, numberFormatter, fixToInt } from '../../../utils/commons';
|
||||||
|
|
||||||
|
export const KPIObjectsMapped = KPIObjects.reduce((a, c) => ({ ...a, [String(c.key)]: c }), {});
|
||||||
|
const { Text } = Typography;
|
||||||
|
const initialPercentKey = new Array(12).fill(1).reduce((r, v, i) => ({ ...r, [`M${i + 1}Val`]: [8, 9].includes(i) ? 10 : 8 }), {});
|
||||||
|
const numberConvert10K = (number, scale = 1) => {
|
||||||
|
return fixTo2Decimals(number / (1000 * scale)) + 'K';
|
||||||
|
};
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { KPIStore, date_picker_store: searchFormStore } = useContext(stores_Context);
|
||||||
|
const { curObject, objects, onSearchSubmit } = props;
|
||||||
|
const curObjectItem = KPIObjectsMapped[curObject];
|
||||||
|
|
||||||
|
const [dataSource, setDataSource] = useState(KPIStore.pageData);
|
||||||
|
const [editOpen, setEditOpen] = useState(false);
|
||||||
|
const [editableRowsKeys, setEditableRowKeys] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
// console.log(KPIStore.pageData);
|
||||||
|
setDataSource(KPIStore.pageData);
|
||||||
|
setEditableRowKeys([]);
|
||||||
|
setEditOpen(false);
|
||||||
|
return () => {};
|
||||||
|
}, [KPIStore.pageData]);
|
||||||
|
|
||||||
|
const PercentInput = useMemo(
|
||||||
|
() =>
|
||||||
|
// eslint-disable-next-line react/display-name
|
||||||
|
({ value, onChange, record, ...extProps }) => {
|
||||||
|
// // eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
|
const [inputValue, setInputValue] = useState(value);
|
||||||
|
const handleInputChange = (e) => {
|
||||||
|
setInputValue(e.target.value);
|
||||||
|
onChange?.(e.target.value);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Input key={'input'} suffix="%" type={'number'} value={inputValue} onChange={handleInputChange} step={0.1} />
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const RenderMonthCell = (row, mon) => {
|
||||||
|
return (
|
||||||
|
<Space direction={'vertical'}>
|
||||||
|
<div>
|
||||||
|
{fixTo2Decimals(row?.[`M${mon}Val`])}
|
||||||
|
<span>%</span>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const monthCol = new Array(12).fill(1).map((_, index) => {
|
||||||
|
return {
|
||||||
|
title: `${index + 1}月`,
|
||||||
|
dataIndex: `M${index + 1}Val`,
|
||||||
|
valueType: 'digit',
|
||||||
|
width: '6.5em',
|
||||||
|
// fieldProps: { min: 0, max: 100, style: { width: '4em' } },
|
||||||
|
renderFormItem: ({ dataIndex, ...item }, { record, isEditable, ...e }, form) => {
|
||||||
|
return <PercentInput {...{ record }} month={index + 1} key={`M${index + 1}`} />;
|
||||||
|
},
|
||||||
|
render: (_, row) => RenderMonthCell(row, index + 1),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: curObjectItem.label,
|
||||||
|
dataIndex: 'object_id',
|
||||||
|
editable: false,
|
||||||
|
render: (_, r) => r.object_name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '年度目标',
|
||||||
|
dataIndex: 'yearValue',
|
||||||
|
valueType: 'percent',
|
||||||
|
formItemProps: {
|
||||||
|
style: { width: '100%' },
|
||||||
|
},
|
||||||
|
renderFormItem: () => <PercentInput />
|
||||||
|
},
|
||||||
|
...monthCol,
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<Space>
|
||||||
|
<span>操作</span>
|
||||||
|
<Switch
|
||||||
|
unCheckedChildren="查看"
|
||||||
|
checkedChildren="编辑"
|
||||||
|
key={'openEdit'}
|
||||||
|
// defaultChecked={true}
|
||||||
|
checked={editOpen}
|
||||||
|
onChange={(e) => {
|
||||||
|
makeInitialTable(e);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
valueType: 'option',
|
||||||
|
// width: 250,
|
||||||
|
render: () => {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const onTableChange = (...argrs) => {
|
||||||
|
setEditableRowKeys(argrs[0].map((ele) => ele.key));
|
||||||
|
setDataSource(argrs[0]);
|
||||||
|
};
|
||||||
|
const onTableSubmit = () => {
|
||||||
|
const tableData = dataSource.reduce((r, curObj) => {
|
||||||
|
const allMonth = new Array(12).fill(1).map((_, index) => {
|
||||||
|
const mIndex = index + 1;
|
||||||
|
// const mVal = (Number(curObj.yearValue) * Number(curObj[`M${mIndex}Percent`])) / 100;
|
||||||
|
const mVal = Number(curObj[`M${mIndex}Val`]);
|
||||||
|
const startM = moment([KPIStore.settingYear, index, 1]);
|
||||||
|
const pick = (({ object, object_name, object_id, subject, date_type }) => ({
|
||||||
|
object,
|
||||||
|
object_name,
|
||||||
|
object_id,
|
||||||
|
subject,
|
||||||
|
date_type,
|
||||||
|
}))(curObj);
|
||||||
|
return {
|
||||||
|
...pick,
|
||||||
|
start_date: startM.format('YYYY-MM-DD'),
|
||||||
|
end_date: startM.endOf('M').format('YYYY-MM-DD HH:mm'),
|
||||||
|
value: mVal,
|
||||||
|
kpi_id: curObj.kpiDataMapped?.[`M${mIndex}`]?.kpi_id || undefined,
|
||||||
|
key: undefined,
|
||||||
|
group_date_type: 'month',
|
||||||
|
unit: '%',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const yearRow = (({ object, object_name, object_id, subject, date_type, yearValue, kpiYear }) => ({
|
||||||
|
object,
|
||||||
|
object_name,
|
||||||
|
object_id,
|
||||||
|
subject,
|
||||||
|
date_type,
|
||||||
|
value: yearValue,
|
||||||
|
start_date: moment([KPIStore.settingYear, 0, 1]).format('YYYY-MM-DD'),
|
||||||
|
end_date: moment([KPIStore.settingYear, 11, 1]).endOf('M').format('YYYY-MM-DD HH:mm'),
|
||||||
|
kpi_id: kpiYear?.kpi_id || undefined,
|
||||||
|
group_date_type: 'year',
|
||||||
|
unit: '%',
|
||||||
|
}))(curObj);
|
||||||
|
return r.concat(allMonth, yearRow);
|
||||||
|
}, []);
|
||||||
|
// console.log('sub', tableData, 'del:', delKpiIds);
|
||||||
|
// return false; // debug:
|
||||||
|
KPIStore.onSubmit(tableData, { delQueue: delKpiIds }).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
message.success('保存成功');
|
||||||
|
setEditOpen(false);
|
||||||
|
setEditableRowKeys([]);
|
||||||
|
setDelKpiIds([]);
|
||||||
|
onSearchSubmit(searchFormStore.formValuesToSub);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
message.error('失败, 请重试');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const initialRow = monthCol.reduce(
|
||||||
|
(r, v) => ({
|
||||||
|
...r,
|
||||||
|
[v.dataIndex]: 0,
|
||||||
|
yearValue: 15,
|
||||||
|
object: curObject,
|
||||||
|
object_name: '',
|
||||||
|
object_id: -1,
|
||||||
|
subject: KPIStore.settingSubject,
|
||||||
|
date_type: searchFormStore.formValuesToSub.DateType,
|
||||||
|
kpiDataMapped: {},
|
||||||
|
key: Date.now().toString(32),
|
||||||
|
group_date_type: 'month',
|
||||||
|
unit: '%',
|
||||||
|
}),
|
||||||
|
{}
|
||||||
|
); // v.formItemProps.initialValue
|
||||||
|
const makeInitialTable = (e) => {
|
||||||
|
setEditOpen(e);
|
||||||
|
// test: 单独设置之后, 清空筛选会导致无法批量设置新的
|
||||||
|
const _initialRow = Object.assign({}, initialRow, initialPercentKey);
|
||||||
|
const _objects = isEmpty(objects) ? curObjectItem?.data || [] : objects;
|
||||||
|
const _initialTable = _objects.map((obj) => ({
|
||||||
|
...cloneDeep(_initialRow),
|
||||||
|
object_name: obj.label,
|
||||||
|
object_id: obj.value,
|
||||||
|
key: Date.now().toString(32) + obj.value,
|
||||||
|
}));
|
||||||
|
const mergePageData = Object.values(
|
||||||
|
Object.assign(
|
||||||
|
{},
|
||||||
|
_initialTable.reduce((r, v) => ({ ...r, [v.object_name]: v }), {}),
|
||||||
|
dataSource.reduce((r, v) => ({ ...r, [v.object_name]: v }), {})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
if (e && isEmpty(dataSource)) {
|
||||||
|
setDataSource(_initialTable);
|
||||||
|
setEditableRowKeys(_initialTable.map((ele) => ele.key));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
setDataSource(mergePageData);
|
||||||
|
setEditableRowKeys(e ? mergePageData.map((ele) => ele.key) : []);
|
||||||
|
};
|
||||||
|
const [delKpiIds, setDelKpiIds] = useState([]);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={16} className="mb-1 ">
|
||||||
|
<Col className="gutter-row mb-n1 p-none" span={24}>
|
||||||
|
<EditableProTable
|
||||||
|
key={KPIStore.settingYear}
|
||||||
|
// headerTitle={`毛利`}
|
||||||
|
columns={columns}
|
||||||
|
rowKey="key"
|
||||||
|
scroll={{
|
||||||
|
x: 1000,
|
||||||
|
}}
|
||||||
|
value={dataSource}
|
||||||
|
onChange={onTableChange}
|
||||||
|
recordCreatorProps={false}
|
||||||
|
editable={{
|
||||||
|
type: 'multiple',
|
||||||
|
editableKeys: editableRowsKeys,
|
||||||
|
actionRender: (row, config, defaultDoms) => {
|
||||||
|
return [defaultDoms.delete];
|
||||||
|
},
|
||||||
|
onDelete: (_key, _row) => {
|
||||||
|
const rowKpiIds = (_row?.kpiData || []).map((ele) => ele.kpi_id);
|
||||||
|
rowKpiIds.push(_row?.kpiYear?.kpi_id);
|
||||||
|
setDelKpiIds(rowKpiIds);
|
||||||
|
},
|
||||||
|
onValuesChange: (record, recordList) => {
|
||||||
|
onTableChange(recordList);
|
||||||
|
},
|
||||||
|
onChange: (editableKeys, editableRows) => {
|
||||||
|
setEditableRowKeys(editableKeys);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col className="gutter-row mb-n1 p-none mt-1 align_center" span={24}>
|
||||||
|
<Space size={'large'}>
|
||||||
|
<Button className="mt-1 mb-1 align_center" disabled={!editOpen} type="primary" key="save" onClick={onTableSubmit}>
|
||||||
|
保存数据
|
||||||
|
</Button>
|
||||||
|
{!editOpen && <Button className="mt-1 mb-1 align_center" disabled={false} type={'ghost'} key="initTable" onClick={() => {makeInitialTable(true);}}>
|
||||||
|
编辑设置
|
||||||
|
</Button>}
|
||||||
|
</Space>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
import { makeAutoObservable, runInAction, toJS } from 'mobx';
|
||||||
|
import * as req from '../utils/request';
|
||||||
|
import { isEmpty, pick, sortBy } from '../utils/commons';
|
||||||
|
|
||||||
|
const modelMapper = {
|
||||||
|
'tourDays': { url: '/service-Analyse2/GetTradeApartByTourDays' },
|
||||||
|
'PML': { url: '/service-Analyse2/GetTradeApartByPML' },
|
||||||
|
'ConfirmDays': { url: '/service-Analyse2/GetTradeApartByConfirmDays' },
|
||||||
|
'ApplyDays': { url: '/service-Analyse2/GetTradeApartByApplyDays' },
|
||||||
|
'PersonNum': { url: '/service-Analyse2/GetTradeApartByPersonNum' },
|
||||||
|
'destination': { url: '/service-Analyse2/GetTradeApartByDestination' },
|
||||||
|
'GlobalDestination': { url: '/service-Analyse2/GetTradeApartByGlobalDestination' },
|
||||||
|
};
|
||||||
|
class Distribution {
|
||||||
|
constructor(appStore){
|
||||||
|
this.appStore = appStore;
|
||||||
|
makeAutoObservable(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 各个类型的分布
|
||||||
|
*/
|
||||||
|
getApartData = async (param) => {
|
||||||
|
const mkey = this.curTab;
|
||||||
|
this[mkey] = { loading: true, dataSource: [] };
|
||||||
|
const json = await req.fetchJSON(modelMapper[mkey].url, param);
|
||||||
|
if (json.errcode === 0) {
|
||||||
|
runInAction(() => {
|
||||||
|
const dataLength = json.result.length;
|
||||||
|
this[mkey].loading = false;
|
||||||
|
this[mkey].originData = json.result;
|
||||||
|
this[mkey].dataSource = dataLength > 20 ? json.result.slice(0, 30) : json.result;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return this[mkey];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 明细
|
||||||
|
*/
|
||||||
|
getDetailData = async (param) => {
|
||||||
|
this.detailData.loading = true;
|
||||||
|
const json = await req.fetchJSON('/service-Analyse2/GetTradeApartDetail', param);
|
||||||
|
if (json.errcode === 0) {
|
||||||
|
runInAction(() => {
|
||||||
|
this.detailData.loading = false;
|
||||||
|
this.detailData.dataSource = json.result;
|
||||||
|
const daysData = json.result.filter(ele => ele.confirmDays).map(row => pick(row, ['o_id', 'tourdays', 'applyDays', 'personNum', 'country', 'startDate']));
|
||||||
|
this.scatterDays = daysData;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return this.detailData;
|
||||||
|
};
|
||||||
|
|
||||||
|
resetData = () => {
|
||||||
|
// this.detailData = { loading: false, dataSource: [] };
|
||||||
|
// this.scatterDays = [];
|
||||||
|
|
||||||
|
this.tourDays = { loading: false, dataSource: [] };
|
||||||
|
this.PML = { loading: false, dataSource: [] };
|
||||||
|
this.ConfirmDays = { loading: false, dataSource: [] };
|
||||||
|
this.ApplyDays = { loading: false, dataSource: [] };
|
||||||
|
this.PersonNum = { loading: false, dataSource: [] };
|
||||||
|
this.destination = { loading: false, dataSource: [] };
|
||||||
|
this.GlobalDestination = { loading: false, dataSource: [] };
|
||||||
|
};
|
||||||
|
|
||||||
|
curTab = 'tourDays';
|
||||||
|
setCurTab(v) {
|
||||||
|
this.curTab = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
pageLoading = false;
|
||||||
|
|
||||||
|
detailData = { loading: false, dataSource: [], };
|
||||||
|
scatterDays = [];
|
||||||
|
|
||||||
|
tourDays = { loading: false, dataSource: [] };
|
||||||
|
PML = { loading: false, dataSource: [] };
|
||||||
|
ConfirmDays = { loading: false, dataSource: [] };
|
||||||
|
ApplyDays = { loading: false, dataSource: [] };
|
||||||
|
PersonNum = { loading: false, dataSource: [] };
|
||||||
|
destination = { loading: false, dataSource: [] };
|
||||||
|
GlobalDestination = { loading: false, dataSource: [] };
|
||||||
|
}
|
||||||
|
export default Distribution;
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
import { useContext, useEffect, useMemo } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { stores_Context } from '../config';
|
||||||
|
import { Row, Col, Spin, Space, Radio, Tabs, Table } from 'antd';
|
||||||
|
import { empty } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from '../libs/ht';
|
||||||
|
import Scatter from './../components/Scatter';
|
||||||
|
import SearchForm from './../components/search/SearchForm';
|
||||||
|
import { Histogram } from '@ant-design/plots';
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
|
||||||
|
const { formValues, formValuesToSub } = searchFormStore;
|
||||||
|
const { curTab, scatterDays, detailData } = DistributionStore;
|
||||||
|
|
||||||
|
const detailRefresh = (obj) => {
|
||||||
|
DistributionStore.getDetailData({
|
||||||
|
...(obj || formValuesToSub),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (empty(detailData.dataSource)) {
|
||||||
|
detailRefresh();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const ScatterConfig = {
|
||||||
|
xField: 'startDate',
|
||||||
|
yField: 'tourdays',
|
||||||
|
colorField: 'country',
|
||||||
|
size: 4,
|
||||||
|
// xAxis: {
|
||||||
|
// min: 0,
|
||||||
|
// max: 30,
|
||||||
|
// },
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 10,
|
||||||
|
},
|
||||||
|
// quadrant: {
|
||||||
|
// xBaseline: 15,
|
||||||
|
// yBaseline: 5,
|
||||||
|
// },
|
||||||
|
tooltip: false,
|
||||||
|
legend: {
|
||||||
|
position: 'right-top',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const HistogramConfig = {
|
||||||
|
binField: 'personNum',
|
||||||
|
binWidth: 1,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={16} style={{ margin: '-16px -8px' }}>
|
||||||
|
{/* style={{ margin: '-16px -8px', padding: 0 }} */}
|
||||||
|
<Col className="gutter-row" span={24}>
|
||||||
|
<SearchForm
|
||||||
|
defaultValue={{
|
||||||
|
initialValue: {
|
||||||
|
...formValues,
|
||||||
|
},
|
||||||
|
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates', 'country'],
|
||||||
|
fieldProps: {
|
||||||
|
DepartmentList: { show_all: true },
|
||||||
|
WebCode: { show_all: true },
|
||||||
|
dates: { hide_vs: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onSubmit={(_err, obj, form, str) => {
|
||||||
|
detailRefresh(obj);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<Spin spinning={detailData.loading}>
|
||||||
|
<Scatter {...ScatterConfig} dataSource={scatterDays} />
|
||||||
|
</Spin>
|
||||||
|
</section>
|
||||||
|
{/* <section>
|
||||||
|
<Spin spinning={detailData.loading}>
|
||||||
|
<Histogram {...HistogramConfig} data={scatterDays} />
|
||||||
|
</Spin>
|
||||||
|
</section> */}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
import { useContext, useEffect } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { stores_Context } from '../config';
|
||||||
|
import { Row, Col, Spin, Tabs, Table } from 'antd';
|
||||||
|
import { RingProgress } from '@ant-design/plots';
|
||||||
|
import SearchForm from './../components/search/SearchForm';
|
||||||
|
import { empty } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from '../libs/ht';
|
||||||
|
|
||||||
|
import './kpi.css';
|
||||||
|
|
||||||
|
const apartOptions = [
|
||||||
|
{ key: 'tourDays', value: 'tourDays', label: '团天数' },
|
||||||
|
{ key: 'PML', value: 'PML', label: '单团毛利' },
|
||||||
|
{ key: 'ConfirmDays', value: 'ConfirmDays', label: '成团周期' },
|
||||||
|
{ key: 'ApplyDays', value: 'ApplyDays', label: '预定周期' },
|
||||||
|
{ key: 'PersonNum', value: 'PersonNum', label: '人等' },
|
||||||
|
{ key: 'destination', value: 'destination', label: '国内目的地' },
|
||||||
|
{ key: 'GlobalDestination', value: 'GlobalDestination', label: '海外目的地' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default observer(() => {
|
||||||
|
const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
|
||||||
|
const { formValues, formValuesToSub } = searchFormStore;
|
||||||
|
const { curTab } = DistributionStore;
|
||||||
|
|
||||||
|
const pageRefresh = (obj) => {
|
||||||
|
DistributionStore.getApartData({
|
||||||
|
...(obj || formValuesToSub),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (empty(DistributionStore[curTab].dataSource)) {
|
||||||
|
pageRefresh();
|
||||||
|
}
|
||||||
|
}, [curTab]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
DistributionStore.resetData();
|
||||||
|
return () => {};
|
||||||
|
}, [formValuesToSub]);
|
||||||
|
|
||||||
|
const onTabsChange = (tab) => {
|
||||||
|
DistributionStore.setCurTab(tab);
|
||||||
|
};
|
||||||
|
const RingProgressConfig = {
|
||||||
|
height: 60,
|
||||||
|
width: 60,
|
||||||
|
autoFit: false,
|
||||||
|
color: ['#5B8FF9', '#E8EDF3'],
|
||||||
|
};
|
||||||
|
const columns = [
|
||||||
|
{ title: '', dataIndex: 'label' },
|
||||||
|
{ title: '团数', dataIndex: 'ConfirmOrder' },
|
||||||
|
{ title: '业绩', dataIndex: 'SumML', render: (v) => dataFieldAlias.SumML.formatter(v) },
|
||||||
|
{ title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
|
||||||
|
{ title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={16} style={{ margin: '-16px -8px' }}>
|
||||||
|
<Col className="gutter-row" span={24}>
|
||||||
|
<SearchForm
|
||||||
|
defaultValue={{
|
||||||
|
initialValue: {
|
||||||
|
...formValues,
|
||||||
|
},
|
||||||
|
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
|
||||||
|
fieldProps: {
|
||||||
|
DepartmentList: { show_all: true },
|
||||||
|
WebCode: { show_all: true },
|
||||||
|
dates: { hide_vs: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onSubmit={(_err, obj) => {
|
||||||
|
pageRefresh(obj);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<Tabs
|
||||||
|
onChange={onTabsChange}
|
||||||
|
type="card"
|
||||||
|
items={apartOptions.map((ele) => {
|
||||||
|
return {
|
||||||
|
...ele,
|
||||||
|
children: (
|
||||||
|
<Spin spinning={DistributionStore.pageLoading}>
|
||||||
|
<Table
|
||||||
|
id="table_to_xlsx_sale"
|
||||||
|
dataSource={DistributionStore[curTab].dataSource}
|
||||||
|
columns={columns}
|
||||||
|
size="small"
|
||||||
|
rowKey={(record) => record.label}
|
||||||
|
loading={DistributionStore[curTab].loading}
|
||||||
|
pagination={false}
|
||||||
|
scroll={{ x: '100%' }}
|
||||||
|
/>
|
||||||
|
</Spin>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue