[webapp]小端页面自适应优化

2022-01-30 10:16:23 +08:00
parent 5219474653
commit 4b57dcc970
8 changed files with 200 additions and 163 deletions
--- a/web-app/src/app/layout/basic/basic.component.ts
+++ b/web-app/src/app/layout/basic/basic.component.ts
@@ -12,6 +12,11 @@ import { environment } from '@env/environment';
          <i nz-icon nzType="github"></i>
        </a>
      </layout-default-header-item>
+      <layout-default-header-item direction="left">
+        <a layout-default-header-item-trigger href="//gitee.com/usthe" target="_blank">
+          <i nz-icon nzIconfont="icon-gitee"></i>
+        </a>
+      </layout-default-header-item>
      <layout-default-header-item direction="left" hidden="mobile">
        <a layout-default-header-item-trigger routerLink="/passport/lock">
          <i nz-icon nzType="lock"></i>
@@ -25,7 +30,7 @@ import { environment } from '@env/environment';
      <layout-default-header-item direction="middle">
        <header-search class="alain-default__search" [toggleChange]="searchToggleStatus"></header-search>
      </layout-default-header-item>
-      <layout-default-header-item direction="right">
+      <layout-default-header-item direction="right" hidden="mobile">
        <header-notify></header-notify>
      </layout-default-header-item>
      <layout-default-header-item direction="right" hidden="mobile">
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.html
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
@@ -79,20 +79,20 @@
 >
  <thead>
    <tr>
-      <th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-      <th nzAlign="center">告警指标</th>
+      <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
+      <th nzAlign="center" nzLeft>告警指标</th>
      <th nzAlign="center">所属监控</th>
      <th nzAlign="center">级别</th>
      <th nzAlign="center">告警内容</th>
      <th nzAlign="center">状态</th>
      <th nzAlign="center">告警时间</th>
-      <th nzAlign="center" nzRight>操作</th>
+      <th nzAlign="center">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data" [ngStyle]="{ 'background-color': data.status === 0 ? '#E1E7A89B' : 'inherit' }">
      <td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
-      <td nzAlign="center">{{ data.target }}</td>
+      <td nzAlign="center" nzLeft>{{ data.target }}</td>
      <td nzAlign="center">
        <a [routerLink]="['/monitors/' + data.monitorId]">
          <span>{{ data.monitorName }}</span>
@@ -117,7 +117,7 @@
        {{ data.status === 0 ? '未处理' : '已处理' }}
      </td>
      <td nzAlign="center">{{ data.gmtCreate }}</td>
-      <td nzAlign="center" nzRight>
+      <td nzAlign="center">
        <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </button>
--- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
+++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
@@ -27,15 +27,15 @@
      [nzData]="receivers"
      nzFrontPagination="false"
      [nzLoading]="receiverTableLoading"
-      [nzScroll]="{ x: '1150px', y: '1240px' }"
+      [nzScroll]="{ x: '100%', y: '100%' }"
    >
      <thead>
        <tr>
-          <th nzAlign="center">接收人</th>
-          <th nzAlign="center">通知方式</th>
-          <th nzAlign="center">配置</th>
-          <th nzAlign="center">最新修改时间</th>
-          <th nzAlign="center" nzRight>操作</th>
+          <th nzAlign="center" nzWidth="10%">接收人</th>
+          <th nzAlign="center" nzWidth="20%">通知方式</th>
+          <th nzAlign="center" nzWidth="20%">配置</th>
+          <th nzAlign="center" nzWidth="20%">最新修改时间</th>
+          <th nzAlign="center" nzWidth="30%">操作</th>
        </tr>
      </thead>
      <tbody>
@@ -68,7 +68,7 @@
            <span *ngIf="data.type == 3">{{ data.wechatId }}</span>
          </td>
          <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
-          <td nzAlign="center" nzRight>
+          <td nzAlign="center">
            <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人">
              <i nz-icon nzType="edit" nzTheme="outline"></i>
            </button>
