|
|
@@ -21,27 +21,32 @@
|
|
|
</div>
|
|
|
<!-- 实时监测表格区域 -->
|
|
|
<div class="watch-form">
|
|
|
- <el-table :data="tableData1.slice(0, 5)" border style="width: 100%">
|
|
|
+ <el-table :data="tableData" border style="width: 100%" height="517">
|
|
|
<el-table-column label="捕获" header-align="center" width="100">
|
|
|
<template slot-scope="{ row }">
|
|
|
- <img :src="row.url" style="width: 82px; height: 60px" />
|
|
|
+ <img
|
|
|
+ :src="row.pictureScene"
|
|
|
+ style="width: 82px; height: 82px"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="识别" header-align="center">
|
|
|
<template slot-scope="{ row }">
|
|
|
<div class="watch-form-list">
|
|
|
- <div>
|
|
|
- <img :src="row.msg.url" style="width: 82px; height: 60px" />
|
|
|
+ <div class="table_left">
|
|
|
+ <img
|
|
|
+ :src="row.pictureTemplate"
|
|
|
+ style="width: 82px; height: 82px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <div>姓名:{{ row.msg.name }}</div>
|
|
|
- <div>识别ID:{{ row.msg.id }}</div>
|
|
|
- <div>车牌:{{ row.msg.number }}</div>
|
|
|
+ <div class="table_center">
|
|
|
+ <div>识别ID：{{ row.recognitionId }}</div>
|
|
|
+ <div>姓名：{{ row.personName }}</div>
|
|
|
+ <div>身份：{{ row.identity }}</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <div>身份:{{ row.msg.type }}</div>
|
|
|
- <div>位置:{{ row.msg.place }}</div>
|
|
|
- <div>时间:{{ row.msg.time }}</div>
|
|
|
+ <div class="table_right">
|
|
|
+ <div>时间：{{ row.dateTime }}</div>
|
|
|
+ <div>位置：{{ row.address }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -68,36 +73,41 @@
|
|
|
<div class="record-form-time">
|
|
|
<div class="time">
|
|
|
<el-date-picker
|
|
|
- v-model="value"
|
|
|
type="date"
|
|
|
size="mini"
|
|
|
:editable="false"
|
|
|
placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ v-model="dateTime"
|
|
|
+ @change="getRecordData"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 表格数据 -->
|
|
|
<div class="record-form-list">
|
|
|
- <el-table :data="tableData1" style="width: 100%" height="428">
|
|
|
+ <el-table :data="recordList" style="width: 100%" height="428">
|
|
|
<el-table-column
|
|
|
- prop="msg.name"
|
|
|
+ prop="name"
|
|
|
label="姓名"
|
|
|
align="center"
|
|
|
width="76"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="msg.number"
|
|
|
- label="车牌号"
|
|
|
+ prop="address"
|
|
|
+ label="地址"
|
|
|
align="center"
|
|
|
width="89"
|
|
|
+ show-overflow-tooltip
|
|
|
>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="时间" align="center" width="76">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- {{ row.msg.time.split(" ")[1] }}
|
|
|
- </template>
|
|
|
+ <el-table-column
|
|
|
+ prop="time"
|
|
|
+ label="时间"
|
|
|
+ align="center"
|
|
|
+ width="76"
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
@@ -143,179 +153,8 @@ export default {
|
|
|
name: "HelloWorld",
|
|
|
data() {
|
|
|
return {
|
|
|
- // 时间选择器绑定的值
|
|
|
- value: "",
|
|
|
// 人员数据
|
|
|
- tableData1: [
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=402105144,1124774539&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img0.baidu.com/it/u=3538708005,999399332&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "王力宏啊",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "教师",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "教师",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "家长",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "临时人员",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "学生",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "教师",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "家长",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "临时人员",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "学生",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "教师",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "家长",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "临时人员",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "学生",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
- msg: {
|
|
|
- url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
- id: "42938",
|
|
|
- time: "2018-12-23 14:32:26",
|
|
|
- name: "吴亦凡",
|
|
|
- place: "1号机动车出口",
|
|
|
- number: "赣BU2569",
|
|
|
- type: "教师",
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ tableData: [],
|
|
|
// 折线图表配置
|
|
|
lineOption: {
|
|
|
tooltip: {
|
|
|
@@ -437,13 +276,53 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
+ // 历史记录列表
|
|
|
+ recordList: [],
|
|
|
+ // 时间选择框选择的时间值
|
|
|
+ dateTime: null,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
// 初始化图表
|
|
|
this.initChart();
|
|
|
+ this.getData();
|
|
|
+ this.getRecordData();
|
|
|
},
|
|
|
methods: {
|
|
|
+ async getData() {
|
|
|
+ let res = await this.$axios({
|
|
|
+ url: "/popup-api/access/record/realTime",
|
|
|
+ method: "get",
|
|
|
+ params: {
|
|
|
+ page: 1,
|
|
|
+ size: null,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log(res);
|
|
|
+ if (res.data.status == 20001) {
|
|
|
+ this.tableData = res.data.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.desc);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取历史记录列表数据
|
|
|
+ async getRecordData() {
|
|
|
+ let res = await this.$axios({
|
|
|
+ url: "/popup-api/access/record/history",
|
|
|
+ method: "get",
|
|
|
+ params: {
|
|
|
+ dateTime: this.dateTime,
|
|
|
+ page: 1,
|
|
|
+ size: null,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // console.log(res);
|
|
|
+ if (res.data.status == 20001) {
|
|
|
+ this.recordList = res.data.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.desc);
|
|
|
+ }
|
|
|
+ },
|
|
|
// 创建图表
|
|
|
initChart() {
|
|
|
var chartLineDom = document.getElementById("line");
|
|
|
@@ -523,7 +402,23 @@ export default {
|
|
|
border: 1px solid #58beff;
|
|
|
.watch-form-list {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ .table_left {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .table_center {
|
|
|
+ flex: 2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 10px;
|
|
|
+ div{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table_right {
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
