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

update main-screen glass

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-11 09:43:50 +08:00
parent 6d57597aa1
commit d56efd1c2f
3 changed files with 102 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/AlertListScreen.vue
View File

@ -1,6 +1,6 @@
<!-- 报警列表页面 -->
<script setup>
import { ref, watchEffect, onMounted } from "vue";
import { ref, onMounted } from "vue";
import { useWsStore } from "./store";
import { useSettings } from "./store/settings";
import Container from "./components/Base/Container.vue";
@ -8,40 +8,11 @@ import DatetimeTool from "./components/HeadTime.vue";
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";
import { useGlass } from "./utils/glass";
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 GlassContainer = useGlass(store);
const settingStore = useSettings();
connect0(store);
const props = defineProps({
line: {
type: Number,
@ -49,48 +20,6 @@ const props = defineProps({
},
});
const mainContainer = ref(null);
const grassArr = ref({});
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) => ({
id: item.id,
@ -146,10 +75,11 @@ function handleResolutionChange(width, height) {
<Tools @change-resolution="handleResolutionChange" />
<AppHeader />
<div
<GlassContainer />
<!-- <div
id="glass-layer"
style="position: absolute; top: 0; left: 0; height: 100%"
></div>
></div>-->
<div class="alert-list-page">
<Container class="alert-list" title="报警列表" icon="cube">

6
src/MainScreen.vue
View File

@ -11,7 +11,7 @@ import SumYield from "./components/mainscreen/SumYield.vue";
import TodayRate from "./components/mainscreen/TodayRate.vue";
import SumRate from "./components/mainscreen/SumRate.vue";
import FullEqList from "./FullEqList.vue";
import { connect0 } from "./utils/useWebsocket";
import { useGlass } from "./utils/glass";
const mainContainer = ref(null);
const props = defineProps({
@ -21,8 +21,8 @@ const props = defineProps({
},
});
const store = useWsStore();
const GlassContainer = useGlass(store);
const settingStore = useSettings();
connect0(store);
// 检查状态
onMounted(() => {
@ -54,6 +54,8 @@ function handleResolutionChange(width, height) {
<Tools @change-resolution="handleResolutionChange" />
<AppHeader />
<GlassContainer />
<div class="main-screen">
<!-- <div
style="

92
src/utils/glass.js
View File

@ -1,4 +1,6 @@
import glassImgSrc from "../assets/glass.png";
import { connect0 } from "./useWebsocket";
import { ref, watchEffect, onMounted, h } from "vue";
const positionMapping = {
A1: {
@ -112,3 +114,93 @@ export default class Glass {
this.el.style.opacity = 1;
}
}
/** 允许展示的工段 */
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());
export function useGlass(store) {
onMounted(() => {
connect0(store);
});
const grassArr = ref({});
const doRender = (data) => {
return setTimeout(() => {
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);
});
});
return h("div", {
id: "glass-layer",
style: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
pointerEvents: "none",
},
});
}