feat: 概览，学习组织数据接口联调

package.json

@@ -18,7 +18,7 @@
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.6",
-    "echarts":"^5.4.1",
+    "echarts": "^5.4.1",
     "element-plus": "^2.2.17",
     "element-resize-detector": "^1.2.4",
     "html2canvas": "^1.4.1",
@@ -30,6 +30,7 @@
     "qs": "^6.11.0",
     "sortablejs": "^1.15.0",
     "vue": "^3.2.13",
+    "vue-cookies": "^1.8.2",
     "vue-router": "^4.0.3",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0"

src/api/confign.js

@@ -0,0 +1,72 @@
+
+import {message} from "ant-design-vue";
+import axios from "axios";
+import router from "@/router";
+import Cookies from 'vue-cookies'
+// import { getCookie } from '../api/method'
+// const Qs = require("qs");
+
+// axios.defaults.headers.post["Content-Type"] =
+//   "application/x-www-form-urlencoded";
+// export const FILE_UPLOAD_URL = process.env.VUE_APP_BASE_API + '/file/upload'
+// export const BATCH_IMPORT_SCORE = process.env.VUE_APP_BASE_API + '/admin/offcourse/batchImportScore'
+axios.defaults.withCredentials = true;
+const http = axios.create({
+    baseURL: '/userbasic',
+    timeout: 1000 * 15,
+    headers: {"Content-Type": "application/json",},
+});
+
+http.interceptors.request.use(
+    (config) => {
+        const token = Cookies.get("token")
+        if (token) {
+          config.headers.token = token; //测试1111
+        } else{
+            message.error('未获取到登录信息，请先登录')
+            return window.location.href='https://u-pre.boe.com/web/';
+        }
+        return config;
+    },
+    (err) => {
+        console.log("登陆前拦截", err);
+        return Promise.reject(err);
+    }
+);
+
+http.interceptors.response.use(
+    (response) => {
+        // console.log('response', response)
+        const {
+            data: {code},
+        } = response;
+        if (code === 0 || code === 200) {
+            return response.data?response.data:response;
+        }
+        if(code==500){
+            return message.error('请求失败'); 
+        }
+        if(code==601){
+             message.error('token过期请重新登陆'); 
+             return window.location.href='https://u-pre.boe.com/web/';
+        }
+        if (code === 1000) {
+            (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'alpine') ? router.push({path: 'login'}) : (window.location.href = process.env.VUE_APP_LOGIN_URL)
+            return Promise.reject(response);
+        }
+        // show && message.error(msg);
+        // console.log("api %o", msg);
+        // return Promise.reject(response);
+        return response
+    },
+    function (error) {
+        if (error.message == "timeout of 1ms exceeded") {
+            message.destroy();
+            message.error("请求超时");
+        }
+        console.log("api error %o", error);
+        return message.error(error.message);
+    }
+);
+
+export default http;

src/api/configz.js

