@ebiz/designer-components 0.0.18

package/src/components/charts/components/SnowFlakeChart/defaultOption.js

@@ -0,0 +1,285 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { setStyle, getSingle } from './util';
+import defendXSS from '../../util/defendXSS';
+
+// 主从网关。
+const rootDefault = (data, nodeContainer, isRoot, option, scale) => {
+  const { theme, overAll } = option;
+  setStyle(nodeContainer, {
+    width: isRoot ? '150px' : '110px',
+    height: isRoot ? '150px' : '110px',
+  });
+  const { single, singleTextColor } = getSingle(data, isRoot ? 'root' : 'ap');
+  let mainColor = theme.indexOf('dark') !== -1 ? '#f5f5f5' : '#191919';
+  let subColor = theme.indexOf('dark') !== -1 ? '#bbbbbb' : '#999999';
+  nodeContainer.innerHTML = `
+  <div class='centerNode_defaultRender'>
+    <img 
+      class=${isRoot ? 'rootImg' : 'apImg'}  
+      src='./image/device/${defendXSS(data.deviceType)}.png' 
+      draggable=false>
+    </img>
+    <div 
+      class='deviceName ${isRoot ? 'rootName' : 'apName'}' 
+      style='color:${mainColor};' 
+      title=${defendXSS(data.deviceName)}>
+      ${defendXSS(data.deviceName)}
+    </div>
+    <div 
+      class='onlineDuration' 
+      style='color:${subColor};display:${data.onlineDuration ? 'block' : 'none'};' 
+      title=${defendXSS(data.onlineDuration)}>
+      ${defendXSS(data.onlineDuration)}
+    </div>
+    <div 
+      style='color:${defendXSS(singleTextColor)};display:${single ? 'block' : 'none'}' 
+      title=${defendXSS(single)}>
+      ${defendXSS(single)}
+    </div>
+    <div 
+      style='color:${subColor};display:${data.trafficStatistics ? 'block' : 'none'}' 
+      title=${defendXSS(data.trafficStatistics)}>
+      ${defendXSS(data.trafficStatistics)}
+    </div>
+    <div 
+      class='terminalNumTip'
+      style='color:${mainColor}'>
+      终端：${data.children?.filter(item => !item.isAP).length || 0}个
+    </div>
+  </div>`;
+
+  if (scale >= 0.5 && scale < 0.95) {
+    nodeContainer.innerHTML = `
+    <div class='centerNode_defaultRender'>
+      <div 
+        class='deviceName ${isRoot ? 'rootName' : 'apName'}' 
+        style='color:${mainColor};' 
+        title=${defendXSS(data.deviceName)}>
+        ${defendXSS(data.deviceName)}
+      </div>
+    </div>`;
+  }
+};
+
+const overAllTag = (data, tagContainer) => {
+  // tag节点
+  setStyle(tagContainer, {
+    width: 0,
+    height: 0,
+    border: 0
+  });
+  tagContainer.innerHTML = null;
+};
+
+// 正常态叶子节点样式
+const houseLeaf = (data, nodeContainer, isActive, theme, scale) => {
+  setStyle(nodeContainer, {
+    width: '100px',
+    height: '100px',
+    display: 'block'
+  });
+  let imageSrc = data.deviceType;
+  let imgBg = 'staSelected'; // 终端选中态的图片周边阴影
+  if (data.faultNumber) {
+    imageSrc += '_error';
+    imgBg += '_error';
+  }
+  if (isActive) {  // 点击态的图片
+    imageSrc = data.deviceType;
+  } else {
+    imgBg = 'unset';
+  }
+  const { single, singleTextColor } = getSingle(data, 'leaf');
+  let mainColor = theme.indexOf('dark') !== -1 ? '#ffffff' : '#191919';
+  let subColor = theme.indexOf('dark') !== -1 ? '#bbbbbb' : '#999999';
+  let leafBg = theme.indexOf('dark') !== -1 ? 'rgba(25,25,25,.6)' : 'rgba(25,25,25,.1)';
+  let HTMLstr = `
+  <div class='leafNode_defaultRender'>
+    <div class='imgBg' 
+      style='background:${imgBg !== 'unset' ? `url(./image/device/${defendXSS(imgBg)}.svg)` : imgBg};'>
+      <img 
+        src='./image/device/${defendXSS(imageSrc)}.svg' 
+        draggable=false>
+      </img>
+      <div class='deviceName' 
+        style='color:${mainColor};' 
+        title=${defendXSS(data.deviceName)}>
+        ${defendXSS(data.deviceName)}
+      </div>
+      <div 
+        style='color:${defendXSS(singleTextColor)};display:${single ? 'block' : 'none'}' 
+        title=${defendXSS(single)}>
+        ${defendXSS(single)}
+      </div>
+      <div 
+        style='color:${subColor};display:${data.trafficStatistics ? 'block' : 'none'}' 
+        title=${defendXSS(data.trafficStatistics)}>
+        ${defendXSS(data.trafficStatistics)}
+      </div>
+    </div>
+  </div>
+  <div class='leafNodeShadow'
+    style='background:${leafBg};display:${isActive ? 'none' : 'block'}'>
+  </div>`;
+  setTimeout(() => {
+    nodeContainer.innerHTML = HTMLstr;
+  }, 20);
+
+  if (scale >= 0.5 && scale <= 0.75) {
+    setStyle(nodeContainer, {
+      display: 'none'
+    });
+  }
+};
+
+const overAllLeaf = (data, nodeContainer, option) => {
+  setStyle(nodeContainer, { // 宽高用户可自定义配置。
+    width: '24px',
+    height: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
+  nodeContainer.innerHTML = null;
+};
+/**
+ * 全网
+ * @param {*} param0
+ * @param {*} data
+ * @param {*} option
+ */
+const handleOverall = ({ nodeContainer, tagContainer }, data, option) => {
+  if (data.isRoot || data.isAP || data.children && data.children.length) {
+    // 根节点(默认166*166)
+    if (data.isRoot || data.mac === option.data[0].mac) {
+      rootDefault(data, nodeContainer, true, option);
+    } else {
+      // 次级根节点(默认104*104)
+      rootDefault(data, nodeContainer, false, option);
+    }
+  } else {
+    // 叶子节点(默认38*38)
+    overAllLeaf(data, nodeContainer, option);
+  }
+  // tag节点
+  overAllTag(data, tagContainer);
+};
+
+const houseTag = (data, tagContainer, theme, scale) => {
+  const commonStyle = {
+    padding: '4px 12px',
+    background: theme.indexOf('dark') !== -1 ? '#191919' : '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '999px'
+  };
+  if (data.connectInterface?.indexOf('SSID') === -1 && data.connectInterface?.indexOf('wireless') === -1) {
+    setStyle(tagContainer, {
+      ...commonStyle,
+      border: '1px solid #777777',
+      display: data.connectInterface?.indexOf('PON') === -1 ? 'flex' : 'none',
+
+    });
+    tagContainer.innerHTML = `<div>${defendXSS(data.connectInterface.replace('Straight-', ''))}</div>`;
+  } else {
+    setStyle(tagContainer, {
+      ...commonStyle,
+      border: data.connectInterface?.indexOf('2.4G') !== -1 ? '1px solid #2070F3' : '1px solid #058358',
+      display: data.wifiChannel ? 'flex' : 'none',
+    });
+    setStyle(tagContainer, { // 当信道为三位数以下，固定宽度为40px
+      width: String(data.wifiChannel).length <= 2 ? '40px' : 'unset'
+    });
+    tagContainer.innerHTML = defendXSS(data.wifiChannel);
+  }
+  if (scale >= 0.5 && scale < 0.95) {
+    setStyle(tagContainer, {
+      display: 'none'
+    });
+  }
+};
+
+/**
+ * 家庭
+ * @param {*} param0
+ * @param {*} data
+ * @param {*} option
+ */
+const handleHouse = ({ nodeContainer, tagContainer }, data, option, scale) => {
+  if (data.isRoot || data.isAP || data.children && data.children.length) {
+    // 根节点(默认166*166)
+    if (data.isRoot || data.mac === option.data[0].mac) {
+      rootDefault(data, nodeContainer, true, option, scale);
+    } else {
+      // 次级根节点(默认166*166)
+      rootDefault(data, nodeContainer, false, option, scale);
+    }
+  } else {
+    // 叶子节点(默认104*104)
+    const classList = nodeContainer?.parentNode?.classList || [];
+    const isActive = [...classList].indexOf('nodeActive') !== -1;
+    houseLeaf(data, nodeContainer, isActive, option.theme, scale);
+  }
+  // tag节点
+  houseTag(data, tagContainer, option.theme, scale);
+};
+
+const defaultOption = {
+  isLink: false,// 主网关是否预留一个位置
+  distance: {
+    minDistance: 200, // 全网视口，主从网关的圆心的最小距离
+    minDistanceDrill: 400 // 下钻视口，主从网关的圆心的最小距离
+  },
+  ratio: {
+    // 全网视口，递归生成的节点必定在minRatio-maxRatio之间，如果终端设备数量超过了该网关能展示的最大数量，后续终端不会展示出来，出现...
+    minRatio: 0.5, // 全网视口 递归节点的最小尺寸占比
+    maxRatio: 0.75, // 全网视口 递归节点的最大尺寸占比
+    // 家庭视口，如果终端设备数量超过了该网关能展示的最大数量，则允许尺寸占比超出maxRatioDrill
+    minRatioDrill: 0.7, // 家庭视口 递归节点的最小尺寸占比
+    maxRatioDrill: 0.8 // 家庭视口 递归节点的最大尺寸占比
+  },
+  overAll: true, // 是否为全局视口（节点变小，隐藏tag、line)
+  scaleAdaptive: false, // 家庭视口下，drag的不同缩放值会产生不同的视图（且首次进入家庭视口，会开启自适应缩放功能）
+  // 默认渲染配置
+  render: ({ nodeContainer, tagContainer }, data, option, scale) => {
+    if (option.overAll) {
+      // 全网
+      handleOverall({ nodeContainer, tagContainer }, data, option);
+    } else {
+      // 家庭
+      handleHouse({ nodeContainer, tagContainer }, data, option, option.scaleAdaptive ? scale : null);
+    }
+  }
+};
+
+const defaultToolTip = (data, isLeaf) => {
+  let HTMLstr = `
+  <div class='sfcTipContainer'>
+    <div>${data.deviceName}</div>
+    <div class='rateInfo'>
+      <img src='./image/device/up.svg' />
+      ${data.upRate}
+    </div>
+    <div class='rateInfo'>
+      <img src='./image/device/down.svg' />
+      ${data.downRate}
+    </div>
+  </div>`;
+  if (!isLeaf) {
+    HTMLstr = '点击查看详细拓扑';
+  }
+  return HTMLstr;
+};
+
+export default defaultOption;
+export { defaultToolTip };

package/src/components/charts/components/SnowFlakeChart/index.js

@@ -0,0 +1,408 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { insertDom, onImageLoad, setDefault, arrFlat, isDataDisabled, compareRefresh, setAttribute, getDistance, pxToNumber, getStyle, setStyle, getAreaScope, getWaistLength } from './util.js';
+import BranchManager from './BranchManager.js';
+import BaseChart from '../BaseChart/index.js';
+import defaultOption from './defaultOption.js';
+import { tagPosition } from './CommonConstant.js';
+import image5R from './assets/image5R.svg';
+import image5L from './assets/image5L.svg';
+import image2R from './assets/image2R.svg';
+import image2L from './assets/image2L.svg';
+import imageUp from './assets/up.svg';
+import imageDown from './assets/down.svg';
+import wirelessR from './assets/wirelessR.svg';
+import wirelessL from './assets/wirelessL.svg';
+import { CHART_TYPE } from '../../util/constants.js';
+
+// 1、在全网进行缩放会影响家庭的canvas连线和定位 ok
+// 2、悬浮提示框的定位问题   ok
+// 3、branchManager代码整理
+// 下钻前得到缩放不回印象下钻后的，下钻后开启自适应。
+
+// 最顶层：用来管理所有branch和下转功能
+export default class SnowFlakeChart extends BaseChart {
+
+  static name = CHART_TYPE.SNOWFLAKE;
+
+  constructor() {
+    super();
+    this.dom;
+    this.drag;
+    this.option;
+    this.data;
+    this.branchs = []; // branch的集合
+    this.renderCallBack = null; // 图表渲染完毕的回调
+    this.firstRecordStatus = true; // 只需要在首次获取到0.5-0.75 缩放值的时候，记录下主从网关的距离、宽高等。 不需要每次都记录，会导致0.75-0.5过渡也记录，再切换到1的时候，视图异常。
+  }
+
+  init(dom) {
+    this.dom = dom;
+    this.dom.innerHTML = '';
+    this.container = insertDom(this.dom);
+  }
+
+  setSimpleOption(chartName, option, { drag }) {
+    setDefault(option, defaultOption);
+    this.data = option.data;
+    this.option = option;
+    this.drag = drag;
+    setAttribute(this.container, { class: `sfc-container ${option.overAll ? 'overAll' : ''}` });
+  }
+
+  setResize() {
+
+  }
+
+  // 首次render需要等所有内置的图片全部加载完毕
+  render(assets, callback) {
+    this.initImage(assets);
+    onImageLoad(this.imageList, () => {
+      this.renderBranch();
+      callback && callback();
+    });
+    // 监听drag：每次达到预设的缩放界限值时，触发视图更新
+    window.addEventListener('dragScaleChange', this.dragScaleChange.bind(this));
+  }
+
+  // 创建canvas用到图片的实例对象
+  initImage(assets = {}) {
+    this.imageList = {
+      'image5R': { src: assets.image5R || image5R },
+      'image5L': { src: assets.image5L || image5L },
+      'image2R': { src: assets.image2R || image2R },
+      'image2L': { src: assets.image2L || image2L },
+      'imageUp': { src: assets.imageUp || imageUp },
+      'imageDown': { src: assets.imageDown || imageDown },
+      'wirelessR': { src: assets.wirelessR || wirelessR },
+      'wirelessL': { src: assets.wirelessL || wirelessL }
+    };
+    for (let item in this.imageList) {
+      if (Object.hasOwnProperty.call(this.imageList, item)) {
+        const img = new Image();
+        img.src = this.imageList[item]['src'];
+        this.imageList[item]['image'] = img;
+      }
+    }
+  }
+
+  renderBranch() {
+    if (this.option.theme.indexOf('dark') === -1) {
+      this.container.classList.add('snowLight');
+    }
+    if (this.data && this.data.length > 0) {
+      this.data.forEach((dataItem) => {
+        this.branchs.push(new BranchManager(dataItem, this.container, this));
+      });
+      // 判断数据的disabled，给外层容器挂上类名,设置容器外环的样式
+      isDataDisabled(arrFlat(this.data), this.container, this.option);
+    }
+    if (!this.option.overAll) {
+      this.setPositionLeft();
+      this.setTransformOrigin();
+      this.setTagPosition();
+    }
+    // 首次进入家庭视口，开启自适应缩放功能后，寻找合适的drag缩放值
+    this.findFitScale();
+    setTimeout(() => {
+      this.renderCallBack && this.renderCallBack(this);
+    }, 0);
+  }
+
+  // 考虑多个多终端的容器，相邻不得重叠。需要调整其定位值
+  // 这样的方法有bug会导致两个很小的从网关之间插了个很大的从网关。从网关到主网关的连线会特别长
+  setPositionLeft() {
+    const centerDomArr = [...this.branchs[0].centerDomArr];
+    centerDomArr.splice(0, 1);
+    centerDomArr.forEach((item, index) => {
+      const { equalDeg, data: { level } } = item;
+      const itemBranch = item.container.parentNode.parentNode;
+      const itemBranchWidth = pxToNumber(getStyle(itemBranch, 'width'));
+      // newLeftVal和oldLeftVal得到的都是从主网关最右侧到从网关圆心的距离，定位直接从100%开始累计
+      let newLeftVal = (itemBranchWidth / 2 + 40) / Math.sin(equalDeg / 2 * Math.PI / 180)
+        - pxToNumber(getStyle(itemBranch.parentNode, 'width')) / 2; // 给相邻容器设置一个40的间隔
+      let oldLeftVal = pxToNumber(getStyle(itemBranch, 'left'))
+        - pxToNumber(getStyle(itemBranch.parentNode, 'width'));
+      if (newLeftVal > oldLeftVal) {
+        // 进入到这个判断内说明是个多终端的从网关，要计算最合适的newLeftVal
+        if (centerDomArr.length >= 3) { // 获取其相邻branch的尺寸
+          let sameLevelArr = centerDomArr.filter((node) => node.data.level === level);
+          let getIndex = sameLevelArr.findIndex(same => same.data.mac === item.data.mac);
+          const lastBranch = sameLevelArr[getIndex - 1 === -1 ? sameLevelArr.length - 1 : getIndex - 1].container.parentNode.parentNode;
+          const nextBranch = sameLevelArr[getIndex + 1 === sameLevelArr.length ? 0 : getIndex + 1].container.parentNode.parentNode;
+          const lastBranchWidth = pxToNumber(getStyle(lastBranch, 'width'));
+          const nextBranchWidth = pxToNumber(getStyle(nextBranch, 'width'));
+          if (itemBranchWidth > lastBranchWidth && itemBranchWidth > nextBranchWidth) { // 至少满足当前分支要大于兄弟分支的尺寸(有bug，待解决)
+            const minEqual = itemBranchWidth / (Math.max(lastBranchWidth, nextBranchWidth) + itemBranchWidth + 40) * equalDeg;
+            newLeftVal = (itemBranchWidth / 2 + 40) / Math.sin(minEqual * Math.PI / 180)
+              - pxToNumber(getStyle(itemBranch.parentNode, 'width')) / 2;
+          }
+        }
+        itemBranch.style.left = `calc(100% + ${newLeftVal}px)`;
+      }
+    });
+  }
+
+  // 给所有的外环容器设置旋转中心（因为要等全部的外环大小确定下来，才能统一计算）
+  setTransformOrigin() {
+    const centerDomArr = this.branchs[0].centerDomArr;
+    centerDomArr.forEach((item, index) => {
+      if (index === 0) return;
+      let branchContainer = item.container;
+      while (!branchContainer.classList.contains('sfc-branch')) {
+        branchContainer = branchContainer.parentNode;
+      }
+      const centerNode = branchContainer.querySelector('.sfc-node-center');
+      const parentCenterNode = branchContainer.parentNode.querySelector('.sfc-node-center');
+      const scale = getStyle(this.drag.dom, 'transform').replace('matrix(', '').split(',')[0];
+      const distance = getDistance(centerNode, parentCenterNode) / scale;// getBoundingClientRect获取的x,y要去掉scale的影响。未避免用户修改，不直接从drag拿
+      branchContainer.style.transformOrigin = `calc(50% - ${distance}px) center`;
+      // 更新主从网关间的canvas连线
+      const centerLine = this.branchs[0].centerLineArr.find(line => line.data.mac === branchContainer.getAttribute('data-mac'));
+      centerLine.distance = distance - pxToNumber(getStyle(branchContainer.parentNode, 'width')) / 2;
+      centerLine.destroyCanvas();
+      centerLine.createCanvas();
+      centerLine.draw();
+    });
+  }
+
+  setTagPosition() {
+    const centerTagArr = this.branchs[0].centerTagArr;
+    centerTagArr.forEach((tag) => {
+      tag.setAngle();
+    });
+  }
+
+  // 切换下钻状态（需要重刷dom结构）,下钻后可以设置居中的dom。默认中心dom(允许传入mac，自定义居中的dom)下钻后居中
+  switchView(drill = true, mac, callback) {
+    if (!drill) this.drag.reset();// 取消下钻，切换为全网，恢复drag初始值
+    this.branchs.forEach((item) => {
+      item.centerDomArr[0].drillDown(drill, true, false, mac);
+    });
+    callback && callback();
+  }
+
+  // 已经是下钻状态下且状态不变（不用重刷dom结构），设置切换居中点
+  switchCenterByDrill(mac) {
+    this.branchs.forEach((item) => {
+      // 先去遍历一遍中心dom，判断是否一致
+      item.centerDomArr.forEach((center) => {
+        if (center.data.mac === mac) {
+          this.drag.moveTargetToCenter(center.dom);
+        }
+      });
+      // 再去遍历一遍叶子dom，判断是否一致
+      item.leafsArr.forEach((leaf) => {
+        if (leaf.node.data.mac === mac) {
+          this.drag.moveTargetToCenter(leaf.node.dom);
+        }
+      });
+    });
+  }
+
+  // 图表渲染完毕的回调
+  onRenderReady(callback) {
+    this.renderCallBack = callback;
+  }
+
+  // 销毁图表
+  uninstall() {
+    this.dom.innerHTML = '';
+    window.removeEventListener('dragScaleChange', this.dragScaleChange.bind(this));
+  }
+
+  // 移除所有的节点高亮状态
+  removeNodeActive() {
+    this.branchs.forEach((item) => {
+      item.centerDomArr.forEach((center) => {
+        if (center.dom.classList.contains('nodeActive')) {
+          center.dom.classList.remove('nodeActive');
+        }
+      });
+      item.leafsArr.forEach((leaf) => {
+        if (leaf.node.dom.classList.contains('nodeActive')) {
+          leaf.node.dom.classList.remove('nodeActive');
+          // 叶子节点高亮前后内部的dom变更了，需要重新调用一下它的渲染内容方法
+          leaf.node.insertContent();
+        }
+      });
+    });
+  }
+
+  // 刷新line，不会重构dom
+  refreshLine(data) {
+    this.data = data;
+    compareRefresh(data, this.branchs, {
+      centerArr: 'centerLineArr',
+      target: 'line'
+    }, this);
+  }
+
+  // 刷新tag，不会重构dom
+  refreshTag(data) {
+    this.data = data;
+    compareRefresh(data, this.branchs, {
+      centerArr: 'centerTagArr',
+      target: 'tag'
+    }, this);
+  }
+
+  // 刷新node，不会重构dom
+  refreshNode(data, callback) {
+    this.data = data;
+    compareRefresh(data, this.branchs, {
+      centerArr: 'centerDomArr',
+      target: 'node'
+    }, this);
+    callback && callback();
+  }
+
+  // 刷新option,会重构dom
+  refresh(option, callback) {
+    this.branchs = [];
+    this.container.innerHTML = null;
+    this.firstRecordStatus = true;
+    this.setSimpleOption(null, option, { drag: this.drag });
+    this.renderBranch();
+    callback && callback();
+  }
+
+  // 刷新data，会重构dom
+  refreshData(data, callback) {
+    this.option.data = data;
+    this.refresh(this.option, callback);
+  }
+
+  findFitScale(callback) {
+    if (!this.option.scaleAdaptive || this.option.overAll) return;
+    let dragScale = this.drag.scale;
+    let branchArr = Array.from(this.dom.querySelectorAll('.sfc-branch'));
+    let leafArr = Array.from(this.dom.querySelectorAll('.sfc-branch .sfc-node-item'));
+    let centerNodeArr = Array.from(this.dom.querySelectorAll('.sfc-branch .sfc-node-center'));
+    let { width: snowWidth, height: snowHeight } = getAreaScope(leafArr.length ? leafArr : branchArr);
+    const viewContainer = this.drag.container;
+    const { width: viewWidth, height: viewHeight, x, y } = viewContainer.getBoundingClientRect();
+    let fitScale;
+    // 判定scale=0.75时，能否显示全雪花图
+    if (viewWidth >= (snowWidth * 0.75 / dragScale) && viewHeight >= (snowHeight * 0.75 / dragScale)) {
+      // 0.75以上展示的下，不改变主从网关的距离,只需调整到合适的scale值
+      fitScale = Math.min(viewWidth / (snowWidth / dragScale), viewHeight / (snowHeight / dragScale));
+      fitScale = Math.min(this.drag.scaleLimit.max, Math.floor(fitScale * 10) / 10);
+      fitScale = Math.max(0.75, Math.floor(fitScale * 10) / 10);
+    } else {
+      // 0.75以上展示不下，需要拉近主从网关的距离,同时需调整到合适的scale值
+      this.lowScaleView();
+      let { width: snowWidth, height: snowHeight } = getAreaScope(centerNodeArr);
+      fitScale = Math.min(viewWidth / (snowWidth / dragScale), viewHeight / (snowHeight / dragScale));
+      fitScale = Math.min(0.75, Math.floor(fitScale * 10) / 10);
+      fitScale = Math.max(this.drag.scaleLimit.min, Math.floor(fitScale * 10) / 10);
+    }
+    this.drag.scale = fitScale;
+    this.drag.scaleDom(x + viewWidth / 2, y + viewHeight / 2, fitScale - dragScale, false);
+    const dragCurrentVal = this.drag.container.querySelector('.drag-currentVal');
+    dragCurrentVal.innerHTML = (fitScale * 100).toFixed(0) + '%';
+
+    this.refreshNode(this.data);
+    this.refreshLine(this.data);
+    this.refreshTag(this.data);
+
+    callback && callback();
+  }
+
+  dragScaleChange(e) {
+    if (this.option.overAll || !this.option.scaleAdaptive) return;
+    const scale = e.detail.scaleVal;
+
+    // 0.75以下隐藏主从网关的外环边框，拉近主从网关的间距
+    if (scale >= 0.5 && scale <= 0.75) {
+      this.lowScaleView();
+      // 如果叶子节点居中的，但是缩小了，叶子节点都隐藏了，为了视觉效果，将整个图表居中
+      setTimeout(() => { this.drag.moveTargetToCenter(this.container); }, this.drag.throldHold);
+    } else {
+      this.highScaleView();
+    }
+
+    this.refreshNode(this.data);
+    this.refreshLine(this.data);
+    this.refreshTag(this.data);
+  };
+
+  // 0.5-0.75倍的显示
+  lowScaleView() {
+    // 拉近主从网关的间距
+    const branchArr = Array.from(this.dom.querySelectorAll('.sfc-branch'));
+    if (this.firstRecordStatus) {
+      setAttribute(branchArr[0], {
+        'data-width': branchArr[0].style.width,
+        'data-height': branchArr[0].style.height
+      });
+    }
+    branchArr[0].style.width = '150px';
+    branchArr[0].style.height = '150px';
+    branchArr.shift();
+    branchArr.forEach((branch, index) => {
+      let equalDeg = this.branchs[0].centerDomArr[index + 1].equalDeg;
+      let centerDomWidth = pxToNumber(getStyle(branch.querySelector('.sfc-node-center'), 'width'));
+      let distance = Math.max(getWaistLength(equalDeg, centerDomWidth + 20), this.option.distance.minDistanceDrill); // 避免ap重叠，需要动态计算distance
+      const parentBranchWidth = pxToNumber(getStyle(branch.parentNode, 'width'));
+      const centerLine = this.branchs[0].centerLineArr.find(item => item.data.mac === branch.getAttribute('data-mac'));
+      if (this.firstRecordStatus) {
+        setAttribute(branch, { // 需要将scle为1的left和transformOrigin记录下来；也需要将其width和height切换掉。不然中心节点无法点击，会被容器盖住
+          'data-left': branch.style.left,
+          'data-transformOrigin': branch.style.transformOrigin,
+          'data-distance': centerLine.distance,
+          'data-width': branch.style.width,
+          'data-height': branch.style.height
+        });
+      }
+      branch.style.transformOrigin = `calc(50% - ${distance}px) center`;
+      branch.style.left = `calc(100% + ${distance}px - ${parentBranchWidth / 2}px)`;
+      branch.style.width = '150px';
+      branch.style.height = '150px';
+      // 更新主从网关间的canvas连线     
+      centerLine.distance = distance - parentBranchWidth / 2;
+      centerLine.destroyCanvas();
+      centerLine.createCanvas();
+      centerLine.draw();
+    });
+    const coreContainerArr = this.dom.querySelectorAll('.sfc-core');
+    coreContainerArr.forEach(item => {
+      setStyle(item, { backgroundSize: 0 });
+    });
+    this.firstRecordStatus = false;
+  }
+
+  // 0.75-1.5倍的显示
+  highScaleView() {
+    if (this.firstRecordStatus) this.lowScaleView(); // 如果设备比较少，初始化scale的时候，没走lowScaleView。那么首次放大时需要这边手动调一次，拿到自定义数据
+    const branchArr = Array.from(this.dom.querySelectorAll('.sfc-branch'));
+    branchArr[0].style.width = branchArr[0].getAttribute('data-width');
+    branchArr[0].style.height = branchArr[0].getAttribute('data-height');
+    branchArr.shift();
+    branchArr.forEach(item => {
+      item.style.left = item.getAttribute('data-left');
+      item.style.transformOrigin = item.getAttribute('data-transformOrigin');
+      item.style.width = item.getAttribute('data-width');
+      item.style.height = item.getAttribute('data-height');
+      // 更新主从网关间的canvas连线
+      const centerLine = this.branchs[0].centerLineArr.find(line => line.data.mac === item.getAttribute('data-mac'));
+      centerLine.distance = item.getAttribute('data-distance');
+      centerLine.destroyCanvas();
+      centerLine.createCanvas();
+      centerLine.draw();
+    });
+    const coreContainerArr = this.dom.querySelectorAll('.sfc-core');
+    coreContainerArr.forEach(item => {
+      setStyle(item, { backgroundSize: '100% 100%' });
+    });
+  }
+}