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

<!--
 * @Author: your name
 * @Date: 2025-01-13 14:15:47
 * @LastEditTime: 2025-03-14 20:22:13
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/overview/components/dicCard/index.vue
-->
<template>
  <div>
    <el-button
      @click="drawer = true"
      type="primary"
      style="margin-left: 16px"
      icon="el-icon-s-fold"
    >
    </el-button>
    <el-drawer :visible.sync="drawer" title="分析评论">
      <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>
    </el-drawer>
  </div>
</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: [],
      drawer: false,
    };
  },
  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>