|
|
@@ -1,12 +1,76 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <boxCom title="质量流程&研发效率" @change="tabChange">
|
|
|
- <div>质量流程&研发效率：{{ active }}</div>
|
|
|
- </boxCom>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <boxCom title="质量流程&研发效率" :page-data="pageData" @change="tabChange">
|
|
|
+ <!-- <div>质量流程&研发效率：{{ active }}</div> -->
|
|
|
+ <div v-if="tabData" class="echarts-wrapper">
|
|
|
+ <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, itemIndex ) in tabData.qualityProcessAndRdEfficiencyCopywriters" :key="itemIndex">
|
|
|
+ <span>{{ item.type }}</span>
|
|
|
+ <span :class="{ fontWeight: true, red: item.total > 0 }">{{ item.total }}次</span>
|
|
|
+ <span>{{ tabData.qualityProcessAndRdEfficiencyCopywriters.length - 1 > itemIndex ? '，': '。' }}</span>
|
|
|
+ </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: 20px"
|
|
|
+ >
|
|
|
+ <div class="fontWeight" style="margin-bottom: 10px">
|
|
|
+ {{ item.type }}数据
|
|
|
+ </div>
|
|
|
+ <div>本月{{ item.type }}{{ item.total }}次</div>
|
|
|
+ <div
|
|
|
+ v-for="(elm, elmIndex) in item.subClientDetails"
|
|
|
+ :key="elmIndex"
|
|
|
+ style="margin-bottom: 10px"
|
|
|
+ >
|
|
|
+ <div class="fontWeight">
|
|
|
+ {{ elm.subClientType }}{{ item.type }}{{ elm.total }}次
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="(subItem, subindex) in elm.details"
|
|
|
+ :key="'sub_' + subindex"
|
|
|
+ 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 +78,191 @@ 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>
|
qinzhipeng_v@didiglobal.com