@@ -0,0 +1,74 @@
+
+import {message} from "ant-design-vue";
+import axios from "axios";
+import router from "@/router";
+import Cookies from 'vue-cookies'
+// import { getCookie } from '../api/method'
+// const Qs = require("qs");
+
+// axios.defaults.headers.post["Content-Type"] =
+//   "application/x-www-form-urlencoded";
+// export const FILE_UPLOAD_URL = process.env.VUE_APP_BASE_API + '/file/upload'
+// export const BATCH_IMPORT_SCORE = process.env.VUE_APP_BASE_API + '/admin/offcourse/batchImportScore'
+axios.defaults.withCredentials = true;
+const http = axios.create({
+    baseURL: '/report',
+    timeout: 1000 * 15,
+    // headers: { "Content-Type": "multipart/form-data" },
+    headers: {"Content-Type": "application/json"},
+});
+
+http.interceptors.request.use(
+    (config) => {
+        const token = Cookies.get("token")
+        if (token) {
+          config.headers.token = token; //测试1111
+        } else{
+            message.error('未获取到登录信息，请先登录')
+            return window.location.href='https://u-pre.boe.com/web/';
+        }
+        return config;
+    },
+    (err) => {
+        console.log("登陆前拦截", err);
+        return Promise.reject(err);
+    }
+);
+
+http.interceptors.response.use(
+    (response) => {
+        // console.log('response', response)
+        const {
+            data: {code},
+        } = response;
+        // console.log('code', response)
+        if (code === 0 || code === 200) {
+            return response.data?response.data:response;
+        }
+        if(code==500){
+            return message.error('请求失败'); 
+        }
+        if(code==601){
+            message.error('token过期请重新登陆'); 
+            return window.location.href='https://u-pre.boe.com/web/';
+       }
+        if (code === 1000) {
+            (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'alpine') ? router.push({path: 'login'}) : (window.location.href = process.env.VUE_APP_LOGIN_URL)
+            return Promise.reject(response);
+        }
+        // show && message.error(msg);
+        // console.log("api %o", msg);
+        // return Promise.reject(response);
+        return response
+    },
+    function (error) {
+        if (error.message == "timeout of 1ms exceeded") {
+            message.destroy();
+            message.error("请求超时");
+        }
+        console.log("api error %o", error);
+        return message.error(error.message);
+    }
+);
+
+export default http;

src/api/indexOvervoew.js

@@ -0,0 +1,25 @@
+import http from "./configz";
+import https from './confign'
+// 导出案例接口
+// export const boeuCaseExport = (obj,options) => http.get('/boeu/case/export', { params: obj },options)
+
+//概览页面考试列表请求接口
+export const boeuExamPageList = (obj) => http.post('/boeu/exam/pageList', obj)
+
+//概览页面案例列表请求接口
+export const boeuCasePageList = (obj) => http.post('/boeu/case/pageList', obj)
+// 请求组织接口
+export const userGetUserOrg = (obj) => https.post('/user/getUserOrg', obj)
+
+// 课程列表接口
+export const boeuCoursePageList = (obj) => http.post('/boeu/course/pageList', obj)
+// 授课列表
+export const boeuTeachingPageList = (obj) => http.post('/boeu/teaching/pageList', obj)
+// 学习路径图页面
+export const boeuRoterPageList = (obj) => http.post('/boeu/router/pageList', obj)
+// 项目列表
+export const boeuProjectPageList = (obj) => http.post('/boeu/project/pageList', obj)
+
+// 学习数据列表
+export const boeuStudyDataPageList = (obj) => http.post('/boeu/studyData/pageList', obj)
+

src/components/NavLeft.vue

@@ -3,7 +3,7 @@
     class="navLeft"
     :style="{
       width: packup ? '100px' : '208px',
-      'min-height': screenHeight - 80 + 'px',
+      height: screenHeight - 80 + 'px',
     }"
   >
     <div style="display: flex; justify-content: flex-end">
@@ -307,6 +307,9 @@
             <router-link to="/operational">营运数据概览</router-link>
           </a-menu-item>
           <a-sub-menu key="sub17-2" class="treeMenu">
+            <template #icon>
+              <div class="img"></div>
+            </template>
             <template #title>版块详细数据</template>
             <a-menu-item key="sub17-2-1">
               <span
@@ -373,6 +376,9 @@
             </a-menu-item>
           </a-sub-menu>
           <a-sub-menu key="sub17-3" class="treeMenu">
+            <template #icon>
+              <div class="img"></div>
+            </template>
             <template #title>组织学习数据</template>
             <a-menu-item key="sub17-3-1">
               <span
@@ -671,6 +677,7 @@ export default {
         {
           href: "/learningpathmap",
           openKeys: "sub17",
+          // openKeyss:'sub17-2',
           selectedKeys: "sub17-2-1",
           pagename: "学习路径图",
         },
@@ -725,8 +732,6 @@ export default {
       ],
     });
 
