135 lines
4.2 KiB
Vue
135 lines
4.2 KiB
Vue
<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> |