bigdata_WX/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">
/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;
  /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>