SpectralPlot/src/DataView/menuvue/menubar.vue

<script>
import { BDropdownItem, BDropdown, BDropdownDivider, BButtonGroup, BButton, BModal, BNavbar, BNavbarBrand, BNavbarNav, BNavItem, BNavItemDropdown, BToast, useToast } from 'bootstrap-vue-next';

import { ref, Teleport } from 'vue';

import EventBus from "../../eventBus.js";

export default {
  name: 'menubardatavue',
  components: {
    BDropdownItem,
    BDropdown,
    BDropdownDivider,
    BButtonGroup,
    BButton,
    BModal,
    BNavbar,
    BNavbarBrand,
    BNavbarNav,
    BNavItem,
    BNavItemDropdown,
    BToast

  },
  emits: ['menubalclicked'],
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      modal: false,
      DCbutton: {
        state: "init",

      },
      WRbutton: {
        state: "init",

      }

    }
  },
  setup(props, context) {
    const active = ref(false);





    return { active }

  },
  mounted() {
    // 仅注册总线，键盘监听放在 activated
    EventBus.on('SetMenubutton', this.setbutton);
  },
  activated() {
    window.addEventListener("keydown", this.handlekeydown);
  },
  deactivated() {
    window.removeEventListener("keydown", this.handlekeydown);
  },
  beforeUnmount() {
    window.removeEventListener("keydown", this.handlekeydown);
    EventBus.off && EventBus.off('SetMenubutton', this.setbutton);
  },
  methods: {
    setbutton(command) {
      if (command.name == "DC") {
        this.DCbutton.state = command.state;
      }
      if (command.name == "WR") {
        this.WRbutton.state = command.state;
      }

    },

    showbox() {
      EventBus.emit('showbox', "hello", "提示11")
    },

    quit() {
      EventBus.emit('triggerClearData');
      setTimeout(() => {
        EventBus.emit('changemainvue');
      }, 100);
    },

    
    changemainvue() {
      EventBus.emit('changemainvue');
    },

    onmenuclick(type, name) {




      // console.log("menu " + name + " click");
      // let command = {
      //   name: name,
      //   type: type
      // }
      // this.$emit("menubalclicked", command)
    },
    handlekeydown(event) {
      const t = event.target || {};
      const tag = (t.tagName || '').toLowerCase();
      const isEditable = t.isContentEditable || tag === 'input' || tag === 'textarea' || tag === 'select';
      if (isEditable) return;

      // 只处理来自 #app 内部的事件，忽略外部悬浮窗/插件
      const appRoot = document.getElementById('app');
      if (!appRoot || !appRoot.contains(event.target)) return;

      // 不劫持系统复制快捷键 Ctrl+C
      if (event.ctrlKey && !event.shiftKey && (event.key === 'c' || event.key === 'C')) {
        return;
      }

      if (event.ctrlKey) {
        if (event.key == "n" || event.key == "N") {
          this.onmenuclick('Set', 'Workmode');
        }
        if (event.key == "d" || event.key == "D") {
          this.onmenuclick('Set', 'DevInfo');
        }
        if (event.key == "w" || event.key == "W") {
          this.onmenuclick('Set', 'Weavelenth');
        }
        // 与采集页保持一致：定标改为 Ctrl + Shift + C
        if (event.shiftKey && (event.key == "c" || event.key == "C")) {
          this.onmenuclick('Set', 'Calibrate');
        }
      }
    },

    openFolder() {
      // 打开：先清理再打开
      EventBus.emit('triggerClearData');
      EventBus.emit('triggerOpenFolder');
    },

    saveFiles() {
      EventBus.emit('triggerSaveFiles');
    },
  }




}

</script>


