1

- 替换背景图片并调整样式
- 添加发电效率和工单统计进度条组件
- 重构发电量数据显示为循环渲染
- 更新字体配置和样式细节
- 删除无用图片资源

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/assets/fonts/fonts.scss

@@ -11,14 +11,20 @@
     font-weight: normal;
     font-style: normal;
 }
-
+@font-face {
+    font-family: 'ue_title'; //UE标题体
+    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
 // 思源字体
-// @font-face {
+@font-face {
-//     font-family: 'SourceHanSansCN-Bold';
+    font-family: 'SourceHanSansCN-Bold';
-//     src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //暂时没用
+    src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //思源加粗
-//     font-weight: normal;
+    font-weight: normal;
-//     font-style: normal;
+    font-style: normal;
-// }
+}
 // @font-face {
 //     font-family: 'SourceHanSansCN-ExtraLight';
 //     src: url('./ReflectTi/SourceHanSansCN-ExtraLight.otf');//暂时没用
@@ -44,16 +50,16 @@
 //     font-style: normal;
 // }
 
-// @font-face {
+@font-face {
-//     font-family: 'SourceHanSansCN-Normal';
+    font-family: 'SourceHanSansCN-Normal';
-//     src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//暂时没用
+    src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//思源正常
-//     font-weight: normal;
+    font-weight: normal;
-//     font-style: normal;
+    font-style: normal;
-// }
+}
 
 @font-face {
     font-family: 'SourceHanSansCN-Regular';
-    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');
+    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');//思源常规
     font-weight: normal;
     font-style: normal;
 }
@@ -154,7 +160,13 @@
     font-weight: normal;
     font-style: normal;
 }
