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

@@ -15,33 +15,42 @@ import * as echarts from 'echarts';
 export default {
 	name: 'LineDataChart',
 	components: {},
-	props: {},
+	props: {
+        xProps: {
+            type: Array,
+            default: () => [],
+        },
+        legend: {
+            type: Array,
+            default: () => [],
+        }
+    },
 	data() {
 		return {
 			chart: null,
-			inspectionContents: [
+			// inspectionContents: [
-				'检测内容1',
+			// 	'检测内容1',
-				'检测内容2',
+			// 	'检测内容2',
-				'检测内容3',
+			// 	'检测内容3',
-				'检测内容4',
+			// 	'检测内容4',
-				'检测内容5',
+			// 	'检测内容5',
-				'检测内容6',
+			// 	'检测内容6',
-				'检测内容7',
+			// 	'检测内容7',
-				'检测内容8',
+			// 	'检测内容8',
-				'检测总数',
+			// 	'检测总数',
-				'比例%',
+			// 	'比例%',
-			],
+			// ],
-			xProps: [
+			// xProps: [
-				'产线1',
+			// 	'产线1',
-				'产线2',
+			// 	'产线2',
-				'产线3',
+			// 	'产线3',
-				'产线4',
+			// 	'产线4',
-				'产线5',
+			// 	'产线5',
-				'产线6',
+			// 	'产线6',
-				'产线7',
+			// 	'产线7',
-				'产线8',
+			// 	'产线8',
-				'产线9',
+			// 	'产线9',
-			],
+			// ],
 			series: [
 				{
 					name: '检测内容1',
@@ -106,6 +115,7 @@ export default {
 			this.setOption();
 		},
 		setOption(option) {
+            console.log("legend", this.legend)
 			const defaultOption = {
 				// title: {
 				// 	text: '折线图',
@@ -121,7 +131,7 @@ export default {
 					trigger: 'axis',
 				},
 				legend: {
-					data: this.inspectionContents,
+					data: this.legend,
                     top: '5%',
                     icon: 'circle'
 				},

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

@@ -11,8 +11,11 @@
 			<TotalGraph :summary-list="summaryList" />
 		</DetailGraph>
 		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
-            <LineGraph />
+			<LineGraph
-        </DetailGraph>
+				:x-props="lineData.xProps"
+				:legend="legend"
+				:series="lineData.list.map(buildSeries)" />
+		</DetailGraph>
 		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
 		<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
 	</div>
@@ -21,7 +24,7 @@
 <script>
 import DetailGraph from './components/detailGraph.vue';
 import TotalGraph from './components/graphs/total.vue';
-import LineGraph from './components/graphs/line.vue'
+import LineGraph from './components/graphs/line.vue';
 
 export default {
 	name: 'GraphPage',
@@ -31,12 +34,45 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		lineData: {
+			type: Object,
+			default: () => ({}),
+		},
 	},
 	data() {
-		return {};
+		return {
+			legend: [],
+		};
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		buildSeries(item) {
+			if (!this.legend.length) this.buildLegend();
+			const data = [];
+			this.legend.forEach((key) => {
+				console.log('key item.key', item, key, item[key]);
+				if (item[key] == null) item[key] = null;
+				data.push(item[key]);
+			});
+			console.log('buildSeries', {
+				name: item.inspectionContent,
+				type: 'line',
+				data: data,
+			});
+			return {
+				name: item.inspectionContent,
+				type: 'line',
+				data: data,
+			};
+		},
+		buildLegend() {
+			this.legend = this.lineData.list
+				.map((item) => item.inspectionContent)
+				.sort();
+			// this.legend.push('检测总数', '比例%')
+			console.log('buliding legend', this.legend);
+		},
+	},
 };
 </script>
 

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

@@ -33,7 +33,10 @@
 				</base-table>
 			</template>
 
-			<GraphPage v-else :summary-list="summaryList" />
+			<GraphPage
+				v-else
+				:summary-list="summaryList"
+				:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
 		</transition>
 
 		<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->