<!--<script setup lang="ts">-->
<!--import { BDropdownItem,BDropdown,BDropdownDivider,BButtonGroup,BButton,BModal,BNavbar,BNavbarBrand,BNavbarNav,BNavItem,BNavItemDropdown,BToast,useToast } from 'bootstrap-vue-next';-->
<!--import { ref} from 'vue';-->
<!--const {show1} = useToast();-->
<!--const active = ref(false)-->
<!--</script>-->
<template>
  <BNavbar variant="dark" v-b-color-mode="'dark'" style="height: 3vh">

    <BNavbarNav>
      <BNavItemDropdown text="文件" right>
        <!-- <BDropdownItem href="#">新建</BDropdownItem> -->
        <BDropdownItem href="#" @click="openFolder">打开</BDropdownItem>
        <BDropdownItem href="#" @click="saveFiles">保存</BDropdownItem>
        <!-- <BDropdownItem href="#">另存为</BDropdownItem> -->
        <BDropdownDivider></BDropdownDivider>
        <BDropdownItem href="#" @click="quit()">退出</BDropdownItem>
        <!-- <BDropdownItem href="#" @click="onmenuclick('File', 'Advance')">高级</BDropdownItem> -->
        <!-- <BDropdownItem @click="onmenuclick('info', 'help')">帮助</BDropdownItem> -->
      </BNavItemDropdown>

      <!--      &lt;!&ndash; Navbar dropdowns &ndash;&gt;-->


      <!-- <BNavItemDropdown text="设置" right> -->
      <!-- <BDropdownItem  @click="onmenuclick('Set','Workmode')">工作模式</BDropdownItem>
        <BDropdownItem  @click="onmenuclick('Set','DevInfo')">设备信息</BDropdownItem> -->
      <!-- <BDropdownItem  @click="onmenuclick('Set','Weavelenth')">波长系数</BDropdownItem> -->
      <!-- <BDropdownItem  @click="onmenuclick('Set','Weavelenthcoeff')">波长设定</BDropdownItem>
        <BDropdownItem  @click="onmenuclick('Set','Calibrate')">定标</BDropdownItem>
        <BDropdownItem  @click="onmenuclick('Set','CalibrateHH3')">HH3定标</BDropdownItem> -->
      <!-- </BNavItemDropdown> -->

      <BNavItemDropdown text="窗口" right>


        <BDropdownItem @click="changemainvue()">数据采集</BDropdownItem>
        <!--        <BDropdownItem   >ES</BDropdownItem>-->
        <!--        <BDropdownItem href="#">RU</BDropdownItem>-->
        <!--        <BDropdownItem href="#">FA</BDropdownItem>-->
      </BNavItemDropdown>





      <!--      <Teleport to="body">-->
      <!--        <div class="toast-container  position-fixed " style="top:0px;right: 0px;width: 300px" >-->
      <!--      <BToast v-model="active" variant="info" interval="10" value="100" progress-props="{-->
      <!--          variant: 'danger',-->
      <!--          },">-->
      <!--        <template #title>-->
      <!--          Title-->
      <!--        </template>-->
      <!--        你好-->
      <!--      </BToast>-->
      <!--          </div>-->
      <!--      </Teleport>-->
      <!--      <BButton @click="active = !active">Toggle</BButton>-->
    </BNavbarNav>
    <!-- <div class="btgroup">
      <b-button variant="secondary" pill class="siglebt"  @click="onmenuclick('Work','OPT')">OPT</b-button>
      <b-button :variant='DCbutton.state=="OK"?"success":"secondary"' pill class="siglebt"  @click="  onmenuclick('Work','DC') ">DC</b-button>

      <b-button :variant='WRbutton.state=="OK"?"success":"secondary"' pill class="siglebt" @click="onmenuclick('Work','WR')">WR</b-button>
      <b-button variant="secondary" pill class="siglebt"  disabled  @click="onmenuclick('Work','Rad')">Rad</b-button>
      <b-button variant="secondary" pill class="siglebt"    @click="onmenuclick('Work','Save')">Save</b-button>

    </div> -->
  </BNavbar>
</template>

<style scoped>
.navbar {
  background-color: #f8f9fa;
  width: 100vw;
}

.btgroup {
  position: absolute;
  right: 15%;
}

.siglebt {
  radio: 50%;
  font-size: 10px;
  height: 40px;
  width: 40px;
  text-align: center;
  padding: 0px;
  margin-left: 10px;
}
</style>