<template>
  <div class="app-container">
    <h2 v-if="!this.$route.query.statistics || this.$route.query.statistics==='null'">
      此评价未建立统计分析方法
    </h2>
    <div v-if="this.$route.query.statistics && this.$route.query.statistics!=='null'">
      <div>
        <!-- 雷达图 -->
        <div style="width: 400px; height: 400px">
          <h2>雷达图</h2>
          <el-image :src="'http://localhost:5000/radar/'+this.$route.params.taskId">
            <div slot="placeholder" class="image-slot">
              正在分析中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <!-- 主成分分析 -->
        <div style="width: 400px; height: 400px">
          <h2>主成分分析</h2>
          <el-image :src="'http://localhost:5000/pca/'+this.$route.params.taskId">
            <div slot="placeholder" class="image-slot">
              正在分析中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div>
          <h2>相似度分析</h2>
          <div style="width: 400px; height: 400px">
            <el-image :src="'http://localhost:5000/similarity/'+this.$route.params.taskId">
              <div slot="placeholder" class="image-slot">
                正在分析中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div style="width: 400px; height: 400px">
            <el-image :src="'http://localhost:5000/similarity2/'+this.$route.params.taskId">
            </el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TaskStatistics",
  data() {
    return {

    }
  },
}
</script>
