新增百分比展示和 合计行

src/views/course/courseUserStatistics/qw/my.vue

@@ -19,7 +19,14 @@
       </el-form-item>
     </el-form>
 
-    <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange"  show-summary height="600">
+    <el-table 
+    border 
+    v-loading="loading" 
+    :data="courseWatchLogList"
+    @selection-change="handleSelectionChange" 
+    :show-summary="true"
+    :summary-method="getSummaries"
+    ref="table1">
       <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="企微员工名称" align="center" prop="qwUserName" />
 
@@ -205,6 +212,56 @@ export default {
     });
   },
   methods: {
+     getSummaries(param) {
+      let totalNum = 0;
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "总计";
+          return;
+        }
+
+        const values = data.map((item) => Number(item[column.property]));
+        if (!values.every((value) => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          //第三列计数为进线数量和
+          if(index === 3){
+            totalNum = sums[index];
+          }
+          if(index > 3 && totalNum != 0){
+              sums[index] = sums[index] + "("+ ((sums[index] / totalNum) * 100).toFixed(2)  + "%)"
+          }
+          if (
+            column.property === "firstOnline" ||
+            column.property === "firstOver" ||
+            column.property === "d1Online" ||
+            column.property === "d1Over" ||
+            column.property === "sign" ||
+            column.property === "interact" ||
+            column.property === "a" ||
+            column.property === "b" ||
+            column.property === "c" ||
+            column.property === "d" ||
+            column.property === "e" ||
+            column.property === "black" ||
+            column.property === "los" ||
+            column.property === "del"
+          ) {
+          }
+        } else {
+          sums[index] = "";
+        }
+      });
+      return sums;
+    },
     courseChange(row){
       this.queryParams.videoId=null;
       if(row === ''){
@@ -241,6 +298,11 @@ export default {
         this.total = response.total;
         this.loading = false;
       });
+       this.$nextTick(() => {
+        setTimeout(() => {
+          this.$refs.table1?.doLayout();
+        }, 2000);
+      });
     },
     // 取消按钮
     cancel() {

src/views/course/courseWatchLog/qw/statistics.vue

@@ -54,7 +54,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange"  show-summary>
+    <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange"  show-summary :summary-method="getSummaries" >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="企微员工名称" align="center" prop="qwUserName" />
       <el-table-column label="发课时间" align="center" prop="createTime"/>
@@ -159,6 +159,66 @@ export default {
     });
   },
   methods: {
+     getSummaries(param) {
+      let totalNum = 0;
+      const { columns, data } = param;
+      const sums = [];
+      let totalOnline = 0;
+      let totalFinishCourse = 0;
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "总计";
+          return;
+        }
+        const values = data.map((item) => Number(item[column.property]));
+        if (!values.every((value) => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          if(index > 3 && totalNum != 0){
+              sums[index] = sums[index] + "("+ ((sums[index] / totalNum) * 100).toFixed(2)  + "%)"
+          }
+          if( column.property=="videoName"){
+            sums[index] = "";
+          }
+          if (
+            column.property === "type3" ||
+            column.property === "type1" ||
+            column.property === "type2" ||
+            column.property === "type4" ||
+            column.property === "sendNumber" ||
+            column.property === "isUserWaitNumber" ||
+            column.property === "noUserWaitNumber" ||
+            column.property === "onLineRate" ||
+            column.property === "finishedRate" ||
+            column.property === "redAmount" 
+          ) {
+          }
+        } else {
+          sums[index] = "";
+          if(index === 12 || index === 13){
+            //  let numbers = data.map(item => {
+            //   return parseFloat(item[column.property].replace('%', '')) || 0; // 处理空值或无效值
+            // });
+            // let sumRates = numbers.reduce((acc, curr) => acc + curr, 0);
+            // console.log("index:" + index + " rates：" + sumRates + " data.length:" + data.length);
+            if(index === 12 && !!sums[9]){
+              let sumsNum = sums[6] + sums[7] + sums[8];
+              sums[index] = (sumsNum * 100 / sums[9]).toFixed(2) + '%';
+            } else if(index === 13 && !!sums[9]){
+              sums[index] =  (sums[7] * 100 / sums[9]).toFixed(2) + '%';
+            }
+          } 
+        }
+      });
+      console.log(sums);
+      return sums;
+    },
     courseChange(row){
       this.queryParams.videoId=null;
       if(row === ''){