完善ue

index.html

@@ -212,5 +212,28 @@
     <script src="/webrtc/jquery-1.12.2.min.js"></script>
     <script src="/sdk/YJEarth.min.js"></script>
     <script type="module" src="/src/main.ts"></script>
+    <script>
+      // 调用ue必要的设置，需要一起复制
+      'object' != typeof ue || 'object' != typeof ue.interface
+        ? ('object' != typeof ue && (ue = {}),
+          (ue.interface = {}),
+          (ue.interface.broadcast = function (e, t) {
+            if ('string' == typeof e) {
+              var o = [e, ''];
+              void 0 !== t && (o[1] = t);
+              var n = encodeURIComponent(JSON.stringify(o));
+              'object' == typeof history && 'function' == typeof history.pushState
+                ? (history.pushState({}, '', '#' + n), history.pushState({}, '', '#' + encodeURIComponent('[]')))
+                : ((document.location.hash = n), (document.location.hash = encodeURIComponent('[]')));
+            }
+          }))
+        : (function (e) {
+            (ue.interface = {}),
+              (ue.interface.broadcast = function (t, o) {
+                'string' == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ''));
+              });
+          })(ue.interface),
+        (ue5 = ue.interface.broadcast);
+    </script>
   </body>
 </html>

src/permission.ts

