Merge branch 'lx' of http://192.168.110.2:3000/taoge_xiaodi/maintenance_system into szq

src/api/projectScreen/index.ts

@@ -0,0 +1,224 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+
+// 查询生项目天气
+export const getScreenWeather = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/weather/' + projectId,
+    method: 'get'
+  });
+};
+
+// 查询项目安全天数
+export const getScreenSafetyDay = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/safetyDay/' + projectId,
+    method: 'get'
+  });
+};
+
+// 查询项目公告
+export const getScreenNews = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/news/' + projectId,
+    method: 'get'
+  });
+};
+
+// 查询项目土地统计
+export const getScreenLand = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/' + projectId,
+    method: 'get'
+  });
+};
+
+// 查询项目形象进度
+export const getScreenImgProcess = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/imageProgress/' + projectId,
+    method: 'get'
+  });
+};
+
+// 查询项目人员情况
+export const getScreenPeople = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/people/' + projectId,
+    method: 'get'
+  });
+};
+
+// 查询项目人员ue情况
+export const getScreenUePeople = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/ue/people/' + projectId,
+    method: 'get'
+  });
+};
+
+// 查询项目AI安全巡检
+export const getScreenSafetyInspection = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/safetyInspection/' + projectId,
+    method: 'get'
+    // params: {
+    //   projectId
+    // }
+  });
+};
+
+// 查询项目概况
+export const getScreenGeneralize = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/generalize/' + projectId,
+    method: 'get'
+  });
+};
+
+// 获取gps数据
+export const getGps = (projectId) => {
+  return request({
+    url: '/project/big/screen/getClientList/' + projectId,
+    method: 'get'
+  });
+};
+// 选中列表
+export const getSelectList = (params) => {
+  return request({
+    url: '/project/big/screen/getList',
+    method: 'get',
+    params
+  });
+};
+// 设置选中
+export const setSelect = (data) => {
+  return request({
+    url: '/project/big/screen/setList',
+    method: 'post',
+    data
+  });
+};
+
+// 获取模型列表
+export const getModelList = (params) => {
+  return request({
+    url: '/yjearth4.0/api/v1/source/list',
+    method: 'get',
+    params
+  });
+};
+// 设置选中
+export const getGpsList = (data) => {
+  return request({
+    url: '/gps/equipmentSon/largerScreen/getList',
+    method: 'get',
+    params: data
+  });
+};
+// 设置选中
+export const redLineRange = (data) => {
+  return request({
+    url: '/facility/redLine/list',
+    method: 'get',
+    params: data
+  });
+};
+//获取质量列表
+
+export const getQualityList = (params) => {
+  return request({
+    url: '/project/big/screen/getQualityList/gis',
+    method: 'get',
+    params
+  });
+};
+//获取安全管理
+export const getSecurityList = (params) => {
+  return request({
+    url: '/project/big/screen/getSafetyList/gis',
+    method: 'get',
+    params
+  });
+};
+
+//获取企业级当地天气
+export const getEnterpriseWeather = (params: any) => {
+  return request({
+    url: '/enterprise/big/screen/weather',
+    method: 'get',
+    params
+  });
+};
+
+// 订阅无人机
+export const subscribeDrone = (projectId: any) => {
+  return request({
+    url: '/project/big/screen/wrjSubscribe/' + projectId,
+    method: 'get'
+  });
+};
+
+// 获取红线
+export const getRedLine = (params: any) => {
+  return request({
+    url: '/project/big/screen/redLine/list',
+    method: 'get',
+    params
+  });
+};
+
+// 定时调取接口
+export const setWrjHc = (params: any) => {
+  return request({
+    url: '/project/big/screen/setWrjHc',
+    method: 'get',
+    params
+  });
+};
+
+// 获取定位设备的详情
+export const getLocationDevice = (params: any) => {
+  return request({
+    url: '/project/big/screen/getInfoData',
+    method: 'get',
+    params
+  });
+};
+
+// 项目添加位置信息
+export const addProjectPosition = (data) => {
+  return request({
+    url: '/project/big/screen/updatePosition',
+    method: 'post',
+    data
+  });
+};
+
+// 根据项目id获取项目信息
+export const getProjectInfo = (projectId) => {
+  return request({
+    url: '/project/big/screen/getProjectInfo/' + projectId,
+    method: 'get'
+  });
+};
+
+// 根据进度详情
+export const getProgressInfo = (projectId, progressName) => {
+  return request({
+    url: '/project/big/screen/imageProgress/detail',
+    method: 'get',
+    params: {
+      projectId,
+      progressName
+    }
+  });
+};
+
+// 根据项目id获取开工时间
+export const projectInfoTime = (projectId) => {
+  return request({
+    url: '/UE/screen/projectInfo/' + projectId,
+    method: 'get'
+  });
+};

