web-comp-panels 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/components/index.cjs +1 -1
  2. package/lib/components/index.js +353 -1
  3. package/package.json +1 -1
package/lib/components/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";var t="data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%200L14.8072%205.1928H5.1928V14.8072L0%2020V0H20Z%22%20fill%3D%22url%28%23paint0_linear_8000_74493%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74493%22%20x1%3D%220.384614%22%20y1%3D%2220%22%20x2%3D%2219.6154%22%20y2%3D%220.769232%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231251A2%22%2F%3E%3Cstop%20offset%3D%220.489583%22%20stop-color%3D%22%233C91FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230E468E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E",e="data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206L20%2019.9899M20%206.01012L5%2020%22%20stroke%3D%22url%28%23paint0_linear_8000_74606%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74606%22%20x1%3D%2212.5%22%20y1%3D%226.0007%22%20x2%3D%2212.5%22%20y2%3D%2220.0005%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23C6E0FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C6E0FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";class n extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titletext","leadline","formdata"]}attributeChangedCallback(t,e,n){this.render()}render(){const n=document.createElement("style");n.innerHTML=`\n .panel-template {\n position: absolute;\n background: url('data:image/jpeg;base64,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') 100% 100% no-repeat;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 20px 30px;\n width: 370px;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n display: flex;\n justify-content: space-between;\n font-size: 20px;\n margin-bottom: 18px;\n text-shadow: 0 2px 2px rgba(17, 64, 108, 0.5);\n background: linear-gradient(180deg, #fff 0%, #348dff 100%);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .panel-template .header .close img{\n width: 26px;\n height: 26px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: linear-gradient(90deg, #2261ab 0%, rgba(34, 97, 171, 0.2) 109.71%);\n font-size: 16px;\n line-height: 18px;\n padding: 7px 8px 7px 16px;\n }\n .panel-template .content .content-left{\n display: flex;\n align-items: center;\n color: #b4d0ff;\n width: calc(100% - 14px);\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n flex-shrink: 0;\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #fff;\n margin: 0 6px;\n }\n `;const a=this.getAttribute("titleText"),i=document.createElement("div"),l=this.getLeadLineClass(i);i.className="panel-template",i.innerHTML=`\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <div class="top-line">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%22202%22%20height%3D%227%22%20viewBox%3D%220%200%20202%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_i_8000_74495%29%22%3E%3Cpath%20d%3D%22M0%200L7.37065%207H194.629L202%200H0Z%22%20fill%3D%22url%28%23paint0_linear_8000_74495%29%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_i_8000_74495%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22202%22%20height%3D%227%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22arithmetic%22%20k2%3D%22-1%22%20k3%3D%221%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.5%200%22%2F%3E%3CfeBlend%20mode%3D%22overlay%22%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_8000_74495%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74495%22%20x1%3D%22116%22%20y1%3D%227%22%20x2%3D%22116%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BAD9FF%22%2F%3E%3Cstop%20offset%3D%220.578125%22%20stop-color%3D%22%23144887%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23062C5E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E" style="min-width: 120px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${a}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n `,this.appendContent(i),this.shadowRoot.innerHTML=n.outerHTML+i.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(t){const e=this.getAttribute("leadLine")||"middle";switch(e){case"middle":t.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":t.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":t.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":t.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":t.style.transform=`translate(-100%, -100%) translate(-45px, -${this.width/Math.sqrt(2)}px)`}return{middle:"middle",leftMiddle:"left-middle",rightMiddle:"right-middle",leftBottom:"left-bottom",rightBottom:"right-bottom"}[e]}appendContent(t){const e=JSON.parse(this.getAttribute("formData"));if(!(null==e?void 0:e.length))return;const n=e.map(t=>{const e=document.createElement("span");e.className="label",e.style.fontSize="16px",e.textContent=t.name,this.shadowRoot.appendChild(e);const n=e.getBoundingClientRect().width;return this.shadowRoot.removeChild(e),Object.assign(t,{dom:e,domWidth:n})}),a=Math.max.apply(null,n.map(t=>t.domWidth));n.forEach(e=>{e.dom.style.marginLeft=(a-e.domWidth).toFixed(2)+"px";const n=document.createElement("div");n.className="content",n.innerHTML=`\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2013L2.9112%206.52941L0%200L13%206.52941L0%2013Z%22%20fill%3D%22url%28%23paint0_linear_8000_74588%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74588%22%20x1%3D%220.433333%22%20y1%3D%227%22%20x2%3D%2212.5705%22%20y2%3D%226.62433%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2337FFE7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23DDFFFD%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n ${e.dom.outerHTML}：\n <span class="value ellipsis" title="${e.value}">${e.value}</span>\n </div>\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.22266%207.83008L0%2015.6602V12.0645L0.783203%2013.1084L7.00391%207.83008L0.783203%202.55176L0%203.625V0L9.22266%207.83008ZM2.50879%207.77246L0%209.88965V5.64062L2.50879%207.77246Z%22%20fill%3D%22url%28%23paint0_linear_8000_74593%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74593%22%20x1%3D%22-2.05227e-07%22%20y1%3D%227.99987%22%20x2%3D%229.00048%22%20y2%3D%227.99988%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237AB6FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BDDBFF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n `,t.appendChild(n)})}}n.localName="data-panel1";var a="data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M25%201H1V25%22%20stroke%3D%22%2316B2FF%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",i="data:image/svg+xml,%3Csvg%20width%3D%2262%22%20height%3D%222%22%20viewBox%3D%220%200%2062%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H62L59%202H3L0%200Z%22%20fill%3D%22%2316B2FF%22%2F%3E%3C%2Fsvg%3E";class l extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}static get observedAttributes(){return["titleyext","leadline","formdata","anchorwidth","anchorheight"]}attributeChangedCallback(t,e,n){this.render()}render(){const t=document.createElement("style");t.innerHTML=`\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding: 0 10px 10px;\n color: #fff;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n line-height: 24px;\n padding: 5px 0;\n margin-bottom: 10px;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n \n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n line-height: 22px;\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\n flex-shrink: 0;\n align-items: center;\n color: #b4d0ff;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n flex: auto;\n padding-left: 4px;\n text-align: right;\n color: #A4FFFF;\n }\n `;const e=this.getAttribute("titleText"),n=document.createElement("div"),l=this.getLeadLineClass(n);n.className="panel-template",n.innerHTML=`\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${e}</span>\n </div>\n `,this.appendContent(n),this.shadowRoot.innerHTML=t.outerHTML+n.outerHTML}close(){this.style.display="none"}getLeadLineClass(t){const e=this.getAttribute("leadLine")||"middle",n=Number(this.getAttribute("anchorWidth")||24),a=Number(this.getAttribute("anchorHeight")||24);switch(e){case"middle":t.style.transform=`translate(-50%, -100%) translate(${n/2}px, -${this.width}px)`;break;case"leftMiddle":t.style.transform=`translate(${n+this.width}px, -50%) translate(0px, ${a/2}px)`;break;case"rightMiddle":t.style.transform=`translate(-100%, -50%) translate(-${this.width}px, ${a/2}px)`;break;case"leftBottom":t.style.transform=`translate(${n+this.width/Math.sqrt(2)}px, -100%) translate(0, -${this.width/Math.sqrt(2)-a/2}px)`;break;case"rightBottom":t.style.transform=`translate(-100%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)-a/2}px)`}return{middle:"middle",leftMiddle:"left-middle",rightMiddle:"right-middle",leftBottom:"left-bottom",rightBottom:"right-bottom"}[e]}appendContent(t){const e=JSON.parse(this.getAttribute("formData"));(null==e?void 0:e.length)&&e.forEach(e=>{const n=document.createElement("div");n.className="content",n.innerHTML=`\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20opacity%3D%220.4%22%20d%3D%22M14%206L6.5%2011.1962L6.5%200.803847L14%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3Cpath%20d%3D%22M10%206L2.5%2011.1962L2.5%200.803847L10%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3C%2Fsvg%3E"/>\n <span class="label">${e.name}</span>\n </div>\n <div class="value ellipsis" title="${e.value}">${e.value}</div>\n `,t.appendChild(n)})}}l.localName="data-panel2";class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}static get observedAttributes(){return["text","textstyle"]}attributeChangedCallback(){this.render()}render(){const t=document.createElement("style"),e=this.getAttribute("textstyle")||"{}",{backgroundColor:n="#0e488e",backgroundOpacity:a=1,borderColor:i="#0e488e",borderWidth:l=1,color:o="#fff"}=JSON.parse(e),r=this.hexToRgba(n);t.innerHTML=`\n .panel-template {\n position: absolute;\n background: rgba(${r}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n width: max-content;\n max-width: 220px;\n --line-height: 10px;\n }\n `;const s=Number(this.getAttribute("anchorWidth")||24);Number(this.getAttribute("anchorHeight")||24);const p=this.getAttribute("text"),d=document.createElement("div");d.className="panel-template",d.innerHTML=`\n <div title="${p}">\n <span>${p}</span>\n </div>\n `,d.style.transform=`translate(-50%, -100%) translate(${s/2}px, -10px)`,this.shadowRoot.innerHTML=t.outerHTML+d.outerHTML}hexToRgba(t){if(3===(t=null==t?void 0:t.trim().replace(/^#/,"")).length&&(t=t.split("").map(t=>t+t).join("")),6!==t.length||!/^[0-9A-Fa-f]+$/.test(t))throw new Error("Invalid hex color format");return`${parseInt(t.slice(0,2),16)}, ${parseInt(t.slice(2,4),16)}, ${parseInt(t.slice(4,6),16)}`}}o.localName="text-panel1";class r extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titletext","videourl"]}attributeChangedCallback(t,e,n){this.render()}render(){const t=document.createElement("style");t.innerHTML="\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding-top: 3px;\n color: #fff;\n --header-height: 34px;\n --line-height: 80px;\n }\n .panel-template .bottom-line{\n width: 1px;\n height: var(--line-height);\n position: absolute;\n bottom: -80px;\n left: 50%;\n background: #3666BC;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n height: var(--header-height);\n line-height: var(--header-height);\n // border-top: 1px solid #16B2FF;\n // border-bottom: 1px solid #16B2FF;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 12px;\n padding: 6px;\n }\n ";const n=Number(this.getAttribute("anchorWidth")||24);Number(this.getAttribute("anchorHeight")||24);const l=this.getAttribute("titleText"),o=this.getAttribute("videoUrl")||"https://player.alicdn.com/video/aliyunmedia.mp4",r=document.createElement("div");r.className="panel-template",r.innerHTML=`\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line"></div>\n <div class="header">\n <span>${l}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${o}>\n </video>\n </div>\n `,r.style.transform=`translate(-50%, -100%) translate(${n/2}px, -${this.width}px)`,this.shadowRoot.innerHTML=t.outerHTML+r.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}}r.localName="video-panel1";class s extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(t,e,n){console.log("attributeChangedCallback",t,e,n)}render(){const t=document.createElement("style"),e=this.hexToRgba(this.getAttribute("color")),n=Number(this.getAttribute("speed")),a=30*Number(this.getAttribute("radius")),i="30px",l=a/8;t.innerHTML=`\n .ripple-container {\n position: relative;\n width: ${a}px;\n height: ${a}px;\n transform: scale(10);\n }\n .alarm-pulse, .alarm-core {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n }\n /* 中心点（核心） */\n .alarm-core {\n width: 6px;\n height: 6px;\n background: rgba(${e}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/n}s;\n box-shadow: 0 0 ${i} ${l/2}px rgba(${e}, 0.6);\n width: ${a/4}px;\n height: ${a/4}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${2/n}s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.4);\n width: ${a/2}px;\n height: ${a/2}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${3/n}s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.2);\n width: ${a}px;\n height: ${a}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n @keyframes ripple-animation {\n 0% {\n transform: translate(-50%, -50%) scale(0.5);\n }\n 100% {\n transform: translate(-50%, -50%) scale(1);\n }\n }\n `;const o=document.createElement("div");o.className="ripple-container",o.innerHTML='\n <div class="alarm-core"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n ',this.shadowRoot.appendChild(t),this.shadowRoot.appendChild(o)}hexToRgba(t){if(3===(t=null==t?void 0:t.trim().replace(/^#/,"")).length&&(t=t.split("").map(t=>t+t).join("")),6!==t.length||!/^[0-9A-Fa-f]+$/.test(t))throw new Error("Invalid hex color format");return`${parseInt(t.slice(0,2),16)}, ${parseInt(t.slice(2,4),16)}, ${parseInt(t.slice(4,6),16)}`}}s.localName="alarm-marker",s.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",s);[n,l,o,r,s].forEach(t=>{window.customElements.get(t.localName)?console.warn(`${t.localName} already defined`):window.customElements.define(t.localName,t)});
1
+ "use strict";var t="data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%200L14.8072%205.1928H5.1928V14.8072L0%2020V0H20Z%22%20fill%3D%22url%28%23paint0_linear_8000_74493%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74493%22%20x1%3D%220.384614%22%20y1%3D%2220%22%20x2%3D%2219.6154%22%20y2%3D%220.769232%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231251A2%22%2F%3E%3Cstop%20offset%3D%220.489583%22%20stop-color%3D%22%233C91FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230E468E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E",e="data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206L20%2019.9899M20%206.01012L5%2020%22%20stroke%3D%22url%28%23paint0_linear_8000_74606%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74606%22%20x1%3D%2212.5%22%20y1%3D%226.0007%22%20x2%3D%2212.5%22%20y2%3D%2220.0005%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23C6E0FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C6E0FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";class n extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titletext","leadline","formdata","anchorwidth","anchorheight"]}attributeChangedCallback(t,e,n){this.render()}render(){const n=document.createElement("style");n.innerHTML=`\n .panel-template {\n position: absolute;\n background: url('data:image/jpeg;base64,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') 100% 100% no-repeat;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 20px 30px;\n width: 370px;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n display: flex;\n justify-content: space-between;\n font-size: 20px;\n margin-bottom: 18px;\n text-shadow: 0 2px 2px rgba(17, 64, 108, 0.5);\n background: linear-gradient(180deg, #fff 0%, #348dff 100%);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .panel-template .header .close img{\n width: 26px;\n height: 26px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: linear-gradient(90deg, #2261ab 0%, rgba(34, 97, 171, 0.2) 109.71%);\n font-size: 16px;\n line-height: 18px;\n padding: 7px 8px 7px 16px;\n }\n .panel-template .content .content-left{\n display: flex;\n align-items: center;\n color: #b4d0ff;\n width: calc(100% - 14px);\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n flex-shrink: 0;\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #fff;\n margin: 0 6px;\n }\n `;const a=this.getAttribute("titleText"),i=document.createElement("div"),l=this.getLeadLineClass(i);i.className="panel-template",i.innerHTML=`\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <div class="top-line">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%22202%22%20height%3D%227%22%20viewBox%3D%220%200%20202%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_i_8000_74495%29%22%3E%3Cpath%20d%3D%22M0%200L7.37065%207H194.629L202%200H0Z%22%20fill%3D%22url%28%23paint0_linear_8000_74495%29%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_i_8000_74495%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22202%22%20height%3D%227%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22arithmetic%22%20k2%3D%22-1%22%20k3%3D%221%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.5%200%22%2F%3E%3CfeBlend%20mode%3D%22overlay%22%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_8000_74495%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74495%22%20x1%3D%22116%22%20y1%3D%227%22%20x2%3D%22116%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BAD9FF%22%2F%3E%3Cstop%20offset%3D%220.578125%22%20stop-color%3D%22%23144887%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23062C5E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E" style="min-width: 120px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${a}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n `,this.appendContent(i),this.shadowRoot.innerHTML=n.outerHTML+i.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(t){const e=this.getAttribute("leadLine")||"middle",n=Number(this.getAttribute("anchorWidth")||24),a=Number(this.getAttribute("anchorHeight")||24);switch(e){case"middle":t.style.transform=`translate(-50%, -100%) translate(${n/2}px, -${this.width}px)`;break;case"leftMiddle":t.style.transform=`translate(${n+this.width}px, -50%) translate(0px, ${a/2}px)`;break;case"rightMiddle":t.style.transform=`translate(-100%, -50%) translate(-${this.width}px, ${a/2}px)`;break;case"leftBottom":t.style.transform=`translate(${n+this.width/Math.sqrt(2)}px, -100%) translate(0, -${this.width/Math.sqrt(2)-a/2}px)`;break;case"rightBottom":t.style.transform=`translate(-100%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)-a/2}px)`}return{middle:"middle",leftMiddle:"left-middle",rightMiddle:"right-middle",leftBottom:"left-bottom",rightBottom:"right-bottom"}[e]}appendContent(t){const e=JSON.parse(this.getAttribute("formData"));if(!(null==e?void 0:e.length))return;const n=e.map(t=>{const e=document.createElement("span");e.className="label",e.style.fontSize="16px",e.textContent=t.name,this.shadowRoot.appendChild(e);const n=e.getBoundingClientRect().width;return this.shadowRoot.removeChild(e),Object.assign(t,{dom:e,domWidth:n})}),a=Math.max.apply(null,n.map(t=>t.domWidth));n.forEach(e=>{e.dom.style.marginLeft=(a-e.domWidth).toFixed(2)+"px";const n=document.createElement("div");n.className="content",n.innerHTML=`\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2013L2.9112%206.52941L0%200L13%206.52941L0%2013Z%22%20fill%3D%22url%28%23paint0_linear_8000_74588%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74588%22%20x1%3D%220.433333%22%20y1%3D%227%22%20x2%3D%2212.5705%22%20y2%3D%226.62433%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2337FFE7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23DDFFFD%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n ${e.dom.outerHTML}：\n <span class="value ellipsis" title="${e.value}">${e.value}</span>\n </div>\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.22266%207.83008L0%2015.6602V12.0645L0.783203%2013.1084L7.00391%207.83008L0.783203%202.55176L0%203.625V0L9.22266%207.83008ZM2.50879%207.77246L0%209.88965V5.64062L2.50879%207.77246Z%22%20fill%3D%22url%28%23paint0_linear_8000_74593%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74593%22%20x1%3D%22-2.05227e-07%22%20y1%3D%227.99987%22%20x2%3D%229.00048%22%20y2%3D%227.99988%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237AB6FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BDDBFF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n `,t.appendChild(n)})}}n.localName="data-panel1";var a="data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M25%201H1V25%22%20stroke%3D%22%2316B2FF%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",i="data:image/svg+xml,%3Csvg%20width%3D%2262%22%20height%3D%222%22%20viewBox%3D%220%200%2062%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H62L59%202H3L0%200Z%22%20fill%3D%22%2316B2FF%22%2F%3E%3C%2Fsvg%3E";class l extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}static get observedAttributes(){return["titleyext","leadline","formdata","anchorwidth","anchorheight"]}attributeChangedCallback(t,e,n){this.render()}render(){const t=document.createElement("style");t.innerHTML=`\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding: 0 10px 10px;\n color: #fff;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n line-height: 24px;\n padding: 5px 0;\n margin-bottom: 10px;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n \n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n line-height: 22px;\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\n flex-shrink: 0;\n align-items: center;\n color: #b4d0ff;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n flex: auto;\n padding-left: 4px;\n text-align: right;\n color: #A4FFFF;\n }\n `;const e=this.getAttribute("titleText"),n=document.createElement("div"),l=this.getLeadLineClass(n);n.className="panel-template",n.innerHTML=`\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${e}</span>\n </div>\n `,this.appendContent(n),this.shadowRoot.innerHTML=t.outerHTML+n.outerHTML}close(){this.style.display="none"}getLeadLineClass(t){const e=this.getAttribute("leadLine")||"middle",n=Number(this.getAttribute("anchorWidth")||24),a=Number(this.getAttribute("anchorHeight")||24);switch(e){case"middle":t.style.transform=`translate(-50%, -100%) translate(${n/2}px, -${this.width}px)`;break;case"leftMiddle":t.style.transform=`translate(${n+this.width}px, -50%) translate(0px, ${a/2}px)`;break;case"rightMiddle":t.style.transform=`translate(-100%, -50%) translate(-${this.width}px, ${a/2}px)`;break;case"leftBottom":t.style.transform=`translate(${n+this.width/Math.sqrt(2)}px, -100%) translate(0, -${this.width/Math.sqrt(2)-a/2}px)`;break;case"rightBottom":t.style.transform=`translate(-100%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)-a/2}px)`}return{middle:"middle",leftMiddle:"left-middle",rightMiddle:"right-middle",leftBottom:"left-bottom",rightBottom:"right-bottom"}[e]}appendContent(t){const e=JSON.parse(this.getAttribute("formData"));(null==e?void 0:e.length)&&e.forEach(e=>{const n=document.createElement("div");n.className="content",n.innerHTML=`\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20opacity%3D%220.4%22%20d%3D%22M14%206L6.5%2011.1962L6.5%200.803847L14%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3Cpath%20d%3D%22M10%206L2.5%2011.1962L2.5%200.803847L10%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3C%2Fsvg%3E"/>\n <span class="label">${e.name}</span>\n </div>\n <div class="value ellipsis" title="${e.value}">${e.value}</div>\n `,t.appendChild(n)})}}l.localName="data-panel2";class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}static get observedAttributes(){return["text","textstyle","anchorwidth"]}attributeChangedCallback(){this.render()}render(){const t=document.createElement("style"),e=this.getAttribute("textstyle")||"{}",{backgroundColor:n="#0e488e",backgroundOpacity:a=1,borderColor:i="#0e488e",borderWidth:l=1,color:o="#fff"}=JSON.parse(e),r=this.hexToRgba(n);t.innerHTML=`\n .panel-template {\n position: absolute;\n background: rgba(${r}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n width: max-content;\n max-width: 220px;\n --line-height: 10px;\n }\n `;const s=Number(this.getAttribute("anchorWidth")||24),p=this.getAttribute("text"),d=document.createElement("div");d.className="panel-template",d.innerHTML=`\n <div title="${p}">\n <span>${p}</span>\n </div>\n `,d.style.transform=`translate(-50%, -100%) translate(${s/2}px, -10px)`,this.shadowRoot.innerHTML=t.outerHTML+d.outerHTML}hexToRgba(t){if(3===(t=null==t?void 0:t.trim().replace(/^#/,"")).length&&(t=t.split("").map(t=>t+t).join("")),6!==t.length||!/^[0-9A-Fa-f]+$/.test(t))throw new Error("Invalid hex color format");return`${parseInt(t.slice(0,2),16)}, ${parseInt(t.slice(2,4),16)}, ${parseInt(t.slice(4,6),16)}`}}o.localName="text-panel1";class r extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titletext","videourl","anchorwidth"]}attributeChangedCallback(t,e,n){this.render()}render(){const t=document.createElement("style");t.innerHTML="\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding-top: 3px;\n color: #fff;\n --header-height: 34px;\n --line-height: 80px;\n }\n .panel-template .bottom-line{\n width: 1px;\n height: var(--line-height);\n position: absolute;\n bottom: -80px;\n left: 50%;\n background: #3666BC;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n height: var(--header-height);\n line-height: var(--header-height);\n // border-top: 1px solid #16B2FF;\n // border-bottom: 1px solid #16B2FF;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 12px;\n padding: 6px;\n }\n ";const n=Number(this.getAttribute("anchorWidth")||24),l=this.getAttribute("titleText"),o=this.getAttribute("videoUrl")||"https://player.alicdn.com/video/aliyunmedia.mp4",r=document.createElement("div");r.className="panel-template",r.innerHTML=`\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line"></div>\n <div class="header">\n <span>${l}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${o}>\n </video>\n </div>\n `,r.style.transform=`translate(-50%, -100%) translate(${n/2}px, -10px)`,this.shadowRoot.innerHTML=t.outerHTML+r.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}}r.localName="video-panel1";class s extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(t,e,n){console.log("attributeChangedCallback",t,e,n)}render(){const t=document.createElement("style"),e=this.hexToRgba(this.getAttribute("color")),n=Number(this.getAttribute("speed")),a=30*Number(this.getAttribute("radius")),i="30px",l=a/8;t.innerHTML=`\n .ripple-container {\n position: relative;\n width: ${a}px;\n height: ${a}px;\n transform: scale(10);\n }\n .alarm-pulse, .alarm-core {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n }\n /* 中心点（核心） */\n .alarm-core {\n width: 6px;\n height: 6px;\n background: rgba(${e}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/n}s;\n box-shadow: 0 0 ${i} ${l/2}px rgba(${e}, 0.6);\n width: ${a/4}px;\n height: ${a/4}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${2/n}s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.4);\n width: ${a/2}px;\n height: ${a/2}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${3/n}s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.2);\n width: ${a}px;\n height: ${a}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n @keyframes ripple-animation {\n 0% {\n transform: translate(-50%, -50%) scale(0.5);\n }\n 100% {\n transform: translate(-50%, -50%) scale(1);\n }\n }\n `;const o=document.createElement("div");o.className="ripple-container",o.innerHTML='\n <div class="alarm-core"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n ',this.shadowRoot.appendChild(t),this.shadowRoot.appendChild(o)}hexToRgba(t){if(3===(t=null==t?void 0:t.trim().replace(/^#/,"")).length&&(t=t.split("").map(t=>t+t).join("")),6!==t.length||!/^[0-9A-Fa-f]+$/.test(t))throw new Error("Invalid hex color format");return`${parseInt(t.slice(0,2),16)}, ${parseInt(t.slice(2,4),16)}, ${parseInt(t.slice(4,6),16)}`}}s.localName="alarm-marker",s.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",s);[n,l,o,r,s].forEach(t=>{window.customElements.get(t.localName)?console.warn(`${t.localName} already defined`):window.customElements.define(t.localName,t)});
package/lib/components/index.js CHANGED
@@ -1 +1,353 @@
1
- var t="data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%200L14.8072%205.1928H5.1928V14.8072L0%2020V0H20Z%22%20fill%3D%22url%28%23paint0_linear_8000_74493%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74493%22%20x1%3D%220.384614%22%20y1%3D%2220%22%20x2%3D%2219.6154%22%20y2%3D%220.769232%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231251A2%22%2F%3E%3Cstop%20offset%3D%220.489583%22%20stop-color%3D%22%233C91FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230E468E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E",e="data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206L20%2019.9899M20%206.01012L5%2020%22%20stroke%3D%22url%28%23paint0_linear_8000_74606%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74606%22%20x1%3D%2212.5%22%20y1%3D%226.0007%22%20x2%3D%2212.5%22%20y2%3D%2220.0005%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23C6E0FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C6E0FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";class n extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titletext","leadline","formdata"]}attributeChangedCallback(t,e,n){this.render()}render(){const n=document.createElement("style");n.innerHTML=`\n .panel-template {\n position: absolute;\n background: url('data:image/jpeg;base64,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') 100% 100% no-repeat;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 20px 30px;\n width: 370px;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n display: flex;\n justify-content: space-between;\n font-size: 20px;\n margin-bottom: 18px;\n text-shadow: 0 2px 2px rgba(17, 64, 108, 0.5);\n background: linear-gradient(180deg, #fff 0%, #348dff 100%);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .panel-template .header .close img{\n width: 26px;\n height: 26px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: linear-gradient(90deg, #2261ab 0%, rgba(34, 97, 171, 0.2) 109.71%);\n font-size: 16px;\n line-height: 18px;\n padding: 7px 8px 7px 16px;\n }\n .panel-template .content .content-left{\n display: flex;\n align-items: center;\n color: #b4d0ff;\n width: calc(100% - 14px);\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n flex-shrink: 0;\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #fff;\n margin: 0 6px;\n }\n `;const a=this.getAttribute("titleText"),i=document.createElement("div"),l=this.getLeadLineClass(i);i.className="panel-template",i.innerHTML=`\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <div class="top-line">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%22202%22%20height%3D%227%22%20viewBox%3D%220%200%20202%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_i_8000_74495%29%22%3E%3Cpath%20d%3D%22M0%200L7.37065%207H194.629L202%200H0Z%22%20fill%3D%22url%28%23paint0_linear_8000_74495%29%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_i_8000_74495%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22202%22%20height%3D%227%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22arithmetic%22%20k2%3D%22-1%22%20k3%3D%221%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.5%200%22%2F%3E%3CfeBlend%20mode%3D%22overlay%22%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_8000_74495%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74495%22%20x1%3D%22116%22%20y1%3D%227%22%20x2%3D%22116%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BAD9FF%22%2F%3E%3Cstop%20offset%3D%220.578125%22%20stop-color%3D%22%23144887%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23062C5E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E" style="min-width: 120px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${a}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n `,this.appendContent(i),this.shadowRoot.innerHTML=n.outerHTML+i.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(t){const e=this.getAttribute("leadLine")||"middle";switch(e){case"middle":t.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":t.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":t.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":t.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":t.style.transform=`translate(-100%, -100%) translate(-45px, -${this.width/Math.sqrt(2)}px)`}return{middle:"middle",leftMiddle:"left-middle",rightMiddle:"right-middle",leftBottom:"left-bottom",rightBottom:"right-bottom"}[e]}appendContent(t){const e=JSON.parse(this.getAttribute("formData"));if(!(null==e?void 0:e.length))return;const n=e.map(t=>{const e=document.createElement("span");e.className="label",e.style.fontSize="16px",e.textContent=t.name,this.shadowRoot.appendChild(e);const n=e.getBoundingClientRect().width;return this.shadowRoot.removeChild(e),Object.assign(t,{dom:e,domWidth:n})}),a=Math.max.apply(null,n.map(t=>t.domWidth));n.forEach(e=>{e.dom.style.marginLeft=(a-e.domWidth).toFixed(2)+"px";const n=document.createElement("div");n.className="content",n.innerHTML=`\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2013L2.9112%206.52941L0%200L13%206.52941L0%2013Z%22%20fill%3D%22url%28%23paint0_linear_8000_74588%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74588%22%20x1%3D%220.433333%22%20y1%3D%227%22%20x2%3D%2212.5705%22%20y2%3D%226.62433%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2337FFE7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23DDFFFD%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n ${e.dom.outerHTML}：\n <span class="value ellipsis" title="${e.value}">${e.value}</span>\n </div>\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.22266%207.83008L0%2015.6602V12.0645L0.783203%2013.1084L7.00391%207.83008L0.783203%202.55176L0%203.625V0L9.22266%207.83008ZM2.50879%207.77246L0%209.88965V5.64062L2.50879%207.77246Z%22%20fill%3D%22url%28%23paint0_linear_8000_74593%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74593%22%20x1%3D%22-2.05227e-07%22%20y1%3D%227.99987%22%20x2%3D%229.00048%22%20y2%3D%227.99988%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237AB6FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BDDBFF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n `,t.appendChild(n)})}}n.localName="data-panel1";var a="data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M25%201H1V25%22%20stroke%3D%22%2316B2FF%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",i="data:image/svg+xml,%3Csvg%20width%3D%2262%22%20height%3D%222%22%20viewBox%3D%220%200%2062%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H62L59%202H3L0%200Z%22%20fill%3D%22%2316B2FF%22%2F%3E%3C%2Fsvg%3E";class l extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}static get observedAttributes(){return["titleyext","leadline","formdata","anchorwidth","anchorheight"]}attributeChangedCallback(t,e,n){this.render()}render(){const t=document.createElement("style");t.innerHTML=`\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding: 0 10px 10px;\n color: #fff;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n line-height: 24px;\n padding: 5px 0;\n margin-bottom: 10px;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n \n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n line-height: 22px;\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\n flex-shrink: 0;\n align-items: center;\n color: #b4d0ff;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n flex: auto;\n padding-left: 4px;\n text-align: right;\n color: #A4FFFF;\n }\n `;const e=this.getAttribute("titleText"),n=document.createElement("div"),l=this.getLeadLineClass(n);n.className="panel-template",n.innerHTML=`\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${e}</span>\n </div>\n `,this.appendContent(n),this.shadowRoot.innerHTML=t.outerHTML+n.outerHTML}close(){this.style.display="none"}getLeadLineClass(t){const e=this.getAttribute("leadLine")||"middle",n=Number(this.getAttribute("anchorWidth")||24),a=Number(this.getAttribute("anchorHeight")||24);switch(e){case"middle":t.style.transform=`translate(-50%, -100%) translate(${n/2}px, -${this.width}px)`;break;case"leftMiddle":t.style.transform=`translate(${n+this.width}px, -50%) translate(0px, ${a/2}px)`;break;case"rightMiddle":t.style.transform=`translate(-100%, -50%) translate(-${this.width}px, ${a/2}px)`;break;case"leftBottom":t.style.transform=`translate(${n+this.width/Math.sqrt(2)}px, -100%) translate(0, -${this.width/Math.sqrt(2)-a/2}px)`;break;case"rightBottom":t.style.transform=`translate(-100%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)-a/2}px)`}return{middle:"middle",leftMiddle:"left-middle",rightMiddle:"right-middle",leftBottom:"left-bottom",rightBottom:"right-bottom"}[e]}appendContent(t){const e=JSON.parse(this.getAttribute("formData"));(null==e?void 0:e.length)&&e.forEach(e=>{const n=document.createElement("div");n.className="content",n.innerHTML=`\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20opacity%3D%220.4%22%20d%3D%22M14%206L6.5%2011.1962L6.5%200.803847L14%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3Cpath%20d%3D%22M10%206L2.5%2011.1962L2.5%200.803847L10%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3C%2Fsvg%3E"/>\n <span class="label">${e.name}</span>\n </div>\n <div class="value ellipsis" title="${e.value}">${e.value}</div>\n `,t.appendChild(n)})}}l.localName="data-panel2";class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}static get observedAttributes(){return["text","textstyle"]}attributeChangedCallback(){this.render()}render(){const t=document.createElement("style"),e=this.getAttribute("textstyle")||"{}",{backgroundColor:n="#0e488e",backgroundOpacity:a=1,borderColor:i="#0e488e",borderWidth:l=1,color:o="#fff"}=JSON.parse(e),r=this.hexToRgba(n);t.innerHTML=`\n .panel-template {\n position: absolute;\n background: rgba(${r}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n width: max-content;\n max-width: 220px;\n --line-height: 10px;\n }\n `;const s=Number(this.getAttribute("anchorWidth")||24);Number(this.getAttribute("anchorHeight")||24);const p=this.getAttribute("text"),d=document.createElement("div");d.className="panel-template",d.innerHTML=`\n <div title="${p}">\n <span>${p}</span>\n </div>\n `,d.style.transform=`translate(-50%, -100%) translate(${s/2}px, -10px)`,this.shadowRoot.innerHTML=t.outerHTML+d.outerHTML}hexToRgba(t){if(3===(t=null==t?void 0:t.trim().replace(/^#/,"")).length&&(t=t.split("").map(t=>t+t).join("")),6!==t.length||!/^[0-9A-Fa-f]+$/.test(t))throw new Error("Invalid hex color format");return`${parseInt(t.slice(0,2),16)}, ${parseInt(t.slice(2,4),16)}, ${parseInt(t.slice(4,6),16)}`}}o.localName="text-panel1";class r extends HTMLElement{constructor(){super(),this.width=80,this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titletext","videourl"]}attributeChangedCallback(t,e,n){this.render()}render(){const t=document.createElement("style");t.innerHTML="\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding-top: 3px;\n color: #fff;\n --header-height: 34px;\n --line-height: 80px;\n }\n .panel-template .bottom-line{\n width: 1px;\n height: var(--line-height);\n position: absolute;\n bottom: -80px;\n left: 50%;\n background: #3666BC;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n height: var(--header-height);\n line-height: var(--header-height);\n // border-top: 1px solid #16B2FF;\n // border-bottom: 1px solid #16B2FF;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 12px;\n padding: 6px;\n }\n ";const n=Number(this.getAttribute("anchorWidth")||24);Number(this.getAttribute("anchorHeight")||24);const l=this.getAttribute("titleText"),o=this.getAttribute("videoUrl")||"https://player.alicdn.com/video/aliyunmedia.mp4",r=document.createElement("div");r.className="panel-template",r.innerHTML=`\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line"></div>\n <div class="header">\n <span>${l}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${o}>\n </video>\n </div>\n `,r.style.transform=`translate(-50%, -100%) translate(${n/2}px, -${this.width}px)`,this.shadowRoot.innerHTML=t.outerHTML+r.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}}r.localName="video-panel1";class s extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(t,e,n){console.log("attributeChangedCallback",t,e,n)}render(){const t=document.createElement("style"),e=this.hexToRgba(this.getAttribute("color")),n=Number(this.getAttribute("speed")),a=30*Number(this.getAttribute("radius")),i="30px",l=a/8;t.innerHTML=`\n .ripple-container {\n position: relative;\n width: ${a}px;\n height: ${a}px;\n transform: scale(10);\n }\n .alarm-pulse, .alarm-core {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n }\n /* 中心点（核心） */\n .alarm-core {\n width: 6px;\n height: 6px;\n background: rgba(${e}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/n}s;\n box-shadow: 0 0 ${i} ${l/2}px rgba(${e}, 0.6);\n width: ${a/4}px;\n height: ${a/4}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${2/n}s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.4);\n width: ${a/2}px;\n height: ${a/2}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${3/n}s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.2);\n width: ${a}px;\n height: ${a}px;\n animation: ripple-animation ${4/n}s infinite;\n }\n @keyframes ripple-animation {\n 0% {\n transform: translate(-50%, -50%) scale(0.5);\n }\n 100% {\n transform: translate(-50%, -50%) scale(1);\n }\n }\n `;const o=document.createElement("div");o.className="ripple-container",o.innerHTML='\n <div class="alarm-core"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n ',this.shadowRoot.appendChild(t),this.shadowRoot.appendChild(o)}hexToRgba(t){if(3===(t=null==t?void 0:t.trim().replace(/^#/,"")).length&&(t=t.split("").map(t=>t+t).join("")),6!==t.length||!/^[0-9A-Fa-f]+$/.test(t))throw new Error("Invalid hex color format");return`${parseInt(t.slice(0,2),16)}, ${parseInt(t.slice(2,4),16)}, ${parseInt(t.slice(4,6),16)}`}}s.localName="alarm-marker",s.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",s);[n,l,o,r,s].forEach(t=>{window.customElements.get(t.localName)?console.warn(`${t.localName} already defined`):window.customElements.define(t.localName,t)});
1
+ var t =
2
+ "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%200L14.8072%205.1928H5.1928V14.8072L0%2020V0H20Z%22%20fill%3D%22url%28%23paint0_linear_8000_74493%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74493%22%20x1%3D%220.384614%22%20y1%3D%2220%22%20x2%3D%2219.6154%22%20y2%3D%220.769232%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231251A2%22%2F%3E%3Cstop%20offset%3D%220.489583%22%20stop-color%3D%22%233C91FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230E468E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E",
3
+ e =
4
+ "data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206L20%2019.9899M20%206.01012L5%2020%22%20stroke%3D%22url%28%23paint0_linear_8000_74606%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74606%22%20x1%3D%2212.5%22%20y1%3D%226.0007%22%20x2%3D%2212.5%22%20y2%3D%2220.0005%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23C6E0FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C6E0FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
5
+ class n extends HTMLElement {
6
+ constructor() {
7
+ super(), (this.width = 80), this.attachShadow({ mode: "open" });
8
+ }
9
+ connectedCallback() {
10
+ this.render();
11
+ }
12
+ disconnectedCallback() {
13
+ this.shadowRoot
14
+ .querySelector(".panel-template .close")
15
+ .removeEventListener("mousedown", this.close.bind(this));
16
+ }
17
+ static get observedAttributes() {
18
+ return ["titletext", "leadline", "formdata", "anchorwidth", "anchorheight"];
19
+ }
20
+ attributeChangedCallback(t, e, n) {
21
+ this.render();
22
+ }
23
+ render() {
24
+ const n = document.createElement("style");
25
+ n.innerHTML = `\n .panel-template {\n position: absolute;\n background: url('data:image/jpeg;base64,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') 100% 100% no-repeat;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 20px 30px;\n width: 370px;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n display: flex;\n justify-content: space-between;\n font-size: 20px;\n margin-bottom: 18px;\n text-shadow: 0 2px 2px rgba(17, 64, 108, 0.5);\n background: linear-gradient(180deg, #fff 0%, #348dff 100%);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .panel-template .header .close img{\n width: 26px;\n height: 26px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: linear-gradient(90deg, #2261ab 0%, rgba(34, 97, 171, 0.2) 109.71%);\n font-size: 16px;\n line-height: 18px;\n padding: 7px 8px 7px 16px;\n }\n .panel-template .content .content-left{\n display: flex;\n align-items: center;\n color: #b4d0ff;\n width: calc(100% - 14px);\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n flex-shrink: 0;\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #fff;\n margin: 0 6px;\n }\n `;
26
+ const a = this.getAttribute("titleText"),
27
+ i = document.createElement("div"),
28
+ l = this.getLeadLineClass(i);
29
+ (i.className = "panel-template"),
30
+ (i.innerHTML = `\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <img class="corner" src="${t}"/>\n <div class="top-line">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%22202%22%20height%3D%227%22%20viewBox%3D%220%200%20202%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23filter0_i_8000_74495%29%22%3E%3Cpath%20d%3D%22M0%200L7.37065%207H194.629L202%200H0Z%22%20fill%3D%22url%28%23paint0_linear_8000_74495%29%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_i_8000_74495%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22202%22%20height%3D%227%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22arithmetic%22%20k2%3D%22-1%22%20k3%3D%221%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.5%200%22%2F%3E%3CfeBlend%20mode%3D%22overlay%22%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_8000_74495%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74495%22%20x1%3D%22116%22%20y1%3D%227%22%20x2%3D%22116%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23BAD9FF%22%2F%3E%3Cstop%20offset%3D%220.578125%22%20stop-color%3D%22%23144887%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23062C5E%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E" style="min-width: 120px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${a}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n `),
31
+ this.appendContent(i),
32
+ (this.shadowRoot.innerHTML = n.outerHTML + i.outerHTML);
33
+ this.shadowRoot
34
+ .querySelector(".panel-template .close")
35
+ .addEventListener("mousedown", this.close.bind(this));
36
+ }
37
+ close() {
38
+ this.style.display = "none";
39
+ }
40
+ getLeadLineClass(t) {
41
+ const e = this.getAttribute("leadLine") || "middle",
42
+ n = Number(this.getAttribute("anchorWidth") || 24),
43
+ a = Number(this.getAttribute("anchorHeight") || 24);
44
+ switch (e) {
45
+ case "middle":
46
+ t.style.transform = `translate(-50%, -100%) translate(${n / 2}px, -${
47
+ this.width
48
+ }px)`;
49
+ break;
50
+ case "leftMiddle":
51
+ t.style.transform = `translate(${
52
+ n + this.width
53
+ }px, -50%) translate(0px, ${a / 2}px)`;
54
+ break;
55
+ case "rightMiddle":
56
+ t.style.transform = `translate(-100%, -50%) translate(-${
57
+ this.width
58
+ }px, ${a / 2}px)`;
59
+ break;
60
+ case "leftBottom":
61
+ t.style.transform = `translate(${
62
+ n + this.width / Math.sqrt(2)
63
+ }px, -100%) translate(0, -${this.width / Math.sqrt(2) - a / 2}px)`;
64
+ break;
65
+ case "rightBottom":
66
+ t.style.transform = `translate(-100%, -100%) translate(-${
67
+ this.width / Math.sqrt(2)
68
+ }px, -${this.width / Math.sqrt(2) - a / 2}px)`;
69
+ }
70
+ return {
71
+ middle: "middle",
72
+ leftMiddle: "left-middle",
73
+ rightMiddle: "right-middle",
74
+ leftBottom: "left-bottom",
75
+ rightBottom: "right-bottom",
76
+ }[e];
77
+ }
78
+ appendContent(t) {
79
+ const e = JSON.parse(this.getAttribute("formData"));
80
+ if (!(null == e ? void 0 : e.length)) return;
81
+ const n = e.map((t) => {
82
+ const e = document.createElement("span");
83
+ (e.className = "label"),
84
+ (e.style.fontSize = "16px"),
85
+ (e.textContent = t.name),
86
+ this.shadowRoot.appendChild(e);
87
+ const n = e.getBoundingClientRect().width;
88
+ return (
89
+ this.shadowRoot.removeChild(e),
90
+ Object.assign(t, { dom: e, domWidth: n })
91
+ );
92
+ }),
93
+ a = Math.max.apply(
94
+ null,
95
+ n.map((t) => t.domWidth)
96
+ );
97
+ n.forEach((e) => {
98
+ e.dom.style.marginLeft = (a - e.domWidth).toFixed(2) + "px";
99
+ const n = document.createElement("div");
100
+ (n.className = "content"),
101
+ (n.innerHTML = `\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2013L2.9112%206.52941L0%200L13%206.52941L0%2013Z%22%20fill%3D%22url%28%23paint0_linear_8000_74588%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74588%22%20x1%3D%220.433333%22%20y1%3D%227%22%20x2%3D%2212.5705%22%20y2%3D%226.62433%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2337FFE7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23DDFFFD%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n ${e.dom.outerHTML}：\n <span class="value ellipsis" title="${e.value}">${e.value}</span>\n </div>\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.22266%207.83008L0%2015.6602V12.0645L0.783203%2013.1084L7.00391%207.83008L0.783203%202.55176L0%203.625V0L9.22266%207.83008ZM2.50879%207.77246L0%209.88965V5.64062L2.50879%207.77246Z%22%20fill%3D%22url%28%23paint0_linear_8000_74593%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_8000_74593%22%20x1%3D%22-2.05227e-07%22%20y1%3D%227.99987%22%20x2%3D%229.00048%22%20y2%3D%227.99988%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237AB6FF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BDDBFF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"/>\n `),
102
+ t.appendChild(n);
103
+ });
104
+ }
105
+ }
106
+ n.localName = "data-panel1";
107
+ var a =
108
+ "data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M25%201H1V25%22%20stroke%3D%22%2316B2FF%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",
109
+ i =
110
+ "data:image/svg+xml,%3Csvg%20width%3D%2262%22%20height%3D%222%22%20viewBox%3D%220%200%2062%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H62L59%202H3L0%200Z%22%20fill%3D%22%2316B2FF%22%2F%3E%3C%2Fsvg%3E";
111
+ class l extends HTMLElement {
112
+ constructor() {
113
+ super(), (this.width = 80), this.attachShadow({ mode: "open" });
114
+ }
115
+ connectedCallback() {
116
+ this.render();
117
+ }
118
+ static get observedAttributes() {
119
+ return ["titleyext", "leadline", "formdata", "anchorwidth", "anchorheight"];
120
+ }
121
+ attributeChangedCallback(t, e, n) {
122
+ this.render();
123
+ }
124
+ render() {
125
+ const t = document.createElement("style");
126
+ t.innerHTML = `\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding: 0 10px 10px;\n color: #fff;\n box-sizing: border-box;\n }\n .panel-template .bottom-line{\n position: absolute;\n background: #3666BC;\n width: ${this.width}px;\n height: 1px;\n }\n .bottom-line.middle{\n bottom: 0;\n left: 50%;\n transform: rotate(90deg);\n transform-origin: left;\n }\n .bottom-line.left-middle{\n top: 50%;\n right: 100%;\n }\n .bottom-line.right-middle{\n top: 50%;\n left: 100%;\n }\n .bottom-line.left-bottom{\n bottom: 0;\n right: 100%;\n transform: rotate(-45deg);\n transform-origin: right;\n }\n .bottom-line.right-bottom{\n bottom: 0;\n left: 100%;\n transform: rotate(45deg);\n transform-origin: left;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n line-height: 24px;\n padding: 5px 0;\n margin-bottom: 10px;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n \n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n line-height: 22px;\n }\n .panel-template .content + .content {\n margin-top: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\n flex-shrink: 0;\n align-items: center;\n color: #b4d0ff;\n }\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .panel-template .content .label{\n display: inline-flex;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n flex: auto;\n padding-left: 4px;\n text-align: right;\n color: #A4FFFF;\n }\n `;
127
+ const e = this.getAttribute("titleText"),
128
+ n = document.createElement("div"),
129
+ l = this.getLeadLineClass(n);
130
+ (n.className = "panel-template"),
131
+ (n.innerHTML = `\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line ${l}"></div>\n <div class="header">\n <span>${e}</span>\n </div>\n `),
132
+ this.appendContent(n),
133
+ (this.shadowRoot.innerHTML = t.outerHTML + n.outerHTML);
134
+ }
135
+ close() {
136
+ this.style.display = "none";
137
+ }
138
+ getLeadLineClass(t) {
139
+ const e = this.getAttribute("leadLine") || "middle",
140
+ n = Number(this.getAttribute("anchorWidth") || 24),
141
+ a = Number(this.getAttribute("anchorHeight") || 24);
142
+ switch (e) {
143
+ case "middle":
144
+ t.style.transform = `translate(-50%, -100%) translate(${n / 2}px, -${
145
+ this.width
146
+ }px)`;
147
+ break;
148
+ case "leftMiddle":
149
+ t.style.transform = `translate(${
150
+ n + this.width
151
+ }px, -50%) translate(0px, ${a / 2}px)`;
152
+ break;
153
+ case "rightMiddle":
154
+ t.style.transform = `translate(-100%, -50%) translate(-${
155
+ this.width
156
+ }px, ${a / 2}px)`;
157
+ break;
158
+ case "leftBottom":
159
+ t.style.transform = `translate(${
160
+ n + this.width / Math.sqrt(2)
161
+ }px, -100%) translate(0, -${this.width / Math.sqrt(2) - a / 2}px)`;
162
+ break;
163
+ case "rightBottom":
164
+ t.style.transform = `translate(-100%, -100%) translate(-${
165
+ this.width / Math.sqrt(2)
166
+ }px, -${this.width / Math.sqrt(2) - a / 2}px)`;
167
+ }
168
+ return {
169
+ middle: "middle",
170
+ leftMiddle: "left-middle",
171
+ rightMiddle: "right-middle",
172
+ leftBottom: "left-bottom",
173
+ rightBottom: "right-bottom",
174
+ }[e];
175
+ }
176
+ appendContent(t) {
177
+ const e = JSON.parse(this.getAttribute("formData"));
178
+ (null == e ? void 0 : e.length) &&
179
+ e.forEach((e) => {
180
+ const n = document.createElement("div");
181
+ (n.className = "content"),
182
+ (n.innerHTML = `\n <div class="content-left">\n <img src="data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20opacity%3D%220.4%22%20d%3D%22M14%206L6.5%2011.1962L6.5%200.803847L14%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3Cpath%20d%3D%22M10%206L2.5%2011.1962L2.5%200.803847L10%206Z%22%20fill%3D%22%2399FFFF%22%2F%3E%3C%2Fsvg%3E"/>\n <span class="label">${e.name}</span>\n </div>\n <div class="value ellipsis" title="${e.value}">${e.value}</div>\n `),
183
+ t.appendChild(n);
184
+ });
185
+ }
186
+ }
187
+ l.localName = "data-panel2";
188
+ class o extends HTMLElement {
189
+ constructor() {
190
+ super(), this.attachShadow({ mode: "open" });
191
+ }
192
+ connectedCallback() {
193
+ this.render();
194
+ }
195
+ disconnectedCallback() {}
196
+ static get observedAttributes() {
197
+ return ["text", "textstyle", "anchorwidth"];
198
+ }
199
+ attributeChangedCallback() {
200
+ this.render();
201
+ }
202
+ render() {
203
+ const t = document.createElement("style"),
204
+ e = this.getAttribute("textstyle") || "{}",
205
+ {
206
+ backgroundColor: n = "#0e488e",
207
+ backgroundOpacity: a = 1,
208
+ borderColor: i = "#0e488e",
209
+ borderWidth: l = 1,
210
+ color: o = "#fff",
211
+ } = JSON.parse(e),
212
+ r = this.hexToRgba(n);
213
+ t.innerHTML = `\n .panel-template {\n position: absolute;\n background: rgba(${r}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n width: max-content;\n max-width: 220px;\n --line-height: 10px;\n }\n `;
214
+ const s = Number(this.getAttribute("anchorWidth") || 24),
215
+ p = this.getAttribute("text"),
216
+ d = document.createElement("div");
217
+ (d.className = "panel-template"),
218
+ (d.innerHTML = `\n <div title="${p}">\n <span>${p}</span>\n </div>\n `),
219
+ (d.style.transform = `translate(-50%, -100%) translate(${
220
+ s / 2
221
+ }px, -10px)`),
222
+ (this.shadowRoot.innerHTML = t.outerHTML + d.outerHTML);
223
+ }
224
+ hexToRgba(t) {
225
+ if (
226
+ (3 === (t = null == t ? void 0 : t.trim().replace(/^#/, "")).length &&
227
+ (t = t
228
+ .split("")
229
+ .map((t) => t + t)
230
+ .join("")),
231
+ 6 !== t.length || !/^[0-9A-Fa-f]+$/.test(t))
232
+ )
233
+ throw new Error("Invalid hex color format");
234
+ return `${parseInt(t.slice(0, 2), 16)}, ${parseInt(
235
+ t.slice(2, 4),
236
+ 16
237
+ )}, ${parseInt(t.slice(4, 6), 16)}`;
238
+ }
239
+ }
240
+ o.localName = "text-panel1";
241
+ class r extends HTMLElement {
242
+ constructor() {
243
+ super(), (this.width = 80), this.attachShadow({ mode: "open" });
244
+ }
245
+ connectedCallback() {
246
+ this.render();
247
+ }
248
+ disconnectedCallback() {
249
+ this.shadowRoot
250
+ .querySelector(".panel-template .close")
251
+ .removeEventListener("mousedown", this.close.bind(this));
252
+ }
253
+ static get observedAttributes() {
254
+ return ["titletext", "videourl", "anchorwidth"];
255
+ }
256
+ attributeChangedCallback(t, e, n) {
257
+ this.render();
258
+ }
259
+ render() {
260
+ const t = document.createElement("style");
261
+ t.innerHTML =
262
+ "\n .panel-template {\n position: absolute;\n background: #2C3034;\n border: 1px solid #16B2FF;\n width: 244px;\n padding-top: 3px;\n color: #fff;\n --header-height: 34px;\n --line-height: 80px;\n }\n .panel-template .bottom-line{\n width: 1px;\n height: var(--line-height);\n position: absolute;\n bottom: -80px;\n left: 50%;\n background: #3666BC;\n }\n .panel-template .corner {\n position: absolute;\n }\n .panel-template .corner:nth-child(1) {\n left: -1px;\n top: -1px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -1px;\n transform: rotate(90deg);\n }\n .panel-template .corner:nth-child(3) {\n right: -1px;\n bottom: -1px;\n transform: rotate(-180deg);\n }\n .panel-template .corner:nth-child(4) {\n left: -1px;\n bottom: -1px;\n transform: rotate(-90deg);\n }\n .panel-template .top-line {\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n }\n .panel-template .header {\n text-align: center;\n font-size: 16px;\n height: var(--header-height);\n line-height: var(--header-height);\n // border-top: 1px solid #16B2FF;\n // border-bottom: 1px solid #16B2FF;\n background: linear-gradient(90deg, rgba(13, 107, 153, 0.00) 0%, rgba(22, 178, 255, 0.30) 50%, rgba(13, 107, 153, 0.00) 100%);\n }\n .panel-template .header .close{\n position: absolute;\n line-height: normal;\n top: 8px;\n right: 8px;\n }\n .panel-template .header .close:hover{\n cursor: pointer;\n background: #496baa;\n }\n .panel-template .header .close img{\n width: 16px;\n height: 16px;\n }\n .panel-template .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 12px;\n padding: 6px;\n }\n ";
263
+ const n = Number(this.getAttribute("anchorWidth") || 24),
264
+ l = this.getAttribute("titleText"),
265
+ o =
266
+ this.getAttribute("videoUrl") ||
267
+ "https://player.alicdn.com/video/aliyunmedia.mp4",
268
+ r = document.createElement("div");
269
+ (r.className = "panel-template"),
270
+ (r.innerHTML = `\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <img class="corner" src="${a}"/>\n <div class="top-line">\n <img src="${i}" style="min-width: 62px"/>\n </div>\n <div class="bottom-line"></div>\n <div class="header">\n <span>${l}</span>\n <span class="close">\n <img src="${e}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${o}>\n </video>\n </div>\n `),
271
+ (r.style.transform = `translate(-50%, -100%) translate(${
272
+ n / 2
273
+ }px, -10px)`),
274
+ (this.shadowRoot.innerHTML = t.outerHTML + r.outerHTML);
275
+ this.shadowRoot
276
+ .querySelector(".panel-template .close")
277
+ .addEventListener("mousedown", this.close.bind(this));
278
+ }
279
+ close() {
280
+ this.style.display = "none";
281
+ }
282
+ }
283
+ r.localName = "video-panel1";
284
+ class s extends HTMLElement {
285
+ constructor() {
286
+ super(), this.attachShadow({ mode: "open" });
287
+ }
288
+ connectedCallback() {
289
+ this.render();
290
+ }
291
+ disconnectedCallback() {}
292
+ attributeChangedCallback(t, e, n) {
293
+ console.log("attributeChangedCallback", t, e, n);
294
+ }
295
+ render() {
296
+ const t = document.createElement("style"),
297
+ e = this.hexToRgba(this.getAttribute("color")),
298
+ n = Number(this.getAttribute("speed")),
299
+ a = 30 * Number(this.getAttribute("radius")),
300
+ i = "30px",
301
+ l = a / 8;
302
+ t.innerHTML = `\n .ripple-container {\n position: relative;\n width: ${a}px;\n height: ${a}px;\n transform: scale(10);\n }\n .alarm-pulse, .alarm-core {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 0;\n }\n /* 中心点（核心） */\n .alarm-core {\n width: 6px;\n height: 6px;\n background: rgba(${e}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${
303
+ 1 / n
304
+ }s;\n box-shadow: 0 0 ${i} ${
305
+ l / 2
306
+ }px rgba(${e}, 0.6);\n width: ${a / 4}px;\n height: ${
307
+ a / 4
308
+ }px;\n animation: ripple-animation ${
309
+ 4 / n
310
+ }s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${
311
+ 2 / n
312
+ }s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.4);\n width: ${
313
+ a / 2
314
+ }px;\n height: ${a / 2}px;\n animation: ripple-animation ${
315
+ 4 / n
316
+ }s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${
317
+ 3 / n
318
+ }s;\n box-shadow: 0 0 ${i} ${l}px rgba(${e}, 0.2);\n width: ${a}px;\n height: ${a}px;\n animation: ripple-animation ${
319
+ 4 / n
320
+ }s infinite;\n }\n @keyframes ripple-animation {\n 0% {\n transform: translate(-50%, -50%) scale(0.5);\n }\n 100% {\n transform: translate(-50%, -50%) scale(1);\n }\n }\n `;
321
+ const o = document.createElement("div");
322
+ (o.className = "ripple-container"),
323
+ (o.innerHTML =
324
+ '\n <div class="alarm-core"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n <div class="alarm-pulse"></div>\n '),
325
+ this.shadowRoot.appendChild(t),
326
+ this.shadowRoot.appendChild(o);
327
+ }
328
+ hexToRgba(t) {
329
+ if (
330
+ (3 === (t = null == t ? void 0 : t.trim().replace(/^#/, "")).length &&
331
+ (t = t
332
+ .split("")
333
+ .map((t) => t + t)
334
+ .join("")),
335
+ 6 !== t.length || !/^[0-9A-Fa-f]+$/.test(t))
336
+ )
337
+ throw new Error("Invalid hex color format");
338
+ return `${parseInt(t.slice(0, 2), 16)}, ${parseInt(
339
+ t.slice(2, 4),
340
+ 16
341
+ )}, ${parseInt(t.slice(4, 6), 16)}`;
342
+ }
343
+ }
344
+ (s.localName = "alarm-marker"),
345
+ (s.observedAttributes = [""]),
346
+ window.customElements.get("alarm-marker")
347
+ ? console.warn("alarm-marker already defined")
348
+ : window.customElements.define("alarm-marker", s);
349
+ [n, l, o, r, s].forEach((t) => {
350
+ window.customElements.get(t.localName)
351
+ ? console.warn(`${t.localName} already defined`)
352
+ : window.customElements.define(t.localName, t);
353
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "web-comp-panels",
3
- "version": "1.0.13",
3
+ "version": "1.0.15",
4
4
  "description": "A simple Web component library",
5
5
  "main": "index.cjs",
6
6
  "type": "module",