160 lines
3.6 KiB
Vue
160 lines
3.6 KiB
Vue
<template>
|
||
<div class="container">
|
||
<h1>项目结项报告</h1>
|
||
<p><strong>项目名称：</strong> {{ project.projectName }}</p>
|
||
<p><strong>项目总成本：</strong> ¥{{ project.funds }}</p>
|
||
<p><strong>项目用时：</strong> {{ (new Date(project.postponeTime)-new Date(project.beginTime))/1000/60/60/24 }}天</p>
|
||
|
||
<div v-for="(item,index) in stepsList" :key="index">
|
||
<h2>{{item.dictLabel}}-人员情况</h2>
|
||
<div v-for="(task,index) in item.taskList" :key="index">
|
||
<h3>负责人-{{task.collaborator}}</h3>
|
||
|
||
<table>
|
||
<tr>
|
||
<th>姓名</th>
|
||
|
||
<th>工作时长 (天)</th>
|
||
<th>人力成本 (元/天)</th>
|
||
<th>总成本 (元)</th>
|
||
</tr>
|
||
<tr v-for="member in task.workerList" :key="member.name">
|
||
<td>{{ member.nickName }}</td>
|
||
|
||
<td>{{ member.workTime }}</td>
|
||
<td>{{ member.laborCost }}</td>
|
||
<td>{{ (member.workTime * member.laborCost).toLocaleString() }}</td>
|
||
</tr>
|
||
<tr class="summary">
|
||
<td colspan="3">总计</td>
|
||
<td>¥{{ task.projectCostTotal }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="footer">
|
||
<p>© 2024 项目结项报告 | 由项目团队生成</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
import {getProject} from "@/api/oa/project";
|
||
import {getTaskByDictType} from "@/api/oa/task";
|
||
|
||
export default {
|
||
name: "closure",
|
||
data() {
|
||
return {
|
||
// 项目名
|
||
projectName: "AI 数据分析系统开发",
|
||
|
||
// 项目涉及人员
|
||
teamMembers: [
|
||
{name: '李某某', role: '项目经理', hours: 160, rate: 300, completed: '已完成'},
|
||
{name: '王某', role: '前端开发', hours: 150, rate: 250, completed: '已完成'},
|
||
{name: '张某', role: '后端开发', hours: 170, rate: 280, completed: '进行中'},
|
||
{name: '陈某', role: '测试工程师', hours: 140, rate: 220, completed: '已完成'},
|
||
{name: '赵某', role: '产品经理', hours: 130, rate: 350, completed: '已完成'}
|
||
],
|
||
|
||
// 项目花费
|
||
projectCost: 990000,
|
||
totalHumanCost: 10000,
|
||
project:{},
|
||
stepsList:[],
|
||
active:{}
|
||
}
|
||
},
|
||
created() {
|
||
|
||
this.projectId = this.$route.params.projectId;
|
||
|
||
this.getProject()
|
||
// this.getTaskByDictType(this.projectId);
|
||
},
|
||
methods:{
|
||
getProject(){
|
||
getProject(this.projectId).then(response => {
|
||
this.project = response.data;
|
||
})
|
||
},
|
||
|
||
// /**new-工作类型进度**/
|
||
// getTaskByDictType(pid) {
|
||
// getTaskByDictType(pid).then(res => {
|
||
// //排序
|
||
// this.stepsList = res.data.data.taskList.sort((a, b) => parseInt(a.dictValue) - parseInt(b.dictValue));
|
||
// this.active = res.data.data.active;
|
||
// })
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
* {
|
||
margin: 15px auto;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
background-color: #f5f5f5;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
margin: auto;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: #333;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
th, td {
|
||
padding: 12px;
|
||
border: 1px solid #ddd;
|
||
text-align: center;
|
||
}
|
||
|
||
th {
|
||
background-color: #007bff;
|
||
color: #fff;
|
||
}
|
||
|
||
tr:nth-child(even) {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.summary {
|
||
font-weight: bold;
|
||
color: #007bff;
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
</style>
|