dcim-topology2d 1.1.6 → 2.0.2

package/chart-diagram/src/utils/conversion.js

@@ -1,179 +1,320 @@
-import { echartsDataRoom, echartsOptionsStore } from '../../../static';
+import {echartsDataRoom, echartsColorData} from '../../../static';
+import {echartsOptionsPool, echartsDataPool, echartsRealDataPool} from '../../../store';
 import {
-  setSeriesRenderGroup,
-  drawGraphicShape,
-  setChartLegendData,
-  setChartXAxisData,
-  setChartYAxisData,
-  setLineSeriesStyleData
+    setSeriesRenderGroup,
+    drawGraphicShape,
+    setChartLegendData,
+    setChartXAxisData,
+    setChartYAxisData,
+    setLineSeriesStyleData
 } from '../utils';
+import {
+    gaugeNormalAuto,
+    lineBarDataAuto,
+    pieRingAssetTotalAuto,
+    pieRingNormalAuto,
+    topRankingListAuto
+} from './render';
 
 export function getXYAxisLabelVal(index, intervalNum, value) {
-  if (index === 0 || index % intervalNum === 0) {
-    return value;
-  } else {
-    return '';
-  }
+    if (index === 0 || index % intervalNum === 0) {
+        return value;
+    } else {
+        return '';
+    }
 }
+
 // 自动滑动展示数据
 export function setMapAutoMoveOptions(option, chartNode, node, callback) {
-  option.dataZoom = echartsDataRoom;
-  const dataZoomNode = option.dataZoom[0];
-  const { start, end, time } = node.appearance.zoomParams;
-  const zoomStart = Number(start);
-  const zoomEnd = Number(end);
-  const zoomTime = Number(time);
-  dataZoomNode.start = zoomStart;
-  dataZoomNode.end = zoomEnd;
-  chartNode.timeTicket = setInterval(() => {
-    if (Number(dataZoomNode.end) > 100) {
-      dataZoomNode.end = zoomEnd;
-      dataZoomNode.start = zoomStart;
-    } else {
-      dataZoomNode.end = dataZoomNode.end + 1 * (100 / option.series[0].data.length);
-      dataZoomNode.start = dataZoomNode.start + 1 * (100 / option.series[0].data.length);
-    }
-    callback(option);
-  }, zoomTime * 1000);
+    option.dataZoom = echartsDataRoom;
+    const dataZoomNode = option.dataZoom[0];
+    const {start, end, time} = node.appearance.zoomParams;
+    const zoomStart = Number(start);
+    const zoomEnd = Number(end);
+    const zoomTime = Number(time);
+    dataZoomNode.start = zoomStart;
+    dataZoomNode.end = zoomEnd;
+    chartNode.timeTicket = setInterval(() => {
+        if (Number(dataZoomNode.end) > 100) {
+            dataZoomNode.end = zoomEnd;
+            dataZoomNode.start = zoomStart;
+        } else {
+            dataZoomNode.end = dataZoomNode.end + 1 * (100 / option.series[0].data.length);
+            dataZoomNode.start = dataZoomNode.start + 1 * (100 / option.series[0].data.length);
+        }
+        callback(option);
+    }, zoomTime * 1000);
 }
+
 // 停止自动滑动展示数据
 export function setMapStopAutoMoveOptions(chartNode) {
 
-  clearInterval(chartNode.timeTicket);
+    clearInterval(chartNode.timeTicket);
 
 }
+
 // 自动配置折线和柱状图的节点数据
 export function setMapLineBarOptions(option, node) {
-  const chartOption = JSON.parse(JSON.stringify(option));
-  chartOption.color = node.appearance.color;
-  chartOption.xAxis[0].axisLabel.formatter = function(value, index) {
-    return getXYAxisLabelVal(index, node.appearance.intervalNumX, value);
-  }
-  chartOption.yAxis[0].axisLabel.formatter = function(value, index) {
-    return getXYAxisLabelVal(index, node.appearance.intervalNumY, value);
-  }
-  if (chartOption.series.length < 2) {
-    chartOption.tooltip.formatter = function(params) {
-      const item = params[0];
-      return item.name + ' : ' + item.value;
+    option.color = node.appearance.color;
+    option.xAxis[0].axisLabel.formatter = function (value, index) {
+        return getXYAxisLabelVal(index, node.appearance.intervalNumX, value);
+    }
+    option.yAxis[0].axisLabel.formatter = function (value, index) {
+        return getXYAxisLabelVal(index, node.appearance.intervalNumY, value);
     }
-  }
-  // chartOption.yAxis[0].splitLine = node.appearance.splitLine;
-  return chartOption;
+    if (option.series.length < 2) {
+        option.tooltip.formatter = function (params) {
+            const item = params[0];
+            return item.name + ' : ' + item.value;
+        }
+    }else {
+        option.series.map((item, index) => {
+            if(!(item.itemStyle && item.itemStyle.normal && item.itemStyle.normal.color)) {
+                item.itemStyle = {
+                    normal: {
+                        color : echartsColorData[index]
+                    }
+                }
+            }
+        });
+    }
+    // chartOption.yAxis[0].splitLine = node.appearance.splitLine;
 }
+
 // 自动配置仪表盘的节点数据
 export function setMapGaugeOptions(option, node) {
-  const chartOption = JSON.parse(JSON.stringify(option));
-  const seriesNode = chartOption.series[0];
-  const appearance = node.appearance;
-  seriesNode.min = appearance.min;
-  seriesNode.max = appearance.max;
-  seriesNode.splitNumber = appearance.splitNumber;
-  seriesNode.pointer = appearance.pointer;
-  seriesNode.axisLabel = appearance.axisLabel;
-  seriesNode.axisLine.lineStyle = appearance.axisLine.lineStyle;
-  if(appearance.detail) seriesNode.detail = appearance.detail;
-  if(appearance.data) seriesNode.data = appearance.data;
-  if(chartOption.isGaugeLinear) {
-    seriesNode.axisLine.lineStyle.color = [
-      [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, chartOption.linearColors)]
-    ]
-  }
-  return chartOption;
+    //const chartOption = JSON.parse(JSON.stringify(option));
+    const seriesNode = option.series[0];
+    const appearance = node.appearance;
+    if(!appearance.min) appearance.min = 0;
+    if(!appearance.max) appearance.max = 100;
+    if (typeof appearance.min === 'number') seriesNode.min = appearance.min;
+    if (appearance.max) seriesNode.max = appearance.max;
+    if (appearance.splitNumber) seriesNode.splitNumber = appearance.splitNumber;
+    if (appearance.pointer) seriesNode.pointer = appearance.pointer;
+    if (appearance.axisLabel) seriesNode.axisLabel = appearance.axisLabel;
+    if (appearance.axisLine) seriesNode.axisLine.lineStyle = appearance.axisLine.lineStyle;
+    if (appearance.detail) seriesNode.detail = appearance.detail;
+    if (appearance.data) seriesNode.data = appearance.data;
+    if (appearance.detail) seriesNode.detail = appearance.detail;
+    if (appearance.data) seriesNode.data = appearance.data;
+    if (option.isGaugeLinear) {
+        seriesNode.axisLine.lineStyle.color = [
+            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, option.linearColors)]
+        ]
+    }
 }
+
 // 自动配置环形图和饼图的节点数据
 export function setMapRingOptions(option, node) {
-  const chartOption = JSON.parse(JSON.stringify(option));
-  const seriesNode = chartOption.series[0];
-  const appearance = node.appearance;
-  seriesNode.radius = [`${appearance.innerRadius}%`, `${appearance.outerRadius}%`];
-  seriesNode.label = appearance.label;
-  return chartOption;
+    //const chartOption = JSON.parse(JSON.stringify(option));
+    const seriesNode = option.series[0];
+    const appearance = node.appearance;
+    if(!appearance.inner) {
+        if ((!appearance.label || typeof appearance.label.showValue !== 'boolean')) {
+            appearance.label = {
+                showValue: appearance.type === 'ring',
+                unit: appearance.type === 'ring' ? '%' : ''
+            }
+        }
+        seriesNode.label = {
+            normal: {
+                show: true,
+                position: 'outside'
+            }
+        };
+        seriesNode.label.normal.formatter = (data) => {
+            if (appearance.label.showValue === true) {
+                return `${data.name}：${data.value}${appearance.label.unit}`;
+            } else {
+                return `${data.name}`;
+            }
+        }
+    }else {
+        // chartOption.title.text = '{v|'+appearance.alarmCount+'}{unit|/'+appearance.total+'台}';
+        const {
+            vFontSize, vFontWeight, vColor,
+            vTop, unitFontSize, unitFontWeight,
+            unitColor} = appearance.text;
+        const rich = {
+            v: {
+                fontSize: vFontSize,
+                fontWeight: vFontWeight,
+                color: vColor,
+                padding: [vTop, 0, 0, 0]
+            },
+            unit: {
+                fontSize: unitFontSize,
+                fontWeight: unitFontWeight,
+                color: unitColor
+            }
+        };
+        Object.assign(option.title.textStyle.rich, rich);
+        option.title.y = `${appearance.text.y}%`;
+        option.series[0].radius[1] = `${appearance.inner.borderWidth}%`;
+        // const value1 = ((100 / appearance.total) * appearance.alarmCount).toFixed(6);
+        // chartOption.series[0].data[0].value = value1;
+        option.series[0].data[0].itemStyle.color = appearance.inner.borderColor;
+        // chartOption.series[0].data[1].value = 100 - value1;
+        option.series[0].data[1].itemStyle.color = appearance.inner.borderBgColor;
+        option.series[1].radius[1] = `${appearance.outer.borderWidth}%`;
+        option.series[1].data[0].itemStyle.color = appearance.outer.borderColor;
+    }
 }
+
 // 自动配置3D柱状图的节点数据
 export function setMap3dBarOptions(option, node) {
-  // 取消注册自定义形状
-  const chartOption = JSON.parse(JSON.stringify(option));
-  const seriesNode = chartOption.series[0];
-  const appearance = node.appearance;
-  if(appearance.seriesCubeLeftLinear) appearance.seriesCubeLeftColor = 'rgb(0, 128, 215)';
-  if(appearance.seriesCubeRightLinear) appearance.seriesCubeRightColor = 'rgb(3, 58, 125)';
-  if(appearance.graphicShape) {
-    const { CubeLeft, CubeRight, CubeTop } = drawGraphicShape(appearance);
-    // 注册三个面图形
-    echarts.graphic.registerShape('CubeLeft', CubeLeft);
-    echarts.graphic.registerShape('CubeRight', CubeRight);
-    echarts.graphic.registerShape('CubeTop', CubeTop);
+    // 取消注册自定义形状
+    //const chartOption = JSON.parse(JSON.stringify(option));
+    const seriesNode = option.series[0];
+    const appearance = node.appearance;
+    if (appearance.seriesCubeLeftLinear) appearance.seriesCubeLeftColor = 'rgb(0, 128, 215)';
+    if (appearance.seriesCubeRightLinear) appearance.seriesCubeRightColor = 'rgb(3, 58, 125)';
+    if (appearance.graphicShape) {
+        const {CubeLeft, CubeRight, CubeTop} = drawGraphicShape(appearance);
+        // 注册三个面图形
+        echarts.graphic.registerShape('CubeLeft', CubeLeft);
+        echarts.graphic.registerShape('CubeRight', CubeRight);
+        echarts.graphic.registerShape('CubeTop', CubeTop);
+    }
+    option.tooltip.formatter = function (params) {
+        const item = params[0];
+        return item.name + ' : ' + item.value;
+    }
+}
+
+function renderMap3dBarSeriesItem(seriesNode, appearance) {
     seriesNode.renderItem = (params, api) => {
-      const seriesRenderData = setSeriesRenderGroup(appearance, api);
-      return {
-        type: 'group',
-        children: seriesRenderData,
-      };
+        const seriesRenderData = setSeriesRenderGroup(appearance, api);
+        return {
+            type: 'group',
+            children: seriesRenderData,
+        };
     };
-  }
-  chartOption.tooltip.formatter = function(params) {
-    const item = params[0];
-    return item.name + ' : ' + item.value;
-  }
-  return chartOption;
 }
+
 export function setMapTopOptions(option, node) {
-  const chartOption = JSON.parse(JSON.stringify(option));
-  const appearance = node.appearance;
-  Object.assign(chartOption.grid, appearance.grid);
-  return chartOption;
+    //const chartOption = JSON.parse(JSON.stringify(option));
+    const appearance = node.appearance;
+    Object.assign(option.grid, appearance.grid);
 }
+
 // 公共配置
 export function setMapGlobalOptions(option, node) {
-  const chartOption = JSON.parse(JSON.stringify(option));
-  const appearance = node.appearance;
-  // 图表网格数据
-  if (appearance.grid) {
-
-    chartOption.grid ? Object.assign(chartOption.grid, appearance.grid) : chartOption.grid = appearance.grid;
-
-  }
-  // 图表X轴数据
-  if(chartOption.xAxis) setChartXAxisData(chartOption.xAxis, appearance);
-  // 图表Y轴数据
-  if(chartOption.yAxis) setChartYAxisData(chartOption.yAxis, appearance);
-   // 图表图例数据
-  if (chartOption.legend) setChartLegendData(chartOption.legend, appearance);
-  // 曲线样式数据
-  if (appearance.type.includes('line')) setLineSeriesStyleData(chartOption.series, appearance);
-
-  return chartOption;
+    // const chartOption = JSON.parse(JSON.stringify(option));
+    const appearance = node.appearance;
+    // 图表网格数据
+    if (appearance.grid) {
+
+        option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
+
+    }
+    // 图表X轴数据
+    if (option.xAxis) setChartXAxisData(option.xAxis, appearance);
+    // 图表Y轴数据
+    if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
+    // 图表图例数据
+    if (option.legend) setChartLegendData(option.legend, appearance);
+    // 曲线样式数据
+    if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
 }
+
 // 实时改变图表data值
 export function setMapDataOptions(option, node) {
-    const optionNode = echartsOptionsStore[node.id];
-    if (option.legend) {
-        optionNode.legend = option.legend;
+    const optionNode = echartsOptionsPool[node.id].option;
+    const appearance = node.appearance;
+    const params = node.data ? node.data.params : node.params;
+    // 3d 柱状图
+    if (appearance.type === '3dBar') renderMap3dBarSeriesItem(optionNode.series[0], appearance);
+    const displayMode = parseInt(option.displayMode); // 图表类型
+    const staticForType = params && params.staticForType || ''; //统计类型：日，周，月，年，实时
+    const syncEchartsData = echartsRealDataPool[node.id]; // 统计图实时数据
+    const staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData; // 统计类型数据
+    // 实时数据加载
+    if(staticTypeData) {
+
+        if (displayMode === 1 || displayMode === 2) { // 折线图，柱状图
+
+            lineBarDataAuto(optionNode, params, staticTypeData);
+
+        }
+        if(displayMode === 4) { // top排行榜
+
+            topRankingListAuto(optionNode, staticTypeData);
+
+        }
+        if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
+            const pieData = staticTypeData || staticTypeData.data || [];
+            if(appearance.type === 'ringPre') {
+                // 按照资产总台数统计设备告警数量
+                pieRingAssetTotalAuto(optionNode, pieData, appearance.total, appearance.alarmCount);
+
+            }else {
+
+                pieRingNormalAuto(optionNode, pieData);
+
+            }
+        }
+        if(displayMode === 6) { // 仪表盘
+
+            gaugeNormalAuto(optionNode, staticTypeData);
+
+        }
     }else {
-        delete optionNode['legend'];
-    }
-    if(option.xAxis) {
-        for (let i = 0; i < option.xAxis.length; i++) {
-            const item = option.xAxis[i];
-            if(item.data){
-                optionNode.xAxis[i].data = item.data;
+        if(option.title && option.title.text) {
+            optionNode.title.text = option.title.text;
+        }
+        if (option.legend) {
+            optionNode.legend = option.legend;
+        } else {
+            delete optionNode['legend'];
+        }
+        if (option.xAxis) {
+            for (let i = 0; i < option.xAxis.length; i++) {
+                const item = option.xAxis[i];
+                if (item.data) {
+                    optionNode.xAxis[i].data = item.data;
+                }
             }
         }
-    }
-    if(option.yAxis) {
-        for (let i = 0; i < option.yAxis.length; i++) {
-            const item = option.yAxis[i];
-            if(item.data){
-                optionNode.yAxis[i].data = item.data;
-            };
+        if (option.yAxis) {
+            for (let i = 0; i < option.yAxis.length; i++) {
+                const item = option.yAxis[i];
+                if (item.data) {
+                    optionNode.yAxis[i].data = item.data;
+                }
+                ;
+            }
         }
-    }
-    if(option.series) {
-        for (let i = 0; i < option.series.length; i++) {
-            const item = option.series[i];
-            optionNode.series[i].data = item.data;
+        if (option.series) {
+            for (let i = 0; i < option.series.length; i++) {
+                const item = option.series[i];
+                if(item.name) optionNode.series[i].name = item.name;
+                optionNode.series[i].data = item.data;
+            }
         }
     }
-    return optionNode;
+
+    const currentChartNode = echartsDataPool[node.id];
+    const mapChart = currentChartNode.chart;
+    clearInterval(currentChartNode.timeTicket);
+    currentChartNode.timeTicket = null;
+    // 自动滑动展示数据
+    if (appearance.timeTicket) {
+        mapChart.off('mouseover');
+        mapChart.off('mouseout');
+        mapChart.on('mouseover', function () {
+            setMapStopAutoMoveOptions(currentChartNode);
+        });
+        mapChart.on('mouseout', function () {
+            setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
+                return mapChart.setOption(chartNode);
+            })
+        });
+        setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
+            return mapChart.setOption(chartNode);
+        })
+    }
+    mapChart.setOption(optionNode);
+    mapChart.resize();
 }

