|
@@ -17,7 +17,7 @@
|
|
|
// well i know this is trash but the time is reaching
|
|
|
const props = defineProps<{
|
|
|
/** 测点图配置,该测点图在每次数据更新时追加曲线数据,但如果需要更新图表,那么需要更改id来告知组件 */
|
|
|
- chart: { id: number | string; label: string; time: []; data: [number, number, number, number]; monitorData: number[] };
|
|
|
+ chart: { id: number | string; label: string; time: [] | Date; data: [number, number, number, number?]; monitorData: number[] };
|
|
|
timeout?: number;
|
|
|
}>();
|
|
|
|
|
@@ -45,21 +45,24 @@
|
|
|
() => props.chart,
|
|
|
(el) => {
|
|
|
if (!el) return;
|
|
|
- const arr = new Array(el.time.length).fill(0);
|
|
|
- if (chartConfig.value.indexMark === 0 || chartId !== el.id) {
|
|
|
+
|
|
|
+ if (Array.isArray(el.time) || (!Array.isArray(el.time) && chartConfig.value.indexMark === 0) || chartId !== el.id) {
|
|
|
// 初始化配置数据,按照一项数据,生成一个由 20 项数据组成的数组,该数组由此项数据衍生
|
|
|
- // const startFrom = moment(el.time);
|
|
|
+ chartId = el.id;
|
|
|
+ const startFrom = !Array.isArray(el.time) ? moment(el.time) : null;
|
|
|
+ const arr = new Array(!startFrom ? el.time.length : 20).fill(0);
|
|
|
chartConfig.value = {
|
|
|
- label: el.label,
|
|
|
+ label: startFrom ? '' : el.label,
|
|
|
indexMark: 1,
|
|
|
- // x: arr.map(() => {
|
|
|
- // const str = startFrom.format('HH:mm:ss');
|
|
|
- // startFrom.add(props.timeout || 3000);
|
|
|
- // return str;
|
|
|
- // }),
|
|
|
- x: el.time.map((item) => {
|
|
|
- return item + ':00';
|
|
|
- }),
|
|
|
+ x: !startFrom
|
|
|
+ ? (el.time as []).map((item) => {
|
|
|
+ return item + ':00';
|
|
|
+ })
|
|
|
+ : arr.map(() => {
|
|
|
+ const str = startFrom.format('HH:mm:ss');
|
|
|
+ startFrom.add(props.timeout || 3000);
|
|
|
+ return str;
|
|
|
+ }),
|
|
|
y1: arr.map(() => {
|
|
|
return el.data[0];
|
|
|
}),
|
|
@@ -69,12 +72,17 @@
|
|
|
y3: arr.map(() => {
|
|
|
return el.data[2];
|
|
|
}),
|
|
|
- y4: el.monitorData,
|
|
|
+ y4: startFrom
|
|
|
+ ? arr.map((item, index) => {
|
|
|
+ return index == 0 ? el.data[3] : 0;
|
|
|
+ })
|
|
|
+ : el.monitorData,
|
|
|
};
|
|
|
- } else {
|
|
|
+ } else if (!Array.isArray(el.time)) {
|
|
|
// 更新配置
|
|
|
// 由于上面这些数据都是 20 项组成的,当指针移动到 20 时说明上次更新了最后一项
|
|
|
// 那么应该按先进后出的队列模式更新数据了
|
|
|
+
|
|
|
const val = chartConfig.value;
|
|
|
if (val.indexMark === 20) {
|
|
|
val.x.shift();
|
|
@@ -91,6 +99,8 @@
|
|
|
val.y4[val.indexMark] = el.data[3];
|
|
|
// 指针向后移动1
|
|
|
val.indexMark += 1;
|
|
|
+
|
|
|
+ chartConfig.value = val;
|
|
|
}
|
|
|
},
|
|
|
{ immediate: true, deep: true }
|