<template>
|
<div
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
>
|
<div class="box-content">
|
<!-- 搜索操作 -->
|
<div class="search-input-box">
|
<div class="fl-fw">
|
<div class="fl-al mr-b-10 mr-r-10">
|
<div class="fz-7 label-width-search">统计年份：</div>
|
<el-select
|
class="iw-220"
|
v-model="searchVal.yearValue"
|
placeholder="选择统计年份"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="item in yearList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10 mr-r-10">
|
<div class="fz-7 label-width-search">所属党组织：</div>
|
<el-select
|
class="iw-220"
|
v-model="searchVal.orgName"
|
placeholder="选择所属党组织"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="item in orgNameList"
|
:key="item.label"
|
:label="item.label"
|
:value="item.label"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10 mr-r-10">
|
<div class="fz-7 label-width-search">单位归属：</div>
|
<el-select
|
class="iw-220"
|
v-model="searchVal.belongToValue"
|
placeholder="选择单位归属"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="item in bengToList"
|
:key="item.label"
|
:label="item.label"
|
:value="item.label"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div class="fz-7 label-width-search">排序方式：</div>
|
<el-select
|
class="iw-220"
|
v-model="searchVal.rangeValue"
|
placeholder="选择排序方式"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="item in timesList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="fl-al mr-b-10">
|
<div class="fz-7 label-width-search"></div>
|
<el-button type="primary" @click="handleAction('search')"
|
>搜索</el-button
|
>
|
<el-button @click="handleAction('reset')">重置</el-button>
|
</div>
|
</div>
|
<!-- 列表 -->
|
<div class="table-content">
|
<!-- 统计 -->
|
<div class="fl-fw mr-t-20">
|
<div class="fl-co mr-r-40">
|
<span class="fz-14 fw-bold">{{ pageInfo.unitCount }}</span>
|
<span class="mr-t-20">机关单位总数</span>
|
</div>
|
<div class="fl-co mr-r-40">
|
<span class="fz-14 fw-bold">{{
|
pageInfo.unitServiceTotalCount
|
}}</span>
|
<span class="mr-t-20">服务总次数</span>
|
</div>
|
<div class="fl-co mr-r-40">
|
<span class="fz-14 fw-bold">{{
|
pageInfo.unitServiceTotalTime
|
}}</span>
|
<span class="mr-t-20">服务总时长（小时）</span>
|
</div>
|
<div class="fl-co mr-r-40">
|
<span class="fz-14 fw-bold">{{ pageInfo.awardSumCount }}</span>
|
<span class="mr-t-20">机关单位累计总积分</span>
|
</div>
|
</div>
|
|
<!-- 导出 -->
|
<div class="export">
|
<el-button type="primary" @click="handleAction('export')"
|
>导出</el-button
|
>
|
</div>
|
|
<!-- 列表 -->
|
<TablePro :tableLsit="tableLsit" :columnList="columnList">
|
<template v-slot:pushStatus="scope">
|
<el-tag v-if="scope.row.pushStatus === 1">推送</el-tag>
|
<el-tag type="info" v-if="scope.row.pushStatus === 0"
|
>不推送</el-tag
|
>
|
</template>
|
<template v-slot:btn="scope">
|
<el-button type="text" @click="handleAction('edit', scope.row)"
|
>编辑</el-button
|
>
|
<el-button type="text" @click="handleAction('delete', scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</TablePro>
|
<!-- 分页 -->
|
<div class="bottom-page">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
const YEAR_LIST_DATA = [],
|
THIS_YEAR = new Date().getFullYear();
|
for (let i = 0; i <= 5; i++) {
|
YEAR_LIST_DATA.push({
|
label: THIS_YEAR - i + "年",
|
value: THIS_YEAR - i
|
});
|
}
|
export default {
|
props: {
|
orgNameList: {
|
type: Array,
|
default: []
|
}
|
},
|
data() {
|
return {
|
loading: false, // 页面loading
|
btnloading: false, // 提交按钮loading
|
tableLsit: [], // 列表
|
columnList: [
|
{ type: "index" },
|
// { label: "logo", key: "name" },
|
{ label: "所属党组织", key: "orgName" },
|
{ label: "单位归属", key: "belongTo" },
|
{ label: "单位名称", key: "unitName" },
|
{ label: "报到社区", key: "communityName" },
|
{ label: "服务次数", key: "serviceTimes" },
|
{ label: "服务时长（小时）", key: "serviceTime" },
|
{ label: "累计积分", key: "awardSum" }
|
// { type: "custom", label: "预警信息推送", slot: "pushStatus" },
|
], // 列表属性
|
pageNum: 1, // 当前页
|
pageSize: 10, // 当前条数
|
total: 0, // 总数
|
searchVal: {
|
yearValue: "",
|
orgNameValue: "",
|
belongToValue: "",
|
rangeValue: ""
|
},
|
yearList: YEAR_LIST_DATA,
|
orgNameProps: {
|
label: "value",
|
value: "value"
|
},
|
orgNameValue: [],
|
bengToList: [
|
{
|
label: "市直属"
|
},
|
{
|
label: "西区"
|
},
|
{
|
label: "东区"
|
},
|
{
|
label: "仁和区"
|
},
|
{
|
label: "盐边县"
|
},
|
{
|
label: "米易县"
|
},
|
{
|
label: "钒钛高新区"
|
}
|
],
|
timesList: [
|
{
|
label: "按服务次数排序",
|
value: 1
|
},
|
{
|
label: "按服务时长排序",
|
value: 2
|
},
|
{
|
label: "按积分排序",
|
value: 3
|
}
|
],
|
pageInfo: {}
|
};
|
},
|
mounted() {
|
// this.getTable();
|
},
|
methods: {
|
// 获取列表
|
getTable() {
|
this.loading = true;
|
const requestData = {
|
page: this.pageNum,
|
size: this.pageSize,
|
year: this.searchVal.yearValue,
|
type: this.searchVal.rangeValue,
|
orgName: this.searchVal.orgNameValue,
|
belongTo: this.searchVal.belongToValue,
|
orgName: this.searchVal.orgName
|
};
|
this.$api.get("communityactivity/analysis", requestData, res => {
|
this.loading = false;
|
this.tableLsit = res.unitList.records;
|
this.total = res.unitList.recordsCount;
|
this.pageInfo = res;
|
});
|
},
|
// 切换条数
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getTable();
|
},
|
// 切换页
|
handleCurrentChange(val) {
|
this.pageNum = val;
|
this.getTable();
|
},
|
// 页面操作
|
async handleAction(type, row) {
|
switch (type) {
|
// 重置
|
case "reset": {
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.searchVal = { yearValue: "", belongToValue: "", rangeValue: "" };
|
this.getTable();
|
break;
|
}
|
// 搜索
|
case "search": {
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.getTable();
|
break;
|
}
|
// 导出
|
case "export": {
|
this.handleExport();
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
// 导出
|
handleExport() {
|
this.$api.getFile("communityactivity/exportExcel", {}, res => {
|
// console.log(res);
|
// window.location.href = res;
|
});
|
}
|
}
|
};
|
</script>
|
<style>
|
.table-content {
|
position: relative;
|
}
|
.export {
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
.el-dialog {
|
width: 800px !important;
|
}
|
</style>
|
