Showing
7 changed files
with
147 additions
and
93 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 | // 获取租户趋势或者客户趋势数据 |
| @@ -58,10 +58,10 @@ | @@ -58,10 +58,10 @@ | ||
| 58 | <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div> | 58 | <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div> |
| 59 | </div> | 59 | </div> |
| 60 | </div> | 60 | </div> |
| 61 | - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> | 61 | + <div v-if="!isAdmin(role)" class="pt-4" style="border-top: 2px solid #f0f2f5"> |
| 62 | 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div | 62 | 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div |
| 63 | > | 63 | > |
| 64 | - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> | 64 | + <div v-else class="pt-4" style="border-top: 2px solid #f0f2f5"> |
| 65 | 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div | 65 | 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div |
| 66 | > | 66 | > |
| 67 | </Card> | 67 | </Card> |
| @@ -92,7 +92,7 @@ | @@ -92,7 +92,7 @@ | ||
| 92 | <div> 设备数 </div> | 92 | <div> 设备数 </div> |
| 93 | </div> | 93 | </div> |
| 94 | </div> | 94 | </div> |
| 95 | - <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> | 95 | + <div class="pt-4" style="border-top: 2px solid #f0f2f5"> |
| 96 | 今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }} | 96 | 今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }} |
| 97 | </div> | 97 | </div> |
| 98 | </Card> | 98 | </Card> |
| @@ -143,10 +143,10 @@ | @@ -143,10 +143,10 @@ | ||
| 143 | <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div> | 143 | <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div> |
| 144 | </div> | 144 | </div> |
| 145 | </div> | 145 | </div> |
| 146 | - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> | 146 | + <div v-if="!isAdmin(role)" class="pt-4" style="border-top: 2px solid #f0f2f5"> |
| 147 | 今日新增 {{ toThousands(growCardList?.alarmInfo?.todayAdd) }}</div | 147 | 今日新增 {{ toThousands(growCardList?.alarmInfo?.todayAdd) }}</div |
| 148 | > | 148 | > |
| 149 | - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> | 149 | + <div v-else class="pt-4" style="border-top: 2px solid #f0f2f5"> |
| 150 | 今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div | 150 | 今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div |
| 151 | > | 151 | > |
| 152 | </Card> | 152 | </Card> |
| @@ -167,8 +167,8 @@ | @@ -167,8 +167,8 @@ | ||
| 167 | style="font-size: 1.625rem; color: #333; font-weight: bold" | 167 | style="font-size: 1.625rem; color: #333; font-weight: bold" |
| 168 | > | 168 | > |
| 169 | <CountTo | 169 | <CountTo |
| 170 | - v-if="growCardList?.messageInfo?.todayMessageAdd" | ||
| 171 | - :end-val="growCardList.messageInfo.todayMessageAdd" | 170 | + v-if="growCardList?.messageInfo?.messageCount" |
| 171 | + :end-val="growCardList.messageInfo.messageCount" | ||
| 172 | /> | 172 | /> |
| 173 | <CountTo v-else :end-val="0" /> | 173 | <CountTo v-else :end-val="0" /> |
| 174 | </div> | 174 | </div> |
| @@ -185,7 +185,44 @@ | @@ -185,7 +185,44 @@ | ||
| 185 | !isAdmin(role) | 185 | !isAdmin(role) |
| 186 | ? `今日消息数:${ | 186 | ? `今日消息数:${ |
| 187 | growCardList?.messageInfo?.todayMessageAdd | 187 | growCardList?.messageInfo?.todayMessageAdd |
| 188 | - } 近30日新增 ${toThousands(growCardList?.messageInfo?.messageCount)}` | 188 | + } 今日消息点数 ${toThousands( |
| 189 | + growCardList?.messageInfo?.todayDataPointsAdd | ||
| 190 | + )}` | ||
| 191 | + : `客户总量:${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands( | ||
| 192 | + growCardList?.customerInfo?.todayAdd | ||
| 193 | + )}` | ||
| 194 | + }} | ||
| 195 | + </template> | ||
| 196 | + <img | ||
| 197 | + v-if="isAdmin(role)" | ||
| 198 | + src="/src/assets/images/tip.png" | ||
| 199 | + style="width: 1.125rem; height: 1.125rem" | ||
| 200 | + /> | ||
| 201 | + </Tooltip> | ||
| 202 | + </div> | ||
| 203 | + <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div> | ||
| 204 | + </div> | ||
| 205 | + <div class="flex-auto" v-if="!isAdmin(role)"> | ||
| 206 | + <div class="flex justify-between" style="align-items: center"> | ||
| 207 | + <div | ||
| 208 | + v-if="!isAdmin(role)" | ||
| 209 | + style="font-size: 1.625rem; color: #333; font-weight: bold" | ||
| 210 | + > | ||
| 211 | + <CountTo | ||
| 212 | + v-if="growCardList?.messageInfo?.dataPointsCount" | ||
| 213 | + :end-val="growCardList.messageInfo.dataPointsCount" | ||
| 214 | + /> | ||
| 215 | + <CountTo v-else :end-val="0" /> | ||
| 216 | + </div> | ||
| 217 | + <Tooltip> | ||
| 218 | + <template #title> | ||
| 219 | + {{ | ||
| 220 | + !isAdmin(role) | ||
| 221 | + ? `今日消息数:${ | ||
| 222 | + growCardList?.messageInfo?.todayMessageAdd | ||
| 223 | + } 今日消息点数 ${toThousands( | ||
| 224 | + growCardList?.messageInfo?.todayDataPointsAdd | ||
| 225 | + )}` | ||
| 189 | : `客户总量:${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands( | 226 | : `客户总量:${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands( |
| 190 | growCardList?.customerInfo?.todayAdd | 227 | growCardList?.customerInfo?.todayAdd |
| 191 | )}` | 228 | )}` |
| @@ -194,15 +231,20 @@ | @@ -194,15 +231,20 @@ | ||
| 194 | <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" /> | 231 | <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" /> |
| 195 | </Tooltip> | 232 | </Tooltip> |
| 196 | </div> | 233 | </div> |
| 197 | - <div> {{ !isAdmin(role) ? `今日消息数` : '客户总量' }}</div> | 234 | + <div> {{ !isAdmin(role) ? `消息点数` : '' }}</div> |
| 198 | </div> | 235 | </div> |
| 199 | </div> | 236 | </div> |
| 200 | - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> | ||
| 201 | - 近30日新增 {{ toThousands(growCardList?.messageInfo?.messageCount) }}</div | ||
| 202 | - > | ||
| 203 | - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> | ||
| 204 | - 近30日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div | ||
| 205 | - > | 237 | + <div class="flex justify-between" style="border-top: 2px solid #f0f2f5"> |
| 238 | + <div v-if="!isAdmin(role)" class="pt-4"> | ||
| 239 | + 今日消息数 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div | ||
| 240 | + > | ||
| 241 | + <div v-if="!isAdmin(role)" class="pt-4"> | ||
| 242 | + 今日消息点数 {{ toThousands(growCardList?.messageInfo?.todayDataPointsAdd) }}</div | ||
| 243 | + > | ||
| 244 | + <div v-else class="pt-4"> | ||
| 245 | + 近30日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div | ||
| 246 | + > | ||
| 247 | + </div> | ||
| 206 | </Card> | 248 | </Card> |
| 207 | </div> | 249 | </div> |
| 208 | <!-- 首页饼图 --> | 250 | <!-- 首页饼图 --> |
| @@ -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%', |
| @@ -18,7 +18,6 @@ | @@ -18,7 +18,6 @@ | ||
| 18 | :treeData="treeData" | 18 | :treeData="treeData" |
| 19 | :replace-fields="{ title: 'name', key: 'id' }" | 19 | :replace-fields="{ title: 'name', key: 'id' }" |
| 20 | :checkedKeys="roleMenus" | 20 | :checkedKeys="roleMenus" |
| 21 | - @check="handleCheckClick" | ||
| 22 | title="菜单分配" | 21 | title="菜单分配" |
| 23 | /> | 22 | /> |
| 24 | </Spin> | 23 | </Spin> |
| @@ -31,7 +30,7 @@ | @@ -31,7 +30,7 @@ | ||
| 31 | import { BasicForm, useForm } from '/@/components/Form/index'; | 30 | import { BasicForm, useForm } from '/@/components/Form/index'; |
| 32 | import { formSchema, KeysTypeEnum, RoleMenuDictEnum } from './role.data'; | 31 | import { formSchema, KeysTypeEnum, RoleMenuDictEnum } from './role.data'; |
| 33 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | 32 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
| 34 | - import { BasicTree, TreeItem } from '/@/components/Tree'; | 33 | + import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree'; |
| 35 | import { useMessage } from '/@/hooks/web/useMessage'; | 34 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 36 | const { t } = useI18n(); //加载国际化 | 35 | const { t } = useI18n(); //加载国际化 |
| 37 | // 加载菜单数据 | 36 | // 加载菜单数据 |
| @@ -55,9 +54,8 @@ | @@ -55,9 +54,8 @@ | ||
| 55 | const isUpdate = ref<boolean>(true); | 54 | const isUpdate = ref<boolean>(true); |
| 56 | const treeData = ref<TreeData[]>([]); | 55 | const treeData = ref<TreeData[]>([]); |
| 57 | const roleMenus = ref<string[]>([]); | 56 | const roleMenus = ref<string[]>([]); |
| 58 | - const allCheckedKeys = ref<string[]>([]); | ||
| 59 | const roleId = ref<string>(''); | 57 | const roleId = ref<string>(''); |
| 60 | - const treeRef = ref(); | 58 | + const treeRef = ref<Nullable<TreeActionType>>(); |
| 61 | const checked = ref<string[]>([]); //需要选中的节点 | 59 | const checked = ref<string[]>([]); //需要选中的节点 |
| 62 | const spinning = ref(false); | 60 | const spinning = ref(false); |
| 63 | 61 | ||
| @@ -80,7 +78,6 @@ | @@ -80,7 +78,6 @@ | ||
| 80 | const { isTenantAdmin, isSysadmin, getRole } = useRole(); | 78 | const { isTenantAdmin, isSysadmin, getRole } = useRole(); |
| 81 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner( | 79 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner( |
| 82 | async (data: { isUpdate: boolean; record: RoleListItem }) => { | 80 | async (data: { isUpdate: boolean; record: RoleListItem }) => { |
| 83 | - allCheckedKeys.value = []; | ||
| 84 | resetFields(); | 81 | resetFields(); |
| 85 | roleId.value = ''; | 82 | roleId.value = ''; |
| 86 | // 在打开弹窗时清除所有选择的菜单 | 83 | // 在打开弹窗时清除所有选择的菜单 |
| @@ -129,10 +126,10 @@ | @@ -129,10 +126,10 @@ | ||
| 129 | roleId.value = data.record.id; | 126 | roleId.value = data.record.id; |
| 130 | 127 | ||
| 131 | //通过角色id去获取角色对应的菜单的ids | 128 | //通过角色id去获取角色对应的菜单的ids |
| 132 | - allCheckedKeys.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id); | 129 | + roleMenus.value = await getMenusIdsByRoleId(data.record.id); |
| 133 | excludeHalfCheckedKeys(unref(treeData)); | 130 | excludeHalfCheckedKeys(unref(treeData)); |
| 134 | await nextTick(); | 131 | await nextTick(); |
| 135 | - treeRef.value.setCheckedKeys(roleMenus.value); | 132 | + unref(treeRef)?.setCheckedKeys(roleMenus.value); |
| 136 | setFieldsValue(data.record); | 133 | setFieldsValue(data.record); |
| 137 | } else { | 134 | } else { |
| 138 | } | 135 | } |
| @@ -150,13 +147,14 @@ | @@ -150,13 +147,14 @@ | ||
| 150 | setDrawerProps({ confirmLoading: true }); | 147 | setDrawerProps({ confirmLoading: true }); |
| 151 | const { createMessage } = useMessage(); | 148 | const { createMessage } = useMessage(); |
| 152 | try { | 149 | try { |
| 150 | + const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || []; | ||
| 153 | const values = await validate(); | 151 | const values = await validate(); |
| 154 | const req = { | 152 | const req = { |
| 155 | id: roleId.value, | 153 | id: roleId.value, |
| 156 | name: values.name, | 154 | name: values.name, |
| 157 | remark: values.remark, | 155 | remark: values.remark, |
| 158 | status: values.status, | 156 | status: values.status, |
| 159 | - menu: unref(allCheckedKeys) || [], | 157 | + menu, |
| 160 | }; | 158 | }; |
| 161 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); | 159 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); |
| 162 | saveOrUpdateRoleInfoWithMenu(req).then(() => { | 160 | saveOrUpdateRoleInfoWithMenu(req).then(() => { |
| @@ -170,10 +168,6 @@ | @@ -170,10 +168,6 @@ | ||
| 170 | }, 300); | 168 | }, 300); |
| 171 | } | 169 | } |
| 172 | } | 170 | } |
| 173 | - // Tree check事件 | ||
| 174 | - const handleCheckClick = (checkedNodes, { halfCheckedKeys }) => { | ||
| 175 | - allCheckedKeys.value = [...checkedNodes, ...halfCheckedKeys]; | ||
| 176 | - }; | ||
| 177 | 171 | ||
| 178 | const getPermissionByRole = async (roleType: RoleEnum) => { | 172 | const getPermissionByRole = async (roleType: RoleEnum) => { |
| 179 | try { | 173 | try { |
| @@ -254,8 +248,6 @@ | @@ -254,8 +248,6 @@ | ||
| 254 | treeData, | 248 | treeData, |
| 255 | roleMenus, | 249 | roleMenus, |
| 256 | treeRef, | 250 | treeRef, |
| 257 | - handleCheckClick, | ||
| 258 | - allCheckedKeys, | ||
| 259 | }; | 251 | }; |
| 260 | }, | 252 | }, |
| 261 | }); | 253 | }); |
| @@ -15,7 +15,6 @@ | @@ -15,7 +15,6 @@ | ||
| 15 | :treeData="treeData" | 15 | :treeData="treeData" |
| 16 | :replaceFields="{ title: 'name', key: 'id' }" | 16 | :replaceFields="{ title: 'name', key: 'id' }" |
| 17 | :checkedKeys="roleMenus" | 17 | :checkedKeys="roleMenus" |
| 18 | - @check="handleCheckClick" | ||
| 19 | checkable | 18 | checkable |
| 20 | toolbar | 19 | toolbar |
| 21 | ref="treeRef" | 20 | ref="treeRef" |
| @@ -31,7 +30,7 @@ | @@ -31,7 +30,7 @@ | ||
| 31 | import { BasicForm, useForm } from '/@/components/Form/index'; | 30 | import { BasicForm, useForm } from '/@/components/Form/index'; |
| 32 | import { formSchema } from './role.data'; | 31 | import { formSchema } from './role.data'; |
| 33 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | 32 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
| 34 | - import { BasicTree, TreeItem } from '/@/components/Tree'; | 33 | + import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree'; |
| 35 | const { t } = useI18n(); //加载国际化 | 34 | const { t } = useI18n(); //加载国际化 |
| 36 | // 加载菜单数据 | 35 | // 加载菜单数据 |
| 37 | import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu'; | 36 | import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu'; |
| @@ -55,9 +54,8 @@ | @@ -55,9 +54,8 @@ | ||
| 55 | const isUpdate = ref(true); | 54 | const isUpdate = ref(true); |
| 56 | const treeData = ref<TreeData[]>([]); | 55 | const treeData = ref<TreeData[]>([]); |
| 57 | const roleMenus = ref<string[]>([]); | 56 | const roleMenus = ref<string[]>([]); |
| 58 | - const allCheckedKeys = ref<string[]>([]); | ||
| 59 | const roleId = ref(''); | 57 | const roleId = ref(''); |
| 60 | - const treeRef = ref(); | 58 | + const treeRef = ref<Nullable<TreeActionType>>(null); |
| 61 | const checked = ref<string[]>([]); //需要选中的节点 | 59 | const checked = ref<string[]>([]); //需要选中的节点 |
| 62 | const spinning = ref(false); | 60 | const spinning = ref(false); |
| 63 | 61 | ||
| @@ -79,7 +77,6 @@ | @@ -79,7 +77,6 @@ | ||
| 79 | 77 | ||
| 80 | const { isPlatformAdmin } = useRole(); | 78 | const { isPlatformAdmin } = useRole(); |
| 81 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { | 79 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
| 82 | - allCheckedKeys.value = []; | ||
| 83 | resetFields(); | 80 | resetFields(); |
| 84 | roleId.value = ''; | 81 | roleId.value = ''; |
| 85 | // 在打开弹窗时清除所有选择的菜单 | 82 | // 在打开弹窗时清除所有选择的菜单 |
| @@ -111,11 +108,11 @@ | @@ -111,11 +108,11 @@ | ||
| 111 | roleId.value = data.record.id; | 108 | roleId.value = data.record.id; |
| 112 | 109 | ||
| 113 | //通过角色id去获取角色对应的菜单的ids | 110 | //通过角色id去获取角色对应的菜单的ids |
| 114 | - allCheckedKeys.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id); | 111 | + roleMenus.value = await getMenusIdsByRoleId(data.record.id); |
| 115 | excludeHalfCheckedKeys(unref(treeData)); | 112 | excludeHalfCheckedKeys(unref(treeData)); |
| 116 | 113 | ||
| 117 | await nextTick(); | 114 | await nextTick(); |
| 118 | - treeRef.value.setCheckedKeys(roleMenus.value); | 115 | + treeRef.value?.setCheckedKeys(roleMenus.value); |
| 119 | setFieldsValue(data.record); | 116 | setFieldsValue(data.record); |
| 120 | } else { | 117 | } else { |
| 121 | } | 118 | } |
| @@ -131,6 +128,7 @@ | @@ -131,6 +128,7 @@ | ||
| 131 | setDrawerProps({ loading: true }); | 128 | setDrawerProps({ loading: true }); |
| 132 | setDrawerProps({ confirmLoading: true }); | 129 | setDrawerProps({ confirmLoading: true }); |
| 133 | const { createMessage } = useMessage(); | 130 | const { createMessage } = useMessage(); |
| 131 | + const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || []; | ||
| 134 | try { | 132 | try { |
| 135 | const values = await validate(); | 133 | const values = await validate(); |
| 136 | const req = { | 134 | const req = { |
| @@ -139,7 +137,7 @@ | @@ -139,7 +137,7 @@ | ||
| 139 | remark: values.remark, | 137 | remark: values.remark, |
| 140 | status: values.status, | 138 | status: values.status, |
| 141 | roleType: RoleEnum.TENANT_ADMIN, | 139 | roleType: RoleEnum.TENANT_ADMIN, |
| 142 | - menu: unref(allCheckedKeys) || [], | 140 | + menu, |
| 143 | }; | 141 | }; |
| 144 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); | 142 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); |
| 145 | const res = await saveOrUpdateRoleInfoWithMenu(req); | 143 | const res = await saveOrUpdateRoleInfoWithMenu(req); |
| @@ -157,10 +155,6 @@ | @@ -157,10 +155,6 @@ | ||
| 157 | }, 300); | 155 | }, 300); |
| 158 | } | 156 | } |
| 159 | } | 157 | } |
| 160 | - // Tree check事件 | ||
| 161 | - const handleCheckClick = (checkedNodes, { halfCheckedKeys }) => { | ||
| 162 | - allCheckedKeys.value = [...checkedNodes, ...halfCheckedKeys]; | ||
| 163 | - }; | ||
| 164 | 158 | ||
| 165 | const getPermissionByRole = async (roleType: RoleEnum) => { | 159 | const getPermissionByRole = async (roleType: RoleEnum) => { |
| 166 | try { | 160 | try { |
| @@ -241,7 +235,6 @@ | @@ -241,7 +235,6 @@ | ||
| 241 | treeData, | 235 | treeData, |
| 242 | roleMenus, | 236 | roleMenus, |
| 243 | treeRef, | 237 | treeRef, |
| 244 | - handleCheckClick, | ||
| 245 | }; | 238 | }; |
| 246 | }, | 239 | }, |
| 247 | }); | 240 | }); |