perf: 细节调整

src/components/charts/StatisticsLegend.vue

@@ -8,14 +8,10 @@
     </div>
     <div class="chart__table-below">
       <div v-for="(item,index) in data" :key="index" class="table-below-box">
-        <div class="table-below-account">
+        <div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
-        <div :style="{backgroundColor: getChartColor(index)}" class="table__below-color" :title="getChartColor(index)"></div>
         <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
-        </div>
+        <div class="table__below-statistics" :title="item.aggregation.max">{{item.aggregation.max}}</div>
-        <div class="table__below-flashback">
+        <div class="table__below-statistics table__below-statistics-2" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
-          <div class="table__below-max qq"  :title="item.aggregation.max">{{item.aggregation.max}}</div>
-          <div class="table__below-avg qq" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
-        </div>
       </div>
     </div>
   </div>
@@ -50,9 +46,8 @@ export default {
 <style lang="scss" scoped>
 .chart__legend {
   width: 455px;
-  height: 111px;
+  height: 95px;
   border: 1px solid #E7EAED;
-  font-size: 10px;
   color:#5f6368;
   margin: auto;
 }
@@ -67,7 +62,6 @@ export default {
     height: 30px;
     display: flex;
     align-items: center;
-    font-family: Roboto-Regular;
     font-size: 14px;
     color: #0091FF;
     font-weight: 400;
@@ -78,24 +72,13 @@ export default {
   width: 455px;
   height: calc(100% - 30px);
   overflow: auto;
+  font-size: 13px;
+
   .table-below-box {
     width: 100%;
     display: flex;
-    font-size: 15px;
     align-items: center;
-    .table-below-account{
+    line-height: 24px;
-      width: 310px;
-      display: flex;
-      align-items: center;
-      padding-left: 16px;
-    }
-    .table__below-flashback{
-      width: 211px;
-      display: flex;
-      flex-direction:row-reverse;
-      align-items: center;
-      justify-content: space-around;
-    }
   }
   .table-below-box:hover {
     background-color: #f9f9f9;
@@ -103,18 +86,34 @@ export default {
     color: #383838;
   }
   .table__below-color {
-    width: 17px;
+    width: 27px;
     height: 7px;
+    flex-shrink: 0;
+    padding-left: 10px;
+
+    div {
+      height: 100%;
+      width: 100%;
       border-radius: 24%;
     }
+  }
   .table__below-title {
-    max-width: 226px;
+    padding: 0 6px;
+    flex-shrink: 1;
+    flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .qq{
+  .table__below-statistics {
-    width: 39px;
+    width: 86px;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .table__below-statistics-2 {
+    width: 70px;
   }
 }
 </style>

src/components/charts/chart-options.js

@@ -33,7 +33,6 @@ const line = {
     axisLabel: {
       formatter: shortFormatter
     }
-
   },
   animation: false,
   grid: {
@@ -63,7 +62,7 @@ const line = {
     {
       name: '',
       type: 'line',
-      smooth: true,
+      smooth: false,
       symbol: 'none',
       data: []
     }
@@ -95,7 +94,7 @@ const lineWithStatistics = {
   color: chartColor,
   grid: {
     left: 55,
-    bottom: 45,
+    bottom: 25,
     top: 30
   },
   legend: {
@@ -108,7 +107,7 @@ const lineWithStatistics = {
     {
       name: '',
       type: 'line',
-      smooth: true,
+      smooth: false,
       symbol: 'none',
       data: []
     }

src/components/charts/chartFormatter.js

@@ -1,4 +1,4 @@
-const shortList = [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion']
+const shortList = [' ', 'K', 'M', 'B', 'T', 'Quadrillion', 'Quintillion']
 function asciiCompute (num, ascii, units, dot = 2) {
   if (!num && num !== 0 && num !== '0') {
     return ''

src/components/charts/panel.scss

@@ -13,7 +13,7 @@
   .panel__time {
     position: absolute;
     right: 20px;
-    top: 20px;
+    top: 10px;
     display: flex;
   }
 
@@ -176,6 +176,9 @@
     &>.el-tabs__header {
       margin-bottom: 10px;
     }
+    &>.el-tabs__content {
+      height: calc(100% - 40px);
+    }
   }
   &>.cn-chart__table {
     .cn-chart__header {

src/components/common/TimeRange/DateTimeRange.vue

@@ -10,7 +10,8 @@
       <div class="calendar-popover-text" v-else>
         {{ showDetail }}
       </div>
-            <div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down" :class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
+      <div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down"
+                                            :class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
     </div>
     <transition name="el-zoom-in-top">
       <div v-if="dropdownFlag" class="date-range-panel">
@@ -31,26 +32,37 @@
                 @change="timeArrChange"
             />
             <div class="content-title">From</div>
-                    <div @click="myDatePickerShow" tabindex="1" class="content-input">{{dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+            <div @click="myDatePickerShow" tabindex="1" class="content-input">
+              {{ dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </div>
             <div class="content-title">To</div>
-                    <div @click="myDatePickerShow" tabindex="2" class="content-input">{{dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+            <div @click="myDatePickerShow" tabindex="2" class="content-input">
-                    <div><el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button></div>
+              {{ dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </div>
+            <div>
+              <el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button>
+            </div>
             <div class="date-range-title" style="padding-left: 0">Recently used absolute ranges</div>
             <div class="date-range-history">
-                        <div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item" @click="historyChange(item)">
+              <div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item"
+                   @click="historyChange(item)">
                 {{ dayJs.tz(item.start).format('YYYY-MM-DD HH:mm:ss') }}
                 —
                 {{ dayJs.tz(item.end).format('YYYY-MM-DD HH:mm:ss') }}
               </div>
             </div>
           </el-col>
-                <el-col :span="8" class="date-range-panel-content date-range-panel-content-right" style="border-left: 1px solid rgba(0,0,0,0.09);">
+          <el-col :span="8" class="date-range-panel-content date-range-panel-content-right"
+                  style="border-left: 1px solid rgba(0,0,0,0.09);">
             <div class="date-range-title">Relatime time ranges</div>
             <ul class="date-range-item">
-                        <li v-for="item in dateRangeArr" @click="quickChange(item.value)" :class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''" :key="item.value">
+              <li v-for="item in dateRangeArr" @click="quickChange(item.value)"
+                  :class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''"
+                  :key="item.value">
                             <span style="position: relative">
                                 {{ item.name }}
-                                <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)" class="cn-icon cn-icon-check"></i>
+                                <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)"
+                                   class="cn-icon cn-icon-check"></i>
                             </span>
               </li>
             </ul>
@@ -68,6 +80,7 @@
 <script>
 import {ref, computed} from 'vue'
 import MyDatePicker from '../MyDatePicker'
+
 export default {
   name: 'DateTimeRange',
   props: {
@@ -256,19 +269,27 @@ export default {
   font-size: 14px;
   border-radius: 2px;
   display: flex;
+
   .date-range-refresh {
     margin-left: 10px;
   }
 }
+
+.date-time-range {
+  margin-right: 10px;
+}
+
 .date-range-item {
   list-style-type: none;
 }
+
 /deep/ .panel-time-picker-hidden {
   visibility: hidden !important;
   position: absolute;
   top: 0;
   left: 0;
 }
+
 .date-range-text {
   font-size: 14px;
   min-width: 150px;
@@ -284,35 +305,42 @@ export default {
   border-radius: 2px;
   line-height: 26px;
   transition: width .3s;
+
   .cn-icon {
     font-size: 14px;
   }
+
   .cn-icon-arrow-down {
     transition: all .3s;
     display: inline-block;
   }
+
   .cn-icon-arrow-down-active {
     transform: rotate(180deg);
   }
 }
+
 .date-range-title {
-    font-family: Roboto-Black;
   font-size: 14px;
   color: #666666;
   font-weight: 600;
   padding: 14px 0px 7px 8px;
 }
+
 .calendar-popover-text {
   white-space: nowrap;
   display: inline-block;
   margin: 0 5px;
 }
+
 .calendar-popover-text:first-of-type {
   margin-left: 0;
 }
+
 .calendar-popover-text:last-of-type {
   margin-right: 0;
 }
+
 .date-range-panel {
   height: 410px;
   width: 500px;
@@ -322,16 +350,19 @@ export default {
   right: 0;
   top: 34px;
   z-index: 1;
+
   .date-range-panel-content-left {
     padding-left: 10px;
     display: flex;
     flex-direction: column;
+
     .content-title {
       font-size: 14px;
       color: #666666;
       font-weight: 400;
       margin-bottom: 12px;
     }
+
     .content-input {
       border: 1px solid #E7EAED;
       border-radius: 2px;
@@ -342,31 +373,38 @@ export default {
       margin-bottom: 12px;
       outline: #169AFF;
     }
+
     .content-input:focus {
       border: 1px solid #169AFF;
     }
+
     .date-range-history {
       flex: 1;
       overflow-y: auto;
+
       .date-range-history-item {
         padding: 5px 0;
         cursor: pointer;
       }
+
       .date-range-history-item:hover {
         /*font-weight: 600;*/
         background: #f9f9f9;
       }
     }
   }
+
   .date-range-panel-content-right {
     display: flex;
     flex-direction: column;
+
     ul {
       flex: 1;
       padding: 0;
       display: flex;
       flex-direction: column;
       margin: 0;
+
       li {
         width: 100%;
         flex: 1;
@@ -375,20 +413,22 @@ export default {
         justify-content: center;
         color: #333333;
         font-weight: 400;
-                font-family: Roboto-Regular;
         padding: 0 10px;
         cursor: pointer;
       }
+
       li.active {
         background: #F2F9FF;
         color: #0091FF;
         font-weight: 400;
+
         .cn-icon-check {
           color: #0091FF;
           position: absolute;
           right: 7px;
         }
       }
+
       li:hover {
         background: #F2F9FF;
         color: #0091FF;
@@ -396,9 +436,11 @@ export default {
     }
   }
 }
+
 .date-range-panel-top {
   height: 364px;
 }
+
 .date-range-panel-bottom {
   height: 44px;
   line-height: 44px;
@@ -407,6 +449,7 @@ export default {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
+
   .utc-str {
     text-align: right;
   }

src/components/entities/LeftFilter.vue

@@ -50,7 +50,6 @@ export default {
   },
   watch: {
     filterData (n) {
-      console.info(n)
     }
   }
 }

src/views/charts/Chart.vue

@@ -104,7 +104,7 @@
             class="option__select select-topn"
             placeholder=""
             popper-class="option-popper"
-            @change="tabelLimtChange"
+            @change="tableLimitChange"
         >
           <el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
           <template #prefix>TOP&nbsp;</template>
@@ -117,7 +117,7 @@
             class="option__select select-column"
             :placeholder="$t('common.field')"
             popper-class="option-popper"
-            @change="tabelLimtChange"
+            @change="tableLimitChange"
         >
           <el-option v-for="item in table.tableColumns" :key="item.prop" :value="item.prop">{{item.prop}}</el-option>
         </el-select>
@@ -216,7 +216,6 @@ export default {
   },
   methods: {
     initChart () {
-      const self = this
       const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
       if (this.isMap) {
         this.myChart = this.initMap(`chart${this.chartInfo.id}`)
@@ -466,7 +465,7 @@ export default {
         })
       })
     },
-    tabelLimtChange () {
+    tableLimitChange () {
       const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
       this.initChartTable(chartParams)
     },
@@ -494,6 +493,17 @@ export default {
   mounted () {
     this.initChart()
   },
+  watch: {
+    chart: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        if (o) {
+          this.initChart()
+        }
+      }
+    }
+  },
   setup (props) {
     const chartInfo = JSON.parse(JSON.stringify(props.chart))
     chartInfo.category = getTypeCategory(props.chart.type)

src/views/charts/Panel.vue

@@ -101,24 +101,23 @@ export default {
           chart.i = chart.id
           return chart
         })
-        // this.chartList = [this.chartList[7], this.chartList[12]]
       }
     },
-    timeRefreshChange () {
+    async timeRefreshChange () {
       if (!this.$refs.dateTimeRange) {
-        this.init()
+        await this.init()
         return
       }
       if (this.$refs.dateTimeRange.isCustom) {
-        this.init()
+        await this.init()
       } else {
         const value = this.dateRangeValue.value || this.dateRangeValue
         this.$refs.dateTimeRange.quickChange(value)
       }
     },
-    reload (s, e, v) {
+    async reload (s, e, v) {
       this.dateTimeRangeChange(s, e, v)
-      this.init()
+      await this.init()
     }
   }
 }