@@ -93,16 +93,16 @@
      [nzData]="rules"
      nzFrontPagination="false"
      [nzLoading]="ruleTableLoading"
-      [nzScroll]="{ x: '1150px', y: '1240px' }"
+      [nzScroll]="{ x: '100%', y: '100%' }"
    >
      <thead>
        <tr>
-          <th nzAlign="center">策略名称</th>
-          <th nzAlign="center">接收人</th>
-          <th nzAlign="center">转发所有</th>
-          <th nzAlign="center">是否启用</th>
-          <th nzAlign="center">最新修改时间</th>
-          <th nzAlign="center" nzRight>操作</th>
+          <th nzAlign="center" nzWidth="15%">策略名称</th>
+          <th nzAlign="center" nzWidth="12%">接收人</th>
+          <th nzAlign="center" nzWidth="12%">转发所有</th>
+          <th nzAlign="center" nzWidth="15%">是否启用</th>
+          <th nzAlign="center" nzWidth="15%">最新修改时间</th>
+          <th nzAlign="center" nzWidth="25%">操作</th>
        </tr>
      </thead>
      <tbody>
@@ -130,7 +130,7 @@
            </nz-tag>
          </td>
          <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
-          <td nzAlign="center" nzRight>
+          <td nzAlign="center">
            <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
              <i nz-icon nzType="edit" nzTheme="outline"></i>
            </button>
@@ -155,17 +155,17 @@
  [nzOkLoading]="isManageReceiverModalOkLoading"
 >
  <div *nzModalContent class="-inner-content">
-    <form nz-form>
+    <form nz-form #receiverForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">接收人名称</nz-form-label>
-        <nz-form-control [nzSpan]="8">
-          <input [(ngModel)]="receiver.name" nz-input name="name" type="text" id="name" />
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
+          <input [(ngModel)]="receiver.name" nz-input required name="name" type="text" id="name" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor="type">通知方式 </nz-form-label>
-        <nz-form-control nzSpan="8">
-          <nz-select [(ngModel)]="receiver.type" nzAllowClear nzPlaceHolder="Choose" name="type" id="type">
+        <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+          <nz-select [(ngModel)]="receiver.type" nzPlaceHolder="Choose" required name="type" id="type">
            <nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option>
            <nz-option [nzValue]="1" nzLabel="邮箱"></nz-option>
            <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
@@ -175,26 +175,34 @@
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 0">
        <nz-form-label [nzSpan]="7" nzFor="phone" [nzRequired]="receiver.type === 0">手机号</nz-form-label>
-        <nz-form-control [nzSpan]="8">
-          <input [(ngModel)]="receiver.phone" nz-input name="phone" type="tel" id="phone" />
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.phone.invalid' | i18n">
+          <input
+            [(ngModel)]="receiver.phone"
+            nz-input
+            [required]="receiver.type === 0"
+            pattern="/^1\d{10}$/"
+            name="phone"
+            type="tel"
+            id="phone"
+          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 1">
        <nz-form-label [nzSpan]="7" nzFor="email" [nzRequired]="receiver.type === 1">邮箱</nz-form-label>
-        <nz-form-control [nzSpan]="8">
-          <input [(ngModel)]="receiver.email" nz-input name="email" type="email" id="email" />
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.email.invalid' | i18n">
+          <input [(ngModel)]="receiver.email" nz-input [required]="receiver.type === 1" email name="email" type="email" id="email" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 2">
        <nz-form-label [nzSpan]="7" nzFor="hookUrl" [nzRequired]="receiver.type === 2">URL地址</nz-form-label>
-        <nz-form-control [nzSpan]="8">
-          <input [(ngModel)]="receiver.hookUrl" nz-input name="hookUrl" type="url" id="hookUrl" />
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
+          <input [(ngModel)]="receiver.hookUrl" nz-input [required]="receiver.type === 2" name="hookUrl" type="url" id="hookUrl" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 3">
        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label>