package/chart-diagram/src/utils/render.d.ts

@@ -0,0 +1,5 @@
+export declare function lineBarDataAuto(option: any, params: {}, data: {}): void;
+export declare function topRankingListAuto(option: any, data: {}): void;
+export declare function pieRingAssetTotalAuto(option: any, data: {}, total: number, count: number): void;
+export declare function pieRingNormalAuto(option: any, data: {}): void;
+export declare function gaugeNormalAuto(option: any, data: {}): void;

package/chart-diagram/src/utils/render.js

@@ -0,0 +1,107 @@
+import {echartsColorData} from "../../../static";
+
+/**
+ * 折线和柱状图实时数据
+ * @param option 图表配置数据
+ * @param params 绑定的图表参数
+ * @param data 实时图表数据
+ */
+export function lineBarDataAuto(option, params, data) {
+    const seriesNodes = option.series;
+    if(data && data.XData) option.xAxis[0].data = data.XData;
+    if(!(data && data.seriesData && data.seriesData.length)) return;
+    if(seriesNodes.length > 1 || params && params.curveNum > 1){
+        // 双曲线|柱状
+        const legendData = [];
+        let legendChange = false;
+        seriesNodes.map((item, index) => {
+            const seriesItem = data.seriesData[index];
+            item.data = seriesItem ? seriesItem.data : [];
+            // 获取角标数据
+            if(seriesItem && seriesItem.name) {
+                item.name = seriesItem.name;
+                legendData.push(seriesItem.name);
+                legendChange = true;
+            }
+        });
+        if(option.legend && legendChange) option.legend.data = legendData; // 为角标数据赋值
+    }else{
+        if(!data.seriesData.length) return;
+        let seriesData = [];
+        for (let i = 0; i < data.seriesData.length; i++){
+            const realSeriesNode = data.seriesData[i];
+            const currSeriesNode = seriesNodes[i] ? seriesNodes[i] : JSON.parse(JSON.stringify(seriesNodes[0]));
+            if(realSeriesNode.name) currSeriesNode.name = realSeriesNode.name;
+            currSeriesNode.data = realSeriesNode.data;
+            seriesData.push(currSeriesNode);
+        }
+        option.series = seriesData;
+    }
+}
+
+/**
+ * TOP排行榜实时数据
+ * @param option 图表配置数据
+ * @param data 实时图表数据
+ */
+export function topRankingListAuto(option, data) {
+    if(data && data.XData) option.yAxis[0].data = data.XData;
+    if(!(data && data.seriesData && data.seriesData.length)) return;
+    const seriesData = data.seriesData[0].data;
+    option.yAxis[1].data = seriesData;
+    for (let i = 0; i < option.series.length; i++) {
+        const node = option.series[i];
+        node.symbolBoundingData = data.total;
+        node.data = seriesData;
+    }
+}
+
+/**
+ * 环形设备告警数量实时数据
+ * @param option 图表配置数据
+ * @param data 实时图表数据
+ * @param total 总数
+ * @param count 告警数
+ */
+export function pieRingAssetTotalAuto(option, data, total, count) {
+    if(data && data.length > 1) {
+        total = parseInt(data[0].value);
+        count = parseInt(data[1].value);
+    }
+    option.title.text = '{v|'+count+'}{unit|/'+total+'台}';
+    const value1 = ((100 / total) * count).toFixed(6);
+    option.series[0].data[0].value = value1;
+    option.series[0].data[1].value = 100 - value1;
+}
+
+/**
+ * 饼图环形图默认展示 实时数据
+ * @param option 图表配置数据
+ * @param data 实时图表数据
+ */
+export function pieRingNormalAuto(option, data) {
+    if(!(data && data.length)) return;
+    const colors = option.color || echartsColorData;
+    const seriesData = [];
+    data.map((chd, index) => {
+        seriesData.push({
+            itemStyle: { color: colors[index] },
+            name: chd.name,
+            value: chd.value
+        })
+    })
+    option.series[0].data = seriesData;
+}
+
+/**
+ * 仪表盘默认展示 实时数据
+ * @param option 图表配置数据
+ * @param data 实时图表数据
+ */
+export function gaugeNormalAuto(option, data) {
+    if(!data) return;
+    // 仪表盘分两种，分别有不同的取值方式，下面两行先注释掉
+    // node.appearance.title.text = data.name;
+    // option.title.text = data.name;
+    option.series[0].data[0].value = data.value;
+}

