对接项目详情的图标

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" :columns="columns"
> >
<template slot="footer" slot-scope="currentPageData"> <template slot="footer" slot-scope="currentPageData">
{{$t('totalTable')}} {{$t('totalTable')}}:{{certificationProgressTotal}}
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -24,46 +24,108 @@
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
export default { export default {
name: 'certificationProgress', name: 'certificationProgress',
data() { data() {
return { return {
loading:false, loading: false,
dataSource:[], dataSource: [],
certificationProgressTotal: 0,
url: {
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
},
columns: [ columns: [
{ {
title: this.$t('notInvolved'), title: this.$t('notInvolved'),
align: 'center', align: 'center',
dataIndex: 'nonConformity', dataIndex: 'notInvolved'
}, },
{ {
title: this.$t('toBeStarted'), title: this.$t('toBeStarted'),
align: 'center', align: 'center',
dataIndex: 'Tracked', dataIndex: 'toBeStarted'
}, },
{ {
title: this.$t('inProgress'), title: this.$t('inProgress'),
align: 'center', align: 'center',
dataIndex: 'accord', dataIndex: 'inProgress'
}, },
{ {
title: this.$t('experimentFailed'), title: this.$t('experimentFailed'),
align: 'center', align: 'center',
dataIndex: 'notEvaluated', dataIndex: 'experimentFailed'
}, },
{ {
title: this.$t('experimentPassed'), title: this.$t('experimentPassed'),
align: 'center', align: 'center',
dataIndex: 'notEvaluatedOne', dataIndex: 'experimentPassed'
} }
] ]
} }
}, },
mounted() { mounted() {
this.mainLeftEcharts() this.mainLeftEcharts()
this.getData()
}, },
methods: { 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) { getEcharts(chart, title, color, data) {
var myChart = echarts.init(document.getElementById(chart)) var myChart = echarts.init(document.getElementById(chart))
myChart.setOption({ myChart.setOption({
@@ -100,15 +162,7 @@
] ]
}) })
}, },
mainLeftEcharts() { mainLeftEcharts(data, color) {
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', ]
this.getEcharts('main-left', this.$t('CertificationProgress'), color, data) this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
} }
} }
@@ -35,7 +35,7 @@
return { return {
url: { url: {
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics' getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
}, }
} }
}, },
mounted() { mounted() {
@@ -50,10 +50,103 @@
getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => { getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
if (res.success) { if (res.success) {
let listingToConfirmMap = res.result.listingToConfirmMap.listingToConfirmMapList || [] 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) { getEcharts(chart, title, color, data) {
var myChart = echarts.init(document.getElementById(chart)) var myChart = echarts.init(document.getElementById(chart))
myChart.setOption({ myChart.setOption({
@@ -89,54 +182,26 @@
} }
] ]
}) })
}, }
mainLeftEcharts() { ,
let data = [ mainLeftEcharts(data, color) {
{ value: 1048, name: this.$t('notLaunch') }, this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data)
{ value: 735, name: this.$t('toBeConfirmed') }, }
{ value: 580, name: this.$t('accept') }, ,
{ value: 580, name: this.$t('refuse') } mainRightEcharts(data, color) {
] this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data)
this.getEcharts('main-left', this.$t('listConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data) }
}, ,
mainRightEcharts() { mainLeftContentEcharts(data, color) {
let data = [ this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data)
{ value: 1048, name: this.$t('notLaunch') }, }
{ value: 735, name: this.$t('toBeConfirmed') }, ,
{ value: 580, name: this.$t('accept') }, mainRightContentEcharts(data, color) {
{ value: 580, name: this.$t('refuse') } this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data)
] }
this.getEcharts('main-right', this.$t('taskConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data) ,
}, mainBottomEcharts(data, color) {
mainLeftContentEcharts() { this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data)
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)
} }
} }
} }