perf: 细节调整

src/components/charts/StatisticsLegend.vue

@@ -1,21 +1,17 @@
 <template>
   <div class="chart__legend">
     <div class="chart__table-top">
-    <div class="chart__table-box">
+      <div class="chart__table-box">
-      <div>Average</div>
+        <div>Average</div>
-      <div>Maximum</div>
+        <div>Maximum</div>
-    </div>
+      </div>
     </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>
@@ -48,73 +44,76 @@ export default {
 
 </script>
 <style lang="scss" scoped>
-.chart__legend{
+.chart__legend {
   width: 455px;
-  height: 111px;
+  height: 95px;
   border: 1px solid #E7EAED;
-  font-size: 10px;
   color:#5f6368;
   margin: auto;
 }
-.chart__table-top{
+.chart__table-top {
   width: 455px;
   height: 30px;
   border-bottom: #E7EAED 0.96px solid;
   display: flex;
   flex-direction:row-reverse;
-  .chart__table-box{
+  .chart__table-box {
     width: 185px;
     height: 30px;
     display: flex;
     align-items: center;
-    font-family: Roboto-Regular;
     font-size: 14px;
     color: #0091FF;
     font-weight: 400;
     justify-content: space-around;
   }
 }
-.chart__table-below{
+.chart__table-below {
   width: 455px;
   height: calc(100% - 30px);
   overflow: auto;
-  .table-below-box{
+  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{
+  .table-below-box:hover {
     background-color: #f9f9f9;
     border: 0;
     color: #383838;
   }
-  .table__below-color{
+  .table__below-color {
-    width: 17px;
+    width: 27px;
     height: 7px;
-    border-radius: 24%;
+    flex-shrink: 0;
+    padding-left: 10px;
+
+    div {
+      height: 100%;
+      width: 100%;
+      border-radius: 24%;
+    }
   }
-  .table__below-title{
+  .table__below-title {
-    max-width: 226px;
+    padding: 0 6px;
+    flex-shrink: 1;
+    flex-grow: 1;
     overflow: hidden;
-    text-overflow:ellipsis;
+    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

@@ -1,73 +1,86 @@
 <template>
-    <div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
+  <div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
-        <div @click="showDropdown" class="date-range-text">
+    <div @click="showDropdown" class="date-range-text">
-            <div class="calendar-popover-text"><i class="cn-icon cn-icon-time"></i></div>
+      <div class="calendar-popover-text"><i class="cn-icon cn-icon-time"></i></div>
-            <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
+      <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
-                <div class="calendar-popover-text">{{dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+        <div class="calendar-popover-text">{{ dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
-                <div class="calendar-popover-text"> - </div>
+        <div class="calendar-popover-text"> -</div>
-                <div class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
+        <div class="calendar-popover-text">{{ dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
-            </div>
+      </div>
-            <div class="calendar-popover-text" v-else>
+      <div class="calendar-popover-text" v-else>
-                {{showDetail}}
+        {{ showDetail }}
-            </div>
+      </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"
-        </div>
+                                            :class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
-        <transition name="el-zoom-in-top">
-            <div v-if="dropdownFlag" class="date-range-panel">
-            <el-row class="date-range-panel-top" style="position: relative">
-                <el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
-                    <div class="date-range-title" style="padding-left: 0">Absolute time range</div>
-                    <MyDatePicker
-                            :clearable='false'
-                            :editable='false'
-                            v-model="timeArr"
-                            type="datetimerange"
-                            ref="myDatePicker"
-                            :popper-class="'myDatePicker'"
-                            class="panel-time-picker-hidden"
-                            :size="'small'"
-                            placement="left-start"
-                            style="position: absolute"
-                            @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 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><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)">
-                            {{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);">
-                    <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">
-                            <span style="position: relative">
-                                {{item.name}}
-                                <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)" class="cn-icon cn-icon-check"></i>
-                            </span>
-                        </li>
-                    </ul>
-                </el-col>
-            </el-row>
-            <el-row class="date-range-panel-bottom" style="">
-                <el-col :span="12">{{address}}</el-col>
-                <el-col :span="12" class="utc-str">{{utcStr}}</el-col>
-            </el-row>
-        </div>
-        </transition>
     </div>
+    <transition name="el-zoom-in-top">
+      <div v-if="dropdownFlag" class="date-range-panel">
+        <el-row class="date-range-panel-top" style="position: relative">
+          <el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
+            <div class="date-range-title" style="padding-left: 0">Absolute time range</div>
+            <MyDatePicker
+                :clearable='false'
+                :editable='false'
+                v-model="timeArr"
+                type="datetimerange"
+                ref="myDatePicker"
+                :popper-class="'myDatePicker'"
+                class="panel-time-picker-hidden"
+                :size="'small'"
+                placement="left-start"
+                style="position: absolute"
+                @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 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>
+              <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)">
+                {{ 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);">
+            <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">
+                            <span style="position: relative">
+                                {{ item.name }}
+                                <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)"
+                                   class="cn-icon cn-icon-check"></i>
+                            </span>
+              </li>
+            </ul>
+          </el-col>
+        </el-row>
+        <el-row class="date-range-panel-bottom" style="">
+          <el-col :span="12">{{ address }}</el-col>
+          <el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
+        </el-row>
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script>
-import { ref, computed } from 'vue'
+import {ref, computed} from 'vue'
 import MyDatePicker from '../MyDatePicker'
+
 export default {
   name: 'DateTimeRange',
   props: {
@@ -92,7 +105,7 @@ export default {
   components: {
     MyDatePicker
   },
-  setup (props, ctx) {
+  setup(props, ctx) {
     // data
     const myStartTime = ref(props.startTime)
     const myEndTime = ref(props.endTime)
@@ -252,163 +265,193 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.date-range-box{
+.date-range-box {
+  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;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-around;
+  height: 26px;
+  background: #FFFFFF;
+  border: 1px solid #E7EAED;
+  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+  border-radius: 2px;
+  line-height: 26px;
+  transition: width .3s;
+
+  .cn-icon {
     font-size: 14px;
-    border-radius: 2px;
+  }
-    display: flex;
+
-    .date-range-refresh{
+  .cn-icon-arrow-down {
-        margin-left: 10px;
+    transition: all .3s;
-    }
-}
-.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;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    padding: 0 10px;
-    display: flex;
-    justify-content: space-around;
-    height: 26px;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-    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;
+  }
+
+  .cn-icon-arrow-down-active {
+    transform: rotate(180deg);
+  }
 }
-.calendar-popover-text:first-of-type{
+
-    margin-left: 0;
+.date-range-title {
+  font-size: 14px;
+  color: #666666;
+  font-weight: 600;
+  padding: 14px 0px 7px 8px;
 }
-.calendar-popover-text:last-of-type{
+
-    margin-right: 0;
+.calendar-popover-text {
+  white-space: nowrap;
+  display: inline-block;
+  margin: 0 5px;
 }
-.date-range-panel{
+
-    height: 410px;
+.calendar-popover-text:first-of-type {
-    width: 500px;
+  margin-left: 0;
-    background: #FFFFFF;
-    box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
-    position: absolute;
-    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;
-            width: 230px;
-            padding: 0 8px;
-            height: 30px;
-            line-height: 30px;
-            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;
-                display: flex;
-                flex-direction: column;
-                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;
-            }
-        }
-    }
 }
-.date-range-panel-top{
+
-    height: 364px;
+.calendar-popover-text:last-of-type {
+  margin-right: 0;
 }
-.date-range-panel-bottom{
+
-    height: 44px;
+.date-range-panel {
-    line-height: 44px;
+  height: 410px;
-    border-top: 1px solid rgba(0,0,0,0.09);
+  width: 500px;
-    padding: 0 10px;
+  background: #FFFFFF;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  position: absolute;
+  right: 0;
+  top: 34px;
+  z-index: 1;
+
+  .date-range-panel-content-left {
+    padding-left: 10px;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    font-size: 14px;
+
-    .utc-str{
+    .content-title {
-        text-align: right;
+      font-size: 14px;
+      color: #666666;
+      font-weight: 400;
+      margin-bottom: 12px;
     }
+
+    .content-input {
+      border: 1px solid #E7EAED;
+      border-radius: 2px;
+      width: 230px;
+      padding: 0 8px;
+      height: 30px;
+      line-height: 30px;
+      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;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        color: #333333;
+        font-weight: 400;
+        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;
+      }
+    }
+  }
+}
+
+.date-range-panel-top {
+  height: 364px;
+}
+
+.date-range-panel-bottom {
+  height: 44px;
+  line-height: 44px;
+  border-top: 1px solid rgba(0, 0, 0, 0.09);
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+
+  .utc-str {
+    text-align: right;
+  }
 }
 </style>

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()
     }
   }
 }