disaster/src/view/appmian.vue

<template>
    <div class="appmian">

        <el-container>
            <el-header>
                <div class="ve_menu_logo">
                    <div class="ve_title">
                        <div class="ve_logo_img">
                            <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
                        </div>
                        <h3 class="ve_logo_title">
                            {{ title }}
                        </h3>
                    </div>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :popper-offset="2"
                        style="width:780px" background-color="#0D1639 " active-background-color="#0E50C8"
                        text-color="#68ADFF" active-text-color="#fff" @select="handleSelect">
                        <el-menu-item index="1">灾害源设置</el-menu-item>
                        <el-menu-item index="2">边界设置</el-menu-item>

                        <el-menu-item index="3">灾害推演</el-menu-item>
                        <el-menu-item index="4">推演结果</el-menu-item>
                        <el-menu-item index="5">结果对比</el-menu-item>
                    </el-menu>
                    <div class="ve_right">
                        <div class="ve_timeioc"  v-if=" aid==null"  @click="qingsel">
                            <span>请选择</span>
                        </div>
                        <div  v-else>
                        <div class="ve_time" v-show="titlefalse" @click="titleclick()" >
                            <span class="l_huoqing">{{ headerobj.name }}</span>
                            <span class="l_time">{{ headerobj.time }}</span>
                        </div>
                    </div>
                       <!-- <router-link to="/configurator"> -->
                        <div class="ve_timeioc" @click="tiaozhuan()">
                            <el-image :src="Vector" fit="contain"></el-image>
                            <span>模型库</span>
                        </div>
                    <!-- </router-link> -->
                    </div>
                </div>
            </el-header>

            <el-main>
                <Dialoges ref="lliudialog" :addselect="addselect" :headerobj="headerobj" @headerclick="headerclick" @handleSelect="handleSelect"
                    @childfun="childfun" @moxingclick="moxingclick"></Dialoges>
                <source-disaster ref="sourcedis" :classradio="classradio" :aid="aid" />
                <info-boundary ref="boundary" :classradio="classradio" :aid="aid" />
                <info-animation ref="tanimation" :classradio="classradio" :aid="aid" />
                <InfoVtkmodel ref="vtkmodel" />
                <result ref="resultbidui"></result>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { RouterView, RouterLink, useRouter } from "vue-router"
// import NavigateBar from "@/components/layout/NavigateBar.vue";
import Dialoges from "./InfoDialoges.vue"
import logo from "@/assets/logo.png";
// import myIndex  from "./index"
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 result from "./result.vue"
import Vector from "@/assets/img/Vector.png";
import { timestampToTime } from '@/js/lindex.js'
import mitts from "@/utils/Bus"
// import { vtkmodel } from "@/control/vtkModel.js";

let lliudialog = ref();
let sourcedis = ref();
const title = "灾情推演软件";
const activeIndex = ref('1')
const activeIndex2 = ref('1')
let classradio = ref()
let boundary = ref();
let tanimation = ref();
let titlefalse = ref(false);
let resultbidui=ref();
let headerobj = ref({
    time: '',
    name: "",
})
let router = useRouter();
let sgdata = ref({});
let aid = ref();
onMounted(() => {
});
// 跳转页面,{ aid:aid.value}
const tiaozhuan = () => {
   activeIndex.value="1";
   const key =activeIndex.value;
    sourcedis.value.changeModel();
            sourcedis.value.accident3(key);
            boundary.value.accident4(key);
            lliudialog.value.accident2(key);
            tanimation.value.monitor = false;
router.push({ path:"/configurator"})
     
    // console.log(router.push("/configurator"))
 
    // console.log(router.push("/configurator"))
}

const addselect = () => {
    classradio.value = lliudialog.value.classradio;

}
const moxingclick = (val) => {
    titlefalse.value = val;
}
const qingsel=()=>{
    lliudialog.value.dialogVisible = true;
}
//点击头部弹出弹框

const titleclick = () => {
    lliudialog.value.dialogVisible = true;
}
//获取aid
const aidlist = () => {
    sgdata.value = lliudialog.value.sgdata;
    aid.value = sgdata.value.aid
}
// 获取子组件的方法
const childfun = () => {
    sourcedis.value.handledisaster(aid.value);
    boundary.value.addboundary(aid.value);
    sourcedis.value.accident3();
}
const headerclick = (data) => {
    console.log(data);
    headerobj.value.name = data.name;
    headerobj.value.time = data.time;
    aid.value = data.aid
}
const handleSelect = (key) => {
    activeIndex.value='';
    switch (key) {
        case '1':
            sourcedis.value.changeModel();
            sourcedis.value.accident3(key);
            boundary.value.accident4(key);
            lliudialog.value.accident2(key);
            tanimation.value.monitor = false;
            resultbidui.value.accident6(key)
            activeIndex.value='1';
            break;
        case '2':
             boundary.value.changeModel();
            boundary.value.accident4(key);
            sourcedis.value.accident3(key);
            lliudialog.value.accident2(key);
            tanimation.value.monitor = false;
            resultbidui.value.accident6(key)
            activeIndex.value='2'
            break;
        case '3':
            lliudialog.value.changeModel();
            boundary.value.accident4(key);
            sourcedis.value.accident3(key);
            lliudialog.value.accident2(key);
            tanimation.value.monitor = false;
            activeIndex.value='3';
            resultbidui.value.accident6(key)
            break;
        case '4':
            boundary.value.accident4(key);
            tanimation.value.accident5(aid.value);
             sourcedis.value.accident3(key);
            lliudialog.value.accident2(key);
            resultbidui.value.accident6(key)
            activeIndex.value='4'
            break;
            case '5':
            sourcedis.value.changeModel();
            sourcedis.value.accident3(key);
            boundary.value.accident4(key);
            lliudialog.value.accident2(key);
            resultbidui.value.accident6(key)
            tanimation.value.monitor = false;
            activeIndex.value='5';
        default:
            break;  
    }
}

</script>

<style lang="scss" scoped>
.appmian {

    .el-main {
        --el-main-padding: 0 !important;
    }

    .el-header {
        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;
        height: 100%;
        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 {
            height: 55px;
            padding-top: 15px;
            height: 70px;
            border-radius: 0px 0px 0px 0px;
            border-left: 2px solid rgba(12, 97, 197, 0.20);
            border-right: 2px solid rgba(12, 97, 197, 0.20);
            ;
            box-sizing: border-box;
            padding: 15px 22px;   
            // 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;
            }

            .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>
body {
    width: 100%;
    height: 100vh;
    background: #161A2A;
}

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

.l_Dialog {
    position: absolute;
    z-index: 206;
    top: 0;

}
</style>