增加30日世界地图访问

This commit is contained in:
MaxKey
2025-01-13 07:29:03 +08:00
parent 69ffbe40fe
commit 605d4205ac
11 changed files with 506 additions and 11 deletions

View File

@@ -35,8 +35,11 @@ import org.dromara.mybatis.jpa.entity.JpaEntity;
public interface ReportMapper extends IJpaMapper<JpaEntity> {
public Integer analysisDay(HashMap<String,Object> reportParameter);
public Integer analysisNewUsers(HashMap<String,Object> reportParameter);
public Integer analysisOnlineUsers(HashMap<String,Object> reportParameter);
public Integer analysisActiveUsers(HashMap<String,Object> reportParameter);
public List<Map<String,Object>> analysisDayHour(HashMap<String,Object> reportParameter);
@@ -49,4 +52,6 @@ public interface ReportMapper extends IJpaMapper<JpaEntity> {
public List<Map<String,Object>> analysisProvince(HashMap<String,Object> reportParameter);
public List<Map<String,Object>> analysisCountry(HashMap<String,Object> reportParameter);
}

View File

@@ -43,4 +43,6 @@ public interface ReportService extends IJpaService<JpaEntity>{
public List<Map<String,Object>> analysisApp(HashMap<String,Object> reportParameter);
public List<Map<String,Object>> analysisProvince(HashMap<String,Object> reportParameter);
public List<Map<String,Object>> analysisCountry(HashMap<String,Object> reportParameter);
}

View File

@@ -86,4 +86,8 @@ public class ReportServiceImpl extends JpaServiceImpl<ReportMapper,JpaEntity> i
return maps;
}
public List<Map<String,Object>> analysisCountry(HashMap<String,Object> reportParameter){
return getMapper().analysisCountry(reportParameter);
}
}

View File

@@ -121,5 +121,19 @@
order by reportcount desc
limit 1000
</select>
<select id="analysisCountry" parameterType="java.util.HashMap" resultType="Map">
select
count(id) as reportcount,
coalesce(country,'Other') as reportstring
from mxk_history_login
where instid = #{instId}
and logintime >date_add(curdate(), interval - day(curdate()) -31 day)
and country !=''
group by reportstring
order by reportcount desc
limit 1000
</select>
</mapper>

View File

