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/PSIDataAnalysis/components/center-center.vue | 70 +++++++++-------------------------
1 files changed, 19 insertions(+), 51 deletions(-)
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
index 0f3ec84..c7d5eb6 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
@@ -1,15 +1,8 @@
<template>
<div>
- <!-- 璁惧缁熻 -->
+ <!-- 浜у搧鍛ㄨ浆澶╂暟 -->
<div class="equipment-stats">
- <div class="equipment-header">
- <img
- src="@/assets/BI/shujutongjiicon@2x.png"
- alt="鍥炬爣"
- class="equipment-icon"
- />
- <span class="equipment-title">浜у搧鍛ㄨ浆澶╂暟</span>
- </div>
+ <PanelHeader title="浜у搧鍛ㄨ浆澶╂暟" />
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -19,7 +12,7 @@
:tooltip="tooltip"
:xAxis="xAxis1"
:yAxis="yAxis1"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ :options="baseOptions"
style="height: 260px"
/>
</div>
@@ -29,11 +22,14 @@
<script setup>
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
+import PanelHeader from './PanelHeader.vue'
import { productTurnoverDays } from '@/api/viewIndex.js'
+import { BI, baseChartOptions, withTooltip } from '../theme.js'
const chartStyle = { width: '100%', height: '100%' }
const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true }
-const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['鍛ㄨ浆澶╂暟'] }
+const barLegend = { show: false, textStyle: { color: BI.text }, data: ['鍛ㄨ浆澶╂暟'] }
+const baseOptions = baseChartOptions
const barSeries1 = ref([
{
name: '鍛ㄨ浆澶╂暟',
@@ -42,19 +38,20 @@
barWidth: 30,
emphasis: { focus: 'series' },
itemStyle: {
+ borderRadius: [4, 4, 0, 0],
color: {
type: 'linear',
x: 0, y: 1, x2: 0, y2: 0,
colorStops: [
- { offset: 0, color: 'rgba(0,164,237,0)' },
- { offset: 1, color: '#4EE4FF' },
+ { offset: 0, color: 'rgba(74, 108, 240, 0.05)' },
+ { offset: 1, color: BI.accentBright },
],
},
},
data: [],
},
])
-const tooltip = {
+const tooltip = withTooltip({
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter(params) {
@@ -64,9 +61,9 @@
})
return result
},
-}
-const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }])
-const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]
+})
+const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: BI.text }, data: [] }])
+const yAxis1 = [{ type: 'value', axisLabel: { color: BI.text } }]
const fetchData = () => {
productTurnoverDays()
@@ -89,41 +86,12 @@
<style scoped>
.equipment-stats {
- border: 1px solid #1a58b0;
- padding: 0 18px 18px;
+ border: 1px solid var(--bi-panel-border);
+ background: var(--bi-panel-bg);
+ border-radius: 8px;
+ padding: 10px 18px 18px;
display: flex;
flex-direction: column;
- gap: 16px;
-}
-
-.equipment-header {
- font-weight: 500;
- font-size: 21px;
- display: flex;
- border-bottom: 1px solid;
- border-image: linear-gradient(
- 270deg,
- rgba(0, 126, 255, 0) 0%,
- rgba(0, 126, 255, 0.4549) 35%,
- #007eff 78%,
- #007eff 100%
- )
- 1;
- padding-bottom: 2px;
-}
-
-.equipment-title {
- font-weight: 500;
- font-size: 18px;
- background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- line-height: 50px;
-}
-
-.equipment-icon {
- width: 50px;
- height: 50px;
+ gap: 6px;
}
</style>
--
Gitblit v1.9.3