Skip to content

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

feat: 大屏适配

上级 8cf145ba
显示空白字符变更
内嵌 并排
正在显示 包含 110 行增加 和 54 行删除
index.html
浏览文件 @ 674e82f2
......@@ -8,50 +8,72 @@
-->
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<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" />
<title>UE大屏项目</title>
<script>
"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
ue.interface.broadcast = function (e, t) {
("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, ""))
"object" == typeof history &&
"function" == typeof history.pushState
? (history.pushState({}, "", "#" + n),
history.pushState({}, "", "#" + encodeURIComponent("[]")))
: ((document.location.hash = n),
(document.location.hash = encodeURIComponent("[]")));
}
}(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>
ue.interface.receiveLoginInfo = function (data) {
window.receiveLoginInfo(data);
};
</script> -->
</head>
</head>
<body>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<style>
</body>
<style>
body,
#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>
package-lock.json
浏览文件 @ 674e82f2
......@@ -20,6 +20,7 @@
"jsencrypt": "3.3.2",
"nprogress": "0.2.0",
"pinia": "2.1.7",
"postcss-pxtorem": "^6.1.0",
"qs": "^6.13.1",
"vue": "^3.5.13",
"vue-element-plus-x": "^1.3.98",
......@@ -7261,6 +7262,14 @@
"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": {
"version": "0.9.2",
"resolved": "https://registry.npmmirror.com/posthtml/-/posthtml-0.9.2.tgz",
......
package.json
浏览文件 @ 674e82f2
......@@ -34,6 +34,7 @@
"jsencrypt": "3.3.2",
"nprogress": "0.2.0",
"pinia": "2.1.7",
"postcss-pxtorem": "^6.1.0",
"qs": "^6.13.1",
"vue": "^3.5.13",
"vue-element-plus-x": "^1.3.98",
......
src/pages/lefts/index.vue
浏览文件 @ 674e82f2
......@@ -26,7 +26,8 @@
<!-- <ordit></ordit> -->
<el-carousel :key="carouselKey" indicator-position="none" height="180px" :loop="true"
: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">
<!-- 处理不同的数据结构 -->
<template v-if="Array.isArray(orbitMetrics[indexs - 1])">
......@@ -133,14 +134,14 @@
</el-input>
</div>
<el-table :data="satelliteData" size="small" height="170px" class="custom-table">
<el-table-column prop="" label="" width="30">
<el-table :data="satelliteData" size="small" :height="pxScale(170)" class="custom-table">
<el-table-column prop="" label="" :width="pxScale(30)" >
<template #default="">
<img src='@/assets/images/lefts/satellite.png' alt="" class="satellite-icon">
</template>
</el-table-column>
<el-table-column prop="name" label="卫星名称" width="80" align="center"></el-table-column>
<el-table-column prop="station" label="当前连接" width="80" align="center">
<el-table-column prop="name" label="卫星名称":width="pxScale(80)" align="center"></el-table-column>
<el-table-column prop="station" label="当前连接" :width="pxScale(80)" align="center">
<template #default="scope">
<!-- {{typeof scope.row.station }} -->
......@@ -159,8 +160,8 @@
</template>
</el-table-column>
<el-table-column prop="manufacturer" label="厂商" width="80" align="center"></el-table-column>
<el-table-column prop="status" label="当前状态" width="70" align="center">
<el-table-column prop="manufacturer" label="厂商" :width="pxScale(80)" align="center"></el-table-column>
<el-table-column prop="status" label="当前状态" :width="pxScale(70)" align="center">
<template #default="scope">
<el-tag :class="`status-tag status-${scope.row.statusClass}`">
{{ scope.row.status }}
......@@ -221,50 +222,45 @@
</el-input>
</div>
<el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small" height="160px"
@row-click="tableHandleRowClickFn" class="custom-table custom-table-foot ">
<el-table-column prop="" label="" width="23">
<el-table :data="activeTab === 'equipment' ? equipmentData : faultData" size="small" :height="pxScale(160)"
@row-click="tableHandleRowClickFn" :fit="false" class="custom-table custom-table-foot ">
<el-table-column prop="" label="" :width="pxScale(30)">
<template #default="">
<img src='@/assets/images/lefts/info.png' alt="" class="satellite-icon_bottom">
</template>
</el-table-column>
<el-table-column prop="station" label="地面站名称" row-class-name="hover-row" width="95"></el-table-column>
<el-table-column label="KU天线" width="60" align="center">
<el-table-column prop="station" label="地面站名称" :width="pxScale(90)"
row-class-name="hover-row"></el-table-column>
<el-table-column label="KU天线" :width="pxScale(60)" align="center">
<template #default="scope">
<div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.ku != '-' }">{{ scope.row.ku === 0 ?
'-' : scope.row.ku }}</div>
</template>
</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">
<div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.qv != '-' }">{{ scope.row.qv === 0 ?
'-' : scope.row.qv }}</div>
</template>
</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">
<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
}}</div>
</template>
</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">
<div :class="{ 'errorRed': activeTab != 'equipment' && scope.row.baseband != '-' }">{{
scope.row.baseband === 0 ? '-' : scope.row.baseband }}</div>
</template>
</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>
</div>
</div>
</div>
......@@ -277,8 +273,8 @@
@errorDialoghandleClose="errorDialoghandleClose"></errorDialog>
</el-dialog> -->
<errorDialog v-if="errorDialogVisible" :errorDeviceList="errorDeviceList" :satlTitle="satlTitle" :baseDeviceList="baseDeviceList"
@errorDialoghandleClose="errorDialoghandleClose"></errorDialog>
<errorDialog v-if="errorDialogVisible" :errorDeviceList="errorDeviceList" :satlTitle="satlTitle"
:baseDeviceList="baseDeviceList" @errorDialoghandleClose="errorDialoghandleClose"></errorDialog>
</div>
......@@ -292,8 +288,8 @@ import errorDialog from '@/pages/lefts/component/errorDialog.vue'
import wss from '@/utils/requestSocekt.js'
import useAppStore from '@/store/module/app'
import local from '@/utils/local.js'
import { ElMessage } from 'element-plus';
import { da } from 'element-plus/es/locales.mjs';
import { pxScale } from '@/utils/rem.js'
const useAppStoreInstance = useAppStore();
// 激活的标签页
......@@ -882,7 +878,7 @@ watch(() => useAppStoreInstance.globalLeftWssCONTINE, val => {
// console.log('JSONData',JSONdata)
errorDeviceListDetailsDialog.value = JSONdata?.gatewayStationDetails
if(currentGroundEquipmentObj.value!==''){
if (currentGroundEquipmentObj.value !== '') {
//这代码屎上加屎，别怪我，怪第一个人，我不敢碰之前写的
errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === currentGroundEquipmentObj.value.siteId)[0]?.groundNetworkElementResponses || []
satlTitle.value = currentGroundEquipmentObj.value.station ? currentGroundEquipmentObj.value.station : '未知名称'
......@@ -1504,6 +1500,13 @@ onUnmounted(() => {
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: 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论