统计
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