perf: 补上loading、统一table的滚动条尺寸

nezha-fronted/src/assets/css/main.css

@@ -2,3 +2,18 @@
   font-family: 'NotoSans';   /*字体名称*/
   src: url('font/NotoSansSC-6.ttf');
 }
+.el-loading-spinner .circular{
+  width: 42px;
+  height: 42px;
+  animation: loading-rotate 2s linear infinite;
+  display: none;
+}
+.el-loading-mask .el-loading-spinner{
+  background: url(../img/loading.gif) no-repeat;
+  background-size: 48px 48px;
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50%;
+  left: 48.5%;
+}

nezha-fronted/src/assets/stylus/main.scss

@@ -1777,3 +1777,4 @@ li{
 .transparent-pop{ //防止popover的提示框挡住页面元素无法操作
   pointer-events: none;
 }
+

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -1197,8 +1197,8 @@
         this.dropdownMenuShow=false;
         this.clearChart();
         this.$refs['localLoading'+this.chartIndex].startLoading();
-        this.firstShow = false;
+        /*this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
+        this.$emit('on-refresh-data', this.data.id);*/
       },
       initDialog(){
         //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -28,7 +28,6 @@
     <el-table
       class="nz-table"
       :data="tableData"
-      element-loading-background="rgba(0, 0, 0, 0)"
       border
       v-loading="loading"
       ref="alertMessageSubList"
@@ -399,8 +398,8 @@
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
         this.$get('alert/message', this.searchLabel).then(response => {
-          if (response.code == 200) {
           this.loading = false;
+          if (response.code == 200) {
             this.tableData = response.data.list;
             this.tableData.forEach((item) => {
               item.labels = JSON.parse(item.labels);

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -187,8 +187,8 @@
         this.$set(this.searchLabel, "pageNo", 1);
         this.$set(this.searchLabel, "pageSize", -1);
         this.$get("/cabinet", this.searchLabel).then(response => {
-          if (response.code == 200) {
           this.loading = false;
+          if (response.code == 200) {
             this.tableData = response.data.list;
           }
         });

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -21,7 +21,7 @@
         </div>
         <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
           <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
-          v-model="formatTime"loading
+          v-model="formatTime"
           type="datetime"
           size="mini"
           class="project-calendar nz-input-group-middle"
@@ -51,11 +51,10 @@
     <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
     <el-table
       :data="tableData"
-      v-loading="loading"
-      element-loading-background="rgba(0, 0, 0, 0)"
       border
-      v-scrollBar:el-table
+      v-scrollBar:el-table="'normal'"
       class="nz-table endpoint-query-table"
+      v-loading="loading"
       :header-cell-class-name="cellClass"
       :height="$tableHeight.noPagination"
       @selection-change="selectChange"
@@ -162,6 +161,7 @@
     data() {
       let temp = this;
       return {
+        loading: false,
         showTopBtn: false, //主列表top按钮
         currentEndpoint: {},
         queryData: [],//endpoint 查询列表数据
@@ -176,7 +176,6 @@
         graphChart:null,//图标对象
         graphShow:false,
         searchTime:[],
-        loading:false,
         pickerOptions: {
           shortcuts: [
             {
@@ -566,6 +565,7 @@
         this.tableData = [];
         this.tableDataCopy = '';
         this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
+          this.loading = false;
           if(response.status==="success"){
             let results = response.data.result;
             this.queryData=JSON.parse(JSON.stringify(results));
@@ -634,7 +634,6 @@
               this.tableData.push(edpQueryData);
             }
             this.tableDataCopy = JSON.stringify(this.tableData);
-            this.loading = false;
           }
         });
       },

nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue

@@ -195,7 +195,9 @@
         this.$emit('changeTab', tab);
       },
       getTableData() {
+        this.loading = true;
         this.$get('/endpoint?assetId=' + this.asset.id + 'pageSize=-1').then(response => {
+          this.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.$emit("reload");

nezha-fronted/src/components/common/loading.vue

@@ -6,8 +6,8 @@
 <template>
   <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
     <div class="el-loading-spinner">
-      <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
+      <!--<img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
-      <p class="el-loading-text loading-font">loading</p>
+      <p class="el-loading-text loading-font">loading</p>-->
     </div>
   </div>
 </template>

nezha-fronted/src/components/page/alert/config.vue

@@ -37,7 +37,8 @@
           ref="alertRuleTable"
           tooltip-effect="light"
           :height="mainTableHeight"
-          v-scrollBar:el-table
+          v-scrollBar:el-table="'large'"
+          v-loading="loading"
           :cell-class-name="messageStyle"
           style="width: 100%;">
           <el-table-column
@@ -121,6 +122,7 @@
     data() {
       vm = this;
       return {
+        loading: false,
         /*二级列表相关*/
         ruleDetail: {},
         targetTab: '', //展示二级列表中的哪个页签
@@ -363,7 +365,9 @@
       getTableData: function () {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('alert/rule', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code == 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total;

nezha-fronted/src/components/page/alert/list.vue

@@ -42,7 +42,8 @@
           ref="alertListTable"
           tooltip-effect="light"
           :height="mainTableHeight"
-          v-scrollBar:el-table
+          v-scrollBar:el-table="'large'"
+          v-loading="loading"
           :cell-class-name="labelsClassName"
           @selection-change="selectChange"
           style="width: 100%;">
@@ -187,6 +188,7 @@
     data() {
       vm = this;
       return {
+        loading: false,
         /*二级列表相关*/
         tabList: [], //二级列表的标签
         tabDetailList: [], //多个详情
@@ -392,7 +394,9 @@
       getAlertList: function () {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('alert/message', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code == 200) {
             this.tableData = response.data.list;
             this.tableData.forEach((item) => {

nezha-fronted/src/components/page/asset/asset.vue

@@ -115,9 +115,10 @@
                 :height="mainTableHeight"
                 style="width: 100%;"
                 :data="tableData"
-                v-scrollBar:el-table
+                v-scrollBar:el-table="'large'"
                 v-show="mainResizeShow"
                 border
+                v-loading="loading"
                 tooltip-effect="light"
                 ref="assetTable"
               >
@@ -283,6 +284,7 @@
     data() {
       vm = this;
       return {
+        loading: false,
         /*二级页面相关*/
         assetDetail: [], //asset详情
         alertMsgAsset: {}, //告警信息对应的asset对象
@@ -630,7 +632,9 @@
       },
       getAssetData(data, flushRightBoxDc) {
         this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
+        this.loading = true;
         this.$get('asset', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total

nezha-fronted/src/components/page/config/account.vue

@@ -57,7 +57,8 @@
           v-show="mainResizeShow"
           ref="accountTable"
           :height="mainTableHeight"
-          v-scrollBar:el-table
+          v-loading="loading"
+          v-scrollBar:el-table="'large'"
           style="width: 100%;">
           <el-table-column
             :resizable="false"
@@ -199,6 +200,7 @@
     data() {
       vm = this;
       return {
+        loading: false,
         //底部上滑框相关
         mainListHeight: '', //主列表高度
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -419,7 +421,9 @@
       getTableData: function () {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('sys/user/list', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + "";

nezha-fronted/src/components/page/config/dc.vue

@@ -56,9 +56,10 @@
             border
             tooltip-effect="light"
             v-show="mainResizeShow"
-            v-scrollBar:el-table
+            v-scrollBar:el-table="'large'"
             :height="mainTableHeight"
             ref="dcTable"
+            v-loading="loading"
             :cell-class-name="assetStatClassName"
             style="width: 100%;">
             <el-table-column
@@ -160,6 +161,7 @@
         tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        loading: false,
         currentDc: {
           id: '',
           name: '',
@@ -366,7 +368,9 @@
       getTableData: function () {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('idc', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total

nezha-fronted/src/components/page/config/mib.vue

@@ -54,7 +54,7 @@
             </button>
           </div>
         </div>
-        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table>
+        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="loading">
           <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
                            :key="`col-${index}`" :label="item.label">
             <template slot-scope="scope" :column="item">
@@ -139,6 +139,7 @@
     data() {
       return {
         showTab: 'file', //file/browser
+        loading: false,
 
         tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
@@ -292,7 +293,9 @@
         this.tableData = [];
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('mib', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total

nezha-fronted/src/components/page/config/mibBrowser.vue

@@ -135,7 +135,7 @@
       <div class="mib-browser-left">
         <div class="mib-browser-tree-title">
           <span>SNMP MIBs</span>
-          <el-dropdown trigger="click" v-scrollBar:el-dropdown :hide-on-click="false" @command="selectModel">
+          <el-dropdown trigger="click" v-scrollBar:el-dropdown="'small'" :hide-on-click="false" @command="selectModel">
             <span class="mib-browser-table-op">{{$t("config.model.model") + " "}}<i class="nz-icon nz-icon-funnel"></i></span>
             <el-dropdown-menu slot="dropdown" class="mib-browser-model-dropdown">
               <el-dropdown-item :class="{'mib-browser-model-dropdown-item-active': walkParam.models.indexOf(item.id) > -1}" :command="item" v-for="item, index in modelData" :key="index">{{item.name}}</el-dropdown-item>
@@ -154,6 +154,7 @@
             check-on-click-node
             check-strictly
             @node-click="showDetail"
+            v-loading="treeLoading"
           >
             <div slot-scope="{node, data}" class="walk-tree-item">
               <span v-if="!data.type"><i class="el-icon-reading"></i></span>
@@ -268,6 +269,7 @@
     data() {
       return {
         loading: false,
+        treeLoading: false,
         snmpSetFormVisible: false, //snmp set表单
         searchParam: {
           host: '',
@@ -353,13 +355,18 @@
 
       /*获取tree的数据*/
       getWalkData() {
+        this.treeLoading = true;
         this.$get('mib/tree', {models: this.walkParam.models.join(",")}).then(response => {
+          this.treeLoading = false;
           if (response.code === 200) {
             let obj = JSON.parse(response.data);
             this.walkData = [];
             for (let item in obj) {
               this.walkData.push({name: item, subTree: obj[item]});
             }
+            this.$nextTick(() => {
+              this.$refs.treeScrollbar.update();
+            });
           }
         });
       },
@@ -658,7 +665,7 @@
     height: 31%;
     width: 100%;
   }
-  .mib-browser-detail .el-scrollbar__wrap .el-scrollbar__view, .mib-browser-detail .el-scrollbar__wrap {
+  .el-scrollbar__wrap .el-scrollbar__view, .el-scrollbar__wrap, .el-tree {
     height: 100%;
   }
   .tree-detail-resize {

nezha-fronted/src/components/page/config/model.vue

@@ -45,7 +45,8 @@
           </button>
         </div>
       </div>
-      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table :cell-class-name="assetStatClassName">
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
+                v-loading="loading" :cell-class-name="assetStatClassName">
         <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
                          :key="`col-${index}`" :label="item.label">
           <template slot-scope="scope" :column="item">
@@ -119,6 +120,7 @@
           pageSize: 20,
           total: 0
         },
+        loading: false,
         tableTitle: [
           {
             label: 'ID',
@@ -256,7 +258,9 @@
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
         this.$set(this.searchLabel, "stat", 1);
+        this.loading = true;
         this.$get('model', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total

nezha-fronted/src/components/page/config/operationlog.vue

@@ -50,7 +50,8 @@
         border
         ref="operationLogTable"
         :height="$tableHeight.normal"
-        v-scrollBar:el-table
+        v-loading="loading"
+        v-scrollBar:el-table="'large'"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
@@ -96,6 +97,7 @@
     name: "oparetionlog",
     data() {
       return {
+        loading: false,
         tableId: 'operationLogTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         rightBox: { //弹出框相关
@@ -244,7 +246,9 @@
       getTableData: function () {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('sys/log/list', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             // for (let i = 0; i < response.data.list.length; i++) {
             //   response.data.list[i].status = response.data.list[i].status + "";

nezha-fronted/src/components/page/config/promServer.vue

@@ -58,7 +58,8 @@
             </button>
           </div>
         </div>-->
-        <el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
+        <el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
+                  v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'">
           <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
                            :key="`col-${index}`" :label="item.label">
             <template slot-scope="scope" :column="item">
@@ -223,6 +224,7 @@
           isEdit: false, //false查看，true编辑
           title: ''
         },
+        loading: false,
         promServer: {
           id: '',
           host: '',
@@ -584,7 +586,9 @@
         this.tableData = [];
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('promServer', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             for (var i = 0; i < response.data.list.length; i++) {
               for (var j = 0; j < this.idcData.length; j++) {

nezha-fronted/src/components/page/config/terminallog.vue

@@ -50,7 +50,8 @@
         border
         ref="terminalLogTable"
         :height="$tableHeight.normal"
-        v-scrollBar:el-table
+        v-scrollBar:el-table="'large'"
+        v-loading="loading"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
@@ -105,6 +106,7 @@
     name: "terminallog",
     data() {
       return {
+        loading: false,
         tableId: 'terminalLogTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         rightBox: { //弹出框相关
@@ -273,7 +275,9 @@
       getTableData: function () {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.loading = true;
         this.$get('terminal/log', this.searchLabel).then(response => {
+          this.loading = false;
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + "";

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -84,7 +84,7 @@
         </div>
       </div>
       <div class="table-list" id="tableList">
-        <el-scrollbar style="height: 100%" ref="dashboardScrollbar">
+        <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
           <div class="box-content">
             <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
                         ref="chartList"></chart-list>

nezha-fronted/src/components/page/project/project.vue

@@ -103,9 +103,10 @@
           border
           class="nz-table endpoint-table"
           :height="mainTableHeight"
-          v-scrollBar:el-table="'normal'"
+          v-scrollBar:el-table="'large'"
           v-show="mainResizeShow"
           ref="endpointTable"
+          v-loading="loading"
           style="width: 100%;">
           <el-table-column
             :resizable="false"
@@ -204,6 +205,8 @@
       vm = this;
       let temp = this;
       return {
+        loading: false,
+
         assetDetail: [], //asset详情
         endpointDetail: [],
         targetTab: '',
@@ -347,7 +350,9 @@
           this.endpointSearchLabel.moduleId = this.currentModule.id;
           this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
           this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
+          this.loading = true;
           this.$get('endpoint', this.endpointSearchLabel).then(response => {
+            this.loading = false;
             if (response.code === 200) {
               for (let i = 0; i < response.data.list.length; i++) {
                 try {

nezha-fronted/src/tools.js

@@ -104,7 +104,7 @@ export const scrollBar = {
       el = el.querySelector(".el-table__body-wrapper");
       !el && console.warn("未发现className为el-table__body-wrapper的dom");
     } else if (arg === "el-dropdown") {
-      el = el.querySelector(".el-dropdown-menu");
+      el = document.querySelector(".el-dropdown-menu");
       !el && console.warn("未发现className为el-dropdown-menu的dom");
     } else if (arg == "legend") {
       el = el.querySelector(".legend-container");
@@ -152,7 +152,7 @@ export const scrollBar = {
       el = el.querySelector(".el-table__body-wrapper");
       !el && console.warn("未发现className为el-table__body-wrapper的dom");
     } else if (arg === "el-dropdown") {
-      el = el.querySelector(".el-dropdown-menu");
+      el = document.querySelector(".el-dropdown-menu");
       !el && console.warn("未发现className为el-dropdown-menu的dom");
     }else if (arg === "xterm") {
       el = el.querySelector(".xterm-viewport");