maintenance_system/src/views/ueScreen/components/header.vue

<template>
  <div class="header">
    <div class="header-left">
      <DateSelector :year="currentYear" :month="currentMonth" :start-year="2010" :end-year="2030" />
      <ProjectSelector v-model="selectedProjectId" :options="options" />
      <!-- <div>
        <el-date-picker v-model="value1" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD" class="datePicker" />
      </div>
      <div>
        <el-select v-model="value" placeholder="请选择项目">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div> -->
    </div>
    <div class="header-center">新能源场站智慧运维大数据平台</div>
    <div class="header-right">
      <div>
        <div class="left-section">
          <img src="@/assets/large/weather.png" alt="天气图标" />
          <span>
            <span>多云 9°/18°</span>
          </span>
        </div>
      </div>
      <div>{{ date.ymd }} {{ date.hms }}</div>
      <!-- 分割线 -->
      <div class="divider">
        <div class="top-block"></div>
        <div class="bottom-block"></div>
      </div>
      <!--  -->
      <div class="change" @click="emit('changePage')">
        <el-icon v-if="!isFull">
          <Expand />
        </el-icon>
        <el-icon v-else>
          <Fold />
        </el-icon>
      </div>
      <!-- 分割线 -->
      <div class="divider">
        <div class="top-block"></div>
        <div class="bottom-block"></div>
      </div>
      <!-- 右侧：管理系统图标 + 文字 -->
      <div class="outscreen" @click="outScreen">
        <img src="@/assets/large/outscreen.png" width="20" height="20" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
declare var ue5: any;

import '@/assets/styles/element.scss';
import DateSelector from './date.vue';
import ProjectSelector from './project.vue';


defineProps({
  isFull: {
    type: Boolean,
    default: false
  },
});
const emit = defineEmits(['changePage']);

const date: any = ref({
  ymd: '',
  hms: '',
  week: ''
});
const currentYear = ref(2025);
const currentMonth = ref(11);
const selectedProjectId = ref(1);
const value1 = ref('');
const value = ref('');
const options = ref([
  {
    value: 1,
    label: '田东县乡村振兴光伏发电项目'
  },
  {
    value: 2,
    label: '田东县乡村振兴光伏发电项目（二期）'
  },
  {
    value: 3,
    label: '长顺县朝核农业光伏电站'
  }
]);

const setTime = () => {
  let date1 = new Date();
  let year: any = date1.getFullYear();
  let month: any = date1.getMonth() + 1;
  let day: any = date1.getDate();
  let hours: any = date1.getHours();
  if (hours < 10) {
    hours = '0' + hours;
  }
  let minutes: any = date1.getMinutes();
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  let seconds: any = date1.getSeconds();
  if (seconds < 10) {
    seconds = '0' + seconds;
  }
  date.value.ymd = year + '-' + month + '-' + day;
  date.value.hms = hours + ':' + minutes + ':' + seconds;
  date.value.week = date1.getDay();
};
// 添加定时器，每秒更新一次时间
const timer = setInterval(setTime, 1000);

const outScreen = () => {
  console.log('outScreen');
  ue5('exitfullscreen');
};

// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="scss">
$vm_base: 1920;
$vh_base: 1080;

// 计算vw
@function vw($px) {
  @return calc(($px / $vm_base) * 100vw);
}

// 计算vh
@function vh($px) {
  @return calc(($px / $vh_base) * 100vh);
}

.header {
  width: 100%;
  height: 8vh;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.header-left {
  padding-left: vw(40);
  display: flex;
  align-items: center;
  gap: vw(20);
  // justify-content: space-between;

  // &>div {
  //   width: vw(240);
  //   margin-right: vw(20);
  // }
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Rang_men_zheng_title;
  font-size: vw(32);
  letter-spacing: vw(8);
}

.header-right {
  padding-right: vw(20);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: vw(15);

  .left-section {
    display: flex;
    align-items: center;
    padding-right: vw(20);
    //   margin-right: auto; /* 让右侧元素（管理系统）居右 */
  }

  .left-section img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    /* 图标与文字间距 */
  }
}

/* 分割线 */
.divider {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: vh(2);
  padding: vh(14) vw(10);

  .top-block,
  .bottom-block {
    width: vw(2);
    height: vh(7);
    background: #19b5fb;
  }
}

.change {
  font-size: vw(22);
  line-height: vw(22);
  margin-top: vw(2);
}

.outscreen {
  width: vw(20);
  height: vw(20);
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>