62 lines
1.1 KiB
Vue
62 lines
1.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 />
|
||
|
|
</DetailGraph>
|
||
|
|
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
|
||
|
|
<!-- <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';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'GraphPage',
|
||
|
|
components: { DetailGraph, TotalGraph },
|
||
|
|
props: {},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
</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>
|