276 lines
14 KiB
Vue
276 lines
14 KiB
Vue
<template>
|
|
<!-- 区域的表格 -->
|
|
<div class="tableContent">
|
|
<!-- <div class="down">
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
|
<span class="moreIcon"></span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="show">查看详情</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div> -->
|
|
|
|
<div v-if="msg" class="regionBox">
|
|
<!-- 实时触发 -->
|
|
<el-table :data="msg" height="609" style="width: 100%;" 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">
|
|
{{getNameFromTargetType(scope.row.type)}}
|
|
</template>
|
|
<!-- <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="msg" height="609" style="width: 100%;" 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">
|
|
{{getNameFromTargetType(scope.row.type)}}
|
|
</template>
|
|
<!-- <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="msg" height="609" style="width: 100%;" 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">
|
|
{{getNameFromTargetType(scope.row.type)}}
|
|
</template>
|
|
<!-- <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>
|
|
|
|
<el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
|
|
<el-form :model="msg" label-width="80px">
|
|
<el-form-item label="val1">
|
|
<el-time-select
|
|
placeholder="起始时间"
|
|
v-model="startTime"
|
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
|
>
|
|
</el-time-select>
|
|
<el-time-select
|
|
placeholder="结束时间"
|
|
v-model="endTime"
|
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
|
|
>
|
|
</el-time-select>
|
|
</el-form-item>
|
|
<el-form-item label="val2">
|
|
<el-select>
|
|
<el-option> </el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="val3">
|
|
<el-input v-model="dialogVisible"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="val4">
|
|
<el-checkbox-group v-model="checkList">
|
|
<el-checkbox label="数值"></el-checkbox>
|
|
<el-checkbox label="表格"></el-checkbox>
|
|
<el-checkbox label="时间曲线图"></el-checkbox>
|
|
<el-checkbox label="均值图"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary">确认</el-button>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getNameFromTargetType } from '@/utils/targetType';
|
|
import tableShow from './tableShow.vue';
|
|
export default {
|
|
components: { tableShow },
|
|
name: 'tableShow', //表格组件
|
|
props: {
|
|
msg: {
|
|
type: Array
|
|
// default() {
|
|
// return [];
|
|
// }
|
|
},
|
|
triggerType: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
getNameFromTargetType,
|
|
dialogVisible: false,
|
|
startTime: '',
|
|
endTime: '',
|
|
checkList: ['复选框 A']
|
|
};
|
|
},
|
|
methods: {
|
|
handleCommand(command) {
|
|
// 用户名下拉菜单选择事件
|
|
if (command == 'show') {
|
|
this.dialogVisible = true;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// console.log(this.type,'129129');
|
|
},
|
|
watch: {
|
|
msg: {
|
|
handler(newVal) {
|
|
// console.log(newVal,'流量数据table');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
/deep/ .el-table {
|
|
// height: 709px !important;
|
|
// overflow-y: scroll;
|
|
z-index: 900;
|
|
}
|
|
.el-table::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
}
|
|
.tableContent {
|
|
position: relative;
|
|
}
|
|
|
|
.down {
|
|
position: absolute;
|
|
top: -35px;
|
|
right: 5px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.down .moreIcon {
|
|
width: 5px;
|
|
height: 18px;
|
|
background-size: 5px 18px;
|
|
background-image: url(../../assets/img/more.png);
|
|
display: block;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tableContent {
|
|
border: 1px solid #e4e7ed;
|
|
}
|
|
</style> |