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.js"; 17import {LitTable} from "../../../../../base-ui/table/lit-table.js"; 18import {SelectionParam} from "../../../../bean/BoxSelection.js"; 19import {getTabPowerBatteryData} from "../../../../database/SqlLite.js"; 20import {SpHiSysEventChart} from "../../../chart/SpHiSysEventChart.js"; 21import "../../../../../base-ui/table/lit-table.js"; 22 23@element('tabpane-power-battery') 24export class TabPanePowerBattery extends BaseElement { 25 private tbl: LitTable | null | undefined; 26 27 set data(val: SelectionParam | any) { 28 this.queryDataByDB(val) 29 } 30 31 connectedCallback() { 32 super.connectedCallback(); 33 new ResizeObserver((entries) => { 34 if (this.parentElement?.clientHeight != 0) { 35 // @ts-ignore 36 this.tbl!.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight - 45) + "px" 37 this.tbl!.reMeauseHeight() 38 } 39 }).observe(this.parentElement!); 40 } 41 42 initElements(): void { 43 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-power-battery-energy'); 44 } 45 46 queryDataByDB(val: SelectionParam | any) { 47 getTabPowerBatteryData(val.rightNs).then(result => { 48 let list: Array<any> = [] 49 let powerData: any = { 50 "POWER_IDE_BATTERY": { 51 gas_gauge: [], 52 charge: [], 53 screen: [], 54 level: [], 55 current: [], 56 capacity: [], 57 appName: "", 58 uid: [], 59 } 60 } 61 result.forEach(item => { 62 let powerDatum: any = powerData[item.eventName]; 63 if (item.appKey.toLocaleLowerCase() === "appname") { 64 powerDatum['appName'] = SpHiSysEventChart.app_name 65 } else { 66 let eventData: Array<string> = item.eventValue.split(","); 67 if (eventData.length > 0) { 68 let i = eventData.length - 1 >= 0 ? eventData.length - 1 : 0 69 powerDatum[item.appKey.toLocaleLowerCase()] = eventData[i] 70 } else { 71 powerDatum[item.appKey.toLocaleLowerCase()] = eventData.toString() 72 } 73 } 74 }) 75 list.push({name: 'gasGauge', value: powerData["POWER_IDE_BATTERY"].gas_gauge}) 76 list.push({name: 'charge', value: powerData["POWER_IDE_BATTERY"].charge}) 77 list.push({name: 'screen', value: powerData["POWER_IDE_BATTERY"].screen}) 78 list.push({name: 'level', value: powerData["POWER_IDE_BATTERY"].level}) 79 list.push({name: 'current', value: powerData["POWER_IDE_BATTERY"].current}) 80 list.push({name: 'capacity', value: powerData["POWER_IDE_BATTERY"].capacity}) 81 list.push({name: 'uid', value: powerData["POWER_IDE_BATTERY"].uid}) 82 list.push({name: 'appName', value: SpHiSysEventChart.app_name!}) 83 if (list.length > 0) { 84 this.tbl!.recycleDataSource = list 85 } else { 86 this.tbl!.recycleDataSource = [] 87 } 88 this.tbl?.shadowRoot?.querySelectorAll<HTMLDivElement>(".tr").forEach(tr => { 89 let td = tr.querySelectorAll<HTMLDivElement>(".td"); 90 this.setTableStyle(td[0], "0.9", "16px") 91 this.setTableStyle(td[1], "0.6", "20px") 92 93 }) 94 }) 95 } 96 97 setTableStyle(td: HTMLDivElement, opacity: string, lineHeight: string) { 98 td.style.fontWeight = "400" 99 td.style.fontSize = "14px" 100 td.style.opacity = opacity 101 td.style.lineHeight = lineHeight 102 } 103 104 initHtml(): string { 105 return ` 106 <style> 107 .current-static{ 108 width: 100%; 109 display: flex; 110 top: 0; 111 background: var(--dark-background,#ffffff); 112 position: sticky; 113 } 114 .current-static h2{ 115 width: 50%; 116 padding: 0 10px; 117 font-size: 16px; 118 font-weight: 400; 119 visibility: visible; 120 } 121 .bottom-scroll-area{ 122 display: flex; 123 height: auto; 124 overflow-y: auto; 125 margin-top: 1.2em; 126 } 127 .battery-canvas{ 128 width: 50%; 129 padding: 0 10px; 130 } 131 132 #batteryTitle{ 133 opacity: 0.9; 134 font-size: 14px; 135 color: #000000; 136 text-align: left; 137 line-height: 16px; 138 font-weight: 700; 139 } 140 </style> 141 <div style="width: 100%;height: auto;position: relative"> 142 <div class="bottom-scroll-area"> 143 <div class="battery-canvas"> 144 <lit-table id="tb-power-battery-energy" no-head style="height: auto"> 145 <lit-table-column title="name" data-index="name" key="name" align="flex-start" width="180px"></lit-table-column> 146 <lit-table-column title="value" data-index="value" key="value" align="flex-start" ></lit-table-column> 147 </lit-table> 148 </div> 149 </div> 150 </div> 151 `; 152 } 153} 154