|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<boxCom title="质量流程&研发效率" :page-data="pageData" @change="tabChange">
|
|
|
- <!-- <div>质量流程&研发效率:{{ active }}</div> -->
|
|
|
+ <!-- <div>质量流程&研发效率:{{ active }}{{this.pieData.filter(elm => elm.total).length}}</div> -->
|
|
|
<div v-if="tabData" class="echarts-wrapper">
|
|
|
<div class="pie-wrapper">
|
|
|
<div class="total-wrapper">
|
|
@@ -10,11 +10,12 @@
|
|
|
}}</span> -->
|
|
|
</div>
|
|
|
<div
|
|
|
+ v-if="this.pieData.filter(elm => elm.total).length"
|
|
|
id="a_oiew_mkds_ppmn_aygs"
|
|
|
class="pir"
|
|
|
style="width: 100%; height: 170px"
|
|
|
/>
|
|
|
- <div v-if="tabData" style="width: 205px;color: #333">
|
|
|
+ <div v-if="tabData && this.pieData.filter(elm => elm.total).length" style="width: 205px;color: #333">
|
|
|
本月{{ active }}类:
|
|
|
<span v-for="(item, itemIndex ) in tabData.qualityProcessAndRdEfficiencyCopywriters" :key="itemIndex">
|
|
|
<span>{{ item.type }}</span>
|
|
@@ -23,45 +24,48 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="detail-wrapper">
|
|
|
- <div
|
|
|
- v-for="(
|
|
|
- item, itemIndex
|
|
|
- ) in tabData.qualityProcessAndRdEfficiencyCopywriters.filter(
|
|
|
- (elm) => (reportBizName ? elm.name === reportBizName : true)
|
|
|
- )"
|
|
|
- :key="itemIndex"
|
|
|
- style="margin-bottom: 10px"
|
|
|
- >
|
|
|
- <div class="fontWeight" style="margin-bottom: 0px">
|
|
|
- {{ item.type }}数据
|
|
|
- </div>
|
|
|
- <div style="margin-top: 5px;color: #333;padding-left: 10px">本月{{ item.type }}<span style="font-weight: 500">{{ item.total }}</span>次</div>
|
|
|
+ <div class="detail-wrapper" :style="{marginTop: this.pieData.filter(elm => elm.total).length ? '0' : '10px'}">
|
|
|
+ <div v-if="this.pieData.filter(elm => elm.total).length">
|
|
|
<div
|
|
|
- v-for="(elm, elmIndex) in item.subClientDetails"
|
|
|
- :key="elmIndex"
|
|
|
- style="margin-bottom: 10px;padding-left: 10px"
|
|
|
+ v-for="(
|
|
|
+ item, itemIndex
|
|
|
+ ) in tabData.qualityProcessAndRdEfficiencyCopywriters.filter(
|
|
|
+ (elm) => (reportBizName ? elm.name === reportBizName : true)
|
|
|
+ )"
|
|
|
+ :key="itemIndex"
|
|
|
+ style="margin-bottom: 10px"
|
|
|
>
|
|
|
- <div class="fontWeight" style="margin-top: 10px">
|
|
|
- {{ elm.subClientType }}{{ item.type }}{{ elm.total }}次
|
|
|
+ <div class="fontWeight" style="margin-bottom: 0px">
|
|
|
+ {{ item.type }}数据
|
|
|
</div>
|
|
|
+ <div style="margin-top: 5px;color: #333;padding-left: 10px">本月{{ item.type }}<span style="font-weight: 500">{{ item.total }}</span>次</div>
|
|
|
<div
|
|
|
- v-for="(subItem, subindex) in elm.details"
|
|
|
- :key="'sub_' + subindex"
|
|
|
- style="margin-bottom: 5px"
|
|
|
+ v-for="(elm, elmIndex) in item.subClientDetails"
|
|
|
+ :key="elmIndex"
|
|
|
+ style="margin-bottom: 10px;padding-left: 10px"
|
|
|
>
|
|
|
- <div v-if="subItem.name" style="margin-top: 5px">
|
|
|
- <span class="fontWeight">{{ subindex + 1 }}、</span
|
|
|
- >{{ subItem.name
|
|
|
- }}<span
|
|
|
-v-if="subItem.description"
|
|
|
- >({{ subItem.description }})</span
|
|
|
- >
|
|
|
+ <div style="margin-top: 10px;color: #333;">
|
|
|
+ <span style="color: #ED8F41;">{{ elm.subClientType }}</span>{{ item.type }}<span class="fontWeight">{{ elm.total }}</span>次
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="(subItem, subindex) in elm.details"
|
|
|
+ :key="'sub_' + subindex"
|
|
|
+ style="margin-bottom: 5px"
|
|
|
+ >
|
|
|
+ <div v-if="subItem.name" style="margin-top: 5px">
|
|
|
+ <span class="fontWeight">{{ subindex + 1 }}、</span
|
|
|
+ >{{ subItem.name
|
|
|
+ }}<span
|
|
|
+ v-if="subItem.description"
|
|
|
+ >({{ subItem.description }})</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="!this.pieData.filter(elm => elm.total).length" class="no-data">各业务线{{ active }}类质量流程&研发效率问题为 <span style="font-size: 16px">0</span>!</div>
|
|
|
</div>
|
|
|
</boxCom>
|
|
|
</div>
|
|
@@ -126,6 +130,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
echartsInit() {
|
|
|
+ this.pieData = this.tabData.qualityProcessAndRdEfficiencyCopywriters
|
|
|
this.option = {
|
|
|
color: [
|
|
|
'#5470c6',
|
|
@@ -155,7 +160,7 @@ export default {
|
|
|
// name: '访问来源',
|
|
|
type: 'pie',
|
|
|
radius: [0, '60%'],
|
|
|
- data: this.tabData.qualityProcessAndRdEfficiencyCopywriters,
|
|
|
+ data: this.pieData,
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
@@ -177,7 +182,7 @@ export default {
|
|
|
type: 'pie',
|
|
|
radius: ['61%', '75%'],
|
|
|
// data: this.subIndex > -1 && this.tabData.qualityProcessAndRdEfficiencyCopywriters[this.subIndex].subReportDetails,
|
|
|
- data: this.tabData.qualityProcessAndRdEfficiencyCopywriters.map(elm => {
|
|
|
+ data: this.pieData.map(elm => {
|
|
|
return elm.subReportDetails
|
|
|
}).reduce((a, b) => a.concat(b)).filter(elm => elm.total),
|
|
|
emphasis: {
|
|
@@ -224,8 +229,9 @@ export default {
|
|
|
this.tabData = this.pageData.filter(
|
|
|
(elm) => elm.clientType === this.active
|
|
|
)[0]
|
|
|
- this.option.series[0].data = this.tabData.qualityProcessAndRdEfficiencyCopywriters
|
|
|
- this.option.series[1].data = this.tabData.qualityProcessAndRdEfficiencyCopywriters.map(elm => {
|
|
|
+ this.pieData = this.tabData.qualityProcessAndRdEfficiencyCopywriters
|
|
|
+ this.option.series[0].data = this.pieData
|
|
|
+ this.option.series[1].data = this.pieData.map(elm => {
|
|
|
return elm.subReportDetails
|
|
|
}).reduce((a, b) => a.concat(b)).filter(elm => elm.total)
|
|
|
this.myChart.setOption(this.option)
|
|
@@ -237,9 +243,9 @@ export default {
|
|
|
<style scoped lang="less">
|
|
|
.echarts-wrapper {
|
|
|
margin-top: 0px;
|
|
|
-
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- color: #666;
|
|
|
+ // color: #666;
|
|
|
font-size: 12px;
|
|
|
.pie-wrapper {
|
|
|
width: 50%;
|
|
@@ -271,5 +277,12 @@ export default {
|
|
|
display: inline-block;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
+ .no-data {
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ position:absolute;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|