-        <nz-form-control [nzSpan]="8">
-          <input [(ngModel)]="receiver.wechatId" nz-input name="wechatId" type="text" id="wechatId" />
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
+          <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 3" name="wechatId" type="text" id="wechatId" />
        </nz-form-control>
      </nz-form-item>
    </form>
@@ -212,11 +220,11 @@
  [nzOkLoading]="isManageRuleModalOkLoading"
 >
  <div *nzModalContent class="-inner-content">
-    <form nz-form>
+    <form nz-form #ruleForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">策略名称</nz-form-label>
-        <nz-form-control [nzSpan]="8">
-          <input [(ngModel)]="rule.name" nz-input name="rule_name" type="text" id="rule_name" />
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
+          <input [(ngModel)]="rule.name" nz-input required name="rule_name" type="text" id="rule_name" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
@@ -227,7 +235,7 @@
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor="receiver">接收人</nz-form-label>
-        <nz-form-control nzSpan="8">
+        <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-select
            [(ngModel)]="rule.receiverId"
            (nzOpenChange)="loadReceiversOption()"
@@ -235,6 +243,7 @@
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="Select a person"
+            required
            name="receiver"
            id="receiver"
          >
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -42,25 +42,25 @@
  [nzPageSizeOptions]="[8, 15, 25]"
  (nzQueryParams)="onTablePageChange($event)"
  nzShowPagination="true"
-  [nzScroll]="{ x: '1150px', y: '1240px' }"
+  [nzScroll]="{ x: '1240px', y: '1240px' }"
 >
  <thead>
    <tr>
-      <th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-      <th nzAlign="center">指标对象</th>
+      <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
+      <th nzAlign="center" nzLeft>指标对象</th>
      <th nzAlign="center">阈值触发表达式</th>
      <th nzAlign="center">告警级别</th>
      <th nzAlign="center">触发次数</th>
      <th nzAlign="center">通知模版</th>
      <th nzAlign="center">全局默认</th>
      <th nzAlign="center">最新修改时间</th>
-      <th nzAlign="center" nzRight>操作</th>
+      <th nzAlign="center">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedDefineIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
-      <td nzAlign="center">
+      <td nzAlign="center" nzLeft>
        <span>{{ data.app + '.' + data.metric + '.' + data.field }}</span>
      </td>
      <td nzAlign="center">
@@ -91,7 +91,7 @@
        </nz-tag>
      </td>
      <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
-      <td nzAlign="center" nzRight>
+      <td nzAlign="center">
        <button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控">
          <i nz-icon nzType="link" nzTheme="outline"></i>
        </button>
@@ -119,11 +119,11 @@
  [nzOkLoading]="isManageModalOkLoading"
 >
  <div *nzModalContent class="-inner-content">
-    <form nz-form>
+    <form nz-form #defineForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">指标对象</nz-form-label>
-        <nz-form-control [nzSpan]="8">
-          <nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues"> </nz-cascader>
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
+          <nz-cascader required name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues"></nz-cascader>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
@@ -154,10 +154,11 @@
        >
          阈值触发表达式
        </nz-form-label>
-        <nz-form-control [nzSpan]="8">
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              [(ngModel)]="define.expr"
+              required
              rows="3"
              nz-input
              name="expr"
@@ -177,8 +178,8 @@
        >
          告警级别
        </nz-form-label>
-        <nz-form-control nzSpan="8">
-          <nz-select [(ngModel)]="define.priority" nzAllowClear nzPlaceHolder="Choose" name="priority" id="priority">
+        <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+          <nz-select [(ngModel)]="define.priority" nzPlaceHolder="Choose" name="priority" id="priority">
            <nz-option [nzValue]="0" nzLabel="紧急告警"></nz-option>
            <nz-option [nzValue]="1" nzLabel="严重告警"></nz-option>
            <nz-option [nzValue]="2" nzLabel="警告告警"></nz-option>
