Showing
4 changed files
with
39 additions
and
43 deletions
@@ -85,7 +85,7 @@ interface TrendParamsType { | @@ -85,7 +85,7 @@ interface TrendParamsType { | ||
85 | } | 85 | } |
86 | // 获取租户趋势或者客户趋势数据 | 86 | // 获取租户趋势或者客户趋势数据 |
87 | export const getTrendData = (params: TrendParamsType) => { | 87 | export const getTrendData = (params: TrendParamsType) => { |
88 | - return defHttp.get({ | 88 | + return defHttp.get<Record<'date' | 'value', string>[]>({ |
89 | url: HomeEnum.TrendAPI, | 89 | url: HomeEnum.TrendAPI, |
90 | params, | 90 | params, |
91 | }); | 91 | }); |
@@ -132,6 +132,9 @@ | @@ -132,6 +132,9 @@ | ||
132 | @calendarChange="handleCalendarChange" | 132 | @calendarChange="handleCalendarChange" |
133 | size="small" | 133 | size="small" |
134 | v-model:value="customerDateValue" | 134 | v-model:value="customerDateValue" |
135 | + :showTime="{ | ||
136 | + defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')], | ||
137 | + }" | ||
135 | > | 138 | > |
136 | <Button | 139 | <Button |
137 | type="link" | 140 | type="link" |
@@ -165,7 +168,7 @@ | @@ -165,7 +168,7 @@ | ||
165 | import { useWebSocket } from '@vueuse/core'; | 168 | import { useWebSocket } from '@vueuse/core'; |
166 | import { getAuthCache } from '/@/utils/auth'; | 169 | import { getAuthCache } from '/@/utils/auth'; |
167 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; | 170 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; |
168 | - import { formatToDateTime } from '/@/utils/dateUtil'; | 171 | + import { dateUtil, formatToDateTime } from '/@/utils/dateUtil'; |
169 | import CustomerTrend from './CustomerTrend.vue'; | 172 | import CustomerTrend from './CustomerTrend.vue'; |
170 | // import TenantTrend from './TenantTrend.vue'; | 173 | // import TenantTrend from './TenantTrend.vue'; |
171 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; | 174 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; |
@@ -530,6 +533,7 @@ | @@ -530,6 +533,7 @@ | ||
530 | }; | 533 | }; |
531 | 534 | ||
532 | const handleDisableDate = (current: moment.Moment) => { | 535 | const handleDisableDate = (current: moment.Moment) => { |
536 | + if (!current) return true; | ||
533 | if (!unref(customerDateValue) || unref(customerDateValue).length === 0) { | 537 | if (!unref(customerDateValue) || unref(customerDateValue).length === 0) { |
534 | return false; | 538 | return false; |
535 | } | 539 | } |
@@ -117,6 +117,9 @@ | @@ -117,6 +117,9 @@ | ||
117 | @calendarChange="handleCalendarChange" | 117 | @calendarChange="handleCalendarChange" |
118 | :disabledDate="handleDisableDate" | 118 | :disabledDate="handleDisableDate" |
119 | v-model:value="tenantDateValue" | 119 | v-model:value="tenantDateValue" |
120 | + :showTime="{ | ||
121 | + defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')], | ||
122 | + }" | ||
120 | > | 123 | > |
121 | <Button | 124 | <Button |
122 | type="link" | 125 | type="link" |
@@ -175,7 +178,7 @@ | @@ -175,7 +178,7 @@ | ||
175 | import { useWebSocket } from '@vueuse/core'; | 178 | import { useWebSocket } from '@vueuse/core'; |
176 | import { getAuthCache } from '/@/utils/auth'; | 179 | import { getAuthCache } from '/@/utils/auth'; |
177 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; | 180 | import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; |
178 | - import { formatToDateTime } from '/@/utils/dateUtil'; | 181 | + import { dateUtil, formatToDateTime } from '/@/utils/dateUtil'; |
179 | // import CustomerTrend from './CustomerTrend.vue'; | 182 | // import CustomerTrend from './CustomerTrend.vue'; |
180 | import TenantTrend from './TenantTrend.vue'; | 183 | import TenantTrend from './TenantTrend.vue'; |
181 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; | 184 | import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; |
@@ -548,6 +551,7 @@ | @@ -548,6 +551,7 @@ | ||
548 | }; | 551 | }; |
549 | 552 | ||
550 | const handleDisableDate = (current: moment.Moment) => { | 553 | const handleDisableDate = (current: moment.Moment) => { |
554 | + if (!current) return true; | ||
551 | if (!unref(tenantDateValue) || unref(tenantDateValue).length === 0) { | 555 | if (!unref(tenantDateValue) || unref(tenantDateValue).length === 0) { |
552 | return false; | 556 | return false; |
553 | } | 557 | } |
1 | -import { dateUtil, formatToDateTime } from '/@/utils/dateUtil'; | ||
2 | -import { ref } from 'vue'; | 1 | +import { dateUtil } from '/@/utils/dateUtil'; |
2 | +import { Ref, ref } from 'vue'; | ||
3 | import { getTrendData } from '/@/api/dashboard'; | 3 | import { getTrendData } from '/@/api/dashboard'; |
4 | import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface'; | 4 | import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface'; |
5 | +import moment from 'moment'; | ||
5 | 6 | ||
6 | export enum ShortcutQueryKeyEnum { | 7 | export enum ShortcutQueryKeyEnum { |
7 | LATEST_1_MONTH = 'LATEST_1_MONTH', | 8 | LATEST_1_MONTH = 'LATEST_1_MONTH', |
@@ -42,8 +43,8 @@ export function getDateByShortcutQueryKey(value: ShortcutQueryKeyEnum) { | @@ -42,8 +43,8 @@ export function getDateByShortcutQueryKey(value: ShortcutQueryKeyEnum) { | ||
42 | export function useDate() { | 43 | export function useDate() { |
43 | const tenantDateValue = ref([]); | 44 | const tenantDateValue = ref([]); |
44 | const customerDateValue = ref<RangePickerValue>([]); | 45 | const customerDateValue = ref<RangePickerValue>([]); |
45 | - const tenantTrendList = ref([]); | ||
46 | - const customerTrendList = ref([]); | 46 | + const tenantTrendList = ref<[string, string][]>([]); |
47 | + const customerTrendList = ref<[string, string][]>([]); | ||
47 | const activeTenantIndex = ref(0); | 48 | const activeTenantIndex = ref(0); |
48 | const activeCustomerIndex = ref(0); | 49 | const activeCustomerIndex = ref(0); |
49 | const TenantOrCustomerDateList = ref([ | 50 | const TenantOrCustomerDateList = ref([ |
@@ -80,52 +81,39 @@ export function useDate() { | @@ -80,52 +81,39 @@ export function useDate() { | ||
80 | } | 81 | } |
81 | 82 | ||
82 | // 获取选中的时间范围内的数据 | 83 | // 获取选中的时间范围内的数据 |
83 | - async function getDateData(startTs, endTs, trend: 'CUSTOMER_TREND' | 'TENANT_TREND', list) { | ||
84 | - // 计算时间间隔 | ||
85 | - function computedInterval(startTs: number, endTs: number) { | ||
86 | - /** | ||
87 | - * 选择的时间间隔 | ||
88 | - * <=1 2h | ||
89 | - * <=30 1day | ||
90 | - * >30<90 2day | ||
91 | - * >90 1month | ||
92 | - */ | ||
93 | - let interval = 86400000; | ||
94 | - if (endTs - startTs <= 86400000) { | ||
95 | - interval = 7200000; | ||
96 | - } else if (endTs - startTs <= 2592000000) { | ||
97 | - interval = 86400000; | ||
98 | - } else if (endTs - startTs > 2592000000 && endTs - startTs < 7776000000) { | ||
99 | - interval = 172800000; | ||
100 | - } else if (endTs - startTs > 7776000000) { | ||
101 | - interval = 2592000000; | ||
102 | - } | ||
103 | - return interval; | ||
104 | - } | ||
105 | - startTs = parseInt(formatToDateTime(startTs, 'x')) - 86400000; | ||
106 | - endTs = parseInt(formatToDateTime(endTs, 'x')); | 84 | + async function getDateData( |
85 | + startTs: moment.Moment, | ||
86 | + endTs: moment.Moment, | ||
87 | + trend: 'CUSTOMER_TREND' | 'TENANT_TREND', | ||
88 | + list: Ref<[string, string][]> | ||
89 | + ) { | ||
107 | const res = await getTrendData({ | 90 | const res = await getTrendData({ |
108 | - startTs, | ||
109 | - endTs, | ||
110 | - interval: computedInterval(startTs, endTs), | 91 | + startTs: startTs.valueOf(), |
92 | + endTs: endTs.valueOf(), | ||
93 | + interval: 24 * 60 * 60 * 1000, | ||
111 | trend, | 94 | trend, |
112 | }); | 95 | }); |
113 | - list.value = res.map((item) => [item.ts, item.value]); | 96 | + list.value = res.map((item) => [item.date, item.value]); |
114 | } | 97 | } |
115 | 98 | ||
116 | // 租户选择日期 | 99 | // 租户选择日期 |
117 | - function onDateTenantChange(_, dateString) { | ||
118 | - if (!_.length) return; | ||
119 | - const [startTs, endTs] = dateString; | 100 | + function onDateTenantChange(range: RangePickerValue) { |
101 | + if (!range.length) return; | ||
102 | + const [startTs, endTs] = range; | ||
120 | activeTenantIndex.value = -1; | 103 | activeTenantIndex.value = -1; |
121 | - getDateData(startTs, endTs, 'TENANT_TREND', tenantTrendList); | 104 | + getDateData(startTs as moment.Moment, endTs as moment.Moment, 'TENANT_TREND', tenantTrendList); |
122 | } | 105 | } |
123 | // 客户趋势选择日期 | 106 | // 客户趋势选择日期 |
124 | - function onDateCustomerChange(_, dateString) { | ||
125 | - if (!_.length) return; | ||
126 | - const [startTs, endTs] = dateString; | 107 | + function onDateCustomerChange(range: RangePickerValue) { |
108 | + if (!range.length) return; | ||
109 | + const [startTs, endTs] = range; | ||
127 | activeCustomerIndex.value = -1; | 110 | activeCustomerIndex.value = -1; |
128 | - getDateData(startTs, endTs, 'CUSTOMER_TREND', customerTrendList); | 111 | + getDateData( |
112 | + startTs as moment.Moment, | ||
113 | + endTs as moment.Moment, | ||
114 | + 'CUSTOMER_TREND', | ||
115 | + customerTrendList | ||
116 | + ); | ||
129 | } | 117 | } |
130 | return { | 118 | return { |
131 | tenantDateValue, | 119 | tenantDateValue, |