CN-1507 时间选择器增加左对齐的风格

src/assets/css/components/components/common/TimeRange/date-time-range.scss

@@ -212,3 +212,13 @@
     left: 642px !important; // element上样式设定是left，添加right不生效
   }
 }
+.my-date-picker__left {
+  .el-popper__arrow {
+    position: absolute;
+    top: 20px !important;
+    left: -6px !important;
+  }
+  .el-popper__arrow::before {
+    border: 1px solid #E7EAED !important;
+  }
+}

src/assets/css/components/views/charts2/EntityDetailSubscriberKpi.scss

@@ -48,6 +48,7 @@
             display:flex;
             flex-direction: row;
             .kpi-type-value-number {
+              white-space: nowrap;
               font-family: Helvetica-Bold;
               font-size: 20px;
               color: #353636;
@@ -56,12 +57,10 @@
             .data-trend {
               display: flex;
               width: 50%;
-
               .data-total-trend {
                 display: flex;
-                justify-content: left;
+                align-items: center;
                 margin-left: 6px;
-                font-size: 12px;
                 justify-content: center;
                 margin-top: 2px;
                 border-radius: 10px;
@@ -87,8 +86,6 @@
                 }
               }
             }
-
-
           }
         }
       }

src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss

@@ -46,7 +46,7 @@
         .app-index {
           text-align: right;
           width:20px;
-          margin-right:20px;
+          margin-right:15px;
         }
         .app-name {
           width:50px;
@@ -62,6 +62,8 @@
           display: flex;
           flex-direction: row;
           align-items: center;
+          white-space: nowrap;
+          width:50px;
           i {
             margin-right:3px;
             font-size:12px;

src/components/common/TimeRange/DateTimeRange.vue

@@ -15,20 +15,22 @@
       </div>
     </div>
     <transition name="el-zoom-in-top" style="z-index: 4;">
-      <div v-if="dropdownFlag" class="date-range-panel">
+      <div v-if="dropdownFlag" class="date-range-panel" :style="showPosition === 'left' ? leftStyle : rightStyle">
         <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">{{$t('dateTime.absoluteTimeRange')}}</div>
             <el-config-provider :locale="locale">
               <el-date-picker
                       v-model="newDateValue"
+                      :key="keyValue"
                       ref="newDatePicker"
                       popper-class="my-date-picker"
-                      style="position: absolute;top: -53px;left: -536px;"
+                      :style="showPosition === 'left' ? datePickerLeftStyle : datePickerRightStyle"
                       :clearable="false"
                       :default-time="defaultTime"
                       :unlink-panels="true"
                       type="datetimerange"
+                      @blur="datePickerVisibleChange"
                       @change="timeArrChange"
               />
             </el-config-provider>
@@ -70,7 +72,7 @@
             </ul>
           </el-col>
         </el-row>
-        <el-row class="date-range-panel-bottom">
+        <el-row class="date-range-panel-bottom" >
           <el-col :span="12">{{ address }}</el-col>
           <el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
         </el-row>
@@ -107,6 +109,10 @@ export default {
     },
     style: {
       type: String
+    },
+    showPosition: {
+      type: String,
+      default: 'right'
     }
   },
   emits: ['change'],
@@ -135,6 +141,17 @@ export default {
       return str
     }
   },
+  methods: {
+    /**
+     * 时间选择器失去焦点之后就会隐藏，此时，Left展示类型的，就需要重新设置下拉框的位置
+     */
+    datePickerVisibleChange () {
+      if (this.showPosition === 'left') {
+        this.leftStyle = this.leftStyleBefore
+        //this.dropdownFlag = true
+      }
+    }
+  },
   setup (props, ctx) {
     // data
     const store = useStore()
@@ -160,6 +177,12 @@ export default {
       new Date(2023, 1, 1, 0, 0, 0),
       new Date(2023, 1, 2, 23, 59, 59)
     ])
+    const rightStyle = 'position: absolute;top: 32px;right: 0px;'
+    const leftStyleBefore = 'position: absolute;top: 32px;left: 0px;'
+    const leftStyleAfter = 'position: absolute;top: 32px;left: 660px;'
+    const datePickerRightStyle = 'position: absolute;top: -53px;left: -536px;'
+    const datePickerLeftStyle = 'position: absolute;top: -53px;left: -536px;'
+    const leftStyle = ref('position: absolute;top: 32px;left: 0px;')
     // computed
     const utcStr = computed(() => {
       let str = 'UTC '
@@ -197,6 +220,17 @@ export default {
       }
     })
 
+    /**
+     * 监测下拉框，一旦隐藏，则设置其位置靠最左边
+     * */
+    watch(() => dropdownFlag.value, (newVal) => {
+      if (!newVal) {
+        if (props.showPosition === 'left') {
+          leftStyle.value = leftStyleBefore
+        }
+      }
+    })
+
     // methods
     /**
      * 打开/关闭时间面板
@@ -215,14 +249,14 @@ export default {
       if (dropdownFlag.value) {
         dropdownFlag.value = false
       }
-      if (dropdownFlag.value) {
-        dropdownFlag.value = false
-      }
     }
     /**
      * 打开时间选择器，从时间面板的“开始时间”、“结束时间”调用
      */
     const myDatePickerShow = () => {
+      if (props.showPosition === 'left') {
+        leftStyle.value = leftStyleAfter
+      }
       newDateValue.value = [
         new Date(...timestampToList(myStartTime.value)),
         new Date(...timestampToList(myEndTime.value))
@@ -306,6 +340,8 @@ export default {
       locale = cn
     }
 
+    const keyValue = window.$dayJs.tz().valueOf()
+
     return {
       myStartTime,
       myEndTime,
@@ -322,6 +358,12 @@ export default {
       rangeHistory,
       rangeHistoryArr,
       getMillisecond,
+      datePickerLeftStyle,
+      datePickerRightStyle,
+      leftStyle,
+      leftStyleBefore,
+      rightStyle,
+      keyValue,
       myDatePickerShow,
       showDropdown,
       changeDropdown,

src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue

@@ -8,71 +8,103 @@
               :end-time="timeFilter.endTime"
               :date-range="timeFilter.dateRangeValue"
               ref="dateTimeRange"
+              showPosition="left"
               @change="reload"
       />
     </div>
 
     <div class="subscriber-kpi-body">
       <chart-no-data v-if="isNoData" test-id="noData"></chart-no-data>
-      <chart-error v-if="showError" :content="errorMsg" />
+      <chart-error v-if="showError" :content="errorMsg" style="top:34px;" />
 
       <div class="subscriber-kpi-content" v-if="!isNoData && !showError">
         <div class="kpi-type">
           <div class="kpi-type-value">
             <div class="kpi-type-value-name">{{$t('subscriber.volume')}}</div>
             <div class="kpi-type-data" >
-              <div class="kpi-type-value-number">
+              <template v-if="$_.get(kpiData, 'volume')">
-                {{unitConvert($_.get(kpiData, 'volume'), unitTypes.number).join(' ')}}
+                <div class="kpi-type-value-number" >{{$_.get(kpiData, 'volume') ? unitConvert($_.get(kpiData, 'volume')[0], unitTypes.bps).join(' ') : '-'}}</div>
-              </div>
+                <div class="data-trend">
-
+                  <div v-if="$_.get(kpiData, 'volume')[1] === 'up'" class="data-total-trend data-total-trend-red" >
-              <div class="data-trend">
+                    <i class="cn-icon-rise1 cn-icon"></i><span>{{$_.get(kpiData, 'volume')[2]}}</span>
-                <div  class="data-total-trend data-total-trend-red">
+                  </div>
-                  <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+                  <div v-else-if=" $_.get(kpiData, 'volume')[1] === 'down'" class="data-total-trend data-total-trend-green" >
-                  <span >32%</span>
+                    <i class="cn-icon-decline cn-icon"></i><span>{{$_.get(kpiData, 'volume')[2]}}</span>
+                  </div>
+                  <div v-else-if=" $_.get(kpiData, 'volume')[1] === 'noChange'" class="data-total-trend data-total-trend-black" >
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
                 </div>
-              </div>
+              </template>
-
+              <template  v-else>
+                -
+              </template>
             </div>
           </div>
           <div class="kpi-type-value">
             <div class="kpi-type-value-name">{{$t('subscriber.throughput')}}</div>
             <div class="kpi-type-data" >
-              <div class="kpi-type-value-number" >{{unitConvert($_.get(kpiData, 'throughput'), unitTypes.bps).join(' ')}}</div>
+              <template v-if="$_.get(kpiData, 'throughput')">
-              <div class="data-trend">
+                <div class="kpi-type-value-number" >{{$_.get(kpiData, 'throughput') ? unitConvert($_.get(kpiData, 'throughput')[0], unitTypes.bps).join(' ') : '-'}}</div>
-
+                <div class="data-trend">
-                <div  class="data-total-trend data-total-trend-green">
+                    <div v-if="$_.get(kpiData, 'throughput')[1] === 'up'" class="data-total-trend data-total-trend-red" >
-                  <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                      <i class="cn-icon-rise1 cn-icon"></i><span>{{$_.get(kpiData, 'throughput')[2]}}</span>
-                  <span >8%</span>
+                    </div>
+                    <div v-else-if=" $_.get(kpiData, 'throughput')[1] === 'down'" class="data-total-trend data-total-trend-green" >
+                      <i class="cn-icon-decline cn-icon"></i><span>{{$_.get(kpiData, 'throughput')[2]}}</span>
+                    </div>
+                    <div v-else-if=" $_.get(kpiData, 'throughput')[1] === 'noChange'" class="data-total-trend data-total-trend-black" >
+                      <i class="cn-icon-constant cn-icon"></i>
+                    </div>
                 </div>
-              </div>
+              </template>
+              <template  v-else>
+                -
+              </template>
             </div>
-
           </div>
           <div class="kpi-type-value">
             <div class="kpi-type-value-name">{{$t('subscriber.latency')}}</div>
             <div class="kpi-type-data" >
-              <div class="kpi-type-value-number" >{{unitConvert($_.get(kpiData, 'latency'), unitTypes.time).join(' ')}}</div>
+              <template v-if="$_.get(kpiData, 'latency')">
-              <div class="data-trend">
+                <div class="kpi-type-value-number" >{{$_.get(kpiData, 'latency') ? unitConvert($_.get(kpiData, 'latency')[0], unitTypes.bps).join(' ') : '-'}}</div>
-
+                <div class="data-trend">
-                <div  class="data-total-trend data-total-trend-black">
+                  <div v-if="$_.get(kpiData, 'latency')[1] === 'up'" class="data-total-trend data-total-trend-red" >
-                  <i class="cn-icon-constant cn-icon"></i>
+                    <i class="cn-icon-rise1 cn-icon"></i><span>{{$_.get(kpiData, 'latency')[2]}}</span>
+                  </div>
+                  <div v-else-if=" $_.get(kpiData, 'latency')[1] === 'down'" class="data-total-trend data-total-trend-green" >
+                    <i class="cn-icon-decline cn-icon"></i><span>{{$_.get(kpiData, 'latency')[2]}}</span>
+                  </div>
+                  <div v-else-if=" $_.get(kpiData, 'latency')[1] === 'noChange'" class="data-total-trend data-total-trend-black" >
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
                 </div>
-              </div>
+              </template>
-
+              <template  v-else>
+                -
+              </template>
             </div>
           </div>
           <div class="kpi-type-value">
             <div class="kpi-type-value-name">{{$t('subscriber.packetLoss')}}</div>
             <div class="kpi-type-data" >
-              <div class="kpi-type-value-number" >{{unitConvert($_.get(kpiData, 'packetLoss'), unitTypes.percent).join(' ')}}</div>
+              <template v-if="$_.get(kpiData, 'packetLoss')">
-              <div class="data-trend">
+                <div class="kpi-type-value-number" >{{$_.get(kpiData, 'packetLoss') ? unitConvert($_.get(kpiData, 'packetLoss')[0], unitTypes.bps).join(' ') : '-'}}</div>
-
+                <div class="data-trend">
-                <div  class="data-total-trend data-total-trend-green">
+                  <div v-if="$_.get(kpiData, 'packetLoss')[1] === 'up'" class="data-total-trend data-total-trend-red" >
-                  <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                    <i class="cn-icon-rise1 cn-icon"></i><span>{{$_.get(kpiData, 'packetLoss')[2]}}</span>
-                  <span >66%</span>
+                  </div>
+                  <div v-else-if=" $_.get(kpiData, 'packetLoss')[1] === 'down'" class="data-total-trend data-total-trend-green" >
+                    <i class="cn-icon-decline cn-icon"></i><span>{{$_.get(kpiData, 'packetLoss')[2]}}</span>
+                  </div>
+                  <div v-else-if=" $_.get(kpiData, 'packetLoss')[1] === 'noChange'" class="data-total-trend data-total-trend-black" >
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
                 </div>
-              </div>
+              </template>
-
+              <template  v-else>
+                -
+              </template>
             </div>
           </div>
         </div>
@@ -90,7 +122,7 @@ import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants'
-import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { overwriteUrl, urlParamsHandler, getChainRatio } from '@/utils/tools'
 import axios from 'axios'
 import { useRoute } from 'vue-router'
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -131,10 +163,11 @@ export default {
   data () {
     return {
       kpiData: {
-        volume: 5300000000,
+        volume: [5300000000, 'up', '6%'],
-        throughput: 600000,
+        throughput: [600000, 'noChange', '6%'],
-        latency: 21,
+        httpLatency: [21, 'down', '6%'],
-        packetLoss: 0.0192
+        sslLatency: [21, 'down', '6%'],
+        packetLoss: [0.0192, 'down', '2%']
       },
       unitConvert,
       unitTypes,
@@ -151,25 +184,100 @@ export default {
     }
   },
   methods: {
-    init (val, show, active, n) {
+    handleTrendData (curData, preData) {
+      let trend = ''
+      let trendPercent = ''
+      const totalDiff = curData - preData
+      const chainRatio = getChainRatio(curData, preData)
+      if (chainRatio !== '-') {
+        trendPercent = parseFloat(Math.abs(chainRatio) * 100).toFixed(2)
+        if (totalDiff > 0) {
+          trend = 'up'
+          if (trendPercent <= 500) {
+            trendPercent = trendPercent + '%'
+          } else {
+            trendPercent = '>500%'
+          }
+        } else if (totalDiff < 0) {
+          trend = 'down'
+          if (trendPercent <= 500) {
+            trendPercent = trendPercent + '%'
+          } else {
+            trendPercent = '>500%'
+          }
+        } else if (totalDiff === 0) {
+          trend = 'noChange'// 横向图标
+        } else {
+          trend = ''
+        }
+        if (trendPercent === '0%') {
+          trend = 'noChange'
+          trendPercent = ''
+        }
+      }
+      return [curData, trend, trendPercent]
+    },
+    init () {
       const params = {
         resource: this.entity.entityName,
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
-
+      const preParams = {
-      if (this.queryCondition) {
+        resource: this.entity.entityName,
-        // params.q = this.queryCondition
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        cycle: 1
       }
 
       this.toggleLoading(true)
-      axios.get(`${api.entity.throughput}/${this.entity.entityType}`, { params: params }).then(response => {
+
+      axios.get(api.entity.subscriberKpi, { params: params }).then(response => {
         const res = response.data
         if (response.status === 200) {
-          this.isNoData = res.data.result.length === 0
+          const data = res.data
+          this.isNoData = Object.keys(data).length === 0
           this.showError = false
           if (!this.isNoData) {
-            this.kpiData = res.data.result
+            this.kpiData = {
+              volume: [data ? data.total_bytes : '', '', ''],
+              throughput: [data ? data.avg_bits_per_sec : '', '', ''],
+              httpLatency: [data ? data.avg_http_response_latency_ms : '', '', ''],
+              sslLatency: [data ? data.avg_ssl_handshake_latency_ms : '', '', ''],
+              packetLoss: [data ? data.tcp_lost_bytes_ratio : '', '', '']
+            }
+
+            axios.get(api.entity.subscriberKpi, { params: preParams }).then(preCycleRes => {
+              const preRes = preCycleRes.data
+              if (preCycleRes.status === 200) {
+                const data = preRes.data
+                if (Object.keys(data).length > 0) {
+                  const preVolume = data ? data.avg_bits_per_sec : ''
+                  const preThroughput = data ? data.total_bytes : ''
+                  const preHttpLatency = data ? data.avg_http_response_latency_ms : ''
+                  const preSslLatency = data ? data.avg_ssl_handshake_latency_ms : ''
+                  const prePacketLoss = data ? data.tcp_lost_bytes_ratio : ''
+
+                  if (this.kpiData.volume[0] !== '' && preVolume !== '') {
+                    this.kpiData.volume = this.handleTrendData(this.kpiData.volume[0], preVolume)
+                  }
+                  if (this.kpiData.throughput[0] !== '' && preThroughput !== '') {
+                    this.kpiData.throughput = this.handleTrendData(this.kpiData.throughput[0], preThroughput)
+                  }
+                  if (this.kpiData.httpLatency[0] !== '' && preHttpLatency !== '') {
+                    this.kpiData.httpLatency = this.handleTrendData(this.kpiData.httpLatency[0], preHttpLatency)
+                  }
+                  if (this.kpiData.sslLatency[0] !== '' && preSslLatency !== '') {
+                    this.kpiData.sslLatency = this.handleTrendData(this.kpiData.sslLatency[0], preSslLatency)
+                  }
+                  if (this.kpiData.packetLoss[0] !== '' && prePacketLoss !== '') {
+                    this.kpiData.packetLoss = this.handleTrendData(this.kpiData.packetLoss[0], prePacketLoss)
+                  }
+                }
+              } else {
+                this.httpError(res)
+              }
+            })
           }
         } else {
           this.httpError(res)
@@ -179,8 +287,6 @@ export default {
         this.httpError(e)
       }).finally(() => {
         this.toggleLoading(false)
-        // 测试代码
-        // this.isNoData = false
       })
     },
     httpError (e) {