dcim-topology2d 2.0.8 → 3.0.2

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

@@ -1,432 +0,0 @@
-import {echartsDataRoom, echartsColorData, rankingTopImageName} from '../../../static';
-import {
-    setSeriesRenderGroup,
-    drawGraphicShape,
-    setChartLegendData,
-    setChartXAxisData,
-    setChartYAxisData,
-    setLineSeriesStyleData,
-    setRingPreSeriesOptions,
-    setRingProSeriesOptions,
-    mapFormatterSet
-} from '../utils';
-import {
-    gaugeNormalAuto,
-    lineBarDataAuto,
-    pieRingAssetTotalAuto,
-    pieRingProportionAuto,
-    pieRingNormalAuto,
-    topRankingListAuto,
-    scatterDataAuto,
-    barPileStaticDataAuto
-} from './render';
-import {commonStore, echartsStaticType} from "../../../core";
-
-export function getXYAxisLabelVal(index, intervalNum, value) {
-    if (index === 0 || index % intervalNum === 0) {
-        return value;
-    } else {
-        return '';
-    }
-}
-
-/**
- * 初始化图表与tabs关联的配置数据
- * @param node 元件节点
- */
-export function initBindTabSetting(node) {
-    const tabStaticKey = node.tags && node.tags.find((tag) => {return tag.includes('switchTabType')});
-    const switchTabData = tabStaticKey && commonStore[node.TID].switchTabDataPool[`${tabStaticKey}Data`];
-    if(switchTabData) {
-        const tabNode = Object.values(switchTabData)[0];
-        const tabEventNode = tabNode.events.find((ev) => {return ev.action === 8});
-        const tabStaticType = tabEventNode && tabEventNode.dcimStaticForType || '';
-        node.data.params.staticForType = tabStaticType;
-        return {
-            type: tabStaticType,
-            data: tabNode.tabData
-        };
-    }
-    return null;
-}
-
-// 自动滑动展示数据
-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);
-}
-
-// 停止自动滑动展示数据
-export function setMapStopAutoMoveOptions(chartNode) {
-
-    clearInterval(chartNode.timeTicket);
-
-}
-
-// 自动配置散点图的节点数据
-export function setMapScatterOptions(option, node) {
-    if(node.appearance.series) {
-        for (let i = 0; i < option.series.length; i++) {
-            const series = option.series[i];
-            const setSeries = node.appearance.series[i];
-            if(setSeries) {
-                series.itemStyle.color = setSeries.itemColor;
-                series.itemStyle.borderColor = setSeries.itemBorderColor;
-            }
-        }
-    }
-    if(node.appearance.yAxis && node.appearance.yAxis.axisLabel && node.appearance.yAxis.axisLabel.length) {
-        const yAxisAxisLabelRich = option.yAxis[0].axisLabel.rich;
-        const yAxisAxisLabel = node.appearance.yAxis.axisLabel;
-        const yAxisData = [];
-        for (let i = 0; i < yAxisAxisLabel.length; i++) {
-            const axisLabel = yAxisAxisLabel[i];
-            yAxisAxisLabelRich[`f${i+1}`] = {
-                color: axisLabel.color
-            };
-            if(axisLabel.label) yAxisData.push(axisLabel.label);
-        }
-        option.yAxis[0].data = yAxisData;
-    }
-}
-
-// 自动配置折线和柱状图的节点数据
-export function setMapLineBarOptions(option, node) {
-    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);
-    }
-    if(option.series.length < 2) return;
-    const total = node.appearance.total;
-    if(total && total.length) {
-        const seriesData = option.series[0].data;
-        if(seriesData.length < total.length && total[total.length - 1].value) seriesData.push(20);
-        const data2 = [];
-        for (let i = 0; i < seriesData.length; i++) {
-            const dr = node.appearance.total[i] ? node.appearance.total[i].value - Number(seriesData[i]) : option.series[1].data[i];
-            data2.push(dr);
-        }
-        option.series[1].data = data2;
-    }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 = 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 appearance = node.appearance;
-    if(appearance.type === 'ringPre'){
-
-        setRingPreSeriesOptions(option, appearance);
-
-    }else if(appearance.type === 'ringPro'){
-
-        setRingProSeriesOptions(option, appearance);
-
-    }else {
-        const seriesNode = option.series[0];
-        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',
-                color: appearance.label.color || '',
-                fontSize: appearance.label.fontSize || '12'
-            }
-        };
-
-        seriesNode.labelLine = appearance.labelLine && {...appearance.labelLine} || {};
-
-        if(seriesNode.labelLine.lineStyle && !seriesNode.labelLine.lineStyle.color) {
-            delete seriesNode.labelLine.lineStyle['color'];
-        }
-
-        const rich = {};
-
-        if(appearance.cir && appearance.cir.show) {
-            rich.cir = {...appearance.cir};
-            if(!rich.cir.borderColor) rich.cir.borderColor = 'auto';
-            if(!rich.cir.backgroundColor) rich.cir.backgroundColor = 'transparent';
-        }
-
-        if(appearance.labelDetail && appearance.labelDetail.length) {
-            // 环形明细展示配置，线条样式配置
-            rich.a = {
-                color: appearance.label.color || '',
-                fontSize: appearance.label.fontSize || '12'
-            };
-            for (let i = 0; i < appearance.labelDetail.length; i++) {
-                const detail = appearance.labelDetail[i];
-                rich[`b${i+1}`] = {
-                    color: detail.color,
-                    fontSize: detail.fontSize || '12'
-                };
-            }
-        }
-        seriesNode.label.normal.rich = rich;
-    }
-}
-
-// 自动配置3D柱状图的节点数据
-export function setMap3dBarOptions(option, node) {
-    // 取消注册自定义形状
-    //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,
-        };
-    };
-}
-
-export function setMapTopOptions(option, node) {
-    //const chartOption = JSON.parse(JSON.stringify(option));
-    const appearance = node.appearance;
-    Object.assign(option.grid, appearance.grid);
-    if(!appearance.type.includes('TOPRanking')) return;
-    const yNode = option.yAxis[0];
-    if(yNode.axisLabel.rich['a1']) return;
-    for (let i = 0, length = yNode.data.length; i < length; i++) {
-        const order = i + 1;
-        yNode.axisLabel.rich[`a${order}`] = {
-            width: 30,
-            height: 17,
-            lineHeight: 22,
-            verticalAlign: 'bottom',
-            backgroundColor: {
-                image: `../../../images/TOP/NO-${order}-${rankingTopImageName[i]}.png`
-            }
-        }
-    }
-}
-
-/**
- * 公共配置
- * @param option 图表配置数据
- * @param node 元件数据
- */
-export function setMapGlobalOptions(option, node) {
-    // 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 = commonStore[node.TID].echartsOptionsPool[node.id].option;
-    const appearance = node.appearance;
-    const 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 = commonStore[node.TID].echartsRealDataPool[node.id]; // 统计图实时数据
-    let staticTypeData = null; // 统计类型数据
-    if(staticForType === 'OTHER'){
-        // 其他类型，类型中的数据通常统计的都是历史数据，日、周、月、年、实时中的某一类，通常搭配分组统计使用。
-        // 类型中绑定一个测点为一个类型，绑定多个测点为多个类型。比如：有电功率和功率因数为两个分类，图表分组中分类数据绑定时就要同时绑定有电功率和功率因数两个测点，否则无法实现切换
-        for (let i = 0 ; i < echartsStaticType.length; i++) {
-            const chartData = syncEchartsData && syncEchartsData[`${echartsStaticType[i]}_Data`];
-            if(chartData) staticTypeData = chartData;
-        }
-    }else {
-        // 日，周，月，年，实时类型，不与分组统计一起使用
-        staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
-    }
-    // 实时数据加载
-    if(staticTypeData) {
-
-        if (displayMode === 1 || displayMode === 2) { // 折线图，柱状图
-
-            if(node.tabData && node.tabData.data.state && optionNode.yAxis[0].max) Object.assign(optionNode.yAxis[0], node.tabData.data); //若Tabs切换配置了数据，则修改Y轴原有配置
-
-            if(appearance.type === 'barPileStatic') {
-
-                barPileStaticDataAuto(optionNode, staticTypeData, appearance);
-
-            }else {
-
-                lineBarDataAuto(optionNode, params, staticTypeData, appearance);
-
-            }
-
-        }
-        if(displayMode === 4) { // top排行榜-电量仪
-
-            topRankingListAuto(optionNode, staticTypeData, appearance);
-
-        }
-        if(displayMode === 7) { // 散点图
-
-            scatterDataAuto(optionNode, staticTypeData);
-
-        }
-        if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
-            const pieData = staticTypeData && staticTypeData.data || staticTypeData || [];
-            if(appearance.type === 'ringPre') {
-                // 按照资产总台数统计设备告警数量
-                pieRingAssetTotalAuto(optionNode, pieData, appearance.total, appearance.alarmCount);
-
-            }else if(appearance.type === 'ringPro'){
-                // 按照百分比统计设备配置情况
-                pieRingProportionAuto(optionNode, pieData, appearance.proportion);
-            }else {
-
-                pieRingNormalAuto(optionNode, pieData);
-
-            }
-        }
-        if(displayMode === 6) { // 仪表盘
-
-            gaugeNormalAuto(optionNode, staticTypeData);
-
-        }
-    }else {
-        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.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;
-            }
-        }
-    }
-
-    mapFormatterSet(appearance, optionNode, staticTypeData);
-
-    const currentChartNode = commonStore[node.TID].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/drawGraphic.d.ts