@@ -189,8 +190,8 @@
        <nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" nzTooltipTitle="设置触发阈值多少次之后才会发送告警">
          触发次数
        </nz-form-label>
-        <nz-form-control nzSpan="8">
-          <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1" name="duration" id="duration">
+        <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+          <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1" required name="duration" id="duration">
          </nz-input-number>
        </nz-form-control>
      </nz-form-item>
@@ -200,19 +201,19 @@
            <nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的通知模版环境变量">
              <nz-list nzSize="small" nzSplit="false">
                <nz-list-item *ngIf="cascadeValues.length == 3">
-                  <code>&#36;&#40;metric&#41; : 选中的指标对象名称</code>
+                  <code>&#36;&#123;metric&#125; : 选中的指标对象名称</code>
                </nz-list-item>
                <nz-list-item *ngIf="cascadeValues.length == 3">
-                  <code>&#36;&#40;{{ cascadeValues[2] }}&#41; : 选中的指标对象值</code>
+                  <code>&#36;{{ '{' + cascadeValues[2] + '}' }} : 选中的指标对象值</code>
                </nz-list-item>
                <nz-list-item>
-                  <code>&#36;&#40;instance&#41; : 所在行实例值</code>
+                  <code>&#36;&#123;instance&#125; : 所在行实例值</code>
                </nz-list-item>
                <nz-list-item>
-                  <code>&#36;&#40;app&#41; : 所属监控类型名称</code>
+                  <code>&#36;&#123;app&#125; : 所属监控类型名称</code>
                </nz-list-item>
                <nz-list-item>
-                  <code>&#36;&#40;metrics&#41; : 所属监控指标组名称</code>
+                  <code>&#36;&#123;metrics&#125; : 所属监控指标组名称</code>
                </nz-list-item>
              </nz-list>
            </nz-collapse-panel>
@@ -223,12 +224,13 @@
        <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" nzTooltipTitle="告警触发后发送的通知信息模版,模版环境变量见上方">
          通知模版
        </nz-form-label>
-        <nz-form-control [nzSpan]="8">
+        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-textarea-count [nzMaxCharacterCount]="200">
            <textarea
              [(ngModel)]="define.template"
              rows="3"
              nz-input
+              required
              name="template"
              id="template"
              placeholder="请输入告警的通知模版.&#10;示例: ${app}.${metrics}.${metric}'s value is too high"
@@ -238,9 +240,7 @@
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
-        <nz-form-label nzSpan="7" nzRequired="true" nzFor="preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控">
-          全局默认
-        </nz-form-label>
+        <nz-form-label nzSpan="7" nzFor="preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控"> 全局默认 </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
        </nz-form-control>
@@ -248,7 +248,7 @@
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" nzTooltipTitle="此告警阈值配置开启生效或关闭"> 启用告警 </nz-form-label>
        <nz-form-control nzSpan="8">
-          <nz-switch [(ngModel)]="define.enable" name="enable" id="enable"></nz-switch>
+          <nz-switch [(ngModel)]="define.enable" [ngModelOptions]="{ standalone: true }" name="enable" id="enable"></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </form>
--- a/web-app/src/app/routes/dashboard/dashboard.component.html
+++ b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -1,13 +1,10 @@
-<br />
-<div nz-row [nzGutter]="24" style="margin-top: 10px">
-  <div nz-col nzXs="18" nzSm="18" nzMd="18" nzLg="18" nzOffset="1">
-    <div
-      echarts
-      [options]="appsCountEChartOption"
-      theme="default"
-      [autoResize]="true"
-      [loading]="appsCountLoading"
-      (chartClick)="onChartClick($event)"
-    ></div>
-  </div>
-</div>
+<div
+  echarts
+  [options]="appsCountEChartOption"
+  theme="default"
+  [autoResize]="true"
+  [loading]="appsCountLoading"
+  (chartClick)="onChartClick($event)"
+  (chartInit)="onChartInit($event)"
+  style="width: 100%; height: 400px; margin-top: 5%"
+></div>
--- a/web-app/src/app/routes/dashboard/dashboard.component.ts
+++ b/web-app/src/app/routes/dashboard/dashboard.component.ts
@@ -4,6 +4,7 @@ import { I18NService } from '@core';
 import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { EChartsOption } from 'echarts';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import { fromEvent } from 'rxjs';

 import { MonitorService } from '../../service/monitor.service';

