mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 10:56:46 +08:00
Merge branch 'develop' into 'pre-dev'
# Conflicts: # src/components/NavLeft.vue
This commit is contained in:
huangshengfa
22652
package-lock.json
generated
22652
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -19,6 +19,7 @@
|
||||
"babel-eslint": "^10.1.0",
|
||||
"core-js": "^3.8.3",
|
||||
"dayjs": "^1.11.6",
|
||||
"echarts": "^5.4.1",
|
||||
"element-plus": "^2.2.17",
|
||||
"element-resize-detector": "^1.2.4",
|
||||
"exceljs": "^4.3.0",
|
||||
@@ -31,6 +32,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"
|
||||
|
||||
72
src/api/confign.js
Normal file
72
src/api/confign.js
Normal file
@@ -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;
|
||||
74
src/api/configz.js
Normal file
74
src/api/configz.js
Normal file
@@ -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;
|
||||
25
src/api/indexOvervoew.js
Normal file
25
src/api/indexOvervoew.js
Normal file
@@ -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 userInfo = (obj) => https.post('/user/info', 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)
|
||||
// 概览页面 tab头数据
|
||||
export const boeuAllTotal = (obj) => http.get('/boeu/all/total', obj)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 348 B After Width: | Height: | Size: 391 B |
BIN
src/assets/svg/export.png
Normal file
BIN
src/assets/svg/export.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
1
src/assets/svg/export.svg
Normal file
1
src/assets/svg/export.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 13.66"><defs><style>.cls-1{fill:#387df7;}</style></defs><title>daochu备份</title><g id="报表管理-组织学习数据"><g id="组织学习数据-概览备份"><g id="编组-9"><g id="daochu备份"><path id="形状" class="cls-1" d="M12.62,7.61a.52.52,0,0,1,.52.51V12a1.84,1.84,0,0,1-1.84,1.83H1.83A1.83,1.83,0,0,1,0,12V2.52A1.83,1.83,0,0,1,1.83.69H7.09a.52.52,0,0,1,0,1H1.83A.79.79,0,0,0,1,2.52V12a.79.79,0,0,0,.79.79H11.3a.8.8,0,0,0,.8-.79V8.12a.51.51,0,0,1,.52-.51Zm1.2-4.37a.51.51,0,0,1,0,.78L10.91,6.93a.52.52,0,1,1-.73-.73l2-2c-4.51.3-6.3,2.26-6.3,6.7a.52.52,0,0,1-.26.45.53.53,0,0,1-.52,0,.52.52,0,0,1-.26-.45c0-5.07,2.24-7.44,7.42-7.74L10.18,1.06A.49.49,0,0,1,10,.56a.5.5,0,0,1,.37-.37.52.52,0,0,1,.5.14l2.91,2.91Z" transform="translate(0 -0.17)"/></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 872 B |
@@ -430,18 +430,147 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
if (
|
||||
|
||||
if (
|
||||
n.indexOf("/sonproject") !== -1 ||
|
||||
n.indexOf("/SonProject") !== -1
|
||||
) {
|
||||
state.list = [
|
||||
{
|
||||
name: "项目",
|
||||
href: "",
|
||||
},
|
||||
{
|
||||
name: "基础信息",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
if (n.indexOf("/operational") !== -1 || n.indexOf("/OperationaL") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "项目",
|
||||
href: "",
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name: "基础信息",
|
||||
name:'营运数据概览'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/learningpathmap") !== -1 || n.indexOf("/LearningPathMap") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'板块详细数据'
|
||||
},
|
||||
{
|
||||
name:'学习路径图'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/project") !== -1 || n.indexOf("/ProjecT") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'板块详细数据'
|
||||
},
|
||||
{
|
||||
name:'项目'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/curriculum") !== -1 || n.indexOf("/CurriculuM") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'板块详细数据'
|
||||
},
|
||||
{
|
||||
name:'课程'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/caseess") !== -1 || n.indexOf("/CaseesS") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'板块详细数据'
|
||||
},
|
||||
{
|
||||
name:'案例'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/article") !== -1 || n.indexOf("/ArticlE") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'板块详细数据'
|
||||
},
|
||||
{
|
||||
name:'文章'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/questionsandanswers") !== -1 || n.indexOf("/QuestionsAndAnswers") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'板块详细数据'
|
||||
},
|
||||
{
|
||||
name:'问答'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/examination") !== -1 || n.indexOf("/ExaminatioN") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'板块详细数据'
|
||||
},
|
||||
{
|
||||
name:'考试'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/overvoew") !== -1 || n.indexOf("/OvervoeW") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'组织学习数据'
|
||||
},
|
||||
{
|
||||
name:'概览'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/employeelearning") !== -1 || n.indexOf("/EmployeelearninG") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "报表中心",
|
||||
},
|
||||
{
|
||||
name:'组织学习数据'
|
||||
},
|
||||
{
|
||||
name:'员工学习数据'
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
@@ -808,20 +808,19 @@ export default {
|
||||
],
|
||||
});
|
||||
|
||||
// console.log(state.openKeys, state.selectedKeys);
|
||||
|
||||
const onOpenChange = (openKeys) => {
|
||||
const latestOpenKey = openKeys.find(
|
||||
(key) => state.openKeys.indexOf(key) === -1
|
||||
);
|
||||
if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
||||
state.openKeys = openKeys;
|
||||
console.log('111',openKeys)
|
||||
} else {
|
||||
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
||||
console.log('222222222222222')
|
||||
}
|
||||
};
|
||||
const selectItem = (e) => {
|
||||
// console.log("onSelect", e, );
|
||||
let arr = state.keysList;
|
||||
arr.map((value) => {
|
||||
if (e.key === value.selectedKeys) {
|
||||
@@ -830,9 +829,11 @@ export default {
|
||||
"selectedKeys",
|
||||
JSON.stringify([value.selectedKeys])
|
||||
);
|
||||
state.openKeys = [value.openKeys];
|
||||
// console.log('2222',[value.openKeys,value.openKeys2])
|
||||
state.openKeys = [value.openKeys,value.openKeys2];
|
||||
// state.openKeys=['sub17', 'sub17-2']
|
||||
state.selectedKeys = [value.selectedKeys];
|
||||
state.openKeys2 = [value.openKeys];
|
||||
state.openKeys2 = [value.openKeys,value.openKeys2];
|
||||
state.selectedKeys2 = [value.openKeys];
|
||||
}
|
||||
});
|
||||
@@ -933,12 +934,31 @@ 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: 40px !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.packup {
|
||||
width: 19px;
|
||||
height: 15px;
|
||||
@@ -970,7 +990,7 @@ export default {
|
||||
.ant-menu-title-content {
|
||||
padding: 0px !important;
|
||||
// padding-left: 27px !important;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
@@ -980,7 +1000,7 @@ export default {
|
||||
|
||||
.ant-menu-item a,
|
||||
.ant-menu-item a:hover {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
@@ -996,7 +1016,7 @@ export default {
|
||||
//修改左侧padding
|
||||
.ant-menu-item,
|
||||
.ant-menu-submenu-title {
|
||||
padding-left: 27px !important;
|
||||
padding-left: 14px !important;
|
||||
height: 49px !important;
|
||||
line-height: 49px !important;
|
||||
margin: 0px !important;
|
||||
@@ -1009,7 +1029,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ant-menu-submenu-arrow {
|
||||
@@ -1044,8 +1064,8 @@ export default {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgba(255, 255, 255, 1);
|
||||
margin-left: 24px;
|
||||
margin-right: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -1054,8 +1074,8 @@ export default {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
margin-left: 24px;
|
||||
margin-right: 18px;
|
||||
margin-left: 18px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@ export default {
|
||||
const state = reactive({
|
||||
openList: store.state.openpages,
|
||||
});
|
||||
|
||||
console.log('state111111',state)
|
||||
const closePage = (value) => {
|
||||
console.log("点击关闭页面", value, state.openList);
|
||||
|
||||
|
||||
18
src/utils/downLoad.js
Normal file
18
src/utils/downLoad.js
Normal file
@@ -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
|
||||
392
src/views/report/Article.vue
Normal file
392
src/views/report/Article.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<!-- 文章! -->
|
||||
<div class="article">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入文章名称"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "ArticlE",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
});
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
|
||||
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: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "浏览量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "评论数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "分享量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "点赞量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "收藏数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "文章状态",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
]);
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.article {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 340px) / 3);
|
||||
}
|
||||
|
||||
.addTimeBox {
|
||||
width: calc((100% - 76px - 340px) / 3 + 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 {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-right: 0px !important;
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.pa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
392
src/views/report/Caseess.vue
Normal file
392
src/views/report/Caseess.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<!-- 案例! -->
|
||||
<div class="caseess">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入案例名称"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入作者名称"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "CaseesS",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
});
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
|
||||
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: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "案例名称",
|
||||
dataIndex: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "专业分类",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "浏览量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "评分数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "分享量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "收藏数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
]);
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.caseess {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 340px) / 3);
|
||||
}
|
||||
|
||||
.addTimeBox {
|
||||
width: calc((100% - 76px - 340px) / 3 + 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 {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-right: 0px !important;
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.pa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
507
src/views/report/Curriculum.vue
Normal file
507
src/views/report/Curriculum.vue
Normal file
@@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<!-- 课程! -->
|
||||
<div class="curriculum">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入课程名称"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择归属组织"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择分类"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出列表信息</div>
|
||||
</div>
|
||||
<div class="btn btn3" style="margin-left: 20px">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出详细信息</div>
|
||||
</div>
|
||||
<div class="btn btn3" style="margin-left: 20px">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">开课数据导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "CurriculuM",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
});
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
|
||||
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: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: "课程名称",
|
||||
dataIndex: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "归属路径图",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "归属项目",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "一级分类",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "二级分类",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "三级分类",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "授课教师",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "开课次数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "学习总人数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "评论数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "点赞数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "收藏数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "平均评分",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: "课程状态",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "operation",
|
||||
key: "operation",
|
||||
width: 150,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
customRender: () => {
|
||||
return <a>导出详细信息</a>;
|
||||
},
|
||||
},
|
||||
]);
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.curriculum {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 370px) / 5);
|
||||
}
|
||||
|
||||
.addTimeBox {
|
||||
width: calc((100% - 76px - 360px) / 5 + 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 {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-right: 0px !important;
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.pa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
558
src/views/report/Employeelearning.vue
Normal file
558
src/views/report/Employeelearning.vue
Normal file
@@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<!-- 员工学习数据页面 -->
|
||||
<div class="employeelearning">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
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="请输入姓名"
|
||||
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
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<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" @click="getTableData">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2" @click="reset">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3" @click="exportAllBtn" style="margin-right: 20px">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出全部</div>
|
||||
</div>
|
||||
<div class="btn btn3" @click="exportBtn">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
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: 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;
|
||||
getOrgId();
|
||||
}
|
||||
};
|
||||
//导出
|
||||
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([]);
|
||||
// cloumns 表头
|
||||
const columns = ref([
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: "userNo",
|
||||
key: "userNo",
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "name",
|
||||
ellipsis: true,
|
||||
key: "name",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "组织信息",
|
||||
dataIndex: "departmentName",
|
||||
ellipsis: true,
|
||||
key: "departmentName",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "岗位",
|
||||
dataIndex: "jobName",
|
||||
ellipsis: true,
|
||||
key: "jobName",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Band",
|
||||
dataIndex: "bandCode",
|
||||
ellipsis: true,
|
||||
key: "bandCode",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "授课次数",
|
||||
dataIndex: "teachingTotal",
|
||||
ellipsis: true,
|
||||
key: "teachingTotal",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "授课时长(分钟)",
|
||||
dataIndex: "teachingTime",
|
||||
ellipsis: true,
|
||||
key: "teachingTime",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "案例数",
|
||||
dataIndex: "caseTotal",
|
||||
ellipsis: true,
|
||||
key: "caseTotal",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "学习项目",
|
||||
dataIndex: "studyProject",
|
||||
ellipsis: true,
|
||||
key: "studyProject",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "学习路径",
|
||||
dataIndex: "studyRouter",
|
||||
ellipsis: true,
|
||||
key: "studyRouter",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "学习课程",
|
||||
dataIndex: "studyClass",
|
||||
ellipsis: true,
|
||||
key: "studyClass",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "累计学习时长(分钟)",
|
||||
dataIndex: "studyTimeSum",
|
||||
ellipsis: true,
|
||||
key: "studyTimeSum",
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "operation",
|
||||
key: "operation",
|
||||
width: 150,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
customRender: (record) => {
|
||||
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.tableLoading = true;
|
||||
state.name = "";
|
||||
state.band = "";
|
||||
state.userNo = "";
|
||||
getOrgId();
|
||||
};
|
||||
// 获取登录人员组织
|
||||
const getOrgId = async () => {
|
||||
const res = await api.userInfo({});
|
||||
if (res) {
|
||||
state.orgId = res.data.result.departId;
|
||||
getTableData();
|
||||
}
|
||||
};
|
||||
// 导出全部按钮
|
||||
const exportAllBtn = async () => {
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/studyData/exportAll",
|
||||
data: {
|
||||
userNo: state.userNo,
|
||||
name: state.name,
|
||||
departmentId: state.orgId,
|
||||
bandCode: state.band,
|
||||
},
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then((res) => {
|
||||
downLoad(res.data, "学习员工数据.xlsx");
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getOrgList();
|
||||
state.tableLoading = true;
|
||||
});
|
||||
return {
|
||||
exportAllBtn,
|
||||
onSelectChange,
|
||||
exportBtn,
|
||||
reset,
|
||||
getTableData,
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.employeelearning {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 240px) / 4);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
476
src/views/report/Examination.vue
Normal file
476
src/views/report/Examination.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<!-- 考试! -->
|
||||
<div class="examination">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入考试名称"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择归属组织"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "ExaminatioN",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
});
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
|
||||
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: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "课程名称",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "项目名称",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "学习路径名称",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试人数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试次数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "题量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试时长",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试满分",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试合格分",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "平均答题时长",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "平均得分",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试通过率",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "operation",
|
||||
key: "operation",
|
||||
width: 150,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
customRender: () => {
|
||||
return <a>导出详细信息</a>;
|
||||
},
|
||||
},
|
||||
]);
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.examination {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 360px) / 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 {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-right: 0px !important;
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.pa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
406
src/views/report/Learningpathmap.vue
Normal file
406
src/views/report/Learningpathmap.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<!-- 学习路径图! -->
|
||||
<div class="learningpathmap">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<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="请选择归属组织"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入路径名称"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出列表信息</div>
|
||||
</div>
|
||||
<div class="btn btn3" style="margin-left: 20px">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出详细信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "LearningPathMap",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
});
|
||||
// 表格数据
|
||||
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",
|
||||
key: "name",
|
||||
ellipsis: true,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "路径名称",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "关卡数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "任务数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "学习人数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "完成人数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "路径状态",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "operation",
|
||||
key: "operation",
|
||||
width: 150,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
customRender: () => {
|
||||
return <a>导出历史记录</a>;
|
||||
},
|
||||
},
|
||||
]);
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.learningpathmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 360px) / 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 {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-right: 0px !important;
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.pa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
730
src/views/report/Operational.vue
Normal file
730
src/views/report/Operational.vue
Normal file
@@ -0,0 +1,730 @@
|
||||
<template>
|
||||
<!-- 营运数据概览页面! -->
|
||||
<div class="operational">
|
||||
<div class="echartsOne">
|
||||
<div class="title">
|
||||
<div class="left">用户活动趋势</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/svg/export.png" alt="" />
|
||||
<span>导出活动详情</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="left">
|
||||
<div class="leftItem">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择模块"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="leftItem">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择日期格式"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="leftItem">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div class="leftItem">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择入口"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts" ref="surfaceRef"></div>
|
||||
<div class="msg">
|
||||
<div class="item">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">停留时长</div>
|
||||
</div>
|
||||
<div class="item1">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">访问人数</div>
|
||||
</div>
|
||||
<div class="item2">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">访问次数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartsTwo">
|
||||
<div class="title">
|
||||
<div class="left">学习情况</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/svg/export.png" alt="" />
|
||||
<span>导出活动详情</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="left">
|
||||
<div class="leftItem">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择模块"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="leftItem">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择日期格式"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="leftItem">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts" ref="surface1Ref"></div>
|
||||
<div class="msg">
|
||||
<div class="item">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">总学习人数</div>
|
||||
</div>
|
||||
<div class="item1">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">人均学习时长</div>
|
||||
</div>
|
||||
<div class="item2">
|
||||
<div class="start" />
|
||||
<div class="radio" />
|
||||
<div class="end" />
|
||||
<div class="text">总学习时长</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartsThree">
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<div class="leftTile">学习内容</div>
|
||||
<div class="rightTile">
|
||||
<img src="../../assets/svg/export.png" alt="" />
|
||||
<span>导出学习内容</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchThree">
|
||||
<div class="leftSearch">
|
||||
<div class="leftItemSearch">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择日期格式"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="timeItemSearch">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftEacharts" ref="surface2Ref"></div>
|
||||
<div class="threeMsg">
|
||||
<div class="threeMsgItem">
|
||||
<div class="classNum" />
|
||||
<div class="MsgItemText">课程数</div>
|
||||
</div>
|
||||
<div class="threeMsgItem">
|
||||
<div class="projectNum" />
|
||||
<div class="MsgItemText">项目数</div>
|
||||
</div>
|
||||
<div class="threeMsgItem">
|
||||
<div class="study" />
|
||||
<div class="MsgItemText">学习路径图</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
<div class="leftTile">学习内容</div>
|
||||
<div class="rightTile">
|
||||
<img src="../../assets/svg/export.png" alt="" />
|
||||
<span>导出学习内容</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchThree">
|
||||
<div class="leftSearch">
|
||||
<div class="leftItemSearch">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择日期格式"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="timeItemSearch">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftEacharts" ref="surface3Ref"></div>
|
||||
<div class="threeMsg">
|
||||
<div class="threeMsgItem">
|
||||
<div class="classNum" />
|
||||
<div class="MsgItemText">案例</div>
|
||||
</div>
|
||||
<div class="threeMsgItem">
|
||||
<div class="projectNum" />
|
||||
<div class="MsgItemText">文章</div>
|
||||
</div>
|
||||
<div class="threeMsgItem">
|
||||
<div class="study" />
|
||||
<div class="MsgItemText">问答</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref } from "vue";
|
||||
export default {
|
||||
name: "OperationaL",
|
||||
setup() {
|
||||
const surfaceRef = ref(null);
|
||||
const surface1Ref = ref(null);
|
||||
const surface2Ref = ref(null);
|
||||
const surface3Ref = ref(null);
|
||||
// 折线图配置项
|
||||
const option = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
top: "6%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "访问人数",
|
||||
type: "line",
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "访问次数",
|
||||
type: "line",
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "停留时长",
|
||||
type: "line",
|
||||
data: [],
|
||||
yAxisIndex: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
// 柱状图1配置项
|
||||
const options = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
top: "6%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "课程数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#1487F9",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "项目数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#00CECB",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "学习路径图",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#FFA71A",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
// 图表1 数据源
|
||||
const echartOneData = ref([
|
||||
{
|
||||
time: "1月",
|
||||
person: 20,
|
||||
num: 220,
|
||||
long: 150,
|
||||
},
|
||||
{
|
||||
time: "2月",
|
||||
person: 32,
|
||||
num: 182,
|
||||
long: 232,
|
||||
},
|
||||
{
|
||||
time: "3月",
|
||||
person: 40,
|
||||
num: 191,
|
||||
long: 201,
|
||||
},
|
||||
{
|
||||
time: "4月",
|
||||
person: 1,
|
||||
num: 234,
|
||||
long: 154,
|
||||
},
|
||||
{
|
||||
time: "5月",
|
||||
person: 90,
|
||||
num: 290,
|
||||
long: 190,
|
||||
},
|
||||
{
|
||||
time: "6月",
|
||||
person: 30,
|
||||
num: 330,
|
||||
long: 330,
|
||||
},
|
||||
{
|
||||
time: "7月",
|
||||
person: 10,
|
||||
num: 310,
|
||||
long: 410,
|
||||
},
|
||||
]);
|
||||
|
||||
// 处理图表数据的方法
|
||||
const changeData = () => {
|
||||
const timeList = [];
|
||||
const personList = [];
|
||||
const numList = [];
|
||||
const longList = [];
|
||||
echartOneData.value?.forEach((item) => {
|
||||
timeList.push(item.time);
|
||||
personList.push(item.person);
|
||||
numList.push(item.num);
|
||||
longList.push(item.long);
|
||||
});
|
||||
// 处理x轴显示信息
|
||||
option.value.xAxis.data = timeList;
|
||||
// 右侧坐标轴数据
|
||||
option.value.series[0].data = personList;
|
||||
//左侧坐标轴数据
|
||||
option.value.series[1].data = numList;
|
||||
option.value.series[2].data = longList;
|
||||
// 柱状图1
|
||||
options.value.xAxis.data = timeList;
|
||||
options.value.series[0].data = personList;
|
||||
options.value.series[1].data = numList;
|
||||
options.value.series[2].data = longList;
|
||||
};
|
||||
// 生成echarts的方法
|
||||
const createEcharts = () => {
|
||||
changeData();
|
||||
// 图表1
|
||||
const myChart = echarts.init(surfaceRef.value);
|
||||
option.value && myChart.setOption(option.value);
|
||||
// 图表2
|
||||
const myChart1 = echarts.init(surface1Ref.value);
|
||||
option.value && myChart1.setOption(option.value);
|
||||
// 图表3左侧图表
|
||||
const myChart2 = echarts.init(surface2Ref.value);
|
||||
options.value && myChart2.setOption(options.value);
|
||||
// 图表3 右侧图表
|
||||
const myChart3 = echarts.init(surface3Ref.value);
|
||||
options.value && myChart3.setOption(options.value);
|
||||
};
|
||||
// 挂载完成
|
||||
onMounted(() => {
|
||||
createEcharts();
|
||||
});
|
||||
return {
|
||||
surfaceRef,
|
||||
surface1Ref,
|
||||
surface2Ref,
|
||||
surface3Ref,
|
||||
echartOneData,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.operational {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 38px;
|
||||
.echartsOne,
|
||||
.echartsTwo {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: 1px solid rgba(232, 236, 239, 1);
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
.search {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.left {
|
||||
display: flex;
|
||||
.leftItem {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.left {
|
||||
font-size: 18px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
}
|
||||
.right {
|
||||
padding: 0 15px;
|
||||
background: white;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
border-radius: 4px;
|
||||
color: #387df7;
|
||||
border: 1px solid #387df7;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin-top: -3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.right:hover {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.echarts {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
.msg {
|
||||
margin-left: calc(50% - 135px);
|
||||
width: 330px;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
.start,
|
||||
.end {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
background: #387df7;
|
||||
// margin-top: 4px;
|
||||
}
|
||||
.radio {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #387df7;
|
||||
}
|
||||
.text {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
.item1 {
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.start,
|
||||
.end {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
background: #00cecb;
|
||||
// margin-top: 4px;
|
||||
}
|
||||
.radio {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #00cecb;
|
||||
}
|
||||
.text {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
.item2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.start,
|
||||
.end {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
background: #ffa71a;
|
||||
// margin-top: 4px;
|
||||
}
|
||||
.radio {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ffa71a;
|
||||
}
|
||||
.text {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.echartsThree {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
.left {
|
||||
width: calc(50% - 5px);
|
||||
height: 100%;
|
||||
border: 1px solid rgba(232, 236, 239, 1);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
.leftEacharts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.leftTile {
|
||||
font-size: 18px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rightTile {
|
||||
padding: 0 15px;
|
||||
background: white;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
border-radius: 4px;
|
||||
color: #387df7;
|
||||
border: 1px solid #387df7;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin-top: -3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.rightTile:hover {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.searchThree {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.leftSearch {
|
||||
display: flex;
|
||||
.leftItemSearch {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.timeItemSearch {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.threeMsg {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 275px;
|
||||
margin-left: calc(50% - 133px);
|
||||
.threeMsgItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
.classNum {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background: #1487f9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.projectNum {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background: #00cecb;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.study {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background: #ffa71a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.MsgItemText {
|
||||
margin-left: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
width: calc(50% - 5px);
|
||||
height: 100%;
|
||||
border: 1px solid rgba(232, 236, 239, 1);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
.leftEacharts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.leftTile {
|
||||
font-size: 18px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rightTile {
|
||||
padding: 0 15px;
|
||||
background: white;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
border-radius: 4px;
|
||||
color: #387df7;
|
||||
border: 1px solid #387df7;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin-top: -3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.rightTile:hover {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.searchThree {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.leftSearch {
|
||||
display: flex;
|
||||
.leftItemSearch {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.timeItemSearch {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.threeMsg {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 275px;
|
||||
margin-left: calc(50% - 133px);
|
||||
.threeMsgItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
.classNum {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background: #1487f9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.projectNum {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background: #00cecb;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.study {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background: #ffa71a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.MsgItemText {
|
||||
margin-left: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
1561
src/views/report/Overvoew.vue
Normal file
1561
src/views/report/Overvoew.vue
Normal file
File diff suppressed because it is too large
Load Diff
466
src/views/report/Project.vue
Normal file
466
src/views/report/Project.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<!-- 项目! -->
|
||||
<div class="project">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入项目名称"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择归属组织"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="项目状态"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出列表信息</div>
|
||||
</div>
|
||||
<div class="btn btn3" style="margin-left: 20px">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出详细信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "ProjecT",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
});
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
let tableData = ref([
|
||||
{
|
||||
key: 1,
|
||||
name: "John Brown sr.",
|
||||
age: 60,
|
||||
address: "New York No. 1 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: "John Brown",
|
||||
age: 42,
|
||||
address: "New York No. 2 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
name: "John Brown jr.",
|
||||
age: 30,
|
||||
address: "New York No. 3 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
name: "Jimmy Brown",
|
||||
age: 16,
|
||||
address: "New York No. 3 Lake Park",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 13,
|
||||
name: "Jim Green sr.",
|
||||
age: 72,
|
||||
address: "London No. 1 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 131,
|
||||
name: "Jim Green",
|
||||
age: 42,
|
||||
address: "London No. 2 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 1311,
|
||||
name: "Jim Green jr.",
|
||||
age: 25,
|
||||
address: "London No. 3 Lake Park",
|
||||
},
|
||||
{
|
||||
key: 1312,
|
||||
name: "Jimmy Green sr.",
|
||||
age: 18,
|
||||
address: "London No. 4 Lake Park",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park",
|
||||
},
|
||||
]);
|
||||
// cloumns 表头
|
||||
const columns = ref([
|
||||
{
|
||||
title: "项目名称",
|
||||
dataIndex: "name",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
title: "编号",
|
||||
dataIndex: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "项目分类",
|
||||
dataIndex: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "资源归属",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "阶段总数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "任务总数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "参加人数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "完成人数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "项目状态",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
]);
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.project {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 370px) / 5);
|
||||
}
|
||||
|
||||
.addTimeBox {
|
||||
width: calc((100% - 76px - 360px) / 5 + 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 {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-right: 0px !important;
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.pa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
392
src/views/report/Questionsandanswers.vue
Normal file
392
src/views/report/Questionsandanswers.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<!-- 问答! -->
|
||||
<div class="questionsandanswers">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入问答标题"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
v-model:current="pageNo"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePagination"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "QuestionsAndAnswers",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
});
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
|
||||
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: "age",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "浏览量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "评论数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "分享量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "点赞量",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "收藏数",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "问答状态",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
dataIndex: "manager",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
align: "center",
|
||||
},
|
||||
]);
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.questionsandanswers {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter {
|
||||
margin-left: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 340px) / 3);
|
||||
}
|
||||
|
||||
.addTimeBox {
|
||||
width: calc((100% - 76px - 340px) / 3 + 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 {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-right: 0px !important;
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn1:active {
|
||||
background: #0982ff;
|
||||
}
|
||||
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn2:active {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 38px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4ea6ff;
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
}
|
||||
|
||||
.btn3:hover {
|
||||
// background: rgba(64, 158, 255, 0.76);
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
// .btn3:active {
|
||||
// background: #0982ff;
|
||||
// }
|
||||
}
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #eff4fc;
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.pa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,23 +2,25 @@
|
||||
* @Author: lixg lixg@dongwu-inc.com
|
||||
* @Date: 2022-11-21 14:32:52
|
||||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||||
* @LastEditTime: 2022-12-14 17:38:38
|
||||
* @LastEditTime: 2023-02-24 09:03:55
|
||||
* @FilePath: /fe-manage/vue.config.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
const { defineConfig } = require("@vue/cli-service");
|
||||
|
||||
module.exports = defineConfig({
|
||||
lintOnSave: false,
|
||||
publicPath: process.env.VUE_APP_BASE,
|
||||
outputDir: process.env.VUE_APP_OUTPUT_DIR,
|
||||
devServer: {
|
||||
port: 8070,
|
||||
proxy: {
|
||||
"/manageApi": {
|
||||
target: 'http:' + process.env.VUE_APP_PROXY_URL,
|
||||
// target: 'http:' + process.env.VUE_APP_PROXY_URL,
|
||||
target: 'http://localhost:30001',
|
||||
changeOrigin: true, //表示是否改变原域名
|
||||
pathRewrite: {
|
||||
"^/manageApi": "",
|
||||
// "^/manageApi": "",
|
||||
},
|
||||
}, "/userbasic": {
|
||||
target: 'https:' + process.env.VUE_APP_BOE_API_URL,
|
||||
@@ -32,6 +34,13 @@ module.exports = defineConfig({
|
||||
target: 'https:' + process.env.VUE_APP_BOE_API_URL,
|
||||
changeOrigin: true, //表示是否改变原域名
|
||||
},
|
||||
"/report": {
|
||||
target:'https:'+ process.env.VUE_APP_BOE_API_URL,
|
||||
changeOrigin: true, //表示是否改变原域名
|
||||
pathRewrite: {
|
||||
// "^/manageApi": "",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user