SnapshotRecord.vue

<template>
	<a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
		<a-form-item label="集团：" style="padding: 5px 0">
			<a-select v-model:value="queryForm.account_id" style="width: 280px" mode="multiple" :maxTagCount="1"
				@change="onAccountChange" :options="accountList" optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="广场：" style="padding: 5px 0">
			<a-select v-model:value="queryForm.plaza_id" style="width: 280px" mode="multiple" :maxTagCount="1"
				@change="onPlazaChange" :options="plazaList" optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="区域信息：" style="padding: 5px 0">
			<a-select v-model:value="queryForm.zone_id" style="width: 280px" mode="multiple" :maxTagCount="1"
				@change="onZoneChange" :options="zoneList" optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="监控点：" style="padding: 5px 0">
			<a-select v-model:value="queryForm.gate_id" style="width: 280px" mode="multiple" :maxTagCount="1"
				:options="gateList" optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="选择日期：" style="padding: 5px 0">
			<a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 280px" />
		</a-form-item>
		<a-form-item label="选择时间：" style="padding: 5px 0">
			<a-time-picker v-model:value="queryForm.startTime" style="width: 140px" />
			<span style="padding: 0 4px">至</span>
			<a-time-picker v-model:value="queryForm.endTime" style="width: 140px" />
		</a-form-item>
		<a-form-item style="padding: 5px 0">
			<a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button>
		</a-form-item>
		<a-form-item style="padding: 5px 0">
			<a-upload :file-list="fileList" :before-upload="beforeUpload">
				<a-button type="primary">
					<upload-outlined></upload-outlined>
					导入
				</a-button>
			</a-upload>
		</a-form-item>
		<a-form-item style="padding: 5px 0">
			<a-button type="primary" @click="deleteBatches">删除</a-button>
		</a-form-item>
	</a-form>

	<div v-loading="isLoading">
		<div class="resultContent" :style="{'height':contentHeight+'px'}">
			<el-row v-for="row in pagedTableDataList">
				<el-col :span="3" v-for="item in row">
					<div style="margin: 0 5px;cursor: pointer;" @click="handleClick(item)" :class="currentItemId==item.id?'actived':''">
						<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
						</el-image>
						<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">unid：{{ item.unid }}</div>
						<div>时间：{{ item.counttime }}</div>
						<div>性别：{{ formatGender(item.gender) }}({{item.age}})</div>
						<div>地点：{{ item.gate_name }}</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
			:show-total="total => `共 ${total} 条`" :pageSizeOptions="['24', '48', '96', '192']" @change="onPageNumChange"
			@showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper style="text-align:center" />
	</div>
	<DetailDialog ref="DetailDialogRef" />
</template>

