| | |
| | | v-for="item in statItems" |
| | | :key="item.name" |
| | | class="stat-card" |
| | | :class="{ clickable: !!getStatRoute(item.name) }" |
| | | @click="handleStatClick(item.name)" |
| | | > |
| | | <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" /> |
| | | <div class="card-content"> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js' |
| | | import { ref, onMounted, inject, watch } from 'vue' |
| | | import { useRouter } from 'vue-router' |
| | | import { orderCount } from '@/api/viewIndex.js' |
| | | import { getProductionRoute } from '../productionNavigation.js' |
| | | |
| | | const router = useRouter() |
| | | const statItems = ref([]) |
| | | |
| | | const getStatRoute = (name) => getProductionRoute(name) |
| | | |
| | | const handleStatClick = (name) => { |
| | | const path = getStatRoute(name) |
| | | if (path) { |
| | | router.push(path) |
| | | } |
| | | } |
| | | |
| | | const formatPercent = (val) => { |
| | | const num = Number(val) || 0 |
| | |
| | | const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down') |
| | | |
| | | const fetchData = () => { |
| | | salesPurchaseStorageProductCount() |
| | | orderCount() |
| | | .then((res) => { |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | statItems.value = res.data.map((item) => ({ |
| | |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取销售/采购/储存产品数失败:', err) |
| | | console.error('获取订单数量统计失败:', err) |
| | | }) |
| | | } |
| | | |
| | | const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null) |
| | | if (dataDashboardRefreshTick) { |
| | | watch(dataDashboardRefreshTick, () => { |
| | | fetchData() |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | height: 142px; |
| | | } |
| | | |
| | | .stat-card.clickable { |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .stat-card.clickable:hover .card-label { |
| | | color: #43e8fc; |
| | | } |
| | | |
| | | .card-icon { |
| | |
| | | |
| | | .card-label { |
| | | font-weight: 400; |
| | | font-size: 19px; |
| | | font-size: 16px; |
| | | color: rgba(208, 231, 255, 0.7); |
| | | } |
| | | |