dcim-topology2d 2.0.6 → 2.0.7

package/chart-diagram/src/echarts/index.js

@@ -61,14 +61,17 @@ export function echarts(ctx, node) {
         setTimeout(function () {
             let option = node.data.echarts.option;
             if(!(echartsData && echartsData.chart)) return;
+            const pageZoom = currentStore.data.pageZoom;
+            echartsData.div.style.transform = `scale(${pageZoom})`;
+            echartsData.div.style.transformOrigin = '0 0';
             if(node.data.params) node.data.params.tabCorrelationType = echartsData.tabCorrelationType || ''; // 统计图与Tab关联
             const isLocked = currentStore.data.locked;
             if (!isLocked || !currentStore.echartsOptionsPool[node.id]) {
                 const tabData = initBindTabSetting(node); // 初始化Tabs数据配置
                 // 【未锁定（编辑）状态, options未初始化的状态】
                 if (!appearance.type) appearance.type = echartsTypeMap[`type_${option.displayMode}`]; // 兼容旧数据配置
-                // 公共配置 Top排行榜跳过公共属性配置
-                if (option.displayMode !== 4) setMapGlobalOptions(option, node);
+                // 公共配置 Top排行榜散点图跳过公共属性配置
+                if (option.displayMode !== 4 && option.displayMode !== 7) setMapGlobalOptions(option, node);
                 // 折线图和柱状图
                 if (['line', 'bar'].includes(appearance.type)) setMapLineBarOptions(option, node);
                 // 仪表盘
@@ -78,7 +81,7 @@ export function echarts(ctx, node) {
                 // 3d 柱状图
                 if (appearance.type === '3dBar') setMap3dBarOptions(option, node);
                 // Top排行榜
-                if (appearance.type === 'TOP') setMapTopOptions(option, node);
+                if (appearance.type.includes('TOP')) setMapTopOptions(option, node);
                 //option.title = appearance.title;
                 option.backgroundColor = appearance.backgroundColor;
                 currentStore.echartsOptionsPool[node.id] = {
@@ -95,7 +98,6 @@ export function echarts(ctx, node) {
             }
             // echarts 数据渲染更新
             setMapDataOptions(option, currentStore.echartsOptionsPool[node.id].data);
-
             node.elementRendered = true;
         })
     }

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

@@ -96,9 +96,11 @@ export function setChartYAxisData(yAxis, appearance) {
     }
     for (let i = 0; i < yAxis.length; i++) {
         const item = yAxis[i];
+        if(!item.axisLabel) item.axisLabel = {};
         if (!item.axisLabel.textStyle) {
             item.axisLabel.textStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['y1axisLabelTextStyle']));
         }
+        if(!item.splitLine) item.splitLine = {};
         if (!item.splitLine.lineStyle) {
             item.splitLine.lineStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['ysplitLineLineStyle']));
         }

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

