完善ue

src/views/ueScreen/components/header.vue

@@ -1,38 +1,79 @@
 <template>
   <div class="header">
     <div class="header-left">
-      <div>
+      <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="请选择项目" style="width: 100%">
+        <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>
     <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([
@@ -49,6 +90,7 @@ const options = ref([
     label: '长顺县朝核农业光伏电站'
   }
 ]);
+
 const setTime = () => {
   let date1 = new Date();
   let year: any = date1.getFullYear();
@@ -72,6 +114,12 @@ const setTime = () => {
 };
 // 添加定时器，每秒更新一次时间
 const timer = setInterval(setTime, 1000);
+
+const outScreen = () => {
+  console.log('outScreen');
+  ue5('exitfullscreen');
+};
+
 // 组件卸载时清除定时器
 onUnmounted(() => {
   clearInterval(timer);
@@ -81,6 +129,7 @@ onUnmounted(() => {
 <style scoped lang="scss">
 $vm_base: 1920;
 $vh_base: 1080;
+
 // 计算vw
 @function vw($px) {
   @return calc(($px / $vm_base) * 100vw);
@@ -97,16 +146,20 @@ $vh_base: 1080;
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
 }
+
 .header-left {
   padding-left: vw(40);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  & > div {
-    width: vw(240);
-    margin-right: vw(20);
-  }
+  gap: vw(20);
+  // justify-content: space-between;
+
+  // &>div {
+  //   width: vw(240);
+  //   margin-right: vw(20);
+  // }
 }
+
 .header-center {
   display: flex;
   align-items: center;
@@ -115,22 +168,58 @@ $vh_base: 1080;
   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; /* 图标与文字间距 */
+    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>