12345报告改版样式，类型由之前的柱状图改为表格的形式

src/views/modules/goverhotline/index.vue

@@ -31,11 +31,20 @@
               <p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
                 {{ report.overallOperation }}
               </p>
-              <h1 style="text-align: center;font-size: 20px;">行业领域分布情况</h1>
+
+              <el-table :data="eventCategorys" border class="m-table-item" style="width: 100%;margin-top: 20px;" @row-click="clickEventCategorys">
+                <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
+                <el-table-column prop="categoryName" align="center" label="类型" :show-overflow-tooltip="true"></el-table-column>
+                <el-table-column prop="subCategoryName" align="center" label="类型详细" :show-overflow-tooltip="true"></el-table-column>
+                <el-table-column prop="eventCount" align="center" label="事件数量" :show-overflow-tooltip="true"></el-table-column>
+                <el-table-column prop="percentage" align="center" label="占比" :show-overflow-tooltip="true"></el-table-column>
+              </el-table>
+
+
+              <h1 style="text-align: center;font-size: 20px;margin-top: 5%;">行业领域分布情况</h1>
 
               <div  v-if="categoryCountShow">
                 <div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
-                  <div id="categoryChart"></div>
                   <div id="categoryPie"></div>
                 </div>
               </div>
@@ -282,8 +291,8 @@ export default {
           addressData:[],
           mobileData:[],
           addressMobileData:[],
+          eventCategorys:[],
 
-          categoryChart: {},
           categoryPie: {},
           communityChart: {},
           departChart: {},
@@ -313,60 +322,6 @@ export default {
 
 
 
-          categoryChartOption: {
-                tooltip: {
-                    trigger: 'axis'
-                },
-                legend: {
-                    data: ['工单数量'],
-                    bottom: '10%',
-                    icon: 'rect',
-                    itemWidth: 20,
-                    itemHeight: 5,
-                    itemGap: 20,
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '25%',
-                    containLabel: true
-                },
-                toolbox: {},
-
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: true,
-                    data: [],
-                },
-                yAxis: {
-                    type: 'value',
-                    name: '单位(个)',
-                    min: 0,
-                },
-                series: [
-                    {
-                        name: '工单数量',
-                        type: 'bar',
-                        data: [],
-                        barWidth: 36, // 设置柱子宽度
-                        barCategoryGap: 0, // 设置柱子间的间隔为0
-                        itemStyle: {
-                            color: new echarts.graphic.LinearGradient(
-                                0, 0, 0, 1,
-                                [
-                                    { offset: 0, color: '#2c7cf2' }, // 从顶部开始
-                                    { offset: 1, color: '#80b3ff' } // 到底部结束
-                                ]
-                            )
-                        },
-                        showBackground: true,
-                        backgroundStyle: {
-                            color: '#fafbfc',
-                            opacity: "0.5"
-                        }
-                    },
-                ]
-            },
         
           categoryPieOption:{
             tooltip: {
@@ -647,15 +602,9 @@ export default {
       initEcharts() {
           
           if(this.categoryCountShow){
-            this.categoryChart = echarts.init(document.getElementById("categoryChart"));
-            this.categoryChart.setOption(this.categoryChartOption);
-            let than = this;
-            this.categoryChart.on("click", function (params) {
-              than.handelClickChart(params);
-            });
-
             this.categoryPie= echarts.init(document.getElementById("categoryPie"));
             this.categoryPie.setOption(this.categoryPieOption);
+            let than = this;
             this.categoryPie.on("click", function (params) {
               than.handelClickChart(params);
             });
@@ -693,9 +642,6 @@ export default {
           console.log("图表加载")
       },
       handleWindowResize() {
-          if (this.categoryChart) {
-              this.categoryChart.resize();
-          }
           if (this.categoryPie) {
               this.categoryPie.resize();
           }
@@ -793,9 +739,8 @@ export default {
           this.addressData=[]
           this.mobileData=[]
           this.addressMobileData=[]
+          this.eventCategorys=[]
 
-          this.categoryChartOption.series[0].data=[];
-          this.categoryChartOption.xAxis.data=[];
 
           this.categoryPieOption.series[0].data=[];
 
@@ -840,17 +785,6 @@ export default {
             Object.keys(this.report.categoryCount).forEach((key) => {
               const category = this.report.categoryCount[key];
 
-              // this.categoryChartOption.series[0].data.push(category.count);
-              this.categoryChartOption.xAxis.data.push(category.name);
-
-              const recObject = {
-                  id: category.id,
-                  value: category.count
-              };
-              this.categoryChartOption.series[0].data.push(recObject);
-
-
-
               const jsonObject = {
                   id: category.id,
                   name: category.name,
@@ -922,6 +856,12 @@ export default {
                 })
               : [];
 
+              this.eventCategorys = this.report.eventCategorys
+              ? this.report.eventCategorys.map(item => {
+                  return item;
+                })
+              : [];
+
               // 合并行
               this.getSpanArr(this.addressMobileData);
 
@@ -942,6 +882,12 @@ export default {
               }
         },
 
+        clickEventCategorys(row, column){
+          this.hiddenAllDialog();
+          this.showFormList = true;
+          this.recId = row.categoryId;
+        },
+
         clickAddressData(row, column){
           this.hiddenAllDialog();
           this.showFormList = true;
@@ -1050,11 +996,6 @@ export default {
 }
 
 
-#categoryChart {
-    width: 100%;
-    flex: 1;
-}
-
 #categoryPie {
     width: 100%;
     flex: 1;