dcim-topology2d 1.1.6 → 2.0.5

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/poll.js

@@ -1,37 +0,0 @@
-// 轮询
-var POLL = /** @class */ (function () {
-    function POLL(data, message, val) {
-        this.data = data;
-        this.client = message;
-        this.val = val;
-        this.init();
-    };
-    POLL.prototype.init = function () {
-        let topics = ''
-        this.getPen(this.data.pens, topics, JSON.stringify(this.client))
-    };
-    POLL.prototype.getPen = function (pens, topics, message) {
-        const _this = this;
-        pens.forEach((pen)=>{
-            if(pen.children != undefined){
-            _this.getPen(pen.children, topics, message)
-            }else{
-                var item = pen;
-                for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
-                    var event_1 = _c[_b];
-                    // if (event_1.type === EventType.Poll) {
-                    if ((event_1.type ===3 && this.val === 'Mqtt') || (event_1.type ===4 && this.val === 'Poll')
-                    || (event_1.type ===5 && this.val === 'Poll1') || (event_1.type ===6 && this.val === 'Poll2')) {
-                        event_1.name = topics;
-                        if(message){
-                            item.doSocketMqtt(event_1, message.toString());
-                        }
-                    }
-                }
-            }
-        })
-    };
-    return POLL;
-}());
-export { POLL };
-//# sourceMappingURL=mqtt.js.map

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/myShape-diagram/myShape.js

