<template>
    <div class="setion">
        <p class="chartTitle">检测数</p>
        <div class="typeContent">
            <p>数值</p>
            <div style="width:95%;margin-bottom: 20px;">
                <tableShow :msg="tableData"/>
            </div>

            <div class="border">
                <detailDialog :msg="tableData"/>
                <lineChart />
            </div>
            <div class="border">
                <detailDialog :msg="tableData"/>
                <barChart />
            </div>
            <div class="border">
                <detailDialog :msg="tableData"/>
                <thermalChart />
            </div>
        </div>
    </div>
</template>
  
<script>
import tableShow from '../chart/tableShow.vue';
import lineChart from '../chart/lineChart.vue';
import barChart from '../chart/barChart.vue';
import detailDialog from '../chart/detailDialog.vue';
import thermalChart from '../chart/thermalChart.vue';
export default {
    name: 'checkChart', //车头时距组件
    data() {
        return {
            tableData: [
                {
                    name: '111',
                    val1: '100',
                    val2: '200',
                    val3: '300',
                    val4: '400'
                }
            ],
        }
    },
    components: {
        lineChart,
        barChart,
        tableShow,
        detailDialog,
        thermalChart
    },

    methods: {
    },
    mounted() {

    }
}
</script>
<style scoped>
.typeContent {
    padding: 20px;
    box-sizing: border-box;
}

.border {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}
</style>