disaster_web3/src/view/appmian.vue

<template>
  <div class="appmian"  >
    <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->

    <el-container>
      <el-header>
      <reheader @handleSelect="handleSelect" :name="headerobj.name"/>
    </el-header>
      <el-main>
   <div  class="maincontent">
      <div class="mainpdding">
        <source-disaster ref="sourcedis" :classradio="classradio"  />
        <info-boundary ref="boundary" :classradio="classradio" />
        <info-animation ref="tanimation" :classradio="classradio" :aid="aid" />
        
      
        <Dialoges
          ref="lliudialog"
          :addselect="addselect"
          :valzaiqing="valzaiqing"
          :headerobj="headerobj"
          :activeIndex="activeIndex"
          @funcfirst="funcfirst"
          @imgonclock="imgonclock"
          @leftsimulation="leftsimulation"
          @headerclick="headerclick"
          @handleSelect="handleSelect"
          @childfun="childfun"
          @moxingclick="moxingclick"
          @resulysucss="resulysucss"
          @websockfrist="websockfrist"
          :classradio="classradio" 
        ></Dialoges>
        <!-- 模型库 -->
        <configurator ref="configuratorref"/>
        <!-- <MenuMine ref="menumine"/>
        <MenuSensor ref="menusen"/> -->

        <!-- right -->
        <!-- <firstLeft/> -->
      <!-- </div> -->
   
    </div>
    </div>
    <div class="vtkmodel1" id="infomodel" v-show="modelshow"><InfoVtkmodel ref="vtkmodel" /></div>
     
      </el-main>
      <div class=" bgk3" v-show="bgk2false">
      <div class="bgk2 bgk3">
          <div>
            <ul>
              <li class="s1"  :class="activeIndeximg=='2'?'activeimg':''"  @click="handleSelect('2')" >
                <el-image :src="s1" fit="contain"></el-image>
                <span class="stext">火灾推演</span>
              </li>
              <li class="s2"  :class="activeIndeximg=='1'?'activeimg':''" @click="handleSelect('1')">
                <el-image :src="s2" fit="contain"></el-image>
                <span class="stext">突水推演</span>
              </li>
              <li class="s3" :class="activeIndeximg=='3'?'activeimg':''" @click="handleSelect('3')">
                <el-image :src="s3" fit="contain"></el-image>
                <span class="stext">瓦斯爆炸推演</span>
              </li>
              <li  class="s4"  :class="activeIndeximg=='4'?'activeimg':''" @click="handleSelect('4')">   <el-image :src="s4" fit="contain"></el-image>
                <span class="stext">模型库</span>

              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="bkxolo" v-show="bkmodel">
      <result ref="resultbidui" @titleclick="titleclick"  :classradio="classradio" ></result></div>
       <!-- 底部按钮三个页面 -->
  <div class="footer">
    <Index ref="indexref" @indexchange="indexchange" @vtkshowfuc="vtkshowfuc" @hiadden="hiadden" :state='state' :classradio="classradio" :aid="aid"/>
  </div>
    </el-container>
  <!-- </v-scale-screen> -->
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { RouterView, RouterLink, useRouter } from "vue-router";
import VScaleScreen from 'v-scale-screen'
import '@/utils/flexible'
// import NavigateBar from "@/components/layout/NavigateBar.vue";
import Dialoges from "./InfoDialoges.vue";
import logo from "@/assets/logo.png";
import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
// import myIndex  from "./index"
import Index  from "./index/index.vue"
import configurator from "./configurator.vue";
import SourceDisaster from "./components/InfoDisaster.vue";
import InfoBoundary from "./components/InfoBoundary.vue";
import InfoAnimation from "./components/InfoAnimation.vue";
import InfoVtkmodel from "./components/InfoVtkmodel.vue";
// import configurator  from "./components/configurator.vue"
import reheader  from "@/components/header.vue"
import result from "./result.vue";
import Vector from "@/assets/img/Vector.png";
import s1 from "@/assets/img/s1.png";
import s2 from "@/assets/img/s2.png";
import s3 from "@/assets/img/s3.png";
import s4 from "@/assets/img/s4.png";
import b from "@/assets/img/Group1317.png";
import { timestampToTime,formatTime } from "@/js/lindex.js";
import mitts from "@/utils/Bus";
import { contains } from "@kitware/vtk.js/Common/DataModel/BoundingBox";

// import { vtkmodel } from "@/control/vtkModel.js";
let activeIndeximg=ref( null);
let lliudialog = ref();
let sourcedis = ref();
let classradio = ref();
let boundary = ref();
let tanimation = ref();
let state=ref();
let menumine=ref();
let menusen=ref();
let indexref=ref();
let configuratorref=ref();
let bkmodel=ref(false);
let modelshow=ref(true);
const title = "灾情推演软件";
const activeIndex = ref("1");
const activeIndex2 = ref("1");
let titlefalse = ref(false);
let resultbidui = ref();
let mnindex = ref("");
let resultleft = ref({});
let datares=ref({});
let firstleftref=ref();
let towrightref=ref();
let threerightref=ref();
let resultright = ref({});
let headertime=ref({
       timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
})
 let bgk2false=ref(true);     
