|
|
@@ -14,11 +14,16 @@
|
|
|
:tableItems="tableItems"
|
|
|
:shows="tableShows"
|
|
|
>
|
|
|
-<!-- <template #right>-->
|
|
|
-<!-- <el-button size="mini" type="primary">导出数据</el-button>-->
|
|
|
-<!-- </template>-->
|
|
|
- <template #img="scope">
|
|
|
- <img :src="scope.row.img" alt="" />
|
|
|
+ <!-- <template #right>-->
|
|
|
+ <!-- <el-button size="mini" type="primary">导出数据</el-button>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <template #recordImage="scope">
|
|
|
+ <img
|
|
|
+ :src="scope.row.recordImage"
|
|
|
+ @click="clickImg(scope.row.recordImage)"
|
|
|
+ alt="人员照片"
|
|
|
+ width="140"
|
|
|
+ />
|
|
|
</template>
|
|
|
<template #handler="scope">
|
|
|
<el-button type="text" @click="open(scope.row)">加入白名单</el-button>
|
|
|
@@ -30,6 +35,19 @@
|
|
|
@sizeChange="sizeChange"
|
|
|
@pageChange="pageChange"
|
|
|
></table-footer>
|
|
|
+ <el-dialog
|
|
|
+ title="人员违规报警图片"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="50%"
|
|
|
+ >
|
|
|
+ <img :src="imgUrl" alt="人员违规报警图片" width="100%" />
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -38,10 +56,11 @@ import { mapState } from "vuex";
|
|
|
import XForm from "@/components/XForm";
|
|
|
import NewTable from "@/components/newTable/NewTable";
|
|
|
import TableFooter from "@/components/TableFooter";
|
|
|
+import { postPerson } from "@/utils/chenApi.js";
|
|
|
export default {
|
|
|
name: "ViolationUser",
|
|
|
computed: {
|
|
|
- ...mapState(["color"]),
|
|
|
+ ...mapState(["color", "ip"]),
|
|
|
},
|
|
|
components: {
|
|
|
XForm,
|
|
|
@@ -50,7 +69,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- day: 2,
|
|
|
+ day: 1,
|
|
|
selectItems: [
|
|
|
{
|
|
|
id: 3,
|
|
|
@@ -60,20 +79,6 @@ export default {
|
|
|
col: 1,
|
|
|
},
|
|
|
{
|
|
|
- id: 4,
|
|
|
- type: "text",
|
|
|
- text: "本周",
|
|
|
- value: 2,
|
|
|
- col: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- type: "text",
|
|
|
- text: "本月",
|
|
|
- value: 3,
|
|
|
- col: 1,
|
|
|
- },
|
|
|
- {
|
|
|
id: 6,
|
|
|
type: "datepicker",
|
|
|
placeholder: [],
|
|
|
@@ -92,33 +97,22 @@ export default {
|
|
|
list: [],
|
|
|
tableItems: [
|
|
|
{
|
|
|
- prop: "time",
|
|
|
+ prop: "swingTime",
|
|
|
label: "时间",
|
|
|
minWidth: "100",
|
|
|
- slotName: "time",
|
|
|
+ slotName: "swingTime",
|
|
|
},
|
|
|
{
|
|
|
- prop: "img",
|
|
|
+ prop: "recordImage",
|
|
|
label: "照片",
|
|
|
minWidth: "100",
|
|
|
- slotName: "img",
|
|
|
+ slotName: "recordImage",
|
|
|
},
|
|
|
{
|
|
|
- prop: "location",
|
|
|
- label: "位置",
|
|
|
+ prop: "deviceName",
|
|
|
+ label: "进入区域",
|
|
|
minWidth: "100",
|
|
|
- slotName: "location",
|
|
|
- },
|
|
|
- {
|
|
|
- prop: "content",
|
|
|
- label: "事件",
|
|
|
- minWidth: "100",
|
|
|
- slotName: "content",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "操作",
|
|
|
- minWidth: "100",
|
|
|
- slotName: "handler",
|
|
|
+ slotName: "deviceName",
|
|
|
},
|
|
|
],
|
|
|
tableShows: {
|
|
|
@@ -128,6 +122,9 @@ export default {
|
|
|
total: 0,
|
|
|
pageNum: 1,
|
|
|
pageSize: 20,
|
|
|
+ form: {},
|
|
|
+ dialogVisible: false,
|
|
|
+ imgUrl: "", // 点击图片后放大的图片路径
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -141,12 +138,47 @@ export default {
|
|
|
this.pageNum = val;
|
|
|
this.init();
|
|
|
},
|
|
|
- init() {},
|
|
|
+ init() {
|
|
|
+ const params = {
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ startSwingTime: this.form.time ? this.form.time[0] : "",
|
|
|
+ endSwingTime: this.form.time ? this.form.time[1] : "",
|
|
|
+ };
|
|
|
+ console.log(this.form.time);
|
|
|
+ postPerson(params).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.total = parseInt(res.total);
|
|
|
+ this.list = res.data.data.pageData;
|
|
|
+ this.list.forEach((item) => {
|
|
|
+ item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
setDay(data) {
|
|
|
this.day = data.type;
|
|
|
+ this.form.time = [];
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ onClickType(val) {
|
|
|
+ this.day = 0;
|
|
|
+ this.form.time = val.data.value1;
|
|
|
+ if (!this.form.time) {
|
|
|
+ this.$message.warning("请选择时间再查询");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.init();
|
|
|
},
|
|
|
- onClickType() {},
|
|
|
open() {},
|
|
|
+ // 点击图片放大
|
|
|
+ clickImg(url) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.imgUrl = url;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
East