add pie chart

src/views/quality/monitoring/qualityStatistics/components/detailGraph.vue

@@ -6,26 +6,43 @@
 -->
 
 <template>
-    <div id="detail-graph">
+	<div class="cell">
-        detail graph (echarts)
+		<div class="title">
+			<span>
+				{{ title }}
+			</span>
+		</div>
+		<div class="content">
+			<slot />
+		</div>
 	</div>
 </template>
 
 <script>
 export default {
-    name: "DetailGraph",
+	name: 'DetailGraph',
 	components: {},
-    props: {},
+	props: {
-    data() {
+		title: {
-        return {
+			type: String,
-            configs: {}
+			default: 'detail graph (echarts)',
-        }
 		},
-    computed: {},
+	},
-    methods: {},
+};
-}
 </script>
 
 <style scoped lang="scss">
+.cell {
+	// background: #cfcfcf;
+	border: 1px solid #cfcfcf;
+	border-radius: 8px;
+	padding: 8px;
+}
 
+.title > span {
+	display: inline-block;
+	padding: 4px 8px 4px 6px;
+	background: rgba(20, 145, 210, 0.155);
+	border-left: 4px solid rgba(20, 145, 210);
+}
 </style>

src/views/quality/monitoring/qualityStatistics/components/graphs/total.vue

@@ -0,0 +1,136 @@
+<!-- 
+    filename: total.vue
+    author: liubin
+    date: 2023-08-07 15:04:31
+    description: 
+-->
+
+<template>
+	<div class="total-graph" id="total-graph">
+		<div id="updata" class="updata"></div>
+		<div id="downdata" class="downdata"></div>
+		<div id="checktotal" class="checktotal"></div>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'TotalGraph',
+	components: {},
+	props: {},
+	data() {
+		return {
+			config: {},
+			upChart: null,
+			downChart: null,
+			totalChart: null,
+		};
+	},
+	computed: {},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.initUpdata();
+			this.initDowndata();
+			this.initChecktotal();
+		},
+
+		initUpdata() {
+			if (!this.upChart)
+				this.upChart = echarts.init(document.getElementById('updata'));
+			this.upChart.setOption(this.handleOption({}));
+		},
+
+		initDowndata() {
+			if (!this.downChart)
+				this.downChart = echarts.init(document.getElementById('downdata'));
+			this.downChart.setOption(this.handleOption({}));
+		},
+
+		initChecktotal() {
+			if (!this.totalChart)
+				this.totalChart = echarts.init(document.getElementById('checktotal'));
+			this.totalChart.setOption(this.handleOption({}));
+		},
+
+		handleOption(option) {
+			const defaultOption = {
+				tooltip: {
+					trigger: 'item',
+				},
+				legend: {
+					top: '5%',
+					left: 'center',
+				},
+				series: [
+					{
+						name: 'Access From',
+						type: 'pie',
+						radius: ['40%', '70%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: 40,
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: 'Search Engine' },
+							{ value: 735, name: 'Direct' },
+							{ value: 580, name: 'Email' },
+							{ value: 484, name: 'Union Ads' },
+							{ value: 300, name: 'Video Ads' },
+						],
+					},
+				],
+			};
+
+			return defaultOption;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+#total-graph {
+	margin-top: 8px;
+	width: 100%;
+	// height: 400px;
+	background: #ccc;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-template-rows: repeat(2, 240px);
+	row-gap: 20px;
+}
+
+.updata {
+	width: 240px;
+	justify-self: center;
+	background: rgba($color: #f00, $alpha: 0.3);
+}
+
+.downdata {
+	width: 240px;
+	justify-self: center;
+	background: rgba($color: #0f0, $alpha: 0.3);
+}
+
+.checktotal {
+	width: 240px;
+	background: rgba($color: #00f, $alpha: 0.3);
+	grid-column: span 2;
+	justify-self: center;
+}
+</style>

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>

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

@@ -13,6 +13,8 @@
 			ref="search-bar"
 			@headBtnClick="handleSearchBarBtnClick" />
 
+		<transition mode="out-in" name="fade-down">
+			<template v-if="mode == 'table'">
 				<!-- 列表 -->
 				<base-table
 					v-if="mode == 'table'"
@@ -29,8 +31,10 @@
 				:method-list="tableBtn"
 				@clickBtn="handleTableBtnClick" /> -->
 				</base-table>
+			</template>
 
-		<p v-if="mode == 'graph'">图形版</p>
+			<GraphPage v-else />
+		</transition>
 
 		<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
 		<base-dialog
@@ -46,11 +50,12 @@
 </template>
 
 <script>
+import GraphPage from './graphPage.vue';
 import summaryTable from './components/summaryTable.vue';
 
 export default {
 	name: 'QualityStatistics',
-	components: { summaryTable },
+	components: { GraphPage, summaryTable },
 	props: {},
 	data() {
 		return {
@@ -358,6 +363,22 @@ export default {
 		}
 	}
 }
+
+.fade-down-enter-active,
+.fade-down-leave-active {
+	transition: all 0.3s;
+}
+
+.fade-down-enter,
+.fade-down-leave-to {
+	transform: translateY(20%);
+	opacity: 0;
+}
+
+.fade-down-enter-to,
+.fade-down-leave {
+	transform: translateY(0);
+}
 </style>
 
 <!--