@@ -26,24 +27,112 @@ export class DashboardComponent implements OnInit, OnDestroy {
  appsCountLoading: boolean = true;
  appsCountTableData: any[] = [];
  appsCountEChartOption!: EChartsOption;
+  appsCountTheme!: EChartsOption;
+  echartsInstance!: any;
+  pageResize$!: any;

  ngOnInit(): void {
    this.appsCountLoading = true;
+    this.appsCountTheme = {
+      title: {
+        text: '监控总览',
+        subtext: '监控类型纳管数量分布',
+        left: 'center'
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)'
+      },
+      legend: {
+        show: false,
+        itemWidth: 80,
+        itemHeight: 20,
+        right: 0,
+        orient: 'vertical'
+      },
+      calculable: true,
+      series: [
+        {
+          name: '总量',
+          type: 'pie',
+          selectedMode: 'single',
+          color: '#722ED1',
+          radius: [0, '30%'],
+          label: {
+            position: 'center',
+            fontSize: 15,
+            color: '#ffffff',
+            fontStyle: 'oblique',
+            formatter: '{a}:{c}'
+          },
+          labelLine: {
+            show: false
+          },
+          data: [{ value: 0, name: '监控总量' }]
+        },
+        {
+          name: '纳管数量分布',
+          type: 'pie',
+          radius: ['45%', '65%'],
+          labelLine: {
+            length: 30
+          },
+          label: {
+            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+            backgroundColor: '#F6F8FC',
+            borderColor: '#8C8D8E',
+            borderWidth: 1,
+            borderRadius: 4,
+            rich: {
+              a: {
+                color: '#6E7079',
+                lineHeight: 22,
+                align: 'center'
+              },
+              hr: {
+                borderColor: '#8C8D8E',
+                width: '100%',
+                borderWidth: 1,
+                height: 0
+              },
+              b: {
+                color: '#4C5058',
+                fontSize: 14,
+                fontWeight: 'bold',
+                lineHeight: 33
+              },
+              per: {
+                color: '#fff',
+                backgroundColor: '#4C5058',
+                padding: [3, 4],
+                borderRadius: 4
+              }
+            }
+          }
+        }
+      ]
+    };
    this.refresh();
    this.appsCountLoading = false;
    // https://stackoverflow.com/questions/43908009/why-is-setinterval-in-an-angular-service-only-firing-one-time
    this.interval$ = setInterval(this.refresh.bind(this), 30000);
+    this.pageResize$ = fromEvent(window, 'resize').subscribe(event => {
+      this.resizeChart();
+    });
  }

  ngOnDestroy(): void {
    clearInterval(this.interval$);
+    if (this.pageResize$) {
+      this.pageResize$.unsubscribe();
+    }
  }

  refresh(): void {
    let dashboard$ = this.monitorSvc.getAppsMonitorSummary().subscribe(
      message => {
        dashboard$.unsubscribe();
-        if (message.code === 0) {
+        if (message.code === 0 && message.data.apps != undefined) {
          // {app:'linux',size: 12}
          let apps: any[] = message.data.apps;
          this.appsCountTableData = [];
@@ -57,88 +146,16 @@ export class DashboardComponent implements OnInit, OnDestroy {
              name: appName,
              value: app.size
            });
-            total = total + app.size ? app.size : 0;
+            total = total + (app.size ? app.size : 0);
          });
-
-          this.appsCountEChartOption = {
-            title: {
-              text: '监控总览',
-              subtext: '监控类型纳管数量分布',
-              left: 'center'
-            },
-            tooltip: {
-              trigger: 'item',
-              formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)'
-            },
-            legend: {
-              itemWidth: 80,
-              itemHeight: 20,
-              right: 0,
-              orient: 'vertical'
-            },
-            calculable: true,
-            series: [
-              {
-                name: '总量',
-                type: 'pie',
-                selectedMode: 'single',
-                color: '#722ED1',
-                radius: [0, '30%'],
-                label: {
-                  position: 'center',
-                  fontSize: 15,
-                  color: '#ffffff',
-                  fontStyle: 'oblique',
-                  formatter: '{a}:{c}'
-                },
-                labelLine: {
-                  show: false
-                },
-                data: [{ value: total, name: '监控总量' }]
-              },
-              {
-                name: '纳管数量分布',
-                type: 'pie',
-                radius: ['45%', '65%'],
-                labelLine: {
-                  length: 30
-                },
-                label: {
-                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
-                  backgroundColor: '#F6F8FC',
-                  borderColor: '#8C8D8E',
-                  borderWidth: 1,
-                  borderRadius: 4,
-                  rich: {
-                    a: {
-                      color: '#6E7079',
-                      lineHeight: 22,
-                      align: 'center'
-                    },
-                    hr: {
-                      borderColor: '#8C8D8E',
-                      width: '100%',
-                      borderWidth: 1,
-                      height: 0
-                    },
-                    b: {
-                      color: '#4C5058',
-                      fontSize: 14,
-                      fontWeight: 'bold',
-                      lineHeight: 33
-                    },
-                    per: {
-                      color: '#fff',
-                      backgroundColor: '#4C5058',
-                      padding: [3, 4],
-                      borderRadius: 4
-                    }
-                  }
-                },
-                data: this.appsCountTableData
-              }
-            ]
-          };
+          // @ts-ignore
+          this.appsCountTheme.series[0].data = [{ value: total, name: '监控总量' }];
+          // @ts-ignore
+          this.appsCountTheme.series[1].data = this.appsCountTableData;
+          this.appsCountEChartOption = this.appsCountTheme;
+          this.cdr.detectChanges();
+        } else {
+          this.appsCountEChartOption = this.appsCountTheme;
          this.cdr.detectChanges();
        }
      },
