<template>
|
<div class="statisics">
|
<v-header
|
title="查看统计"
|
></v-header>
|
<div class="add">
|
<!-- <el-button
|
type="primary"
|
size="small"
|
>返回上一级</el-button> -->
|
<span class="back-color" @click="back"><i class="el-icon-arrow-left"></i>返回上一级</span>
|
</div>
|
|
<div class="tab">
|
<el-tabs v-model="activeName" @tab-click="tablehandleClick">
|
<!-- 统计汇总 -->
|
<el-tab-pane label="统计汇总" class="custom-h" name="first">
|
<div class="data-statistics">
|
<div class="list">
|
<div class="lie">
|
<p>填报志愿者</p>
|
<p class="f-num">{{headerList.volunteerCount || 0}}</p>
|
</div>
|
<div class="lie">
|
<p>填报党员</p>
|
<p class="f-num">{{headerList.partymemberCount || 0}}</p>
|
</div>
|
<div class="lie">
|
<p>总填报量</p>
|
<p class="f-num">{{headerList.allCount || 0}}</p>
|
</div>
|
<div class="lie">
|
<p>总浏览量</p>
|
<p class="f-num">{{headerList.viewNum || 0}}</p>
|
</div>
|
<div class="lie">
|
<p>填报率</p>
|
<p class="f-num">{{headerList.tag || 0}}%</p>
|
</div>
|
<div class="lie">
|
<p>今日新增</p>
|
<p class="f-num">{{headerList.todayCount || 0}}</p>
|
</div>
|
<div class="lie">
|
<p>未填报志愿者</p>
|
<p class="f-num">{{headerList.noVolunteerCount || 0}}</p>
|
</div>
|
<div class="lie">
|
<p>未填报党员</p>
|
<p class="f-num">{{headerList.noPartymemberCount || 0}}</p>
|
</div>
|
</div>
|
<div class="btn">
|
<el-button
|
type="primary"
|
size="small"
|
@click="exportsT()"
|
>导出</el-button>
|
<!-- <el-button
|
type="primary"
|
size="small"
|
v-print="'#printMe'"
|
>打印</el-button> -->
|
</div>
|
</div>
|
<!-- tab -->
|
<div class="tab" id="printMe">
|
<v-tool-table
|
:trs="trsSummary"
|
:tds="tdsSummary"
|
ref="table"
|
sel
|
>
|
<template v-slot:btns="{scope}">
|
<span>{{scope.count}} / {{scope.allCount}}</span>
|
</template>
|
</v-tool-table>
|
<v-tool-page
|
:item="pageds"
|
@on-page="onPages"
|
></v-tool-page>
|
</div>
|
</el-tab-pane>
|
<!-- 填报列表 -->
|
<!-- <el-tab-pane label="填报列表" class="custom-h" name="second">
|
<div class="choose-table">
|
<div
|
class="Tips"
|
>
|
<i
|
style="color: #409EFF"
|
class="el-icon-info"
|
></i>
|
<div class="Tips-cont">已选择<span>0</span>项</div>
|
<el-button
|
type="text"
|
@click="cancel"
|
>取消</el-button>
|
|
<el-date-picker
|
class="picker"
|
v-model="dataTimes"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
|
<div class="button">
|
<el-button
|
type="primary"
|
size="small"
|
plain
|
@click="exportsDetails()"
|
>导出</el-button>
|
</div>
|
</div>
|
|
<div class="tab">
|
<v-table
|
:trs="trs"
|
:tds="tds"
|
ref="table"
|
sel
|
>
|
<template v-slot:btn="{scope}">
|
<span @click="exportsDetails(scope.id)">导出</span>
|
<span>查看</span>
|
</template>
|
</v-table>
|
</div>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
</el-tab-pane> -->
|
</el-tabs>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
dataTimes:[],
|
activeName: 'first',
|
// trs: [
|
// { text: "序号", val: "index" },
|
// { text: "ID", val: "btn", slot: "state" },
|
// { text: "用户昵称", val: ""},
|
// { text: "标题1", val: ""},
|
// { text: "提交时间", val: ""},
|
// { text: "操作", val: "btn" ,slot:"btn",width:"250px"},
|
|
// ],
|
// tds: [],
|
trsSummary: [
|
{ text: "题目", val: "subject" },
|
{ text: "选项", val: "option"},
|
{ text: "所在比例", val: "tag"},
|
{ text: "该选项选择总次数/该题目选择总次数", val: "btn" ,slot:"btns"},
|
],
|
tdsSummary:[],
|
pageds: { page: 0, total: 0, r: 0, limit: 10 }, //统计汇总分页
|
headerList:{},
|
id:'',
|
};
|
},
|
|
mounted() {
|
if(this.$route.query.id) {
|
this.id = this.$route.query.id;
|
this.onPages();
|
this.headerData()
|
}
|
},
|
|
methods: {
|
onSearch(v) {
|
// this.search = demo.copy(v);
|
// this.paged.page = 1;
|
// this.init();
|
},
|
|
getstatistics(id) {
|
let params = {
|
pageNum: this.pageds.page,
|
pageSize: this.pageds.limit,
|
questId: this.id,
|
}
|
this.$api.post("questnaire/statistics/summary", params, e => {
|
this.pageds.total = e.total;
|
this.pageds.r++;
|
this.tdsSummary = e.records || [];
|
});
|
},
|
|
headerData(id) {
|
this.$api.get("questnaire/statistics/summary/header", { questId: this.id }, e => {
|
this.headerList = e;
|
});
|
},
|
|
|
|
//统计汇总分页点击
|
onPages(v) {
|
// console.log(v)
|
// if (v.page === this.pageds.page && v.page && !v.reset) {
|
// return 0;
|
// }
|
// this.pageds.page = v.page;
|
// this.pageds.limit = v.limit;
|
this.getstatistics();
|
},
|
|
//表单内容切换
|
tablehandleClick(tab, event) {
|
console.log(tab, event);
|
},
|
|
// 列表分页点击
|
onPage(v) {
|
},
|
|
// 获取数据
|
init() {
|
|
},
|
|
//取消
|
cancel() {
|
|
},
|
|
//查看详情
|
see() {
|
this.$router.push({
|
path:'/act_quest_details',
|
query:{}
|
})
|
},
|
|
//详情数据导出
|
exportsDetails(v) {
|
// if(!v) {
|
// if(!this.ids.length) {
|
// demo.toast("请勾选需要下载的内容");
|
// return
|
// }
|
// }
|
// this.$api.post("user/wallet/trade/export", params, (e) => {
|
// window.location.href = e;
|
// });
|
},
|
|
//统计导出
|
exportsT() {
|
this.$api.get("questnaire/statistics/summary/export", {questId:this.id}, (e) => {
|
window.location.href = e;
|
});
|
},
|
|
back() {
|
this.$router.back();
|
}
|
},
|
};
|
</script>
|
<style lang="less" scope>
|
.statisics {
|
overflow-y: auto;
|
.tab,
|
.add {
|
text-align: right;
|
}
|
.data-statistics {
|
width: 100%;
|
height: 80px;
|
line-height: 80px;
|
margin-bottom: 20px;
|
.list {
|
float: left;
|
text-align: center;
|
.lie {
|
float: left;
|
margin-right: 30px;
|
p {
|
line-height: 35px;
|
}
|
.f-num{
|
font-size: 24px;
|
font-weight: 700;
|
}
|
}
|
}
|
.btn {
|
float: right;
|
}
|
}
|
.choose-table {
|
display: flex;
|
justify-content: space-between;
|
}
|
.picker {
|
margin-left: 30px;
|
}
|
.back-color {
|
color: #409EFF;
|
cursor: pointer;
|
}
|
.Tips {
|
margin: 10px 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
height: 40px;
|
padding: 0 20px;
|
}
|
.Tips-cont {
|
padding: 0 10px;
|
font-size: 16px;
|
color: #606266;
|
}
|
.Tips-cont > span {
|
padding: 0 4px;
|
color: #409eff;
|
font-weight: 600;
|
}
|
}
|
</style>
|
