slf-tc/src/views/tc/eventAnalysisReport/detail.vue

<template>
	<div class="app-container" v-loading="loading">
		<!--顶部-->
		<div class="flex align-center mb-20">
			<el-icon @click="proxy.$router.go(-1)" class="mr-6 cursor">
				<ArrowLeftBold />
			</el-icon>
			{{ data && data.reportTime && timerToStr(data.reportTime, 'YYYY-MM-DD HH:mm:ss') }}
		</div>

		<el-row :gutter="20" v-if="!loading && data && data.report && isJson">
			<el-col :xs="24" :sm="24" :md="24" :lg="24">
				<el-card class="update-log">
					<template v-slot:header>
						<div class="clearfix">
							<span>赛事分析 {{ data && data.matchCode }}</span>
						</div>
					</template>
					<div class="body" v-if="isCustom">
						<h3>1.比赛基础信息</h3>
						<el-table v-loading="loading" :data="basicList" :show-header="false" border>
							<el-table-column label="比赛编号" prop="name" :show-overflow-tooltip="true" />
							<el-table-column label="联赛" prop="value" :show-overflow-tooltip="true" />
						</el-table>

						<h3 class="mt-20">2.关键影响因素</h3>
						<el-table v-loading="loading" :data="influencingList" :show-header="false" border>
							<el-table-column :show-overflow-tooltip="true">
								<template v-slot="{ row }">
									{{ row }}
								</template>
							</el-table-column>
						</el-table>

						<h3 class="mt-20">3.核心预测结果</h3>
						<el-table class="mb-20" v-loading="loading" :data="coreList" border>
							<el-table-column label="预测类型" width="180" prop="name" :show-overflow-tooltip="true" />
							<el-table-column label="预测结果" width="220" prop="prediction" :show-overflow-tooltip="true" />
							<el-table-column label="分析依据" prop="analysis" :show-overflow-tooltip="true" />
						</el-table>
					</div>
					<div v-else class="body">
						<MdPreview 
							ref="editorRef" 
							editorId="preview-only" 
							:modelValue="data.report"
							class="maxkb-md" 
						/>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<lz-page-empty v-else :type="'4'" text1="暂无赛事分析报告" text2="请稍后再试...">
			<lz-svg-icon icon-class="empty1" style="font-size: 312px;" />
		</lz-page-empty>

	</div>
</template>

<script setup name="EventAnalysisReportDetail">
import { detail } from '@/api/tc/eventAnalysisReport'
import MdPreview from '@/components/Markdown/MdPreview'
import { timerToStr } from '@/utils/timer'
import { computed } from 'vue'
const route = useRoute()

const isJson = computed(() => {
	try {
		return JSON.parse(data.value.report)
	} catch (error) {
		return false
	}
})

let { proxy } = getCurrentInstance()
const id = ref(0)
const modelType = ref('')
const data = ref({})
const loading = ref(false)
const basicList = ref([])
const influencingList = ref([])
const coreList = ref([])
const skipType = ['HONG_F', 'HONG_B'] // 红单专家md渲染，其他自定义表格渲染
const isCustom = computed(() => !skipType.includes(route.query.modelType)) //  false: md渲染  true: 自定义表格渲染

function getDetail() {
	loading.value = true
	detail({ matchId: id.value, modelType: modelType.value }).then(res => {
		data.value = res.data
		if (res.data.report) {
			try {
				if(isCustom.value) {
					// 自定义表格渲染
					const matchDateTime = timerToStr(res.data.matchInfo.matchDateTime, 'YYYY-MM-DD HH:mm')
					const matchCode = res.data.matchCode
					const report = JSON.parse(res.data.report)
					const { keyFactors, matchInfo, predictions } = report
					// 1.比赛基础信息
					basicList.value = [
						{
							name: "比赛编号",
							value: matchCode
						},
						{
							name: "主队",
							value: matchInfo.homeTeam
						},
						{
							name: "客队",
							value: matchInfo.awayTeam
						},
						{
							name: "时间",
							value: matchDateTime
						}
					]
					// 2.关键影响因素
					influencingList.value = keyFactors
					// 3.核心预测结果
					coreList.value = [
						{
							"name": "最终赛果",
							"key": "result_final",
							"prediction": predictions.result_final.prediction,
							"analysis": predictions.result_final.analysis
						},
						{
							"name": "让球结果",
							"key": "result_handicap",
							"prediction": predictions.result_handicap.prediction,
							"analysis": predictions.result_handicap.analysis
						},
						{
							"name": "比分预测",
							"key": "score_prediction",
							"prediction": predictions.score_prediction.prediction,
							"analysis": predictions.score_prediction.analysis
						},
						{
							"name": "总进球数",
							"key": "total_goals",
							"prediction": predictions.total_goals.prediction,
							"analysis": predictions.total_goals.analysis
						},
						{
							"name": "半全场赛果",
							"key": "half_full_time",
							"prediction": predictions.half_full_time.prediction,
							"analysis": predictions.half_full_time.analysis
						},
						{
							"name": "亚洲盘口",
							"key": "asian_handicap",
							"prediction": predictions.asian_handicap.prediction,
							"analysis": predictions.asian_handicap.analysis
						},
					]
				} else {
					// md渲染
				}
				
			} catch (error) {
				console.log(error)
			}
		}
	}).finally(() => {
		loading.value = false
	})
}

onMounted(() => {
	if (route.query.id && route.query.modelType) {
		id.value = route.query.id
		modelType.value = route.query.modelType
		getDetail()
	}
})


</script>