@@ -1,4 +1,4 @@
-import {echartsDataRoom, echartsColorData} from '../../../static';
+import {echartsDataRoom, echartsColorData, rankingTopImageName} from '../../../static';
 import {
     setSeriesRenderGroup,
     drawGraphicShape,
@@ -7,7 +7,8 @@ import {
     setChartYAxisData,
     setLineSeriesStyleData,
     setRingPreSeriesOptions,
-    setRingProSeriesOptions
+    setRingProSeriesOptions,
+    mapFormatterSet
 } from '../utils';
 import {
     gaugeNormalAuto,
@@ -15,7 +16,9 @@ import {
     pieRingAssetTotalAuto,
     pieRingProportionAuto,
     pieRingNormalAuto,
-    topRankingListAuto
+    topRankingListAuto,
+    scatterDataAuto,
+    barPileStaticDataAuto
 } from './render';
 import {commonStore, echartsStaticType} from "../../../core";
 
@@ -133,13 +136,13 @@ 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')) {
@@ -151,16 +154,41 @@ export function setMapRingOptions(option, node) {
         seriesNode.label = {
             normal: {
                 show: true,
-                position: 'outside'
+                position: 'outside',
+                color: appearance.label.color || '',
+                fontSize: appearance.label.fontSize || '12'
             }
         };
-        seriesNode.label.normal.formatter = (data) => {
-            if (appearance.label.showValue === true) {
-                return `${data.name}：${data.value}${appearance.label.unit}`;
-            } else {
-                return `${data.name}`;
+
+        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;
     }
 }
 
@@ -199,6 +227,21 @@ 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`
+            }
+        }
+    }
 }
 
 /**
@@ -220,7 +263,7 @@ export function setMapGlobalOptions(option, node) {
     // 图表Y轴数据
     if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
     // 图表图例数据
-    if (option.legend) setChartLegendData(option.legend, appearance);
+    //if (option.legend) setChartLegendData(option.legend, appearance);
     // 曲线样式数据
     if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
 }
@@ -254,12 +297,25 @@ export function setMapDataOptions(option, node) {
 
             if(node.tabData && node.tabData.data.state && optionNode.yAxis[0].max) Object.assign(optionNode.yAxis[0], node.tabData.data); //若Tabs切换配置了数据，则修改Y轴原有配置
 
-            lineBarDataAuto(optionNode, params, staticTypeData);
+            if(appearance.type === 'barPileStatic') {
+                
+                barPileStaticDataAuto(optionNode, staticTypeData, appearance);
+                
+            }else {
+                
+                lineBarDataAuto(optionNode, params, staticTypeData);
+                
+            }
+
+        }
+        if(displayMode === 4) { // top排行榜-电量仪
+
+            topRankingListAuto(optionNode, staticTypeData, appearance);
 
         }
-        if(displayMode === 4) { // top排行榜
+        if(displayMode === 7) { // 散点图
 
-            topRankingListAuto(optionNode, staticTypeData);
+            scatterDataAuto(optionNode, staticTypeData);
 
         }
         if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
@@ -305,7 +361,6 @@ export function setMapDataOptions(option, node) {
                 if (item.data) {
                     optionNode.yAxis[i].data = item.data;
                 }
-                ;
             }
         }
         if (option.series) {
@@ -317,6 +372,8 @@ export function setMapDataOptions(option, node) {
         }
     }
 
+    mapFormatterSet(appearance, optionNode, staticTypeData);
+
     const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
     const mapChart = currentChartNode.chart;
     clearInterval(currentChartNode.timeTicket);

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

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

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

@@ -0,0 +1,129 @@
+import {rankingTopImageName, rankingTopColorList} from '../../../static';
+
+export function mapFormatterSet(appearance, options, data) {
+    if(appearance.type.includes('ring') || appearance.type.includes('pie')) {
+        const seriesNode = options.series[0];
+        if(seriesNode.label && seriesNode.label.normal &&!seriesNode.label.normal.formatter) {
+            setMapRingOptionsFormatter(appearance, seriesNode);
+        }
+    }
+    if(appearance.type.includes('lineTwins')) setMapLineTwinsFormatter(appearance, options);
+    if(appearance.type.includes('scatter')) setMapScatterFormatter(options);
+    if(appearance.type.includes('TOPRanking')) setMapTopScoreFormatter(options, data, appearance);
+    if(appearance.type.includes('barPileStatic')) setMapBarPileStaticFormatter(appearance, options);
+}
+function setMapLineTwinsFormatter(appearance, options) {
+    if(!options.tooltip.formatter && appearance.tooltipUnit) {
+        options.tooltip.formatter = function (params) {
+            let relVal = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+                const unit = appearance.tooltipUnit[i] || '';
+                relVal +=
+                        "<br/>" +
+                        params[i].marker +
+                        params[i].seriesName +
+                        " : " +
+                        params[i].value +
+                        unit;
+            }
+            return relVal;
+        }
+    }
+}
+// 堆叠统计
+function setMapBarPileStaticFormatter(appearance, options) {
+    if(!options.tooltip.formatter){
+        options.tooltip.formatter = function(param) {
+            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;margin-bottom: 5px;">${param[0].name}</div>${param[0].seriesName}：${param[0].value}<br>${param[1].seriesName}：${appearance.total[param[1].dataIndex]}`;
+        }
+    }
+    if(!options.series[1].label.formatter){
+        options.series[1].label.formatter = function(param) {
+            if(!param.value) return '';
+            let value = '';
+            if(appearance.totalStyle) {
+                value = `${appearance.totalStyle.label ? appearance.total[param.dataIndex] : ''}${appearance.totalStyle.unit}`;
+            }else {
+                value = `${appearance.total[param.dataIndex]}`;
+            }
+            return value;
+        }
+    }
+}
+// Top排行榜自定义展示配置
+function setMapTopScoreFormatter(options, data, appearance) {
+    const yNode = options.yAxis[0];
+    if(!yNode.axisLabel.formatter) {
+        yNode.axisLabel.formatter = function(value, i) {
+            return `{a${i+1}|}{b|${value}}`;
+        }
+    }
+    const seriesNode = options.series[0];
+    if(appearance.total && appearance.total.length) {
+        const realData = data && data.seriesData && data.seriesData[0] && data.seriesData[0].data;
+        if(realData && realData.length) {
+            seriesNode.data = appearance.total;
+            seriesNode.itemStyle.normal.label.formatter = function(param) {
+                return `${realData[param.dataIndex]}${appearance.unit}`;
+            }
+        }
+    }
+    if(seriesNode.itemStyle.normal.color) return;
+    for (let i = 0; i < options.series.length; i++) {
+        const node = options.series[i];
+        node.itemStyle.normal.color = function(params) {
+            return rankingTopColorList[params.dataIndex];
+        }
+    }
+}
+// 散点图series自定义展示配置
+function setMapScatterFormatter(options) {
+    const seriesNode = options.series[0];
+    if(!options.tooltip.formatter) {
+        options.tooltip.formatter = function(param) {
+            const value = param.value;
+            // prettier-ignore
+            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;padding-bottom: 5px;margin-bottom: 5px;">${param.seriesName}告警</div>告警等级：${value[1]}<br>告警数量：${value[2]}`;
+        }
+    }
+    if(!options.yAxis[0].axisLabel.formatter) {
+        options.yAxis[0].axisLabel.formatter = function (value, index) {
+            return `{f${index+1}|${value}}`;
+        }
+    }
+    if(seriesNode.symbolSize) return;
+    for (let i = 0; i < options.series.length; i++) {
+        const node = options.series[i];
+        node.symbolSize = function(d) {
+            let markSize = Math.sqrt(d[2]) * 2;
+            if(markSize < 6) markSize = 6;
+            if(markSize > 20) markSize = 20;
+            //if(!markSize) markSize = 1;
+            return markSize;
+        }
+        node.label.emphasis.formatter = function(param) {
+            return param.data[0];
+        }
+    }
+}
+// 环形图自定义展示配置
+function setMapRingOptionsFormatter(appearance, seriesNode) {
+    if(appearance.labelDetail && appearance.labelDetail.length) {
+        seriesNode.label.normal.formatter = (data) => {
+            let result = `{a|${data.name}}\n{cir|}`;
+            for (let i = 0; i < appearance.labelDetail.length; i++) {
+                const detail = appearance.labelDetail[i];
+                result += '\n'+`{b${i+1}|${detail.title}${i === 0 ? data.value : data[`value${i+1}`]}${detail.unit}}`;
+            }
+            return result;
+        }
+    }else {
+        seriesNode.label.normal.formatter = (data) => {
+            if (appearance.label.showValue === true) {
+                return `${data.name}：${data.value}${appearance.label.unit}`;
+            } else {
+                return `${data.name}`;
+            }
+        }
+    }
+}

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

