hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-11 20:06:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 三期报表管理页面编写

Browse Source
This commit is contained in:
mx00085@163.com
2023-02-07 15:47:29 +08:00
parent d5a93142a7
commit e23339bea3
10 changed files with 3500 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/BreadCrumb.vue
View File

@@ -452,6 +452,84 @@ export default {
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 = [

100
src/components/NavLeft.vue
View File

@@ -312,11 +312,65 @@
<span
:class="{
circleActive: selectedKeys[0] === 'sub17-2-1' ? true : false,
circle: selectedKeys[0] === 'sub17--2-1' ? false : true,
circle: selectedKeys[0] === 'sub17-2-1' ? false : true,
}"
></span>
<router-link to="/learningpathmap">学习路径图</router-link>
</a-menu-item>
<a-menu-item key="sub17-2-2">
<span
:class="{
circleActive: selectedKeys[0] === 'sub17-2-2' ? true : false,
circle: selectedKeys[0] === 'sub17-2-2' ? false : true,
}"
></span>
<router-link to="/project">项目</router-link>
</a-menu-item>
<a-menu-item key="sub17-2-3">
<span
:class="{
circleActive: selectedKeys[0] === 'sub17-2-3' ? true : false,
circle: selectedKeys[0] === 'sub17-2-3' ? false : true,
}"
></span>
<router-link to="/curriculum">课程</router-link>
</a-menu-item>
<a-menu-item key="sub17-2-4">
<span
:class="{
circleActive: selectedKeys[0] === 'sub17-2-4' ? true : false,
circle: selectedKeys[0] === 'sub17-2-4' ? false : true,
}"
></span>
<router-link to="/caseess">案例</router-link>
</a-menu-item>
<a-menu-item key="sub17-2-5">
<span
:class="{
circleActive: selectedKeys[0] === 'sub17-2-5' ? true : false,
circle: selectedKeys[0] === 'sub17-2-5' ? false : true,
}"
></span>
<router-link to="/article">文章</router-link>
</a-menu-item>
<a-menu-item key="sub17-2-6">
<span
:class="{
circleActive: selectedKeys[0] === 'sub17-2-6' ? true : false,
circle: selectedKeys[0] === 'sub17-2-6' ? false : true,
}"
></span>
<router-link to="/questionsandanswers">问答</router-link>
</a-menu-item>
<a-menu-item key="sub17-2-7">
<span
:class="{
circleActive: selectedKeys[0] === 'sub17-2-7' ? true : false,
circle: selectedKeys[0] === 'sub17-2-7' ? false : true,
}"
></span>
<router-link to="/examination">考试</router-link>
</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub17-3" class="treeMenu">
<template #title>组织学习数据</template>
@@ -620,6 +674,42 @@ export default {
selectedKeys: "sub17-2-1",
pagename: "学习路径图",
},
{
href: "/project",
openKeys: "sub17",
selectedKeys: "sub17-2-2",
pagename: "项目",
},
{
href: "/curriculum",
openKeys: "sub17",
selectedKeys: "sub17-2-3",
pagename: "课程",
},
{
href: "/caseess",
openKeys: "sub17",
selectedKeys: "sub17-2-4",
pagename: "案例",
},
{
href: "/article",
openKeys: "sub17",
selectedKeys: "sub17-2-5",
pagename: "文章",
},
{
href: "/questionsandanswers",
openKeys: "sub17",
selectedKeys: "sub17-2-6",
pagename: "问答",
},
{
href: "/examination",
openKeys: "sub17",
selectedKeys: "sub17-2-7",
pagename: "考试",
},
{
href: "/overvoew",
openKeys: "sub17",
@@ -827,7 +917,7 @@ export default {
//修改左侧padding
.ant-menu-item,
.ant-menu-submenu-title {
padding-left: 9px !important;
padding-left: 10px !important;
height: 49px !important;
line-height: 49px !important;
margin: 0px !important;
@@ -840,7 +930,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
margin-right: 10px;
}
.ant-menu-submenu-arrow {
color: rgba(255, 255, 255, 1) !important;
@@ -872,7 +962,7 @@ export default {
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 1);
margin-left: 18px;
margin-right: 14px;
margin-right: 10px;
display: inline-block;
}
.circleActive {
@@ -881,7 +971,7 @@ export default {
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
margin-left: 18px;
margin-right: 14px;
margin-right: 10px;
display: inline-block;
}
}

392
src/views/report/Article.vue Normal file
View 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
View 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
View 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>

476
src/views/report/Examination.vue Normal file
View 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>

390
src/views/report/Learningpathmap.vue
View File

@@ -1,17 +1,207 @@
<template>
<!-- 学习路径图! -->
<div class="learningpathmap">
<div class="box">
学习路径图页面!
<!-- 以下为顶部搜索框 -->
<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">
@@ -20,5 +210,197 @@ export default {
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>

349
src/views/report/Operational.vue
View File

@@ -121,8 +121,92 @@
</div>
</div>
<div class="echartsThree">
<div class="left"></div>
<div class="right"></div>
<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>
@@ -134,6 +218,9 @@ export default {
setup() {
const surfaceRef = ref(null);
const surface1Ref = ref(null);
const surface2Ref = ref(null);
const surface3Ref = ref(null);
// 折线图配置项
const option = ref({
tooltip: {
trigger: "axis",
@@ -183,6 +270,52 @@ export default {
},
],
});
// 柱状图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([
{
@@ -228,18 +361,7 @@ export default {
long: 410,
},
]);
// const calMax = (arr) => {
// const max = Math.max.apply(null, arr);
// const maxint = Math.ceil(max / 5);
// const maxval = maxint * 5 + 50;
// return maxval;
// };
// const calMin = (arr) => {
// const min = Math.min.apply(null, arr);
// const minint = Math.floor(min / 1);
// const minval = minint / 1;
// return minval;
// };
// 处理图表数据的方法
const changeData = () => {
const timeList = [];
@@ -254,36 +376,32 @@ export default {
});
// 处理x轴显示信息
option.value.xAxis.data = timeList;
// 处理左侧Y轴显示信息
// const maxDataRight = calMax(personList);
// const minDataRight = calMin(personList);
// const maxDataLeft = calMax([...numList, longList]);
// const minDataLeft = calMin([...numList, longList]);
// option.value.yAxis[0].min = minDataLeft;
// option.value.yAxis[0].max = maxDataLeft;
// option.value.yAxis[0].splitNumber = 10;
// option.value.yAxis[0].interval = Math.floor(
// (maxDataLeft - minDataLeft) / 10
// );
// option.value.yAxis[1].min = minDataRight;
// option.value.yAxis[1].max = maxDataRight;
// option.value.yAxis[1].splitNumber = 10;
// option.value.yAxis[1].interval = Math.floor(
// (maxDataRight - minDataRight) / 10
// );
// 右侧坐标轴数据
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(() => {
@@ -292,6 +410,8 @@ export default {
return {
surfaceRef,
surface1Ref,
surface2Ref,
surface3Ref,
echartOneData,
};
},
@@ -301,9 +421,6 @@ export default {
.operational {
width: 100%;
height: 100%;
// display: flex;
// flex-direction: column;
// box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
padding: 0 38px;
@@ -428,24 +545,182 @@ export default {
}
.echartsThree {
width: 100%;
height: 400px;
height: 500px;
margin-top: 20px;
margin-bottom: 30px;
display: flex;
.left {
width: calc(50% - 5px);
height: 100%;
background: red;
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%;
background: chartreuse;
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;
}
}
}
}
}
}

466
src/views/report/Project.vue Normal file
View 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
View 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>