bigDataApp/components/Draw/comps/panel.vue

<template>
  <div class="my-panel">
    <el-button
      v-show="reIdentify"
      class="resetPest"
      @click="resetPest"
      size="small"
      type="primary"
      >重新识别</el-button
    >
    <el-tabs type="border-card" class="infoCard">
      <el-tab-pane label="图像识别">
        <div class="info title">
          <span>{{ title }}</span>
          <span>数量</span>
        </div>
        <div class="info" v-for="(value, key) in pestObj" :key="key">
          <span>{{ key }}</span>
          <span>{{ value }}</span>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Panel',
  props: {
    rectangles: {
      type: Array,
      default: () => [],
    },
    reIdentify: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '目录',
    },
  },
  data() {
    return {};
  },
  computed: {
    pestObj() {
      let obj = {};
      this.rectangles.forEach((item) => {
        if (obj[item.text]) {
          obj[item.text]++;
        } else {
          obj[item.text] = 1;
        }
      });
      return obj;
    },
  },
  created() {},
  mounted() {
    let obj = {};
    this.rectangles.forEach((item) => {
      if (obj[item.text]) {
        obj[item.text]++;
      } else {
        obj[item.text] = 0;
      }
    });
    console.log('子组件mounted', obj);
  },
  watch: {},
  methods: {
    resetPest() {
      // 通知业务上层处理逻辑
      this.$emit('resetPest');
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
::v-deep .custom-ffffff .el-tabs--border-card {
  box-shadow: none;
}
.my-panel {
  position: relative;
  height: 100%;
}
.resetPest {
  position: absolute;
  top: 4px;
  right: 9px;
  z-index: 1;
}
.infoCard {
  position: relative;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  // box-shadow: none !important;
  border: 1px solid #e4e7ed;
  ::v-deep .el-tabs__content {
    height: calc(100% - 70px);
    overflow: auto;
    padding: 14px 0 !important;
    &::-webkit-scrollbar {
      width: 8px; /* 滚动条宽度 */
    }
    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: #f6f6f6; /* 轨道背景 */
      border-radius: 8px; /* 圆角 */
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background: #b6b6b6; /* 滑块颜色 */
      border-radius: 8px; /* 圆角 */
    }

    /* 鼠标悬停时的滑块样式 */
    &::-webkit-scrollbar-thumb:hover {
      background: #555; /* 悬停时颜色 */
    }
  }
  .info {
    display: flex;
    padding: 10px;
    align-items: center;
    font-weight: 600;
    justify-content: space-between;
    height: 40px;
    box-sizing: border-box;
    color: #333;
    // margin-top: 16px;
    font-size: 14px;
    border-bottom: 1px solid #e4e7ed;
  }
  .title {
    background: #ebedf0;
    margin-top: 0;
  }
}
.infoCard.el-tabs--border-card {
  box-shadow: none !important;
}
</style>