From 519211ac232866afe6b081ae4a97916ad5f1d7d2 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 17:58:57 +0800
Subject: [PATCH] fix: 排名样式修改
---
src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue | 519 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 519 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue
new file mode 100644
index 0000000..1cbdaa1
--- /dev/null
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue
@@ -0,0 +1,519 @@
+<template>
+ <div>
+ <!-- 椤堕儴缁熻鍗＄墖 -->
+ <div class="stats-cards">
+ <div class="stat-card">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">鍛樺伐鎬绘暟</span>
+ <span class="card-value">{{ totalStaff }}</span>
+ <div class="card-compare" :class="compareClass(staffYoY)">
+ <span>鍚屾瘮</span>
+ <span class="compare-value">{{ formatPercent(staffYoY) }}</span>
+ <span class="compare-icon">{{ staffYoY >= 0 ? '鈫�' : '鈫�' }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="stat-card">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">瀹㈡埛鎬绘暟</span>
+ <span class="card-value">{{ totalCustomers }}</span>
+ <div class="card-compare" :class="compareClass(customersYoY)">
+ <span>鍚屾瘮</span>
+ <span class="compare-value">{{ formatPercent(customersYoY) }}</span>
+ <span class="compare-icon">{{ customersYoY >= 0 ? '鈫�' : '鈫�' }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="stat-card">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">渚涘簲鍟嗘�绘暟</span>
+ <span class="card-value">{{ totalSuppliers }}</span>
+ <div class="card-compare" :class="compareClass(suppliersYoY)">
+ <span>鍚屾瘮</span>
+ <span class="compare-value">{{ formatPercent(suppliersYoY) }}</span>
+ <span class="compare-icon">{{ suppliersYoY >= 0 ? '鈫�' : '鈫�' }}</span>
+ </div>
+ </div>
+ </div>
+ </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>
+ <div class="equipment-items">
+ <div class="equipment-item">
+ <span class="equipment-value">{{ equipmentNum }}</span>
+ <span class="equipment-label">璁惧鎬绘暟</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{ equipmentRepair }}</span>
+ <span class="equipment-label">寰呯淮淇澶�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{ equipmentMaintain }}</span>
+ <span class="equipment-label">寰呬繚鍏昏澶�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{ totalMeasuring }}</span>
+ <span class="equipment-label">璁￠噺鍣ㄥ叿鎬绘暟</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- 浜嬩欢鍚嶇О -->
+ <div class="event-info">
+ <div class="event-header">
+ <img
+ src="@/assets/BI/shijianmingxiicon@2x.png"
+ alt="鍥炬爣"
+ class="event-icon"
+ />
+ <span class="event-title">浜嬩欢鍚嶇О</span>
+ </div>
+ <div class="event-content">
+ <ul class="todo-list" v-if="todoList.length > 0" ref="refTodoList">
+ <li v-for="item in todoList" :key="item.id">
+ <div
+ style="
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ gap: 20px;
+ "
+ >
+ <div class="todo-division">寰呭姙浜嬬敱锛歿{ item.approveReason }}</div>
+ <div style="display: flex;justify-content: space-between;align-items: center;"
+ >
+ <div class="todo-title">鐢宠绫诲瀷锛歿{ item.approveTypeName }}</div>
+ <div class="todo-division">鐢宠閮ㄩ棬锛歿{ item.approveDeptName }}</div>
+ <div class="todo-time">{{ item.approveTime }}</div>
+ </div>
+
+ </div>
+ </li>
+ </ul>
+ <div v-else style="text-align: center">鏆傛棤鏁版嵁</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { homeTodos, summaryStatistics } from '@/api/viewIndex.js'
+import { getLedgerPage } from '@/api/equipmentManagement/ledger.js'
+import { getRepairPage } from '@/api/equipmentManagement/repair.js'
+import { getUpkeepPage } from '@/api/equipmentManagement/upkeep.js'
+import { measuringInstrumentListPage } from '@/api/equipmentManagement/measurementEquipment.js'
+
+// 缁熻鏁版嵁
+const totalStaff = ref(0)
+const totalCustomers = ref(0)
+const totalSuppliers = ref(0)
+// 鍚屾瘮
+const staffYoY = ref(0)
+const customersYoY = ref(0)
+const suppliersYoY = ref(0)
+const equipmentNum = ref(0)
+const equipmentRepair = ref(0)
+const equipmentMaintain = ref(0)
+const totalMeasuring = ref(0)
+
+// 寰呭姙浜嬮」
+const todoList = ref([])
+const refTodoList = ref(null)
+
+const formatPercent = (val) => {
+ const num = Number(val) || 0
+ return `${Math.abs(num).toFixed(2)}%`
+}
+
+const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
+
+// 鑾峰彇鍛樺伐銆佸鎴枫�佷緵搴斿晢鏁伴噺
+const getNum = () => {
+ summaryStatistics().then((res) => {
+ totalStaff.value = res.data.totalStaff
+ staffYoY.value = res.data.staffGrowthRate
+ totalCustomers.value = res.data.totalCustomer
+ customersYoY.value = res.data.customerGrowthRate
+ totalSuppliers.value = res.data.totalSupplier
+ suppliersYoY.value = res.data.supplierGrowthRate
+ }).catch(err => {
+ console.error('鑾峰彇鍩虹缁熻鏁版嵁澶辫触:', err)
+ })
+}
+
+// 鑾峰彇璁惧鐩稿叧鏁伴噺
+const getLedgerNum = () => {
+ const params = {
+ pageNum: -1,
+ pageSize: -1,
+ }
+ getLedgerPage(params).then((res) => {
+ equipmentNum.value = res.data.total
+ })
+ getRepairPage({ ...params, status: 0 }).then((res) => {
+ equipmentRepair.value = res.data.total
+ })
+ getUpkeepPage({ ...params, status: 0 }).then((res) => {
+ equipmentMaintain.value = res.data.total
+ })
+ measuringInstrumentListPage(params).then((res) => {
+ totalMeasuring.value = res.data.total
+ })
+}
+
+// 鍒濆鍖栧緟鍔炰簨椤瑰垪琛ㄦ粴鍔ㄥ姛鑳�
+const initTodoListScroll = () => {
+ const todoListEl = refTodoList.value
+ // 寮哄埗鍚敤婊氬姩锛屼笉妫�鏌ヤ换浣曟潯浠�
+ if (todoListEl) {
+ // 鍒涘缓涓�涓厠闅嗛」锛岀敤浜庡疄鐜版棤缂濇粴鍔�
+ const scrollItems = Array.from(todoListEl.querySelectorAll('li'))
+ if (scrollItems.length > 0) {
+ // 纭繚鏈夎冻澶熺殑椤圭洰鐢ㄤ簬婊氬姩
+ // 濡傛灉椤圭洰澶皯锛屽澶嶅埗鍑犳浠ョ‘淇濇粴鍔ㄦ晥鏋�
+ if (scrollItems.length < 4) {
+ const originalItems = [...scrollItems]
+ for (let i = 0; i < 4; i++) {
+ originalItems.forEach((item) => {
+ const clone = item.cloneNode(true)
+ todoListEl.appendChild(clone)
+ })
+ }
+ // 閲嶆柊鑾峰彇鎵�鏈夐」鐩�
+ scrollItems.push(
+ ...Array.from(todoListEl.querySelectorAll('li')).slice(
+ scrollItems.length
+ )
+ )
+ }
+ const itemHeight = scrollItems[0]?.offsetHeight || 0
+ const containerHeight = todoListEl.clientHeight
+ const cloneCount = Math.ceil(containerHeight / itemHeight) + 2
+
+ // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
+ for (let i = 0; i < cloneCount; i++) {
+ const clone = scrollItems[i % scrollItems.length].cloneNode(true)
+ todoListEl.appendChild(clone)
+ }
+
+ let scrollPosition = 0
+ const scrollSpeed = 1.5 // 澧炲姞婊氬姩閫熷害锛屼娇婊氬姩鏇村姞鏄庢樉
+ const pauseTime = 3000 // 婊氬姩鏆傚仠鏃堕棿
+ let isPaused = false
+ let lastTimestamp = 0
+
+ // 杩炵画婊氬姩鍔ㄧ敾鍑芥暟
+ function scrollAnimation(timestamp) {
+ if (!lastTimestamp) lastTimestamp = timestamp
+ const deltaTime = timestamp - lastTimestamp
+ lastTimestamp = timestamp
+
+ if (!isPaused) {
+ scrollPosition += scrollSpeed * (deltaTime / 16) // 鏍囧噯鍖栦负60fps鐨勯�熷害
+
+ // 褰撴粴鍔ㄨ秴杩囧師濮嬪唴瀹归暱搴︽椂锛岄噸缃綅缃疄鐜版棤缂濇粴鍔�
+ const maxScroll = Math.max(
+ todoListEl.scrollHeight -
+ containerHeight -
+ cloneCount * itemHeight,
+ itemHeight * scrollItems.length
+ )
+ if (scrollPosition >= maxScroll) {
+ scrollPosition = 0
+ todoListEl.scrollTop = 0
+ } else {
+ todoListEl.scrollTop = scrollPosition
+ }
+ }
+
+ todoListEl._animationFrame = requestAnimationFrame(scrollAnimation)
+ }
+
+ // 鍚姩婊氬姩鍔ㄧ敾
+ todoListEl._animationFrame = requestAnimationFrame(scrollAnimation)
+
+ // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
+ const pauseTimer = setInterval(() => {
+ isPaused = !isPaused
+ }, pauseTime)
+
+ // 娓呯悊瀹氭椂鍣�
+ todoListEl._pauseTimer = pauseTimer
+ }
+ }
+}
+
+// 寰呭姙浜嬮」
+const todoInfoS = () => {
+ homeTodos().then((res) => {
+ todoList.value = res.data
+ // 鍦ㄨ幏鍙栧埌寰呭姙浜嬮」鏁版嵁鍚庯紝鍒濆鍖栨粴鍔ㄥ姛鑳�
+ nextTick(() => {
+ initTodoListScroll()
+ })
+ })
+}
+
+onMounted(() => {
+ getNum()
+ getLedgerNum()
+ todoInfoS()
+})
+
+onBeforeUnmount(() => {
+ // 娓呯悊寰呭姙浜嬮」鍒楄〃鐨勫姩鐢诲拰瀹氭椂鍣�
+ const todoListEl = refTodoList.value
+ if (todoListEl) {
+ if (todoListEl._animationFrame) {
+ cancelAnimationFrame(todoListEl._animationFrame)
+ todoListEl._animationFrame = null
+ }
+ if (todoListEl._pauseTimer) {
+ clearInterval(todoListEl._pauseTimer)
+ todoListEl._pauseTimer = null
+ }
+ }
+})
+</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;
+}
+
+.equipment-stats {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ height: 240px;
+}
+
+.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;
+}
+
+.equipment-items {
+ display: flex;
+ justify-content: space-around;
+ gap: 30px;
+}
+
+.equipment-item {
+ text-align: center;
+}
+
+.equipment-value {
+ display: block;
+ font-weight: 500;
+ font-size: 40px;
+ color: #ffffff;
+ width: 120px;
+ height: 110px;
+ line-height: 110px;
+ background-image: url('@/assets/BI/shujutongji@2x.png');
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-bottom: 8px;
+}
+
+.equipment-label {
+ font-weight: 500;
+ font-size: 16px;
+ color: #fffffe;
+}
+
+.event-info {
+ background-image: url('@/assets/BI/shijianmingchengbeijing@2x.png');
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ padding: 20px;
+ height: 186px;
+}
+
+.event-header {
+ display: flex;
+ align-items: center;
+}
+
+.event-icon {
+ width: 40px;
+ height: 40px;
+}
+
+.event-title {
+ font-weight: 500;
+ font-size: 18px;
+ color: #fffffe;
+ line-height: 30px;
+}
+
+.todo-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ height: 120px; /* 鎸夌敤鎴疯姹傝皟鏁撮珮搴� */
+ overflow: hidden;
+ font-size: 15px;
+}
+
+.todo-list li {
+ border-radius: 8px;
+ margin-bottom: 12px;
+ padding: 12px 40px;
+ height: 74px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.todo-title {
+ font-weight: 400;
+ font-size: 16px;
+ color: #fffffe;
+ position: relative;
+}
+
+
+
+.todo-division {
+ font-weight: 400;
+ font-size: 16px;
+ color: #fffffe;
+ position: relative;
+}
+
+.todo-division::before {
+ content: '';
+ position: absolute;
+ left: -20px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 6px;
+ height: 6px;
+ background: #498ceb;
+ border-radius: 50%;
+}
+
+.todo-time {
+ font-weight: 400;
+ font-size: 16px;
+ color: #fffffe;
+ background: rgba(24, 93, 190, 0.4);
+border-radius: 5px 5px 5px 5px;
+padding: 5px 10px;
+}
+</style>
--
Gitblit v1.9.3