first commit

src/pages/Management/List/SeeMatching/detail.tsx

@@ -0,0 +1,74 @@
+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;