From bb4e98349106bb1d8f9ee093001bff1428fd0ebc Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 03 四月 2026 13:09:22 +0800
Subject: [PATCH] PSI数据分析:移除”中心顶部"功能，更新"中心中心“布局以及数据获取逻辑
---
/dev/null | 137 ----------------------
src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue | 189 ++++++++++++++++--------------
src/views/reportAnalysis/PSIDataAnalysis/index.vue | 4
3 files changed, 102 insertions(+), 228 deletions(-)
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
index 0f3ec84..9a4852e 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
@@ -1,84 +1,52 @@
<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 class="kpi-stack">
+ <div class="stats-cards">
+ <div
+ v-for="item in statItems"
+ :key="item.name"
+ class="stat-card"
+ >
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">{{ item.name }}</span>
+ <span class="card-value">{{ item.value }}</span>
+ <div class="card-compare" :class="compareClass(Number(item.rate))">
+ <span>鍚屾瘮</span>
+ <span class="compare-value">{{ formatPercent(item.rate) }}</span>
+ <span class="compare-icon">{{ Number(item.rate) >= 0 ? '鈫�' : '鈫�' }}</span>
+ </div>
+ </div>
</div>
- <Echarts
- ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="barLegend"
- :series="barSeries1"
- :tooltip="tooltip"
- :xAxis="xAxis1"
- :yAxis="yAxis1"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
- style="height: 260px"
- />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
-import Echarts from '@/components/Echarts/echarts.vue'
-import { productTurnoverDays } from '@/api/viewIndex.js'
+import { salesPurchaseStorageProductCount } from '@/api/viewIndex.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 barSeries1 = ref([
- {
- name: '鍛ㄨ浆澶╂暟',
- type: 'bar',
- barGap: 0,
- barWidth: 30,
- emphasis: { focus: 'series' },
- itemStyle: {
- color: {
- type: 'linear',
- x: 0, y: 1, x2: 0, y2: 0,
- colorStops: [
- { offset: 0, color: 'rgba(0,164,237,0)' },
- { offset: 1, color: '#4EE4FF' },
- ],
- },
- },
- data: [],
- },
-])
-const tooltip = {
- trigger: 'axis',
- axisPointer: { type: 'shadow' },
- formatter(params) {
- let result = params[0].axisValueLabel + '<br/>'
- params.forEach((item) => {
- result += `<div>${item.marker} ${item.seriesName}: ${item.value} 澶�</div>`
- })
- return result
- },
+const statItems = ref([])
+
+const formatPercent = (val) => {
+ const num = Number(val) || 0
+ return `${num.toFixed(2)}%`
}
-const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }])
-const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]
+
+const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
const fetchData = () => {
- productTurnoverDays()
+ salesPurchaseStorageProductCount()
.then((res) => {
if (res.code === 200 && Array.isArray(res.data)) {
- const list = res.data
- xAxis1.value[0].data = list.map((d) => d.name)
- barSeries1.value[0].data = list.map((d) => Number(d.value) || 0)
+ statItems.value = res.data.map((item) => ({
+ name: item.name,
+ value: item.value,
+ rate: item.rate,
+ }))
}
})
.catch((err) => {
- console.error('鑾峰彇浜у搧鍛ㄨ浆澶╂暟澶辫触:', err)
+ console.error('鑾峰彇閿�鍞�/閲囪喘/鍌ㄥ瓨浜у搧鏁板け璐�:', err)
})
}
@@ -88,42 +56,87 @@
</script>
<style scoped>
-.equipment-stats {
- border: 1px solid #1a58b0;
- padding: 0 18px 18px;
+.kpi-stack {
+ flex-shrink: 0;
+}
+
+.stats-cards {
display: flex;
flex-direction: column;
- gap: 16px;
+ gap: 30px;
}
-.equipment-header {
- font-weight: 500;
- font-size: 21px;
+.stat-card {
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;
+ align-items: center;
+ background-image: url('@/assets/BI/border@2x.png');
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 142px;
+ width: 100%;
+ box-sizing: border-box;
}
-.equipment-title {
+.card-icon {
+ width: 100px;
+ height: 100px;
+ margin: 20px 20px 0 10px;
+ flex-shrink: 0;
+}
+
+.card-content {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ min-width: 0;
+}
+
+.card-value {
font-weight: 500;
- font-size: 18px;
- background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
+ font-size: 40px;
+ background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
- line-height: 50px;
}
-.equipment-icon {
- width: 50px;
- height: 50px;
+.card-label {
+ font-weight: 400;
+ font-size: 19px;
+ color: rgba(208, 231, 255, 0.7);
+}
+
+.card-compare {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 15px;
+ color: #d0e7ff;
+}
+
+.card-compare > span:first-child {
+ font-size: 13px;
+ opacity: 0.8;
+}
+
+.compare-value {
+ font-weight: 600;
+}
+
+.compare-icon {
+ font-size: 14px;
+ position: relative;
+ top: -1px;
+}
+
+.compare-up .compare-value,
+.compare-up .compare-icon {
+ color: #00c853;
+}
+
+.compare-down .compare-value,
+.compare-down .compare-icon {
+ color: #ff5252;
}
</style>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-top.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-top.vue
deleted file mode 100644
index 0937b32..0000000
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/center-top.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
- <div>
- <!-- 椤堕儴缁熻鍗＄墖 -->
- <div class="stats-cards">
- <div
- v-for="item in statItems"
- :key="item.name"
- class="stat-card"
- >
- <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
- <div class="card-content">
- <span class="card-label">{{ item.name }}</span>
- <span class="card-value">{{ item.value }}</span>
- <div class="card-compare" :class="compareClass(Number(item.rate))">
- <span>鍚屾瘮</span>
- <span class="compare-value">{{ formatPercent(item.rate) }}</span>
- <span class="compare-icon">{{ Number(item.rate) >= 0 ? '鈫�' : '鈫�' }}</span>
- </div>
- </div>
- </div>
- </div>
-
- </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js'
-
-const statItems = ref([])
-
-const formatPercent = (val) => {
- const num = Number(val) || 0
- return `${num.toFixed(2)}%`
-}
-
-const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
-
-const fetchData = () => {
- salesPurchaseStorageProductCount()
- .then((res) => {
- if (res.code === 200 && Array.isArray(res.data)) {
- statItems.value = res.data.map((item) => ({
- name: item.name,
- value: item.value,
- rate: item.rate,
- }))
- }
- })
- .catch((err) => {
- console.error('鑾峰彇閿�鍞�/閲囪喘/鍌ㄥ瓨浜у搧鏁板け璐�:', err)
- })
-}
-
-onMounted(() => {
- fetchData()
-})
-</script>
-
-<style scoped>
-.stats-cards {
- display: flex;
- gap: 30px;
-}
-
-.stat-card {
- flex: 1;
- display: flex;
- align-items: center;
- background-image: url('@/assets/BI/border@2x.png');
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
- height: 142px;
-}
-
-.card-icon {
- width: 100px;
- height: 100px;
- margin: 20px 20px 0 10px;
-}
-
-.card-content {
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
-
-.card-value {
- font-weight: 500;
- font-size: 40px;
- background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.card-label {
- font-weight: 400;
- font-size: 19px;
- color: rgba(208, 231, 255, 0.7);
-}
-
-.card-compare {
- display: flex;
- align-items: center;
- gap: 6px;
- font-size: 15px;
- color: #d0e7ff;
-}
-
-.card-compare > span:first-child {
- font-size: 13px;
- opacity: 0.8;
-}
-
-.compare-value {
- font-weight: 600;
-}
-
-.compare-icon {
- font-size: 14px;
- position: relative;
- top: -1px; /* 杞诲井涓婄Щ锛岃绠ご涓庢枃瀛楀瀭鐩村眳涓榻� */
-}
-
-.compare-up .compare-value,
-.compare-up .compare-icon {
- color: #00c853;
-}
-
-.compare-down .compare-value,
-.compare-down .compare-icon {
- color: #ff5252;
-}
-
-</style>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/index.vue b/src/views/reportAnalysis/PSIDataAnalysis/index.vue
index 065b59d..66d9c33 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/index.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/index.vue
@@ -27,8 +27,7 @@
<!-- 涓棿鍖哄煙 -->
<div class="center-panel">
- <CenterTop />
- <CenterCenter/>
+ <CenterCenter />
<CenterBottom />
</div>
@@ -51,7 +50,6 @@
import RightBottom from '../dataDashboard/components/basic/right-bottom.vue'
import useUserStore from '@/store/modules/user'
import LeftTop from './components/left-top.vue'
-import CenterTop from './components/center-top.vue'
import CenterBottom from './components/center-bottom.vue'
// 鍏ㄥ睆鐩稿叧鐘舵��
--
Gitblit v1.9.3