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; margin:0;
padding:0; padding:0;
} }
p.p-title {
font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266
}
</style> </style>

1
src/components/echartsPie.vue
View File

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

3
src/views/OngoingProject.vue
View File

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

2
src/views/Project.vue
View File

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

10
src/views/ProjectGroup.vue
View File

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

363
src/views/ProjectInfo.vue
View File

@ -1,165 +1,159 @@
<template> <template>
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目概况</p> <el-scrollbar style="width: 100%;height: 100%;">
<div style="width: 100%;height: 47%; display: flex;flex-direction: row;margin: 10px;"> <div style="height: 300px;margin: 0 30px 30px 30px;
<div class="first-line" style="width: 28%; height: 100%;"> display: flex;flex-direction: row;justify-content: space-between">
<div style="margin: 10px;display: flex; flex-direction: column;justify-content: center;width: 96%;height: 30px;"> <div style="width: 32%; height: 100%;display: flex;flex-direction: column">
<p style="font-size: 20px;">基本信息</p> <p class="p-title" style="margin-left: 10px">基本信息</p>
<div style="display: flex;flex-direction: row; height: 90%; width: 96%; height: 98%;"> <div style="flex:1;margin-top: 30px;padding: 20px;
<div class="form1" style="width: 48%;height: 33%; "> display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px; ">
<p>状态</p> <el-row>
<div id="state"> <el-col :span="12">
<div v-if="project.completed === false"> <p class="p-subtitle">状态</p>
<el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;">进行中</el-tag> <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>
<div v-if="project.completed === true"> </el-col>
<el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;color: brown;">已结项</el-tag> <el-col :span="12">
</div> <p class="p-subtitle">项目经理</p>
</div> <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> </el-col>
<div class="form1" style="width: 48%;height: 33%; "> </el-row>
<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>
</div> </div>
<div style="display: flex;flex-direction: row;height: 33px;">
<div class="form1" style="width: 48%; "> </div>
<p>开始时间</p> <div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
<p>{{ project.projectStartDate }}</p> <p class="p-title" style="margin-left: 10px">工作项统计</p>
</div> <div style="flex:1;margin-top: 30px;padding: 20px;
<div class="form1" style="width: 48%; "> display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
<p>结束时间</p> <div style="width: 100%;height: 100%;">
<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>
</div> </div>
</div> </div>
</div> </div>
<div class="first-line" style="width: 68%;height: 100%;"> <div style="height: 400px;margin: 0 30px 30px 30px;
<p style="font-size: 20px;margin: 20px;">工作项统计</p> display: flex;flex-direction: row;justify-content: space-between">
<div class="box" style="width: 90%;height: 90%;"> <div style="width: 60%; height: 100%;display: flex;flex-direction: column">
<div style="width: 100%;height: 100%" id="main"> <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> <div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
</div> <p class="p-title" style="margin-left: 10px">项目描述</p>
<div style="flex:1;margin-top: 30px;padding: 20px;
<div style="display: flex;flex-direction: row;height: 48%;width: 100%;"> display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
<div class="second-line" style="width: 55.5%;"> <div style="width: 100%;height: 100%;">
<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> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="second-line" style="width: 41.5%;">
<p style="font-size: 20px;margin: 20px;">项目描述</p> </el-scrollbar>
<div style="margin: 30px">{{ project.projectDescription }}</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { reactive, toRefs } from 'vue' import {ref} from 'vue'
import { ref } from 'vue'
import * as echarts from 'echarts/core';
const percentage = ref(20) const percentage = ref(20)
const customColor = ref('#409eff') const customColor = ref('#409eff')
const state = reactive({
circleUrl:
'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})
const customColorMethod = (percentage) => { const customColorMethod = (percentage) => {
if (percentage < 30) { if (percentage < 30) {
@ -170,20 +164,19 @@ const customColorMethod = (percentage) => {
} }
return '#67c23a' return '#67c23a'
} }
const { circleUrl } = toRefs(state)
const customColors = [ const customColors = [
{ color: '#f56c6c', percentage: 20 }, {color: '#f56c6c', percentage: 20},
] ]
</script> </script>
<script > <script>
import request from "@/utils/request"; import request from "@/utils/request";
import moment from "moment";
export default { export default {
name: "ProjectInfo", name: "ProjectInfo",
components: { components: {},
},
data() { data() {
return { return {
project: { project: {
@ -195,11 +188,11 @@ export default {
contractAmount: '', contractAmount: '',
expectedCompletion: '', expectedCompletion: '',
projectManMonth: '', projectManMonth: '',
projectStartDate: '', projectStartDate: Number,
projectOnlineDate: '', projectOnlineDate: Number,
projectFirstTestDate: '', projectFirstTestDate: Number,
projectFinalTestDate: '', projectFinalTestDate: Number,
projectEndDate: '', projectEndDate: Number,
financialCode: '', financialCode: '',
projectDepartment: '', projectDepartment: '',
projectArea: '', projectArea: '',
@ -207,15 +200,50 @@ export default {
projectDescription: '', projectDescription: '',
completed: '', completed: '',
}, },
completeNum: 0, completeNum: 0,
totalNum: 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() { created() {
this.getProjectInfo(); this.getProjectInfo();
this.getProjectstats(); this.getProjectstats();
}, },
methods: { methods: {
formatDate(date) {
if (date)
return moment(date * 1000).format("yyyy年MM月DD日")
return '无'
},
getProjectInfo() { getProjectInfo() {
const that = this const that = this
request({ request({
@ -250,35 +278,10 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.first-line { p.p-subtitle {
height: 100%; font-size: 14px;
display: flex; margin-bottom: 10px;
flex-direction: row; color: #606266
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;
} }
.form2 { .form2 {

4
src/views/ProjectWorkitem.vue
View File

@ -349,7 +349,7 @@ export default {
name: "ProjectWorkitem", name: "ProjectWorkitem",
props: { props: {
projectAccessLevel: Number, projectAccessLevel: Number,
projectGroup: [] projectGroup: Array
}, },
data() { data() {
return { return {
@ -732,7 +732,7 @@ export default {
let records = response.data.data.records 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) { for (let workitem of records) {
workitem['editable'] = editable workitem['editable'] = editable
//console.log(workitem) //console.log(workitem)