@@ -22,6 +22,11 @@ const isWhiteList = (path: string) => {
 router.beforeEach(async (to, from) => {
   NProgress.start();
 
+  // 特殊页面放行
+  if (['/ueScreen'].includes(to.path)) {
+    return true;
+  }
+
   // 已登录
   if (getToken()) {
     if (to.meta.title) useSettingsStore().setTitle(to.meta.title);

src/utils/request.ts

@@ -14,6 +14,10 @@ import router from '@/router';
 
 const encryptHeader = 'encrypt-key';
 let downloadLoadingInstance: LoadingInstance;
+
+let silentLoginPromise: Promise<boolean> | null = null;
+let retryQueue: Array<() => void> = []; // 等待重试的请求队列
+
 // 是否显示重新登录
 export const isRelogin = { show: false };
 export const globalHeaders = () => {
@@ -105,7 +109,7 @@ service.interceptors.request.use(
 
 // 响应拦截器
 service.interceptors.response.use(
-  (res: AxiosResponse) => {
+  async (res: AxiosResponse) => {
     if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
       // 加密后的 AES 秘钥
       const keyStr = res.headers[encryptHeader];
@@ -131,6 +135,65 @@ service.interceptors.response.use(
       return res.data;
     }
     if (code === 401) {
+      // 处理ueScreen未登录
+      const isInExternalPage = window.self !== window.top || window.location.pathname.includes('/ueScreen');
+
+      if (isInExternalPage) {
+        console.log('[外链页] 检测到 401');
+
+        // 统一处理并发401
+        if (silentLoginPromise) {
+          // 登录正在进行时，等待完成
+          console.log('[外链页] 等待静默登录完成');
+          return new Promise((resolve) => {
+            retryQueue.push(() => {
+              const newToken = getToken();
+              if (newToken) {
+                res.config.headers.Authorization = 'Bearer ' + newToken;
+              }
+              resolve(axios.request(res.config));
+            });
+          });
+        }
+
+        // 启动新的静默登录
+        if (typeof window['silentLogin'] === 'function') {
+          silentLoginPromise = window
+            .silentLogin(true)
+            .catch(() => false)
+            .finally(() => {
+              silentLoginPromise = null;
+            });
+
+          const ok = await silentLoginPromise;
+          const newToken = getToken();
+
+          if (ok && newToken) {
+            axios.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
+
+            // ✅ 每个请求返回自己的 Promise
+            return new Promise((resolve) => {
+              retryQueue.push((config) => {
+                axios.request(config).then((newRes) => {
+                  console.log('🚀 ~ config:', newRes.data);
+                  resolve(newRes.data); // 保持统一结构
+                });
+              });
+
+              // 如果登录刚好完成，就立即执行回调
+              retryQueue.forEach((cb) => cb(res.config));
+              retryQueue = [];
+            });
+          } else {
+            retryQueue = [];
+            console.warn('[外链页] 静默登录失败');
+            return Promise.reject('静默登录失败');
+          }
+        }
+
+        return Promise.reject('外链页未配置静默登录');
+      }
+
       // prettier-ignore
       if (!isRelogin.show) {
         isRelogin.show = true;
@@ -184,31 +247,31 @@ export function download(url: string, params: any, fileName: string) {
   downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
   // prettier-ignore
   return service.post(url, params, {
-      transformRequest: [
+    transformRequest: [
-        (params: any) => {
+      (params: any) => {
-          return tansParams(params);
+        return tansParams(params);
-        }
-      ],
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      responseType: 'blob'
-    }).then(async (resp: any) => {
-      const isLogin = blobValidate(resp);
-      if (isLogin) {
-        const blob = new Blob([resp]);
-        FileSaver.saveAs(blob, fileName);
-      } else {
-        const blob = new Blob([resp]);
-        const resText = await blob.text();
-        const rspObj = JSON.parse(resText);
-        const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
-        ElMessage.error(errMsg);
       }
-      downloadLoadingInstance.close();
+    ],
-    }).catch((r: any) => {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      console.error(r);
+    responseType: 'blob'
-      ElMessage.error('下载文件出现错误，请联系管理员！');
+  }).then(async (resp: any) => {
-      downloadLoadingInstance.close();
+    const isLogin = blobValidate(resp);
-    });
+    if (isLogin) {
+      const blob = new Blob([resp]);
+      FileSaver.saveAs(blob, fileName);
+    } else {
+      const blob = new Blob([resp]);
+      const resText = await blob.text();
+      const rspObj = JSON.parse(resText);
+      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
+      ElMessage.error(errMsg);
+    }
+    downloadLoadingInstance.close();
+  }).catch((r: any) => {
+    console.error(r);
+    ElMessage.error('下载文件出现错误，请联系管理员！');
+    downloadLoadingInstance.close();
+  });
 }
 // 导出 axios 实例
 export default service;

src/views/ueScreen/components/date.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="year-month-picker">
+    <!-- 年份选择器 -->
+    <div class="picker-group">
+      <div class="picker-input" @click="isYearOpen = !isYearOpen" :class="{ 'open': isYearOpen }">
+        <span class="value">{{ selectedYear }}年</span>
+        <span class="arrow"></span>
+      </div>
+      <ul class="options" v-show="isYearOpen">
+        <li v-for="year in years" :key="year" :class="{ 'selected': year === selectedYear }"
+          @click="handleYearSelect(year)">
+          {{ year }}年
+        </li>
+      </ul>
+    </div>
+
+    <!-- 月份选择器 -->
+    <div class="picker-group">
+      <div class="picker-input" @click="isMonthOpen = !isMonthOpen" :class="{ 'open': isMonthOpen }">
+        <span class="value">{{ selectedMonth }}月</span>
+        <span class="arrow"></span>
+      </div>
+      <ul class="options" v-show="isMonthOpen">
+        <li v-for="month in 12" :key="month" :class="{ 'selected': month === selectedMonth }"
+          @click="handleMonthSelect(month)">
+          {{ month }}月
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  year: {
+    type: Number,
+    required: true,
+  },
+  month: {
+    type: Number,
+    required: true,
+  },
+  startYear: {
+    type: Number,
+    default: 2000,
+  },
+  endYear: {
+    type: Number,
+    default: new Date().getFullYear(),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:year', 'update:month', 'change']);
+
+// 计算年份列表
+const years = computed(() => {
+  const yearList = [];
+  for (let y = props.startYear; y <= props.endYear; y++) {
+    yearList.push(y);
+  }
+  return yearList;
+});
+
+// 内部状态
+const selectedYear = ref(props.year);
+const selectedMonth = ref(props.month);
+const isYearOpen = ref(false);
+const isMonthOpen = ref(false);
+
+// 监听props变化，同步到内部状态
+watch(
+  () => [props.year, props.month],
+  ([newYear, newMonth]) => {
+    selectedYear.value = newYear;
+    selectedMonth.value = newMonth;
+  },
+  { immediate: true }
+);
+
+// 当内部值变化时，通知父组件
+const notifyParent = () => {
+  emit('update:year', selectedYear.value);
+  emit('update:month', selectedMonth.value);
+  emit('change', { year: selectedYear.value, month: selectedMonth.value });
+};
+
+// 处理年份选择
+const handleYearSelect = (year) => {
+  selectedYear.value = year;
+  isYearOpen.value = false;
+  notifyParent();
+};
+
+// 处理月份选择
+const handleMonthSelect = (month) => {
+  selectedMonth.value = month;
+  isMonthOpen.value = false;
+  notifyParent();
+};
+
+// 点击外部关闭下拉框
+const handleClickOutside = (event) => {
+  if (!event.target.closest('.year-month-picker')) {
+    isYearOpen.value = false;
+    isMonthOpen.value = false;
+  }
+};
+
+// 挂载时添加事件监听
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  // 验证初始值
+  if (!years.value.includes(selectedYear.value)) {
+    selectedYear.value = Math.max(props.startYear, Math.min(selectedYear.value, props.endYear));
+  }
+  selectedMonth.value = Math.max(1, Math.min(selectedMonth.value, 12));
+  notifyParent(); // 确保初始值正确通知
+});
+
+// 卸载时移除事件监听，防止内存泄漏
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</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);
+}
+
+.year-month-picker {
+  display: inline-flex;
+  border-radius: vw(8);
+  font-size: vw(14);
+  background-color: transparent;
+  box-shadow: 0 vh(2) vh(8) rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: vw(1) solid #c0c4cc;
+}
+
+.year-month-picker:hover {
+  border-color: #909399;
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.1);
+}
+
+.picker-group {
+  position: relative;
+}
+
+.picker-input {
+  width: fit-content;
+  display: flex;
+  gap: vw(8);
+  justify-content: space-between;
+  align-items: center;
+  padding: vh(8) vw(16);
+  cursor: pointer;
+  user-select: none;
+  border-right: vw(1) solid #e9e9e9;
+}
+
+/* 移除最后一个输入框的右边框 */
+.picker-group:last-child .picker-input {
+  border-right: none;
+}
+
+.picker-input .value {
+  color: #fff;
+}
+
+.picker-input.open .arrow {
+  transform: rotate(180deg);
+}
+
+.arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: vw(6) vw(5) 0 vw(5);
+  border-color: #909399 transparent transparent transparent;
+  transition: transform 0.2s ease-in-out;
+}
+
+/* 美化后的下拉选项窗口 */
+.options {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  right: 0;
+  max-height: vh(200); /* 限制最大高度并可滚动 */
+  overflow-y: auto;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: vw(4);
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
+  list-style: none;
+  z-index: 10;
+  padding: vh(4) 0;
+  margin: 0;
+  border: vw(1) solid #ebeef5;
+}
+
+.options li {
+  padding: vh(10) vw(16);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  color: #fff;
+}
+
+.options li:hover {
+  background-color: #f5f7fa;
+  color: #1890ff;
+}
+
+.options li.selected {
+  // background-color: #e6f7ff;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* 美化滚动条 (WebKit浏览器) */
+.options::-webkit-scrollbar {
+  width: vw(6);
+}
+
+.options::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb {
+  background: #c9c9c9;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>

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;
+  gap: vw(20);
-  & > div {
+  // justify-content: space-between;
-    width: vw(240);
+
-    margin-right: vw(20);
+  // &>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>

src/views/ueScreen/components/options.ts

@@ -196,7 +196,7 @@ export let option2 = {
         name: '单位: Kwh',
         nameTextStyle: {
             color: '#fff',
-            fontSize: 14
+            fontSize: 14,
         },
         axisLine: {
             lineStyle: {

src/views/ueScreen/components/project.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="project-picker">
+    <div class="picker-group">
+      <div class="picker-input" @click="isOpen = !isOpen" :class="{ 'open': isOpen }">
+        <span class="value" :title="selectedLabel">{{ selectedLabel }}</span>
+        <span class="arrow"></span>
+      </div>
+      <ul class="options" v-show="isOpen">
+        <li v-for="option in options" :key="option.value" :class="{ 'selected': option.value === modelValue }"
+          @click="handleSelect(option.value)">
+          {{ option.label }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  // 双向绑定的项目ID
+  modelValue: {
+    type: [Number, String],
+    required: true,
+  },
+  // 项目列表选项
+  options: {
+    type: Array,
+    required: true,
+    validator: (value) => {
+      // 简单验证options格式
+      return value.every(option => option.hasOwnProperty('value') && option.hasOwnProperty('label'));
+    }
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 内部状态
+const isOpen = ref(false);
+
+// 计算当前选中的标签
+const selectedLabel = computed(() => {
+  const selectedOption = props.options.find(option => option.value === props.modelValue);
+  return selectedOption ? selectedOption.label : '';
+});
+
+// 处理选项选择
+const handleSelect = (value) => {
+  if (value !== props.modelValue) {
+    emit('update:modelValue', value);
+    emit('change', value);
+  }
+  isOpen.value = false;
+};
+
+// 点击外部关闭下拉框
+const handleClickOutside = (event) => {
+  if (!event.target.closest('.project-picker')) {
+    isOpen.value = false;
+  }
+};
+
+// 挂载时添加事件监听
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+// 卸载时移除事件监听
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</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);
+}
+
+.project-picker {
+  display: inline-flex;
+  border-radius: vw(8);
+  font-size: vw(14);
+  background-color: transparent;
+  box-shadow: 0 vh(2) vh(8) rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: vw(1) solid #c0c4cc;
+}
+
+.project-picker:hover {
+  border-color: #909399;
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.1);
+}
+
+.picker-group {
+  position: relative;
+}
+
+.picker-input {
+  // 关键修改：设置一个最大宽度，防止文本过长导致容器被撑破
+  // 你可以根据需要调整这个值，vw(300) 表示在1920px宽的屏幕下，最大宽度是300px
+  max-width: 12vw; 
+  width: 100%; /* 让输入框尽可能利用可用空间，但不超过max-width */
+  display: flex;
+  gap: vw(8);
+  justify-content: space-between;
+  align-items: center;
+  padding: vh(8) vw(16);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
+}
+
+.picker-input .value {
+  color: #fff;
+  // 关键修改：添加文本省略样式
+  white-space: nowrap;      /* 强制文本在一行显示 */
+  overflow: hidden;         /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;  /* 显示省略号 */
+  flex-grow: 1;             /* 让 .value 元素占据可用空间，将箭头推到最右边 */
+}
+
+.picker-input.open .arrow {
+  transform: rotate(180deg);
+}
+
+.arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: vw(6) vw(5) 0 vw(5);
+  border-color: #909399 transparent transparent transparent;
+  transition: transform 0.2s ease-in-out;
+}
+
+/* 美化后的下拉选项窗口 */
+.options {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  right: 0;
+  max-height: vh(200); /* 限制最大高度并可滚动 */
+  overflow-y: auto;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: vw(4);
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
+  list-style: none;
+  z-index: 10;
+  padding: vh(4) 0;
+  margin: 0;
+  border: vw(1) solid #ebeef5;
+}
+
+.options li {
+  padding: vh(10) vw(16);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  color: #fff;
+}
+
+.options li:hover {
+  background-color: #f5f7fa;
+  color: #1890ff;
+}
+
+.options li.selected {
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* 美化滚动条 (WebKit浏览器) */
+.options::-webkit-scrollbar {
+  width: vw(6);
+}
+
+.options::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb {
+  background: #c9c9c9;
+  border-radius: vw(10);
+}
+
+.options::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>

src/views/ueScreen/components/smalltitle.vue

@@ -18,7 +18,18 @@ const props = defineProps({
 })
 </script>
 <style scoped lang="scss">
-@import '@/views/ueScreen/gis.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);
+}
 
 .title {
     background-image: url('@/assets/ueimg/Rectangle 766.png');

src/views/ueScreen/index.vue

@@ -1,18 +1,79 @@
 <template>
   <div class="ueScreen">
-    <Header />
+    <Header :isFull="isFull" @changePage="handleChangePage" />
     <div class="content_box">
-      <LeftPage class="left" />
+      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '0' }" />
-      <!-- <div>ue</div> -->
+      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '0' }" />
-      <RightPage class="right" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+declare var ue5: any;
+
 import Header from './components/header.vue';
 import LeftPage from './components/leftPage.vue';
 import RightPage from './components/rightPage.vue';
+import { getToken } from '@/utils/auth';
+import { useUserStoreHook } from '@/store/modules/user';
+import usePermissionStore from '@/store/modules/permission';
+import to from 'await-to-js';
+
+const userStore = useUserStoreHook();
+const initDone = ref(false); // ✅ 控制页面是否渲染
+const isHideOther = ref(false);
+const isFull = ref(false);
+
+/**
+ * 切换中心页面全屏
+ */
+const handleChangePage = () => {
+  if (isFull.value) {
+    isFull.value = false;
+    isHideOther.value = false;
+  } else {
+    isFull.value = true;
+    isHideOther.value = true;
+    ue5('openUEUI');
+  }
+};
+
+const silentLogin = async (isExpired = false) => {
+  const token = getToken();
+  if (token && !isExpired) return true;
+
+  try {
+    // 调用静默登录接口
+    await to(
+      userStore.login({
+        username: 'admin',
+        password: 'admin123',
+        tenantId: '000000',
+        clientId: undefined,
+        grantType: undefined
+      })
+    );
+  } catch (e) {
+    ElMessage.error('无法获取数据，请联系管理员');
+    return false;
+  }
+  await to(userStore.getInfo());
+  await usePermissionStore().generateRoutes();
+  return true;
+};
+
+// ✅ 页面初始化逻辑
+const initPage = async () => {
+  const logged = await silentLogin();
+  if (!logged) return;
+
+  initDone.value = true; // ✅ 准备完成
+};
+
+onMounted(() => {
+  initPage();
+  window['silentLogin'] = silentLogin;
+});
 </script>
 
 <style scoped lang="scss">
@@ -32,12 +93,12 @@ $vh_base: 1080;
 .ueScreen {
   width: 100vw;
   height: 100vh;
-  // background-color: rgba(4, 7, 17, 0.8);
   background-image: url('@/assets/ueimg/bj.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   color: #fff;
+  overflow: hidden;
 }
 
 .content_box {
@@ -52,6 +113,7 @@ $vh_base: 1080;
   left: vw(20);
   width: 25vw;
   height: 100%;
+  transition: all 0.5s ease;
 }
 
 .right {
@@ -60,5 +122,6 @@ $vh_base: 1080;
   right: vw(20);
   width: 25vw;
   height: 100%;
+  transition: all 0.5s ease;
 }
 </style>