dcim-topology2d 1.1.6 → 2.0.2

package/style/select.css

@@ -0,0 +1,143 @@
+.topology-select {
+    width: 160px;
+    height: 30px;
+    display: flex;
+    position: relative;
+    background-size: 100%;
+}
+.topology-select .topology-select-remove{
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 13px;
+    height: 13px;
+    line-height: 8px;
+    font-size: 10px;
+    color: #c0c4cc;
+    cursor: pointer;
+    text-align: center;
+    border: 1px solid #c0c4cc;
+    border-radius: 100%;
+    transform: translateY(-50%);
+}
+.topology-select .topology-select-icon-arrow{
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 0;
+    height: 0;
+    border: 7px solid transparent;
+    border-top-color: #284689;
+    border-bottom-width: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    transform: translateY(-50%);
+    transition: all .3s;
+}
+.topology-select .topology-select-icon-arrow.reverse{
+    /* top: 39%; */
+    transform: translateY(-50%) rotate(180deg);
+}
+.topology-select input {
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    padding: 0 10px;
+    border-radius: 4px;
+    border: 1px solid #284689;
+    background: transparent;
+    outline: none;
+    cursor: pointer;
+    color: #fff;
+}
+.topology-select-dropdown {
+    position: absolute;
+    width: 160px;
+    border-radius: 5px;
+    margin-top: 14px;
+    border: 1px solid #284689;
+    background-size: 100%;
+    background-color: #0b1531;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    display: none;
+}
+.topology-select-dropdown .popper__arrow{
+    display: block;
+    position: absolute;
+    top: -7px;
+    left: 20%;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-bottom-color: #284689;
+    border-top-width: 0;
+}
+/* 隐藏滚动条 */
+.topology-select-dropdown-list::-webkit-scrollbar {
+    display: none;
+}
+.topology-select-dropdown .topology-select-dropdown-list {
+    max-height: 230px;
+    margin: 8px 0;
+    overflow: auto;
+    background-size: 100%;
+}
+.topology-select-dropdown .topology-select-dropdown-list li {
+    display: flex;
+    height: 30px;
+    line-height: 30px;
+    align-items: center;
+    color: #fff;
+    cursor: pointer;
+    font-size: 12px;
+}
+.topology-select-dropdown .topology-select-dropdown-list li:hover {
+    background-color: #265797;
+    color: #fff !important;
+}
+.topology-select-dropdown .topology-select-dropdown-list li.selected {
+    color: #409eff !important;
+    font-weight: 700;
+}
+.topology-select-dropdown .topology-select-dropdown-list li span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    cursor: pointer;
+}
+.topology-select.theme1 input{
+    padding: 0 35px 0 20px;
+    border-color: rgb(56, 255, 255);
+    background-color: rgba(56, 255, 255, 0.2);
+    font-size: 14px;
+    font-weight: 400;
+    font-family: "Arial Black";
+}
+.topology-select.theme1 .topology-select-icon-arrow{
+    border-top-color: rgb(56, 255, 255);
+}
+.topology-select-dropdown.theme1{
+    margin-top: 3px;
+    padding: 5px 0;
+    border-color: rgb(56, 255, 255);
+    background-color: rgb(9, 57, 75);
+}
+.topology-select-dropdown.theme1 .topology-select-dropdown-list{
+    margin: 0;
+}
+.topology-select-dropdown.theme1 .topology-select-dropdown-list li {
+    font-size: 14px;
+}
+.topology-select-dropdown.theme1 .topology-select-dropdown-list li:hover {
+    background-color: rgba(56, 255, 255, 0.2);
+    color: rgb(56, 255, 255) !important;
+}
+.topology-select-dropdown.theme1 .topology-select-dropdown-list li.selected {
+    color: rgb(56, 255, 255) !important;
+}
+.topology-select-dropdown.theme1 .popper__arrow{
+    display: none;
+}

package/core/src/utils/dom.d.ts

@@ -1,9 +0,0 @@
-import { Node } from '../models';
-import { visualization2DStore } from '../store';
-export declare let DomElements: {};
-export declare let DomIframes: {};
-export declare function createChildrenDivByElementId(node: Node, data?: visualization2DStore): HTMLDivElement;
-export declare function createIframeElement(node: Node): HTMLDivElement;
-export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: visualization2DStore): void;
-export declare function createDiv(node: Node): HTMLDivElement;
-export declare function loadJS(url: string, callback?: () => void, render?: boolean): void;

package/core/src/utils/dom.js

