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

@@ -19,10 +19,18 @@ import * as echarts from 'echarts';
 export default {
 	name: 'TotalGraph',
 	components: {},
-	props: {},
+	props: {
+		summaryList: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {
 			config: {},
+            updata: [],
+            downdata: [],
+            checktotal: [],
 			upChart: null,
 			downChart: null,
 			totalChart: null,
@@ -34,59 +42,100 @@ export default {
 	},
 	methods: {
 		init() {
+			this.handleSummaryList();
 			this.initUpdata();
 			this.initDowndata();
 			this.initChecktotal();
 		},
 
+		handleSummaryList() {
+			this.summaryList.map((item) => {
+				this.updata.push({ name: item.lineName, value: item.sumUp });
+				this.downdata.push({ name: item.lineName, value: item.sumDown });
+				this.checktotal.push({ name: item.lineName, value: item.sumCheck });
+			});
+		},
+
 		initUpdata() {
 			if (!this.upChart)
 				this.upChart = echarts.init(document.getElementById('updata'));
-			this.upChart.setOption(this.handleOption({}));
+			this.upChart.setOption(
+				this.handleOption({
+					title: '上片总数',
+					name: '上片数据',
+					data: this.updata
+				})
+			);
 		},
 
 		initDowndata() {
 			if (!this.downChart)
 				this.downChart = echarts.init(document.getElementById('downdata'));
-			this.downChart.setOption(this.handleOption({}));
+			this.downChart.setOption(
+				this.handleOption({
+					title: '下片总数',
+					name: '下片数据',
+					data: this.downdata
+				})
+			);
 		},
 
 		initChecktotal() {
 			if (!this.totalChart)
 				this.totalChart = echarts.init(document.getElementById('checktotal'));
-			this.totalChart.setOption(this.handleOption({}));
+			this.totalChart.setOption(
+				this.handleOption({
+					title: '检测总数',
+					name: '检测数据',
+					data: this.checktotal
+				})
+			);
 		},
 
-		handleOption(option) {
+		handleOption({ title, name, data }) {
 			const defaultOption = {
+				title: {
+					text: title,
+					left: '42%',
+					top: 'center',
+					textAlign: 'right',
+					textStyle: {
+						fontSize: 14,
+					},
+				},
 				tooltip: {
 					trigger: 'item',
 				},
 				legend: {
-					top: '5%',
+					top: 'center',
-					left: 'center',
+					right: '10%',
+					orient: 'vertical',
+					itemWidth: 12,
+					itemHeight: 12,
+					icon: 'circle',
 				},
 				series: [
 					{
-						name: 'Access From',
+						name: name,
 						type: 'pie',
 						radius: ['40%', '70%'],
-						avoidLabelOverlap: false,
+						center: ['35%', '50%'],
+						avoidLabelOverlap: true,
 						label: {
 							show: false,
 							position: 'center',
 						},
-						emphasis: {
+						// emphasis: {
-							label: {
+						// 	label: {
-								show: true,
+						// 		show: true,
-								fontSize: 40,
+						// 		fontSize: 40,
-								fontWeight: 'bold',
+						// 		fontWeight: 'bold',
-							},
+						// 	},
-						},
+						// },
 						labelLine: {
 							show: false,
 						},
-						data: [
+						data: data ?? [
 							{ value: 1048, name: 'Search Engine' },
 							{ value: 735, name: 'Direct' },
 							{ value: 580, name: 'Email' },
@@ -108,29 +157,29 @@ export default {
 	margin-top: 8px;
 	width: 100%;
 	// height: 400px;
-	background: #ccc;
+	// background: #ccc;
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	grid-template-rows: repeat(2, 240px);
-	row-gap: 20px;
+	// row-gap: 20px;
 }
 
 .updata {
-	width: 240px;
+	// width: 320px;
-	justify-self: center;
+	// justify-self: center;
-	background: rgba($color: #f00, $alpha: 0.3);
+	// background: rgba($color: #f00, $alpha: 0.3);
 }
 
 .downdata {
-	width: 240px;
+	// width: 240px;
-	justify-self: center;
+	// justify-self: center;
-	background: rgba($color: #0f0, $alpha: 0.3);
+	// background: rgba($color: #0f0, $alpha: 0.3);
 }
 
 .checktotal {
-	width: 240px;
+	width: 320px;
-	background: rgba($color: #00f, $alpha: 0.3);
-	grid-column: span 2;
 	justify-self: center;
+	// background: rgba($color: #00f, $alpha: 0.3);
+	grid-column: span 2;
 }
 </style>

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

@@ -8,7 +8,7 @@
 <template>
 	<div class="graph-page">
 		<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
-			<TotalGraph />
+			<TotalGraph :summary-list="summaryList" />
 		</DetailGraph>
 		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
 		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
@@ -23,7 +23,12 @@ import TotalGraph from './components/graphs/total.vue';
 export default {
 	name: 'GraphPage',
 	components: { DetailGraph, TotalGraph },
-	props: {},
+	props: {
+		summaryList: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {};
 	},

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

@@ -33,7 +33,7 @@
 				</base-table>
 			</template>
 
-			<GraphPage v-else />
+			<GraphPage v-else :summary-list="summaryList" />
 		</transition>
 
 		<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->