web-comp-panels 1.0.5 → 1.0.6
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 n="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";class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render();this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["text","formdata"]}attributeChangedCallback(n,e,t){this.render()}render(){const e=document.createElement("style");e.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 --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: -2px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -2px;\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 t=this.getAttribute("titleText"),i=document.createElement("div");i.className="panel-template",i.innerHTML=`\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\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"></div>\n <div class="header">\n <span>${t}</span>\n <span class="close">\n <img src="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"/>\n </span>\n </div>\n `,i.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.appendContent(i),this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(i)}close(){this.style.display="none"}appendContent(n){const e=JSON.parse(this.getAttribute("formData"));if(!e?.length)return;const t=e.map(n=>{const e=document.createElement("span");e.className="label",e.style.fontSize="12px",e.textContent=n.name,this.shadowRoot.appendChild(e);const t=e.getBoundingClientRect().width;return this.shadowRoot.removeChild(e),{...n,dom:e,domWidth:t}}),i=Math.max(...t.map(n=>n.domWidth));t.forEach(e=>{e.dom.style.marginLeft=(i-e.domWidth).toFixed(2)+"px";const t=document.createElement("div");t.className="content",t.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 `,n.appendChild(t)})}}window.customElements.get("panel-1")?console.warn("panel-1 already defined"):window.customElements.define("panel-1",e);class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}render(){const n=document.createElement("style");n.innerHTML="\n .panel-template {\n position: absolute;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 8px;\n max-width: 220px;\n --line-height: 10px;\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 .content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n ";const e=this.getAttribute("text"),t=document.createElement("div");t.className="panel-template",t.innerHTML=`\n <div class="content" title="${e}">\n <span>${e}</span>\n </div>\n <div class="bottom-line"></div>\n `,t.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.appendChild(n),this.shadowRoot.appendChild(t)}}window.customElements.get("panel-2")?console.warn("panel-2 already defined"):window.customElements.define("panel-2",t);class i extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(n,e,t){console.log("attributeChangedCallback",n,e,t)}render(){const n=document.createElement("style"),e=this.hexToRgba(this.getAttribute("color")),t=Number(this.getAttribute("speed")),i=30*Number(this.getAttribute("radius")),a="30px",l=i/8;n.innerHTML=`\n .ripple-container {\n position: relative;\n width: ${i}px;\n height: ${i}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 ${a} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/t}s;\n box-shadow: 0 0 ${a} ${l/2}px rgba(${e}, 0.6);\n width: ${i/4}px;\n height: ${i/4}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${2/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.4);\n width: ${i/2}px;\n height: ${i/2}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${3/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.2);\n width: ${i}px;\n height: ${i}px;\n animation: ripple-animation ${4/t}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(n),this.shadowRoot.appendChild(o)}hexToRgba(n){if(n=n?.trim().replace(/^#/,""),3===n.length&&(n=n.split("").map(n=>n+n).join("")),6!==n.length||!/^[0-9A-Fa-f]+$/.test(n))throw new Error("Invalid hex color format");return`${parseInt(n.slice(0,2),16)}, ${parseInt(n.slice(2,4),16)}, ${parseInt(n.slice(4,6),16)}`}}i.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",i);
|
|
1
|
+
"use strict";var n="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";class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render();this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["text","formdata"]}attributeChangedCallback(n,e,t){this.render()}render(){const e=document.createElement("style");e.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 --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: -2px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -2px;\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 t=this.getAttribute("titleText"),i=document.createElement("div");i.className="panel-template",i.innerHTML=`\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\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"></div>\n <div class="header">\n <span>${t}</span>\n <span class="close">\n <img src="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"/>\n </span>\n </div>\n `,i.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.appendContent(i),this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(i)}close(){this.style.display="none"}appendContent(n){const e=JSON.parse(this.getAttribute("formData"));if(!e?.length)return;const t=e.map(n=>{const e=document.createElement("span");e.className="label",e.style.fontSize="12px",e.textContent=n.name,this.shadowRoot.appendChild(e);const t=e.getBoundingClientRect().width;return this.shadowRoot.removeChild(e),Object.assign(n,{dom:e,domWidth:t})}),i=Math.max.apply(null,t.map(n=>n.domWidth));t.forEach(e=>{e.dom.style.marginLeft=(i-e.domWidth).toFixed(2)+"px";const t=document.createElement("div");t.className="content",t.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 `,n.appendChild(t)})}}window.customElements.get("panel-1")?console.warn("panel-1 already defined"):window.customElements.define("panel-1",e);class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}render(){const n=document.createElement("style");n.innerHTML="\n .panel-template {\n position: absolute;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 8px;\n max-width: 220px;\n --line-height: 10px;\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 .content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n ";const e=this.getAttribute("text"),t=document.createElement("div");t.className="panel-template",t.innerHTML=`\n <div class="content" title="${e}">\n <span>${e}</span>\n </div>\n <div class="bottom-line"></div>\n `,t.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.appendChild(n),this.shadowRoot.appendChild(t)}}window.customElements.get("panel-2")?console.warn("panel-2 already defined"):window.customElements.define("panel-2",t);class i extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(n,e,t){console.log("attributeChangedCallback",n,e,t)}render(){const n=document.createElement("style"),e=this.hexToRgba(this.getAttribute("color")),t=Number(this.getAttribute("speed")),i=30*Number(this.getAttribute("radius")),a="30px",l=i/8;n.innerHTML=`\n .ripple-container {\n position: relative;\n width: ${i}px;\n height: ${i}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 ${a} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/t}s;\n box-shadow: 0 0 ${a} ${l/2}px rgba(${e}, 0.6);\n width: ${i/4}px;\n height: ${i/4}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${2/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.4);\n width: ${i/2}px;\n height: ${i/2}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${3/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.2);\n width: ${i}px;\n height: ${i}px;\n animation: ripple-animation ${4/t}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(n),this.shadowRoot.appendChild(o)}hexToRgba(n){if(n=n?.trim().replace(/^#/,""),3===n.length&&(n=n.split("").map(n=>n+n).join("")),6!==n.length||!/^[0-9A-Fa-f]+$/.test(n))throw new Error("Invalid hex color format");return`${parseInt(n.slice(0,2),16)}, ${parseInt(n.slice(2,4),16)}, ${parseInt(n.slice(4,6),16)}`}}i.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",i);
|
package/lib/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var n="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";class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render();this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["text","formdata"]}attributeChangedCallback(n,e,t){this.render()}render(){const e=document.createElement("style");e.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 --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: -2px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -2px;\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 t=this.getAttribute("titleText"),i=document.createElement("div");i.className="panel-template",i.innerHTML=`\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\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"></div>\n <div class="header">\n <span>${t}</span>\n <span class="close">\n <img src="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"/>\n </span>\n </div>\n `,i.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.appendContent(i),this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(i)}close(){this.style.display="none"}appendContent(n){const e=JSON.parse(this.getAttribute("formData"));if(!e?.length)return;const t=e.map(n=>{const e=document.createElement("span");e.className="label",e.style.fontSize="12px",e.textContent=n.name,this.shadowRoot.appendChild(e);const t=e.getBoundingClientRect().width;return this.shadowRoot.removeChild(e),{...n,dom:e,domWidth:t}}),i=Math.max(...t.map(n=>n.domWidth));t.forEach(e=>{e.dom.style.marginLeft=(i-e.domWidth).toFixed(2)+"px";const t=document.createElement("div");t.className="content",t.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 `,n.appendChild(t)})}}window.customElements.get("panel-1")?console.warn("panel-1 already defined"):window.customElements.define("panel-1",e);class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}render(){const n=document.createElement("style");n.innerHTML="\n .panel-template {\n position: absolute;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 8px;\n max-width: 220px;\n --line-height: 10px;\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 .content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n ";const e=this.getAttribute("text"),t=document.createElement("div");t.className="panel-template",t.innerHTML=`\n <div class="content" title="${e}">\n <span>${e}</span>\n </div>\n <div class="bottom-line"></div>\n `,t.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.appendChild(n),this.shadowRoot.appendChild(t)}}window.customElements.get("panel-2")?console.warn("panel-2 already defined"):window.customElements.define("panel-2",t);class i extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(n,e,t){console.log("attributeChangedCallback",n,e,t)}render(){const n=document.createElement("style"),e=this.hexToRgba(this.getAttribute("color")),t=Number(this.getAttribute("speed")),i=30*Number(this.getAttribute("radius")),a="30px",l=i/8;n.innerHTML=`\n .ripple-container {\n position: relative;\n width: ${i}px;\n height: ${i}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 ${a} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/t}s;\n box-shadow: 0 0 ${a} ${l/2}px rgba(${e}, 0.6);\n width: ${i/4}px;\n height: ${i/4}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${2/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.4);\n width: ${i/2}px;\n height: ${i/2}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${3/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.2);\n width: ${i}px;\n height: ${i}px;\n animation: ripple-animation ${4/t}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(n),this.shadowRoot.appendChild(o)}hexToRgba(n){if(n=n?.trim().replace(/^#/,""),3===n.length&&(n=n.split("").map(n=>n+n).join("")),6!==n.length||!/^[0-9A-Fa-f]+$/.test(n))throw new Error("Invalid hex color format");return`${parseInt(n.slice(0,2),16)}, ${parseInt(n.slice(2,4),16)}, ${parseInt(n.slice(4,6),16)}`}}i.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",i);
|
|
1
|
+
var n="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";class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render();this.shadowRoot.querySelector(".panel-template .close").addEventListener("mousedown",this.close.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".panel-template .close").removeEventListener("mousedown",this.close.bind(this))}static get observedAttributes(){return["text","formdata"]}attributeChangedCallback(n,e,t){this.render()}render(){const e=document.createElement("style");e.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 --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: -2px;\n }\n .panel-template .corner:nth-child(2) {\n right: -1px;\n top: -2px;\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 t=this.getAttribute("titleText"),i=document.createElement("div");i.className="panel-template",i.innerHTML=`\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\n <img class="corner" src="${n}"/>\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"></div>\n <div class="header">\n <span>${t}</span>\n <span class="close">\n <img src="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"/>\n </span>\n </div>\n `,i.style.transform="translate(-50%, -100%) translate(11px, -80px)",this.appendContent(i),this.shadowRoot.appendChild(e),this.shadowRoot.appendChild(i)}close(){this.style.display="none"}appendContent(n){const e=JSON.parse(this.getAttribute("formData"));if(!e?.length)return;const t=e.map(n=>{const e=document.createElement("span");e.className="label",e.style.fontSize="12px",e.textContent=n.name,this.shadowRoot.appendChild(e);const t=e.getBoundingClientRect().width;return this.shadowRoot.removeChild(e),Object.assign(n,{dom:e,domWidth:t})}),i=Math.max.apply(null,t.map(n=>n.domWidth));t.forEach(e=>{e.dom.style.marginLeft=(i-e.domWidth).toFixed(2)+"px";const t=document.createElement("div");t.className="content",t.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 `,n.appendChild(t)})}}window.customElements.get("panel-1")?console.warn("panel-1 already defined"):window.customElements.define("panel-1",e);class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}render(){const n=document.createElement("style");n.innerHTML="\n .panel-template {\n position: absolute;\n background-size: cover;\n border: 1px solid #0e488e;\n box-shadow: 0 -22px 41px 0 #0d469d inset;\n padding: 8px;\n max-width: 220px;\n --line-height: 10px;\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 .content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n ";const e=this.getAttribute("text"),t=document.createElement("div");t.className="panel-template",t.innerHTML=`\n <div class="content" title="${e}">\n <span>${e}</span>\n </div>\n <div class="bottom-line"></div>\n `,t.style.transform="translate(-50%, -100%) translate(11px, -10px)",this.shadowRoot.appendChild(n),this.shadowRoot.appendChild(t)}}window.customElements.get("panel-2")?console.warn("panel-2 already defined"):window.customElements.define("panel-2",t);class i extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(n,e,t){console.log("attributeChangedCallback",n,e,t)}render(){const n=document.createElement("style"),e=this.hexToRgba(this.getAttribute("color")),t=Number(this.getAttribute("speed")),i=30*Number(this.getAttribute("radius")),a="30px",l=i/8;n.innerHTML=`\n .ripple-container {\n position: relative;\n width: ${i}px;\n height: ${i}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 ${a} rgba(${e}, .1);\n }\n .alarm-pulse:nth-child(2) {\n animation-delay: ${1/t}s;\n box-shadow: 0 0 ${a} ${l/2}px rgba(${e}, 0.6);\n width: ${i/4}px;\n height: ${i/4}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(3) {\n animation-delay: ${2/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.4);\n width: ${i/2}px;\n height: ${i/2}px;\n animation: ripple-animation ${4/t}s infinite;\n }\n .alarm-pulse:nth-child(4) {\n animation-delay: ${3/t}s;\n box-shadow: 0 0 ${a} ${l}px rgba(${e}, 0.2);\n width: ${i}px;\n height: ${i}px;\n animation: ripple-animation ${4/t}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(n),this.shadowRoot.appendChild(o)}hexToRgba(n){if(n=n?.trim().replace(/^#/,""),3===n.length&&(n=n.split("").map(n=>n+n).join("")),6!==n.length||!/^[0-9A-Fa-f]+$/.test(n))throw new Error("Invalid hex color format");return`${parseInt(n.slice(0,2),16)}, ${parseInt(n.slice(2,4),16)}, ${parseInt(n.slice(4,6),16)}`}}i.observedAttributes=[""],window.customElements.get("alarm-marker")?console.warn("alarm-marker already defined"):window.customElements.define("alarm-marker",i);
|