148f512ceSopenharmony_ci<!DOCTYPE html> 248f512ceSopenharmony_ci<html lang="en"> 348f512ceSopenharmony_ci<head> 448f512ceSopenharmony_ci <meta charset="UTF-8"> 548f512ceSopenharmony_ci <title>Report</title> 648f512ceSopenharmony_ci <style> 748f512ceSopenharmony_ci * { 848f512ceSopenharmony_ci box-sizing: border-box; 948f512ceSopenharmony_ci } 1048f512ceSopenharmony_ci 1148f512ceSopenharmony_ci html, 1248f512ceSopenharmony_ci body { 1348f512ceSopenharmony_ci height: 100%; 1448f512ceSopenharmony_ci margin: 0; 1548f512ceSopenharmony_ci padding: 0; 1648f512ceSopenharmony_ci } 1748f512ceSopenharmony_ci 1848f512ceSopenharmony_ci lit-tabs { 1948f512ceSopenharmony_ci padding-top: 10px; 2048f512ceSopenharmony_ci } 2148f512ceSopenharmony_ci 2248f512ceSopenharmony_ci lit-tabpane { 2348f512ceSopenharmony_ci padding: 20px; 2448f512ceSopenharmony_ci } 2548f512ceSopenharmony_ci </style> 2648f512ceSopenharmony_ci</head> 2748f512ceSopenharmony_ci<body> 2848f512ceSopenharmony_ci<script type="module"> 2948f512ceSopenharmony_ci window.getShadowRoot = (el)=>{ 3048f512ceSopenharmony_ci if (el.parentNode) { 3148f512ceSopenharmony_ci return window.getShadowRoot(el.parentNode); 3248f512ceSopenharmony_ci } else { 3348f512ceSopenharmony_ci return el; 3448f512ceSopenharmony_ci } 3548f512ceSopenharmony_ci }; 3648f512ceSopenharmony_ci window.getShadowElement = (el)=>{ 3748f512ceSopenharmony_ci if (el.parentElement) { 3848f512ceSopenharmony_ci return window.getShadowElement(el.parentElement); 3948f512ceSopenharmony_ci } else { 4048f512ceSopenharmony_ci return el; 4148f512ceSopenharmony_ci } 4248f512ceSopenharmony_ci }; 4348f512ceSopenharmony_ci class LitIcon extends HTMLElement { 4448f512ceSopenharmony_ci static get observedAttributes() { 4548f512ceSopenharmony_ci return ['name', 'size', 'color', 'path']; 4648f512ceSopenharmony_ci } 4748f512ceSopenharmony_ci 4848f512ceSopenharmony_ci constructor() { 4948f512ceSopenharmony_ci super(); 5048f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 5148f512ceSopenharmony_ci shadowRoot.innerHTML = ` 5248f512ceSopenharmony_ci <style> 5348f512ceSopenharmony_ci :host{ 5448f512ceSopenharmony_ci font-size: inherit; 5548f512ceSopenharmony_ci display: inline-block; 5648f512ceSopenharmony_ci transition: .3s; 5748f512ceSopenharmony_ci } 5848f512ceSopenharmony_ci :host([spin]) { 5948f512ceSopenharmony_ci animation: rotate 1.75s linear infinite; 6048f512ceSopenharmony_ci } 6148f512ceSopenharmony_ci @keyframes rotate { 6248f512ceSopenharmony_ci to{ 6348f512ceSopenharmony_ci transform: rotate(360deg); 6448f512ceSopenharmony_ci } 6548f512ceSopenharmony_ci } 6648f512ceSopenharmony_ci .icon{ 6748f512ceSopenharmony_ci display: block; 6848f512ceSopenharmony_ci width: 1em; 6948f512ceSopenharmony_ci height: 1em; 7048f512ceSopenharmony_ci margin: auto; 7148f512ceSopenharmony_ci fill: currentColor; 7248f512ceSopenharmony_ci overflow: hidden; 7348f512ceSopenharmony_ci } 7448f512ceSopenharmony_ci </style> 7548f512ceSopenharmony_ci <svg style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 7648f512ceSopenharmony_ci <symbol id="icon-ellipsis" viewBox="0 0 1024 1024"><path d="M232 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M512 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M792 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path></symbol> 7748f512ceSopenharmony_ci <symbol id="icon-doubleleft" viewBox="0 0 1024 1024"><path d="M272.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512z"></path><path d="M576.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"></path></symbol> 7848f512ceSopenharmony_ci <symbol id="icon-doubleright" viewBox="0 0 1024 1024"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path><path d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></symbol> 7948f512ceSopenharmony_ci <symbol id="icon-close-circle-fill" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></symbol> 8048f512ceSopenharmony_ci<!-- <symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></symbol>--> 8148f512ceSopenharmony_ci<!-- <symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"></path></symbol>--> 8248f512ceSopenharmony_ci </svg> 8348f512ceSopenharmony_ci <svg class='icon' id='icon' aria-hidden="true" viewBox="0 0 ${this.view} ${this.view}"> 8448f512ceSopenharmony_ci ${this.path ? '<path id="path"></path>' : '<use id="use"></use>'} 8548f512ceSopenharmony_ci </svg> 8648f512ceSopenharmony_ci `; 8748f512ceSopenharmony_ci } 8848f512ceSopenharmony_ci 8948f512ceSopenharmony_ci get view() { 9048f512ceSopenharmony_ci return this.getAttribute('view') || 1024; 9148f512ceSopenharmony_ci } 9248f512ceSopenharmony_ci 9348f512ceSopenharmony_ci get name() { 9448f512ceSopenharmony_ci return this.getAttribute('name'); 9548f512ceSopenharmony_ci } 9648f512ceSopenharmony_ci 9748f512ceSopenharmony_ci get path() { 9848f512ceSopenharmony_ci return this.getAttribute('path'); 9948f512ceSopenharmony_ci } 10048f512ceSopenharmony_ci 10148f512ceSopenharmony_ci set name(value) { 10248f512ceSopenharmony_ci this.setAttribute('name', value); 10348f512ceSopenharmony_ci } 10448f512ceSopenharmony_ci 10548f512ceSopenharmony_ci set path(value) { 10648f512ceSopenharmony_ci this.setAttribute('path', value); 10748f512ceSopenharmony_ci } 10848f512ceSopenharmony_ci 10948f512ceSopenharmony_ci get size() { 11048f512ceSopenharmony_ci return this.getAttribute('size') || ''; 11148f512ceSopenharmony_ci } 11248f512ceSopenharmony_ci 11348f512ceSopenharmony_ci get color() { 11448f512ceSopenharmony_ci return this.getAttribute('color') || ''; 11548f512ceSopenharmony_ci } 11648f512ceSopenharmony_ci 11748f512ceSopenharmony_ci set size(value) { 11848f512ceSopenharmony_ci this.setAttribute('size', value); 11948f512ceSopenharmony_ci } 12048f512ceSopenharmony_ci 12148f512ceSopenharmony_ci set color(value) { 12248f512ceSopenharmony_ci this.setAttribute('color', value); 12348f512ceSopenharmony_ci } 12448f512ceSopenharmony_ci 12548f512ceSopenharmony_ci get spin() { 12648f512ceSopenharmony_ci return this.hasAttribute('spin'); 12748f512ceSopenharmony_ci } 12848f512ceSopenharmony_ci 12948f512ceSopenharmony_ci set spin(value) { 13048f512ceSopenharmony_ci if (value) { 13148f512ceSopenharmony_ci this.setAttribute('spin',''); 13248f512ceSopenharmony_ci } else { 13348f512ceSopenharmony_ci this.removeAttribute('spin'); 13448f512ceSopenharmony_ci } 13548f512ceSopenharmony_ci } 13648f512ceSopenharmony_ci 13748f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 13848f512ceSopenharmony_ci connectedCallback() { 13948f512ceSopenharmony_ci this.icon = this.shadowRoot.getElementById('icon'); 14048f512ceSopenharmony_ci this.use = this.shadowRoot.querySelector('use'); 14148f512ceSopenharmony_ci this.d = this.shadowRoot.querySelector('path'); 14248f512ceSopenharmony_ci this.size && (this.size = this.size); 14348f512ceSopenharmony_ci this.color && (this.color = this.color); 14448f512ceSopenharmony_ci this.name && (this.name = this.name); 14548f512ceSopenharmony_ci this.path && (this.path = this.path); 14648f512ceSopenharmony_ci } 14748f512ceSopenharmony_ci 14848f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 14948f512ceSopenharmony_ci disconnectedCallback() { 15048f512ceSopenharmony_ci 15148f512ceSopenharmony_ci } 15248f512ceSopenharmony_ci 15348f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 15448f512ceSopenharmony_ci adoptedCallback() { 15548f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 15648f512ceSopenharmony_ci } 15748f512ceSopenharmony_ci 15848f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 15948f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 16048f512ceSopenharmony_ci if (name === 'name' && this.use) { 16148f512ceSopenharmony_ci this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#icon-${newValue}`); 16248f512ceSopenharmony_ci } 16348f512ceSopenharmony_ci if (name === 'path' && this.d) { 16448f512ceSopenharmony_ci this.d.setAttribute('d', newValue); 16548f512ceSopenharmony_ci } 16648f512ceSopenharmony_ci if (name === 'color' && this.icon) { 16748f512ceSopenharmony_ci this.icon.style.color = newValue; 16848f512ceSopenharmony_ci } 16948f512ceSopenharmony_ci if (name === 'size' && this.icon) { 17048f512ceSopenharmony_ci this.icon.style.fontSize = newValue + 'px'; 17148f512ceSopenharmony_ci } 17248f512ceSopenharmony_ci } 17348f512ceSopenharmony_ci } 17448f512ceSopenharmony_ci if (!customElements.get('lit-icon')) { 17548f512ceSopenharmony_ci customElements.define('lit-icon', LitIcon); 17648f512ceSopenharmony_ci } 17748f512ceSopenharmony_ci 17848f512ceSopenharmony_ci class LitInput extends HTMLElement { 17948f512ceSopenharmony_ci static get observedAttributes() { 18048f512ceSopenharmony_ci return [ 18148f512ceSopenharmony_ci 'placeholder',//显示提示文字 18248f512ceSopenharmony_ci 'block',//属性将使按钮适合其父宽度。 18348f512ceSopenharmony_ci 'icon',//图标，如果配置了 slot='prefix' icon将失效 18448f512ceSopenharmony_ci 'bordered',//是否有边框 18548f512ceSopenharmony_ci 'allow-clear',//是否有清除 18648f512ceSopenharmony_ci 'rows',//表示行数，默认input 设置rows 后 显示为textarea 18748f512ceSopenharmony_ci 'maxlength',//允许输入多少个字符 默认没有限制 18848f512ceSopenharmony_ci 'type',//password number text 18948f512ceSopenharmony_ci 'pattern',//正则表达式 19048f512ceSopenharmony_ci 'error-text',//错误提示文字 19148f512ceSopenharmony_ci 'error-placement',//错误提示文字方向 19248f512ceSopenharmony_ci 'required',//是否开始验证 19348f512ceSopenharmony_ci 'value'//值 19448f512ceSopenharmony_ci ]; 19548f512ceSopenharmony_ci } 19648f512ceSopenharmony_ci get value() { 19748f512ceSopenharmony_ci return this.getAttribute('value')||''; 19848f512ceSopenharmony_ci } 19948f512ceSopenharmony_ci 20048f512ceSopenharmony_ci set value(value) { 20148f512ceSopenharmony_ci this.setAttribute('value',value); 20248f512ceSopenharmony_ci } 20348f512ceSopenharmony_ci get required() { 20448f512ceSopenharmony_ci return this.hasAttribute('required'); 20548f512ceSopenharmony_ci } 20648f512ceSopenharmony_ci 20748f512ceSopenharmony_ci set required(value) { 20848f512ceSopenharmony_ci if (value) { 20948f512ceSopenharmony_ci this.setAttribute('required', ''); 21048f512ceSopenharmony_ci } else { 21148f512ceSopenharmony_ci this.removeAttribute('required'); 21248f512ceSopenharmony_ci } 21348f512ceSopenharmony_ci } 21448f512ceSopenharmony_ci get pattern() { 21548f512ceSopenharmony_ci return this.getAttribute('pattern')||''; 21648f512ceSopenharmony_ci } 21748f512ceSopenharmony_ci 21848f512ceSopenharmony_ci set pattern(value) { 21948f512ceSopenharmony_ci this.setAttribute('pattern', value); 22048f512ceSopenharmony_ci } 22148f512ceSopenharmony_ci get errorText() { 22248f512ceSopenharmony_ci return this.getAttribute('error-text')||'该项为必填项'; 22348f512ceSopenharmony_ci } 22448f512ceSopenharmony_ci set errorText(value) { 22548f512ceSopenharmony_ci this.setAttribute('error-text',value); 22648f512ceSopenharmony_ci } 22748f512ceSopenharmony_ci get errorPlacement() { 22848f512ceSopenharmony_ci return this.getAttribute('error-placement')||'top'; 22948f512ceSopenharmony_ci } 23048f512ceSopenharmony_ci set errorPlacement(value) { 23148f512ceSopenharmony_ci this.setAttribute('error-placement',value); 23248f512ceSopenharmony_ci } 23348f512ceSopenharmony_ci get type() { 23448f512ceSopenharmony_ci return this.getAttribute('type'); 23548f512ceSopenharmony_ci } 23648f512ceSopenharmony_ci set type(value) { 23748f512ceSopenharmony_ci this.setAttribute('type', value); 23848f512ceSopenharmony_ci } 23948f512ceSopenharmony_ci get maxlength() { 24048f512ceSopenharmony_ci return this.getAttribute('maxlength')||''; 24148f512ceSopenharmony_ci } 24248f512ceSopenharmony_ci 24348f512ceSopenharmony_ci set maxlength(value) { 24448f512ceSopenharmony_ci this.setAttribute('maxlength',value) 24548f512ceSopenharmony_ci } 24648f512ceSopenharmony_ci get rows() { 24748f512ceSopenharmony_ci return this.getAttribute('rows'); 24848f512ceSopenharmony_ci } 24948f512ceSopenharmony_ci set rows(value) { 25048f512ceSopenharmony_ci this.setAttribute('rows',value); 25148f512ceSopenharmony_ci } 25248f512ceSopenharmony_ci get allowClear() { 25348f512ceSopenharmony_ci return this.hasAttribute('allow-clear'); 25448f512ceSopenharmony_ci } 25548f512ceSopenharmony_ci 25648f512ceSopenharmony_ci set allowClear(value) { 25748f512ceSopenharmony_ci if (value) { 25848f512ceSopenharmony_ci this.setAttribute('allow-clear', ''); 25948f512ceSopenharmony_ci } else { 26048f512ceSopenharmony_ci this.removeAttribute('allow-clear'); 26148f512ceSopenharmony_ci } 26248f512ceSopenharmony_ci } 26348f512ceSopenharmony_ci 26448f512ceSopenharmony_ci get bordered() { 26548f512ceSopenharmony_ci return this.getAttribute('bordered') || 'true'; 26648f512ceSopenharmony_ci } 26748f512ceSopenharmony_ci 26848f512ceSopenharmony_ci set bordered(value) { 26948f512ceSopenharmony_ci if (value) { 27048f512ceSopenharmony_ci this.setAttribute('bordered', 'true'); 27148f512ceSopenharmony_ci } else { 27248f512ceSopenharmony_ci this.setAttribute('bordered', 'false'); 27348f512ceSopenharmony_ci } 27448f512ceSopenharmony_ci } 27548f512ceSopenharmony_ci 27648f512ceSopenharmony_ci get icon() { 27748f512ceSopenharmony_ci return this.getAttribute('icon') || null; 27848f512ceSopenharmony_ci } 27948f512ceSopenharmony_ci 28048f512ceSopenharmony_ci set icon(value) { 28148f512ceSopenharmony_ci this.setAttribute('icon', value); 28248f512ceSopenharmony_ci } 28348f512ceSopenharmony_ci 28448f512ceSopenharmony_ci get block() { 28548f512ceSopenharmony_ci return this.hasAttribute('block'); 28648f512ceSopenharmony_ci } 28748f512ceSopenharmony_ci 28848f512ceSopenharmony_ci set block(value) { 28948f512ceSopenharmony_ci if (value) { 29048f512ceSopenharmony_ci this.setAttribute('block', ''); 29148f512ceSopenharmony_ci } else { 29248f512ceSopenharmony_ci this.removeAttribute('block'); 29348f512ceSopenharmony_ci } 29448f512ceSopenharmony_ci } 29548f512ceSopenharmony_ci 29648f512ceSopenharmony_ci get placeholder() { 29748f512ceSopenharmony_ci return this.getAttribute('placeholder') || ''; 29848f512ceSopenharmony_ci } 29948f512ceSopenharmony_ci 30048f512ceSopenharmony_ci set placeholder(value) { 30148f512ceSopenharmony_ci this.setAttribute('placeholder', value); 30248f512ceSopenharmony_ci } 30348f512ceSopenharmony_ci 30448f512ceSopenharmony_ci constructor() { 30548f512ceSopenharmony_ci super(); 30648f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 30748f512ceSopenharmony_ci shadowRoot.innerHTML = ` 30848f512ceSopenharmony_ci <style> 30948f512ceSopenharmony_ci:host{ 31048f512ceSopenharmony_ci ${this.bordered === 'true' ? 'border: 1px solid #e9e9e9;' : ''} 31148f512ceSopenharmony_ci display: inline-flex; 31248f512ceSopenharmony_ci box-sizing: border-box; 31348f512ceSopenharmony_ci position:relative; 31448f512ceSopenharmony_ci align-items: ${this.rows?'flex-start':'center'}; 31548f512ceSopenharmony_ci transition: all .3s; 31648f512ceSopenharmony_ci border-radius: 2px; 31748f512ceSopenharmony_ci font-size: 14px; 31848f512ceSopenharmony_ci color: #333; 31948f512ceSopenharmony_ci ${this.block ? 'display: flex;' : ''} 32048f512ceSopenharmony_ci box-sizing: border-box; 32148f512ceSopenharmony_ci } 32248f512ceSopenharmony_ci :host(:hover) { 32348f512ceSopenharmony_ci ${this.bordered === 'true' ? 'border: 1px solid #65b687;' : ''} 32448f512ceSopenharmony_ci ${this.bordered === 'true' ? 'box-shadow: 0 0 10px #65b68766;' : ''} 32548f512ceSopenharmony_ci } 32648f512ceSopenharmony_ci *{ 32748f512ceSopenharmony_ci box-sizing: border-box; 32848f512ceSopenharmony_ci } 32948f512ceSopenharmony_ci .input{ 33048f512ceSopenharmony_ci outline: none; 33148f512ceSopenharmony_ci border: 0px; 33248f512ceSopenharmony_ci font-size: inherit; 33348f512ceSopenharmony_ci color: inherit; 33448f512ceSopenharmony_ci width: 100%; 33548f512ceSopenharmony_ci height: 100%; 33648f512ceSopenharmony_ci vertical-align:middle; 33748f512ceSopenharmony_ci line-height:inherit; 33848f512ceSopenharmony_ci height:inherit; 33948f512ceSopenharmony_ci padding: 6px 6px 6px ${this.icon ? '6px' : '11px'}; 34048f512ceSopenharmony_ci max-height: inherit; 34148f512ceSopenharmony_ci box-sizing: border-box; 34248f512ceSopenharmony_ci } 34348f512ceSopenharmony_ci /*去掉type=number 后面的增减箭头*/ 34448f512ceSopenharmony_ciinput::-webkit-outer-spin-button, 34548f512ceSopenharmony_ciinput::-webkit-inner-spin-button { 34648f512ceSopenharmony_ci -webkit-appearance: none; 34748f512ceSopenharmony_ci 34848f512ceSopenharmony_ci} 34948f512ceSopenharmony_ci 35048f512ceSopenharmony_ciinput[type='number'] { 35148f512ceSopenharmony_ci -moz-appearance: textfield; 35248f512ceSopenharmony_ci} 35348f512ceSopenharmony_ci 35448f512ceSopenharmony_ci lit-tips{ 35548f512ceSopenharmony_ci flex: 1; 35648f512ceSopenharmony_ci height: 100%; 35748f512ceSopenharmony_ci width: 100%; 35848f512ceSopenharmony_ci } 35948f512ceSopenharmony_ci lit-tips{ 36048f512ceSopenharmony_ci flex: 1; 36148f512ceSopenharmony_ci align-items: center; 36248f512ceSopenharmony_ci } 36348f512ceSopenharmony_ci:host(:not([allow-clear])) .clear-btn{ 36448f512ceSopenharmony_ci display: flex; 36548f512ceSopenharmony_ci visibility: hidden; 36648f512ceSopenharmony_ci transition: all .3s; 36748f512ceSopenharmony_ci opacity: 0; 36848f512ceSopenharmony_ci} 36948f512ceSopenharmony_ci:host([allow-clear]) .clear-btn{ 37048f512ceSopenharmony_ci opacity: 0; 37148f512ceSopenharmony_ci position:absolute; 37248f512ceSopenharmony_ci right: 0; 37348f512ceSopenharmony_ci top: .5rem; 37448f512ceSopenharmony_ci visibility: hidden; 37548f512ceSopenharmony_ci transition: all .3s; 37648f512ceSopenharmony_ci display: flex; 37748f512ceSopenharmony_ci margin-right: 6px; 37848f512ceSopenharmony_ci transform: translateY(0%); 37948f512ceSopenharmony_ci color: #bfbfbf; 38048f512ceSopenharmony_ci} 38148f512ceSopenharmony_ci:host([allow-clear]) .clear-btn:hover{ 38248f512ceSopenharmony_ci color: #8c8c8c; 38348f512ceSopenharmony_ci} 38448f512ceSopenharmony_ci 38548f512ceSopenharmony_ci.area{ 38648f512ceSopenharmony_ci outline: none; 38748f512ceSopenharmony_ci border: 0px; 38848f512ceSopenharmony_ci width: 100%; 38948f512ceSopenharmony_ci font-size: inherit; 39048f512ceSopenharmony_ci vertical-align:middle; 39148f512ceSopenharmony_ci min-height: calc(2rem); 39248f512ceSopenharmony_ci max-height: calc(${this.rows} * 1rem); 39348f512ceSopenharmony_ci padding: 6px 6px 6px ${this.icon ? '6px' : '11px'}; 39448f512ceSopenharmony_ci box-sizing: border-box; 39548f512ceSopenharmony_ci resize:vertical; 39648f512ceSopenharmony_ci} 39748f512ceSopenharmony_ci 39848f512ceSopenharmony_ci:host(:not([type=password])) .pwd-btn, 39948f512ceSopenharmony_ci:host(:not([type=tel])) .pwd-btn{ 40048f512ceSopenharmony_ci display: none; 40148f512ceSopenharmony_ci visibility: hidden; 40248f512ceSopenharmony_ci transition: all .3s; 40348f512ceSopenharmony_ci opacity: 0; 40448f512ceSopenharmony_ci} 40548f512ceSopenharmony_ci:host([type=password]) .pwd-btn, 40648f512ceSopenharmony_ci:host([type=tel]) .pwd-btn{ 40748f512ceSopenharmony_ci opacity: 1; 40848f512ceSopenharmony_ci position:absolute; 40948f512ceSopenharmony_ci right: 0; 41048f512ceSopenharmony_ci top: .5rem; 41148f512ceSopenharmony_ci visibility: visible; 41248f512ceSopenharmony_ci transition: all .3s; 41348f512ceSopenharmony_ci display: flex; 41448f512ceSopenharmony_ci margin-right: 6px; 41548f512ceSopenharmony_ci transform: translateY(0%); 41648f512ceSopenharmony_ci color: #bfbfbf; 41748f512ceSopenharmony_ci} 41848f512ceSopenharmony_ci/*:host([type=password]) input{*/ 41948f512ceSopenharmony_ci/* -webkit-text-security:none;*/ 42048f512ceSopenharmony_ci/* text-security:none;*/ 42148f512ceSopenharmony_ci/*}*/ 42248f512ceSopenharmony_ci:host([type=password]) .pwd-btn:hover, 42348f512ceSopenharmony_ci:host([type=tel]) .pwd-btn:hover{ 42448f512ceSopenharmony_ci color: #8c8c8c; 42548f512ceSopenharmony_ci} 42648f512ceSopenharmony_ci 42748f512ceSopenharmony_ci</style> 42848f512ceSopenharmony_ci<slot name="prefix">${this.icon ? `<lit-icon name="${this.icon}" style="margin-left: 11px;color: inherit;font-size: inherit;${this.rows ? 'transform: translateY(50%);' : ''}"></lit-icon>` : ``}</slot> 42948f512ceSopenharmony_ci<lit-tips tips="${this.errorText}" placement="${this.errorPlacement}" color="#f4615c" offset="12px" show="false"> 43048f512ceSopenharmony_ci ${this.hasAttribute('rows')? 43148f512ceSopenharmony_ci `<textarea class="area" rows="${this.rows}" value="${this.value}" placeholder="${this.placeholder}" cols="27" maxlength="${this.maxlength}" onscroll="this.rows++;"></textarea>` 43248f512ceSopenharmony_ci : 43348f512ceSopenharmony_ci `<input type="${this.type}" value="${this.value}" class="input" placeholder="${this.placeholder}" >`} 43448f512ceSopenharmony_ci 43548f512ceSopenharmony_ci <lit-icon class="clear-btn" name="close-circle-fill"></lit-icon> 43648f512ceSopenharmony_ci <lit-icon class="pwd-btn" name="eye-fill"></lit-icon> 43748f512ceSopenharmony_ci</lit-tips> 43848f512ceSopenharmony_ci<slot name="suffix" ></slot> 43948f512ceSopenharmony_ci `; 44048f512ceSopenharmony_ci } 44148f512ceSopenharmony_ci 44248f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 44348f512ceSopenharmony_ci connectedCallback() { 44448f512ceSopenharmony_ci this.reg = new RegExp(this.pattern); 44548f512ceSopenharmony_ci this.inputElement = this.shadowRoot.querySelector('.input'); 44648f512ceSopenharmony_ci this.areaElement = this.shadowRoot.querySelector('.area'); 44748f512ceSopenharmony_ci this.clearElement = this.shadowRoot.querySelector('.clear-btn'); 44848f512ceSopenharmony_ci this.pwdElement = this.shadowRoot.querySelector('.pwd-btn'); 44948f512ceSopenharmony_ci 45048f512ceSopenharmony_ci this.pwdElement.onclick=(e)=>{ 45148f512ceSopenharmony_ci if (this.inputElement.getAttribute('type')==='password') { 45248f512ceSopenharmony_ci this.pwdElement.name = 'eyeclose-fill'; 45348f512ceSopenharmony_ci this.inputElement.setAttribute('type','tel'); 45448f512ceSopenharmony_ci } else if (this.inputElement.getAttribute('type')==='tel') { 45548f512ceSopenharmony_ci this.inputElement.setAttribute('type','password'); 45648f512ceSopenharmony_ci this.pwdElement.name = 'eye-fill'; 45748f512ceSopenharmony_ci } 45848f512ceSopenharmony_ci } 45948f512ceSopenharmony_ci 46048f512ceSopenharmony_ci if (this.areaElement) { 46148f512ceSopenharmony_ci this.clearElement.onclick=e=>{ 46248f512ceSopenharmony_ci this.areaElement.value = ''; 46348f512ceSopenharmony_ci this.clearElement.style.visibility = 'hidden'; 46448f512ceSopenharmony_ci this.clearElement.style.opacity = '0'; 46548f512ceSopenharmony_ci this.value=this.areaElement.value; 46648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onClear',e)); 46748f512ceSopenharmony_ci this.clearError(); 46848f512ceSopenharmony_ci }; 46948f512ceSopenharmony_ci this.areaElement.oninput=e=>{ 47048f512ceSopenharmony_ci if (this.allowClear) { 47148f512ceSopenharmony_ci if (this.areaElement.value.length>0) { 47248f512ceSopenharmony_ci this.clearElement.style.visibility = 'visible'; 47348f512ceSopenharmony_ci this.clearElement.style.opacity = '1'; 47448f512ceSopenharmony_ci } else { 47548f512ceSopenharmony_ci this.clearElement.style.visibility = 'hidden'; 47648f512ceSopenharmony_ci this.clearElement.style.opacity = '0'; 47748f512ceSopenharmony_ci } 47848f512ceSopenharmony_ci } 47948f512ceSopenharmony_ci this.value=this.areaElement.value; 48048f512ceSopenharmony_ci this.verify(); 48148f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('input',e)); 48248f512ceSopenharmony_ci }; 48348f512ceSopenharmony_ci this.areaElement.onchange=e=>{ 48448f512ceSopenharmony_ci this.value=this.areaElement.value; 48548f512ceSopenharmony_ci this.verify(); 48648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('change',e)); 48748f512ceSopenharmony_ci }; 48848f512ceSopenharmony_ci this.areaElement.onfocus=e=>{ 48948f512ceSopenharmony_ci this.value=this.areaElement.value; 49048f512ceSopenharmony_ci this.verify(); 49148f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('focus',e)); 49248f512ceSopenharmony_ci }; 49348f512ceSopenharmony_ci this.areaElement.onblur=e=>{ 49448f512ceSopenharmony_ci this.value=this.areaElement.value; 49548f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('blur',e)); 49648f512ceSopenharmony_ci }; 49748f512ceSopenharmony_ci this.areaElement.onkeydown=e=>{ 49848f512ceSopenharmony_ci if (e.key==='Enter') { 49948f512ceSopenharmony_ci this.value=this.areaElement.value; 50048f512ceSopenharmony_ci this.verify(); 50148f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onPressEnter',e)); 50248f512ceSopenharmony_ci } 50348f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('keydown',e)); 50448f512ceSopenharmony_ci }; 50548f512ceSopenharmony_ci this.areaElement.onkeyup=e=>{ 50648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('keyup',e)); 50748f512ceSopenharmony_ci }; 50848f512ceSopenharmony_ci this.areaElement.onselect=e=>{ 50948f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('select',e)); 51048f512ceSopenharmony_ci }; 51148f512ceSopenharmony_ci this.areaElement.onclick=e=>{ 51248f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('click',e)); 51348f512ceSopenharmony_ci }; 51448f512ceSopenharmony_ci } 51548f512ceSopenharmony_ci if (this.inputElement) { 51648f512ceSopenharmony_ci this.clearElement.onclick=e=>{ 51748f512ceSopenharmony_ci this.inputElement.value = ''; 51848f512ceSopenharmony_ci this.clearElement.style.visibility = 'hidden'; 51948f512ceSopenharmony_ci this.clearElement.style.opacity = '0'; 52048f512ceSopenharmony_ci this.value=this.inputElement.value; 52148f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onClear',e)); 52248f512ceSopenharmony_ci this.clearError(); 52348f512ceSopenharmony_ci }; 52448f512ceSopenharmony_ci this.inputElement.oninput=e=>{ 52548f512ceSopenharmony_ci if (this.allowClear) { 52648f512ceSopenharmony_ci if (this.inputElement.value.length>0) { 52748f512ceSopenharmony_ci this.clearElement.style.visibility = 'visible'; 52848f512ceSopenharmony_ci this.clearElement.style.opacity = '1'; 52948f512ceSopenharmony_ci } else { 53048f512ceSopenharmony_ci this.clearElement.style.visibility = 'hidden'; 53148f512ceSopenharmony_ci this.clearElement.style.opacity = '0'; 53248f512ceSopenharmony_ci } 53348f512ceSopenharmony_ci } 53448f512ceSopenharmony_ci this.value=this.inputElement.value; 53548f512ceSopenharmony_ci this.verify(); 53648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('input',e)); 53748f512ceSopenharmony_ci }; 53848f512ceSopenharmony_ci this.inputElement.onchange=e=>{ 53948f512ceSopenharmony_ci this.value=this.inputElement.value; 54048f512ceSopenharmony_ci this.verify(); 54148f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('change',e)); 54248f512ceSopenharmony_ci }; 54348f512ceSopenharmony_ci this.inputElement.onfocus=e=>{ 54448f512ceSopenharmony_ci this.value=this.inputElement.value; 54548f512ceSopenharmony_ci this.verify(); 54648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('focus',e)); 54748f512ceSopenharmony_ci }; 54848f512ceSopenharmony_ci this.inputElement.onblur=e=>{ 54948f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('blur',e)); 55048f512ceSopenharmony_ci }; 55148f512ceSopenharmony_ci this.inputElement.onkeydown=e=>{ 55248f512ceSopenharmony_ci if (e.key==='Enter') { 55348f512ceSopenharmony_ci this.value=this.inputElement.value; 55448f512ceSopenharmony_ci this.verify(); 55548f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onPressEnter',e)); 55648f512ceSopenharmony_ci } 55748f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('keydown',e)); 55848f512ceSopenharmony_ci }; 55948f512ceSopenharmony_ci this.inputElement.onkeyup=e=>{ 56048f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('keyup',e)); 56148f512ceSopenharmony_ci }; 56248f512ceSopenharmony_ci this.inputElement.onselect=e=>{ 56348f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('select',e)); 56448f512ceSopenharmony_ci }; 56548f512ceSopenharmony_ci this.inputElement.onclick=e=>{ 56648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('click',e)); 56748f512ceSopenharmony_ci }; 56848f512ceSopenharmony_ci } 56948f512ceSopenharmony_ci 57048f512ceSopenharmony_ci } 57148f512ceSopenharmony_ci 57248f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 57348f512ceSopenharmony_ci disconnectedCallback() { 57448f512ceSopenharmony_ci 57548f512ceSopenharmony_ci } 57648f512ceSopenharmony_ci 57748f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 57848f512ceSopenharmony_ci adoptedCallback() { 57948f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 58048f512ceSopenharmony_ci } 58148f512ceSopenharmony_ci 58248f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 58348f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 58448f512ceSopenharmony_ci if (name === 'value') { 58548f512ceSopenharmony_ci if (this.inputElement) { 58648f512ceSopenharmony_ci this.inputElement.value=newValue; 58748f512ceSopenharmony_ci } else if (this.areaElement) { 58848f512ceSopenharmony_ci this.areaElement.value=newValue; 58948f512ceSopenharmony_ci } 59048f512ceSopenharmony_ci } 59148f512ceSopenharmony_ci } 59248f512ceSopenharmony_ci verify() { 59348f512ceSopenharmony_ci if (this.required) { 59448f512ceSopenharmony_ci let result; 59548f512ceSopenharmony_ci if (this.hasAttribute('rows')) { 59648f512ceSopenharmony_ci result= this.reg.test(this.areaElement.value); 59748f512ceSopenharmony_ci } else { 59848f512ceSopenharmony_ci result= this.reg.test(this.inputElement.value); 59948f512ceSopenharmony_ci } 60048f512ceSopenharmony_ci if (result) { 60148f512ceSopenharmony_ci this.shadowRoot.querySelector('lit-tips').show='false'; 60248f512ceSopenharmony_ci } else { 60348f512ceSopenharmony_ci this.shadowRoot.querySelector('lit-tips').show='true'; 60448f512ceSopenharmony_ci } 60548f512ceSopenharmony_ci return result; 60648f512ceSopenharmony_ci } else { 60748f512ceSopenharmony_ci return true; 60848f512ceSopenharmony_ci } 60948f512ceSopenharmony_ci } 61048f512ceSopenharmony_ci clearError() { 61148f512ceSopenharmony_ci this.shadowRoot.querySelector('lit-tips').show='false'; 61248f512ceSopenharmony_ci } 61348f512ceSopenharmony_ci } 61448f512ceSopenharmony_ci if (!customElements.get('lit-input')) { 61548f512ceSopenharmony_ci customElements.define('lit-input', LitInput); 61648f512ceSopenharmony_ci } 61748f512ceSopenharmony_ci 61848f512ceSopenharmony_ci class LitLoading extends HTMLElement { 61948f512ceSopenharmony_ci static get observedAttributes() { return ['color','size']; } 62048f512ceSopenharmony_ci 62148f512ceSopenharmony_ci constructor() { 62248f512ceSopenharmony_ci super(); 62348f512ceSopenharmony_ci const shadowRoot = this.attachShadow({ mode: 'open' }); 62448f512ceSopenharmony_ci shadowRoot.innerHTML = ` 62548f512ceSopenharmony_ci <style> 62648f512ceSopenharmony_ci :host{ 62748f512ceSopenharmony_ci font-size:inherit; 62848f512ceSopenharmony_ci display:inline-flex; 62948f512ceSopenharmony_ci align-items: center; 63048f512ceSopenharmony_ci justify-content:center; 63148f512ceSopenharmony_ci color:var(--themeColor,#42b983); 63248f512ceSopenharmony_ci } 63348f512ceSopenharmony_ci .loading{ 63448f512ceSopenharmony_ci display: block; 63548f512ceSopenharmony_ci width: 1em; 63648f512ceSopenharmony_ci height: 1em; 63748f512ceSopenharmony_ci margin: auto; 63848f512ceSopenharmony_ci animation: rotate 1.4s linear infinite; 63948f512ceSopenharmony_ci } 64048f512ceSopenharmony_ci .circle { 64148f512ceSopenharmony_ci stroke: currentColor; 64248f512ceSopenharmony_ci animation: progress 1.4s ease-in-out infinite; 64348f512ceSopenharmony_ci stroke-dasharray: 80px, 200px; 64448f512ceSopenharmony_ci stroke-dashoffset: 0px; 64548f512ceSopenharmony_ci transition:.3s; 64648f512ceSopenharmony_ci } 64748f512ceSopenharmony_ci :host(:not(:empty)) .loading{ 64848f512ceSopenharmony_ci margin:.5em; 64948f512ceSopenharmony_ci } 65048f512ceSopenharmony_ci @keyframes rotate{ 65148f512ceSopenharmony_ci to{ 65248f512ceSopenharmony_ci transform: rotate(360deg); 65348f512ceSopenharmony_ci } 65448f512ceSopenharmony_ci } 65548f512ceSopenharmony_ci @keyframes progress { 65648f512ceSopenharmony_ci 0% { 65748f512ceSopenharmony_ci stroke-dasharray: 1px, 200px; 65848f512ceSopenharmony_ci stroke-dashoffset: 0px; 65948f512ceSopenharmony_ci } 66048f512ceSopenharmony_ci 50% { 66148f512ceSopenharmony_ci stroke-dasharray: 100px, 200px; 66248f512ceSopenharmony_ci stroke-dashoffset: -15px; 66348f512ceSopenharmony_ci } 66448f512ceSopenharmony_ci 100% { 66548f512ceSopenharmony_ci stroke-dasharray: 100px, 200px; 66648f512ceSopenharmony_ci stroke-dashoffset: -125px; 66748f512ceSopenharmony_ci } 66848f512ceSopenharmony_ci } 66948f512ceSopenharmony_ci </style> 67048f512ceSopenharmony_ci <svg class="loading" id="loading" viewBox="22 22 44 44"><circle class="circle" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg> 67148f512ceSopenharmony_ci <slot></slot> 67248f512ceSopenharmony_ci `; 67348f512ceSopenharmony_ci } 67448f512ceSopenharmony_ci 67548f512ceSopenharmony_ci get size() { 67648f512ceSopenharmony_ci return this.getAttribute('size')||''; 67748f512ceSopenharmony_ci } 67848f512ceSopenharmony_ci 67948f512ceSopenharmony_ci get color() { 68048f512ceSopenharmony_ci return this.getAttribute('color')||''; 68148f512ceSopenharmony_ci } 68248f512ceSopenharmony_ci 68348f512ceSopenharmony_ci set size(value) { 68448f512ceSopenharmony_ci this.setAttribute('size', value); 68548f512ceSopenharmony_ci } 68648f512ceSopenharmony_ci 68748f512ceSopenharmony_ci set color(value) { 68848f512ceSopenharmony_ci this.setAttribute('color', value); 68948f512ceSopenharmony_ci } 69048f512ceSopenharmony_ci 69148f512ceSopenharmony_ci connectedCallback() { 69248f512ceSopenharmony_ci this.loading = this.shadowRoot.getElementById('loading'); 69348f512ceSopenharmony_ci this.size && (this.size = this.size); 69448f512ceSopenharmony_ci this.color && (this.color = this.color); 69548f512ceSopenharmony_ci } 69648f512ceSopenharmony_ci 69748f512ceSopenharmony_ci attributeChangedCallback (name, oldValue, newValue) { 69848f512ceSopenharmony_ci if ( name === 'color' && this.loading) { 69948f512ceSopenharmony_ci this.loading.style.color = newValue; 70048f512ceSopenharmony_ci } 70148f512ceSopenharmony_ci if ( name === 'size' && this.loading) { 70248f512ceSopenharmony_ci this.loading.style.fontSize = newValue + 'px'; 70348f512ceSopenharmony_ci } 70448f512ceSopenharmony_ci } 70548f512ceSopenharmony_ci } 70648f512ceSopenharmony_ci if (!customElements.get('lit-loading')) { 70748f512ceSopenharmony_ci customElements.define('lit-loading', LitLoading); 70848f512ceSopenharmony_ci } 70948f512ceSopenharmony_ci 71048f512ceSopenharmony_ci class LitPagination extends HTMLElement { 71148f512ceSopenharmony_ci static get observedAttributes() { 71248f512ceSopenharmony_ci return [ 71348f512ceSopenharmony_ci 'current',// 当前页码 71448f512ceSopenharmony_ci 'total',// 总条数 71548f512ceSopenharmony_ci 'page-size',// 每页条数 71648f512ceSopenharmony_ci 'disabled',// 禁用分页 71748f512ceSopenharmony_ci 'show-size-changer',// 显示每页条目数select 71848f512ceSopenharmony_ci 'show-quick-jumper',// 显示跳至多少页 71948f512ceSopenharmony_ci 'page-size-options',// 指定每页可以显示多少条 默认 [10,20,50,100] 72048f512ceSopenharmony_ci 'simple'// 简洁模式 72148f512ceSopenharmony_ci ]; 72248f512ceSopenharmony_ci } 72348f512ceSopenharmony_ci get pageSizeOptions() { 72448f512ceSopenharmony_ci return this.getAttribute('page-size-options'); 72548f512ceSopenharmony_ci } 72648f512ceSopenharmony_ci set pageSizeOptions(value) { 72748f512ceSopenharmony_ci this.setAttribute('page-size-options', ''); 72848f512ceSopenharmony_ci } 72948f512ceSopenharmony_ci 73048f512ceSopenharmony_ci get current() { 73148f512ceSopenharmony_ci return this.getAttribute('current') || '1'; 73248f512ceSopenharmony_ci } 73348f512ceSopenharmony_ci 73448f512ceSopenharmony_ci set current(value) { 73548f512ceSopenharmony_ci this.setAttribute('current', value); 73648f512ceSopenharmony_ci } 73748f512ceSopenharmony_ci 73848f512ceSopenharmony_ci get total() { 73948f512ceSopenharmony_ci return this.getAttribute('total') || '50'; 74048f512ceSopenharmony_ci } 74148f512ceSopenharmony_ci 74248f512ceSopenharmony_ci set total(value) { 74348f512ceSopenharmony_ci this.setAttribute('total', value); 74448f512ceSopenharmony_ci } 74548f512ceSopenharmony_ci 74648f512ceSopenharmony_ci get pageSize() { 74748f512ceSopenharmony_ci return this.getAttribute('page-size') || '10'; 74848f512ceSopenharmony_ci } 74948f512ceSopenharmony_ci 75048f512ceSopenharmony_ci set pageSize(value) { 75148f512ceSopenharmony_ci this.setAttribute('page-size', value); 75248f512ceSopenharmony_ci } 75348f512ceSopenharmony_ci 75448f512ceSopenharmony_ci get disabled() { 75548f512ceSopenharmony_ci return this.hasAttribute('disabled'); 75648f512ceSopenharmony_ci } 75748f512ceSopenharmony_ci 75848f512ceSopenharmony_ci set disabled(value) { 75948f512ceSopenharmony_ci if (value) { 76048f512ceSopenharmony_ci this.setAttribute('disabled', ''); 76148f512ceSopenharmony_ci } else { 76248f512ceSopenharmony_ci this.removeAttribute('disabled'); 76348f512ceSopenharmony_ci } 76448f512ceSopenharmony_ci } 76548f512ceSopenharmony_ci 76648f512ceSopenharmony_ci get showSizeChanger() { 76748f512ceSopenharmony_ci return this.hasAttribute('show-size-changer'); 76848f512ceSopenharmony_ci } 76948f512ceSopenharmony_ci 77048f512ceSopenharmony_ci set showSizeChanger(value) { 77148f512ceSopenharmony_ci if (value) { 77248f512ceSopenharmony_ci this.setAttribute('show-size-changer', ''); 77348f512ceSopenharmony_ci } else { 77448f512ceSopenharmony_ci this.removeAttribute('show-size-changer'); 77548f512ceSopenharmony_ci } 77648f512ceSopenharmony_ci } 77748f512ceSopenharmony_ci 77848f512ceSopenharmony_ci get showQuickJumper() { 77948f512ceSopenharmony_ci return this.hasAttribute('show-quick-jumper') 78048f512ceSopenharmony_ci } 78148f512ceSopenharmony_ci 78248f512ceSopenharmony_ci set showQuickJumper(value) { 78348f512ceSopenharmony_ci if (value) { 78448f512ceSopenharmony_ci this.setAttribute('show-quick-jumper', ''); 78548f512ceSopenharmony_ci } else { 78648f512ceSopenharmony_ci this.removeAttribute('show-quick-jumper'); 78748f512ceSopenharmony_ci } 78848f512ceSopenharmony_ci } 78948f512ceSopenharmony_ci 79048f512ceSopenharmony_ci get simple() { 79148f512ceSopenharmony_ci return this.hasAttribute('simple'); 79248f512ceSopenharmony_ci } 79348f512ceSopenharmony_ci 79448f512ceSopenharmony_ci set simple(value) { 79548f512ceSopenharmony_ci if (value) { 79648f512ceSopenharmony_ci this.setAttribute('simple', ''); 79748f512ceSopenharmony_ci } else { 79848f512ceSopenharmony_ci this.removeAttribute('simple'); 79948f512ceSopenharmony_ci } 80048f512ceSopenharmony_ci } 80148f512ceSopenharmony_ci 80248f512ceSopenharmony_ci constructor() { 80348f512ceSopenharmony_ci super(); 80448f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 80548f512ceSopenharmony_ci shadowRoot.innerHTML = ` 80648f512ceSopenharmony_ci<style> 80748f512ceSopenharmony_ci:host{ 80848f512ceSopenharmony_ci display: flex; 80948f512ceSopenharmony_ci width: max-content; 81048f512ceSopenharmony_ci} 81148f512ceSopenharmony_ci.root{ 81248f512ceSopenharmony_ci display: inline-flex; 81348f512ceSopenharmony_ci /*grid-template-columns: repeat(auto-fill,35px);*/ 81448f512ceSopenharmony_ci /*column-gap: 8px;*/ 81548f512ceSopenharmony_ci /*row-gap: 8px;*/ 81648f512ceSopenharmony_ci user-select: none; 81748f512ceSopenharmony_ci} 81848f512ceSopenharmony_ci.item{ 81948f512ceSopenharmony_ci box-sizing: border-box; 82048f512ceSopenharmony_ci color: #333; 82148f512ceSopenharmony_ci transition: all .3s; 82248f512ceSopenharmony_ci width: 35px; 82348f512ceSopenharmony_ci height: 35px; 82448f512ceSopenharmony_ci margin-left: 6px; 82548f512ceSopenharmony_ci padding: 6px 10px; 82648f512ceSopenharmony_ci border: 1px solid #ececec; 82748f512ceSopenharmony_ci border-radius: 3px; 82848f512ceSopenharmony_ci cursor: pointer; 82948f512ceSopenharmony_ci display: inline-flex; 83048f512ceSopenharmony_ci align-items: center; 83148f512ceSopenharmony_ci justify-content: center; 83248f512ceSopenharmony_ci} 83348f512ceSopenharmony_ci.item-dir{ 83448f512ceSopenharmony_ci color: #333; 83548f512ceSopenharmony_ci transition: all .3s; 83648f512ceSopenharmony_ci padding: 5px 10px; 83748f512ceSopenharmony_ci /*border: 1px solid #ececec;*/ 83848f512ceSopenharmony_ci /*border-radius: 3px;*/ 83948f512ceSopenharmony_ci cursor: pointer; 84048f512ceSopenharmony_ci display: inline-flex; 84148f512ceSopenharmony_ci align-items: center; 84248f512ceSopenharmony_ci justify-content: center; 84348f512ceSopenharmony_ci} 84448f512ceSopenharmony_ci.item:not([disable]):hover{ 84548f512ceSopenharmony_ci color:#42b983; 84648f512ceSopenharmony_ci border: 1px solid #42b983; 84748f512ceSopenharmony_ci} 84848f512ceSopenharmony_ci.item[selected]{ 84948f512ceSopenharmony_ci color:#42b983; 85048f512ceSopenharmony_ci border: 1px solid #42b983; 85148f512ceSopenharmony_ci} 85248f512ceSopenharmony_ci.item[disable]{ 85348f512ceSopenharmony_ci /*background-color: #f5f5f5;*/ 85448f512ceSopenharmony_ci fill: #c7c7c7; 85548f512ceSopenharmony_ci color: #c7c7c7; 85648f512ceSopenharmony_ci cursor: not-allowed; 85748f512ceSopenharmony_ci} 85848f512ceSopenharmony_ci 85948f512ceSopenharmony_ci:host([show-quick-jumper]) .jump-root{ 86048f512ceSopenharmony_ci grid-column: span 4; 86148f512ceSopenharmony_ci margin-left: 6px; 86248f512ceSopenharmony_ci display: inline-flex; 86348f512ceSopenharmony_ci align-items: center; 86448f512ceSopenharmony_ci} 86548f512ceSopenharmony_ci:host(:not([show-quick-jumper])) .jump-root{ 86648f512ceSopenharmony_ci display: none; 86748f512ceSopenharmony_ci} 86848f512ceSopenharmony_ci 86948f512ceSopenharmony_ci:host([show-size-changer]) .pages-change{ 87048f512ceSopenharmony_ci display: inline-flex; 87148f512ceSopenharmony_ci grid-column: span 3; 87248f512ceSopenharmony_ci width: 120px; 87348f512ceSopenharmony_ci margin-left: 6px; 87448f512ceSopenharmony_ci font-size: .9rem; 87548f512ceSopenharmony_ci} 87648f512ceSopenharmony_ci:host(:not([show-size-changer])) .pages-change{ 87748f512ceSopenharmony_ci display: none; 87848f512ceSopenharmony_ci} 87948f512ceSopenharmony_ci</style> 88048f512ceSopenharmony_ci<div style="display: grid;grid-template-columns: max-content 1fr;"> 88148f512ceSopenharmony_ci <div style="display: inline-flex;align-items: center" id="showTotal"> 88248f512ceSopenharmony_ci <slot id="st" name="showTotal"></slot> 88348f512ceSopenharmony_ci </div> 88448f512ceSopenharmony_ci <div class="root"> 88548f512ceSopenharmony_ci<!-- <lit-icon class="item left-arrow" name="left" ></lit-icon>--> 88648f512ceSopenharmony_ci <svg class="item left-arrow" viewBox="0 0 1024 1024" aria-hidden="true" > 88748f512ceSopenharmony_ci <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path> 88848f512ceSopenharmony_ci </svg> 88948f512ceSopenharmony_ci <div class="item first">1</div> 89048f512ceSopenharmony_ci <lit-icon class="item-dir double-left" name="ellipsis" ></lit-icon> 89148f512ceSopenharmony_ci<!-- <svg class="item-dir double-left" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">--> 89248f512ceSopenharmony_ci<!-- <path d="M232 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M512 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M792 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path>--> 89348f512ceSopenharmony_ci<!-- </svg>--> 89448f512ceSopenharmony_ci <div class="item one">2</div> 89548f512ceSopenharmony_ci <div class="item two">3</div> 89648f512ceSopenharmony_ci <div class="item three">4</div> 89748f512ceSopenharmony_ci <div class="item four">5</div> 89848f512ceSopenharmony_ci <div class="item five">6</div> 89948f512ceSopenharmony_ci <lit-icon class="item-dir double-right" name="ellipsis" ></lit-icon> 90048f512ceSopenharmony_ci<!-- <svg class="item-dir double-right" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">--> 90148f512ceSopenharmony_ci<!-- <path d="M232 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M512 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path><path d="M792 511m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"></path>--> 90248f512ceSopenharmony_ci<!-- </svg>--> 90348f512ceSopenharmony_ci <div class="item last">1</div> 90448f512ceSopenharmony_ci<!-- <lit-icon class="item right-arrow" name="right"></lit-icon>--> 90548f512ceSopenharmony_ci <svg class="item right-arrow" viewBox="0 0 1024 1024" aria-hidden="true" > 90648f512ceSopenharmony_ci <path d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"></path> 90748f512ceSopenharmony_ci </svg> 90848f512ceSopenharmony_ci <lit-select class="pages-change" default-value="10"></lit-select> 90948f512ceSopenharmony_ci <div class="jump-root"> 91048f512ceSopenharmony_ci <label style="font-size: .9rem;color: #333;margin-right: 5px">跳至</label> 91148f512ceSopenharmony_ci <lit-input type="number" class="jump" style="width: 80px;height: 100%"></lit-input> 91248f512ceSopenharmony_ci <label style="font-size: .9rem;color: #333;margin-left: 5px">页</label> 91348f512ceSopenharmony_ci </div> 91448f512ceSopenharmony_ci </div> 91548f512ceSopenharmony_ci 91648f512ceSopenharmony_ci</div> 91748f512ceSopenharmony_ci 91848f512ceSopenharmony_ci `; 91948f512ceSopenharmony_ci } 92048f512ceSopenharmony_ci 92148f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 92248f512ceSopenharmony_ci connectedCallback() { 92348f512ceSopenharmony_ci this.slotShowTotal=null; 92448f512ceSopenharmony_ci this.rootElement = this.shadowRoot.querySelector('.root'); 92548f512ceSopenharmony_ci let st = this.shadowRoot.querySelector('#st'); 92648f512ceSopenharmony_ci st.addEventListener('slotchange',()=>{ 92748f512ceSopenharmony_ci let elements = st.assignedElements(); 92848f512ceSopenharmony_ci if (elements.length>0) { 92948f512ceSopenharmony_ci this.slotShowTotal = elements[0]; 93048f512ceSopenharmony_ci } 93148f512ceSopenharmony_ci if (this.slotShowTotal) { 93248f512ceSopenharmony_ci let cloneNode = this.slotShowTotal.render({ 93348f512ceSopenharmony_ci total: this._total, 93448f512ceSopenharmony_ci range: [1,this._pages], 93548f512ceSopenharmony_ci }).content.cloneNode(true); 93648f512ceSopenharmony_ci this.shadowRoot.querySelector('#showTotal').append(cloneNode); 93748f512ceSopenharmony_ci } 93848f512ceSopenharmony_ci }); 93948f512ceSopenharmony_ci this.leftArrow = this.shadowRoot.querySelector('.left-arrow'); 94048f512ceSopenharmony_ci this.first = this.shadowRoot.querySelector('.first'); 94148f512ceSopenharmony_ci this.doubleLeft = this.shadowRoot.querySelector('.double-left'); 94248f512ceSopenharmony_ci this.one = this.shadowRoot.querySelector('.one'); 94348f512ceSopenharmony_ci this.two = this.shadowRoot.querySelector('.two'); 94448f512ceSopenharmony_ci this.three = this.shadowRoot.querySelector('.three'); 94548f512ceSopenharmony_ci this.four = this.shadowRoot.querySelector('.four'); 94648f512ceSopenharmony_ci this.five = this.shadowRoot.querySelector('.five'); 94748f512ceSopenharmony_ci this.doubleRight = this.shadowRoot.querySelector('.double-right'); 94848f512ceSopenharmony_ci this.last = this.shadowRoot.querySelector('.last'); 94948f512ceSopenharmony_ci this.rightArrow = this.shadowRoot.querySelector('.right-arrow'); 95048f512ceSopenharmony_ci this.pagesChange = this.shadowRoot.querySelector('.pages-change'); 95148f512ceSopenharmony_ci this.jump = this.shadowRoot.querySelector('.jump'); 95248f512ceSopenharmony_ci this.nodes = [this.one, this.two, this.three, this.four, this.five]; 95348f512ceSopenharmony_ci 95448f512ceSopenharmony_ci let jsonArray = JSON.parse(this.pageSizeOptions); 95548f512ceSopenharmony_ci if (jsonArray) { 95648f512ceSopenharmony_ci this.pagesChange.dataSource=jsonArray.map(a=>{ 95748f512ceSopenharmony_ci return {key:a, val:`${a} 条/页`,}; 95848f512ceSopenharmony_ci }); 95948f512ceSopenharmony_ci this.pagesChange.value = jsonArray[0]+''; 96048f512ceSopenharmony_ci this.pageSize = jsonArray[0]+''; 96148f512ceSopenharmony_ci } else { 96248f512ceSopenharmony_ci this.pagesChange.dataSource=[10,20,50,100].map(a=>{ 96348f512ceSopenharmony_ci return {key:a, val:`${a} 条/页`,}; 96448f512ceSopenharmony_ci }); 96548f512ceSopenharmony_ci this.pagesChange.value ='10'; 96648f512ceSopenharmony_ci this.pageSize = '10'; 96748f512ceSopenharmony_ci } 96848f512ceSopenharmony_ci 96948f512ceSopenharmony_ci this.jump.addEventListener('onPressEnter',e=>{ 97048f512ceSopenharmony_ci if (e.target.value) { 97148f512ceSopenharmony_ci this.current=e.target.value; 97248f512ceSopenharmony_ci e.target.value = ''; 97348f512ceSopenharmony_ci this.match(); 97448f512ceSopenharmony_ci } 97548f512ceSopenharmony_ci }); 97648f512ceSopenharmony_ci this.pagesChange.onchange = e => { 97748f512ceSopenharmony_ci this.pageSize = e.detail.value; 97848f512ceSopenharmony_ci this.match(); 97948f512ceSopenharmony_ci if (this.slotShowTotal) { 98048f512ceSopenharmony_ci let cloneNode = this.slotShowTotal.render({ 98148f512ceSopenharmony_ci total: this._total, 98248f512ceSopenharmony_ci range: [1,this._pages], 98348f512ceSopenharmony_ci }).content.cloneNode(true); 98448f512ceSopenharmony_ci this.shadowRoot.querySelector('#showTotal').lastElementChild.remove(); 98548f512ceSopenharmony_ci this.shadowRoot.querySelector('#showTotal').append(cloneNode); 98648f512ceSopenharmony_ci } 98748f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onShowSizeChange',{ 98848f512ceSopenharmony_ci detail:{ 98948f512ceSopenharmony_ci current:parseInt(this.current), 99048f512ceSopenharmony_ci size:parseInt(this.pageSize) 99148f512ceSopenharmony_ci } 99248f512ceSopenharmony_ci })); 99348f512ceSopenharmony_ci }; 99448f512ceSopenharmony_ci 99548f512ceSopenharmony_ci this.leftArrow.onclick = (e) => { 99648f512ceSopenharmony_ci if (this._current > 1) { 99748f512ceSopenharmony_ci this.current = `${this._current - 1}`; 99848f512ceSopenharmony_ci this.match(); 99948f512ceSopenharmony_ci } 100048f512ceSopenharmony_ci }; 100148f512ceSopenharmony_ci this.rightArrow.onclick = (e) => { 100248f512ceSopenharmony_ci if (this._current < this._pages) { 100348f512ceSopenharmony_ci this.current = `${this._current + 1}`; 100448f512ceSopenharmony_ci this.match(); 100548f512ceSopenharmony_ci } 100648f512ceSopenharmony_ci }; 100748f512ceSopenharmony_ci let nodeClickHandler = e => { 100848f512ceSopenharmony_ci this.current = `${e.currentTarget.val}`; 100948f512ceSopenharmony_ci this.match(); 101048f512ceSopenharmony_ci }; 101148f512ceSopenharmony_ci this.first.onclick = nodeClickHandler; 101248f512ceSopenharmony_ci this.nodes.forEach(a => a.onclick = nodeClickHandler); 101348f512ceSopenharmony_ci this.last.onclick = nodeClickHandler; 101448f512ceSopenharmony_ci this.doubleLeft.onmouseover = e => { 101548f512ceSopenharmony_ci e.target.name = 'doubleleft'; 101648f512ceSopenharmony_ci }; 101748f512ceSopenharmony_ci this.doubleLeft.onmouseout = e => { 101848f512ceSopenharmony_ci e.target.name = 'ellipsis' 101948f512ceSopenharmony_ci }; 102048f512ceSopenharmony_ci this.doubleLeft.onclick = e => { 102148f512ceSopenharmony_ci let k = this._current - 5; 102248f512ceSopenharmony_ci if (k < 1) k = 1; 102348f512ceSopenharmony_ci this.current = `${k}`; 102448f512ceSopenharmony_ci this.match(); 102548f512ceSopenharmony_ci }; 102648f512ceSopenharmony_ci this.doubleRight.onmouseover = e => { 102748f512ceSopenharmony_ci e.target.name = 'doubleright'; 102848f512ceSopenharmony_ci }; 102948f512ceSopenharmony_ci this.doubleRight.onmouseout = e => { 103048f512ceSopenharmony_ci e.target.name = 'ellipsis' 103148f512ceSopenharmony_ci }; 103248f512ceSopenharmony_ci this.doubleRight.onclick = e => { 103348f512ceSopenharmony_ci let k = this._current + 5; 103448f512ceSopenharmony_ci if (k > this._pages) k = this._pages; 103548f512ceSopenharmony_ci this.current = `${k}`; 103648f512ceSopenharmony_ci this.match(); 103748f512ceSopenharmony_ci }; 103848f512ceSopenharmony_ci this.match(); 103948f512ceSopenharmony_ci } 104048f512ceSopenharmony_ci 104148f512ceSopenharmony_ci match() { 104248f512ceSopenharmony_ci this._current = parseInt(this.current); 104348f512ceSopenharmony_ci this._total = parseInt(this.total); 104448f512ceSopenharmony_ci this._pageSize = parseInt(this.pageSize); 104548f512ceSopenharmony_ci this._pages = Math.ceil(this._total / this._pageSize); 104648f512ceSopenharmony_ci if (this._current>this._pages) { 104748f512ceSopenharmony_ci this._current = this._pages; 104848f512ceSopenharmony_ci this.current = `${this._pages}`; 104948f512ceSopenharmony_ci } else if (this._current<1) { 105048f512ceSopenharmony_ci this._current = 1; 105148f512ceSopenharmony_ci this.current = `1`; 105248f512ceSopenharmony_ci } 105348f512ceSopenharmony_ci // 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true 105448f512ceSopenharmony_ci // if (this._total>50) this.setAttribute('show-size-changer', ''); 105548f512ceSopenharmony_ci 105648f512ceSopenharmony_ci // console.log(`${this._total} ${this._current}/${this._pages} ${this._pageSize}`); 105748f512ceSopenharmony_ci if (this._current === 1) { 105848f512ceSopenharmony_ci this.leftArrow.setAttribute('disable', ''); 105948f512ceSopenharmony_ci } else { 106048f512ceSopenharmony_ci this.leftArrow.removeAttribute('disable'); 106148f512ceSopenharmony_ci } 106248f512ceSopenharmony_ci if (this._current === this._pages) { 106348f512ceSopenharmony_ci this.rightArrow.setAttribute('disable', ''); 106448f512ceSopenharmony_ci } else { 106548f512ceSopenharmony_ci this.rightArrow.removeAttribute('disable'); 106648f512ceSopenharmony_ci } 106748f512ceSopenharmony_ci this.hiddenNode(this.first, this.last, this.one, this.two, this.three, this.four, this.five, 106848f512ceSopenharmony_ci this.doubleLeft, this.doubleRight); 106948f512ceSopenharmony_ci if (this._pages <= 5) { 107048f512ceSopenharmony_ci for (let i = 0; i < this._pages; i++) { 107148f512ceSopenharmony_ci this.displayNode(this.nodes[i]); 107248f512ceSopenharmony_ci this.item(this.nodes[i], i + 1); 107348f512ceSopenharmony_ci } 107448f512ceSopenharmony_ci } else if (this._pages === 6) { 107548f512ceSopenharmony_ci this.displayNode(this.first); 107648f512ceSopenharmony_ci this.item(this.first, 1); 107748f512ceSopenharmony_ci for (let i = 0; i < this._pages; i++) { 107848f512ceSopenharmony_ci this.displayNode(this.nodes[i]); 107948f512ceSopenharmony_ci this.item(this.nodes[i], i + 2); 108048f512ceSopenharmony_ci } 108148f512ceSopenharmony_ci } else { 108248f512ceSopenharmony_ci this.displayNode(this.one, this.two, this.three, this.four, this.five); 108348f512ceSopenharmony_ci if (this._current - 3 > 1 && this._current + 3 < this._pages) { // 左边溢出 右边溢出 108448f512ceSopenharmony_ci this.displayNode(this.first, this.last, this.doubleLeft, this.doubleRight); 108548f512ceSopenharmony_ci this.item(this.first, 1); 108648f512ceSopenharmony_ci this.item(this.last, this._pages); 108748f512ceSopenharmony_ci this.item(this.one, this._current - 2); 108848f512ceSopenharmony_ci this.item(this.two, this._current - 1); 108948f512ceSopenharmony_ci this.item(this.three, this._current); 109048f512ceSopenharmony_ci this.item(this.four, this._current + 1); 109148f512ceSopenharmony_ci this.item(this.five, this._current + 2); 109248f512ceSopenharmony_ci } else if (this._current - 3 === 1 && this._current + 3 < this._pages) {//左边刚好 右边溢出 109348f512ceSopenharmony_ci this.displayNode(this.first, this.last, this.doubleRight); 109448f512ceSopenharmony_ci this.item(this.first, 1); 109548f512ceSopenharmony_ci this.item(this.last, this._pages); 109648f512ceSopenharmony_ci for (let i = 0; i < this.nodes.length; i++) { 109748f512ceSopenharmony_ci this.item(this.nodes[i], i + 2); 109848f512ceSopenharmony_ci } 109948f512ceSopenharmony_ci } else if (this._current - 3 < 1 && this._current + 3 < this._pages) { //左边不够 右边溢出 110048f512ceSopenharmony_ci this.displayNode(this.last, this.doubleRight); 110148f512ceSopenharmony_ci this.item(this.last, this._pages); 110248f512ceSopenharmony_ci for (let i = 0; i < this.nodes.length; i++) { 110348f512ceSopenharmony_ci this.item(this.nodes[i], i + 1); 110448f512ceSopenharmony_ci } 110548f512ceSopenharmony_ci } else if (this._current - 3 > 1 && this._current + 3 === this._pages) {// 左边溢出 右边刚好 110648f512ceSopenharmony_ci this.displayNode(this.first, this.last, this.doubleLeft); 110748f512ceSopenharmony_ci this.item(this.first, 1); 110848f512ceSopenharmony_ci this.item(this.last, this._pages); 110948f512ceSopenharmony_ci this.item(this.nodes[0], this._pages - 5); 111048f512ceSopenharmony_ci this.item(this.nodes[1], this._pages - 4); 111148f512ceSopenharmony_ci this.item(this.nodes[2], this._pages - 3); 111248f512ceSopenharmony_ci this.item(this.nodes[3], this._pages - 2); 111348f512ceSopenharmony_ci this.item(this.nodes[4], this._pages - 1); 111448f512ceSopenharmony_ci } else if (this._current - 3 === 1 && this._current + 3 === this._pages) {// 左边刚好 右边刚好 111548f512ceSopenharmony_ci this.displayNode(this.first, this.last); 111648f512ceSopenharmony_ci this.item(this.first, 1); 111748f512ceSopenharmony_ci for (let i = 0; i < this._pages; i++) { 111848f512ceSopenharmony_ci this.displayNode(this.nodes[i]); 111948f512ceSopenharmony_ci this.item(this.nodes[i], i + 2); 112048f512ceSopenharmony_ci } 112148f512ceSopenharmony_ci this.item(this.last, 7); 112248f512ceSopenharmony_ci } else if (this._current - 3 < 1 && this._current + 3 === this._pages) {// 左边不够 右边刚好 112348f512ceSopenharmony_ci this.displayNode(this.last); 112448f512ceSopenharmony_ci this.item(this.last, this._pages); 112548f512ceSopenharmony_ci for (let i = 0; i < this.nodes.length; i++) { 112648f512ceSopenharmony_ci this.item(this.nodes[i], i + 1); 112748f512ceSopenharmony_ci } 112848f512ceSopenharmony_ci } else if (this._current - 3 > 1 && this._current + 3 > this._pages) { //左边溢出 右边不够 112948f512ceSopenharmony_ci this.displayNode(this.first, this.doubleLeft) 113048f512ceSopenharmony_ci this.item(this.first, 1); 113148f512ceSopenharmony_ci this.item(this.nodes[0], this._pages - 4); 113248f512ceSopenharmony_ci this.item(this.nodes[1], this._pages - 3); 113348f512ceSopenharmony_ci this.item(this.nodes[2], this._pages - 2); 113448f512ceSopenharmony_ci this.item(this.nodes[3], this._pages - 1); 113548f512ceSopenharmony_ci this.item(this.nodes[4], this._pages - 0); 113648f512ceSopenharmony_ci } else if (this._current - 3 === 1 && this._current + 3 > this._pages) { //左边刚好 右边不够 113748f512ceSopenharmony_ci this.displayNode(this.first); 113848f512ceSopenharmony_ci this.item(this.first, 1); 113948f512ceSopenharmony_ci this.item(this.nodes[0], this._pages - 4); 114048f512ceSopenharmony_ci this.item(this.nodes[1], this._pages - 3); 114148f512ceSopenharmony_ci this.item(this.nodes[2], this._pages - 2); 114248f512ceSopenharmony_ci this.item(this.nodes[3], this._pages - 1); 114348f512ceSopenharmony_ci this.item(this.nodes[4], this._pages - 0); 114448f512ceSopenharmony_ci } else if (this._current - 3 < 1 && this._current + 3 > this._pages) { //左边不够 右边不够 114548f512ceSopenharmony_ci //限定了 pages>6 这种情况不存在 114648f512ceSopenharmony_ci } 114748f512ceSopenharmony_ci } 114848f512ceSopenharmony_ci } 114948f512ceSopenharmony_ci 115048f512ceSopenharmony_ci item(el, val) { 115148f512ceSopenharmony_ci el.val = val; 115248f512ceSopenharmony_ci el.textContent = val; 115348f512ceSopenharmony_ci if (val === this._current) { 115448f512ceSopenharmony_ci el.setAttribute('selected', ''); 115548f512ceSopenharmony_ci } else { 115648f512ceSopenharmony_ci el.removeAttribute('selected'); 115748f512ceSopenharmony_ci } 115848f512ceSopenharmony_ci } 115948f512ceSopenharmony_ci 116048f512ceSopenharmony_ci displayNode() { 116148f512ceSopenharmony_ci [...arguments].forEach(a => a.style.display = 'flex'); 116248f512ceSopenharmony_ci } 116348f512ceSopenharmony_ci 116448f512ceSopenharmony_ci hiddenNode(n) { 116548f512ceSopenharmony_ci [...arguments].forEach(a => a.style.display = 'none'); 116648f512ceSopenharmony_ci } 116748f512ceSopenharmony_ci 116848f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 116948f512ceSopenharmony_ci disconnectedCallback() { 117048f512ceSopenharmony_ci } 117148f512ceSopenharmony_ci 117248f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 117348f512ceSopenharmony_ci adoptedCallback() { 117448f512ceSopenharmony_ci } 117548f512ceSopenharmony_ci 117648f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 117748f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 117848f512ceSopenharmony_ci if (name === 'current') { 117948f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onChange', { 118048f512ceSopenharmony_ci detail: { 118148f512ceSopenharmony_ci page: parseInt(newValue), 118248f512ceSopenharmony_ci pageSize: this._pageSize 118348f512ceSopenharmony_ci } 118448f512ceSopenharmony_ci })); 118548f512ceSopenharmony_ci } else if (name === 'total') { 118648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onChange', { 118748f512ceSopenharmony_ci detail: { 118848f512ceSopenharmony_ci total: parseInt(newValue), 118948f512ceSopenharmony_ci current: this._current, 119048f512ceSopenharmony_ci pageSize: this._pageSize 119148f512ceSopenharmony_ci } 119248f512ceSopenharmony_ci })); 119348f512ceSopenharmony_ci this.match(); 119448f512ceSopenharmony_ci } 119548f512ceSopenharmony_ci 119648f512ceSopenharmony_ci } 119748f512ceSopenharmony_ci } 119848f512ceSopenharmony_ci if (!customElements.get('lit-pagination')) { 119948f512ceSopenharmony_ci customElements.define('lit-pagination', LitPagination); 120048f512ceSopenharmony_ci } 120148f512ceSopenharmony_ci 120248f512ceSopenharmony_ci class LitPieChart extends HTMLElement { 120348f512ceSopenharmony_ci static get observedAttributes() { return []; } 120448f512ceSopenharmony_ci 120548f512ceSopenharmony_ci constructor() { 120648f512ceSopenharmony_ci super(); 120748f512ceSopenharmony_ci const shadowRoot = this.attachShadow({ mode: 'open' }); 120848f512ceSopenharmony_ci shadowRoot.innerHTML = ` 120948f512ceSopenharmony_ci <style> 121048f512ceSopenharmony_ci :host{ 121148f512ceSopenharmony_ci font-size:inherit; 121248f512ceSopenharmony_ci display:inline-flex; 121348f512ceSopenharmony_ci align-items: center; 121448f512ceSopenharmony_ci justify-content:center; 121548f512ceSopenharmony_ci color:#42b983; 121648f512ceSopenharmony_ci } 121748f512ceSopenharmony_ci </style> 121848f512ceSopenharmony_ci <div style="display: flex;flex-direction: row;width: 100%;padding: 15px"> 121948f512ceSopenharmony_ci <div style="display: flex;flex-direction: column;align-items: center;width: 40%"> 122048f512ceSopenharmony_ci <div id="chartTitle" style="width:auto;font-size: 20px;margin-bottom: 15px;text-overflow: ellipsis;white-space: nowrap"></div> 122148f512ceSopenharmony_ci <canvas id="chartView" width="200" height="200" ></canvas> 122248f512ceSopenharmony_ci </div> 122348f512ceSopenharmony_ci <div id="labelDiv" style="margin-top: 45px"> 122448f512ceSopenharmony_ci <div id="legendDiv"></div> 122548f512ceSopenharmony_ci <div id="pageOptionDiv" style="display: none;flex-direction: row;margin-top: 15px"> 122648f512ceSopenharmony_ci <div id="previous" style="cursor: pointer">previous</div> 122748f512ceSopenharmony_ci <div id="page" style="margin-left: 10px;margin-right: 10px">1/9</div> 122848f512ceSopenharmony_ci <div id="next" style="cursor: pointer">next</div> 122948f512ceSopenharmony_ci </div> 123048f512ceSopenharmony_ci </div> 123148f512ceSopenharmony_ci <div id="tip" style="display: none;position: absolute;z-index: 999;width: auto;height: auto;background-color: #fff; 123248f512ceSopenharmony_ci border-radius: 3px;border:1px solid #eee;box-shadow: 0px 0px 2px 2px #aaa;padding: 10px"> 123348f512ceSopenharmony_ci <div id="tipName" style="width: auto;font-weight: bold;margin-bottom: 10px"></div> 123448f512ceSopenharmony_ci <div id="tipValue" style="width: auto;font-weight: bold"></div> 123548f512ceSopenharmony_ci </div> 123648f512ceSopenharmony_ci </div> 123748f512ceSopenharmony_ci <slot></slot> 123848f512ceSopenharmony_ci `; 123948f512ceSopenharmony_ci } 124048f512ceSopenharmony_ci 124148f512ceSopenharmony_ci get dataSource() { 124248f512ceSopenharmony_ci return this.ds || []; 124348f512ceSopenharmony_ci } 124448f512ceSopenharmony_ci 124548f512ceSopenharmony_ci set dataSource(value) { 124648f512ceSopenharmony_ci this.ds = value; 124748f512ceSopenharmony_ci if (this.ds) { 124848f512ceSopenharmony_ci this.page = 0; 124948f512ceSopenharmony_ci let p = parseInt((this.ds.length / this.pageSize).toString()); 125048f512ceSopenharmony_ci this.totalPage = this.ds.length % this.pageSize > 0 ? (p + 1) : p; 125148f512ceSopenharmony_ci if (this.totalPage > 9) { 125248f512ceSopenharmony_ci this.totalPage = 9; 125348f512ceSopenharmony_ci } 125448f512ceSopenharmony_ci let tempAngel = -1 / 4 * 2 * Math.PI; // 饼图的起始角度 125548f512ceSopenharmony_ci this.ds.forEach(item=>{ 125648f512ceSopenharmony_ci item.startAngel = tempAngel; // 起始弧度 125748f512ceSopenharmony_ci item.angel = item.value * 2 * Math.PI; 125848f512ceSopenharmony_ci item.endAngel = (tempAngel + item.angel); //结束弧度 125948f512ceSopenharmony_ci if (item.endAngel > Math.PI * 3 / 2) { 126048f512ceSopenharmony_ci item.endAngel = Math.PI * 3 / 2; 126148f512ceSopenharmony_ci } 126248f512ceSopenharmony_ci tempAngel += item.angel; 126348f512ceSopenharmony_ci }); 126448f512ceSopenharmony_ci this.updateOptionStatus(); 126548f512ceSopenharmony_ci this.addChartLegend(); 126648f512ceSopenharmony_ci } 126748f512ceSopenharmony_ci this.renderChart(); 126848f512ceSopenharmony_ci } 126948f512ceSopenharmony_ci 127048f512ceSopenharmony_ci get title() { 127148f512ceSopenharmony_ci return this.ct || ''; 127248f512ceSopenharmony_ci } 127348f512ceSopenharmony_ci 127448f512ceSopenharmony_ci set title(value) { 127548f512ceSopenharmony_ci this.ct = value; 127648f512ceSopenharmony_ci if (value) { 127748f512ceSopenharmony_ci this.chartTitle.innerText = value.length > 50 ? value.slice(0,49)+'...' : value; 127848f512ceSopenharmony_ci } 127948f512ceSopenharmony_ci } 128048f512ceSopenharmony_ci 128148f512ceSopenharmony_ci 128248f512ceSopenharmony_ci connectedCallback() { 128348f512ceSopenharmony_ci this.pageSize = 14; 128448f512ceSopenharmony_ci this.page = 0; 128548f512ceSopenharmony_ci this.chartView = this.shadowRoot.getElementById('chartView'); 128648f512ceSopenharmony_ci this.chartView.width = window.devicePixelRatio * this.chartView.width; 128748f512ceSopenharmony_ci this.chartView.height = window.devicePixelRatio * this.chartView.height; 128848f512ceSopenharmony_ci this.chartTitle = this.shadowRoot.getElementById('chartTitle'); 128948f512ceSopenharmony_ci this.labelDiv = this.shadowRoot.getElementById('legendDiv'); 129048f512ceSopenharmony_ci this.tip = this.shadowRoot.getElementById('tip'); 129148f512ceSopenharmony_ci this.tipName = this.shadowRoot.getElementById('tipName'); 129248f512ceSopenharmony_ci this.tipValue = this.shadowRoot.getElementById('tipValue'); 129348f512ceSopenharmony_ci this.pageOptionDiv = this.shadowRoot.getElementById('pageOptionDiv'); 129448f512ceSopenharmony_ci this.previousBt = this.shadowRoot.getElementById('previous'); 129548f512ceSopenharmony_ci this.pageDiv = this.shadowRoot.getElementById('page'); 129648f512ceSopenharmony_ci this.nextBt = this.shadowRoot.getElementById('next'); 129748f512ceSopenharmony_ci this.previousBt.addEventListener('click',this.previousPage.bind(this)); 129848f512ceSopenharmony_ci this.nextBt.addEventListener('click',this.nextPage.bind(this)); 129948f512ceSopenharmony_ci this.chartView.addEventListener('mousemove',this.mouseMove.bind(this)); 130048f512ceSopenharmony_ci this.chartView.addEventListener('click',this.mouseClick.bind(this)); 130148f512ceSopenharmony_ci this.chartView.addEventListener('mouseout',this.mouseOut.bind(this)); 130248f512ceSopenharmony_ci } 130348f512ceSopenharmony_ci 130448f512ceSopenharmony_ci mouseMove(event) { 130548f512ceSopenharmony_ci const mousePos = this.getMousePost(event); 130648f512ceSopenharmony_ci const result = this.containPoint(mousePos); 130748f512ceSopenharmony_ci if (result) { 130848f512ceSopenharmony_ci this.tip.style.left = (event.clientX + 40) + 'px'; 130948f512ceSopenharmony_ci this.tip.style.top = (event.clientY - 40) + 'px'; 131048f512ceSopenharmony_ci this.tip.style.display = 'flex'; 131148f512ceSopenharmony_ci this.tip.style.flexDirection = 'column'; 131248f512ceSopenharmony_ci this.tipName.innerText = result.name; 131348f512ceSopenharmony_ci this.tipValue.innerText = result.time + ' (' + (result.value * 100).toFixed(1) + '%)'; 131448f512ceSopenharmony_ci } else { 131548f512ceSopenharmony_ci this.tip.style.display = 'none'; 131648f512ceSopenharmony_ci if (this.selectItem !== null) { 131748f512ceSopenharmony_ci this.selectItem = undefined; 131848f512ceSopenharmony_ci this.renderChart(); 131948f512ceSopenharmony_ci } 132048f512ceSopenharmony_ci } 132148f512ceSopenharmony_ci } 132248f512ceSopenharmony_ci 132348f512ceSopenharmony_ci mouseOut(event) { 132448f512ceSopenharmony_ci this.tip.style.display = 'none'; 132548f512ceSopenharmony_ci if (this.selectItem !== null) { 132648f512ceSopenharmony_ci this.selectItem = undefined; 132748f512ceSopenharmony_ci this.renderChart(); 132848f512ceSopenharmony_ci } 132948f512ceSopenharmony_ci } 133048f512ceSopenharmony_ci 133148f512ceSopenharmony_ci mouseClick(event) { 133248f512ceSopenharmony_ci if (this.selectItem && this.hasOwnProperty('chartClickListener')) { 133348f512ceSopenharmony_ci this.chartClickListener(this.selectItem); 133448f512ceSopenharmony_ci } 133548f512ceSopenharmony_ci } 133648f512ceSopenharmony_ci 133748f512ceSopenharmony_ci attributeChangedCallback (name, oldValue, newValue) { 133848f512ceSopenharmony_ci 133948f512ceSopenharmony_ci } 134048f512ceSopenharmony_ci 134148f512ceSopenharmony_ci // clientX,clientY 134248f512ceSopenharmony_ci // 判断鼠标在 canvas 的位置 134348f512ceSopenharmony_ci getMousePost(event) { 134448f512ceSopenharmony_ci // 获取鼠标的位置 134548f512ceSopenharmony_ci const { clientX, clientY } = event; 134648f512ceSopenharmony_ci // 获取 canvas 的边界位置 134748f512ceSopenharmony_ci const { top, left } = this.chartView.getBoundingClientRect(); 134848f512ceSopenharmony_ci // 计算鼠标在 canvas 在位置 134948f512ceSopenharmony_ci const x = (clientX - left); 135048f512ceSopenharmony_ci const y = (clientY - top); 135148f512ceSopenharmony_ci return { x, y }; 135248f512ceSopenharmony_ci } 135348f512ceSopenharmony_ci 135448f512ceSopenharmony_ci // 判断是不是在 canvas上 135548f512ceSopenharmony_ci containPoint(mousePos) { 135648f512ceSopenharmony_ci let selector = undefined; 135748f512ceSopenharmony_ci let centerX = this.centerX; 135848f512ceSopenharmony_ci let centerY = this.centerY; 135948f512ceSopenharmony_ci const [subX,subY] = [centerX - mousePos.x,centerY - mousePos.y]; 136048f512ceSopenharmony_ci // 圆心到鼠标 的位置 136148f512ceSopenharmony_ci const len = Math.sqrt(subX * subX + subY * subY); 136248f512ceSopenharmony_ci // 判断是否在圆内 136348f512ceSopenharmony_ci const inChart = len < this.chartRadius; 136448f512ceSopenharmony_ci // 判断是不是在 startAngle 和 endAngle 136548f512ceSopenharmony_ci if (inChart) { 136648f512ceSopenharmony_ci if (this.ds) { 136748f512ceSopenharmony_ci let angle = Math.atan2(centerY - mousePos.y, centerX - mousePos.x) * (180 / Math.PI); 136848f512ceSopenharmony_ci let pointAngle = 0; 136948f512ceSopenharmony_ci if (angle >= 90) { 137048f512ceSopenharmony_ci pointAngle = -(180 - angle); 137148f512ceSopenharmony_ci } else if (angle >= 0 && angle < 90) { 137248f512ceSopenharmony_ci pointAngle = 270 + angle; 137348f512ceSopenharmony_ci } else if (angle < 0 && angle >= -90) { 137448f512ceSopenharmony_ci pointAngle = 270 + angle; 137548f512ceSopenharmony_ci } else { 137648f512ceSopenharmony_ci pointAngle = 90 + 180 + angle; 137748f512ceSopenharmony_ci } 137848f512ceSopenharmony_ci let pa = pointAngle / 180 * Math.PI; 137948f512ceSopenharmony_ci if (pa > 0) { 138048f512ceSopenharmony_ci pa = pa - Math.PI / 2; 138148f512ceSopenharmony_ci } 138248f512ceSopenharmony_ci for (let item of this.ds) { 138348f512ceSopenharmony_ci if (pa >= item.startAngel && pa < item.endAngel) { 138448f512ceSopenharmony_ci selector = item; 138548f512ceSopenharmony_ci if (item !== this.selectItem) { 138648f512ceSopenharmony_ci this.selectItem = item; 138748f512ceSopenharmony_ci this.renderChart(); 138848f512ceSopenharmony_ci } 138948f512ceSopenharmony_ci break; 139048f512ceSopenharmony_ci } 139148f512ceSopenharmony_ci } 139248f512ceSopenharmony_ci } 139348f512ceSopenharmony_ci } 139448f512ceSopenharmony_ci return selector; 139548f512ceSopenharmony_ci } 139648f512ceSopenharmony_ci 139748f512ceSopenharmony_ci renderChart() { 139848f512ceSopenharmony_ci if (this.ds) { 139948f512ceSopenharmony_ci let context = this.chartView.getContext('2d'); 140048f512ceSopenharmony_ci // 清除画布 140148f512ceSopenharmony_ci context.clearRect(0,0,this.chartView.width,this.chartView.height); 140248f512ceSopenharmony_ci this.centerX = this.chartView.width / 2; 140348f512ceSopenharmony_ci this.centerY = this.chartView.height / 2; // 圆心坐标 140448f512ceSopenharmony_ci let labelX,labelY; // label 文字绘制位置 140548f512ceSopenharmony_ci let radius = this.chartView.height / 2 - 10; // 原型半径 140648f512ceSopenharmony_ci this.chartRadius = radius; 140748f512ceSopenharmony_ci let offset = radius / 6; 140848f512ceSopenharmony_ci let size = this.ds.length; 140948f512ceSopenharmony_ci this.ds.forEach(item => { 141048f512ceSopenharmony_ci if (item === this.selectItem) { 141148f512ceSopenharmony_ci context.beginPath(); 141248f512ceSopenharmony_ci context.moveTo(this.centerX,this.centerY); 141348f512ceSopenharmony_ci context.arc(this.centerX,this.centerY,radius + 5,item.startAngel,item.endAngel); 141448f512ceSopenharmony_ci context.fillStyle = this.colorRgbWithAlpha(item.color); 141548f512ceSopenharmony_ci context.fill(); 141648f512ceSopenharmony_ci context.closePath(); 141748f512ceSopenharmony_ci } 141848f512ceSopenharmony_ci context.beginPath(); 141948f512ceSopenharmony_ci context.moveTo(this.centerX,this.centerY); 142048f512ceSopenharmony_ci context.arc(this.centerX,this.centerY,radius,item.startAngel,item.endAngel); 142148f512ceSopenharmony_ci context.fillStyle = item.color; 142248f512ceSopenharmony_ci context.fill(); 142348f512ceSopenharmony_ci if (size > 1) { 142448f512ceSopenharmony_ci context.strokeStyle = '#ffffff'; 142548f512ceSopenharmony_ci context.stroke(); 142648f512ceSopenharmony_ci } 142748f512ceSopenharmony_ci if (item.value > 0.045) { 142848f512ceSopenharmony_ci let text = (item.value * 100).toFixed(1) + '%'; 142948f512ceSopenharmony_ci context.font = '13px Microsoft Yahei'; 143048f512ceSopenharmony_ci context.moveTo(this.centerX,this.centerY); 143148f512ceSopenharmony_ci context.fillStyle = '#ffffff'; 143248f512ceSopenharmony_ci let textWidth = context.measureText(text).width; 143348f512ceSopenharmony_ci if (size === 1) { 143448f512ceSopenharmony_ci context.fillText(text,this.centerX - textWidth / 2,this.centerY); 143548f512ceSopenharmony_ci } else { 143648f512ceSopenharmony_ci let textAngel = item.startAngel + item.angel * 0.5; // 文字角度 143748f512ceSopenharmony_ci labelX = this.centerX + Math.cos(textAngel) * (radius - offset); 143848f512ceSopenharmony_ci labelY = this.centerY + Math.sin(textAngel) * (radius - offset); 143948f512ceSopenharmony_ci context.fillText(text,labelX - textWidth / 2,labelY); 144048f512ceSopenharmony_ci } 144148f512ceSopenharmony_ci } 144248f512ceSopenharmony_ci context.closePath(); 144348f512ceSopenharmony_ci }) 144448f512ceSopenharmony_ci } 144548f512ceSopenharmony_ci } 144648f512ceSopenharmony_ci 144748f512ceSopenharmony_ci addChartLegend() { 144848f512ceSopenharmony_ci this.labelDiv.innerText = ''; 144948f512ceSopenharmony_ci if (this.ds.length <= 15) { 145048f512ceSopenharmony_ci this.pageOptionDiv.style.display = 'none'; 145148f512ceSopenharmony_ci this.ds.forEach(item=>{ 145248f512ceSopenharmony_ci this.labelDiv.appendChild(this.createChartLegend(item)); 145348f512ceSopenharmony_ci }); 145448f512ceSopenharmony_ci } else { 145548f512ceSopenharmony_ci this.pageOptionDiv.style.display = 'flex'; 145648f512ceSopenharmony_ci for (let i = this.page * this.pageSize; i < (this.page + 1) * this.pageSize; i++) { 145748f512ceSopenharmony_ci if (i < this.ds.length) { 145848f512ceSopenharmony_ci this.labelDiv.appendChild(this.createChartLegend(this.ds[i])); 145948f512ceSopenharmony_ci } else { 146048f512ceSopenharmony_ci break; 146148f512ceSopenharmony_ci } 146248f512ceSopenharmony_ci } 146348f512ceSopenharmony_ci if (this.page === 9 && this.ds.length > 126) { 146448f512ceSopenharmony_ci this.labelDiv.appendChild(this.createChartLegend(this.ds[this.ds.length - 1])); 146548f512ceSopenharmony_ci } 146648f512ceSopenharmony_ci } 146748f512ceSopenharmony_ci this.pageDiv.innerText = `${this.page + 1}/${this.totalPage}`; 146848f512ceSopenharmony_ci } 146948f512ceSopenharmony_ci 147048f512ceSopenharmony_ci previousPage() { 147148f512ceSopenharmony_ci if (this.page > 0) { 147248f512ceSopenharmony_ci this.page = this.page - 1; 147348f512ceSopenharmony_ci } 147448f512ceSopenharmony_ci this.addChartLegend(); 147548f512ceSopenharmony_ci this.updateOptionStatus(); 147648f512ceSopenharmony_ci } 147748f512ceSopenharmony_ci 147848f512ceSopenharmony_ci nextPage() { 147948f512ceSopenharmony_ci if (this.page < this.totalPage - 1) { 148048f512ceSopenharmony_ci this.page = this.page + 1; 148148f512ceSopenharmony_ci } 148248f512ceSopenharmony_ci this.addChartLegend(); 148348f512ceSopenharmony_ci this.updateOptionStatus(); 148448f512ceSopenharmony_ci } 148548f512ceSopenharmony_ci 148648f512ceSopenharmony_ci updateOptionStatus() { 148748f512ceSopenharmony_ci if (this.page === 0) { 148848f512ceSopenharmony_ci this.previousBt.setAttribute('disabled','true'); 148948f512ceSopenharmony_ci this.previousBt.style.color = '#999'; 149048f512ceSopenharmony_ci } else { 149148f512ceSopenharmony_ci this.previousBt.style.color = '#42b983'; 149248f512ceSopenharmony_ci this.previousBt.removeAttribute('disabled'); 149348f512ceSopenharmony_ci } 149448f512ceSopenharmony_ci if (this.page + 1 === this.totalPage) { 149548f512ceSopenharmony_ci this.nextBt.style.color = '#999'; 149648f512ceSopenharmony_ci this.nextBt.setAttribute('disabled','true'); 149748f512ceSopenharmony_ci } else { 149848f512ceSopenharmony_ci this.nextBt.style.color = '#42b983'; 149948f512ceSopenharmony_ci this.nextBt.removeAttribute('disabled'); 150048f512ceSopenharmony_ci } 150148f512ceSopenharmony_ci } 150248f512ceSopenharmony_ci 150348f512ceSopenharmony_ci createChartLegend(item) { 150448f512ceSopenharmony_ci let legend = document.createElement('div'); 150548f512ceSopenharmony_ci legend.style.display = 'flex'; 150648f512ceSopenharmony_ci legend.style.alignItems = 'center'; 150748f512ceSopenharmony_ci legend.style.marginBottom = '5px'; 150848f512ceSopenharmony_ci legend.style.cursor = 'pointer'; 150948f512ceSopenharmony_ci let icon = document.createElement('div'); 151048f512ceSopenharmony_ci icon.style.backgroundColor = item.color; 151148f512ceSopenharmony_ci icon.style.borderRadius = '5px'; 151248f512ceSopenharmony_ci icon.style.width = '10px'; 151348f512ceSopenharmony_ci icon.style.height = '10px'; 151448f512ceSopenharmony_ci icon.style.marginRight = '10px'; 151548f512ceSopenharmony_ci let span = document.createElement('span'); 151648f512ceSopenharmony_ci span.style.fontSize = '14px'; 151748f512ceSopenharmony_ci span.style.width = '800px'; 151848f512ceSopenharmony_ci span.style.whiteSpace = 'nowrap'; 151948f512ceSopenharmony_ci span.style.textOverflow = 'ellipsis'; 152048f512ceSopenharmony_ci span.style.overflow = 'hidden'; 152148f512ceSopenharmony_ci span.innerText = item.name; 152248f512ceSopenharmony_ci legend.appendChild(icon); 152348f512ceSopenharmony_ci legend.appendChild(span); 152448f512ceSopenharmony_ci legend.addEventListener('mouseover',e => { 152548f512ceSopenharmony_ci this.selectItem = item; 152648f512ceSopenharmony_ci this.renderChart(); 152748f512ceSopenharmony_ci }); 152848f512ceSopenharmony_ci legend.addEventListener('click',e => { 152948f512ceSopenharmony_ci this.selectItem = item; 153048f512ceSopenharmony_ci this.mouseClick(e); 153148f512ceSopenharmony_ci }); 153248f512ceSopenharmony_ci legend.addEventListener('mouseout',e => { 153348f512ceSopenharmony_ci this.selectItem = undefined; 153448f512ceSopenharmony_ci this.renderChart(); 153548f512ceSopenharmony_ci }); 153648f512ceSopenharmony_ci return legend; 153748f512ceSopenharmony_ci } 153848f512ceSopenharmony_ci 153948f512ceSopenharmony_ci colorRgbWithAlpha(sColor) { 154048f512ceSopenharmony_ci let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; 154148f512ceSopenharmony_ci sColor = sColor.toLowerCase(); 154248f512ceSopenharmony_ci if (sColor && reg.test(sColor)) { 154348f512ceSopenharmony_ci if (sColor.length === 4) { 154448f512ceSopenharmony_ci let sColorNew = '#'; 154548f512ceSopenharmony_ci for (let i=1; i<4; i+=1) { 154648f512ceSopenharmony_ci sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1)); 154748f512ceSopenharmony_ci } 154848f512ceSopenharmony_ci sColor = sColorNew; 154948f512ceSopenharmony_ci } 155048f512ceSopenharmony_ci // 处理六位的颜色值 155148f512ceSopenharmony_ci let sColorChange = []; 155248f512ceSopenharmony_ci for (let i=1; i<7; i+=2) { 155348f512ceSopenharmony_ci sColorChange.push(parseInt('0x'+sColor.slice(i,i+2))); 155448f512ceSopenharmony_ci } 155548f512ceSopenharmony_ci sColorChange.push(0.6); 155648f512ceSopenharmony_ci return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]},${sColorChange[3]})`; 155748f512ceSopenharmony_ci } else { 155848f512ceSopenharmony_ci return sColor; 155948f512ceSopenharmony_ci } 156048f512ceSopenharmony_ci }; 156148f512ceSopenharmony_ci } 156248f512ceSopenharmony_ci if (!customElements.get('lit-pie-chart')) { 156348f512ceSopenharmony_ci customElements.define('lit-pie-chart', LitPieChart); 156448f512ceSopenharmony_ci } 156548f512ceSopenharmony_ci 156648f512ceSopenharmony_ci class LitSelect extends HTMLElement { 156748f512ceSopenharmony_ci static get observedAttributes() { 156848f512ceSopenharmony_ci return [ 156948f512ceSopenharmony_ci 'value',// 默认值 157048f512ceSopenharmony_ci 'default-value',// 默认值 157148f512ceSopenharmony_ci 'placeholder',//placeholder 157248f512ceSopenharmony_ci 'disabled', 157348f512ceSopenharmony_ci 'loading',// 是否处于加载状态 157448f512ceSopenharmony_ci 'allow-clear',// 是否允许清除 157548f512ceSopenharmony_ci 'show-search',// 是否允许搜索 157648f512ceSopenharmony_ci 'list-height',// 设置弹窗滚动高度 默认256px 157748f512ceSopenharmony_ci 'border',// 是否显示边框 157848f512ceSopenharmony_ci 'mode',// mode='multiple'多选 157948f512ceSopenharmony_ci ]; 158048f512ceSopenharmony_ci } 158148f512ceSopenharmony_ci 158248f512ceSopenharmony_ci get value() { 158348f512ceSopenharmony_ci return this.getAttribute('value') || this.defaultValue; 158448f512ceSopenharmony_ci } 158548f512ceSopenharmony_ci 158648f512ceSopenharmony_ci set value(value) { 158748f512ceSopenharmony_ci this.setAttribute('value', value); 158848f512ceSopenharmony_ci } 158948f512ceSopenharmony_ci 159048f512ceSopenharmony_ci get border() { 159148f512ceSopenharmony_ci return this.getAttribute('border') || 'true'; 159248f512ceSopenharmony_ci } 159348f512ceSopenharmony_ci 159448f512ceSopenharmony_ci set border(value) { 159548f512ceSopenharmony_ci if (value) { 159648f512ceSopenharmony_ci this.setAttribute('border', 'true'); 159748f512ceSopenharmony_ci } else { 159848f512ceSopenharmony_ci this.setAttribute('border', 'false'); 159948f512ceSopenharmony_ci } 160048f512ceSopenharmony_ci } 160148f512ceSopenharmony_ci 160248f512ceSopenharmony_ci get listHeight() { 160348f512ceSopenharmony_ci return this.getAttribute('list-height') || '256px'; 160448f512ceSopenharmony_ci } 160548f512ceSopenharmony_ci 160648f512ceSopenharmony_ci set listHeight(value) { 160748f512ceSopenharmony_ci this.setAttribute('list-height', value); 160848f512ceSopenharmony_ci } 160948f512ceSopenharmony_ci 161048f512ceSopenharmony_ci get defaultPlaceholder() { 161148f512ceSopenharmony_ci return this.getAttribute('placeholder') || '请选择'; 161248f512ceSopenharmony_ci } 161348f512ceSopenharmony_ci 161448f512ceSopenharmony_ci get showSearch() { 161548f512ceSopenharmony_ci return this.hasAttribute('show-search'); 161648f512ceSopenharmony_ci } 161748f512ceSopenharmony_ci 161848f512ceSopenharmony_ci set defaultValue(value) { 161948f512ceSopenharmony_ci this.setAttribute('default-value', value); 162048f512ceSopenharmony_ci } 162148f512ceSopenharmony_ci 162248f512ceSopenharmony_ci get defaultValue() { 162348f512ceSopenharmony_ci return this.getAttribute('default-value') || ''; 162448f512ceSopenharmony_ci } 162548f512ceSopenharmony_ci 162648f512ceSopenharmony_ci set placeholder(value) { 162748f512ceSopenharmony_ci this.setAttribute('placeholder', value); 162848f512ceSopenharmony_ci } 162948f512ceSopenharmony_ci 163048f512ceSopenharmony_ci get placeholder() { 163148f512ceSopenharmony_ci return this.getAttribute('placeholder') || this.defaultPlaceholder; 163248f512ceSopenharmony_ci } 163348f512ceSopenharmony_ci 163448f512ceSopenharmony_ci get loading() { 163548f512ceSopenharmony_ci return this.hasAttribute('loading'); 163648f512ceSopenharmony_ci } 163748f512ceSopenharmony_ci 163848f512ceSopenharmony_ci set loading(value) { 163948f512ceSopenharmony_ci if (value) { 164048f512ceSopenharmony_ci this.setAttribute('loading', ''); 164148f512ceSopenharmony_ci } else { 164248f512ceSopenharmony_ci this.removeAttribute('loading'); 164348f512ceSopenharmony_ci } 164448f512ceSopenharmony_ci } 164548f512ceSopenharmony_ci 164648f512ceSopenharmony_ci constructor() { 164748f512ceSopenharmony_ci super(); 164848f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 164948f512ceSopenharmony_ci shadowRoot.innerHTML = ` 165048f512ceSopenharmony_ci <style> 165148f512ceSopenharmony_ci:host{ 165248f512ceSopenharmony_ci display: inline-flex; 165348f512ceSopenharmony_ci position: relative; 165448f512ceSopenharmony_ci overflow: visible; 165548f512ceSopenharmony_ci cursor: pointer; 165648f512ceSopenharmony_ci transition: all .3s; 165748f512ceSopenharmony_ci border-radius: 2px; 165848f512ceSopenharmony_ci outline: none; 165948f512ceSopenharmony_ci -webkit-user-select:none ; 166048f512ceSopenharmony_ci -moz-user-select:none; 166148f512ceSopenharmony_ci user-select:none; 166248f512ceSopenharmony_ci /*width: 100%;*/ 166348f512ceSopenharmony_ci} 166448f512ceSopenharmony_ci:host(:not([border])), 166548f512ceSopenharmony_ci:host([border='true']) { 166648f512ceSopenharmony_ci border: 1px solid #dcdcdc; 166748f512ceSopenharmony_ci} 166848f512ceSopenharmony_ciinput{ 166948f512ceSopenharmony_ci border: 0; 167048f512ceSopenharmony_ci outline: none; 167148f512ceSopenharmony_ci background-color: transparent; 167248f512ceSopenharmony_ci cursor: pointer; 167348f512ceSopenharmony_ci transition: all .3s; 167448f512ceSopenharmony_ci -webkit-user-select:none ; 167548f512ceSopenharmony_ci -moz-user-select:none; 167648f512ceSopenharmony_ci user-select:none; 167748f512ceSopenharmony_ci display: inline-flex; 167848f512ceSopenharmony_ci} 167948f512ceSopenharmony_ci:host(:not([mode])) input{ 168048f512ceSopenharmony_ci width: 100%; 168148f512ceSopenharmony_ci} 168248f512ceSopenharmony_ci:host([mode]) input{ 168348f512ceSopenharmony_ci padding: 6px 0px; 168448f512ceSopenharmony_ci} 168548f512ceSopenharmony_ci:host([mode]) .root{ 168648f512ceSopenharmony_ci padding: 1px 8px; 168748f512ceSopenharmony_ci} 168848f512ceSopenharmony_ci.root{ 168948f512ceSopenharmony_ci position: relative; 169048f512ceSopenharmony_ci padding: 6px 8px; 169148f512ceSopenharmony_ci display: flex; 169248f512ceSopenharmony_ci align-items: center; 169348f512ceSopenharmony_ci justify-content: space-between; 169448f512ceSopenharmony_ci transition: all .3s; 169548f512ceSopenharmony_ci border-radius: 2px; 169648f512ceSopenharmony_ci background-color: #fff; 169748f512ceSopenharmony_ci outline: none; 169848f512ceSopenharmony_ci font-size: 1rem; 169948f512ceSopenharmony_ci z-index: 2; 170048f512ceSopenharmony_ci -webkit-user-select:none ; 170148f512ceSopenharmony_ci -moz-user-select:none; 170248f512ceSopenharmony_ci user-select:none; 170348f512ceSopenharmony_ci width: 100%; 170448f512ceSopenharmony_ci} 170548f512ceSopenharmony_ci.body{ 170648f512ceSopenharmony_ci max-height: ${this.listHeight}; 170748f512ceSopenharmony_ci position: absolute; 170848f512ceSopenharmony_ci top: 100%; 170948f512ceSopenharmony_ci z-index: 99; 171048f512ceSopenharmony_ci padding-top: 5px; 171148f512ceSopenharmony_ci margin-top: 2px; 171248f512ceSopenharmony_ci background-color: #fff; 171348f512ceSopenharmony_ci width: 100%; 171448f512ceSopenharmony_ci transition: all 0.2s; 171548f512ceSopenharmony_ci transform: scaleY(.6); 171648f512ceSopenharmony_ci visibility: hidden; 171748f512ceSopenharmony_ci opacity: 0; 171848f512ceSopenharmony_ci transform-origin: top center; 171948f512ceSopenharmony_ci display: block; 172048f512ceSopenharmony_ci flex-direction: column; 172148f512ceSopenharmony_ci box-shadow: 0 5px 15px 0px #00000033; 172248f512ceSopenharmony_ci border-radius: 2px; 172348f512ceSopenharmony_ci overflow: auto; 172448f512ceSopenharmony_ci} 172548f512ceSopenharmony_ci.icon{ 172648f512ceSopenharmony_ci pointer-events: none; 172748f512ceSopenharmony_ci} 172848f512ceSopenharmony_ci.noSelect{ 172948f512ceSopenharmony_ci -webkit-touch-callout:none; /* iOS Safari */ 173048f512ceSopenharmony_ci -webkit-user-select:none; 173148f512ceSopenharmony_ci -khtml-user-select:none; /* Konqueror */ 173248f512ceSopenharmony_ci -moz-user-select:none; /* Firefox */ 173348f512ceSopenharmony_ci -ms-user-select:none; /* Internet Explorer/Edge */ 173448f512ceSopenharmony_ci user-select:none; /* Non-prefixed version */ 173548f512ceSopenharmony_ci} 173648f512ceSopenharmony_ci 173748f512ceSopenharmony_ci:host(:not([border]):not([disabled]):focus), 173848f512ceSopenharmony_ci:host([border='true']:not([disabled]):focus), 173948f512ceSopenharmony_ci:host(:not([border]):not([disabled]):hover), 174048f512ceSopenharmony_ci:host([border='true']:not([disabled]):hover) { 174148f512ceSopenharmony_ci border:1px solid #42b983 174248f512ceSopenharmony_ci} 174348f512ceSopenharmony_ci:host(:not([disabled]):focus) .body, 174448f512ceSopenharmony_ci:host(:not([disabled]):focus-within) .body{ 174548f512ceSopenharmony_ci transform: scaleY(1); 174648f512ceSopenharmony_ci opacity: 1; 174748f512ceSopenharmony_ci z-index: 99; 174848f512ceSopenharmony_ci visibility: visible; 174948f512ceSopenharmony_ci} 175048f512ceSopenharmony_ci:host(:not([disabled]):focus) input{ 175148f512ceSopenharmony_ci color: #bebebe; 175248f512ceSopenharmony_ci} 175348f512ceSopenharmony_ci:host(:not([border])[disabled]) *, 175448f512ceSopenharmony_ci:host([border='true'][disabled]) *{ 175548f512ceSopenharmony_ci background-color: #f5f5f5; 175648f512ceSopenharmony_ci color: #b7b7b7; 175748f512ceSopenharmony_ci cursor: not-allowed; 175848f512ceSopenharmony_ci} 175948f512ceSopenharmony_ci:host([border='false'][disabled]) *{ 176048f512ceSopenharmony_ci color: #b7b7b7; 176148f512ceSopenharmony_ci cursor: not-allowed; 176248f512ceSopenharmony_ci} 176348f512ceSopenharmony_ci:host([loading]) .loading{ 176448f512ceSopenharmony_ci display: flex; 176548f512ceSopenharmony_ci} 176648f512ceSopenharmony_ci:host([loading]) .icon{ 176748f512ceSopenharmony_ci display: none; 176848f512ceSopenharmony_ci} 176948f512ceSopenharmony_ci:host(:not([loading])) .loading{ 177048f512ceSopenharmony_ci display: none; 177148f512ceSopenharmony_ci} 177248f512ceSopenharmony_ci:host(:not([loading])) .icon{ 177348f512ceSopenharmony_ci display: flex; 177448f512ceSopenharmony_ci} 177548f512ceSopenharmony_ci:host(:not([allow-clear])) .clear{ 177648f512ceSopenharmony_ci display: none; 177748f512ceSopenharmony_ci} 177848f512ceSopenharmony_ci.clear{ 177948f512ceSopenharmony_ci display: none; 178048f512ceSopenharmony_ci color: #bfbfbf; 178148f512ceSopenharmony_ci} 178248f512ceSopenharmony_ci.clear:hover{ 178348f512ceSopenharmony_ci color: #8c8c8c; 178448f512ceSopenharmony_ci} 178548f512ceSopenharmony_ci.search{ 178648f512ceSopenharmony_ci display: none; 178748f512ceSopenharmony_ci color: #bfbfbf; 178848f512ceSopenharmony_ci} 178948f512ceSopenharmony_ci.multipleRoot{ 179048f512ceSopenharmony_ci display: flex; 179148f512ceSopenharmony_ci flex-direction: column; 179248f512ceSopenharmony_ci flex-wrap: wrap; 179348f512ceSopenharmony_ci flex-flow: wrap; 179448f512ceSopenharmony_ci align-items: center; 179548f512ceSopenharmony_ci width: 100%; 179648f512ceSopenharmony_ci} 179748f512ceSopenharmony_ci.tag{ 179848f512ceSopenharmony_ci display: inline-flex; 179948f512ceSopenharmony_ci align-items: center; 180048f512ceSopenharmony_ci background-color: #f5f5f5; 180148f512ceSopenharmony_ci padding: 1px 4px; 180248f512ceSopenharmony_ci height: auto; 180348f512ceSopenharmony_ci font-size: .75rem; 180448f512ceSopenharmony_ci font-weight: bold; 180548f512ceSopenharmony_ci color: #242424; 180648f512ceSopenharmony_ci overflow: auto; 180748f512ceSopenharmony_ci position: relative; 180848f512ceSopenharmony_ci margin-right: 4px; 180948f512ceSopenharmony_ci margin-top: 1px; 181048f512ceSopenharmony_ci margin-bottom: 1px; 181148f512ceSopenharmony_ci} 181248f512ceSopenharmony_ci.tag-close{ 181348f512ceSopenharmony_ci font-size: .8rem; 181448f512ceSopenharmony_ci padding: 2px; 181548f512ceSopenharmony_ci margin-left: 0px; 181648f512ceSopenharmony_ci color: #999999; 181748f512ceSopenharmony_ci} 181848f512ceSopenharmony_ci.tag-close:hover{ 181948f512ceSopenharmony_ci color: #333; 182048f512ceSopenharmony_ci} 182148f512ceSopenharmony_ci 182248f512ceSopenharmony_ci</style> 182348f512ceSopenharmony_ci<div class="root noSelect" tabindex="0" hidefocus="true"> 182448f512ceSopenharmony_ci <div class="multipleRoot"> 182548f512ceSopenharmony_ci <input placeholder="${this.placeholder}" style="" autocomplete="off" ${this.showSearch ? '' : 'readonly'} tabindex="0"> 182648f512ceSopenharmony_ci </div><!--多选--> 182748f512ceSopenharmony_ci <lit-loading class="loading" size="12"></lit-loading> 182848f512ceSopenharmony_ci <!--<lit-icon class='icon' name='down' color="#c3c3c3"></lit-icon>--> 182948f512ceSopenharmony_ci <svg class='icon' viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;fill: #c3c3c3"> 183048f512ceSopenharmony_ci <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"></path> 183148f512ceSopenharmony_ci </svg> 183248f512ceSopenharmony_ci<!-- <lit-icon class="clear" name='close-circle-fill'></lit-icon>--> 183348f512ceSopenharmony_ci <svg class="clear" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;"> 183448f512ceSopenharmony_ci <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path> 183548f512ceSopenharmony_ci </svg> 183648f512ceSopenharmony_ci<!-- <lit-icon class="search" name='search'></lit-icon>--> 183748f512ceSopenharmony_ci <svg class="search" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;"> 183848f512ceSopenharmony_ci <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6c3.2 3.2 8.4 3.2 11.6 0l43.6-43.5c3.2-3.2 3.2-8.4 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path> 183948f512ceSopenharmony_ci </svg> 184048f512ceSopenharmony_ci</div> 184148f512ceSopenharmony_ci<div class="body"> 184248f512ceSopenharmony_ci <slot></slot> 184348f512ceSopenharmony_ci <slot name="footer"></slot> 184448f512ceSopenharmony_ci</div> 184548f512ceSopenharmony_ci `; 184648f512ceSopenharmony_ci } 184748f512ceSopenharmony_ci 184848f512ceSopenharmony_ci isMultiple() { 184948f512ceSopenharmony_ci return this.hasAttribute('mode') && this.getAttribute('mode') === 'multiple'; 185048f512ceSopenharmony_ci } 185148f512ceSopenharmony_ci 185248f512ceSopenharmony_ci newTag(value, text) { 185348f512ceSopenharmony_ci let tag = document.createElement('div'); 185448f512ceSopenharmony_ci let icon = document.createElement('lit-icon'); 185548f512ceSopenharmony_ci icon.classList.add('tag-close'); 185648f512ceSopenharmony_ci icon.name = 'close'; 185748f512ceSopenharmony_ci let span = document.createElement('span'); 185848f512ceSopenharmony_ci tag.classList.add('tag'); 185948f512ceSopenharmony_ci span.dataset['value'] = value; 186048f512ceSopenharmony_ci span.textContent = text; 186148f512ceSopenharmony_ci tag.append(span); 186248f512ceSopenharmony_ci tag.append(icon); 186348f512ceSopenharmony_ci icon.onclick = ev => { 186448f512ceSopenharmony_ci tag.parentElement.removeChild(tag); 186548f512ceSopenharmony_ci this.querySelector(`lit-select-option[value=${value}]`).removeAttribute('selected'); 186648f512ceSopenharmony_ci if (this.shadowRoot.querySelectorAll('.tag').length === 0) { 186748f512ceSopenharmony_ci this.inputElement.style.width = 'auto'; 186848f512ceSopenharmony_ci this.inputElement.placeholder = this.defaultPlaceholder; 186948f512ceSopenharmony_ci } 187048f512ceSopenharmony_ci ev.stopPropagation(); 187148f512ceSopenharmony_ci } 187248f512ceSopenharmony_ci tag.value = value; 187348f512ceSopenharmony_ci tag.dataset['value'] = value; 187448f512ceSopenharmony_ci tag.text = text; 187548f512ceSopenharmony_ci tag.dataset['text'] = text; 187648f512ceSopenharmony_ci return tag; 187748f512ceSopenharmony_ci } 187848f512ceSopenharmony_ci 187948f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 188048f512ceSopenharmony_ci connectedCallback() { 188148f512ceSopenharmony_ci this.tabIndex = 0;// 设置当前组件为可以获取焦点 188248f512ceSopenharmony_ci this.focused = false; 188348f512ceSopenharmony_ci this.inputElement = this.shadowRoot.querySelector('input'); 188448f512ceSopenharmony_ci this.inputElement.style.width = '100%'; 188548f512ceSopenharmony_ci this.clearElement = this.shadowRoot.querySelector('.clear'); 188648f512ceSopenharmony_ci this.iconElement = this.shadowRoot.querySelector('.icon'); 188748f512ceSopenharmony_ci this.searchElement = this.shadowRoot.querySelector('.search'); 188848f512ceSopenharmony_ci this.multipleRootElement = this.shadowRoot.querySelector('.multipleRoot'); 188948f512ceSopenharmony_ci // console.log(this.multipleRootElement); 189048f512ceSopenharmony_ci // 点击清理 清空input值，展示placeholder， 189148f512ceSopenharmony_ci this.clearElement.onclick = ev => { 189248f512ceSopenharmony_ci if (this.isMultiple()) { 189348f512ceSopenharmony_ci let delNodes = []; 189448f512ceSopenharmony_ci this.multipleRootElement.childNodes.forEach(a => { 189548f512ceSopenharmony_ci if (a.tagName === 'DIV') { 189648f512ceSopenharmony_ci delNodes.push(a); 189748f512ceSopenharmony_ci } 189848f512ceSopenharmony_ci }); 189948f512ceSopenharmony_ci for (let i = 0; i < delNodes.length; i++) { 190048f512ceSopenharmony_ci delNodes[i].remove(); 190148f512ceSopenharmony_ci } 190248f512ceSopenharmony_ci if (this.shadowRoot.querySelectorAll('.tag').length === 0) { 190348f512ceSopenharmony_ci this.inputElement.style.width = 'auto'; 190448f512ceSopenharmony_ci this.inputElement.placeholder = this.defaultPlaceholder; 190548f512ceSopenharmony_ci } 190648f512ceSopenharmony_ci } 190748f512ceSopenharmony_ci this.querySelectorAll('lit-select-option').forEach(a => a.removeAttribute('selected')); 190848f512ceSopenharmony_ci this.inputElement.value = ''; 190948f512ceSopenharmony_ci this.clearElement.style.display = 'none'; 191048f512ceSopenharmony_ci this.iconElement.style.display = 'flex'; 191148f512ceSopenharmony_ci this.blur(); 191248f512ceSopenharmony_ci ev.stopPropagation();// 这里不会因为点击清理而触发 选择栏目显示或者隐藏 191348f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onClear', {detail: ev}));// 向外派发清理事件 191448f512ceSopenharmony_ci } 191548f512ceSopenharmony_ci // 初始化时遍历所有的option节点 191648f512ceSopenharmony_ci this.initOptions(); 191748f512ceSopenharmony_ci // 当前控件点击时 如果时select本身 需要显示 或 隐藏选择栏目，通过this.focused变量控制（默认为false） 191848f512ceSopenharmony_ci this.onclick = ev => { 191948f512ceSopenharmony_ci if (ev.target.tagName === 'LIT-SELECT') { 192048f512ceSopenharmony_ci if (!this.focused) { 192148f512ceSopenharmony_ci this.inputElement.focus(); 192248f512ceSopenharmony_ci this.focused = true; 192348f512ceSopenharmony_ci } else { 192448f512ceSopenharmony_ci this.blur(); 192548f512ceSopenharmony_ci this.focused = false; 192648f512ceSopenharmony_ci } 192748f512ceSopenharmony_ci } 192848f512ceSopenharmony_ci }; 192948f512ceSopenharmony_ci this.onmouseover = this.onfocus = ev => { 193048f512ceSopenharmony_ci if (this.hasAttribute('allow-clear')) { 193148f512ceSopenharmony_ci if (this.inputElement.value.length > 0 || 193248f512ceSopenharmony_ci this.inputElement.placeholder !== this.defaultPlaceholder) { 193348f512ceSopenharmony_ci this.clearElement.style.display = 'flex'; 193448f512ceSopenharmony_ci this.iconElement.style.display = 'none'; 193548f512ceSopenharmony_ci } else { 193648f512ceSopenharmony_ci this.clearElement.style.display = 'none'; 193748f512ceSopenharmony_ci this.iconElement.style.display = 'flex'; 193848f512ceSopenharmony_ci } 193948f512ceSopenharmony_ci } 194048f512ceSopenharmony_ci }; 194148f512ceSopenharmony_ci this.onmouseout = this.onblur = ev => { 194248f512ceSopenharmony_ci if (this.hasAttribute('allow-clear')) { 194348f512ceSopenharmony_ci this.clearElement.style.display = 'none'; 194448f512ceSopenharmony_ci this.iconElement.style.display = 'flex'; 194548f512ceSopenharmony_ci } 194648f512ceSopenharmony_ci this.focused = false; 194748f512ceSopenharmony_ci } 194848f512ceSopenharmony_ci // 输入框获取焦点时，value值 暂存于 placeholder 然后value值清空 194948f512ceSopenharmony_ci // 这样值会以placeholder形式灰色展示，鼠标位于第一个字符 195048f512ceSopenharmony_ci this.inputElement.onfocus = ev => { 195148f512ceSopenharmony_ci if (this.hasAttribute('disabled')) return;// 如果控件处于disabled状态 直接忽略 195248f512ceSopenharmony_ci if (this.inputElement.value.length > 0) { 195348f512ceSopenharmony_ci this.inputElement.placeholder = this.inputElement.value; 195448f512ceSopenharmony_ci this.inputElement.value = ''; 195548f512ceSopenharmony_ci } 195648f512ceSopenharmony_ci if (this.hasAttribute('show-search')) {// 如果有show-search属性 需要显示放大镜，隐藏向下的箭头 195748f512ceSopenharmony_ci this.searchElement.style.display = 'flex'; 195848f512ceSopenharmony_ci this.iconElement.style.display = 'none'; 195948f512ceSopenharmony_ci } 196048f512ceSopenharmony_ci // input获取焦点时显示所有可选项，相当于清理了搜索结果 196148f512ceSopenharmony_ci this.querySelectorAll('lit-select-option').forEach(a => { 196248f512ceSopenharmony_ci a.style.display = 'flex'; 196348f512ceSopenharmony_ci }) 196448f512ceSopenharmony_ci } 196548f512ceSopenharmony_ci // 当输入框失去焦点的时候 placeholder 的值 保存到value上，input显示值 196648f512ceSopenharmony_ci this.inputElement.onblur = ev => { 196748f512ceSopenharmony_ci if (this.hasAttribute('disabled')) return;// 如果控件处于disabled状态 直接忽略 196848f512ceSopenharmony_ci if (this.isMultiple()) { 196948f512ceSopenharmony_ci // 如果有show-search属性 失去焦点需要 隐藏放大镜图标，显示默认的向下箭头图标 197048f512ceSopenharmony_ci if (this.hasAttribute('show-search')) { 197148f512ceSopenharmony_ci this.searchElement.style.display = 'none'; 197248f512ceSopenharmony_ci this.iconElement.style.display = 'flex'; 197348f512ceSopenharmony_ci } 197448f512ceSopenharmony_ci } else { 197548f512ceSopenharmony_ci // 如果placeholder为 请输入（默认值）不做处理 197648f512ceSopenharmony_ci if (this.inputElement.placeholder !== this.defaultPlaceholder) { 197748f512ceSopenharmony_ci this.inputElement.value = this.inputElement.placeholder; // placeholder 保存的值放入 value中 197848f512ceSopenharmony_ci this.inputElement.placeholder = this.defaultPlaceholder;// placeholder 值为 默认值（请输入） 197948f512ceSopenharmony_ci } 198048f512ceSopenharmony_ci // 如果有show-search属性 失去焦点需要 隐藏放大镜图标，显示默认的向下箭头图标 198148f512ceSopenharmony_ci if (this.hasAttribute('show-search')) { 198248f512ceSopenharmony_ci this.searchElement.style.display = 'none'; 198348f512ceSopenharmony_ci this.iconElement.style.display = 'flex'; 198448f512ceSopenharmony_ci } 198548f512ceSopenharmony_ci } 198648f512ceSopenharmony_ci } 198748f512ceSopenharmony_ci // 输入框每次文本变化 会匹配搜索的option 显示或者隐藏，达到搜索的效果 198848f512ceSopenharmony_ci this.inputElement.oninput = ev => { 198948f512ceSopenharmony_ci let els = [...this.querySelectorAll('lit-select-option')]; 199048f512ceSopenharmony_ci if (!ev.target.value) { 199148f512ceSopenharmony_ci els.forEach(a => a.style.display = 'flex'); 199248f512ceSopenharmony_ci } else { 199348f512ceSopenharmony_ci els.forEach(a => { 199448f512ceSopenharmony_ci let value = a.getAttribute('value'); 199548f512ceSopenharmony_ci if (value.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1 || 199648f512ceSopenharmony_ci a.textContent.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1) { 199748f512ceSopenharmony_ci a.style.display = 'flex'; 199848f512ceSopenharmony_ci } else { 199948f512ceSopenharmony_ci a.style.display = 'none'; 200048f512ceSopenharmony_ci } 200148f512ceSopenharmony_ci }) 200248f512ceSopenharmony_ci } 200348f512ceSopenharmony_ci } 200448f512ceSopenharmony_ci // 输入框按下回车键，自动输入当前搜索出来的第一行，及display!='none'的第一个，搜索会隐藏其他行 200548f512ceSopenharmony_ci this.inputElement.onkeydown = ev => { 200648f512ceSopenharmony_ci if (ev.key === 'Backspace') { 200748f512ceSopenharmony_ci if (this.isMultiple()) { 200848f512ceSopenharmony_ci let tag = this.multipleRootElement.lastElementChild.previousElementSibling; 200948f512ceSopenharmony_ci if (tag) { 201048f512ceSopenharmony_ci console.log(tag.value); 201148f512ceSopenharmony_ci this.querySelector(`lit-select-option[value=${tag.value}]`).removeAttribute('selected'); 201248f512ceSopenharmony_ci tag.remove(); 201348f512ceSopenharmony_ci if (this.shadowRoot.querySelectorAll('.tag').length === 0) { 201448f512ceSopenharmony_ci this.inputElement.style.width = 'auto'; 201548f512ceSopenharmony_ci this.inputElement.placeholder = this.defaultPlaceholder; 201648f512ceSopenharmony_ci } 201748f512ceSopenharmony_ci } 201848f512ceSopenharmony_ci } else { 201948f512ceSopenharmony_ci this.clear(); 202048f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onClear', {detail: ev}));// 向外派发清理事件 202148f512ceSopenharmony_ci } 202248f512ceSopenharmony_ci } else if (ev.key === 'Enter') { 202348f512ceSopenharmony_ci let filter = 202448f512ceSopenharmony_ci [...this.querySelectorAll('lit-select-option')].filter(a => a.style.display !== 'none'); 202548f512ceSopenharmony_ci if (filter.length > 0) { 202648f512ceSopenharmony_ci this.inputElement.value = filter[0].textContent; 202748f512ceSopenharmony_ci this.inputElement.placeholder = filter[0].textContent; 202848f512ceSopenharmony_ci this.blur(); 202948f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('change', { 203048f512ceSopenharmony_ci detail: { 203148f512ceSopenharmony_ci selected: true, 203248f512ceSopenharmony_ci value: filter[0].getAttribute('value'), 203348f512ceSopenharmony_ci text: filter[0].textContent 203448f512ceSopenharmony_ci } 203548f512ceSopenharmony_ci }));// 向外层派发change事件，返回当前选中项 203648f512ceSopenharmony_ci } 203748f512ceSopenharmony_ci } 203848f512ceSopenharmony_ci }; 203948f512ceSopenharmony_ci } 204048f512ceSopenharmony_ci 204148f512ceSopenharmony_ci initOptions() { 204248f512ceSopenharmony_ci this.querySelectorAll('lit-select-option').forEach(a => { 204348f512ceSopenharmony_ci // 如果节点的值为 当前控件的默认值 defalut-value则 显示该值对应的option文本 204448f512ceSopenharmony_ci if (this.isMultiple()) { 204548f512ceSopenharmony_ci a.setAttribute('check', ''); 204648f512ceSopenharmony_ci if (a.getAttribute('value') === this.defaultValue) { 204748f512ceSopenharmony_ci let tag = this.newTag(a.getAttribute('value'), a.textContent); 204848f512ceSopenharmony_ci this.multipleRootElement.insertBefore(tag, this.inputElement); 204948f512ceSopenharmony_ci this.inputElement.placeholder = ''; 205048f512ceSopenharmony_ci this.inputElement.value = ''; 205148f512ceSopenharmony_ci this.inputElement.style.width = '1px'; 205248f512ceSopenharmony_ci a.setAttribute('selected', ''); 205348f512ceSopenharmony_ci } 205448f512ceSopenharmony_ci } else { 205548f512ceSopenharmony_ci if (a.getAttribute('value') === this.defaultValue) { 205648f512ceSopenharmony_ci this.inputElement.value = a.textContent; 205748f512ceSopenharmony_ci a.setAttribute('selected', ''); 205848f512ceSopenharmony_ci } 205948f512ceSopenharmony_ci } 206048f512ceSopenharmony_ci // 每个option设置onSelected事件 接受当前点击的option 206148f512ceSopenharmony_ci a.addEventListener('onSelected', (e) => { 206248f512ceSopenharmony_ci // 所有option设置为未选中状态 206348f512ceSopenharmony_ci if (this.isMultiple()) {//多选 206448f512ceSopenharmony_ci if (a.hasAttribute('selected')) { 206548f512ceSopenharmony_ci let tag = this.shadowRoot.querySelector(`div[data-value=${e.detail.value}]`); 206648f512ceSopenharmony_ci tag.parentElement.removeChild(tag); 206748f512ceSopenharmony_ci e.detail.selected = false; 206848f512ceSopenharmony_ci } else { 206948f512ceSopenharmony_ci let tag = this.newTag(e.detail.value, e.detail.text); 207048f512ceSopenharmony_ci this.multipleRootElement.insertBefore(tag, this.inputElement); 207148f512ceSopenharmony_ci this.inputElement.placeholder = ''; 207248f512ceSopenharmony_ci this.inputElement.value = ''; 207348f512ceSopenharmony_ci this.inputElement.style.width = '1px'; 207448f512ceSopenharmony_ci } 207548f512ceSopenharmony_ci if (this.shadowRoot.querySelectorAll('.tag').length === 0) { 207648f512ceSopenharmony_ci this.inputElement.style.width = 'auto'; 207748f512ceSopenharmony_ci this.inputElement.placeholder = this.defaultPlaceholder; 207848f512ceSopenharmony_ci } 207948f512ceSopenharmony_ci this.inputElement.focus(); 208048f512ceSopenharmony_ci } else {// 单选 208148f512ceSopenharmony_ci [...this.querySelectorAll('lit-select-option')].forEach(a => a.removeAttribute('selected')); 208248f512ceSopenharmony_ci this.blur();// 失去焦点，隐藏选择栏目列表 208348f512ceSopenharmony_ci this.inputElement.value = e.detail.text; 208448f512ceSopenharmony_ci } 208548f512ceSopenharmony_ci // 设置当前option为选择状态 208648f512ceSopenharmony_ci if (a.hasAttribute('selected')) { 208748f512ceSopenharmony_ci a.removeAttribute('selected'); 208848f512ceSopenharmony_ci } else { 208948f512ceSopenharmony_ci a.setAttribute('selected', ''); 209048f512ceSopenharmony_ci } 209148f512ceSopenharmony_ci // 设置input的值为当前选择的文本 209248f512ceSopenharmony_ci // 向外层派发change事件，返回当前选中项 209348f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('change', {detail: e.detail})); 209448f512ceSopenharmony_ci }); 209548f512ceSopenharmony_ci }); 209648f512ceSopenharmony_ci } 209748f512ceSopenharmony_ci 209848f512ceSopenharmony_ci // js调用清理选项 209948f512ceSopenharmony_ci clear() { 210048f512ceSopenharmony_ci this.inputElement.value = ''; 210148f512ceSopenharmony_ci this.inputElement.placeholder = this.defaultPlaceholder; 210248f512ceSopenharmony_ci } 210348f512ceSopenharmony_ci 210448f512ceSopenharmony_ci // 重置为默认值 210548f512ceSopenharmony_ci reset() { 210648f512ceSopenharmony_ci this.querySelectorAll('lit-select-option').forEach(a => { 210748f512ceSopenharmony_ci // 如果节点的值为 当前控件的默认值 defalut-value则 显示该值对应的option文本 210848f512ceSopenharmony_ci [...this.querySelectorAll('lit-select-option')].forEach(a => a.removeAttribute('selected')); 210948f512ceSopenharmony_ci if (a.getAttribute('value') === this.defaultValue) { 211048f512ceSopenharmony_ci this.inputElement.value = a.textContent; 211148f512ceSopenharmony_ci a.setAttribute('selected', ''); 211248f512ceSopenharmony_ci } 211348f512ceSopenharmony_ci }); 211448f512ceSopenharmony_ci } 211548f512ceSopenharmony_ci 211648f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 211748f512ceSopenharmony_ci disconnectedCallback() { 211848f512ceSopenharmony_ci 211948f512ceSopenharmony_ci } 212048f512ceSopenharmony_ci 212148f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 212248f512ceSopenharmony_ci adoptedCallback() { 212348f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 212448f512ceSopenharmony_ci } 212548f512ceSopenharmony_ci 212648f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 212748f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 212848f512ceSopenharmony_ci if (name === 'value' && this.inputElement) { 212948f512ceSopenharmony_ci if (newValue) { 213048f512ceSopenharmony_ci [...this.querySelectorAll('lit-select-option')].forEach(a => { 213148f512ceSopenharmony_ci if (a.getAttribute('value') === newValue) { 213248f512ceSopenharmony_ci a.setAttribute('selected', ''); 213348f512ceSopenharmony_ci this.inputElement.value = a.textContent; 213448f512ceSopenharmony_ci } else { 213548f512ceSopenharmony_ci a.removeAttribute('selected'); 213648f512ceSopenharmony_ci } 213748f512ceSopenharmony_ci }); 213848f512ceSopenharmony_ci } else { 213948f512ceSopenharmony_ci this.clear(); 214048f512ceSopenharmony_ci } 214148f512ceSopenharmony_ci } 214248f512ceSopenharmony_ci } 214348f512ceSopenharmony_ci 214448f512ceSopenharmony_ci set dataSource(value) { 214548f512ceSopenharmony_ci value.forEach(a => { 214648f512ceSopenharmony_ci let option = document.createElement('lit-select-option'); 214748f512ceSopenharmony_ci option.setAttribute('value', a.key); 214848f512ceSopenharmony_ci option.textContent = a.val; 214948f512ceSopenharmony_ci this.append(option); 215048f512ceSopenharmony_ci }) 215148f512ceSopenharmony_ci this.initOptions(); 215248f512ceSopenharmony_ci } 215348f512ceSopenharmony_ci 215448f512ceSopenharmony_ci } 215548f512ceSopenharmony_ci if (!customElements.get('lit-select')) { 215648f512ceSopenharmony_ci customElements.define('lit-select', LitSelect); 215748f512ceSopenharmony_ci } 215848f512ceSopenharmony_ci 215948f512ceSopenharmony_ci class LitSelectGroup extends HTMLElement { 216048f512ceSopenharmony_ci static get observedAttributes() { 216148f512ceSopenharmony_ci return ['label']; 216248f512ceSopenharmony_ci } 216348f512ceSopenharmony_ci 216448f512ceSopenharmony_ci get label() { 216548f512ceSopenharmony_ci return this.getAttribute('label') || ''; 216648f512ceSopenharmony_ci } 216748f512ceSopenharmony_ci 216848f512ceSopenharmony_ci set label(value) { 216948f512ceSopenharmony_ci this.setAttribute('label', value); 217048f512ceSopenharmony_ci } 217148f512ceSopenharmony_ci 217248f512ceSopenharmony_ci constructor() { 217348f512ceSopenharmony_ci super(); 217448f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 217548f512ceSopenharmony_ci shadowRoot.innerHTML = ` 217648f512ceSopenharmony_ci <style> 217748f512ceSopenharmony_ci :host{ 217848f512ceSopenharmony_ci display: flex; 217948f512ceSopenharmony_ci flex-direction: column; 218048f512ceSopenharmony_ci /*padding-left: 10px;*/ 218148f512ceSopenharmony_ci } 218248f512ceSopenharmony_ci .lab{ 218348f512ceSopenharmony_ci padding: 8px 10px 8px 10px; 218448f512ceSopenharmony_ci font-size: .5rem; 218548f512ceSopenharmony_ci color: #8c8c8c; 218648f512ceSopenharmony_ci } 218748f512ceSopenharmony_ci ::slotted(lit-select-option) { 218848f512ceSopenharmony_ci padding-left: 20px; 218948f512ceSopenharmony_ci } 219048f512ceSopenharmony_ci </style> 219148f512ceSopenharmony_ci <div class='lab'>${this.label}</div> 219248f512ceSopenharmony_ci <slot></slot> 219348f512ceSopenharmony_ci `; 219448f512ceSopenharmony_ci } 219548f512ceSopenharmony_ci 219648f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 219748f512ceSopenharmony_ci connectedCallback() { 219848f512ceSopenharmony_ci 219948f512ceSopenharmony_ci } 220048f512ceSopenharmony_ci 220148f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 220248f512ceSopenharmony_ci disconnectedCallback() { 220348f512ceSopenharmony_ci 220448f512ceSopenharmony_ci } 220548f512ceSopenharmony_ci 220648f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 220748f512ceSopenharmony_ci adoptedCallback() { 220848f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 220948f512ceSopenharmony_ci } 221048f512ceSopenharmony_ci 221148f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 221248f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 221348f512ceSopenharmony_ci 221448f512ceSopenharmony_ci } 221548f512ceSopenharmony_ci } 221648f512ceSopenharmony_ci if (!customElements.get('lit-select-group')) { 221748f512ceSopenharmony_ci customElements.define('lit-select-group', LitSelectGroup); 221848f512ceSopenharmony_ci } 221948f512ceSopenharmony_ci 222048f512ceSopenharmony_ci class LitSelectOption extends HTMLElement { 222148f512ceSopenharmony_ci static get observedAttributes() { 222248f512ceSopenharmony_ci return ['selected','disabled','check']; 222348f512ceSopenharmony_ci } 222448f512ceSopenharmony_ci 222548f512ceSopenharmony_ci constructor() { 222648f512ceSopenharmony_ci super(); 222748f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 222848f512ceSopenharmony_ci shadowRoot.innerHTML = ` 222948f512ceSopenharmony_ci <style> 223048f512ceSopenharmony_ci :host{ 223148f512ceSopenharmony_ci display: flex; 223248f512ceSopenharmony_ci padding: 8px 10px; 223348f512ceSopenharmony_ci transition: all .3s; 223448f512ceSopenharmony_ci color: #333; 223548f512ceSopenharmony_ci tab-index: -1; 223648f512ceSopenharmony_ci overflow: scroll; 223748f512ceSopenharmony_ci align-items: center; 223848f512ceSopenharmony_ci justify-content: space-between; 223948f512ceSopenharmony_ci } 224048f512ceSopenharmony_ci :host(:not([disabled])[selected]) { 224148f512ceSopenharmony_ci background-color: #e9f7fe; 224248f512ceSopenharmony_ci font-weight: bold; 224348f512ceSopenharmony_ci } 224448f512ceSopenharmony_ci :host(:not([disabled]):not([selected]):hover) { 224548f512ceSopenharmony_ci background-color: #f5f5f5; 224648f512ceSopenharmony_ci } 224748f512ceSopenharmony_ci :host([disabled]) { 224848f512ceSopenharmony_ci cursor: not-allowed; 224948f512ceSopenharmony_ci color: #bfbfbf; 225048f512ceSopenharmony_ci } 225148f512ceSopenharmony_ci :host([selected][check]) .check{ 225248f512ceSopenharmony_ci display: flex; 225348f512ceSopenharmony_ci } 225448f512ceSopenharmony_ci :host(:not([selected])) .check{ 225548f512ceSopenharmony_ci display: none; 225648f512ceSopenharmony_ci } 225748f512ceSopenharmony_ci :host(:not([check])) .check{ 225848f512ceSopenharmony_ci display: none; 225948f512ceSopenharmony_ci } 226048f512ceSopenharmony_ci </style> 226148f512ceSopenharmony_ci <slot></slot> 226248f512ceSopenharmony_ci <lit-icon class='check' name='check'></lit-icon> 226348f512ceSopenharmony_ci `; 226448f512ceSopenharmony_ci } 226548f512ceSopenharmony_ci 226648f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 226748f512ceSopenharmony_ci connectedCallback() { 226848f512ceSopenharmony_ci if (!this.hasAttribute('disabled')) { 226948f512ceSopenharmony_ci this.onclick=ev => { 227048f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onSelected', { 227148f512ceSopenharmony_ci detail: { 227248f512ceSopenharmony_ci selected:true, 227348f512ceSopenharmony_ci value: this.getAttribute('value'), 227448f512ceSopenharmony_ci text: this.textContent 227548f512ceSopenharmony_ci } 227648f512ceSopenharmony_ci })); 227748f512ceSopenharmony_ci }; 227848f512ceSopenharmony_ci } 227948f512ceSopenharmony_ci } 228048f512ceSopenharmony_ci 228148f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 228248f512ceSopenharmony_ci disconnectedCallback() { 228348f512ceSopenharmony_ci 228448f512ceSopenharmony_ci } 228548f512ceSopenharmony_ci 228648f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 228748f512ceSopenharmony_ci adoptedCallback() { 228848f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 228948f512ceSopenharmony_ci } 229048f512ceSopenharmony_ci 229148f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 229248f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 229348f512ceSopenharmony_ci 229448f512ceSopenharmony_ci } 229548f512ceSopenharmony_ci } 229648f512ceSopenharmony_ci if (!customElements.get('lit-select-option')) { 229748f512ceSopenharmony_ci customElements.define('lit-select-option', LitSelectOption); 229848f512ceSopenharmony_ci } 229948f512ceSopenharmony_ci 230048f512ceSopenharmony_ci class LitTable extends HTMLElement { 230148f512ceSopenharmony_ci static get observedAttributes() { 230248f512ceSopenharmony_ci return ['scroll-y', 'selectable','defaultOrderColumn']; 230348f512ceSopenharmony_ci } 230448f512ceSopenharmony_ci 230548f512ceSopenharmony_ci get selectable() { 230648f512ceSopenharmony_ci return this.hasAttribute('selectable'); 230748f512ceSopenharmony_ci } 230848f512ceSopenharmony_ci 230948f512ceSopenharmony_ci set selectable(value) { 231048f512ceSopenharmony_ci if (value) { 231148f512ceSopenharmony_ci this.setAttribute('selectable', ''); 231248f512ceSopenharmony_ci } else { 231348f512ceSopenharmony_ci this.removeAttribute('selectable'); 231448f512ceSopenharmony_ci } 231548f512ceSopenharmony_ci } 231648f512ceSopenharmony_ci 231748f512ceSopenharmony_ci get scrollY() { 231848f512ceSopenharmony_ci return this.getAttribute('scroll-y') || 'auto'; 231948f512ceSopenharmony_ci } 232048f512ceSopenharmony_ci 232148f512ceSopenharmony_ci set scrollY(value) { 232248f512ceSopenharmony_ci this.setAttribute('scroll-y', value); 232348f512ceSopenharmony_ci } 232448f512ceSopenharmony_ci 232548f512ceSopenharmony_ci get dataSource() { 232648f512ceSopenharmony_ci return this.ds || []; 232748f512ceSopenharmony_ci } 232848f512ceSopenharmony_ci 232948f512ceSopenharmony_ci set dataSource(value) { 233048f512ceSopenharmony_ci this.ds = value; 233148f512ceSopenharmony_ci if (this.hasAttribute('tree')) { 233248f512ceSopenharmony_ci this.renderTreeTable(); 233348f512ceSopenharmony_ci } else { 233448f512ceSopenharmony_ci this.renderTable(); 233548f512ceSopenharmony_ci } 233648f512ceSopenharmony_ci } 233748f512ceSopenharmony_ci 233848f512ceSopenharmony_ci constructor() { 233948f512ceSopenharmony_ci super(); 234048f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 234148f512ceSopenharmony_ci shadowRoot.innerHTML = ` 234248f512ceSopenharmony_ci<style> 234348f512ceSopenharmony_ci:host{ 234448f512ceSopenharmony_ci display: grid; 234548f512ceSopenharmony_ci grid-template-columns: repeat(1,1fr); 234648f512ceSopenharmony_ci overflow: auto; 234748f512ceSopenharmony_ci /*width: 500px;*/ 234848f512ceSopenharmony_ci width: 100%; 234948f512ceSopenharmony_ci height: 100%; 235048f512ceSopenharmony_ci} 235148f512ceSopenharmony_ci.tr{ 235248f512ceSopenharmony_ci display: grid; 235348f512ceSopenharmony_ci transition: all .3s; 235448f512ceSopenharmony_ci} 235548f512ceSopenharmony_ci.tr:nth-of-type(even) { 235648f512ceSopenharmony_ci background-color: #fcfcfc; 235748f512ceSopenharmony_ci} 235848f512ceSopenharmony_ci/*.tr:not(:last-of-type):not(:first-of-type) {*/ 235948f512ceSopenharmony_ci/* border-top: 1px solid #f0f0f0;*/ 236048f512ceSopenharmony_ci/*}*/ 236148f512ceSopenharmony_ci/*.tr:last-of-type{*/ 236248f512ceSopenharmony_ci/* border-top: 1px solid #f0f0f0;*/ 236348f512ceSopenharmony_ci/* border-bottom: 1px solid #f0f0f0;*/ 236448f512ceSopenharmony_ci/*}*/ 236548f512ceSopenharmony_ci.tr{ 236648f512ceSopenharmony_ci background-color: #fff; 236748f512ceSopenharmony_ci} 236848f512ceSopenharmony_ci.tr:hover{ 236948f512ceSopenharmony_ci background-color: #f3f3f3; /*antd #fafafa 42b983*/ 237048f512ceSopenharmony_ci} 237148f512ceSopenharmony_ci.td{ 237248f512ceSopenharmony_ci background-color: inherit; 237348f512ceSopenharmony_ci box-sizing: border-box; 237448f512ceSopenharmony_ci padding: 10px; 237548f512ceSopenharmony_ci display: flex; 237648f512ceSopenharmony_ci justify-content: flex-start; 237748f512ceSopenharmony_ci align-items: center; 237848f512ceSopenharmony_ci width: 100%; 237948f512ceSopenharmony_ci height: auto; 238048f512ceSopenharmony_ci /*overflow: auto;*/ 238148f512ceSopenharmony_ci border-left: 1px solid #f0f0f0; 238248f512ceSopenharmony_ci} 238348f512ceSopenharmony_ci.td-order{ 238448f512ceSopenharmony_ci /*background: green;*/ 238548f512ceSopenharmony_ci} 238648f512ceSopenharmony_ci.td-order:before{ 238748f512ceSopenharmony_ci 238848f512ceSopenharmony_ci} 238948f512ceSopenharmony_ci.td:last-of-type{ 239048f512ceSopenharmony_ci border-right: 1px solid #f0f0f0; 239148f512ceSopenharmony_ci} 239248f512ceSopenharmony_ci.table{ 239348f512ceSopenharmony_ci color: #262626; 239448f512ceSopenharmony_ci} 239548f512ceSopenharmony_ci:host(:not([noheader])) .thead{ 239648f512ceSopenharmony_ci display: grid; 239748f512ceSopenharmony_ci position: sticky; 239848f512ceSopenharmony_ci top: 0; 239948f512ceSopenharmony_ci font-weight: bold; 240048f512ceSopenharmony_ci font-size: .9rem; 240148f512ceSopenharmony_ci color: #fff; 240248f512ceSopenharmony_ci /*width: 100%;*/ 240348f512ceSopenharmony_ci background-color: #42b983; 240448f512ceSopenharmony_ci z-index: 1; 240548f512ceSopenharmony_ci} 240648f512ceSopenharmony_ci/*配置有 noheader 表示不限时表头,tbody上添加 border-top*/ 240748f512ceSopenharmony_ci:host([noheader]) .thead{ 240848f512ceSopenharmony_ci display: none; 240948f512ceSopenharmony_ci position: sticky; 241048f512ceSopenharmony_ci top: 0; 241148f512ceSopenharmony_ci font-weight: bold; 241248f512ceSopenharmony_ci font-size: .9rem; 241348f512ceSopenharmony_ci color: #fff; 241448f512ceSopenharmony_ci /*width: 100%;*/ 241548f512ceSopenharmony_ci background-color: #42b983; 241648f512ceSopenharmony_ci z-index: 1; 241748f512ceSopenharmony_ci} 241848f512ceSopenharmony_ci:host([noheader]) .tbody{ 241948f512ceSopenharmony_ci border-top: 1px solid #f0f0f0; 242048f512ceSopenharmony_ci} 242148f512ceSopenharmony_ci 242248f512ceSopenharmony_ci.tbody{ 242348f512ceSopenharmony_ci width: 100%; 242448f512ceSopenharmony_ci height: ${this.scrollY}; 242548f512ceSopenharmony_ci display: grid; 242648f512ceSopenharmony_ci grid-template-columns: 1fr; 242748f512ceSopenharmony_ci row-gap: 1px; 242848f512ceSopenharmony_ci column-gap: 1px; 242948f512ceSopenharmony_ci background-color: #f0f0f0; 243048f512ceSopenharmony_ci border-bottom: 1px solid #f0f0f0; 243148f512ceSopenharmony_ci /*overflow: auto;*/ 243248f512ceSopenharmony_ci ${this.scrollY === 'auto' ? '' : 'overflow-y: auto'}; 243348f512ceSopenharmony_ci} 243448f512ceSopenharmony_ci.th{ 243548f512ceSopenharmony_ci display: grid; 243648f512ceSopenharmony_ci background-color: #42b983; 243748f512ceSopenharmony_ci /*position: sticky;*/ 243848f512ceSopenharmony_ci /*top: 0;*/ 243948f512ceSopenharmony_ci} 244048f512ceSopenharmony_ci 244148f512ceSopenharmony_ci.tree-icon{ 244248f512ceSopenharmony_ci font-size: 1.2rem; 244348f512ceSopenharmony_ci width: 20px; 244448f512ceSopenharmony_ci height: 20px; 244548f512ceSopenharmony_ci padding-right: 5px; 244648f512ceSopenharmony_ci padding-left: 5px; 244748f512ceSopenharmony_ci cursor: pointer; 244848f512ceSopenharmony_ci} 244948f512ceSopenharmony_ci.tree-icon:hover{ 245048f512ceSopenharmony_ci color: #42b983; 245148f512ceSopenharmony_ci} 245248f512ceSopenharmony_ci.row-checkbox,row-checkbox-all{ 245348f512ceSopenharmony_ci 245448f512ceSopenharmony_ci} 245548f512ceSopenharmony_ci 245648f512ceSopenharmony_ci.up-svg{ 245748f512ceSopenharmony_ci position: absolute; 245848f512ceSopenharmony_ci right: 5px; 245948f512ceSopenharmony_ci top: 8px; 246048f512ceSopenharmony_ci width: 15px; 246148f512ceSopenharmony_ci height: 15px; 246248f512ceSopenharmony_ci} 246348f512ceSopenharmony_ci.down-svg{ 246448f512ceSopenharmony_ci position: absolute; 246548f512ceSopenharmony_ci right: 5px; 246648f512ceSopenharmony_ci bottom: 8px; 246748f512ceSopenharmony_ci width: 15px; 246848f512ceSopenharmony_ci height: 15px; 246948f512ceSopenharmony_ci} 247048f512ceSopenharmony_ci</style> 247148f512ceSopenharmony_ci 247248f512ceSopenharmony_ci<slot id="slot" style="display: none"></slot> 247348f512ceSopenharmony_ci<div class="table"> 247448f512ceSopenharmony_ci <div class="thead"></div> 247548f512ceSopenharmony_ci <div class="tbody"></div> 247648f512ceSopenharmony_ci</div> 247748f512ceSopenharmony_ci `; 247848f512ceSopenharmony_ci } 247948f512ceSopenharmony_ci 248048f512ceSopenharmony_ci /*根据column[]嵌套结构得到 grid css布局描述*/ 248148f512ceSopenharmony_ci 248248f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 248348f512ceSopenharmony_ci connectedCallback() { 248448f512ceSopenharmony_ci this.st = this.shadowRoot.querySelector('#slot'); 248548f512ceSopenharmony_ci this.tableElement = this.shadowRoot.querySelector('.table'); 248648f512ceSopenharmony_ci this.theadElement = this.shadowRoot.querySelector('.thead'); 248748f512ceSopenharmony_ci this.tbodyElement = this.shadowRoot.querySelector('.tbody'); 248848f512ceSopenharmony_ci this.tableColumns = this.querySelectorAll('lit-table-column'); 248948f512ceSopenharmony_ci this.colCount = this.tableColumns.length; 249048f512ceSopenharmony_ci this.st.addEventListener('slotchange', (event) => { 249148f512ceSopenharmony_ci this.theadElement.innerHTML = ''; 249248f512ceSopenharmony_ci setTimeout(() => { 249348f512ceSopenharmony_ci this.columns = this.st.assignedElements(); 249448f512ceSopenharmony_ci 249548f512ceSopenharmony_ci let rowElement = document.createElement('div'); 249648f512ceSopenharmony_ci rowElement.classList.add('th'); 249748f512ceSopenharmony_ci if (this.selectable) { 249848f512ceSopenharmony_ci let box = document.createElement('div'); 249948f512ceSopenharmony_ci box.style.display = 'flex'; 250048f512ceSopenharmony_ci box.style.justifyContent = 'center'; 250148f512ceSopenharmony_ci box.style.alignItems = 'center'; 250248f512ceSopenharmony_ci box.style.gridArea = '_checkbox_'; 250348f512ceSopenharmony_ci box.classList.add('td'); 250448f512ceSopenharmony_ci box.style.backgroundColor = '#ffffff66'; 250548f512ceSopenharmony_ci let checkbox = document.createElement('lit-checkbox'); 250648f512ceSopenharmony_ci checkbox.classList.add('row-checkbox-all'); 250748f512ceSopenharmony_ci checkbox.onchange = e => { 250848f512ceSopenharmony_ci this.shadowRoot.querySelectorAll('.row-checkbox').forEach(a => a.checked = e.detail.checked); 250948f512ceSopenharmony_ci if (e.detail.checked) { 251048f512ceSopenharmony_ci this.shadowRoot.querySelectorAll('.tr').forEach(a => a.setAttribute('checked', '')); 251148f512ceSopenharmony_ci } else { 251248f512ceSopenharmony_ci this.shadowRoot.querySelectorAll('.tr').forEach(a => a.removeAttribute('checked')); 251348f512ceSopenharmony_ci } 251448f512ceSopenharmony_ci }; 251548f512ceSopenharmony_ci 251648f512ceSopenharmony_ci box.appendChild(checkbox); 251748f512ceSopenharmony_ci rowElement.appendChild(box); 251848f512ceSopenharmony_ci } 251948f512ceSopenharmony_ci 252048f512ceSopenharmony_ci let area = [], gridTemplateColumns = []; 252148f512ceSopenharmony_ci let resolvingArea = (columns, x, y) => { 252248f512ceSopenharmony_ci columns.forEach((a, i) => { 252348f512ceSopenharmony_ci if (!area[y]) area[y] = []; 252448f512ceSopenharmony_ci let key = a.getAttribute('key') || a.getAttribute('title'); 252548f512ceSopenharmony_ci if (a.tagName === 'LIT-TABLE-GROUP') { 252648f512ceSopenharmony_ci let len = a.querySelectorAll('lit-table-column').length; 252748f512ceSopenharmony_ci let children = [...a.children].filter(a => a.tagName !== 'TEMPLATE'); 252848f512ceSopenharmony_ci if (children.length > 0) { 252948f512ceSopenharmony_ci resolvingArea(children, x, y + 1); 253048f512ceSopenharmony_ci } 253148f512ceSopenharmony_ci for (let j = 0; j < len; j++) { 253248f512ceSopenharmony_ci area[y][x] = {x, y, t: key}; 253348f512ceSopenharmony_ci x++; 253448f512ceSopenharmony_ci } 253548f512ceSopenharmony_ci let h = document.createElement('div'); 253648f512ceSopenharmony_ci h.classList.add('td'); 253748f512ceSopenharmony_ci h.style.justifyContent = a.getAttribute('align'); 253848f512ceSopenharmony_ci h.style.borderBottom = '1px solid #f0f0f0'; 253948f512ceSopenharmony_ci h.style.gridArea = key; 254048f512ceSopenharmony_ci h.innerText = a.title; 254148f512ceSopenharmony_ci if (a.hasAttribute('fixed')) { 254248f512ceSopenharmony_ci this.fixed(h, a.getAttribute('fixed'), '#42b983'); 254348f512ceSopenharmony_ci } 254448f512ceSopenharmony_ci rowElement.append(h); 254548f512ceSopenharmony_ci } else if (a.tagName === 'LIT-TABLE-COLUMN') { 254648f512ceSopenharmony_ci area[y][x] = {x, y, t: key}; 254748f512ceSopenharmony_ci x++; 254848f512ceSopenharmony_ci let h = document.createElement('div'); 254948f512ceSopenharmony_ci h.classList.add('td'); 255048f512ceSopenharmony_ci if (a.hasAttribute('order')) { 255148f512ceSopenharmony_ci h.sortType = 0; 255248f512ceSopenharmony_ci h.classList.add('td-order'); 255348f512ceSopenharmony_ci h.style.position = 'relative'; 255448f512ceSopenharmony_ci let NS = 'http://www.w3.org/2000/svg'; 255548f512ceSopenharmony_ci let upSvg = document.createElementNS(NS,'svg'); 255648f512ceSopenharmony_ci let upPath = document.createElementNS(NS,'path'); 255748f512ceSopenharmony_ci upSvg.setAttribute('fill', '#efefef'); 255848f512ceSopenharmony_ci upSvg.setAttribute('viewBox', '0 0 1024 1024'); 255948f512ceSopenharmony_ci upSvg.setAttribute('stroke', '#000000'); 256048f512ceSopenharmony_ci upSvg.classList.add('up-svg'); 256148f512ceSopenharmony_ci upPath.setAttribute('d', 'M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z'); 256248f512ceSopenharmony_ci 256348f512ceSopenharmony_ci upSvg.appendChild(upPath); 256448f512ceSopenharmony_ci let downSvg = document.createElementNS(NS,'svg'); 256548f512ceSopenharmony_ci let downPath = document.createElementNS(NS,'path'); 256648f512ceSopenharmony_ci downSvg.setAttribute('fill', '#efefef'); 256748f512ceSopenharmony_ci downSvg.setAttribute('viewBox', '0 0 1024 1024'); 256848f512ceSopenharmony_ci downSvg.setAttribute('stroke', '#efefef'); 256948f512ceSopenharmony_ci downSvg.classList.add('down-svg'); 257048f512ceSopenharmony_ci downPath.setAttribute('d', 'M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'); 257148f512ceSopenharmony_ci downSvg.appendChild(downPath); 257248f512ceSopenharmony_ci if (i === 0) { 257348f512ceSopenharmony_ci h.sortType = 2; // 默认以第一列 降序排序 作为默认排序 257448f512ceSopenharmony_ci upSvg.setAttribute('fill', '#efefef'); 257548f512ceSopenharmony_ci downSvg.setAttribute('fill', '#333'); 257648f512ceSopenharmony_ci } 257748f512ceSopenharmony_ci h.appendChild(upSvg); 257848f512ceSopenharmony_ci h.appendChild(downSvg); 257948f512ceSopenharmony_ci h.onclick = ev => { 258048f512ceSopenharmony_ci this.shadowRoot.querySelectorAll('.td-order svg').forEach(it=>{ 258148f512ceSopenharmony_ci it.setAttribute('fill', '#efefef'); 258248f512ceSopenharmony_ci it.setAttribute('fill', '#efefef'); 258348f512ceSopenharmony_ci it.sortType = 0; 258448f512ceSopenharmony_ci }); 258548f512ceSopenharmony_ci if (h.sortType === undefined || h.sortType === null) { 258648f512ceSopenharmony_ci h.sortType = 0; 258748f512ceSopenharmony_ci } else if (h.sortType === 2) { 258848f512ceSopenharmony_ci h.sortType = 0; 258948f512ceSopenharmony_ci } else { 259048f512ceSopenharmony_ci h.sortType += 1; 259148f512ceSopenharmony_ci } 259248f512ceSopenharmony_ci switch (h.sortType) { 259348f512ceSopenharmony_ci case 1: 259448f512ceSopenharmony_ci upSvg.setAttribute('fill', '#333'); 259548f512ceSopenharmony_ci downSvg.setAttribute('fill', '#efefef'); 259648f512ceSopenharmony_ci break; 259748f512ceSopenharmony_ci case 2: 259848f512ceSopenharmony_ci upSvg.setAttribute('fill', '#efefef'); 259948f512ceSopenharmony_ci downSvg.setAttribute('fill', '#333'); 260048f512ceSopenharmony_ci break; 260148f512ceSopenharmony_ci default: 260248f512ceSopenharmony_ci upSvg.setAttribute('fill', '#efefef'); 260348f512ceSopenharmony_ci downSvg.setAttribute('fill', '#efefef'); 260448f512ceSopenharmony_ci break; 260548f512ceSopenharmony_ci }; 260648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('ColumnClick', { 260748f512ceSopenharmony_ci detail: { 260848f512ceSopenharmony_ci sort: h.sortType, key: key 260948f512ceSopenharmony_ci }, composed: true 261048f512ceSopenharmony_ci })); 261148f512ceSopenharmony_ci }; 261248f512ceSopenharmony_ci } 261348f512ceSopenharmony_ci h.style.justifyContent = a.getAttribute('align'); 261448f512ceSopenharmony_ci gridTemplateColumns.push(a.getAttribute('width') || '1fr'); 261548f512ceSopenharmony_ci h.style.gridArea = key; 261648f512ceSopenharmony_ci let titleLabel = document.createElement('label'); 261748f512ceSopenharmony_ci titleLabel.textContent = a.title; 261848f512ceSopenharmony_ci h.appendChild(titleLabel); 261948f512ceSopenharmony_ci if (a.hasAttribute('fixed')) { 262048f512ceSopenharmony_ci this.fixed(h, a.getAttribute('fixed'), '#42b983'); 262148f512ceSopenharmony_ci } 262248f512ceSopenharmony_ci rowElement.append(h); 262348f512ceSopenharmony_ci } 262448f512ceSopenharmony_ci }); 262548f512ceSopenharmony_ci }; 262648f512ceSopenharmony_ci resolvingArea(this.columns, 0, 0); 262748f512ceSopenharmony_ci area.forEach((rows, j, array) => { 262848f512ceSopenharmony_ci for (let i = 0; i < this.colCount; i++) { 262948f512ceSopenharmony_ci if (!rows[i]) rows[i] = array[j - 1][i]; 263048f512ceSopenharmony_ci } 263148f512ceSopenharmony_ci }); 263248f512ceSopenharmony_ci 263348f512ceSopenharmony_ci this.gridTemplateColumns = gridTemplateColumns.join(' '); 263448f512ceSopenharmony_ci if (this.selectable) { 263548f512ceSopenharmony_ci let s = area.map(a => '"_checkbox_ ' + (a.map(aa => aa.t).join(' ')) + '"').join(' '); 263648f512ceSopenharmony_ci // `repeat(${this.colCount},1fr)` 263748f512ceSopenharmony_ci rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' '); 263848f512ceSopenharmony_ci rowElement.style.gridTemplateRows = `repeat(${area.length},1fr)`; 263948f512ceSopenharmony_ci rowElement.style.gridTemplateAreas = s; 264048f512ceSopenharmony_ci } else { 264148f512ceSopenharmony_ci let s = area.map(a => '"' + (a.map(aa => aa.t).join(' ')) + '"').join(' '); 264248f512ceSopenharmony_ci // `repeat(${this.colCount},1fr)` 264348f512ceSopenharmony_ci rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' '); 264448f512ceSopenharmony_ci rowElement.style.gridTemplateRows = `repeat(${area.length},1fr)`; 264548f512ceSopenharmony_ci rowElement.style.gridTemplateAreas = s; 264648f512ceSopenharmony_ci } 264748f512ceSopenharmony_ci this.theadElement.append(rowElement); 264848f512ceSopenharmony_ci if (this.hasAttribute('tree')) { 264948f512ceSopenharmony_ci this.renderTreeTable(); 265048f512ceSopenharmony_ci } else { 265148f512ceSopenharmony_ci this.renderTable(); 265248f512ceSopenharmony_ci } 265348f512ceSopenharmony_ci }); 265448f512ceSopenharmony_ci 265548f512ceSopenharmony_ci }); 265648f512ceSopenharmony_ci } 265748f512ceSopenharmony_ci 265848f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 265948f512ceSopenharmony_ci disconnectedCallback() { 266048f512ceSopenharmony_ci 266148f512ceSopenharmony_ci } 266248f512ceSopenharmony_ci 266348f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 266448f512ceSopenharmony_ci adoptedCallback() { 266548f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 266648f512ceSopenharmony_ci } 266748f512ceSopenharmony_ci 266848f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 266948f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 267048f512ceSopenharmony_ci 267148f512ceSopenharmony_ci } 267248f512ceSopenharmony_ci 267348f512ceSopenharmony_ci fixed(td, placement, bgColor, zIndex) { 267448f512ceSopenharmony_ci td.style.position = 'sticky'; 267548f512ceSopenharmony_ci if (placement === 'left') { 267648f512ceSopenharmony_ci td.style.left = '0px'; 267748f512ceSopenharmony_ci td.style.boxShadow = '3px 0px 5px #33333333'; 267848f512ceSopenharmony_ci } else if (placement === 'right') { 267948f512ceSopenharmony_ci td.style.right = '0px'; 268048f512ceSopenharmony_ci td.style.boxShadow = '-3px 0px 5px #33333333'; 268148f512ceSopenharmony_ci } 268248f512ceSopenharmony_ci } 268348f512ceSopenharmony_ci 268448f512ceSopenharmony_ci /*渲染成表格*/ 268548f512ceSopenharmony_ci renderTable() { 268648f512ceSopenharmony_ci let that = this; 268748f512ceSopenharmony_ci if (!this.columns) return; 268848f512ceSopenharmony_ci if (!this.ds) return; // 如果没有设置数据源，直接返回 268948f512ceSopenharmony_ci this.tbodyElement.innerHTML = '';// 清空表格内容 269048f512ceSopenharmony_ci this.ds.forEach(rowData => { 269148f512ceSopenharmony_ci let rowElement = document.createElement('div'); 269248f512ceSopenharmony_ci rowElement.classList.add('tr'); 269348f512ceSopenharmony_ci rowElement.data = rowData; 269448f512ceSopenharmony_ci let gridTemplateColumns = []; 269548f512ceSopenharmony_ci // 如果table配置了selectable（选择行模式） 单独在行头部添加一个 checkbox 269648f512ceSopenharmony_ci if (this.selectable) { 269748f512ceSopenharmony_ci let box = document.createElement('div'); 269848f512ceSopenharmony_ci box.style.display = 'flex'; 269948f512ceSopenharmony_ci box.style.justifyContent = 'center'; 270048f512ceSopenharmony_ci box.style.alignItems = 'center'; 270148f512ceSopenharmony_ci box.classList.add('td'); 270248f512ceSopenharmony_ci let checkbox = document.createElement('lit-checkbox'); 270348f512ceSopenharmony_ci checkbox.classList.add('row-checkbox'); 270448f512ceSopenharmony_ci checkbox.onchange = (e) => {// checkbox 的是否选中 会影响 行对应的 div上是否有 checked属性，用于标记 270548f512ceSopenharmony_ci if (e.detail.checked) { 270648f512ceSopenharmony_ci rowElement.setAttribute('checked', ''); 270748f512ceSopenharmony_ci } else { 270848f512ceSopenharmony_ci rowElement.removeAttribute('checked'); 270948f512ceSopenharmony_ci } 271048f512ceSopenharmony_ci }; 271148f512ceSopenharmony_ci box.appendChild(checkbox); 271248f512ceSopenharmony_ci rowElement.appendChild(box); 271348f512ceSopenharmony_ci } 271448f512ceSopenharmony_ci this.tableColumns.forEach(cl => { 271548f512ceSopenharmony_ci let dataIndex = cl.getAttribute('data-index'); 271648f512ceSopenharmony_ci gridTemplateColumns.push(cl.getAttribute('width') || '1fr'); 271748f512ceSopenharmony_ci if (cl.template) {// 如果自定义渲染,从模版中渲染得到节点 271848f512ceSopenharmony_ci let cloneNode = cl.template.render(rowData).content.cloneNode(true); 271948f512ceSopenharmony_ci let d = document.createElement('div'); 272048f512ceSopenharmony_ci d.classList.add('td'); 272148f512ceSopenharmony_ci d.style.justifyContent = cl.getAttribute('align'); 272248f512ceSopenharmony_ci if (cl.hasAttribute('fixed')) { 272348f512ceSopenharmony_ci this.fixed(d, cl.getAttribute('fixed'), '#ffffff'); 272448f512ceSopenharmony_ci } 272548f512ceSopenharmony_ci d.append(cloneNode); 272648f512ceSopenharmony_ci rowElement.append(d); 272748f512ceSopenharmony_ci } else { 272848f512ceSopenharmony_ci let td = document.createElement('div'); 272948f512ceSopenharmony_ci td.classList.add('td'); 273048f512ceSopenharmony_ci td.style.justifyContent = cl.getAttribute('align'); 273148f512ceSopenharmony_ci if (cl.hasAttribute('fixed')) { 273248f512ceSopenharmony_ci this.fixed(td, cl.getAttribute('fixed'), '#ffffff'); 273348f512ceSopenharmony_ci } 273448f512ceSopenharmony_ci 273548f512ceSopenharmony_ci td.innerHTML = 273648f512ceSopenharmony_ci `<code style='padding:0;margin:0'>${rowData[dataIndex].toString().replace('\n','')}</code>`; 273748f512ceSopenharmony_ci rowElement.append(td); 273848f512ceSopenharmony_ci } 273948f512ceSopenharmony_ci 274048f512ceSopenharmony_ci }); 274148f512ceSopenharmony_ci if (this.selectable) { // 如果 带选择的table 前面添加一个 60px的列 274248f512ceSopenharmony_ci // `repeat(${this.colCount},1fr)` 274348f512ceSopenharmony_ci rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' '); 274448f512ceSopenharmony_ci } else { 274548f512ceSopenharmony_ci // `repeat(${this.colCount},1fr)` 274648f512ceSopenharmony_ci rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' '); 274748f512ceSopenharmony_ci } 274848f512ceSopenharmony_ci rowElement.onclick = e => { 274948f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onRowClick', {detail: rowData, composed: true})); 275048f512ceSopenharmony_ci }; 275148f512ceSopenharmony_ci this.tbodyElement.append(rowElement); 275248f512ceSopenharmony_ci }); 275348f512ceSopenharmony_ci } 275448f512ceSopenharmony_ci 275548f512ceSopenharmony_ci /*渲染树表结构*/ 275648f512ceSopenharmony_ci renderTreeTable() { 275748f512ceSopenharmony_ci if (!this.columns) return; 275848f512ceSopenharmony_ci if (!this.ds) return; 275948f512ceSopenharmony_ci this.tbodyElement.innerHTML = ''; 276048f512ceSopenharmony_ci /*通过list 构建 tree 结构*/ 276148f512ceSopenharmony_ci let ids = JSON.parse(this.getAttribute('tree') || `['id','pid']`); 276248f512ceSopenharmony_ci let toTreeData = (data, id, pid) => { 276348f512ceSopenharmony_ci let cloneData = JSON.parse(JSON.stringify(data)); 276448f512ceSopenharmony_ci return cloneData.filter(father => { 276548f512ceSopenharmony_ci let branchArr = cloneData.filter(child => father[id] === child[pid]); 276648f512ceSopenharmony_ci branchArr.length > 0 ? father['children'] = branchArr : ''; 276748f512ceSopenharmony_ci return !father[pid]; 276848f512ceSopenharmony_ci }); 276948f512ceSopenharmony_ci }; 277048f512ceSopenharmony_ci let treeData = toTreeData(this.ds, ids[0], ids[1]); 277148f512ceSopenharmony_ci let offset = 30; 277248f512ceSopenharmony_ci let offsetVal = offset; 277348f512ceSopenharmony_ci const drawRow = (arr, parentNode) => { 277448f512ceSopenharmony_ci arr.forEach(rowData => { 277548f512ceSopenharmony_ci let rowElement = document.createElement('div'); 277648f512ceSopenharmony_ci rowElement.classList.add('tr'); 277748f512ceSopenharmony_ci rowElement.data = rowData; 277848f512ceSopenharmony_ci let gridTemplateColumns = []; 277948f512ceSopenharmony_ci if (this.selectable) { 278048f512ceSopenharmony_ci let box = document.createElement('div'); 278148f512ceSopenharmony_ci box.style.display = 'flex'; 278248f512ceSopenharmony_ci box.style.justifyContent = 'center'; 278348f512ceSopenharmony_ci box.style.alignItems = 'center'; 278448f512ceSopenharmony_ci box.classList.add('td'); 278548f512ceSopenharmony_ci let checkbox = document.createElement('lit-checkbox'); 278648f512ceSopenharmony_ci checkbox.classList.add('row-checkbox'); 278748f512ceSopenharmony_ci checkbox.onchange = (e) => { 278848f512ceSopenharmony_ci if (e.detail.checked) { 278948f512ceSopenharmony_ci rowElement.setAttribute('checked', ''); 279048f512ceSopenharmony_ci } else { 279148f512ceSopenharmony_ci rowElement.removeAttribute('checked'); 279248f512ceSopenharmony_ci } 279348f512ceSopenharmony_ci const changeChildNode = (rowElement, checked) => { 279448f512ceSopenharmony_ci let id = rowElement.getAttribute('id'); 279548f512ceSopenharmony_ci let pid = rowElement.getAttribute('pid'); 279648f512ceSopenharmony_ci this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => { 279748f512ceSopenharmony_ci a.querySelector('.row-checkbox').checked = checked; 279848f512ceSopenharmony_ci if (checked) { 279948f512ceSopenharmony_ci a.setAttribute('checked', ''); 280048f512ceSopenharmony_ci } else { 280148f512ceSopenharmony_ci a.removeAttribute('checked'); 280248f512ceSopenharmony_ci } 280348f512ceSopenharmony_ci changeChildNode(a, checked); 280448f512ceSopenharmony_ci }); 280548f512ceSopenharmony_ci }; 280648f512ceSopenharmony_ci changeChildNode(rowElement, e.detail.checked); 280748f512ceSopenharmony_ci }; 280848f512ceSopenharmony_ci box.appendChild(checkbox); 280948f512ceSopenharmony_ci rowElement.appendChild(box); 281048f512ceSopenharmony_ci } 281148f512ceSopenharmony_ci this.tableColumns.forEach((cl, index) => { 281248f512ceSopenharmony_ci let dataIndex = cl.getAttribute('data-index'); 281348f512ceSopenharmony_ci gridTemplateColumns.push(cl.getAttribute('width') || '1fr'); 281448f512ceSopenharmony_ci let td; 281548f512ceSopenharmony_ci if (cl.template) { 281648f512ceSopenharmony_ci let cloneNode = cl.template.render(rowData).content.cloneNode(true); 281748f512ceSopenharmony_ci td = document.createElement('div'); 281848f512ceSopenharmony_ci td.classList.add('td'); 281948f512ceSopenharmony_ci td.style.justifyContent = cl.getAttribute('align'); 282048f512ceSopenharmony_ci if (cl.hasAttribute('fixed')) { 282148f512ceSopenharmony_ci this.fixed(td, cl.getAttribute('fixed'), '#ffffff'); 282248f512ceSopenharmony_ci } 282348f512ceSopenharmony_ci td.append(cloneNode); 282448f512ceSopenharmony_ci } else { 282548f512ceSopenharmony_ci td = document.createElement('div'); 282648f512ceSopenharmony_ci td.classList.add('td'); 282748f512ceSopenharmony_ci td.style.justifyContent = cl.getAttribute('align') 282848f512ceSopenharmony_ci if (cl.hasAttribute('fixed')) { 282948f512ceSopenharmony_ci this.fixed(td, cl.getAttribute('fixed'), '#ffffff') 283048f512ceSopenharmony_ci } 283148f512ceSopenharmony_ci td.innerHTML = rowData[dataIndex]; 283248f512ceSopenharmony_ci } 283348f512ceSopenharmony_ci if (index === 0) { 283448f512ceSopenharmony_ci if (rowData.children && rowData.children.length > 0) { 283548f512ceSopenharmony_ci let btn = document.createElement('lit-icon'); 283648f512ceSopenharmony_ci btn.classList.add('tree-icon'); 283748f512ceSopenharmony_ci btn.name = 'minus-square'; 283848f512ceSopenharmony_ci td.insertBefore(btn, td.firstChild); 283948f512ceSopenharmony_ci td.style.paddingLeft = (offsetVal - 30) + 'px'; 284048f512ceSopenharmony_ci btn.onclick = (e) => { 284148f512ceSopenharmony_ci const foldNode = (rowElement) => { 284248f512ceSopenharmony_ci let id = rowElement.getAttribute('id'); 284348f512ceSopenharmony_ci let pid = rowElement.getAttribute('pid'); 284448f512ceSopenharmony_ci this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => { 284548f512ceSopenharmony_ci let id = a.getAttribute('id'); 284648f512ceSopenharmony_ci let pid = a.getAttribute('pid'); 284748f512ceSopenharmony_ci a.style.display = 'none'; 284848f512ceSopenharmony_ci foldNode(a); 284948f512ceSopenharmony_ci }); 285048f512ceSopenharmony_ci if (rowElement.querySelector('.tree-icon')) { 285148f512ceSopenharmony_ci rowElement.querySelector('.tree-icon').name = 'plus-square'; 285248f512ceSopenharmony_ci } 285348f512ceSopenharmony_ci rowElement.removeAttribute('expand'); 285448f512ceSopenharmony_ci }; 285548f512ceSopenharmony_ci const expendNode = (rowElement) => { 285648f512ceSopenharmony_ci let id = rowElement.getAttribute('id'); 285748f512ceSopenharmony_ci let pid = rowElement.getAttribute('pid'); 285848f512ceSopenharmony_ci this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => { 285948f512ceSopenharmony_ci let id = a.getAttribute('id'); 286048f512ceSopenharmony_ci let pid = a.getAttribute('pid'); 286148f512ceSopenharmony_ci a.style.display = ''; 286248f512ceSopenharmony_ci }); 286348f512ceSopenharmony_ci if (rowElement.querySelector('.tree-icon')) { 286448f512ceSopenharmony_ci rowElement.querySelector('.tree-icon').name = 'minus-square'; 286548f512ceSopenharmony_ci } 286648f512ceSopenharmony_ci rowElement.setAttribute('expand', ''); 286748f512ceSopenharmony_ci }; 286848f512ceSopenharmony_ci if (rowElement.hasAttribute('expand')) { 286948f512ceSopenharmony_ci foldNode(rowElement); 287048f512ceSopenharmony_ci } else { 287148f512ceSopenharmony_ci expendNode(rowElement); 287248f512ceSopenharmony_ci } 287348f512ceSopenharmony_ci }; 287448f512ceSopenharmony_ci } else { 287548f512ceSopenharmony_ci td.style.paddingLeft = offsetVal + 'px'; 287648f512ceSopenharmony_ci } 287748f512ceSopenharmony_ci } 287848f512ceSopenharmony_ci rowElement.append(td); 287948f512ceSopenharmony_ci 288048f512ceSopenharmony_ci }); 288148f512ceSopenharmony_ci if (this.selectable) { 288248f512ceSopenharmony_ci // `repeat(${this.colCount},1fr)` 288348f512ceSopenharmony_ci rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' '); 288448f512ceSopenharmony_ci } else { 288548f512ceSopenharmony_ci // `repeat(${this.colCount},1fr)` 288648f512ceSopenharmony_ci rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' '); 288748f512ceSopenharmony_ci } 288848f512ceSopenharmony_ci rowElement.onclick = e => { 288948f512ceSopenharmony_ci }; 289048f512ceSopenharmony_ci parentNode.append(rowElement); 289148f512ceSopenharmony_ci rowElement.setAttribute('id', rowData[ids[0]]); 289248f512ceSopenharmony_ci rowElement.setAttribute('pid', rowData[ids[1]]); 289348f512ceSopenharmony_ci rowElement.setAttribute('expand', ''); 289448f512ceSopenharmony_ci if (rowData.children && rowData.children.length > 0) { 289548f512ceSopenharmony_ci // 有子节点的 前面加上 + 图标 表示可以展开节点 289648f512ceSopenharmony_ci offsetVal = offsetVal + offset; 289748f512ceSopenharmony_ci drawRow(rowData.children, parentNode); 289848f512ceSopenharmony_ci offsetVal = offsetVal - offset; 289948f512ceSopenharmony_ci } 290048f512ceSopenharmony_ci }); 290148f512ceSopenharmony_ci }; 290248f512ceSopenharmony_ci drawRow(treeData, this.tbodyElement); 290348f512ceSopenharmony_ci } 290448f512ceSopenharmony_ci 290548f512ceSopenharmony_ci // 获取选中的行数据 290648f512ceSopenharmony_ci getCheckRows() { 290748f512ceSopenharmony_ci return [...this.shadowRoot.querySelectorAll('div[class=tr][checked]')].map(a => a.data).map(a => { 290848f512ceSopenharmony_ci delete a['children']; 290948f512ceSopenharmony_ci return a; 291048f512ceSopenharmony_ci }); 291148f512ceSopenharmony_ci } 291248f512ceSopenharmony_ci 291348f512ceSopenharmony_ci deleteRowsCondition(fn) { 291448f512ceSopenharmony_ci this.shadowRoot.querySelectorAll('div[class=tr]').forEach(tr => { 291548f512ceSopenharmony_ci if (fn(tr.data)) { 291648f512ceSopenharmony_ci tr.remove(); 291748f512ceSopenharmony_ci } 291848f512ceSopenharmony_ci }); 291948f512ceSopenharmony_ci } 292048f512ceSopenharmony_ci } 292148f512ceSopenharmony_ci if (!customElements.get('lit-table')) { 292248f512ceSopenharmony_ci customElements.define('lit-table', LitTable); 292348f512ceSopenharmony_ci } 292448f512ceSopenharmony_ci 292548f512ceSopenharmony_ci class LitTableColumn extends HTMLElement { 292648f512ceSopenharmony_ci static get observedAttributes() { 292748f512ceSopenharmony_ci return ['name','order']; 292848f512ceSopenharmony_ci } 292948f512ceSopenharmony_ci 293048f512ceSopenharmony_ci constructor() { 293148f512ceSopenharmony_ci super(); 293248f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 293348f512ceSopenharmony_ci shadowRoot.innerHTML = ` 293448f512ceSopenharmony_ci<style> 293548f512ceSopenharmony_ci:host{ } 293648f512ceSopenharmony_ci</style> 293748f512ceSopenharmony_ci<slot id='slot'></slot> 293848f512ceSopenharmony_ci `; 293948f512ceSopenharmony_ci } 294048f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 294148f512ceSopenharmony_ci connectedCallback() { 294248f512ceSopenharmony_ci this.template=null; 294348f512ceSopenharmony_ci this.st = this.shadowRoot.querySelector('#slot') 294448f512ceSopenharmony_ci this.st.addEventListener('slotchange', () => { 294548f512ceSopenharmony_ci const elements = this.st.assignedElements({flatten: false}); 294648f512ceSopenharmony_ci if (elements.length>0) { 294748f512ceSopenharmony_ci this.template = elements[0]; 294848f512ceSopenharmony_ci } 294948f512ceSopenharmony_ci }) 295048f512ceSopenharmony_ci } 295148f512ceSopenharmony_ci 295248f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 295348f512ceSopenharmony_ci disconnectedCallback() { 295448f512ceSopenharmony_ci 295548f512ceSopenharmony_ci } 295648f512ceSopenharmony_ci 295748f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 295848f512ceSopenharmony_ci adoptedCallback() { 295948f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 296048f512ceSopenharmony_ci } 296148f512ceSopenharmony_ci 296248f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 296348f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 296448f512ceSopenharmony_ci 296548f512ceSopenharmony_ci } 296648f512ceSopenharmony_ci } 296748f512ceSopenharmony_ci if (!customElements.get('lit-table-column')) { 296848f512ceSopenharmony_ci customElements.define('lit-table-column', LitTableColumn); 296948f512ceSopenharmony_ci } 297048f512ceSopenharmony_ci 297148f512ceSopenharmony_ci class LitTableGroup extends HTMLElement { 297248f512ceSopenharmony_ci static get observedAttributes() { 297348f512ceSopenharmony_ci return ['title']; 297448f512ceSopenharmony_ci } 297548f512ceSopenharmony_ci 297648f512ceSopenharmony_ci get title() { 297748f512ceSopenharmony_ci return this.getAttribute('title'); 297848f512ceSopenharmony_ci } 297948f512ceSopenharmony_ci 298048f512ceSopenharmony_ci set title(value) { 298148f512ceSopenharmony_ci this.setAttribute('title', value); 298248f512ceSopenharmony_ci } 298348f512ceSopenharmony_ci 298448f512ceSopenharmony_ci constructor() { 298548f512ceSopenharmony_ci super(); 298648f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 298748f512ceSopenharmony_ci shadowRoot.innerHTML = ` 298848f512ceSopenharmony_ci <style> 298948f512ceSopenharmony_ci :host{ } 299048f512ceSopenharmony_ci </style> 299148f512ceSopenharmony_ci <slot id='sl'></slot> 299248f512ceSopenharmony_ci `; 299348f512ceSopenharmony_ci } 299448f512ceSopenharmony_ci 299548f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 299648f512ceSopenharmony_ci connectedCallback() { 299748f512ceSopenharmony_ci 299848f512ceSopenharmony_ci } 299948f512ceSopenharmony_ci 300048f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 300148f512ceSopenharmony_ci disconnectedCallback() { 300248f512ceSopenharmony_ci 300348f512ceSopenharmony_ci } 300448f512ceSopenharmony_ci 300548f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 300648f512ceSopenharmony_ci adoptedCallback() { 300748f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 300848f512ceSopenharmony_ci } 300948f512ceSopenharmony_ci 301048f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 301148f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 301248f512ceSopenharmony_ci 301348f512ceSopenharmony_ci } 301448f512ceSopenharmony_ci } 301548f512ceSopenharmony_ci if (!customElements.get('lit-table-group')) { 301648f512ceSopenharmony_ci customElements.define('lit-table-group', LitTableGroup); 301748f512ceSopenharmony_ci } 301848f512ceSopenharmony_ci 301948f512ceSopenharmony_ci class LitTabpane extends HTMLElement { 302048f512ceSopenharmony_ci static get observedAttributes() {return ['tab','key','disabled','icon','closeable','hide'];} 302148f512ceSopenharmony_ci constructor() { 302248f512ceSopenharmony_ci super(); 302348f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 302448f512ceSopenharmony_ci shadowRoot.innerHTML = ` 302548f512ceSopenharmony_ci<style> 302648f512ceSopenharmony_ci:host() { 302748f512ceSopenharmony_ci scroll-behavior: smooth; 302848f512ceSopenharmony_ci -webkit-overflow-scrolling: touch; 302948f512ceSopenharmony_ci overflow: auto; 303048f512ceSopenharmony_ci width: 100%; 303148f512ceSopenharmony_ci} 303248f512ceSopenharmony_ci</style> 303348f512ceSopenharmony_ci<slot></slot> 303448f512ceSopenharmony_ci`; 303548f512ceSopenharmony_ci } 303648f512ceSopenharmony_ci 303748f512ceSopenharmony_ci get tab() { 303848f512ceSopenharmony_ci return this.getAttribute('tab'); 303948f512ceSopenharmony_ci } 304048f512ceSopenharmony_ci 304148f512ceSopenharmony_ci set tab(value) { 304248f512ceSopenharmony_ci this.setAttribute('tab', value); 304348f512ceSopenharmony_ci } 304448f512ceSopenharmony_ci 304548f512ceSopenharmony_ci get icon() { 304648f512ceSopenharmony_ci return this.getAttribute('icon'); 304748f512ceSopenharmony_ci } 304848f512ceSopenharmony_ci 304948f512ceSopenharmony_ci get disabled() { 305048f512ceSopenharmony_ci return this.getAttribute('disabled')!==null; 305148f512ceSopenharmony_ci } 305248f512ceSopenharmony_ci 305348f512ceSopenharmony_ci set disabled(value) { 305448f512ceSopenharmony_ci if (value===null||value===false) { 305548f512ceSopenharmony_ci this.removeAttribute('disabled'); 305648f512ceSopenharmony_ci } else { 305748f512ceSopenharmony_ci this.setAttribute('disabled',value); 305848f512ceSopenharmony_ci } 305948f512ceSopenharmony_ci } 306048f512ceSopenharmony_ci get closeable() { 306148f512ceSopenharmony_ci return this.getAttribute('closeable')!==null; 306248f512ceSopenharmony_ci } 306348f512ceSopenharmony_ci set closeable(value) { 306448f512ceSopenharmony_ci if (value===null||value===false) { 306548f512ceSopenharmony_ci this.removeAttribute('closeable'); 306648f512ceSopenharmony_ci } else { 306748f512ceSopenharmony_ci this.setAttribute('closeable',value); 306848f512ceSopenharmony_ci } 306948f512ceSopenharmony_ci } 307048f512ceSopenharmony_ci 307148f512ceSopenharmony_ci get key() { 307248f512ceSopenharmony_ci return this.getAttribute('key'); 307348f512ceSopenharmony_ci } 307448f512ceSopenharmony_ci set key(value) { 307548f512ceSopenharmony_ci this.setAttribute('key', value); 307648f512ceSopenharmony_ci } 307748f512ceSopenharmony_ci 307848f512ceSopenharmony_ci get hide() { 307948f512ceSopenharmony_ci return this.getAttribute('hide')!==null; 308048f512ceSopenharmony_ci } 308148f512ceSopenharmony_ci set hide(value) { 308248f512ceSopenharmony_ci if (value===null||value===false) { 308348f512ceSopenharmony_ci this.removeAttribute('hide'); 308448f512ceSopenharmony_ci } else { 308548f512ceSopenharmony_ci this.setAttribute('hide',value); 308648f512ceSopenharmony_ci } 308748f512ceSopenharmony_ci } 308848f512ceSopenharmony_ci 308948f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 309048f512ceSopenharmony_ci connectedCallback() {} 309148f512ceSopenharmony_ci 309248f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 309348f512ceSopenharmony_ci disconnectedCallback() {} 309448f512ceSopenharmony_ci 309548f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 309648f512ceSopenharmony_ci adoptedCallback() {} 309748f512ceSopenharmony_ci 309848f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 309948f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 310048f512ceSopenharmony_ci if (oldValue!==newValue && newValue!==undefined) { 310148f512ceSopenharmony_ci if (name==='tab'&&this.parentNode) { 310248f512ceSopenharmony_ci this.parentNode.updateLabel && this.parentNode.updateLabel(this.key,newValue); 310348f512ceSopenharmony_ci } 310448f512ceSopenharmony_ci if (name==='disabled'&&this.parentNode) { 310548f512ceSopenharmony_ci this.parentNode.updateDisabled && this.parentNode.updateDisabled(this.key,newValue); 310648f512ceSopenharmony_ci } 310748f512ceSopenharmony_ci if (name==='closeable'&&this.parentNode) { 310848f512ceSopenharmony_ci this.parentNode.updateCloseable && this.parentNode.updateCloseable(this.key, newValue); 310948f512ceSopenharmony_ci } 311048f512ceSopenharmony_ci if (name==='hide'&&this.parentNode) { 311148f512ceSopenharmony_ci this.parentNode.updateCloseable && this.parentNode.updateHide(this.key, newValue); 311248f512ceSopenharmony_ci } 311348f512ceSopenharmony_ci } 311448f512ceSopenharmony_ci } 311548f512ceSopenharmony_ci } 311648f512ceSopenharmony_ci if (!customElements.get('lit-tabpane')) { 311748f512ceSopenharmony_ci customElements.define('lit-tabpane', LitTabpane); 311848f512ceSopenharmony_ci } 311948f512ceSopenharmony_ci 312048f512ceSopenharmony_ci class LitTabs extends HTMLElement { 312148f512ceSopenharmony_ci static get observedAttributes() { 312248f512ceSopenharmony_ci //mode = flat(default) | card 312348f512ceSopenharmony_ci //position = top | top-left | top-center | top-right | left | left-top | left-center | left-bottom | right | bottom 312448f512ceSopenharmony_ci return ['activekey', 'mode', 'position']; 312548f512ceSopenharmony_ci } 312648f512ceSopenharmony_ci 312748f512ceSopenharmony_ci constructor() { 312848f512ceSopenharmony_ci super(); 312948f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 313048f512ceSopenharmony_ci shadowRoot.innerHTML = ` 313148f512ceSopenharmony_ci <style> 313248f512ceSopenharmony_ci :host{ 313348f512ceSopenharmony_ci display: block; 313448f512ceSopenharmony_ci text-align: unset; 313548f512ceSopenharmony_ci color: #252525; 313648f512ceSopenharmony_ci background-color: #fff; 313748f512ceSopenharmony_ci box-shadow: #00000033 0 0 10px ; 313848f512ceSopenharmony_ci /*padding: 10px;*/ 313948f512ceSopenharmony_ci /*margin-right: 10px;*/ 314048f512ceSopenharmony_ci } 314148f512ceSopenharmony_ci ::slotted(lit-tabpane) { 314248f512ceSopenharmony_ci box-sizing:border-box; 314348f512ceSopenharmony_ci width:100%; 314448f512ceSopenharmony_ci height:100%; 314548f512ceSopenharmony_ci /*padding:10px;*/ 314648f512ceSopenharmony_ci flex-shrink:0; 314748f512ceSopenharmony_ci overflow:auto; 314848f512ceSopenharmony_ci } 314948f512ceSopenharmony_ci .nav-item{ 315048f512ceSopenharmony_ci display: inline-flex; 315148f512ceSopenharmony_ci justify-content: center; 315248f512ceSopenharmony_ci align-items: center; 315348f512ceSopenharmony_ci padding: 6px 0px 6px 12px; 315448f512ceSopenharmony_ci font-size: .9rem; 315548f512ceSopenharmony_ci font-weight: normal; 315648f512ceSopenharmony_ci cursor: pointer; 315748f512ceSopenharmony_ci transition: all 0.3s; 315848f512ceSopenharmony_ci flex-shrink: 0; 315948f512ceSopenharmony_ci } 316048f512ceSopenharmony_ci .nav-item lit-icon{ 316148f512ceSopenharmony_ci margin-right: 2px; 316248f512ceSopenharmony_ci font-size: inherit; 316348f512ceSopenharmony_ci } 316448f512ceSopenharmony_ci .nav-item:hover{ 316548f512ceSopenharmony_ci color: #42b983; 316648f512ceSopenharmony_ci } 316748f512ceSopenharmony_ci .nav-item[data-disabled]{ 316848f512ceSopenharmony_ci pointer-events: all; 316948f512ceSopenharmony_ci cursor: not-allowed; 317048f512ceSopenharmony_ci color: #bfbfbf; 317148f512ceSopenharmony_ci } 317248f512ceSopenharmony_ci .nav-item[data-selected]{ 317348f512ceSopenharmony_ci color: #42b983;; 317448f512ceSopenharmony_ci } 317548f512ceSopenharmony_ci .tab-content{ 317648f512ceSopenharmony_ci display: block; 317748f512ceSopenharmony_ci background-color: #fff; 317848f512ceSopenharmony_ci flex:1; 317948f512ceSopenharmony_ci } 318048f512ceSopenharmony_ci 318148f512ceSopenharmony_ci /* 318248f512ceSopenharmony_ci * top top-left top-center top-right 318348f512ceSopenharmony_ci */ 318448f512ceSopenharmony_ci :host(:not([position])) .nav-root, 318548f512ceSopenharmony_ci :host([position^='top']) .nav-root{ 318648f512ceSopenharmony_ci display: flex; 318748f512ceSopenharmony_ci position: relative; 318848f512ceSopenharmony_ci justify-content: center; 318948f512ceSopenharmony_ci align-items: center; 319048f512ceSopenharmony_ci } 319148f512ceSopenharmony_ci :host(:not([mode]):not([position])) .tab-line,/*移动的线条*/ 319248f512ceSopenharmony_ci :host([mode='flat'][position^='top']) .tab-line{ 319348f512ceSopenharmony_ci position:absolute; 319448f512ceSopenharmony_ci bottom: 2px; 319548f512ceSopenharmony_ci background-color: #42b983; 319648f512ceSopenharmony_ci height: 2px; 319748f512ceSopenharmony_ci transform: translateY(100%); 319848f512ceSopenharmony_ci transition: all 0.3s; 319948f512ceSopenharmony_ci } 320048f512ceSopenharmony_ci 320148f512ceSopenharmony_ci :host(:not([position])) .tab-nav-container, 320248f512ceSopenharmony_ci :host([position^='top']) .tab-nav-container{ 320348f512ceSopenharmony_ci display: flex; 320448f512ceSopenharmony_ci position: relative; 320548f512ceSopenharmony_ci flex-direction: column; 320648f512ceSopenharmony_ci overflow-y: hidden; 320748f512ceSopenharmony_ci overflow-x: auto; 320848f512ceSopenharmony_ci overflow: -moz-scrollbars-none; 320948f512ceSopenharmony_ci -ms-overflow-style: none; 321048f512ceSopenharmony_ci transition: all 0.3s; 321148f512ceSopenharmony_ci flex: 1; 321248f512ceSopenharmony_ci /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/ 321348f512ceSopenharmony_ci /*background-repeat: no-repeat;*/ 321448f512ceSopenharmony_ci /*background-size: 50px 100%, 15px 100%;*/ 321548f512ceSopenharmony_ci /*background-attachment: local,scroll,local,scroll;*/ 321648f512ceSopenharmony_ci /*border-bottom: #f0f0f0 1px solid;*/ 321748f512ceSopenharmony_ci } 321848f512ceSopenharmony_ci :host([position='top']) .tab-nav, 321948f512ceSopenharmony_ci :host([position='top-left']) .tab-nav{ 322048f512ceSopenharmony_ci display: flex; 322148f512ceSopenharmony_ci position: relative; 322248f512ceSopenharmony_ci justify-content: flex-start; 322348f512ceSopenharmony_ci } 322448f512ceSopenharmony_ci :host([position='top-center']) .tab-nav{ 322548f512ceSopenharmony_ci display: flex; 322648f512ceSopenharmony_ci justify-content: center; 322748f512ceSopenharmony_ci } 322848f512ceSopenharmony_ci :host([position='top-right']) .tab-nav{ 322948f512ceSopenharmony_ci display: flex; 323048f512ceSopenharmony_ci justify-content: flex-end; 323148f512ceSopenharmony_ci } 323248f512ceSopenharmony_ci 323348f512ceSopenharmony_ci :host([position^='top'][mode='card']) .nav-item{ 323448f512ceSopenharmony_ci border-top: 1px solid #f0f0f0; 323548f512ceSopenharmony_ci border-left: 1px solid #f0f0f0; 323648f512ceSopenharmony_ci border-right: 1px solid #f0f0f0; 323748f512ceSopenharmony_ci border-bottom: 1px solid #f0f0f0; 323848f512ceSopenharmony_ci bottom: 0px; 323948f512ceSopenharmony_ci margin-right: 2px; 324048f512ceSopenharmony_ci position: relative; 324148f512ceSopenharmony_ci } 324248f512ceSopenharmony_ci :host([position^='top']) .tab-nav-bg-line{ 324348f512ceSopenharmony_ci position: absolute;bottom: 0;height: 1px;background-color: #f0f0f0;width: 100% 324448f512ceSopenharmony_ci } 324548f512ceSopenharmony_ci :host([position^='top'][mode='card']) .nav-item:not([data-selected]) { 324648f512ceSopenharmony_ci background-color: #f6f6f6; 324748f512ceSopenharmony_ci border-bottom: 1px solid #f0f0f0; 324848f512ceSopenharmony_ci } 324948f512ceSopenharmony_ci :host([position^='top'][mode='card']) .nav-item[data-selected]{ 325048f512ceSopenharmony_ci background-color: #ffffff; 325148f512ceSopenharmony_ci border-bottom: 1px solid #fff; 325248f512ceSopenharmony_ci bottom: 0px; 325348f512ceSopenharmony_ci } 325448f512ceSopenharmony_ci /* 325548f512ceSopenharmony_ci bottom bottom-left bottom-center bottom-right 325648f512ceSopenharmony_ci */ 325748f512ceSopenharmony_ci :host([position^='bottom']) .tab{ 325848f512ceSopenharmony_ci display: flex; 325948f512ceSopenharmony_ci flex-direction: column-reverse; 326048f512ceSopenharmony_ci } 326148f512ceSopenharmony_ci :host([mode='flat'][position^='bottom']) .tab-line{ 326248f512ceSopenharmony_ci position:absolute; 326348f512ceSopenharmony_ci top: -3px; 326448f512ceSopenharmony_ci background-color: #42b983; 326548f512ceSopenharmony_ci height: 2px; 326648f512ceSopenharmony_ci transform: translateY(-100%); 326748f512ceSopenharmony_ci transition: all 0.3s; 326848f512ceSopenharmony_ci } 326948f512ceSopenharmony_ci :host([position^='bottom']) .tab-nav-container{ 327048f512ceSopenharmony_ci display: flex; 327148f512ceSopenharmony_ci position: relative; 327248f512ceSopenharmony_ci flex-direction: column; 327348f512ceSopenharmony_ci overflow-x: auto; 327448f512ceSopenharmony_ci overflow-y: visible; 327548f512ceSopenharmony_ci overflow: -moz-scrollbars-none; 327648f512ceSopenharmony_ci -ms-overflow-style: none; 327748f512ceSopenharmony_ci transition: all 0.3s; 327848f512ceSopenharmony_ci flex: 1; 327948f512ceSopenharmony_ci /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/ 328048f512ceSopenharmony_ci /*background-repeat: no-repeat;*/ 328148f512ceSopenharmony_ci /*background-size: 50px 100%, 15px 100%;*/ 328248f512ceSopenharmony_ci /*background-attachment: local,scroll,local,scroll;*/ 328348f512ceSopenharmony_ci border-top: #f0f0f0 1px solid; 328448f512ceSopenharmony_ci } 328548f512ceSopenharmony_ci :host([position^='bottom']) .nav-root{ 328648f512ceSopenharmony_ci display: flex; 328748f512ceSopenharmony_ci justify-content: center; 328848f512ceSopenharmony_ci align-items: center; 328948f512ceSopenharmony_ci } 329048f512ceSopenharmony_ci :host([position='bottom']) .tab-nav, 329148f512ceSopenharmony_ci :host([position='bottom-left']) .tab-nav{ 329248f512ceSopenharmony_ci display: flex; 329348f512ceSopenharmony_ci position: relative; 329448f512ceSopenharmony_ci justify-content: flex-start; 329548f512ceSopenharmony_ci } 329648f512ceSopenharmony_ci :host([position='bottom-center']) .tab-nav{ 329748f512ceSopenharmony_ci display: flex; 329848f512ceSopenharmony_ci justify-content: center; 329948f512ceSopenharmony_ci } 330048f512ceSopenharmony_ci :host([position='bottom-right']) .tab-nav{ 330148f512ceSopenharmony_ci display: flex; 330248f512ceSopenharmony_ci justify-content: flex-end; 330348f512ceSopenharmony_ci } 330448f512ceSopenharmony_ci :host([position^='bottom'][mode='card']) .nav-item{ 330548f512ceSopenharmony_ci border-top: 1px solid #ffffff; 330648f512ceSopenharmony_ci border-left: 1px solid #f0f0f0; 330748f512ceSopenharmony_ci border-right: 1px solid #f0f0f0; 330848f512ceSopenharmony_ci border-bottom: 1px solid #f0f0f0; 330948f512ceSopenharmony_ci top: -1px; 331048f512ceSopenharmony_ci margin-right: 2px; 331148f512ceSopenharmony_ci position: relative; 331248f512ceSopenharmony_ci } 331348f512ceSopenharmony_ci :host([position^='bottom']) .tab-nav-bg-line{ 331448f512ceSopenharmony_ci position: absolute;top: 0;height: 1px;background-color: #f0f0f0;width: 100% 331548f512ceSopenharmony_ci } 331648f512ceSopenharmony_ci :host([position^='bottom'][mode='card']) .nav-item:not([data-selected]) { 331748f512ceSopenharmony_ci background-color: #f5f5f5; 331848f512ceSopenharmony_ci border-top: 1px solid #f0f0f0; 331948f512ceSopenharmony_ci } 332048f512ceSopenharmony_ci :host([position^='bottom'][mode='card']) .nav-item[data-selected]{ 332148f512ceSopenharmony_ci background-color: #ffffff; 332248f512ceSopenharmony_ci border-top: 1px solid #fff; 332348f512ceSopenharmony_ci top: -1px; 332448f512ceSopenharmony_ci } 332548f512ceSopenharmony_ci /* 332648f512ceSopenharmony_ci left left-top left-center left-bottom 332748f512ceSopenharmony_ci */ 332848f512ceSopenharmony_ci :host([position^='left']) .tab{ 332948f512ceSopenharmony_ci display: flex; 333048f512ceSopenharmony_ci flex-direction: row; 333148f512ceSopenharmony_ci } 333248f512ceSopenharmony_ci :host([mode='flat'][position^='left']) .tab-line{ 333348f512ceSopenharmony_ci position:absolute; 333448f512ceSopenharmony_ci right: 1px; 333548f512ceSopenharmony_ci background-color: #42b983; 333648f512ceSopenharmony_ci width: 3px; 333748f512ceSopenharmony_ci transform: translateX(100%); 333848f512ceSopenharmony_ci transition: all 0.3s; 333948f512ceSopenharmony_ci } 334048f512ceSopenharmony_ci :host([position^='left']) .tab-nav-container{ 334148f512ceSopenharmony_ci display: flex; 334248f512ceSopenharmony_ci position: relative; 334348f512ceSopenharmony_ci flex-direction: row; 334448f512ceSopenharmony_ci overflow-x: auto; 334548f512ceSopenharmony_ci overflow-y: visible; 334648f512ceSopenharmony_ci overflow: -moz-scrollbars-none; 334748f512ceSopenharmony_ci -ms-overflow-style: none; 334848f512ceSopenharmony_ci transition: all 0.3s; 334948f512ceSopenharmony_ci flex: 1; 335048f512ceSopenharmony_ci /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/ 335148f512ceSopenharmony_ci /*background-repeat: no-repeat;*/ 335248f512ceSopenharmony_ci /*background-size: 50px 100%, 15px 100%;*/ 335348f512ceSopenharmony_ci /*background-attachment: local,scroll,local,scroll;*/ 335448f512ceSopenharmony_ci border-right: #f0f0f0 1px solid; 335548f512ceSopenharmony_ci } 335648f512ceSopenharmony_ci :host([position^='left']) .nav-root{ 335748f512ceSopenharmony_ci display: flex; 335848f512ceSopenharmony_ci flex-direction: column; 335948f512ceSopenharmony_ci justify-content: center; 336048f512ceSopenharmony_ci align-items: center; 336148f512ceSopenharmony_ci } 336248f512ceSopenharmony_ci :host([position='left']) .tab-nav, 336348f512ceSopenharmony_ci :host([position='left-top']) .tab-nav{ 336448f512ceSopenharmony_ci display: flex; 336548f512ceSopenharmony_ci position: relative; 336648f512ceSopenharmony_ci flex-direction: column; 336748f512ceSopenharmony_ci justify-content: flex-start; 336848f512ceSopenharmony_ci } 336948f512ceSopenharmony_ci :host([position='left-center']) .tab-nav{ 337048f512ceSopenharmony_ci display: flex; 337148f512ceSopenharmony_ci position: relative; 337248f512ceSopenharmony_ci flex-direction: column; 337348f512ceSopenharmony_ci justify-content: center; 337448f512ceSopenharmony_ci } 337548f512ceSopenharmony_ci :host([position='left-bottom']) .tab-nav{ 337648f512ceSopenharmony_ci display: flex; 337748f512ceSopenharmony_ci position: relative; 337848f512ceSopenharmony_ci flex-direction: column; 337948f512ceSopenharmony_ci justify-content: flex-end; 338048f512ceSopenharmony_ci } 338148f512ceSopenharmony_ci :host([position^='left'][mode='card']) .nav-item{ 338248f512ceSopenharmony_ci border-top: 1px solid #f0f0f0; 338348f512ceSopenharmony_ci border-left: 1px solid #f0f0f0; 338448f512ceSopenharmony_ci border-right: 1px solid #ffffff; 338548f512ceSopenharmony_ci border-bottom: 1px solid #f0f0f0; 338648f512ceSopenharmony_ci right: -1px; 338748f512ceSopenharmony_ci margin-bottom: 2px; 338848f512ceSopenharmony_ci position: relative; 338948f512ceSopenharmony_ci } 339048f512ceSopenharmony_ci :host([position^='left']) .tab-nav-bg-line{ 339148f512ceSopenharmony_ci position: absolute;right: 0;width: 1px;background-color: #f0f0f0;width: 100% 339248f512ceSopenharmony_ci } 339348f512ceSopenharmony_ci :host([position^='left'][mode='card']) .nav-item:not([data-selected]) { 339448f512ceSopenharmony_ci background-color: #f5f5f5; 339548f512ceSopenharmony_ci border-right: 1px solid #f0f0f0; 339648f512ceSopenharmony_ci } 339748f512ceSopenharmony_ci :host([position^='left'][mode='card']) .nav-item[data-selected]{ 339848f512ceSopenharmony_ci background-color: #ffffff; 339948f512ceSopenharmony_ci border-bottom: 1px solid #fff; 340048f512ceSopenharmony_ci right: -1px; 340148f512ceSopenharmony_ci } 340248f512ceSopenharmony_ci /* 340348f512ceSopenharmony_ci right right-top right-center right-bottom 340448f512ceSopenharmony_ci */ 340548f512ceSopenharmony_ci :host([position^='right']) .tab{ 340648f512ceSopenharmony_ci display: flex; 340748f512ceSopenharmony_ci flex-direction: row-reverse; 340848f512ceSopenharmony_ci } 340948f512ceSopenharmony_ci :host([mode='flat'][position^='right']) .tab-line{ 341048f512ceSopenharmony_ci position:absolute; 341148f512ceSopenharmony_ci left: 1px; 341248f512ceSopenharmony_ci background-color: #42b983; 341348f512ceSopenharmony_ci width: 3px; 341448f512ceSopenharmony_ci transform: translateX(-100%); 341548f512ceSopenharmony_ci transition: all 0.3s; 341648f512ceSopenharmony_ci } 341748f512ceSopenharmony_ci :host([position^='right']) .tab-nav-container{ 341848f512ceSopenharmony_ci display: flex; 341948f512ceSopenharmony_ci position: relative; 342048f512ceSopenharmony_ci flex-direction: row-reverse; 342148f512ceSopenharmony_ci overflow-x: auto; 342248f512ceSopenharmony_ci overflow-y: visible; 342348f512ceSopenharmony_ci overflow: -moz-scrollbars-none; 342448f512ceSopenharmony_ci -ms-overflow-style: none; 342548f512ceSopenharmony_ci transition: all 0.3s; 342648f512ceSopenharmony_ci flex: 1; 342748f512ceSopenharmony_ci /*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/ 342848f512ceSopenharmony_ci /*background-repeat: no-repeat;*/ 342948f512ceSopenharmony_ci /*background-size: 50px 100%, 15px 100%;*/ 343048f512ceSopenharmony_ci /*background-attachment: local,scroll,local,scroll;*/ 343148f512ceSopenharmony_ci border-left: #f0f0f0 1px solid; 343248f512ceSopenharmony_ci } 343348f512ceSopenharmony_ci :host([position^='right']) .nav-root{ 343448f512ceSopenharmony_ci display: flex; 343548f512ceSopenharmony_ci flex-direction: column; 343648f512ceSopenharmony_ci justify-content: center; 343748f512ceSopenharmony_ci align-items: center; 343848f512ceSopenharmony_ci } 343948f512ceSopenharmony_ci :host([position='right']) .tab-nav, 344048f512ceSopenharmony_ci :host([position='right-top']) .tab-nav{ 344148f512ceSopenharmony_ci display: flex; 344248f512ceSopenharmony_ci position: relative; 344348f512ceSopenharmony_ci flex-direction: column; 344448f512ceSopenharmony_ci justify-content: flex-start; 344548f512ceSopenharmony_ci } 344648f512ceSopenharmony_ci :host([position='right-center']) .tab-nav{ 344748f512ceSopenharmony_ci display: flex; 344848f512ceSopenharmony_ci position: relative; 344948f512ceSopenharmony_ci flex-direction: column; 345048f512ceSopenharmony_ci justify-content: center; 345148f512ceSopenharmony_ci } 345248f512ceSopenharmony_ci :host([position='right-bottom']) .tab-nav{ 345348f512ceSopenharmony_ci display: flex; 345448f512ceSopenharmony_ci position: relative; 345548f512ceSopenharmony_ci flex-direction: column; 345648f512ceSopenharmony_ci justify-content: flex-end; 345748f512ceSopenharmony_ci } 345848f512ceSopenharmony_ci :host([position^='right'][mode='card']) .nav-item{ 345948f512ceSopenharmony_ci border-top: 1px solid #f0f0f0; 346048f512ceSopenharmony_ci border-left: 1px solid #ffffff; 346148f512ceSopenharmony_ci border-right: 1px solid #f0f0f0; 346248f512ceSopenharmony_ci border-bottom: 1px solid #f0f0f0; 346348f512ceSopenharmony_ci left: -1px; 346448f512ceSopenharmony_ci margin-top: 2px; 346548f512ceSopenharmony_ci position: relative; 346648f512ceSopenharmony_ci } 346748f512ceSopenharmony_ci :host([position^='right']) .tab-nav-bg-line{ 346848f512ceSopenharmony_ci position: absolute;left: 0;width: 1px;background-color: #f0f0f0;width: 100% 346948f512ceSopenharmony_ci } 347048f512ceSopenharmony_ci :host([position^='right'][mode='card']) .nav-item:not([data-selected]) { 347148f512ceSopenharmony_ci background-color: #f5f5f5; 347248f512ceSopenharmony_ci border-left: 1px solid #f0f0f0; 347348f512ceSopenharmony_ci } 347448f512ceSopenharmony_ci :host([position^='right'][mode='card']) .nav-item[data-selected]{ 347548f512ceSopenharmony_ci background-color: #ffffff; 347648f512ceSopenharmony_ci left: -1px; 347748f512ceSopenharmony_ci } 347848f512ceSopenharmony_ci 347948f512ceSopenharmony_ci 348048f512ceSopenharmony_ci .tab-nav-container::-webkit-scrollbar { 348148f512ceSopenharmony_ci display: none; 348248f512ceSopenharmony_ci } 348348f512ceSopenharmony_ci 348448f512ceSopenharmony_ci 348548f512ceSopenharmony_ci /*关闭的图标*/ 348648f512ceSopenharmony_ci .close-icon:hover{ 348748f512ceSopenharmony_ci color: #000; 348848f512ceSopenharmony_ci } 348948f512ceSopenharmony_ci .nav-item[data-closeable] .close-icon{ 349048f512ceSopenharmony_ci display: block; 349148f512ceSopenharmony_ci padding: 5px 5px 5px 5px; 349248f512ceSopenharmony_ci color: #999; 349348f512ceSopenharmony_ci } 349448f512ceSopenharmony_ci .nav-item[data-closeable] .no-close-icon{ 349548f512ceSopenharmony_ci display: none; 349648f512ceSopenharmony_ci } 349748f512ceSopenharmony_ci .nav-item:not([data-closeable]) .no-close-icon{ 349848f512ceSopenharmony_ci display: block; 349948f512ceSopenharmony_ci } 350048f512ceSopenharmony_ci .nav-item:not([data-closeable]) .close-icon{ 350148f512ceSopenharmony_ci display: none; 350248f512ceSopenharmony_ci } 350348f512ceSopenharmony_ci .nav-item:not([data-hide]) { 350448f512ceSopenharmony_ci display: block; 350548f512ceSopenharmony_ci } 350648f512ceSopenharmony_ci .nav-item[data-hide]{ 350748f512ceSopenharmony_ci display: none; 350848f512ceSopenharmony_ci } 350948f512ceSopenharmony_ci 351048f512ceSopenharmony_ci </style> 351148f512ceSopenharmony_ci <style id="filter"></style> 351248f512ceSopenharmony_ci <div class="tab"> 351348f512ceSopenharmony_ci <div class="nav-root"> 351448f512ceSopenharmony_ci <slot name="left" style="flex:1"></slot> 351548f512ceSopenharmony_ci <div class="tab-nav-container" > 351648f512ceSopenharmony_ci <div class="tab-nav-bg-line"></div> 351748f512ceSopenharmony_ci <div class="tab-nav" id="nav"></div> 351848f512ceSopenharmony_ci <div class="tab-line" id="tab-line"></div> 351948f512ceSopenharmony_ci </div> 352048f512ceSopenharmony_ci <slot name="right" style="flex:1"></slot> 352148f512ceSopenharmony_ci </div> 352248f512ceSopenharmony_ci <div class="tab-content"> 352348f512ceSopenharmony_ci <slot id="slot">NEED CONTENT</slot> 352448f512ceSopenharmony_ci </div> 352548f512ceSopenharmony_ci </div> 352648f512ceSopenharmony_ci `; 352748f512ceSopenharmony_ci } 352848f512ceSopenharmony_ci 352948f512ceSopenharmony_ci get position() { 353048f512ceSopenharmony_ci return this.getAttribute('position') || 'top'; 353148f512ceSopenharmony_ci } 353248f512ceSopenharmony_ci 353348f512ceSopenharmony_ci set position(value) { 353448f512ceSopenharmony_ci this.setAttribute('position', value); 353548f512ceSopenharmony_ci } 353648f512ceSopenharmony_ci 353748f512ceSopenharmony_ci get mode() { 353848f512ceSopenharmony_ci return this.getAttribute('mode') || 'flat'; 353948f512ceSopenharmony_ci } 354048f512ceSopenharmony_ci 354148f512ceSopenharmony_ci set mode(value) { 354248f512ceSopenharmony_ci this.setAttribute('mode', value); 354348f512ceSopenharmony_ci } 354448f512ceSopenharmony_ci 354548f512ceSopenharmony_ci get activekey() { 354648f512ceSopenharmony_ci return this.getAttribute('activekey'); 354748f512ceSopenharmony_ci } 354848f512ceSopenharmony_ci 354948f512ceSopenharmony_ci set activekey(value) { 355048f512ceSopenharmony_ci this.setAttribute('activekey', value); 355148f512ceSopenharmony_ci } 355248f512ceSopenharmony_ci 355348f512ceSopenharmony_ci updateLabel(key, value) { 355448f512ceSopenharmony_ci if (this.nav) { 355548f512ceSopenharmony_ci let item = this.nav.querySelector(`.nav-item[data-key='${key}']`); 355648f512ceSopenharmony_ci if (item) { 355748f512ceSopenharmony_ci item.querySelector('span').innerHTML=value; 355848f512ceSopenharmony_ci this.initTabPos(); 355948f512ceSopenharmony_ci } 356048f512ceSopenharmony_ci } 356148f512ceSopenharmony_ci } 356248f512ceSopenharmony_ci 356348f512ceSopenharmony_ci updateDisabled(key, value) { 356448f512ceSopenharmony_ci if (this.nav) { 356548f512ceSopenharmony_ci let item = this.nav.querySelector(`.nav-item[data-key='${key}']`); 356648f512ceSopenharmony_ci if (item) { 356748f512ceSopenharmony_ci if (value) { 356848f512ceSopenharmony_ci item.setAttribute('data-disabled',''); 356948f512ceSopenharmony_ci } else { 357048f512ceSopenharmony_ci item.removeAttribute('data-disabled'); 357148f512ceSopenharmony_ci } 357248f512ceSopenharmony_ci this.initTabPos() 357348f512ceSopenharmony_ci } 357448f512ceSopenharmony_ci } 357548f512ceSopenharmony_ci } 357648f512ceSopenharmony_ci updateCloseable(key,value) { 357748f512ceSopenharmony_ci if (this.nav) { 357848f512ceSopenharmony_ci let item = this.nav.querySelector(`.nav-item[data-key='${key}']`); 357948f512ceSopenharmony_ci if (item) { 358048f512ceSopenharmony_ci if (value) { 358148f512ceSopenharmony_ci item.setAttribute('data-closeable',''); 358248f512ceSopenharmony_ci } else { 358348f512ceSopenharmony_ci item.removeAttribute('data-closeable'); 358448f512ceSopenharmony_ci } 358548f512ceSopenharmony_ci this.initTabPos(); 358648f512ceSopenharmony_ci } 358748f512ceSopenharmony_ci } 358848f512ceSopenharmony_ci } 358948f512ceSopenharmony_ci updateHide(key,value) { 359048f512ceSopenharmony_ci if (this.nav) { 359148f512ceSopenharmony_ci let item = this.nav.querySelector(`.nav-item[data-key='${key}']`); 359248f512ceSopenharmony_ci if (item) { 359348f512ceSopenharmony_ci if (value) { 359448f512ceSopenharmony_ci item.setAttribute('data-hide',''); 359548f512ceSopenharmony_ci } else { 359648f512ceSopenharmony_ci item.removeAttribute('data-hide'); 359748f512ceSopenharmony_ci } 359848f512ceSopenharmony_ci this.initTabPos(); 359948f512ceSopenharmony_ci } 360048f512ceSopenharmony_ci } 360148f512ceSopenharmony_ci } 360248f512ceSopenharmony_ci 360348f512ceSopenharmony_ci initTabPos() { 360448f512ceSopenharmony_ci const items = this.nav.querySelectorAll('.nav-item'); 360548f512ceSopenharmony_ci Array.from(items).forEach((a, index) => { 360648f512ceSopenharmony_ci this.tabPos[a.dataset.key] = { 360748f512ceSopenharmony_ci index: index, 360848f512ceSopenharmony_ci width: a.offsetWidth, 360948f512ceSopenharmony_ci height: a.offsetHeight, 361048f512ceSopenharmony_ci left: a.offsetLeft, 361148f512ceSopenharmony_ci top: a.offsetTop, 361248f512ceSopenharmony_ci label: a.textContent 361348f512ceSopenharmony_ci }; 361448f512ceSopenharmony_ci }); 361548f512ceSopenharmony_ci if (this.activekey) { 361648f512ceSopenharmony_ci if (this.position.startsWith('left')) { 361748f512ceSopenharmony_ci this.line.style = 361848f512ceSopenharmony_ci `height:${this.tabPos[this.activekey].height}px;transform:translate(100%,${this.tabPos[this.activekey].top}px)`; 361948f512ceSopenharmony_ci } else if (this.position.startsWith('top')) { 362048f512ceSopenharmony_ci if (this.tabPos[this.activekey]) { 362148f512ceSopenharmony_ci this.line.style = 362248f512ceSopenharmony_ci `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`; 362348f512ceSopenharmony_ci } 362448f512ceSopenharmony_ci } else if (this.position.startsWith('right')) { 362548f512ceSopenharmony_ci this.line.style = 362648f512ceSopenharmony_ci `height:${this.tabPos[this.activekey].height}px;transform:translate(-100%,${this.tabPos[this.activekey].top}px)`; 362748f512ceSopenharmony_ci } else if (this.position.startsWith('bottom')) { 362848f512ceSopenharmony_ci this.line.style = 362948f512ceSopenharmony_ci `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`; 363048f512ceSopenharmony_ci } 363148f512ceSopenharmony_ci } 363248f512ceSopenharmony_ci } 363348f512ceSopenharmony_ci 363448f512ceSopenharmony_ci // 当 custom element首次被插入文档DOM时，被调用。 363548f512ceSopenharmony_ci connectedCallback() { 363648f512ceSopenharmony_ci let that = this; 363748f512ceSopenharmony_ci this.tabPos = {}; 363848f512ceSopenharmony_ci this.nav = this.shadowRoot.querySelector('#nav'); 363948f512ceSopenharmony_ci this.line = this.shadowRoot.querySelector('#tab-line'); 364048f512ceSopenharmony_ci this.slots = this.shadowRoot.querySelector('#slot'); 364148f512ceSopenharmony_ci this.slots.addEventListener('slotchange', () => { 364248f512ceSopenharmony_ci const elements = this.slots.assignedElements(); 364348f512ceSopenharmony_ci let panes = this.querySelectorAll('lit-tabpane'); 364448f512ceSopenharmony_ci if (this.activekey) { 364548f512ceSopenharmony_ci panes.forEach(a => { 364648f512ceSopenharmony_ci if (a.key === this.activekey) { 364748f512ceSopenharmony_ci a.style.display = 'block'; 364848f512ceSopenharmony_ci } else { 364948f512ceSopenharmony_ci a.style.display = 'none'; 365048f512ceSopenharmony_ci } 365148f512ceSopenharmony_ci }) 365248f512ceSopenharmony_ci } else { 365348f512ceSopenharmony_ci panes.forEach((a, index) => { 365448f512ceSopenharmony_ci if (index === 0) { 365548f512ceSopenharmony_ci a.style.display = 'block'; 365648f512ceSopenharmony_ci this.activekey = a.key; 365748f512ceSopenharmony_ci } else { 365848f512ceSopenharmony_ci a.style.display = 'none'; 365948f512ceSopenharmony_ci } 366048f512ceSopenharmony_ci }) 366148f512ceSopenharmony_ci } 366248f512ceSopenharmony_ci 366348f512ceSopenharmony_ci let navHtml = ''; 366448f512ceSopenharmony_ci elements.forEach(a => { 366548f512ceSopenharmony_ci if (a.disabled) { 366648f512ceSopenharmony_ci navHtml += `<div class='nav-item' data-key='${a.key}'' data-disabled ${a.closeable?'data-closeable':''} ${a.hide?'data-hide':''}> 366748f512ceSopenharmony_ci ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``} 366848f512ceSopenharmony_ci <span>${a.tab}</span> 366948f512ceSopenharmony_ci <lit-icon class='close-icon' name='close' size='12'></lit-icon><div class='no-close-icon' style='margin-right: 12px'></div> 367048f512ceSopenharmony_ci </div>`; 367148f512ceSopenharmony_ci } else { 367248f512ceSopenharmony_ci if (a.key === this.activekey) { 367348f512ceSopenharmony_ci navHtml += `<div class='nav-item' data-key='${a.key}'' data-selected ${a.closeable?'data-closeable':''} ${a.hide?'data-hide':''}> 367448f512ceSopenharmony_ci ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``} 367548f512ceSopenharmony_ci <span>${a.tab}</span> 367648f512ceSopenharmony_ci <lit-icon class='close-icon' name='close' size='12'></lit-icon><div class='no-close-icon' style='margin-right: 12px'></div> 367748f512ceSopenharmony_ci </div>`; 367848f512ceSopenharmony_ci } else { 367948f512ceSopenharmony_ci navHtml += `<div class='nav-item' data-key='${a.key}' ${a.closeable?'data-closeable':''} ${a.hide?'data-hide':''}> 368048f512ceSopenharmony_ci ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``} 368148f512ceSopenharmony_ci <span>${a.tab}</span> 368248f512ceSopenharmony_ci <lit-icon class='close-icon' name='close' size='12'></lit-icon><div class='no-close-icon' style='margin-right: 12px'></div> 368348f512ceSopenharmony_ci </div>`; 368448f512ceSopenharmony_ci } 368548f512ceSopenharmony_ci 368648f512ceSopenharmony_ci } 368748f512ceSopenharmony_ci }); 368848f512ceSopenharmony_ci this.nav.innerHTML = navHtml; 368948f512ceSopenharmony_ci this.initTabPos(); 369048f512ceSopenharmony_ci this.nav.querySelectorAll('.close-icon').forEach(a => { 369148f512ceSopenharmony_ci a.onclick = (e) => { 369248f512ceSopenharmony_ci e.stopPropagation(); 369348f512ceSopenharmony_ci const closeKey = e.target.parentElement.dataset.key; 369448f512ceSopenharmony_ci console.log(closeKey); 369548f512ceSopenharmony_ci console.log(e.target.parentElement.parentElement); 369648f512ceSopenharmony_ci this.nav.removeChild(e.target.parentElement); 369748f512ceSopenharmony_ci let elements = this.slots.assignedElements(); 369848f512ceSopenharmony_ci let closeElement = elements.filter(a => a.key === closeKey)[0]; 369948f512ceSopenharmony_ci closeElement.parentElement.removeChild(closeElement); 370048f512ceSopenharmony_ci if (closeElement.style.display !== 'none') { 370148f512ceSopenharmony_ci elements = this.slots.assignedElements(); 370248f512ceSopenharmony_ci let elArr = elements.filter(a => !a.hasAttribute('disabled')); 370348f512ceSopenharmony_ci if (elArr.length > 0) { 370448f512ceSopenharmony_ci elArr[0].style.display = 'block'; 370548f512ceSopenharmony_ci this.activekey = elArr[0].key; 370648f512ceSopenharmony_ci } 370748f512ceSopenharmony_ci } 370848f512ceSopenharmony_ci } 370948f512ceSopenharmony_ci }); 371048f512ceSopenharmony_ci }); 371148f512ceSopenharmony_ci this.nav.onclick = (e) => { 371248f512ceSopenharmony_ci if (e.target.closest('div').hasAttribute('data-disabled')) return; 371348f512ceSopenharmony_ci let key = e.target.closest('div').dataset.key; 371448f512ceSopenharmony_ci this.activeByKey(key); 371548f512ceSopenharmony_ci let label = e.target.closest('div').querySelector('span').textContent; 371648f512ceSopenharmony_ci this.dispatchEvent(new CustomEvent('onTabClick',{detail:{key:key,tab:label}})); 371748f512ceSopenharmony_ci }; 371848f512ceSopenharmony_ci } 371948f512ceSopenharmony_ci set onTabClick(fn) { 372048f512ceSopenharmony_ci this.addEventListener('onTabClick', fn); 372148f512ceSopenharmony_ci } 372248f512ceSopenharmony_ci activeByKey(key) { 372348f512ceSopenharmony_ci if (key === null || key === undefined) return; // 如果没有key 不做相应 372448f512ceSopenharmony_ci this.nav.querySelectorAll('.nav-item').forEach(a => { 372548f512ceSopenharmony_ci if (a.getAttribute('data-key') === key) { 372648f512ceSopenharmony_ci a.setAttribute('data-selected', 'true'); 372748f512ceSopenharmony_ci } else { 372848f512ceSopenharmony_ci a.removeAttribute('data-selected'); 372948f512ceSopenharmony_ci } 373048f512ceSopenharmony_ci }) 373148f512ceSopenharmony_ci let tbp = this.querySelector(`lit-tabpane[key='${key}']`); 373248f512ceSopenharmony_ci let panes = this.querySelectorAll('lit-tabpane'); 373348f512ceSopenharmony_ci panes.forEach(a => { 373448f512ceSopenharmony_ci if (a.key === key) { 373548f512ceSopenharmony_ci a.style.display = 'block'; 373648f512ceSopenharmony_ci this.activekey = a.key; 373748f512ceSopenharmony_ci this.initTabPos() 373848f512ceSopenharmony_ci } else { 373948f512ceSopenharmony_ci a.style.display = 'none'; 374048f512ceSopenharmony_ci } 374148f512ceSopenharmony_ci }) 374248f512ceSopenharmony_ci } 374348f512ceSopenharmony_ci /*激活选中 key 对应的 pane 成功返回true，没有找到key对应的pane 返回false*/ 374448f512ceSopenharmony_ci activePane(key) { 374548f512ceSopenharmony_ci if (key === null || key === undefined) return false; 374648f512ceSopenharmony_ci let tbp = this.querySelector(`lit-tabpane[key='${key}']`); 374748f512ceSopenharmony_ci if (tbp) { 374848f512ceSopenharmony_ci this.activeByKey(key); 374948f512ceSopenharmony_ci return true; 375048f512ceSopenharmony_ci } else { 375148f512ceSopenharmony_ci return false; 375248f512ceSopenharmony_ci } 375348f512ceSopenharmony_ci } 375448f512ceSopenharmony_ci // 当 custom element从文档DOM中删除时，被调用。 375548f512ceSopenharmony_ci disconnectedCallback() { 375648f512ceSopenharmony_ci 375748f512ceSopenharmony_ci } 375848f512ceSopenharmony_ci 375948f512ceSopenharmony_ci // 当 custom element被移动到新的文档时，被调用。 376048f512ceSopenharmony_ci adoptedCallback() { 376148f512ceSopenharmony_ci console.log('Custom square element moved to new page.'); 376248f512ceSopenharmony_ci } 376348f512ceSopenharmony_ci 376448f512ceSopenharmony_ci // 当 custom element增加、删除、修改自身属性时，被调用。 376548f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 376648f512ceSopenharmony_ci if (name==='activekey'&&this.nav&&oldValue!==newValue) { 376748f512ceSopenharmony_ci this.activeByKey(newValue); 376848f512ceSopenharmony_ci } 376948f512ceSopenharmony_ci } 377048f512ceSopenharmony_ci } 377148f512ceSopenharmony_ci if (!customElements.get('lit-tabs')) { 377248f512ceSopenharmony_ci customElements.define('lit-tabs', LitTabs); 377348f512ceSopenharmony_ci } 377448f512ceSopenharmony_ci 377548f512ceSopenharmony_ci class AppChartFlame extends HTMLElement { 377648f512ceSopenharmony_ci draw; 377748f512ceSopenharmony_ci drawC; 377848f512ceSopenharmony_ci rowHeight = 17; 377948f512ceSopenharmony_ci 378048f512ceSopenharmony_ci static get observedAttributes() { 378148f512ceSopenharmony_ci return []; 378248f512ceSopenharmony_ci } 378348f512ceSopenharmony_ci 378448f512ceSopenharmony_ci constructor() { 378548f512ceSopenharmony_ci super(); 378648f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 378748f512ceSopenharmony_ci shadowRoot.innerHTML = ` 378848f512ceSopenharmony_ci <style> 378948f512ceSopenharmony_ci :host{ 379048f512ceSopenharmony_ci font-size:inherit; 379148f512ceSopenharmony_ci display:inline-flex; 379248f512ceSopenharmony_ci align-items: center; 379348f512ceSopenharmony_ci justify-content:center; 379448f512ceSopenharmony_ci height: 100%; 379548f512ceSopenharmony_ci width: 100%; 379648f512ceSopenharmony_ci margin-bottom: 40px; 379748f512ceSopenharmony_ci } 379848f512ceSopenharmony_ci canvas { border: 1px solid #e9e9e9; } 379948f512ceSopenharmony_ci #title{ 380048f512ceSopenharmony_ci font-weight: bold; 380148f512ceSopenharmony_ci height: auto; 380248f512ceSopenharmony_ci } 380348f512ceSopenharmony_ci #title span{ 380448f512ceSopenharmony_ci color: gray; 380548f512ceSopenharmony_ci } 380648f512ceSopenharmony_ci #funcNameSpan{ 380748f512ceSopenharmony_ci display: inline-block; 380848f512ceSopenharmony_ci border: 1px solid #e9e9e9; 380948f512ceSopenharmony_ci box-sizing: border-box; 381048f512ceSopenharmony_ci border-radius: 2px; 381148f512ceSopenharmony_ci padding: 2px 8px; 381248f512ceSopenharmony_ci background: #fff; 381348f512ceSopenharmony_ci color: gray; 381448f512ceSopenharmony_ci flex: 3; 381548f512ceSopenharmony_ci margin-left: 10px; 381648f512ceSopenharmony_ci } 381748f512ceSopenharmony_ci #percentSpan{ 381848f512ceSopenharmony_ci display: inline-block; 381948f512ceSopenharmony_ci border: 1px solid #e9e9e9; 382048f512ceSopenharmony_ci margin-left: 10px; 382148f512ceSopenharmony_ci box-sizing: border-box; 382248f512ceSopenharmony_ci border-radius: 2px; 382348f512ceSopenharmony_ci padding: 2px 8px; 382448f512ceSopenharmony_ci background: #fff; 382548f512ceSopenharmony_ci min-width: 160px; 382648f512ceSopenharmony_ci max-width: 160px; 382748f512ceSopenharmony_ci margin-left: 10px; 382848f512ceSopenharmony_ci width: 100px; 382948f512ceSopenharmony_ci height: 30px; 383048f512ceSopenharmony_ci color: gray; 383148f512ceSopenharmony_ci } 383248f512ceSopenharmony_ci #history{ 383348f512ceSopenharmony_ci display: none; 383448f512ceSopenharmony_ci border: 1px solid #42b983; 383548f512ceSopenharmony_ci box-sizing: border-box; 383648f512ceSopenharmony_ci border-radius: 2px; 383748f512ceSopenharmony_ci padding: 2px 8px; 383848f512ceSopenharmony_ci background: #fff; 383948f512ceSopenharmony_ci width: 100px; 384048f512ceSopenharmony_ci margin-left: 10px; 384148f512ceSopenharmony_ci height: 30px; 384248f512ceSopenharmony_ci cursor: pointer; 384348f512ceSopenharmony_ci user-select: none; 384448f512ceSopenharmony_ci } 384548f512ceSopenharmony_ci #history:hover{ 384648f512ceSopenharmony_ci background: #42b983; 384748f512ceSopenharmony_ci color: #fff; 384848f512ceSopenharmony_ci } 384948f512ceSopenharmony_ci #searchInput{ 385048f512ceSopenharmony_ci height: 30px; 385148f512ceSopenharmony_ci margin-left: 10px; 385248f512ceSopenharmony_ci margin-right: 10px; 385348f512ceSopenharmony_ci flex: 1; 385448f512ceSopenharmony_ci } 385548f512ceSopenharmony_ci </style> 385648f512ceSopenharmony_ci <div style="position: relative;width: 100%"> 385748f512ceSopenharmony_ci <div id="title">Process <span id="pid"></span> <span id="processName"></span> Thread <span id="tid"></span> <span id="threadName"></span><span id="sample"></span></div> 385848f512ceSopenharmony_ci <canvas id="panel" title=""></canvas> 385948f512ceSopenharmony_ci <div id="controller" style="position: absolute;top: 32px;display: flex;width: 100%"> 386048f512ceSopenharmony_ci <span id="history">Zoom Out</span> 386148f512ceSopenharmony_ci <span id="funcNameSpan"></span> 386248f512ceSopenharmony_ci <span id="percentSpan"></span> 386348f512ceSopenharmony_ci <lit-input id="searchInput" placeholder="search" allow-clear>Search</lit-input> 386448f512ceSopenharmony_ci </div> 386548f512ceSopenharmony_ci </div> 386648f512ceSopenharmony_ci <slot></slot> 386748f512ceSopenharmony_ci ` 386848f512ceSopenharmony_ci } 386948f512ceSopenharmony_ci 387048f512ceSopenharmony_ci connectedCallback() { 387148f512ceSopenharmony_ci this.history = []; 387248f512ceSopenharmony_ci this.panel = this.shadowRoot.getElementById('panel'); 387348f512ceSopenharmony_ci this.controller = this.shadowRoot.getElementById('controller'); 387448f512ceSopenharmony_ci this.funcNameSpan = this.shadowRoot.getElementById('funcNameSpan'); 387548f512ceSopenharmony_ci this.percentSpan = this.shadowRoot.getElementById('percentSpan'); 387648f512ceSopenharmony_ci this.historySpan = this.shadowRoot.getElementById('history'); 387748f512ceSopenharmony_ci this.searchInput = this.shadowRoot.getElementById('searchInput'); 387848f512ceSopenharmony_ci this.pid = this.shadowRoot.getElementById('pid'); 387948f512ceSopenharmony_ci this.tid = this.shadowRoot.getElementById('tid'); 388048f512ceSopenharmony_ci this.processName = this.shadowRoot.getElementById('processName'); 388148f512ceSopenharmony_ci this.threadName = this.shadowRoot.getElementById('threadName'); 388248f512ceSopenharmony_ci this.sample = this.shadowRoot.getElementById('sample'); 388348f512ceSopenharmony_ci this.titleDiv = this.shadowRoot.getElementById('title'); 388448f512ceSopenharmony_ci this.context = this.panel.getContext('2d'); 388548f512ceSopenharmony_ci this.panel.width = this.shadowRoot.host.clientWidth; 388648f512ceSopenharmony_ci this.panel.height = this.shadowRoot.host.clientHeight; 388748f512ceSopenharmony_ci this.historySpan.onclick = e => { 388848f512ceSopenharmony_ci if (this.history.length > 2) { 388948f512ceSopenharmony_ci this.history.pop(); 389048f512ceSopenharmony_ci this.zoomOut(this.history[this.history.length - 1]); 389148f512ceSopenharmony_ci } else if (this.history.length === 2) { 389248f512ceSopenharmony_ci this.history.pop(); 389348f512ceSopenharmony_ci this.zoomOut(this.history[this.history.length - 1]); 389448f512ceSopenharmony_ci this.historySpan.style.display = 'none'; 389548f512ceSopenharmony_ci } else { 389648f512ceSopenharmony_ci this.historySpan.style.display = 'none'; 389748f512ceSopenharmony_ci } 389848f512ceSopenharmony_ci }; 389948f512ceSopenharmony_ci this.searchInput.addEventListener('onPressEnter', (e) => { 390048f512ceSopenharmony_ci this.keyword = e.currentTarget.value; 390148f512ceSopenharmony_ci requestAnimationFrame(this.draw); 390248f512ceSopenharmony_ci }); 390348f512ceSopenharmony_ci this.searchInput.addEventListener('onClear', e => { 390448f512ceSopenharmony_ci this.keyword = null; 390548f512ceSopenharmony_ci requestAnimationFrame(this.draw); 390648f512ceSopenharmony_ci }); 390748f512ceSopenharmony_ci this.panel.onmouseover = (e) => { 390848f512ceSopenharmony_ci this.mouseState = 'mouseOver'; 390948f512ceSopenharmony_ci }; 391048f512ceSopenharmony_ci this.panel.onmouseleave = e => { 391148f512ceSopenharmony_ci this.mouseState = 'mouseLeave'; 391248f512ceSopenharmony_ci this.mouseX = 0; 391348f512ceSopenharmony_ci this.mouseY = 0; 391448f512ceSopenharmony_ci requestAnimationFrame(this.draw) 391548f512ceSopenharmony_ci }; 391648f512ceSopenharmony_ci this.panel.onmousemove = e => { 391748f512ceSopenharmony_ci const pos = e.currentTarget.getBoundingClientRect(); 391848f512ceSopenharmony_ci this.mouseX = e.clientX - pos.left; 391948f512ceSopenharmony_ci this.mouseY = e.clientY - pos.top; 392048f512ceSopenharmony_ci this.mouseState = 'mouseMove'; 392148f512ceSopenharmony_ci requestAnimationFrame(this.draw) 392248f512ceSopenharmony_ci }; 392348f512ceSopenharmony_ci this.panel.onmousedown = e => { 392448f512ceSopenharmony_ci this.mouseState = 'mouseDown'; 392548f512ceSopenharmony_ci }; 392648f512ceSopenharmony_ci this.panel.onmouseup = e => { 392748f512ceSopenharmony_ci this.mouseState = 'mouseUp'; 392848f512ceSopenharmony_ci const pos = e.currentTarget.getBoundingClientRect(); 392948f512ceSopenharmony_ci this.mouseX = e.clientX - pos.left; 393048f512ceSopenharmony_ci this.mouseY = e.clientY - pos.top; 393148f512ceSopenharmony_ci requestAnimationFrame(this.draw); 393248f512ceSopenharmony_ci }; 393348f512ceSopenharmony_ci } 393448f512ceSopenharmony_ci 393548f512ceSopenharmony_ci set data(value) { 393648f512ceSopenharmony_ci this._data = value; 393748f512ceSopenharmony_ci this.type = value.type; 393848f512ceSopenharmony_ci this.reverse = value.reverse || false; 393948f512ceSopenharmony_ci if (value.CallOrder.symbol === -1) { 394048f512ceSopenharmony_ci this._c = value.CallOrder.callStack; 394148f512ceSopenharmony_ci } else { 394248f512ceSopenharmony_ci this._c = [value.CallOrder]; 394348f512ceSopenharmony_ci } 394448f512ceSopenharmony_ci this.history.push(this._c); 394548f512ceSopenharmony_ci this.eventCountAllProcess = data.recordSampleInfo[window.eventIndex].eventCount; 394648f512ceSopenharmony_ci if (value.pid) { 394748f512ceSopenharmony_ci this.eventCountCurrentProcess = 394848f512ceSopenharmony_ci data.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].eventCount; 394948f512ceSopenharmony_ci this.pid.textContent = value.pid; 395048f512ceSopenharmony_ci } 395148f512ceSopenharmony_ci if (value.tid) { 395248f512ceSopenharmony_ci this.eventCountCurrentThread = 395348f512ceSopenharmony_ci data.recordSampleInfo[window.eventIndex].processes.filter( 395448f512ceSopenharmony_ci it => it.pid === value.pid)[0].threads.filter(it => it.tid === value.tid)[0].eventCount; 395548f512ceSopenharmony_ci this.tid.textContent = value.tid; 395648f512ceSopenharmony_ci } 395748f512ceSopenharmony_ci if (value.sampleCount) { 395848f512ceSopenharmony_ci this.sample.textContent = ' (Samples: ' + value.sampleCount + ')'; 395948f512ceSopenharmony_ci } 396048f512ceSopenharmony_ci if (value.processName) { 396148f512ceSopenharmony_ci this.processName.textContent = value.processName ? `(${value.processName})` : ''; 396248f512ceSopenharmony_ci } 396348f512ceSopenharmony_ci if (value.threadName) { 396448f512ceSopenharmony_ci this.threadName.textContent = value.threadName ? `(${value.threadName})` : ''; 396548f512ceSopenharmony_ci } 396648f512ceSopenharmony_ci if (value.funcName) { 396748f512ceSopenharmony_ci this.titleDiv.innerHTML = `${value.funcName}`; 396848f512ceSopenharmony_ci this.controller.style.top = `${this.titleDiv.clientHeight + 10}px`; 396948f512ceSopenharmony_ci } 397048f512ceSopenharmony_ci this.maxDepth = this.getMaxDepth(this.data.CallOrder.callStack) + 5; // 设置最大层级 397148f512ceSopenharmony_ci this.sumCount = this.data.CallOrder.subEvents; // 设置根节点的 sumCount 397248f512ceSopenharmony_ci this.panel.height = this.maxDepth * this.rowHeight; 397348f512ceSopenharmony_ci this.panel.width = this.shadowRoot.host.clientWidth; 397448f512ceSopenharmony_ci this.makeHighRes(this.panel); 397548f512ceSopenharmony_ci requestAnimationFrame(this.draw); 397648f512ceSopenharmony_ci } 397748f512ceSopenharmony_ci 397848f512ceSopenharmony_ci get data() { 397948f512ceSopenharmony_ci return this._data; 398048f512ceSopenharmony_ci } 398148f512ceSopenharmony_ci 398248f512ceSopenharmony_ci set c(value) { 398348f512ceSopenharmony_ci this.historySpan.style.display = 'block'; 398448f512ceSopenharmony_ci this._c = value; 398548f512ceSopenharmony_ci this.history.push(this._c); 398648f512ceSopenharmony_ci // 下面代码实现 canvas 随内容高度变化 398748f512ceSopenharmony_ci requestAnimationFrame(this.draw); 398848f512ceSopenharmony_ci } 398948f512ceSopenharmony_ci 399048f512ceSopenharmony_ci get c() { 399148f512ceSopenharmony_ci return this._c; 399248f512ceSopenharmony_ci } 399348f512ceSopenharmony_ci 399448f512ceSopenharmony_ci zoomOut(value) { 399548f512ceSopenharmony_ci this._c = value; 399648f512ceSopenharmony_ci // 下面代码实现 canvas 随内容高度变化 399748f512ceSopenharmony_ci requestAnimationFrame(this.draw); 399848f512ceSopenharmony_ci } 399948f512ceSopenharmony_ci 400048f512ceSopenharmony_ci makeHighRes(canvas) { 400148f512ceSopenharmony_ci let ctx = canvas.getContext('2d'); 400248f512ceSopenharmony_ci let dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1; 400348f512ceSopenharmony_ci let oldWidth = canvas.width; 400448f512ceSopenharmony_ci let oldHeight = canvas.height; 400548f512ceSopenharmony_ci canvas.width = Math.round(oldWidth * dpr); 400648f512ceSopenharmony_ci canvas.height = Math.round(oldHeight * dpr); 400748f512ceSopenharmony_ci canvas.style.width = oldWidth + 'px'; 400848f512ceSopenharmony_ci canvas.style.height = oldHeight + 'px'; 400948f512ceSopenharmony_ci ctx.scale(dpr, dpr); 401048f512ceSopenharmony_ci this.context = ctx; 401148f512ceSopenharmony_ci return ctx; 401248f512ceSopenharmony_ci } 401348f512ceSopenharmony_ci 401448f512ceSopenharmony_ci draw = () => { 401548f512ceSopenharmony_ci let ctx = this.context; 401648f512ceSopenharmony_ci let grad = ctx.createLinearGradient(0, 0, 0, this.panel.height / 2); // 创建一个渐变色线性对象 401748f512ceSopenharmony_ci grad.addColorStop(0, '#eeeeee'); // 定义渐变色颜色 401848f512ceSopenharmony_ci grad.addColorStop(1, '#efefb1'); 401948f512ceSopenharmony_ci ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象 402048f512ceSopenharmony_ci ctx.fillRect(0, 0, this.panel.width, this.panel.height); 402148f512ceSopenharmony_ci if (this.data) { 402248f512ceSopenharmony_ci if (this.reverse) { 402348f512ceSopenharmony_ci this.drawCReverse( 402448f512ceSopenharmony_ci 0, 402548f512ceSopenharmony_ci this.c, 402648f512ceSopenharmony_ci 1, 402748f512ceSopenharmony_ci { 402848f512ceSopenharmony_ci x: 0, 402948f512ceSopenharmony_ci y: this.rowHeight * 4, 403048f512ceSopenharmony_ci w: this.panel.clientWidth, 403148f512ceSopenharmony_ci h: this.rowHeight 403248f512ceSopenharmony_ci }); 403348f512ceSopenharmony_ci } else { 403448f512ceSopenharmony_ci this.drawC( 403548f512ceSopenharmony_ci 0, 403648f512ceSopenharmony_ci this.c, 403748f512ceSopenharmony_ci 1, 403848f512ceSopenharmony_ci { 403948f512ceSopenharmony_ci x: 0, 404048f512ceSopenharmony_ci y: this.panel.clientHeight - this.rowHeight, 404148f512ceSopenharmony_ci w: this.panel.clientWidth, 404248f512ceSopenharmony_ci h: this.rowHeight 404348f512ceSopenharmony_ci }); 404448f512ceSopenharmony_ci } 404548f512ceSopenharmony_ci } 404648f512ceSopenharmony_ci }; 404748f512ceSopenharmony_ci 404848f512ceSopenharmony_ci getCount(c) { 404948f512ceSopenharmony_ci let count;// 鼠标hover展示的百分比 405048f512ceSopenharmony_ci count = c.subEvents; 405148f512ceSopenharmony_ci count = `${count}`; 405248f512ceSopenharmony_ci return count; 405348f512ceSopenharmony_ci } 405448f512ceSopenharmony_ci 405548f512ceSopenharmony_ci getStatistics(c) { 405648f512ceSopenharmony_ci let statistics;// 鼠标hover展示的百分比 405748f512ceSopenharmony_ci switch (this.type) { 405848f512ceSopenharmony_ci case 1: // current thread 405948f512ceSopenharmony_ci statistics = c.subEvents * 100 / this.eventCountCurrentThread; 406048f512ceSopenharmony_ci statistics = statistics.toFixed(2); 406148f512ceSopenharmony_ci statistics = `${statistics}%`; 406248f512ceSopenharmony_ci break; 406348f512ceSopenharmony_ci case 2: // current process 406448f512ceSopenharmony_ci statistics = c.subEvents * 100 / this.eventCountCurrentProcess; 406548f512ceSopenharmony_ci statistics = statistics.toFixed(2); 406648f512ceSopenharmony_ci statistics = `${statistics}%`; 406748f512ceSopenharmony_ci break; 406848f512ceSopenharmony_ci case 3: // all process 406948f512ceSopenharmony_ci statistics = c.subEvents * 100 / this.eventCountAllProcess; 407048f512ceSopenharmony_ci statistics = statistics.toFixed(2); 407148f512ceSopenharmony_ci statistics = `${statistics}%`; 407248f512ceSopenharmony_ci break; 407348f512ceSopenharmony_ci case 4: // event count 407448f512ceSopenharmony_ci statistics = c.subEvents; 407548f512ceSopenharmony_ci statistics = `${statistics}`; 407648f512ceSopenharmony_ci break; 407748f512ceSopenharmony_ci case 5: // event count in milliseconds 407848f512ceSopenharmony_ci statistics = c.subEvents / 1000000; 407948f512ceSopenharmony_ci statistics = statistics.toFixed(3); 408048f512ceSopenharmony_ci statistics = `${statistics} ms`; 408148f512ceSopenharmony_ci break; 408248f512ceSopenharmony_ci default: //current thread 408348f512ceSopenharmony_ci statistics = c.subEvents * 100 / this.eventCountCurrentThread; 408448f512ceSopenharmony_ci statistics = statistics.toFixed(2); 408548f512ceSopenharmony_ci statistics = `${statistics}%`; 408648f512ceSopenharmony_ci break; 408748f512ceSopenharmony_ci } 408848f512ceSopenharmony_ci return statistics; 408948f512ceSopenharmony_ci } 409048f512ceSopenharmony_ci 409148f512ceSopenharmony_ci // HTML反转义 409248f512ceSopenharmony_ci htmlDecode(text) { 409348f512ceSopenharmony_ci let temp = document.createElement('div'); 409448f512ceSopenharmony_ci temp.innerHTML = text; 409548f512ceSopenharmony_ci let output = temp.innerText || temp.textContent; 409648f512ceSopenharmony_ci temp = null; 409748f512ceSopenharmony_ci return output; 409848f512ceSopenharmony_ci } 409948f512ceSopenharmony_ci 410048f512ceSopenharmony_ci getFunctionName(f) { 410148f512ceSopenharmony_ci let funName = ''; 410248f512ceSopenharmony_ci if (data.SymbolMap[f]) { 410348f512ceSopenharmony_ci funName = data.SymbolMap[f].symbol; 410448f512ceSopenharmony_ci } else { 410548f512ceSopenharmony_ci let f = c[i].symbol; 410648f512ceSopenharmony_ci console.log(`processId:${this.pid.textContent} processName:${this.processName.textContent} 410748f512ceSopenharmony_ci threadId:${this.tid.textContent} threadName:${this.threadName.textContent}`, 410848f512ceSopenharmony_ci c[i], "SymbolMap中没有对应的值"); 410948f512ceSopenharmony_ci } 411048f512ceSopenharmony_ci return this.htmlDecode(funName); 411148f512ceSopenharmony_ci } 411248f512ceSopenharmony_ci 411348f512ceSopenharmony_ci getColor(percent2, funName) { 411448f512ceSopenharmony_ci let heatColor; 411548f512ceSopenharmony_ci if (this.keyword && this.keyword.length > 0 && funName.indexOf(this.keyword) !== -1) { 411648f512ceSopenharmony_ci heatColor = {r: 0x66, g: 0xad, b: 0xff}; 411748f512ceSopenharmony_ci } else { 411848f512ceSopenharmony_ci heatColor = funName.includes("url:") ? this.getJsHeatColor(percent2) : this.getHeatColor(percent2); 411948f512ceSopenharmony_ci } 412048f512ceSopenharmony_ci return heatColor; 412148f512ceSopenharmony_ci } 412248f512ceSopenharmony_ci 412348f512ceSopenharmony_ci drawCReverse = (parentEvents, c, dept, rect) => { 412448f512ceSopenharmony_ci let ctx = this.context; 412548f512ceSopenharmony_ci let offset = 0; 412648f512ceSopenharmony_ci if (parentEvents === 0) { 412748f512ceSopenharmony_ci parentEvents = c.reduce((acc, cur) => acc + cur.subEvents, 0); 412848f512ceSopenharmony_ci } 412948f512ceSopenharmony_ci for (let i = 0; i < c.length; i++) { 413048f512ceSopenharmony_ci let funName = this.getFunctionName(c[i].symbol); 413148f512ceSopenharmony_ci let funcId = c[i].symbol; 413248f512ceSopenharmony_ci let percent = c[i].subEvents * 100 / parentEvents; 413348f512ceSopenharmony_ci let percent2 = c[i].subEvents * 100 / this.sumCount; 413448f512ceSopenharmony_ci if (percent2 < 0.1) continue // 过滤掉 百分比为0.1一下的节点 413548f512ceSopenharmony_ci let heatColor = this.getColor(percent2, funName); 413648f512ceSopenharmony_ci let w = rect.w * (percent / 100.0); 413748f512ceSopenharmony_ci if (w < 1) { 413848f512ceSopenharmony_ci w = 1; 413948f512ceSopenharmony_ci } 414048f512ceSopenharmony_ci let _x = rect.x + offset; 414148f512ceSopenharmony_ci // 绘制填充矩形 414248f512ceSopenharmony_ci ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`; 414348f512ceSopenharmony_ci ctx.fillRect(_x, rect.y + 2, w, rect.h - 2); 414448f512ceSopenharmony_ci // 绘制文本 414548f512ceSopenharmony_ci ctx.fillStyle = 'rgba(0,0,0,1)'; 414648f512ceSopenharmony_ci let txtWidth = ctx.measureText(funName).width;// 文本长度 414748f512ceSopenharmony_ci let chartWidth = txtWidth / funName.length;// 每个字符长度 414848f512ceSopenharmony_ci let number = (w - 6) / chartWidth;// 可以显示多少字符 414948f512ceSopenharmony_ci if (number >= 4 && number < funName.length - 3) { 415048f512ceSopenharmony_ci ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6); 415148f512ceSopenharmony_ci } else if (number >= 4) { 415248f512ceSopenharmony_ci ctx.fillText(funName, _x + 3, rect.y + 13, w - 6); 415348f512ceSopenharmony_ci } 415448f512ceSopenharmony_ci let _rect = { 415548f512ceSopenharmony_ci x: _x, y: rect.y, w: w, h: rect.h 415648f512ceSopenharmony_ci }; 415748f512ceSopenharmony_ci c[i].rect = _rect; 415848f512ceSopenharmony_ci 415948f512ceSopenharmony_ci if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > rect.h * 3 + (dept) * rect.h && 416048f512ceSopenharmony_ci this.mouseY < rect.h * 3 + (dept + 1) * rect.h) { 416148f512ceSopenharmony_ci if (this.mouseState === 'mouseMove') { 416248f512ceSopenharmony_ci // 绘制边框矩形 416348f512ceSopenharmony_ci ctx.lineWidth = 2; 416448f512ceSopenharmony_ci ctx.strokeStyle = `#000000`; 416548f512ceSopenharmony_ci ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h); 416648f512ceSopenharmony_ci let statisticNum = this.getStatistics(c[i]); 416748f512ceSopenharmony_ci let count = this.getCount(c[i]); 416848f512ceSopenharmony_ci this.funcNameSpan.textContent = funName; 416948f512ceSopenharmony_ci if (this.type === 1 || this.type === 2 || this.type === 3) { 417048f512ceSopenharmony_ci this.panel.title = funName + ': [' + count + ' ' + statisticNum + ']'; 417148f512ceSopenharmony_ci } else { 417248f512ceSopenharmony_ci this.panel.title = funName + ': [' + statisticNum + ']'; 417348f512ceSopenharmony_ci } 417448f512ceSopenharmony_ci this.percentSpan.textContent = statisticNum; 417548f512ceSopenharmony_ci } else { 417648f512ceSopenharmony_ci if (this.mouseState === 'mouseUp') { 417748f512ceSopenharmony_ci this.mouseState = null; 417848f512ceSopenharmony_ci if (!this.compareNodes(this.c, [c[i]])) { 417948f512ceSopenharmony_ci this.c = [c[i]]; 418048f512ceSopenharmony_ci } 418148f512ceSopenharmony_ci } 418248f512ceSopenharmony_ci } 418348f512ceSopenharmony_ci } else { 418448f512ceSopenharmony_ci ctx.lineWidth = 1; 418548f512ceSopenharmony_ci } 418648f512ceSopenharmony_ci offset += w; 418748f512ceSopenharmony_ci // 递归绘制子节点 418848f512ceSopenharmony_ci if (c[i].callStack && c[i].callStack.length > 0) { 418948f512ceSopenharmony_ci _rect.y = _rect.y + _rect.h; 419048f512ceSopenharmony_ci this.drawCReverse(c[i].subEvents, [i].callStack, dept + 1, _rect); 419148f512ceSopenharmony_ci } 419248f512ceSopenharmony_ci } 419348f512ceSopenharmony_ci } 419448f512ceSopenharmony_ci drawC = (parentEvents, c, dept, rect) => { 419548f512ceSopenharmony_ci let ctx = this.context; 419648f512ceSopenharmony_ci let offset = 0; 419748f512ceSopenharmony_ci if (parentEvents === 0) { 419848f512ceSopenharmony_ci parentEvents = c.reduce((acc, cur) => acc + cur.subEvents, 0); 419948f512ceSopenharmony_ci } 420048f512ceSopenharmony_ci for (let i = 0; i < c.length; i++) { 420148f512ceSopenharmony_ci let funName = this.getFunctionName(c[i].symbol); 420248f512ceSopenharmony_ci let funcId = c[i].symbol; 420348f512ceSopenharmony_ci let percent = c[i].subEvents * 100 / parentEvents;// sumCount; 420448f512ceSopenharmony_ci let percent2 = c[i].subEvents * 100 / this.sumCount; 420548f512ceSopenharmony_ci if (percent2 < 0.1) continue // 过滤掉 百分比为0.1一下的节点 420648f512ceSopenharmony_ci let heatColor = this.getColor(percent2, funName); 420748f512ceSopenharmony_ci let w = rect.w * (percent / 100.0); 420848f512ceSopenharmony_ci if (w < 1) { 420948f512ceSopenharmony_ci w = 1; 421048f512ceSopenharmony_ci } 421148f512ceSopenharmony_ci let _x = rect.x + offset; 421248f512ceSopenharmony_ci // 绘制填充矩形 421348f512ceSopenharmony_ci ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`; 421448f512ceSopenharmony_ci ctx.fillRect(_x, rect.y + 2, w, rect.h - 2); 421548f512ceSopenharmony_ci // 绘制文本 421648f512ceSopenharmony_ci ctx.fillStyle = 'rgba(0,0,0,1)'; 421748f512ceSopenharmony_ci let txtWidth = ctx.measureText(funName).width;// 文本长度 421848f512ceSopenharmony_ci let chartWidth = txtWidth / funName.length;// 每个字符长度 421948f512ceSopenharmony_ci let number = (w - 6) / chartWidth;// 可以显示多少字符 422048f512ceSopenharmony_ci if (number >= 4 && number < funName.length - 3) { 422148f512ceSopenharmony_ci ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6); 422248f512ceSopenharmony_ci } else if (number >= 4) { 422348f512ceSopenharmony_ci ctx.fillText(funName, _x + 3, rect.y + 13, w - 6); 422448f512ceSopenharmony_ci } 422548f512ceSopenharmony_ci let _rect = { 422648f512ceSopenharmony_ci x: _x, y: rect.y, w: w, h: rect.h 422748f512ceSopenharmony_ci }; 422848f512ceSopenharmony_ci c[i].rect = _rect; 422948f512ceSopenharmony_ci 423048f512ceSopenharmony_ci if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > (this.maxDepth - dept) * rect.h && 423148f512ceSopenharmony_ci this.mouseY < (this.maxDepth - dept + 1) * rect.h) { 423248f512ceSopenharmony_ci if (this.mouseState === 'mouseMove') { 423348f512ceSopenharmony_ci // 绘制边框矩形 423448f512ceSopenharmony_ci ctx.lineWidth = 2; 423548f512ceSopenharmony_ci ctx.strokeStyle = `#000000`; 423648f512ceSopenharmony_ci ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h); 423748f512ceSopenharmony_ci let statisticNum = this.getStatistics(c[i]); 423848f512ceSopenharmony_ci let count = this.getCount(c[i]); 423948f512ceSopenharmony_ci this.funcNameSpan.textContent = funName; 424048f512ceSopenharmony_ci if (this.type === 1 || this.type === 2 || this.type === 3) { 424148f512ceSopenharmony_ci this.panel.title = funName + ': [' + count + ' ' + statisticNum + ']'; 424248f512ceSopenharmony_ci } else { 424348f512ceSopenharmony_ci this.panel.title = funName + ': [' + statisticNum + ']'; 424448f512ceSopenharmony_ci } 424548f512ceSopenharmony_ci this.percentSpan.textContent = statisticNum; 424648f512ceSopenharmony_ci } else { 424748f512ceSopenharmony_ci if (this.mouseState === 'mouseUp') { 424848f512ceSopenharmony_ci this.mouseState = null; 424948f512ceSopenharmony_ci if (!this.compareNodes(this.c, [c[i]])) { 425048f512ceSopenharmony_ci this.c = [c[i]]; 425148f512ceSopenharmony_ci } 425248f512ceSopenharmony_ci } 425348f512ceSopenharmony_ci } 425448f512ceSopenharmony_ci } else { 425548f512ceSopenharmony_ci ctx.lineWidth = 1; 425648f512ceSopenharmony_ci } 425748f512ceSopenharmony_ci offset += w; 425848f512ceSopenharmony_ci // 递归绘制子节点 425948f512ceSopenharmony_ci if (c[i].callStack && c[i].callStack.length > 0) { 426048f512ceSopenharmony_ci _rect.y = _rect.y - _rect.h; 426148f512ceSopenharmony_ci this.drawC(c[i].subEvents, c[i].callStack, dept + 1, _rect); 426248f512ceSopenharmony_ci } 426348f512ceSopenharmony_ci } 426448f512ceSopenharmony_ci } 426548f512ceSopenharmony_ci 426648f512ceSopenharmony_ci compareNode(na, nb) { 426748f512ceSopenharmony_ci let res = false; 426848f512ceSopenharmony_ci if (na.selfEvents === nb.selfEvents && na.subEvents === nb.subEvents && na.symbol === nb.symbol) { 426948f512ceSopenharmony_ci res = this.compareNodes(na.callStack || [], nb.callStack || []); 427048f512ceSopenharmony_ci } 427148f512ceSopenharmony_ci return res; 427248f512ceSopenharmony_ci } 427348f512ceSopenharmony_ci 427448f512ceSopenharmony_ci compareNodes(a, b) { 427548f512ceSopenharmony_ci let res = false; 427648f512ceSopenharmony_ci if (a.length === b.length) { 427748f512ceSopenharmony_ci if (a.length === 0) { 427848f512ceSopenharmony_ci return true; 427948f512ceSopenharmony_ci } 428048f512ceSopenharmony_ci for (let i = 0; i < a.length; i++) { 428148f512ceSopenharmony_ci res = this.compareNode(a[i], b[i]); 428248f512ceSopenharmony_ci } 428348f512ceSopenharmony_ci } 428448f512ceSopenharmony_ci return res; 428548f512ceSopenharmony_ci } 428648f512ceSopenharmony_ci 428748f512ceSopenharmony_ci getMaxDepth(nodes) { 428848f512ceSopenharmony_ci let isArray = Array.isArray(nodes); 428948f512ceSopenharmony_ci let sumCount; 429048f512ceSopenharmony_ci if (isArray) { 429148f512ceSopenharmony_ci sumCount = nodes.reduce((acc, cur) => acc + cur.subEvents, 0); 429248f512ceSopenharmony_ci } else { 429348f512ceSopenharmony_ci sumCount = nodes.subEvents; 429448f512ceSopenharmony_ci } 429548f512ceSopenharmony_ci let width = sumCount * 100.0 / this.sumCount; 429648f512ceSopenharmony_ci if (width < 0.1) { 429748f512ceSopenharmony_ci return 0; 429848f512ceSopenharmony_ci } 429948f512ceSopenharmony_ci let children = isArray ? this.splitChildrenForNodes(nodes) : nodes.callStack; 430048f512ceSopenharmony_ci let childDepth = 0; 430148f512ceSopenharmony_ci if (children) { 430248f512ceSopenharmony_ci for (let child of children) { 430348f512ceSopenharmony_ci childDepth = Math.max(childDepth, this.getMaxDepth(child)); 430448f512ceSopenharmony_ci } 430548f512ceSopenharmony_ci } 430648f512ceSopenharmony_ci return childDepth + 1; 430748f512ceSopenharmony_ci } 430848f512ceSopenharmony_ci 430948f512ceSopenharmony_ci splitChildrenForNodes(nodes) { 431048f512ceSopenharmony_ci let map = new Map(); 431148f512ceSopenharmony_ci for (let node of nodes) { 431248f512ceSopenharmony_ci for (let child of node.callStack) { 431348f512ceSopenharmony_ci let subNodes = map.get(child.symbol); 431448f512ceSopenharmony_ci if (subNodes) { 431548f512ceSopenharmony_ci subNodes.push(child); 431648f512ceSopenharmony_ci } else { 431748f512ceSopenharmony_ci map.set(child.symbol, [child]); 431848f512ceSopenharmony_ci } 431948f512ceSopenharmony_ci } 432048f512ceSopenharmony_ci } 432148f512ceSopenharmony_ci let res = []; 432248f512ceSopenharmony_ci for (let subNodes of map.values()) { 432348f512ceSopenharmony_ci res.push(subNodes.length === 1 ? subNodes[0] : subNodes); 432448f512ceSopenharmony_ci } 432548f512ceSopenharmony_ci return res; 432648f512ceSopenharmony_ci } 432748f512ceSopenharmony_ci 432848f512ceSopenharmony_ci getHeatColor(widthPercentage) { 432948f512ceSopenharmony_ci return { 433048f512ceSopenharmony_ci r: Math.floor(245 + 10 * (1 - widthPercentage * 0.01)), 433148f512ceSopenharmony_ci g: Math.floor(110 + 105 * (1 - widthPercentage * 0.01)), 433248f512ceSopenharmony_ci b: 100, 433348f512ceSopenharmony_ci }; 433448f512ceSopenharmony_ci } 433548f512ceSopenharmony_ci 433648f512ceSopenharmony_ci getJsHeatColor(widthPercentage) { 433748f512ceSopenharmony_ci return { 433848f512ceSopenharmony_ci r: Math.floor(20 + 120 * (1 - widthPercentage * 0.01)), 433948f512ceSopenharmony_ci g: 200, 434048f512ceSopenharmony_ci b: Math.floor(0 + 120 * (1 - widthPercentage * 0.01)), 434148f512ceSopenharmony_ci }; 434248f512ceSopenharmony_ci } 434348f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 434448f512ceSopenharmony_ci } 434548f512ceSopenharmony_ci } 434648f512ceSopenharmony_ci if (!customElements.get('app-chart-flame')) { 434748f512ceSopenharmony_ci customElements.define('app-chart-flame', AppChartFlame); 434848f512ceSopenharmony_ci } 434948f512ceSopenharmony_ci 435048f512ceSopenharmony_ci class AppChartStatistics extends HTMLElement { 435148f512ceSopenharmony_ci static get observedAttributes() { 435248f512ceSopenharmony_ci return ['data']; 435348f512ceSopenharmony_ci } 435448f512ceSopenharmony_ci 435548f512ceSopenharmony_ci constructor() { 435648f512ceSopenharmony_ci super(); 435748f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 435848f512ceSopenharmony_ci this.color = [ 435948f512ceSopenharmony_ci '#3391ff', // red 436048f512ceSopenharmony_ci '#ff9201', // green 436148f512ceSopenharmony_ci '#008078', // indigo 436248f512ceSopenharmony_ci '#0094c6', // orange 436348f512ceSopenharmony_ci '#ff7500', // light green 436448f512ceSopenharmony_ci '#2db3aa', // deep purple 436548f512ceSopenharmony_ci '#0076ff', // pink 436648f512ceSopenharmony_ci '#66adff', // purple 436748f512ceSopenharmony_ci '#73e6de', // blue 436848f512ceSopenharmony_ci '#535da6', // light blue 436948f512ceSopenharmony_ci '#ffab40', // lime 437048f512ceSopenharmony_ci '#38428c', // cyan 437148f512ceSopenharmony_ci '#7cdeff', // deep orange 437248f512ceSopenharmony_ci '#fbbf00', // blue gray 437348f512ceSopenharmony_ci '#2db4e2', // amber #ffc105 437448f512ceSopenharmony_ci '#ffd44a', // brown 437548f512ceSopenharmony_ci '#7a84cc', // teal 437648f512ceSopenharmony_ci '#ffe593' // yellow 0xffec3d 437748f512ceSopenharmony_ci ]; 437848f512ceSopenharmony_ci shadowRoot.innerHTML = ` 437948f512ceSopenharmony_ci <style> 438048f512ceSopenharmony_ci :host{ 438148f512ceSopenharmony_ci font-size:inherit; 438248f512ceSopenharmony_ci display:inline-flex; 438348f512ceSopenharmony_ci align-items: center; 438448f512ceSopenharmony_ci justify-content:center; 438548f512ceSopenharmony_ci padding: 0; 438648f512ceSopenharmony_ci margin: 0; 438748f512ceSopenharmony_ci width: 100%; 438848f512ceSopenharmony_ci } 438948f512ceSopenharmony_ci </style> 439048f512ceSopenharmony_ci <div style="display: flex;flex-direction: column;width: 100%;height: auto"> 439148f512ceSopenharmony_ci <lit-table id="tbl1" noheader style="height: auto;width: 100%;"> 439248f512ceSopenharmony_ci <lit-table-column title="key" data-index="key" width="200px" key="key" ></lit-table-column> 439348f512ceSopenharmony_ci <lit-table-column title="value" data-index="value" key="value"></lit-table-column> 439448f512ceSopenharmony_ci <lit-table-column title="time" data-index="time" key="time"></lit-table-column> 439548f512ceSopenharmony_ci </lit-table> 439648f512ceSopenharmony_ci <div id="back" style="display: none;cursor: pointer; 439748f512ceSopenharmony_ci border-radius: 5px;width: 35px;justify-content: center;text-align: center; 439848f512ceSopenharmony_ci padding: 7px 15px 7px 15px;border: 1px solid #aaa;color: #555">back</div> 439948f512ceSopenharmony_ci <lit-pie-chart id="chart" style="height: auto;width: 100%"></lit-pie-chart> 440048f512ceSopenharmony_ci </div> 440148f512ceSopenharmony_ci <slot></slot> 440248f512ceSopenharmony_ci `; 440348f512ceSopenharmony_ci } 440448f512ceSopenharmony_ci 440548f512ceSopenharmony_ci set data(json) { 440648f512ceSopenharmony_ci if (json.recordSampleInfo && json.recordSampleInfo.length > 0) { 440748f512ceSopenharmony_ci this.eventInfo = json.recordSampleInfo[window.eventIndex]; 440848f512ceSopenharmony_ci } 440948f512ceSopenharmony_ci this.processNameMap = json.processNameMap; 441048f512ceSopenharmony_ci this.threadNameMap = json.threadNameMap; 441148f512ceSopenharmony_ci this.symbolsFileList = json.symbolsFileList; 441248f512ceSopenharmony_ci this.SymbolMap = json.SymbolMap; 441348f512ceSopenharmony_ci let rows = []; 441448f512ceSopenharmony_ci if (json.deviceTime) { 441548f512ceSopenharmony_ci rows.push({key: 'Device Time', value: json.deviceTime,time:''}); 441648f512ceSopenharmony_ci } 441748f512ceSopenharmony_ci if (json.deviceType) { 441848f512ceSopenharmony_ci rows.push({key: 'Device Type', value: json.deviceType,time:''}); 441948f512ceSopenharmony_ci } 442048f512ceSopenharmony_ci if (json.osVersion) { 442148f512ceSopenharmony_ci rows.push({key: 'OS Version', value: json.osVersion,time:''}); 442248f512ceSopenharmony_ci } 442348f512ceSopenharmony_ci rows.push({key: 'Script Version', value: '1.0.0.240604',time:''}); 442448f512ceSopenharmony_ci if (json.deviceCommandLine) { 442548f512ceSopenharmony_ci rows.push({key:'Record cmdline',value: json.deviceCommandLine,time:''}); 442648f512ceSopenharmony_ci } 442748f512ceSopenharmony_ci rows.push({key:'Total Samples',value: '' + json.totalRecordSamples,time:''}); 442848f512ceSopenharmony_ci if (this.eventInfo) { 442948f512ceSopenharmony_ci rows.push({key:'Event Type', 443048f512ceSopenharmony_ci value:this.eventInfo.eventConfigName,time:this.getSampleWeight(this.eventInfo.eventCount)}); 443148f512ceSopenharmony_ci this.initChartData(); 443248f512ceSopenharmony_ci } 443348f512ceSopenharmony_ci this.table.dataSource = rows; 443448f512ceSopenharmony_ci } 443548f512ceSopenharmony_ci 443648f512ceSopenharmony_ci getSampleWeight(count) { 443748f512ceSopenharmony_ci if (this.eventInfo.eventConfigName.includes('task-clock') || 443848f512ceSopenharmony_ci this.eventInfo.eventConfigName.includes('cpu-clock')) { 443948f512ceSopenharmony_ci return (count / 1000000.0).toFixed(3) + ' ms'; 444048f512ceSopenharmony_ci } else { 444148f512ceSopenharmony_ci return ''+count; 444248f512ceSopenharmony_ci } 444348f512ceSopenharmony_ci } 444448f512ceSopenharmony_ci 444548f512ceSopenharmony_ci getProcessName(pid) { 444648f512ceSopenharmony_ci let name = this.processNameMap[pid]; 444748f512ceSopenharmony_ci return name ? `Process: ${pid} (${name})` : 'Process: '+pid.toString(); 444848f512ceSopenharmony_ci } 444948f512ceSopenharmony_ci 445048f512ceSopenharmony_ci getThreadName(tid) { 445148f512ceSopenharmony_ci let name = this.threadNameMap[tid]; 445248f512ceSopenharmony_ci return name ? `Thread: ${tid} (${name})` : 'Thread: '+tid.toString(); 445348f512ceSopenharmony_ci } 445448f512ceSopenharmony_ci 445548f512ceSopenharmony_ci getLibName(fileId) { 445648f512ceSopenharmony_ci return 'Library: '+this.symbolsFileList[fileId]; 445748f512ceSopenharmony_ci } 445848f512ceSopenharmony_ci 445948f512ceSopenharmony_ci getFuncName(funcId) { 446048f512ceSopenharmony_ci return 'Function: '+this.SymbolMap[funcId].symbol; 446148f512ceSopenharmony_ci } 446248f512ceSopenharmony_ci 446348f512ceSopenharmony_ci connectedCallback() { 446448f512ceSopenharmony_ci this.table = this.shadowRoot.getElementById('tbl1'); 446548f512ceSopenharmony_ci this.chart = this.shadowRoot.getElementById('chart'); 446648f512ceSopenharmony_ci this.backBt = this.shadowRoot.getElementById('back'); 446748f512ceSopenharmony_ci this.backBt.addEventListener('mouseover',e=>{ 446848f512ceSopenharmony_ci this.backBt.style.borderColor = '#42b983'; 446948f512ceSopenharmony_ci this.backBt.style.color = '#42b983'; 447048f512ceSopenharmony_ci }); 447148f512ceSopenharmony_ci this.backBt.addEventListener('mouseout',e=>{ 447248f512ceSopenharmony_ci this.backBt.style.borderColor = '#aaa'; 447348f512ceSopenharmony_ci this.backBt.style.color = '#555'; 447448f512ceSopenharmony_ci }); 447548f512ceSopenharmony_ci this.chartMaxCount = 126; 447648f512ceSopenharmony_ci this.backBt.addEventListener('click',this.back.bind(this)); 447748f512ceSopenharmony_ci this.chart.chartClickListener = (item) => { 447848f512ceSopenharmony_ci if (item && item.id !== -1) { 447948f512ceSopenharmony_ci let ds = this.table.dataSource; 448048f512ceSopenharmony_ci if (item.name.startsWith('Process')) { 448148f512ceSopenharmony_ci let pName = item.name.slice(8); 448248f512ceSopenharmony_ci if (!ds.find(item => item.key === 'Process')) { 448348f512ceSopenharmony_ci ds.push({key:'Process',value:pName,time:item.time}); 448448f512ceSopenharmony_ci } 448548f512ceSopenharmony_ci this.chart.title = 'Threads in process ' + pName; 448648f512ceSopenharmony_ci let find = this.eventInfo.processes.find(process => item.id === process.pid); 448748f512ceSopenharmony_ci this.clickProcess(find); 448848f512ceSopenharmony_ci } else if (item.name.startsWith('Thread')) { 448948f512ceSopenharmony_ci let tName = item.name.slice(7); 449048f512ceSopenharmony_ci if (!ds.find(item => item.key === 'Thread')) { 449148f512ceSopenharmony_ci ds.push({key:'Thread',value:tName,time:item.time}); 449248f512ceSopenharmony_ci } 449348f512ceSopenharmony_ci this.chart.title = 'Libraries in thread ' + tName; 449448f512ceSopenharmony_ci let find = this.clickProcessData.threads.find(thread => item.id === thread.tid); 449548f512ceSopenharmony_ci this.clickThread(find); 449648f512ceSopenharmony_ci } else if (item.name.startsWith('Library')) { 449748f512ceSopenharmony_ci let libName = item.name.slice(8); 449848f512ceSopenharmony_ci if (!ds.find(item => item.key === 'Library')) { 449948f512ceSopenharmony_ci ds.push({key:'Library',value:libName,time:item.time}); 450048f512ceSopenharmony_ci } 450148f512ceSopenharmony_ci this.chart.title = 'Function in library ' + libName; 450248f512ceSopenharmony_ci let find = this.clickThreadData.libs.find(lib => item.id === lib.fileId); 450348f512ceSopenharmony_ci this.clickLib(find); 450448f512ceSopenharmony_ci } 450548f512ceSopenharmony_ci this.table.dataSource = ds; 450648f512ceSopenharmony_ci } 450748f512ceSopenharmony_ci }; 450848f512ceSopenharmony_ci } 450948f512ceSopenharmony_ci 451048f512ceSopenharmony_ci initChartData() { 451148f512ceSopenharmony_ci if (Array.isArray(this.eventInfo.processes)) { 451248f512ceSopenharmony_ci function compare(property) { 451348f512ceSopenharmony_ci return function (a,b) { 451448f512ceSopenharmony_ci return b[property] - a[property]; 451548f512ceSopenharmony_ci } 451648f512ceSopenharmony_ci } 451748f512ceSopenharmony_ci this.eventInfo.processes.sort(compare('eventCount')); 451848f512ceSopenharmony_ci let chartSource = []; 451948f512ceSopenharmony_ci let otherValue = 0; 452048f512ceSopenharmony_ci this.eventInfo.processes.forEach((process,index) => { 452148f512ceSopenharmony_ci if (index < 14) { 452248f512ceSopenharmony_ci chartSource.push({ 452348f512ceSopenharmony_ci id:process.pid, 452448f512ceSopenharmony_ci name: this.getProcessName(process.pid), 452548f512ceSopenharmony_ci value: (process.eventCount / this.eventInfo.eventCount).toFixed(3), 452648f512ceSopenharmony_ci color: this.color[index], 452748f512ceSopenharmony_ci time: this.getSampleWeight(process.eventCount) 452848f512ceSopenharmony_ci }); 452948f512ceSopenharmony_ci } else { 453048f512ceSopenharmony_ci otherValue += process.eventCount; 453148f512ceSopenharmony_ci } 453248f512ceSopenharmony_ci }); 453348f512ceSopenharmony_ci if (otherValue > 0) { 453448f512ceSopenharmony_ci chartSource.push({ 453548f512ceSopenharmony_ci id : -1, 453648f512ceSopenharmony_ci name: 'Other: Represents a collection of items which proporiton of count ranked very low', 453748f512ceSopenharmony_ci value: (otherValue / this.eventInfo.eventCount).toFixed(3), 453848f512ceSopenharmony_ci color: '#888888', 453948f512ceSopenharmony_ci time: this.getSampleWeight(otherValue) 454048f512ceSopenharmony_ci }); 454148f512ceSopenharmony_ci } 454248f512ceSopenharmony_ci chartSource.sort((a, b) => { return b.time - a.time }); 454348f512ceSopenharmony_ci this.processDs = chartSource; 454448f512ceSopenharmony_ci this.chart.dataSource = chartSource; 454548f512ceSopenharmony_ci this.chart.title = 'Processes in event type ' + this.eventInfo.eventConfigName; 454648f512ceSopenharmony_ci } 454748f512ceSopenharmony_ci } 454848f512ceSopenharmony_ci 454948f512ceSopenharmony_ci back() { 455048f512ceSopenharmony_ci if (this.currentLevel === 'Function in Library') { 455148f512ceSopenharmony_ci this.chart.title = 'Libraries in thread ' + this.getThreadName(this.clickThreadData.tid).slice(7); 455248f512ceSopenharmony_ci this.chart.dataSource = this.libDs; 455348f512ceSopenharmony_ci this.currentLevel = 'Library in Thread'; 455448f512ceSopenharmony_ci } else if (this.currentLevel === 'Library in Thread') { 455548f512ceSopenharmony_ci this.chart.title = 'Threads in process ' + this.getProcessName(this.clickProcessData.pid).slice(8); 455648f512ceSopenharmony_ci this.chart.dataSource = this.threadDs; 455748f512ceSopenharmony_ci this.currentLevel = 'Thread in Process'; 455848f512ceSopenharmony_ci } else { 455948f512ceSopenharmony_ci this.chart.title = 'Processes in event type ' + this.eventInfo.eventConfigName; 456048f512ceSopenharmony_ci this.chart.dataSource = this.processDs; 456148f512ceSopenharmony_ci this.backBt.style.display = 'none'; 456248f512ceSopenharmony_ci } 456348f512ceSopenharmony_ci let row = this.table.dataSource; 456448f512ceSopenharmony_ci if (Array.isArray(row)) { 456548f512ceSopenharmony_ci row.pop(); 456648f512ceSopenharmony_ci this.table.dataSource = row; 456748f512ceSopenharmony_ci } 456848f512ceSopenharmony_ci } 456948f512ceSopenharmony_ci 457048f512ceSopenharmony_ci /** 457148f512ceSopenharmony_ci * chart click process 457248f512ceSopenharmony_ci * 457348f512ceSopenharmony_ci * @param process 457448f512ceSopenharmony_ci */ 457548f512ceSopenharmony_ci clickProcess(process) 457648f512ceSopenharmony_ci { 457748f512ceSopenharmony_ci if (process && process.threads) { 457848f512ceSopenharmony_ci this.backBt.style.display = 'flex'; 457948f512ceSopenharmony_ci this.currentLevel = 'Thread in Process'; 458048f512ceSopenharmony_ci this.clickProcessData = process; 458148f512ceSopenharmony_ci let chartSource = []; 458248f512ceSopenharmony_ci let chartTotal = 0; 458348f512ceSopenharmony_ci let count = 0; 458448f512ceSopenharmony_ci let filter = process.threads.filter(item => item.eventCount / process.eventCount > 0.001); 458548f512ceSopenharmony_ci let total = 0; 458648f512ceSopenharmony_ci filter.forEach(item=>{ total += item.eventCount }); 458748f512ceSopenharmony_ci total = process.eventCount; 458848f512ceSopenharmony_ci for (let item of filter) { 458948f512ceSopenharmony_ci if (count >= this.chartMaxCount) { 459048f512ceSopenharmony_ci break; 459148f512ceSopenharmony_ci } 459248f512ceSopenharmony_ci chartSource.push({ 459348f512ceSopenharmony_ci id:item.tid, 459448f512ceSopenharmony_ci name: this.getThreadName(item.tid), 459548f512ceSopenharmony_ci value: (item.eventCount / total).toFixed(6), 459648f512ceSopenharmony_ci color: this.color[count % this.color.length], 459748f512ceSopenharmony_ci time: this.getSampleWeight(item.eventCount) 459848f512ceSopenharmony_ci }); 459948f512ceSopenharmony_ci chartTotal += item.eventCount; 460048f512ceSopenharmony_ci count++; 460148f512ceSopenharmony_ci } 460248f512ceSopenharmony_ci if (count < this.chartMaxCount && chartTotal < process.eventCount) { 460348f512ceSopenharmony_ci chartSource.push({ 460448f512ceSopenharmony_ci id : -1, 460548f512ceSopenharmony_ci name: 'Other: Represents a collection of items which proporiton of count less than 1% or ranked very low', 460648f512ceSopenharmony_ci value: ((process.eventCount - chartTotal) / process.eventCount).toFixed(6), 460748f512ceSopenharmony_ci color: '#888888', 460848f512ceSopenharmony_ci time: this.getSampleWeight(process.eventCount - chartTotal) 460948f512ceSopenharmony_ci }); 461048f512ceSopenharmony_ci } else { 461148f512ceSopenharmony_ci this.addOtherItem(count, total, chartTotal, chartSource); 461248f512ceSopenharmony_ci } 461348f512ceSopenharmony_ci chartSource.sort((a, b) => { return b.time - a.time }); 461448f512ceSopenharmony_ci this.threadDs = chartSource; 461548f512ceSopenharmony_ci this.chart.dataSource = chartSource; 461648f512ceSopenharmony_ci } 461748f512ceSopenharmony_ci } 461848f512ceSopenharmony_ci 461948f512ceSopenharmony_ci /** 462048f512ceSopenharmony_ci * chart click thread 462148f512ceSopenharmony_ci * @param thread 462248f512ceSopenharmony_ci */ 462348f512ceSopenharmony_ci clickThread(thread) 462448f512ceSopenharmony_ci { 462548f512ceSopenharmony_ci if (thread && thread.libs) { 462648f512ceSopenharmony_ci this.currentLevel = 'Library in Thread'; 462748f512ceSopenharmony_ci let chartSource = []; 462848f512ceSopenharmony_ci let chartTotal = 0; 462948f512ceSopenharmony_ci let count = 0; 463048f512ceSopenharmony_ci this.clickThreadData = thread; 463148f512ceSopenharmony_ci let filter = thread.libs.filter(item => item.eventCount / thread.eventCount > 0.001); 463248f512ceSopenharmony_ci let total = 0; 463348f512ceSopenharmony_ci filter.forEach(item=>{ total += item.eventCount }); 463448f512ceSopenharmony_ci total = thread.eventCount; 463548f512ceSopenharmony_ci for (let item of filter) { 463648f512ceSopenharmony_ci if (count < this.chartMaxCount) { 463748f512ceSopenharmony_ci chartSource.push({ 463848f512ceSopenharmony_ci id:item.fileId, 463948f512ceSopenharmony_ci name: this.getLibName(item.fileId), 464048f512ceSopenharmony_ci value: (item.eventCount / total).toFixed(6), 464148f512ceSopenharmony_ci color: this.color[count % this.color.length], 464248f512ceSopenharmony_ci time: this.getSampleWeight(item.eventCount) 464348f512ceSopenharmony_ci }); 464448f512ceSopenharmony_ci chartTotal += item.eventCount; 464548f512ceSopenharmony_ci count ++; 464648f512ceSopenharmony_ci } 464748f512ceSopenharmony_ci if (count >= this.chartMaxCount) { 464848f512ceSopenharmony_ci break; 464948f512ceSopenharmony_ci } 465048f512ceSopenharmony_ci } 465148f512ceSopenharmony_ci if (count < this.chartMaxCount && chartTotal < thread.eventCount) { 465248f512ceSopenharmony_ci chartSource.push({ 465348f512ceSopenharmony_ci id : -1, 465448f512ceSopenharmony_ci name: 'Other: Represents a collection of items which proporiton of count less than 1% or ranked very low', 465548f512ceSopenharmony_ci value: ((thread.eventCount - chartTotal) / thread.eventCount).toFixed(6), 465648f512ceSopenharmony_ci color: '#888888', 465748f512ceSopenharmony_ci time: this.getSampleWeight(thread.eventCount - chartTotal) 465848f512ceSopenharmony_ci }); 465948f512ceSopenharmony_ci } else { 466048f512ceSopenharmony_ci this.addOtherItem(count, total, chartTotal, chartSource); 466148f512ceSopenharmony_ci } 466248f512ceSopenharmony_ci chartSource.sort((a, b) => { return b.time - a.time }) 466348f512ceSopenharmony_ci this.libDs = chartSource; 466448f512ceSopenharmony_ci this.chart.dataSource = chartSource; 466548f512ceSopenharmony_ci } 466648f512ceSopenharmony_ci } 466748f512ceSopenharmony_ci 466848f512ceSopenharmony_ci /** 466948f512ceSopenharmony_ci * chart click lib 467048f512ceSopenharmony_ci * @param lib 467148f512ceSopenharmony_ci */ 467248f512ceSopenharmony_ci clickLib(lib) { 467348f512ceSopenharmony_ci if (lib && lib.functions) { 467448f512ceSopenharmony_ci this.currentLevel = 'Function in Library' 467548f512ceSopenharmony_ci let chartSource = []; 467648f512ceSopenharmony_ci let chartTotal = 0; 467748f512ceSopenharmony_ci let count = 0; 467848f512ceSopenharmony_ci let filter = lib.functions.filter(item => item.counts[1] / lib.eventCount > 0.001); 467948f512ceSopenharmony_ci let total = lib.eventCount; 468048f512ceSopenharmony_ci let countTotal = 0; 468148f512ceSopenharmony_ci filter.forEach(item=>{ countTotal += item.counts[1]}); 468248f512ceSopenharmony_ci for (let item of filter) { 468348f512ceSopenharmony_ci if (count < this.chartMaxCount) { 468448f512ceSopenharmony_ci chartSource.push({ 468548f512ceSopenharmony_ci id:item.symbol, 468648f512ceSopenharmony_ci name: this.getFuncName(item.symbol), 468748f512ceSopenharmony_ci value: (item.counts[1] / total).toFixed(6), 468848f512ceSopenharmony_ci color: this.color[count % this.color.length], 468948f512ceSopenharmony_ci time: this.getSampleWeight(item.counts[1]) 469048f512ceSopenharmony_ci }); 469148f512ceSopenharmony_ci chartTotal += item.counts[1]; 469248f512ceSopenharmony_ci count++; 469348f512ceSopenharmony_ci } 469448f512ceSopenharmony_ci if (count >= this.chartMaxCount) { 469548f512ceSopenharmony_ci break; 469648f512ceSopenharmony_ci } 469748f512ceSopenharmony_ci } 469848f512ceSopenharmony_ci if (count < this.chartMaxCount && countTotal < lib.eventCount) { 469948f512ceSopenharmony_ci chartSource.push({ 470048f512ceSopenharmony_ci id : -1, 470148f512ceSopenharmony_ci name: 'Other: Represents a collection of items which proporiton of count less than 1% or ranked very low', 470248f512ceSopenharmony_ci value: ((lib.eventCount - countTotal) / lib.eventCount).toFixed(6), 470348f512ceSopenharmony_ci color: '#888888', 470448f512ceSopenharmony_ci time: this.getSampleWeight(lib.eventCount - countTotal) 470548f512ceSopenharmony_ci }); 470648f512ceSopenharmony_ci } else { 470748f512ceSopenharmony_ci this.addOtherItem(count,total,chartTotal,chartSource); 470848f512ceSopenharmony_ci } 470948f512ceSopenharmony_ci chartSource.sort((a, b) => { return b.time - a.time }); 471048f512ceSopenharmony_ci this.chart.dataSource = chartSource; 471148f512ceSopenharmony_ci } 471248f512ceSopenharmony_ci } 471348f512ceSopenharmony_ci 471448f512ceSopenharmony_ci addOtherItem(count,total,chartTotal,chartSource) { 471548f512ceSopenharmony_ci if (count >= this.chartMaxCount && total > chartTotal) { 471648f512ceSopenharmony_ci chartSource.push({ 471748f512ceSopenharmony_ci id : -1, 471848f512ceSopenharmony_ci name: 'Other: Represents a collection of items which proporiton of count less than 1% or ranked very low', 471948f512ceSopenharmony_ci value: ((total - chartTotal) / total).toFixed(6), 472048f512ceSopenharmony_ci color: '#888888', 472148f512ceSopenharmony_ci time: this.getSampleWeight(total - chartTotal) 472248f512ceSopenharmony_ci }); 472348f512ceSopenharmony_ci } 472448f512ceSopenharmony_ci } 472548f512ceSopenharmony_ci 472648f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 472748f512ceSopenharmony_ci if (name === 'color' && this.loading) { 472848f512ceSopenharmony_ci this.loading.style.color = newValue; 472948f512ceSopenharmony_ci } 473048f512ceSopenharmony_ci if (name === 'size' && this.loading) { 473148f512ceSopenharmony_ci this.loading.style.fontSize = newValue + 'px'; 473248f512ceSopenharmony_ci } 473348f512ceSopenharmony_ci } 473448f512ceSopenharmony_ci } 473548f512ceSopenharmony_ci if (!customElements.get('app-chart-statistics')) { 473648f512ceSopenharmony_ci customElements.define('app-chart-statistics', AppChartStatistics); 473748f512ceSopenharmony_ci } 473848f512ceSopenharmony_ci 473948f512ceSopenharmony_ci class AppFlameGraph extends HTMLElement { 474048f512ceSopenharmony_ci static get observedAttributes() { 474148f512ceSopenharmony_ci return ['color', 'size']; 474248f512ceSopenharmony_ci } 474348f512ceSopenharmony_ci 474448f512ceSopenharmony_ci constructor() { 474548f512ceSopenharmony_ci super(); 474648f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 474748f512ceSopenharmony_ci shadowRoot.innerHTML = ` 474848f512ceSopenharmony_ci <style> 474948f512ceSopenharmony_ci :host{ 475048f512ceSopenharmony_ci font-size:inherit; 475148f512ceSopenharmony_ci display:inline-flex; 475248f512ceSopenharmony_ci align-items: center; 475348f512ceSopenharmony_ci justify-content:center; 475448f512ceSopenharmony_ci width: 100%; 475548f512ceSopenharmony_ci } 475648f512ceSopenharmony_ci </style> 475748f512ceSopenharmony_ci <div style="width: 100%;display: flex;flex-direction: column"> 475848f512ceSopenharmony_ci <lit-select id="typeSelect" default-value="1" mode="single" style="width:40vw;margin-bottom: 10px;align-self: flex-end"> 475948f512ceSopenharmony_ci <lit-select-option value="1">Show percentage of event count relative to the current thread</lit-select-option> 476048f512ceSopenharmony_ci <lit-select-option value="2">Show percentage of event count relative to the current process</lit-select-option> 476148f512ceSopenharmony_ci <lit-select-option value="3">Show percentage of event count relative to all process</lit-select-option> 476248f512ceSopenharmony_ci <lit-select-option value="4">show event count</lit-select-option> 476348f512ceSopenharmony_ci <lit-select-option value="5">show event count in milliseconds</lit-select-option> 476448f512ceSopenharmony_ci </lit-select> 476548f512ceSopenharmony_ci <div id="panel" style="width: 100%"></div> 476648f512ceSopenharmony_ci </div> 476748f512ceSopenharmony_ci <slot></slot> 476848f512ceSopenharmony_ci `; 476948f512ceSopenharmony_ci } 477048f512ceSopenharmony_ci 477148f512ceSopenharmony_ci get data() { 477248f512ceSopenharmony_ci return this._json || null; 477348f512ceSopenharmony_ci } 477448f512ceSopenharmony_ci 477548f512ceSopenharmony_ci set data(json) { 477648f512ceSopenharmony_ci // 如果已经给过值，不重新刷新 477748f512ceSopenharmony_ci if (this.isFinished) { 477848f512ceSopenharmony_ci return; 477948f512ceSopenharmony_ci } 478048f512ceSopenharmony_ci this._json = json; 478148f512ceSopenharmony_ci this.panel = this.shadowRoot.getElementById('panel'); 478248f512ceSopenharmony_ci this.panel.innerHTML = ''; 478348f512ceSopenharmony_ci let processes = json.recordSampleInfo[window.eventIndex].processes; 478448f512ceSopenharmony_ci processes.slice(0).forEach(it => { 478548f512ceSopenharmony_ci it.threads.sort((a, b) => { return b.eventCount - a.eventCount }); 478648f512ceSopenharmony_ci it.threads.slice(0).forEach(th => { 478748f512ceSopenharmony_ci let pid = it.pid; 478848f512ceSopenharmony_ci let processName = json.processNameMap[it.pid]; 478948f512ceSopenharmony_ci let tid = th.tid; 479048f512ceSopenharmony_ci let threadName = json.threadNameMap[th.tid]; 479148f512ceSopenharmony_ci let eventCount = th.eventCount; 479248f512ceSopenharmony_ci let sampleCount = th.sampleCount; 479348f512ceSopenharmony_ci let g = th.CallOrder; 479448f512ceSopenharmony_ci let flame = document.createElement('app-chart-flame'); 479548f512ceSopenharmony_ci flame.style.width = '100%'; 479648f512ceSopenharmony_ci flame.style.height = 'auto'; 479748f512ceSopenharmony_ci flame.style.display = 'flex'; 479848f512ceSopenharmony_ci this.panel.appendChild(flame); 479948f512ceSopenharmony_ci flame.data = { 480048f512ceSopenharmony_ci type:this.type||1, 480148f512ceSopenharmony_ci pid, processName, tid, threadName, eventCount, sampleCount, CallOrder:g 480248f512ceSopenharmony_ci }; 480348f512ceSopenharmony_ci }) 480448f512ceSopenharmony_ci }) 480548f512ceSopenharmony_ci this.isFinished = true; 480648f512ceSopenharmony_ci } 480748f512ceSopenharmony_ci 480848f512ceSopenharmony_ci connectedCallback() { 480948f512ceSopenharmony_ci this.isFinished = false; 481048f512ceSopenharmony_ci this.panel = this.shadowRoot.getElementById('panel'); 481148f512ceSopenharmony_ci this.typeSelect = this.shadowRoot.getElementById('typeSelect'); 481248f512ceSopenharmony_ci this.typeSelect.onchange = ev => { 481348f512ceSopenharmony_ci this.type = parseInt(ev.detail.value); 481448f512ceSopenharmony_ci this.isFinished = false; 481548f512ceSopenharmony_ci this.data = window.data; 481648f512ceSopenharmony_ci } 481748f512ceSopenharmony_ci } 481848f512ceSopenharmony_ci 481948f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 482048f512ceSopenharmony_ci if (name === 'color' && this.loading) { 482148f512ceSopenharmony_ci this.loading.style.color = newValue; 482248f512ceSopenharmony_ci } 482348f512ceSopenharmony_ci if (name === 'size' && this.loading) { 482448f512ceSopenharmony_ci this.loading.style.fontSize = newValue + 'px'; 482548f512ceSopenharmony_ci } 482648f512ceSopenharmony_ci } 482748f512ceSopenharmony_ci } 482848f512ceSopenharmony_ci if (!customElements.get('app-flame-graph')) { 482948f512ceSopenharmony_ci customElements.define('app-flame-graph', AppFlameGraph); 483048f512ceSopenharmony_ci } 483148f512ceSopenharmony_ci 483248f512ceSopenharmony_ci class AppFunction extends HTMLElement { 483348f512ceSopenharmony_ci static get observedAttributes() { 483448f512ceSopenharmony_ci return ['color', 'size']; 483548f512ceSopenharmony_ci } 483648f512ceSopenharmony_ci 483748f512ceSopenharmony_ci constructor() { 483848f512ceSopenharmony_ci super(); 483948f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 484048f512ceSopenharmony_ci shadowRoot.innerHTML = ` 484148f512ceSopenharmony_ci <style> 484248f512ceSopenharmony_ci :host{ 484348f512ceSopenharmony_ci font-size:inherit; 484448f512ceSopenharmony_ci display:inline-flex; 484548f512ceSopenharmony_ci align-items: center; 484648f512ceSopenharmony_ci justify-content:center; 484748f512ceSopenharmony_ci padding: 0; 484848f512ceSopenharmony_ci margin: 0; 484948f512ceSopenharmony_ci width: 100%; 485048f512ceSopenharmony_ci } 485148f512ceSopenharmony_ci </style> 485248f512ceSopenharmony_ci <div style="width: 100%;display: flex;flex-direction: column"> 485348f512ceSopenharmony_ci <lit-table id="table" noheader style="width: 100%;"> 485448f512ceSopenharmony_ci <lit-table-column title="key" data-index="key" width="200px" key="key" ></lit-table-column> 485548f512ceSopenharmony_ci <lit-table-column title="value" data-index="value" width="1fr" key="value"></lit-table-column> 485648f512ceSopenharmony_ci </lit-table> 485748f512ceSopenharmony_ci <lit-select id="typeSelect" default-value="1" mode="single" style="width:500px;margin-bottom: 10px;margin-top:10px;align-self: flex-end"> 485848f512ceSopenharmony_ci <lit-select-option value="1">Show percentage of event count relative to the current thread</lit-select-option> 485948f512ceSopenharmony_ci <lit-select-option value="2">Show percentage of event count relative to the current process</lit-select-option> 486048f512ceSopenharmony_ci <lit-select-option value="3">Show percentage of event count relative to all process</lit-select-option> 486148f512ceSopenharmony_ci <lit-select-option value="4">show event count</lit-select-option> 486248f512ceSopenharmony_ci <lit-select-option value="5">show event count in milliseconds</lit-select-option> 486348f512ceSopenharmony_ci </lit-select> 486448f512ceSopenharmony_ci <app-chart-flame id="flame1"></app-chart-flame> 486548f512ceSopenharmony_ci <app-chart-flame id="flame2"></app-chart-flame> 486648f512ceSopenharmony_ci </div> 486748f512ceSopenharmony_ci <slot></slot> 486848f512ceSopenharmony_ci `; 486948f512ceSopenharmony_ci } 487048f512ceSopenharmony_ci 487148f512ceSopenharmony_ci getNodesMatchingFuncId(root, funcId) { 487248f512ceSopenharmony_ci let nodes = []; 487348f512ceSopenharmony_ci 487448f512ceSopenharmony_ci function recursiveFn(node) { 487548f512ceSopenharmony_ci if (node.symbol === funcId) { 487648f512ceSopenharmony_ci nodes.push(node); 487748f512ceSopenharmony_ci } else { 487848f512ceSopenharmony_ci for (let child of node.callStack) { 487948f512ceSopenharmony_ci recursiveFn(child); 488048f512ceSopenharmony_ci } 488148f512ceSopenharmony_ci } 488248f512ceSopenharmony_ci } 488348f512ceSopenharmony_ci 488448f512ceSopenharmony_ci recursiveFn(root); 488548f512ceSopenharmony_ci return nodes; 488648f512ceSopenharmony_ci } 488748f512ceSopenharmony_ci 488848f512ceSopenharmony_ci get dataSource() { 488948f512ceSopenharmony_ci return this._dataSource; 489048f512ceSopenharmony_ci } 489148f512ceSopenharmony_ci 489248f512ceSopenharmony_ci getReverseData(rg, funId) { 489348f512ceSopenharmony_ci 489448f512ceSopenharmony_ci } 489548f512ceSopenharmony_ci 489648f512ceSopenharmony_ci set dataSource(val) { 489748f512ceSopenharmony_ci this._dataSource = val; 489848f512ceSopenharmony_ci this.table.dataSource = [ 489948f512ceSopenharmony_ci {key: 'Event Type', value: data.recordSampleInfo[window.eventIndex].eventConfigName}, 490048f512ceSopenharmony_ci {key: 'Process', value: val.process}, 490148f512ceSopenharmony_ci {key: 'Thread', value: val.thread}, 490248f512ceSopenharmony_ci {key: 'Library', value: val.library}, 490348f512ceSopenharmony_ci {key: 'Function', value: val.fun} 490448f512ceSopenharmony_ci ]; 490548f512ceSopenharmony_ci let filterProcess = 490648f512ceSopenharmony_ci data.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === val.processId); 490748f512ceSopenharmony_ci let filterThread = filterProcess[0].threads.filter(it => it.tid === val.threadId); 490848f512ceSopenharmony_ci let filterG = filterThread[0].CallOrder; 490948f512ceSopenharmony_ci let filterRG = filterThread[0].CalledOrder; 491048f512ceSopenharmony_ci let c; 491148f512ceSopenharmony_ci let rc; 491248f512ceSopenharmony_ci let findF = (obj) => { 491348f512ceSopenharmony_ci if (Array.isArray(obj)) { 491448f512ceSopenharmony_ci obj.forEach(it => { 491548f512ceSopenharmony_ci if (it.symbol === val.funId) { 491648f512ceSopenharmony_ci c = it; 491748f512ceSopenharmony_ci return; 491848f512ceSopenharmony_ci } else { 491948f512ceSopenharmony_ci if (it.callStack && it.callStack.length > 0) { 492048f512ceSopenharmony_ci findF(it.callStack); 492148f512ceSopenharmony_ci } 492248f512ceSopenharmony_ci } 492348f512ceSopenharmony_ci }); 492448f512ceSopenharmony_ci } else { 492548f512ceSopenharmony_ci findF(obj.callStack); 492648f512ceSopenharmony_ci } 492748f512ceSopenharmony_ci }; 492848f512ceSopenharmony_ci // 合并倒树结构 492948f512ceSopenharmony_ci let mergeRc = (obj) => { 493048f512ceSopenharmony_ci let rc = {}; 493148f512ceSopenharmony_ci let _rc = this.getNodesMatchingFuncId(obj, val.funId);// 将rg树中 为funId值的节点 形成一个数组 493248f512ceSopenharmony_ci let _sumCount = _rc.reduce((acc, cur) => acc + cur.subEvents, 0);// 计算eventCount值 493348f512ceSopenharmony_ci let splitChildrenForNodes = (nodes) => { 493448f512ceSopenharmony_ci let map = new Map(); 493548f512ceSopenharmony_ci for (let node of nodes) { 493648f512ceSopenharmony_ci if (node.callStack) { 493748f512ceSopenharmony_ci for (let child of node.callStack) { 493848f512ceSopenharmony_ci let subNodes = map.get(child.symbol); 493948f512ceSopenharmony_ci if (subNodes) { 494048f512ceSopenharmony_ci subNodes.push(child); 494148f512ceSopenharmony_ci } else { 494248f512ceSopenharmony_ci map.set(child.symbol, [child]); 494348f512ceSopenharmony_ci } 494448f512ceSopenharmony_ci } 494548f512ceSopenharmony_ci } 494648f512ceSopenharmony_ci } 494748f512ceSopenharmony_ci let res = []; 494848f512ceSopenharmony_ci for (let key of map.keys()) { 494948f512ceSopenharmony_ci let subNodes = map.get(key); 495048f512ceSopenharmony_ci res.push({ 495148f512ceSopenharmony_ci selfEvents: 0, 495248f512ceSopenharmony_ci subEvents: subNodes.reduce((acc, cur) => acc + cur.subEvents, 0), 495348f512ceSopenharmony_ci symbol: key, 495448f512ceSopenharmony_ci callStack: splitChildrenForNodes(subNodes) 495548f512ceSopenharmony_ci }); 495648f512ceSopenharmony_ci } 495748f512ceSopenharmony_ci return res; 495848f512ceSopenharmony_ci }; 495948f512ceSopenharmony_ci let children = splitChildrenForNodes(_rc); 496048f512ceSopenharmony_ci return { 496148f512ceSopenharmony_ci selfEvents: 0, 496248f512ceSopenharmony_ci subEvents: _sumCount, 496348f512ceSopenharmony_ci symbol: val.funId, 496448f512ceSopenharmony_ci callStack: children 496548f512ceSopenharmony_ci }; 496648f512ceSopenharmony_ci } 496748f512ceSopenharmony_ci findF(filterG); 496848f512ceSopenharmony_ci rc = mergeRc(filterRG); 496948f512ceSopenharmony_ci c = mergeRc(filterG); 497048f512ceSopenharmony_ci this.flame1.data = { 497148f512ceSopenharmony_ci pid: val.processId, 497248f512ceSopenharmony_ci processName: val.processName, 497348f512ceSopenharmony_ci tid: val.threadId, 497448f512ceSopenharmony_ci threadName: val.threadName, 497548f512ceSopenharmony_ci eventCount: null, 497648f512ceSopenharmony_ci sampleCount: null, 497748f512ceSopenharmony_ci type: this.type || 1, 497848f512ceSopenharmony_ci funcName: `Functions called by ${val.fun}`, 497948f512ceSopenharmony_ci CallOrder: c 498048f512ceSopenharmony_ci }; 498148f512ceSopenharmony_ci 498248f512ceSopenharmony_ci this.flame2.data = { 498348f512ceSopenharmony_ci pid: val.processId, 498448f512ceSopenharmony_ci processName: val.processName, 498548f512ceSopenharmony_ci tid: val.threadId, 498648f512ceSopenharmony_ci threadName: val.threadName, 498748f512ceSopenharmony_ci eventCount: null, 498848f512ceSopenharmony_ci sampleCount: null, 498948f512ceSopenharmony_ci reverse: true, 499048f512ceSopenharmony_ci type: this.type || 1, 499148f512ceSopenharmony_ci funcName: `Functions calling ${val.fun}`, 499248f512ceSopenharmony_ci CallOrder: rc 499348f512ceSopenharmony_ci }; 499448f512ceSopenharmony_ci } 499548f512ceSopenharmony_ci 499648f512ceSopenharmony_ci connectedCallback() { 499748f512ceSopenharmony_ci this.table = this.shadowRoot.getElementById('table'); 499848f512ceSopenharmony_ci this.flame1 = this.shadowRoot.getElementById('flame1'); 499948f512ceSopenharmony_ci this.flame2 = this.shadowRoot.getElementById('flame2'); 500048f512ceSopenharmony_ci this.typeSelect = this.shadowRoot.getElementById('typeSelect'); 500148f512ceSopenharmony_ci this.typeSelect.onchange = (e) => { 500248f512ceSopenharmony_ci this.type = parseInt(e.detail.value); 500348f512ceSopenharmony_ci this.dataSource = this.dataSource; 500448f512ceSopenharmony_ci }; 500548f512ceSopenharmony_ci } 500648f512ceSopenharmony_ci 500748f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 500848f512ceSopenharmony_ci 500948f512ceSopenharmony_ci } 501048f512ceSopenharmony_ci } 501148f512ceSopenharmony_ci if (!customElements.get('app-function')) { 501248f512ceSopenharmony_ci customElements.define('app-function', AppFunction); 501348f512ceSopenharmony_ci } 501448f512ceSopenharmony_ci 501548f512ceSopenharmony_ci class AppSimpleTable extends HTMLElement { 501648f512ceSopenharmony_ci static get observedAttributes() { 501748f512ceSopenharmony_ci return ['color', 'size']; 501848f512ceSopenharmony_ci } 501948f512ceSopenharmony_ci 502048f512ceSopenharmony_ci constructor() { 502148f512ceSopenharmony_ci super(); 502248f512ceSopenharmony_ci const shadowRoot = this.attachShadow({mode: 'open'}); 502348f512ceSopenharmony_ci shadowRoot.innerHTML = ` 502448f512ceSopenharmony_ci <style> 502548f512ceSopenharmony_ci :host{ 502648f512ceSopenharmony_ci font-size:inherit; 502748f512ceSopenharmony_ci display:inline-flex; 502848f512ceSopenharmony_ci align-items: center; 502948f512ceSopenharmony_ci justify-content:center; 503048f512ceSopenharmony_ci } 503148f512ceSopenharmony_ci .loading{ 503248f512ceSopenharmony_ci display: block; 503348f512ceSopenharmony_ci width: 1em; 503448f512ceSopenharmony_ci height: 1em; 503548f512ceSopenharmony_ci margin: auto; 503648f512ceSopenharmony_ci animation: rotate 1.4s linear infinite; 503748f512ceSopenharmony_ci } 503848f512ceSopenharmony_ci .circle { 503948f512ceSopenharmony_ci stroke: currentColor; 504048f512ceSopenharmony_ci animation: progress 1.4s ease-in-out infinite; 504148f512ceSopenharmony_ci stroke-dasharray: 80px, 200px; 504248f512ceSopenharmony_ci stroke-dashoffset: 0px; 504348f512ceSopenharmony_ci transition:.3s; 504448f512ceSopenharmony_ci } 504548f512ceSopenharmony_ci :host(:not(:empty)) .loading{ 504648f512ceSopenharmony_ci margin:.5em; 504748f512ceSopenharmony_ci } 504848f512ceSopenharmony_ci @keyframes rotate{ 504948f512ceSopenharmony_ci to{ 505048f512ceSopenharmony_ci transform: rotate(360deg); 505148f512ceSopenharmony_ci } 505248f512ceSopenharmony_ci } 505348f512ceSopenharmony_ci @keyframes progress { 505448f512ceSopenharmony_ci 0% { 505548f512ceSopenharmony_ci stroke-dasharray: 1px, 200px; 505648f512ceSopenharmony_ci stroke-dashoffset: 0px; 505748f512ceSopenharmony_ci } 505848f512ceSopenharmony_ci 50% { 505948f512ceSopenharmony_ci stroke-dasharray: 100px, 200px; 506048f512ceSopenharmony_ci stroke-dashoffset: -15px; 506148f512ceSopenharmony_ci } 506248f512ceSopenharmony_ci 100% { 506348f512ceSopenharmony_ci stroke-dasharray: 100px, 200px; 506448f512ceSopenharmony_ci stroke-dashoffset: -125px; 506548f512ceSopenharmony_ci } 506648f512ceSopenharmony_ci } 506748f512ceSopenharmony_ci </style> 506848f512ceSopenharmony_ci <div style="width: 100%;height: auto;"> 506948f512ceSopenharmony_ci <svg class="loading" id="loading" viewBox="22 22 44 44"><circle class="circle" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg> 507048f512ceSopenharmony_ci <div style="display: flex;flex-direction: column;align-items: flex-end;width: 100%;"> 507148f512ceSopenharmony_ci <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;margin-bottom: 10px"> 507248f512ceSopenharmony_ci <lit-input id="keyword" icon="search" placeholder="Please enter a keyword" style="width: 300px" allow-clear></lit-input> 507348f512ceSopenharmony_ci <lit-select id="typeSelect" default-value="1" mode="single" style="width: 400px;margin-bottom: 10px"> 507448f512ceSopenharmony_ci <lit-select-option value="1">show percentage of event count</lit-select-option> 507548f512ceSopenharmony_ci <lit-select-option value="2">show event count</lit-select-option> 507648f512ceSopenharmony_ci <lit-select-option value="3">show event count in milliseconds</lit-select-option> 507748f512ceSopenharmony_ci </lit-select> 507848f512ceSopenharmony_ci </div> 507948f512ceSopenharmony_ci <lit-table id="table" style="width: calc(100vw - 40px);"> 508048f512ceSopenharmony_ci <lit-table-column title="Total" data-index="total" width="100px" key="total" order></lit-table-column> 508148f512ceSopenharmony_ci <lit-table-column title="Self" data-index="self" width="100px" key="self" order></lit-table-column> 508248f512ceSopenharmony_ci <lit-table-column title="Samples" data-index="samples" width="100px" key="samples" order></lit-table-column> 508348f512ceSopenharmony_ci <lit-table-column title="Process" data-index="process" width="250px" key="process" order></lit-table-column> 508448f512ceSopenharmony_ci <lit-table-column title="Thread" data-index="thread" width="250px" key="thread" order></lit-table-column> 508548f512ceSopenharmony_ci <lit-table-column title="Library" data-index="library" width="250px" key="library" order></lit-table-column> 508648f512ceSopenharmony_ci <lit-table-column title="Function" data-index="fun" key="fun" order></lit-table-column> 508748f512ceSopenharmony_ci </lit-table> 508848f512ceSopenharmony_ci <div style="height: 140px"> 508948f512ceSopenharmony_ci <lit-pagination id="pagination" show-size-changer page-size="10" page-size-options="[20,50,200]" style="margin-top: 10px;"> 509048f512ceSopenharmony_ci <!-- <template slot="showTotal"><label>{{range[0]}}-{{range[1]}} of {{total}} items</label></template>--> 509148f512ceSopenharmony_ci </lit-pagination> 509248f512ceSopenharmony_ci </div> 509348f512ceSopenharmony_ci </div> 509448f512ceSopenharmony_ci 509548f512ceSopenharmony_ci </div> 509648f512ceSopenharmony_ci <slot></slot> 509748f512ceSopenharmony_ci `; 509848f512ceSopenharmony_ci } 509948f512ceSopenharmony_ci 510048f512ceSopenharmony_ci set data(json) { 510148f512ceSopenharmony_ci if (json.recordSampleInfo && json.recordSampleInfo.length > 0) { 510248f512ceSopenharmony_ci this.processNameMap = json.processNameMap; 510348f512ceSopenharmony_ci this.threadNameMap = json.threadNameMap; 510448f512ceSopenharmony_ci this.symbolsFileList = json.symbolsFileList; 510548f512ceSopenharmony_ci this.SymbolMap = json.SymbolMap; 510648f512ceSopenharmony_ci this.eventInfo = json.recordSampleInfo[window.eventIndex]; 510748f512ceSopenharmony_ci this.initTableData().then(() => { 510848f512ceSopenharmony_ci this.loading.style.display = 'none'; 510948f512ceSopenharmony_ci this.pagination.current = 1; 511048f512ceSopenharmony_ci this.pagination.total = this.source.length; 511148f512ceSopenharmony_ci this.table.dataSource = this.paginationHandler(1,this.pagination.pageSize); 511248f512ceSopenharmony_ci }); 511348f512ceSopenharmony_ci } 511448f512ceSopenharmony_ci } 511548f512ceSopenharmony_ci 511648f512ceSopenharmony_ci paginationHandler(page,pageSize,data) { 511748f512ceSopenharmony_ci let offset = (page - 1) * pageSize; 511848f512ceSopenharmony_ci let arr = []; 511948f512ceSopenharmony_ci if (this.searchKey && this.searchKey.length > 0 && data) { 512048f512ceSopenharmony_ci arr = (offset + pageSize >= data.length) ? 512148f512ceSopenharmony_ci data.slice(offset, data.length) : data.slice(offset, offset + pageSize); 512248f512ceSopenharmony_ci } else { 512348f512ceSopenharmony_ci arr = (offset + pageSize >= this.source.length) ? 512448f512ceSopenharmony_ci this.source.slice(offset, this.source.length) : this.source.slice(offset, offset + pageSize); 512548f512ceSopenharmony_ci } 512648f512ceSopenharmony_ci arr.forEach(item=>{ 512748f512ceSopenharmony_ci item.total = this.getSampleWeight(item.totalCount); 512848f512ceSopenharmony_ci item.self = this.getSampleWeight(item.selfCount); 512948f512ceSopenharmony_ci }) 513048f512ceSopenharmony_ci return arr; 513148f512ceSopenharmony_ci } 513248f512ceSopenharmony_ci 513348f512ceSopenharmony_ci async initTableData() { 513448f512ceSopenharmony_ci this.source = []; 513548f512ceSopenharmony_ci this.eventInfo.processes.forEach(process => { 513648f512ceSopenharmony_ci process.threads.forEach(thread => { 513748f512ceSopenharmony_ci thread.libs.forEach(lib => { 513848f512ceSopenharmony_ci lib.functions.forEach(fun => { 513948f512ceSopenharmony_ci this.source.push({ 514048f512ceSopenharmony_ci process: this.getProcessName(process.pid), 514148f512ceSopenharmony_ci processId:process.pid, 514248f512ceSopenharmony_ci thread: this.getThreadName(thread.tid), 514348f512ceSopenharmony_ci threadId:thread.tid, 514448f512ceSopenharmony_ci library: this.getLibName(lib.fileId), 514548f512ceSopenharmony_ci libraryId:lib.fileId, 514648f512ceSopenharmony_ci fun: this.getFuncName(fun.symbol), 514748f512ceSopenharmony_ci funId: fun.symbol, 514848f512ceSopenharmony_ci totalCount: fun.counts[2], 514948f512ceSopenharmony_ci selfCount: fun.counts[1], 515048f512ceSopenharmony_ci samples: fun.counts[0], 515148f512ceSopenharmony_ci total:this.getSampleWeight(fun.counts[2]), 515248f512ceSopenharmony_ci self:this.getSampleWeight(fun.counts[1]), 515348f512ceSopenharmony_ci }); 515448f512ceSopenharmony_ci }); 515548f512ceSopenharmony_ci }); 515648f512ceSopenharmony_ci }); 515748f512ceSopenharmony_ci }); 515848f512ceSopenharmony_ci function compare(property) { 515948f512ceSopenharmony_ci return function (a, b) { 516048f512ceSopenharmony_ci return b[property] - a[property]; 516148f512ceSopenharmony_ci }; 516248f512ceSopenharmony_ci } 516348f512ceSopenharmony_ci this.source.sort(compare('totalCount')); 516448f512ceSopenharmony_ci } 516548f512ceSopenharmony_ci 516648f512ceSopenharmony_ci getSampleWeight(count) { 516748f512ceSopenharmony_ci if (this.eventType.value === '1') { 516848f512ceSopenharmony_ci return (count * 100.0 / this.eventInfo.eventCount).toFixed(2) + '%'; 516948f512ceSopenharmony_ci } else if (this.eventType.value === '2') { 517048f512ceSopenharmony_ci return count + ''; 517148f512ceSopenharmony_ci } else { 517248f512ceSopenharmony_ci return (count / 1000000.0).toFixed(3); 517348f512ceSopenharmony_ci } 517448f512ceSopenharmony_ci } 517548f512ceSopenharmony_ci 517648f512ceSopenharmony_ci getProcessName(pid) { 517748f512ceSopenharmony_ci let name = this.processNameMap[pid]; 517848f512ceSopenharmony_ci return name ? `${pid} (${name})` : pid.toString(); 517948f512ceSopenharmony_ci } 518048f512ceSopenharmony_ci 518148f512ceSopenharmony_ci getThreadName(tid) { 518248f512ceSopenharmony_ci let name = this.threadNameMap[tid]; 518348f512ceSopenharmony_ci return name ? `${tid} (${name})` : tid.toString(); 518448f512ceSopenharmony_ci } 518548f512ceSopenharmony_ci 518648f512ceSopenharmony_ci getLibName(fileId) { 518748f512ceSopenharmony_ci return this.symbolsFileList[fileId]; 518848f512ceSopenharmony_ci } 518948f512ceSopenharmony_ci 519048f512ceSopenharmony_ci getFuncName(funcId) { 519148f512ceSopenharmony_ci return this.SymbolMap[funcId].symbol; 519248f512ceSopenharmony_ci } 519348f512ceSopenharmony_ci 519448f512ceSopenharmony_ci get size() { 519548f512ceSopenharmony_ci return this.getAttribute('size') || ''; 519648f512ceSopenharmony_ci } 519748f512ceSopenharmony_ci 519848f512ceSopenharmony_ci get color() { 519948f512ceSopenharmony_ci return this.getAttribute('color') || ''; 520048f512ceSopenharmony_ci } 520148f512ceSopenharmony_ci 520248f512ceSopenharmony_ci set size(value) { 520348f512ceSopenharmony_ci this.setAttribute('size', value); 520448f512ceSopenharmony_ci } 520548f512ceSopenharmony_ci 520648f512ceSopenharmony_ci set color(value) { 520748f512ceSopenharmony_ci this.setAttribute('color', value); 520848f512ceSopenharmony_ci } 520948f512ceSopenharmony_ci 521048f512ceSopenharmony_ci connectedCallback() { 521148f512ceSopenharmony_ci this.suffix = ''; 521248f512ceSopenharmony_ci this.loading = this.shadowRoot.getElementById('loading'); 521348f512ceSopenharmony_ci this.keyword = this.shadowRoot.getElementById('keyword'); 521448f512ceSopenharmony_ci this.eventType = this.shadowRoot.getElementById('typeSelect'); 521548f512ceSopenharmony_ci this.pagination = this.shadowRoot.getElementById('pagination'); 521648f512ceSopenharmony_ci this.table = this.shadowRoot.getElementById('table'); 521748f512ceSopenharmony_ci this.eventType.addEventListener('change',this.updateTableSource.bind(this)); 521848f512ceSopenharmony_ci this.pagination.addEventListener('onChange',this.updateTableSource.bind(this)); 521948f512ceSopenharmony_ci this.pagination.addEventListener('onShowSizeChange',this.updateTableSource.bind(this)); 522048f512ceSopenharmony_ci this.size && (this.size = this.size); 522148f512ceSopenharmony_ci this.color && (this.color = this.color); 522248f512ceSopenharmony_ci this.ds = []; 522348f512ceSopenharmony_ci this.keyword.addEventListener('input',e=>{ 522448f512ceSopenharmony_ci if (this.searchKey !== this.keyword.value) { 522548f512ceSopenharmony_ci this.searchKey = this.keyword.value; 522648f512ceSopenharmony_ci this.pagination.current = 1; 522748f512ceSopenharmony_ci this.ds = this.source.filter(item => item.process.indexOf(this.searchKey) !== -1 522848f512ceSopenharmony_ci || item.thread.indexOf(this.searchKey) !== -1 522948f512ceSopenharmony_ci || item.library.indexOf(this.searchKey) !== -1 || item.fun.indexOf(this.searchKey) !== -1); 523048f512ceSopenharmony_ci this.pagination.total = this.ds.length; 523148f512ceSopenharmony_ci this.table.dataSource = 523248f512ceSopenharmony_ci this.paginationHandler(this.pagination.current,parseInt(this.pagination.pageSize),this.ds); 523348f512ceSopenharmony_ci } 523448f512ceSopenharmony_ci }); 523548f512ceSopenharmony_ci this.keyword.addEventListener('onClear',e=>{ 523648f512ceSopenharmony_ci this.searchKey = undefined; 523748f512ceSopenharmony_ci this.pagination.current = 1; 523848f512ceSopenharmony_ci this.pagination.total = this.source.length; 523948f512ceSopenharmony_ci this.table.dataSource = 524048f512ceSopenharmony_ci this.paginationHandler(this.pagination.current,parseInt(this.pagination.pageSize)); 524148f512ceSopenharmony_ci }); 524248f512ceSopenharmony_ci this.table.addEventListener('ColumnClick',evt => { 524348f512ceSopenharmony_ci this.sortByColumn(evt.detail); 524448f512ceSopenharmony_ci }); 524548f512ceSopenharmony_ci } 524648f512ceSopenharmony_ci 524748f512ceSopenharmony_ci sortByColumn(detail) { 524848f512ceSopenharmony_ci function compare(property,sort,type) { 524948f512ceSopenharmony_ci return function (a, b) { 525048f512ceSopenharmony_ci if (type === 'number') { 525148f512ceSopenharmony_ci return sort === 2 ? b[property] - a[property] : a[property] - b[property]; 525248f512ceSopenharmony_ci } else { 525348f512ceSopenharmony_ci if (b[property] > a[property]) { 525448f512ceSopenharmony_ci return sort === 2 ? 1 : -1; 525548f512ceSopenharmony_ci } else if (b[property] === a[property]) { 525648f512ceSopenharmony_ci return 0; 525748f512ceSopenharmony_ci } else { 525848f512ceSopenharmony_ci return sort === 2 ? -1 : 1; 525948f512ceSopenharmony_ci } 526048f512ceSopenharmony_ci } 526148f512ceSopenharmony_ci }; 526248f512ceSopenharmony_ci } 526348f512ceSopenharmony_ci 526448f512ceSopenharmony_ci console.log(detail.key); 526548f512ceSopenharmony_ci if (detail.key === 'total') { 526648f512ceSopenharmony_ci this.source.sort(compare('totalCount',detail.sort,'number')); 526748f512ceSopenharmony_ci } else if (detail.key === 'self') { 526848f512ceSopenharmony_ci this.source.sort(compare('selfCount',detail.sort,'number')); 526948f512ceSopenharmony_ci } else if (detail.key === 'samples') { 527048f512ceSopenharmony_ci this.source.sort(compare('samples',detail.sort,'number')); 527148f512ceSopenharmony_ci } else { 527248f512ceSopenharmony_ci this.source.sort(compare(detail.key,detail.sort,'string')); 527348f512ceSopenharmony_ci } 527448f512ceSopenharmony_ci this.pagination.current = 1; 527548f512ceSopenharmony_ci this.pagination.total = this.source.length; 527648f512ceSopenharmony_ci this.table.dataSource = this.paginationHandler(this.pagination.current,parseInt(this.pagination.pageSize)); 527748f512ceSopenharmony_ci } 527848f512ceSopenharmony_ci 527948f512ceSopenharmony_ci updateTableSource(e) { 528048f512ceSopenharmony_ci if (e.type === 'change') { 528148f512ceSopenharmony_ci this.eventType.value = e.detail.value; 528248f512ceSopenharmony_ci this.suffix = e.detail.value === '3' ? '(in ms)' : ''; 528348f512ceSopenharmony_ci } 528448f512ceSopenharmony_ci if (this.ds.length !== 0) { 528548f512ceSopenharmony_ci this.pagination.total = this.ds.length; 528648f512ceSopenharmony_ci this.table.dataSource = 528748f512ceSopenharmony_ci this.paginationHandler(this.pagination.current,parseInt(this.pagination.pageSize),this.ds); 528848f512ceSopenharmony_ci } else { 528948f512ceSopenharmony_ci this.table.dataSource = 529048f512ceSopenharmony_ci this.paginationHandler(this.pagination.current,parseInt(this.pagination.pageSize)); 529148f512ceSopenharmony_ci } 529248f512ceSopenharmony_ci } 529348f512ceSopenharmony_ci 529448f512ceSopenharmony_ci attributeChangedCallback(name, oldValue, newValue) { 529548f512ceSopenharmony_ci if (name === 'color' && this.loading) { 529648f512ceSopenharmony_ci this.loading.style.color = newValue; 529748f512ceSopenharmony_ci } 529848f512ceSopenharmony_ci if (name === 'size' && this.loading) { 529948f512ceSopenharmony_ci this.loading.style.fontSize = newValue + 'px'; 530048f512ceSopenharmony_ci } 530148f512ceSopenharmony_ci } 530248f512ceSopenharmony_ci } 530348f512ceSopenharmony_ci if (!customElements.get('app-simple-table')) { 530448f512ceSopenharmony_ci customElements.define('app-simple-table', AppSimpleTable); 530548f512ceSopenharmony_ci } 530648f512ceSopenharmony_ci 530748f512ceSopenharmony_ci (function () { 530848f512ceSopenharmony_ci 530948f512ceSopenharmony_ci function createPromise(callback) { 531048f512ceSopenharmony_ci if (callback) { 531148f512ceSopenharmony_ci return new Promise((resolve, _) => callback(resolve)); 531248f512ceSopenharmony_ci } 531348f512ceSopenharmony_ci return new Promise((resolve, _) => resolve()); 531448f512ceSopenharmony_ci } 531548f512ceSopenharmony_ci 531648f512ceSopenharmony_ci function initGlobalObjects() { 531748f512ceSopenharmony_ci let recordData = document.querySelector('#record_data').textContent; 531848f512ceSopenharmony_ci if (recordData.trim().length>0) { 531948f512ceSopenharmony_ci return new Promise((resolve, reject) => { 532048f512ceSopenharmony_ci resolve(JSON.parse(recordData)); 532148f512ceSopenharmony_ci }); 532248f512ceSopenharmony_ci } else { 532348f512ceSopenharmony_ci return fetch('data.json').then(response => response.json()); 532448f512ceSopenharmony_ci } 532548f512ceSopenharmony_ci } 532648f512ceSopenharmony_ci function waitDocumentReady() { 532748f512ceSopenharmony_ci return createPromise((resolve) => document.addEventListener('DOMContentLoaded', resolve)); 532848f512ceSopenharmony_ci } 532948f512ceSopenharmony_ci createPromise() 533048f512ceSopenharmony_ci .then(waitDocumentReady) 533148f512ceSopenharmony_ci .then(initGlobalObjects) 533248f512ceSopenharmony_ci .then((json) => { 533348f512ceSopenharmony_ci window.data = json; 533448f512ceSopenharmony_ci window.eventIndex = 0; 533548f512ceSopenharmony_ci let eventSelector = document.querySelector('#events'); 533648f512ceSopenharmony_ci if (json.recordSampleInfo && json.recordSampleInfo.length > 0) { 533748f512ceSopenharmony_ci let events = []; 533848f512ceSopenharmony_ci json.recordSampleInfo.forEach((e, index) => { 533948f512ceSopenharmony_ci events.push({key:index+'',val:e.eventConfigName}) 534048f512ceSopenharmony_ci }); 534148f512ceSopenharmony_ci eventSelector.dataSource = events; 534248f512ceSopenharmony_ci } 534348f512ceSopenharmony_ci let chart = document.querySelector('#chart-statistics'); 534448f512ceSopenharmony_ci let loading = document.querySelector('#loading'); 534548f512ceSopenharmony_ci let table = document.querySelector('#sample-table'); 534648f512ceSopenharmony_ci let appFunc = document.querySelector('#function'); 534748f512ceSopenharmony_ci let flame = document.querySelector('#flame-graph'); 534848f512ceSopenharmony_ci let tabs = document.querySelector('#tabs') 534948f512ceSopenharmony_ci let pane4 = document.querySelector('#pane4') 535048f512ceSopenharmony_ci chart.data = json; 535148f512ceSopenharmony_ci table.data = json; 535248f512ceSopenharmony_ci table.addEventListener('onRowClick', e => { 535348f512ceSopenharmony_ci pane4.hide = false; 535448f512ceSopenharmony_ci tabs.activePane('4'); 535548f512ceSopenharmony_ci appFunc.dataSource = e.detail; 535648f512ceSopenharmony_ci }); 535748f512ceSopenharmony_ci tabs.onTabClick = (e) => { 535848f512ceSopenharmony_ci if (e.detail.key === '3') { 535948f512ceSopenharmony_ci flame.isFinished = false; 536048f512ceSopenharmony_ci flame.data = json; 536148f512ceSopenharmony_ci } 536248f512ceSopenharmony_ci }; 536348f512ceSopenharmony_ci eventSelector.addEventListener('change',(e)=>{ 536448f512ceSopenharmony_ci loading.style.display = 'flex'; 536548f512ceSopenharmony_ci pane4.hide = true; 536648f512ceSopenharmony_ci window.eventIndex = parseInt( e.detail.value); 536748f512ceSopenharmony_ci chart.data = json; 536848f512ceSopenharmony_ci table.data = json; 536948f512ceSopenharmony_ci flame.isFinished = false; 537048f512ceSopenharmony_ci flame.data = json; 537148f512ceSopenharmony_ci if (tabs.activekey === '4') { 537248f512ceSopenharmony_ci tabs.activePane('1'); 537348f512ceSopenharmony_ci } 537448f512ceSopenharmony_ci loading.style.display = 'none'; 537548f512ceSopenharmony_ci }); 537648f512ceSopenharmony_ci }); 537748f512ceSopenharmony_ci }()) 537848f512ceSopenharmony_ci</script> 537948f512ceSopenharmony_ci<div style="width: 100%;height: 100%"> 538048f512ceSopenharmony_ci <div style="width: 100%;display: flex;flex-direction: column;align-items: center"> 538148f512ceSopenharmony_ci <lit-loading id="loading" size="32" style="display: none"></lit-loading> 538248f512ceSopenharmony_ci </div> 538348f512ceSopenharmony_ci <div style="display: flex;flex-direction: row;align-items: center;padding: 15px"> 538448f512ceSopenharmony_ci <span style="font-weight: bold;margin-right: 10px">Event Type :</span> 538548f512ceSopenharmony_ci <lit-select id="events" default-value="0" style="width: 400px"></lit-select> 538648f512ceSopenharmony_ci </div> 538748f512ceSopenharmony_ci <lit-tabs id='tabs' position="top-left" activekey="1" mode="flat"> 538848f512ceSopenharmony_ci <lit-tabpane id="pane1" tab="Chart Statistics" key="1"> 538948f512ceSopenharmony_ci <app-chart-statistics id="chart-statistics"></app-chart-statistics> 539048f512ceSopenharmony_ci </lit-tabpane> 539148f512ceSopenharmony_ci <lit-tabpane id="pane2" tab="Sample Table" key="2"> 539248f512ceSopenharmony_ci <app-simple-table id="sample-table"></app-simple-table> 539348f512ceSopenharmony_ci </lit-tabpane> 539448f512ceSopenharmony_ci <lit-tabpane id="pane3" tab="Flame Graph" key="3"> 539548f512ceSopenharmony_ci <app-flame-graph id="flame-graph"></app-flame-graph> 539648f512ceSopenharmony_ci </lit-tabpane> 539748f512ceSopenharmony_ci <lit-tabpane id="pane4" tab="Function" key="4" hide> 539848f512ceSopenharmony_ci <app-function id="function" style="width: 100%"></app-function> 539948f512ceSopenharmony_ci </lit-tabpane> 540048f512ceSopenharmony_ci </lit-tabs> 540148f512ceSopenharmony_ci</div> 540248f512ceSopenharmony_ci<script id="record_data" type="application/json"> 5403