初步完成项目概览
parent
7a6c1c455c
commit
e79a2134c4
|
@ -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>
|
||||
<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>
|
|
@ -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())
|
||||
|
|
Loading…
Reference in New Issue