211 lines
13 KiB
Vue
211 lines
13 KiB
Vue
<template>
|
|
<!-- 区域的表格 -->
|
|
<div class="tableContent">
|
|
<div v-if="tableData && tableData.length > 0">
|
|
<!-- 实时触发 -->
|
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '实时触发'">
|
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
|
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
|
<el-table-column align="center" label="目标类型" prop="type">
|
|
<!-- <template slot-scope="scope">
|
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
</template> -->
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
|
<el-table-column align="center" prop="occ" label="占用状态">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.occ == '1'">占用</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
|
<template slot-scope="scope">
|
|
{{
|
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
|
? Math.abs(scope.row.speed)
|
|
: scope.row.speed == '-1'
|
|
? '-'
|
|
: scope.row.speed
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定时刻'">
|
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
|
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
|
<el-table-column align="center" label="目标类型" prop="type">
|
|
<!-- <template slot-scope="scope">
|
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
</template> -->
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
|
<el-table-column align="center" prop="occ" label="占用状态">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.occ == '1'">占用</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
|
<template slot-scope="scope">
|
|
{{
|
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
|
? Math.abs(scope.row.speed)
|
|
: scope.row.speed == '-1'
|
|
? '-'
|
|
: scope.row.speed
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 固定间隔 -->
|
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定间隔'">
|
|
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
|
<el-table-column align="center" label="目标类型" prop="type">
|
|
<!-- <template slot-scope="scope">
|
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
</template> -->
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>
|
|
<el-table-column align="center" prop="out_flow" label="驶离流量"></el-table-column>
|
|
<el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
|
|
<el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
|
|
<el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
|
|
<el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
|
|
<el-table-column align="center" prop="speed" label="平均速度">
|
|
<template slot-scope="scope">
|
|
{{
|
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
|
? Math.abs(scope.row.speed)
|
|
: scope.row.speed == '-1'
|
|
? '-'
|
|
: scope.row.speed
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div v-else>
|
|
<el-empty :image-size="100"></el-empty>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'regionTable',
|
|
props: {
|
|
tableData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
triggerType: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
//表格字段备注
|
|
tableOptions: [
|
|
{
|
|
type: '实时触发',
|
|
column: [
|
|
{ prop: 'name', label: '区域名称' },
|
|
{ prop: 'time', label: '时间戳' },
|
|
{ prop: 'type', label: '目标类型' },
|
|
{ prop: 'n_stay', label: '存车数' },
|
|
{ prop: 'n_queue', label: '排队数' },
|
|
{ prop: 'occ', label: '占用状态' },
|
|
{ prop: 'speed', label: '空间平均速度' }
|
|
]
|
|
},
|
|
{
|
|
type: '固定时刻',
|
|
column: [
|
|
{ prop: 'name', label: '区域名称' },
|
|
{ prop: 'time', label: '时间戳' },
|
|
{ prop: 'type', label: '目标类型' },
|
|
{ prop: 'n_stay', label: '存车数' },
|
|
{ prop: 'n_queue', label: '排队数' },
|
|
{ prop: 'occ', label: '占用状态' },
|
|
{ prop: 'speed', label: '空间平均速度' }
|
|
]
|
|
},
|
|
{
|
|
type: '固定间隔',
|
|
column: [
|
|
{ prop: 'name', label: '区域名称' },
|
|
{ prop: 'time', label: '时间戳' },
|
|
{ prop: 'type', label: '目标类型' },
|
|
{ prop: 'in_flow', label: '驶入流量' },
|
|
{ prop: 'out_flow', label: '驶离流量' },
|
|
{ prop: 'ave_stay', label: '平均存车数' },
|
|
{ prop: 'ave_queue', label: '平均排队数' },
|
|
{ prop: 'ave_occ', label: '平均占有率' },
|
|
{ prop: 'ave_delay', label: '平均延误' },
|
|
{ prop: 'speed', label: '平均速度' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tableContent {
|
|
position: relative;
|
|
width: 100%;
|
|
// height: 100%;
|
|
}
|
|
</style> |