SpectralPlot/src/AppHyperSpectral.vue

<script>
import Greet from "./components/Greet.vue";
import HyperSpectralMainView   from "./components/HyperSpectralMainView.vue";
import menubar   from "./components/menubar.vue";
import siderleft   from "./components/siderleft.vue";
import apphymain from "./apphymain.js"
import setWavelenth from "./components/menubox/SetWavelenth.vue";
import {useToast} from "bootstrap-vue-next";
import EventBus from "./eventBus.js";
import {onMounted} from "vue";
import {message} from "@tauri-apps/api/dialog";

export default {
  components: {
    Greet,
    HyperSpectralMainView,
    menubar,
    siderleft,
    setWavelenth

  },
  data(){
    return {
      modal:false,
      modaltitle:"test",
      modalcomponent:null,
      tourdata:{
        current:0,
        steps:[],
        open:false

      }
    }
  },
  mounted() {
    this.$refs.SiderComponend.methodslist.push(this.$refs.HyperSpectralMainView.plotGraph);
    EventBus.on('showbox',this.showbox);
    this.inittour();
    this.testinmpt();

  },
  methods: {
    ...apphymain
  },

  setup()
  {
    const {show} = useToast();
    function showbox(message){
      if (typeof message === 'string') {
        message = {title: '提示', body: message}
      }
      if (typeof message === 'object') {
        if (typeof message.title === 'undefined') {
          message.title = '提示'
        }
        if (typeof message.body === 'undefined') {
          message.body = ''
        }
        if (typeof message.interval === 'undefined') {
          message.interval = 10
        }
        
        // if (typeof message.interval === 'undefined') {
        //   message.interval = 10
        // }


      }
      show?.({
        props: {
          headerClass:'hide:true',
          title: message.title,
          variant: 'info',
          pos: 'top-right',
          value: 2000,
          interval:  message.interval,
          progressProps: {
            variant: 'danger',
          },
          body: message.body,
          noCloseButton: false,
        },
      })
    }
    function showboxmini(message){
      if (typeof message === 'string') {
        message = {title: '提示', body: message}
      }
      if (typeof message === 'object') {
        if (typeof message.title === 'undefined') {
          message.title = '提示'
        }
        if (typeof message.body === 'undefined') {
          message.body = ''
        }
        if (typeof message.interval === 'undefined') {
          message.interval = 10
        }

        let dataforprocess={
          percent:100,
          info: message.body
        }
        EventBus.emit('setprogressbar',dataforprocess);
    }




  }
    return {showbox,showboxmini}
  }

}
</script>


<template>

  <BToastOrchestrator />


  <div class="container1">

    <BModal v-model="modal" :title="modaltitle" ok-only body-class="windowmodal" class="bmodalnow" noCloseOnBackdrop hideFooter="true" >
<!--      <SetWavelenth></SetWavelenth>-->
      <component :is="modalcomponent" ref="Commancompent" style="user-select: none;"></component>
    </BModal>
    <div class="row menubox">
      <div class="col-12">
       <menubar @menubalclicked="onmenuclicked"></menubar>
      </div>
    </div>
    <div class="row sencondebody" >
      <a-layout>


        <a-layout-sider :resize-directions="['right']" style="min-width: 15%;max-width: 50%;" @moving-end="siderresize" >
<!--          <div style="position: fixed;width: 0vw;height:0vh; float: left;display:block;order:-10; z-index: 10 !important;top:100px;left: 0px">-->
<!--            <Draggable style="position: absolute" >-->
<!--              <div>-->
<!--                sdfasdfsdfsadf123123123-->
<!--              </div>-->
<!--            </Draggable>-->
<!--          </div>-->
          <a-dropdown trigger="contextMenu" alignPoint >

          <siderleft ref="SiderComponend"></siderleft>

            <template #content>
              <a-doption>Option 1</a-doption>
              <a-doption>Option 2</a-doption>
              <a-doption>Option 3</a-doption>
            </template>
          </a-dropdown>


        </a-layout-sider>
        <a-layout-content style=" position: relative;max-width: 85%;min-width: 50%">
          <HyperSpectralMainView ref="HyperSpectralMainView"></HyperSpectralMainView>
        </a-layout-content>
      </a-layout>

    </div>
  </div>


<!--  <a-tour v-model:current="tourdata.current" :open="tourdata.open" :steps="tourdata.steps" @close="handleOpen(false)" />-->


</template>

<style scoped type="less">

.container1 {
  margin: 0 auto;

  padding-top: 0px;;
  padding-bottom: 0px;
  width: 100%;
  height: 100%;
}
.col-3 {
  background-color: #f8f9fa;
  padding-top: 0px;
  padding-bottom: 0px;
  padding: 0px;





  border-right: 1px solid #dee2e6;
  position: relative;

}
.col-9 {
  padding: 0px;

  position: relative;

}
.menubox{
  background-color: #f8f9fa;
  padding-top: 0px;
  padding-bottom: 0px;
  width: 100vw;
  height: 5vh;
  border-bottom: 1px solid #dee2e6;
  max-height:5vh;
}
.sencondebody{

  padding-top: 0px;
  padding-bottom: 0px;
  width: 100vw;
  height: 95vh;

}


.bmodalnow{
  user-select: none;
}
</style>
<style>
.modal-dialog{
  max-width: 90vw;
  max-height: 90vh;
  width: 80vw;
  height: 90vh;
  padding: 0px;
  margin: 0px;
  user-select: none
}

.modal-content
{
  width: 100%;
  height: 100%;
  user-select: none
}
.modal{
  --bs-modal-width: 90vw !important;
  --bs-modal-height:90vh !important;
  user-select: none
}

</style>