@@ -1,3 +1,4 @@
 export * from './conversion';
 export * from './drawGraphic';
 export * from './changeOptions';
+export * from './formatter';

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

@@ -1,3 +1,4 @@
 export * from './conversion';
 export * from './drawGraphic';
 export * from './changeOptions';
+export * from './formatter';

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

@@ -1,5 +1,7 @@
 export declare function lineBarDataAuto(option: any, params: {}, data: {}): void;
-export declare function topRankingListAuto(option: any, data: {}): void;
+export declare function barPileStaticDataAuto(option: any, data: {}, appearance: {}): void;
+export declare function topRankingListAuto(option: any, data: {}, appearance: {}): void;
+export declare function scatterDataAuto(option: any, data: {}): void;
 export declare function pieRingAssetTotalAuto(option: any, data: {}, total: number, count: number): void;
 export declare function pieRingProportionAuto(option: any, data: {}, proportion: number): void;
 export declare function pieRingNormalAuto(option: any, data: {}): void;

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

@@ -46,21 +46,89 @@ export function lineBarDataAuto(option, params, data) {
     }
 }
 
+export function barPileStaticDataAuto(option, data, appearance) {
+    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.series[0].data = seriesData;
+    const data2 = [];
+    for (let i = 0; i < seriesData.length; i++) {
+        const dr = appearance.total[i] - Number(seriesData[i]);
+        data2.push(dr);
+    }
+    option.series[1].data = data2;
+}
+
 /**
- * TOP排行榜实时数据
+ * TOP排行-电量仪实时数据
  * @param option 图表配置数据
  * @param data 实时图表数据
+ * @param appearance 自定义配置数据
  */
