简柏林 / thingskit-front · Commits

Commit 7004bf55fa568ce651a18ace8d42166fb241e6dd

Authored by sqy
1 parent edb22231

feat地理位置---:历史记录

Inline Side-by-side
Showing 4 changed files with 162 additions and 144 deletions
... ... @@ -11,7 +11,19 @@ export const getDeviceHistoryInfo = (params) => {
11 11 return defHttp.get(
12 12 {
13 13 url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
14   - params: { ...params, entityId: null },
  14 + params: { ...params, entityId: null, orderBy: 'ASC' },
  15 + },
  16 + {
  17 + joinPrefix: false,
  18 + }
  19 + );
  20 +};
  21 +
  22 +// 获取设备数据的keys
  23 +export const getDeviceDataKeys = (id: string) => {
  24 + return defHttp.get(
  25 + {
  26 + url: `/plugins/telemetry/DEVICE/${id}/keys/timeseries`,
15 27 },
16 28 {
17 29 joinPrefix: false,
... ...
... ... @@ -106,19 +106,19 @@ function generateOptions(value: number) {
106 106 },
107 107 {
108 108 label: '30秒',
109   - value: 300000,
  109 + value: 30000,
110 110 },
111 111 {
112 112 label: '1分钟',
113   - value: 600000,
  113 + value: 60000,
114 114 },
115 115 {
116 116 label: '2分钟',
117   - value: 1200000,
  117 + value: 120000,
118 118 },
119 119 {
120 120 label: '5分钟',
121   - value: 3600000,
  121 + value: 300000,
122 122 },
123 123 ];
124 124 } else if (value === 7200000) {
... ... @@ -129,27 +129,27 @@ function generateOptions(value: number) {
129 129 },
130 130 {
131 131 label: '30秒',
132   - value: 300000,
  132 + value: 30000,
133 133 },
134 134 {
135 135 label: '1分钟',
136   - value: 600000,
  136 + value: 60000,
137 137 },
138 138 {
139 139 label: '2分钟',
140   - value: 1200000,
  140 + value: 120000,
141 141 },
142 142 {
143 143 label: '5分钟',
144   - value: 3600000,
  144 + value: 300000,
145 145 },
146 146 {
147 147 label: '10分钟',
148   - value: 6000000,
  148 + value: 600000,
149 149 },
150 150 {
151 151 label: '15分钟',
152   - value: 9000000,
  152 + value: 900000,
153 153 },
154 154 ];
155 155 } else if (value === 18000000) {
... ... @@ -164,7 +164,7 @@ function generateOptions(value: number) {
164 164 },
165 165 {
166 166 label: '5分钟',
167   - value: 360000,
  167 + value: 300000,
168 168 },
169 169 {
170 170 label: '10分钟',
... ... @@ -187,7 +187,7 @@ function generateOptions(value: number) {
187 187 },
188 188 {
189 189 label: '5分钟',
190   - value: 360000,
  190 + value: 300000,
191 191 },
192 192 {
193 193 label: '10分钟',
... ... @@ -214,7 +214,7 @@ function generateOptions(value: number) {
214 214 },
215 215 {
216 216 label: '5分钟',
217   - value: 360000,
  217 + value: 300000,
218 218 },
219 219 {
220 220 label: '10分钟',
... ... @@ -237,7 +237,7 @@ function generateOptions(value: number) {
237 237 return [
238 238 {
239 239 label: '5分钟',
240   - value: 360000,
  240 + value: 300000,
241 241 },
242 242 {
243 243 label: '10分钟',
... ... @@ -384,6 +384,32 @@ export const schemas: FormSchema[] = [
384 384 },
385 385 componentProps: {
386 386 placeholder: '请选择分组间隔',
  387 + options: [
  388 + {
  389 + label: '5分钟',
  390 + value: 300000,
  391 + },
  392 + {
  393 + label: '10分钟',
  394 + value: 600000,
  395 + },
  396 + {
  397 + label: '15分钟',
  398 + value: 900000,
  399 + },
  400 + {
  401 + label: '30分钟',
  402 + value: 1800000,
  403 + },
  404 + {
  405 + label: '1小时',
  406 + value: 3600000,
  407 + },
  408 + {
  409 + label: '2小时',
  410 + value: 7200000,
  411 + },
  412 + ],
387 413 },
388 414 },
389 415 {
... ...
... ... @@ -34,7 +34,7 @@
34 34 :canFullscreen="false"
35 35 >
36 36 <BasicForm @register="registerForm" />
37   - <div ref="chartRef" :style="{ height: '400px', width }"></div>
  37 + <div ref="chartRef" :style="{ height: '600px', width }"></div>
38 38 </BasicModal>
39 39 </div>
40 40 </template>
... ... @@ -51,7 +51,7 @@
51 51 import { BasicForm, useForm } from '/@/components/Form';
52 52 import { schemas } from './config.data';
53 53 import { useECharts } from '/@/hooks/web/useECharts';
54   - import { getDeviceHistoryInfo } from '/@/api/alarm/position';
  54 + import { getDeviceHistoryInfo, getDeviceDataKeys } from '/@/api/alarm/position';
55 55 import moment from 'moment';
56 56 export default defineComponent({
57 57 name: 'BaiduMap',
... ... @@ -83,7 +83,6 @@
83 83 if (!wrapEl) return;
84 84 const map = new BMap.Map(wrapEl);
85 85 const point = new BMap.Point(104.04666605565338, 30.543516387560476);
86   -
87 86 map.centerAndZoom(point, 15);
88 87 map.enableScrollWheelZoom(true);
89 88 }
... ... @@ -97,6 +96,9 @@
97 96 },
98 97 showIndexColumn: false,
99 98 useSearchForm: true,
  99 + pagination: {
  100 + showSizeChanger: false,
  101 + },
100 102 });
101 103 // 点击表格某一行触发
102 104 const deviceRowClick = (record) => {
... ... @@ -166,101 +168,81 @@
166 168 let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
167 169 map.openInfoWindow(infoWindow, map.getCenter());
168 170 }
169   -
170   - console.log(record);
171 171 };
172   -
  172 + let keys = [];
173 173 const [registerModal, { openModal }] = useModal();
174   - const [registerForm, { resetFields, getFieldsValue, validate }] = useForm({
  174 + const [registerForm, { resetFields, getFieldsValue, setFieldsValue, validate }] = useForm({
175 175 labelWidth: 120,
176 176 schemas,
177 177 async submitFunc() {
  178 + // 表单验证
178 179 await validate();
179 180 let { endTs, interval, agg } = getFieldsValue();
180 181 if (!endTs) return;
  182 + // 数据收集
  183 + const dataArray: any[] = [];
181 184 const startTs = Date.now() - endTs;
182 185 endTs = Date.now();
183   - console.log(startTs, endTs);
  186 + // 发送请求
184 187 const res = await getDeviceHistoryInfo({
185 188 entityId: entityId.value,
186   - keys: 'co,co2',
187   - interval,
  189 + keys: keys.join(),
188 190 startTs,
189 191 endTs,
  192 + interval,
190 193 agg,
191 194 });
192   - const dateArray: { key: string; time: string }[] = [];
193   - const valueArray: { key: string; value: string }[] = [];
  195 + // 处理数据
194 196 for (const key in res) {
195 197 for (const item1 of res[key]) {
196 198 let { ts, value } = item1;
197   - const time = moment(ts).format('YYYY-MM-DD');
198   - dateArray.push({
199   - key,
200   - time,
201   - });
202   - valueArray.push({
203   - key,
204   - value,
205   - });
  199 + const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
  200 + value = Number(value).toFixed(2);
  201 + dataArray.push([time, value, key]);
206 202 }
207 203 }
208   - console.log(dateArray, valueArray);
209   - const keys = ['co', 'co2'];
  204 +
210 205 const series: any = keys.map((item) => {
211 206 return {
212 207 name: item,
213 208 type: 'line',
214   - smooth: true,
215   - showAllSymbol: 'auto',
216   - symbol: 'emptyCircle',
217   - symbolSize: 15,
218   - data: valueArray.filter((item1) => item1.key === item).map((item1) => item1.value),
  209 + stack: 'Total',
  210 + data: dataArray.filter((item1) => item1[2] === item),
219 211 };
220 212 });
  213 + // 设置数据
221 214 setOptions({
222 215 tooltip: {
223 216 trigger: 'axis',
224   - axisPointer: {
225   - lineStyle: {
226   - width: 1,
227   - color: '#019680',
228   - },
229   - },
230 217 },
231   - xAxis: {
232   - type: 'category',
233   - boundaryGap: false,
234   - data: dateArray.map((item) => item.time),
235   - splitLine: {
236   - show: true,
237   - lineStyle: {
238   - width: 1,
239   - type: 'solid',
240   - color: 'rgba(226,226,226,0.5)',
241   - },
242   - },
243   - axisTick: {
244   - show: false,
245   - },
  218 + legend: {
  219 + data: keys,
  220 + },
  221 + grid: {
  222 + left: '3%',
  223 + right: '4%',
  224 + bottom: '3%',
  225 + containLabel: true,
246 226 },
247   - yAxis: [
  227 + dataZoom: [
248 228 {
249   - type: 'value',
250   - max: 1000,
251   - splitNumber: 4,
252   - axisTick: {
253   - show: false,
254   - },
255   - splitArea: {
256   - show: true,
257   - areaStyle: {
258   - color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
259   - },
260   - },
  229 + type: 'inside',
  230 + start: 0,
  231 + end: 50,
  232 + },
  233 + {
  234 + start: 20,
  235 + end: 40,
261 236 },
262 237 ],
263   - grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
  238 + xAxis: {
  239 + type: 'time',
  240 + boundaryGap: false,
  241 + },
  242 + yAxis: {
  243 + type: 'value',
  244 + boundaryGap: [0, '100%'],
  245 + },
264 246 series,
265 247 });
266 248 },
... ... @@ -270,85 +252,84 @@
270 252 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
271 253
272 254 const openHistoryModal = async () => {
273   - const startTs = Date.now() - 86400000;
  255 + openModal(true);
  256 +
  257 + // 收集参数
  258 + const dataArray: any[] = [];
  259 + const startTs = Date.now() - 86400000; //最近一天
274 260 const endTs = Date.now();
275   - console.log(startTs, endTs);
  261 + // 发送请求
  262 + keys = await getDeviceDataKeys(entityId.value);
276 263 const res = await getDeviceHistoryInfo({
277 264 entityId: entityId.value,
278   - keys: 'co,co2',
  265 + keys: keys.join(),
279 266 startTs,
280 267 endTs,
  268 + interval: 7200000, //间隔两小时
  269 + agg: 'AVG',
281 270 });
282   - const dateArray: { key: string; time: string }[] = [];
283   - const valueArray: { key: string; value: string }[] = [];
  271 + // 处理数据
284 272 for (const key in res) {
285 273 for (const item1 of res[key]) {
286 274 let { ts, value } = item1;
287 275 const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
288   - dateArray.push({
289   - key,
290   - time,
291   - });
292   - valueArray.push({
293   - key,
294   - value,
295   - });
  276 + value = Number(value).toFixed(2);
  277 + dataArray.push([time, value, key]);
296 278 }
297 279 }
298   -
299   - const keys = ['co', 'co2'];
300 280 const series: any = keys.map((item) => {
301 281 return {
302   - smooth: true,
303   - data: valueArray.filter((item1) => item1.key === item).map((item1) => item1.value),
304   - type: 'line',
305 282 name: item,
306   - itemStyle: {
307   - color: '#5ab1ef',
308   - },
  283 + type: 'line',
  284 + stack: 'Total',
  285 + data: dataArray.filter((item1) => item1[2] === item),
309 286 };
310 287 });
  288 + // 设置数据;
311 289 setOptions({
312 290 tooltip: {
313 291 trigger: 'axis',
314   - axisPointer: {
315   - lineStyle: {
316   - width: 1,
317   - color: '#019680',
318   - },
319   - },
320 292 },
321   - xAxis: {
322   - type: 'category',
323   - boundaryGap: false,
324   - data: dateArray.map((item) => item.time),
325   - splitLine: {
326   - show: true,
327   - lineStyle: {
328   - width: 1,
329   - type: 'solid',
330   - color: 'rgba(226,226,226,0.5)',
331   - },
  293 + legend: {
  294 + data: keys,
  295 + },
  296 + grid: {
  297 + left: '3%',
  298 + right: '4%',
  299 + bottom: '3%',
  300 + containLabel: true,
  301 + },
  302 + dataZoom: [
  303 + {
  304 + type: 'inside',
  305 + start: 0,
  306 + end: 50,
332 307 },
333   - axisTick: {
334   - show: false,
  308 + {
  309 + start: 0,
  310 + end: 20,
335 311 },
  312 + ],
  313 + xAxis: {
  314 + type: 'time',
  315 + boundaryGap: false,
336 316 },
337 317 yAxis: {
338   - splitLine: { show: false },
339   - axisLine: {
340   - lineStyle: {
341   - color: '#ccc',
342   - },
343   - },
  318 + type: 'value',
  319 + boundaryGap: [0, '100%'],
344 320 },
345   - grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
346 321 series,
347 322 });
348   - openModal(true);
  323 +
  324 + setFieldsValue({
  325 + endTs: 86400000,
  326 + interval: 7200000,
  327 + agg: 'AVG',
  328 + });
349 329 };
350 330 const cancelHistoryModal = () => {
351 331 resetFields();
  332 + setOptions({});
352 333 };
353 334 onMounted(() => {
354 335 initMap();
... ... @@ -367,14 +348,10 @@
367 348 },
368 349 });
369 350 </script>
370   -
371 351 <style scoped>
372 352 .wrapper {
373 353 position: relative;
374 354 }
375   - .active {
376   - background-color: #fff;
377   - }
378 355 .right-wrap {
379 356 padding-top: 10px;
380 357 width: 22%;
... ...
... ... @@ -13,32 +13,35 @@
13 13 light:border-#F2F2F5
14 14 "
15 15 >
16   - <img :src="item.imgUrl" style="width: 90px; height: 90px" />
  16 + <img :src="item.imgUrl" style="width: 5rem; height: 5rem" />
17 17 <div class="growCardItem-right">
18 18 <div class="flex justify-between ml-3">
19   - <div style="font-size: 26px; color: #333">{{ item.value }}</div>
20   - <img src="../../../../assets/images/tip.png" style="width: 20px; height: 20px" />
  19 + <div style="font-size: 1.625rem; color: #333">{{ item.value }}</div>
  20 + <img src="../../../../assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
21 21 </div>
22 22 <div class="ml-3">{{ item.title }}</div>
23   - <div class="ml-1.5 mt-3 flex flex-nowrap" style="width: 240px" v-if="item.offLine">
  23 + <div class="ml-1.5 mt-3 flex flex-nowrap" style="width: 15rem" v-if="item.offLine">
24 24 <div class="count">
25 25 <img
26 26 src="../../../../assets/images/online.png"
27   - style="width: 10px; height: 10px; margin-right: 4px"
  27 + style="width: 0.6rem; height: 0.6rem"
  28 + class="mr-1"
28 29 />
29 30 在线 {{ item.onLine }}
30 31 </div>
31 32 <div class="count">
32 33 <img
33 34 src="../../../../assets/images/offline.png"
34   - style="width: 10px; height: 10px; margin-right: 4px"
  35 + style="width: 0.6rem; height: 0.6rem"
  36 + class="mr-1"
35 37 />
36 38 离线 {{ item.offLine }}
37 39 </div>
38 40 <div class="count">
39 41 <img
40 42 src="../../../../assets/images/inactive.png"
41   - style="width: 10px; height: 10px; margin-right: 4px"
  43 + style="width: 0.6rem; height: 0.6rem"
  44 + class="mr-1"
42 45 />
43 46 未激活 {{ item.inactive }}
44 47 </div>
... ... @@ -56,24 +59,24 @@
56 59
57 60 <style scoped lang="less">
58 61 .growCardItem {
59   - height: 179px;
  62 + height: 11.187rem;
60 63 color: #666;
61 64 .growCardItem-top {
62 65 display: flex;
63   - margin: 20px;
64   - padding-bottom: 10px;
  66 + margin: 1.25rem;
  67 + padding-bottom: 0.625rem;
65 68 .growCardItem-right {
66   - width: 300px;
  69 + width: 18.75rem;
67 70 .count {
68 71 display: flex;
69   - font-size: 12px;
  72 + font-size: 0.75rem;
70 73 align-items: center;
71   - margin-left: 8px;
  74 + margin-left: 0.5rem;
72 75 }
73 76 }
74 77 }
75 78 .growCardItem-bottom {
76   - margin-left: 20px;
  79 + margin-left: 1.25rem;
77 80 }
78 81 }
79 82 </style>
... ...