351 lines
11 KiB
Java
351 lines
11 KiB
Java
<template>
|
|
<div class="box">
|
|
<div class="box-text">
|
|
<div class="header-text">
|
|
{{$t('basicInformationOfParameters')}}
|
|
</div>
|
|
<div class="header-tight">
|
|
<a-button v-if="this.$route.query.studioEngineer == this.userInfo().id" class="box-button"
|
|
style="line-height: 32px" @click="edit">
|
|
{{$t('edit')}}
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-text">
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('entryName')">{{$t('entryName')}}</span>
|
|
<span class="text-field-right" :title="queryForm.projectName"
|
|
>{{queryForm.projectName}}</span>
|
|
</div>
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('targetMarket')">{{$t('targetMarket')}}</span>
|
|
<span class="text-field-right" :title="queryForm.targetMarket_dictText"
|
|
>{{queryForm.targetMarket_dictText}}</span>
|
|
</div>
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('projectStatus')">{{$t('projectStatus')}}</span>
|
|
<span class="text-field-right" :title="queryForm.projectStatus_dictText"
|
|
>{{queryForm.projectStatus_dictText}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-text">
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('DigitalPlatform')">{{$t('DigitalPlatform')}}</span>
|
|
<span class="text-field-right" :title="queryForm.digitalPlatform"
|
|
>{{queryForm.digitalPlatform}}</span>
|
|
</div>
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('ModelPlatform')">{{$t('ModelPlatform')}}</span>
|
|
<span class="text-field-right" :title="queryForm.vehiclePlatform"
|
|
>{{queryForm.vehiclePlatform}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-text">
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>
|
|
<span class="text-field-right" :title="queryForm.studioEngineerName"
|
|
>{{queryForm.studioEngineerName}}</span>
|
|
</div>
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('certifiedEngineer')">{{$t('certifiedEngineer')}}</span>
|
|
<span class="text-field-right" :title="queryForm.certificationEngineerName"
|
|
>{{queryForm.certificationEngineerName}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-text">
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('IPDInformation')">{{$t('IPDInformation')}}</span>
|
|
<span class="text-field-right text-field-right-color"
|
|
:title="queryForm.ipdInfo"
|
|
@click="urlClick(queryForm.ipdInfo)"
|
|
>{{queryForm.ipdInfo}}</span>
|
|
</div>
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('certificationProgram')">{{$t('certificationProgram')}}</span>
|
|
<span class="text-field-right text-field-right-color"
|
|
:title="queryForm.attestationPlan"
|
|
@click="urlClick(queryForm.attestationPlan)"
|
|
>{{queryForm.attestationPlan}}</span>
|
|
</div>
|
|
<div class="text-field">
|
|
<span class="text-field-left" :title="$t('dehicleDevelopmentPlan')">{{$t('dehicleDevelopmentPlan')}}</span>
|
|
<span class="text-field-right text-field-right-color"
|
|
:title="queryForm.vehicleDevelopmentPlan"
|
|
@click="urlClick(queryForm.vehicleDevelopmentPlan)"
|
|
>{{queryForm.vehicleDevelopmentPlan}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-text">
|
|
<div class="text-field" style="width: 50%">
|
|
<span class="text-field-left" :title="$t('ListOfRelevantPersonnel')">{{$t('ListOfRelevantPersonnel')}}</span>
|
|
<span class="text-field-right"
|
|
>
|
|
<a-button type="primary" v-has="'projectRelatedPersonnel:page'" class="button-text"
|
|
@click="ListOfRelevantPersonnelClick">
|
|
{{$t('ListOfRelevantPersonnel')}}
|
|
</a-button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="box-text">
|
|
<div class="header-text">
|
|
{{$t('regulatoryCertificationTaskPlan')}}
|
|
</div>
|
|
<div class="header-tight">
|
|
<a-button class="box-button" v-if="this.$route.query.studioEngineer == this.userInfo().id"
|
|
style="line-height: 32px"
|
|
@click="settingClick">{{$t('setting')}}
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
<div class="process-content">
|
|
|
|
<div style="display: flex;justify-content: space-between">
|
|
<div class="process-content-content" v-for="(item,index) in regulatoryCertificationTaskPlanList" :key="index">
|
|
<img v-if="item.status == 1" src="../../../assets/wancheng.png" class="process-content-left" alt="">
|
|
<img v-else-if="item.status == 2" src="../../../assets/shijian.png" class="process-content-left" alt="">
|
|
<img v-else-if="item.status == 3" src="../../../assets/xian.png" class="process-content-left" alt="">
|
|
<div class="process-content-right">
|
|
<div class="process-content-right-top">{{item.name}}</div>
|
|
<div class="process-content-right-button">{{item.time?item.time.slice(0,11): item.time}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="process-content-right-xian"></div>
|
|
</div>
|
|
<a-tabs style="margin-top: 20px" v-model="activeKey" class="ant-tabs">
|
|
<a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">
|
|
<currentStatusOfTheProjectEcharts @currentStatus="currentStatus"
|
|
v-if="activeKey == $t('CurrentStatusOfTheProject')"/>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">
|
|
<deliverableStatusEchart @currentStatus="currentStatus" v-if="activeKey == $t('DeliverableStatus')"/>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">
|
|
<certificationProgressEchart @currentStatus="currentStatus" v-if="activeKey == $t('CertificationProgress')"/>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
<listOfRelevantPersonnel ref="listOfRelevantPersonnelRef"/>
|
|
<addModel :url="url" ref="addModelRef" @addModelList="addModelList"/>
|
|
<settingList :url="url" ref="settingListRef" @settingListForm="settingListForm"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import listOfRelevantPersonnel from './listOfRelevantPersonnel'
|
|
import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
|
|
import addModel from './addModel'
|
|
import settingList from './settingList'
|
|
import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
|
|
import deliverableStatusEchart from './deliverableStatusEchart'
|
|
import certificationProgressEchart from './certificationProgressEchart'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'ProjectDetails',
|
|
components: {
|
|
listOfRelevantPersonnel,
|
|
addModel,
|
|
settingList,
|
|
currentStatusOfTheProjectEcharts,
|
|
deliverableStatusEchart,
|
|
certificationProgressEchart
|
|
},
|
|
data() {
|
|
return {
|
|
queryForm: {},
|
|
activeKey: this.$t('CurrentStatusOfTheProject'),
|
|
url: {
|
|
queryById: 'project/projectLibraryBase/queryById',
|
|
add: 'project/projectLibraryBase/add',
|
|
edit: 'project/projectLibraryBase/edit',
|
|
queryByProjectId: 'project/projectTaskPlanning/queryByProjectId',
|
|
addSettingUrl: 'project/projectTaskPlanning/add',
|
|
editSettingUrl: 'project/projectTaskPlanning/edit',
|
|
settingQueryForm: '/project/projectTaskPlanning/list'
|
|
},
|
|
regulatoryCertificationTaskPlanList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getForm()
|
|
this.getSetting()
|
|
},
|
|
methods: {
|
|
...mapGetters(['userInfo']),
|
|
getForm() {
|
|
getAction(this.url.queryById, { id: this.$route.query.id }).then((res) => {
|
|
if (res.success) {
|
|
this.queryForm = res.result[0] || {}
|
|
} else {
|
|
this.queryForm = {}
|
|
}
|
|
})
|
|
},
|
|
currentStatus(item) {
|
|
this.$emit('TaskListChange', item)
|
|
},
|
|
getSetting() {
|
|
getAction(this.url.queryByProjectId, { projectId: this.$route.query.id }).then((res) => {
|
|
if (res.success) {
|
|
this.regulatoryCertificationTaskPlanList = res.result || []
|
|
} else {
|
|
this.regulatoryCertificationTaskPlanList = []
|
|
}
|
|
})
|
|
},
|
|
settingListForm() {
|
|
this.getSetting()
|
|
},
|
|
ListOfRelevantPersonnelClick() {
|
|
this.$refs.listOfRelevantPersonnelRef.getData()
|
|
},
|
|
urlClick(val) {
|
|
if (val) {
|
|
window.open(val)
|
|
}
|
|
},
|
|
edit() {
|
|
console.log(this.queryForm)
|
|
this.$refs.addModelRef.editModel(JSON.parse(JSON.stringify(this.queryForm)))
|
|
},
|
|
addModelList() {
|
|
this.getForm()
|
|
},
|
|
settingClick() {
|
|
this.$refs.settingListRef.edit()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
.box {
|
|
padding: 0 24px 24px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header-text {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #000F16;
|
|
}
|
|
|
|
.content-text {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.text-field {
|
|
width: 33%;
|
|
margin-bottom: 8px;
|
|
|
|
.text-field-left {
|
|
width: 124px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #6F7385;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.text-field-right {
|
|
width: calc(100% - 200px);
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #040B29;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.process-content {
|
|
margin-top: 4px;
|
|
position: relative;
|
|
|
|
.process-content-content {
|
|
background: #fff;
|
|
z-index: 1000;
|
|
padding: 0 20px;
|
|
|
|
.process-content-left {
|
|
float: left;
|
|
}
|
|
|
|
.process-content-right {
|
|
float: left;
|
|
margin-left: 7px;
|
|
|
|
.process-content-right-top {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #040B29;
|
|
max-width: 155px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.process-content-right-button {
|
|
max-width: 155px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #6F7385;
|
|
margin-top: -4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.process-content-content:first-child {
|
|
padding: 0 20px 0 0;
|
|
}
|
|
|
|
.process-content-content:last-child {
|
|
padding: 0 0 0 20px;
|
|
}
|
|
|
|
.process-content-right-xian {
|
|
height: 2px;
|
|
width: calc(100% - 27px);
|
|
background: #E6E6E9;
|
|
position: absolute;
|
|
top: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 600px) and (max-width: 1600px) {
|
|
|
|
.process-content-right-top {
|
|
max-width: 70px !important;
|
|
white-space: inherit !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.process-content-right-button {
|
|
max-width: 70px !important;
|
|
}
|
|
}
|
|
|
|
.text-field-right-color {
|
|
color: #00B3BE !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.box-text {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
}
|
|
</style> |