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
				: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>
</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: () => [],
		},
		lineData: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			legend: [],
		};
	},
	computed: {},
	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>

<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>