• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BaseElement, element } from '../../../../../base-ui/BaseElement';
17import { LitTable } from '../../../../../base-ui/table/lit-table';
18import { SelectionParam } from '../../../../bean/BoxSelection';
19import { SpHiSysEnergyChart } from '../../../chart/SpHiSysEnergyChart';
20import '../../../../../base-ui/table/lit-table';
21import { resizeObserver } from '../SheetUtils';
22import { getTabPowerBatteryData } from '../../../../database/sql/ProcessThread.sql';
23
24@element('tabpane-power-battery')
25export class TabPanePowerBattery extends BaseElement {
26  private tblPower: LitTable | null | undefined;
27
28  set data(valPower: SelectionParam | unknown) {
29    this.queryDataByDB(valPower);
30  }
31
32  connectedCallback(): void {
33    super.connectedCallback();
34    resizeObserver(this.parentElement!, this.tblPower!);
35  }
36
37  initElements(): void {
38    this.tblPower = this.shadowRoot?.querySelector<LitTable>('#tb-power-battery-energy');
39  }
40
41  queryDataByDB(val: SelectionParam | unknown): void {
42    // @ts-ignore
43    getTabPowerBatteryData(val.rightNs).then((result): void => {
44      let powerData: unknown = {
45        POWER_IDE_BATTERY: {
46          gas_gauge: [],
47          charge: [],
48          screen: [],
49          level: [],
50          current: [],
51          capacity: [],
52          appName: '',
53          uid: [],
54        },
55      };
56      result.forEach((item): void => {
57        // @ts-ignore
58        let powerDatum: unknown = powerData[item.eventName];
59        if (item.appKey.toLocaleLowerCase() === 'appname') {
60          // @ts-ignore
61          powerDatum.appName = SpHiSysEnergyChart.app_name;
62        } else {
63          let eventData: Array<string> = item.eventValue.split(',');
64          // @ts-ignore
65          powerDatum[item.appKey.toLocaleLowerCase()] = eventData[eventData.length - 1] || '';
66        }
67      });
68      this.tblPower!.recycleDataSource = [
69        // @ts-ignore
70        { name: 'Gas Gauge', value: `${powerData.POWER_IDE_BATTERY.gas_gauge} mAh` },
71        // @ts-ignore
72        { name: 'Charge', value: powerData.POWER_IDE_BATTERY.charge },
73        // @ts-ignore
74        { name: 'Screen', value: powerData.POWER_IDE_BATTERY.screen },
75        // @ts-ignore
76        { name: 'Level', value: `${powerData.POWER_IDE_BATTERY.level} %` },
77        // @ts-ignore
78        { name: 'Current', value: `${powerData.POWER_IDE_BATTERY.current} mA` },
79        // @ts-ignore
80        { name: 'Capacity', value: `${powerData.POWER_IDE_BATTERY.capacity} mAh` },
81        { name: 'APP Name', value: SpHiSysEnergyChart.app_name! },
82      ];
83      this.tblPower?.shadowRoot?.querySelectorAll<HTMLDivElement>('.tr').forEach((tr): void => {
84        const td = tr.querySelectorAll<HTMLDivElement>('.td');
85        this.setTableStyle(td[0], '0.9', '16px');
86        this.setTableStyle(td[1], '0.6', '20px');
87      });
88    });
89  }
90
91  setTableStyle(td: HTMLDivElement, opacity: string, lineHeight: string): void {
92    td.style.fontWeight = '400';
93    td.style.fontSize = '14px';
94    td.style.opacity = opacity;
95    td.style.lineHeight = lineHeight;
96  }
97
98  initHtml(): string {
99    return `
100        <style>
101            .power-battery-bottom-scroll-area{
102                display: flex;
103                height: auto;
104                overflow-y: auto;
105                margin-top: 1.2em;
106            }
107            .power-battery-battery-canvas{
108                width: 50%;
109                padding: 0 10px;
110            }
111
112        </style>
113        <div style="width: 100%;height: auto;position: relative">
114            <div class="power-battery-bottom-scroll-area">
115                <div class="power-battery-battery-canvas">
116                    <lit-table id="tb-power-battery-energy" no-head style="height: auto">
117                        <lit-table-column title="name" data-index="name" key="name" align="flex-start"  width="180px"></lit-table-column>
118                        <lit-table-column title="value" data-index="value" key="value" align="flex-start" ></lit-table-column>
119                    </lit-table>
120                </div>
121            </div>
122        </div>
123        `;
124  }
125}
126