You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

438 lines
14 KiB

<script setup>
import {onBeforeMount, ref, reactive, computed} from 'vue';
import {ElMessage} from 'element-plus'
import {get_ai_show_data, get_report_date, get_test_date_api} from "@/apis/ai_show.js";
// region 表格数据代码
const tableData = ref([])
const hallData = ref([])
const hallArray = ref([])
const test_date = ref()
const test_date_option = ref([])
// 表格展示的数据
const showData = ref([])
const hallType = ref({})
const createTime = ref('')
const prompt = ref('')
const tokens = ref(0)
const takeTimes = ref(0)
const realSales = ref('')
const aiSales = ref('')
const aiCount = ref('')
const compareCount = ref('')
const aiTotal = ref('')
const compareTotal = ref('')
const showResult = ref('')
const templateDate = ref('')
const result = ref(false)
const loading = ref(false)
const think = ref('')
const aiModel = ref('')
// 日期控件参数
const calendarStart = ref('')
const calendarEnd = ref('')
// 过滤条件数据
// 计算日期
const getDefaultDate = () => {
const date = new Date()
// date.setDate(date.getDate() + 1)
const year = date.getFullYear().toString().padStart(4, "0")
const month = (date.getMonth() + 1).toString().padStart(2, "0")
const day = date.getDate().toString().padStart(2, "0")
console.log(`${year}-${month}-${day}`)
return `${year}-${month}-${day}`
}
const show_date = ref(`2026-06-12`)
show_date.value = getDefaultDate()
const cinema_code = ref('11078801')
const force = ref(true)
const templateSwitch = ref(false)
const compareSwitch = ref('new') // template target new
const show_alter = () => {
ElMessage.error('没有查询到有效的智能排片数据,请调整日期和影院后再试!')
}
async function get_calendar_date() {
await get_report_date().then(res => {
if (res.status === 'success') {
calendarStart.value = res.start
calendarEnd.value = res.end
}
}).catch(err => {
console.log(err)
})
}
// 通过异步请求获取影院列表数据
async function get_data() {
showData.value = []
loading.value = true
prompt.value = ''
tokens.value = 0
takeTimes.value = 0
realSales.value = ''
aiSales.value = ''
showResult.value = ''
aiCount.value = ''
aiTotal.value = ''
compareCount.value = ''
result.value = false
createTime.value = ''
think.value = ''
aiModel.value = ''
force.value = compareSwitch.value === 'new'
if (compareSwitch.value !== 'new') {
test_date.value = ''
}
test_date_option.value = []
await get_ai_show_data(cinema_code.value, show_date.value, force.value, test_date.value).then(res => {
if (res.status === 'success') {
console.log(res)
result.value = false
prompt.value = res.data.prompt
tokens.value = res.data.take_tokens
takeTimes.value = res.data.take_times
realSales.value = res.data.real_sales
aiSales.value = res.data.ai_sales
showResult.value = res.data.result
templateDate.value = res.data.template_date
hallType.value = res.data.hall_type
aiCount.value = res.data.ai_count
aiTotal.value = res.data.ai_total
createTime.value = res.data.create_time
think.value = res.data.think
aiModel.value = res.data.ai_model
if (compareSwitch.value === 'template') {
showData.value = res.data.template_obj
compareCount.value = res.data.template_count
compareTotal.value = res.data.template_total
} else if (compareSwitch.value === 'new') {
showData.value = res.data.real_obj
compareCount.value = res.data.real_count
compareTotal.value = res.data.real_total
} else {
showData.value = res.data.target_obj
compareCount.value = res.data.target_count
compareTotal.value = res.data.target_total
}
console.log(showData.value, prompt.value, tokens.value, takeTimes.value, realSales.value, aiSales.value, showResult.value)
formatTableData()
loading.value = false
get_test_date()
} else {
result.value = true
show_alter()
loading.value = false
}
}).catch(err => {
console.log(err)
}
)
loading.value = false
}
// 处理表格数据
function formatTableData() {
hallArray.value = []
hallData.value = []
tableData.value = []
let temp = 0;
showData.value.forEach((item, index) => {
tableData.value.push({
hall: item[0] + '\n\n支持制式:' + hallType.value[item[0]],
ai_show: item[2],
ai_language: item[4],
ai_start: item[5],
ai_end: item[6],
ai_length: item[7],
ai_duration: item[8],
real_show: item[9],
real_language: item[11],
real_start: item[12],
real_end: item[13],
real_length: item[14],
real_duration: item[15],
})
if (hallArray.value.indexOf(item[0]) >= 0) {
hallData.value[temp] += 1
hallData.value.push(0)
} else {
hallArray.value.push(item[0])
temp = index
hallData.value.push(1)
}
})
console.log('hallArray.value', hallArray.value)
console.log('hallData.value', hallData.value)
}
// 通过接口获取测试数据的下拉列表数据
const get_test_date = () => {
get_test_date_api(cinema_code.value, show_date.value).then(res => {
if (res.status === 'success') {
res.date.forEach((item) => {
test_date_option.value.push({'value': item, label: item})
})
}
})
}
// 处理表格合并
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
if (column.property === 'hall') {
const rowSpan = hallData.value[rowIndex]
if (hallData.value[rowIndex] === 0) {
return {
rowspan: rowSpan,
colspan: 0,
}
} else {
return {
rowspan: rowSpan,
colspan: 1,
}
}
} else {
return {
rowspan: 1,
colspan: 1,
}
}
}
// 日历禁用日期
const disabledDate = (time) => {
const start = new Date(calendarStart.value)
const end = new Date(calendarEnd.value);
return time.getTime() < start || time.getTime() > end
}
const tableHeader = computed(() => {
if (compareSwitch.value === 'new') {
return '目标日期最新排片数据(实时更新)'
} else if (compareSwitch.value === 'template') {
return '模板日期排片数据'
} else {
return '目标日期历史排片数据'
}
})
const compareDesc = computed(() => {
if (compareSwitch.value === 'new') {
return '排片占比(AI/目标日期最新排片数据)'
} else if (compareSwitch.value === 'template') {
return '排片占比(AI/模板日期排片数据)'
} else {
return '排片占比(AI/目标日期历史排片数据)'
}
})
// 定义生命周期,在加载时获取一次表格数据
onBeforeMount(
async () => {
await get_data()
await get_calendar_date()
}
)
// endregion
</script>
<template>
1 month ago
<el-row align="middle">
<el-col :span="2">
<el-text>排片目标日期</el-text>
</el-col>
1 month ago
<el-col :span="3">
<el-date-picker
v-model="show_date"
type="date"
placeholder="选择排片日期"
size="default"
:disabled-date="disabledDate"
value-format="YYYY-MM-DD"
@change="get_data"
1 month ago
style="width: 140px"
/>
</el-col>
1 month ago
<el-col :span="12">
1 month ago
<el-radio-group v-model="cinema_code" @change="get_data">
<el-radio-button value="11078801" label="11078801">保利国际影城北京凯德大峡谷店</el-radio-button>
<el-radio-button value="31073101" label="31073101">SFC上影(永华店)</el-radio-button>
<el-radio-button value="33040301" label="33040301">宁波影都东门口店</el-radio-button>
</el-radio-group>
</el-col>
<el-col :span="3">
<el-text>智能排片生成时间:</el-text>
</el-col>
<el-col :span="3">
<el-text>{{ createTime }}</el-text>
</el-col>
</el-row>
<el-row style="margin: 10px 0 20px 14px" align="middle">
<el-col span="2">
<el-tooltip
class="box-item"
effect="dark"
content="最新排片数据:实时获取影院目标日期的排片数据;模板日期排片数据:AI生成排片时刻,参考的模板日期排片数据(历史数据不更新);目标日期排片数据:AI生成排片时刻,目标日期的排片数据(历史数据不更新)"
placement="top"
>
<el-text>对比数据选择</el-text>
</el-tooltip>
</el-col>
<el-col :span="9">
<el-radio-group v-model="compareSwitch" @change="get_data">
<el-radio value="new" label="new">最新排片数据</el-radio>
<el-radio value="template" label="template">模板日期排片数据</el-radio>
<el-radio value="target" label="target">目标日期排片数据</el-radio>
</el-radio-group>
</el-col>
<el-col :span="4" v-if="compareSwitch==='template'">
<el-text>模板日期{{ templateDate }}</el-text>
</el-col>
<el-col :span="3" v-if="compareSwitch==='new'" align="right">
<el-text>手动测试数据</el-text>
</el-col>
<el-col :span="4" v-if="compareSwitch==='new'">
<el-select v-model="test_date" placeholder="请选择" v-if="compareSwitch==='new'" :clearable="true"
@change="get_data" style="width: 240px">
<el-option
v-for="item in test_date_option"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
</el-row>
<el-table :data="tableData" style="width: 100%" v-loading="loading" :span-method="objectSpanMethod">
<el-table-column prop="hall" label="影厅别名" min-width="160"></el-table-column>
<el-table-column label="智能排片" align="center">
<el-table-column prop="ai_show" label="影片别名" min-width="160"></el-table-column>
<el-table-column prop="ai_language" label="语言" min-width="60"></el-table-column>
<el-table-column prop="ai_start" label="开始时间" min-width="80"></el-table-column>
<el-table-column prop="ai_end" label="结束时间" min-width="80"></el-table-column>
<el-table-column prop="ai_length" label="片长" min-width="60"></el-table-column>
<el-table-column prop="ai_duration" label="场间" min-width="60"></el-table-column>
</el-table-column>
<el-table-column :label="tableHeader" align="center">
<el-table-column prop="real_show" label="影片别名" min-width="160"></el-table-column>
<el-table-column prop="real_language" label="语言" min-width="60"></el-table-column>
<el-table-column prop="real_start" label="开始时间" min-width="80"></el-table-column>
<el-table-column prop="real_end" label="结束时间" min-width="80"></el-table-column>
<el-table-column prop="real_length" label="片长" min-width="60"></el-table-column>
<el-table-column prop="real_duration" label="场间" min-width="60"></el-table-column>
</el-table-column>
</el-table>
<el-row style="margin-top: 30px">
<el-text style="font-weight: bold" size="large">相关数据</el-text>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">调用模型</el-text>
</el-col>
<el-col :span="4" align="left">
<el-text>{{ aiModel }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">智能排片预估销售额</el-text>
</el-col>
<el-col :span="4" align="left">
<el-text>{{ aiSales }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">真实排片销售额</el-text>
</el-col>
<el-col :span="4" align="left">
<el-text>{{ realSales }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">智能排片耗时</el-text>
</el-col>
<el-col :span="4" align="left">
<el-text>{{ takeTimes }}s</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">智能排片消耗Tokens</el-text>
</el-col>
<el-col :span="4" align="left">
<el-text>{{ tokens }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">{{ compareDesc }}</el-text>
</el-col>
<el-col :span="9" align="left">
<el-text>{{ aiCount }}</el-text>
</el-col>
<el-col :span="9" align="left">
<el-text>{{ compareCount }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
</el-col>
<el-col :span="9" align="left">
<el-text>{{ aiTotal }}</el-text>
</el-col>
<el-col :span="9" align="left">
<el-text>{{ compareTotal }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">AI返回结果</el-text>
</el-col>
<el-col :span="21" align="left">
<el-text>{{ showResult }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">提示词</el-text>
</el-col>
<el-col :span="21" align="left">
<el-text>{{ prompt }}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="3" align="right">
<el-text style="font-weight: bold">AI思考过程</el-text>
</el-col>
<el-col :span="21" align="left">
<el-text>{{ think }}</el-text>
</el-col>
</el-row>
</template>
<style>
.el-text {
white-space: pre-wrap; /* 或者使用 pre-line */
}
.el-table .cell {
white-space: pre-line;
}
</style>