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

Compare commits

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

4 Commits
9c3b9218d2 ... 6d57597aa1

Author SHA1 Message Date
DESKTOP-FUDKNA8\znjsz
6d57597aa1 update 2024-03-08 17:09:26 +08:00
DESKTOP-FUDKNA8\znjsz
149e801d6d add 波片移动 2024-03-08 16:31:44 +08:00
DESKTOP-FUDKNA8\znjsz
c6f5bc7d80 add glass 2024-03-08 10:17:05 +08:00
DESKTOP-FUDKNA8\znjsz
822732742d update alert list screen 2024-03-06 10:14:35 +08:00
13 changed files with 340 additions and 108 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,8 +6,12 @@
<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> <body style="position: relative">
<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,27 +1,98 @@
<!-- 报警列表页面 --> <!-- 报警列表页面 -->
<script setup> <script setup>
import { ref } from "vue"; import { ref, watchEffect, onMounted } 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 mainContainer = ref(null); const allowedList = [
"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 store = useWsStore(); const mainContainer = ref(null);
const grassArr = ref({});
connect0(store); const doRender = (data) => {
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.data1.alarmArrList || []).map((item, index) => ({ (store.mainDataAlarm.alarmArrList || []).map((item, index) => ({
id: item.id, id: item.id,
eqName: item.equipmentName, eqName: item.equipmentName,
eqIndex: index + 1, eqIndex: index + 1,
@ -30,49 +101,69 @@ const alarmList = ref(
position: `${item.productLine} - ${item.segment}`, position: `${item.productLine} - ${item.segment}`,
})) }))
); );
// store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
// alarmList.value = state.data1.alarmArrList.map((item, index) => ({ alarmList.value = (state.mainDataAlarm.alarmArrList || []).map(
// id: item.id, (item, index) => ({
// eqName: item.equipmentName, id: item.id,
// eqIndex: index + 1, eqName: item.equipmentName,
// alarmGrade: item.alarmLevel, eqIndex: index + 1,
// alarmDetail: item.alarmDetails, alarmGrade: item.alarmLevel,
// position: `${item.productLine} - ${item.segment}`, alarmDetail: item.alarmDetails,
// })); 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 && changeScale(mainContainer.value, width, height); mainContainer.value &&
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 /> <FullEqList v-if="0" />
</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="80" width="90"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="eqIndex" prop="eqIndex"
@ -81,15 +172,34 @@ function handleResolutionChange(width, height) {
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="alarmGrade" prop="alarmGrade"
label="报警等级" label="等级"
width="100" width="60"
></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="alarmDetail" prop="position"
label="报警细节" width="128"
width="144" label="定位"
></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> -->
@ -153,7 +263,6 @@ 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;
@ -182,11 +291,12 @@ function handleResolutionChange(width, height) {
.alert-list { .alert-list {
height: calc(100% - 56px); height: calc(100% - 56px);
width: 520px; width: 640px;
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,6 +6,7 @@ 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,7 +1,8 @@
<!-- 报警列表页面 --> <!-- 报警列表页面 -->
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } 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";
@ -20,34 +21,25 @@ const props = defineProps({
}, },
}); });
const store = useWsStore(); const store = useWsStore();
const settingStore = useSettings();
connect0(store); connect0(store);
const alarmList = ref( // 检查状态
(store.data1.alarmArrList || []).map((item, index) => ({ onMounted(() => {
id: item.id, const settings = settingStore.settings;
eqName: item.equipmentName, // 设置分辨率
eqIndex: index + 1, handleResolutionChange(settings.resolution.width, settings.resolution.height);
alarmGrade: item.alarmLevel, });
alarmDetail: item.alarmDetails, function changeScale(elm, width, height) {
position: `${item.productLine} - ${item.segment}`, const xScale = width / 1920;
})) const yScale = height / 1080;
); const style = {
// store.$subscribe((mutation, state) => { transform: `scale(${xScale}, ${yScale})`,
// alarmList.value = state.data1.alarmArrList.map((item, index) => ({ transformOrigin: "top left",
// id: item.id, };
// eqName: item.equipmentName, elm.style.transform = style.transform;
// eqIndex: index + 1, elm.style.transformOrigin = style.transformOrigin;
// 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);
} }
@ -56,7 +48,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 /> <FullEqList v-if="0" />
</div> </div>
<DatetimeTool /> <DatetimeTool />
<Tools @change-resolution="handleResolutionChange" /> <Tools @change-resolution="handleResolutionChange" />
@ -189,6 +181,7 @@ 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 Normal file
View File

