初步完成项目概览
parent
7a6c1c455c
commit
e79a2134c4
|
|
@ -1,13 +1,326 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
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>
|
</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>
|
</style>
|
||||||
|
|
@ -369,7 +369,7 @@ export default {
|
||||||
{required: true, message: '请设置截止时间', trigger: 'blur'},
|
{required: true, message: '请设置截止时间', trigger: 'blur'},
|
||||||
{
|
{
|
||||||
validator: (rule, value, callback) => {
|
validator: (rule, value, callback) => {
|
||||||
if (!this.form.taskStartTime){
|
if (!this.form.taskStartTime||!this.form.taskEndTime){
|
||||||
return callback();
|
return callback();
|
||||||
}
|
}
|
||||||
if (this.form.taskEndTime.getTime() > this.form.taskStartTime.getTime())
|
if (this.form.taskEndTime.getTime() > this.form.taskStartTime.getTime())
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue