dingxin_toolbox_vue/src/views/ai_show/index.vue

<script setup>
import {onBeforeMount, ref} from 'vue';
import {get_ai_show_data} from "@/apis/ai_show.js";

// region 表格数据代码
const tableData = ref([])
const hallData = ref([])
const hallArray = ref([])

// 表格展示的数据
const showData = ref([])
const prompt = ref('')
const tokens = ref(0)
const takeTimes = ref(0)
const realSales = ref('')
const aiSales = ref('')
const showResult = ref('')
const result = ref(false)

// 过滤条件数据
const show_date = ref('2026-06-12')
const cinema_code = ref('11078801')
const force = ref(false)

// 通过异步请求获取影院列表数据
async function get_data() {
  showData.value = []
  prompt.value = ''
  tokens.value = 0
  takeTimes.value = 0
  realSales.value = ''
  aiSales.value = ''
  showResult.value = ''
  result.value = false
  await get_ai_show_data(cinema_code.value, show_date.value, force.value).then(res => {
    if (res.status === 'success') {
      result.value = false
      showData.value = res.data.objects
      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
      console.log(showData.value, prompt.value, tokens.value, takeTimes.value, realSales.value, aiSales.value, showResult.value)
      formatTableData()
    } else {
      result.value = true
    }
  }).catch(err => {
        console.log(err)
      }
  )
}

// 处理表格数据
function formatTableData() {
  hallArray.value = []
  hallData.value = []
  tableData.value = []
  let temp = 0;
  showData.value.forEach((item, index) => {
    tableData.value.push({
      hall: 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 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('2026-06-11T00:00:00Z')
  const today = new Date();
  today.setDate(today.getDate() + 3)
  return time.getTime() < start || time.getTime() > today
}

// 定义生命周期，在加载时获取一次表格数据
onBeforeMount(
    async () => {
      await get_data()
    }
)


// endregion

</script>

<template>
  <el-form
      :inline="true"
      class="search_form"
  >
    <el-form-item label="智能排片日期" label-width="120">
      <el-date-picker
          v-model="show_date"
          type="date"
          placeholder="选择排片日期"
          size="default"
          :disabled-date="disabledDate"
          value-format="YYYY-MM-DD"
          @change="get_data"
      />
    </el-form-item>
    <el-form-item>
      <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-text style="margin-left: 30px">强制更新数据</el-text>
      <el-switch style="margin-left: 5px"
                 v-model="force"
                 @change="get_data">
        />
    </el-form-item>
    <!--    <el-button style="margin-right: 0">添加</el-button>-->
  </el-form>

  <el-table :data="tableData" style="width: 100%" :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="影院真实排片" 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>{{ 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">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>
</template>


<style>
.el-text {
  white-space: pre-wrap; /* 或者使用 pre-line */
}
</style>