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

Compare commits

base: mt-fe-group:6d57597aa122a5f0e13709314e5ba9397f7d0f93
Branches Tags
mt-fe-group:master
..
compare: mt-fe-group:9c3b9218d238cc52fac633370e503a017af2f7bb
Branches Tags
mt-fe-group:master

No commits in common. "6d57597aa122a5f0e13709314e5ba9397f7d0f93" and "9c3b9218d238cc52fac633370e503a017af2f7bb" have entirely different histories.
6d57597aa1 ... 9c3b9218d2

13 changed files with 108 additions and 340 deletions
Show Stats Expand all files Collapse all files

8
index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -6,12 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>Vite + Vue</title>
</head> </head>
<body style="position: relative"> <body>
<div id="app"></div> <div id="app"></div>
<!-- <div
id="glass-layer"
style="position: absolute; top: 0; left: 0; height: 100%"
></div> -->
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

172
src/AlertListScreen.vue
View File

@ -1,98 +1,27 @@
<!-- 报警列表页面 --> <!-- 报警列表页面 -->
<script setup> <script setup>
import { ref, watchEffect, onMounted } from "vue"; import { ref } from "vue";
import { useWsStore } from "./store"; import { useWsStore } from "./store";
import { useSettings } from "./store/settings";
import Container from "./components/Base/Container.vue"; import Container from "./components/Base/Container.vue";
import DatetimeTool from "./components/HeadTime.vue"; import DatetimeTool from "./components/HeadTime.vue";
import AppHeader from "./components/Base/Header.vue"; import AppHeader from "./components/Base/Header.vue";
import Tools from "./components/Tools.vue"; import Tools from "./components/Tools.vue";
import FullEqList from "./FullEqList.vue"; import FullEqList from "./FullEqList.vue";
import { connect0 } from "./utils/useWebsocket"; import { connect0 } from "./utils/useWebsocket";
import Glass from "./utils/glass";
const allowedList = [ const mainContainer = ref(null);
"c2m101",
"c2m201",
"c1m104_1",
"c1m204_1",
"c2m101",
"c2m201",
"a3m101_1",
"b3m101",
"c3m101",
"a2m101_1",
"a2m201_1",
"b2m101",
"b2m201",
"b2m301",
"a1m105_1",
"a1m205_1",
"b1m105_1",
"b1m205_1",
"b1m305_1",
"a1m101",
"a1m201",
"b1m101",
"b1m201",
"b1m301",
"c1m101",
"c1m201",
].map((item) => item.toUpperCase());
const store = useWsStore();
const settingStore = useSettings();
connect0(store);
const props = defineProps({ const props = defineProps({
line: { line: {
type: Number, type: Number,
default: 1, default: 1,
}, },
}); });
const mainContainer = ref(null); const store = useWsStore();
const grassArr = ref({});
const doRender = (data) => { connect0(store);
return setTimeout(() => {
// console.log("渲染一批数据...");
const commingData = data
.filter((item) => item.haveGlass)
.filter((item) => allowedList.includes(item.lightCode));
if (commingData.length != 0) {
/** 清空之前的状态 */
document.getElementById("glass-layer").innerHTML = "";
document.getElementById("glass-layer").innerHTML = "";
grassArr.value = {};
commingData.forEach((item) => {
const n = new Glass(
item.lightCode,
item.lightCode.includes("A3") ||
item.lightCode.includes("B3") ||
item.lightCode.includes("C3")
? 12
: undefined,
"#0F0D"
);
setTimeout(() => {
n.move();
}, 100);
grassArr.value[item.lightCode] = n;
});
}
}, 1000);
};
watchEffect((onInvalidate) => {
const timer = doRender(store.mainDataAlarm.orbitalPositioningArrayList || []);
onInvalidate(() => {
clearTimeout(timer);
});
});
const alarmList = ref( const alarmList = ref(
(store.mainDataAlarm.alarmArrList || []).map((item, index) => ({ (store.data1.alarmArrList || []).map((item, index) => ({
id: item.id, id: item.id,
eqName: item.equipmentName, eqName: item.equipmentName,
eqIndex: index + 1, eqIndex: index + 1,
@ -101,69 +30,49 @@ const alarmList = ref(
position: `${item.productLine} - ${item.segment}`, position: `${item.productLine} - ${item.segment}`,
})) }))
); );
store.$subscribe((mutation, state) => { // store.$subscribe((mutation, state) => {
alarmList.value = (state.mainDataAlarm.alarmArrList || []).map( // alarmList.value = state.data1.alarmArrList.map((item, index) => ({
(item, index) => ({ // id: item.id,
id: item.id, // eqName: item.equipmentName,
eqName: item.equipmentName, // eqIndex: index + 1,
eqIndex: index + 1, // alarmGrade: item.alarmLevel,
alarmGrade: item.alarmLevel, // alarmDetail: item.alarmDetails,
alarmDetail: item.alarmDetails, // position: `${item.productLine} - ${item.segment}`,
position: `${item.productLine} - ${item.segment}`, // }));
}) // });
);
}); // function handleIgnore() {
// alarmList.value.splice(0)
// }
// 检查状态
onMounted(() => {
const settings = settingStore.settings;
// 设置分辨率
handleResolutionChange(settings.resolution.width, settings.resolution.height);
});
function changeScale(elm, width, height) {
const xScale = width / 1920;
const yScale = height / 1080;
const style = {
transform: `scale(${xScale}, ${yScale})`,
transformOrigin: "top left",
};
elm.style.transform = style.transform;
elm.style.transformOrigin = style.transformOrigin;
}
function handleResolutionChange(width, height) { function handleResolutionChange(width, height) {
mainContainer.value && mainContainer.value && changeScale(mainContainer.value, width, height);
changeScale(mainContainer.value, width, height) &&
changeScale(document.getElementById("glass-layer"), width, height);
} }
</script> </script>
<template> <template>
<div id="main-container" ref="mainContainer" class="main-container"> <div id="main-container" ref="mainContainer" class="main-container">
<div id="main-container__fulleq"> <div id="main-container__fulleq">
<FullEqList v-if="0" /> <FullEqList />
</div> </div>
<DatetimeTool /> <DatetimeTool />
<Tools @change-resolution="handleResolutionChange" /> <Tools @change-resolution="handleResolutionChange" />
<AppHeader /> <AppHeader />
<div
id="glass-layer"
style="position: absolute; top: 0; left: 0; height: 100%"
></div>
<div class="alert-list-page"> <div class="alert-list-page">
<Container class="alert-list" title="报警列表" icon="cube"> <Container class="alert-list" title="报警列表" icon="cube">
<div class="alert-list__table" style=""> <div class="alert-list__table" style="">
<el-table <el-table
class="dark-table" class="dark-table"
:data="alarmList" :data="alarmList"
:show-overflow-tooltip="true"
row-class-name="dark-row" row-class-name="dark-row"
header-row-class-name="dark-header" header-row-class-name="dark-header"
> >
<el-table-column <el-table-column
prop="eqName" prop="eqName"
label="设备名" label="设备名"
width="90" width="80"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="eqIndex" prop="eqIndex"
@ -172,34 +81,15 @@ function handleResolutionChange(width, height) {
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="alarmGrade" prop="alarmGrade"
label="等级" label="报警等级"
width="60" width="100"
></el-table-column> ></el-table-column>
<el-table-column prop="alarmDetail" label="报警细节">
<template v-slot="{ row }">
<el-tooltip
class="box-item"
effect="dark"
:content="row.alarmDetail || '---'"
placement="top-start"
>
<span
style="
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
"
>{{ row.alarmDetail || "---" }}</span
>
</el-tooltip>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="position" prop="alarmDetail"
width="128" label="报警细节"
label="定位" width="144"
></el-table-column> ></el-table-column>
<el-table-column prop="position" label="定位"></el-table-column>
</el-table> </el-table>
</div> </div>
<!-- <button @click="handleIgnore" class="alert-btn">忽略</button> --> <!-- <button @click="handleIgnore" class="alert-btn">忽略</button> -->
@ -263,6 +153,7 @@ function handleResolutionChange(width, height) {
.main-container { .main-container {
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
background: #000;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -291,12 +182,11 @@ function handleResolutionChange(width, height) {
.alert-list { .alert-list {
height: calc(100% - 56px); height: calc(100% - 56px);
width: 640px; width: 520px;
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 32px; right: 32px;
z-index: 300;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

1
src/App.vue
View File

@ -6,7 +6,6 @@ import AlertListScreen from "./AlertListScreen.vue";
// import Slider from "./components/Slider.vue"; // import Slider from "./components/Slider.vue";
import useWebsocket from "./utils/useWebsocket"; import useWebsocket from "./utils/useWebsocket";
import { useWsStore } from "./store"; import { useWsStore } from "./store";
const store = useWsStore(); const store = useWsStore();
const excludePaths = ["/alert-list", "/main-screen"]; const excludePaths = ["/alert-list", "/main-screen"];

49
src/MainScreen.vue
View File

@ -1,8 +1,7 @@
<!-- 报警列表页面 --> <!-- 报警列表页面 -->
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref } from "vue";
import { useWsStore } from "./store"; import { useWsStore } from "./store";
import { useSettings } from "./store/settings";
import DatetimeTool from "./components/HeadTime.vue"; import DatetimeTool from "./components/HeadTime.vue";
import AppHeader from "./components/Base/Header.vue"; import AppHeader from "./components/Base/Header.vue";
import Tools from "./components/Tools.vue"; import Tools from "./components/Tools.vue";
@ -21,25 +20,34 @@ const props = defineProps({
}, },
}); });
const store = useWsStore(); const store = useWsStore();
const settingStore = useSettings();
connect0(store); connect0(store);
// 检查状态 const alarmList = ref(
onMounted(() => { (store.data1.alarmArrList || []).map((item, index) => ({
const settings = settingStore.settings; id: item.id,
// 设置分辨率 eqName: item.equipmentName,
handleResolutionChange(settings.resolution.width, settings.resolution.height); eqIndex: index + 1,
}); alarmGrade: item.alarmLevel,
function changeScale(elm, width, height) { alarmDetail: item.alarmDetails,
const xScale = width / 1920; position: `${item.productLine} - ${item.segment}`,
const yScale = height / 1080; }))
const style = { );
transform: `scale(${xScale}, ${yScale})`, // store.$subscribe((mutation, state) => {
transformOrigin: "top left", // alarmList.value = state.data1.alarmArrList.map((item, index) => ({
}; // id: item.id,
elm.style.transform = style.transform; // eqName: item.equipmentName,
elm.style.transformOrigin = style.transformOrigin; // eqIndex: index + 1,
} // alarmGrade: item.alarmLevel,
// alarmDetail: item.alarmDetails,
// position: `${item.productLine} - ${item.segment}`,
// }));
// });
// function handleIgnore() {
// alarmList.value.splice(0)
// }
function handleResolutionChange(width, height) { function handleResolutionChange(width, height) {
mainContainer.value && changeScale(mainContainer.value, width, height); mainContainer.value && changeScale(mainContainer.value, width, height);
} }
@ -48,7 +56,7 @@ function handleResolutionChange(width, height) {
<template> <template>
<div id="main-container" ref="mainContainer" class="main-container"> <div id="main-container" ref="mainContainer" class="main-container">
<div id="main-container__fulleq"> <div id="main-container__fulleq">
<FullEqList v-if="0" /> <FullEqList />
</div> </div>
<DatetimeTool /> <DatetimeTool />
<Tools @change-resolution="handleResolutionChange" /> <Tools @change-resolution="handleResolutionChange" />
@ -181,7 +189,6 @@ function handleResolutionChange(width, height) {
/* align-content: center; */ /* align-content: center; */
/* place-content: center; */ /* place-content: center; */
gap: 15% 55%; gap: 15% 55%;
z-index: 300;
} }
.alert-list { .alert-list {

BIN
src/assets/glass.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

2
src/components/SettingDialog.vue
View File

@ -77,7 +77,7 @@ function handleConfirm() {
width: 577px; width: 577px;
height: 422px; height: 422px;
background: url(../assets/dialog-bg.png) 100% / contain no-repeat; background: url(../assets/dialog-bg.png) 100% / contain no-repeat;
z-index: 1001; z-index: 1000;
transition: all .3s ease-out; transition: all .3s ease-out;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

42
src/components/Tools.vue
View File

@ -4,9 +4,9 @@ import IconBack from "../assets/menu_icon/IconBack.vue";
import IconExchange from "../assets/menu_icon/IconExchange.vue"; import IconExchange from "../assets/menu_icon/IconExchange.vue";
import IconSetting from "../assets/menu_icon/IconSetting.vue"; import IconSetting from "../assets/menu_icon/IconSetting.vue";
import SettingDialogVue from "./SettingDialog.vue"; import SettingDialogVue from "./SettingDialog.vue";
import { useSettings } from "../store/settings"; import { useSettings } from '../store/settings';
const emit = defineEmits(["change-resolution"]); const emit = defineEmits(['change-resolution'])
const { settings, updateSettings } = useSettings(); const { settings, updateSettings } = useSettings();
// store.$subscribe((_, state) => { // store.$subscribe((_, state) => {
@ -15,17 +15,17 @@ const { settings, updateSettings } = useSettings();
const visible = ref(false); const visible = ref(false);
function toHome() { function toHome() {
document.location.reload(); document.location.reload()
} }
function showDialog() { function showDialog() {
visible.value = true; visible.value = true;
} }
function toggleLunbo() { function toggleLunbo() {
updateSettings({ type: "carousel", value: null }); updateSettings({ type: 'carousel', value: null })
} }
function handleChangeResolution(w, h) { function handleChangeResolution(w, h) {
emit("change-resolution", w, h); emit('change-resolution', w, h);
visible.value = false; visible.value = false;
} }
</script> </script>
@ -38,33 +38,14 @@ function handleChangeResolution(w, h) {
<button @click="showDialog"> <button @click="showDialog">
<IconSetting /> <IconSetting />
</button> </button>
<button style="position: relative" @click="toggleLunbo"> <button style="position: relative;" @click="toggleLunbo">
<span <span v-if="settings.carousel"
v-if="settings.carousel" style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; width: 56px; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
style=" {{ settings.carouselTime }}S</span>
color: #fffa;
font-family: 'Courier New', Courier, monospace;
font-weight: 600;
width: 56px;
font-size: 22px;
user-select: none;
position: absolute;
line-height: 52px;
text-align: center;
"
>
{{ settings.carouselTime }}S</span
>
<IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" /> <IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
</button> </button>
</div> </div>
<Teleport to="body"> <SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" />
<SettingDialogVue
v-if="visible"
@close="visible = false"
@change-resolution="handleChangeResolution"
/>
</Teleport>
</template> </template>
<style scoped> <style scoped>
@ -74,7 +55,7 @@ function handleChangeResolution(w, h) {
right: 24px; right: 24px;
display: flex; display: flex;
gap: 0px; gap: 0px;
z-index: 1000; z-index: 3;
} }
button { button {
@ -105,6 +86,7 @@ button svg #switch-btn {
transition: fill 0.2s ease-out; transition: fill 0.2s ease-out;
} }
button:hover svg #back-btn, button:hover svg #back-btn,
button:hover svg #setting-btn, button:hover svg #setting-btn,
button:hover svg #switch-btn { button:hover svg #switch-btn {

9
src/components/mainscreen/SumYield.vue
View File

@ -4,6 +4,7 @@ import * as echarts from "echarts";
import Container from "../Base/Container.vue"; import Container from "../Base/Container.vue";
import { useWsStore } from "../../store"; import { useWsStore } from "../../store";
const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => { const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
console.log("datalist", datalist); console.log("datalist", datalist);
const option = { const option = {
@ -78,14 +79,14 @@ function loadData(yieldArray) {
if (yieldArray == undefined || yieldArray?.length == 0) return null; if (yieldArray == undefined || yieldArray?.length == 0) return null;
for (let i = 0; i < yieldArray.length; ++i) { for (let i = 0; i < yieldArray.length; ++i) {
if (yieldArray[i].name == "钢1线") { if (yieldArray[i].name == "钢1线") {
result[0] = parseFloat(yieldArray[i].data) || 0; result[0] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢2线") { } else if (yieldArray[i].name == "钢2线") {
result[1] = parseFloat(yieldArray[i].data) || 0; result[1] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢3线") { } else if (yieldArray[i].name == "钢3线") {
result[2] = parseFloat(yieldArray[i].data) || 0; result[2] = parseInt(yieldArray[i].data);
} else { } else {
// 合计 // 合计
result[3] = parseFloat(yieldArray[i].data) || 0; result[3] = parseInt(yieldArray[i].data);
} }
} }
return result; return result;

13
src/components/mainscreen/TodayYield.vue
View File

@ -79,24 +79,21 @@ function loadData(yieldArray) {
if (yieldArray == undefined || yieldArray?.length == 0) return null; if (yieldArray == undefined || yieldArray?.length == 0) return null;
for (let i = 0; i < yieldArray.length; ++i) { for (let i = 0; i < yieldArray.length; ++i) {
if (yieldArray[i].name == "钢1线") { if (yieldArray[i].name == "钢1线") {
result[0] = parseFloat(yieldArray[i].data) || 0; result[0] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢2线") { } else if (yieldArray[i].name == "钢2线") {
result[1] = parseFloat(yieldArray[i].data) || 0; result[1] = parseInt(yieldArray[i].data);
} else if (yieldArray[i].name == "钢3线") { } else if (yieldArray[i].name == "钢3线") {
result[2] = parseFloat(yieldArray[i].data) || 0; result[2] = parseInt(yieldArray[i].data);
} else { } else {
// 合计 // 合计
result[3] = parseFloat(yieldArray[i].data) || 0; result[3] = parseInt(yieldArray[i].data);
} }
} }
return result; return result;
} }
function setupChart(chart, dom, data) { function setupChart(chart, dom, data) {
if (chart.value) { if (chart.value) chart.value.dispose();
chart.value.dispose();
chart.value = null;
}
nextTick(() => { nextTick(() => {
chart.value = echarts.init(dom); chart.value = echarts.init(dom);
setupFn(chart.value, data); setupFn(chart.value, data);

1
src/full-eq-list.css
View File

@ -61,7 +61,6 @@
.absolute { .absolute {
position: absolute; position: absolute;
padding: 8px; padding: 8px;
z-index: 200;
} }
.v-1 { .v-1 {

23
src/main.js
View File

@ -1,19 +1,16 @@
import { createApp } from "vue"; import { createApp } from 'vue';
import { createPinia } from "pinia"; import { createPinia } from 'pinia'
import "./style.css";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import Vue3Marquee from "vue3-marquee";
import App from "./App.vue";
const pinia = createPinia();
setTimeout(() => { import './style.css';
window.location.reload(); import ElementPlus from 'element-plus';
}, 24 * 60 * 60 * 1000); import 'element-plus/dist/index.css';
import Vue3Marquee from 'vue3-marquee';
import App from './App.vue';
const pinia = createPinia()
const app = createApp(App); const app = createApp(App);
app.use(pinia); app.use(pinia);
app.use(ElementPlus); app.use(ElementPlus);
app.use(Vue3Marquee, { name: "ScrollText" }); app.use(Vue3Marquee, { name: 'ScrollText' });
app.mount("#app"); app.mount('#app');

14
src/store/index.js
View File

@ -32,3 +32,17 @@ export const useWsStore = defineStore("wsData", () => {
return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData }; return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
}); });
// export const useWsStore = defineStore('wsData', {
// state: () => ({
// data1: {
// test: 'hello world'
// },
// data2: null,
// data3: null,
// }),
// actions: {
// updateData(category, data) {
// this[category] = data
// }
// }
// })

114
src/utils/glass.js
View File

@ -1,114 +0,0 @@
import glassImgSrc from "../assets/glass.png";
const positionMapping = {
A1: {
M101: [640, 420, -26, 150], // top, left, angle, distance(px)
M201: [675, 420, -26, 150],
M105_1: [530, 680, -28, 128],
M205_1: [560, 680, -28, 138],
},
A2: {
M101_1: [440, 880, -28, 100],
M201_1: [470, 880, -28, 60],
// M201_1: {
// // 分段
// 0: [0, 0, 60, 400],
// 1: [0, 0, 60, 400],
// 2: [0, 0, 60, 400],
// },
},
A3: {
M101_1: [285, 1250, -32, 140],
},
B1: {
M101: [720, 410, -27, 190],
M201: [760, 410, -27, 215],
M301: [800, 410, -27, 240],
M105_1: [590, 710, -28, 140],
M205_1: [615, 730, -29, 145],
M305_1: [640, 750, -29, 150],
},
B2: {
M101: [490, 930, -30, 60],
M201: [515, 960, -30, 80],
M301: [530, 990, -30, 50],
},
B3: {
M101: [350, 1310, -32, 180],
},
C1: {
M101: [825, 510, -27, 190],
M201: [870, 510, -27, 210],
M104_1: [705, 760, -26, 150],
M204_1: [740, 775, -26, 165],
},
C2: {
// M101: { 0: [], 1: [] },
M101: [590, 980, -28, 30],
M201: [620, 1000, -29, 150],
},
C3: {
M101: [415, 1400, -34, 210],
},
};
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;
valid = true;
constructor(positionStr, size, bgColor) {
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 = bgColor || "#f00";
this.el.style.position = "absolute";
this.el.style.top = top ? `${top}px` : "740px";
this.el.style.left = left ? `${left}px` : "380px";
this.distance = distance || 100;
// this.el.style.border = "3px solid red";
// this.el.style.display = "none";
this.el.style.borderRadius = "2px";
this.el.style.boxShadow = "0 0 10px 2px #000";
this.el.style.width = size ? `${size}px` : "16px";
this.el.style.height = size ? `${size}px` : "16px";
this.el.style.transformOrigin = "center";
this.el.style.transition = `all ${distance / 25}s linear`;
this.el.style.zIndex = "100";
this.el.style.pointerEvents = "none";
// this.el.style.transform = `rotate(${angle}deg) skew(32deg, 8deg)`;
this.el.style.transform = `rotate(${angle}deg) skew(${
-1 * angle
}deg, ${Math.floor((-1 * angle) / 4.5)}deg)`;
// debugger;
document.getElementById("glass-layer").appendChild(this.el);
this.el.addEventListener("transitionend", () => {
// document.body.removeChild(this.el);
this.el.style.opacity = 0;
this.valid = false;
});
}
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);
this.el.style.opacity = 1;
}
}