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

add 波片移动

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-08 14:21:07 +08:00
parent c6f5bc7d80
commit 149e801d6d
4 changed files with 141 additions and 79 deletions
Show Stats Download Patch File Download Diff File 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 style="position: relative;"> <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>

107
src/AlertListScreen.vue
View File

@ -1,6 +1,6 @@
<!-- 报警列表页面 --> <!-- 报警列表页面 -->
<script setup> <script setup>
import { ref } from "vue"; import { ref, watchEffect } from "vue";
import { useWsStore } from "./store"; import { useWsStore } from "./store";
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";
@ -10,23 +10,84 @@ import FullEqList from "./FullEqList.vue";
import { connect0 } from "./utils/useWebsocket"; import { connect0 } from "./utils/useWebsocket";
import Glass from "./utils/glass"; import Glass from "./utils/glass";
// const allowedList = [
const gls = new Glass("a2m1"); "c2m101",
setTimeout(() => { "c2m201",
gls.move(); "c1m104_1",
}, 1000); "c1m204_1",
// "c2m101",
"c2m201",
const mainContainer = ref(null); "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({ 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.mainDataAlarm.alarmArrList || []).map((item, index) => ({ (store.mainDataAlarm.alarmArrList || []).map((item, index) => ({
@ -39,20 +100,18 @@ const alarmList = ref(
})) }))
); );
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
alarmList.value = state.mainDataAlarm.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)
// }
function handleResolutionChange(width, height) { function handleResolutionChange(width, height) {
mainContainer.value && changeScale(mainContainer.value, width, height); mainContainer.value && changeScale(mainContainer.value, width, height);
} }
@ -67,7 +126,7 @@ function handleResolutionChange(width, height) {
<Tools @change-resolution="handleResolutionChange" /> <Tools @change-resolution="handleResolutionChange" />
<AppHeader /> <AppHeader />
<div class="alert-list-page"> <div class="alert-list-page" v-if="0">
<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

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
// }
// }
// })

91
src/utils/glass.js
View File

@ -2,51 +2,53 @@ import glassImgSrc from "../assets/glass.png";
const positionMapping = { const positionMapping = {
A1: { A1: {
M1: [0, 0, 60, 400], // x, y, angle, distance(px) M101: [640, 420, -26, 150], // top, left, angle, distance(px)
M2: [0, 0, 60, 400], M201: [675, 420, -26, 150],
M105: [], M105_1: [530, 680, -28, 128],
M205: [], M205_1: [560, 680, -28, 138],
}, },
A2: { A2: {
M1: [740, 380, -24, 100], M101_1: [440, 880, -28, 100],
M2: { M201_1: [470, 880, -28, 60],
// 分段 // M201_1: {
0: [0, 0, 60, 400], // // 分段
1: [0, 0, 60, 400], // 0: [0, 0, 60, 400],
2: [0, 0, 60, 400], // 1: [0, 0, 60, 400],
}, // 2: [0, 0, 60, 400],
// },
}, },
A3: { A3: {
M1: [], M101_1: [285, 1250, -32, 140],
}, },
B1: { B1: {
M1: [], M101: [720, 410, -27, 190],
M2: [], M201: [760, 410, -27, 215],
M3: [], M301: [800, 410, -27, 240],
M105s: [], M105_1: [590, 710, -28, 140],
M205: [], M205_1: [615, 730, -29, 145],
M305: [], M305_1: [640, 750, -29, 150],
}, },
B2: { B2: {
M1: [], M101: [490, 930, -30, 60],
M2: [], M201: [515, 960, -30, 80],
M3: [], M301: [530, 990, -30, 50],
}, },
B3: { B3: {
M1: [], M101: [350, 1310, -32, 180],
}, },
C1: { C1: {
M1: [], M101: [825, 510, -27, 190],
M2: [], M201: [870, 510, -27, 210],
M104: [], M104_1: [705, 760, -26, 150],
M204: [], M204_1: [740, 775, -26, 165],
}, },
C2: { C2: {
M1: { 0: [], 1: [] }, // M101: { 0: [], 1: [] },
M2: [], M101: [590, 980, -28, 30],
M201: [620, 1000, -29, 150],
}, },
C3: { C3: {
M1: [], M101: [415, 1400, -34, 210],
}, },
}; };
@ -65,29 +67,39 @@ function calcPosition(positionString = "") {
export default class Glass { export default class Glass {
el = null; el = null;
distance = 100; distance = 100;
visibleOnScreen = false; valid = true;
constructor(positionStr) { constructor(positionStr, size, bgColor) {
const { left, top, angle, distance } = calcPosition(positionStr); const { left, top, angle, distance } = calcPosition(positionStr);
// this.el = document.createElement("img"); // this.el = document.createElement("img");
// this.el.src = glassImgSrc; // this.el.src = glassImgSrc;
this.el = document.createElement("div"); this.el = document.createElement("div");
this.el.style.background = "#f00"; this.el.style.background = bgColor || "#f00";
this.el.style.position = "absolute"; this.el.style.position = "absolute";
this.el.style.top = `${top}px` || "740px"; this.el.style.top = top ? `${top}px` : "740px";
this.el.style.left = `${left}px` || "380px"; this.el.style.left = left ? `${left}px` : "380px";
this.distance = distance || 100; this.distance = distance || 100;
// this.el.style.border = "3px solid red"; // this.el.style.border = "3px solid red";
// this.el.style.display = "none"; // this.el.style.display = "none";
this.el.style.width = "18px"; this.el.style.borderRadius = "2px";
this.el.style.height = "18px"; 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.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.zIndex = "9999";
this.el.style.pointerEvents = "none"; 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; // 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() { get visible() {
@ -97,5 +109,6 @@ export default class Glass {
move() { move() {
const getTranslate = (d) => `${d}px ${-1 * Math.floor(Math.cos(24) * d)}px`; const getTranslate = (d) => `${d}px ${-1 * Math.floor(Math.cos(24) * d)}px`;
this.el.style.translate = getTranslate(this.distance); this.el.style.translate = getTranslate(this.distance);
this.el.style.opacity = 1;
} }
} }