monitorChart.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div class="monitor-chart">
  3. <Row :gutter="[40, 40]">
  4. <Col v-for="(chart, i) in monitorCharts" :key="`monitor-chart-${i}`" :span="12">
  5. <div class="h-400px monitor-chart__wrapper p-20px">
  6. <FormTitle class="monitor-chart__title" icon="gas-monitor-extract" :title="chart.title" />
  7. <components
  8. :is="componentMap[chart.type]"
  9. :propTypeArr="chart.seriesMap"
  10. :xAxisPropType="chart.dateProp"
  11. :chartData="chartData.items"
  12. height="350px"
  13. />
  14. </div>
  15. </Col>
  16. </Row>
  17. </div>
  18. </template>
  19. <script setup lang="ts">
  20. import FormTitle from '/@/views/vent/gas/components/form/formTitle.vue';
  21. import BarMulti from '/@/components/chart/BarMulti.vue';
  22. import LineMulti from '/@/components/chart/LineMulti.vue';
  23. import { Row, Col } from 'ant-design-vue';
  24. import { LimitedArray } from '/@/utils/limitedArray';
  25. import { onMounted, onUnmounted, ref } from 'vue';
  26. import { monitorCharts } from '../gasPumpMonitor.data';
  27. import _ from 'lodash-es';
  28. const props = defineProps({
  29. device: {
  30. type: Object,
  31. require: true,
  32. },
  33. });
  34. const chartData = ref(new LimitedArray(10));
  35. const componentMap = {
  36. line: LineMulti,
  37. bar: BarMulti,
  38. };
  39. // const testChartData = ref(new LimitedArray(10));
  40. // const chartSeriesMap = new Map([
  41. // ['valueA', '值A'],
  42. // ['valueB', '值B'],
  43. // ]);
  44. let timer: any = null;
  45. onMounted(() => {
  46. timer = setInterval(() => {
  47. const data = Object.assign({ ...props.device }, _.get(props.device, 'datalist[0]'));
  48. chartData.value.push({
  49. ...data,
  50. date: new Date().getSeconds().toString(),
  51. });
  52. // const testobj = {
  53. // valueA: Math.floor(Math.random() * 10),
  54. // valueB: Math.floor(Math.random() * 10),
  55. // date: new Date().getSeconds().toString(),
  56. // };
  57. // testChartData.value.push(testobj);
  58. }, 2000);
  59. });
  60. onUnmounted(() => {
  61. clearTimeout(timer);
  62. });
  63. </script>
  64. <style lang="less" scoped>
  65. @import '@/design/vent/color.less';
  66. .monitor-chart {
  67. margin-top: 100px;
  68. margin-left: 20px;
  69. margin-right: 20px;
  70. }
  71. .monitor-chart__wrapper {
  72. color: @white;
  73. border-top: 3px solid @vent-gas-primary-text;
  74. background-color: @vent-gas-primary-trasparent-bg;
  75. }
  76. </style>