839 lines
24 KiB
Vue
839 lines
24 KiB
Vue
<template>
|
||
<div class="dashboard-container">
|
||
<!-- 页面标题 -->
|
||
<div class="page-header">
|
||
<h1>数据分析仪表盘</h1>
|
||
<div class="header-actions">
|
||
|
||
<el-button type="primary" @click="refreshData">
|
||
<i class="el-icon-refresh"></i>
|
||
刷新数据
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据概览卡片 -->
|
||
<div class="overview-cards">
|
||
<div class="card-item">
|
||
<div class="card-icon card-icon-blue">
|
||
<i class="el-icon-user"></i>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-title">总成员数</div>
|
||
<div class="card-value">{{ totalMembers }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-icon card-icon-green">
|
||
<i class="el-icon-folder"></i>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-title">总项目数</div>
|
||
<div class="card-value">{{ totalProjects }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-icon card-icon-orange">
|
||
<i class="el-icon-warning"></i>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-title">逾期项目模块</div>
|
||
<div class="card-value">{{ overdueProjects }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-item">
|
||
<div class="card-icon card-icon-purple">
|
||
<i class="el-icon-checked"></i>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-title">完成率</div>
|
||
<div class="card-value">{{ completionRate }}%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="main-content">
|
||
<!-- 左侧区域 -->
|
||
<div class="left-section">
|
||
<!-- 成员表格 -->
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<h2>成员任务完成情况</h2>
|
||
<el-input v-model="searchMember" placeholder="搜索成员姓名" clearable @input="filterMembers" style="width: 200px;" />
|
||
<el-button type="text" @click="viewAllMembers">查看全部</el-button>
|
||
</div>
|
||
<div class="panel-body">
|
||
<el-table
|
||
:data="filteredMembersData"
|
||
height="280"
|
||
border
|
||
style="width: 100%"
|
||
@row-click="userClick"
|
||
>
|
||
<el-table-column prop="name" label="姓名" width="100" />
|
||
<el-table-column prop="date" label="已完成" width="100" />
|
||
<el-table-column prop="address" label="未完成" />
|
||
<el-table-column label="完成率" width="120">
|
||
<template slot-scope="scope">
|
||
<el-progress
|
||
:percentage="calculateRate(scope.row.date, scope.row.address)"
|
||
:stroke-width="6"
|
||
:show-text="true"
|
||
:color="getRateColor(calculateRate(scope.row.date, scope.row.address))"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目表格 -->
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<h2>项目状态</h2>
|
||
<el-input v-model="searchProject" placeholder="搜索项目名称" clearable style="width: 200px; margin-right: 10px;" />
|
||
<el-tabs v-model="activeTab" type="card" size="small">
|
||
<el-tab-pane label="全部" name="all" />
|
||
<el-tab-pane label="已完成" name="completed" />
|
||
<el-tab-pane label="未完成" name="pending" />
|
||
</el-tabs>
|
||
</div>
|
||
<div class="panel-body">
|
||
<el-table
|
||
:data="getProjectData()"
|
||
height="280"
|
||
border
|
||
style="width: 100%"
|
||
@row-click="projectClick"
|
||
>
|
||
<el-table-column prop="name" label="项目" width="160" />
|
||
<el-table-column prop="ownerNick" label="负责人" width="120" />
|
||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||
<el-table-column prop="date" label="逾期（量）" />
|
||
<el-table-column label="状态" width="100">
|
||
<template slot-scope="scope">
|
||
<el-tag
|
||
:type="scope.row.status === 'completed' ? 'success' : 'danger'"
|
||
size="small"
|
||
>
|
||
{{ scope.row.statusText || (scope.row.status === 'completed' ? '已完成' : '未完成') }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间区域 -->
|
||
<div class="center-section">
|
||
<!-- 流量来源柱状图 -->
|
||
<!-- <div class="panel"> -->
|
||
<!-- <div class="panel-header">
|
||
<h2>流量来源占比分析</h2>
|
||
</div> -->
|
||
<!-- <div class="panel-body">
|
||
<div id="trafficChart" style="width: 100%; height: 300px;"></div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 任务完成趋势 -->
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<h2>任务完成趋势</h2>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div id="trendChart" style="width: 100%; height: 300px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧区域（已移除任务完成率分布与项目类型分布图表） -->
|
||
<div class="right-section"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import { listProject } from '@/api/project/project'
|
||
import { listModule } from '@/api/project/module'
|
||
import { listUser } from '@/api/system/user'
|
||
|
||
export default {
|
||
name: 'DataAnalysisDashboard',
|
||
data() {
|
||
return {
|
||
// 日期范围
|
||
dateRange: [],
|
||
// 标签页
|
||
activeTab: 'all',
|
||
// 成员完成情况表数据（name: 成员名, date: 已完成数量, address: 未完成数量）
|
||
membersData: [],
|
||
// 项目状态表数据（name: 项目名, date: 逾期量, status: 'completed'|'pending', projectId, ownerNick, createTime, statusText）
|
||
projectsData: [],
|
||
// 模块与项目原始数据（可选持有）
|
||
_allModules: [],
|
||
_allProjects: [],
|
||
// 统计数据
|
||
totalMembers: 0,
|
||
totalProjects: 0,
|
||
overdueProjects: 0,
|
||
completionRate: 0,
|
||
searchMember: '',
|
||
searchProject: ''
|
||
};
|
||
},
|
||
computed: {
|
||
filteredMembersData() {
|
||
const keyword = this.searchMember.toLowerCase();
|
||
return this.membersData.filter(m => m.name.toLowerCase().includes(keyword));
|
||
},
|
||
filteredProjectsData() {
|
||
const keyword = this.searchProject.toLowerCase();
|
||
return this.projectsData.filter(p => p.name.toLowerCase().includes(keyword));
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化图表
|
||
// this.initTrafficChart();
|
||
this.initTrendChart();
|
||
|
||
// 加载真实数据
|
||
this.loadDashboardData();
|
||
|
||
// 监听窗口大小变化
|
||
window.addEventListener('resize', this.handleResize);
|
||
},
|
||
beforeDestroy() {
|
||
// 清理监听器
|
||
window.removeEventListener('resize', this.handleResize);
|
||
},
|
||
methods: {
|
||
// 兼容后端日期字符串（YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss）
|
||
parseDate(val) {
|
||
if (!val) return null;
|
||
if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
|
||
if (typeof val === 'string') {
|
||
const s = val.replace(' ', 'T');
|
||
const d = new Date(s);
|
||
if (!isNaN(d.getTime())) return d;
|
||
const d2 = new Date(val.split(' ')[0]);
|
||
return isNaN(d2.getTime()) ? null : d2;
|
||
}
|
||
const d = new Date(val);
|
||
return isNaN(d.getTime()) ? null : d;
|
||
},
|
||
toYMD(d) {
|
||
if (!d) return '';
|
||
const y = d.getFullYear();
|
||
const m = `${d.getMonth() + 1}`.padStart(2, '0');
|
||
const day = `${d.getDate()}`.padStart(2, '0');
|
||
return `${y}-${m}-${day}`;
|
||
},
|
||
mapProjectStatus(code) {
|
||
// 后端 project.status: 0未完成 1已完成 2隐藏（见表结构注释）
|
||
if (code === '1' || code === 1) return '已完成';
|
||
if (code === '2' || code === 2) return '隐藏';
|
||
return '未完成';
|
||
},
|
||
async loadDashboardData() {
|
||
try {
|
||
const [projRes, modRes] = await Promise.all([
|
||
listProject({ pageNum: 1, pageSize: 9999 }),
|
||
listModule({ pageNum: 1, pageSize: 9999 })
|
||
]);
|
||
const projects = (projRes && projRes.rows) ? projRes.rows : [];
|
||
const modules = (modRes && modRes.rows) ? modRes.rows : [];
|
||
this._allProjects = projects;
|
||
this._allModules = modules;
|
||
|
||
// 统计总数
|
||
this.totalProjects = projects.length;
|
||
// 读取用户映射：userId -> 昵称/账号
|
||
let userMap = {};
|
||
let users = [];
|
||
try {
|
||
const usersRes = await listUser({ pageNum: 1, pageSize: 9999 });
|
||
users = (usersRes && usersRes.rows) ? usersRes.rows : [];
|
||
userMap = users.reduce((acc, u) => {
|
||
acc[String(u.userId)] = u.nickName || u.userName || String(u.userId);
|
||
return acc;
|
||
}, {});
|
||
} catch (ignore) {
|
||
userMap = {};
|
||
}
|
||
// 成员聚合（按 assignee=用户ID 字符串）
|
||
const memberMap = {};
|
||
modules.forEach(m => {
|
||
const assigneeId = m.assignee || '未指派';
|
||
const displayName = assigneeId === '未指派' ? '未指派' : (userMap[assigneeId] || assigneeId);
|
||
if (!memberMap[assigneeId]) memberMap[assigneeId] = { name: displayName, assigneeId, date: 0, address: 0 };
|
||
if (m.status === '2') memberMap[assigneeId].date += 1; else memberMap[assigneeId].address += 1;
|
||
});
|
||
this.membersData = Object.values(memberMap);
|
||
this.totalMembers = users.length + (users.some(u => u.userName === 'admin') ? 0 : 1);
|
||
|
||
// 项目聚合
|
||
const now = new Date();
|
||
const modulesByProject = modules.reduce((acc, m) => {
|
||
const pid = m.projectId;
|
||
if (!acc[pid]) acc[pid] = [];
|
||
acc[pid].push(m);
|
||
return acc;
|
||
}, {});
|
||
// 项目截止日期映射 + 负责人昵称映射
|
||
const projectDeadlineMap = {};
|
||
const ownerNickMap = {};
|
||
projects.forEach(p => {
|
||
projectDeadlineMap[p.projectId] = this.parseDate(p.deadline);
|
||
if (p.ownerId != null) ownerNickMap[p.ownerId] = userMap[String(p.ownerId)] || p.ownerId;
|
||
});
|
||
|
||
const projectsData = projects.map(p => {
|
||
const list = modulesByProject[p.projectId] || [];
|
||
const total = list.length;
|
||
const completed = list.filter(x => x.status === '2').length;
|
||
const pending = total - completed;
|
||
const deadline = projectDeadlineMap[p.projectId];
|
||
const overdue = deadline && now > deadline ? list.filter(x => x.status !== '2').length : 0;
|
||
return {
|
||
name: p.projectName,
|
||
date: overdue,
|
||
status: total > 0 && completed === total ? 'completed' : 'pending',
|
||
statusText: this.mapProjectStatus(p.status),
|
||
projectId: p.projectId,
|
||
ownerNick: ownerNickMap[p.ownerId] || (p.ownerId || ''),
|
||
createTime: p.createTime
|
||
};
|
||
});
|
||
this.projectsData = projectsData;
|
||
// 逾期模块数（而非逾期项目数）
|
||
const overdueModulesCount = modules.filter(m => {
|
||
const ddl = projectDeadlineMap[m.projectId];
|
||
return ddl && now > ddl && m.status !== '2';
|
||
}).length;
|
||
this.overdueProjects = overdueModulesCount;
|
||
|
||
// 完成率（按模块）
|
||
const totalModules = modules.length;
|
||
const completedModules = modules.filter(m => m.status === '2').length;
|
||
this.completionRate = totalModules > 0 ? Math.round((completedModules / totalModules) * 100) : 0;
|
||
|
||
// 更新饼图
|
||
this.refreshCompletionPieChart( this.completionRate );
|
||
|
||
// 用真实数据更新趋势图
|
||
this.updateTrendChart(modules);
|
||
} catch (e) {
|
||
this.$message.error('仪表盘数据加载失败');
|
||
}
|
||
},
|
||
// 计算完成率
|
||
calculateRate(completed, pending) {
|
||
const completedNum = parseInt(completed) || 0;
|
||
const pendingNum = parseInt(pending) || 0;
|
||
const total = completedNum + pendingNum;
|
||
return total > 0 ? Math.round((completedNum / total) * 100) : 0;
|
||
},
|
||
|
||
// 根据完成率获取颜色
|
||
getRateColor(rate) {
|
||
if (rate >= 80) return '#67c23a';
|
||
if (rate >= 50) return '#e6a23c';
|
||
return '#f56c6c';
|
||
},
|
||
|
||
// 根据标签页获取项目数据
|
||
filterByTab(data) {
|
||
if (this.activeTab === 'all') return data;
|
||
if (this.activeTab === 'completed') return data.filter(item => item.status === 'completed');
|
||
if (this.activeTab === 'pending') return data.filter(item => item.status === 'pending');
|
||
return data;
|
||
},
|
||
getProjectData() {
|
||
return this.filterByTab(this.filteredProjectsData);
|
||
},
|
||
|
||
// 刷新数据
|
||
async refreshData() {
|
||
await this.loadDashboardData();
|
||
this.$message.success('数据已刷新');
|
||
},
|
||
|
||
// 查看所有成员
|
||
viewAllMembers() {
|
||
this.$router.push({ path: '/unView/userview' });
|
||
},
|
||
|
||
// 用户详情页面跳转方法
|
||
userClick(row) {
|
||
this.$router.push({ path: '/UnView/UserProject', query: { assignee: row.assigneeId, name: row.name } });
|
||
},
|
||
|
||
// 项目详情页面跳转方法
|
||
projectClick(row) {
|
||
this.$router.push({ path: '/UnView/Project', query: { table: row.name, projectId: row.projectId } });
|
||
},
|
||
|
||
// 过滤成员数据
|
||
filterMembers() {
|
||
// 当搜索框有值时，使用 filteredMembersData，否则使用原始 membersData
|
||
this.$nextTick(() => {
|
||
if (this.searchMember) {
|
||
this.$emit('update:membersData', this.filteredMembersData);
|
||
} else {
|
||
this.$emit('update:membersData', this.membersData);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 移除 filterProjects 方法，因为 computed 会自动响应 v-model 变化
|
||
// 如果需要即时过滤，可以保留一个空方法或移除 @input
|
||
// filterProjects() {
|
||
// // 当搜索框有值时，使用 filteredProjectsData，否则使用原始 projectsData
|
||
// this.$nextTick(() => {
|
||
// if (this.searchProject) {
|
||
// this.$emit('update:projectsData', this.filteredProjectsData);
|
||
// } else {
|
||
// this.$emit('update:projectsData', this.projectsData);
|
||
// }
|
||
// });
|
||
// },
|
||
|
||
// 初始化流量来源柱状图
|
||
// initTrafficChart() {
|
||
// const chart = echarts.init(document.getElementById('trafficChart'));
|
||
|
||
// // 准备图表数据
|
||
// const rawData = [
|
||
// [100, 302, 301, 334, 390, 330, 320],
|
||
// [320, 132, 101, 134, 90, 230, 210],
|
||
// [220, 182, 191, 234, 290, 330, 310],
|
||
// [150, 212, 201, 154, 190, 330, 410],
|
||
// [820, 832, 901, 934, 1290, 1330, 1320]
|
||
// ];
|
||
|
||
// // 计算总数据
|
||
// const totalData = [];
|
||
// for (let i = 0; i < rawData[0].length; ++i) {
|
||
// let sum = 0;
|
||
// for (let j = 0; j < rawData.length; ++j) {
|
||
// sum += rawData[j][i];
|
||
// }
|
||
// totalData.push(sum);
|
||
// }
|
||
|
||
// // 配置系列数据
|
||
// const series = [
|
||
// 'Direct',
|
||
// 'Mail Ad',
|
||
// 'Affiliate Ad',
|
||
// 'Video Ad',
|
||
// 'Search Engine'
|
||
// ].map((name, sid) => {
|
||
// return {
|
||
// name,
|
||
// type: 'bar',
|
||
// stack: 'total',
|
||
// barWidth: '60%',
|
||
// label: {
|
||
// show: true,
|
||
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||
// },
|
||
// data: rawData[sid].map((d, did) =>
|
||
// totalData[did] <= 0 ? 0 : d / totalData[did]
|
||
// )
|
||
// };
|
||
// });
|
||
|
||
// const option = {
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// axisPointer: { type: 'shadow' }
|
||
// },
|
||
// legend: {
|
||
// data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine'],
|
||
// bottom: 10
|
||
// },
|
||
// grid: {
|
||
// left: '3%',
|
||
// right: '4%',
|
||
// bottom: '15%',
|
||
// top: '3%',
|
||
// containLabel: true
|
||
// },
|
||
// yAxis: {
|
||
// type: 'value',
|
||
// axisLabel: { formatter: '{value} %' }
|
||
// },
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
// },
|
||
// series
|
||
// };
|
||
|
||
// chart.setOption(option);
|
||
|
||
// // 保存图表实例以便调整大小
|
||
// this.trafficChart = chart;
|
||
// },
|
||
|
||
// 初始化任务完成趋势图
|
||
initTrendChart() {
|
||
const chart = echarts.init(document.getElementById('trendChart'));
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['已完成', '未完成'],
|
||
bottom: 10
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
top: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: []
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '已完成',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [],
|
||
smooth: true,
|
||
lineStyle: { color: '#67c23a' }
|
||
},
|
||
{
|
||
name: '未完成',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [],
|
||
smooth: true,
|
||
lineStyle: { color: '#f56c6c' }
|
||
}
|
||
]
|
||
};
|
||
|
||
chart.setOption(option);
|
||
this.trendChart = chart;
|
||
},
|
||
updateTrendChart(modules) {
|
||
if (!this.trendChart) return;
|
||
// 最近7天
|
||
const days = [];
|
||
const labels = [];
|
||
for (let i = 6; i >= 0; i--) {
|
||
const d = new Date();
|
||
d.setHours(0, 0, 0, 0);
|
||
d.setDate(d.getDate() - i);
|
||
days.push(new Date(d));
|
||
labels.push(`${d.getMonth() + 1}-${String(d.getDate()).padStart(2, '0')}`);
|
||
}
|
||
const endOf = (d) => {
|
||
const x = new Date(d);
|
||
x.setHours(23, 59, 59, 999);
|
||
return x;
|
||
};
|
||
|
||
const completedDaily = days.map(d => 0);
|
||
const totalCumu = days.map(() => 0);
|
||
const completedCumu = days.map(() => 0);
|
||
|
||
modules.forEach(m => {
|
||
const ct = this.parseDate(m.createTime);
|
||
const ft = this.parseDate(m.finishTime);
|
||
days.forEach((d, idx) => {
|
||
if (ct && ct <= endOf(d)) totalCumu[idx] += 1;
|
||
if (m.status === '2' && ft && ft <= endOf(d)) completedCumu[idx] += 1;
|
||
});
|
||
// 当日完成
|
||
if (m.status === '2' && ft) {
|
||
const ymd = this.toYMD(ft);
|
||
days.forEach((d, idx) => {
|
||
if (this.toYMD(d) === ymd) completedDaily[idx] += 1;
|
||
});
|
||
}
|
||
});
|
||
const unfinished = totalCumu.map((t, i) => Math.max(0, t - completedCumu[i]));
|
||
|
||
const option = this.trendChart.getOption();
|
||
option.xAxis[0].data = labels;
|
||
option.series[0].data = completedDaily;
|
||
option.series[1].data = unfinished;
|
||
this.trendChart.setOption(option, true);
|
||
},
|
||
|
||
// 初始化任务完成率饼图
|
||
initCompletionPieChart() {
|
||
const chart = echarts.init(document.getElementById('completionPieChart'));
|
||
|
||
// 定义颜色方案
|
||
const colors = [
|
||
new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||
{ offset: 0, color: '#67c23a' },
|
||
{ offset: 1, color: '#85ce61' }
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||
{ offset: 0, color: '#f56c6c' },
|
||
{ offset: 1, color: '#f78989' }
|
||
])
|
||
];
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
series: [
|
||
{
|
||
name: '任务状态',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
data: [
|
||
{ value: this.completionRate, name: '已完成' },
|
||
{ value: 100 - this.completionRate, name: '未完成' },
|
||
],
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '20',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: { show: false },
|
||
itemStyle: {
|
||
color: (params) => colors[params.dataIndex],
|
||
shadowBlur: 10,
|
||
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
chart.setOption(option);
|
||
this.completionPieChart = chart;
|
||
},
|
||
refreshCompletionPieChart(rate) {
|
||
if (!this.completionPieChart) return;
|
||
const option = this.completionPieChart.getOption();
|
||
if (option && option.series && option.series[0]) {
|
||
option.series[0].data = [
|
||
{ value: rate, name: '已完成' },
|
||
{ value: 100 - rate, name: '未完成' },
|
||
];
|
||
this.completionPieChart.setOption(option, true);
|
||
}
|
||
},
|
||
|
||
// 初始化项目类型分布图表
|
||
initProjectTypeChart() {
|
||
const chart = echarts.init(document.getElementById('projectTypeChart'));
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
data: [
|
||
{ value: 10, name: '开发' },
|
||
{ value: 5, name: '测试' },
|
||
{ value: 3, name: '设计' },
|
||
{ value: 7, name: '文档' },
|
||
{ value: 2, name: '其他' }
|
||
],
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: true,
|
||
formatter: '{b}\n{d}%'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
chart.setOption(option);
|
||
this.projectTypeChart = chart;
|
||
},
|
||
|
||
// 处理窗口大小变化
|
||
handleResize() {
|
||
// if (this.trafficChart) this.trafficChart.resize();
|
||
if (this.trendChart) this.trendChart.resize();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.dashboard-container {
|
||
padding: 20px;
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 页面标题 */
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.page-header h1 {
|
||
font-size: 24px;
|
||
color: #303133;
|
||
margin: 0;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 数据概览卡片 */
|
||
.overview-cards {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.card-item {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.card-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.card-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.card-icon-blue { background-color: #409eff; }
|
||
.card-icon-green { background-color: #67c23a; }
|
||
.card-icon-orange { background-color: #e6a23c; }
|
||
.card-icon-purple { background-color: #909399; }
|
||
|
||
.card-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.5fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* 面板样式 */
|
||
.panel {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.panel-header {
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.panel-header h2 {
|
||
font-size: 16px;
|
||
color: #303133;
|
||
margin: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.panel-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 1200px) {
|
||
.main-content {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
|
||
.center-section {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.overview-cards {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.main-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.page-header {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
</style>
|