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

update

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-08 17:09:26 +08:00
parent 149e801d6d
commit 6d57597aa1
10 changed files with 103 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -8,10 +8,10 @@
</head> </head>
<body style="position: relative"> <body style="position: relative">
<div id="app"></div> <div id="app"></div>
<div <!-- <div
id="glass-layer" id="glass-layer"
style="position: absolute; top: 0; left: 0; height: 100%" style="position: absolute; top: 0; left: 0; height: 100%"
></div> ></div> -->
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

33
src/AlertListScreen.vue
View File

@ -1,7 +1,8 @@
<!-- 报警列表页面 --> <!-- 报警列表页面 -->
<script setup> <script setup>
import { ref, watchEffect } 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";
@ -39,6 +40,7 @@ const allowedList = [
"c1m201", "c1m201",
].map((item) => item.toUpperCase()); ].map((item) => item.toUpperCase());
const store = useWsStore(); const store = useWsStore();
const settingStore = useSettings();
connect0(store); connect0(store);
const props = defineProps({ const props = defineProps({
line: { line: {
@ -112,8 +114,26 @@ store.$subscribe((mutation, state) => {
); );
}); });
// 检查状态
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>
@ -126,7 +146,12 @@ function handleResolutionChange(width, height) {
<Tools @change-resolution="handleResolutionChange" /> <Tools @change-resolution="handleResolutionChange" />
<AppHeader /> <AppHeader />
<div class="alert-list-page" v-if="0"> <div
id="glass-layer"
style="position: absolute; top: 0; left: 0; height: 100%"
></div>
<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
@ -238,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;
@ -272,6 +296,7 @@ function handleResolutionChange(width, height) {
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 {

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 {

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

@ -93,7 +93,10 @@ function loadData(yieldArray) {
} }
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");

2
src/utils/glass.js
View File

@ -87,7 +87,7 @@ export default class Glass {
this.el.style.height = 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 ${distance / 25}s linear`; this.el.style.transition = `all ${distance / 25}s linear`;
this.el.style.zIndex = "9999"; this.el.style.zIndex = "100";
this.el.style.pointerEvents = "none"; this.el.style.pointerEvents = "none";
// this.el.style.transform = `rotate(${angle}deg) skew(32deg, 8deg)`; // this.el.style.transform = `rotate(${angle}deg) skew(32deg, 8deg)`;
this.el.style.transform = `rotate(${angle}deg) skew(${ this.el.style.transform = `rotate(${angle}deg) skew(${