ota统计修改布局
This commit is contained in:
zyx.net
@@ -1942,4 +1942,10 @@ module.exports = {
|
||||
VDRDetails:'VDR Details',
|
||||
applicationprojectversion:'Application project version',
|
||||
selectlocked:'You can select only the data whose matching status is locked',
|
||||
otastatus:'OTA status',
|
||||
Matchingstatestatistics:'Matching state statistics',
|
||||
OTaauthenticationprogressstatistics:'OTA authentication progress statistics',
|
||||
tobematched:'To be matched',
|
||||
Pendingapproval:'Pending approval',
|
||||
lock:'lock',
|
||||
}
|
||||
@@ -3898,4 +3898,10 @@ module.exports = {
|
||||
VDRDetails:'VDR详情',
|
||||
applicationprojectversion:'应用项目版本',
|
||||
selectlocked:'只能选择匹配状态为锁定的数据',
|
||||
otastatus:'OTA状态',
|
||||
Matchingstatestatistics:'匹配状态统计',
|
||||
OTaauthenticationprogressstatistics:'OTA认证进度统计',
|
||||
tobematched:'待匹配',
|
||||
Pendingapproval:'待审批',
|
||||
lock:'锁定',
|
||||
}
|
||||
@@ -958,18 +958,16 @@ export default {
|
||||
this.$confirm({
|
||||
content: _this.$t('notificationsent'),
|
||||
onOk() {
|
||||
// let query = {
|
||||
// configDataList: configDataList,
|
||||
// paramsManifestId: _this.paramsManifest.id
|
||||
// }
|
||||
// postAction(_this.url.add, query).then((res) => {
|
||||
// if (res.success) {
|
||||
// _this.$message.success(_this.$t('OperationSuccessful'))
|
||||
// _this.GetgetTableList()
|
||||
// } else {
|
||||
// _this.$message.warning(_this.$t('operationFailed'))
|
||||
// }
|
||||
// })
|
||||
let query = {
|
||||
id: this.$route.query.plannedBpLaunchBatch
|
||||
}
|
||||
postAction('/ota/otaManageApplyEO/issueNotice', query).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success(_this.$t('OperationSuccessful'))
|
||||
} else {
|
||||
_this.$message.warning(_this.$t('operationFailed'))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -0,0 +1,483 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="10">
|
||||
<div class="box-title-text">
|
||||
<div class="title-text" :title="$t('softwareversion')">
|
||||
<span>{{ $t('softwareversion') }}</span>
|
||||
</div>
|
||||
<a-select v-model="queryParam.ctype"
|
||||
class="box-input"
|
||||
@change="getonChange"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:autoClearSearchValue="false"
|
||||
:getPopupContainer="triggerNode => triggerNode.parentNode" :popper-append-to-body="false">
|
||||
<a-select-option v-for="d in options" :key="d.value" :label='d.label' :value="d.value">
|
||||
<span style="display: inline-block;width: 80%" :title=" d.label">
|
||||
{{ d.label }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="10">
|
||||
<div class="box-title-text">
|
||||
<a-button class="box-button"
|
||||
style="line-height: 32px;margin-top: 5px;"
|
||||
@click="vdrcheckClick">{{ 'VDR' + $t('view')}}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div id="main-left-Collect"></div>
|
||||
<div class='main-table'>
|
||||
<table border="1" cellspacing="0" class="table">
|
||||
<tr>
|
||||
<td width="150px" height="50px" align="center">{{$t('tobematched')}}</td>
|
||||
<td width="150px" height="50px" align="center">{{$t('Pendingapproval')}}</td>
|
||||
<td width="150px" height="50px" align="center">{{$t('lock')}}</td>
|
||||
<td width="150px" height="50px" align="center">{{$t('sendBack')}}</td>
|
||||
<td width="150px" height="50px" align="center">{{$t('notInvolved')}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="80px" align="center"><span style='color: #5087EC'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #68BBC4'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #58A55C'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #F2BD42'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #BBBBBB'>111</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div id="main-top-Collect"></div>
|
||||
<div class='main-table' style='padding:10% 0;margin-left: -61px;'>
|
||||
<table border="1" cellspacing="0" class="table">
|
||||
<tr>
|
||||
<td width="150px" height="50px" align="center">{{$t('Notatthe')}}</td>
|
||||
<td width="150px" height="50px" align="center">{{$t('inProgress')}}</td>
|
||||
<td width="150px" height="50px" align="center">{{$t('experimentPassed')}}</td>
|
||||
<td width="150px" height="50px" align="center">{{$t('experimentFailed')}}</td>
|
||||
<td width="190px" height="50px" align="center">{{$t('componentReportNotSubmitted')}}</td>
|
||||
<td width="190px" height="50px" align="center">{{$t('componentReportSubmitted')}}</td>
|
||||
<td width="190px" height="50px" align="center">{{$t('componentReportHasBeenStored')}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="80px" align="center"><span style='color: #BBBBBB'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #68BBC4'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #68BBC4'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #D95040'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #BBBBBB'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #68BBC4'>111</span></td>
|
||||
<td height="80px" align="center"><span style='color: #58A55C'>111</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</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'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
|
||||
export default {
|
||||
name: 'DeliverableStatusEchart',
|
||||
components: {
|
||||
// responsibilityList
|
||||
},
|
||||
props: {
|
||||
idList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParam: {
|
||||
value: 1,
|
||||
ctype: ''
|
||||
},
|
||||
options: [],
|
||||
collecting: [],
|
||||
notStart: [],
|
||||
submit: [],
|
||||
syncReport: [],
|
||||
collectingdata: [],
|
||||
notStartdata: [],
|
||||
submitdata: [],
|
||||
syncReportdata: [],
|
||||
dutyTerritory: [],
|
||||
collectingpercentage: [],
|
||||
collectingquantity: [],
|
||||
notStartpercentage: [],
|
||||
notStartquantity: [],
|
||||
submitpercentage: [],
|
||||
submitquantity: [],
|
||||
syncReportpercentage: [],
|
||||
syncReportquantity: [],
|
||||
url: {
|
||||
getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getoptions()
|
||||
this.getData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
vdrcheckClick(){
|
||||
|
||||
},
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getoptions() {
|
||||
let id = ''
|
||||
if (this.idList && this.idList.length > 0) {
|
||||
id = this.idList.join(',')
|
||||
} else {
|
||||
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) => {
|
||||
if (res.success) {
|
||||
this.options = res.result
|
||||
this.queryParam.ctype = this.options[0].value
|
||||
// this.getData(this.queryParam.ctype)
|
||||
} else {
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getonChange(value) {
|
||||
this.collectingpercentage = []
|
||||
this.collectingquantity = []
|
||||
this.notStartpercentage = []
|
||||
this.notStartquantity = []
|
||||
this.submitpercentage = []
|
||||
this.submitquantity = []
|
||||
this.syncReportpercentage = []
|
||||
this.syncReportquantity = []
|
||||
this.getData(value)
|
||||
},
|
||||
|
||||
onChange(value) {
|
||||
this.collectingpercentage = []
|
||||
this.collectingquantity = []
|
||||
this.notStartpercentage = []
|
||||
this.notStartquantity = []
|
||||
this.submitpercentage = []
|
||||
this.submitquantity = []
|
||||
this.syncReportpercentage = []
|
||||
this.syncReportquantity = []
|
||||
this.getEcharts()
|
||||
},
|
||||
getEcharts(chart, title, color, data) {
|
||||
console.log(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+'-'+params.name,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryFGTaskToConfirmStatistics',
|
||||
status: params.data.status
|
||||
}
|
||||
} else if (params.seriesName == this.$t('designCompliance')) {
|
||||
query = {
|
||||
title: params.seriesName+'-'+params.name,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryDesignStatistics',
|
||||
status: params.data.status
|
||||
}
|
||||
} else if (params.seriesName == this.$t('verifyCompliance')) {
|
||||
query = {
|
||||
title: params.seriesName+'-'+params.name,
|
||||
projectLibraryId: this.$route.query.id,
|
||||
operatorType: 'queryVerifyStatistics',
|
||||
status: params.data.status
|
||||
}
|
||||
}
|
||||
this.$refs.responsibilityListRef.getData(query)
|
||||
})
|
||||
},
|
||||
|
||||
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-left-Collect', this.$t('Matchingstatestatistics'), color, data)
|
||||
},
|
||||
|
||||
mainLeftEcharts(dataSource) {
|
||||
let data = []
|
||||
let color = []
|
||||
this.mainTopNum = 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 == 'Accepted') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount,
|
||||
name: this.$t('accept'),
|
||||
color: '#26BC4B',
|
||||
status: res.designFlowTaskStatus
|
||||
})
|
||||
color.push('#26BC4B')
|
||||
} else if (res.designFlowTaskStatus == 'Rejected') {
|
||||
data.push({
|
||||
value: res.designFlowTaskStatusCount,
|
||||
name: this.$t('refuse'),
|
||||
color: '#E83030',
|
||||
status: res.designFlowTaskStatus
|
||||
})
|
||||
color.push('#E83030')
|
||||
}
|
||||
this.mainTopNum += res.designFlowTaskStatusCount
|
||||
})
|
||||
}
|
||||
this.getEcharts('main-top-Collect', this.$t('OTaauthenticationprogressstatistics'), color, data)
|
||||
},
|
||||
responsibility(item) {
|
||||
this.$emit('currentStatus', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box-content {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.box-content-left {
|
||||
width: calc(100% - 12px);
|
||||
height: 450px;
|
||||
border: 2px #eff1f3 solid;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
|
||||
#main-left-Collect {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
padding: 24px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main-left-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#main-top-Collect {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
padding: 24px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.main-table{
|
||||
width: 40%;
|
||||
padding: 10% 4%;
|
||||
}
|
||||
}
|
||||
|
||||
.box-input {
|
||||
display: inline-block;
|
||||
width: calc(70% - 100px);
|
||||
height: 38px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -28,6 +28,9 @@
|
||||
<a-tab-pane :key="$t('nonConformance')" :tab="$t('nonConformance')">
|
||||
<nonConformance @currentStatus="currentStatus" v-if="activeKey == $t('nonConformance')"/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane :key="$t('otastatus')" :tab="$t('otastatus')">
|
||||
<otastatus @currentStatus="currentStatus" :idList="idList" v-if="activeKey == $t('otastatus')"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</template>
|
||||
@@ -37,6 +40,7 @@
|
||||
import certificationActivity from './certificationActivity'
|
||||
import parameterCollectionProgress from './parameterCollectionProgress'
|
||||
import nonConformance from './nonConformance'
|
||||
import otastatus from './otastatus'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
@@ -45,7 +49,8 @@
|
||||
parameterCollectionProgress,
|
||||
regulatoryCompliance,
|
||||
certificationActivity,
|
||||
nonConformance
|
||||
nonConformance,
|
||||
otastatus
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user