let headerobj = ref({
  time: "",
  name: "",
});
let valzaiqing = ref("");
let router = useRouter();
let sgdata = ref({});
let aid = ref();
onMounted(() => {
  timeFn();
  // childfun();

});
// 跳转页面,{ aid:aid.value}
const  handleSelectzt=(val)=>{
  router.push({ path: "/" ,query:{classradio:val}});

}
//求解成功后的调用
const resulysucss=(val)=>{
  state.value=val;
  // 求解成功
  if(  state.value=='1'){
    indexref.value.changeColor(0);
  }
}
// 开始计算调用的func
const funcfirst=()=>{
  indexref.value.firstshowfuc();
}
//求解成功
// const indexinit=()=>{
// console.log(234789)
//   indexref.value.changeColor(0)
// }
// 当前时间
const timeFn=()=> {
  headertime.value.timing = setInterval(() => {
    headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss");
    headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd");
    headertime.value.dateWeek =  headertime.value.weekday[new Date().getDay()];
      }, 1000);
    }
const addselect = () => {
  classradio.value = lliudialog.value.classradio;
};
// 获取模拟数据对比
const leftsimulation = (res,data) => {
  console.log(mnindex.value)
  if (mnindex.value == "1") {
    resultleft.value.coids = res.coids;
    resultleft.value.totaltime = res.totaltime;
    resultleft.value.reportstep = res.reportstep;
    resultleft.value.pickertime = res.acctime;
    resultleft.value.aid = res.aid;
    resultbidui.value.mntext1=data.name;
    resultbidui.value.wdiclick(resultleft.value.aid,'1');
  } else {
    console.log(22222)
    console.log(resultbidui.value.mntext2)
    resultright.value.coids = res.coids;
    resultright.value.totaltime = res.totaltime;
    resultright.value.reportstep = res.reportstep;
    resultright.value.pickertime = res.acctime;
    resultright.value.aid = res.aid;
    resultbidui.value.mntext2=data.name;
    resultbidui.value.wdiclick( resultright.value.aid,'2');
  }

    //TODO 
    if(resultleft.value.aid==''||resultright.value.aid==''||resultleft.value.aid==undefined||resultright.value.aid==undefined){

    }else{
  
      if (resultleft.value.coids != resultright.value.coids) {
    ElMessage.error('污染物不一样，无法进行比较')
    return;
  }

  if (resultleft.value.totaltime != resultright.value.totaltime) {
    ElMessage.error('模拟时长不一样，无法进行比较')
    return;
  }

  if (resultleft.value.reportstep != resultright.value.reportstep) {
    ElMessage.error('输出步长不一样，无法进行比较')
    return;
  }

  if (resultleft.value.pickertime != resultright.value.pickertime ) {
    ElMessage.error('事故时间不一样，无法进行比较')
    return;
  }
    
//TODO 获取物理量

resultbidui.value.timeline=res.acctime;
resultbidui.value.oldtime=res.acctime;
// resultbidui.value.zdtime=res.acctime;
resultbidui.value.endtime= Number(res.totaltime)/Number(res.reportstep);
resultbidui.value.initAid(resultleft.value.aid,resultright.value.aid,res.codes);
resultbidui.value.clickflat=true;
    }


};
//判断两个对象是否相等
const objequality = () => {};
const moxingclick = (val) => {
  titlefalse.value = val;
};
// const qingsel=()=>{
//     lliudialog.value.dialogVisible = true;
// }
//点击头部弹出弹框
const bgkchange= ()=>{

}
const titleclick = (val, index) => {
  mnindex.value = index;
  valzaiqing.value = val;
  if (val == "模拟数据") {
    lliudialog.value.dialogVisible = true;
  } else {
   // lliudialog.value.dialogVisible = true;
    clearInterval();
  }
};
//获取aid
const aidlist = () => {
  sgdata.value = lliudialog.value.sgdata;
  aid.value = sgdata.value.aid;
};
// index组件的方法
const indexchange=(key)=>{
  bkmodel.value=true;
resultbidui.value.accident6(key,aid.value);
}

// 获取子组件的方法
const childfun = () => {
  bgk2false.value=false;
  console.log( bgk2false.value);
  indexref.value.showhadend();
  
  indexchange(indexref.value.btnindex);
  if(classradio.value=='Gass'){
    sourcedis.value.Gassgetdata(aid.value);
  }else{
    sourcedis.value.handledisaster(aid.value);
  }
  boundary.value.addboundary(aid.value);
  sourcedis.value.accident3(activeIndex.value);
  boundary.value.accident4(activeIndex.value);
};
const headerclick = (data) => {
  headerobj.value.name = data.name;
  headerobj.value.time = data.time;
  aid.value = data.aid;
 // state.value=lliudialog.value.state;
};
//首页组件调用的方法
const handindodialoges=()=>{

}
const websockfrist=()=>{
  indexref.value.firsrdata();
}
// 隐藏图形
const vtkshowfuc= (key)=>{
 if(key==2){
  modelshow.value=false;
 }else{
  modelshow.value=true;
 }
}
//清空灾情推演隐藏
 const hiadden= (key)=>{
    boundary.value.accident4(key);
      sourcedis.value.accident3(key);
    lliudialog.value.accident2(key);
 }
