516 lines
23 KiB
HTML
516 lines
23 KiB
HTML
<!--年度活动统计 djx -->
|
|
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.clearfix {
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.el-card__header {
|
|
background-color: #ebeef5;
|
|
/*ebb563*/
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #EBEEF5;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.el-input--mini .el-input__inner {
|
|
height: 23px;
|
|
line-height: 23px;
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: 5px;
|
|
}
|
|
|
|
.el-table-containera {
|
|
padding-top: 5px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.picClass .el-dialog {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.picClass .el-dialog__headerbtn {
|
|
font-size: 70px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.picClass .el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.picClass .el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
|
|
.picClass .el-dialog__headerbtn .el-dialog__close {
|
|
color: white;
|
|
}
|
|
|
|
.el-pagination-container {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.el-card {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<el-card class="box-card">
|
|
<el-row class="header navbar bg-white shadow"
|
|
style="padding-left: 5px;padding-right: 5px;background-color: #e6f1fe;">
|
|
|
|
<div class="btn-group tool-button mt5" style="width: 100%">
|
|
<el-date-picker style="width: 100%" @change="pageData();container1()"
|
|
v-model="pageForm.year"
|
|
type="year"
|
|
value-format="yyyy"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-row>
|
|
</el-card>
|
|
<el-row class="el-table-containera">
|
|
<div style="float: left;width: 100%;">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>活动类型统计</span>
|
|
</div>
|
|
<div class="text item" style="height: 230px;">
|
|
<div id="container1" style="height:100%;width: 100%"></div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</el-row>
|
|
|
|
<el-row class="header navbar bg-white shadow">
|
|
<div class="btn-group tool-button mt5">
|
|
<el-button @click="loading = true;pageForm.name='';pageData()">查询所有数据</el-button>
|
|
</div>
|
|
</el-row>
|
|
|
|
<!--表格-->
|
|
<el-row class="el-table-container">
|
|
<el-card class="box-card">
|
|
<el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
|
|
element-loading-spinner="el-icon-loading" element-loading-background="white" size="small"
|
|
:header-cell-style="{background:'#F5F5F5',color:'#606266'}">
|
|
<el-table-column label="序号" header-align="center" align="center" type="index">
|
|
<template scope="scope">
|
|
<span>{{scope.$index+(pageForm.pageNumber - 1) * pageForm.pageSize + 1}}</span></template>
|
|
</el-table-column>
|
|
<el-table-column label="活动名称" prop="xhdmc" header-align="center" align="center"></el-table-column>
|
|
<el-table-column label="活动地点" prop="hddz" header-align="center" align="center"></el-table-column>
|
|
<el-table-column label="活动开始时间" prop="kssj" header-align="center" align="center"></el-table-column>
|
|
<el-table-column label="活动结束时间" prop="jssj" header-align="center" align="center"></el-table-column>
|
|
<el-table-column label="参与活动人数" prop="cyrs" header-align="center" align="center"></el-table-column>
|
|
<el-table-column label="活动类型" prop="hdlx" header-align="center" align="center"></el-table-column>
|
|
<el-table-column label="活动项目" prop="hdxm" header-align="center" align="center"></el-table-column>
|
|
<el-table-column align="center" label="操作" width="80px">
|
|
<template slot-scope="scope">
|
|
<el-button @click="openInfo(scope)" size="mini">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页-->
|
|
<el-row class="el-pagination-container">
|
|
<el-pagination
|
|
@size-change="pageSizeChange"
|
|
@current-change="pageNumberChange"
|
|
:current-page="pageForm.pageNumber"
|
|
:page-sizes="[5, 10, 15, 20]"
|
|
:page-size="pageForm.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="pageForm.totalCount">
|
|
</el-pagination>
|
|
</el-row>
|
|
</el-card>
|
|
</el-row>
|
|
|
|
<!--查看-->
|
|
<el-dialog title="查看" class="dia"
|
|
:visible.sync="infoDialogVisible" custom-class="ViewDialogClass" width="48%" top="3%">
|
|
|
|
<el-collapse v-model="activeName" accordion>
|
|
<el-collapse-item title="活动详细信息" name="1">
|
|
<el-card>
|
|
<table style="width: 100%">
|
|
<tr style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa" colspan="6" style="font-size: 18px;">{{viewData.xhdmc}}</td>
|
|
</tr>
|
|
<tr style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa">活动地点</td>
|
|
<td class="tpb" colspan="2">{{viewData.hddz}}</td>
|
|
<td class="tpa">主办单位</td>
|
|
<td class="tpb" colspan="2">{{viewData.unit}}</td>
|
|
</tr>
|
|
<tr style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa">活动类型</td>
|
|
<td class="tpb">{{viewData.hdlx}}</td>
|
|
<td class="tpa">活动项目</td>
|
|
<td class="tpb">{{viewData.hdxm}}</td>
|
|
<td class="tpa">活动经费预算</td>
|
|
<td class="tpb">{{viewData.jfys}}</td>
|
|
</tr>
|
|
<tr style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa">活动年份</td>
|
|
<td class="tpb">{{viewData.hdnf}}</td>
|
|
<td class="tpa">活动人数</td>
|
|
<td class="tpb">{{viewData.hdrs}}</td>
|
|
<td class="tpa">男队人数</td>
|
|
<td class="tpb">{{viewData.manrs}}</td>
|
|
</tr>
|
|
<tr style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa">报名开始时间</td>
|
|
<td class="tpb">{{viewData.bmkssj}}</td>
|
|
<td class="tpa">报名截止时间</td>
|
|
<td class="tpb">{{viewData.bmjssj}}</td>
|
|
<td class="tpa">女队人数</td>
|
|
<td class="tpb">{{viewData.womenrs}}</td>
|
|
</tr>
|
|
<tr style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa">活动开始时间</td>
|
|
<td class="tpb">{{viewData.hdks}}</td>
|
|
<td class="tpa">活动结束时间</td>
|
|
<td class="tpb">{{viewData.hdjs}}</td>
|
|
<td class="tpa">组合方式</td>
|
|
<td class="tpb">{{viewData.zhfs}}</td>
|
|
</tr>
|
|
<tr style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa">颁奖模式</td>
|
|
<td class="tpb">{{viewData.bjms}}</td>
|
|
<td class="tpa">竞赛模式</td>
|
|
<td class="tpb">{{viewData.jsfs}}</td>
|
|
<td class="tpa">报名方式</td>
|
|
<td class="tpb">{{viewData.bmfs}}</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa" colspan="6">报名办法</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpc" colspan="6">
|
|
<div v-html="viewData.bmbf"></div>
|
|
</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa" colspan="6">竞赛办法</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpc" colspan="6">
|
|
<div v-html="viewData.jsbf"></div>
|
|
</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa" colspan="6">奖励办法</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpc" colspan="6">
|
|
<div v-html="viewData.jlbf"></div>
|
|
</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa" colspan="6">其他注意事项</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpc" colspan="6">
|
|
<div v-html="viewData.zysx"></div>
|
|
</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='非竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpa" colspan="6">活动通知</td>
|
|
</tr>
|
|
<tr v-show="viewData.jsfs=='非竞赛类'" style="border: 1px solid rgb(220,220,220);">
|
|
<td class="tpc" colspan="6">
|
|
<div v-html="viewData.hdtz"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</el-card>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item title="活动工作人员列表" name="2">
|
|
<el-card class="box-card">
|
|
<el-table :data="gzryListTableData" size="small" border
|
|
:header-cell-style="{background:'#eef1f6',color:'#606266'}">
|
|
<el-table-column label="人员身份" prop="shmc" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column label="姓名" prop="username" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column label="所属单位" prop="name" header-align="center"
|
|
align="center"></el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
</el-card>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item title="基层工会报名情况" name="3">
|
|
<el-card class="box-card">
|
|
<el-table :data="bmTableData" size="small" border
|
|
:header-cell-style="{background:'#eef1f6',color:'#606266'}">
|
|
<el-table-column label="序号" type="index" index="1" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="bmfs == '基层工会报名'" label="报名单位" width="220" prop="unionname"
|
|
header-align="center" align="center"></el-table-column>
|
|
<el-table-column v-if="bmfs == '基层工会报名'" label="报名人员" prop="cyry" header-align="center"
|
|
align="center"></el-table-column>
|
|
|
|
<el-table-column v-if="bmfs == '个人报名'" label="职工号" prop="loginname" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="bmfs == '个人报名'" label="姓名" prop="username" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="bmfs == '个人报名'" label="性别" prop="sex" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="bmfs == '个人报名'" width="240px" label="单位" prop="name"
|
|
header-align="center" align="center"></el-table-column>
|
|
<el-table-column v-if="bmfs == '个人报名'" label="联系电话" prop="mobile" header-align="center"
|
|
align="center"></el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
</el-card>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item title="活动获奖情况" name="4">
|
|
<el-card class="box-card">
|
|
<el-table :data="hjTableData" size="small" border
|
|
:header-cell-style="{background:'#eef1f6',color:'#606266'}">
|
|
<el-table-column v-if="hdms == '团体'" label="获奖单位" prop="name" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="hdms == '个人'" label="获奖人" prop="username" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column v-if="hdms == '个人'" label="获奖人单位" prop="name" header-align="center"
|
|
align="center"></el-table-column>
|
|
<el-table-column label="获奖信息" prop="mc" header-align="center" align="center"></el-table-column>
|
|
<el-table-column label="奖品名称" prop="jpmc" header-align="center" align="center">
|
|
<template slot-scope="scope">
|
|
<el-label v-if="scope.row.jpmc!='' && scope.row.jpmc!=null">{{scope.row.jpmc}}
|
|
</el-label>
|
|
<el-label v-else>无（现金奖励）</el-label>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="金额" prop="money" header-align="center" align="center"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
<script>
|
|
|
|
new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
pageForm: {//分页
|
|
pageNumber: 1,
|
|
pageSize: 5,
|
|
totalCount: 0,
|
|
searchKeyword: "",
|
|
name: "",
|
|
year: new Date().getFullYear() + ''
|
|
},
|
|
tableData: [],//表格
|
|
total: "",
|
|
loading: true,
|
|
|
|
/*查看*/
|
|
infoDialogVisible: false,
|
|
activeName: '1',
|
|
viewData: [],
|
|
bmTableData: [],
|
|
bmfs: "",
|
|
hdms: "",
|
|
hjTableData: [],
|
|
gzryListTableData: [],
|
|
|
|
hdxm: [],
|
|
hdxmTj: [],
|
|
}
|
|
},
|
|
methods: {
|
|
pageData: function () {//表格展示数据
|
|
var self = this;
|
|
|
|
sublime.showLoadingbar();//显示loading
|
|
$.post(base + "/platform/hd/hdcxtj/hdlxtj/data", self.pageForm, function (data) {
|
|
sublime.closeLoadingbar();//关闭loading
|
|
if (data.code == 0) {
|
|
self.tableData = data.data.data.list;
|
|
self.pageForm.totalCount = data.data.data.totalCount;
|
|
setTimeout(function () {
|
|
self.loading = false;
|
|
}, 200);
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
},
|
|
|
|
/*分页*/
|
|
pageSizeChange: function (val) {
|
|
this.pageForm.pageSize = val;
|
|
this.pageData();
|
|
},
|
|
pageNumberChange: function (val) {
|
|
this.pageForm.pageNumber = val;
|
|
this.pageData();
|
|
},
|
|
|
|
/*查看*/
|
|
openInfo: function (scope) {
|
|
|
|
var self = this;
|
|
self.bmfs = scope.row.bmfs;
|
|
self.hdms = scope.row.bjms;
|
|
$.post(base + "/platform/hd/xhdgl/xhdxxgl/findById", {
|
|
id: scope.row.id,
|
|
bmfs: scope.row.bmfs,
|
|
bjms: scope.row.bjms
|
|
}, function (data) {
|
|
if (data.code == 0) {
|
|
self.viewData = data.data.xhd;
|
|
self.bmTableData = data.data.cyry;
|
|
self.hjTableData = data.data.hj;
|
|
self.gzryListTableData = data.data.gzry;
|
|
self.infoDialogVisible = true;
|
|
}
|
|
}, "json");
|
|
},
|
|
|
|
container1: function () {
|
|
var self = this;
|
|
var dom = document.getElementById("container1");
|
|
var myChart = echarts.init(dom);
|
|
option = null;
|
|
$.post(base + "/platform/hd/hdcxtj/hdlxtj/lxTj", {year: self.pageForm.year}, function (data) {
|
|
|
|
if (data.code == 0) {
|
|
self.hdxm = data.data.hdxm;
|
|
self.hdxmTj = data.data.hdxmTj;
|
|
//加载柱状图
|
|
option = {
|
|
title: {
|
|
// text: '根据活动分类进行统计',
|
|
/*subtext: '人数'*/
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ["活动数量"],
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
},
|
|
right: 16,
|
|
},
|
|
height: 170,
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
triggerEvent: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: self.hdxm,
|
|
triggerEvent: true,
|
|
},
|
|
color: [
|
|
"#46A3FF",
|
|
],
|
|
series: [
|
|
{
|
|
name: "活动数量",
|
|
data: self.hdxmTj,
|
|
type: 'bar',
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值', symbolSize: [40, 40]},
|
|
{type: 'min', name: '最小值', symbolSize: [40, 40]}
|
|
]
|
|
},
|
|
markLine: {
|
|
data: [
|
|
{type: 'average', name: '平均值'}
|
|
]
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#60C0DD', //圈圈的颜色
|
|
lineStyle: {
|
|
color: '#FE8463' //线的颜色
|
|
}
|
|
}
|
|
},
|
|
},
|
|
]
|
|
};
|
|
myChart.on("click", function (obj) {
|
|
self.pageForm.name = obj.name;
|
|
self.loading = true;
|
|
$.post(base + "/platform/hd/hdcxtj/hdlxtj/data", self.pageForm, function (data) {
|
|
if (data.code == 0) {
|
|
self.tableData = data.data.data.list;
|
|
self.pageForm.totalCount = data.data.data.totalCount;
|
|
setTimeout(function () {
|
|
self.loading = false;
|
|
}, 200);
|
|
}
|
|
}, "json");
|
|
});
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
//完毕-------------------
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
|
|
},
|
|
},
|
|
created: function () {
|
|
this.pageData();
|
|
},
|
|
mounted: function () {
|
|
this.container1();
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|