From 4baf71a2561c6fad27872daeb3c8347980401c9f Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 24 Nov 2021 15:59:57 +0800 Subject: [PATCH 1/9] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=EF=BC=9B=E5=AE=8C=E5=96=84=E9=A2=84?= =?UTF-8?q?=E8=AD=A6=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.ts | 35 +- .../criminal-records-admin.component.html | 2 +- .../criminal-records-admin.component.ts | 151 ++- .../criminal-records.component.html | 2 +- .../criminal-records.component.ts | 150 ++- src/app/pages/home/home.component.ts | 13 +- src/app/pages/login/login.component.html | 8 +- src/app/pages/login/login.component.scss | 21 +- src/app/pages/login/login.component.ts | 1 + .../plan-admin/plan-admin.component.html | 2 +- .../pages/plan-admin/plan-admin.component.ts | 46 +- .../navigation/navigation.component.html | 1 + .../navigation/navigation.component.ts | 3 + src/app/ui/tabbar/tabbar.component.html | 8 +- src/app/ui/tabbar/tabbar.component.ts | 13 +- src/assets/images/logo2.png | Bin 0 -> 10772 bytes src/assets/js/abp.js | 896 ++++++++++++++++++ src/index.html | 4 +- 18 files changed, 1256 insertions(+), 100 deletions(-) create mode 100644 src/assets/images/logo2.png create mode 100644 src/assets/js/abp.js diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6104104..d2f69af 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,7 +7,7 @@ import { CookieService } from 'ngx-cookie-service'; import "reflect-metadata"; import { NzNotificationService } from 'ng-zorro-antd/notification'; - +declare var abp:any @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -17,7 +17,7 @@ export class AppComponent { @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>; - constructor(private http: HttpClient, private router: Router, public token: CacheTokenService, private cookieService: CookieService,private notificationService: NzNotificationService) { } + constructor(private http: HttpClient, private router: Router, public token: CacheTokenService, private cookieService: CookieService, private notificationService: NzNotificationService) { } ngOnInit(): void { // var token = this.cookieService.get("token") @@ -30,11 +30,38 @@ export class AppComponent { // this.token.startUp() // }) // } - + console.log('abp',abp) } receiptOfNotification() { - this.notificationService.template(this.template!, { nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification',nzDuration: 0 }); + this.notificationService.template(this.template!, { nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification', nzDuration: 0 }); } + + messages + abp() { + let _this = this; + + //手动实现hub + //this.hubConnection = new signalR.HubConnectionBuilder() + // .withUrl('/signalr-violation', + // { + // accessTokenFactory: ()=>this.token + // } + // ) + // .build(); + ////服务器回调方法 + //this.hubConnection.on('SendViolation', (data) => { + // console.log("SendViolation", data); + // _this.messages.push("SendViolation:"+JSON.stringify(data)); + //}); + //this.hubConnection.start(); + + //abp封装的hub + abp.event.on('abp.notifications.received', function (userNotification) { + _this.messages.push("abp.notifications.received:" + JSON.stringify(userNotification)); + console.log('abp.notifications.received', userNotification); + }); + } + } diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html index 4783137..bc2075d 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html @@ -68,7 +68,7 @@
预警事件总数
-
206
+
{{num}}
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 63587fa..901ff44 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 @@ -49,26 +49,7 @@ export class CriminalRecordsAdminComponent implements OnInit { } }, 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', @@ -87,7 +68,7 @@ export class CriminalRecordsAdminComponent implements OnInit { baroption = { xAxis: { type: 'category', - data: this.getThirtyDays(), + data: [], axisLine: { show: false, lineStyle: { @@ -96,7 +77,8 @@ export class CriminalRecordsAdminComponent implements OnInit { }, axisTick: {//刻度线 show: false - } + }, + inverse: true }, yAxis: { type: 'value', @@ -121,7 +103,7 @@ export class CriminalRecordsAdminComponent implements OnInit { }, series: [ { - data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], + data: [], type: 'bar', itemStyle: { color: { @@ -141,7 +123,7 @@ export class CriminalRecordsAdminComponent implements OnInit { barWidth: '25%' }, { - data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], + data: [], type: 'line', symbol: 'circle', symbolSize: 8, @@ -173,7 +155,7 @@ export class CriminalRecordsAdminComponent implements OnInit { }, yAxis: { type: 'category', - data: ['北京市第十九加油站1', '北京市第十九加油站2', '北京市第十九加油站3', '北京市第十九加油站4', '北京市第十九加油站5', '北京市第十九加油站6', '北京市第十九加油站7', '北京市第十九加油站8', '北京市第十九加油站9', '北京市第十九加油站10', '北京市第十九加油站11', '北京市第十九加油站12', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站20', '北京市第十九加油站21', '北京市第十九加油站22', '北京市第十九加油站23'], + data: [], axisLine: { show: false, lineStyle: { @@ -185,8 +167,27 @@ export class CriminalRecordsAdminComponent implements OnInit { }, axisLabel: { formatter: function (value, index) { + let newParamsName = ''; + const paramsNameNumber = value.length; + const provideNumber = 10; + const rowNumber = Math.ceil(paramsNameNumber / provideNumber); + if (paramsNameNumber > provideNumber) { + for (let p = 0; p < rowNumber; p++) { + let tempStr = ''; + const start = p * provideNumber; + const end = start + provideNumber; + if (p == rowNumber - 1) { + tempStr = value.substring(start, paramsNameNumber); + } else { + tempStr = value.substring(start, end) + '\n'; + } + newParamsName += tempStr; + } + } else { + newParamsName = value; + } // 格式化成月/日，只在第一个刻度显示年份 - return '{s|·}' + `{a|${value}}`; + return '{s|·}' + `{a|${newParamsName}}`; }, rich: { a: { @@ -219,7 +220,7 @@ export class CriminalRecordsAdminComponent implements OnInit { formatter: '{c}', offset: [6, 0] }, - 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(), + data: [], type: 'bar', itemStyle: { color: { @@ -278,7 +279,6 @@ export class CriminalRecordsAdminComponent implements OnInit { startdate enddate ngOnInit(): void { - //当前日期 let myDate: any = new Date(); let nowY = myDate.getFullYear(); @@ -309,7 +309,85 @@ export class CriminalRecordsAdminComponent implements OnInit { this.warningType() this.getViolateRecordList() } + //刷新饼图图表数据 + num + echartsData: any + refreshPieData(data) { + //饼图 + let option = this.myChart.getOption(); + var num = 0 + data.pieTop.forEach(element => { + num += element.count + element.name = element.key + element.value = element.count + }); + this.num = num + option.series[0].data = data.pieTop; + this.myChart.setOption(option); + } + //刷新柱状折线图表数据 + refreshBarLineData(data, type) { + console.log('统计图表数据', data) + //柱状图 + let option = this.mybarChart.getOption(); + console.log('柱图option', option) + if (type == 'month') {//近一个月柱状折线图 + option = this.baroption + let monthArr = [] + let valuedata = [] + data.timeTop.forEach(element => { + monthArr.push(moment(element.key).format('MM.DD')) + valuedata.push(element.count) + }); + option.xAxis.data = monthArr + option.series[0].data = valuedata + option.series[1].data = valuedata + } else if (type == 'eventTop') { + option = this.baroption2 + let ydata = [] + let valuedata = [] + data.eventTop.forEach(element => { + ydata.push(element.key) + valuedata.push(element.count) + }); + option.yAxis.data = ydata + option.series.data = valuedata + } else if (type == 'siteTop') { + option = this.baroption2 + let ydata = [] + let valuedata = [] + data.siteTop.forEach(element => { + ydata.push(element.key) + valuedata.push(element.count) + }); + option.yAxis.data = ydata + option.series.data = valuedata + } + this.mybarChart.setOption(option); + } + //获取统计信息 + getAggregations() { + let ViolationIds = [] + if (this.validateForm.value.type) { + this.warningTypesDetails.forEach(item => { + item.id ? ViolationIds.push(item.id) : null + }); + } + let body: any = { + organizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id, + isContainsChildren: true, + ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD')] : null + } + this.validateForm.value.level ? body.level = this.validateForm.value.level : null + this.validateForm.value.site ? body.violateArea = this.validateForm.value.site : null + ViolationIds.length != 0 ? body.violationType = ViolationIds : null + this.http.post('/api/services/app/ViolateRecord/Aggregations', body).subscribe((data: any) => { + this.echartsData = data.result + this.refreshPieData(data.result) + this.refreshBarLineData(this.echartsData, 'month') + }) + } //获得违规记录列表 SkipCount: string = '0' MaxResultCount: string = '50' @@ -340,6 +418,7 @@ export class CriminalRecordsAdminComponent implements OnInit { // this.list = data.result.items this.totalCount = data.result.totalCount console.log('违规记录列表', data) + this.getAggregations() }) } @@ -466,13 +545,25 @@ export class CriminalRecordsAdminComponent implements OnInit { this.mybarChart.dispose() this.mybarChart = echarts.init(document.getElementById('barchart')); if (type == '排名') { - this.mybarChart.setOption(this.baroption2); + console.log(this.selectedRankingType) + if (this.selectedRankingType == '站点排名') { + this.refreshBarLineData(this.echartsData, 'siteTop') + } + if (this.selectedRankingType == '事件排名') { + this.refreshBarLineData(this.echartsData, 'eventTop') + } } else { - this.mybarChart.setOption(this.baroption); + this.refreshBarLineData(this.echartsData, 'month') } } echartClick2(type) { this.selectedRankingType = type + if (this.selectedRankingType == '站点排名') { + this.refreshBarLineData(this.echartsData, 'siteTop') + } + if (this.selectedRankingType == '事件排名') { + this.refreshBarLineData(this.echartsData, 'eventTop') + } } } diff --git a/src/app/pages/criminal-records/criminal-records.component.html b/src/app/pages/criminal-records/criminal-records.component.html index 299ac75..bf7d449 100644 --- a/src/app/pages/criminal-records/criminal-records.component.html +++ b/src/app/pages/criminal-records/criminal-records.component.html @@ -68,7 +68,7 @@
预警事件总数
-
206
+
{{num}}
diff --git a/src/app/pages/criminal-records/criminal-records.component.ts b/src/app/pages/criminal-records/criminal-records.component.ts index 5972b59..9cb605c 100644 --- a/src/app/pages/criminal-records/criminal-records.component.ts +++ b/src/app/pages/criminal-records/criminal-records.component.ts @@ -45,26 +45,6 @@ export class CriminalRecordsComponent implements OnInit { } }, 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', @@ -84,7 +64,7 @@ export class CriminalRecordsComponent implements OnInit { baroption = { xAxis: { type: 'category', - data: this.getThirtyDays(), + data: [], axisLine: { show: false, lineStyle: { @@ -93,7 +73,9 @@ export class CriminalRecordsComponent implements OnInit { }, axisTick: {//刻度线 show: false - } + }, + inverse: true + }, yAxis: { type: 'value', @@ -118,7 +100,7 @@ export class CriminalRecordsComponent implements OnInit { }, series: [ { - data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], + data: [], type: 'bar', itemStyle: { color: { @@ -138,7 +120,7 @@ export class CriminalRecordsComponent implements OnInit { barWidth: '25%' }, { - data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], + data: [], type: 'line', symbol: 'circle', symbolSize: 8, @@ -170,7 +152,7 @@ export class CriminalRecordsComponent implements OnInit { }, yAxis: { type: 'category', - data: ['预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名'], + data: [], axisLine: { show: false, lineStyle: { @@ -182,8 +164,27 @@ export class CriminalRecordsComponent implements OnInit { }, axisLabel: { formatter: function (value, index) { + let newParamsName = ''; + const paramsNameNumber = value.length; + const provideNumber = 10; + const rowNumber = Math.ceil(paramsNameNumber / provideNumber); + if (paramsNameNumber > provideNumber) { + for (let p = 0; p < rowNumber; p++) { + let tempStr = ''; + const start = p * provideNumber; + const end = start + provideNumber; + if (p == rowNumber - 1) { + tempStr = value.substring(start, paramsNameNumber); + } else { + tempStr = value.substring(start, end) + '\n'; + } + newParamsName += tempStr; + } + } else { + newParamsName = value; + } // 格式化成月/日，只在第一个刻度显示年份 - return '{s|·}' + `{a|${value}}`; + return '{s|·}' + `{a|${newParamsName}}`; }, rich: { a: { @@ -201,8 +202,8 @@ export class CriminalRecordsComponent implements OnInit { shadowColor: "#fff" } } - } - + }, + inverse: true }, series: { @@ -215,7 +216,7 @@ export class CriminalRecordsComponent implements OnInit { formatter: '{c}', offset: [6, 0] }, - data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8].reverse(), + data: [], type: 'bar', itemStyle: { color: { @@ -237,8 +238,8 @@ export class CriminalRecordsComponent implements OnInit { } , grid: { - left: '100px', - right: '60px', + left: '150px', + right: '80px', bottom: '3px', top: '20px' } @@ -312,6 +313,87 @@ export class CriminalRecordsComponent implements OnInit { this.warningType() this.getViolateRecordList() + + + + } + //刷新饼图图表数据 + num + echartsData: any + refreshPieData(data) { + //饼图 + let option = this.myChart.getOption(); + var num = 0 + data.pieTop.forEach(element => { + num += element.count + element.name = element.key + element.value = element.count + }); + this.num = num + option.series[0].data = data.pieTop; + this.myChart.setOption(option); + } + //刷新柱状折线图表数据 + refreshBarLineData(data, type) { + console.log('统计图表数据', data) + //柱状图 + let option = this.mybarChart.getOption(); + console.log('柱图option', option) + if (type == 'month') {//近一个月柱状折线图 + option = this.baroption + let monthArr = [] + let valuedata = [] + data.timeTop.forEach(element => { + monthArr.push(moment(element.key).format('MM.DD')) + valuedata.push(element.count) + }); + option.xAxis.data = monthArr + option.series[0].data = valuedata + option.series[1].data = valuedata + } else if (type == 'eventTop') { + option = this.baroption2 + let ydata = [] + let valuedata = [] + data.eventTop.forEach(element => { + ydata.push(element.key) + valuedata.push(element.count) + }); + option.yAxis.data = ydata + option.series.data = valuedata + } else if (type == 'siteTop') { + option = this.baroption2 + let ydata = [] + let valuedata = [] + data.siteTop.forEach(element => { + ydata.push(element.key) + valuedata.push(element.count) + }); + option.yAxis.data = ydata + option.series.data = valuedata + } + this.mybarChart.setOption(option); + } + //获取统计信息 + getAggregations() { + let ViolationIds = [] + if (this.validateForm.value.type) { + this.warningTypesDetails.forEach(item => { + item.id ? ViolationIds.push(item.id) : null + }); + } + let body: any = { + organizationUnitId: JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id, + isContainsChildren: true, + ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD')] : null + } + this.validateForm.value.level ? body.level = this.validateForm.value.level : null + this.validateForm.value.site ? body.violateArea = this.validateForm.value.site : null + ViolationIds.length != 0 ? body.violationType = ViolationIds : null + this.http.post('/api/services/app/ViolateRecord/Aggregations', body).subscribe((data: any) => { + this.echartsData = data.result + this.refreshPieData(data.result) + this.refreshBarLineData(this.echartsData, 'month') + }) } //获得违规记录列表 @@ -344,6 +426,7 @@ export class CriminalRecordsComponent implements OnInit { // this.list = data.result.items this.totalCount = data.result.totalCount console.log('违规记录列表', data) + this.getAggregations() }) } ngAfterViewInit(): void { @@ -405,9 +488,10 @@ export class CriminalRecordsComponent implements OnInit { this.mybarChart.dispose() this.mybarChart = echarts.init(document.getElementById('barchart')); if (type == '排名') { - this.mybarChart.setOption(this.baroption2); + console.log(this.selectedRankingType) + this.refreshBarLineData(this.echartsData, 'eventTop') } else { - this.mybarChart.setOption(this.baroption); + this.refreshBarLineData(this.echartsData, 'month') } } diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 625431d..86b1181 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -19,15 +19,22 @@ export class HomeComponent implements OnInit { this.navChangeService.getMessage().subscribe((message: any) => { console.log(message);//send a message - if(message.name == 'oilstation'){ + if (message.name == 'oilstation') { this.isGasStationNav = true } - if(message.name == '改变数量'){ + if (message.name == '改变数量') { this.isWarning = true this.num = message.num } }); + if (this.router.url.indexOf('warning') != -1) { + this.isWarning = true + } else { + this.isWarning = false + } + + if (this.router.url.indexOf('petrolStation') != -1 && sessionStorage.getItem('isGasStation') == 'false') {//控制返回按钮显示 this.isGasStation = true } else { @@ -44,7 +51,7 @@ export class HomeComponent implements OnInit { filter(event => event instanceof NavigationEnd) ).subscribe((event: any) => { if (event.url.indexOf('warning') != -1) {//控制今日预警左上角数字显示 - this.isWarning = true + } else { this.isWarning = false } diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html index db3fe0a..aa7b867 100644 --- a/src/app/pages/login/login.component.html +++ b/src/app/pages/login/login.component.html @@ -1,6 +1,8 @@