CMVR-IOT-UI/src/views/evaluate/il/touch/secondaryIndicator.vue

<template>
  <div class="container">
    <div class="indicator-container">
      <div class="title-container">
        <div class="title-left">
          <el-tag>二级指标</el-tag>
          <div class="title">指标名称:<span class="text">{{ props.title }}</span></div>
        </div>
        <div>指标权重:{{ props.weight }}%</div>
        <div>
          <el-button size="small" :icon="Edit" />
          <el-button size="small" type="danger" :icon="Delete" />
        </div>
      </div>

      <div>
        <el-tabs v-model="activeTab">
          <el-tab-pane
            v-for="item in tabList"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <ScoreTable :title="item.title" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Delete, Edit } from "@element-plus/icons-vue";
import ScoreTable from "./components/ScoreTable.vue";

const props = defineProps({
  title: {
    type: String,
    default: "无噪声唤醒",
  },
  weight: {
    type: Number,
    default: 30,
  },
});

const activeTab = ref('1');

const tabList = ref([
  {
    title: "唤醒时间",
    name: "1",
  },
  {
    title: "唤醒成功率",
    name: "2",
  },
]);
</script>
<style lang="scss" scoped>
.container {
  margin: 20px 0;

  .indicator-container {
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    padding: 20px;

    .title-container {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title-left {
        display: flex;
        gap: 20px;

        .title {
          margin-left: 8px;

          .text {
            font-weight: bold;
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>