73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<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> |