Commit ae2e546b2ea62cae5eb360648ce79c405c17915d

Authored by sqy
1 parent 39d018f8

'修改首页样式部分,修改部分图表,fix:修复token过期没有权限问题'

@@ -12,7 +12,7 @@ export default { @@ -12,7 +12,7 @@ export default {
12 networkExceptionMsg: 12 networkExceptionMsg:
13 'Please check if your network connection is normal! The network is abnormal', 13 'Please check if your network connection is normal! The network is abnormal',
14 14
15 - errMsg401: 'no permission', 15 + errMsg401: '',
16 errMsg403: 'not authorized', 16 errMsg403: 'not authorized',
17 errMsg404: 'the resource was not found!', 17 errMsg404: 'the resource was not found!',
18 errMsg405: 'Network request error, request method not allowed!', 18 errMsg405: 'Network request error, request method not allowed!',
@@ -10,8 +10,7 @@ export default { @@ -10,8 +10,7 @@ export default {
10 apiRequestFailed: '请求出错,请稍候重试', 10 apiRequestFailed: '请求出错,请稍候重试',
11 networkException: '网络异常', 11 networkException: '网络异常',
12 networkExceptionMsg: '网络异常,请检查您的网络连接是否正常!', 12 networkExceptionMsg: '网络异常,请检查您的网络连接是否正常!',
13 -  
14 - errMsg401: '没有权限!', 13 + errMsg401: '',
15 errMsg403: '未授权', 14 errMsg403: '未授权',
16 errMsg404: '未找到该资源!', 15 errMsg404: '未找到该资源!',
17 errMsg405: '网络请求错误,请求方法未允许!', 16 errMsg405: '网络请求错误,请求方法未允许!',
@@ -10,7 +10,6 @@ import { SessionTimeoutProcessingEnum } from '/@/enums/appEnum'; @@ -10,7 +10,6 @@ import { SessionTimeoutProcessingEnum } from '/@/enums/appEnum';
10 const { createMessage, createErrorModal } = useMessage(); 10 const { createMessage, createErrorModal } = useMessage();
11 const error = createMessage.error!; 11 const error = createMessage.error!;
12 const stp = projectSetting.sessionTimeoutProcessing; 12 const stp = projectSetting.sessionTimeoutProcessing;
13 -  
14 export function checkStatus( 13 export function checkStatus(
15 status: number, 14 status: number,
16 msg: string, 15 msg: string,
@@ -19,7 +18,6 @@ export function checkStatus( @@ -19,7 +18,6 @@ export function checkStatus(
19 const { t } = useI18n(); 18 const { t } = useI18n();
20 const userStore = useUserStoreWithOut(); 19 const userStore = useUserStoreWithOut();
21 let errMessage = ''; 20 let errMessage = '';
22 -  
23 switch (status) { 21 switch (status) {
24 case 400: 22 case 400:
25 errMessage = `${msg}`; 23 errMessage = `${msg}`;
@@ -121,7 +121,6 @@ const transform: AxiosTransform = { @@ -121,7 +121,6 @@ const transform: AxiosTransform = {
121 const msg: string = response?.data?.msg ?? ''; 121 const msg: string = response?.data?.msg ?? '';
122 const err: string = error?.toString?.() ?? ''; 122 const err: string = error?.toString?.() ?? '';
123 let errMessage = ''; 123 let errMessage = '';
124 -  
125 try { 124 try {
126 console.log(response.data); 125 console.log(response.data);
127 if (response.data.status == '401' || response.data.message == '"Authentication failed"') { 126 if (response.data.status == '401' || response.data.message == '"Authentication failed"') {
@@ -41,11 +41,7 @@ @@ -41,11 +41,7 @@
41 src="/src/assets/images/alarm-count.png" 41 src="/src/assets/images/alarm-count.png"
42 style="width: 5rem; height: 5rem" 42 style="width: 5rem; height: 5rem"
43 /> 43 />
44 - <img  
45 - v-if="isAdmin(role)"  
46 - src="/src/assets/images/zh.png"  
47 - style="width: 5rem; height: 5rem"  
48 - /> 44 + <img v-else src="/src/assets/images/zh.png" style="width: 5rem; height: 5rem" />
49 </div> 45 </div>
50 <div class="flex-auto"> 46 <div class="flex-auto">
51 <div class="flex justify-between" style="align-items: center"> 47 <div class="flex justify-between" style="align-items: center">
@@ -54,7 +50,7 @@ @@ -54,7 +50,7 @@
54 }}</div> 50 }}</div>
55 <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" /> 51 <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
56 </div> 52 </div>
57 - <div> {{ !isAdmin(role) ? '11月告警数(条)' : '租户总量(个)' }}</div> 53 + <div> {{ !isAdmin(role) ? `${currentMonth}月告警数(条)` : '租户总量(个)' }}</div>
58 </div> 54 </div>
59 </div> 55 </div>
60 <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> 56 <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
@@ -68,30 +64,34 @@ @@ -68,30 +64,34 @@
68 v-if="!isAdmin(role)" 64 v-if="!isAdmin(role)"
69 src="/src/assets/images/msg-count.png" 65 src="/src/assets/images/msg-count.png"
70 style="width: 5rem; height: 5rem" 66 style="width: 5rem; height: 5rem"
71 - /><img  
72 - v-if="isAdmin(role)"  
73 - src="/src/assets/images/kf.png"  
74 - style="width: 5rem; height: 5rem"  
75 - /> 67 + /><img v-else src="/src/assets/images/kf.png" style="width: 5rem; height: 5rem" />
76 </div> 68 </div>
77 - <div class="flex-auto">  
78 - <div class="flex justify-between" style="align-items: center">  
79 - <div style="font-size: 1.625rem; color: #333">{{  
80 - growCardList?.customerInfo?.sumCount  
81 - }}</div>  
82 - <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" /> 69 + <div style="display: flex; align-items: center">
  70 + <div v-if="!isAdmin(role)">
  71 + <div>
  72 + {{ `${currentMonth}月数据点(条)` }}
  73 + <span>{{ growCardList?.messageInfo?.dataPointsCount }}</span>
  74 + </div>
  75 + <div>
  76 + {{ `${currentMonth}月消息量(条)` }}
  77 + <span>{{ growCardList?.messageInfo?.messageCount }}</span>
  78 + </div>
83 </div> 79 </div>
84 - <div> {{ !isAdmin(role) ? '11月消息量(条)' : '客户总量(个)' }} </div> 80 + <div v-else>客户总量(个)</div>
85 </div> 81 </div>
86 </div> 82 </div>
87 <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> 83 <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
88 - 今日新增 {{ growCardList?.customerInfo?.todayAdd }}</div  
89 - > 84 + <div>
  85 + 今日新增
  86 + <span class="ml-8">数据点 ({{ growCardList?.messageInfo?.todayDataPointsAdd }})</span>
  87 + <span class="ml-8">消息量 ({{ growCardList?.messageInfo?.todayMessageAdd }})</span>
  88 + </div>
  89 + </div>
90 </Card> 90 </Card>
91 </div> 91 </div>
92 </template> 92 </template>
93 <script lang="ts" setup> 93 <script lang="ts" setup>
94 - import { ref, onMounted } from 'vue'; 94 + import { ref, onMounted, computed } from 'vue';
95 import { Card } from 'ant-design-vue'; 95 import { Card } from 'ant-design-vue';
96 import { getHomeData } from '/@/api/dashboard'; 96 import { getHomeData } from '/@/api/dashboard';
97 import { isAdmin } from '/@/enums/roleEnum'; 97 import { isAdmin } from '/@/enums/roleEnum';
@@ -109,12 +109,26 @@ @@ -109,12 +109,26 @@
109 inActive: number; 109 inActive: number;
110 todayAdd: number; 110 todayAdd: number;
111 }; 111 };
112 - tenantInfo: { sumCount: number; todayAdd: number };  
113 - customerInfo: { sumCount: number; todayAdd: number }; 112 + tenantInfo?: { sumCount: number; todayAdd: number };
  113 + customerInfo?: { sumCount: number; todayAdd: number };
  114 + alarmInfo?: {
  115 + sumCount: number;
  116 + todayAdd: number;
  117 + };
  118 + messageInfo?: {
  119 + dataPointsCount: number;
  120 + messageCount: number;
  121 + todayDataPointsAdd: number;
  122 + todayMessageAdd: number;
  123 + };
114 } 124 }
115 const growCardList = ref<CardList>(); 125 const growCardList = ref<CardList>();
116 onMounted(async () => { 126 onMounted(async () => {
117 const res = await getHomeData(); 127 const res = await getHomeData();
118 growCardList.value = res; 128 growCardList.value = res;
119 }); 129 });
  130 + // 获取当前月份0-11 +1
  131 + const currentMonth = computed(() => {
  132 + return new Date().getMonth() + 1;
  133 + });
120 </script> 134 </script>
@@ -19,12 +19,10 @@ @@ -19,12 +19,10 @@
19 </div> 19 </div>
20 </template> 20 </template>
21 <div v-show="activeKey === '1'"> 21 <div v-show="activeKey === '1'">
22 - <p class="center">告警数</p>  
23 <!-- 折线图 --> 22 <!-- 折线图 -->
24 <VisitAnalysis :alarmList="state.alarmList" /> 23 <VisitAnalysis :alarmList="state.alarmList" />
25 </div> 24 </div>
26 <div v-show="activeKey === '2'"> 25 <div v-show="activeKey === '2'">
27 - <p class="center">消息量</p>  
28 <!-- 柱形图 --> 26 <!-- 柱形图 -->
29 <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" /> 27 <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" />
30 </div> 28 </div>
@@ -170,7 +168,7 @@ @@ -170,7 +168,7 @@
170 for (const item of createdAlarmsCountHourly) { 168 for (const item of createdAlarmsCountHourly) {
171 newArray.push([item.ts, item.value]); 169 newArray.push([item.ts, item.value]);
172 } 170 }
173 - state.alarmList = [[...state.alarmItem], ...newArray]; 171 + state.alarmList = newArray;
174 } 172 }
175 } else { 173 } else {
176 if (data) { 174 if (data) {
@@ -200,8 +198,8 @@ @@ -200,8 +198,8 @@
200 for (const item of transportMsgCountHourly) { 198 for (const item of transportMsgCountHourly) {
201 newArray1.push([item.ts, item.value]); 199 newArray1.push([item.ts, item.value]);
202 } 200 }
203 - state.dataPointList = [[...state.dataPoint], ...newArray];  
204 - state.messageList = [[...state.MsgCount], ...newArray1]; 201 + state.dataPointList = newArray;
  202 + state.messageList = newArray1;
205 } 203 }
206 } 204 }
207 }, 205 },
@@ -316,7 +314,7 @@ @@ -316,7 +314,7 @@
316 if (activeIndex.value === index) return; 314 if (activeIndex.value === index) return;
317 activeIndex.value = index; 315 activeIndex.value = index;
318 dateValue.value = ''; 316 dateValue.value = '';
319 - let interval = 3600000; 317 + let interval = 300000;
320 if (value === 86400000) { 318 if (value === 86400000) {
321 interval = 7200000; 319 interval = 7200000;
322 } else if (value === 604800000 || value === 2592000000) { 320 } else if (value === 604800000 || value === 2592000000) {
@@ -342,11 +340,11 @@ @@ -342,11 +340,11 @@
342 }); 340 });
343 send(sendValue); 341 send(sendValue);
344 342
345 - console.log(JSON.parse(sendValue), '----interval'); 343 + console.log(JSON.parse(sendValue), '----interval', state.alarmList);
346 } 344 }
347 </script> 345 </script>
348 346
349 -<style scoped lang="less"> 347 +<style lang="less">
350 .center { 348 .center {
351 display: flex; 349 display: flex;
352 justify-content: center; 350 justify-content: center;
1 <template> 1 <template>
2 - <div ref="chartRef" :style="{ height, width }"></div> 2 + <div>
  3 + <p class="center">告警数</p>
  4 + <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div>
  5 + <div v-show="!alarmList.length">暂无数据</div>
  6 + </div>
3 </template> 7 </template>
4 <script lang="ts" setup> 8 <script lang="ts" setup>
5 import { onMounted, ref, Ref, withDefaults, watch } from 'vue'; 9 import { onMounted, ref, Ref, withDefaults, watch } from 'vue';
1 <template> 1 <template>
2 - <div ref="chartRef" :style="{ height, width }"></div> 2 + <div>
  3 + <p class="center">消息量</p>
  4 + <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div>
  5 + <div v-show="!dataPointList.length">暂无数据</div>
  6 + </div>
3 </template> 7 </template>
4 <script lang="ts" setup> 8 <script lang="ts" setup>
5 import { ref, Ref, watch, withDefaults } from 'vue'; 9 import { ref, Ref, watch, withDefaults } from 'vue';
@@ -22,6 +26,15 @@ @@ -22,6 +26,15 @@
22 watch( 26 watch(
23 () => [props.dataPointList, props.messageList], 27 () => [props.dataPointList, props.messageList],
24 ([newValue, newValue1]) => { 28 ([newValue, newValue1]) => {
  29 + // 计算总量
  30 + let dataPointTotal = 0;
  31 + let messageTotal = 0;
  32 + for (const item of newValue) {
  33 + dataPointTotal += Number(item[1]);
  34 + }
  35 + for (const item of newValue1) {
  36 + messageTotal += Number(item[1]);
  37 + }
25 setOptions({ 38 setOptions({
26 tooltip: { 39 tooltip: {
27 trigger: 'axis', 40 trigger: 'axis',
@@ -34,8 +47,13 @@ @@ -34,8 +47,13 @@
34 }, 47 },
35 legend: { 48 legend: {
36 data: ['传输数据点', '传输消息量'], 49 data: ['传输数据点', '传输消息量'],
37 - left: '10%', 50 + left: '5%',
  51 + orient: 'vertical',
  52 + formatter: (name) => {
  53 + return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
  54 + },
38 }, 55 },
  56 +
39 yAxis: {}, 57 yAxis: {},
40 grid: { 58 grid: {
41 left: '3%', 59 left: '3%',
@@ -45,18 +63,18 @@ @@ -45,18 +63,18 @@
45 }, 63 },
46 series: [ 64 series: [
47 { 65 {
48 - name: '传输消息量', 66 + name: '传输数据点',
49 type: 'bar', 67 type: 'bar',
50 stack: 'total', 68 stack: 'total',
51 - data: newValue1,  
52 - color: '#5c7bd9', 69 + data: newValue,
  70 + color: '#9fe080',
53 }, 71 },
54 { 72 {
55 - name: '传输数据点', 73 + name: '传输消息量',
56 type: 'bar', 74 type: 'bar',
57 stack: 'total', 75 stack: 'total',
58 - data: newValue,  
59 - color: '#9fe080', 76 + data: newValue1,
  77 + color: '#5c7bd9',
60 }, 78 },
61 ], 79 ],
62 }); 80 });