基本完成项目概览页
parent
0e57fefaf3
commit
84b9dfb155
|
@ -36,7 +36,9 @@
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<p class="p-subtitle">进度</p>
|
<p class="p-subtitle">进度</p>
|
||||||
<el-progress :percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)" :color="customColor"/>
|
<el-progress
|
||||||
|
:status="(totalNum!==0&&completeNum===totalNum) ? 'success' : ''"
|
||||||
|
:percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)" />
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
@ -47,8 +49,7 @@
|
||||||
<p class="p-title" style="margin-left: 10px">工作项统计</p>
|
<p class="p-title" style="margin-left: 10px">工作项统计</p>
|
||||||
<div style="flex:1;margin-top: 30px;padding: 20px;
|
<div style="flex:1;margin-top: 30px;padding: 20px;
|
||||||
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
@ -65,11 +66,11 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<p class="p-subtitle">项目主类</p>
|
<p class="p-subtitle">项目主类</p>
|
||||||
<p>{{ project.projectClassId }}</p>
|
<p>{{ projectClassName }}</p>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<p class="p-subtitle">项目子类</p>
|
<p class="p-subtitle">项目子类</p>
|
||||||
<p>{{ project.projectSubclassId }}</p>
|
<p>{{ projectSubClassName }}</p>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<p class="p-subtitle">重要程度</p>
|
<p class="p-subtitle">重要程度</p>
|
||||||
|
@ -138,8 +139,7 @@
|
||||||
<p class="p-title" style="margin-left: 10px">项目描述</p>
|
<p class="p-title" style="margin-left: 10px">项目描述</p>
|
||||||
<div style="flex:1;margin-top: 30px;padding: 20px;
|
<div style="flex:1;margin-top: 30px;padding: 20px;
|
||||||
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
|
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
|
||||||
<div style="width: 100%;height: 100%;">
|
<p>{{ project.projectDescription }}</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -152,23 +152,6 @@
|
||||||
|
|
||||||
import {ref} from 'vue'
|
import {ref} from 'vue'
|
||||||
|
|
||||||
const percentage = ref(20)
|
|
||||||
const customColor = ref('#409eff')
|
|
||||||
|
|
||||||
const customColorMethod = (percentage) => {
|
|
||||||
if (percentage < 30) {
|
|
||||||
return '#909399'
|
|
||||||
}
|
|
||||||
if (percentage < 70) {
|
|
||||||
return '#e6a23c'
|
|
||||||
}
|
|
||||||
return '#67c23a'
|
|
||||||
}
|
|
||||||
|
|
||||||
const customColors = [
|
|
||||||
{color: '#f56c6c', percentage: 20},
|
|
||||||
]
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
import request from "@/utils/request";
|
import request from "@/utils/request";
|
||||||
|
@ -202,7 +185,10 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
completeNum: 0,
|
completeNum: 0,
|
||||||
totalNum: 0
|
totalNum: 0,
|
||||||
|
|
||||||
|
projectClasses: [],
|
||||||
|
projectSubClasses: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
@ -216,12 +202,33 @@ export default {
|
||||||
const projectCreator = this.projectGroup.find(function (item, index, arr) {
|
const projectCreator = this.projectGroup.find(function (item, index, arr) {
|
||||||
return item.staffId === that.project.projectCreator;
|
return item.staffId === that.project.projectCreator;
|
||||||
})
|
})
|
||||||
console.log(projectCreator)
|
|
||||||
if (projectCreator)
|
if (projectCreator)
|
||||||
return projectCreator.staffFullname
|
return projectCreator.staffFullname
|
||||||
}
|
}
|
||||||
return ' '
|
return ' '
|
||||||
}
|
},
|
||||||
|
projectClassName() {
|
||||||
|
if (this.project.projectClassId) {
|
||||||
|
const that = this
|
||||||
|
const projectClass = this.projectClasses.find(function (item, index, arr) {
|
||||||
|
return item.projectClassId === that.project.projectClassId;
|
||||||
|
})
|
||||||
|
if (projectClass)
|
||||||
|
return projectClass.projectClassName
|
||||||
|
}
|
||||||
|
return ' '
|
||||||
|
},
|
||||||
|
projectSubClassName() {
|
||||||
|
if (this.project.projectSubclassId) {
|
||||||
|
const that = this
|
||||||
|
const projectSubClass = this.projectSubClasses.find(function (item, index, arr) {
|
||||||
|
return item.projectClassId === that.project.projectSubclassId;
|
||||||
|
})
|
||||||
|
if (projectSubClass)
|
||||||
|
return projectSubClass.projectClassName
|
||||||
|
}
|
||||||
|
return ' '
|
||||||
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
projectAccessLevel: function (val) {
|
projectAccessLevel: function (val) {
|
||||||
|
@ -235,7 +242,8 @@ export default {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getProjectInfo();
|
this.getProjectInfo();
|
||||||
this.getProjectstats();
|
this.getProjectStats();
|
||||||
|
this.getProjectClass()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
@ -258,7 +266,7 @@ export default {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getProjectstats() {
|
getProjectStats() {
|
||||||
const that = this
|
const that = this
|
||||||
request({
|
request({
|
||||||
url: 'project/' + this.$route.params.projectId + '/stats',
|
url: 'project/' + this.$route.params.projectId + '/stats',
|
||||||
|
@ -273,6 +281,27 @@ export default {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
getProjectClass() {
|
||||||
|
const that = this;
|
||||||
|
request({
|
||||||
|
url: 'project/type',
|
||||||
|
method: 'get',
|
||||||
|
}).then(response => {
|
||||||
|
if (response.data.code === 200) {
|
||||||
|
console.log(response.data.data.records)
|
||||||
|
that.projectClasses = []
|
||||||
|
that.projectSubClasses = []
|
||||||
|
for (const record of response.data.data.records) {
|
||||||
|
if (record.classFatherId === 0)
|
||||||
|
that.projectClasses.push(record)
|
||||||
|
else
|
||||||
|
that.projectSubClasses.push(record)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).catch(function (error) {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue