diff --git a/src/assets/business_basic/cooperate_bg.svg b/src/assets/business_basic/cooperate_bg.svg new file mode 100644 index 0000000..cdd1188 --- /dev/null +++ b/src/assets/business_basic/cooperate_bg.svg @@ -0,0 +1,21 @@ + +
 + + + + +
 + + + + + + + + + + + + + + diff --git a/src/assets/business_basic/steps_icon.svg b/src/assets/business_basic/steps_icon.svg new file mode 100644 index 0000000..ebeae25 --- /dev/null +++ b/src/assets/business_basic/steps_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/business_basic/components/CustomerInfoManagement.js b/src/pages/business_basic/components/CustomerInfoManagement.js index 51521d2..4dcec02 100644 --- a/src/pages/business_basic/components/CustomerInfoManagement.js +++ b/src/pages/business_basic/components/CustomerInfoManagement.js @@ -188,7 +188,7 @@ const CustomerInfoManagement = () => { // 表格数据 const tableData = [ { - id: '1', + id: 'CUST-2023-001', customerName: '中国石化销售股份有限公司', contact: '钱亚男', phone: '18901563341', @@ -198,7 +198,7 @@ const CustomerInfoManagement = () => { satisfaction: 4.5, }, { - id: '2', + id: 'CUST-2023-002', customerName: '中石化华东分公司', contact: '郑宇雅', phone: '15341731282', @@ -208,7 +208,7 @@ const CustomerInfoManagement = () => { satisfaction: 4.0, }, { - id: '3', + id: 'CUST-2023-003', customerName: '海南石油贸易有限公司', contact: '孙向明', phone: '13252257033', @@ -218,7 +218,7 @@ const CustomerInfoManagement = () => { satisfaction: 4.5, }, { - id: '4', + id: 'CUST-2023-004', customerName: '东莞石化有限公司', contact: '何思颖', phone: '18931788771', @@ -228,7 +228,7 @@ const CustomerInfoManagement = () => { satisfaction: 4.5, }, { - id: '5', + id: 'CUST-2023-005', customerName: '中国石油化工集团有限公司', contact: '钱佳仪', phone: '13743378254', diff --git a/src/pages/business_basic/components/second_customer_components/CooperateRecord.js b/src/pages/business_basic/components/second_customer_components/CooperateRecord.js new file mode 100644 index 0000000..d8b13ec --- /dev/null +++ b/src/pages/business_basic/components/second_customer_components/CooperateRecord.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { Progress, Steps } from 'antd'; +import stepsIcon from '@/assets/business_basic/steps_icon.svg'; +import styles from './CooperateRecord.less'; +const CooperateRecord = ({ data }) => { + const perfGrade = { level: 'A 级', score: 95 }; + const satisfactionCards = [ + { score: 4.8, label: '产品质量' }, + { score: 4.6, label: '交付及时性' }, + { score: 4.7, label: '客户服务' }, + { score: 4.5, label: '价格合理性' }, + ]; + const history = [ + { date: '2025-07-16', text: '完成500吨92#汽油交付，客户反馈良好' }, + { date: '2025-03-24', text: '参加客户组织的供应商大会，获得“优秀供应商”称号' }, + { date: '2025-02-11', text: '客户满意度调查，综合得分4.7分' }, + { date: '2024-08-29', text: '签订年度框架合作协议，合同金额5000万元' }, + ]; + + return ( +
+
+
合作绩效评级
+
+
+
{perfGrade.level}
+
+ +
+
{perfGrade.score} 分
+
+
+
+ +
+
满意度调查结果
+
+ {satisfactionCards.map((c, i) => ( +
+
{c.score}
+
{c.label}
+
+ ))} +
+
+
+
合作历史记录
+
+ ( + step + )} + items={history.map((s) => ({ + title: {s.date}, + description: {s.text}, + }))} + /> +
+
+
+ ); +}; + +export default CooperateRecord; + + diff --git a/src/pages/business_basic/components/second_customer_components/CooperateRecord.less b/src/pages/business_basic/components/second_customer_components/CooperateRecord.less new file mode 100644 index 0000000..bc195d2 --- /dev/null +++ b/src/pages/business_basic/components/second_customer_components/CooperateRecord.less @@ -0,0 +1,211 @@ +.container { + width: 100%; + margin: 0 auto; + padding: 24px 32px; + background: #fff; + box-sizing: border-box; +} + +.section { + margin-bottom: 24px; +} + +.sectionTitle { + font-size: 16px; + font-weight: 600; + color: #333333; + margin-bottom: 16px; + position: relative; + padding-left: 8px; +} + +.sectionTitle::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 18px; + background-color: #006665; + /* 蓝色竖线 */ + border-radius: 2px; +} + +.grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-column-gap: 48px; + grid-row-gap: 16px; + max-width: 100%; +} + +.item { + display: flex; + align-items: baseline; + max-width: 100%; +} + +.label { + color: #666666; + font-size: 12px; + min-width: 96px; +} + +.value { + color: #333333; + font-size: 12px; +} + +/* 合作绩效评级 */ +.perfWrap { + display: flex; + flex-direction: column; + gap: 8px; +} + +.perfRow { + display: flex; + align-items: center; + gap: 12px; + font-size: 12px; +} + +.perfBarHolder { + flex: 1; +} + +.perfLevel { + color: #666; +} + +.perfBar { + width: 100%; + height: 10px; + background: rgba(0, 0, 0, 0.06); + border-radius: 5px; + position: relative; +} + +.perfBarFill { + height: 100%; + background: rgba(0, 102, 101, 1); + border-radius: 5px; +} + +.perfScore { + color: #333; + white-space: nowrap; +} + +/* 满意度调查结果 */ +.satisfactionGrid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; +} + +.card { + border-radius: 4px; + padding: 16px 12px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + max-width: 100%; + background-image: url('@/assets/business_basic/cooperate_bg.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; // 完整显示背景 + min-height: 120px; // 保证背景有足够展示空间 + // aspect-ratio: 224 / 127; // 与SVG比例一致 + position: relative; + box-sizing: border-box; +} + +.card > * { position: relative; z-index: 1; } + +.cardScore { + font-size: 24px; + font-weight: 600; + color: #333; + margin-bottom: 8px; +} + +.cardLabel { + font-size: 12px; + color: #666; + word-break: break-word; + overflow-wrap: anywhere; +} + +/* 合作历史记录 */ +.historyList { + display: block; +} + +.historyItem { + display: flex; + align-items: flex-start; + gap: 12px; + margin-bottom: 12px; +} + +.historyDate { + color: #333333; + font-weight: 600; +} + +.historyText { + color: #666666; +} + +/* Steps 样式适配 */ +.historyStepsWrap { + padding-left: 10px; + :global { + .ant-steps-item-title { + color: #333333; + font-weight: 600; + } + .ant-steps-item-description { + color: #666666; + } + .ant-steps-item-icon .ant-steps-icon { + color: rgba(0, 102, 101, 1); + } + .ant-steps-item-tail::after { + background-color: rgba(0, 0, 0, 0.06); + } + /* progressDot 使用自定义图片时的尺寸与对齐 */ + .ant-steps-item-icon { + width: 15px; + height: 15px; + margin-top: 3px; /* 再下移 1px，让基线更齐 */ + display: flex; + align-items: center; + justify-content: center; + } + .ant-steps-item-tail { + left: 7.5px; /* 居中对齐 15px 节点 */ + top: 7.5px; /* 让尾线从圆点正中开始，紧贴节点 */ + } + .ant-steps-item-tail::after { + width: 1px; /* 尾线更细，贴合视觉 */ + border-radius: 0; /* 直线效果 */ + } + /* 调整进度条高度与圆角 */ + .ant-progress { + margin-top: 4px; + } + .ant-progress-bg { + height: 10px !important; + border-radius: 5px !important; + } + .ant-progress-inner { + border-radius: 5px !important; + background: rgba(0, 0, 0, 0.06); + } + } +} \ No newline at end of file