~zhangleilei/supipe.git

			@@ -1,3 +1,250 @@
			<template>
			<div>照片管理</div>
			</template>
			<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>