ThingsBoard 仪表改造-改变仪表布局网格大小

---

有群友觉得：仪表板的格子太大了，有没有办法改小点，这样排放部件更精确，现在部件拖放的时候，要么太大要么太小！

自带修改

点击右下角进入编辑模式

---

空白处右键 -> 设置

---

增大列数就缩小单元格

---

列数50 部件间边距3 就很小了

根仪表板网格改小后，再增加的内仪表板的网格并没有改小，仍然是默认大小。通过改代码把默认网格大小改小，以后所有画面都是小网格很方便
感谢ThingBoard中文社区：BigG，刀刀 网友反馈

---

修改代码

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
添加有//custom-- 注释的代码，注释掉下面代码中注释掉的代码

ngOnInit(): void {
  if (!this.dashboardTimewindow) {
    this.dashboardTimewindow = this.timeService.defaultTimewindow();
  }
  this.gridsterOpts = {
  // gridType: GridType.ScrollVertical,
  // margin: isDefined(this.margin) ? this.margin : 3,
  gridType: GridType.Fixed, //custom--
  fixedColWidth: 30, //custom--
  fixedRowHeight: 30, //custom--
  margin: 3, //custom--
  
	//=====这下面的不用管，没有改动
  displayGrid:DisplayGrid.Always,//一直显示网格，方便演示，实际去掉这项
  swap: false, //打开后组件可交换位置
  maxRows: 100,//网格最大行数
  minCols: this.columns ? this.columns : 24,
  maxCols: 3000,//网格最大列数
  //仪表最大格子数
  maxItemCols: 1000,
  maxItemRows: 1000,
  maxItemArea: 1000000,
  outerMargin: true,
  minItemCols: 1,//仪表最小格子数
  minItemRows: 1,
  defaultItemCols: 8,//默认仪表格子数
  defaultItemRows: 6,
  resizable: {enabled: this.isEdit},
  draggable: {enabled: this.isEdit},
    //改变x,y,col,row时候的回调
    itemChangeCallback: item => this.dashboardWidgets.sortWidgets(),
      itemInitCallback: (item, itemComponent) => {
        (itemComponent.item as DashboardWidget).gridsterItemComponent = itemComponent;
      }
};

添加有//custom-- 注释的行，注释掉下面代码中注释的代码（自己都读不通这句话）

private updateMobileOpts(parentHeight?: number) {
    this.isMobileSize = this.checkIsMobileSize();
    const autofillHeight = this.isAutofillHeight();
    if (autofillHeight) {
      // this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fit;
      this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fixed; //custom--
    } else {
      // this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.ScrollVertical;
      this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fixed; //custom--
    }
    const mobileBreakPoint = this.isMobileSize ? 20000 : 0;
    this.gridsterOpts.mobileBreakpoint = mobileBreakPoint;
    if(this.isMobileSize){ //custom-- 加上是否是手机尺寸的判断,避免PC受影响
      const rowSize = this.detectRowSize(this.isMobileSize, autofillHeight, parentHeight);
      if (this.gridsterOpts.fixedRowHeight !== rowSize) {
        this.gridsterOpts.fixedRowHeight = rowSize;
      }
    } //custom--
  }

添加有//custom-- 注释的行，注释掉下面代码中注释的代码（自己都读不通这句话）

private updateLayoutOpts() {
  this.gridsterOpts.minCols = this.columns ? this.columns : 24;
  this.gridsterOpts.margin = 3; //custom--
  // this.gridsterOpts.margin = isDefined(this.margin) ? this.margin : 10;
}

说明

thingboard的格子布局使用的是angular-gridster2
下面的官网可以很好地调试出你要的效果。
如果觉得还不符合胃口，调整margin fixedColWidth 和 fixedRowHeight
margin是网格中间的那个缝隙，根据fixedColWidth 和 fixedRowHeight 的大小，相应设置大小。
gridType: GridType.ScrollVertical 网格类型如果选垂直滚动，是没办法调整网格大小的。

---

如果对你有帮助，点个赞关注一下吧

---

angular-gridster2官网地址