75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
|
import { Modal } from 'antd';
|
||
|
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
|
||
|
|
export type ListFormProps = {
|
||
|
|
onClose: (flag?: boolean, formVals?: unknown) => void;
|
||
|
|
open: boolean;
|
||
|
|
values?: Partial<API.MobileUser.ListRow>;
|
||
|
|
matching?: any;
|
||
|
|
};
|
||
|
|
|
||
|
|
const listEdit: React.FC<ListFormProps> = (props) => {
|
||
|
|
const { open, values, matching } = props;
|
||
|
|
|
||
|
|
const mapRef = useRef(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
console.log(matching);
|
||
|
|
if (matching && open) {
|
||
|
|
const myCharts = echarts.init(mapRef.current);
|
||
|
|
const { educationMatch, maxSimilarity, salaryMatch, areaMatch } = matching;
|
||
|
|
// educationMatch
|
||
|
|
// maxSimilarity
|
||
|
|
// salaryMatch
|
||
|
|
// areaMatch
|
||
|
|
myCharts.setOption({
|
||
|
|
radar: {
|
||
|
|
shape: 'circle',
|
||
|
|
indicator: [
|
||
|
|
{ name: '学历', max: 1 },
|
||
|
|
{ name: '薪资', max: 1 },
|
||
|
|
{ name: '区域', max: 1 },
|
||
|
|
{ name: '内容', max: 1 },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '综合匹配度',
|
||
|
|
type: 'radar',
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: [educationMatch, salaryMatch, areaMatch, maxSimilarity],
|
||
|
|
name: 'Allocated Budget',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [matching]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
title="匹配详情"
|
||
|
|
width={400}
|
||
|
|
open={props.open}
|
||
|
|
footer={''}
|
||
|
|
onCancel={() => props.onClose()}
|
||
|
|
maskClosable={true}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{ width: '300px', height: '300px' }} ref={mapRef}></div>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default listEdit;
|