报到数据
This commit is contained in:
liuye
@@ -1,35 +1,22 @@
|
||||
<template>
|
||||
<section class="Statistics">
|
||||
<div class="left">
|
||||
<header>应报到单位名单</header>
|
||||
<div class="left_tree">
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="filterText"
|
||||
placeholder="请输入单位..."
|
||||
suffix-icon="iconfont iconSearch"
|
||||
clearable
|
||||
></el-input>
|
||||
<div class="left_cont">
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
ref="tree"
|
||||
node-key="partyOrgId"
|
||||
empty-text="搜索不到相关内容"
|
||||
@node-click="handleNodeClick"
|
||||
:default-expanded-keys="[user.info.organizationId]"
|
||||
:filter-node-method="filterNode"
|
||||
:highlight-current="true"
|
||||
:current-node-key="defaultArr"
|
||||
v-if="treeData.length > 0"
|
||||
>
|
||||
</el-tree>
|
||||
<div v-else class="no-data" style="height: 70%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ai-list class="Statistics">
|
||||
<template #left>
|
||||
<ai-tree-menu
|
||||
title="应报到单位名单"
|
||||
searchPlaceholder="请输入单位..."
|
||||
@search="onSearch"
|
||||
>
|
||||
<ai-party-tree
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
:instance="instance"
|
||||
:root="user.info.organizationId"
|
||||
:current-node-key="selected.id"
|
||||
@select="handleNodeClick"
|
||||
/>
|
||||
</ai-tree-menu>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="top">
|
||||
<header>近12个月学员活动参与情况统计</header>
|
||||
<div class="month" id="month"></div>
|
||||
@@ -96,13 +83,8 @@
|
||||
<span ref="border"></span>
|
||||
</ul>
|
||||
</header>
|
||||
<el-row
|
||||
type="flex"
|
||||
justify="space-between"
|
||||
align="middle"
|
||||
style="padding: 8px 16px"
|
||||
>
|
||||
<el-col>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-date-picker
|
||||
v-model="searchObj.ymd"
|
||||
type="month"
|
||||
@@ -121,116 +103,37 @@
|
||||
:disabled="!Boolean(tableData.length)"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col style="display: flex; justify-content: space-between">
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="searchObj.name"
|
||||
placeholder="姓名"
|
||||
prefix-icon="iconfont iconSearch"
|
||||
size="small"
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
style="width: 220px; margin-right: 4px"
|
||||
@keyup.enter.native="searchList()"
|
||||
@change="(search.current = 1), searchList()"
|
||||
suffix-icon="iconfont iconSearch"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="iconfont iconSearch"
|
||||
size="small"
|
||||
@click="searchList()"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-refresh-right"
|
||||
size="small"
|
||||
@click="(searchObj.name = ''), searchList()"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="padding: 0 16px; box-sizing: border-box">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
header-cell-class-name="table-header"
|
||||
tooltip-effect="light"
|
||||
row-class-name="table-row"
|
||||
cell-class-name="table-cell"
|
||||
height="260"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
show-tooltip-when-overflow
|
||||
>
|
||||
<span slot-scope="{ row }">{{ row.name || "-" }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sex"
|
||||
label="性别"
|
||||
show-tooltip-when-overflow
|
||||
align="center"
|
||||
>
|
||||
<span slot-scope="{ row }">
|
||||
{{ dict.getLabel("sex", row.sex) || "-" }}
|
||||
</span>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="partyOrg"
|
||||
label="所属组织"
|
||||
show-tooltip-when-overflow
|
||||
>
|
||||
<span slot-scope="{ row }">{{ row.partyOrg || "-" }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="signupCount"
|
||||
label="报名次数"
|
||||
show-tooltip-when-overflow
|
||||
align="center"
|
||||
>
|
||||
<span slot-scope="{ row }">{{ row.signupCount }}</span>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="partakeCount"
|
||||
label="参与次数"
|
||||
show-tooltip-when-overflow
|
||||
align="center"
|
||||
>
|
||||
<span slot-scope="{ row }">{{ row.partakeCount }}</span>
|
||||
</el-table-column>
|
||||
<div slot="empty" class="no-data" style="height: 160px"></div>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
@current-change="
|
||||
(v) => {
|
||||
page.current = v;
|
||||
searchList();
|
||||
}
|
||||
"
|
||||
@size-change="
|
||||
(v) => {
|
||||
page.size = v;
|
||||
page.current = 1;
|
||||
searchList();
|
||||
}
|
||||
"
|
||||
:current-page.sync="page.current"
|
||||
:total="page.total"
|
||||
layout="total,prev, pager, next,sizes, jumper"
|
||||
:page-size="page.size"
|
||||
:page-sizes="[5, 10, 20, 50, 100]"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:dict="dict"
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
style="margin-top: 6px"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@getList="searchList"
|
||||
>
|
||||
</ai-table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import * as echarts from 'echarts'
|
||||
import { mapState } from "vuex";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
export default {
|
||||
name: "Statistics",
|
||||
@@ -241,7 +144,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [],
|
||||
filterText: "",
|
||||
defaultArr: "",
|
||||
partyOrgId: "", //当前选中的id
|
||||
@@ -260,6 +162,19 @@ export default {
|
||||
current: 1,
|
||||
total: 0,
|
||||
},
|
||||
selected: {},
|
||||
colConfigs: [
|
||||
{ prop: "name", label: "姓名", align: "center" },
|
||||
{ prop: "sex", label: "性别", align: "center", dict: "sex" },
|
||||
{ prop: "partyOrg", label: "所属组织", align: "center" },
|
||||
{ prop: "signupCount", label: "报名次数", align: "center", width: 150 },
|
||||
{
|
||||
prop: "partakeCount",
|
||||
label: "参与次数",
|
||||
align: "center",
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -281,10 +196,14 @@ export default {
|
||||
label: "label",
|
||||
};
|
||||
},
|
||||
orgTree() {
|
||||
return this.$refs.tree?.$refs?.partyTree;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
this.partyOrgId = data.partyOrgId;
|
||||
this.selected = data;
|
||||
this.partyOrgId = data.id;
|
||||
this.activeId = "0";
|
||||
this.searchObj.name = "";
|
||||
this.searchObj.listType = "0";
|
||||
@@ -296,39 +215,7 @@ export default {
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 根据登录用户单位查 树形结构
|
||||
searchSysAll() {
|
||||
this.treeData = [];
|
||||
this.instance
|
||||
.post("/app/apppartyreportconfig/party-list", null, {
|
||||
params: { id: this.user.info.organizationId },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res && res.code == 0) {
|
||||
res.data = res.data.map((a) => {
|
||||
if (a.partyMemberCount) {
|
||||
return {
|
||||
...a,
|
||||
label: `${a.partyOrgName}（${a.partyMemberCount}）`,
|
||||
};
|
||||
} else {
|
||||
return { ...a, label: a.partyOrgName };
|
||||
}
|
||||
// ${a.partyOrgName}（${a.partyMemberCount}）
|
||||
});
|
||||
this.treeData = res.data.filter(
|
||||
(e) => e.partyOrgId == this.user.info.organizationId
|
||||
);
|
||||
this.handleNodeClick(this.treeData[0]);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(this.treeData[0].partyOrgId);
|
||||
});
|
||||
this.defaultArr = this.treeData[0].partyOrgId;
|
||||
this.treeData.map((t) => this.addChildParty(t, res.data));
|
||||
}
|
||||
});
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
month12() {
|
||||
this.instance
|
||||
@@ -563,9 +450,12 @@ export default {
|
||||
let year = mydate.getFullYear();
|
||||
return `${year}-${mymonth}-01`;
|
||||
},
|
||||
|
||||
onSearch(v) {
|
||||
this.orgTree.filter(v);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.searchSysAll();
|
||||
this.partyOrgId = this.user.info.organizationId;
|
||||
this.dict.load("partyReportSignupReportType", "sex");
|
||||
this.selectMonth = this.getNowDate();
|
||||
@@ -586,247 +476,170 @@ export default {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
.left {
|
||||
width: 264px;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 288px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
height: 1104px;
|
||||
border: 1px solid rgba(216, 220, 227, 1);
|
||||
float: left;
|
||||
|
||||
header {
|
||||
color: #333333;
|
||||
padding: 0 16px;
|
||||
color: #222;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #eeeff1;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.left_tree {
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.left_cont {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 60px);
|
||||
|
||||
::v-deep .el-tree {
|
||||
background-color: #fff;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.right_btn {
|
||||
width: 96px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
padding: 4px 0;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
|
||||
li {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
text-indent: 12px;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: #eff6ff;
|
||||
color: #5088ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 47px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 47px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__children {
|
||||
width: 240px;
|
||||
overflow-x: scroll;
|
||||
.month {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 47px);
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 280px);
|
||||
float: right;
|
||||
height: 1104px;
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
margin-top: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 288px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
header {
|
||||
color: #333333;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
height: 47px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 47px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.month {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 47px);
|
||||
}
|
||||
header {
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.middle {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
margin-top: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
header {
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
.middle-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 48%;
|
||||
height: 112px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 4%;
|
||||
|
||||
&:nth-of-type(2n - 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
height: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.num {
|
||||
height: 80px;
|
||||
line-height: 60px;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
color: #2266ff;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span:nth-of-type(2) {
|
||||
font-size: 16px;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.middle-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 464px;
|
||||
margin-top: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgb(241, 237, 237);
|
||||
.middle-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 160px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
transition: opacity 1s;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
width: 48%;
|
||||
height: 112px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 4%;
|
||||
|
||||
&:hover {
|
||||
color: rgba(34, 102, 255, 1);
|
||||
&:nth-of-type(2n - 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
height: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.num {
|
||||
height: 80px;
|
||||
line-height: 60px;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
color: #2266ff;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span:nth-of-type(2) {
|
||||
font-size: 16px;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activeNav {
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
.middle-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 464px;
|
||||
margin-top: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgb(241, 237, 237);
|
||||
margin-bottom: 16px;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
width: 160px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
transition: opacity 1s;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
color: rgba(34, 102, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
width: 160px;
|
||||
height: 3px;
|
||||
display: block;
|
||||
background-color: rgba(34, 102, 255, 1);
|
||||
transition: left 0.5s;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.activeNav {
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
color: rgba(34, 102, 255, 1);
|
||||
}
|
||||
|
||||
span {
|
||||
width: 160px;
|
||||
height: 3px;
|
||||
display: block;
|
||||
background-color: rgba(34, 102, 255, 1);
|
||||
transition: left 0.5s;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -836,4 +649,4 @@ export default {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user