Skip to content

S
SatelliteDigital
提交 674e82f2 authored 作者: 汪雄's avatar 汪雄
浏览文件
操作

feat: 大屏适配

上级 8cf145ba
显示空白字符变更
内嵌 并排
正在显示 包含 110 行增加 和 54 行删除
index.html
浏览文件 @ 674e82f2
...@@ -8,50 +8,72 @@ ...@@ -8,50 +8,72 @@
--> -->
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> <link
rel="stylesheet"
href="https://unpkg.com/element-plus/dist/index.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UE大屏项目</title> <title>UE大屏项目</title>
<script> <script>
"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {}, ("object" != typeof ue || "object" != typeof ue.interface
ue.interface.broadcast = function (e, t) { ? ("object" != typeof ue && (ue = {}),
(ue.interface = {}),
(ue.interface.broadcast = function (e, t) {
if ("string" == typeof e) { if ("string" == typeof e) {
var o = [e, ""]; var o = [e, ""];
void 0 !== t && (o[1] = t); void 0 !== t && (o[1] = t);
var n = encodeURIComponent(JSON.stringify(o)); var n = encodeURIComponent(JSON.stringify(o));
"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "object" == typeof history &&
"", "#" + n), history.pushState({}, "function" == typeof history.pushState
"", "#" + encodeURIComponent("[]"))) : (document.location.hash = n, document.location.hash = encodeURIComponent("[]")) ? (history.pushState({}, "", "#" + n),
} history.pushState({}, "", "#" + encodeURIComponent("[]")))
}) : function (e) { : ((document.location.hash = n),
ue.interface = {}, (document.location.hash = encodeURIComponent("[]")));
ue.interface.broadcast = function (t, o) {
"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
} }
}(ue.interface), }))
(window.ue5 = ue.interface.broadcast); : (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),
(window.ue5 = ue.interface.broadcast));
</script> </script>
<!-- <script> <!-- <script>
ue.interface.receiveLoginInfo = function (data) { ue.interface.receiveLoginInfo = function (data) {
window.receiveLoginInfo(data); window.receiveLoginInfo(data);
}; };
</script> --> </script> -->
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
<style> <style>
body, body,
#app { #app {
background-color: transparent !important; /* background-color: transparent !important; */
}
</style>
<script>
function setRem() {
const baseSize = 16; // 基准
const designWidth = 1920; // 设计稿宽度（你项目很可能是1920大屏）
const scale = document.documentElement.clientWidth / designWidth;
document.documentElement.style.fontSize = baseSize * scale + "px";
document.documentElement.style.setProperty("--scale", scale);
window._myscale = scale
} }
</style>
setRem();
window.addEventListener("resize", setRem);
</script>
</html> </html>
package-lock.json
浏览文件 @ 674e82f2
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
"jsencrypt": "3.3.2", "jsencrypt": "3.3.2",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.1.7", "pinia": "2.1.7",
"postcss-pxtorem": "^6.1.0",
"qs": "^6.13.1", "qs": "^6.13.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-element-plus-x": "^1.3.98", "vue-element-plus-x": "^1.3.98",
...@@ -7261,6 +7262,14 @@ ...@@ -7261,6 +7262,14 @@
"postcss": ">4 <9" "postcss": ">4 <9"
} }
}, },
"node_modules/postcss-pxtorem": {
"version": "6.1.0",
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
"integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
"peerDependencies": {
"postcss": "^8.0.0"
}
},
"node_modules/posthtml": { "node_modules/posthtml": {
"version": "0.9.2", "version": "0.9.2",
"resolved": "https://registry.npmmirror.com/posthtml/-/posthtml-0.9.2.tgz", "resolved": "https://registry.npmmirror.com/posthtml/-/posthtml-0.9.2.tgz",
......
package.json
浏览文件 @ 674e82f2
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
"jsencrypt": "3.3.2", "jsencrypt": "3.3.2",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.1.7", "pinia": "2.1.7",
"postcss-pxtorem": "^6.1.0",
"qs": "^6.13.1", "qs": "^6.13.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-element-plus-x": "^1.3.98", "vue-element-plus-x": "^1.3.98",
......
src/pages/lefts/index.vue
浏览文件 @ 674e82f2
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
<!-- <ordit></ordit> --> <!-- <ordit></ordit> -->
<el-carousel :key="carouselKey" indicator-position="none" height="180px" :loop="true" <el-carousel :key="carouselKey" indicator-position="none" height="180px" :loop="true"
:autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange"> :autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange">
<el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs" style="text-align: center;height: 100%;"> <el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs"
style="text-align: center;height: 100%;">
<div class="orbit-grid"> <div class="orbit-grid">
<!-- 处理不同的数据结构 --> <!-- 处理不同的数据结构 -->
<template v-if="Array.isArray(orbitMetrics[indexs - 1])"> <template v-if="Array.isArray(orbitMetrics[indexs - 1])">
...@@ -133,14 +134,14 @@ ...@@ -133,14 +134,14 @@
</el-input> </el-input>
</div> </div>
<el-table :data="satelliteData" size="small" height="170px" class="custom-table"> <el-table :data="satelliteData" size="small" :height="pxScale(170)" class="custom-table">
<el-table-column prop="" label="" width="30"> <el-table-column prop="" label="" :width="pxScale(30)" >
<template #default=""> <template #default="">
<img src='@/assets/images/lefts/satellite.png' alt="" class="satellite-icon"> <img src='@/assets/images/lefts/satellite.png' alt="" class="satellite-icon">
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="卫星名称" width="80" align="center"></el-table-column> <el-table-column prop="name" label="卫星名称":width="pxScale(80)" align="center"></el-table-column>
<el-table-column prop="station" label="当前连接" width="80" align="center"> <el-table-column prop="station" label="当前连接" :width="pxScale(80)" align="center">
<template #default="scope"> <template #default="scope">
<!-- {{typeof scope.row.station }} --> <!-- {{typeof scope.row.station }} -->
...@@ -159,8 +160,8 @@ ...@@ -159,8 +160,8 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="manufacturer" label="厂商" width="80" align="center"></el-table-column> <el-table-column prop="manufacturer" label="厂商" :width="pxScale(80)" align="center"></el-table-column>
<el-table-column prop="status" label="当前状态" width="70" align="center"> <el-table-column prop="status" label="当前状态" :width="pxScale(70)" align="center">
<template #default="scope"> <template #default="scope">
<el-tag :class="`status-tag status-${scope.row.statusClass}`"> <el-tag :class="`status-tag status-${scope.row.statusClass}`">
{{ scope.row.status }} {{ scope.row.status }}
...@@ -221,50 +222,45 @@ ...@@ -221,50 +222,45 @@
</el-input> </el-input>
</div> </div>
<el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small" height="160px"
@row-click="tableHandleRowClickFn" class="custom-table custom-table-foot "> <el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small" :height="pxScale(160)"
<el-table-column prop="" label="" width="23"> @row-click="tableHandleRowClickFn" :fit="false" class="custom-table custom-table-foot ">
<el-table-column prop="" label="" :width="pxScale(30)">
<template #default=""> <template #default="">
<img src='@/assets/images/lefts/info.png' alt="" class="satellite-icon_bottom"> <img src='@/assets/images/lefts/info.png' alt="" class="satellite-icon_bottom">
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="station" label="地面站名称" row-class-name="hover-row" width="95"></el-table-column> <el-table-column prop="station" label="地面站名称" :width="pxScale(90)"
<el-table-column label="KU天线" width="60" align="center"> row-class-name="hover-row"></el-table-column>
<el-table-column label="KU天线" :width="pxScale(60)" align="center">
<template #default="scope"> <template #default="scope">
<div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.ku != '-' }">{{ scope.row.ku === 0 ? <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.ku != '-' }">{{ scope.row.ku === 0 ?
'-' : scope.row.ku }}</div> '-' : scope.row.ku }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="qv" label="QV天线" width="60" align="center"> <el-table-column prop="qv" label="QV天线" :width="pxScale(60)" align="center">
<template #default="scope"> <template #default="scope">
<div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.qv != '-' }">{{ scope.row.qv === 0 ? <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.qv != '-' }">{{ scope.row.qv === 0 ?
'-' : scope.row.qv }}</div> '-' : scope.row.qv }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="monitor" label="测控基带" width="62" align="center"> <el-table-column prop="monitor" label="测控基带" :width="pxScale(60)" align="center">
<template #default="scope"> <template #default="scope">
<div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.monitor != '-' }">{{ scope.row.monitor <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.monitor != '-' }">{{
scope.row.monitor
=== 0 ? '-' : scope.row.monitor === 0 ? '-' : scope.row.monitor
}}</div> }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="baseband" label="基站" width="40" align="center"> <el-table-column prop="baseband" label="基站" :width="pxScale(40)" align="center">
<template #default="scope"> <template #default="scope">
<div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.baseband != '-' }">{{ <div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.baseband != '-' }">{{
scope.row.baseband === 0 ? '-' : scope.row.baseband }}</div> scope.row.baseband === 0 ? '-' : scope.row.baseband }}</div>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column prop="core" label="核心网" width="52" v-if="activeTab === 'equipment'" align="center"></el-table-column> -->
<!-- 故障情况表格列 -->
<!-- <el-table-column prop="total" label="总故障数" width="62" v-if="activeTab === 'fault'"
align="center"></el-table-column>
<el-table-column prop="serious" label="严重故障" width="62" v-if="activeTab === 'fault'"
align="center"></el-table-column>
<el-table-column prop="general" label="一般故障" width="60" v-if="activeTab === 'fault'"
align="center"></el-table-column>
<el-table-column prop="minor" label="轻微故障" width="60" v-if="activeTab === 'fault'" align="center"></el-table-column> -->
</el-table> </el-table>
</div> </div>
</div> </div>
</div> </div>
...@@ -277,8 +273,8 @@ ...@@ -277,8 +273,8 @@
@errorDialoghandleClose="errorDialoghandleClose"></errorDialog> @errorDialoghandleClose="errorDialoghandleClose"></errorDialog>
</el-dialog> --> </el-dialog> -->
<errorDialog v-if="errorDialogVisible" :errorDeviceList="errorDeviceList" :satlTitle="satlTitle" :baseDeviceList="baseDeviceList" <errorDialog v-if="errorDialogVisible" :errorDeviceList="errorDeviceList" :satlTitle="satlTitle"
@errorDialoghandleClose="errorDialoghandleClose"></errorDialog> :baseDeviceList="baseDeviceList" @errorDialoghandleClose="errorDialoghandleClose"></errorDialog>
</div> </div>
...@@ -292,8 +288,8 @@ import errorDialog from '@/pages/lefts/component/errorDialog.vue' ...@@ -292,8 +288,8 @@ import errorDialog from '@/pages/lefts/component/errorDialog.vue'
import wss from '@/utils/requestSocekt.js' import wss from '@/utils/requestSocekt.js'
import useAppStore from '@/store/module/app' import useAppStore from '@/store/module/app'
import local from '@/utils/local.js' import local from '@/utils/local.js'
import { ElMessage } from 'element-plus'; import { pxScale } from '@/utils/rem.js'
import { da } from 'element-plus/es/locales.mjs';
const useAppStoreInstance = useAppStore(); const useAppStoreInstance = useAppStore();
// 激活的标签页 // 激活的标签页
...@@ -882,7 +878,7 @@ watch(() => useAppStoreInstance.globalLeftWssCONTINE, val => { ...@@ -882,7 +878,7 @@ watch(() => useAppStoreInstance.globalLeftWssCONTINE, val => {
// console.log('JSONData',JSONdata) // console.log('JSONData',JSONdata)
errorDeviceListDetailsDialog.value = JSONdata?.gatewayStationDetails errorDeviceListDetailsDialog.value = JSONdata?.gatewayStationDetails
if(currentGroundEquipmentObj.value!==''){ if (currentGroundEquipmentObj.value !== '') {
//这代码屎上加屎，别怪我，怪第一个人，我不敢碰之前写的 //这代码屎上加屎，别怪我，怪第一个人，我不敢碰之前写的
errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === currentGroundEquipmentObj.value.siteId)[0]?.groundNetworkElementResponses || [] errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === currentGroundEquipmentObj.value.siteId)[0]?.groundNetworkElementResponses || []
satlTitle.value = currentGroundEquipmentObj.value.station ? currentGroundEquipmentObj.value.station : '未知名称' satlTitle.value = currentGroundEquipmentObj.value.station ? currentGroundEquipmentObj.value.station : '未知名称'
...@@ -1504,6 +1500,13 @@ onUnmounted(() => { ...@@ -1504,6 +1500,13 @@ onUnmounted(() => {
margin-top: 10px; margin-top: 10px;
} }
/* .i-table-wrapper{
transform: scale(var(--scale));
transform-origin: top left;
} */
:deep(.i-table-wrapper .el-table__header-wrapper .el-table__header) {}
.margin-top-section { .margin-top-section {
margin-top: 20px; margin-top: 20px;
} }
......
src/utils/rem.js 0 → 100644
浏览文件 @ 674e82f2
//pxtorem
// export function px2rem2px(val, base = 16) {
// if (typeof val === 'number') return (val / base) * window._myscale
// // + 'rem'
// if (typeof val === 'string' && val.includes('px')) {
// return parseFloat(val) / base * window._myscale
// }
// return val
// }
export function pxScale(val) {
let log = val;
if (typeof val === "number") {
log = val * window._myscale;
}
if (typeof val === "string" && val.includes("px")) {
log = parseFloat(val) * window._myscale;
}
console.log("log 数据", log);
return log;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论