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="series" />
		</DetailGraph> -->
		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
			<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
		<!-- <div v-if="!series || series.length == 0" style="color: #777; font-size: 16px; letter-spacing: 1px; text-align: center; padding-top: 56px; text-decoration: underline;">暂无数据</div> -->
		<div v-if="!series || series.length == 0" class="no-data-bg" />
		<LineGraph
			v-else
			:x-props="lineData.xProps"
			:legend="legend"
			:series="series" />
	</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: [],
			series: [],
		};
	},
	mounted() {
		this.buildLegend();

		this.$nextTick(() => {
			this.series = this.lineData.list.map(this.buildSeries);
			console.log('this.series', this.series);
		});
	},
	methods: {
		buildSeries(item) {
			console.log('this.list', this.lineData.list, this.lineData.xProps);
			const seriesItem = {
				name: item.inspectionContent,
				type: 'bar',
				barCategoryGap: 12,
				barWidth: 20,
				data: [],
			};

			this.lineData.xProps.forEach((prop) => {
				if (prop in item) {
					seriesItem.data.push(item[prop]);
				} else {
					seriesItem.data.push(null);
				}
			});

			return seriesItem;
		},
		buildLegend() {
			this.legend = this.lineData.list
				.map((item) => item.inspectionContent)
				.sort();
		},
	},
};
</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>