src/api/projectScreen/types.ts

@@ -0,0 +1,5 @@
+export interface TableQuery extends PageQuery {
+  tableName: string;
+  tableComment: string;
+  dataName: string;
+}

src/assets/projectLarge/11.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="17" viewBox="0 0 4 17" fill="none"><rect x="0.7998046875" y="6.4130859375" width="2.3999037742614746" height="9.739181518554688"   fill="#06F7A1" ></rect><rect x="0.5" y="0.5" width="2.999880075454712" height="16.000083923339844" stroke="rgba(6, 247, 161, 1.00)" stroke-width="1"   ></rect></svg>

src/assets/projectLarge/22.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="17" viewBox="0 0 4 17" fill="none"><rect x="0.7998046875" y="10.5869140625" width="2.3999035358428955" height="5.56524658203125"   fill="#FFFFFF" ></rect><rect x="0.5" y="0.5" width="2.9998788833618164" height="16.000083923339844" stroke="rgba(255, 255, 255, 1.00)" stroke-width="1"   ></rect></svg>

src/assets/projectLarge/border.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="1" viewBox="0 0 440 1" fill="none">
+<path   fill="url(#linear_border_216_180_0)"  d="M440 0L439 0L439 1L440 1L440 0ZM437 0L435 0L435 1L437 1L437 0ZM433 0L431 0L431 1L433 1L433 0ZM429 0L427 0L427 1L429 1L429 0ZM425 0L423 0L423 1L425 1L425 0ZM421 0L419 0L419 1L421 1L421 0ZM417 0L415 0L415 1L417 1L417 0ZM413 0L411 0L411 1L413 1L413 0ZM409 0L407 0L407 1L409 1L409 0ZM405 0L403 0L403 1L405 1L405 0ZM401 0L399 0L399 1L401 1L401 0ZM397 0L395 0L395 1L397 1L397 0ZM393 0L391 0L391 1L393 1L393 0ZM389 0L387 0L387 1L389 1L389 0ZM385 0L383 0L383 1L385 1L385 0ZM381 0L379 0L379 1L381 1L381 0ZM377 0L375 0L375 1L377 1L377 0ZM373 0L371 0L371 1L373 1L373 0ZM369 0L367 0L367 1L369 1L369 0ZM365 0L363 0L363 1L365 1L365 0ZM361 0L359 0L359 1L361 1L361 0ZM357 0L355 0L355 1L357 1L357 0ZM353 0L351 0L351 1L353 1L353 0ZM349 0L347 0L347 1L349 1L349 0ZM345 0L343 0L343 1L345 1L345 0ZM341 0L339 0L339 1L341 1L341 0ZM337 0L335 0L335 1L337 1L337 0ZM333 0L331 0L331 1L333 1L333 0ZM329 0L327 0L327 1L329 1L329 0ZM325 0L323 0L323 1L325 1L325 0ZM321 0L319 0L319 1L321 1L321 0ZM317 0L315 0L315 1L317 1L317 0ZM313 0L311 0L311 1L313 1L313 0ZM309 0L307 0L307 1L309 1L309 0ZM305 0L303 0L303 1L305 1L305 0ZM301 0L299 0L299 1L301 1L301 0ZM297 0L295 0L295 1L297 1L297 0ZM293 0L291 0L291 1L293 1L293 0ZM289 0L287 0L287 1L289 1L289 0ZM285 0L283 0L283 1L285 1L285 0ZM281 0L279 0L279 1L281 1L281 0ZM277 0L275 0L275 1L277 1L277 0ZM273 0L271 0L271 1L273 1L273 0ZM269 0L267 0L267 1L269 1L269 0ZM265 0L263 0L263 1L265 1L265 0ZM261 0L259 0L259 1L261 1L261 0ZM257 0L255 0L255 1L257 1L257 0ZM253 0L251 0L251 1L253 1L253 0ZM249 0L247 0L247 1L249 1L249 0ZM245 0L243 0L243 1L245 1L245 0ZM241 0L239 0L239 1L241 1L241 0ZM237 0L235 0L235 1L237 1L237 0ZM233 0L231 0L231 1L233 1L233 0ZM229 0L227 0L227 1L229 1L229 0ZM225 0L223 0L223 1L225 1L225 0ZM221 0L219 0L219 1L221 1L221 0ZM217 0L215 0L215 1L217 1L217 0ZM213 0L211 0L211 1L213 1L213 0ZM209 0L207 0L207 1L209 1L209 0ZM205 0L203 0L203 1L205 1L205 0ZM201 0L199 0L199 1L201 1L201 0ZM197 0L195 0L195 1L197 1L197 0ZM193 0L191 0L191 1L193 1L193 0ZM189 0L187 0L187 1L189 1L189 0ZM185 0L183 0L183 1L185 1L185 0ZM181 0L179 0L179 1L181 1L181 0ZM177 0L175 0L175 1L177 1L177 0ZM173 0L171 0L171 1L173 1L173 0ZM169 0L167 0L167 1L169 1L169 0ZM165 0L163 0L163 1L165 1L165 0ZM161 0L159 0L159 1L161 1L161 0ZM157 0L155 0L155 1L157 1L157 0ZM153 0L151 0L151 1L153 1L153 0ZM149 0L147 0L147 1L149 1L149 0ZM145 0L143 0L143 1L145 1L145 0ZM141 0L139 0L139 1L141 1L141 0ZM137 0L135 0L135 1L137 1L137 0ZM133 0L131 0L131 1L133 1L133 0ZM129 0L127 0L127 1L129 1L129 0ZM125 0L123 0L123 1L125 1L125 0ZM121 0L119 0L119 1L121 1L121 0ZM117 0L115 0L115 1L117 1L117 0ZM113 0L111 0L111 1L113 1L113 0ZM109 0L107 0L107 1L109 1L109 0ZM105 0L103 0L103 1L105 1L105 0ZM101 0L99 0L99 1L101 1L101 0ZM97 0L95 0L95 1L97 1L97 0ZM93 0L91 0L91 1L93 1L93 0ZM89 0L87 0L87 1L89 1L89 0ZM85 0L83 0L83 1L85 1L85 0ZM81 0L79 0L79 1L81 1L81 0ZM77 0L75 0L75 1L77 1L77 0ZM73 0L71 0L71 1L73 1L73 0ZM69 0L67 0L67 1L69 1L69 0ZM65 0L63 0L63 1L65 1L65 0ZM61 0L59 0L59 1L61 1L61 0ZM57 0L55 0L55 1L57 1L57 0ZM53 0L51 0L51 1L53 1L53 0ZM49 0L47 0L47 1L49 1L49 0ZM45 0L43 0L43 1L45 1L45 0ZM41 0L39 0L39 1L41 1L41 0ZM37 0L35 0L35 1L37 1L37 0ZM33 0L31 0L31 1L33 1L33 0ZM29 0L27 0L27 1L29 1L29 0ZM25 0L23 0L23 1L25 1L25 0ZM21 0L19 0L19 1L21 1L21 0ZM17 0L15 0L15 1L17 1L17 0ZM13 0L11 0L11 1L13 1L13 0ZM9 0L7 0L7 1L9 1L9 0ZM5 0L3 0L3 1L5 1L5 0ZM1 0L0 0L0 1L1 1L1 0Z">
+</path>
+<defs>
+<linearGradient id="linear_border_216_180_0" x1="440" y1="0.5" x2="0" y2="0.5" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#1DD6FF" stop-opacity="0" />
+<stop offset="1" stop-color="#1DD6FF"  />
+</linearGradient>
+</defs>
+</svg>

