Commit 812f07d40d6b3531a67ec2b8ddd3fd25f9b59958

Authored by sqy
1 parent ceca183c

'修改首页的图表'

@@ -9,9 +9,11 @@ @@ -9,9 +9,11 @@
9 <template #tabBarExtraContent> 9 <template #tabBarExtraContent>
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 @click="changeDate(index, item.value)" :class="{ active: index === activeIndex }">{{  
13 - item.label  
14 - }}</span> 12 + <span
  13 + @click="quickQueryDate(index, item.value)"
  14 + :class="{ active: index === activeIndex }"
  15 + >{{ item.label }}</span
  16 + >
15 </template> 17 </template>
16 <DatePicker @change="onDateChange" /> 18 <DatePicker @change="onDateChange" />
17 </div> 19 </div>
@@ -54,7 +56,7 @@ @@ -54,7 +56,7 @@
54 defineExpose({ 56 defineExpose({
55 isAdmin, 57 isAdmin,
56 }); 58 });
57 - defineProps<{ 59 + const props = defineProps<{
58 role: string; 60 role: string;
59 }>(); 61 }>();
60 const activeKey = ref('1'); 62 const activeKey = ref('1');
@@ -70,7 +72,8 @@ @@ -70,7 +72,8 @@
70 tab: '消息量统计', 72 tab: '消息量统计',
71 }, 73 },
72 ]; 74 ];
73 - const activeIndex = ref(0); 75 + // 快速选择日期
  76 + const activeIndex = ref(1);
74 const dateList = ref([ 77 const dateList = ref([
75 { label: '1小时', value: 3600000 }, 78 { label: '1小时', value: 3600000 },
76 { label: '1天', value: 86400000 }, 79 { label: '1天', value: 86400000 },
@@ -91,6 +94,7 @@ @@ -91,6 +94,7 @@
91 }); 94 });
92 const { send, close } = useWebSocket(state.server, { 95 const { send, close } = useWebSocket(state.server, {
93 async onConnected() { 96 async onConnected() {
  97 + if (isAdmin(props.role)) return;
94 const res = await getEntitiesId(); 98 const res = await getEntitiesId();
95 entityId = res.data[0].entityId; 99 entityId = res.data[0].entityId;
96 const sendValue = JSON.stringify({ 100 const sendValue = JSON.stringify({
@@ -142,14 +146,12 @@ @@ -142,14 +146,12 @@
142 }, 146 },
143 onMessage(_, e) { 147 onMessage(_, e) {
144 const { data, update } = JSON.parse(e.data); 148 const { data, update } = JSON.parse(e.data);
  149 + console.log('来新消息了', data, update);
145 if (activeKey.value === '1') { 150 if (activeKey.value === '1') {
146 if (data) { 151 if (data) {
147 - const alarmData = data.data[0]?.latest.TIME_SERIES;  
148 - if (alarmData?.createdAlarmsCountHourly) {  
149 - const { createdAlarmsCountHourly } = alarmData;  
150 - state.alarmItem = [createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value];  
151 - state.alarmList.push([createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value]);  
152 - } 152 + const { createdAlarmsCountHourly } = data.data[0].latest.TIME_SERIES;
  153 + state.alarmItem = [createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value];
  154 + state.alarmList.push([createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value]);
153 } 155 }
154 if (update) { 156 if (update) {
155 const { createdAlarmsCountHourly } = update[0].timeseries; 157 const { createdAlarmsCountHourly } = update[0].timeseries;
@@ -157,7 +159,7 @@ @@ -157,7 +159,7 @@
157 for (const item of createdAlarmsCountHourly) { 159 for (const item of createdAlarmsCountHourly) {
158 newArray.push([item.ts, item.value]); 160 newArray.push([item.ts, item.value]);
159 } 161 }
160 - state.alarmList = [state.alarmItem, ...newArray]; 162 + state.alarmList = [[...state.alarmItem], ...newArray];
161 } 163 }
162 } else { 164 } else {
163 if (data) { 165 if (data) {
@@ -167,7 +169,6 @@ @@ -167,7 +169,6 @@
167 transportDataPointsCountHourly.ts, 169 transportDataPointsCountHourly.ts,
168 transportDataPointsCountHourly.value, 170 transportDataPointsCountHourly.value,
169 ]; 171 ];
170 -  
171 state.MsgCount = [ 172 state.MsgCount = [
172 transportDataPointsCountHourly.ts, 173 transportDataPointsCountHourly.ts,
173 transportDataPointsCountHourly.value, 174 transportDataPointsCountHourly.value,
@@ -182,15 +183,14 @@ @@ -182,15 +183,14 @@
182 const { transportDataPointsCountHourly, transportMsgCountHourly } = update[0].timeseries; 183 const { transportDataPointsCountHourly, transportMsgCountHourly } = update[0].timeseries;
183 const newArray: any[] = []; 184 const newArray: any[] = [];
184 const newArray1: any[] = []; 185 const newArray1: any[] = [];
185 - console.log(update[0]);  
186 for (const item of transportDataPointsCountHourly) { 186 for (const item of transportDataPointsCountHourly) {
187 newArray.push([item.ts, item.value]); 187 newArray.push([item.ts, item.value]);
188 } 188 }
189 for (const item of transportMsgCountHourly) { 189 for (const item of transportMsgCountHourly) {
190 newArray1.push([item.ts, item.value]); 190 newArray1.push([item.ts, item.value]);
191 } 191 }
192 - state.dataPointList = [state.dataPoint, ...newArray];  
193 - state.messageList = [state.MsgCount, ...newArray1]; 192 + state.dataPointList = [[...state.dataPoint], ...newArray];
  193 + state.messageList = [[...state.MsgCount], ...newArray1];
194 } 194 }
195 } 195 }
196 }, 196 },
@@ -208,10 +208,10 @@ @@ -208,10 +208,10 @@
208 cmdId: activeKey.value, 208 cmdId: activeKey.value,
209 historyCmd: { 209 historyCmd: {
210 keys: ['createdAlarmsCountHourly'], 210 keys: ['createdAlarmsCountHourly'],
211 - startTs: 1638778336692,  
212 - endTs: 1641370336692,  
213 - interval: 43200000,  
214 - limit: 60, 211 + startTs: Date.now() - 86400000,
  212 + endTs: Date.now(),
  213 + interval: 7200000,
  214 + limit: 12,
215 agg: 'COUNT', 215 agg: 'COUNT',
216 }, 216 },
217 }, 217 },
@@ -273,11 +273,11 @@ @@ -273,11 +273,11 @@
273 cmdId: activeKey.value, 273 cmdId: activeKey.value,
274 historyCmd: { 274 historyCmd: {
275 keys: ['transportMsgCountHourly', 'transportDataPointsCountHourly'], 275 keys: ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
276 - startTs: 1641283221226,  
277 - endTs: 1641369621226, 276 + startTs: Date.now() - 86400000,
  277 + endTs: Date.now(),
278 interval: 7200000, 278 interval: 7200000,
279 limit: 12, 279 limit: 12,
280 - agg: 'AVG', 280 + agg: 'COUNT',
281 }, 281 },
282 }, 282 },
283 ], 283 ],
@@ -286,16 +286,36 @@ @@ -286,16 +286,36 @@
286 send(sendMessageValue2); 286 send(sendMessageValue2);
287 } 287 }
288 } 288 }
  289 + // 选择日期
