对接echarts的表格
This commit is contained in:
qq787203167
@@ -21,6 +21,7 @@
|
||||
<div id="main-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<responsibilityList ref="responsibilityListRef"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -28,9 +29,13 @@
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||||
import responsibilityList from './responsibilityList'
|
||||
|
||||
export default {
|
||||
name: 'DeliverableStatusEchart',
|
||||
components: {
|
||||
responsibilityList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: {
|
||||
@@ -70,25 +75,29 @@
|
||||
if (res.inventoryAffirmStatus == 'Not started' || res.taskAffirmStatus == 'Not started') {
|
||||
data.push({
|
||||
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
|
||||
name: this.$t('notLaunch')
|
||||
name: this.$t('notLaunch'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
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')
|
||||
name: this.$t('toBeConfirmed'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
color.push('#FDB033')
|
||||
} else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
|
||||
data.push({
|
||||
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
|
||||
name: this.$t('accept')
|
||||
name: this.$t('accept'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
color.push('#2F8DF3')
|
||||
} else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
|
||||
data.push({
|
||||
value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
|
||||
name: this.$t('refuse')
|
||||
name: this.$t('refuse'),
|
||||
status: res.inventoryAffirmStatus || res.taskAffirmStatus
|
||||
})
|
||||
color.push('#9DB9D4')
|
||||
}
|
||||
@@ -108,31 +117,36 @@
|
||||
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')
|
||||
name: this.$t('toBeConfirmed'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
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')
|
||||
name: this.$t('accord'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
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')
|
||||
name: this.$t('nonConformity'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
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')
|
||||
name: this.$t('Tracked'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
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')
|
||||
name: this.$t('notInvolved'),
|
||||
status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
|
||||
})
|
||||
color.push('#9DB9D4')
|
||||
}
|
||||
@@ -147,7 +161,7 @@
|
||||
this.mainBottomEcharts(data, color)
|
||||
}
|
||||
},
|
||||
getEcharts(chart, title, color, data) {
|
||||
getEcharts(chart, title, color, data, num) {
|
||||
var myChart = echarts.init(document.getElementById(chart))
|
||||
myChart.setOption({
|
||||
title: {
|
||||
@@ -182,26 +196,49 @@
|
||||
}
|
||||
]
|
||||
})
|
||||
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)
|
||||
this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data, 1)
|
||||
}
|
||||
,
|
||||
mainRightEcharts(data, color) {
|
||||
this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data)
|
||||
this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data, 2)
|
||||
}
|
||||
,
|
||||
mainLeftContentEcharts(data, color) {
|
||||
this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data)
|
||||
this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data, 3)
|
||||
}
|
||||
,
|
||||
mainRightContentEcharts(data, color) {
|
||||
this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data)
|
||||
this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data, 4)
|
||||
}
|
||||
,
|
||||
mainBottomEcharts(data, color) {
|
||||
this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data)
|
||||
this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data, 5)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user