1/* 2 * Copyright (C) 2023 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 { element, BaseElement } from '../../../../../base-ui/BaseElement'; 17import { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { XpowerComponentTopStruct } from './TabPaneXpowerComponentTop'; 19import { sortByColumn } from './XpowerUtil'; 20 21@element('tabpane-xpower-component-camera') 22export class TabPaneXpowerComponentCamera extends BaseElement { 23 private xpowerComponentCameraTbl: LitTable | null | undefined; 24 private currentDataList: Array<XpowerComponentTopStruct> = []; 25 26 set data(selectionDataList: Array<XpowerComponentTopStruct>) { 27 this.currentDataList = selectionDataList; 28 this.xpowerComponentCameraTbl!.loading = true; 29 this.xpowerComponentCameraTbl!.recycleDataSource = selectionDataList; 30 this.xpowerComponentCameraTbl!.loading = false; 31 } 32 33 initElements(): void { 34 this.xpowerComponentCameraTbl = this.shadowRoot?.querySelector<LitTable>('#lit-table'); 35 } 36 37 connectedCallback(): void { 38 super.connectedCallback(); 39 this.xpowerComponentCameraTbl!.addEventListener('column-click', (evt): void => { 40 // @ts-ignore 41 sortByColumn(evt.detail, this.currentDataList, this.xpowerComponentCameraTbl!); 42 }); 43 new ResizeObserver((entries) => { 44 let clientHeight = this.xpowerComponentCameraTbl!.shadowRoot?.querySelector('.table')!.clientHeight; 45 let scrollHeight = this.xpowerComponentCameraTbl!.shadowRoot?.querySelector('.table')!.scrollHeight; 46 if (clientHeight === scrollHeight) { 47 this.style.height = 'calc(100% - 22px)'; 48 } else { 49 this.style.height = 'calc(100% - 42px)'; 50 } 51 }).observe(this.xpowerComponentCameraTbl!.shadowRoot?.querySelector('.table')!); 52 } 53 54 initHtml(): string { 55 return ` 56 <style> 57 :host{ 58 padding: 10px 10px; 59 display: flex; 60 flex-direction: column; 61 overflow-y: auto; 62 width: calc(100% - 20px); 63 height: calc(100% - 42px); 64 } 65 </style> 66 <lit-table id="lit-table" style="height: 100%"> 67 <lit-table-column order title="TimeStamp(ms)" data-index="startMS" key="startMS" align="flex-start" width="120px"> 68 </lit-table-column> 69 <lit-table-column title="AppName" data-index="appNameStr" order key="appNameStr" align="flex-start" width="250px"> 70 </lit-table-column> 71 <lit-table-column order title="CameraId" data-index="cameraId" key="cameraId" align="flex-start" width="110px"> 72 </lit-table-column> 73 <lit-table-column title="Background Duration(ms)" key="backgroundDuration" order data-index="backgroundDuration" align="flex-start" width="190px"> 74 </lit-table-column> 75 <lit-table-column title="Background Energy(mAh)" order data-index="backgroundEnergy" key="backgroundEnergy" align="flex-start" width="190px"> 76 </lit-table-column> 77 <lit-table-column title="Foreground Duration(ms)" data-index="foregroundDuration" order key="foregroundDuration" align="flex-start" width="190px"> 78 </lit-table-column> 79 <lit-table-column title="Foreground Energy(mAh)" data-index="foregroundEnergy" order key="foregroundEnergy" align="flex-start" width="190px"> 80 </lit-table-column> 81 <lit-table-column title="ScreenOff Duration(ms)" align="flex-start" order data-index="screenOffDuration" key="screenOffDuration" width="190px"> 82 </lit-table-column> 83 <lit-table-column title="ScreenOff Energy(mAh)" key="screenOffEnergy" data-index="screenOffEnergy" order align="flex-start" width="190px"> 84 </lit-table-column> 85 <lit-table-column title="ScreenOn Duration(ms)" key="screenOnDuration" data-index="screenOnDuration" order align="flex-start" width="190px"> 86 </lit-table-column> 87 <lit-table-column title="ScreenOn Energy(mAh)" key="screenOnEnergy" data-index="screenOnEnergy" order align="flex-start" width="190px"> 88 </lit-table-column> 89 </lit-table> 90 `; 91 } 92} 93