yudao-dev/src/views/quality/monitoring/qualityStatistics/graphPage.vue

<!-- 
    filename: graphPage.vue
    author: liubin
    date: 2023-08-07 13:46:59
    description: 
-->

<template>
	<div class="graph-page">
		<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
			<TotalGraph :summary-list="summaryList" />
		</DetailGraph>
		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
            <LineGraph />
        </DetailGraph>
		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
		<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
	</div>
</template>

<script>
import DetailGraph from './components/detailGraph.vue';
import TotalGraph from './components/graphs/total.vue';
import LineGraph from './components/graphs/line.vue'

export default {
	name: 'GraphPage',
	components: { DetailGraph, TotalGraph, LineGraph },
	props: {
		summaryList: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.graph-page {
	height: 100%;
	display: grid;
	// grid-template-columns: ;
	// grid-template-columns: 1fr 1fr;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: minmax(300px, max-content);
	gap: 12px;
}

#dg1 {
	grid-column: 1 / 3;
}

#dg2 {
	grid-column: 3 / 5;
}

#dg3 {
	grid-column: span 2;
}

#dg4 {
	grid-column: span 2;
}
</style>