@@ -157,4 +174,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
      }
    }
  }
+
+  onChartInit(ec: any) {
+    this.echartsInstance = ec;
+  }
+  resizeChart() {
+    if (this.echartsInstance) {
+      this.echartsInstance.resize();
+    }
+  }
 }
--- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
+++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
@@ -55,19 +55,19 @@
 >
  <thead>
    <tr>
-      <th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-      <th nzAlign="center">监控名称</th>
+      <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
+      <th nzAlign="center" nzLeft>监控名称</th>
      <th nzAlign="center">监控状态</th>
      <th nzAlign="center">监控Host</th>
      <th nzAlign="center">监控类型</th>
      <th nzAlign="center">最新修改时间</th>
-      <th nzAlign="center" nzRight>操作</th>
+      <th nzAlign="center">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
-      <td nzAlign="center">
+      <td nzAlign="center" nzLeft>
        <a [routerLink]="['/monitors/' + data.id]">
          <span>{{ data.name }}</span>
        </a>
@@ -102,7 +102,7 @@
        </nz-tag>
      </td>
      <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
-      <td nzAlign="center" nzRight>
+      <td nzAlign="center">
        <button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控">
          <i nz-icon nzType="edit" nzTheme="outline"></i>
        </button>
--- a/web-app/src/environments/environment.ts
+++ b/web-app/src/environments/environment.ts
@@ -11,7 +11,7 @@ export const environment = {
  production: false,
  useHash: false,
  api: {
-    baseUrl: 'http://localhost:8080/',
+    baseUrl: 'http://localhost:1157/',
    refreshTokenEnabled: true
  },
  modules: [DelonMockModule.forRoot({ data: MOCK_DATA })]