jiangxucong
/
dq-cms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

客户信息管理-合作记录页面开发

Browse Source
main
jiangxucong 1 week ago
parent 8f28eca19e
commit ef0771a4c4
5 changed files with 308 additions and 5 deletions
Show Stats Download Patch File Download Diff File

21
src/assets/business_basic/cooperate_bg.svg
Unescape Escape View File

@ -0,0 +1,21 @@
<svg width="224" height="127" viewBox="0 0 224 127" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-3" y="-9" width="234" height="137"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(7.5px);clip-path:url(#bgblur_0_3804_30382_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3804_30382)" data-figma-bg-blur-radius="15">
<mask id="path-1-inside-1_3804_30382" fill="white">
<path d="M12 10C12 7.79086 13.7909 6 16 6H212C214.209 6 216 7.79086 216 10V109C216 111.209 214.209 113 212 113H16C13.7909 113 12 111.209 12 109V10Z"/>
</mask>
<path d="M12 10C12 7.79086 13.7909 6 16 6H212C214.209 6 216 7.79086 216 10V109C216 111.209 214.209 113 212 113H16C13.7909 113 12 111.209 12 109V10Z" fill="#F0F7F7" fill-opacity="0.5"/>
<g clip-path="url(#paint0_angular_3804_30382_clip_path)" data-figma-skip-parse="true" mask="url(#path-1-inside-1_3804_30382)"><g transform="matrix(-0.028937 0.0441283 -0.116795 -0.00833659 119.61 47.4625)"><foreignObject x="-1608.22" y="-1608.22" width="3216.45" height="3216.45"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(60, 137, 136, 0.5) 0deg,rgba(0, 102, 101, 0.5) 10.5206deg,rgba(0, 102, 101, 0.35) 32.1212deg,rgba(255, 255, 255, 1) 60.2813deg,rgba(255, 255, 255, 0.5) 107.788deg,rgba(0, 102, 101, 0.35) 187.591deg,rgba(249, 249, 249, 1) 207.58deg,rgba(255, 255, 255, 1) 287.308deg,rgba(249, 249, 249, 0.5) 327.047deg,rgba(60, 137, 136, 0.5) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path d="M16 6V7H212V6V5H16V6ZM216 10H215V109H216H217V10H216ZM212 113V112H16V113V114H212V113ZM12 109H13V10H12H11V109H12ZM16 113V112C14.3431 112 13 110.657 13 109H12H11C11 111.761 13.2386 114 16 114V113ZM216 109H215C215 110.657 213.657 112 212 112V113V114C214.761 114 217 111.761 217 109H216ZM212 6V7C213.657 7 215 8.34315 215 10H216H217C217 7.23858 214.761 5 212 5V6ZM16 6V5C13.2386 5 11 7.23858 11 10H12H13C13 8.34315 14.3431 7 16 7V6Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.0,&#34;g&#34;:0.40000000596046448,&#34;b&#34;:0.39607843756675720,&#34;a&#34;:0.50},&#34;position&#34;:0.029223963618278503},{&#34;color&#34;:{&#34;r&#34;:0.0,&#34;g&#34;:0.40000000596046448,&#34;b&#34;:0.39607843756675720,&#34;a&#34;:0.34999999403953552},&#34;position&#34;:0.089225620031356812},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.16744795441627502},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:0.50},&#34;position&#34;:0.29941025376319885},{&#34;color&#34;:{&#34;r&#34;:0.0,&#34;g&#34;:0.40000000596046448,&#34;b&#34;:0.39607843756675720,&#34;a&#34;:0.34999999403953552},&#34;position&#34;:0.52108556032180786},{&#34;color&#34;:{&#34;r&#34;:0.97664386034011841,&#34;g&#34;:0.97664386034011841,&#34;b&#34;:0.97664386034011841,&#34;a&#34;:1.0},&#34;position&#34;:0.57661086320877075},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.79807692766189575},{&#34;color&#34;:{&#34;r&#34;:0.97647058963775635,&#34;g&#34;:0.97647058963775635,&#34;b&#34;:0.97647058963775635,&#34;a&#34;:0.50},&#34;position&#34;:0.90846514701843262}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.0,&#34;g&#34;:0.40000000596046448,&#34;b&#34;:0.39607843756675720,&#34;a&#34;:0.50},&#34;position&#34;:0.029223963618278503},{&#34;color&#34;:{&#34;r&#34;:0.0,&#34;g&#34;:0.40000000596046448,&#34;b&#34;:0.39607843756675720,&#34;a&#34;:0.34999999403953552},&#34;position&#34;:0.089225620031356812},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.16744795441627502},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:0.50},&#34;position&#34;:0.29941025376319885},{&#34;color&#34;:{&#34;r&#34;:0.0,&#34;g&#34;:0.40000000596046448,&#34;b&#34;:0.39607843756675720,&#34;a&#34;:0.34999999403953552},&#34;position&#34;:0.52108556032180786},{&#34;color&#34;:{&#34;r&#34;:0.97664386034011841,&#34;g&#34;:0.97664386034011841,&#34;b&#34;:0.97664386034011841,&#34;a&#34;:1.0},&#34;position&#34;:0.57661086320877075},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:1.0,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.79807692766189575},{&#34;color&#34;:{&#34;r&#34;:0.97647058963775635,&#34;g&#34;:0.97647058963775635,&#34;b&#34;:0.97647058963775635,&#34;a&#34;:0.50},&#34;position&#34;:0.90846514701843262}],&#34;transform&#34;:{&#34;m00&#34;:-57.873920440673828,&#34;m01&#34;:-233.59097290039062,&#34;m02&#34;:265.34243774414062,&#34;m10&#34;:88.256553649902344,&#34;m11&#34;:-16.673183441162109,&#34;m12&#34;:11.670814514160156},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}" mask="url(#path-1-inside-1_3804_30382)"/>
</g>
<defs>
<filter id="filter0_d_3804_30382" x="-3" y="-9" width="234" height="137" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-2" dy="4"/>
<feGaussianBlur stdDeviation="5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.568627 0 0 0 0 0.568627 0 0 0 0 0.568627 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3804_30382"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3804_30382" result="shape"/>
</filter>
<clipPath id="bgblur_0_3804_30382_clip_path" transform="translate(3 9)"><path d="M12 10C12 7.79086 13.7909 6 16 6H212C214.209 6 216 7.79086 216 10V109C216 111.209 214.209 113 212 113H16C13.7909 113 12 111.209 12 109V10Z"/>
</clipPath><clipPath id="paint0_angular_3804_30382_clip_path"><path d="M16 6V7H212V6V5H16V6ZM216 10H215V109H216H217V10H216ZM212 113V112H16V113V114H212V113ZM12 109H13V10H12H11V109H12ZM16 113V112C14.3431 112 13 110.657 13 109H12H11C11 111.761 13.2386 114 16 114V113ZM216 109H215C215 110.657 213.657 112 212 112V113V114C214.761 114 217 111.761 217 109H216ZM212 6V7C213.657 7 215 8.34315 215 10H216H217C217 7.23858 214.761 5 212 5V6ZM16 6V5C13.2386 5 11 7.23858 11 10H12H13C13 8.34315 14.3431 7 16 7V6Z" mask="url(#path-1-inside-1_3804_30382)"/></clipPath></defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

