337 lines
8.1 KiB
Vue
337 lines
8.1 KiB
Vue
<template>
|
||
<section class="detail">
|
||
<ai-title slot="title" :title="`${data.name}详情`" isShowBottomBorder :isShowBack="true" @onBackClick="cancel(false)"/>
|
||
<el-row style="margin-top: 20px;">
|
||
<div class="card_list">
|
||
<div class="card">
|
||
<h2>姓名</h2>
|
||
<p class="color1">{{ data.name }}</p>
|
||
</div>
|
||
<div class="card">
|
||
<h2>积分余额</h2>
|
||
<p class="color2">{{ data.score || 0 }}</p>
|
||
</div>
|
||
<div class="card">
|
||
<h2>已用积分</h2>
|
||
<p class="color3">{{ data.usedScore || 0 }}</p>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
<el-row class="echertsBox" style="margin-bottom: 16px">
|
||
<div class="title">
|
||
<h4>事件汇总</h4>
|
||
<div class="timecSelect">
|
||
时间：
|
||
<el-date-picker size="small" value-format="yyyy-MM-dd" @change="timeChange" v-model="timeList" type="daterange" range-separator="至"
|
||
:start-placeholder="startPla" :end-placeholder="endPla"></el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div class="bar_Box">
|
||
<div id="chartDom" style="height: 230px; width: 100%;" v-show="xData.length && yData.length"></div>
|
||
<ai-empty style="height: 200px; width: 100%;" v-show="!xData.length && !yData.length"></ai-empty>
|
||
</div>
|
||
</el-row>
|
||
<ai-card>
|
||
<ai-title slot="title" title="余额变动明细"/>
|
||
<template #content>
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<ai-select v-model="search.scoreType" placeholder="请选择类型" @change="search.current=1,getIntegralChange()"
|
||
:selectList="dict.getDict('srScoreType')"/>
|
||
</template>
|
||
<template #right>
|
||
<ai-download :instance="instance" :url="`/app/appscoredetail/listExport?sysUserId=${data.id}`" :params="search" fileName="余额变动明细"
|
||
:disabled="tableData.length == 0">
|
||
<el-button size="small">导出</el-button>
|
||
</ai-download>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
|
||
@getList="getIntegralChange" :col-configs="colConfigs" :dict="dict">
|
||
</ai-table>
|
||
</template>
|
||
</ai-card>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import dayjs from "dayjs";
|
||
;
|
||
|
||
export default {
|
||
name: "detail",
|
||
data() {
|
||
return {
|
||
myChart: null,
|
||
tableData: [],
|
||
search: {
|
||
scoreType: '',
|
||
current: 1,
|
||
size: 10,
|
||
},
|
||
total: 0,
|
||
girdList: [],
|
||
timeList: [],
|
||
data: {},
|
||
startTime: '',
|
||
endTime: '',
|
||
xData: [],
|
||
yData: [],
|
||
startPla: '',
|
||
endPla: ''
|
||
}
|
||
},
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
params: Object
|
||
},
|
||
|
||
computed: {
|
||
colConfigs() {
|
||
return [
|
||
{prop: "createTime", label: '时间', align: "center",width: "200px"},
|
||
{prop: "scoreType", label: '类型', align: "center", width: "240px", dict: "srScoreType"},
|
||
{prop: "scoreCalcType", label: '积分变动类型', align: "center", dict: 'srScoreCalcType'},
|
||
{prop: "changeScore", label: '变动积分', align: "center",},
|
||
{prop: "nowScore", label: '剩余积分', align: "center", width: "200px"},
|
||
{prop: "eventDesc", label: '事件', align: "center",'show-overflow-tooltip': true},
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
this.$dict.load('srScoreType', 'srScoreCalcType', 'srType').then(() => {
|
||
this.getDetail()
|
||
let nowTime = dayjs().format('YYYY-MM-DD')
|
||
this.startPla = dayjs().subtract(29, 'day').format('YYYY-MM-DD')
|
||
this.endPla = nowTime
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
// 详情
|
||
getDetail() {
|
||
this.instance.post(`/app/appscoredetail/userInfo`, null, {
|
||
params: {
|
||
sysUserId: this.params.id
|
||
}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.data = res.data
|
||
this.getEventSummary()
|
||
this.getIntegralChange()
|
||
}
|
||
})
|
||
},
|
||
|
||
// 事件汇总
|
||
getEventSummary() {
|
||
this.instance.post(`/app/appscoredetail/detailTypeStatistics`, null, {
|
||
params: {
|
||
startTime: this.startTime,
|
||
endTime: this.endTime,
|
||
sysUserId: this.data.id
|
||
}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.xData = res.data.map(x => this.dict.getLabel('srType', x.type))
|
||
this.yData = res.data.map(y => y.score)
|
||
this.getColEcherts(this.xData, this.yData)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 余额变动明细
|
||
getIntegralChange() {
|
||
this.instance.post(`/app/appscoredetail/list`, null, {
|
||
params: {
|
||
...this.search, //积分类型
|
||
total: this.total,
|
||
sysUserId: this.data.id
|
||
}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.tableData = res.data.records
|
||
this.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
|
||
timeChange() {
|
||
if (this.timeList.length) {
|
||
this.startTime = this.timeList[0]
|
||
this.endTime = this.timeList[1]
|
||
this.getEventSummary()
|
||
}
|
||
},
|
||
|
||
getColEcherts(xData, yData) {
|
||
let chartDom = document.getElementById('chartDom');
|
||
chartDom.style.width = window.innerWidth - 335 + "px";
|
||
this.myChart = echarts.init(chartDom);
|
||
this.myChart.setOption({
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
},
|
||
],
|
||
grid: {
|
||
left: '16px',
|
||
right: '28px',
|
||
bottom: '14px',
|
||
top: '30px',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
data: yData,
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#5087ec",
|
||
label: {
|
||
show: true, //开启显示
|
||
position: 'top', //在上方显示
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: '#666'
|
||
}
|
||
},
|
||
},
|
||
},
|
||
barWidth: 20,
|
||
barGap: '20%',
|
||
}
|
||
]
|
||
}, true);
|
||
window.addEventListener("resize", this.onResize)
|
||
},
|
||
|
||
onResize() {
|
||
this.myChart.resize()
|
||
},
|
||
|
||
cancel(isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'List',
|
||
isRefresh: !!isRefresh
|
||
})
|
||
}
|
||
|
||
},
|
||
|
||
filters: {
|
||
formatTime(num) {
|
||
if (num > 0) {
|
||
return '+' + num
|
||
} else {
|
||
return num
|
||
}
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.getColEcherts()
|
||
},
|
||
|
||
destroyed() {
|
||
window.removeEventListener('resize', this.onResize)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
overflow-y: scroll;
|
||
|
||
.card_list {
|
||
display: flex;
|
||
|
||
.card {
|
||
flex: 1;
|
||
height: 96px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
|
||
border-radius: 4px;
|
||
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: #FFFFFF;
|
||
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
h4 {
|
||
color: #222222;
|
||
font-weight: 600;
|
||
}
|
||
|
||
}
|
||
|
||
.bar_Box {
|
||
width: 100%;
|
||
|
||
#chartDom {
|
||
width: 100%;
|
||
height: 230px;
|
||
margin-top: 16px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|