package/core/index.d.ts

@@ -7,3 +7,4 @@ export * from './src/models';
 export * from './src/middles';
 export * from './src/healps';
 export * from './src/store';
+export * from './src/element';

package/core/index.js

@@ -7,6 +7,7 @@ export * from './src/models';
 export * from './src/middles';
 export * from './src/healps';
 export * from './src/store';
+export * from './src/element';
 //# sourceMappingURL=index.js.map
 import axios from 'axios'
 if(axios.defaults.headers.common) axios.defaults.headers.common['Authorization'] = getToken();

package/core/src/activeLayer.js

@@ -306,12 +306,6 @@ var ActiveLayer = /** @class */ (function (_super) {
                         }
                     }
                 }
-                if(item.name == 'arbitraryGraph') {
-                    for(let i = 0, circles = item.rect.circles; i<circles.length; i++) {
-                        circles[i].x = circles[i].x + offsetX;
-                        circles[i].y = circles[i].y + offsetY;
-                    }
-                }
             }
             if (item instanceof Line && item.from) {
                 var offsetX_1 = this.nodeRects[i].x + x - item.from.x;

package/core/src/canvas.js

@@ -19,6 +19,7 @@ var Canvas = /** @class */ (function (_super) {
     function Canvas(TID) {
         var _this = _super.call(this, TID) || this;
         _this.canvas = document.createElement('canvas');
+        _this.canvas.setAttribute('class', 'canvas-draw');
         _this.width = commonStore[TID].parentElem.clientWidth;
         _this.height = commonStore[TID].parentElem.clientHeight;
         _this.canvas.style.position = 'absolute';

package/core/src/common.d.ts

@@ -75,8 +75,7 @@ export declare class Common {
   ratioCord: Object;
   _emitter: Emitter;
   conversionData(data?: any): void;
-  setSwitchTabData(node: Node | any, index: Number): void;
-  switchStaticsCheckType(node: Node | any): any;
+  switchStaticsCheckType(node: Node | any, staticTypeNode: any): any;
   canvasResize(size?: {
     width: number;
     height: number;