From 454f5b53596373d725133310fb29bb26485c2915 Mon Sep 17 00:00:00 2001 From: hanlibin Date: Tue, 14 Nov 2023 16:12:25 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BA=BF=E7=A8=8B=E7=8A=B6=E6=80=81=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E7=BB=9F=E8=AE=A1=E5=92=8C=E8=B7=91=E9=81=93=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=A4=87=E6=B3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hanlibin --- ide/src/trace/bean/BoxSelection.ts | 8 + ide/src/trace/bean/MarkStruct.ts | 3 + ide/src/trace/component/StackBar.ts | 4 +- .../component/trace/sheet/TabPaneCurrent.ts | 139 +++++++++++++++-- .../trace/sheet/hilog/TabPaneHiLogs.ts | 2 +- .../sheet/hisysevent/TabPaneHisysEvents.ts | 2 +- .../sheet/process/TabPaneThreadStates.ts | 145 +++++++++++++----- .../trace/sheet/process/TabPaneThreadUsage.ts | 89 ++++++++++- .../trace/component/trace/timer-shaft/Flag.ts | 2 + .../component/trace/timer-shaft/SportRuler.ts | 50 +++++- .../trace/timer-shaft/TabPaneFlag.ts | 81 +++++++++- ide/src/trace/database/SqlLite.ts | 78 +++++++++- 12 files changed, 532 insertions(+), 71 deletions(-) diff --git a/ide/src/trace/bean/BoxSelection.ts b/ide/src/trace/bean/BoxSelection.ts index 3f32e165c..791527d5a 100644 --- a/ide/src/trace/bean/BoxSelection.ts +++ b/ide/src/trace/bean/BoxSelection.ts @@ -42,6 +42,7 @@ export class SelectionParam { startup: boolean = false; staticInit: boolean = false; isRowClick: boolean = false; + eventTypeId: string = ''; cpus: Array = []; cpuStateRowsId: Array = []; @@ -146,6 +147,13 @@ export class SelectionData { max: string = ''; stateJX: string = ''; cpu: number = 0; + + recordStartNs: number = 0; + leftNs: number = 0; + rightNs: number = 0; + threadIds: Array = []; + ts: number = 0; + dur: number = 0; } export class Counter { diff --git a/ide/src/trace/bean/MarkStruct.ts b/ide/src/trace/bean/MarkStruct.ts index f07e3e17c..08e089ca9 100644 --- a/ide/src/trace/bean/MarkStruct.ts +++ b/ide/src/trace/bean/MarkStruct.ts @@ -18,11 +18,13 @@ export class MarkStruct { startTime: number | undefined; endTime: number | undefined; colorEl: HTMLInputElement | undefined; + text: HTMLInputElement | undefined; operate: HTMLButtonElement | undefined; isSelected: boolean = false; constructor( operate: HTMLButtonElement, colorEl?: HTMLInputElement | undefined, + text?: HTMLInputElement | undefined, startTimeStr?: string, startTime?: number, endTimeStr?: string, @@ -30,6 +32,7 @@ export class MarkStruct { ) { this.operate = operate; this.colorEl = colorEl; + this.text = text; this.startTimeStr = startTimeStr; this.startTime = startTime; this.endTimeStr = endTimeStr; diff --git a/ide/src/trace/component/StackBar.ts b/ide/src/trace/component/StackBar.ts index 1972638e1..02a74e564 100644 --- a/ide/src/trace/component/StackBar.ts +++ b/ide/src/trace/component/StackBar.ts @@ -31,11 +31,11 @@ export class StackBar extends BaseElement { if (map.has(v.state)) { let sv = map.get(v.state); sv!.value = sv!.value + v.wallDuration; - sv!.state = v.state + ' : ' + sv!.value.toFixed(7) + 'ms'; + sv!.state = v.state + ' : ' + sv!.value.toFixed(5) + 'ms'; } else { let sv = new StackValue(); sv.value = v.wallDuration; - sv.state = v.state + ' : ' + sv.value.toFixed(7) + 'ms'; + sv.state = v.state + ' : ' + sv.value.toFixed(5) + 'ms'; sv.color = Utils.getStateColor(v.stateJX); map.set(v.state, sv); } diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts index 24037dfcf..d42578d4e 100644 --- a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts +++ b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts @@ -30,8 +30,42 @@ export class TabPaneCurrent extends BaseElement { initElements(): void { this.systemTrace = document - .querySelector('body > sp-application') - ?.shadowRoot!.querySelector('#sp-system-trace'); + .querySelector('body > sp-application')?. + shadowRoot!.querySelector('#sp-system-trace'); + this.shadowRoot + ?.querySelector('#text') + ?.addEventListener('keyup', (event: any) => { + event.stopPropagation(); + if (event.keyCode == '13') { + if (this.slicesTime) { + window.publish(window.SmartEvent.UI.KeyboardEnable, { + enable: true, + }); + this.slicesTime.text = event?.target.value; + document.dispatchEvent( + new CustomEvent('slices-change', { + detail: this.slicesTime, + }) + ); + } + } + }); + this.shadowRoot + ?.querySelector('#text') + ?.addEventListener('blur', (event: any) => { + (window as any).flagInputFocus = false; + window.publish(window.SmartEvent.UI.KeyboardEnable, { + enable: true, + }); + }); + this.shadowRoot + ?.querySelector('#text') + ?.addEventListener('focus', (event: any) => { + (window as any).flagInputFocus = true; + window.publish(window.SmartEvent.UI.KeyboardEnable, { + enable: false, + }); + }); this.panelTable = this.shadowRoot!.querySelector('.notes-editor-panel'); this.panelTable!.addEventListener('row-click', (evt: any) => { // 点击表格某一行后，背景变色 @@ -59,6 +93,17 @@ export class TabPaneCurrent extends BaseElement { this.slicesTimeList = []; } }); + + + // 当鼠标移出panel时重新加载备注信息 + this.systemTrace?.shadowRoot?.querySelector('trace-sheet')?.addEventListener('mouseout', (event: any) => { + let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; + // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.slicesTimeList数组的第一个对应……，所以i从1开始，在this.slicesTimeList数组中取值时用i-1 + for (let i = 1; i < tr.length; i++) { + tr[i].querySelector('#text-input')!.value = this.slicesTimeList[i - 1].text; + } + event.stopPropagation(); + }, { capture: true }); } public setCurrentSlicesTime(slicesTime: SlicesTime): void { @@ -99,15 +144,19 @@ export class TabPaneCurrent extends BaseElement { btn.className = 'remove'; let color = document.createElement('input'); color.type = 'color'; + let text = document.createElement('input'); + text.type = 'text'; let sliceData = new MarkStruct( btn, color, + text, ns2s(slice.startTime), slice.startTime, ns2s(slice.endTime), slice.endTime ); color!.value = slice.color; + text!.value = slice.text; slice.selected === true ? (sliceData.isSelected = true) : (sliceData.isSelected = false); this.tableDataSource.push(sliceData); } @@ -132,13 +181,30 @@ export class TabPaneCurrent extends BaseElement { /** * 修改卡尺颜色事件和移除卡尺的事件处理 */ - private eventHandler(): void { + private eventHandler(): void { + // 更新备注信息 + this.panelTable!.addEventListener('click', (event: any) => { + let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; + for (let i = 1; i < tr.length; i++) { + let inputValue = tr[i].querySelector('#text-input')!.value; + if (this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime && + this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime) { + this.slicesTimeList[i - 1].text = inputValue; + document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); + // 旗子颜色改变时，重绘泳道图 + this.systemTrace?.refreshCanvas(true); + } + } + // event.stopPropagation(); + }); + let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.slicesTimeList数组的第一个对应……，所以i从1开始，在this.slicesTimeList数组中取值时用i-1 for (let i = 1; i < tr.length; i++) { - tr[i].querySelector('input')!.value = this.slicesTimeList[i - 1].color; + // 修改颜色 + tr[i].querySelector('#color-input')!.value = this.slicesTimeList[i - 1].color; // 点击色块修改颜色 - tr[i].querySelector('input')?.addEventListener('change', (event: any) => { + tr[i].querySelector('#color-input')?.addEventListener('change', (event: any) => { if ( this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime && this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime @@ -151,6 +217,55 @@ export class TabPaneCurrent extends BaseElement { } event.stopPropagation(); }); + + // 修改备注 + tr[i].querySelector('#text-input')!.value = this.slicesTimeList[i - 1].text; + // // 点击色块修改颜色 + tr[i].querySelector('#text-input')?.addEventListener('keyup', (event: any) => { + if ( + this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime + && this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime + && event.keyCode == '13' + ) { + this.systemTrace!.slicesList = this.slicesTimeList || []; + this.slicesTimeList[i - 1].text = event?.target.value; + window.publish(window.SmartEvent.UI.KeyboardEnable, { + enable: true, + }); + document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); + + this.systemTrace?.refreshCanvas(true); + } + event.stopPropagation(); + }); + + tr[i].querySelector('#text-input')?.addEventListener('blur', (event: any) => { + (window as any).flagInputFocus = false; + window.publish(window.SmartEvent.UI.KeyboardEnable, { + enable: true, + }); + if ( this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime + && this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime) { + this.slicesTimeList[i - 1].text = event?.target.value; + document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); + + this.systemTrace?.refreshCanvas(true); + } + event.stopPropagation(); + }); + + tr[i].querySelector('#text-input')?.addEventListener('focus', (event: any) => { + (window as any).flagInputFocus = true; + window.publish(window.SmartEvent.UI.KeyboardEnable, { + enable: false, + }); + let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; + // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.flagList数组的第一个对应……，所以i从1开始，在this.flagList数组中取值时用i-1 + for (let i = 1; i < tr.length; i++) { + tr[i].querySelector('#text-input')!.value = this.slicesTimeList[i - 1].text; + } + }); + // 点击remove按钮移除 tr[i]!.querySelector('.remove')?.addEventListener('click', (event: any) => { if ( @@ -160,6 +275,7 @@ export class TabPaneCurrent extends BaseElement { this.slicesTimeList[i - 1].hidden = true; this.systemTrace!.slicesList = this.slicesTimeList || []; document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); + this.slicesTimeList.splice(this.slicesTimeList.indexOf(this.slicesTimeList[i - 1]), 1); // 移除时更新表格内容 this.setTableData(); } @@ -188,11 +304,11 @@ export class TabPaneCurrent extends BaseElement { } - + - + - +