ClusterResult.vue

<template>
	<div class="containter">
		<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'}">
				<template v-for="person in dataList">
					<div class="classBox">
						<div>
							<div class="boxInfo">
								<span>记录id：{{ person.personUnid }}</span>
								<span style="margin-left: 20px;">开始接待时间：{{ person.startTime }}</span>
								<span style="margin-left: 20px;">结束接待时间：{{ person.endTime }}</span>
								<span style="margin-left: 20px;">接待时长：{{ person.durationStr }}</span>
							</div>
							<el-row v-for="row in getPagedList(person.customerList, 8)">
								<el-col :span="3" v-for="item in row">
									<div style="margin: 0 5px" @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>
					</div>
				</template>
			</div>
			<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
				:show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20', '40', '80']" @change="onPageNumChange"
				@showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper style="text-align:center" />
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		ref,
		toRaw
	} from 'vue'
	import clusterResultApi from '@/views/TestDriveHospitality/ClusterResult/ClusterResultApi'
	import {
		isArray
	} from '@/PublicUtil/Judgment'
	import moment from 'moment'
	import {
		filterEmptyValueInObject,
		formatDate,
		formatTime,
		getPagedList
	} from '@/PublicUtil/PublicUtil'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	export default {
		components: {
		},
		setup() {
			const pageNum = ref(1)
			const pageSize = ref(10)
			const total = ref()
			const isLoading = ref(false)
			const currobj = ref({})
			const currentItemId = ref()
			const dataList = ref([])
			const accountList = ref([])
			const plazaList = ref([])
			const zoneList = ref([])
			const gateList = ref([])
			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 = []
				clusterResultApi.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 > 0) {
								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) {
				zoneList.value = []
				clusterResultApi.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 = []
				clusterResultApi.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 = []
				clusterResultApi.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 clickSearch = function() {
				pageNum.value = 1
				confirmSearch()
			}
			const confirmSearch = function() {
				isLoading.value = true
				const rawData = toRaw(queryForm)
				const data = filterEmptyValueInObject({
					// account_id: rawData.account_id?rawData.account_id.toString():'',
					mallId: rawData.plaza_id?rawData.plaza_id.toString():'',
					zoneIds: rawData.zone_id?rawData.zone_id.toString():'',
					gateIds: rawData.gate_id?rawData.gate_id.toString():'',
					countDate: formatDate(rawData.date),
					startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
					endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
					pageNum: pageNum.value,
					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,
				})
				window.localStorage.setItem('searchCondition', JSON.stringify(storageData))
				clusterResultApi.getClusterResultList(data).then(
					(r) => {
						isLoading.value = false
						sortDataList(r.data.pageData)
						r.data.pageData.forEach((itemPerson) => {
							let durationH = (itemPerson.duration/1000/3600)<1?0:parseInt(itemPerson.duration/1000/3600);
							let durationM = ((itemPerson.duration - (durationH*3600000))/1000/60)<1?0:parseInt((itemPerson.duration - (durationH*3600000))/1000/60);
							let durationS = (itemPerson.duration - (durationH*3600000) - (durationM*60000))/1000
							durationH = durationH>=10?durationH:'0'+durationH
							durationM = durationM>=10?durationM:'0'+durationM
							durationS = durationS>=10?durationS:'0'+durationS
							console.log(durationH+':'+durationM+':'+durationS)
							itemPerson.durationStr = durationH+':'+durationM+':'+durationS
							itemPerson.customerList.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
								}
							})
							itemPerson.staffList.forEach((item1) => {
								if (item1.features_url) {
									item1.features_url = window._baseImgUrl + item1.features_url
								}
								if (item1.picture_url) {
									item1.picture_url = window._baseImgUrl + item1.picture_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 sortDataList = function(list) {
				list.sort(
					(a, b) => {
						return (b.customerList.length - a.customerList.length)
					}
				)
			}
			const handleClick = function(data) {
				currentItemId.value = data.id
				currobj.value = data;
			}
			// 导入接待记录
			const importHospitality = function(data) {
			}
			// 删除试乘记录
			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(() => {
					clusterResultApi.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);
				clusterResultApi.uploadReception(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,
				currentItemId,
				currobj,
				accountList,
				plazaList,
				zoneList,
				gateList,
				dataList,
				contentHeight,
				queryForm,
				onPageNumChange,
				onPageSizeChange,
				onAccountChange,
				onPlazaChange,
				onZoneChange,
				confirmSearch,
				getPagedList,
				handleClick,
				importHospitality,
				formatGender,
				clickSearch,
				deleteBatches
			}
		}
	}
</script>

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

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

	.checkBox {
		margin-left: 10px;
	}

	.boxInfo {
		line-height: 28px;
		margin-bottom: 10px;
		padding-left: 4px;
	}

	.classBox {
		margin: 10px 0;
		border: solid 1px black;
		height: 440px;
		overflow-y: hidden;
	}

	.expand {
		height: auto;
		overflow: auto;
	}

	.expandWord {
		color: #1890ff;
		margin-right: 5px;
		cursor: pointer;
		float: right;
	}

	.iconExpand {
		cursor: pointer;
		float: right;
		color: #1890ff;
		margin-right: 20px;
	}

	.checked {
		background-color: #bbb;
	}

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

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

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