dcim-topology2d 2.2.0 → 2.2.2

package/core/src/common.js

@@ -1,9 +1,9 @@
-import {Store} from 'le5le-store';
-import {DivLayer} from './divLayer';
-import {AnimateLayer} from './animateLayer';
-import {RenderLayer} from './renderLayer';
-import {Offscreen} from './offscreen';
-import {Line, Node, Point} from './models';
+import { Store } from 'le5le-store';
+import { DivLayer } from './divLayer';
+import { AnimateLayer } from './animateLayer';
+import { RenderLayer } from './renderLayer';
+import { Offscreen } from './offscreen';
+import { Line, Node, Point } from './models';
 import {
     s8,
     formatPadding,
@@ -16,8 +16,9 @@ import {
     tabHideShowOperation,
     tabStaticOperation, pageZoom
 } from './utils';
-import {useStore, clearStore, commonStore} from './store'
+import { useStore, clearStore, commonStore } from './store'
 import * as mqtt from './mqtt.min';
+import { tabsPageContentData } from "../../store";
 var MoveInType;
 (function (MoveInType) {
     MoveInType[MoveInType["None"] = 0] = "None";
@@ -35,6 +36,7 @@ var Common = /** @class */ (function () {
     function Common(parent, options) {
         var _this = this;
         _this.moveInType = MoveInType;
+        this.tabsContentOptions = {};
         this.mouseDown = null;
         this.renderTimer = 0;
         this.lastRender = 0;
@@ -102,24 +104,24 @@ var Common = /** @class */ (function () {
             if (_this.moveIn.hoverNode) {
                 _this.dispatch('dblclick', _this.moveIn.hoverNode);
                 if (_this.moveIn.hoverNode
-                        .getTextRect()
-                        .hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
+                    .getTextRect()
+                    .hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
                     _this.showInput(_this.moveIn.hoverNode);
                 }
                 _this.moveIn.hoverNode.dblclick();
             } else if (_this.moveIn.hoverLine) {
                 _this.dispatch('dblclick', _this.moveIn.hoverLine);
                 if (!_this.moveIn.hoverLine.text ||
-                        _this.moveIn.hoverLine
-                                .getTextRect()
-                                .hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
+                    _this.moveIn.hoverLine
+                        .getTextRect()
+                        .hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
                     _this.showInput(_this.moveIn.hoverLine);
                 }
                 _this.moveIn.hoverLine.dblclick();
             }
         };
         this.openCount = 0;
-        this.lastTranlated = {x: 0, y: 0};
+        this.lastTranlated = { x: 0, y: 0 };
         this.moveIn = {
             type: 'None',
             order: 0,
@@ -170,10 +172,10 @@ var Common = /** @class */ (function () {
         this.createMarkdownTip();
         window.topology = this;
     }
-    Common.prototype.categoryDataParams = function (data){
+    Common.prototype.categoryDataParams = function (data) {
         getParams(this.id, data);
     };
-    Common.prototype.getParams = function (assetId){
+    Common.prototype.getParams = function (assetId) {
         const params = {
             doorIds: this.store.mqttParams.doorIds,
             tagIds: this.store.mqttParams.tagIds.join(","),
@@ -185,28 +187,28 @@ var Common = /** @class */ (function () {
             dataConfig: this.store.mqttParams.dataConfig.data
         }
         if (this.store.mqttParams.echartAssemblyData.length) params.echartAssemblyData = [...this.store.mqttParams.echartAssemblyData];
-        if(assetId) {
+        if (assetId) {
             params.varValueIds = this.store.mqttParams.varVaule.join(",");
             params.branchAddrs = this.store.mqttParams.branchValue.join(",");
-        }else {
-            if(this.store.mqttParams.assetIds.length && this.store.mqttParams.varVaule.length) {
-                const assetId = this.store.mqttParams.assetIds[this.store.mqttParams.assetIds.length -1];
-                for(let va = 0; va < this.store.mqttParams.varVaule.length; va++) {
+        } else {
+            if (this.store.mqttParams.assetIds.length && this.store.mqttParams.varVaule.length) {
+                const assetId = this.store.mqttParams.assetIds[this.store.mqttParams.assetIds.length - 1];
+                for (let va = 0; va < this.store.mqttParams.varVaule.length; va++) {
                     this.store.mqttParams.varVaule[va] = `${assetId}_${this.store.mqttParams.varVaule[va]}`;
                 }
                 params.varValueIds = this.store.mqttParams.varVaule.join(",");
-            }else {
+            } else {
                 params.varVaule = this.store.mqttParams.varVaule.join(",");
             }
         }
         return params;
     };
     // 根据图表id数据获取测点数据
-    Common.prototype.getTagIdsForEchartsIds = function (data){
+    Common.prototype.getTagIdsForEchartsIds = function (data) {
         this.store.mqttParams.echartAssemblyData = data;
     };
     // 根据指标地址数据获取测点数据
-    Common.prototype.getTagIdsForKpiAddrs = function (data){
+    Common.prototype.getTagIdsForKpiAddrs = function (data) {
         let tagIds = [];
         data.map((item) => {
             tagIds.push(item.tagId);
@@ -214,23 +216,23 @@ var Common = /** @class */ (function () {
         this.store.mqttParams.tagIds = tagIds;
     };
     // 获取绑定值类型参数
-    Common.prototype.getVarValueIdsForVarData = function (data){
+    Common.prototype.getVarValueIdsForVarData = function (data) {
         const ids = [];
         data.map((item) => {
-            if(item.varVal) ids.push(item.assetVarIds);
+            if (item.varVal) ids.push(item.assetVarIds);
         })
         this.store.mqttParams.varVaule = ids;
     };
-    Common.prototype.getBranchValueIdsForBranchsData = function (data){
+    Common.prototype.getBranchValueIdsForBranchsData = function (data) {
         const ids = [];
         data.map((item) => {
-            if(item.branchAddr) ids.push(`${item.assetId}_${item.branchAddr}`);
+            if (item.branchAddr) ids.push(`${item.assetId}_${item.branchAddr}`);
         })
         this.store.mqttParams.branchValue = ids;
     };
     // 固定资产详情数据赋值
-    Common.prototype.renderForAssetPoperties = function (asset, data){
-        if(!Object.keys(asset).length) return;
+    Common.prototype.renderForAssetPoperties = function (asset, data) {
+        if (!Object.keys(asset).length) return;
         data.map((node) => {
             if (node.data && Array.isArray(node.data) && node.data.length) {
                 node.data.map((item) => {
@@ -253,15 +255,15 @@ var Common = /** @class */ (function () {
     Common.prototype.conversionData = function (obj) {
         this.clear();
         if (!obj) {
-            obj = {pens: []};
+            obj = { pens: [] };
         }
         let data = JSON.parse(JSON.stringify(obj));
         Object.assign(this.store.data, data);
         // topology编辑器下跳出程序
-        if(this.store.options.type !== 'topology') {
+        if (this.store.options.type !== 'topology') {
             const zoom = pageZoom();
             this.store.data.pageZoom = zoom;
-            this.store.parentElem.style.transform = `scale(${1/zoom})`;
+            this.store.parentElem.style.transform = `scale(${1 / zoom})`;
             this.store.parentElem.style.transformOrigin = '0 0';
             this.store.parentElem.parentElement.style.overflow = 'hidden';
             Store.set('PAGE:zoom', zoom);
@@ -270,27 +272,28 @@ var Common = /** @class */ (function () {
         this.openCount = 0
         const type = this.store.options.type;
         // for old data.
-        if (data.nodes) {
-            for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
-                setInitNodeDataValidat(_a[_i], this.id, type, _i);
-                const item = new Node(_a[_i]);
-                this.store.data.pens.push(item);
-                ///this.store.pens[item.id] = item;
-                setConnectionTagForConf(item);
-            }
-            for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
-                _c[_b].TID = this.id;
-                const item = new Line(_c[_b]);
-                this.store.data.pens.push(item);
-                //this.store.pens[item.id] = item;
-            }
-        }
+        // if (data.nodes) {
+        //     for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
+        //         setInitNodeDataValidat(_a[_i], this.id, type, _i);
+        //         const item = new Node(_a[_i]);
+        //         this.store.data.pens.push(item);
+        //         ///this.store.pens[item.id] = item;
+        //         setConnectionTagForConf(item);
+        //     }
+        //     for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
+        //         _c[_b].TID = this.id;
+        //         const item = new Line(_c[_b]);
+        //         this.store.data.pens.push(item);
+        //         //this.store.pens[item.id] = item;
+        //     }
+        // }
+        this.conversionTabsPageData();
         // end.
         if (data.pens) {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
                 const item = _e[_d];
                 if (!item.from) {
-                    setInitNodeDataValidat(item, this.id, type, _d);
+                    setInitNodeDataValidat(item, this.id, type, _d, this.tabsContentOptions);
                     const node = new Node(item);
                     this.store.data.pens.push(node);
                     //this.store.pens[item.id] = node;
@@ -303,7 +306,28 @@ var Common = /** @class */ (function () {
             }
         }
     };
-    Common.prototype.clear = function (del){
+    //
+    Common.prototype.conversionTabsPageData = function () {
+        // tabs页面切换，页面数据更新
+        const pageId = this.tabsContentOptions.pageId;
+        if (!pageId) return;
+        const tabsPageMasterData = this.store.tabsPageMasterData.get('main');
+        for (let i = 0; i < tabsPageMasterData.length; i++) {
+            const node = tabsPageMasterData[i];
+            const eventNode = node.events[0];
+            if (eventNode && eventNode.dcimDetailPage) node.activeImgeIndex = eventNode.dcimDetailPage !== pageId;
+            this.store.data.pens.push(new Node(node));
+        }
+    };
+    Common.prototype.clearTabsPageData = function () {
+        if (!this.store.tabsPageMasterData.size) return;
+        this.store.tabsPageMasterData.clear();
+        this.tabsContentOptions = {};
+        for (let key of Object.keys(tabsPageContentData)) {
+            delete tabsPageContentData[key];
+        }
+    };
+    Common.prototype.clear = function (del) {
         clearStore(this.store, del);
         this.canvas.clearBkImg();
         this.divLayer.clear();
@@ -316,7 +340,7 @@ var Common = /** @class */ (function () {
             //this.canvas.bkImgRectResize(size);
             this.offscreen.resize(size);
             this.divLayer.resize(size);
-        }catch (err) {
+        } catch (err) {
             //console.log('resize-----', err)
         }
     };
@@ -342,7 +366,7 @@ var Common = /** @class */ (function () {
             this.offscreen.render();
             this.canvas.render();
             this.rendering = false;
-        }catch (e) {
+        } catch (e) {
             //console.log(e)
         }
     };
@@ -370,7 +394,7 @@ var Common = /** @class */ (function () {
     };
     // 监听表格数据变化
     Common.prototype.subcribeSyncTableData = function (data) {
-        const {tableNodes, paginationNodes} = Store.get('FORM:tableData').data;
+        const { tableNodes, paginationNodes } = Store.get('FORM:tableData').data;
         if (data && Object.keys(tableNodes).length > 0) {
             const updateNodes = [];
             for (let key of Object.keys(data)) {
@@ -485,15 +509,16 @@ var Common = /** @class */ (function () {
     };
     Common.prototype.switchStaticsCheckType = function (node, staticTypeNode) {
         const staticType = staticTypeNode.dcimStaticForType;
-        if(!staticType || staticType === 'NONE') return;
+        if (staticType === 'PAGE') return this.dispatch('change', node, { id: staticTypeNode.dcimDetailPage, type: 'tabs:page' });
+        if (!staticType || staticType === 'NONE') return;
         // 点击切换统计图统计类别
         const switchTabData = node.tags.find((t) => {
             return t.includes('switchTabType');
         }); // 获取按钮组类型
-        if(!switchTabData) return;
+        if (!switchTabData) return;
         const topologyChangeData = commonStore[node.TID].switchTabDataPool; // 获取所有按钮组和按类型统计图组数据
         const changeNode = topologyChangeData[`${switchTabData}Data`]; // 分别获取按钮组数据
-        if(!changeNode || !changeNode[node.id]) return;
+        if (!changeNode || !changeNode[node.id]) return;
         // 如果存在按钮组节点数据
         const tabAreaData = topologyChangeData[`${switchTabData}AreaData`];
         let tabIndex = 0;
@@ -502,15 +527,15 @@ var Common = /** @class */ (function () {
         };
         for (let switchNode of Object.values(changeNode)) {
             const penNode = this.store.data.pens[switchNode.order];
-            if(!penNode) return;
+            if (!penNode) return;
             const isActive = switchNode.id !== node.id;
-            if(!isActive) {
+            if (!isActive) {
                 visitParams.order = tabIndex;
                 visitParams.data = switchNode.tabData;
             }
             penNode.activeImgeIndex = isActive;
             tabIndex++;
-            if(staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData, isActive); // 对显示隐藏的功能进行交互处理
+            if (staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData, isActive); // 对显示隐藏的功能进行交互处理
         }
         // 对绑定的图表进行数据处理
         tabStaticOperation(staticType, node, tabAreaData, visitParams);
@@ -531,9 +556,9 @@ var Common = /** @class */ (function () {
     };
     Common.prototype.showInput = function (item) {
         if (this.store.data.locked ||
-                item.locked ||
-                item.hideInput ||
-                this.store.options.hideInput) {
+            item.locked ||
+            item.hideInput ||
+            this.store.options.hideInput) {
             return;
         }
         this.inputObj = item;
@@ -626,12 +651,13 @@ var Common = /** @class */ (function () {
         this.tipMarkdown.style.borderRadius = '6px';
         this.tipMarkdown.style.whiteSpace = 'nowrap';
         this.tipMarkdown.id = 'tipMarkdownBytopo'
+        this.tipMarkdown.className = 'tipMarkdownBytopo'
         document.body.appendChild(this.tipMarkdown);
     };
     Common.prototype.showTip = function (data, pos) {
         if (!data ||
-                (!data.markdown && !data.tipId && !data.title) || !data.title ||
-                data.id === this.tip) {
+            (!data.markdown && !data.tipId && !data.title) || !data.title ||
+            data.id === this.tip) {
             return;
         }
         data.markdown = data.title
@@ -707,7 +733,7 @@ var Common = /** @class */ (function () {
         this.tip = '';
     };
     Common.prototype.dispatch = function (event, node, data) {
-        if(!this.store || !this.store.options) return;
+        if (!this.store || !this.store.options) return;
         if (this.store.options.on) {
             this.store.options.on(event, node, data);
         }
@@ -725,8 +751,8 @@ var Common = /** @class */ (function () {
         // }
     };
     Common.prototype.onContent = function (resetDCIM, data) {
-        if(!data) data = this.store.data;
-        let connectParams =  {
+        if (!data) data = this.store.data;
+        let connectParams = {
             mqttUrl: data.mqttUrl,
             username: data.mqttOptions.username,
             password: data.mqttOptions.password,
@@ -744,12 +770,12 @@ var Common = /** @class */ (function () {
     Common.prototype.openMqtt = function (connectParams, debug) {
         const _this = this;
         _this.closeMqtt();
-        if(!connectParams.mqttUrl) return;
+        if (!connectParams.mqttUrl) return;
         _this.isEnd = false;
         const url = connectParams.mqttUrl.replace('ip', location.hostname);
         _this.mqttClient = mqtt.connect(url, connectParams);
         _this.mqttClient.on('message', function (topic, message) {
-            if(debug) console.log('mqttClientTopic>>>', topic, connectParams.mqttTopics)
+            if (debug) console.info('mqttClientTopic>>>', topic, connectParams.mqttTopics)
             if (!topic || topic != connectParams.mqttTopics) return;
             if (!this.isEnd) _this.doMqttDrow(message.toString(), debug);
         });
@@ -767,15 +793,14 @@ var Common = /** @class */ (function () {
     Common.prototype.doMqttDrow = function (ret, debug) {
         let canvasData = this.store.data;
         ret = JSON.parse(ret);
-        if(debug) console.log('mqttClientMessage>>>', ret)
+        if (debug) console.info('mqttClientMessage>>>', ret)
         //console.log('处理消息', ret)
         this.mqttDataDrawing(canvasData.pens, ret)
     };
     Common.prototype.mqttDataDrawing = function (data, retData) {
-        // console.log('收到消息', syncData)
         this.store.monitorAlarm = false;
         data.map((item) => {
-            if(this.store.options.type === 'topology') setInitConfData(this.id, item);
+            if (this.store.options.type === 'topology') setInitConfData(this.id, item);
             setDefaultNodeValidat(item, retData);
             if (item.children && item.children.length) {
                 this.mqttDataDrawing(item.children, retData);
@@ -788,7 +813,7 @@ var Common = /** @class */ (function () {
         this.render();
         this.animate(true);
         // 九所的 服务器状态监测功能中用到
-        if(this.store.options.storeSubscribe) Store.set(this.generateStoreKey('M:monitor'), this.store.monitorAlarm);
+        if (this.store.options.storeSubscribe) Store.set(this.generateStoreKey('M:monitor'), this.store.monitorAlarm);
         return data
     };
     Common.prototype.hidePenByTag = function (pens, val) {
@@ -848,7 +873,7 @@ var Common = /** @class */ (function () {
     };
     Common.prototype.formOverflowConversionData = function (obj) {
         if (!obj) {
-            obj = {pens: []};
+            obj = { pens: [] };
         }
         let data = JSON.parse(JSON.stringify(obj));
         Object.assign(this.store.data, data);
@@ -859,6 +884,8 @@ var Common = /** @class */ (function () {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
                 const item = _e[_d];
                 if (!item.from) {
+                    // 初次绘制画布时this.id替换item.TID
+                    setInitNodeDataValidat(item, this.id, type, _d, item.PTID);
                     const node = new Node(item);
                     this.store.data.pens.push(node);
                 } else {
@@ -867,6 +894,7 @@ var Common = /** @class */ (function () {
                 }
             }
         }
+        Store.set(this.generateStoreKey('LT:conversionDataOverflow'), data);
     };
     Common.prototype.destroyStatic = function () {
         this.clear('destroy');
@@ -895,7 +923,10 @@ var Common = /** @class */ (function () {
                 pageRelevTableNodes: {}
             }
         });
-        document.body.removeChild(this.tipMarkdown);
+        let tipMarkdown = document.querySelectorAll(".tipMarkdownBytopo");
+        tipMarkdown.forEach(item => {
+            document.body.removeChild(item);
+        })
         if (this.paginationPageListBox) this.paginationPageListBox.removeEventListener('click', this.paginationPageListNode);
         if (this.pagenationPageInput) this.pagenationPageInput.removeEventListener('click', this.pagenationPageInputNode);
         //优化
@@ -919,4 +950,4 @@ var Common = /** @class */ (function () {
     // Render or redraw
     return Common;
 }());
-export {Common};
+export { Common };

package/core/src/element/common.js

@@ -49,7 +49,6 @@ export function loadJS(url) {
     loaderScript.type = 'text/javascript';
     loaderScript.src = url;
     document.body.appendChild(loaderScript);
-    window.datePickerRegister = true;
     return new Promise((resolve, reject) => {
         loaderScript.onload = function () {
             resolve(true);

package/core/src/healps/changeData.js

@@ -111,6 +111,9 @@ export function setConfItemNode(pen, syn_synata) {
             pen.isOpen = _syn.v == openValue;
             pen.fillStyle = pen.isOpen ? pen.visitStrokeStyle : pen.strokeStyle;
             pen.text = '';
+        } else if (name === 'progress') {
+            pen.value = _syn.v;
+            pen.text = '';
         }
         else {
             pen.fillStyle = color

package/core/src/middles/default.js

@@ -17,7 +17,7 @@ import {
     imageIconRect, imageTextRect,
     cube, cubeAnchors, cubeIconRect, cubeTextRect,
     people, peopleIconRect, peopleTextRect,
-    arbitraryGraph, arbitraryGraphAnchors, time, switchs
+    arbitraryGraph, arbitraryGraphAnchors, time, switchs, progress
 } from './nodes';
 import {
     line,
@@ -209,6 +209,8 @@ function init() {
     drawNodeFns.switchs = switchs;
     iconRectFns.switchs = rectangleIconRect;
     textRectFns.switchs = rectangleTextRect;
+    // 进度条
+    drawNodeFns.progress = progress;
 }
 init();
 // registerNode: Register a custom node.

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

@@ -1,3 +1,2 @@
 export * from './default';
-export * from './nodes/rectangle';
-export * from './nodes/text';
+export * from './nodes';

package/core/src/middles/index.js

@@ -1,5 +1,6 @@
 export * from './default';
 export * from './nodes';
-export * from './lines';
-export * from './arrows';
+// 以下导入注释掉，不再引入，三者方法有命名冲突，编译会报错，项目中有用到下面中的方法，可以单独导入
+// export * from './lines';
+// export * from './arrows';
 //# sourceMappingURL=index.js.map

package/core/src/middles/nodes/formDatePicker.js

@@ -11,6 +11,7 @@ export async function fromDatePicker(ctx, node) {
 
     if (!window.datePickerRegister) {
         //未注册datePicker插件
+        window.datePickerRegister = true;
         const datePickerRegisterData = await loadJS(`${window.location.origin}/libary/laydate/laydate.js`).catch((e) => {
             console.error('datePicker插件加载失败>>>', e);
         });

package/core/src/middles/nodes/formoverflow.js

@@ -1,11 +1,9 @@
-// import {} from './rectangle';
-import {rectangle, createDiv, s8, Topology} from  '../../../../core';
+import {rectangle, createDiv, s8, Preview} from  '../../../../core';
 import {commonStore} from "../../store";
 
 export async function formOverflow(ctx, node) {
     // 绘制一个底图，类似于占位符。
     rectangle(ctx, node)
-    console.log('绘制滚动组件--')
     // 添加当前节点到div层
     if (!node.elementId) {
         node.elementId = s8()
@@ -17,7 +15,6 @@ export async function formOverflow(ctx, node) {
     const scrollbarColor = color + ' ' + colorBg
 
     if (!node.elementLoaded && !formoverData) {
-        console.log('是否存在--formoverData--0-',formoverData)
         if(!formoverData) {
             formoverData = {
                 div: createDiv(node)
@@ -33,29 +30,33 @@ export async function formOverflow(ctx, node) {
         document.body.appendChild(formoverData.div)
         // 添加当前节点到div层
         node.addToDiv()
+        node.createOverflow()
         commonStore[node.TID].formoverDataPool[node.id] = formoverData;
 
-
-        console.log('请求子页面接口-----id =',id)
-        let canvas = new Topology(node.id, {
-            rotateCursor: '/img/rotate.cur',
-        })
-        canvas.formOverflowOpen(node.formData.detailPageData)
-        commonStore[node.TID].formoverCanvasDataPool[node.id]  = canvas
+        // 兼容topology项目中渲染
+        if (window.location.pathname.includes('workspace') || window.location.pathname.includes('Preview')) {
+            let canvas = new Preview(node.id, {
+                rotateCursor: '/img/rotate.cur',
+            })
+            canvas.formOverflowOpen(node.formData.detailPageData)
+            commonStore[node.TID].formoverCanvasDataPool[node.id]  = canvas
+        }
+        setTimeout(() => {
+            // 可优化，图片元件加载不出图片的方案
+            formOverflowChange(node); 
+        }, 200);
     }else if(formoverData && id){
-        console.log('是否存在--formoverData--1-',formoverData)
         formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
-        formOverflowChange(node)
     }
+    formOverflowChange(node)
 }
 
 // 更新滚动组件中子页面
 export function formOverflowChange(node) {
-        //绘制画布
-        console.log('更新滚动组件中子页面-',node)
+        // 绘制画布
+        // console.log('更新滚动组件中子页面-',node)
         let canvas = commonStore[node.TID].formoverCanvasDataPool[node.id] 
         let data =  node.formData.detailPageData
-        console.log('改变滚动组件中子页面-',data)
         canvas.formOverflowOpen(data)
 }
 

package/core/src/middles/nodes/index.d.ts

@@ -48,4 +48,5 @@ export * from './triangle.rect';
 export * from './formoverflow';
 export * from './time';
 export * from './formDatePicker';
-export * from './switchs';
+export * from './switchs';
+export * from './progress';

package/core/src/middles/nodes/index.js

@@ -49,5 +49,6 @@ export * from './formoverflow';
 export * from './time';
 export * from './formDatePicker';
 export * from './switchs';
+export * from './progress';
 
 //# sourceMappingURL=index.js.map

package/core/src/middles/nodes/progress.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "../../models";
+export default function progress(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/progress.js

@@ -0,0 +1,63 @@
+export function progress(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.moveTo(node.rect.x + r, node.rect.y);
+    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
+    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();
+    ctx.fillStyle = node.fillStyle;
+    node.fillStyle && ctx.fill();
+    ctx.stroke();
+    ctx.restore();
+    //绘制进度条
+    let maxValue = node.maxValue || 100;
+    let percent = node.value / maxValue > 1 ? 1 : node.value / maxValue;
+    let gradient = ctx.createLinearGradient(node.rect.x, node.rect.y, node.rect.x + node.rect.width * percent, node.rect.y);
+    gradient.addColorStop(0, node.strokeStyle || 'red');    // 开始色
+    gradient.addColorStop(1, node.visitStrokeStyle || 'blue');   // 结束色
+
+    ctx.beginPath();
+    ctx.moveTo(node.rect.x + r, node.rect.y);
+    ctx.arcTo(node.rect.x + node.rect.width * percent, node.rect.y, node.rect.x + node.rect.width * percent, node.rect.y + node.rect.height, r);
+    ctx.arcTo(node.rect.x + node.rect.width * percent, 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 * percent, node.rect.y, r);
+    ctx.closePath();
+    ctx.fillStyle = gradient;
+    node.strokeStyle && ctx.fill();
+
+    //绘制数值
+    ctx.font = '' + node.font.fontSize + "px " + node.font.fontFamily;
+    ctx.textBaseline = 'middle';
+    //计算文字的长度 如果超出了100% 那么从右侧开始写 防止溢出 样式错乱
+    ctx.fillStyle = node.font.color;
+    //保留小数位数
+    let text = parseFloat((percent * 100).toFixed(node.retationDecimalPlaces || 0)) + (node.isShowPercent ? '%' : '');
+    let tWidth = ctx.measureText(text).width;
+    if ((tWidth + node.rect.width * percent + 5) > node.rect.width) { //如果溢出
+        ctx.fillText(text, node.rect.x + node.rect.width - tWidth - 5, node.rect.y + node.rect.height / 2);
+
+    } else {
+        ctx.fillText(text, node.rect.x + node.rect.width * percent + 5, node.rect.y + node.rect.height / 2);
+    }
+
+
+    ctx.fillStyle = "#fff"
+}
+//# sourceMappingURL=progress.js.map

package/core/src/middles/nodes/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["progress.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,GAA6B,EAAE,IAAU;IACtE,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;IAC3B,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;IAC3B,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;QACvB,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QACzC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;KAC7C;IACD,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAE;QACzB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;KAC3B;IACD,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE;QAC1B,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;KAC5B;IACD,GAAG,CAAC,SAAS,EAAE,CAAC;IAChB,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACzC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACxH,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACzH,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACpF,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnF,GAAG,CAAC,SAAS,EAAE,CAAC;IAChB,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC;IAC9C,GAAG,CAAC,MAAM,EAAE,CAAC;AACjB,CAAC"}