组织机构学习数据报表 列表点击数据弹出层

src/views/report/Overvoewnew.vue

@@ -321,6 +321,14 @@
             </template>
           </draggable>
         </template>
+        <template #bodyCell="{ record, column }">
+          <template v-if="column.key === 'totalStudentNum'">
+            <div style="color: #02a7f0; cursor: pointer;" @click="openTaskCountModal">{{ record.totalStudentNum }}</div>
+          </template>
+          <template v-if="column.key === 'taskCount'">
+            <div style="color: #02a7f0; cursor: pointer;" @click="openTotalStudentNumModal">{{ record.taskCount }}</div>
+          </template>
+        </template>
 
 
       </a-table>
@@ -340,6 +348,36 @@
           />
         </div>
       </div>
+
+      <!-- 弹出层代码 -->
+      <a-modal
+          title="Title"
+          :visible="isModalVisible"
+          @cancel="onCancel"
+          @ok="onCancel"
+      >
+        <a-table
+          rowKey="id"
+          :columns="modelColumns"
+          :data-source="modelColumnsTableData"
+          :scroll="{ x: 400 }"
+          :pagination="false"
+        >
+          <!--          :loading="tableLoading"-->
+          <template v-slot:header>
+            <draggable
+                v-model="modelColumns"
+                item-key="key"
+                :list="modelColumns"
+                :group="{ name: 'columns', pull: 'clone', put: false }"
+            >
+              <template #item="{ element }">
+                <a-table-column :title="element.title" :dataIndex="element.dataIndex" :key="element.key"></a-table-column>
+              </template>
+            </draggable>
+          </template>
+        </a-table>
+      </a-modal>
     </div>
   </div>
 </template>
@@ -358,13 +396,23 @@ import {useStore} from "vuex";
 import PostSelectNew from "@/components/growthpath/PostSelect.vue";
 import OfficeSelect from "@/components/growthpath/OfficeSelect.vue";
 import draggable from 'vuedraggable';
