RT_SY/src/pages/forecasting/bzy/BzyPhotos.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>测报系统</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/bzy' }"
				>孢子仪</el-breadcrumb-item
			>
			<el-breadcrumb-item>查看图片</el-breadcrumb-item>
		</el-breadcrumb>
		<el-button type="success" size="small" @click="goBackPage()"
			><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
		>
		<div class="check-btns">
			<div class="type-check">
				<el-button type="primary" size="mini" @click="equipStatusCheck('0')"
					>拍照</el-button
				>
				<el-button type="primary" size="mini" @click="equipStatusCheck('1')"
					>刷新</el-button
				>
				<template v-if="userType == 1">
					<el-button
						v-if="delBtnState"
						type="primary"
						size="mini"
						@click="equipStatusCheck('2')"
						>批量删除</el-button
					>
					<el-button
						v-if="!delBtnState"
						type="primary"
						size="mini"
						@click="equipStatusCheck('3')"
						>删除</el-button
					>
					<el-button
						v-if="!delBtnState"
						size="mini"
						@click="equipStatusCheck('4')"
						>取消</el-button
					>
					<el-button type="primary" size="mini" @click="equipStatusCheck('5')"
						>一键删除</el-button
					>
				</template>
			</div>
			<div class="search-box">
				<el-date-picker
					size="mini"
					v-model="timeRange"
					type="daterange"
					range-separator="至"
					clearable
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="DateChange"
				></el-date-picker>
			</div>
		</div>
		<el-row :gutter="30" v-viewer v-if="photoList.length > 0">
			<el-col
				:xs="24"
				:sm="24"
				:md="12"
				:lg="8"
				:xl="6"
				v-for="item in photoList"
				:key="item.addr"
			>
				<div class="photoItem">
					<div class="photoInfo">
						<template v-if="userType == 1">
							<i
								class="iconfont icon-shanchu"
								v-show="delBtnState"
								@click="delectImg(item.id)"
							></i>
							<el-checkbox
								v-show="!delBtnState"
								v-model="item.checked"
							></el-checkbox>
						</template>
					</div>
					<div class="photoImg">
						<!-- 有的图片放到阿里云，有的放到了服务器 -->
						<template v-if="item.addr.indexOf('http') != -1">
							<img :src="item.addr" />
						</template>
						<template v-else>
							<img :src="$host + item.addr" />
						</template>
					</div>
					<div class="date" style="background: #fff">
						{{ (item.addtime * 1000) | formatTime }}
					</div>
					<!-- <div class="photoCtrl">
						<div @click="viewDes()">
							<i class="iconfont icon-wendang"></i>
							查看描述
						</div>
					</div> -->
				</div>
			</el-col>
		</el-row>
		<!-- 暂无数据 -->
		<div style="text-align: center" v-else>
			<img src="@/assets/images/expertDiagnosis/zanwu.png" alt />
		</div>
		<el-pagination
			v-if="photoList.length > 0"
			background
			layout="prev, pager, next"
			:total="totalNum"
			@current-change="changePage"
		></el-pagination>
	</div>
</template>
<script>
export default {
	data() {
		return {
			totalNum: 0,
			timeRange: [],
			delBtnState: true,
			device_id: this.$route.params.id,
			d_id: this.$route.query.d_id,
			photoList: [],
			queryInfo: {
				begin: '',
				end: '',
				page: 1
			},
			idList: [], //删除图片的地址数组
			photoDescDialogVisible: false
		}
	},
	mounted() {
		this.getPhoteList()
	},
	computed: {
		userType: function () {
			//获取用户类型
			return window.sessionStorage.getItem('myuser_type')
		}
	},
	methods: {
		equipStatusCheck(flag) {
			this.active = flag
			if (flag == 0) {
				//拍照
				this.equipBtnControl('takephoto')
			}
			if (flag == 1) {
				//刷新
				this.getPhoteList()
			}
			if (flag == 2) {
				this.delBtnState = false
			}
			if (flag == 3) {
				this.idList = this.photoList
					.filter((item) => {
						return item.checked == true
					})
					.map((item) => {
						return item.id
					})
				if (this.idList.length == 0) {
					this.$message.warning('请选择要删除的设备！')
				} else {
					this.delImgFun(this.idList)
				}
			}
			if (flag == 4) {
				this.photoList.map((item) => {
					item.checked = false
				})
				this.delBtnState = true
			}
			if (flag == 5) {
				this.delImgFun('')
			}
		},
		equipBtnControl(cmd) {
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.admin_device_control',
				data: this.qs.stringify({
					cmd,
					device_type_id: 7,
					d_id: this.$route.query.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		},
		getPhoteList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
				data: this.qs.stringify({
					device_id: this.device_id,
					ret: 'list',
					page: this.queryInfo.page,
					page_number: 8,
					time_begin: this.queryInfo.begin,
					time_end: this.queryInfo.end
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.photoList = data.map((item) => {
						item.checked = false
						return item
					})
					this.totalNum = res.data.data.num
					this.$message.success('请求最新图片成功！')
				}
			})
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getPhoteList()
		},
		DateChange() {
			this.queryInfo.page = 1
			if (this.timeRange) {
				this.queryInfo.begin = parseInt(
					new Date(this.timeRange[0]).getTime() / 1000
				)
				this.queryInfo.end = parseInt(
					new Date(this.timeRange[1]).getTime() / 1000
				)
			} else {
				this.queryInfo.begin = ''
				this.queryInfo.end = ''
			}
			this.getPhoteList()
		},
		viewDes() {
			this.$prompt('图片描述', '添加详情', {
				confirmButtonText: '保存',
				cancelButtonText: '取消'
			})
				.then(({ value }) => {})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
		},
		delImgFun(idList) {
			this.$confirm('此操作将永久删除该设备图片, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url:
							'/api/api_gateway?method=forecast.forecast_system.equip_photo_del',
						data: this.qs.stringify({
							device_id: this.device_id,
							addrlist: JSON.stringify(idList)
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getPhoteList()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		delectImg(id) {
			this.delImgFun([id])
		},
		//返回上一页
		goBackPage() {
			this.$router.go(-1)
		}
	}
}
</script>

<style lang='less' scoped>
.check-btns {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	margin-bottom: 20px;
	align-items: center;
	.el-select {
		width: 90px;
	}
}

.photoItem {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	.photoInfo {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		display: flex;
		justify-content: space-between;
		span {
			color: #fff;
		}
		i {
			cursor: pointer;
			color: red;
			display: none;
		}
	}
	.photoImg {
		height: 250px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.date {
		text-align: center;
		font-size: 14px;
		padding: 10px 0;
	}
	.photoCtrl {
		background-color: #fff;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		color: #666;
		display: flex;
		justify-content: center;
		position: relative;
		cursor: pointer;
		.el-checkbox {
			position: absolute;
			right: 10px;
		}
	}
}
.photoItem:hover {
	.photoInfo i {
		display: block;
	}
}
</style>