src/assets/projectLarge/people.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42.20001220703125" height="44.0025634765625" viewBox="0 0 42.20001220703125 44.0025634765625" fill="none">
+<g opacity="0.8">
+<ellipse transform="matrix(0.9915240406990051, -0.12992359697818756, 0.13317112624645233, 0.9910931587219238, 0, 4.8818359375)" cx="18.787446539492898" cy="18.56099636814998" rx="18.787446539492898" ry="18.56099636814998"   fill="url(#linear_fill_216_484)" >
+</ellipse>
+</g>
+<g  clip-path="url(#clip-path-216_485)">
+<g filter="url(#filter_216_487)">
+<path d="M18.4577 26.933C16.6094 26.933 14.8691 26.2223 13.5609 24.9334C12.2528 23.6445 11.5316 21.9297 11.5316 20.1085C11.5316 18.2873 12.2528 16.5755 13.5609 15.2866C14.8691 13.9976 16.6094 13.287 18.4577 13.287C20.306 13.287 22.0463 13.9976 23.3545 15.2866C24.6626 16.5755 25.3839 18.2902 25.3839 20.1114C25.3839 21.9326 24.6626 23.6473 23.3545 24.9363C22.0463 26.2252 20.306 26.933 18.4577 26.933ZM18.4577 15.5886C15.9261 15.5886 13.8675 17.617 13.8675 20.1114C13.8675 22.6058 15.9261 24.6342 18.4577 24.6342C20.9893 24.6342 23.0479 22.6058 23.0479 20.1114C23.0479 17.617 20.9893 15.5886 18.4577 15.5886ZM29.2353 42.6332C28.59 42.6332 28.0673 42.1182 28.0673 41.4823L28.0673 35.5326C28.0673 33.1129 26.1606 31.122 23.7487 30.9436L21.0185 32.8597C19.4972 33.9271 17.4532 33.93 15.929 32.8684L13.1667 30.9436C10.7549 31.122 8.84812 33.1129 8.84812 35.5326L8.84812 41.4823C8.84812 42.1182 8.32544 42.6332 7.68013 42.6332C7.03482 42.6332 6.51215 42.1182 6.51215 41.4823L6.51215 35.5326C6.51215 33.6883 7.24214 31.9535 8.56488 30.6502C9.88762 29.3468 11.6484 28.6276 13.5201 28.6276C13.7624 28.6276 13.996 28.7024 14.1946 28.8376L17.278 30.9868C17.9934 31.4845 18.9512 31.4816 19.6637 30.9839L22.7179 28.8405C22.9165 28.7024 23.153 28.6276 23.3954 28.6276C25.2671 28.6276 27.0278 29.3468 28.3505 30.6502C29.6733 31.9535 30.4033 33.6883 30.4033 35.5326L30.4033 41.4823C30.4033 42.1182 29.8806 42.6332 29.2353 42.6332Z"   fill="#FFFFFF" >
+</path>
+</g>
+<path d="M11.7564 42.6332C11.1111 42.6332 10.5884 42.1182 10.5884 41.4824L10.5884 38.7204C10.5884 38.0845 11.1111 37.5695 11.7564 37.5695C12.4017 37.5695 12.9244 38.0845 12.9244 38.7204L12.9244 41.4824C12.9244 42.1182 12.4017 42.6332 11.7564 42.6332ZM25.159 42.6332C24.5137 42.6332 23.991 42.1182 23.991 41.4824L23.991 38.7204C23.991 38.0845 24.5137 37.5695 25.159 37.5695C25.8043 37.5695 26.327 38.0845 26.327 38.7204L26.327 41.4824C26.327 42.1182 25.8043 42.6332 25.159 42.6332ZM23.7283 20.2093L8.39845 20.2093C7.75314 20.2093 7.23047 19.6943 7.23047 19.0584C7.23047 18.4226 7.75314 17.9076 8.39845 17.9076L23.7283 17.9076C24.3736 17.9076 24.8962 18.4226 24.8962 19.0584C24.8962 19.6943 24.3736 20.2093 23.7283 20.2093Z"   fill="#FFFFFF" >
+</path>
+</g>
+<defs>
+<radialGradient id="linear_fill_216_484" cx="0" cy="0" r="1" gradientTransform="translate(31.006426019848288 5.783235248388171) rotate(-151.06468116612422) scale(28.374047672813088, 28.374047672813088)" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#1DD6FF" stop-opacity="0.78" />
+<stop offset="0.9861" stop-color="#1DD6FF" stop-opacity="0" />
+</radialGradient>
+<clipPath id="clip-path-216_485">
+<path d="M2.54681 44.0025L34.2695 44.0025L34.2695 12.2961L2.54681 12.2961L2.54681 44.0025Z" fill="white"/>
+</clipPath>
+<filter id="filter_216_487" x="4.51214599609375" y="11.2869873046875" width="27.89111328125" height="33.34619140625" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="feFloodId_216_487"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha_216_487"/>
+<feOffset dx="0" dy="0"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha_216_487" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.7450980392156863 0 0 0 0 0.9686274509803922 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="feFloodId_216_487" result="dropShadow_1_216_487"/>
+<feBlend mode="normal" in="SourceGraphic" in2="dropShadow_1_216_487" result="shape_216_487"/>
+</filter>
+</defs>
+</svg>