@@ -1,3 +0,0 @@
-export declare function drawGraphicShape(appearance: any): any;
-export declare function graphicLinearGradient(nr: number, nb: number, nl: number, nt: number, colors: []): any;
-export declare function setSeriesRenderGroup(appearance: any, api: any): [];

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

@@ -1,97 +0,0 @@
-// 绘制柱子切面
-export function drawGraphicShape(appearance) {
-  const offsetX = appearance.offsetX;
-  const offsetY = appearance.offsetY;
-  // 绘制左侧面
-  const CubeLeft = echarts.graphic.extendShape({
-    shape: {
-      x: 0,
-      y: 0,
-    },
-    buildPath: function (ctx, shape) {
-      // 会canvas的应该都能看得懂，shape是从custom传入的
-      const xAxisPoint = shape.xAxisPoint;
-      // console.log(shape);
-      const c0 = [shape.x, shape.y];
-      const c1 = [shape.x - offsetX, shape.y - offsetY];
-      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
-      const c3 = [xAxisPoint[0], xAxisPoint[1]];
-      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
-    },
-  });
-  // 绘制右侧面
-  const CubeRight = echarts.graphic.extendShape({
-    shape: {
-      x: 0,
-      y: 0,
-    },
-    buildPath: function (ctx, shape) {
-      const xAxisPoint = shape.xAxisPoint;
-      const c1 = [shape.x, shape.y];
-      const c2 = [xAxisPoint[0], xAxisPoint[1]];
-      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
-      const c4 = [shape.x + offsetX, shape.y - offsetY];
-      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
-    },
-  });
-  // 绘制顶面
-  const CubeTop = echarts.graphic.extendShape({
-    shape: {
-      x: 0,
-      y: 0,
-    },
-    buildPath: function (ctx, shape) {
-      const c1 = [shape.x, shape.y];
-      const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
-      const c3 = [shape.x, shape.y - offsetX];
-      const c4 = [shape.x - offsetX, shape.y - offsetY];
-      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
-    },
-  });
-  return {
-    CubeLeft,
-    CubeRight,
-    CubeTop
-  }
-}
-// 线性渐变
-export function graphicLinearGradient(nr, nb, nl, nt, colors) {
-  return new echarts.graphic.LinearGradient(nr, nb, nl, nt, colors);
-}
-export function setSeriesRenderGroup(appearance, api) {
-  const seriesRenderData = [];
-  const groupTypeData = ['CubeLeft', 'CubeRight', 'CubeTop'];
-  const location = api.coord([api.value(0), api.value(1)]);
-  for (let i = 0; i < groupTypeData.length; i++) {
-    const groupItem = groupTypeData[i];
-    const groupNode = {
-      type: groupItem,
-      shape: {
-        api,
-        xValue: api.value(0),
-        yValue: api.value(1),
-        x: location[0],
-        y: location[1],
-        xAxisPoint: api.coord([api.value(0), 0]),
-      }
-    };
-    if(i === groupTypeData.length - 1){
-      // 顶部切面颜色填充
-      groupNode.style = {
-        fill: appearance.seriesCubeTopColor
-      }
-    }else {
-      // 左右切面颜色填充
-      let fillColor = graphicLinearGradient(0, 0, 0, 1, appearance[`series${groupItem}Gradient`]);
-      const cubeColorLinear = appearance[`series${groupItem}Linear`];
-      if(!cubeColorLinear) {
-        fillColor = appearance[`series${groupItem}Color`];
-      }
-      groupNode.style = {
-        fill: fillColor
-      }
-    }
-    seriesRenderData.push(groupNode);
-  }
-  return seriesRenderData;
-}

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

@@ -1 +0,0 @@
-export declare function mapFormatterSet(appearance: object, option: any, data: any): void;