From 97c7f656fc0e0771aa2c88a9e3af664004ad0e59 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Sat, 13 Nov 2021 17:14:46 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=96=B0=E5=A2=9E=E6=9F=B1?= =?UTF-8?q?=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../criminal-records-admin.component.ts | 245 +++++++++++++----- .../equipment-info.component.ts | 2 +- .../organization/addor/addor.component.html | 7 +- .../organization/addor/addor.component.ts | 3 +- .../organization/editor/editor.component.html | 5 + .../organization/editor/editor.component.ts | 3 +- .../organization/organization.component.ts | 2 + .../system-management.module.ts | 4 +- 8 files changed, 197 insertions(+), 74 deletions(-) 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 6db88d4..335a642 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 @@ -12,6 +12,168 @@ export class CriminalRecordsAdminComponent implements OnInit { validateForm!: FormGroup; constructor(private fb: FormBuilder, private router: Router) { } + + + mybarChart: any //柱状图 + baroption = { + xAxis: { + type: 'category', + data: this.getThirtyDays(), + axisLine: { + show: false, + lineStyle: { + color: '#91CCFF' + } + }, + axisTick: {//刻度线 + show: false + } + }, + yAxis: { + type: 'value', + nameTextStyle: { + color: '#C4E2FC' + }, + splitLine: {//分割线 + lineStyle: { + color: ['#0f4374'], + width: 2 + } + }, + axisTick: {//刻度线 + show: false + }, + axisLine: {//轴线 + show: false, + lineStyle: { + color: '#C4E2FC' + } + } + }, + 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], + type: 'bar', + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#23F0FF' // 0% 处的颜色 + }, { + offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色 + }], + global: false // 缺省为 false + } + }, + 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], + type: 'line', + symbol: 'circle', + symbolSize: 8, + itemStyle: { + color: '#fff', + shadowColor: '#fff', + shadowBlur: 10 + }, + lineStyle: { + color: '#FFCC8A', + width: 1 + } + } + ], + grid: { + left: '36px', + right: '30px', + bottom: '50px', + top: '45px' + } + }; + baroption2 = { + xAxis: { + type: 'value', + show: false + }, + yAxis: { + type: 'category', + data: ['北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站'], + axisLine: { + show: false, + lineStyle: { + color: '#91CCFF', + } + }, + axisTick: {//刻度线 + show: false + }, + axisLabel: { + formatter: function (value, index) { + // 格式化成月/日，只在第一个刻度显示年份 + return '{s|·}' + `{a|${value}}`; + }, + rich: { + a: { + color: '#C4E2FC', + padding: [0, 0, 0, 8], + }, + s: { + color: '#fff', + borderWidth: 1, + borderColor: '#23D9FF', + backgroundColor: '#fff', + width: 4, + height: 4, + shadowBlur: 3, + shadowColor: "#fff" + } + } + } + + }, + series: + { + label: { + // 柱图头部显示值 + show: true, + position: "right", + color: "#fff", + fontSize: 12, + formatter: '{c}', + offset:[6,0] + }, + data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8].reverse(), + type: 'bar', + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 1, + y2: 0, + colorStops: [{ + offset: 0, color: '#063d72' // 0% 处的颜色 + }, { + offset: 1, color: '#FF9963' // 100% 处的颜色 + }], + global: false // 缺省为 false + } + }, + barWidth: '36%', + + } + , + grid: { + left: '138px', + right: '60px', + bottom: '3px', + top: '20px' + } + } ngOnInit(): void { this.validateForm = this.fb.group({ level: [null], @@ -86,72 +248,9 @@ export class CriminalRecordsAdminComponent implements OnInit { // 绘制图表 myChart.setOption(option); - let mybarChart = echarts.init(document.getElementById('barchart')); - let baroption = { - xAxis: { - type: 'category', - data: this.getThirtyDays(), - axisLine: { - show: false, - lineStyle: { - color: '#91CCFF' - } - }, - axisTick: {//刻度线 - show: false - } - }, - yAxis: { - type: 'value', - nameTextStyle: { - color: '#C4E2FC' - }, - splitLine: {//分割线 - lineStyle: { - color: ['#0f4374'], - width: 2 - } - }, - axisTick: {//刻度线 - show: false - }, - axisLine: {//轴线 - show: false, - lineStyle: { - color: '#C4E2FC' - } - } - }, - 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], - type: 'bar', - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#23F0FF' // 0% 处的颜色 - }, { - offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色 - }], - global: false // 缺省为 false - } - }, - barWidth: '28%' - } - ], - grid: { - left: '36px', - right: '30px', - bottom: '50px', - top: '45px' - } - }; - mybarChart.setOption(baroption); + this.mybarChart = echarts.init(document.getElementById('barchart')); + + this.mybarChart.setOption(this.baroption); } getThirtyDays() { //获取当前日期 @@ -203,7 +302,7 @@ export class CriminalRecordsAdminComponent implements OnInit { } - list: any = [1,1,1,1,1,1,1,1,1,1,1,1] + list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] look() { this.router.navigate(['home/records/petrolStation']) } @@ -211,10 +310,18 @@ export class CriminalRecordsAdminComponent implements OnInit { selectedType = '分布' selectedRankingType = '站点排名' - echartClick(type){ + echartClick(type) { this.selectedType = type + this.mybarChart.dispose() + this.mybarChart = echarts.init(document.getElementById('barchart')); + if(type == '排名'){ + this.mybarChart.setOption(this.baroption2); + }else{ + this.mybarChart.setOption(this.baroption); + } + } - echartClick2(type){ + echartClick2(type) { this.selectedRankingType = type } } diff --git a/src/app/pages/equipment-info/equipment-info.component.ts b/src/app/pages/equipment-info/equipment-info.component.ts index 238dcd3..cc09f12 100644 --- a/src/app/pages/equipment-info/equipment-info.component.ts +++ b/src/app/pages/equipment-info/equipment-info.component.ts @@ -29,7 +29,7 @@ export class EquipmentInfoComponent implements OnInit { this.http.get('/api/services/app/FireEquipment/GetAll', { params: { Name:this.validateForm.value.search ? this.validateForm.value.search : '', - OrganizationId: JSON.parse(JSON.parse(sessionStorage.getItem('userdata'))).organization.id, + OrganizationId: JSON.parse(sessionStorage.getItem('userdata')).organization.id, SkipCount: String(this.SkipCount), MaxResultCount: String(this.MaxResultCount) } diff --git a/src/app/system-management/organization/addor/addor.component.html b/src/app/system-management/organization/addor/addor.component.html index 88a35af..b8a3678 100644 --- a/src/app/system-management/organization/addor/addor.component.html +++ b/src/app/system-management/organization/addor/addor.component.html @@ -14,5 +14,10 @@ + + + + + - + \ No newline at end of file diff --git a/src/app/system-management/organization/addor/addor.component.ts b/src/app/system-management/organization/addor/addor.component.ts index ea41c3f..c853619 100644 --- a/src/app/system-management/organization/addor/addor.component.ts +++ b/src/app/system-management/organization/addor/addor.component.ts @@ -15,7 +15,8 @@ export class AddorComponent implements OnInit { ngOnInit(): void { this.validateForm = this.fb.group({ name: [null, [Validators.required]], - code: [null, [Validators.required]] + code: [null, [Validators.required]], + isGasStation: [false] }); } destroyModal(): void { diff --git a/src/app/system-management/organization/editor/editor.component.html b/src/app/system-management/organization/editor/editor.component.html index db4e48d..ef277b3 100644 --- a/src/app/system-management/organization/editor/editor.component.html +++ b/src/app/system-management/organization/editor/editor.component.html @@ -14,5 +14,10 @@ + + + + + diff --git a/src/app/system-management/organization/editor/editor.component.ts b/src/app/system-management/organization/editor/editor.component.ts index e097924..6069106 100644 --- a/src/app/system-management/organization/editor/editor.component.ts +++ b/src/app/system-management/organization/editor/editor.component.ts @@ -17,7 +17,8 @@ export class EditorComponent implements OnInit { ngOnInit(): void { this.validateForm = this.fb.group({ name: [null, [Validators.required]], - code: [null, [Validators.required]] + code: [null, [Validators.required]], + isGasStation: [] }); this.datacopy = JSON.parse(JSON.stringify(this.data)) } diff --git a/src/app/system-management/organization/organization.component.ts b/src/app/system-management/organization/organization.component.ts index 4a35595..15b2533 100644 --- a/src/app/system-management/organization/organization.component.ts +++ b/src/app/system-management/organization/organization.component.ts @@ -100,6 +100,7 @@ export class OrganizationComponent implements OnInit { parentId: node ? Number(node.key) : null, code: instance.validateForm.value.code, displayName: instance.validateForm.value.name, + isGasStation: instance.validateForm.value.isGasStation } this.http.post('/api/services/app/Organization/Create', body).subscribe(data => { resolve(data) @@ -143,6 +144,7 @@ export class OrganizationComponent implements OnInit { parentId: node.origin.parentId, code: instance.validateForm.value.code, displayName: instance.validateForm.value.name, + isGasStation: instance.validateForm.value.isGasStation } this.http.put('/api/services/app/Organization/Update', body).subscribe(data => { resolve(data) diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts index 870c5a5..fd6c33c 100644 --- a/src/app/system-management/system-management.module.ts +++ b/src/app/system-management/system-management.module.ts @@ -26,6 +26,7 @@ import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { AddorComponent } from './organization/addor/addor.component'; import { EditorComponent } from './organization/editor/editor.component'; +import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; @NgModule({ declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent], imports: [ @@ -46,7 +47,8 @@ import { EditorComponent } from './organization/editor/editor.component'; NzMessageModule, NzTreeModule, NzSpinModule, - NzTreeSelectModule + NzTreeSelectModule, + NzCheckboxModule ], entryComponents :[AdduserComponent,EdituserComponent,AddroleComponent,EditroleComponent,AddorComponent,EditorComponent]