thoth-frontend-test/src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/onlineQuestion.vue

<template>
  <div>
    <boxCom v-if="pageData" title="线上问题" :page-data="pageData" @change="tabChange">
      <!-- <div>线上问题：{{ active }}</div> -->
      <div class="echarts-wrapper">
        <div class="pie-wrapper">
          <div class="total-wrapper">
            总数：<span class="total" @click.stop="reportBizName = ''">{{ tabData.total }}</span>
          </div>
          <div
            id="a_tylo_oo_2ppmn_ayghs"
            class="pir"
            style="width: 100%; height: 160px"
          />

        </div>
        <div class="detail-wrapper">
          <div v-if="tabData && pieData.length">
          <div class="fontWeight" style="margin-bottom: 10px;">{{ tabData.title }}</div>
          <div
            v-for="item in tabData.onlineProblemCopywriters.filter((elm) =>
              reportBizName ? elm.reportBizName === reportBizName : true
            )"
            :key="item.reportBizName"
          >
            <div v-if="item.problemDetails.length" class="fontWeight" style="margin-top: 5px">{{ item.reportBizName }}：{{ item.priorityStr }}</div>
            <div v-for="(pitem, pIndex) in item.problemDetails" :key="pIndex">
              <div class="fontWeight" style="color: #ED8F41;margin-top: 10px;">{{ pitem.subClientType }}</div>
              <div v-for="(dItem, dIndex) in pitem.details" :key="dIndex" style="padding-left: 10px">
                <div style="margin-top: 5px;">
                  <span class="fontWeight">{{ dIndex + 1 }}、</span
                  ><span class="fontWeight">{{ dItem.priority }}问题：</span
                  >{{ dItem.problem }}
                </div>
                <div v-html="dItem.reason" />
              </div>
            </div>
          </div>
        </div>
</div>
        <div v-if="!pieData.length" class="no-data">各业务线{{ active }}类线上问题为 <span style="font-size: 16px">0</span>！</div>
      </div>
    </boxCom>
  </div>
</template>
<script type="text/javascript">
import { getOnlineProblemPieChart } from '@/api/qualityMonthlyReport/edit'
import echarts from 'echarts'
import boxCom from './box'
export default {
  name: 'OnlineQuestion',
  components: {
    boxCom
  },
  data() {
    return {
      active: 'APP',
      myChart: null,
      pageData: null,
      tabData: null,
      reportBizName: null,
      option: null,
      pieData: []
    }
  },
  mounted() {
    this.init()
    // this.echartsInit()
  },
  methods: {
    async init() {
      const res = await getOnlineProblemPieChart(this.$route.query.reportId)
      this.pageData = res.data.map((elm) => {
        return {
          ...elm,
          onlineProblemCopywriters: elm.onlineProblemCopywriters.map((item) => {
            return {
              ...item,
              value: item.total,
              name: item.reportBizName
            }
          })
        }
      })
      this.active = this.pageData[0].clientType
      this.tabData = this.pageData[0]
      this.$nextTick(() => {
        this.echartsInit()
      })
    },
    echartsInit() {
      this.pieData = this.tabData.onlineProblemCopywriters.filter(elm => elm.total)
      this.option = {
        color: [
          '#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
          '#fc8452',
          '#9a60b4',
          '#ea7ccc'
        ],
        tooltip: {
          trigger: 'item'
        },
        label: {
          position: 'inner',
          fontSize: 12
        },
        series: [
          {
            // name: '访问来源',
            type: 'pie',
            radius: '80%',
            data: this.pieData,
            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_tylo_oo_2ppmn_ayghs')
      )
      // 绘制图表
      this.myChart.setOption(this.option)
      this.myChart.on('click', (params) => {
        this.reportBizName = params.data.name
      })
    },
    tabChange(value) {
      this.active = value
      this.reportBizName = ''
      this.tabData = this.pageData.filter(
        (elm) => elm.clientType === this.active
      )[0]
      console.log(this.tabData)
      console.log(this.tabData.onlineProblemCopywriters)

      this.pieData = this.tabData.onlineProblemCopywriters.filter(elm => elm.total)
      this.option.series[0].data = this.pieData
      this.myChart.setOption(this.option)
    }
  }
}
</script>

<style scoped lang="less">
.echarts-wrapper {
  margin-top: -10px;
  font-size: 12px;
  display: flex;
  color: #333;
  position: relative;
  // font-size: 14px;
  .pie-wrapper {
    width: 50%;
    .total-wrapper {
      color: #666;
      margin-top: 10px;
      .total {
        color: #409eff;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  .detail-wrapper {
    width: 50%;
    padding: 0px 10px;
    height: 225px;
    margin-top: 20px;
    // margin-bottom: 10px;
    overflow-y: scroll;
  }
  .fontWeight {
    color: #333;
    font-weight: 500;
  }
  .no-data {
      top: 50%;
  left: 0;
  right: 0;
  text-align: center;
    position:absolute;
  }
}
</style>