bigDataApp/components/Draw/comps/Annotation.vue

<template>
  <div class="tipInfo" :style="inputStyle">
    <div class="header">
      <span>人工标注</span>
    </div>
    <div class="contentBox">
      <el-input
        placeholder="输入标注内容"
        v-model="currentLabel"
        maxlength="10"
        size="mini"
        clearable
        @keydown.native="handleKeyDown"
        ref="labelInput"
      >
      </el-input>
      <div class="near" v-if="nearList.length">
        最近:
        <el-tag
          type="primary"
          size="mini"
          effect="plain"
          v-for="pest in nearList"
          @click="currentLabel = pest"
          :key="pest"
          >{{ pest }}</el-tag
        >
      </div>
      <div class="btnBox">
        <el-button size="mini" @click="deleteRect">
          取消操作
        </el-button>

        <el-button type="primary" size="mini" @click="confirmLabel">
          保存标注
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    inputStyle: {
      type: Object,
      default: () => ({
        left: `0px`,
        top: `0px`
        // transform: 'translate(-50%, -24px)' // 稍微下移避免遮挡
      })
    }
  },
  data() {
    return {
      nearList: [],
      currentLabel: ''
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getNearList()
    this.$nextTick(() => {
      this.$refs.labelInput.focus()
    })
    // this.$refs.labelInput.addEventListener('keydown', this.handleKeyDown)
  },
  beforeDestroy() {
    // this.$refs.labelInput.removeEventListener('keydown', this.handleKeyDown)
  },
  watch: {},
  methods: {
    handleKeyDown(e) {
      if (e.code === 'Enter') {
        this.confirmLabel()
      }
    },
    getNearList() {
      let nearList = localStorage.getItem('nearPestList')
      if (nearList) {
        this.nearList = JSON.parse(nearList)
      }
    },
    deleteRect() {
      this.$emit('deleteRect')
    },
    confirmLabel() {
      if (this.currentLabel) {
        this.$emit('confirmLabel', this.currentLabel)
        if (this.nearList.indexOf(this.currentLabel) !== -1) {
          this.nearList.splice(this.nearList.indexOf(this.currentLabel), 1) // 删除原来的
        }
        this.nearList.unshift(this.currentLabel) // 添加到最前面
        localStorage.setItem('nearPestList', JSON.stringify(this.nearList))
      } else {
        this.$message({
          message: '请输入标注内容',
          type: 'warning'
        })
      }
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
.tipInfo {
  background: #fff;
  position: absolute;
  z-index: 4;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  .header {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
}
.near {
  font-size: 12px;
  margin: 10px 0;
  height: 20px;
  overflow: hidden;
  .el-tag {
    cursor: pointer;
    margin-right: 10px;
  }
}
.contentBox {
  width: 250px;
  padding: 20px;
}
.btnBox {
  margin-top: 10px;
  text-align: center;
}
.annotation-input {
  position: fixed;
  z-index: 100;
  background: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

.annotation-input input {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  min-width: 150px;
}

.annotation-input button {
  padding: 4px 8px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
</style>