1031 lines
35 KiB
Java
1031 lines
35 KiB
Java
<template>
|
|
<div>
|
|
<a-drawer
|
|
:title="title"
|
|
:maskClosable="false"
|
|
:width="1000"
|
|
placement="right"
|
|
:closable="true"
|
|
@close="handleCancel"
|
|
:visible="visible"
|
|
style="height: 100%;overflow: auto;padding-bottom: 53px;">
|
|
<a-spin :spinning="confirmLoading">
|
|
<div class="box-content" v-if="visible">
|
|
<div class="box-content-top"
|
|
v-if="projectQuery.name == this.$t('listPublishing') || projectQuery.name == this.$t('responsibilityConfirmation')">
|
|
<div class="total-text">
|
|
<span>{{$t('totalTable')+' : '+mainTopNum}}</span>
|
|
</div>
|
|
<div id="main-top"></div>
|
|
</div>
|
|
<div class="box-content-top" v-if="projectQuery.name == this.$t('designVerification')">
|
|
<div class="total-text">
|
|
<span>{{$t('totalTable')+' : '+mainLeftNum}}</span>
|
|
</div>
|
|
<div id="main-left"></div>
|
|
</div>
|
|
<div class="box-content-top" v-if="projectQuery.name == this.$t('verificationAndVerification')">
|
|
<div class="total-text">
|
|
<span>{{$t('totalTable')+' : '+mainRightNum}}</span>
|
|
</div>
|
|
<div id="main-right"></div>
|
|
</div>
|
|
<div class="box-content-top"
|
|
v-if="projectQuery.name == this.$t('listPublishing') || projectQuery.name == this.$t('responsibilityConfirmation')">
|
|
<div class="total-text">
|
|
<span>{{$t('totalTable')+' : '+mainTopNumOne}}</span>
|
|
</div>
|
|
<div id="main-top-one"></div>
|
|
</div>
|
|
<div class="box-content-top"
|
|
v-if="projectQuery.name == this.$t('getStarted') || projectQuery.name == this.$t('certificationStartOne')">
|
|
<div class="total-text">
|
|
<span>{{$t('totalTable')+' : '+mainLeftNumOne}}</span>
|
|
</div>
|
|
<div id="main-right-one"></div>
|
|
</div>
|
|
<div class="box-content-top"
|
|
v-if="projectQuery.name == this.$t('certificationEnd') || projectQuery.name == this.$t('certificationSubmission')">
|
|
<div class="total-text-text" :class="{'total-text-text-cntop':long == 'zh-cn' ? true:false,
|
|
'total-text-text-entop':long == 'zh-cn' ? false:true}">
|
|
<span>{{$t('totalTable')+' : '+mainBottomNum}}</span>
|
|
</div>
|
|
<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 class="table-page-search-wrapper"
|
|
v-if="this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')">
|
|
<a-form layout="inline">
|
|
<a-row :gutter="24">
|
|
<a-col :md="12" :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>
|
|
<a-radio :value="2">
|
|
{{$t('Quantity')}}
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<div class="box-content-top-one"
|
|
v-if="this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')">
|
|
<div id="main-left-parameter"></div>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
<div class="drawer-bootom-button">
|
|
<a-button style="margin-right: 8px" @click="handleCancel">{{$t('cancel')}}</a-button>
|
|
</div>
|
|
</a-drawer>
|
|
<responsibilityList 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: 'statistics',
|
|
components: {
|
|
responsibilityList
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
confirmLoading: false,
|
|
title: '',
|
|
mainTopNum: 0,
|
|
mainLeftNum: 0,
|
|
mainRightNum: 0,
|
|
projectQuery: {},
|
|
num: '0',
|
|
mainBottomNum: 0,
|
|
mainTopNumOne: 0,
|
|
mainLeftNumOne: 0,
|
|
queryParam: {
|
|
value: 1,
|
|
ctype: ''
|
|
},
|
|
options: [],
|
|
collecting: [],
|
|
notStart: [],
|
|
submit: [],
|
|
syncReport: [],
|
|
collectingdata: [],
|
|
notStartdata: [],
|
|
submitdata: [],
|
|
syncReportdata: [],
|
|
dutyTerritory: [],
|
|
collectingpercentage: [],
|
|
collectingquantity: [],
|
|
notStartpercentage: [],
|
|
notStartquantity: [],
|
|
submitpercentage: [],
|
|
submitquantity: [],
|
|
syncReportpercentage: [],
|
|
syncReportquantity: [],
|
|
projectInfo:{},
|
|
long: localStorage.getItem('language') || 'zh-cn',
|
|
certificationProgressMap: {},
|
|
url: {
|
|
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics',
|
|
getProjectDetailsStatisticsCollectManifestData: '/project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestData'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleCancel() {
|
|
this.visible = false
|
|
},
|
|
getData(val,projectInfo) {
|
|
this.visible = true
|
|
this.projectInfo = projectInfo
|
|
this.title = val.name
|
|
this.projectQuery = val
|
|
this.getEchart()
|
|
if (this.projectQuery.name == this.$t('certificationSubmission') || this.projectQuery.name == this.$t('certificationEnd')) {
|
|
this.$nextTick(() => {
|
|
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')
|
|
}
|
|
})
|
|
} else if (this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')) {
|
|
this.getoptions()
|
|
}
|
|
},
|
|
getEchart() {
|
|
getAction(this.url.getProjectDetailsStatistics, { id: this.projectQuery.projectId }).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 : []
|
|
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 : []
|
|
if (this.projectQuery.name == this.$t('listPublishing') ||
|
|
this.projectQuery.name == this.$t('responsibilityConfirmation')) {
|
|
this.mainTopEcharts(mainTopDataSource)
|
|
this.dataEcharts(rzTaskToConfirmMapList)
|
|
} else if (this.projectQuery.name == this.$t('designVerification')) {
|
|
this.mainLeftEcharts(mainLeftDataSource)
|
|
} else if (this.projectQuery.name == this.$t('verificationAndVerification')) {
|
|
this.mainRightEcharts(mainRightDataSource)
|
|
} else if (this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')) {
|
|
this.mainRightOneEcharts(prehomoMapList)
|
|
} else if (this.projectQuery.name == this.$t('certificationSubmission') || this.projectQuery.name == this.$t('certificationEnd')) {
|
|
this.mainBottomEcharts(allMapList)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
getEcharts(chart, title, color, data) {
|
|
let 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) => {
|
|
let query = {}
|
|
if (params.seriesName == this.$t('regulatoryTaskConfirmation')) {
|
|
query = {
|
|
title: params.seriesName + '-' + params.name,
|
|
projectLibraryId: this.projectQuery.projectId,
|
|
operatorType: 'queryFGTaskToConfirmStatistics',
|
|
status: params.data.status
|
|
}
|
|
} else if (params.seriesName == this.$t('designCompliance')) {
|
|
query = {
|
|
title: params.seriesName + '-' + params.name,
|
|
projectLibraryId: this.projectQuery.projectId,
|
|
operatorType: 'queryDesignStatistics',
|
|
status: params.data.status
|
|
}
|
|
} else if (params.seriesName == this.$t('verifyCompliance')) {
|
|
query = {
|
|
title: params.seriesName + '-' + params.name,
|
|
projectLibraryId: this.projectQuery.projectId,
|
|
operatorType: 'queryVerifyStatistics',
|
|
status: params.data.status
|
|
}
|
|
} else if (params.seriesName === this.$t('certificationTaskConfirmation')) {
|
|
query = {
|
|
title: params.seriesName + '-' + params.name,
|
|
projectLibraryId: this.projectQuery.projectId,
|
|
operatorType: 'queryRZTaskToConfirmStatistics',
|
|
status: params.data.status
|
|
}
|
|
} else if (params.seriesName === this.$t('preHomoFlow')) {
|
|
query = {
|
|
title: params.seriesName + '-' + params.name,
|
|
projectLibraryId: this.projectQuery.projectId,
|
|
operatorType: 'queryPrehomoStatistics',
|
|
status: params.data.status
|
|
}
|
|
} else if (params.seriesName === this.$t('CertificationProgress')) {
|
|
query = {
|
|
title: params.seriesName + '-' + params.name,
|
|
projectLibraryId: this.projectQuery.projectId,
|
|
status: params.data.status
|
|
}
|
|
if (this.num == '0') {
|
|
query.operatorType = 'queryCertificationProgressStatisticsAll'
|
|
} else if (this.num == '1') {
|
|
query.operatorType = 'queryCertificationProgressStatisticsCar'
|
|
} else if (this.num == '2') {
|
|
query.operatorType = 'queryCertificationProgressStatisticsPart'
|
|
}
|
|
}
|
|
this.$refs.responsibilityListRef.getData(query,this.projectInfo)
|
|
})
|
|
},
|
|
|
|
mainTopEcharts(dataSource) {
|
|
let data = []
|
|
let color = []
|
|
this.mainTopNum = 0
|
|
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.mainTopNum += res.taskAffirmStatusCount
|
|
})
|
|
}
|
|
this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
|
|
},
|
|
|
|
mainLeftEcharts(dataSource) {
|
|
let data = []
|
|
let color = []
|
|
this.mainLeftNum = 0
|
|
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.mainLeftNum += res.designFlowTaskStatusCount
|
|
})
|
|
}
|
|
this.getEcharts('main-left', this.$t('designCompliance'), color, data)
|
|
},
|
|
|
|
mainRightEcharts(dataSource) {
|
|
let data = []
|
|
let color = []
|
|
this.mainRightNum = 0
|
|
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.mainRightNum += res.verifyFlowTaskStatusCount
|
|
})
|
|
}
|
|
this.getEcharts('main-right', this.$t('verifyCompliance'), color, data)
|
|
},
|
|
|
|
dataEcharts(dataSource) {
|
|
let data = []
|
|
let color = []
|
|
this.mainTopNumOne = 0
|
|
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.mainTopNumOne += res.taskAffirmStatusCount
|
|
})
|
|
}
|
|
this.getEcharts('main-top-one', this.$t('certificationTaskConfirmation'), color, data)
|
|
},
|
|
|
|
mainRightOneEcharts(dataSource) {
|
|
let data = []
|
|
let color = []
|
|
this.mainLeftNumOne = 0
|
|
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.mainLeftNumOne += res.taskAffirmStatusCount
|
|
})
|
|
}
|
|
this.getEcharts('main-right-one', this.$t('preHomoFlow'), color, data)
|
|
},
|
|
|
|
mainBottomEcharts(dataSource) {
|
|
let data = []
|
|
let color = []
|
|
this.mainBottomNum = 0
|
|
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.mainBottomNum += res.certificationProgressCount
|
|
})
|
|
}
|
|
this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data)
|
|
},
|
|
|
|
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 || [])
|
|
}
|
|
},
|
|
|
|
getParameter(item) {
|
|
getAction(this.url.getProjectDetailsStatisticsCollectManifestData, { paramsManifestId: item }).then((res) => {
|
|
if (res.success) {
|
|
if (res.result) {
|
|
this.collecting = res.result.collecting ? res.result.collecting : []
|
|
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.getEchartParameter()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
getoptions() {
|
|
getAction('project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestLabel', { id: this.projectQuery.projectId }).then((res) => {
|
|
if (res.success) {
|
|
this.options = res.result
|
|
this.queryParam.ctype = this.options[0].value
|
|
this.getParameter(this.queryParam.ctype)
|
|
} else {
|
|
}
|
|
})
|
|
},
|
|
|
|
onChange(value) {
|
|
this.collectingpercentage = []
|
|
this.collectingquantity = []
|
|
this.notStartpercentage = []
|
|
this.notStartquantity = []
|
|
this.submitpercentage = []
|
|
this.submitquantity = []
|
|
this.syncReportpercentage = []
|
|
this.syncReportquantity = []
|
|
this.getEchartParameter()
|
|
},
|
|
|
|
getEchartParameter(chart, title, color, data, num) {
|
|
this.collecting.forEach((item, index) => {
|
|
this.collectingpercentage.push(item.percentage)
|
|
this.collectingquantity.push(item.quantity)
|
|
})
|
|
this.notStart.forEach((item, index) => {
|
|
this.notStartpercentage.push(item.percentage)
|
|
this.notStartquantity.push(item.quantity)
|
|
})
|
|
this.submit.forEach((item, index) => {
|
|
this.submitpercentage.push(item.percentage)
|
|
this.submitquantity.push(item.quantity)
|
|
})
|
|
this.syncReport.forEach((item, index) => {
|
|
this.syncReportpercentage.push(item.percentage)
|
|
this.syncReportquantity.push(item.quantity)
|
|
})
|
|
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) {
|
|
this.collectingdata = this.collectingquantity
|
|
this.notStartdata = this.notStartquantity
|
|
this.submitdata = this.submitquantity
|
|
this.syncReportdata = this.syncReportquantity
|
|
}
|
|
var chartDom = document.getElementById('main-left-parameter')
|
|
var myChart = echarts.init(chartDom)
|
|
var option
|
|
var option1
|
|
|
|
let xAxisData = []
|
|
xAxisData = this.dutyTerritory
|
|
|
|
let yAxis = []
|
|
let tooltip = {}
|
|
let _this = this
|
|
if (this.queryParam.value === 1) {
|
|
yAxis = [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
formatter: '{value} %'
|
|
}
|
|
}
|
|
]
|
|
} else {
|
|
yAxis = [
|
|
{
|
|
type: 'value'
|
|
}
|
|
]
|
|
}
|
|
option = {
|
|
title: {
|
|
text: this.$t('parameterCollectionProgress')
|
|
},
|
|
legend: {
|
|
data: [this.$t('Notatthe'), this.$t('Inthecollection'), this.$t('Submitted'), this.$t('SynchronizedLibrary')],
|
|
icon: 'circle',
|
|
bottom: '0',
|
|
itemWidth: 12,
|
|
itemHeight: 12
|
|
},
|
|
toolbox: {},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
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
|
|
if (_this.queryParam.value == 1) {
|
|
html += '%' + '<br>'
|
|
} else {
|
|
html += '<br>'
|
|
}
|
|
}
|
|
return html
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 25
|
|
}
|
|
},
|
|
yAxis: yAxis,
|
|
grid: {
|
|
bottom: '20%',
|
|
left: 50,
|
|
right: 10
|
|
},
|
|
series: [
|
|
{
|
|
name: this.$t('Notatthe'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: '#00B3BE'
|
|
},
|
|
data: this.notStartdata
|
|
},
|
|
{
|
|
name: this.$t('Inthecollection'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: '#FDA71C'
|
|
},
|
|
data: this.collectingdata
|
|
},
|
|
{
|
|
name: this.$t('Submitted'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: '#26BD4B'
|
|
},
|
|
data: this.submitdata
|
|
},
|
|
{
|
|
name: this.$t('SynchronizedLibrary'),
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: 40,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: '#2F8DF3'
|
|
},
|
|
data: this.syncReportdata
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',//给x轴设置滚动条
|
|
show: true, //flase直接隐藏图形
|
|
xAxisIndex: [0],
|
|
bottom: 46,
|
|
height: 20,
|
|
showDetail: false,
|
|
startValue: 0,//滚动条的起始位置
|
|
endValue: 9 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
|
}
|
|
]
|
|
}
|
|
option && myChart.setOption(option, true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.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;
|
|
}
|
|
|
|
.box-content {
|
|
width: 100%;
|
|
margin-bottom: 46px;
|
|
|
|
.box-content-top {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 346px;
|
|
border: 2px #eff1f3 solid;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
|
|
#main-top {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-top-one {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-left {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-right-one {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-top-one {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-bottom {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#main-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|
|
|
|
.box-content-top-one {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 626px;
|
|
border: 2px #eff1f3 solid;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
|
|
#main-left-parameter {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 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;
|
|
}
|
|
|
|
.total-text {
|
|
position: absolute;
|
|
right: 28px;
|
|
top: 19px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.total-text-text {
|
|
position: absolute;
|
|
right: 28px;
|
|
top: 21px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.total-text-text-cntop {
|
|
right: 180px;
|
|
}
|
|
|
|
.total-text-text-entop {
|
|
right: 290px;
|
|
}
|
|
|
|
.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> |