处理图标的x轴最后label显示不全的问题

调整details页面下拉加载列表的样式

src/views/abnormalAlarm/serverMonitor/instances/details.vue

@@ -1264,6 +1264,7 @@ export default {
       height: 52px;
       letter-spacing: 1px;
       color: #ade6ee;
+      justify-content: flex-start;
     }
     .ant-list-item:nth-child(odd){
       background-color: rgba(13, 109, 118, 0.2);
@@ -1275,12 +1276,18 @@ export default {
       margin-left: 12px;
     }
     &-info{
+      width: 188px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-left: 15px;
       display: inline-block;
       color: #ffffff;
     }
     &-date{
       display: inline-block;
       color: #90b4c5;
+      margin-left: 35px;
     }
     &-actions{
       

src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue

@@ -19,7 +19,8 @@ export default {
   },
   data() {
     return {
-      option: {}
+      option: {},
+      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     }
   },
   mounted () {
@@ -82,10 +83,19 @@ export default {
             }
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
           },
           boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: this.xData
         },
         yAxis: {
           type: 'value',

src/views/abnormalAlarm/serverMonitor/instances/monitor.vue

@@ -36,7 +36,7 @@
         </a-col>
       </a-row>
       <div class="monitor-search-btns">
-        <a-button class="monitor-search-btns-ant">Create Alert RULES</a-button>
+        <a-button class="monitor-search-btns-ant">Create Alert Rules</a-button>
       </div>
     </div>
     <div class="monitor-content">
@@ -121,7 +121,7 @@
         <a-col :span="8" style="height: 34%;">
           <div class="monitor-content-item">
             <LineChart
-              title="Lnternal Network Bandwidth (bit/s)"
+              title="Internal Network Bandwidth (bit/s)"
               layout="line8"
               :dataSource="data8"
               @zoom="handelZoom"
@@ -247,17 +247,17 @@ export default {
       ],
       data8: [
         {
-          name: "Lntranet in Rete",
+          name: "Intranet in Rete",
           data: [15, 23, 22, 28, 35, 47, 26]
         },
         {
-          name: "Lntranet Out Rete",
+          name: "Intranet Out Rete",
           data: [25, 13, 32, 18, 45, 27, 36]
         }
       ],
       data9: [
         {
-          name: "Lntranet Out Rete",
+          name: "Intranet Out Rete",
           data: [15, 23, 22, 28, 35, 47, 26]
         }
       ],

src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue

@@ -63,7 +63,7 @@
             <div class="service-content-center-item" id="cpu"></div>
           </a-col>
           <a-col :span="12">
-            <BoxTitle title="Proces menbry usage(%)">
+            <BoxTitle title="Proces memory usage(%)">
               <template slot="right">
                 <ul class="legend-list">
                   <li v-for="(item,index) in procesMenbry.legend" :key="index">
@@ -204,6 +204,7 @@ export default {
         showSizeChanger: true,
         total: 0
       },
+      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     }
   },
   mounted () {
@@ -374,10 +375,19 @@ export default {
             }
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
           },
           boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: this.xData
         },
         yAxis: {
           type: 'value',
@@ -450,10 +460,19 @@ export default {
             }
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
           },
           boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: this.xData
         },
         yAxis: {
           type: 'value',