dcim-topology2d 2.0.8 → 2.2.0

package/core/src/models/pen.js

@@ -131,7 +131,7 @@ var Pen = /** @class */ (function () {
         }
     }
     Pen.prototype.render = function (ctx) {
-        if (!this.visible && !this.visibleSwitch){
+        if (!this.visible && !this.visibleSwitch) {
             return;
         }
         if (this.from && !this.to) {
@@ -150,9 +150,9 @@ var Pen = /** @class */ (function () {
         if (this.lineWidth > 1) {
             ctx.lineWidth = this.lineWidth;
         }
-        if(this.dash === 4) {
+        if (this.dash === 4) {
             ctx.strokeStyle = 'transparent';
-        }else {
+        } else {
             const staticStrokeStyle = this.strokeStyle || '#222';
             ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
         }
@@ -219,19 +219,19 @@ var Pen = /** @class */ (function () {
         }
         for (var _i = 0, _a = this.events; _i < _a.length; _i++) {
             var item = _a[_i];
-            if (item.type !== EventType.Click ) {
+            if (item.type !== EventType.Click) {
                 continue;
             }
             // 画布页面，单击跳转链接事件屏蔽
-            if(item.action === EventAction.Link && window.location.pathname.includes('workspace')){
+            if (item.action === EventAction.Link && window.location.pathname.includes('workspace')) {
                 continue
             }
-            if(item.action === EventAction.Link){
+            if (item.action === EventAction.Link) {
                 this[this.eventFns[item.action]](item.value, item.dcimMenuForType);
-            }else{
+            } else {
                 this[this.eventFns[item.action]] && this[this.eventFns[item.action]](item.value, item.params);
             }
-            if(item.action === 7){
+            if (item.action === 7) {
                 Store.set(this.generateStoreKey('LT:hidePen'), item.value);
             }
         }
@@ -270,10 +270,10 @@ var Pen = /** @class */ (function () {
         // window.open(url, params === undefined ? '_blank' : params);
         var port = window.location.port;
         var href = window.location.href;
-        if(!url.includes("http") && port.includes("3000") && url.includes("id")){
-            url= '/workspace?id=' + url.split('id=')[1]
+        if (!url.includes("http") && port.includes("3000") && url.includes("id")) {
+            url = '/workspace?id=' + url.split('id=')[1]
             // console.log('url:3000===',url)
-        }else if(!url.includes("http://") && href.includes("topologyDetail")){
+        } else if (!url.includes("http://") && href.includes("topologyDetail")) {
             switch (params) {
                 case '1': // 返回上一页
                     let str = href.replace(/\/topologyDetail/g, "")

package/core/src/offscreen.js

@@ -1,8 +1,8 @@
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
@@ -13,7 +13,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
-import { Node } from './models'
+import { Node, Line } from './models'
 import { commonStore } from './store'
 var Offscreen = /** @class */ (function (_super) {
     __extends(Offscreen, _super);
@@ -25,38 +25,38 @@ var Offscreen = /** @class */ (function (_super) {
         Store.set(_this.generateStoreKey('LT:offscreen'), _this.canvas);
         return _this;
     }
-    Offscreen.prototype.getRoutineLayer = function(auto) {
-      if(!auto || auto.includes('ActiveLayer')) {
-        this.activeLayer = Store.get(this.generateStoreKey('LT:ActiveLayer'));
-      }
-      if(!auto || auto.includes('HoverLayer')) {
-        this.hoverLayer = Store.get(this.generateStoreKey('LT:HoverLayer'));
-      }
-      if(!auto || auto.includes('AnimateLayer')) {
-        this.animateLayer = Store.get(this.generateStoreKey('LT:AnimateLayer'));
-      }
+    Offscreen.prototype.getRoutineLayer = function (auto) {
+        if (!auto || auto.includes('ActiveLayer')) {
+            this.activeLayer = Store.get(this.generateStoreKey('LT:ActiveLayer'));
+        }
+        if (!auto || auto.includes('HoverLayer')) {
+            this.hoverLayer = Store.get(this.generateStoreKey('LT:HoverLayer'));
+        }
+        if (!auto || auto.includes('AnimateLayer')) {
+            this.animateLayer = Store.get(this.generateStoreKey('LT:AnimateLayer'));
+        }
     };
     Offscreen.prototype.render = function () {
         _super.prototype.render.call(this);
         var ctx = this.canvas.getContext('2d');
-        if(!commonStore || !commonStore[this.TID]) return;
+        if (!commonStore || !commonStore[this.TID]) return;
         let store = commonStore[this.TID];
         ctx.strokeStyle = store.options.color;
         for (var _i = 0, _a = store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
-            if(!(item instanceof Node)) item = new Node(item);
+            if (!(item instanceof Node) && !(item instanceof Line)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
             item.render(ctx);
         }
-        if(this.activeLayer) {
+        if (this.activeLayer) {
             this.activeLayer.render(ctx);
         }
-        if(this.hoverLayer) {
-          this.hoverLayer.render(ctx);
+        if (this.hoverLayer) {
+            this.hoverLayer.render(ctx);
         }
-        if(this.animateLayer) {
+        if (this.animateLayer) {
             this.animateLayer.render(ctx);
         }
         store = null;

package/core/src/preview.d.ts

@@ -4,6 +4,7 @@ import { Point } from './models';
 import {Common} from './common';
 export declare class Preview extends Common{
     constructor(parent: string | HTMLElement, options?: Options);
+    private eventChangeSubcribe;
     private scheduledAnimationFrame;
     private onMouseMove;
     private onmousedown;

package/core/src/preview.js

@@ -1,5 +1,4 @@
 import {Store} from "le5le-store";
-
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -22,7 +21,8 @@ import {
     formatPadding,
     mousMoveFun,
     mousDownFun,
-    omouseEventPrototDoWindowFn
+    omouseEventPrototDoWindowFn,
+    pageZoom
 } from './utils';
 import {
     resetSelectInteractiveState,
@@ -35,6 +35,24 @@ var Preview = (function (_super) {
         var _this = _super.call(this, parent, options) || this;
         _this.offscreen.getRoutineLayer(['AnimateLayer']);
         _this.scheduledAnimationFrame = false;
+        _this.innerHeight = window.innerHeight || document.documentElement.clientHeight; // 初始化网页高度
+        _this.devicePixelInnerHeight = _this.innerHeight; // 初始化网页缩放高度
+        _this.devicePixelRatio = window.devicePixelRatio; // 初始化窗口分辨率
+        // 选中值发生变化时触发，目前用于日期切换
+        _this.eventChangeSubcribe = Store.subscribe(this.generateStoreKey('EVENT:change'), function (data) {
+            const {node, date} = data;
+            const pickerBindData = _this.store.pickerDataPool.bindData;
+            if(pickerBindData) {
+                // 切换显示日期文字的元件值
+                for (let value of Object.values(pickerBindData)){
+                    if(value.dateId === node.id) {
+                        const pen = _this.store.data.pens[value.order];
+                        pen.text = date.valueStr;
+                    }
+                }
+            }
+            node.formData.realIds ? _this.dispatch('change', node, date) : _this.render(); // eventOut外部事件
+        });
         _this.onMouseMove = function (e) {
             _this.store.data.dataResize = 0;
             // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
@@ -88,7 +106,7 @@ var Preview = (function (_super) {
                 _this.setNodeText();
             }
             resetSelectInteractiveState(_this.moveIn.hoverNode);
-            const {eventType, value, staticType} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
+            const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
                 _this.setAttributeForCanvasPoint('pointer');
                 switch (eventType) {
@@ -111,7 +129,7 @@ var Preview = (function (_super) {
                         _this.switchStaticsCheckType(_this.moveIn.hoverNode, _this.moveIn.eventNode);
                         break;
                     case downDataType.Formselect:
-                        setSelectDropdownInteractiveState(_this.moveIn.hoverNode, staticType, previewType.Dcim);
+                        setSelectDropdownInteractiveState(_this.moveIn.hoverNode, previewType.Dcim);
                         break;
                 }
             }
@@ -181,16 +199,30 @@ var Preview = (function (_super) {
             return false;
         };
         window.onresize = function () {
-            const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
-            if(!isFullScreen && _this.isFullScreen){
-                _this.moveIn.hoverNode.text = '全屏';
+            let isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
+            if((!isFullScreen && _this.isFullScreen) || window.keyControlFullScreen){
+                // F11或ESC退出全屏
+                if(!window.keyControlFullScreen) _this.moveIn.hoverNode.text = '全屏';
                 _this.fitViewPreview(_this.isFullScreen);
                 _this.isFullScreen = false;
+                window.keyControlFullScreen = false;
             }else {
-                // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整，不执行render重绘。通常用于无任何操作事件的topology驾驶舱
-                if(_this.store.options.type === 'topology' || _this.store.options.type === 'pageZoomOnly') return;
-                const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
-                const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
+                const documentElementHeight = window.innerHeight || document.documentElement.clientHeight; // 每次窗口有变化就重新获取一次网页高度
+                if(window.devicePixelRatio !== _this.devicePixelRatio) {
+                    _this.devicePixelInnerHeight = documentElementHeight;
+                    _this.devicePixelRatio = window.devicePixelRatio;
+                }
+                if(_this.devicePixelInnerHeight < documentElementHeight && !isFullScreen) {
+                    // 按F11 全屏
+                    setTimeout(() => {
+                        _this.fitViewPreview(false);
+                        _this.isFullScreen = true;
+                    }, 200);
+                    window.keyControlFullScreen = true;
+                }
+                // topology编辑器或全屏下跳出程序
+                if(_this.store.options.type === 'topology' || window.keyControlFullScreen) return;
+                const zoom = pageZoom();
                 _this.isResize = true;
                 clearTimeout(_this.pageResizeTim);
                 _this.pageResizeTim = setTimeout(() => {
@@ -303,6 +335,7 @@ var Preview = (function (_super) {
     };
     Preview.prototype.destroy = function () {
         this.destroyStatic();
+        if(this.eventChangeSubcribe) this.eventChangeSubcribe.unsubscribe();
         this.onMouseMove = null;
         this.onmousedown = null;
         this.onmouseup = null;

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

@@ -38,7 +38,9 @@ export interface paramsData {
     assetIds?: [],
     areaIds?: [],
     varVaule?: [],
+    branchValue?: [],
     echartData?: [],
+    dataConfig?: {},
     echartAssemblyData?: [],
     routingkey?: string,
     pathRewrite?: string
@@ -56,6 +58,7 @@ export interface visualization2DStore {
         data: visualization2DData;
     }[];
     elementInteractivePoor: {}; // element 交互过渡数据
+    pickerDataPool: {}; // datePicker 交互数据池
     echartsDataPool: {}; // echarts Dom节点数据
     echartsOptionsPool: {}; // echarts options节点数据
     echartsRealDataPool: {}; // echarts 实时数据
@@ -102,7 +105,9 @@ export const createStore = () => {
             assetIds: [],
             areaIds: [],
             varVaule: [],
+            branchValue: [],
             echartData: [],
+            dataConfig: {},
             echartAssemblyData: [],
             routingkey: '',
             pathRewrite: ''
@@ -110,6 +115,7 @@ export const createStore = () => {
         pens: {},
         options: { ...DefalutOptions },
         elementInteractivePoor: {}, // element 交互过渡数据
+        pickerDataPool: {}, // datePicker 交互数据池
         echartsDataPool: {}, // echarts Dom节点数据
         echartsOptionsPool: {}, // echarts options节点数据
         echartsRealDataPool: {}, // echarts 实时数据
@@ -174,6 +180,7 @@ export const clearStore = (store: visualization2DStore, del: string) => {
         assetIds: [],
         areaIds: [],
         varVaule: [],
+        branchValue: [],
         echartData: [],
         echartAssemblyData: [],
         routingkey: '',

package/core/src/store/data.js

@@ -44,7 +44,9 @@ export var createStore = function () {
             assetIds: [],
             areaIds: [],
             varVaule: [],
+            branchValue: [],
             echartData: [],
+            dataConfig: {},
             echartAssemblyData: [],
             routingkey: '',
             pathRewrite: ''
@@ -52,9 +54,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
@@ -68,7 +71,8 @@ export var createStore = function () {
         dpiRatio: 1,
         lastScale: 1,
         monitorAlarm: false,// 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
-        parentElem: null
+        parentElem: null,
+        timeDataPool: {}, // time
     };
 };
 export var useStore = function (id) {
@@ -87,6 +91,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);
@@ -149,7 +154,12 @@ export var clearStore = function (store, del) {
         assetIds: [],
         areaIds: [],
         varVaule: [],
+        branchValue: [],
         echartData: [],
+        dataConfig: store.mqttParams.dataConfig.data ? {
+            data: {},
+            picker: store.mqttParams.dataConfig.picker
+        } : {},
         echartAssemblyData: [],
         routingkey: '',
         pathRewrite: ''
@@ -160,6 +170,7 @@ export var clearStore = function (store, del) {
     store.lastScale = 1;
     store.monitorAlarm = false;
     store.elementInteractivePoor = {};
+    store.pickerDataPool = {};
     store.echartsOptionsPool = {};
     store.echartsRealDataPool = {};
     store.switchTabDataPool = {};
@@ -172,8 +183,10 @@ export var clearStore = function (store, del) {
         iframeDataPool: store.iframeDataPool,
         formoverDataPool: store.formoverDataPool,
         formoverCanvasDataPool: store.formoverCanvasDataPool,
+        timeDataPool: store.timeDataPool
     });
     if(del) {
+        store.mqttParams.dataConfig = {};
         delete commonStore[store.id];
         removeAllElement();
     }

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

@@ -2,7 +2,7 @@
 import {commonStore} from '../store';
 import { setConfItemNode } from '../healps';
 import { EventAction } from '../models';
-
+import {confAssociateDateValueShowType, datePickerValueFormatting} from '../utils';
 /**
  * 在节点注册前初始化node数据
  * @param node 节点数据
@@ -47,14 +47,46 @@ export function initDefaultValidat(node, retData) {
     if (node.name === 'line') {
         node.defaultStrokeStyle = node.strokeStyle;
     }
+    setPickerDateConnectData(node);
+    setVarBranchData(node, retData);
+}
+// 初始化配置日期元件关联的数据
+function setPickerDateConnectData(node) {
+    if(node.formData && node.formData.bindDateShowType === confAssociateDateValueShowType.date) {
+        const pickerData = commonStore[node.TID].pickerDataPool;
+        if(!pickerData.bindData) pickerData.bindData = {};
+        pickerData.bindData[node.id] = {
+            order: node.order,
+            dateId: node.formData.dateId
+        };
+        node.text = datePickerValueFormatting({
+            formatType: node.formData.dateFormat,
+            valueType: node.formData.valueType
+        }).dateStr;
+    }
+}
+// 设置变量类型和支路地址的异步数据
+function setVarBranchData(node, retData) {
+    if(!retData) return;
+    const componentData = retData.componentData;
+    let varData = null;
+    let branchNameData = null;
+    if(componentData) {
+        varData = componentData[node.id] || {};
+        branchNameData = componentData[node.id] || {};
+    }else {
+        varData = retData.varData;
+        branchNameData = retData.branchNameData;
+    }
+    const dataDictionary = {...varData, ...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('显示图标>>>');
@@ -142,15 +174,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'){
         // 下拉显示隐藏
@@ -170,4 +197,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/construction.d.ts

@@ -43,8 +43,32 @@ export interface SelectStaticType {
     dataShow?:number;
     visible?:number;
 }
+export interface DatePickerBindType {
+    echarts?:number;
+    tag?:number;
+    kpi?:number;
+    asset?:number;
+    area?:number;
+    varType?:number;
+    branch?:number;
+    word?:number;
+}
+export interface ConfBindValueType {
+    increment?:number; // 增量值
+    current?:number; // 当前值
+    max?:number; // 最大值
+    min?:number; // 最小值
+    average?:number; // 平均值
+}
+export interface ConfAssociateDateValueShowType {
+    real?:number; // 实时值
+    date?:number; // 日期值
+}
 export const moveDataType: MoveDataType;
 export const downDataType: DownDataType;
 export const previewType: PreviewType;
 export const animateType: AnimateType;
 export const selectStaticType: SelectStaticType;
+export const datePickerBindType: DatePickerBindType;
+export const confBindValueType: ConfBindValueType;
+export const confAssociateDateValueShowType: ConfAssociateDateValueShowType;

package/core/src/utils/construction.js

@@ -1,4 +1,4 @@
-export const echartsStaticType = ['DAY', 'WEEK', 'MONTH', 'YEAR', 'REALTIME'];
+export const echartsStaticType = ['DAY', 'WEEK', 'MONTH', 'YEAR', 'REALTIME', 'CUSTOMIZE'];
 export const winEventActionFns = ['Link', 'DoAnimate', 'DoFn', 'DoWindowFn', 'openImg'];
 export const moveDataType = {
     None: 0,
@@ -40,4 +40,25 @@ export const selectStaticType = {
     static: 1,
     dataShow: 2,
     visible: 3
+};
+export const datePickerBindType = {
+    echarts: 1, // echart
+    tag: 3, // 测点
+    kpi: 6, // 指标
+    asset: 9, // 资产
+    area: 21, // 区域
+    varType: 12, // 变量类型
+    branch: 15, // 支路地址
+    word: -1 // 文字
+};
+export const confBindValueType = {
+    increment: 1, // 增量值
+    current: 2, // 当前值
+    max: 3, // 最大值
+    min: 4, // 最小值
+    average: 5 // 平均值
+};
+export const confAssociateDateValueShowType = {
+    real: 1, // 实时值
+    date: 2 // 日期值
 };

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

@@ -1,4 +1,7 @@
 import {Node} from "../models";
+export declare function pageZoom(): number;
+export declare function datePickerValueFormatting(data: {}): {};
+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, visible: boolean): void;
 export declare function getEchartsRealData(node: {}, data: []): void;
@@ -8,4 +11,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): [];