<template>
|
<view style="width: 100%; height: var(--status-bar-height)" />
|
<view class="home">
|
<!-- 当前用户 -->
|
<view class="text-[#0D867F] font-medium py-2 text-lg">亨旺特导线缆上报系统</view>
|
<WorkerCallingCard />
|
|
<!-- 通知公告 -->
|
<wd-notice-bar
|
text="vue-uniapp-template 是一个基于 Vue3 + UniApp 的前端模板项目，提供了一套完整的前端解决方案，包括登录、权限、字典、接口请求、状态管理、页面布局、组件封装等功能。"
|
custom-class="space"
|
>
|
<template #prefix>
|
<wd-icon class="prefix" name="warn-bold" size="14px"></wd-icon>
|
<text class="text-xs">通知</text>
|
</template>
|
</wd-notice-bar>
|
<!-- 快捷导航 -->
|
<wd-grid clickable :column="4" class="mt-2">
|
<wd-grid-item
|
v-for="(item, index) in navList"
|
:key="index"
|
use-slot
|
link-type="navigateTo"
|
:url="item.url"
|
>
|
<view class="p-2">
|
<image class="w-72rpx h-72rpx rounded-8rpx" :src="item.icon" />
|
</view>
|
<view class="text">{{ item.title }}</view>
|
</wd-grid-item>
|
</wd-grid>
|
|
<!-- 数据统计 -->
|
<!-- <wd-grid :column="2" :gutter="2">
|
<wd-grid-item use-slot custom-class="custom-item">
|
<view class="flex justify-start pl-5">
|
<view class="flex-center">
|
<image class="w-80rpx h-80rpx rounded-8rpx" src="/static/icons/visitor.png" />
|
<view class="ml-5 text-left">
|
<view class="font-bold">访客数</view>
|
<view class="mt-2">{{ visitStatsData.todayUvCount }}</view>
|
</view>
|
</view>
|
</view>
|
</wd-grid-item>
|
<wd-grid-item use-slot custom-class="custom-item">
|
<view class="flex justify-start pl-5">
|
<view class="flex-center">
|
<image class="w-80rpx h-80rpx rounded-8rpx" src="/static/icons/browser.png" />
|
<view class="ml-5 text-left">
|
<view class="font-bold">浏览量</view>
|
<view class="mt-2">{{ visitStatsData.todayPvCount }}</view>
|
</view>
|
</view>
|
</view>
|
</wd-grid-item>
|
</wd-grid> -->
|
|
<wd-card>
|
<template #title>
|
<view class="flex-between">
|
<view>访问趋势</view>
|
<view>
|
<wd-radio-group
|
v-model="recentDaysRange"
|
shape="button"
|
inline
|
@change="handleDataRangeChange"
|
>
|
<wd-radio :value="7">近7天</wd-radio>
|
<wd-radio :value="15">近15天</wd-radio>
|
</wd-radio-group>
|
</view>
|
</view>
|
</template>
|
|
<view class="charts-box">
|
<qiun-data-charts type="area" :chartData="chartData" :opts="chartOpts" />
|
</view>
|
</wd-card>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { dayjs } from "wot-design-uni";
|
import LogAPI, { VisitStatsVO } from "@/api/system/log";
|
import WorkerCallingCard from "@/components/worker-calling-card/index.vue";
|
|
const visitStatsData = ref<VisitStatsVO>({
|
todayUvCount: 0,
|
uvGrowthRate: 0,
|
totalUvCount: 0,
|
todayPvCount: 0,
|
pvGrowthRate: 0,
|
totalPvCount: 0,
|
});
|
|
// 图表数据
|
const chartData = ref({});
|
|
const chartOpts = ref({
|
padding: [20, 0, 20, 0],
|
xAxis: {
|
fontSize: 10,
|
rotateLabel: true,
|
rotateAngle: 30,
|
},
|
yAxis: {
|
disabled: true,
|
},
|
extra: {
|
area: {
|
type: "curve",
|
opacity: 0.2,
|
addLine: true,
|
width: 2,
|
gradient: true,
|
activeType: "hollow",
|
},
|
},
|
});
|
|
// 日期范围
|
const recentDaysRange = ref(7);
|
|
// 快捷导航列表
|
const navList = reactive([
|
// {
|
// icon: "/static/icons/user.png",
|
// title: "用户管理",
|
// url: "/pages/work/user/index",
|
// prem: "sys:user:query",
|
// },
|
{
|
icon: "/static/icons/user.png",
|
title: "生产管理",
|
url: "/pages/production/index",
|
},
|
{
|
icon: "/static/icons/role.png",
|
title: "角色管理",
|
url: "/pages/work/role/index",
|
prem: "sys:role:query",
|
},
|
{
|
icon: "/static/icons/notice.png",
|
title: "通知公告",
|
url: "/pages/work/notice/index",
|
prem: "sys:notice:query",
|
},
|
{
|
icon: "/static/icons/setting.png",
|
title: "系统配置",
|
url: "/pages/work/config/index",
|
prem: "sys:config:query",
|
},
|
]);
|
|
// 加载访问统计数据
|
const loadVisitStatsData = async () => {
|
LogAPI.getVisitStats().then((data) => {
|
visitStatsData.value = data;
|
});
|
};
|
|
// 加载访问趋势数据
|
const loadVisitTrendData = () => {
|
const endDate = new Date();
|
const startDate = new Date(endDate);
|
startDate.setDate(endDate.getDate() - recentDaysRange.value + 1);
|
|
const visitTrendQuery = {
|
startDate: dayjs(startDate).format("YYYY-MM-DD"),
|
endDate: dayjs(endDate).format("YYYY-MM-DD"),
|
};
|
|
LogAPI.getVisitTrend(visitTrendQuery).then((data) => {
|
const res = {
|
categories: data.dates,
|
series: [
|
{
|
name: "访客数(UV)",
|
data: data.ipList,
|
},
|
{
|
name: "浏览量(PV)",
|
data: data.pvList,
|
},
|
],
|
};
|
chartData.value = JSON.parse(JSON.stringify(res));
|
});
|
};
|
|
// 数据范围变化
|
const handleDataRangeChange = ({ value }: { value: number }) => {
|
console.log("handleDataRangeChange", value);
|
recentDaysRange.value = value;
|
loadVisitTrendData();
|
};
|
|
onReady(() => {
|
// loadVisitStatsData();
|
// loadVisitTrendData();
|
});
|
</script>
|
|
<style setup lang="scss">
|
.home {
|
padding: 10rpx 10rpx;
|
|
:deep(.custom-item) {
|
height: 80px !important;
|
}
|
|
:deep(.wd-card) {
|
margin: 10rpx 0 !important;
|
}
|
}
|
|
.charts-box {
|
width: 100%;
|
height: 300px;
|
}
|
</style>
|
