<template>
<el-main style="height: 100%; width: 100%; overflow: auto;">
  <el-row class="secondhang">
    <GuiForPlotShow ref="ASDPlotShow" class="plotcontainer"></GuiForPlotShow>
  </el-row>
  <el-row class="firsthang">
    <el-col :span="10" class="diveinfo">
     设备信息
      <GuiForDivesInfo ref="GuiForDivesInforef"></GuiForDivesInfo>
    </el-col>
    <el-col :span="14">
      地图
      <!-- <MapContainer></MapContainer> -->
         <a-image
    width="200"
    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
  />
    </el-col>
  </el-row>

</el-main>
</template>

<script>
import GuiForPlotShow from "./GuiForPlotShow.vue";
import MapContainer from "./MapContainer.vue";
import GuiForDivesInfo   from "./GuiForDivesInfo.vue";
import {invoke} from "@tauri-apps/api/tauri";
export default {
  name: "GuiForDataShow",
  components: {
    GuiForPlotShow,
    MapContainer,
    GuiForDivesInfo
  },
  methods: {
    async onloaddata(data){
      //  console.log(data);
      let jsonfiletem = await this.$MyGetJsonData(data);
      this.$refs.ASDPlotShow.onloaddata(jsonfiletem);
      this.$refs.GuiForDivesInforef.onloaddata(jsonfiletem["ASDInfo"]);

    }
  },
 async mounted(){
    let aaa=await  invoke("getoneirisfile",{path:"iris_data_example.iris"});
    console.log(aaa);
  }

}
</script>

<style scoped>
.plotcontainer{
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.firsthang{
  height: 30%;
  width: 100%;
  overflow: hidden;
}
.secondhang{
  height: 70%;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.diveinfo{

}
</style>
