dcim-topology2d 2.1.0 → 2.2.2

package/core/src/healps/changeData.js

@@ -1,11 +1,11 @@
 //let DETAILDATA = null;
-import {commonStore} from '../store';
+import { commonStore } from '../store';
 import { getEchartsRealData } from '../utils/conversion';
 export function setConfItemNode(pen, syn_synata) {
     const entranceGuard = pen.events.find((ev) => {
         return ev.value === 'entranceGuard';
     });
-    if(entranceGuard) {
+    if (entranceGuard) {
         // 绑定门禁的元件实时数据
         const nullUndefinedRegex = /^(?:null|undefined|\s*)$/;
         const doorData = syn_synata.doorData && syn_synata.doorData[entranceGuard.params];
@@ -13,59 +13,64 @@ export function setConfItemNode(pen, syn_synata) {
         pen.text = doorState === 1 ? '开门' : '关门'; // 1-开门，其他值为关门
     }
     if (!pen.data) return;
-    if(commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
+    if (commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
     let isAlarm = false; // 判断元件绑定的数据中是否有告警发生，用于九所项目服务器自身监控功能
-    if(pen.data instanceof Array) {
+    if (pen.data instanceof Array) {
         let _syn = null;
         let isResetVal = false;
-        const {areaData, assetData, kpiData, tagData, asset} = syn_synata
+        const { areaData, assetData, componentData, kpiData, tagData, asset } = syn_synata;
+        const comData = componentData && componentData[pen.id];
         pen.data.map((d) => {
             const key = d.key;
             let value = d.value;
-            const assetItem = assetData[value];
-            const areaItem = areaData[value];
-            const kpiItem = kpiData[value];
-            if(key === 'tagId') value = d.tagId ? d.tagId : d.value;
-            const tagItem = tagData[value];
+            if (key === 'tagId') value = d.tagId ? d.tagId : d.value;
             //console.log('key===========', d)
             if (key === 'assetKey' && d.value === 'assetName' && asset) {
+
                 pen.text = asset.assetName;
-            }else if (key === 'assetId' && assetItem) {
-                _syn = assetItem;
+
+            } else if (key === 'assetId') {
+
+                _syn = comData || assetData[value];
+
                 // if(value === '264'){console.log('_syn',_syn,pen.name,parseInt(_syn.state))}
-            }else if (key === 'areaId' && areaItem) {
-                _syn = areaItem;
-            }else if (key === 'tagId' && tagItem) {
-                _syn = tagItem;
-                if(_syn.kpiName !== '通讯状态' || pen.name !== 'circle'){
+            } else if (key === 'areaId') {
+
+                _syn = comData || areaData[value];
+
+            } else if (key === 'tagId' && (comData || tagData[value])) {
+
+                _syn = comData || tagData[value];
+
+                if (_syn.kpiName !== '通讯状态' || pen.name !== 'circle') {
                     isResetVal = true;
                 }
-                const isControl = parseInt(tagItem.isControlDis); // 是否可控，0可控，1不可控
+                const isControl = parseInt(_syn.isControlDis); // 是否可控，0可控，1不可控
                 //d.isControlDis = isControlDis
-                if(!isControl) {
+                if (!isControl) {
                     d.tagVal = value
-                    d.controlParams = tagItem
+                    d.controlParams = _syn
                     //Object.assign(d, tagItem)
                 }
-            }else if (key === 'kpiAddr' && kpiItem) {
-                _syn = kpiItem;
+            } else if (key === 'kpiAddr' && (comData || kpiData[value])) {
+                _syn = comData || kpiData[value];
                 isResetVal = true
-                const isControl = parseInt(kpiItem.isControlDis); // 是否可控，0可控，1不可控
+                const isControl = parseInt(_syn.isControlDis); // 是否可控，0可控，1不可控
                 //d.isControlDis = isControlDis
-                if(!isControl) {
+                if (!isControl) {
                     d.tagVal = value
-                    d.controlParams = kpiItem
+                    d.controlParams = _syn
                     // delete kpiItem[value]
                     // Object.assign(d, kpiItem)
                 }
             }
         })
-        if(!_syn) return;
+        if (!_syn) return;
         // const type = parseInt(_syn.type) // 是否是开关量
         // 显示的值
         if (isResetVal) pen.text = `${_syn.value}${_syn.unit}`;
         const state = parseInt(_syn.state)
-        if(!state && state !== 0) return
+        if (!state && state !== 0) return
         const name = pen.name
         // 显示的颜色
         let color = ''
@@ -83,9 +88,9 @@ export function setConfItemNode(pen, syn_synata) {
                 let defaulColor = ''
                 if (name === 'text') {
                     defaulColor = 'defaultFontColor'
-                }else if(name === 'line') {
+                } else if (name === 'line') {
                     defaulColor = 'defaultStrokeStyle'
-                }else {
+                } else {
                     defaulColor = 'defaultFillStyle'
                 }
                 color = pen[defaulColor]
@@ -97,17 +102,27 @@ export function setConfItemNode(pen, syn_synata) {
         // 显示的属性
         if (name === 'text') {
             pen.font.color = color
-        }else if(name === 'line') {
+        } else if (name === 'line') {
             pen.strokeStyle = color
             pen.text = ''
-        }else {
+        } else if (name === 'switchs') {
+            //获取值说明中的开值 默认为第一个值为开
+            let openValue = getOpenValue(_syn.valExplain)
+            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
         }
         if (name === 'electricFan') setFanData(pen, _syn)
-    }else {
+    } else {
         if (pen.elementRendered) pen.elementRendered = false;
         if (pen.data.echarts) {
-            const {echartDataValue} = syn_synata;
+            const { echartDataValue } = syn_synata;
             const seriesData = echartDataValue;
             const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
             if (Array.isArray(realData) && pen.data.params && pen.data.params.displayMode !== 7) {
@@ -137,24 +152,24 @@ export function setFanData(pen, syncData) {
     let runState = false
     let percentage = 1
     const value = parseInt(syncData.v)
-    if(pen.fanValType == '1'){
-        if(value > pen.fanMinVal  && value <= pen.fanMaxVal) {
+    if (pen.fanValType == '1') {
+        if (value > pen.fanMinVal && value <= pen.fanMaxVal) {
             runState = true
-            percentage = value/(pen.fanMaxVal-pen.fanMinVal)
+            percentage = value / (pen.fanMaxVal - pen.fanMinVal)
         }
-    }else if(pen.fanValType == '2'){
-        if(pen.fanNorVal === value) runState = true
+    } else if (pen.fanValType == '2') {
+        if (pen.fanNorVal === value) runState = true
     }
-    if(runState){
+    if (runState) {
         addAnimateByRevolve(pen, percentage)
         pen.animatePlay = true
-    }else{
+    } else {
         pen.animatePlay = false
     }
 }
 
 export function addAnimateByRevolve(pen, percentage) {
-    let time = 200/pen.fanSpeed/percentage
+    let time = 200 / pen.fanSpeed / percentage
     const state = JSON.parse(JSON.stringify(pen))
     delete state.TID
     delete state.animateFrames
@@ -169,3 +184,11 @@ export function addAnimateByRevolve(pen, percentage) {
     pen.animateDuration = time;
 
 }
+
+export function getOpenValue(explain) {
+    let value = 1
+    if (!explain) return value
+    value = explain.split(',')[0].split('=')[0];
+    return value
+
+}

package/core/src/middles/default.js

@@ -1,51 +1,51 @@
 import {
-  arrowAnchors,
-  leftArrow, leftArrowIconRect, leftArrowTextRect,
-  rightArrow, rightArrowIconRect, rightArrowTextRect,
-  twowayArrow, twowayArrowIconRect, twowayArrowTextRect,
-  rectangle, rectangleIconRect, rectangleTextRect,
-  diamond, diamondIconRect, diamondTextRect,
-  text, file, formtable, tablePagination, iframePrimeval,formSelect, fromDatePicker,
-  line as nodeLine, lineAnchors, lineIconRect, lineTextRect,
-  circle, circleIconRect, circleTextRect, circleAnchors,
-  triangle, triangleIconRect, triangleTextRect, triangleAnchors,
-  pentagon, pentagonIconRect, pentagonTextRect, pentagonAnchors,
-  hexagon, hexagonAnchors, hexagonIconRect, hexagonTextRect,
-  pentagram, pentagramAnchors, pentagramIconRect, pentagramTextRect,
-  cloud, cloudAnchors, cloudIconRect, cloudTextRect,
-  message, messageIconRect, messageTextRect, messageAnchors,
-  imageIconRect, imageTextRect,
-  cube, cubeAnchors, cubeIconRect, cubeTextRect,
-  people, peopleIconRect, peopleTextRect,
-  arbitraryGraph, arbitraryGraphAnchors,time
+    arrowAnchors,
+    leftArrow, leftArrowIconRect, leftArrowTextRect,
+    rightArrow, rightArrowIconRect, rightArrowTextRect,
+    twowayArrow, twowayArrowIconRect, twowayArrowTextRect,
+    rectangle, rectangleIconRect, rectangleTextRect,
+    diamond, diamondIconRect, diamondTextRect,
+    text, file, formtable, tablePagination, iframePrimeval, formSelect, fromDatePicker,
+    line as nodeLine, lineAnchors, lineIconRect, lineTextRect,
+    circle, circleIconRect, circleTextRect, circleAnchors,
+    triangle, triangleIconRect, triangleTextRect, triangleAnchors,
+    pentagon, pentagonIconRect, pentagonTextRect, pentagonAnchors,
+    hexagon, hexagonAnchors, hexagonIconRect, hexagonTextRect,
+    pentagram, pentagramAnchors, pentagramIconRect, pentagramTextRect,
+    cloud, cloudAnchors, cloudIconRect, cloudTextRect,
+    message, messageIconRect, messageTextRect, messageAnchors,
+    imageIconRect, imageTextRect,
+    cube, cubeAnchors, cubeIconRect, cubeTextRect,
+    people, peopleIconRect, peopleTextRect,
+    arbitraryGraph, arbitraryGraphAnchors, time, switchs, progress
 } from './nodes';
 import {
-  line,
-  lineControlPoints,
-  calcLineControlPoints,
-  polyline,
-  polylineControlPoints,
-  pointInPolyline,
-  calcPolylineControlPoints,
-  dockPolylineControlPoint,
-  curve,
-  curveControlPoints,
-  pointInCurve,
-  calcCurveControlPoints,
-  mind,
-  calcMindControlPoints,
-  mindControlPoints,
-  pointInMind
+    line,
+    lineControlPoints,
+    calcLineControlPoints,
+    polyline,
+    polylineControlPoints,
+    pointInPolyline,
+    calcPolylineControlPoints,
+    dockPolylineControlPoint,
+    curve,
+    curveControlPoints,
+    pointInCurve,
+    calcCurveControlPoints,
+    mind,
+    calcMindControlPoints,
+    mindControlPoints,
+    pointInMind
 } from './lines';
 import {
-  triangleSolid,
-  triangle as arrowTriangle,
-  diamondSolid,
-  diamond as arrowDiamond,
-  circleSolid, circle as arrowCircle,
-  lineUp,
-  lineDown,
-  line as arrowLine
+    triangleSolid,
+    triangle as arrowTriangle,
+    diamondSolid,
+    diamond as arrowDiamond,
+    circleSolid, circle as arrowCircle,
+    lineUp,
+    lineDown,
+    line as arrowLine
 } from './arrows';
 // Functions of drawing a node.
 export var drawNodeFns = {};
@@ -205,6 +205,12 @@ function init() {
     drawNodeFns.time = time;
     iconRectFns.time = rectangleIconRect;
     textRectFns.time = rectangleTextRect;
+    // 开关
+    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

@@ -1,15 +1,17 @@
-import {Store} from 'le5le-store';
+import {Store} from "le5le-store";
 import {rectangle} from './rectangle';
 import { createDatePickerElement, loadJS, setDataPickerElementStyle } from '../../element';
-import { s8 } from '../../utils';
+import { s8, datePickerValueFormatting } from '../../utils';
 import {commonStore} from "../../store";
+import {datePickerType} from "../../../../store";
 
 export async function fromDatePicker(ctx, node) {
-    // 绘制一个底图，类似于占位符。 
+    // 绘制一个底图，类似于占位符。
     rectangle(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);
         });
@@ -21,12 +23,35 @@ export async function fromDatePicker(ctx, node) {
     if (!currentStore.pickerDataPool[node.id]) {
         // 未创建该元件
         node.elementId = s8();
+
+        if(currentStore.mqttParams.dataConfig.picker){
+            // 日期元件关联绑定的元件数据
+            const pickerConfig = currentStore.mqttParams.dataConfig.picker;
+            for (let [key, config] of pickerConfig.entries()){
+                if(config.dateId === node.id) {
+                    node.formData.realIds = node.formData.realIds ? `${node.formData.realIds},${key}` : key;
+                    node.formData.selected = config.dateStr;
+                }
+            }
+        }
+
+        const format = node.pickerOptions.format;
+        const valueType = node.formData.valueType;
+        const dateType = node.pickerOptions.type;
+        node.pickerOptions.value = node.formData.selected || datePickerValueFormatting({
+            formatType: format,
+            valueType
+        }).dateStr;
         const datePicker = createDatePickerElement(node);
         currentStore.pickerDataPool[node.id] = {
+            format,
+            valueType,
+            dateType,
             dom: {
                 container: datePicker
             }
-        }
+        };
+
         document.body.appendChild(datePicker);
         // 添加当前节点到div层
         node.addToDiv();
@@ -38,27 +63,44 @@ export async function fromDatePicker(ctx, node) {
             if(pickerOptions.min && isValidInteger(pickerOptions.min)) pickerOptions.min = Number(pickerOptions.min);
             if(pickerOptions.max && isValidInteger(pickerOptions.max)) pickerOptions.max = Number(pickerOptions.max);
         }
+        let layDatePicker = null;
         pickerOptions.elem = `#picker${node.id}`;
         pickerOptions.done = function (val, date) {
-            node.formData.selected = val
-            date.value = val;
+            const { year, month, hours, minutes, seconds } = date;
+            const map = {
+                yyyy: year,
+                MM: String(month).padStart(2, '0'),
+                dd: String(date.date).padStart(2, '0'),
+                HH: String(hours).padStart(2, '0'),
+                mm: String(minutes).padStart(2, '0'),
+                ss: String(seconds).padStart(2, '0')
+            };
+            node.formData.selected = val;
+            date.valueStr = val;
+            date.value = datePickerType[layDatePicker.config.type].replace(/yyyy|MM|dd|HH|mm|ss/g, match => map[match]);
             Store.set(`${node.TID}-EVENT:change`, {node, date});
         }
         setTimeout(() => {
 
-            laydate.render(pickerOptions);
+            layDatePicker = laydate.render(pickerOptions);
 
         }, 100)
     }else {
         if(node.formData.resetStyle) {
+            // 重置样式
             setDataPickerElementStyle(node);
             node.formData.resetStyle = false;
         }
-        // if(!node.formData.render) return;
-        // node.formData.render = false;
-        // const pickerOptions = Object.keys(node.pickerOptions).reduce((a,k) => (node.pickerOptions[k] && (a[k]=node.pickerOptions[k]), a), {}); // 过滤空数据
-        // Object.assign(node.formData.datePicker.config, pickerOptions);
-        //resetDatePicker(node);
+        if(node.formData.render) {
+            // 重置数据
+            node.formData.render = false;
+            const params = {
+                format: node.pickerOptions.format,
+                valueType: node.formData.valueType,
+                dateType: node.pickerOptions.type
+            };
+            Object.assign(currentStore.pickerDataPool[node.id], params);
+        }
     }
 }
 function isValidInteger(str) {

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/formselect.js

@@ -15,8 +15,13 @@ export function formSelect(ctx, node) {
         const currentStore = commonStore[node.TID];
         node.elementId = s8();
         node.dash = 4;
+        // 下拉切换类型
+        const selectedType = node.events && node.events.find((item) => {
+            return !!item.dcimStaticForType
+        });
         currentStore.selectDataPool[node.id] = {
             slideState: node.selectDropdown,
+            staticType: selectedType,
             node: {
                 id: node.id,
                 color: node.font.color,
@@ -35,26 +40,30 @@ export function formSelect(ctx, node) {
             // 去空格重新赋值
             node.formData.bindBlockTag = node.formData.bindBlockTag.trim();
         }
+
         let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
-        if(bindBlockId && selectRealData) {
-            // select与echarts互相关联
+        if(selectRealData) {
+            // 数据统计之 select与echarts互相关联
             if(node.formData.ids) {
+                // 显示隐藏类型下的数据统计，下拉节点数据处理
                 const optionIds = node.formData.ids.split(',');
                 for (let i = 0; i < optionIds.length; i++) {
                     if(selectRealData[i]) selectRealData[i].optionId = optionIds[i];
                 }
             }
-            currentStore.selectDataPool[node.id].data = selectRealData;
-            currentStore.selectDataPool[node.id].node.selected.id = selectRealData[0].id;
+            const selectData = currentStore.selectDataPool[node.id];
+            selectData.data = selectRealData;
+            selectData.node.selected ? selectData.node.selected.id = selectRealData[0].id : selectData.node.selected = { id: selectRealData[0].id };
             const echartsData = currentStore.echartsDataPool[bindBlockId];
             echartsData ? echartsData.bindId = node.id : currentStore.echartsDataPool[bindBlockId] = {
                 bindId: node.id
             };
-            // select与Tab关联
+            // select与Tab关联，主要用于下拉切换时当前画面绑定了tab切换的情况
             const bindBlockTagData = currentStore.switchTabDataPool[`${node.formData.bindBlockTag}Data`];
             if(bindBlockTagData) currentStore.echartsDataPool[bindBlockId].tabCorrelationType = 'select';
         }else {
             if(node.formData.ids) {
+                // 下拉显示隐藏
                 const optionIds = node.formData.ids.split(',');
                 const optionNames = node.formData.names.split(',');
                 const optionsData = [];

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

@@ -47,4 +47,6 @@ export * from './triangle.anchor';
 export * from './triangle.rect';
 export * from './formoverflow';
 export * from './time';
-export * from './formDatePicker';
+export * from './formDatePicker';
+export * from './switchs';
+export * from './progress';

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

@@ -48,5 +48,7 @@ export * from './triangle.rect';
 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"}