mt-fe-group/chenzhou
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add glass

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-08 09:54:55 +08:00
parent 822732742d
commit c6f5bc7d80
4 changed files with 111 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<body style="position: relative;">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>

10
src/AlertListScreen.vue
View File

@ -8,6 +8,14 @@ import AppHeader from "./components/Base/Header.vue";
import Tools from "./components/Tools.vue";
import FullEqList from "./FullEqList.vue";
import { connect0 } from "./utils/useWebsocket";
import Glass from "./utils/glass";
//
const gls = new Glass("a2m1");
setTimeout(() => {
gls.move();
}, 1000);
//
const mainContainer = ref(null);
const props = defineProps({
@ -53,7 +61,7 @@ function handleResolutionChange(width, height) {
<template>
<div id="main-container" ref="mainContainer" class="main-container">
<div id="main-container__fulleq">
<FullEqList />
<FullEqList v-if="0" />
</div>
<DatetimeTool />
<Tools @change-resolution="handleResolutionChange" />

BIN
src/assets/glass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

101
src/utils/glass.js Normal file
View File

@ -0,0 +1,101 @@
import glassImgSrc from "../assets/glass.png";
const positionMapping = {
A1: {
M1: [0, 0, 60, 400], // x, y, angle, distance(px)
M2: [0, 0, 60, 400],
M105: [],
M205: [],
},
A2: {
M1: [740, 380, -24, 100],
M2: {
// 分段
0: [0, 0, 60, 400],
1: [0, 0, 60, 400],
2: [0, 0, 60, 400],
},
},
A3: {
M1: [],
},
B1: {
M1: [],
M2: [],
M3: [],
M105s: [],
M205: [],
M305: [],
},
B2: {
M1: [],
M2: [],
M3: [],
},
B3: {
M1: [],
},
C1: {
M1: [],
M2: [],
M104: [],
M204: [],
},
C2: {
M1: { 0: [], 1: [] },
M2: [],
},
C3: {
M1: [],
},
};
function calcPosition(positionString = "") {
const lineId = positionString.slice(0, 2).toUpperCase(); // A1 B1 C1
const subLineId = positionString.slice(2).toUpperCase(); // M1 M206 M3
return {
top: positionMapping[lineId][subLineId][0],
left: positionMapping[lineId][subLineId][1],
angle: positionMapping[lineId][subLineId][2],
distance: positionMapping[lineId][subLineId][3],
};
}
export default class Glass {
el = null;
distance = 100;
visibleOnScreen = false;
constructor(positionStr) {
const { left, top, angle, distance } = calcPosition(positionStr);
// this.el = document.createElement("img");
// this.el.src = glassImgSrc;
this.el = document.createElement("div");
this.el.style.background = "#f00";
this.el.style.position = "absolute";
this.el.style.top = `${top}px` || "740px";
this.el.style.left = `${left}px` || "380px";
this.distance = distance || 100;
// this.el.style.border = "3px solid red";
// this.el.style.display = "none";
this.el.style.width = "18px";
this.el.style.height = "18px";
this.el.style.transformOrigin = "center";
this.el.style.transition = "all 3s linear";
this.el.style.zIndex = "9999";
this.el.style.pointerEvents = "none";
this.el.style.transform = `rotate(${angle}deg) skew(8deg)`;
// debugger;
document.body.appendChild(this.el);
}
get visible() {
return this.visibleOnScreen;
}
move() {
const getTranslate = (d) => `${d}px ${-1 * Math.floor(Math.cos(24) * d)}px`;
this.el.style.translate = getTranslate(this.distance);
}
}