|
|
@@ -8,9 +8,8 @@
|
|
|
<div class="head-info">门禁记录</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 左侧区域 -->
|
|
|
+ <!-- 左侧实时监测区域区域 -->
|
|
|
<div class="left">
|
|
|
- <!-- 实时监测区域 -->
|
|
|
<div class="left-watch">
|
|
|
<!-- 实时监测标题区域 -->
|
|
|
<div class="watch-title">
|
|
|
@@ -19,107 +18,100 @@
|
|
|
</div>
|
|
|
<div class="watch-info">实时监测</div>
|
|
|
</div>
|
|
|
+ <!-- 实时监测筛选区域 -->
|
|
|
+ <div class="watch_search">
|
|
|
+ <div class="search_time">
|
|
|
+ 时间：
|
|
|
+ <el-date-picker
|
|
|
+ type="date"
|
|
|
+ size="small"
|
|
|
+ placeholder="选择日期"
|
|
|
+ v-model="timeValue"
|
|
|
+ @change="handleChange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="search_keyword">
|
|
|
+ 关键字：
|
|
|
+ <el-input
|
|
|
+ style="width: 200px"
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ v-model="keyword"
|
|
|
+ @change="handleChange"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 实时监测表格区域 -->
|
|
|
<div class="watch-form">
|
|
|
<el-table
|
|
|
+ v-loading="loading"
|
|
|
+ element-loading-text="加载中"
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
:data="tableData"
|
|
|
- border
|
|
|
style="width: 100%"
|
|
|
- height="517"
|
|
|
+ height="467"
|
|
|
v-moretable="moretable"
|
|
|
>
|
|
|
- <el-table-column label="捕获" header-align="center" width="100">
|
|
|
+ <el-table-column label="捕获" align="center" width="93">
|
|
|
<template slot-scope="{ row }">
|
|
|
<img
|
|
|
:src="row.pictureScene"
|
|
|
style="width: 82px; height: 82px"
|
|
|
+ @click="handleBigImg(row.pictureScene)"
|
|
|
/>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="识别" header-align="center">
|
|
|
+ <el-table-column label="识别照片" align="center" width="93">
|
|
|
<template slot-scope="{ row }">
|
|
|
- <div class="watch-form-list">
|
|
|
- <div class="table_left">
|
|
|
- <img
|
|
|
- :src="row.pictureTemplate"
|
|
|
- style="width: 82px; height: 82px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="table_center">
|
|
|
- <div>识别ID：{{ row.recognitionId }}</div>
|
|
|
- <div>姓名：{{ row.personName }}</div>
|
|
|
- <div>身份：{{ row.identity }}</div>
|
|
|
- </div>
|
|
|
- <div class="table_right">
|
|
|
- <div>时间：{{ row.dateTime }}</div>
|
|
|
- <div>位置：{{ row.address }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <img
|
|
|
+ :src="row.pictureTemplate"
|
|
|
+ style="width: 82px; height: 82px"
|
|
|
+ @click="handleBigImg(row.pictureTemplate)"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 历史记录区域 -->
|
|
|
- <div class="left-record">
|
|
|
- <!-- 历史记录标题区域 -->
|
|
|
- <div class="record-title">
|
|
|
- <div class="record-img">
|
|
|
- <img src="@/assets/jiantou.png" />
|
|
|
- </div>
|
|
|
- <div class="record-info">历史记录</div>
|
|
|
- </div>
|
|
|
- <!-- 历史记录表格区域 -->
|
|
|
- <div class="record-form">
|
|
|
- <!-- 标题 -->
|
|
|
- <div class="record-form-title">历史记录</div>
|
|
|
- <!-- 时间选择器 -->
|
|
|
- <div class="record-form-time">
|
|
|
- <div class="time">
|
|
|
- <el-date-picker
|
|
|
- type="date"
|
|
|
- size="mini"
|
|
|
- :editable="false"
|
|
|
- placeholder="选择日期"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- v-model="dateTime"
|
|
|
- @change="handleChangeTime"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 表格数据 -->
|
|
|
- <div class="record-form-list">
|
|
|
- <el-table
|
|
|
- :data="recordList"
|
|
|
- style="width: 100%"
|
|
|
- height="428"
|
|
|
- v-moretable="moretable_record"
|
|
|
+ <el-table-column
|
|
|
+ prop="recognitionId"
|
|
|
+ label="识别ID"
|
|
|
+ align="center"
|
|
|
+ width="93"
|
|
|
>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="姓名"
|
|
|
- align="center"
|
|
|
- width="76"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="地址"
|
|
|
- align="center"
|
|
|
- width="89"
|
|
|
- show-overflow-tooltip
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="time"
|
|
|
- label="时间"
|
|
|
- align="center"
|
|
|
- width="76"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="personName"
|
|
|
+ label="姓名"
|
|
|
+ align="center"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="identity"
|
|
|
+ label="身份"
|
|
|
+ align="center"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="dateTime"
|
|
|
+ label="时间"
|
|
|
+ align="center"
|
|
|
+ width="160"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="位置"
|
|
|
+ align="center"
|
|
|
+ width="117"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -151,6 +143,11 @@
|
|
|
<div class="right-pie-body" id="pie"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 点击图片放大区域弹窗 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible" width="500px">
|
|
|
+ <div class="dialog"><img :src="pop_imgurl" /></div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -166,12 +163,10 @@ export default {
|
|
|
tableData: [],
|
|
|
// 实时监测人员列表当前页
|
|
|
page: 1,
|
|
|
- // 历史记录人员列表数据
|
|
|
- recordList: [],
|
|
|
- // 历史记录人员列表当前页
|
|
|
- record_page: 1,
|
|
|
- // 时间选择框选择的时间值
|
|
|
- dateTime: null,
|
|
|
+ // 时间筛选框绑定值
|
|
|
+ timeValue: "",
|
|
|
+ // 关键字搜索框绑定值
|
|
|
+ keyword: "",
|
|
|
// 折线图数据
|
|
|
dateTimeList: [], // 最近7小时的时间数组
|
|
|
alumniList: [], // 校友数组
|
|
|
@@ -182,11 +177,16 @@ export default {
|
|
|
visitorList: [], // 访客数组
|
|
|
// 饼形图数据
|
|
|
pieData: [],
|
|
|
+ // 图片放大弹窗控制属性
|
|
|
+ dialogVisible: false,
|
|
|
+ // 弹窗图片路径
|
|
|
+ pop_imgurl: null,
|
|
|
+ // 实时监测表格加载中效果
|
|
|
+ loading: false,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.getData();
|
|
|
- this.getRecordData();
|
|
|
this.getRatioData();
|
|
|
this.getTrafficData();
|
|
|
},
|
|
|
@@ -200,14 +200,23 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 筛选回调
|
|
|
+ handleChange() {
|
|
|
+ this.tableData = [];
|
|
|
+ this.page = 1;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
// 获取实时监测列表数据
|
|
|
async getData() {
|
|
|
+ this.loading = true;
|
|
|
let res = await this.$axios({
|
|
|
url: "/accessRecord/access/record/realTime",
|
|
|
method: "get",
|
|
|
params: {
|
|
|
page: this.page,
|
|
|
- size: null,
|
|
|
+ // size: null,
|
|
|
+ dateTime: this.timeValue,
|
|
|
+ keyWord: this.keyword,
|
|
|
},
|
|
|
});
|
|
|
// console.log(res);
|
|
|
@@ -216,24 +225,7 @@ export default {
|
|
|
} else {
|
|
|
this.$message.error(res.data.desc);
|
|
|
}
|
|
|
- },
|
|
|
- // 获取历史记录列表数据
|
|
|
- async getRecordData() {
|
|
|
- let res = await this.$axios({
|
|
|
- url: "/accessRecord/access/record/history",
|
|
|
- method: "get",
|
|
|
- params: {
|
|
|
- dateTime: this.dateTime,
|
|
|
- page: this.record_page,
|
|
|
- size: null,
|
|
|
- },
|
|
|
- });
|
|
|
- // console.log(res);
|
|
|
- if (res.data.status == 20001) {
|
|
|
- this.recordList = [...this.recordList, ...res.data.data];
|
|
|
- } else {
|
|
|
- this.$message.error(res.data.desc);
|
|
|
- }
|
|
|
+ this.loading = false;
|
|
|
},
|
|
|
// 获取人员比例数据
|
|
|
async getRatioData() {
|
|
|
@@ -267,22 +259,16 @@ export default {
|
|
|
this.$message.error(res.data.desc);
|
|
|
}
|
|
|
},
|
|
|
- // 历史记录表格时间选择框改变时间回调
|
|
|
- handleChangeTime() {
|
|
|
- this.recordList = [];
|
|
|
- this.record_page = 1;
|
|
|
- this.getRecordData();
|
|
|
+ // 点击图片回调
|
|
|
+ handleBigImg(imgUrl) {
|
|
|
+ this.pop_imgurl = imgUrl;
|
|
|
+ this.dialogVisible = true;
|
|
|
},
|
|
|
// 实时监测表格滑动到底部加载更多回调
|
|
|
moretable() {
|
|
|
this.page += 1;
|
|
|
this.getData();
|
|
|
},
|
|
|
- // 历史记录表格滑动到底部加载更多回调
|
|
|
- moretable_record() {
|
|
|
- this.record_page += 1;
|
|
|
- this.getRecordData();
|
|
|
- },
|
|
|
// 创建折线图
|
|
|
getLineChart() {
|
|
|
let chartLineDom = document.getElementById("line");
|
|
|
@@ -395,6 +381,9 @@ export default {
|
|
|
let myPieChart = echarts.init(chartPieDom);
|
|
|
// 饼形图表配置
|
|
|
let pieOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
legend: {
|
|
|
orient: "vertical",
|
|
|
align: "left",
|
|
|
@@ -443,16 +432,18 @@ export default {
|
|
|
margin: auto;
|
|
|
width: 1161px;
|
|
|
height: 642px;
|
|
|
+ background-image: url(../assets/backImg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
background-color: #24578c;
|
|
|
.head {
|
|
|
display: flex;
|
|
|
width: 1161px;
|
|
|
- height: 55px;
|
|
|
- border-bottom: 1px solid #58beff;
|
|
|
+ height: 60px;
|
|
|
.head-msg {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ margin-top: 5px;
|
|
|
width: 58px;
|
|
|
height: 55px;
|
|
|
img {
|
|
|
@@ -460,6 +451,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.head-info {
|
|
|
+ margin-top: 5px;
|
|
|
line-height: 55px;
|
|
|
font-size: 25px;
|
|
|
font-weight: bold;
|
|
|
@@ -474,12 +466,12 @@ export default {
|
|
|
height: 586px;
|
|
|
.left-watch {
|
|
|
margin: 0 11px 0 17px;
|
|
|
- width: 487px;
|
|
|
+ width: 756px;
|
|
|
height: 571px;
|
|
|
.watch-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- width: 487px;
|
|
|
+ width: 756px;
|
|
|
height: 54px;
|
|
|
.watch-img {
|
|
|
width: 26px;
|
|
|
@@ -497,86 +489,28 @@ export default {
|
|
|
color: #0febff;
|
|
|
}
|
|
|
}
|
|
|
- .watch-form {
|
|
|
- width: 487px;
|
|
|
- height: 517px;
|
|
|
- // border: 1px solid #58beff;
|
|
|
- .watch-form-list {
|
|
|
- display: flex;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .left-record {
|
|
|
- width: 254px;
|
|
|
- height: 571px;
|
|
|
- .record-title {
|
|
|
+ .watch_search {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 254px;
|
|
|
- height: 54px;
|
|
|
- .record-img {
|
|
|
- width: 26px;
|
|
|
- height: 16px;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ margin-top: -10px;
|
|
|
+ width: 756px;
|
|
|
+ height: 60px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .search_time {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
- .record-info {
|
|
|
- margin-left: 10px;
|
|
|
- width: 79px;
|
|
|
- height: 25px;
|
|
|
- font-size: 19px;
|
|
|
- font-weight: bold;
|
|
|
- color: #0febff;
|
|
|
+ .search_keyword {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: -165px;
|
|
|
}
|
|
|
}
|
|
|
- .record-form {
|
|
|
- width: 254px;
|
|
|
- height: 517px;
|
|
|
- border: 1px solid #fff;
|
|
|
- .record-form-title {
|
|
|
- width: 254px;
|
|
|
- height: 48px;
|
|
|
- line-height: 48px;
|
|
|
- font-size: 19px;
|
|
|
- font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- border-bottom: 1px solid #fff;
|
|
|
- }
|
|
|
- .record-form-time {
|
|
|
- width: 254px;
|
|
|
- height: 40px;
|
|
|
- .time {
|
|
|
- margin: auto;
|
|
|
- width: 160px;
|
|
|
- line-height: 40px;
|
|
|
- .el-date-editor.el-input {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .record-form-list {
|
|
|
- width: 254px;
|
|
|
- height: 429px;
|
|
|
- }
|
|
|
+ .watch-form {
|
|
|
+ width: 756px;
|
|
|
+ height: 467px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -643,12 +577,23 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .dialog {
|
|
|
+ width: 100%;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
::v-deep .el-table,
|
|
|
::v-deep .el-table__expanded-cell {
|
|
|
background-color: transparent;
|
|
|
background-color: #24578c;
|
|
|
}
|
|
|
|
|
|
+ ::v-deep .el-dialog__header,
|
|
|
+ ::v-deep .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
::v-deep .el-table th,
|
|
|
::v-deep .el-table tr,
|
|
|
::v-deep .el-table td {
|
|
|
@@ -661,16 +606,19 @@ export default {
|
|
|
}
|
|
|
|
|
|
::v-deep .el-table__header-wrapper {
|
|
|
- font-size: 19px;
|
|
|
+ background-color: transparent;
|
|
|
+ background-color: #25608f;
|
|
|
}
|
|
|
- // 滚动条背景色
|
|
|
+ // 滚动条隐藏
|
|
|
::-webkit-scrollbar {
|
|
|
- background: #24578c;
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ color: transparent;
|
|
|
}
|
|
|
|
|
|
/*定义滑块 样式*/
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
- border-radius: 3px;
|
|
|
+ border-radius: 18px;
|
|
|
background-color: rgba($color: #063568, $alpha: 0.5);
|
|
|
}
|
|
|
}
|
