dayAnalysisRerun.vue

<template>
	<a-form class="data-return-form" :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
		<a-form-item label="集团：">
			<a-select v-model:value="queryForm.account_id" style="width: 280px" mode="multiple" :maxTagCount="1" :options="accountList" @change="onAccountChange" optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="广场：">
			<a-select v-model:value="queryForm.plaza_id" style="width: 280px" mode="multiple" :maxTagCount="1" :options="plazaList" optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="开始日期：">
			<a-date-picker v-model:value="queryForm.startDate" />
		</a-form-item>
		<a-form-item label="结束日期：">
			<a-date-picker v-model:value="queryForm.endDate" />
		</a-form-item>
		<a-form-item>
			<a-button type="primary" @click="confirmSearch">开始</a-button>
		</a-form-item>
	</a-form>
	<!--新的日志-->
	<div class="card-container">
		<a-card title="全天分析重跑结果" style="width: 600px">
			<el-row v-for="(item,index) in msgLogList" :key="index" style="padding: 2px 0;">
				<el-col :span="8">
					{{item.time}}
				</el-col>
				<el-col :span="16">
					全天分析任务已提交，正在重跑中...
				</el-col>
			</el-row>
		</a-card>
	</div>
</template>

<script>
	import { reactive, ref, toRaw } from 'vue'
	import moment from 'moment'
	import { ElMessage } from 'element-plus'
	import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
	import { isArray } from '@/PublicUtil/Judgment'
	import { formatDate } from '@/PublicUtil/PublicUtil'
	import dayAnalysisRerunApi from '@/views/dayAnalysisRerun/dayAnalysisRerunApi'

	export default {
		components: {
			VNodes: (_, {attrs}) => {
				return attrs.vnodes
			},
		},
		setup() {
			const accountList = ref([])
			const plazaList = ref([])
			const queryForm = reactive({
				account_id: [],
				plaza_id: [],
				startDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
				endDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
			})
			const onAccountChange = function() {
				getPlazaList()
			}
			const getPlazaList = function() {
				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,
								})
							}
						}
					}
				)
			}
			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,
								})
							}
						}
					}
				)
			}

			// 新需求：数据重跑
			const msgLogList = ref([])
			const confirmSearch = function() {
				if (queryForm.account_id.length < 1) {
					ElMessage({
						message: `至少选择一个集团`,
						type: 'error'
					})
					return
				}
				if (queryForm.plaza_id.length < 1) {
					ElMessage({
						message: `至少选择一个门店`,
						type: 'error'
					})
					return
				}
				msgLogList.value = []
				const rawData = toRaw(queryForm)
				const params = {
					mallIds:queryForm.plaza_id.join(','),
					startDate: formatDate(rawData.startDate),
					endDate: formatDate(rawData.endDate),
				}
				dayAnalysisRerunApi.getResult(params).then(
					(r) => {
						console.log('getResult', r)
						if (r.msg_code==200) {
							msgLogList.value.push({time:moment().format('YYYY-MM-DD HH:mm:ss')})
						}
					}
				)
			}
			const __main = function() {
				getAccountList()
			}
			__main()
			return {
				accountList,
				plazaList,
				queryForm,
				onAccountChange,
				confirmSearch,
				msgLogList,
			}
		}
	}
</script>

<style lang="less" scoped>
	.result-wrapper-2 {
		width: 50%;
		min-width: 600px;
		border-radius: 4px;
		margin: 20px auto 0;
		position: relative;
		overflow: auto;
	}

	.card-container {
		display: flex;
		justify-content: center;

		/deep/.ant-card-body {
			height: 370px;
		}
	}

	.data-return-form {
		/deep/.ant-form-item {
			margin-bottom: 10px;
		}
	}
</style>