对接项目详情的图标

This commit is contained in:
qq787203167
2022-05-16 17:30:45 +08:00
parent 88159cfc15
commit c8af7231fc
2 changed files with 186 additions and 67 deletions
@@ -14,7 +14,7 @@
:columns="columns"
>
<template slot="footer" slot-scope="currentPageData">
{{$t('totalTable')}}
{{$t('totalTable')}}:{{certificationProgressTotal}}
</template>
</a-table>
</div>
@@ -24,46 +24,108 @@
<script>
import * as echarts from 'echarts'
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
export default {
name: 'certificationProgress',
data() {
return {
loading:false,
dataSource:[],
loading: false,
dataSource: [],
certificationProgressTotal: 0,
url: {
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
},
columns: [
{
title: this.$t('notInvolved'),
align: 'center',
dataIndex: 'nonConformity',
dataIndex: 'notInvolved'
},
{
title: this.$t('toBeStarted'),
align: 'center',
dataIndex: 'Tracked',
dataIndex: 'toBeStarted'
},
{
title: this.$t('inProgress'),
align: 'center',
dataIndex: 'accord',
dataIndex: 'inProgress'
},
{
title: this.$t('experimentFailed'),
align: 'center',
dataIndex: 'notEvaluated',
dataIndex: 'experimentFailed'
},
{
title: this.$t('experimentPassed'),
align: 'center',
dataIndex: 'notEvaluatedOne',
dataIndex: 'experimentPassed'
}
]
}
},
mounted() {
this.mainLeftEcharts()
this.getData()
},
methods: {
getData() {
getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
if (res.success) {
let certificationProgressMap = res.result.certificationProgressMap.certificationProgressMapList || []
this.certificationProgressTotal = res.result.certificationProgressMap.certificationProgressTotal
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')
})
color.push('#9DB9D4')
this.dataSource[0].notInvolved = res.certificationProgressCount
} else if (res.certificationProgress == 'Not start') {
data.push({
value: res.certificationProgressCount,
name: this.$t('toBeStarted')
})
color.push('#FDB033')
this.dataSource[0].toBeStarted = res.certificationProgressCount
} else if (res.certificationProgress == 'In progress') {
data.push({
value: res.certificationProgressCount,
name: this.$t('inProgress')
})
color.push('#FF8543')
this.dataSource[0].inProgress = res.certificationProgressCount
} else if (res.certificationProgress == 'Test failed') {
data.push({
value: res.certificationProgressCount,
name: this.$t('experimentFailed')
})
color.push('#FF8543')
this.dataSource[0].experimentFailed = res.certificationProgressCount
} else if (res.certificationProgress == 'Test passed') {
data.push({
value: res.certificationProgressCount,
name: this.$t('experimentPassed')
})
color.push('#2F8DF3')
this.dataSource[0].experimentPassed = res.certificationProgressCount
}
})
}
this.mainLeftEcharts(data, color)
},
getEcharts(chart, title, color, data) {
var myChart = echarts.init(document.getElementById(chart))
myChart.setOption({
@@ -100,15 +162,7 @@
]
})
},
mainLeftEcharts() {
let data = [
{ value: 1048, name: this.$t('notInvolved') },
{ value: 735, name: this.$t('toBeStarted') },
{ value: 580, name: this.$t('inProgress') },
{ value: 580, name: this.$t('experimentFailed') },
{ value: 580, name: this.$t('experimentPassed') }
]
let color = ['#9DB9D4', '#FDB033', '#37CED1', '#FF8543', '#2F8DF3', ]
mainLeftEcharts(data, color) {
this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
}
}
@@ -35,7 +35,7 @@
return {
url: {
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
},
}
}
},
mounted() {
@@ -50,10 +50,103 @@
getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
if (res.success) {
let listingToConfirmMap = res.result.listingToConfirmMap.listingToConfirmMapList || []
this.mainLeftEcharts(listingToConfirmMap)
let taskToConfirmMap = res.result.taskToConfirmMap.taskToConfirmMapList || []
let designComplianceMap = res.result.designComplianceMap.designComplianceMapList || []
let prehomoMap = res.result.prehomoMap.prehomoMapList || []
let 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')
})
color.push('#00BEBE')
} else if (res.inventoryAffirmStatus == 'List to confirm' || res.taskAffirmStatus == 'List to confirm') {
data.push({
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
name: this.$t('toBeConfirmed')
})
color.push('#FDB033')
} else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
data.push({
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
name: this.$t('accept')
})
color.push('#2F8DF3')
} else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
data.push({
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
name: this.$t('refuse')
})
color.push('#9DB9D4')
}
})
}
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')
})
color.push('#37CED1')
} else if (res.designFlowTaskStatus == 'Compliance' || res.prehomoFlowTaskStatus == 'Compliance' || res.verifyFlowTaskStatus == 'Compliance') {
data.push({
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
name: this.$t('accord')
})
color.push('#2F8DF3')
} 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')
})
color.push('#FF8543')
} 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')
})
color.push('#FDB033')
} else if (res.designFlowTaskStatus == 'NA' || res.prehomoFlowTaskStatus == 'NA' || res.verifyFlowTaskStatus == 'NA') {
data.push({
value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
name: this.$t('notInvolved')
})
color.push('#9DB9D4')
}
}
)
}
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) {
var myChart = echarts.init(document.getElementById(chart))
myChart.setOption({
@@ -89,54 +182,26 @@
}
]
})
},
mainLeftEcharts() {
let data = [
{ value: 1048, name: this.$t('notLaunch') },
{ value: 735, name: this.$t('toBeConfirmed') },
{ value: 580, name: this.$t('accept') },
{ value: 580, name: this.$t('refuse') }
]
this.getEcharts('main-left', this.$t('listConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data)
},
mainRightEcharts() {
let data = [
{ value: 1048, name: this.$t('notLaunch') },
{ value: 735, name: this.$t('toBeConfirmed') },
{ value: 580, name: this.$t('accept') },
{ value: 580, name: this.$t('refuse') }
]
this.getEcharts('main-right', this.$t('taskConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data)
},
mainLeftContentEcharts() {
let data = [
{ value: 1048, name: this.$t('toBeConfirmed') },
{ value: 735, name: this.$t('accord') },
{ value: 580, name: this.$t('nonConformity') },
{ value: 580, name: this.$t('Tracked') },
{ value: 580, name: this.$t('notInvolved') }
]
this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
},
mainRightContentEcharts() {
let data = [
{ value: 1048, name: this.$t('toBeConfirmed') },
{ value: 735, name: this.$t('accord') },
{ value: 580, name: this.$t('nonConformity') },
{ value: 580, name: this.$t('Tracked') },
{ value: 580, name: this.$t('notInvolved') }
]
this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
},
mainBottomEcharts() {
let data = [
{ value: 1048, name: this.$t('toBeConfirmed') },
{ value: 735, name: this.$t('accord') },
{ value: 580, name: this.$t('nonConformity') },
{ value: 580, name: this.$t('Tracked') },
{ value: 580, name: this.$t('notInvolved') }
]
this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
}
,
mainLeftEcharts(data, color) {
this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data)
}
,
mainRightEcharts(data, color) {
this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data)
}
,
mainLeftContentEcharts(data, color) {
this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data)
}
,
mainRightContentEcharts(data, color) {
this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data)
}
,
mainBottomEcharts(data, color) {
this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data)
}
}
}