108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
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>
|
|
</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: 'line',
|
|
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>
|