dcim-topology2d 2.0.7 → 2.1.0

package/core/src/store/data.d.ts

@@ -26,6 +26,7 @@ export interface visualization2DData {
     mqttTopics?: string;
     manualCps?: boolean;
     dataConstruct?: any;
+    bindDataTooltipVisible?: boolean;
     data?: any;
     bkImageRect?: any;
 }
@@ -37,6 +38,7 @@ export interface paramsData {
     assetIds?: [],
     areaIds?: [],
     varVaule?: [],
+    branchValue?: [],
     echartData?: [],
     echartAssemblyData?: [],
     routingkey?: string,
@@ -55,6 +57,7 @@ export interface visualization2DStore {
         data: visualization2DData;
     }[];
     elementInteractivePoor: {}; // element 交互过渡数据
+    pickerDataPool: {}; // datePicker 交互数据池
     echartsDataPool: {}; // echarts Dom节点数据
     echartsOptionsPool: {}; // echarts options节点数据
     echartsRealDataPool: {}; // echarts 实时数据
@@ -88,7 +91,8 @@ export const createStore = () => {
             mqttOptions: {
                 clientId: s8()
             },
-            dataConstruct: {}
+            dataConstruct: {},
+            bindDataTooltipVisible: true
         },
         mqttData: null,
         initConfNode: {},
@@ -100,6 +104,7 @@ export const createStore = () => {
             assetIds: [],
             areaIds: [],
             varVaule: [],
+            branchValue: [],
             echartData: [],
             echartAssemblyData: [],
             routingkey: '',
@@ -108,6 +113,7 @@ export const createStore = () => {
         pens: {},
         options: { ...DefalutOptions },
         elementInteractivePoor: {}, // element 交互过渡数据
+        pickerDataPool: {}, // datePicker 交互数据池
         echartsDataPool: {}, // echarts Dom节点数据
         echartsOptionsPool: {}, // echarts options节点数据
         echartsRealDataPool: {}, // echarts 实时数据
@@ -159,7 +165,8 @@ export const clearStore = (store: visualization2DStore, del: string) => {
         mqttOptions: {
             clientId: s8()
         },
-        dataConstruct: {}
+        dataConstruct: {},
+        bindDataTooltipVisible: true
     };
     store.mqttData = null;
     store.initConfNode = {};
@@ -171,6 +178,7 @@ export const clearStore = (store: visualization2DStore, del: string) => {
         assetIds: [],
         areaIds: [],
         varVaule: [],
+        branchValue: [],
         echartData: [],
         echartAssemblyData: [],
         routingkey: '',

package/core/src/store/data.js

@@ -13,7 +13,7 @@ import { default as mitt } from 'mitt';
 import { Lock } from '../models';
 import {DefalutOptions} from '../options';
 import {s8} from '../utils';
-import {commonStore} from './common'
+import {commonStore} from './common';
 import {removeAllElement} from '../../../store';
 export var createStore = function () {
     return {
@@ -31,7 +31,8 @@ export var createStore = function () {
             mqttOptions: {
                 clientId: s8()
             },
-            dataConstruct: {}
+            dataConstruct: {},
+            bindDataTooltipVisible: true
         },
         mqttData: null,
         initConfNode: {},
@@ -43,6 +44,7 @@ export var createStore = function () {
             assetIds: [],
             areaIds: [],
             varVaule: [],
+            branchValue: [],
             echartData: [],
             echartAssemblyData: [],
             routingkey: '',
@@ -51,9 +53,10 @@ export var createStore = function () {
         pens: {},
         options: { ...DefalutOptions },
         elementInteractivePoor: {}, // element 交互过渡数据
+        pickerDataPool: {}, // datePicker 交互数据池
         echartsDataPool: {}, // echarts Dom节点数据
         echartsOptionsPool: {}, // echarts options节点数据
-        echartsRealDataPool: {}, // echarts 实时数据
+        echartsRealDataPool: {}, // echarts 实时数据 datePicker
         switchTabDataPool: {}, // tabs
         tableDataPool: {}, // form table
         selectDataPool: {}, // form select
@@ -67,7 +70,8 @@ export var createStore = function () {
         dpiRatio: 1,
         lastScale: 1,
         monitorAlarm: false,// 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
-        parentElem: null
+        parentElem: null,
+        timeDataPool: {}, // time
     };
 };
 export var useStore = function (id) {
@@ -86,6 +90,7 @@ export function clearElementDataPool(data) {
             if(node.chart) {
                 node.chart.off('mouseover');
                 node.chart.off('mouseout');
+                node.chart.off('globalout');
                 node.chart.dispose();
             }
             if(node.div && node.div.parentNode) node.div.parentNode.removeChild(node.div);
@@ -136,7 +141,8 @@ export var clearStore = function (store, del) {
         mqttOptions: {
             clientId: s8()
         },
-        dataConstruct: {}
+        dataConstruct: {},
+        bindDataTooltipVisible: true
     };
     store.initConfNode = {};
     store.mqttParams = {
@@ -147,6 +153,7 @@ export var clearStore = function (store, del) {
         assetIds: [],
         areaIds: [],
         varVaule: [],
+        branchValue: [],
         echartData: [],
         echartAssemblyData: [],
         routingkey: '',
@@ -158,6 +165,7 @@ export var clearStore = function (store, del) {
     store.lastScale = 1;
     store.monitorAlarm = false;
     store.elementInteractivePoor = {};
+    store.pickerDataPool = {};
     store.echartsOptionsPool = {};
     store.echartsRealDataPool = {};
     store.switchTabDataPool = {};
@@ -170,6 +178,7 @@ export var clearStore = function (store, del) {
         iframeDataPool: store.iframeDataPool,
         formoverDataPool: store.formoverDataPool,
         formoverCanvasDataPool: store.formoverCanvasDataPool,
+        timeDataPool: store.timeDataPool
     });
     if(del) {
         delete commonStore[store.id];

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

@@ -3,4 +3,5 @@ import {Node} from '../models';
 export declare function setInitNodeDataValidat(node: any, TID: string, type: string, order: number): void;
 export declare function initDefaultValidat(node: any, retData: any): void;
 export declare function setDefaultNodeValidat(node: any, retData: any): any;
-export declare function setConnectionTagForConf(node: Node): void;
+export declare function setConnectionTagForConf(node: Node): void;
+export declare function setConnectionTabsData(node: Node): void;

package/core/src/utils/assignment.js

@@ -16,7 +16,12 @@ export function setInitNodeDataValidat(node, TID, type, order) {
 
     node.TID = TID;
 
-    node.visibleSwitch = type === 'topology' && node.visibleSwitch;
+    if(typeof node.visibleSwitch !== 'boolean') {
+        // 兼容旧版显示隐藏属性值设置
+        node.visibleSwitch = type === 'topology';
+    }else {
+        node.visibleSwitch = type === 'topology' && node.visibleSwitch;
+    }
 
     if(typeof order === "number") node.order = order;
     if(type !== 'topology') node.selectDropdown = false;
@@ -42,14 +47,15 @@ export function initDefaultValidat(node, retData) {
     if (node.name === 'line') {
         node.defaultStrokeStyle = node.strokeStyle;
     }
+    const dataDictionary = retData && {...retData.varData, ...retData.branchNameData} || {};
     // 变量类型数据展示，不需要实时更新
-    if(Array.isArray(node.data) && retData && retData.varData) {
+    if(Array.isArray(node.data) && Object.keys(dataDictionary).length) {
         let typeName = '';
         let imgs = '';
-        const varData = retData.varData;
+        const assetId = retData.asset && retData.asset.assetId;
         node.data.map((vd) => {
-            if(vd.key.includes('varValue') && varData[vd.value]){
-                const varNode = varData[vd.value];
+            const varNode = dataDictionary[vd.value] || dataDictionary[`${assetId}_${vd.value}`];
+            if((vd.key.includes('varValue') || vd.key.includes('branchVal')) && varNode){
                 const showType = varNode.showType ? parseInt(varNode.showType) : 1;
                 if(showType === 1 && varNode.value) typeName += typeName ? `,${varNode.value}` : varNode.value;
                 if(showType === 2 && varNode.value) console.log('显示图标>>>');
@@ -137,15 +143,10 @@ export function setConnectionTagForConf(node) {
         if(t === 'statisticType' || t.includes('switchTabType')) setType = 'tab';
         if(t.includes('selectOption')) setType = 'selectShow';
     });
-    const isTabs = node.events && node.events.find((ev) => ev.action === 8);
-    if(!setType && isTabs) console.log('>>>未能找到绑定的标签数据，请检查绑定的Tabs标签是否包含switchTabType前缀>>>');
+    if(!setType) console.log('>>>未能找到绑定的标签数据，请检查绑定的Tabs标签是否包含switchTabType前缀>>>');
     if(setType === 'tab'){
         // tab切换
-        const tagData = node.tags[0];
-        let topologyChangeData = commonStore[node.TID].switchTabDataPool;
-        let keyName = node.bindStaticId ? `${tagData}Data` : `${tagData}AreaData`;
-        if (!topologyChangeData[keyName]) topologyChangeData[keyName] = {};
-        topologyChangeData[keyName][node.id] = node;
+        setConnectionTabsData(node);
     }
     if(setType === 'selectShow'){
         // 下拉显示隐藏
@@ -165,4 +166,20 @@ export function setConnectionTagForConf(node) {
             commonStore[node.TID].selectTabDataPool[parentId].set(node.id, params);
         }
     }
+}
+
+/**
+ * 初始化配置tabs数据
+ * @param node
+ */
+export function setConnectionTabsData(node) {
+    const switchTabType = node.tags.find((t) => {
+        return t.includes('switchTabType');
+    }); // 获取按钮组类型
+    if(!switchTabType) return;
+    const isTabs = node.events && node.events.find((ev) => ev.action === 8);
+    let topologyChangeData = commonStore[node.TID].switchTabDataPool;
+    let keyName = node.bindStaticId && isTabs ? `${switchTabType}Data` : `${switchTabType}AreaData`;
+    if (!topologyChangeData[keyName]) topologyChangeData[keyName] = {};
+    topologyChangeData[keyName][node.id] = node;
 }

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

@@ -1,6 +1,7 @@
 import {Node} from "../models";
+export declare function getTabConnectSHConf(node: Node): Node;
 export declare function tabStaticOperation(type: string, node: Node, areaData: any, params: object): void;
-export declare function tabHideShowOperation(node: any, areaData: any): void;
+export declare function tabHideShowOperation(node: any, areaData: any, visible: boolean): void;
 export declare function getEchartsRealData(node: {}, data: []): void;
 export declare function setInitConfData(id: string, data: object): void;
 export declare function setTagIdData(data: any): [];
@@ -8,4 +9,5 @@ export declare function setKpiAddrData(data: any): [];
 export declare function setAssetIdData(data: any): [];
 export declare function setAreaIdData(data: any): [];
 export declare function setVarValueData(data: any): [];
+export declare function setBranchAddressData(data: any): [];
 export declare function setThreeCategoryIdData(pen: Node, data: any): [];

package/core/src/utils/conversion.js

@@ -1,7 +1,40 @@
 import {commonStore} from '../store';
 import {setElementSwitchTabState} from '../element';
 import {echartsStaticType} from '../utils';
-
+// tab切换页签删除数据处理
+export function getTabConnectSHConf(node) {
+    const switchTabType = node.tags.find((t) => {
+        return t.includes('switchTabType');
+    }); // 获取按钮组类型
+    const topologyChangeData = commonStore[node.TID].switchTabDataPool;
+    const tabAreaData = topologyChangeData[`${switchTabType}AreaData`];
+    const bindConfIds = node.bindStaticId.split(','); // tab元件绑定的元件id
+    const currentNode = [{...node}]; // 需要删除的关联元件数据
+    for (let i = 0; i < bindConfIds.length; i++) {
+        const id = bindConfIds[i];
+        if(tabAreaData[id]) {
+            currentNode.push(tabAreaData[id]);
+            delete tabAreaData[id];
+        }
+    }
+    const changeData = topologyChangeData[`${switchTabType}Data`];
+    delete changeData[node.id];
+    if(Object.keys(changeData).length) {
+        // 第一个页签设置选中效果
+        const firstNode = Object.values(changeData)[0];
+        firstNode.activeImgeIndex = false;
+        const firstNodeBindConfIds = firstNode.bindStaticId.split(','); // tab元件绑定的元件id
+        // 为绑定的每个元件设置可见
+        for (let i = 0; i < firstNodeBindConfIds.length; i++) {
+            const tabAreaNode = tabAreaData[firstNodeBindConfIds[i]];
+            if(tabAreaNode) {
+                tabAreaNode.visible = true;
+                tabAreaNode.visibleSwitch = true;
+            }
+        }
+    }
+    return currentNode;
+}
 /**
  * Tab 数据统计
  * @param type 统计类型
@@ -38,8 +71,9 @@ export function tabStaticOperation(type, node, areaData, params) {
  * Tab 显示/隐藏切换
  * @param node tab页签数据
  * @param areaData // tab展示区域数据
+ * @param isActive
  */
-export function tabHideShowOperation(node, areaData) {
+export function tabHideShowOperation(node, areaData, isActive) {
     const confIds = node.bindStaticId && node.bindStaticId.split(',') || [];
     const pens = commonStore[node.TID].data.pens;
     for (let i = 0; i < confIds.length; i++) {
@@ -47,7 +81,7 @@ export function tabHideShowOperation(node, areaData) {
         const areaNode = areaData[confid];
         if(!(areaNode && pens[areaNode.order])) return;
         const tagNode = pens[areaNode.order];
-        tagNode.visible = !(node.id !== node.id);
+        tagNode.visible = !isActive;
         setElementSwitchTabState(tagNode);
     }
 }
@@ -154,6 +188,15 @@ export function setVarValueData(data) {
         "value": data.name
     }];
 }
+export function setBranchAddressData(data) {
+    return [{
+        "key": "branchVal",
+        "value": data.value
+    }, {
+        "key": "支路地址Key",
+        "value": data.key
+    }];
+}
 export function setThreeCategoryIdData(pen, data) {
     let params = [];
     const hasThreeCategoryId = pen.data.find((tc) => {

package/core/src/utils/onmousevent.js

@@ -34,18 +34,20 @@ export function mousMoveFun(type, pos, data) {
 
     for (var _i = 0, _a = data; _i < _a.length; _i++) {
         var item = _a[_i];
-        //const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
-        let isInPointNode = null;
-        if(item.name === 'arbitraryGraph') {
-            // 任意多边形通过点获取区域
-            isInPointNode = ptInPolyXY(pos, item.rotatedAnchors);
-        }else {
-            if(!(item instanceof Node)) item = new Node(item);
-            isInPointNode = item.hit(pos);
-        }
-        if(isInPointNode) {
-            params.hoverNode = item;
-            params.order = _i;
+        if(item.visible) {
+            //const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
+            let isInPointNode = null;
+            if(item.name === 'arbitraryGraph') {
+                // 任意多边形通过点获取区域
+                isInPointNode = ptInPolyXY(pos, item.rotatedAnchors);
+            }else {
+                if(!(item instanceof Node)) item = new Node(item);
+                isInPointNode = item.hit(pos);
+            }
+            if(isInPointNode) {
+                params.hoverNode = item;
+                params.order = _i;
+            }
         }
     }
     // 不在此节点上停留
@@ -63,6 +65,7 @@ export function mousMoveFun(type, pos, data) {
 }
 export function mousDownFun(type, eventNode) {
     let params = {};
+    if(eventNode === null) return params;
     const action = eventNode ? parseInt(eventNode.action) : 0;
     if(action === 3) {
         params.eventType = downDataType.Window; // 打开会话窗口

package/core/src/utils/params.js

@@ -20,6 +20,7 @@ export function filterParams(id, node) {
     let tagEcharts = [];
     let echartData = [];
     let varVaule = [];
+    let branchValue = [];
     let doorIds = [];
     let isMqttEventType = false;
     node.events.map((ev) => {
@@ -45,6 +46,9 @@ export function filterParams(id, node) {
             if (item.key.includes('varValue')) {
                 varVaule.push(item.value);
             }
+            if (item.key === 'branchVal') {
+                branchValue.push(item.value);
+            }
         })
     }
     if (node.data && Object.prototype.toString.call(node.data) === '[object Object]' && node.data.params && node.data.params.id) {
@@ -55,6 +59,7 @@ export function filterParams(id, node) {
     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.branchValue = [...commonStore[id].mqttParams.branchValue, ...branchValue];
     commonStore[id].mqttParams.tagEcharts = [...commonStore[id].mqttParams.tagEcharts, ...tagEcharts];
     commonStore[id].mqttParams.echartData = [...commonStore[id].mqttParams.echartData, ...echartData];
 }

package/package.json

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

package/static/echartsDefaultData.js

@@ -140,21 +140,32 @@ export const echartsTypeMap = {
 };
 // 图表颜色
 export const echartsColorData = [
+    '#2648E9',
+    '#E513F7',
+    '#79E10E',
+    '#0D9BE7',
+    '#23CEE2',
+    '#E5B903',
+    '#2BDB8E',
+    '#CAD804',
+    '#117BEE',
+    '#DB8407',
+    '#E72B2B',
+    '#E96812',
+    '#7612D6',
+    '#A117B8',
+    'rgb(21, 151, 224)',
     '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)'];
 // TOP排行榜默认颜色
 export const rankingTopColorList = [

package/style/common.css

@@ -12,7 +12,4 @@ li {
 .canvas-point,
 .canvas-point.default{
   cursor: default;
-}
-.canvas-point.pointer > div{
-  z-index: -2;
 }

package/style/datePicker.css

@@ -0,0 +1,44 @@
+.topology-datePicker{
+    position: relative;
+    box-sizing: border-box;
+}
+.topology-datePicker i{
+    display: inline-block;
+}
+.topology-datePicker input{
+    width: 100%;
+    height: 100%;
+    line-height: 100%;
+    border: none;
+    background: transparent;
+    vertical-align: top;
+}
+.topology-datePicker input::placeholder{
+    font-weight: normal;
+    color: rgb(220, 223, 230);
+}
+.topology-datePicker input:active,
+.topology-datePicker input:focus{
+    outline: none;
+}
+.topology-datePicker .icon-date,
+.topology-datePicker .icon-arrow{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.layui-laydate-main{
+    width: 322px !important;
+}
+.layui-laydate-main table{
+    width: 100%;
+}
+.layui-laydate-header i{
+    font-size: 14px !important;
+}
+.laydate-set-ym {
+    font-size: 16px;
+}
+.layui-laydate-footer span.layui-laydate-preview{
+    font-size: 14px;
+}

package/style/editor.css

@@ -4,6 +4,9 @@
 /*.canvas-point{*/
 /*    z-index: 6;*/
 /*}*/
+.canvas-point.pointer > div{
+    z-index: -2;
+}
 .topoEchart,
 .topology-select{
     z-index: 1;

package/style/index.css

@@ -1,4 +1,5 @@
 @import './common.css';
 @import './select.css';
+@import './datePicker.css';