dcim-topology2d 2.0.5 → 2.0.7

package/core/src/utils/params.js

@@ -6,6 +6,9 @@ export function getParams(id, data) {
         if (item.children && item.children.length) {
             getParams(id, item.children);
         }
+        if (item.formData && item.formData.detailPageData && item.formData.detailPageData.pens && item.formData.detailPageData.pens.length) {
+            getParams(id, item.formData.detailPageData.pens);
+        }
     });
 }
 // 过滤出参数

package/myShape-diagram/index.js

@@ -1,5 +1,7 @@
 // 源码版写法
 import { registerNode } from '../core'
+import { formOverflow } from '../core/src/middles/nodes/formoverflow'
+
 
 // 组件版写法和bundle一致
 // window.Le5leTopology.registerNode
@@ -7,87 +9,87 @@ import { registerNode } from '../core'
 // 画骨架
 
 function drawOuterLine(ctx, node) {
-    const R = Math.floor((node.rect.width - 6) / 2);
-    const r = Math.round((R * 1) / 2);
-
-    ctx.beginPath();
-    // 上半个圆形
-    ctx.arc(node.rect.x + R, node.rect.y + r, r, 0, Math.PI, true);
-    // 下半个圆形
-    const theta = Math.acos((r * 1.0) / R);
-    ctx.arc(
-            node.rect.x + R,
-            node.rect.y + node.rect.height - R,
-            R,
-            theta + Math.PI,
-            -theta,
-            true
-    ); // 逆时针
-    ctx.closePath();
-    ctx.stroke();
+  const R = Math.floor((node.rect.width - 6) / 2);
+  const r = Math.round((R * 1) / 2);
+
+  ctx.beginPath();
+  // 上半个圆形
+  ctx.arc(node.rect.x + R, node.rect.y + r, r, 0, Math.PI, true);
+  // 下半个圆形
+  const theta = Math.acos((r * 1.0) / R);
+  ctx.arc(
+    node.rect.x + R,
+    node.rect.y + node.rect.height - R,
+    R,
+    theta + Math.PI,
+    -theta,
+    true
+  ); // 逆时针
+  ctx.closePath();
+  ctx.stroke();
 }
 
 // 画底色
 function drawBasic(ctx, node) {
-    const lingrad = ctx.createLinearGradient(
-            node.rect.x,
-            node.rect.y,
-            node.rect.width,
-            node.rect.height
-    );
-    lingrad.addColorStop(0, 'mediumvioletred');
-    lingrad.addColorStop(0.2, 'darkorange');
-    lingrad.addColorStop(0.4, 'gold');
-    lingrad.addColorStop(0.6, 'limegreen');
-    lingrad.addColorStop(0.8, 'navy');
-    lingrad.addColorStop(1, 'purple');
-    ctx.fillStyle = lingrad;
-    ctx.fill('evenodd');
+  const lingrad = ctx.createLinearGradient(
+    node.rect.x,
+    node.rect.y,
+    node.rect.width,
+    node.rect.height
+  );
+  lingrad.addColorStop(0, 'mediumvioletred');
+  lingrad.addColorStop(0.2, 'darkorange');
+  lingrad.addColorStop(0.4, 'gold');
+  lingrad.addColorStop(0.6, 'limegreen');
+  lingrad.addColorStop(0.8, 'navy');
+  lingrad.addColorStop(1, 'purple');
+  ctx.fillStyle = lingrad;
+  ctx.fill('evenodd');
 }
 
 function getYByValue(node, i) {
-    const R = Math.floor((node.rect.width - 6) / 2);
-    const r = Math.round((R * 1) / 2);
-
-    const min = 0;
-    const max = 40;
-
-    // 刻度线总高度
-    const scale_height = node.rect.height - 2 * R - 2 * r;
-    // 0刻度线所在位置
-    const zero_scale_y = node.rect.height - 2 * R;
-    const dy_dtem = scale_height / (max - min);
-    return zero_scale_y - dy_dtem * node.value;
+  const R = Math.floor((node.rect.width - 6) / 2);
+  const r = Math.round((R * 1) / 2);
+
+  const min = 0;
+  const max = 40;
+
+  // 刻度线总高度
+  const scale_height = node.rect.height - 2 * R - 2 * r;
+  // 0刻度线所在位置
+  const zero_scale_y = node.rect.height - 2 * R;
+  const dy_dtem = scale_height / (max - min);
+  return zero_scale_y - dy_dtem * node.value;
 }
 
 // 画刻度线
 function drawScale(ctx, node) {
-    const min = 0;
-    const max = 40;
-    const R = Math.floor((node.rect.width - 6) / 2);
-    const r = Math.round((R * 1) / 2);
-
-    for (let i = min; i <= max; i++) {
-        // 画刻度线
-        const y = getYByValue(node, i);
-        ctx.beginPath();
-        ctx.moveTo(R + r, y);
-        if (i % 10 == 0) {
-            ctx.lineWidth = 2;
-            ctx.lineTo(R + r - (r * 2) / 3, y);
-            // ctx.font = "15px bold";
-            ctx.fillText(i + '', R + r, y + 6);
-            ctx.stroke();
-        } else {
-            ctx.lineWidth = 1;
-            if (i % 5 == 0) {
-                ctx.lineTo(R + r - r / 2, y);
-            } else {
-                ctx.lineTo(R + r - r / 3, y);
-            }
-            ctx.stroke();
-        }
+  const min = 0;
+  const max = 40;
+  const R = Math.floor((node.rect.width - 6) / 2);
+  const r = Math.round((R * 1) / 2);
+
+  for (let i = min; i <= max; i++) {
+    // 画刻度线
+    const y = getYByValue(node, i);
+    ctx.beginPath();
+    ctx.moveTo(R + r, y);
+    if (i % 10 == 0) {
+      ctx.lineWidth = 2;
+      ctx.lineTo(R + r - (r * 2) / 3, y);
+      // ctx.font = "15px bold";
+      ctx.fillText(i + '', R + r, y + 6);
+      ctx.stroke();
+    } else {
+      ctx.lineWidth = 1;
+      if (i % 5 == 0) {
+        ctx.lineTo(R + r - r / 2, y);
+      } else {
+        ctx.lineTo(R + r - r / 3, y);
+      }
+      ctx.stroke();
     }
+  }
 }
 
 /////////////////////
@@ -96,101 +98,102 @@ function drawScale(ctx, node) {
 
 // 自定义图形库绘画函数
 export function thermometer(ctx, node) {
-    ctx.beginPath();
-
-    drawOuterLine(ctx, node);
-    drawBasic(ctx, node);
-    ctx.clearRect(
-            node.rect.x,
-            node.rect.y,
-            node.rect.width,
-            getYByValue(node, node.value)
-    );
-    drawOuterLine(ctx, node);
-    drawScale(ctx, node);
+  ctx.beginPath();
+
+  drawOuterLine(ctx, node);
+  drawBasic(ctx, node);
+  ctx.clearRect(
+    node.rect.x,
+    node.rect.y,
+    node.rect.width,
+    getYByValue(node, node.value)
+  );
+  drawOuterLine(ctx, node);
+  drawScale(ctx, node);
 }
 
 // 自定义图形库绘画函数
 export function pool(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.strokeStyle = "rgba(0,0,0,.0)"
-    var value = (1-node.value) * (node.rect.height - node.lineWidth/2)
-    ctx.moveTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
-    ctx.lineTo(node.rect.ex - node.lineWidth/2, node.rect.y + value);
-    ctx.arcTo(node.rect.ex - node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, r);
-    ctx.arcTo(node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y, r);
-    ctx.lineTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
-    ctx.closePath();
-    (node.fillStyle || node.bkType) && ctx.fill();
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.strokeStyle = node.strokeStyle
-    ctx.lineWidth = node.lineWidth
-    ctx.moveTo(node.rect.x + node.rect.width, node.rect.y);
-    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();
-    (node.fillStyle || node.bkType);
-    ctx.stroke();
+  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.strokeStyle = "rgba(0,0,0,.0)"
+  var value = (1-node.value) * (node.rect.height - node.lineWidth/2)
+  ctx.moveTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
+  ctx.lineTo(node.rect.ex - node.lineWidth/2, node.rect.y + value);
+  ctx.arcTo(node.rect.ex - node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, r);
+  ctx.arcTo(node.rect.x + node.lineWidth/2, node.rect.y + node.rect.height - node.lineWidth/2, node.rect.x + node.lineWidth/2, node.rect.y, r);
+  ctx.lineTo(node.rect.x + node.lineWidth/2, node.rect.y + value);
+  ctx.closePath();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.strokeStyle = node.strokeStyle
+  ctx.lineWidth = node.lineWidth
+  ctx.moveTo(node.rect.x + node.rect.width, node.rect.y);
+  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();
+  (node.fillStyle || node.bkType);
+  ctx.stroke();
 }
 
 // 自定义图形库绘画函数
 export function  electricFan(ctx, node) {
-    var wwr = node.rect.width / 2;
-    var hwr = node.rect.height / 2;
-    var hwr = node.rect.height / 2;
-    var x0 = node.rect.x + node.rect.width /2
-    var y0 = node.rect.y + node.rect.height / 2
-    var withinRadius = wwr < hwr ? wwr : hwr;
-    ctx.beginPath();
-    ctx.lineWidth = node.lineWidth
-    ctx.arc(x0,y0,withinRadius,0,2*Math.PI);
-    ctx.closePath();
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.lineWidth = 1;
-    var fanCount = node.fanCount;
-    for(var i = 0; i < fanCount; i++){
-        var fanAngle = 2 * Math.PI / fanCount * i;
-        var x1 = x0 - withinRadius*Math.sin(fanAngle);
-        var y1 = y0 - withinRadius*Math.cos(fanAngle);
-        var xr = x0 - withinRadius*Math.sin(fanAngle)/2;
-        var yr = y0 - withinRadius*Math.cos(fanAngle)/2;
-        ctx.moveTo(x0, y0);
-        ctx.lineTo(x1, y1);
-        ctx.arc(xr, yr, withinRadius/2, Math.PI / 2 - fanAngle,3 * Math.PI / 2 - fanAngle);
-    }
-    ctx.closePath();
-    (node.fillStyle || node.bkType) && ctx.fill();
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.lineWidth = 3;
-    ctx.arc(x0,y0,withinRadius/5,0,2*Math.PI);
-    ctx.closePath();
-    (node.fillStyle || node.bkType) && ctx.fill();
-    ctx.stroke();
+  var wwr = node.rect.width / 2;
+  var hwr = node.rect.height / 2;
+  var hwr = node.rect.height / 2;
+  var x0 = node.rect.x + node.rect.width /2
+  var y0 = node.rect.y + node.rect.height / 2
+  var withinRadius = wwr < hwr ? wwr : hwr;
+  ctx.beginPath();
+  ctx.lineWidth = node.lineWidth
+  ctx.arc(x0,y0,withinRadius,0,2*Math.PI);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.lineWidth = 1;
+  var fanCount = node.fanCount;
+  for(var i = 0; i < fanCount; i++){
+    var fanAngle = 2 * Math.PI / fanCount * i;
+    var x1 = x0 - withinRadius*Math.sin(fanAngle);
+    var y1 = y0 - withinRadius*Math.cos(fanAngle);
+    var xr = x0 - withinRadius*Math.sin(fanAngle)/2;
+    var yr = y0 - withinRadius*Math.cos(fanAngle)/2;
+    ctx.moveTo(x0, y0);
+    ctx.lineTo(x1, y1);
+    ctx.arc(xr, yr, withinRadius/2, Math.PI / 2 - fanAngle,3 * Math.PI / 2 - fanAngle);
+  }
+  ctx.closePath();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.lineWidth = 3;
+  ctx.arc(x0,y0,withinRadius/5,0,2*Math.PI);
+  ctx.closePath();
+  (node.fillStyle || node.bkType) && ctx.fill();
+  ctx.stroke();
 }
 
 // 注册自定义图形库
 export function registerMyShape() {
-    registerNode('electricFan', electricFan);
-    registerNode('pool', pool);
-    registerNode('thermometer', thermometer);
+  registerNode('electricFan', electricFan);
+  registerNode('pool', pool);
+  registerNode('thermometer', thermometer);
+  registerNode('formOverflow', formOverflow);
 }
 
 // src\views\data.ts 里面加载到工具栏，第一个就是此自定义图形库

package/package.json

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

package/static/echartsDefaultData.js

@@ -3,7 +3,7 @@ export const echartsLegendDefaultData = {
   icon: 'rect', // 图标类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
   itemWidth: 12, // 图标宽
   itemHeight: 12, // 图标高
-  itemGap: 8, // 图例之间的间隔 number
+  itemGap: 8, // 图例之间的间隔
   top: '0%', // 图例距离容器上边位置
   right: 'auto', // 图例距离容器右边位置
   bottom: 'auto', // 图例距离容器下边位置
@@ -155,5 +155,13 @@ export const echartsColorData = [
     'rgb(68, 237, 146)',
     'rgb(251, 94, 45)',
     'rgb(18, 255, 113)',
-    'rgb(18, 255, 113)']
-
+    'rgb(18, 255, 113)'];
+// TOP排行榜默认颜色
+export const rankingTopColorList = [
+    'rgba(239, 120, 66, .6)',
+    'rgba(255, 225, 65, .5)',
+    'rgba(55, 240, 151, .5)',
+    'rgba(72, 211, 255, .6)',
+    'rgba(67, 153, 255, .5)'
+];
+export const rankingTopImageName = ['orange', 'yellow', 'ching', 'lightBlue', 'blue'];