Merge branch 'dev_20230424_TJ'
# Conflicts: # jero-boot/jero-boot-modules/src/main/java/com/jero/modules/project/controller/ProjectLawsInventoryEOController.java # jero-boot/jero-boot-modules/src/main/java/com/jero/modules/project/service/IProjectCertificationInventoryEOService.java # jero-boot/jero-boot-modules/src/main/java/com/jero/modules/project/service/IProjectLawsInventoryEOService.java # jero-boot/jero-boot-modules/src/main/java/com/jero/modules/project/service/impl/ProjectCertificationInventoryEOServiceImpl.java # jero-boot/jero-boot-modules/src/main/java/com/jero/modules/project/service/impl/ProjectLawsInventoryEOServiceImpl.java # jero-web/src/common/lang/en-us.js
This commit is contained in:
高嵩
@@ -28,23 +28,8 @@
|
||||
<span class="text-field-right" :title="queryForm.projectStatus_dictText"
|
||||
>{{queryForm.projectStatus_dictText}}</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('projectVersion')">{{$t('projectVersion')}}</span>-->
|
||||
<!-- <span class="text-field-right" :title="queryForm.projectVersion"-->
|
||||
<!-- >{{queryForm.projectVersion}}</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="content-text">
|
||||
<!-- <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 class="text-field">
|
||||
<span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>
|
||||
<span class="text-field-right" :title="queryForm.studioEngineerName"
|
||||
@@ -57,14 +42,19 @@
|
||||
</div>
|
||||
<div class="text-field">
|
||||
<span class="text-field-left" style="float: left;margin-top: 3px" :title="$t('ListOfRelevantPersonnel')">{{$t('ListOfRelevantPersonnel')}}</span>
|
||||
<span class="text-field-right"
|
||||
<span class="text-field-right text-field-right-color"
|
||||
>
|
||||
<a-button type="primary" v-has="'projectRelatedPersonnel:page'"
|
||||
:title="$t('ListOfRelevantPersonnel')"
|
||||
class="button-text"
|
||||
@click="ListOfRelevantPersonnelClick">
|
||||
{{$t('ListOfRelevantPersonnel')}}
|
||||
</a-button>
|
||||
<span v-has="'projectRelatedPersonnel:page'"
|
||||
@click="ListOfRelevantPersonnelClick">
|
||||
<a-icon type="eye"/>
|
||||
{{$t('ListOfRelevantPersonnel')}}
|
||||
</span>
|
||||
<!-- <a-button type="primary" v-has="'projectRelatedPersonnel:page'"-->
|
||||
<!-- :title="$t('ListOfRelevantPersonnel')"-->
|
||||
<!-- class="button-text"-->
|
||||
<!-- >-->
|
||||
<!-- {{$t('ListOfRelevantPersonnel')}}-->
|
||||
<!-- </a-button>-->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,18 +74,6 @@
|
||||
<span class="text-field-right" :title="queryForm.softwareVersion"
|
||||
>{{queryForm.softwareVersion}}</span>
|
||||
</div>
|
||||
<!-- <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('brand')">{{$t('brand')}}</span>-->
|
||||
<!-- <span class="text-field-right" :title="queryForm.brandText"-->
|
||||
<!-- >{{queryForm.brandText}}</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="content-text">
|
||||
<div class="text-field">
|
||||
@@ -112,13 +90,13 @@
|
||||
@click="urlClick(queryForm.attestationPlan)"
|
||||
>{{queryForm.attestationPlan}}</span>
|
||||
</div>
|
||||
<div class="text-field">
|
||||
<span class="text-field-left" :title="$t('configurationInformation')">{{$t('configurationInformation')}}</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('configurationInformation')">{{$t('configurationInformation')}}</span>
|
||||
<span class="text-field-right text-field-right-color"
|
||||
:title="queryForm.ipdInfo"
|
||||
@click="urlClick(queryForm.ipdInfo)"
|
||||
>{{queryForm.ipdInfo}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-text">
|
||||
<div class="text-field-content">
|
||||
@@ -127,34 +105,7 @@
|
||||
>{{queryForm.explanation}}</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 class="text-field">-->
|
||||
<!-- <span class="text-field-left" style="float: left;margin-top: 3px" :title="$t('ListOfRelevantPersonnel')">{{$t('ListOfRelevantPersonnel')}}</span>-->
|
||||
<!-- <span class="text-field-right"-->
|
||||
<!-- >-->
|
||||
<!-- <a-button type="primary" v-has="'projectRelatedPersonnel:page'"-->
|
||||
<!-- :title="$t('ListOfRelevantPersonnel')"-->
|
||||
<!-- class="button-text"-->
|
||||
<!-- @click="ListOfRelevantPersonnelClick">-->
|
||||
<!-- {{$t('ListOfRelevantPersonnel')}}-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="content-text">-->
|
||||
|
||||
<!-- </div>-->
|
||||
<div class="box-text">
|
||||
<div class="box-text" style="margin-top: 10px;margin-bottom: 10px">
|
||||
<div class="header-text">
|
||||
{{$t('complianceCertificationProgram')}}
|
||||
</div>
|
||||
@@ -167,35 +118,40 @@
|
||||
</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" :title="item.name">{{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>
|
||||
<complianceCertificationForm ref="complianceCertificationRef"/>
|
||||
<!-- <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" :title="item.name">{{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-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">-->
|
||||
<!-- <ParameterCollectionEchart @currentStatus="currentStatus" v-if="activeKey == $t('Parametercollection')"/>-->
|
||||
<!-- </a-tab-pane>-->
|
||||
<!-- </a-tabs>-->
|
||||
<div class="box-text" style="margin-top: 10px">
|
||||
<div class="header-text">
|
||||
{{$t('projectStatus')}}
|
||||
</div>
|
||||
<div class="header-tight">
|
||||
<a-button class="box-button"
|
||||
style="line-height: 32px"
|
||||
@click="stateExportClick">{{$t('stateExport')}}
|
||||
</a-button>
|
||||
<a-button class="box-button"
|
||||
v-if="activeKey == $t('regulatoryComplianceManagement') || activeKey == $t('certificationActivityManagement')"
|
||||
style="line-height: 32px"
|
||||
@click="versionStatisticsClick">{{$t('versionStatistics')}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<projectStatus ref="projectStatusRef"
|
||||
@currentStatus="currentStatus"
|
||||
@projectStatusForm="projectStatusForm"/>
|
||||
<versionStatistics ref="versionStatisticsRef" @versionStatisticsForm="versionStatisticsForm"/>
|
||||
<listOfRelevantPersonnel ref="listOfRelevantPersonnelRef"/>
|
||||
<addModel :url="url" ref="addModelRef" @addModelList="addModelList"/>
|
||||
<settingList :url="url" ref="settingListRef" @settingListForm="settingListForm"/>
|
||||
@@ -207,30 +163,28 @@
|
||||
import listOfRelevantPersonnel from './listOfRelevantPersonnel'
|
||||
import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
|
||||
import addModel from './addModel'
|
||||
import versionStatistics from './versionStatistics'
|
||||
import complianceCertificationForm from './complianceCertificationForm'
|
||||
import settingList from './settingList'
|
||||
import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
|
||||
import deliverableStatusEchart from './deliverableStatusEchart'
|
||||
import ParameterCollectionEchart from './ParameterCollectionEchart'
|
||||
import certificationProgressEchart from './certificationProgressEchart'
|
||||
import projectStatus from './projectStatus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ProjectDetails',
|
||||
components: {
|
||||
listOfRelevantPersonnel,
|
||||
ParameterCollectionEchart,
|
||||
addModel,
|
||||
settingList,
|
||||
currentStatusOfTheProjectEcharts,
|
||||
deliverableStatusEchart,
|
||||
certificationProgressEchart
|
||||
projectStatus,
|
||||
versionStatistics,
|
||||
complianceCertificationForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryForm: {},
|
||||
cut:'',
|
||||
administrators:false,
|
||||
activeKey: this.$t('CurrentStatusOfTheProject'),
|
||||
cut: '',
|
||||
administrators: false,
|
||||
activeKey: this.$t('regulatoryComplianceManagement'),
|
||||
url: {
|
||||
queryById: 'project/projectLibraryBase/queryById',
|
||||
add: 'project/projectLibraryBase/add',
|
||||
@@ -240,13 +194,15 @@
|
||||
editSettingUrl: 'project/projectTaskPlanning/edit',
|
||||
settingQueryForm: '/project/projectTaskPlanning/list'
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
idList: [],
|
||||
regulatoryCertificationTaskPlanList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getForm()
|
||||
this.getSetting()
|
||||
this.administrators = false
|
||||
this.activeKey = this.$t('regulatoryComplianceManagement')
|
||||
if (this.userInfo().userRoleList && this.userInfo().userRoleList.length > 0) {
|
||||
this.userInfo().userRoleList.forEach(res => {
|
||||
if (res.roleCode == 'admin') {
|
||||
@@ -262,9 +218,9 @@
|
||||
if (res.success) {
|
||||
this.cut = res.cut
|
||||
this.queryForm = res.result[0] || {}
|
||||
if(this.cut == 'en'){
|
||||
if (this.cut == 'en') {
|
||||
this.queryForm.brandText = this.queryForm.brandTextEn
|
||||
}else{
|
||||
} else {
|
||||
this.queryForm.brandText = this.queryForm.brandText
|
||||
}
|
||||
} else {
|
||||
@@ -272,20 +228,11 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
// 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 = []
|
||||
}
|
||||
})
|
||||
currentStatus(item) {
|
||||
this.$emit('TaskListChange', item)
|
||||
},
|
||||
settingListForm() {
|
||||
this.getSetting()
|
||||
this.$refs.complianceCertificationRef.getSetting()
|
||||
},
|
||||
ListOfRelevantPersonnelClick() {
|
||||
this.$refs.listOfRelevantPersonnelRef.getData()
|
||||
@@ -296,7 +243,6 @@
|
||||
}
|
||||
},
|
||||
edit() {
|
||||
console.log(this.queryForm)
|
||||
this.$refs.addModelRef.editModel(JSON.parse(JSON.stringify(this.queryForm)))
|
||||
},
|
||||
addModelList() {
|
||||
@@ -304,6 +250,24 @@
|
||||
},
|
||||
settingClick() {
|
||||
this.$refs.settingListRef.edit()
|
||||
},
|
||||
stateExportClick() {
|
||||
let query = {
|
||||
projectLibraryId: this.$route.query.id
|
||||
}
|
||||
downloadFile('/project/projectLibraryBase/exportProjectProgressStatisticsXls',
|
||||
this.queryForm.projectName+'-'+this.queryForm.projectVersion+'-'+this.$t('projectProgressStatistics') + '.xls', query)
|
||||
},
|
||||
|
||||
versionStatisticsClick() {
|
||||
this.$refs.versionStatisticsRef.addModel(JSON.parse(JSON.stringify(this.selectedRowKeys)))
|
||||
},
|
||||
versionStatisticsForm(value) {
|
||||
this.$refs.projectStatusRef.versionStatisticsForm(value)
|
||||
this.selectedRowKeys = JSON.parse(JSON.stringify(value))
|
||||
},
|
||||
projectStatusForm(activeKey) {
|
||||
this.activeKey = activeKey
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -319,7 +283,7 @@
|
||||
|
||||
.header-text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-weight: bold;
|
||||
color: #000F16;
|
||||
}
|
||||
|
||||
@@ -359,7 +323,7 @@
|
||||
|
||||
.text-field-content {
|
||||
width: 100%;
|
||||
margin-bottom: 34px;
|
||||
/*margin-bottom: 34px;*/
|
||||
|
||||
.text-field-left {
|
||||
width: 124px;
|
||||
@@ -463,11 +427,19 @@
|
||||
.box-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
height: 72px;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.header-tight {
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
padding: 0 13px;
|
||||
}
|
||||
|
||||
.box-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div id="main-left"></div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div id="main-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-bottom">
|
||||
<div class="box-content-text">
|
||||
<div class="box-content-text-text" @click="boxContentClick(0)">
|
||||
{{$t('whole')}}
|
||||
</div>
|
||||
<div class="box-content-text-text" @click="boxContentClick(1)">
|
||||
{{$t('completeVehicle')}}
|
||||
</div>
|
||||
<div class="box-content-text-text" @click="boxContentClick(2)">
|
||||
{{$t('components')}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="main-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||||
import responsibilityList from './responsibilityList'
|
||||
|
||||
export default {
|
||||
name: 'certificationActivity',
|
||||
components: {
|
||||
responsibilityList
|
||||
},
|
||||
props: {
|
||||
idList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: {
|
||||
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
|
||||
},
|
||||
certificationProgressMap:{},
|
||||
num:'0',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.num = '0'
|
||||
let boxContentTextColor = document.getElementsByClassName('box-content-text-color')
|
||||
if (boxContentTextColor && boxContentTextColor.length > 0) {
|
||||
boxContentTextColor[0].classList.remove('box-content-text-color')
|
||||
}
|
||||
let boxContentTextText = document.getElementsByClassName('box-content-text-text')
|
||||
if (boxContentTextText && boxContentTextText.length > 0) {
|
||||
boxContentTextText[0].classList.add('box-content-text-color')
|
||||
}
|
||||
this.mainBottomEcharts()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let id = ''
|
||||
if (this.idList && this.idList.length > 0) {
|
||||
id = this.idList.join(',')
|
||||
} else {
|
||||
id = this.$route.query.id
|
||||
}
|
||||
getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result) {
|
||||
let rzTaskToConfirmMapList = res.result.rzTaskToConfirmMap ? res.result.rzTaskToConfirmMap.rzTaskToConfirmMapList : []
|
||||
let prehomoMapList = res.result.prehomoMap ? res.result.prehomoMap.prehomoMapList : []
|
||||
this.certificationProgressMap = res.result.certificationProgressMap
|
||||
let allMapList = res.result.certificationProgressMap ? res.result.certificationProgressMap.allMapList : []
|
||||
this.dataEcharts(rzTaskToConfirmMapList)
|
||||
this.mainRightEcharts(prehomoMapList)
|
||||
this.mainBottomEcharts(allMapList)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
dataEcharts(dataSource) {
|
||||
let data = []
|
||||
let color = []
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
this.dataSource = [{}]
|
||||
dataSource.forEach(res => {
|
||||
if (res.taskAffirmStatus == 'Not started') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('notLaunch'),
|
||||
color: '#00B3BE',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.taskAffirmStatus == 'List to confirm') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('listToConfirm'),
|
||||
color: '#FDA71C',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
} else if (res.taskAffirmStatus == 'Accepted') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('accept'),
|
||||
color: '#26BC4B',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
} else if (res.taskAffirmStatus == 'Rejected') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('refuse'),
|
||||
color: '#E83030',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#E83030')
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-left', this.$t('certificationTaskConfirmation'), color, data)
|
||||
},
|
||||
mainRightEcharts(dataSource){
|
||||
let data = []
|
||||
let color = []
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
this.dataSource = [{}]
|
||||
dataSource.forEach(res => {
|
||||
if (res.taskAffirmStatus == 'Not started') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('notLaunch'),
|
||||
color: '#00B3BE',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.taskAffirmStatus == 'List to confirm') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('listToConfirm'),
|
||||
color: '#FDA71C',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
} else if (res.taskAffirmStatus == 'Review and pass') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('reviewAndPass'),
|
||||
color: '#26BC4B',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
} else if (res.taskAffirmStatus == 'Review and return') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('reviewAndReturn'),
|
||||
color: '#E83030',
|
||||
status:res.taskAffirmStatus
|
||||
})
|
||||
color.push('#E83030')
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-right', this.$t('preHomoFlow'), color, data)
|
||||
},
|
||||
mainBottomEcharts(dataSource){
|
||||
let data = []
|
||||
let color = []
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
dataSource.forEach(res => {
|
||||
if (res.certificationProgress == 'Not start') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('Notatthe'),
|
||||
color: '#00B3BE',
|
||||
status:res.certificationProgress
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.certificationProgress == 'In progress') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('inProgress'),
|
||||
color: '#FDA71C',
|
||||
status:res.certificationProgress
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
} else if (res.certificationProgress == 'Test passed') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('experimentPassed'),
|
||||
color: '#26BC4B',
|
||||
status:res.certificationProgress
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
} else if (res.certificationProgress == 'Test failed') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('experimentFailed'),
|
||||
color: '#E83030',
|
||||
status:res.certificationProgress
|
||||
})
|
||||
color.push('#E83030')
|
||||
}else if (res.certificationProgress == 'Component report not submitted') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('componentReportNotSubmitted'),
|
||||
color: '#FDA71C',
|
||||
status:res.certificationProgress
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
}else if (res.certificationProgress == 'Component report submitted') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('componentReportSubmitted'),
|
||||
color: '#6FD682',
|
||||
status:res.certificationProgress
|
||||
})
|
||||
color.push('#6FD682')
|
||||
}else if (res.certificationProgress == 'Component report has been stored') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('componentReportHasBeenStored'),
|
||||
color: '#26BC4B',
|
||||
status:res.certificationProgress
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data)
|
||||
},
|
||||
getEcharts(chart, title, color, data) {
|
||||
var myChart = echarts.init(document.getElementById(chart))
|
||||
myChart.setOption({
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle : {
|
||||
fontWeight : 'normal',
|
||||
fontSize : 14,
|
||||
color:'#040B29',
|
||||
fontFamily:'BlueSkyNoto',
|
||||
},
|
||||
formatter: function (parms) {
|
||||
let str = parms.marker+' '+parms.data.name+' '+parms.data.value+' ('+parms.percent+'%)'
|
||||
return str
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
itemGap: 30,
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: title,
|
||||
type: 'pie',
|
||||
radius: ['40%', '54%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: color,
|
||||
data: data
|
||||
}
|
||||
]
|
||||
})
|
||||
myChart.off('click') // 重点代码
|
||||
myChart.on('click', (params) => {
|
||||
console.log(params)
|
||||
let query = {
|
||||
title: params.seriesName,
|
||||
projectLibraryId: this.$route.query.id
|
||||
}
|
||||
if (params.seriesName === this.$t('certificationTaskConfirmation')) {
|
||||
query.operatorType = 'queryRZTaskToConfirmStatistics'
|
||||
query.status = params.data.status
|
||||
} else if (params.seriesName === this.$t('preHomoFlow')) {
|
||||
query.operatorType = 'queryPrehomoStatistics'
|
||||
query.status = params.data.status
|
||||
} else if (params.seriesName === this.$t('CertificationProgress')) {
|
||||
if (this.num == '0'){
|
||||
query.operatorType = 'queryCertificationProgressStatisticsAll'
|
||||
}else if(this.num == '1'){
|
||||
query.operatorType = 'queryCertificationProgressStatisticsCar'
|
||||
}else if(this.num == '2'){
|
||||
query.operatorType = 'queryCertificationProgressStatisticsPart'
|
||||
}
|
||||
query.status = params.data.status
|
||||
}
|
||||
this.$refs.responsibilityListRef.getData(query)
|
||||
})
|
||||
},
|
||||
|
||||
responsibility(item) {
|
||||
this.$emit('currentStatus', item)
|
||||
},
|
||||
boxContentClick(num) {
|
||||
|
||||
let boxContentTextColor = document.getElementsByClassName('box-content-text-color')
|
||||
if (boxContentTextColor && boxContentTextColor.length > 0) {
|
||||
boxContentTextColor[0].classList.remove('box-content-text-color')
|
||||
}
|
||||
let boxContentTextText = document.getElementsByClassName('box-content-text-text')
|
||||
if (boxContentTextText && boxContentTextText.length > 0) {
|
||||
boxContentTextText[num].classList.add('box-content-text-color')
|
||||
}
|
||||
this.num = num
|
||||
if (num == 0){
|
||||
this.mainBottomEcharts( this.certificationProgressMap.allMapList || [])
|
||||
}else if(num == 1){
|
||||
this.mainBottomEcharts( this.certificationProgressMap.carMapList || [])
|
||||
}else if(num == 2){
|
||||
this.mainBottomEcharts( this.certificationProgressMap.partMapList || [])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
/*margin-bottom: 20px;*/
|
||||
|
||||
.box-content-left {
|
||||
width: calc(50% - 10px);
|
||||
height: 346px;
|
||||
border: 2px #eff1f3 solid;
|
||||
border-radius: 6px;
|
||||
margin-top: 4px;
|
||||
|
||||
#main-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-right {
|
||||
width: calc(50% - 10px);
|
||||
height: 346px;
|
||||
border: 2px #eff1f3 solid;
|
||||
border-radius: 6px;
|
||||
margin-top: 4px;
|
||||
|
||||
#main-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-bottom {
|
||||
width: 100%;
|
||||
height: 346px;
|
||||
border: 2px #eff1f3 solid;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
margin-top: 20px;
|
||||
|
||||
.box-content-text {
|
||||
height: 30px;
|
||||
background: #F5F6F7;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 20px;
|
||||
display: flex;
|
||||
z-index: 100;
|
||||
justify-content: space-between;
|
||||
padding: 0 2px 0 2px;
|
||||
|
||||
.box-content-text-text {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #6F7385;
|
||||
line-height: 30px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-content-text-color {
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 60, 0.01), 0px 2px 4px rgba(0, 22, 60, 0.02), 0px 4px 6px rgba(0, 22, 60, 0.0229458);
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E6E7EC;
|
||||
color: #01A0AC;
|
||||
line-height: normal;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#main-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -236,6 +236,14 @@
|
||||
{{ $t('reviewAndReturn') }}
|
||||
</div>
|
||||
|
||||
<!-- 补充提交-->
|
||||
<div @click="supplementarySubmissionClick()"
|
||||
v-if="roleSwitchingCode == 20 || roleSwitchingCode == 21"
|
||||
class="operator-text">
|
||||
<a-icon type="rollback"/>
|
||||
{{ $t('supplementarySubmission') }}
|
||||
</div>
|
||||
|
||||
<!-- 任务接受-->
|
||||
<div @click="missionAcceptedClick('zrrjsrw',$t('confirmToAcceptTheTask'))"
|
||||
v-if="roleSwitchingCode == 20 || roleSwitchingCode == 21"
|
||||
@@ -561,9 +569,9 @@
|
||||
'In progress': 'TrackedColor',
|
||||
'NA': 'notInvolvedColor',
|
||||
'Not start': 'submittedColor',
|
||||
'25181c5a4c044001b4beca539c77a5c8': 'accordColor',
|
||||
'0a384b5475554ae8886b950730a3bff7': 'accordColor',
|
||||
'7cba3c71fd24421eade54c685e3b4444': 'TrackedColor'
|
||||
'Component report submitted': 'componentColor',
|
||||
'Component report has been stored': 'accordColor',
|
||||
'Component report not submitted': 'TrackedColor'
|
||||
},
|
||||
fieldList: [
|
||||
{
|
||||
@@ -608,7 +616,7 @@
|
||||
type: 'date',
|
||||
value: 'endTime',
|
||||
text: this.$t('closingDate')
|
||||
},
|
||||
}
|
||||
],
|
||||
disabled: false,
|
||||
queryParamQuery: {},
|
||||
@@ -827,6 +835,10 @@
|
||||
this.long = localStorage.getItem('language') || 'zh-cn'
|
||||
this.loading = true
|
||||
this.userInfoQuery = this.userInfo()
|
||||
if (this.areaOfResponsibility && this.areaOfResponsibility.dutyTerritory) {
|
||||
this.queryParam.dutyTerritory = this.areaOfResponsibility.dutyTerritory
|
||||
this.queryParam = { ...this.queryParam }
|
||||
}
|
||||
this.getProcessStatus()
|
||||
this.getDeliverableTree()
|
||||
this.querydreId()
|
||||
@@ -2164,6 +2176,62 @@
|
||||
}
|
||||
})
|
||||
window.open(newUrl.href, '_blank')
|
||||
},
|
||||
supplementarySubmissionClick() {
|
||||
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
|
||||
let ids = []
|
||||
let notConditions = []
|
||||
let _this = this
|
||||
for (let i = 0; i < this.selectedRowKeysList.length; i++) {
|
||||
if (this.selectedRowKeysList[i].flowStatus == 'Review and pass') {
|
||||
if (this.roleSwitchingCode == 20 && this.selectedRowKeysList[i].dutyPersonName == this.userInfo().username) {
|
||||
ids.push(this.selectedRowKeysList[i].id)
|
||||
} else if (this.roleSwitchingCode == 21) {
|
||||
ids.push(this.selectedRowKeysList[i].id)
|
||||
} else {
|
||||
notConditions.push(this.selectedRowKeysList[i].inspectionItem)
|
||||
}
|
||||
} else {
|
||||
notConditions.push(this.selectedRowKeysList[i].inspectionItem)
|
||||
}
|
||||
}
|
||||
let data = ''
|
||||
if (notConditions && notConditions.length > 0) {
|
||||
if (this.roleSwitchingCode == 20) {
|
||||
data = this.$t('inspectionItems') + '"' + notConditions.join('、') + '"' + this.$t('conditionsNotMet') + ',' + this.$t('onlyProcessStatusOfApprovedCanBeSelected') + this.$t('andTheOperatorCurrentData')
|
||||
} else {
|
||||
data = this.$t('inspectionItems') + '"' + notConditions.join('、') + '"' + this.$t('conditionsNotMet') + ',' + this.$t('onlyProcessStatusOfApprovedCanBeSelected')
|
||||
}
|
||||
}
|
||||
if (ids && ids.length > 0) {
|
||||
this.$confirm({
|
||||
content: _this.$t('confirmSupplementarySubmission'),
|
||||
onOk() {
|
||||
let query = {
|
||||
ids: ids.join(','),
|
||||
'flowStatus': 'Results to be submitted'
|
||||
}
|
||||
postAction('/project/projectCertificationInventoryEO/updateStatusBatch', query).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success(_this.$t('OperationSuccessful'))
|
||||
_this.getList()
|
||||
_this.selectedRowKeys = []
|
||||
_this.selectedRowKeysList = []
|
||||
if (notConditions && notConditions.length > 0) {
|
||||
_this.failedMessage(data)
|
||||
}
|
||||
} else {
|
||||
_this.$message.warning(_this.$t('operationFailed'))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.failedMessage(data)
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(this.$t('selectLeastOne'))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2493,7 +2561,10 @@
|
||||
background: #dbf6e2;
|
||||
color: #26BD4B;
|
||||
}
|
||||
|
||||
.componentColor{
|
||||
background: #EDFCEF;
|
||||
color: #6FD682;
|
||||
}
|
||||
.nonConformityColor {
|
||||
background: #f3dddd;
|
||||
color: #E83030;
|
||||
|
||||
@@ -1,248 +0,0 @@
|
||||
<template>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div id="main-left"></div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div id="main-right">
|
||||
<a-table
|
||||
ref="table"
|
||||
:components="drag(columns,'columns')"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:scroll="{x: true}"
|
||||
:data-source="dataSource"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
{{$t('totalTable')}}:{{certificationProgressTotal}}
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
<responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||||
import responsibilityList from './responsibilityList'
|
||||
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
|
||||
|
||||
export default {
|
||||
name: 'certificationProgress',
|
||||
components: {
|
||||
responsibilityList
|
||||
},
|
||||
props: {
|
||||
idList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
mixins:[ResizeHeader, ResizeColumnProvide],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
certificationProgressTotal: 0,
|
||||
url: {
|
||||
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('notInvolved'),
|
||||
align: 'left',
|
||||
dataIndex: 'notInvolved',
|
||||
width: 102
|
||||
},
|
||||
{
|
||||
title: this.$t('toBeStarted'),
|
||||
align: 'left',
|
||||
dataIndex: 'toBeStarted',
|
||||
width: 102
|
||||
},
|
||||
{
|
||||
title: this.$t('inProgress'),
|
||||
align: 'left',
|
||||
dataIndex: 'inProgress',
|
||||
width: 102
|
||||
},
|
||||
{
|
||||
title: this.$t('experimentFailed'),
|
||||
align: 'left',
|
||||
dataIndex: 'experimentFailed',
|
||||
width: 122
|
||||
},
|
||||
{
|
||||
title: this.$t('experimentPassed'),
|
||||
align: 'left',
|
||||
dataIndex: 'experimentPassed',
|
||||
width: 122
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mainLeftEcharts()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
responsibility(item) {
|
||||
this.$emit('currentStatus', item)
|
||||
},
|
||||
getData() {
|
||||
let id = ''
|
||||
if (this.idList && this.idList.length > 0) {
|
||||
id = this.idList.join(',')
|
||||
} else {
|
||||
id = this.$route.query.id
|
||||
}
|
||||
getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result) {
|
||||
let certificationProgressMap = res.result.certificationProgressMap ? res.result.certificationProgressMap.certificationProgressMapList : []
|
||||
this.certificationProgressTotal = res.result.certificationProgressMap ? res.result.certificationProgressMap.certificationProgressTotal : 0
|
||||
this.dataEcharts(certificationProgressMap)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
dataEcharts(val) {
|
||||
let data = []
|
||||
let color = []
|
||||
this.dataSource = []
|
||||
if (val && val.length > 0) {
|
||||
this.dataSource = [{}]
|
||||
val.forEach(res => {
|
||||
if (res.certificationProgress == 'NA') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('notInvolved'),
|
||||
status: res.certificationProgress
|
||||
})
|
||||
color.push('#707486')
|
||||
this.dataSource[0].notInvolved = res.certificationProgressCount
|
||||
} else if (res.certificationProgress == 'Not start') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('toBeStarted'),
|
||||
status: res.certificationProgress
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
this.dataSource[0].toBeStarted = res.certificationProgressCount
|
||||
} else if (res.certificationProgress == 'In progress') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('inProgress'),
|
||||
status: res.certificationProgress
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
this.dataSource[0].inProgress = res.certificationProgressCount
|
||||
} else if (res.certificationProgress == 'Test failed') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('experimentFailed'),
|
||||
status: res.certificationProgress
|
||||
})
|
||||
color.push('#E83030')
|
||||
this.dataSource[0].experimentFailed = res.certificationProgressCount
|
||||
} else if (res.certificationProgress == 'Test passed') {
|
||||
data.push({
|
||||
value: res.certificationProgressCount,
|
||||
name: this.$t('experimentPassed'),
|
||||
status: res.certificationProgress
|
||||
})
|
||||
color.push('#26BD4B')
|
||||
this.dataSource[0].experimentPassed = res.certificationProgressCount
|
||||
}
|
||||
})
|
||||
}
|
||||
this.mainLeftEcharts(data, color)
|
||||
},
|
||||
getEcharts(chart, title, color, data) {
|
||||
var myChart = echarts.init(document.getElementById(chart))
|
||||
myChart.setOption({
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
itemGap: 30,
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: title,
|
||||
type: 'pie',
|
||||
radius: ['40%', '54%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: color,
|
||||
data: data
|
||||
}
|
||||
]
|
||||
})
|
||||
myChart.on('click', (params) => {
|
||||
let query = {
|
||||
title: params.seriesName,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryCertificationProgressStatistics',
|
||||
certificationProgress: params.data.status
|
||||
}
|
||||
this.$refs.responsibilityListRef.getData(query)
|
||||
})
|
||||
},
|
||||
mainLeftEcharts(data, color) {
|
||||
this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.box-content-left {
|
||||
width: calc(50% - 12px);
|
||||
height: 398px;
|
||||
border: 2px #eff1f3 solid;
|
||||
|
||||
#main-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-right {
|
||||
width: calc(50% - 12px);
|
||||
height: 398px;
|
||||
border: 2px #eff1f3 solid;
|
||||
|
||||
#main-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="box-top-content-right">
|
||||
<div class="box-top-content-right-bottom">
|
||||
<div class="process-content" v-if="timeData && timeData.length > 0">
|
||||
<div class="process-content-right-xian"></div>
|
||||
<div class="process-content-right-xian-color"></div>
|
||||
<div class="process-content-right-xian-one"></div>
|
||||
<div class="process-content-content" :style="val.left"
|
||||
v-for="(val,indexOne) in timeData" :key="indexOne" v-if="val.g">
|
||||
<div class="process-content-right-top" :title="val.name">{{ val.name }}</div>
|
||||
<!-- <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{ val.name }}-->
|
||||
<!-- </div>-->
|
||||
<a-tooltip placement="topLeft" overlayClassName="tooltipColor">
|
||||
<template slot="title">
|
||||
<span>{{ val.time.slice(0, 11) }}</span>
|
||||
</template>
|
||||
<img v-if="val.status == 1" src="../../../assets/heiTop.png" class="process-content-left"
|
||||
alt="">
|
||||
<img v-else-if="val.status == 2" src="../../../assets/kongTop.png"
|
||||
class="process-content-left"
|
||||
alt="">
|
||||
<img v-else-if="val.status == 3" src="../../../assets/shiTop.png" class="process-content-left"
|
||||
alt="">
|
||||
</a-tooltip>
|
||||
|
||||
<!-- <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
|
||||
</div>
|
||||
<div class="process-content-contentOne" :style="val.left"
|
||||
v-for="(val,indexTwo) in timeData" v-if="!val.g">
|
||||
<!-- <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{ val.name }}</div>-->
|
||||
<div class="process-content-right-button" :title="val.name">{{ val.name }}
|
||||
</div>
|
||||
<a-tooltip placement="topLeft" overlayClassName="tooltipColor">
|
||||
<template slot="title">
|
||||
<span>{{ val.time.slice(0, 11) }}</span>
|
||||
</template>
|
||||
<img v-if="val.status == 1" src="../../../assets/huiBottom.png" class="process-content-left"
|
||||
alt="">
|
||||
<img v-else-if="val.status == 2" src="../../../assets/kongBottom.png"
|
||||
class="process-content-left"
|
||||
alt="">
|
||||
<img v-else-if="val.status == 3" src="../../../assets/shiBottom.png" class="process-content-left"
|
||||
alt="">
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'complianceCertificationForm',
|
||||
data() {
|
||||
return {
|
||||
regulatoryCertificationTaskPlanList: [],
|
||||
timeData: [],
|
||||
url: {
|
||||
queryByProjectId: 'project/projectTaskPlanning/queryByProjectId'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSetting()
|
||||
},
|
||||
methods: {
|
||||
//传入 YYYY-MM , YYYY-MM (2020-09) (2020-12) 返回 YYYY-MM 数组
|
||||
getYearAndMonth(start, end) {
|
||||
let result = [];
|
||||
let starts = start.split('-');
|
||||
let ends = end.split('-');
|
||||
let staYear = parseInt(starts[0]);
|
||||
let staMon = parseInt(starts[1]);
|
||||
let endYear = parseInt(ends[0]);
|
||||
let endMon = parseInt(ends[1]);
|
||||
while (staYear <= endYear) {
|
||||
if (staYear === endYear) {
|
||||
while (staMon < endMon) {
|
||||
staMon++;
|
||||
var str = staYear + '-'+(staMon >= 10 ? staMon : '0' + staMon);
|
||||
result.push(str);
|
||||
}
|
||||
staYear++;
|
||||
} else {
|
||||
staMon++;
|
||||
if (staMon > 12) {
|
||||
staMon = 1;
|
||||
staYear++;
|
||||
}
|
||||
let str = staYear + '-'+(staMon >= 10 ? staMon : '0' + staMon);
|
||||
result.push(str);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
getSetting() {
|
||||
getAction(this.url.queryByProjectId, { projectId: this.$route.query.id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.timeData = res.result || []
|
||||
let startTime = ''
|
||||
let endTime = ''
|
||||
if (this.timeData.length > 0) {
|
||||
startTime = this.timeData[0].time.slice(0, 7)
|
||||
endTime = this.timeData[this.timeData.length - 1].time.slice(0, 7)
|
||||
let monDiff = this.getYearAndMonth(startTime, endTime)
|
||||
monDiff.unshift(startTime)
|
||||
setTimeout(() => {
|
||||
let dataList = document.getElementsByClassName('box-top-content-right-bottom')
|
||||
let clientWidth = dataList[0].clientWidth
|
||||
clientWidth = clientWidth / monDiff.length
|
||||
for (let i = 0; i < monDiff.length; i++) {
|
||||
for (let j = 0; j < this.timeData.length; j++) {
|
||||
let num = (Math.floor(clientWidth / 30 * 10000)/10000) * parseInt(this.timeData[j].time.slice(8, 10))
|
||||
if (this.timeData[j].time.slice(0, 7) == monDiff[i]) {
|
||||
this.timeData[j].left = 'left:' + ((clientWidth * i + num) - 10) + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(this.timeData)
|
||||
this.timeData = [...this.timeData]
|
||||
}, 500)
|
||||
}
|
||||
} else {
|
||||
this.regulatoryCertificationTaskPlanList = []
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
.box-top-content-right {
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-top-content-right-bottom {
|
||||
position: relative;
|
||||
/*padding-top: 50px;*/
|
||||
}
|
||||
|
||||
.process-content {
|
||||
position: relative;
|
||||
height: 110px;
|
||||
/*overflow:hidden;*/
|
||||
|
||||
.process-content-content {
|
||||
background: transparent;
|
||||
z-index: 98;
|
||||
/*padding: 0 6px;*/
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
margin-top: 37px;
|
||||
|
||||
.process-content-left {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
/*margin-top: 5px;*/
|
||||
}
|
||||
|
||||
.process-content-right-top {
|
||||
font-size: 12px;
|
||||
color: #040B29;
|
||||
width: 83px;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
/*! autoprefixer: on;*/
|
||||
text-justify: inter-ideograph;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.process-content-right-button {
|
||||
width: 83px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #6F7385;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 36px;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
/*! autoprefixer: on;*/
|
||||
text-justify: inter-ideograph;
|
||||
word-break: break-all
|
||||
}
|
||||
}
|
||||
|
||||
.process-content-contentOne {
|
||||
background: transparent;
|
||||
z-index: 98;
|
||||
/*padding: 0 6px;*/
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
margin-top: 63px;
|
||||
|
||||
.process-content-left {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
/*margin-top: 5px;*/
|
||||
}
|
||||
|
||||
.process-content-right-top {
|
||||
font-size: 12px;
|
||||
color: #040B29;
|
||||
width: 83px;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
/*! autoprefixer: on;*/
|
||||
text-justify: inter-ideograph;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.process-content-right-button {
|
||||
width: 83px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #6F7385;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 36px;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
/*! autoprefixer: on;*/
|
||||
text-justify: inter-ideograph;
|
||||
word-break: break-all
|
||||
}
|
||||
}
|
||||
|
||||
.process-content-right-xian {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #00B3BE;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.process-content-right-xian-color {
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
background: linear-gradient(90deg, rgba(0, 179, 190, 0.12) 0%, rgba(4, 11, 41, 0.02) 100%);
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
|
||||
.process-content-right-xian-one {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #00B3BE;
|
||||
position: absolute;
|
||||
top: 74px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,249 +0,0 @@
|
||||
<template>
|
||||
<div class="box-content">
|
||||
<div class="headerText"
|
||||
:title="this.$t('redSchedule') + this.$t('yellowSchedule')+this.$t('greenRequirements')+this.$t('blueUndeterminedState')">
|
||||
{{this.$t('redSchedule')}};
|
||||
{{this.$t('yellowSchedule')}};
|
||||
{{this.$t('greenRequirements')}};
|
||||
{{this.$t('blueUndeterminedState')}};
|
||||
</div>
|
||||
<div class="box-content-left">
|
||||
<div id="main-left"></div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div id="main-right">
|
||||
<a-table
|
||||
ref="table"
|
||||
:components="drag(columns,'columns')"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:scroll="{x: true}"
|
||||
:data-source="dataSource"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
{{$t('totalTable')}}:{{currentProjectStatusTotal}}
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
<responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||||
import responsibilityList from './responsibilityList'
|
||||
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
|
||||
|
||||
export default {
|
||||
name: 'CurrentStatusOfTheProjectEcharts',
|
||||
components: {
|
||||
responsibilityList
|
||||
},
|
||||
props: {
|
||||
idList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
mixins:[ResizeHeader, ResizeColumnProvide],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
currentProjectStatusTotal: 0,
|
||||
url: {
|
||||
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('red'),
|
||||
align: 'left',
|
||||
dataIndex: 'redCount',
|
||||
width: 139
|
||||
},
|
||||
{
|
||||
title: this.$t('yellow'),
|
||||
align: 'left',
|
||||
dataIndex: 'yellowCount',
|
||||
width: 139
|
||||
},
|
||||
{
|
||||
title: this.$t('green'),
|
||||
align: 'left',
|
||||
dataIndex: 'greenCount',
|
||||
width: 139
|
||||
},
|
||||
{
|
||||
title: this.$t('blue'),
|
||||
align: 'left',
|
||||
dataIndex: 'blueCount',
|
||||
width: 139
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let id = ''
|
||||
if (this.idList && this.idList.length > 0) {
|
||||
id = this.idList.join(',')
|
||||
} else {
|
||||
id = this.$route.query.id
|
||||
}
|
||||
getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result) {
|
||||
let dataSource = res.result.currentProjectStatusMap ? res.result.currentProjectStatusMap.currentProjectStatusMapList : []
|
||||
this.mainLeftEcharts(dataSource)
|
||||
this.currentProjectStatusTotal = res.result.currentProjectStatusMap ? res.result.currentProjectStatusMap.currentProjectStatusTotal : 0
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getEcharts(chart, title, color, data) {
|
||||
var myChart = echarts.init(document.getElementById(chart))
|
||||
myChart.setOption({
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
itemGap: 30,
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: title,
|
||||
type: 'pie',
|
||||
radius: ['40%', '54%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: color,
|
||||
data: data
|
||||
}
|
||||
]
|
||||
})
|
||||
myChart.on('click', (params) => {
|
||||
let query = {
|
||||
title: params.seriesName,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryCurrentProjectStatusStatistics',
|
||||
conditionAssessment: params.data.color
|
||||
}
|
||||
this.$refs.responsibilityListRef.getData(query)
|
||||
})
|
||||
},
|
||||
mainLeftEcharts(dataSource) {
|
||||
let data = []
|
||||
let color = []
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
this.dataSource = [{}]
|
||||
dataSource.forEach(res => {
|
||||
if (res.color == '4') {
|
||||
data.push({
|
||||
value: res.conditionAssessmentCount,
|
||||
name: this.$t('blue'),
|
||||
color: res.color
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
this.dataSource[0].blueCount = res.conditionAssessmentCount
|
||||
} else if (res.color == '1') {
|
||||
data.push({
|
||||
value: res.conditionAssessmentCount,
|
||||
name: this.$t('red'),
|
||||
color: res.color
|
||||
})
|
||||
color.push('#E83030')
|
||||
this.dataSource[0].redCount = res.conditionAssessmentCount
|
||||
} else if (res.color == '2') {
|
||||
data.push({
|
||||
value: res.conditionAssessmentCount,
|
||||
name: this.$t('yellow'),
|
||||
color: res.color
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
this.dataSource[0].yellowCount = res.conditionAssessmentCount
|
||||
} else if (res.color == '3') {
|
||||
data.push({
|
||||
value: res.conditionAssessmentCount,
|
||||
name: this.$t('green'),
|
||||
color: res.color
|
||||
})
|
||||
this.dataSource[0].greenCount = res.conditionAssessmentCount
|
||||
color.push('#26BD4B')
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-left', this.$t('CurrentStatusOfTheProject'), color, data)
|
||||
},
|
||||
responsibility(item) {
|
||||
this.$emit('currentStatus', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.box-content-left {
|
||||
width: calc(50% - 12px);
|
||||
margin-top: 30px;
|
||||
height: 398px;
|
||||
border: 2px #eff1f3 solid;
|
||||
|
||||
#main-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-right {
|
||||
width: calc(50% - 12px);
|
||||
margin-top: 30px;
|
||||
height: 398px;
|
||||
border: 2px #eff1f3 solid;
|
||||
|
||||
#main-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headerText {
|
||||
margin-left: 30px;
|
||||
color: #040B29;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -1,325 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div id="main-left"></div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div id="main-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div id="main-left-content"></div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div id="main-right-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div id="main-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||||
import responsibilityList from './responsibilityList'
|
||||
|
||||
export default {
|
||||
name: 'DeliverableStatusEchart',
|
||||
components: {
|
||||
responsibilityList
|
||||
},
|
||||
props: {
|
||||
idList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: {
|
||||
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mainLeftContentEcharts()
|
||||
this.mainRightEcharts()
|
||||
this.mainRightContentEcharts()
|
||||
this.mainBottomEcharts()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let id = ''
|
||||
if (this.idList && this.idList.length > 0) {
|
||||
id = this.idList.join(',')
|
||||
} else {
|
||||
id = this.$route.query.id
|
||||
}
|
||||
getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result) {
|
||||
let listingToConfirmMap = res.result.listingToConfirmMap ? res.result.listingToConfirmMap.listingToConfirmMapList : []
|
||||
let taskToConfirmMap = res.result.taskToConfirmMap ? res.result.taskToConfirmMap.taskToConfirmMapList : []
|
||||
let designComplianceMap = res.result.designComplianceMap ? res.result.designComplianceMap.designComplianceMapList : []
|
||||
let prehomoMap = res.result.prehomoMap ? res.result.prehomoMap.prehomoMapList : []
|
||||
let verifyComplianceMap = res.result.verifyComplianceMap ? res.result.verifyComplianceMap.verifyComplianceMapList : []
|
||||
this.dataEcharts(listingToConfirmMap, 1)
|
||||
this.dataEcharts(taskToConfirmMap, 2)
|
||||
this.dataEchartsOne(designComplianceMap, 1)
|
||||
this.dataEchartsOne(prehomoMap, 2)
|
||||
this.dataEchartsOne(verifyComplianceMap, 3)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
dataEcharts(val, num) {
|
||||
let data = []
|
||||
let color = []
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((res) => {
|
||||
if (res.inventoryAffirmStatus == 'Not started' || res.taskAffirmStatus == 'Not started') {
|
||||
data.push({
|
||||
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
|
||||
name: this.$t('notLaunch'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
color.push('#707486')
|
||||
} else if (res.inventoryAffirmStatus == 'List to confirm' || res.taskAffirmStatus == 'List to confirm') {
|
||||
data.push({
|
||||
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
|
||||
name: this.$t('toBeConfirmed'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
|
||||
data.push({
|
||||
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
|
||||
name: this.$t('accept'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
color.push('#26BD4B')
|
||||
} else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
|
||||
data.push({
|
||||
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
|
||||
name: this.$t('refuse'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
color.push('#E83030')
|
||||
}
|
||||
})
|
||||
}
|
||||
if (num == 1) {
|
||||
this.mainLeftEcharts(data, color)
|
||||
} else {
|
||||
this.mainRightEcharts(data, color)
|
||||
}
|
||||
},
|
||||
dataEchartsOne(val, num) {
|
||||
let data = []
|
||||
let color = []
|
||||
if (val && val.length > 0) {
|
||||
val.forEach((res) => {
|
||||
if (res.designFlowTaskStatus == 'No rating' || res.prehomoFlowTaskStatus == 'No rating' || res.verifyFlowTaskStatus == 'No rating') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('toBeConfirmed'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.designFlowTaskStatus == 'Compliance' || res.prehomoFlowTaskStatus == 'Compliance' || res.verifyFlowTaskStatus == 'Compliance') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('accord'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#26BD4B')
|
||||
} else if (res.designFlowTaskStatus == 'Non-Compliance' || res.prehomoFlowTaskStatus == 'Non-Compliance' || res.verifyFlowTaskStatus == 'Non-Compliance') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('nonConformity'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#E83030')
|
||||
} else if (res.designFlowTaskStatus == 'To be tracked' || res.prehomoFlowTaskStatus == 'To be tracked' || res.verifyFlowTaskStatus == 'To be tracked') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('Tracked'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
} else if (res.designFlowTaskStatus == 'NA' || res.prehomoFlowTaskStatus == 'NA' || res.verifyFlowTaskStatus == 'NA') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('notInvolved'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#707486')
|
||||
} else if (res.designFlowTaskStatus == 'Termination of task' || res.prehomoFlowTaskStatus == 'Termination of task' || res.verifyFlowTaskStatus == 'Termination of task') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('taskTermination'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#E83030')
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
if (num == 1) {
|
||||
this.mainLeftContentEcharts(data, color)
|
||||
} else if (num == 2) {
|
||||
this.mainRightContentEcharts(data, color)
|
||||
} else if (num == 3) {
|
||||
this.mainBottomEcharts(data, color)
|
||||
}
|
||||
},
|
||||
getEcharts(chart, title, color, data, num) {
|
||||
var myChart = echarts.init(document.getElementById(chart))
|
||||
myChart.setOption({
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
itemGap: 30,
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: title,
|
||||
type: 'pie',
|
||||
radius: ['40%', '54%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: color,
|
||||
data: data
|
||||
}
|
||||
]
|
||||
})
|
||||
myChart.on('click', (params) => {
|
||||
let query = {
|
||||
title: params.seriesName,
|
||||
projectLibraryId: this.$route.query.id
|
||||
}
|
||||
if (num === 1) {
|
||||
query.operatorType = 'queryListingToConfirmStatistics'
|
||||
query.inventoryAffirmStatus = params.data.status
|
||||
} else if (num === 2) {
|
||||
query.operatorType = 'queryTaskToConfirmStatistics'
|
||||
query.taskAffirmStatus = params.data.status
|
||||
} else if (num === 3) {
|
||||
query.operatorType = 'queryDesignStatistics'
|
||||
query.designFlowTaskStatus = params.data.status
|
||||
} else if (num === 4) {
|
||||
query.operatorType = 'queryPrehomoStatistics'
|
||||
query.prehomoFlowTaskStatus = params.data.status
|
||||
} else if (num === 5) {
|
||||
query.operatorType = 'queryVerifyStatistics'
|
||||
query.verifyFlowTaskStatus = params.data.status
|
||||
}
|
||||
this.$refs.responsibilityListRef.getData(query)
|
||||
})
|
||||
}
|
||||
,
|
||||
mainLeftEcharts(data, color) {
|
||||
this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data, 1)
|
||||
}
|
||||
,
|
||||
mainRightEcharts(data, color) {
|
||||
this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data, 2)
|
||||
}
|
||||
,
|
||||
mainLeftContentEcharts(data, color) {
|
||||
this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data, 3)
|
||||
}
|
||||
,
|
||||
mainRightContentEcharts(data, color) {
|
||||
this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data, 4)
|
||||
}
|
||||
,
|
||||
mainBottomEcharts(data, color) {
|
||||
this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data, 5)
|
||||
},
|
||||
responsibility(item) {
|
||||
this.$emit('currentStatus', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.box-content-left {
|
||||
width: calc(50% - 12px);
|
||||
height: 398px;
|
||||
border: 2px #eff1f3 solid;
|
||||
|
||||
#main-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main-left-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-right {
|
||||
width: calc(50% - 12px);
|
||||
height: 398px;
|
||||
border: 2px #eff1f3 solid;
|
||||
|
||||
#main-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main-right-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,8 +8,8 @@
|
||||
<div class="title-text" :title="$t('standard')">
|
||||
<span>{{$t('standard')}}</span>
|
||||
</div>
|
||||
<j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standard')"
|
||||
v-model="queryParam.serialNumber"></j-input>
|
||||
<a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standard')"
|
||||
v-model="queryParam.serialNumber"></a-input>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
@@ -17,8 +17,8 @@
|
||||
<div class="title-text" :title="$t('title')">
|
||||
<span>{{$t('title')}}</span>
|
||||
</div>
|
||||
<j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
|
||||
v-model="queryParam.title"></j-input>
|
||||
<a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
|
||||
v-model="queryParam.title"></a-input>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
@@ -61,8 +61,8 @@
|
||||
:data-source="dataSource"
|
||||
:columns="columns"
|
||||
>
|
||||
<span slot="ProcessType" slot-scope="text,result">
|
||||
<a @click="standardClick(result)" class="textName" :title="text">
|
||||
<span slot="problemType" slot-scope="text,result">
|
||||
<a @click="problemTypeClick(result)" class="textName" :title="text">
|
||||
{{text}}
|
||||
</a>
|
||||
</span>
|
||||
@@ -73,29 +73,34 @@
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="page" v-if="dataSource.length > 0">
|
||||
<a-pagination
|
||||
:show-total="total => $t('total')+` ${total} `+$t('strip')"
|
||||
show-quick-jumper
|
||||
show-size-changer
|
||||
:page-size.sync="pageSize"
|
||||
:total="total"
|
||||
:current="pageNo"
|
||||
@change="pageOnChange"
|
||||
@showSizeChange="SizeChange"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="page" v-if="dataSource.length > 0">-->
|
||||
<!-- <a-pagination-->
|
||||
<!-- :show-total="total => $t('total')+` ${total} `+$t('strip')"-->
|
||||
<!-- show-quick-jumper-->
|
||||
<!-- show-size-changer-->
|
||||
<!-- :page-size.sync="pageSize"-->
|
||||
<!-- :total="total"-->
|
||||
<!-- :current="pageNo"-->
|
||||
<!-- @change="pageOnChange"-->
|
||||
<!-- @showSizeChange="SizeChange"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<designCompliance ref="designComplianceRef"/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, downloadFile, deleteAction,downloadFilePost } from '@/api/manage'
|
||||
import designCompliance from '../../toDoCenter/projectRegulationTasks/components/designCompliance'
|
||||
import store from '@/store/'
|
||||
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
|
||||
|
||||
export default {
|
||||
name: 'nonConformance',
|
||||
mixins:[ResizeHeader, ResizeColumnProvide],
|
||||
components:{
|
||||
designCompliance
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParam: {},
|
||||
@@ -124,8 +129,7 @@
|
||||
{
|
||||
title: this.$t('ProcessType'),
|
||||
align: 'left',
|
||||
dataIndex: 'flowType',
|
||||
scopedSlots: { customRender: 'ProcessType' },
|
||||
dataIndex: 'flowTypeName',
|
||||
ellipsis: true,
|
||||
sorter:true,
|
||||
width: 150
|
||||
@@ -133,7 +137,7 @@
|
||||
{
|
||||
title: this.$t('areaOfResponsibility'),
|
||||
align: 'left',
|
||||
dataIndex: 'dutyTerritory',
|
||||
dataIndex: 'dutyTerritory_dictText',
|
||||
ellipsis: true,
|
||||
sorter:true,
|
||||
width: 100
|
||||
@@ -141,15 +145,16 @@
|
||||
{
|
||||
title: this.$t('problemType'),
|
||||
align: 'left',
|
||||
dataIndex: 'problemType',
|
||||
dataIndex: 'flowStatusName',
|
||||
ellipsis: true,
|
||||
sorter:true,
|
||||
width: 150
|
||||
width: 150,
|
||||
scopedSlots: { customRender: 'problemType' },
|
||||
},
|
||||
{
|
||||
title: this.$t('Sponsor'),
|
||||
align: 'left',
|
||||
dataIndex: 'initiator',
|
||||
dataIndex: 'regulationOwnerIdName',
|
||||
ellipsis: true,
|
||||
sorter:true,
|
||||
width: 100
|
||||
@@ -157,7 +162,7 @@
|
||||
{
|
||||
title: this.$t('personLiable'),
|
||||
align: 'left',
|
||||
dataIndex: 'duty',
|
||||
dataIndex: 'dutyIdName',
|
||||
ellipsis: true,
|
||||
sorter:true,
|
||||
width: 100
|
||||
@@ -167,8 +172,8 @@
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
url: {
|
||||
page: '/project/ncrTrackController/queryPageInfo',
|
||||
exportData: '/project/ncrTrackController/exportDataInfo'
|
||||
page: '/project/projectLawsInventoryEO/queryNotComplianList',
|
||||
exportData: '/project/projectLawsInventoryEO/exportNotComplianList'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -231,19 +236,34 @@
|
||||
let query = {
|
||||
...this.queryParam,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
ncrTrackVOList: this.content
|
||||
// ncrTrackVOList: this.content
|
||||
}
|
||||
downloadFilePost(this.url.exportData, this.$t('NonConformance') + '.xls', query, this.Deselect)
|
||||
downloadFile(this.url.exportData, this.$t('NonConformance') + '.xls', query, this.Deselect)
|
||||
},
|
||||
tableOnChange(pagination, filters, sorter) {
|
||||
this.orderBy = sorter.order == 'ascend' ? '1' : '2'
|
||||
this.orderByField = sorter.columnKey
|
||||
if (sorter.columnKey == 'serialNumber'){
|
||||
this.orderByField = 'serial_number'
|
||||
}else if(sorter.columnKey == 'flowTypeName'){
|
||||
this.orderByField = 'flow_type'
|
||||
}else if(sorter.columnKey == 'dutyTerritory_dictText'){
|
||||
this.orderByField = 'duty_territory'
|
||||
}else if(sorter.columnKey == 'flowStatusName'){
|
||||
this.orderByField = 'flow_status'
|
||||
}else if(sorter.columnKey == 'regulationOwnerIdName'){
|
||||
this.orderByField = 'regulation_owner_id'
|
||||
}else if(sorter.columnKey == 'dutyIdName'){
|
||||
this.orderByField = 'duty_id'
|
||||
}else{
|
||||
this.orderByField = sorter.columnKey
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
let query = {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
// pageNo: this.pageNo,
|
||||
// pageSize: this.pageSize,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
orderBy: this.orderBy,
|
||||
orderByField: this.orderByField,
|
||||
@@ -252,8 +272,8 @@
|
||||
this.loading = true
|
||||
getAction(this.url.page, query).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records || []
|
||||
this.total = res.result.total
|
||||
this.dataSource = res.result || []
|
||||
// this.total = res.result.total
|
||||
this.loading = false
|
||||
} else {
|
||||
this.dataSource = []
|
||||
@@ -270,55 +290,64 @@
|
||||
})
|
||||
window.open(newUrl.href, '_blank')
|
||||
},
|
||||
standardClick(val) {
|
||||
let num = val.prcType
|
||||
let query = {
|
||||
taskIds: val.taskId,
|
||||
projectTaskInventoryId: val.projectLawsInventoryId,
|
||||
projectLibraryId: val.projectLibraryId,
|
||||
projectName: val.projectName,
|
||||
id: val.projectLibraryId,
|
||||
serialNumber: val.serialNumber,
|
||||
actiProcInstId: val.prcId,
|
||||
primaryKeyId: val.projectTaskInventoryDetailId,
|
||||
TaskKey: val.taskDefinitionKey,
|
||||
isDisplay: val.status == 'NotDone' ? true : false
|
||||
problemTypeClick(row, name){
|
||||
let query = {}
|
||||
let TaskKey = ''
|
||||
if (row.flowType == '2') {
|
||||
if (row.flowStatus == 'Task to be confirmed' || row.flowStatus == 'Duty Person Rejected') {
|
||||
TaskKey = 'zrrqr'
|
||||
} else if (row.flowStatus == 'Results to be submitted') {
|
||||
TaskKey = 'zrrtjjfw'
|
||||
} else if (row.flowStatus == 'Results to be reviewed' ||
|
||||
row.flowStatus == 'Compliance' ||
|
||||
row.flowStatus == 'Non-Compliance' ||
|
||||
row.flowStatus == 'To be tracked' ||
|
||||
row.flowStatus == 'NA') {
|
||||
TaskKey = 'fggcssh'
|
||||
}
|
||||
query = {
|
||||
actiProcInstId: row.actiProcInstId,
|
||||
projectTaskInventoryId: row.id,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
TaskKey: TaskKey,
|
||||
isDisplay: false,
|
||||
flowType: row.flowType,
|
||||
Sponsor: 'regulationOwnerName',
|
||||
personLiable: 'designDutyIdName',
|
||||
typeOfDeliverables: 'designDeliverableTypeName',
|
||||
deliverableTemplate: 'designDeliverableTemplate',
|
||||
DueDate: 'designDueDate',
|
||||
remarks: 'designRemark',
|
||||
}
|
||||
} else if(row.flowType == '4'){
|
||||
if (row.flowStatus == 'Task to be confirmed' || row.flowStatus == 'Duty Person Rejected') {
|
||||
TaskKey = 'zrrqr'
|
||||
} else if (row.flowStatus == 'Results to be submitted') {
|
||||
TaskKey = 'zrrtjjfw'
|
||||
} else if (row.flowStatus == 'Results to be reviewed' ||
|
||||
row.flowStatus == 'Compliance' ||
|
||||
row.flowStatus == 'Non-Compliance' ||
|
||||
row.flowStatus == 'To be tracked' ||
|
||||
row.flowStatus == 'NA') {
|
||||
TaskKey = 'fggcssh'
|
||||
}
|
||||
query = {
|
||||
actiProcInstId: row.actiProcInstId,
|
||||
projectTaskInventoryId: row.id,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
TaskKey: TaskKey,
|
||||
flowType: row.flowType,
|
||||
isDisplay: false,
|
||||
Sponsor: 'regulationOwnerName',
|
||||
personLiable: 'verifyDutyIdName',
|
||||
typeOfDeliverables: 'verifyDeliverableTypeName',
|
||||
deliverableTemplate: 'verifyDeliverableTemplate',
|
||||
DueDate: 'verifyDueDate',
|
||||
remarks: 'verifyRemark',
|
||||
}
|
||||
}
|
||||
switch (num) {
|
||||
case '2':
|
||||
query.flowType = 2
|
||||
query.Sponsor = 'designInitiatorName'
|
||||
query.personLiable = 'designDutyName'
|
||||
query.typeOfDeliverables = 'designDeliverableTypeName'
|
||||
query.deliverableTemplate = 'designDeliverableTemplate'
|
||||
query.DueDate = 'designDueDate'
|
||||
query.remarks = 'designRemark'
|
||||
break
|
||||
case '3':
|
||||
query.flowType = 3
|
||||
query.Sponsor = 'prehomoInitiatorName'
|
||||
query.personLiable = 'prehomoDutyName'
|
||||
query.typeOfDeliverables = 'prehomoDeliverableTypeName'
|
||||
query.deliverableTemplate = 'prehomoDeliverableTemplate'
|
||||
query.DueDate = 'prehomoDueDate'
|
||||
query.remarks = 'prehomoRemark'
|
||||
break
|
||||
case '4':
|
||||
query.flowType = 4
|
||||
query.Sponsor = 'verifyInitiatorName'
|
||||
query.personLiable = 'verifyDutyName'
|
||||
query.typeOfDeliverables = 'verifyDeliverableTypeName'
|
||||
query.deliverableTemplate = 'verifyDeliverableTemplate'
|
||||
query.DueDate = 'verifyDueDate'
|
||||
query.remarks = 'verifyRemark'
|
||||
break
|
||||
}
|
||||
let newUrl = this.$router.resolve({
|
||||
path: '/taskListProcess',
|
||||
query: query
|
||||
})
|
||||
window.open(newUrl.href, '_blank')
|
||||
}
|
||||
this.$refs.designComplianceRef.getList(JSON.parse(JSON.stringify(query)), row.flowTypeName)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+133
-89
@@ -4,19 +4,29 @@
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="10">
|
||||
<a-form-item :label="$t('Collectlist')">
|
||||
<a-select v-model="queryParam.ctype" @change="getonChange" style='width: 183px' :getPopupContainer="triggerNode => triggerNode.parentNode" :popper-append-to-body="false">
|
||||
<a-select-option v-for="d in options" :key="d.value" :value="d.value" >
|
||||
<div class="box-title-text">
|
||||
<div class="title-text" :title="$t('Collectlist')">
|
||||
<span>{{ $t('Collectlist') }}</span>
|
||||
</div>
|
||||
<a-select v-model="queryParam.ctype"
|
||||
class="box-input"
|
||||
@change="getonChange"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode" :popper-append-to-body="false">
|
||||
<a-select-option v-for="d in options" :key="d.value" :value="d.value">
|
||||
<span style="display: inline-block;width: 80%" :title=" d.label">
|
||||
{{ d.label }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="14">
|
||||
<a-form-model-item :label="$t('Statisticalmodels')" prop="value" style='width: 388px' class="process-form-item">
|
||||
<a-radio-group v-model="queryParam.value" @change="onChange" style='width: 253px'>
|
||||
<a-col :md="6" :sm="10">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text" :title="$t('Statisticalmodels')">
|
||||
<span>{{ $t('Statisticalmodels') }}</span>
|
||||
</div>
|
||||
<a-radio-group class="box-input"
|
||||
v-model="queryParam.value" @change="onChange">
|
||||
<a-radio :value="1">
|
||||
{{$t('Thepercentage')}}
|
||||
</a-radio>
|
||||
@@ -24,9 +34,8 @@
|
||||
{{$t('Quantity')}}
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
@@ -44,7 +53,7 @@
|
||||
import * as echarts from 'echarts'
|
||||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||||
import responsibilityList from './responsibilityList'
|
||||
import "echarts/lib/component/dataZoom"
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
|
||||
export default {
|
||||
name: 'DeliverableStatusEchart',
|
||||
@@ -59,28 +68,28 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParam:{
|
||||
value:1,
|
||||
ctype:''
|
||||
queryParam: {
|
||||
value: 1,
|
||||
ctype: ''
|
||||
},
|
||||
options:[],
|
||||
collecting:[],
|
||||
notStart:[],
|
||||
submit:[],
|
||||
syncReport:[],
|
||||
collectingdata:[],
|
||||
notStartdata:[],
|
||||
submitdata:[],
|
||||
syncReportdata:[],
|
||||
dutyTerritory:[],
|
||||
collectingpercentage:[],
|
||||
collectingquantity:[],
|
||||
notStartpercentage:[],
|
||||
notStartquantity:[],
|
||||
submitpercentage:[],
|
||||
submitquantity:[],
|
||||
syncReportpercentage:[],
|
||||
syncReportquantity:[],
|
||||
options: [],
|
||||
collecting: [],
|
||||
notStart: [],
|
||||
submit: [],
|
||||
syncReport: [],
|
||||
collectingdata: [],
|
||||
notStartdata: [],
|
||||
submitdata: [],
|
||||
syncReportdata: [],
|
||||
dutyTerritory: [],
|
||||
collectingpercentage: [],
|
||||
collectingquantity: [],
|
||||
notStartpercentage: [],
|
||||
notStartquantity: [],
|
||||
submitpercentage: [],
|
||||
submitquantity: [],
|
||||
syncReportpercentage: [],
|
||||
syncReportquantity: [],
|
||||
url: {
|
||||
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestData'
|
||||
}
|
||||
@@ -97,18 +106,18 @@
|
||||
if (res.success) {
|
||||
if (res.result) {
|
||||
this.collecting = res.result.collecting ? res.result.collecting : []
|
||||
this.notStart = res.result.notStart ? res.result.notStart: []
|
||||
this.notStart = res.result.notStart ? res.result.notStart : []
|
||||
this.submit = res.result.submit ? res.result.submit : []
|
||||
this.syncReport = res.result.syncReport ? res.result.syncReport : []
|
||||
this.dutyTerritory = res.result.dutyTerritory ? res.result.dutyTerritory : []
|
||||
this.getEcharts()
|
||||
this.getEcharts()
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
getoptions(){
|
||||
getoptions() {
|
||||
let id = ''
|
||||
if (this.idList && this.idList.length > 0) {
|
||||
id = this.idList.join(',')
|
||||
@@ -116,7 +125,7 @@
|
||||
id = this.$route.query.parentId ? this.$route.query.parentId : this.$route.query.id
|
||||
// id = this.$route.query.id
|
||||
}
|
||||
getAction('project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestLabel', {id:id}).then((res) => {
|
||||
getAction('project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestLabel', { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.options = res.result
|
||||
this.queryParam.ctype = this.options[0].value
|
||||
@@ -125,7 +134,7 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
getonChange(value){
|
||||
getonChange(value) {
|
||||
this.collectingpercentage = []
|
||||
this.collectingquantity = []
|
||||
this.notStartpercentage = []
|
||||
@@ -136,7 +145,7 @@
|
||||
this.syncReportquantity = []
|
||||
this.getData(value)
|
||||
},
|
||||
onChange(value){
|
||||
onChange(value) {
|
||||
this.collectingpercentage = []
|
||||
this.collectingquantity = []
|
||||
this.notStartpercentage = []
|
||||
@@ -149,53 +158,53 @@
|
||||
|
||||
},
|
||||
getEcharts(chart, title, color, data, num) {
|
||||
this.collecting.forEach((item,index) => {
|
||||
this.collecting.forEach((item, index) => {
|
||||
this.collectingpercentage.push(item.percentage)
|
||||
this.collectingquantity.push(item.quantity)
|
||||
})
|
||||
this.notStart.forEach((item,index) => {
|
||||
this.notStart.forEach((item, index) => {
|
||||
this.notStartpercentage.push(item.percentage)
|
||||
this.notStartquantity.push(item.quantity)
|
||||
})
|
||||
this.submit.forEach((item,index) => {
|
||||
this.submit.forEach((item, index) => {
|
||||
this.submitpercentage.push(item.percentage)
|
||||
this.submitquantity.push(item.quantity)
|
||||
})
|
||||
this.syncReport.forEach((item,index) => {
|
||||
this.syncReport.forEach((item, index) => {
|
||||
this.syncReportpercentage.push(item.percentage)
|
||||
this.syncReportquantity.push(item.quantity)
|
||||
})
|
||||
if(this.queryParam.value == 1){
|
||||
if (this.queryParam.value == 1) {
|
||||
this.collectingdata = this.collectingpercentage
|
||||
this.notStartdata = this.notStartpercentage
|
||||
this.submitdata = this.submitpercentage
|
||||
this.syncReportdata = this.syncReportpercentage
|
||||
}else if(this.queryParam.value == 2){
|
||||
} else if (this.queryParam.value == 2) {
|
||||
this.collectingdata = this.collectingquantity
|
||||
this.notStartdata = this.notStartquantity
|
||||
this.submitdata = this.submitquantity
|
||||
this.syncReportdata = this.syncReportquantity
|
||||
}
|
||||
var chartDom = document.getElementById('main-left');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
var option1;
|
||||
var chartDom = document.getElementById('main-left')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
var option1
|
||||
|
||||
let xAxisData = [];
|
||||
let xAxisData = []
|
||||
// let data1 = [];
|
||||
// let data2 = [];
|
||||
// let data3 = [];
|
||||
// let data4 = [];
|
||||
xAxisData = this.dutyTerritory
|
||||
// data1.push(+(Math.random() * 2).toFixed(2));
|
||||
// data2.push(+(Math.random() * 100).toFixed(2));
|
||||
// data3.push(+(Math.random() + 0.3).toFixed(2));
|
||||
// data4.push(+Math.random().toFixed(2));
|
||||
// data1.push(+(Math.random() * 2).toFixed(2));
|
||||
// data2.push(+(Math.random() * 100).toFixed(2));
|
||||
// data3.push(+(Math.random() + 0.3).toFixed(2));
|
||||
// data4.push(+Math.random().toFixed(2));
|
||||
|
||||
let yAxis=[];
|
||||
let tooltip= {};
|
||||
let yAxis = []
|
||||
let tooltip = {}
|
||||
let _this = this
|
||||
if(this.queryParam.value === 1){
|
||||
if (this.queryParam.value === 1) {
|
||||
yAxis = [
|
||||
{
|
||||
type: 'value',
|
||||
@@ -203,20 +212,26 @@
|
||||
show: true,
|
||||
interval: 'auto',
|
||||
formatter: '{value} %'
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
}else{
|
||||
yAxis=[
|
||||
} else {
|
||||
yAxis = [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
];
|
||||
type: 'value'
|
||||
}
|
||||
]
|
||||
}
|
||||
option = {
|
||||
title: {
|
||||
text: this.$t('parameterCollectionProgress'),
|
||||
},
|
||||
legend: {
|
||||
data: [this.$t('Notatthe'), this.$t('Inthecollection'), this.$t('Submitted'), this.$t('SynchronizedLibrary')],
|
||||
left: '10%'
|
||||
icon: 'circle',
|
||||
bottom:'0',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
},
|
||||
toolbox: {
|
||||
// feature: {
|
||||
@@ -227,21 +242,21 @@
|
||||
// }
|
||||
},
|
||||
tooltip: {
|
||||
trigger:'axis',
|
||||
trigger: 'axis',
|
||||
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
// type: 'line'// 默认为直线，可选为：'line' | 'shadow'
|
||||
// },
|
||||
formatter: function (params) {
|
||||
var html = params[0].name + "<br>";
|
||||
formatter: function(params) {
|
||||
var html = params[0].name + '<br>'
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
html += params[i].marker + params[i].seriesName + ":" + params[i].value;
|
||||
html += params[i].marker + params[i].seriesName + ':' + params[i].value
|
||||
if (_this.queryParam.value == 1) {
|
||||
html += "%" + "<br>";
|
||||
}else{
|
||||
html +="<br>";
|
||||
html += '%' + '<br>'
|
||||
} else {
|
||||
html += '<br>'
|
||||
}
|
||||
}
|
||||
return html;
|
||||
return html
|
||||
|
||||
}
|
||||
},
|
||||
@@ -250,19 +265,20 @@
|
||||
// name: 'X Axis',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate:25,
|
||||
rotate: 25
|
||||
// formatter: function(value) {
|
||||
// return value.split("").join("\n");
|
||||
// }
|
||||
},
|
||||
}
|
||||
// axisLine: { onZero: true },
|
||||
// splitLine: { show: false },
|
||||
// splitArea: { show: false }
|
||||
},
|
||||
yAxis: yAxis,
|
||||
grid: {
|
||||
left: '10%',
|
||||
bottom: '20%'
|
||||
bottom: '20%',
|
||||
left:50,
|
||||
right:10,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -272,7 +288,7 @@
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#707486",
|
||||
color: '#00B3BE'
|
||||
},
|
||||
data: this.notStartdata
|
||||
},
|
||||
@@ -283,7 +299,7 @@
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#00B3BE",
|
||||
color: '#FDA71C'
|
||||
},
|
||||
data: this.collectingdata
|
||||
},
|
||||
@@ -294,7 +310,7 @@
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#26BD4B",
|
||||
color: '#26BD4B'
|
||||
},
|
||||
data: this.submitdata
|
||||
},
|
||||
@@ -305,31 +321,29 @@
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#E83030",
|
||||
color: '#2F8DF3'
|
||||
},
|
||||
data: this.syncReportdata
|
||||
}
|
||||
],
|
||||
dataZoom:[
|
||||
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',//给x轴设置滚动条
|
||||
show: true, //flase直接隐藏图形
|
||||
xAxisIndex: [0],
|
||||
bottom: 0,
|
||||
bottom: 46,
|
||||
height: 20,
|
||||
showDetail: false,
|
||||
startValue: 0,//滚动条的起始位置
|
||||
endValue: 9 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
}
|
||||
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option, true);
|
||||
]
|
||||
}
|
||||
option && myChart.setOption(option, true)
|
||||
|
||||
},
|
||||
mainLeftEcharts(data, color) {
|
||||
this.getEcharts('main-left', this.$t('Parametercollection'), color, data, 1)
|
||||
this.getEcharts('main-left', this.$t('Parametercollection'), color, data, 1)
|
||||
},
|
||||
responsibility(item) {
|
||||
this.$emit('currentStatus', item)
|
||||
@@ -347,13 +361,14 @@
|
||||
|
||||
.box-content-left {
|
||||
width: calc(100% - 12px);
|
||||
height: 600px;
|
||||
height: 626px;
|
||||
border: 2px #eff1f3 solid;
|
||||
border-radius: 6px;
|
||||
|
||||
#main-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
padding: 24px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -371,6 +386,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-input {
|
||||
display: inline-block;
|
||||
width: calc(70% - 100px);
|
||||
@@ -398,4 +414,32 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-title-text {
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
color: #000F16;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
margin-right: 16px;
|
||||
margin-top: 3px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.box-input {
|
||||
display: inline-block;
|
||||
width: calc(100% - 126px);
|
||||
height: 38px;
|
||||
margin-top: 2px;
|
||||
line-height: 38px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +1,63 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-operator" style="margin-bottom: 10px">
|
||||
<div @click="versionStatisticsClick"
|
||||
v-if="!this.$route.query.parentId && $t('Parametercollection')!= activeKey"
|
||||
class="operator-text">
|
||||
<a-icon type="plus"/>
|
||||
{{$t('versionStatistics')}}
|
||||
</div>
|
||||
<div v-else
|
||||
class="operator-text">
|
||||
</div>
|
||||
</div>
|
||||
<a-tabs v-model="activeKey" class="ant-tabs">
|
||||
<a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">
|
||||
<currentStatusOfTheProjectEcharts @currentStatus="currentStatus"
|
||||
<!-- <div class="table-operator" style="margin-bottom: 10px">-->
|
||||
<!-- <div @click="versionStatisticsClick"-->
|
||||
<!-- v-if="!this.$route.query.parentId && $t('Parametercollection')!= activeKey"-->
|
||||
<!-- class="operator-text">-->
|
||||
<!-- <a-icon type="plus"/>-->
|
||||
<!-- {{$t('versionStatistics')}}-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-else-->
|
||||
<!-- class="operator-text">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<a-tabs type="card" v-model="activeKey" @change="activeKeyChange" class="ant-tabs">
|
||||
<a-tab-pane :key="$t('regulatoryComplianceManagement')" :tab="$t('regulatoryComplianceManagement')">
|
||||
<regulatoryCompliance @currentStatus="currentStatus"
|
||||
:idList="idList"
|
||||
v-if="activeKey == $t('CurrentStatusOfTheProject')"/>
|
||||
v-if="activeKey == $t('regulatoryComplianceManagement')"/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">
|
||||
<deliverableStatusEchart @currentStatus="currentStatus" :idList="idList"
|
||||
v-if="activeKey == $t('DeliverableStatus')"/>
|
||||
<a-tab-pane :key="$t('certificationActivityManagement')" :tab="$t('certificationActivityManagement')">
|
||||
<certificationActivity @currentStatus="currentStatus" :idList="idList"
|
||||
v-if="activeKey == $t('certificationActivityManagement')"/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">
|
||||
<certificationProgressEchart @currentStatus="currentStatus" :idList="idList"
|
||||
v-if="activeKey == $t('CertificationProgress')"/>
|
||||
<a-tab-pane :key="$t('parameterCollectionProgressManagement')" :tab="$t('parameterCollectionProgressManagement')">
|
||||
<parameterCollectionProgress @currentStatus="currentStatus" :idList="[]"
|
||||
v-if="activeKey == $t('parameterCollectionProgressManagement')"/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">
|
||||
<ParameterCollectionEchart @currentStatus="currentStatus" :idList="[]"
|
||||
v-if="activeKey == $t('Parametercollection')"/>
|
||||
<a-tab-pane :key="$t('nonConformance')" :tab="$t('nonConformance')">
|
||||
<nonConformance @currentStatus="currentStatus" v-if="activeKey == $t('nonConformance')"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<versionStatistics ref="versionStatisticsRef" @versionStatisticsForm="versionStatisticsForm"/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
|
||||
import deliverableStatusEchart from './deliverableStatusEchart'
|
||||
import ParameterCollectionEchart from './ParameterCollectionEchart'
|
||||
import certificationProgressEchart from './certificationProgressEchart'
|
||||
import versionStatistics from './versionStatistics'
|
||||
import regulatoryCompliance from './regulatoryCompliance'
|
||||
import certificationActivity from './certificationActivity'
|
||||
import parameterCollectionProgress from './parameterCollectionProgress'
|
||||
import nonConformance from './nonConformance'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'projectStatus',
|
||||
components: {
|
||||
ParameterCollectionEchart,
|
||||
currentStatusOfTheProjectEcharts,
|
||||
deliverableStatusEchart,
|
||||
certificationProgressEchart,
|
||||
versionStatistics
|
||||
parameterCollectionProgress,
|
||||
regulatoryCompliance,
|
||||
certificationActivity,
|
||||
nonConformance
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeKey: this.$t('CurrentStatusOfTheProject'),
|
||||
activeKey: this.$t('regulatoryComplianceManagement'),
|
||||
selectedRowKeys: [],
|
||||
idList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activeKeyChange(){
|
||||
this.$emit('projectStatusForm',this.activeKey)
|
||||
},
|
||||
currentStatus(item) {
|
||||
this.$emit('TaskListChange', item)
|
||||
},
|
||||
@@ -85,4 +84,7 @@
|
||||
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
::v-deep .ant-card-body{
|
||||
padding: 0 0 24px 0 ;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div class="box-content">
|
||||
<div class="box-content-top">
|
||||
<div id="main-top"></div>
|
||||
</div>
|
||||
<div class="box-content-left">
|
||||
<div id="main-left"></div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div id="main-right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||||
import responsibilityList from './responsibilityList'
|
||||
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
|
||||
|
||||
export default {
|
||||
name: 'regulatoryCompliance',
|
||||
components: {
|
||||
responsibilityList
|
||||
},
|
||||
props: {
|
||||
idList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
mixins: [ResizeHeader, ResizeColumnProvide],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
url: {
|
||||
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('red'),
|
||||
align: 'left',
|
||||
dataIndex: 'redCount',
|
||||
width: 139
|
||||
},
|
||||
{
|
||||
title: this.$t('yellow'),
|
||||
align: 'left',
|
||||
dataIndex: 'yellowCount',
|
||||
width: 139
|
||||
},
|
||||
{
|
||||
title: this.$t('green'),
|
||||
align: 'left',
|
||||
dataIndex: 'greenCount',
|
||||
width: 139
|
||||
},
|
||||
{
|
||||
title: this.$t('blue'),
|
||||
align: 'left',
|
||||
dataIndex: 'blueCount',
|
||||
width: 139
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let id = ''
|
||||
if (this.idList && this.idList.length > 0) {
|
||||
id = this.idList.join(',')
|
||||
} else {
|
||||
id = this.$route.query.id
|
||||
}
|
||||
getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result) {
|
||||
let mainTopDataSource = res.result.taskToConfirmMap ? res.result.taskToConfirmMap.taskToConfirmMapList : []
|
||||
let mainLeftDataSource = res.result.designComplianceMap ? res.result.designComplianceMap.designComplianceMapList : []
|
||||
let mainRightDataSource = res.result.verifyComplianceMap ? res.result.verifyComplianceMap.verifyComplianceMapList : []
|
||||
this.mainTopEcharts(mainTopDataSource)
|
||||
this.mainLeftEcharts(mainLeftDataSource)
|
||||
this.mainRightEcharts(mainRightDataSource)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getEcharts(chart, title, color, data) {
|
||||
var myChart = echarts.init(document.getElementById(chart))
|
||||
myChart.setOption({
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle : {
|
||||
fontWeight : 'normal',
|
||||
fontSize : 14,
|
||||
color:'#040B29',
|
||||
fontFamily:'BlueSkyNoto',
|
||||
},
|
||||
formatter: function (parms) {
|
||||
let str = parms.marker+' '+parms.data.name+' '+parms.data.value+' ('+parms.percent+'%)'
|
||||
return str
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
itemGap: 30,
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: title,
|
||||
type: 'pie',
|
||||
radius: ['40%', '54%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: color,
|
||||
data: data
|
||||
}
|
||||
]
|
||||
})
|
||||
myChart.on('click', (params) => {
|
||||
let query = {}
|
||||
if (params.seriesName == this.$t('regulatoryTaskConfirmation')){
|
||||
query = {
|
||||
title: params.seriesName,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryFGTaskToConfirmStatistics',
|
||||
status:params.data.status
|
||||
}
|
||||
}else if(params.seriesName == this.$t('designCompliance')){
|
||||
query = {
|
||||
title: params.seriesName,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryDesignStatistics',
|
||||
status:params.data.status
|
||||
}
|
||||
}else if(params.seriesName == this.$t('verifyCompliance')){
|
||||
query = {
|
||||
title: params.seriesName,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryVerifyStatistics',
|
||||
status:params.data.status
|
||||
}
|
||||
}
|
||||
this.$refs.responsibilityListRef.getData(query)
|
||||
})
|
||||
},
|
||||
|
||||
mainTopEcharts(dataSource) {
|
||||
let data = []
|
||||
let color = []
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
this.dataSource = [{}]
|
||||
dataSource.forEach(res => {
|
||||
if (res.taskAffirmStatus == 'Not started') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('notLaunch'),
|
||||
color: '#00B3BE',
|
||||
status: res.taskAffirmStatus
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.taskAffirmStatus == 'List to confirm') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('listToConfirm'),
|
||||
color: '#FDA71C',
|
||||
status: res.taskAffirmStatus
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
} else if (res.taskAffirmStatus == 'Accepted') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('accept'),
|
||||
color: '#26BC4B',
|
||||
status: res.taskAffirmStatus
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
} else if (res.taskAffirmStatus == 'Rejected') {
|
||||
data.push({
|
||||
value: res.taskAffirmStatusCount,
|
||||
name: this.$t('refuse'),
|
||||
color: '#E83030',
|
||||
status: res.taskAffirmStatus
|
||||
})
|
||||
color.push('#E83030')
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
|
||||
},
|
||||
|
||||
mainLeftEcharts(dataSource){
|
||||
let data = []
|
||||
let color = []
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
this.dataSource = [{}]
|
||||
dataSource.forEach(res => {
|
||||
if (res.designFlowTaskStatus == 'Not started') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount,
|
||||
name: this.$t('notLaunch'),
|
||||
color: '#00B3BE',
|
||||
status:res.designFlowTaskStatus
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.designFlowTaskStatus == 'List to confirm') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount,
|
||||
name: this.$t('listToConfirm'),
|
||||
color: '#FDA71C',
|
||||
status:res.designFlowTaskStatus
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
} else if (res.designFlowTaskStatus == 'Compliance') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount,
|
||||
name: this.$t('compliance'),
|
||||
color: '#26BC4B',
|
||||
status:res.designFlowTaskStatus
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
} else if (res.designFlowTaskStatus == 'Non-Compliance') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount,
|
||||
name: this.$t('nonCompliance'),
|
||||
color: '#707486',
|
||||
status:res.designFlowTaskStatus
|
||||
})
|
||||
color.push('#707486')
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-left', this.$t('designCompliance'), color, data)
|
||||
},
|
||||
|
||||
mainRightEcharts(dataSource){
|
||||
let data = []
|
||||
let color = []
|
||||
if (dataSource && dataSource.length > 0) {
|
||||
this.dataSource = [{}]
|
||||
dataSource.forEach(res => {
|
||||
if (res.verifyFlowTaskStatus == 'Not started') {
|
||||
data.push({
|
||||
value: res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('notLaunch'),
|
||||
color: '#00B3BE',
|
||||
status:res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#00B3BE')
|
||||
} else if (res.verifyFlowTaskStatus == 'List to confirm') {
|
||||
data.push({
|
||||
value: res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('listToConfirm'),
|
||||
color: '#FDA71C',
|
||||
status:res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#FDA71C')
|
||||
} else if (res.verifyFlowTaskStatus == 'Compliance') {
|
||||
data.push({
|
||||
value: res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('compliance'),
|
||||
color: '#26BC4B',
|
||||
status:res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
} else if (res.verifyFlowTaskStatus == 'Non-Compliance') {
|
||||
data.push({
|
||||
value: res.verifyFlowTaskStatusCount,
|
||||
name: this.$t('nonCompliance'),
|
||||
color: '#707486',
|
||||
status:res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#707486')
|
||||
}
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-right', this.$t('verifyCompliance'), color, data)
|
||||
},
|
||||
|
||||
responsibility(item) {
|
||||
console.log(item)
|
||||
this.$emit('currentStatus', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.box-content-top {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
height: 346px;
|
||||
border: 2px #eff1f3 solid;
|
||||
border-radius: 6px;
|
||||
|
||||
#main-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-left {
|
||||
width: calc(50% - 10px);
|
||||
margin-top: 20px;
|
||||
height: 346px;
|
||||
border: 2px #eff1f3 solid;
|
||||
border-radius: 6px;
|
||||
|
||||
#main-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-right {
|
||||
width: calc(50% - 10px);
|
||||
margin-top: 20px;
|
||||
height: 346px;
|
||||
border-radius: 6px;
|
||||
border: 2px #eff1f3 solid;
|
||||
|
||||
#main-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headerText {
|
||||
margin-left: 30px;
|
||||
color: #040B29;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +1,38 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirm-loading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@cancel="visible = false"
|
||||
>
|
||||
<template slot="footer">
|
||||
<a-button key="back" @click="visible = false">
|
||||
{{$t('cancel')}}
|
||||
</a-button>
|
||||
</template>
|
||||
<div style="text-align: right;margin-bottom: 10px">
|
||||
<div @click="handleExport" class="operator-text">
|
||||
<a-icon type="export" :rotate="-90"/>
|
||||
{{$t('export')}}
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
ref="table"
|
||||
:components="drag(columns,'columns')"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:scroll="{x: true,y:400}"
|
||||
:data-source="dataSource"
|
||||
:columns="columns"
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirm-loading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@cancel="visible = false"
|
||||
>
|
||||
<a slot="areaOfResponsibility" slot-scope="text,result" @click="areaOfResponsibilityClick(result)">
|
||||
{{text}}
|
||||
</a>
|
||||
</a-table>
|
||||
</a-modal>
|
||||
<template slot="footer">
|
||||
<a-button key="back" @click="visible = false">
|
||||
{{$t('cancel')}}
|
||||
</a-button>
|
||||
</template>
|
||||
<div style="text-align: right;margin-bottom: 10px">
|
||||
<div @click="handleExport" class="operator-text">
|
||||
<a-icon type="export" :rotate="-90"/>
|
||||
{{$t('export')}}
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
ref="table"
|
||||
:components="drag(columns,'columns')"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:scroll="{x: true,y:400}"
|
||||
:data-source="dataSource"
|
||||
:columns="columns"
|
||||
>
|
||||
<!-- @click="areaOfResponsibilityClick(result)"-->
|
||||
<span slot="areaOfResponsibility" slot-scope="text,result">
|
||||
{{text}}
|
||||
</span>
|
||||
</a-table>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -41,7 +42,7 @@
|
||||
|
||||
export default {
|
||||
name: 'responsibilityList',
|
||||
mixins:[ResizeHeader, ResizeColumnProvide],
|
||||
mixins: [ResizeHeader, ResizeColumnProvide],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
@@ -59,7 +60,7 @@
|
||||
title: this.$t('areaOfResponsibility'),
|
||||
dataIndex: 'dutyTerritoryName',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
scopedSlots: { customRender: 'areaOfResponsibility' }
|
||||
},
|
||||
@@ -68,7 +69,14 @@
|
||||
dataIndex: 'amount',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
width: 300
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: this.$t('proportion'),
|
||||
dataIndex: 'percentage',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
width: 150
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -100,12 +108,14 @@
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
},
|
||||
areaOfResponsibilityClick(item) {
|
||||
if (this.queryParam.operatorType == 'queryListingToConfirmStatistics' || this.queryParam.operatorType == 'queryTaskToConfirmStatistics'){
|
||||
item.isListing = '1'
|
||||
}
|
||||
// this.$emit('responsibility', item)
|
||||
}
|
||||
// areaOfResponsibilityClick(item) {
|
||||
// if (this.queryParam.operatorType == 'queryFGTaskToConfirmStatistics' ||
|
||||
// this.queryParam.operatorType == 'queryDesignStatistics' ||
|
||||
// this.queryParam.operatorType == 'queryVerifyStatistics') {
|
||||
// item.isListing = '1'
|
||||
// }
|
||||
// this.$emit('responsibility', item)
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,172 +1,322 @@
|
||||
<template>
|
||||
<a-modal
|
||||
<a-drawer
|
||||
:title="$t('setting')"
|
||||
:width="1100"
|
||||
:visible="visible"
|
||||
:confirm-loading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('listPublishing')">
|
||||
:width="1000"
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="handleCancel"
|
||||
:visible="visible"
|
||||
style="height: 100%;overflow: auto;padding-bottom: 53px;">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('listPublishing')">
|
||||
{{$t('listPublishing')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="listConfirmation">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('listPublishing')+$t('time')"
|
||||
@change="dateChange({db_field_name:'listConfirmation'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.listConfirmation"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="listConfirmation">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('listPublishing')+$t('time')"
|
||||
@change="dateChange({db_field_name:'listConfirmation'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.listConfirmation"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('responsibilityConfirmation')">
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('responsibilityConfirmation')">
|
||||
{{$t('responsibilityConfirmation')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="legalTaskConfirmation">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('responsibilityConfirmation')+$t('time')"
|
||||
@change="dateChange({db_field_name:'legalTaskConfirmation'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.legalTaskConfirmation"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="legalTaskConfirmation">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('responsibilityConfirmation')+$t('time')"
|
||||
@change="dateChange({db_field_name:'legalTaskConfirmation'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.legalTaskConfirmation"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('designVerification')">
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('designVerification')">
|
||||
{{$t('designVerification')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="designDeadline">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('designVerification')+$t('time')"
|
||||
@change="dateChange({db_field_name:'designDeadline'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.designDeadline"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="designDeadline">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('designVerification')+$t('time')"
|
||||
@change="dateChange({db_field_name:'designDeadline'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.designDeadline"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('getStarted')">
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('getStarted')">
|
||||
{{$t('getStarted')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="prehomoDeadline">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('getStarted')+$t('time')"
|
||||
@change="dateChange({db_field_name:'prehomoDeadline'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.prehomoDeadline"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="prehomoDeadline">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('getStarted')+$t('time')"
|
||||
@change="dateChange({db_field_name:'prehomoDeadline'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.prehomoDeadline"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('certificationStartOne')">
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('certificationStartOne')">
|
||||
{{$t('certificationStartOne')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="attestationStartTime">
|
||||
<a-date-picker class="box-input"
|
||||
:disabledDate='this.disabledRegistrationStartDate'
|
||||
:placeholder="$t('PleaseSelect')+$t('certificationStartOne')+$t('time')"
|
||||
@change="dateChange({db_field_name:'attestationStartTime'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.attestationStartTime"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="attestationStartTime">
|
||||
<a-date-picker class="box-input"
|
||||
:disabledDate='this.disabledRegistrationStartDate'
|
||||
:placeholder="$t('PleaseSelect')+$t('certificationStartOne')+$t('time')"
|
||||
@change="dateChange({db_field_name:'attestationStartTime'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.attestationStartTime"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('certificationSubmission')">
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('certificationSubmission')">
|
||||
{{$t('certificationSubmission')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="certificationSubmission">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('certificationSubmission')+$t('time')"
|
||||
@change="dateChange({db_field_name:'certificationSubmission'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.certificationSubmission"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="certificationSubmission">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('certificationSubmission')+$t('time')"
|
||||
@change="dateChange({db_field_name:'certificationSubmission'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.certificationSubmission"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('certificationEnd')">
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('certificationEnd')">
|
||||
{{$t('certificationEnd')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="attestationEndTime">
|
||||
<a-date-picker class="box-input"
|
||||
:disabledDate='this.disabledRegistrationEndDate'
|
||||
:placeholder="$t('PleaseSelect')+$t('certificationEnd')+$t('time')"
|
||||
@change="dateChange({db_field_name:'attestationEndTime'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.attestationEndTime"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="attestationEndTime">
|
||||
<a-date-picker class="box-input"
|
||||
:disabledDate='this.disabledRegistrationEndDate'
|
||||
:placeholder="$t('PleaseSelect')+$t('certificationEnd')+$t('time')"
|
||||
@change="dateChange({db_field_name:'attestationEndTime'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.attestationEndTime"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('verificationAndVerification')">
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<!-- <span class="Required">*</span>-->
|
||||
<span class="title-text-text" :title="$t('verificationAndVerification')">
|
||||
{{$t('verificationAndVerification')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="verifyDeadline">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('verificationAndVerification')+$t('time')"
|
||||
@change="dateChange({db_field_name:'verifyDeadline'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.verifyDeadline"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="verifyDeadline">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+$t('verificationAndVerification')+$t('time')"
|
||||
@change="dateChange({db_field_name:'verifyDeadline'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.verifyDeadline"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</a-modal>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G0">
|
||||
G0</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="zero">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G0'"
|
||||
@change="dateChange({db_field_name:'zero'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.zero"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G1">
|
||||
G1</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="one">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G1'"
|
||||
@change="dateChange({db_field_name:'one'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.one"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G2">
|
||||
G2</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="two">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G2'"
|
||||
@change="dateChange({db_field_name:'two'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.two"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G3">
|
||||
G3</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="three">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G3'"
|
||||
@change="dateChange({db_field_name:'three'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.three"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G4">
|
||||
G4</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="four">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G4'"
|
||||
@change="dateChange({db_field_name:'four'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.four"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G5">
|
||||
G5</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="five">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G5'"
|
||||
@change="dateChange({db_field_name:'five'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.five"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G6">
|
||||
G6</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="six">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G6'"
|
||||
@change="dateChange({db_field_name:'six'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.six"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text">
|
||||
<span class="title-text-text" title="G7">
|
||||
G7</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel" prop="seven">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('PleaseSelect')+'G7'"
|
||||
@change="dateChange({db_field_name:'seven'})"
|
||||
format="YYYY-MM-DD"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
v-model="formInline.seven"
|
||||
:disabled="false"
|
||||
style="width: 100%"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
<div class="drawer-bootom-button">
|
||||
<a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
|
||||
<a-button @click="handleOk" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -366,7 +516,7 @@
|
||||
}
|
||||
|
||||
.title-text {
|
||||
width: 144px;
|
||||
width: 106px;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
@@ -403,4 +553,17 @@
|
||||
color: red;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.drawer-bootom-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -34,7 +34,7 @@
|
||||
:components="drag(columns,'columns')"
|
||||
:columns="columns"
|
||||
:rowKey="(record)=>JSON.stringify(record)"
|
||||
:scroll="{x: '100%',y:500}"
|
||||
:scroll="{x: '100%',y:'calc(100vh - 280px)'}"
|
||||
:data-source="dataList"
|
||||
:pagination="false"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
|
||||
Reference in New Issue
Block a user