kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

积分统计丰都 => 数字平昌

Browse Source
This commit is contained in:
yanran200730
2023-05-25 14:15:10 +08:00
parent 38d5f9d753
commit 99368c5f86
1 changed files with 286 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

567
project/shuzipingchang/app/AppIntegralStatistics/AppIntegralStatistics.vue
View File

@@ -1,101 +1,115 @@
<template>
<section class="AppIntegralStatistics">
<el-row class="overallStatistics">
<div class="title">
<p>总体统计</p>
<div class="title_right">
<div>
<span v-for="(item,index) in timeCheck" :key="index" :class="type == index? 'active':''"
@click="timeChange(index)">{{ item }}</span>
</div>
<ai-detail list>
<ai-title slot="title" title="总体统计">
<template #rightBtn>
<el-row type="flex" align="middle">
<span class="shortcut" v-for="(item,i) in timeCheck" :key="i" :class="{active:type==i}"
@click="timeChange(i)" v-text="item"/>
<el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small"
:props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader>
</div>
</div>
<div class="card_list">
<div class="card">
<h2>积分余额汇总
<el-tooltip
placement="right"
style="width: 16px;"
content="截止目前所有居民剩余可用积分余额的总和">
<i class="el-icon-warning-outline"></i>
</el-tooltip>
</h2>
<p class="color1">{{ data.nowIntegral || 0 }}</p>
</div>
<div class="card">
<h2>发放积分</h2>
<p class="color1">{{ data.addIntegral || 0 }}</p>
</div>
<div class="card">
<h2>消耗积分</h2>
<p class="color1">{{ Math.abs(data.reduceIntegral) || 0 }}</p>
</div>
</div>
<div class="echertsBox">
<div class="left_Box">
<p>个人积分排行</p>
<div>
<div id="chart1" style="height: 300px; width: 100%;" v-show="userSortListX.length && userSortListY.length"></div>
<ai-empty v-show="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
</div>
</div>
<div class="right_Box">
<p>网格积分排行</p>
<div>
<div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"></div>
<ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
</div>
</div>
</div>
</el-row>
<ai-card>
<ai-title slot="title" title="积分明细"/>
:props="defaultProps" :show-all-levels="false" @change="gridChange" clearable/>
</el-row>
</template>
</ai-title>
<template #content>
<ai-search-bar>
<template #left>
<el-cascader ref="cascader2" v-model="girdIdArr" :options="girdOptions" placeholder="所属网格" size="small"
:props="defaultProps" :show-all-levels="false" clearable @change="gridChangeOpt"></el-cascader>
<ai-select v-model="search.integralType" placeholder="请选择类型" @change="current=1, getTableData()"
:selectList="dict.getDict('integralType')"/>
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
</el-date-picker>
<div class="card_list">
<div class="card">
<h2>积分余额汇总
<el-tooltip
placement="right"
style="width: 16px;"
content="截止目前所有居民剩余可用积分余额的总和">
<i class="el-icon-warning-outline"></i>
</el-tooltip>
</h2>
<p class="color1">{{ data.nowIntegral || 0 }}</p>
</div>
<div class="card">
<h2>发放积分</h2>
<p class="color1">{{ data.addIntegral || 0 }}</p>
</div>
<div class="card">
<h2>消耗积分</h2>
<p class="color1">{{ Math.abs(data.reduceIntegral) || 0 }}</p>
</div>
</div>
<el-row type="flex" class="mar-t20 gap-20">
<div class="chartBox fill">
<b>个人积分排行</b>
<div>
<div id="chart1" style="height: 300px; width: 100%;"
v-show="userSortListX.length && userSortListY.length"></div>
<ai-empty v-if="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;"
id="empty"/>
</div>
</div>
<div class="chartBox fill">
<b>网格积分排行</b>
<div>
<div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"/>
<ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;"
id="empty"/>
</div>
</div>
</el-row>
<el-row type="flex" class="mar-t20 gap-20">
<div class="chartBox fill" v-for="item in sta" :key="item.id">
<div flex>
<b class="fill" v-text="item.label"/>
<div class="color-primary" v-text="`总次数：${item.total}`"/>
</div>
<div class="chart" :id="item.id" v-show="item.sta.length>0"/>
<ai-empty v-if="item.sta.length==0" style="height: 200px; width: 100%;"/>
</div>
</el-row>
<ai-card class="mar-t20" title="积分明细">
<template #content>
<ai-search-bar>
<template #left>
<el-cascader ref="cascader2" v-model="girdIdArr" :options="girdOptions" placeholder="所属网格"
size="small"
:props="defaultProps" :show-all-levels="false" clearable
@change="gridChangeOpt"></el-cascader>
<ai-select v-model="search.integralType" placeholder="请选择类型" @change="current=1, getTableData()"
:selectList="dict.getDict('integralType')"/>
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
@change="onChange">
</el-date-picker>
</template>
<template #right>
<el-input size="small" placeholder="请输入姓名" v-model="search.userName" clearable
@clear="current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
v-throttle="() => {(current = 1), getTableData();}"/>
</template>
</ai-search-bar>
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
<el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.integralRuleName || row.eventDesc }}</span>
</template>
</el-table-column>
<el-table-column slot="changeIntegral" label="变动积分" align="center">
<template slot-scope="{ row }">
<span>{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center">
<template slot-scope="{ row }">
<el-button type="text" @click="open(row.id)">详情</el-button>
</template>
</el-table-column>
</ai-table>
</template>
<template #right>
<el-input size="small" placeholder="请输入姓名" v-model="search.userName" clearable
@clear="current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
v-throttle="() => {(current = 1), getTableData();}" />
</template>
</ai-search-bar>
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
<el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.integralRuleName || row.eventDesc}}</span>
</template>
</el-table-column>
<el-table-column slot="changeIntegral" label="变动积分" align="center">
<template slot-scope="{ row }">
<span>{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center">
<template slot-scope="{ row }">
<el-button type="text" @click="open(row.id)">详情</el-button>
</template>
</el-table-column>
</ai-table>
</ai-card>
</template>
</ai-card>
</ai-detail>
<el-dialog title="详情" :visible.sync="dialog" customFooter width="700">
<ai-detail>
<template #content>
<ai-wrapper>
<ai-info-item label="姓名" :value="details.integralUserName" />
<ai-info-item label="姓名" :value="details.integralUserName"/>
<ai-info-item label="所属网格" :value="details.girdName"/>
<ai-info-item label="事件" isLine :value="details.eventDesc">
<span v-if="details.integralRuleId">{{ details.integralRuleName }}</span>
@@ -116,10 +130,9 @@
<el-button @click="dialog = false" style="width: 92px">关闭</el-button>
</span>
</el-dialog>
<ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
<el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
<el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
</ai-dialog>
@@ -127,11 +140,15 @@
</template>
<script>
import { mapState } from "vuex"
import {mapState} from "vuex"
import * as echarts from 'echarts';
import dayjs from 'dayjs'
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";
export default {
name: "AppIntegralStatistics",
components: {AiTitle, AiDetail},
label: "积分统计",
props: {
instance: Function,
@@ -151,13 +168,13 @@ export default {
startTime: '',
endTime: '',
},
girdIdArr:[],
girdIdArr: [],
total: 0,
size: 10,
current: 1,
girdList: [],
time: [],
timeCheck: ['昨日','近7天','近30天','自定义'],
timeCheck: ['昨日', '近7天', '近30天', '自定义'],
dialog: false,
dialogDate: false,
timeList: [],
@@ -180,29 +197,28 @@ export default {
userSortListY: [],
girdSortListX: [],
girdSortListY: [],
sta: []
}
},
computed: {
...mapState(['user']),
colConfigs() {
return [
{ prop: "integralUserName", label: '姓名', align: "left", width: "200px" },
{ prop: "girdName", label: '所属网格', align: "center", width: "180px" },
{ slot: "eventDesc"},
{ prop: "integralType", label: '类型', align: "center", dict: "integralType"},
{ slot: "changeIntegral", label: '积分变动', align: "center", },
{ prop: "nowIntegral", label: '剩余积分', align: "center", },
{ prop: "createTime", label: '时间', align: "center", },
{ slot: "options" }
{prop: "integralUserName", label: '姓名', align: "left", width: "200px"},
{prop: "girdName", label: '所属网格', align: "center", width: "180px"},
{slot: "eventDesc"},
{prop: "integralType", label: '类型', align: "center", dict: "integralType"},
{slot: "changeIntegral", label: '积分变动', align: "center",},
{prop: "nowIntegral", label: '剩余积分', align: "center",},
{prop: "createTime", label: '时间', align: "center",},
{slot: "options"}
]
}
},
},
created() {
this.time = [dayjs().subtract(1,'week').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
this.$dict.load('epidemicDangerousAreaLevel','integralType','integralRuleEvent','integralRuleEventType').then(() => {
this.getStatistics()
this.time = [dayjs().subtract(1, 'week').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
this.$dict.load('epidemicDangerousAreaLevel', 'integralType', 'integralRuleEvent', 'integralRuleEventType').then(() => {
this.getGridList()
this.getRanking()
this.search.startTime = this.time?.[0]
this.search.endTime = this.time?.[1]
this.getTableData()
@@ -211,23 +227,44 @@ export default {
methods: {
// 统计接口
getStatistics() {
this.instance.post('/app/appintegraluser/allAppletUserIntegral',null, {
params: {
type: this.type,
girdId: this.girdId,
startTime: this.startTime,
endTime: this.endTime,
}
}).then(res => {
if(res?.data) {
this.data = res.data
}
})
return Promise.all([
this.instance.post('/app/appintegraluser/allAppletUserIntegral', null, {
params: {
type: this.type,
girdId: this.girdId,
startTime: this.startTime,
endTime: this.endTime,
}
}).then(res => {
if (res?.data) {
return this.data = res.data
}
}),
this.instance.post("/app/appwechatsigninfo/userSignAndIntegralApplyAndIntegralExchangeSort", null, {
params: {
type: this.type,
girdId: this.girdId,
startTime: this.startTime,
endTime: this.endTime,
}
}).then(res => {
if (res?.data) {
const {
signCountList = [], integralApplyCountList = [], integralExchangeCountList = [],
signCount = 0, integralExchangeCount = 0, integralApplyCount = 0
} = res.data
return this.sta = [
{label: "签到次数统计", id: 'signCount', sta: signCountList, total: signCount},
{label: "积分申请次数统计", id: 'integralApplyCount', sta: integralApplyCountList, total: integralApplyCount},
{label: "积分兑换次数统计（小程序用户）", id: 'integralExchangeCount', sta: integralExchangeCountList, total: integralExchangeCount}
]
}
}).then(() => this.sta.map(this.renderChart))
])
},
// 人员、网格排行
getRanking() {
this.instance.post('/app/appintegraluser/userAndGirdIntegralSortByApplet',null,{
return this.instance.post('/app/appintegraluser/userAndGirdIntegralSortByApplet', null, {
params: {
type: this.type,
girdId: this.girdId,
@@ -235,19 +272,21 @@ export default {
endTime: this.endTime
}
}).then((res) => {
if(res?.data) {
this.userSortListX = res.data.userSortList.map(e=> e.userName).reverse()
this.userSortListY = res.data.userSortList.map(e=> e.changeIntegral).reverse()
this.girdSortListX = res.data.girdSortList.map(e=> e.girdName).reverse()
this.girdSortListY = res.data.girdSortList.map(e=> e.changeIntegral).reverse()
this.getColEcherts1(this.userSortListX,this.userSortListY)
this.getColEcherts2(this.girdSortListX,this.girdSortListY)
if (res?.data) {
this.userSortListX = res.data.userSortList.map(e => e.userName).reverse()
this.userSortListY = res.data.userSortList.map(e => e.changeIntegral).reverse()
this.girdSortListX = res.data.girdSortList.map(e => e.girdName).reverse()
this.girdSortListY = res.data.girdSortList.map(e => e.changeIntegral).reverse()
return 1;
}
}).then(() => {
this.getColEcherts1(this.userSortListX, this.userSortListY)
this.getColEcherts2(this.girdSortListX, this.girdSortListY)
})
},
// 积分明细
getTableData() {
this.instance.post('/app/appintegraluser/girdIntegralDetailByApplet',null,{
this.instance.post('/app/appintegraluser/girdIntegralDetailByApplet', null, {
params: {
...this.search,
current: this.current,
@@ -255,7 +294,7 @@ export default {
total: this.total,
}
}).then(res => {
if(res?.data) {
if (res?.data) {
this.tableData = res.data.records
this.total = res.data.total
}
@@ -269,7 +308,7 @@ export default {
this.getTableData()
},
getColEcherts1(xData,yData) {
getColEcherts1(xData, yData) {
let chartDom1 = document.getElementById('chart1');
chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
this.myChart1 = echarts.init(chartDom1);
@@ -301,7 +340,6 @@ export default {
show: false,
},
},
series: [
{
data: yData,
@@ -324,9 +362,8 @@ export default {
}
]
}, true);
window.addEventListener("resize", this.onResize)
},
getColEcherts2(xData,yData) {
getColEcherts2(xData, yData) {
let chartDom2 = document.getElementById('chart2');
chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
this.myChart2 = echarts.init(chartDom2);
@@ -358,16 +395,16 @@ export default {
show: false,
},
triggerEvent: true,
//设置文本过长超出隐藏...表示
axisLabel:{
margin: 8,
formatter: function(params){
var val=""
if(params.length > 8) {
val = params.substr(0,8)+'...'
return val
} else {
return params;
//设置文本过长超出隐藏...表示
axisLabel: {
margin: 8,
formatter: function (params) {
var val = ""
if (params.length > 8) {
val = params.substr(0, 8) + '...'
return val
} else {
return params;
}
}
},
@@ -394,14 +431,11 @@ export default {
}
]
}, true);
window.addEventListener("resize", this.onResize2)
// this.extension(this.myChart2)
},
onResize1() {
this.myChart1.resize()
},
onResize2() {
this.myChart2.resize()
onResize() {
this.myChart1?.resize()
this.myChart2?.resize()
this.sta.map(e => e.chart?.resize())
},
gridChange(val) {
this.girdArr = val
@@ -441,12 +475,13 @@ export default {
},
timeChange(index) {
if(index == 3) {
this.dialogDate = true
}
this.type = index
this.getStatistics()
this.getRanking()
if (index == 3) {
this.dialogDate = true
} else {
this.getStatistics()
this.getRanking()
}
},
open(id) {
@@ -461,13 +496,13 @@ export default {
},
getDetail(id) {
this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res=> {
if(res?.data) {
this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res => {
if (res?.data) {
this.details = res.data
if(res.data.enclosure) {
if (res.data.enclosure) {
let str = res.data.enclosure.split('/')
this.fileDownLoad = [{
url:res.data.enclosure,
url: res.data.enclosure,
name: str?.[str.length - 1]
}]
}
@@ -476,7 +511,7 @@ export default {
},
selectDete() {
if(!this.timeList || !this.timeList.length) {
if (!this.timeList || !this.timeList.length) {
return this.$message.error('请选择自定义时间');
}
this.startTime = this.timeList?.[0]
@@ -485,29 +520,42 @@ export default {
this.getStatistics()
this.getRanking()
},
renderChart(item = {}) {
if (!item.chart) {
const el = document.getElementById(item.id)
el.style.width = (window.innerWidth - 435) / 3 + "px";
item.chart = echarts.init(el)
}
item.chart.setOption({
xAxis: {minInterval: 1},
tooltip: {},
legend: {},
yAxis: {type: 'category'},
dataset: {dimensions: ['username', 'count', 'integral'], source: item.sta},
series: [
{name: "次数", barWidth: 10, barGap: '20%', type: 'bar'},
{name: "积分", barWidth: 10, barGap: '20%', type: 'bar'}
]
}, true)
}
},
filters: {
formatTime(num) {
if(num > 0) {
if (num > 0) {
return '+' + num
} else {
return num
}
}
},
mounted() {
this.getColEcherts1()
this.getColEcherts2()
window.addEventListener('resize', this.onResize)
this.getRanking()
this.getStatistics()
},
destroyed () {
window.removeEventListener('resize', this.onResize1)
window.removeEventListener('resize', this.onResize2)
destroyed() {
window.removeEventListener('resize', this.onResize)
},
}
</script>
@@ -515,133 +563,90 @@ export default {
.AppIntegralStatistics {
height: 100%;
box-sizing: border-box;
padding-top: 20px;
overflow-y: scroll;
.overallStatistics {
width: 100%;
margin-bottom: 16px;
padding: 20px;
box-sizing: border-box;
background: #FFF;
.title {
.shortcut {
display: inline-block;
width: 70px;
height: 32px;
line-height: 32px;
border-radius: 2px;
border: 1px solid #D0D4DC;
margin-right: 8px;
text-align: center;
cursor: pointer;
&.active {
color: #2266FF;
border: 1px solid #2266FF;
}
}
.chartBox {
background: #F9F9F9;
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
.chart {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 16px;
p {
height: 300px;
}
}
.card_list {
display: flex;
.card {
flex: 1;
height: 96px;
background: #F9F9F9;
border-radius: 2px;
margin-right: 20px;
padding: 16px 24px;
box-sizing: border-box;
h2 {
color: #888888;
font-weight: 600;
font-size: 16px;
font-family: MicrosoftYaHeiSemibold;
color: #222222;
}
p {
margin-top: 8px;
font-size: 24px;
font-weight: 600;
}
.title_right {
display: flex;
align-items: center;
span {
display: inline-block;
width: 70px;
height: 32px;
line-height: 32px;
border-radius: 2px;
border: 1px solid #D0D4DC;
margin-right: 8px;
text-align: center;
cursor: pointer;
}
.active {
color: #2266FF;
border: 1px solid #2266FF;
}
.color1 {
color: #2891FF;
}
.color2 {
color: #22AA99;
}
.color3 {
color: #F8B425;
}
}
.card_list {
display: flex;
.card {
flex: 1;
height: 96px;
background: #F9F9F9;
border-radius: 2px;
margin-right: 20px;
padding: 16px 24px;
box-sizing: border-box;
h2 {
color: #888888;
font-weight: 600;
font-size: 16px;
}
p {
margin-top: 8px;
font-size: 24px;
font-weight: 600;
}
.color1 {
color: #2891FF;
}
.color2 {
color: #22AA99;
}
.color3 {
color: #F8B425;
}
}
.card:last-child {
margin-right: 0;
}
}
.echertsBox {
width: 100%;
margin-top: 20px;
background: #FFF;
display: flex;
.left_Box {
margin-right: 16px;
flex: 1;
}
.right_Box {
width: 100%;
flex: 1;
}
.left_Box,
.right_Box {
background: #F9F9F9;
box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
#chart1,
#chart2 {
width: 100%;
height: 300px;
}
p {
font-weight: 600;
}
}
.card:last-child {
margin-right: 0;
}
}
// .chartCss {
// position: absolute;
// color: black;
// background:white;
// font-family: Aril;
// font-size: 12px;
// padding: 5px;
// display: inline;
// }
:deep( .el-dialog__footer ){
:deep( .el-dialog__footer ) {
text-align: center;
}
:deep( .el-dialog__header ){
:deep( .el-dialog__header ) {
border-bottom: 1px solid #DDD;
}
:deep( .ai-detail ){
:deep( .ai-detail ) {
background: #FFF;
}
}
}
</style>