@@ -112,12 +112,23 @@
<div nz-col nzXs="24" nzMd="24">
<nz-card [nzTitle]="monthProvinceAccessCount" [nzBordered]="false">
<ng-template #monthProvinceAccessCount> {{ 'mxk.home.monthProvinceAccessCount' | i18n }} </ng-template>
<ng-template #monthProvinceAccessCount>
{{ 'mxk.home.monthProvinceAccessCount' | i18n }}
<nz-radio-group [(ngModel)]="mapType" nzButtonStyle="solid">
<label nz-radio-button nzValue="china">{{ 'mxk.home.maptype.china' | i18n }}</label>
<label nz-radio-button nzValue="world">{{ 'mxk.home.maptype.world' | i18n }}</label>
</nz-radio-group>
</ng-template>
<div style="display: flex">
<!-- 地图-->
<div id="mapChart" style="width: 900px; height: 500px"></div>
<div id="mapChart" style="width: 900px; height: 500px;display: {{ mapType == 'china' ? 'block' : 'none' }}"></div>
<div>
<nz-table #basicTable [nzData]="top10ProvinceTableData" [nzFrontPagination]="false" style="width: 450px">
<nz-table
#basicTable
[nzData]="top10ProvinceTableData"
[nzFrontPagination]="false"
style="width: 450px;display: {{ mapType == 'china' ? 'block' : 'none' }}"
>
<thead>
<tr>
<th style="width: 20%; text-align: center">{{ 'mxk.home.number' | i18n }}</th>
@@ -134,6 +145,31 @@
</tbody>
</nz-table>
</div>
<!-- 地图-->
<div id="worldMapChart" style="width: 900px; height: 500px;display: {{ mapType == 'world' ? 'block' : 'none' }}"></div>
<div>
<nz-table
#basicTable
[nzData]="top10WorldTableData"
[nzFrontPagination]="false"
style="width: 450px;display: {{ mapType == 'world' ? 'block' : 'none' }}"
>
<thead>
<tr>
<th style="width: 20%; text-align: center">{{ 'mxk.home.number' | i18n }}</th>
<th style="width: 50%; text-align: center">{{ 'mxk.home.country' | i18n }}</th>
<th style="width: 30%; text-align: center">{{ 'mxk.home.accessPV' | i18n }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of top10WorldTableData; let i = index">
<td style="text-align: center">{{ i + 1 }}</td>
<td style="text-align: center">{{ data.reportstring }}</td>
<td style="text-align: center">{{ data.reportcount }}</td>
</tr>
</tbody>
</nz-table>
</div>
</div>
</nz-card>
</div>

View File

@@ -26,6 +26,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { AnalysisService } from '../../../service/analysis.service';
import chinaMap from '../../../shared/map/json/china.json';
import worldMap from '../../../shared/map/json/world.zh.json';
@Component({
selector: 'app-home',
@@ -51,6 +52,7 @@ export class HomeComponent implements OnInit {
reportBrowser: any[] = [];
mapType = 'china';
//地图数据
provinceMapData: any[] = [];
@@ -58,6 +60,12 @@ export class HomeComponent implements OnInit {
top10ProvinceTableData: any[] = [];
worldMapData: any[] = [];
worldTableData: any[] = [];
top10WorldTableData: any[] = [];
mapSplitList: any[] = [
{ start: 90, end: 100 },
{ start: 80, end: 90 },
@@ -132,14 +140,187 @@ export class HomeComponent implements OnInit {
for (let i = 0; i < this.provinceTableData.length && i < 10; i += 1) {
this.top10ProvinceTableData[i] = this.provinceTableData[i];
}
this.worldTableData = res.data.reportCountry;
this.top10WorldTableData = [this.worldTableData.length];
for (let i = 0; i < this.worldTableData.length && i < 10; i += 1) {
this.top10WorldTableData[i] = this.worldTableData[i];
}
//延迟加载地图否则dom无法加载echarts地图
setTimeout(() => {
this.initCharts();
this.initWorldCharts();
});
this.cdr.detectChanges();
});
}
/*
* 世界地图
*/
initWorldCharts() {
let maxMapCount = 0;
for (let i = 0; i < this.worldTableData.length; i++) {
this.worldMapData.push({
value: this.worldTableData[i].reportcount,
name: this.worldTableData[i].reportstring,
itemStyle: { color: this.mapColor[this.mapColor.length - 1] }
});
if (maxMapCount < this.worldMapData[i].value) {
maxMapCount = this.worldMapData[i].value;
}
}
console.log(`maxMapCount ${maxMapCount}`);
if (maxMapCount <= 100) {
//100以内10
this.mapSplitList = [
{ start: 90, end: 100 },
{ start: 80, end: 90 },
{ start: 70, end: 80 },
{ start: 60, end: 70 },
{ start: 50, end: 60 },
{ start: 40, end: 50 },
{ start: 30, end: 40 },
{ start: 20, end: 30 },
{ start: 10, end: 20 },
{ start: 0, end: 10 }
];
} else if (maxMapCount <= 500) {
//500以内 50
this.mapSplitList = [
{ start: 450, end: 500 },
{ start: 400, end: 450 },
{ start: 350, end: 400 },
{ start: 300, end: 350 },
{ start: 250, end: 300 },
{ start: 200, end: 250 },
{ start: 150, end: 200 },
{ start: 100, end: 150 },
{ start: 50, end: 100 },
{ start: 0, end: 50 }
];
} else if (maxMapCount <= 1000) {
//1000以内 100
this.mapSplitList = [
{ start: 900, end: 100 },
{ start: 800, end: 900 },
{ start: 700, end: 800 },
{ start: 600, end: 700 },
{ start: 500, end: 600 },
{ start: 400, end: 500 },
{ start: 300, end: 400 },
{ start: 200, end: 300 },
{ start: 100, end: 200 },
{ start: 0, end: 100 }
];
} else if (maxMapCount <= 5000) {
//5000以内 500
this.mapSplitList = [
{ start: 4500, end: 5000 },
{ start: 4000, end: 4500 },
{ start: 3500, end: 4000 },
{ start: 3000, end: 3500 },
{ start: 2500, end: 3000 },
{ start: 2000, end: 2500 },
{ start: 1500, end: 2000 },
{ start: 1000, end: 1500 },
{ start: 500, end: 1000 },
{ start: 0, end: 500 }
];
} else if (maxMapCount <= 10000) {
//10000以内 1000
this.mapSplitList = [
{ start: 9000, end: 1000 },
{ start: 8000, end: 9000 },
{ start: 7000, end: 8000 },
{ start: 6000, end: 7000 },
{ start: 5000, end: 6000 },
{ start: 4000, end: 5000 },
{ start: 3000, end: 4000 },
{ start: 2000, end: 3000 },
{ start: 1000, end: 2000 },
{ start: 0, end: 1000 }
];
} else if (maxMapCount <= 50000) {
//50000以内 5000
this.mapSplitList = [
{ start: 45000, end: 50000 },
{ start: 40000, end: 45000 },
{ start: 35000, end: 40000 },
{ start: 30000, end: 35000 },
{ start: 25000, end: 30000 },
{ start: 20000, end: 25000 },
{ start: 15000, end: 20000 },
{ start: 10000, end: 15000 },
{ start: 5000, end: 10000 },
{ start: 0, end: 5000 }
];
} else if (maxMapCount <= 100000) {
//100000以内 10000
this.mapSplitList = [
{ start: 90000, end: 10000 },
{ start: 80000, end: 90000 },
{ start: 70000, end: 80000 },
{ start: 60000, end: 70000 },
{ start: 50000, end: 60000 },
{ start: 40000, end: 50000 },
{ start: 30000, end: 40000 },
{ start: 20000, end: 30000 },
{ start: 10000, end: 20000 },
{ start: 0, end: 10000 }
];
}
for (let i = 0; i < this.worldMapData.length; i++) {
for (let si = 0; si < this.mapSplitList.length; si++) {
if (this.mapSplitList[si].start < this.worldMapData[i].value && this.worldMapData[i].value <= this.mapSplitList[si].end) {
this.worldMapData[i].itemStyle.color = this.mapColor[si];
break;
}
}
}
console.log(this.worldMapData);
const ec = echarts as any;
let mapChart = ec.init(document.getElementById('worldMapChart'));
//注册地图到echarts中 这里的 "china" 要与地图数据的option中的geo中的map对应
ec.registerMap('world', { geoJSON: worldMap });
let optionMap = {
backgroundColor: '#FFFFFF',
tooltip: {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show: true,
x: 'left',
y: 'center',
splitList: this.mapSplitList,
color: this.mapColor
},
//配置属性
series: [
{
name: '数据',
type: 'map',
mapType: 'world',
roam: true,
label: {
normal: {
show: false //省份名称
},
emphasis: {
show: false
}
},
data: this.worldMapData //数据
}
]
};
mapChart.setOption(optionMap);
this.cdr.detectChanges();
}
//中国地图
initCharts() {
let maxMapCount = 0;
for (let i = 0; i < this.provinceTableData.length; i++) {

File diff suppressed because one or more lines are too long

View File

@@ -75,11 +75,14 @@
"monthAccessCount": "30 Day Access Count",
"monthAppCount": "30 Day TOP 10 App Access Count",
"monthBrowserCount": "30 Day TOP 10 Browser Access Count",
"monthProvinceAccessCount": "30 Day TOP 10 Province Access Count",
"monthProvinceAccessCount": "30 Day TOP 10 Access Count",
"appName": "App",
"browser": "Browser",
"accessCount": "Count",
"maptype.china":"China",
"maptype.world":"World",
"number": "Number",
"country": "Country",
"province": "Province",
"accessPV": "Access(PV)"
},

View File

@@ -74,13 +74,16 @@
"monthAccessCount": "30日访问情况统计",
"monthAppCount": "30日TOP10应用访问统计",
"monthBrowserCount": "30日TOP10浏览器访问统计",
"monthProvinceAccessCount": "30日TOP10各省份访问统计",
"monthProvinceAccessCount": "30日TOP10访问统计",
"appName": "应用名称",
"browser": "浏览器",
"accessCount": "访问量",
"maptype.china":"中国地图",
"maptype.world":"世界地图",
"number": "序号",
"province": "省份",
"accessPV": "浏览量(PV)"
"country": "国家",
"province": "省份",
"accessPV": "浏览量(PV)"
},
"users": {
"tab.basic": "基本信息",

View File

@@ -75,11 +75,14 @@
"monthAccessCount": "30日訪問情況統計",
"monthAppCount": "30日TOP10應用訪問統計",
"monthBrowserCount": "30日TOP10瀏覽器訪問統計",
"monthProvinceAccessCount": "30日TOP10各省份訪問統計",
"monthProvinceAccessCount": "30日TOP10訪問統計",
"appName": "應用名稱",
"browser": "瀏覽器",
"accessCount": "訪問量",
"maptype.china":"中国地图",
"maptype.world":"世界地图",
"number": "序號",
"country": "国家",
"province": "省份",
"accessPV": "瀏覽量(PV)"
},

View File

@@ -36,15 +36,15 @@ import org.springframework.web.bind.annotation.RestController;
*/
@RestController
public class DashboardController {
private static Logger logger = LoggerFactory.getLogger(DashboardController.class);
@Autowired
ReportService reportService;
@GetMapping(value={"/dashboard"})
public Message<?> dashboard(@CurrentUser UserInfo currentUser) {
logger.debug("dashboard . ");
HashMap<String,Object> reportParameter = new HashMap<String,Object>();
HashMap<String,Object> reportParameter = new HashMap<>();
reportParameter.put("instId", currentUser.getInstId());
reportParameter.put("dayCount", reportService.analysisDay(reportParameter));
@@ -58,9 +58,12 @@ public class DashboardController {
reportParameter.put("reportProvince", reportService.analysisProvince(reportParameter));
reportParameter.put("reportCountry", reportService.analysisCountry(reportParameter));
reportParameter.put("reportBrowser", reportService.analysisBrowser(reportParameter));
reportParameter.put("reportApp", reportService.analysisApp(reportParameter));
return new Message<HashMap<?,?>>(reportParameter);
return new Message<>(reportParameter);
}
}