hotRerun.vue

<template>
	<div v-loading="submitLoading">
		<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" :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" :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>
	</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 hotRerunApi from '@/views/hotRerun/hotRerunApi'

	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
				}).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 submitLoading = ref(false)
			const confirmSearch = function() {
				if (queryForm.account_id=='') {
					ElMessage({
						message: `请选择集团`,
						type: 'error'
					})
					return
				}
				if (queryForm.plaza_id=='') {
					ElMessage({
						message: `请选择广场`,
						type: 'error'
					})
					return
				}
				msgLogList.value = []
				const rawData = toRaw(queryForm)
				const params = {
					mallId:queryForm.plaza_id,
					startDate: formatDate(rawData.startDate),
					endDate: formatDate(rawData.endDate),
				}
				submitLoading.value = true
				hotRerunApi.getResult(params).then(
					(r) => {
						console.log('getResult', r)
						submitLoading.value = false
						if (r.code==200) {
							msgLogList.value.push({time:moment().format('YYYY-MM-DD HH:mm:ss')})
						} else {
							ElMessage({
								message: r.msg||'提交失败',
								type: 'error'
							})
						}
					}
				)
			}
			const __main = function() {
				getAccountList()
			}
			__main()
			return {
				accountList,
				plazaList,
				queryForm,
				onAccountChange,
				confirmSearch,
				msgLogList,
				submitLoading,
			}
		}
	}
</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>