batchesResult.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: 240px" :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: 240px" :maxTagCount="1" :options="plazaList" optionFilterProp="label" show-search @change="onPlazaChange">
				</a-select>
			</a-form-item>
      <a-form-item label="店铺：" style="padding: 5px 0">
        <a-select v-model:value="queryForm.zone_id"
                  style="width: 240px"
                  mode="multiple"
                  :maxTagCount="1"
                  :options="zoneList"
                  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'" :allowClear="false" style="width: 240px" />
			</a-form-item>
			<a-form-item label="选择时间：" style="padding: 5px 0">
				<a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.startTime" style="width: 140px" />
					<span style="padding: 0 4px">至</span>
				<a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.endTime" style="width: 140px" />
			</a-form-item>
			<a-form-item label="批次人数：" style="padding: 5px 0">
        <a-input-number v-model:value="queryForm.minNum" :min="0" :max="100000000" style="width: 140px"/>
        <span style="padding: 0 4px">至</span>
        <a-input-number v-model:value="queryForm.maxNum" :min="queryForm.maxNum||0" :max="100000000" style="width: 140px"/>
      </a-form-item>
      <a-form-item label="批次ID：" style="padding: 5px 0">
        <a-input v-model:value="queryForm.batchId" style="width: 240px" :allowClear="true"/>
      </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-button type="primary" @click="concatBatches">合并</a-button>
			</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" :class="person.expand?'expand':''">
						<div :class="person.checked?'checked':''">
							<div class="boxInfo">
								<span class="iconExpand" v-show="!person.expand">▶</span>
								<span class="iconExpand" v-show="person.expand">▼</span>
								<span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
								<el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox>
								批次id：{{ '   ' + person.batchId }}
								<span style="margin-left: 20px;">图片数量：{{ person.faceRecognitionVoList.length }}</span>
							</div>
							<el-row v-for="row in getPagedList(person.faceRecognitionVoList, 8)">
								<el-col :span="3" v-for="item in row">
									<div style="margin: 0 2px;border: 3px solid transparent;border-radius: 2px;" @click="handleClick(item)" :class="currentItem.id==item.id?'actived':'noactived'" :style="{'background': item.showColor?item.showColor:''}">
										<el-image :src="item.picture_url" :fit="'fill'" class="single-image" style="background: #ffffff;">
										</el-image>
										<div style="padding-left: 5px;padding-right: 5px;">
											<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">unid：{{ item.unid||'--' }}</div>
											<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">personid：{{ item.person_unid||'--' }}</div>
											<div>时间：{{ item.counttime }}</div>
											<div>类型：{{ item.person_type==1?'店员':(item.person_type==0?'顾客':'未知') }}({{ item.childAdult==1?'成人':(item.childAdult==0?'儿童':'未知') }})</div>
											<div>性别：{{ formatGender(item.gender) }}({{item.age}})</div>
											<div>地点：{{ item.gate_name }}</div>
										</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;margin-top: 10px;" />
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		ref,
		toRaw
	} from 'vue'
	import batchesResultApi from '@/views/batchesResult/batchesResultApi'
	import {
		isArray
	} from '@/PublicUtil/Judgment'
	import moment from 'moment'
	import {
		filterEmptyValueInObject,
		formatDate,
		getPagedList
	} from '@/PublicUtil/PublicUtil'
	import {ElMessage,ElMessageBox} from 'element-plus'
  import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi';
	export default {
		components: {
		},
		setup() {
			// scalar
			const colors = ref(['#1cd389',  '#ffc751', '#ff6e73', '#8683e6', '#d83965',"#87D14B", "#FF9631", '#9036aa', '#4054af', '#97c05c']);
			const pageNum = ref(1)
			const pageSize = ref(10)
			const total = ref()
			const isLoading = ref(false)
			const dataList = ref([])
			const accountList = ref([])
			const plazaList = ref([])
      const zoneList = ref([])
			const currobj = ref({})
			const currentItem = ref({})
			const queryForm = reactive({
				account_id: '',
				plaza_id: '',
				date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
				startTime: '00:00:00',
				endTime: '23:59:59',
				minNum: 0,
				maxNum: 100000,
        batchId: '',
			})
			const searchCondition = ref({})
      // 回显数据
			if (window.localStorage.getItem('searchCondition')) {
				searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
				queryForm.startTime = searchCondition.value.startTime;
				queryForm.endTime = searchCondition.value.endTime;
				queryForm.minNum = searchCondition.value.minNum || 0;
				queryForm.maxNum = searchCondition.value.maxNum || 100000;
				queryForm.date = searchCondition.value.date;
        queryForm.batchId = searchCondition.value.batch_id || ''
			}
			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() {
        queryForm.zone_id = []
        zoneList.value = []
        // 1 表示不从localStorage中读取数据
        getZoneList(1)
      }
			const getPlazaList = function(val) {
				queryForm.plaza_id = ''
        queryForm.zone_id = []
				plazaList.value = []
        zoneList.value = []
				batchesResultApi.getPlazaList({
					account_id: Array.isArray(queryForm.account_id) ? queryForm.account_id[0] : queryForm.account_id,
				}).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[0]
								} else {
									queryForm.plaza_id = plazaList.value[0].value
								}
                // 1 表示不从localStorage中读取数据，若则读取
                getZoneList(val)
							}
						}
					}
				)
			}

      const getZoneList = function(val) {
        console.log('getZoneList', val, searchCondition.value)
        // queryForm.zone_id = []
        zoneList.value = []
        snapshotRecordApi.getZoneList(
            {
              account_id: Array.isArray(queryForm.account_id) ? queryForm.account_id[0] : queryForm.account_id,
              plaza_id: queryForm.plaza_id,
            }
        ).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 getAccountList = function() {
				queryForm.account_id = ''
				accountList.value = []
				batchesResultApi.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) {
									queryForm.account_id = searchCondition.value.account_id
								} else {
									queryForm.account_id = 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({
					mallId: rawData.plaza_id,
          zoneId: rawData.zone_id.toString(),
					countDate: formatDate(rawData.date),
					startTime: formatDate(rawData.date) + ' ' + rawData.startTime,
					endTime: formatDate(rawData.date) + ' ' + rawData.endTime,
					minNum: rawData.minNum,
					maxNum: rawData.maxNum,
					pageNum: pageNum.value,
					pageSize: pageSize.value,
          batchId: rawData.batchId || '',
				})
        // 用于localStorage存储
				const storageData = filterEmptyValueInObject({
					account_id: rawData.account_id,
					plaza_id: [rawData.plaza_id],
          zone_id: rawData.zone_id,
					date: rawData.date,
					minNum: rawData.minNum,
					maxNum: rawData.maxNum,
					startTime: rawData.startTime,
					endTime: rawData.endTime,
				})
				let searchCondition = JSON.parse(window.localStorage.getItem('searchCondition'));
				let newSearchCondition = {
					...searchCondition,
					...storageData,
          // 写在上面，会被filterEmptyValueInObject方法过滤
          batch_id: rawData.batchId || '',
				}
				window.localStorage.setItem('searchCondition', JSON.stringify(newSearchCondition))
				batchesResultApi.getBatchesResultList(data).then(
					(r) => {
						isLoading.value = false
						if(r.data&&r.data.pageData) {
							sortDataList(r.data.pageData)
							r.data.pageData.forEach((itemPerson) => {
								itemPerson.checked = false
								itemPerson.expand = false
								itemPerson.faceRecognitionVoList.forEach((item) => {
									if (item.picture_url) {
										item.picture_url = window._baseImgUrl + item.picture_url
									}
									if (item.features_url) {
										item.features_url = window._baseImgUrl + item.features_url
									}
									item.batchId = itemPerson.batchId
									item.showColor = ''
									if(itemPerson.personUnids.length>1) {
										for(let a=0;a<itemPerson.personUnids.length;a++) {
											if(itemPerson.personUnids[a]==item.person_unid){
												item.showColor = colors.value[a]?colors.value[a]:'#4fb9d1';
												break;
											}
										}
									}
								})
							})
							dataList.value = r.data.pageData
							console.log(dataList.value)
							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.faceRecognitionVoList.length - a.faceRecognitionVoList.length)
					}
				)
			}
			const checkChange = function(data) {
				console.log(data)
			}
			const expandChange = function(data) {
				dataList.value.forEach(item => {
					if (data.batchId == item.batchId) {
						item.expand = !item.expand
					}
				})
			}
			// 批次合并
			const concatBatches = function() {
				const rawData = toRaw(queryForm)
				let selectArr = []
				dataList.value.forEach(item => {
					if (item.checked && item.checked == true) {
						selectArr.push(item)
					}
				})
				if (selectArr.length != 2) {
					ElMessage({
						message: `请选择两个批次分组进行合并`,
						type: 'warning'
					})
					return
				}
				console.log(selectArr)
				let parmas = {
					countDate: formatDate(rawData.date),
					sourceBatchId:selectArr[0].batchId,
					targetBatchId:selectArr[1].batchId,
					mallId: rawData.plaza_id,
				}
				ElMessageBox.confirm('是否合并选中的两个批次分组？', {
					 confirmButtonText: '确认',
					 cancelButtonText: '取消',
				 }).then(() => {
					batchesResultApi.concatTwoBatches(parmas).then(
						(res) => {
							if(res.code == 200) {
								ElMessage({
									message: `合并成功`,
									type: 'success'
								})
								confirmSearch()
							} else {
								ElMessage({
									message: `删除失败`,
									type: 'warning'
								})
							}
						}
					)
				}).catch(() => {})
			}
			//删除批次记录
			const deleteBatches = function(){
				if(!currentItem.value){
					ElMessage(
						{
							message: `请选择图片`,
							type: 'warning'
						}
					)
					return
				}
				/* if(!currobj.value.picture_url){
					ElMessage(
						{
							message: `请选择有效的图片`,
							type: 'warning'
						}
					)
					return
				} */
				ElMessageBox.confirm('是否确认删除该批次记录？', {
					 confirmButtonText: '确认',
					 cancelButtonText: '取消',
				 }).then(() => {
					 const rawData = toRaw(queryForm)
					 let parmas = {
					 	countDate: formatDate(rawData.date),
					 	personUnid:currentItem.value.person_unid,
					 	batchId:currentItem.value.batchId,
					 	mallId: rawData.plaza_id,
					 }
					batchesResultApi.deleteOneBatches(parmas).then(
						(res) => {
							console.log(res)
							if(res.code == 200) {
								ElMessage({
									message: `删除成功`,
									type: 'success'
								})
								confirmSearch()
								currentItem.value = {}
								currobj.value = {};
							} else {
								ElMessage({
									message: `删除失败`,
									type: 'warning'
								})
							}
						}
					)
				}).catch(() => {})
			}

			const handleClick = function(data){
				currentItem.value = data
				currobj.value = data;
			}

			const contentHeight = ref(0)
			const __main = function() {
					getAccountList()
					contentHeight.value = window.innerHeight - 210
			}
			__main()

			return {
				colors,
				isLoading,
				pageNum,
				pageSize,
				total,
				accountList,
				plazaList,
				dataList,
				contentHeight,
				currentItem,
				currobj,
				handleClick,
				queryForm,
				onPageNumChange,
				onPageSizeChange,
				onAccountChange,
				confirmSearch,
				getPagedList,
				checkChange,
				expandChange,
				formatGender,
				clickSearch,
				concatBatches,
				deleteBatches,
        onPlazaChange,
        zoneList,
			}
		}
	}
</script>

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

	.actived {
		border: 3px solid #1890ff!important;
	}
	.noactived {
		border: 3px solid #ffffff!important;
	}

	.checkBox {
		margin-left: 10px;
	}

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

	.classBox {
		margin: 10px 0;
		border: solid 1px black;
		height: 485px;
		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>