+import {toDate} from "@/api/method";
+import DropDown from "@/components/common/DropDown.vue";
+import CommonStudent from "@/components/student/CommonStudent.vue";
+import OwnerTableModelStudent from "@/components/student/OwnerTableModelStudent.vue";
 // import {log} from "echarts/types/src/util/log";
 
 
 export default {
   name: "OvervoeW",
-  components: {OfficeSelect, PostSelectNew, draggable},
+  components: {OwnerTableModelStudent, CommonStudent, DropDown, OfficeSelect, PostSelectNew, draggable},
   setup() {
+
+    const handleCell = (record) => {
+      console.log('Cell clicked:', record);
+      // 在这里添加你的单击事件逻辑
+    };
+
     // 组织树数据
     const orgId = ref(null);
 
@@ -380,6 +428,11 @@ export default {
     const pieChart = ref(null);
     let myPieChart = null;
 
+    function handleCellClick() {
+      console.log("点击到了-----------------")
+      alert("点击到了-----------------")
+    }
+
     onMounted(() => {
       console.log(88888888888)
       console.log(funnelChart.value)
@@ -638,8 +691,254 @@ export default {
       content_type: null,
       categoryTypeId: null,
       tableSorts: [],
+      isModalVisible: false,
+      selectedRecord: null
     });
 
+    const modelColumnsTableData = ref([])
+
+    //获取点击任务总数数据打开列表
+    const getModelColumnsTableData = () => {
+      modelColumns.value = [
+        {
+          title: "阶段名称",
+          dataIndex: "stageName",
+          key: "stageName",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "任务名称",
+          dataIndex: "taskName",
+          key: "taskName",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "是否必须",
+          dataIndex: "isRequestTask",
+          key: "isRequestTask",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "开始时间",
+          dataIndex: "startTime",
+          key: "startTime",
+          width: 120,
+          ellipsis: true,
+          sorter: true,
+        },
+        {
+          title: "学习人数",
+          dataIndex: "totalParticipantNum",
+          key: "totalParticipantNum",
+          width: 120,
+          ellipsis: true,
+          sorter: true,
+        },
+        {
+          title: "完成人数",
+          dataIndex: "completedParticipantNum",
+          key: "completedParticipantNum",
+          width: 120,
+          ellipsis: true,
+          sorter: true,
+        },
+        {
+          title: "进行中人数",
+          dataIndex: "inProgressParticipantNum",
+          key: "inProgressParticipantNum",
+          width: 120,
+          ellipsis: true,
+          sorter: true,
+        },
+        {
+          title: "未开始人数",
+          dataIndex: "notStartedParticipantNum",
+          key: "notStartedParticipantNum",
+          width: 120,
+          ellipsis: true,
+          sorter: true,
+        },
+        {
+          title: "任务完成率",
+          dataIndex: "taskCompletedRate",
+          key: "taskCompletedRate",
+          width: 120,
+          ellipsis: true,
+          sorter: true,
+        }
+      ]
+      axios({
+        method: "get",
+        url: "/reportsnake/report/projectTaskReportList",
+        // params: { manager: true },
+        data: {
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+          createName: state.creator,
+          startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
+          endCreateTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
+        },
+        // headers: {
+        //   token: Cookies.get("token"),
+        // },
+      }).then((res) => {
+        console.log(res)
+        if (!res && !res.data) {
+          message.error("服务器异常");
+          return;
+        }
+        const resData = res.data;
+        if (resData.code != 200) {
+          message.error(resData.message)
+          return;
+        }
+        modelColumnsTableData.value = resData.data?.records?.map((item) => {
+          return {
+            key: item.id,
+            ...item,
+          };
+        });
+        console.log(modelColumnsTableData)
+      });
+    }
+
+    //获取点击报名人数数据打开列表
+    const getTaskCountTableData = () => {
+      modelColumns.value = [
+        {
+          title: "工号",
+          dataIndex: "studentUserNo",
+          key: "studentUserNo",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "姓名",
+          dataIndex: "studentName",
+          key: "studentName",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "率属组织",
+          dataIndex: "studentOrgName",
+          key: "studentOrgName",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "所在岗位",
+          dataIndex: "studentJobName",
+          key: "studentJobName",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "所在band",
+          dataIndex: "bandInfo",
+          key: "bandInfo",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "完成进度",
+          dataIndex: "completionProgress",
+          key: "completionProgress",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "总任务完成率",
+          dataIndex: "taskCompletedRate",
+          key: "taskCompletedRate",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "必修完成率",
+          dataIndex: "requiredTaskCompletedRate",
+          key: "requiredTaskCompletedRate",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "课程完成率",
+          dataIndex: "courseCompletedRate",
+          key: "courseCompletedRate",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "考试通过率",
+          dataIndex: "examPassRate",
+          key: "examPassRate",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "作业完成率",
+          dataIndex: "homeworkCompletedRate",
+          key: "homeworkCompletedRate",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "最近学习时间",
+          dataIndex: "latestStudyTime",
+          key: "latestStudyTime",
+          width: 120,
+          ellipsis: true,
+        },
+      ]
+
+      axios({
+        method: "get",
+        url: "/reportsnake/report/projectStudentReportList",
+        // params: { manager: true },
+        data: {
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+          createName: state.creator,
+          startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
+          endCreateTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
+        },
+        // headers: {
+        //   token: Cookies.get("token"),
+        // },
+      }).then((res) => {
+        console.log(res)
+        if (!res && !res.data) {
+          message.error("服务器异常");
+          return;
+        }
+        const resData = res.data;
+        if (resData.code != 200) {
+          message.error(resData.message)
+          return;
+        }
+        modelColumnsTableData.value = resData.data?.records?.map((item) => {
+          return {
+            key: item.id,
+            ...item,
+          };
+        });
+        console.log(modelColumnsTableData)
+      });
+    }
+
+    const openTotalStudentNumModal = () => {
+      //调用报名任务列表
+      getModelColumnsTableData()
+      state.isModalVisible = true
+    }
+
+    const openTaskCountModal = () => {
+      //调用任务总数列表
+      getTaskCountTableData()
+      state.isModalVisible = true
+    }
+
     const onDragEnd = (event) => {
       const newColumns = [...columns.value];
       const [movedColumn] = newColumns.splice(event.oldIndex, 1);
@@ -681,7 +980,6 @@ export default {
     function afterApiPage(res) {
       console.log(res)
       if (res && res.data) {
-        let resData = res.data;
         if (res.code == 200) {
           let list = res.data?.records?.map((item) => {
             return {
@@ -689,13 +987,10 @@ export default {
               ...item,
             };
           });
-          alert("列表出现")
-          console.log("list出现")
-          console.log(list)
           tableData.value = list;
-          state.tableDataTotal = resData.data?.total;
+          state.tableDataTotal = res.data?.total;
         } else {
-          message.error(resData.message);
+          message.error(res.message);
         }
       } else {
         message.error("服务器繁忙，请稍后重试");
@@ -771,7 +1066,7 @@ export default {
       getTabData();
     };
     const reset_ = () => {
-      debugger;
+      // debugger;
       state.tableLoading = true;
       state.creator = "";
       state.publishTime = [];
@@ -977,6 +1272,7 @@ export default {
       getTableData();
       getTabData();
     };
+    const modelColumns = ref(null)
     // cloumns 表头
     const columns = ref([]);
     const tabData = ref([
@@ -1085,12 +1381,13 @@ export default {
             align: "center",
           },
           {
-            title: "总人数",
+            title: "报名人数",
             dataIndex: "totalStudentNum",
             ellipsis: true,
             key: "totalStudentNum",
             width: 120,
             align: "center",
+            scopedSlots: { customRender: "action" },
           },
           {
             title: "学习人数",
@@ -2302,7 +2599,14 @@ export default {
       return recursiveSearch(data, value, '');
     }
 
+    const onCancel = () => {
+      state.isModalVisible = false
+      modelColumns.value = null
+      modelColumnsTableData.value = null
+    }
+
     return {
+      handleCellClick,
       exportClickAll,
       getTabData,
       reset,
@@ -2325,7 +2629,13 @@ export default {
       handleTableChange,
       funnelChart,
       chart,
-      pieChart
+      pieChart,
+      openTotalStudentNumModal,
+      openTaskCountModal,
+      onCancel,
+      modelColumns,
+      modelColumnsTableData,
+      getModelColumnsTableData,
     };
   },
 };