dcim-topology2d 1.1.2 → 1.1.4

package/core/src/utils/onmousevent.js

@@ -1,5 +1,6 @@
 import { ptInPolyXY } from './math';
 import { moveDataType, downDataType } from './construction'
+import { Node } from '../models'
 // 执行window函数
 export function omouseEventPrototDoWindowFn (eventNode, node) {
 
@@ -18,8 +19,16 @@ export function mousMoveFun(type, pos, data) {
 
     for (var _i = 0, _a = data; _i < _a.length; _i++) {
         var item = _a[_i];
-        const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
-        if(isPoint) {
+        //const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
+        let isInPointNode = null;
+        if(item.name === 'arbitraryGraph') {
+            // 任意多边形通过点获取区域
+            isInPointNode = ptInPolyXY(pos, item.rotatedAnchors);
+        }else {
+            if(!(item instanceof Node)) item = new Node(item);
+            isInPointNode = item.hit(pos);
+        }
+        if(isInPointNode) {
             params.hoverNode = item;
             params.order = _i;
         }
@@ -43,7 +52,7 @@ export function mousDownFun(type, eventNode) {
     if(action === 3) {
         params.eventType = downDataType.Window; // 打开会话窗口
     }else if(action === 7){
-        params.eventType = downDataType.Showhide; // 链接跳转
+        params.eventType = downDataType.Showhide; // 显示/隐藏
         params.value = eventNode.value;
     }else if(action === 8){
         params.eventType = downDataType.Tabswitch; // Tab切换

package/package.json

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

package/static/echartsDefaultData.js

@@ -0,0 +1,239 @@
+/**
+ * echarts图表默认数据组
+ * @type {{displayMode_1: string}}
+ */
+export const echartsDefaultDataMap = {
+    displayMode_1: {
+        legend: null,
+        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        seriesData: [{
+            type: 'line',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+        }]
+    }, // 折线图
+    displayMode_2: {
+        legend: null,
+        XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        seriesData: [{
+            name: '',
+            data: [20, 60, 110, 220, 80, 100, 180]
+        }]
+    },// 柱状图
+    displayMode_3: {
+        legend: null,
+        seriesData: [{
+            value: 10,
+            name: '机房1'
+        }, {
+            value: 30,
+            name: '机房2'
+        }, {
+            value: 50,
+            name: '机房3'
+        }, {
+            value: 20,
+            name: '机房4'
+        }, {
+            value: 60,
+            name: '机房5'
+        }, {
+            value: 15,
+            name: '机房6'
+        }, {
+            value: 18,
+            name: '机房7'
+        }, {
+            value: 26,
+            name: '机房8'
+        }]
+    },// 环形图
+    displayMode_4: {
+        legend: null,
+        total: 100,
+        XData: ['CA机房', '五层IT', '四层IT', '冷水机组'],
+        seriesData: [{
+            data: [5, 20, 50, 80]
+        }]
+    },// TOP排行榜
+    displayMode_5: {
+        legend: null,
+        seriesData: [{
+            name: '一般',
+            value: 0
+        }, {
+            name: '较大',
+            value: 0
+        }, {
+            name: '重大',
+            value: 0
+        }, {
+            name: '严重',
+            value: 0
+        }, {
+            name: '高级',
+            value: 0
+        }]
+    },// 饼图
+    displayMode_6: {
+        value: 8
+    },// 仪表盘
+    displayMode_1_tem_line_1: {
+      legend: ['温度', '湿度'],
+      XData: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
+      seriesData: [{
+        name: '温度',
+        data: [20,24,20,24,20,24,20,24,20]
+      },{
+        name: '湿度',
+        data: [40,45,40,45,40,45,40,45,40]
+      }]
+    }, // 双轴双曲线
+    displayMode_1_tem_line_2: {
+        legend: null,
+        XData: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
+        seriesData: [{
+            name: '温度',
+            data: [20,24,20,24,20,24,20,24,20]
+        }]
+    }, // 单轴双曲线区域
+    displayMode_2_tem_3dbar_1: {
+      legend: null,
+      XData: ['制冷', '配电制冷', '网络机房制冷', '主机房制冷', '网络机房IT', '主机房IT', 'IT'],
+      seriesData: [{
+        name: '',
+        data: [82, 115, 42, 82, 70, 40, 92]
+      }]
+    }, // 3D柱状图模板-3d柱状图1
+};
+// 图例默认数据
+export const echartsLegendDefaultData = {
+  icon: 'rect', // 图标类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+  itemWidth: 12, // 图标宽
+  itemHeight: 12, // 图标高
+  itemGap: 8, // 图例之间的间隔 number
+  top: '0%', // 图例距离容器上边位置
+  right: 'auto', // 图例距离容器右边位置
+  bottom: 'auto', // 图例距离容器下边位置
+  left: '60', // 图例距离容器左边位置
+  padding: [20, 0, 0, 0], // 图例内边距 string
+  color: '#fff', // 文字颜色
+  height: 8, // 文本显示高度 number
+  fontSize: 12 // 文字大小 number
+};
+// 柱状图和折线图默认标注
+export const echartsLineBarDefaultLegendData = {
+    data: ['标注1'],
+    icon: 'rich',
+    show: true,
+    itemWidth: 14,
+    itemHeight: 14,
+    textStyle: {
+        color: '#C6D1DB',
+        fontSize: '14px',
+    },
+    top: '12%',
+    left: '10%',
+    itemGap: 8
+};
+// 曲线默认配置数据
+export const echartsLineSeriesStyleData = {
+  smooth: false,
+  symbol: 'none',
+  symbolSize: 18,
+  itemLineStyle:{
+    color: '#2F86ED', //改变折线颜色
+    type: 'solid',
+    width: 1
+  },
+  area: false, // 是否是区域图
+  linear: false, // 是否是线性渐变
+  areaColor: {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    global: false // 缺省为 false
+  },
+  areaColorStops:[{
+    offset: 0,
+    color: 'rgba(49, 144, 255, 0.21)' // 0% 处的颜色
+  }, {
+    offset: 1,
+    color: 'rgba(49, 144, 255, 0)' // 100% 处的颜色
+  }]
+}
+// 图表X轴默认配置数据
+export const echartsXAxisDefaultStyleData = {
+  x1AxisLabel: {
+    color: '#fff',
+    fontSize:"12"
+  }
+}
+// 图表Y轴默认配置数据
+export const echartsYAxisDefaultStyleData = {
+  ySplitLineShow: true, // y轴轴线是否显示
+  //坐标轴线样式
+  ysplitLineLineStyle: {
+    type: 'solid', //solid实线;dashed虚线
+    color: 'rgba(148, 147, 197, 0.5)'
+  },
+  y1axisLabelTextStyle: {
+    //坐标轴颜色
+    color: '#fff',
+    fontSize:"12",
+    padding: 5
+  },
+  // y轴刻度最大最小值和分隔值
+  y1MinMaxData: {
+    min: 0,
+    max: 60,
+    interval: 20
+  },
+  // y轴名称
+  y1NameData: {
+    name: '℃',
+    nameTextStyle: {
+      color: '#FDFDFD',
+      padding: [0, 0, 0, -52],
+    },
+    nameGap: 25
+  },
+  // y轴刻度标签文字样式
+  y2axisLabelTextStyle: {
+    //坐标轴颜色
+    color: '#fff',
+    fontSize:"12",
+    padding: 5
+  },
+  y2MinMaxData: {
+    name: '%',
+    nameTextStyle: {
+      color: '#FDFDFD',
+      padding: [0, -42, 0, 0],
+    },
+    nameGap: 25
+  },
+  y2NameData: {
+    min: 0,
+    max: 90,
+    interval: 30
+  }
+}
+// 图表的数据缩放
+export const echartsDataRoom = [{ //给x轴设置滚动条
+  start: 0, //默认为0
+  end: 50, //默认为100
+  type: 'slider',
+  show: false,
+  xAxisIndex: [0],
+  handleSize: 10, //滑动条的 左右2个滑动条的大小
+  height: 0, //组件高度
+}, { //下面这个属性是里面拖到
+  type: 'inside',
+  show: true,
+  xAxisIndex: [0],
+  start: 0, //默认为1
+  end: 50 // 100 - 1500 / 31, //默认为100
+}];
+

package/static/echartsStore.js

@@ -0,0 +1,14 @@
+export let echartsDataStore = {};
+export let echartsOptionsStore = {};
+export const destroyEcharts = function(){
+  for (let node of Object.values(echartsDataStore)) {
+    if(node) {
+      clearInterval(node.timeTicket);
+      node.chart.off('mouseover');
+      node.chart.off('mouseout');
+      node.chart.dispose();
+    }
+  }
+  echartsDataStore = {};
+  echartsOptionsStore = {};
+};

package/static/index.js

@@ -0,0 +1,2 @@
+export * from './echartsDefaultData';
+export * from './echartsStore';

package/style/index.css

@@ -0,0 +1,13 @@
+.canvas-point.pointer{
+    cursor: pointer;
+}
+.canvas-point,
+.canvas-point.default{
+    cursor: default;
+}
+.canvas-point.pointer > div{
+    z-index: -2;
+}
+.topology2dConfIfram{
+
+}