const imgonclock=()=>{

  activeIndeximg.value=null;
}
const handleSelect = (key) => {
  // window.location.reload();
 titleclick();

  activeIndeximg.value=key;
  bgk2false.value=true;
  indexref.value.btnlistshow=false;
  if( bgk2false.value==true){
    activeIndex.value='11'
    bkmodel.value=false;
  sourcedis.value.accident3(activeIndex.value);
  boundary.value.accident4(activeIndex.value);
  lliudialog.value.accident2( activeIndex.value);
  indexref.value.hiddfalse();
  configuratorref.value.menumfalse();
  }
 resultbidui.value.accident6('5');
  activeIndex.value =key;
  //indexref.value.changeColor(null)
  switch (key) {
    case "1":
    classradio.value="Water";
    lliudialog.value.classclick( classradio.value);
  
      break;
    case "2":
    classradio.value="Fire";
    lliudialog.value.classclick(classradio.value);
      break;
    case "3":
    classradio.value="Gass";
    console.log( classradio.value);
    lliudialog.value.classclick( classradio.value);
      break;
    case "4":
    classradio.value="Model";
    bgk2false.value=false;
    configuratorref.value.showmenum();
    boundary.value.accident4(key);
    sourcedis.value.accident3(key);
    lliudialog.value.accident2(key);
      break;
    case "5":

    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.appmian {
  .el-main {
    --el-main-padding: 0px !important;
  }

  .el-container {
    padding: 0;
    margin: 0;
    width: 100%;
    position: absolute;
    z-index: 206;
    top: 0;
  }
}

.ve_menu_logo {
  width: 100%;
  height: 70px;
  background: #0d1639;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  display: flex;
  background: #0d1639;
  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid;
  box-sizing: border-box;
  border-image: linear-gradient(28deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;

  .ve_title {
  }

  .ve_logo_img {
    padding-left: 30px;
    padding-right: 30px;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 15px;
  }

  .ve_logo_title {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    color: #68adff;
    font-size: 20px;
  }

  .el-menu-demo {
    width: 60% !important;
    height: 70px;
    border: none !important;
    background: rgba(12, 97, 197, 0);

    .el-menu-item {
      position: relative;
      width: 97px;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 13px;
      color: #68adff;
      line-height: 15px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      width: 110px;
      height: 70px;
      border-radius: 0px 0px 0px 0px;
      border: none;
    }

    .is-active {
      width: 110px;
      height: 70px;
      background: radial-gradient(ellipse at 54px 0px, #3aa0ff -37%, #123066 53%);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid;
      border-left: 1px solid rgba(16, 92, 240, 1);
      border-right: 1px solid rgba(18, 48, 102, 1);
      border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1
        1;

      &:after {
        width: 24px;
        height: 1px;
        background-color: #fff;
        -webkit-transition: all ease-out 0.2s;
        transition: all ease-out 0.2s;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 15px;
        webkit-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
      }
    }
  }

  .ve_right {
    // width: 350px;
    height: 70px;
    overflow: hidden;
    position: absolute;
    right: 0;
    display: flex;

    .ve_time {
      width: 190px;
      height: 55px;
      padding-top: 15px;
      height: 70px;
      overflow: hidden;
      border-radius: 0px 0px 0px 0px;
      border-left: 2px solid rgba(12, 97, 197, 0.2);
      border-right: 2px solid rgba(12, 97, 197, 0.2);
      box-sizing: border-box;
      padding: 15px 5px;
      // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
      span {
        display: block;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .l_huoqing {
        font-size: 13px;
        line-height: 15px;
        font-weight: bold;
        line-height: 2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .l_time {
        font-size: 12px;
        line-height: 14px;
        font-weight: 400;
      }
    }

    .ve_timeioc {
      width: 150px;
      height: 70px;
      // border-radius: 0px 0px 0px 0px;
      // border: 1px solid;
      // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 13px;
      color: #68adff;
      line-height: 15px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        padding-left: 15px;
      }
    }
  }
}
</style>

<style>
 @import '../../src/style/style.css';
.vtkmodel1{
  position: absolute;
    z-index: 100; 
    width: 100%;
    height: 100vh;

}
body {
  width: 100%;
  height: 100vh;
  background: #161a2a;
}

button:focus,
button:focus-visible {
  outline: none;
}

.l_Dialog {
  position: relative;
}
.main-conyeny{
    position: absolute;
    z-index: 206;
  top: 70px;
}
.L_aside {
  margin-top: 10px;
    overflow: hidden;
}
</style>