简柏林 / thingskit-front · Commits

Commit 4e83af3f1a62f204036fc5bc1919d3c8f2626be7

Authored by ww
1 parent b3cd785a

perf: 优化首页消息量统计

Inline Side-by-side
Showing 4 changed files with 78 additions and 51 deletions
... ... @@ -79,6 +79,7 @@ interface TrendParamsType {
79 79 | 'CUSTOMER_TREND'
80 80 | 'TENANT_TREND'
81 81 | 'CUSTOMER_MESSAGE_STATISTICAL'
  82 + | 'CUSTOMER_ALARM_STATISTICAL'
82 83 | 'CUSTOMER_MESSAGE_STATISTICAL';
83 84 }
84 85 // 获取租户趋势或者客户趋势数据
... ...
... ... @@ -10,15 +10,15 @@
10 10 <div class="extra-date">
11 11 <template v-for="(item, index) in dateList" :key="item.value">
12 12 <span
13   - @click="quickQueryDate(index, item.value, role === 'CUSTOMER_USER' && 'customer')"
  13 + @click="
  14 + quickQueryDate(index, item.value, role === RoleEnum.CUSTOMER_USER, item.interval)
  15 + "
14 16 :class="{ active: index === activeIndex }"
15 17 >{{ item.label }}</span
16 18 >
17 19 </template>
18 20 <DatePicker
19   - @change="
20   - (_, DateString) => onDateChange(_, DateString, role === 'CUSTOMER_USER' && 'customer')
21   - "
  21 + @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)"
22 22 v-model:value="dateValue"
23 23 />
24 24 </div>
... ... @@ -102,7 +102,7 @@
102 102 import { Card, DatePicker } from 'ant-design-vue';
103 103 import VisitAnalysis from './VisitAnalysis.vue';
104 104 import VisitAnalysisBar from './VisitAnalysisBar.vue';
105   - import { isAdmin } from '/@/enums/roleEnum';
  105 + import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
