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 {SystemDetailsEnergy} from "../../../../bean/EnergyStruct.js"; 17import {BaseElement, element} from "../../../../../base-ui/BaseElement.js"; 18import {LitTable} from "../../../../../base-ui/table/lit-table.js"; 19import {SelectionParam} from "../../../../bean/BoxSelection.js"; 20import {querySystemDetailsData} from "../../../../database/SqlLite.js"; 21 22@element('tabpane-system-details') 23export class TabPaneSystemDetails extends BaseElement { 24 private tbl: LitTable | null | undefined; 25 private detailsTbl: LitTable | null | undefined; 26 private eventSource: Array<any> = []; 27 private detailsSource: Array<any> = [] 28 private boxDetails: HTMLDivElement | null | undefined; 29 30 set data(val: SelectionParam | any) { 31 this.queryDataByDB(val) 32 } 33 34 connectedCallback() { 35 super.connectedCallback(); 36 new ResizeObserver((entries) => { 37 if (this.parentElement?.clientHeight != 0) { 38 // @ts-ignore 39 this.tbl!.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight - 45) + "px" 40 this.tbl!.reMeauseHeight() 41 } 42 }).observe(this.parentElement!); 43 } 44 45 initElements(): void { 46 this.boxDetails = this.shadowRoot?.querySelector<HTMLDivElement>('.box-details'); 47 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-system-data'); 48 this.detailsTbl = this.shadowRoot?.querySelector<LitTable>('#tb-system-details-data'); 49 50 this.tbl!.addEventListener('row-click', (e) => { 51 this.detailsSource = [] 52 // @ts-ignore 53 let data = (e.detail.data as SystemDetailsEnergy) 54 this.convertData(data); 55 }) 56 57 this.tbl!.addEventListener('column-click', (evt) => { 58 // @ts-ignore 59 this.sortByColumn(evt.detail.key, evt.detail.sort) 60 }); 61 } 62 63 convertData(data: SystemDetailsEnergy) { 64 if (data.eventName === "Event Name") { 65 this.detailsTbl!.recycleDataSource = [] 66 this.boxDetails!.style.width = "100%" 67 } else { 68 this.detailsSource.push({key: "EVENT_NAME : ", value: data.eventName}) 69 this.detailsSource.push({key: "PID : ", value: data.pid}) 70 this.detailsSource.push({key: "UID : ", value: data.uid}) 71 if (data.eventName === "GNSS_STATE") { 72 this.detailsSource.push({key: "STATE : ", value: data.state}) 73 } else if (data.eventName === "POWER_RUNNINGLOCK") { 74 this.detailsSource.push({key: "TYPE : ", value: data.type}) 75 this.detailsSource.push({key: "STATE : ", value: data.state}) 76 this.detailsSource.push({key: "LOG_LEVEL : ", value: data.log_level}) 77 this.detailsSource.push({key: "NAME : ", value: data.name}) 78 this.detailsSource.push({key: "MESSAGE : ", value: data.message}) 79 this.detailsSource.push({key: "TAG : ", value: data.tag}) 80 } else { 81 this.detailsSource.push({key: "TYPE : ", value: data.type}) 82 this.detailsSource.push({key: "WORK_ID : ", value: data.workId}) 83 this.detailsSource.push({key: "NAME : ", value: data.name}) 84 this.detailsSource.push({key: "INTERVAL : ", value: data.interval}) 85 } 86 this.detailsTbl!.recycleDataSource = this.detailsSource 87 this.boxDetails!.style.width = "65%" 88 } 89 this.detailsTbl!.shadowRoot?.querySelectorAll<HTMLDivElement>(".td").forEach(td => { 90 let item = td.getAttribute("title"); 91 td.style.fontSize = "14px" 92 td.style.fontWeight = "400" 93 if (item != null && item.indexOf(":") > -1) { 94 td.style.opacity = "0.9" 95 td.style.lineHeight = "16px" 96 } else { 97 td.style.opacity = "0.6" 98 td.style.lineHeight = "20px" 99 } 100 }) 101 } 102 103 queryDataByDB(val: SelectionParam | any) { 104 querySystemDetailsData(val.leftNs, val.rightNs).then(result => { 105 let itemList = [] 106 let it: any = {} 107 result.forEach((item: any) => { 108 if (it[item.ts + item.eventName] == undefined) { 109 it[item.ts + item.eventName] = {} 110 it[item.ts + item.eventName]["ts"] = item.ts 111 it[item.ts + item.eventName]["eventName"] = item.eventName 112 } else { 113 it[item.ts + item.eventName][item.appKey.toLocaleLowerCase()] = item.appValue 114 } 115 }) 116 this.eventSource = [] 117 let value = Object.values(it); 118 this.eventSource.push({ 119 ts: "Time", 120 interval: 0, 121 level: 0, 122 name: "", 123 state: 0, 124 tag: "", 125 type: "", 126 uid: 0, 127 pid: 0, 128 workId: "", 129 message: "", 130 log_level: "", 131 eventName: "Event Name" 132 }) 133 this.tbl!.recycleDataSource = this.eventSource.concat(value) 134 this.detailsTbl!.recycleDataSource = [] 135 this.boxDetails!.style.width = "100%" 136 this.tbl?.shadowRoot?.querySelectorAll<HTMLDivElement>(".td").forEach(td => { 137 td.style.fontSize = "14px" 138 if (td.getAttribute("title") === "Event Name" || td.getAttribute("title") === "Time") { 139 td.style.fontWeight = "700" 140 } else { 141 td.style.fontWeight = "400" 142 td.style.opacity = '0.9' 143 td.style.lineHeight = "16px" 144 } 145 }) 146 }) 147 } 148 149 initHtml(): string { 150 return ` 151 <style> 152 :host{ 153 display: flex; 154 flex-direction: column; 155 padding: 10px 10px 0 10px; 156 } 157 .progress{ 158 bottom: 33px; 159 position: absolute; 160 height: 1px; 161 left: 0; 162 right: 0; 163 } 164 </style> 165 <div style="display: flex;flex-direction: column"> 166 <div style="display: flex;flex-direction: row"> 167 <lit-slicer style="width:100%"> 168 <div class="box-details" style="width: 100%"> 169 <lit-table id="tb-system-data" style="height: auto"> 170 <lit-table-column width="300px" title="" data-index="eventName" key="eventName" align="flex-start" order> 171 </lit-table-column> 172 <lit-table-column width="300px" title="" data-index="ts" key="ts" align="flex-start" order> 173 </lit-table-column> 174 </lit-table> 175 </div> 176 <lit-slicer-track ></lit-slicer-track> 177 <lit-table id="tb-system-details-data" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)"> 178 <lit-table-column width="100px" title="" data-index="key" key="key" align="flex-start" > 179 </lit-table-column> 180 <lit-table-column width="1fr" title="" data-index="value" key="value" align="flex-start"> 181 </lit-table-column> 182 </lit-table> 183 </lit-slicer> 184 </div> 185 <lit-progress-bar class="progress"></lit-progress-bar> 186 </div> 187 `; 188 } 189} 190