Binary file not shown.
Side by Side

After

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: 1000; z-index: 1001;
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,14 +38,33 @@ 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 v-if="settings.carousel" <span
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;"> v-if="settings.carousel"
{{ settings.carouselTime }}S</span> 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;
"
>
{{ settings.carouselTime }}S</span
>
<IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" /> <IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
</button> </button>
</div> </div>
<SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" /> <Teleport to="body">
<SettingDialogVue
v-if="visible"
@close="visible = false"
@change-resolution="handleChangeResolution"
/>
</Teleport>
</template> </template>
<style scoped> <style scoped>
@ -55,7 +74,7 @@ function handleChangeResolution(w, h) {
right: 24px; right: 24px;
display: flex; display: flex;
gap: 0px; gap: 0px;
z-index: 3; z-index: 1000;
} }
button { button {
@ -86,7 +105,6 @@ 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,7 +4,6 @@ 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 = {
@ -79,14 +78,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] = parseInt(yieldArray[i].data); result[0] = parseFloat(yieldArray[i].data) || 0;
} else if (yieldArray[i].name == "钢2线") { } else if (yieldArray[i].name == "钢2线") {
result[1] = parseInt(yieldArray[i].data); result[1] = parseFloat(yieldArray[i].data) || 0;
} else if (yieldArray[i].name == "钢3线") { } else if (yieldArray[i].name == "钢3线") {
result[2] = parseInt(yieldArray[i].data); result[2] = parseFloat(yieldArray[i].data) || 0;
} else { } else {
// 合计 // 合计
result[3] = parseInt(yieldArray[i].data); result[3] = parseFloat(yieldArray[i].data) || 0;
} }
} }
return result; return result;

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

@ -79,21 +79,24 @@ 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] = parseInt(yieldArray[i].data); result[0] = parseFloat(yieldArray[i].data) || 0;
} else if (yieldArray[i].name == "钢2线") { } else if (yieldArray[i].name == "钢2线") {
result[1] = parseInt(yieldArray[i].data); result[1] = parseFloat(yieldArray[i].data) || 0;
} else if (yieldArray[i].name == "钢3线") { } else if (yieldArray[i].name == "钢3线") {
result[2] = parseInt(yieldArray[i].data); result[2] = parseFloat(yieldArray[i].data) || 0;
} else { } else {
// 合计 // 合计
result[3] = parseInt(yieldArray[i].data); result[3] = parseFloat(yieldArray[i].data) || 0;
} }
} }
return result; return result;
} }
function setupChart(chart, dom, data) { function setupChart(chart, dom, data) {
if (chart.value) chart.value.dispose(); if (chart.value) {
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,6 +61,7 @@
.absolute { .absolute {
position: absolute; position: absolute;
padding: 8px; padding: 8px;
z-index: 200;
} }
.v-1 { .v-1 {

23
src/main.js
View File

@ -1,16 +1,19 @@
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();
import './style.css'; setTimeout(() => {
import ElementPlus from 'element-plus'; window.location.reload();
import 'element-plus/dist/index.css'; }, 24 * 60 * 60 * 1000);
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,17 +32,3 @@ 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 Normal file
View File

@ -0,0 +1,114 @@
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;
}
}