106 106 import { useWebSocket } from '@vueuse/core';
107 107 import { getAuthCache } from '/@/utils/auth';
108 108 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
... ... @@ -137,10 +137,10 @@
137 137 const activeIndex = ref(3);
138 138 const dateValue = ref();
139 139 const dateList = ref([
140   - { label: '1小时', value: 3600000 },
141   - { label: '1天', value: 86400000 },
142   - { label: '7天', value: 604800000 },
143   - { label: '30天', value: 2592000000 },
  140 + { label: '1小时', value: 1000 * 60 * 60, interval: 1000 * 60 * 5 },
  141 + { label: '1天', value: 1000 * 60 * 60 * 24, interval: 1000 * 60 * 30 },
  142 + { label: '7天', value: 1000 * 60 * 60 * 24 * 7, interval: 1000 * 60 * 60 * 2 },
  143 + { label: '30天', value: 1000 * 60 * 60 * 24 * 30, interval: 1000 * 60 * 60 * 24 },
144 144 ]);
145 145
146 146 // web Socket
... ... @@ -354,17 +354,16 @@
354 354 send(sendValue);
355 355 }
356 356 // 选择日期
357   - async function onDateChange(_, dateString, roleType = '') {
358   - console.log(_, dateString, roleType);
  357 + async function onDateChange(_, dateString, isCustomer: boolean) {
359 358 activeIndex.value = -1;
360 359 const dateTime = Number(formatToDateTime(dateString, 'x'));
361 360 if (!dateString) return;
362   - if (roleType === 'customer') {
  361 + if (isCustomer) {
363 362 if (activeKey.value === '1') {
364 363 const data = await getTrendData({
365 364 startTs: dateTime,
366 365 endTs: dateTime + 86400000,
367   - interval: 7200000,
  366 + interval: 1000 * 60 * 30,
368 367 trend: 'CUSTOMER_ALARM_STATISTICAL',
369 368 });
370 369 customerAlarmList.value = data;
... ... @@ -372,7 +371,7 @@
372 371 const data = await getTrendData({
373 372 startTs: dateTime,
374 373 endTs: dateTime + 86400000,
375   - interval: 7200000,
  374 + interval: 1000 * 60 * 30,
376 375 trend: 'CUSTOMER_MESSAGE_STATISTICAL',
377 376 });
378 377 customerMessageList.value = data;
... ... @@ -390,7 +389,7 @@
390 389 : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
391 390 startTs: dateTime,
392 391 endTs: dateTime + 86400000,
393   - interval: 7200000,
  392 + interval: 1000 * 60 * 30,
394 393 limit: 12,
395 394 agg: 'SUM',
396 395 },
... ... @@ -403,17 +402,16 @@
403 402 const customerAlarmList = ref([]);
404 403 const customerMessageList = ref([]);
405 404 // 快速选择时间
406   - async function quickQueryDate(index: number, value: number, roleType = '') {
  405 + async function quickQueryDate(
  406 + index: number,
  407 + value: number,
  408 + isCustomer: boolean,
  409 + interval: number
  410 + ) {
407 411 if (activeIndex.value === index) return;
408 412 activeIndex.value = index;
409 413 dateValue.value = '';
410   - let interval = 300000;
411   - if (value === 86400000) {
412   - interval = 7200000;
413   - } else if (value === 604800000 || value === 2592000000) {
414   - interval = 86400000;
415   - }
416   - if (roleType === 'customer') {
  414 + if (isCustomer) {
417 415 if (activeKey.value === '1') {
418 416 const data = await getTrendData({
419 417 startTs: Date.now() - value,
... ...
... ... @@ -6,19 +6,45 @@
6 6 @tabChange="onTabChange"
7 7 v-if="!isAdmin(role)"
8 8 >
  9 + <template #messageStatistics>
  10 + <span>消息量统计</span>
  11 + <Tooltip>
  12 + <template #title>
  13 + <div>传输消息量: 即设备上报的消息数量,设备每上报一次数据量+1.</div>
  14 + <div class="mt-1">
  15 + 传输数据点:
  16 + 即设备每次上报的消息所包含的数据点,例如一条直连设备消息包含以下内容:{"ph":7,"humidity":65},则此消息有两个数据点.
  17 + </div>
  18 + </template>
  19 + <QuestionCircleOutlined class="ml-2" />
  20 + </Tooltip>
  21 + </template>
9 22 <template #tabBarExtraContent>
10 23 <div class="extra-date">
  24 + <Tooltip>
  25 + <template #title>
  26 + <div> 30天: 查询最近30天的数据,间隔时间为1天.</div>
  27 + <div>7天: 查询最近7天的数据,间隔时间为2小时.</div>
  28 + <div>1天: 查询最近1天的数据,间隔时间为30分钟.</div>
  29 + <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div>
  30 + <div>
  31 + 间隔时间:
  32 + 以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
  33 + </div>
  34 + </template>
  35 + <QuestionCircleOutlined class="!mr-1" />
  36 + </Tooltip>
11 37 <template v-for="(item, index) in dateList" :key="item.value">
12 38 <span
13   - @click="quickQueryDate(index, item.value, role === 'CUSTOMER_USER' && 'customer')"
  39 + @click="
  40 + quickQueryDate(index, item.value, role === RoleEnum.CUSTOMER_USER, item.interval)
  41 + "
14 42 :class="{ active: index === activeIndex }"
15 43 >{{ item.label }}</span
16 44 >
17 45 </template>
18 46 <DatePicker
19   - @change="
20   - (_, DateString) => onDateChange(_, DateString, role === 'CUSTOMER_USER' && 'customer')
21   - "
  47 + @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)"
22 48 v-model:value="dateValue"
23 49 />
24 50 </div>
... ... @@ -98,10 +124,11 @@
98 124 </template>
99 125 <script lang="ts" setup>
100 126 import { ref, reactive } from 'vue';
101   - import { Card, DatePicker } from 'ant-design-vue';
  127 + import { Card, DatePicker, Tooltip } from 'ant-design-vue';
  128 + import { QuestionCircleOutlined } from '@ant-design/icons-vue';
102 129 // import VisitAnalysis from './VisitAnalysis.vue';
103 130 import VisitAnalysisBar from './VisitAnalysisBar.vue';
104   - import { isAdmin } from '/@/enums/roleEnum';
  131 + import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
105 132 import { useWebSocket } from '@vueuse/core';
106 133 import { getAuthCache } from '/@/utils/auth';
107 134 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
... ... @@ -129,17 +156,19 @@
129 156 // },
130 157 {
131 158 key: '2',
132   - tab: '消息量统计',
  159 + // tab: '消息量统计',
  160 + slots: { tab: 'messageStatistics' },
133 161 },
134 162 ];
  163 +
135 164 // 快速选择日期
136 165 const activeIndex = ref(3);
137 166 const dateValue = ref();
138 167 const dateList = ref([
139   - { label: '1小时', value: 3600000 },
140   - { label: '1天', value: 86400000 },
141   - { label: '7天', value: 604800000 },
142   - { label: '30天', value: 2592000000 },
  168 + { label: '1小时', value: 1000 * 60 * 60, interval: 1000 * 60 * 5 },
  169 + { label: '1天', value: 1000 * 60 * 60 * 24, interval: 1000 * 60 * 30 },
  170 + { label: '7天', value: 1000 * 60 * 60 * 24 * 7, interval: 1000 * 60 * 60 * 2 },
  171 + { label: '30天', value: 1000 * 60 * 60 * 24 * 30, interval: 1000 * 60 * 60 * 24 },
143 172 ]);
144 173
145 174 // web Socket
... ... @@ -359,17 +388,16 @@
359 388 send(sendValue);
360 389 }
361 390 // 选择日期
362   - async function onDateChange(_, dateString, roleType = '') {
363   - console.log(_, dateString, roleType);
  391 + async function onDateChange(_, dateString, isCustomer: boolean) {
364 392 activeIndex.value = -1;
365 393 const dateTime = Number(formatToDateTime(dateString, 'x'));
366 394 if (!dateString) return;
367   - if (roleType === 'customer') {
  395 + if (isCustomer) {
368 396 if (activeKey.value === '1') {
369 397 const data = await getTrendData({
370 398 startTs: dateTime,
371 399 endTs: dateTime + 86400000,
372   - interval: 7200000,
  400 + interval: 1000 * 60 * 30,
373 401 trend: 'CUSTOMER_ALARM_STATISTICAL',
374 402 });
375 403 customerAlarmList.value = data;
... ... @@ -377,7 +405,7 @@
377 405 const data = await getTrendData({
378 406 startTs: dateTime,
379 407 endTs: dateTime + 86400000,
380   - interval: 7200000,
  408 + interval: 1000 * 60 * 30,
381 409 trend: 'CUSTOMER_MESSAGE_STATISTICAL',
382 410 });
383 411 customerMessageList.value = data;
... ... @@ -395,7 +423,7 @@
395 423 : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
396 424 startTs: dateTime,
397 425 endTs: dateTime + 86400000,
398   - interval: 7200000,
  426 + interval: 1000 * 60 * 30,
399 427 limit: 12,
400 428 agg: 'SUM',
401 429 },
... ... @@ -408,17 +436,17 @@
408 436 const customerAlarmList = ref([]);
409 437 const customerMessageList = ref([]);
410 438 // 快速选择时间
411   - async function quickQueryDate(index: number, value: number, roleType = '') {
  439 + async function quickQueryDate(
  440 + index: number,
  441 + value: number,
  442 + isCustomer: boolean,
  443 + interval: number
  444 + ) {
412 445 if (activeIndex.value === index) return;
413 446 activeIndex.value = index;
414 447 dateValue.value = '';
415   - let interval = 300000;
416   - if (value === 86400000) {
417   - interval = 7200000;
418   - } else if (value === 604800000 || value === 2592000000) {
419   - interval = 86400000;
420   - }
421   - if (roleType === 'customer') {
  448 + console.log(interval);
  449 + if (isCustomer) {
422 450 if (activeKey.value === '1') {
423 451 const data = await getTrendData({
424 452 startTs: Date.now() - value,
... ...
... ... @@ -44,7 +44,7 @@
44 44 type: 'time',
45 45 },
46 46 legend: {
47   - data: ['传输数据点', '传输消息量'],
  47 + data: ['总计传输数据点', '总计传输消息量'],
48 48 left: 'center',
49 49 formatter: (name) => {
50 50 return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
... ... @@ -60,7 +60,7 @@
60 60 },
61 61 series: [
62 62 {
63   - name: '传输数据点',
  63 + name: '总计传输数据点',
64 64 type: 'line',
65 65 stack: 'total',
66 66 data: props.dataPointList,
... ... @@ -68,7 +68,7 @@
68 68 color: '#5AEEED',
69 69 },
70 70 {
71   - name: '传输消息量',
  71 + name: '总计传输消息量',
72 72 type: 'line',
73 73 stack: 'total',
74 74 // barWidth: '10%',
... ...