-    // console.log(state.openKeys, state.selectedKeys);
-
     const onOpenChange = (openKeys) => {
       const latestOpenKey = openKeys.find(
         (key) => state.openKeys.indexOf(key) === -1
@@ -852,15 +857,27 @@ export default {
 <style lang="scss">
 .navLeft {
   width: 208px;
-  min-height: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
   background: linear-gradient(0deg, #a9e9f7 0%, #388be1 73%);
   box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
   // margin-top: -50px;
   flex-shrink: 0;
   .treeMenu {
+    padding-left: 17px;
+    .ant-menu-item-icon {
+      width: 10px !important;
+      height: 10px;
+      min-width: 10px;
+      border-radius: 50%;
+      margin-right: 10px;
+      // background: white;
+      border: 2px solid white;
+    }
     .ant-menu-title-content {
       box-sizing: border-box;
-      padding-left: 52px !important;
+      // padding-left: 40px !important;
       overflow: hidden;
       text-overflow: ellipsis;
     }
@@ -917,7 +934,7 @@ export default {
   //修改左侧padding
   .ant-menu-item,
   .ant-menu-submenu-title {
-    padding-left: 10px !important;
+    padding-left: 14px !important;
     height: 49px !important;
     line-height: 49px !important;
     margin: 0px !important;

src/utils/downLoad.js

@@ -0,0 +1,18 @@
+
+const blobDownloadFile = (res, fileName) => {
+  const blob = new Blob([res])
+  const a = document.createElement('a')
+  const URL = window.URL || window.webkitURL
+  const herf = URL.createObjectURL(blob)
+  a.href = herf
+  a.download = fileName
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  window.URL.revokeObjectURL(herf)
+}
+
+
+
+
+export default blobDownloadFile

src/views/report/Employeelearning.vue

@@ -3,26 +3,30 @@
   <div class="employeelearning">
     <!-- 以下为顶部搜索框 -->
     <div class="filter">
-      <div class="select addTimeBox">
-        <div class="addTime">创建时间：</div>
-        <a-range-picker
-          style="width: 100%"
-          format="YYYY-MM-DD"
-          separator="至"
-          :placeholder="['      开始时间', '        结束时间']"
-        />
-      </div>
       <div class="select">
         <a-select
           style="width: 100%"
-          placeholder="请选择状态"
+          placeholder="请选择组织"
+          v-model:value="orgId"
+          :options="option"
           allowClear
         ></a-select>
       </div>
       <div class="select">
         <a-input
           style="width: 100%; height: 40px; border-radius: 8px"
-          placeholder="请输入工号/姓名"
+          placeholder="请输入姓名"
+          v-model:value="name"
+          allowClear
+          showSearch
+        >
+        </a-input>
+      </div>
+      <div class="select">
+        <a-input
+          style="width: 100%; height: 40px; border-radius: 8px"
+          placeholder="请输入工号"
+          v-model:value="userNo"
           allowClear
           showSearch
         >
@@ -32,17 +36,18 @@
         <a-input
           style="width: 100%; height: 40px; border-radius: 8px"
           placeholder="请输入Band"
+          v-model:value="band"
           allowClear
           showSearch
         >
         </a-input>
       </div>
       <div style="display: flex; margin-bottom: 20px">
-        <div class="btnn btn1">
+        <div class="btnn btn1" @click="getTableData">
           <div class="search"></div>
           <div class="btnText">搜索</div>
         </div>
-        <div class="btn btn2">
+        <div class="btn btn2" @click="reset">
           <div class="search"></div>
           <div class="btnText">重置</div>
         </div>
@@ -50,7 +55,7 @@
     </div>
     <!-- 以下为导出按钮 -->
     <div class="btns">
-      <div class="btn btn3">
+      <div class="btn btn3" @click="exportBtn">
         <div><img src="../../assets/svg/export.png" alt="" /></div>
         <div class="btnText">导出</div>
       </div>
@@ -63,6 +68,10 @@
         :loading="tableLoading"
         :scroll="{ x: 700 }"
         :pagination="false"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
       >
       </a-table>
       <div class="tableBox">
@@ -84,126 +93,159 @@
   </div>
 </template>
 <script>
-import { ref, toRefs, reactive } from "vue";
+import { ref, toRefs, reactive, onMounted } from "vue";
+import * as api from "../../api/indexOvervoew";
+import { message } from "ant-design-vue";
+import Cookies from "vue-cookies";
+import axios from "axios";
+import downLoad from "../../utils/downLoad";
 export default {
   name: "EmployeelearninG",
   setup() {
     const state = reactive({
       tableLoading: false, // table加载图标
-      tableDataTotal: 12, // 数据总条数
+      tableDataTotal: 0, // 数据总条数
       pageSize: 10, // 每页条数
       pageNo: 1, //当前页码
+      orgId: null, // 状态值
+      name: "", // 名称
+      band: "", // band
+      userNo: "", //工号
+      option: [], //组织列表
+      selectedRowKeys: [], // 选中的列
     });
+    // table选中
+    const onSelectChange = (selectedRowKeys) => {
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    //请求组织接口
+    const getOrgList = async () => {
+      const res = await api.userGetUserOrg({});
+      if (res) {
+        const list = res.data?.result?.map((item) => {
+          return {
+            label: item.orgName,
+            value: item.orgId,
+          };
+        });
+        state.option = list;
+      }
+    };
+    //导出
+    const exportBtn = async () => {
+      if (!state.selectedRowKeys?.length) {
+        return message.warning("请至少选择一条数据进行导出");
+      } else {
+        axios({
+          method: "get",
+          url: "/report/boeu/studyData/export",
+          params: { ids: `${state.selectedRowKeys}` },
+          responseType: "blob",
+          headers: {
+            token: Cookies.get("token"),
+          },
+        }).then((res) => {
+          downLoad(res.data, "案例.xlsx");
+        });
+      }
+    };
     // 表格数据
-    let tableData = ref([
+    let tableData = ref([]);
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-    ]);
     // cloumns 表头
     const columns = ref([
       {
         title: "工号",
-        dataIndex: "name",
+        dataIndex: "userNo",
-        key: "name",
+        key: "userNo",
         width: 120,
         ellipsis: true,
         align: "center",
       },
       {
         title: "姓名",
-        dataIndex: "manager",
+        dataIndex: "name",
         ellipsis: true,
-        key: "manager",
+        key: "name",
         width: 120,
         align: "center",
       },
       {
         title: "组织信息",
-        dataIndex: "manager",
+        dataIndex: "departmentName",
         ellipsis: true,
-        key: "manager",
+        key: "departmentName",
         width: 120,
         align: "center",
       },
       {
         title: "岗位",
-        dataIndex: "manager",
+        dataIndex: "jobName",
         ellipsis: true,
-        key: "manager",
+        key: "jobName",
         width: 120,
         align: "center",
       },
       {
         title: "Band",
-        dataIndex: "manager",
+        dataIndex: "bandCode",
         ellipsis: true,
-        key: "manager",
+        key: "bandCode",
         width: 120,
         align: "center",
       },
       {
         title: "授课次数",
-        dataIndex: "manager",
+        dataIndex: "teachingTotal",
         ellipsis: true,
-        key: "manager",
+        key: "teachingTotal",
         width: 120,
         align: "center",
       },
       {
         title: "授课时长(分钟)",
-        dataIndex: "manager",
+        dataIndex: "teachingTime",
         ellipsis: true,
-        key: "manager",
+        key: "teachingTime",
         width: 120,
         align: "center",
       },
       {
         title: "案例数",
-        dataIndex: "manager",
+        dataIndex: "caseTotal",
         ellipsis: true,
-        key: "manager",
+        key: "caseTotal",
         width: 120,
         align: "center",
       },
       {
         title: "学习项目",
-        dataIndex: "manager",
+        dataIndex: "studyProject",
         ellipsis: true,
-        key: "manager",
+        key: "studyProject",
         width: 120,
         align: "center",
       },
       {
         title: "学习路径",
-        dataIndex: "manager",
+        dataIndex: "studyRouter",
         ellipsis: true,
-        key: "manager",
+        key: "studyRouter",
         width: 120,
         align: "center",
       },
       {
         title: "学习课程",
-        dataIndex: "manager",
+        dataIndex: "studyClass",
         ellipsis: true,
-        key: "manager",
+        key: "studyClass",
         width: 120,
         align: "center",
       },
       {
         title: "累计学习时长(分钟)",
-        dataIndex: "manager",
+        dataIndex: "studyTaskName",
         ellipsis: true,
-        key: "manager",
+        key: "studyTaskName",
         width: 120,
         align: "center",
       },
@@ -214,17 +256,79 @@ export default {
         width: 150,
         align: "center",
         fixed: "right",
-        customRender: () => {
+        customRender: (record) => {
-          return <a>导出详细信息</a>;
+          return (
+            <a
+              key="export"
+              onClick={() => {
+                oneExport(record);
+              }}
+            >
+              导出详细信息
+            </a>
+          );
         },
       },
     ]);
+   // 行内单条下载
+   const oneExport = (record) => {
+      axios({
+          method: "get",
+          url: "/report/boeu/studyData/export",
+          params: { ids: `${record.record.id}` },
+          responseType: "blob",
+          headers: {
+            token: Cookies.get("token"),
+          },
+        }).then((res) => {
+          downLoad(res.data, "案例.xlsx");
+        });
+    };
     //table 分页事件
     const changePagination = (page) => {
       state.pageNo = page;
+      getTableData();
     };
-
+    // 获取数据
+    const getTableData = async () => {
+      state.tableLoading=true
+      const res = await api.boeuStudyDataPageList({
+        page: state.pageNo,
+        size: state.pageSize,
+        userNo: state.userNo,
+        name: state.name,
+        departmentId: state.orgId,
+        bandCode: state.band,
+      });
+      if (res) {
+        state.tableDataTotal = res.data.total;
+        const list = res.data.rows?.map((item) => {
           return {
+            key: item.id,
+            ...item,
+          };
+        });
+        tableData.value = list;
+        state.tableLoading=false
+      }
+    };
+    // 重置按钮
+    const reset = async () => {
+      state.orgId = null;
+      state.name = "";
+      state.band = "";
+      state.userNo = "";
+      getTableData();
+    };
+    onMounted(() => {
+      getTableData();
+      getOrgList();
+    });
+    return {
+      onSelectChange,
+      exportBtn,
+      reset,
+      getTableData,
       ...toRefs(state),
       tableData,
       columns,
@@ -248,29 +352,7 @@ export default {
     .select {
       margin-right: 20px;
       margin-bottom: 20px;
-      width: calc((100% - 76px - 360px) / 4);
+      width: calc((100% - 76px - 240px) / 4);
-    }
-
-    .addTimeBox {
-      width: calc((100% - 76px - 360px) / 4 + 120px) !important;
-      position: relative;
-      display: flex;
-      align-items: center;
-
-      .addTime {
-        position: absolute;
-        z-index: 10;
-        margin-left: 10px;
-        color: rgba(0, 0, 0, 0.4);
-      }
-
-      .ant-picker {
-        padding-left: 85px;
-      }
-
-      .ant-picker-range .ant-picker-active-bar {
-        margin-left: 85px;
-      }
     }
 
     .btn {

vue.config.js

@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 const {defineConfig} = require("@vue/cli-service");
-console.log('1111111111111111111111111111111111',process.env.VUE_APP_PROXY_URL)
+console.log('1111111111111111111111111111111111',process.env.VUE_APP_BOE_API_URL)
 module.exports = defineConfig({
     publicPath: process.env.VUE_APP_BASE,
     outputDir: process.env.VUE_APP_OUTPUT_DIR,
@@ -24,6 +24,14 @@ module.exports = defineConfig({
                 target: process.env.VUE_APP_BOE_API_URL,
                 changeOrigin: true, //表示是否改变原域名
             },
+            "/report": {
+                target: process.env.VUE_APP_BOE_API_URL,
+                changeOrigin: true, //表示是否改变原域名
+                pathRewrite: {
+                    // "^/manageApi": "",
+                },
+            },
+            
         },
     },
 });