web-comp-panels 1.0.8 → 1.0.9
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.
package/lib/components/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e="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",t="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(e,t,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: 8px;\n width: 220px;\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: 14px;\n margin-bottom: 8px;\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: 16px;\n height: 16px;\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: 12px;\n padding: 4px;\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: 3px;\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="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\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="${t}"/>\n </span>\n </div>\n `,this.appendContent(i),this.shadowRoot.appendChild(n),this.shadowRoot.appendChild(i);this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));if(!t?.length)return;const n=t.map(e=>{const t=document.createElement("span");t.className="label",t.style.fontSize="12px",t.textContent=e.name,this.shadowRoot.appendChild(t);const n=t.getBoundingClientRect().width;return this.shadowRoot.removeChild(t),Object.assign(e,{dom:t,domWidth:n})}),a=Math.max.apply(null,n.map(e=>e.domWidth));n.forEach(t=>{t.dom.style.marginLeft=(a-t.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 ${t.dom.outerHTML}:\n <span class="value ellipsis" title="${t.value}">${t.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 `,e.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()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titleText","leadLine","formdata"]}attributeChangedCallback(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 }\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: 34px;\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: 12px;\n padding: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\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 flex-shrink: 0;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #A4FFFF;\n }\n `;const n=this.getAttribute("titleText"),l=document.createElement("div"),o=this.getLeadLineClass(l);l.className="panel-template",l.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 ${o}"></div>\n <div class="header">\n <span>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n `,this.appendContent(l),this.shadowRoot.innerHTML=e.outerHTML+l.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));t?.length&&t.forEach(t=>{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">${t.name}</span>\n </div>\n <div class="value ellipsis" title="${t.value}">${t.value}</div>\n `,e.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 e=document.createElement("style"),t=this.getAttribute("textStyle")||"{}",{backgroundColor:n="#0e488e",backgroundOpacity:a=1,borderColor:i="#0e488e",borderWidth:l=1,color:o}=JSON.parse(t),s=this.hexToRgba(n);e.innerHTML=`\n .panel-template {\n position: absolute;\n background: rgba(${s}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n max-width: 220px;\n --line-height: 10px;\n }\n `;const r=this.getAttribute("text"),p=document.createElement("div");p.className="panel-template",p.innerHTML=`\n <div title="${r}">\n <span>${r}</span>\n </div>\n `,p.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(p)}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}o.localName="text-panel1";class s extends HTMLElement{constructor(){super(),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(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 --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 line-height: 34px;\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=this.getAttribute("titleText"),l=this.getAttribute("videoUrl")||"https://player.alicdn.com/video/aliyunmedia.mp4",o=document.createElement("div");o.className="panel-template",o.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>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${l}>\n </video>\n </div>\n `,o.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(o);this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}}s.localName="video-panel1";class r extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(e,t,n){console.log("attributeChangedCallback",e,t,n)}render(){const e=document.createElement("style"),t=this.hexToRgba(this.getAttribute("color")),n=Number(this.getAttribute("speed")),a=30*Number(this.getAttribute("radius")),i="30px",l=a/8;e.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(${t}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${t}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/n}s;\n box-shadow: 0 0 ${i} ${l/2}px rgba(${t}, 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(${t}, 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(${t}, 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(e),this.shadowRoot.appendChild(o)}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}r.localName="alarm-marker",r.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",r);[n,l,o,s,r].forEach(e=>{window.customElements.get(e.localName)?console.warn(`${e.localName} already defined`):window.customElements.define(e.localName,e)});
|
|
1
|
+
"use strict";var e="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",t="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(e,t,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: 8px;\n width: 220px;\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: 14px;\n margin-bottom: 8px;\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: 16px;\n height: 16px;\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: 12px;\n padding: 4px;\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: 3px;\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="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\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="${t}"/>\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(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));if(!t?.length)return;const n=t.map(e=>{const t=document.createElement("span");t.className="label",t.style.fontSize="12px",t.textContent=e.name,this.shadowRoot.appendChild(t);const n=t.getBoundingClientRect().width;return this.shadowRoot.removeChild(t),Object.assign(e,{dom:t,domWidth:n})}),a=Math.max.apply(null,n.map(e=>e.domWidth));n.forEach(t=>{t.dom.style.marginLeft=(a-t.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 ${t.dom.outerHTML}:\n <span class="value ellipsis" title="${t.value}">${t.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 `,e.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()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titleText","leadLine","formdata"]}attributeChangedCallback(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 }\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: 34px;\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: 12px;\n padding: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\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 flex-shrink: 0;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #A4FFFF;\n }\n `;const n=this.getAttribute("titleText"),l=document.createElement("div"),o=this.getLeadLineClass(l);l.className="panel-template",l.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 ${o}"></div>\n <div class="header">\n <span>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n `,this.appendContent(l),this.shadowRoot.innerHTML=e.outerHTML+l.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));t?.length&&t.forEach(t=>{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">${t.name}</span>\n </div>\n <div class="value ellipsis" title="${t.value}">${t.value}</div>\n `,e.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 e=document.createElement("style"),t=this.getAttribute("textStyle")||"{}",{backgroundColor:n="#0e488e",backgroundOpacity:a=1,borderColor:i="#0e488e",borderWidth:l=1,color:o="#fff"}=JSON.parse(t),s=this.hexToRgba(n);e.innerHTML=`\n .panel-template {\n position: absolute;\n background: rgba(${s}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n width: 220px;\n --line-height: 10px;\n }\n `;const r=this.getAttribute("text"),p=document.createElement("div");p.className="panel-template",p.innerHTML=`\n <div title="${r}">\n <span>${r}</span>\n </div>\n `,p.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.innerHTML=e.outerHTML+p.outerHTML}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}o.localName="text-panel1";class s extends HTMLElement{constructor(){super(),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(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 --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 line-height: 34px;\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=this.getAttribute("titleText"),l=this.getAttribute("videoUrl")||"https://player.alicdn.com/video/aliyunmedia.mp4",o=document.createElement("div");o.className="panel-template",o.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>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${l}>\n </video>\n </div>\n `,o.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(o);this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}}s.localName="video-panel1";class r extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(e,t,n){console.log("attributeChangedCallback",e,t,n)}render(){const e=document.createElement("style"),t=this.hexToRgba(this.getAttribute("color")),n=Number(this.getAttribute("speed")),a=30*Number(this.getAttribute("radius")),i="30px",l=a/8;e.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(${t}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${t}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/n}s;\n box-shadow: 0 0 ${i} ${l/2}px rgba(${t}, 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(${t}, 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(${t}, 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(e),this.shadowRoot.appendChild(o)}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}r.localName="alarm-marker",r.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",r);[n,l,o,s,r].forEach(e=>{window.customElements.get(e.localName)?console.warn(`${e.localName} already defined`):window.customElements.define(e.localName,e)});
|
package/lib/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e="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",t="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(e,t,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: 8px;\n width: 220px;\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: 14px;\n margin-bottom: 8px;\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: 16px;\n height: 16px;\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: 12px;\n padding: 4px;\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: 3px;\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="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\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="${t}"/>\n </span>\n </div>\n `,this.appendContent(i),this.shadowRoot.appendChild(n),this.shadowRoot.appendChild(i);this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));if(!t?.length)return;const n=t.map(e=>{const t=document.createElement("span");t.className="label",t.style.fontSize="12px",t.textContent=e.name,this.shadowRoot.appendChild(t);const n=t.getBoundingClientRect().width;return this.shadowRoot.removeChild(t),Object.assign(e,{dom:t,domWidth:n})}),a=Math.max.apply(null,n.map(e=>e.domWidth));n.forEach(t=>{t.dom.style.marginLeft=(a-t.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 ${t.dom.outerHTML}:\n <span class="value ellipsis" title="${t.value}">${t.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 `,e.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()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titleText","leadLine","formdata"]}attributeChangedCallback(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 }\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: 34px;\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: 12px;\n padding: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\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 flex-shrink: 0;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #A4FFFF;\n }\n `;const n=this.getAttribute("titleText"),l=document.createElement("div"),o=this.getLeadLineClass(l);l.className="panel-template",l.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 ${o}"></div>\n <div class="header">\n <span>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n `,this.appendContent(l),this.shadowRoot.innerHTML=e.outerHTML+l.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));t?.length&&t.forEach(t=>{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">${t.name}</span>\n </div>\n <div class="value ellipsis" title="${t.value}">${t.value}</div>\n `,e.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 e=document.createElement("style"),t=this.getAttribute("textStyle")||"{}",{backgroundColor:n="#0e488e",backgroundOpacity:a=1,borderColor:i="#0e488e",borderWidth:l=1,color:o}=JSON.parse(t),s=this.hexToRgba(n);e.innerHTML=`\n .panel-template {\n position: absolute;\n background: rgba(${s}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n max-width: 220px;\n --line-height: 10px;\n }\n `;const r=this.getAttribute("text"),p=document.createElement("div");p.className="panel-template",p.innerHTML=`\n <div title="${r}">\n <span>${r}</span>\n </div>\n `,p.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(p)}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}o.localName="text-panel1";class s extends HTMLElement{constructor(){super(),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(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 --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 line-height: 34px;\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=this.getAttribute("titleText"),l=this.getAttribute("videoUrl")||"https://player.alicdn.com/video/aliyunmedia.mp4",o=document.createElement("div");o.className="panel-template",o.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>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${l}>\n </video>\n </div>\n `,o.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(o);this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}}s.localName="video-panel1";class r extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(e,t,n){console.log("attributeChangedCallback",e,t,n)}render(){const e=document.createElement("style"),t=this.hexToRgba(this.getAttribute("color")),n=Number(this.getAttribute("speed")),a=30*Number(this.getAttribute("radius")),i="30px",l=a/8;e.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(${t}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${t}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/n}s;\n box-shadow: 0 0 ${i} ${l/2}px rgba(${t}, 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(${t}, 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(${t}, 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(e),this.shadowRoot.appendChild(o)}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}r.localName="alarm-marker",r.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",r);[n,l,o,s,r].forEach(e=>{window.customElements.get(e.localName)?console.warn(`${e.localName} already defined`):window.customElements.define(e.localName,e)});
|
|
1
|
+
var e="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",t="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(e,t,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: 8px;\n width: 220px;\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: 14px;\n margin-bottom: 8px;\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: 16px;\n height: 16px;\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: 12px;\n padding: 4px;\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: 3px;\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="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\n <img class="corner" src="${e}"/>\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="${t}"/>\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(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));if(!t?.length)return;const n=t.map(e=>{const t=document.createElement("span");t.className="label",t.style.fontSize="12px",t.textContent=e.name,this.shadowRoot.appendChild(t);const n=t.getBoundingClientRect().width;return this.shadowRoot.removeChild(t),Object.assign(e,{dom:t,domWidth:n})}),a=Math.max.apply(null,n.map(e=>e.domWidth));n.forEach(t=>{t.dom.style.marginLeft=(a-t.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 ${t.dom.outerHTML}:\n <span class="value ellipsis" title="${t.value}">${t.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 `,e.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()}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["titleText","leadLine","formdata"]}attributeChangedCallback(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 }\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: 34px;\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: 12px;\n padding: 6px;\n }\n .panel-template .content .content-left{\n display: flex;\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 flex-shrink: 0;\n color: rgba(255, 255, 255, 0.80);\n padding-left: 6px;\n }\n .panel-template .value{\n display: inline-block;\n color: #A4FFFF;\n }\n `;const n=this.getAttribute("titleText"),l=document.createElement("div"),o=this.getLeadLineClass(l);l.className="panel-template",l.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 ${o}"></div>\n <div class="header">\n <span>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n `,this.appendContent(l),this.shadowRoot.innerHTML=e.outerHTML+l.outerHTML;this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}getLeadLineClass(e){const t=this.getAttribute("leadLine")||"middle";switch(t){case"middle":e.style.transform=`translate(-50%, -100%) translate(11px, -${this.width}px)`;break;case"leftMiddle":e.style.transform="translate(50%, -50%) translate(-32px, 0)";break;case"rightMiddle":e.style.transform="translate(-100%, -50%) translate(-68px, 0)";break;case"leftBottom":e.style.transform=`translate(50%, -100%) translate(-${this.width/Math.sqrt(2)}px, -${this.width/Math.sqrt(2)}px)`;break;case"rightBottom":e.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"}[t]}appendContent(e){const t=JSON.parse(this.getAttribute("formData"));t?.length&&t.forEach(t=>{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">${t.name}</span>\n </div>\n <div class="value ellipsis" title="${t.value}">${t.value}</div>\n `,e.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 e=document.createElement("style"),t=this.getAttribute("textStyle")||"{}",{backgroundColor:n="#0e488e",backgroundOpacity:a=1,borderColor:i="#0e488e",borderWidth:l=1,color:o="#fff"}=JSON.parse(t),s=this.hexToRgba(n);e.innerHTML=`\n .panel-template {\n position: absolute;\n background: rgba(${s}, ${a});\n border: ${l}px solid ${i};\n color: ${o};\n padding: 8px;\n width: 220px;\n --line-height: 10px;\n }\n `;const r=this.getAttribute("text"),p=document.createElement("div");p.className="panel-template",p.innerHTML=`\n <div title="${r}">\n <span>${r}</span>\n </div>\n `,p.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.innerHTML=e.outerHTML+p.outerHTML}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}o.localName="text-panel1";class s extends HTMLElement{constructor(){super(),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(e,t,n){this.render()}render(){const e=document.createElement("style");e.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 --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 line-height: 34px;\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=this.getAttribute("titleText"),l=this.getAttribute("videoUrl")||"https://player.alicdn.com/video/aliyunmedia.mp4",o=document.createElement("div");o.className="panel-template",o.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>${n}</span>\n <span class="close">\n <img src="${t}"/>\n </span>\n </div>\n <div class="content">\n <video preload="metadata" crossorigin="anonymous" autoplay controls width="100%">\n <source src=${l}>\n </video>\n </div>\n `,o.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(o);this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}close(){this.style.display="none"}}s.localName="video-panel1";class r extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(e,t,n){console.log("attributeChangedCallback",e,t,n)}render(){const e=document.createElement("style"),t=this.hexToRgba(this.getAttribute("color")),n=Number(this.getAttribute("speed")),a=30*Number(this.getAttribute("radius")),i="30px",l=a/8;e.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(${t}, 1); /* 红色，代表告警 */\n box-shadow: 0 0 ${i} rgba(${t}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/n}s;\n box-shadow: 0 0 ${i} ${l/2}px rgba(${t}, 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(${t}, 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(${t}, 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(e),this.shadowRoot.appendChild(o)}hexToRgba(e){if(e=e?.trim().replace(/^#/,""),3===e.length&&(e=e.split("").map(e=>e+e).join("")),6!==e.length||!/^[0-9A-Fa-f]+$/.test(e))throw new Error("Invalid hex color format");return`${parseInt(e.slice(0,2),16)}, ${parseInt(e.slice(2,4),16)}, ${parseInt(e.slice(4,6),16)}`}}r.localName="alarm-marker",r.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",r);[n,l,o,s,r].forEach(e=>{window.customElements.get(e.localName)?console.warn(`${e.localName} already defined`):window.customElements.define(e.localName,e)});
|