简柏林 / 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,6 +79,7 @@ interface TrendParamsType {
79 | 'CUSTOMER_TREND' 79 | 'CUSTOMER_TREND'
80 | 'TENANT_TREND' 80 | 'TENANT_TREND'
81 | 'CUSTOMER_MESSAGE_STATISTICAL' 81 | 'CUSTOMER_MESSAGE_STATISTICAL'
  82 + | 'CUSTOMER_ALARM_STATISTICAL'
82 | 'CUSTOMER_MESSAGE_STATISTICAL'; 83 | 'CUSTOMER_MESSAGE_STATISTICAL';
83 } 84 }
84 // 获取租户趋势或者客户趋势数据 85 // 获取租户趋势或者客户趋势数据
@@ -10,15 +10,15 @@ @@ -10,15 +10,15 @@
10 <div class="extra-date"> 10 <div class="extra-date">
11 <template v-for="(item, index) in dateList" :key="item.value"> 11 <template v-for="(item, index) in dateList" :key="item.value">
12 <span 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 :class="{ active: index === activeIndex }" 16 :class="{ active: index === activeIndex }"
15 >{{ item.label }}</span 17 >{{ item.label }}</span
16 > 18 >
17 </template> 19 </template>
18 <DatePicker 20 <DatePicker
19 - @change="  
20 - (_, DateString) => onDateChange(_, DateString, role === 'CUSTOMER_USER' && 'customer')  
21 - " 21 + @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)"
22 v-model:value="dateValue" 22 v-model:value="dateValue"
23 /> 23 />
24 </div> 24 </div>
@@ -102,7 +102,7 @@ @@ -102,7 +102,7 @@
102 import { Card, DatePicker } from 'ant-design-vue'; 102 import { Card, DatePicker } from 'ant-design-vue';
103 import VisitAnalysis from './VisitAnalysis.vue'; 103 import VisitAnalysis from './VisitAnalysis.vue';
104 import VisitAnalysisBar from './VisitAnalysisBar.vue'; 104 import VisitAnalysisBar from './VisitAnalysisBar.vue';
105 - import { isAdmin } from '/@/enums/roleEnum'; 105 + import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
106 import { useWebSocket } from '@vueuse/core'; 106 import { useWebSocket } from '@vueuse/core';
107 import { getAuthCache } from '/@/utils/auth'; 107 import { getAuthCache } from '/@/utils/auth';
108 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; 108 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
@@ -137,10 +137,10 @@ @@ -137,10 +137,10 @@
137 const activeIndex = ref(3); 137 const activeIndex = ref(3);
138 const dateValue = ref(); 138 const dateValue = ref();
139 const dateList = ref([ 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 // web Socket 146 // web Socket
@@ -354,17 +354,16 @@ @@ -354,17 +354,16 @@
354 send(sendValue); 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 activeIndex.value = -1; 358 activeIndex.value = -1;
360 const dateTime = Number(formatToDateTime(dateString, 'x')); 359 const dateTime = Number(formatToDateTime(dateString, 'x'));
361 if (!dateString) return; 360 if (!dateString) return;
362 - if (roleType === 'customer') { 361 + if (isCustomer) {
363 if (activeKey.value === '1') { 362 if (activeKey.value === '1') {
364 const data = await getTrendData({ 363 const data = await getTrendData({
365 startTs: dateTime, 364 startTs: dateTime,
366 endTs: dateTime + 86400000, 365 endTs: dateTime + 86400000,
367 - interval: 7200000, 366 + interval: 1000 * 60 * 30,
368 trend: 'CUSTOMER_ALARM_STATISTICAL', 367 trend: 'CUSTOMER_ALARM_STATISTICAL',
369 }); 368 });
370 customerAlarmList.value = data; 369 customerAlarmList.value = data;
@@ -372,7 +371,7 @@ @@ -372,7 +371,7 @@
372 const data = await getTrendData({ 371 const data = await getTrendData({
373 startTs: dateTime, 372 startTs: dateTime,
374 endTs: dateTime + 86400000, 373 endTs: dateTime + 86400000,
375 - interval: 7200000, 374 + interval: 1000 * 60 * 30,
376 trend: 'CUSTOMER_MESSAGE_STATISTICAL', 375 trend: 'CUSTOMER_MESSAGE_STATISTICAL',
377 }); 376 });
378 customerMessageList.value = data; 377 customerMessageList.value = data;
@@ -390,7 +389,7 @@ @@ -390,7 +389,7 @@
390 : ['transportMsgCountHourly', 'transportDataPointsCountHourly'], 389 : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
391 startTs: dateTime, 390 startTs: dateTime,
392 endTs: dateTime + 86400000, 391 endTs: dateTime + 86400000,
393 - interval: 7200000, 392 + interval: 1000 * 60 * 30,
394 limit: 12, 393 limit: 12,
395 agg: 'SUM', 394 agg: 'SUM',
396 }, 395 },
@@ -403,17 +402,16 @@ @@ -403,17 +402,16 @@
403 const customerAlarmList = ref([]); 402 const customerAlarmList = ref([]);
404 const customerMessageList = ref([]); 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 if (activeIndex.value === index) return; 411 if (activeIndex.value === index) return;
408 activeIndex.value = index; 412 activeIndex.value = index;
409 dateValue.value = ''; 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 if (activeKey.value === '1') { 415 if (activeKey.value === '1') {
418 const data = await getTrendData({ 416 const data = await getTrendData({
419 startTs: Date.now() - value, 417 startTs: Date.now() - value,
@@ -6,19 +6,45 @@ @@ -6,19 +6,45 @@
6 @tabChange="onTabChange" 6 @tabChange="onTabChange"
7 v-if="!isAdmin(role)" 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 <template #tabBarExtraContent> 22 <template #tabBarExtraContent>
10 <div class="extra-date"> 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 <template v-for="(item, index) in dateList" :key="item.value"> 37 <template v-for="(item, index) in dateList" :key="item.value">
12 <span 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 :class="{ active: index === activeIndex }" 42 :class="{ active: index === activeIndex }"
15 >{{ item.label }}</span 43 >{{ item.label }}</span
16 > 44 >
17 </template> 45 </template>
18 <DatePicker 46 <DatePicker
19 - @change="  
20 - (_, DateString) => onDateChange(_, DateString, role === 'CUSTOMER_USER' && 'customer')  
21 - " 47 + @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)"
22 v-model:value="dateValue" 48 v-model:value="dateValue"
23 /> 49 />
24 </div> 50 </div>
@@ -98,10 +124,11 @@ @@ -98,10 +124,11 @@
98 </template> 124 </template>
99 <script lang="ts" setup> 125 <script lang="ts" setup>
100 import { ref, reactive } from 'vue'; 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 // import VisitAnalysis from './VisitAnalysis.vue'; 129 // import VisitAnalysis from './VisitAnalysis.vue';
103 import VisitAnalysisBar from './VisitAnalysisBar.vue'; 130 import VisitAnalysisBar from './VisitAnalysisBar.vue';
104 - import { isAdmin } from '/@/enums/roleEnum'; 131 + import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
105 import { useWebSocket } from '@vueuse/core'; 132 import { useWebSocket } from '@vueuse/core';
106 import { getAuthCache } from '/@/utils/auth'; 133 import { getAuthCache } from '/@/utils/auth';
107 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; 134 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
@@ -129,17 +156,19 @@ @@ -129,17 +156,19 @@
129 // }, 156 // },
130 { 157 {
131 key: '2', 158 key: '2',
132 - tab: '消息量统计', 159 + // tab: '消息量统计',
  160 + slots: { tab: 'messageStatistics' },
133 }, 161 },
134 ]; 162 ];
  163 +
135 // 快速选择日期 164 // 快速选择日期
136 const activeIndex = ref(3); 165 const activeIndex = ref(3);
137 const dateValue = ref(); 166 const dateValue = ref();
138 const dateList = ref([ 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 // web Socket 174 // web Socket
@@ -359,17 +388,16 @@ @@ -359,17 +388,16 @@
359 send(sendValue); 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 activeIndex.value = -1; 392 activeIndex.value = -1;
365 const dateTime = Number(formatToDateTime(dateString, 'x')); 393 const dateTime = Number(formatToDateTime(dateString, 'x'));
366 if (!dateString) return; 394 if (!dateString) return;
367 - if (roleType === 'customer') { 395 + if (isCustomer) {
368 if (activeKey.value === '1') { 396 if (activeKey.value === '1') {
369 const data = await getTrendData({ 397 const data = await getTrendData({
370 startTs: dateTime, 398 startTs: dateTime,
371 endTs: dateTime + 86400000, 399 endTs: dateTime + 86400000,
372 - interval: 7200000, 400 + interval: 1000 * 60 * 30,
373 trend: 'CUSTOMER_ALARM_STATISTICAL', 401 trend: 'CUSTOMER_ALARM_STATISTICAL',
374 }); 402 });
375 customerAlarmList.value = data; 403 customerAlarmList.value = data;
@@ -377,7 +405,7 @@ @@ -377,7 +405,7 @@
377 const data = await getTrendData({ 405 const data = await getTrendData({
378 startTs: dateTime, 406 startTs: dateTime,
379 endTs: dateTime + 86400000, 407 endTs: dateTime + 86400000,
380 - interval: 7200000, 408 + interval: 1000 * 60 * 30,
381 trend: 'CUSTOMER_MESSAGE_STATISTICAL', 409 trend: 'CUSTOMER_MESSAGE_STATISTICAL',
382 }); 410 });
383 customerMessageList.value = data; 411 customerMessageList.value = data;
@@ -395,7 +423,7 @@ @@ -395,7 +423,7 @@
395 : ['transportMsgCountHourly', 'transportDataPointsCountHourly'], 423 : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
396 startTs: dateTime, 424 startTs: dateTime,
397 endTs: dateTime + 86400000, 425 endTs: dateTime + 86400000,
398 - interval: 7200000, 426 + interval: 1000 * 60 * 30,
399 limit: 12, 427 limit: 12,
400 agg: 'SUM', 428 agg: 'SUM',
401 }, 429 },
@@ -408,17 +436,17 @@ @@ -408,17 +436,17 @@
408 const customerAlarmList = ref([]); 436 const customerAlarmList = ref([]);
409 const customerMessageList = ref([]); 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 if (activeIndex.value === index) return; 445 if (activeIndex.value === index) return;
413 activeIndex.value = index; 446 activeIndex.value = index;
414 dateValue.value = ''; 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 if (activeKey.value === '1') { 450 if (activeKey.value === '1') {
423 const data = await getTrendData({ 451 const data = await getTrendData({
424 startTs: Date.now() - value, 452 startTs: Date.now() - value,
@@ -44,7 +44,7 @@ @@ -44,7 +44,7 @@
44 type: 'time', 44 type: 'time',
45 }, 45 },
46 legend: { 46 legend: {
47 - data: ['传输数据点', '传输消息量'], 47 + data: ['总计传输数据点', '总计传输消息量'],
48 left: 'center', 48 left: 'center',
49 formatter: (name) => { 49 formatter: (name) => {
50 return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`; 50 return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
@@ -60,7 +60,7 @@ @@ -60,7 +60,7 @@
60 }, 60 },
61 series: [ 61 series: [
62 { 62 {
63 - name: '传输数据点', 63 + name: '总计传输数据点',
64 type: 'line', 64 type: 'line',
65 stack: 'total', 65 stack: 'total',
66 data: props.dataPointList, 66 data: props.dataPointList,
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 color: '#5AEEED', 68 color: '#5AEEED',
69 }, 69 },
70 { 70 {
71 - name: '传输消息量', 71 + name: '总计传输消息量',
72 type: 'line', 72 type: 'line',
73 stack: 'total', 73 stack: 'total',
74 // barWidth: '10%', 74 // barWidth: '10%',