disaster_web3/src/view/index/index.vue

<template>
    <!-- 底部导航栏 -->
    <div class="footet-bottom"> 
        <ul v-show="btnlistshow">
          <li class="fontcolor  "  v-for="(item, index) in listArray" :key="index" :class="{btnactive: index === currentIndex}"  @click="changeColor(index)">{{item.name}}</li> 
            <!-- <li class="fontcolor  "  v-for="(item, index) in listArray" :key="index" :class="{btnactive: index === currentIndex}"  @click="changeColor(index)"> <el-image :src="item.img" fit="contain"></el-image>{{item.name}}</li> -->
            <!-- <li class="fontcolor  btnactive" > <el-image :src="bt1" fit="contain"></el-image>灾情推演</li>
            <li class="fontcolor"> <el-image  :src="bt2" fit="contain"></el-image>路径判断</li>
            <li class="fontcolor"> <el-image  :src="bt3" fit="contain"></el-image>灾害对比</li> -->
        </ul>
    </div>
    <firstLeft ref="firstleftref"   :classradio="props.classradio" />
    <towright ref="towrightref"/>
     </template>
   <script setup>
import { ref, onMounted, reactive, } from "vue";
import {RouterView,RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import firstLeft  from "./first-left.vue"
import towright  from "./tow-right.vue"
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import bt1 from "@/assets/img/bt1.png"
import bt2 from "@/assets/img/bt2.png"
import bt3 from "@/assets/img/bt2.png"
const props = defineProps({
  
    classradio: {
    type: String,
    // default: '',activeIndex
  },
  aid: {
    type: Number,
    // default: '',activeIndex
  },
  state: {
    type: String,
    // default: '',activeIndex
  },

});
let claername=ref('');
let firstleftref=ref();
let towrightref=ref();
let btnindex=ref(0);
let emit = defineEmits(['indexchange','hiadden','vtkshowfuc' ])
let listArray = ref([
     { id: 0, name: "灾情推演",img:bt1 },
     { id: 1, name: "路径判断" ,img:bt2},
     { id: 2, name: "灾害对比" ,img:bt2},
   ]);
let currentIndex=ref(0);
let btnlistshow=ref(false);
const changeColor=(index)=>{
    btnindex.value=index;
     emit("vtkshowfuc", index);
    currentIndex.value = btnindex.value;
    indexchange(btnindex.value);
  emit("indexchange", btnindex.value);
    if(btnindex.value==0){
        emit("hiadden", 1);
    }else if(btnindex.value==1){
      firstleftref.value.isshow=false;
      emit("hiadden", null);
      towrightref.value.huoaid(props.aid);
   
    }else if(btnindex.value==2){
      firstleftref.value.isshow=false;
        emit("hiadden", null);
    }else{
      firstleftref.value.isshow=false;
        emit("hiadden", null);
    }
   
}
//隐藏所有
const clearconst=(key)=>{

        // emit("hiadden", null);
}
// 求解成功后调用右边
const firsrdata= ()=>{
    firstleftref.value.firstshow=true;
    firstleftref.value.indexinit(props.aid,props.classradio);
}
// 
const firstshowfuc=()=>{
  firstleftref.value.firstshow=false;
  firstleftref.value.isshow=false;
}
const indexchange=(key)=>{
  if(key==0){
    towrightref.value.towshow=false;
    if(props.state=='1'){
      firstleftref.value.firstshow=true;
      console.log( firstleftref.value.firstshow);
    firstleftref.value.indexinit(props.aid);
    }
  }else if(key==1){
    firstleftref.value.firstshow=false;
    towrightref.value.towshow=true;
  }
  else{
    firstleftref.value.firstshow=false;
    towrightref.value.towshow=false;
    
    // threerightref.value.threeshow=false;
  }
}
const hiddfalse=()=>{
    firstleftref.value.firstshow=false;
    towrightref.value.towshow=false;
    btnlistshow.value=false;
    firstleftref.value.isshow=false;

}
const showhadend=()=>{
    btnlistshow.value=true;
}
     defineExpose({showhadend,changeColor,btnindex,btnlistshow,hiddfalse,currentIndex,firsrdata,firstshowfuc,clearconst});
   </script>
   <style  lang="scss" scoped>


   </style>