简柏林 / thingskit-front · Commits

Commit b1cb3fac48f9c9118358d2ad88b434f7ad65641f

Authored by ww
1 parent 93a107ee

fix: all history data charts

Inline Side-by-side
Showing 6 changed files with 153 additions and 197 deletions
@@ -9,7 +9,7 @@ export const getDeviceProfile = () => { @@ -9,7 +9,7 @@ export const getDeviceProfile = () => {
9 }; 9 };
10 10
11 // 获取历史数据 11 // 获取历史数据
12 -export const getDeviceHistoryInfo = (params) => { 12 +export const getDeviceHistoryInfo = (params: Recordable) => {
13 return defHttp.get<HistoryData>( 13 return defHttp.get<HistoryData>(
14 { 14 {
15 url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`, 15 url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import moment from 'moment';  
3 import { nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue'; 2 import { nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
4 - import { getDeviceDataKeys, getDeviceHistoryInfo } from '/@/api/alarm/position'; 3 + import { getDeviceHistoryInfo } from '/@/api/alarm/position';
5 import { Empty, Spin } from 'ant-design-vue'; 4 import { Empty, Spin } from 'ant-design-vue';
6 import { useECharts } from '/@/hooks/web/useECharts'; 5 import { useECharts } from '/@/hooks/web/useECharts';
7 - import { dateUtil } from '/@/utils/dateUtil';  
8 - import {  
9 - AggregateDataEnum,  
10 - eChartOptions,  
11 - selectDeviceAttrSchema,  
12 - } from '/@/views/device/localtion/config.data'; 6 + import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
13 import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm'; 7 import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
14 - import { defaultSchemas, QueryWay } from '/@/views/device/localtion/cpns/TimePeriodForm/config'; 8 + import { defaultSchemas } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
15 import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue'; 9 import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue';
16 import { SchemaFiled } from '/@/views/report/config/config.data'; 10 import { SchemaFiled } from '/@/views/report/config/config.data';
17 import { useGridLayout } from '/@/hooks/component/useGridLayout'; 11 import { useGridLayout } from '/@/hooks/component/useGridLayout';
18 import { ColEx } from '/@/components/Form/src/types'; 12 import { ColEx } from '/@/components/Form/src/types';
  13 + import { useHistoryData } from '../../hook/useHistoryData';
19 14
20 interface DeviceDetail { 15 interface DeviceDetail {
21 tbDeviceId: string; 16 tbDeviceId: string;
  17 + deviceProfileId: string;
22 } 18 }
23 19
24 const props = defineProps<{ 20 const props = defineProps<{
@@ -28,36 +24,12 @@ @@ -28,36 +24,12 @@
28 24
29 const chartRef = ref(); 25 const chartRef = ref();
30 26
31 - const deviceAttrs = ref<string[]>([]);  
32 -  
33 const loading = ref(false); 27 const loading = ref(false);
34 28
35 const isNull = ref(false); 29 const isNull = ref(false);
36 30
37 - function getSearchParams(value: Recordable) {  
38 - const { startTs, endTs, interval, agg, limit, keys, way } = value;  
39 - if (way === QueryWay.LATEST) {  
40 - return {  
41 - entityId: props.deviceDetail.tbDeviceId,  
42 - keys: keys ? keys : unref(deviceAttrs).join(),  
43 - startTs: moment().subtract(startTs, 'ms').valueOf(),  
44 - endTs: Date.now(),  
45 - interval,  
46 - agg,  
47 - limit,  
48 - };  
49 - } else {  
50 - return {  
51 - entityId: props.deviceDetail.tbDeviceId,  
52 - keys: keys ? keys : unref(deviceAttrs).join(),  
53 - startTs: moment(startTs).valueOf(),  
54 - endTs: moment(endTs).valueOf(),  
55 - interval,  
56 - agg,  
57 - limit,  
58 - };  
59 - }  
60 - } 31 + const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
  32 + useHistoryData();
61 33
62 function hasDeviceAttr() { 34 function hasDeviceAttr() {
63 if (!unref(deviceAttrs).length) { 35 if (!unref(deviceAttrs).length) {
@@ -69,28 +41,6 @@ @@ -69,28 +41,6 @@
69 41
70 const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>); 42 const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
71 43
72 - function setChartOptions(data, keys?) {  
73 - const dataArray: any[] = [];  
74 - for (const key in data) {  
75 - for (const item1 of data[key]) {  
76 - let { ts, value } = item1;  
77 - const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');  
78 - value = Number(value).toFixed(2);  
79 - dataArray.push([time, value, key]);  
80 - }  
81 - }  
82 - keys = keys ? [keys] : unref(deviceAttrs);  
83 - const series: any = keys.map((item) => {  
84 - return {  
85 - name: item,  
86 - type: 'line',  
87 - data: dataArray.filter((item1) => item1[2] === item),  
88 - };  
89 - });  
90 - // 设置数据  
91 - setOptions(eChartOptions(series, keys));  
92 - }  
93 -  
94 const [register, method] = useTimePeriodForm({ 44 const [register, method] = useTimePeriodForm({
95 schemas: [...defaultSchemas, ...selectDeviceAttrSchema], 45 schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
96 baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx, 46 baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
@@ -103,7 +53,10 @@ @@ -103,7 +53,10 @@
103 if (!hasDeviceAttr()) return; 53 if (!hasDeviceAttr()) return;
104 // 发送请求 54 // 发送请求
105 loading.value = true; 55 loading.value = true;
106 - const res = await getDeviceHistoryInfo(searchParams); 56 + const res = await getDeviceHistoryInfo({
  57 + ...searchParams,
  58 + entityId: props.deviceDetail.tbDeviceId,
  59 + });
107 // 判断数据对象是否为空 60 // 判断数据对象是否为空
108 if (!Object.keys(res).length) { 61 if (!Object.keys(res).length) {
109 isNull.value = false; 62 isNull.value = false;
@@ -111,16 +64,19 @@ @@ -111,16 +64,19 @@
111 } else { 64 } else {
112 isNull.value = true; 65 isNull.value = true;
113 } 66 }
114 - setChartOptions(res, value.keys); 67 +
  68 + const selectedKeys = unref(deviceAttrs).find(
  69 + (item) => item.identifier === value[SchemaFiled.KEYS]
  70 + );
  71 +
  72 + setOptions(setChartOptions(res, selectedKeys));
115 loading.value = false; 73 loading.value = false;
116 }, 74 },
117 }); 75 });
118 76
119 const getDeviceDataKey = async () => { 77 const getDeviceDataKey = async () => {
120 - const { tbDeviceId } = props.deviceDetail || {};  
121 try { 78 try {
122 - deviceAttrs.value = (await getDeviceDataKeys(tbDeviceId)) || [];  
123 - 79 + await getDeviceAttribute(props.deviceDetail);
124 if (props.attr) { 80 if (props.attr) {
125 method.setFieldsValue({ keys: props.attr }); 81 method.setFieldsValue({ keys: props.attr });
126 } 82 }
@@ -132,7 +88,7 @@ @@ -132,7 +88,7 @@
132 method.updateSchema({ 88 method.updateSchema({
133 field: 'keys', 89 field: 'keys',
134 componentProps: { 90 componentProps: {
135 - options: unref(deviceAttrs).map((item) => ({ label: item, value: item })), 91 + options: unref(deviceAttrs).map((item) => ({ label: item.name, value: item.identifier })),
136 }, 92 },
137 }); 93 });
138 94
@@ -144,7 +100,7 @@ @@ -144,7 +100,7 @@
144 100
145 if (!hasDeviceAttr()) return; 101 if (!hasDeviceAttr()) return;
146 102
147 - const keys = props.attr ? props.attr : unref(deviceAttrs).join(); 103 + const keys = props.attr ? props.attr : unref(getDeviceKeys).join();
148 104
149 const res = await getDeviceHistoryInfo({ 105 const res = await getDeviceHistoryInfo({
150 entityId: props.deviceDetail.tbDeviceId, 106 entityId: props.deviceDetail.tbDeviceId,
@@ -162,7 +118,9 @@ @@ -162,7 +118,9 @@
162 } else { 118 } else {
163 isNull.value = true; 119 isNull.value = true;
164 } 120 }
165 - setChartOptions(res, props.attr); 121 + const selectedKeys = unref(deviceAttrs).find((item) => item.identifier === props.attr);
  122 +
  123 + setOptions(setChartOptions(res, selectedKeys));
166 }; 124 };
167 125
168 onMounted(async () => { 126 onMounted(async () => {
  1 +import { EChartsOption } from 'echarts';
  2 +import moment from 'moment';
  3 +import { computed, ref, unref } from 'vue';
  4 +import { eChartOptions } from '../../localtion/config.data';
  5 +import { HistoryData } from '/@/api/alarm/position/model';
  6 +import { getDeviceAttributes } from '/@/api/dataBoard';
  7 +import { DeviceAttributeRecord } from '/@/api/dataBoard/model';
  8 +import { dateUtil } from '/@/utils/dateUtil';
  9 +import { QueryWay } from '/@/views/report/config/config.data';
  10 +import { SchemaFiled } from '/@/views/visual/board/detail/config/historyTrend.config';
  11 +import { DEFAULT_DATE_FORMAT } from '/@/views/visual/board/detail/config/util';
  12 +
  13 +interface DeviceOption {
  14 + deviceProfileId: string;
  15 +}
  16 +
  17 +export function useHistoryData() {
  18 + const deviceAttrs = ref<DeviceAttributeRecord[]>([]);
  19 +
  20 + const getDeviceKeys = computed(() => {
  21 + return unref(deviceAttrs).map((item) => item.identifier);
  22 + });
  23 +
  24 + const getDeviceAttribute = async (record: DeviceOption) => {
  25 + try {
  26 + const { deviceProfileId } = record;
  27 + deviceAttrs.value = (await getDeviceAttributes({ deviceProfileId })) || [];
  28 + } catch (error) {
  29 + throw error;
  30 + }
  31 + };
  32 +
  33 + function getSearchParams(value: Partial<Record<SchemaFiled, string>>) {
  34 + const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value;
  35 + const basicRecord = {
  36 + entityId: deviceId,
  37 + keys: keys ? keys : unref(getDeviceKeys).join(),
  38 + interval,
  39 + agg,
  40 + limit,
  41 + };
  42 + if (way === QueryWay.LATEST) {
  43 + return Object.assign(basicRecord, {
  44 + startTs: moment().subtract(startTs, 'ms').valueOf(),
  45 + endTs: Date.now(),
  46 + });
  47 + } else {
  48 + return Object.assign(basicRecord, {
  49 + startTs: moment(startTs).valueOf(),
  50 + endTs: moment(endTs).valueOf(),
  51 + });
  52 + }
  53 + }
  54 +
  55 + function setChartOptions(
  56 + data: HistoryData,
  57 + keys?: DeviceAttributeRecord | DeviceAttributeRecord[]
  58 + ) {
  59 + const dataArray: [string, string, string][] = [];
  60 + for (const key in data) {
  61 + for (const item of data[key]) {
  62 + let { value } = item;
  63 + const { ts } = item;
  64 + const time = dateUtil(ts).format(DEFAULT_DATE_FORMAT);
  65 + value = Number(value).toFixed(2);
  66 + dataArray.push([time, value, key as string]);
  67 + }
  68 + }
  69 +
  70 + keys = keys ? [keys as DeviceAttributeRecord] : unref(deviceAttrs);
  71 + const legend = keys.map((item) => item.name);
  72 +
  73 + const series: EChartsOption['series'] = (keys as DeviceAttributeRecord[]).map((item) => {
  74 + return {
  75 + name: item.name,
  76 + type: 'line',
  77 + data: dataArray.filter((temp) => temp[2] === item.identifier),
  78 + };
  79 + });
  80 +
  81 + return eChartOptions(series, legend);
  82 + }
  83 +
  84 + return {
  85 + deviceAttrs,
  86 + getDeviceKeys,
  87 + getDeviceAttribute,
  88 + getSearchParams,
  89 + setChartOptions,
  90 + };
  91 +}
@@ -78,11 +78,7 @@ @@ -78,11 +78,7 @@
78 import { BAI_DU_MAP_URL } from '/@/utils/fnUtils'; 78 import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
79 import { useModal, BasicModal } from '/@/components/Modal'; 79 import { useModal, BasicModal } from '/@/components/Modal';
80 import { useECharts } from '/@/hooks/web/useECharts'; 80 import { useECharts } from '/@/hooks/web/useECharts';
81 - import {  
82 - getDeviceHistoryInfo,  
83 - getDeviceDataKeys,  
84 - getDeviceActiveTime,  
85 - } from '/@/api/alarm/position'; 81 + import { getDeviceHistoryInfo, getDeviceActiveTime } from '/@/api/alarm/position';
86 import { useDrawer } from '/@/components/Drawer'; 82 import { useDrawer } from '/@/components/Drawer';
87 import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue'; 83 import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';
88 import moment from 'moment'; 84 import moment from 'moment';
@@ -96,12 +92,12 @@ @@ -96,12 +92,12 @@
96 import lx1 from '/@/assets/images/lx1.png'; 92 import lx1 from '/@/assets/images/lx1.png';
97 import Loading from '/@/components/Loading/src/Loading.vue'; 93 import Loading from '/@/components/Loading/src/Loading.vue';
98 import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm'; 94 import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';
99 - import { selectDeviceAttrSchema, eChartOptions } from './config.data'; 95 + import { selectDeviceAttrSchema } from './config.data';
100 import { defaultSchemas } from './cpns/TimePeriodForm/config'; 96 import { defaultSchemas } from './cpns/TimePeriodForm/config';
101 import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config'; 97 import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
102 - import { dateUtil } from '/@/utils/dateUtil';  
103 import { Spin } from 'ant-design-vue'; 98 import { Spin } from 'ant-design-vue';
104 import { useAsyncQueue } from './useAsyncQueue'; 99 import { useAsyncQueue } from './useAsyncQueue';
  100 + import { useHistoryData } from '../list/hook/useHistoryData';
105 101
106 interface DeviceInfo { 102 interface DeviceInfo {
107 alarmStatus: 0 | 1; 103 alarmStatus: 0 | 1;
@@ -112,6 +108,7 @@ @@ -112,6 +108,7 @@
112 deviceProfile: { default: boolean; enabled: boolean; name: string; transportType: string }; 108 deviceProfile: { default: boolean; enabled: boolean; name: string; transportType: string };
113 deviceInfo: { longitude: string; latitude: string; address: string }; 109 deviceInfo: { longitude: string; latitude: string; address: string };
114 deviceType?: string; 110 deviceType?: string;
  111 + deviceProfileId: string;
115 } 112 }
116 type MarkerList = DeviceInfo & { marker: any; label: any }; 113 type MarkerList = DeviceInfo & { marker: any; label: any };
117 114
@@ -142,8 +139,7 @@ @@ -142,8 +139,7 @@
142 let globalRecord: any = {}; 139 let globalRecord: any = {};
143 const wrapRef = ref<HTMLDivElement | null>(null); 140 const wrapRef = ref<HTMLDivElement | null>(null);
144 const chartRef = ref<HTMLDivElement | null>(null); 141 const chartRef = ref<HTMLDivElement | null>(null);
145 - const deviceAttrs = ref<string[]>([]);  
146 - const { setOptions, getInstance, resize } = useECharts(chartRef as Ref<HTMLDivElement>); 142 + const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
147 const isNull = ref(true); 143 const isNull = ref(true);
148 const { toPromise } = useScript({ src: BAI_DU_MAP_URL }); 144 const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
149 const [registerDetailDrawer, { openDrawer }] = useDrawer(); 145 const [registerDetailDrawer, { openDrawer }] = useDrawer();
@@ -154,6 +150,9 @@ @@ -154,6 +150,9 @@
154 150
155 const loading = ref(false); 151 const loading = ref(false);
156 152
  153 + const { deviceAttrs, getDeviceKeys, getDeviceAttribute, getSearchParams, setChartOptions } =
  154 + useHistoryData();
  155 +
157 const [registerTable] = useTable({ 156 const [registerTable] = useTable({
158 api: devicePage, 157 api: devicePage,
159 columns, 158 columns,
@@ -259,7 +258,7 @@ @@ -259,7 +258,7 @@
259 entityId = record.tbDeviceId; 258 entityId = record.tbDeviceId;
260 globalRecord = record; 259 globalRecord = record;
261 try { 260 try {
262 - deviceAttrs.value = (await getDeviceDataKeys(entityId)) || []; 261 + await getDeviceAttribute(record);
263 } catch (error) {} 262 } catch (error) {}
264 263
265 const options = { 264 const options = {
@@ -350,7 +349,7 @@ @@ -350,7 +349,7 @@
350 if (!hasDeviceAttr()) return; 349 if (!hasDeviceAttr()) return;
351 // 发送请求 350 // 发送请求
352 loading.value = true; 351 loading.value = true;
353 - const res = await getDeviceHistoryInfo(searchParams); 352 + const res = await getDeviceHistoryInfo({ ...searchParams, entityId });
354 loading.value = false; 353 loading.value = false;
355 // 判断数据对象是否为空 354 // 判断数据对象是否为空
356 if (!Object.keys(res).length) { 355 if (!Object.keys(res).length) {
@@ -359,35 +358,13 @@ @@ -359,35 +358,13 @@
359 } else { 358 } else {
360 isNull.value = true; 359 isNull.value = true;
361 } 360 }
362 - setChartOptions(res, value.keys); 361 + const selectedKeys = unref(deviceAttrs).find(
  362 + (item) => item.identifier === value[SchemaFiled.KEYS]
  363 + );
  364 + setOptions(setChartOptions(res, selectedKeys));
363 }, 365 },
364 }); 366 });
365 367
366 - function getSearchParams(value: Recordable) {  
367 - const { startTs, endTs, interval, agg, limit, keys, way } = value;  
368 - if (way === QueryWay.LATEST) {  
369 - return {  
370 - entityId,  
371 - keys: keys ? keys : unref(deviceAttrs).join(),  
372 - startTs: moment().subtract(startTs, 'ms').valueOf(),  
373 - endTs: Date.now(),  
374 - interval,  
375 - agg,  
376 - limit,  
377 - };  
378 - } else {  
379 - return {  
380 - entityId,  
381 - keys: keys ? keys : unref(deviceAttrs).join(),  
382 - startTs: moment(startTs).valueOf(),  
383 - endTs: moment(endTs).valueOf(),  
384 - interval,  
385 - agg,  
386 - limit,  
387 - };  
388 - }  
389 - }  
390 -  
391 const openHistoryModal = async () => { 368 const openHistoryModal = async () => {
392 openModal(true); 369 openModal(true);
393 370
@@ -395,7 +372,10 @@ @@ -395,7 +372,10 @@
395 method.updateSchema({ 372 method.updateSchema({
396 field: 'keys', 373 field: 'keys',
397 componentProps: { 374 componentProps: {
398 - options: unref(deviceAttrs).map((item) => ({ label: item, value: item })), 375 + options: unref(deviceAttrs).map((item) => ({
  376 + label: item.name,
  377 + value: item.identifier,
  378 + })),
399 }, 379 },
400 }); 380 });
401 381
@@ -409,7 +389,7 @@ @@ -409,7 +389,7 @@
409 389
410 const res = await getDeviceHistoryInfo({ 390 const res = await getDeviceHistoryInfo({
411 entityId, 391 entityId,
412 - keys: unref(deviceAttrs).join(), 392 + keys: unref(getDeviceKeys).join(),
413 startTs: Date.now() - 1 * 24 * 60 * 60 * 1000, 393 startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
414 endTs: Date.now(), 394 endTs: Date.now(),
415 agg: AggregateDataEnum.NONE, 395 agg: AggregateDataEnum.NONE,
@@ -423,7 +403,7 @@ @@ -423,7 +403,7 @@
423 } else { 403 } else {
424 isNull.value = true; 404 isNull.value = true;
425 } 405 }
426 - setChartOptions(res); 406 + setOptions(setChartOptions(res));
427 }; 407 };
428 function hasDeviceAttr() { 408 function hasDeviceAttr() {
429 if (!unref(deviceAttrs).length) { 409 if (!unref(deviceAttrs).length) {
@@ -435,29 +415,6 @@ @@ -435,29 +415,6 @@
435 } 415 }
436 } 416 }
437 417
438 - function setChartOptions(data, keys?) {  
439 - const dataArray: any[] = [];  
440 - for (const key in data) {  
441 - for (const item1 of data[key]) {  
442 - let { ts, value } = item1;  
443 - const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');  
444 - value = Number(value).toFixed(2);  
445 - dataArray.push([time, value, key]);  
446 - }  
447 - }  
448 - keys = keys ? [keys] : unref(deviceAttrs);  
449 - const series: any = keys.map((item) => {  
450 - return {  
451 - name: item,  
452 - type: 'line',  
453 - data: dataArray.filter((item1) => item1[2] === item),  
454 - };  
455 - });  
456 - resize();  
457 - // 设置数据  
458 - setOptions(eChartOptions(series, keys));  
459 - }  
460 -  
461 const handleCancelModal = () => { 418 const handleCancelModal = () => {
462 method.setFieldsValue({ 419 method.setFieldsValue({
463 [SchemaFiled.WAY]: QueryWay.LATEST, 420 [SchemaFiled.WAY]: QueryWay.LATEST,
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 schemas: formSchema(), 18 schemas: formSchema(),
19 showActionButtonGroup: false, 19 showActionButtonGroup: false,
20 fieldMapToTime: [ 20 fieldMapToTime: [
21 - [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'], 21 + [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:mm:ss'],
22 ], 22 ],
23 }); 23 });
24 24
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import moment from 'moment';  
3 import { nextTick, Ref, ref, unref } from 'vue'; 2 import { nextTick, Ref, ref, unref } from 'vue';
4 import { getDeviceHistoryInfo } from '/@/api/alarm/position'; 3 import { getDeviceHistoryInfo } from '/@/api/alarm/position';
5 import { Empty } from 'ant-design-vue'; 4 import { Empty } from 'ant-design-vue';
6 import { useECharts } from '/@/hooks/web/useECharts'; 5 import { useECharts } from '/@/hooks/web/useECharts';
7 - import { dateUtil } from '/@/utils/dateUtil';  
8 - import { AggregateDataEnum, eChartOptions } from '/@/views/device/localtion/config.data'; 6 + import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
9 import { useGridLayout } from '/@/hooks/component/useGridLayout'; 7 import { useGridLayout } from '/@/hooks/component/useGridLayout';
10 import { ColEx } from '/@/components/Form/src/types'; 8 import { ColEx } from '/@/components/Form/src/types';
11 - import { DataSource, DeviceAttributeRecord } from '/@/api/dataBoard/model'; 9 + import { DataSource } from '/@/api/dataBoard/model';
12 import { useForm, BasicForm } from '/@/components/Form'; 10 import { useForm, BasicForm } from '/@/components/Form';
13 - import { formSchema, QueryWay, SchemaFiled } from '../config/historyTrend.config';  
14 - import { DEFAULT_DATE_FORMAT } from '../config/util'; 11 + import { formSchema, SchemaFiled } from '../config/historyTrend.config';
15 import { Loading } from '/@/components/Loading'; 12 import { Loading } from '/@/components/Loading';
16 import BasicModal from '/@/components/Modal/src/BasicModal.vue'; 13 import BasicModal from '/@/components/Modal/src/BasicModal.vue';
17 import { useModalInner } from '/@/components/Modal'; 14 import { useModalInner } from '/@/components/Modal';
18 - import { getAllDeviceByOrg, getDeviceAttributes } from '/@/api/dataBoard';  
19 - import { HistoryData } from '/@/api/alarm/position/model';  
20 - import { EChartsOption } from 'echarts'; 15 + import { getAllDeviceByOrg } from '/@/api/dataBoard';
  16 + import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
21 17
22 type DeviceOption = Record<'label' | 'value' | 'organizationId', string>; 18 type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
23 19
@@ -25,37 +21,14 @@ @@ -25,37 +21,14 @@
25 21
26 const chartRef = ref(); 22 const chartRef = ref();
27 23
28 - const deviceAttrs = ref<DeviceAttributeRecord[]>([]);  
29 -  
30 const loading = ref(false); 24 const loading = ref(false);
31 25
32 const isNull = ref(false); 26 const isNull = ref(false);
33 27
34 - function getSearchParams(value: Recordable) {  
35 - const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value;  
36 - const basicRecord = {  
37 - entityId: deviceId,  
38 - keys: keys  
39 - ? keys  
40 - : unref(deviceAttrs)  
41 - .map((item) => item.identifier)  
42 - .join(),  
43 - interval,  
44 - agg,  
45 - limit,  
46 - };  
47 - if (way === QueryWay.LATEST) {  
48 - return Object.assign(basicRecord, {  
49 - startTs: moment().subtract(startTs, 'ms').valueOf(),  
50 - endTs: Date.now(),  
51 - });  
52 - } else {  
53 - return Object.assign(basicRecord, {  
54 - startTs: moment(startTs).valueOf(),  
55 - endTs: moment(endTs).valueOf(),  
56 - });  
57 - }  
58 - } 28 + const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
  29 + useHistoryData();
  30 +
  31 + const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
59 32
60 function hasDeviceAttr() { 33 function hasDeviceAttr() {
61 if (!unref(deviceAttrs).length) { 34 if (!unref(deviceAttrs).length) {
@@ -65,30 +38,6 @@ @@ -65,30 +38,6 @@
65 } 38 }
66 } 39 }
67 40
68 - function setChartOptions(data: HistoryData, keys?: string | string[]) {  
69 - const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);  
70 -  
71 - const dataArray: [string, string, string][] = [];  
72 - for (const key in data) {  
73 - for (const item1 of data[key]) {  
74 - let { ts, value } = item1;  
75 - const time = dateUtil(ts).format(DEFAULT_DATE_FORMAT);  
76 - value = Number(value).toFixed(2);  
77 - dataArray.push([time, value, key as string]);  
78 - }  
79 - }  
80 - keys = keys ? [keys as string] : unref(deviceAttrs).map((item) => item.identifier);  
81 - const series: EChartsOption['series'] = (keys as string[]).map((item) => {  
82 - return {  
83 - name: item,  
84 - type: 'line',  
85 - data: dataArray.filter((temp) => temp[2] === item),  
86 - };  
87 - });  
88 - // 设置数据  
89 - setOptions(eChartOptions(series, keys));  
90 - }  
91 -  
92 const [register, method] = useForm({ 41 const [register, method] = useForm({
93 schemas: formSchema(), 42 schemas: formSchema(),
94 baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx, 43 baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
@@ -119,7 +68,11 @@ @@ -119,7 +68,11 @@
119 } else { 68 } else {
120 isNull.value = true; 69 isNull.value = true;
121 } 70 }
122 - setChartOptions(res, value.keys); 71 +
  72 + const selectedKeys = unref(deviceAttrs).find(
  73 + (item) => item.identifier === value[SchemaFiled.KEYS]
  74 + );
  75 + setOptions(setChartOptions(res, selectedKeys));
123 }, 76 },
124 }); 77 });
125 78
@@ -128,8 +81,7 @@ @@ -128,8 +81,7 @@
128 try { 81 try {
129 const options = await getAllDeviceByOrg(organizationId); 82 const options = await getAllDeviceByOrg(organizationId);
130 const record = options.find((item) => item.id === value); 83 const record = options.find((item) => item.id === value);
131 - const { deviceProfileId } = record!;  
132 - deviceAttrs.value = (await getDeviceAttributes({ deviceProfileId })) || []; 84 + await getDeviceAttribute(record!);
133 await nextTick(); 85 await nextTick();
134 method.updateSchema({ 86 method.updateSchema({
135 field: SchemaFiled.KEYS, 87 field: SchemaFiled.KEYS,
@@ -157,9 +109,7 @@ @@ -157,9 +109,7 @@
157 109
158 const res = await getDeviceHistoryInfo({ 110 const res = await getDeviceHistoryInfo({
159 entityId: deviceId, 111 entityId: deviceId,
160 - keys: unref(deviceAttrs)  
161 - .map((item) => item.identifier)  
162 - .join(), 112 + keys: unref(getDeviceKeys).join(),
163 startTs: Date.now() - 1 * 24 * 60 * 60 * 1000, 113 startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
164 endTs: Date.now(), 114 endTs: Date.now(),
165 agg: AggregateDataEnum.NONE, 115 agg: AggregateDataEnum.NONE,
@@ -173,7 +123,7 @@ @@ -173,7 +123,7 @@
173 } else { 123 } else {
174 isNull.value = true; 124 isNull.value = true;
175 } 125 }
176 - setChartOptions(res); 126 + setOptions(setChartOptions(res));
177 }; 127 };
178 128
179 const generateDeviceOptions = (dataSource: DataSource[]) => { 129 const generateDeviceOptions = (dataSource: DataSource[]) => {