c-zhangr1/UNION_NJUST
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

南京理工查询统计（数据看板）优化整改: 会员管理和医疗互助统计总数加点击详情弹出人员列表；

Browse Source
This commit is contained in:
c-duxc1
2026-10-10 10:26:46 +08:00
parent d551f8c94e
commit f9a87d12e2
6 changed files with 988 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/io/v/nutz/diseaseaid/controller/DiseaseAidDashBoard.java
+206
View File
@@ -1,21 +1,31 @@
package io.v.nutz.diseaseaid.controller;
import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.afterturn.easypoi.excel.entity.ExportParams;
import cn.afterturn.easypoi.excel.entity.params.ExcelExportEntity;
import io.v.nutz.annontation.ViReturn;
import io.v.nutz.base.utils.DateUtil;
import io.v.nutz.diseaseaid.mode.AidFundMemberMode;
import io.v.nutz.diseaseaid.service.AidFundMemberAuditRecordService;
import io.v.nutz.diseaseaid.service.MedicalAidService;
import io.v.nutz.member.service.MemberService;
import io.v.nutz.modules.models.PageForm;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.nutz.dao.Cnd;
import org.nutz.dao.Sqls;
import org.nutz.dao.entity.Record;
import org.nutz.dao.sql.Sql;
import org.nutz.dao.util.cri.SqlExpressionGroup;
import org.nutz.ioc.loader.annotation.Inject;
import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.lang.Strings;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@@ -58,6 +68,7 @@ public class DiseaseAidDashBoard {
SELECT
un.unionname,
un.unioncode,
un.id unionid,
( SELECT count( 1 ) FROM `user` WHERE unionid = un.id and aidFundMember = @code ) `value`
FROM
sys_union un
@@ -188,5 +199,200 @@ public class DiseaseAidDashBoard {
return medicalAidService.count(sql);
}
/**
* 看板指标下钻明细
*/
@At
@ViReturn
@RequiresPermissions("aid.dashboard")
public Object detailPage(PageForm pageForm, String detailType, Integer year, Integer medicalType,
Integer stateId, String unionId, String unitId, String personType,
String userState, String sex, String searchKeyword,
String startTime, String endTime) {
Sql sql = buildDetailSql(detailType, year, medicalType, stateId, unionId, unitId,
personType, userState, sex, searchKeyword, startTime, endTime);
return medicalAidService.listPage(pageForm.getPageNumber(), pageForm.getPageSize(), sql);
}
/**
* 导出当前筛选条件下的全部下钻明细
*/
@At
@Ok("void")
@RequiresPermissions("aid.dashboard")
public void exportDetail(HttpServletResponse response, String detailType, Integer year, Integer medicalType,
Integer stateId, String unionId, String unitId, String personType,
String userState, String sex, String searchKeyword,
String startTime, String endTime) throws IOException {
Sql sql = buildDetailSql(detailType, year, medicalType, stateId, unionId, unitId,
personType, userState, sex, searchKeyword, startTime, endTime);
List<Record> list = medicalAidService.list(sql);
List<ExcelExportEntity> columns = new ArrayList<>();
columns.add(new ExcelExportEntity("工号", "loginname", 18));
columns.add(new ExcelExportEntity("姓名", "username", 16));
columns.add(new ExcelExportEntity("性别", "sex", 10));
columns.add(new ExcelExportEntity("人员类型", "personType", 18));
columns.add(new ExcelExportEntity("在职状态", "userState", 16));
columns.add(new ExcelExportEntity("所属工会", "unionname", 25));
columns.add(new ExcelExportEntity("所属单位", "unitname", 25));
if ("medical".equals(detailType)) {
columns.add(new ExcelExportEntity("补助类型", "typeName", 18));
columns.add(new ExcelExportEntity("申请时间", "detailTime", 20));
columns.add(new ExcelExportEntity("申请状态", "state_name", 18));
columns.add(new ExcelExportEntity("补助金额", "total_grant", 18));
} else {
columns.add(new ExcelExportEntity("加入时间", "detailTime", 20));
}
String fileName = "medical".equals(detailType) ? "医疗互助申请明细.xls" : "基金会员明细.xls";
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment;filename="
+ new String(fileName.getBytes("UTF-8"), "ISO8859-1"));
Workbook workbook = ExcelExportUtil.exportExcel(new ExportParams(), columns, list);
workbook.write(response.getOutputStream());
workbook.close();
}
/**
* 明细弹窗筛选选项
*/
@At
@ViReturn
@RequiresPermissions("aid.dashboard")
public Object detailOptions() {
Sql sql = Sqls.create("""
SELECT DISTINCT
s.state_id value,
s.state_name label
FROM state s
INNER JOIN medicalaid med ON med.state_id = s.state_id
ORDER BY s.state_id
""");
return Map.of("medicalStates", medicalAidService.list(sql));
}
private Sql buildDetailSql(String detailType, Integer year, Integer medicalType, Integer stateId,
String unionId, String unitId, String personType, String userState,
String sex, String searchKeyword, String startTime, String endTime) {
if ("medical".equals(detailType)) {
return buildMedicalDetailSql(year, medicalType, stateId, unionId, unitId, personType,
userState, sex, searchKeyword, startTime, endTime);
}
return buildMemberDetailSql(year, unionId, unitId, personType, userState, sex,
searchKeyword, startTime, endTime);
}
private Sql buildMemberDetailSql(Integer year, String unionId, String unitId, String personType,
String userState, String sex, String searchKeyword,
String startTime, String endTime) {
Sql sql = Sqls.create("""
SELECT
u.id,
u.loginname,
u.username,
u.sex,
u.personType,
u.userState,
u.unionid,
u.unionname,
u.unitid,
u.unitname,
u.aidFundMemberJoinTime detailTime
FROM user u
$condition
""");
Cnd cnd = Cnd.where("u.aidFundMember", "=", AidFundMemberMode.NORMAL.getCode());
if (year != null) {
cnd.and("YEAR(u.aidFundMemberJoinTime)", "=", year);
}
addUserCondition(cnd, "u", unionId, unitId, personType, userState, sex,
searchKeyword, startTime, endTime, "aidFundMemberJoinTime");
sql.setCondition(cnd.asc("u.unioncode").asc("u.loginname"));
return sql;
}
private Sql buildMedicalDetailSql(Integer year, Integer medicalType, Integer stateId,
String unionId, String unitId, String personType,
String userState, String sex, String searchKeyword,
String startTime, String endTime) {
Sql sql = Sqls.create("""
SELECT
med.id,
u.loginname,
med.user_name username,
u.sex,
u.personType,
u.userState,
u.unionid,
un.unionname,
u.unitid,
unit.name unitname,
med.type,
CASE med.type
WHEN 1 THEN '医疗补助'
WHEN 2 THEN '重疾补助'
WHEN 3 THEN '特殊门诊补助'
ELSE '其他'
END typeName,
med.apply_time detailTime,
med.state_id,
s.state_name,
med.total_grant
FROM medicalaid med
LEFT JOIN user u ON med.user_id = u.id
LEFT JOIN sys_union un ON u.unionid = un.id
LEFT JOIN sys_unit unit ON u.unitid = unit.id
LEFT JOIN state s ON med.state_id = s.state_id
$condition
""");
Cnd cnd = Cnd.NEW();
if (year != null) {
cnd.and("med.year", "=", year);
}
if (medicalType != null) {
cnd.and("med.type", "=", medicalType);
}
if (stateId != null) {
cnd.and("med.state_id", "=", stateId);
}
addUserCondition(cnd, "u", unionId, unitId, personType, userState, sex,
searchKeyword, startTime, endTime, "med.apply_time");
sql.setCondition(cnd.desc("med.apply_time"));
return sql;
}
private void addUserCondition(Cnd cnd, String alias, String unionId, String unitId,
String personType, String userState, String sex,
String searchKeyword, String startTime, String endTime,
String timeField) {
if (Strings.isNotBlank(unionId)) {
cnd.and(alias + ".unionid", "=", unionId);
}
if (Strings.isNotBlank(unitId)) {
cnd.and(alias + ".unitid", "=", unitId);
}
if (Strings.isNotBlank(personType)) {
cnd.and(alias + ".personType", "=", personType);
}
if (Strings.isNotBlank(userState)) {
cnd.and(alias + ".userState", "=", userState);
}
if (Strings.isNotBlank(sex)) {
cnd.and(alias + ".sex", "=", sex);
}
if (Strings.isNotBlank(startTime)) {
cnd.and(timeField, ">=", startTime);
}
if (Strings.isNotBlank(endTime)) {
cnd.and(timeField, "<=", endTime + " 23:59:59");
}
if (Strings.isNotBlank(searchKeyword)) {
SqlExpressionGroup group = new SqlExpressionGroup();
group.orLike(alias + ".username", searchKeyword);
group.orLike(alias + ".loginname", searchKeyword);
cnd.and(group);
}
}
}
src/main/java/io/v/nutz/member/controller/inquire/MemberDataBoardController.java
+130 -2
View File
@@ -1,18 +1,28 @@
package io.v.nutz.member.controller.inquire;
import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.afterturn.easypoi.excel.entity.ExportParams;
import cn.afterturn.easypoi.excel.entity.params.ExcelExportEntity;
import io.v.nutz.annontation.ViReturn;
import io.v.nutz.base.utils.DateUtil;
import io.v.nutz.member.service.MemberService;
import io.v.nutz.modules.models.PageForm;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.shiro.authz.annotation.RequiresAuthentication;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.nutz.dao.Cnd;
import org.nutz.dao.Sqls;
import org.nutz.dao.entity.Record;
import org.nutz.dao.sql.Sql;
import org.nutz.dao.util.cri.SqlExpressionGroup;
import org.nutz.ioc.loader.annotation.Inject;
import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.lang.Strings;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@@ -47,7 +57,7 @@ public class MemberDataBoardController {
@ViReturn
public Object memberNumber() {
int memberNum = memberService.count(Sqls.create("select count(1) from member"));
int lastYearMemberNum = memberService.count(Sqls.create("select * from member_his where year = year(now()) -1 "));
int lastYearMemberNum = memberService.count(Sqls.create("select * from member_his where year = year(now()) -1 and member = 1 "));
return Map.of("memberNum", memberNum, "lastYearMemberNum", lastYearMemberNum);
}
@@ -60,7 +70,7 @@ public class MemberDataBoardController {
List<Map> result = new ArrayList<>();
Integer year = DateUtil.getYear();
for (int i = year - 5; i < year; i++) {
int count = memberService.count(Sqls.create("select * from member_his where year = @year ").setParam("year", year));
int count = memberService.count(Sqls.create("select * from member_his where year = @year and member = 1 ").setParam("year", i));
result.add(Map.of("label", i, "value", count));
}
result.add(Map.of("label", year, "value", memberService.count(Sqls.create("select count(1) from member"))));
@@ -104,6 +114,7 @@ public class MemberDataBoardController {
SELECT
un.unionname,
un.unioncode,
un.id unionid,
( SELECT count( 1 ) FROM member WHERE unionid = un.id ) `value`
FROM
sys_union un
@@ -166,5 +177,122 @@ public class MemberDataBoardController {
return memberService.list(sql);
}
/**
* 看板指标下钻明细
*/
@At
@ViReturn
@RequiresPermissions("member.inquire.board")
public Object detailPage(PageForm pageForm, Integer year, String unionId, String unitId,
String personType, String userState, String sex, String searchKeyword,
String startTime, String endTime) {
return memberService.list(pageForm, buildDetailSql(year, unionId, unitId, personType,
userState, sex, searchKeyword, startTime, endTime));
}
/**
* 导出当前筛选条件下的全部下钻明细
*/
@At
@Ok("void")
@RequiresPermissions("member.inquire.board")
public void exportDetail(HttpServletResponse response, Integer year, String unionId, String unitId,
String personType, String userState, String sex, String searchKeyword,
String startTime, String endTime) throws IOException {
List<Record> list = memberService.list(buildDetailSql(year, unionId, unitId, personType,
userState, sex, searchKeyword, startTime, endTime));
List<ExcelExportEntity> columns = new ArrayList<>();
columns.add(new ExcelExportEntity("工号", "loginname", 18));
columns.add(new ExcelExportEntity("姓名", "username", 16));
columns.add(new ExcelExportEntity("性别", "sex", 10));
columns.add(new ExcelExportEntity("人员类型", "personType", 18));
columns.add(new ExcelExportEntity("在职状态", "userState", 16));
columns.add(new ExcelExportEntity("所属工会", "unionname", 25));
columns.add(new ExcelExportEntity("所属单位", "unitname", 25));
columns.add(new ExcelExportEntity("入会时间", "detailTime", 18));
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment;filename="
+ new String("会员看板明细.xls".getBytes("UTF-8"), "ISO8859-1"));
Workbook workbook = ExcelExportUtil.exportExcel(new ExportParams(), columns, list);
workbook.write(response.getOutputStream());
workbook.close();
}
/**
* 明细弹窗附加选项，会员看板暂无业务状态选项
*/
@At
@ViReturn
@RequiresPermissions("member.inquire.board")
public Object detailOptions() {
return Map.of("medicalStates", List.of());
}
private Sql buildDetailSql(Integer year, String unionId, String unitId, String personType,
String userState, String sex, String searchKeyword,
String startTime, String endTime) {
int currentYear = DateUtil.getYear();
boolean history = year != null && year != currentYear;
String timeField = "h.memberJoinTime";
Sql sql = Sqls.create("""
SELECT
m.id,
m.loginname,
m.username,
m.sex,
m.personType,
m.userState,
m.unionid,
m.unionname,
m.unitid,
m.unitname,
$detailTime detailTime
FROM $table m
$detailJoin
$condition
""")
.setVar("table", history ? "member_his" : "`user`")
.setVar("detailTime", timeField)
.setVar("detailJoin", history
? "LEFT JOIN member_history h ON h.id = m.id AND h.year = m.year"
: "LEFT JOIN sys_user h ON h.id = m.id");
Cnd cnd = Cnd.NEW();
cnd.and("m.member", "=", 1);
if (history) {
cnd.and("m.year", "=", year);
}
if (Strings.isNotBlank(unionId)) {
cnd.and("m.unionid", "=", unionId);
}
if (Strings.isNotBlank(unitId)) {
cnd.and("m.unitid", "=", unitId);
}
if (Strings.isNotBlank(personType)) {
cnd.and("m.personType", "=", personType);
}
if (Strings.isNotBlank(userState)) {
cnd.and("m.userState", "=", userState);
}
if (Strings.isNotBlank(sex)) {
cnd.and("m.sex", "=", sex);
}
if (Strings.isNotBlank(startTime)) {
cnd.and(timeField, ">=", startTime);
}
if (Strings.isNotBlank(endTime)) {
cnd.and(timeField, "<=", endTime + " 23:59:59");
}
if (Strings.isNotBlank(searchKeyword)) {
SqlExpressionGroup group = new SqlExpressionGroup();
group.orLike("m.username", searchKeyword);
group.orLike("m.loginname", searchKeyword);
cnd.and(group);
}
cnd.asc("m.unioncode").asc("m.loginname");
sql.setCondition(cnd);
return sql;
}
}
src/main/resources/static/components/dashboard/DataBoardDetail.vue
+246
View File
@@ -0,0 +1,246 @@
<template>
<el-dialog :title="title" :visible.sync="visible" width="88%" top="5vh"
append-to-body :close-on-click-modal="false">
<el-form :inline="true" :model="form" size="small" class="dashboard-detail-filter">
<el-form-item label="统计年度" v-if="detailType === 'member'">
<el-date-picker v-model="form.year" type="year" value-format="yyyy"
clearable placeholder="选择年度" @change="search"></el-date-picker>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="form.dateRange" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
clearable @change="search"></el-date-picker>
</el-form-item>
<el-form-item label="所属工会">
<el-select v-model="form.unionId" clearable filterable placeholder="所属工会"
@change="flushUnits(false)">
<el-option v-for="item in unions" :key="item.id"
:label="item.unionname" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属单位">
<el-select v-model="form.unitId" clearable filterable placeholder="所属单位" @change="search">
<el-option v-for="item in units" :key="item.id"
:label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="人员类型">
<el-select v-model="form.personType" clearable placeholder="人员类型" @change="search">
<el-option v-for="item in personTypeOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="在职状态">
<el-select v-model="form.userState" clearable placeholder="在职状态" @change="search">
<el-option v-for="item in userStateOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="form.sex" clearable placeholder="性别" @change="search">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<template v-if="detailType === 'medical'">
<el-form-item label="补助类型">
<el-select v-model="form.medicalType" clearable placeholder="补助类型" @change="search">
<el-option v-for="item in medicalTypeOptions" :key="item.value"
:label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="申请状态">
<el-select v-model="form.stateId" clearable placeholder="申请状态" @change="search">
<el-option v-for="item in medicalStates" :key="item.value"
:label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</template>
<el-form-item label="人员">
<el-input v-model="form.searchKeyword" clearable placeholder="姓名或工号"
@keyup.enter.native="search"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
<el-button type="success" icon="el-icon-download" @click="exportData">导出</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border stripe height="calc(75vh - 170px)"
v-loading="loading" style="width: 100%">
<el-table-column type="index" label="序号" width="70" align="center"
:index="indexMethod"></el-table-column>
<el-table-column prop="loginname" label="工号" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column prop="username" label="姓名" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="sex" label="性别" width="70" align="center"></el-table-column>
<el-table-column prop="persontype" label="人员类型" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column prop="userstate" label="在职状态" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="unionname" label="所属工会" min-width="160" show-overflow-tooltip></el-table-column>
<el-table-column prop="unitname" label="所属单位" min-width="160" show-overflow-tooltip></el-table-column>
<template v-if="detailType === 'medical'">
<el-table-column prop="typename" label="补助类型" min-width="110"></el-table-column>
<el-table-column prop="detailtime" label="申请时间" min-width="160"></el-table-column>
<el-table-column prop="state_name" label="申请状态" min-width="120"></el-table-column>
<el-table-column prop="total_grant" label="补助金额" min-width="110" align="right"></el-table-column>
</template>
<el-table-column v-else prop="detailtime" label="加入时间" min-width="160"></el-table-column>
</el-table>
<el-pagination class="dashboard-detail-pagination"
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="pageForm.pageNumber"
:page-size="pageForm.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="pageForm.totalCount"
@current-change="pageChange"
@size-change="pageSizeChange"></el-pagination>
</el-dialog>
</template>
<script>
module.exports = {
props: {
baseUrl: {
type: String,
required: true
}
},
data() {
return {
visible: false,
loading: false,
title: '指标明细',
detailType: 'member',
form: this.emptyForm(),
initialForm: {},
tableData: [],
unions: [],
units: [],
personTypeOptions: [],
userStateOptions: [],
medicalStates: [],
medicalTypeOptions: [
{label: '医疗补助', value: 1},
{label: '重疾补助', value: 2},
{label: '特殊门诊补助', value: 3}
],
pageForm: {
pageNumber: 1,
pageSize: 10,
totalCount: 0
}
}
},
methods: {
emptyForm() {
return {
detailType: 'member',
year: '',
dateRange: [],
unionId: '',
unitId: '',
personType: '',
userState: '',
sex: '',
medicalType: '',
stateId: '',
searchKeyword: ''
}
},
async open(title, detailType, filters) {
this.title = title || '指标明细'
this.detailType = detailType || 'member'
const form = this.emptyForm()
form.detailType = this.detailType
Object.assign(form, filters || {})
if (form.startTime || form.endTime) {
form.dateRange = [form.startTime || '', form.endTime || '']
}
this.form = form
this.initialForm = clone(form)
this.visible = true
await this.flushUnits(true)
this.search()
},
buildParams() {
const params = clone(this.form)
params.detailType = this.detailType
params.startTime = params.dateRange && params.dateRange.length ? params.dateRange[0] : ''
params.endTime = params.dateRange && params.dateRange.length ? params.dateRange[1] : ''
delete params.dateRange
return params
},
async loadData() {
this.loading = true
const params = Object.assign(this.buildParams(), {
pageNumber: this.pageForm.pageNumber,
pageSize: this.pageForm.pageSize
})
const resp = await $.get(this.baseUrl + '/detailPage', params)
requestLaterFun(resp, data => {
this.tableData = data.list || []
this.pageForm.totalCount = data.totalCount || 0
})
this.loading = false
},
search() {
if (!this.visible) return
this.pageForm.pageNumber = 1
this.loadData()
},
async reset() {
this.form = clone(this.initialForm)
await this.flushUnits(true)
this.search()
},
async flushUnits(preserveUnit) {
if (!preserveUnit) {
this.$set(this.form, 'unitId', '')
}
this.units = await getUnits(this.form.unionId)
if (!preserveUnit) {
this.search()
}
},
pageChange(pageNumber) {
this.pageForm.pageNumber = pageNumber
this.loadData()
},
pageSizeChange(pageSize) {
this.pageForm.pageSize = pageSize
this.pageForm.pageNumber = 1
this.loadData()
},
indexMethod(index) {
return (this.pageForm.pageNumber - 1) * this.pageForm.pageSize + index + 1
},
exportData() {
window.open(this.baseUrl + '/exportDetail?' + $.param(this.buildParams()))
}
},
async created() {
this.unions = await getUnions(null)
this.personTypeOptions = await getDictOptions('UserType')
this.userStateOptions = await getDictOptions('UserState')
const resp = await $.get(this.baseUrl + '/detailOptions')
requestLaterFun(resp, data => {
this.medicalStates = data.medicalStates || []
})
}
}
</script>
<style scoped>
.dashboard-detail-filter {
margin-bottom: 4px;
}
.dashboard-detail-filter .el-form-item {
margin-bottom: 12px;
}
.dashboard-detail-pagination {
margin-top: 15px;
text-align: right;
}
</style>
src/main/resources/views/platform/diseaseaid/DashBoard.html
+78 -11
View File
@@ -74,13 +74,23 @@ layout("/layouts/platform.html"){
color: white !important;
background-color: #314659 !important;
}
.dashboard-drill {
cursor: pointer;
}
.dashboard-drill:hover .card-value-num,
.dashboard-drill:hover .card-label {
color: #409EFF;
}
</style>
<div id="app" class="platform aid-dash-bord" v-cloak>
<guava ref="guava">
<template>
<el-row gutter="20" type="flex">
<el-col v-loading="loading.memberNumber">
<el-col class="dashboard-drill" v-loading="loading.memberNumber"
title="点击查看基金会员明细"
@click.native="openDetail('基金会员总数明细', 'member', {})">
<el-card shadow="never">
<div class="card-label">基金会员总数</div>
<div class="card-value">
@@ -90,7 +100,12 @@ layout("/layouts/platform.html"){
</el-card>
</el-col>
<el-col v-loading="loading.memberNumberYear">
<el-col class="dashboard-drill" v-loading="loading.memberNumberYear"
title="点击查看今年新加入会员明细"
@click.native="openDetail('今年新加入基金会员明细', 'member', {
startTime: moment().startOf('year').format('YYYY-MM-DD'),
endTime: moment().endOf('year').format('YYYY-MM-DD')
})">
<el-card shadow="never">
<div class="card-label">今年新加入会员数</div>
<div class="card-value">
@@ -99,7 +114,9 @@ layout("/layouts/platform.html"){
</div>
</el-card>
</el-col>
<el-col v-loading="loading.aidMedical">
<el-col class="dashboard-drill" v-loading="loading.aidMedical"
title="点击查看医疗补助申请明细"
@click.native="openDetail('医疗补助申请明细', 'medical', {medicalType: 1})">
<el-card shadow="never">
<div class="card-label">医疗补助申请总数</div>
<div class="card-value">
@@ -108,7 +125,9 @@ layout("/layouts/platform.html"){
</div>
</el-card>
</el-col>
<el-col v-loading="loading.aidMedical">
<el-col class="dashboard-drill" v-loading="loading.aidMedical"
title="点击查看重疾补助申请明细"
@click.native="openDetail('重疾补助申请明细', 'medical', {medicalType: 2})">
<el-card shadow="never">
<div class="card-label">重疾补助申请总数</div>
<div class="card-value">
@@ -117,7 +136,9 @@ layout("/layouts/platform.html"){
</div>
</el-card>
</el-col>
<el-col v-loading="loading.aidMedicalMoney">
<el-col class="dashboard-drill" v-loading="loading.aidMedicalMoney"
title="点击查看已补助申请明细"
@click.native="openDetail('已补助金额明细', 'medical', {stateId: 700})">
<el-card shadow="never">
<div class="card-label">共计补助</div>
<div class="card-value">
@@ -132,10 +153,13 @@ layout("/layouts/platform.html"){
<el-col class="center-col">
<div class="card-label">工会基金会员数</div>
<div style="width: 100%;height: 100px" id="unionMemberChart"></div>
<el-table :data="unionMember" style="width: 100%;margin-top: 20px"
<div class="dashboard-drill" title="点击趋势点查看工会基金会员明细"
style="width: 100%;height: 100px" id="unionMemberChart"></div>
<el-table :data="unionMember" style="width: 100%;margin-top: 20px;cursor: pointer"
height="calc(100vh - 160px - 300px)"
:header-cell-style="{background:'#FAFAFA'}" row-key="id">
:header-cell-style="{background:'#FAFAFA'}" row-key="id"
title="点击工会行查看基金会员明细"
@row-click="openUnionMemberDetail">
<el-table-column label="序号" width="100px">
<template scope="{$index}">
<div class="idx idx-rank" v-if="$index<3">{{$index+1}}</div>
@@ -157,13 +181,15 @@ layout("/layouts/platform.html"){
<el-col class="center-col">
<div class="card-label">在职状态</div>
<div style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
<div class="dashboard-drill" title="点击图表项查看在职状态明细"
style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
v-loading="loading.userStateMember"
id="userStateMemberChart"></div>
<div class="card-label">人员类型</div>
<div style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
<div class="dashboard-drill" title="点击图表项查看人员类型明细"
style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
v-loading="loading.personTypeMember"
id="personTypeMemberChart"></div>
@@ -172,6 +198,7 @@ layout("/layouts/platform.html"){
</el-row>
</template>
</guava>
<data-board-detail ref="dataBoardDetail" :base-url="loc()"></data-board-detail>
</div>
<script>
@@ -207,9 +234,27 @@ layout("/layouts/platform.html"){
}
},
components: {
'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0')
'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0'),
'data-board-detail': httpVueLoader('/components/dashboard/DataBoardDetail.vue?v=1.0.3')
},
methods: {
openDetail(title, detailType, filters) {
this.$refs.dataBoardDetail.open(title, detailType, filters)
},
openUnionMemberDetail(row) {
this.openDetail(row.unionname + '基金会员明细', 'member', {
unionId: row.unionid
})
},
getTinyAreaRow(event, rows) {
const point = event && event.data ? event.data.data : null
const index = point && point.x !== undefined ? Number(point.x) : NaN
if (Number.isInteger(index) && rows[index]) {
return rows[index]
}
const value = point && point.y !== undefined ? point.y : point
return rows.find(item => String(item.value) === String(value))
},
/**
* 各工会会员数
* @returns {Promise<void>}
@@ -244,6 +289,12 @@ layout("/layouts/platform.html"){
},
})
chart.unionMemberChart.render();
chart.unionMemberChart.on('element:click', event => {
const row = this.getTinyAreaRow(event, chartData)
if (row) {
this.openUnionMemberDetail(row)
}
})
})
},
@@ -303,6 +354,14 @@ layout("/layouts/platform.html"){
area: {},*/
});
chart.userStateMemberChart.render();
chart.userStateMemberChart.on('element:click', event => {
const row = event && event.data ? event.data.data : null
if (row) {
this.openDetail(row.type + '基金会员明细', 'member', {
userState: row.type
})
}
})
})
@@ -353,6 +412,14 @@ layout("/layouts/platform.html"){
},
});
chart.personTypeMemberChart.render();
chart.personTypeMemberChart.on('element:click', event => {
const row = event && event.data ? event.data.data : null
if (row) {
this.openDetail(row.label + '基金会员明细', 'member', {
personType: row.label
})
}
})
})
src/main/resources/views/platform/member/inquire/DataBoard.html
+82 -6
View File
@@ -67,12 +67,22 @@ layout("/layouts/platform.html"){
overflow-y: auto;
}
.dashboard-drill {
cursor: pointer;
}
.dashboard-drill:hover .top-col-member-number,
.dashboard-drill:hover .col-title {
color: #409EFF;
}
</style>
<div id="app" v-cloak>
<guava>
<el-row style="background-color: #f0f2f5" type="flex">
<el-col class="top-col" v-loading="loading.memberNumber">
<el-col class="top-col dashboard-drill" v-loading="loading.memberNumber"
title="点击查看会员明细"
@click.native.capture="openMemberDetail('会员总数明细', {year: moment().format('YYYY')})">
<div class="col-title">会员数</div>
<div class="top-col-member-number">{{memberNumberData.memberNum}}<span
style="font-size: 14px">&ensp;人</span></div>
@@ -97,16 +107,20 @@ layout("/layouts/platform.html"){
</el-col>
<el-col class="top-col" v-loading="loading.growthTrend">
<div class="col-title">增长趋势</div>
<div class="top-col-chart" id="growthTrendChart"></div>
<div class="top-col-chart dashboard-drill" title="点击趋势点查看年度明细"
id="growthTrendChart"></div>
</el-col>
<el-col class="top-col" v-loading="loading.memberPercentage">
<el-col class="top-col dashboard-drill" v-loading="loading.memberPercentage"
title="点击查看会员明细"
@click.native.capture="openMemberDetail('会员占比明细', {year: moment().format('YYYY')})">
<div class="col-title">会员占比</div>
<div class="top-col-chart" id="memberPercentageChart"
style="position: absolute;height: 120px;right: -10%;bottom: 20px"></div>
</el-col>
<el-col class="top-col" v-loading="loading.growthTrend">
<div class="col-title">男女占比</div>
<div class="top-col-chart" id="memberSexPercentageChart"
<div class="top-col-chart dashboard-drill" title="点击图表项查看性别明细"
id="memberSexPercentageChart"
style="position: absolute;height: 120px;right: -10%;bottom: 20px"></div>
</el-col>
</el-row>
@@ -119,7 +133,9 @@ layout("/layouts/platform.html"){
<el-table :data="unionMember" :header-cell-style="{background:'#FAFAFA'}"
height="calc(100vh - 160px - 300px)"
row-key="id" style="width: 100%;margin-top: 20px">
row-key="id" style="width: 100%;margin-top: 20px;cursor: pointer"
title="点击工会行查看会员明细"
@row-click="openUnionMemberDetail">
<el-table-column label="序号" width="100px">
<template scope="{$index}">
<div class="idx idx-rank" v-if="$index<3">{{$index+1}}</div>
@@ -152,6 +168,7 @@ layout("/layouts/platform.html"){
</el-col>
</el-row>
</guava>
<data-board-detail ref="dataBoardDetail" :base-url="loc()"></data-board-detail>
</div>
@@ -193,8 +210,28 @@ layout("/layouts/platform.html"){
unionMember: [],
}
},
components: {},
components: {
'data-board-detail': httpVueLoader('/components/dashboard/DataBoardDetail.vue?v=1.0.3')
},
methods: {
openMemberDetail(title, filters) {
this.$refs.dataBoardDetail.open(title, 'member', filters)
},
openUnionMemberDetail(row) {
this.openMemberDetail(row.unionname + '会员明细', {
year: moment().format('YYYY'),
unionId: row.unionid
})
},
getTinyAreaRow(event, rows) {
const point = event && event.data ? event.data.data : null
const index = point && point.x !== undefined ? Number(point.x) : NaN
if (Number.isInteger(index) && rows[index]) {
return rows[index]
}
const value = point && point.y !== undefined ? point.y : point
return rows.find(item => String(item.value) === String(value))
},
/**
* 会员数
* @returns {Promise<void>}
@@ -247,6 +284,12 @@ layout("/layouts/platform.html"){
},
});
chart.growthTrendChart.render();
chart.growthTrendChart.on('element:click', event => {
const row = this.getTinyAreaRow(event, data)
if (row) {
this.openMemberDetail(row.label + '年会员明细', {year: row.label})
}
})
})
},
@@ -321,6 +364,15 @@ layout("/layouts/platform.html"){
interactions: [{type: 'element-active'}], color: ['#409EFF', '#F56C6C'],
});
chart.memberSexPercentageChart.render();
chart.memberSexPercentageChart.on('element:click', event => {
const row = event && event.data ? event.data.data : null
if (row) {
this.openMemberDetail(row.type + '性会员明细', {
year: moment().format('YYYY'),
sex: row.type
})
}
})
})
},
@@ -358,6 +410,12 @@ layout("/layouts/platform.html"){
},
})
chart.unionMemberChart.render();
chart.unionMemberChart.on('element:click', event => {
const row = this.getTinyAreaRow(event, chartData)
if (row) {
this.openUnionMemberDetail(row)
}
})
})
},
@@ -407,6 +465,15 @@ layout("/layouts/platform.html"){
},
});
chart.personTypeMemberChart.render();
chart.personTypeMemberChart.on('element:click', event => {
const row = event && event.data ? event.data.data : null
if (row) {
this.openMemberDetail(row.label + '会员明细', {
year: moment().format('YYYY'),
personType: row.label
})
}
})
})
@@ -456,6 +523,15 @@ layout("/layouts/platform.html"){
area: {},
});
chart.userStateMemberChart.render();
chart.userStateMemberChart.on('element:click', event => {
const row = event && event.data ? event.data.data : null
if (row) {
this.openMemberDetail(row.label + '会员明细', {
year: moment().format('YYYY'),
userState: row.label
})
}
})
})
target/classes/static/components/dashboard/DataBoardDetail.vue
+246
View File
@@ -0,0 +1,246 @@
<template>
<el-dialog :title="title" :visible.sync="visible" width="88%" top="5vh"
append-to-body :close-on-click-modal="false">
<el-form :inline="true" :model="form" size="small" class="dashboard-detail-filter">
<el-form-item label="统计年度" v-if="detailType === 'member'">
<el-date-picker v-model="form.year" type="year" value-format="yyyy"
clearable placeholder="选择年度" @change="search"></el-date-picker>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="form.dateRange" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
clearable @change="search"></el-date-picker>
</el-form-item>
<el-form-item label="所属工会">
<el-select v-model="form.unionId" clearable filterable placeholder="所属工会"
@change="flushUnits(false)">
<el-option v-for="item in unions" :key="item.id"
:label="item.unionname" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属单位">
<el-select v-model="form.unitId" clearable filterable placeholder="所属单位" @change="search">
<el-option v-for="item in units" :key="item.id"
:label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="人员类型">
<el-select v-model="form.personType" clearable placeholder="人员类型" @change="search">
<el-option v-for="item in personTypeOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="在职状态">
<el-select v-model="form.userState" clearable placeholder="在职状态" @change="search">
<el-option v-for="item in userStateOptions" :key="item.code"
:label="item.name" :value="item.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="form.sex" clearable placeholder="性别" @change="search">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<template v-if="detailType === 'medical'">
<el-form-item label="补助类型">
<el-select v-model="form.medicalType" clearable placeholder="补助类型" @change="search">
<el-option v-for="item in medicalTypeOptions" :key="item.value"
:label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="申请状态">
<el-select v-model="form.stateId" clearable placeholder="申请状态" @change="search">
<el-option v-for="item in medicalStates" :key="item.value"
:label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</template>
<el-form-item label="人员">
<el-input v-model="form.searchKeyword" clearable placeholder="姓名或工号"
@keyup.enter.native="search"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
<el-button type="success" icon="el-icon-download" @click="exportData">导出</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border stripe height="calc(75vh - 170px)"
v-loading="loading" style="width: 100%">
<el-table-column type="index" label="序号" width="70" align="center"
:index="indexMethod"></el-table-column>
<el-table-column prop="loginname" label="工号" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column prop="username" label="姓名" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="sex" label="性别" width="70" align="center"></el-table-column>
<el-table-column prop="persontype" label="人员类型" min-width="110" show-overflow-tooltip></el-table-column>
<el-table-column prop="userstate" label="在职状态" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="unionname" label="所属工会" min-width="160" show-overflow-tooltip></el-table-column>
<el-table-column prop="unitname" label="所属单位" min-width="160" show-overflow-tooltip></el-table-column>
<template v-if="detailType === 'medical'">
<el-table-column prop="typename" label="补助类型" min-width="110"></el-table-column>
<el-table-column prop="detailtime" label="申请时间" min-width="160"></el-table-column>
<el-table-column prop="state_name" label="申请状态" min-width="120"></el-table-column>
<el-table-column prop="total_grant" label="补助金额" min-width="110" align="right"></el-table-column>
</template>
<el-table-column v-else prop="detailtime" label="加入时间" min-width="160"></el-table-column>
</el-table>
<el-pagination class="dashboard-detail-pagination"
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="pageForm.pageNumber"
:page-size="pageForm.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="pageForm.totalCount"
@current-change="pageChange"
@size-change="pageSizeChange"></el-pagination>
</el-dialog>
</template>
<script>
module.exports = {
props: {
baseUrl: {
type: String,
required: true
}
},
data() {
return {
visible: false,
loading: false,
title: '指标明细',
detailType: 'member',
form: this.emptyForm(),
initialForm: {},
tableData: [],
unions: [],
units: [],
personTypeOptions: [],
userStateOptions: [],
medicalStates: [],
medicalTypeOptions: [
{label: '医疗补助', value: 1},
{label: '重疾补助', value: 2},
{label: '特殊门诊补助', value: 3}
],
pageForm: {
pageNumber: 1,
pageSize: 10,
totalCount: 0
}
}
},
methods: {
emptyForm() {
return {
detailType: 'member',
year: '',
dateRange: [],
unionId: '',
unitId: '',
personType: '',
userState: '',
sex: '',
medicalType: '',
stateId: '',
searchKeyword: ''
}
},
async open(title, detailType, filters) {
this.title = title || '指标明细'
this.detailType = detailType || 'member'
const form = this.emptyForm()
form.detailType = this.detailType
Object.assign(form, filters || {})
if (form.startTime || form.endTime) {
form.dateRange = [form.startTime || '', form.endTime || '']
}
this.form = form
this.initialForm = clone(form)
this.visible = true
await this.flushUnits(true)
this.search()
},
buildParams() {
const params = clone(this.form)
params.detailType = this.detailType
params.startTime = params.dateRange && params.dateRange.length ? params.dateRange[0] : ''
params.endTime = params.dateRange && params.dateRange.length ? params.dateRange[1] : ''
delete params.dateRange
return params
},
async loadData() {
this.loading = true
const params = Object.assign(this.buildParams(), {
pageNumber: this.pageForm.pageNumber,
pageSize: this.pageForm.pageSize
})
const resp = await $.get(this.baseUrl + '/detailPage', params)
requestLaterFun(resp, data => {
this.tableData = data.list || []
this.pageForm.totalCount = data.totalCount || 0
})
this.loading = false
},
search() {
if (!this.visible) return
this.pageForm.pageNumber = 1
this.loadData()
},
async reset() {
this.form = clone(this.initialForm)
await this.flushUnits(true)
this.search()
},
async flushUnits(preserveUnit) {
if (!preserveUnit) {
this.$set(this.form, 'unitId', '')
}
this.units = await getUnits(this.form.unionId)
if (!preserveUnit) {
this.search()
}
},
pageChange(pageNumber) {
this.pageForm.pageNumber = pageNumber
this.loadData()
},
pageSizeChange(pageSize) {
this.pageForm.pageSize = pageSize
this.pageForm.pageNumber = 1
this.loadData()
},
indexMethod(index) {
return (this.pageForm.pageNumber - 1) * this.pageForm.pageSize + index + 1
},
exportData() {
window.open(this.baseUrl + '/exportDetail?' + $.param(this.buildParams()))
}
},
async created() {
this.unions = await getUnions(null)
this.personTypeOptions = await getDictOptions('UserType')
this.userStateOptions = await getDictOptions('UserState')
const resp = await $.get(this.baseUrl + '/detailOptions')
requestLaterFun(resp, data => {
this.medicalStates = data.medicalStates || []
})
}
}
</script>
<style scoped>
.dashboard-detail-filter {
margin-bottom: 4px;
}
.dashboard-detail-filter .el-form-item {
margin-bottom: 12px;
}
.dashboard-detail-pagination {
margin-top: 15px;
text-align: right;
}
</style>