-export function topRankingListAuto(option, data) {
+export function topRankingListAuto(option, data, appearance) {
     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;
+    if(appearance.type === 'TOPRanking') {
+        if(appearance.total && appearance.total.length) return;
+        option.series[0].data = data.seriesData[0].data;
+    }else {
+        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 实时图表数据
+ */
+export function scatterDataAuto(option, data) {
+    if(data && data.XData) option.xAxis[0].data = data.XData;
+    if(!(data && data.seriesData && data.seriesData.length)) return;
+    const { scatterData, legend, yData } = convertScatter3DTo2D(data);
+    option.legend.data = [...legend];
+    option.yAxis[0].data = [...yData];
     for (let i = 0; i < option.series.length; i++) {
-        const node = option.series[i];
-        node.symbolBoundingData = data.total;
-        node.data = seriesData;
+        const seriesNode = option.series[i];
+        const name = option.legend.data[i];
+        seriesNode.name = name;
+        seriesNode.data = scatterData[name];
+    }
+}
+
+function convertScatter3DTo2D(arr3d) {
+    const { XData, seriesData } = arr3d;
+    const scatterData = {};
+    const legend = [];
+    const yData = new Set();
+    // 第一层遍历
+    for (let d = 0, depth = seriesData.length; d < depth; d++) {
+        const areaData = seriesData[d];
+        const areaName = areaData.name;
+        if(!scatterData[areaName]) scatterData[areaName] = [];
+        legend.push(areaData.name);
+        // 第二层遍历
+        const statusData = areaData.data;
+        for (let h = 0, height = statusData.length; h < height; h++) {
+            const issues = statusData[h];
+            const statusName = XData[h];
+            // 第三层遍历
+            for (let w = 0, width = issues.length; w < width; w++) {
+                const { name, value } = issues[w];
+                yData.add(name);
+                if(value) scatterData[areaName].push([statusName, name, Number(value)]);
+            }
+        }
     }
+    return {
+        scatterData,
+        legend,
+        yData
+    };
 }
 
 /**
@@ -89,7 +157,7 @@ export function pieRingAssetTotalAuto(option, data, total, count) {
  */
 export function pieRingProportionAuto(option, data, proportion) {
     if(data && data.length) {
-        proportion = Number(data[0].value) * 100;
+        proportion = Number(data[0].value);
     }
     if(!option.series[0].data[0].label.normal.formatter) option.series[0].data[0].label.normal.formatter = function(params){
         return params.value ? `{v|${params.value}}{unit|%}` : `{v|${params.value}}`;

package/core/src/common.js

@@ -40,6 +40,8 @@ var Common = /** @class */ (function () {
         this.mouseDown = null;
         this.renderTimer = 0;
         this.lastRender = 0;
+        this.pageResizeTim = null;
+        this.isResize = false;
         this.id = s8();
         this.store = useStore(this.id);
         if (typeof parent === 'string') {
@@ -248,6 +250,16 @@ var Common = /** @class */ (function () {
         }
         let data = JSON.parse(JSON.stringify(obj));
         Object.assign(this.store.data, data);
+        // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整
+        if(this.store.options.type !== 'topology' && this.store.options.type !== 'pageZoomOnly') {
+            const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
+            const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
+            this.store.data.pageZoom = zoom;
+            this.store.parentElem.style.transform = `scale(${1/zoom})`;
+            this.store.parentElem.style.transformOrigin = '0 0';
+            this.store.parentElem.parentElement.style.overflow = 'hidden';
+            Store.set('PAGE:zoom', zoom);
+        };
         this.store.data.pens = [];
         this.openCount = 0
         const type = this.store.options.type;

package/core/src/element/common.js

@@ -1,12 +1,14 @@
 import {Lock} from '../models';
+import {commonStore} from '../store';
 export function setStyleForElementIdDiv(node, elem, data) {
     if (!elem) return;
+    const store = commonStore[node.TID].data;
     elem.style.position = 'absolute';
     elem.style.outline = 'none';
     elem.style.left = node.rect.x + 'px';
     elem.style.top = node.rect.y + 'px';
-    elem.style.width = node.rect.width + 'px';
-    elem.style.height = node.rect.height + 'px';
+    elem.style.width = node.rect.width / store.pageZoom + 'px';
+    elem.style.height = node.rect.height / store.pageZoom + 'px';
     if (node.rotate || node.offsetRotate) {
         elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
     }

package/core/src/element/select.js

@@ -70,6 +70,7 @@ export function setSelectInteractiveState(selected, node) {
 }
 // 重置下拉状态
 export function resetSelectInteractiveState(node) {
+    if(!node || !node.TID) return;
     const currentStore = commonStore[node.TID];
     if(!Object.keys(currentStore.selectDataPool).length) return;
     for (let data of Object.values(currentStore.selectDataPool)) {

package/core/src/healps/changeData.js

@@ -110,7 +110,7 @@ export function setConfItemNode(pen, 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)) {
+            if (Array.isArray(realData) && pen.data.params && pen.data.params.displayMode !== 7) {
                 getEchartsRealData(pen, realData);
             } else {
                 commonStore[pen.TID].echartsRealDataPool[pen.id] = realData;

package/core/src/preview.js

@@ -1,3 +1,5 @@
+import {Store} from "le5le-store";
+
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -184,6 +186,27 @@ var Preview = (function (_super) {
                 _this.moveIn.hoverNode.text = '全屏';
                 _this.fitViewPreview(_this.isFullScreen);
                 _this.isFullScreen = false;
+            }else {
+                // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整，不执行render重绘。通常用于无任何操作事件的topology驾驶舱
+                if(_this.store.options.type === 'topology' || _this.store.options.type === 'pageZoomOnly') return;
+                const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
+                const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
+                _this.isResize = true;
+                clearTimeout(_this.pageResizeTim);
+                _this.pageResizeTim = setTimeout(() => {
+                    if(_this.isResize){
+                        const pageZoom = 1/zoom;
+                        _this.store.data.pageZoom = zoom;
+                        _this.store.parentElem.style.transform = `scale(${pageZoom})`;
+                        _this.store.parentElem.style.transformOrigin = '0 0';
+                        _this.store.parentElem.parentElement.style.overflow = 'hidden';
+                        _this.store.data.dataResize = 1;
+                        _this.isResize = false;
+                        Store.set('PAGE:zoom', zoom);
+                        _this.fitView();
+                        _this.render();
+                    }
+                }, 1000);
             }
         };
         return _this;
@@ -227,6 +250,8 @@ var Preview = (function (_super) {
         for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.scale(scale, center, w, h);
+            // 驾驶舱底部区域元件，用于控制底部区域Dom宽高等元素自由变换，后期会删除
+            if(item.tags && item.tags[0] && item.tags[0].includes('contromRoomBottom')) this.store.pens['contromRoomBottom'] = item;
         }
     };
     Preview.prototype.scaleTo = function (scale) {
@@ -245,6 +270,8 @@ var Preview = (function (_super) {
             width = this.store.options.width;
             height = this.store.options.height;
         }
+        width *= this.store.data.pageZoom;
+        height *= this.store.data.pageZoom;
         this.canvasResize({
             width: width,
             height: height,
@@ -261,7 +288,7 @@ var Preview = (function (_super) {
             rect.height = bkImageRect && bkImageRect.height ? bkImageRect.height : height;
         }
         // 6. 计算缩放比
-        var w = (width - padding[1] - padding[3]) / rect.width;
+        var w = (width - padding[1] - padding[3]) / rect.width ;
         var h = (height - padding[0] - padding[2]) / rect.height;
         var ratio = w;
         if (w > h) {

package/core/src/store/data.d.ts

@@ -11,6 +11,7 @@ export interface visualization2DData {
     fromArrowType: string;
     toArrowType: string;
     scale: number;
+    pageZoom: number,
     locked: Lock;
     bkImage: string;
     bkColor: string;
@@ -81,6 +82,7 @@ export const createStore = () => {
             fromArrowType: '',
             toArrowType: 'triangleSolid',
             scale: 1,
+            pageZoom: 1,
             locked: Lock.None,
             bkImageRect: null,
             mqttOptions: {
@@ -151,6 +153,7 @@ export const clearStore = (store: visualization2DStore, del: string) => {
         fromArrowType: '',
         toArrowType: 'triangleSolid',
         scale: 1,
+        pageZoom: 1,
         locked: Lock.None,
         bkImageRect: null,
         mqttOptions: {

package/core/src/store/data.js

@@ -27,6 +27,7 @@ export var createStore = function () {
             locked: Lock.None,
             dataResize: 1, // 数据是否加载，1是，0否
             bkImageRect: null,
+            pageZoom: 1,
             mqttOptions: {
                 clientId: s8()
             },
@@ -128,6 +129,7 @@ export var clearStore = function (store, del) {
         fromArrowType: '',
         toArrowType: 'triangleSolid',
         scale: 1,
+        pageZoom: 1,
         locked: Lock.None,
         dataResize: 1, // 数据是否加载，1是，0否
         bkImageRect: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "2.0.6",
+  "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'];