src/assets/projectLarge/round.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.4189453125" height="12" viewBox="0 0 12.4189453125 12" fill="none">
+<ellipse cx="6.20947265625" cy="6" rx="6.20947265625" ry="6"   fill="#1DD6FF" fill-opacity="0.2">
+</ellipse>
+<ellipse cx="6.209228515625" cy="6" rx="3.104736328125" ry="3"   fill="#1DD6FF" >
+</ellipse>
+</svg>

src/assets/projectLarge/section.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="35" viewBox="0 0 15 35" fill="none">
+<rect x="1" y="0" width="14" height="35"   fill="url(#linear_fill_216_187)" fill-opacity="1">
+</rect>
+<rect x="0" y="0" width="4" height="35"   fill="#1DD6FF" >
+</rect>
+<defs>
+<linearGradient id="linear_fill_216_187" x1="1" y1="17.5" x2="13.62772" y2="17.5" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#43E2CB" stop-opacity="0.4" />
+<stop offset="1" stop-color="#43E2CB" stop-opacity="0" />
+</linearGradient>
+</defs>
+</svg>

src/router/index.ts

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

src/views/omScreen/components/center.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="center_box">
+        <div class="totalView">
+            <div class="item">
+                <div class="item_content color1">
+                    <div class="item_title">设备状态</div>
+                    <div class="item_num">
+                        <div class="num">100</div>
+                        <div class="unit">Kw</div>
+                    </div>
+                </div>
+                <div class="item_icon">
+                    <img src="@/assets/projectLarge/blue.png" alt="">
+                </div>
+            </div>
+            <div class="item">
+                <div class="item_content color2">
+                    <div class="item_title">当日发电量</div>
+                    <div class="item_num">
+                        <div class="num">100</div>
+                        <div class="unit">Kw</div>
+                    </div>
+                    <div class="item_status">
+                        <img src="@/assets/projectLarge/up.png" alt="">
+                        <span class="up">2.4% 较昨日</span>
+                    </div>
+                </div>
+                <div class="item_icon">
+                    <img src="@/assets/projectLarge/dian.png" alt="">
+                </div>
+            </div>
+            <div class="item">
+                <div class="item_content color3">
+                    <div class="item_title">当月累计发电量</div>
+                    <div class="item_num">
+                        <div class="num">100</div>
+                        <div class="unit">Kw</div>
+                    </div>
+                    <div class="item_status">
+                        <img src="@/assets/projectLarge/down.png" alt="">
+                        <span class="down">2.4% 较昨日</span>
+                    </div>
+                </div>
+                <div class="item_icon">
+                    <img src="@/assets/projectLarge/dian1.png" alt="">
+                </div>
+            </div>
+            <div class="item">
+                <div class="item_content color4">
+                    <div class="item_title">累计CO2减排量</div>
+                    <div class="item_num">
+                        <div class="num">100</div>
+                        <div class="unit">Kw</div>
+                    </div>
+                    <div class="item_status">
+                        <img src="@/assets/projectLarge/up.png" alt="">
+                        <span class="up">2.4% 较上月</span>
+                    </div>
+                    <div class="count">
+                        累计:11111吨
+                    </div>
+                </div>
+                <div class="item_icon">
+                    <img src="@/assets/projectLarge/yezi.png" alt="">
+                </div>
+            </div>
+            <div class="item">
+                <div class="item_content color5">
+                    <div class="item_title">装机容量</div>
+                    <div class="item_num">
+                        <div class="num">100</div>
+                        <div class="unit">Kw</div>
+                    </div>
+                </div>
+                <div class="item_icon">
+                    <img src="@/assets/projectLarge/chouti.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped lang="scss">
+@import '@/views/omScreen/gis.scss';
+
+.center_box {
+    .totalView {
+        padding: 0 vw(20);
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+
+        .color1 {
+            color: rgba(107, 176, 255, 1);
+        }
+
+        .color2 {
+            color: rgba(138, 153, 255, 1);
+        }
+
+        .color3 {
+            color: rgba(255, 204, 128, 1);
+        }
+
+        .color4 {
+            color: rgba(29, 214, 255, 1);
+        }
+
+        .color5 {
+            color: rgba(135, 255, 163, 1);
+        }
+
+        .item {
+            width: vw(163);
+            height: vh(120);
+            border-radius: 8px;
+            background: linear-gradient(227.07deg, rgba(21, 49, 58, 0.8) 0%, rgba(39, 85, 94, 0.5) 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+
+            .item_content {
+                width: vw(104);
+
+                .item_num {
+                    display: flex;
+                    align-items: flex-end;
+                    margin-top: vh(10);
+
+                    .num {
+                        font-size: vh(24);
+                        font-family: 'Roboto-Regular';
+                    }
+
+                    .unit {
+                        margin-left: vw(20);
+                        color: rgba(156, 163, 175, 1);
+                    }
+                }
+            }
+
+            .item_icon {
+                width: vw(40);
+                height: vh(40);
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .item_status {
+                font-size: vh(12);
+                margin-top: vh(10);
+
+                img {
+                    width: vw(15);
+                    height: vh(15);
+                }
+
+                .up {
+                    color: rgba(135, 255, 163, 1);
+                }
+
+                .down {
+                    color: rgba(255, 128, 128, 1);
+                }
+            }
+            .count{
+                font-size: vh(12);
+                margin-top: vh(5);
+                color: rgba(255, 255, 255, 1);
+            }
+        }
+    }
+}
+</style>

src/views/omScreen/components/header.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="header">
+    <div class="header-left">
+      <!-- <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/omScreen/components/leftPage.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="leftpageContainer">
+        <div class="middleInfo">
+            <Title title="项目概况" />
+            <div class="middleInfoContainer">
+                <div class="xmInfo">
+                    <div>项目名称：田东县乡村振兴光伏发电项目</div>
+                    <div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
+                    <div>占地面积：约10000亩</div>
+                    <div>土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
+                    <div>项目类型：集中式光伏电站</div>
+                    <div>建设单位：这里是建设单位的名称</div>
+                    <div>总装机容量：200MW</div>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="bottomInfo">
+            <Title title="光伏版清洗" />
+            <div class="infoContainer">
+
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import Title from './title.vue';
+import { ref } from 'vue';
+
+
+// 发电量数据
+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/omScreen/gis.scss';
+
+.leftpageContainer {
+margin-left: vw(20);
+    .middleInfo {
+        background: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
+        .middleInfoContainer {
+            width: 100%;
+            height: vh(313);
+            box-sizing: border-box;
+            position: relative;
+            background-size: 100% 100%;
+            font-size: vh(14);
+            position: relative;
+
+            .xmInfo {
+                position: absolute;
+                left: 50%;
+                right: 50%;
+                top: vh(150);
+                transform: translate(-50%, -50%);
+                width: vw(500);
+                height: vh(280);
+                background: url('@/assets/projectLarge/xm-bg.png') center center no-repeat;
+
+                div {
+                    margin-left: vw(60);
+                    margin-bottom: vh(12);
+                    width: vw(400);
+                }
+
+                :first-child {
+                    color: rgba(0, 255, 238, 1);
+                    margin-top: vh(40);
+                }
+            }
+        }
+    }
+
+    // 底部信息
+    .bottomInfo {
+       margin-top: vh(20);
+    }
+}
+</style>

src/views/omScreen/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/omScreen/components/rightPage.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="right_box">
+        <div class="data_box">
+            <Title title="年发电量" />
+            <div class="echarts">
+                <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
+            </div>
+        </div>
+        <!--  -->
+        <div class="data_box">
+            <Title title="报警统计" />
+    
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
+import { option1, option2, option3 } from './options';
+import Title from './title.vue';
+
+const option_fdssgl = ref(option1);
+const option_fdzlqs = ref(option2);
+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;
+
+    option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
+    option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
+    option_fdssgl.value.legend.textStyle.fontSize = fontSize;
+
+    option_fdzlqs.value.xAxis.axisLabel.fontSize = fontSize;
+    option_fdzlqs.value.yAxis.axisLabel.fontSize = fontSize;
+    option_fdzlqs.value.legend.textStyle.fontSize = fontSize;
+    option_fdzlqs.value.yAxis.nameTextStyle.fontSize = fontSize;
+
+    option_dzfhqx.value.xAxis.axisLabel.fontSize = fontSize;
+    option_dzfhqx.value.yAxis.axisLabel.fontSize = fontSize;
+    option_dzfhqx.value.legend.textStyle.fontSize = fontSize;
+}
+
+onMounted(() => {
+    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);
+    margin-right: vw(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(40vh - vh(25));
+    background-color: $background-color;
+
+    .echarts {
+        width: 100%;
+        // 40是title的高度
+        height: calc(40vh - vh(20 + 60));
+    }
+}
+
+.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/omScreen/components/title.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="title">
+    <img src="@/assets/projectLarge/titlebg.png" alt="" />
+    <div class="title_list">
+      <div class="title_item" v-for="(item, index) in titles" :key="index" @click="handleClick(index)"
+        :class="{ active2: activeIndex === index }">
+        {{ item }}
+      </div>
+      <div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: [String, Array],
+    default: '标题'
+  },
+  prefix: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['change']);
+const activeIndex = ref(0);
+const titles = ref(Array.isArray(props.title) ? props.title : [props.title]);
+
+const handleClick = (index: number) => {
+  activeIndex.value = index;
+  emit('change', index + 1);
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/views/omScreen/gis.scss';
+
+.title {
+  width: 100%;
+  height: vh(60);
+  display: flex;
+  align-items: center;
+  gap: vw(3);
+  font-family: 'Rang_men_zheng_title';
+  position: relative;
+  cursor: pointer;
+  z-index: 2;
+  background: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
+  img {
+    width: 97%;
+    object-fit: scale-down;
+  }
+
+  .title_list {
+    position: absolute;
+    top: 42%;
+    left: vw(52);
+    width: calc(100% - vw(60));
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &>div:first-child {
+      font-size: vw(20);
+    }
+  }
+
+  .title_item {
+    color: white;
+    transition: all 0.3s ease;
+
+    &.active2 {
+      transform: scale(1.1);
+    }
+  }
+}
+</style>

src/views/omScreen/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/omScreen/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="ueScreen">
+    <Header :isFull="isFull" @changePage="handleChangePage" />
+    <div class="content_box">
+      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '0' }" />
+      <CenterPage class="center" />
+      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '0' }" />
+    </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 CenterPage from './components/center.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">
+$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;
+}
+
+.center {
+  position: absolute;
+  top: 0;
+  left: 26vw;
+  width: 48vw;
+  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>