增加30日世界地图访问
This commit is contained in:
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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
@@ -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)"
|
||||
},
|
||||
|
||||
@@ -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": "基本信息",
|
||||
|
||||
@@ -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)"
|
||||
},
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user