refactor(重构首页): ♻️ 使用静态数据循环渲染
This commit is contained in:
april
parent
3e8e366a5a
commit
c6dc77206d
|
|
@ -22,32 +22,18 @@
|
|||
|
||||
<el-col :span="6" :xs="24">
|
||||
<div class="flex h-full items-center justify-around">
|
||||
<el-statistic :value="99">
|
||||
<el-statistic
|
||||
v-for="item in statisticData"
|
||||
:key="item.key"
|
||||
:value="item.value"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<svg-icon icon-class="message" size="20px" />
|
||||
<span class="text-[16px] ml-1">消息</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-statistic>
|
||||
|
||||
<el-statistic :value="50">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<svg-icon icon-class="todolist" size="20px" />
|
||||
<span class="text-[16px] ml-1">待办</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #suffix>/100</template>
|
||||
</el-statistic>
|
||||
|
||||
<el-statistic :value="10">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<svg-icon icon-class="project" size="20px" />
|
||||
<span class="text-[16px] ml-1">项目</span>
|
||||
<svg-icon :icon-class="item.iconClass" size="20px" />
|
||||
<span class="text-[16px] ml-1">{{ item.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.suffix" #suffix>/100</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -56,105 +42,37 @@
|
|||
|
||||
<!-- 数据卡片 -->
|
||||
<el-row :gutter="10" class="mt-3">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:lg="6"
|
||||
v-for="(item, index) in cardData"
|
||||
:key="index"
|
||||
>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]">访客数</span>
|
||||
<el-tag type="success">日</el-tag>
|
||||
<span class="text-[var(--el-text-color-secondary)]">{{
|
||||
item.title
|
||||
}}</span>
|
||||
<el-tag :type="item.tagType">
|
||||
{{ item.tagText }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex items-center justify-between mt-5">
|
||||
<div class="text-lg text-right">
|
||||
{{ Math.round(visitCountOutput) }}
|
||||
{{ Math.round(item.count) }}
|
||||
</div>
|
||||
<svg-icon icon-class="visit" size="2em" />
|
||||
<svg-icon :icon-class="item.iconClass" size="2em" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总访客数 </span>
|
||||
<span> {{ Math.round(visitCountOutput * 15) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!--消息数-->
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]">IP数</span>
|
||||
<el-tag type="success">日</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex items-center justify-between mt-5">
|
||||
<div class="text-lg text-right">
|
||||
{{ Math.round(dauCountOutput) }}
|
||||
</div>
|
||||
<svg-icon icon-class="ip" size="2em" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总IP数 </span>
|
||||
<span> {{ Math.round(dauCountOutput) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!--销售额-->
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]">销售额</span>
|
||||
<el-tag>月</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex items-center justify-between mt-5">
|
||||
<div class="text-lg text-right">
|
||||
{{ Math.round(amountOutput) }}
|
||||
</div>
|
||||
<svg-icon icon-class="money" size="2em" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总销售额 </span>
|
||||
<span> {{ Math.round(amountOutput * 15) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!--订单量-->
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]">订单量</span>
|
||||
<el-tag type="danger">季</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex items-center justify-between mt-5">
|
||||
<div class="text-lg text-right">
|
||||
{{ Math.round(orderCountOutput) }}
|
||||
</div>
|
||||
<svg-icon icon-class="order" size="2em" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总订单量 </span>
|
||||
<span> {{ Math.round(orderCountOutput * 15) }} </span>
|
||||
<span> {{ item.dataDesc }} </span>
|
||||
<span> {{ Math.round(item.count * 15) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -162,27 +80,17 @@
|
|||
|
||||
<!-- Echarts 图表 -->
|
||||
<el-row :gutter="10" class="mt-3">
|
||||
<el-col :sm="24" :lg="8" class="mb-2">
|
||||
<BarChart
|
||||
id="barChart"
|
||||
height="400px"
|
||||
width="100%"
|
||||
class="bg-[var(--el-bg-color-overlay)]"
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="mb-2">
|
||||
<PieChart
|
||||
id="pieChart"
|
||||
height="400px"
|
||||
width="100%"
|
||||
class="bg-[var(--el-bg-color-overlay)]"
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="mb-2">
|
||||
<RadarChart
|
||||
id="radarChart"
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:lg="8"
|
||||
class="mb-2"
|
||||
v-for="item in chartData"
|
||||
:key="item"
|
||||
>
|
||||
<component
|
||||
:is="chartComponent(item)"
|
||||
:id="item"
|
||||
height="400px"
|
||||
width="100%"
|
||||
class="bg-[var(--el-bg-color-overlay)]"
|
||||
|
|
@ -193,6 +101,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
|
||||
defineOptions({
|
||||
name: "Dashboard",
|
||||
inheritAttrs: false,
|
||||
|
|
@ -252,6 +161,82 @@ const orderCountOutput = useTransition(orderCount, {
|
|||
transition: TransitionPresets.easeOutExpo,
|
||||
});
|
||||
orderCount.value = 2000;
|
||||
|
||||
// 右上角数量
|
||||
const statisticData = ref([
|
||||
{
|
||||
value: 99,
|
||||
iconClass: "message",
|
||||
title: "消息",
|
||||
key: "message",
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
iconClass: "todolist",
|
||||
title: "待办",
|
||||
suffix: "/100",
|
||||
key: "upcoming",
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
iconClass: "project",
|
||||
title: "项目",
|
||||
key: "project",
|
||||
},
|
||||
]);
|
||||
|
||||
interface CardProp {
|
||||
title: string;
|
||||
tagType: EpPropMergeType<
|
||||
StringConstructor,
|
||||
"primary" | "success" | "info" | "warning" | "danger",
|
||||
unknown
|
||||
>;
|
||||
tagText: string;
|
||||
count: any;
|
||||
dataDesc: string;
|
||||
iconClass: string;
|
||||
}
|
||||
// 卡片数量
|
||||
const cardData = ref<CardProp[]>([
|
||||
{
|
||||
title: "访客数",
|
||||
tagType: "success",
|
||||
tagText: "日",
|
||||
count: visitCountOutput,
|
||||
dataDesc: "总访客数",
|
||||
iconClass: "visit",
|
||||
},
|
||||
{
|
||||
title: "IP数",
|
||||
tagType: "success",
|
||||
tagText: "日",
|
||||
count: dauCountOutput,
|
||||
dataDesc: "总IP数",
|
||||
iconClass: "ip",
|
||||
},
|
||||
{
|
||||
title: "销售额",
|
||||
tagType: "primary",
|
||||
tagText: "月",
|
||||
count: amountOutput,
|
||||
dataDesc: "总IP数",
|
||||
iconClass: "money",
|
||||
},
|
||||
{
|
||||
title: "订单量",
|
||||
tagType: "danger",
|
||||
tagText: "季",
|
||||
count: orderCountOutput,
|
||||
dataDesc: "总订单量",
|
||||
iconClass: "order",
|
||||
},
|
||||
]);
|
||||
// 图表数据
|
||||
const chartData = ref(["BarChart", "PieChart", "RadarChart"]);
|
||||
const chartComponent = (item: string) => {
|
||||
return defineAsyncComponent(() => import(`./components/${item}.vue`));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue