diff --git a/src/assets/css/components/components/common/TimeRange/date-time-range.scss b/src/assets/css/components/components/common/TimeRange/date-time-range.scss index 70cf12b3..6df8ded9 100644 --- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss +++ b/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; + } +} diff --git a/src/assets/css/components/views/charts2/EntityDetailSubscriberKpi.scss b/src/assets/css/components/views/charts2/EntityDetailSubscriberKpi.scss index 120f8c82..11150bf3 100644 --- a/src/assets/css/components/views/charts2/EntityDetailSubscriberKpi.scss +++ b/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 @@ } } } - - } } } diff --git a/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss b/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss index 2249131b..b833154e 100644 --- a/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss +++ b/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; diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue index 979ebf13..259f0b67 100644 --- a/src/components/common/TimeRange/DateTimeRange.vue +++ b/src/components/common/TimeRange/DateTimeRange.vue @@ -15,20 +15,22 @@ -
+
{{$t('dateTime.absoluteTimeRange')}}
@@ -70,7 +72,7 @@ - + {{ address }} {{ utcStr }} @@ -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, diff --git a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue index 261e6f4e..db0ecebe 100644 --- a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue +++ b/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" />
- +
{{$t('subscriber.volume')}}
-
- {{unitConvert($_.get(kpiData, 'volume'), unitTypes.number).join(' ')}} -
- -
-
-   - 32% + +
{{$t('subscriber.throughput')}}
-
{{unitConvert($_.get(kpiData, 'throughput'), unitTypes.bps).join(' ')}}
-
- -
-   - 8% + +
-
{{$t('subscriber.latency')}}
-
{{unitConvert($_.get(kpiData, 'latency'), unitTypes.time).join(' ')}}
-
- -
- + +
{{$t('subscriber.packetLoss')}}
-
{{unitConvert($_.get(kpiData, 'packetLoss'), unitTypes.percent).join(' ')}}
-
- -
-   - 66% + +
@@ -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, - throughput: 600000, - latency: 21, - packetLoss: 0.0192 + volume: [5300000000, 'up', '6%'], + throughput: [600000, 'noChange', '6%'], + httpLatency: [21, 'down', '6%'], + 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) } - - if (this.queryCondition) { - // params.q = this.queryCondition + const preParams = { + resource: this.entity.entityName, + 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) {