<script>
	import {
		computed,
		reactive,
		ref,
		toRaw
	} from 'vue'
	import snapshotRecordApi from '@/views/TestDriveHospitality/SnapshotRecord/SnapshotRecordApi'
	import {
		isArray
	} from '@/PublicUtil/Judgment'
	import moment from 'moment'
	import {
		filterEmptyValueInObject,
		formatDate,
		formatTime,
		getPagedList
	} from '@/PublicUtil/PublicUtil'
	// import imgDialog from '../imgDialog.vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import Cookies from "js-cookie"
	import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
	export default {
		components: {
			// imgDialog  ,
			DetailDialog
		},
		setup() {
			// scalar
			const pageNum = ref(1)
			const pageSize = ref(24)
			const total = ref()
			const isLoading = ref(false)
			// sequence
			const dataList = ref([])
			const accountList = ref([])
			const plazaList = ref([])
			const zoneList = ref([])
			const gateList = ref([])
			const currentItemId = ref()
			const currobj = ref({})
			const DetailDialogRef = ref();
			const pagedTableDataList = computed(
				() => {
					return getPagedList(dataList.value, 8)
				}
			)

			const queryForm = reactive({
				account_id: [],
				plaza_id: [],
				zone_id: [],
				gate_id: [],
				date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
				startTime: moment('00:00:00', 'HH:mm:ss'),
				endTime: moment('23:59:59', 'HH:mm:ss'),
			})
			const searchCondition = ref({})
			if (window.localStorage.getItem('searchCondition')) {
				searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
				queryForm.account_id = searchCondition.value.account_id;
				queryForm.plaza_id = searchCondition.value.plaza_id;
				queryForm.zone_id = searchCondition.value.zone_id;
				queryForm.gate_id = searchCondition.value.gate_id;
				queryForm.date = searchCondition.value.date;
				// queryForm.startTime = searchCondition.value.startTime;
				// queryForm.endTime = searchCondition.value.endTime;
			}
			const onPageNumChange = function(num) {
				pageNum.value = num
				confirmSearch()
			}
			const onPageSizeChange = function(current, size) {
				pageNum.value = 1
				pageSize.value = size
				confirmSearch()
			}
			const onAccountChange = function() {
				getPlazaList(1)
			}
			const onPlazaChange = function() {
				getZoneList()
				getGateList()
			}
			const onZoneChange = function() {
				getGateList()
			}
			const getPlazaList = function(val) {
				queryForm.plaza_id = []
				plazaList.value = []
				snapshotRecordApi.getPlazaList({
					account_id: queryForm.account_id.toString()
				}).then(
					(r) => {
						if (isArray(r)) {
							for (const item of r) {
								plazaList.value.push({
									value: item.id,
									label: item.name,
								})
							}
							if (plazaList.value.length) {
								if (!val && searchCondition.value.plaza_id && searchCondition.value.plaza_id.length > 0) {
									queryForm.plaza_id = searchCondition.value.plaza_id
								} else {
									queryForm.plaza_id.push(plazaList.value[0].value)
								}
								getZoneList(1)
								getGateList(1)
								confirmSearch()
							}
						}
					}
				)
			}

			const getZoneList = function(val) {
				queryForm.zone_id = []
				zoneList.value = []
				snapshotRecordApi.getZoneList({
					account_id: queryForm.account_id.toString(),
					plaza_id: queryForm.plaza_id.toString(),
				}).then(
					(r) => {
						if (isArray(r)) {
							for (const item of r) {
								zoneList.value.push({
									value: item.id,
									label: item.name,
								})
							}
							if (zoneList.value.length) {
								if (val && searchCondition.value.zone_id && searchCondition.value.zone_id.length > 0) {
									queryForm.zone_id = searchCondition.value.zone_id
								} else {
									queryForm.zone_id = []
								}
							} else {
								queryForm.zone_id = []
							}
						}
					}
				)
			}

			const getGateList = function(val) {
				gateList.value = []
				snapshotRecordApi.getGateList({
					account_id: queryForm.account_id.toString(),
					plaza_id: queryForm.plaza_id.toString(),
					zone_id: queryForm.zone_id.toString(),
					type:0,
				}).then(
					(r) => {
						if (isArray(r.data)) {
							for (const item of r.data) {
								gateList.value.push({
									value: item.id,
									label: item.name,
								})
							}
							if (gateList.value.length) {
								if (val && searchCondition.value.gate_id && searchCondition.value.gate_id.length > 0) {
									queryForm.gate_id = searchCondition.value.gate_id
								} else {
									queryForm.gate_id = []
								}
							} else {
								queryForm.gate_id = []
							}
						}
					}
				)
			}

			const getAccountList = function() {
				queryForm.account_id = []
				accountList.value = []
				snapshotRecordApi.getAccountList().then(
					(r) => {
						if (isArray(r)) {
							for (const item of r) {
								accountList.value.push({
									value: item.id,
									label: item.name,
								})
							}
							if (accountList.value.length) {
								if (searchCondition.value.account_id && searchCondition.value.account_id.length > 0) {
									queryForm.account_id = searchCondition.value.account_id
								} else {
									queryForm.account_id.push(accountList.value[0].value)
								}
								getPlazaList()
							}
						}
					}
				)
			}

			const confirmSearch = function() {
				isLoading.value = true
				const rawData = toRaw(queryForm)
				console.log(rawData)
				const data = filterEmptyValueInObject({
					mallId: rawData.plaza_id?rawData.plaza_id.toString():'',
					zoneIds: rawData.zone_id?rawData.zone_id.toString():'',
					gateIds: rawData.gate_id?rawData.gate_id.toString():'',
					startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
					endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
					pageNum: pageNum.value - 1,
					pageSize: pageSize.value,
				})
				const storageData = filterEmptyValueInObject({
					account_id: rawData.account_id,
					plaza_id: rawData.plaza_id,
					zone_id: rawData.zone_id,
					gate_id: rawData.gate_id,
					date: rawData.date,
					startTime: rawData.startTime,
					endTime: rawData.endTime,
				})
				let searchCondition = JSON.parse(window.localStorage.getItem('searchCondition'));
				let newSearchCondition = {
					...searchCondition,
					...storageData
				}
				window.localStorage.setItem('searchCondition',JSON.stringify(newSearchCondition))
				snapshotRecordApi.getSnapshotRecordList(data).then(
					(r) => {
						isLoading.value = false
						r.data.pageData.forEach((item) => {
							if (item.features_url) {
								item.features_url = window._baseImgUrl + item.features_url
							}
							if (item.picture_url) {
								item.picture_url = window._baseImgUrl + item.picture_url
							}
							if (item.track_url) {
								item.track_url = window._baseImgUrl + item.track_url
							}
						})
						dataList.value = r.data.pageData
						total.value = r.data.total
						document.getElementsByClassName('resultContent')[0].scrollTop = 0
					}
				)
			}
			const formatGender = function(number) {
				switch (number) {
					case 1: {
						return '男'
					}
					case -1: {
						return '未知'
					}
					case 0: {
						return '女'
					}
					default: {

						break
					}
				}
			}
			const handleClick = function(data) {
				currentItemId.value = data.id
				currobj.value = data;
			}
			const comparativeFun = function() {
				if (currobj.value == {}) {
					ElMessage({
						message: `请选择图片进行对比验证`,
						type: 'warning'
					});
					return false
				}
				if (!currobj.value.picture_url) {
					ElMessage({
						message: `该图片没有特征，请选择有效的图片`,
						type: 'warning'
					})
					return
				}
				const rawData = toRaw(queryForm)
				let parmas = {
					plaza_id: currobj.value.mall_id,
					pic_type: rawData.picType,
					pic_id: currobj.value.id,
					ip: window._baseImgUrl,
					countdate: formatDate(rawData.date)
				}
				DetailDialogRef.value.initDialog(currobj.value, parmas);
			}
			const clickSearch = function() {
				pageNum.value = 1
				confirmSearch()
			}
			// 删除试乘记录
			const deleteBatches = function() {
				if (!currentItemId.value) {
					ElMessage({
						message: `请选择图片`,
						type: 'warning'
					})
					return
				}
				if (!currobj.value.picture_url) {
					ElMessage({
						message: `请选择有效的图片`,
						type: 'warning'
					})
					return
				}
				ElMessageBox.confirm('是否确认删除该试乘记录？', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
				}).then(() => {
					snapshotRecordApi.deleteOneDrive({
						id: currentItemId.value
					}).then(
						(res) => {
							console.log(res)
							if (res.code == 200) {
								ElMessage({
									message: `删除成功`,
									type: 'success'
								})
								confirmSearch()
								currentItemId.value = ''
								currobj.value = {};
							} else {
								ElMessage({
									message: `删除失败`,
									type: 'warning'
								})
							}
						}
					)
				}).catch(() => {})
			}
			const contentHeight = ref(0)
			const __main = function() {
				getAccountList()
				contentHeight.value = window.innerHeight - 310
			}
			
			const fileList = ([]);
			const beforeUpload= function(file) {
				const formData = new FormData();
				formData.append('file', file);
				snapshotRecordApi.uploadDrive(formData).then((res) => {
					if (res.code == 200) {
						ElMessage({
							message: `上传成功`,
							type: 'success'
						})
						clickSearch()
					} else {
						ElMessage({
							message: `上传失败`,
							type: 'warning'
						})
					}
				})
				return false;
			};

			__main()

			return {
				beforeUpload,
				fileList,
				isLoading,
				pageNum,
				pageSize,
				total,
				currobj,
				accountList,
				plazaList,
				zoneList,
				gateList,
				pagedTableDataList,
				currentItemId,
				contentHeight,
				queryForm,
				onPageNumChange,
				onPageSizeChange,
				onAccountChange,
				onPlazaChange,
				onZoneChange,
				confirmSearch,
				handleClick,
				comparativeFun,
				formatGender,
				clickSearch,
				deleteBatches,
				DetailDialogRef,
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "./SnapshotRecord";

	.actived {
		border: 3px solid #1890ff;
	}

	.resultContent {
		overflow: auto;
		min-height: 500px;
	}

	.downBtn {
		color: #409EFF;
		font-size: 15px;
		cursor: pointer;
		display: inline-block;
		width: auto;
	}

	.downBtn1 {
		float: right;
	}
</style>