2021-10-12 09:28:13
diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
index bb4723c..8d024e8 100644
--- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
+++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
@@ -1,7 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'
import * as echarts from 'echarts';
+
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
@Component({
selector: 'app-criminal-records-admin',
templateUrl: './criminal-records-admin.component.html',
@@ -10,11 +14,72 @@ import * as echarts from 'echarts';
export class CriminalRecordsAdminComponent implements OnInit {
validateForm!: FormGroup;
- constructor(private fb: FormBuilder, private router: Router) { }
-
-
-
- mybarChart: any //柱状图
+ constructor(private element: ElementRef, private http: HttpClient, private fb: FormBuilder, private router: Router) { }
+ //饼图
+ myChart
+ option = {
+ color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'],
+ tooltip: {
+ trigger: 'item'//触发类型
+ },
+ series: [
+ {
+ // name: 'Access From',
+ type: 'pie',
+ radius: [85, 112],//内半径外,外半径
+ left: '-30%',
+ avoidLabelOverlap: false,//防止标签重叠策略
+ label: {//每一个标签外网延伸的引导说明
+ show: false,
+ position: 'outside'
+ },
+ labelLine: {//引导线
+ show: true,
+ showAbove: true
+ },
+ emphasis: {//中间高亮区域
+ label: {
+ show: false,
+ fontSize: '40',
+ fontWeight: 'bold'
+ }
+ },
+ data: [
+ { value: 26, name: '工作人员倚靠加油机或者立柱1' },
+ { value: 86, name: '工作人员倚靠加油机或者立柱2' },
+ { value: 34, name: '工作人员倚靠加油机或者立柱3' },
+ { value: 55, name: '工作人员倚靠加油机或者立柱4' },
+ { value: 60, name: '工作人员倚靠加油机或者立柱5' },
+ { value: 26, name: '工作人员倚靠加油机或者立柱6' },
+ { value: 86, name: '工作人员倚靠加油机或者立柱7' },
+ { value: 34, name: '工作人员倚靠加油机或者立柱8' },
+ { value: 55, name: '工作人员倚靠加油机或者立柱9' },
+ { value: 60, name: '工作人员倚靠加油机或者立柱10' },
+ { value: 26, name: '工作人员倚靠加油机或者立柱11' },
+ { value: 86, name: '工作人员倚靠加油机或者立柱12' },
+ { value: 34, name: '工作人员倚靠加油机或者立柱13' },
+ { value: 55, name: '工作人员倚靠加油机或者立柱14' },
+ { value: 60, name: '工作人员倚靠加油机或者立柱15' },
+ { value: 26, name: '工作人员倚靠加油机或者立柱16' },
+ { value: 86, name: '工作人员倚靠加油机或者立柱17' },
+ { value: 34, name: '工作人员倚靠加油机或者立柱18' },
+ { value: 55, name: '工作人员倚靠加油机或者立柱19' },
+ { value: 60, name: '工作人员倚靠加油机或者立柱20' }
+ ],
+ tooltip: {//鼠标移入提示
+ position: 'right',
+ padding: [14, 19],
+ backgroundColor: 'rgba(28, 129, 218, 0.4)',
+ textStyle: {
+ color: '#fff',
+ fontSize: 12
+ }
+ }
+ }
+ ]
+ };
+ //柱状图
+ mybarChart: any
baroption = {
xAxis: {
type: 'category',
@@ -76,6 +141,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
type: 'line',
symbol: 'circle',
symbolSize: 8,
+ label: {
+ show: true
+ },
itemStyle: {
color: '#fff',
shadowColor: '#fff',
@@ -101,7 +169,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
},
yAxis: {
type: 'category',
- data: ['北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站'],
+ data: ['北京市第十九加油站1', '北京市第十九加油站2', '北京市第十九加油站3', '北京市第十九加油站4', '北京市第十九加油站5', '北京市第十九加油站6', '北京市第十九加油站7', '北京市第十九加油站8', '北京市第十九加油站9', '北京市第十九加油站10', '北京市第十九加油站11', '北京市第十九加油站12', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站20', '北京市第十九加油站21', '北京市第十九加油站22', '北京市第十九加油站23'],
axisLine: {
show: false,
lineStyle: {
@@ -132,7 +200,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
shadowColor: "#fff"
}
}
- }
+ },
+ inverse: true
},
series:
@@ -144,9 +213,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
color: "#fff",
fontSize: 12,
formatter: '{c}',
- offset:[6,0]
+ offset: [6, 0]
},
- data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8].reverse(),
+ data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8, 40, 36, 30, 25, 19, 15, 14, 11, 10, 8, 1, 2, 3].reverse(),
type: 'bar',
itemStyle: {
color: {
@@ -168,11 +237,35 @@ export class CriminalRecordsAdminComponent implements OnInit {
}
,
grid: {
- left: '138px',
- right: '60px',
+ left: '150px',
+ right: '80px',
bottom: '3px',
top: '20px'
- }
+ },
+ dataZoom: [ //Y轴滑动条
+ {
+ type: 'slider', //滑动条
+ show: true, //开启
+ yAxisIndex: 0,//表示控制第几个y轴
+ left: '97%', //滑动条位置
+ start: 1, //初始化时,滑动条宽度开始标度
+ end: 100, //初始化时,滑动条宽度结束标度
+ maxValueSpan: 10,//显示数据的条数(默认显示10个)
+ showDataShadow: false,//是否显示数据阴影 默认auto
+ showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+ realtime: true, //是否实时更新
+ filterMode: 'filter',
+ backgroundColor:'#001735',
+ width:'18'
+ },
+ {
+ type:'inside',
+ yAxisIndex:0,
+ zoomOnMouseWheel:false, //滚轮是否触发缩放
+ moveOnMouseMove:true, //鼠标滚轮触发滚动
+ moveOnMouseWheel:true
+ }
+ ]
}
ngOnInit(): void {
this.validateForm = this.fb.group({
@@ -182,75 +275,23 @@ export class CriminalRecordsAdminComponent implements OnInit {
datePicker: [null]
});
- // 基于准备好的dom,初始化echarts实例
- let myChart = echarts.init(document.getElementById('piechart'));
- let option = {
- color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'],
- tooltip: {
- trigger: 'item'//触发类型
- },
- series: [
- {
- // name: 'Access From',
- type: 'pie',
- radius: [85, 112],//内半径外,外半径
- left: '-30%',
- avoidLabelOverlap: false,//防止标签重叠策略
- label: {//每一个标签外网延伸的引导说明
- show: false,
- position: 'outside'
- },
- labelLine: {//引导线
- show: true,
- showAbove: true
- },
- emphasis: {//中间高亮区域
- label: {
- show: false,
- fontSize: '40',
- fontWeight: 'bold'
- }
- },
- data: [
- { value: 26, name: '工作人员倚靠加油机或者立柱1' },
- { value: 86, name: '工作人员倚靠加油机或者立柱2' },
- { value: 34, name: '工作人员倚靠加油机或者立柱3' },
- { value: 55, name: '工作人员倚靠加油机或者立柱4' },
- { value: 60, name: '工作人员倚靠加油机或者立柱5' },
- { value: 26, name: '工作人员倚靠加油机或者立柱6' },
- { value: 86, name: '工作人员倚靠加油机或者立柱7' },
- { value: 34, name: '工作人员倚靠加油机或者立柱8' },
- { value: 55, name: '工作人员倚靠加油机或者立柱9' },
- { value: 60, name: '工作人员倚靠加油机或者立柱10' },
- { value: 26, name: '工作人员倚靠加油机或者立柱11' },
- { value: 86, name: '工作人员倚靠加油机或者立柱12' },
- { value: 34, name: '工作人员倚靠加油机或者立柱13' },
- { value: 55, name: '工作人员倚靠加油机或者立柱14' },
- { value: 60, name: '工作人员倚靠加油机或者立柱15' },
- { value: 26, name: '工作人员倚靠加油机或者立柱16' },
- { value: 86, name: '工作人员倚靠加油机或者立柱17' },
- { value: 34, name: '工作人员倚靠加油机或者立柱18' },
- { value: 55, name: '工作人员倚靠加油机或者立柱19' },
- { value: 60, name: '工作人员倚靠加油机或者立柱20' }
- ],
- tooltip: {//鼠标移入提示
- position: 'right',
- padding: [14, 19],
- backgroundColor: 'rgba(28, 129, 218, 0.4)',
- textStyle: {
- color: '#fff',
- fontSize: 12
- }
- }
- }
- ]
- };
- // 绘制图表
- myChart.setOption(option);
-
+ //饼图
+ this.myChart = echarts.init(document.getElementById('piechart'));
+ this.myChart.setOption(this.option);
+ //柱状折线图
this.mybarChart = echarts.init(document.getElementById('barchart'));
-
this.mybarChart.setOption(this.baroption);
+
+ this.warningType()
+ }
+
+
+ ngAfterViewInit(): void {
+ fromEvent(this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe((event: any) => { //监听 DOM 滚动事件
+ if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
+ console.log('需要加载数据了', event)
+ }
+ });
}
getThirtyDays() {
//获取当前日期
@@ -301,7 +342,15 @@ export class CriminalRecordsAdminComponent implements OnInit {
}
}
-
+ //预警类型接口
+ warningTypes: any //预警接口数据
+ warningTypesDetails: any
+ warningType() {
+ this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => {
+ this.warningTypesDetails = data.result
+ this.warningTypes = (data.result as any).groupBy((t) => { return t.violationType });
+ })
+ }
list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
look() {
this.router.navigate(['/records/petrolStation'])
@@ -314,12 +363,12 @@ export class CriminalRecordsAdminComponent implements OnInit {
this.selectedType = type
this.mybarChart.dispose()
this.mybarChart = echarts.init(document.getElementById('barchart'));
- if(type == '排名'){
+ if (type == '排名') {
this.mybarChart.setOption(this.baroption2);
- }else{
+ } else {
this.mybarChart.setOption(this.baroption);
}
-
+
}
echartClick2(type) {
this.selectedRankingType = type
diff --git a/src/app/pages/criminal-records/criminal-records.component.html b/src/app/pages/criminal-records/criminal-records.component.html
index 815a2fb..a457144 100644
--- a/src/app/pages/criminal-records/criminal-records.component.html
+++ b/src/app/pages/criminal-records/criminal-records.component.html
@@ -3,30 +3,32 @@