From 3f3e8506ddf70014b6b0491a16413b56fd9ceb85 Mon Sep 17 00:00:00 2001
From: yztopen <14961964+yztopen@user.noreply.gitee.com>
Date: Thu, 5 Jun 2025 11:32:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E5=91=8A=E7=BB=B4=E6=8A=A4=E5=8A=A0?=
 =?UTF-8?q?=E7=9A=84=E5=87=A0=E4=B8=AAecharts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/Overvoewnew.vue           |  374 +++-
 src/views/reportcenter/Overvoewnewcopy.vue | 2201 ++++++++++++++++++++
 2 files changed, 2574 insertions(+), 1 deletion(-)
 create mode 100644 src/views/reportcenter/Overvoewnewcopy.vue

diff --git a/src/views/report/Overvoewnew.vue b/src/views/report/Overvoewnew.vue
index cfa3c0bd..402c4293 100644
--- a/src/views/report/Overvoewnew.vue
+++ b/src/views/report/Overvoewnew.vue
@@ -1,6 +1,134 @@
 <template>
   <!-- 概览! -->
   <div class="overvoew">
+    <!-- 顶部统计卡片 -->
+    <div class="stat-cards">
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>项目总数</span>
+          <a-icon type="file-text"/>
+        </template>
+        <a-statistic
+            :value="82"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>任务总数</span>
+          <a-icon type="folder"/>
+        </template>
+        <a-statistic
+            :value="1091"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>参加人数</span>
+          <a-icon type="user"/>
+        </template>
+        <a-statistic
+            :value="100"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>学习人数</span>
+          <a-icon type="graduation-cap"/>
+        </template>
+        <a-statistic
+            :value="68"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>完成人数</span>
+          <a-icon type="check-circle"/>
+        </template>
+        <a-statistic
+            :value="34"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+    </div>
+
+    <!-- 图表区域 -->
+    <div class="charts-row">
+      <!-- 参与漏斗图 -->
+      <a-card
+          class="chart-card"
+          title="学员完成项目漏斗"
+          :bordered="false"
+      >
+        <div ref="funnelChart" style="width: 100%; height: 300px;"></div>
+      </a-card>
+
+      <!-- 完成比例柱状图 -->
+      <a-card
+          class="chart-card"
+          title="完成比例"
+          :bordered="false"
+      >
+        <div ref="chart" style="width: 100%; height: 400px;"></div>
+      </a-card>
+
+      <!-- 项目概览饼状图 -->
+      <a-card
+          class="chart-card"
+          title="项目概览"
+          :bordered="false"
+      >
+        <div ref="pieChart" style="width: 100%; height: 400px;"></div>
+      </a-card>
+
+      <!-- 创建人归属 -->
+      <a-card
+          class="chart-card"
+          title="创建人归属"
+          :bordered="false"
+      >
+        <div class="tags-cloud">
+          <div class="tag">李子轩</div>
+          <div class="tag">刘俊琪</div>
+          <div class="tag">林雨桐</div>
+          <div class="tag">陆羽泽</div>
+          <div class="tag">张一诺</div>
+          <div class="tag">赵昊然</div>
+          <div class="tag">林子涵</div>
+          <div class="tag">徐祥瑞</div>
+          <div class="tag">吴梓涵</div>
+          <div class="tag">杨浩宇</div>
+        </div>
+      </a-card>
+    </div>
+    <!-- todo 上边是新加的数据 -->
     <!-- 以下为顶部搜索框 -->
     <div class="filterShow">
       <div class="select" v-if="currentTab !== 6">
@@ -216,7 +344,8 @@
   </div>
 </template>
 <script>
-import {ref, toRefs, reactive, onMounted, computed} from "vue";
+import * as echarts from 'echarts';
+import {ref, toRefs, reactive, onMounted, computed, onUnmounted} from "vue";
 import * as api from "../../api/indexOvervoew";
 import downLoad from "../../utils/downLoad";
 import axios from "axios";
@@ -1886,6 +2015,7 @@ export default {
       return dayjs(time).format(format);
     };
 
