522 lines
14 KiB
Vue
522 lines
14 KiB
Vue
<template>
|
|
<view class="admin-home-container">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="top-navbar">
|
|
<text class="title">图片收集系统</text>
|
|
<view class="user-info" @click="navigateTo('/pages/user-profile/user-profile')">
|
|
<image class="avatar" src="@/static/common/admin.svg" mode="aspectFit"></image>
|
|
<text class="user-name">{{ currentUser.name }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<scroll-view class="content" scroll-y enable-back-to-top>
|
|
<!-- 待处理任务卡片 -->
|
|
<view class="section task-section">
|
|
<view class="task-card">
|
|
<view class="task-item">
|
|
<text class="task-number">{{ pendingImages }}</text>
|
|
<text class="task-label">待审核图片</text>
|
|
</view>
|
|
<view class="task-item">
|
|
<text class="task-number">{{ pendingTasks }}</text>
|
|
<text class="task-label">待完成任务</text>
|
|
</view>
|
|
<view class="task-item">
|
|
<text class="task-number">{{ totalDepartments }}</text>
|
|
<text class="task-label">管理部门</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计数据卡片 -->
|
|
<view class="section stats-section">
|
|
<view class="section-header">
|
|
<text class="section-title">数据统计</text>
|
|
</view>
|
|
<view class="stats-cards">
|
|
<view class="stat-card">
|
|
<text class="stat-number">{{ totalImages }}</text>
|
|
<text class="stat-label">总图片数</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-number">{{ totalUsers }}</text>
|
|
<text class="stat-label">用户总数</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-number">{{ totalTasks }}</text>
|
|
<text class="stat-label">任务总数</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-number">{{ todayUploads }}</text>
|
|
<text class="stat-label">今日上传</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 上传趋势图表 -->
|
|
<view class="section chart-section">
|
|
<view class="section-header">
|
|
<text class="section-title">近期上传趋势</text>
|
|
</view>
|
|
<view class="chart-container">
|
|
<!-- 简单的柱状图模拟 -->
|
|
<view class="bar-chart">
|
|
<view v-for="(item, index) in chartData" :key="index" class="chart-bar">
|
|
<view class="bar" :style="{ height: item.value + '%' }"></view>
|
|
<text class="bar-label">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 部门任务进度 -->
|
|
<view class="section dept-section">
|
|
<view class="section-header">
|
|
<text class="section-title">部门任务进度</text>
|
|
</view>
|
|
<view class="dept-progress-list">
|
|
<view v-for="dept in departmentProgress" :key="dept.id" class="dept-progress-item">
|
|
<view class="dept-info">
|
|
<text class="dept-name">{{ dept.name }}</text>
|
|
<text class="dept-progress">{{ dept.progress }}%</text>
|
|
</view>
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="{ width: dept.progress + '%' }"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 最新上传图片 -->
|
|
<view class="section images-section">
|
|
<view class="section-header">
|
|
<text class="section-title">最新上传</text>
|
|
<text class="more" @click="navigateTo('/pages/image-management/image-management')">查看全部</text>
|
|
</view>
|
|
<view class="image-list">
|
|
<view v-for="image in recentImages" :key="image.id" class="image-item" @click="viewImageDetail(image.id)">
|
|
<image class="image" :src="image.url" mode="aspectFill"></image>
|
|
<view class="image-info">
|
|
<text class="image-title">{{ image.title }}</text>
|
|
<text class="image-uploader">{{ image.uploader }}</text>
|
|
<text class="image-time">{{ image.time }}</text>
|
|
<view class="image-status" :class="image.statusClass">
|
|
{{ image.status }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部导航栏 -->
|
|
<view class="tab-bar">
|
|
<view class="tab-item active">
|
|
<u-icon name="home" size="44"></u-icon>
|
|
<text>首页</text>
|
|
</view>
|
|
<view class="tab-item" @click="navigateTo('/pages/task-management/task-management')">
|
|
<u-icon name="todo-list" size="44"></u-icon>
|
|
<text>任务</text>
|
|
</view>
|
|
<view class="tab-item" @click="navigateTo('/pages/user-profile/user-profile')">
|
|
<u-icon name="user" size="44"></u-icon>
|
|
<text>我的</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentUser: {
|
|
name: '管理员',
|
|
role: 'admin'
|
|
},
|
|
// 统计数据
|
|
pendingImages: 28,
|
|
pendingTasks: 12,
|
|
totalDepartments: 6,
|
|
totalImages: 1286,
|
|
totalUsers: 256,
|
|
totalTasks: 78,
|
|
todayUploads: 56,
|
|
// 图表数据
|
|
chartData: [
|
|
{ label: '周一', value: 45 },
|
|
{ label: '周二', value: 65 },
|
|
{ label: '周三', value: 40 },
|
|
{ label: '周四', value: 80 },
|
|
{ label: '周五', value: 75 },
|
|
{ label: '周六', value: 30 },
|
|
{ label: '周日', value: 20 }
|
|
],
|
|
// 部门进度数据
|
|
departmentProgress: [
|
|
{ id: '1', name: '研发部', progress: 85 },
|
|
{ id: '2', name: '市场部', progress: 62 },
|
|
{ id: '3', name: '行政部', progress: 90 },
|
|
{ id: '4', name: '财务部', progress: 75 },
|
|
{ id: '5', name: '人力资源部', progress: 88 },
|
|
{ id: '6', name: '销售部', progress: 55 }
|
|
],
|
|
// 最新上传图片
|
|
recentImages: [
|
|
{
|
|
id: '1',
|
|
title: '2023年度总结会议',
|
|
url: 'https://cdn.uviewui.com/uview/example/album1.jpg',
|
|
uploader: '张三',
|
|
department: '行政部',
|
|
time: '10:23',
|
|
status: '待审核',
|
|
statusClass: 'status-pending'
|
|
},
|
|
{
|
|
id: '2',
|
|
title: '新品发布会现场',
|
|
url: 'https://cdn.uviewui.com/uview/example/album2.jpg',
|
|
uploader: '李四',
|
|
department: '市场部',
|
|
time: '09:45',
|
|
status: '已通过',
|
|
statusClass: 'status-approved'
|
|
},
|
|
{
|
|
id: '3',
|
|
title: '产品原型设计',
|
|
url: 'https://cdn.uviewui.com/uview/example/album3.jpg',
|
|
uploader: '王五',
|
|
department: '研发部',
|
|
time: '08:30',
|
|
status: '已通过',
|
|
statusClass: 'status-approved'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
navigateTo(url) {
|
|
uni.navigateTo({ url })
|
|
},
|
|
viewImageDetail(imageId) {
|
|
this.navigateTo(`/pages/image-detail/image-detail?id=${imageId}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.admin-home-container {
|
|
padding-top: 44px; // 适配顶部安全区域
|
|
padding-bottom: 120rpx; // 适配底部导航栏
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
background-color: #f5f7fa;
|
|
|
|
.top-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 44px;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
z-index: 999;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 28rpx;
|
|
color: #606266;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
height: calc(100% - 44px);
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.section {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.more {
|
|
font-size: 28rpx;
|
|
color: #1989fa;
|
|
}
|
|
}
|
|
|
|
// 任务卡片样式
|
|
&.task-section {
|
|
.task-card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.task-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
|
|
&:not(:last-child) {
|
|
border-right: 2rpx solid #f5f7fa;
|
|
}
|
|
|
|
.task-number {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #1989fa;
|
|
display: block;
|
|
}
|
|
|
|
.task-label {
|
|
font-size: 24rpx;
|
|
color: #606266;
|
|
margin-top: 10rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 统计卡片样式
|
|
&.stats-section {
|
|
.stats-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
|
|
.stat-card {
|
|
background-color: #f8f8f8;
|
|
padding: 20rpx;
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
|
|
.stat-number {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
display: block;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: #606266;
|
|
margin-top: 10rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 图表样式
|
|
&.chart-section {
|
|
.chart-container {
|
|
height: 300rpx;
|
|
|
|
.bar-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 100%;
|
|
padding-bottom: 30rpx;
|
|
|
|
.chart-bar {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.bar {
|
|
width: 60rpx;
|
|
background-color: #1989fa;
|
|
border-radius: 8rpx 8rpx 0 0;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.bar-label {
|
|
font-size: 22rpx;
|
|
color: #909399;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 部门进度样式
|
|
&.dept-section {
|
|
.dept-progress-list {
|
|
.dept-progress-item {
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dept-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
|
|
.dept-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.dept-progress {
|
|
font-size: 26rpx;
|
|
color: #1989fa;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 10rpx;
|
|
background-color: #f5f7fa;
|
|
border-radius: 5rpx;
|
|
overflow: hidden;
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-color: #1989fa;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 图片列表样式
|
|
&.images-section {
|
|
.image-list {
|
|
.image-item {
|
|
display: flex;
|
|
padding: 15rpx 0;
|
|
border-bottom: 2rpx solid #f5f7fa;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.image {
|
|
width: 160rpx;
|
|
height: 120rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.image-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.image-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.image-uploader {
|
|
font-size: 24rpx;
|
|
color: #606266;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.image-time {
|
|
font-size: 22rpx;
|
|
color: #909399;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.image-status {
|
|
align-self: flex-start;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 20rpx;
|
|
margin-top: 10rpx;
|
|
|
|
&.status-pending {
|
|
background-color: #fff7e6;
|
|
color: #fa8c16;
|
|
}
|
|
|
|
&.status-approved {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #909399;
|
|
|
|
&.active {
|
|
color: #1989fa;
|
|
}
|
|
|
|
text {
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |