home1020
This commit is contained in:
bwstudio
@@ -0,0 +1,505 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>部门负责人首页 - 图片收集小程序</title>
|
||||
<!-- 引入Vue.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
||||
<!-- 引入Element UI CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
|
||||
<!-- 引入Element UI JavaScript -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
|
||||
<!-- 引入Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
background-color: #1989fa;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dept-selector {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1989fa;
|
||||
font-size: 16px;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.stats-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
margin: 0 5px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #1989fa;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.chart-container {
|
||||
height: 200px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.pending-image {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.pending-image:hover {
|
||||
border-color: #1989fa;
|
||||
box-shadow: 0 2px 12px 0 rgba(25, 136, 250, 0.1);
|
||||
}
|
||||
.image-thumbnail {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.image-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-info {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.image-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.image-meta {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.approve-btn {
|
||||
background-color: #67c23a;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.reject-btn {
|
||||
background-color: #f56c6c;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.footer-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
z-index: 99;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #1989fa;
|
||||
}
|
||||
.nav-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.view-more {
|
||||
font-size: 14px;
|
||||
color: #1989fa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="header">
|
||||
<div class="header-title">图片收集小程序</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<!-- 部门切换器 -->
|
||||
<el-dropdown @command="changeDepartment">
|
||||
<span class="dept-selector cursor-pointer">
|
||||
{{ currentDepartment.name }}
|
||||
<i class="fa fa-chevron-down ml-2" style="font-size: 12px;"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="dept in departments"
|
||||
:key="dept.id"
|
||||
:command="dept"
|
||||
:disabled="dept.id === currentDepartment.id"
|
||||
>
|
||||
{{ dept.name }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<el-dropdown style="margin-left: 15px;">
|
||||
<span class="user-avatar cursor-pointer">
|
||||
<i class="fa fa-user"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item @click="logout" divided>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="content">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ stats.pending }}</div>
|
||||
<div class="stat-label">待审核</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ stats.approved }}</div>
|
||||
<div class="stat-label">已通过</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ stats.total }}</div>
|
||||
<div class="stat-label">总数量</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 部门图片统计（饼图） -->
|
||||
<div class="card">
|
||||
<div class="section-title">图片分类统计</div>
|
||||
<div class="chart-container">
|
||||
<!-- 使用Element UI的进度条模拟饼图 -->
|
||||
<div v-for="category in categories" :key="category.name" class="mb-4">
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
|
||||
<span style="font-size: 14px;">{{ category.name }}</span>
|
||||
<span style="font-size: 14px; color: #909399;">{{ category.count }} ({{ category.percentage }}%)</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="category.percentage"
|
||||
:color="category.color"
|
||||
:stroke-width="8"
|
||||
></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待审核图片列表 -->
|
||||
<div class="card">
|
||||
<div class="section-title">
|
||||
待审核图片
|
||||
<span class="view-more" @click="viewAllPending">查看全部</span>
|
||||
</div>
|
||||
<div v-if="pendingImages.length > 0">
|
||||
<div
|
||||
v-for="image in pendingImages"
|
||||
:key="image.id"
|
||||
class="pending-image"
|
||||
>
|
||||
<div class="image-thumbnail">
|
||||
<img :src="image.url" :alt="image.title">
|
||||
</div>
|
||||
<div class="image-info">
|
||||
<div class="image-title">{{ image.title }}</div>
|
||||
<div class="image-meta">{{ image.uploader }} · {{ formatDate(image.uploadTime) }}</div>
|
||||
<div class="action-buttons">
|
||||
<button class="approve-btn" @click="approveImage(image.id)">通过</button>
|
||||
<button class="reject-btn" @click="rejectImage(image.id)">拒绝</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center text-gray-400 py-10">
|
||||
暂无待审核图片
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="footer-nav">
|
||||
<div class="nav-item active" @click="goToHome">
|
||||
<i class="nav-icon fa fa-home"></i>
|
||||
<span>首页</span>
|
||||
</div>
|
||||
<div class="nav-item" @click="goToReview">
|
||||
<i class="nav-icon fa fa-check-square-o"></i>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="nav-item" @click="goToProfile">
|
||||
<i class="nav-icon fa fa-user"></i>
|
||||
<span>我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 拒绝原因对话框 -->
|
||||
<el-dialog
|
||||
title="拒绝原因"
|
||||
:visible.sync="dialogVisible"
|
||||
width="300px"
|
||||
>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
v-model="rejectReason"
|
||||
placeholder="请输入拒绝原因"
|
||||
></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmReject">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
departments: [
|
||||
{ id: 1, name: '市场部' },
|
||||
{ id: 2, name: '技术部' },
|
||||
{ id: 3, name: '产品部' }
|
||||
],
|
||||
currentDepartment: { id: 1, name: '市场部' },
|
||||
stats: {
|
||||
pending: 5,
|
||||
approved: 28,
|
||||
total: 45
|
||||
},
|
||||
categories: [
|
||||
{ name: '产品包装', count: 15, percentage: 33, color: '#1989fa' },
|
||||
{ name: '活动现场', count: 10, percentage: 22, color: '#67c23a' },
|
||||
{ name: '办公环境', count: 8, percentage: 18, color: '#e6a23c' },
|
||||
{ name: '其他', count: 12, percentage: 27, color: '#909399' }
|
||||
],
|
||||
pendingImages: [
|
||||
{
|
||||
id: 1,
|
||||
title: '产品新包装设计',
|
||||
url: 'https://via.placeholder.com/300x300',
|
||||
uploader: '张三',
|
||||
uploadTime: '2023-10-10 10:30'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '促销活动现场',
|
||||
url: 'https://via.placeholder.com/300x300',
|
||||
uploader: '李四',
|
||||
uploadTime: '2023-10-10 09:15'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '客户交流会',
|
||||
url: 'https://via.placeholder.com/300x300',
|
||||
uploader: '王五',
|
||||
uploadTime: '2023-10-09 16:45'
|
||||
}
|
||||
],
|
||||
dialogVisible: false,
|
||||
rejectReason: '',
|
||||
currentImageId: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换部门
|
||||
changeDepartment(dept) {
|
||||
this.currentDepartment = dept;
|
||||
// 模拟部门切换后数据更新
|
||||
this.updateDepartmentData(dept.id);
|
||||
this.$message.success('已切换至' + dept.name);
|
||||
},
|
||||
|
||||
// 更新部门数据
|
||||
updateDepartmentData(deptId) {
|
||||
// 这里模拟不同部门的数据
|
||||
switch(deptId) {
|
||||
case 1:
|
||||
this.stats = { pending: 5, approved: 28, total: 45 };
|
||||
break;
|
||||
case 2:
|
||||
this.stats = { pending: 3, approved: 15, total: 20 };
|
||||
break;
|
||||
case 3:
|
||||
this.stats = { pending: 2, approved: 22, total: 30 };
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化日期
|
||||
formatDate(dateStr) {
|
||||
return dateStr;
|
||||
},
|
||||
|
||||
// 审核通过
|
||||
approveImage(imageId) {
|
||||
this.$confirm('确定要通过这个图片吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 模拟审核通过
|
||||
this.pendingImages = this.pendingImages.filter(img => img.id !== imageId);
|
||||
this.stats.pending--;
|
||||
this.stats.approved++;
|
||||
this.$message.success('审核通过');
|
||||
});
|
||||
},
|
||||
|
||||
// 拒绝审核
|
||||
rejectImage(imageId) {
|
||||
this.currentImageId = imageId;
|
||||
this.rejectReason = '';
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
|
||||
// 确认拒绝
|
||||
confirmReject() {
|
||||
if (!this.rejectReason.trim()) {
|
||||
this.$message.error('请输入拒绝原因');
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟拒绝操作
|
||||
this.pendingImages = this.pendingImages.filter(img => img.id !== this.currentImageId);
|
||||
this.stats.pending--;
|
||||
this.dialogVisible = false;
|
||||
this.$message.success('已拒绝，原因已通知上传者');
|
||||
},
|
||||
|
||||
// 查看全部待审核
|
||||
viewAllPending() {
|
||||
this.$message.info('查看全部待审核图片');
|
||||
},
|
||||
|
||||
// 跳转到审核页面
|
||||
goToReview() {
|
||||
this.$message.info('跳转到审核页面');
|
||||
},
|
||||
|
||||
// 跳转到个人中心
|
||||
goToProfile() {
|
||||
this.$message.info('跳转到个人中心');
|
||||
},
|
||||
|
||||
// 返回首页
|
||||
goToHome() {
|
||||
// 已经在首页
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
logout() {
|
||||
this.$confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
window.location.href = 'login.html';
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user