cq_anquan
/
safety-eval-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style

dev-tmp1
tangjie 2026-08-18 09:46:10 +08:00
parent 513f54a031
commit 3e4f557ad0
4 changed files with 46 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Container/Driver/index.js
View File

@ -137,7 +137,6 @@ const Driver = (props) => {
<div className={`driver-container${isSupervision ? " driver-container--cockpit" : ""}`}> <div className={`driver-container${isSupervision ? " driver-container--cockpit" : ""}`}>
<Skeleton active loading={isLoading}> <Skeleton active loading={isLoading}>
<div className="driver-container-content"> <div className="driver-container-content">
{showContent && isInstitution && <Institution {...props} />} {showContent && isInstitution && <Institution {...props} />}
{showContent && isSupervision && <Cockpit {...props} />} {showContent && isSupervision && <Cockpit {...props} />}
</div> </div>

32
src/pages/Container/Institution/index.css
View File

@ -53,7 +53,7 @@
.dashboard-block-head > div { .dashboard-block-head > div {
display: flex; display: flex;
gap: 1.4rem; gap: 1.4rem;
font-size: 0.7rem; font-size: 0.88rem;
color: #64748b; color: #64748b;
} }
@ -79,8 +79,8 @@
} }
.dashboard-status-grid article > i { .dashboard-status-grid article > i {
width: 34px; width: 38px;
height: 34px; height: 38px;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -88,8 +88,8 @@
color: #fff; color: #fff;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 16px;
flex: 0 0 34px;
} }
.dashboard-status-grid .blue { background: #4098f7; } .dashboard-status-grid .blue { background: #4098f7; }
@ -105,13 +105,13 @@
} }
.dashboard-status-grid span { .dashboard-status-grid span {
font-size: 0.7rem; font-size: 1rem;
color: #64748b; color: #64748b;
} }
.dashboard-status-grid strong { .dashboard-status-grid strong {
font-size: 1rem; font-size: 1.25rem;
margin-top: 0.15rem; /* margin-top: 0.15rem; */
color: #1e293b; color: #1e293b;
} }
@ -149,7 +149,7 @@
color: #fff; color: #fff;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 14px;
flex: 0 0 34px; flex: 0 0 34px;
} }
@ -163,7 +163,7 @@
} }
.dashboard-reminder-grid span { .dashboard-reminder-grid span {
font-size: 0.68rem; font-size: 0.88rem;
color: #64748b; color: #64748b;
} }
@ -222,7 +222,7 @@
justify-content: center; justify-content: center;
gap: 0.8rem; gap: 0.8rem;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 0.62rem; font-size: 0.88rem;
color: #64748b; color: #64748b;
margin-top: 8px; margin-top: 8px;
} }
@ -257,7 +257,7 @@
.dashboard-project-table th, .dashboard-project-table th,
.dashboard-project-table td { .dashboard-project-table td {
padding: 0.65rem 0.55rem; padding: 0.65rem 0.55rem;
font-size: 0.7rem; font-size: 0.88rem;
} }
.dashboard-project-table th { .dashboard-project-table th {
@ -291,7 +291,7 @@
padding: 0.42rem 0.85rem; padding: 0.42rem 0.85rem;
border: 1px solid var(--color-border, #e2e8f0); border: 1px solid var(--color-border, #e2e8f0);
border-radius: 8px; border-radius: 8px;
font-size: 0.78rem; font-size: 0.88rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
@ -314,7 +314,7 @@
} }
.btn-ghost:hover { background: #f1f5f9; color: #1e293b; } .btn-ghost:hover { background: #f1f5f9; color: #1e293b; }
.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.7rem; } .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.88rem; }
.dashboard-btn-ghost { .dashboard-btn-ghost {
display: inline-flex; display: inline-flex;
@ -323,7 +323,7 @@
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 0.7rem; font-size: 0.88rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
@ -343,7 +343,7 @@
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 0.7rem; font-size: 0.88rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;

30
src/pages/Container/Supervision/Cockpit/index.css
View File

@ -184,16 +184,16 @@
box-shadow: inset 0 0 14px rgba(46, 204, 255, .34); box-shadow: inset 0 0 14px rgba(46, 204, 255, .34);
} }
.life-stat p { margin: 0 0 3px; color: #cde9ff; font-size: 11px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; } .life-stat p { margin: 0 0 3px; color: #cde9ff; font-size: 14px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
.life-stat strong { color: #20caff; font-size: 13px; font-family: Arial, sans-serif; } .life-stat strong { color: #20caff; font-size: 14px; font-family: Arial, sans-serif; }
.progress-list { padding: 2px 8px 10px; border-top: 1px solid rgba(54, 142, 219, .18); } .progress-list { padding: 2px 8px 10px; border-top: 1px solid rgba(54, 142, 219, .18); }
.progress-row { height: 31px; display: grid; grid-template-columns: 122px 1fr 34px; align-items: center; gap: 8px; font-size: 11px; color: #e2f5ff; } .progress-row { height: 31px; display: grid; grid-template-columns: 122px 1fr 34px; align-items: center; gap: 8px; font-size: 14px; color: #e2f5ff; }
.progress-track { height: 9px; border-radius: 999px; background: rgba(5, 35, 83, .88); overflow: hidden; box-shadow: inset 0 0 9px rgba(5, 17, 44, .9); } .progress-track { height: 9px; border-radius: 999px; background: rgba(5, 35, 83, .88); overflow: hidden; box-shadow: inset 0 0 9px rgba(5, 17, 44, .9); }
.progress-track i { display: block; height: 100%; border-radius: inherit; box-shadow: 0 0 8px currentColor; } .progress-track i { display: block; height: 100%; border-radius: inherit; box-shadow: 0 0 8px currentColor; }
.progress-row b { color: #e8f8ff; font-size: 11px; } .progress-row b { color: #e8f8ff; font-size: 14px; }
.industry-chart { height: 178px; } .industry-chart { height: 178px; }
.risk-panel h3 { margin: 0 0 8px; color: #eaf9ff; font-size: 12px; font-weight: 700; } .risk-panel h3 { margin: 0 0 8px; color: #eaf9ff; font-size: 14px; font-weight: 700; }
.risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.risk-item { .risk-item {
min-height: 38px; min-height: 38px;
@ -207,7 +207,7 @@
} }
.risk-item:nth-child(3), .risk-item:nth-child(4) { border-color: rgba(255, 207, 43, .45); background: linear-gradient(90deg, rgba(116, 89, 15, .54), rgba(6, 32, 73, .62)); } .risk-item:nth-child(3), .risk-item:nth-child(4) { border-color: rgba(255, 207, 43, .45); background: linear-gradient(90deg, rgba(116, 89, 15, .54), rgba(6, 32, 73, .62)); }
.risk-item:nth-child(5) { grid-column: 1 / -1; } .risk-item:nth-child(5) { grid-column: 1 / -1; }
.risk-item span { color: #e8f7ff; font-size: 11px; line-height: 1.3; } .risk-item span { color: #e8f7ff; font-size: 14px; line-height: 1.3; }
.risk-item b { color: #21caff; font-size: 17px; } .risk-item b { color: #21caff; font-size: 17px; }
.risk-pie { height: 118px; } .risk-pie { height: 118px; }
@ -220,9 +220,9 @@
box-shadow: inset 0 0 20px rgba(42, 208, 255, .16), 0 0 10px rgba(0, 161, 255, .18); box-shadow: inset 0 0 20px rgba(42, 208, 255, .16), 0 0 10px rgba(0, 161, 255, .18);
} }
.kpi-card::before { content: ""; position: absolute; top: -1px; left: 28px; width: 54px; height: 4px; background: repeating-linear-gradient(90deg, #2adfff 0 9px, transparent 9px 15px); } .kpi-card::before { content: ""; position: absolute; top: -1px; left: 28px; width: 54px; height: 4px; background: repeating-linear-gradient(90deg, #2adfff 0 9px, transparent 9px 15px); }
.kpi-card p { margin: 0 0 6px; text-align: center; color: #d6f7ff; font-weight: 700; font-size: 12px; } .kpi-card p { margin: 0 0 6px; text-align: center; color: #d6f7ff; font-weight: 700; font-size: 14px; }
.kpi-card strong { font-size: 22px; color: #fff; letter-spacing: 1px; } .kpi-card strong { font-size: 22px; color: #fff; letter-spacing: 1px; }
.kpi-card span { float: right; margin-top: 7px; color: #d9ebff; font-size: 11px; } .kpi-card span { float: right; margin-top: 7px; color: #d9ebff; font-size: 14px; }
.kpi-card b { color: #fff; } .kpi-card b { color: #fff; }
.map-shell { flex: 1; min-height: 456px; position: relative; } .map-shell { flex: 1; min-height: 456px; position: relative; }
@ -238,12 +238,12 @@
box-shadow: inset 0 0 18px rgba(18, 195, 255, .38), 0 0 10px rgba(0, 132, 255, .34); box-shadow: inset 0 0 18px rgba(18, 195, 255, .38), 0 0 10px rgba(0, 132, 255, .34);
} }
.map-card strong { display: block; font-size: 14px; margin-bottom: 5px; } .map-card strong { display: block; font-size: 14px; margin-bottom: 5px; }
.map-card span { font-size: 12px; } .map-card span { font-size: 14px; }
.map-card--1 { left: 45%; top: 45%; } .map-card--1 { left: 45%; top: 45%; }
.map-card--2 { right: 4%; top: 54%; } .map-card--2 { right: 4%; top: 54%; }
.map-card--3 { left: 42%; bottom: 13%; } .map-card--3 { left: 42%; bottom: 13%; }
.map-card--4 { right: 13%; bottom: 12%; } .map-card--4 { right: 13%; bottom: 12%; }
.map-legend { position: absolute; left: 36px; bottom: 34px; margin: 0; padding: 0; list-style: none; color: #d8ebff; font-size: 12px; } .map-legend { position: absolute; left: 36px; top: 34px; margin: 0; padding: 0; list-style: none; color: #d8ebff; font-size: 14px; }
.map-legend li { margin: 7px 0; display: flex; align-items: center; gap: 8px; } .map-legend li { margin: 7px 0; display: flex; align-items: center; gap: 8px; }
.map-legend li::before { content: ""; width: 12px; height: 4px; background: #c9ec75; } .map-legend li::before { content: ""; width: 12px; height: 4px; background: #c9ec75; }
.map-legend li:nth-child(2)::before { background: #ffe376; } .map-legend li:nth-child(2)::before { background: #ffe376; }
@ -253,10 +253,10 @@
.todo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; } .todo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.todo-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 18px 18px; align-items: center; column-gap: 8px; } .todo-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 18px 18px; align-items: center; column-gap: 8px; }
.todo-item span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 16px; background: radial-gradient(circle, rgba(73, 198, 255, .5), rgba(7, 51, 112, .95)); border: 1px solid rgba(69, 204, 255, .64); box-shadow: inset 0 0 15px rgba(53, 202, 255, .3); } .todo-item span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 16px; background: radial-gradient(circle, rgba(73, 198, 255, .5), rgba(7, 51, 112, .95)); border: 1px solid rgba(69, 204, 255, .64); box-shadow: inset 0 0 15px rgba(53, 202, 255, .3); }
.todo-item p { margin: 0; color: #d8edff; font-size: 11px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; } .todo-item p { margin: 0; color: #d8edff; font-size: 14px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
.todo-item b { color: #13c8ff; font-size: 15px; } .todo-item b { color: #13c8ff; font-size: 15px; }
.period-tabs { position: absolute; left: 14px; top: 42px; display: flex; z-index: 2; } .period-tabs { position: absolute; left: 14px; top: 42px; display: flex; z-index: 2; }
.period-tabs span { width: 34px; height: 19px; display: grid; place-items: center; color: #d8f2ff; border: 1px solid rgba(46, 159, 232, .48); background: rgba(7, 37, 88, .6); font-size: 11px; cursor: pointer; } .period-tabs span { width: 34px; height: 19px; display: grid; place-items: center; color: #d8f2ff; border: 1px solid rgba(46, 159, 232, .48); background: rgba(7, 37, 88, .6); font-size: 14px; cursor: pointer; }
.period-tabs span + span { border-left: none; } .period-tabs span + span { border-left: none; }
.period-tabs span.active { background: rgba(5, 126, 176, .5); color: #fff; } .period-tabs span.active { background: rgba(5, 126, 176, .5); color: #fff; }
.line-chart { height: 176px; } .line-chart { height: 176px; }
@ -264,7 +264,7 @@
.review-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; } .review-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; }
.review-stat { display: flex; align-items: center; gap: 8px; min-width: 0; } .review-stat { display: flex; align-items: center; gap: 8px; min-width: 0; }
.review-stat span { width: 37px; height: 37px; display: grid; place-items: center; color: #20d3ff; font-size: 17px; border-radius: 50%; background: radial-gradient(circle, rgba(26, 188, 255, .35), rgba(5, 37, 93, .9)); border: 2px solid rgba(35, 210, 255, .65); } .review-stat span { width: 37px; height: 37px; display: grid; place-items: center; color: #20d3ff; font-size: 17px; border-radius: 50%; background: radial-gradient(circle, rgba(26, 188, 255, .35), rgba(5, 37, 93, .9)); border: 2px solid rgba(35, 210, 255, .65); }
.review-stat p { margin: 0; color: #e1f5ff; font-size: 12px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; } .review-stat p { margin: 0; color: #e1f5ff; font-size: 14px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
.review-stat b { color: #18c9ff; font-size: 15px; } .review-stat b { color: #18c9ff; font-size: 15px; }
.review-stat b.danger { color: #ff3e53; } .review-stat b.danger { color: #ff3e53; }
.review-pie { height: 144px; } .review-pie { height: 144px; }
@ -272,7 +272,7 @@
.process-grid { height: 128px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 52px); gap: 18px 28px; align-content: center; } .process-grid { height: 128px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 52px); gap: 18px 28px; align-content: center; }
.process-node { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #078bff; background: linear-gradient(180deg, rgba(12, 71, 150, .72), rgba(2, 24, 69, .85)); box-shadow: inset 0 0 18px rgba(13, 146, 255, .25); } .process-node { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #078bff; background: linear-gradient(180deg, rgba(12, 71, 150, .72), rgba(2, 24, 69, .85)); box-shadow: inset 0 0 18px rgba(13, 146, 255, .25); }
.process-node strong { color: #16d3ff; font-size: 18px; line-height: 20px; } .process-node strong { color: #16d3ff; font-size: 18px; line-height: 20px; }
.process-node span { color: #fff; font-size: 12px; } .process-node span { color: #fff; font-size: 14px; }
.process-node i { position: absolute; right: -26px; top: 50%; width: 22px; height: 16px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(25, 210, 255, .85)); clip-path: polygon(0 0, 70% 50%, 0 100%, 30% 50%); } .process-node i { position: absolute; right: -26px; top: 50%; width: 22px; height: 16px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(25, 210, 255, .85)); clip-path: polygon(0 0, 70% 50%, 0 100%, 30% 50%); }
.process-node:nth-child(5) i { right: 50%; top: 60px; transform: translateX(50%) rotate(90deg); } .process-node:nth-child(5) i { right: 50%; top: 60px; transform: translateX(50%) rotate(90deg); }
.process-node:nth-child(n+6) i { right: auto; left: -26px; transform: translateY(-50%) rotate(180deg); } .process-node:nth-child(n+6) i { right: auto; left: -26px; transform: translateY(-50%) rotate(180deg); }
@ -310,7 +310,7 @@
} }
.map-summary span { .map-summary span {
font-size: 12px; font-size: 14px;
color: #d9f2ff; color: #d9f2ff;
} }

28
src/pages/Container/Supervision/Cockpit/index.js
View File

@ -188,18 +188,18 @@ function LifecyclePanel({ data, loading }) {
const barOption = useMemo(() => ({ const barOption = useMemo(() => ({
color: ['#1aa7ff', '#d7a92c'], color: ['#1aa7ff', '#d7a92c'],
grid: { left: 28, right: 10, top: 20, bottom: 42 }, grid: { left: 28, right: 10, top: 20, bottom: 42 },
legend: { right: 8, top: 0, itemWidth: 10, itemHeight: 6, textStyle: { color: '#b9d8ff', fontSize: 10 } }, legend: { right: 8, top: 0, itemWidth: 10, itemHeight: 6, textStyle: { color: '#b9d8ff', fontSize: 14 } },
tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } }, tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: industryList.map(item => item.industryName), data: industryList.map(item => item.industryName),
axisLabel: { color: '#b9cfff', fontSize: 10, interval: 0, rotate: 0, width: 38, overflow: 'break' }, axisLabel: { color: '#b9cfff', fontSize: 14, interval: 0, rotate: 0, width: 38, overflow: 'break' },
axisLine: { lineStyle: { color: '#17416e' } }, axisLine: { lineStyle: { color: '#17416e' } },
axisTick: { show: false }, axisTick: { show: false },
}, },
yAxis: { yAxis: {
type: 'value', max: 220, splitNumber: 4, type: 'value', max: 220, splitNumber: 4,
axisLabel: { color: '#b9cfff', fontSize: 10 }, axisLabel: { color: '#b9cfff', fontSize: 14 },
splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .2)', type: 'dashed' } }, splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .2)', type: 'dashed' } },
}, },
series: [ series: [
@ -240,7 +240,7 @@ function RiskPanel({ data, loading }) {
const pieOption = useMemo(() => ({ const pieOption = useMemo(() => ({
color: ['#5f8cff', '#e96fff', '#5fd8ae', '#b6a0ff'], color: ['#5f8cff', '#e96fff', '#5fd8ae', '#b6a0ff'],
tooltip: { trigger: 'item', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } }, tooltip: { trigger: 'item', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
legend: { orient: 'vertical', right: 2, top: 'center', itemWidth: 10, itemHeight: 6, textStyle: { color: '#c6dcff', fontSize: 10 } }, legend: { orient: 'vertical', right: 2, top: 'center', itemWidth: 10, itemHeight: 6, textStyle: { color: '#c6dcff', fontSize: 14 } },
series: [{ type: 'pie', radius: ['46%', '70%'], center: ['30%', '55%'], avoidLabelOverlap: true, label: { show: false }, data: data.riskPie }], series: [{ type: 'pie', radius: ['46%', '70%'], center: ['30%', '55%'], avoidLabelOverlap: true, label: { show: false }, data: data.riskPie }],
}), [data.riskPie]); }), [data.riskPie]);
@ -282,7 +282,7 @@ function KpiCards({ data, loading }) {
// ==================== 地图区域分布 ==================== // ==================== 地图区域分布 ====================
function MapSection({ data, loading }) { function MapSection({ data, loading }) {
const [selectedAreaName, setSelectedAreaName] = useState('重庆市'); const [selectedAreaName, setSelectedAreaName] = useState('重庆市');
const zoomRef = useRef(1.1); const zoomRef = useRef(1.3);
const chartInstanceRef = useRef(null); const chartInstanceRef = useRef(null);
const { regionList, regionSummary, mapScatterPoints } = data; const { regionList, regionSummary, mapScatterPoints } = data;
@ -330,14 +330,14 @@ function MapSection({ data, loading }) {
borderColor: '#1aa7ff', borderColor: '#1aa7ff',
borderWidth: 1, borderWidth: 1,
padding: [8, 10], padding: [8, 10],
textStyle: { color: '#eaf9ff', fontSize: 12 }, textStyle: { color: '#eaf9ff', fontSize: 14 },
formatter: params => { formatter: params => {
const item = params.data || statMap.get(params.name); const item = params.data || statMap.get(params.name);
if (!item) return params.name; if (!item) return params.name;
// 随地图缩放比例同步缩放悬浮框字体 // 随地图缩放比例同步缩放悬浮框字体
const z = zoomRef.current || 1; const z = zoomRef.current || 1;
const fs = Math.max(10, Math.round(12 * z)); const fs = Math.max(14, Math.round(14 * z));
const title = Math.round(13 * z); const title = Math.round(14 * z);
return `<div style="font-size:${fs}px;line-height:1.7"> return `<div style="font-size:${fs}px;line-height:1.7">
<strong style="font-size:${title}px">${params.name}</strong><br/> <strong style="font-size:${title}px">${params.name}</strong><br/>
评价项目数：${item.evalProjectCount || 0}<br/> 评价项目数：${item.evalProjectCount || 0}<br/>
@ -356,7 +356,7 @@ function MapSection({ data, loading }) {
geo: { geo: {
map: 'chongqing', map: 'chongqing',
roam: true, roam: true,
zoom: 1.1, zoom: 1.0,
top: 10, top: 10,
bottom: 0, bottom: 0,
left: 0, left: 0,
@ -376,7 +376,7 @@ function MapSection({ data, loading }) {
label: { show: true, color: '#061a35', fontWeight: 700 }, label: { show: true, color: '#061a35', fontWeight: 700 },
itemStyle: { areaColor: '#31d6ff', borderColor: '#ffffff', borderWidth: 2.2 }, itemStyle: { areaColor: '#31d6ff', borderColor: '#ffffff', borderWidth: 2.2 },
}, },
label: { show: true, color: '#244269', fontSize: 10 }, label: { show: true, color: '#244269', fontSize: 14 },
}, },
series: [ series: [
{ {
@ -486,10 +486,10 @@ function ReviewLinePanel({ data, period, onPeriodChange, loading }) {
return { return {
color: ['#0da5ff', '#29e487', '#ffb74d', '#ce93d8', '#4dd0e1', '#f48fb1'], color: ['#0da5ff', '#29e487', '#ffb74d', '#ce93d8', '#4dd0e1', '#f48fb1'],
grid: { left: 34, right: 12, top: 28, bottom: 32 }, grid: { left: 34, right: 12, top: 28, bottom: 32 },
legend: { right: 0, top: 0, itemWidth: 14, itemHeight: 4, textStyle: { color: '#c6dcff', fontSize: 10 } }, legend: { right: 0, top: 0, itemWidth: 14, itemHeight: 4, textStyle: { color: '#c6dcff', fontSize: 14 } },
tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } }, tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
xAxis: { type: 'category', boundaryGap: false, data: trendBuckets, axisLabel: { color: '#c6dcff', fontSize: 10 }, axisLine: { lineStyle: { color: '#17416e' } }, axisTick: { show: false } }, xAxis: { type: 'category', boundaryGap: false, data: trendBuckets, axisLabel: { color: '#c6dcff', fontSize: 14 }, axisLine: { lineStyle: { color: '#17416e' } }, axisTick: { show: false } },
yAxis: { type: 'value', min: 0, max: 100, splitNumber: 5, axisLabel: { color: '#c6dcff', fontSize: 10 }, splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .22)', type: 'dashed' } } }, yAxis: { type: 'value', min: 0, max: 100, splitNumber: 5, axisLabel: { color: '#c6dcff', fontSize: 14 }, splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .22)', type: 'dashed' } } },
series: seriesConfig, series: seriesConfig,
}; };
}, [trendBuckets, trendSeries]); }, [trendBuckets, trendSeries]);
@ -526,7 +526,7 @@ function ReviewProgressPanel({ data, loading }) {
const pieOption = useMemo(() => ({ const pieOption = useMemo(() => ({
color: ['#1677ff', '#00c089', '#ff7a1a', '#f7cb16', '#ab5fde'], color: ['#1677ff', '#00c089', '#ff7a1a', '#f7cb16', '#ab5fde'],
tooltip: { trigger: 'item', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } }, tooltip: { trigger: 'item', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
legend: { orient: 'vertical', right: 0, top: 'center', itemWidth: 10, itemHeight: 8, textStyle: { color: '#c6dcff', fontSize: 10 } }, legend: { orient: 'vertical', right: 0, top: 'center', itemWidth: 10, itemHeight: 8, textStyle: { color: '#c6dcff', fontSize: 14 } },
series: [{ type: 'pie', radius: ['32%', '68%'], center: ['28%', '56%'], label: { show: false }, data: reviewPieItems.map(item => ({ name: item.name, value: item.value })) }], series: [{ type: 'pie', radius: ['32%', '68%'], center: ['28%', '56%'], label: { show: false }, data: reviewPieItems.map(item => ({ name: item.name, value: item.value })) }],
}), [reviewPieItems]); }), [reviewPieItems]);