@@ -1,103 +0,0 @@
-import {Store} from 'le5le-store';
-import {Lock} from '../models'
-import {commonStore} from '../store';
-
-export let DomElements = {};
-export let DomIframes = {};
-
-export function createChildrenDivByElementId(node, data) {
-    if (!data) data = commonStore[node.TID] && commonStore[node.TID].data;
-    // echarts图表的初始化渲染
-    if (node.elementId) {
-        if (!DomElements[node.id]) {
-            DomElements[node.id] = document.getElementById(node.id);
-            if (DomElements[node.id]) {
-                document.querySelector('.canvas-point').appendChild(DomElements[node.id]);
-            }
-        }
-        setStyleForElementIdDiv(node, DomElements[node.id], data);
-    }
-    // iframe元件的初始化渲染
-    if (node.iframe) {
-        if (!DomIframes[node.id]) {
-            let iframe = document.getElementById(`iframe${node.id}`);
-            if (!(iframe && iframe.length)) iframe = createIframeElement(node);
-            DomIframes[node.id] = iframe;
-            if (DomIframes[node.id]) {
-                commonStore[node.TID].parentElem.appendChild(DomIframes[node.id]);
-            }
-        }
-        setStyleForElementIdDiv(node, DomIframes[node.id], data);
-    }
-}
-
-export function createIframeElement(node) {
-    const iframe = document.createElement('iframe');
-    // iframe.scrolling = 'no';
-    iframe.frameBorder = '0';
-    iframe.src = node.iframe;
-    iframe.width = node.rect.width;
-    iframe.height = node.rect.height;
-    iframe.setAttribute('id', `iframe${node.id}`);
-    iframe.setAttribute('class', 'topology2dConfIfram');
-    return iframe;
-}
-
-export function setStyleForElementIdDiv(node, elem, data) {
-    if (!elem) {
-        return;
-    }
-    elem.style.position = 'absolute';
-    elem.style.outline = 'none';
-    elem.style.left = node.rect.x + 'px';
-    elem.style.top = node.rect.y + 'px';
-    elem.style.width = node.rect.width + 'px';
-    elem.style.height = node.rect.height + 'px';
-    if (node.rotate || node.offsetRotate) {
-        elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
-    }
-    // if (node.video && this.videos[node.id] && this.videos[node.id].media) {
-    //     this.videos[node.id].media.style.width = '100%';
-    //     this.videos[node.id].media.style.height = '100%';
-    // }
-    if (data && data.locked > Lock.None || node.locked > Lock.None) {
-        elem.style.userSelect = 'initial';
-        elem.style.pointerEvents = 'initial';
-    } else {
-        elem.style.userSelect = 'none';
-        elem.style.pointerEvents = 'none';
-    }
-}
-
-export function createDiv(node) {
-    var div = document.createElement('div');
-    div.style.position = 'absolute';
-    div.style.outline = 'none';
-    div.style.left = '-9999px';
-    div.style.bottom = '-9999px';
-    div.style.width = node.rect.width + 'px';
-    div.style.height = node.rect.height + 'px';
-    // if (node.elementId) {
-    //     div.id = node.elementId;
-    // }
-    div.id = node.id;
-    return div;
-}
-
-// export function loadJS(url, callback, render) {
-//     var loaderScript = document.createElement('script');
-//     loaderScript.type = 'text/javascript';
-//     loaderScript.src = url;
-//     loaderScript.addEventListener('load', function () {
-//         if (callback) {
-//             callback();
-//         }
-//         // how to do
-//         if (render) {
-//             Store.set('LT:render', true);
-//         }
-//     });
-//     document.body.appendChild(loaderScript);
-// }
-
-//# sourceMappingURL=dom.js.map

package/core/src/utils/dom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../../packages/core/src/utils/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,UAAU,SAAS,CAAC,IAAU;IAClC,IAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IAChC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;IAC3B,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;IAC7B,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACzC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IAC3C,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;KACzB;IAED,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,GAAW,EAAE,QAAqB,EAAE,MAAgB;IACzE,IAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtD,YAAY,CAAC,IAAI,GAAG,iBAAiB,CAAC;IACtC,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC;IACvB,YAAY,CAAC,gBAAgB,CAAC,MAAM,EAAE;QACpC,IAAI,QAAQ,EAAE;YACZ,QAAQ,EAAE,CAAC;SACZ;QACD,YAAY;QACZ,IAAI,MAAM,EAAE;YACV,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;AAC1C,CAAC"}

package/static/echartsStore.js

@@ -1,14 +0,0 @@
-export let echartsDataStore = {};
-export let echartsOptionsStore = {};
-export const destroyEcharts = function(){
-  for (let node of Object.values(echartsDataStore)) {
-    if(node) {
-      clearInterval(node.timeTicket);
-      node.chart.off('mouseover');
-      node.chart.off('mouseout');
-      node.chart.dispose();
-    }
-  }
-  echartsDataStore = {};
-  echartsOptionsStore = {};
-};