|
|
@@ -1,12 +1,48 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <boxCom title="质量流程&研发效率" @change="tabChange">
|
|
|
- <div>质量流程&研发效率：{{ active }}</div>
|
|
|
+ <boxCom title="质量流程&研发效率" @change="tabChange" :page-data="pageData">
|
|
|
+ <!-- <div>质量流程&研发效率：{{ active }}</div> -->
|
|
|
+ <div class="echarts-wrapper" v-if="tabData">
|
|
|
+ <div class="pie-wrapper">
|
|
|
+ <div class="total-wrapper">
|
|
|
+ 总数：<span class="total" @click.stop="reportBizName = ''">{{tabData.total}}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="a_oiew_mkds_ppmn_aygs"
|
|
|
+ class="pir"
|
|
|
+ style="width: 100%; height: 130px"
|
|
|
+ />
|
|
|
+ <div v-if="tabData">本月 {{active}} 类：<span v-for="(item, index) in tabData.qualityProcessAndRdEfficiencyCopywriters" :key="index">
|
|
|
+ <span>{{item.type}}</span><span :class="{'fontWeight': true,'red': item.total > 0}">{{item.total}}次</span><span>{{index < tabData.qualityProcessAndRdEfficiencyCopywriters.length - 1 ? '，' : '。'}}</span>
|
|
|
+ </span> </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-wrapper">
|
|
|
+ <div v-for="item in tabData.qualityProcessAndRdEfficiencyCopywriters.filter((elm) =>
|
|
|
+ reportBizName ? elm.name === reportBizName : true
|
|
|
+ )" style="margin-bottom: 20px">
|
|
|
+ <div class="fontWeight" style="margin-bottom: 10px">{{item.type}}数据</div>
|
|
|
+ <div>本月{{item.type}}{{item.total}}次</div>
|
|
|
+ <div v-for="elm in item.subClientDetails" style="margin-bottom: 10px">
|
|
|
+ <div class="fontWeight">
|
|
|
+ {{elm.subClientType}}{{item.type}}{{elm.total}}次
|
|
|
+ </div>
|
|
|
+ <div v-for="(subItem, subIndex) in elm.details" style="margin-bottom: 5px">
|
|
|
+ <div v-if="subItem.name">
|
|
|
+ <span class="fontWeight">{{subIndex + 1}}、</span>{{subItem.name}}<span v-if="subItem.description">（{{subItem.description}}）</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</boxCom>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script type="text/javascript">
|
|
|
import boxCom from './box'
|
|
|
+import echarts from 'echarts'
|
|
|
+import {getQualityProcessAndRdEfficiencyPieData} from '@/api/qualityMonthlyReport/edit'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'OnlineQuestion',
|
|
|
components: {
|
|
|
@@ -14,13 +50,188 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- active: 'APP'
|
|
|
+ active: 'APP',
|
|
|
+ myChart: null,
|
|
|
+ pageData: null,
|
|
|
+ tabData: null,
|
|
|
+ reportBizName: null,
|
|
|
+ subIndex: -1,
|
|
|
+ option: null,
|
|
|
+ subReportDetails: null,
|
|
|
+ pieData: []
|
|
|
}
|
|
|
},
|
|
|
+ mounted(){
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ async init(){
|
|
|
+ const res = await getQualityProcessAndRdEfficiencyPieData(this.$route.query.reportId)
|
|
|
+ this.pageData = res.data.map((elm) => {
|
|
|
+ return {
|
|
|
+ ...elm,
|
|
|
+ qualityProcessAndRdEfficiencyCopywriters: elm.qualityProcessAndRdEfficiencyCopywriters.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ subReportDetails: item.subReportDetails.map(subItem => {
|
|
|
+ return {
|
|
|
+ ...subItem,
|
|
|
+ value: subItem.total,
|
|
|
+ name: subItem.subReportName
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ value: item.total,
|
|
|
+ name: item.type
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.active = this.pageData[0].clientType
|
|
|
+ this.tabData = this.pageData[0]
|
|
|
+ console.log(this.tabData);
|
|
|
+ // this.subIndex = 0
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.echartsInit()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ echartsInit() {
|
|
|
+ this.option = {
|
|
|
+ color: [
|
|
|
+ '#5470c6',
|
|
|
+ '#91cc75',
|
|
|
+ '#fac858',
|
|
|
+ '#ee6666',
|
|
|
+ '#73c0de',
|
|
|
+ '#3ba272',
|
|
|
+ '#fc8452',
|
|
|
+ '#9a60b4',
|
|
|
+ '#ea7ccc'
|
|
|
+ ],
|
|
|
+ // legend: {
|
|
|
+ // type: 'scroll',
|
|
|
+ // orient: 'vertical',
|
|
|
+ // left: 0,
|
|
|
+ // top: 20,
|
|
|
+ // bottom: 20,
|
|
|
+ // width: 30,
|
|
|
+ // data: this.tabData.qualityProcessAndRdEfficiencyCopywriters.map(elm => elm.name)
|
|
|
+ // },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [0, '60%'],
|
|
|
+ data: this.tabData.qualityProcessAndRdEfficiencyCopywriters,
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ position: 'inner',
|
|
|
+ fontSize: 10,
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['61%', '80%'],
|
|
|
+ // data: this.subIndex > -1 && this.tabData.qualityProcessAndRdEfficiencyCopywriters[this.subIndex].subReportDetails,
|
|
|
+ data: this.subReportDetails,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ // console.log(this.tabData)
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ this.myChart = echarts.init(
|
|
|
+ document.getElementById('a_oiew_mkds_ppmn_aygs')
|
|
|
+ )
|
|
|
+
|
|
|
+ // 绘制图表
|
|
|
+ this.myChart.setOption(this.option)
|
|
|
+ this.myChart.on('click', (params) => {
|
|
|
+ // console.log(params.data);
|
|
|
+ // console.log();
|
|
|
+ const list = this.tabData.qualityProcessAndRdEfficiencyCopywriters
|
|
|
+ console.log(list);
|
|
|
+ for (var i = list.length - 1; i >= 0; i--) {
|
|
|
+ if(list[i].name === params.data.name){
|
|
|
+ this.reportBizName = params.data.name
|
|
|
+ console.log(params.data.name);
|
|
|
+ this.subIndex = i
|
|
|
+ this.subReportDetails = list[i].subReportDetails
|
|
|
+// this.myChart.setOption({...option,
|
|
|
+// series:[
|
|
|
+// option.series
|
|
|
+// ]})
|
|
|
+ this.option.series[1].data = this.subReportDetails
|
|
|
+ this.myChart.setOption(this.option)
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
tabChange(value) {
|
|
|
this.active = value
|
|
|
+ this.reportBizName = ''
|
|
|
+ console.log(this.myChart);
|
|
|
+
|
|
|
+ this.tabData = this.pageData.filter(
|
|
|
+ (elm) => elm.clientType === this.active
|
|
|
+ )[0]
|
|
|
+ this.option.series[1].data = null
|
|
|
+ this.myChart.setOption(this.option)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.echarts-wrapper {
|
|
|
+ margin-top: -10px;
|
|
|
+ .fontWeight {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .red {
|
|
|
+ color: red
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ .pie-wrapper {
|
|
|
+ width: 50%;
|
|
|
+ .total-wrapper {
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ .total {
|
|
|
+ color: #409eff;
|
|
|
+ font-size: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-wrapper {
|
|
|
+ width: 50%;
|
|
|
+ padding: 10px;
|
|
|
+ height: 200px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
洪海涛