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

初步完成项目概览

main
wuyize 2022-07-08 14:24:14 +08:00
parent 7a6c1c455c
commit e79a2134c4
2 changed files with 318 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

319
src/views/ProjectInfo.vue
View File

@ -1,13 +1,326 @@
<template>
<div>项目概览</div>
<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>
</div>
<div v-if="project.completed === true">
<el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;color: brown;">已结项</el-tag>
</div>
</div>
</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>
</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>
</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>
</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>
</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>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
import { ref } from 'vue'
import * as echarts from 'echarts/core';
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) {
return '#909399'
}
if (percentage < 70) {
return '#e6a23c'
}
return '#67c23a'
}
const { circleUrl } = toRefs(state)
const customColors = [
{ color: '#f56c6c', percentage: 20 },
]
</script>
<script >
import request from "@/utils/request";
export default {
name: "ProjectInfo"
name: "ProjectInfo",
components: {
},
data() {
return {
project: {
projectName: '',
projectAbbreviation: '',
projectClassId: '',
projectSubclassId: '',
projectImportance: '',
contractAmount: '',
expectedCompletion: '',
projectManMonth: '',
projectStartDate: '',
projectOnlineDate: '',
projectFirstTestDate: '',
projectFinalTestDate: '',
projectEndDate: '',
financialCode: '',
projectDepartment: '',
projectArea: '',
projectCompany: '',
projectDescription: '',
completed: '',
},
completeNum: 0,
totalNum: 0
}
},
created() {
this.getProjectInfo();
this.getProjectstats();
},
methods: {
getProjectInfo() {
const that = this
request({
url: 'project/' + this.$route.params.projectId,
method: 'get'
}).then(response => {
if (response.data.code === 200) {
that.project = response.data.data
}
}).catch(function (error) {
console.log(error)
})
},
getProjectstats() {
const that = this
request({
url: 'project/' + this.$route.params.projectId + '/stats',
method: 'get'
}).then(response => {
if (response.data.code === 200) {
that.completeNum = response.data.data.completeNum
that.totalNum = response.data.data.totalNum
}
}).catch(function (error) {
console.log(error)
})
},
}
}
</script>
<style scoped>
<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;
}
.form2 {
height: 25%;
width: 96%;
display: flex;
flex-direction: row;
background-color: white;
}
.form3 {
height: 40%;
width: 25%;
background-color: white;
font-size: 10px;
display: flex;
flex-direction: row;
}
.sub-title {
margin-bottom: 10px;
font-size: 14px;
color: var(--el-text-color-secondary);
}
.block:not(:last-child) {
border-right: 1px solid var(--el-border-color);
}
.block {
flex: 1;
display: flex;
flex-direction: row;
}
.demo-progress {
margin-bottom: 5px;
width: 96%;
}
.box {
background-color: darkgray;
margin: 0 auto;
}
</style>

2
src/views/ProjectWorkitem.vue
View File

@ -369,7 +369,7 @@ export default {
{required: true, message: '请设置截止时间', trigger: 'blur'},
{
validator: (rule, value, callback) => {
if (!this.form.taskStartTime){
if (!this.form.taskStartTime||!this.form.taskEndTime){
return callback();
}
if (this.form.taskEndTime.getTime() > this.form.taskStartTime.getTime())