|
@@ -4,25 +4,25 @@
|
|
|
<Col :span="12">
|
|
|
<div class="h-400px monitor-chart__wrapper p-20px">
|
|
|
<FormTitle class="monitor-chart__title" icon="gas-monitor-extract" title="累积抽采量" />
|
|
|
- <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" />
|
|
|
+ <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="12">
|
|
|
<div class="h-400px monitor-chart__wrapper p-20px">
|
|
|
<FormTitle class="monitor-chart__title" icon="gas-monitor-co" title="CO浓度" />
|
|
|
- <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" />
|
|
|
+ <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="12">
|
|
|
<div class="h-400px monitor-chart__wrapper p-20px">
|
|
|
<FormTitle class="monitor-chart__title" icon="gas-monitor-np" title="负压浓度" />
|
|
|
- <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" />
|
|
|
+ <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="12">
|
|
|
<div class="h-400px monitor-chart__wrapper p-20px">
|
|
|
<FormTitle class="monitor-chart__title" icon="gas-monitor-flow" title="瞬时流量" />
|
|
|
- <LineMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" />
|
|
|
+ <LineMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
|
|
|
</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
@@ -35,7 +35,7 @@
|
|
|
import LineMulti from '/@/components/chart/LineMulti.vue';
|
|
|
import { Row, Col } from 'ant-design-vue';
|
|
|
import { LimitedArray } from '/@/utils/limitedArray';
|
|
|
- import { onMounted, onUnmounted } from 'vue';
|
|
|
+ import { onMounted, onUnmounted, ref } from 'vue';
|
|
|
defineProps({
|
|
|
deviceId: {
|
|
|
type: String,
|
|
@@ -43,20 +43,22 @@
|
|
|
},
|
|
|
});
|
|
|
|
|
|
- const testChartData = new LimitedArray(10);
|
|
|
+ const testChartData = ref(new LimitedArray(10));
|
|
|
const chartSeriesMap = new Map([
|
|
|
['valueA', '值A'],
|
|
|
- ['valueB', '值A'],
|
|
|
+ ['valueB', '值B'],
|
|
|
]);
|
|
|
let timer: any = null;
|
|
|
|
|
|
onMounted(() => {
|
|
|
- timer = setTimeout(() => {
|
|
|
- testChartData.push({
|
|
|
+ timer = setInterval(() => {
|
|
|
+ const testobj = {
|
|
|
valueA: Math.floor(Math.random() * 10),
|
|
|
valueB: Math.floor(Math.random() * 10),
|
|
|
- date: new Date().getMilliseconds().toString(),
|
|
|
- });
|
|
|
+ date: new Date().getSeconds().toString(),
|
|
|
+ };
|
|
|
+ console.log('debug ', testobj, testChartData.value);
|
|
|
+ testChartData.value.push(testobj);
|
|
|
}, 2000);
|
|
|
});
|
|
|
onUnmounted(() => {
|