From 0149754b2aa06974ecc42878e33d2021870eff97 Mon Sep 17 00:00:00 2001
From: lz-ui <lz-ui@jczxw.cn>
Date: Tue, 4 Nov 2025 16:04:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=B7=BB=E5=8A=A0=E7=83=AD=E9=97=A8?=
 =?UTF-8?q?=E8=B6=B3=E7=90=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../report/components/Prediction2.vue         | 124 ++++
 .../operation/report/components/TabPane1.vue  | 550 +++++++++++++++++
 .../operation/report/components/TabPane2.vue  | 415 +++++++++++++
 src/views/operation/report/index.vue          | 557 +-----------------
 4 files changed, 1111 insertions(+), 535 deletions(-)
 create mode 100644 src/views/operation/report/components/Prediction2.vue
 create mode 100644 src/views/operation/report/components/TabPane1.vue
 create mode 100644 src/views/operation/report/components/TabPane2.vue

diff --git a/src/views/operation/report/components/Prediction2.vue b/src/views/operation/report/components/Prediction2.vue
new file mode 100644
index 0000000..dc767c3
--- /dev/null
+++ b/src/views/operation/report/components/Prediction2.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="had">
+        <div class="had-content flex" v-for="(item,index) in enumsPredictionList" :key="item.value">
+            <div class="had-content-item-left">
+                {{ item.label || '' }}
+            </div>
+            <div class="had-content-table flex">
+                <div :class="['had-content-table-item', {'is-active': isActiveClass(item, data, '1')}]" @click="handleClick(item, data, '1')">
+                    红
+                </div>
+                <div v-if="item.value === 'asianHandicapFlag'" :class="['had-content-table-item', {'is-active': isActiveClass(item, data, '0.5')}]" @click="handleClick(item, data, '0.5')">
+                    红半
+                </div>
+                <div :class="['had-content-table-item', {'is-active-black': isActiveClass(item, data, '-1')}]" @click="handleClick(item, data, '-1')">
+                    黑
+                </div>
+                <div v-if="item.value === 'asianHandicapFlag'"  :class="['had-content-table-item', {'is-active-black': isActiveClass(item, data, '-0.5')}]" @click="handleClick(item, data, '-0.5')">
+                    黑半
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+// 定义接收父组件传递的属性
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    type: {
+        type: String,
+        default: 'view' // edit:编辑模式,view:查看模式
+    }
+});
+
+// 获取父组件传递的属性值
+const { data } = toRefs(props);
+
+const enumsPredictionList = [
+    { label: '进球数:', value: 'goalsResultFlag' },
+    { label: '亚盘:', value: 'asianHandicapFlag' },
+];
+
+function isActiveClass (item, data, activeValue) {
+    // console.log(item, data, activeValue)
+    if (!data || !data[item.value]) return false;
+    return data[item.value] === activeValue;
+}
+
+function handleClick (item,data, value) { 
+    if(props.type === 'view') return;
+    data[item.value] = value
+}
+
+function getFormData () {
+    const formData = props.data
+    return formData;
+}
+
+onMounted(() => { 
+    // if(data.value.reportDetail && data.value.matchSpfDetails){
+    //     const reportDetail = data.value.reportDetail;
+    //     data.value.matchSpfDetails.forEach(el => {
+    //     if(el.goalType === 'HAD') {
+    //         el.isActive = reportDetail.hadFlag || '';
+    //     }
+    //     if(el.goalType === 'HHAD') {
+    //         el.isActive = reportDetail.hhadFlag || '';
+    //     }
+    //     });
+    // }
+}) 
+
+defineExpose({
+    getFormData
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+.had-content-item-left{
+    width: 120px;
+    text-align: right;
+    line-height: 45px;
+    padding-right: 6px;
+}
+.had-content-table{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+.had-content-table-item {
+    padding: 12px;
+    // border: 1px solid #ccc;
+    border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    width: 50%;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    background-color: #F4F8FF;
+}
+.had-content-table .had-content-table-item:last-child {
+    border-right: 1px solid #ccc;
+}
+.had-content:last-child .had-content-table-item {
+    border-bottom: 1px solid #ccc;
+}
+
+.is-active {
+    background-color: #f56c6c;
+    color: #fff;
+}
+.is-active-black {
+    background-color: #333;
+    color: #fff;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/operation/report/components/TabPane1.vue b/src/views/operation/report/components/TabPane1.vue
new file mode 100644
index 0000000..b4d6236
--- /dev/null
+++ b/src/views/operation/report/components/TabPane1.vue
@@ -0,0 +1,550 @@
+<template>
+	<div class="tab-page-content">
+		<!-- 搜索区域 -->
+		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
+			<el-form-item label="赛事编号" prop="matchNumStr">
+				<el-input v-model="queryParams.matchNumStr" placeholder="请输入赛事编号" clearable style="width: 240px"
+					@keyup.enter="handleQuery" />
+			</el-form-item>
+			<el-form-item label="联赛类型" prop="leagueAbbName">
+					<el-select v-model="queryParams.leagueAbbName" @change="handleQuery" style="width: 240px" clearable placeholder="请选择联赛类型">
+					<el-option
+						v-for="item in dataScopeOptions"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"
+					></el-option>
+               </el-select>
+			</el-form-item>
+			<el-form-item label="标记状态" prop="flagStatus">
+				<el-select v-model="queryParams.flagStatus" @change="handleQuery" style="width: 240px" clearable placeholder="请选择标记状态">
+					<el-option
+						v-for="item in flagStatusOptions"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"
+					></el-option>
+               </el-select>
+			</el-form-item>
+
+			<el-form-item label="时间">
+				<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+					start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px"></el-date-picker>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" icon="Search" @click="handleQuery" :loading="loading">查询</el-button>
+				<el-button icon="Refresh" @click="resetQuery" :loading="loading">重置</el-button>
+				
+			</el-form-item>
+		</el-form>
+
+		<el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+		<!--loading-->
+		<div
+			v-if="loading"
+			v-loading="loading"
+			class="loading-page"
+			element-loading-text="正在加载..."
+			style="width: 100%; height: calc(100vh - 250px)"
+		></div>
+		<div v-else-if="pageList.length && !loading">
+			<!-- 表格数据 -->
+			<el-table v-loading="loading" :data="pageList">
+				<el-table-column label="赛事编号" prop="matchNumStr" />
+				<el-table-column label="联赛" prop="leagueAllName" :show-overflow-tooltip="true" />
+				<el-table-column label="主队" prop="homeTeamAllName" :show-overflow-tooltip="true" />
+				<el-table-column label="客队" prop="awayTeamAbbName" />
+				<el-table-column label="比赛开始时间" align="center" prop="matchDateTime" width="180">
+					<template #default="scope">
+						<span>{{ parseTime(scope.row.matchDateTime) }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="赛果" prop="matchId">
+					<template #default="scope">
+						<el-popover placement="bottom" :width="360">
+							<template #reference> 
+								<el-button link type="primary" @dblclick="handleJumpLink(scope.row)">查看</el-button>
+							</template>
+							<template #default> 
+								<div>
+									<el-table border :data="scope.row.matchResults">
+										<el-table-column label="游戏" prop="matchNumStr">
+											<template #default="item">
+												{{ item.row.codeName }}
+											</template>
+										</el-table-column>
+										<el-table-column label="开赛结果" prop="reportSatus">
+											<template #default="item"> 
+												<el-tag type="error">{{ item.row.combinationDesc }}</el-tag>
+											</template>
+										</el-table-column>
+										<el-table-column label="奖金" prop="matchNumStr">
+											<template #default="item">
+												{{ item.row.odds }}
+											</template>
+										</el-table-column>
+									</el-table>
+								</div>
+							</template>
+						</el-popover>
+					</template>
+				</el-table-column>
+				<el-table-column label="AI预测" prop="matchId">
+					<template #default="scope">
+						<el-popover placement="bottom" :width="360">
+							<template #reference> 
+								<el-button link type="primary">查看</el-button>
+							</template>
+							<template #default> 
+								<div style="padding: 8px;">
+									<el-radio-group v-model="activeName" style="margin-bottom: 10px">
+										<el-radio-button value="FINYX_F">finyx-AI</el-radio-button>
+										<el-radio-button value="D3_F">D3-index</el-radio-button>
+									</el-radio-group>
+									<div v-show="activeName === 'FINYX_F'">
+										<el-table border :data="scope.row.farmatReportResults['FINYX_F']" :show-header="false">
+											<el-table-column>
+												<template #default="item">
+													{{ item.row.lable }}
+												</template>
+											</el-table-column>
+											<el-table-column>
+												<template #default="item"> 
+													{{ item.row.value || '-' }}
+												</template>
+											</el-table-column>
+										</el-table>
+									</div>
+									<div v-show="activeName === 'D3_F'">
+										<el-table border :data="scope.row.farmatReportResults['D3_F']" :show-header="false">
+											<el-table-column>
+												<template #default="item">
+													{{ item.row.lable }}
+												</template>
+											</el-table-column>
+											<el-table-column>
+												<template #default="item"> 
+													{{ item.row.value || '-' }}
+												</template>
+											</el-table-column>
+										</el-table>
+									</div>
+								</div>
+							</template>
+						</el-popover>
+					</template>
+				</el-table-column>
+				<el-table-column label="Finyx预测结果" width="300" align="center">
+						<el-table-column label="常" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'resultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="让" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'hhadResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="分" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'scoreResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="总" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'goalsResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="半" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'halfFullResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="亚" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'asianHandicapFlag')]"></span>
+							</template>
+						</el-table-column>
+				</el-table-column>
+				  <el-table-column label="结果标记" align="center" class-name="small-padding fixed-width" width="200">
+					<template #default="scope">
+						<el-button 
+							v-show="showBtn(scope.row, 'FINYX_F')" 
+							link 
+							type="primary" 
+							icon="Edit" 
+							@click="openDialog(scope.row, 'FINYX_F')" 
+							:class="[matchIdType.id === scope.row.matchId && matchIdType.type === 'FINYX_F' ? 'has-active' : '']"
+						>finyx-AI</el-button>
+						<el-button 
+							v-show="showBtn(scope.row, 'D3_F')" 
+							link 
+							type="primary" 
+							icon="Edit" 
+							@click="openDialog(scope.row, 'D3_F')"
+							:class="[matchIdType.id === scope.row.matchId && matchIdType.type === 'D3_F' ? 'has-active' : '']"
+						>D3-index</el-button>
+					</template>
+				</el-table-column>
+				<el-table-column label="D3预测结果" width="300" align="center">
+						<el-table-column label="常" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'resultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="让" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'hhadResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="分" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'scoreResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="总" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'goalsResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="半" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'halfFullResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="亚" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'asianHandicapFlag')]"></span>
+							</template>
+						</el-table-column>
+				</el-table-column>
+			</el-table>
+
+			<!-- 分页区域 -->
+			<pagination 
+			:show="total > 0"
+			:total="total" 
+			v-model:page="queryParams.pageNum"
+			v-model:limit="queryParams.pageSize" 
+			@pagination="getList" />
+		</div>
+		<lz-page-empty v-else-if="!loading" :type="'2'">
+			<lz-svg-icon icon-class="empty2" style="font-size: 312px;"/>
+		</lz-page-empty>
+
+
+		<!-- 修改对话框 -->
+		<el-dialog :title="dialogTitle" v-model="dialogOpen" width="600px" append-to-body>
+			<Prediction :data="dialogForm"  type="edit" v-if="dialogOpen" @submit="submitForm" ref="editHadRef"/>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button type="primary" @click="submitForm">确 定</el-button>
+					<el-button @click="cancel">取 消</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup name="OperationReport">
+import { Info, infoSelectDistinctLeagueAbbNames, reportResultUpdate } from "@/api/tc/eventAnalysisReport"
+import { jumpLink } from "@/utils/tc"
+
+import { processMatchResults } from "@/utils/tc"
+import Prediction from "@/views/operation/report/components/Prediction.vue"
+
+import { ref } from "vue"
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const pageList = ref([])
+const loading = ref(false)
+const showSearch = ref(true)
+const total = ref(0)
+const dateRange = ref([])
+const editHadRef = ref(null)
+const activeName = ref('FINYX_F')
+const matchIdType = ref({ id: '', type: '' })
+
+const dialogOpen = ref(false)
+const dialogTitle = ref('标记')
+const dialogForm = ref({})
+
+/** 数据范围选项*/
+const dataScopeOptions = ref([])
+const flagStatusOptions = ref([
+	{  value: 1, label: '已标记' },
+	{  value: 0, label: '未标记' },
+])
+
+const data = reactive({
+	form: {},
+	queryParams: {
+		pageNum: 1,
+		pageSize: 10,
+		matchNumStr: undefined,
+		leagueAbbName: undefined,
+		flagStatus: undefined,
+	},
+	rules: {},
+})
+
+const { queryParams } = toRefs(data)
+
+function tableColumnActive(row, modelType, key) {
+  // 检查row是否为空对象或缺少必要属性
+  if (!row || Object.keys(row).length === 0) {
+    return '';
+  }
+  
+  // 确保reportResults存在且为数组
+  if (!row.reportResults || !Array.isArray(row.reportResults)) {
+    return '';
+  }
+  
+  // 查找对应modelType的数据
+  const reportData = row.reportResults.find(item => item.modelType === modelType);
+  
+  // 如果没有找到对应数据，返回空字符串
+  if (!reportData) {
+    return '';
+  }
+
+  // 根据key值获取对应字段的值并判断是否应该添加active类
+  const value = reportData[key];
+  if (value && value === '1') {
+    return 'table-column-active-1';
+  }
+  if (value && value === '0.5') {
+    return 'table-column-active-11';
+  }
+  if (value && value === '-1') {
+    return 'table-column-active-2';
+  }
+  if (value && value === '-0.5') {
+    return 'table-column-active-22';
+  }
+  
+  return '4';
+}
+
+
+function rowPrediction(row, modelType) {
+	return row.reportResults && row.reportResults.find(el => el.modelType === modelType) || {}
+}
+
+function showBtn(row, type) {
+	// 判断reportResults是否存在，不存在则返回false
+	if(!row.reportResults) {
+		return false
+	}
+	if(row.reportResults.find(el => el.modelType === type)) {
+		return true
+	}
+	return false
+}
+
+
+/** 导出按钮操作 */
+function handleExport() {
+	//   proxy.download("system/user/export", {
+	//     ...queryParams.value,
+	//   },`user_${new Date().getTime()}.xlsx`)
+}
+
+/** 提交表单 */
+function submitForm() {
+	const data = editHadRef.value.getFormData()
+	reportResultUpdate(data).then(response => { 
+		proxy.$message.success(response.msg)
+		getList()
+	}).finally(() => { 
+		dialogOpen.value = false
+	})
+}
+
+/** 取消按钮 */
+function cancel() {
+	dialogOpen.value = false
+	dialogForm.value = {}
+	getList()
+}
+
+function openDialog(row, type='') { 
+	if(row && row.reportResults && type){
+		dialogForm.value = row.reportResults.find(el => el.modelType === type)
+		dialogOpen.value = true
+		dialogTitle.value = ' 标记 ' + row.matchNumStr + ' ' + type+ '模型'
+		matchIdType.value = { id: row.matchId, type: type }
+	}
+}
+
+/** 获取联赛类型 */
+function getLeagueAbbNames() {
+	infoSelectDistinctLeagueAbbNames().then(response => {
+		dataScopeOptions.value = response.rows ? response.rows.map(item => ({ value: item, label: item })) : []
+	})
+}
+
+/** 跳转链接 */
+function handleJumpLink(row) {
+	jumpLink(row.matchId, 1)
+}
+
+function reportResultsModelType(arr){
+	const res = {}
+	arr.forEach(item => {
+		res[item.modelType] = [
+			{
+				lable: '主队',
+				value: item.homeTeamName,
+				key: 'result'	
+			},
+			{
+				lable: '客队',
+				value: item.awayTeamName,
+				key: 'result'	
+			},
+			{
+				lable: '胜平负',
+				value: item.result,
+				key: 'result'	
+			},
+			{
+				lable: '让分胜平负',
+				value: item.hhadResult,
+				key: 'hhadResult'	
+			},
+			{
+				lable: '比分',
+				value: item.scoreResult,
+				key: 'scoreResult'
+			},
+			{
+				lable: '进球数',
+				value: item.goalsResult,
+				key: 'goalsResult'
+			},
+			{
+				lable: '半全场',
+				value: item.halfFullResult,
+				key: 'halfFullResult'
+			},
+			{
+				lable: '亚盘',
+				value: item.asianHandicap,
+				key: 'asianHandicap'
+			}
+		]
+	})
+	return res;
+}
+function farmatReportResults(list) {
+	const res = list.map(item => ({ 
+		...item, 
+		farmatReportResults: item.reportResults ? reportResultsModelType(item.reportResults): {} 
+	}));
+	return res;
+}
+
+/** 查询列表 */
+function getList() {
+	loading.value = true
+	const data = { ...queryParams.value }
+	if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
+		data.beginTime = dateRange.value[0]
+		data.endTime = dateRange.value[1]
+	} else {
+		data.beginTime = undefined
+		data.endTime = undefined
+	}
+	Info(data).then(response => {
+		const res = response.rows.map(item => ({ 
+			...item, 
+			matchResults: item.matchResults ? processMatchResults(item.matchResults): null 
+		}));
+		// 格式化reportResults
+		pageList.value = farmatReportResults(res)
+		total.value = response.total
+	}).finally(() => {
+		loading.value = false
+	})
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+	queryParams.value.pageNum = 1
+	getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+	dateRange.value = []
+	proxy.resetForm("queryRef")
+	handleQuery()
+	matchIdType.value = { id: '', type: '' }
+}
+
+onMounted(() => {
+	// 联赛类型
+	getLeagueAbbNames()
+	// 列表查询
+	getList()
+})
+</script>
+
+<style scoped lang="scss"> 
+.icon-d3 {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background-color: #fff;
+	border: 2px solid #3067EF;
+	box-sizing: border-box;
+}
+.table-column-active-1 {
+	background-color: #f56c6c;
+	border-color: #f56c6c;
+}
+.table-column-active-11 {
+	background-color: #f56c6c;
+	border-color: #f56c6c;
+	position: relative;
+}
+.table-column-active-11::after {
+	content: '';
+	display: block;
+	width: 20px;
+	height: 10px;
+	background-color: #fff;
+	position: absolute;
+	top: 50%;
+	left: -2px;
+}
+.table-column-active-2 {
+	background-color: #333;
+	border-color: #333;
+}
+.table-column-active-22 {
+	background-color: #333;
+	border-color: #333;
+	position: relative;
+}
+.table-column-active-22::after {
+	content: '';
+	display: block;
+	width: 20px;
+	height: 10px;
+	background-color: #fff;
+	position: absolute;
+	top: 50%;
+	left: -2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/operation/report/components/TabPane2.vue b/src/views/operation/report/components/TabPane2.vue
new file mode 100644
index 0000000..67addf1
--- /dev/null
+++ b/src/views/operation/report/components/TabPane2.vue
@@ -0,0 +1,415 @@
+<template>
+	<div class="tab-page-content">
+		<!-- 搜索区域 -->
+		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
+			<el-form-item label="赛事编号" prop="matchDate">
+				<el-input v-model="queryParams.matchDate" placeholder="请输入赛事编号" clearable style="width: 240px"
+					@keyup.enter="handleQuery" />
+			</el-form-item>
+			<el-form-item label="联赛类型" prop="leagueAbbName">
+					<el-select v-model="queryParams.leagueAbbName" @change="handleQuery" style="width: 240px" clearable placeholder="请选择联赛类型">
+					<el-option
+						v-for="item in dataScopeOptions"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"
+					></el-option>
+               </el-select>
+			</el-form-item>
+			<el-form-item label="标记状态" prop="flagStatus">
+				<el-select v-model="queryParams.flagStatus" @change="handleQuery" style="width: 240px" clearable placeholder="请选择标记状态">
+					<el-option
+						v-for="item in flagStatusOptions"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"
+					></el-option>
+               </el-select>
+			</el-form-item>
+
+			<el-form-item label="时间">
+				<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+					start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px"></el-date-picker>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" icon="Search" @click="handleQuery" :loading="loading">查询</el-button>
+				<el-button icon="Refresh" @click="resetQuery" :loading="loading">重置</el-button>
+				
+			</el-form-item>
+		</el-form>
+
+		<el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+		<!--loading-->
+		<div
+			v-if="loading"
+			v-loading="loading"
+			class="loading-page"
+			element-loading-text="正在加载..."
+			style="width: 100%; height: calc(100vh - 250px)"
+		></div>
+		<div v-else-if="pageList.length && !loading">
+			<!-- 表格数据 -->
+			<el-table v-loading="loading" :data="pageList">
+				<el-table-column label="赛事编号" prop="matchDate" />
+				<el-table-column label="联赛" prop="leagueAbbName" :show-overflow-tooltip="true" />
+				<el-table-column label="主队" prop="homeTeamAbbName" :show-overflow-tooltip="true" />
+				<el-table-column label="客队" prop="awayTeamAbbName" />
+				<el-table-column label="比赛开始时间" align="center" prop="matchDateTime" width="180">
+					<template #default="scope">
+						<span>{{ parseTime(scope.row.matchDateTime) }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="赛果" prop="matchId">
+					<template #default="scope">
+						<el-button link type="primary" @click="handleJumpLink(scope.row)">查看</el-button>
+					</template>
+				</el-table-column>
+				<el-table-column label="AI预测" prop="matchId">
+					<template #default="scope">
+						<el-popover placement="bottom" :width="360">
+							<template #reference> 
+								<el-button link type="primary">查看</el-button>
+							</template>
+							<template #default> 
+								<div style="padding: 8px;">
+									<el-table border :data="scope.row.farmatReportResults['HOT_F']" :show-header="false">
+										<el-table-column>
+											<template #default="item">
+												{{ item.row.lable }}
+											</template>
+										</el-table-column>
+										<el-table-column>
+											<template #default="item"> 
+												{{ item.row.value || '-' }}
+											</template>
+										</el-table-column>
+									</el-table>
+								</div>
+							</template>
+						</el-popover>
+					</template>
+				</el-table-column>
+				<el-table-column label="结果标记" align="center" class-name="small-padding fixed-width" width="200">
+					<template #default="scope">
+						<el-button 
+							v-show="showBtn(scope.row, 'HOT_F')" 
+							link 
+							type="primary" 
+							icon="Edit" 
+							@click="openDialog(scope.row, 'HOT_F')"
+							:class="[matchIdType.id === scope.row.matchId && matchIdType.type === 'HOT_F' ? 'has-active' : '']"
+						>D3-index</el-button>
+					</template>
+				</el-table-column>
+				<el-table-column label="D3预测结果" width="300" align="center">
+						
+						<el-table-column label="总" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'HOT_F', 'goalsResultFlag')]"></span>
+							</template>
+						</el-table-column>
+						<el-table-column label="亚" width="50" align="center">
+							<template #default="scope">
+								<span :class="['icon-d3', tableColumnActive(scope.row, 'HOT_F', 'asianHandicapFlag')]"></span>
+							</template>
+						</el-table-column>
+				</el-table-column>
+			</el-table>
+
+			<!-- 分页区域 -->
+			<pagination 
+			:show="total > 0"
+			:total="total" 
+			v-model:page="queryParams.pageNum"
+			v-model:limit="queryParams.pageSize" 
+			@pagination="getList" />
+		</div>
+		<lz-page-empty v-else-if="!loading" :type="'2'">
+			<lz-svg-icon icon-class="empty2" style="font-size: 312px;"/>
+		</lz-page-empty>
+
+
+		<!-- 修改对话框 -->
+		<el-dialog :title="dialogTitle" v-model="dialogOpen" width="600px" append-to-body>
+			<Prediction2 :data="dialogForm"  type="edit" v-if="dialogOpen" @submit="submitForm" ref="editHadRef"/>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button type="primary" @click="submitForm">确 定</el-button>
+					<el-button @click="cancel">取 消</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup name="OperationReport">
+import { infoSelectDistinctLeagueAbbNames, reportResultUpdate } from "@/api/tc/eventAnalysisReport"
+import { hotMatchList } from "@/api/tc/hot"
+import { processMatchResults } from "@/utils/tc"
+import Prediction2 from "@/views/operation/report/components/Prediction2.vue"
+
+import { ref } from "vue"
+
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const pageList = ref([])
+const loading = ref(false)
+const showSearch = ref(true)
+const total = ref(0)
+const dateRange = ref([])
+const editHadRef = ref(null)
+const activeName = ref('FINYX_F')
+const matchIdType = ref({ id: '', type: '' })
+
+const dialogOpen = ref(false)
+const dialogTitle = ref('标记')
+const dialogForm = ref({})
+
+/** 数据范围选项*/
+const dataScopeOptions = ref([])
+const flagStatusOptions = ref([
+	{  value: 1, label: '已标记' },
+	{  value: 0, label: '未标记' },
+])
+
+const data = reactive({
+	form: {},
+	queryParams: {
+		pageNum: 1,
+		pageSize: 10,
+		matchDate: undefined,
+		leagueAbbName: undefined,
+		flagStatus: undefined,
+	},
+	rules: {},
+})
+
+const { queryParams } = toRefs(data)
+
+function tableColumnActive(row, modelType, key) {
+  // 检查row是否为空对象或缺少必要属性
+  if (!row || Object.keys(row).length === 0) {
+    return '';
+  }
+  
+  // 确保reportResults存在且为数组
+  if (!row.reportResults || !Array.isArray(row.reportResults)) {
+    return '';
+  }
+  
+  // 查找对应modelType的数据
+  const reportData = row.reportResults.find(item => item.modelType === modelType);
+  
+  // 如果没有找到对应数据，返回空字符串
+  if (!reportData) {
+    return '';
+  }
+
+  // 根据key值获取对应字段的值并判断是否应该添加active类
+  const value = reportData[key];
+  if (value && value === '1') {
+    return 'table-column-active-1';
+  }
+  if (value && value === '0.5') {
+    return 'table-column-active-11';
+  }
+  if (value && value === '-1') {
+    return 'table-column-active-2';
+  }
+  if (value && value === '-0.5') {
+    return 'table-column-active-22';
+  }
+  
+  return '4';
+}
+
+
+function rowPrediction(row, modelType) {
+	return row.reportResults && row.reportResults.find(el => el.modelType === modelType) || {}
+}
+
+function showBtn(row, type) {
+	// 判断reportResults是否存在，不存在则返回false
+	if(!row.reportResults) {
+		return false
+	}
+	if(row.reportResults.find(el => el.modelType === type)) {
+		return true
+	}
+	return false
+}
+
+
+/** 导出按钮操作 */
+function handleExport() {
+	//   proxy.download("system/user/export", {
+	//     ...queryParams.value,
+	//   },`user_${new Date().getTime()}.xlsx`)
+}
+
+/** 提交表单 */
+function submitForm() {
+	const data = editHadRef.value.getFormData()
+	reportResultUpdate(data).then(response => { 
+		proxy.$message.success(response.msg)
+		getList()
+	}).finally(() => { 
+		dialogOpen.value = false
+	})
+}
+
+/** 取消按钮 */
+function cancel() {
+	dialogOpen.value = false
+	dialogForm.value = {}
+	getList()
+}
+
+function openDialog(row, type='') { 
+	if(row && row.reportResults && type){
+		dialogForm.value = row.reportResults.find(el => el.modelType === type)
+		dialogOpen.value = true
+		dialogTitle.value = ' 标记 ' + row.matchDate + ' ' + type+ '模型'
+		matchIdType.value = { id: row.matchId, type: type }
+	}
+}
+
+/** 获取联赛类型 */
+function getLeagueAbbNames() {
+	infoSelectDistinctLeagueAbbNames().then(response => {
+		dataScopeOptions.value = response.rows ? response.rows.map(item => ({ value: item, label: item })) : []
+	})
+}
+
+/** 跳转链接 */
+function handleJumpLink(row) {
+	window.open(`https://live.titan007.com/detail/${row.matchId}sb.htm`)
+}
+
+function reportResultsModelType(arr){
+	const res = {}
+	arr.forEach(item => {
+		res[item.modelType] = [
+			{
+				lable: '进球数',
+				value: item.goalsResult,
+				key: 'goalsResult'
+			},
+			{
+				lable: '亚盘',
+				value: item.asianHandicap,
+				key: 'asianHandicap'
+			}
+		]
+	})
+	return res;
+}
+function farmatReportResults(list) {
+	const res = list.map(item => ({ 
+		...item, 
+		farmatReportResults: item.reportResults ? reportResultsModelType(item.reportResults): {} 
+	}));
+	return res;
+}
+
+/** 查询列表 */
+function getList() {
+	loading.value = true
+	const data = { ...queryParams.value }
+	if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
+		data.beginTime = dateRange.value[0]
+		data.endTime = dateRange.value[1]
+	} else {
+		data.beginTime = undefined
+		data.endTime = undefined
+	}
+	hotMatchList(data).then(response => {
+		const res = response.rows.map(item => ({ 
+			...item, 
+			matchResults: item.matchResults ? processMatchResults(item.matchResults): null 
+		}));
+		// 格式化reportResults
+		pageList.value = farmatReportResults(res)
+		total.value = response.total
+	}).finally(() => {
+		loading.value = false
+	})
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+	queryParams.value.pageNum = 1
+	getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+	dateRange.value = []
+	proxy.resetForm("queryRef")
+	handleQuery()
+	matchIdType.value = { id: '', type: '' }
+}
+
+onMounted(() => {
+	// 联赛类型
+	getLeagueAbbNames()
+	// 列表查询
+	getList()
+})
+</script>
+
+<style scoped lang="scss"> 
+.icon-d3 {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background-color: #fff;
+	border: 2px solid #3067EF;
+	box-sizing: border-box;
+}
+.table-column-active-1 {
+	background-color: #f56c6c;
+	border-color: #f56c6c;
+}
+.table-column-active-11 {
+	background-color: #f56c6c;
+	border-color: #f56c6c;
+	position: relative;
+}
+.table-column-active-11::after {
+	content: '';
+	display: block;
+	width: 20px;
+	height: 10px;
+	background-color: #fff;
+	position: absolute;
+	top: 50%;
+	left: -2px;
+}
+.table-column-active-2 {
+	background-color: #333;
+	border-color: #333;
+}
+.table-column-active-22 {
+	background-color: #333;
+	border-color: #333;
+	position: relative;
+}
+.table-column-active-22::after {
+	content: '';
+	display: block;
+	width: 20px;
+	height: 10px;
+	background-color: #fff;
+	position: absolute;
+	top: 50%;
+	left: -2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/operation/report/index.vue b/src/views/operation/report/index.vue
index 6dfca79..aa86fac 100644
--- a/src/views/operation/report/index.vue
+++ b/src/views/operation/report/index.vue
@@ -1,549 +1,36 @@
 <template>
 	<div class="app-container">
-		<!-- 搜索区域 -->
-		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
-			<el-form-item label="赛事编号" prop="matchNumStr">
-				<el-input v-model="queryParams.matchNumStr" placeholder="请输入赛事编号" clearable style="width: 240px"
-					@keyup.enter="handleQuery" />
-			</el-form-item>
-			<el-form-item label="联赛类型" prop="leagueAbbName">
-					<el-select v-model="queryParams.leagueAbbName" @change="handleQuery" style="width: 240px" clearable placeholder="请选择联赛类型">
-					<el-option
-						v-for="item in dataScopeOptions"
-						:key="item.value"
-						:label="item.label"
-						:value="item.value"
-					></el-option>
-               </el-select>
-			</el-form-item>
-			<el-form-item label="标记状态" prop="flagStatus">
-				<el-select v-model="queryParams.flagStatus" @change="handleQuery" style="width: 240px" clearable placeholder="请选择标记状态">
-					<el-option
-						v-for="item in flagStatusOptions"
-						:key="item.value"
-						:label="item.label"
-						:value="item.value"
-					></el-option>
-               </el-select>
-			</el-form-item>
-
-			<el-form-item label="时间">
-				<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
-					start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px"></el-date-picker>
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" icon="Search" @click="handleQuery" :loading="loading">查询</el-button>
-				<el-button icon="Refresh" @click="resetQuery" :loading="loading">重置</el-button>
-				
-			</el-form-item>
-		</el-form>
-
-		<el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-              </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
-
-		<!--loading-->
-		<div
-			v-if="loading"
-			v-loading="loading"
-			class="loading-page"
-			element-loading-text="正在加载..."
-			style="width: 100%; height: calc(100vh - 250px)"
-		></div>
-		<div v-else-if="pageList.length && !loading">
-			<!-- 表格数据 -->
-			<el-table v-loading="loading" :data="pageList">
-				<el-table-column label="赛事编号" prop="matchNumStr" />
-				<el-table-column label="联赛" prop="leagueAllName" :show-overflow-tooltip="true" />
-				<el-table-column label="主队" prop="homeTeamAllName" :show-overflow-tooltip="true" />
-				<el-table-column label="客队" prop="awayTeamAbbName" />
-				<el-table-column label="比赛开始时间" align="center" prop="matchDateTime" width="180">
-					<template #default="scope">
-						<span>{{ parseTime(scope.row.matchDateTime) }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="赛果" prop="matchId">
-					<template #default="scope">
-						<el-popover placement="bottom" :width="360">
-							<template #reference> 
-								<el-button link type="primary" @dblclick="handleJumpLink(scope.row)">查看</el-button>
-							</template>
-							<template #default> 
-								<div>
-									<el-table border :data="scope.row.matchResults">
-										<el-table-column label="游戏" prop="matchNumStr">
-											<template #default="item">
-												{{ item.row.codeName }}
-											</template>
-										</el-table-column>
-										<el-table-column label="开赛结果" prop="reportSatus">
-											<template #default="item"> 
-												<el-tag type="error">{{ item.row.combinationDesc }}</el-tag>
-											</template>
-										</el-table-column>
-										<el-table-column label="奖金" prop="matchNumStr">
-											<template #default="item">
-												{{ item.row.odds }}
-											</template>
-										</el-table-column>
-									</el-table>
-								</div>
-							</template>
-						</el-popover>
-					</template>
-				</el-table-column>
-				<el-table-column label="AI预测" prop="matchId">
-					<template #default="scope">
-						<el-popover placement="bottom" :width="360">
-							<template #reference> 
-								<el-button link type="primary">查看</el-button>
-							</template>
-							<template #default> 
-								<div style="padding: 8px;">
-									<el-radio-group v-model="activeName" style="margin-bottom: 10px">
-										<el-radio-button value="FINYX_F">finyx-AI</el-radio-button>
-										<el-radio-button value="D3_F">D3-index</el-radio-button>
-									</el-radio-group>
-									<div v-show="activeName === 'FINYX_F'">
-										<el-table border :data="scope.row.farmatReportResults['FINYX_F']" :show-header="false">
-											<el-table-column>
-												<template #default="item">
-													{{ item.row.lable }}
-												</template>
-											</el-table-column>
-											<el-table-column>
-												<template #default="item"> 
-													{{ item.row.value || '-' }}
-												</template>
-											</el-table-column>
-										</el-table>
-									</div>
-									<div v-show="activeName === 'D3_F'">
-										<el-table border :data="scope.row.farmatReportResults['D3_F']" :show-header="false">
-											<el-table-column>
-												<template #default="item">
-													{{ item.row.lable }}
-												</template>
-											</el-table-column>
-											<el-table-column>
-												<template #default="item"> 
-													{{ item.row.value || '-' }}
-												</template>
-											</el-table-column>
-										</el-table>
-									</div>
-								</div>
-							</template>
-						</el-popover>
-					</template>
-				</el-table-column>
-				<el-table-column label="Finyx预测结果" width="300" align="center">
-						<el-table-column label="常" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'resultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="让" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'hhadResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="分" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'scoreResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="总" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'goalsResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="半" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'halfFullResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="亚" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'FINYX_F', 'asianHandicapFlag')]"></span>
-							</template>
-						</el-table-column>
-				</el-table-column>
-				  <el-table-column label="结果标记" align="center" class-name="small-padding fixed-width" width="200">
-					<template #default="scope">
-						<el-button 
-							v-show="showBtn(scope.row, 'FINYX_F')" 
-							link 
-							type="primary" 
-							icon="Edit" 
-							@click="openDialog(scope.row, 'FINYX_F')" 
-							:class="[matchIdType.id === scope.row.matchId && matchIdType.type === 'FINYX_F' ? 'has-active' : '']"
-						>finyx-AI</el-button>
-						<el-button 
-							v-show="showBtn(scope.row, 'D3_F')" 
-							link 
-							type="primary" 
-							icon="Edit" 
-							@click="openDialog(scope.row, 'D3_F')"
-							:class="[matchIdType.id === scope.row.matchId && matchIdType.type === 'D3_F' ? 'has-active' : '']"
-						>D3-index</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column label="D3预测结果" width="300" align="center">
-						<el-table-column label="常" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'resultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="让" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'hhadResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="分" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'scoreResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="总" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'goalsResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="半" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'halfFullResultFlag')]"></span>
-							</template>
-						</el-table-column>
-						<el-table-column label="亚" width="50" align="center">
-							<template #default="scope">
-								<span :class="['icon-d3', tableColumnActive(scope.row, 'D3_F', 'asianHandicapFlag')]"></span>
-							</template>
-						</el-table-column>
-				</el-table-column>
-			</el-table>
-
-			<!-- 分页区域 -->
-			<pagination 
-			:show="total > 0"
-			:total="total" 
-			v-model:page="queryParams.pageNum"
-			v-model:limit="queryParams.pageSize" 
-			@pagination="getList" />
-		</div>
-		<lz-page-empty v-else-if="!loading" :type="'2'">
-			<lz-svg-icon icon-class="empty2" style="font-size: 312px;"/>
-		</lz-page-empty>
-
-
-		<!-- 修改对话框 -->
-		<el-dialog :title="dialogTitle" v-model="dialogOpen" width="600px" append-to-body>
-			<Prediction :data="dialogForm"  type="edit" v-if="dialogOpen" @submit="submitForm" ref="editHadRef"/>
-			<template #footer>
-				<div class="dialog-footer">
-					<el-button type="primary" @click="submitForm">确 定</el-button>
-					<el-button @click="cancel">取 消</el-button>
-				</div>
-			</template>
-		</el-dialog>
+		<el-tabs v-model="activeName" class="res-el-tab" @tab-click="handleClick">
+			<el-tab-pane label="竞猜足球" name="betting_soccer"><TabPane1 /></el-tab-pane>
+			<el-tab-pane label="热门足球" name="hot_soccer"><TabPane2 /></el-tab-pane>
+		</el-tabs>
 	</div>
 </template>
 
-<script setup name="OperationReport">
-import { Info, infoSelectDistinctLeagueAbbNames, reportResultUpdate } from "@/api/tc/eventAnalysisReport"
-import { jumpLink } from "@/utils/tc"
-
-import { processMatchResults } from "@/utils/tc"
-import Prediction from "@/views/operation/report/components/Prediction.vue"
-
-import { ref } from "vue"
+<script setup name="EventAnalysisReport">
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import TabPane1 from './components/TabPane1.vue'
+import TabPane2 from './components/TabPane2.vue'
 
+const route = useRoute()
 const router = useRouter()
-const { proxy } = getCurrentInstance()
-const pageList = ref([])
-const loading = ref(false)
-const showSearch = ref(true)
-const total = ref(0)
-const dateRange = ref([])
-const editHadRef = ref(null)
-const activeName = ref('FINYX_F')
-const matchIdType = ref({ id: '', type: '' })
 
-const dialogOpen = ref(false)
-const dialogTitle = ref('标记')
-const dialogForm = ref({})
+// 从URL参数获取activeName，如果没有则默认为'soccer'
+const activeName = ref(route.query.tab || 'betting_soccer')
 
-/** 数据范围选项*/
-const dataScopeOptions = ref([])
-const flagStatusOptions = ref([
-	{  value: 1, label: '已标记' },
-	{  value: 0, label: '未标记' },
-])
-
-const data = reactive({
-	form: {},
-	queryParams: {
-		pageNum: 1,
-		pageSize: 10,
-		matchNumStr: undefined,
-		leagueAbbName: undefined,
-		flagStatus: undefined,
-	},
-	rules: {},
+// 监听activeName变化，更新URL参数
+watch(activeName, (newVal) => {
+	router.replace({
+		query: {
+			...route.query,
+			tab: newVal
+		}
+	})
 })
 
-const { queryParams } = toRefs(data)
-
-function tableColumnActive(row, modelType, key) {
-  // 检查row是否为空对象或缺少必要属性
-  if (!row || Object.keys(row).length === 0) {
-    return '';
-  }
-  
-  // 确保reportResults存在且为数组
-  if (!row.reportResults || !Array.isArray(row.reportResults)) {
-    return '';
-  }
-  
-  // 查找对应modelType的数据
-  const reportData = row.reportResults.find(item => item.modelType === modelType);
-  
-  // 如果没有找到对应数据，返回空字符串
-  if (!reportData) {
-    return '';
-  }
-
-  // 根据key值获取对应字段的值并判断是否应该添加active类
-  const value = reportData[key];
-  if (value && value === '1') {
-    return 'table-column-active-1';
-  }
-  if (value && value === '0.5') {
-    return 'table-column-active-11';
-  }
-  if (value && value === '-1') {
-    return 'table-column-active-2';
-  }
-  if (value && value === '-0.5') {
-    return 'table-column-active-22';
-  }
-  
-  return '4';
+const handleClick = (tab, event) => {
+	console.log('点击标签页:', tab.props.name)
 }
 
-
-function rowPrediction(row, modelType) {
-	return row.reportResults && row.reportResults.find(el => el.modelType === modelType) || {}
-}
-
-function showBtn(row, type) {
-	// 判断reportResults是否存在，不存在则返回false
-	if(!row.reportResults) {
-		return false
-	}
-	if(row.reportResults.find(el => el.modelType === type)) {
-		return true
-	}
-	return false
-}
-
-
-/** 导出按钮操作 */
-function handleExport() {
-	//   proxy.download("system/user/export", {
-	//     ...queryParams.value,
-	//   },`user_${new Date().getTime()}.xlsx`)
-}
-
-/** 提交表单 */
-function submitForm() {
-	const data = editHadRef.value.getFormData()
-	reportResultUpdate(data).then(response => { 
-		proxy.$message.success(response.msg)
-		getList()
-	}).finally(() => { 
-		dialogOpen.value = false
-	})
-}
-
-/** 取消按钮 */
-function cancel() {
-	dialogOpen.value = false
-	dialogForm.value = {}
-}
-
-function openDialog(row, type='') { 
-	if(row && row.reportResults && type){
-		dialogForm.value = row.reportResults.find(el => el.modelType === type)
-		dialogOpen.value = true
-		dialogTitle.value = ' 标记 ' + row.matchNumStr + ' ' + type+ '模型'
-		matchIdType.value = { id: row.matchId, type: type }
-	}
-}
-
-/** 获取联赛类型 */
-function getLeagueAbbNames() {
-	infoSelectDistinctLeagueAbbNames().then(response => {
-		dataScopeOptions.value = response.rows ? response.rows.map(item => ({ value: item, label: item })) : []
-	})
-}
-
-/** 跳转链接 */
-function handleJumpLink(row) {
-	jumpLink(row.matchId, 1)
-}
-
-function reportResultsModelType(arr){
-	const res = {}
-	arr.forEach(item => {
-		res[item.modelType] = [
-			{
-				lable: '主队',
-				value: item.homeTeamName,
-				key: 'result'	
-			},
-			{
-				lable: '客队',
-				value: item.awayTeamName,
-				key: 'result'	
-			},
-			{
-				lable: '胜平负',
-				value: item.result,
-				key: 'result'	
-			},
-			{
-				lable: '让分胜平负',
-				value: item.hhadResult,
-				key: 'hhadResult'	
-			},
-			{
-				lable: '比分',
-				value: item.scoreResult,
-				key: 'scoreResult'
-			},
-			{
-				lable: '进球数',
-				value: item.goalsResult,
-				key: 'goalsResult'
-			},
-			{
-				lable: '半全场',
-				value: item.halfFullResult,
-				key: 'halfFullResult'
-			},
-			{
-				lable: '亚盘',
-				value: item.asianHandicap,
-				key: 'asianHandicap'
-			}
-		]
-	})
-	return res;
-}
-function farmatReportResults(list) {
-	const res = list.map(item => ({ 
-		...item, 
-		farmatReportResults: item.reportResults ? reportResultsModelType(item.reportResults): {} 
-	}));
-	return res;
-}
-
-/** 查询列表 */
-function getList() {
-	loading.value = true
-	const data = { ...queryParams.value }
-	if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
-		data.beginTime = dateRange.value[0]
-		data.endTime = dateRange.value[1]
-	} else {
-		data.beginTime = undefined
-		data.endTime = undefined
-	}
-	Info(data).then(response => {
-		const res = response.rows.map(item => ({ 
-			...item, 
-			matchResults: item.matchResults ? processMatchResults(item.matchResults): null 
-		}));
-		// 格式化reportResults
-		pageList.value = farmatReportResults(res)
-		total.value = response.total
-	}).finally(() => {
-		loading.value = false
-	})
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-	queryParams.value.pageNum = 1
-	getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-	dateRange.value = []
-	proxy.resetForm("queryRef")
-	handleQuery()
-	matchIdType.value = { id: '', type: '' }
-}
-
-onMounted(() => {
-	// 联赛类型
-	getLeagueAbbNames()
-	// 列表查询
-	getList()
-})
 </script>
-
-<style scoped lang="scss"> 
-.icon-d3 {
-	display: inline-block;
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	background-color: #fff;
-	border: 2px solid #3067EF;
-	box-sizing: border-box;
-}
-.table-column-active-1 {
-	background-color: #f56c6c;
-	border-color: #f56c6c;
-}
-.table-column-active-11 {
-	background-color: #f56c6c;
-	border-color: #f56c6c;
-	position: relative;
-}
-.table-column-active-11::after {
-	content: '';
-	display: block;
-	width: 20px;
-	height: 10px;
-	background-color: #fff;
-	position: absolute;
-	top: 50%;
-	left: -2px;
-}
-.table-column-active-2 {
-	background-color: #333;
-	border-color: #333;
-}
-.table-column-active-22 {
-	background-color: #333;
-	border-color: #333;
-	position: relative;
-}
-.table-column-active-22::after {
-	content: '';
-	display: block;
-	width: 20px;
-	height: 10px;
-	background-color: #fff;
-	position: absolute;
-	top: 50%;
-	left: -2px;
-}
-</style>
\ No newline at end of file