mirror of
https://gitee.com/openharmony/developtools_hiperf
synced 2024-11-23 15:39:47 +00:00
d37f12f8d4
Signed-off-by: wenlong12 <wenlong12@huawei.com> Signed-off-by: wenlong12 <wwx1097114@DESKTOP-2021EGU.localdomain>
5072 lines
220 KiB
HTML
5072 lines
220 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Report-Diff</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
lit-tabs {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
lit-tabpane {
|
||
padding: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<script type="module">
|
||
window.getShadowRoot = (el) => {
|
||
if (el.parentNode) {
|
||
return window.getShadowRoot(el.parentNode)
|
||
} else {
|
||
return el;
|
||
}
|
||
};
|
||
window.getShadowElement = (el) => {
|
||
if (el.parentElement) {
|
||
return window.getShadowElement(el.parentElement)
|
||
} else {
|
||
return el;
|
||
}
|
||
};
|
||
class LitIcon extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return ["name", "size", "color", "path"]
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
font-size: inherit;
|
||
display: inline-block;
|
||
transition: .3s;
|
||
}
|
||
:host([spin]){
|
||
animation: rotate 1.75s linear infinite;
|
||
}
|
||
@keyframes rotate {
|
||
to{
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
.icon{
|
||
display: block;
|
||
width: 1em;
|
||
height: 1em;
|
||
margin: auto;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
<svg style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<!-- <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>-->
|
||
<!-- <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>-->
|
||
</svg>
|
||
<svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 ${this.view} ${this.view}">
|
||
${this.path ? '<path id="path"></path>' : '<use id="use"></use>'}
|
||
</svg>
|
||
`
|
||
}
|
||
|
||
get view() {
|
||
return this.getAttribute("view") || 1024;
|
||
}
|
||
|
||
get name() {
|
||
return this.getAttribute("name");
|
||
}
|
||
|
||
get path() {
|
||
return this.getAttribute("path");
|
||
}
|
||
|
||
set name(value) {
|
||
this.setAttribute("name", value);
|
||
}
|
||
|
||
set path(value) {
|
||
this.setAttribute("path", value);
|
||
}
|
||
|
||
get size() {
|
||
return this.getAttribute("size") || "";
|
||
}
|
||
|
||
get color() {
|
||
return this.getAttribute("color") || "";
|
||
}
|
||
|
||
set size(value) {
|
||
this.setAttribute("size", value);
|
||
}
|
||
|
||
set color(value) {
|
||
this.setAttribute("color", value);
|
||
}
|
||
|
||
get spin() {
|
||
return this.hasAttribute('spin');
|
||
}
|
||
|
||
set spin(value) {
|
||
if (value) {
|
||
this.setAttribute('spin', '')
|
||
} else {
|
||
this.removeAttribute('spin');
|
||
}
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
this.icon = this.shadowRoot.getElementById("icon");
|
||
this.use = this.shadowRoot.querySelector("use")
|
||
this.d = this.shadowRoot.querySelector("path");
|
||
this.size && (this.size = this.size);
|
||
this.color && (this.color = this.color);
|
||
this.name && (this.name = this.name);
|
||
this.path && (this.path = this.path);
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (name === "name" && this.use) {
|
||
this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#icon-${newValue}`);
|
||
}
|
||
if (name === "path" && this.d) {
|
||
this.d.setAttribute("d", newValue);
|
||
}
|
||
if (name === "color" && this.icon) {
|
||
this.icon.style.color = newValue;
|
||
}
|
||
if (name === "size" && this.icon) {
|
||
this.icon.style.fontSize = newValue + "px";
|
||
}
|
||
}
|
||
}
|
||
if (!customElements.get('lit-icon')) {
|
||
customElements.define('lit-icon', LitIcon);
|
||
}
|
||
|
||
class LitInput extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return [
|
||
'placeholder',//显示提示文字
|
||
'block',//属性将使按钮适合其父宽度。
|
||
'icon',//图标，如果配置了 slot='prefix' icon将失效
|
||
'bordered',//是否有边框
|
||
'allow-clear',//是否有清除
|
||
'rows',//表示行数，默认input 设置rows 后 显示为textarea
|
||
'maxlength',//允许输入多少个字符 默认没有限制
|
||
'type',//password number text
|
||
'pattern',//正则表达式
|
||
'error-text',//错误提示文字
|
||
'error-placement',//错误提示文字方向
|
||
'required',//是否开始验证
|
||
'value',//值
|
||
];
|
||
}
|
||
get value() {
|
||
return this.getAttribute('value') || '';
|
||
}
|
||
|
||
set value(value) {
|
||
this.setAttribute('value', value);
|
||
}
|
||
get required() {
|
||
return this.hasAttribute('required');
|
||
}
|
||
|
||
set required(value) {
|
||
if (value) {
|
||
this.setAttribute('required', "");
|
||
} else {
|
||
this.removeAttribute('required');
|
||
}
|
||
}
|
||
get pattern() {
|
||
return this.getAttribute('pattern') || '';
|
||
}
|
||
|
||
set pattern(value) {
|
||
this.setAttribute('pattern', value);
|
||
}
|
||
get errorText() {
|
||
return this.getAttribute('error-text') || '该项为必填项';
|
||
}
|
||
set errorText(value) {
|
||
this.setAttribute('error-text', value)
|
||
}
|
||
get errorPlacement() {
|
||
return this.getAttribute('error-placement') || 'top';
|
||
}
|
||
set errorPlacement(value) {
|
||
this.setAttribute('error-placement', value)
|
||
}
|
||
get type() {
|
||
return this.getAttribute('type');
|
||
}
|
||
set type(value) {
|
||
this.setAttribute('type', value);
|
||
}
|
||
get maxlength() {
|
||
return this.getAttribute('maxlength') || '';
|
||
}
|
||
|
||
set maxlength(value) {
|
||
this.setAttribute('maxlength', value)
|
||
}
|
||
get rows() {
|
||
return this.getAttribute('rows');
|
||
}
|
||
set rows(value) {
|
||
this.setAttribute('rows', value);
|
||
}
|
||
get allowClear() {
|
||
return this.hasAttribute('allow-clear');
|
||
}
|
||
|
||
set allowClear(value) {
|
||
if (value) {
|
||
this.setAttribute('allow-clear', '');
|
||
} else {
|
||
this.removeAttribute('allow-clear');
|
||
}
|
||
}
|
||
|
||
get bordered() {
|
||
return this.getAttribute('bordered') || "true";
|
||
}
|
||
|
||
set bordered(value) {
|
||
if (value) {
|
||
this.setAttribute('bordered', 'true');
|
||
} else {
|
||
this.setAttribute('bordered', 'false')
|
||
}
|
||
}
|
||
|
||
get icon() {
|
||
return this.getAttribute('icon') || null;
|
||
}
|
||
|
||
set icon(value) {
|
||
this.setAttribute('icon', value)
|
||
}
|
||
|
||
get block() {
|
||
return this.hasAttribute('block')
|
||
}
|
||
|
||
set block(value) {
|
||
if (value) {
|
||
this.setAttribute('block', '');
|
||
} else {
|
||
this.removeAttribute('block')
|
||
}
|
||
}
|
||
|
||
get placeholder() {
|
||
return this.getAttribute('placeholder') || '';
|
||
}
|
||
|
||
set placeholder(value) {
|
||
this.setAttribute('placeholder', value);
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
${this.bordered === 'true' ? 'border: 1px solid #e9e9e9;' : ''}
|
||
display: inline-flex;
|
||
box-sizing: border-box;
|
||
position:relative;
|
||
align-items: ${this.rows ? 'flex-start' : 'center'};
|
||
transition: all .3s;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
${this.block ? 'display: flex;' : ''}
|
||
box-sizing: border-box;
|
||
}
|
||
:host(:hover){
|
||
${this.bordered === 'true' ? 'border: 1px solid #65b687;' : ''}
|
||
${this.bordered === 'true' ? 'box-shadow: 0 0 10px #65b68766;' : ''}
|
||
}
|
||
*{
|
||
box-sizing: border-box;
|
||
}
|
||
.input{
|
||
outline: none;
|
||
border: 0px;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
width: 100%;
|
||
height: 100%;
|
||
vertical-align:middle;
|
||
line-height:inherit;
|
||
height:inherit;
|
||
padding: 6px 6px 6px ${this.icon ? '6px' : '11px'};
|
||
max-height: inherit;
|
||
box-sizing: border-box;
|
||
}
|
||
/*去掉type=number 后面的增减箭头*/
|
||
input::-webkit-outer-spin-button,
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
|
||
}
|
||
|
||
input[type='number'] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
lit-tips{
|
||
flex: 1;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
lit-tips{
|
||
flex: 1;
|
||
align-items: center;
|
||
}
|
||
:host(:not([allow-clear])) .clear-btn{
|
||
display: flex;
|
||
visibility: hidden;
|
||
transition: all .3s;
|
||
opacity: 0;
|
||
}
|
||
:host([allow-clear]) .clear-btn{
|
||
opacity: 0;
|
||
position:absolute;
|
||
right: 0;
|
||
top: .5rem;
|
||
visibility: hidden;
|
||
transition: all .3s;
|
||
display: flex;
|
||
margin-right: 6px;
|
||
transform: translateY(0%);
|
||
color: #bfbfbf;
|
||
}
|
||
:host([allow-clear]) .clear-btn:hover{
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
.area{
|
||
outline: none;
|
||
border: 0px;
|
||
width: 100%;
|
||
font-size: inherit;
|
||
vertical-align:middle;
|
||
min-height: calc(2rem);
|
||
max-height: calc(${this.rows} * 1rem);
|
||
padding: 6px 6px 6px ${this.icon ? '6px' : '11px'};
|
||
box-sizing: border-box;
|
||
resize:vertical;
|
||
}
|
||
|
||
:host(:not([type=password])) .pwd-btn,
|
||
:host(:not([type=tel])) .pwd-btn{
|
||
display: none;
|
||
visibility: hidden;
|
||
transition: all .3s;
|
||
opacity: 0;
|
||
}
|
||
:host([type=password]) .pwd-btn,
|
||
:host([type=tel]) .pwd-btn{
|
||
opacity: 1;
|
||
position:absolute;
|
||
right: 0;
|
||
top: .5rem;
|
||
visibility: visible;
|
||
transition: all .3s;
|
||
display: flex;
|
||
margin-right: 6px;
|
||
transform: translateY(0%);
|
||
color: #bfbfbf;
|
||
}
|
||
/*:host([type=password]) input{*/
|
||
/* -webkit-text-security:none;*/
|
||
/* text-security:none;*/
|
||
/*}*/
|
||
:host([type=password]) .pwd-btn:hover,
|
||
:host([type=tel]) .pwd-btn:hover{
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
</style>
|
||
<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>
|
||
<lit-tips tips="${this.errorText}" placement="${this.errorPlacement}" color="#f4615c" offset="12px" show="false">
|
||
${this.hasAttribute('rows') ?
|
||
`<textarea class="area" rows="${this.rows}" value="${this.value}" placeholder="${this.placeholder}" cols="27" maxlength="${this.maxlength}" onscroll="this.rows++;"></textarea>`
|
||
:
|
||
`<input type="${this.type}" value="${this.value}" class="input" placeholder="${this.placeholder}" >`}
|
||
|
||
<lit-icon class="clear-btn" name="close-circle-fill"></lit-icon>
|
||
<lit-icon class="pwd-btn" name="eye-fill"></lit-icon>
|
||
</lit-tips>
|
||
<slot name="suffix" ></slot>
|
||
`
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
this.reg = new RegExp(this.pattern);
|
||
this.inputElement = this.shadowRoot.querySelector('.input');
|
||
this.areaElement = this.shadowRoot.querySelector('.area');
|
||
this.clearElement = this.shadowRoot.querySelector('.clear-btn');
|
||
this.pwdElement = this.shadowRoot.querySelector('.pwd-btn');
|
||
|
||
this.pwdElement.onclick = (e) => {
|
||
if (this.inputElement.getAttribute('type') === 'password') {
|
||
this.pwdElement.name = 'eyeclose-fill';
|
||
this.inputElement.setAttribute('type', 'tel');
|
||
} else if (this.inputElement.getAttribute('type') === 'tel') {
|
||
this.inputElement.setAttribute('type', 'password');
|
||
this.pwdElement.name = 'eye-fill';
|
||
}
|
||
}
|
||
|
||
if (this.areaElement) {
|
||
this.clearElement.onclick = e => {
|
||
this.areaElement.value = '';
|
||
this.clearElement.style.visibility = 'hidden';
|
||
this.clearElement.style.opacity = '0';
|
||
this.value = this.areaElement.value;
|
||
this.dispatchEvent(new CustomEvent('onClear', e));
|
||
this.clearError();
|
||
}
|
||
this.areaElement.oninput = e => {
|
||
if (this.allowClear) {
|
||
if (this.areaElement.value.length > 0) {
|
||
this.clearElement.style.visibility = 'visible';
|
||
this.clearElement.style.opacity = '1';
|
||
} else {
|
||
this.clearElement.style.visibility = 'hidden';
|
||
this.clearElement.style.opacity = '0';
|
||
}
|
||
}
|
||
this.value = this.areaElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('input', e));
|
||
}
|
||
this.areaElement.onchange = e => {
|
||
this.value = this.areaElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('change', e));
|
||
}
|
||
this.areaElement.onfocus = e => {
|
||
this.value = this.areaElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('focus', e));
|
||
}
|
||
this.areaElement.onblur = e => {
|
||
this.value = this.areaElement.value;
|
||
this.dispatchEvent(new CustomEvent('blur', e));
|
||
}
|
||
this.areaElement.onkeydown = e => {
|
||
if (e.key === 'Enter') {
|
||
this.value = this.areaElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('onPressEnter', e));
|
||
}
|
||
this.dispatchEvent(new CustomEvent('keydown', e));
|
||
}
|
||
this.areaElement.onkeyup = e => {
|
||
this.dispatchEvent(new CustomEvent('keyup', e));
|
||
}
|
||
this.areaElement.onselect = e => {
|
||
this.dispatchEvent(new CustomEvent('select', e));
|
||
}
|
||
this.areaElement.onclick = e => {
|
||
this.dispatchEvent(new CustomEvent('click', e));
|
||
}
|
||
}
|
||
if (this.inputElement) {
|
||
this.clearElement.onclick = e => {
|
||
this.inputElement.value = '';
|
||
this.clearElement.style.visibility = 'hidden';
|
||
this.clearElement.style.opacity = '0';
|
||
this.value = this.inputElement.value;
|
||
this.dispatchEvent(new CustomEvent('onClear', e));
|
||
this.clearError();
|
||
}
|
||
this.inputElement.oninput = e => {
|
||
if (this.allowClear) {
|
||
if (this.inputElement.value.length > 0) {
|
||
this.clearElement.style.visibility = 'visible';
|
||
this.clearElement.style.opacity = '1';
|
||
} else {
|
||
this.clearElement.style.visibility = 'hidden';
|
||
this.clearElement.style.opacity = '0';
|
||
}
|
||
}
|
||
this.value = this.inputElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('input', e));
|
||
}
|
||
this.inputElement.onchange = e => {
|
||
this.value = this.inputElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('change', e));
|
||
}
|
||
this.inputElement.onfocus = e => {
|
||
this.value = this.inputElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('focus', e));
|
||
}
|
||
this.inputElement.onblur = e => {
|
||
this.dispatchEvent(new CustomEvent('blur', e));
|
||
}
|
||
this.inputElement.onkeydown = e => {
|
||
if (e.key === 'Enter') {
|
||
this.value = this.inputElement.value;
|
||
this.verify();
|
||
this.dispatchEvent(new CustomEvent('onPressEnter', e));
|
||
}
|
||
this.dispatchEvent(new CustomEvent('keydown', e));
|
||
}
|
||
this.inputElement.onkeyup = e => {
|
||
this.dispatchEvent(new CustomEvent('keyup', e));
|
||
}
|
||
this.inputElement.onselect = e => {
|
||
this.dispatchEvent(new CustomEvent('select', e));
|
||
}
|
||
this.inputElement.onclick = e => {
|
||
this.dispatchEvent(new CustomEvent('click', e));
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (name === 'value') {
|
||
// console.log(name,oldValue,newValue);
|
||
// console.log(this.inputElement);
|
||
if (this.inputElement) {
|
||
this.inputElement.value = newValue
|
||
} else if (this.areaElement) {
|
||
this.areaElement.value = newValue;
|
||
}
|
||
}
|
||
}
|
||
verify() {
|
||
if (this.required) {
|
||
let result;
|
||
if (this.hasAttribute('rows')) {
|
||
result = this.reg.test(this.areaElement.value);
|
||
} else {
|
||
result = this.reg.test(this.inputElement.value);
|
||
}
|
||
if (result) {
|
||
this.shadowRoot.querySelector('lit-tips').show = 'false'
|
||
} else {
|
||
this.shadowRoot.querySelector('lit-tips').show = 'true'
|
||
}
|
||
return result;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
clearError() {
|
||
this.shadowRoot.querySelector('lit-tips').show = 'false'
|
||
}
|
||
}
|
||
if (!customElements.get('lit-input')) {
|
||
customElements.define('lit-input', LitInput);
|
||
}
|
||
|
||
class LitLoading extends HTMLElement {
|
||
static get observedAttributes() { return ['color', 'size'] }
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
font-size:inherit;
|
||
display:inline-flex;
|
||
align-items: center;
|
||
justify-content:center;
|
||
color:var(--themeColor,#42b983);
|
||
}
|
||
.loading{
|
||
display: block;
|
||
width: 1em;
|
||
height: 1em;
|
||
margin: auto;
|
||
animation: rotate 1.4s linear infinite;
|
||
}
|
||
.circle {
|
||
stroke: currentColor;
|
||
animation: progress 1.4s ease-in-out infinite;
|
||
stroke-dasharray: 80px, 200px;
|
||
stroke-dashoffset: 0px;
|
||
transition:.3s;
|
||
}
|
||
:host(:not(:empty)) .loading{
|
||
margin:.5em;
|
||
}
|
||
@keyframes rotate{
|
||
to{
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
@keyframes progress {
|
||
0% {
|
||
stroke-dasharray: 1px, 200px;
|
||
stroke-dashoffset: 0px;
|
||
}
|
||
50% {
|
||
stroke-dasharray: 100px, 200px;
|
||
stroke-dashoffset: -15px;
|
||
}
|
||
100% {
|
||
stroke-dasharray: 100px, 200px;
|
||
stroke-dashoffset: -125px;
|
||
}
|
||
}
|
||
</style>
|
||
<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>
|
||
<slot></slot>
|
||
`
|
||
}
|
||
|
||
get size() {
|
||
return this.getAttribute('size') || '';
|
||
}
|
||
|
||
get color() {
|
||
return this.getAttribute('color') || '';
|
||
}
|
||
|
||
set size(value) {
|
||
this.setAttribute('size', value);
|
||
}
|
||
|
||
set color(value) {
|
||
this.setAttribute('color', value);
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.loading = this.shadowRoot.getElementById('loading');
|
||
this.size && (this.size = this.size);
|
||
this.color && (this.color = this.color);
|
||
}
|
||
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (name == 'color' && this.loading) {
|
||
this.loading.style.color = newValue;
|
||
}
|
||
if (name == 'size' && this.loading) {
|
||
this.loading.style.fontSize = newValue + 'px';
|
||
}
|
||
}
|
||
}
|
||
if (!customElements.get('lit-loading')) {
|
||
customElements.define('lit-loading', LitLoading);
|
||
}
|
||
|
||
class LitPagination extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return [
|
||
"current",//当前页码
|
||
"total",//总条数
|
||
"page-size",//每页条数
|
||
"disabled",//禁用分页
|
||
'show-size-changer',//显示每页条目数select
|
||
'show-quick-jumper',//显示跳至多少页
|
||
'page-size-options',//指定每页可以显示多少条 默认 [10,20,50,100]
|
||
'simple',//简洁模式
|
||
]
|
||
}
|
||
get pageSizeOptions() {
|
||
return this.getAttribute('page-size-options');
|
||
}
|
||
set pageSizeOptions(value) {
|
||
this.setAttribute('page-size-options', '');
|
||
}
|
||
|
||
get current() {
|
||
return this.getAttribute('current') || '1';
|
||
}
|
||
|
||
set current(value) {
|
||
this.setAttribute('current', value);
|
||
}
|
||
|
||
get total() {
|
||
return this.getAttribute('total') || '50';
|
||
}
|
||
|
||
set total(value) {
|
||
this.setAttribute('total', value);
|
||
}
|
||
|
||
get pageSize() {
|
||
return this.getAttribute('page-size') || '10';
|
||
}
|
||
|
||
set pageSize(value) {
|
||
this.setAttribute('page-size', value);
|
||
}
|
||
|
||
get disabled() {
|
||
return this.hasAttribute('disabled');
|
||
}
|
||
|
||
set disabled(value) {
|
||
if (value) {
|
||
this.setAttribute('disabled', '');
|
||
} else {
|
||
this.removeAttribute('disabled');
|
||
}
|
||
}
|
||
|
||
get showSizeChanger() {
|
||
return this.hasAttribute('show-size-changer')
|
||
}
|
||
|
||
set showSizeChanger(value) {
|
||
if (value) {
|
||
this.setAttribute('show-size-changer', '');
|
||
} else {
|
||
this.removeAttribute('show-size-changer');
|
||
}
|
||
}
|
||
|
||
get showQuickJumper() {
|
||
return this.hasAttribute('show-quick-jumper')
|
||
}
|
||
|
||
set showQuickJumper(value) {
|
||
if (value) {
|
||
this.setAttribute('show-quick-jumper', '');
|
||
} else {
|
||
this.removeAttribute('show-quick-jumper');
|
||
}
|
||
}
|
||
|
||
get simple() {
|
||
return this.hasAttribute('simple');
|
||
}
|
||
|
||
set simple(value) {
|
||
if (value) {
|
||
this.setAttribute('simple', '');
|
||
} else {
|
||
this.removeAttribute('simple');
|
||
}
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
display: flex;
|
||
width: max-content;
|
||
}
|
||
.root{
|
||
display: inline-flex;
|
||
/*grid-template-columns: repeat(auto-fill,35px);*/
|
||
/*column-gap: 8px;*/
|
||
/*row-gap: 8px;*/
|
||
user-select: none;
|
||
}
|
||
.item{
|
||
box-sizing: border-box;
|
||
color: #333;
|
||
transition: all .3s;
|
||
width: 35px;
|
||
height: 35px;
|
||
margin-left: 6px;
|
||
padding: 6px 10px;
|
||
border: 1px solid #ececec;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.item-dir{
|
||
color: #333;
|
||
transition: all .3s;
|
||
padding: 5px 10px;
|
||
/*border: 1px solid #ececec;*/
|
||
/*border-radius: 3px;*/
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.item:not([disable]):hover{
|
||
color:#42b983;
|
||
border: 1px solid #42b983;
|
||
}
|
||
.item[selected]{
|
||
color:#42b983;
|
||
border: 1px solid #42b983;
|
||
}
|
||
.item[disable]{
|
||
/*background-color: #f5f5f5;*/
|
||
fill: #c7c7c7;
|
||
color: #c7c7c7;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
:host([show-quick-jumper]) .jump-root{
|
||
grid-column: span 4;
|
||
margin-left: 6px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
:host(:not([show-quick-jumper])) .jump-root{
|
||
display: none;
|
||
}
|
||
|
||
:host([show-size-changer]) .pages-change{
|
||
display: inline-flex;
|
||
grid-column: span 3;
|
||
width: 120px;
|
||
margin-left: 6px;
|
||
font-size: .9rem;
|
||
}
|
||
:host(:not([show-size-changer])) .pages-change{
|
||
display: none;
|
||
}
|
||
</style>
|
||
<div style="display: grid;grid-template-columns: max-content 1fr;">
|
||
<div style="display: inline-flex;align-items: center" id="showTotal">
|
||
<slot id="st" name="showTotal"></slot>
|
||
</div>
|
||
<div class="root">
|
||
<!-- <lit-icon class="item left-arrow" name="left" ></lit-icon>-->
|
||
<svg class="item left-arrow" viewBox="0 0 1024 1024" aria-hidden="true" >
|
||
<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>
|
||
</svg>
|
||
<div class="item first">1</div>
|
||
<lit-icon class="item-dir double-left" name="ellipsis" ></lit-icon>
|
||
<!-- <svg class="item-dir double-left" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">-->
|
||
<!-- <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>-->
|
||
<!-- </svg>-->
|
||
<div class="item one">2</div>
|
||
<div class="item two">3</div>
|
||
<div class="item three">4</div>
|
||
<div class="item four">5</div>
|
||
<div class="item five">6</div>
|
||
<lit-icon class="item-dir double-right" name="ellipsis" ></lit-icon>
|
||
<!-- <svg class="item-dir double-right" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">-->
|
||
<!-- <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>-->
|
||
<!-- </svg>-->
|
||
<div class="item last">1</div>
|
||
<!-- <lit-icon class="item right-arrow" name="right"></lit-icon>-->
|
||
<svg class="item right-arrow" viewBox="0 0 1024 1024" aria-hidden="true" >
|
||
<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>
|
||
</svg>
|
||
<lit-select class="pages-change" default-value="10"></lit-select>
|
||
<div class="jump-root">
|
||
<label style="font-size: .9rem;color: #333;margin-right: 5px">跳至</label>
|
||
<lit-input type="number" class="jump" style="width: 80px;height: 100%"></lit-input>
|
||
<label style="font-size: .9rem;color: #333;margin-left: 5px">页</label>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
`
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
this.slotShowTotal = null;
|
||
this.rootElement = this.shadowRoot.querySelector('.root');
|
||
let st = this.shadowRoot.querySelector('#st');
|
||
st.addEventListener('slotchange', () => {
|
||
let elements = st.assignedElements();
|
||
if (elements.length > 0) {
|
||
this.slotShowTotal = elements[0];
|
||
}
|
||
if (this.slotShowTotal) {
|
||
let cloneNode = this.slotShowTotal.render({
|
||
total: this._total,
|
||
range: [1, this._pages],
|
||
}).content.cloneNode(true);
|
||
this.shadowRoot.querySelector('#showTotal').append(cloneNode);
|
||
}
|
||
})
|
||
this.leftArrow = this.shadowRoot.querySelector('.left-arrow');
|
||
this.first = this.shadowRoot.querySelector('.first');
|
||
this.doubleLeft = this.shadowRoot.querySelector('.double-left');
|
||
this.one = this.shadowRoot.querySelector('.one');
|
||
this.two = this.shadowRoot.querySelector('.two');
|
||
this.three = this.shadowRoot.querySelector('.three');
|
||
this.four = this.shadowRoot.querySelector('.four');
|
||
this.five = this.shadowRoot.querySelector('.five');
|
||
this.doubleRight = this.shadowRoot.querySelector('.double-right');
|
||
this.last = this.shadowRoot.querySelector('.last');
|
||
this.rightArrow = this.shadowRoot.querySelector('.right-arrow');
|
||
this.pagesChange = this.shadowRoot.querySelector('.pages-change');
|
||
this.jump = this.shadowRoot.querySelector('.jump');
|
||
this.nodes = [this.one, this.two, this.three, this.four, this.five]
|
||
|
||
let jsonArray = JSON.parse(this.pageSizeOptions);
|
||
if (jsonArray) {
|
||
this.pagesChange.dataSource = jsonArray.map(a => {
|
||
return { key: a, val: `${a} 条/页`, }
|
||
});
|
||
this.pagesChange.value = jsonArray[0] + '';
|
||
this.pageSize = jsonArray[0] + '';
|
||
} else {
|
||
this.pagesChange.dataSource = [10, 20, 50, 100].map(a => {
|
||
return { key: a, val: `${a} 条/页`, }
|
||
});
|
||
this.pagesChange.value = '10';
|
||
this.pageSize = '10';
|
||
}
|
||
|
||
this.jump.addEventListener('onPressEnter', e => {
|
||
if (e.target.value) {
|
||
this.current = e.target.value;
|
||
e.target.value = '';
|
||
this.match();
|
||
}
|
||
});
|
||
this.pagesChange.onchange = e => {
|
||
// console.log(e.detail);
|
||
this.pageSize = e.detail.value;
|
||
this.match();
|
||
if (this.slotShowTotal) {
|
||
let cloneNode = this.slotShowTotal.render({
|
||
total: this._total,
|
||
range: [1, this._pages],
|
||
}).content.cloneNode(true);
|
||
this.shadowRoot.querySelector('#showTotal').lastElementChild.remove();
|
||
this.shadowRoot.querySelector('#showTotal').append(cloneNode);
|
||
}
|
||
this.dispatchEvent(new CustomEvent('onShowSizeChange', {
|
||
detail: {
|
||
current: parseInt(this.current),
|
||
size: parseInt(this.pageSize)
|
||
}
|
||
}))
|
||
}
|
||
|
||
this.leftArrow.onclick = (e) => {
|
||
if (this._current > 1) {
|
||
this.current = `${this._current - 1}`
|
||
this.match();
|
||
}
|
||
}
|
||
this.rightArrow.onclick = (e) => {
|
||
if (this._current < this._pages) {
|
||
this.current = `${this._current + 1}`
|
||
this.match();
|
||
}
|
||
}
|
||
let nodeClickHandler = e => {
|
||
this.current = `${e.currentTarget.val}`;
|
||
this.match();
|
||
};
|
||
this.first.onclick = nodeClickHandler;
|
||
this.nodes.forEach(a => a.onclick = nodeClickHandler);
|
||
this.last.onclick = nodeClickHandler;
|
||
this.doubleLeft.onmouseover = e => {
|
||
e.target.name = 'doubleleft';
|
||
}
|
||
this.doubleLeft.onmouseout = e => {
|
||
e.target.name = 'ellipsis'
|
||
}
|
||
this.doubleLeft.onclick = e => {
|
||
let k = this._current - 5;
|
||
if (k < 1) k = 1;
|
||
this.current = `${k}`;
|
||
this.match();
|
||
}
|
||
this.doubleRight.onmouseover = e => {
|
||
e.target.name = 'doubleright';
|
||
}
|
||
this.doubleRight.onmouseout = e => {
|
||
e.target.name = 'ellipsis'
|
||
}
|
||
this.doubleRight.onclick = e => {
|
||
let k = this._current + 5;
|
||
if (k > this._pages) k = this._pages;
|
||
this.current = `${k}`;
|
||
this.match();
|
||
}
|
||
this.match();
|
||
}
|
||
|
||
match() {
|
||
this._current = parseInt(this.current);
|
||
this._total = parseInt(this.total);
|
||
this._pageSize = parseInt(this.pageSize);
|
||
this._pages = Math.ceil(this._total / this._pageSize)
|
||
if (this._current > this._pages) {
|
||
this._current = this._pages;
|
||
this.current = `${this._pages}`;
|
||
} else if (this._current < 1) {
|
||
this._current = 1;
|
||
this.current = `1`;
|
||
}
|
||
//是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
|
||
// if(this._total>50) this.setAttribute('show-size-changer', '');
|
||
|
||
// console.log(`${this._total} ${this._current}/${this._pages} ${this._pageSize}`);
|
||
if (this._current === 1) {
|
||
this.leftArrow.setAttribute('disable', '');
|
||
} else {
|
||
this.leftArrow.removeAttribute('disable');
|
||
}
|
||
if (this._current === this._pages) {
|
||
this.rightArrow.setAttribute('disable', '');
|
||
} else {
|
||
this.rightArrow.removeAttribute('disable');
|
||
}
|
||
this.hiddenNode(this.first, this.last, this.one, this.two, this.three, this.four, this.five, this.doubleLeft, this.doubleRight)
|
||
if (this._pages <= 5) {
|
||
for (let i = 0; i < this._pages; i++) {
|
||
this.displayNode(this.nodes[i]);
|
||
this.item(this.nodes[i], i + 1);
|
||
}
|
||
} else if (this._pages === 6) {
|
||
this.displayNode(this.first);
|
||
this.item(this.first, 1);
|
||
for (let i = 0; i < this._pages; i++) {
|
||
this.displayNode(this.nodes[i]);
|
||
this.item(this.nodes[i], i + 2);
|
||
}
|
||
} else {
|
||
this.displayNode(this.one, this.two, this.three, this.four, this.five)
|
||
if (this._current - 3 > 1 && this._current + 3 < this._pages) { // 左边溢出 右边溢出
|
||
this.displayNode(this.first, this.last, this.doubleLeft, this.doubleRight);
|
||
this.item(this.first, 1);
|
||
this.item(this.last, this._pages);
|
||
this.item(this.one, this._current - 2);
|
||
this.item(this.two, this._current - 1);
|
||
this.item(this.three, this._current);
|
||
this.item(this.four, this._current + 1);
|
||
this.item(this.five, this._current + 2);
|
||
} else if (this._current - 3 === 1 && this._current + 3 < this._pages) {//左边刚好 右边溢出
|
||
this.displayNode(this.first, this.last, this.doubleRight);
|
||
this.item(this.first, 1)
|
||
this.item(this.last, this._pages)
|
||
for (let i = 0; i < this.nodes.length; i++) {
|
||
this.item(this.nodes[i], i + 2);
|
||
}
|
||
} else if (this._current - 3 < 1 && this._current + 3 < this._pages) { //左边不够 右边溢出
|
||
this.displayNode(this.last, this.doubleRight);
|
||
this.item(this.last, this._pages)
|
||
for (let i = 0; i < this.nodes.length; i++) {
|
||
this.item(this.nodes[i], i + 1);
|
||
}
|
||
} else if (this._current - 3 > 1 && this._current + 3 === this._pages) {// 左边溢出 右边刚好
|
||
this.displayNode(this.first, this.last, this.doubleLeft);
|
||
this.item(this.first, 1);
|
||
this.item(this.last, this._pages);
|
||
this.item(this.nodes[0], this._pages - 5);
|
||
this.item(this.nodes[1], this._pages - 4);
|
||
this.item(this.nodes[2], this._pages - 3);
|
||
this.item(this.nodes[3], this._pages - 2);
|
||
this.item(this.nodes[4], this._pages - 1);
|
||
} else if (this._current - 3 === 1 && this._current + 3 === this._pages) {// 左边刚好 右边刚好
|
||
this.displayNode(this.first, this.last);
|
||
this.item(this.first, 1);
|
||
for (let i = 0; i < this._pages; i++) {
|
||
this.displayNode(this.nodes[i]);
|
||
this.item(this.nodes[i], i + 2);
|
||
}
|
||
this.item(this.last, 7);
|
||
} else if (this._current - 3 < 1 && this._current + 3 === this._pages) {// 左边不够 右边刚好
|
||
this.displayNode(this.last);
|
||
this.item(this.last, this._pages)
|
||
for (let i = 0; i < this.nodes.length; i++) {
|
||
this.item(this.nodes[i], i + 1);
|
||
}
|
||
} else if (this._current - 3 > 1 && this._current + 3 > this._pages) { //左边溢出 右边不够
|
||
this.displayNode(this.first, this.doubleLeft)
|
||
this.item(this.first, 1);
|
||
this.item(this.nodes[0], this._pages - 4);
|
||
this.item(this.nodes[1], this._pages - 3);
|
||
this.item(this.nodes[2], this._pages - 2);
|
||
this.item(this.nodes[3], this._pages - 1);
|
||
this.item(this.nodes[4], this._pages - 0);
|
||
} else if (this._current - 3 === 1 && this._current + 3 > this._pages) { //左边刚好 右边不够
|
||
this.displayNode(this.first);
|
||
this.item(this.first, 1);
|
||
this.item(this.nodes[0], this._pages - 4);
|
||
this.item(this.nodes[1], this._pages - 3);
|
||
this.item(this.nodes[2], this._pages - 2);
|
||
this.item(this.nodes[3], this._pages - 1);
|
||
this.item(this.nodes[4], this._pages - 0);
|
||
} else if (this._current - 3 < 1 && this._current + 3 > this._pages) { //左边不够 右边不够
|
||
//限定了 pages>6 这种情况不存在
|
||
}
|
||
}
|
||
}
|
||
|
||
item(el, val) {
|
||
el.val = val;
|
||
el.textContent = val;
|
||
if (val === this._current) {
|
||
el.setAttribute('selected', '');
|
||
} else {
|
||
el.removeAttribute('selected');
|
||
}
|
||
}
|
||
|
||
displayNode() {
|
||
[...arguments].forEach(a => a.style.display = 'flex');
|
||
}
|
||
|
||
hiddenNode(n) {
|
||
[...arguments].forEach(a => a.style.display = 'none');
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (name === 'current') {
|
||
this.dispatchEvent(new CustomEvent('onChange', {
|
||
detail: {
|
||
page: parseInt(newValue),
|
||
pageSize: this._pageSize
|
||
}
|
||
}));
|
||
} else if (name === 'total') {
|
||
this.dispatchEvent(new CustomEvent('onChange', {
|
||
detail: {
|
||
total: parseInt(newValue),
|
||
current: this._current,
|
||
pageSize: this._pageSize
|
||
}
|
||
}));
|
||
this.match()
|
||
}
|
||
|
||
}
|
||
}
|
||
if (!customElements.get('lit-pagination')) {
|
||
customElements.define('lit-pagination', LitPagination);
|
||
}
|
||
|
||
class LitSelect extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return [
|
||
'value',//默认值
|
||
'default-value',//默认值
|
||
'placeholder',//placeholder
|
||
'disabled',
|
||
'loading',//是否处于加载状态
|
||
'allow-clear',//是否允许清除
|
||
'show-search',//是否允许搜索
|
||
'list-height',//设置弹窗滚动高度 默认256px
|
||
'border',//是否显示边框
|
||
'mode',// mode='multiple'多选
|
||
];
|
||
}
|
||
|
||
get value() {
|
||
return this.getAttribute('value') || this.defaultValue;
|
||
}
|
||
|
||
set value(value) {
|
||
this.setAttribute('value', value);
|
||
}
|
||
|
||
get border() {
|
||
return this.getAttribute('border') || 'true';
|
||
}
|
||
|
||
set border(value) {
|
||
if (value) {
|
||
this.setAttribute('border', 'true');
|
||
} else {
|
||
this.setAttribute('border', 'false');
|
||
}
|
||
}
|
||
|
||
get listHeight() {
|
||
return this.getAttribute('list-height') || '256px';
|
||
}
|
||
|
||
set listHeight(value) {
|
||
this.setAttribute('list-height', value);
|
||
}
|
||
|
||
get defaultPlaceholder() {
|
||
return this.getAttribute('placeholder') || '请选择';
|
||
}
|
||
|
||
get showSearch() {
|
||
return this.hasAttribute('show-search');
|
||
}
|
||
|
||
set defaultValue(value) {
|
||
this.setAttribute('default-value', value);
|
||
}
|
||
|
||
get defaultValue() {
|
||
return this.getAttribute('default-value') || '';
|
||
}
|
||
|
||
set placeholder(value) {
|
||
this.setAttribute('placeholder', value);
|
||
}
|
||
|
||
get placeholder() {
|
||
return this.getAttribute('placeholder') || this.defaultPlaceholder;
|
||
}
|
||
|
||
get loading() {
|
||
return this.hasAttribute('loading');
|
||
}
|
||
|
||
set loading(value) {
|
||
if (value) {
|
||
this.setAttribute('loading', '');
|
||
} else {
|
||
this.removeAttribute('loading')
|
||
}
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
display: inline-flex;
|
||
position: relative;
|
||
overflow: visible;
|
||
cursor: pointer;
|
||
transition: all .3s;
|
||
border-radius: 2px;
|
||
outline: none;
|
||
-webkit-user-select:none ;
|
||
-moz-user-select:none;
|
||
user-select:none;
|
||
/*width: 100%;*/
|
||
}
|
||
:host(:not([border])),
|
||
:host([border='true']){
|
||
border: 1px solid #dcdcdc;
|
||
}
|
||
input{
|
||
border: 0;
|
||
outline: none;
|
||
background-color: transparent;
|
||
cursor: pointer;
|
||
transition: all .3s;
|
||
-webkit-user-select:none ;
|
||
-moz-user-select:none;
|
||
user-select:none;
|
||
display: inline-flex;
|
||
}
|
||
:host(:not([mode])) input{
|
||
width: 100%;
|
||
}
|
||
:host([mode]) input{
|
||
padding: 6px 0px;
|
||
}
|
||
:host([mode]) .root{
|
||
padding: 1px 8px;
|
||
}
|
||
.root{
|
||
position: relative;
|
||
padding: 6px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: all .3s;
|
||
border-radius: 2px;
|
||
background-color: #fff;
|
||
outline: none;
|
||
font-size: 1rem;
|
||
z-index: 2;
|
||
-webkit-user-select:none ;
|
||
-moz-user-select:none;
|
||
user-select:none;
|
||
width: 100%;
|
||
}
|
||
.body{
|
||
max-height: ${this.listHeight};
|
||
position: absolute;
|
||
top: 100%;
|
||
z-index: 99;
|
||
padding-top: 5px;
|
||
margin-top: 2px;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
transition: all 0.2s;
|
||
transform: scaleY(.6);
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transform-origin: top center;
|
||
display: block;
|
||
flex-direction: column;
|
||
box-shadow: 0 5px 15px 0px #00000033;
|
||
border-radius: 2px;
|
||
overflow: auto;
|
||
}
|
||
.icon{
|
||
pointer-events: none;
|
||
}
|
||
.noSelect{
|
||
-webkit-touch-callout:none; /* iOS Safari */
|
||
-webkit-user-select:none; /* Chrome/Safari/Opera */
|
||
-khtml-user-select:none; /* Konqueror */
|
||
-moz-user-select:none; /* Firefox */
|
||
-ms-user-select:none; /* Internet Explorer/Edge */
|
||
user-select:none; /* Non-prefixed version */
|
||
}
|
||
|
||
:host(:not([border]):not([disabled]):focus),
|
||
:host([border='true']:not([disabled]):focus),
|
||
:host(:not([border]):not([disabled]):hover),
|
||
:host([border='true']:not([disabled]):hover){
|
||
border:1px solid #42b983
|
||
}
|
||
:host(:not([disabled]):focus) .body,
|
||
:host(:not([disabled]):focus-within) .body{
|
||
transform: scaleY(1);
|
||
opacity: 1;
|
||
z-index: 99;
|
||
visibility: visible;
|
||
}
|
||
:host(:not([disabled]):focus) input{
|
||
color: #bebebe;
|
||
}
|
||
:host(:not([border])[disabled]) *,
|
||
:host([border='true'][disabled]) *{
|
||
background-color: #f5f5f5;
|
||
color: #b7b7b7;
|
||
cursor: not-allowed;
|
||
}
|
||
:host([border='false'][disabled]) *{
|
||
color: #b7b7b7;
|
||
cursor: not-allowed;
|
||
}
|
||
:host([loading]) .loading{
|
||
display: flex;
|
||
}
|
||
:host([loading]) .icon{
|
||
display: none;
|
||
}
|
||
:host(:not([loading])) .loading{
|
||
display: none;
|
||
}
|
||
:host(:not([loading])) .icon{
|
||
display: flex;
|
||
}
|
||
:host(:not([allow-clear])) .clear{
|
||
display: none;
|
||
}
|
||
.clear{
|
||
display: none;
|
||
color: #bfbfbf;
|
||
}
|
||
.clear:hover{
|
||
color: #8c8c8c;
|
||
}
|
||
.search{
|
||
display: none;
|
||
color: #bfbfbf;
|
||
}
|
||
.multipleRoot{
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
flex-flow: wrap;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
.tag{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background-color: #f5f5f5;
|
||
padding: 1px 4px;
|
||
height: auto;
|
||
font-size: .75rem;
|
||
font-weight: bold;
|
||
color: #242424;
|
||
overflow: auto;
|
||
position: relative;
|
||
margin-right: 4px;
|
||
margin-top: 1px;
|
||
margin-bottom: 1px;
|
||
}
|
||
.tag-close{
|
||
font-size: .8rem;
|
||
padding: 2px;
|
||
margin-left: 0px;
|
||
color: #999999;
|
||
}
|
||
.tag-close:hover{
|
||
color: #333;
|
||
}
|
||
|
||
</style>
|
||
<div class="root noSelect" tabindex="0" hidefocus="true">
|
||
<div class="multipleRoot">
|
||
<input placeholder="${this.placeholder}" style="" autocomplete="off" ${this.showSearch ? '' : 'readonly'} tabindex="0">
|
||
</div><!--多选-->
|
||
<lit-loading class="loading" size="12"></lit-loading>
|
||
<!--<lit-icon class="icon" name='down' color="#c3c3c3"></lit-icon>-->
|
||
<svg class="icon" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;fill: #c3c3c3">
|
||
<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>
|
||
</svg>
|
||
<!-- <lit-icon class="clear" name='close-circle-fill'></lit-icon>-->
|
||
<svg class="clear" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">
|
||
<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>
|
||
</svg>
|
||
<!-- <lit-icon class="search" name='search'></lit-icon>-->
|
||
<svg class="search" viewBox="0 0 1024 1024" aria-hidden="true" style="width: 16px;width: 16px;">
|
||
<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>
|
||
</svg>
|
||
</div>
|
||
<div class="body">
|
||
<slot></slot>
|
||
<slot name="footer"></slot>
|
||
</div>
|
||
`
|
||
}
|
||
|
||
isMultiple() {
|
||
return this.hasAttribute('mode') && this.getAttribute('mode') === 'multiple'
|
||
}
|
||
|
||
newTag(value, text) {
|
||
let tag = document.createElement('div');
|
||
let icon = document.createElement('lit-icon');
|
||
icon.classList.add('tag-close')
|
||
icon.name = 'close'
|
||
let span = document.createElement('span');
|
||
tag.classList.add('tag');
|
||
span.dataset['value'] = value;
|
||
span.textContent = text;
|
||
tag.append(span);
|
||
tag.append(icon);
|
||
icon.onclick = ev => {
|
||
tag.parentElement.removeChild(tag);
|
||
this.querySelector(`lit-select-option[value=${value}]`).removeAttribute('selected')
|
||
if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
|
||
this.inputElement.style.width = 'auto';
|
||
this.inputElement.placeholder = this.defaultPlaceholder;
|
||
}
|
||
ev.stopPropagation();
|
||
}
|
||
tag.value = value;
|
||
tag.dataset['value'] = value;
|
||
tag.text = text;
|
||
tag.dataset['text'] = text;
|
||
return tag;
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
this.tabIndex = 0;//设置当前组件为可以获取焦点
|
||
this.focused = false;
|
||
this.inputElement = this.shadowRoot.querySelector('input');
|
||
this.inputElement.style.width = '100%'
|
||
this.clearElement = this.shadowRoot.querySelector('.clear');
|
||
this.iconElement = this.shadowRoot.querySelector('.icon');
|
||
this.searchElement = this.shadowRoot.querySelector('.search');
|
||
this.multipleRootElement = this.shadowRoot.querySelector('.multipleRoot');
|
||
// console.log(this.multipleRootElement);
|
||
//点击清理 清空input值，展示placeholder，
|
||
this.clearElement.onclick = ev => {
|
||
if (this.isMultiple()) {
|
||
let delNodes = []
|
||
this.multipleRootElement.childNodes.forEach(a => {
|
||
if (a.tagName === 'DIV') {
|
||
delNodes.push(a);
|
||
}
|
||
})
|
||
for (let i = 0; i < delNodes.length; i++) {
|
||
delNodes[i].remove();
|
||
}
|
||
if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
|
||
this.inputElement.style.width = 'auto';
|
||
this.inputElement.placeholder = this.defaultPlaceholder;
|
||
}
|
||
}
|
||
this.querySelectorAll('lit-select-option').forEach(a => a.removeAttribute('selected'));
|
||
this.inputElement.value = ''
|
||
this.clearElement.style.display = 'none';
|
||
this.iconElement.style.display = 'flex';
|
||
this.blur();
|
||
ev.stopPropagation();//这里不会因为点击清理而触发 选择栏目显示或者隐藏
|
||
this.dispatchEvent(new CustomEvent('onClear', { detail: ev }))//向外派发清理事件
|
||
}
|
||
//初始化时遍历所有的option节点
|
||
this.initOptions();
|
||
//当前控件点击时 如果时select本身 需要显示 或 隐藏选择栏目，通过this.focused变量控制（默认为false）
|
||
this.onclick = ev => {
|
||
if (ev.target.tagName === 'LIT-SELECT') {
|
||
if (!this.focused) {
|
||
this.inputElement.focus();
|
||
this.focused = true;
|
||
} else {
|
||
this.blur();
|
||
this.focused = false;
|
||
}
|
||
}
|
||
}
|
||
this.onmouseover = this.onfocus = ev => {
|
||
// console.log('onmouseover',ev);
|
||
if (this.hasAttribute('allow-clear')) {
|
||
if (this.inputElement.value.length > 0 || this.inputElement.placeholder !== this.defaultPlaceholder) {
|
||
this.clearElement.style.display = 'flex'
|
||
this.iconElement.style.display = 'none';
|
||
} else {
|
||
this.clearElement.style.display = 'none'
|
||
this.iconElement.style.display = 'flex';
|
||
}
|
||
}
|
||
}
|
||
this.onmouseout = this.onblur = ev => {
|
||
// console.log('onmouseout',ev);
|
||
if (this.hasAttribute('allow-clear')) {
|
||
this.clearElement.style.display = 'none';
|
||
this.iconElement.style.display = 'flex';
|
||
}
|
||
this.focused = false;
|
||
}
|
||
//输入框获取焦点时，value值 暂存于 placeholder 然后value值清空，这样值会以placeholder形式灰色展示，鼠标位于第一个字符
|
||
this.inputElement.onfocus = ev => {
|
||
if (this.hasAttribute('disabled')) return;//如果控件处于disabled状态 直接忽略
|
||
if (this.inputElement.value.length > 0) {
|
||
this.inputElement.placeholder = this.inputElement.value;
|
||
this.inputElement.value = ''
|
||
}
|
||
if (this.hasAttribute('show-search')) {//如果有show-search属性 需要显示放大镜，隐藏向下的箭头
|
||
this.searchElement.style.display = 'flex';
|
||
this.iconElement.style.display = 'none';
|
||
}
|
||
this.querySelectorAll('lit-select-option').forEach(a => {//input获取焦点时显示所有可选项，相当于清理了搜索结果
|
||
a.style.display = 'flex';
|
||
})
|
||
}
|
||
//当输入框失去焦点的时候 placeholder 的值 保存到value上，input显示值
|
||
this.inputElement.onblur = ev => {
|
||
if (this.hasAttribute('disabled')) return;//如果控件处于disabled状态 直接忽略
|
||
if (this.isMultiple()) {
|
||
if (this.hasAttribute('show-search')) {//如果有show-search属性 失去焦点需要 隐藏放大镜图标，显示默认的向下箭头图标
|
||
this.searchElement.style.display = 'none';
|
||
this.iconElement.style.display = 'flex';
|
||
}
|
||
} else {
|
||
if (this.inputElement.placeholder !== this.defaultPlaceholder) {//如果placeholder为 请输入（默认值）不做处理
|
||
this.inputElement.value = this.inputElement.placeholder; //placeholder 保存的值放入 value中
|
||
this.inputElement.placeholder = this.defaultPlaceholder;//placeholder 值为 默认值（请输入）
|
||
}
|
||
if (this.hasAttribute('show-search')) {//如果有show-search属性 失去焦点需要 隐藏放大镜图标，显示默认的向下箭头图标
|
||
this.searchElement.style.display = 'none';
|
||
this.iconElement.style.display = 'flex';
|
||
}
|
||
}
|
||
}
|
||
//输入框每次文本变化 会匹配搜索的option 显示或者隐藏，达到搜索的效果
|
||
this.inputElement.oninput = ev => {
|
||
// console.log(ev.target.value);
|
||
let els = [...this.querySelectorAll('lit-select-option')];
|
||
if (!ev.target.value) {
|
||
els.forEach(a => a.style.display = 'flex');
|
||
} else {
|
||
els.forEach(a => {
|
||
let value = a.getAttribute('value');
|
||
// console.log(value.toLowerCase(), ev.target.value.toLowerCase());
|
||
if (value.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1 ||
|
||
a.textContent.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1) {
|
||
a.style.display = 'flex';
|
||
} else {
|
||
a.style.display = 'none';
|
||
}
|
||
})
|
||
}
|
||
}
|
||
//输入框按下回车键，自动输入当前搜索出来的第一行，及display!='none'的第一个，搜索会隐藏其他行
|
||
this.inputElement.onkeydown = ev => {
|
||
if (ev.key === 'Backspace') {
|
||
if (this.isMultiple()) {
|
||
let tag = this.multipleRootElement.lastElementChild.previousElementSibling;
|
||
if (tag) {
|
||
console.log(tag.value);
|
||
this.querySelector(`lit-select-option[value=${tag.value}]`).removeAttribute('selected');
|
||
tag.remove()
|
||
if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
|
||
this.inputElement.style.width = 'auto';
|
||
this.inputElement.placeholder = this.defaultPlaceholder;
|
||
}
|
||
}
|
||
} else {
|
||
this.clear();
|
||
this.dispatchEvent(new CustomEvent('onClear', { detail: ev }))//向外派发清理事件
|
||
}
|
||
} else if (ev.key === 'Enter') {
|
||
let filter = [...this.querySelectorAll('lit-select-option')].filter(a => a.style.display !== 'none');
|
||
if (filter.length > 0) {
|
||
this.inputElement.value = filter[0].textContent;
|
||
this.inputElement.placeholder = filter[0].textContent;
|
||
this.blur();
|
||
this.dispatchEvent(new CustomEvent('change', {
|
||
detail: {
|
||
selected: true,
|
||
value: filter[0].getAttribute('value'),
|
||
text: filter[0].textContent
|
||
}
|
||
}));//向外层派发change事件，返回当前选中项
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
initOptions() {
|
||
this.querySelectorAll('lit-select-option').forEach(a => {
|
||
//如果节点的值为 当前控件的默认值 defalut-value则 显示该值对应的option文本
|
||
if (this.isMultiple()) {
|
||
a.setAttribute('check', '');
|
||
if (a.getAttribute('value') === this.defaultValue) {
|
||
let tag = this.newTag(a.getAttribute('value'), a.textContent);
|
||
this.multipleRootElement.insertBefore(tag, this.inputElement);
|
||
this.inputElement.placeholder = '';
|
||
this.inputElement.value = '';
|
||
this.inputElement.style.width = '1px';
|
||
a.setAttribute('selected', '');
|
||
}
|
||
// this.inputElement.focus();
|
||
} else {
|
||
if (a.getAttribute('value') === this.defaultValue) {
|
||
this.inputElement.value = a.textContent;
|
||
a.setAttribute('selected', '');
|
||
}
|
||
}
|
||
//每个option设置onSelected事件 接受当前点击的option
|
||
a.addEventListener('onSelected', (e) => {
|
||
// console.log(e.detail);
|
||
//所有option设置为未选中状态
|
||
if (this.isMultiple()) {//多选
|
||
if (a.hasAttribute('selected')) {
|
||
// console.log(e.detail.value);
|
||
let tag = this.shadowRoot.querySelector(`div[data-value=${e.detail.value}]`);
|
||
// console.log(tag);
|
||
tag.parentElement.removeChild(tag);
|
||
e.detail.selected = false;
|
||
} else {
|
||
let tag = this.newTag(e.detail.value, e.detail.text);
|
||
this.multipleRootElement.insertBefore(tag, this.inputElement);
|
||
this.inputElement.placeholder = '';
|
||
this.inputElement.value = '';
|
||
this.inputElement.style.width = '1px';
|
||
}
|
||
if (this.shadowRoot.querySelectorAll('.tag').length == 0) {
|
||
this.inputElement.style.width = 'auto';
|
||
this.inputElement.placeholder = this.defaultPlaceholder;
|
||
}
|
||
this.inputElement.focus();
|
||
} else {//单选
|
||
[...this.querySelectorAll('lit-select-option')].forEach(a => a.removeAttribute('selected'))
|
||
this.blur();//失去焦点，隐藏选择栏目列表
|
||
this.inputElement.value = e.detail.text;
|
||
}
|
||
//设置当前option为选择状态
|
||
if (a.hasAttribute('selected')) {
|
||
a.removeAttribute('selected')
|
||
} else {
|
||
a.setAttribute('selected', '')
|
||
}
|
||
//设置input的值为当前选择的文本
|
||
this.dispatchEvent(new CustomEvent('change', { detail: e.detail }));//向外层派发change事件，返回当前选中项
|
||
})
|
||
})
|
||
}
|
||
|
||
//js调用清理选项
|
||
clear() {
|
||
this.inputElement.value = '';
|
||
this.inputElement.placeholder = this.defaultPlaceholder;
|
||
}
|
||
|
||
//重置为默认值
|
||
reset() {
|
||
this.querySelectorAll('lit-select-option').forEach(a => {
|
||
//如果节点的值为 当前控件的默认值 defalut-value则 显示该值对应的option文本
|
||
[...this.querySelectorAll('lit-select-option')].forEach(a => a.removeAttribute('selected'))
|
||
if (a.getAttribute('value') === this.defaultValue) {
|
||
this.inputElement.value = a.textContent;
|
||
a.setAttribute('selected', '');
|
||
}
|
||
})
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (name === 'value' && this.inputElement) {
|
||
if (newValue) {
|
||
[...this.querySelectorAll('lit-select-option')].forEach(a => {
|
||
if (a.getAttribute('value') === newValue) {
|
||
a.setAttribute('selected', '');
|
||
this.inputElement.value = a.textContent;
|
||
} else {
|
||
a.removeAttribute('selected')
|
||
}
|
||
})
|
||
} else {
|
||
this.clear();
|
||
}
|
||
}
|
||
}
|
||
|
||
set dataSource(value) {
|
||
value.forEach(a => {
|
||
let option = document.createElement('lit-select-option');
|
||
option.setAttribute('value', a.key);
|
||
option.textContent = a.val;
|
||
this.append(option)
|
||
})
|
||
this.initOptions();
|
||
}
|
||
|
||
}
|
||
if (!customElements.get('lit-select')) {
|
||
customElements.define('lit-select', LitSelect);
|
||
}
|
||
|
||
class LitSelectGroup extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return ['label']
|
||
}
|
||
|
||
get label() {
|
||
return this.getAttribute('label') || '';
|
||
}
|
||
|
||
set label(value) {
|
||
this.setAttribute('label', value);
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
display: flex;
|
||
flex-direction: column;
|
||
/*padding-left: 10px;*/
|
||
}
|
||
.lab{
|
||
padding: 8px 10px 8px 10px;
|
||
font-size: .5rem;
|
||
color: #8c8c8c;
|
||
}
|
||
::slotted(lit-select-option){
|
||
padding-left: 20px;
|
||
}
|
||
</style>
|
||
<div class="lab">${this.label}</div>
|
||
<slot></slot>
|
||
`
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
|
||
}
|
||
}
|
||
if (!customElements.get('lit-select-group')) {
|
||
customElements.define('lit-select-group', LitSelectGroup);
|
||
}
|
||
|
||
class LitSelectOption extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return ['selected', 'disabled', 'check']
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
display: flex;
|
||
padding: 8px 10px;
|
||
transition: all .3s;
|
||
color: #333;
|
||
tab-index: -1;
|
||
overflow: scroll;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
:host(:not([disabled])[selected]){
|
||
background-color: #e9f7fe;
|
||
font-weight: bold;
|
||
}
|
||
:host(:not([disabled]):not([selected]):hover){
|
||
background-color: #f5f5f5;
|
||
}
|
||
:host([disabled]){
|
||
cursor: not-allowed;
|
||
color: #bfbfbf;
|
||
}
|
||
:host([selected][check]) .check{
|
||
display: flex;
|
||
}
|
||
:host(:not([selected])) .check{
|
||
display: none;
|
||
}
|
||
:host(:not([check])) .check{
|
||
display: none;
|
||
}
|
||
</style>
|
||
<slot></slot>
|
||
<lit-icon class="check" name="check"></lit-icon>
|
||
`
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
if (!this.hasAttribute('disabled')) {
|
||
this.onclick = ev => {
|
||
this.dispatchEvent(new CustomEvent('onSelected', {
|
||
detail: {
|
||
selected: true,
|
||
value: this.getAttribute('value'),
|
||
text: this.textContent
|
||
}
|
||
}))
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
|
||
}
|
||
}
|
||
if (!customElements.get('lit-select-option')) {
|
||
customElements.define('lit-select-option', LitSelectOption);
|
||
}
|
||
|
||
class LitTable extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return ['scroll-y', 'selectable', 'defaultOrderColumn']
|
||
}
|
||
|
||
get selectable() {
|
||
return this.hasAttribute('selectable');
|
||
}
|
||
|
||
set selectable(value) {
|
||
if (value) {
|
||
this.setAttribute('selectable', '');
|
||
} else {
|
||
this.removeAttribute('selectable');
|
||
}
|
||
}
|
||
|
||
get scrollY() {
|
||
return this.getAttribute('scroll-y') || 'auto';
|
||
}
|
||
|
||
set scrollY(value) {
|
||
this.setAttribute('scroll-y', value);
|
||
}
|
||
|
||
get dataSource() {
|
||
return this.ds || [];
|
||
}
|
||
|
||
set dataSource(value) {
|
||
this.ds = value;
|
||
if (this.hasAttribute('tree')) {
|
||
this.renderTreeTable();
|
||
} else {
|
||
this.renderTable();
|
||
}
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
display: grid;
|
||
grid-template-columns: repeat(1,1fr);
|
||
overflow: auto;
|
||
/*width: 500px;*/
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.tr{
|
||
display: grid;
|
||
transition: all .3s;
|
||
}
|
||
.tr:nth-of-type(even){
|
||
background-color: #fcfcfc;
|
||
}
|
||
/*.tr:not(:last-of-type):not(:first-of-type){*/
|
||
/* border-top: 1px solid #f0f0f0;*/
|
||
/*}*/
|
||
/*.tr:last-of-type{*/
|
||
/* border-top: 1px solid #f0f0f0;*/
|
||
/* border-bottom: 1px solid #f0f0f0;*/
|
||
/*}*/
|
||
.tr{
|
||
background-color: #fff;
|
||
}
|
||
.tr:hover{
|
||
background-color: #f3f3f3; /*antd #fafafa 42b983*/
|
||
}
|
||
.td{
|
||
background-color: inherit;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: auto;
|
||
/*overflow: auto;*/
|
||
border-left: 1px solid #f0f0f0;
|
||
}
|
||
.td-order{
|
||
/*background: green;*/
|
||
}
|
||
.td-order:before{
|
||
|
||
}
|
||
.td:last-of-type{
|
||
border-right: 1px solid #f0f0f0;
|
||
}
|
||
.table{
|
||
color: #262626;
|
||
}
|
||
:host(:not([noheader])) .thead{
|
||
display: grid;
|
||
position: sticky;
|
||
top: 0;
|
||
font-weight: bold;
|
||
font-size: .9rem;
|
||
color: #fff;
|
||
/*width: 100%;*/
|
||
background-color: #42b983;
|
||
z-index: 1;
|
||
}
|
||
/*配置有 noheader 表示不限时表头，tbody上添加 border-top*/
|
||
:host([noheader]) .thead{
|
||
display: none;
|
||
position: sticky;
|
||
top: 0;
|
||
font-weight: bold;
|
||
font-size: .9rem;
|
||
color: #fff;
|
||
/*width: 100%;*/
|
||
background-color: #42b983;
|
||
z-index: 1;
|
||
}
|
||
:host([noheader]) .tbody{
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.tbody{
|
||
width: 100%;
|
||
height: ${this.scrollY};
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
row-gap: 1px;
|
||
column-gap: 1px;
|
||
background-color: #f0f0f0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
/*overflow: auto;*/
|
||
${this.scrollY === 'auto' ? '' : 'overflow-y: auto'};
|
||
}
|
||
.th{
|
||
display: grid;
|
||
background-color: #42b983;
|
||
/*position: sticky;*/
|
||
/*top: 0;*/
|
||
}
|
||
|
||
.tree-icon{
|
||
font-size: 1.2rem;
|
||
width: 20px;
|
||
height: 20px;
|
||
padding-right: 5px;
|
||
padding-left: 5px;
|
||
cursor: pointer;
|
||
}
|
||
.tree-icon:hover{
|
||
color: #42b983;
|
||
}
|
||
.row-checkbox,row-checkbox-all{
|
||
|
||
}
|
||
|
||
.up-svg{
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 8px;
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
.down-svg{
|
||
position: absolute;
|
||
right: 5px;
|
||
bottom: 8px;
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
</style>
|
||
|
||
<slot id="slot" style="display: none"></slot>
|
||
<div class="table">
|
||
<div class="thead"></div>
|
||
<div class="tbody"></div>
|
||
</div>
|
||
`
|
||
|
||
}
|
||
|
||
/*根据column[]嵌套结构得到 grid css布局描述*/
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
this.st = this.shadowRoot.querySelector('#slot');
|
||
this.tableElement = this.shadowRoot.querySelector('.table');
|
||
this.theadElement = this.shadowRoot.querySelector('.thead');
|
||
this.tbodyElement = this.shadowRoot.querySelector('.tbody');
|
||
this.tableColumns = this.querySelectorAll('lit-table-column');
|
||
this.colCount = this.tableColumns.length;
|
||
this.st.addEventListener('slotchange', (event) => {
|
||
this.theadElement.innerHTML = '';
|
||
setTimeout(() => {
|
||
this.columns = this.st.assignedElements();
|
||
|
||
let rowElement = document.createElement('div');
|
||
rowElement.classList.add('th');
|
||
if (this.selectable) {
|
||
let box = document.createElement('div');
|
||
box.style.display = 'flex';
|
||
box.style.justifyContent = 'center';
|
||
box.style.alignItems = 'center';
|
||
box.style.gridArea = "_checkbox_";
|
||
box.classList.add('td');
|
||
box.style.backgroundColor = "#ffffff66";
|
||
let checkbox = document.createElement('lit-checkbox');
|
||
checkbox.classList.add('row-checkbox-all');
|
||
// checkbox.style.boxShadow = '0 0 1px #fff';
|
||
// console.log(checkbox.shadowRoot.querySelector('input'));
|
||
checkbox.onchange = e => {
|
||
this.shadowRoot.querySelectorAll('.row-checkbox').forEach(a => a.checked = e.detail.checked);
|
||
if (e.detail.checked) {
|
||
this.shadowRoot.querySelectorAll('.tr').forEach(a => a.setAttribute('checked', ''));
|
||
} else {
|
||
this.shadowRoot.querySelectorAll('.tr').forEach(a => a.removeAttribute('checked'));
|
||
}
|
||
}
|
||
|
||
box.appendChild(checkbox);
|
||
rowElement.appendChild(box);
|
||
}
|
||
|
||
// let getGridDesc = (columns)=>{
|
||
// columns.forEach(a=>{
|
||
// // console.log(a);
|
||
// if(a.tagName==='LIT-TABLE-GROUP'){
|
||
// let children = [...a.querySelectorAll('lit-table-column')];
|
||
// // console.log(children);
|
||
// getGridDesc(children)
|
||
// }else{
|
||
// // console.log([...a.querySelectorAll('lit-table-column')]);
|
||
// }
|
||
// })
|
||
// }
|
||
// getGridDesc(this.columns);
|
||
let area = [], gridTemplateColumns = [];
|
||
let resolvingArea = (columns, x, y) => {
|
||
columns.forEach((a, i) => {
|
||
// console.log(a.getAttribute('key'),i);
|
||
if (!area[y]) area[y] = []
|
||
let key = a.getAttribute('key') || a.getAttribute('title')
|
||
if (a.tagName === 'LIT-TABLE-GROUP') {
|
||
let len = a.querySelectorAll('lit-table-column').length;
|
||
let children = [...a.children].filter(a => a.tagName !== 'TEMPLATE');
|
||
if (children.length > 0) {
|
||
resolvingArea(children, x, y + 1);
|
||
}
|
||
for (let j = 0; j < len; j++) {
|
||
area[y][x] = { x, y, t: key };
|
||
x++;
|
||
}
|
||
let h = document.createElement('div');
|
||
h.classList.add('td');
|
||
h.style.justifyContent = a.getAttribute('align')
|
||
h.style.borderBottom = '1px solid #f0f0f0'
|
||
h.style.gridArea = key;
|
||
h.innerText = a.title;
|
||
if (a.hasAttribute('fixed')) {
|
||
this.fixed(h, a.getAttribute('fixed'), "#42b983")
|
||
}
|
||
rowElement.append(h);
|
||
} else if (a.tagName === 'LIT-TABLE-COLUMN') {
|
||
area[y][x] = { x, y, t: key };
|
||
x++;
|
||
let h = document.createElement('div');
|
||
h.classList.add('td');
|
||
if (a.hasAttribute('order')) {
|
||
h.sortType = 0;
|
||
h.classList.add('td-order');
|
||
h.style.position = "relative"
|
||
let NS = "http://www.w3.org/2000/svg";
|
||
let upSvg = document.createElementNS(NS, "svg");
|
||
let upPath = document.createElementNS(NS, "path");
|
||
upSvg.setAttribute('fill', '#efefef');
|
||
upSvg.setAttribute('viewBox', '0 0 1024 1024');
|
||
upSvg.setAttribute('stroke', '#000000');
|
||
upSvg.classList.add('up-svg');
|
||
// upPath.setAttribute("d", "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z");
|
||
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");
|
||
// upPath.setAttribute("fill", "#ffffff");
|
||
// upPath.setAttribute("stroke-width", "2px");
|
||
// upPath.setAttribute("stroke", "rgba(207, 219, 230, 1)");
|
||
// upPath.setAttribute("marker-end", "url(#markerArrow)");
|
||
upSvg.appendChild(upPath);
|
||
let downSvg = document.createElementNS(NS, "svg");
|
||
let downPath = document.createElementNS(NS, "path");
|
||
downSvg.setAttribute('fill', '#efefef');
|
||
downSvg.setAttribute('viewBox', '0 0 1024 1024');
|
||
downSvg.setAttribute('stroke', '#efefef');
|
||
downSvg.classList.add('down-svg');
|
||
// downPath.setAttribute("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");
|
||
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");
|
||
// downPath.setAttribute("fill", "#ffffff");
|
||
// downPath.setAttribute("stroke-width", "2px");
|
||
// downPath.setAttribute("stroke", "rgba(207, 219, 230, 1)");
|
||
// downPath.setAttribute("marker-end", "url(#markerArrow)");
|
||
downSvg.appendChild(downPath)
|
||
if (i == 0) {
|
||
h.sortType = 2; // 默认以第一列 降序排序 作为默认排序
|
||
upSvg.setAttribute('fill', '#efefef');
|
||
downSvg.setAttribute('fill', '#333');
|
||
}
|
||
h.appendChild(upSvg);
|
||
h.appendChild(downSvg);
|
||
h.onclick = ev => {
|
||
this.shadowRoot.querySelectorAll('.td-order svg').forEach(it => {
|
||
it.setAttribute('fill', '#efefef');
|
||
it.setAttribute('fill', '#efefef');
|
||
it.sortType = 0;
|
||
})
|
||
if (h.sortType == undefined || h.sortType == null) {
|
||
h.sortType = 0;
|
||
} else if (h.sortType === 2) {
|
||
h.sortType = 0;
|
||
} else {
|
||
h.sortType += 1;
|
||
}
|
||
// if(h.sortType == 2){
|
||
// h.sortType = 1
|
||
// }else{
|
||
// h.sortType = 2
|
||
// }
|
||
switch (h.sortType) {
|
||
case 1:
|
||
upSvg.setAttribute('fill', '#333');
|
||
downSvg.setAttribute('fill', '#efefef');
|
||
break;
|
||
case 2:
|
||
upSvg.setAttribute('fill', '#efefef');
|
||
downSvg.setAttribute('fill', '#333');
|
||
break;
|
||
default:
|
||
upSvg.setAttribute('fill', "#efefef");
|
||
downSvg.setAttribute('fill', "#efefef");
|
||
break;
|
||
}
|
||
this.dispatchEvent(new CustomEvent("ColumnClick", {
|
||
detail: {
|
||
sort: h.sortType, key: key
|
||
}, composed: true
|
||
}))
|
||
}
|
||
}
|
||
h.style.justifyContent = a.getAttribute('align')
|
||
gridTemplateColumns.push(a.getAttribute('width') || '1fr');
|
||
h.style.gridArea = key;
|
||
let titleLabel = document.createElement("label");
|
||
titleLabel.textContent = a.title;
|
||
// h.innerText = a.title;
|
||
h.appendChild(titleLabel);
|
||
if (a.hasAttribute('fixed')) {
|
||
this.fixed(h, a.getAttribute('fixed'), "#42b983")
|
||
}
|
||
rowElement.append(h);
|
||
}
|
||
|
||
// console.log(str)
|
||
// console.log(a.title,i,a.querySelectorAll('lit-table-column').length);
|
||
})
|
||
}
|
||
resolvingArea(this.columns, 0, 0);
|
||
area.forEach((rows, j, array) => {
|
||
for (let i = 0; i < this.colCount; i++) {
|
||
if (!rows[i]) rows[i] = array[j - 1][i];
|
||
}
|
||
})
|
||
|
||
// console.log(a.map(aa=>aa.t).join(' '));
|
||
// console.log(gridTemplateColumns.join(' '));
|
||
this.gridTemplateColumns = gridTemplateColumns.join(' ');
|
||
if (this.selectable) {
|
||
let s = area.map(a => '"_checkbox_ ' + (a.map(aa => aa.t).join(' ')) + '"').join(' ');
|
||
rowElement.style.gridTemplateColumns = "60px " + gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
|
||
rowElement.style.gridTemplateRows = `repeat(${area.length},1fr)`
|
||
rowElement.style.gridTemplateAreas = s
|
||
} else {
|
||
let s = area.map(a => '"' + (a.map(aa => aa.t).join(' ')) + '"').join(' ');
|
||
rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
|
||
rowElement.style.gridTemplateRows = `repeat(${area.length},1fr)`
|
||
rowElement.style.gridTemplateAreas = s
|
||
}
|
||
this.theadElement.append(rowElement);
|
||
if (this.hasAttribute('tree')) {
|
||
this.renderTreeTable();
|
||
} else {
|
||
this.renderTable();
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
// this.shadowRoot.addEventListener("load", function (event) {
|
||
// console.log("DOM fully loaded and parsed");
|
||
// });
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
|
||
}
|
||
|
||
fixed(td, placement, bgColor, zIndex) {
|
||
td.style.position = 'sticky';
|
||
if (placement === "left") {
|
||
td.style.left = '0px';
|
||
// td.style.borderRight = '1px solid #f0f0f0';
|
||
td.style.boxShadow = '3px 0px 5px #33333333'
|
||
// td.style.backgroundColor=bgColor
|
||
} else if (placement === "right") {
|
||
td.style.right = '0px';
|
||
td.style.boxShadow = '-3px 0px 5px #33333333'
|
||
// td.style.borderLeft = '1px solid #f0f0f0';
|
||
// td.style.backgroundColor=bgColor
|
||
}
|
||
}
|
||
|
||
/*渲染成表格*/
|
||
renderTable() {
|
||
let that = this;
|
||
if (!this.columns) return;
|
||
if (!this.ds) return; // 如果没有设置数据源，直接返回
|
||
this.tbodyElement.innerHTML = '';//清空表格内容
|
||
// this.style.gridTemplateRows = `repeat(${this.ds.length}*2 ,1fr)`;
|
||
this.ds.forEach(rowData => {
|
||
let rowElement = document.createElement('div');
|
||
rowElement.classList.add('tr');
|
||
rowElement.data = rowData;
|
||
let gridTemplateColumns = []
|
||
//如果table配置了selectable（选择行模式） 单独在行头部添加一个 checkbox
|
||
if (this.selectable) {
|
||
let box = document.createElement('div');
|
||
box.style.display = 'flex';
|
||
box.style.justifyContent = 'center';
|
||
box.style.alignItems = 'center';
|
||
box.classList.add('td');
|
||
let checkbox = document.createElement('lit-checkbox');
|
||
checkbox.classList.add('row-checkbox');
|
||
checkbox.onchange = (e) => {//checkbox 的是否选中 会影响 行对应的 div上是否有 checked属性，用于标记
|
||
if (e.detail.checked) {
|
||
rowElement.setAttribute('checked', "");
|
||
} else {
|
||
rowElement.removeAttribute('checked');
|
||
}
|
||
}
|
||
box.appendChild(checkbox);
|
||
rowElement.appendChild(box);
|
||
}
|
||
this.tableColumns.forEach(cl => {
|
||
let dataIndex = cl.getAttribute('data-index');
|
||
gridTemplateColumns.push(cl.getAttribute('width') || '1fr')
|
||
if (cl.template) {//如果自定义渲染,从模版中渲染得到节点
|
||
let cloneNode = cl.template.render(rowData).content.cloneNode(true);
|
||
// cloneNode.classList.add('td');
|
||
let d = document.createElement('div');
|
||
d.classList.add('td');
|
||
d.style.justifyContent = cl.getAttribute('align')
|
||
if (cl.hasAttribute('fixed')) {
|
||
this.fixed(d, cl.getAttribute('fixed'), "#ffffff")
|
||
}
|
||
d.append(cloneNode);
|
||
rowElement.append(d);
|
||
} else {
|
||
let td = document.createElement('div');
|
||
td.classList.add('td');
|
||
td.style.justifyContent = cl.getAttribute('align')
|
||
if (cl.hasAttribute('fixed')) {
|
||
this.fixed(td, cl.getAttribute('fixed'), "#ffffff")
|
||
}
|
||
// td.style.position='sticky';
|
||
// td.innerHTML = rowData[dataIndex];
|
||
td.innerHTML = `<code style="padding:0;margin:0">${rowData[dataIndex].toString().replace('\n', "")}</code>`;
|
||
// console.log(cl,cl.template);
|
||
rowElement.append(td);
|
||
}
|
||
|
||
})
|
||
if (this.selectable) { //如果 带选择的table 前面添加一个 60px的列
|
||
rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
|
||
} else {
|
||
rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
|
||
}
|
||
rowElement.onclick = e => {
|
||
this.dispatchEvent(new CustomEvent('onRowClick', { detail: rowData, composed: true }));
|
||
}
|
||
this.tbodyElement.append(rowElement);
|
||
})
|
||
}
|
||
|
||
/*渲染树表结构*/
|
||
renderTreeTable() {
|
||
if (!this.columns) return;
|
||
if (!this.ds) return;
|
||
this.tbodyElement.innerHTML = '';
|
||
/*通过list 构建 tree 结构*/
|
||
let ids = JSON.parse(this.getAttribute('tree') || `["id","pid"]`);
|
||
let toTreeData = (data, id, pid) => {
|
||
let cloneData = JSON.parse(JSON.stringify(data));
|
||
return cloneData.filter(father => {
|
||
let branchArr = cloneData.filter(child => father[id] == child[pid]);
|
||
branchArr.length > 0 ? father['children'] = branchArr : '';
|
||
return !father[pid];
|
||
});
|
||
}
|
||
let treeData = toTreeData(this.ds, ids[0], ids[1]);//
|
||
// console.log(treeData);
|
||
let offset = 30;
|
||
let offsetVal = offset;
|
||
const drawRow = (arr, parentNode) => {
|
||
arr.forEach(rowData => {
|
||
let rowElement = document.createElement('div');
|
||
rowElement.classList.add('tr');
|
||
rowElement.data = rowData;
|
||
let gridTemplateColumns = [];
|
||
if (this.selectable) {
|
||
let box = document.createElement('div');
|
||
box.style.display = 'flex';
|
||
box.style.justifyContent = 'center';
|
||
box.style.alignItems = 'center';
|
||
box.classList.add('td');
|
||
let checkbox = document.createElement('lit-checkbox');
|
||
checkbox.classList.add('row-checkbox');
|
||
checkbox.onchange = (e) => {
|
||
if (e.detail.checked) {
|
||
rowElement.setAttribute('checked', "");
|
||
} else {
|
||
rowElement.removeAttribute('checked');
|
||
}
|
||
const changeChildNode = (rowElement, checked) => {
|
||
let id = rowElement.getAttribute('id');
|
||
let pid = rowElement.getAttribute('pid');
|
||
this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => {
|
||
a.querySelector('.row-checkbox').checked = checked;
|
||
if (checked) {
|
||
a.setAttribute('checked', '');
|
||
} else {
|
||
a.removeAttribute('checked');
|
||
}
|
||
changeChildNode(a, checked);
|
||
});
|
||
};
|
||
changeChildNode(rowElement, e.detail.checked);
|
||
}
|
||
box.appendChild(checkbox);
|
||
rowElement.appendChild(box);
|
||
}
|
||
this.tableColumns.forEach((cl, index) => {
|
||
let dataIndex = cl.getAttribute('data-index');
|
||
gridTemplateColumns.push(cl.getAttribute('width') || '1fr')
|
||
let td;
|
||
if (cl.template) {
|
||
let cloneNode = cl.template.render(rowData).content.cloneNode(true);
|
||
// cloneNode.classList.add('td');
|
||
td = document.createElement('div');
|
||
td.classList.add('td');
|
||
td.style.justifyContent = cl.getAttribute('align')
|
||
if (cl.hasAttribute('fixed')) {
|
||
this.fixed(td, cl.getAttribute('fixed'), "#ffffff")
|
||
}
|
||
td.append(cloneNode);
|
||
} else {
|
||
td = document.createElement('div');
|
||
td.classList.add('td');
|
||
td.style.justifyContent = cl.getAttribute('align')
|
||
if (cl.hasAttribute('fixed')) {
|
||
this.fixed(td, cl.getAttribute('fixed'), "#ffffff")
|
||
}
|
||
// td.style.position='sticky';
|
||
td.innerHTML = rowData[dataIndex];
|
||
// console.log(cl,cl.template);
|
||
}
|
||
if (index === 0) {
|
||
if (rowData.children && rowData.children.length > 0) {
|
||
let btn = document.createElement('lit-icon');
|
||
btn.classList.add('tree-icon');
|
||
btn.name = 'minus-square';
|
||
td.insertBefore(btn, td.firstChild);
|
||
td.style.paddingLeft = (offsetVal - 30) + 'px';
|
||
btn.onclick = (e) => {
|
||
const foldNode = (rowElement) => {
|
||
let id = rowElement.getAttribute('id');
|
||
let pid = rowElement.getAttribute('pid');
|
||
this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => {
|
||
let id = a.getAttribute('id');
|
||
let pid = a.getAttribute('pid');
|
||
a.style.display = 'none';
|
||
foldNode(a);
|
||
});
|
||
if (rowElement.querySelector('.tree-icon')) {
|
||
rowElement.querySelector('.tree-icon').name = 'plus-square';
|
||
}
|
||
rowElement.removeAttribute('expand');
|
||
};
|
||
const expendNode = (rowElement) => {
|
||
let id = rowElement.getAttribute('id');
|
||
let pid = rowElement.getAttribute('pid');
|
||
this.shadowRoot.querySelectorAll(`div[pid=${id}]`).forEach(a => {
|
||
let id = a.getAttribute('id');
|
||
let pid = a.getAttribute('pid');
|
||
a.style.display = '';
|
||
// expendNode(a);
|
||
});
|
||
if (rowElement.querySelector('.tree-icon')) {
|
||
rowElement.querySelector('.tree-icon').name = 'minus-square';
|
||
}
|
||
rowElement.setAttribute('expand', '');
|
||
}
|
||
if (rowElement.hasAttribute('expand')) {
|
||
foldNode(rowElement);
|
||
} else {
|
||
expendNode(rowElement);
|
||
}
|
||
};
|
||
} else {
|
||
td.style.paddingLeft = offsetVal + 'px';
|
||
}
|
||
}
|
||
rowElement.append(td);
|
||
|
||
})
|
||
if (this.selectable) {
|
||
rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
|
||
} else {
|
||
rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');//`repeat(${this.colCount},1fr)`
|
||
}
|
||
rowElement.onclick = e => {
|
||
// console.log(rowElement.style.gridTemplateColumns);
|
||
// LitMessage.info(JSON.stringify(rowData));
|
||
}
|
||
parentNode.append(rowElement);
|
||
rowElement.setAttribute('id', rowData[ids[0]]);
|
||
rowElement.setAttribute('pid', rowData[ids[1]]);
|
||
rowElement.setAttribute('expand', '');
|
||
if (rowData.children && rowData.children.length > 0) {
|
||
//有子节点的 前面加上 + 图标 表示可以展开节点
|
||
|
||
offsetVal = offsetVal + offset;
|
||
drawRow(rowData.children, parentNode);
|
||
offsetVal = offsetVal - offset;
|
||
}
|
||
});
|
||
};
|
||
drawRow(treeData, this.tbodyElement);
|
||
}
|
||
|
||
//获取选中的行数据
|
||
getCheckRows() {
|
||
return [...this.shadowRoot.querySelectorAll('div[class=tr][checked]')].map(a => a.data).map(a => {
|
||
delete a['children'];
|
||
return a;
|
||
});
|
||
}
|
||
|
||
deleteRowsCondition(fn) {
|
||
this.shadowRoot.querySelectorAll("div[class=tr]").forEach(tr => {
|
||
if (fn(tr.data)) {
|
||
tr.remove();
|
||
}
|
||
})
|
||
}
|
||
}
|
||
if (!customElements.get('lit-table')) {
|
||
customElements.define('lit-table', LitTable);
|
||
}
|
||
|
||
class LitTableColumn extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return ['name', 'order']
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{ }
|
||
</style>
|
||
<slot id="slot"></slot>
|
||
`
|
||
}
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
this.template = null;
|
||
this.st = this.shadowRoot.querySelector('#slot')
|
||
this.st.addEventListener('slotchange', () => {
|
||
const elements = this.st.assignedElements({ flatten: false });
|
||
if (elements.length > 0) {
|
||
this.template = elements[0];
|
||
}
|
||
})
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
|
||
}
|
||
}
|
||
if (!customElements.get('lit-table-column')) {
|
||
customElements.define('lit-table-column', LitTableColumn);
|
||
}
|
||
|
||
class LitTableGroup extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return ['title']
|
||
}
|
||
|
||
get title() {
|
||
return this.getAttribute('title');
|
||
}
|
||
|
||
set title(value) {
|
||
this.setAttribute('title', value);
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{ }
|
||
</style>
|
||
<slot id="sl"></slot>
|
||
`
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
|
||
}
|
||
}
|
||
if (!customElements.get('lit-table-group')) {
|
||
customElements.define('lit-table-group', LitTableGroup);
|
||
}
|
||
|
||
class LitTabpane extends HTMLElement {
|
||
static get observedAttributes() { return ['tab', 'key', 'disabled', 'icon', 'closeable', 'hide']; }
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host(){
|
||
scroll-behavior: smooth;
|
||
-webkit-overflow-scrolling: touch;
|
||
overflow: auto;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<slot></slot>
|
||
`
|
||
}
|
||
|
||
get tab() {
|
||
return this.getAttribute('tab');
|
||
}
|
||
|
||
set tab(value) {
|
||
this.setAttribute("tab", value);
|
||
}
|
||
|
||
get icon() {
|
||
return this.getAttribute("icon");
|
||
}
|
||
|
||
get disabled() {
|
||
return this.getAttribute('disabled') !== null;
|
||
}
|
||
|
||
set disabled(value) {
|
||
if (value === null || !value) {
|
||
this.removeAttribute("disabled");
|
||
} else {
|
||
this.setAttribute("disabled", value);
|
||
}
|
||
}
|
||
get closeable() {
|
||
return this.getAttribute('closeable') !== null;
|
||
}
|
||
set closeable(value) {
|
||
if (value === null || !value) {
|
||
this.removeAttribute("closeable");
|
||
} else {
|
||
this.setAttribute("closeable", value);
|
||
}
|
||
}
|
||
|
||
get key() {
|
||
return this.getAttribute("key");
|
||
}
|
||
set key(value) {
|
||
this.setAttribute("key", value);
|
||
}
|
||
|
||
get hide() {
|
||
return this.getAttribute('hide') !== null;
|
||
}
|
||
set hide(value) {
|
||
if (value === null || !value) {
|
||
this.removeAttribute("hide");
|
||
} else {
|
||
this.setAttribute("hide", value);
|
||
}
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() { }
|
||
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() { }
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() { }
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (oldValue !== newValue && newValue !== undefined) {
|
||
if (name === 'tab' && this.parentNode) {
|
||
this.parentNode.updateLabel && this.parentNode.updateLabel(this.key, newValue);
|
||
}
|
||
if (name === 'disabled' && this.parentNode) {
|
||
this.parentNode.updateDisabled && this.parentNode.updateDisabled(this.key, newValue);
|
||
}
|
||
if (name === 'closeable' && this.parentNode) {
|
||
this.parentNode.updateCloseable && this.parentNode.updateCloseable(this.key, newValue);
|
||
}
|
||
if (name === 'hide' && this.parentNode) {
|
||
this.parentNode.updateCloseable && this.parentNode.updateHide(this.key, newValue);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (!customElements.get('lit-tabpane')) {
|
||
customElements.define('lit-tabpane', LitTabpane);
|
||
}
|
||
|
||
class LitTabs extends HTMLElement {
|
||
static get observedAttributes() {
|
||
//mode = flat(default) | card
|
||
//position = top | top-left | top-center | top-right | left | left-top | left-center | left-bottom | right | bottom
|
||
return ['activekey', 'mode', 'position']
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
display: block;
|
||
text-align: unset;
|
||
color: #252525;
|
||
background-color: #fff;
|
||
box-shadow: #00000033 0 0 10px ;
|
||
/*padding: 10px;*/
|
||
/*margin-right: 10px;*/
|
||
}
|
||
::slotted(lit-tabpane){
|
||
box-sizing:border-box;
|
||
width:100%;
|
||
height:100%;
|
||
/*padding:10px;*/
|
||
flex-shrink:0;
|
||
overflow:auto;
|
||
}
|
||
.nav-item{
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 6px 0px 6px 12px;
|
||
font-size: .9rem;
|
||
font-weight: normal;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
flex-shrink: 0;
|
||
}
|
||
.nav-item lit-icon{
|
||
margin-right: 2px;
|
||
font-size: inherit;
|
||
}
|
||
.nav-item:hover{
|
||
color: #42b983;
|
||
}
|
||
.nav-item[data-disabled]{
|
||
pointer-events: all;
|
||
cursor: not-allowed;
|
||
color: #bfbfbf;
|
||
}
|
||
.nav-item[data-selected]{
|
||
color: #42b983;;
|
||
}
|
||
.tab-content{
|
||
display: block;
|
||
background-color: #fff;
|
||
flex:1;
|
||
}
|
||
|
||
/*
|
||
* top top-left top-center top-right
|
||
*/
|
||
:host(:not([position])) .nav-root,
|
||
:host([position^='top']) .nav-root{
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
:host(:not([mode]):not([position])) .tab-line,/*移动的线条*/
|
||
:host([mode='flat'][position^='top']) .tab-line{
|
||
position:absolute;
|
||
bottom: 2px;
|
||
background-color: #42b983;
|
||
height: 2px;
|
||
transform: translateY(100%);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
:host(:not([position])) .tab-nav-container,
|
||
:host([position^='top']) .tab-nav-container{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
overflow-y: hidden;
|
||
overflow-x: auto;
|
||
overflow: -moz-scrollbars-none;
|
||
-ms-overflow-style: none;
|
||
transition: all 0.3s;
|
||
flex: 1;
|
||
/*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
|
||
/*background-repeat: no-repeat;*/
|
||
/*background-size: 50px 100%, 15px 100%;*/
|
||
/*background-attachment: local,scroll,local,scroll;*/
|
||
/*border-bottom: #f0f0f0 1px solid;*/
|
||
}
|
||
:host([position='top']) .tab-nav,
|
||
:host([position='top-left']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: flex-start;
|
||
}
|
||
:host([position='top-center']) .tab-nav{
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
:host([position='top-right']) .tab-nav{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
:host([position^='top'][mode='card']) .nav-item{
|
||
border-top: 1px solid #f0f0f0;
|
||
border-left: 1px solid #f0f0f0;
|
||
border-right: 1px solid #f0f0f0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
bottom: 0px;
|
||
margin-right: 2px;
|
||
position: relative;
|
||
}
|
||
:host([position^='top']) .tab-nav-bg-line{
|
||
position: absolute;bottom: 0;height: 1px;background-color: #f0f0f0;width: 100%
|
||
}
|
||
:host([position^='top'][mode='card']) .nav-item:not([data-selected]){
|
||
background-color: #f6f6f6;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
:host([position^='top'][mode='card']) .nav-item[data-selected]{
|
||
background-color: #ffffff;
|
||
border-bottom: 1px solid #fff;
|
||
bottom: 0px;
|
||
}
|
||
/*
|
||
bottom bottom-left bottom-center bottom-right
|
||
*/
|
||
:host([position^='bottom']) .tab{
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
}
|
||
:host([mode='flat'][position^='bottom']) .tab-line{
|
||
position:absolute;
|
||
top: -3px;
|
||
background-color: #42b983;
|
||
height: 2px;
|
||
transform: translateY(-100%);
|
||
transition: all 0.3s;
|
||
}
|
||
:host([position^='bottom']) .tab-nav-container{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
overflow-x: auto;
|
||
overflow-y: visible;
|
||
overflow: -moz-scrollbars-none;
|
||
-ms-overflow-style: none;
|
||
transition: all 0.3s;
|
||
flex: 1;
|
||
/*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
|
||
/*background-repeat: no-repeat;*/
|
||
/*background-size: 50px 100%, 15px 100%;*/
|
||
/*background-attachment: local,scroll,local,scroll;*/
|
||
border-top: #f0f0f0 1px solid;
|
||
}
|
||
:host([position^='bottom']) .nav-root{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
:host([position='bottom']) .tab-nav,
|
||
:host([position='bottom-left']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: flex-start;
|
||
}
|
||
:host([position='bottom-center']) .tab-nav{
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
:host([position='bottom-right']) .tab-nav{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
:host([position^='bottom'][mode='card']) .nav-item{
|
||
border-top: 1px solid #ffffff;
|
||
border-left: 1px solid #f0f0f0;
|
||
border-right: 1px solid #f0f0f0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
top: -1px;
|
||
margin-right: 2px;
|
||
position: relative;
|
||
}
|
||
:host([position^='bottom']) .tab-nav-bg-line{
|
||
position: absolute;top: 0;height: 1px;background-color: #f0f0f0;width: 100%
|
||
}
|
||
:host([position^='bottom'][mode='card']) .nav-item:not([data-selected]){
|
||
background-color: #f5f5f5;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
:host([position^='bottom'][mode='card']) .nav-item[data-selected]{
|
||
background-color: #ffffff;
|
||
border-top: 1px solid #fff;
|
||
top: -1px;
|
||
}
|
||
/*
|
||
left left-top left-center left-bottom
|
||
*/
|
||
:host([position^='left']) .tab{
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
:host([mode='flat'][position^='left']) .tab-line{
|
||
position:absolute;
|
||
right: 1px;
|
||
background-color: #42b983;
|
||
width: 3px;
|
||
transform: translateX(100%);
|
||
transition: all 0.3s;
|
||
}
|
||
:host([position^='left']) .tab-nav-container{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: row;
|
||
overflow-x: auto;
|
||
overflow-y: visible;
|
||
overflow: -moz-scrollbars-none;
|
||
-ms-overflow-style: none;
|
||
transition: all 0.3s;
|
||
flex: 1;
|
||
/*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
|
||
/*background-repeat: no-repeat;*/
|
||
/*background-size: 50px 100%, 15px 100%;*/
|
||
/*background-attachment: local,scroll,local,scroll;*/
|
||
border-right: #f0f0f0 1px solid;
|
||
}
|
||
:host([position^='left']) .nav-root{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
:host([position='left']) .tab-nav,
|
||
:host([position='left-top']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
}
|
||
:host([position='left-center']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
:host([position='left-bottom']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
}
|
||
:host([position^='left'][mode='card']) .nav-item{
|
||
border-top: 1px solid #f0f0f0;
|
||
border-left: 1px solid #f0f0f0;
|
||
border-right: 1px solid #ffffff;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
right: -1px;
|
||
margin-bottom: 2px;
|
||
position: relative;
|
||
}
|
||
:host([position^='left']) .tab-nav-bg-line{
|
||
position: absolute;right: 0;width: 1px;background-color: #f0f0f0;width: 100%
|
||
}
|
||
:host([position^='left'][mode='card']) .nav-item:not([data-selected]){
|
||
background-color: #f5f5f5;
|
||
border-right: 1px solid #f0f0f0;
|
||
}
|
||
:host([position^='left'][mode='card']) .nav-item[data-selected]{
|
||
background-color: #ffffff;
|
||
border-bottom: 1px solid #fff;
|
||
right: -1px;
|
||
}
|
||
/*
|
||
right right-top right-center right-bottom
|
||
*/
|
||
:host([position^='right']) .tab{
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
}
|
||
:host([mode='flat'][position^='right']) .tab-line{
|
||
position:absolute;
|
||
left: 1px;
|
||
background-color: #42b983;
|
||
width: 3px;
|
||
transform: translateX(-100%);
|
||
transition: all 0.3s;
|
||
}
|
||
:host([position^='right']) .tab-nav-container{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: row-reverse;
|
||
overflow-x: auto;
|
||
overflow-y: visible;
|
||
overflow: -moz-scrollbars-none;
|
||
-ms-overflow-style: none;
|
||
transition: all 0.3s;
|
||
flex: 1;
|
||
/*background: linear-gradient(90deg,white 30%, transparent),radial-gradient(at 0 50%, rgba(0,0,0,.2),transparent 70%);*/
|
||
/*background-repeat: no-repeat;*/
|
||
/*background-size: 50px 100%, 15px 100%;*/
|
||
/*background-attachment: local,scroll,local,scroll;*/
|
||
border-left: #f0f0f0 1px solid;
|
||
}
|
||
:host([position^='right']) .nav-root{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
:host([position='right']) .tab-nav,
|
||
:host([position='right-top']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
}
|
||
:host([position='right-center']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
:host([position='right-bottom']) .tab-nav{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
}
|
||
:host([position^='right'][mode='card']) .nav-item{
|
||
border-top: 1px solid #f0f0f0;
|
||
border-left: 1px solid #ffffff;
|
||
border-right: 1px solid #f0f0f0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
left: -1px;
|
||
margin-top: 2px;
|
||
position: relative;
|
||
}
|
||
:host([position^='right']) .tab-nav-bg-line{
|
||
position: absolute;left: 0;width: 1px;background-color: #f0f0f0;width: 100%
|
||
}
|
||
:host([position^='right'][mode='card']) .nav-item:not([data-selected]){
|
||
background-color: #f5f5f5;
|
||
border-left: 1px solid #f0f0f0;
|
||
}
|
||
:host([position^='right'][mode='card']) .nav-item[data-selected]{
|
||
background-color: #ffffff;
|
||
left: -1px;
|
||
}
|
||
|
||
|
||
.tab-nav-container::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
|
||
/*关闭的图标*/
|
||
.close-icon:hover{
|
||
color: #000;
|
||
}
|
||
.nav-item[data-closeable] .close-icon{
|
||
display: block;
|
||
padding: 5px 5px 5px 5px;
|
||
color: #999;
|
||
}
|
||
.nav-item[data-closeable] .no-close-icon{
|
||
display: none;
|
||
}
|
||
.nav-item:not([data-closeable]) .no-close-icon{
|
||
display: block;
|
||
}
|
||
.nav-item:not([data-closeable]) .close-icon{
|
||
display: none;
|
||
}
|
||
.nav-item:not([data-hide]){
|
||
display: block;
|
||
}
|
||
.nav-item[data-hide]{
|
||
display: none;
|
||
}
|
||
|
||
</style>
|
||
<style id="filter"></style>
|
||
<div class="tab">
|
||
<div class="nav-root">
|
||
<slot name="left" style="flex:1"></slot>
|
||
<div class="tab-nav-container" >
|
||
<div class="tab-nav-bg-line"></div>
|
||
<div class="tab-nav" id="nav"></div>
|
||
<div class="tab-line" id="tab-line"></div>
|
||
</div>
|
||
<slot name="right" style="flex:1"></slot>
|
||
</div>
|
||
<div class="tab-content">
|
||
<slot id="slot">NEED CONTENT</slot>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|
||
|
||
get position() {
|
||
return this.getAttribute('position') || 'top';
|
||
}
|
||
|
||
set position(value) {
|
||
this.setAttribute('position', value);
|
||
}
|
||
|
||
get mode() {
|
||
return this.getAttribute('mode') || 'flat';
|
||
}
|
||
|
||
set mode(value) {
|
||
this.setAttribute('mode', value);
|
||
}
|
||
|
||
get activekey() {
|
||
return this.getAttribute("activekey");
|
||
}
|
||
|
||
set activekey(value) {
|
||
this.setAttribute('activekey', value);
|
||
}
|
||
|
||
updateLabel(key, value) {
|
||
// console.log(key, value);
|
||
if (this.nav) {
|
||
let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
|
||
if (item) {
|
||
item.querySelector("span").innerHTML = value;
|
||
this.initTabPos()
|
||
}
|
||
}
|
||
}
|
||
|
||
updateDisabled(key, value) {
|
||
// console.log(key, value);
|
||
if (this.nav) {
|
||
let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
|
||
if (item) {
|
||
if (value) {
|
||
item.setAttribute('data-disabled', '')
|
||
} else {
|
||
item.removeAttribute('data-disabled');
|
||
}
|
||
this.initTabPos()
|
||
}
|
||
}
|
||
}
|
||
updateCloseable(key, value) {
|
||
if (this.nav) {
|
||
let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
|
||
if (item) {
|
||
if (value) {
|
||
item.setAttribute('data-closeable', '')
|
||
} else {
|
||
item.removeAttribute('data-closeable');
|
||
}
|
||
this.initTabPos()
|
||
}
|
||
}
|
||
}
|
||
updateHide(key, value) {
|
||
if (this.nav) {
|
||
let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
|
||
if (item) {
|
||
if (value) {
|
||
item.setAttribute('data-hide', '')
|
||
} else {
|
||
item.removeAttribute('data-hide');
|
||
}
|
||
this.initTabPos()
|
||
}
|
||
}
|
||
}
|
||
|
||
initTabPos() {
|
||
const items = this.nav.querySelectorAll(".nav-item");
|
||
Array.from(items).forEach((a, index) => {
|
||
this.tabPos[a.dataset.key] = {
|
||
index: index,
|
||
width: a.offsetWidth,
|
||
height: a.offsetHeight,
|
||
left: a.offsetLeft,
|
||
top: a.offsetTop,
|
||
label: a.textContent
|
||
}
|
||
})
|
||
if (this.activekey) {
|
||
if (this.position.startsWith('left')) {
|
||
this.line.style = `height:${this.tabPos[this.activekey].height}px;transform:translate(100%,${this.tabPos[this.activekey].top}px)`;
|
||
} else if (this.position.startsWith('top')) {
|
||
if (this.tabPos[this.activekey]) {
|
||
this.line.style = `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`;
|
||
}
|
||
} else if (this.position.startsWith('right')) {
|
||
this.line.style = `height:${this.tabPos[this.activekey].height}px;transform:translate(-100%,${this.tabPos[this.activekey].top}px)`;
|
||
} else if (this.position.startsWith('bottom')) {
|
||
this.line.style = `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`;
|
||
}
|
||
}
|
||
}
|
||
|
||
//当 custom element首次被插入文档DOM时，被调用。
|
||
connectedCallback() {
|
||
let that = this;
|
||
this.tabPos = {}
|
||
this.nav = this.shadowRoot.querySelector('#nav')
|
||
this.line = this.shadowRoot.querySelector('#tab-line')
|
||
this.slots = this.shadowRoot.querySelector('#slot');
|
||
this.slots.addEventListener('slotchange', () => {
|
||
const elements = this.slots.assignedElements();
|
||
let panes = this.querySelectorAll('lit-tabpane');
|
||
if (this.activekey) {
|
||
panes.forEach(a => {
|
||
if (a.key === this.activekey) {
|
||
a.style.display = 'block'
|
||
} else {
|
||
a.style.display = 'none';
|
||
}
|
||
})
|
||
} else {
|
||
panes.forEach((a, index) => {
|
||
if (index === 0) {
|
||
a.style.display = 'block'
|
||
this.activekey = a.key
|
||
} else {
|
||
a.style.display = 'none';
|
||
}
|
||
})
|
||
}
|
||
|
||
let navHtml = "";
|
||
elements.forEach(a => {
|
||
if (a.disabled) {
|
||
navHtml += `<div class="nav-item" data-key="${a.key}" data-disabled ${a.closeable ? 'data-closeable' : ''} ${a.hide ? 'data-hide' : ''}>
|
||
${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
|
||
<span>${a.tab}</span>
|
||
<lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
|
||
</div>`;
|
||
} else {
|
||
if (a.key === this.activekey) {
|
||
navHtml += `<div class="nav-item" data-key="${a.key}" data-selected ${a.closeable ? 'data-closeable' : ''} ${a.hide ? 'data-hide' : ''}>
|
||
${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
|
||
<span>${a.tab}</span>
|
||
<lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
|
||
</div>`;
|
||
} else {
|
||
navHtml += `<div class="nav-item" data-key="${a.key}" ${a.closeable ? 'data-closeable' : ''} ${a.hide ? 'data-hide' : ''}>
|
||
${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
|
||
<span>${a.tab}</span>
|
||
<lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
|
||
</div>`;
|
||
}
|
||
|
||
}
|
||
})
|
||
this.nav.innerHTML = navHtml;
|
||
this.initTabPos()
|
||
this.nav.querySelectorAll('.close-icon').forEach(a => {
|
||
a.onclick = (e) => {
|
||
e.stopPropagation();
|
||
const closeKey = e.target.parentElement.dataset.key;
|
||
console.log(closeKey);
|
||
console.log(e.target.parentElement.parentElement);
|
||
this.nav.removeChild(e.target.parentElement)
|
||
let elements = this.slots.assignedElements();
|
||
let closeElement = elements.filter(a => a.key === closeKey)[0];
|
||
closeElement.parentElement.removeChild(closeElement)
|
||
if (closeElement.style.display !== 'none') {
|
||
elements = this.slots.assignedElements();
|
||
let elArr = elements.filter(a => !a.hasAttribute('disabled'));
|
||
if (elArr.length > 0) {
|
||
elArr[0].style.display = 'block';
|
||
this.activekey = elArr[0].key
|
||
}
|
||
}
|
||
}
|
||
});
|
||
})
|
||
this.nav.onclick = (e) => {
|
||
if (e.target.closest('div').hasAttribute('data-disabled')) return;
|
||
let key = e.target.closest('div').dataset.key;
|
||
this.activeByKey(key)
|
||
let label = e.target.closest('div').querySelector('span').textContent;
|
||
this.dispatchEvent(new CustomEvent('onTabClick', { detail: { key: key, tab: label } }))
|
||
};
|
||
}
|
||
set onTabClick(fn) {
|
||
this.addEventListener('onTabClick', fn);
|
||
}
|
||
activeByKey(key) {
|
||
if (key === null || key === undefined) return; //如果没有key 不做相应
|
||
this.nav.querySelectorAll('.nav-item').forEach(a => {
|
||
if (a.getAttribute('data-key') === key) {
|
||
a.setAttribute('data-selected', 'true');
|
||
} else {
|
||
a.removeAttribute('data-selected');
|
||
}
|
||
})
|
||
let tbp = this.querySelector(`lit-tabpane[key='${key}']`);
|
||
let panes = this.querySelectorAll('lit-tabpane');
|
||
panes.forEach(a => {
|
||
if (a.key === key) {
|
||
a.style.display = 'block';
|
||
this.activekey = a.key;
|
||
this.initTabPos()
|
||
} else {
|
||
a.style.display = 'none';
|
||
}
|
||
})
|
||
}
|
||
/*激活选中 key 对应的 pane 成功返回true，没有找到key对应的pane 返回false*/
|
||
activePane(key) {
|
||
if (key === null || key === undefined) return false;
|
||
let tbp = this.querySelector(`lit-tabpane[key='${key}']`);
|
||
if (tbp) {
|
||
this.activeByKey(key)
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
//当 custom element从文档DOM中删除时，被调用。
|
||
disconnectedCallback() {
|
||
|
||
}
|
||
|
||
//当 custom element被移动到新的文档时，被调用。
|
||
adoptedCallback() {
|
||
console.log('Custom square element moved to new page.');
|
||
}
|
||
|
||
//当 custom element增加、删除、修改自身属性时，被调用。
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (name === 'activekey' && this.nav && oldValue !== newValue) {
|
||
this.activeByKey(newValue)
|
||
}
|
||
}
|
||
}
|
||
if (!customElements.get('lit-tabs')) {
|
||
customElements.define('lit-tabs', LitTabs);
|
||
}
|
||
|
||
class AppDiffFlame extends HTMLElement {
|
||
draw;
|
||
drawC;
|
||
rowHeight = 17;
|
||
|
||
static get observedAttributes() {
|
||
return []
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
font-size:inherit;
|
||
display:inline-flex;
|
||
align-items: center;
|
||
justify-content:center;
|
||
height: 100%;
|
||
width: 100%;
|
||
margin-bottom: 40px;
|
||
}
|
||
canvas { border: 1px solid #e9e9e9; }
|
||
#title{
|
||
font-weight: bold;
|
||
height: auto;
|
||
}
|
||
#title span{
|
||
color: gray;
|
||
}
|
||
#funcNameSpan{
|
||
display: inline-block;
|
||
border: 1px solid #e9e9e9;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
color: gray;
|
||
flex: 3;
|
||
margin-left: 10px;
|
||
}
|
||
#percentSpan{
|
||
display: inline-block;
|
||
border: 1px solid #e9e9e9;
|
||
margin-left: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
min-width: 160px;
|
||
max-width: 160px;
|
||
margin-left: 10px;
|
||
width: 100px;
|
||
height: 30px;
|
||
color: gray;
|
||
}
|
||
#diffSpan{
|
||
display: inline-block;
|
||
border: 1px solid #e9e9e9;
|
||
margin-left: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
min-width: 160px;
|
||
max-width: 160px;
|
||
margin-left: 10px;
|
||
width: 100px;
|
||
height: 30px;
|
||
color: gray;
|
||
}
|
||
#history{
|
||
display: none;
|
||
border: 1px solid #42b983;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
width: 100px;
|
||
margin-left: 10px;
|
||
height: 30px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
#history:hover{
|
||
background: #42b983;
|
||
color: #fff;
|
||
}
|
||
#searchInput{
|
||
height: 30px;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
flex: 1;
|
||
}
|
||
</style>
|
||
<div style="position: relative;width: 100%">
|
||
<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>
|
||
<canvas id="panel" title=""></canvas>
|
||
<div id="controller" style="position: absolute;top: 32px;display: flex;width: 100%">
|
||
<span id="history">Zoom Out</span>
|
||
<span id="funcNameSpan"></span>
|
||
<span id="diffSpan"></span>
|
||
<span id="percentSpan"></span>
|
||
<lit-input id="searchInput" placeholder="search" allow-clear>Search</lit-input>
|
||
</div>
|
||
</div>
|
||
<slot></slot>
|
||
`
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.history = [];
|
||
this.historyRefer = [];
|
||
this.panel = this.shadowRoot.getElementById('panel');
|
||
this.controller = this.shadowRoot.getElementById('controller');
|
||
this.funcNameSpan = this.shadowRoot.getElementById('funcNameSpan');
|
||
this.percentSpan = this.shadowRoot.getElementById('percentSpan');
|
||
this.diffSpan = this.shadowRoot.getElementById('diffSpan');
|
||
this.historySpan = this.shadowRoot.getElementById('history');
|
||
this.searchInput = this.shadowRoot.getElementById('searchInput');
|
||
this.pid = this.shadowRoot.getElementById('pid');
|
||
this.tid = this.shadowRoot.getElementById('tid');
|
||
this.processName = this.shadowRoot.getElementById('processName');
|
||
this.threadName = this.shadowRoot.getElementById('threadName');
|
||
this.sample = this.shadowRoot.getElementById('sample');
|
||
this.titleDiv = this.shadowRoot.getElementById('title');
|
||
this.context = this.panel.getContext('2d');
|
||
this.panel.width = this.shadowRoot.host.clientWidth;
|
||
this.panel.height = this.shadowRoot.host.clientHeight;
|
||
this.historySpan.onclick = e => {
|
||
if (this.history.length > 2) {
|
||
this.history.pop();
|
||
this.historyRefer.pop();
|
||
this.zoomOutRefer(this.historyRefer[this.historyRefer.length - 1])
|
||
this.zoomOut(this.history[this.history.length - 1])
|
||
} else if (this.history.length == 2) {
|
||
this.history.pop();
|
||
this.historyRefer.pop();
|
||
this.zoomOutRefer(this.historyRefer[this.historyRefer.length - 1])
|
||
this.zoomOut(this.history[this.history.length - 1])
|
||
this.historySpan.style.display = 'none';
|
||
} else {
|
||
this.historySpan.style.display = 'none';
|
||
}
|
||
}
|
||
this.searchInput.addEventListener("onPressEnter", (e) => {
|
||
this.keyword = e.currentTarget.value;
|
||
requestAnimationFrame(this.draw);
|
||
})
|
||
this.searchInput.addEventListener('onClear', e => {
|
||
this.keyword = null;
|
||
requestAnimationFrame(this.draw);
|
||
})
|
||
this.panel.onmouseover = (e) => {
|
||
this.mouseState = 'mouseOver';
|
||
}
|
||
this.panel.onmouseleave = e => {
|
||
this.mouseState = 'mouseLeave';
|
||
this.mouseX = 0;
|
||
this.mouseY = 0;
|
||
requestAnimationFrame(this.draw)
|
||
}
|
||
this.panel.onmousemove = e => {
|
||
const pos = e.currentTarget.getBoundingClientRect();
|
||
this.mouseX = e.clientX - pos.left;
|
||
this.mouseY = e.clientY - pos.top;
|
||
this.mouseState = 'mouseMove';
|
||
requestAnimationFrame(this.draw)
|
||
}
|
||
this.panel.onmousedown = e => {
|
||
this.mouseState = 'mouseDown';
|
||
// const pos = e.currentTarget.getBoundingClientRect();
|
||
// this.mouseX = e.clientX - pos.left;
|
||
// this.mouseY = e.clientY - pos.top;
|
||
// requestAnimationFrame(this.draw)
|
||
}
|
||
this.panel.onmouseup = e => {
|
||
this.mouseState = 'mouseUp';
|
||
const pos = e.currentTarget.getBoundingClientRect();
|
||
this.mouseX = e.clientX - pos.left;
|
||
this.mouseY = e.clientY - pos.top;
|
||
requestAnimationFrame(this.draw)
|
||
}
|
||
// this.panel.onclick = (e)=>{
|
||
// this.mouseState = 'mouseClick';
|
||
// }
|
||
}
|
||
|
||
set data(value) {
|
||
this._data = value;
|
||
this._dataRefer = value.jsonRefer;
|
||
/**
|
||
* type 值默认为1
|
||
* 1 Show percentage of event count relative to the current thread
|
||
* 2 Show percentage of event count relative to the current process
|
||
* 3 Show percentage of event count relative to all process
|
||
* 4 show event count
|
||
* 5 show event count in milliseconds
|
||
* 其他值
|
||
* pid, processName, tid, threadName, eventCount, sampleCount, CallOrder(g节点)
|
||
*/
|
||
this.type = value.type;
|
||
// reverse 表示火焰图需要是否需要倒序绘制，value中没有传reverse，默认表示false 既正序绘制
|
||
this.reverse = value.reverse || false;
|
||
// CallOrder.symbol 如果为-1 表示为根节点
|
||
if (value.CallOrder.symbol === -1) {
|
||
this._c = value.CallOrder.callStack;
|
||
this._cRef = this.threadRefer.CallOrder.callStack;
|
||
} else {
|
||
this._c = [value.CallOrder];
|
||
this._cRef = [this.threadRefer.CallOrder];
|
||
}
|
||
// console.log(this.data.json, this.dataRefer)
|
||
// console.log(this.c, this.cRef)
|
||
this.history.push(this._c)
|
||
this.historyRefer.push(this.cRef)
|
||
// 获取选项的 eventCount值 例如：hw-cpu-cycles 和 processes 同层级节点 表示所有进程的eventCount值求和
|
||
this.eventCountAllProcess = this._data.json.recordSampleInfo[window.eventIndex].eventCount
|
||
console.log("diff eventCountAllProcess = " + this.eventCountAllProcess)
|
||
if (value.pid) {
|
||
// 当前进程的 eventCount值，没有直接送json中去取是因为，第一次传的json 和 windows.data 一样，后续点击了 自节点传入的是子集，可能取的不准确
|
||
this.eventCountCurrentProcess = this._data.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].eventCount
|
||
console.log("diff eventCountCurrentProcess = " + this.eventCountCurrentProcess)
|
||
// 将进程号显示在界面上
|
||
this.pid.textContent = value.pid;
|
||
} else {
|
||
// this.titleDiv.style.display = 'none';
|
||
}
|
||
if (value.tid) {
|
||
// 取当前线程的 eventCount 值
|
||
this.eventCountCurrentThread = this._data.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].threads.filter(it => it.tid === value.tid)[0].eventCount;
|
||
this.eventCountCurrentThreadRefer = this._data.jsonRefer.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].threads.filter(it => it.tid === value.tid)[0].eventCount;
|
||
console.log("diff eventCountCurrentThread = " + this.eventCountCurrentThread)
|
||
// 显示线程号
|
||
this.tid.textContent = value.tid;
|
||
}
|
||
if (value.sampleCount) {
|
||
//显示sampleCount值 ，这个值在 thread节点里，只有线程有
|
||
this.sample.textContent = ' (Samples: ' + value.sampleCount + ")";
|
||
}
|
||
if (value.processName) {
|
||
//显示进程名 null显示空字符串
|
||
this.processName.textContent = value.processName ? `(${value.processName})` : '';
|
||
}
|
||
if (value.threadName) {
|
||
//显示线程名 null显示空字符串
|
||
this.threadName.textContent = value.threadName ? `(${value.threadName})` : '';
|
||
}
|
||
if (value.funcName) {
|
||
//如果是单独绘制Funtion Tab界面下的火焰图，只有 函数名称， 上面的 的进程线程信息不显示
|
||
this.titleDiv.innerHTML = `${value.funcName}`
|
||
this.controller.style.top = `${this.titleDiv.clientHeight + 10}px`
|
||
}
|
||
//获取最大层级，用于做火焰图高度计算，点击子节点后 maxDepth 也对应变化
|
||
this.maxDepth = this.getMaxDepth(this.data.CallOrder.callStack) + 5; //设置最大层级
|
||
this.maxDepthRefer = this.getMaxDepth(this.threadRefer.CallOrder.callStack) + 5; //设置最大层级
|
||
console.log("diff maxDepth = " + this.maxDepth + " maxDepthRefer = " + this.maxDepthRefer)
|
||
this.sumCount = this.data.CallOrder.subEvents; //设置根节点的 sumCount
|
||
this.sumCountRefer = this.threadRefer.CallOrder.subEvents; //设置根节点的 sumCountRefer 用来做对比
|
||
console.log("diff sumCount = " + this.sumCount + " sumCountRefer = " + this.sumCountRefer)
|
||
// console.log(this.threadRefer)//对比的线程数据
|
||
//计算canvas的宽度和高度
|
||
this.panel.height = this.maxDepth * this.rowHeight
|
||
this.panel.width = this.shadowRoot.host.clientWidth
|
||
//设置canvas 的大小
|
||
this.makeHighRes(this.panel);
|
||
//开始调用draw方法绘制一帧
|
||
requestAnimationFrame(this.draw);
|
||
}
|
||
|
||
get data() {
|
||
return this._data;
|
||
}
|
||
|
||
//需要对比的原始数据
|
||
get dataRefer() {
|
||
return this._dataRefer;
|
||
}
|
||
|
||
set dataRefer(val) {
|
||
this._dataRefer = val;
|
||
}
|
||
|
||
/*
|
||
获取要对比的 thread数据
|
||
*/
|
||
get threadRefer() {
|
||
return this._threadRefer;
|
||
}
|
||
|
||
/**
|
||
* 设置要对比的数据 这里传入的是 thread 节点；包含 {tid，eventCount,sampleCount,libs:[],CallOrder:[],CalledOrder:[]}
|
||
* @param val
|
||
*/
|
||
set threadRefer(val) {
|
||
this._threadRefer = val;
|
||
}
|
||
|
||
/**
|
||
* 点击图形中子节点时 传入 当前节点当作根节点绘制
|
||
* @param value
|
||
*/
|
||
set c(value) {
|
||
//显示回退button
|
||
this.historySpan.style.display = 'block';
|
||
//设置相对根节点
|
||
this._c = value;
|
||
//添加历史记录，用于回退到上一图形状态
|
||
this.history.push(this._c)
|
||
// 下面代码实现 canvas 随内容高度变化
|
||
// this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
|
||
// this.panel.height = this.maxDepth * this.rowHeight
|
||
// this.panel.width = this.shadowRoot.host.clientWidth;
|
||
// this.makeHighRes(this.panel);
|
||
//开始绘制
|
||
requestAnimationFrame(this.draw);
|
||
}
|
||
|
||
get c() {
|
||
return this._c;
|
||
}
|
||
|
||
get cRef() {
|
||
return this._cRef
|
||
}
|
||
|
||
set cRef(val) {
|
||
this._cRef = val;
|
||
this.historyRefer.push(this._cRef)
|
||
}
|
||
|
||
zoomOutRefer(value) {
|
||
this._cRef = value;
|
||
}
|
||
zoomOut(value) {
|
||
this._c = value;
|
||
// 下面代码实现 canvas 随内容高度变化
|
||
// this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
|
||
// // this.sumCount = value.reduce((acc, cur) => acc + cur.s, 0); //设置根节点的 sumCount
|
||
// this.panel.height = this.maxDepth * this.rowHeight
|
||
// this.panel.width = this.shadowRoot.host.clientWidth;
|
||
// this.makeHighRes(this.panel);
|
||
requestAnimationFrame(this.draw);
|
||
}
|
||
|
||
makeHighRes(canvas) {
|
||
let ctx = canvas.getContext('2d');
|
||
let dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
|
||
let oldWidth = canvas.width;
|
||
let oldHeight = canvas.height;
|
||
canvas.width = Math.round(oldWidth * dpr);
|
||
canvas.height = Math.round(oldHeight * dpr);
|
||
canvas.style.width = oldWidth + 'px';
|
||
canvas.style.height = oldHeight + 'px';
|
||
ctx.scale(dpr, dpr);
|
||
this.context = ctx;
|
||
return ctx;
|
||
}
|
||
|
||
//绘制火焰图
|
||
draw = () => {
|
||
// requestAnimationFrame(this.draw);
|
||
let ctx = this.context;
|
||
// ctx.clearRect(0, 0, this.panel.width, this.panel.height);
|
||
//绘制背景渐变色
|
||
let grad = ctx.createLinearGradient(0, 0, 0, this.panel.height / 2); //创建一个渐变色线性对象
|
||
grad.addColorStop(0, "#eeeeee"); //定义渐变色颜色
|
||
grad.addColorStop(1, "#efefb1");
|
||
ctx.fillStyle = grad; //设置fillStyle为当前的渐变对象
|
||
ctx.fillRect(0, 0, this.panel.width, this.panel.height);
|
||
// console.log(this.c,this.cRef);
|
||
if (this.data) {
|
||
//如果需要倒序绘制调用drawCReverse方法绘制
|
||
if (this.reverse) {
|
||
this.drawCReverse(
|
||
this.c,
|
||
1,
|
||
{
|
||
x: 0,
|
||
y: this.rowHeight * 4,
|
||
w: this.panel.clientWidth,
|
||
h: this.rowHeight
|
||
});
|
||
} else {
|
||
//绘制正序图，需要3个参数 节点数据,当前绘制的层级,当前这行的Rect数据
|
||
this.drawC(
|
||
this.c,//根节点
|
||
this.cRef,
|
||
1,
|
||
{
|
||
x: 0,
|
||
y: this.panel.clientHeight - this.rowHeight,
|
||
w: this.panel.clientWidth,
|
||
h: this.rowHeight
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
//根据type类型计算 统计数据
|
||
getStatistics(c) {
|
||
let statistics;//鼠标hover展示的百分比
|
||
switch (this.type) {
|
||
case 1: //current thread
|
||
statistics = c.subEvents * 100 / this.eventCountCurrentThread;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
case 2: // current process
|
||
statistics = c.subEvents * 100 / this.eventCountCurrentProcess;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
case 3: // all process
|
||
statistics = c.subEvents * 100 / this.eventCountAllProcess;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
case 4: //event count
|
||
statistics = c.subEvents;
|
||
statistics = `${statistics}`
|
||
break;
|
||
case 5: //event count in milliseconds
|
||
statistics = c.subEvents / 1000000;
|
||
statistics = statistics.toFixed(3)
|
||
statistics = `${statistics} ms`
|
||
break;
|
||
default: //current thread
|
||
statistics = c.subEvents * 100 / this.eventCountCurrentThread;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
}
|
||
return statistics;
|
||
}
|
||
|
||
//HTML反转义
|
||
htmlDecode(text) {
|
||
let temp = document.createElement("div");
|
||
temp.innerHTML = text;
|
||
let output = temp.innerText || temp.textContent;
|
||
temp = null;
|
||
return output;
|
||
}
|
||
|
||
//获取方法名
|
||
getFunctionName(f) {
|
||
let funName = "";
|
||
if (this._data.json.SymbolMap[f]) {
|
||
funName = this._data.json.SymbolMap[f].symbol;
|
||
} else {
|
||
let f = c[i].symbol;
|
||
console.log(`processId:${this.pid.textContent} processName:${this.processName.textContent} threadId:${this.tid.textContent} threadName:${this.threadName.textContent}`, c[i], "SymbolMap中没有对应的值")
|
||
}
|
||
return this.htmlDecode(funName);
|
||
}
|
||
|
||
//根据比对对象的funId 在比对数组中找到对应的函数名
|
||
getFunctionNameRefer(f) {
|
||
let funName = "";
|
||
if (this.dataRefer.SymbolMap[f]) {
|
||
funName = this.dataRefer.SymbolMap[f].symbol;
|
||
} else {
|
||
// let f = c[i].symbol;
|
||
// console.log(`processId:${this.pid.textContent} processName:${this.processName.textContent} threadId:${this.tid.textContent} threadName:${this.threadName.textContent}`, c[i], "SymbolMap中没有对应的值")
|
||
}
|
||
return this.htmlDecode(funName);
|
||
}
|
||
|
||
//根据百分比获取显示的背景色，如果 搜索框中的关键字与当前funcName 匹配则单独显示色值
|
||
getColor(percent2, funName) {
|
||
let heatColor;
|
||
if (this.keyword && this.keyword.length > 0 && funName.indexOf(this.keyword) != -1) {
|
||
heatColor = { r: 0x66, g: 0xad, b: 0xff };
|
||
} else {
|
||
heatColor = this.getHeatColor(percent2);
|
||
}
|
||
return heatColor;
|
||
}
|
||
|
||
//倒序绘制
|
||
drawCReverse = (c, dept, rect) => {
|
||
let ctx = this.context;
|
||
let offset = 0
|
||
for (let i = 0; i < c.length; i++) {
|
||
let funName = this.getFunctionName(c[i].symbol);
|
||
let funcId = c[i].symbol;
|
||
let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));
|
||
let percent2 = c[i].subEvents * 100 / this.sumCount;
|
||
if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
|
||
let heatColor = this.getColor(percent2, funName);
|
||
let w = rect.w * (percent / 100.0);
|
||
if (w < 1) {
|
||
w = 1
|
||
}
|
||
let _x = rect.x + offset;
|
||
//绘制填充矩形
|
||
ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
|
||
ctx.fillRect(_x, rect.y + 2, w, rect.h - 2);
|
||
// 绘制文本
|
||
ctx.fillStyle = "rgba(0,0,0,1)";
|
||
let txtWidth = ctx.measureText(funName).width;//文本长度
|
||
let chartWidth = txtWidth / funName.length;//每个字符长度
|
||
let number = (w - 6) / chartWidth;//可以显示多少字符
|
||
if (number >= 4 && number < funName.length - 3) {
|
||
ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
|
||
} else if (number >= 4) {
|
||
ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
|
||
}
|
||
let _rect = {
|
||
x: _x, y: rect.y, w: w, h: rect.h
|
||
}
|
||
c[i].rect = _rect;
|
||
|
||
if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > rect.h * 3 + (dept) * rect.h && this.mouseY < rect.h * 3 + (dept + 1) * rect.h) {
|
||
if (this.mouseState === 'mouseMove') {
|
||
//绘制边框矩形
|
||
// ctx.font = '12px serif';
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeStyle = `#000000`;
|
||
ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
|
||
this.funcNameSpan.textContent = funName
|
||
this.panel.title = funName
|
||
this.percentSpan.textContent = this.getStatistics(c[i]);
|
||
} else {
|
||
if (this.mouseState === 'mouseUp') {
|
||
this.mouseState = null;
|
||
if (!this.compareNodes(this.c, [c[i]])) {
|
||
this.c = [c[i]];
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
ctx.lineWidth = 1;
|
||
// ctx.font = '11px serif';
|
||
}
|
||
offset += w;
|
||
// console.log(_rect,dept,percent,funName);
|
||
//递归绘制子节点
|
||
if (c[i].callStack && c[i].callStack.length > 0) {
|
||
_rect.y = _rect.y + _rect.h
|
||
this.drawCReverse(c[i].callStack, dept + 1, _rect);
|
||
}
|
||
}
|
||
}
|
||
|
||
//正序绘制
|
||
drawC = (c, cRef, dept, rect) => {
|
||
let ctx = this.context;
|
||
let offset = 0//用来保存x坐标的偏移量，保证在rect的矩形范围内从左往右绘制 c集合中的节点
|
||
for (let i = 0; i < c.length; i++) {
|
||
let funName = this.getFunctionName(c[i].symbol);
|
||
// console.log(dept,this.data.SymbolMap[c[i].symbol].symbol);
|
||
let funcId = c[i].symbol;//获取funcId
|
||
//计算这个节点的subEvents值 在当前传入集合的subEvents总和中占的百分比，因为rect默认是最大宽宽的，递归后最越来越小，根据这个百分比和 rect矩形的宽度计算节点绘制的宽度
|
||
let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));//sumCount;
|
||
//计算这个节点的subEvents 在总的sumCount（对应的是最大宽度）中占比，这个百分比用来计算颜色，占比越少颜色越浅
|
||
let percent2 = c[i].subEvents * 100 / this.sumCount;
|
||
if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
|
||
let heatColor = this.getColor(percent2, funName);
|
||
let w = rect.w * (percent / 100.0);
|
||
if (w < 1) {
|
||
w = 1
|
||
}
|
||
let _x = rect.x + offset;
|
||
//绘制填充矩形
|
||
ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
|
||
let __rect = { x: _x, y: rect.y + 2, w: w, h: rect.h - 2 }
|
||
ctx.fillRect(__rect.x, __rect.y, __rect.w, __rect.h);
|
||
|
||
//覆盖要比较的数据 (显示的方法名，显示的矩形对象,宽度的百分比，需要比对节点集合[需要根据funName从中取得要比较的节点])
|
||
let nodeRefer = this.drawReferData(ctx, funName, __rect, percent, cRef);
|
||
|
||
// 绘制文本
|
||
ctx.fillStyle = "rgba(0,0,0,1)";
|
||
let txtWidth = ctx.measureText(funName).width;//文本长度
|
||
let chartWidth = txtWidth / funName.length;//每个字符长度
|
||
let number = (w - 6) / chartWidth;//可以显示多少字符
|
||
if (number >= 4 && number < funName.length - 3) {
|
||
ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
|
||
} else if (number >= 4) {
|
||
ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
|
||
}
|
||
let _rect = {
|
||
x: _x, y: rect.y, w: w, h: rect.h
|
||
}
|
||
c[i].rect = _rect;
|
||
|
||
if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > (this.maxDepth - dept) * rect.h && this.mouseY < (this.maxDepth - dept + 1) * rect.h) {
|
||
if (this.mouseState === 'mouseMove') {
|
||
//绘制边框矩形
|
||
// ctx.font = '12px serif';
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeStyle = `#000000`;
|
||
ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
|
||
this.funcNameSpan.textContent = funName
|
||
this.panel.title = funName
|
||
this.percentSpan.textContent = this.getStatistics(c[i]);
|
||
let node = this.fetchSameFuncNameData(funName, cRef);
|
||
var diff = 0.0;
|
||
if (node) {
|
||
let percentRefer = node.subEvents * 100 / (cRef.reduce((acc, cur) => acc + cur.subEvents, 0))
|
||
diff = (percent - percentRefer).toFixed(2)
|
||
}
|
||
this.diffSpan.textContent = `diff: ${diff}%`;
|
||
} else {
|
||
if (this.mouseState === 'mouseUp') {
|
||
this.mouseState = null;
|
||
if (!this.compareNodes(this.c, [c[i]])) {
|
||
this.c = [c[i]];
|
||
this.cRef = [nodeRefer];
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
ctx.lineWidth = 1;
|
||
// ctx.font = '11px serif';
|
||
}
|
||
offset += w;
|
||
// console.log(_rect,dept,percent,funName);
|
||
//递归绘制子节点
|
||
if (c[i].callStack && c[i].callStack.length > 0) {
|
||
_rect.y = _rect.y - _rect.h
|
||
this.drawC(c[i].callStack, nodeRefer ? nodeRefer.callStack : [], dept + 1, _rect);
|
||
}
|
||
}
|
||
}
|
||
|
||
//在对比数组中找到 方法名与 funName相同的节点
|
||
fetchSameFuncNameData(funName, cRef) {
|
||
let node = cRef.filter(it => {
|
||
let funNameRefer = this.getFunctionNameRefer(it.symbol);
|
||
return funName === funNameRefer
|
||
})
|
||
// console.log("cRef:",funName,cRef,node)
|
||
if (node && node.length > 0) {
|
||
return node[0];
|
||
} else {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
//对比数据，如果要比对的数据宽度大于绘制节点宽度 显示红色，否则显示蓝色，颜色深度取决于大多少或者小多少
|
||
drawReferData(ctx, funName, rect, percent, cRef) {
|
||
//根据funName 在cRef集合中找到同函数名的节点
|
||
let node = this.fetchSameFuncNameData(funName, cRef);
|
||
if (node) {
|
||
let percentRefer = node.subEvents * 100 / (cRef.reduce((acc, cur) => acc + cur.subEvents, 0));//sumCount;
|
||
// console.log("找到相同节点", funName, rect.w, percent, percentRefer, node)
|
||
//如果绘制的百分比小于要比较的百分比
|
||
if (percent < percentRefer) {
|
||
let offset = Math.abs(percent - percentRefer);
|
||
if (offset > 0 && offset <= 10) {
|
||
ctx.fillStyle = `#66B3FF`;
|
||
} else if (offset > 10 && offset <= 20) {
|
||
ctx.fillStyle = `#2894FF`;
|
||
} else if (offset > 20 && offset <= 30) {
|
||
ctx.fillStyle = `#0072E3`;
|
||
} else if (offset > 30 && offset <= 50) {
|
||
ctx.fillStyle = `#0066CC`;
|
||
} else {
|
||
ctx.fillStyle = `#005AB5`;
|
||
}
|
||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||
} else if (percent > percentRefer) {
|
||
let offset = Math.abs(percent - percentRefer);
|
||
if (offset > 0 && offset <= 10) {
|
||
ctx.fillStyle = `#FF7575`;
|
||
} else if (offset > 10 && offset <= 20) {
|
||
ctx.fillStyle = `#FF2D2D`;
|
||
} else if (offset > 20 && offset <= 30) {
|
||
ctx.fillStyle = `#EA0000`;
|
||
} else if (offset > 30 && offset <= 50) {
|
||
ctx.fillStyle = `#CE0000`;
|
||
} else {
|
||
ctx.fillStyle = `#AE0000`;
|
||
}
|
||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||
}
|
||
}
|
||
return node;
|
||
}
|
||
|
||
|
||
compareNode(na, nb) {
|
||
let res = false;
|
||
if (na.selfEvents === nb.selfEvents && na.subEvents === nb.subEvents && na.symbol === nb.symbol) {
|
||
res = this.compareNodes(na.callStack || [], nb.callStack || []);
|
||
}
|
||
return res;
|
||
}
|
||
|
||
compareNodes(a, b) {
|
||
let res = false;
|
||
if (a.length === b.length) {
|
||
if (a.length === 0) {
|
||
return true;
|
||
}
|
||
for (let i = 0; i < a.length; i++) {
|
||
res = this.compareNode(a[i], b[i])
|
||
}
|
||
}
|
||
return res;
|
||
}
|
||
|
||
getMaxDepth(nodes) {
|
||
let isArray = Array.isArray(nodes);
|
||
let sumCount;
|
||
if (isArray) {
|
||
sumCount = nodes.reduce((acc, cur) => acc + cur.subEvents, 0);
|
||
} else {
|
||
sumCount = nodes.subEvents;
|
||
}
|
||
let width = sumCount * 100.0 / this.sumCount;
|
||
if (width < 0.1) {
|
||
return 0;
|
||
}
|
||
let children = isArray ? this.splitChildrenForNodes(nodes) : nodes.callStack;
|
||
let childDepth = 0;
|
||
if (children) {
|
||
for (let child of children) {
|
||
childDepth = Math.max(childDepth, this.getMaxDepth(child));
|
||
}
|
||
}
|
||
return childDepth + 1;
|
||
}
|
||
|
||
splitChildrenForNodes(nodes) {
|
||
let map = new Map();
|
||
for (let node of nodes) {
|
||
for (let child of node.callStack) {
|
||
let subNodes = map.get(child.symbol);
|
||
if (subNodes) {
|
||
subNodes.push(child);
|
||
} else {
|
||
map.set(child.symbol, [child]);
|
||
}
|
||
}
|
||
}
|
||
let res = [];
|
||
for (let subNodes of map.values()) {
|
||
res.push(subNodes.length == 1 ? subNodes[0] : subNodes);
|
||
}
|
||
return res;
|
||
}
|
||
|
||
//根据百分比获取节点的背景色
|
||
getHeatColor(widthPercentage) {
|
||
return {
|
||
r: Math.floor(245 + 10 * (1 - widthPercentage * 0.01)),
|
||
g: Math.floor(110 + 105 * (1 - widthPercentage * 0.01)),
|
||
b: 100,
|
||
};
|
||
}
|
||
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
}
|
||
}
|
||
if (!customElements.get('app-diff-flame')) {
|
||
customElements.define('app-diff-flame', AppDiffFlame);
|
||
}
|
||
|
||
class AppNormalFlame extends HTMLElement {
|
||
draw;
|
||
drawC;
|
||
rowHeight = 17;
|
||
|
||
static get observedAttributes() {
|
||
return []
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
font-size:inherit;
|
||
display:inline-flex;
|
||
align-items: center;
|
||
justify-content:center;
|
||
height: 100%;
|
||
width: 100%;
|
||
margin-bottom: 40px;
|
||
}
|
||
canvas { border: 1px solid #e9e9e9; }
|
||
#title{
|
||
font-weight: bold;
|
||
height: auto;
|
||
}
|
||
#title span{
|
||
color: gray;
|
||
}
|
||
#funcNameSpan{
|
||
display: inline-block;
|
||
border: 1px solid #e9e9e9;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
color: gray;
|
||
flex: 3;
|
||
margin-left: 10px;
|
||
}
|
||
#percentSpan{
|
||
display: inline-block;
|
||
border: 1px solid #e9e9e9;
|
||
margin-left: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
min-width: 160px;
|
||
max-width: 160px;
|
||
margin-left: 10px;
|
||
width: 100px;
|
||
height: 30px;
|
||
color: gray;
|
||
}
|
||
#history{
|
||
display: none;
|
||
border: 1px solid #42b983;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
padding: 2px 8px;
|
||
background: #fff;
|
||
width: 100px;
|
||
margin-left: 10px;
|
||
height: 30px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
#history:hover{
|
||
background: #42b983;
|
||
color: #fff;
|
||
}
|
||
#searchInput{
|
||
height: 30px;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
flex: 1;
|
||
}
|
||
</style>
|
||
<div style="position: relative;width: 100%">
|
||
<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>
|
||
<canvas id="panel" title=""></canvas>
|
||
<div id="controller" style="position: absolute;top: 32px;display: flex;width: 100%">
|
||
<span id="history">Zoom Out</span>
|
||
<span id="funcNameSpan"></span>
|
||
<span id="percentSpan"></span>
|
||
<lit-input id="searchInput" placeholder="search" allow-clear>Search</lit-input>
|
||
</div>
|
||
</div>
|
||
<slot></slot>
|
||
`
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.history = [];
|
||
this.panel = this.shadowRoot.getElementById('panel');
|
||
this.controller = this.shadowRoot.getElementById('controller');
|
||
this.funcNameSpan = this.shadowRoot.getElementById('funcNameSpan');
|
||
this.percentSpan = this.shadowRoot.getElementById('percentSpan');
|
||
this.historySpan = this.shadowRoot.getElementById('history');
|
||
this.searchInput = this.shadowRoot.getElementById('searchInput');
|
||
this.pid = this.shadowRoot.getElementById('pid');
|
||
this.tid = this.shadowRoot.getElementById('tid');
|
||
this.processName = this.shadowRoot.getElementById('processName');
|
||
this.threadName = this.shadowRoot.getElementById('threadName');
|
||
this.sample = this.shadowRoot.getElementById('sample');
|
||
this.titleDiv = this.shadowRoot.getElementById('title');
|
||
this.context = this.panel.getContext('2d');
|
||
this.panel.width = this.shadowRoot.host.clientWidth;
|
||
this.panel.height = this.shadowRoot.host.clientHeight;
|
||
this.historySpan.onclick = e => {
|
||
if (this.history.length > 2) {
|
||
this.history.pop();
|
||
this.zoomOut(this.history[this.history.length - 1])
|
||
} else if (this.history.length == 2) {
|
||
this.history.pop();
|
||
this.zoomOut(this.history[this.history.length - 1])
|
||
this.historySpan.style.display = 'none';
|
||
} else {
|
||
this.historySpan.style.display = 'none';
|
||
}
|
||
}
|
||
this.searchInput.addEventListener("onPressEnter", (e) => {
|
||
this.keyword = e.currentTarget.value;
|
||
requestAnimationFrame(this.draw);
|
||
})
|
||
this.searchInput.addEventListener('onClear', e => {
|
||
this.keyword = null;
|
||
requestAnimationFrame(this.draw);
|
||
})
|
||
this.panel.onmouseover = (e) => {
|
||
this.mouseState = 'mouseOver';
|
||
}
|
||
this.panel.onmouseleave = e => {
|
||
this.mouseState = 'mouseLeave';
|
||
this.mouseX = 0;
|
||
this.mouseY = 0;
|
||
requestAnimationFrame(this.draw)
|
||
}
|
||
this.panel.onmousemove = e => {
|
||
const pos = e.currentTarget.getBoundingClientRect();
|
||
this.mouseX = e.clientX - pos.left;
|
||
this.mouseY = e.clientY - pos.top;
|
||
this.mouseState = 'mouseMove';
|
||
requestAnimationFrame(this.draw)
|
||
}
|
||
this.panel.onmousedown = e => {
|
||
this.mouseState = 'mouseDown';
|
||
// const pos = e.currentTarget.getBoundingClientRect();
|
||
// this.mouseX = e.clientX - pos.left;
|
||
// this.mouseY = e.clientY - pos.top;
|
||
// requestAnimationFrame(this.draw)
|
||
}
|
||
this.panel.onmouseup = e => {
|
||
this.mouseState = 'mouseUp';
|
||
const pos = e.currentTarget.getBoundingClientRect();
|
||
this.mouseX = e.clientX - pos.left;
|
||
this.mouseY = e.clientY - pos.top;
|
||
requestAnimationFrame(this.draw)
|
||
}
|
||
// this.panel.onclick = (e)=>{
|
||
// this.mouseState = 'mouseClick';
|
||
// }
|
||
}
|
||
|
||
set data(value) {
|
||
this._data = value;
|
||
this.type = value.type;
|
||
this.reverse = value.reverse || false;
|
||
if (value.CallOrder.symbol === -1) {
|
||
this._c = value.CallOrder.callStack;
|
||
} else {
|
||
this._c = [value.CallOrder];
|
||
}
|
||
this.history.push(this._c)
|
||
this.eventCountAllProcess = value.json.recordSampleInfo[window.eventIndex].eventCount
|
||
if (value.pid) {
|
||
this.eventCountCurrentProcess = value.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].eventCount
|
||
this.pid.textContent = value.pid;
|
||
} else {
|
||
// this.titleDiv.style.display = 'none';
|
||
}
|
||
if (value.tid) {
|
||
this.eventCountCurrentThread = value.json.recordSampleInfo[window.eventIndex].processes.filter(it => it.pid === value.pid)[0].threads.filter(it => it.tid === value.tid)[0].eventCount;
|
||
this.tid.textContent = value.tid;
|
||
}
|
||
if (value.sampleCount) {
|
||
this.sample.textContent = ' (Samples: ' + value.sampleCount + ")";
|
||
}
|
||
if (value.processName) {
|
||
this.processName.textContent = value.processName ? `(${value.processName})` : '';
|
||
}
|
||
if (value.threadName) {
|
||
this.threadName.textContent = value.threadName ? `(${value.threadName})` : '';
|
||
}
|
||
if (value.funcName) {
|
||
this.titleDiv.innerHTML = `${value.funcName}`
|
||
this.controller.style.top = `${this.titleDiv.clientHeight + 10}px`
|
||
}
|
||
this.maxDepth = this.getMaxDepth(this.data.CallOrder.callStack) + 5; //设置最大层级
|
||
this.sumCount = this.data.CallOrder.subEvents; //设置根节点的 sumCount
|
||
this.panel.height = this.maxDepth * this.rowHeight
|
||
this.panel.width = this.shadowRoot.host.clientWidth
|
||
this.makeHighRes(this.panel);
|
||
requestAnimationFrame(this.draw);
|
||
}
|
||
|
||
get data() {
|
||
return this._data;
|
||
}
|
||
|
||
set c(value) {
|
||
this.historySpan.style.display = 'block';
|
||
this._c = value;
|
||
this.history.push(this._c)
|
||
// 下面代码实现 canvas 随内容高度变化
|
||
// this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
|
||
// this.panel.height = this.maxDepth * this.rowHeight
|
||
// this.panel.width = this.shadowRoot.host.clientWidth;
|
||
// this.makeHighRes(this.panel);
|
||
requestAnimationFrame(this.draw);
|
||
}
|
||
|
||
get c() {
|
||
return this._c;
|
||
}
|
||
|
||
zoomOut(value) {
|
||
this._c = value;
|
||
// 下面代码实现 canvas 随内容高度变化
|
||
// this.maxDepth = this._getMaxDepth(value) + 5; //设置最大层级
|
||
// // this.sumCount = value.reduce((acc, cur) => acc + cur.s, 0); //设置根节点的 sumCount
|
||
// this.panel.height = this.maxDepth * this.rowHeight
|
||
// this.panel.width = this.shadowRoot.host.clientWidth;
|
||
// this.makeHighRes(this.panel);
|
||
requestAnimationFrame(this.draw);
|
||
}
|
||
|
||
makeHighRes(canvas) {
|
||
let ctx = canvas.getContext('2d');
|
||
let dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
|
||
let oldWidth = canvas.width;
|
||
let oldHeight = canvas.height;
|
||
canvas.width = Math.round(oldWidth * dpr);
|
||
canvas.height = Math.round(oldHeight * dpr);
|
||
canvas.style.width = oldWidth + 'px';
|
||
canvas.style.height = oldHeight + 'px';
|
||
ctx.scale(dpr, dpr);
|
||
this.context = ctx;
|
||
return ctx;
|
||
}
|
||
|
||
draw = () => {
|
||
// requestAnimationFrame(this.draw);
|
||
let ctx = this.context;
|
||
// ctx.clearRect(0, 0, this.panel.width, this.panel.height);
|
||
let grad = ctx.createLinearGradient(0, 0, 0, this.panel.height / 2); //创建一个渐变色线性对象
|
||
grad.addColorStop(0, "#eeeeee"); //定义渐变色颜色
|
||
grad.addColorStop(1, "#efefb1");
|
||
ctx.fillStyle = grad; //设置fillStyle为当前的渐变对象
|
||
ctx.fillRect(0, 0, this.panel.width, this.panel.height);
|
||
if (this.data) {
|
||
if (this.reverse) {
|
||
this.drawCReverse(
|
||
this.c,
|
||
1,
|
||
{
|
||
x: 0,
|
||
y: this.rowHeight * 4,
|
||
w: this.panel.clientWidth,
|
||
h: this.rowHeight
|
||
});
|
||
} else {
|
||
this.drawC(
|
||
this.c,
|
||
1,
|
||
{
|
||
x: 0,
|
||
y: this.panel.clientHeight - this.rowHeight,
|
||
w: this.panel.clientWidth,
|
||
h: this.rowHeight
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
getStatistics(c) {
|
||
let statistics;//鼠标hover展示的百分比
|
||
switch (this.type) {
|
||
case 1: //current thread
|
||
statistics = c.subEvents * 100 / this.eventCountCurrentThread;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
case 2: // current process
|
||
statistics = c.subEvents * 100 / this.eventCountCurrentProcess;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
case 3: // all process
|
||
statistics = c.subEvents * 100 / this.eventCountAllProcess;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
case 4: //event count
|
||
statistics = c.subEvents;
|
||
statistics = `${statistics}`
|
||
break;
|
||
case 5: //event count in milliseconds
|
||
statistics = c.subEvents / 1000000;
|
||
statistics = statistics.toFixed(3)
|
||
statistics = `${statistics} ms`
|
||
break;
|
||
default: //current thread
|
||
statistics = c.subEvents * 100 / this.eventCountCurrentThread;
|
||
statistics = statistics.toFixed(2)
|
||
statistics = `${statistics}%`
|
||
break;
|
||
}
|
||
return statistics;
|
||
}
|
||
|
||
//HTML反转义
|
||
htmlDecode(text) {
|
||
let temp = document.createElement("div");
|
||
temp.innerHTML = text;
|
||
let output = temp.innerText || temp.textContent;
|
||
temp = null;
|
||
return output;
|
||
}
|
||
|
||
getFunctionName(f) {
|
||
let funName = "";
|
||
if (this.data.json.SymbolMap[f]) {
|
||
funName = this.data.json.SymbolMap[f].symbol;
|
||
} else {
|
||
let f = c[i].symbol;
|
||
console.log(`processId:${this.pid.textContent} processName:${this.processName.textContent} threadId:${this.tid.textContent} threadName:${this.threadName.textContent}`, c[i], "SymbolMap中没有对应的值")
|
||
}
|
||
return this.htmlDecode(funName);
|
||
}
|
||
|
||
getColor(percent2, funName) {
|
||
let heatColor;
|
||
if (this.keyword && this.keyword.length > 0 && funName.indexOf(this.keyword) != -1) {
|
||
heatColor = { r: 0x66, g: 0xad, b: 0xff };
|
||
} else {
|
||
heatColor = this.getHeatColor(percent2);
|
||
}
|
||
return heatColor;
|
||
}
|
||
|
||
drawCReverse = (c, dept, rect) => {
|
||
let ctx = this.context;
|
||
let offset = 0
|
||
for (let i = 0; i < c.length; i++) {
|
||
let funName = this.getFunctionName(c[i].symbol);
|
||
let funcId = c[i].symbol;
|
||
let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));
|
||
let percent2 = c[i].subEvents * 100 / this.sumCount;
|
||
if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
|
||
let heatColor = this.getColor(percent2, funName);
|
||
let w = rect.w * (percent / 100.0);
|
||
if (w < 1) {
|
||
w = 1
|
||
}
|
||
let _x = rect.x + offset;
|
||
//绘制填充矩形
|
||
ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
|
||
ctx.fillRect(_x, rect.y + 2, w, rect.h - 2);
|
||
// 绘制文本
|
||
ctx.fillStyle = "rgba(0,0,0,1)";
|
||
let txtWidth = ctx.measureText(funName).width;//文本长度
|
||
let chartWidth = txtWidth / funName.length;//每个字符长度
|
||
let number = (w - 6) / chartWidth;//可以显示多少字符
|
||
if (number >= 4 && number < funName.length - 3) {
|
||
ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
|
||
} else if (number >= 4) {
|
||
ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
|
||
}
|
||
let _rect = {
|
||
x: _x, y: rect.y, w: w, h: rect.h
|
||
}
|
||
c[i].rect = _rect;
|
||
|
||
if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > rect.h * 3 + (dept) * rect.h && this.mouseY < rect.h * 3 + (dept + 1) * rect.h) {
|
||
if (this.mouseState === 'mouseMove') {
|
||
//绘制边框矩形
|
||
// ctx.font = '12px serif';
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeStyle = `#000000`;
|
||
ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
|
||
this.funcNameSpan.textContent = funName
|
||
this.panel.title = funName
|
||
this.percentSpan.textContent = this.getStatistics(c[i]);
|
||
} else {
|
||
if (this.mouseState === 'mouseUp') {
|
||
this.mouseState = null;
|
||
if (!this.compareNodes(this.c, [c[i]])) {
|
||
this.c = [c[i]];
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
ctx.lineWidth = 1;
|
||
// ctx.font = '11px serif';
|
||
}
|
||
offset += w;
|
||
// console.log(_rect,dept,percent,funName);
|
||
//递归绘制子节点
|
||
if (c[i].callStack && c[i].callStack.length > 0) {
|
||
_rect.y = _rect.y + _rect.h
|
||
this.drawCReverse(c[i].callStack, dept + 1, _rect);
|
||
}
|
||
}
|
||
}
|
||
drawC = (c, dept, rect) => {
|
||
let ctx = this.context;
|
||
let offset = 0
|
||
for (let i = 0; i < c.length; i++) {
|
||
let funName = this.getFunctionName(c[i].symbol);
|
||
// console.log(dept,this.data.SymbolMap[c[i].symbol].symbol);
|
||
let funcId = c[i].symbol;
|
||
let percent = c[i].subEvents * 100 / (c.reduce((acc, cur) => acc + cur.subEvents, 0));//sumCount;
|
||
let percent2 = c[i].subEvents * 100 / this.sumCount;
|
||
if (percent2 < 0.1) continue //过滤掉 百分比为0.1一下的节点
|
||
let heatColor = this.getColor(percent2, funName);
|
||
let w = rect.w * (percent / 100.0);
|
||
if (w < 1) {
|
||
w = 1
|
||
}
|
||
let _x = rect.x + offset;
|
||
//绘制填充矩形
|
||
ctx.fillStyle = `rgba(${heatColor.r}, ${heatColor.g}, ${heatColor.b}, 1)`;
|
||
ctx.fillRect(_x, rect.y + 2, w, rect.h - 2);
|
||
// 绘制文本
|
||
ctx.fillStyle = "rgba(0,0,0,1)";
|
||
let txtWidth = ctx.measureText(funName).width;//文本长度
|
||
let chartWidth = txtWidth / funName.length;//每个字符长度
|
||
let number = (w - 6) / chartWidth;//可以显示多少字符
|
||
if (number >= 4 && number < funName.length - 3) {
|
||
ctx.fillText(funName.slice(0, number - 3) + '...', _x + 3, rect.y + 13, w - 6)
|
||
} else if (number >= 4) {
|
||
ctx.fillText(funName, _x + 3, rect.y + 13, w - 6)
|
||
}
|
||
let _rect = {
|
||
x: _x, y: rect.y, w: w, h: rect.h
|
||
}
|
||
c[i].rect = _rect;
|
||
|
||
if (this.mouseX > _x && this.mouseX < _x + w && this.mouseY > (this.maxDepth - dept) * rect.h && this.mouseY < (this.maxDepth - dept + 1) * rect.h) {
|
||
if (this.mouseState === 'mouseMove') {
|
||
//绘制边框矩形
|
||
// ctx.font = '12px serif';
|
||
ctx.lineWidth = 2;
|
||
ctx.strokeStyle = `#000000`;
|
||
ctx.strokeRect(_x, rect.y + 1, w - 1, rect.h);
|
||
this.funcNameSpan.textContent = funName
|
||
this.panel.title = funName
|
||
this.percentSpan.textContent = this.getStatistics(c[i]);
|
||
} else {
|
||
if (this.mouseState === 'mouseUp') {
|
||
this.mouseState = null;
|
||
if (!this.compareNodes(this.c, [c[i]])) {
|
||
this.c = [c[i]];
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
ctx.lineWidth = 1;
|
||
// ctx.font = '11px serif';
|
||
}
|
||
offset += w;
|
||
// console.log(_rect,dept,percent,funName);
|
||
//递归绘制子节点
|
||
if (c[i].callStack && c[i].callStack.length > 0) {
|
||
_rect.y = _rect.y - _rect.h
|
||
this.drawC(c[i].callStack, dept + 1, _rect);
|
||
}
|
||
}
|
||
}
|
||
|
||
compareNode(na, nb) {
|
||
let res = false;
|
||
if (na.selfEvents === nb.selfEvents && na.subEvents === nb.subEvents && na.symbol === nb.symbol) {
|
||
res = this.compareNodes(na.callStack || [], nb.callStack || []);
|
||
}
|
||
return res;
|
||
}
|
||
|
||
compareNodes(a, b) {
|
||
let res = false;
|
||
if (a.length === b.length) {
|
||
if (a.length === 0) {
|
||
return true;
|
||
}
|
||
for (let i = 0; i < a.length; i++) {
|
||
res = this.compareNode(a[i], b[i])
|
||
}
|
||
}
|
||
return res;
|
||
}
|
||
|
||
getMaxDepth(nodes) {
|
||
let isArray = Array.isArray(nodes);
|
||
let sumCount;
|
||
if (isArray) {
|
||
sumCount = nodes.reduce((acc, cur) => acc + cur.subEvents, 0);
|
||
} else {
|
||
sumCount = nodes.subEvents;
|
||
}
|
||
let width = sumCount * 100.0 / this.sumCount;
|
||
if (width < 0.1) {
|
||
return 0;
|
||
}
|
||
let children = isArray ? this.splitChildrenForNodes(nodes) : nodes.callStack;
|
||
let childDepth = 0;
|
||
if (children) {
|
||
for (let child of children) {
|
||
childDepth = Math.max(childDepth, this.getMaxDepth(child));
|
||
}
|
||
}
|
||
return childDepth + 1;
|
||
}
|
||
|
||
splitChildrenForNodes(nodes) {
|
||
let map = new Map();
|
||
for (let node of nodes) {
|
||
for (let child of node.callStack) {
|
||
let subNodes = map.get(child.symbol);
|
||
if (subNodes) {
|
||
subNodes.push(child);
|
||
} else {
|
||
map.set(child.symbol, [child]);
|
||
}
|
||
}
|
||
}
|
||
let res = [];
|
||
for (let subNodes of map.values()) {
|
||
res.push(subNodes.length == 1 ? subNodes[0] : subNodes);
|
||
}
|
||
return res;
|
||
}
|
||
|
||
getHeatColor(widthPercentage) {
|
||
return {
|
||
r: Math.floor(245 + 10 * (1 - widthPercentage * 0.01)),
|
||
g: Math.floor(110 + 105 * (1 - widthPercentage * 0.01)),
|
||
b: 100,
|
||
};
|
||
}
|
||
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
}
|
||
}
|
||
if (!customElements.get('app-normal-flame')) {
|
||
customElements.define('app-normal-flame', AppNormalFlame);
|
||
}
|
||
|
||
class AppFlameGraph extends HTMLElement {
|
||
static get observedAttributes() {
|
||
return ['color', 'size']
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
const shadowRoot = this.attachShadow({ mode: 'open' });
|
||
shadowRoot.innerHTML = `
|
||
<style>
|
||
:host{
|
||
font-size:inherit;
|
||
display:inline-flex;
|
||
align-items: center;
|
||
justify-content:center;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<div style="width: 100%;display: flex;flex-direction: column">
|
||
<lit-select id="typeSelect" default-value="1" mode="single" style="width:40vw;margin-bottom: 10px;align-self: flex-end">
|
||
<lit-select-option value="1">Show percentage of event count relative to the current thread</lit-select-option>
|
||
<lit-select-option value="2">Show percentage of event count relative to the current process</lit-select-option>
|
||
<lit-select-option value="3">Show percentage of event count relative to all process</lit-select-option>
|
||
<lit-select-option value="4">show event count</lit-select-option>
|
||
<lit-select-option value="5">show event count in milliseconds</lit-select-option>
|
||
</lit-select>
|
||
<div id="panel" style="width: 100%"></div>
|
||
</div>
|
||
<slot></slot>
|
||
`
|
||
}
|
||
|
||
get dataRefer() {
|
||
return this._dataRefer;
|
||
}
|
||
|
||
//设置比对的数据，【这里是json文件中加载的数据 需要从 recordSampleInfo[index] 取进程集合 线程集合】
|
||
set dataRefer(val) {
|
||
this._dataRefer = val;
|
||
}
|
||
|
||
get data() {
|
||
return this._json || null;
|
||
}
|
||
|
||
set data(json) {
|
||
//如果已经给过值，不重新刷新
|
||
if (this.isFinished) {
|
||
return;
|
||
}
|
||
this._json = json;
|
||
this.panel = this.shadowRoot.getElementById('panel');
|
||
this.panel.innerHTML = '';
|
||
let processes = json.recordSampleInfo[window.eventIndex].processes;
|
||
let processesRefer;
|
||
if (this.dataRefer) {
|
||
processesRefer = this.dataRefer.recordSampleInfo[window.eventIndex].processes;
|
||
}
|
||
processes.slice(0).forEach(it => {
|
||
let itRefer
|
||
if (processesRefer) {
|
||
itRefer = processesRefer.find(element => element.pid == it.pid);//找到要比较的进程
|
||
}
|
||
//slice(0,1) 控制只绘制一个线程数据，用作测试
|
||
it.threads.slice(0).forEach(th => {
|
||
let pid = it.pid;
|
||
let processName = json.processNameMap[it.pid];
|
||
let tid = th.tid;
|
||
let threadName = json.threadNameMap[th.tid];
|
||
let eventCount = th.eventCount;
|
||
let sampleCount = th.sampleCount;
|
||
let g = th.CallOrder;
|
||
if (this.dataRefer) {
|
||
console.log("create diff")
|
||
let thRefer;
|
||
if (itRefer) {
|
||
thRefer = itRefer.threads.find(e => e.tid == th.tid);//找到要比较的线程
|
||
}
|
||
let chart = document.createElement('app-diff-flame');
|
||
chart.style.width = '100%'
|
||
chart.style.height = 'auto';
|
||
chart.style.display = 'flex'
|
||
this.panel.appendChild(chart);
|
||
chart.threadRefer = thRefer;//注意 app-flame-graph中的dataRefer中保存的是加载的json完整数据集，app-chart-flame中的dataRefer缓存的是对比的线程数据
|
||
chart.data = {
|
||
json: json,//显示的json数据集【直接从json文件读取的完整json结构】
|
||
jsonRefer: this.dataRefer,//需要把完整的对比数据也传入过去，因为只传入thread对比数据需要 完整数据中的eventCount去计算百分比，计算宽度，然后对比原始宽度多还是少
|
||
type: this.type || 1,
|
||
pid, processName, tid, threadName, eventCount, sampleCount, CallOrder: g
|
||
}
|
||
} else {
|
||
console.log("create normal")
|
||
let chart = document.createElement('app-normal-flame');
|
||
chart.style.width = '100%'
|
||
chart.style.height = 'auto';
|
||
chart.style.display = 'flex'
|
||
this.panel.appendChild(chart);
|
||
chart.data = {
|
||
json: json,
|
||
type: this.type || 1,
|
||
pid, processName, tid, threadName, eventCount, sampleCount, CallOrder: g
|
||
}
|
||
}
|
||
// console.log(pid,processName,tid,threadName,sampleCount,g);
|
||
})
|
||
})
|
||
this.isFinished = true;
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.isFinished = false;
|
||
this.panel = this.shadowRoot.getElementById('panel');
|
||
this.typeSelect = this.shadowRoot.getElementById('typeSelect');
|
||
this.typeSelect.onchange = ev => {
|
||
this.type = parseInt(ev.detail.value);
|
||
this.isFinished = false;
|
||
this.data = this.data; //切换分类后刷新
|
||
}
|
||
}
|
||
|
||
attributeChangedCallback(name, oldValue, newValue) {
|
||
if (name == 'color' && this.loading) {
|
||
this.loading.style.color = newValue;
|
||
}
|
||
if (name == 'size' && this.loading) {
|
||
this.loading.style.fontSize = newValue + 'px';
|
||
}
|
||
}
|
||
}
|
||
if (!customElements.get('app-flame-graph')) {
|
||
customElements.define('app-flame-graph', AppFlameGraph);
|
||
}
|
||
|
||
(function (values) {
|
||
|
||
function createPromise(callback) {
|
||
if (callback) {
|
||
return new Promise((resolve, _) => callback(resolve));
|
||
}
|
||
return new Promise((resolve, _) => resolve());
|
||
}
|
||
|
||
function initGlobalObjects1() {
|
||
let recordData = document.querySelector('#record_data_diff_1').textContent;
|
||
if (recordData.trim().length > 0) {
|
||
return new Promise((resolve, reject) => {
|
||
resolve(JSON.parse(recordData));
|
||
})
|
||
} else {
|
||
return fetch('data-diff-1.json').then(response => response.json())
|
||
}
|
||
}
|
||
function initGlobalObjects2() {
|
||
let recordData = document.querySelector('#record_data_diff_2').textContent;
|
||
if (recordData.trim().length > 0) {
|
||
return new Promise((resolve, reject) => {
|
||
resolve(JSON.parse(recordData));
|
||
})
|
||
} else {
|
||
return fetch('data-diff-2.json').then(response => response.json())
|
||
}
|
||
}
|
||
|
||
function waitDocumentReady() {
|
||
return createPromise((resolve) => document.addEventListener("DOMContentLoaded", resolve));
|
||
}
|
||
|
||
createPromise()
|
||
.then(waitDocumentReady)
|
||
.then(() => Promise.all([initGlobalObjects1(), initGlobalObjects2()]))
|
||
.then((array) => {
|
||
let j1 = array[0]
|
||
let j2 = array[1]
|
||
// window.data = j1; // 没有用到function 模块 不用保存
|
||
let eventSelector1 = document.querySelector('#events1')
|
||
let changeBaseBt = document.querySelector('#changeBaseBt')
|
||
if (j1.recordSampleInfo && j1.recordSampleInfo.length > 0) {
|
||
let events = [];
|
||
j1.recordSampleInfo.forEach((e, index) => {
|
||
events.push({ key: index + '', val: e.eventConfigName })
|
||
})
|
||
eventSelector1.dataSource = events;
|
||
window.eventIndex = 0;
|
||
}
|
||
let loading = document.querySelector('#loading');
|
||
let tabs = document.querySelector('#tabs')
|
||
let diffFlame = document.querySelector('#diff-flame');
|
||
let flame1 = document.querySelector('#flame-1');
|
||
let flame2 = document.querySelector('#flame-2');
|
||
let legend1 = document.querySelector('#legend-1');
|
||
let legend2 = document.querySelector('#legend-2');
|
||
tabs.onTabClick = (e) => {
|
||
if (e.detail.key == 1) {
|
||
diffFlame.isFinished = false;
|
||
diffFlame.dataRefer = window.isReserved ? j1 : j2; //对换显示数据和对比数据
|
||
diffFlame.data = window.isReserved ? j2 : j1;//将 对比的数据当作显示数据
|
||
} else if (e.detail.key == 2) {
|
||
flame1.isFinished = false;
|
||
flame1.data = j1;
|
||
} else {
|
||
flame2.isFinished = false;
|
||
flame2.data = j2;
|
||
}
|
||
}
|
||
//火焰图
|
||
window.isReserved = false; //定义变量。表示是否反转基本画图数据，默认为false ,表示以 data-diff-1.json 数据图形数据，data-diff-2.json 为比较数据
|
||
diffFlame.isFinished = false;
|
||
diffFlame.dataRefer = j2; //设置需要对比的数据集，flame.data赋值会引起绘制，所以这行要先设置对比数据
|
||
diffFlame.data = j1;//要绘制火焰图需要显示的数据
|
||
eventSelector1.addEventListener('change', (e) => {
|
||
loading.style.display = 'flex'
|
||
window.eventIndex = parseInt(e.detail.value);//改变界面最上面的select 缓存的index刷新 绘制的数据需要这个index去总数据中取
|
||
diffFlame.isFinished = false;
|
||
diffFlame.dataRefer = j2;
|
||
diffFlame.data = j1;//这里触发了界面更新
|
||
flame1.isFinished = false;
|
||
flame1.data = j1;
|
||
flame2.isFinished = false;
|
||
flame2.data = j2;
|
||
loading.style.display = 'none'
|
||
})
|
||
changeBaseBt.addEventListener('click', (e) => {
|
||
window.isReserved = !window.isReserved
|
||
changeBaseBt.setAttribute('enable', 'false');
|
||
loading.style.display = 'flex'
|
||
legend1.textContent = window.isReserved ? "diff-data-2" : "diff-data-1";
|
||
legend2.textContent = window.isReserved ? "diff-data-1" : "diff-data-2";
|
||
diffFlame.isFinished = false;
|
||
diffFlame.dataRefer = window.isReserved ? j1 : j2; //对换显示数据和对比数据
|
||
diffFlame.data = window.isReserved ? j2 : j1;//将 对比的数据当作显示数据
|
||
loading.style.display = 'none'
|
||
changeBaseBt.setAttribute('enable', 'true');
|
||
})
|
||
})
|
||
}())
|
||
</script>
|
||
<div style="width: 100%;height: 100%">
|
||
<div style="width: 100%;display: flex;flex-direction: column;align-items: center">
|
||
<lit-loading id="loading" size="32" style="display: none"></lit-loading>
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;align-items: center;padding: 15px;justify-content: space-between">
|
||
<div>
|
||
<span style="font-weight: bold;margin-right: 10px">Event Type :</span>
|
||
<lit-select id="events1" default-value="0" style="width: 400px"></lit-select>
|
||
</div>
|
||
</div>
|
||
<lit-tabs id='tabs' position="top-left" activekey="1" mode="flat">
|
||
<lit-tabpane id="pane1" tab="diff-flame" key="1">
|
||
<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
|
||
<div style="display: flex;flex-direction: row;align-items: center">
|
||
<div style="display: flex;flex-direction: row;align-items: center">
|
||
<span>图形数据: </span>
|
||
<span id="legend-1">data-diff-1</span>
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;margin-left: 20px;align-items: center">
|
||
<span>比较数据: </span>
|
||
<span id="legend-2">data-diff-2</span>
|
||
</div>
|
||
<div id="changeBaseBt" style="background-color: coral;color: white;margin-left: 40px;
|
||
padding: 7px 15px 7px 15px;border-radius: 5px;cursor: pointer">change</div>
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;align-items: center">
|
||
<div style="display: flex;flex-direction: row;align-items: center">
|
||
<span style="width: 10px;height: 10px;background-color:#2894FF;margin-right: 10px"></span>
|
||
<span>函数执行时间相比小于（颜色越深则差值越大）</span>
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;align-items: center;margin-left: 30px">
|
||
<span style="width: 10px;height: 10px;background-color:#FF2D2D;margin-right: 10px"></span>
|
||
<span>函数执行时间相比大于（颜色越深则差值越大）</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding: 20px">
|
||
<app-flame-graph id="diff-flame"></app-flame-graph>
|
||
</div>
|
||
</lit-tabpane>
|
||
<lit-tabpane id="pane2" tab="data-1-flame" key="2">
|
||
<app-flame-graph id="flame-1"></app-flame-graph>
|
||
</lit-tabpane>
|
||
<lit-tabpane id="pane3" tab="data-2-flame" key="3">
|
||
<app-flame-graph id="flame-2"></app-flame-graph>
|
||
</lit-tabpane>
|
||
</lit-tabs>
|
||
</div>
|