refactor(重构首页): ♻️ 使用静态数据循环渲染
This commit is contained in:
april
parent
3e8e366a5a
commit
c6dc77206d
|
|
@ -22,32 +22,18 @@
|
||||||
|
|
||||||
<el-col :span="6" :xs="24">
|
<el-col :span="6" :xs="24">
|
||||||
<div class="flex h-full items-center justify-around">
|
<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>
|
<template #title>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<svg-icon icon-class="message" size="20px" />
|
<svg-icon :icon-class="item.iconClass" size="20px" />
|
||||||
<span class="text-[16px] ml-1">消息</span>
|
<span class="text-[16px] ml-1">{{ item.title }}</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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-if="item.suffix" #suffix>/100</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -56,105 +42,37 @@
|
||||||
|
|
||||||
<!-- 数据卡片 -->
|
<!-- 数据卡片 -->
|
||||||
<el-row :gutter="10" class="mt-3">
|
<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">
|
<el-card shadow="never">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<span class="text-[var(--el-text-color-secondary)]">访客数</span>
|
<span class="text-[var(--el-text-color-secondary)]">{{
|
||||||
<el-tag type="success">日</el-tag>
|
item.title
|
||||||
|
}}</span>
|
||||||
|
<el-tag :type="item.tagType">
|
||||||
|
{{ item.tagText }}
|
||||||
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="flex items-center justify-between mt-5">
|
<div class="flex items-center justify-between mt-5">
|
||||||
<div class="text-lg text-right">
|
<div class="text-lg text-right">
|
||||||
{{ Math.round(visitCountOutput) }}
|
{{ Math.round(item.count) }}
|
||||||
</div>
|
</div>
|
||||||
<svg-icon icon-class="visit" size="2em" />
|
<svg-icon :icon-class="item.iconClass" size="2em" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||||
>
|
>
|
||||||
<span> 总访客数 </span>
|
<span> {{ item.dataDesc }} </span>
|
||||||
<span> {{ Math.round(visitCountOutput * 15) }} </span>
|
<span> {{ Math.round(item.count * 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>
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -162,27 +80,17 @@
|
||||||
|
|
||||||
<!-- Echarts 图表 -->
|
<!-- Echarts 图表 -->
|
||||||
<el-row :gutter="10" class="mt-3">
|
<el-row :gutter="10" class="mt-3">
|
||||||
<el-col :sm="24" :lg="8" class="mb-2">
|
<el-col
|
||||||
<BarChart
|
:xs="24"
|
||||||
id="barChart"
|
:sm="12"
|
||||||
height="400px"
|
:lg="8"
|
||||||
width="100%"
|
class="mb-2"
|
||||||
class="bg-[var(--el-bg-color-overlay)]"
|
v-for="item in chartData"
|
||||||
/>
|
:key="item"
|
||||||
</el-col>
|
>
|
||||||
|
<component
|
||||||
<el-col :xs="24" :sm="12" :lg="8" class="mb-2">
|
:is="chartComponent(item)"
|
||||||
<PieChart
|
:id="item"
|
||||||
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"
|
|
||||||
height="400px"
|
height="400px"
|
||||||
width="100%"
|
width="100%"
|
||||||
class="bg-[var(--el-bg-color-overlay)]"
|
class="bg-[var(--el-bg-color-overlay)]"
|
||||||
|
|
@ -193,6 +101,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "Dashboard",
|
name: "Dashboard",
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
|
|
@ -252,6 +161,82 @@ const orderCountOutput = useTransition(orderCount, {
|
||||||
transition: TransitionPresets.easeOutExpo,
|
transition: TransitionPresets.easeOutExpo,
|
||||||
});
|
});
|
||||||
orderCount.value = 2000;
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue