dcim-topology2d 1.1.6 → 2.0.2

package/core/src/utils/conversion.js

@@ -1,3 +1,58 @@
+import {syncMqttData} from '../store';
+import {
+    echartsRealDataPool,
+    selectRealDataPool,
+    echartsDataPool,
+    selectDataPool
+} from "../../../store";
+
+/**
+ * 获取echarts和select实时数据
+ * @param node 节点
+ * @param data 实时数据
+ */
+export function getEchartsRealData(node, data){
+    if(!selectRealDataPool[node.id]) {
+        const selectData = [];
+        let currentData = null;
+        data.map((item, index) => {
+            if(index === 0) currentData = item;
+            selectData.push({
+                id: item.id,
+                name: item.aliasName
+            });
+            echartsRealDataPool[item.id] = item;
+        });
+        echartsRealDataPool[node.id] = currentData;
+        selectRealDataPool[node.id] = selectData;
+    }else {
+        const selectId = echartsDataPool[node.id] && echartsDataPool[node.id].bindId;
+        const selected = selectId && selectDataPool[selectId] && selectDataPool[selectId].node.selected;
+        if(selected && selected.id) {
+            // 如有选中的数据
+            echartsRealDataPool[node.id] = echartsRealDataPool[selected.id];
+        }else {
+            echartsRealDataPool[node.id] = data[0];
+        }
+    }
+}
+export function setInitConfData(data){
+    if(syncMqttData.initData[data.id]) return;
+    const bindMqttNode = data.events.find((ev) => {return ev.type === 3});
+    if(!bindMqttNode) return;
+    const initNode = {
+        text: data.text,
+        font: data.font,
+        strokeStyle: data.strokeStyle,
+        fillStyle: data.fillStyle,
+        image: data.image,
+        leakageEnd: data.leakageEnd,
+        leakageFillStyle: data.leakageFillStyle,
+        leakageStart: data.leakageStart
+    }
+    if(data.name === 'echarts') initNode.data = data.data;
+    syncMqttData.initData[data.id] = initNode;
+}
 export function setTagIdData(data) {
     return [{
         "key": "tagId",
@@ -41,6 +96,18 @@ export function setAreaIdData(data) {
         "value": data.name
     }];
 }
+export function setVarValueData(data) {
+    return [{
+        "key": "varId",
+        "value": data.id
+    },{
+        "key": "varValue",
+        "value": data.value
+    }, {
+        "key": "变量类型名称",
+        "value": data.name
+    }];
+}
 export function setThreeCategoryIdData(pen, data) {
     let params = [];
     const hasThreeCategoryId = pen.data.find((tc) => {

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

@@ -1,5 +1,4 @@
 export * from './canvas';
-export * from './dom';
 export * from './math';
 export * from './rect';
 export * from './uuid';
@@ -8,3 +7,4 @@ export * from './construction';
 export * from './onmousevent';
 export * from './conversion';
 export * from './assignment';
+export * from './params';

package/core/src/utils/index.js

@@ -1,5 +1,4 @@
 export * from './canvas';
-export * from './dom';
 export * from './math';
 export * from './rect';
 export * from './uuid';
@@ -8,4 +7,5 @@ export * from './construction';
 export * from './onmousevent';
 export * from './conversion';
 export * from './assignment';
+export * from './params';
 //# sourceMappingURL=index.js.map

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

@@ -1,3 +1,4 @@
 export declare function pSBC(p: any, c0: any, c1?: any, l?: any): string;
 export declare function abs(num: number, percent: number | string): number;
 export declare function ptInPolyXY(pt: any, poly: []): boolean;
+export declare function jsonLength(obj: {}): number;

package/core/src/utils/math.js

@@ -115,4 +115,7 @@ export function ptInPolyXY(pt, poly) {
     }
     return c;
 }
+export function jsonLength(obj) {
+    return Object.keys(obj).length;
+}
 //# sourceMappingURL=math.js.map

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

@@ -1,3 +1,6 @@
+import {Node} from '../models';
+
+export declare function setEventListener(e: Event, node: Node): any;
 export declare function mousMoveFun(type: string, data: any): object;
 export declare function mousDownFun(type: string, eventNode: object): object;
 export declare function omouseEventPrototDoWindowFn(eventNode: object, node: object): string;

package/core/src/utils/onmousevent.js

@@ -1,12 +1,28 @@
 import { ptInPolyXY } from './math';
-import { moveDataType, downDataType } from './construction'
-import { Node } from '../models'
+import { moveDataType, downDataType } from './construction';
+import { Node } from '../models';
+import {elementInteractivePoor} from '../../../store';
+import {elementType} from "../../../static";
+import {getSelectedData} from '../element';
+// 配置鼠标事件监听 监听样式 documentDefine
+// 凡是类名为documentDefine的Dom元素都自动注册下面的监听
+export function setEventListener(e) {
+    e.preventDefault();
+    const documentDefine = document.querySelector('.documentDefine');
+    if(!documentDefine) return;
+    const currentNode = elementInteractivePoor.node; // 当前点击的元件节点数据
+    if(currentNode && currentNode.name === elementType.select) {
+        // select 下拉 option选中操作
+        getSelectedData(e, currentNode);
+        //Store.set(`${currentNode.TID}-LT:render`, true);
+    }
+}
 // 执行window函数
 export function omouseEventPrototDoWindowFn (eventNode, node) {
 
     window[eventNode.value](node, eventNode.params);
 
-};
+}
 export function mousMoveFun(type, pos, data) {
     let params = {
         order: 0,
@@ -51,12 +67,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：数据展示
+    }else {
+        // action === 5 远程控制比较特殊，无论是否绑定远程控制事件，只要数据中有远程控制属性且值为0都会认定为远程控制
         params.eventType = downDataType.Target; // 链接跳转
     }
     return params;

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

@@ -0,0 +1,7 @@
+export declare function categoryDataParams(data: []): void;
+export declare function setParams(assetId: string): object;
+export declare function getParams(data: []): void;
+export declare function filterParams(node: any): void;
+export declare function getTagIdsForKpiAddrs(data: []): void;
+export declare function getVarValueIdsForVarData(data: []): void;
+export declare function renderForAssetPoperties(asset: any, data: []): void;

package/core/src/utils/params.js

@@ -0,0 +1,125 @@
+import { syncMqttData, clearMqttParams } from '../store';
+export function categoryDataParams(data) {
+    clearMqttParams();
+    getParams(data);
+}
+export function setParams(assetId) {
+    const params = {
+        tagIds: syncMqttData.params.tagIds.join(","),
+        assetIds: syncMqttData.params.assetIds.join(","),
+        areaIds: syncMqttData.params.areaIds.join(","),
+        routingkey: syncMqttData.params.routingkey,
+        echart: syncMqttData.params.tagEcharts.join(","),
+        echartData: syncMqttData.params.echartData
+    }
+    if (syncMqttData.params.echartAssemblyData && syncMqttData.params.echartAssemblyData.length) {
+        params.echartAssemblyData = syncMqttData.params.echartAssemblyData;
+    }
+    if(assetId) {
+        params.varValueIds = syncMqttData.params.varVaule.join(",");
+    }else {
+        if(syncMqttData.params.assetIds.length && syncMqttData.params.varVaule.length) {
+            const assetId = syncMqttData.params.assetIds[syncMqttData.params.assetIds.length -1];
+            for(let va = 0; va < syncMqttData.params.varVaule.length; va++) {
+                syncMqttData.params.varVaule[va] = `${assetId}_${syncMqttData.params.varVaule[va]}`;
+            }
+            params.varValueIds = syncMqttData.params.varVaule.join(",");
+        }else {
+            params.varVaule = syncMqttData.params.varVaule.join(",");
+        }
+    }
+    return params;
+}
+// 获取绑定数据的参数
+export function getParams(data) {
+    data.map((item) => {
+        filterParams(item);
+        if (item.children && item.children.length) {
+            getParams(item.children);
+        }
+    });
+}
+// 过滤出参数
+export function filterParams(node) {
+    let tagIds = [];
+    let kpiAddrs = [];
+    let assetIds = [];
+    let areaIds = [];
+    let tagEcharts = [];
+    let echartData = [];
+    let varVaule = [];
+    let isMqttEventType = node.events.find((ev) => {return ev.type === 3});
+    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);
+    }
+    syncMqttData.params.tagIds = [...syncMqttData.params.tagIds, ...tagIds];
+    syncMqttData.params.kpiAddrs = [...syncMqttData.params.kpiAddrs, ...kpiAddrs];
+    syncMqttData.params.assetIds = [...syncMqttData.params.assetIds, ...assetIds];
+    syncMqttData.params.areaIds = [...syncMqttData.params.areaIds, ...areaIds];
+    syncMqttData.params.varVaule = [...syncMqttData.params.varVaule, ...varVaule];
+    syncMqttData.params.tagEcharts = [...syncMqttData.params.tagEcharts, ...tagEcharts];
+    syncMqttData.params.echartData = [...syncMqttData.params.echartData, ...echartData];
+}
+// 根据指标地址数据获取测点数据
+export function getTagIdsForKpiAddrs(data) {
+    let tagIds = [];
+    if (data && data.length > 0) {
+        data.map((item) => {
+            tagIds.push(item.tagId);
+        })
+        // syncMqttData.params.detailAssetData = data;
+    }
+    syncMqttData.params.tagIds = tagIds;
+    syncMqttData.params.echartAssemblyData = data.echartAssemblyData;
+}
+// 获取绑定值类型参数
+export function getVarValueIdsForVarData(data) {
+    const ids = [];
+    if(data && data.length) {
+        data.map((item) => {
+            if(item.varVal) ids.push(item.assetVarIds);
+        })
+    }
+    syncMqttData.params.varVaule = ids;
+}
+// 固定资产详情数据赋值
+export function renderForAssetPoperties(asset, data) {
+    if(!(asset && Object.keys(asset).length)) return;
+    data.map((node) => {
+        if (node.data && Array.isArray(node.data) && node.data.length) {
+            node.data.map((item) => {
+                if (item.key === 'assetKey' && asset[item.value]) {
+                    if (['imgUrl', 'principleImg'].includes(item.value)) {
+                        node.text = '';
+                        node.image = `${syncMqttData.params.pathRewrite}${asset[item.value]}`;
+                    } else {
+                        node.text = asset[item.value];
+                    }
+                }
+            })
+        }
+        if (node.children && node.children.length) {
+            renderForAssetPoperties(asset, node.children);
+        }
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "1.1.6",
+  "version": "2.0.2",
   "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,17 @@
+// element 交互过渡数据
+export const elementInteractivePoor = {};
+// echarts
+export const echartsDataPool = {}; // echarts Dom节点数据
+export const echartsOptionsPool = {}; // echarts options节点数据
+export const echartsRealDataPool = {}; // echarts 实时数据
+
+// tabs
+export const switchTabDataPool = {};
+
+// form
+export const tableDataPool = {};
+export const selectDataPool = {};
+export const selectRealDataPool = {};
+
+// iframe
+export const iframeDataPool = {};

package/store/clear.js

@@ -0,0 +1,72 @@
+import {
+    echartsDataPool,
+    echartsOptionsPool,
+    echartsRealDataPool,
+    switchTabDataPool,
+    tableDataPool,
+    selectDataPool,
+    elementInteractivePoor,
+    selectRealDataPool,
+    iframeDataPool
+} from './actions';
+import {setEventListener} from "../core";
+
+export const clearDataPool = function (){
+    for (let [key, node] of Object.entries(echartsDataPool)) {
+        if(node) {
+            clearInterval(node.timeTicket);
+            if(node.chart) {
+                node.chart.off('mouseover');
+                node.chart.off('mouseout');
+                node.chart.dispose();
+            }
+            if(node.div && node.div.parentNode) node.div.parentNode.removeChild(node.div);
+        }
+        delete echartsDataPool[key];
+    }
+    for (let key of Object.keys(echartsOptionsPool)) {
+        delete echartsOptionsPool[key];
+    }
+    for (let key of Object.keys(echartsRealDataPool)) {
+        delete echartsRealDataPool[key];
+    }
+    for (let key of Object.keys(switchTabDataPool)) {
+        delete switchTabDataPool[key];
+    }
+    for (let key of Object.keys(tableDataPool)) {
+        delete tableDataPool[key];
+    }
+    if(Object.keys(selectDataPool).length) {
+        let dropdownEle = null,
+                dropdownListEle = null;
+        for (let [key, node] of Object.entries(selectDataPool)) {
+            if(!dropdownEle) {
+                dropdownEle = node.dom.selectDropdown;
+                dropdownListEle = node.dom.selectDropdownUl;
+            }
+            if(node.dom.selectEle && node.dom.selectEle.parentNode) node.dom.selectEle.parentNode.removeChild(node.dom.selectEle);
+            delete selectDataPool[key];
+        }
+        if(dropdownEle) dropdownEle.style.display = 'none';
+        if(dropdownListEle) dropdownListEle.innerHTML = '';
+    }
+    for (let key of Object.keys(elementInteractivePoor)) {
+        delete elementInteractivePoor[key];
+    }
+    for (let key of Object.keys(selectRealDataPool)) {
+        delete selectRealDataPool[key];
+    }
+    for (let [key, node] of Object.entries(iframeDataPool)) {
+        node.iframe.parentNode.removeChild(node.iframe);
+        delete iframeDataPool[key];
+    }
+}
+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';
+
 
-}