<template>
|
<div :bordered="false" style="background-color: transparent">
|
<div v-show="pane == 1">
|
<!-- <a-card style="height:35px" :bordered="false" title="">
|
<a-icon slot="extra" @click="back" style="cursor:pointer" type="close-circle" />
|
</a-card>-->
|
|
<a-card :loading="loading" :bordered="false" title="项目信息" hoverable>
|
<!-- <a slot="extra" style="margin-right: 15px; cursor: pointer" @click="showPane(2)"> 切换预览 </a>-->
|
<a slot="extra" @click="editInfo(1)">编辑</a>
|
<a-descriptions size="small" :column="3">
|
<a-descriptions-item label="项目名称">{{ model.xmmc }}</a-descriptions-item>
|
<a-descriptions-item label="项目负责人">{{ userName }}</a-descriptions-item>
|
<!-- <a-descriptions-item label="报告日期">{{ model.bgrq }}</a-descriptions-item>-->
|
<a-descriptions-item label="项目编号">{{ model.xmbh }}</a-descriptions-item>
|
</a-descriptions>
|
</a-card>
|
|
<a-card :loading="loading" style="margin-top: 10px" :bordered="false" title="项目背景" hoverable>
|
<a slot="extra" @click="editInfo(6)">编辑</a>
|
<a-descriptions>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.xmbj }}</div></a-descriptions-item>
|
</a-descriptions>
|
</a-card>
|
|
<a-card :loading="loading" style="margin-top: 10px" :bordered="false" title="项目目标" hoverable>
|
<a slot="extra" @click="editInfo(2)">编辑</a>
|
<a-descriptions size="small" :column="1">
|
|
<template>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.xmmb }}</div></a-descriptions-item>
|
</template>
|
</a-descriptions>
|
<!-- <span class='bot-tip' ><span style="color: red">*</span>如有多项请用分号<span style="color: red"> ; </span>隔开</span>-->
|
</a-card>
|
|
<a-card :loading="loading" style="margin-top: 10px" :bordered="false" title="近期目标" hoverable>
|
<a slot="extra" @click="editInfo(5)">编辑</a>
|
<a-descriptions size="small" :column="1">
|
|
<template>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.jqmb }}</div></a-descriptions-item>
|
</template>
|
</a-descriptions>
|
<!-- <span class='bot-tip' ><span style="color: red">*</span>如有多项请用分号<span style="color: red"> ; </span>隔开</span>-->
|
</a-card>
|
<a-card :loading="loading" style="margin-top: 10px" :bordered="false" title="变更" hoverable>
|
<a slot="extra" @click="editInfo(7)">编辑</a>
|
<a-descriptions size="small" :column="1">
|
<template>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.bgsx }}</div></a-descriptions-item>
|
</template>
|
</a-descriptions>
|
</a-card>
|
|
<a-card :loading="loading" style="margin-top: 10px" :bordered="false" title="概述与预测" hoverable>
|
<a slot="extra" @click="editInfo(4)">编辑</a>
|
<a-descriptions size="small" :column="6">
|
<a-descriptions-item label="概述"> </a-descriptions-item>
|
<a-descriptions-item label="预测"> </a-descriptions-item>
|
<a-descriptions-item label="进度是否正常"></a-descriptions-item>
|
<a-descriptions-item label="是否需要组织支持"></a-descriptions-item>
|
<a-descriptions-item label="是否影响销售和订单"></a-descriptions-item>
|
<a-descriptions-item label="风险预测和估计"></a-descriptions-item>
|
</a-descriptions>
|
<a-descriptions size="small" :column="6">
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.gs }}</div></a-descriptions-item>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.yc }}</div></a-descriptions-item>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.jdsfzc }}</div></a-descriptions-item>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.sfxyzc }}</div></a-descriptions-item>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.sfyxdd }}</div></a-descriptions-item>
|
<a-descriptions-item><div class='pre-wrap'>{{ model.summary.fxyc }}</div></a-descriptions-item>
|
</a-descriptions>
|
|
|
<span class='bot-tip' ><span style="color: red">*</span>请填写项目概述与预测(如本周工作/下周工作)</span>
|
</a-card>
|
|
<a-card :loading="loading" style="margin-top: 10px" :bordered="false" title="时间计划" hoverable>
|
<a slot="extra" @click="editInfo(3)">编辑</a>
|
<a-descriptions>
|
<a-descriptions-item label="开始日期">{{ model.ksrq }}</a-descriptions-item>
|
<a-descriptions-item label="结束日期">{{ model.jsrq }}</a-descriptions-item>
|
<a-descriptions-item label="总时间">{{ model.xmzq }}</a-descriptions-item>
|
<a-descriptions-item label="已用时间">{{ yysjStr }}</a-descriptions-item>
|
<a-descriptions-item label="剩余时间" v-if= 'model.sjwcsj==null'><a style="color: green;"> {{ sysjStr }}</a></a-descriptions-item>
|
<a-descriptions-item label="实际完成时间" v-else> {{ model.sjwcsj }} </a-descriptions-item>
|
|
</a-descriptions>
|
<a-progress :percent="model.sjjd" status="active" />
|
<span class='bot-tip'><span style="color: red">*</span>项目时间进度</span>
|
</a-card>
|
|
|
|
<a-card :loading="loading" style="margin-top: 10px" :bordered="false" title="项目计划" hoverable>
|
<!-- <a-descriptions size="small" style="margin-bottom: 10px" bordered :column="3">
|
<a-descriptions-item label="任务总数">{{ linkList.length }}</a-descriptions-item>
|
<a-descriptions-item label="已完成">{{ projectProgress[0] }}</a-descriptions-item>
|
<a-descriptions-item label="完成进度"><a-progress :percent="projectProgress[1]" size="small" status="active" /></a-descriptions-item>
|
</a-descriptions> -->
|
<link-list-component :projectId="projectId" @success="loadSuccess"></link-list-component>
|
</a-card>
|
</div>
|
<!-- <div v-show="pane == 2">
|
<a-card style="margin-top: 10px" :bordered="false" title="预览">
|
<a slot="extra" style="margin-right: 15px; cursor: pointer" @click="showPane(1)"> 切换明细 </a>
|
<a-descriptions title="" bordered :column="4" size="small">
|
<a-descriptions-item label="项目名称"> {{ model.xmmc }} </a-descriptions-item>
|
<a-descriptions-item label="负责人"> {{ userName }} </a-descriptions-item>
|
<a-descriptions-item label="报告日期"> {{ model.bgrq }} </a-descriptions-item>
|
<a-descriptions-item label="项目编号"> {{ model.xmbh }}</a-descriptions-item>
|
<a-descriptions-item :span="4">
|
<div slot="label" class="label-width">项目目标</div>
|
{{ model.xmmb }}
|
</a-descriptions-item>
|
<a-descriptions-item label="开始" :span="4"> {{ model.ksrq }}</a-descriptions-item>
|
<a-descriptions-item label="结束" :span="4"> {{ model.jsrq }}</a-descriptions-item>
|
<a-descriptions-item label="剩余" :span="4"> {{ sysjStr }}</a-descriptions-item>
|
<a-descriptions-item label="概述与预测" :span="4">
|
{{ model.bzgz }}
|
<br />
|
{{ model.xzgz }}
|
</a-descriptions-item>
|
|
<a-descriptions-item label="序号"> 项目环节 </a-descriptions-item>
|
<a-descriptions-item label="起始时间"> 预计完成时间</a-descriptions-item>
|
<a-descriptions-item label="持续时间"> 实际完成时间 </a-descriptions-item>
|
<a-descriptions-item label="完成进度"> 资源名称</a-descriptions-item>
|
|
<template v-for="(row, key) in linkList">
|
<a-descriptions-item :label="row.sxh" :key="key + '-xh'"> {{ row.xmhj }} </a-descriptions-item>
|
<a-descriptions-item :label="row.qssj" :key="key + '-qs'"> {{ row.yjwcsj }}</a-descriptions-item>
|
<a-descriptions-item :label="row.cxsj" :key="key + '-cx'"> {{ row.sjwcsj }} </a-descriptions-item>
|
<a-descriptions-item :label="row.wcjd==1 ?'已完成' :'未完成' " :key="key + '-jd'"> {{ row.user }}</a-descriptions-item>
|
</template>
|
</a-descriptions>
|
</a-card>
|
</div>-->
|
<project-modal-1 ref="proModal1" @ok="loadData"></project-modal-1>
|
<project-modal-2 ref="proModal2" @ok="loadData"></project-modal-2>
|
<project-modal-3 ref="proModal3" @ok="loadData"></project-modal-3>
|
<project-modal-4 ref="proModal4" @ok="loadData"></project-modal-4>
|
<project-modal-5 ref="proModal5" @ok="loadData"></project-modal-5>
|
<project-modal-6 ref="proModal6" @ok="loadData"></project-modal-6>
|
<project-modal-7 ref="proModal7" @ok="loadData"></project-modal-7>
|
</div>
|
</template>
|
|
<script>
|
import { queryProById } from '@/api/pro'
|
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
import LinkListComponent from '@views/pro/modules/LinkListComponent'
|
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
import ProjectModal1 from '@views/pro/modules/ProjectModal1'
|
import ProjectModal2 from './modules/ProjectModal2.vue'
|
import ProjectModal3 from './modules/ProjectModal3.vue'
|
import ProjectModal4 from './modules/ProjectModal4.vue'
|
import ProjectModal5 from './modules/ProjectModal5.vue'
|
import ProjectModal6 from './modules/ProjectModal6.vue'
|
import ProjectModal7 from './modules/ProjectModal7.vue'
|
export default {
|
name: 'BoardInfo',
|
inject:['closeCurrent'],
|
components: {
|
LinkListComponent,
|
JEllipsis,
|
ProjectModal1,
|
ProjectModal2,
|
ProjectModal3,
|
ProjectModal4,
|
ProjectModal5,
|
ProjectModal6,
|
ProjectModal7,
|
},
|
created() {
|
//this.randomPage(0, 20, true)
|
this.queryProjectInfo()
|
},
|
data() {
|
return {
|
loading :false,
|
userDictOptions: [],
|
linkList: [],
|
//显示面板 1-编辑页 2-预览页
|
pane: 1,
|
//项目目标分割集合
|
|
model: {
|
/* xmmc: '2132 注塑成型质量监测系统',
|
xmbh: 'XLB-NO001',
|
xmfzr: 'zhagnxiao',
|
bgrq: '2022-01-01',
|
xmmb: '该项目在已有模腔压力传感器基础上，开发一套完整的模腔运行时内部参数实时检测系统，可扩展和注塑机联动功能，实时监各质量参数，根据数据库模型辨别不良产品，给出自动分拣信号，并记录上传和保存报表。\n' +
|
'1）第一阶段：完成竞品的分析，建立初步的软件架构，实现基于PC机的测试版软件； \n' +
|
'2）第二阶段：基于测试版软件和模腔压力传感器完成相关测试，积累分析数据，建立数据分析模型，制定正式第一代基于工控机系统的方案；\n' +
|
'3）第三阶段：完成2套基于工控机的完整模腔运行质量监测系统的设计和调试；',
|
kssj: '2022-01-01',
|
jssj: '2022-01-01',
|
sysj: '100'*/
|
summary:{
|
jqmb:'',
|
bgsx:'',
|
yc:'',
|
gs:'',
|
jdsfzc:'',
|
sfxyzc:'',
|
sfyxdd:'',
|
fxyc:'',
|
}
|
},
|
summary:{
|
jqmb:'',
|
bgsx:'',
|
yc:'',
|
gs:'',
|
jdsfzc:'',
|
sfxyzc:'',
|
sfyxdd:'',
|
fxyc:'',
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 },
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 },
|
},
|
validatorRules: {
|
xmmc: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
|
xmbh: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
|
xmfzr: [{ required: true, message: '项目负责人不能为空', trigger: 'blur' }],
|
xmcy: [{ required: true, message: '项目成员不能为空', trigger: 'blur' }],
|
bgrq: [{ required: true, message: '报告日期不能为空', trigger: 'blur' }],
|
xmmb: [{ required: true, message: '项目目标不能为空', trigger: 'blur' }],
|
},
|
url: {
|
queryProById: 'pro/project/queryProById',
|
},
|
}
|
},
|
|
mounted() {
|
this.initDictConfig()
|
},
|
methods: {
|
getTreeList(data, result) {
|
for (let i = 0; i < data.length; i++) {
|
result.push(data[i])
|
if (data[i].children){
|
this.getTreeList(data[i].children,result)
|
}
|
|
}
|
},
|
loadSuccess(data) {
|
this.linkList = []
|
if (data) {
|
this.getTreeList(data, this.linkList)
|
}
|
},
|
//显示编辑页或缩略图页
|
showPane(pane) {
|
this.pane = pane
|
},
|
back(){
|
this.closeCurrent();
|
},
|
initDictConfig() {
|
//初始化字典 - 性别
|
initDictOptions('sys_user,realname,username').then((res) => {
|
if (res.success) {
|
this.$set(this.userDictOptions, 'username', res.result)
|
this.linkList.forEach((element) => {
|
element.user = filterMultiDictText(this.userDictOptions['username'], element.zymc)
|
})
|
}
|
})
|
},
|
queryProjectInfo() {
|
//根据项目id查询项目信息
|
this.loading = true
|
queryProById({ id: this.projectId }).then((res) => {
|
if (res.success) {
|
this.model = res.result
|
if(!this.model.summary) {
|
this.summary.pro = this.model.id
|
this.model.summary = this.summary
|
|
}
|
this.loading = false
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
//修改后重新查询数据
|
loadData() {
|
this.queryProjectInfo()
|
},
|
//修改项目信息 分段修改 type
|
editInfo(part) {
|
if (part == 1) {
|
this.$refs.proModal1.edit(this.model)
|
} else if (part == 2) {
|
this.$refs.proModal2.edit(this.model)
|
} else if (part == 3) {
|
this.$refs.proModal3.edit(this.model)
|
} else if (part == 4) {
|
this.$refs.proModal4.edit(this.model.summary)
|
}else if (part == 5) {
|
this.$refs.proModal5.edit(this.model.summary)
|
}else if (part == 6) {
|
this.$refs.proModal6.edit(this.model)
|
}else if (part == 7) {
|
this.$refs.proModal7.edit(this.model.summary)
|
}
|
},
|
//计算两个时间的天数差
|
getNumberOfDays(date1, date2) {
|
//获得天数
|
//date1：开始日期，date2结束日期
|
var a1 = Date.parse(new Date(date1))
|
var a2 = Date.parse(new Date(date2))
|
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)) //核心：时间戳相减，然后除以天数
|
return day
|
},
|
|
//返回分割的项目目标
|
targetList(data) {
|
if(!data) return []
|
if (data.indexOf('；') != -1) {
|
return data.split('；').filter(i => i)
|
}else if (data.indexOf(';') != -1) {
|
return data.split(';').filter(i => i)
|
}
|
return []
|
},
|
|
},
|
computed: {
|
//返回传过来的项目ID
|
projectId: function () {
|
return this.$route.params.id
|
},
|
//返回根据用户账号查询到的用户名
|
userName: function () {
|
return filterMultiDictText(this.userDictOptions['username'], this.model.xmfzr)
|
},
|
|
|
yysjStr:function(){
|
//完成状态
|
if(this.model.xmzt != null && this.model.xmzt == 0){
|
if(this.model.sjwcsj!=null && this.model.ksrq!=null ){
|
var sjwcsj = Date.parse(new Date(this.model.sjwcsj ));
|
var ksrq = Date.parse(new Date(this.model.ksrq));
|
var usedTime = sjwcsj - ksrq;
|
var days = Math.floor(usedTime / (24 * 3600 * 1000));
|
return days;
|
}else {
|
return this.model.xmzq
|
}
|
//未完成状态
|
}else {
|
if( this.model.ksrq!=null ){
|
var sjwcsj = Date.parse(new Date());
|
var ksrq = Date.parse(new Date(this.model.ksrq));
|
var usedTime = sjwcsj - ksrq;
|
var days = Math.floor(usedTime / (24 * 3600 * 1000));
|
return days;
|
}else {
|
return this.model.xmzq
|
}
|
}
|
},
|
|
//计算项目剩余时间
|
sysjStr: function () {
|
/* if (this.model.sysj && this.model.sysj >= 0) {
|
return '还剩' + this.model.sysj + '天'
|
} else if (this.model.sysj && this.model.sysj < 0) {
|
return '已超' + Math.abs(this.model.sysj) + '天'
|
}*/
|
if(this.model.xmzt != null && this.model.xmzt == 0){
|
return "已完成"
|
}else {
|
if(this.model.jsrq ){
|
var jsrq = new Date(this.model.jsrq )
|
var ljsrq = Date.parse(jsrq);
|
var today = Date.parse(new Date());
|
var usedTime = ljsrq - today;
|
var days = Math.floor(usedTime / (24 * 3600 * 1000));
|
if(days >0){
|
return '还剩' + (days+1) + '天'
|
}else{
|
return '已超' + Math.abs(days + 1) + '天'
|
}
|
}
|
}
|
|
|
|
|
|
|
|
|
},
|
projectProgress() {
|
let array = []
|
|
let okList = this.linkList.filter((i) => i.wcjd === 1)
|
let ok = okList.length
|
array[0] = ok
|
if (this.linkList.length > 0 && ok > 0) {
|
let p = (ok / this.linkList.length) * 100.0
|
array[1] = Number(p.toFixed(1))
|
}else {
|
array[1] = 0
|
}
|
|
return array
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.pre-wrap{
|
white-space:pre-wrap
|
}
|
.ant-form-item {
|
margin-bottom: 1px;
|
}
|
|
.vxe-table .vxe-cell {
|
text-align: center;
|
}
|
.ant-descriptions-bordered .ant-descriptions-item-label {
|
background-color: #fff;
|
}
|
.label-width {
|
width: 100px;
|
}
|
.bot-tip{
|
font-size: 10px; color: #1890ff;font-weight: bold;
|
}
|
|
/deep/ .ant-card-head-title{
|
padding: 4px 0;
|
}
|
/deep/ .ant-card-extra{
|
padding: 4px 0;
|
}
|
/deep/ .ant-card-head{
|
min-height: auto;
|
font-size: 14px;
|
}
|
|
/deep/ .ant-card-body{
|
padding: 4px 24px;
|
}
|
/deep/ .ant-descriptions-row > td{
|
padding-bottom: 4px;
|
}
|
/deep/ .ant-descriptions-item-content{
|
|
|
}
|
/deep/ .ant-descriptions-item{
|
vertical-align: top;
|
|
}
|
/deep/ .ant-descriptions-item > span{
|
display: table-cell;
|
|
}
|
</style>
|
