eam-web-ui/web-admin-app/src/app/components/asset-operational-statistics/asset-operational-statistics.component.ts

import { Component, ElementRef, Input, ViewChild } from '@angular/core'
import { ApiService } from 'app/services'
import { SharedModule } from 'app/shared/shared.module'
import { NzSafeAny } from 'ng-zorro-antd/core/types'
import { finalize } from 'rxjs'
import { init, EChartsType } from 'echarts'

@Component({
	selector: 'app-asset-operational-statistics',
	standalone: true,
	imports: [SharedModule],
	templateUrl: './asset-operational-statistics.component.html',
	styleUrl: './asset-operational-statistics.component.less',
})
export class AssetOperationalStatisticsComponent {
	constructor(private api: ApiService) {}

	@ViewChild('openTimeChart') openTimeChart?: ElementRef<HTMLDivElement>

	@ViewChild('runningStatusChart') runningStatusChart?: ElementRef<HTMLDivElement>

	@Input() assetId!: number

	data: NzSafeAny

	type = 1

	loading = false
	ngOnInit() {
		this.onChange()
	}

	onChange() {
		this.loading = true
		this.api
			.operationalStatistics({ id: this.assetId, type: this.type })
			.pipe(
				finalize(() => {
					this.loading = false
				}),
			)
			.subscribe((res) => {
				// console.log('res', res)
				this.data = res.body
				if (this.data) {
					setTimeout(() => {
						this.renderBar()
						this.renderPie()
					})
				}
			})
	}

	barRef?: EChartsType
	renderBar() {
		if (this.openTimeChart?.nativeElement) {
			if (!this.barRef) {
				this.barRef = init(this.openTimeChart?.nativeElement)
			}
			const name: string[] = []
			const value: number[] = []
			this.data?.openLogs.forEach((i: NzSafeAny) => {
				name.push(i.name)
				value.push(i.value)
			})
			this.barRef.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					type: 'category',
					data: name,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						data: value,
						type: 'bar',
					},
				],
			})
		}
	}
	pieRef?: EChartsType
	renderPie() {
		if (this.runningStatusChart?.nativeElement) {
			if (!this.pieRef) {
				this.pieRef = init(this.runningStatusChart?.nativeElement)
			}
			let data: NzSafeAny[] = []
			const odata: NzSafeAny[] = this.data?.runLogs ?? []
			const total = odata.reduce((a: number, b: any) => a + Math.abs(b.value), 0)

			data = odata.map((i: NzSafeAny) => {
				const value = Math.abs(i.value)
				const percent = ((value / total) * 100).toFixed(2)

				return {
					...i,
					percent,
					value,
				}
			})
			console.log('data', data)
			this.pieRef.setOption({
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'scroll',

					formatter: function (name: string, d: any) {
						const item = data.find((i: NzSafeAny) => i.name === name)
						return name + ' | ' + item?.percent + '%' + '   ' + item?.value + '小时'
					},
				},
				series: [
					{
						name: '运行状态',
						type: 'pie',
						radius: ['40%', '70%'],
						// center: ['40%', '50%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2,
						},
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 30,
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: data,
					},
				],
			})
		}
	}
}