+
     //后续抽到 工具类中
     function formatTextRate(value) {
       if (!value && value != 0) {
@@ -1924,6 +2054,248 @@ export default {
       return recursiveSearch(data, value, '');
     }
 
+
+    // 组织树数据
+    const orgId = ref(null);
+
+    // 漏斗图数据
+    const funnelChart = ref(null);
+    let myFunnelChart = null;
+
+    // 柱状图数据
+    const chart = ref(null);
+    let myChart = null;
+
+    // 饼状图数据
+    const pieChart = ref(null);
+    let myPieChart = null;
+
+    onMounted(() => {
+      // 初始化漏斗图
+      myFunnelChart = echarts.init(funnelChart.value);
+      const funnelOption = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} 人 ({d}%)'
+        },
+        legend: {
+          orient: 'horizontal',
+          bottom: 0,
+          data: ['参加人数', '学习人数', '完成人数']
+        },
+        series: [
+          {
+            name: '学员完成项目漏斗',
+            type: 'funnel',
+            left: '10%',
+            top: '50%',
+            bottom: '5%',
+            width: '80%',
+            min: 0,
+            max: 100,
+            minSize: '0%',
+            maxSize: '100%',
+            sort: 'descending',
+            gap: 2,
+            label: {
+              show: true,
+              position: 'inside',
+              formatter: '{b}: {c} 人'
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: 'solid'
+              }
+            },
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 1
+            },
+            emphasis: {
+              label: {
+                fontSize: 14
+              }
+            },
+            data: [
+              {value: 100, name: '参加人数', itemStyle: {color: '#5470c6'}},
+              {value: 50, name: '学习人数', itemStyle: {color: '#91cc75'}},
+              {value: 20, name: '完成人数', itemStyle: {color: '#fac858'}}
+            ]
+          }
+        ]
+      };
+      myFunnelChart.setOption(funnelOption);
+
+      // 初始化柱状图
+      myChart = echarts.init(chart.value);
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['学习率', '平均学习率', '整体完成率'],
+          bottom: 0
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['0.8']
+        },
+        yAxis: {
+          type: 'value',
+          min: 0.4,
+          max: 0.9,
+          interval: 0.025,
+          axisLabel: {
+            formatter: '{value}'
+          }
+        },
+        series: [
+          {
+            name: '学习率',
+            type: 'bar',
+            data: [0.775],
+            itemStyle: {
+              color: '#5470c6'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{c}'
+            }
+          },
+          {
+            name: '平均学习率',
+            type: 'bar',
+            data: [0.65],
+            itemStyle: {
+              color: '#91cc75'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{c}'
+            }
+          },
+          {
+            name: '整体完成率',
+            type: 'bar',
+            data: [0.5],
+            itemStyle: {
+              color: '#fac858'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{c}'
+            }
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+
+      // 初始化环形图
+      myPieChart = echarts.init(pieChart.value);
+      const pieOption = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'horizontal',
+          bottom: 0,
+          data: ['面授课程数', '在线课程数']
+        },
+        series: [
+          {
+            name: '项目概览',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ['50%', '50%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '18',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: 707.1, name: '面授课程数', itemStyle: {color: '#5470c6'}},
+              {value: 292.9, name: '在线课程数', itemStyle: {color: '#91cc75'}}
+            ]
+          }
+        ]
+      };
+
+      // 添加环形图中心文本
+      const centerText = {
+        name: '概览总数',
+        value: 1028,
+        itemStyle: {
+          normal: {
+            color: 'transparent',
+            label: {
+              show: true,
+              position: 'center',
+              formatter: function () {
+                return '{a|概览总数}\n{b|1,028}';
+              },
+              rich: {
+                a: {
+                  color: '#333',
+                  fontSize: 14,
+                  lineHeight: 20
+                },
+                b: {
+                  color: '#333',
+                  fontSize: 16,
+                  fontWeight: 'bold',
+                  lineHeight: 20
+                }
+              }
+            }
+          }
+        }
+      };
+      pieOption.series[0].data.push(centerText);
+
+      myPieChart.setOption(pieOption);
+
+      // 窗口大小变化时重新调整图表大小
+      window.addEventListener('resize', () => {
+        myChart?.resize();
+        myPieChart?.resize();
+        myFunnelChart?.resize();
+      });
+    });
+
+    onUnmounted(() => {
+      // 组件销毁前移除事件监听器
+      window.removeEventListener('resize', () => {
+      });
+    });
+
     return {
       exportClickAll,
       getTabData,
diff --git a/src/views/reportcenter/Overvoewnewcopy.vue b/src/views/reportcenter/Overvoewnewcopy.vue
new file mode 100644
index 00000000..cfa3c0bd
--- /dev/null
+++ b/src/views/reportcenter/Overvoewnewcopy.vue
@@ -0,0 +1,2201 @@
+<template>
+  <!-- 概览! -->
+  <div class="overvoew">
+    <!-- 以下为顶部搜索框 -->
+    <div class="filterShow">
+      <div class="select" v-if="currentTab !== 6">
+        <a-cascader
+            change-on-select
+            :options="option"
+            @change="orgChange"
+            v-model:value="orgId"
+            style="width: 100%; border-radius:3px"
+            placeholder="请选择归属组织"
+            :allowClear=false
+            :fieldNames="{
+            label: 'orgName',
+            value: 'organizationId',
+            children: 'childList',
+          }"
+        >
+        </a-cascader>
+      </div>
+      <div class="select" v-if="currentTab !== 6">
+        <a-input
+            style="width: 100%; height: 40px; border-radius: 3px"
+            placeholder="请输入名称"
+            allowClear
+            showSearch
+            v-model:value="name"
+        >
+        </a-input>
+      </div>
+      <div class="select" v-if="[0, 1].includes(currentTab) ">
+        <a-select v-model:value="status"  style="width: 100%; height: 40px; border-radius: 3px"
+                  placeholder="请选择状态" allowClear :options="statusList">
+        </a-select>
+      </div>
+      <div class="select" v-if="[3].includes(currentTab) ">
+        <a-tree-select
+            :getPopupContainer="
+                (triggerNode) => triggerNode.parentNode || document.body
+              "
+            v-model:value="categoryTypeId"
+            show-search
+            style="width: 100%"
+            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+            placeholder="请选择内容分类"
+            allow-clear
+            tree-default-expand-all
+            :fieldNames="{
+                children: 'children',
+                label: 'name',
+                value: 'code',
+              }"
+            :tree-data="sysTypeOptions"
+        >
+        </a-tree-select>
+      </div>
+      <div class="select" v-if="currentTab !== 6">
+        <a-input
+            style="width: 100%; height: 40px; border-radius: 3px"
+            placeholder="请输入创建者"
+            v-model:value="creator"
+            allowClear
+            showSearch
+        >
+        </a-input>
+      </div>
+      <div class="select" v-if="currentTab === 2">
+        <a-input
+            style="width: 100%; height: 40px; border-radius: 3px"
+            placeholder="请输入讲师"
+            v-model:value="teacherName"
+            allowClear
+            showSearch
+        >
+        </a-input>
+      </div>
+      <div class="select" v-if="currentTab==0">
+        <a-input
+            style="width: 100%; height: 40px; border-radius: 3px"
+            placeholder="请输入项目经理"
+            v-model:value="mangerName"
+            allowClear
+            showSearch
+        >
+        </a-input>
+      </div>
+      <div class="select"  style="height: 40px" v-if="currentTab === 6">
+        <PostSelectNew v-model:value="stdPosition" style="width: 100%"> </PostSelectNew>
+      </div>
+      <div class="select" style="height: 40px" v-if="currentTab === 6">
+        <OfficeSelect v-model:value="qualsLevelCode" :searchData="stdPosition" style="width: 100%"/>
+      </div>
+
+      <div class="select" v-if="[0,1,2,3,4].includes(currentTab)">
+        <a-range-picker
+            v-model:value="publishTime"
+            type="date"
+            valueFormat="YYYY-MM-DD"
+            :placeholder="['创建开始时间','结束时间']"
+            style="width: 100%; margin-right: 0px"
+        />
+      </div>
+      <div class="select" v-if="[5,6].includes(currentTab)">
+        <a-range-picker
+            v-model:value="publishTime"
+            type="date"
+            valueFormat="YYYY-MM-DD"
+            :placeholder="['发布开始时间','结束时间']"
+            style="width: 100%; margin-right: 0px"
+        />
+      </div>
+      <div style="display: flex; margin-bottom: 20px">
+        <div class="btnzx btnzx1" @click="searchClick">
+          <div class="search"></div>
+          <div class="btnzText">搜索</div>
+        </div>
+        <div class="btnz btnzx2" @click="reset">
+          <div class="search"></div>
+          <div class="btnzText">重置</div>
+        </div>
+      </div>
+    </div>
+    <!-- 以下为导出按钮 -->
+    <div class="tabbtnz">
+      <div class="tab">
+        <div
+            v-for="(item, index) in tabData"
+            :key="index"
+            :class="currentTab === index ? 'tabActive' : 'tabItem'"
+            @click="tabClick(index)"
+        >
+          <a-popover v-if="index==0" trigger="hover" placement="topLeft">
+            <template #content>
+              此处数据展示全部单层项目数量，列表展示条数与此处数量可能存在差异
+            </template>
+            {{ item.text }} ({{ item.num }})
+          </a-popover>
+          <span v-else>{{ item.text }} ({{ item.num }})</span>
+        </div>
+      </div>
+      <div class="btnzs">
+        <div
+            class="btnz btnz3"
+            @click="exportClickAll"
+            style="margin-right: 15px"
+        >
+          <div>
+            <img
+                src="../../assets/images/coursewareManage/export1.png"
+                alt=""
+            />
+          </div>
+          <div class="btnzText">全部导出</div>
+        </div>
+        <div class="btnz btnz3" @click="exportClick">
+          <div>
+            <img
+                src="../../assets/images/coursewareManage/export1.png"
+                alt=""
+            />
+          </div>
+          <div class="btnzText">导出</div>
+        </div>
+      </div>
+    </div>
+    <!-- 以下为table表格 -->
+    <div class="tableBox">
+      <a-table
+          rowKey="id"
+          :columns="columns"
+          :data-source="tableData"
+          :loading="tableLoading"
+          :scroll="{ x: 700 }"
+          :pagination="false"
+          @resizeColumn="handleResizeColumn"
+          @change="handleTableChange"
+          :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+      >
+<!--        <template v-slot:header>-->
+<!--          <draggable-->
+<!--              v-model="columns"-->
+<!--              item-key="key"-->
+<!--              :list="columns"-->
+<!--              :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>
+      <div class="tableBox">
+        <div class="pa">
+          <a-pagination
+              :showSizeChanger="false"
+              showQuickJumper="true"
+              hideOnSinglePage="true"
+              :pageSize="pageSize"
+              v-model:current="pageNo"
+              :total="tableDataTotal"
+              class="pagination"
+              @change="changePagination"
+              rowKey="id"
+              :show-total="total => `共 ${total} 条`"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {ref, toRefs, reactive, onMounted, computed} from "vue";
+import * as api from "../../api/indexOvervoew";
+import downLoad from "../../utils/downLoad";
+import axios from "axios";
+import dayjs from "dayjs";
+import {message} from "ant-design-vue";
+import Cookies from "vue-cookies";
+import {useStore} from "vuex";
+// import orgjson from './org.json';
+// import fl from './fl.json';
+import PostSelectNew from "@/components/growthpath/PostSelect.vue";
+import OfficeSelect from "@/components/growthpath/OfficeSelect.vue";
+import draggable from 'vuedraggable';
+
+
+export default {
+  name: "OvervoeW",
+  components: {OfficeSelect, PostSelectNew, draggable},
+  setup() {
+    const store = useStore();
+    const sysTypeOptions = store.state.content_type;
+    // const sysTypeOptions = fl;
+
+    const state = reactive({
+      tableLoading: false, // table加载图标
+      tableDataTotal: 0, // 数据总条数
+      pageSize: 10, // 每页条数
+      pageNo: 1, //当前页码
+      currentTab: 0,
+      creator: "", //创建者
+      orgId: null, // 组织Id
+      name: "", //名称
+      selectedRowKeys: [], // 选中的列
+      option: [],
+      resetOrgId: [],
+      allowClear: true,
+      type: null,
+      publishTime: [], // 创建时间
+      orgPath: "", // 存储的组织路径
+      mangerName: "",
+      status: null,
+      teacherName: "",
+      category: null,
+      stdPosition: null,
+      qualsLevelCode: null,
+      statusList: [],
+      content_type: null,
+      categoryTypeId: null,
+      tableSorts: [],
+    });
+
+    const onDragEnd = (event) => {
+      const newColumns = [...columns.value];
+      const [movedColumn] = newColumns.splice(event.oldIndex, 1);
+      newColumns.splice(event.newIndex, 0, movedColumn);
+      columns.value = newColumns;
+    };
+
+
+    let orgArray = [];
+    const orgChange = (value) => {
+      //匹配value
+      let arr = orgArray.filter(org => value.includes(org.organizationId))
+      //arr使用/拼接
+      let orgPath = arr.map(org => org.orgName).join('/')
+      if (orgPath) {
+        state.orgPath = "/" + orgPath;
+      }
+    };
+
+    function flattenOrgTree(orgTree) {
+      const result = [];
+
+      function traverse(node) {
+        if (node.organizationId && node.orgName) {
+          result.push({
+            organizationId: node.organizationId,
+            orgName: node.orgName
+          });
+        }
+        if (node.childList && node.childList.length > 0) {
+          node.childList.forEach(child => traverse(child));
+        }
+      }
+
+      orgTree.forEach(node => traverse(node));
+      return result;
+    }
+
+    function afterApiPage(res) {
+      if (res && res.data) {
+        let resData = res.data;
+        if (resData.code == 200) {
+          let list = resData.data?.records?.map((item) => {
+            return {
+              key: item.id,
+              ...item,
+            };
+          });
+          tableData.value = list;
+          state.tableDataTotal = resData.data?.total;
+        } else {
+          message.error(resData.message);
+        }
+      } else {
+        message.error("服务器繁忙，请稍后重试");
+      }
+      state.tableLoading = false;
+    }
+
+    // 获取tab数据
+    const getTabData = async () => {
+      console.log("getTabData 111111:", state.type);
+      console.log("getTabData 222222:", store.state.userInfo.roleList);
+      var manageFlag = false;
+      if (store.state.userInfo != null && store.state.userInfo.roleList != null) {
+        for (let i = 0; i < store.state.userInfo.roleList.length; i++) {
+          if (store.state.userInfo.roleList[i].roleCode == "system-admin") {
+            manageFlag = true;
+            break;
+          }
+        }
+      }
+
+      axios({
+        method: "post",
+        url: "/reportsnake/report/getReportAllTotal",
+        // params: { manager: true },
+        data: {
+          manager: manageFlag,
+          name: state.name,
+          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,
+          orgPath: state.orgPath,
+        },
+        headers: {
+          token: Cookies.get("token"),
+        },
+      }).then((res) => {
+        if (!res || !res.data) {
+          message.error("服务器异常");
+          return;
+        }
+        let resData = res.data;
+        if (resData.code != 200) {
+          message.error(resData.message)
+          return;
+        }
+        const list = [
+          {text: "项目", num: res.data.data?.projectTotal},
+          {text: "学习路径图", num: res.data.data?.routerTotal},
+          {text: "授课", num: res.data.data?.faceTotal},
+          {text: "课程", num: res.data.data?.courseTotal},
+          {text: "考试", num: res.data.data?.examTotal},
+          {text: "案例", num: res.data.data?.caseTotal},
+          {text: "专业力", num: res.data.data?.professionalTotal},
+        ];
+        tabData.value = list;
+      });
+    };
+    const tabIndexMap = {
+      0: "培训项目",
+      1: "学习路径",
+      2: "面授课程",
+      3: "在线课程",
+      4: "考试模块",
+      5: "案例模块",
+      6: "专业力",
+    };
+    // 重置按钮
+    const reset = async () => {
+      reset_();
+      getTableData();
+      getTabData();
+    };
+    const reset_ = () => {
+      debugger;
+      state.tableLoading = true;
+      state.creator = "";
+      state.publishTime = [];
+      state.name = "";
+      state.orgId = state.resetOrgId;
+      state.status = null;
+      state.orgPath = ""; // 存储的组织路径
+      state.mangerName = "";
+      state.teacherName = "";
+      state.category = null;
+      state.stdPosition = null;
+      state.qualsLevelCode = null;
+    };
+    //请求组织接口
+    const getOrgList = async () => {
+      var manageFlag = false;
+      if (store.state.userInfo != null && store.state.userInfo.roleList != null) {
+        for (let i = 0; i < store.state.userInfo.roleList.length; i++) {
+          if (store.state.userInfo.roleList[i].roleCode == "system-admin") {
+            manageFlag = true;
+            break;
+          }
+        }
+      }
+
+      const res = await api.userGetUserOrg({});
+      // const res = orgjson;
+      if (res != null && res.data != null && res.data.result != null && res.data.result.orgTreeList != null) {
+        orgArray = flattenOrgTree(res.data.result.orgTreeList);
+      }
+
+      if (res) {
+        if (manageFlag) {
+          state.option = [{
+            orgName: "全部",
+            organizationId: null,
+            childList: res.data?.result.orgTreeList
+          }];
+          state.orgId = [null, ...res.data?.result.treeNodeList];
+          state.resetOrgId = [null, ...res.data?.result.treeNodeList];
+        } else {
+          if (res.data?.result.orgTreeList != null) {
+            state.option = res.data?.result.orgTreeList;
+            state.orgId = res.data?.result.treeNodeList;
+            state.resetOrgId = res.data?.result.treeNodeList;
+          } else {
+            state.option = [{
+              orgName: "无权限",
+              organizationId: "1",
+              childList: [],
+            }];
+            state.orgId = ["1"];
+            state.resetOrgId = ["1"];
+          }
+        }
+        state.type = res.data?.result?.userType;
+        res.data?.result?.userType === 1
+            ? (state.allowClear = true)
+            : (state.allowClear = false);
+        getTableData();
+        getTabData();
+      }
+    };
+
+    function fetchExportReport(data) {
+      //根据逗号分隔开的id
+      axios({
+        method: "post",
+        url: "/reportsnake/export/report",
+        data: data,
+        responseType: "blob",
+        headers: {
+          token: Cookies.get("token"),
+        },
+      }).then((res) => {
+        downLoad(res.data, tabIndexMap[state.currentTab] + ".xlsx");
+      });
+    }
+
+    // 导出按钮
+    const exportClick = async () => {
+      if (!state.selectedRowKeys?.length) {
+        return message.warning("请至少选择一条数据进行导出");
+      } else {
+        fetchExportReport({ids: state.selectedRowKeys, type: state.currentTab});
+      }
+    };
+    // 全部导出接口
+    const exportClickAll = async () => {
+      fetchExportReport({type: state.currentTab});
+    };
+    // table选中
+    const onSelectChange = (selectedRowKeys) => {
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    // 表格数据
+    let tableData = ref([]);
+    const getTableData = async () => {
+      state.tableLoading = true;
+      let res = null;
+      if (state.currentTab === 4) {
+        //考试列表
+        res = await api.examPageList({
+          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,
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+          testName: state.name,
+          page: state.pageNo,
+          size: state.pageSize,
+          orgPath: state.orgPath,
+          tableSorts: state.tableSorts,
+        });
+      } else if (state.currentTab === 5) {
+        //案例列表
+        res = await api.casePageList({
+          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,
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+          caseName: state.name,
+          page: state.pageNo,
+          size: state.pageSize,
+          orgPath: state.orgPath,
+          tableSorts: state.tableSorts
+        });
+      } else if (state.currentTab === 6) {
+        //专业力
+        res = await api.professionalPageList({
+          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,
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+          page: state.pageNo,
+          size: state.pageSize,
+          orgPath: state.orgPath,
+          stdPosition: state.stdPosition,
+          qualsLevelCode: state.qualsLevelCode,
+          tableSorts: state.tableSorts
+        });
+      } else if (state.currentTab === 3) {
+        res = await api.coursePageList({
+          page: state.pageNo,
+          size: state.pageSize,
+          name: state.name,
+          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,
+          orgPath: state.orgPath,
+          category: findPathByValue(sysTypeOptions, state.categoryTypeId),
+          tableSorts: state.tableSorts
+        });
+      } else if (state.currentTab === 2) {
+        res = await api.facePageList({
+          page: state.pageNo,
+          size: state.pageSize,
+          offcourseName: state.name,
+          teacher: state.teacherName,
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+          createName: state.creator,
+          startTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
+          endTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
+          orgPath: state.orgPath,
+          tableSorts: state.tableSorts
+        });
+      } else if (state.currentTab === 1) {
+        res = await api.routerPageList({
+          page: state.pageNo,
+          size: state.pageSize,
+          routerName: state.name,
+          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,
+          orgPath: state.orgPath,
+          status: state.status,
+          tableSorts: state.tableSorts
+        });
+      } else if (state.currentTab === 0) {
+        res = await api.projectPageList({
+          page: state.pageNo,
+          size: state.pageSize,
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+          createName: state.creator,
+          projectName: state.name,
+          mangerName: state.mangerName,
+          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,
+          orgPath: state.orgPath,
+          status: state.status && (state.status == 1 ? "进行中" : "已结束"),
+          tableSorts: state.tableSorts
+        });
+      }
+      afterApiPage(res);
+
+    };
+    const searchClick = () => {
+      state.pageNo = 1;
+      state.pageSize = 10;
+      state.tableDataTotal = 0;
+      getTableData();
+      getTabData();
+    };
+    // cloumns 表头
+    const columns = ref([]);
+    const tabData = ref([
+      {text: "项目", num: "2"},
+      {text: "学习路径图", num: "6"},
+      {text: "授课", num: "8"},
+      {text: "课程", num: "11"},
+      {text: "考试", num: "10"},
+      {text: "案例", num: "10"},
+    ]);
+    const statusArr = [
+      [
+        {value: "1", label: "进行中"},
+        {value: "2", label: "已结束"},
+      ],
+      [
+        {value: "1", label: "已发布"},
+        {value: "-1", label: "已结束"},
+      ]
+    ]
+    state.statusList = [
+      {value: 1, label: "进行中"},
+      {value: -1, label: "已结束"},
+    ];
+    const examModel = {
+      1: "测试",
+      2: "练习"
+    };
+
+    const tabClick = (index) => {
+      state.selectedRowKeys = [];
+      state.currentTab = index;
+      state.pageNo = 1;
+      state.pageSize = 10;
+      state.tableDataTotal = 0;
+      tableData.value = [];
+      if (index === 0) {
+        columns.value = [
+          {
+            title: "项目名称",
+            dataIndex: "projectName",
+            key: "projectName",
+            width: 120,
+            ellipsis: true,
+            align: "left",
+            fixed: "left",
+            sorter: true,
+          },
+          {
+            title: "归属组织",
+            dataIndex: "sourceBelongName",
+            ellipsis: true,
+            key: "sourceBelongName",
+            width: 120,
+            align: "center",
+            fixed: "left",
+          },
+          {
+            title: "分类",
+            dataIndex: "category",
+            ellipsis: true,
+            key: "category",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "创建人",
+            dataIndex: "createName",
+            ellipsis: true,
+            key: "manager",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "创建时间",
+            dataIndex: "createDate",
+            ellipsis: true,
+            key: "createDate",
+            width: 120,
+            align: "center",
+            sorter: true,
+          },
+          {
+            title: "发布时间",
+            dataIndex: "publishTime",
+            ellipsis: true,
+            key: "publishTime",
+            width: 120,
+            align: "center",
+            sorter: true,
+          },
+          {
+            title: "状态",
+            dataIndex: "status",
+            ellipsis: true,
+            key: "projectStatus",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "项目经理",
+            dataIndex: "manager",
+            ellipsis: true,
+            key: "manager",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "总人数",
+            dataIndex: "totalStudentNum",
+            ellipsis: true,
+            key: "totalStudentNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "学习人数",
+            dataIndex: "studentLearnNum",
+            ellipsis: true,
+            key: "studentLearnNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "参与率",
+            dataIndex: "joinRate",
+            ellipsis: true,
+            key: "joinRate",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "完成人数",
+            dataIndex: "studentCompleteNum",
+            ellipsis: true,
+            key: "studentCompleteNum",
+            width: 120,
+            align: "center",
+          },
+
+          {
+            title: "完成率",
+            dataIndex: "completeRate",
+            ellipsis: true,
+            key: "completeRate",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+
+          },
+          {
+            title: "阶段数",
+            dataIndex: "stageCount",
+            ellipsis: true,
+            key: "stageCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "任务总数",
+            dataIndex: "taskCount",
+            ellipsis: true,
+            key: "taskCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "必修任务数",
+            dataIndex: "bxCount",
+            ellipsis: true,
+            key: "bxCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "必修任务完成人数",
+            dataIndex: "bxCompCount",
+            ellipsis: true,
+            key: "bxCompCount",
+            width: 150,
+            align: "center",
+          },
+          {
+            title: "必修任务完成人率",
+            dataIndex: "bxCompRate",
+            ellipsis: true,
+            key: "bxCompRate",
+            width: 150,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "整体课程完成率 ",
+            dataIndex: "courseCompRate",
+            ellipsis: true,
+            key: "courseCompRate",
+            width: 150,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "整体考试通过率 ",
+            dataIndex: "examPassRate",
+            ellipsis: true,
+            key: "examPassRate",
+            width: 150,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "整体作业完成率 ",
+            dataIndex: "homeworkCompRate",
+            ellipsis: true,
+            key: "homeworkCompRate",
+            width: 150,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+        ];
+      } else if (index === 4) {
+        columns.value = [
+          {
+            title: "考试名称",
+            dataIndex: "testName",
+            key: "testName",
+            width: 120,
+            ellipsis: true,
+            align: "left",
+            fixed: "left",
+            sorter: true,
+          },
+          {
+            title: "归属组织",
+            dataIndex: "sourceBelongName",
+            ellipsis: true,
+            width: 120,
+            align: "left",
+            fixed: "left",
+          },
+          {
+            title: "所属模式",
+            dataIndex: "testType",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              if (text.value) {
+                return examModel[text.value]
+              }
+              return "";
+            },
+          },
+          {
+            title: "题目数量",
+            dataIndex: "questionCount",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "总分",
+            dataIndex: "totalScore",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "及格线",
+            dataIndex: "passLine",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+          },
+
+          {
+            title: "考试时长(分钟)",
+            dataIndex: "testDuration",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "应考人数",
+            dataIndex: "testNum",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "参加人数",
+            dataIndex: "realTestNum",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "参考率",
+            dataIndex: "testNumRate",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "及格人数",
+            dataIndex: "passNum",
+            ellipsis: true,
+            key: "passNum",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "及格率",
+            dataIndex: "passRate",
+            ellipsis: true,
+            key: "passRate",
+            width: 120,
+            align: "center",
+            sorter: true,
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "平均分",
+            dataIndex: "avgScore",
+            ellipsis: true,
+            key: "avgScore",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "成绩中位数",
+            dataIndex: "medianScore",
+            ellipsis: true,
+            key: "medianScore",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "平均答题时长(分钟)",
+            dataIndex: "avgTestDuration",
+            ellipsis: true,
+            key: "avgTestDuration",
+            width: 160,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "发布时间",
+            dataIndex: "publishTime",
+            ellipsis: true,
+            key: "publishTime",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatDate(text.value);
+            },
+          },
+
+          {
+            title: "创建时间",
+            dataIndex: "createTime",
+            ellipsis: true,
+            key: "createTime",
+            width: 120,
+            align: "center",
+            sorter: true,
+            customRender: (text) => {
+              return formatDate(text.value);
+            },
+          },
+          {
+            title: "创建人",
+            dataIndex: "createName",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+          },
+        ];
+      } else if (index === 6) {
+        columns.value = [
+          {
+            title: "岗位名称",
+            dataIndex: "stdPositionName",
+            ellipsis: true,
+            fixed: "left",
+            key: "stdPositionName",
+            width: 120,
+            align: "left",
+            sorter: true,
+          },
+          {
+            title: "任职资格等级",
+            dataIndex: "qualsLevelName",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+          },
+          {
+            title: "band",
+            dataIndex: "bandInfo",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+          },
+          {
+            title: "任务总数",
+            dataIndex: "totalTaskNum",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+          },
+          {
+            title: "必修任务数",
+            dataIndex: "requiredTaskNum",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+          },
+          {
+            title: "选修任务数",
+            dataIndex: "eleTaskNum",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+          },
+          {
+            title: "学习总人数",
+            dataIndex: "totalLearnNum",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+          },
+          {
+            title: "完成人数",
+            dataIndex: "completedLearnNum",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+          },
+          {
+            title: "任务总数完成率",
+            dataIndex: "learnCompletedRatio",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "必修任务完成率",
+            dataIndex: "requiredTaskCompletedRatio",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "选修任务完成率",
+            dataIndex: "eleTaskCompletedRatio",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "整体模块完成率",
+            dataIndex: "taskCompletedRatio",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "发布时间",
+            dataIndex: "publishTime",
+            key: "publishTime",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+            customRender: (text) => {
+              return formatDate(text.value);
+            },
+          },
+          {
+            title: "更新时间",
+            dataIndex: "updatedTime",
+            key: "updatedTime",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            customRender: (text) => {
+              return formatDate(text.value);
+            },
+          },
+        ];
+      } else if (index === 5) {
+        columns.value = [
+          {
+            title: "案例名称",
+            dataIndex: "caseName",
+            ellipsis: true,
+            fixed: "left",
+            key: "caseName",
+            width: 150,
+            align: "left",
+            sorter: true,
+          },
+          {
+            title: "归属组织",
+            dataIndex: "sourceBelongName",
+            ellipsis: true,
+            align: "center",
+            fixed: "left",
+            width: 150,
+          },
+          {
+            title: "专业分类",
+            dataIndex: "caseSpecialtySequence",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+          },
+          {
+            title: "作者",
+            dataIndex: "authorName",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+          },
+          {
+            title: "发布时间",
+            dataIndex: "createTime",
+            key: "createTime",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+            customRender: (text) => {
+              return formatDate(text.value);
+            },
+          },
+
+          {
+            title: "密级",
+            dataIndex: "confidentialityLevel",
+            ellipsis: true,
+            align: "center",
+            width: 100,
+          },
+          {
+            title: "浏览数",
+            dataIndex: "views",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+          },
+          {
+            title: "收藏数",
+            dataIndex: "favorites",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+          },
+          {
+            title: "点赞数",
+            dataIndex: "praises",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+          },
+
+          {
+            title: "评论数",
+            dataIndex: "comments",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            sorter: true,
+          },
+          {
+            title: "是否推荐",
+            dataIndex: "breCommend",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+            customRender: (text) => {
+              return text.value === 1 ? "是" : "否";
+            },
+          },
+          {
+            title: "推荐人数",
+            dataIndex: "recommends",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+          },
+
+          {
+            title: "最近推荐时间",
+            dataIndex: "recommendTime",
+            key: "recommendTime",
+            ellipsis: true,
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "推荐整体查看率",
+            dataIndex: "recommendRate",
+            key: "recommendRate",
+            ellipsis: true,
+            align: "center",
+            width: 120,
+          },
+        ];
+      } else if (index === 3) {
+        columns.value = [
+          {
+            title: "课程名称",
+            dataIndex: "courseName",
+            key: "courseName",
+            width: 120,
+            ellipsis: true,
+            align: "left",
+            fixed: "left",
+            sorter: true,
+          },
+          {
+            title: "归属组织",
+            dataIndex: "sourceBelongName",
+            ellipsis: true,
+            key: "sourceBelongName",
+            width: 120,
+            align: "center",
+            fixed: "left",
+          },
+          {
+            title: "内容分类",
+            dataIndex: "category",
+            ellipsis: true,
+            key: "category",
+            width: 120,
+            align: "center",
+            sorter: true,
+          },
+          {
+            title: "授课老师",
+            dataIndex: "teacher",
+            ellipsis: true,
+            key: "teacher",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "关键字",
+            dataIndex: "keywords",
+            ellipsis: true,
+            key: "keywords",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value)
+            },
+          },
+          {
+            title: "课件数量",
+            dataIndex: "fileCount",
+            ellipsis: true,
+            key: "fileCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "总浏览人数",
+            dataIndex: "viewCount",
+            ellipsis: true,
+            key: "viewCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "学习人数",
+            dataIndex: "studyCount",
+            ellipsis: true,
+            key: "studyCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "总学习时长",
+            dataIndex: "studyTime",
+            ellipsis: true,
+            key: "studyTime",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "整体完成人数",
+            dataIndex: "completeCount",
+            ellipsis: true,
+            key: "completeCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "整体完成率",
+            dataIndex: "completeRate",
+            ellipsis: true,
+            key: "completeRate",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value)
+            },
+          },
+          {
+            title: "平均每课完成率",
+            dataIndex: "avgCompleteRate",
+            ellipsis: true,
+            key: "avgCompleteRate",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value)
+            },
+          },
+          {
+            title: "授课讲师数",
+            dataIndex: "teacherCount",
+            ellipsis: true,
+            key: "teacherCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "平均成绩",
+            dataIndex: "avgScore",
+            ellipsis: true,
+            key: "avgScore",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "评论数",
+            dataIndex: "comments",
+            ellipsis: true,
+            key: "comments",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "创建时间",
+            dataIndex: "createTime",
+            ellipsis: true,
+            key: "createTime",
+            width: 120,
+            align: "center",
+            sorter: true,
+            customRender: (text) => {
+              return formatDate(text.value)
+            },
+          },
+          {
+            title: "创建人",
+            dataIndex: "createName",
+            ellipsis: true,
+            key: "createName",
+            width: 120,
+            align: "center",
+            sorter: true,
+          },
+        ];
+      } else if (index === 2) {
+        columns.value = [
+          {
+            title: "课程名称",
+            dataIndex: "offCoursePlanName",
+            key: "offCoursePlanName",
+            width: 120,
+            ellipsis: true,
+            align: "left",
+            fixed: "left",
+            sorter: true,
+          },
+          {
+            title: "归属组织",
+            dataIndex: "sourceBelongName",
+            ellipsis: true,
+            key: "sourceBelongName",
+            width: 120,
+            align: "center",
+            fixed: "left",
+          },
+          {
+            title: "所属课程",
+            dataIndex: "offCourseName",
+            ellipsis: true,
+            key: "offCourseName",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "开课开始时间",
+            dataIndex: "startTime",
+            ellipsis: true,
+            key: "startTime",
+            width: 150,
+            align: "center",
+            customRender: (text) => {
+              return formatTime(text.value)
+            },
+          },
+          {
+            title: "结束时间",
+            dataIndex: "endTime",
+            ellipsis: true,
+            key: "endTime",
+            width: 150,
+            align: "center",
+            customRender: (text) => {
+              return formatTime(text.value)
+            },
+          },
+          {
+            title: "总时长（分钟）",
+            dataIndex: "duration",
+            ellipsis: true,
+            key: "duration",
+            width: 150,
+            align: "center",
+          },
+          {
+            title: "面授地点",
+            dataIndex: "address",
+            ellipsis: true,
+            key: "address",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value)
+            },
+          },
+          {
+            title: "授课讲师",
+            dataIndex: "teacher",
+            ellipsis: true,
+            key: "teacher",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value)
+            },
+          },
+          {
+            title: "是否作业",
+            dataIndex: "hasWorkInfo",
+            ellipsis: true,
+            key: "hasWorkInfo",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return text.value == 1 ? "是" : "否";
+            },
+          },
+          {
+            title: "是否考试",
+            dataIndex: "hasTest",
+            ellipsis: true,
+            key: "hasTest",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return text.value == 1 ? "是" : "否";
+            },
+          },
+          {
+            title: "参加人数",
+            dataIndex: "studentNum",
+            ellipsis: true,
+            key: "studentNum",
+            width: 120,
+            align: "center",
+            sorter: true,
+          },
+          {
+            title: "参评人数",
+            dataIndex: "assessmentNum",
+            ellipsis: true,
+            key: "assessmentNum",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "平均评分",
+            dataIndex: "assessmentScore",
+            ellipsis: true,
+            key: "assessmentScore",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "作业完成人数",
+            dataIndex: "workCompNum",
+            ellipsis: true,
+            key: "workCompNum",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "作业平均分",
+            dataIndex: "workAvgScore",
+            ellipsis: true,
+            key: "workAvgScore",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "考试完成人数",
+            dataIndex: "testCompNum",
+            ellipsis: true,
+            key: "testCompNum",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+          {
+            title: "考试平均分",
+            dataIndex: "testAvgScore",
+            ellipsis: true,
+            key: "testAvgScore",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatValNull(text.value);
+            },
+          },
+
+          {
+            title: "创建人",
+            dataIndex: "createName",
+            ellipsis: true,
+            key: "createName",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "创建时间",
+            dataIndex: "reportCreateTime",
+            ellipsis: true,
+            key: "reportCreateTime",
+            width: 120,
+            align: "center",
+            sorter: true,
+            customRender: (text) => {
+              return formatDate(text.value)
+            },
+          },
+        ];
+      } else if (index === 1) {
+        columns.value = [
+          {
+            title: "路径名称",
+            dataIndex: "routerName",
+            key: "routerName",
+            width: 120,
+            ellipsis: true,
+            align: "left",
+            fixed: "left",
+            sorter: true,
+          },
+          {
+            title: "归属组织",
+            dataIndex: "orgName",
+            ellipsis: true,
+            key: "orgName",
+            width: 120,
+            align: "center",
+            fixed: "left",
+          },
+          {
+            title: "状态",
+            dataIndex: "status",
+            ellipsis: true,
+            key: "status",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return routerStatusObj[text.value + ""]
+            },
+          },
+          {
+            title: "创建人",
+            dataIndex: "createName",
+            ellipsis: true,
+            key: "createName",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "创建时间",
+            dataIndex: "createTime",
+            ellipsis: true,
+            key: "createTime",
+            width: 120,
+            align: "center",
+            sorter: true,
+            customRender: (text) => {
+              return text.value ? formatDate(text.value) : "";
+            },
+          },
+          {
+            title: "关卡数",
+            dataIndex: "chapterNum",
+            ellipsis: true,
+            key: "chapterNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "关卡完成率",
+            dataIndex: "chapterRate",
+            ellipsis: true,
+            key: "chapterRate",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return text.value ? text.value + "%" : "0%";
+            },
+          },
+          {
+            title: "总人数",
+            dataIndex: "studentNum",
+            ellipsis: true,
+            key: "studentNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "学习人数",
+            dataIndex: "studentLearnNum",
+            ellipsis: true,
+            key: "studentLearnNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "学习参与率",
+            dataIndex: "studentLearnRate",
+            ellipsis: true,
+            key: "studentLearnRate",
+            width: 120,
+            align: "center",
+            customRender(text) {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "完成人数",
+            dataIndex: "studentCompleteNum",
+            ellipsis: true,
+            key: "studentCompleteNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "完成人员率",
+            dataIndex: "studentCompleteRate",
+            ellipsis: true,
+            key: "studentCompleteRate",
+            width: 120,
+            align: "center",
+            customRender(text) {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "总任务数",
+            dataIndex: "taskCount",
+            ellipsis: true,
+            key: "taskCount",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "总任务完成率",
+            dataIndex: "taskRate",
+            ellipsis: true,
+            key: "taskRate",
+            width: 120,
+            align: "center",
+            customRender(text) {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "在线课程数",
+            dataIndex: "onlineCourseNum",
+            ellipsis: true,
+            key: "onlineCourseNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "在线课程完成率",
+            dataIndex: "onlineCourseRate",
+            ellipsis: true,
+            key: "onlineCourseRate",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "面授课程数",
+            dataIndex: "faceCourseNum",
+            ellipsis: true,
+            key: "faceCourseNum",
+            width: 120,
+            align: "center",
+          },
+          {
+            title: "面授完成率",
+            dataIndex: "faceCourseRate",
+            ellipsis: true,
+            key: "faceCourseRate",
+            width: 120,
+            align: "center",
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+          {
+            title: "考试数",
+            dataIndex: "examNum",
+            ellipsis: true,
+            key: "examNum",
+            align: "center",
+            width: 120,
+          },
+          {
+            title: "考试及格率",
+            dataIndex: "examPassRate",
+            ellipsis: true,
+            key: "examPassRate",
+            align: "center",
+            width: 120,
+            customRender: (text) => {
+              return formatTextRate(text.value);
+            },
+          },
+        ];
+      }
+      reset_();
+      if ([0, 1].includes(index)) {
+        state.statusList = statusArr[index];
+      }
+      state.tableSorts = [];
+      getTableData();
+      getTabData();
+    };
+
+    //table 分页事件
+    const changePagination = (page) => {
+      state.selectedRowKeys = [];
+      state.pageNo = page;
+      getTableData();
+    };
+    // columns展开事件
+    const expandTable = (e, a) => {
+      console.log("e", e, a);
+    };
+    onMounted(() => {
+      state.tableLoading = true;
+      getOrgList();
+    });
+
+    tabClick(0);
+
+    // function customHeaderRow(column) {
+    // column.forEach((col, index) => {
+    //   col.className = "custom-header";
+    // });
+    // }
+
+    const handleResizeColumn = (w, col) => {
+      col.width = w;
+    };
+
+    // 表格 change 事件（分页、排序等）
+    const handleTableChange = (pag, filters, sorter) => {
+      const {field, order} = sorter;
+      if (order) {
+        state.tableSorts = [{
+          sortField: field,
+          sortOrder: order === 'ascend' ? 'asc' : order === 'descend' ? 'desc' : null,
+        }];
+      } else {
+        state.tableSorts = [];
+      }
+      getTableData();
+    };
+
+
+    const routerStatusObj = {
+      "0": "草稿",
+      "1": "已发布",
+      "-1": "已结束",
+    };
+
+    //时间格式化 后续抽到 工具类中
+    const formatTime = (time) => {
+      return formatTime_(time, "YYYY-MM-DD HH:mm:ss");
+    };
+    const formatDate = (time) => {
+      return formatTime_(time, "YYYY-MM-DD");
+    };
+    //时间格式化 后续抽到 工具类中
+    const formatTime_ = (time, format = "YYYY-MM-DD HH:mm:ss") => {
+      if (!time) {
+        return null;
+      }
+      return dayjs(time).format(format);
+    };
+
+    //后续抽到 工具类中
+    function formatTextRate(value) {
+      if (!value && value != 0) {
+        return "-";
+      }
+      return value + "%";
+    }
+
+    function formatValNull(val) {
+      if (!val && val !== 0) {
+        return "-";
+      }
+      return val;
+    }
+
+    // 获取名称路径的函数
+    function findPathByValue(data, value) {
+      function recursiveSearch(nodes, value, path) {
+        for (let node of nodes) {
+          if (node.value === value) {
+            return path + node.name;
+          }
+          if (node.children) {
+            let result = recursiveSearch(node.children, value, path + node.name + '/');
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return null;
+      }
+
+      if (!data || !value) {
+        return null;
+      }
+      return recursiveSearch(data, value, '');
+    }
+
+    return {
+      exportClickAll,
+      getTabData,
+      reset,
+      getOrgList,
+      onSelectChange,
+      dayjs,
+      searchClick,
+      ...toRefs(state),
+      tableData,
+      columns,
+      tabData,
+      tabClick,
+      changePagination,
+      expandTable,
+      exportClick,
+      orgChange,
+      handleResizeColumn,
+      onDragEnd,
+      sysTypeOptions,
+      handleTableChange
+    };
+  },
+};
+</script>
+<style lang="scss">
+.overvoew {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .filterShow {
+    margin-left: 38px;
+    margin-right: 20px;
+    margin-top: 30px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .select {
+      margin-right: 20px;
+      margin-bottom: 20px;
+      width: calc((100% - 220px) / 4);
+    }
+
+    .btnz {
+      padding: 0px 26px 0px 26px;
+      height: 38px;
+      background: rgba(64, 158, 255, 0);
+      border-radius: 3px;
+      border: 1px solid rgba(64, 158, 255, 1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 14px;
+      flex-shrink: 0;
+      cursor: pointer;
+
+      .search {
+        background-size: 100%;
+      }
+
+      .btnzText {
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(64, 158, 255, 1);
+        line-height: 36px;
+        margin-left: 5px;
+      }
+    }
+
+    .btnzx {
+      padding: 0px 26px 0px 26px;
+      height: 38px;
+      background: #4ea6ff;
+      border-radius: 3px;
+      border: 1px solid rgba(64, 158, 255, 1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 14px;
+      flex-shrink: 0;
+      cursor: pointer;
+
+      .search {
+        background-size: 100%;
+      }
+
+      .btnzText {
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 36px;
+        margin-left: 5px;
+      }
+    }
+
+    .btnzx1 {
+      .search {
+        width: 15px;
+        height: 17px;
+        background-image: url("../../assets/images/courseManage/search0.png");
+      }
+    }
+
+    .btnzx2 {
+      margin-right: 0px !important;
+      background: #4ea6ff;
+
+      .search {
+        width: 16px;
+        height: 18px;
+
+        background-image: url("../../assets/images/courseManage/reset0.png");
+      }
+
+      .btnzText {
+        color: white;
+      }
+    }
+
+    .btnzx1:hover {
+      background: rgba(64, 158, 255, 0.76);
+
+      .search {
+        background-image: url("../../assets/images/courseManage/search0.png");
+      }
+
+      .btnzText {
+        color: #ffffff;
+      }
+    }
+
+    .btnzx2:hover {
+      background: rgba(64, 158, 255, 0.76);
+
+      .search {
+        background-image: url("../../assets/images/courseManage/reset0.png");
+      }
+
+      .btnzText {
+        color: #ffffff;
+      }
+    }
+
+    .btnzx1:active,
+    .btnzx2:active {
+      background: #0982ff;
+    }
+
+    // .btnzx2:hover {
+    //   background: rgba(64, 158, 255, 0.1);
+    // }
+
+    // .btnzx2:active {
+    //   background: rgba(64, 158, 255, 0.2);
+    // }
+  }
+
+  .tabbtnz {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+
+    .tab {
+      margin-left: 38px;
+      display: flex;
+      background: #eaf0fe;
+      height: 40px;
+      line-height: 40px;
+      border-radius: 3px;
+
+      .tabItem {
+        box-sizing: border-box;
+        padding: 0 18px;
+        cursor: pointer;
+      }
+
+      .tabActive {
+        box-sizing: border-box;
+        padding: 0 18px;
+        background: #387df7;
+        color: white;
+        border-radius: 3px;
+        cursor: pointer;
+      }
+    }
+
+    .btnzs {
+      display: flex;
+      margin-right: 38px;
+      // flex-wrap: wrap;
+      .btnz {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: white;
+        border-radius: 3px;
+        border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+
+        .search {
+          background-size: 100%;
+        }
+
+        .btnzText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #4ea6ff;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+
+      .btnz3 {
+        margin-right: 0px;
+        background: #4ea6ff;
+
+        .search {
+          width: 17px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/add0.png");
+        }
+
+        .btnzText {
+          color: #ffffff;
+        }
+      }
+
+      .btnz3:hover {
+        // background: rgba(64, 158, 255, 0.76);
+        background: rgba(64, 158, 255, 0.76);
+      }
+    }
+  }
+
+  .tableBox {
+    margin: 20px 38px 30px;
+
+    .ant-table-thead > tr > th {
+      background-color: #eff4fc;
+    }
+  }
+
+  .tableBox {
+    padding-bottom: 20px;
+
+    .pa {
+      // position: absolute;
+      // bottom: 20px;
+      // left: 0;
+      width: 100%;
+      // height: 20px;
+      // background-color: red;
+      display: flex;
+      justify-content: center;
+      // margin-bottom: 10px;
+      // position: absolute;
+      // bottom: -40px;
+    }
+  }
+}
+//.ant-table-thead > tr > th {
+//  background-color: #eff4fc;
+//  cursor: move; // 启用拖拽光标
+//}
+.ant-table-tbody > tr > td {
+  user-select: text !important;
+}
+</style>