Browse Source

[Feat 0000] 模拟检测图标处的数据

houzekong 11 months ago
parent
commit
d27bab9a03
1 changed files with 13 additions and 11 deletions
  1. 13 11
      src/views/vent/gas/gasPumpMonitor/components/monitorChart.vue

+ 13 - 11
src/views/vent/gas/gasPumpMonitor/components/monitorChart.vue

@@ -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(() => {