完整月报查看：线上问题饼图

src/api/qualityMonthlyReport/edit.js

@@ -151,3 +151,13 @@ export function getOverallOverview(reportId) {
     method: 'get'
   })
 }
+
+// 获取线上问题饼图数据
+export function getOnlineProblemPieChart(reportId) {
+  return request({
+    url: projectManagementUrl + '/monthlyReport/getOnlineProblemPieChart?reportId=' + reportId,
+    timeout: '100000',
+    method: 'get'
+  })
+}
+

src/views/monthlyReport/childrenPage/editReport/components/MrTable/LinkEdit.vue

@@ -12,37 +12,37 @@
     </normal-dialog>
 </template>
 <script type="text/javascript">
-  import normalDialog from '@/components/dialog/normalDialog'
+import normalDialog from '@/components/dialog/normalDialog'
 
-  export default {
-    name: "LinkEdit",
-    data(){
-      return {
-        addresLink: '',
-        rowIndex: null,
-      }
+export default {
+  name: 'LinkEdit',
+  components: { normalDialog },
+  data() {
+    return {
+      addresLink: '',
+      rowIndex: null
+    }
+  },
+  methods: {
+    open(addresLink, rowIndex) {
+      this.$refs['dialogLink'].visible = true
+      this.addresLink = `${addresLink}`
+      this.rowIndex = rowIndex
     },
-    components: { normalDialog },
-    methods: {
-      open(addresLink, rowIndex){
-        this.$refs['dialogLink'].visible = true
-        this.addresLink = `${addresLink}`
-        this.rowIndex = rowIndex
-      },
-      confirmReport() {
-        this.$emit('change', {
-          rowIndex: this.rowIndex,
-          addresLink: this.addresLink
-        })
-        setTimeout(() => {
-          this.$refs['dialogLink'].visible = false
-        }, 100)
-      }
+    confirmReport() {
+      this.$emit('change', {
+        rowIndex: this.rowIndex,
+        addresLink: this.addresLink
+      })
+      setTimeout(() => {
+        this.$refs['dialogLink'].visible = false
+      }, 100)
     }
   }
+}
 </script>
 <style scoped lang="less">
   .issuse-warpper{
 
   }
-</style>
+</style>

src/views/monthlyReport/childrenPage/editReport/components/MrTable/index.vue

@@ -72,7 +72,7 @@
                         另存
                       </el-button>
                       </el-tooltip>
-                      <el-dropdown-menu slot="dropdown" v-if="subReportInfo">
+                      <el-dropdown-menu v-if="subReportInfo" slot="dropdown">
                         <el-dropdown-item v-for="subItem in subReportInfo.filter(subElm => subReportInfoFilter(subElm) )" :key="subItem.id" :command="subItem">
                           {{ subItem.reportName }}
                         </el-dropdown-item>
@@ -80,7 +80,7 @@
                     </el-dropdown>
                   </span>
                   <!--链接-->
-                  <span @click.stop v-else-if="btnItem.value === '链接' && isShowButton(scope.row, item)">
+                  <span v-else-if="btnItem.value === '链接' && isShowButton(scope.row, item)" @click.stop>
                     <el-popover
                       v-if="scope.row.operationTarget"
                       placement="bottom-start"
@@ -252,7 +252,7 @@
       <slot name="fixedText" />
       <markingIssues ref="markingIssues" />
       <Analysis ref="Analysis" @upData="upDataAnalysis" />
-      <LinkEdit ref="LinkEdit" @change="linkEditChange"/>
+      <LinkEdit ref="LinkEdit" @change="linkEditChange" />
     </span>
   </div>
 </template>
@@ -633,19 +633,19 @@ export default {
       }
     },
     subReportInfoFilter(elm) {
-      const { subReportId } = this.$route.query;
-      if(this.pageType === 'edit'){
+      const { subReportId } = this.$route.query
+      if (this.pageType === 'edit') {
         return `${elm.id}` !== `${subReportId}`
       }
       return this.tabsActive.indexOf(elm.id) < 0
     },
     // 修改链接
-    linkEditChange({rowIndex, addresLink}) {
+    linkEditChange({ rowIndex, addresLink }) {
       console.log(rowIndex, addresLink)
       this.tableData[rowIndex].operationTarget = addresLink
     },
     // 页面跳转
-    goto(url){
+    goto(url) {
       console.log(url)
       url && window.open(url, '_blank')
     }

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/box.vue

@@ -75,7 +75,7 @@ export default {
 /deep/ .el-tabs__nav-wrap::after {
   display: none;
 }
-/deep/.el-tabs__item{
+/deep/.el-tabs__item {
   padding: 0 5px;
 }
 </style>

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/index.vue

@@ -1,12 +1,9 @@
 <template>
   <div>
-    <headTitle
-      style="margin-top: 40px; margin-bottom: 10px;"
-      :title="title"
-    />
+    <headTitle style="margin-top: 40px; margin-bottom: 10px" :title="title" />
     <div class="OverallOverviewOfTheClient">
       <onlineQuestion />
-      <qualityProcess />
+      <!-- <qualityProcess /> -->
     </div>
   </div>
 </template>
@@ -77,10 +74,10 @@ export default {
     }
   }
 }
-/deep/.el-tabs__active-bar{
+/deep/.el-tabs__active-bar {
   display: none;
 }
-/deep/.el-tabs__nav-wrap::after{
+/deep/.el-tabs__nav-wrap::after {
   display: none;
 }
 </style>

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/onlineQuestion.vue

@@ -1,11 +1,47 @@
 <template>
-	<div>
-		<boxCom title="线上问题" @change="tabChange">
-			<div>线上问题：{{ active }}</div>
-		</boxCom>
-	</div>
+  <div>
+    <boxCom v-if="pageData" title="线上问题" page-data @change="tabChange">
+      <!-- <div>线上问题：{{ active }}</div> -->
+      <div class="echarts-wrapper">
+        <div class="pie-wrapper">
+          <div class="total-wrapper">
+            总数：<span class="total" @click.stop="reportBizName = ''">8</span>
+          </div>
+          <div
+            id="a_tylo_oo_2ppmn_ayghs"
+            class="pir"
+            style="width: 100%; height: 160px"
+          />
+        </div>
+        <div v-if="tabData" class="detail-wrapper">
+          <div>{{ tabData.priorityStr }}</div>
+          <div
+            v-for="item in tabData.onlineProblemCopywriters.filter((elm) =>
+              reportBizName ? elm.reportBizName === reportBizName : true
+            )"
+            :key="item.reportBizName"
+          >
+            <div>{{ item.reportBizName }}：{{ item.priorityStr }}</div>
+            <div v-for="(pitem, pIndex) in item.problemDetails" :key="pIndex">
+              <div class="fontWeight">{{ pitem.subClientType }}</div>
+              <div v-for="(dItem, dIndex) in pitem.detail" :key="dIndex">
+                <div>
+                  <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>
+    </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',
@@ -14,13 +50,124 @@ export default {
   },
   data() {
     return {
-      active: 'APP'
+      active: 'APP',
+      myChart: null,
+      pageData: null,
+      tabData: null,
+      reportBizName: null,
+      pieData: []
     }
   },
+  mounted() {
+    this.init()
+    // this.echartsInit()
+  },
   methods: {
+    async init() {
+      const res = await getOnlineProblemPieChart(this.$route.query.reportId)
+
+      console.log(res)
+
+      this.pageData = res.data.map((elm) => {
+        return {
+          ...elm,
+          onlineProblemCopywriters: elm.onlineProblemCopywriters.map((item) => {
+            return {
+              ...item,
+              value: item.total,
+              name: item.reportBizName
+            }
+          })
+        }
+      })
+
+      this.tabData = this.pageData.filter(
+        (elm) => elm.clientType === this.active
+      )[0]
+      this.$nextTick(() => {
+        this.echartsInit()
+      })
+    },
+    echartsInit() {
+      const option = {
+        color: [
+          '#5470c6',
+          '#91cc75',
+          '#fac858',
+          '#ee6666',
+          '#73c0de',
+          '#3ba272',
+          '#fc8452',
+          '#9a60b4',
+          '#ea7ccc'
+        ],
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '50%',
+            data: this.tabData.onlineProblemCopywriters,
+            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(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)
     }
   }
 }
 </script>
+
+<style scoped lang="less">
+.echarts-wrapper {
+  .fontWeight {
+    font-weight: 500;
+  }
+  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>

src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/qualityProcess.vue

@@ -1,9 +1,9 @@
 <template>
-	<div>
-		<boxCom title="质量流程&研发效率" @change="tabChange">
-			<div>质量流程&研发效率：{{ active }}</div>
-		</boxCom>
-	</div>
+  <div>
+    <boxCom title="质量流程&研发效率" @change="tabChange">
+      <div>质量流程&研发效率：{{ active }}</div>
+    </boxCom>
+  </div>
 </template>
 <script type="text/javascript">
 import boxCom from './box'

src/views/monthlyReport/childrenPage/editReport/index.vue

@@ -59,7 +59,7 @@
       <div class="body-wrapper">
         <div class="left-wrapper">
           <OverallOverviewOfTheServer v-if="pageType.search(/readAll/) > -1 && tabsActive.search(/服务端/) > -1" />
-          <OverallOverviewOfTheClient v-if="pageType === 'hhhhh' && pageType.search(/readAll/) > -1 && tabsActive.search(/客户端/) > -1" />
+          <OverallOverviewOfTheClient v-if="pageType.search(/readAll/) > -1 && tabsActive.search(/客户端/) > -1" />
           <div v-if="tabPageShow">
             <Core v-for="(item, index) in tabPageData.children" :key="item.domKey" :dom-index="index" :base-data="item" />
           </div>
@@ -412,13 +412,12 @@ export default {
       this.$store.dispatch('monthlyReportEdit/sendReport', {
         id: this.$route.query.reportId,
         callback: () => {
-          setTimeout(()=>{
+          setTimeout(() => {
             window.log({ c: 'report_edit', d: 'report_edit_send' })
             this.$store.commit('monthlyReportEdit/SET_LOADING', false)
             // this.$store.commit('monthlyReportEdit/SET_LOADING', false)
             this.$router.push({ path: '/monthlyReport/index' })
           }, 500)
-          
         }
       })
       // this.$store.commit('monthlyReportEdit/SET_LOADING', true)