@@ -1,196 +0,0 @@
-// 源码版写法
-import { registerNode } from '../core'
-
-// 组件版写法和bundle一致
-// window.Le5leTopology.registerNode
-
-// 画骨架
-
-function drawOuterLine(ctx, node) {
-  const R = Math.floor((node.rect.width - 6) / 2);
-  const r = Math.round((R * 1) / 2);
-
-  ctx.beginPath();
-  // 上半个圆形
-  ctx.arc(node.rect.x + R, node.rect.y + r, r, 0, Math.PI, true);
-  // 下半个圆形
-  const theta = Math.acos((r * 1.0) / R);
-  ctx.arc(
-    node.rect.x + R,
-    node.rect.y + node.rect.height - R,
-    R,
-    theta + Math.PI,
-    -theta,
-    true
-  ); // 逆时针
-  ctx.closePath();
-  ctx.stroke();
-}
-
-// 画底色
-function drawBasic(ctx, node) {
-  const lingrad = ctx.createLinearGradient(
-    node.rect.x,
-    node.rect.y,
-    node.rect.width,
-    node.rect.height
-  );
-  lingrad.addColorStop(0, 'mediumvioletred');
-  lingrad.addColorStop(0.2, 'darkorange');
-  lingrad.addColorStop(0.4, 'gold');
-  lingrad.addColorStop(0.6, 'limegreen');
-  lingrad.addColorStop(0.8, 'navy');
-  lingrad.addColorStop(1, 'purple');
-  ctx.fillStyle = lingrad;
-  ctx.fill('evenodd');
-}
-
-function getYByValue(node, i) {
-  const R = Math.floor((node.rect.width - 6) / 2);
-  const r = Math.round((R * 1) / 2);
-
-  const min = 0;
-  const max = 40;
-
-  // 刻度线总高度
-  const scale_height = node.rect.height - 2 * R - 2 * r;
-  // 0刻度线所在位置
-  const zero_scale_y = node.rect.height - 2 * R;
-  const dy_dtem = scale_height / (max - min);
-  return zero_scale_y - dy_dtem * node.value;
-}
-
-// 画刻度线
-function drawScale(ctx, node) {
-  const min = 0;
-  const max = 40;
-  const R = Math.floor((node.rect.width - 6) / 2);
-  const r = Math.round((R * 1) / 2);
-
-  for (let i = min; i <= max; i++) {
-    // 画刻度线
-    const y = getYByValue(node, i);
-    ctx.beginPath();
-    ctx.moveTo(R + r, y);
-    if (i % 10 == 0) {
-      ctx.lineWidth = 2;
-      ctx.lineTo(R + r - (r * 2) / 3, y);
-      // ctx.font = "15px bold";
-      ctx.fillText(i + '', R + r, y + 6);
-      ctx.stroke();
-    } else {
-      ctx.lineWidth = 1;
-      if (i % 5 == 0) {
-        ctx.lineTo(R + r - r / 2, y);
-      } else {
-        ctx.lineTo(R + r - r / 3, y);
-      }
-      ctx.stroke();
-    }
-  }
-}
-
-/////////////////////
-// end 以下代码不完整，代码来自网上改写，仅作参考
-/////////////////////
-
-// 自定义图形库绘画函数
-export function thermometer(ctx, node) {
-  ctx.beginPath();
-
-  drawOuterLine(ctx, node);
-  drawBasic(ctx, node);
-  ctx.clearRect(
-    node.rect.x,
-    node.rect.y,
-    node.rect.width,
-    getYByValue(node, node.value)
-  );
-  drawOuterLine(ctx, node);
-  drawScale(ctx, node);
-}
-
-// 自定义图形库绘画函数
-export function pool(ctx, node) {
-  var wr = node.borderRadius;
-  var hr = node.borderRadius;
-  if (node.borderRadius < 1) {
-      wr = node.rect.width * node.borderRadius;
-      hr = node.rect.height * node.borderRadius;
-  }
-  var r = wr < hr ? wr : hr;
-  if (node.rect.width < 2 * r) {
-      r = node.rect.width / 2;
-  }
-  if (node.rect.height < 2 * r) {
-      r = node.rect.height / 2;
-  }
-  ctx.beginPath();
-  ctx.strokeStyle = "rgba(0,0,0,.0)"
-  var value = (1-node.value) * (node.rect.height - node.lineWidth/2)
-  ctx.moveTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
-  ctx.lineTo(node.rect.ex - node.lineWidth/2, node.rect.y + value);
-  ctx.arcTo(node.rect.ex - node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, r);
-  ctx.arcTo(node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y, r);
-  ctx.lineTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
-  ctx.closePath();
-  (node.fillStyle || node.bkType) && ctx.fill();
-  ctx.stroke();
-
-  ctx.beginPath();
-  ctx.strokeStyle = node.strokeStyle
-  ctx.lineWidth = node.lineWidth
-  ctx.moveTo(node.rect.x + node.rect.width, node.rect.y);
-  ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
-  ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
-  ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
-  // ctx.closePath();
-  (node.fillStyle || node.bkType);
-  ctx.stroke();
-}
-
-// 自定义图形库绘画函数
-export function  electricFan(ctx, node) {
-  var wwr = node.rect.width / 2;
-  var hwr = node.rect.height / 2;
-  var hwr = node.rect.height / 2;
-  var x0 = node.rect.x + node.rect.width /2
-  var y0 = node.rect.y + node.rect.height / 2
-  var withinRadius = wwr < hwr ? wwr : hwr;
-  ctx.beginPath();
-  ctx.lineWidth = node.lineWidth
-  ctx.arc(x0,y0,withinRadius,0,2*Math.PI);
-  ctx.closePath();
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.lineWidth = 1;
-  var fanCount = node.fanCount;
-  for(var i = 0; i < fanCount; i++){
-    var fanAngle = 2 * Math.PI / fanCount * i;
-    var x1 = x0 - withinRadius*Math.sin(fanAngle);
-    var y1 = y0 - withinRadius*Math.cos(fanAngle);
-    var xr = x0 - withinRadius*Math.sin(fanAngle)/2;
-    var yr = y0 - withinRadius*Math.cos(fanAngle)/2;
-    ctx.moveTo(x0, y0);
-    ctx.lineTo(x1, y1);
-    ctx.arc(xr, yr, withinRadius/2, Math.PI / 2 - fanAngle,3 * Math.PI / 2 - fanAngle);
-  }
-  ctx.closePath();
-  (node.fillStyle || node.bkType) && ctx.fill();
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.lineWidth = 3;
-  ctx.arc(x0,y0,withinRadius/5,0,2*Math.PI);
-  ctx.closePath();
-  (node.fillStyle || node.bkType) && ctx.fill();
-  ctx.stroke();
-}
-
-// 注册自定义图形库
-export function registerMyShape() {
-  registerNode('electricFan', electricFan);
-  registerNode('pool', pool);
-  registerNode('thermometer', thermometer);
-}
-
-// src\views\data.ts 里面加载到工具栏，第一个就是此自定义图形库

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 = {};
-};