rmdjz
/
ProjectManagement_frontend
10
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

调整项目概览页

main
wuyize 2022-07-08 22:27:03 +08:00
parent 3f5a29e6d8
commit 0e57fefaf3
7 changed files with 196 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -33,4 +33,7 @@ body{
margin:0;
padding:0;
}
p.p-title {
font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266
}
</style>

1
src/components/echartsPie.vue
View File

@ -124,7 +124,6 @@ export default {
width: 100%;
height: 100%;
display: flex;
background: #fff;
.echarts_box {
flex-shrink: 0;
}

3
src/views/OngoingProject.vue
View File

@ -24,7 +24,7 @@
<template #default="scope">
<el-progress :text-inside="true" :stroke-width="18"
:status="(scope.row.totalNum!==0&&scope.row.completeNum===scope.row.totalNum) ? 'success' : ''"
:percentage="scope.row.totalNum===0?0:scope.row.completeNum*100/scope.row.totalNum"></el-progress>
:percentage="scope.row.totalNum===0?0:Math.round(scope.row.completeNum*100/scope.row.totalNum)"></el-progress>
</template>
</el-table-column>
<el-table-column min-width="10%" align="right">
@ -56,6 +56,7 @@
</template>
<script setup>
// table元素
import {onMounted, ref} from "vue";

2
src/views/Project.vue
View File

@ -108,7 +108,7 @@ export default {
method: 'get',
}).then(response => {
if (response.data.code === 200) {
that.projectStaffPosition = response.data.data.projectStaffPosition
that.projectStaffPosition = response.data.data.projectStaffPosition.replace(',','，')
that.projectAccessLevel = response.data.data.projectAccessLevel
}
}).catch(function (error) {

10
src/views/ProjectGroup.vue
View File

@ -64,14 +64,14 @@
</div>
<div style="width: 50%;display: flex;flex-direction: column;height: 100%;">
<div style="display: flex;flex-direction: column;height: 100%">
<div style="margin-top: 5px;display: flex;flex-direction: column;height: 100%">
<p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 0 0 30px 0;flex-shrink: 0;">岗位统计</p>
<div style="flex: 1;">
<!-- <EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>-->
<div style="flex: 1;background-color: white; border-radius: 10px;">
<EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>
</div>
<p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 15px 0 30px 0;flex-shrink: 0;">团队工作情况统计</p>
<div style="flex: 1;">
<EchartsPie id="pie_team" :isRadius="true" />
<div style="flex: 1;background-color: white; border-radius: 10px;">
<!-- <EchartsPie id="pie_team" :isRadius="true" />-->
</div>
</div>
</div>

363
src/views/ProjectInfo.vue
View File

@ -1,165 +1,159 @@
<template>
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目概况</p>
<div style="width: 100%;height: 47%; display: flex;flex-direction: row;margin: 10px;">
<div class="first-line" style="width: 28%; height: 100%;">
<div style="margin: 10px;display: flex; flex-direction: column;justify-content: center;width: 96%;height: 30px;">
<p style="font-size: 20px;">基本信息</p>
<div style="display: flex;flex-direction: row; height: 90%; width: 96%; height: 98%;">
<div class="form1" style="width: 48%;height: 33%; ">
<p>状态</p>
<div id="state">
<div v-if="project.completed === false">
<el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;">进行中</el-tag>
<el-scrollbar style="width: 100%;height: 100%;">
<div style="height: 300px;margin: 0 30px 30px 30px;
display: flex;flex-direction: row;justify-content: space-between">
<div style="width: 32%; height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">基本信息</p>
<div style="flex:1;margin-top: 30px;padding: 20px;
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px; ">
<el-row>
<el-col :span="12">
<p class="p-subtitle">状态</p>
<div>
<div v-if="project.completed === false">
<el-tag>进行中</el-tag>
</div>
<div v-if="project.completed === true">
<el-tag type="info">已结项</el-tag>
</div>
</div>
<div v-if="project.completed === true">
<el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;color: brown;">已结项</el-tag>
</div>
</div>
</el-col>
<el-col :span="12">
<p class="p-subtitle">项目经理</p>
<p>{{ projectCreatorName }}</p>
</el-col>
</el-row>
<el-row >
<el-col :span="12">
<p class="p-subtitle">开始时间</p>
<p>{{ formatDate(project.projectCreatedTime) }}</p>
</el-col>
<el-col :span="12">
<p class="p-subtitle">结束时间</p>
<p>{{ formatDate(project.projectClosedDate) }}</p>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<p class="p-subtitle">进度</p>
<el-progress :percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)" :color="customColor"/>
</div>
<div class="form1" style="width: 48%;height: 33%; ">
<p>项目经理</p>
<div class="demo-basic--circle">
<div class="block">
<el-avatar :size="50" :src="circleUrl" />
<div class="sub-title"
style="display: flex;flex-direction: column;justify-content: center;margin: 5px;">姓名</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div style="display: flex;flex-direction: row;height: 33px;">
<div class="form1" style="width: 48%; ">
<p>开始时间</p>
<p>{{ project.projectStartDate }}</p>
</div>
<div class="form1" style="width: 48%; ">
<p>结束时间</p>
<p>{{ project.projectEndDate }}</p>
</div>
</div>
<div style="height: 33%;margin: 10px;">
<p>进度</p>
<div class="demo-progress">
<el-progress :percentage="totalNum===0?0:(completeNum/totalNum)*100" :color="customColor" />
</div>
<div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">工作项统计</p>
<div style="flex:1;margin-top: 30px;padding: 20px;
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
<div style="width: 100%;height: 100%;">
</div>
</div>
</div>
</div>
<div class="first-line" style="width: 68%;height: 100%;">
<p style="font-size: 20px;margin: 20px;">工作项统计</p>
<div class="box" style="width: 90%;height: 90%;">
<div style="width: 100%;height: 100%" id="main">
<div style="height: 400px;margin: 0 30px 30px 30px;
display: flex;flex-direction: row;justify-content: space-between">
<div style="width: 60%; height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">详细信息</p>
<div style="flex:1;margin-top: 30px;padding: 20px;
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px; ">
<el-row>
<el-col :span="6">
<p class="p-subtitle">英文简称</p>
<p>{{ project.projectAbbreviation }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">项目主类</p>
<p>{{ project.projectClassId }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">项目子类</p>
<p>{{ project.projectSubclassId }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">重要程度</p>
<p>{{ project.projectImportance }}</p>
</el-col>
</el-row>
<el-row >
<el-col :span="6">
<p class="p-subtitle">合同额</p>
<p>{{ Math.round(project.contractAmount/10000)+'万' }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">预计完成度</p>
<p>{{ project.expectedCompletion+'%' }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">计划总人月</p>
<p>{{ project.projectManMonth }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">项目启动日期</p>
<p>{{ formatDate(project.projectStartDate) }}</p>
</el-col>
</el-row>
<el-row >
<el-col :span="6">
<p class="p-subtitle">计划上线日期</p>
<p>{{ formatDate(project.projectOnlineDate) }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">计划初验时间</p>
<p>{{ formatDate(project.projectFirstTestDate) }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">计划终验日期</p>
<p>{{ formatDate(project.projectFinalTestDate) }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">计划结项日期</p>
<p>{{ formatDate(project.projectEndDate) }}</p>
</el-col>
</el-row>
<el-row >
<el-col :span="6">
<p class="p-subtitle">财务编码</p>
<p>{{ project.financialCode }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">所属部门</p>
<p>{{ project.projectDepartment }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">所属区域</p>
<p>{{ project.projectArea }}</p>
</el-col>
<el-col :span="6">
<p class="p-subtitle">所属公司</p>
<p>{{ project.projectCompany }}</p>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<div style="display: flex;flex-direction: row;height: 48%;width: 100%;">
<div class="second-line" style="width: 55.5%;">
<div style="display: flex; flex-direction: row;">
<p style="font-size: 20px;margin: 2%;width: 75%;">项目属性</p>
<el-button type="primary" @click.native="onReviseProject" style="margin: 10px;">修改属性</el-button>
</div>
<div style="margin: 1%;display: flex; flex-direction: column;justify-content: center;height: 80%;">
<div class="form2">
<div class="form3">
<p>英文简称：</p>
<p>{{ project.projectAbbreviation }}</p>
</div>
<div class="form3">
<p>项目主类：</p>
<p>{{ project.projectClassId }}</p>
</div>
<div class="form3">
<p>项目子类：</p>
<p>{{ project.projectSubclassId }}</p>
</div>
<div class="form3">
<p>重要程度：</p>
<p>{{ project.projectImportance }}</p>
</div>
</div>
<div class="form2">
<div class="form3">
<p>合同额：</p>
<p>{{ project.contractAmount }}</p>
</div>
<div class="form3">
<p>预计完成度：</p>
<p>{{ project.expectedCompletion }}</p>
</div>
<div class="form3">
<p>计划总人月：</p>
<p>{{ project.projectManMonth }}</p>
</div>
<div class="form3">
<p>项目启动日期：</p>
<p>{{ project.projectStartDate }}</p>
</div>
</div>
<div class="form2">
<div class="form3">
<p>计划上线日期：</p>
<p>{{ project.projectOnlineDate }}</p>
</div>
<div class="form3">
<p>计划初验时间：</p>
<p>{{ project.projectFirstTestDate }}</p>
</div>
<div class="form3">
<p>计划终验日期：</p>
<p>{{ project.projectFinalTestDate }}</p>
</div>
<div class="form3">
<p>计划结项日期：</p>
<p>{{ project.projectEndDate }}</p>
</div>
</div>
<div class="form2">
<div class="form3">
<p>财务编码：</p>
<p>{{ project.financialCode }}</p>
</div>
<div class="form3">
<p>所属部门：</p>
<p>{{ project.projectDepartment }}</p>
</div>
<div class="form3">
<p>所属区域：</p>
<p>{{ project.projectArea }}</p>
</div>
<div class="form3">
<p>所属公司：</p>
<p>{{ project.projectCompany }}</p>
<div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">项目描述</p>
<div style="flex:1;margin-top: 30px;padding: 20px;
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
<div style="width: 100%;height: 100%;">
</div>
</div>
</div>
</div>
<div class="second-line" style="width: 41.5%;">
<p style="font-size: 20px;margin: 20px;">项目描述</p>
<div style="margin: 30px">{{ project.projectDescription }}</div>
</div>
</div>
</el-scrollbar>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
import { ref } from 'vue'
import * as echarts from 'echarts/core';
import {ref} from 'vue'
const percentage = ref(20)
const customColor = ref('#409eff')
const state = reactive({
circleUrl:
'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})
const customColorMethod = (percentage) => {
if (percentage < 30) {
@ -170,20 +164,19 @@ const customColorMethod = (percentage) => {
}
return '#67c23a'
}
const { circleUrl } = toRefs(state)
const customColors = [
{ color: '#f56c6c', percentage: 20 },
{color: '#f56c6c', percentage: 20},
]
</script>
<script >
<script>
import request from "@/utils/request";
import moment from "moment";
export default {
name: "ProjectInfo",
components: {
},
components: {},
data() {
return {
project: {
@ -195,11 +188,11 @@ export default {
contractAmount: '',
expectedCompletion: '',
projectManMonth: '',
projectStartDate: '',
projectOnlineDate: '',
projectFirstTestDate: '',
projectFinalTestDate: '',
projectEndDate: '',
projectStartDate: Number,
projectOnlineDate: Number,
projectFirstTestDate: Number,
projectFinalTestDate: Number,
projectEndDate: Number,
financialCode: '',
projectDepartment: '',
projectArea: '',
@ -207,15 +200,50 @@ export default {
projectDescription: '',
completed: '',
},
completeNum: 0,
totalNum: 0
}
},
props: {
projectAccessLevel: Number,
projectGroup: Array
},
computed: {
projectCreatorName() {
if (this.projectGroup && this.project.projectCreator) {
const that = this
const projectCreator = this.projectGroup.find(function (item, index, arr) {
return item.staffId === that.project.projectCreator;
})
console.log(projectCreator)
if (projectCreator)
return projectCreator.staffFullname
}
return ' '
}
},
watch: {
projectAccessLevel: function (val) {
},
projectGroup: function (val) {
},
project: function (val) {
},
},
created() {
this.getProjectInfo();
this.getProjectstats();
},
methods: {
formatDate(date) {
if (date)
return moment(date * 1000).format("yyyy年MM月DD日")
return '无'
},
getProjectInfo() {
const that = this
request({
@ -250,35 +278,10 @@ export default {
</script>
<style scoped lang="scss">
.first-line {
height: 100%;
display: flex;
flex-direction: row;
display: flex;
flex-direction: column;
border: 10px;
margin: 5px;
background-color: white;
}
.second-line {
height: 100%;
display: flex;
flex-direction: row;
display: flex;
flex-direction: column;
border: 10px;
margin: 5px;
background-color: white;
}
.form1 {
display: flex;
flex-direction: row;
display: flex;
flex-direction: column;
margin: 20px;
background-color: white;
p.p-subtitle {
font-size: 14px;
margin-bottom: 10px;
color: #606266
}
.form2 {

4
src/views/ProjectWorkitem.vue
View File

@ -349,7 +349,7 @@ export default {
name: "ProjectWorkitem",
props: {
projectAccessLevel: Number,
projectGroup: []
projectGroup: Array
},
data() {
return {
@ -732,7 +732,7 @@ export default {
let records = response.data.data.records
const editable = row.editable || row.taskHolderId === this.$store.state.staff.staffId
const editable = row.editable || row.taskHolderId === that.$store.state.staff.staffId
for (let workitem of records) {
workitem['editable'] = editable
//console.log(workitem)