<template>
|
<win2 :title="setting.title" @close="close">
|
<div class="app-container">
|
<el-row :gutter="15">
|
<el-col :span="5">
|
<el-card shadow="never" class="com-box">
|
<div>
|
<div class="f-r">
|
<div class="img-box f-r f-r-center">
|
<img src="@/assets/images/project/icon-gj-lv.png" alt="" class="type-img"/>
|
</div>
|
<div>
|
<div class="font-18 font-bold color-333">{{info.projectName}}</div>
|
<el-progress :percentage="info.progressRate" style="width: 100%;margin-top: 5px"
|
:show-text="false"></el-progress>
|
<div class="m-t-10 f-r f-r-between">
|
<el-tag :type="getStatusText(info.status).type">{{ getStatusText(info.status).text }}</el-tag>
|
<div class="font-13 color-999">
|
当前进度
|
<span class="color-red">{{ info.progressRate }}%</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="cont-box">
|
<div class="font-14 color-666">主要建设内容</div>
|
<div class="font-14 color-333 m-t-5 line-24">
|
{{info.detail}}
|
</div>
|
</div>
|
<div class="e-p-v-15">
|
<el-form label-width="80px" label-position="left">
|
<el-form-item label="建设地址">
|
<div class="font-14 color-333 line-24">{{info.addr}}</div>
|
</el-form-item>
|
<el-form-item label="项目编号">
|
<div class="font-14 color-333 line-24">{{info.projectCode}}</div>
|
</el-form-item>
|
<el-form-item label="项目分类">
|
<div class="font-14 color-333 line-24" style="color: #235686">{{info.projectCategoryName}}</div>
|
</el-form-item>
|
<el-form-item label="建设单位">
|
<div class="font-14 color-333 line-24">{{info.buildOrgName}}</div>
|
</el-form-item>
|
<el-form-item label="项目经理">
|
<div class="font-14 color-333 line-24">{{info.projectManager}}</div>
|
</el-form-item>
|
<el-form-item label="起止年限">
|
<div class="font-14 color-333 line-24">{{info.buildYearStart}}-{{info.buildYearEnd}}</div>
|
</el-form-item>
|
<el-form-item label="项目批次">
|
<div class="font-14 color-333 line-24">{{info.projectBatchName}}</div>
|
</el-form-item>
|
<el-form-item label="批复时间">
|
<div class="font-14 color-333 line-24">{{info.approvalDate}}</div>
|
</el-form-item>
|
<el-form-item label="创建时间">
|
<div class="font-14 color-333 line-24">{{info.createTime}}</div>
|
</el-form-item>
|
<el-form-item label="投资专业">
|
<div class="font-14 color-333 line-24">{{info.investMajorName}}</div>
|
</el-form-item>
|
<el-form-item label="项目投资">
|
<div class="font-14 color-333 line-24">总资产{{info.totalInvest}}万元 / 已下达<span class="color-red">{{info.totalReleaseInvest}}</span>万元</div>
|
<div v-for="(item, i) in info.pReleaseInvestInfoList"
|
:key="item.id"
|
class="font-14 color-333 line-24">
|
第{{i + 1}}次下达<span class="color-red">{{item.releaseInvest}}</span>万元
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="10" class="com-box">
|
<el-card shadow="never">
|
<div class="font-18 color-333 font-bold m-b-15">节点进度</div>
|
<div class="f-r f-r-between f-r-top">
|
<!--左侧-->
|
<div class="com-c-box">
|
<div v-for="(c,j) in projectStage" :key="j" class="jd-item" :class="{'jd-active':c.pstageId===curId}" @click="changeJd(c,j)">
|
{{ c.pstageName }}
|
</div>
|
</div>
|
<!--右侧-->
|
<div class="f-1 node-list com-c-box">
|
<el-timeline>
|
<el-timeline-item
|
v-for="(node, index) in nodeList"
|
:key="index"
|
icon="el-icon-check"
|
type="success"
|
size="large"
|
:hide-timestamp="false">
|
<div class="node-item f-r f-r-between">
|
<div>
|
<div class="font-16 color-333">{{ node.nodeName }}</div>
|
<div class="m-t-5 font-14 color-333">{{ formatterDate(node.nodeStart) }}至{{ formatterDate(node.nodeEnd) }}</div>
|
</div>
|
<div>
|
<!-- <div class="font-12 color-999">{{ node.nodeCompleteDate }}</div>-->
|
<el-button type="primary" size="mini" class="m-t-5 float-right" @click="lookNode(node.nodeId)">查看</el-button>
|
</div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="9">
|
<el-card shadow="never">
|
<div class="font-18 color-333 font-bold m-b-15">全部进度</div>
|
<div class="com-c-box" style="padding-left: 5px" :loading="nodeLoading">
|
<el-timeline>
|
<!-- recList-->
|
<el-timeline-item
|
v-for="(cs, index) in 10"
|
:key="index"
|
size="large"
|
:hide-timestamp="false">
|
<div class="info-item">
|
<div class="font-14 m-b-15">
|
完成了<span class="color-0D9">立项/可研</span>阶段的审查节点
|
</div>
|
<div class="info-box">
|
<div class="f-r f-r-between m-b-15">
|
<div class="font-14 color-333">周星星</div>
|
<div class="font-12 color-999">2023-09-04 12:31</div>
|
</div>
|
<!-- 图片-->
|
<div class="f-r">
|
<el-image
|
v-for="(iItem,iIndex) in cs.imgs"
|
class="info-img"
|
:src="iItem"
|
:preview-src-list="imgList">
|
</el-image>
|
</div>
|
<!-- 附件 -->
|
<div class="m-b-15" v-if="cs.files && cs.files.length>0">
|
<div class="font-14 color-666">附件</div>
|
<div class="f-r f-r-between file-item" v-for="(file,fIndex) in cs.files">
|
<div class="f-r f-1">
|
<img :src="getFileIcon(file.fileName)" alt="下载" class="file-icon"/>
|
<div class="file-name" @click="downLoadFile(file.url)">
|
{{ file.fileName }}
|
</div>
|
</div>
|
<div class="down-enter">查看</div>
|
</div>
|
</div>
|
<!-- 当前项目进度 -->
|
<div>
|
<div class="font-14 color-666">当前项目进度</div>
|
<div class="font-14 color-333 m-t-5 line-24">
|
在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<!-- 节点进度 -->
|
<nodeProgress v-if="nodeShow" :nodeId="nodeId" @close="nodeShow=false"></nodeProgress>
|
</div>
|
</win2>
|
</template>
|
|
<script>
|
import win2 from '@/components/win2/index'
|
import {getDownUrl} from '@/utils/base';
|
import nodeProgress from '@/views/projectManage/information/nodeProgress'
|
import * as info from '@/api/projectManage/info'
|
import * as DateFormatter from '@/utils/DateFormatter';
|
export default {
|
name: "detail",
|
components: {win2,nodeProgress},
|
props: {
|
setting: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
return {
|
info: {},
|
files: [
|
{url: '2222.txt', fileName: '最项目进度设计方案.xsl'},
|
{url: '2222.txt', fileName: '最项目进度设计方案.ppt'},
|
{url: '2222.txt', fileName: '最项目进度设计方案.pdf'},
|
{url: '2222.txt', fileName: '最项目进度设计方案.xls'},
|
{url: '2222.txt', fileName: '最项目进度设计方案.xsl'}
|
],
|
projectStage: [], // 节点列表
|
curId: null, // 当前选中阶段id
|
nodeId: null, // 当前选中节点id
|
nodeList: [],
|
recList: [], // 进度列表
|
imgList: [], // 图片预览
|
nodeShow:false, // 节点进度
|
nodeLoading:false // 右侧加载loading
|
}
|
},
|
created() {
|
if (this.setting.id) {
|
this.getInfo(this.setting.id)
|
}
|
},
|
methods: {
|
formatterDate(time){
|
return DateFormatter.LongToDate(time)
|
},
|
getInfo(id) {
|
info.getInfo({id: id}).then(res => {
|
if (res) {
|
this.info = res
|
this.info.approvalDate = DateFormatter.LongToDate(this.info.approvalDate)
|
this.info.createTime = DateFormatter.LongToDateTime(this.info.createTime)
|
this.projectStage = res.pTempStageResults
|
if(this.projectStage.length>0){
|
this.curId = this.projectStage[0].pstageId
|
this.nodeList = this.projectStage[0].pStageNodeResults
|
}
|
}
|
})
|
},
|
// 查看节点进度
|
lookNode(nodeId){
|
this.nodeId = nodeId
|
this.nodeShow = true
|
},
|
// 切换节点
|
changeJd(c,index){
|
this.curId = c.pstageId
|
this.nodeList = this.projectStage[index].pStageNodeResults
|
this.$forceUpdate()
|
},
|
getStatusText(state) {
|
// 0 未开工 1 进行中 2 已完成 3 已取消 4 已延期
|
let obj = {
|
text: '',
|
type: 'success'
|
}
|
switch (state) {
|
case 0:
|
obj.text = '未开工'
|
obj.type = 'info'
|
break
|
case 1:
|
obj.text = '进行中'
|
obj.type = 'primary'
|
break
|
case 2:
|
obj.text = '已完成'
|
obj.type = 'success'
|
break
|
case 3:
|
obj.text = '已取消'
|
obj.type = 'warning'
|
break
|
case 4:
|
obj.text = '已延期'
|
obj.type = 'danger'
|
break
|
}
|
return obj
|
},
|
// 下载文件
|
downLoadFile(item) {
|
const loadingInstance = this.$loading({
|
lock: true,
|
text: '正在下载...',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
});
|
let info = JSON.parse(item)[0];
|
if (info.url.indexOf('http') !== 0) {
|
info.url = getDownUrl() + info.url;
|
}
|
// window.open(decodeURI(info.url))
|
var doc = document.createElement('a');
|
doc.href = info.url;
|
doc.download = info.fileName;
|
doc.target = '_blank';
|
doc.click();
|
loadingInstance.close();
|
},
|
getFileIcon(item) {
|
const arr = item.split('.');
|
if (arr[arr.length - 1] === 'doc' || arr[arr.length - 1] === 'docx') {
|
return require('@/assets/images/project/word.png');
|
} else if (arr[arr.length - 1] === 'pdf') {
|
return require('@/assets/images/project/pdf.png');
|
} else if (arr[arr.length - 1] === 'txt') {
|
return require('@/assets/images/project/txt.png');
|
} else if (arr[arr.length - 1] === 'xls' || arr[arr.length - 1] === 'xlsx') {
|
return require('@/assets/images/project/xls.png');
|
} else if (arr[arr.length - 1] === 'ppt' || arr[arr.length - 1] === 'pptx') {
|
return require('@/assets/images/project/ppt.png');
|
} else {
|
return require('@/assets/images/project/no-file.png');
|
}
|
},
|
close() {
|
this.$emit('close')
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.com-box {
|
overflow-y: auto;
|
max-height: calc(100vh - 256px);
|
}
|
|
.com-c-box {
|
overflow-y: auto;
|
max-height: calc(100vh - 310px);
|
}
|
|
.com-c-box::-webkit-scrollbar {
|
display: none;
|
}
|
|
.com-box::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
.com-box::-webkit-scrollbar-thumb {
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
}
|
|
.m-t-10 {
|
margin-top: 10px;
|
}
|
|
.m-t-5 {
|
margin-top: 5px;
|
}
|
|
.m-b-15 {
|
margin-bottom: 15px;
|
}
|
|
.img-box {
|
min-width: 56px;
|
max-width: 56px;
|
height: 56px;
|
border-radius: 4px;
|
border: 1px solid #eeeeee;
|
margin-right: 5px;
|
}
|
|
.type-img {
|
width: 38px;
|
height: 38px;
|
}
|
|
.cont-box {
|
padding: 15px 0;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
|
.line-24 {
|
line-height: 24px;
|
}
|
|
>>> .el-form-item__label {
|
line-height: 24px;
|
}
|
|
>>> .el-form-item {
|
margin-bottom: 10px;
|
}
|
|
.e-p-v-15 {
|
padding: 15px 0;
|
}
|
|
.jd-item {
|
width: 150px;
|
height: 45px;
|
line-height: 45px;
|
text-align: center;
|
border-radius: 4px;
|
font-size: 16px;
|
border: 1px solid #e6e6e6;
|
cursor: pointer;
|
margin-bottom: 15px;
|
}
|
|
.jd-item:hover {
|
color: #FFFFFF;
|
background-color: #0d997c;
|
}
|
|
.jd-active {
|
color: #FFFFFF;
|
background-color: #0d997c;
|
}
|
|
.node-list {
|
padding-left: 25px;
|
}
|
|
.node-item {
|
padding-top: 5px;
|
}
|
|
.float-right {
|
float: right;
|
}
|
|
.color-0D9 {
|
color: #0D997C;
|
}
|
|
.info-item {
|
padding-top: 5px;
|
}
|
|
.info-box {
|
padding: 8px;
|
border-radius: 4px;
|
background: #f8faf9;
|
}
|
|
.info-img {
|
width: 92px;
|
height: 92px;
|
border-radius: 4px;
|
margin-right: 10px;
|
}
|
|
.file-item {
|
padding: 10px 0;
|
}
|
.file-icon{
|
width: 16px;
|
height: 16px;
|
margin-right: 5px;
|
}
|
.file-name{
|
font-size: 14px;
|
color: #333333;
|
}
|
.file-name:hover{
|
cursor: pointer;
|
color: #0d997c;
|
}
|
.down-enter{
|
cursor: pointer;
|
color: #1890ff;
|
font-size: 14px;
|
text-decoration: underline;
|
}
|
</style>
|
