taais-web/src/views/demo/components/ShowStatisticResult.vue

<template>
  <el-dialog v-model="showResultDialogVisible" :title="title" width="700">
    <el-card style="width: 100%; margin-bottom: 10px">
      <div class="evaluate-data">
        <template v-for="(item, index) in ResultData" :key="index">
          <span>{{ item.name }}: {{ item.value }}</span
          ><br />
        </template>
      </div>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  api: {
    type: Function,
    required: false,
    default: () => {}
  },
  title: {
    type: String,
    required: false,
    default: '统计结果'
  }
})

const title = ref(props.title)

const showResultDialogVisible = ref(false)
const ResultData = ref([])
const get_statistics_result = async (id: number | string, api: Function = undefined, title__: string = undefined) => {
  let res: any = {}
  if (!api) {
    res = await props.api(id)
  } else {
    res = await api(id)
  }
  if (title__) {
    title.value = title__
  }
  ResultData.value = res.data
  showResultDialogVisible.value = true
}

defineExpose({
  get_statistics_result: get_statistics_result
})
</script>

<style lang="scss" scoped>
.evaluate-data {
  span {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 2;
  }
}
</style>