<template>
    <!-- 触发类型 -->
    <div class="setion">
        <p class="chartTitle"><span class="titleIcon"></span> {{ title }}</p>
        <div class="typeContent">
            <el-card style="width: 150px; margin-bottom: 20px; text-align: center">
                <div style="font-size: 30px; font-weight: bold">99</div>
                <div style="padding: 14px">
                    <span>数值</span>
                    <div class="bottom clearfix">
                        <time class="time">17:49</time>
                        <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                </div>
            </el-card>
            <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
                <tableShow :msg="data" :type="triggerType" />
            </div>
            <div v-if="pageType == '区域'">
                <regionTable :msg="data" :type="triggerType" />
            </div>
            <div class="border">
                <detailDialog />
                <lineChart :title="title" :pageType="pageType" :list="data" :status="triggerType" />
            </div>
            <div class="border">
                <detailDialog />
                <avgChart :pageType="pageType" :list="data" :status="triggerType" :title="title" />
            </div>
        </div>
    </div>
</template>
  
<script>
import lineChart from '../chart/lineChart.vue';
import barChart from '../chart/barChart.vue';
import thermalChart from '../chart/thermalChart.vue';
import tableShow from '../chart/tableShow.vue';
import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue';
import avgChart from '../chart/avgChart.vue';
export default {
    name: 'speedChart', //速度组件
    props: ['pageType', 'triggerType', 'data'],
    // pagetype:断面 || 区域  triggerType 触发||周期时刻||周期统计
    components: {
        lineChart,
        barChart,
        tableShow,
        detailDialog,
        regionTable,
        thermalChart,
        avgChart
    },
    data() {
        return {
            title: '速度组件',
            tableData: [
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 35.2,
                    event: 'in',
                    lane: 0,
                    headWay: 6.5
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 70.2,
                    event: 'in',
                    lane: 0,
                    headWay: 6.5
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 6.5
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 6.5
                },
                {
                    steam_id: 0,
                    timestamp: '2022-10-01 09:15:10.156',
                    obj_id: 125,
                    type: 'car',
                    plate: '苏A0131M',
                    speed: 60.2,
                    event: 'in',
                    lane: 0,
                    headWay: 6.5
                }
            ]
            // triggerType: '周期统计',
        };
    },
    created() {
        // console.log(this.data);
    },
    methods: {},
    mounted() {}
};
</script>
<style scoped>
.typeContent {
    box-sizing: border-box;
}

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