黔西南积分
This commit is contained in:
liuye
337
project/qianxinan/AppPointsDetails/components/Detail.vue
Normal file
337
project/qianxinan/AppPointsDetails/components/Detail.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<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.nowScore || 0 }}</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>已用积分</h2>
|
||||
<p class="color3">{{ data.usedIntegral || 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/appintegraluser/changeIntegralExport?id=${$route.query.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";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
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: "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').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/queryDetailById`, null, {
|
||||
params: {
|
||||
id: 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: {
|
||||
id: this.params.id,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
sysUserId: this.data.sysUserId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.xData = res.data.map(x => x.eventName)
|
||||
this.yData = res.data.map(y => y.totalIntegral)
|
||||
this.getColEcherts(this.xData, this.yData)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 余额变动明细
|
||||
getIntegralChange() {
|
||||
this.instance.post(`/app/appscoredetail/list`, null, {
|
||||
params: {
|
||||
...this.search, //积分类型
|
||||
total: this.total,
|
||||
id: this.params.id,
|
||||
sysUserId: this.data.sysUserId
|
||||
}
|
||||
}).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>
|
||||
Reference in New Issue
Block a user