调整项目概览页
parent
3f5a29e6d8
commit
0e57fefaf3
|
@ -33,4 +33,7 @@ body{
|
|||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
p.p-title {
|
||||
font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -124,7 +124,6 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
.echarts_box {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<template #default="scope">
|
||||
<el-progress :text-inside="true" :stroke-width="18"
|
||||
: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>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="10%" align="right">
|
||||
|
@ -56,6 +56,7 @@
|
|||
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
// table元素
|
||||
import {onMounted, ref} from "vue";
|
||||
|
||||
|
|
|
@ -108,7 +108,7 @@ export default {
|
|||
method: 'get',
|
||||
}).then(response => {
|
||||
if (response.data.code === 200) {
|
||||
that.projectStaffPosition = response.data.data.projectStaffPosition
|
||||
that.projectStaffPosition = response.data.data.projectStaffPosition.replace(',',',')
|
||||
that.projectAccessLevel = response.data.data.projectAccessLevel
|
||||
}
|
||||
}).catch(function (error) {
|
||||
|
|
|
@ -64,14 +64,14 @@
|
|||
|
||||
</div>
|
||||
<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>
|
||||
<div style="flex: 1;">
|
||||
<!-- <EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>-->
|
||||
<div style="flex: 1;background-color: white; border-radius: 10px;">
|
||||
<EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>
|
||||
</div>
|
||||
<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;">
|
||||
<EchartsPie id="pie_team" :isRadius="true" />
|
||||
<div style="flex: 1;background-color: white; border-radius: 10px;">
|
||||
<!-- <EchartsPie id="pie_team" :isRadius="true" />-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,165 +1,159 @@
|
|||
<template>
|
||||
<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">
|
||||
<el-scrollbar style="width: 100%;height: 100%;">
|
||||
<div style="height: 300px;margin: 0 30px 30px 30px;
|
||||
display: flex;flex-direction: row;justify-content: space-between">
|
||||
<div style="width: 32%; height: 100%;display: flex;flex-direction: column">
|
||||
<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="12">
|
||||
<p class="p-subtitle">状态</p>
|
||||
<div>
|
||||
<div v-if="project.completed === false">
|
||||
<el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;">进行中</el-tag>
|
||||
<el-tag>进行中</el-tag>
|
||||
</div>
|
||||
<div v-if="project.completed === true">
|
||||
<el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;color: brown;">已结项</el-tag>
|
||||
<el-tag type="info">已结项</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<p class="p-subtitle">项目经理</p>
|
||||
<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"/>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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 style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
|
||||
<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;">
|
||||
<div style="width: 100%;height: 100%;">
|
||||
</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>
|
||||
<div style="height: 400px;margin: 0 30px 30px 30px;
|
||||
display: flex;flex-direction: row;justify-content: space-between">
|
||||
<div style="width: 60%; height: 100%;display: flex;flex-direction: column">
|
||||
<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>
|
||||
</div>
|
||||
<div class="form3">
|
||||
<p>项目主类:</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="p-subtitle">项目主类</p>
|
||||
<p>{{ project.projectClassId }}</p>
|
||||
</div>
|
||||
<div class="form3">
|
||||
<p>项目子类:</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="p-subtitle">项目子类</p>
|
||||
<p>{{ project.projectSubclassId }}</p>
|
||||
</div>
|
||||
<div class="form3">
|
||||
<p>重要程度:</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="p-subtitle">重要程度</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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="form3">
|
||||
<p>项目启动日期:</p>
|
||||
<p>{{ project.projectStartDate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="p-subtitle">项目启动日期</p>
|
||||
<p>{{ formatDate(project.projectStartDate) }}</p>
|
||||
</el-col>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="form3">
|
||||
<p>所属部门:</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="p-subtitle">所属部门</p>
|
||||
<p>{{ project.projectDepartment }}</p>
|
||||
</div>
|
||||
<div class="form3">
|
||||
<p>所属区域:</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="p-subtitle">所属区域</p>
|
||||
<p>{{ project.projectArea }}</p>
|
||||
</div>
|
||||
<div class="form3">
|
||||
<p>所属公司:</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="p-subtitle">所属公司</p>
|
||||
<p>{{ project.projectCompany }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
|
||||
<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;">
|
||||
<div style="width: 100%;height: 100%;">
|
||||
</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>
|
||||
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { reactive, toRefs } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import * as echarts from 'echarts/core';
|
||||
import {ref} from 'vue'
|
||||
|
||||
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) {
|
||||
|
@ -170,20 +164,19 @@ const customColorMethod = (percentage) => {
|
|||
}
|
||||
return '#67c23a'
|
||||
}
|
||||
const { circleUrl } = toRefs(state)
|
||||
|
||||
const customColors = [
|
||||
{ color: '#f56c6c', percentage: 20 },
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
]
|
||||
|
||||
</script>
|
||||
<script >
|
||||
<script>
|
||||
import request from "@/utils/request";
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
name: "ProjectInfo",
|
||||
components: {
|
||||
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
project: {
|
||||
|
@ -195,11 +188,11 @@ export default {
|
|||
contractAmount: '',
|
||||
expectedCompletion: '',
|
||||
projectManMonth: '',
|
||||
projectStartDate: '',
|
||||
projectOnlineDate: '',
|
||||
projectFirstTestDate: '',
|
||||
projectFinalTestDate: '',
|
||||
projectEndDate: '',
|
||||
projectStartDate: Number,
|
||||
projectOnlineDate: Number,
|
||||
projectFirstTestDate: Number,
|
||||
projectFinalTestDate: Number,
|
||||
projectEndDate: Number,
|
||||
financialCode: '',
|
||||
projectDepartment: '',
|
||||
projectArea: '',
|
||||
|
@ -207,15 +200,50 @@ export default {
|
|||
projectDescription: '',
|
||||
completed: '',
|
||||
},
|
||||
|
||||
completeNum: 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() {
|
||||
this.getProjectInfo();
|
||||
this.getProjectstats();
|
||||
},
|
||||
methods: {
|
||||
|
||||
formatDate(date) {
|
||||
if (date)
|
||||
return moment(date * 1000).format("yyyy年MM月DD日")
|
||||
return '无'
|
||||
},
|
||||
getProjectInfo() {
|
||||
const that = this
|
||||
request({
|
||||
|
@ -250,35 +278,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<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;
|
||||
p.p-subtitle {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #606266
|
||||
}
|
||||
|
||||
.form2 {
|
||||
|
|
|
@ -349,7 +349,7 @@ export default {
|
|||
name: "ProjectWorkitem",
|
||||
props: {
|
||||
projectAccessLevel: Number,
|
||||
projectGroup: []
|
||||
projectGroup: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -732,7 +732,7 @@ export default {
|
|||
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) {
|
||||
workitem['editable'] = editable
|
||||
//console.log(workitem)
|
||||
|
|
Loading…
Reference in New Issue