add pie chart

src/views/quality/monitoring/qualityStatistics/graphPage.vue

@@ -0,0 +1,61 @@
+<!-- 
+    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 />
+		</DetailGraph>
+		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
+		<!-- <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';
+
+export default {
+	name: 'GraphPage',
+	components: { DetailGraph, TotalGraph },
+	props: {},
+	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>