4
src/assets/business_basic/steps_icon.svg
Unescape Escape View File

@ -0,0 +1,4 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#C3E7E1"/>
<circle cx="7.5" cy="7.5" r="3.5" fill="#006665"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 205 B

10
src/pages/business_basic/components/CustomerInfoManagement.js
Unescape Escape View File

@ -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',

67
src/pages/business_basic/components/second_customer_components/CooperateRecord.js
Unescape Escape View File

@ -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 (
<div className={styles.container}>
<div className={styles.section}>
<div className={styles.sectionTitle}>合作绩效评级</div>
<div className={styles.perfWrap}>
<div className={styles.perfRow}>
<div className={styles.perfLevel}>{perfGrade.level}</div>
<div className={styles.perfBarHolder}>
<Progress percent={perfGrade.score} showInfo={false} strokeColor={{ from: 'rgba(0, 102, 101, 1)', to: 'rgba(0, 102, 101, 1)' }} />
</div>
<div className={styles.perfScore}>{perfGrade.score} 分</div>
</div>
</div>
</div>
<div className={styles.section}>
<div className={styles.sectionTitle}>满意度调查结果</div>
<div className={styles.satisfactionGrid}>
{satisfactionCards.map((c, i) => (
<div key={i} className={styles.card}>
<div className={styles.cardScore}>{c.score}</div>
<div className={styles.cardLabel}>{c.label}</div>
</div>
))}
</div>
</div>
<div className={styles.section}>
<div className={styles.sectionTitle}>合作历史记录</div>
<div className={styles.historyStepsWrap}>
<Steps
direction="vertical"
progressDot={(dot, { status, index }) => (
<img src={stepsIcon} alt="step" style={{ width: 15, height: 15 }} />
)}
items={history.map((s) => ({
title: <span className={styles.historyDate}>{s.date}</span>,
description: <span className={styles.historyText}>{s.text}</span>,
}))}
/>
</div>
</div>
</div>
);
};
export default CooperateRecord;

211
src/pages/business_basic/components/second_customer_components/CooperateRecord.less
Unescape Escape View File

@ -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);
}
}
}
Write Preview
Loading…
Cancel
Save