add 波片移动
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
c6f5bc7d80
commit
149e801d6d
@ -1,4 +1,4 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@ -6,8 +6,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
</head>
|
||||
<body style="position: relative;">
|
||||
<body style="position: relative">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!-- 报警列表页面 -->
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, watchEffect } from "vue";
|
||||
import { useWsStore } from "./store";
|
||||
import Container from "./components/Base/Container.vue";
|
||||
import DatetimeTool from "./components/HeadTime.vue";
|
||||
@ -10,23 +10,84 @@ 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 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();
|
||||
connect0(store);
|
||||
const props = defineProps({
|
||||
line: {
|
||||
type: Number,
|
||||
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(
|
||||
(store.mainDataAlarm.alarmArrList || []).map((item, index) => ({
|
||||
@ -39,20 +100,18 @@ const alarmList = ref(
|
||||
}))
|
||||
);
|
||||
store.$subscribe((mutation, state) => {
|
||||
alarmList.value = state.mainDataAlarm.alarmArrList.map((item, index) => ({
|
||||
id: item.id,
|
||||
eqName: item.equipmentName,
|
||||
eqIndex: index + 1,
|
||||
alarmGrade: item.alarmLevel,
|
||||
alarmDetail: item.alarmDetails,
|
||||
position: `${item.productLine} - ${item.segment}`,
|
||||
}));
|
||||
alarmList.value = (state.mainDataAlarm.alarmArrList || []).map(
|
||||
(item, index) => ({
|
||||
id: item.id,
|
||||
eqName: item.equipmentName,
|
||||
eqIndex: index + 1,
|
||||
alarmGrade: item.alarmLevel,
|
||||
alarmDetail: item.alarmDetails,
|
||||
position: `${item.productLine} - ${item.segment}`,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// function handleIgnore() {
|
||||
// alarmList.value.splice(0)
|
||||
// }
|
||||
|
||||
function handleResolutionChange(width, height) {
|
||||
mainContainer.value && changeScale(mainContainer.value, width, height);
|
||||
}
|
||||
@ -67,7 +126,7 @@ function handleResolutionChange(width, height) {
|
||||
<Tools @change-resolution="handleResolutionChange" />
|
||||
<AppHeader />
|
||||
|
||||
<div class="alert-list-page">
|
||||
<div class="alert-list-page" v-if="0">
|
||||
<Container class="alert-list" title="报警列表" icon="cube">
|
||||
<div class="alert-list__table" style="">
|
||||
<el-table
|
||||
|
||||
@ -32,17 +32,3 @@ export const useWsStore = defineStore("wsData", () => {
|
||||
|
||||
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
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
@ -2,51 +2,53 @@ 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: [],
|
||||
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: {
|
||||
M1: [740, 380, -24, 100],
|
||||
M2: {
|
||||
// 分段
|
||||
0: [0, 0, 60, 400],
|
||||
1: [0, 0, 60, 400],
|
||||
2: [0, 0, 60, 400],
|
||||
},
|
||||
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: {
|
||||
M1: [],
|
||||
M101_1: [285, 1250, -32, 140],
|
||||
},
|
||||
B1: {
|
||||
M1: [],
|
||||
M2: [],
|
||||
M3: [],
|
||||
M105s: [],
|
||||
M205: [],
|
||||
M305: [],
|
||||
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: {
|
||||
M1: [],
|
||||
M2: [],
|
||||
M3: [],
|
||||
M101: [490, 930, -30, 60],
|
||||
M201: [515, 960, -30, 80],
|
||||
M301: [530, 990, -30, 50],
|
||||
},
|
||||
B3: {
|
||||
M1: [],
|
||||
M101: [350, 1310, -32, 180],
|
||||
},
|
||||
C1: {
|
||||
M1: [],
|
||||
M2: [],
|
||||
M104: [],
|
||||
M204: [],
|
||||
M101: [825, 510, -27, 190],
|
||||
M201: [870, 510, -27, 210],
|
||||
M104_1: [705, 760, -26, 150],
|
||||
M204_1: [740, 775, -26, 165],
|
||||
},
|
||||
C2: {
|
||||
M1: { 0: [], 1: [] },
|
||||
M2: [],
|
||||
// M101: { 0: [], 1: [] },
|
||||
M101: [590, 980, -28, 30],
|
||||
M201: [620, 1000, -29, 150],
|
||||
},
|
||||
C3: {
|
||||
M1: [],
|
||||
M101: [415, 1400, -34, 210],
|
||||
},
|
||||
};
|
||||
|
||||
@ -65,29 +67,39 @@ function calcPosition(positionString = "") {
|
||||
export default class Glass {
|
||||
el = null;
|
||||
distance = 100;
|
||||
visibleOnScreen = false;
|
||||
valid = true;
|
||||
|
||||
constructor(positionStr) {
|
||||
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 = "#f00";
|
||||
this.el.style.background = bgColor || "#f00";
|
||||
this.el.style.position = "absolute";
|
||||
this.el.style.top = `${top}px` || "740px";
|
||||
this.el.style.left = `${left}px` || "380px";
|
||||
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.width = "18px";
|
||||
this.el.style.height = "18px";
|
||||
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 3s linear";
|
||||
this.el.style.transition = `all ${distance / 25}s linear`;
|
||||
this.el.style.zIndex = "9999";
|
||||
this.el.style.pointerEvents = "none";
|
||||
this.el.style.transform = `rotate(${angle}deg) skew(8deg)`;
|
||||
// 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.body.appendChild(this.el);
|
||||
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() {
|
||||
@ -97,5 +109,6 @@ export default class Glass {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user