performance-test/src/views/overview/components/dicCard/index.vue

<!--
 * @Author: your name
 * @Date: 2025-01-13 14:15:47
 * @LastEditTime: 2025-01-16 09:53:24
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/overview/components/dicCard/index.vue
-->
<template>
  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
    <el-tab-pane label="当前评论" name="current">
      <template
        v-if="commentDescriptionVos && commentDescriptionVos.length > 0"
      >
        <el-descriptions
          class="margin-top"
          title="分析评论"
          :column="1"
          v-for="(item, inds) in commentDescriptionVos"
          :key="inds + 'current'"
        >
          <el-descriptions-item label="评论时间">
            <div v-html="item.createTime"></div>
          </el-descriptions-item>
          <el-descriptions-item label="评论批次">
            <div v-html="item.analysisName"></div>
          </el-descriptions-item>
          <el-descriptions-item label="评论描述">
            <div v-html="item.comment"></div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <el-empty description="暂无分析评论" v-else></el-empty>
    </el-tab-pane>
    <el-tab-pane label="历史评论" name="history">
      <template
        v-if="historyCommentDescList && historyCommentDescList.length > 0"
      >
        <el-descriptions
          class="margin-top"
          title="分析评论"
          :column="1"
          v-for="(item, inds) in historyCommentDescList"
          :key="inds + 'history'"
        >
          <el-descriptions-item label="评论时间">
            <div v-html="item.createTime"></div>
          </el-descriptions-item>
          <el-descriptions-item label="评论批次">
            <div v-html="item.analysisName"></div>
          </el-descriptions-item>
          <el-descriptions-item label="评论描述">
            <div v-html="item.comment"></div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <el-empty description="暂无历史评论" v-else></el-empty>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { analysisCommentDescList } from "@/api/overview";
export default {
  props: {
    batchCode: {
      type: String,
      default: "",
    },
    analysisTypeCode: {
      type: String,
      default: "",
    },
    commentDescriptionVos: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      activeName: "current",
      historyCommentDescList: [],
    };
  },
  watch: {
    batchCode(newVal) {
      console.log(newVal, "this.activeName ===");
      if (newVal) {
        this.activeName = "current";
      }
    },
    //分析类型
    // analysisTypeCode() {
    //   if (newVal) {
    //     this.analysisCommentDescListHistory()
    //   }
    // }
  },
  methods: {
    handleClick(tab, event) {
      console.log(this.activeName, "activeName");
      if (this.activeName === "history") {
        this.analysisCommentDescListHistory();
      }
    },
    async analysisCommentDescListHistory() {
      try {
        const res = await analysisCommentDescList({
          //   batchCode: this.batchCode,
          analysisTypeCode: this.analysisTypeCode,
        });
        this.historyCommentDescList = res.data || [];
        console.log(
          res.data,
          "历史评论",
          this.batchCode,
          this.analysisTypeCode
        );
      } catch (err) {}
    },
  },
};
</script>
<style scoped lang="scss">
.el-tabs--border-card {
  height: 100%;
  overflow: scroll;

  .el-tabs__content {
  }
}
</style>