<template>
|
<!-- 安全管理 ==> 智能安全帽 => 照片管理 -->
|
<div class="main">
|
<!-- main_left -->
|
<div class="main_left">
|
<div class="main_left_search">
|
<div class="search_item">
|
<span>姓名:</span>
|
<el-input size="mini" v-model="queryInfo.userName" placeholder="请输入姓名" clearable></el-input>
|
</div>
|
<div class="search_item">
|
<span>设备编号:</span>
|
<el-input size="mini" v-model="queryInfo.deviceNum" placeholder="请输入设备编号" clearable></el-input>
|
<el-button icon="el-icon-search" @click="queryTable">查询</el-button>
|
</div>
|
</div>
|
<div class="main_left_table">
|
<cpnTable :table-loading="loading" :table-data="dataList" :table-columns="tableColumns"
|
:row-click="rowClick">
|
</cpnTable>
|
</div>
|
</div>
|
<!-- main_right -->
|
<div class="main_right">
|
<div class="search_item">
|
<span>日期:</span>
|
<el-date-picker type="daterange" v-model="pics.date" value-format="yyyy-MM-dd" start-placeholder="开始日期"
|
end-placeholder="结束日期" clearable></el-date-picker>
|
<!-- <el-select v-model="pics.type">
|
<el-option :value="1">所有照片</el-option>
|
<el-option :value="2">安全带取证</el-option>
|
</el-select> -->
|
<el-button icon="el-icon-search" @click="queryPic">查询</el-button>
|
</div>
|
<div class="pic_wrap">
|
<div class="pic_item" v-for="item in pics.data" :key="item.iid">
|
<el-image :src="item.imageUrl" :preview-src-list="[item.imageUrl]" lazy></el-image>
|
<div class="pic_item_info">
|
<div class="pic_item_info_time">{{ item.smTime }}</div>
|
<div class="pic_item_info_des"></div>
|
<div class="pic_item_info_btn">
|
</div>
|
</div>
|
</div>
|
<div class="nopic" v-if="!pics.data.length">暂无图片</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import cpnTable from '@/components/element/Table'
|
export default {
|
data() {
|
return {
|
loading: false,
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 9999,
|
userName: '',
|
deviceNum: '',
|
},
|
dataList: [],
|
tableColumns: [],
|
userId: '', // 用户id
|
pics: {
|
date: [],
|
type: '',
|
data: [],
|
},
|
$http: '', // 接口api路径
|
}
|
},
|
components: {
|
cpnTable
|
},
|
created() {
|
this.$http = this.$api.Safety.SmartHelmet.pic
|
this.setTableColumn()
|
this.getLists()
|
},
|
methods: {
|
setTableColumn() {
|
this.tableColumns = [
|
{selection: true},
|
{name: "用户ID", key: "userId"},
|
{name: "姓名", key: "userName"},
|
{name: "设备编号", key: "deviceNum"},
|
]
|
},
|
getLists() {
|
this.loading = true
|
this.$api.Safety.SmartHelmet.getLists(this.queryInfo).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.dataList = res.data.list
|
}
|
}).finally(() => this.loading = false)
|
},
|
getPics() {
|
const params = {
|
userId: this.userId,
|
pageNum: 1,
|
pageSize: 9999,
|
strTime: this.pics.date?.[0],
|
endTime: this.pics.date?.[1],
|
}
|
this.$http.getPics(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.pics.data = res.data.list
|
}
|
})
|
},
|
rowClick(row) {
|
this.userId = row.userId
|
this.getPics()
|
},
|
queryTable() {
|
this.getLists()
|
},
|
queryPic() {
|
this.getPics()
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/style/layout-main.scss';
|
|
.main {
|
display: flex;
|
flex-direction: row;
|
color: #EBEBEB;
|
|
.main_left {
|
display: flex;
|
flex-direction: column;
|
width: 380px;
|
padding: 14px;
|
margin-right: 18px;
|
border: 1px solid #39B5FE;
|
border-radius: 10px;
|
box-shadow: rgba(0, 145, 255, 0.7) 0 0 18px inset;
|
box-sizing: content-box;
|
|
.search_item {
|
span {
|
display: inline-block;
|
min-width: 54px;
|
margin-right: 6px;
|
text-align: right;
|
}
|
|
.el-input {
|
width: 220px;
|
margin: 0 28px 16px 0;
|
}
|
}
|
|
::v-deep.main_left_table {
|
overflow: hidden;
|
|
.el-table__row {
|
cursor: pointer
|
}
|
|
.el-table {
|
display: flex;
|
flex-direction: column;
|
|
.el-table__body-wrapper {
|
overflow-y: auto;
|
flex: 1;
|
}
|
}
|
}
|
}
|
|
.main_right {
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
padding: 20px;
|
border: 1px solid #39B5FE;
|
background-color: rgba(0, 52, 121, 0.3);
|
border-radius: 10px;
|
box-shadow: rgba(0, 145, 255, 0.7) 0 0 18px inset;
|
box-sizing: content-box;
|
|
.search_item {
|
|
.el-button,
|
.el-input,
|
.el-select {
|
margin: 0 12px 14px 6px;
|
}
|
}
|
|
.pic_wrap {
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
align-items: center;
|
overflow-y: auto;
|
|
.nopic {
|
width: 100%;
|
text-align: center;
|
font-size: 28px;
|
}
|
|
.pic_item {
|
display: flex;
|
flex-direction: column;
|
width: 380px;
|
height: 300px;
|
border: 1px solid green;
|
margin: 10px;
|
|
.el-image {
|
border: 1px solid #4EA7DD;
|
}
|
|
.pic_item_info {
|
position: relative;
|
flex: 1;
|
margin-top: 3px;
|
border: 1px solid #3DC8FF;
|
background: rgba(21, 66, 107, .6);
|
|
.pic_item_info_time {
|
position: absolute;
|
top: 40%;
|
font-size: 13px;
|
text-indent: 20px;
|
}
|
|
.pic_item_info_btn {
|
position: absolute;
|
top: 34px;
|
right: 20px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