289 function onDateChange(_, dateString) { 290 function onDateChange(_, dateString) {
290 - const dateTime = formatToDateTime(dateString, 'x');  
291 - console.log(dateTime); 291 + activeIndex.value = -1;
  292 + const dateTime = Number(formatToDateTime(dateString, 'x'));
  293 + // 动态发送ws数据
  294 + const sendValue = JSON.stringify({
  295 + entityDataCmds: [
  296 + {
  297 + cmdId: activeKey.value,
  298 + historyCmd: {
  299 + keys:
  300 + activeKey.value === '1'
  301 + ? ['createdAlarmsCountHourly']
  302 + : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
  303 + startTs: dateTime,
  304 + endTs: dateTime + 86400000,
  305 + interval: 7200000,
  306 + limit: 12,
  307 + agg: 'COUNT',
  308 + },
  309 + },
  310 + ],
  311 + });
  312 + send(sendValue);
292 } 313 }
293 - function changeDate(index: number, value: number) { 314 + // 快速选择时间
  315 + function quickQueryDate(index: number, value: number) {
294 activeIndex.value = index; 316 activeIndex.value = index;
295 - let limit;  
296 - if (value === 3600000 || value === 86400000) {  
297 - limit = 12;  
298 - } else if (value === 604800000) { 317 + let limit = 12;
  318 + if (value === 604800000) {
299 limit = 7; 319 limit = 7;
300 } else if (value === 2592000000) { 320 } else if (value === 2592000000) {
301 limit = 30; 321 limit = 30;
@@ -26,8 +26,7 @@ @@ -26,8 +26,7 @@
26 tooltip: { 26 tooltip: {
27 trigger: 'axis', 27 trigger: 'axis',
28 axisPointer: { 28 axisPointer: {
29 - // Use axis to trigger tooltip  
30 - type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' 29 + type: 'shadow',
31 }, 30 },
32 }, 31 },
33 xAxis: { 32 xAxis: {
@@ -10,12 +10,12 @@ @@ -10,12 +10,12 @@
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="md:w-3/10 w-full enter-y"> 12 <div class="md:w-3/10 w-full enter-y">
13 - <HelpDoc :role="role" ref="helpDocRef" /> 13 + <HelpDoc :role="role" />
14 </div> 14 </div>
15 </div> 15 </div>
16 </template> 16 </template>
17 <script lang="ts" setup> 17 <script lang="ts" setup>
18 - import { ref, defineExpose } from 'vue'; 18 + import { ref } from 'vue';
19 import GrowCard from './components/GrowCard.vue'; 19 import GrowCard from './components/GrowCard.vue';
20 import SiteAnalysis from './components/SiteAnalysis.vue'; 20 import SiteAnalysis from './components/SiteAnalysis.vue';
21 import { Card } from 'ant-design-vue'; 21 import { Card } from 'ant-design-vue';
@@ -28,23 +28,12 @@ @@ -28,23 +28,12 @@
28 }); 28 });
29 29
30 const userInfo: any = getAuthCache(USER_INFO_KEY); 30 const userInfo: any = getAuthCache(USER_INFO_KEY);
31 - const role = userInfo.roles[0]; 31 + const role: string = userInfo.roles[0];
  32 + const loading = ref(true);
32 33
33 console.log(role); 34 console.log(role);
34 - const loading = ref(true);  
35 - const helpDocRef = ref(); 35 +
36 setTimeout(() => { 36 setTimeout(() => {
37 loading.value = false; 37 loading.value = false;
38 }, 1500); 38 }, 1500);
39 - window.addEventListener(  
40 - 'scroll',  
41 - () => {  
42 - const scrollBottom =  
43 - document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight;  
44 - if (scrollBottom <= 0) {  
45 - helpDocRef.value.redoHeight();  
46 - }  
47 - },  
48 - true  
49 - );  
50 </script> 39 </script>