disaster_web3/src/components/header.vue

<template>
       <div class="bgk1">
        <div class="d-flex jc-center title_wrap">
            <div class="timers">
            <div class="logimg">
              <!-- <div class="ve_logo_img">
              <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
            </div> -->
            <span>{{headername }}</span></div>
            <div class="headertime">
              <p class="datayear">{{  headertime.dateYear }}</p>
              <p class="dateday" >{{  headertime.dateDay }}</p>
            </div>
          </div>
          <div class="titlebtn titleanniu imgtupian" :class="{headeractive: headeractive === '1'}"   @click="handleSelect('1')">突水推演</div>
            <div class="titlebtn titleanniu imgtupian"  :class="{headeractive: headeractive === '2'}" @click="handleSelect('2')">火灾推演</div>
          <div class="d-flex jc-center s-content">
            <div class="title tiletimg">
            <!-- <div class="ve_logo_img">
              <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
            </div> -->
            <!-- <span class="title-text">煤矿多种态势推演可视化和智慧应急与救援模型定制开发系统</span> -->
              <!-- <span class="title-text">煤矿典型灾害态势推演</span> -->
              <span class="title-text">煤矿灾害态势推演</span>
            </div>
          </div>
          
          <div class="titlebtn titleanniu imgtupian2" style="margin-left: 0px;" :class="{headeractive2: headeractive === '3'}"  @click="handleSelect('3')" >瓦斯爆炸推演</div>
          <div class="titlebtn titleanniu imgtupian2" style="margin-left: 0px;" :class="{headeractive2: headeractive === '5'}"  @click="handleSelect('5')" >一维瓦斯爆炸</div>
            <div class="titlebtn titleanniu imgtupian2" :class="{headeractive2: headeractive === '4'}"   @click="handleSelect('4')"  >模型库</div>
        </div>
      </div>
     </template>
   <script setup>
import { ref, onMounted, reactive, } from "vue";
import {RouterView,RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import logo from "@/assets/logo.png";
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import { timestampToTime,formatTime } from "@/js/lindex.js";
import emitter from "@/utils/emitter";
let emit = defineEmits(['handleSelect'])

let headername=ref();
const props = defineProps({
    name:{
        type:String
    },
 

});
let headeractive=ref(0);
 let headerobj = ref({
  time: "",
  name: "",
});
 let headertime=ref({
       timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
})
let headerid=ref();
onMounted(() => {
  timeFn();
});
// 当前时间
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 handleSelect = (key) => {
    headerid.value=key;
    headeractive.value= headerid.value;
    emit('handleSelect', key);
    headername.value="";
};
const hname=(val)=>{
  headername.value=val// 获取项目名称
}
defineExpose({headeractive,hname});
   </script>
   <style  lang="scss" scoped>
@import '../../src/style/style.css';
.headeractive{
  background-image: url('/src/assets/img/Rectangle4562.png') !important;
}
.headeractive2{
//  background-image: url('/src/assets/img/Rectangle45622.png') !important;
background-image: url('/src/assets/img/Rectangle4562.png') !important;
  background-size: 100%;
}
   </style>