neic-hefeng/src/components/area/LabelArea.vue

/* 标注区 */
<template>
  <gy-card
    title="标注区"
    area-style="label"
    circle-style="yellow"
    content-style="25"
  >
    <div
      v-for="mk in values"
      :key="mk"
      @contextmenu="contextmenu(mk)"
      style="width: 120px; margin-left: 10px; margin-top: 10px"
    >
      <img
        src="../../assets/img/LabelArea/flag.png"
        style="float: left; margin-top: 5px; margin-left: 15px"
      />
      <div style="text-align: center">{{ mk.title }}</div>
      <input
        v-model="mk.value"
        style="
          border: none;
          background-color: #292929;
          height: 30px;
          border-radius: 6px;
          text-align: center;
          outline: none;
          width: 120px;
          color: rgb(220, 220, 220);
        "
      />
    </div>
  </gy-card>
</template>

<script>
import BackgroundData from "../../assets/script/BackgroundData";

export default {
  name: "LabelArea",
  data() {
    return {
      values: new Array(),
    };
  },
  created() {
    this.refreshTimer = setInterval(this.refreshData, 1000);
  },
  methods: {
    refreshData() {
      this.values = new Array();
      this.values = BackgroundData.getInstance().Marks;
    },

    contextmenu(mk) {
      const { remote } = require("electron");
      var that = this;
      const menuTemplate = [
        {
          label: "删除",
          click() {
            that.remove(mk);
          },
        },
      ];
      const menu = remote.Menu.buildFromTemplate(menuTemplate);

      menu.popup(remote.getCurrentWindow());
    },

    remove(mk) {
      var indx = -1;
      for (var ind in this.values) {
        if (this.values[ind].id == mk.id) {
          indx = ind;
          break;
        }
      }
      if (indx < 0) return;
      this.values.splice(indx, 1);
      BackgroundData.getInstance().removeMarked(mk);
    },
  },
};
</script>

<style scoped>
</style>