dcim-topology2d 1.1.6 → 2.0.5

package/core/src/utils/onmousevent.js

@@ -1,12 +1,27 @@
 import { ptInPolyXY } from './math';
-import { moveDataType, downDataType } from './construction'
-import { Node } from '../models'
+import { moveDataType, downDataType } from './construction';
+import { Node } from '../models';
+import {elementType} from "../../../static";
+import {getSelectedData} from '../element';
+import {commonStore} from "../store";
+// 配置鼠标事件监听 监听样式 documentDefine
+// 凡是类名为documentDefine的Dom元素都自动注册下面的监听
+export function setEventListener(e, TID) {
+    e.preventDefault();
+    const documentDefine = document.querySelector('.documentDefine');
+    if(!documentDefine) return;
+    const currentNode = commonStore[TID].elementInteractivePoor.node; // 当前点击的元件节点数据
+    if(currentNode && currentNode.name === elementType.select) {
+        // select 下拉 option选中操作
+        getSelectedData(e, currentNode);
+    }
+}
 // 执行window函数
 export function omouseEventPrototDoWindowFn (eventNode, node) {
 
     window[eventNode.value](node, eventNode.params);
 
-};
+}
 export function mousMoveFun(type, pos, data) {
     let params = {
         order: 0,
@@ -51,12 +66,17 @@ export function mousDownFun(type, eventNode) {
     const action = eventNode ? parseInt(eventNode.action) : 0;
     if(action === 3) {
         params.eventType = downDataType.Window; // 打开会话窗口
-    }else if(action === 7){
-        params.eventType = downDataType.Showhide; // 显示/隐藏
+    }else if(action === 7) {
+        // 显示/隐藏
+        params.eventType = downDataType.Showhide;
         params.value = eventNode.value;
-    }else if(action === 8){
+    }else if(action === 8) {
         params.eventType = downDataType.Tabswitch; // Tab切换
-    } else {
+    }else if(action === 11) {
+        params.eventType = downDataType.Formselect; // select下拉切换
+        params.staticType = eventNode.dcimStaticForType; // 1: 数据统计；2：数据展示；3：显示隐藏
+    }else {
+        // action === 5 远程控制比较特殊，无论是否绑定远程控制事件，只要数据中有远程控制属性且值为0都会认定为远程控制
         params.eventType = downDataType.Target; // 链接跳转
     }
     return params;

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

@@ -0,0 +1,2 @@
+export declare function getParams(id: string, data: []): void;
+export declare function filterParams(node: any): void;

package/core/src/utils/params.js

@@ -0,0 +1,57 @@
+import {commonStore} from '../store';
+// 获取绑定数据的参数
+export function getParams(id, data) {
+    data.map((item) => {
+        filterParams(id, item);
+        if (item.children && item.children.length) {
+            getParams(id, item.children);
+        }
+    });
+}
+// 过滤出参数
+export function filterParams(id, node) {
+    let tagIds = [];
+    let kpiAddrs = [];
+    let assetIds = [];
+    let areaIds = [];
+    let tagEcharts = [];
+    let echartData = [];
+    let varVaule = [];
+    let doorIds = [];
+    let isMqttEventType = false;
+    node.events.map((ev) => {
+        if(ev.value && ev.value === 'entranceGuard') doorIds.push(ev.params); // 门禁参数
+        if(ev.type === 3) isMqttEventType = true;
+    });
+    if(doorIds.length) commonStore[id].mqttParams.doorIds = [...commonStore[id].mqttParams.doorIds, ...doorIds];
+    if(!isMqttEventType) return;
+    if (node.data && Array.isArray(node.data) && node.data.length) {
+        node.data.map((item) => {
+            if (item.key === 'tagId') {
+                tagIds.push(item.value);
+            }
+            if (item.key === 'kpiAddr') {
+                kpiAddrs.push(item.value);
+            }
+            if (item.key === 'assetId') {
+                assetIds.push(item.value);
+            }
+            if (item.key === 'areaId') {
+                areaIds.push(item.value);
+            }
+            if (item.key.includes('varValue')) {
+                varVaule.push(item.value);
+            }
+        })
+    }
+    if (node.data && Object.prototype.toString.call(node.data) === '[object Object]' && node.data.params && node.data.params.id) {
+        echartData.push(node.data.params.id);
+    }
+    commonStore[id].mqttParams.tagIds = [...commonStore[id].mqttParams.tagIds, ...tagIds];
+    commonStore[id].mqttParams.kpiAddrs = [...commonStore[id].mqttParams.kpiAddrs, ...kpiAddrs];
+    commonStore[id].mqttParams.assetIds = [...commonStore[id].mqttParams.assetIds, ...assetIds];
+    commonStore[id].mqttParams.areaIds = [...commonStore[id].mqttParams.areaIds, ...areaIds];
+    commonStore[id].mqttParams.varVaule = [...commonStore[id].mqttParams.varVaule, ...varVaule];
+    commonStore[id].mqttParams.tagEcharts = [...commonStore[id].mqttParams.tagEcharts, ...tagEcharts];
+    commonStore[id].mqttParams.echartData = [...commonStore[id].mqttParams.echartData, ...echartData];
+}

package/myShape-diagram/index.js

@@ -0,0 +1,196 @@
+// 源码版写法
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "1.1.6",
+  "version": "2.0.5",
   "description": "",
   "main": "-",
   "scripts": {

package/static/echartsDefaultData.js

@@ -1,110 +1,3 @@
-/**
- * echarts图表默认数据组
- * @type {{displayMode_1: string}}
- */
-export const echartsDefaultDataMap = {
-    displayMode_1: {
-        legend: null,
-        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        seriesData: [{
-            type: 'line',
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
-        }]
-    }, // 折线图
-    displayMode_2: {
-        legend: null,
-        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        seriesData: [{
-            name: '',
-            data: [20, 60, 110, 220, 80, 100, 180]
-        }]
-    },// 柱状图
-    displayMode_3: {
-        legend: null,
-        seriesData: [{
-            value: 10,
-            name: '机房1'
-        }, {
-            value: 30,
-            name: '机房2'
-        }, {
-            value: 50,
-            name: '机房3'
-        }, {
-            value: 20,
-            name: '机房4'
-        }, {
-            value: 60,
-            name: '机房5'
-        }, {
-            value: 15,
-            name: '机房6'
-        }, {
-            value: 18,
-            name: '机房7'
-        }, {
-            value: 26,
-            name: '机房8'
-        }]
-    },// 环形图
-    displayMode_4: {
-        legend: null,
-        total: 100,
-        XData: ['CA机房', '五层IT', '四层IT', '冷水机组'],
-        seriesData: [{
-            data: [5, 20, 50, 80]
-        }]
-    },// TOP排行榜
-    displayMode_5: {
-        legend: null,
-        seriesData: [{
-            name: '一般',
-            value: 0
-        }, {
-            name: '较大',
-            value: 0
-        }, {
-            name: '重大',
-            value: 0
-        }, {
-            name: '严重',
-            value: 0
-        }, {
-            name: '高级',
-            value: 0
-        }]
-    },// 饼图
-    displayMode_6: {
-        value: 8
-    },// 仪表盘
-    displayMode_1_tem_line_1: {
-      legend: ['温度', '湿度'],
-      XData: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
-      seriesData: [{
-        name: '温度',
-        data: [20,24,20,24,20,24,20,24,20]
-      },{
-        name: '湿度',
-        data: [40,45,40,45,40,45,40,45,40]
-      }]
-    }, // 双轴双曲线
-    displayMode_1_tem_line_2: {
-        legend: null,
-        XData: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
-        seriesData: [{
-            name: '温度',
-            data: [20,24,20,24,20,24,20,24,20]
-        }]
-    }, // 单轴双曲线区域
-    displayMode_2_tem_3dbar_1: {
-      legend: null,
-      XData: ['制冷', '配电制冷', '网络机房制冷', '主机房制冷', '网络机房IT', '主机房IT', 'IT'],
-      seriesData: [{
-        name: '',
-        data: [82, 115, 42, 82, 70, 40, 92]
-      }]
-    }, // 3D柱状图模板-3d柱状图1
-};
 // 图例默认数据
 export const echartsLegendDefaultData = {
   icon: 'rect', // 图标类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
@@ -236,4 +129,31 @@ export const echartsDataRoom = [{ //给x轴设置滚动条
   start: 0, //默认为1
   end: 50 // 100 - 1500 / 31, //默认为100
 }];
+// 图表类型Map
+export const echartsTypeMap = {
+    'type_1': 'line',
+    'type_2': 'bar',
+    'type_3': 'ring',
+    'type_4': 'TOP',
+    'type_5': 'pie',
+    'type_6': 'gauge'
+};
+// 图表颜色
+export const echartsColorData = [
+    'rgb(36, 220, 132)',
+    'rgb(154, 77, 251)',
+    'rgb(226, 182, 56)',
+    'rgb(253, 92, 71)',
+    'rgb(26, 117, 255)',
+    'rgb(175, 215, 14)',
+    'rgb(214, 154, 37)',
+    'rgb(66, 251, 251)',
+    'rgb(255, 158, 4)',
+    'rgb(30, 107, 222)',
+    'rgb(21, 151, 224)',
+    'rgb(19, 236, 236)',
+    'rgb(68, 237, 146)',
+    'rgb(251, 94, 45)',
+    'rgb(18, 255, 113)',
+    'rgb(18, 255, 113)']
 

package/static/element.js

@@ -0,0 +1,14 @@
+export const elementType = {
+    select: 'select',
+    table: 'table',
+    pagination: 'pagination',
+    iframe: 'iframe',
+    echarts: 'echarts'
+};
+export const elementSelectThemeType = [{
+    id: 0,
+    name: '默认'
+},{
+    id: 1,
+    name: '青色'
+}];

package/static/form.js

@@ -0,0 +1,11 @@
+// 下拉默认数据
+export const selectDefaultData = [{
+    id: '1',
+    name: '列表一'
+},{
+    id: '2',
+    name: '列表二'
+},{
+    id: '3',
+    name: '列表三'
+}];

package/static/index.js

@@ -1,2 +1,3 @@
 export * from './echartsDefaultData';
-export * from './echartsStore';
+export * from './form';
+export * from './element';

package/store/actions.js

@@ -0,0 +1 @@
+export const plugsPool = {};

package/store/clear.js

@@ -0,0 +1,10 @@
+import {setEventListener} from "../core";
+export const removeAllElement = function (){
+    const documentDefineEle = document.querySelectorAll('.documentDefine');
+    if(documentDefineEle) {
+        documentDefineEle.forEach(function(element) {
+            element.removeEventListener('click', (e) => {setEventListener(e);});
+            element.parentNode.removeChild(element);
+        });
+    }
+}

package/store/index.js

@@ -0,0 +1,2 @@
+export * from './actions';
+export * from './clear';

package/style/common.css

@@ -0,0 +1,18 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+li {
+  list-style: none;
+}
+.canvas-point.pointer{
+  cursor: pointer;
+}
+.canvas-point,
+.canvas-point.default{
+  cursor: default;
+}
+.canvas-point.pointer > div{
+  z-index: -2;
+}

package/style/editor.css

@@ -0,0 +1,13 @@
+/*.canvas-draw{*/
+/*    z-index: 2;*/
+/*}*/
+/*.canvas-point{*/
+/*    z-index: 6;*/
+/*}*/
+.topoEchart,
+.topology-select{
+    z-index: 1;
+}
+.topology-select-dropdown{
+    transition: all ease-in .2s;
+}

package/style/index.css

@@ -1,13 +1,4 @@
-.canvas-point.pointer{
-    cursor: pointer;
-}
-.canvas-point,
-.canvas-point.default{
-    cursor: default;
-}
-.canvas-point.pointer > div{
-    z-index: -2;
-}
-.topology2dConfIfram{
+@import './common.css';
+@import './select.css';
+
 
-}