-
+@font-face {
+    font-family: 'LCDFont'; //光伏电量字体
+    src: url('./LCD2 Bold.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
 @font-face {
     font-family: 'D-Din';
     src: url('./D-Din//D-DIN.ttf');

src/assets/styles/element.scss

@@ -62,7 +62,7 @@
 
 .el-date-picker {
   /* --el-datepicker-text-color: var(--el-text-color-regular); */
-  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-off-text-color: #fff !important;
   --el-datepicker-header-text-color: #fff !important;
   --el-datepicker-icon-color: #fff !important;
   /* --el-datepicker-border-color: var(--el-disabled-border-color); */
@@ -71,6 +71,7 @@
   /* --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light); */
   /* --el-datepicker-active-color: var(--el-color-primary); */
   --el-datepicker-hover-text-color: #fff !important;
+  --el-datepicker-placeholder-text-color: #fff !important;
 }
 
 .el-date-picker__header-label {

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/router/index.ts

@@ -67,6 +67,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/largeScreen/index.vue'),
     hidden: true
   },
+  {
+    path: '/ueScreen',
+    component: () => import('@/views/ueScreen/index.vue'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,

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,254 @@
+<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.3);
+  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

@@ -0,0 +1,225 @@
+<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>

src/views/ueScreen/components/leftPage.vue

@@ -0,0 +1,410 @@
+<template>
+    <div class="leftpageContainer">
+        <!-- 头部图表 -->
+        <div class="topInfoContainer">
+            <div class="left">
+                <span class="top">
+                    <span class="num">365</span>
+                    <!-- <span class="unit">day</span> -->
+                </span>
+                <span class="desc">
+                    运行天数
+                </span>
+            </div>
+            <div class="right">
+                <div class="operationStats">
+                    <div class="statItem">
+                        <div class="statLabel">
+                            <span class="title">计划发电/实际发电</span>
+                            <div class="progressText"><span class="actual">{{ operationData.efficiencyActual }}</span>/{{
+                                operationData.efficiencyPlan }} <span class="unit"> kWh</span></div>
+                        </div>
+                        <div class="progressBar">
+                            <div class="progressTrack">
+                                <div class="progressFill status"
+                                    :style="{ width: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
+                                </div>
+                            </div>
+                            <div class="progressCircle"
+                                :style="{ left: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="statItem">
+                        <div class="statLabel">
+                            <span>待处理工单数量</span>
+                            <div class="progressText"><span class="actual">{{ operationData.gdNum }}</span>/{{ operationData.gdNumTotal }}
+                                <span class="unit"> 个</span>
+                            </div>
+
+                        </div>
+                        <div class="progressBar">
+                            <div class="progressTrack">
+                                <div class="progressFill status"
+                                    :style="{ width: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
+                                </div>
+                            </div>
+                            <div class="progressCircle"
+                                :style="{ left: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 中部图表 -->
+        <div class="middleInfo">
+            <SmallTitle :title="'光伏电站总览'" />
+            <div class="middleInfoContainer">
+                <div class="totalView">
+                    <div class="totalNum">
+                        <span class="num">264966.00</span>
+                        <span class="unit">kWh</span>
+                    </div>
+                    <div class="totalDesc">
+                        累计总发电量
+                    </div>
+                </div>
+                <div class="electricity">
+                    <div v-for="item in powerGenerationData" :key="item.type" class="powerGenerationBox">
+                        <div class="left">
+                            <img src="@/assets/ueimg/icon-2.png" alt="">
+                        </div>
+                        <div class="right">
+                            <div class="title">{{ item.title }}</div>
+                            <div class="num">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <!-- 底部信息 -->
+        <div class="bottomInfo">
+            <SmallTitle :title="'主规模设备'" />
+            <div class="infoContainer">
+                <div v-for="item in infoList" :key="item.name" class="infoItem">
+                    <div class="infoIcon">
+                        <img :src="item.icon" alt="">
+                    </div>
+                    <div class="infoName">
+                        {{ item.name }}
+                    </div>
+                    <div class="infoValue">
+                        {{ item.value }}
+                    </div>
+                    <div class="infoUnit">
+                        {{ item.unit }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import SmallTitle from './smalltitle.vue';
+
+// 模拟数据量，用于拖动条渲染
+const operationData = ref({
+    efficiencyPlan: 1500,
+    efficiencyActual: 125,
+    gdNumTotal: 100,
+    gdNum: 50,
+});
+
+const infoList = ref([
+    {
+        name: '变压器220KV',
+        value: 564,
+        unit: '（台）',
+        icon: '/assets/ue1.png',
+    },
+    {
+        name: '开关柜220KV',
+        value: 100,
+        unit: '（台）',
+        icon: '/assets/ue2.png',
+    },
+    {
+        name: '接地变110v',
+        value: 564,
+        unit: '（台）',
+        icon: '/assets/ue3.png',
+    },
+    {
+        name: '电缆110v',
+        value: 768,
+        unit: '（回）',
+        icon: '/assets/ue4.png',
+    },
+    {
+        name: 'GIS',
+        value: 100,
+        unit: '（个）',
+        icon: '/assets/ue5.png',
+    },
+])
+
+// 发电量数据
+const powerGenerationData = ref([
+    {
+        type: 'day',
+        title: '日发电量',
+        value: 2649,
+        unit: 'kWh'
+    },
+    {
+        type: 'month',
+        title: '月发电量',
+        value: 2649,
+        unit: 'kWh'
+    },
+    {
+        type: 'year',
+        title: '年发电量',
+        value: 2649,
+        unit: 'kWh'
+    }
+])
+
+</script>
+<style scoped lang="scss">
+@import '@/views/ueScreen/gis.scss';
+
+.leftpageContainer {
+
+    // 头部图表
+    .topInfoContainer {
+        width: 100%;
+        height: vh(128);
+        display: flex;
+
+        .left {
+            width: vw(180);
+            height: vh(140);
+            background-image: url('@/assets/ueimg/bg1.png');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+
+            .top {
+                position: absolute;
+                top: vh(14);
+
+                .num {
+                    font-size: vh(24);
+                }
+
+                .unit {
+                    font-size: vh(16);
+                    color: rgba(255, 255, 255, 0.7);
+                }
+            }
+
+            .desc {
+                font-size: vh(12);
+            }
+        }
+
+        .right {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: vw(10);
+            font-family: 'SourceHanSansCN-Regular';
+
+            .operationStats {
+                width: 100%;
+
+                .statItem {
+                    margin-bottom: vh(20);
+
+                    .statLabel {
+                        font-size: vh(16);
+                        color: rgba(255, 255, 255, 0.87);
+                        margin-bottom: vh(10);
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .title {
+                            // width: vw(140);
+                        }
+                         .progressText {
+                            padding-right: vw(4);
+                            .actual {
+                            color: rgba(125, 246, 255, 1)
+                            }
+                        }
+                    }
+
+                    .progressBar {
+                        position: relative;
+                        margin-bottom: vh(20);
+
+                        .progressTrack {
+                            height: vh(10);
+                            background: rgba(255, 255, 255, 0.15);
+                            overflow: hidden;
+                            margin-bottom: vh(8);
+                            position: relative;
+
+                            .progressFill {
+                                height: 100%;
+                                transition: width 0.5s ease;
+
+                                &.status {
+                                    background: linear-gradient(259.28deg, rgba(41, 241, 250, 1) 0%, rgba(41, 241, 250, 0) 100%);
+                                }
+                            }
+                        }
+
+                        .progressCircle {
+                            position: absolute;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: vh(24);
+                            height: vh(24);
+                            border-radius: 50%;
+                            background: linear-gradient(135deg, #7df6ff 0%, #29f1fa 100%);
+                            box-shadow: 0 0 vh(10) rgba(41, 241, 250, 0.8);
+                            border: vh(2) solid rgba(255, 255, 255, 0.9);
+                            z-index: 1;
+                            transition: left 0.5s ease;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    //  中部信息
+    .middleInfo {
+
+        .middleInfoContainer {
+            // margin-top: vh(12);
+            width: 100%;
+            height: vh(313);
+            // padding: vw(8);
+            box-sizing: border-box;
+            position: relative;
+            background-image: url('@/assets/ueimg/bg.png');
+            background-size: 100% 100%;
+            margin-bottom: vh(12);
+
+            .totalView {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .totalNum {
+                    margin-top: vh(31);
+
+                    .num {
+                        font-size: vh(36);
+                        font-family: 'LCDFont';
+                    }
+
+                    .unit {
+                        margin-left: vw(11);
+                        font-size: vh(16);
+                    }
+                }
+
+                .totalDesc {
+                    font-size: vh(12);
+                    margin-top: vh(8);
+                }
+            }
+
+            .electricity {
+                width: vw(462);
+                display: flex;
+                justify-content: space-around;
+                position: absolute;
+                bottom: vh(27.51);
+
+                .powerGenerationBox {
+                    display: flex;
+                    align-items: center;
+                    height: vh(60);
+                    font-family: 'SourceHanSansCN-Regular';
+                    color: rgba(255, 255, 255, 1);
+                    .left {
+                        img {
+                            width: vw(48);
+                            height: vh(48);
+                        }
+                    }
+
+                    .right {
+                        .title {
+                            font-size: vh(16);
+                        }
+
+                        .num {
+                            margin-top: vh(10.28);
+                            font-family: 'D-Din';
+                            font-size: vh(24);
+                            text-shadow: 0px 0px 6px rgba(0, 255, 238, 1);
+
+                            .unit {
+                                font-size: vh(16);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // 底部信息
+    .bottomInfo {
+         background-color: rgba(17, 25, 24, 0.3);
+        .infoContainer {
+            .infoItem {
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: vh(74);
+                background-image: url('@/assets/ueimg/item.png');
+                background-size: cover;
+                padding: vw(8);
+                margin-top: vh(12);
+                box-sizing: border-box;
+                font-family: 'SourceHanSansCN-Regular';
+                color: rgba(255, 255, 255, 1);
+                .infoIcon {
+                    img {
+                        width: vw(42);
+                        height: vh(42);
+                    }
+                }
+
+                .infoName {
+                    margin-left: vw(17);
+                    font-size: vw(16);
+                    width: vw(200);
+                    height: vh(28);
+                }
+
+                .infoValue {
+                    margin-left: vw(62);
+                    font-size: vw(16);
+                }
+
+                .infoUnit {
+                    margin-left: vw(34);
+                    font-size: vw(16);
+                    color: rgba(125, 255, 253, 1);
+                }
+            }
+        }
+    }
+}
+</style>

src/views/ueScreen/components/options.ts

@@ -0,0 +1,365 @@
+import * as echarts from 'echarts';
+
+export let option1 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
+    // 图例
+    legend: {
+        top: '1%',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: [
+            { name: 'A区', itemStyle: { color: '#00bfff' } },
+            { name: 'B区', itemStyle: { color: '#00f5a6' } },
+            { name: 'C区', itemStyle: { color: '#ffa500' } }
+        ]
+    },
+    // 网格
+    grid: {
+        left: '3%',
+        right: '5%',
+        bottom: '5%',
+        top: '15%',
+        containLabel: true
+    },
+    // X轴
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
+    },
+    // Y轴
+    yAxis: {
+        type: 'value',
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.2)'
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        min: 0,
+        max: 100,
+        interval: 25
+    },
+    // 系列
+    series: [
+        {
+            name: 'A区',
+            type: 'line',
+            data: [15, 70, 40, 55, 65, 85, 30, 80, 60],
+            lineStyle: {
+                color: '#00bfff',
+                width: 2
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(0, 191, 255, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(0, 191, 255, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+            smooth: true
+        },
+        {
+            name: 'B区',
+            type: 'line',
+            data: [50, 20, 45, 50, 85, 70, 50, 60, 50],
+            lineStyle: {
+                color: '#00f5a6',
+                width: 2
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(0, 245, 166, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(0, 245, 166, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+            smooth: true
+        },
+        {
+            name: 'C区',
+            type: 'line',
+            data: [20, 50, 30, 35, 30, 35, 30, 35, 30],
+            lineStyle: {
+                color: '#ffa500',
+                width: 2
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(255, 165, 0, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(255, 165, 0, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+            smooth: true
+        }
+    ],
+    backgroundColor: 'transparent'
+};
+
+export let option2 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
+    // 图例
+    legend: {
+        top: '3%',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: [
+            { name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
+            { name: '发电趋势', itemStyle: { color: '#ffa500' } }
+        ]
+    },
+    // 网格
+    grid: {
+        left: '3%',
+        right: '3%',
+        bottom: '5%',
+        top: '30%',
+        containLabel: true
+    },
+    // X轴
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: ['周一', '周二', '周三', '周四', '周五']
+    },
+    // Y轴
+    yAxis: {
+        type: 'value',
+        name: '单位: Kwh',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14,
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.3)'
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 14
+        },
+        interval: 1000
+    },
+    // 系列
+    series: [
+        {
+            name: '发电量',
+            type: 'bar',
+            data: [2800, 1800, 1200, 1700, 1500],
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(125, 255, 253, 1)'
+                    }, {
+                        offset: 1, color: 'rgba(225, 255, 255, 0)'
+                    }]
+                },
+                borderRadius: [4, 4, 0, 0]
+            },
+            barWidth: '30px'
+        },
+        {
+            name: '发电趋势',
+            type: 'line',
+            data: [1800, 4000, 2500, 4000, 2000],
+            lineStyle: {
+                color: 'rgba(255, 209, 92, 1)',
+                width: 2
+            },
+            symbol: 'circle',
+            symbolSize: 10,
+            itemStyle: {
+                color: 'rgba(255, 209, 92, 1)',
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            smooth: false
+        }
+    ],
+    // 背景透明
+    backgroundColor: 'transparent'
+};
+
+export let option3 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
+    legend: {
+        data: ['光照度', '功率'],
+        top: '1%',
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '5%',
+        bottom: '5%',
+        top: '15%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
+    },
+    yAxis: {
+        type: 'value',
+        axisLine: {
+            lineStyle: {
+                color: '#fff',
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        interval: 6,
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: 'rgba(255, 255, 255, 0.3)',
+                width: 1,
+                type: [4, 3]
+            }
+        }
+    },
+    series: [
+        {
+            name: '光照度',
+            type: 'line',
+            data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
+            itemStyle: {
+                color: 'rgba(82, 155, 255, 1)'
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(72, 149, 239, 0.8)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(72, 149, 239, 0.2)'
+                    }
+                ])
+            },
+            smooth: true
+        },
+        {
+            name: '功率',
+            type: 'line',
+            data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
+            itemStyle: {
+                color: 'rgba(125, 255, 253, 1)'
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(152, 230, 205, 0.8)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(152, 230, 205, 0.2)'
+                    }
+                ])
+            },
+            smooth: true
+        }
+    ],
+    backgroundColor: 'transparent'
+};

src/views/ueScreen/components/project.vue

@@ -0,0 +1,215 @@
+<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.3);
+  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/rightPage.vue

@@ -0,0 +1,203 @@
+<template>
+    <div class="right_box">
+        <div class="statistic">
+            <Smalltitle title="异常情况统计">
+                <div class="error_tip_box">
+                    <div class="error_tip">两条异常消息!</div>
+                    <img src="@/assets/ueimg/tip.png">
+                </div>
+            </Smalltitle>
+            <div class="error_list" ref="errorListRef">
+                <div v-for="item in errorList" :key="item" class="error_item">
+                    <div class="item_info">
+                        <el-icon>
+                            <Warning />
+                        </el-icon>
+                        <div class="ml-1">A区</div>
+                        <div class="flex-grow text-right">2025-08-08 10:24:36</div>
+                    </div>
+                    <div class="item_headline">多晶硅智能组件异常，请及时处理！</div>
+                </div>
+            </div>
+        </div>
+        <!--  -->
+        <div class="data_box">
+            <Smalltitle title="发电实时功率" />
+            <div class="echarts">
+                <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
+            </div>
+        </div>
+        <!--  -->
+        <div class="data_box">
+            <Smalltitle title="发电总量趋势" />
+            <div class="echarts">
+                <EchartBoxTwo :option="option_fdzlqs" ref="barChart" />
+            </div>
+        </div>
+        <!--  -->
+        <div class="data_box">
+            <Smalltitle title="电站负荷曲线" />
+            <div class="echarts3">
+                <EchartBoxTwo :option="option_dzfhqx" ref="barChart" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
+import { option1, option2, option3 } from './options';
+import Smalltitle from './smalltitle.vue';
+
+const option_fdssgl = ref(null);
+const option_fdzlqs = ref(null);
+const option_dzfhqx = ref(null);
+const errorListRef = ref<HTMLElement | null>(null);
+const errorList = ref([1, 2, 3, 4, 5, 6, 7]);
+
+const handleWheel = (event: WheelEvent) => {
+    const errorList = (event.target as HTMLElement).closest('.error_list');
+
+    if (errorList) {
+        event.preventDefault(); // 阻止页面或父元素的垂直滚动
+        errorList.scrollLeft += event.deltaY; // 横向滚动
+    }
+};
+
+const reszieFont = () => {
+    const fontSize = Math.sqrt(window.innerWidth) / 3;
+
+    option1.xAxis.axisLabel.fontSize = fontSize;
+    option1.yAxis.axisLabel.fontSize = fontSize;
+    option1.legend.textStyle.fontSize = fontSize;
+
+    option2.xAxis.axisLabel.fontSize = fontSize;
+    option2.yAxis.axisLabel.fontSize = fontSize;
+    option2.legend.textStyle.fontSize = fontSize;
+    option2.yAxis.nameTextStyle.fontSize = fontSize;
+
+    option3.xAxis.axisLabel.fontSize = fontSize;
+    option3.yAxis.axisLabel.fontSize = fontSize;
+    option3.legend.textStyle.fontSize = fontSize;
+
+    option_fdssgl.value = option1;
+    option_fdzlqs.value = option2;
+    option_dzfhqx.value = option3;
+}
+
+onMounted(() => {
+    reszieFont();
+    window.addEventListener('resize', reszieFont);
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', reszieFont);
+    window.removeEventListener('wheel', handleWheel);
+});
+</script>
+
+<style scoped lang="scss">
+$background-color: rgba(17, 25, 24, 0.3);
+$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);
+}
+
+.right_box {
+    display: flex;
+    flex-direction: column;
+    gap: vh(15);
+    width: 100%;
+    height: 100%;
+    padding-bottom: vh(20);
+}
+
+.statistic {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: vh(10);
+    background: $background-color;
+}
+
+.data_box {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: calc(26vh - vh(25));
+    background-color: $background-color;
+
+    .echarts {
+        width: 100%;
+        // 40是title的高度
+        height: calc(26vh - vh(20 + 40));
+    }
+}
+
+.error_tip_box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: vw(5);
+    margin-right: vw(8);
+
+    img {
+        width: vw(20);
+        height: vh(20);
+    }
+
+    .error_tip {
+        height: vh(26);
+        width: vw(81);
+        border-radius: vw(13);
+        background: rgba(0, 255, 238, 0.12);
+        color: rgba(0, 255, 238, 1);
+        font-size: vw(10);
+        text-align: center;
+        line-height: vh(26);
+    }
+}
+
+.error_list {
+    flex: 1;
+    display: flex;
+    gap: vw(10);
+    margin: vh(10) vw(15);
+    overflow: hidden;
+    flex-wrap: nowrap;
+    cursor: grabbing;
+
+    .error_item {
+        flex: 0 0 auto;
+        width: vw(300);
+        padding: vh(10) vw(10);
+        color: #fff;
+        background: rgba(255, 255, 255, 0.09);
+        border: 1px solid rgba(0, 255, 238, 0.5);
+        border-radius: vw(8);
+
+        .item_info {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: vw(14);
+            font-weight: bold;
+            margin-bottom: vh(10);
+        }
+
+        .item_headline {
+            font-size: vw(16);
+        }
+    }
+}
+</style>

src/views/ueScreen/components/smalltitle.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="leftpageContainer">
+        <div class="bottomInfo">
+            <div class="title">
+                <span>{{ title }}</span>
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+    title: {
+        type: Number||String,
+        default: ''
+    },
+})
+</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);
+}
+
+.title {
+    background-image: url('@/assets/ueimg/Rectangle 766.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    border: vw(1) solid rgba(255, 255, 255, 0.1);
+    width: 100%;
+    height: vh(40);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span {
+        margin-left: vw(41.42);
+        font-size: vh(20);
+        font-weight: 400;
+        letter-spacing: vw(1);
+        color: rgba(255, 255, 255, 1);
+        vertical-align: middle;
+        font-family: 'ue_title';
+        text-shadow: 0px 2px 4px  rgba(51, 255, 252, 0.57);
+    }
+}
+</style>

src/views/ueScreen/gis.scss

@@ -0,0 +1,11 @@
+$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);
+}

src/views/ueScreen/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="ueScreen">
+    <Header :isFull="isFull" @changePage="handleChangePage" />
+    <div class="content_box">
+      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '1vw' }" />
+      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '1vw' }" />
+    </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 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;
+};
+
+onMounted(() => {
+  initPage();
+  window['silentLogin'] = silentLogin;
+});
+</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);
+}
+
+.ueScreen {
+  width: 100vw;
+  height: 100vh;
+  // background-image: url('@/assets/ueimg/bj.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: #fff;
+  overflow: hidden;
+}
+
+.content_box {
+  position: relative;
+  width: 100vw;
+  height: calc(100vh - 8vh);
+}
+
+.left {
+  position: absolute;
+  top: 0;
+  left: vw(20);
+  width: 25vw;
+  height: 100%;
+  transition: all 0.5s ease;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: vw(20);
+  width: 25vw;
+  height: 100%;
+  transition: all 0.5s ease;
+}
+</style>