From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/views/reportAnalysis/qualityAnalysis/components/left-top.vue | 183 +++++++++++++++------------------------------
1 files changed, 61 insertions(+), 122 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
index cce4894..f69c6fb 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="panel-root">
<PanelHeader title="璐ㄩ噺鎸囨爣鍚堟牸鍒嗘瀽" />
<div class="main-panel panel-item-customers">
<div v-for="section in sections" :key="section.key" class="inspect-block">
@@ -51,10 +51,11 @@
import PanelHeader from './PanelHeader.vue'
import DateTypeSwitch from './DateTypeSwitch.vue'
import { rawMaterialDetection, processDetection, factoryDetection } from '@/api/viewIndex.js'
+import { BI, baseChartOptions } from '../theme.js'
-const QUALIFIED_COLOR = '#4EE4FF'
-const UNQUALIFIED_COLOR = '#3378FF'
-const TRACK_COLOR = 'rgba(78, 228, 255, 0.12)'
+const QUALIFIED_COLOR = BI.accentBright
+const UNQUALIFIED_COLOR = BI.series[2]
+const TRACK_COLOR = 'rgba(74, 108, 240, 0.12)'
const apiMap = {
raw: rawMaterialDetection,
@@ -89,7 +90,7 @@
{
key: 'raw',
title: '鍘熸潗鏂欐娴�',
- dateType: 1,
+ dateType: 3,
qualifiedCount: 0,
unqualifiedCount: 0,
qualifiedRate: 0,
@@ -98,7 +99,7 @@
{
key: 'process',
title: '杩囩▼妫�娴�',
- dateType: 1,
+ dateType: 3,
qualifiedCount: 0,
unqualifiedCount: 0,
qualifiedRate: 0,
@@ -107,7 +108,7 @@
{
key: 'final',
title: '鎴愬搧鍑哄巶妫�娴�',
- dateType: 1,
+ dateType: 3,
qualifiedCount: 0,
unqualifiedCount: 0,
qualifiedRate: 0,
@@ -120,10 +121,7 @@
height: '110px',
}
-const ringOptions = {
- backgroundColor: 'transparent',
- textStyle: { color: '#B8C8E0' },
-}
+const ringOptions = baseChartOptions
const ringTooltip = {
show: false,
@@ -144,7 +142,7 @@
const unqualified = Number(section.unqualifiedCount || 0)
const total = qualified + unqualified
- return [
+ const series = [
{
type: 'pie',
radius: ['68%', '82%'],
@@ -155,7 +153,10 @@
itemStyle: { color: TRACK_COLOR },
data: [1],
},
- {
+ ]
+
+ // 鏁版嵁涓虹┖鏃朵笉娓叉煋涓荤幆锛岄伩鍏� ECharts 绌洪ゼ鍥炬覆鏌撳嚭鐏拌壊鍦嗙幆
+ if (total > 0) series.push({
name: section.title,
type: 'pie',
radius: ['68%', '82%'],
@@ -167,41 +168,36 @@
clockwise: true,
minAngle: total > 0 ? 8 : 0,
itemStyle: {
- borderColor: 'rgba(10, 28, 58, 0.95)',
+ borderColor: BI.sliceBorder,
borderWidth: 2,
+ borderRadius: 4,
},
data: [
{
value: qualified,
name: '鍚堟牸鏁�',
- itemStyle: {
- color: QUALIFIED_COLOR,
- shadowBlur: 16,
- shadowColor: 'rgba(78, 228, 255, 0.45)',
- },
+ itemStyle: { color: QUALIFIED_COLOR },
},
{
value: unqualified,
name: '涓嶅悎鏍兼暟',
- itemStyle: {
- color: UNQUALIFIED_COLOR,
- shadowBlur: 10,
- shadowColor: 'rgba(51, 120, 255, 0.35)',
- },
+ itemStyle: { color: UNQUALIFIED_COLOR },
},
],
- },
- {
+ })
+
+ series.push({
type: 'pie',
radius: ['52%', '56%'],
center: ['50%', '50%'],
silent: true,
label: { show: false },
labelLine: { show: false },
- itemStyle: { color: 'rgba(0, 127, 255, 0.22)' },
+ itemStyle: { color: 'rgba(74, 108, 240, 0.22)' },
data: [1],
- },
- ]
+ })
+
+ return series
}
const handleDateTypeChange = (key, dateType) => {
@@ -221,10 +217,19 @@
</script>
<style scoped lang="scss">
+.panel-root {
+ flex: 1;
+ height: 100%;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+}
+
.main-panel {
display: flex;
flex-direction: column;
- height: 100%;
+ flex: 1;
+ min-height: 0;
gap: 0;
}
@@ -237,74 +242,35 @@
.filters-row-left {
width: 50%;
- color: white;
- /* 鐢╢lex鏇夸唬float锛岃瀛愬厓绱犲榻愭洿绋冲畾 */
+ color: var(--bi-text-strong);
display: flex;
align-items: center;
+ gap: 8px;
+ /* 鍝佺墝钃濈粏绔栨潯锛屼笌 PanelHeader 鍛煎簲 */
span {
- /* 鏍稿績锛氱埗绾х浉瀵瑰畾浣嶏紝浣滀负浼厓绱犲熀鍑� */
- position: relative;
- display: inline-block;
- /* 缁欎吉鍏冪礌鍜屾枃瀛楃暀绌洪棿 */
- padding-left: 22px;
- /* 鏂囧瓧鍨傜洿灞呬腑 */
- line-height: 23px;
- margin-right: 8px;
-
- &::after {
- content: '';
- display: inline-block;
- width: 16px;
- height: 16px;
- clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
- background: #217AFF;
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- /* 纭繚鑿卞舰鍦ㄦ笎鍙樺潡涓婃柟 */
- z-index: 1;
- }
-
- &::before {
- content: '';
- display: inline-block;
- width: 18px;
- height: 7px;
- border-radius: 8px;
- background: linear-gradient(360deg, rgba(33, 133, 255, 0.4) 0%, rgba(33, 221, 255, 0) 100%);
- position: absolute;
- top: 50%;
- left: -1px;
- /* 绮惧噯璐村湪鑿卞舰姝ｄ笅鏂� */
- transform: translateY(calc(0% + 8px));
- z-index: 0;
- }
+ flex-shrink: 0;
+ width: 3px;
+ height: 14px;
+ border-radius: 2px;
+ background: linear-gradient(180deg, var(--bi-accent-bright) 0%, var(--bi-accent) 100%);
}
p {
- width: 100px;
- height: 23px;
- /* 娓愬彉璧峰鑹插拰鑿卞舰缁熶竴锛屾洿鍗忚皟 */
- background: linear-gradient(90deg, #217AFF 0%, rgba(33, 221, 255, 0) 100%);
- /* 绮惧噯鍨傜洿灞呬腑 */
- line-height: 26px;
- text-align: center;
- color: white;
- /* 鐢ㄩ珮搴︾殑涓�鍗婂仛鍦嗚锛岀‘淇濆乏杈规槸瀹岀編鍗婂渾 */
- border-radius: 12px 0 0 12px;
- /* 鍙�夛細鍔犱竴鐐瑰乏鍐呰竟璺濓紝璁╂枃瀛椾笉璐磋竟 */
- padding-left: 4px;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ color: var(--bi-text-strong);
}
}
}
.panel-item-customers {
- border: 1px solid #1a58b0;
+ border: 1px solid var(--bi-panel-border);
+ background: var(--bi-panel-bg);
+ border-radius: 8px;
padding: 14px 18px;
width: 100%;
- height: 958px;
box-sizing: border-box;
}
@@ -325,7 +291,7 @@
right: 0;
bottom: 0;
height: 1px;
- background: linear-gradient(90deg, rgba(33, 122, 255, 0) 0%, rgba(33, 122, 255, 0.55) 50%, rgba(33, 122, 255, 0) 100%);
+ background: linear-gradient(90deg, rgba(74, 108, 240, 0) 0%, rgba(74, 108, 240, 0.55) 50%, rgba(74, 108, 240, 0) 100%);
pointer-events: none;
}
@@ -348,32 +314,6 @@
justify-content: center;
}
-/* 澶栧湀鍒诲害锛堢偣鐘剁幆锛� */
-.ring::before {
- content: '';
- position: absolute;
- inset: -8px;
- border-radius: 50%;
- background: repeating-conic-gradient(from 0deg,
- rgba(78, 228, 255, 0.75) 0 1deg,
- rgba(78, 228, 255, 0) 1deg 9deg);
- -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
- mask: radial-gradient(circle, transparent 62%, #000 63%);
- opacity: 0.35;
- pointer-events: none;
-}
-
-/* 鏌斿拰鍙戝厜鑳屾櫙 */
-.ring::after {
- content: '';
- position: absolute;
- inset: -20px;
- border-radius: 50%;
- background: radial-gradient(circle, rgba(78, 228, 255, 0.18) 0%, rgba(78, 228, 255, 0.06) 40%, rgba(0, 0, 0, 0) 70%);
- filter: blur(0.2px);
- pointer-events: none;
-}
-
.stats {
width: 240px;
flex: 0 0 240px;
@@ -388,17 +328,16 @@
align-items: center;
height: 100%;
padding: 10px 14px;
- border-radius: 4px;
- border: 1px solid rgba(78, 228, 255, 0.22);
- background: linear-gradient(90deg, rgba(33, 122, 255, 0.28) 0%, rgba(10, 28, 58, 0.35) 55%, rgba(10, 28, 58, 0.2) 100%);
- box-shadow: inset 0 0 18px rgba(16, 45, 95, 0.25);
+ border-radius: 6px;
+ border: 1px solid var(--bi-panel-border);
+ background: rgba(13, 24, 52, 0.6);
}
.stat-left {
display: inline-flex;
align-items: center;
gap: 10px;
- color: #b8c8e0;
+ color: var(--bi-text);
font-size: 12px;
}
@@ -407,15 +346,14 @@
height: 10px;
border-radius: 2px;
display: inline-block;
- box-shadow: 0 0 10px rgba(78, 228, 255, 0.25);
}
.dot-qualified {
- background: rgba(184, 200, 224, 0.85);
+ background: var(--bi-accent-bright);
}
.dot-unqualified {
- background: #4ee4ff;
+ background: #8E7CE6;
}
.stat-right {
@@ -425,19 +363,20 @@
}
.stat-value {
- color: #ffffff;
+ color: var(--bi-text-strong);
font-size: 14px;
font-weight: 600;
min-width: 40px;
text-align: right;
- text-shadow: 0 0 10px rgba(78, 228, 255, 0.15);
+ font-variant-numeric: tabular-nums;
}
.stat-percent {
- color: rgba(184, 200, 224, 0.95);
+ color: var(--bi-text);
font-size: 12px;
min-width: 40px;
text-align: right;
+ font-variant-numeric: tabular-nums;
}
/* 璁╁垏鎹㈡寜閽洿璐磋繎鎴浘锛堟洿绱у噾锛� */
--
Gitblit v1.9.3