统计
This commit is contained in:
@@ -116,7 +116,6 @@ export default {
|
||||
label: 'girdName',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -35,12 +35,18 @@
|
||||
</div>
|
||||
<div class="echertsBox">
|
||||
<div class="left_Box">
|
||||
<div id="chart1" style="height: 300px; width: 100%;"></div>
|
||||
<ai-empty v-if="false" style="height: 300px;"></ai-empty>
|
||||
<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">
|
||||
<div id="chart2" style="height: 300px; width: 100%;"></div>
|
||||
<ai-empty v-if="false" style="height: 300px;"></ai-empty>
|
||||
<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>
|
||||
@@ -51,14 +57,16 @@
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-cascader ref="cascader2" v-model="search.girdId" :options="girdOptions" placeholder="所属网格" size="small"
|
||||
:props="defaultProps" :show-all-levels="false" @change="gridChangeOpt"></el-cascader>
|
||||
<!-- <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker> -->
|
||||
:props="defaultProps" :show-all-levels="false" clearable @change="gridChangeOpt"></el-cascader>
|
||||
<ai-select v-model="search.integralType" placeholder="请选择类型" @change="page.current=1, getTableData()"
|
||||
:selectList="dict.getDict('integralDetailType')"/>
|
||||
<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.name" clearable
|
||||
@clear="page.current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
<el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.userName" clearable
|
||||
@clear="page.current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(page.current = 1), getTableData();}" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
@@ -121,23 +129,25 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: "积分统计",
|
||||
myChart1: null,
|
||||
myChart2: null,
|
||||
tableData: [],
|
||||
search: {
|
||||
current: 1,
|
||||
name: '',
|
||||
girdId: ''
|
||||
userName: '',
|
||||
girdId: '',
|
||||
integralType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
},
|
||||
page: {current: 1, size: 10,total: 0,},
|
||||
girdList: [],
|
||||
time: '',
|
||||
time: [],
|
||||
timeCheck: ['昨日','近7天','近30天','自定义'],
|
||||
dialog: false,
|
||||
dialogDate: false,
|
||||
timeList: '',
|
||||
type: '0',
|
||||
timeList: [],
|
||||
type: '1',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
data: {},
|
||||
@@ -147,13 +157,13 @@ export default {
|
||||
label: 'girdName',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
},
|
||||
details: {},
|
||||
fileDownLoad: [],
|
||||
girdSortList: [],
|
||||
userSortList: [],
|
||||
|
||||
userSortListX: [],
|
||||
userSortListY: [],
|
||||
girdSortListX: [],
|
||||
girdSortListY: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -179,11 +189,12 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('epidemicDangerousAreaLevel')
|
||||
this.getStatistics()
|
||||
this.getGridList()
|
||||
this.getRanking()
|
||||
this.getTableData()
|
||||
this.$dict.load('epidemicDangerousAreaLevel').then(() => {
|
||||
this.getStatistics()
|
||||
this.getGridList()
|
||||
this.getRanking()
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 统计接口
|
||||
@@ -212,9 +223,14 @@ export default {
|
||||
endTime: this.endTime
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res, '积分排行');
|
||||
this.userSortList = res.data.userSortList
|
||||
this.girdSortList = res.data.girdSortList
|
||||
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)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 积分明细
|
||||
@@ -223,9 +239,6 @@ export default {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
integralType: this.integralType,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
@@ -235,21 +248,17 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
gridChangeOpt() {
|
||||
gridChangeOpt(val) {
|
||||
this.search.girdId = val?.[val.length - 1]
|
||||
this.$refs.cascader2.dropDownVisible = false;
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
getColEcherts1() {
|
||||
getColEcherts1(xData,yData) {
|
||||
let chartDom1 = document.getElementById('chart1');
|
||||
chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||
this.myChart1 = echarts.init(chartDom1);
|
||||
this.myChart1.setOption({
|
||||
|
||||
title: {
|
||||
text: '个人积分排行'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -260,7 +269,7 @@ export default {
|
||||
left: '16px',
|
||||
right: '28px',
|
||||
bottom: '14px',
|
||||
top: '50px',
|
||||
top: '16px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@@ -269,7 +278,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Brazil', 'Indonesia', 'India', 'China', 'World'],
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
@@ -280,7 +289,7 @@ export default {
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70,],
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@@ -302,14 +311,11 @@ export default {
|
||||
}, true);
|
||||
window.addEventListener("resize", this.onResize)
|
||||
},
|
||||
getColEcherts2() {
|
||||
getColEcherts2(xData,yData) {
|
||||
let chartDom2 = document.getElementById('chart2');
|
||||
chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||
this.myChart2 = echarts.init(chartDom2);
|
||||
this.myChart2.setOption({
|
||||
title: {
|
||||
text: '网格积分排行'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -320,7 +326,7 @@ export default {
|
||||
left: '16px',
|
||||
right: '28px',
|
||||
bottom: '14px',
|
||||
top: '50px',
|
||||
top: '16px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@@ -329,7 +335,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Brazil', 'Indonesia', 'India', 'China', 'World'],
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
@@ -339,7 +345,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70,],
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@@ -417,6 +423,12 @@ export default {
|
||||
this.getDetail(id)
|
||||
},
|
||||
|
||||
onChange(val) {
|
||||
this.search.startTime = val?.[0]
|
||||
this.search.endTime = val?.[1]
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
getDetail(id) {
|
||||
this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res=> {
|
||||
if(res?.data) {
|
||||
@@ -436,6 +448,7 @@ export default {
|
||||
this.endTime = this.timeList?.[1]
|
||||
this.dialogDate = false
|
||||
this.getStatistics()
|
||||
this.getRanking()
|
||||
},
|
||||
|
||||
},
|
||||
@@ -540,9 +553,11 @@ export default {
|
||||
display: flex;
|
||||
.left_Box {
|
||||
margin-right: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.right_Box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left_Box,
|
||||
@@ -555,7 +570,10 @@ export default {
|
||||
#chart1,
|
||||
#chart2 {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
height: 300px;
|
||||
}
|
||||
p {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user