12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <template>
- <div class="monitor-chart">
- <Row :gutter="[40, 40]">
- <Col v-for="(chart, i) in monitorCharts" :key="`monitor-chart-${i}`" :span="12">
- <div class="h-400px monitor-chart__wrapper p-20px">
- <FormTitle class="monitor-chart__title" icon="gas-monitor-extract" :title="chart.title" />
- <components
- :is="componentMap[chart.type]"
- :propTypeArr="chart.seriesMap"
- :xAxisPropType="chart.dateProp"
- :chartData="chartData.items"
- height="350px"
- />
- </div>
- </Col>
- </Row>
- </div>
- </template>
- <script setup lang="ts">
- import FormTitle from '/@/views/vent/gas/components/form/formTitle.vue';
- import BarMulti from '/@/components/chart/BarMulti.vue';
- import LineMulti from '/@/components/chart/LineMulti.vue';
- import { Row, Col } from 'ant-design-vue';
- import { LimitedArray } from '/@/utils/limitedArray';
- import { onMounted, onUnmounted, ref } from 'vue';
- import { monitorCharts } from '../gasPumpMonitor.data';
- import _ from 'lodash-es';
- const props = defineProps({
- device: {
- type: Object,
- require: true,
- },
- });
- const chartData = ref(new LimitedArray(10));
- const componentMap = {
- line: LineMulti,
- bar: BarMulti,
- };
- // const testChartData = ref(new LimitedArray(10));
- // const chartSeriesMap = new Map([
- // ['valueA', '值A'],
- // ['valueB', '值B'],
- // ]);
- let timer: any = null;
- onMounted(() => {
- timer = setInterval(() => {
- const data = Object.assign({ ...props.device }, _.get(props.device, 'datalist[0]'));
- chartData.value.push({
- ...data,
- date: new Date().getSeconds().toString(),
- });
- // const testobj = {
- // valueA: Math.floor(Math.random() * 10),
- // valueB: Math.floor(Math.random() * 10),
- // date: new Date().getSeconds().toString(),
- // };
- // testChartData.value.push(testobj);
- }, 2000);
- });
- onUnmounted(() => {
- clearTimeout(timer);
- });
- </script>
- <style lang="less" scoped>
- @import '@/design/vent/color.less';
- .monitor-chart {
- margin-top: 100px;
- margin-left: 20px;
- margin-right: 20px;
- }
- .monitor-chart__wrapper {
- color: @white;
- border-top: 3px solid @vent-gas-primary-text;
- background-color: @vent-gas-primary-trasparent-bg;
- }
- </style>
|